.pdv-breadbar{background:#f9fafb;border-bottom:1px solid #f0f0f0}
.pdv-breadcrumb{display:flex;align-items:center;gap:7px;font-size:12.5px;color:#9ca3af;padding:14px 0;flex-wrap:wrap}
.pdv-breadcrumb a{color:#6b7280;transition:color .2s;font-weight:500}
.pdv-breadcrumb a:hover{color:#814f20}
.pdv-breadcrumb i{font-size:8px;color:#d1d5db}
.pdv-breadcrumb span{color:#374151;font-weight:600;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}


.pdv-wrap{padding:40px 0 0}
.pdv-grid{display:grid;grid-template-columns:520px 1fr;gap:60px;align-items:start}


.pdv-gallery{position:sticky;top:90px}

/* Main image */
.pdv-main-wrap{position:relative;border-radius:24px;overflow:hidden;background:#f8fafb;border:1.5px solid #e5e7eb;cursor:zoom-in;aspect-ratio:1/1;margin-bottom:14px;box-shadow:0 8px 32px rgba(0,0,0,.07)}
.pdv-main-img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.34,1.4,.64,1),opacity .2s}
.pdv-main-wrap:hover .pdv-main-img{transform:scale(1.06)}
.pdv-img-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:80px;color:#d1d5db}

/* Discount/out badge on image */
.pdv-img-badge{position:absolute;top:16px;left:16px;display:flex;flex-direction:column;gap:7px;z-index:2}
.pdv-badge-disc{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;font-size:11px;font-weight:800;padding:5px 11px;border-radius:9999px;letter-spacing:.04em}
.pdv-badge-out{background:#6b7280;color:#fff;font-size:11px;font-weight:700;padding:5px 11px;border-radius:9999px}

/* Zoom hint */
.pdv-zoom-hint{position:absolute;bottom:14px;right:14px;background:rgba(0,0,0,.5);color:#fff;font-size:11px;font-weight:500;padding:6px 12px;border-radius:9999px;display:flex;align-items:center;gap:6px;pointer-events:none;backdrop-filter:blur(4px)}

/* Nav arrows on main image */
.pdv-img-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.85);border:1.5px solid rgba(0,0,0,.08);color:#374151;font-size:14px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;z-index:3;backdrop-filter:blur(4px)}
.pdv-img-nav:hover{background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.16);transform:translateY(-50%) scale(1.08)}
.pdv-img-prev{left:12px}
.pdv-img-next{right:12px}

/* Thumbnail strip */
.pdv-thumbs{display:flex;gap:10px;flex-wrap:wrap}
.pdv-thumb{width:74px;height:74px;border-radius:12px;overflow:hidden;border:2.5px solid #e5e7eb;cursor:pointer;transition:all .22s;flex-shrink:0;background:#f9fafb}
.pdv-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.pdv-thumb:hover{border-color:#814f20;transform:translateY(-2px)}
.pdv-thumb.active{border-color:#814f20;box-shadow:0 0 0 3px rgba(129,79,32,.18)}
.pdv-thumb.active img{transform:scale(1.05)}


.pdv-info{padding-top:4px}

.pdv-cat-tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#654120;text-transform:uppercase;letter-spacing:.08em;background:#f2e3d5;padding:5px 14px;border-radius:9999px;margin-bottom:14px}
.pdv-cat-tag i{font-size:10px}

.pdv-title{font-size:clamp(22px,2.8vw,34px);font-weight:800;color:#111827;line-height:1.2;margin-bottom:12px}

/* Rating row */
.pdv-rating-row{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.pdv-stars{display:flex;gap:3px}
.pdv-stars i{color:#f59e0b;font-size:14px}
.pdv-stars i.half{position:relative;display:inline-block;color:#e5e7eb}
.pdv-stars i.half::before{content:'\f089';font-family:'Font Awesome 6 Free';font-weight:900;color:#f59e0b;position:absolute;left:0;top:0;width:50%;overflow:hidden}
.pdv-rating-score{font-size:15px;font-weight:800;color:#111827}
.pdv-rating-count{font-size:13px;color:#9ca3af;cursor:pointer;transition:color .2s}
.pdv-rating-count:hover{color:#814f20;text-decoration:underline}
.pdv-rating-badge{background:#fef9c3;color:#854d0e;font-size:11px;font-weight:700;padding:4px 10px;border-radius:9999px}

/* Price block */
.pdv-price-block{background:linear-gradient(135deg,#faf6f3,#f2e3d5);border-radius:16px;padding:18px 22px;margin-bottom:20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.pdv-price{font-size:36px;font-weight:800;color:#654120;letter-spacing:-.5px}
.pdv-price-orig{font-size:20px;color:#9ca3af;text-decoration:line-through;font-weight:500}
.pdv-price-save{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;font-size:12px;font-weight:800;padding:5px 12px;border-radius:9999px}

/* Stock */
.pdv-stock-row{margin-bottom:18px}
.pdv-stock{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;padding:7px 16px;border-radius:9999px}
.pdv-stock.in{background:#faf6f3;color:#5d3c1e;border:1.5px solid #efd8c3}
.pdv-stock.low{background:#fffbeb;color:#92400e;border:1.5px solid #fde68a;animation:pdvPulse 2s infinite}
.pdv-stock.out{background:#fef2f2;color:#991b1b;border:1.5px solid #fecaca}
@keyframes pdvPulse{0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.35)}50%{box-shadow:0 0 0 6px rgba(245,158,11,0)}}
.pdv-stock-num{font-size:11px;font-weight:700;background:#fef9c3;color:#854d0e;padding:2px 7px;border-radius:9999px;margin-left:2px}

/* Short description */
.pdv-short-desc{font-size:14px;color:#4b5563;line-height:1.8;margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid #f3f4f6}


.pdv-features{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.pdv-feat-chip{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:#654120;background:#faf6f3;border:1px solid #f3e5d8;padding:6px 13px;border-radius:9999px}
.pdv-feat-chip i{font-size:11px;color:#814f20}


.pdv-buy-section{background:#fff;border:1.5px solid #f3f4f6;border-radius:20px;padding:20px;margin-bottom:20px;box-shadow:0 2px 12px rgba(0,0,0,.04)}
.pdv-qty-row{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.pdv-qty-label{font-size:13px;font-weight:600;color:#374151;white-space:nowrap}
.pdv-qty-ctrl{display:flex;align-items:center;background:#f9fafb;border:1.5px solid #e5e7eb;border-radius:9999px;overflow:hidden}
.pdv-qty-ctrl button{width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:16px;color:#374151;transition:all .2s}
.pdv-qty-ctrl button:hover:not(:disabled){background:#f2e3d5;color:#814f20}
.pdv-qty-ctrl button:disabled{opacity:.35;cursor:not-allowed}
.pdv-qty-val{min-width:48px;width:48px;text-align:center;font-size:16px;font-weight:700;color:#111827;border:none;background:transparent;outline:none;-moz-appearance:textfield;appearance:textfield;padding:0}
.pdv-qty-val::-webkit-outer-spin-button,.pdv-qty-val::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pdv-cart-btns{display:flex;gap:12px;flex-wrap:wrap}
/* Height trimmed from 15px/24px padding at 15px type down to 12px/22px at
   14px - about 56px tall to about 44px, which is still a comfortable target
   and no longer dominates the buy box. */
.pdv-atc-btn{flex:1;min-width:150px;background:linear-gradient(135deg,#814f20,#7c4c1f,#945b25);color:#fff;padding:12px 22px;border-radius:9999px;font-size:14px;font-weight:700;font-family: var(--font-body);display:flex;align-items:center;justify-content:center;gap:8px;transition:all .3s;cursor:pointer;border:none;box-shadow:0 3px 12px rgba(129,79,32,.26)}
.pdv-atc-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(129,79,32,.38)}
.pdv-atc-btn:active{transform:scale(.97)}
.pdv-atc-btn:disabled{background:#e5e7eb;color:#9ca3af;box-shadow:none;cursor:not-allowed;transform:none}
.pdv-atc-btn.loading{pointer-events:none}
.pdv-atc-btn.loading i{animation:pdvSpin .7s linear infinite}
@keyframes pdvSpin{to{transform:rotate(360deg)}}
/* Buy Now: an outline twin of Add to Cart - same family, same size, so the
   pair reads as one control rather than two competing calls to action.
   The near-black fill it used to have was the only cool, heavy element left in
   a warm palette, and at the same weight it out-shouted the primary action.

   #814f20 is the Add to Cart gradient's own start colour, and it measures
   6.83:1 on white - clearing AA for the label (4.5) AND the 3:1 non-text rule
   for the border, which matters because a button edge is a real control
   boundary, unlike the decorative hairlines elsewhere in this sheet.
   A border cannot take a gradient, so a gradient stop is the closest match. */
.pdv-buy-btn{flex:1;min-width:140px;background:transparent;color:#814f20;border:1.5px solid #814f20;padding:12px 22px;border-radius:9999px;font-size:14px;font-weight:700;font-family: var(--font-body);display:flex;align-items:center;justify-content:center;gap:8px;transition:all .3s;text-decoration:none;box-shadow:none}
.pdv-buy-btn:hover{background:#814f20;color:#fff;transform:translateY(-2px);box-shadow:0 8px 20px rgba(129,79,32,.32)}
.pdv-buy-btn:active{transform:scale(.97)}


.pdv-sec-row{display:flex;align-items:center;gap:10px;margin-bottom:22px;flex-wrap:wrap}
.pdv-sec-btn{display:flex;align-items:center;gap:7px;padding:10px 18px;border-radius:9999px;font-size:13px;font-weight:600;font-family: var(--font-body);cursor:pointer;transition:all .25s;border:1.5px solid #e5e7eb;color:#374151;background:#fff}
.pdv-sec-btn:hover{border-color:#814f20;color:#814f20;background:#faf6f3}
.pdv-sec-btn.wished{border-color:#f43f5e;color:#f43f5e;background:#fff1f2}
.pdv-sec-btn.wished i{color:#f43f5e}


.pdv-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:22px}
.pdv-trust-item{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:14px 10px;background:#f9fafb;border-radius:14px;border:1px solid #f3f4f6}
.pdv-trust-item i{font-size:20px;color:#814f20}
.pdv-trust-item span{font-size:11.5px;font-weight:600;color:#374151;line-height:1.4}


.pdv-delivery{display:flex;align-items:center;gap:10px;padding:13px 16px;background:#faf6f3;border-radius:12px;border:1px solid #f3e5d8;font-size:13px;color:#5d3c1e;font-weight:500;margin-bottom:4px}
.pdv-delivery i{font-size:16px;color:#814f20;flex-shrink:0}
.pdv-delivery strong{font-weight:700}


/* ══════════════════════════════════════════════════════════════════
   PRODUCT DETAILS BLOCK
   The tab bar is now an editorial underline set on a hairline rule
   rather than a grey pill - the pill read as generic and its cool grey
   fought the warm peach/caramel palette.

   Colour decisions are measured, not assumed:
     #A36833 tab underline  4.58:1 on white - clears the 3:1 non-text
                            rule for a state indicator (WCAG 1.4.11)
     #66707E muted text     5.02:1 on white, 4.67:1 on #FAF6F3
     #774C24 on #F2E3D5     5.88:1
   The frame hairline (#F2E3D5, 1.26:1) is decorative: the card is a
   content container and is defined by its white fill plus a soft warm
   shadow, not by that border.
   ══════════════════════════════════════════════════════════════════ */
.pdv-tabs-section{padding:56px 0 0}
/* Breathing room before the footer.
   .pdv-wrap, .container and .pdv-tabs-section all carry zero bottom padding,
   and the only 72px gap in the chain came from .pdv-related-section - which
   is conditionally rendered. On a store with a single product (so no related
   items) the tab frame butted straight into the dark footer. This restores
   the gap only when the tabs really are the last block, so the related
   section's own margin-top is untouched when it does render. */
.pdv-tabs-section:last-child{padding-bottom:72px}

/* Section header - gives the block a hierarchy the bare tab bar lacked */
.pdv-tabs-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:26px;flex-wrap:wrap}
.pdv-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-body);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#A36833;margin-bottom:12px}
.pdv-eyebrow::before{content:"";width:28px;height:2px;border-radius:2px;background:linear-gradient(90deg,#E7B88E,#DFAB76);flex-shrink:0}
.pdv-tabs-title{font-family:var(--font-display);font-size:clamp(26px,3.4vw,36px);font-weight:600;line-height:1.16;color:#1F2937;letter-spacing:-.01em}
.pdv-tabs-title span{color:#774C24;font-style:italic}
.pdv-tabs-sub{margin:12px 0 0;font-size:14.5px;line-height:1.65;color:#4B5563;max-width:56ch}
.pdv-tabs-stamp{display:inline-flex;align-items:center;gap:9px;padding:9px 16px;background:#FAF6F3;border:1px solid #F2E3D5;border-radius:9999px;font-family:var(--font-body);font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#774C24;white-space:nowrap;flex-shrink:0}
.pdv-tabs-stamp i{font-size:13px;color:#A36833}

/* Tab bar */
.pdv-tabs-nav{display:flex;gap:26px;margin-bottom:0;overflow-x:auto;border-bottom:1px solid #F2E3D5;scrollbar-width:none;-ms-overflow-style:none}
.pdv-tabs-nav::-webkit-scrollbar{display:none}
.pdv-tab-btn{position:relative;display:inline-flex;align-items:center;gap:9px;flex:0 0 auto;padding:14px 4px;font-family:var(--font-body);font-size:13px;font-weight:600;color:#66707E;background:transparent;border:none;cursor:pointer;white-space:nowrap;transition:color .25s ease}
.pdv-tab-btn i{font-size:14px;transition:color .25s ease}
.pdv-tab-label{font-family:var(--font-display);font-size:17px;font-weight:600;letter-spacing:.005em}
.pdv-tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:20px;padding:0 7px;background:#F2E3D5;border-radius:9999px;font-family:var(--font-body);font-size:11.5px;font-weight:700;color:#774C24}
.pdv-tab-btn::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:#A36833;transform:scaleX(0);transform-origin:left center;transition:transform .3s cubic-bezier(.4,0,.2,1)}
.pdv-tab-btn:hover{color:#774C24}
.pdv-tab-btn.active{color:#774C24}
.pdv-tab-btn.active::after{transform:scaleX(1)}

/* One frame wraps every panel so the card edge persists across switches */
.pdv-tab-frame{background:#fff;border:1px solid #F2E3D5;border-top:none;border-radius:0 0 20px 20px;padding:40px 44px;box-shadow:0 1px 2px rgba(124,76,31,.04),0 14px 34px -12px rgba(124,76,31,.14)}

.pdv-tab-panel{display:none}
.pdv-tab-panel.active{display:block;animation:pdvFadeUp .35s ease both}
@keyframes pdvFadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* Description tab.
   This is admin-authored rich HTML, so the rules stay structural: rhythm
   via a sibling selector, and enhancement for the tags the editor can
   actually emit. Anything unknown from the WYSIWYG still renders fine. */
/* Single column, flush left, at a readable ~70ch measure. The card is
   ~1060px wide, so some space remains on the right - stretching the line
   length to fill it would run past ~100 characters, which genuinely hurts
   reading. Left-aligned rather than centred so the text starts on the same
   edge as the tab label, the heading and the other tab panels. */
.pdv-desc-content{max-width:70ch;font-size:15.5px;line-height:1.7;color:#374151}
/* Keep headings and discrete blocks from being split when the page is printed. */
.pdv-desc-content h3,.pdv-desc-content h4,.pdv-desc-content li,.pdv-desc-content blockquote,.pdv-desc-content table,.pdv-desc-content figure,.pdv-desc-content pre,.pdv-desc-content hr{break-inside:avoid}
.pdv-desc-content>*{margin:0}
.pdv-desc-content>*+*{margin-top:.85em}
.pdv-desc-content h3,.pdv-desc-content h4{font-family:var(--font-display);font-size:21px;font-weight:600;line-height:1.3;color:#111827;margin:1.7em 0 .45em;padding-left:15px;border-left:3px solid #DFAB76}
.pdv-desc-content h3:first-child,.pdv-desc-content h4:first-child{margin-top:0}
.pdv-desc-content ul,.pdv-desc-content ol{margin:0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:.6em}
.pdv-desc-content ul li{position:relative;padding-left:26px}
.pdv-desc-content ul li::before{content:"";position:absolute;left:5px;top:.66em;width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,#E7B88E,#DFAB76)}
.pdv-desc-content ol{counter-reset:pdvDescList}
.pdv-desc-content ol li{position:relative;padding-left:34px;counter-increment:pdvDescList}
.pdv-desc-content ol li::before{content:counter(pdvDescList);position:absolute;left:0;top:.14em;width:22px;height:22px;border-radius:50%;background:#F2E3D5;color:#774C24;font-family:var(--font-body);font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
.pdv-desc-content strong{color:#111827;font-weight:700}
.pdv-desc-content a{color:#945B25;text-decoration:underline;text-decoration-color:#DFAB76;text-decoration-thickness:1.5px;text-underline-offset:3px;transition:color .2s,text-decoration-color .2s}
.pdv-desc-content a:hover{color:#774C24;text-decoration-color:#A36833}
.pdv-desc-content img{border-radius:14px;margin:1.5em 0;max-width:100%;height:auto}
.pdv-desc-content blockquote{margin:1.5em 0;padding:15px 22px;background:#FAF6F3;border-left:3px solid #DFAB76;border-radius:0 14px 14px 0;font-style:italic;color:#4B5563}
.pdv-desc-content table{width:100%;border-collapse:collapse;margin:1.5em 0;font-size:14px;line-height:1.6}
.pdv-desc-content th{background:#FAF6F3;color:#111827;font-weight:700;text-align:left}
.pdv-desc-content th,.pdv-desc-content td{padding:10px 13px;border:1px solid #F2E3D5}
.pdv-desc-content hr{border:none;height:1px;background:#F2E3D5;margin:2em 0}
.pdv-no-content{font-size:14px;color:#66707E;font-style:italic}

/* How to use tab */
.pdv-how-list{display:flex;flex-direction:column;max-width:64ch}
.pdv-how-item{display:flex;gap:18px;padding:22px 0;border-bottom:1px solid #F2E3D5}
.pdv-how-item:first-child{padding-top:0}
.pdv-how-item:last-child{border-bottom:none;padding-bottom:0}
.pdv-how-num{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,#A36833,#774C24);color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 12px -3px rgba(124,76,31,.4)}
.pdv-how-text strong{display:block;font-family:var(--font-display);font-size:18px;font-weight:600;line-height:1.35;color:#111827;margin-bottom:5px}
.pdv-how-text span{font-size:14px;color:#4B5563;line-height:1.7}
.pdv-how-tip{display:flex;align-items:flex-start;gap:12px;margin-top:26px;padding:16px 20px;background:#FAF6F3;border:1px solid #F2E3D5;border-radius:14px;font-size:13.5px;line-height:1.65;color:#5D3C1E}
.pdv-how-tip i{color:#A36833;margin-top:3px;flex-shrink:0}

/* Ingredients tab */
.pdv-ing-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.pdv-ing-card{background:#FAF6F3;border:1px solid #F2E3D5;border-radius:16px;padding:18px 20px;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.pdv-ing-card:hover{border-color:#DFAB76;transform:translateY(-2px);box-shadow:0 10px 22px -12px rgba(124,76,31,.35)}
.pdv-ing-card strong{display:block;font-size:13.5px;font-weight:700;color:#111827;margin-bottom:5px}
.pdv-ing-card span{font-size:12.5px;color:#4B5563;line-height:1.6}
.pdv-ing-note{margin-top:22px;display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.6;color:#4B5563}
.pdv-ing-note i{color:#A36833;margin-top:3px;flex-shrink:0}


.pdv-reviews-section{padding:0}
/* Rating stars and bar fills.
   #c26605 replaces #f59e0b here. The old amber measured only 2.00:1 on the
   summary card and 1.71:1 against its own bar track, so a rating was a data
   mark nobody could actually see. #c26605 is the lightest amber clearing 3:1
   in both roles (3.76:1 and 3.22:1) and reads as a deeper, more refined gold.
   #f59e0b is still used for decorative stars elsewhere on the site. */
.pdv-reviews-summary{
  display:grid;grid-template-columns:230px 1fr;gap:0;align-items:stretch;
  background:#FAF6F3;border:1px solid #EACCB0;border-radius:22px;
  padding:30px 34px;margin-bottom:28px;
  box-shadow:0 1px 2px rgba(124,76,31,.04),0 12px 30px -14px rgba(124,76,31,.18);
}
.pdv-rating-hero{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding-right:34px;border-right:1px solid #EACCB0;
}
.pdv-rating-num{display:flex;align-items:baseline;justify-content:center;gap:9px}
.pdv-rating-score{font-size:64px;font-weight:800;line-height:1;letter-spacing:-3px;color:#111827}
.pdv-rating-den{font-size:13px;font-weight:600;color:#66707E;letter-spacing:.01em}
.pdv-rating-stars-big{display:flex;justify-content:center;gap:5px;margin:14px 0 8px}
.pdv-rating-stars-big i{color:#c26605;font-size:19px}
.pdv-rating-stars-big .far{color:#E0CDB4}
.pdv-rating-label{font-size:13px;color:#66707E}
.pdv-rating-verified{
  display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  padding:5px 12px;background:#F2E3D5;border-radius:9999px;
  font-size:11.5px;font-weight:600;color:#774C24;
}
.pdv-rating-verified i{font-size:12px;color:#A36833}

.pdv-rating-bars{display:flex;flex-direction:column;justify-content:center;gap:9px;padding-left:34px}
.pdv-rating-bars-title{
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#66707E;margin:0 0 4px;
}
.pdv-rbar-row{display:flex;align-items:center;gap:12px}
.pdv-rbar-label{display:flex;align-items:center;gap:5px;width:26px;flex-shrink:0;font-size:12.5px;font-weight:600;color:#4B5563}
.pdv-rbar-label i{color:#c26605;font-size:11px}
.pdv-rbar-track{flex:1;height:9px;background:#F2E3D5;border-radius:9999px;overflow:hidden}
.pdv-rbar-fill{height:100%;background:#c26605;border-radius:9999px;transition:width .8s cubic-bezier(.34,1.4,.64,1)}
.pdv-rbar-cnt{font-size:12.5px;font-weight:700;color:#111827;min-width:20px;text-align:right}
.pdv-rbar-pct{font-size:11.5px;color:#66707E;min-width:38px;text-align:right;font-variant-numeric:tabular-nums}
/* Rows with no reviews recede, but stay readable rather than being hidden. */
.pdv-rbar-row:not(.has-reviews) .pdv-rbar-label{color:#66707E}
.pdv-rbar-row:not(.has-reviews) .pdv-rbar-label i{color:#E0CDB4}
/* The row that actually holds the average gets a subtle warm wash. */
.pdv-rbar-row.has-reviews{background:#F2E3D5;border-radius:8px;padding:2px 6px;margin:0 -6px}

/* Review cards */
.pdv-reviews-list{display:flex;flex-direction:column;gap:16px;max-height:560px;overflow-y:auto;padding-right:4px}
.pdv-reviews-list::-webkit-scrollbar{width:4px}
.pdv-reviews-list::-webkit-scrollbar-track{background:transparent}
.pdv-reviews-list::-webkit-scrollbar-thumb{background:#E2CDBB;border-radius:9999px}
.pdv-review-card{background:#fff;border-radius:16px;padding:22px;border:1px solid #F2E3D5;box-shadow:0 2px 10px rgba(124,76,31,.05);transition:box-shadow .2s,border-color .2s}
.pdv-review-card:hover{border-color:#DFAB76;box-shadow:0 6px 20px rgba(124,76,31,.1)}
.pdv-review-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px;gap:12px;flex-wrap:wrap}
.pdv-review-user{display:flex;align-items:center;gap:10px}
/* Reviewer chip. The gradient comes from the reviewer via --av-a/--av-b
   (see sm_review_avatar()), so each person is visually distinct while the
   fallback keeps the default caramel if the custom properties go missing.
   Three shadow layers give it depth instead of the flat disc it used to be:
   a white ring, a neutral drop shadow, and a halo tinted with that person's
   own colour. All three sit on the element itself - no pseudo-element - so
   there is no z-index/stacking-context dependency on how the markup nests. */
.pdv-review-avatar{
  --av-a:#A36833;
  --av-b:#774C24;
  width:44px;height:44px;
  border-radius:50%;
  background:linear-gradient(140deg,var(--av-a),var(--av-b));
  color:#fff;
  font-size:14px;
  font-weight:800;
  letter-spacing:.02em;
  text-shadow:0 1px 2px rgba(0,0,0,.22);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  box-shadow:0 0 0 2px #fff,0 3px 10px rgba(15,23,42,.14),0 0 16px -3px var(--av-a);
  transition:transform .2s ease,box-shadow .2s ease;
  user-select:none;
}
.pdv-review-user:hover .pdv-review-avatar{
  transform:scale(1.06);
  box-shadow:0 0 0 2px #fff,0 6px 16px -3px rgba(15,23,42,.22),0 0 22px -2px var(--av-a);
}
@media (hover:none){.pdv-review-user:hover .pdv-review-avatar{transform:none}}
.pdv-review-name{font-size:14px;font-weight:700;color:#111827}
/* Was #9ca3af, which measures only ~2.5:1 on white - below AA for 12px text. */
.pdv-review-date{font-size:12px;color:#66707E}
.pdv-review-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.pdv-review-stars{display:flex;gap:2px}
.pdv-review-stars i{color:#f59e0b;font-size:12px}
.pdv-review-badge{font-size:10px;font-weight:700;color:#5d3c1e;background:#faf6f3;padding:3px 8px;border-radius:9999px;border:1px solid #efd8c3}
.pdv-review-text{font-size:13.5px;color:#374151;line-height:1.75}
.pdv-review-helpful{margin-top:10px;display:flex;align-items:center;gap:8px;font-size:12px;color:#66707E}
.pdv-review-helpful button{display:flex;align-items:center;gap:4px;font-size:12px;color:#66707E;font-family: var(--font-body);padding:4px 10px;border-radius:9999px;border:1px solid #F2E3D5;background:#fff;transition:all .2s}
.pdv-review-helpful button:hover{border-color:#DFAB76;color:#774C24;background:#FAF6F3}
.pdv-write-review-btn{margin-top:20px;display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:linear-gradient(135deg,#A36833,#774C24);color:#fff;border-radius:9999px;font-size:14px;font-weight:700;font-family: var(--font-body);cursor:pointer;transition:all .3s;border:none;box-shadow:0 4px 14px rgba(124,76,31,.28)}
.pdv-write-review-btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(124,76,31,.38)}

/* Write review modal */
.pdv-review-modal{position:fixed;inset:0;z-index:700;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .3s;backdrop-filter:blur(4px)}
.pdv-review-modal.open{opacity:1;pointer-events:all}
.pdv-review-modal-inner{background:#fff;border-radius:24px;padding:32px;width:100%;max-width:500px;position:relative;box-shadow:0 24px 64px rgba(0,0,0,.2);transform:translateY(16px);transition:transform .3s}
.pdv-review-modal.open .pdv-review-modal-inner{transform:translateY(0)}
.pdv-review-modal h3{font-size:18px;font-weight:800;color:#111827;margin-bottom:6px}
.pdv-review-modal .pdv-modal-subtitle{font-size:13px;color:#6b7280;margin-bottom:22px}
.pdv-review-modal label{display:block;font-size:13px;font-weight:600;color:#374151;margin-bottom:6px}
.pdv-review-modal .pdv-modal-close{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;background:#f3f4f6;color:#6b7280;font-size:15px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s}
.pdv-review-modal .pdv-modal-close:hover{background:#e5e7eb}
/* Star picker */
.pdv-star-picker{display:flex;gap:6px;margin-bottom:18px}
.pdv-star-picker i{font-size:26px;color:#d1d5db;cursor:pointer;transition:color .15s,transform .15s}
.pdv-star-picker i:hover,.pdv-star-picker i.lit{color:#f59e0b;transform:scale(1.2)}
.pdv-modal-input{width:100%;padding:12px 15px;border:1.5px solid #e5e7eb;border-radius:12px;font-size:14px;font-family: var(--font-body);outline:none;transition:border-color .2s;margin-bottom:14px;resize:vertical}
.pdv-modal-input:focus{border-color:#814f20;box-shadow:0 0 0 3px rgba(129,79,32,.12)}
.pdv-modal-submit{width:100%;background:linear-gradient(135deg,#814f20,#7c4c1f);color:#fff;padding:14px;border-radius:9999px;font-size:15px;font-weight:700;font-family: var(--font-body);border:none;cursor:pointer;transition:all .3s;margin-top:4px}
.pdv-modal-submit:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(129,79,32,.35)}


.pdv-related-section{padding:56px 0 72px;margin-top:52px;border-top:1px solid #f3f4f6}
.pdv-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;flex-wrap:wrap;gap:12px}
.pdv-section-head h2{font-size:22px;font-weight:800;color:#111827}
.pdv-section-head h2 span{color:#814f20}
.pdv-view-all{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#814f20;padding:9px 20px;border-radius:9999px;border:1.5px solid #f3e5d8;background:#faf6f3;transition:all .25s}
.pdv-view-all:hover{background:#814f20;color:#fff;border-color:#814f20}
.pdv-related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:22px}

/* Related product card */
.pdv-rel-card{background:#fff;border-radius:20px;border:1.5px solid #f3f4f6;overflow:hidden;transition:all .3s;cursor:pointer}
.pdv-rel-card:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(0,0,0,.12);border-color:#f3e5d8}
.pdv-rel-img-wrap{position:relative;aspect-ratio:1/1;overflow:hidden;background:#f8fafb}
.pdv-rel-img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.pdv-rel-card:hover .pdv-rel-img{transform:scale(1.06)}
.pdv-rel-badge{position:absolute;top:10px;left:10px;font-size:10px;font-weight:800;padding:4px 9px;border-radius:9999px;color:#fff}
.pdv-rel-badge.disc{background:linear-gradient(135deg,#ef4444,#dc2626)}
.pdv-rel-badge.out{background:#6b7280}
.pdv-rel-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.45) 0%,transparent 55%);opacity:0;transition:opacity .3s;display:flex;align-items:flex-end;justify-content:center;padding-bottom:14px}
.pdv-rel-card:hover .pdv-rel-overlay{opacity:1}
.pdv-rel-quick-btn{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.95);color:#814f20;padding:9px 18px;border-radius:9999px;font-size:12px;font-weight:700;font-family: var(--font-body);cursor:pointer;border:none;transition:all .2s;backdrop-filter:blur(4px)}
.pdv-rel-quick-btn:hover{background:#fff;transform:scale(1.04)}
.pdv-rel-quick-btn.out-btn{color:#6b7280;cursor:not-allowed}
.pdv-rel-body{padding:14px}
.pdv-rel-cat{font-size:10.5px;font-weight:700;color:#814f20;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
/* Related-product name. Deliberately NOT clamped - same reasoning as .sp-name
   in shop.css: the 2-line -webkit-line-clamp truncated any name needing a
   third line, which on a phone is most of this catalogue. `overflow-wrap` is
   the safety net so an over-long token can never widen the card past its
   column. .pdv-related-grid is a grid, so cards in a row stretch to the
   tallest and the price row stays on a common baseline regardless. */
.pdv-rel-name{font-size:13.5px;font-weight:700;color:#111827;line-height:1.4;margin-bottom:8px;overflow-wrap:break-word;word-break:break-word}
.pdv-rel-price-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pdv-rel-price{font-size:16px;font-weight:800;color:#654120}
.pdv-rel-orig{font-size:12px;color:#9ca3af;text-decoration:line-through}
.pdv-rel-add{display:flex;align-items:center;gap:6px;padding:8px 16px;background:linear-gradient(135deg,#814f20,#7c4c1f);color:#fff;border-radius:9999px;font-size:12px;font-weight:700;font-family: var(--font-body);border:none;cursor:pointer;margin-top:10px;width:100%;justify-content:center;transition:all .25s}
.pdv-rel-add:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(129,79,32,.35)}
.pdv-rel-add.out-btn{background:#e5e7eb;color:#9ca3af;cursor:not-allowed;transform:none;box-shadow:none}


/* NOTE: the .pdv-lightbox / .pdv-lb-* styles moved to shop.css, which is the
   stylesheet both product.php and products.php load. Keeping a shared overlay
   in a PDP-only file meant the listing page could not reuse it. The two
   responsive overrides that used to sit in the @media blocks below moved with
   it. */


@media(max-width:1100px){
  .pdv-grid{grid-template-columns:1fr 1fr;gap:40px}
}
@media(max-width:820px){
  .pdv-grid{grid-template-columns:1fr;gap:24px}
  .pdv-gallery{position:static}
  .pdv-related-grid{grid-template-columns:repeat(2,1fr)}
  .pdv-reviews-summary{grid-template-columns:1fr;gap:20px}
  .pdv-rating-big{display:flex;gap:16px;align-items:center;justify-content:flex-start;text-align:left}
  .pdv-rating-stars-big{justify-content:flex-start}
}
@media(max-width:600px){
  .pdv-trust{grid-template-columns:1fr 1fr 1fr;gap:6px}
  .pdv-trust-item i{font-size:16px}
  .pdv-cart-btns{flex-direction:column}
  .pdv-atc-btn,.pdv-buy-btn{min-width:0;width:100%}
  .pdv-tabs-nav{gap:18px}
  .pdv-tab-btn{padding:12px 3px;font-size:12px}
  .pdv-tab-label{font-size:15px}
  .pdv-tab-frame{padding:26px 20px;border-radius:0 0 16px 16px}
  .pdv-tabs-section:last-child{padding-bottom:48px}
  .pdv-tabs-sub{display:none}
  .pdv-tabs-stamp{display:none}
  .pdv-desc-content{font-size:15px;max-width:100%}
  .pdv-related-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  /* Names are no longer clamped to two lines (see .pdv-rel-name), so on a
     phone they wrap to three or four. Tighter body padding buys text column
     and a touch less type keeps a four-line name from overwhelming a card
     that is only ~150px wide at this breakpoint. */
  .pdv-rel-body{padding:11px}
  .pdv-rel-name{font-size:12.5px;line-height:1.35;margin-bottom:6px;text-wrap:pretty}
  .pdv-rel-cat{font-size:9.5px;margin-bottom:3px}
  .pdv-rel-price{font-size:15px}
  .pdv-ing-grid{grid-template-columns:1fr 1fr}
}

/* ── Admin reply shown under a customer review ─────────────── */
.pdv-review-reply{
    margin-top:12px;padding:12px 14px;
    background:#faf6f3;border:1px solid #e8c6a7;
    border-radius:12px;
}
.pdv-review-reply-head{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.pdv-review-reply-avatar{
    width:26px;height:26px;border-radius:50%;
    background:linear-gradient(135deg,#814f20,#945b25);
    display:flex;align-items:center;justify-content:center;
    font-size:11px;color:#fff;flex-shrink:0;
}
.pdv-review-reply-head strong{font-size:12.5px;color:#654120;font-weight:700}
.pdv-review-reply-date{font-size:11px;color:#66707E;margin-left:auto}
.pdv-review-reply-body{font-size:12.5px;color:#374151;line-height:1.7}

/* "My Review" state on the Write-review button */
.pdv-my-review-pill{
    display:inline-block;margin-left:6px;padding:2px 8px;border-radius:9999px;
    font-size:10px;font-weight:700;letter-spacing:.2px;
}
.pdv-my-review-pill.approved{background:#f6ece2;color:#714924}
.pdv-my-review-pill.pending{background:#fef3c7;color:#b45309}
.pdv-my-review-pill.rejected{background:#fee2e2;color:#b91c1c}

.pdv-review-signin i{margin-right:6px;color:#A36833}
.pdv-review-signin strong{color:#374151}

@media (max-width:520px){
  .pdv-review-reply{padding:10px 12px}
  .pdv-review-reply-date{display:none}
}


/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE LAYER — product detail page.  APPENDED LAST — keep at EOF.

   The base sheet is a desktop design: a 520px gallery beside a fluid info
   column, 40px tab-frame padding, a 64px rating numeral and a 230px summary
   rail. The three @media blocks above cover the grid collapse and a handful
   of buttons but stop at 520px and leave the shells, the review summary and
   the breadcrumb untouched, so a 328px phone rendered a shrunken desktop
   page. This layer finishes the job.
   ══════════════════════════════════════════════════════════════════════ */

/* Overflow containment. A grid/flex ITEM defaults to `min-width:auto` and
   refuses to shrink below its own min-content width, so one wide child (an
   admin-authored table, a long unbroken product name) widens the whole
   column. Zeroing it lets the track actually honour `1fr`. */
.pdv-grid>*,
.pdv-reviews-summary>*,
.pdv-related-grid>*,
.pdv-ing-grid>*,
.pdv-trust>*,
.pdv-section-head>*{min-width:0}

@media(max-width:820px){
  /* Vertical rhythm that was sized for a tall desktop column. */
  .pdv-tabs-section{padding-top:44px}
  .pdv-related-section{padding:44px 0 60px;margin-top:40px}
  /* The summary collapses to one column at this width, but its hero cell kept
     `border-right` + `padding-right:34px` — left over as a stray hairline
     floating to the right of a centred numeral. Both are reset here. */
  .pdv-rating-hero{padding-right:0;padding-bottom:20px;border-right:none;border-bottom:1px solid #EACCB0}
  .pdv-rating-bars{padding-left:0}
}

@media(max-width:600px){
  .pdv-wrap{padding:26px 0 0}
  .pdv-tabs-section{padding-top:34px}
  .pdv-tabs-section:last-child{padding-bottom:54px}
  .pdv-related-section{padding:34px 0 48px;margin-top:30px}

  /* Breadcrumb. The full trail needs ~460px of run text; a 375px phone leaves
     ~327px. The old rule ellipsised the <span> to 280px, which truncated the
     one crumb a shopper actually wants — the product name. Dropping the
     middle crumbs instead keeps Home, the chevron and the COMPLETE title,
     which wraps over two lines. `nth-of-type` counts siblings by tag, and the
     home icon is a child of its own <a>, so it is not counted as a chevron. */
  .pdv-breadcrumb{font-size:12px;gap:6px;padding:12px 0}
  .pdv-breadcrumb a:nth-of-type(n+2){display:none}
  .pdv-breadcrumb i:nth-of-type(n+2){display:none}
  .pdv-breadcrumb span{max-width:none;white-space:normal;overflow:visible;line-height:1.45}

  .pdv-title{font-size:clamp(21px,6.4vw,26px)}
  .pdv-rating-row{gap:9px;margin-bottom:16px}
  .pdv-price-block{padding:15px 16px;gap:12px;border-radius:14px;margin-bottom:16px}
  .pdv-price{font-size:30px}
  .pdv-price-orig{font-size:16px}
  .pdv-short-desc{font-size:13.5px;line-height:1.75;padding-bottom:20px;margin-bottom:20px}

  .pdv-buy-section{padding:16px;border-radius:16px;margin-bottom:16px}
  .pdv-qty-row{gap:10px;margin-bottom:14px}
  .pdv-qty-ctrl button{width:40px;height:40px}
  .pdv-qty-val{min-width:44px;width:44px}
  .pdv-sec-btn{padding:9px 14px;font-size:12.5px;gap:6px}
  /* gap deliberately NOT set here: the base 600px block already picks 6px for
     the 3-up layout, and re-declaring it would silently override that choice. */
  .pdv-trust{margin-bottom:18px}
  .pdv-trust-item{padding:11px 8px;border-radius:12px;gap:5px}
  .pdv-trust-item span{font-size:10.5px}
  .pdv-delivery{padding:11px 13px;font-size:12.5px;gap:8px}

  .pdv-tabs-head{margin-bottom:20px;gap:14px}
  /* Tab bar. It used to be `overflow-x:auto` with a HIDDEN scrollbar, so at
     320-420px the tabs did not visibly scroll — "Reviews" was simply cut off
     at the frame edge with no affordance that more tabs existed. It wraps
     onto a second row instead.

     The bar KEEPS its own border-bottom: .pdv-tab-frame declares
     border-top:none and depends on that hairline to close its top edge, so
     dropping it would leave the frame open.

     The active indicator is .pdv-tab-btn::after at bottom:-1px, positioned
     against its BUTTON. On a single row that landed on the bar's own rule;
     once a tab can sit in row 1 its underline sits partway up the bar. That
     is the conventional wrapped-tab pattern — the indicator marks the
     selected tab wherever that tab happens to sit.

     Only row-gap is touched. The base 600px block already sets the 18px gap
     via the `gap` shorthand, and a longhand after a shorthand in source
     order overrides just that axis, leaving column-gap at 18px. */
  .pdv-tabs-nav{flex-wrap:wrap;overflow-x:visible;row-gap:4px;scrollbar-width:auto}
  .pdv-tabs-nav::-webkit-scrollbar{display:block}
  .pdv-tab-frame{padding:24px 18px}
  .pdv-desc-content{font-size:14.5px}
  /* Admin-authored tables can declare a min-content width wider than a phone.
     `display:block` makes the TABLE its own scroll container, so the panel
     scrolls sideways instead of widening the page. */
  .pdv-desc-content table{display:block;overflow-x:auto;max-width:100%}
  .pdv-how-item{gap:14px;padding:18px 0}
  .pdv-how-num{width:34px;height:34px;border-radius:10px;font-size:13px}
  .pdv-how-text strong{font-size:16.5px}
  .pdv-how-text span{font-size:13.5px}
  .pdv-how-tip{padding:14px 15px;font-size:13px;gap:10px}

  .pdv-reviews-summary{padding:22px 18px;gap:16px;margin-bottom:22px}
  .pdv-rating-score{font-size:48px;letter-spacing:-2px}
  .pdv-rating-stars-big{font-size:17px}
  .pdv-review-card{padding:16px}
  .pdv-review-head{gap:8px}
  /* A 560px inner scroller inside a page that already scrolls is a nested
     scroll trap on touch — let the list run its natural length instead. */
  .pdv-reviews-list{max-height:none;overflow-y:visible;padding-right:0}
  .pdv-write-review-btn{padding:11px 20px;font-size:13.5px}

  .pdv-thumb{width:64px;height:64px;border-radius:10px}
  .pdv-section-head h2{font-size:19px}
  .pdv-review-modal{padding:14px}
  .pdv-review-modal-inner{padding:24px 18px;border-radius:18px}
}

@media(max-width:420px){
  .pdv-title{font-size:20px}
  .pdv-price{font-size:27px}
  .pdv-cat-tag{font-size:10px;padding:4px 12px}
  .pdv-rating-score{font-size:42px;letter-spacing:-1.5px}
  .pdv-tab-frame{padding:20px 15px}
  .pdv-tab-label{font-size:14.5px}
  .pdv-thumb{width:58px;height:58px}
  /* The image nav circles eat a visible slice of a ~290px stage. */
  .pdv-img-nav{width:34px;height:34px;font-size:12px}
  .pdv-img-prev{left:8px}
  .pdv-img-next{right:8px}
  .pdv-zoom-hint{bottom:10px;right:10px;padding:5px 10px;font-size:10.5px}
  .pdv-star-picker i{font-size:23px}
}