/* Product & catalog pages (generated by tools/build-products.js). Builds on site.css. */

/* bilingual text: both languages are in the page, <html lang> picks one */
html[lang="tr"] [data-l]:not([data-l="tr"]), html[lang="en"] [data-l]:not([data-l="en"]), html[lang="fr"] [data-l]:not([data-l="fr"]) { display: none !important; }

.crumbs { font-size: 14px; color: var(--on-dark-muted); margin-bottom: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.crumbs a:hover { color: #fff; }
.crumbs .sep { opacity: .5; }

/* product hero */
.p-hero { background: radial-gradient(120% 95% at 88% 0%, #3D8DAE 0%, #17698C 22%, var(--ink) 55%, #033D59 100%); color: #fff; padding: 56px 0 72px; }
.p-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
.p-hero h1 { color: var(--on-dark); font-size: clamp(34px, 4.6vw, 58px); margin-bottom: 14px; letter-spacing: -.03em; }
.p-hero .tagline { color: var(--galv); font-family: 'Plus Jakarta Sans'; font-weight: 600; font-size: 18px; margin-bottom: 18px; }
.p-hero .lead { color: var(--on-dark-muted); font-size: 17px; max-width: 62ch; margin-bottom: 28px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.chip { border: 1px solid var(--line-dark); border-radius: 10px; padding: 9px 13px; background: rgba(255,255,255,.05); }
.chip .k { display: block; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-muted); }
.chip .v { font-family: 'Plus Jakarta Sans'; font-weight: 700; font-size: 15px; color: var(--on-dark); }

.p-gallery .main { height: 440px; background: #fff; }
.p-gallery .main img { object-fit: cover; }
.p-gallery .thumbs { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }
.p-gallery .thumb { background: #fff; }

/* sections */
.p-section { padding: 80px 0; }
.p-section h2 { font-size: clamp(26px, 3.2vw, 38px); margin-bottom: 26px; }
.two-col { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: start; }
.feat-list { list-style: none; display: grid; gap: 0; }
.feat-list li { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 16.5px; }
.feat-list li:last-child { border-bottom: 1px solid var(--line); }
.feat-list .dot { flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-size: 12px; margin-top: 2px; }
.spec-card { background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 28px; }
.spec-card h3 { font-size: 20px; margin-bottom: 12px; }

/* data tables */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
table.data { width: 100%; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; }
table.data th { background: var(--ink); color: #fff; font-family: 'Plus Jakarta Sans'; font-weight: 600; font-size: 12.5px; text-align: left; padding: 10px 12px; white-space: nowrap; }
table.data td { padding: 9px 12px; border-top: 1px solid var(--line); white-space: nowrap; }
table.data tr:nth-child(even) td { background: #F6F9FA; }
table.data td:first-child { font-weight: 700; color: var(--ink); }
.tbl-caption { font-size: 14px; color: var(--grey); margin: 10px 0 0; }
.extra-table { margin-bottom: 36px; }
.extra-table h3 { font-size: 20px; margin-bottom: 12px; }

/* components */
.comp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.comp { background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: grid; grid-template-columns: 170px minmax(0, 1fr); }
.comp .pic { background: #fff; display: grid; place-items: center; padding: 10px; border-right: 1px solid var(--line); }
.comp .pic img { max-height: 170px; width: auto; max-width: 100%; object-fit: contain; }
.comp .body { padding: 18px 18px 20px; min-width: 0; }
.comp h3 { font-size: 18px; margin-bottom: 10px; }
.comp .note { font-size: 13.5px; color: var(--grey); margin-top: 10px; }
.comp .tbl-wrap { border-radius: 8px; }
.comp table.data { font-size: 13.5px; }
.comp table.data th, .comp table.data td { padding: 7px 10px; }
.comp.wide { grid-column: 1 / -1; }
.comp.nopic { grid-template-columns: 1fr; }

/* accessories grid */
.acc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
.acc { background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .3s, box-shadow .3s; }
.acc:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(5,46,68,.1); }
.acc .pic { height: 170px; background: #fff; display: grid; place-items: center; padding: 12px; border-bottom: 1px solid var(--line); }
.acc .pic img { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.acc .body { padding: 14px 16px 16px; }
.acc h3 { font-size: 16.5px; margin-bottom: 4px; }
.acc .code { font-size: 13px; color: var(--steel); font-weight: 700; }
.acc .size { font-size: 13px; color: var(--grey); }

/* steps */
.steps { counter-reset: s; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.step { background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.step::before { counter-increment: s; content: counter(s); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--amber); color: var(--ink-deep); font-weight: 800; font-family: 'Plus Jakarta Sans'; margin-bottom: 12px; }

.disclaimer { font-size: 13.5px; color: var(--grey); border-left: 3px solid var(--galv); padding: 6px 0 6px 14px; margin-top: 30px; max-width: 80ch; }

/* catalog index & related cards */
.cat-block { margin-bottom: 64px; }
.cat-block h2 { font-size: clamp(24px, 3vw, 34px); margin-bottom: 22px; display: flex; align-items: baseline; gap: 12px; }
.cat-block h2 .count { font-size: 15px; color: var(--grey); font-weight: 600; }
.p-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.p-card { background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .3s, box-shadow .3s, border-color .3s; }
.p-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(5,46,68,.12); border-color: #B8C9D1; }
.p-card .pic { height: 190px; overflow: hidden; background: #fff; }
.p-card .pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.p-card .pic.contain img { object-fit: contain; padding: 14px; }
.p-card:hover .pic img { transform: scale(1.06); }
.p-card .body { padding: 18px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.p-card h3 { font-size: 19px; margin-bottom: 6px; }
.p-card p { font-size: 14.5px; color: var(--grey); margin-bottom: 14px; }
.p-card .link-arrow { margin-top: auto; }

.p-index-hero { padding: 64px 0 70px; }

/* steel door pages */
.p-card .pic.door { background: #EEF2F4; }
.p-card .pic.door img { object-fit: contain; }
.model-count { font-size: 13px; font-weight: 700; color: var(--steel); margin-bottom: 12px; }
.door-hero { background: #fff; aspect-ratio: 827 / 630; }
.door-hero img { object-fit: contain; }
.sheet-hint { color: var(--grey); margin: -14px 0 26px; }
.part-title { font-size: 20px; margin: 30px 0 14px; }
.sheet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.sheet { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .3s, box-shadow .3s; }
.sheet:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(5,46,68,.1); }
.sheet img { width: 100%; height: auto; display: block; }
.sheet figcaption { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--line); }
.mno { font-family: 'Plus Jakarta Sans'; font-weight: 700; font-size: 14px; color: var(--ink); }
.mno::before { content: none; }
.anatomy { list-style: none; counter-reset: a; display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.anatomy li { counter-increment: a; display: flex; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); font-size: 16px; }
.anatomy li::before { content: counter(a); flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 700; display: grid; place-items: center; }
.spec-card .note { font-size: 13.5px; color: var(--grey); margin-top: 14px; }

/* wooden paneling */
.p-card .pic.panel { background: #EEF2F4; }
.panel-hero { aspect-ratio: 4 / 3; box-shadow: 0 24px 60px rgba(0,0,0,.28); }
.panel-hero.swatch { background: #fff; }
.p-section h2 .count { font-size: 15px; color: var(--grey); font-weight: 600; margin-left: 8px; }
.swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.swatch { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .3s, box-shadow .3s; }
.swatch:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(5,46,68,.1); }
.swatch a { display: block; aspect-ratio: 1; background: #EEF2F4; }
.swatch img { width: 100%; height: 100%; object-fit: cover; display: block; }
.swatch figcaption { padding: 10px 12px; font-family: 'Plus Jakarta Sans'; font-weight: 700; font-size: 14.5px; color: var(--ink); border-top: 1px solid var(--line); }
.scene-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.scene-grid .photo { aspect-ratio: 4 / 3; margin: 0; }
.scene-grid.one { grid-template-columns: 1fr; }
.scene-grid.one .photo { aspect-ratio: 21 / 9; }

.pan-cat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;}
.pan-cat + .pan-cat{margin-top:28px;}
.pan-cat-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:32px;margin-bottom:24px;}
.pan-cat h2{margin-bottom:8px;}
.pan-title{color:inherit;transition:color .2s;}
.pan-title .arr{font-size:.7em;color:var(--amber);display:inline-block;transition:transform .2s;}
.pan-title:hover{color:var(--steel);}
.pan-title:hover .arr{transform:translateX(4px);}
.pan-tagline{font-family:'Plus Jakarta Sans';font-weight:600;color:var(--steel);margin-bottom:10px;}
.pan-summary{color:var(--grey);max-width:62ch;}
.pan-feat{margin-top:16px;}
.pan-feat li{padding:7px 0;}
.p-hero .pan-feat{margin:0 0 26px;}
.p-hero .pan-feat li{color:var(--on-dark);border-color:var(--line-dark);}
.pan-cat-side{display:flex;flex-direction:column;gap:18px;align-items:flex-start;}
.pan-specs{display:grid;gap:0;width:100%;}
.pan-specs div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:14.5px;}
.pan-specs .k{color:var(--grey);}
.pan-specs .v{font-weight:700;color:var(--ink);text-align:right;}

/* product pages: images first, description and sizes underneath */
.p-hero-slim{padding:44px 0 46px;}
.p-hero-slim h1{margin-bottom:10px;}
.p-hero-slim .tagline{margin-bottom:0;}
.p-media{padding-bottom:20px;}
.p-media .p-gallery{max-width:1000px;}
.p-media .p-gallery .main{height:520px;border:1px solid var(--line);background:linear-gradient(180deg,#F5F8F9,#E8EEF0);display:grid;place-items:center;padding:20px;}
.p-media .p-gallery .main img{position:absolute;inset:18px;width:calc(100% - 36px);height:calc(100% - 36px);max-width:none;max-height:none;object-fit:contain;filter:drop-shadow(0 10px 22px rgba(0,0,0,.25));}
.p-media .photo:hover img{transform:none;}
/* blurred copy of the photo fills the frame behind it */
.p-media .p-gallery .main{position:relative;overflow:hidden;}
.p-media .p-gallery .main img.blur-fill{position:absolute;inset:-40px;width:calc(100% + 80px);height:calc(100% + 80px);max-width:none;max-height:none;object-fit:cover;filter:blur(28px) saturate(1.1) brightness(.9);border-radius:0;box-shadow:none;z-index:0;}
.p-media .p-gallery .main img:not(.blur-fill){z-index:1;}
.p-media .p-gallery .thumb{background:#EEF2F4;}
.p-intro{padding-top:36px;}
.intro-lead{font-size:18px;line-height:1.65;color:var(--ink);max-width:70ch;margin-bottom:24px;}
.chips.light .chip{border-color:var(--line);background:#fff;}
.chips.light .chip .k{color:var(--grey);}
.chips.light .chip .v{color:var(--ink);}
.p-intro .pan-feat{max-width:640px;margin:0 0 24px;}
.pan-cat .swatch-grid{margin-bottom:26px;}
.pan-cat-head{margin-bottom:0;}

.swatch.scene-tile{grid-column:span 2;grid-row:span 1;}
.swatch.scene-tile a{aspect-ratio:2 / 1;}
.swatch.scene-tile img{object-fit:cover;}

/* gallery arrows on the big photo */
.p-gallery .g-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:48px;height:48px;border-radius:50%;border:0;background:rgba(3,31,47,.55);color:#fff;font-size:34px;line-height:1;cursor:pointer;display:grid;place-items:center;padding-bottom:4px;transition:background .2s,transform .2s;}
.p-gallery .g-prev{left:14px;}.p-gallery .g-next{right:14px;}
.p-gallery .g-nav:hover{background:var(--amber);transform:translateY(-50%) scale(1.06);}
.p-gallery .g-count{position:absolute;right:14px;bottom:12px;z-index:2;background:rgba(3,31,47,.6);color:#fff;font-size:13px;font-weight:600;padding:4px 10px;border-radius:999px;}

.doc-link.product-pdf{margin-top:22px;}

@media (max-width: 960px) {
  .p-media .p-gallery .main{height:360px;}
  .pan-cat-head{grid-template-columns:1fr;gap:18px;}
  .pan-cat{padding:22px;}
  .p-hero-grid, .two-col { grid-template-columns: 1fr; }
  .comp-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .anatomy { grid-template-columns: 1fr; }
  .p-gallery .main { height: 320px; }
}
@media (max-width: 600px) {
  .comp { grid-template-columns: 1fr; }
  .comp .pic { border-right: none; border-bottom: 1px solid var(--line); }
  .comp .pic img { max-height: 150px; }
  .p-gallery .main { height: 260px; }
  .p-section { padding: 60px 0; }
}