/* ═══ woo.css — the build's tokens over WooCommerce's OWN markup.
   HAND-AUTHORED. Loaded on cart, checkout, order-received, my-account and the
   generic product page — the surfaces the build never drew.

   THE RULE THIS FILE OBEYS: it may not change one element of WooCommerce's
   markup, one field, one order of things. The checkout is the proven part of the
   spine and stays proven; the payment methods, the coupon field, the points
   control, the gift-card field and the invoice hooks all render exactly where
   the plugins put them. All that happens here is that Woo's own selectors are
   given the build's ground, ink, honey, line and typeface, so the seam between a
   bespoke marketing page and a native transactional one is a change of layout,
   not a change of brand.

   Deliberately NOT here: any rule that hides a Woo element, reorders a form, or
   restyles another lane's plugin UI (the subscriptions switch, the upsell cards,
   the gateway blocks). Those belong to the lanes that own them.
   ══════════════════════════════════════════════════════════════════════════ */

/* the shell fixes a header over the page; Woo's pages have no hero to sit under */
.yw,
.woocommerce-page main,
main .woocommerce {
  padding-top: clamp(84px, 12vh, 128px);
  padding-bottom: clamp(64px, 10vh, 120px);
}

/* ── type ─────────────────────────────────────────────────────────────────── */
.woocommerce h1,
.woocommerce h2,
.woocommerce h3,
.woocommerce-page h1,
.woocommerce-page h2,
.woocommerce-page h3 {
  font-family: var(--disp);
  font-weight: 300;
  color: var(--ink);
  letter-spacing: .005em;
}
.woocommerce h3,
.woocommerce-page h3 { font-size: clamp(22px, 2.4vw, 30px); }

.woocommerce,
.woocommerce-page {
  font-family: var(--f);
  color: var(--ink);
}
.woocommerce a,
.woocommerce-page a { color: var(--honey-deep); }

/* ── money ────────────────────────────────────────────────────────────────── */
.woocommerce .amount,
.woocommerce-page .amount {
  font-family: var(--tick);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.woocommerce del .amount,
.woocommerce-page del .amount { color: var(--ink-3); }

/* ── panels: cart totals, the order review, the account boxes ─────────────── */
.woocommerce .cart_totals,
.woocommerce-checkout-review-order,
.woocommerce-order-details,
.woocommerce-customer-details,
.woocommerce-MyAccount-content,
.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce .woocommerce-order .woocommerce-order-overview {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: clamp(16px, 2.4vw, 28px);
  box-shadow: var(--glow-soft);
}

/* ── tables ───────────────────────────────────────────────────────────────── */
.woocommerce table.shop_table,
.woocommerce-page table.shop_table {
  border: 1px solid var(--line);
  border-radius: 3px;
  border-collapse: separate;
  background: var(--card);
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td,
.woocommerce-page table.shop_table th,
.woocommerce-page table.shop_table td {
  border-top: 1px solid var(--line);
  color: var(--ink);
}
.woocommerce table.shop_table thead th { color: var(--ink-2); font-weight: 600; }

/* wide tables scroll inside themselves rather than pushing the page sideways */
.woocommerce .shop_table_responsive,
.woocommerce-cart-form { overflow-x: auto; }

/* ── fields ───────────────────────────────────────────────────────────────── */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea,
.woocommerce-page form .form-row select,
.woocommerce .select2-container .select2-selection--single {
  font: 400 16px/1.6 var(--f);
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 12px 14px;
  height: auto;
}
.woocommerce form .form-row label,
.woocommerce-page form .form-row label {
  font: 600 13.5px/1.6 var(--f);
  color: var(--ink-2);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  outline: 2px solid var(--honey-deep);
  outline-offset: 1px;
}

/* ── buttons: the build's .btn, applied to Woo's own ──────────────────────── */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button,
.woocommerce #place_order,
.woocommerce .checkout-button {
  display: inline-block;
  background: var(--ink);
  color: var(--bg);
  font: 600 15px/1 var(--f);
  letter-spacing: .04em;
  padding: 14px 26px;
  border: 0;
  border-radius: 3px;
  cursor: pointer;
  transition: transform var(--t-ui) var(--ease-out), background var(--t-ui) var(--ease-out);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover,
.woocommerce #place_order:hover,
.woocommerce .checkout-button:hover { background: #2A241E; color: var(--bg); }
.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce #place_order:active { transform: scale(.98); }

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #place_order,
.woocommerce .checkout-button { background: var(--honey-deep); }
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce #place_order:hover,
.woocommerce .checkout-button:hover { background: var(--honey); }

/* ── notices ──────────────────────────────────────────────────────────────── */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
  background: var(--card);
  border-top: 3px solid var(--honey);
  color: var(--ink);
  border-radius: 3px;
  box-shadow: var(--glow-soft);
}
.woocommerce-error { border-top-color: #A8443A; }
.woocommerce-message::before,
.woocommerce-info::before { color: var(--honey-deep); }

/* ── payment methods: brand the frame, never the gateways' own blocks ─────── */
.woocommerce-checkout #payment {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 3px;
}
.woocommerce-checkout #payment ul.payment_methods { border-bottom: 1px solid var(--line); }
.woocommerce-checkout #payment div.payment_box {
  background: rgba(178, 139, 82, .07);
  color: var(--ink-2);
  border-radius: 3px;
}
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: rgba(178, 139, 82, .07); }

/* ── my-account ───────────────────────────────────────────────────────────── */
.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--card);
  overflow: hidden;
}
.woocommerce-MyAccount-navigation li + li { border-top: 1px solid var(--line); }
.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 13px 18px;
  font: 600 14.5px/1 var(--f);
  color: var(--ink-2);
}
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover { color: var(--honey-deep); background: rgba(178, 139, 82, .06); }

/* ── the generic product page ─────────────────────────────────────────────── */
.yw--product div.product .product_title { font-size: clamp(30px, 4vw, 52px); margin-bottom: .2em; }
.yw--product div.product p.price { font-family: var(--tick); font-size: clamp(20px, 2.2vw, 28px); color: var(--ink); }
.yw--product div.product .woocommerce-tabs ul.tabs::before { border-bottom-color: var(--line); }
.yw--product .related > h2 { margin-top: 1.2em; }

/* ── generic product page, the build's tokens over WooCommerce's defaults (2026-09-05) ───────────
   Reached from the store for every product the build drew no page for (Serum Symphony, the earlier
   SunSafe, the professional kit, three older bundles). Woo's purple button, olive "sale" bubble and
   full-width stacked gallery thumbnails were showing through. */
.yw .single_add_to_cart_button,.yw .single_add_to_cart_button.button,.yw button.button.alt{
  background:var(--honey-deep,#8e6b39)!important;color:#fff!important;border:0!important;border-radius:0!important;
  font:600 15px/1 var(--f)!important;padding:16px 28px!important;letter-spacing:.01em}
.yw .single_add_to_cart_button:hover{background:var(--ink,#241705)!important}
.yw .onsale{position:absolute;top:12px;inset-inline-start:12px;z-index:2;min-width:0;min-height:0;
  padding:0 8px;line-height:24px;border-radius:0!important;border:1px solid var(--honey-deep,#8e6b39);
  background:var(--card,#fff)!important;color:var(--honey-deep,#8e6b39)!important;font:600 12px/24px var(--f);letter-spacing:.02em}
.yw .price{font:500 22px/1.2 var(--f)!important;color:var(--honey-deep,#8e6b39)!important}
.yw .price del{opacity:.5;font-weight:400;font-size:.8em}
.yw .price ins{text-decoration:none;font-weight:600}
.yw .quantity .qty{min-height:44px;border:1px solid var(--line,#ddd);border-radius:0;width:64px;text-align:center;font:500 15px/1 var(--f)}
/* gallery without flexslider: the first image is the picture, the rest a row of small thumbnails */
.yw .woocommerce-product-gallery__wrapper{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}
.yw .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:first-child{flex:0 0 100%}
.yw .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:not(:first-child){flex:0 0 calc(25% - 6px);max-width:calc(25% - 6px)}
.yw .woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image img{width:100%;height:auto;display:block;border-radius:4px}
.yw .woocommerce-product-gallery__trigger{border-radius:50%}
.yw .product_meta{font:400 13px/1.8 var(--f);color:var(--ink-3,#6b5a48)}
.yw .woocommerce-tabs ul.tabs li{border-radius:0;background:transparent;border-color:var(--line,#ddd)}
.yw .woocommerce-tabs ul.tabs li.active{background:var(--card,#fff)}