:root{--g:#087a43;--ink:#193328;--muted:#687970;--line:#dfe8e1;--bg:#f4f8f5;--card:#fff}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,system-ui,sans-serif}
.pd-top{height:72px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 5vw;position:sticky;top:0;z-index:5}
.pd-brand{display:flex;align-items:center;gap:10px;color:var(--g);text-decoration:none;font-size:21px}.pd-leaf{width:36px;height:36px;border-radius:11px;background:linear-gradient(135deg,var(--g),#68bf6b);display:grid;place-items:center;color:#fff}
.pd-back{color:var(--g);font-weight:700;text-decoration:none;font-size:13px}.pd-shell{max-width:1180px;margin:35px auto;padding:0 22px}.pd-card{display:grid;grid-template-columns:1fr 1fr;background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 14px 45px #163b2a12}
.pd-image{min-height:560px;background:linear-gradient(145deg,#f7faf7,#edf4ee);display:grid;place-items:center;padding:35px}.pd-image img{max-width:90%;max-height:500px;object-fit:contain}.pd-noimg{color:var(--muted)}
.pd-info{padding:42px}.pd-kicker{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--g);font-weight:800}.pd-info h1{font-size:34px;line-height:1.18;margin:9px 0}.pd-price{font-size:28px;font-weight:900;color:var(--g);margin:12px 0 24px}.pd-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.pd-grid>div{padding:12px;background:#f6f9f6;border:1px solid var(--line);border-radius:10px}.pd-grid small{display:block;color:var(--muted);font-size:9px;text-transform:uppercase;font-weight:800;margin-bottom:4px}.pd-grid b{font-size:12px}.pd-section{margin-top:24px}.pd-section h3{font-size:13px;margin:0 0 7px}.pd-section p{color:#56675f;font-size:14px;line-height:1.65;white-space:pre-line}.pd-actions{display:flex;gap:9px;margin-top:25px;flex-wrap:wrap}.pd-actions button{padding:11px 15px;border-radius:10px;font-weight:800;cursor:pointer}.pd-primary{border:1px solid var(--g);background:var(--g);color:#fff}.pd-secondary{border:1px solid var(--line);background:#fff;color:var(--ink)}.pd-error,.pd-loading{text-align:center;padding:80px;color:var(--muted)}
@media(max-width:800px){.pd-card{grid-template-columns:1fr}.pd-image{min-height:340px}.pd-info{padding:25px}.pd-info h1{font-size:27px}.pd-top{padding:0 15px}}


/* Ecosave Product Detail — Premium UI v2 */
body{
  background:
    radial-gradient(circle at 10% 0%,rgba(34,182,111,.07),transparent 30rem),
    #f6f9f7;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Arial,sans-serif;
}
.pd-top{
  height:74px;background:rgba(255,255,255,.88);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 1px 0 var(--line);
}
.pd-leaf{box-shadow:0 8px 18px rgba(8,122,67,.22)}
.pd-shell{max-width:1240px;margin:42px auto}
.pd-card{
  border-radius:26px;box-shadow:0 20px 55px rgba(16,45,30,.09);
  border-color:#e3ebe5;
}
.pd-image{
  min-height:600px;
  background:
    radial-gradient(circle at center,#fff 0 28%,transparent 29%),
    linear-gradient(145deg,#f9fcfa,#edf5ef);
}
.pd-image img{max-width:82%;max-height:520px;filter:drop-shadow(0 18px 18px rgba(20,50,35,.10))}
.pd-info{padding:50px 48px}
.pd-kicker{background:#e9f6ee;border-radius:999px;padding:6px 10px;display:inline-block}
.pd-info h1{font-size:clamp(30px,3vw,42px);letter-spacing:-.035em}
.pd-price{font-size:31px;margin:16px 0 28px}
.pd-grid{gap:11px}
.pd-grid>div{border-radius:13px;padding:14px;background:#f7faf8}
.pd-section{border-top:1px solid #edf2ee;padding-top:18px}
.pd-actions button{border-radius:12px;padding:12px 17px}
.pd-primary{background:linear-gradient(135deg,#087a43,#20ad68);border-color:#087a43;box-shadow:0 8px 18px rgba(8,122,67,.20)}
@media(max-width:800px){
  .pd-shell{margin:18px auto;padding:0 12px}
  .pd-card{border-radius:20px}
  .pd-image{min-height:360px}
  .pd-info{padding:28px 22px}
}


/* Reference interface language for Product Details */
body{background:radial-gradient(circle at 10% 0%,rgba(143,224,176,.16),transparent 30rem),#f6f8f5}
.pd-top{background:rgba(255,255,255,.82);backdrop-filter:blur(14px);height:74px}
.pd-card{border-radius:24px;border-color:#e7ede7;box-shadow:0 18px 50px rgba(18,36,28,.09)}
.pd-image{background:radial-gradient(120% 100% at 30% 0%,#fbfdfb,#eef4ee 70%)}
.pd-info h1{letter-spacing:-.03em}
.pd-price{color:#0b6b3a}
.pd-primary{background:linear-gradient(135deg,#2fae6d,#0b6b3a);border-color:#0b6b3a;box-shadow:0 10px 22px rgba(11,107,58,.25)}
.pd-grid>div{background:#f5f8f5;border-color:#e7ede7;border-radius:12px}


/* v239.40 — Product Detail image is controlled separately in Admin > Image Display. */
.pd-image{overflow:hidden!important}
.pd-image img{
  box-sizing:border-box!important;
  padding:var(--pd-image-padding,0px)!important;
  clip-path:inset(var(--pd-image-trim-y,0%) var(--pd-image-trim-x,0%) var(--pd-image-trim-y,0%) var(--pd-image-trim-x,0%))!important;
  transform:translate(var(--pd-image-x,0px),var(--pd-image-y,0px)) scale(var(--pd-image-zoom,1))!important;
  transform-origin:center center!important;
}

/* v239.43 — actual storefront top/bottom whitespace control.
   This is separate from image trimming: it reduces the visible product-detail
   stage padding on the front end while keeping the uploaded file untouched. */
.pd-image{padding:var(--pd-outer-y,12px)!important}

/* v239.44 — standalone Product Detail uses compact metadata and taxonomy chips. */
.pd-meta-compact{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 12px}
.pd-meta-compact>span{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid #e2ebe4;border-radius:999px;background:#f7faf8;min-width:0}
.pd-meta-compact small,.pd-taxonomy>small{font-size:9px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:var(--muted)}
.pd-meta-compact b{font-size:12px;overflow-wrap:anywhere}
.pd-taxonomy{margin:10px 0 0}
.pd-chip-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
.pd-chip-row span{display:inline-flex;align-items:center;min-height:27px;padding:5px 10px;border-radius:999px;background:#edf6ef;border:1px solid #dceade;color:#22583a;font-size:11px;font-weight:800}
.pd-info{padding-top:42px}
@media(max-width:800px){.pd-info{padding-top:24px}.pd-meta-compact{margin-bottom:8px}}
.gst-note{font-size:.55em;font-weight:600;color:#8a948d;letter-spacing:0;margin-left:3px;white-space:nowrap;vertical-align:baseline}