@charset "UTF-8";
/*
Theme Name: Ways2Well Theme

WooCommerce styles override
*/
/**
 * Design tokens as CSS custom properties.
 *
 * Pulled from the REAL current site (ways2well-website/src/assets/styles/
 * _variablesV2.scss + _buttons.scss + component styles) — not placeholder
 * values. Swap values here if/when the new design (still in progress,
 * separate from this) lands; components should never hardcode colors
 * directly so that swap doesn't require touching page-templates/.
 */
@font-face {
  font-family: "Roboto Flex";
  src: url("assets/fonts/roboto-flex.woff2") format("woff2-variations"), url("assets/fonts/roboto-flex.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: optional;
}
/**
 * "New brand" display face — see docs/new-brand-guidelines.md ("Display ·
 * The Voice"). Licensed (Monotype/MyFonts, GCarturm — the guidelines doc's
 * "GC arturm Demo Medium" was a Figma-only demo cut; this is the real
 * licensed family, 9 static weights, not a variable font).
 *
 * PROPRIETARY — not covered by this theme's GPL. Licensed under Monotype's
 * "Font Software For Web Content" EULA: self-hosting these woff2 files is the
 * granted right, but they must not be modified (no subsetting or
 * re-conversion), redistributed, or shipped in anything public. Page views are
 * metered and the licence is scoped to one domain. See
 * assets/fonts/LICENSES.md and docs/font-licensing.md before touching these
 * files or the repository's visibility.
 *
 * font-display: swap, NOT optional. These nine faces were on `optional`, and
 * it meant the display font simply did not render on a cold cache: measured
 * via CDP CSS.getPlatformFontsForNode (the only check that reports the font
 * actually used — computed styles and document.fonts both report a face as
 * fine either way, see @styles/custom/_fonts.scss's header), 52 elements on
 * /care-plan/ that declare this family rendered 1340 glyphs of Inter and
 * zero of Arturm on first load, then the full Arturm once cached. That is
 * every first-time visitor losing the brand's display face. `optional` gives
 * roughly a 100ms window and, on a miss, sticks with the fallback for the
 * whole page load — the same trap _fonts.scss already documents for Roboto
 * Flex, and worse here because nine separate files each race their own
 * window.
 */
@font-face {
  font-family: "GC Arturm";
  src: url("assets/fonts/gc-arturm/GCarturm-Thin.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GC Arturm";
  src: url("assets/fonts/gc-arturm/GCarturm-ExtraLight.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GC Arturm";
  src: url("assets/fonts/gc-arturm/GCarturm-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GC Arturm";
  src: url("assets/fonts/gc-arturm/GCarturm-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GC Arturm";
  src: url("assets/fonts/gc-arturm/GCarturm-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GC Arturm";
  src: url("assets/fonts/gc-arturm/GCarturm-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GC Arturm";
  src: url("assets/fonts/gc-arturm/GCarturm-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GC Arturm";
  src: url("assets/fonts/gc-arturm/GCarturm-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GC Arturm";
  src: url("assets/fonts/gc-arturm/GCarturm-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
/**
 * "New brand" (dark) type system — see docs/new-brand-guidelines.md.
 * Inter and IBM Plex Mono self-hosted (latin subset only, matching the
 * Roboto Flex pattern above) instead of loading from Google Fonts at
 * request time.
 */
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter.woff2") format("woff2-variations"), url("assets/fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/ibm-plex-mono-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
:root {
  --w2w-color-brand: #2e8bff;
  --w2w-color-navy: #26355e;
  --w2w-color-near-black: #121418;
  --w2w-color-dark: #181b20;
  --w2w-color-beige: #eceef3;
  --w2w-color-grey-10: #dfd8cc;
  --w2w-color-muted: #4f5058;
  --w2w-color-border: #dfd8cc;
  --w2w-color-light: #ffffff;
  --w2w-color-bg: #ffffff;
  --w2w-color-bg-alt: #eceef3;
  --w2w-color-success: #309261;
  --w2w-color-error: #e55263;
  /* legacy aliases used by early scaffolding — same values as above */
  --w2w-color-primary: var(--w2w-color-brand);
  --w2w-color-primary-dark: var(--w2w-color-navy);
  --w2w-font-body: "Roboto Flex", "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --w2w-font-heading: var(--w2w-font-body);
  --w2w-space-xs: 8px;
  --w2w-space-sm: 16px;
  --w2w-space-md: 24px;
  --w2w-space-lg: 40px;
  --w2w-space-xl: 80px;
  --w2w-radius: 8px;
  --w2w-radius-pill: 40px;
  --w2w-container-width: 1200px;
  /**
   * "New brand" (dark) tokens — Tier 1-4 palette + type system from
   * docs/new-brand-guidelines.md (Figma "New website" file). Additive only:
   * the --w2w-color-* tokens above are the current LIVE (light) theme and
   * are untouched by this. Use --w2w-nb-* on pages built against the new
   * dark system (e.g. /care-plan/). Site-wide dark-theme cutover is a
   * separate, still-undecided question.
   */
  --w2w-nb-bg: #121418;
  --w2w-nb-brand: #2e8bff;
  /*
   * interactive/primary-hover and -pressed, read off the "Button · W2W"
   * component (2088:5076), not chosen here.
   *
   * `--w2w-nb-brand-hover` was already being used by three files —
   * _longevitylab-sections.scss, _longevitylab-package-sections.scss and
   * houstonclinic-iv-therapy.scss — and declared by none, so every rule
   * naming it was invalid and dropped. That silently undid the page
   * checkup's "всі сині кнопки мають мати один ховер": the shared rule
   * compiled, shipped, and then did nothing, which looks identical to a
   * button that was never given a hover at all.
   */
  --w2w-nb-brand-hover: #4fa3ff;
  --w2w-nb-brand-pressed: #1f6ed6;
  --w2w-nb-text: #eceef3;
  --w2w-nb-surface-raised: #181b20;
  --w2w-nb-surface-teal: #0b1f28;
  --w2w-nb-warm-sand: #c99a5b;
  --w2w-nb-warm-clay: #a78656;
  --w2w-nb-warm-rust: #c2451f;
  --w2w-nb-warm-amber: #e8902a;
  --w2w-nb-cool-teal: #3d91a2;
  --w2w-nb-cool-cyan: #78c1d4;
  --w2w-nb-text-secondary: #a8aeb8;
  --w2w-nb-text-tertiary: #6e747e;
  /* text/lead — the Figma variable the shop kit's ghost button and its lead
   * paragraphs use. It was referenced by the shop flow before it was declared
   * anywhere, so `color: var(--w2w-nb-text-lead)` resolved to an invalid value
   * and the property was dropped: the order page's "View" label inherited its
   * cell instead of taking this. */
  --w2w-nb-text-lead: #c3d2d8;
  /* surface/backdrop — the fill every form control in the new design sits on,
   * one step below surface/sky so a field reads as a well rather than a card.
   * Same story as text/lead: used before it existed here. */
  --w2w-nb-surface-backdrop: #050b0e;
  --w2w-nb-divider: #252a31;
  --w2w-nb-border: #2f3540;
  /* text/lead — body copy one step brighter than text/secondary, for a lead
   * paragraph or a control's own label. Used by the shop's filter chips and
   * sort control, which referenced it before it existed here. */
  --w2w-nb-text-lead: #c3d2d8;
  /* surface/backdrop — the fill a control sits on, one step below
   * surface/sky so a field reads as a well rather than a card. Same story:
   * referenced by the shop sheet before it was declared. */
  --w2w-nb-surface-backdrop: #050b0e;
  /* text/on-teal-tertiary — the muted grey the design uses for quiet copy
   * that sits on surface/teal rather than on a card. text/tertiary (#6e747e)
   * is tuned for the darker card fill and reads as nearly invisible on the
   * teal band. From the shop frames (3630:3867 / 3646:4156). */
  --w2w-nb-text-on-teal: #8fa3ac;
  /* glass/fill and glass/fill-raised — the two card tints. The first is a
   * resting surface, the second is what a control ON that surface uses (a
   * chip, the add button), so the two never read as the same plane. Written
   * as rgba rather than 8-digit hex because these are the exact values the
   * frames name; #eceef30b is 0.043, not 0.05, and the difference was already
   * visible where the two spellings met. */
  --w2w-nb-glass-fill: rgba(236, 238, 243, 0.05);
  --w2w-nb-glass-fill-raised: rgba(236, 238, 243, 0.07);
  --w2w-nb-glass-stroke: rgba(236, 238, 243, 0.1);
  /* Real licensed Arturm (2026-08-12) — the rounded-sans stack that follows
   * stays as a fallback for the rare case the woff2 fails to load, not as
   * the intended look. */
  --w2w-nb-font-display: "GC Arturm", ui-rounded, "SF Pro Rounded", "Segoe UI Rounded", "Nunito", "Quicksand", var(--w2w-nb-font-body);
  --w2w-nb-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --w2w-nb-font-data: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

/**
 * Scrollbar styling for the dark brand system.
 *
 * A partial rather than a rule so both of the nav's scroll regions share one
 * definition — the desktop catch-all panel and the mobile full-screen menu are
 * in separate sheets (sass/pages/header/_bar.scss, _bar-mobile.scss) and would
 * otherwise each grow their own copy. Imported the same way new-home.scss
 * imports abstracts/horizon-divider.
 *
 * The theme's only existing styled scrollbar is `.w2w-popup-body` in
 * components/w2w/_popup-manager.scss, and it is not reusable here: #f1f1f1
 * track on #ccc thumb is a light-theme bar, which on rgb(14, 16, 19) reads as
 * a bright white stripe down the panel edge.
 *
 * Standard properties first, legacy pseudo-elements only as a fallback, and
 * deliberately not both at once: Chrome ignores `::-webkit-scrollbar-*` on any
 * element that also sets `scrollbar-color`, so declaring the pair unguarded
 * means the webkit block is dead code in every current browser while still
 * looking authoritative. @supports splits them so exactly one applies —
 * standard for Firefox / Chrome 121+ / Safari 18.4+, webkit for older Safari
 * and Chrome.
 *
 * @param {Color}  $thumb       Resting thumb colour.
 * @param {Color}  $thumb-hover Hover colour. Fallback path only — the standard
 *                              `scrollbar-color` has no hover state, so modern
 *                              browsers keep the resting colour throughout.
 * @param {Color}  $track       Gutter fill. Defaults to the panel surface, see
 *                              the note on the declaration below.
 * @param {Length} $width       Gutter width, fallback path only; `thin` is the
 *                              only width the standard property offers.
 */
/**
 * Shop tables
 */
table.shop_table_responsive thead {
  display: none;
}
table.shop_table_responsive tbody th {
  display: none;
}
table.shop_table_responsive tr td {
  display: block;
  text-align: right;
  clear: both;
}
table.shop_table_responsive tr td::before {
  content: attr(data-title) ": ";
  float: left;
}
table.shop_table_responsive tr td.product-remove a {
  text-align: left;
}
table.shop_table_responsive tr td.product-remove::before {
  display: none;
}
table.shop_table_responsive tr td.actions::before, table.shop_table_responsive tr td.download-actions::before {
  display: none;
}
table.shop_table_responsive tr td.download-actions .button {
  display: block;
  text-align: center;
}

@media screen and (min-width: 48em) {
  table.shop_table_responsive thead {
    display: table-header-group;
  }
  table.shop_table_responsive tbody th {
    display: table-cell;
  }
  table.shop_table_responsive tr th,
  table.shop_table_responsive tr td {
    text-align: left;
  }
  table.shop_table_responsive tr td {
    display: table-cell;
  }
  table.shop_table_responsive tr td::before {
    display: none;
  }
}
.w2w-order-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left;
}
.w2w-order-item__thumbnail {
  flex: 0 0 auto;
}
.w2w-order-item__thumbnail img {
  display: block;
  width: 44px;
  height: 56px;
  border-radius: 6px;
  object-fit: contain;
}

/**
 * Products
 */
ul.products {
  margin: 0;
  padding: 0;
}
ul.products li.product {
  list-style: none;
  position: relative;
  margin-bottom: 2em;
}
ul.products li.product img {
  display: block;
}
ul.products li.product .button {
  display: block;
}

@media screen and (min-width: 48em) {
  ul.products li.product {
    width: 30.7966666667%;
    float: left;
    margin-right: 3.8%;
  }
  ul.products li.product.first {
    clear: both;
  }
  ul.products li.product.last {
    margin-right: 0;
  }
  ul.products.columns-1 li.product {
    float: none;
    width: 100%;
  }
  ul.products.columns-2 li.product {
    width: 48.1%;
  }
  ul.products.columns-3 li.product {
    width: 30.7966666667%;
  }
  ul.products.columns-4 li.product {
    width: 22.15%;
  }
  ul.products.columns-5 li.product {
    width: 16.96%;
  }
  ul.products.columns-6 li.product {
    width: 13.4933333333%;
  }
}
/**
 * Single product
 */
.single-product div.product {
  position: relative;
}
.single-product div.product .woocommerce-product-gallery {
  position: relative;
  float: left;
}
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
  position: absolute;
  top: 2em;
  right: 1em;
  display: block;
  z-index: 99;
}
.single-product div.product .woocommerce-product-gallery .flex-viewport {
  margin-bottom: 1em;
}
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs {
  margin: 0;
  padding: 0;
}
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li {
  list-style: none;
  cursor: pointer;
  float: left;
}
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img {
  opacity: 0.5;
}
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
  opacity: 1;
}
.single-product div.product .woocommerce-product-gallery .flex-control-thumbs li:hover img {
  opacity: 1;
}
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-2 .flex-control-thumbs li {
  width: 48.1%;
}
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-2 .flex-control-thumbs li:nth-child(2n) {
  margin-right: 0;
}
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-2 .flex-control-thumbs li:nth-child(2n+1) {
  clear: both;
}
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-3 .flex-control-thumbs li {
  width: 30.7966666667%;
}
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-3 .flex-control-thumbs li:nth-child(3n) {
  margin-right: 0;
}
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-3 .flex-control-thumbs li:nth-child(3n+1) {
  clear: both;
}
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li {
  width: 22.15%;
}
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(4n) {
  margin-right: 0;
}
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-4 .flex-control-thumbs li:nth-child(4n+1) {
  clear: both;
}
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li {
  width: 16.96%;
}
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li:nth-child(5n) {
  margin-right: 0;
}
.single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery--columns-5 .flex-control-thumbs li:nth-child(5n+1) {
  clear: both;
}

.stock:empty::before {
  display: none;
}
.stock.in-stock {
  color: #0f834d;
}
.stock.out-of-stock {
  color: #e2401c;
}

/**
 * Checkout
 */
/**
 * WooCommerce checkout — the parts that apply to EVERY WooCommerce page.
 *
 * The checkout page's own design lives in sass/pages/shop/_checkout-live.scss,
 * which ships in css/pages/shop-flow.css and loads only on the cart, checkout
 * and order pages. What used to be here — the two-column flex layout, the light
 * #f7f7f7 order-review panel and the dark text that panel needed, the field
 * background fills, the 48px review thumbnail — was written before the design
 * system existed ("a functional placeholder, not a deliberate choice", as
 * inc/checkout.php put it) and is replaced by that file rather than duplicated
 * here. Leaving it in place would have meant two files describing the same
 * elements with different values.
 *
 * What stays: rules that are not specific to the checkout page's layout — link
 * colour inside the checkout form, the always-visible field description
 * (WooCommerce hides it as a tooltip by default), and the shared content width.
 */
@media screen and (min-width: 768px) {
  .col2-set .form-row-first {
    float: left;
    margin-right: 3.8%;
  }
  .col2-set .form-row-last {
    float: right;
    margin-right: 0;
  }
  .col2-set .form-row-first,
  .col2-set .form-row-last {
    width: 48.1%;
  }
}
/**
 * Ported from the old shop's woodmart-child/style.css "Checkout Page" /
 * "Checkout and Cart" / "Checkout Review Order" sections. Woodmart-specific
 * rules (.wd-checkout-remove-btn, --wd-form-brd-color) dropped since there's
 * no Woodmart markup here to target. Colors are literal, not variables — see
 * _myaccount.scss's header comment for why.
 */
form.woocommerce-checkout a:not(.button) {
  color: #2e8bff;
  text-decoration: underline;
}

form.woocommerce-checkout .woocommerce-error a {
  color: #ffffff;
}

.woocommerce-checkout h3,
.woocommerce-billing-fields h3 {
  color: #ffffff;
}

.woocommerce-checkout .woocommerce-form-row label {
  color: #f3f4f7;
}

.woocommerce form .form-row .woocommerce-input-wrapper .description {
  display: block !important;
  position: static !important;
  background: transparent !important;
  color: #f3f4f7 !important;
  padding: 0 !important;
  margin: 6px 0 0 !important;
  border-radius: 0 !important;
  font-size: 13px;
  font-style: italic;
}
.woocommerce form .form-row .woocommerce-input-wrapper .description a {
  color: #2e8bff;
}

.woocommerce-page .site-main {
  max-width: 1620px;
  padding: 20px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/**
 * My Account
 */
/**
 * My Account — retired.
 *
 * This file used to carry four rules ported from the old shop's
 * woodmart-child/style.css: a 16/24 pill with a 100px radius on every account
 * navigation link, a translucent cream fill on the active one, and a notice
 * override. They were the only styling these pages had, and they described a
 * design this site no longer uses — the pill read as a stray dark blob behind
 * whichever item you were on.
 *
 * The account pages have their own design layer now, built on the new system:
 * sass/pages/account.scss, enqueued by inc/account-assets.php. Nothing here
 * would win against it, and a second opinion about the same markup is worse
 * than none — so this file is deliberately empty rather than deleted, since
 * sass/woocommerce.scss imports it by name.
 */
/**
 * General WooCommerce components
 */
/*
 * The starter theme's `.site-header-cart` hover mini-cart used to be styled
 * here, and again inside the 48em media query at the end of this file. Both are
 * gone: header.php never rendered that markup, so the rules dressed a hover
 * panel that could not exist, while reading like the site had one.
 *
 * The real cart panel is sass/plugins/woocommerce/_cart-drawer.scss.
 */
/**
 * Star rating
 */
.star-rating {
  overflow: hidden;
  position: relative;
  height: 1.618em;
  line-height: 1.618;
  width: 5.3em;
  font-family: star;
  font-weight: 400;
}
.star-rating::before {
  content: "SSSSS";
  opacity: 0.25;
  float: left;
  top: 0;
  left: 0;
  position: absolute;
}
.star-rating span {
  overflow: hidden;
  float: left;
  top: 0;
  left: 0;
  position: absolute;
  padding-top: 1.5em;
}
.star-rating span::before {
  content: "SSSSS";
  top: 0;
  position: absolute;
  left: 0;
  color: var(--w2w-nb-brand, #2e8bff);
}

p.stars a {
  position: relative;
  height: 1em;
  width: 1em;
  text-indent: -999em;
  display: inline-block;
  text-decoration: none;
  margin-right: 1px;
  font-weight: 400;
}
p.stars a::before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 1em;
  height: 1em;
  line-height: 1;
  font-family: star;
  content: "S";
  color: #404040;
  text-indent: 0;
  opacity: 0.25;
}
p.stars a:hover ~ a::before {
  content: "S";
  color: #404040;
  opacity: 0.25;
}
p.stars:hover a::before {
  content: "S";
  color: var(--w2w-nb-brand, #2e8bff);
  opacity: 1;
}
p.stars.selected a.active::before {
  content: "S";
  color: var(--w2w-nb-brand, #2e8bff);
  opacity: 1;
}
p.stars.selected a.active ~ a::before {
  content: "S";
  color: #404040;
  opacity: 0.25;
}
p.stars.selected a:not(.active)::before {
  content: "S";
  color: var(--w2w-nb-brand, #2e8bff);
  opacity: 1;
}

/**
 * Tabs
 */
.woocommerce-tabs ul.tabs {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}
.woocommerce-tabs ul.tabs li {
  display: block;
  margin: 0;
  position: relative;
}
.woocommerce-tabs ul.tabs li a {
  padding: 1em 0;
  display: block;
}
.woocommerce-tabs .panel h2:first-of-type {
  margin-bottom: 1em;
}

/**
 * Password strength meter
 */
.woocommerce-password-strength {
  text-align: right;
}
.woocommerce-password-strength.strong {
  color: #0f834d;
}
.woocommerce-password-strength.short {
  color: #e2401c;
}
.woocommerce-password-strength.bad {
  color: #e2401c;
}
.woocommerce-password-strength.good {
  color: #3d9cd2;
}

/**
 * Forms
 */
.form-row.woocommerce-validated input.input-text {
  box-shadow: inset 2px 0 0 #0f834d;
}
.form-row.woocommerce-invalid input.input-text {
  box-shadow: inset 2px 0 0 #e2401c;
}

.required {
  color: #f00;
}

/**
 * Notices
 */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
  background-color: #0f834d;
  clear: both;
}

.woocommerce-info,
.woocommerce-noreviews,
p.no-comments {
  background-color: #3d9cd2;
}

.woocommerce-error {
  background-color: #e2401c;
}

.demo_store {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 0;
  padding: 1em;
  background-color: #3d9cd2;
  z-index: 9999;
}

/**
 * Sale prices
 *
 * WooCommerce renders a discounted price as `<del>old</del> <ins>new</ins>`,
 * and the starter theme this one grew out of styles `ins` the way WordPress's
 * own default themes do — `mark, ins { background: #fff9c0 }`, in
 * sass/base/typography/_copy.scss. That is a highlighter for inserted prose.
 * On a sale price it painted a yellow block behind the amount, and on the dark
 * brand the light text inside it came out yellow-on-yellow and effectively
 * unreadable — reported from staging on /shop/.
 *
 * The `ins` rule in sass/pages/shop-archive.scss removed the underline but not
 * the fill, and it only covered the archive: the same markup renders on single
 * products, related products, upsells, cart lines, the cart drawer and
 * variation prices. Fixed once, here, for every context a price appears in.
 *
 * Scoped to price containers rather than resetting `ins` globally, because a
 * genuine `<ins>` in editorial content still wants the highlight it has always
 * had. Five selectors and not one, because `get_price_html()` returns the
 * `<del>`/`<ins>` pair on its own — the wrapper is whatever the calling
 * template chose, and this theme has four of its own besides WooCommerce's
 * `.price`: the shop archive card (w2w-core's shop-archive/ad-cards.php and
 * ajax.php), the recommendations card and the single-product page. Any new
 * price container needs adding here.
 */
.price ins,
.woocommerce-variation-price ins,
.w2w-shop-archive__product-price ins,
.w2w-suggested__product-price ins,
.w2w-product__price ins {
  background: none;
  color: inherit;
  text-decoration: none;
}

/**
 * WooCommerce widgets
 */
/**
 * WooCommerce Price Filter
 */
.widget_price_filter .price_slider {
  margin-bottom: 1.5em;
}
.widget_price_filter .price_slider_amount {
  text-align: right;
  line-height: 2.4;
}
.widget_price_filter .price_slider_amount .button {
  float: left;
}
.widget_price_filter .ui-slider {
  position: relative;
  text-align: left;
}
.widget_price_filter .ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
  width: 1em;
  height: 1em;
  cursor: ew-resize;
  outline: none;
  background: var(--w2w-nb-brand, #2e8bff);
  box-sizing: border-box;
  margin-top: -0.25em;
  opacity: 1;
}
.widget_price_filter .ui-slider .ui-slider-handle:last-child {
  margin-left: -1em;
}
.widget_price_filter .ui-slider .ui-slider-handle:hover, .widget_price_filter .ui-slider .ui-slider-handle.ui-state-active {
  box-shadow: 0 0 0 0.25em rgba(0, 0, 0, 0.1);
}
.widget_price_filter .ui-slider .ui-slider-range {
  position: absolute;
  z-index: 1;
  display: block;
  border: 0;
  background: var(--w2w-nb-brand, #2e8bff);
}
.widget_price_filter .price_slider_wrapper .ui-widget-content {
  background: rgba(0, 0, 0, 0.1);
}
.widget_price_filter .ui-slider-horizontal {
  height: 0.5em;
}
.widget_price_filter .ui-slider-horizontal .ui-slider-range {
  height: 100%;
}

/**
 * WooCommerce notices — new design system.
 *
 * _components.scss carries the starter theme's own notice rules, which paint
 * `$woocommerce__color-success` / `-info` / `-error` as solid fills. That is
 * where the flat green "…has been added to your cart" banner comes from: a
 * bright block with a white VIEW CART button, on a page that is otherwise dark
 * glass on surface/sky.
 *
 * Notices are site-wide — cart, checkout, my-account, shop and the product page
 * all print them — so this belongs here rather than in one page's stylesheet.
 * Imported last from woocommerce.scss so it wins over the rules above without
 * having to unpick them.
 *
 * The shape follows the system's cards: glass fill, 1px stroke, 14px radius,
 * body copy in text/lead. Only the stroke and the icon carry the type, which is
 * how the rest of the new design distinguishes states — a coloured edge rather
 * than a coloured slab.
 */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 0 0 24px;
  padding: 18px 20px;
  background-color: rgba(236, 238, 243, 0.05);
  border: 1px solid rgba(236, 238, 243, 0.1);
  border-radius: 14px;
  color: #c3d2d8;
  font-family: var(--w2w-nb-font-body);
  font-size: 15px;
  line-height: 1.55;
  list-style: none;
  border-top-width: 1px;
  box-shadow: none;
}
.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a,
.woocommerce-noreviews a,
p.no-comments a {
  color: var(--w2w-nb-brand, #2e8bff);
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before,
.woocommerce-noreviews::before,
p.no-comments::before {
  position: static;
  margin: 0;
  font-size: 15px;
  line-height: 1;
}

.woocommerce-message {
  border-color: rgba(61, 145, 162, 0.55);
}
.woocommerce-message::before {
  color: var(--w2w-nb-cool-teal, #3d91a2);
}

.woocommerce-info,
.woocommerce-noreviews,
p.no-comments {
  border-color: rgba(46, 139, 255, 0.5);
}
.woocommerce-info::before,
.woocommerce-noreviews::before,
p.no-comments::before {
  color: var(--w2w-nb-brand, #2e8bff);
}

.woocommerce-error {
  border-color: rgba(240, 84, 84, 0.55);
  color: #eceef3;
}
.woocommerce-error::before {
  color: #f05454;
}
.woocommerce-error li {
  margin: 0;
  list-style: none;
}

/**
 * The action inside a notice ("View cart", "View order") is the site-wide
 * secondary button — it was WooCommerce's own grey block in caps.
 *
 * `margin-left: auto` keeps it at the far end of the row, which is where the
 * default float-based rule put it before this made the notice a flex row.
 */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button,
.woocommerce-message a.button.wc-forward,
.woocommerce-info a.button.wc-forward {
  order: 2;
  margin-left: auto;
  float: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 24px;
  background: rgba(236, 238, 243, 0.07);
  border: 1px solid rgba(236, 238, 243, 0.1);
  border-radius: 40px;
  color: var(--w2w-nb-text, #eceef3);
  font-family: var(--w2w-nb-font-display);
  font-variation-settings: normal;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.8px;
  text-transform: none;
  text-decoration: none;
  transition: background-color 0.14s ease-out, border-color 0.14s ease-out;
}
.woocommerce-message .button:hover, .woocommerce-message .button:focus,
.woocommerce-info .button:hover,
.woocommerce-info .button:focus,
.woocommerce-error .button:hover,
.woocommerce-error .button:focus,
.woocommerce-message a.button.wc-forward:hover,
.woocommerce-message a.button.wc-forward:focus,
.woocommerce-info a.button.wc-forward:hover,
.woocommerce-info a.button.wc-forward:focus {
  background: rgba(236, 238, 243, 0.12);
  border-color: rgba(236, 238, 243, 0.18);
  color: var(--w2w-nb-text, #eceef3);
}

.woocommerce-message > :not(.button),
.woocommerce-info > :not(.button) {
  order: 1;
}

/**
 * Cart drawer — new design system.
 *
 * Same vocabulary as the checkout flow and the PDP: surface/sky panel, glass
 * rows, the site-wide pill buttons, mono for figures. Nothing here is bespoke
 * to the cart; it is the same tokens applied to WooCommerce's mini-cart markup.
 *
 * Structure comes from core (`woocommerce/cart/mini-cart.php`):
 *   ul.woocommerce-mini-cart > li.woocommerce-mini-cart-item
 *     a.remove, a (thumb + name), .quantity
 *   p.woocommerce-mini-cart__total
 *   p.woocommerce-mini-cart__buttons > a.button (View cart, Checkout)
 *   p.woocommerce-mini-cart__empty-message
 */
.w2w-cart-drawer {
  position: fixed;
  inset: 0;
  z-index: 100000;
}
.w2w-cart-drawer__overlay {
  position: absolute;
  inset: 0;
  background: rgba(5, 11, 14, 0.72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.24s ease;
}
.w2w-cart-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 420px;
  background: #0b1f28;
  border-left: 1px solid rgba(236, 238, 243, 0.1);
  transform: translateX(100%);
  transition: transform 0.24s ease;
  outline: none;
}
.w2w-cart-drawer.is-open .w2w-cart-drawer__overlay {
  opacity: 1;
}
.w2w-cart-drawer.is-open .w2w-cart-drawer__panel {
  transform: translateX(0);
}
.w2w-cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  border-bottom: 1px solid rgba(236, 238, 243, 0.07);
}
.w2w-cart-drawer__title {
  margin: 0;
  font-family: var(--w2w-nb-font-display);
  font-variation-settings: normal;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--w2w-nb-text, #eceef3);
}
.w2w-cart-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
  background: rgba(236, 238, 243, 0.05);
  border: 1px solid rgba(236, 238, 243, 0.1);
  border-radius: 999px;
  color: #c3d2d8;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.14s ease-out, color 0.14s ease-out;
}
.w2w-cart-drawer__close:hover {
  border-color: rgba(236, 238, 243, 0.3);
  color: var(--w2w-nb-text, #eceef3);
}
.w2w-cart-drawer__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 24px 24px;
  /*
   * The scrollbar is part of the panel, so it gets the panel's palette
   * rather than the OS default light track. `scrollbar-color` covers
   * Firefox; the ::-webkit- rules cover Chrome, Edge and Safari. Both are
   * stated because neither alone reaches every browser.
   */
  scrollbar-width: thin;
  scrollbar-color: rgba(236, 238, 243, 0.22) transparent;
}
.w2w-cart-drawer__body::-webkit-scrollbar {
  width: 10px;
}
.w2w-cart-drawer__body::-webkit-scrollbar-track {
  background: transparent;
}
.w2w-cart-drawer__body::-webkit-scrollbar-thumb {
  background-color: rgba(236, 238, 243, 0.18);
  background-clip: padding-box;
  border: 3px solid transparent;
  border-radius: 999px;
}
.w2w-cart-drawer__body::-webkit-scrollbar-thumb:hover {
  background-color: rgba(236, 238, 243, 0.32);
}
.w2w-cart-drawer .woocommerce-mini-cart {
  margin: 0;
  padding: 0;
  list-style: none;
}
.w2w-cart-drawer {
  /*
   * Row layout follows core's actual markup, which is not what it looks like:
   * the thumbnail and the product NAME live inside the same <a>, with the
   * price/quantity as a sibling <span> after it.
   *
   *   <a class="remove">x</a>
   *   <a href="..."><img> DHEA 25</a>
   *   <span class="quantity">1 x $23.40 every 60 days</span>
   *
   * So the flex row is that <a>, not the <li>. Making the <li> the row (and
   * trying to reorder the image inside it) put the name, the image and the
   * price in three separate columns and stretched the row to the image's
   * intrinsic height.
   */
}
.w2w-cart-drawer .woocommerce-mini-cart-item {
  position: relative;
  display: block;
  margin: 0;
  padding: 18px;
  background: rgba(236, 238, 243, 0.05);
  border: 1px solid rgba(236, 238, 243, 0.1);
  border-radius: 14px;
  font-family: var(--w2w-nb-font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--w2w-nb-text, #eceef3);
}
.w2w-cart-drawer .woocommerce-mini-cart-item + .woocommerce-mini-cart-item {
  margin-top: 10px;
}
.w2w-cart-drawer .woocommerce-mini-cart-item > a:not(.remove) {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-right: 30px;
  color: var(--w2w-nb-text, #eceef3);
  font-weight: 500;
  text-decoration: none !important;
}
.w2w-cart-drawer .woocommerce-mini-cart-item > a:not(.remove):hover, .w2w-cart-drawer .woocommerce-mini-cart-item > a:not(.remove):focus {
  color: var(--w2w-nb-brand, #2e8bff);
  text-decoration: none !important;
}
.w2w-cart-drawer .woocommerce-mini-cart-item img {
  flex: none;
  box-sizing: border-box;
  width: 64px !important;
  height: 64px !important;
  max-width: 64px;
  margin: 0 !important;
  padding: 6px;
  object-fit: contain;
  background: #050b0e;
  border: 1px solid rgba(236, 238, 243, 0.07);
  border-radius: 10px;
}
.w2w-cart-drawer .woocommerce-mini-cart-item .quantity {
  display: block;
  margin: 6px 0 0 78px;
  font-family: var(--w2w-nb-font-data);
  font-variation-settings: normal;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.16px;
  color: #c3d2d8;
}
.w2w-cart-drawer .woocommerce-mini-cart-item .quantity .woocommerce-Price-amount,
.w2w-cart-drawer .woocommerce-mini-cart-item .quantity .amount {
  font-family: inherit;
  font-weight: 500;
  color: var(--w2w-nb-text, #eceef3);
}
.w2w-cart-drawer .woocommerce-mini-cart-item a.remove {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: rgba(236, 238, 243, 0.05);
  border: 1px solid rgba(236, 238, 243, 0.1);
  border-radius: 999px;
  color: #6e747e !important;
  left: auto;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  text-decoration: none !important;
  transition: border-color 0.14s ease-out, color 0.14s ease-out;
}
.w2w-cart-drawer .woocommerce-mini-cart-item a.remove:hover, .w2w-cart-drawer .woocommerce-mini-cart-item a.remove:focus {
  background: rgba(240, 84, 84, 0.12) !important;
  border-color: rgba(240, 84, 84, 0.55);
  color: #f05454 !important;
}
.w2w-cart-drawer .woocommerce-mini-cart__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(236, 238, 243, 0.07);
  font-family: var(--w2w-nb-font-body);
  font-size: 15px;
  color: #c3d2d8;
}
.w2w-cart-drawer .woocommerce-mini-cart__total strong {
  font-weight: 400;
}
.w2w-cart-drawer .woocommerce-mini-cart__total .woocommerce-Price-amount,
.w2w-cart-drawer .woocommerce-mini-cart__total .amount {
  font-family: var(--w2w-nb-font-data);
  font-variation-settings: normal;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0;
  color: var(--w2w-nb-text, #eceef3);
}
.w2w-cart-drawer .woocommerce-mini-cart__buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 18px 0 0;
}
.w2w-cart-drawer .woocommerce-mini-cart__buttons .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: 18px 34px;
  border-radius: 40px;
  font-family: var(--w2w-nb-font-display);
  font-variation-settings: normal;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.8px;
  text-transform: none;
  text-decoration: none !important;
  transition: background-color 0.14s ease-out, border-color 0.14s ease-out;
}
.w2w-cart-drawer .woocommerce-mini-cart__buttons .button:hover, .w2w-cart-drawer .woocommerce-mini-cart__buttons .button:focus, .w2w-cart-drawer .woocommerce-mini-cart__buttons .button:active {
  text-decoration: none !important;
}
.w2w-cart-drawer .woocommerce-mini-cart__buttons .button:not(.checkout) {
  background: rgba(236, 238, 243, 0.07);
  border: 1px solid rgba(236, 238, 243, 0.1);
  color: var(--w2w-nb-text, #eceef3);
}
.w2w-cart-drawer .woocommerce-mini-cart__buttons .button:not(.checkout):hover {
  background: rgba(236, 238, 243, 0.12);
  border-color: rgba(236, 238, 243, 0.18);
  color: var(--w2w-nb-text, #eceef3);
}
.w2w-cart-drawer .woocommerce-mini-cart__buttons .button.checkout {
  background: var(--w2w-nb-brand, #2e8bff);
  border: 1px solid var(--w2w-nb-brand, #2e8bff);
  color: #fff;
}
.w2w-cart-drawer .woocommerce-mini-cart__buttons .button.checkout:hover {
  background: #2578e0;
  border-color: #2578e0;
  color: #fff;
}
.w2w-cart-drawer .woocommerce-mini-cart__empty-message {
  margin: 0;
  padding: 32px 0;
  color: #6e747e;
  font-family: var(--w2w-nb-font-body);
  font-size: 15px;
  line-height: 1.6;
  text-align: center;
}

html.w2w-cart-drawer-open {
  overflow: hidden;
}

/**
 * Count badge on the header's cart button.
 *
 * Hidden at zero rather than showing a "0", which is noise. `.cart-button` is
 * given a positioning context so the badge can sit on its corner.
 */
.cart-button {
  position: relative;
}

.w2w-cart-count {
  position: absolute;
  top: -2px;
  right: -2px;
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--w2w-nb-warm-amber, #e8902a);
  border-radius: 999px;
  color: #0b1f28;
  font-family: var(--w2w-nb-font-data);
  font-variation-settings: normal;
  font-weight: 500;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0;
}
.w2w-cart-count.is-filled {
  display: inline-flex;
}

@media (prefers-reduced-motion: reduce) {
  .w2w-cart-drawer__overlay,
  .w2w-cart-drawer__panel,
  .w2w-cart-drawer__close {
    transition: none;
  }
}