/* SB PDP layout fix (preview, Oct 21 2026) */
/* text sections share one centered column */
.single-product div.product .sb-story,
.single-product div.product .sb-reviews { width: 100%; max-width: 700px; margin-left: auto; margin-right: auto; }
.single-product div.product .sb-story { margin-top: 56px; }
.single-product div.product .sb-story .sb-actives-head { margin-bottom: 24px; }
/* Details grid: How to Use + Details side by side; a lone block spans and centers */
.single-product div.product .sb-details-wrap > .sb-block:only-child { grid-column: 1 / -1; width: 100%; max-width: 700px; margin: 0 auto; }
.single-product div.product .sb-details-wrap table.shop_attributes { width: 100%; }
/* related + Complete the Ritual rows centered under the page */
.single-product div.product section.related,
.single-product div.product section.upsells { margin-left: auto !important; margin-right: auto !important; }
/* summary: one stock message, no stray SKU/category/brand lines */
.single-product div.product .summary .product_meta { display: none; }
.single-product div.product .summary .sb-local-badge ~ .stock.in-stock { display: none; }
/* leave room for the sticky Add to Bag bar */
.single-product .site-footer-wrapper .footer { padding-bottom: 72px; }
/* phones: related products as one clean row of two (no orphan full-width third card) */
@media (max-width: 600px) {
  .single-product div.product section.related ul.products li.product:nth-child(n+3) { display: none; }
}

/* ==================================================================
   PDP cleanup v3 (Oct 24 2026). Audit + research: audits/2026-10-24/pdp-cleanup/
   ================================================================== */
:root{
  --sb-mocha-ink:#8A5D4B;   /* mocha for TEXT on ivory: 5.2:1 (brand #A47764 is 3.6:1) */
  --sb-label:#75655A;       /* small caps labels: 5.1:1 on ivory */
}

/* 1) gallery: Woo's `div.images{position:relative}` beat our sticky, so the
      leftover top:118px pushed the image 118px below the title. Top-align, NOT sticky:
      div.product is one grid holding every section below, so a sticky gallery rode
      down over The Story/Details (Oct 25 hotfix). */
.single-product.woocommerce div.product div.images.woocommerce-product-gallery{position:relative;top:0;align-self:start}
/* brand eyebrow links to its /brand/ page */
.sb-brand-eyebrow a{color:inherit!important;text-decoration:none;display:inline-block;padding:.7rem 0;margin:-.7rem 0;border-bottom:1px solid transparent;transition:border-color .2s}
.sb-brand-eyebrow a:hover,.sb-brand-eyebrow a:focus-visible{border-bottom-color:currentColor}
.sb-brand-eyebrow a:focus-visible{outline:2px solid var(--sb-mocha-ink);outline-offset:3px}
@media(max-width:820px){.single-product.woocommerce div.product div.images.woocommerce-product-gallery{position:relative;top:0;margin-bottom:0!important}}
/* phones: bring the name + price closer to the first screen */
@media(max-width:600px){.sb-shop-body .site-content .single-product .sb-shop,.single-product .sb-shop{padding-top:1rem!important}.single-product div.product{row-gap:1.4rem!important}}

/* 2) buy box hierarchy */
.single-product div.product .product_title{text-wrap:balance}  /* size unchanged: Charles likes the large titles (Oct 24) */
.sb-h1-brand{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sb-brand-eyebrow,.sb-eyebrow2,.sb-inuse-eyebrow{color:var(--sb-mocha-ink)!important}
.single-product div.product .summary p.price,.single-product div.product .summary .price{color:var(--sb-mocha-ink)!important}
.single-product .woocommerce-product-details__short-description{margin-bottom:1.3rem}
.sb-local-badge{align-items:flex-start!important;line-height:1.5}
.sb-local-badge .sb-dot{margin-top:.5em}
/* Add to Bag: full-width primary, near-black (white on mocha was 3.8:1), qty matched */
.single-product div.product form.cart:not(.variations_form),
.single-product div.product form.cart .woocommerce-variation-add-to-cart{display:flex!important;align-items:stretch;gap:.6rem}
.single-product div.product form.cart:not(.variations_form)::before,.single-product div.product form.cart:not(.variations_form)::after,
.single-product div.product form.cart .woocommerce-variation-add-to-cart::before,.single-product div.product form.cart .woocommerce-variation-add-to-cart::after{display:none}  /* clearfix pseudos became flex items + ate the gap */
.single-product div.product form.cart .quantity{margin:0!important;flex:none}
.single-product div.product form.cart .quantity input.qty{width:62px;height:52px;padding:0 .3rem;box-sizing:border-box;font-size:.95rem;color:var(--sbx-ink)}
.single-product div.product form.cart .single_add_to_cart_button{flex:1;min-height:52px;padding:0 1.5rem!important;margin:0!important;
  background:var(--sbx-ink)!important;color:var(--sbx-ivory)!important;font-size:.76rem!important;letter-spacing:2.5px;border-radius:2px}
.single-product div.product form.cart .single_add_to_cart_button:hover,
.single-product div.product form.cart .single_add_to_cart_button:focus-visible{background:var(--sbx-brown)!important;transform:none}
.single-product .single_add_to_cart_button:focus-visible,.single-product .sb-write-review:focus-visible{outline:2px solid var(--sb-mocha-ink);outline-offset:3px}
.single-product .wcpay-express-checkout-wrapper{margin-top:.2rem!important}
/* every button hover on the PDP: mocha + white failed 4.5:1, use deep brown */
.single-product.woocommerce a.button:hover,.single-product.woocommerce .button:hover,.single-product .sb-sticky-btn:hover{background:var(--sbx-brown)!important}

/* 3) The Actives: name-only cards were tall empty boxes; quieter, shorter.
      auto margins shrank the grid item to its content (214px on iPhone vs a 352px column) */
.single-product div.product .sb-actives{width:100%}
.sb-active-card{padding:1.25rem 1rem}
.sb-active-card h3{font-size:1.15rem}
.sb-active-card p{color:var(--sb-label)}
@media(max-width:600px){
  .sb-actives-grid{gap:.6rem!important}
  .sb-active-card{display:flex;align-items:center;gap:.9rem;text-align:left;padding:.85rem 1.1rem}
  .sb-active-card .sb-active-ic{flex:none;margin:0!important}
  .sb-active-card h3{margin:0!important;font-size:1.1rem}
  .sb-active-card p{margin-left:auto;text-align:right}
}

/* 4) Details table: no zebra, no italics, readable labels, label beside value on phones */
.single-product .sb-details-table table.shop_attributes{border:0;margin:0}
.single-product .sb-details-table table.shop_attributes tr th,
.single-product .sb-details-table table.shop_attributes tr td{background:none!important;border:0;border-bottom:1px solid var(--sbx-warm);font-style:normal;padding:.7rem 0}
.single-product .sb-details-table table.shop_attributes th{color:var(--sb-label);font-size:.68rem;letter-spacing:1.2px;width:38%;padding-right:1rem}
.single-product .sb-details-table table.shop_attributes td p{margin:0;font-style:normal;color:var(--sbx-brown)}
@media(max-width:600px){
  .single-product .sb-details-table table.shop_attributes tr{display:table-row}
  .single-product .sb-details-table table.shop_attributes th,.single-product .sb-details-table table.shop_attributes td{display:table-cell;vertical-align:baseline}
}

/* 5) Reviews (all 0 today): one centered, quiet invitation, secondary button */
.single-product div.product .sb-reviews{text-align:center}
.single-product div.product .sb-reviews .sb-block-title{text-align:center}
.single-product div.product .sb-reviews.sb-reviews-none .sb-block-title{border-bottom:0;padding-bottom:0;margin-bottom:.4rem}
.single-product div.product .sb-reviews #review_form_wrapper,.single-product div.product .sb-reviews ol.commentlist{text-align:left}
.single-product.woocommerce .sb-reviews .sb-write-review{background:transparent!important;color:var(--sbx-ink)!important;border:1px solid var(--sbx-ink)!important}
.single-product.woocommerce .sb-reviews .sb-write-review:hover{background:var(--sbx-ink)!important;color:var(--sbx-ivory)!important}

/* 6) rails: readable prices */
.single-product .related li.product .price,.single-product .upsells li.product .price,.sb-sticky-price{color:var(--sb-mocha-ink)!important}

/* 7) phones: the sticky bag bar is the action; the floating back-to-top sat on top of card buttons */
@media(max-width:820px){body.single-product:has(#sbStickyAtc[aria-hidden="false"]) .back-to-top{display:none!important}}