.wo-product-page{background:#fff;font-family:'Inter',sans-serif;color:var(--wo-ink)}
.wo-product-page .content-area{width:100%}
.wo-product{margin:0}
.wo-product img{display:block;max-width:100%}
.wo-product a{color:inherit}

/* Shared centered (non-bleed) wrapper for this page's sections — GeneratePress's
   #page container is centered here (unlike the home page's flush-left context),
   so plain margin:auto is correct; see project CSS notes. */
.wo-product__canvas{max-width:1440px;margin:0 auto;padding:0 64px}

/* ---------- hero: full-bleed dark, gallery + summary ----------
   Full-bleed via the classic "left:50%+translateX(-50%)" breakout, which
   re-centers a 100vw box on the true viewport regardless of how the
   ancestor container itself is positioned — agnostic to the centered vs.
   flush-left container question above. */
.wo-product__hero{width:100vw;position:relative;left:50%;transform:translateX(-50%);
  background:var(--wo-ink);color:#fff;overflow:hidden}
.wo-product__hero-inner{max-width:1440px;margin:0 auto;padding:32px 64px 100px}

.wo-product__crumb{color:rgba(255,255,255,.5)!important;margin-bottom:40px;font:500 14px/1.2 'Inter',sans-serif;
  text-transform:uppercase;gap:10px!important;height:auto!important}
.wo-product__crumb .num{color:rgba(255,255,255,.25)}
.wo-product__crumb a{text-decoration:underline;text-underline-offset:3px;color:#fff}
.wo-product__crumb a:hover{opacity:.7}

/* ---------- gallery + summary grid ---------- */
.wo-product__grid{display:flex;gap:80px;align-items:flex-start}

.wo-product__gallery{flex:1 1 55%;min-width:0;display:flex;flex-direction:column;gap:20px}
.wo-product__gallery-main{position:relative;width:100%;aspect-ratio:1/1.18;overflow:hidden;
  background:#000;border-radius:2px}
.wo-product__gallery-main img{width:100%;height:100%;object-fit:cover}
.wo-product__gallery-thumbs{display:flex;gap:12px;flex-wrap:wrap}
.wo-product__gallery-thumbs .thumb{width:76px;height:76px;border-radius:8px;overflow:hidden;
  border:1px solid rgba(255,255,255,.15);background:#000;padding:0;cursor:pointer;opacity:.5;
  transition:opacity .2s ease,border-color .2s ease;flex-shrink:0}
.wo-product__gallery-thumbs .thumb img{width:100%;height:100%;object-fit:cover}
.wo-product__gallery-thumbs .thumb:hover{opacity:.85}
.wo-product__gallery-thumbs .thumb--active{opacity:1;border-color:#fff}

.wo-product__summary{flex:1 1 40%;min-width:0;display:flex;flex-direction:column;gap:28px;
  padding-top:12px}
.wo-product__summary .product_title{font:700 56px/1.1 'Cormorant Garamond',serif;
  color:#fff!important;margin:0}
.wo-product__summary .price{font:500 26px/1.2 'Inter',sans-serif;color:#fff!important;margin:0}
.wo-product__summary .price ins{text-decoration:none}
.wo-product__summary .price del{color:rgba(255,255,255,.4);margin-right:8px}
.wo-product__summary .woocommerce-product-details__short-description{display:flex;
  flex-direction:column;gap:16px}
.wo-product__summary .woocommerce-product-details__short-description p{margin:0}
.wo-product__summary .woocommerce-product-details__short-description p:first-child{
  display:inline-flex;align-self:flex-start;align-items:center;gap:8px;padding:11px 16px;
  border-radius:9999px;background:rgba(255,255,255,.08);font:500 13px/1.1 'Inter',sans-serif;
  text-transform:uppercase;letter-spacing:.03em;color:#fff}
.wo-product__summary .woocommerce-product-details__short-description p:first-child strong{
  font-weight:500;display:inline-flex;align-items:center;gap:8px}
.wo-product__summary .woocommerce-product-details__short-description p:nth-child(2){
  font:500 14px/1.2 'Inter',sans-serif;text-transform:uppercase;letter-spacing:.04em;
  color:rgba(255,255,255,.55)}
.wo-product__summary .woocommerce-product-details__short-description p:nth-child(3){
  font:400 18px/1.6 'Inter',sans-serif;color:#c7c8c7;max-width:560px}

.wo-product__summary form.cart{display:flex;align-items:center;gap:16px;margin:0;flex-wrap:wrap}
.wo-product__summary .quantity{margin:0}
.wo-product__summary .quantity .qty{width:76px;height:56px;border:1px solid rgba(255,255,255,.25);
  border-radius:9999px;text-align:center;font:500 16px/1 'Inter',sans-serif;color:#fff;
  background:transparent}
.wo-product__summary .single_add_to_cart_button{display:inline-flex;align-items:center;
  justify-content:center;padding:18px 32px!important;border-radius:9999px!important;
  font:500 16px/1.1 'Inter',sans-serif!important;text-transform:uppercase;white-space:nowrap;
  cursor:pointer;border:0!important;background:#fff!important;color:var(--wo-ink)!important;
  box-shadow:none!important;text-shadow:none!important;
  transition:opacity .2s ease,transform .2s ease}
.wo-product__summary .single_add_to_cart_button:hover{opacity:.85;transform:translateY(-1px)}
.wo-product__summary .single_add_to_cart_button.disabled{opacity:.4!important;cursor:not-allowed}
.wo-product__summary .stock{margin:0;font:400 14px/1.2 'Inter',sans-serif;color:rgba(255,255,255,.6)}
.wo-product__summary .stock.in-stock::before{content:"";display:inline-block;width:6px;
  height:6px;border-radius:9999px;background:#5cb87a;margin-right:8px}
.wo-product__summary .stock.out-of-stock::before{content:"";display:inline-block;width:6px;
  height:6px;border-radius:9999px;background:#e08080;margin-right:8px}
.wo-product__summary p.woocommerce-variation-availability{margin:0}

/* ---------- composition (notes) ---------- */
.wo-product__notes{background:#fff}
.wo-product__notes .wo-product__canvas{padding:120px 64px}
.wo-product__notes .index-row{color:var(--wo-body)!important}
.wo-product__notes .index-row .num{color:var(--wo-line)}
.wo-product__notes h2{font:700 44px/1.2 'Cormorant Garamond',serif;color:var(--wo-ink);
  margin:16px 0 56px}
.wo-product__notes .notes{display:flex;flex-direction:column;width:100%}
.wo-product__notes .note{display:flex;gap:56px;align-items:flex-start;padding:24px 0;
  border-bottom:1px solid var(--wo-line)}
.wo-product__notes .note:first-child{border-top:1px solid var(--wo-line)}
.wo-product__notes .note__label{width:100px;flex-shrink:0;font:500 24px/1.2 'Inter',sans-serif;
  color:var(--wo-line);text-transform:uppercase}
.wo-product__notes .note__body{display:flex;flex-direction:column;gap:16px;flex:1}
.wo-product__notes .note__body h3{font:600 28px/1.2 'Cormorant Garamond',serif;color:var(--wo-ink);
  margin:0}
.wo-product__notes .note__body p{font:400 18px/1.6 'Inter',sans-serif;color:var(--wo-body);margin:0}

/* ---------- checkout (One Page Checkout, inline) ----------
   Two-column layout matching the original site: billing fields on the
   left, order summary/payment as a boxed card on the right. WooCommerce's
   own form-checkout.php doesn't nest these together (#customer_details,
   #order_review_heading and #order_review are three separate direct
   children of <form>), so CSS Grid with explicit placement is what lets
   the review card span alongside the (taller) billing column instead of
   just stacking underneath it. */
.wo-product__checkout{width:100vw;position:relative;left:50%;transform:translateX(-50%);
  background:#f7f6f4}
.wo-product__checkout .wo-product__canvas{padding:120px 64px;max-width:1320px}
.wo-product__checkout .index-row{color:var(--wo-body)!important}
.wo-product__checkout .index-row .num{color:var(--wo-line)}
.wo-product__checkout h2{font:700 44px/1.2 'Cormorant Garamond',serif;color:var(--wo-ink);
  margin:16px 0 48px}
.wo-product__checkout .woocommerce-notices-wrapper:empty{display:none}

.wo-product__checkout form.checkout{display:grid;grid-template-columns:1fr 1fr;
  column-gap:64px;align-items:start}
.wo-product__checkout form.checkout #customer_details{grid-column:1;grid-row:1 / span 3}
.wo-product__checkout form.checkout #order_review_heading{grid-column:2;grid-row:1;margin:0 0 20px}
.wo-product__checkout form.checkout #order_review{grid-column:2;grid-row:2}
.wo-product__checkout form.checkout .col2-set .col-2:empty{display:none}

/* "Ship to a different address?" + order notes live in .col-2, which WC's
   own CSS floats/flexes next to billing (.col-1) side by side by default —
   stack them full-width underneath instead. */
.wo-product__checkout form.checkout #customer_details.col2-set{display:block}
.wo-product__checkout form.checkout #customer_details .col-1,
.wo-product__checkout form.checkout #customer_details .col-2{width:100%!important;
  float:none!important;margin:0}
.wo-product__checkout form.checkout #customer_details .col-2{margin-top:24px}

/* ---------- story ----------
   Full-bleed dark band. Same breakout technique as .wo-product__hero above. */
.wo-product__story{width:100vw;position:relative;left:50%;transform:translateX(-50%);
  background:var(--wo-ink);color:#fff;overflow:hidden}
.wo-product__story-inner{max-width:1440px;margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:80px;padding:120px 64px}
.wo-product__story-text{display:flex;flex-direction:column;gap:32px;width:577px;flex-shrink:0}
.wo-product__story-text h2{font:700 44px/1.2 'Cormorant Garamond',serif;color:#fff;margin:0}
.wo-product__story-copy{display:flex;flex-direction:column;gap:16px}
.wo-product__story-copy p{font:400 18px/1.6 'Inter',sans-serif;color:#c7c8c7;margin:0}
.wo-product__story-img{position:relative;width:655px;height:745px;overflow:hidden;flex-shrink:0}
.wo-product__story-img img{width:100%;height:100%;object-fit:cover}

/* ===================================================================
   MOBILE (<=767px)
   =================================================================== */
@media (max-width:767px){
  .wo-product__hero-inner{padding:24px 20px 60px}
  .wo-product__crumb{margin-bottom:24px;font-size:12px;gap:8px!important}
  .wo-product__grid{flex-direction:column;gap:32px}
  .wo-product__gallery-main{aspect-ratio:1/1.05}
  .wo-product__gallery-thumbs .thumb{width:60px;height:60px}
  .wo-product__summary{gap:20px;padding-top:0}
  .wo-product__summary .product_title{font-size:32px}
  .wo-product__summary .price{font-size:22px}
  .wo-product__summary .woocommerce-product-details__short-description p:nth-child(3){font-size:16px}
  .wo-product__summary .single_add_to_cart_button{padding:16px 24px!important;font-size:14px}
  .wo-product__summary .quantity .qty{width:64px;height:50px}

  .wo-product__notes .wo-product__canvas{padding:60px 20px}
  .wo-product__notes h2{font-size:30px;margin-bottom:32px}
  .wo-product__notes .note{gap:20px;padding:20px 0}
  .wo-product__notes .note__label{width:auto;font-size:15px}
  .wo-product__notes .note__body h3{font-size:22px}
  .wo-product__notes .note__body p{font-size:16px}

  .wo-product__checkout .wo-product__canvas{padding:60px 20px}
  .wo-product__checkout h2{font-size:30px;margin-bottom:32px}
  .wo-product__checkout form.checkout{display:block}
  .wo-product__checkout form.checkout #order_review_heading{margin:32px 0 20px}

  .wo-product__story-inner{flex-direction:column;gap:40px;padding:60px 20px}
  .wo-product__story-text{width:100%;gap:20px}
  .wo-product__story-text h2{font-size:30px}
  .wo-product__story-copy p{font-size:16px}
  .wo-product__story-img{width:100%;height:auto;aspect-ratio:655/745}
}

/* ===================================================================
   TABLET (768px-1439px)
   =================================================================== */
@media (min-width:768px) and (max-width:1439px){
  .wo-product__hero-inner{padding:28px 48px 80px}
  .wo-product__grid{gap:48px}
  .wo-product__summary .product_title{font-size:44px}

  .wo-product__notes .wo-product__canvas{padding:96px 48px}
  .wo-product__checkout .wo-product__canvas{padding:96px 48px}
  .wo-product__checkout form.checkout{grid-template-columns:1fr 1fr;column-gap:40px}

  .wo-product__story-inner{padding:96px 48px;gap:48px}
  .wo-product__story-text{width:44%}
  .wo-product__story-img{width:52%;height:auto;aspect-ratio:655/745}
}