/* ===================================================================
   Product detail page (/product.php) — extends site-theme.css so
   CMS-generated pages match the rest of the redesigned site exactly.
   Relies on the CSS variables already defined in site-theme.css.

   v2 — signature idea: the quote panel is styled like a pharma batch
   label / dispatch tag (torn-edge, mono type, stamp) since that is
   literally what appears on every drum Swapnroop ships. The product
   photo gets a proper mat + a rotated WHO-GMP seal instead of being
   force-cropped into a landscape box.
   =================================================================== */

.product-detail-section{ padding:56px 0 70px; }
.product-layout{ display:grid; grid-template-columns:1fr 1.3fr; gap:48px; align-items:start; }
@media (max-width:900px){ .product-layout{ grid-template-columns:1fr; } }

/* ---- left column: image + specs + quote card ---- */
.pd-image{
    position:relative;
    border:1px solid var(--line);
    background:
        radial-gradient(120% 140% at 50% 0%, rgba(184,150,62,0.08), transparent 60%),
        var(--paper-dim);
    padding:16px;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 1px 0 rgba(28,43,34,0.04), 0 18px 30px -22px rgba(18,50,38,0.35);
    overflow:hidden;
    max-width:340px;
    margin:0 auto;
}
.pd-image img{
    width:100%; height:auto;
    max-height:360px;
    object-fit:contain; object-position:center;
    display:block;
    filter:drop-shadow(0 14px 18px rgba(18,50,38,0.18));
    transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.pd-image:hover img{ transform:scale(1.035); }

/* rotated certification seal, sits on the photo like a stamp on a drum label */
.pd-seal{
    position:absolute; top:16px; right:16px;
    width:76px; height:76px;
    display:flex; align-items:center; justify-content:center;
    transform:rotate(-10deg);
    pointer-events:none;
}
.pd-seal svg{ width:100%; height:100%; }
.pd-seal-ring{ fill:none; stroke:var(--bottle-dark); stroke-width:1; stroke-dasharray:2.4 3; opacity:0.85; }
.pd-seal-ring-outer{ fill:rgba(241,237,225,0.92); stroke:var(--copper); stroke-width:1.1; }
.pd-seal-text{ font-family:var(--mono); font-size:6.6px; letter-spacing:0.14em; fill:var(--bottle-dark); }
.pd-seal-center{ font-family:var(--serif); font-size:10px; font-weight:600; fill:var(--copper); }

.pd-specs{ border:1px solid var(--line); background:var(--paper-dim); padding:26px 24px; margin-top:22px; }
.pd-specs h2{ font-size:15px; color:var(--bottle-dark); margin-bottom:14px; }
.pd-spec-row{
    display:flex; justify-content:space-between; gap:16px;
    font-size:13.5px; color:#3a473e; padding:10px 0; border-top:1px solid var(--line);
}
.pd-specs .pd-spec-row:first-of-type{ border-top:none; }
.pd-spec-row span:first-child{ font-family:var(--mono); font-size:11px; letter-spacing:0.04em; color:#5a6459; text-transform:uppercase; }
.pd-spec-row span:last-child{ font-weight:600; color:var(--ink); text-align:right; }

/* ---- quote card, restyled as a tear-off dispatch / batch label ---- */
.pd-quote{
    position:relative;
    background:var(--bottle-dark); color:var(--paper);
    padding:30px 24px 26px;
    margin-top:26px;
    border-radius:2px;
}
.pd-quote::before{
    content:""; position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg, var(--bottle) 0%, var(--copper) 45%, var(--gold) 100%);
}
/* perforated tear edge along the top, like a label stub */
.pd-quote::after{
    content:""; position:absolute; top:3px; left:0; right:0; height:8px;
    background-image:radial-gradient(circle, var(--paper) 2.6px, transparent 2.7px);
    background-size:16px 16px; background-position:8px -4px; background-repeat:repeat-x;
    opacity:0.9;
}
.pd-quote-kicker{
    font-family:var(--mono); font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase;
    color:var(--gold); display:flex; align-items:center; gap:8px; margin-bottom:10px;
}
.pd-quote-kicker::before{ content:""; width:14px; height:1px; background:var(--gold); display:inline-block; }
.pd-quote-title{ font-family:var(--serif); font-size:19px; margin-bottom:6px; }
.pd-quote-sub{ font-size:13px; line-height:1.6; color:rgba(241,237,225,0.75); margin-bottom:8px; }

.pd-trust-row{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 18px; }
.pd-trust-chip{
    display:inline-flex; align-items:center; gap:6px;
    font-family:var(--mono); font-size:10.5px; letter-spacing:0.03em;
    color:rgba(241,237,225,0.9);
    border:1px solid rgba(241,237,225,0.25);
    padding:6px 10px;
}
.pd-trust-chip svg{ width:12px; height:12px; flex-shrink:0; }

.pd-quote-actions{ display:flex; flex-direction:column; gap:10px; }
.pd-quote-actions a{
    font-family:var(--mono); font-size:12.5px; letter-spacing:0.02em; text-align:center;
    padding:12px 16px; border:1px solid transparent; display:flex; align-items:center; justify-content:center; gap:8px;
    transition:all .2s ease;
}
.pd-quote-actions a svg{ width:15px; height:15px; flex-shrink:0; }
.pd-qa-wa{ background:var(--copper); color:var(--paper); }
.pd-qa-wa:hover{ background:var(--copper-bright); transform:translateY(-1px); }
.pd-qa-email{ background:rgba(241,237,225,0.1); color:var(--paper); border-color:rgba(241,237,225,0.3); }
.pd-qa-email:hover{ background:rgba(241,237,225,0.18); }
.pd-qa-call{ background:transparent; color:var(--gold); border-color:rgba(184,150,62,0.5); }
.pd-qa-call:hover{ background:rgba(184,150,62,0.12); }

/* ---- right column: enquiry strip + content ---- */
.pd-enquiry-bar{
    display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
    background:var(--paper-dim); border:1px solid var(--line); border-left:3px solid var(--copper);
    padding:14px 20px; margin-bottom:26px;
}
.pd-enquiry-text{ font-size:13px; color:#3a473e; display:flex; align-items:center; gap:8px; }
.pd-enquiry-text svg{ width:15px; height:15px; color:var(--copper); flex-shrink:0; }
.pd-enquiry-text b{ color:var(--bottle-dark); }
.pd-enquiry-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.pd-enquiry-actions a{
    font-family:var(--mono); font-size:12px; letter-spacing:0.02em; padding:9px 16px;
    display:inline-flex; align-items:center; gap:6px;
}
.pd-call-btn{ border:1px solid var(--ink); color:var(--ink); }
.pd-call-btn:hover{ background:var(--ink); color:var(--paper); }
.pd-wa-btn{ background:var(--copper); color:var(--paper); }
.pd-wa-btn:hover{ background:var(--copper-bright); }

.pd-content h1{ font-size:clamp(26px,3.4vw,36px); color:var(--bottle-dark); margin-bottom:16px; }
.pd-content .cas-tag{
    font-family:var(--mono); font-size:12px; color:var(--copper); letter-spacing:0.03em;
    display:inline-flex; align-items:center; gap:8px; margin-bottom:20px;
    padding:5px 0;
    border-bottom:1px solid var(--line);
}
.pd-content h2{ font-size:20px; color:var(--bottle-dark); margin:26px 0 10px; }
.pd-content h3{ font-size:16px; color:var(--bottle-dark); margin:20px 0 8px; }
.pd-content p{ font-size:15px; line-height:1.7; color:#3a473e; margin:0 0 14px; }
.pd-content ul{ padding-left:20px; margin:0 0 16px; }
.pd-content li{ font-size:14.5px; line-height:1.7; color:#3a473e; margin-bottom:6px; }
.pd-content table{ width:100%; border-collapse:collapse; margin:16px 0 24px; font-size:13.5px; }
.pd-content table th, .pd-content table td{ border:1px solid var(--line); padding:9px 12px; text-align:left; }
.pd-content table th{ background:var(--paper-dim); font-family:var(--mono); font-size:11px; letter-spacing:0.03em; text-transform:uppercase; color:#5a6459; }
.pd-content .enquire-btn{ margin-top:10px; display:inline-flex; align-items:center; gap:8px; }

/* ---- related products (reuses .product-grid / .product-card from site-theme.css) ---- */
.related-section{ background:var(--paper-dim); border-top:1px solid var(--line); }