/* =============================================================================
   STONEBELT — PRODUCT PAGE STYLES
   Goes in: shopkeeper-child/assets/stonebelt-pdp.css
   Loads only on products listed in the SETTINGS block of stonebelt-pdp.php.
   Uses your existing Oswald (headings) + Inter (body) fonts.
   ========================================================================== */

:root{
  --sb-ink:#111318;
  --sb-red:#c8102e;
  --sb-line:#e2e2e6;
  --sb-muted:#6b7280;
  --sb-ok:#1a7f45;
  --sb-warn:#e0a500;
}

.sb-pdp h2, .sb-pdp h3, .sb-pdp h4{
  font-family:"Oswald",Arial,Helvetica,sans-serif;
}

/* ---------------------------------------------------------------------------
   1. HIDDEN SELECTS
   The real <select> must stay in the DOM — WooCommerce's variation JavaScript
   depends on it. So it is visually hidden, never removed.
   ------------------------------------------------------------------------ */
.sb-hidden-attr{
  position:absolute !important;
  width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}
.sb-pdp .reset_variations{ display:none !important; } /* the stray "CLEAR" link */

/* ---------------------------------------------------------------------------
   2. SIZE SWATCHES
   ------------------------------------------------------------------------ */
.sb-swatches{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 4px; }
.sb-swatch{
  min-width:58px; padding:13px 10px;
  border:1.5px solid #cfd0d6; background:#fff; cursor:pointer;
  font-family:"Oswald",Arial,sans-serif; font-size:15px; letter-spacing:.04em;
  line-height:1; transition:border-color .12s, background .12s;
}
.sb-swatch:hover:not(:disabled){ border-color:#8b8d96; }
.sb-swatch.is-active{ border-color:var(--sb-ink); background:var(--sb-ink); color:#fff; }
.sb-swatch--out{
  opacity:.38; cursor:not-allowed; text-decoration:line-through;
  background:repeating-linear-gradient(135deg,#fff,#fff 4px,#f3f3f5 4px,#f3f3f5 8px);
}
.sb-swatch-msg{ font-size:12.5px; margin:4px 0 0; min-height:18px; color:#8a6d00; font-weight:600; }

/* ---------------------------------------------------------------------------
   3. BUY BOX BLOCKS
   ------------------------------------------------------------------------ */
/* Badges now sit inside the price line, so they flow beside it. */
.sb-badges{ display:inline-flex; gap:7px; flex-wrap:wrap; vertical-align:middle; margin-left:12px; }
.sb-pdp p.price{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 0; }
@media (max-width:480px){
  .sb-badges{ margin-left:0; margin-top:8px; width:100%; }
}
.sb-pill{
  background:#111; color:#fff; font-size:10.5px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; padding:4px 9px; border-radius:3px;
}
.sb-pill--good{ background:var(--sb-ok); }

.sb-notice{
  border:1px solid #d8dae0; background:#f7f7f9;
  padding:12px 14px; margin:0 0 16px; font-size:13.5px; line-height:1.5;
}
.sb-notice strong{
  display:block; margin-bottom:4px;
  font-family:"Oswald",Arial,sans-serif; font-size:12.5px;
  text-transform:uppercase; letter-spacing:.07em;
}
.sb-notice a{ color:var(--sb-red); white-space:nowrap; }

.sb-size-trigger{
  background:none; border:0; padding:0; margin:0 0 8px;
  color:var(--sb-red); font-size:13px; font-weight:700; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px;
}

.sb-underbtn{
  list-style:none; margin:12px 0 0; padding:0;
  display:flex; gap:14px; flex-wrap:wrap; font-size:12.5px; color:#3d4149;
}
.sb-underbtn li{ padding-left:18px; position:relative; }
.sb-underbtn li:before{
  content:""; position:absolute; left:0; top:6px; width:10px; height:6px;
  border-left:2px solid var(--sb-ok); border-bottom:2px solid var(--sb-ok);
  transform:rotate(-45deg);
}

/* Trust strip — the rebuilt banner --------------------------------------- */
.sb-trust{ margin:20px 0 0; border:1px solid var(--sb-line); border-radius:5px; overflow:hidden; }
.sb-trust__head{
  background:linear-gradient(100deg,#12141a,#22262f); color:#fff;
  padding:11px 14px; display:flex; align-items:center; gap:10px;
}
.sb-trust__head strong{
  font-family:"Oswald",Arial,sans-serif; font-size:13.5px;
  letter-spacing:.13em; text-transform:uppercase;
}
.sb-trust__head em{
  margin-left:auto; font-style:normal; background:var(--sb-ok); color:#fff;
  font-size:10.5px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; padding:3px 8px; border-radius:3px;
}
.sb-trust__grid{ display:grid; grid-template-columns:repeat(3,1fr); background:var(--sb-line); gap:1px; }
.sb-trust__cell{ background:#fff; padding:13px 12px; text-align:center; }
.sb-trust__cell svg{
  width:22px; height:22px; stroke:var(--sb-red); fill:none;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.sb-trust__cell strong{
  display:block; margin:6px 0 2px;
  font-family:"Oswald",Arial,sans-serif; font-size:11.5px;
  letter-spacing:.06em; text-transform:uppercase;
}
.sb-trust__cell span{ display:block; font-size:11.5px; color:var(--sb-muted); line-height:1.4; }
.sb-trust__foot{
  background:#fafafb; border-top:1px solid var(--sb-line);
  padding:8px 12px; text-align:center; font-size:11.5px; color:var(--sb-muted);
}

/* ---------------------------------------------------------------------------
   4. STACKED CONTENT SECTIONS (replaces the tab strip)
   ------------------------------------------------------------------------ */
.sb-content{ max-width:1180px; margin:0 auto; box-sizing:border-box; padding:0 20px; }
.sb-section{ padding:44px 0; border-top:1px solid var(--sb-line); }
.sb-section:first-child{ border-top:0; }
.sb-section > h2{
  font-size:24px; text-transform:uppercase; letter-spacing:.01em;
  margin:0 0 16px; line-height:1.1;
}
.sb-section--story p{ max-width:70ch; }
.sb-section--story h2{ font-size:24px; text-transform:uppercase; margin:28px 0 12px; }

/* Spec grid --------------------------------------------------------------- */
.sb-specs{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:1px; background:var(--sb-line); border:1px solid var(--sb-line);
}
.sb-spec{ background:#fff; padding:13px 15px; display:flex; gap:14px; align-items:flex-start; }
.sb-spec__k{
  font-family:"Oswald",Arial,sans-serif; text-transform:uppercase;
  font-size:11.5px; letter-spacing:.08em; color:var(--sb-muted);
  min-width:118px; flex:0 0 118px; padding-top:2px;
}
.sb-spec__v{ font-weight:600; font-size:14px; }

/* Fabric weight bars ------------------------------------------------------ */
.sb-gsm{ background:#f7f7f9; border:1px solid var(--sb-line); padding:18px; margin:22px 0 0; }
.sb-gsm h3{ font-size:15px; margin:0 0 4px; text-transform:uppercase; letter-spacing:.05em; }
.sb-gsm__intro{ font-size:12.5px; color:var(--sb-muted); margin:0 0 12px; }
.sb-gsm__row{ display:flex; align-items:center; gap:12px; margin:9px 0; font-size:13px; }
.sb-gsm__name{ width:190px; flex:0 0 190px; color:#3d4149; }
.sb-gsm__bar{ height:19px; background:#d7d8de; position:relative; flex:1; }
.sb-gsm__bar i{ position:absolute; inset:0 auto 0 0; background:#b9bbc3; display:block; }
.sb-gsm__row.is-me .sb-gsm__bar i{ background:var(--sb-red); }
.sb-gsm__row.is-me .sb-gsm__name{ font-weight:800; color:var(--sb-ink); }
.sb-gsm__val{ width:78px; text-align:right; font-weight:700; font-size:12.5px; }

/* FAQ --------------------------------------------------------------------- */
.sb-faq{ border-top:1px solid var(--sb-line); max-width:80ch; }
.sb-faq details{ border-bottom:1px solid var(--sb-line); }
.sb-faq summary{
  padding:15px 2px; cursor:pointer; font-weight:700; font-size:14.5px;
  list-style:none; display:flex; justify-content:space-between; gap:12px;
}
.sb-faq summary::-webkit-details-marker{ display:none; }
.sb-faq summary:after{ content:"+"; color:var(--sb-red); font-size:20px; line-height:1; }
.sb-faq details[open] summary:after{ content:"\2212"; }
.sb-faq__a{ padding:0 2px 16px; font-size:14px; color:#3d4149; max-width:70ch; }

/* ---------------------------------------------------------------------------
   5. MODAL
   ------------------------------------------------------------------------ */
.sb-modal{
  position:fixed; inset:0; background:rgba(10,11,15,.62); z-index:99999;
  display:flex; align-items:center; justify-content:center; padding:18px;
}
.sb-modal[hidden]{ display:none; }
.sb-modal__box{ background:#fff; max-width:840px; width:100%; max-height:88vh; overflow:auto; }
.sb-modal__head{
  position:sticky; top:0; z-index:2; background:#12141a; color:#fff;
  padding:14px 18px; display:flex; align-items:center;
}
.sb-modal__head h3{ margin:0; font-size:17px; text-transform:uppercase; letter-spacing:.04em; }
.sb-modal__head button{
  margin-left:auto; background:none; border:0; color:#fff;
  font-size:26px; line-height:1; cursor:pointer;
}
.sb-modal__body{ padding:18px; }
.sb-modal__body h4{ margin:22px 0 4px; font-size:15px; text-transform:uppercase; letter-spacing:.05em; }
.sb-hint{ font-size:13px; color:var(--sb-muted); margin:0 0 12px; }

.sb-finder{ background:#12141a; color:#fff; padding:16px; margin-bottom:16px; }
.sb-finder strong{
  display:block; margin-bottom:10px; font-family:"Oswald",Arial,sans-serif;
  font-size:14px; text-transform:uppercase; letter-spacing:.08em;
}
.sb-finder__row{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.sb-finder label{ font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; color:#a8acb6; }
.sb-finder input{ display:block; width:110px; margin-top:4px; padding:9px; border:0; font-size:15px; font-weight:600; }
.sb-finder button{
  background:var(--sb-red); color:#fff; border:0; padding:11px 18px; cursor:pointer;
  font-family:"Oswald",Arial,sans-serif; text-transform:uppercase; letter-spacing:.08em; font-size:13px;
}
#sb-out{ margin:12px 0 0; font-size:14px; }
#sb-out b{ font-size:19px; color:#ffd34d; }

.sb-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.sb-table{ width:100%; border-collapse:collapse; font-size:13px; }
.sb-table th,.sb-table td{ border:1px solid var(--sb-line); padding:8px 7px; text-align:center; }
.sb-table thead th{
  background:#12141a; color:#fff; font-family:"Oswald",Arial,sans-serif;
  font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:600;
}
.sb-table tbody tr:nth-child(odd){ background:#fafafb; }
.sb-table td:first-child{ font-weight:800; background:#f0f0f3; }
.sb-table tr.sb-hit td{ background:#fff3d6 !important; box-shadow:inset 0 0 0 2px var(--sb-warn); }

/* Your chart artwork, cropped to the garment illustrations ---------------- */
.sb-diagram{
  position:relative; width:100%; padding-bottom:32.5%;
  overflow:hidden; background:#fff; border:1px solid var(--sb-line);
}
.sb-diagram img{ position:absolute; top:0; left:0; width:100%; transform:translateY(-15%); }

.sb-legend{
  display:grid; grid-template-columns:repeat(4,1fr); gap:6px;
  list-style:none; counter-reset:sb; margin:10px 0 16px; padding:0; font-size:11.5px;
}
.sb-legend li{ counter-increment:sb; }
.sb-legend li:before{ content:counter(sb) " "; font-weight:800; }

.sb-fitnotes{ margin-top:16px; background:#f7f7f9; border:1px solid var(--sb-line); padding:14px; }
.sb-fitnotes strong{ font-family:"Oswald",Arial,sans-serif; font-size:13px; text-transform:uppercase; letter-spacing:.06em; }
.sb-fitnotes ul{ margin:8px 0 0; padding-left:19px; font-size:13.5px; }
.sb-fitnotes li{ margin:5px 0; }

/* ---------------------------------------------------------------------------
   6. STICKY MOBILE ADD TO CART
   ------------------------------------------------------------------------ */
.sb-sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:9998;
  background:#fff; border-top:1px solid #d5d6dc;
  box-shadow:0 -4px 20px rgba(0,0,0,.14);
  padding:9px 12px; display:flex; gap:10px; align-items:center;
}
.sb-sticky[hidden]{ display:none; }
.sb-sticky img{ width:42px; height:50px; object-fit:cover; background:#f2f2f4; }
.sb-sticky__info{ flex:1; min-width:0; }
.sb-sticky__info strong{ display:block; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-sticky__info span, .sb-sticky__info .amount{ font-size:12px; color:var(--sb-muted); }
.sb-sticky button{
  background:var(--sb-red); color:#fff; border:0; padding:13px 20px; cursor:pointer;
  font-family:"Oswald",Arial,sans-serif; text-transform:uppercase; letter-spacing:.08em; font-size:14px;
}

/* ---------------------------------------------------------------------------
   7. MOBILE
   ------------------------------------------------------------------------ */
@media (max-width:767px){

  /* Cap the gallery so title, price and rating land on the first screen.
     Currently the hero image fills the whole viewport and the product name
     doesn't appear until ~1,385px down. */
  .sb-pdp .woocommerce-product-gallery{ max-height:54vh; overflow:hidden; }
  .sb-pdp .woocommerce-product-gallery img{ object-fit:cover; }

  /* Full-width Add to Cart — currently 146px wide on a 430px screen. */
  .sb-pdp .single_add_to_cart_button{ width:100% !important; min-height:52px; }

  .sb-trust__grid{ grid-template-columns:repeat(2,1fr); }
  .sb-legend{ grid-template-columns:repeat(2,1fr); }
  .sb-specs{ grid-template-columns:1fr; }
  .sb-finder input{ width:100%; }
  .sb-finder label{ flex:1; }
  .sb-gsm__name{ width:120px; flex:0 0 120px; font-size:12px; }
  .sb-section{ padding:30px 0; }
  .sb-section > h2{ font-size:20px; }

  body.sb-pdp{ padding-bottom:74px; } /* room for the sticky bar */
}

@media (min-width:768px){
  .sb-sticky{ display:none !important; }
}

/* ---------------------------------------------------------------------------
   8. STORY SECTION — detail shots beside the text
   Falls back to a single column automatically when a product has 3 or fewer
   gallery images, so nothing breaks on simpler products.
   ------------------------------------------------------------------------ */
.sb-story.has-media{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:34px;
  align-items:start;
}
.sb-story__media{ display:grid; gap:12px; }
.sb-story__media img{
  width:100%; height:auto; display:block;
  background:#f2f2f4; border:1px solid var(--sb-line);
}
@media (max-width:900px){
  .sb-story.has-media{ grid-template-columns:1fr; gap:20px; }
  .sb-story__media{ grid-template-columns:repeat(3,1fr); gap:8px; }
}
@media (max-width:767px){
  .sb-content{ padding:0 18px; }
}

/* ---------------------------------------------------------------------------
   8b. IBJJF NOTICE - positive variant
   Shorts are IBJJF compliant, which is a selling point rather than a caveat,
   so that one renders green instead of grey.
   ------------------------------------------------------------------------ */
.sb-notice--good{
  border-color:#bfe3cd;
  background:#f2faf5;
}
.sb-notice--good strong{ color:var(--sb-ok); }
.sb-notice--good a{ color:var(--sb-ok); }


/* ---------------------------------------------------------------------------
   9. SIZE CHART IMAGE
   Each product type has its own chart, so the whole image is shown rather
   than a crop. Replaces the earlier gi-only .sb-diagram crop.
   ------------------------------------------------------------------------ */
.sb-chart{
  border:1px solid var(--sb-line);
  background:#fff;
  margin:12px 0 0;
}
.sb-chart img{
  display:block;
  width:100%;
  height:auto;
}

/* ---------------------------------------------------------------------------
   12. HIDE SINGLE-OPTION ATTRIBUTE ROWS ENTIRELY
   Shopkeeper renders variations as a table: the label sits in a <th> and the
   dropdown in the adjacent <td>. Hiding only the dropdown left an orphaned
   "COLOR" label with nothing under it. This hides the whole row - but only
   when it has no swatches, so the Size row is untouched.
   ------------------------------------------------------------------------ */
.sb-pdp table.variations tr:has(.sb-hidden-attr):not(:has(.sb-swatches)){
  display:none;
}

/* ---------------------------------------------------------------------------
   13. IMAGES INSIDE THE PRODUCT DESCRIPTION
   The sizing chart is deliberately left in the description as well as the
   modal - plenty of people scroll straight past a button and would otherwise
   find no sizing at all. Constraining the width keeps it present without it
   dominating the section.
   ------------------------------------------------------------------------ */
.sb-story__text img{
  /* Cap the size, never force an upscale. A small source image stays small
     and sharp rather than being stretched into a blurry one. Insert the
     chart at Full size in the editor to get the full 520px. */
  max-width:520px;
  width:auto;
  height:auto;
  display:block;
  border:1px solid var(--sb-line);
  margin:14px 0;
}

/* WordPress wraps captioned images in a fixed-width box. Let it breathe. */
.sb-story__text .wp-caption{
  width:auto !important;
  max-width:520px;
}
.sb-story__text .wp-caption-text{
  font-size:12px;
  color:var(--sb-muted);
  margin-top:6px;
}

/* Make the Size guide button harder to scroll past. */
.sb-size-trigger{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 14px;
  border:1.5px solid var(--sb-red);
  border-radius:3px;
  text-decoration:none;
}
.sb-size-trigger:before{ content:"\1F4CF"; font-size:14px; }
.sb-size-trigger:hover{ background:var(--sb-red); color:#fff; }

@media (max-width:767px){
  .sb-story__text img{ max-width:100%; }
}