/* ============================================================
   ArcOS additions on top of the ported design system.
   Loaded AFTER optml-design.css on canvas pages (see the
   sandbox clean-room allowlist). Keep this file for elements
   that are not part of the Claude Design export, so design
   re-imports never overwrite them.
   ============================================================ */

/* --- Header cart button (desktop nav + mobile) ---
   The cart replaced the header "Shop range now" CTA and inherits its role as
   the header's dark, stand-out element. */
.cart-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  border: 1px solid var(--color-ink);
  border-radius: var(--r-pill);
  background: var(--color-ink);
  color: var(--text-inverse);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cart-btn:hover {
  background: var(--color-primary-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.cart-btn svg { width: 24px; height: 24px; }

.cart-count {
  position: absolute; top: -4px; right: -4px;
  min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--color-paper); color: var(--color-ink);
  border: 1px solid var(--color-ink);
  font-size: 11px; font-weight: var(--w-bold); line-height: 17px;
  text-align: center;
  display: none;
}
.cart-count.has-items { display: inline-block; }

/* Mobile instance sits between the brand and the hamburger; auto margin
   groups it with the toggle on the right. Hidden on desktop, where the
   nav-desktop instance shows instead. */
.cart-btn-mobile { margin-left: auto; }
@media (min-width: 1000px) { .cart-btn-mobile { display: none; } }

/* Cart row inside the mobile slide-down panel */
.nav-panel .cart-panel-link { display: flex; align-items: center; gap: 8px; }
.nav-panel .cart-panel-link .cart-count { position: static; }

/* Shop is the primary action — give it the filled dark-pill treatment in the
   mobile menu so it stands out from the plain text links. Higher-specificity
   selectors keep it dark even on the /shop/ page (aria-current) and on hover. */
.nav-panel a[href="/shop/"] {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--color-ink); color: var(--text-inverse);
  font-weight: var(--w-bold); margin-bottom: 2px;
}
.nav-panel a[href="/shop/"]:hover,
.nav-panel a[href="/shop/"][aria-current="page"] {
  background: var(--color-primary-hover); color: var(--text-inverse);
}
.nav-panel a[href="/shop/"]::after {
  content: ""; width: 16px; height: 16px; flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ============================================================
   Shop UX layer (5 Jul 2026): header icons, slide-over drawers
   (cart / account / search), quick-add on product cards.
   ============================================================ */

/* --- header icon buttons (search + account share the light style; the cart
       keeps the dark stand-out treatment) --- */
.hdr-icon {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--color-paper);
  color: var(--color-ink);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.hdr-icon:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.hdr-icon svg { width: 22px; height: 22px; }

/* --- slide-over drawers --- */
.optml-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(20,20,22,.45); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .25s var(--ease);
}
.optml-overlay.open { opacity: 1; pointer-events: auto; }
.optml-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 9001;
  width: min(460px, 100vw);
  background: var(--color-paper);
  box-shadow: var(--shadow-lg);
  transform: translateX(102%); transition: transform .3s var(--ease);
  display: flex; flex-direction: column;
  font-family: var(--font-sans);
}
.optml-drawer.open { transform: translateX(0); }
.optml-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; border-bottom: 1px solid var(--border);
}
.optml-drawer-head strong { font-weight: var(--w-black); letter-spacing: .04em; font-size: 1rem; }
.optml-drawer-head .muted-count { color: var(--text-muted); font-weight: var(--w-medium); }
.optml-drawer-close {
  width: 36px; height: 36px; border: 0; background: none; cursor: pointer;
  color: var(--color-ink); font-size: 22px; line-height: 1;
}
.optml-drawer-body { flex: 1; overflow-y: auto; padding: 20px 24px; }
.optml-drawer-foot { border-top: 1px solid var(--border); padding: 18px 24px; }

/* --- mini-cart --- */
.mc-line { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.mc-line img { width: 72px; height: 72px; border-radius: var(--r-sm); object-fit: cover; background: var(--n-50); }
.mc-info { flex: 1; min-width: 0; }
.mc-name { font-weight: var(--w-bold); font-size: .95rem; color: var(--color-ink); }
.mc-variant { color: var(--text-muted); font-size: .82rem; margin-top: 2px; }
.mc-row { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.mc-qty { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: var(--r-pill); }
.mc-qty button { width: 30px; height: 30px; border: 0; background: none; cursor: pointer; font-size: 15px; color: var(--color-ink); }
.mc-qty span { min-width: 26px; text-align: center; font-weight: var(--w-semi); font-size: .9rem; }
.mc-price { font-weight: var(--w-bold); }
.mc-remove { border: 0; background: none; color: var(--n-400); cursor: pointer; font-size: 18px; align-self: flex-start; }
.mc-remove:hover { color: var(--color-ink); }
.mc-upsell-head { font-weight: var(--w-black); letter-spacing: .03em; font-size: .82rem; text-transform: uppercase; margin: 22px 0 6px; }
.mc-upsell { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--n-100); }
.mc-upsell img { width: 52px; height: 52px; border-radius: var(--r-xs); object-fit: cover; background: var(--n-50); }
.mc-upsell-info { flex: 1; min-width: 0; }
.mc-upsell-name { font-weight: var(--w-semi); font-size: .88rem; }
.mc-upsell-price { color: var(--text-muted); font-size: .82rem; }
.mc-add {
  border: 0; border-radius: var(--r-pill); cursor: pointer;
  background: var(--restore-light); color: var(--color-ink);
  font-weight: var(--w-bold); font-size: .8rem; padding: 8px 14px;
  transition: filter var(--dur) var(--ease);
}
.mc-add:hover { filter: brightness(.94); }
.mc-subtotal { display: flex; justify-content: space-between; font-weight: var(--w-bold); margin-bottom: 6px; }
.mc-note { color: var(--text-muted); font-size: .8rem; margin-bottom: 12px; }
.mc-checkout {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 16px; border: 0; border-radius: var(--r-pill);
  background: var(--color-ink); color: var(--text-inverse);
  font-weight: var(--w-bold); font-size: 1rem; cursor: pointer; text-decoration: none;
}
.mc-checkout:hover { background: var(--color-primary-hover); }
.mc-empty { text-align: center; color: var(--text-muted); padding: 40px 0; }

/* --- account panel --- */
.ac-tabs { display: flex; gap: 18px; margin-bottom: 20px; }
.ac-tab {
  border: 0; background: none; cursor: pointer; padding: 0;
  font-weight: var(--w-black); font-size: 1.4rem; letter-spacing: -.01em;
  color: var(--n-400);
}
.ac-tab.active { color: var(--color-ink); }
.ac-field { width: 100%; padding: 15px 16px; margin-bottom: 12px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--n-25); font-family: var(--font-sans); font-size: .95rem; }
.ac-field:focus { outline: 2px solid var(--focus-ring); }
.ac-submit { width: 100%; padding: 15px; border: 0; border-radius: var(--r-pill);
  background: var(--color-ink); color: var(--text-inverse);
  font-weight: var(--w-bold); font-size: .98rem; cursor: pointer; margin-top: 4px; }
.ac-error { color: #b0433b; font-size: .85rem; margin: 4px 0 10px; min-height: 1em; }
.ac-links a { display: block; padding: 14px 0; border-bottom: 1px solid var(--n-100);
  color: var(--color-ink); font-weight: var(--w-semi); text-decoration: none; }
.ac-forgot { display: inline-block; margin-top: 14px; color: var(--text-muted); font-size: .88rem; }

/* --- search overlay --- */
.sr-input { width: 100%; padding: 16px 18px; border: 1px solid var(--border-strong);
  border-radius: var(--r-pill); font-size: 1.05rem; font-family: var(--font-sans); background: #fff; }
.sr-result { display: flex; align-items: center; gap: 14px; padding: 12px 0;
  border-bottom: 1px solid var(--n-100); text-decoration: none; color: var(--color-ink); }
.sr-result img { width: 56px; height: 56px; border-radius: var(--r-xs); object-fit: cover; background: var(--n-50); }
.sr-name { font-weight: var(--w-semi); }
.sr-price { color: var(--text-muted); font-size: .85rem; }
.sr-hint { color: var(--text-muted); font-size: .88rem; padding: 16px 0; text-align: center; }

/* --- quick-add on product cards: reveal on hover (always visible on touch) --- */
@media (hover: hover) {
  .product-card .product-add { opacity: 0; transform: translateY(4px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
  .product-card:hover .product-add { opacity: 1; transform: translateY(0); }
}
.product-add.adding { pointer-events: none; opacity: .6 !important; }

/* ============================================================
   WooCommerce endpoint pages inside the canvas shell
   (cart / checkout / my-account) — design-system skin.
   ============================================================ */
.woo-canvas { padding-block: var(--sp-10) var(--sp-20); }
.woo-page-title {
  font-size: var(--fs-h2); font-weight: var(--w-black);
  letter-spacing: var(--track-tight); margin: var(--sp-6) 0 var(--sp-8);
}
.woo-canvas .woocommerce { font-family: var(--font-sans); }

/* fields */
.woo-canvas .form-row label { font-weight: var(--w-semi); font-size: .88rem; color: var(--text-body); margin-bottom: 4px; }
.woo-canvas input.input-text, .woo-canvas select, .woo-canvas textarea.input-text,
.woo-canvas .select2-container--default .select2-selection--single {
  width: 100% !important; padding: 14px 16px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important; background: var(--n-25) !important;
  font-family: var(--font-sans) !important; font-size: .95rem !important; height: auto !important;
}
.woo-canvas input.input-text:focus, .woo-canvas select:focus { outline: 2px solid var(--focus-ring); }
.woo-canvas .select2-container--default .select2-selection--single { display: flex; align-items: center; }
.woo-canvas .select2-container--default .select2-selection__arrow { top: 50%; transform: translateY(-50%); }

/* headings inside woo */
.woo-canvas .woocommerce h3, .woo-canvas #order_review_heading {
  font-size: var(--fs-h4); font-weight: var(--w-black); letter-spacing: var(--track-snug);
  margin: var(--sp-6) 0 var(--sp-4);
}

/* checkout layout: form left, order review as a card right */
@media (min-width: 1000px) {
  .woo-canvas form.checkout { display: grid; grid-template-columns: 1fr 420px; grid-template-rows: auto 1fr; gap: var(--sp-4) var(--sp-10); align-items: start; }
  .woo-canvas #customer_details { grid-column: 1; grid-row: 1 / span 2; }
  .woo-canvas #order_review_heading { grid-column: 2; grid-row: 1; margin: 0; align-self: end; }
  .woo-canvas #order_review { grid-column: 2; grid-row: 2; align-self: start; }
}
.woo-canvas #order_review_heading { border: 0 !important; padding: 0; }
.woo-canvas #customer_details, .woo-canvas #order_review, .woo-canvas #order_review_heading {
  width: 100% !important; float: none !important;
}
.woo-canvas #customer_details .col-1, .woo-canvas #customer_details .col-2 {
  width: 100% !important; float: none !important; max-width: 720px;
}
.woo-canvas table.shop_table, .woo-canvas table.shop_table th, .woo-canvas table.shop_table td {
  border-left: 0 !important; border-right: 0 !important; border-top: 0 !important;
}
.woo-canvas table.shop_table { border-bottom: 0 !important; border-collapse: collapse; width: 100% !important; }
.woo-canvas #order_review table.shop_table td, .woo-canvas #order_review table.shop_table th { font-size: .88rem; padding: 10px 4px; }
.woo-canvas #order_review {
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--sp-6); box-shadow: var(--shadow-sm);
}
.woo-canvas table.shop_table { border: 0; }
.woo-canvas table.shop_table th, .woo-canvas table.shop_table td {
  border: 0; border-bottom: 1px solid var(--n-100); padding: 12px 8px; font-size: .92rem;
}
.woo-canvas table.shop_table tfoot th { color: var(--text-muted); font-weight: var(--w-semi); }
.woo-canvas .order-total td, .woo-canvas .order-total th { font-weight: var(--w-black); font-size: 1rem; }

/* buttons */
.woo-canvas .button, .woo-canvas button.button, .woo-canvas #place_order {
  background: var(--color-ink); color: var(--text-inverse);
  border: 0; border-radius: var(--r-pill); padding: 15px 26px;
  font-family: var(--font-sans); font-weight: var(--w-bold); font-size: .98rem; cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.woo-canvas .button:hover, .woo-canvas #place_order:hover { background: var(--color-primary-hover); color: var(--text-inverse); }
.woo-canvas #place_order { width: 100%; padding: 17px; font-size: 1.05rem; }

/* RUO attestation + terms rows */
.woo-canvas .optml-ruo-attest, .woo-canvas .woocommerce-terms-and-conditions-wrapper {
  background: var(--restore-wash, #eef4fd); border-radius: var(--r-sm);
  padding: 14px 16px; margin: var(--sp-4) 0; font-size: .88rem; line-height: 1.5;
}
.woo-canvas .optml-ruo-attest label, .woo-canvas .woocommerce-terms-and-conditions-wrapper label { font-weight: var(--w-medium); }
.woo-canvas .optml-ruo-attest input, .woo-canvas .woocommerce-terms-and-conditions-wrapper input { margin-right: 8px; }

/* notices */
.woo-canvas .woocommerce-error, .woo-canvas .woocommerce-message, .woo-canvas .woocommerce-info {
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--n-25);
  padding: 14px 18px; font-size: .9rem;
}
.woo-canvas .woocommerce-error { border-color: #e5b6b1; background: #fdf3f2; }

/* cart page table + totals */
.woo-canvas .cart img { border-radius: var(--r-sm); }
.woo-canvas .cart_totals { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-6); }
.woo-canvas .quantity .qty { width: 74px; padding: 10px; border: 1px solid var(--border); border-radius: var(--r-pill); text-align: center; }
.woo-canvas .coupon .input-text { width: auto; }

/* my-account */
.woo-canvas .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0 0 var(--sp-6); display: flex; flex-wrap: wrap; gap: 8px; }
.woo-canvas .woocommerce-MyAccount-navigation li a {
  display: inline-block; padding: 10px 18px; border: 1px solid var(--border);
  border-radius: var(--r-pill); color: var(--color-ink); text-decoration: none; font-weight: var(--w-semi); font-size: .88rem;
}
.woo-canvas .woocommerce-MyAccount-navigation li.is-active a { background: var(--color-ink); color: var(--text-inverse); border-color: var(--color-ink); }
@media (min-width: 1000px) {
  .woo-canvas .woocommerce-MyAccount-content { max-width: 760px; }
}

/* ============================================================
   Focused checkout (Ghost-style): centered logo, step crumbs,
   no site nav; summary column on soft grey.
   ============================================================ */
.ck-shell { min-height: 100vh; display: flex; flex-direction: column; font-family: var(--font-sans); }
.ck-head { text-align: center; padding: 30px 0 6px; }
.ck-head a { display: inline-block; }
.ck-head img { height: 30px; width: auto; display: inline-block; margin-inline: auto; }
.ck-steps { display: flex; justify-content: center; align-items: center; gap: 10px;
  font-size: .86rem; color: var(--text-muted); margin: 14px 0 10px; }
.ck-steps a { color: var(--restore-dark); text-decoration: none; font-weight: var(--w-semi); }
.ck-steps .current { color: var(--color-ink); font-weight: var(--w-bold); }
.ck-steps .sep { color: var(--n-300); }
.ck-main { flex: 1; width: min(1200px, 100% - 2 * var(--gutter)); margin: 0 auto; padding-bottom: var(--sp-16); }
.ck-foot { display: flex; justify-content: center; gap: 22px; padding: 18px 0 26px;
  border-top: 1px solid var(--n-100); font-size: .8rem; }
.ck-foot a { color: var(--text-muted); text-decoration: none; }
.ck-foot a:hover { color: var(--color-ink); text-decoration: underline; }

/* hide the big page chrome on the focused checkout only */
.page-id-12 .announce, .page-id-12 .site-header, .page-id-12 .site-footer,
.page-id-12 .woo-page-title { display: none !important; }

/* summary column: soft grey rail like the reference */
.page-id-12 #order_review { background: var(--n-50); border: 0; box-shadow: none; }
.page-id-12 .woocommerce h3, .page-id-12 #order_review_heading { font-size: 1.05rem; }
.page-id-12 form.checkout { margin-top: var(--sp-4); }

/* --- SliceWP affiliate forms on canvas pages --- */
.woo-canvas .slicewp-form input[type="text"], .woo-canvas .slicewp-form input[type="email"],
.woo-canvas .slicewp-form input[type="password"], .woo-canvas .slicewp-form input[type="url"],
.woo-canvas .slicewp-form textarea {
  width: 100%; padding: 14px 16px !important; border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important; background: var(--n-25) !important;
  font-family: var(--font-sans) !important; font-size: .95rem !important;
}
.woo-canvas .slicewp-button-primary, .woo-canvas .slicewp-form input[type="submit"] {
  background: var(--color-ink) !important; color: var(--text-inverse) !important;
  border: 0 !important; border-radius: var(--r-pill) !important;
  padding: 15px 26px !important; font-weight: var(--w-bold) !important; cursor: pointer;
}
.woo-canvas .slicewp-notice { border-radius: var(--r-sm); }

/* --- WPForms (contact form) on canvas pages --- */
.woo-canvas .wpforms-container { max-width: 640px; }
.woo-canvas .wpforms-field-label { font-weight: var(--w-semi); font-size: .9rem; color: var(--text-body); margin-bottom: 5px; }
.woo-canvas .wpforms-field input[type="text"], .woo-canvas .wpforms-field input[type="email"],
.woo-canvas .wpforms-field textarea {
  width: 100% !important; padding: 14px 16px !important; border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important; background: var(--n-25) !important;
  font-family: var(--font-sans) !important; font-size: .95rem !important; box-shadow: none !important;
}
.woo-canvas .wpforms-field textarea { min-height: 140px; }
.woo-canvas .wpforms-submit {
  background: var(--color-ink) !important; color: var(--text-inverse) !important;
  border: 0 !important; border-radius: var(--r-pill) !important;
  padding: 15px 30px !important; font-family: var(--font-sans) !important;
  font-weight: var(--w-bold) !important; font-size: 1rem !important; cursor: pointer;
}
.woo-canvas .wpforms-submit:hover { background: var(--color-primary-hover) !important; }
.woo-canvas .wpforms-required-label { color: #b0433b; }
.woo-canvas .wpforms-confirmation-container-full {
  background: var(--restore-wash, #eef4fd); border: 1px solid var(--restore-light);
  border-radius: var(--r-sm); padding: 16px 18px;
}

/* --- Announce bar: continuous horizontal marquee --- */
.announce.is-marquee { overflow: hidden; white-space: nowrap; padding-inline: 0; text-align: left; }
.announce.is-marquee .announce-track { display: inline-flex; will-change: transform; animation: optml-marquee 24s linear infinite; }
.announce.is-marquee .announce-group { flex: 0 0 auto; padding-inline: 2.5rem; }
.announce.is-marquee .announce-item { flex: 0 0 auto; }
.announce.is-marquee .announce-sep { flex: 0 0 auto; padding: 0 2.25rem; opacity: .45; font-weight: 400; }
.announce.is-marquee:hover .announce-track { animation-play-state: paused; }
@keyframes optml-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .announce.is-marquee .announce-track { animation: none; } .announce.is-marquee { text-align: center; } }

/* --- Mobile hero compaction: less scroll before best sellers (phones only) --- */
@media (max-width: 767px) {
  .hero .hero-panel { padding: 22px !important; gap: 18px !important; }
  .hero .stack { gap: 14px; }
  .hero .stack h1, .hero .stack h2 { font-size: 2.1rem !important; line-height: 1.05 !important; letter-spacing: -0.02em; }
  .hero .lead, .hero .stack p { font-size: 0.98rem; line-height: 1.5; }
  .hero-media { max-height: 205px; overflow: hidden; border-radius: var(--r-lg); }
  .hero-media img { width: 100%; height: 205px; object-fit: cover; display: block; }
  /* nudge the following sections up a touch */
  .hero + .container, .hero + section { padding-top: 20px !important; padding-bottom: 8px !important; }
  /* trust strip: 2-col grid instead of a tall single column */
  .trust { display: grid !important; grid-template-columns: 1fr 1fr; gap: 14px 16px; justify-items: start; }
  .trust-item { font-size: 0.82rem; line-height: 1.3; }
  .trust-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* best-sellers header a touch tighter so the carousel surfaces sooner */
  #bestsellers, .section-sm:has(.carousel) { padding-top: 26px !important; }
}

/* ============================================================
   Mobile header icons + affiliate footer column (6 Jul 2026)
   ============================================================ */

/* Search + account icons in the phone header (the nav-desktop instances
   cover ≥1000px). The pages carry both sets; CSS decides which shows. */
.hdr-icon-mobile { display: none; }
@media (max-width: 999px) {
  .hdr-icon-mobile { display: inline-flex; width: 44px; height: 44px; }
  .hdr-icon-mobile svg { width: 20px; height: 20px; }
  .search-btn.hdr-icon-mobile { margin-left: auto; }
  .cart-btn-mobile { margin-left: 0; }
  .site-header .nav { gap: 8px; }
}
@media (max-width: 479px) {
  /* keep five header controls on one row on small phones */
  .site-header .brand img { width: 122px !important; height: 27px !important; }
  .site-header .nav { gap: 6px; }
}

/* Footer grows a fifth column for the affiliate links */
@media (min-width: 720px) {
  .footer-top { grid-template-columns: 1.4fr 1fr 1fr 1fr 1.1fr; }
}

/* --- affiliate hero: clean, un-crammed rhythm on phones (7 Jul 2026) --- */
@media (max-width: 767px) {
  /* pull the hero up under the header (woo-canvas gives sp-10 + the
     section adds sp-4 — far too much dead air on a phone) */
  main.woo-canvas:has(.affiliate-hero) { padding-top: var(--sp-4); }
  .affiliate-hero { padding-top: 0 !important; }
  /* the stack's flex gap wasn't reliably applying, so set the column
     layout + spacing explicitly and beat the inline margins with margins
     of our own */
  .affiliate-hero .stack { display: flex; flex-direction: column; gap: 0; }
  .affiliate-hero .eyebrow { line-height: 1.5; margin: 0 0 var(--sp-3); }
  .affiliate-hero .stack h1 { margin: 0 !important; }
  /* clear separation from the headline + a more open, readable paragraph */
  .affiliate-hero .stack .lead {
    margin: var(--sp-5) 0 0 !important;
    font-size: 1rem; line-height: 1.62;
  }
  /* generous air before the card image */
  .affiliate-hero .grid-2 { gap: var(--sp-8); margin-top: var(--sp-3); }
}

/* --- horizontal-scroll affordance for the comparison table (7 Jul 2026):
   its 3rd column runs off-screen on phones with no cue. JS wraps the table
   in .compare-shell and toggles .can-scroll / .is-end. --- */
.compare-shell { position: relative; }
.compare-fade {
  position: absolute; top: 1px; right: 1px; bottom: 1px; width: 60px;
  pointer-events: none; border-radius: 0 var(--r-lg) var(--r-lg) 0;
  background: linear-gradient(to right, rgba(255,255,255,0), var(--color-paper) 82%);
  opacity: 0; transition: opacity .25s var(--ease);
}
.compare-shell.can-scroll .compare-fade { opacity: 1; }
.compare-shell.is-end .compare-fade { opacity: 0; }
.compare-hint { display: none; }
.compare-shell.can-scroll .compare-hint {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: var(--sp-3); padding: 6px 12px;
  border: 1px solid var(--border); border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: var(--w-semi);
  color: var(--text-muted); letter-spacing: .02em;
  transition: opacity .25s var(--ease);
}
.compare-shell.is-end .compare-hint { opacity: .35; }
.compare-hint svg {
  width: 15px; height: 15px;
  animation: compare-nudge 1.4s var(--ease) infinite;
}
@keyframes compare-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .compare-hint svg { animation: none; } }

/* --- same-day dispatch countdown (2pm cutoff) --- */
.optml-cd-hdr { font-variant-numeric: tabular-nums; white-space: nowrap; }
.optml-cd-pdp {
	margin: 14px 0 0;
	padding: 10px 16px;
	border-radius: 999px;
	background: var(--color-ink, #101010);
	color: #fff;
	font-size: 14px;
	display: inline-block;
	letter-spacing: .01em;
}
.optml-cd-pdp b { font-variant-numeric: tabular-nums; }
.optml-cd-cart { margin: 0 0 18px; }
.mc-dispatch {
	margin: 0 0 10px;
	padding: 9px 12px;
	border-radius: 10px;
	background: #fff4e5;
	color: #8a5300;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
}
.mc-dispatch b { font-variant-numeric: tabular-nums; }

/* --- checkout & notices polish (11 Jul audit fixes) --- */
/* Woo's icon font isn't loaded in the design shell — kill the tofu glyphs */
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before,
ul.woocommerce-error li::before { content: none !important; display: none !important; }
.woocommerce-message, .woocommerce-info, .woocommerce-error,
ul.woocommerce-error li { padding-left: 1.1em !important; }
/* flexed notices swallow the space between text and link */
.woocommerce-info, .woocommerce-message { gap: .35em; }
/* hide notice shells emptied by the pre-launch gateway filter */
.woocommerce-info:empty, .woocommerce-error:empty { display: none !important; }
/* kill sideways wobble from off-canvas drawers / select2 ghost selects
   (overflow-x: clip preserves position:sticky, unlike hidden) */
html, body { overflow-x: clip; }
/* age gate must sit above the cookie banner so its button is tappable */
#optml-age-gate { z-index: 2147483000 !important; }
/* iOS zooms any focused control under 16px — pin checkout fields at 16 */
@media (max-width: 782px) {
	.woocommerce input[type="text"], .woocommerce input[type="email"],
	.woocommerce input[type="tel"], .woocommerce input[type="password"],
	.woocommerce input[type="number"], .woocommerce select, .woocommerce textarea,
	.woocommerce-checkout input, .woocommerce-checkout select,
	.woocommerce-checkout textarea { font-size: 16px !important; }
}