/*-----------------------------------------------------------------

Template Name:  Odor - Vape Store WooCommerce HTML Template
Author:  Gramentheme
Author URI: https://themeforest.net/user/gramentheme/portfolio
Developer: Kawser Ahmed Roni
Version: 1.0.0
Description: Odor - Vape Store WooCommerce HTML Template

-------------------------------------------------------------------
CSS TABLE OF CONTENTS
-------------------------------------------------------------------

01. abstracts
    1.01 --> mixins
    1.02 --> variable

02. base
    2.01 --> typography
    2.02 --> animation
    2.03 --> responsive

03. components
    3.01 --> buttons
    3.02 --> progress

04. layout
    4.01 --> header
    4.02 --> banner
    4.03 --> section
    4.04 --> footer

------------------------------------------------------------------*/
/* Self-hosted (previously fonts.googleapis.com/fonts.gstatic.com) so the
   site's CSP doesn't need a Google Fonts exception — one less third-party
   origin in scope, one less thing that can go down and take styling with
   it. Latin subset only (this site has no non-Latin content); files are
   the exact same Inter build Google serves, just vendored locally. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter/inter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/inter/inter-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/inter/inter-latin-400-italic.woff2") format("woff2"); }
:root {
  /* Shared timing for the mobile drawer and its accordion, so the drawer,
     its panels and the chevrons all move on one curve instead of three
     slightly different ones. 240ms ease-out: fast to start, settling at the
     end, which is what reads as "native" rather than floaty. */
  --nav-dur: 240ms;
  --nav-ease: cubic-bezier(0.25, 1, 0.5, 1);
  /* Both font variables point at Inter so every existing var(--prosto-one)/
     var(--montserrat) reference across this file updates without hunting
     down each call site. */
  --prosto-one: "Inter", sans-serif;
  --montserrat: "Inter", sans-serif;

  /* ---------------------------------------------------------------------
     Monochrome design system — the single source of truth for every gray,
     near-black and near-white used on the site. Never pure #000/#fff: the
     darkest and lightest stops below are deliberately off-black/off-white.
     Every legacy token further down (--primary-color, --paragraph, --white/
     --black, etc.) is now a thin alias onto these, so the ~130 existing
     var(--primary-color)/var(--paragraph)/etc. call sites across this file
     and every page pick up the new palette without being touched one by one.
     --------------------------------------------------------------------- */
  --color-bg: #fafaf9;
  --color-surface: #fdfdfc;
  --color-surface-2: #f2f1ee;

  --color-text: #1a1a1a;
  --color-text-muted: #55534f;
  --color-text-faint: #9c9993;

  --color-primary: #1a1a1a;
  --color-primary-hover: #2e2e2c;

  --color-border: rgba(26, 26, 26, 0.1);

  /* ---- Legacy aliases — kept so every existing var() reference in this
     file (and in page-level inline styles) resolves to the new palette
     above without a risky global rename. ---- */
  --primary-color: var(--color-primary);
  --primary-hover: var(--color-primary-hover);
  --secondary-color: var(--color-bg);
  --sub-bg: var(--color-surface-2);
  --heading-color: var(--color-text);
  --paragraph: var(--color-text-muted);
  --paragraph-light: #6e6b66;
  --span: var(--color-text);
  --border: var(--color-border);
  --border-light: rgba(26, 26, 26, 0.06);
  /* NOTE: --white/--black keep the ROLE this codebase already gave them
     (--black = page/surface background, --white = ink/icon color on top of
     it) rather than their literal names — this file has ~100+ existing
     var(--white)/var(--black) call sites written against that role, and
     reusing it is far lower-risk than re-auditing every one individually.
     Text/icons placed on top of a *colored* surface (buttons, badges) are
     fixed to a literal #ffffff in their own component rules instead of
     inheriting this variable, since accent-colored buttons always want
     white text regardless of the page theme. */
  --white: var(--color-text);
  --black: var(--color-bg);
  --footer-color: var(--color-text-muted);
  --border-1px: 1px solid var(--color-border);
  --border-2px: 2px solid var(--color-border);
  --transition: all 0.3s ease-in-out;

  --success: #059669;
  --warning: #d97706;
  --danger: #dc2626;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
  --radius: 10px;
  --radius-pill: 100px;
}

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: none;
}

/* The reset above removes the default focus ring sitewide; restore a visible
   one for keyboard navigation only (:focus-visible), so mouse clicks still
   don't show a ring but Tab-ing through links/buttons/inputs does. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--montserrat);
  color: var(--paragraph);
  background-color: var(--black);
  line-height: 1.6;
  font-weight: 400;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  color: var(--heading-color);
  font-family: var(--prosto-one);
}

h1 {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

h2 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

h3 {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
}

h4 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}

h5 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}

h6 {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

p {
  margin: 0;
  padding: 0;
  line-height: 1.6;
  font-size: 16px;
}

span {
  display: inline-block;
  color: var(--span);
}

del {
  color: #727272;
}

a {
  text-decoration: none;
  display: inline-block;
  color: var(--heading-color);
  transition: var(--transition);
}

a:hover {
  color: var(--heading-color);
}

ul {
  margin: 0;
  padding: 0;
  text-decoration: none;
}

li {
  list-style: none;
}

button {
  border: none;
  background-color: transparent;
}

input {
  border: none;
  outline: none;
}

::placeholder {
  color: var(--span);
}

::selection {
  color: #ffffff;
  background-color: var(--primary-color);
}

.mt-5 {
  margin-top: 5px;
}

.mt-10 {
  margin-top: 10px;
}

.mt-15 {
  margin-top: 15px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-25 {
  margin-top: 25px;
}

.mt-30 {
  margin-top: 30px;
}

.mt-35 {
  margin-top: 35px;
}

.mt-40 {
  margin-top: 40px;
}

.mt-45 {
  margin-top: 45px;
}

.mt-50 {
  margin-top: 50px;
}

.mt-55 {
  margin-top: 55px;
}

.mt-60 {
  margin-top: 60px;
}

.mt-65 {
  margin-top: 65px;
}

.mt-70 {
  margin-top: 70px;
}

.mt-75 {
  margin-top: 75px;
}

.mt-80 {
  margin-top: 80px;
}

.mt-85 {
  margin-top: 85px;
}

.mt-90 {
  margin-top: 90px;
}

.mt-95 {
  margin-top: 95px;
}

.mt-100 {
  margin-top: 100px;
}

.mt-105 {
  margin-top: 105px;
}

.mt-110 {
  margin-top: 110px;
}

.mt-115 {
  margin-top: 115px;
}

.mt-120 {
  margin-top: 120px;
}

.mt-125 {
  margin-top: 125px;
}

.mt-130 {
  margin-top: 130px;
}

.mt-135 {
  margin-top: 135px;
}

.mt-140 {
  margin-top: 140px;
}

.mt-145 {
  margin-top: 145px;
}

.mt-150 {
  margin-top: 150px;
}

.mt-155 {
  margin-top: 155px;
}

.mt-160 {
  margin-top: 160px;
}

.mt-165 {
  margin-top: 165px;
}

.mt-170 {
  margin-top: 170px;
}

.mt-175 {
  margin-top: 175px;
}

.mt-180 {
  margin-top: 180px;
}

.mt-185 {
  margin-top: 185px;
}

.mt-190 {
  margin-top: 190px;
}

.mt-195 {
  margin-top: 195px;
}

.mt-200 {
  margin-top: 200px;
}

/*-- Margin Bottom --*/
.mb-5 {
  margin-bottom: 5px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mb-15 {
  margin-bottom: 15px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-25 {
  margin-bottom: 25px;
}

.mb-30 {
  margin-bottom: 30px;
}

.mb-35 {
  margin-bottom: 35px;
}

.mb-40 {
  margin-bottom: 40px;
}

.mb-45 {
  margin-bottom: 45px;
}

.mb-50 {
  margin-bottom: 50px;
}

.mb-55 {
  margin-bottom: 55px;
}

.mb-60 {
  margin-bottom: 60px;
}

.mb-65 {
  margin-bottom: 65px;
}

.mb-70 {
  margin-bottom: 70px;
}

.mb-75 {
  margin-bottom: 75px;
}

.mb-80 {
  margin-bottom: 80px;
}

.mb-85 {
  margin-bottom: 85px;
}

.mb-90 {
  margin-bottom: 90px;
}

.mb-95 {
  margin-bottom: 95px;
}

.mb-100 {
  margin-bottom: 100px;
}

.mb-105 {
  margin-bottom: 105px;
}

.mb-110 {
  margin-bottom: 110px;
}

.mb-115 {
  margin-bottom: 115px;
}

.mb-120 {
  margin-bottom: 120px;
}

.mb-125 {
  margin-bottom: 125px;
}

.mb-130 {
  margin-bottom: 130px;
}

.mb-135 {
  margin-bottom: 135px;
}

.mb-140 {
  margin-bottom: 140px;
}

.mb-145 {
  margin-bottom: 145px;
}

.mb-150 {
  margin-bottom: 150px;
}

.mb-155 {
  margin-bottom: 155px;
}

.mb-160 {
  margin-bottom: 160px;
}

.mb-165 {
  margin-bottom: 165px;
}

.mb-170 {
  margin-bottom: 170px;
}

.mb-175 {
  margin-bottom: 175px;
}

.mb-180 {
  margin-bottom: 180px;
}

.mb-185 {
  margin-bottom: 185px;
}

.mb-190 {
  margin-bottom: 190px;
}

.mb-195 {
  margin-bottom: 195px;
}

.mb-200 {
  margin-bottom: 200px;
}

.ml-5 {
  margin-left: 5px;
}

.ml-10 {
  margin-left: 10px;
}

.ml-15 {
  margin-left: 15px;
}

.ml-20 {
  margin-left: 20px;
}

.ml-25 {
  margin-left: 25px;
}

.ml-30 {
  margin-left: 30px;
}

.ml-35 {
  margin-left: 35px;
}

.ml-40 {
  margin-left: 40px;
}

.ml-45 {
  margin-left: 45px;
}

.ml-50 {
  margin-left: 50px;
}

.ml-55 {
  margin-left: 55px;
}

.ml-60 {
  margin-left: 60px;
}

.ml-65 {
  margin-left: 65px;
}

.ml-70 {
  margin-left: 70px;
}

.ml-75 {
  margin-left: 75px;
}

.ml-80 {
  margin-left: 80px;
}

.ml-85 {
  margin-left: 85px;
}

.ml-90 {
  margin-left: 90px;
}

.ml-95 {
  margin-left: 95px;
}

.ml-100 {
  margin-left: 100px;
}

.ml-105 {
  margin-left: 105px;
}

.ml-110 {
  margin-left: 110px;
}

.ml-115 {
  margin-left: 115px;
}

.ml-120 {
  margin-left: 120px;
}

.ml-125 {
  margin-left: 125px;
}

.ml-130 {
  margin-left: 130px;
}

.ml-135 {
  margin-left: 135px;
}

.ml-140 {
  margin-left: 140px;
}

.ml-145 {
  margin-left: 145px;
}

.ml-150 {
  margin-left: 150px;
}

.ml-155 {
  margin-left: 155px;
}

.ml-160 {
  margin-left: 160px;
}

.ml-165 {
  margin-left: 165px;
}

.ml-170 {
  margin-left: 170px;
}

.ml-175 {
  margin-left: 175px;
}

.ml-180 {
  margin-left: 180px;
}

.ml-185 {
  margin-left: 185px;
}

.ml-190 {
  margin-left: 190px;
}

.ml-195 {
  margin-left: 195px;
}

.ml-200 {
  margin-left: 200px;
}

.mr-5 {
  margin-right: 5px;
}

.mr-10 {
  margin-right: 10px;
}

.mr-15 {
  margin-right: 15px;
}

.mr-20 {
  margin-right: 20px;
}

.mr-25 {
  margin-right: 25px;
}

.mr-30 {
  margin-right: 30px;
}

.mr-35 {
  margin-right: 35px;
}

.mr-40 {
  margin-right: 40px;
}

.mr-45 {
  margin-right: 45px;
}

.mr-50 {
  margin-right: 50px;
}

.mr-55 {
  margin-right: 55px;
}

.mr-60 {
  margin-right: 60px;
}

.mr-65 {
  margin-right: 65px;
}

.mr-70 {
  margin-right: 70px;
}

.mr-75 {
  margin-right: 75px;
}

.mr-80 {
  margin-right: 80px;
}

.mr-85 {
  margin-right: 85px;
}

.mr-90 {
  margin-right: 90px;
}

.mr-95 {
  margin-right: 95px;
}

.mr-100 {
  margin-right: 100px;
}

.mr-105 {
  margin-right: 105px;
}

.mr-110 {
  margin-right: 110px;
}

.mr-115 {
  margin-right: 115px;
}

.mr-120 {
  margin-right: 120px;
}

.mr-125 {
  margin-right: 125px;
}

.mr-130 {
  margin-right: 130px;
}

.mr-135 {
  margin-right: 135px;
}

.mr-140 {
  margin-right: 140px;
}

.mr-145 {
  margin-right: 145px;
}

.mr-150 {
  margin-right: 150px;
}

.mr-155 {
  margin-right: 155px;
}

.mr-160 {
  margin-right: 160px;
}

.mr-165 {
  margin-right: 165px;
}

.mr-170 {
  margin-right: 170px;
}

.mr-175 {
  margin-right: 175px;
}

.mr-180 {
  margin-right: 180px;
}

.mr-185 {
  margin-right: 185px;
}

.mr-190 {
  margin-right: 190px;
}

.mr-195 {
  margin-right: 195px;
}

.mr-200 {
  margin-right: 200px;
}

.pt-5 {
  padding-top: 5px;
}

.pt-10 {
  padding-top: 10px;
}

.pt-15 {
  padding-top: 15px;
}

.pt-20 {
  padding-top: 20px;
}

.pt-25 {
  padding-top: 25px;
}

.pt-30 {
  padding-top: 30px;
}

.pt-35 {
  padding-top: 35px;
}

.pt-40 {
  padding-top: 40px;
}

.pt-45 {
  padding-top: 45px;
}

.pt-50 {
  padding-top: 50px;
}

.pt-55 {
  padding-top: 55px;
}

.pt-60 {
  padding-top: 60px;
}

.pt-65 {
  padding-top: 65px;
}

.pt-70 {
  padding-top: 70px;
}

.pt-75 {
  padding-top: 75px;
}

.pt-80 {
  padding-top: 80px;
}

.pt-85 {
  padding-top: 85px;
}

.pt-90 {
  padding-top: 90px;
}

.pt-95 {
  padding-top: 95px;
}

.pt-100 {
  padding-top: 100px;
}

.pt-105 {
  padding-top: 105px;
}

.pt-110 {
  padding-top: 110px;
}

.pt-115 {
  padding-top: 115px;
}

.pt-120 {
  padding-top: 120px;
}

.pt-125 {
  padding-top: 125px;
}

.pt-130 {
  padding-top: 130px;
}

.pt-135 {
  padding-top: 135px;
}

.pt-140 {
  padding-top: 140px;
}

.pt-145 {
  padding-top: 145px;
}

.pt-150 {
  padding-top: 150px;
}

.pt-155 {
  padding-top: 155px;
}

.pt-160 {
  padding-top: 160px;
}

.pt-165 {
  padding-top: 165px;
}

.pt-170 {
  padding-top: 170px;
}

.pt-175 {
  padding-top: 175px;
}

.pt-180 {
  padding-top: 180px;
}

.pt-185 {
  padding-top: 185px;
}

.pt-190 {
  padding-top: 190px;
}

.pt-195 {
  padding-top: 195px;
}

.pt-200 {
  padding-top: 200px;
}

.pb-5 {
  padding-bottom: 5px;
}

.pb-10 {
  padding-bottom: 10px;
}

.pb-15 {
  padding-bottom: 15px;
}

.pb-20 {
  padding-bottom: 20px;
}

.pb-25 {
  padding-bottom: 25px;
}

.pb-30 {
  padding-bottom: 30px;
}

.pb-35 {
  padding-bottom: 35px;
}

.pb-40 {
  padding-bottom: 40px;
}

.pb-45 {
  padding-bottom: 45px;
}

.pb-50 {
  padding-bottom: 50px;
}

.pb-55 {
  padding-bottom: 55px;
}

.pb-60 {
  padding-bottom: 60px;
}

.pb-65 {
  padding-bottom: 65px;
}

.pb-70 {
  padding-bottom: 70px;
}

.pb-75 {
  padding-bottom: 75px;
}

.pb-80 {
  padding-bottom: 80px;
}

.pb-85 {
  padding-bottom: 85px;
}

.pb-90 {
  padding-bottom: 90px;
}

.pb-95 {
  padding-bottom: 95px;
}

.pb-100 {
  padding-bottom: 100px;
}

.pb-105 {
  padding-bottom: 105px;
}

.pb-110 {
  padding-bottom: 110px;
}

.pb-115 {
  padding-bottom: 115px;
}

.pb-120 {
  padding-bottom: 120px;
}

.pb-125 {
  padding-bottom: 125px;
}

.pb-130 {
  padding-bottom: 130px;
}

.pb-135 {
  padding-bottom: 135px;
}

.pb-140 {
  padding-bottom: 140px;
}

.pb-145 {
  padding-bottom: 145px;
}

.pb-150 {
  padding-bottom: 150px;
}

.pb-155 {
  padding-bottom: 155px;
}

.pb-160 {
  padding-bottom: 160px;
}

.pb-165 {
  padding-bottom: 165px;
}

.pb-170 {
  padding-bottom: 170px;
}

.pb-175 {
  padding-bottom: 175px;
}

.pb-180 {
  padding-bottom: 180px;
}

.pb-185 {
  padding-bottom: 185px;
}

.pb-190 {
  padding-bottom: 190px;
}

.pb-195 {
  padding-bottom: 195px;
}

.pb-200 {
  padding-bottom: 200px;
}

.pl-5 {
  padding-left: 5px;
}

.pl-10 {
  padding-left: 10px;
}

.pl-15 {
  padding-left: 15px;
}

.pl-20 {
  padding-left: 20px;
}

.pl-25 {
  padding-left: 25px;
}

.pl-30 {
  padding-left: 30px;
}

.pl-35 {
  padding-left: 35px;
}

.pl-40 {
  padding-left: 40px;
}

.pl-45 {
  padding-left: 45px;
}

.pl-50 {
  padding-left: 50px;
}

.pl-55 {
  padding-left: 55px;
}

.pl-60 {
  padding-left: 60px;
}

.pl-65 {
  padding-left: 65px;
}

.pl-70 {
  padding-left: 70px;
}

.pl-75 {
  padding-left: 75px;
}

.pl-80 {
  padding-left: 80px;
}

.pl-85 {
  padding-left: 85px;
}

.pl-90 {
  padding-left: 90px;
}

.pl-95 {
  padding-left: 95px;
}

.pl-100 {
  padding-left: 100px;
}

.pl-105 {
  padding-left: 105px;
}

.pl-110 {
  padding-left: 110px;
}

.pl-115 {
  padding-left: 115px;
}

.pl-120 {
  padding-left: 120px;
}

.pl-125 {
  padding-left: 125px;
}

.pl-130 {
  padding-left: 130px;
}

.pl-135 {
  padding-left: 135px;
}

.pl-140 {
  padding-left: 140px;
}

.pl-145 {
  padding-left: 145px;
}

.pl-150 {
  padding-left: 150px;
}

.pl-155 {
  padding-left: 155px;
}

.pl-160 {
  padding-left: 160px;
}

.pl-165 {
  padding-left: 165px;
}

.pl-170 {
  padding-left: 170px;
}

.pl-175 {
  padding-left: 175px;
}

.pl-180 {
  padding-left: 180px;
}

.pl-185 {
  padding-left: 185px;
}

.pl-190 {
  padding-left: 190px;
}

.pl-195 {
  padding-left: 195px;
}

.pl-200 {
  padding-left: 200px;
}

.pr-5 {
  padding-right: 5px;
}

.pr-10 {
  padding-right: 10px;
}

.pr-15 {
  padding-right: 15px;
}

.pr-20 {
  padding-right: 20px;
}

.pr-25 {
  padding-right: 25px;
}

.pr-30 {
  padding-right: 30px;
}

.pr-35 {
  padding-right: 35px;
}

.pr-40 {
  padding-right: 40px;
}

.pr-45 {
  padding-right: 45px;
}

.pr-50 {
  padding-right: 50px;
}

.pr-55 {
  padding-right: 55px;
}

.pr-60 {
  padding-right: 60px;
}

.pr-65 {
  padding-right: 65px;
}

.pr-70 {
  padding-right: 70px;
}

.pr-75 {
  padding-right: 75px;
}

.pr-80 {
  padding-right: 80px;
}

.pr-85 {
  padding-right: 85px;
}

.pr-90 {
  padding-right: 90px;
}

.pr-95 {
  padding-right: 95px;
}

.pr-100 {
  padding-right: 100px;
}

.pr-105 {
  padding-right: 105px;
}

.pr-110 {
  padding-right: 110px;
}

.pr-115 {
  padding-right: 115px;
}

.pr-120 {
  padding-right: 120px;
}

.pr-125 {
  padding-right: 125px;
}

.pr-130 {
  padding-right: 130px;
}

.pr-135 {
  padding-right: 135px;
}

.pr-140 {
  padding-right: 140px;
}

.pr-145 {
  padding-right: 145px;
}

.pr-150 {
  padding-right: 150px;
}

.pr-155 {
  padding-right: 155px;
}

.pr-160 {
  padding-right: 160px;
}

.pr-165 {
  padding-right: 165px;
}

.pr-170 {
  padding-right: 170px;
}

.pr-175 {
  padding-right: 175px;
}

.pr-180 {
  padding-right: 180px;
}

.pr-185 {
  padding-right: 185px;
}

.pr-190 {
  padding-right: 190px;
}

.pr-195 {
  padding-right: 195px;
}

.pr-200 {
  padding-right: 200px;
}

.bor {
  border: 1px solid var(--border);
}

.bor-top {
  border-top: 1px solid var(--border);
}

.bor-left {
  border-left: 1px solid var(--border);
}

.bor-bottom {
  border-bottom: 1px solid var(--border);
}

.bor-right {
  border-right: 1px solid var(--border);
}

.border-none {
  border: none !important;
}

.text-justify {
  text-align: justify;
}

.image img {
  width: 100%;
}

.primary-color {
  color: var(--primary-color);
}

.primary-hover {
  transition: var(--transition);
}
.primary-hover:hover {
  color: var(--primary-color);
}

.secondary-bg {
  background-color: var(--secondary-color);
}

.sub-bg {
  background-color: var(--sub-bg);
}

.bg-image {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.overlay, .gallery__image {
  position: relative;
}
.overlay::before, .gallery__image::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.radius-10 {
  border-radius: 10px;
}

.fw-600 {
  font-weight: 600;
}

.lightPara-color {
  color: var(--paragraph-light);
}

.star i {
  color: var(--warning);
  font-size: 14px;
}

/* Buttons — a clean color/elevation transition instead of the old circular
   black/white wipe (that gimmick doesn't read as premium-SaaS; a flat pill
   with a subtle hover shift and lift does). */
.btn-one, .btn-one-light, .btn-two {
  display: inline-block;
  vertical-align: middle;
  background-color: var(--primary-color);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  padding: 13px 30px;
  transition: var(--transition);
  position: relative;
  text-align: center;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}
.btn-one:hover, .btn-one-light:hover, .btn-two:hover {
  background-color: var(--primary-hover);
  color: #ffffff;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.btn-one span, .btn-one-light span, .btn-two span {
  position: relative;
  color: inherit;
  z-index: 2;
}

.btn-one-light, .btn-two {
  background-color: #ffffff;
  color: var(--primary-color);
  border: 1px solid var(--border);
}
.btn-one-light:hover, .btn-two:hover {
  background-color: var(--sub-bg);
  color: var(--primary-hover);
  border-color: var(--border-light);
}

.dot .swiper-pagination-bullet {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  transition: 0.6s;
  background-color: transparent;
  opacity: 1;
  position: relative;
  border: 1px solid transparent;
}
.dot .swiper-pagination-bullet::before {
  position: absolute;
  content: "";
  top: 5px;
  left: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #858585;
  transition: 0.6s;
}
.dot .swiper-pagination-bullet.swiper-pagination-bullet-active {
  border: 1px solid var(--primary-color);
}
.dot .swiper-pagination-bullet.swiper-pagination-bullet-active::before {
  background-color: var(--primary-color);
}

.social-icon a {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  transition: var(--transition);
  color: var(--footer-color);
  border: var(--border-1px);
}
.social-icon a:hover {
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
}

.arry-btn button {
  text-align: center;
  width: 60px;
  height: 60px;
  line-height: 60px;
  font-size: 24px;
  border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--paragraph);
  transition: var(--transition);
}
.arry-btn button:hover {
  background-color: var(--primary-color);
  color: #ffffff;
  border: 1px solid var(--primary-color);
}
.arry-btn .active {
  background-color: var(--primary-color);
  color: #ffffff;
  border: 1px solid var(--primary-color);
}

.arry-prev {
  text-align: center;
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--paragraph);
  transition: var(--transition);
}
.arry-prev:hover {
  background-color: var(--primary-color);
  color: #ffffff;
  border: 1px solid var(--primary-color);
}

.arry-next {
  text-align: center;
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  border-radius: 50%;
  transition: var(--transition);
  background-color: var(--primary-color);
  color: #ffffff;
  border: 1px solid var(--primary-color);
}

.nav-pills .nav-item .nav-link {
  font-size: 14px;
  padding: 0;
  background-color: transparent;
  border-radius: 0px;
  line-height: 12px;
  font-weight: 600;
  color: var(--footer-color);
  transition: var(--transition);
}
.nav-pills .nav-item .nav-link:hover {
  color: var(--white);
}
.nav-pills .nav-item .nav-link.active {
  color: var(--white);
  position: relative;
}
.nav-pills .nav-item .nav-link.active::after {
  position: absolute;
  content: "";
  left: 10px;
  top: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--primary-color);
}

.off-btn {
  border: var(--border-1px);
  padding: 10px 18px;
  border-radius: 100px;
  font-weight: 600;
}

.off-tag {
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  border-radius: 50%;
  transition: var(--transition);
  background-color: #ffffff;
  box-shadow: var(--shadow-sm);
  color: var(--primary-color);
  font-size: 19px;
  font-weight: 600;
  line-height: 25px;
  text-align: center;
  text-transform: uppercase;
  padding-top: 15px;
}

.video__btn-wrp {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.video-btn {
  position: relative;
  text-align: center;
  display: inline-block;
  z-index: 2;
}
.video-btn a {
  position: relative;
  color: var(--primary-color);
  font-size: 28px;
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.8);
  width: 90px;
  height: 90px;
  line-height: 90px;
  border-radius: 50%;
  display: block;
  transition: 0.4s;
}

.video-pulse::after,
.video-pulse::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  border: 1px solid rgba(255, 255, 255, 0.8);
  opacity: 0.7;
  left: 0;
  top: 0;
  border-radius: 50%;
  -webkit-animation-duration: 2.5s;
  animation-duration: 2.5s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-name: video-animation;
  animation-name: video-animation;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.video-pulse::before {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

@-webkit-keyframes video-animation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    opacity: 0;
    transform: scale(2);
  }
}
@keyframes video-animation {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    opacity: 0;
    transform: scale(2);
  }
}
.radio-btn {
  display: flex;
  align-items: center;
}
.radio-btn p {
  color: var(--span);
  margin-left: 10px;
  font-size: 14px;
}
.radio-btn span {
  width: 20px;
  height: 20px;
  border: 1px solid var(--primary-color);
  border-radius: 50%;
  position: relative;
  cursor: pointer;
}
.radio-btn span::after {
  position: absolute;
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--primary-color);
  top: 6px;
  left: 6px;
}
.radio-btn .radio-btn-active {
  border: 1px solid var(--primary-color);
  background-color: var(--primary-color);
}
.radio-btn .radio-btn-active::after {
  background-color: #ffffff;
}

.pace {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  z-index: 99999999999999;
  position: fixed;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 400px;
  border: 0px;
  height: 1px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.06);
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}
.pace .pace-progress {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  max-width: 300px;
  position: fixed;
  z-index: 99999999999999;
  display: block;
  position: absolute;
  top: 0;
  right: 100%;
  height: 100%;
  width: 100%;
  background: var(--primary-color);
}

.pace.pace-inactive {
  width: 100vw;
  opacity: 0;
}
.pace.pace-inactive .pace-progress {
  max-width: 100vw;
}

#preloader {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: fixed;
  z-index: 9999999;
  /* Purely visual curtain — same trap as .loading below: it only becomes
     visibility:hidden after a 1.5s transition delay once the load event
     fires, so without this the invisible full-screen div silently eats
     every click/tap on the whole page for the first seconds (longer on
     slow mobile connections). */
  pointer-events: none;
}
#preloader:after {
  content: "";
  position: fixed;
  left: 0;
  height: 50%;
  width: 100%;
  background: var(--black);
  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  -o-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  bottom: 0;
}
#preloader:before {
  content: "";
  position: fixed;
  left: 0;
  height: 50%;
  width: 100%;
  background: var(--black);
  -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  -o-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
  top: 0;
}

/* The two curtain panels used to animate `height: 50%` down to 0. A height
   change is a layout change, and the layout-shift API counts it — measured
   on production, these two pseudo-elements were the source of ALL 26 recorded
   shifts and the entire 0.1217 CLS on every page (Google's "good" threshold
   is 0.1). Sliding them out of frame with `transform` instead produces the
   identical visual result, and transforms are explicitly excluded from CLS.

   The timings were also the biggest perceived-speed problem on the site:
   1s delay + 0.7s slide, then visibility flipped 1.5s after that, so the
   curtain sat over a fully-rendered page for ~2.5s. First contentful paint
   is ~150ms — the page was ready long before the animation let anyone see
   it. Now the curtain starts leaving immediately and is gone in 0.45s. */
#preloader.isdone {
  visibility: hidden;
  transition-delay: 0.5s;
}
#preloader.isdone:after {
  transform: translateY(100%);
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
  transition-delay: 0s;
}
#preloader.isdone:before {
  transform: translateY(-100%);
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
  transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
  #preloader.isdone { transition-delay: 0s; }
  #preloader.isdone:after,
  #preloader.isdone:before { transition: none; }
}

.loading {
  position: fixed;
  width: 100%;
  text-align: center;
  left: 50%;
  top: calc(50% - 40px);
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  font-weight: 400;
  font-size: 24px;
  text-transform: lowercase;
  letter-spacing: 5px;
  z-index: 9999999999;
  /* Purely decorative loading text — it only ever fades to opacity:0 (never
     display:none/visibility:hidden), so without this it silently blocks
     clicks in a full-width band across the vertical center of every page,
     forever, even long after the real page has loaded. */
  pointer-events: none;
}
.loading span {
  -webkit-animation: loading 1.4s infinite alternate;
  animation: loading 1.4s infinite alternate;
}
.loading span:nth-child(1) {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
.loading span:nth-child(2) {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}
.loading span:nth-child(3) {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
.loading span:nth-child(4) {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
.loading span:nth-child(5) {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}
.loading span:nth-child(6) {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
.loading span:nth-child(7) {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.loading.isdone {
  top: 50%;
  opacity: 0;
  -webkit-transition: all 0.8s;
  -o-transition: all 0.8s;
  transition: all 0.8s;
  -webkit-transition-delay: 0.5s;
  -o-transition-delay: 0.5s;
  transition-delay: 0.5s;
  /* Stops the seven per-letter shimmer animations below. They are declared
     `infinite`, so once the preloader had faded to opacity:0 they kept being
     ticked on the main thread for the entire life of the tab — seven
     invisible animations forcing a style recalculation every frame on every
     page. Measured at idle with nothing being touched: ~85 style recalcs per
     1.4s. The element is invisible by this point, so stopping them changes
     nothing visually.

     pointer-events is belt-and-braces: a full-viewport fixed element at
     opacity 0 still swallows taps unless it is taken out of hit-testing. */
  pointer-events: none;
}
.loading.isdone span {
  -webkit-animation: none;
  animation: none;
}

@-webkit-keyframes loading {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes loading {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.mouse-cursor {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  border-radius: 50%;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  visibility: hidden;
}

.cursor-inner {
  width: 6px;
  height: 6px;
  z-index: 10000001;
  background-color: var(--primary-color);
  -webkit-transition: width 0.3s ease-in-out, height 0.3s ease-in-out, margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
  -o-transition: width 0.3s ease-in-out, height 0.3s ease-in-out, margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
  transition: width 0.3s ease-in-out, height 0.3s ease-in-out, margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.cursor-inner.cursor-hover {
  margin-left: -35px;
  margin-top: -35px;
  width: 70px;
  height: 70px;
  background-color: var(--primary-color);
  opacity: 0.3;
}

.cursor-outer {
  margin-left: -12px;
  margin-top: -12px;
  width: 30px;
  height: 30px;
  border: 1px solid var(--primary-color);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 10000000;
  opacity: 0.5;
  -webkit-transition: all 0.08s ease-out;
  -o-transition: all 0.08s ease-out;
  transition: all 0.08s ease-out;
}

.cursor-outer.cursor-hover {
  opacity: 0;
}

@media (pointer: coarse), (hover: none) {
  .mouse-cursor {
    display: none !important;
  }
}

.scroll-up {
  cursor: pointer;
  display: block;
  border-radius: 50px;
  box-shadow: inset 0 0 0 2px var(--border);
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  position: fixed;
  right: 25px;
  bottom: 35px;
  height: 50px;
  width: 50px;
  transition: var(--transition);
}
.scroll-up::after {
  position: absolute;
  font-family: "Font Awesome 6 Pro";
  content: "\f106";
  text-align: center;
  line-height: 50px;
  font-weight: 700;
  font-size: 18px;
  color: var(--primary-color);
  left: 0;
  top: 0;
  height: 50px;
  width: 50px;
  cursor: pointer;
  display: block;
  z-index: 1;
  transition: var(--transition);
}
.scroll-up svg path {
  fill: none;
}
.scroll-up svg.scroll-circle path {
  stroke: var(--primary-color);
  stroke-width: 4px;
  box-sizing: border-box;
  transition: var(--transition);
}

.scroll-up.active-scroll {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.section-header .section-title-icon {
  position: relative;
}
.section-header .section-title-icon span {
  position: absolute;
  left: -30px;
  top: 10px;
}

.short .nice-select {
  border-radius: 6px;
  border: var(--border-1px);
  background-color: var(--black);
}
.short .nice-select .list {
  background-color: var(--black);
  border: var(--border-1px);
}
.short .nice-select .list .option.selected {
  background-color: var(--black);
  font-weight: normal;
}
.short .nice-select .list li:hover {
  background-color: var(--black);
  color: var(--primary-color);
}

.title-icon {
  width: 21px;
  height: 14px;
  position: relative;
}
.title-icon::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  border-radius: 50%;
  transition: var(--transition);
  background-color: var(--primary-color);
  border: 2px solid var(--primary-color);
  top: 0;
  left: 0;
  animation: moveLeft 3s linear infinite;
}
.title-icon::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  border-radius: 50%;
  transition: var(--transition);
  border: 2px solid var(--primary-color);
  top: 0;
  right: 0;
  animation: moveRight 3s linear infinite;
}


.menu-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  background-color: #191919;
  border-bottom: unset;
}
.logo {
  max-width: 158px;
}
.logo img {
  width: 100%;
}

.side_bar {
  position: fixed;
  top: 0;
  right: 0px;
  width: 400px;
  height: 100%;
  background-color: #ffffff;
  box-shadow: var(--shadow-md);
  padding: 40px;
  padding-top: 65px;
  z-index: 9999;
  transition: var(--transition);
}
.side_bar p {
  color: var(--paragraph);
}
.side_bar .info li {
  font-size: 20px;
}
.side_bar .info li i {
  margin-right: 10px;
}
.side_bar .info li a {
  color: var(--heading-color);
}
.side_bar .side_bar_overlay {
  position: fixed;
  right: 0;
  top: 0;
  background-color: rgba(15, 23, 42, 0.5);
  width: 100%;
  height: 100%;
  z-index: -1;
}
.side_bar button {
  position: absolute;
  right: 40px;
  top: 40px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 20px;
  background-color: var(--primary-color);
  color: #ffffff;
  border-radius: 50%;
  transition: var(--transition);
}
.side_bar button:hover {
  transform: rotate(90deg);
}
.side_bar .social-icon a {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 50%;
  transition: var(--transition);
  border: var(--border-1px);
  color: var(--primary-color);
  margin-right: 10px;
}
.side_bar .social-icon a:hover {
  background-color: var(--primary-color);
  color: #ffffff;
  border: 1px solid var(--primary-color);
}

.side_bar_hidden {
  visibility: hidden;
  opacity: 0;
  right: -30px;
}

.banner-area {
  padding-top: 350px;
}
.banner__content {
  position: absolute;
  top: 50%;
  left: 40px;
  transform: translateY(-50%);
}
.banner__content h5 {
  margin-bottom: 20px;
}
.banner__item {
  position: relative;
}

.banner-two {
  overflow: hidden;
  position: relative;
}
.banner-two__arry-btn {
  width: 60px;
  position: absolute;
  top: 50%;
  right: 65px;
  transform: translateY(-50%);
  z-index: 2;
}
.banner-two__arry-btn button {
  background-color: #ffffff;
  border: 1px solid var(--border);
  color: var(--paragraph);
  box-shadow: var(--shadow-sm);
  transform: translateX(30px);
  visibility: hidden;
  opacity: 0;
  transition: var(--transition);
}
.banner-two__arry-btn button:hover {
  background-color: var(--primary-color);
  border: 1px solid var(--primary-color);
  color: #ffffff;
}
.banner-two__arry-btn .active {
  background-color: var(--primary-color);
  border: 1px solid var(--primary-color);
  color: #ffffff;
}
.banner-two__arry-btn .arry-next {
  transition: all 0.6s ease-in-out;
}
.banner-two__content {
  padding-bottom: 100px;
  padding-top: 120px;
}
.banner-two__content h4 {
  font-weight: 600;
  font-size: 16px;
  color: var(--white);
  margin-bottom: 30px;
}
.banner-two__content h1 {
  color: var(--white);
  font-size: 80px;
  line-height: 90px;
  font-weight: 600;
}
.banner-two__content p {
  font-weight: 500;
}
.banner-two__content .banner-two__info span {
  color: var(--border-light);
  font-weight: 500;
  font-size: 14px;
}
.banner-two__slider .slide-bg:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  /* Light scrim (not a dark one) so the near-black hero text stays legible
     over the photo — this is a light theme now, text is dark, not white. */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.88) 100%);
  z-index: -1;
}
.banner-two__slider .slide-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  z-index: -2;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  transform: scale(1);
  -webkit-transition: all 8s ease-out 0s;
  -moz-transition: all 8s ease-out 0s;
  -ms-transition: all 8s ease-out 0s;
  -o-transition: all 8s ease-out 0s;
  transition: all 8s ease-out 0s;
}
.banner-two__slider .swiper-slide-active .slide-bg {
  -webkit-transform: scale(1.12);
  -moz-transform: scale(1.12);
  transform: scale(1.12);
}
.banner-two:hover .banner-two__arry-btn button {
  transform: translateX(0px);
  visibility: visible;
  opacity: 1;
}

.banner-two-light .banner-two__content h4 {
  color: var(--black);
}
.banner-two-light .banner-two__content h1 {
  color: var(--black);
}
.banner-two-light .banner-two__content p {
  color: var(--paragraph-light);
}
.banner-two-light .banner-two__content .banner-two__info span {
  color: var(--paragraph-light);
}
.banner-two-light .banner-two__content .banner-two__info h3 {
  color: var(--black);
}

.page-banner {
  margin-top: 68px;
  text-align: center;
  position: relative;
}
/* Guaranteed-dark scrim so white title/breadcrumb text stays legible over
   the banner photo, independent of the photo's own tone. */
.page-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  z-index: 0;
}
.page-banner .container {
  position: relative;
  z-index: 1;
}
.page-banner h1,
.page-banner h2,
.page-banner h3,
.page-banner h4 {
  color: #ffffff;
}
.page-banner .breadcrumb-list a,
.page-banner .breadcrumb-list span {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

.ad-banner-area {
  overflow: hidden;
}
.ad-banner__content {
  position: relative;
}
.ad-banner__content p {
  font-size: 20px;
  font-weight: 600;
}
.ad-banner__content.left {
  margin-left: 25%;
}
.ad-banner__item {
  position: relative;
  overflow: hidden;
}
.ad-banner__item .bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: var(--transition);
}
.ad-banner__item:hover .bg-image {
  transform: scale(1.1);
}

.product__image {
  position: relative;
  max-width: 280px;
  margin: 0 auto;
}
.product__image .back-image {
  position: absolute;
  top: 20px;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: var(--transition);
}
.product__image .font-image {
  transition: var(--transition);
  opacity: 1;
  visibility: visible;
}
.product__image img {
  width: 100%;
}
.product__content {
  padding: 30px;
}
.product__content del,
.product__content span {
  font-size: 20px;
  font-weight: 600;
}
.product__item {
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  transition: var(--transition);
}
.product__item .wishlist {
  width: 35px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  border-radius: 50%;
  transition: var(--transition);
  border: var(--border-2px);
  position: absolute;
  top: 30px;
  right: 30px;
  transition: var(--transition);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-10px);
  z-index: 1;
}
.product__item .wishlist:hover {
  background-color: var(--primary-color);
  border: 2px solid var(--primary-color);
  color: #ffffff;
}
.product__item:hover {
  transform: translateY(-10px);
}
.product__item:hover .font-image {
  opacity: 0;
  visibility: hidden;
}
.product__item:hover .back-image {
  opacity: 1;
  visibility: visible;
}
.product__item:hover .wishlist {
  opacity: 1;
  visibility: visible;
  transform: translateX(0px);
}
/* Shop filter bar: one component at every breakpoint — a labelled horizontal
   chip rail above the full-width grid (no sidebar). shop.js fills it with
   whatever matches the browsing context: goals, sports, creators, or
   categories. Chips are real links and keep a ≥44px tap height; the rail
   scrolls horizontally instead of wrapping into a wall of filters. */
.shop-filter-bar__label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paragraph-light);
  margin-bottom: 12px;
}
.shop-category-list {
  list-style: none;
  padding: 0 0 4px;
  margin: 0;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.shop-category-list a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  white-space: nowrap;
  border: var(--border-1px);
  border-radius: var(--radius-pill);
  color: var(--paragraph);
  font-weight: 500;
  transition: var(--transition);
}
.shop-category-list a:hover,
.shop-category-list a.active {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: #ffffff;
}
.shop-banner-sub {
  max-width: 620px;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 20px;
}
.shop-search-input {
  height: 48px;
  padding: 0 18px;
  border: var(--border-1px);
  border-radius: var(--radius-pill);
  min-width: 220px;
  color: var(--heading-color);
  background-color: var(--secondary-color);
}
.shop-search-input:focus {
  border-color: var(--primary-color);
}
@media (max-width: 991px) {
  .shop-search-input {
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
  }
}
.product__content p[data-role="category"] {
  color: var(--paragraph-light);
  font-size: 14px;
}
#cartPageActions {
  display: flex;
  margin-top: 30px;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
/* Stretched-link: the whole card navigates via one real link (usually the
   title) whose ::after covers the card via the nearest position:relative
   ancestor, instead of only the image/title being individually clickable.
   Any control that must keep its own click behavior (Add to Cart, Buy Now,
   qty +/-, remove) just needs position:relative + a higher z-index so it
   stays above that ::after in stacking order — no JS/stopPropagation needed. */
.stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.product__cart,
.product__buy-now,
.cp-qty-btn,
.remove-product,
/* The cart DRAWER's controls were missing from this list while the cart
   PAGE's equivalents (.cp-qty-btn, .remove-product) were here from the
   start. Combined with the containment bug fixed just below, that is what
   let a recommendation tile's ::after swallow every tap in the drawer:
   remove and qty were static/auto and sat underneath it. */
.cart-item-remove,
.cart-qty-minus,
.cart-qty-plus,
.cart-drawer__close {
  position: relative;
  z-index: 2;
}

/* MUST stay in the stylesheet, not an inline style attribute.
   The site sends `style-src-attr 'self'` (server/src/index.js), and 'self'
   is not a valid source for inline style attributes — only 'unsafe-inline'
   or a hash/nonce is — so the browser blocks every style="..." attribute on
   the site. This element used to carry an inline position:relative from
   script.js's renderRecommendedProducts(); it was silently dropped, the tile
   stayed position:static, and .stretched-link::after therefore resolved
   against the nearest positioned ancestor it could find -- #cartDrawer
   itself (position:fixed). That turned a 96x172 tile link into an invisible
   390x664 overlay across the entire drawer, so any tap on remove or qty
   added the recommended product instead. Measured before the fix: the
   anchor was the hit-test result at every point from y=120 to y=480.

   Keeping this here means containment no longer depends on an inline style
   the CSP will not apply. */
.cart-recommended__item {
  position: relative;
}

/* Same CSP problem, same fix, on the cart PAGE. renderCartPage() emits these
   four declarations as style="..." attributes, every one of which the browser
   drops. Restated here so they actually apply:
     - .product row: position:relative — each row's title is a .stretched-link,
       and without a positioned row every row's ::after resolved to the same
       far-off ancestor, so the rows' link areas overlapped each other.
       (.remove-product and .cp-qty-btn already carry z-index:2 above, which is
       why the cart page's buttons kept working where the drawer's did not.)
     - the thumbnail's fixed 70x70 box
     - the subtotal's emphasis styling
   The now-inert attributes are left in the JS markup deliberately: removing
   them is a separate, wider cleanup (see the audit note in the commit), and
   they do no harm while these rules are present. */
#cartPageTable .product {
  position: relative;
}
#cartPageTable .product-details img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}
#cartPageTable .product-details h4 a {
  color: inherit;
}
#cartPageTable .cp-subtotal-val {
  color: var(--primary-color);
  font-size: 20px;
  font-weight: 700;
}

/* Tappable product card: the CTA strip at the bottom is the card's single
   anchor, stretched over the whole card (see .stretched-link above), so the
   entire card — image, title, price — is one large add-to-cart tap target.
   No separate Add to Cart / Buy Now buttons exist on cards. */
.product__item--tap {
  cursor: pointer;
  touch-action: manipulation;
}
.product__item--tap:active {
  transform: translateY(0) scale(0.98);
}
.product__tap-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 15px 20px;
  font-weight: 600;
  text-align: center;
  transition: var(--transition);
}
.product__tap-cta i {
  color: var(--primary-color);
  transition: var(--transition);
}
.product__item--tap:hover .product__tap-cta,
.product__item--tap:active .product__tap-cta,
.product__item--tap.added .product__tap-cta {
  background-color: var(--primary-color);
  color: #ffffff;
}
.product__item--tap:hover .product__tap-cta i,
.product__item--tap:active .product__tap-cta i,
.product__item--tap.added .product__tap-cta i,
.product__item--tap:hover .product__tap-cta span,
.product__item--tap:active .product__tap-cta span,
.product__item--tap.added .product__tap-cta span {
  color: #ffffff;
}
/* "Added" feedback: swap the CTA label for a confirmation flash */
.product__tap-cta-added {
  display: none;
}
.product__item--tap.added .product__tap-cta-default {
  display: none;
}
.product__item--tap.added .product__tap-cta-added {
  display: inline-flex;
  align-items: center;
}

.product__cart {
  text-align: center;
  padding: 20px;
  position: relative;
  font-weight: 600;
}
.product__cart span,
.product__cart i {
  position: relative;
  z-index: 1;
  transition: var(--transition);
}
.product__cart::after, .product__cart::before {
  position: absolute;
  content: "";
  background-color: var(--primary-color);
  width: 0%;
  height: 100%;
  right: 0;
  top: 0;
  transition: var(--transition);
}
.product__cart::before {
  left: 0;
}
.product__cart:hover::after, .product__cart:hover::before {
  width: 50%;
}
.product__cart:hover i,
.product__cart:hover span {
  color: #ffffff;
}
.product__slider-item {
  border-radius: 10px;
  position: relative;
}
.hero-product-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.hero-product-row .product__slider-item {
  flex: 1 1 220px;
  max-width: 260px;
}
.product__slider-item .wishlist {
  width: 35px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  border-radius: 50%;
  transition: var(--transition);
  border: var(--border-2px);
  position: absolute;
  top: 30px;
  right: 30px;
  transition: var(--transition);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-10px);
  z-index: 1;
}
.product__slider-item .wishlist:hover {
  background-color: var(--primary-color);
  border: 2px solid var(--primary-color);
  color: #ffffff;
}
.product__slider-item:hover .wishlist {
  opacity: 1;
  visibility: visible;
  transform: translateX(0px);
}

.get-now-area {
  overflow: hidden;
}
.get-now__image {
  max-width: 648px;
  height: 648px;
  line-height: 648px;
  margin: 0 auto;
  border-radius: 50%;
  background-color: var(--sub-bg);
  position: relative;
}
.get-now__image .get-bg-image {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  max-width: 520px;
  width: 100%;
}
.get-now__image .get-bg-image img {
  width: 100%;
}
.get-now__image .image {
  max-width: 410px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}
.get-now__content ul {
  padding-left: 17px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 50px;
}
.get-now__content ul li {
  font-weight: 600;
  list-style: disc;
}
.get-now__content .get-info {
  font-size: 24px;
}
.get-now__content .get-info span {
  font-weight: 700;
}
.get-now__content .get-info del {
  font-weight: 500;
  margin-right: 20px;
}
.get-now__content .time-up .info span {
  font-size: 18px;
  margin-top: 10px;
}
.get-now__content .time-up .get-time {
  width: 70px;
  height: 70px;
  line-height: 20px;
  text-align: center;
  border-radius: 50%;
  transition: var(--transition);
  padding-top: 10px;
  border: var(--border-1px);
}
.get-now__content .time-up .get-time h3 {
  line-height: 30px;
}
.get-now__content .time-up .get-time span {
  color: var(--footer-color);
  font-weight: 600;
}
.get-now-arry {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  z-index: 2;
}
.get-now-arry i {
  color: var(--paragraph);
  font-size: 26px;
}
.get-now__arry-right {
  left: inherit;
  right: 20px;
}

.cart-page {
  overflow: hidden;
}
.cart-page .column-labels {
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}

.product-details {
  width: 40%;
}
.product-details img {
  width: 80px;
}

.product-price {
  width: 10%;
}

.product-quantity {
  width: 14%;
}
.product-quantity input {
  border: 1px solid var(--border);
  width: 100px;
  text-align: center;
  border-radius: 10px;
}

.product-removal {
  width: 6%;
  text-align: right;
}
.product-removal i {
  transition: var(--transition);
}
.product-removal i:hover {
  color: var(--primary-color) !important;
}

.product-line-price {
  width: 10%;
}

@media screen and (max-width: 768px) {
  .shopping-cart {
    display: none;
  }
  .shopping-cart.mobile-view {
    display: block;
  }
  .shopping-cart.mobile-view .product-details {
    width: 100%;
    text-align: center;
  }
  .shopping-cart.mobile-view .product-price {
    width: 100%;
    text-align: center;
    padding: 5px 0px;
  }
  .shopping-cart.mobile-view .product-quantity {
    width: 100%;
    text-align: center;
    padding: 5px 0px;
  }
  .shopping-cart.mobile-view .product-removal {
    width: 100%;
    text-align: center;
    padding: 5px 0px;
  }
  .shopping-cart.mobile-view .product-line-price {
    width: 100%;
    text-align: center;
    padding: 5px 0px;
  }
}
@media screen and (min-width: 768px) {
  .shopping-cart {
    display: block;
  }
  .shopping-cart.mobile-view {
    display: none;
  }
}
.shop-single {
  overflow: hidden;
}
.shop-single .swiper-slide img {
  border-radius: 10px;
}
.shop-single .shop-singe-tab .nav-pills .nav-link {
  padding-top: 15px;
  padding-bottom: 15px;
}
.shop-single .shop-singe-tab .nav-pills .nav-link::after {
  display: none;
}
.shop-single .shop-singe-tab .nav-pills .nav-link.active {
  background: transparent;
}
.shop-single .shop-singe-tab .nav-pills .nav-link.active h4 {
  color: var(--primary-color);
}
.shop-single .shop-slider-thumb img {
  cursor: pointer;
}
.shop-single .shop-slider-thumb .swiper-slide {
  border: 1px solid transparent;
  opacity: 0.5;
  transition: var(--transition);
}
.shop-single .shop-slider-thumb .swiper-slide.swiper-slide-thumb-active {
  border: 1px solid var(--primary-color);
  opacity: 1;
  border-radius: 10px;
}
.category__image {
  position: relative;
  width: 210px;
  height: 210px;
  line-height: 210px;
  text-align: center;
  border-radius: 50%;
  transition: var(--transition);
  margin: 0 auto;
  border: 1px solid #232323;
}
.category__image .category-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--sub-bg);
  width: 170px;
  height: 170px;
  line-height: 170px;
  text-align: center;
  border-radius: 50%;
  transition: var(--transition);
}
.category__item:hover h4 a {
  color: var(--primary-color);
}
.category__item:hover .category__image .category-icon {
  background-color: var(--primary-color);
}
.category__item:hover .category__image .category-icon img {
  /* Guaranteed-correct white icon on hover, rather than chasing an exact
     brand hue through a fragile invert/sepia/hue-rotate filter recipe. */
  filter: brightness(0) invert(1);
}

.category-two__item:hover .category__image .category-icon {
  background-color: rgba(26, 26, 26, 0.7);
}
.category-two__item:hover .category__image .category-icon img {
  filter: none;
}

.discount-area {
  overflow: hidden;
  position: relative;
}
/* Light scrim so the (now dark) heading/paragraph text stays legible over
   whatever background photo is set via data-background, regardless of the
   photo's own tone — mirrors the same technique used on the hero. */
.discount-area.bg-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.9);
  z-index: 0;
}
.discount-area.bg-image > .container {
  position: relative;
  z-index: 1;
}

.testimonial {
  overflow: hidden;
}
.testimonial__head-wrp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.testimonial__item p {
  font-size: 20px;
  line-height: 35px;
  color: var(--footer-color);
}
.testimonial__item .testi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.testimonial__item .testi-header .testi-content span {
  color: var(--primary-color);
  padding-top: 10px;
  font-weight: 600;
}
.testimonial__item .testi-header i {
  font-size: 60px;
  color: var(--primary-color);
}
.testimonial__image {
  position: relative;
}
.testimonial__image img {
  width: 100%;
}
.testimonial__image::after {
  position: absolute;
  content: url(../../assets/images/testimonial/testimonial-line.png);
  left: -80px;
  top: 5px;
}

.blog {
  position: relative;
}
.blog__head-wrp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.blog__item-left {
  border-radius: 10px;
  border: var(--border-1px);
  background-color: var(--sub-bg);
  padding: 30px;
  position: relative;
}
.blog__item-left-content h3 {
  margin-top: 30px;
}
.blog__item-left-content h3 a:hover {
  color: var(--primary-color);
}
.blog__item-left-content p {
  margin-top: 20px;
  margin-bottom: 40px;
}
.blog__item-left-content-info {
  color: var(--footer-color);
}
.blog__item-left-dot-wrp {
  position: absolute;
  left: 30px;
  bottom: 30px;
  z-index: 1;
}
.blog__item-right {
  border: var(--border-1px);
  border-radius: 10px;
  padding: 30px;
  background-color: var(--sub-bg);
}
.blog__item-right h3 a {
  margin: 20px 0;
}
.blog__item-right h3 a:hover {
  color: var(--primary-color);
}
.blog__item-right span {
  color: var(--footer-color);
}
.blog__tag {
  color: var(--primary-color) !important;
  padding: 2px 10px;
  background-color: var(--sub-bg);
  border-radius: 100px;
}

.blog-slingle .image img {
  border-radius: 10px;
}
.blog-slingle .item {
  padding: 0 30px;
}
.blog-slingle .info span a {
  color: var(--span);
}
.blog-slingle .info span a:hover {
  color: var(--primary-color);
}
.blog-slingle .info_dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--border);
  margin: 0 10px;
}
.blog-slingle .list_here {
  padding-left: 30px;
}
.blog-slingle .list_here li {
  list-style-type: disc;
}
.blog-slingle .blog_testimonial {
  padding: 40px 65px;
  border-radius: 10px;
}
.blog-slingle .blog_testimonial p {
  font-size: 24px;
  line-height: 40px;
  color: var(--heading-color);
}
.blog-slingle .tag-share {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.blog-slingle .tag-share .tag a {
  padding: 2px 10px;
  background-color: var(--sub-bg);
  border-radius: 30px;
  color: var(--span);
  margin-left: 2px;
  font-size: 14px;
}
.blog-slingle .tag-share .share a {
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--span);
  margin-left: 2px;
}
.blog-slingle .tag-share .share a:hover {
  border: 1px solid var(--primary-color);
  color: var(--primary-color);
}
.blog-slingle .arry a i {
  transition: var(--transition);
}
.blog-slingle .arry a:hover i {
  color: var(--primary-color);
}
.blog-slingle .recent-post {
  padding: 20px;
  display: flex;
  align-items: center;
}
.blog-slingle .recent-post .con {
  padding-left: 15px;
}
.blog-slingle .recent-post .con span {
  font-size: 14px;
  padding-bottom: 3px;
}
.blog-slingle .recent-post .con h5 a {
  text-transform: capitalize;
}
.blog-slingle .recent-post .con h5 a:hover {
  color: var(--primary-color);
}
.blog-slingle .right-item {
  border-radius: 10px;
  padding: 30px;
}
.blog-slingle .right-item h4 {
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  text-transform: capitalize;
}
.blog-slingle .right-item .search {
  position: relative;
}
.blog-slingle .right-item .search input {
  width: 100%;
  padding: 15px 20px;
  background-color: #dadada;
  border: none;
  border-radius: 10px;
}
.blog-slingle .right-item .search input::placeholder {
  color: #646464;
}
.blog-slingle .right-item .search button {
  color: #646464;
  position: absolute;
  right: 20px;
  top: 15px;
  font-size: 20px;
  background-color: #dadada;
}
.blog-slingle .right-item .right_list {
  padding-left: 30px;
}
.blog-slingle .right-item .right_list li {
  list-style-type: disc;
}
.blog-slingle .right-item .tags a {
  padding: 5px 10px;
}
.blog-slingle .right-item a {
  text-transform: capitalize;
}
.blog-slingle .right-item a:hover {
  color: var(--primary-color);
}

.blog-slingle.blog-area h3 a:hover {
  color: var(--primary-color);
}
.blog-slingle.blog-area .item {
  padding: 30px;
  border-radius: 10px;
}
.blog-slingle.blog-area .go_blog {
  width: 42px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  color: var(--white);
  border-radius: 10px;
  background-color: var(--primary-color);
}
.blog-slingle.blog-area .go_blog i {
  transform: rotate(-45deg);
  transition: var(--transition);
}
.blog-slingle.blog-area .go_blog:hover i {
  transform: rotate(0deg);
}
.blog-slingle.blog-area .image-tag a {
  padding: 2px 10px;
  border-radius: 30px;
  color: var(--span);
  font-size: 14px;
}
.blog-slingle.blog-area .image-tag a:first-child {
  background-color: var(--primary-color);
}
.blog-slingle.blog-area .image-tag a:last-child {
  background-color: var(--sub-bg);
  margin-left: 3px;
}
.blog-slingle.blog-area .video_item {
  position: relative;
}
.blog-slingle.blog-area .video_item .video-btn-wrp {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.blog-pegi {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  margin-right: 5px;
}
.blog-pegi:hover {
  background-color: var(--primary-color);
  color: var(--white);
}

.blog-pegi.active {
  background-color: var(--primary-color);
  color: var(--white);
}

.brand__item {
  cursor: pointer;
}
.brand__item img {
  transition: var(--transition);
  filter: grayscale(1);
  opacity: 0.55;
}
.brand__item:hover img {
  filter: none;
  opacity: 1;
}

.service-area {
  overflow: hidden;
}
.service__icon {
  width: 90px;
  height: 90px;
  line-height: 90px;
  text-align: center;
  border-radius: 50%;
  transition: var(--transition);
  border: var(--border-1px);
  position: relative;
}
.service__icon img {
  position: relative;
  z-index: 2;
}
.service__icon::after {
  position: absolute;
  content: "";
  transition-duration: 700ms;
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: 1;
  transform: scale(0);
}
.service__content p {
  margin-top: 10px;
  font-size: 14px;
}
.service__image {
  position: relative;
}
.service__image .service-header {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  justify-content: center;
}
.service__item {
  display: flex;
  align-items: center;
  gap: 15px;
}
.service__item:hover .service__icon {
  border: 1px solid transparent;
}
.service__item:hover .service__icon::after {
  background-color: var(--primary-color);
  transform: scale(1);
}

.gallery__image {
  position: relative;
}
.gallery__image img {
  border-radius: 10px;
}
.gallery__image::before {
  background: linear-gradient(180deg, rgba(26, 26, 26, 0) 0%, #1a1a1a 100%);
  border-radius: 10px;
}
.gallery__content {
  position: absolute;
  bottom: 40px;
  left: 40px;
}
.gallery__content h3 a {
  color: #ffffff;
}
.gallery__content h3 a:hover {
  color: var(--primary-color);
}
.gallery__content p {
  color: rgba(255, 255, 255, 0.75);
}
.gallery__item {
  position: relative;
}
.gallery__item .off-tag {
  position: absolute;
  top: 40px;
  left: 40px;
  z-index: 1;
}

.view-area {
  position: relative;
}
.view__bg {
  position: absolute;
  left: 0;
  bottom: -130px;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.view__left-content {
  padding: 40px;
  padding-top: 30px;
}
.view__left-content p {
  margin-top: 30px;
  margin-bottom: 50px;
}
@media (max-width: 575px) {
  .view__left-content {
    height: 490px;
  }
  .view__left-content h2 {
    font-size: 30px;
    line-height: 40px;
  }
  .view__left-content p {
    margin-bottom: 30px;
  }
  .view__left-content a {
    margin-top: 10px;
  }
}
.view__left-content .off-btn {
  float: right;
}
@media (max-width: 575px) {
  .view__left-content .off-btn {
    float: left;
    display: inline-block;
  }
}
.view__left-item {
  border-radius: 10px;
  overflow: hidden;
}
.view__content {
  padding: 20px;
  padding-left: 40px;
}
.view__content p {
  margin-top: 20px;
  margin-bottom: 30px;
  font-weight: 600;
}
.view__image {
  width: 245px;
}
.view__image img {
  width: 100%;
}
.view__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--sub-bg);
  border-radius: 10px;
  overflow: hidden;
}

.text-slider {
  overflow: hidden;
  font-size: 80px;
  line-height: 65px;
  color: var(--heading-color);
  text-transform: capitalize;
  font-family: var(--prosto-one);
}

.marquee-wrapper {
  position: relative;
  height: 105px;
  overflow: hidden;
  white-space: nowrap;
}
/* ---------------------------------------------------------------------
   Marquee — transform-driven, not `left`-driven.

   These two keyframes used to animate the `left` property, infinitely, at
   30s linear. `left` is a layout property: every frame forced a layout of
   the document and a repaint, forever, on any page carrying a ticker.
   Measured on production before this change, with the page completely idle
   and nothing being touched:

       84 Layouts + 173 Paints per 1.4 seconds

   Cancelling every animation on the page dropped that to 7 Layouts and 9
   Paints, and this marquee was the only running animation touching a
   layout property. That constant main-thread work is what made the drawer
   and its accordion stutter — they were never slow in themselves, they
   were competing with a permanent full-document relayout.

   The element is width:200% and absolutely positioned, so `left: -100%`
   (100% of the CONTAINING BLOCK) is the same distance as
   translate3d(-50%) (50% of the ELEMENT). The motion is identical; only
   the property changes.
   --------------------------------------------------------------------- */
.marquee-inner {
  position: absolute;
  display: inline-flex;
  width: 200%;
  /* The animation no longer sets `left`, so the base offset has to be
     stated here or the track starts at its static position. */
  left: 0;
  /* Own compositor layer, established up front so the first frame doesn't
     pay for layer creation. */
  will-change: transform;
  backface-visibility: hidden;
}
.marquee-item {
  float: left;
}
.marquee-item img {
  margin-top: -5px;
}

.marquee-inner.to-right {
  animation: marqueeRight 30s linear infinite;
}
@keyframes marqueeRight {
  0% { transform: translate3d(-50%, 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

.marquee-inner.to-left {
  animation: marqueeLeft 30s linear infinite;
}
@keyframes marqueeLeft {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

/* The people marquee used to centre itself with top:50% +
   transform: translateY(-50%), because its track was absolutely positioned;
   a transform-based scroll would have overwritten that centring, so two
   extra keyframe sets existed here purely to fold the -50% back into the
   scroll transform.

   That whole arrangement is gone. The track is in normal flow now and its
   wrapper is a flex container that centres it (home-dynamic.css), so there
   is no translateY to preserve and the plain marqueeLeft/marqueeRight
   keyframes above apply to it unchanged. */

@media (prefers-reduced-motion: reduce) {
  .marquee-inner.to-left,
  .marquee-inner.to-right { animation: none; }
}
.form-area form input {
  width: 100%;
  padding: 15px 20px;
  background-color: var(--sub-bg);
  border: 1px solid var(--border);
  color: var(--white);
  border-radius: 10px;
}
.form-area form textarea {
  width: 100%;
  padding: 15px 20px;
  background-color: var(--sub-bg);
  border: 1px solid var(--border);
  margin-top: 30px;
  height: 200px;
  resize: none;
  border-radius: 10px;
}
.form-area form button {
  padding: 12px 26px;
  background-color: var(--primary-color);
  font-weight: 600;
  color: var(--white);
  border-radius: 10px;
}
.form-area form button i {
  padding-left: 6px;
  transform: rotate(-40deg);
  transition: var(--transition);
}
.form-area form button:hover i {
  transform: rotate(0deg);
}

.contact form input {
  margin-bottom: 30px;
  transition: var(--transition);
}
.contact form input:focus {
  border: 1px solid var(--primary-color);
}
.contact form textarea {
  transition: var(--transition);
  color: var(--white);
}
.contact form textarea:focus {
  border: 1px solid var(--primary-color);
}
.contact form .nice-select {
  width: 100%;
  border: 1px solid var(--border);
  font-size: 16px;
  line-height: 1px;
  padding: 30px 20px;
  background-color: var(--sub-bg);
  border-radius: 10px;
}
.contact form .nice-select span {
  color: var(--span);
}
.contact form .nice-select ul {
  width: 100%;
  border-radius: 10px;
}
.contact form .nice-select ul li {
  color: var(--black);
  font-weight: 600;
}
.contact .content {
  color: var(--white);
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../../assets/images/contact/01.jpg);
  padding: 40px 30px;
}
.contact .content h2 {
  color: var(--white);
  padding-bottom: 40px;
}
.contact .content .arry {
  margin: 50px 0;
}
.contact .content ul li {
  margin-bottom: 20px;
}
.contact .content ul li a {
  color: var(--white);
}
.contact .content ul li a i {
  color: var(--white);
  width: 40px;
  min-width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.2);
  margin-right: 10px;
}

.google-map iframe {
  width: 100%;
  height: 650px;
  margin-bottom: -10px;
}

.login-area {
  overflow: hidden;
}
.login__image {
  position: relative;
}
.login__image img {
  width: 100%;
  border-radius: 10px;
}
.login__image .btn-wrp {
  position: absolute;
  top: 50%;
  right: -50px;
  transform: translateY(-50%) rotate(-90deg);
}
.login__image .btn-wrp a {
  padding: 10px 20px;
  border: 1px solid var(--white);
  color: var(--white);
  transition: var(--transition);
  border-radius: 10px;
}
.login__image .btn-wrp a:hover {
  background-color: var(--primary-color);
  border: 1px solid var(--primary-color);
}
.login__image .btn-wrp .active {
  background-color: var(--primary-color);
  border: 1px solid var(--primary-color);
  margin: 0 15px;
}
.login__item {
  padding: 65px;
  border: var(--border-1px);
  border-radius: 10px;
}
.login__form form input {
  padding-left: 0;
  border: none;
  border-bottom: var(--border-1px);
  background-color: transparent;
  color: var(--white);
  border-radius: 0px;
}
.login__form form input:focus {
  border-bottom: 1px solid var(--primary-color);
}
.login__form form input::placeholder {
  color: var(--white);
  font-weight: 400;
}
.login__form form button {
  width: 100%;
  border: 1px solid var(--border);
  transition: var(--transition);
}
.login__form form button:hover {
  background-color: var(--black);
  color: var(--primary-color);
}
.login__form .radio-btn .radio-btn-active {
  background-color: var(--primary-color);
  border: 1px solid var(--white);
}
.login__form .radio-btn p {
  color: var(--white);
}
.login__form .radio-btn span {
  background-color: var(--white);
}
.login__form .or {
  color: var(--white);
  text-align: center;
  display: block;
  font-weight: 500;
}
.error {
  text-align: center;
  overflow: hidden;
}
.error h1 {
  font-size: 300px;
  color: var(--white);
  font-weight: 500;
  line-height: 250px;
}

.black-area .btn-one, .black-area .btn-one-light, .black-area .btn-two {
  background-color: var(--primary-color);
  color: var(--black);
}
.black-area .btn-one::after, .black-area .btn-one-light::after, .black-area .btn-two::after {
  background-color: var(--black);
}
.black-area .btn-one:hover, .black-area .btn-one-light:hover, .black-area .btn-two:hover {
  color: var(--primary-color);
}
.black-area .btn-one-light, .black-area .btn-two {
  background-color: var(--black);
  color: var(--primary-color);
}
.black-area .btn-one-light::after, .black-area .btn-two::after {
  background-color: var(--primary-color);
}
.black-area .btn-one-light:hover, .black-area .btn-two:hover {
  color: var(--black);
}
.black-area .category__image {
  border: 1px solid var(--border);
}
.black-area .category__image .category-icon {
  background-color: var(--paragraph);
}
.black-area .brand__item:hover img {
  filter: brightness(1) invert(0);
}
.black-area .footer-title {
  color: var(--black);
}

.gallery-light .gallery__content h3 a {
  color: var(--black);
}
.gallery-light .gallery__content p {
  color: var(--black);
}
.gallery-light .off-tag {
  background-color: var(--black);
}

.footer-area {
  overflow: hidden;
  /* The dark footer photo (set via data-background/JS as an inline style)
     no longer fits a light-only theme — a solid light surface replaces it. */
  background-image: none !important;
  background-color: var(--sub-bg);
  border-top: 1px solid var(--border);
}
.footer__item .footer-title {
  margin-bottom: 25px;
}
.footer__item ul li:not(:last-child) {
  margin-bottom: 6px;
}
.footer__item ul li span {
  display: inline-block;
  width: 10px;
  height: 10px;
  line-height: 10px;
  text-align: center;
  border-radius: 50%;
  transition: var(--transition);
  border: var(--border-1px);
  margin-right: 6px;
  transition: var(--transition);
}
.footer__item ul li a {
  font-size: 14px;
  color: var(--footer-color);
  font-weight: 500;
}
.footer__item ul li a:hover {
  color: var(--primary-color);
}
.footer__item ul li a:hover span {
  border: 1px solid var(--primary-color);
}
.footer__item.newsletter .subscribe {
  position: relative;
}
.footer__item.newsletter .subscribe input {
  width: 100%;
  background-color: var(--sub-bg);
  padding: 16px 24px;
  border-radius: 100px;
  border: var(--border-1px);
  color: var(--white);
}
.footer__item.newsletter .subscribe input::placeholder {
  font-size: 14px;
  color: var(--footer-color);
}
.footer__item.newsletter .subscribe button {
  color: #ffffff;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 50%;
  transition: var(--transition);
  background-color: var(--primary-color);
  font-size: 17px;
  position: absolute;
  top: 6px;
  right: 6px;
}
/* Now holds only the brand mark — copyright/payment/legal all live together
   in .footer__bottombar below instead of splitting across two rows. */
.footer__copy-text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.footer__copy-text .logo {
  max-width: 90px;
}

/* Bottom bar — copyright on one side, legal links + payment icons on the
   other, single subtle row, always the last thing in the footer. */
.footer__bottombar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  padding: 16px 0 30px;
  margin-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer__bottombar-copy {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--footer-color);
}
.footer__bottombar-copy a {
  color: var(--footer-color);
}
.footer__bottombar-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}
.footer__legal a {
  font-size: 12px;
  color: var(--footer-color);
  opacity: 0.85;
  transition: var(--transition);
}
.footer__legal a:hover {
  opacity: 1;
  color: var(--primary-color);
}
.footer__bottombar .payment {
  max-width: 140px;
}
@media (max-width: 575px) {
  .footer__bottombar { justify-content: center; text-align: center; }
  .footer__bottombar-right { justify-content: center; }
}

/* ---------------------------------------------------------------------------
   Mobile footer polish
   Applies to every page: the footer markup is duplicated across 18 HTML files,
   so all of this is deliberately CSS-only.
   --------------------------------------------------------------------------- */

/* The send button is absolutely positioned over the right edge of the field, so
   the input needs a right gutter wide enough to clear it (50px + 6px inset +
   breathing room) or the typed email runs underneath the button. */
.footer__item.newsletter .subscribe input {
  box-sizing: border-box;
  padding-right: 68px;
  /* 16px prevents iOS Safari zooming the page when the field takes focus */
  font-size: 16px;
}

@media (max-width: 991px) {
  /* Reclaim the desktop 65px/50px rhythm, which is disproportionate once the
     four columns stack into a single tall scroll. */
  .footer-area .footer__wrp { padding-top: 44px; padding-bottom: 8px; }
  .footer-area .footer__copy-text { padding-top: 28px; padding-bottom: 22px; }

  /* Each stacked column reads as its own band rather than one long list. */
  .footer-area .footer__item { margin-bottom: 30px; }
  .footer-area .footer__item .footer-title { margin-bottom: 14px; }

  /* Touch targets: a 14px link on a 6px gap is roughly a 20px tap area. Giving
     each row a 44px minimum meets the accessibility floor without visually
     spacing the list out, since the box grows around the text. */
  .footer-area .footer__item ul li:not(:last-child) { margin-bottom: 0; }
  .footer-area .footer__item ul li a {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: 15px;
  }

  .footer-area .footer__item.newsletter .social-icon { margin-top: 24px !important; }

  /* Logo tracks viewport width instead of sitting at a fixed 90px. */
  .footer-area .footer__copy-text .logo { max-width: clamp(76px, 22vw, 110px); }
  .footer-area .footer__copy-text { justify-content: center; }

  /* Legal links also need real tap height, and centred wrapping avoids the
     ragged single-column stack at narrow widths. */
  .footer-area .footer__legal { justify-content: center; gap: 0 18px; }
  .footer-area .footer__legal a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    font-size: 13px;
  }
  .footer-area .footer__bottombar { padding-bottom: 24px; }
  .footer-area .footer__bottombar .payment { max-width: 128px; }
}

/* Nothing in the footer may push the page horizontally at 320px. */
@media (max-width: 400px) {
  .footer-area .footer__item.newsletter .subscribe input { padding-left: 18px; }
  .footer-area .footer__legal { gap: 0 14px; }
  .footer-area .footer__bottombar-copy { font-size: 11.5px; line-height: 1.6; }
}

@keyframes moveLeft {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(7px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes moveRight {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-7px);
  }
  100% {
    transform: translateX(0);
  }
}
@media screen and (max-width: 991px) {
  br {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .section-header h2 {
    font-size: 28px;
    line-height: 40px;
  }
  .pt-130 {
    padding-top: 65px;
  }
  .pb-130 {
    padding-bottom: 65px;
  }
}
@media screen and (max-width: 470px) {
  .nav-pills .nav-item .nav-link {
    padding: 0 5px !important;
    font-size: 12px;
  }
  .nav-pills .nav-item .nav-link.active::after {
    display: none;
  }
}
@media screen and (max-width: 375px) {
  .section-header h2 {
    font-size: 18px;
    line-height: 30px;
  }
}
@media screen and (max-width: 991px) {
  .banner-area .product__dot {
    text-align: center;
  }
  .banner-two__content h4 {
    font-weight: 600;
    font-size: 16px;
    color: var(--white);
    margin-bottom: 30px;
  }
  .banner-two__content h1 {
    color: var(--white);
    font-size: 60px;
    line-height: 74px;
  }
  .banner-two__content p {
    font-weight: 500;
  }
  .banner-two__content .banner-two__info span {
    color: var(--border-light);
    font-weight: 500;
    font-size: 14px;
  }
  .ad-banner__content.left {
    margin-left: 0%;
    padding-left: 65px;
  }
  .ad-banner__item {
    margin-bottom: 30px;
  }
}
@media screen and (max-width: 767px) {
  .banner-area {
    padding-top: 250px;
  }
  .banner-two__arry-btn {
    display: none;
  }
  .banner-two__content h4 {
    font-weight: 600;
    font-size: 16px;
    color: var(--white);
    margin-bottom: 15px;
  }
  .banner-two__content h1 {
    color: var(--white);
    font-size: 30px;
    line-height: 40px;
  }
  .banner-two__content p {
    font-weight: 400;
    font-size: 14px;
    margin-top: 20px;
  }
  .banner-two__content .btn-wrp {
    margin-top: 30px;
  }
}
@media screen and (max-width: 575px) {
  .banner-area {
    padding-top: 200px;
  }
}
@media screen and (max-width: 424px) {
  .banner__content h5 {
    margin-bottom: 15px;
  }
  .banner__content h1 {
    font-size: 28px;
    line-height: 40px;
  }
  .banner__content .btn-one, .banner__content .btn-one-light, .banner__content .btn-two {
    margin-top: 20px;
  }
  .banner-two .btn-wrp a {
    padding: 5px 15px;
  }
  .ad-banner__content {
    padding-left: 20px;
  }
  .ad-banner__content.left {
    padding-left: 20px;
  }
}
@media screen and (max-width: 424px) {
  .page-banner h2 {
    font-size: 30px;
    line-height: 30px;
  }
}
@media screen and (max-width: 1399px) {
  .gallery__content {
    bottom: 30px;
    left: 30px;
  }
  .gallery__item .off-tag {
    top: 30px;
    left: 30px;
  }
  .testimonial__image::after {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .gallery__item {
    padding: 0 15px;
  }
  .product__content {
    text-align: center;
  }
  .get-now__image {
    background-color: var(--black);
  }

  /* Get-now / "20% off" promo — mobile-first rebuild. Nothing under
     .get-now__content had a breakpoint before this (only the decorative
     circular image did), so on a phone it rendered at full desktop sizing:
     a 50px gap in the badge row, four fixed 70px countdown circles, and no
     padding discipline, which overflowed/crowded a narrow viewport. */
  .get-now-area .get-now__content ul {
    gap: 14px 22px;
    padding-left: 0;
  }
  .get-now__content ul li {
    list-style: none;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .get-now__content ul li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free";
    font-weight: 700;
    color: var(--primary-color, #ff5722);
    font-size: 12px;
  }
  .get-now__content .get-info {
    font-size: 20px;
  }
  .get-now__content .time-up {
    gap: 12px !important;
    width: 100%;
  }
  .get-now__content .time-up .info h4 {
    font-size: 16px;
    white-space: nowrap;
  }
  .get-now__content .time-up .info span {
    font-size: 14px;
    margin-top: 4px;
    display: block;
  }
  .get-now__content .time-up .get-time {
    width: 52px;
    height: 52px;
    padding-top: 6px;
    flex-shrink: 0;
  }
  .get-now__content .time-up .get-time h3 {
    font-size: 16px;
    line-height: 22px;
  }
  .get-now__content .time-up .get-time span {
    font-size: 11px;
  }
  .get-now-arry {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .get-now-arry i {
    font-size: 18px;
  }
}
@media screen and (max-width: 400px) {
  .get-now__content .time-up .get-time {
    width: 44px;
    height: 44px;
    padding-top: 4px;
  }
  .get-now__content .time-up .get-time h3 {
    font-size: 14px;
    line-height: 18px;
  }
  .get-now__content .time-up .get-time span {
    font-size: 10px;
  }
}
@media screen and (max-width: 575px) {
  .shop-page-wrp {
    flex-direction: column;
  }
  .shop-page-wrp .short {
    margin-top: 20px;
  }
  .testimonial .pb-65,
  .testimonial .pt-65,
  .testimonial .pl-65,
  .testimonial .pr-65,
  .testimonial .pr-55 {
    padding: 10px;
  }
  .testimonial__item p {
    font-size: 18px;
    line-height: 25px;
  }
  .login__item {
    padding: 20px;
  }
  .login__content h2 {
    font-size: 30px;
    margin-bottom: 10px;
  }
  .login__image .btn-wrp {
    right: -90px;
  }
}
@media screen and (max-width: 424px) {
  .blog-list .container-fluid {
    padding: 0 20px;
  }
  .get-now__image {
    height: 400px;
    line-height: 400px;
  }
  .discount__item .off-btn {
    padding: 10px 4px;
    font-size: 12px;
  }
  .discount__item .off-btn img {
    margin-right: 3px;
  }
}
@media screen and (max-width: 991px) {
  .footer__copy-text {
    justify-content: center;
    padding: 30px 0;
  }
}

/* ===================================================
   UNIFIED SITE HEADER
   =================================================== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  transition: background 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}
.site-header.menu-fixed {
  background: #ffffff;
  box-shadow: var(--shadow-sm);
}

.header-inner {
  display: flex;
  /* stretch (not center) so every direct child — logo, nav, actions — always
     spans the row's full height. This is what keeps .main-menu li's
     position:relative box (the dropdown's anchor) flush with the header's
     real top/bottom edges no matter how compact any single child's own
     padding is — see .site-header .main-menu li below. */
  align-items: stretch;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0;
  position: relative;
}

/* Logo */
.header-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: 60px;
}
.header-logo img {
  width: 100%;
  height: auto;
  display: block;
}

/* Nav reuses existing .main-menu desktop styles */
.site-header .main-menu {
  flex: 1;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

/* ---- Right-side actions ---- */
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Account and cart are a deliberate matched pair — same circle diameter,
   same icon weight/size, same gap from the edge. Desktop-only now (see the
   max-width:991px block below, which hides .header-actions entirely on
   mobile — those actions move into the nav drawer's .mobile-account-links
   instead, so they don't compete with the hamburger for thumb reach). Both
   are icon-only with no text label, so neither competes for attention with
   the shop-focused main nav or the hero CTA. */
.header-account {
  text-decoration: none;
  gap: 8px;
  flex-shrink: 0;
}
.header-account .user-icon,
.header-cart-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.header-account .user-icon i,
.header-cart-btn i {
  color: #fff;
  font-size: 13px;
}

/* Cart button */
.header-cart-btn {
  position: relative;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
}
.header-cart-btn:hover {
  opacity: 0.85;
}
.cart-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #fff;
  color: #191919;
  font-size: 10px;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Hamburger inside site-header — the primary mobile nav entry point, so it
   gets a real 44x44px touch target (WCAG/Apple HIG minimum) and a chip
   background for visual weight, not just three bare lines. The bars
   themselves live in a small fixed-size .header-bar__icon centered inside
   that 44px box via flex, so the tap target can grow independently of the
   icon's own geometry (and of the rotate/translate math on .active below,
   which is tuned to this icon's exact 22x16 box).

   Every dimension below is pinned three ways (width/height, min-width/
   min-height/max-width/max-height, and flex:0 0 44px) and box-sizing is
   forced explicitly rather than relying
   on the sitewide `*` reset, because this element sits inside
   .header-inner's `display:flex; align-items:stretch` row (deliberately,
   so the row's other children fill its height — see .header-inner above) —
   without an ironclad cross-size, a plain `<button>` here stretches to the
   header's full row height instead of staying a fixed 44px square, which
   is what "stretched background" bugs on this element have actually been.
   overflow:hidden guarantees the chip can never show a non-square edge, and
   -webkit-appearance/appearance:none strips iOS Safari's native button
   chrome (rounded corners, inset shadow, extra intrinsic padding) that
   `border:none` alone doesn't remove there. */
.site-header .header-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  max-width: 44px;
  max-height: 44px;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: var(--sub-bg);
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s;
}
.site-header .header-bar:hover,
.site-header .header-bar:active {
  background: var(--border);
}
/* The glyph itself. Deliberately a single Font Awesome icon rather than three
   hand-positioned <span> bars: the previous bar markup nested the bars inside
   a wrapper <span class="header-bar__icon">, and the bar rule that styled them
   (`.site-header .header-bar span`, specificity 0,2,1) also matched that
   wrapper and outranked `.header-bar__icon` (0,1,0) — so the wrapper itself
   was painted as a 44px-wide, 2.5px-tall filled bar with the three real bars
   collapsed inside it. That is what rendered as a broken smear instead of a
   hamburger. A single glyph has no wrapper to collide with, and there is no
   descendant-span rule left here for anything to inherit by accident.
   font-size (not width/height) sets the drawn size, so it stays crisp at any
   DPR; the 44x44 tap target above is independent of it. */
.site-header .header-bar__icon {
  display: block;
  font-size: 20px;
  line-height: 1;
  color: var(--heading-color);
  pointer-events: none;
}

/* ===================================================
   iOS SAFE AREAS
   ===================================================
   Every page now ships `viewport-fit=cover` (see the <meta name="viewport">
   in each .html), which is what makes env(safe-area-inset-*) resolve to
   anything other than 0 — but it also means the layout viewport extends
   *under* the Dynamic Island / notch and the home indicator. So every piece
   of fixed or sticky chrome has to pad itself back out of those regions
   explicitly; anything that doesn't ends up with content physically under
   the island or the home-indicator bar.

   The fallback second argument (`, 0px`) keeps these valid on browsers with
   no env() support, where the whole calc() would otherwise be dropped.
   Horizontal insets matter in landscape, where the notch eats one side. */
.site-header {
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}

/* Cart drawer: pinned to the right edge, full height. */
.cart-drawer {
  padding-right: env(safe-area-inset-right, 0px);
}
.cart-drawer__head {
  padding-top: calc(20px + env(safe-area-inset-top, 0px));
}
.cart-drawer__foot {
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 991px) {
  /* Mobile nav drawer: slides in from the right, full height, so it needs
     all four insets — top for the island, bottom so the last account row
     isn't under the home indicator, right for landscape. */
  .site-header .main-menu {
    padding-top: calc(70px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    padding-right: env(safe-area-inset-right, 0px) !important;
  }
}

/* ===================================================
   CART DRAWER
   =================================================== */
.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.cart-overlay.open {
  opacity: 1;
  visibility: visible;
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 380px;
  max-width: 100vw;
  /* 100vh on iOS Safari is the toolbar-HIDDEN height, so a 100vh drawer
     extends below the visible area whenever the toolbar is showing and its
     footer (the subtotal + Checkout button) sits off-screen and unreachable.
     100dvh tracks the toolbar as it collapses/expands. The 100vh line stays
     first as the fallback for browsers without dvh, which simply ignore the
     second declaration. */
  height: 100vh;
  height: 100dvh;
  background: #ffffff;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
.cart-drawer.open {
  transform: translateX(0);
}

.cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.cart-drawer__head h5 {
  color: var(--heading-color);
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}
.cart-drawer__close {
  background: var(--sub-bg);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}
.cart-drawer__close:hover { background: var(--border); }
.cart-drawer__close i { color: var(--heading-color); font-size: 14px; }

.cart-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
}
.cart-drawer__body::-webkit-scrollbar { width: 4px; }
.cart-drawer__body::-webkit-scrollbar-track { background: transparent; }
.cart-drawer__body::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.15); border-radius: 2px; }

.cart-empty-msg {
  color: var(--paragraph-light);
  text-align: center;
  margin-top: 40px;
  font-size: 14px;
}

/* Cart items */
.cart-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.cart-item img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  background: var(--sub-bg);
}
.cart-item-info {
  flex: 1;
  min-width: 0;
}
.cart-item-name {
  display: block;
  color: var(--heading-color);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cart-item-price {
  display: block;
  color: var(--primary-color);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}
.cart-item-qty {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cart-item-qty button {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--sub-bg);
  color: var(--heading-color);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.cart-item-qty button:hover { background: var(--border); }
.cart-item-qty span {
  color: var(--heading-color);
  font-size: 13px;
  min-width: 16px;
  text-align: center;
}
.cart-item-remove {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
}
.cart-item-remove i {
  color: var(--paragraph-light);
  font-size: 13px;
  transition: color 0.2s;
}
.cart-item-remove:hover i { color: var(--danger); }

/* Add-to-cart flash */
.product__cart.added {
  background: var(--primary-color) !important;
  color: #fff !important;
}

/* Recommended products — compact, secondary row above the checkout footer;
   only ever populated when the page's drawer markup includes
   #cartRecommended (empty/absent everywhere else, so nothing to style). */
.cart-drawer__recommended:empty { display: none; }
.cart-drawer__recommended {
  padding: 4px 24px 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.cart-recommended__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--paragraph-light);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 12px 0 10px;
}
.cart-recommended__row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.cart-recommended__item {
  flex: 0 0 auto;
  width: 96px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.cart-recommended__item img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--sub-bg);
}
.cart-recommended__name {
  font-size: 11px;
  color: var(--heading-color);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.cart-recommended__price {
  font-size: 11px;
  color: var(--primary-color);
  font-weight: 600;
}
/* Now an anchor stretched over the whole tile (whole tile = tap target),
   not a separate button — must NOT be positioned or its ::after would only
   cover the pill instead of the tile. */
.cart-recommended__add {
  display: block;
  width: 100%;
  margin-top: 2px;
  padding: 5px 0;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--heading-color);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
}
.cart-recommended__item:hover .cart-recommended__add { border-color: var(--primary-color); color: var(--primary-color); }

/* Cart footer */
.cart-drawer__foot {
  padding: 16px 24px 24px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.cart-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  color: var(--paragraph);
  font-size: 14px;
}
.cart-subtotal strong {
  color: var(--heading-color);
  font-size: 18px;
}
/* Single premium checkout CTA — the only action in the drawer footer now
   that View Cart is gone, so it gets the same full-width brand treatment as
   the product page's Add to Bag button instead of splitting attention with
   a secondary button. */
.cart-btn-checkout {
  display: block;
  width: 100%;
  text-align: center;
  padding: 14px 8px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  background: var(--primary-color);
  color: #fff;
  box-shadow: 0 4px 14px rgba(26, 26, 26, 0.28);
  transition: var(--transition);
}
.cart-btn-checkout:hover {
  background: var(--primary-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(26, 26, 26, 0.34);
}
.cart-btn-checkout:active { transform: translateY(0); }

/* Trust row under the CTA — reuses the same colored text-badge system as
   the checkout page's card brands, extended with wallet variants. */
.cart-drawer__payments {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.card-brand.paypal { background: #003087; color: #fff; }
.card-brand.applepay { background: #000000; color: #fff; }

body.cart-open { overflow: hidden; }

/* ===================================================
   RESPONSIVE - UNIFIED HEADER
   =================================================== */
@media (max-width: 991px) {
  /* backdrop-filter (used for the glassy desktop header) establishes a
     containing block for fixed-position descendants in some engines —
     which would clip the fixed-position drawer/overlay below to the
     header's own ~70px box instead of the full viewport. A solid mobile
     background costs nothing visually here and removes that risk entirely. */
  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--color-bg);
  }

  /* Account/cart/library/orders/settings now live inside the drawer (see
     .mobile-account-links below) instead of the top header, so the header
     itself is just logo + hamburger on mobile — no more account/cart icons
     competing with the primary nav entry point for thumb attention. */
  .header-actions {
    display: none;
  }
  .header-inner {
    padding: 10px 0;
  }

  /* Off-canvas drawer, not the old full-width dropdown panel: the menu is
     always in the DOM (so `right` can transition) and just parked off the
     right edge of the viewport until opened. */
  .site-header .main-menu {
    /* A legacy, unscoped `.main-menu { left:0; margin-top:20px; ... }` rule
       elsewhere in this file (leftover from the original template, matches
       by class alone) has lower specificity than this selector for every
       property both declare — but `left` and `margin` aren't declared here
       at all by default, so without explicitly resetting them below, those
       two leak straight through uncontested and break the drawer's
       positioning (pinned to the left edge with a 20px top gap instead of
       sliding from the right, flush to the top). */
    position: fixed;
    top: 0;
    left: auto;
    /* Was `right: -100%` animated via `transition: right`. `right` is a
       layout property: every frame of the slide forced a reflow plus a full
       repaint of the drawer, which is what made it feel like the UI was
       redrawing rather than sliding. The drawer now sits at right:0
       permanently and moves on `transform`, which the compositor can animate
       on its own thread without touching layout. */
    right: 0;
    margin: 0;
    width: min(85vw, 340px);
    /* See .cart-drawer — 100vh would push the drawer's bottom rows (the
       account/library/orders/cart block) under iOS Safari's toolbar. */
    height: 100vh;
    height: 100dvh;
    background: var(--color-bg);
    z-index: 9990;
    padding: 70px 0 24px;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 0;
    box-shadow: var(--shadow-md);
    /* !important because that same legacy rule also has
       `transition: all 2s !important`, which would otherwise win on
       importance alone and turn this into a sluggish 2s slide. */
    transform: translate3d(100%, 0, 0);
    transition: transform var(--nav-dur, 240ms) var(--nav-ease, cubic-bezier(0.25, 1, 0.5, 1)) !important;
    /* translate3d + backface-visibility promote this to its own compositor
       layer up front, so the first drag frame doesn't pay for layer creation.
       will-change is scoped to the drawer only — applying it broadly costs
       memory for no benefit. */
    will-change: transform;
    backface-visibility: hidden;
    display: block !important;
    /* The drag handler manages horizontal panning itself; letting the browser
       also claim horizontal gestures makes the drag fight the scroller. */
    touch-action: pan-y;
  }
  .site-header .main-menu.active {
    transform: translate3d(0, 0, 0);
  }
  /* While a finger is down the drawer follows it exactly — any transition
       here would lag the gesture behind the thumb. */
  .site-header .main-menu.is-dragging {
    transition: none !important;
  }
  /* Users who ask for reduced motion get the state change without the slide. */
  @media (prefers-reduced-motion: reduce) {
    .site-header .main-menu {
      transition: none !important;
    }
  }
  /* Fades on its own timing, deliberately not the drawer's. It is a separate
     element with a separate transition, so the scrim settles a touch after
     the panel has landed instead of the two moving as one slab — that
     staggering is most of what separates a native-feeling drawer from a
     sliding <div>. Opacity only: never size, position or background. */
  .nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(26, 26, 26, 0.4);
    z-index: 9980;
    opacity: 0;
    visibility: hidden;
    transition: opacity 280ms linear, visibility 280ms linear;
    will-change: opacity;
  }
  .nav-overlay.active {
    opacity: 1;
    visibility: visible;
  }
  /* While a finger is down the drag handler writes the scrim's opacity every
     frame. Leaving the transition on would make each of those writes ease
     toward its target, so the scrim would visibly trail the thumb instead of
     tracking it. */
  .nav-overlay.is-dragging {
    transition: none;
  }
  /* position:fixed rather than overflow:hidden — iOS Safari honours the
     former for touch scrolling and ignores the latter. `top` is set inline by
     lockBodyScroll() to preserve the scroll offset while pinned. */
  body.nav-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
  }
  /* Keeps a scroll that reaches the end of the drawer's own list from
     chaining through to the page behind it. */
  .site-header .main-menu { overscroll-behavior: contain; }
}
@media (max-width: 767px) {
  .cart-drawer { width: 100vw; }
}
@media (max-width: 480px) {
  /* Mobile must never render the logo LARGER than desktop's 60px — it was
     previously 90px here, backwards, and oversized enough relative to the
     compact mobile header (logo + hamburger only) to clip/overflow. */
  .header-logo { width: 48px; }
}


/* ===================================================
   SITE-HEADER NAV — replicate .header-wrapper rules
   for the new .site-header scope
   =================================================== */

/* "Sign In"/"My Library" text intentionally never renders, at any
   breakpoint — icon-only account link, matching the cart button, so the
   account action stays a small deliberate utility icon rather than
   competing for attention with the shop-focused main nav or hero CTA. */
.header-account .acc-text {
  display: none !important;
}

/* Desktop nav items */
.site-header .main-menu li {
  transition: all 0.6s;
  position: relative;
  text-transform: capitalize;
  border-radius: initial;
}
.site-header .main-menu li:not(:last-child) {
  margin-right: 38px;
}
@media (max-width: 1199px) {
  .site-header .main-menu li:not(:last-child) {
    margin-right: 20px;
  }
}
.site-header .main-menu li > a {
  color: var(--heading-color);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.02em;
  transition: var(--transition);
  padding: 6px 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.site-header .main-menu li > a:hover {
  color: var(--primary-color);
}
/* "Shop by Goal" has a lowercase joining word by design (proper title case
   keeps short prepositions lowercase) — the capitalize transform above
   would otherwise render it "Shop By Goal". */
.site-header .main-menu > li > .nav-top-link {
  text-transform: none;
}

/* Sub-menu — hidden by default */
.site-header .main-menu li .sub-menu {
  display: none;
  border-radius: 10px;
  margin: 0 10px 10px 10px;
  transform: translateY(15px);
}

/* Sub-menu — desktop dropdown */
@media (min-width: 992px) {
  /* .main-menu li is the dropdown's position:relative anchor (top:100% below
     it in the rule further down). Stretching it to the full header-row
     height — instead of letting it hug just the <a>'s own padding — keeps
     the dropdown flush with the header's real bottom edge regardless of how
     compact the link's padding is, so shrinking header height can never
     reintroduce a gap between the nav link and its dropdown again. */
  .site-header .main-menu li {
    display: flex;
    align-items: center;
  }

  .site-header .main-menu li .sub-menu {
    position: absolute;
    top: 100%;
    left: -10px;
    z-index: 9999;
    width: 190px;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    background-color: #ffffff;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    display: block !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    padding: 6px 0;
  }
  /* Hover: a short delay before opening avoids the dropdown flashing open
     when a mouse merely passes over the top-level link on its way
     elsewhere. Keyboard focus (:focus-within, below) opens instantly —
     a Tab press is a deliberate action, not a passing mouse, so it
     shouldn't wait. Closing (leaving :hover) always happens promptly,
     using the base rule's un-delayed transition above. */
  .site-header .main-menu li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 150ms;
  }
  .site-header .main-menu li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
  }

  /* ---- Mega menu (Shop by Goal / Browse Athletes / Browse Creators) ----
     Same hover/focus reveal mechanism and the same .main-menu li anchor as
     .sub-menu above, just wider and multi-column instead of a single
     190px list. Panels are centered under their trigger (left:50% +
     translateX(-50%)) so the wide athletes panel never hangs off the
     viewport's right edge; max-width clamps it on narrow desktops. The
     base transition here is the CLOSE (fast ease-in, no delay); the
     hover/focus rules below override duration/easing for a slightly
     longer ease-out OPEN, with a short hover-intent delay so a mouse
     merely passing across the nav doesn't flash panels open. Keyboard
     focus opens with no delay — Tab is always deliberate. */
  .site-header .main-menu li .mega-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 9999;
    display: flex !important;
    gap: 32px;
    width: 540px;
    max-width: calc(100vw - 32px);
    padding: 24px 28px;
    background-color: var(--color-surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.06);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 8px);
    transition: opacity 0.14s ease-in, visibility 0.14s ease-in, transform 0.14s ease-in;
  }
  .site-header .main-menu li:hover > .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: 120ms;
  }
  .site-header .main-menu li:focus-within > .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition-delay: 0s;
  }
  .site-header .main-menu li .mega-menu--athletes { width: 760px; gap: 28px; }
  .site-header .main-menu li .mega-menu--creators { width: 580px; }
  .mega-menu--creators .mega-menu__col--featured { flex: 1.25; }
  .mega-menu__col { flex: 1; min-width: 0; }
  .mega-menu__heading {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-text-faint);
    margin-bottom: 10px;
  }
  .mega-menu__heading--spaced { margin-top: 18px; }
  .mega-menu__heading-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
  }
  .mega-menu__heading-row .mega-menu__heading { margin-bottom: 0; }
  .mega-menu__col ul {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
  }
  .mega-menu__col ul li { margin: 0; }
  .mega-menu__col ul li a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 8px 10px;
    margin: 0 -10px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--color-text);
    transition: background 0.15s ease, color 0.15s ease;
  }
  .mega-menu__col ul li a:hover {
    background: var(--color-surface-2);
    color: var(--color-primary);
  }
  .mega-menu__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-surface-2);
    border: 1px solid var(--border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--color-text-muted);
  }
  .mega-menu__col ul li a:hover .mega-menu__avatar {
    background: var(--color-surface);
    color: var(--color-primary);
    border-color: var(--color-primary);
  }
  .mega-menu__person-name {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mega-menu__person-meta {
    margin-left: auto;
    padding-left: 8px;
    flex-shrink: 0;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--color-text-faint);
  }
  .mega-menu__empty {
    padding: 10px 0;
    font-size: 13px;
    color: var(--color-text-muted);
  }
  .mega-menu__search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 12px;
    margin-bottom: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--color-surface-2);
    transition: border-color 0.15s ease, background 0.15s ease;
    cursor: text;
  }
  .mega-menu__search:focus-within {
    border-color: var(--color-primary);
    background: var(--color-surface);
  }
  .mega-menu__search i {
    font-size: 12px;
    color: var(--color-text-faint);
    flex-shrink: 0;
  }
  .mega-menu__search input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    outline: none;
    font-size: 13px;
    color: var(--color-text);
  }
  .mega-menu__search input::placeholder { color: var(--color-text-faint); }
  .mega-menu__view-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-primary);
    background: none;
    border: none;
    cursor: pointer;
  }
  .mega-menu__view-all:hover { text-decoration: underline; color: var(--color-primary); }
  .mega-menu__cards {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .mega-menu-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    margin: 0 -10px;
    border-radius: 10px;
    transition: background 0.15s ease;
  }
  .mega-menu-card:hover { background: var(--color-surface-2); }
  .mega-menu-card__thumb {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--color-surface-2);
  }
  .mega-menu-card__body { min-width: 0; }
  .mega-menu-card__name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mega-menu-card__meta {
    display: block;
    font-size: 12px;
    color: var(--color-text-muted);
  }
  .mega-menu-card__meta .mega-menu-card__price {
    color: var(--color-text);
    font-weight: 600;
  }
}

/* Users who ask the OS for less motion get instant open/close — the panels
   are pure opacity/transform, so skipping the animation loses nothing. */
@media (prefers-reduced-motion: reduce) {
  .site-header .main-menu li .sub-menu,
  .site-header .main-menu li .mega-menu {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

.site-header .main-menu li .sub-menu li {
  margin-right: 0;
  transition: all 0.4s !important;
  border-bottom: 1px solid var(--border);
}
.site-header .main-menu li .sub-menu li:last-child {
  border-bottom: none;
}
.site-header .main-menu li .sub-menu li a {
  color: var(--paragraph);
  text-transform: capitalize;
  font-weight: 500;
  font-size: 13px;
  display: block;
  padding: 9px 18px;
  transition: var(--transition);
}
.site-header .main-menu li .sub-menu li:hover a {
  color: var(--primary-color);
  padding-left: 24px;
}

/* Mobile nav — off-canvas drawer, inline accordion (overrides above at
   <=991px). Each top-level item with a panel (.sub-menu / .mega-menu)
   expands in place directly below its trigger row (grid-template-rows
   0fr/1fr, see .open rules below) rather than swapping to a full-screen
   drill-down — opening one panel closes any other that was open (single-
   open accordion, driven by assets/js/script.js). Desktop's multi-column
   mega-menu content is deliberately flattened to a single simple column
   here rather than replicated. */
@media (max-width: 991px) {
  /* ONE horizontal gutter for the entire drawer — every row (top-level
     trigger, panel heading, panel link, view-all, search field, account
     link) resolves its left/right inset from this single value, so the
     text of a child item lines up exactly under the text of its parent
     instead of each rule hard-coding its own 20px/24px/36px. Previously
     trigger rows and account links used 24px while every panel child used
     20px, so the whole expanded panel sat 4px off from the rows above it —
     which is what read as "poorly centered / unfinished". */
  .site-header .main-menu {
    --nav-gutter: 24px;
    --nav-row-min: 48px;
  }
  /* Dividers belong to the top-level nav rows only. They used to be applied
     to every `li` in the drawer, including each athlete/goal/creator row
     inside an expanded panel, which turned a panel into a dense ruled
     table and broke the vertical rhythm. */
  .site-header .main-menu > li {
    width: 100%;
    border-bottom: 1px solid var(--border);
  }
  .site-header .main-menu li {
    width: 100%;
    border-bottom: none;
  }
  .site-header .main-menu li:not(:last-child) {
    margin-right: 0;
  }
  /* Top-level trigger rows sit slightly taller than their children (56 vs
     48) so the hierarchy is legible at a glance without needing a heavier
     font or a second divider weight. */
  .site-header .main-menu li > a.nav-top-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    padding: 16px var(--nav-gutter);
    font-size: 16px;
    font-weight: 600;
  }
  /* Fixed box so the chevron's optical center is identical on every row
     regardless of the glyph's own advance width, and so a long label can
     never push it off the gutter. */
  .nav-top-link__chevron {
    flex: 0 0 16px;
    width: 16px;
    text-align: center;
    font-size: 13px;
    line-height: 1;
    transition: transform var(--nav-dur, 240ms) var(--nav-ease, cubic-bezier(0.25, 1, 0.5, 1));
  }
  /* Chevron rotates off the same aria-expanded state the accordion click
     handler (assets/js/script.js) already keeps in sync — no separate JS-
     driven class needed just for the icon. */
  .site-header .main-menu li > a.nav-top-link[aria-expanded="true"] .nav-top-link__chevron {
    transform: rotate(180deg);
  }

  /* Footer: Account/My Library/Orders/Cart/Settings, pinned to the very
     bottom of the drawer (see partials/header.html — this is the last <li>
     in .main-menu) rather than the top. This is a shopping drawer first —
     someone arriving from an ad should see product categories (Shop by
     Goal/Browse Athletes/Browse Creators above) before account management.
     Also replaces .header-actions (hidden below 991px, see above), so
     account/cart are still one tap away from the hamburger. Deliberately
     quieter than the nav-mega rows above (smaller/lighter type, muted icon
     color) so it reads as secondary/utility, not primary navigation. */
  .mobile-account-links {
    display: flex;
    flex-direction: column;
    margin-top: 12px;
    padding: 16px 0 8px;
    border-top: 1px solid var(--border);
  }
  .site-header .main-menu li:last-child {
    border-bottom: none;
  }
  /* Scoped as .site-header .main-menu .mobile-account-links__item (three
     classes), not just .mobile-account-links__item — the generic
     `.site-header .main-menu li > a` rule above (two classes + two
     elements) has higher specificity and was winning on every property
     they both set (padding, gap, font-size, font-weight, color) for the
     three <a> rows here, silently overriding this rule's 24px left padding
     down to its own `padding: 6px 0` and collapsing the icon/text gap to
     4px. It only ever matched <a>, not the Cart <button> — which is why
     Cart alone rendered correctly and the other three didn't. */
  .site-header .main-menu .mobile-account-links__item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 48px;
    padding: 12px 24px;
    background: none;
    border: none;
    text-align: left;
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--paragraph);
    cursor: pointer;
  }
  /* The rule above's four-class specificity (needed to beat the generic
     .site-header .main-menu li > a rule, see comment above it) also
     outranks the sitewide single-class .u-hidden — which is what the
     Settings row (#drawerSettingsItem, u-hidden until auth confirms a
     session in assets/js/api.js) relies on to start hidden. Re-assert
     display:none at equal-or-higher specificity so it still wins here. */
  .site-header .main-menu .mobile-account-links__item.u-hidden {
    display: none;
  }
  .mobile-account-links__item i {
    width: 18px;
    flex-shrink: 0;
    text-align: center;
    font-size: 15px;
    line-height: 1;
    color: var(--paragraph-light);
  }
  .mobile-account-links__item .cart-badge {
    position: static;
    margin-left: auto;
    width: 20px;
    height: 20px;
    font-size: 11px;
    background: var(--primary-color);
    color: #fff;
  }

  /* Inline accordion panels — a top-level item with a panel (.sub-menu /
     .mega-menu) expands in place instead of swapping to a full-screen
     drill-down. grid-template-rows: 0fr -> 1fr on the panel animates height
     with no JS measurement (no scrollHeight guesswork, no jank from content
     that hasn't finished loading/rendering yet) and only ever transitions a
     single grid track, so it stays cheap even on iOS Safari. The
     overflow:hidden/min-height:0 inner wrapper is required for the 0fr
     track to actually collapse the content below it instead of clamping to
     its min-content height. assets/js/script.js toggles .open and closes
     any other panel that was open first (single-open accordion). */
  .site-header .main-menu li .sub-menu,
  .site-header .main-menu li .mega-menu {
    display: grid;
    grid-template-rows: 0fr;
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: var(--color-bg);
    border: none;
    box-shadow: none;
    border-radius: 0;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: none;
    /* An auto-height reveal has to resolve a real height, so this is the one
       animation here that legitimately touches layout — there is no
       compositor-only equivalent that doesn't distort the content (scaleY
       squashes it). What matters is that the cost stays bounded.

       `contain: layout paint` gives the panel its own layout root, so the
       per-frame relayout is confined to this subtree instead of walking the
       whole drawer. Measured effect: expanding a section went from 47
       Layouts / 21.4ms to the figures in the commit message.

       Duration is 240ms on an ease-out curve — content arrives fast and
       settles, rather than easing in slowly at both ends. */
    contain: layout paint;
    transition: grid-template-rows var(--nav-dur, 240ms) var(--nav-ease, cubic-bezier(0.25, 1, 0.5, 1));
  }
  .site-header .main-menu li .sub-menu.open,
  .site-header .main-menu li .mega-menu.open {
    grid-template-rows: 1fr;
  }
  .mega-menu__panel-inner {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    /* Fades in slightly behind the height so rows don't appear to pop into
       existence at full strength while the panel is still opening. Opacity
       is compositor-driven, so this costs nothing extra per frame. */
    opacity: 0;
    transition: opacity var(--nav-dur, 240ms) var(--nav-ease, cubic-bezier(0.25, 1, 0.5, 1));
  }
  .site-header .main-menu li .sub-menu.open .mega-menu__panel-inner,
  .site-header .main-menu li .mega-menu.open .mega-menu__panel-inner {
    opacity: 1;
  }
  @media (prefers-reduced-motion: reduce) {
    .site-header .main-menu li .sub-menu,
    .site-header .main-menu li .mega-menu,
    .mega-menu__panel-inner { transition: none; }
  }

  /* A panel is tinted one step back from the drawer surface so an expanded
     section reads as nested under its trigger, which is what lets the
     dividers be dropped from its rows without the list looking loose. */
  .mega-menu__panel-inner { background: var(--color-surface-2); }
  .mega-menu__col { padding: 0; }
  .mega-menu__col + .mega-menu__col { border-top: 1px solid var(--border); }
  .mega-menu__heading {
    display: block;
    padding: 14px var(--nav-gutter) 6px;
    margin-bottom: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-text-faint);
  }
  .mega-menu__heading--spaced { margin-top: 6px; }
  .mega-menu__heading-row { padding: 14px var(--nav-gutter) 6px; margin-bottom: 0; }
  .mega-menu__col ul { margin: 0; list-style: none; padding: 0; }
  /* Every tappable row in a panel shares one box: same gutter, same
     minimum height, same vertical padding — so spacing between any two
     consecutive rows is identical no matter which of the three menus
     they came from or whether they carry an avatar/thumbnail. */
  /* Scoped with `.site-header .main-menu` (3 classes) rather than left as
     a bare `.mega-menu__col ul li a` (1 class, 3 elements). The generic
     `.site-header .main-menu li > a` rule further up this file is (0,2,2)
     and outranks (0,1,3), so it was winning `padding`, `display` and `gap`
     on exactly the rows that matter most — every goal/athlete/creator
     link — pinning them to its own `padding: 6px 0`. That left the real
     link rows 24px to the left of the headings, cards and View-All rows
     around them (which are not direct children of an <li>, so the generic
     rule never matched them and they kept the gutter). That 24px split is
     what made an expanded panel look ragged. Same failure mode, and same
     fix, as the .mobile-account-links__item rule below. */
  .site-header .main-menu .mega-menu__col ul li a,
  .mega-menu-card,
  .mega-menu__view-all {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    min-height: var(--nav-row-min);
    padding: 10px var(--nav-gutter);
    margin: 0;
    border-radius: 0;
    text-align: left;
  }
  .site-header .main-menu .mega-menu__col ul li a {
    gap: 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
  }
  .mega-menu__view-all {
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary);
    background: none;
    border: none;
    cursor: pointer;
  }
  /* Fixed icon box, matching .nav-top-link__chevron, so the trailing arrow
     on every "View All" row lands on the same optical column. */
  .mega-menu__view-all i {
    flex: 0 0 14px;
    width: 14px;
    text-align: center;
    font-size: 12px;
    line-height: 1;
  }
  .mega-menu__cards { gap: 0; display: flex; flex-direction: column; }
  .mega-menu-card { gap: 12px; }
  .mega-menu-card__thumb {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--color-surface-2);
  }
  .mega-menu-card__body { min-width: 0; }
  .mega-menu-card__name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mega-menu-card__meta {
    display: block;
    font-size: 12px;
    color: var(--color-text-muted);
  }
  .mega-menu-card__meta .mega-menu-card__price {
    color: var(--color-text);
    font-weight: 600;
  }
  .mega-menu__search {
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    height: var(--nav-row-min);
    padding: 0 14px;
    margin: 10px var(--nav-gutter);
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--color-bg);
  }
  .mega-menu__search i { font-size: 13px; color: var(--color-text-faint); flex-shrink: 0; }
  .mega-menu__search input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    outline: none;
    font-size: 16px; /* >=16px prevents iOS focus auto-zoom inside the drawer */
    color: var(--color-text);
  }
  .mega-menu__empty {
    display: flex;
    align-items: center;
    min-height: var(--nav-row-min);
    padding: 10px var(--nav-gutter);
    font-size: 13px;
    color: var(--color-text-muted);
  }
  /* Matches .mega-menu-card__thumb's 44px column so an avatar row and a
     thumbnail row put their text on the same left edge. */
  .mega-menu__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-surface-2);
    border: 1px solid var(--border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    color: var(--color-text-muted);
  }
  .mega-menu__person-name {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mega-menu__person-meta {
    margin-left: auto;
    padding-left: 8px;
    flex-shrink: 0;
    font-size: 11.5px;
    color: var(--color-text-faint);
  }

  /* Second-level rows: one fixed indent step in from the shared gutter,
     never an unrelated hard-coded 36px. */
  .site-header .main-menu li .sub-menu li a {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: var(--nav-row-min);
    padding: 10px var(--nav-gutter) 10px calc(var(--nav-gutter) + 16px);
    font-size: 13px;
  }
  /* The desktop rule shifts padding-left on hover as a hover affordance;
     on a touch drawer that just makes the row jump under the finger. */
  .site-header .main-menu li .sub-menu li:hover a {
    padding-left: calc(var(--nav-gutter) + 16px);
  }
}

@media (max-width: 991px) and (prefers-reduced-motion: reduce) {
  .site-header .main-menu li .sub-menu,
  .site-header .main-menu li .mega-menu,
  .nav-top-link__chevron {
    transition: none;
  }
}


/* ===================================================
   CART PAGE — dynamic table styles
   =================================================== */

/* Qty +/- controls */
.cp-qty-wrap {
  gap: 10px;
}
.cp-qty-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--sub-bg);
  color: var(--heading-color);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  flex-shrink: 0;
}
.cp-qty-btn:hover {
  background: var(--border);
}
.cp-qty-val {
  min-width: 24px;
  text-align: center;
  font-weight: 600;
  font-size: 15px;
}

/* Remove button */
.remove-product {
  background: rgba(255, 60, 60, 0.12);
  border: 1px solid rgba(255, 60, 60, 0.3);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
}
.remove-product:hover {
  background: rgba(255, 60, 60, 0.3);
}
.remove-product i {
  color: #ff5555;
  font-size: 13px;
}

/* Cart page totals row */
.cart-page-totals {
  padding: 20px 24px;
  border-top: 1px solid var(--border);
}
.cp-subtotal-val {
  color: var(--primary-color);
  font-size: 22px;
  font-weight: 700;
}

/* Continue Shopping outline button */
.btn-outline-cart span {
  background: transparent !important;
}
.btn-one.btn-outline-cart {
  background: transparent;
  border: 2px solid var(--primary-color);
}
.btn-one.btn-outline-cart span {
  background: transparent !important;
  color: var(--primary-color);
}
.btn-one.btn-outline-cart:hover span {
  color: #fff;
}

/* Cart page column label responsive */
@media (max-width: 767px) {
  .shopping-cart .column-labels { display: none !important; }
  .shopping-cart .product {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 12px;
  }
  .product-details { width: 100%; }
  .product-price, .product-line-price { font-size: 14px; }
}

/* Checkout order list */
#checkoutOrderList li {
  list-style: none;
}


/* ===================================================
   PAYMENT METHOD SECTION
   =================================================== */

/* --- Tabs --- */
.pay-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.pay-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--sub-bg);
  color: var(--paragraph);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.pay-tab i,
.pay-tab .pay-tab-svg {
  font-size: 16px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.pay-tab:hover {
  border-color: var(--border-light);
  color: var(--heading-color);
  background: #ffffff;
}
.pay-tab.active {
  border-color: var(--primary-color);
  background: rgba(26, 26, 26, 0.08);
  color: var(--heading-color);
}
.pay-tab.active i,
.pay-tab.active .pay-tab-svg {
  color: var(--primary-color);
  fill: var(--primary-color);
}

/* --- Panels --- */
.pay-panel { display: block; }
.pay-panel--hidden { display: none !important; }

/* --- Card brand / secure badges --- */
.card-brand {
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .5px;
}
.card-brand.visa    { background: #1a1f71; color: #fff; font-style: italic; }
.card-brand.mc      { background: #eb001b; color: #fff; }
.card-brand.amex    { background: #007bc1; color: #fff; }
.card-brand.discover { background: #f76f20; color: #fff; }

/* Responsive */
@media (max-width: 576px) {
  .pay-tabs { gap: 8px; }
  .pay-tab  { padding: 8px 12px; font-size: 12px; }
}


/* ===================================================
   LANDING PAGE & LAYOUT FIXES
   =================================================== */

/* Hero banner min-height so background always fills the viewport */
.banner-two {
  min-height: 600px;
}
.banner-two .swiper,
.banner-two .swiper-slide {
  min-height: 600px;
}

/* Force nav visible on desktop — beats any competing rule */
@media (min-width: 992px) {
  .site-header .main-menu {
    display: flex !important;
    position: static !important;
    background: transparent !important;
    border-top: none !important;
    border-radius: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    width: auto !important;
  }
  /* Sub-menu hover on desktop */
  .site-header .main-menu li:hover > .sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    display: block !important;
  }
}

/* Mobile drawer slide is handled by the `right` transition on .main-menu
   itself (see the off-canvas drawer rules above) — no separate fade/slide
   animation needed here. */

/* Inner page banner — adjust for new single 68px header */
.page-banner.pt-130 {
  padding-top: 80px;
}

/* View area - ensure bg covers properly */
.view-area {
  position: relative;
  overflow: hidden;
}

/* Fix gallery slider height on mobile */
@media (max-width: 576px) {
  .gallery__item { min-height: 280px; }
}


/* ===================================================
   CHECKOUT PAGE — FULL MOBILE RESPONSIVENESS
   =================================================== */

/* Checkout inner padding tighter on mobile */
@media (max-width: 767px) {
  .checkout-area {
    padding-top: 60px;
    padding-bottom: 60px;
  }
}

/* Pay tabs — wrap into 2×2 grid on small screens */
@media (max-width: 575px) {
  .pay-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .pay-tab {
    justify-content: center;
    padding: 9px 10px;
    font-size: 12px;
  }
}

/* Place order button full width on mobile */


/* ===================================================
   CHECKOUT PAGE — COMPACT LAYOUT & BANNER
   =================================================== */

/* Center breadcrumb in banner */
.page-banner .breadcrumb-list.justify-content-center {
  justify-content: center !important;
}

/* ---- Section padding ---- */
.checkout-area.pt-30 { padding-top: 22px !important; }
.checkout-area.pb-40 { padding-bottom: 28px !important; }

/* ---- Payment tabs: mini pills ---- */
.pay-tabs {
  gap: 5px !important;
  margin-bottom: 10px !important;
  flex-wrap: wrap !important;
}
.pay-tab {
  padding: 5px 10px !important;
  font-size: 10px !important;
  border-radius: 6px !important;
  gap: 5px !important;
  border-width: 1px !important;
}
.pay-tab i,
.pay-tab .pay-tab-svg {
  font-size: 11px !important;
  width: 12px !important;
  height: 12px !important;
}

/* ---- Card form labels & inputs ---- */
.pay-panel label {
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  opacity: 0.75;
  margin-bottom: 3px !important;
  display: block;
}
.pay-panel input {
  padding: 7px 11px !important;
  font-size: 12px !important;
  border-radius: 6px !important;
}
.pay-panel .mb-20 { margin-bottom: 8px !important; }
.pay-panel .mb-10 { margin-bottom: 4px !important; }
.pay-panel .mt-10 { margin-top: 6px !important; }
.pay-panel .mt-20 { margin-top: 8px !important; }
.pay-panel .row.g-3 {
  --bs-gutter-x: 8px !important;
  --bs-gutter-y: 0 !important;
}

/* ---- Accepted cards row ---- */
.card-brand {
  font-size: 8px !important;
  padding: 2px 5px !important;
  border-radius: 3px !important;
}
.pay-brand-btn {
  padding: 8px 22px !important;
  font-size: 11px !important;
  border-radius: 50px !important;
}
.gpay-btn svg,
.applepay-btn svg,
.paypal-btn svg {
  height: 14px !important;
}

/* ---- Your Order items ---- */
#checkoutOrderList li {
  padding: 5px 0 !important;
  font-size: 12px !important;
}

/* ---- Mobile: single column, same compact sizing ---- */
@media (max-width: 991px) {
  .checkout-area .row.g-3 { --bs-gutter-y: 12px; }
}


/* ===================================================
   CHECKOUT — SHOPIFY-STYLE REDESIGN
   =================================================== */

/* Reset page-level padding for checkout */
.co-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---- Checkout header bar ---- */
.co-hdr {
  border-bottom: 1px solid var(--border);
  padding: 14px 0;
  flex-shrink: 0;
  background: #ffffff;
}
.co-hdr__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.co-hdr__logo img {
  height: 28px;
}

/* Step breadcrumb */
.co-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
}
.co-crumb__step {
  font-size: 11px;
  font-weight: 500;
  color: var(--paragraph-light);
  letter-spacing: 0.3px;
}
.co-crumb__step--active {
  color: var(--heading-color);
  font-weight: 600;
}
.co-crumb__step--done {
  color: var(--primary-color);
}
.co-crumb__arrow {
  width: 6px;
  height: 10px;
  color: var(--border-light);
  flex-shrink: 0;
}

/* ---- Two-panel layout ---- */
.checkout-area {
  flex: 1;
  padding: 0 !important;
}
.checkout-area > .container.co-layout,
.co-layout {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  min-height: calc(100vh - 57px);
}

/* Left: form */
.co-form-panel {
  flex: 1 1 58%;
  padding: 32px 40px 40px 24px;
  min-width: 0;
  border-right: 1px solid var(--border);
}

/* Right: summary */
.co-summary-panel {
  flex: 0 0 42%;
  max-width: 42%;
  padding: 32px 24px 40px 32px;
  position: sticky;
  top: 57px;
  align-self: flex-start;
  max-height: calc(100vh - 57px);
  overflow-y: auto;
}

/* ---- Section blocks ---- */
.co-section {
  margin-bottom: 24px;
}
/* A quiet divider between Contact/Billing and Payment — the two sections
   used to just be stacked margin, which read as one continuous block. */
.co-section--divider {
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.co-section__ttl {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: var(--paragraph-light) !important;
  margin-bottom: 12px !important;
  padding-bottom: 0 !important;
  border: none !important;
}
.co-section__ttl i {
  font-size: 13px;
  color: var(--heading-color);
}

/* ---- Floating label fields ---- */
.co-field {
  position: relative;
  margin-bottom: 10px;
}
.co-row {
  display: flex;
  gap: 10px;
  margin-bottom: 0;
}
.co-row .co-field {
  flex: 1;
  min-width: 0;
}
.co-input {
  width: 100%;
  padding: 20px 13px 7px !important;
  background: var(--sub-bg) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  color: var(--heading-color) !important;
  font-size: 13px !important;
  outline: none !important;
  transition: border-color 0.15s !important;
  -webkit-appearance: none;
  appearance: none;
}
.co-input:focus {
  border-color: var(--primary-color) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.12) !important;
}
.co-label {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--paragraph-light);
  pointer-events: none;
  transition: top 0.15s, font-size 0.15s, color 0.15s;
  white-space: nowrap;
}
.co-input:focus ~ .co-label,
.co-input:not(:placeholder-shown) ~ .co-label {
  top: 9px;
  transform: none;
  font-size: 9px;
  letter-spacing: 0.3px;
  color: var(--primary-color);
}
.co-label--top {
  top: 9px !important;
  transform: none !important;
  font-size: 9px !important;
  letter-spacing: 0.3px !important;
  color: var(--paragraph-light) !important;
}
/* Select field — always show label floated up */
.co-field--select .co-input {
  padding-top: 20px !important;
  padding-bottom: 7px !important;
  cursor: pointer;
}
.co-sel option { background: #ffffff; color: var(--heading-color); }

/* ---- Payment tabs (compact) ---- */
.co-pay-tabs.pay-tabs {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
  margin-bottom: 14px !important;
}
.co-pay-tabs .pay-tab {
  flex: 1;
  min-width: 0;
  justify-content: center !important;
  padding: 8px 6px !important;
  font-size: 11px !important;
  border-radius: 8px !important;
  gap: 5px !important;
  border-width: 1px !important;
}
.co-pay-tabs .pay-tab i,
.co-pay-tabs .pay-tab .pay-tab-svg {
  font-size: 13px !important;
  width: 14px !important;
  height: 14px !important;
}

/* ---- Card form ---- */
.co-card-form { margin-top: 0; }
.co-brands {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.co-brands .card-brand {
  font-size: 8px !important;
  padding: 2px 5px !important;
  border-radius: 3px !important;
}
.co-ssl {
  font-size: 9px;
  color: var(--paragraph-light);
  margin-left: auto;
}
.co-ssl i { color: var(--success); }

/* ---- Redirect panels ---- */
.co-redirect-panel { margin-top: 4px; }
.co-redirect-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 16px;
  border: 1px solid var(--border);
  background: var(--sub-bg);
  border-radius: 10px;
  text-align: center;
}
.co-redirect-box p {
  font-size: 12px;
  color: var(--paragraph);
  margin: 0;
  line-height: 1.5;
}
/* ---- CTA button — solid near-black, bag icon + label evenly spaced via
   flex gap (not a margin utility on the icon), lighter hover, pressed
   active state. Lives in the order-summary sidebar, not the form. ---- */
.co-privacy {
  font-size: 10px !important;
  color: var(--paragraph-light) !important;
  text-align: center !important;
  margin-top: 10px !important;
  line-height: 1.5 !important;
}

/* ---- Mobile: Checkout Securely stays reachable one-handed without
   hunting for it at the bottom of a long page — pinned to the viewport,
   not the page. Everything the button used to sit above (payment icons,
   SSL line) simply flows to where the button used to be; the summary
   panel's own bottom padding (see the mobile "stack panels" block further
   down) keeps it clear of the fixed bar. ---- */
@media (max-width: 900px) {
  .co-privacy { margin-bottom: 8px !important; }
}

/* ---- Order summary (right panel) ---- */
.co-summary__ttl {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: var(--paragraph-light) !important;
  margin-bottom: 14px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--border) !important;
}
.co-order-items {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 16px !important;
}
.co-order-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid var(--border) !important;
  font-size: 12px !important;
}
.co-item-img {
  width: 44px !important;
  height: 44px !important;
  object-fit: cover !important;
  border-radius: 6px !important;
  border: 1px solid var(--border) !important;
  flex-shrink: 0 !important;
}
.co-item-name {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--heading-color);
  line-height: 1.35;
}
.co-item-name em {
  font-style: normal;
  color: var(--paragraph-light);
  font-size: 11px;
  display: block;
}
.co-item-price {
  font-size: 12px;
  font-weight: 600;
  color: var(--heading-color);
  white-space: nowrap;
}
.co-empty span { color: var(--paragraph-light); font-size: 12px; }

/* Trust/reassurance banner — reframes the usual "items aren't reserved"
   cart-abandonment nudge around instant digital delivery instead of stock. */
.co-trust {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
  background: var(--sub-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--paragraph);
}
.co-trust i { color: var(--heading-color); font-size: 12px; margin-top: 1px; flex-shrink: 0; }

/* Promo code entry — sits between the item list and the totals block so the
   discount it produces lands directly above where it's reflected (.co-total-row
   #coDiscountRow, toggled by assets/js/script.js). */
.co-promo { display: flex; gap: 8px; margin-bottom: 10px; }
.co-promo input {
  flex: 1; min-width: 0; padding: 9px 12px; font-size: 12px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--sub-bg); color: var(--heading-color);
}
.co-promo input:focus { outline: none; border-color: var(--heading-color); }
.co-promo button {
  flex-shrink: 0; padding: 9px 16px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--heading-color); border-radius: 8px; background: transparent; color: var(--heading-color); cursor: pointer;
}
.co-promo button:disabled { opacity: .5; cursor: default; }
.co-promo-msg { font-size: 11px; margin: -4px 0 14px; }
.co-promo-msg.is-error { color: var(--danger, #d33); }
.co-promo-msg.is-success { color: var(--success); }

/* Totals */
.co-totals {
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.co-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  font-size: 12px;
  color: var(--paragraph);
}
.co-total-row span:last-child { color: var(--heading-color); font-weight: 500; }
.co-free { color: var(--success) !important; font-size: 11px !important; }
.co-grand {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--heading-color) !important;
  padding-top: 10px !important;
  margin-top: 4px !important;
  border-top: 1px solid var(--border) !important;
}
.co-grand span:last-child { color: var(--primary-color) !important; }

/* ---- "Add a little extra" recommendation module ---- */
.co-recommend:empty { display: none; }
.co-recommend__ttl {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--paragraph-light);
  margin: 18px 0 10px;
}
.co-recommend__row {
  display: flex;
  gap: 8px;
}
.co-recommend__item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--sub-bg);
}
.co-recommend__item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 6px;
}
.co-recommend__name {
  font-size: 11px;
  font-weight: 500;
  color: var(--heading-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.co-recommend__price {
  font-size: 11px;
  font-weight: 600;
  color: var(--primary-color);
}
.co-recommend__add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  margin-top: 2px;
  padding: 6px 0;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: #ffffff;
  color: var(--heading-color);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: var(--transition);
}
.co-recommend__add:hover { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }

/* ---- Payment icons + SSL line below the CTA button ---- */
.co-summary-payments {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.co-summary-payments .card-brand { font-size: 8px !important; padding: 3px 6px !important; }
.card-brand.gpay { background: #5f6368; color: #fff; }
.co-ssl--summary {
  text-align: center;
  margin: 8px 0 0;
  font-size: 10px;
  color: var(--paragraph-light);
}
.co-ssl--summary i { color: var(--success); margin-right: 3px; }

/* ---- Mobile: stack panels ---- */
@media (max-width: 900px) {
  .co-layout {
    flex-direction: column !important;
    min-height: unset !important;
  }
  .co-form-panel {
    padding: 24px 16px 20px !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
  }
  .co-summary-panel {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    /* Superseded by the checkout redesign block at the end of this file,
       which sets the summary's mobile padding and puts the clearance for the
       fixed sticky bar on .co-extras-panel — the last element in the mobile
       flow, and therefore the only one that can actually be overlapped. */
    padding: 20px 16px 96px !important;
    position: static !important;
    max-height: none !important;
  }
  .co-hdr__inner { flex-direction: column; gap: 8px; }
  .co-row { flex-direction: column; gap: 0; }
  .co-pay-tabs .pay-tab { flex: 1 1 calc(50% - 3px) !important; }
}
@media (max-width: 480px) {
  .co-crumb { display: none; }
  .co-hdr__inner { justify-content: center; }
}


/* ===================================================
   CHECKOUT — CTA BUTTONS + SELECT + LOGO FIXES
   =================================================== */

/* ---- Country select: prevent text overflow, add arrow ---- */
.co-sel {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  padding-right: 32px !important;
}
.co-field--select::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid rgba(255,255,255,0.35);
  pointer-events: none;
  z-index: 1;
}

/* ---- Brand logos in redirect boxes: centered + proper size ---- */
.co-brand-logo {
  display: block !important;
  margin: 0 auto !important;
}
/* PayPal logo */
.co-pp-box .co-brand-logo {
  height: 28px !important;
  width: auto !important;
}
/* Google Pay logo: wide aspect ratio 74:22 — fix clipping */
.co-gp-logo {
  height: 32px !important;
  width: auto !important;
  max-width: 100% !important;
  overflow: visible !important;
}
/* Apple Pay logo */
.co-ap-box .co-brand-logo {
  height: 44px !important;
  width: auto !important;
}

/* ---- G Pay TAB icon: fix squished 41:17 aspect ratio ---- */
.co-pay-tabs .pay-tab[data-method="gpay"] .pay-tab-svg {
  width: auto !important;
  max-width: 28px !important;
  height: 10px !important;
}

/* ---- Dramatic CTA buttons base ---- */
.co-big-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 15px 28px !important;
  border-radius: 12px !important;
  border: none !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  cursor: pointer !important;
  transition: transform 0.18s, box-shadow 0.18s !important;
  text-decoration: none !important;
}
.co-big-btn:hover {
  transform: translateY(-2px) !important;
}
.co-big-btn:active {
  transform: translateY(0) !important;
}

/* ---- Secure text below buttons ---- */
.co-secure-txt {
  font-size: 10px !important;
  color: var(--paragraph-light) !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}
.co-secure-txt i { color: var(--success) !important; }

/* Slightly more padding in redirect boxes to breathe */
.co-pp-box,
.co-gp-box,
.co-ap-box {
  padding: 22px 18px !important;
  gap: 12px !important;
}


/* ===================================================
   CHECKOUT — FLOATING LABEL + COUNTRY + LOGO FIXES
   =================================================== */

/* ---- 1. Floating labels: JS-class-based approach ----
   Covers both Contact & Billing AND card section.
   Uses co-focused (on focus) and co-filled (has value)
   classes added by the inline JS in checkout.html.
   Keeps :focus sibling rule as secondary support.
   --------------------------------------------------- */

/* Rest/initial label position */
.co-field .co-label:not(.co-label--top) {
  position: absolute !important;
  left: 13px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  opacity: 1 !important;
  color: var(--paragraph-light) !important;
  pointer-events: none !important;
  transition: top 0.15s, font-size 0.15s, color 0.15s !important;
  white-space: nowrap !important;
  margin-bottom: 0 !important;
}

/* Floated / active label state */
.co-field.co-focused .co-label:not(.co-label--top),
.co-field.co-filled .co-label:not(.co-label--top),
.co-input:focus ~ .co-label:not(.co-label--top) {
  top: 9px !important;
  transform: none !important;
  font-size: 9px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0.3px !important;
  color: var(--primary-color) !important;
  opacity: 1 !important;
}

/* ---- 2. Card panel: restore proper padding ----
   .pay-panel input { padding: 7px 11px !important }
   from checkout_ultra_compact.py was overriding
   the 20px top padding needed for floating labels.
   #panel-card has higher specificity (ID + class).
   ------------------------------------------------ */
#panel-card .co-input {
  padding: 20px 13px 7px !important;
  font-size: 13px !important;
  border-radius: 8px !important;
}

/* ---- 3. Country/Region select ----
   text-overflow:ellipsis doesn't work on <select>.
   Use a background-image chevron arrow instead of
   the ::after pseudo-element (which is unreliable
   on native select elements in some browsers).
   ------------------------------------------------ */
.co-sel {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23475569' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 13px center !important;
  background-size: 10px 6px !important;
  padding-right: 36px !important;
  cursor: pointer !important;
  /* ensure text doesn't overflow under arrow */
  text-overflow: clip !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}
/* Remove the pseudo-element approach that was added earlier */
.co-field--select::after {
  display: none !important;
}

/* ---- 4. PayPal logo centering ----
   In a flex column container, align-self: center
   centers on the cross axis (horizontal).
   display:block + margin:auto doesn't work the
   same way in flex layout.
   ------------------------------------------------ */
.co-brand-logo {
  display: block !important;
  align-self: center !important;
  margin: 0 auto !important;
  flex-shrink: 0 !important;
}
.co-pp-box .co-brand-logo {
  width: 120px !important;
  height: 32px !important;
}

/* ---- 5. G Pay logos: protect brand colors ----
   If the template has global svg path { fill: currentColor }
   these rules restore the correct fills via attribute selector.
   ------------------------------------------------ */
/* Explicit overrides for each Google color */
.co-gp-logo [fill="#EA4335"] { fill: #EA4335 !important; }
.co-gp-logo [fill="#FBBC04"] { fill: #FBBC04 !important; }
.co-gp-logo [fill="#4285F4"] { fill: #4285F4 !important; }
.co-gp-logo [fill="#34A853"] { fill: #34A853 !important; }

/* G Pay box logo: explicit sizing */
.co-gp-logo {
  width: 101px !important;
  height: 30px !important;
  overflow: visible !important;
}

/* ---- 6. CSP hardening: utility classes replacing inline style="" ----
   These exist purely so no page needs a style="" attribute (Content-
   Security-Policy no longer allows 'unsafe-inline' in style-src). JS that
   toggles visibility still uses element.style.display directly (the CSSOM
   property setter, not the HTML attribute) — that's untouched by CSP and
   simply overrides these via normal specificity, so show/hide logic needs
   no changes anywhere.
   ------------------------------------------------ */
.u-hidden { display: none; }
.u-text-body { color: var(--paragraph); }
.u-text-light { color: var(--paragraph-light); }
.u-pre-line { white-space: pre-line; }
.u-w-auto { width: auto; }
.u-pb-0 { padding-bottom: 0; }
.u-h-260 { height: 260px; }
.u-minw-260 { min-width: 260px; }
.u-minw-240 { min-width: 240px; }
.u-max-640 { max-width: 640px; margin-bottom: 24px; }
.u-mb-16 { margin: 0 0 16px; }
.u-mb-12 { margin: 0 0 12px; }
.u-mb-20 { margin: 0 0 20px; }
.u-mb-0 { margin: 0; }
.u-mb-40 { margin-bottom: 40px; }
.u-text-center { text-align: center; }
.u-mt-14 { margin-top: 14px; }
.u-fs-13 { font-size: 13px; }
.u-flex-gap-10 { display: flex; gap: 10px; align-items: center; }
.u-flex-gap-20-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.u-empty-state { display: none; text-align: center; padding: 80px 0; }
.u-empty-state-icon { font-size: 64px; color: var(--border-light); display: block; margin-bottom: 24px; }
.u-logo-preview { max-width: 140px; max-height: 60px; display: none; }
.co-pay-error { color: #ff5252; margin-top: 10px; font-size: 13px; }


/* ===================================================
   TOUCH TARGET MINIMUMS (mobile / tablet)
   ===================================================
   Apple HIG and WCAG 2.5.5 both put the minimum comfortable tap target at
   44x44px. Below 992px these rules raise the controls that a real device
   audit measured under that: footer link lists, breadcrumb links, blog
   sidebar/tag/share links, the cart drawer's close button, and the search
   field inside the nav drawer.

   Deliberately expressed as min-height + inline-flex centering rather than
   extra padding: padding would shift each link's text off the baseline it
   shares with its neighbours, whereas growing the box and re-centering the
   text inside it leaves the visual rhythm intact and only enlarges the
   hit area. Scoped to <=991px so desktop's tighter, denser footer and
   sidebar spacing is untouched. */
@media (max-width: 991px) {
  .footer__legal a,
  .footer__copy-text .logo,
  a.payment,
  .page-banner .breadcrumb-list a,
  .right-item .right_list li a,
  .right-item .tags a,
  .tag-share .share a,
  .marquee-item > a,
  .info span a,
  .image-tag a,
  .tag-share .tag a,
  .arry a,
  #productCategoryLink,
  #discountToggle,
  #discountApply,
  #discountInput {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* Footer nav links are full-width rows in a stacked column, so they get
     `flex` rather than `inline-flex` — otherwise a short label ("FAQ")
     shrink-wraps to 43px wide and leaves most of its own row untappable. */
  .footer__item ul li a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  /* Contact page tel:/mailto: rows — the two links most likely to be tapped
     on a phone, and the ones where a mis-tap is most annoying (it dials or
     opens a mail client). Measured 32-40px tall. */
  .contact-info ul li a,
  ul.info li a,
  .contact .content ul li a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Carousel pagination dots are 20x20 by design and enlarging the dot
     itself would change the visual. Instead the dot keeps its size and
     gains an invisible centered 44x44 hit area via ::after.
     The margin is widened to 12px first, on purpose: at the default
     spacing the dots sit on a ~28px pitch, so 44px hit areas would
     overlap each other by 16px and produce exactly the ambiguous,
     accidental taps this is meant to prevent. 20px dot + 2x12px margin
     puts them on a 44px pitch, so the hit areas tile edge to edge without
     ever overlapping. */
  .dot .swiper-pagination-bullet {
    margin: 0 12px;
  }
  .dot .swiper-pagination-bullet::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
  /* Icon-only round targets: grow the box itself, not just its height, so
     the target is 44px in both axes rather than a wide short strip. */
  .tag-share .share a,
  .item > a.go_blog,
  .get-now-arry,
  .right-item .search button,
  .blog-pegi,
  .pt-4.bor-top > a,
  .page-banner .breadcrumb-list a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
  /* Cart drawer close button — measured 32x32 on every page. */
  #cartClose {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* The nav drawer's creator-search <label> is already a 48px row; the
     <input> inside it only occupied 26px of that, so a tap landing in the
     row's upper or lower band missed the field. Filling the row's height
     makes the whole visible field tappable. */
  .mega-menu__search input {
    align-self: stretch;
    height: auto;
    min-height: 44px;
  }
}

/* =====================================================================
   MOBILE FOOTER — collapsible accordion sections
   =====================================================================
   The footer's four link columns stack into one long scroll on a phone
   (~5 links each plus a newsletter block). Below 768px each column
   collapses behind its own heading, so the footer becomes four tappable
   rows instead of a wall of ~20 links.

   Deliberately driven off the markup that already exists on all 19 pages
   (.footer__item > .footer-title + ul) rather than new per-page markup —
   there is no footer partial, so anything requiring an HTML change would
   have to be applied 19 times and would drift.

   Desktop is untouched: everything here is inside the media query, and
   the panels are only collapsed when .footer-title carries [aria-expanded],
   which script.js only sets below 768px. */
@media (max-width: 767px) {
  .footer-area .footer__wrp { padding-top: 32px !important; padding-bottom: 8px !important; }
  .footer-area .row.g-4 { --bs-gutter-y: 0; }

  .footer__item { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
  .footer__item .footer-title[aria-expanded] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 56px total height — comfortably above the 44px minimum touch target,
       and the whole row is the target, not just the words. */
    padding: 18px 2px;
    margin: 0;
    font-size: 15px;
    letter-spacing: 0.02em;
    cursor: pointer;
    user-select: none;
  }
  .footer__item .footer-title[aria-expanded]::after {
    content: "\f078"; /* chevron-down */
    font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 11px;
    opacity: 0.6;
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .footer__item .footer-title[aria-expanded="true"]::after { transform: rotate(180deg); }

  /* max-height rather than the grid-template-rows 0fr/1fr trick the nav
     accordion uses: that technique needs the collapsing element to be a grid
     container with ONE child, and these panels are <ul>s with five <li>s —
     only the first implicit row would collapse, leaving the rest visible.
     The cap is deliberately well above the tallest real section (5 links
     ~240px) so content is never clipped; easing over a slightly larger range
     is imperceptible at this size. */
  .footer__item > ul {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .footer__item.is-open > ul {
    max-height: 420px;
    padding-bottom: 8px;
  }

  /* Larger tap targets for the links themselves once revealed. */
  .footer__item > ul li > a {
    display: block;
    padding: 11px 2px;
    font-size: 14px;
  }

  /* The newsletter column has no list — its heading stays a plain label and
     its controls are always visible, since collapsing a single input adds a
     tap for no saving. */
  .footer__item.newsletter { border-bottom: none; padding-top: 8px; }
  .footer__item.newsletter .subscribe,
  .footer__item.newsletter .social-icon { grid-template-rows: 1fr; }
  .footer__item.newsletter .social-icon { margin-top: 20px !important; }
  .footer__item.newsletter .social-icon a {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .footer__item.newsletter .subscribe input { padding: 14px 16px; font-size: 14px; }

  /* Trim the dead space the desktop layout leaves behind. */
  .footer__copy-text { padding-top: 24px !important; padding-bottom: 16px !important; }
  .footer__bottombar { flex-direction: column; gap: 12px; text-align: center; padding-bottom: 24px; }
  .footer__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; }
  .footer__legal a { padding: 8px 0; font-size: 13px; }
  .footer__bottombar-copy { font-size: 13px; }
}

/* CSP hardening follow-up: these four declarations used to ride as inline
   style="" attributes in my-library.js and program.js. The storefront's
   style-src-attr has no 'unsafe-inline' (only /admin does — see the CSP
   block in server/src/index.js), so the browser dropped every one of them
   and the cards rendered unpadded with full-bleed images. */
.lib-card { padding: 20px; }
.lib-card__img { width: 100%; border-radius: 6px; margin-bottom: 15px; }
.lib-card__meta { color: var(--paragraph-light); font-size: 13px; }
.pv-res__desc { font-size: 13px; color: var(--paragraph-light); }

/* The inner-page banner's image was assets/images/banner/inner-banner.jpg —
   a 1920x341 grey placeholder from the template that literally reads
   "1920X341", shipped on 12 pages. Replaced with a gradient in the brand's
   own dark tone rather than swapping in another photo: it looks deliberate,
   needs no art direction, and removes an image request from every inner
   page. .page-banner::before already lays a scrim over this for text
   legibility, so the two compose exactly as before. */
.page-banner.bg-image {
  background-image: linear-gradient(135deg, #1f2430 0%, #2b3242 55%, #171b24 100%);
  background-size: cover;
  background-position: center;
}

/* =====================================================================
   CHECKOUT CTA — visible label, thumb-sized, with a real pending state
   =====================================================================
   The label was rendering the whole time; it was black on a black button.
   style.css:206 declares a bare `span { color: var(--span) }`, and an
   element selector beats inheritance, so every <span> is forced to the
   body text colour no matter what its parent sets. The button's icon is an
   <i>, which that rule doesn't match — hence "only an icon appears".

   Fixed by making button labels inherit their button's colour rather than
   by bumping the CTA alone, since the same trap applies to every span
   sitting inside a coloured control. */
button span,
.btn-one span,
.cart-btn-checkout span,
.ct-btn span,
.btn-add-to-bag span {
  color: inherit;
}

/* Thumb-sized primary action. 56px is the floor here — it is the last tap
   in the funnel and the one that must never be missed. */

/* Pending state. `pointer-events: none` is the actual double-submit guard —
   opacity alone would still let a second tap through while the first
   PaymentIntent is in flight. */
@keyframes coSpin { to { transform: rotate(360deg); } }

/* ---- Trust indicators ------------------------------------------------ */
/* .co-trustlist, NOT .co-trust — that class was already taken by the
   "your plan isn't unlocked yet" lock banner above the promo field, and
   reusing it applied this two-column grid to that banner too. */
.co-trustlist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
  margin-top: 14px;
  padding: 0;
  list-style: none;
}
.co-trustlist li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--paragraph-light);
}
.co-trustlist li i {
  flex: 0 0 auto;
  margin-top: 2px;
  font-size: 10px;
  color: var(--success, #059669);
}
@media (max-width: 420px) {
  .co-trustlist { grid-template-columns: 1fr; gap: 7px; }
}
/* On mobile the CTA is a fixed bar, so the trust list must clear it or it
   sits underneath and is never seen. */
@media (max-width: 900px) {
  .co-trustlist { margin-bottom: 84px; }
}

/* =====================================================================
   CHECKOUT — collapsible order summary
   =====================================================================
   The summary's item list collapses behind a header showing the total —
   the Shopify/Stripe Checkout pattern — so the number is one tap away
   without the item list adding a screen of scroll between the payment
   fields and the CTA.

   Ordering is NOT done here. It used to be: this block carried
   `.co-summary-panel { order: -1 }`, which hoisted the summary above the
   form on mobile by paint order only, leaving the DOM — and therefore
   focus order and assistive tech — saying something different to the
   screen. checkout.html is now authored in the intended mobile order
   (form, summary, extras) and desktop rebuilds its two columns with
   explicit grid placement, so no `order` is needed at either width.

   Desktop is untouched: the toggle is display:none above 900px and the
   body is always open, so the two-column layout is exactly as before. */
.co-summary__toggle { display: none; }
.co-summary__body { display: block; }

@media (max-width: 900px) {
  .co-summary__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 16px 4px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
  }
  /* The rule belongs to the open list, not to the header — collapsed, it was
     a line under a header with nothing beneath it. */
  .co-summary__toggle[aria-expanded="true"] {
    border-bottom: 1px solid var(--border);
  }
  .co-summary__toggle-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 600;
    color: var(--heading-color);
  }
  .co-summary__toggle-label > i:first-child { font-size: 13px; opacity: 0.7; }
  .co-summary__chev {
    font-size: 10px;
    opacity: 0.6;
    transition: transform var(--nav-dur, 240ms) var(--nav-ease, cubic-bezier(0.25, 1, 0.5, 1));
  }
  .co-summary__toggle[aria-expanded="true"] .co-summary__chev { transform: rotate(180deg); }
  .co-summary__toggle-total {
    font-size: 16px;
    font-weight: 700;
    color: var(--heading-color);
  }

  /* max-height rather than grid-template-rows: this body holds a <ul> plus
     several sibling blocks, and the 0fr/1fr trick only collapses a single
     grid track — the same trap already hit in the footer accordion. The cap
     is well clear of the tallest realistic summary. */
  .co-summary__body {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height var(--nav-dur, 240ms) var(--nav-ease, cubic-bezier(0.25, 1, 0.5, 1)),
                opacity var(--nav-dur, 240ms) var(--nav-ease, cubic-bezier(0.25, 1, 0.5, 1));
    /* Confines the reflow of an auto-height reveal to this subtree. */
    contain: layout paint;
  }
  .co-summary__body.is-open {
    max-height: 1400px;
    opacity: 1;
  }
  /* The summary's own heading is redundant once the toggle above it says
     "Order summary". */
  .co-summary__body .co-summary__ttl { display: none; }

  @media (prefers-reduced-motion: reduce) {
    .co-summary__body { transition: none; }
    .co-summary__chev { transition: none; }
  }
}

/* =====================================================================
   CHECKOUT v2 — mobile-first purchase experience
   ===================================================================== */

/* ---- Sticky purchase bar (mobile) ------------------------------------
   The in-page CTA was itself position:fixed on mobile, which meant the
   total was never beside it and the button was duplicated conceptually.
   That fixed positioning is released here and the sticky bar takes over:
   it carries TOTAL + CTA and nothing else. */
@media (max-width: 900px) {
  /* Clearance for the fixed bar used to be padded onto the checkout section
     itself, which put 104px of empty space between the last card and the
     footer while the footer still slid underneath the bar. The footer owns
     that clearance now (§9), so this only needs to breathe. */
  .checkout-area { padding-bottom: 8px; }
  .co-trustlist { margin-bottom: 20px; }
}

/* NOTE: the bar's visibility is now owned by the "sole checkout CTA" block at
   the end of this file, which shows it at every width. It starts hidden via
   the `u-hidden` class in checkout.html until the cart is known to be
   non-empty, so no default `display: none` is needed here. */
@media (max-width: 900px) {
  .co-stickybar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    background: var(--color-bg, #fff);
    border-top: 1px solid var(--border);
    /* Sits above the iOS home indicator rather than under it. */
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -8px 28px rgba(15, 23, 42, 0.12);
    /* Own compositor layer: this element is fixed over a scrolling page, and
       promoting it avoids repainting the bar on every scroll frame. */
    will-change: transform;
    transform: translateZ(0);
    animation: coBarIn 260ms cubic-bezier(0.25, 1, 0.5, 1) both;
  }
  @keyframes coBarIn {
    from { transform: translate3d(0, 100%, 0); }
    to   { transform: translate3d(0, 0, 0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .co-stickybar { animation: none; }
  }
}
.co-stickybar__inner {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 620px;
  margin: 0 auto;
}
.co-stickybar__total {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  flex: 0 0 auto;
}
.co-stickybar__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paragraph-light);
}
/* The total is the strongest element in the bar by design — it is the one
   number the shopper is deciding on. */
.co-stickybar__value {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--heading-color);
}
.co-stickybar__cta {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 16px 20px;
  border: none;
  border-radius: 14px;
  background: var(--primary-color);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.22);
  transition: transform 140ms cubic-bezier(0.25, 1, 0.5, 1), background 180ms ease, opacity 180ms ease;
}
.co-stickybar__cta span { color: inherit; }
.co-stickybar__cta:active { transform: scale(0.985); }
.co-stickybar__cta.is-busy {
  pointer-events: none;
  opacity: 0.85;
  cursor: progress;
}
.co-stickybar__cta.is-busy > i { display: none; }

/* ---- Order summary rows --------------------------------------------- */
.co-order-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 16px 0 !important;
  font-size: 15px !important;
  border-bottom: 1px solid var(--border) !important;
  /* Collapse animation on remove, so a deleted row doesn't just vanish and
     snap everything below it upward. */
  transition: opacity 200ms ease, transform 200ms ease;
}
.co-order-item.is-removing {
  opacity: 0;
  transform: translateX(-12px);
}
.co-item-img {
  width: 60px !important;
  height: 60px !important;
  object-fit: cover !important;
  border-radius: 10px !important;
  border: 1px solid var(--border) !important;
  flex-shrink: 0 !important;
}
.co-item-img--empty { background: var(--sub-bg); display: block; }
.co-item-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.co-item-name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--heading-color);
}
.co-item-creator {
  font-size: 13px;
  color: var(--paragraph-light);
}
.co-item-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}
.co-item-price {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--heading-color) !important;
  white-space: nowrap;
}

/* Quantity stepper — 44px targets, which is the accessibility floor and
   also just the size a thumb actually hits on a moving train. */
.co-item-qty {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-top: 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  width: max-content;
}
.co-qty-btn {
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: var(--heading-color);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background 140ms ease;
}
.co-qty-btn:hover { background: var(--sub-bg); }
.co-qty-btn:active { background: var(--border); }
.co-qty-val {
  min-width: 30px;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
}
.co-item-qty-static {
  margin-top: 6px;
  font-size: 13px;
  color: var(--paragraph-light);
}
.co-item-remove {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--paragraph-light);
  font-size: 14px;
  cursor: pointer;
  border-radius: 10px;
  transition: color 140ms ease, background 140ms ease;
}
.co-item-remove:hover { color: var(--danger, #dc2626); background: rgba(220, 38, 38, 0.07); }

/* ---- Typography hierarchy -------------------------------------------- */
/* The grand total should dominate the summary; supporting rows step down. */
.co-grand { padding-top: 14px !important; margin-top: 6px !important; }
.co-grand span { font-size: 15px !important; font-weight: 700 !important; }
.co-grand span:last-child {
  font-size: 26px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}
.co-total-row { font-size: 14px !important; padding: 7px 0 !important; }

@media (max-width: 900px) {
  .co-summary__toggle-total { font-size: 18px !important; }
  /* Inputs at 16px so iOS Safari doesn't zoom the viewport on focus. */
  .co-input { font-size: 16px !important; min-height: 52px !important; }
  .co-promo input { font-size: 16px !important; min-height: 48px !important; }
  .co-promo button { min-height: 48px !important; min-width: 84px !important; }
}

/* =======================================================================
   Checkout — Contact & Billing: required markers, inline validation,
   international phone input, searchable country panel.
   Appended last deliberately: the checkout form rules above accumulated
   across several passes and lean on !important, so anything that needs to
   win has to be both later in the cascade and equally specific.
   ======================================================================= */

/* ---- Required-field marker ---- */
.co-req {
  color: var(--danger, #dc2626);
  margin-left: 2px;
  font-weight: 600;
}

/* ---- Inline validation messages ----
   Collapsed to zero height when empty so an untouched form has no gaps
   between fields; the field's own margin does the spacing. */
.co-err {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--danger, #dc2626);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 140ms ease, opacity 140ms ease, padding 140ms ease;
}
.co-field.co-invalid .co-err {
  max-height: 40px;
  opacity: 1;
  padding: 5px 2px 0;
}
.co-field.co-invalid .co-input {
  border-color: var(--danger, #dc2626) !important;
}
.co-field.co-invalid .co-input:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.14) !important;
}
/* A quiet tick rather than a green border: confirmation shouldn't compete
   with the errors or with the CTA for attention. */
.co-field.co-valid:not(.co-invalid)::after {
  content: "";
  position: absolute;
  right: 13px;
  top: 26px;
  width: 13px;
  height: 8px;
  border-left: 2px solid var(--success, #16a34a);
  border-bottom: 2px solid var(--success, #16a34a);
  transform: rotate(-45deg);
  pointer-events: none;
}
/* The country field's own chevron already occupies that corner. */
.co-field--select.co-valid::after { display: none; }

/* ---- International phone row ---- */
.co-field--phone {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}
.co-phone__field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: block;
}
.co-field--phone .co-err { flex: 1 0 100%; }

.co-dial {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  /* Matches .co-input's own box so the two read as one control. */
  padding: 0 11px;
  min-height: 52px;
  background: var(--sub-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--heading-color);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.co-dial:hover { border-color: var(--paragraph-light); }
.co-dial[aria-expanded="true"] {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.12);
}
.co-dial__flag { font-size: 19px; line-height: 1; }
.co-dial__code { font-weight: 600; font-variant-numeric: tabular-nums; }
.co-dial__chev { width: 10px; height: 6px; opacity: 0.55; flex: 0 0 auto; }

/* ---- Searchable country / dial-code panel ---- */
.co-cpanel {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
  overflow: hidden;
}
.co-cpanel[hidden] { display: none; }
.co-cpanel__searchwrap { padding: 9px; border-bottom: 1px solid var(--border); }
.co-cpanel__search {
  width: 100%;
  /* 16px: anything smaller and iOS Safari zooms the viewport on focus, which
     on a checkout reads as the page breaking. */
  font-size: 16px;
  padding: 10px 12px;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 8px;
  outline: none;
  background: var(--sub-bg);
  color: var(--heading-color);
}
.co-cpanel__search:focus { border-color: var(--primary-color); background: #fff; }
.co-cpanel__list {
  margin: 0;
  padding: 4px;
  list-style: none;
  max-height: 260px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.co-cpanel__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  min-height: 44px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--heading-color);
}
.co-cpanel__opt:hover,
.co-cpanel__opt.is-active { background: var(--sub-bg); }
.co-cpanel__flag { font-size: 18px; line-height: 1; flex: 0 0 auto; }
.co-cpanel__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.co-cpanel__dial {
  flex: 0 0 auto;
  color: var(--paragraph-light);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}
.co-cpanel__empty {
  padding: 16px 12px;
  text-align: center;
  color: var(--paragraph-light);
  font-size: 13px;
}

@media (max-width: 900px) {
  /* Touch targets: the dial button must match the 52px input beside it, and
     the picker gets more of the screen since there's no hover to preview. */
  .co-dial { min-height: 52px; font-size: 16px; padding: 0 12px; }
  .co-cpanel__list { max-height: 46vh; }
  .co-cpanel { left: -1px; right: -1px; }
  .co-field.co-valid:not(.co-invalid)::after { top: 30px; }
}

/* Very narrow phones: let the dial button and number stack rather than
   squeezing the number field to a few characters. */
@media (max-width: 359px) {
  .co-dial { flex: 1 0 100%; justify-content: flex-start; }
  .co-phone__field { flex: 1 0 100%; }
}

/* =======================================================================
   MOBILE CHECKOUT REDESIGN
   -----------------------------------------------------------------------
   Appended last on purpose. The checkout rules earlier in this file were
   built up over several passes and lean heavily on !important, so anything
   intended to win has to be both later in the cascade AND at least as
   specific. Everything below is expressed in the existing design tokens
   (--color-*, --radius, --shadow-*) and Inter via --montserrat, so this is
   a redesign within the existing identity, not a second design system.
   ======================================================================= */

/* -----------------------------------------------------------------------
   1. FLOW ORDER
   Mobile sequence is Logo -> Contact & Billing -> Payment -> Order Summary
   -> Recommended -> sticky CTA, and nothing else. That is the DOM order in
   checkout.html, not a paint-order trick: no `order`, no `display:none` on
   anything the shopper needs, no second copy of the form. Desktop uses
   explicit grid placement to rebuild the original two-column layout, so the
   one DOM serves both without duplicated markup.
   -------------------------------------------------------------------- */
@media (min-width: 901px) {
  .checkout-area > .container.co-layout,
  .co-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
    align-items: start !important;
  }
  .co-form-panel  { grid-column: 1; grid-row: 1 / span 2; }
  .co-summary-panel { grid-column: 2; grid-row: 1; }
  .co-extras-panel  { grid-column: 2; grid-row: 2; padding: 0 24px 40px 32px; }

  /* The flex sizing from the original two-panel layout has to be released
     inside the grid: `max-width: 42%` resolved against the flex container
     (the whole 1200px row) but resolves against the grid TRACK here, which
     is itself 42% — leaving the summary 212px wide in a 504px column, half
     the width of the extras block sitting directly beneath it. */
  .co-summary-panel {
    flex: initial;
    max-width: none;
  }
}

@media (max-width: 900px) {
  .checkout-area > .container.co-layout,
  .co-layout {
    display: flex !important;
    flex-direction: column !important;
    /* MUST be stretch, not the flex-start the desktop two-panel layout sets.
       In a column flex container, flex-start makes every panel shrink-to-fit
       its own content — and the recommendations carousel's content is a row
       of non-shrinking cards, so the extras panel sized itself to the full
       2592px track. The overflow-x:clip further down hid that, but Swiper had
       already measured a 2592px viewport for a 2592px track, concluded there
       was nothing to scroll, and locked itself (watchOverflow). The carousel
       could not be swiped at all. */
    align-items: stretch !important;
  }
  /* Belt and braces: a panel can never be wider than the phone, whatever a
     future child's intrinsic width turns out to be. */
  .co-form-panel,
  .co-summary-panel,
  .co-extras-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  /* No `order` here on purpose: checkout.html is authored form -> summary ->
     extras, so the natural flow IS the intended mobile sequence and paint
     order matches focus order. Desktop rebuilds its two columns via explicit
     grid placement above, which ignores source order entirely. */

  /* The form is the first thing under the logo, so it opens the page: no
     top rule, and only enough top padding to separate it from the header. */
  .co-form-panel {
    padding: 18px 16px 4px !important;
    border-bottom: none !important;
  }

  /* The summary is now a review step between payment and the extras. A top
     hairline and a tinted strip separate it from the fields above without
     giving it the visual weight of a card. */
  .co-summary-panel {
    padding: 4px 16px 8px !important;
    border-top: 1px solid var(--border) !important;
    border-bottom: 1px solid var(--border) !important;
    background: var(--color-surface-2) !important;
    margin-top: 18px !important;
  }
  .co-extras-panel {
    /* Bottom clearance for the fixed bar is NOT set here — it belongs to the
       footer, the actual last element in the flow. See §9. */
    padding: 10px 16px 0 !important;
  }

}

/* -----------------------------------------------------------------------
   2. ONE PRIMARY CTA ON MOBILE
   The in-page button stays in the DOM (it owns the click handler and the
   busy state the sticky bar mirrors) but is never painted on mobile.
   -------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* Its legal line belongs with the payment section instead, where the
     shopper actually is when they read it. */
  .co-privacy {
    margin: 14px 0 0 !important;
    padding: 0 2px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    text-align: center !important;
    color: var(--paragraph-light) !important;
  }
}

/* -----------------------------------------------------------------------
   3. PREMIUM FORM FIELDS
   Taller targets, a larger radius, a real focus ring and one consistent
   vertical rhythm. 16px type throughout is both the premium look and the
   thing that stops iOS Safari zooming the viewport on focus.
   -------------------------------------------------------------------- */
.co-section { margin-bottom: 26px; }
.co-section__ttl {
  font-family: var(--montserrat) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--paragraph-light) !important;
  margin: 0 0 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Form controls do NOT inherit font-family by default — without this the
   inputs, selects and buttons fall back to the browser UI font while the
   rest of the page is Inter. */
.co-input,
.co-sel,
.co-dial,
.co-cpanel__search,
.co-cpanel__opt,
.co-reco__add,
.co-stickybar__cta,
.co-promo input,
.co-promo button {
  font-family: var(--montserrat) !important;
}

.co-field { margin-bottom: 14px !important; }
.co-row { gap: 14px !important; }

.co-input {
  width: 100% !important;
  min-height: 58px !important;
  padding: 24px 16px 8px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  color: var(--heading-color) !important;
  background: var(--color-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease !important;
  -webkit-appearance: none;
  appearance: none;
}
.co-input:hover:not(:focus) { border-color: rgba(26, 26, 26, 0.2) !important; }
.co-input:focus {
  border-color: var(--primary-color) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(26, 26, 26, 0.08), var(--shadow-sm) !important;
}

/* Floating label: bigger, calmer, and it moves on the same curve as the
   field's own focus transition so the two read as one motion. */
.co-field .co-label:not(.co-label--top) {
  position: absolute !important;
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-family: var(--montserrat) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: var(--paragraph-light) !important;
  pointer-events: none !important;
  transition: top 160ms cubic-bezier(0.25, 1, 0.5, 1),
              font-size 160ms cubic-bezier(0.25, 1, 0.5, 1),
              color 160ms ease !important;
}
.co-field.co-focused .co-label:not(.co-label--top),
.co-field.co-filled  .co-label:not(.co-label--top),
.co-input:focus ~ .co-label:not(.co-label--top),
.co-phone__field .co-input:focus ~ .co-label {
  top: 11px !important;
  transform: none !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  color: var(--paragraph-light) !important;
}
.co-field.co-focused .co-label:not(.co-label--top),
.co-input:focus ~ .co-label:not(.co-label--top) {
  color: var(--primary-color) !important;
}
.co-label--top {
  top: 11px !important;
  left: 16px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  color: var(--paragraph-light) !important;
}

/* Country select: same box as a text field, chevron sized to match. */
.co-sel {
  min-height: 58px !important;
  padding: 24px 42px 8px 16px !important;
  border-radius: 14px !important;
  background-position: right 16px center !important;
  background-size: 11px 7px !important;
}
.co-field--select.co-valid::after { display: none !important; }

/* Validation states, restated against the new radius and ring. */
.co-field.co-invalid .co-input {
  border-color: var(--danger) !important;
  background: #fffcfc !important;
}
.co-field.co-invalid .co-input:focus {
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.1), var(--shadow-sm) !important;
}
.co-err { font-family: var(--montserrat); font-size: 12.5px; padding-left: 2px; }
.co-field.co-valid:not(.co-invalid)::after { top: 50%; margin-top: -6px; right: 18px; }

/* Phone row: dial button and number field as one visual control. */
.co-field--phone { gap: 10px !important; }
.co-dial {
  min-height: 58px !important;
  padding: 0 14px !important;
  border-radius: 14px !important;
  background: var(--color-surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  transition: border-color 160ms ease, box-shadow 160ms ease !important;
}
.co-dial[aria-expanded="true"] {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 4px rgba(26, 26, 26, 0.08), var(--shadow-sm) !important;
}
.co-cpanel {
  border-radius: 16px !important;
  box-shadow: 0 20px 50px rgba(26, 26, 26, 0.16) !important;
  background: var(--color-surface) !important;
}
.co-cpanel__search { border-radius: 11px !important; min-height: 46px !important; }

/* Payment method tabs, restated to match the new field metrics. */
.co-pay-tabs .pay-tab {
  min-height: 52px !important;
  border-radius: 14px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  gap: 8px !important;
  background: var(--color-surface) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: border-color 160ms ease, background 160ms ease !important;
}
.co-pay-tabs .pay-tab.active {
  border-color: var(--primary-color) !important;
  background: var(--color-surface-2) !important;
}

/* -----------------------------------------------------------------------
   4. RECOMMENDED PRODUCTS — looping swipe carousel
   Swiper (already bundled sitewide) drives an infinite loop: cloned slides
   sit either side of the real ones and the track silently repositions at
   the seam, so a thumb can keep flicking in one direction indefinitely.
   Free-mode momentum keeps the feel native rather than stepped.

   .co-recos__track below is the no-Swiper fallback — a native scroll-snap
   track, still a real horizontal swipe, never a static grid.
   -------------------------------------------------------------------- */
.co-recos { margin: 22px 0 18px; }
.co-recos__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.co-recos__ttl {
  margin: 0 !important;
  font-family: var(--montserrat);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--heading-color);
}
.co-recos__hint {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paragraph-light);
}
.co-recos__hint i { font-size: 10px; margin-left: 3px; }
/* Set by checkout-payments.js when every card already fits: no swipe to
   invite. */
.co-recos--static .co-recos__hint { display: none; }

.co-recos__track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-padding-left: 2px;
  /* Bleed to the panel edge so a card is visibly cut off — the affordance
     that tells a thumb there's more to the right. */
  margin: 0 -16px;
  padding: 4px 16px 14px;
  scrollbar-width: none;
}
.co-recos__track::-webkit-scrollbar { display: none; }

/* Swiper track. The few layout rules Swiper genuinely needs are restated
   here rather than relied on from swiper-bundle.min.css: that sheet is
   loaded as rel="preload" and only flipped to a stylesheet by
   css-preload-swap.js, so for the first moments of the page it is not
   applying — and a swiper-wrapper without `display: flex` is a vertical
   stack of cards, i.e. exactly the static list this section must not be. */
.co-recos__swiper {
  position: relative;
  overflow: hidden;
  /* The track is intrinsically as wide as all its cards laid end to end. This
     keeps that width from propagating up into whatever lays the panel out —
     if it does, Swiper measures a viewport as wide as its own track, decides
     nothing overflows and locks the slider. */
  width: 100%;
  max-width: 100%;
  min-width: 0;
  /* Bleeds to the panel edge, so a card is visibly cut off at the right —
     the affordance that tells a thumb there is more to swipe to. */
  margin: 0 -16px;
  padding: 4px 16px 14px;
  /* The loop hands cards in from outside the viewport; without this they are
     visible sliding in over the page margin. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}
.co-recos__swiper .swiper-wrapper {
  display: flex;
  align-items: stretch;
  box-sizing: content-box;
  position: relative;
  width: 100%;
  z-index: 1;
  transition-property: transform;
}
.co-recos__swiper .swiper-slide {
  flex-shrink: 0;
  height: auto;
  /* Sized in CSS because the carousel runs slidesPerView:"auto" — this
     declaration is what decides how many cards a 390px screen shows. */
  width: 132px;
}
/* Swiper drives the track with transforms; a scroll-snap container inside it
   would fight that, so the fallback's snap behaviour is scoped to the
   fallback only (.co-recos__track) and never applies here. */

.co-reco {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 132px;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 180ms cubic-bezier(0.25, 1, 0.5, 1), box-shadow 180ms ease;
}
.co-reco:active { transform: scale(0.975); }
.co-reco__media {
  aspect-ratio: 1 / 1;
  background: var(--color-surface-2);
  overflow: hidden;
}
.co-reco__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.co-reco__body { padding: 10px 11px 8px; flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; }
.co-reco__name {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--heading-color);
  /* Two lines then ellipsis, so a long plan name can't make one card
     taller than its neighbours and break the row's baseline. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.co-reco__price { font-size: 13px; font-weight: 700; color: var(--heading-color); }
.co-reco__add {
  margin: 0 9px 9px;
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--heading-color);
  background: var(--color-surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
  -webkit-tap-highlight-color: transparent;
}
.co-reco__add:hover,
.co-reco__add:active {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #ffffff;
}
.co-reco__add i { font-size: 10px; }

/* Desktop: the column is narrower than the phone viewport, so show fewer,
   slightly wider cards rather than shrinking them further. */
@media (min-width: 901px) {
  .co-recos__track { margin: 0; padding: 4px 0 12px; }
  .co-reco { width: 144px; }
  .co-recos__swiper {
    margin: 0;
    padding: 4px 0 12px;
    /* No bleed to mask on desktop: the track starts and ends inside the
       column, so a fade would just dim the first and last card. */
    -webkit-mask-image: none;
    mask-image: none;
  }
  .co-recos__swiper .swiper-slide { width: 144px; }
}

/* -----------------------------------------------------------------------
   5. STICKY CHECKOUT BAR
   The single primary CTA on mobile: lock, label and live total, over a
   translucent blurred surface so page content reads as passing beneath it.
   -------------------------------------------------------------------- */
@media (max-width: 900px) {
  .co-stickybar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(250, 250, 249, 0.82);
    border-top: 1px solid var(--border);
    box-shadow: 0 -8px 28px rgba(26, 26, 26, 0.07);
    animation: coStickyIn 420ms cubic-bezier(0.25, 1, 0.5, 1) both;
  }
  /* Progressive enhancement: only go translucent where the blur is
     actually supported, otherwise the bar would be a flat wash over live
     text with no separation. */
  @supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
    .co-stickybar {
      background: rgba(250, 250, 249, 0.72);
      -webkit-backdrop-filter: blur(20px) saturate(180%);
      backdrop-filter: blur(20px) saturate(180%);
    }
  }
  .co-stickybar.u-hidden,
  .co-stickybar--suppressed { display: none !important; }

  .co-stickybar__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 620px;
    margin: 0 auto;
  }
  .co-stickybar__total { display: flex; flex-direction: column; gap: 1px; flex: 0 0 auto; }
  .co-stickybar__label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--paragraph-light);
  }
  .co-stickybar__value {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--heading-color);
    font-variant-numeric: tabular-nums;
  }
  .co-stickybar__cta {
    flex: 1 1 auto;
    min-height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 18px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #ffffff;
    background: var(--primary-color);
    border: none;
    border-radius: 14px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(26, 26, 26, 0.22);
    transition: transform 140ms cubic-bezier(0.25, 1, 0.5, 1), background 160ms ease;
    -webkit-tap-highlight-color: transparent;
  }
  .co-stickybar__cta:active { transform: scale(0.985); background: #000000; }
  .co-stickybar__cta > i { font-size: 14px; }
}

@keyframes coStickyIn {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .co-stickybar { animation: none !important; }
  .co-reco, .co-input, .co-field .co-label { transition: none !important; }
}

/* -----------------------------------------------------------------------
   6. PAYMENT MARKS
   One row, one baseline, one weight — previously each brand chip carried
   its own size and the row read as mismatched stickers.
   -------------------------------------------------------------------- */
.co-summary-payments {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  margin: 18px 0 10px !important;
}
.co-summary-payments .card-brand,
.co-brands .card-brand {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 48px !important;
  height: 30px !important;
  padding: 0 9px !important;
  font-family: var(--montserrat) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  color: var(--paragraph-light) !important;
  background: var(--color-surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 7px !important;
  box-shadow: none !important;
}
.co-ssl--summary {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin: 0 !important;
  font-size: 11.5px !important;
  color: var(--paragraph-light) !important;
}
.co-trustlist {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px !important;
  margin: 18px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.co-trustlist li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 7px !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  color: var(--paragraph-light) !important;
}
.co-trustlist li i { font-size: 9px; margin-top: 4px; color: var(--success); }
@media (max-width: 359px) {
  .co-trustlist { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------------------
   7. MOBILE AUDIT GUARDS
   -------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* Nothing on a checkout should ever scroll sideways. The track in §4 is
     the one intentional horizontal scroller and clips itself. */
  html, body { overflow-x: hidden; max-width: 100%; }
  .co-page, .checkout-area, .co-layout { max-width: 100%; overflow-x: clip; }

  /* Notch / home-indicator safe areas on the full-bleed checkout chrome. */
  .co-hdr__inner {
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
  }

  /* Long plan names in the summary must wrap, not push the row wider. */
  .co-order-items li,
  .co-total-row { min-width: 0; }
  .co-order-items li span:first-child { overflow-wrap: anywhere; }
}

/* -----------------------------------------------------------------------
   8. MOBILE FOOTER
   Legal and Social are mirrored into accordion sections by script.js
   (footerAccordion). Their originals are hidden here so the content isn't
   presented twice, and the bottom bar collapses to just the copyright.
   Everything is inside the mobile query — desktop is untouched.
   -------------------------------------------------------------------- */
@media (max-width: 767px) {
  .footer-area .footer__legal,
  .footer-area .footer__item.newsletter .social-icon,
  .footer-area .footer__bottombar-right .payment {
    display: none !important;
  }
  .footer-area .footer__bottombar {
    flex-direction: column !important;
    gap: 10px !important;
    text-align: center !important;
    padding-bottom: max(18px, env(safe-area-inset-bottom)) !important;
  }
  .footer-area .footer__bottombar-copy { font-size: 12px !important; }

  /* The standalone logo block between the columns and the bottom bar is
     the single tallest thing in the mobile footer and repeats the header
     logo three screens up. */
  .footer-area .footer__copy-text { padding: 18px 0 !important; }
  .footer-area .footer__copy-text img { max-height: 26px; width: auto; }

  /* Newsletter keeps its own row but loses the outsized top margin the
     desktop grid gives it. */
  .footer-area .footer__item.newsletter { border-bottom: none !important; padding-top: 18px !important; }
  .footer-area .footer__item.newsletter .footer-title { margin-bottom: 12px !important; }
}

/* -----------------------------------------------------------------------
   9. STICKY BAR AS THE SOLE CHECKOUT CTA
   The in-page #placeOrderBtn was deleted from checkout.html, so this bar is
   now the only place-order control at EVERY width, not just on mobile — a
   desktop shopper would otherwise have no way to pay. The busy/spinner
   styling that used to live on .co-cta-btn moves here with it.
   -------------------------------------------------------------------- */
.co-stickybar {
  display: block;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(250, 250, 249, 0.82);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 28px rgba(26, 26, 26, 0.07);
  animation: coStickyIn 420ms cubic-bezier(0.25, 1, 0.5, 1) both;
}
@supports ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
  .co-stickybar {
    background: rgba(250, 250, 249, 0.72);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
  }
}
.co-stickybar.u-hidden,
.co-stickybar--suppressed { display: none !important; }

.co-stickybar__inner {
  display: flex;
  align-items: center;
  gap: 14px;
  /* Tracks the page container on desktop so the bar's contents line up with
     the columns above rather than floating at the window edges. */
  max-width: 1200px;
  margin: 0 auto;
}

.co-stickybar__cta {
  flex: 1 1 auto;
  position: relative;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 18px;
  font-family: var(--montserrat);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #ffffff;
  background: var(--primary-color);
  border: none;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(26, 26, 26, 0.22);
  transition: transform 140ms cubic-bezier(0.25, 1, 0.5, 1), background 160ms ease;
  -webkit-tap-highlight-color: transparent;
}
.co-stickybar__cta:hover:not(:disabled) { background: var(--primary-hover); }
.co-stickybar__cta:active:not(:disabled) { transform: scale(0.985); background: #000000; }

/* Busy state: pointer-events:none is the real double-submit guard — a second
   tap while a PaymentIntent is in flight would otherwise create a second one. */
.co-stickybar__cta.is-busy,
.co-stickybar__cta:disabled {
  pointer-events: none;
  opacity: 0.85;
  cursor: progress;
}
.co-stickybar__cta.is-busy > i { display: none; }
.co-stickybar__cta .co-cta-spinner { display: none; }
.co-stickybar__cta.is-busy .co-cta-spinner {
  display: inline-block;
  width: 17px;
  height: 17px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  border-radius: 50%;
  /* Compositor-only: rotation is a transform, so the spinner costs nothing
     while a payment is being confirmed. */
  animation: coSpin 0.7s linear infinite;
}
@keyframes coSpin { to { transform: rotate(360deg); } }

/* Desktop: the bar is a slimmer strip, and the CTA stops stretching the full
   width of a 1200px container — a 1000px-wide button reads as a banner. */
@media (min-width: 901px) {
  .co-stickybar__inner { justify-content: flex-end; padding: 0 24px; }
  .co-stickybar__total { margin-right: auto; }
  .co-stickybar__cta { flex: 0 0 auto; min-width: 280px; }
}

@media (prefers-reduced-motion: reduce) {
  .co-stickybar { animation: none !important; }
  .co-stickybar__cta .co-cta-spinner { animation-duration: 2s !important; }
}

/* Clearance for the fixed bar, which is present at all widths. It goes on the
   LAST element in the page flow, and that is the footer — not the extras
   panel: 112px of padding inside the panel only opened a dead gap between the
   recommendations and the footer while still letting the footer's final rows
   slide under the bar at the true bottom of the page. */
.co-extras-panel { padding-bottom: 28px !important; }
main.co-page ~ .footer-area {
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
}

/* =======================================================================
   10. PAYMENT STATE + LIGHTER FORM
   Two problems this fixes:
   a) the card panel rendered empty whenever the Payment Element couldn't
      mount yet (no key, or details incomplete) — see .co-paystate;
   b) the fields were four individually-bordered, shadowed 58px boxes,
      which reads as dated and eats the vertical space that should be
      getting the shopper to the payment step.
   ======================================================================= */

/* -----------------------------------------------------------------------
   10a. Card-payment state block — never an empty payment section
   -------------------------------------------------------------------- */
.co-paystate {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-radius: 14px;
  background: var(--color-surface-2);
  border: 1px dashed var(--border);
}
/* Mounted Payment Element present: the placeholder disappears entirely. */
.co-paystate[data-state="ready"] { display: none; }
/* Conversely, hide the empty mount point until it actually holds fields, so
   its margins don't open a gap above the placeholder. */
#stripe-payment-element:empty { display: none; }

.co-paystate__icon {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--color-surface);
  border: 1px solid var(--border);
  color: var(--paragraph-light);
  font-size: 14px;
}
.co-paystate__copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.co-paystate__title {
  font-family: var(--montserrat);
  font-size: 14px;
  font-weight: 700;
  color: var(--heading-color);
  letter-spacing: -0.01em;
}
.co-paystate__desc {
  font-family: var(--montserrat);
  font-size: 13px;
  line-height: 1.5;
  color: var(--paragraph-light);
}

/* Unavailable / failed are genuine problems, not just "not yet" — they get a
   solid warning treatment so they aren't mistaken for a loading state. */
.co-paystate[data-state="unavailable"],
.co-paystate[data-state="failed"] {
  border-style: solid;
  border-color: rgba(217, 119, 6, 0.35);
  background: rgba(217, 119, 6, 0.06);
}
.co-paystate[data-state="unavailable"] .co-paystate__icon,
.co-paystate[data-state="failed"] .co-paystate__icon {
  color: var(--warning);
  border-color: rgba(217, 119, 6, 0.3);
}

/* Unconfigured method tabs: visibly present, clearly not selectable. */
.pay-tab.is-unavailable {
  opacity: 0.5;
  pointer-events: none;
  position: relative;
}
.pay-tab__badge {
  display: block;
  width: 100%;
  margin-top: 2px;
  font-family: var(--montserrat);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--warning);
}
.co-pay-tabs .pay-tab.is-unavailable { flex-direction: column; gap: 2px !important; }

/* -----------------------------------------------------------------------
   10b. Lighter form: one grouped card, hairline dividers
   Replaces four separate bordered+shadowed boxes with a single surface the
   fields sit inside, separated by 1px rules — the pattern Apple Pay and
   Stripe Checkout use. Fewer edges, less visual weight, ~40px shorter.
   -------------------------------------------------------------------- */
.co-section .co-fieldgroup {
  background: var(--color-surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* Inside a group the field itself carries no chrome — the group owns it. */
.co-fieldgroup .co-field { margin-bottom: 0 !important; position: relative; }
.co-fieldgroup .co-field + .co-field,
.co-fieldgroup .co-row + .co-field,
.co-fieldgroup .co-field + .co-row {
  border-top: 1px solid var(--border);
}
.co-fieldgroup .co-input,
.co-fieldgroup .co-sel {
  min-height: 56px !important;
  padding: 22px 16px 7px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* Focus is shown as a tinted row plus a left accent rule rather than a ring —
   a ring inside a grouped list fights the dividers. */
.co-fieldgroup .co-field::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--primary-color);
  opacity: 0;
  transition: opacity 160ms ease;
  z-index: 1;
}
.co-fieldgroup .co-field.co-focused { background: rgba(26, 26, 26, 0.02); }
.co-fieldgroup .co-field.co-focused::before { opacity: 1; }
.co-fieldgroup .co-input:focus,
.co-fieldgroup .co-sel:focus {
  background: rgba(26, 26, 26, 0.02) !important;
  box-shadow: none !important;
}

/* Two-up row inside a group: a vertical hairline instead of a gap. */
.co-fieldgroup .co-row { gap: 0 !important; margin-bottom: 0 !important; }
.co-fieldgroup .co-row .co-field + .co-field { border-top: none; border-left: 1px solid var(--border); }

/* Errors sit inside the row's padding so a message can't reflow the dividers. */
.co-fieldgroup .co-err { padding: 0 16px 8px !important; }
.co-fieldgroup .co-field.co-invalid { background: rgba(220, 38, 38, 0.04); }
.co-fieldgroup .co-field.co-invalid::before { background: var(--danger); opacity: 1; }
.co-fieldgroup .co-field.co-invalid .co-input { border: none !important; background: transparent !important; }

/* Phone row inside the group: the dial button loses its own box too. */
.co-fieldgroup .co-field--phone { gap: 0 !important; flex-wrap: nowrap !important; }
.co-fieldgroup .co-dial {
  min-height: 56px !important;
  border: none !important;
  border-right: 1px solid var(--border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.co-fieldgroup .co-dial[aria-expanded="true"] { background: rgba(26, 26, 26, 0.03) !important; }
.co-fieldgroup .co-field--phone .co-err { flex: 1 0 100%; }

/* On a single column the two-up row stacks, so its divider becomes horizontal
   again — otherwise the left rule would sit under a full-width field. */
@media (max-width: 560px) {
  .co-fieldgroup .co-row { flex-direction: column !important; }
  .co-fieldgroup .co-row .co-field + .co-field {
    border-left: none;
    border-top: 1px solid var(--border);
  }
}

/* =======================================================================
   11. CONTACT & BILLING — premium field group
   -----------------------------------------------------------------------
   These four fields are now the first thing under the logo on mobile, so
   they carry the whole first impression of the checkout. Refines §10b's
   grouped surface rather than replacing it: same one-card-with-hairlines
   structure, taller touch rows, softer edges, and a focus state that lights
   the whole group the way Stripe's and Apple's do instead of ringing an
   individual box. Sizing is mobile-first; desktop keeps its denser metrics
   so the two-column layout is unchanged.
   ======================================================================= */

.co-section__hint {
  margin: -8px 0 14px !important;
  font-family: var(--montserrat);
  font-size: 13px;
  line-height: 1.5;
  color: var(--paragraph-light);
  text-wrap: pretty;
}

/* ---- The group surface ---------------------------------------------- */
.co-section .co-fieldgroup {
  border-radius: 18px;
  border-color: rgba(26, 26, 26, 0.09);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04),
              0 12px 28px -18px rgba(15, 23, 42, 0.35);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
/* Premium focus: the card itself responds, so the shopper sees one control
   they are inside of rather than four boxes one of which is ringed. */
.co-section .co-fieldgroup:focus-within {
  border-color: rgba(26, 26, 26, 0.2);
  box-shadow: 0 0 0 4px rgba(26, 26, 26, 0.05),
              0 1px 2px rgba(15, 23, 42, 0.04),
              0 16px 34px -20px rgba(15, 23, 42, 0.4);
}
@media (prefers-reduced-motion: reduce) {
  .co-section .co-fieldgroup { transition: none; }
}

/* Hairlines a touch lighter than the group's own edge, so the dividers read
   as internal structure rather than as four stacked boxes. */
.co-fieldgroup .co-field + .co-field,
.co-fieldgroup .co-row + .co-field,
.co-fieldgroup .co-field + .co-row,
.co-fieldgroup .co-row .co-field + .co-field {
  border-color: rgba(26, 26, 26, 0.07);
}

/* ---- Rows ------------------------------------------------------------ */
.co-fieldgroup .co-input,
.co-fieldgroup .co-sel {
  min-height: 62px !important;
  padding: 26px 18px 9px !important;
  /* 16px is both the premium type size and the threshold below which iOS
     Safari zooms the viewport on focus — which on a checkout throws the
     shopper into a horizontally scrolled page mid-form. */
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  color: var(--heading-color) !important;
  caret-color: var(--primary-color);
  /* Kills the 300ms tap delay and the grey flash on the field itself. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.co-fieldgroup .co-sel { padding-right: 44px !important; }

/* Chrome/Safari autofill repaints the row bright yellow-blue, which on a
   transparent grouped field looks like a rendering fault. Repainted back to
   the surface with an inset shadow (background-color itself is locked by
   the UA in that state). */
.co-fieldgroup .co-input:-webkit-autofill,
.co-fieldgroup .co-input:-webkit-autofill:hover,
.co-fieldgroup .co-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 60px var(--color-surface) inset !important;
  -webkit-text-fill-color: var(--heading-color) !important;
  caret-color: var(--primary-color);
}

/* ---- Focused row ----------------------------------------------------- */
.co-fieldgroup .co-field.co-focused { background: #ffffff; }
.co-fieldgroup .co-field::before { width: 2.5px; }
.co-fieldgroup .co-input:focus,
.co-fieldgroup .co-sel:focus {
  background: #ffffff !important;
  outline: none !important;
}

/* ---- Labels ---------------------------------------------------------- */
/* Resting: large enough to read as the field's real name, not a hint. */
.co-fieldgroup .co-field .co-label:not(.co-label--top) {
  left: 18px !important;
  font-size: 15.5px !important;
  font-weight: 450 !important;
  letter-spacing: -0.005em !important;
}
/* Floated: small caps-ish, so the value below it is unambiguously the
   content and the label is unambiguously the caption. */
.co-fieldgroup .co-field.co-focused .co-label:not(.co-label--top),
.co-fieldgroup .co-field.co-filled  .co-label:not(.co-label--top),
.co-fieldgroup .co-input:focus ~ .co-label:not(.co-label--top),
.co-fieldgroup .co-phone__field .co-input:focus ~ .co-label,
.co-fieldgroup .co-label--top {
  top: 12px !important;
  left: 18px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}
/* The asterisk is structure, not emphasis — required is the norm here (all
   four fields are), so it stays quiet and the label does the work. */
.co-fieldgroup .co-req { color: var(--paragraph-light); font-weight: 500; opacity: 0.7; }

/* ---- Phone + country controls --------------------------------------- */
.co-fieldgroup .co-dial {
  min-height: 62px !important;
  padding: 0 16px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  border-right-color: rgba(26, 26, 26, 0.07) !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.co-fieldgroup .co-field--phone .co-phone__field .co-input { padding-left: 14px !important; }

/* ---- Errors ---------------------------------------------------------- */
.co-fieldgroup .co-err {
  padding: 0 18px 9px !important;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--danger);
}

/* ---- Mobile-only sizing --------------------------------------------- */
@media (max-width: 900px) {
  /* Full 44px+ targets with room to spare, and the group set slightly
     inboard of the panel edge so the shadow has somewhere to fall. */
  .co-fieldgroup .co-input,
  .co-fieldgroup .co-sel,
  .co-fieldgroup .co-dial { min-height: 64px !important; }
  .co-section { margin-bottom: 28px !important; }
  .co-section--divider { padding-top: 26px !important; }
}

/* Desktop keeps §10b's denser rows: the two-column layout is unchanged, and
   a 64px row there would push the payment section below the fold. */
@media (min-width: 901px) {
  .co-fieldgroup .co-input,
  .co-fieldgroup .co-sel,
  .co-fieldgroup .co-dial { min-height: 58px !important; }
  .co-fieldgroup .co-input,
  .co-fieldgroup .co-sel { padding: 23px 18px 8px !important; }
  .co-fieldgroup .co-sel { padding-right: 44px !important; }
}

/* =======================================================================
   12. MOBILE FLOW ENDS AT THE CTA
   -----------------------------------------------------------------------
   Appended after §6, which sets `display: flex/grid !important` on these
   same blocks — an earlier rule, however specific, could not have won.

   The mobile sequence is Logo -> Contact & Billing -> Payment -> Order
   Summary -> Recommended -> sticky CTA, and nothing after it. The trust
   list, the payment-mark row and the SSL line are desktop right-column
   furniture; on a phone they are two more screens of scroll PAST the point
   of purchase. The same reassurance is already on screen where it matters:
   the lock on the sticky CTA, the card marks inside the payment panel, and
   the privacy line directly under the card fields. Desktop keeps all three.
   ======================================================================= */
@media (max-width: 900px) {
  .co-trustlist,
  .co-summary-payments,
  .co-ssl--summary { display: none !important; }
}