/* ============================================================
   TGS GROUP — PRODUCT DETAIL PAGE STYLESHEET
   Loaded by every individual product page (tgsept-al.html,
   tgstru-g-plus.html, etc.) alongside base.css. Keeps all product
   pages visually identical without duplicating this CSS 8+ times.
   ============================================================ */

.p-hero{position:relative;background:var(--fc);color:#fff;overflow:hidden}
.p-hero-inner{position:relative;display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,70px);align-items:center;padding-block:clamp(40px,6vh,72px)}
.p-media{position:relative;background:#fff;border-radius:var(--r);overflow:hidden;display:grid;place-items:center;padding:clamp(24px,3vw,40px);min-height:320px;animation:rise .9s var(--ease) both .05s}
.p-media img{max-width:100%;max-height:440px;width:auto;height:auto;object-fit:contain}
.p-badges{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px;animation:rise .9s var(--ease) both .1s}
.p-tier{font-family:var(--display);font-style:italic;font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--fc);background:#fff;padding:8px 16px;border-radius:8px}
.p-ru{font-family:var(--display);font-style:italic;font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#fff;border:1.5px solid rgba(255,255,255,.6);border-radius:8px;padding:7px 15px}
.p-hero h1{font-size:clamp(34px,4.4vw,58px);animation:rise .9s var(--ease) both .18s}
.p-hero .lede{color:rgba(255,255,255,.92);animation:rise .9s var(--ease) both .34s}
.p-hero-cta{display:flex;flex-wrap:wrap;gap:16px;margin-top:30px;animation:rise .9s var(--ease) both .42s}
@keyframes rise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}

/* body content */
.p-body{padding-block:clamp(56px,8vw,96px)}
.p-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(36px,5vw,70px);align-items:start}
.p-features{margin-top:8px}
.p-features h2{font-size:clamp(22px,2.2vw,28px);margin-bottom:20px}
.p-features ul{display:flex;flex-direction:column;gap:14px}
.p-features li{display:flex;gap:12px;font-size:15px;color:#3d4149;line-height:1.5}
.p-features .crn{color:var(--fc);width:.65em;height:.65em;flex:none;margin-top:.45em}

/* spec + code tables (sidebar) */
.p-side{display:flex;flex-direction:column;gap:20px}
.p-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--shadow)}
.p-card h3{font-family:var(--display);font-style:italic;font-weight:600;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--fc);margin-bottom:16px}
.p-card table{width:100%;border-collapse:collapse}
.p-card th{font-family:var(--display);font-style:italic;font-weight:600;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#7a7e86;text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
.p-card td{font-size:13px;color:#3d4149;padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.p-card tr:last-child td{border-bottom:none}
.p-card td b{font-family:var(--display);font-style:italic;font-weight:600;color:var(--fc)}
/* ---------- product documents card (MSDS / catalogue / instructions) ----------
   Built as a list so extra PDFs can be added per product without touching CSS.
   Every href is a real Media Library path, baked in - not a theme setting,
   because Ariana keeps stored settings and would never pick up a new default. */
.p-docs{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.p-docs-head{background:var(--fc);color:#fff;padding:16px 22px}
.p-docs-head b{display:block;font-family:var(--display);font-style:italic;font-weight:700;font-size:16px}
.p-docs-head span{font-size:12.5px;color:rgba(255,255,255,.82)}
.p-doc-list{list-style:none;margin:0;padding:0}
.p-doc-list li+li{border-top:1px solid var(--line)}
.p-doc{display:flex;align-items:center;gap:14px;padding:15px 22px;transition:background .25s var(--ease)}
.p-doc:hover{background:color-mix(in srgb,var(--fc) 6%,#fff)}
.p-doc-ico{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:9px;
  background:color-mix(in srgb,var(--fc) 12%,#fff);color:var(--fc);transition:transform .3s var(--ease)}
.p-doc:hover .p-doc-ico{transform:translateY(-2px)}
.p-doc-ico svg{width:17px;height:17px}
.p-doc-txt b{display:block;font-family:var(--display);font-style:italic;font-weight:600;font-size:14px;color:var(--ink)}
.p-doc-txt span{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:#8a8e96}
.p-doc.is-disabled{pointer-events:none;opacity:.5}

.p-tags{display:flex;flex-wrap:wrap;gap:8px}
.p-tag{font-size:11.5px;font-weight:600;color:#5a5e66;background:var(--paper);border:1px solid var(--line);border-radius:99px;padding:5px 12px}

.p-backbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;padding-top:clamp(40px,5vw,64px);margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--line)}
.p-backbar a{font-family:var(--display);font-style:italic;font-weight:600;font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--fc);display:inline-flex;align-items:center;gap:8px}

@media(max-width:1000px){
  .p-hero-inner{grid-template-columns:1fr}
  .p-grid{grid-template-columns:1fr}
  .p-media{min-height:260px}
}
@media(max-width:560px){
  .p-docs-head,.p-doc{padding-inline:18px}
}

/* ---------- placeholder for products without a photo yet ---------- */
.p-media .ph{display:flex;flex-direction:column;align-items:center;gap:14px;opacity:.45}
.p-media .ph img{width:76px;height:auto}
.p-media .ph span{font-family:var(--display);font-style:italic;font-weight:600;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:#8a8e96}

/* ---------- delivery forms ---------- */
.p-delivery{font-family:var(--display);font-style:italic;font-weight:600;font-size:17px;color:var(--fc)}
.p-card table small{color:#8a8e96;font-size:11px}

/* Bulleted About copy (TGSurf AG PLUS ships its description as two points) */
.about-list{margin:0 0 26px;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.about-list li{position:relative;padding-left:26px;font-size:clamp(15px,1.35vw,17px);line-height:1.7;color:#3d4149}
.about-list li::before{content:"";position:absolute;left:0;top:.62em;width:.55em;height:.55em;
  border-top:.16em solid var(--fc);border-right:.16em solid var(--fc)}

/* ---------- Effective Spectrum ----------
   Every organism is its own <tr>; the activity and any shared time span them
   with rowspan. That is what keeps a wrapped organism name from dragging the
   times out of alignment - the row grows, and the cell beside it grows too. */
.p-spectrum table{width:100%;border-collapse:collapse;table-layout:fixed}
.p-spectrum col{}
.p-spectrum thead th{font-family:var(--display);font-style:italic;font-weight:700;font-size:9.5px;
  letter-spacing:.1em;text-transform:uppercase;color:#9a9ea6;text-align:left;
  padding:0 8px 9px;border-bottom:1.5px solid var(--line);vertical-align:bottom}
.p-spectrum thead th:nth-child(1){width:38%}
.p-spectrum thead th:nth-child(2){width:40%}
.p-spectrum thead th:nth-child(3){width:22%;text-align:right}
.p-spectrum tbody th,.p-spectrum tbody td{padding:9px 8px;vertical-align:top;
  font-size:12.5px;line-height:1.45;border-bottom:none}
.p-spectrum tbody tr.sp-first>*{border-top:1px solid var(--line)}
.p-spectrum tbody tr.sp-first:first-child>*{border-top:none}
.p-spectrum .sp-act{font-family:var(--display);font-style:italic;font-weight:600;color:var(--ink);text-align:left}
.p-spectrum .sp-act small{display:block;font-family:var(--body);font-style:normal;font-weight:500;
  font-size:10.5px;color:#9a9ea6;margin-top:3px;white-space:nowrap}
.p-spectrum .sp-type{color:#3d4149;word-break:normal;overflow-wrap:break-word;hyphens:none}
.p-spectrum .sp-time{text-align:right;font-family:var(--display);font-style:italic;font-weight:700;
  color:var(--fc);white-space:nowrap}
@media(max-width:420px){
  .p-spectrum tbody th,.p-spectrum tbody td{font-size:11.5px;padding:8px 4px}
  .p-spectrum thead th{font-size:9px;padding-inline:4px}
  .p-spectrum thead th:nth-child(1){width:34%}
  .p-spectrum thead th:nth-child(2){width:44%}
}

/* ============================================================
   PRODUCT PHOTO GALLERY (hero)
   The shot sits on the white .p-media card; the stage keeps a fixed
   height so a portrait bottle and a landscape jerrycan occupy the same
   box and the hero never reflows when a pack size is switched.
   ============================================================ */
.p-media{padding:clamp(18px,2.2vw,30px)}
.p-gal{margin:0;width:100%;display:flex;flex-direction:column;gap:14px}
.p-gal-stage{display:flex;align-items:center;justify-content:center;overflow:hidden;
  height:clamp(230px,30vw,392px)}
.p-media .p-gal-stage img{max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;transition:opacity .22s var(--ease)}
.p-gal.is-swapping .p-gal-stage img{opacity:0}

.p-gal-thumbs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  padding-top:13px;border-top:1px solid var(--line)}
.p-gal-thumb{display:flex;flex-direction:column;align-items:center;gap:5px;width:66px;padding:6px 4px 5px;
  background:none;border:1.5px solid transparent;border-radius:10px;cursor:pointer;
  transition:border-color .25s var(--ease),background .25s var(--ease)}
.p-gal-thumb:hover{background:var(--paper)}
.p-gal-thumb.is-on{border-color:var(--fc);background:color-mix(in srgb,var(--fc) 7%,#fff)}
.p-gal-thumb:focus-visible{outline:2px solid var(--fc);outline-offset:2px}
.p-gal-thumb-img{display:grid;place-items:center;width:100%;height:44px}
.p-media .p-gal-thumb-img img{max-width:100%;max-height:44px;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply}
.p-gal-thumb-cap{font-family:var(--display);font-style:italic;font-weight:600;font-size:9.5px;
  letter-spacing:.08em;text-transform:uppercase;color:#8a8e96;line-height:1;white-space:nowrap}
.p-gal-thumb.is-on .p-gal-thumb-cap{color:var(--fc)}

@media(max-width:1000px){
  .p-gal-stage{height:clamp(220px,46vw,300px)}
}
@media(prefers-reduced-motion:reduce){
  .p-media .p-gal-stage img{transition:none}
}