/*:root {*/
/*  !* Palette matched 1:1 to source site *!*/
/*  --brand: #5d4f89;        !* purple - primary *!*/
/*  --brand-dark: #4b3f70;*/
/*  --brand-tint: rgba(93, 79, 137, 0.08);*/
/*  --green: #558063;        !* green - add to cart / secondary *!*/
/*  --green-dark: #446b52;*/
/*  --teal: #1ebea5;         !* minor accent *!*/
/*  --navy: #15123a;         !* h1 heading color *!*/
/*  --heading: #333333;      !* general headings *!*/
/*  --text: #767676;         !* body text *!*/
/*  --muted: #a5a5a5;*/
/*  --bg: #ffffff;*/
/*  --bg-soft: #f7f7f7;*/
/*  --bg-soft2: #f3f3f3;*/
/*  --border: #e6e6e6;*/
/*  --border-dark: #d8d8d8;*/
/*  --danger: #c0392b;*/
/*  --warn: #b7791f;*/
/*  --radius: 2px;*/
/*  --shadow: 0 2px 10px rgba(0, 0, 0, 0.06);*/
/*  --shadow-hover: 0 6px 22px rgba(0, 0, 0, 0.10);*/
/*  --max: 1220px;*/
/*  --font: 'Inter', Arial, Helvetica, sans-serif;*/
/*  --font-head: 'Manrope', 'Inter', sans-serif;*/
/*}*/

:root {
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-900: #111827;
  --white: #ffffff;
}

:root {
  /* Palette matched 1:1 to source site */
  --brand: #3b82f6;        /* purple - primary */
  --brand-dark: #2563eb;
  --brand-tint: rgba(93, 79, 137, 0.08);
  --green: darkblue;        /* green - add to cart / secondary */
  --green-dark: #00006f;
  --teal: #1ebea5;         /* minor accent */
  --navy: #15123a;         /* h1 heading color */
  --heading: #333333;      /* general headings */
  --text: #767676;         /* body text */
  --muted: #a5a5a5;
  --bg: #ffffff;
  --bg-soft: #f7f7f7;
  --bg-soft2: #f3f3f3;
  --border: #e6e6e6;
  --border-dark: #d8d8d8;
  --danger: #c0392b;
  --warn: #b7791f;
  --radius: 2px;
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  --shadow-hover: 0 6px 22px rgba(0, 0, 0, 0.10);
  --max: 1220px;
  --font: 'Inter', Arial, Helvetica, sans-serif;
  --font-head: 'Manrope', 'Inter', sans-serif;
  --cx-r: 0px;      /* cart card radius (via var so it survives radius-flattening) */
  --cx-r-sm: 0px;   /* cart input / button radius */
  --cx-r-xs: 0px;    /* cart stepper radius */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  font-size: 16px;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--heading); font-weight: 700; letter-spacing: -0.3px; }
a { color: var(--heading); text-decoration: none; }
img { max-width: 100%; display: block; }
.container { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* ---------- Buttons (square, uppercase) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: 0; font-weight: 600; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.6px; border: 1px solid transparent;
  cursor: pointer; transition: all .16s ease; background: var(--brand); color: #fff;
  font-size: 14px;
}
.btn:hover { background: var(--brand-dark); }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-green { background: var(--green); color: #fff; }
.btn-green:hover { background: var(--green-dark); }
.btn-outline { background: transparent; border-color: var(--border-dark); color: var(--heading); }
.btn-outline:hover { border-color: var(--brand); color: var(--brand); background: transparent; }
.btn-sm { padding: 10px 17px; font-size: 13px; }
.btn-block { width: 100%; }

/* ---------- Announcement bar (infinite marquee) ---------- */
.announce {
  background: var(--brand); color: #fff; font-size: 13px; font-weight: 600;
  letter-spacing: .4px; text-transform: uppercase; overflow: hidden; padding: 10px 0;
  white-space: nowrap;
}
.announce-track { display: inline-flex; align-items: center; flex-wrap: nowrap; animation: announce-scroll 26s linear infinite; will-change: transform; }
.announce:hover .announce-track { animation-play-state: paused; }
.announce-item { padding: 0 65px; position: relative; white-space: nowrap; }
.announce-ico { margin-right: 8px; font-size: 14px; }
.announce-item::after { content: '✦'; position: absolute; right: -4px; color: rgba(255, 255, 255, .55); }
@keyframes announce-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Mobile menu / search entrance animations */
@keyframes bfDrawerIn { from { transform: translateX(-26px); opacity: .5; } to { transform: none; opacity: 1; } }
@keyframes bfSearchDown { from { transform: translateY(-12px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes bfFadeIn { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .announce-track { animation: none; }
  .header-bottom, .header-search, .drawer-backdrop, .nav-drop-menu { animation: none !important; }
}

/* ---------- Header (2 rows) ---------- */
#header { display: contents; }  /* mount emits no box so .site-header sticks against <body> */
.site-header { position: sticky; top: 0; z-index: 50; background: #fff; }
.logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 800; font-size: 21px; letter-spacing: -.5px; color: var(--navy); white-space: nowrap; }
.logo img { height: 36px; width: auto; display: block; }
.site-footer .logo img { filter: brightness(0) invert(1); }
.logo .dot { color: var(--brand); }
.logo-mark {
  width: 34px; height: 34px; border-radius: 3px; background: var(--brand);
  display: grid; place-items: center; color: #fff; font-weight: 900; font-size: 18px;
}

/* Row 1 */
.header-top { border-bottom: 1px solid var(--border); }
.header-top-inner { display: flex; align-items: center; gap: 30px; height: 84px; }
.header-search { display: flex; flex: 1; max-width: 720px; border: 1px solid var(--border-dark); }
.header-search input[type="text"] { flex: 1; border: none; padding: 12px 16px; font-size: 15px; font-family: inherit; color: var(--heading); background: #fff; }
.header-search input[type="text"]:focus { outline: none; }
.header-search button { border: none; background: var(--brand); color: #fff; width: 54px; font-size: 16px; cursor: pointer; }
.header-search button:hover { background: var(--brand-dark); }
.header-lang { position: relative; display: flex; align-items: center; margin-right: 14px; }
/* The border is declared here, not only in the footer override — without it the button
   falls back to the browser default (2px outset black). */
.lang-toggle { display: inline-flex; align-items: center; gap: 5px; background: none; border: 1px solid var(--border); border-radius: 0; padding: 6px 9px; font-family: var(--font); font-size: 13px; font-weight: 700; color: var(--brand); cursor: pointer; transition: border-color .16s ease, color .16s ease; }
.lang-toggle:hover { border-color: var(--brand); color: var(--brand); }
.lang-caret { transition: transform .2s ease; }
.header-lang.open .lang-caret { transform: rotate(180deg); }
.lang-menu { position: absolute; top: calc(100% + 6px); right: 0; background: #fff; border: 1px solid var(--border); border-radius: 0; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 0px; display: none; z-index: 60; }
.header-lang.open .lang-menu { display: block; animation: bfSearchDown .28s ease both; }
.lang-opt { display: block; width: 100%; text-align: left; white-space: nowrap; background: none; border: none; font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; padding: 8px 10px; border-radius: 0; transition: background .14s ease, color .14s ease; }
.lang-opt:hover { background: var(--brand-tint); color: var(--brand); }
.lang-opt.active { background: var(--brand-tint); color: var(--brand); }
.header-cart { position: relative; display: flex; align-items: center; white-space: nowrap; }
.header-cart-ico { display: inline-flex; align-items: center; color: var(--brand); }
.header-cart-ico svg { width: 24px; height: 24px; display: block; }
.header-cart-txt { display: none; }  /* count shown as a badge bubble (same as mobile) */
/* Count badge bubble on the cart icon — identical on desktop & mobile */
.cart-count { display: none; }
.cart-count.show { display: grid; place-items: center; position: absolute; top: -6px; right: -8px; background: var(--brand); color: #fff; font-size: 11px; font-weight: 800; min-width: 18px; height: 18px; border-radius: 999px; padding: 0 5px; line-height: 1; }

/* Row 2 */
.header-bottom { background: #fff; border-bottom: 1px solid var(--border); }
.header-bottom-inner { display: flex; align-items: center; gap: 6px; min-height: 50px; }
/* The nav row ends where the search box above it ends, so the language selector sits
   directly under the search field's magnifier button. The search column ends 897px from
   the content start — 147px logo + 30px gap + its 720px cap — so the nav is held to the
   same end rather than to the row's edge. Anchoring the right side (not the left) keeps
   the two rows aligned no matter how wide the category button gets in a given language;
   it ranges from 157px in Ukrainian to 235px in English. */
.nav { display: flex; gap: 4px; align-items: center; flex-wrap: nowrap; margin-left: 14px; flex: 1; margin-right: max(0px, calc(100% - 897px)); }
.nav a { padding: 8px 12px; font-size: 14px; color: var(--heading); font-weight: 600; letter-spacing: normal; text-transform: uppercase; white-space: nowrap; }
.nav a:hover, .nav a.active { color: var(--brand); }
/* Language selector sits at the end of the nav, after the last link. The auto margin
   pins it to the column's right edge — directly under the search magnifier. */
.nav-lang { display: flex; align-items: center; margin-left: auto; }
.nav-lang .header-lang { margin: 0; }

/* Category "Browse" dropdown (row 2 left) */
.nav-dropdown { position: relative; align-self: stretch; display: flex; }
.nav-drop-toggle { background: var(--brand); color: #fff; border: none; padding: 0 22px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; cursor: pointer; font-family: inherit; display: flex; align-items: center; gap: 8px; }
.nav-drop-toggle:hover { background: var(--brand-dark); }
.nav-drop-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 260px; background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-hover); padding: 6px; z-index: 60; }
.nav-dropdown.open .nav-drop-menu { display: block; }
.nav-drop-menu a { display: block; padding: 11px 16px; color: var(--heading); font-size: 13px; font-weight: 500; }
.nav-drop-menu a:hover { background: var(--brand-tint); color: var(--brand); }
.cart-count { display: none; }  /* desktop: "N items" text is used instead */
.menu-toggle { display: none; background: none; border: none; color: var(--brand); font-size: 26px; cursor: pointer; margin-left: auto; }
/* Mobile-only header controls — hidden on desktop; search-toggle matches the main search button */
.search-toggle { display: none; align-items: center; justify-content: center; width: 54px; height: 44px; background: var(--brand); border: none; color: #fff; cursor: pointer; }
.search-toggle:hover { background: var(--brand-dark); }
.drawer-head { display: none; }
.drawer-backdrop { display: none; }

/* ---------- Hero ---------- */
.hero { padding: 76px 0 60px; background: var(--bg-soft); border-bottom: 1px solid var(--border); }
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700;
  color: var(--brand); background: var(--brand-tint); padding: 7px 15px; border-radius: 0px;
  margin-bottom: 22px; text-transform: uppercase; letter-spacing: .5px;
}
.hero h1 { font-size: clamp(32px, 5vw, 50px); line-height: 1.1; letter-spacing: -1.2px; margin-bottom: 20px; color: var(--navy); }
.hero h1 span { color: var(--brand); }
.hero p.lead { font-size: 19px; color: var(--text); max-width: 540px; margin-bottom: 30px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-visual {
  aspect-ratio: 1; border-radius: var(--radius); position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow); display: grid; place-items: center;
}
.hero-visual .molecule { width: 74%; }

/* ---------- Trust bar ---------- */
.trust-bar { border-bottom: 1px solid var(--border); background: #fff; }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 28px 0; }
.trust-item { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 14px; }
.trust-item .ico { font-size: 24px; }
.trust-item strong { display: block; font-size: 15px; color: var(--heading); }
.trust-item span { color: var(--muted); font-size: 13px; }

/* ---------- Sections ---------- */
.section { padding: 68px 0; }
.section-alt { background: var(--bg-soft); }
.cat-section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 30px; padding-bottom: 16px; border-bottom: 2px solid var(--brand); }
.cat-section-head h2 { font-size: clamp(22px, 3vw, 28px); color: var(--navy); letter-spacing: -.5px; }
.section-head { text-align: center; margin-bottom: 44px; }
.section-head h2 { font-size: clamp(24px, 3.5vw, 32px); letter-spacing: -.5px; margin-bottom: 12px; color: var(--navy); }
.section-head p { color: var(--text); max-width: 560px; margin: 0 auto; }

/* ---------- Category chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.chip {
  padding: 10px 20px; border-radius: 0; border: 1px solid var(--border-dark);
  background: #fff; color: var(--heading); font-size: 13px; font-weight: 500; cursor: pointer;
  transition: all .14s ease; text-transform: uppercase; letter-spacing: .4px;
  min-width: 150px;
}
.chip-ico { margin-right: 7px; }
.chip:hover { border-color: var(--brand); color: var(--brand); }
.chip.active { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ---------- Product grid ---------- */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.product-card {
  background: #fff; border: 1px solid var(--border); border-radius: 0;
  overflow: hidden; transition: all .18s ease; display: flex; flex-direction: column;
  cursor: pointer;
}
.product-card:hover { box-shadow: var(--shadow-hover); }
.product-thumb { position: relative; aspect-ratio: 1; background: var(--bg-soft); overflow: hidden; }
.product-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.product-card:hover .product-thumb img { transform: scale(1.04); }
.badge {
  position: absolute; top: 12px; left: 12px; background: var(--brand); color: #fff;
  font-size: 10px; font-weight: 700; padding: 4px 10px; text-transform: uppercase; letter-spacing: .5px;
}
.product-body { padding: 18px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.product-cat { font-size: 12px; color: var(--brand); font-weight: 700; text-transform: uppercase; letter-spacing: .6px; }
.product-name { font-size: 17px; font-weight: 700; color: var(--heading); font-family: var(--font-head); letter-spacing: -.2px; }
.product-desc { font-size: 14px; color: var(--text); flex: 1; }
.price-row { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.price { font-size: 22px; font-weight: 800; color: var(--navy); font-family: var(--font-head); }
.price-old { font-size: 14px; color: var(--muted); text-decoration: line-through; }
.product-card .btn { margin-top: 10px; }

/* ---------- Shop layout ---------- */
.shop-layout { display: grid; grid-template-columns: 250px 1fr; gap: 36px; align-items: start; }
.shop-sidebar { position: sticky; top: 96px; background: #fff; border: 1px solid var(--border); border-radius: 0; padding: 22px; }
/* The gap belongs to the block that follows the category list, not to the list itself —
   the search block is currently hidden, and a trailing margin would leave dead space. */
.shop-sidebar h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin: 26px 0 12px; font-family: var(--font); }
/* Desktop: category toggle looks like a plain heading, list always visible */
.shop-cat-toggle { display: block; width: 100%; text-align: left; background: none; border: none; cursor: default; font-family: var(--font); font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin-bottom: 12px; padding: 0; }
.shop-cat-toggle .caret { display: none; }
.filter-list { list-style: none; display: flex; flex-direction: column; gap: 1px; }
.filter-list a { padding: 9px 12px; color: var(--text); font-size: 14px; border-left: 2px solid transparent; }
.filter-list a:hover { color: var(--brand); background: var(--bg-soft); }
.filter-list a.active { background: var(--brand-tint); color: var(--brand); font-weight: 600; border-left-color: var(--brand); }
.shop-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; gap: 12px; flex-wrap: wrap; }
.shop-toolbar .count { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .4px; }
.input, select.input {
  background: #fff; border: 1px solid var(--border-dark); color: var(--heading);
  padding: 11px 14px; border-radius: 0; font-size: 14px; font-family: inherit;
}
.input:focus { outline: none; border-color: var(--brand); }
.search-box { display: flex; gap: 8px; }
.search-box .input { width: 100%; }

/* ---------- Product detail ---------- */
.pd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: start; }
.pd-image { border-radius: 0; overflow: hidden; border: 1px solid var(--border); background: var(--bg-soft); aspect-ratio: 1; }
.pd-image img { width: 100%; height: 100%; object-fit: cover; }
.breadcrumb { font-size: 12px; color: var(--muted); margin-bottom: 22px; text-transform: uppercase; letter-spacing: .4px; }
.breadcrumb a:hover { color: var(--brand); }
.pd-title { font-size: 34px; letter-spacing: -1px; margin: 8px 0 12px; color: var(--navy); }
.pd-price { display: flex; align-items: baseline; gap: 12px; margin: 16px 0; }
.pd-price .price { font-size: 30px; }
.pd-desc { color: var(--text); margin: 20px 0; font-size: 17px; }
.qty-row { display: flex; align-items: center; gap: 16px; margin: 24px 0; }
.qty-control { display: flex; align-items: center; border: none; border-radius: 0; overflow: hidden; }
.qty-control button { background: transparent; border: none; color: var(--heading); width: 40px; height: 44px; font-size: 18px; cursor: pointer; }
.qty-control button:hover { color: var(--brand); background: transparent; }
.qty-control input { width: 52px; height: 44px; text-align: center; background: transparent; border: none; color: var(--heading); font-size: 16px; font-weight: 700; -moz-appearance: textfield; appearance: textfield; }
.qty-control input::-webkit-outer-spin-button, .qty-control input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pd-meta { border-top: 1px solid var(--border); margin-top: 26px; padding-top: 20px; display: grid; gap: 11px; }
.pd-meta div { display: flex; justify-content: space-between; font-size: 14px; }
.pd-meta span { color: var(--muted); }
.pd-meta strong { color: var(--heading); }
.disclaimer {
  background: #fdf6e3; border: 1px solid #f0e2b8; color: var(--warn);
  font-size: 13px; padding: 12px 16px; border-radius: 0; margin-top: 20px;
}

/* Variant (dosage) selector */
.pd-price-range { font-size: 13px; color: var(--muted); }
.pd-variants { margin: 22px 0 6px; }
.pd-variant-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--heading); margin-bottom: 10px; }
.pd-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.pd-swatch {
  min-width: 64px; padding: 11px 18px; border: 1px solid var(--border-dark); background: #fff;
  color: var(--heading); font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: all .14s ease;
}
.pd-swatch:hover { border-color: var(--brand); color: var(--brand); }
.pd-swatch.active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* Product description accordion sections */
.pd-sections { margin-top: 50px; max-width: 900px; }
.acc-item { border: 1px solid var(--border); border-top: none; }
.acc-item:first-child { border-top: 1px solid var(--border); }
.acc-q { padding: 18px 22px; font-weight: 700; font-family: var(--font-head); color: var(--navy); cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 16px; background: #fff; }
.acc-q:hover { color: var(--brand); }
.acc-a { padding: 0 22px; max-height: 0; overflow: hidden; color: var(--text); transition: max-height .3s ease, padding .3s ease; background: var(--bg-soft); }
.acc-item.open .acc-a { padding: 18px 22px; max-height: 1200px; }
.acc-item.open .acc-q .plus { transform: rotate(45deg); }
.acc-a p { margin: 0 0 10px; }
.pd-list { margin: 0; padding-left: 20px; }
.pd-list li { margin-bottom: 8px; }

/* Pen dosage chart */
.pd-table-wrap { overflow-x: auto; }
.pd-table { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; }
.pd-table th { text-align: left; background: var(--brand); color: #fff; padding: 11px 14px; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; }
.pd-table td { padding: 11px 14px; border-bottom: 1px solid var(--border); color: var(--heading); white-space: nowrap; }
.pd-table tr:last-child td { border-bottom: none; }

/* Cart variant tag */
.ci-variant { display: inline-block; background: var(--brand-tint); color: var(--brand); font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; margin-left: 6px; vertical-align: middle; }

/* ---------- Cart / Checkout ---------- */
.cart-layout { display: grid; grid-template-columns: 1fr 370px; gap: 34px; align-items: start; }
.cart-items { display: flex; flex-direction: column; gap: 14px; }
.cart-item {
  display: grid; grid-template-columns: 84px 1fr auto; gap: 16px; align-items: center;
  background: #fff; border: 1px solid var(--border); border-radius: 0; padding: 14px;
}
.cart-item img { width: 84px; height: 84px; object-fit: cover; background: var(--bg-soft); }
.cart-item .ci-name { font-weight: 700; color: var(--heading); font-family: var(--font-head); }
.cart-item .ci-price { color: var(--muted); font-size: 13px; }
.ci-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.ci-actions strong { color: var(--navy); font-family: var(--font-head); }
.link-danger { color: var(--danger); background: none; border: none; cursor: pointer; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
.summary { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 0; padding: 26px; position: sticky; top: 96px; }
.summary h3 { margin-bottom: 18px; color: var(--navy); font-size: 18px; }
.summary-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 15px; }
.summary-row.total { border-top: 1px solid var(--border-dark); margin-top: 10px; padding-top: 16px; font-size: 20px; font-weight: 800; color: var(--navy); font-family: var(--font-head); }
.empty-state { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty-state .ico { font-size: 46px; margin-bottom: 16px; }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 13px; font-weight: 700; color: var(--heading); text-transform: uppercase; letter-spacing: .4px; }
.field input, .field textarea, .field select {
  background: #fff; border: 1px solid var(--border-dark); color: var(--heading);
  padding: 12px 14px; border-radius: 0; font-size: 16px; font-family: inherit; width: 100%;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--brand); }
.field textarea { min-height: 120px; resize: vertical; }
.card { background: #fff; border: 1px solid var(--border); border-radius: 0; padding: 28px; }

/* ---------- FAQ ---------- */
.faq-group { margin-bottom: 34px; }
.faq-group-title { font-size: 14px; text-transform: uppercase; letter-spacing: .8px; color: var(--brand); margin-bottom: 14px; font-family: var(--font); padding-bottom: 8px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 9px; }
.faq-group-ico { font-size: 19px; }
.faq-item { border: 1px solid var(--border); border-radius: 0; margin-bottom: 10px; background: #fff; overflow: hidden; }
.faq-q { padding: 18px 22px; font-weight: 600; color: var(--heading); cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-head); }
.faq-q:hover { color: var(--brand); }
.faq-a { padding: 0 22px; max-height: 0; overflow: hidden; color: var(--text); transition: all .25s ease; }
.faq-item.open .faq-a { padding: 0 22px 20px; max-height: 400px; }
.faq-item.open .faq-q .plus { transform: rotate(45deg); }
.plus { transition: transform .2s ease; font-size: 22px; color: var(--brand); }

/* ---------- PSM Technology page ---------- */
.psm-check { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.psm-check.psm-check-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 28px; }
.psm-check li { position: relative; padding-left: 30px; color: var(--text); font-size: 16px; }
.psm-check li::before { content: '✓'; position: absolute; left: 0; top: 0; width: 20px; height: 20px; background: var(--green); color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; border-radius: 3px; }
.psm-figure { display: grid; place-items: center; padding: 20px; }
.psm-figure svg { max-width: 260px; filter: drop-shadow(0 10px 30px rgba(75, 63, 112, .25)); }
.step-num { width: 40px; height: 40px; background: var(--brand); color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 18px; display: grid; place-items: center; border-radius: 3px; margin-bottom: 14px; }
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.compare-col { background: #fff; border: 1px solid var(--border); border-top: 4px solid var(--muted); padding: 26px; }
.compare-col h3 { font-size: 18px; color: var(--navy); margin-bottom: 16px; }
.compare-col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.compare-col li { position: relative; padding-left: 28px; color: var(--text); font-size: 14px; }
.compare-bad { border-top-color: #d67c7c; }
.compare-bad li::before { content: '✕'; position: absolute; left: 0; color: var(--danger); font-weight: 800; }
.compare-good { border-top-color: var(--green); }
.compare-good li::before { content: '✓'; position: absolute; left: 0; color: var(--green); font-weight: 800; }
.quality-badges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.q-badge { background: #fff; border: 1px solid var(--border); padding: 20px; text-align: center; font-weight: 600; color: var(--heading); font-size: 14px; }

/* ---------- Stats row (about) ---------- */
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat-box { background: #fff; border: 1px solid var(--border); padding: 28px 20px; text-align: center; }
.stat-box .num { font-family: var(--font-head); font-size: 34px; font-weight: 800; color: var(--brand); letter-spacing: -1px; }
.stat-box .cap { color: var(--text); font-size: 13px; margin-top: 6px; }

/* ---------- Feature cards / about ---------- */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
/* Icon + heading on one row, description below */
.feature { background: #fff; border: 1px solid var(--border); border-radius: 0; padding: 28px; display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 10px; align-items: center; }
.feature .ico { grid-row: 1; grid-column: 1; font-size: 30px; margin-bottom: 0; }
.feature h3 { grid-row: 1; grid-column: 2; font-size: 19px; margin-bottom: 0; color: var(--navy); }
.feature p { grid-column: 1 / -1; color: var(--text); font-size: 15px; }
.prose { max-width: 780px; margin: 0 auto; color: var(--text); font-size: 17px; }
.prose h2 { color: var(--navy); margin: 30px 0 12px; letter-spacing: -.5px; }
.prose p { margin-bottom: 16px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--brand); color: #eee; padding: 58px 0 30px; margin-top: 0; }
.site-footer .logo { color: #fff; }
.site-footer .logo .dot { color: var(--teal); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; margin-bottom: 40px; }
.footer-col h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 16px; color: #fff; font-family: var(--font); }
/* break-word is a last resort: a word longer than its column breaks instead of
   spilling out and giving the whole page a horizontal scrollbar. */
.footer-col h4, .footer-col a, .footer-col p { overflow-wrap: break-word; }
.footer-col a, .footer-col p { display: block; color: #eee; font-size: 15px; margin-bottom: 10px; }
.footer-col a:hover { color: var(--teal); }
/* Language selector in footer Support column: "Language" label + dropdown on its own line */
.footer-lang { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.footer-lang-label { color: #fff; font-size: 15px; font-weight: 600;}
.footer-lang .lang-toggle { color: #fff; border: 1px solid rgba(255,255,255,.4); padding: 6px 10px; }
.footer-lang .lang-toggle:hover { border-color: #fff; color: #fff; }
.footer-lang .lang-menu { top: auto; bottom: calc(100% + 6px); right: auto; left: 0; }
.footer-brand p { max-width: 340px; margin-top: 14px; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 24px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: #fff; font-size: 13px; }
.footer-disclaimer { font-size: 12px; color: #eee; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 0; padding: 14px 18px; margin-top: 20px; }

/* ---------- CoA table ---------- */
.coa-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.coa-table th { text-align: left; padding: 14px 18px; background: var(--bg-soft); color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; border-bottom: 1px solid var(--border); }
.coa-table td { padding: 14px 18px; border-bottom: 1px solid var(--border); color: var(--heading); }
.coa-table tr:last-child td { border-bottom: none; }
.pill-coa { background: var(--brand-tint); color: var(--brand); padding: 3px 10px; font-size: 12px; font-weight: 600; }
.coa-list { list-style: none; margin: 0; padding: 0; max-width: 760px; display: flex; flex-direction: column; gap: 12px; }
.coa-list li { position: relative; padding-left: 26px; color: var(--text); font-size: 16px; line-height: 1.6; }
.coa-list li::before { content: ''; position: absolute; left: 4px; top: 10px; width: 8px; height: 8px; background: var(--brand); border-radius: 50%; }
.coa-list strong { color: var(--heading); }
.coa-pass { color: var(--green); font-weight: 700; }

/* ---------- Toast ---------- */
#toast {
  position: fixed; top: 80px; left: 50%; transform: translateX(-50%) translateY(-160%);
  display: flex; align-items: center; gap: 12px;
  background: #dcfce7; padding: 14px 22px; border-radius: 0px;
  border: 1.5px solid #dcfce7; color: #15803d; box-shadow: 0 10px 30px rgba(0,0,0,.12);
  z-index: 200; transition: transform .3s ease, opacity .3s ease; opacity: 0;
  font-size: 15px;  max-width: calc(100% - 32px); font-weight: 600;
}
#toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
#toast .toast-ico { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 0; background: #15803d; display: grid; place-items: center; }
#toast .toast-msg { white-space: nowrap; }
#toast.toast--error { border-color: var(--danger); }
#toast.toast--error .toast-ico { background: var(--danger); }

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.mt-2 { margin-top: 20px; } .mt-4 { margin-top: 40px; }
.loading { text-align: center; padding: 60px; color: var(--muted); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  /* Pin the compact top bar to the top; let the announce marquee scroll away */
  .site-header { position: sticky; top: 0; z-index: 50; }
  .header-top { position: relative; background: #fff; }

  /* Compact icon top bar: ☰ · logo · 🔍 · 🛍  (one line); search revealed on tap */
  .header-top-inner { height: 64px; gap: 6px; }
  .menu-toggle { display: block; order: 0; font-size: 26px; line-height: 1; padding: 0 6px; flex: 0 0 auto; margin-left: 0; }
  .logo { order: 1; flex: 1; justify-content: center; font-size: 18px; white-space: nowrap; }
  .search-toggle { display: inline-flex; align-items: center; justify-content: center; order: 2; flex: 0 0 auto; width: 44px; height: 44px; margin-right: 4px; background: none; color: var(--brand); padding: 0; }
  .search-toggle:hover { background: none; }
  .search-toggle svg { width: 24px; height: 24px; display: block; }
  .header-cart { order: 3; flex: 0 0 auto; width: 44px; height: 44px; justify-content: center; gap: 0; }
  .header-cart-txt { display: none; }                 /* icon-only cart on mobile */
  .header-cart-ico { display: inline-flex; align-items: center; justify-content: center; font-size: 0; line-height: 0; }
  .header-cart-ico svg { width: 24px; height: 24px; display: block; }
  .header-cart { position: relative; }
  .cart-count.show { display: grid; place-items: center; position: absolute; top: -4px; right: -6px; background: var(--brand); color: #fff; font-size: 11px; font-weight: 800; min-width: 18px; height: 18px; border-radius: 999px; padding: 0 5px; line-height: 1; }

  /* Search bar: hidden by default, slides down full-width when toggled */
  .header-search {
    order: 4; position: absolute; left: 0; right: 0; top: 100%;
    max-width: none; margin: 0; border: none; border-top: 1px solid var(--border);
    background: #fff; padding: 10px 16px; display: none; z-index: 40;
  }
  /* header-top is sticky (also anchors the absolute search bar below it) */
  body.search-open .header-search { display: flex; animation: bfSearchDown .5s ease both; }
  .header-search { flex: none; }
  .header-search input[type="text"] { border: 1px solid var(--border-dark); }
  .header-search button { width: 54px; }

  /* Menu: left drawer overlay (opacity/visibility reveal + slide) */
  .header-bottom {
    position: fixed; top: 0; left: 0; bottom: 0; width: 300px; max-width: 84vw;
    background: #fff; z-index: 90; overflow-y: auto; border: none;
    box-shadow: 2px 0 24px rgba(0,0,0,.18); display: block;
    visibility: hidden; opacity: 0; pointer-events: none;
  }
  body.menu-open .header-bottom { visibility: visible; opacity: 1; pointer-events: auto; animation: bfDrawerIn .5s ease both; }
  body.menu-open .drawer-backdrop { animation: bfFadeIn .5s ease both; }
  .drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; background: var(--brand); color: #fff; font-family: var(--font-head); font-weight: 800; text-transform: uppercase; letter-spacing: .5px; font-size: 15px; }
  .drawer-close { background: none; border: none; color: #fff; font-size: 30px; line-height: 1; cursor: pointer; }
  .drawer-backdrop { display: block; position: fixed; inset: 0; background: rgba(21,18,58,.5); z-index: 80; visibility: hidden; }
  body.menu-open .drawer-backdrop { visibility: visible; }
  body.menu-open { overflow: hidden; }

  .header-bottom-inner { flex-direction: column; align-items: stretch; padding: 0; min-height: 0; gap: 0; }
  /* In the drawer the nav is a plain vertical list — drop the desktop column anchoring. */
  .nav { display: flex; flex-direction: column; gap: 0; margin: 0; flex: none; }
  .nav a { padding: 15px 18px; border-bottom: 1px solid var(--border); font-size: 15px; }
  .nav-dropdown { order: 1; display: block; }
  .nav-drop-toggle { width: 100%; text-align: left; justify-content: flex-start; padding: 15px 18px; }
  .nav-drop-menu { position: static; box-shadow: none; border: none; margin: 0; min-width: 0; background: var(--bg-soft); padding: 0; }
  .nav-drop-menu a { padding: 12px 18px 12px 30px; border-bottom: 1px solid var(--border); }
  .nav-dropdown.open .nav-drop-menu { animation: bfSearchDown .5s ease both; }
  /* In the drawer the nav is a vertical list, so the language options sit inline as a
     row of chips — an absolutely-positioned dropdown would escape the drawer. */
  .nav-lang { padding: 12px 18px; border-bottom: 1px solid var(--border); }
  .nav-lang .header-lang { margin: 0; width: 100%; }
  .nav-lang .lang-toggle { display: none; }
  .nav-lang .lang-menu,
  .nav-lang .header-lang.open .lang-menu {
    position: static; display: flex; gap: 8px; padding: 0;
    border: none; box-shadow: none; background: none; animation: none;
  }
  .nav-lang .lang-opt { width: auto; border: 1px solid var(--border); padding: 9px 16px; font-size: 14px; }
  .hero-grid, .pd-grid, .grid-2 { grid-template-columns: 1fr; }
  .hero-visual { max-width: 380px; }
  .shop-layout { grid-template-columns: 1fr; }
  .shop-sidebar { position: static; padding: 0; border: none; background: transparent; }
  /* /shop category list = collapsible dropdown like the hamburger menu */
  .shop-sidebar h3 { padding: 0 4px; margin-bottom: 8px; }
  .shop-cat { margin-bottom: 22px; }
  .shop-cat-toggle { display: flex; align-items: center; justify-content: space-between; cursor: pointer; background: var(--brand); color: #fff; padding: 14px 18px; font-size: 13px; font-weight: 700; letter-spacing: .4px; margin-bottom: 0; }
  .shop-cat-toggle .caret { display: inline; transition: transform .25s ease; }
  .shop-cat.open .shop-cat-toggle .caret { transform: rotate(180deg); }
  .filter-list { gap: 0; border: none; /*border-left: 2px solid var(--brand); margin: 0 0 0 8px; */ background: var(--bg-soft); display: none; }
  .shop-cat.open .filter-list { display: flex; animation: bfSearchDown .5s ease both; }
  .filter-list a { padding: 12px 18px 12px 30px; font-size: 13px; color: var(--heading); font-weight: 500; border-left: none; border-bottom: 1px solid var(--border); }
  .filter-list a:last-child { border-bottom: none; }
  .filter-list a:hover { background: var(--brand-tint); color: var(--brand); }
  .filter-list a.active { background: var(--brand-tint); color: var(--brand); font-weight: 600; }
  .cart-layout { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-bar { display: none; }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-item { justify-content: center; text-align: left; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .feature-grid { grid-template-columns: 1fr; }
  /* Feature card: icon + heading on one row, text below */
  .feature { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 6px; align-items: center; }
  .feature .ico { grid-row: 1; grid-column: 1; margin-bottom: 0; }
  .feature h3 { grid-row: 1; grid-column: 2; margin-bottom: 0; }
  .feature p { grid-column: 1 / -1; }
  .compare-grid { grid-template-columns: 1fr; }
  .quality-badges { grid-template-columns: 1fr 1fr; }
  .psm-check.psm-check-grid { grid-template-columns: 1fr; }
  .cat-section-head { gap: 12px; }
  .cat-section-head .btn { flex: 0 0 auto; white-space: nowrap; font-size: 11px; padding: 7px 11px; letter-spacing: .3px; }
  /* Row1: 50/50, Row2: 40/60 — 10-track grid with spans.
     Row1 col2 holds the category links; span 5 keeps it wide enough for the
     longest single word ("Възстановяване", 120px) down to a 320px viewport,
     so nothing spills out and forces the page to scroll sideways. */
  .footer-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 24px 20px; }
  .footer-grid > :nth-child(1) { grid-column: span 5; }
  .footer-grid > :nth-child(2) { grid-column: span 5; }
  .footer-grid > :nth-child(3) { grid-column: span 4; }
  .footer-grid > :nth-child(4) { grid-column: span 6; }
  .form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  /* >2 products -> horizontal swipe slider (peek of next card) */
  .product-grid.is-slider {
    display: flex; grid-template-columns: none; gap: 8px;
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    padding-bottom: 6px; scrollbar-width: none;
  }
  .product-grid.is-slider::-webkit-scrollbar { display: none; }
  .product-grid.is-slider > .product-card { flex: 0 0 calc(50% - 4px); scroll-snap-align: start; }
  .trust-grid { grid-template-columns: 1fr; }
}

/* ============ Cart page (rounded, blue — mirrors bioforge-labs.eu/cart) ============ */
.cartx { background: var(--gray-50); padding: 32px 0 60px; min-height: 60vh; }
.cartx-title { font-size: 30px; color: var(--gray-900); margin-bottom: 22px; }
.cartx-layout { display: grid; grid-template-columns: 1fr 380px; gap: 24px; align-items: start; }
.cartx-main { display: flex; flex-direction: column; gap: 24px; }
.cartx-card { background: #fff; border: 1px solid var(--gray-200); border-radius: 0px; padding: 24px; box-shadow: 0 1px 2px rgba(16,24,40,.04); }

/* Item card */
.cartx-items { display: flex; flex-direction: column; gap: 16px; }
.cartx-item { display: flex; gap: 18px; padding: 18px; align-items: center; }
.cartx-item img { width: 96px; height: 96px; border-radius: 0px; object-fit: cover; background: var(--gray-100); flex: 0 0 auto; }
.cartx-item-body { flex: 1; min-width: 0; }
.cartx-item-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.cartx-item-name { font-family: var(--font-head); font-weight: 700; font-size: 17px; color: var(--gray-900); }
.cartx-item-name:hover { color: var(--brand); }
.cartx-item-price { font-family: var(--font-head); font-weight: 800; font-size: 18px; color: var(--brand); white-space: nowrap; }
.cartx-item-meta { display: flex; gap: 20px; margin: 6px 0 14px; font-size: 13px; color: var(--gray-600); }
.cartx-item-meta strong { color: var(--gray-700); font-weight: 700; }
.cartx-item-controls { display: flex; align-items: center; gap: 16px; }
.cartx-stepper { display: inline-flex; align-items: center; gap: 4px; }
.cartx-stepper button { width: 30px; height: 30px; border: 1px solid var(--gray-200); background: #fff; border-radius: var(--cx-r-xs); font-size: 18px; color: var(--gray-700); cursor: pointer; display: grid; place-items: center; border: 0px;}
.cartx-stepper button:hover { border-color: var(--brand); color: var(--brand); }
.cartx-stepper span { min-width: 30px; text-align: center; font-weight: 700; color: var(--gray-900); }
.cartx-remove { background: none; border: none; color: var(--gray-600); cursor: pointer; padding: 6px; display: grid; place-items: center; border-radius: var(--cx-r-xs); }
.cartx-remove:hover { color: var(--danger); background: #fef2f2; }

/* Headings */
.cartx-h2 { display: flex; align-items: center; gap: 10px; font-size: 20px; color: var(--gray-900); margin-bottom: 20px; }
.cartx-h2-ico { color: var(--brand); display: inline-flex; }

/* Shipping form */
.cartx-field { margin-bottom: 16px; }
.cartx-field label { display: block; font-size: 13px; font-weight: 700; color: var(--gray-700); margin-bottom: 7px; }
.cartx-field .req { color: var(--danger); }
.cartx-field .opt { color: var(--gray-600); font-weight: 500; }
.cartx-field input, .cartx-field select, .cartx-field textarea {
  width: 100%; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--cx-r-sm);
  padding: 12px 14px; font-size: 15px; font-family: inherit; color: var(--gray-900);
}
.cartx-field input::placeholder, .cartx-field textarea::placeholder { color: #9aa4b2; }
.cartx-field input:focus, .cartx-field select:focus, .cartx-field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--blue-100); background: #fff; }
.cartx-field textarea { min-height: 90px; resize: vertical; }

/* Summary */
.cartx-side { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 96px; }
.cartx-promo { display: flex; gap: 10px; margin-bottom: 18px; }
.cartx-promo input { flex: 1; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--cx-r-sm); padding: 11px 14px; font-size: 14px; font-family: inherit; }
.cartx-promo input:focus { outline: none; border-color: var(--brand); }
.cartx-apply { background: var(--gray-100); border: 1px solid var(--gray-200); border-radius: var(--cx-r-sm); padding: 0 18px; font-weight: 700; font-size: 14px; color: var(--gray-700); cursor: pointer; }
.cartx-apply:hover { background: var(--gray-200); }
.cartx-row { display: flex; justify-content: space-between; padding: 9px 0; font-size: 15px; color: var(--gray-700); }
.cartx-row span:last-child { font-weight: 700; color: var(--gray-900); }
.cartx-discount span { color: #15803d !important; font-weight: 700; }
.cartx-freebar { background: #dcfce7; color: #15803d; text-align: center; font-weight: 600; font-size: 14px; padding: 12px; border-radius: var(--cx-r-sm); margin: 8px 0; }
.cartx-freehint { background: var(--blue-50); color: var(--brand); text-align: center; font-weight: 600; font-size: 14px; padding: 12px; border-radius: var(--cx-r-sm); margin: 8px 0; }
.cartx-total { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--gray-200); margin-top: 10px; padding-top: 16px; font-family: var(--font-head); }
.cartx-total span:first-child { font-size: 20px; font-weight: 800; color: var(--gray-900); }
.cartx-total span:last-child { font-size: 22px; font-weight: 800; color: var(--gray-900); }
.cartx-btn { display: block; width: 100%; text-align: center; border: none; border-radius: var(--cx-r-sm); padding: 15px; font-size: 16px; font-weight: 700; cursor: pointer; font-family: inherit; margin-top: 16px; }
.cartx-btn-primary { background: var(--brand); color: #fff; }
.cartx-btn-primary:hover { background: var(--brand-dark); }
.cartx-back { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; color: var(--brand); font-weight: 600; font-size: 14px; }
.cartx-back:hover { text-decoration: underline; }

/* Trust card */
.cartx-trust { display: flex; flex-direction: column; gap: 20px; }
.cartx-trust-row { display: flex; align-items: flex-start; gap: 14px; }
.cartx-trust-row .ti { color: var(--brand); display: inline-flex; margin-top: 2px; }
.cartx-trust-row strong { display: block; color: var(--gray-900); font-size: 14px; }
.cartx-trust-row span { color: var(--gray-600); font-size: 13px; }

/* Empty / confirm */
.cartx-empty { text-align: center; padding: 50px 24px; color: var(--gray-600); }
.cartx-empty .ico { font-size: 46px; margin-bottom: 14px; }
.cartx-ordernum { font-family: var(--font-head); font-size: 24px; font-weight: 800; color: var(--brand); margin: 8px 0; }

@media (max-width: 900px) {
  .cartx-layout { grid-template-columns: 1fr; }
  .cartx-side { position: static; }
}

/* ---------- Sticky "View Cart" bar (shows when cart has items) ---------- */
#cart-bar {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%) translateY(160%);
  width: min(260px, calc(100% - 32px)); z-index: 95;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--brand); color: #fff; padding: 15px 22px; border-radius: var(--cx-r-sm);
  box-shadow: 0 8px 30px rgba(0,0,0,.22); font-weight: 700; font-size: 15px;
  transition: transform .3s ease; text-transform: none;
}
#cart-bar.show { transform: translateX(-50%) translateY(0); }
#cart-bar:hover { background: var(--brand-dark); }
/* Mobile only */
@media (min-width: 901px) { #cart-bar { display: none !important; } }
#cart-bar .cb-left { display: inline-flex; align-items: center; gap: 10px; }
#cart-bar .cb-count { background: rgba(255,255,255,.25); border-radius: 999px; padding: 1px 9px; font-size: 13px; }
#cart-bar .cb-right { white-space: nowrap; }

.price-old {
  display: none !important;;
}

/* Prices are hidden site-wide — safety net for any price node that slips through */
.price, .price-old, .price-row, .pd-price, .pd-price-range,
.cartx-item-price, .cartx-total, .summary-row.total { display: none !important; }