/* =====================================================================
   UX PASS — 24 Sep 2026 (WAKSON). Approved by Taine after the conversion
   audit. Loaded after style.css by inc/ux-pass-2026-09-24.php.
   Revert = delete this file (and the require line in functions.php).
   ===================================================================== */

/* ---------- 1. Header on product pages ----------------------------------
   `body.es-product-page … span { color:#0a0a0a }` (the light product page)
   was also painting the black header: the top bar, "Trade Login" and "Cart"
   were black-on-black on every product page. */
body.es-product-page .es-utility span { color: var(--accent) !important; }
body.es-product-page .es-header .es-icon span { color: inherit !important; }
/* Trade Login is text-only on desktop (Taine). Phones keep the small icon —
   the text is hidden there and the icon is the only way in. */
@media (min-width: 1025px) {
  .es-header .es-account-link svg { display: none !important; }
}

/* ---------- 2. Product page buy box (Mockup A) ---------------------------
   Order: category → title → rating → price + ship badge → Afterpay (once)
   → fitment box → Add to Cart → wallets → trust strip → short description. */
body.es-product-page .summary.entry-summary { display: flex !important; flex-wrap: wrap; align-items: center; column-gap: 14px; }
body.es-product-page .summary.entry-summary > * { flex: 0 0 100%; max-width: 100%; min-width: 0; order: 35; }
body.es-product-page .summary > .woocommerce-breadcrumb { order: 1; }
body.es-product-page .summary > .single-product-category { order: 2; }
body.es-product-page .summary > .product_title { order: 3; }
body.es-product-page .summary > .es-fits { order: 4; }
body.es-product-page .summary > .woocommerce-product-rating { order: 5; }
body.es-product-page .summary > p.price { order: 10; flex: 0 0 auto; }
body.es-product-page .summary > .es-stock-badge { order: 11; flex: 0 1 auto; }
body.es-product-page .summary > .es-bnpl,
body.es-product-page .summary > .es-ap-note { order: 12; }
body.es-product-page .summary > .es-fitbox { order: 20; }
body.es-product-page .summary > form.cart { order: 30; }
body.es-product-page .summary > .wcpay-express-checkout-wrapper { order: 31; }
body.es-product-page .summary > .ppc-button-wrapper { order: 32; }
body.es-product-page .summary > .es-trust-strip { order: 40; }
body.es-product-page .summary > .woocommerce-product-details__short-description { order: 45; }
body.es-product-page .summary > .es-brand-logo { order: 89; }
body.es-product-page .summary > .product_meta { order: 90; }
body.es-product-page .summary > .es-reassure { order: 95; }

/* Tighter title: 2–3 lines instead of 5. */
body.es-product-page .summary > .product_title {
  font-size: clamp(26px, 2.5vw, 38px) !important; line-height: 1.02 !important;
  padding-bottom: 0 !important; border-bottom: 0 !important; margin: 2px 0 8px !important;
}
body.es-product-page .summary > .single-product-category {
  font-family: var(--display); font-style: italic; font-weight: 800; text-transform: uppercase;
  letter-spacing: .12em; font-size: 12px; color: var(--accent) !important; margin: 0 0 2px;
}
body.es-product-page .summary > .single-product-category a { color: inherit !important; }
body.es-product-page .summary > .woocommerce-product-rating { margin: 0 0 10px !important; }
body.es-product-page .summary > p.price { margin: 0 !important; }
body.es-product-page .summary > .es-stock-badge { margin: 0 !important; }
body.es-product-page .summary > .es-bnpl { margin: 8px 0 0 !important; }
body.es-product-page .summary > .es-ap-note { margin: 8px 0 0 !important; }
body.es-product-page .summary > p:empty { display: none !important; }
/* The tagline and the brand logo above the title pushed the price down. The
   tagline stays in the product data; the logo moves down beside the SKU. */
body.es-product-page .summary > .es-product-tagline { display: none !important; }
body.es-product-page .summary > .es-brand-logo { margin: 14px 0 0; }

/* Afterpay once: our line under the price. The Stripe/WooPayments message and
   the second note are duplicates of it. */
body.es-product-page .summary:has(> .es-bnpl) > .StripeElement,
body.es-product-page .summary:has(> .es-ap-note) > .StripeElement,
body.es-product-page .summary:has(> .es-bnpl) > .es-ap-note.es-ap--ok { display: none !important; }

/* Fitment box */
.es-fitbox {
  background: #f3faf6; border: 1px solid #cfe7da; border-left: 3px solid #1f9d5b;
  padding: 10px 14px; margin: 16px 0 16px; font-size: 14px; line-height: 1.45; color: #1d3a2b;
}
.es-fitbox__fits b { color: #0e5a33; }
.es-fitbox__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 3px; font-size: 13px; }
body.es-product-page .es-fitbox__note { color: #35523f !important; }
.es-fitbox__check { color: var(--accent) !important; font-weight: 700; white-space: nowrap; text-decoration: none !important; }
.es-fitbox__check:hover { text-decoration: underline !important; }
#es-fitment { scroll-margin-top: 90px; }

/* Phones: photo first. The name moves back under the gallery (the old
   "title above the photo" header is retired). */
@media (max-width: 600px) {
  .es-m-pdp-head { display: none !important; }
  body.es-product-page .summary .product_title,
  body.es-product-page .summary .single-product-category { display: block !important; }
  body.es-product-page .summary > .product_title { font-size: clamp(22px, 6.2vw, 27px) !important; margin: 4px 0 6px !important; }
  body.es-product-page .summary > .woocommerce-product-rating { margin: 0 0 8px !important; }
  body.es-product-page .summary > .es-fitbox { margin: 10px 0 10px; padding: 8px 12px; }
  /* Pull Add to Cart up into the first screen. */
  body.es-product-page .summary > .woocommerce-product-rating { margin: 0 0 6px !important; line-height: 1.2; min-height: 0; }
  body.es-product-page .summary > .es-stock-badge .sub { display: none !important; }
  body.es-product-page .summary > .es-bnpl { margin: 4px 0 0 !important; font-size: 12px; line-height: 1.35; }
  body.es-product-page .summary > form.cart { margin-top: 0 !important; margin-bottom: 8px !important; padding-top: 12px !important; padding-bottom: 12px !important; }
  body.es-product-page .summary.entry-summary { margin-top: 0 !important; padding-top: 0 !important; }
  div.es-product-page.woocommerce { padding-top: 0 !important; }
  /* Photo edge-to-edge, flush under the header (Mockup A). The product wraps in 40px
     side padding, so the gallery bleeds out by that much. Width goes on the OUTER
     .woocommerce-product-gallery only — never on __wrapper (LOCKED rule). */
  body.es-product-page .woocommerce-product-gallery {
    margin: 0 -40px 8px !important; width: calc(100% + 80px) !important; max-width: none !important; float: none !important;
  }
  body.es-product-page .product .woocommerce-product-gallery .flex-viewport,
  body.es-product-page .product div.images .woocommerce-product-gallery__image img { border-radius: 0 !important; padding: 0 !important; background: transparent !important; }
  body.es-product-page .woocommerce-product-gallery__trigger { top: 12px !important; right: 12px !important; }
  /* Every photo square, so slides are the same height and nothing jumps on swipe. */
  body.es-product-page .product div.images .woocommerce-product-gallery__image img { aspect-ratio: 1 / 1; object-fit: contain; height: auto !important; }
  /* Browser handles vertical scroll natively; the slider only takes sideways drags. */
  body.es-product-page .woocommerce-product-gallery .flex-viewport { touch-action: pan-y; }
  body.es-product-page .woocommerce-product-gallery__wrapper { will-change: transform; }
  /* Thumbnails become dots; swipe changes photo. The active dot is a red pill. */
  body.es-product-page .woocommerce-product-gallery .flex-control-thumbs {
    display: flex !important; justify-content: center; align-items: center; gap: 6px; margin: 10px 0 0 !important; padding: 0 !important;
  }
  body.es-product-page .woocommerce-product-gallery .flex-control-thumbs li {
    width: 7px !important; height: 7px !important; max-width: none; flex: none !important; margin: 0 !important; padding: 0 !important;
    border-radius: 4px; background: #c9c9c9; overflow: hidden; position: relative; transition: width .2s, background .2s;
  }
  body.es-product-page .woocommerce-product-gallery .flex-control-thumbs li:has(img.flex-active) { width: 20px !important; background: var(--accent); }
  /* The invisible thumb image stays as the tap target (an 7px dot with a 24px hit area). */
  body.es-product-page .woocommerce-product-gallery .flex-control-thumbs li img {
    position: absolute; inset: -9px -4px; width: calc(100% + 8px) !important; height: 25px !important; opacity: 0 !important; margin: 0 !important;
  }
}

/* ---------- 3. Homepage hero: shorter, same content ----------------------- */
.es-hero { min-height: 0 !important; }
.es-hero-inner { padding: 64px 40px 60px; }
.es-hero h1 { font-size: clamp(3.5rem, 8vw, 7.5rem); margin: 0 0 26px; }
.es-hero-tag { margin-bottom: 22px; }
.es-hero-stats { margin-bottom: 26px; padding: 16px 0; }
@media (max-width: 600px) {
  .es-hero { align-items: flex-end; }
  .es-hero-inner { padding: 30px 20px 28px !important; }
  .es-hero-tag { font-size: 11px; letter-spacing: .12em; padding: 7px 14px; margin-bottom: 16px; }
  .es-hero h1 { font-size: clamp(2.9rem, 13vw, 4rem); margin: 0 0 18px; }
  .es-hero-stats { margin-bottom: 20px; padding: 12px 0; }
  .es-hero-stat .v { font-size: 30px; }
  .es-hero-cta { flex-wrap: nowrap; gap: 10px; }
  .es-hero-cta > * { flex: 1 1 0; text-align: center; justify-content: center; white-space: nowrap; }
}

/* ---------- 4. Shop filter panel (Browse by Category v2) ------------------ */
/* The theme's global button style (red, skewed, clipped, 16px 30px padding) must not
   reach the filter's own buttons — reset it here, then style each one below. */
.es-sf button, .es-sf-active button, .es-sf-empty button {
  clip-path: none !important; transform: none !important; box-shadow: none !important; min-width: 0 !important;
  height: auto !important; letter-spacing: normal; border-radius: 0; margin: 0;
}
.es-sf-badge { font-style: normal; background: var(--accent); color: #fff; border-radius: 10px; padding: 1px 7px; font: 700 11px/1.4 var(--body); margin-left: 8px; transform: skewX(6deg); }
.es-sf .es-sf-panel {
  margin: 14px auto 0; max-width: 1100px; background: #111113; border: 1px solid #26262a;
  border-left: 3px solid var(--accent); text-align: left;
}
.es-sf-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 22px; border-bottom: 1px solid #222; }
.es-sf-title { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 18px; letter-spacing: .06em; text-transform: uppercase; color: #fff; }
.es-sf .es-sf-x { display: inline-block !important; background: none !important; border: 0 !important; color: #aaa !important; font: 400 30px/1 var(--body) !important; cursor: pointer; padding: 0 4px !important; }
.es-sf .es-sf-x:hover { color: #fff !important; }
.es-sf-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 40px; padding: 20px 22px; }
.es-sf-group[data-group="eng"] { order: 1; }
.es-sf-group[data-group="brand"] { order: 2; }
.es-sf-group[data-group="cat"] { order: 3; grid-column: 1 / -1; }
.es-sf-shelf { order: 4; }
.es-sf-lab { display: flex; align-items: center; gap: 10px; font: 700 11px/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: #cdb88f; margin-bottom: 12px; }
.es-sf-lab::before { content: ""; width: 18px; height: 2px; background: var(--accent); }
.es-sf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.es-sf .es-sf-chip {
  display: inline-flex !important; align-items: center; gap: 8px; background: #18181b !important; border: 1px solid #2e2e33 !important; color: #eee !important;
  font-family: var(--display) !important; font-style: italic; font-weight: 800 !important; font-size: 14px !important; letter-spacing: .05em !important; text-transform: uppercase;
  padding: 9px 12px !important; cursor: pointer; line-height: 1 !important; transition: background .12s, border-color .12s;
}
.es-sf .es-sf-chip:hover:not(:disabled) { border-color: var(--accent) !important; }
.es-sf .es-sf-chip[aria-pressed="true"] { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
.es-sf .es-sf-chip:disabled { opacity: .32; cursor: not-allowed; }
.es-sf .es-sf-chip--link { border-style: dashed !important; }
.es-sf .es-sf-chip--link .es-sf-n { color: #cdb88f; }
.es-sf-chip:focus-visible, .es-sf-apply:focus-visible, .es-sf-clear:focus-visible, .es-sf-pill:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.es-sf-n { font: 600 11px/1 var(--body); font-style: normal; color: #8a8a8f; letter-spacing: 0; }
.es-sf-chip[aria-pressed="true"] .es-sf-n { color: rgba(255,255,255,.8); }
.es-sf-shelf { grid-column: 1 / -1; position: relative; display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 12px 14px; background: #151517; border: 1px solid #26262a; margin: 0; }
.es-sf-shelf input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.es-sf-switch { width: 38px; height: 22px; border-radius: 11px; background: #3a3a3f; position: relative; flex: none; transition: background .15s; }
.es-sf-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.es-sf-shelf input:checked + .es-sf-switch { background: #1f9d5b; }
.es-sf-shelf input:checked + .es-sf-switch::after { transform: translateX(16px); }
.es-sf-shelf input:focus-visible + .es-sf-switch { outline: 2px solid #fff; outline-offset: 2px; }
.es-sf-shelf-txt b { display: block; color: #fff; font-size: 14px; }
.es-sf-shelf-txt small { color: #9a9a9f; font-size: 12px; }
.es-sf-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 22px; border-top: 1px solid #222; }
.es-sf .es-sf-clear { display: inline-block !important; background: none !important; border: 0 !important; color: #bbb !important; text-decoration: underline; cursor: pointer; font: 600 14px var(--body) !important; text-transform: none !important; padding: 8px 0 !important; }
.es-sf .es-sf-apply { display: inline-block !important; background: var(--accent) !important; color: #fff !important; border: 0 !important; padding: 13px 24px !important; font-family: var(--display) !important; font-style: italic; font-weight: 800 !important; font-size: 15px !important; letter-spacing: .08em !important; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
.es-sf-apply b { font-weight: 800; }
.es-sf-active { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px auto 0; max-width: 1100px; padding: 0 16px; }
.es-sf-active[hidden] { display: none; }
.es-sf-active .es-sf-pill { display: inline-block !important; background: #1b1b1e !important; border: 1px solid var(--accent) !important; color: #fff !important; padding: 7px 11px !important; font: 600 13px/1.2 var(--body) !important; text-transform: none !important; cursor: pointer; }
.es-sf-active .es-sf-pill--clear { border-color: #3a3a3f !important; color: #aaa !important; }
ul.products > li.es-sf-hide { display: none !important; }
.es-sf-empty { text-align: center; color: #bbb; padding: 30px 16px; }
.es-sf-empty[hidden] { display: none; }
.es-sf-empty button { display: inline !important; background: none !important; border: 0 !important; color: #fff !important; text-decoration: underline; cursor: pointer; font: inherit !important; padding: 0 !important; text-transform: none !important; }
.es-sf-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.62); z-index: 10000; }
.es-sf-backdrop[hidden] { display: none; }
@media (max-width: 700px) {
  .es-sf[open] .es-sf-panel {
    position: fixed; left: 0; right: 0; bottom: 0; max-height: 86vh; margin: 0; z-index: 10001;
    display: flex; flex-direction: column; border-left: 0; border-top: 3px solid var(--accent); border-radius: 14px 14px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .es-sf-head { padding: 14px 16px; }
  .es-sf-body { grid-template-columns: 1fr; overflow-y: auto; gap: 18px; padding: 16px; -webkit-overflow-scrolling: touch; flex: 1 1 auto; min-height: 0; }
  .es-sf-head, .es-sf-foot { flex: none; }
  .es-sf[open] .es-sf-panel { max-height: 86dvh; }
  .es-sf-foot { padding: 12px 16px; }
  .es-sf-apply { flex: 1; }
  html.es-sf-lock body { overflow: hidden; }
}

/* ---------- 5. Cart: one checkout button ----------------------------------
   Keep the full-width red button (#es-cart-checkout); drop the black pill in the
   red plate. Only once ours exists, so the cart is never left without a button. */
.wp-block-woocommerce-cart:has(#es-cart-checkout) .wp-block-woocommerce-proceed-to-checkout-block { display: none !important; }

/* Trade prompt, now one small line under the checkout / place-order button. */
.es-tb-mini { text-align: center; font-size: 13px; line-height: 1.5; color: #9a9a9f !important; margin: 14px 0 0; order: 99; grid-column: 1 / -1; }
.es-tb-mini a { color: #fff !important; text-decoration: underline !important; }

/* ---------- 6. Phones: back-to-top + drawer edge ---------------------------
   The back-to-top button was parked 130px from the top, over the content, to
   dodge the sticky buy bar. Bottom-right instead, lifted above the bar when it shows. */
@media (max-width: 600px) {
  #ast-scroll-top.ast-scroll-to-top-right { top: auto !important; bottom: 18px !important; right: 14px !important; width: 42px !important; height: 42px !important; }
  body:has(#es-sticky-buybar.visible) #ast-scroll-top.ast-scroll-to-top-right { bottom: 96px !important; }
}
/* The closed menu drawer sits off-screen right, but its shadow bled a grey strip
   down the right edge of every page. Shadow only when open. */
.es-drawer[aria-hidden="true"] { box-shadow: none !important; }