/* ==========================================================================
   Single product page (woocommerce/single-product.php)
   Namespace: .psv-* — not shared with any other template, but every value
   below pulls from the theme's existing tokens (global.css :root) so this
   page reads as part of the same site rather than a bolted-on skin.
   ========================================================================== */

/* Local aliases used by the plugin-table overrides further down. Kept as
   their own custom properties (rather than inlining var(--r) etc. directly)
   so a future re-skin of just the plugin tables doesn't require touching
   every declaration individually. */
.psv-wrap{
  --psv-radius: var(--r);
  --psv-border: var(--line);
  --psv-accent: var(--green-d);
}

/* ---------- breadcrumb bar ---------- */
.psv-bc-bar{border-bottom:1px solid var(--line-2);background:#fff}
.psv-bc-inner{max-width:var(--w);margin:0 auto;padding:11px var(--gut);
  font-size:var(--t-sm);color:var(--slate)}
.psv-bc-inner a{color:var(--slate);text-decoration:none}
.psv-bc-inner a:hover{color:var(--ink);text-decoration:underline}
.psv-bc-sep{color:var(--mute);margin:0 2px}
.psv-bc-current{color:var(--ink);font-weight:600}

/* ---------- product area shell ---------- */
.psv-product-container{max-width:var(--w);margin:0 auto;padding:var(--sp7) var(--gut) var(--sp8)}
.psv-product-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--sp8);align-items:start}

/* ---------- LEFT: image column ---------- */
.psv-main-img-box{position:relative;aspect-ratio:1;background:var(--cream);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  display:flex;align-items:center;justify-content:center;cursor:zoom-in}
.psv-main-img-box img{width:100%;height:100%;object-fit:cover;}
.psv-sale-label{position:absolute;top:14px;left:14px;z-index:2;
  background:var(--action);color:#fff;font-size:var(--t-xs);font-weight:700;
  letter-spacing:.02em;padding:5px 12px;border-radius:var(--r-full)}

.psv-gallery-strip{display:flex;gap:10px;overflow-x:auto;margin-top:var(--sp3);padding-bottom:2px}
.psv-gthumb{flex-shrink:0;width:72px;height:72px;border:1.5px solid var(--line);
  border-radius:var(--r-sm);overflow:hidden;cursor:pointer;background:var(--cream);
  transition:border-color .15s}
.psv-gthumb img{width:100%;height:100%;object-fit:contain}
.psv-gthumb:hover{border-color:var(--slate)}
.psv-gthumb.active{border-color:var(--ink);border-width:2px}

.psv-formats{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--sp5)}
.psv-fmt{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-xs);font-weight:600;
  color:var(--slate);background:var(--cream);border:1px solid var(--line-2);
  border-radius:var(--r-sm);padding:7px 11px}
.psv-fmt svg{width:14px;height:14px;flex-shrink:0;color:var(--mute)}

.psv-filetype-row{display:flex;align-items:center;gap:8px;margin-top:var(--sp4);
  padding-top:var(--sp4);border-top:1px dashed var(--line);font-size:var(--t-sm)}
.psv-filetype-row svg{width:16px;height:16px;flex-shrink:0;color:var(--mute)}
.psv-filetype-label{font-weight:600;color:var(--ink)}
.psv-filetype-sep{color:var(--mute)}
.psv-filetype-value{color:var(--slate)}

.psv-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp3);
  margin-top:var(--sp5);padding-top:var(--sp5);border-top:1px solid var(--line-2)}
.psv-trust-item{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:6px;font-size:var(--t-xs);font-weight:600;color:var(--slate);line-height:1.35}
.psv-trust-item svg{width:22px;height:22px;color:var(--action)}

/* ---------- RIGHT: info column ---------- */
.psv-cat-link{display:inline-block;font-size:var(--t-xs);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--action);text-decoration:none;margin-bottom:var(--sp2)}
.psv-cat-link:hover{text-decoration:underline}

.psv-product-title{font-family:var(--f-display);font-size:var(--h1);line-height:1.15;
  letter-spacing:-.02em;color:var(--ink);margin:4px 0 var(--sp3)}

.psv-rating-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:var(--sp4)}
.psv-stars{display:inline-flex;gap:2px}
.psv-star{width:15px;height:15px;color:var(--line)}
.psv-star.filled{color:#D99A2B;fill:currentColor}
.psv-rating-num{font-size:var(--t-sm);font-weight:600;color:var(--ink)}
.psv-rating-link{font-size:var(--t-sm);color:var(--slate);text-decoration:underline;cursor:pointer}
.psv-rating-link:hover{color:var(--ink)}
.psv-stock{margin-left:auto;font-size:var(--t-xs);font-weight:600;padding:4px 11px;
  border-radius:var(--r-full);border:1px solid}
.psv-stock.instock{color:var(--green-d);background:var(--mint);border-color:#B9D8CE}
.psv-stock.outofstock{color:#96181F;background:var(--coral-tint);border-color:#F6C9CC}

.psv-hr{height:1px;background:var(--line-2);border:none;margin:var(--sp4) 0}

.psv-price-row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;}
.psv-price-now{font-family:var(--f-display);font-weight:700;font-size:1.85rem;color:var(--ink)}
.psv-price-now .woocommerce-Price-amount{font-family:inherit;font-weight:inherit}
.psv-price-was{font-size:var(--t-md);color:var(--mute);text-decoration:line-through}
.psv-save-pill{background:var(--coral-tint);color:#96181F;border:1px solid #F6C9CC;
  border-radius:var(--r-full);padding:4px 11px;font-size:var(--t-xs);font-weight:700}

.awdpOfferMsg div {
  font-size: 18px !important;
  font-weight: bold;
  padding: 0 !important;
}

.psv-short-desc{color:var(--slate);font-size:var(--t-md);line-height:1.65;margin-bottom:var(--sp5)}
.psv-short-desc p{margin-bottom:8px}
.psv-short-desc p:last-child{margin-bottom:0}

/* Acowebs / any before_add_to_cart_button plugin markup — scoped reset so
   third-party tables inherit the theme's type and spacing instead of
   their own plugin defaults. */
.psv-acowebs-pricing{margin-bottom:var(--sp5)}
.psv-acowebs-pricing table {
    width: 100%;
    border-collapse: collapse;
    border-radius: var(--psv-radius);
    overflow: hidden;
    font-size: 13px;
    border: 1px solid var(--psv-border);
}
.psv-acowebs-pricing th,
.psv-acowebs-pricing td{padding:9px 12px;border:1px solid var(--line-2);text-align:left}
.psv-acowebs-pricing thead th{background:var(--cream);font-weight:600;color:var(--ink)}
table.wdp_table {
    border-top-style: solid;
    border-top-width: 1px !important;
    border-top-color: inherit;
    border-right-style: solid;
    border-right-width: 1px !important;
    border-right-color: inherit;
    border-collapse: collapse;
    margin-bottom: 0px;
}
.psv-acowebs-pricing thead tr {
    background: #002c3f;
    color: #fff;
}
.psv-acowebs-pricing tbody td {
    padding: 9px 14px;
    color: #000;
}
.psv-acowebs-pricing tbody td:last-child {
    color: var(--psv-accent);
    font-weight: 700;
}

.psv-atc-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  font-family:var(--f-body);font-weight:600;font-size:var(--t-base);color:#fff;
  background:var(--action);border:1.5px solid var(--action);border-radius:var(--r-full);
  padding:15px 24px;min-height:52px;cursor:pointer;transition:background .15s,border-color .15s}
.psv-atc-btn:hover{background:var(--action-h);border-color:var(--action-h)}
.psv-atc-btn svg{width:19px;height:19px;flex-shrink:0}
.psv-atc-btn.loading{opacity:.65;cursor:wait;pointer-events:none}

/* "Buy More, Save More" — reuses the site's .panel/.dl visual language
   (same pattern as the "What you get" quick-panel) instead of a plain
   tinted box, per feedback. The plugin's own table still renders inside
   .panel__body; .psv-qty-box only supplies the surrounding chrome + a
   savings-column accent so third-party markup reads as part of the page. */
.psv-qty-box{margin-top:var(--sp5)}
.psv-qty-box .panel__label{color:var(--action)}
.psv-qty-box table{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
.psv-qty-box th,.psv-qty-box td{padding:10px 2px;border-bottom:1px solid var(--line-2);
  text-align:left;background:none;border-left:none;border-right:none;border-top:none}
.psv-qty-box tr:last-child th,.psv-qty-box tr:last-child td{border-bottom:none}
.psv-qty-box thead th{font-size:var(--t-xs);font-weight:600;color:var(--mute);
  text-transform:uppercase;letter-spacing:.04em}
.psv-qty-box tbody td:first-child,
.psv-qty-box tbody th:first-child{color:var(--slate)}
.psv-qty-box tbody td:last-child{color:var(--psv-accent);font-weight:700}

.psv-meta{margin-top:var(--sp6);padding-top:var(--sp5);border-top:1px solid var(--line-2);
  display:grid;gap:10px}
.psv-meta-row{display:grid;grid-template-columns:90px 1fr;gap:var(--sp4);font-size:var(--t-sm)}
.psv-meta-label{color:var(--mute);font-weight:600;text-transform:uppercase;
  letter-spacing:.04em;font-size:var(--t-xs);padding-top:2px}
.psv-meta-value{color:var(--ink)}
.psv-meta-value a{color:var(--action);text-decoration:none}
.psv-meta-value a:hover{text-decoration:underline}
.psv-tag-chips{display:flex;flex-wrap:wrap;gap:6px}
.psv-tag-chip{font-size:var(--t-xs);font-weight:500;color:var(--slate);background:#fff;
  border:1px solid var(--line);border-radius:var(--r-full);padding:4px 11px;text-decoration:none}
.psv-tag-chip:hover{border-color:var(--ink);color:var(--ink)}

/* ==========================================================================
   Below-the-fold: sticky TOC + sectioned content
   Same shape as .docs/.dsec on the FAQ page, but this static prototype used
   .detail/.sec-anchor for the product page — kept as-is rather than
   renamed, so a future edit matching against the reference HTML still
   lines up class-for-class. global.js's scrollspy already targets any
   [data-toc] element generically, so it works here with zero JS changes.
   ========================================================================== */
.psv-below-wrap{max-width:var(--w);margin:0 auto;padding:var(--sp8) var(--gut) var(--sp9)}

.detail{display:grid;grid-template-columns:220px minmax(0,1fr);gap:var(--sp8);align-items:start}
.detail__main{min-width:0}

.sec-anchor{padding-top:var(--sp7);margin-top:var(--sp7);border-top:1px solid var(--line-2)}
.sec-anchor:first-child{padding-top:0;margin-top:0;border-top:none}
.sec-anchor__t{font-family:var(--f-display);font-size:var(--h2);color:var(--ink);margin-bottom:var(--sp4)}

/* ---------- Overview: product description content ----------
   Scoped to .psv-overview-prose rather than editing the shared .prose class
   directly — .prose is also used on page.php, front-page.php, and the shop
   About block, and this needs its own larger body-text size + real h2/h3
   hierarchy for long-form AI-generated product copy (headings, sub-headings,
   multiple paragraphs) without changing how those other, shorter blocks read. */
.psv-overview-prose{font-size:1rem;line-height:1.75;color:var(--slate);max-width:72ch}
.psv-overview-prose > *:first-child{margin-top:0}
.psv-overview-prose > *:last-child{margin-bottom:0}

.psv-overview-prose p{margin-bottom:var(--sp4)}

.psv-overview-prose h2{font-family:var(--f-display);font-weight:700;font-size:1.5rem;
  line-height:1.3;color:var(--ink);letter-spacing:-.01em;
  margin:var(--sp7) 0 var(--sp3);padding-top:var(--sp6);border-top:1px solid var(--line-2)}
.psv-overview-prose h2:first-of-type{margin-top:var(--sp5);padding-top:var(--sp5)}

.psv-overview-prose h3{font-family:var(--f-display);font-weight:600;font-size:1.125rem;
  line-height:1.4;color:var(--ink);margin:var(--sp6) 0 10px}

.psv-overview-prose strong{color:var(--ink);font-weight:600}
.psv-overview-prose em{color:var(--ink)}

.psv-overview-prose a{color:var(--action);font-weight:500;text-decoration:underline;
  text-underline-offset:2px;text-decoration-thickness:1px}
.psv-overview-prose a:hover{color:var(--action-h)}

.psv-overview-prose ul,.psv-overview-prose ol{margin:var(--sp2) 0 var(--sp4);
  padding-left:22px;display:grid;gap:8px}
.psv-overview-prose li{font-size:1rem;color:var(--slate)}
.psv-overview-prose li::marker{color:var(--action)}

@media (max-width:640px){
  .psv-overview-prose h2{font-size:1.3rem}
  .psv-overview-prose h3{font-size:1.05rem}
}

/* ---------- reviews ----------
   Restyles WooCommerce's own review output (via comments_template(), which
   WooCommerce transparently redirects to its plugin template on product
   pages) to read like the reference design's .rev cards — name + verified
   badge + date on one line, stars, then body, no avatar. Deliberately NOT
   reimplementing the comment loop/form ourselves: that would mean
   duplicating WooCommerce's nonce handling, rating-save logic, and
   moderation flow, which is easy to get subtly wrong. Targeting their real
   class names gets the same visual result without that risk. */
.psv-review-summary-box{display:flex;align-items:center;gap:var(--sp5);padding:var(--sp5);
  background:var(--cream);border:1px solid var(--line);border-radius:var(--r);margin-bottom:var(--sp6)}
.psv-review-big{font-family:var(--f-display);font-weight:700;font-size:2.4rem;
  color:var(--ink);line-height:1}
.psv-review-sub{font-size:var(--t-sm);color:var(--slate);margin-top:4px}

#psv-reviews .commentlist{list-style:none;display:grid;gap:0;margin:0;padding:0}
#psv-reviews .comment{padding:var(--sp5) 0;border-top:1px solid var(--line-2)}
#psv-reviews .comment:first-child{border-top:none;padding-top:0}
#psv-reviews .avatar{display:none}
#psv-reviews .comment_container{display:block}
#psv-reviews p.meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
#psv-reviews .woocommerce-review__author{font-weight:600;color:var(--ink);font-size:var(--t-md)}
#psv-reviews .woocommerce-review__dash{display:none}
#psv-reviews .woocommerce-review__published-date{font-size:var(--t-sm);color:var(--mute);
  margin-left:auto}
#psv-reviews .woocommerce-review__verified{order:2;font-style:normal;font-size:var(--t-xs);
  font-weight:600;color:var(--green-d);background:var(--mint);border:1px solid #B9D8CE;
  border-radius:var(--r-full);padding:3px 10px}
#psv-reviews .star-rating{color:#D99A2B;font-size:var(--t-sm);margin:0 0 8px}
#psv-reviews .description p{color:var(--slate);font-size:var(--t-md);line-height:1.65;max-width:70ch}

#psv-reviews #respond{margin-top:var(--sp6);padding-top:var(--sp6);border-top:1px solid var(--line-2)}
#psv-reviews #respond input:not([type="submit"]),
#psv-reviews #respond textarea{width:100%;font:inherit;font-size:var(--t-md);color:var(--ink);
  background:#fff;border:1.5px solid var(--line);border-radius:var(--r-sm);
  padding:12px 14px;min-height:46px;margin-bottom:var(--sp3)}
#psv-reviews #respond textarea{min-height:120px;resize:vertical}
#psv-reviews #respond .form-submit input{background:var(--action);color:#fff;border:1.5px solid var(--action);
  border-radius:var(--r-full);padding:12px 24px;font-weight:600;cursor:pointer;min-height:46px}
#psv-reviews #respond .form-submit input:hover{background:var(--action-h)}

/* ---------- related products ---------- */
.psv-related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp5)}
.psv-rel-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;text-decoration:none;transition:border-color .15s,transform .15s}
.psv-rel-card:hover{border-color:var(--ink);transform:translateY(-2px)}
.psv-rel-card img{width:100%;aspect-ratio:1;object-fit:contain;background:var(--cream);
  padding:12%;border-bottom:1px solid var(--line-2)}
.psv-rel-card-body{padding:var(--sp4);display:flex;flex-direction:column;gap:6px;flex:1}
.psv-rel-title{font-size:var(--t-md);font-weight:600;color:var(--ink);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.psv-rel-price{font-family:var(--f-display);font-weight:700;font-size:var(--t-base);
  color:var(--ink);margin-top:auto}
.psv-rel-price del{color:var(--mute);font-weight:400;text-decoration:line-through;margin-right:6px}
.psv-rel-price ins{text-decoration:none}

/* ---------- lightbox ---------- */
.psv-lb{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  background:rgba(6,41,58,.92);opacity:0;visibility:hidden;transition:opacity .18s,visibility .18s}
.psv-lb.open{opacity:1;visibility:visible}
.psv-lb img{max-width:90vw;max-height:85vh;object-fit:contain;border-radius:var(--r)}
.psv-lb-close{position:absolute;top:20px;right:24px;width:44px;height:44px;display:flex;
  align-items:center;justify-content:center;background:none;border:none;color:#fff;
  font-size:2rem;line-height:1;cursor:pointer;border-radius:var(--r-full)}
.psv-lb-close:hover{background:rgba(255,255,255,.14)}

/* ---------- toast ---------- */
.psv-toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);z-index:400;
  background:var(--ink);color:#fff;padding:14px 24px;border-radius:var(--r-full);
  font-size:var(--t-md);font-weight:600;opacity:0;pointer-events:none;
  box-shadow:0 18px 36px -14px rgba(6,41,58,.4);transition:opacity .2s,transform .2s}
.psv-toast.show{opacity:1;transform:translate(-50%,0)}

.woocommerce .star-rating span{
  color: #D99A2B;
  fill: currentColor;
}
h2.woocommerce-Reviews-title {
    margin-bottom: var(--sp4);
}
.prose.psv-overview-prose h4 {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.3;
    color: var(--ink);
    letter-spacing: -.01em;
    margin: var(--sp5) 0 var(--sp3);
    padding-top: var(--sp5);
    border-top: 1px solid var(--line-2);
}
/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:960px){
  .psv-product-grid{grid-template-columns:1fr;gap:var(--sp6)}
  .psv-product-container{padding:var(--sp5) var(--gut) var(--sp6)}
  .psv-trust{grid-template-columns:1fr 1fr 1fr;gap:var(--sp2)}
  .detail{grid-template-columns:1fr;gap:0}
  .detail .toc{display:none}
  .psv-related-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
  .psv-product-title{font-size:1.5rem}
  .psv-price-now{font-size:1.5rem}
  .psv-trust-item span{font-size:.7rem}
  .psv-meta-row{grid-template-columns:1fr;gap:2px}
  .psv-review-summary-box{flex-direction:column;text-align:center}
  .rev__top time{margin-left:0}
  .psv-related-grid{grid-template-columns:repeat(2,1fr)}
  section#howto .steps{grid-template-columns: repeat(1, 1fr);}
  section#howto .step {
      padding: var(--sp3) 0px;
  }
  section#formats .panel caption {
    width: 100%;
    display: inline-block;
  }
}