/* SUPERNOVA — WooCommerce skin
   Extends main.css. Uses the same tokens (--black, --paper, --dim, --faint,
   --hair, --ease, --edge, --maxw) and never redefines them.
   Woo's defaults are catalogue-shop defaults: rounded pills, #a46497 purple,
   grey button fills. All of it is overridden here rather than fought with. */

/* ============ shell ============ */
.sn-woo{padding:calc(clamp(120px,16vh,220px) + 60px) 0 clamp(120px,16vh,220px);}
.sn-woo .wrap{max-width:var(--maxw);}
.woocommerce-page main#main,.woocommerce main#main{background:var(--black);}

/* Woo page titles adopt the theme's light display weight */
.woocommerce-products-header__title,
.sn-woo h1.entry-title{font-weight:300; font-size:clamp(30px,4vw,58px); line-height:1.06; letter-spacing:-0.025em; margin-bottom:clamp(40px,6vh,72px);}

/* ============ buttons — the approved .cta treatment ============ */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order,
.sn-cta{
  display:inline-block; font-family:"Oswald",sans-serif; font-weight:400;
  font-size:12px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--fg); background:none; border:1px solid rgba(255,255,255,0.42);
  border-radius:0; padding:20px 54px; line-height:1; text-shadow:none;
  cursor:pointer; -webkit-appearance:none; appearance:none;
  transition:background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #place_order:hover,
.sn-cta:hover{background:var(--fg); color:var(--black); border-color:var(--fg);}

.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button.disabled,
.woocommerce input.button:disabled{opacity:.34; cursor:not-allowed; background:none; color:var(--fg);}
.woocommerce a.button.disabled:hover,
.woocommerce button.button:disabled:hover{background:none; color:var(--fg);}

/* the single add-to-cart ("Reserve") carries more weight than a generic button */
.woocommerce div.product form.cart button.single_add_to_cart_button{
  width:100%; max-width:420px; padding:24px 54px; letter-spacing:0.26em;
}

/* ============ forms — hairline underline, never a filled box ============ */
.woocommerce form .form-row{padding:0; margin:0 0 30px;}
.woocommerce form .form-row label,
.woocommerce-page form .form-row label,
.woocommerce table.shop_table label{
  display:block; font-family:"Oswald",sans-serif; font-size:10px;
  letter-spacing:0.2em; text-transform:uppercase; color:var(--faint);
  margin-bottom:10px; font-weight:400;
}
.woocommerce form .form-row label.checkbox,
.woocommerce form .form-row .woocommerce-form__label-for-checkbox{
  display:flex; align-items:flex-start; gap:12px; text-transform:none;
  font-family:inherit; font-size:13px; letter-spacing:0; color:var(--dim);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single,
.woocommerce table.cart td.actions .coupon .input-text,
.sn-woo input[type="text"],
.sn-woo input[type="email"],
.sn-woo input[type="tel"],
.sn-woo textarea{
  width:100%; background:transparent; color:var(--fg);
  border:none; border-bottom:1px solid rgba(255,255,255,0.18);
  border-radius:0; padding:12px 0; box-shadow:none; outline:none;
  font-family:inherit; font-size:15px; line-height:1.5;
  transition:border-color .4s var(--ease);
}
.woocommerce form .form-row textarea{min-height:110px; resize:vertical;}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.sn-woo input:focus,.sn-woo textarea:focus{border-bottom-color:var(--fg);}
.woocommerce form .form-row input.input-text::placeholder,
.woocommerce form .form-row textarea::placeholder{color:var(--faint);}

/* Woo's validation states default to red/green fills */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select{border-bottom-color:#B4675A;}
.woocommerce form .form-row.woocommerce-validated input.input-text{border-bottom-color:rgba(255,255,255,0.30);}
.woocommerce form .form-row .required{color:var(--faint); text-decoration:none;}

/* select2 (country/state) */
.woocommerce .select2-container .select2-selection--single{height:auto; padding:12px 0;}
.woocommerce .select2-container .select2-selection--single .select2-selection__rendered{
  color:var(--fg); padding:0; line-height:1.5;
}
.woocommerce .select2-container .select2-selection--single .select2-selection__arrow{top:50%; transform:translateY(-50%); right:0;}

/*
 * The open list. Select2 appends it to <body>, OUTSIDE .woocommerce, so none
 * of the scoped rules above reach it. WooCommerce core paints it with
 * `.select2-container .select2-dropdown` (0,2,0), which silently beat our old
 * bare `.select2-dropdown` (0,1,0): the panel stayed white while our white
 * text still applied — 249 invisible countries. Two fixes, belt and braces:
 * feed Woo's own form variables so its rule paints dark by itself, and outrank
 * it with body-level selectors.
 */
:root{
  --wc-form-color-background:var(--panel);
  --wc-form-color-text:var(--fg);
  --wc-form-border-color:var(--hair);
}
body .select2-container .select2-dropdown{
  background:var(--panel); color:var(--fg);
  border:1px solid rgba(255,255,255,0.14); border-radius:0;
  box-shadow:0 24px 60px rgba(0,0,0,0.55);
  overflow:hidden;
}
body .select2-container--open .select2-dropdown--below{border-top:1px solid rgba(255,255,255,0.14); margin-top:6px;}
body .select2-container--open .select2-dropdown--above{margin-top:-6px;}

/* search box — an underline, like every other field on the form */
body .select2-container .select2-search--dropdown{padding:14px 18px 8px;}
body .select2-container .select2-search--dropdown .select2-search__field{
  background:transparent; color:var(--fg);
  border:none; border-bottom:1px solid rgba(255,255,255,0.22); border-radius:0;
  padding:10px 0; font-family:inherit; font-size:15px; outline:none;
  transition:border-color .4s var(--ease);
}
body .select2-container .select2-search--dropdown .select2-search__field:focus{border-bottom-color:var(--fg);}
body .select2-container .select2-search--dropdown .select2-search__field::placeholder{color:var(--faint); opacity:1;}

/* the list */
body .select2-container .select2-results > .select2-results__options{
  max-height:min(320px, 45vh); padding:6px 0 10px;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.22) transparent;
}
body .select2-container .select2-results__options::-webkit-scrollbar{width:6px;}
body .select2-container .select2-results__options::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.22);}
body .select2-container .select2-results__option{
  color:var(--dim); background:transparent;
  padding:11px 18px; font-size:14px; line-height:1.4;
  transition:background-color .2s var(--ease), color .2s var(--ease);
}
/* keyboard / hover highlight */
body .select2-container .select2-results__option--highlighted,
body .select2-container--default .select2-results__option--highlighted[aria-selected],
body .select2-container--default .select2-results__option--highlighted[data-selected]{
  background:rgba(255,255,255,0.07); color:var(--fg);
}
/*
 * The current country — a fine blue rule, per the Charte (blue for details
 * only). ⚠ Not [aria-selected]: WooCommerce's selectWoo fork repurposes
 * aria-selected for the HIGHLIGHTED row (for screen readers) and marks the
 * chosen one with data-selected instead.
 */
body .select2-container .select2-results__option--selected,
body .select2-container .select2-results__option[data-selected="true"]{
  background:transparent; color:var(--fg);
  box-shadow:inset 2px 0 0 #00a8e2;
}
/* selectWoo focuses the row itself (a11y); keep a ring, but a hairline one */
body .select2-container .select2-results__option:focus,
body .select2-container .select2-results__option:focus-visible{outline:1px solid rgba(255,255,255,0.28); outline-offset:-1px;}
body .select2-container .select2-results__message{color:var(--faint); padding:14px 18px;}

/* the closed field's caret, drawn to match the thin hairline style */
.woocommerce .select2-container .select2-selection--single .select2-selection__arrow b{
  border:none; width:8px; height:8px; margin:-6px 0 0 -8px;
  border-right:1px solid var(--dim); border-bottom:1px solid var(--dim);
  transform:rotate(45deg); transition:transform .3s var(--ease);
}
.woocommerce .select2-container--open .select2-selection--single .select2-selection__arrow b{transform:rotate(225deg); margin-top:-2px;}
.woocommerce .select2-container--focus .select2-selection--single,
.woocommerce .select2-container--open .select2-selection--single{border-bottom-color:var(--fg);}

/* quantity spinner */
.woocommerce .quantity .qty{
  width:88px; background:transparent; color:var(--fg);
  border:1px solid rgba(255,255,255,0.20); border-radius:0;
  padding:16px 10px; text-align:center; font-family:"Space Mono",monospace; font-size:14px;
}

/* ============ delivery estimate ============ */
.sn-estimate{
  display:flex; flex-direction:column; gap:6px;
  margin:34px 0 0; padding:20px 0 0;
  border-top:1px solid var(--hair);
  font-size:12.5px; letter-spacing:0.03em;
}
.sn-estimate__line{color:var(--dim);}
.sn-estimate__note{color:var(--faint); font-size:11.5px;}
.sn-estimate--cart,.sn-estimate--checkout{margin:0 0 28px; padding:20px 0; border-bottom:1px solid var(--hair);}
.sn-estimate--thankyou{margin:0 0 44px;}

/* ============ prices, VAT and duties ============
   Legal-register copy: it must be READABLE (never below 11.5px, per the
   responsive audit) but must not compete with the price. Quiet colour and
   generous leading do that work instead of small type. */
.sn-tax{
  margin:0 0 30px; padding:0 0 26px;
  border-bottom:1px solid var(--hair);
}
.sn-tax__label{
  display:block; margin:0 0 12px;
  font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--faint);
}
.sn-tax p{
  margin:0 0 10px;
  font-size:12px; line-height:1.65; letter-spacing:0.01em;
  color:var(--dim);
}
.sn-tax p:last-child{margin-bottom:0; color:var(--faint);}

/* =======================================================================
   SINGLE PRODUCT
   Photography sticky on the left, the summary scrolling on the right.
   The image is the argument, so it takes the larger share and is allowed
   to stay in view while the reader works down the summary.
   ==================================================================== */
.sn-product{
  display:grid; grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);
  gap:clamp(40px,6vw,120px); align-items:start;
}
@media (max-width:1000px){.sn-product{grid-template-columns:1fr; gap:56px;}}

/* ---- media column ---- */
.sn-product__media{
  position:sticky; top:104px;
  /* The held column fills the viewport rather than being only as tall as the
     photograph. Two reasons: a sticky element TALLER than the screen scrolls
     its own overflow away (the watch would drift off the top while "stuck"),
     and one that is much SHORTER leaves the photograph sitting high with dead
     space beneath, which read as "the sticky is broken" even though it was
     holding correctly. */
  height:calc(100vh - 128px);
  display:flex; flex-direction:column; justify-content:center; gap:18px;
}
.sn-product__media .sn-hero{min-height:0; flex:1 1 auto; display:flex;}
.sn-product__media .sn-hero img{width:100%; height:100%; object-fit:contain;}
@media (max-width:1000px){
  .sn-product__media{position:static; height:auto; display:block;}
  .sn-product__media .sn-hero img{height:auto; object-fit:cover;}
}

.sn-hero{
  position:relative; margin:0; overflow:hidden;
  background:linear-gradient(170deg,#131210 0%,var(--black) 62%);
  border:1px solid var(--hair);
}
/* a very soft light pool behind the object — the clair-obscur brief */
.sn-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse 62% 56% at 50% 42%, rgba(255,255,255,0.055), transparent 68%);
}
.sn-hero-img{
  position:relative; z-index:1; width:100%; height:auto;
  aspect-ratio:1/1; object-fit:contain;
  /* configurator.js cross-fades this on found_variation */
  opacity:1; transition:opacity .22s var(--ease);
}

/* thumbs: small, square, deliberately quiet until chosen */
.sn-thumbs{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px;}
.sn-thumb{
  width:76px; height:76px; padding:0; cursor:pointer; overflow:hidden;
  background:var(--panel); border:1px solid var(--hair); border-radius:0;
  -webkit-appearance:none; appearance:none;
  transition:border-color .4s var(--ease), opacity .4s var(--ease);
  opacity:.5;
}
.sn-thumb img{width:100%; height:100%; object-fit:contain;}
.sn-thumb:hover{opacity:.85;}
.sn-thumb.is-active{opacity:1; border-color:rgba(255,255,255,0.34);}
.sn-thumb:focus-visible{outline:1px solid var(--blue); outline-offset:2px;}

/* ---- summary column ---- */
.sn-product__summary{max-width:52ch;}
.sn-product__ref{display:block; margin-bottom:20px;}
.woocommerce div.product .product_title,
.sn-product__summary h1{
  font-weight:300; font-size:clamp(30px,3.4vw,50px); line-height:1.04;
  letter-spacing:-0.028em; margin:0 0 24px;
}

/* Price: the clean Swiss sans, generous. Never mono — it is a statement,
   not a measurement. */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.woocommerce div.product .woocommerce-variation-price span.price{
  color:var(--fg); font-family:inherit; font-weight:300;
  font-size:clamp(26px,2.6vw,34px); letter-spacing:-0.02em;
  line-height:1; margin:0 0 30px; display:block;
}
.woocommerce div.product p.price del{color:var(--faint); opacity:1; font-size:.62em;}
.woocommerce div.product p.price ins{color:var(--fg); text-decoration:none; font-weight:300;}

.woocommerce div.product .woocommerce-product-details__short-description{
  font-size:16px; line-height:1.8; color:var(--dim); max-width:44ch;
  margin:0 0 40px; padding-bottom:38px; border-bottom:1px solid var(--hair);
}
.woocommerce div.product .woocommerce-product-details__short-description p+p{margin-top:16px;}

/* =======================================================================
   THE CONFIGURATOR
   ==================================================================== */

/* Woo's real selects: present, submitted, never seen.
   Woo styles `table.variations` with high-specificity selectors
   (.woocommerce div.product form.cart .variations ...), so the visually-hidden
   wrapper has to out-specify them or the dropdowns reappear. */
.sn-config__native,
.woocommerce div.product form.cart .sn-config__native,
.woocommerce div.product form.cart table.variations,
.woocommerce div.product form.cart .variations{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  clip-path:inset(50%) !important;
  white-space:nowrap !important;
}
/* The reset-variation link Woo injects is not part of our UI. */
.woocommerce div.product form.cart .reset_variations{display:none !important;}

.sn-config{margin:0 0 38px;}
.sn-config__group + .sn-config__group{margin-top:34px;}

.sn-config__head{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  padding-bottom:14px; margin-bottom:18px; border-bottom:1px solid var(--hair);
}
.sn-config__value{font-size:13.5px; color:var(--dim); letter-spacing:0.01em; text-align:right;}

.sn-config__swatches{display:flex; flex-wrap:wrap; gap:10px;}

.sn-swatch{
  display:flex; align-items:center; gap:12px;
  padding:11px 18px 11px 12px; cursor:pointer;
  background:none; border:1px solid var(--hair); border-radius:0;
  color:var(--dim); font-family:inherit; font-size:13.5px; letter-spacing:0.01em;
  text-align:left; -webkit-appearance:none; appearance:none;
  transition:border-color .45s var(--ease), color .45s var(--ease), background .45s var(--ease);
}
.sn-swatch:hover{border-color:rgba(255,255,255,0.26); color:var(--fg);}
.sn-swatch.is-active{border-color:rgba(255,255,255,0.46); color:var(--fg); background:rgba(255,255,255,0.028);}
.sn-swatch:focus-visible{outline:1px solid var(--blue); outline-offset:2px;}

/* the material chip. --chip is set inline per term. */
.sn-swatch__chip{
  position:relative; flex:none; width:26px; height:26px; border-radius:50%;
  background:var(--chip,#6A655C);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.14), inset 0 1px 2px rgba(255,255,255,0.20);
}
/* a single specular highlight, so the chip reads as material and not as a dot */
.sn-swatch__chip::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 32% 26%, rgba(255,255,255,0.42), transparent 52%);
}
.sn-swatch__name{white-space:nowrap;}

/* Strap toggle. A VIEW control, not a purchase — deliberately lighter than the
   piece cards so it never reads as a third thing to choose. */
.sn-config__group--strap{margin-top:30px;}
.sn-swatch--strap{padding:10px 20px;}
.sn-config__hint{
  margin:14px 0 0; font-size:11.5px; line-height:1.6;
  letter-spacing:0.01em; color:var(--faint); max-width:46ch;
}

/* ------------------------------------------------------------------
   WHOLE PIECES

   The range is three combinations, not a 2x2 of finish x dial, so the
   product page lists purchasable PIECES — one card each — exactly as the
   homepage configurator does. Stacked rather than in a row: the cards
   carry two lines of text, and a row of three would either wrap
   unpredictably or force the type down below the legibility floor.
   ------------------------------------------------------------------ */
.sn-config__pieces{display:flex; flex-direction:column; gap:10px;}

.sn-piece{
  display:flex; align-items:center; gap:16px;
  width:100%; padding:15px 20px 15px 14px; cursor:pointer;
  background:none; border:1px solid var(--hair); border-radius:0;
  color:var(--dim); font-family:inherit; text-align:left;
  -webkit-appearance:none; appearance:none;
  transition:border-color .45s var(--ease), color .45s var(--ease), background .45s var(--ease);
}
.sn-piece:hover{border-color:rgba(255,255,255,0.26); color:var(--fg);}
.sn-piece.is-active{border-color:rgba(255,255,255,0.46); color:var(--fg); background:rgba(255,255,255,0.028);}
.sn-piece:focus-visible{outline:1px solid var(--blue); outline-offset:2px;}

/* Case chip and dial chip, overlapped: the pairing reads at a glance. */
.sn-piece__chips{display:flex; align-items:center; flex:none;}
.sn-piece__chip{
  position:relative; flex:none; width:26px; height:26px; border-radius:50%;
  background:var(--chip,#6A655C);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.14), inset 0 1px 2px rgba(255,255,255,0.20);
}
.sn-piece__chip::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 32% 26%, rgba(255,255,255,0.42), transparent 52%);
}
.sn-piece__chip--dial{
  width:18px; height:18px; margin-left:-9px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.14), 0 0 0 2px var(--black);
}

.sn-piece__txt{display:flex; flex-direction:column; gap:4px; min-width:0;}
.sn-piece__name{font-size:14.5px; line-height:1.25; color:inherit; letter-spacing:0.01em;}
.sn-piece__meta{
  font-family:"Space Mono",monospace; font-size:11.5px; line-height:1.4;
  letter-spacing:0.04em; color:var(--faint);
}
.sn-piece.is-active .sn-piece__meta{color:var(--dim);}

@media (max-width:560px){
  .sn-piece{padding:14px 16px 14px 12px; gap:13px;}
  .sn-piece__name{font-size:14px;}
}

/* Woo's own reset link is redundant when every option is always visible */
.woocommerce div.product form.cart .reset_variations{display:none;}

/* Woo injects availability/price into this block */
.woocommerce div.product .woocommerce-variation{margin:0;}
.woocommerce div.product .woocommerce-variation-description{
  font-size:14.5px; line-height:1.75; color:var(--dim); margin-bottom:20px;
}
.woocommerce div.product .woocommerce-variation-availability{margin-bottom:18px;}

/* =======================================================================
   RESERVE — quantity + the button
   ==================================================================== */
.woocommerce div.product form.cart{margin:0; display:block;}
.woocommerce div.product form.cart::after{content:""; display:table; clear:both;}

.woocommerce div.product form.cart div.quantity{
  float:none; margin:0 0 14px; display:block;
}
/* restrained: hairline box, centred mono numerals, no spinner chrome */
.woocommerce div.product form.cart .quantity .qty,
.woocommerce .quantity .qty{
  width:100%; max-width:none; background:transparent; color:var(--fg);
  border:1px solid var(--hair); border-radius:0;
  padding:19px 12px; text-align:center;
  font-family:"Space Mono",monospace; font-size:14px; letter-spacing:0.08em;
  -webkit-appearance:none; appearance:none;
  transition:border-color .4s var(--ease);
}
.woocommerce div.product form.cart .quantity .qty:hover{border-color:rgba(255,255,255,0.20);}
.woocommerce div.product form.cart .quantity .qty:focus{border-color:rgba(255,255,255,0.42); outline:none;}
.woocommerce div.product form.cart .quantity .qty::-webkit-outer-spin-button,
.woocommerce div.product form.cart .quantity .qty::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}

/* the approved .cta treatment, full width of the summary column.
   Woo's purple .alt fill is overridden rather than fought with. */
.woocommerce div.product form.cart button.single_add_to_cart_button,
.woocommerce div.product form.cart button.single_add_to_cart_button.alt{
  display:block; width:100%; max-width:none; float:none; margin:0;
  font-family:"Oswald",sans-serif; font-weight:400; font-size:12px;
  letter-spacing:0.22em; text-transform:uppercase; line-height:1;
  color:var(--fg); background:none; background-image:none;
  border:1px solid rgba(255,255,255,0.42); border-radius:0;
  padding:22px 60px; text-shadow:none; box-shadow:none; cursor:pointer;
  -webkit-appearance:none; appearance:none;
  transition:background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
}
.woocommerce div.product form.cart button.single_add_to_cart_button:hover,
.woocommerce div.product form.cart button.single_add_to_cart_button.alt:hover{
  background:var(--fg); color:var(--black); border-color:var(--fg);
}
.woocommerce div.product form.cart button.single_add_to_cart_button.disabled,
.woocommerce div.product form.cart button.single_add_to_cart_button:disabled{
  opacity:.32; cursor:not-allowed; background:none; color:var(--fg);
}
.woocommerce div.product form.cart button.single_add_to_cart_button.disabled:hover,
.woocommerce div.product form.cart button.single_add_to_cart_button:disabled:hover{
  background:none; color:var(--fg); border-color:rgba(255,255,255,0.42);
}

/* stock line */
.woocommerce div.product .stock{
  font-family:"Oswald",sans-serif; font-size:11px; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--dim); margin:0;
}
.woocommerce div.product .out-of-stock{color:var(--faint);}

/* SKU / category meta is unhooked in PHP; guard in case a plugin restores it */
.woocommerce div.product .product_meta{display:none;}

/* ---- assurances: hairline-separated, quiet ---- */
.sn-assure{list-style:none; margin:30px 0 0; padding:0; border-top:1px solid var(--hair);}
.sn-assure__item{
  padding:13px 0; border-bottom:1px solid var(--hair);
  font-size:13px; line-height:1.6; color:var(--dim); letter-spacing:0.01em;
}

/* =======================================================================
   THE EDITORIAL FLOW
   Everything below the buy area. The product long-description is no longer
   printed (see the note in content-single-product.php); these sections are
   hardcoded so the page can be designed rather than typed into an editor.
   The visual language is lifted from the approved homepage-designs/site-a/
   watch.html so the shop and the editorial site read as one thing.
   ==================================================================== */

/* ---- full-bleed breakout ----
   The product sits inside .sn-woo > .wrap, which is max-width + edge padding.
   A full-bleed moment has to escape both. 50vw offset against 50% of the
   container is the standard trick and needs no JS. calc uses the viewport
   width, so it stays correct at every breakpoint. */
.sn-bleed{
  position:relative; left:50%; right:50%;
  width:100vw; max-width:100vw;
  margin-left:-50vw; margin-right:-50vw;
}

/* ---- 02 · the colossal moment ---- */
.sn-moment{
  position:relative; overflow:hidden; background:#000;
  height:clamp(460px,72vh,760px);
  margin-top:clamp(90px,14vh,170px);
  display:flex; align-items:flex-end;
}
.sn-moment__img{
  position:absolute; inset:0; z-index:0;
  background-position:center 46%; background-size:cover; background-repeat:no-repeat;
}
/* clair-obscur: the object stays lit, the type sits in the dark bottom edge */
.sn-moment__shade{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse 78% 76% at 50% 44%, transparent 54%, rgba(11,10,9,0.62) 100%),
    linear-gradient(180deg, var(--black) 0%, transparent 18%, transparent 58%, rgba(11,10,9,0.92) 100%);
}
.sn-moment__in{
  position:relative; z-index:2; width:100%;
  padding:0 var(--edge) clamp(44px,7vh,86px);
  max-width:var(--maxw); margin:0 auto;
}
.sn-moment__line{
  font-weight:300; font-size:clamp(24px,3.4vw,46px); line-height:1.1;
  letter-spacing:-0.025em; color:#F4F2ED; max-width:20ch;
  text-shadow:0 6px 60px rgba(0,0,0,0.8); margin:0;
}

/* ---- 03 · 2-up comparisons (finishes, dials) ---- */
.sn-pair{margin-top:clamp(90px,14vh,170px);}
.sn-pair .sechead{margin-bottom:clamp(34px,5vh,54px);}
/* a 1px gap over a hairline background draws the dividing rules for free */
.sn-pair__cols{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--hair); border:1px solid var(--hair);
}
.sn-pair__cell{position:relative; background:var(--black); overflow:hidden;}
.sn-pair__fig{aspect-ratio:5/4; overflow:hidden; background:#000;}
.sn-pair__fig img{width:100%; height:100%; object-fit:cover;}
/* .imgrise already animates the img in; the hover scale is layered on top of
   the settled state and is kept under the 1.02 ceiling */
.sn-pair__cell:hover .imgrise.in img{transform:scale(1.02);}
.sn-pair__txt{padding:clamp(26px,3vw,46px);}
.sn-pair__k{
  display:flex; align-items:center; gap:12px; margin-bottom:18px;
  font-family:"Oswald",sans-serif; font-size:11px; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--faint);
}
/* the material chip, same treatment as the configurator swatch so the case
   the reader picked above is recognisable down here */
.sn-pair__chip{
  position:relative; flex:none; width:20px; height:20px; border-radius:50%;
  background:var(--chip,#6A655C);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.14), inset 0 1px 2px rgba(255,255,255,0.20);
}
.sn-pair__chip::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 32% 26%, rgba(255,255,255,0.42), transparent 52%);
}
.sn-pair__name{
  font-weight:400; font-size:clamp(20px,2.2vw,28px); line-height:1.14;
  letter-spacing:-0.015em; color:var(--fg); margin:0 0 14px;
}
.sn-pair__line{font-size:15px; line-height:1.75; color:var(--dim); max-width:32ch; margin:0;}
@media (max-width:768px){
  .sn-pair__cols{grid-template-columns:1fr;}
  .sn-pair__fig{aspect-ratio:4/3;}
}

/* ---- 04 · alternating image + text row (the movement) ---- */
.sn-crow-sec{margin-top:clamp(90px,14vh,170px);}
.sn-crow-sec .sechead{margin-bottom:clamp(34px,5vh,54px);}
.sn-crow{
  display:grid; grid-template-columns:1.05fr 0.95fr; align-items:center;
  gap:clamp(36px,6vw,100px);
}
.sn-crow__fig{position:relative; aspect-ratio:4/5; overflow:hidden; background:#000;}
.sn-crow.wide .sn-crow__fig{aspect-ratio:5/4;}
.sn-crow__fig img{width:100%; height:100%; object-fit:cover;}
.sn-crow__idx{font-size:12px; letter-spacing:0.1em; color:var(--faint); margin-bottom:22px;}
.sn-crow__h{
  font-family:"Oswald",sans-serif; font-weight:300;
  font-size:clamp(26px,3.2vw,44px); line-height:1.04; letter-spacing:-0.02em;
  color:var(--fg); margin:0 0 20px;
}
.sn-crow__p{font-size:16px; line-height:1.8; color:var(--dim); max-width:34ch; margin:0;}
.sn-crow__kbd{
  margin-top:26px; display:flex; align-items:center; gap:12px;
  font-family:"Oswald",sans-serif; font-size:11px; letter-spacing:0.24em;
  text-transform:uppercase; color:var(--faint);
}
.sn-crow__kbd::before{content:""; width:24px; height:1px; background:var(--dim);}
@media (max-width:900px){
  .sn-crow{grid-template-columns:1fr; gap:32px;}
  .sn-crow__fig,.sn-crow.wide .sn-crow__fig{aspect-ratio:16/10;}
}

/* =======================================================================
   05 · SPECIFICATION
   The one place detail is welcome. Engineered rather than decorative:
   hairline rules, mono values, generous rows.
   ==================================================================== */
.sn-spec{margin-top:clamp(90px,14vh,170px);}
.sn-spec__head{margin-bottom:clamp(34px,5vh,54px);}
.sn-spec__grid{display:grid; grid-template-columns:1fr 1fr; gap:0 clamp(40px,6vw,110px);}
@media (max-width:900px){.sn-spec__grid{grid-template-columns:1fr;}}
.sn-spec__row{
  display:grid; grid-template-columns:minmax(0,0.58fr) minmax(0,1.42fr); gap:24px;
  padding:24px 0; border-top:1px solid var(--hair); align-items:baseline;
  transition:background .5s var(--ease);
}
/* the last row in each column closes the stack, so the table reads as a
   drawn block rather than trailing off */
.sn-spec__grid > div > .sn-spec__row:last-child{border-bottom:1px solid var(--hair);}
.sn-spec__row:hover{background:rgba(255,255,255,0.018);}
.sn-spec__t{
  font-family:"Oswald",sans-serif; font-size:11px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--faint);
}
/* values are mono: they are measurements, and the caseback is engraved in
   the same register */
.sn-spec__v{font-size:12.5px; line-height:1.8; color:var(--dim); letter-spacing:0.01em;}

/* ---- 06 · the close ---- */
.sn-close{
  margin-top:clamp(90px,14vh,170px); padding-top:clamp(50px,8vh,90px);
  border-top:1px solid var(--hair); text-align:center;
}
.sn-close__label{display:block; margin-bottom:24px;}
.sn-close__line{
  font-weight:300; font-size:clamp(22px,2.8vw,38px); line-height:1.12;
  letter-spacing:-0.025em; color:#F1EFEA; max-width:22ch; margin:0 auto;
}

/* =======================================================================
   EDITORIAL DESCRIPTION
   Rendered inline, not in Woo tabs. Comfortable measure, generous rhythm.
   ==================================================================== */
.sn-story{margin-top:clamp(90px,14vh,170px);}
.sn-story__head{margin-bottom:clamp(34px,5vh,54px);}
.sn-story__body{max-width:62ch;}
.sn-story__body p{font-size:16.5px; line-height:1.85; color:var(--dim);}
.sn-story__body p + p{margin-top:20px;}
.sn-story__body h2,
.sn-story__body h3{
  font-weight:300; color:var(--fg); letter-spacing:-0.02em; line-height:1.12;
  margin:clamp(48px,6vh,76px) 0 20px;
}
.sn-story__body h2{font-size:clamp(24px,2.6vw,34px);}
.sn-story__body h3{font-size:clamp(20px,2.1vw,26px);}
.sn-story__body > *:first-child{margin-top:0;}
.sn-story__body ul,.sn-story__body ol{margin:20px 0 0 1.1em; color:var(--dim); font-size:16px; line-height:1.85;}
.sn-story__body li + li{margin-top:8px;}
.sn-story__body strong{color:var(--fg); font-weight:400;}
/* quiet underline draw on links */
.sn-story__body a{
  color:var(--fg); background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat; background-position:0 100%; background-size:0% 1px;
  transition:background-size .55s var(--ease);
}
.sn-story__body a:hover{background-size:100% 1px;}

/* Woo's tabs are unhooked in PHP; suppressed here in case a plugin restores
   them, so the description can never appear twice. */
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .upsells{display:none;}

/* ============ cart ============ */
.woocommerce table.shop_table{
  border:none; border-radius:0; border-collapse:collapse; width:100%; margin:0 0 40px;
}
.woocommerce table.shop_table th{
  font-family:"Oswald",sans-serif; font-size:10px; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--faint); font-weight:400;
  padding:0 0 16px; border-bottom:1px solid var(--hair); text-align:left;
}
.woocommerce table.shop_table td{
  padding:26px 0; border-top:1px solid var(--hair); border-bottom:none;
  color:var(--dim); font-size:15px; vertical-align:middle;
}
.woocommerce table.shop_table tbody tr:first-child td{border-top:none;}
.woocommerce table.cart img{width:88px; height:auto; background:#000;}
.woocommerce table.cart td.product-name a{color:var(--fg);}
.woocommerce table.cart td.product-name .variation{
  font-family:"Space Mono",monospace; font-size:11.5px; color:var(--faint);
  margin-top:8px; line-height:1.8;
}
.woocommerce table.cart td.product-name .variation dt,
.woocommerce table.cart td.product-name .variation dd{display:inline; margin:0;}
.woocommerce table.cart td.product-price,
.woocommerce table.cart td.product-subtotal{font-family:"Space Mono",monospace; font-size:14px; color:var(--fg);}
.woocommerce a.remove{
  color:var(--faint)!important; font-size:20px; line-height:1;
  width:auto; height:auto; border-radius:0; background:none!important;
}
.woocommerce a.remove:hover{color:var(--fg)!important; background:none!important;}
.woocommerce table.cart td.actions{padding-top:30px; border-top:1px solid var(--hair);}
.woocommerce table.cart td.actions .coupon{display:none;}

/* cart totals */
.woocommerce .cart-collaterals{width:100%;}
.woocommerce .cart-collaterals .cart_totals{width:min(460px,100%); float:right;}
@media (max-width:900px){.woocommerce .cart-collaterals .cart_totals{float:none; width:100%;}}
.woocommerce .cart_totals h2{
  font-family:"Oswald",sans-serif; font-size:11px; letter-spacing:0.24em;
  text-transform:uppercase; color:var(--faint); font-weight:400; margin-bottom:22px;
}
.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td{
  padding:18px 0; border-top:1px solid var(--hair); border-bottom:none;
  font-family:"Space Mono",monospace; font-size:13px; text-transform:none; letter-spacing:0;
}
.woocommerce .cart_totals table.shop_table th{color:var(--faint); font-family:"Oswald",sans-serif; font-size:10px; letter-spacing:0.2em; text-transform:uppercase;}
.woocommerce .cart_totals .order-total td{color:var(--fg); font-size:16px;}
.woocommerce .wc-proceed-to-checkout{padding:26px 0 0;}
.woocommerce .wc-proceed-to-checkout a.checkout-button{display:block; text-align:center; width:100%;}

/* empty cart */
.sn-empty{padding:clamp(60px,10vh,120px) 0; max-width:46ch;}
.sn-empty__label{display:block; margin-bottom:24px;}
.sn-empty h2{font-weight:300; font-size:clamp(28px,3.4vw,48px); line-height:1.08; letter-spacing:-0.025em; margin-bottom:20px;}
.sn-empty p{font-size:16px; line-height:1.8; color:var(--dim); margin-bottom:38px;}

/* ============ checkout ============ */
/* Two columns: a quiet run of fields, and the order held alongside it.
   The review column is sticky so the total and the delivery estimate stay
   in view while the buyer works down the form. */
.sn-checkout{
  display:grid; grid-template-columns:1.15fr 0.85fr;
  gap:clamp(40px,5vw,90px); align-items:start;
  padding-top:clamp(20px,3vh,40px);
}
@media (max-width:980px){.sn-checkout{grid-template-columns:1fr; gap:56px;}}

/* --- numbered steps, matching the editorial sections elsewhere --- */
.sn-step{margin:0 0 clamp(46px,6vh,76px);}
.sn-step:last-child{margin-bottom:0;}
.sn-step__head{display:flex; align-items:center; gap:20px; margin-bottom:clamp(26px,3vh,38px);}
.sn-step__head .num-idx{flex:none; white-space:nowrap;}
.sn-step__head .rule{flex:1; height:1px; background:var(--hair);}

/* Woo prints its own <h3> inside each fieldset; the step header above already
   names the section, so they are suppressed rather than duplicated. */
.sn-checkout .woocommerce-billing-fields > h3,
.sn-checkout .woocommerce-shipping-fields > h3{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
.sn-checkout .woocommerce-additional-fields > h3{
  font-family:"Oswald",sans-serif; font-size:11px; letter-spacing:0.24em;
  text-transform:uppercase; color:var(--faint); font-weight:400;
  margin:0 0 24px; padding-bottom:14px; border-bottom:1px solid var(--hair);
}
.sn-checkout .woocommerce-additional-fields{margin-top:clamp(40px,5vh,64px);}

/* "Ship to a different address" toggle */
.sn-checkout .woocommerce-shipping-fields h3#ship-to-different-address{
  position:static; width:auto; height:auto; clip:auto;
  font-family:inherit; font-size:14px; letter-spacing:0; text-transform:none;
  color:var(--dim); border:none; padding:0; margin:0 0 20px; font-weight:400;
}
.sn-checkout #ship-to-different-address label{display:inline-flex; align-items:center; gap:12px; cursor:pointer;}

/* Fields sit two-up on wide screens; Woo's own form-row-first/last classes
   already mark the pairs, so we honour them instead of inventing a grid. */
.woocommerce form .form-row-first,
.woocommerce form .form-row-last{width:calc(50% - 14px); float:left;}
.woocommerce form .form-row-last{float:right;}
.woocommerce form .form-row-wide{clear:both; width:100%;}
.woocommerce form .form-row::after{content:""; display:table; clear:both;}
@media (max-width:640px){
  .woocommerce form .form-row-first,
  .woocommerce form .form-row-last{width:100%; float:none;}
}

.sn-checkout__hidden-shipping{display:none;}

/* --- the held order summary --- */
.sn-checkout__review{
  position:sticky; top:100px;
  border:1px solid var(--hair); background:var(--panel);
  padding:clamp(26px,2.6vw,38px);
}
@media (max-width:980px){.sn-checkout__review{position:static;}}
.sn-checkout__review .sn-step__head{margin-bottom:26px;}

/* item: photograph of the exact variation, then what was chosen */
.sn-review__items{margin-bottom:6px;}
.sn-review__item{
  display:grid; grid-template-columns:64px 1fr auto; gap:18px;
  align-items:start; padding:0 0 24px; margin-bottom:24px;
  border-bottom:1px solid var(--hair);
}
.sn-review__media{width:64px; aspect-ratio:1/1; overflow:hidden; background:#000;}
.sn-review__media img{width:100%; height:100%; object-fit:cover; display:block;}
.sn-review__body{min-width:0;}
.sn-review__name{display:block; font-size:15px; line-height:1.35; color:var(--fg); margin-bottom:6px;}
.sn-review__sku{display:block; font-size:11px; letter-spacing:0.06em; color:var(--faint); margin-bottom:10px;}
.sn-review__chosen{
  display:block; font-size:12px; line-height:1.6; color:var(--dim);
  letter-spacing:0.01em; margin-bottom:2px;
}
.sn-review__qty{display:block; font-size:11px; color:var(--faint); margin-top:10px; letter-spacing:0.04em;}
.sn-review__price{
  font-family:"Space Mono",monospace; font-size:14px; color:var(--fg); white-space:nowrap; text-align:right;
}

/* chosen finish / dial, printed by wc_get_formatted_cart_item_data() */
.sn-review__body dl.variation{margin:0; font-size:0;}
.sn-review__body dl.variation dt,
.sn-review__body dl.variation dd{
  display:inline-block; font-size:11px; line-height:1.6; margin:0; padding:0;
  color:var(--faint); letter-spacing:0.04em;
}
.sn-review__body dl.variation dt{font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:0.18em; margin-right:7px;}
.sn-review__body dl.variation dd{color:var(--dim); margin-right:14px;}
.sn-review__body dl.variation dd p{margin:0;}

/* money ledger */
.sn-ledger{margin:0; padding:0;}
.sn-ledger__row{
  display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  padding:13px 0; border-bottom:1px solid var(--hair);
}
.sn-ledger__row dt{
  font-family:"Oswald",sans-serif; font-size:10px; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--faint); margin:0;
}
.sn-ledger__row dd{font-family:"Space Mono",monospace; font-size:13px; color:var(--dim); margin:0; text-align:right;}
.sn-ledger__row.order-total{border-bottom:none; padding-top:20px; margin-top:6px; border-top:1px solid rgba(255,255,255,0.18);}
.sn-ledger__row.order-total dt{color:var(--dim);}
.sn-ledger__row.order-total dd{font-size:19px; color:var(--fg);}
.sn-ledger__row.order-total dd .woocommerce-Price-amount{font-size:19px;}
.sn-ledger .includes_tax,
.sn-ledger small{display:block; font-size:10px; color:var(--faint); margin-top:5px; font-family:"Oswald",sans-serif; letter-spacing:0.14em; text-transform:uppercase;}

/* shipping choices inside the ledger */
.sn-ledger ul#shipping_method{list-style:none; margin:8px 0 0; padding:0; text-align:right;}
.sn-ledger ul#shipping_method li{margin:0 0 8px; font-size:13px; color:var(--dim);}
.sn-ledger ul#shipping_method li:last-child{margin-bottom:0;}
.sn-ledger ul#shipping_method label{display:inline; font-size:13px; letter-spacing:0; text-transform:none; color:var(--dim); font-family:inherit;}
.sn-ledger .woocommerce-shipping-destination{font-size:11px; color:var(--faint); margin-top:8px; line-height:1.6;}
.sn-ledger .shipping-calculator-button{color:var(--dim); text-decoration:none; border-bottom:1px solid var(--hair); font-size:12px;}

/* delivery estimate, carried through the funnel */
.sn-estimate--checkout{
  margin:22px 0 4px; padding:16px 18px;
  border:1px solid var(--hair); background:rgba(255,255,255,0.02);
  font-size:12px; letter-spacing:0.04em; color:var(--dim); line-height:1.6;
}

/* payment box */
#add_payment_method #payment,
.woocommerce-cart #payment,
.woocommerce-checkout #payment{background:transparent; border-radius:0; margin-top:26px;}
.woocommerce-checkout #payment ul.payment_methods{
  padding:0; margin:0; border:none; border-top:1px solid var(--hair); list-style:none;
}
.woocommerce-checkout #payment ul.payment_methods li{
  padding:16px 0; color:var(--dim); font-size:14px; border-bottom:1px solid var(--hair);
}
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"]{margin-right:10px;}
.woocommerce-checkout #payment ul.payment_methods li label{
  display:inline; font-family:inherit; font-size:14px; letter-spacing:0;
  text-transform:none; color:var(--dim); cursor:pointer;
}
.woocommerce-checkout #payment div.payment_box{
  background:rgba(255,255,255,0.03); border-radius:0; color:var(--dim);
  font-size:13.5px; line-height:1.7; padding:18px; margin:12px 0 0;
}
.woocommerce-checkout #payment div.payment_box::before{display:none;}
.woocommerce-checkout #payment div.form-row{padding:22px 0 0;}
.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper{
  font-size:13px; color:var(--faint); line-height:1.7; margin:22px 0;
}
.woocommerce-checkout #payment #place_order{width:100%; text-align:center; margin-top:6px;}

/* No gateway configured yet: Woo prints a plain paragraph here. Make it read
   as a deliberate state rather than a broken page. */
.woocommerce-checkout #payment .woocommerce-notice,
.woocommerce-checkout #payment > .woocommerce-info{
  border:1px solid var(--hair); background:rgba(255,255,255,0.02);
  padding:18px; font-size:13px; color:var(--dim); line-height:1.7; margin:0;
}

/* ============ order received / thank you ============ */
.woocommerce ul.order_details{
  list-style:none; margin:0 0 48px; padding:0 0 32px;
  border-bottom:1px solid var(--hair);
  display:flex; flex-wrap:wrap; gap:clamp(28px,4vw,60px);
}
.woocommerce ul.order_details li{
  float:none; border:none; padding:0; margin:0;
  font-family:"Oswald",sans-serif; font-size:10px; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--faint);
}
.woocommerce ul.order_details li strong{
  display:block; margin-top:10px; font-family:"Space Mono",monospace;
  font-size:14px; letter-spacing:0.02em; text-transform:none; color:var(--fg); font-weight:400;
}
.woocommerce-order .woocommerce-thankyou-order-received{
  font-weight:300; font-size:clamp(26px,3.2vw,44px); line-height:1.1;
  letter-spacing:-0.025em; color:var(--fg); margin-bottom:30px; max-width:24ch;
}
.woocommerce-order h2,
.woocommerce-order-details__title,
.woocommerce-column__title{
  font-family:"Oswald",sans-serif; font-size:11px; letter-spacing:0.24em;
  text-transform:uppercase; color:var(--faint); font-weight:400;
  margin:44px 0 22px; padding-bottom:14px; border-bottom:1px solid var(--hair);
}
.woocommerce .woocommerce-customer-details address{
  border:1px solid var(--hair); border-radius:0; padding:24px;
  font-style:normal; color:var(--dim); font-size:14px; line-height:1.9;
}

/* ============ notices ============ */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice{
  background:rgba(255,255,255,0.035); border:1px solid var(--hair); border-top:none;
  border-radius:0; color:var(--dim); font-size:14px; line-height:1.7;
  padding:22px 24px; margin:0 0 34px; list-style:none;
  display:flex; flex-wrap:wrap; align-items:center; gap:16px;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-notice::before{display:none;}

/* Woo sets `border-top-color` in a LATER rule than its `border-top` shorthand
   (#720eec purple, then green/blue/red per notice type). Our `border-top:none`
   above is therefore overridden on colour alone, which painted a bright blue
   bar across the top of every "added to cart" message — a colour the Charte
   does not permit. Restated here, after Woo, with matching specificity. */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-notice,
.woocommerce-page .woocommerce-message,
.woocommerce-page .woocommerce-info,
.woocommerce-page .woocommerce-error,
.woocommerce-page .woocommerce-notice{
  background:rgba(255,255,255,0.035); color:var(--dim);
  border:1px solid var(--hair); border-top:0 none transparent;
}
.woocommerce .woocommerce-message,
.woocommerce-page .woocommerce-message{border-left:1px solid rgba(255,255,255,0.28);}
.woocommerce .woocommerce-error,
.woocommerce-page .woocommerce-error{border-left:1px solid #B4675A; color:#E4CFC9;}
.woocommerce-message{border-left:1px solid rgba(255,255,255,0.28);}
.woocommerce-error{border-left:1px solid #B4675A; color:#E4CFC9;}
.woocommerce-error li{list-style:none;}
.woocommerce-message a.button,
.woocommerce-info a.button,
.woocommerce-error a.button{margin-left:auto; padding:14px 32px; font-size:11px;}

/* ============ misc suppression ============ */
.woocommerce .woocommerce-breadcrumb,
.woocommerce-store-notice,
p.demo_store,
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering,
.woocommerce nav.woocommerce-MyAccount-navigation{display:none;}

@media (prefers-reduced-motion:reduce){
  .woocommerce a.button,.woocommerce button.button,.woocommerce input.button{transition:none;}
}

/* Photography gap notice: quiet, factual, never alarming.
   Remove together with the PHP hook once the missing frame arrives. */
.sn-imgnote{
  margin:12px 0 0; padding:0;
  font-size:12px; line-height:1.6; color:var(--faint);
  letter-spacing:0.01em;
}
.sn-imgnote[hidden]{display:none;}

/* Both straps: the lead states the fact, the note carries the detail. */
.sn-straps__lead{
  max-width:44ch; margin:0 0 clamp(34px,5vh,56px);
  font-size:17px; line-height:1.75; color:var(--dim);
}
.sn-straps__note{
  margin:clamp(30px,4vh,48px) 0 0; padding-top:22px;
  border-top:1px solid var(--hair);
  font-size:13px; line-height:1.7; color:var(--faint); max-width:56ch;
}

/* ---------------------------------------------------------------
 * PHONE REFINEMENTS  (≤ 560px)
 * -------------------------------------------------------------- */
@media (max-width:560px){

  /* Checkout: the review summary must not be sticky on a small screen —
     it would eat most of the viewport while the customer types. */
  .sn-checkout__review{position:static; padding:22px 18px;}
  .sn-checkout{gap:40px;}
  .sn-step{margin-bottom:44px;}

  /* Order summary item: image over text rather than a 3-column grid. */
  .sn-review__item{grid-template-columns:52px 1fr; gap:14px;}
  .sn-review__media{width:52px;}
  .sn-review__price{
    grid-column:2 / -1; text-align:left; margin-top:8px;
  }

  /* Ledger rows stay two-up but tighten. */
  .sn-ledger__row{padding:11px 0; gap:12px;}
  .sn-ledger__row.order-total dd,
  .sn-ledger__row.order-total dd .woocommerce-Price-amount{font-size:17px;}

  /* Woo's cart table is unusable as a table on a phone: reflow to rows. */
  .woocommerce table.shop_table,
  .woocommerce table.shop_table tbody,
  .woocommerce table.shop_table tr,
  .woocommerce table.shop_table td{display:block; width:100%;}
  .woocommerce table.shop_table thead{display:none;}
  .woocommerce table.shop_table tr{
    border-bottom:1px solid var(--hair); padding:16px 0;
  }
  .woocommerce table.shop_table td{
    border:none; padding:6px 0; text-align:left;
  }
  .woocommerce table.shop_table td::before{
    content:attr(data-title); display:block;
    font-family:"Oswald",sans-serif; font-size:10px; letter-spacing:0.18em;
    text-transform:uppercase; color:var(--faint); margin-bottom:5px;
  }
  .woocommerce table.shop_table td.product-remove::before,
  .woocommerce table.shop_table td.product-thumbnail::before{display:none;}
  .woocommerce table.shop_table td.product-thumbnail img{width:74px;}

  /* Cart totals full width. */
  .woocommerce .cart-collaterals .cart_totals{width:100%; float:none;}

  /* Product page: swatches need room. */
  .sn-swatch{min-height:44px;}
  .sn-config__opts{gap:8px;}

  /* Thank-you / order details stack. */
  .woocommerce ul.order_details{flex-direction:column; gap:20px;}
}

/* Tablet: the checkout's two columns are cramped below ~980px, which the
   existing rule already handles — this only relaxes the review padding. */
@media (max-width:980px) and (min-width:561px){
  .sn-checkout__review{padding:26px 22px;}
}