/* =========================================================================
   woo-single.css — v7 Product Detail Page, ported VERBATIM from the design
   board "Product Detail Page.html" (the .deskwrap desktop layout, which is
   responsive and collapses to one column at 960px). Every selector is scoped
   under .mh-pdp so it cannot leak into the site chrome or other WooCommerce
   pages. Enqueued only on is_product(). Tokens + .cat-* accents come from
   tokens.css; fonts from mh-woo-fonts.

   The board's own .dk-strip/.dk-nav header is intentionally NOT ported — the
   page already wears the unified v7 navy chrome.
   ========================================================================= */

.mh-pdp{ font-family:var(--font-body); color:var(--ink); }
.mh-pdp *{ box-sizing:border-box; }
.mh-pdp a{ color:inherit; }
.mh-pdp img{ max-width:100%; }

/* breadcrumb */
.mh-pdp .crumb{ display:flex; align-items:center; gap:8px; padding:11px 0; font-size:12.5px; color:var(--ink-3); flex-wrap:wrap; }
.mh-pdp .crumb a{ color:var(--ink-2); text-decoration:none; }
.mh-pdp .crumb a:hover{ color:var(--brand); }
.mh-pdp .crumb .c{ color:var(--ink); font-weight:600; }
.mh-pdp .crumb svg{ width:13px; height:13px; }

/* 3-column product grid */
.mh-pdp .dpdp{ display:grid; grid-template-columns:minmax(0,342px) minmax(0,1fr) 300px; gap:24px; padding:8px 0 22px; align-items:start; }

/* gallery column */
.mh-pdp .dgalcol{ display:flex; flex-direction:column; gap:16px; position:sticky; top:14px; }
.mh-pdp .dgal{ display:flex; flex-direction:column; gap:11px; }
.mh-pdp .dthumbs{ display:flex; flex-direction:row; gap:9px; overflow-x:auto; scrollbar-width:none; }
.mh-pdp .dthumbs::-webkit-scrollbar{ display:none; }
.mh-pdp .dthumb{ width:64px; height:64px; flex:none; border-radius:var(--r-sm); border:1.5px solid var(--line); overflow:hidden; cursor:pointer; background:linear-gradient(125deg,var(--accent-soft) 0 46%,color-mix(in srgb,var(--accent-soft) 38%,#fff) 46%); position:relative; padding:0; }
.mh-pdp .dthumb img{ width:100%; height:100%; object-fit:contain; padding:10%; display:block; }
.mh-pdp .dthumb.ph{ background:repeating-linear-gradient(135deg,var(--accent-soft) 0 9px,#fff 9px 18px); }
.mh-pdp .dthumb.on{ border-color:var(--brand); box-shadow:0 0 0 1px var(--brand); }
.mh-pdp .dmain{ position:relative; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; aspect-ratio:1/1; background:linear-gradient(125deg,var(--accent-soft) 0 46%,color-mix(in srgb,var(--accent-soft) 38%,#fff) 46%); }
.mh-pdp .dmain img{ width:100%; height:100%; object-fit:contain; padding:8%; display:block; }
.mh-pdp .g-badge{ position:absolute; top:13px; left:13px; z-index:3; background:var(--red); color:#fff; font-weight:800; font-size:13px; padding:5px 9px; border-radius:var(--r-sm); box-shadow:var(--shadow-sm); }

/* know-your-supplier */
.mh-pdp .ksupplier .ksh{ font-family:var(--font-display); font-weight:700; font-size:17px; margin:0 0 10px; }
.mh-pdp .supplier{ background:var(--app-bg); border-radius:var(--r-md); padding:13px; }
.mh-pdp .supplier .sh{ display:flex; gap:12px; align-items:flex-start; padding:2px 2px 13px; }
.mh-pdp .supplier .sh .av{ width:50px; height:50px; border-radius:12px; flex:none; background:linear-gradient(135deg,var(--accent),var(--accent-ink)); display:grid; place-items:center; color:#fff; font-family:var(--font-display); font-weight:700; font-size:20px; overflow:hidden; }
.mh-pdp .supplier .sh .av.has-img{ background:#fff; border:1px solid var(--line,#e8e8ef); padding:4px; }
.mh-pdp .supplier .sh .av.has-img img{ width:100%; height:100%; object-fit:contain; border-radius:8px; display:block; }
.mh-pdp .supplier .sn{ font-weight:700; font-size:15px; color:var(--navy); text-decoration:underline; text-underline-offset:2px; display:inline-flex; align-items:center; gap:6px; }
.mh-pdp .supplier .sn svg{ width:15px; height:15px; color:var(--trust); flex:none; }
.mh-pdp .supplier .smeta{ font-size:12px; color:var(--ink-2); margin-top:4px; }
.mh-pdp .supplier .sloc{ font-size:12px; color:var(--ink-3); margin-top:3px; display:flex; align-items:center; gap:4px; }
.mh-pdp .supplier .sloc svg{ width:12px; height:12px; flex:none; }
.mh-pdp .supplier .sov{ background:#fff; border-radius:var(--r-sm); padding:13px; }
.mh-pdp .supplier .sov h6{ margin:0 0 12px; font-size:13px; font-weight:700; }
.mh-pdp .supplier .sstats{ display:flex; gap:10px; }
.mh-pdp .supplier .sstats .stt{ flex:1; min-width:0; }
.mh-pdp .supplier .sstats .stt small{ display:block; font-size:11px; color:var(--ink-3); margin-bottom:4px; }
.mh-pdp .supplier .sstats .stt b{ font-size:19px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--ink); }
.mh-pdp .supplier .sbtns{ display:flex; gap:10px; margin-top:13px; }
.mh-pdp .supplier .sbtns a{ flex:1; height:42px; border-radius:var(--r-pill); display:flex; align-items:center; justify-content:center; gap:6px; font-family:var(--font-body); font-weight:700; font-size:13px; text-decoration:none; cursor:pointer; }
.mh-pdp .supplier .sbtns a svg{ width:15px; height:15px; }
.mh-pdp .supplier .sbtns .prof{ background:var(--brand); color:#fff; }
.mh-pdp .supplier .sbtns .more{ background:#fff; border:1.5px solid var(--line); color:var(--navy); }
/* compact variant (under gallery) */
.mh-pdp .supplier.compact{ padding:11px 12px; }
.mh-pdp .supplier.compact .sh{ padding:0 0 10px; gap:10px; align-items:center; }
.mh-pdp .supplier.compact .sh .av{ width:40px; height:40px; font-size:16px; border-radius:9px; }
.mh-pdp .supplier.compact .sn{ font-size:13.5px; }
.mh-pdp .supplier.compact .smeta{ font-size:11.5px; margin-top:2px; }
.mh-pdp .supplier.compact .sloc,.mh-pdp .supplier.compact .sov{ display:none; }
.mh-pdp .supplier.compact > .sstats{ display:flex; gap:8px; padding:10px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:10px; }
.mh-pdp .supplier.compact .sstats .stt{ flex:1; text-align:center; min-width:0; }
.mh-pdp .supplier.compact .sstats .stt b{ font-size:14px; font-weight:800; color:var(--ink); display:block; }
.mh-pdp .supplier.compact .sstats .stt small{ font-size:10px; color:var(--ink-3); margin:1px 0 0; display:block; }
.mh-pdp .supplier.compact .sbtns{ margin-top:0; gap:8px; }
.mh-pdp .supplier.compact .sbtns a{ height:34px; font-size:12px; padding:0; }
.mh-pdp .supplier.compact .sbtns .prof svg{ display:none; }

/* info column */
.mh-pdp .dinfo{ display:flex; flex-direction:column; }
.mh-pdp .pblk{ padding:0 0 16px; border-bottom:1px solid var(--line-2); margin-bottom:16px; }
.mh-pdp .pblk:last-child{ border-bottom:0; margin-bottom:0; }
.mh-pdp .eyebrow{ font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-ink); }
.mh-pdp .ptitle{ font-family:var(--font-display); font-weight:700; font-size:23px; line-height:1.18; letter-spacing:-.01em; margin:7px 0 4px; color:var(--ink); }
.mh-pdp .psub{ font-size:13.5px; color:var(--ink-2); margin:0 0 10px; }
.mh-pdp .psub:lang(bn){ font-family:var(--font-body); }
.mh-pdp .metarow{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-size:12.5px; color:var(--ink-3); }
.mh-pdp .stars{ --rating:5; font-size:13px; line-height:1; letter-spacing:1px; white-space:nowrap; background:linear-gradient(90deg,var(--star) calc(var(--rating)/5*100%),#dcdce1 calc(var(--rating)/5*100%)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.mh-pdp .metarow .rate{ font-weight:800; color:var(--ink); }
.mh-pdp .metarow .rev{ color:var(--trust); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.mh-pdp .metarow .sep{ width:3px; height:3px; border-radius:50%; background:var(--ink-3); }
.mh-pdp .badgrow{ display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.mh-pdp .tagchip{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; padding:4px 9px; border-radius:var(--r-pill); }
.mh-pdp .tagchip.rec{ background:var(--trust-soft); color:var(--trust); }
.mh-pdp .tagchip.hot{ background:var(--brand-soft); color:var(--brand-ink); }
.mh-pdp .tagchip svg{ width:12px; height:12px; }
.mh-pdp .promo{ display:flex; align-items:center; gap:9px; background:linear-gradient(90deg,var(--brand-soft),#fff); border:1px solid color-mix(in srgb,var(--brand) 22%,var(--line)); border-radius:var(--r-sm); padding:10px 12px; font-size:12.5px; color:var(--brand-ink); }
.mh-pdp .promo svg{ width:17px; height:17px; color:var(--brand); flex:none; }
.mh-pdp .promo b{ font-weight:800; }
.mh-pdp .seclabel{ font-size:13px; font-weight:800; color:var(--ink); margin:0 0 10px; }

/* size / option pills */
.mh-pdp .optlabel{ font-size:12.5px; font-weight:700; color:var(--ink); margin:0 0 9px; display:flex; align-items:baseline; gap:8px; }
.mh-pdp .optlabel .sel{ color:var(--ink-3); font-weight:600; }
.mh-pdp .opts{ display:flex; flex-wrap:wrap; gap:8px; }
.mh-pdp .opt{ border:1.5px solid var(--line); background:#fff; border-radius:var(--r-sm); padding:9px 14px; cursor:pointer; font-family:var(--font-body); font-weight:700; font-size:13px; color:var(--ink-2); display:flex; flex-direction:column; align-items:center; gap:1px; min-width:62px; transition:border-color .15s, background .15s, color .15s; }
.mh-pdp .opt small{ font-weight:600; font-size:10.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.mh-pdp .opt:hover{ border-color:var(--accent); }
.mh-pdp .opt.on{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink); box-shadow:inset 0 0 0 1px var(--accent); }
.mh-pdp .opt.on small{ color:var(--accent-ink); }

/* details rows */
.mh-pdp .detrow{ display:flex; align-items:baseline; gap:8px; padding:9px 0; font-size:13.5px; border-bottom:1px solid var(--line-2); }
.mh-pdp .detrow:last-child{ border-bottom:0; }
.mh-pdp .detrow .dk{ color:var(--ink-3); font-weight:600; flex:none; }
.mh-pdp .detrow .lead{ flex:1; border-bottom:1px dotted var(--line); transform:translateY(-3px); }
.mh-pdp .detrow .dd{ color:var(--ink); font-weight:600; flex:none; text-align:right; }
.mh-pdp .detrow.x{ display:none; }
.mh-pdp .detrows.open .detrow.x{ display:flex; }
.mh-pdp .seemore{ margin-top:6px; border:0; background:transparent; color:var(--brand); font-family:var(--font-body); font-weight:700; font-size:13px; cursor:pointer; display:inline-flex; align-items:center; gap:5px; padding:6px 2px; }
.mh-pdp .seemore svg{ width:14px; height:14px; transition:transform .2s; }
.mh-pdp .seemore.open svg{ transform:rotate(180deg); }

/* feature tiles */
.mh-pdp .featrow{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.mh-pdp .featc{ background:var(--app-bg); border-radius:var(--r-sm); padding:14px 10px; text-align:center; }
.mh-pdp .featc .fi{ width:28px; height:28px; margin:0 auto 8px; color:var(--accent-ink); }
.mh-pdp .featc .fi svg{ width:100%; height:100%; }
.mh-pdp .featc .fi.em{ width:auto; height:auto; font-size:26px; line-height:1; margin:0 auto 7px; font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; color:inherit; }
.mh-pdp .featc span{ font-size:12px; font-weight:600; color:var(--ink); line-height:1.32; display:block; }

/* buy rail */
.mh-pdp .drail{ position:sticky; top:14px; border:1px solid var(--line); border-radius:var(--r-md); padding:16px; box-shadow:var(--shadow-card); display:flex; flex-direction:column; background:#fff; }
.mh-pdp .priceblk{ display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; }
.mh-pdp .priceblk .now{ font-size:32px; font-weight:800; color:var(--red); font-variant-numeric:tabular-nums; letter-spacing:-.02em; line-height:.95; }
.mh-pdp .priceblk .now b{ font-weight:600; font-size:.55em; }
.mh-pdp .priceblk .was{ font-size:15px; color:var(--ink-3); text-decoration:line-through; font-variant-numeric:tabular-nums; }
.mh-pdp .priceblk .pct{ background:var(--red-soft); color:var(--red); font-weight:800; font-size:12.5px; padding:3px 8px; border-radius:var(--r-xs); }
.mh-pdp .savenote{ font-size:12px; color:var(--ink-2); margin-top:7px; }
.mh-pdp .savenote b{ color:var(--ink); }
.mh-pdp .drail .deliv{ font-size:12.5px; color:var(--ink-2); margin-top:11px; display:flex; flex-direction:column; gap:7px; }
.mh-pdp .drail .deliv .dl{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.mh-pdp .drail .deliv .dl svg{ width:15px; height:15px; color:var(--navy); flex:none; }
.mh-pdp .drail .deliv .dl b{ color:var(--ink); white-space:nowrap; }
.mh-pdp .drail .deliv .dl--eta{ align-items:flex-start; gap:8px; background:var(--green-soft,#e9f7f0); border:1px solid #cfe9dd; border-radius:10px; padding:8px 11px; margin:1px 0; }
.mh-pdp .drail .deliv .dl--eta svg{ color:var(--green,#1d8a5c); width:16px; height:16px; margin-top:2px; }
.mh-pdp .drail .deliv .dl--eta .eta-txt{ display:block; line-height:1.42; color:var(--ink-2); }
.mh-pdp .drail .deliv .dl--eta b{ color:var(--green,#1d8a5c); white-space:nowrap; }
.mh-pdp .drail .deliv .dl--eta .eta-sub{ display:block; font-size:11px; color:var(--ink-3); margin-top:2px; }
.mh-pdp .qtyrow{ display:flex; align-items:center; gap:14px; }
.mh-pdp .stepper{ display:inline-flex; align-items:center; border:1.5px solid var(--line); border-radius:var(--r-pill); overflow:hidden; }
.mh-pdp .stepper button{ width:40px; height:40px; border:0; background:#fff; font-size:20px; color:var(--ink); cursor:pointer; display:grid; place-items:center; }
.mh-pdp .stepper button:disabled{ color:var(--ink-3); cursor:not-allowed; }
.mh-pdp .stepper .val{ width:44px; text-align:center; font-weight:800; font-variant-numeric:tabular-nums; font-size:15px; }
.mh-pdp .actions-col{ display:flex; gap:10px; margin-top:13px; }
.mh-pdp .actions-col .btn{ height:48px; }
.mh-pdp .actions-col .wish{ width:48px; height:48px; flex:none; border:1.5px solid var(--line); border-radius:13px; background:#fff; display:grid; place-items:center; cursor:pointer; }
.mh-pdp .actions-col .wish svg{ width:22px; height:22px; color:var(--ink-2); }
.mh-pdp .actions-col .wish[aria-pressed="true"] svg{ color:var(--red); fill:var(--red); }
.mh-pdp .btn{ flex:1; height:48px; border:0; border-radius:13px; font-family:var(--font-body); font-weight:800; font-size:14.5px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:7px; text-decoration:none; }
.mh-pdp .btn svg{ width:19px; height:19px; }
.mh-pdp .btn--cart{ background:var(--brand-soft); color:var(--brand-ink); border:1.5px solid color-mix(in srgb,var(--brand) 40%,var(--line)); }
.mh-pdp .btn--buy{ background:linear-gradient(180deg,var(--brand-bright),var(--brand)); color:#fff; box-shadow:0 6px 16px -6px rgba(224,83,15,.6); }
.mh-pdp .railrow{ display:grid; grid-template-columns:auto 1fr; align-items:start; column-gap:12px; row-gap:6px; font-size:12.5px; padding:7px 0; line-height:1.4; }
.mh-pdp .railrow .rk{ color:var(--ink-3); white-space:nowrap; padding-top:1px; }
.mh-pdp .railrow .rv{ color:var(--ink); font-weight:600; display:flex; align-items:flex-start; gap:6px; min-width:0; flex-wrap:wrap; word-break:break-word; }
.mh-pdp .railrow .rv a{ color:var(--trust); text-decoration:underline; text-underline-offset:2px; }
.mh-pdp .railrow .rv svg{ width:13px; height:13px; color:var(--trust); flex:none; }
.mh-pdp .cert{ margin:0; border:1.5px solid color-mix(in srgb,var(--trust) 30%,var(--line)); border-radius:var(--r-md); background:linear-gradient(180deg,var(--trust-soft),#fff 70%); padding:15px 15px 14px; display:flex; gap:13px; align-items:flex-start; box-shadow:var(--shadow-sm); }
.mh-pdp .cert__seal{ flex:none; width:50px; height:50px; border-radius:50%; background:radial-gradient(circle at 32% 28%,#5b9bd6,var(--trust) 70%); display:grid; place-items:center; box-shadow:0 6px 16px -6px rgba(47,111,176,.6), inset 0 0 0 3px rgba(255,255,255,.35); position:relative; }
.mh-pdp .cert__seal::after{ content:""; position:absolute; inset:4px; border-radius:50%; border:1.5px dashed rgba(255,255,255,.55); }
.mh-pdp .cert__seal svg{ width:24px; height:24px; color:#fff; position:relative; z-index:1; }
.mh-pdp .cert__body{ flex:1; min-width:0; }
.mh-pdp .cert__t{ font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--navy); line-height:1.3; }
.mh-pdp .cert__t .v{ color:var(--trust); white-space:nowrap; }
.mh-pdp .cert__d{ font-size:12.8px; color:var(--ink-2); margin:3px 0 0; }
.mh-pdp .paychips{ display:flex; gap:6px; flex-wrap:wrap; margin-top:13px; }
.mh-pdp .paychips span{ font-size:9.5px; font-weight:800; letter-spacing:.02em; border:1px solid var(--line); border-radius:4px; padding:3px 6px; color:var(--ink-2); }

/* lower: tabs + more-from */
.mh-pdp .dlower{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:22px; padding:0 0 24px; align-items:start; }
.mh-pdp .dcard{ border:1px solid var(--line); border-radius:var(--r-md); background:#fff; }
.mh-pdp .dcard .dchd{ padding:13px 16px; border-bottom:1px solid var(--line-2); font-family:var(--font-display); font-weight:600; font-size:16px; }
.mh-pdp .tabs{ display:flex; gap:4px; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none; }
.mh-pdp .tabs::-webkit-scrollbar{ display:none; }
.mh-pdp .tab{ flex:none; border:0; background:transparent; padding:13px 14px; font-family:var(--font-body); font-weight:700; font-size:13.5px; color:var(--ink-3); cursor:pointer; position:relative; white-space:nowrap; }
.mh-pdp .tab.on{ color:var(--brand); }
.mh-pdp .tab.on::after{ content:""; position:absolute; left:14px; right:14px; bottom:0; height:3px; background:var(--brand); border-radius:3px 3px 0 0; }
.mh-pdp .tabpane{ display:none; padding:16px; }
.mh-pdp .tabpane.on{ display:block; animation:mhpdp-fade .25s ease; }
@keyframes mhpdp-fade{ from{ opacity:0; transform:translateY(4px); } }
.mh-pdp .tabpane h5{ font-family:var(--font-display); font-weight:600; font-size:16px; margin:0 0 9px; }
.mh-pdp .tabpane p{ font-size:13.5px; color:var(--ink-2); margin:0 0 11px; }
.mh-pdp .notepull{ border-left:3px solid var(--accent); background:var(--accent-soft); color:var(--accent-ink); font-family:var(--font-display); font-style:italic; font-size:14px; padding:11px 13px; border-radius:0 var(--r-sm) var(--r-sm) 0; margin:0 0 13px; }
.mh-pdp .notes-grid{ display:flex; flex-direction:column; gap:9px; }
.mh-pdp .notes-grid .ng{ display:flex; gap:9px; align-items:flex-start; }
.mh-pdp .notes-grid .ng b{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-ink); width:54px; flex:none; padding-top:1px; }
.mh-pdp .notes-grid .ng span{ font-size:13px; color:var(--ink); }
.mh-pdp .spectable{ width:100%; border-collapse:collapse; font-size:13px; }
.mh-pdp .spectable tr{ border-bottom:1px solid var(--line-2); }
.mh-pdp .spectable td{ padding:9px 2px; vertical-align:top; }
.mh-pdp .spectable td:first-child{ color:var(--ink-3); width:42%; font-weight:600; }
.mh-pdp .spectable td:last-child{ color:var(--ink); font-weight:600; }
.mh-pdp .revhead{ display:flex; gap:16px; align-items:center; padding:4px 0 14px; }
.mh-pdp .revhead .big{ text-align:center; flex:none; }
.mh-pdp .revhead .big .n{ font-family:var(--font-display); font-weight:700; font-size:40px; line-height:1; }
.mh-pdp .revhead .big .stars{ font-size:13px; }
.mh-pdp .revhead .big small{ display:block; color:var(--ink-3); font-size:11.5px; margin-top:3px; }
.mh-pdp .rbreak{ flex:1; display:flex; flex-direction:column; gap:5px; }
.mh-pdp .rb-row{ display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--ink-3); }
.mh-pdp .rb-row .lvl{ width:30px; font-weight:700; color:var(--ink-2); display:flex; align-items:center; gap:2px; }
.mh-pdp .rb-row .lvl svg{ width:10px; height:10px; color:var(--star); }
.mh-pdp .rb-track{ flex:1; height:7px; background:var(--line); border-radius:4px; overflow:hidden; }
.mh-pdp .rb-fill{ height:100%; background:var(--star); border-radius:4px; }
.mh-pdp .review{ border-top:1px solid var(--line-2); padding:13px 0; }
.mh-pdp .review:first-of-type{ border-top:0; }
.mh-pdp .review .rh{ display:flex; align-items:center; gap:9px; margin-bottom:6px; }
.mh-pdp .review .ra{ width:30px; height:30px; border-radius:50%; background:var(--accent-soft); color:var(--accent-ink); display:grid; place-items:center; font-weight:800; font-size:13px; flex:none; }
.mh-pdp .review .rn{ font-weight:700; font-size:13px; }
.mh-pdp .review .rd{ font-size:11px; color:var(--ink-3); }
.mh-pdp .review .vbadge{ margin-left:auto; font-size:10px; font-weight:700; color:var(--trust); background:var(--trust-soft); padding:2px 7px; border-radius:var(--r-pill); }
.mh-pdp .review .rt{ font-size:13px; color:var(--ink-2); }
.mh-pdp .review .rstars{ font-size:11px; }

/* rating distribution + photo reviews + write-a-review form */
.mh-pdp .revhead{ display:flex; gap:clamp(16px,4vw,40px); align-items:center; flex-wrap:wrap; }
.mh-pdp .rdist{ flex:1; min-width:210px; display:grid; gap:5px; }
.mh-pdp .rdrow{ display:grid; grid-template-columns:32px 1fr 26px; align-items:center; gap:8px; }
.mh-pdp .rdk{ font-size:11px; color:var(--ink-3); font-weight:700; white-space:nowrap; text-align:right; }
.mh-pdp .rdbar{ height:7px; background:#ececf1; border-radius:99px; overflow:hidden; }
.mh-pdp .rdbar > span{ display:block; height:100%; background:var(--star,#f4a418); border-radius:99px; }
.mh-pdp .rdn{ font-size:11px; color:var(--ink-3); text-align:left; }
.mh-pdp .review .rh .vbadge{ display:inline-flex; align-items:center; gap:3px; }
.mh-pdp .review .rh .vbadge svg{ width:11px; height:11px; flex:none; }
.mh-pdp .rev-photos{ display:flex; gap:7px; flex-wrap:wrap; margin-top:8px; }
.mh-pdp .rev-photo{ display:block; width:64px; height:64px; border-radius:10px; overflow:hidden; border:1px solid var(--line); }
.mh-pdp .rev-photo img{ width:100%; height:100%; object-fit:cover; }

.mh-pdp .rev-form{ margin-top:22px; padding-top:20px; border-top:1px solid var(--line); }
.mh-pdp .rev-form h4{ font-family:var(--font-display); font-weight:700; font-size:16px; margin:0 0 12px; }
.mh-pdp .rev-form__f{ display:grid; gap:12px; max-width:560px; }
.mh-pdp .rev-rate{ display:flex; align-items:center; gap:10px; }
.mh-pdp .rev-rate__lbl{ font-size:13px; font-weight:700; color:var(--ink); }
.mh-pdp .rev-stars{ display:inline-flex; flex-direction:row-reverse; gap:2px; }
.mh-pdp .rev-stars input{ position:absolute; opacity:0; width:0; height:0; }
.mh-pdp .rev-stars label{ font-size:24px; line-height:1; color:#dcdce1; cursor:pointer; transition:color .12s ease; }
.mh-pdp .rev-stars label:hover, .mh-pdp .rev-stars label:hover ~ label, .mh-pdp .rev-stars input:checked ~ label{ color:var(--star,#f4a418); }
.mh-pdp .rev-stars input:focus-visible + label{ outline:2px solid var(--brand); outline-offset:2px; border-radius:3px; }
.mh-pdp .rev-2col{ display:grid; gap:10px; }
.mh-pdp .rev-form input[type=text], .mh-pdp .rev-form input[type=email], .mh-pdp .rev-form textarea{ width:100%; box-sizing:border-box; font-family:var(--font-body); font-size:14px; color:var(--ink); background:var(--paper); border:1.5px solid var(--line); border-radius:10px; padding:11px 13px; outline:0; }
.mh-pdp .rev-form input:focus, .mh-pdp .rev-form textarea:focus{ border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); background:#fff; }
.mh-pdp .rev-form textarea{ resize:vertical; min-height:96px; }
.mh-pdp .rev-upload{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:13px; font-weight:600; color:var(--brand-ink); background:var(--brand-soft); border:1px dashed var(--brand); border-radius:10px; padding:10px 14px; width:fit-content; }
.mh-pdp .rev-upload svg{ width:17px; height:17px; flex:none; }
.mh-pdp .rev-upload input[type=file]{ display:none; }
.mh-pdp .rev-form .btn{ width:fit-content; }
.mh-pdp .rev-mod{ font-size:11.5px; color:var(--ink-3); margin:0; }
.mh-pdp .rev-login{ font-size:13px; color:var(--ink-2); }
.mh-pdp .rev-login a, .mh-pdp .rev-mod a{ color:var(--brand-ink); font-weight:700; }
@media (min-width:680px){ .mh-pdp .rev-2col{ grid-template-columns:1fr 1fr; } }

/* more-from rail cards (canonical .mhub-card) */
.mh-pdp .draily{ display:grid; grid-template-columns:repeat(2,1fr); gap:11px; padding:14px; }
.mh-pdp .mhub-card{ background:var(--surface); border:1px solid var(--line-2); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; text-decoration:none; transition:transform .18s ease, box-shadow .18s ease; }
.mh-pdp .mhub-card:hover{ box-shadow:var(--shadow-card); transform:translateY(-2px); }
.mh-pdp .mhub-card__media{ position:relative; display:block; aspect-ratio:1/1; background:#fff; border-bottom:1px solid var(--line-2); }
.mh-pdp .mhub-card__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.mh-pdp .mhub-card__media img.fit{ object-fit:contain; padding:9%; }
.mh-pdp .mhub-ph{ position:absolute; inset:0; display:grid; place-items:center; background:repeating-linear-gradient(135deg,var(--accent-soft) 0 11px,#fff 11px 22px); }
.mh-pdp .mhub-ph span{ font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-ink); background:rgba(255,255,255,.8); padding:3px 8px; border-radius:var(--r-pill); font-weight:600; }
.mh-pdp .mhub-badge{ position:absolute; top:7px; left:7px; z-index:2; background:var(--red); color:#fff; font-weight:800; font-size:11px; padding:3px 7px; border-radius:var(--r-xs); box-shadow:var(--shadow-sm); }
.mh-pdp .mhub-card__body{ padding:8px 10px 11px; display:flex; flex-direction:column; gap:4px; flex:1; }
.mh-pdp .mhub-cert{ align-self:flex-start; display:inline-flex; align-items:center; gap:3px; background:var(--trust-soft); color:var(--trust); font-size:9.5px; font-weight:700; letter-spacing:.02em; padding:2px 6px 2px 4px; border-radius:var(--r-xs); text-transform:uppercase; }
.mh-pdp .mhub-cert svg{ width:11px; height:11px; }
.mh-pdp .mhub-title{ font-size:12.5px; line-height:1.3; font-weight:500; color:var(--ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.mh-pdp .mhub-price{ display:flex; align-items:baseline; gap:5px; }
.mh-pdp .mhub-now{ font-size:18px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.02em; line-height:1; }
.mh-pdp .mhub-now b{ font-weight:600; font-size:.62em; }
.mh-pdp .mhub-was{ font-size:11px; color:var(--ink-3); text-decoration:line-through; }
.mh-pdp .mhub-was b{ font-weight:600; font-size:.62em; }
.mh-pdp .mhub-meta{ font-size:10.5px; color:var(--ink-3); display:flex; align-items:center; gap:4px; }
.mh-pdp .mhub-stars{ font-size:11px; line-height:1; letter-spacing:.5px; color:var(--star); }

/* compare table */
.mh-pdp .dcompare{ padding:26px 0 22px; border-top:1px solid var(--line-2); }
.mh-pdp .dcompare h3{ font-family:var(--font-display); font-weight:700; font-size:22px; letter-spacing:-.01em; margin:0 0 16px; color:var(--ink); }
.mh-pdp .ctable{ width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; font-family:var(--font-body); table-layout:fixed; }
.mh-pdp .ctable th, .mh-pdp .ctable td{ padding:13px 12px; text-align:center; vertical-align:middle; border-bottom:1px solid var(--line-2); border-right:1px solid var(--line-2); font-size:13px; color:var(--ink); }
.mh-pdp .ctable th:last-child, .mh-pdp .ctable td:last-child{ border-right:0; }
.mh-pdp .ctable tr:last-child td, .mh-pdp .ctable tr:last-child th{ border-bottom:0; }
.mh-pdp .ctable thead th{ background:var(--app-bg); font-weight:700; color:var(--navy); font-size:14px; padding:12px 14px; }
.mh-pdp .ctable tbody th{ background:var(--app-bg); color:var(--ink-2); font-weight:700; text-align:left; font-size:13px; width:148px; padding-left:18px; }
.mh-pdp .ctable tbody tr:nth-child(even) td{ background:#fbfaf8; }
.mh-pdp .ctable tbody tr:nth-child(even) th{ background:#f1efea; }
.mh-pdp .ctable .pimg{ width:84px; height:84px; margin:0 auto; background:linear-gradient(125deg,var(--accent-soft) 0 46%,color-mix(in srgb,var(--accent-soft) 38%,#fff) 46%); border-radius:var(--r-sm); padding:6px; display:grid; place-items:center; }
.mh-pdp .ctable .pimg.ph{ background:repeating-linear-gradient(135deg,var(--accent-soft) 0 10px,#fff 10px 20px); }
.mh-pdp .ctable .pimg img{ width:100%; height:100%; object-fit:contain; display:block; }
.mh-pdp .ctable .pname{ vertical-align:top; padding-top:10px; }
.mh-pdp .ctable .pname a{ color:var(--trust); text-decoration:none; font-weight:600; font-size:13px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.35; }
.mh-pdp .ctable .pname a:hover{ text-decoration:underline; }
.mh-pdp .ctable .pprice{ font-size:17px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums; }
.mh-pdp .ctable .col-this{ background:color-mix(in srgb,var(--accent-soft) 55%,#fff) !important; }
.mh-pdp .ctable thead tr:first-child .col-this{ font-weight:800; font-size:11px; letter-spacing:.1em; color:var(--accent-ink); text-transform:uppercase; }

/* FAQ accordion */
.mh-pdp .faqsec{ padding:8px 0 26px; }
.mh-pdp .faqsec h3{ font-family:var(--font-display); font-weight:700; font-size:22px; letter-spacing:-.01em; margin:18px 0 14px; color:var(--ink); }
.mh-pdp .faq{ display:flex; flex-direction:column; gap:10px; }
.mh-pdp .faq details{ border:1px solid var(--line); border-radius:var(--r-md); background:#fff; overflow:hidden; transition:box-shadow .15s; }
.mh-pdp .faq details[open]{ box-shadow:var(--shadow-sm); }
.mh-pdp .faq summary{ list-style:none; cursor:pointer; padding:15px 18px; font-family:var(--font-body); font-weight:700; font-size:14px; color:var(--ink); display:flex; align-items:center; justify-content:space-between; gap:10px; }
.mh-pdp .faq summary::-webkit-details-marker{ display:none; }
.mh-pdp .faq summary::after{ content:"+"; font-size:22px; font-weight:300; color:var(--ink-3); line-height:1; transition:transform .2s; }
.mh-pdp .faq details[open] summary::after{ content:"\2212"; }
.mh-pdp .faq details[open] summary{ border-bottom:1px solid var(--line-2); }
.mh-pdp .faq .faqb{ padding:14px 18px 16px; font-size:13.5px; color:var(--ink-2); line-height:1.55; }
.mh-pdp .faq .faqb p{ margin:0 0 8px; }
.mh-pdp .faq .faqb p:last-child{ margin-bottom:0; }

/* Alibaba-style returning mini buy bar */
.mh-pdp .minibar{ position:fixed; left:0; right:0; top:0; z-index:60; background:#fff; border-bottom:1px solid var(--line); box-shadow:0 8px 24px -10px rgba(20,29,51,.28); display:flex; align-items:center; gap:14px; transform:translateY(-100%); transition:transform .28s cubic-bezier(.4,.02,.18,1); pointer-events:none; }
.mh-pdp .minibar__in{ width:100%; max-width:1180px; margin:0 auto; padding:10px 22px; display:flex; align-items:center; gap:14px; }
.mh-pdp .minibar.on{ transform:translateY(0); pointer-events:auto; }
.mh-pdp .minibar .mthumb{ width:48px; height:48px; border-radius:8px; background:linear-gradient(125deg,var(--accent-soft) 0 46%,color-mix(in srgb,var(--accent-soft) 38%,#fff) 46%); padding:5px; flex:none; overflow:hidden; }
.mh-pdp .minibar .mthumb img{ width:100%; height:100%; object-fit:contain; display:block; }
.mh-pdp .minibar .mti{ flex:1; min-width:0; }
.mh-pdp .minibar .mti .t{ font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.2; }
.mh-pdp .minibar .mti .m{ font-size:11.5px; color:var(--ink-3); margin-top:1px; }
.mh-pdp .minibar .mpr{ font-size:18px; font-weight:800; color:var(--red); font-variant-numeric:tabular-nums; white-space:nowrap; flex:none; display:flex; align-items:baseline; gap:7px; }
.mh-pdp .minibar .mpr small{ font-size:11px; font-weight:700; color:var(--red); background:var(--red-soft); padding:2px 6px; border-radius:5px; }
.mh-pdp .minibar .macts{ display:flex; gap:8px; flex:none; }
.mh-pdp .minibar .macts .btn{ height:40px; padding:0 16px; font-size:13px; flex:none; }

/* ===== responsive: collapse to one column (board's own @960 rules) ===== */
@media(max-width:960px){
  .mh-pdp .dpdp{ grid-template-columns:1fr; }
  .mh-pdp .dgalcol{ position:static; }
  .mh-pdp .drail{ position:static; }
  .mh-pdp .dlower{ grid-template-columns:1fr; }
  .mh-pdp .minibar{ display:none; }
}

/* =========================================================================
   VIBRANCY PASS (v0.9.25) — the board palette reads bland (cream + barely
   there pale-gold + one orange CTA). This block pushes color in THREE
   distinct roles so they don't clash:
     GOLD   = category identity (deeper gallery panels, pills, pull-quote,
              trust tiles) — re-themes per category via --accent.
     NAVY   = one premium contrast block (the supplier card).
     ORANGE = action + section accents (buy-rail cap, section markers).
   Appended last so it overrides the verbatim board rules above. To revert to
   the exact design palette, delete this entire block.
   ========================================================================= */

/* -- GOLD: richer accent on every gallery / image panel -------------------- */
.mh-pdp .dmain,
.mh-pdp .dthumb,
.mh-pdp .ctable .pimg,
.mh-pdp .minibar .mthumb{
	background:linear-gradient(140deg,
		color-mix(in srgb, var(--accent) 30%, #fff) 0%,
		var(--accent-soft) 52%,
		color-mix(in srgb, var(--accent-soft) 50%, #fff) 100%);
}
.mh-pdp .dmain{ border-color:color-mix(in srgb, var(--accent) 38%, var(--line)); }
.mh-pdp .dthumb{ border-color:color-mix(in srgb, var(--accent) 26%, var(--line)); }
/* deepen the gold so the selected pill + pull-quote actually read as colour */
.mh-pdp .opt.on{ background:color-mix(in srgb, var(--accent) 16%, #fff); }
.mh-pdp .notepull{ background:color-mix(in srgb, var(--accent) 14%, #fff); border-left-width:4px; }
/* warm the three trust tiles with a soft category tint (were flat grey) */
.mh-pdp .featc{
	background:color-mix(in srgb, var(--accent) 9%, #fff);
	border:1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
}

/* -- NAVY: the supplier card becomes a premium contrast block -------------- */
.mh-pdp .supplier{
	background:linear-gradient(165deg, var(--navy), color-mix(in srgb, var(--navy) 72%, #000));
	color:#fff;
	box-shadow:0 12px 28px -16px rgba(20,29,51,.65);
}
.mh-pdp .supplier .sn{ color:#fff; }
.mh-pdp .supplier .sn svg{ color:color-mix(in srgb, var(--trust) 45%, #fff); }
.mh-pdp .supplier .smeta{ color:rgba(255,255,255,.72); }
.mh-pdp .supplier .sstats .stt b,
.mh-pdp .supplier.compact .sstats .stt b{ color:#fff; }
.mh-pdp .supplier .sstats .stt small,
.mh-pdp .supplier.compact .sstats .stt small{ color:rgba(255,255,255,.62); }
.mh-pdp .supplier.compact > .sstats{ border-top-color:rgba(255,255,255,.16); border-bottom-color:rgba(255,255,255,.16); }
.mh-pdp .supplier .sbtns .prof{ background:var(--brand); color:#fff; }            /* orange primary pops on navy */
.mh-pdp .supplier .sbtns .more{ background:transparent; border-color:rgba(255,255,255,.34); color:#fff; }
/* the avatar is already a gold (var(--accent)) gradient — reads great on navy */

/* -- ORANGE: action + section accents -------------------------------------- */
.mh-pdp .seclabel{ border-left:3px solid var(--brand); padding-left:9px; }
.mh-pdp .drail{ border-top:3px solid var(--brand); }
.mh-pdp .dcompare h3,
.mh-pdp .faqsec h3{ display:inline-block; padding-bottom:5px; border-bottom:3px solid var(--brand); }

/* -- compare table: navy header band + a gold-framed "this item" column ---- */
.mh-pdp .ctable thead tr:first-child th{
	background:linear-gradient(180deg, var(--navy), color-mix(in srgb, var(--navy) 82%, #000));
	color:#fff;
	border-bottom-color:rgba(255,255,255,.14);
}
/* the "This item" header cell stays gold (its own !important rule wins) and
   keeps dark accent-ink text — a gold highlight inside the navy band. */
.mh-pdp .ctable .col-this{
	background:color-mix(in srgb, var(--accent) 15%, #fff) !important;
	box-shadow:inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent);
}
.mh-pdp .ctable thead tr:first-child .col-this{ box-shadow:inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent), inset 0 2px 0 var(--accent); }
.mh-pdp .ctable tbody tr:last-child .col-this{ box-shadow:inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent), inset 0 -2px 0 var(--accent); }
/* this item's price in brand orange so the eye lands on it */
.mh-pdp .ctable td.pprice.col-this{ color:var(--brand); }

/* =========================================================================
   RESPONSIVE / MOBILE PASS (v0.9.28) — the board only collapsed the grid to
   one column; this makes the PDP genuinely mobile-good (site is mobile-first).
   Reusable pattern for other pages: (1) stack the multi-column grid with a
   sensible reading order via display:contents + order; (2) any wide data
   table gets a horizontal-scroll wrapper + min-width instead of squishing;
   (3) the desktop "returning" bar becomes a persistent bottom action bar on
   mobile, with body padding so it never covers content. Appended last so it
   overrides the board's own @960 block above. Delete to revert.
   ========================================================================= */
@media (max-width:960px){
	/* stack order: gallery -> info(title/price/size/details) -> buy rail -> supplier */
	.mh-pdp .dpdp{ display:flex; flex-direction:column; gap:18px; }
	.mh-pdp .dgalcol{ display:contents; }      /* let gallery + supplier reorder independently */
	.mh-pdp .dgal{ order:1; }
	.mh-pdp .dinfo{ order:2; }
	.mh-pdp .drail{ order:3; }
	.mh-pdp .ksupplier{ order:4; }
	.mh-pdp .promise{ order:5; }               /* trust card AFTER the product, not before it (board leads with the gallery) */
	.mh-pdp .crumb{ display:none; }            /* board's mobile PDP opens straight into the gallery, no breadcrumb */
	.mh-pdp .dthumbs{ flex-direction:row; }    /* keep the thumb strip horizontal under the image */

	/* wide compare table: scroll horizontally instead of crushing the columns */
	.mh-pdp .dcompare{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
	.mh-pdp .ctable{ min-width:560px; }

	/* persistent bottom buy bar (its buttons drive the real .drail form via JS) */
	.mh-pdp{ padding-bottom:76px; }
	.mh-pdp .minibar{
		display:flex; top:auto; bottom:0; transform:none; pointer-events:auto;
		border-top:1px solid var(--line); border-bottom:0;
		box-shadow:0 -8px 24px -10px rgba(20,29,51,.28);
	}
	.mh-pdp .minibar.on,
	.mh-pdp .minibar[aria-hidden="true"]{ transform:none; }   /* always visible on mobile */
	.mh-pdp .minibar .mthumb,
	.mh-pdp .minibar .mti{ display:none; }                    /* compact: just price + actions */
	.mh-pdp .minibar__in{ padding:9px 14px; gap:10px; }
	.mh-pdp .minibar .mpr{ flex:none; }
	.mh-pdp .minibar .macts{ flex:1; }
	.mh-pdp .minibar .macts .btn{ flex:1; padding:0 12px; }

	/* The site-wide bottom nav (.mh-botnav, z-index 1200) is ALSO fixed at
	   bottom:0 on phones. When it is present, lift the buy bar to sit flush on
	   top of it (using the nav's shared height var) instead of being hidden
	   under it, and clear the footer behind BOTH bars. Without the nav, the rule
	   above (bottom:0) still applies as the fallback. */
	body.mh-has-botnav .mh-pdp .minibar{
		bottom:calc(var(--mh-botnav-h, 54px) + env(safe-area-inset-bottom));
		z-index:1190;   /* above page content, just under the nav (1200) */
	}
	body.single-product.mh-has-botnav{
		padding-bottom:calc(var(--mh-botnav-h, 54px) + 64px + env(safe-area-inset-bottom)) !important;
	}
}

/* =========================================================================
   FULLNESS FILLS (v0.9.29) — always-on premium blocks so a PDP never looks
   empty before a product is fully seeded: an "Our promise" card under the
   supplier (fills the gallery column) + a Highlights list in the info column.
   Gold checks tie to the category accent. The Description tab also renders a
   premium multi-paragraph fallback (and suppresses seed placeholder text).
   ========================================================================= */
.mh-pdp .promise{ margin-top:14px; border:1px solid var(--line); border-radius:var(--r-md); background:#fff; padding:14px 14px 13px; }
.mh-pdp .promise h4{ font-family:var(--font-display); font-weight:700; font-size:14.5px; margin:0 0 11px; color:var(--ink); }
.mh-pdp .promise ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.mh-pdp .promise li{ display:flex; gap:9px; align-items:flex-start; font-size:12.5px; color:var(--ink-2); line-height:1.4; }
.mh-pdp .promise li svg{ width:16px; height:16px; flex:none; color:var(--accent); margin-top:1px; }
.mh-pdp .promise li b{ color:var(--ink); font-weight:700; }
.mh-pdp .promise .charity{ display:flex; gap:8px; align-items:flex-start; margin-top:11px; padding-top:11px; border-top:1px solid var(--line-2); font-size:12px; color:var(--brand-ink); line-height:1.4; }
.mh-pdp .promise .charity svg{ width:15px; height:15px; flex:none; color:var(--brand); margin-top:1px; }

.mh-pdp .hilites{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.mh-pdp .hilites li{ display:flex; gap:9px; align-items:flex-start; font-size:13px; color:var(--ink); line-height:1.4; }
.mh-pdp .hilites li svg{ width:17px; height:17px; flex:none; color:var(--accent); margin-top:1px; }

/* phone-specific tightening */
@media (max-width:560px){
	.mh-pdp .ptitle{ font-size:21px; }
	.mh-pdp .featrow{ gap:8px; }
	.mh-pdp .featc{ padding:11px 6px; }
	.mh-pdp .supplier .sstats{ gap:6px; }
	.mh-pdp .priceblk .now{ font-size:28px; }
}

/* =========================================================================
   PHONE OVERFLOW + SUPPLIER-WIDTH FIX (v0.9.82) — flagged on a real phone:
   the supplier card rendered too narrow and the tabs/description ran off the
   right edge. Root cause: the stacked grid/flex children keep min-width:auto,
   so wide content (tabs row, spec table, long lines) forces the track wider
   than the viewport instead of wrapping/scrolling, and the dissolved gallery
   column's cards don't stretch. Fix: min-width:0 on every stacked child, force
   the full-bleed cards to 100%, hard-wrap long text, + a page-level
   overflow-x:clip safety net. (.ctable keeps its own scroll wrapper.)
   ========================================================================= */
/* gallery: main image on top, thumbnail strip BELOW it (all sizes). The board's
   DOM puts .dthumbs first; flip with flex order so the big image leads. */
.mh-pdp .dgal .dmain{ order:0; }
.mh-pdp .dgal .dthumbs{ order:1; }

@media (max-width:960px){
	.mh-pdp{ overflow-x:clip; }
	.mh-pdp .dpdp > *, .mh-pdp .dgalcol > *,
	.mh-pdp .dinfo, .mh-pdp .drail,
	.mh-pdp .dlower > *, .mh-pdp .dlower .dcard,
	.mh-pdp .draily > *{ min-width:0; max-width:100%; }
	.mh-pdp .ksupplier, .mh-pdp .promise, .mh-pdp .supplier, .mh-pdp .dgal{ width:100%; }
	.mh-pdp .tabpane, .mh-pdp .tabpane p, .mh-pdp .faq .faqb{ overflow-wrap:anywhere; }
	.mh-pdp .spectable{ table-layout:fixed; width:100%; }
	.mh-pdp .spectable td{ word-break:break-word; }
}