/* =========================================================
   Elite Ecommerce — brand styles (rasayanam.in inspired)
   Earthy Ayurvedic palette: olive, cream, terracotta, gold.
   Sans-serif body (Inter) + serif headlines (Playfair Display).
   Loaded ON TOP of the nlf-asif base so cart/checkout still work.
   ========================================================= */

:root {
  --ee-primary:        #4A6B3A;   /* deep olive */
  --ee-primary-dark:   #3A5530;
  --ee-primary-tint:   rgba(74, 107, 58, 0.08);
  --ee-gold:           #C3884D;   /* terracotta-gold */
  --ee-gold-dark:      #A66E2A;
  --ee-cream:          #FAF6EF;
  --ee-cream-2:        #F2EBDB;
  --ee-text:           #2A2A2A;
  --ee-text-2:         #5B5B5B;
  --ee-muted:          #8B8B8B;
  --ee-border:         #E6DFCF;
  --ee-surface:        #FFFFFF;
  --ee-radius:         14px;
  --ee-radius-sm:      10px;
  --ee-shadow-sm:      0 1px 3px rgba(42, 42, 42, 0.06);
  --ee-shadow:         0 10px 30px rgba(42, 42, 42, 0.08);
}

* { box-sizing: border-box; }

body {
  background: var(--ee-cream);
  color: var(--ee-text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5 {
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--ee-text);
  font-weight: 600;
  letter-spacing: -0.01em;
}

img { max-width: 100%; height: auto; display: block; }

.ee-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}

.ee-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.ee-btn-primary {
  background: var(--ee-primary);
  color: #fff;
  box-shadow: 0 8px 16px rgba(74, 107, 58, 0.20);
}
.ee-btn-primary:hover {
  background: var(--ee-primary-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(74, 107, 58, 0.25);
}
.ee-btn-ghost {
  background: transparent;
  border-color: var(--ee-primary);
  color: var(--ee-primary);
}
.ee-btn-ghost:hover {
  background: var(--ee-primary);
  color: #fff;
}

/* =========================================================
   Announcement bar
========================================================= */
.ee-announce {
  background: var(--ee-primary);
  color: #fff;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 8px 0;
  text-align: center;
}

/* =========================================================
   Hero
========================================================= */
.ee-hero {
  background: var(--ee-cream);
  padding: 0;
}
.ee-hero-slider .ee-hero-slide {
  display: block;
}
.ee-hero-slider img {
  width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: cover;
}
.ee-hero .slick-dots {
  position: absolute;
  bottom: 16px;
  left: 0; right: 0;
  text-align: center;
  z-index: 5;
}
.ee-hero .slick-dots li button { font-size: 0; width: 8px; height: 8px; border-radius: 50%; background: #fff; border: 0; opacity: .5; margin: 0 3px; }
.ee-hero .slick-dots li.slick-active button { opacity: 1; background: var(--ee-gold); }

.ee-hero--empty { padding: 80px 0; background: linear-gradient(135deg, var(--ee-cream) 0%, var(--ee-cream-2) 100%); }
.ee-hero-empty {
  text-align: center;
  max-width: 620px;
  margin: 0 auto;
}
.ee-hero-empty small {
  display: block;
  color: var(--ee-gold);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.ee-hero-empty h1 {
  font-size: 56px;
  font-weight: 700;
  line-height: 1.05;
  margin: 0 0 16px;
}
.ee-hero-empty p {
  font-size: 17px;
  color: var(--ee-text-2);
  margin: 0 auto 28px;
  max-width: 480px;
}

/* =========================================================
   Trust strip (USPs)
========================================================= */
.ee-trust {
  background: var(--ee-cream-2);
  border-top: 1px solid var(--ee-border);
  border-bottom: 1px solid var(--ee-border);
  padding: 24px 0;
}
.ee-trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}
.ee-trust-item {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ee-trust-item i {
  font-size: 26px;
  color: var(--ee-primary);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--ee-primary-tint);
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.ee-trust-item strong { display: block; font-size: 14px; font-weight: 700; color: var(--ee-text); }
.ee-trust-item small { display: block; color: var(--ee-text-2); font-size: 12.5px; }

/* =========================================================
   Section shell
========================================================= */
.ee-section { padding: 64px 0; }
/* Section header — grid so eyebrow + h2 stack on the LEFT and the
   "Shop all" link sits on the RIGHT. Previously this used
   `flex; justify-content: space-between` which pushed the h2 to the
   middle/right whenever a link was present in the same header. */
.ee-section-head {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "eyebrow link"
    "title   link";
  column-gap: 16px;
  margin-bottom: 32px;
  text-align: left;
}
.ee-section-head > small { grid-area: eyebrow; }
.ee-section-head > h2    { grid-area: title;   }
.ee-section-head > a,
.ee-section-head > .ee-section-link { grid-area: link; align-self: end; justify-self: end; }
.ee-section-head small {
  display: block;
  color: var(--ee-gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 8px;
  text-align: left;
}
.ee-section-head h2 {
  font-size: 36px;
  margin: 0;
  line-height: 1.1;
  text-align: left;
}
/* Center variant — used by the press / IG / etc. sections that should
   read more like an editorial slug, with the eyebrow + h2 stacked
   horizontally centered. */
.ee-section-head--center {
  display: block;
  text-align: center;
  grid-template-areas: none;
}
.ee-section-head--center small,
.ee-section-head--center h2 { text-align: center; }
.ee-section-link {
  color: var(--ee-primary);
  font-size: 14px;
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
}
.ee-section-link:hover { color: var(--ee-gold-dark); }

/* =========================================================
   Category grid
========================================================= */
.ee-cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (min-width: 600px) { .ee-cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .ee-cat-grid { grid-template-columns: repeat(6, 1fr); } }
.ee-cat {
  display: block;
  text-align: center;
  transition: transform .2s ease;
}
.ee-cat:hover { transform: translateY(-3px); }
.ee-cat-img {
  background: var(--ee-surface);
  border: 1px solid var(--ee-border);
  border-radius: 50%;
  overflow: hidden;
  aspect-ratio: 1;
  margin: 0 auto 12px;
  width: 100%;
  max-width: 130px;
  box-shadow: var(--ee-shadow-sm);
}
.ee-cat-img img {
  width: 100%; height: 100%; object-fit: cover;
}
.ee-cat span {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ee-text);
}

/* =========================================================
   Product grid + card
========================================================= */
.ee-prod-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (min-width: 720px) { .ee-prod-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
@media (min-width: 1100px) { .ee-prod-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; } }

.ee-card {
  background: var(--ee-surface);
  border: 1px solid var(--ee-border);
  border-radius: var(--ee-radius);
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  display: flex; flex-direction: column;
}
.ee-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ee-shadow);
  border-color: var(--ee-primary);
}
.ee-card-img {
  position: relative;
  background: var(--ee-cream);
  aspect-ratio: 1;
  overflow: hidden;
}
.ee-card-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .35s ease;
}
.ee-card:hover .ee-card-img img { transform: scale(1.04); }
.ee-card-off {
  position: absolute;
  top: 10px; left: 10px;
  background: var(--ee-gold);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
.ee-card-wish {
  position: absolute;
  top: 10px; right: 10px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  color: var(--ee-text-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px;
  box-shadow: var(--ee-shadow-sm);
  cursor: pointer;
  transition: color .15s ease, transform .15s ease;
}
.ee-card-wish:hover { color: #D14343; transform: scale(1.05); }
.ee-card-wish.is-on { color: #D14343; }
.ee-card-body { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.ee-card-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.ee-card-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  line-height: 1;
}
.ee-card-title {
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  margin: 0;
  color: var(--ee-text);
  line-height: 1.35;
  min-height: 39px;
}
.ee-card-price-row {
  display: flex; align-items: baseline; gap: 8px;
  margin-top: 2px;
}
.ee-card-price {
  font-size: 17px;
  font-weight: 800;
  color: var(--ee-primary);
}
.ee-card-old {
  font-size: 13px;
  color: var(--ee-muted);
}
.ee-card-cta {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--ee-primary);
  background: transparent;
  color: var(--ee-primary);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--ee-radius-sm);
  margin-top: 6px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.ee-card-cta:hover { background: var(--ee-primary); color: #fff; }

/* =========================================================
   About / brand story
========================================================= */
.ee-about {
  background: linear-gradient(135deg, var(--ee-cream) 0%, var(--ee-cream-2) 100%);
  padding: 80px 0;
}
.ee-about-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
@media (min-width: 900px) {
  .ee-about-inner { grid-template-columns: 1fr 1fr; gap: 60px; }
}
.ee-about-img {
  border-radius: var(--ee-radius);
  overflow: hidden;
  box-shadow: var(--ee-shadow);
}
.ee-about-img img { width: 100%; height: 100%; object-fit: cover; }
.ee-about-text small {
  display: block;
  color: var(--ee-gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.ee-about-text h2 {
  font-size: 42px;
  line-height: 1.1;
  margin: 0 0 18px;
}
.ee-about-text p {
  font-size: 16px;
  color: var(--ee-text-2);
  line-height: 1.65;
  margin: 0 0 24px;
}

/* =========================================================
   Reviews
========================================================= */
.ee-reviews {
  background: var(--ee-cream-2);
  padding: 80px 0;
}
.ee-reviews-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 700px) { .ee-reviews-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ee-reviews-grid { grid-template-columns: repeat(3, 1fr); } }
.ee-review {
  background: var(--ee-surface);
  border-radius: var(--ee-radius);
  padding: 24px;
  box-shadow: var(--ee-shadow-sm);
}
.ee-review-stars { color: var(--ee-gold); font-size: 14px; margin-bottom: 12px; }
.ee-review p { font-size: 15px; line-height: 1.6; color: var(--ee-text); font-style: italic; margin: 0 0 16px; }
.ee-review footer strong { display: block; font-size: 14px; font-weight: 700; color: var(--ee-text); }
.ee-review footer small { display: block; color: var(--ee-muted); font-size: 12.5px; margin-top: 2px; }

/* =========================================================
   Empty-store hint
========================================================= */
.ee-empty {
  background: var(--ee-surface);
  border: 1px dashed var(--ee-border);
  border-radius: var(--ee-radius);
  padding: 60px 24px;
  text-align: center;
}
.ee-empty i {
  font-size: 44px;
  color: var(--ee-gold);
  margin-bottom: 16px;
}
.ee-empty h2 { font-size: 26px; margin: 0 0 8px; }
.ee-empty p { color: var(--ee-text-2); margin: 0 0 22px; max-width: 460px; margin-left: auto; margin-right: auto; }

/* =========================================================
   Mobile polish
========================================================= */
@media (max-width: 599.98px) {
  .ee-section { padding: 40px 0; }
  .ee-section-head h2 { font-size: 26px; }
  .ee-hero-empty h1 { font-size: 38px; }
  .ee-about-text h2 { font-size: 30px; }
  .ee-about { padding: 50px 0; }
  .ee-reviews { padding: 50px 0; }
}

/* =====================================================================
   v2 — Premium header/footer + editorial hero (Giva-inspired).
   Loaded ON TOP of the base styles so we can override the older
   rules without touching them.
   ===================================================================== */

/* Premium palette retune — slightly more luxe than the Ayurvedic v1 */
:root {
  --ee-ink:        #1A1A1A;     /* near-black for text */
  --ee-ink-2:      #4F4F4F;
  --ee-gold:       #B8865B;     /* refined gold */
  --ee-gold-dark:  #8A6A3F;
  --ee-cream:      #FBF8F2;
  --ee-cream-2:    #F1EBDB;
  --ee-line:       #E6DFCF;
}

/* ---------- Header ---------- */
.ee-announce {
  background: var(--ee-ink);
  color: #fff;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 9px 0;
  font-weight: 500;
}

.ee-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--ee-line);
}
.ee-header-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 18px 20px;
}
.ee-brand {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.ee-brand img { height: 36px; width: auto; display: block; }
.ee-brand-text {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ee-ink);
}

.ee-nav {
  display: none;
  flex: 1 1 auto;
  justify-content: center;
  gap: 30px;
}
@media (min-width: 900px) { .ee-nav { display: inline-flex; } }
.ee-nav-link {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ee-ink-2);
  padding: 6px 2px;
  position: relative;
  transition: color .15s ease;
}
.ee-nav-link::after {
  content: '';
  position: absolute;
  left: 50%; right: 50%;
  bottom: 0;
  height: 1.5px;
  background: var(--ee-gold);
  transition: left .2s ease, right .2s ease;
}
.ee-nav-link:hover { color: var(--ee-ink); }
.ee-nav-link:hover::after { left: 0; right: 0; }

.ee-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  margin-left: auto;
}
.ee-action {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--ee-ink);
  font-size: 17px;
  position: relative;
  cursor: pointer;
  transition: background .15s ease;
}
.ee-action:hover { background: var(--ee-cream); }
.ee-action-dot {
  position: absolute;
  top: 4px; right: 4px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  background: var(--ee-gold);
  color: #fff;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
}

.ee-mob-trigger {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  width: 30px; height: 30px;
  background: transparent;
  border: 0;
  cursor: pointer;
  justify-content: center;
}
@media (min-width: 900px) { .ee-mob-trigger { display: none; } }
.ee-mob-trigger span {
  display: block;
  width: 20px; height: 1.5px;
  background: var(--ee-ink);
  margin: 0 auto;
}

.ee-mob-drawer {
  position: fixed;
  top: 0; left: -300px;
  width: 280px; height: 100vh;
  background: #fff;
  z-index: 200;
  padding: 60px 24px 24px;
  transition: left .3s ease;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
}
.ee-mob-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 199;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
body.ee-mob-open .ee-mob-drawer { left: 0; }
body.ee-mob-open .ee-mob-backdrop { opacity: 1; pointer-events: auto; }
.ee-mob-close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px;
  background: transparent; border: 0;
  font-size: 28px;
  color: var(--ee-ink);
  cursor: pointer;
}
.ee-mob-brand {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--ee-ink);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ee-line);
  margin-bottom: 16px;
}
.ee-mob-nav { display: flex; flex-direction: column; }
.ee-mob-nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--ee-ink-2);
  padding: 12px 0;
  border-bottom: 1px solid var(--ee-line);
}
.ee-mob-nav a:last-child { border-bottom: 0; }

/* ---------- Search overlay ---------- */
.ee-search-overlay {
  position: fixed; inset: 0;
  background: rgba(255, 255, 255, 0.98);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 300;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.ee-search-overlay.is-open { opacity: 1; pointer-events: auto; }
.ee-search-close {
  position: absolute; top: 24px; right: 30px;
  width: 44px; height: 44px;
  background: transparent;
  border: 0;
  font-size: 36px;
  color: var(--ee-ink);
  cursor: pointer;
}
.ee-search-wrap { width: 100%; max-width: 720px; text-align: center; }
.ee-search-form {
  display: flex; align-items: center;
  border-bottom: 2px solid var(--ee-ink);
  padding: 12px 0;
}
.ee-search-form i { color: var(--ee-ink-2); font-size: 22px; margin-right: 14px; }
.ee-search-form input {
  flex: 1 1 auto;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 22px;
  font-family: 'Playfair Display', serif;
  color: var(--ee-ink);
}
.ee-search-form input::placeholder { color: var(--ee-ink-2); font-weight: 400; }
.ee-search-form button {
  background: var(--ee-ink);
  color: #fff;
  border: 0;
  padding: 12px 22px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  border-radius: 999px;
  margin-left: 14px;
}
.ee-search-wrap small {
  display: block;
  margin-top: 14px;
  color: var(--ee-ink-2);
  font-size: 12px;
  letter-spacing: 0.04em;
}

/* ---------- Editorial hero (Giva-style) ---------- */
.ee-hero-premium { background: var(--ee-cream); }
.ee-hero-premium .ee-hero-slider .slick-list { overflow: hidden; }
.ee-hero-slide-premium {
  position: relative;
  display: block !important;
  width: 100%;
}
.ee-hero-slide-premium img {
  width: 100%;
  height: auto;
  max-height: 640px;
  object-fit: cover;
  display: block;
}
@media (min-width: 720px) {
  .ee-hero-slide-premium img { height: 80vh; max-height: 720px; }
}
.ee-hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 60%);
}
.ee-hero-text {
  max-width: 540px;
  color: #fff;
}
.ee-hero-text small {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 18px;
  color: rgba(255, 255, 255, 0.92);
}
.ee-hero-text h1 {
  font-family: 'Playfair Display', serif;
  font-size: 46px;
  font-weight: 600;
  line-height: 1.08;
  margin: 0 0 26px;
  color: #fff;
  letter-spacing: -0.005em;
}
@media (min-width: 900px) { .ee-hero-text h1 { font-size: 60px; } }
.ee-hero-text .ee-btn-primary {
  background: #fff;
  color: var(--ee-ink);
  padding: 14px 32px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.ee-hero-text .ee-btn-primary:hover {
  background: var(--ee-ink);
  color: #fff;
}
.ee-hero-premium .slick-dots {
  position: absolute; bottom: 28px; left: 0; right: 0;
  display: flex !important; justify-content: center; gap: 8px;
  list-style: none; padding: 0; margin: 0;
}
.ee-hero-premium .slick-dots li button {
  width: 30px; height: 2px;
  font-size: 0;
  background: rgba(255, 255, 255, 0.5);
  border: 0;
  cursor: pointer;
}
.ee-hero-premium .slick-dots li.slick-active button {
  background: #fff;
}

/* ---------- Footer ---------- */
.ee-footer {
  background: var(--ee-ink);
  color: rgba(255, 255, 255, 0.78);
  padding: 60px 0 0;
  margin-top: 80px;
}
.ee-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  padding-bottom: 48px;
}
@media (min-width: 600px) { .ee-footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .ee-footer-grid { grid-template-columns: 1.4fr repeat(3, 1fr); } }
.ee-footer-col { display: flex; flex-direction: column; gap: 12px; }
.ee-footer-col h4 {
  font-family: 'Inter', sans-serif;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 6px 0;
}
.ee-footer-col a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: color .15s ease;
}
.ee-footer-col a:hover { color: var(--ee-gold); }
.ee-footer-col i { color: var(--ee-gold); font-size: 14px; }
.ee-footer-brand-link {
  font-family: 'Playfair Display', serif;
  color: #fff !important;
  font-size: 26px;
  font-weight: 700;
}
.ee-footer-address {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
  margin: 0;
}
.ee-footer-socials { display: inline-flex; gap: 10px; margin-top: 6px; }
.ee-footer-socials a {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
}
.ee-footer-socials a:hover {
  background: var(--ee-gold);
  border-color: var(--ee-gold);
  color: #fff;
}

.ee-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  padding: 18px 0;
}
.ee-footer-bottom-inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}
.ee-footer-bottom small {
  color: rgba(255, 255, 255, 0.55);
  font-size: 11.5px;
  letter-spacing: 0.04em;
}
.ee-footer-pay { display: inline-flex; gap: 10px; }
.ee-footer-pay i {
  color: rgba(255, 255, 255, 0.55);
  font-size: 22px;
}
.ee-footer-pay i:hover { color: var(--ee-gold); }

/* ---------- Body adjustment ---------- */
body { background: #fff !important; }

/* Hide the legacy nlf-asif scaffolding if any of it leaked through */
.nlf-support-bar, .nlf-footer { display: none !important; }

/* =====================================================================
   v3 — Giva-scale expanded homepage sections
   Promo banners · Editorial feature · Press strip · Instagram · Newsletter
   ===================================================================== */

/* ---------- 3-up promotional banners ---------- */
.ee-promo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 720px)  { .ee-promo-grid { grid-template-columns: repeat(3, 1fr); } }
.ee-promo-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 6px;
  aspect-ratio: 3 / 4;
  background: var(--ee-cream);
}
.ee-promo-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2, .8, .2, 1);
}
.ee-promo-card:hover img { transform: scale(1.06); }
.ee-promo-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
  background: linear-gradient(0deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 60%);
  color: #fff;
}
.ee-promo-overlay small {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: #fff;
}
.ee-promo-overlay h3 {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  color: #fff;
  margin: 0 0 14px 0;
  font-weight: 500;
  line-height: 1.2;
}
.ee-promo-cta {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 4px;
  border-bottom: 1.5px solid #fff;
  width: max-content;
}

/* ---------- Editorial feature block ---------- */
.ee-feature { background: var(--ee-cream); padding: 100px 0; }
.ee-feature-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 50px;
  align-items: center;
}
@media (min-width: 900px) { .ee-feature-inner { grid-template-columns: 1fr 1fr; gap: 80px; } }
.ee-feature-img {
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.ee-feature-img img { width: 100%; height: 100%; object-fit: cover; }
.ee-feature-text small {
  display: block;
  color: var(--ee-gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.ee-feature-text h2 {
  font-family: 'Playfair Display', serif;
  font-size: 44px;
  color: var(--ee-ink);
  margin: 0 0 22px 0;
  line-height: 1.1;
}
@media (min-width: 720px) { .ee-feature-text h2 { font-size: 52px; } }
.ee-feature-text p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ee-ink-2);
  margin: 0 0 30px 0;
  max-width: 480px;
}

/* ---------- Press strip ---------- */
.ee-press { padding: 70px 0; border-top: 1px solid var(--ee-line); border-bottom: 1px solid var(--ee-line); }
.ee-press-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  align-items: center;
  margin-top: 36px;
}
@media (min-width: 720px) { .ee-press-grid { grid-template-columns: repeat(6, 1fr); } }
.ee-press-logo {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 600;
  color: #999;
  text-align: center;
  letter-spacing: 0.06em;
  opacity: 0.7;
  transition: opacity .15s ease, color .15s ease;
}
.ee-press-logo:hover { opacity: 1; color: var(--ee-ink); }

/* ---------- Instagram-style mosaic ---------- */
.ee-ig { padding: 80px 0 20px; }
.ee-ig .ee-section-head small i { margin-right: 6px; vertical-align: middle; }
.ee-ig .ee-section-head h2 {
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--ee-ink);
  letter-spacing: -0.005em;
}
.ee-ig-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-top: 28px;
}
@media (min-width: 600px) { .ee-ig-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .ee-ig-grid { grid-template-columns: repeat(6, 1fr); } }
.ee-ig-tile {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
}
.ee-ig-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease, filter .3s ease;
}
.ee-ig-tile:hover img { transform: scale(1.08); filter: brightness(0.85); }
.ee-ig-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 28px;
  opacity: 0;
  transition: opacity .25s ease;
}
.ee-ig-tile:hover .ee-ig-icon { opacity: 1; }

/* ---------- Newsletter ---------- */
.ee-newsletter {
  background: var(--ee-ink);
  color: #fff;
  padding: 80px 0;
}
.ee-newsletter-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
@media (min-width: 900px) { .ee-newsletter-inner { grid-template-columns: 1fr 1fr; gap: 80px; } }
.ee-newsletter-text small {
  display: block;
  color: var(--ee-gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.ee-newsletter-text h2 {
  font-family: 'Playfair Display', serif;
  font-size: 42px;
  color: #fff;
  line-height: 1.1;
  margin: 0 0 16px 0;
  font-weight: 600;
}
.ee-newsletter-text p {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  max-width: 440px;
}
.ee-newsletter-form {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  padding: 6px;
}
.ee-newsletter-form input {
  flex: 1 1 auto;
  background: transparent;
  border: 0;
  outline: 0;
  color: #fff;
  font-size: 15px;
  padding: 14px 22px;
  font-family: inherit;
}
.ee-newsletter-form input::placeholder { color: rgba(255, 255, 255, 0.5); }
.ee-newsletter-form button {
  flex: 0 0 auto;
  padding: 14px 30px;
  background: var(--ee-gold);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s ease;
}
.ee-newsletter-form button:hover { background: var(--ee-gold-dark); }

@media (max-width: 599.98px) {
  .ee-feature { padding: 60px 0; }
  .ee-feature-text h2 { font-size: 32px; }
  .ee-newsletter { padding: 60px 0; }
  .ee-newsletter-text h2 { font-size: 30px; }
  .ee-ig { padding: 60px 0 0; }
}

/* =====================================================================
   v4 — Category listing (shop) + Product detail (PDP)
   ===================================================================== */

/* ---------- Breadcrumb ---------- */
.ee-breadcrumb {
  font-size: 12px;
  color: var(--ee-ink-2);
  letter-spacing: 0.04em;
  margin-bottom: 28px;
}
.ee-breadcrumb a {
  color: var(--ee-ink-2);
  transition: color .15s ease;
}
.ee-breadcrumb a:hover { color: var(--ee-ink); }
.ee-bc-sep { margin: 0 8px; opacity: 0.5; }
.ee-breadcrumb [aria-current="page"] { color: var(--ee-ink); font-weight: 600; }

/* ---------- Shop hero / header ---------- */
.ee-shop-hero {
  padding: 40px 0 24px;
  background: var(--ee-cream);
  border-bottom: 1px solid var(--ee-line);
}
.ee-shop-head { text-align: center; padding: 12px 0 30px; }
.ee-shop-head small {
  display: block;
  color: var(--ee-gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.ee-shop-head h1 {
  font-family: 'Playfair Display', serif;
  font-size: 48px;
  font-weight: 600;
  margin: 0 0 10px 0;
  color: var(--ee-ink);
  line-height: 1.1;
}
@media (max-width: 600px) { .ee-shop-head h1 { font-size: 32px; } }
.ee-shop-count {
  font-size: 13px;
  color: var(--ee-ink-2);
  letter-spacing: 0.04em;
  margin: 0;
}
.ee-shop-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 0 0 8px;
}
.ee-shop-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--ee-line);
  color: var(--ee-ink-2);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: all .15s ease;
}
.ee-shop-chip:hover { background: var(--ee-ink); color: #fff; border-color: var(--ee-ink); }
.ee-shop-chip.is-active {
  background: var(--ee-ink);
  color: #fff;
  border-color: var(--ee-ink);
}

.ee-shop-section { padding-top: 50px; }
.ee-shop-pagination {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}
.ee-shop-pagination .pagination {
  gap: 6px;
}
.ee-shop-pagination .pagination li a,
.ee-shop-pagination .pagination li span {
  padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid var(--ee-line);
  color: var(--ee-ink);
  font-size: 13px;
}
.ee-shop-pagination .pagination .active span,
.ee-shop-pagination .pagination .active a {
  background: var(--ee-ink);
  color: #fff;
  border-color: var(--ee-ink);
}

.ee-shop-empty {
  text-align: center;
  padding: 100px 24px;
}
.ee-shop-empty i {
  font-size: 56px;
  color: var(--ee-gold);
  display: block;
  margin-bottom: 18px;
}
.ee-shop-empty h2 {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  margin: 0 0 10px 0;
}
.ee-shop-empty p {
  color: var(--ee-ink-2);
  max-width: 440px;
  margin: 0 auto 24px auto;
}

/* ---------- Product detail page ---------- */
.ee-pdp { padding: 32px 0 80px; }
.ee-pdp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 900px) {
  .ee-pdp-grid { grid-template-columns: 1.1fr 1fr; gap: 60px; }
}

.ee-pdp-gallery { display: flex; flex-direction: column; gap: 14px; }
.ee-pdp-main {
  position: relative;
  background: var(--ee-cream);
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 1;
}
.ee-pdp-main img { width: 100%; height: 100%; object-fit: cover; }
.ee-pdp-off {
  position: absolute;
  top: 18px; left: 18px;
  background: var(--ee-ink);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 6px 12px;
  border-radius: 999px;
}
.ee-pdp-thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.ee-pdp-thumb {
  background: var(--ee-cream);
  border: 1.5px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 1;
  cursor: pointer;
  padding: 0;
  transition: border-color .15s ease;
}
.ee-pdp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ee-pdp-thumb.is-active { border-color: var(--ee-ink); }

.ee-pdp-info { padding-top: 16px; }
.ee-pdp-cat {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--ee-gold);
  margin-bottom: 14px;
}
.ee-pdp-title {
  font-family: 'Playfair Display', serif;
  font-size: 36px;
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 16px 0;
  color: var(--ee-ink);
}
@media (min-width: 900px) { .ee-pdp-title { font-size: 42px; } }
.ee-pdp-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}

.ee-pdp-price {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 0;
  border-top: 1px solid var(--ee-line);
  border-bottom: 1px solid var(--ee-line);
}
.ee-pdp-price-now {
  font-size: 28px;
  font-weight: 700;
  color: var(--ee-ink);
  font-family: 'Inter', sans-serif;
  letter-spacing: -0.01em;
}
.ee-pdp-price-old {
  font-size: 18px;
  color: var(--ee-ink-2);
  text-decoration: line-through;
}
.ee-pdp-save {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ee-gold-dark);
  background: rgba(184, 134, 91, 0.10);
  padding: 5px 12px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}

.ee-pdp-excerpt {
  font-size: 15px;
  color: var(--ee-ink-2);
  line-height: 1.7;
  margin: 22px 0;
}

.ee-pdp-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 20px;
}
.ee-pdp-cta {
  flex: 1 1 auto;
  padding: 16px 32px;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--ee-ink);
  color: #fff;
}
.ee-pdp-cta:hover { background: var(--ee-gold-dark); color: #fff; }
.ee-pdp-cta i { margin-right: 8px; font-size: 16px; }
.ee-pdp-wish {
  flex: 0 0 auto;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1.5px solid var(--ee-line);
  background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px;
  color: var(--ee-ink);
  transition: all .15s ease;
  cursor: pointer;
}
.ee-pdp-wish:hover { border-color: var(--ee-ink); color: #c0392b; }
.ee-pdp-wish.is-on { color: #c0392b; border-color: #c0392b; }

.ee-pdp-trust {
  list-style: none;
  padding: 20px 22px;
  margin: 24px 0;
  background: var(--ee-cream);
  border-radius: 6px;
}
.ee-pdp-trust li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  font-size: 13px;
  color: var(--ee-ink);
}
.ee-pdp-trust li i {
  color: var(--ee-gold);
  font-size: 15px;
  width: 20px;
  flex: 0 0 auto;
}

.ee-pdp-accordion {
  border-top: 1px solid var(--ee-line);
  padding: 18px 0;
}
.ee-pdp-accordion summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ee-ink);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ee-pdp-accordion summary::after {
  content: '+';
  font-size: 18px;
  color: var(--ee-ink-2);
  transition: transform .15s ease;
}
.ee-pdp-accordion[open] summary::after {
  content: '−';
}
.ee-pdp-accordion-body {
  padding-top: 14px;
  font-size: 14px;
  color: var(--ee-ink-2);
  line-height: 1.7;
}
.ee-pdp-accordion-body p { margin: 0 0 10px 0; }

.ee-pdp-share {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--ee-line);
  flex-wrap: wrap;
}
.ee-pdp-share small {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ee-ink-2);
}
.ee-pdp-share a,
.ee-pdp-share button {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--ee-line);
  background: transparent;
  color: var(--ee-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: all .15s ease;
}
.ee-pdp-share button {
  width: auto;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 12px;
  gap: 6px;
}
.ee-pdp-share button i { font-size: 14px; }
.ee-pdp-share a:hover,
.ee-pdp-share button:hover {
  background: var(--ee-ink);
  color: #fff;
  border-color: var(--ee-ink);
}

/* =====================================================================
   v5 — Cart drawer (Giva-style slide-in from right)
   ===================================================================== */

.ee-cart-drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 199;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.ee-cart-drawer {
  position: fixed;
  top: 0; right: -460px;
  width: 100vw;
  max-width: 440px;
  height: 100vh;
  background: #fff;
  z-index: 200;
  transition: right .35s cubic-bezier(.2,.8,.2,1);
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
}
body.ee-cart-open .ee-cart-drawer { right: 0; }
body.ee-cart-open .ee-cart-drawer-backdrop { opacity: 1; pointer-events: auto; }
body.ee-cart-open { overflow: hidden; }

.ee-cart-drawer-body {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.ee-cart-loading {
  text-align: center;
  padding: 80px 20px;
  color: var(--ee-ink-2);
}

.ee-cart-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 26px;
  border-bottom: 1px solid var(--ee-line);
  flex: 0 0 auto;
}
.ee-cart-drawer-head h3 {
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--ee-ink);
}
.ee-cart-drawer-head small {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--ee-ink-2);
  font-weight: 500;
  margin-left: 8px;
}
.ee-cart-close {
  width: 36px; height: 36px;
  background: transparent;
  border: 0;
  font-size: 28px;
  line-height: 1;
  color: var(--ee-ink);
  cursor: pointer;
  border-radius: 50%;
  transition: background .15s ease;
}
.ee-cart-close:hover { background: var(--ee-cream); }

.ee-cart-ship {
  padding: 16px 26px;
  background: var(--ee-cream);
  flex: 0 0 auto;
}
.ee-cart-ship p {
  margin: 0 0 8px 0;
  font-size: 13px;
  color: var(--ee-ink);
}
.ee-cart-ship strong { font-weight: 700; }
.ee-cart-ship-bar {
  height: 4px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.ee-cart-ship-bar span {
  display: block;
  height: 100%;
  background: var(--ee-gold);
  border-radius: 999px;
  transition: width .35s ease;
}
.ee-cart-ship--unlocked {
  background: rgba(74, 107, 58, 0.08);
}
.ee-cart-ship--unlocked p {
  color: #2A5A1E;
}
.ee-cart-ship--unlocked i { color: #4A6B3A; margin-right: 4px; }

.ee-cart-items {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 26px;
  /* Guarantee enough room for at least 2 items even with upsell + free
     ship banner + summary stacked around it. ~140px per item × 2. */
  min-height: 280px;
}
@media (max-height: 700px) {
  /* Compress per-item height a touch on short laptops */
  .ee-cart-item { padding: 12px 0; }
  .ee-cart-items { min-height: 240px; }
}
.ee-cart-item {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--ee-line);
}
.ee-cart-item:last-child { border-bottom: 0; }
.ee-cart-item-img {
  display: block;
  background: var(--ee-cream);
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 1;
}
.ee-cart-item-img img { width: 100%; height: 100%; object-fit: cover; }
.ee-cart-item-meta { display: flex; flex-direction: column; gap: 4px; }
.ee-cart-item-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ee-ink);
  line-height: 1.3;
  display: block;
}
.ee-cart-item-opts {
  display: flex;
  gap: 8px;
  font-size: 12px;
  color: var(--ee-ink-2);
}
.ee-cart-item-price strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--ee-ink);
}
.ee-cart-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
}
.ee-cart-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ee-line);
  border-radius: 999px;
  padding: 2px;
}
.ee-cart-qty button {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  font-size: 16px;
  color: var(--ee-ink);
  cursor: pointer;
}
.ee-cart-qty button:hover { background: var(--ee-cream); }
.ee-cart-qty span {
  min-width: 24px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
}
.ee-cart-remove {
  background: transparent;
  border: 0;
  color: var(--ee-ink-2);
  cursor: pointer;
  font-size: 14px;
  padding: 4px 8px;
}
.ee-cart-remove:hover { color: #c0392b; }

.ee-cart-summary {
  flex: 0 0 auto;
  padding: 20px 26px 24px;
  border-top: 1px solid var(--ee-line);
  background: #fff;
}
.ee-cart-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  font-size: 14px;
  color: var(--ee-ink-2);
}
.ee-cart-line strong {
  color: var(--ee-ink);
  font-weight: 700;
}
.ee-cart-line--total {
  padding-top: 12px;
  border-top: 1px dashed var(--ee-line);
  margin-top: 8px;
  font-size: 17px;
}
.ee-cart-line--total span { color: var(--ee-ink); font-weight: 600; }
.ee-cart-line--total strong { font-size: 22px; }
.ee-cart-tax {
  display: block;
  font-size: 12px;
  color: var(--ee-ink-2);
  margin: 4px 0 16px;
}
.ee-cart-checkout {
  width: 100%;
  padding: 16px;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--ee-ink) !important;
  color: #fff !important;
}
.ee-cart-checkout:hover { background: var(--ee-gold-dark) !important; }
.ee-cart-checkout i { margin-right: 6px; }
.ee-cart-view-link {
  display: block;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ee-ink-2);
  margin-top: 12px;
}
.ee-cart-view-link:hover { color: var(--ee-ink); }

.ee-cart-empty {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  text-align: center;
}
.ee-cart-empty i {
  font-size: 56px;
  color: var(--ee-gold);
  margin-bottom: 18px;
}
.ee-cart-empty h4 {
  font-family: 'Playfair Display', serif;
  font-size: 24px;
  margin: 0 0 8px 0;
  font-weight: 500;
}
.ee-cart-empty p {
  color: var(--ee-ink-2);
  margin: 0 0 22px 0;
  font-size: 14px;
}

/* =====================================================================
   v6 — PDP optimization
   Vertical thumb rail · Star rating · Qty stepper · Pincode checker
   Buy now CTA · Customer reviews block · Recently viewed
   ===================================================================== */

/* Override the older PDP gallery to include the vertical thumb rail */
.ee-pdp-gallery-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
/* When a thumb rail is present, give it 80px on desktop; otherwise the
   main image gets the whole row (no empty column). */
@media (min-width: 720px) {
  .ee-pdp-gallery-wrap:has(.ee-pdp-thumbs--rail) {
    grid-template-columns: 80px 1fr;
  }
}
.ee-pdp-thumbs--rail {
  display: flex;
  flex-direction: row;
  gap: 8px;
  order: 2;
  overflow-x: auto;
}
@media (min-width: 720px) {
  .ee-pdp-thumbs--rail {
    flex-direction: column;
    order: 1;
    overflow: visible;
  }
}
.ee-pdp-thumbs--rail .ee-pdp-thumb {
  flex: 0 0 auto;
  width: 72px; height: 72px;
  border: 1.5px solid var(--ee-line);
}
@media (min-width: 720px) {
  .ee-pdp-thumbs--rail .ee-pdp-thumb { width: 100%; height: auto; aspect-ratio: 1; }
}
.ee-pdp-gallery-wrap .ee-pdp-main { order: 1; }
@media (min-width: 720px) {
  .ee-pdp-gallery-wrap .ee-pdp-main { order: 2; }
}
.ee-pdp-main {
  position: relative;
  background: var(--ee-cream);
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 1;
}
.ee-pdp-main img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.8,.2,1);
}
.ee-pdp-main:hover img { transform: scale(1.04); }
.ee-pdp-floatwish {
  position: absolute;
  top: 16px; right: 16px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ee-ink);
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform .15s ease, color .15s ease;
}
.ee-pdp-floatwish:hover { transform: scale(1.08); color: #c0392b; }
.ee-pdp-floatwish.is-on { color: #c0392b; }

/* ---------- Info column ---------- */
.ee-pdp-cat {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--ee-gold);
  margin-bottom: 14px;
}
.ee-pdp-cat:hover { color: var(--ee-gold-dark); }

/* Star rating */
.ee-pdp-rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 16px;
  font-size: 13px;
}
.ee-pdp-stars {
  display: inline-flex;
  color: var(--ee-gold);
  font-size: 14px;
  gap: 2px;
}
.ee-pdp-stars--lg { font-size: 22px; gap: 4px; }
.ee-pdp-rating-num {
  font-weight: 700;
  color: var(--ee-ink);
}
.ee-pdp-rating-count {
  color: var(--ee-ink-2);
  text-decoration: underline;
}
.ee-pdp-rating-count:hover { color: var(--ee-ink); }

.ee-pdp-tax-note {
  display: block;
  font-size: 11.5px;
  color: var(--ee-ink-2);
  margin: 6px 0 0;
  letter-spacing: 0.02em;
}

/* Quantity stepper + CTA row */
.ee-pdp-buy {
  margin: 24px 0 18px;
}
.ee-pdp-buy-label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ee-ink-2);
  margin-bottom: 10px;
}
.ee-pdp-buy-row { margin-bottom: 14px; }
.ee-pdp-qty {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--ee-line);
  border-radius: 999px;
  padding: 4px;
  width: max-content;
}
.ee-pdp-qty button {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  font-size: 18px;
  color: var(--ee-ink);
  cursor: pointer;
}
.ee-pdp-qty button:hover { background: var(--ee-cream); }
.ee-pdp-qty input {
  width: 48px;
  text-align: center;
  border: 0;
  background: transparent;
  font-size: 15px;
  font-weight: 700;
  color: var(--ee-ink);
  outline: 0;
}
.ee-pdp-qty input::-webkit-outer-spin-button,
.ee-pdp-qty input::-webkit-inner-spin-button { -webkit-appearance: none; }

.ee-pdp-cta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ee-pdp-add,
.ee-pdp-buynow {
  padding: 16px 24px;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 999px;
  font-weight: 700;
  border: 1.5px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all .15s ease;
}
.ee-pdp-add {
  background: var(--ee-ink);
  color: #fff !important;
}
.ee-pdp-add:hover:not(:disabled) {
  background: var(--ee-gold-dark);
}
.ee-pdp-buynow {
  background: var(--ee-gold);
  color: #fff !important;
}
.ee-pdp-buynow:hover:not(:disabled) {
  background: var(--ee-gold-dark);
}
.ee-pdp-add:disabled,
.ee-pdp-buynow:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.ee-pdp-add i,
.ee-pdp-buynow i { font-size: 14px; }

/* Pincode delivery checker */
.ee-pdp-pin {
  border: 1px solid var(--ee-line);
  border-radius: 8px;
  padding: 16px 18px;
  margin: 22px 0;
  background: #fff;
}
.ee-pdp-pin-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ee-ink);
  margin-bottom: 10px;
}
.ee-pdp-pin-label i { color: var(--ee-gold); margin-right: 4px; }
.ee-pdp-pin-row {
  display: flex;
  gap: 0;
  border: 1.5px solid var(--ee-line);
  border-radius: 8px;
  overflow: hidden;
}
.ee-pdp-pin-row input {
  flex: 1 1 auto;
  border: 0;
  outline: 0;
  padding: 11px 14px;
  font-size: 14px;
  background: transparent;
  color: var(--ee-ink);
}
.ee-pdp-pin-row button {
  border: 0;
  background: var(--ee-ink);
  color: #fff;
  padding: 0 22px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
}
.ee-pdp-pin-row button:hover { background: var(--ee-gold-dark); }
.ee-pdp-pin-result {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ee-pdp-pin-result.is-ok {
  background: rgba(74, 107, 58, 0.10);
  color: #2A5A1E;
}
.ee-pdp-pin-result.is-ok i { color: #4A6B3A; }
.ee-pdp-pin-result.is-err {
  background: rgba(192, 57, 43, 0.08);
  color: #b03726;
}

/* Trust strip refined */
.ee-pdp-trust {
  list-style: none;
  padding: 18px 22px;
  margin: 22px 0;
  background: var(--ee-cream);
  border-radius: 8px;
}
.ee-pdp-trust li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  font-size: 13px;
  color: var(--ee-ink-2);
}
.ee-pdp-trust li i {
  color: var(--ee-gold);
  font-size: 16px;
  width: 22px;
  flex: 0 0 auto;
}
.ee-pdp-trust li strong { color: var(--ee-ink); font-weight: 600; }

/* Accordion container */
.ee-pdp-accordions { margin: 20px 0; }
.ee-pdp-specs {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 6px 18px;
  margin: 0;
}
.ee-pdp-specs dt {
  color: var(--ee-ink-2);
  font-size: 13px;
  font-weight: 600;
}
.ee-pdp-specs dd {
  color: var(--ee-ink);
  font-size: 13px;
  margin: 0;
}

/* Customer reviews block */
.ee-pdp-reviews { background: var(--ee-cream); padding: 80px 0; }
.ee-pdp-reviews-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.ee-pdp-reviews-head small {
  display: block;
  color: var(--ee-gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.ee-pdp-reviews-head h2 {
  font-family: 'Playfair Display', serif;
  font-size: 36px;
  margin: 0;
  font-weight: 500;
  color: var(--ee-ink);
}
.ee-pdp-reviews-summary {
  display: flex;
  align-items: center;
  gap: 16px;
}
.ee-pdp-reviews-avg {
  font-family: 'Playfair Display', serif;
  font-size: 56px;
  font-weight: 600;
  color: var(--ee-ink);
  line-height: 1;
}
.ee-pdp-reviews-summary small {
  display: block;
  color: var(--ee-ink-2);
  font-size: 12px;
  margin-top: 4px;
}

.ee-pdp-reviews-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 720px) { .ee-pdp-reviews-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ee-pdp-reviews-grid { grid-template-columns: repeat(3, 1fr); } }

.ee-pdp-review {
  background: #fff;
  border-radius: 8px;
  padding: 22px 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.ee-pdp-review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.ee-pdp-review-head small {
  font-size: 11px;
  color: #4A6B3A;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ee-pdp-review p {
  margin: 0 0 14px 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ee-ink);
}
.ee-pdp-review footer { font-size: 13px; }
.ee-pdp-review footer strong { color: var(--ee-ink); font-weight: 700; }
.ee-pdp-review footer small { color: var(--ee-ink-2); }

/* Mobile */
@media (max-width: 600px) {
  .ee-pdp-title { font-size: 26px; }
  .ee-pdp-cta-row { grid-template-columns: 1fr; }
  .ee-pdp-reviews-head h2 { font-size: 26px; }
  .ee-pdp-reviews-avg { font-size: 44px; }
}

/* =====================================================================
   v7 — Mobile app-style bottom nav + sticky checkout bar
   ===================================================================== */

.ee-mob-bottomnav,
.ee-mob-cta { display: none; }

@media (max-width: 899.98px) {
  /* Make room at the bottom of every page so content isn't hidden
     behind the fixed bottom nav (and the cart bar on top of it). */
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  body.ee-has-cart { padding-bottom: calc(64px + 64px + env(safe-area-inset-bottom)); }

  .ee-mob-bottomnav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 95;
    display: flex;
    justify-content: space-around;
    background: rgba(255, 255, 255, 0.97);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--ee-line);
    padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.04);
  }
  .ee-mob-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 4px 2px;
    color: var(--ee-ink-2);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    position: relative;
    text-decoration: none;
  }
  .ee-mob-nav-item i { font-size: 20px; line-height: 1; }
  .ee-mob-nav-item.is-active {
    color: var(--ee-ink);
  }
  .ee-mob-nav-item.is-active i {
    color: var(--ee-ink);
    transform: translateY(-1px);
  }
  .ee-mob-nav-cart i { color: var(--ee-ink); }
  .ee-mob-nav-dot {
    position: absolute;
    top: 0; right: calc(50% - 18px);
    min-width: 18px; height: 18px;
    padding: 0 5px;
    background: var(--ee-gold);
    color: #fff;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }

  /* Sticky checkout bar — slides above the bottom nav */
  .ee-mob-cta {
    position: fixed;
    left: 0; right: 0;
    bottom: calc(64px + env(safe-area-inset-bottom));
    z-index: 96;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--ee-ink);
    color: #fff;
    box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.18);
  }
  .ee-mob-cta-meta { flex: 1 1 auto; min-width: 0; }
  .ee-mob-cta-meta small {
    display: block;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1;
    margin-bottom: 4px;
  }
  .ee-mob-cta-meta strong {
    display: block;
    color: #fff;
    font-size: 17px;
    font-weight: 800;
    line-height: 1;
  }
  .ee-mob-cta-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 22px;
    background: var(--ee-gold);
    color: #fff !important;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none !important;
  }
  .ee-mob-cta-btn:hover { background: var(--ee-gold-dark); }
  .ee-mob-cta-btn i { font-size: 14px; }

  /* Hide the legacy header cart icon when bottom nav is showing,
     to avoid two cart icons on mobile. */
  .ee-header .ee-action-cart { display: none; }
}

/* =====================================================================
   v8 — Cart drawer upsell + Standalone cart page + Recently viewed
   ===================================================================== */

/* ---------- Cart drawer cross-sell ---------- */
.ee-cart-upsell {
  flex: 0 0 auto;
  padding: 18px 26px;
  background: var(--ee-cream);
  border-top: 1px solid var(--ee-line);
}
.ee-cart-upsell small {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ee-ink-2);
  margin-bottom: 10px;
}
.ee-cart-upsell-list { display: flex; flex-direction: column; gap: 10px; }
.ee-cart-upsell-item {
  display: grid;
  grid-template-columns: 52px 1fr 36px;
  gap: 12px;
  align-items: center;
  background: #fff;
  border-radius: 8px;
  padding: 8px 10px;
}
.ee-cart-upsell-item img {
  width: 52px; height: 52px;
  object-fit: cover;
  border-radius: 6px;
}
.ee-cart-upsell-name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ee-ink);
  line-height: 1.3;
}
.ee-cart-upsell-item small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--ee-ink-2);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.ee-cart-upsell-add {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--ee-ink);
  background: #fff;
  color: var(--ee-ink);
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ee-cart-upsell-add:hover { background: var(--ee-ink); color: #fff; }

/* ---------- Standalone cart page ---------- */
.ee-cartpage { padding: 30px 0 80px; }
.ee-cartpage-head {
  text-align: center;
  margin: 18px 0 32px;
}
.ee-cartpage-head h1 {
  font-family: 'Playfair Display', serif;
  font-size: 42px;
  font-weight: 500;
  margin: 0 0 6px 0;
  color: var(--ee-ink);
}
.ee-cartpage-head p {
  margin: 0;
  font-size: 13.5px;
  color: var(--ee-ink-2);
}

.ee-cartpage-empty {
  text-align: center;
  padding: 80px 24px;
}
.ee-cartpage-empty i {
  font-size: 58px;
  color: var(--ee-gold);
  margin-bottom: 18px;
}
.ee-cartpage-empty h2 {
  font-family: 'Playfair Display', serif;
  font-size: 30px;
  margin: 0 0 8px 0;
}
.ee-cartpage-empty p {
  color: var(--ee-ink-2);
  max-width: 440px;
  margin: 0 auto 22px auto;
}

.ee-cartpage-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  align-items: start;
}
@media (min-width: 900px) {
  .ee-cartpage-grid { grid-template-columns: 1fr 380px; gap: 50px; }
  .ee-cartpage-summary { position: sticky; top: 100px; }
}

.ee-cartpage-items { display: flex; flex-direction: column; gap: 0; }
.ee-cartpage-item {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--ee-line);
}
.ee-cartpage-item-img {
  background: var(--ee-cream);
  border-radius: 6px;
  overflow: hidden;
  aspect-ratio: 1;
  width: 120px;
}
.ee-cartpage-item-img img { width: 100%; height: 100%; object-fit: cover; }
.ee-cartpage-item-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.ee-cartpage-item-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--ee-ink);
  line-height: 1.3;
}
.ee-cartpage-item-opts span {
  background: var(--ee-cream-2);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11.5px;
  color: var(--ee-ink-2);
  font-weight: 600;
  margin-right: 6px;
}
.ee-cartpage-item-price strong {
  font-size: 14px;
  color: var(--ee-ink);
}
.ee-cartpage-item-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.ee-cartpage-item-remove {
  background: transparent;
  border: 0;
  color: var(--ee-ink-2);
  font-size: 13px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ee-cartpage-item-remove:hover { color: #c0392b; }
.ee-cartpage-item-total {
  text-align: right;
  align-self: start;
}
.ee-cartpage-item-total strong {
  font-size: 17px;
  font-weight: 800;
  color: var(--ee-ink);
}
@media (max-width: 600px) {
  .ee-cartpage-item {
    grid-template-columns: 88px 1fr;
  }
  .ee-cartpage-item-img { width: 88px; }
  .ee-cartpage-item-total { grid-column: 2; text-align: left; }
}

/* Upsell on cart page */
.ee-cartpage-upsell {
  margin-top: 40px;
  padding: 32px 0 0;
  border-top: 1px solid var(--ee-line);
}
.ee-cartpage-upsell header { margin-bottom: 24px; }
.ee-cartpage-upsell header small {
  display: block;
  color: var(--ee-gold);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.ee-cartpage-upsell header h3 {
  font-family: 'Playfair Display', serif;
  font-size: 26px;
  margin: 0;
  font-weight: 500;
  color: var(--ee-ink);
}
.ee-cartpage-upsell-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (min-width: 720px) { .ee-cartpage-upsell-grid { grid-template-columns: repeat(4, 1fr); } }
.ee-cartpage-upsell-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--ee-line);
  border-radius: 8px;
  padding: 10px;
}
.ee-cartpage-upsell-img {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 4px;
  background: var(--ee-cream);
}
.ee-cartpage-upsell-img img { width: 100%; height: 100%; object-fit: cover; }
.ee-cartpage-upsell-off {
  position: absolute;
  top: 6px; left: 6px;
  background: var(--ee-gold);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
}
.ee-cartpage-upsell-name {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ee-ink);
  line-height: 1.3;
  min-height: 32px;
}
.ee-cartpage-upsell-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 6px;
}
.ee-cartpage-upsell-price strong { font-size: 13px; color: var(--ee-ink); }
.ee-cartpage-upsell-price del { font-size: 11.5px; color: var(--ee-muted, #94A3B8); }
.ee-cartpage-upsell-add {
  width: 100%;
  padding: 8px;
  border: 1.5px solid var(--ee-ink);
  background: #fff;
  color: var(--ee-ink);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.ee-cartpage-upsell-add:hover { background: var(--ee-ink); color: #fff; }

/* Cart summary aside */
.ee-cartpage-summary {
  background: var(--ee-cream);
  border-radius: 8px;
  padding: 24px;
}
.ee-cartpage-summary h3 {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  margin: 0 0 16px 0;
  font-weight: 500;
  color: var(--ee-ink);
}
.ee-cartpage-coupon {
  display: flex;
  gap: 0;
  background: #fff;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 18px;
  padding: 4px;
}
.ee-cartpage-coupon input {
  flex: 1 1 auto;
  border: 0;
  outline: 0;
  padding: 10px 16px;
  background: transparent;
  font-size: 13px;
}
.ee-cartpage-coupon button {
  background: var(--ee-ink);
  color: #fff;
  border: 0;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.ee-cartpage-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  font-size: 14px;
  color: var(--ee-ink-2);
}
.ee-cartpage-line strong { color: var(--ee-ink); font-weight: 700; }
.ee-cartpage-line--total {
  padding-top: 14px;
  margin-top: 6px;
  border-top: 1px dashed var(--ee-line);
  font-size: 16px;
}
.ee-cartpage-line--total span { color: var(--ee-ink); font-weight: 600; }
.ee-cartpage-line--total strong { font-size: 22px; }
.ee-cartpage-free-hint {
  background: rgba(74, 107, 58, 0.10);
  color: #2A5A1E;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 12.5px;
  margin: 8px 0;
}
.ee-cartpage-free-hint i { color: #4A6B3A; margin-right: 4px; }
.ee-cartpage-summary > small {
  display: block;
  font-size: 11.5px;
  color: var(--ee-ink-2);
  margin: 4px 0 18px;
}
.ee-cartpage-checkout {
  display: block;
  width: 100%;
  padding: 18px;
  background: var(--ee-ink);
  color: #fff !important;
  text-align: center;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: background .15s ease;
}
.ee-cartpage-checkout:hover { background: var(--ee-gold-dark); }
.ee-cartpage-checkout i { margin-right: 8px; }
.ee-cartpage-pay-icons {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  font-size: 18px;
  color: var(--ee-ink-2);
}
.ee-cartpage-pay-icons small {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-right: 2px;
}
.ee-cartpage-trust {
  list-style: none;
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--ee-line);
}
.ee-cartpage-trust li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 12.5px;
  color: var(--ee-ink-2);
}
.ee-cartpage-trust li i { color: var(--ee-gold); font-size: 14px; }

/* Section spacing for Recently viewed */
.ee-rv .ee-section-head h2 { font-weight: 500; }

/* =====================================================================
   v9 — Premium GoKwik-style checkout
   ===================================================================== */

.ee-checkout { padding: 30px 0 100px; background: var(--ee-cream); }
@media (max-width: 600px) { .ee-checkout { padding: 14px 0 120px; } }

/* Stepper */
.ee-checkout-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 0 28px;
  margin: 0 auto;
}
.ee-checkout-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ee-ink-2);
  font-size: 12.5px;
  font-weight: 600;
}
.ee-checkout-step-num {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #fff;
  color: var(--ee-ink-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  border: 1.5px solid var(--ee-line);
}
.ee-checkout-step.is-active { color: var(--ee-ink); }
.ee-checkout-step.is-active .ee-checkout-step-num {
  background: var(--ee-ink);
  color: #fff;
  border-color: var(--ee-ink);
}
.ee-checkout-step.is-done .ee-checkout-step-num {
  background: var(--ee-gold);
  color: #fff;
  border-color: var(--ee-gold);
}
.ee-checkout-step-line {
  flex: 0 0 auto;
  width: 50px;
  height: 1.5px;
  background: var(--ee-line);
}
@media (max-width: 600px) {
  .ee-checkout-step span:not(.ee-checkout-step-num) { display: none; }
  .ee-checkout-step-line { width: 30px; }
}

/* Alerts */
.ee-checkout-alert {
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 600;
}
.ee-checkout-alert.is-err {
  background: rgba(192, 57, 43, 0.08);
  color: #b03726;
  border: 1px solid rgba(192, 57, 43, 0.20);
}

/* Grid */
.ee-checkout-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
}
@media (min-width: 900px) {
  .ee-checkout-grid {
    grid-template-columns: 1.4fr 1fr;
    gap: 32px;
  }
}

/* Cards */
.ee-checkout-main { display: flex; flex-direction: column; gap: 18px; }
.ee-checkout-card {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  border: 1px solid var(--ee-line);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}
.ee-checkout-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.ee-checkout-card-num {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--ee-ink);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px;
  font-weight: 700;
}
.ee-checkout-card-head h2 {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  color: var(--ee-ink);
}

/* Sign-in prompt */
.ee-checkout-login {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: #fff;
}
.ee-checkout-login strong {
  display: block;
  font-size: 14px;
  color: var(--ee-ink);
}
.ee-checkout-login small {
  display: block;
  margin-top: 2px;
  color: var(--ee-ink-2);
  font-size: 12.5px;
}
.ee-checkout-login-btn {
  padding: 10px 22px;
  background: var(--ee-ink);
  color: #fff !important;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none !important;
}

/* Fields */
.ee-checkout-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ee-checkout-field-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 600px) {
  .ee-checkout-field-grid { grid-template-columns: 1fr 1fr; }
  .ee-checkout-field-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
}
.ee-checkout-field { display: flex; flex-direction: column; gap: 6px; }
.ee-checkout-field label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ee-ink);
}
.ee-req { color: #c0392b; }
.ee-checkout-field input,
.ee-checkout-field select {
  height: 46px;
  padding: 0 14px;
  border: 1.5px solid var(--ee-line);
  border-radius: 8px;
  font-size: 14px;
  color: var(--ee-ink);
  background: #fff;
  outline: 0;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ee-checkout-field input:focus,
.ee-checkout-field select:focus {
  border-color: var(--ee-ink);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}
.ee-checkout-newsletter {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  color: var(--ee-ink-2);
  cursor: pointer;
}
.ee-checkout-newsletter input { margin-top: 2px; }

/* Payment options */
.ee-checkout-pay {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ee-checkout-pay-opt {
  display: grid;
  grid-template-columns: 44px 1fr 28px;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  background: #fff;
  border: 1.5px solid var(--ee-line);
  border-radius: 10px;
  cursor: pointer;
  transition: all .15s ease;
}
.ee-checkout-pay-opt:hover { border-color: var(--ee-ink-2); }
.ee-checkout-pay-opt.is-checked {
  border-color: var(--ee-ink);
  background: var(--ee-cream);
}
.ee-checkout-pay-opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.ee-checkout-pay-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--ee-cream-2);
  color: var(--ee-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}
.ee-checkout-pay-meta strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--ee-ink);
}
.ee-checkout-pay-meta small {
  display: block;
  margin-top: 2px;
  color: var(--ee-ink-2);
  font-size: 12px;
}
.ee-checkout-pay-check {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--ee-line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  font-size: 13px;
}
.ee-checkout-pay-opt.is-checked .ee-checkout-pay-check {
  background: var(--ee-ink);
  border-color: var(--ee-ink);
  color: #fff;
}

/* ============ Right sidebar ============ */
.ee-checkout-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
@media (min-width: 900px) {
  .ee-checkout-side { position: sticky; top: 100px; }
}
.ee-checkout-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--ee-line);
  margin-bottom: 16px;
}
.ee-checkout-side-head h3 {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 500;
  margin: 0;
  color: var(--ee-ink);
}
.ee-checkout-side-head small {
  font-size: 12.5px;
  color: var(--ee-ink-2);
}

.ee-checkout-items {
  list-style: none;
  padding: 0;
  margin: 0 0 18px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ee-checkout-items li {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 12px;
  align-items: center;
}
.ee-checkout-item-img {
  position: relative;
  width: 64px; height: 64px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--ee-cream);
  display: block;
}
.ee-checkout-item-img img { width: 100%; height: 100%; object-fit: cover; }
.ee-checkout-item-img em {
  position: absolute;
  top: -6px; right: -6px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--ee-ink);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-style: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ee-checkout-item-meta strong {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ee-ink);
  line-height: 1.3;
}
.ee-checkout-item-price {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ee-ink);
  white-space: nowrap;
}

.ee-checkout-coupon {
  display: flex;
  gap: 0;
  padding: 4px;
  background: var(--ee-cream);
  border-radius: 999px;
  margin-bottom: 16px;
}
.ee-checkout-coupon input {
  flex: 1 1 auto;
  border: 0;
  outline: 0;
  padding: 10px 18px;
  background: transparent;
  font-size: 13px;
}
.ee-checkout-coupon button {
  padding: 0 22px;
  border-radius: 999px;
  background: var(--ee-ink);
  color: #fff;
  border: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}

.ee-checkout-totals { padding: 4px 0; }
.ee-checkout-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  font-size: 14px;
  color: var(--ee-ink-2);
}
.ee-checkout-line strong { color: var(--ee-ink); font-weight: 700; }
.ee-checkout-discount { color: #2A5A1E !important; }
.ee-checkout-line--total {
  padding-top: 14px;
  margin-top: 6px;
  border-top: 1px dashed var(--ee-line);
  font-size: 16px;
}
.ee-checkout-line--total span { color: var(--ee-ink); font-weight: 600; }
.ee-checkout-line--total strong { font-size: 22px; }
.ee-checkout-tax-note {
  display: block;
  margin: 6px 0 14px;
  font-size: 11.5px;
  color: var(--ee-ink-2);
  text-align: right;
}

.ee-checkout-place {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 18px;
  background: var(--ee-ink);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s ease;
  margin-top: 8px;
}
.ee-checkout-place:hover:not(:disabled) { background: var(--ee-gold-dark); }
.ee-checkout-place:disabled { opacity: 0.55; cursor: not-allowed; }
.ee-checkout-place i { font-size: 14px; }

.ee-checkout-trust {
  list-style: none;
  padding: 16px 0 0;
  margin: 18px 0 0;
  border-top: 1px solid var(--ee-line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ee-checkout-trust li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ee-ink-2);
}
.ee-checkout-trust li i { color: var(--ee-gold); font-size: 14px; }

.ee-checkout-pay-icons {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 8px;
  font-size: 20px;
  color: var(--ee-ink-2);
}
.ee-checkout-pay-icons small {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ee-ink-2);
  margin-right: 4px;
}

/* Mobile sticky pay bar */
.ee-checkout-mob-bar { display: none; }
@media (max-width: 899.98px) {
  .ee-checkout-mob-bar {
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    z-index: 96;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid var(--ee-line);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.08);
  }
  /* Hide mobile bottom nav on the checkout page — the pay bar replaces it */
  .ee-mob-bottomnav { display: none; }
  /* Hide the existing duplicate cart bar on checkout — pay bar replaces it */
  .ee-mob-cta { display: none !important; }
  body { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  .ee-checkout-mob-meta { flex: 1 1 auto; min-width: 0; }
  .ee-checkout-mob-meta small {
    display: block;
    font-size: 11px;
    color: var(--ee-ink-2);
    line-height: 1;
    margin-bottom: 4px;
    font-weight: 600;
    letter-spacing: 0.02em;
  }
  .ee-checkout-mob-meta strong {
    display: block;
    font-size: 20px;
    color: var(--ee-ink);
    font-weight: 800;
  }
  .ee-checkout-mob-btn {
    flex: 0 0 auto;
    padding: 14px 26px;
    background: var(--ee-ink);
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  /* Hide the in-aside Place Order button on mobile — replaced by sticky pay bar */
  .ee-checkout-place { display: none; }
}

/* =====================================================================
   v10 — Thank you page
   ===================================================================== */

.ee-ty { padding: 50px 0 100px; background: var(--ee-cream); }
@media (max-width: 600px) { .ee-ty { padding: 30px 0 100px; } }

/* Hero confirmation card */
.ee-ty-card {
  max-width: 720px;
  margin: 0 auto 40px;
  background: #fff;
  border-radius: 14px;
  padding: 48px 32px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(26, 26, 26, 0.06);
  border: 1px solid var(--ee-line);
}
.ee-ty-check {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4A6B3A 0%, #2A5A1E 100%);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  margin-bottom: 22px;
  box-shadow: 0 12px 28px rgba(74, 107, 58, 0.30);
  animation: ee-ty-pop .6s cubic-bezier(.2, .8, .2, 1.1);
}
@keyframes ee-ty-pop {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}

.ee-ty-eyebrow {
  display: block;
  color: var(--ee-gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.ee-ty-title {
  font-family: 'Playfair Display', serif;
  font-size: 44px;
  font-weight: 500;
  color: var(--ee-ink);
  margin: 0 0 14px;
  line-height: 1.1;
}
@media (max-width: 600px) { .ee-ty-title { font-size: 30px; } }
.ee-ty-sub {
  font-size: 15px;
  color: var(--ee-ink-2);
  max-width: 520px;
  margin: 0 auto 28px;
  line-height: 1.6;
}
.ee-ty-sub strong { color: var(--ee-ink); }

.ee-ty-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  background: var(--ee-cream);
  border-radius: 10px;
  padding: 20px 16px;
  margin: 0 auto 26px;
  max-width: 560px;
  text-align: left;
}
@media (min-width: 600px) { .ee-ty-meta { grid-template-columns: repeat(3, 1fr); text-align: left; } }
.ee-ty-meta-item small {
  display: block;
  font-size: 11px;
  color: var(--ee-ink-2);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.ee-ty-meta-item strong {
  display: block;
  font-size: 15px;
  color: var(--ee-ink);
  font-weight: 700;
}

.ee-ty-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.ee-ty-actions .ee-btn-primary i,
.ee-ty-actions .ee-btn-ghost i { margin-right: 4px; }

/* Steps */
.ee-ty-steps {
  max-width: 980px;
  margin: 0 auto 40px;
}
.ee-ty-steps header { text-align: center; margin-bottom: 24px; }
.ee-ty-steps header small {
  display: block;
  color: var(--ee-gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.ee-ty-steps header h2 {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  font-weight: 500;
  color: var(--ee-ink);
  margin: 0;
}
.ee-ty-steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 600px) { .ee-ty-steps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .ee-ty-steps-grid { grid-template-columns: repeat(4, 1fr); } }

.ee-ty-step {
  background: #fff;
  border-radius: 10px;
  padding: 22px;
  border: 1px solid var(--ee-line);
  position: relative;
}
.ee-ty-step-num {
  position: absolute;
  top: 16px; right: 18px;
  font-family: 'Playfair Display', serif;
  font-size: 32px;
  color: var(--ee-cream-2);
  font-weight: 600;
  line-height: 1;
}
.ee-ty-step strong {
  display: block;
  font-size: 14px;
  color: var(--ee-ink);
  font-weight: 700;
  margin-bottom: 6px;
}
.ee-ty-step small {
  display: block;
  color: var(--ee-ink-2);
  font-size: 12.5px;
  line-height: 1.5;
}

/* In-this-order */
.ee-ty-items {
  max-width: 720px;
  margin: 0 auto 40px;
  background: #fff;
  border-radius: 12px;
  padding: 24px 28px;
  border: 1px solid var(--ee-line);
}
.ee-ty-items header { margin-bottom: 18px; }
.ee-ty-items header small {
  display: block;
  color: var(--ee-gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.ee-ty-items header h2 {
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  margin: 0;
  font-weight: 500;
  color: var(--ee-ink);
}
.ee-ty-items-list { display: flex; flex-direction: column; gap: 14px; }
.ee-ty-item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 14px;
  align-items: center;
}
.ee-ty-item-img {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--ee-cream);
  display: block;
}
.ee-ty-item-img img { width: 100%; height: 100%; object-fit: cover; }
.ee-ty-item-img em {
  position: absolute;
  top: -6px; right: -6px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--ee-ink);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-style: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ee-ty-item-meta strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ee-ink);
  line-height: 1.3;
}
.ee-ty-item-meta small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--ee-ink-2);
}
.ee-ty-item-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--ee-ink);
  white-space: nowrap;
}

.ee-ty-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0 4px;
  margin-top: 16px;
  border-top: 1px dashed var(--ee-line);
  font-size: 16px;
}
.ee-ty-total span { color: var(--ee-ink); font-weight: 600; }
.ee-ty-total strong {
  font-size: 22px;
  font-weight: 800;
  color: var(--ee-ink);
}

/* Trust strip */
.ee-ty-trust {
  max-width: 980px;
  margin: 0 auto 40px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 600px) { .ee-ty-trust { grid-template-columns: repeat(3, 1fr); } }
.ee-ty-trust > div {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  border: 1px solid var(--ee-line);
}
.ee-ty-trust i {
  font-size: 24px;
  color: var(--ee-gold);
  display: block;
  margin-bottom: 10px;
}
.ee-ty-trust strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--ee-ink);
  margin-bottom: 4px;
}
.ee-ty-trust small {
  display: block;
  font-size: 12.5px;
  color: var(--ee-ink-2);
}

.ee-ty-more { background: transparent; padding: 30px 0 0; }
.ee-ty-more .ee-section-head h2 { font-weight: 500; }

/* ============================================================
   v12 — REFINEMENTS PASS
   - Global mobile overflow guard
   - Force ALL section heads LEFT (kill --center modifier)
   - Carousel pattern (categories + products)
   - Hero slider auto-advance + dots
   - Polished badges (replaces the "wonky" v1)
   - Left drawer visible on desktop (universal hamburger)
   - Checkout: hide noisy cart items list
   ============================================================ */

/* ---- 1. MOBILE OVERFLOW GUARD ---- */
html, body { overflow-x: hidden; }
body { max-width: 100vw; }
img, video { max-width: 100%; height: auto; }
.ee-wrap, .ee-section, .ee-hero, .ee-trust, .ee-press, .ee-ig, .ee-newsletter, .ee-pdp, .ee-checkout {
    max-width: 100vw;
    box-sizing: border-box;
}
@media (max-width: 720px) {
    .ee-wrap { padding-left: 16px; padding-right: 16px; }
    .ee-section { padding: 40px 0; }
    h1, h2 { word-wrap: break-word; overflow-wrap: break-word; }
}

/* ---- 2. FORCE ALL SECTION HEADS LEFT ---- */
.ee-section-head,
.ee-section-head--center {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-areas:
        "eyebrow link"
        "title   link" !important;
    column-gap: 16px;
    text-align: left !important;
    align-items: end;
}
.ee-section-head--center small,
.ee-section-head--center h2 {
    text-align: left !important;
}
.ee-section-head small,
.ee-section-head--center small { grid-area: eyebrow; justify-self: start; }
.ee-section-head h2,
.ee-section-head--center h2 { grid-area: title; justify-self: start; margin-bottom: 0; }

/* ---- 3. CAROUSEL PATTERN ---- */
.ee-carousel {
    position: relative;
}
.ee-carousel-track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 8px;
    /* Hide scrollbar — keep functionality */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.ee-carousel-track::-webkit-scrollbar { display: none; }
.ee-carousel-track > * {
    scroll-snap-align: start;
    flex: 0 0 auto;
}
/* Card sizing inside carousel — responsive widths */
.ee-carousel-track > .ee-card,
.ee-carousel-track > .ee-cat {
    width: calc((100% - 48px) / 4);  /* 4-up desktop */
    min-width: 200px;
}
@media (max-width: 1024px) {
    .ee-carousel-track > .ee-card,
    .ee-carousel-track > .ee-cat { width: calc((100% - 32px) / 3); }  /* 3-up tablet */
}
@media (max-width: 720px) {
    .ee-carousel-track > .ee-card,
    .ee-carousel-track > .ee-cat {
        width: 65vw;          /* 1.5-up mobile — peek the next card */
        min-width: 200px;
    }
}

/* Carousel arrows — desktop only, hover to reveal */
.ee-carousel-arrow {
    position: absolute;
    top: 38%;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--ee-border, #e5e7eb);
    box-shadow: 0 4px 14px rgba(0,0,0,.08);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 5;
    transition: opacity .2s, transform .15s;
    color: var(--ee-text, #111);
    font-size: 18px;
}
.ee-carousel-arrow:hover { transform: translateY(-50%) scale(1.05); }
.ee-carousel-arrow.ee-carousel-prev { left: -22px; transform: translateY(-50%); }
.ee-carousel-arrow.ee-carousel-next { right: -22px; transform: translateY(-50%); }
@media (max-width: 720px) {
    .ee-carousel-arrow { display: none; }    /* swipe only on mobile */
}

/* ---- 4. HERO SLIDER — AUTO-ADVANCE + DOTS (SAFE) ----
   Simple display toggling — until JS marks the slider as `is-init`, the
   first slide shows (so the homepage isn't blank if JS fails to run).
   Once JS attaches, only `.is-active` slides display. No absolute-positioning
   tricks that can collapse the container height. */
.ee-hero-slider { position: relative; }
.ee-hero-slider > .ee-hero-slide { display: none; }
.ee-hero-slider > .ee-hero-slide:first-child { display: block; }
.ee-hero-slider.is-init > .ee-hero-slide:first-child { display: none; }
.ee-hero-slider.is-init > .ee-hero-slide.is-active { display: block; }
/* Custom dots (replacing slick) */
.ee-hero-dots {
    position: absolute; bottom: 24px; left: 50%;
    transform: translateX(-50%);
    display: flex; gap: 8px;
    z-index: 4;
}
.ee-hero-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: rgba(255,255,255,.5);
    border: 0; padding: 0; cursor: pointer;
    transition: all .2s;
}
.ee-hero-dot.is-active {
    background: #fff;
    width: 28px;
    border-radius: 5px;
}

/* ---- 5. BADGES — POLISHED PILL DESIGN ---- */
.ee-card-badges,
.ee-pdp-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
.ee-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    /* Override any inline color — use a clean default */
    background: var(--ee-cream-2, #fbf6ee) !important;
    color: var(--ee-gold-dark, #8a6d2e) !important;
    border: 1px solid rgba(138, 109, 46, .15);
    box-shadow: none;
    white-space: nowrap;
}
.ee-card-badge i { font-size: 10px; }
/* Bestseller / Trending get a black premium look */
.ee-card-badge[data-tone="dark"],
.ee-card-badge.is-dark {
    background: #111 !important;
    color: #fff !important;
    border-color: #111;
}
/* Sale / OFF — soft warm tone */
.ee-card-badge[data-tone="sale"],
.ee-card-badge.is-sale {
    background: #fff1f2 !important;
    color: #b91c1c !important;
    border-color: rgba(185, 28, 28, .15);
}

/* ---- 6. LEFT DRAWER — UNIVERSAL (desktop + mobile) ---- */
.ee-mob-trigger {
    display: inline-flex !important;
    flex-direction: column;
    gap: 4px;
    background: transparent; border: 0; padding: 8px;
    cursor: pointer;
    margin-right: 12px;
}
.ee-mob-trigger span {
    width: 22px; height: 2px; background: var(--ee-text, #111);
    border-radius: 2px;
}
.ee-mob-drawer {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 340px;
    max-width: 86vw;
    background: #fff;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0);
    overflow-y: auto;
    padding: 64px 24px 32px;
}
body.ee-mob-open .ee-mob-drawer {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0, 0, 0, .15);
}
.ee-mob-backdrop {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 999;
    opacity: 0; pointer-events: none;
    transition: opacity .25s;
}
body.ee-mob-open .ee-mob-backdrop {
    opacity: 1; pointer-events: auto;
}
body.ee-mob-open { overflow: hidden; }
.ee-mob-close {
    position: absolute; top: 16px; right: 16px;
    width: 36px; height: 36px; border-radius: 50%;
    background: #f3f4f6; border: 0;
    font-size: 22px; line-height: 1;
    cursor: pointer;
    color: #111;
}
.ee-mob-brand {
    font-family: var(--ee-font-display, serif);
    font-size: 20px; font-weight: 700;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f3f4f6;
}
.ee-mob-nav {
    display: flex; flex-direction: column;
    gap: 4px;
}
.ee-mob-nav a {
    display: flex; align-items: center;
    padding: 12px 4px;
    color: var(--ee-text, #111);
    font-size: 15px;
    text-decoration: none;
    border-bottom: 1px solid #f8f9fa;
    transition: padding .15s;
}
.ee-mob-nav a:hover { padding-left: 8px; color: var(--ee-gold-dark, #8a6d2e); }

/* ---- 7. CHECKOUT — HIDE NOISY CART ITEMS ---- */
.ee-checkout-items { display: none !important; }
.ee-checkout-side-head small { display: none; }   /* "N items" badge — redundant */
/* Make sidebar feel like a clean totals card */
.ee-checkout-side .ee-checkout-card {
    padding-top: 20px;
}
.ee-checkout-side-head h3 {
    font-size: 16px;
    margin-bottom: 12px;
}

/* ---- 8. MOBILE — SECTION HEAD STACKING ---- */
@media (max-width: 720px) {
    .ee-section-head,
    .ee-section-head--center {
        grid-template-areas:
            "eyebrow eyebrow"
            "title   title"
            "link    link" !important;
        grid-template-columns: 1fr !important;
    }
    .ee-section-head > a,
    .ee-section-head > .ee-section-link {
        justify-self: start !important;
        margin-top: 4px;
    }
}

/* ============================================================
   v12.1 HOTFIX
   - Cart drawer: force flex column with sticky summary so the
     Secure Checkout button is ALWAYS visible above the fold,
     even when "Add to bag" suggestions push the items list down.
   - Slider safety: also handles the case where the slider stays
     unstyled if JS errors out (see updated CSS rules above).
   ============================================================ */
.ee-cart-drawer-inner,
.ee-drawer-inner,
.ee-cart-aside {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh;
    max-height: 100vh;
}
.ee-cart-summary {
    position: sticky !important;
    bottom: 0;
    background: #fff;
    border-top: 1px solid #eee;
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom)) 20px;
    box-shadow: 0 -6px 20px rgba(0,0,0,.06);
    z-index: 5;
    margin-top: auto;
}
.ee-cart-checkout {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px 20px;
    margin-top: 10px;
    background: var(--ee-text, #111) !important;
    color: #fff !important;
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    visibility: visible !important;
    opacity: 1 !important;
}
.ee-cart-checkout i { margin-right: 8px; }
.ee-cart-view-link {
    display: block;
    text-align: center;
    margin-top: 10px;
    color: var(--ee-text-2, #555);
    font-size: 13px;
    text-decoration: underline;
}

/* ============================================================
   v12.2 — Category carousel density tuning
   Categories are small circular tiles, so they should pack much
   tighter than product cards. Override the generic carousel rule
   for .ee-cat specifically.
     Desktop : 6.5 visible (next half-card peeks → "scrollable" cue)
     Tablet  : 5.5 visible
     Mobile  : 3.5 visible
   Products (.ee-card) keep their original 4 / 3 / 1.5 sizing.
   ============================================================ */
.ee-carousel-track > .ee-cat {
    width: calc((100% / 6.5) - 14px) !important;
    min-width: 120px !important;
}
@media (max-width: 1024px) {
    .ee-carousel-track > .ee-cat {
        width: calc((100% / 5.5) - 13px) !important;
        min-width: 110px !important;
    }
}
@media (max-width: 720px) {
    .ee-carousel-track > .ee-cat {
        width: calc((100% / 3.5) - 12px) !important;
        min-width: 92px !important;
    }
}

/* Tighten the circular tile so 6.5 fit nicely. The image circle stays
   round; the label below it sits centred under it. */
.ee-carousel-track > .ee-cat .ee-cat-img {
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
}
.ee-carousel-track > .ee-cat .ee-cat-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ee-carousel-track > .ee-cat span {
    text-align: center;
    font-size: 13px;
    margin-top: 10px;
    display: block;
}

/* ============================================================
   v12.3 — MOBILE FIT-TO-VIEWPORT
   Three pages were still overflowing on mobile (PDP, cart,
   checkout). Root causes:
     1. CSS Grid `1fr` is `minmax(min-content, 1fr)` — long
        unbroken text (URLs, product titles) pushes columns
        WIDER than the container, NOT the other way around.
        Fix: explicit `minmax(0, 1fr)` everywhere on mobile.
     2. Card padding 24px × 2 + wrap padding 16px × 2 = 80px
        gone from a 360px viewport. Shrink to 14px on mobile.
     3. Inputs, images, breadcrumbs, option chips need
        `max-width: 100%` + `word-break` to wrap cleanly.
   ============================================================ */
@media (max-width: 720px) {
    /* 1. Kill grid min-content blowups */
    .ee-pdp-grid,
    .ee-pdp-gallery-wrap,
    .ee-checkout-grid,
    .ee-checkout-main,
    .ee-checkout-side,
    .ee-checkout-fields,
    .ee-checkout-field-grid,
    .ee-cart-item {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
    }
    /* Cart item with 90px image column keeps the image col but
       forces the text col to flex-shrink properly */
    .ee-cart-item {
        grid-template-columns: 80px minmax(0, 1fr) !important;
    }

    /* 2. Tighter cards on small viewports */
    .ee-checkout-card,
    .ee-pdp-card {
        padding: 16px !important;
        border-radius: 10px !important;
    }

    /* 3. Inputs / textareas / selects can't escape viewport */
    .ee-checkout input,
    .ee-checkout textarea,
    .ee-checkout select,
    .ee-pdp input,
    .ee-cart input {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 4. Long product titles / breadcrumbs / option chips wrap */
    .ee-pdp-title,
    .ee-pdp-cat,
    .ee-breadcrumb,
    .ee-card-title,
    .ee-cart-item-title,
    .ee-checkout-item-meta strong,
    .ee-cart-option,
    .ee-cart-option-row {
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
        min-width: 0 !important;
    }
    .ee-breadcrumb {
        font-size: 12px !important;
        flex-wrap: wrap !important;
    }

    /* 5. Images NEVER overflow */
    .ee-pdp-main,
    .ee-pdp-main img,
    .ee-pdp-thumbs img,
    .ee-cart-item img,
    .ee-checkout-item-img img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* 6. PDP thumb rail — stack BELOW the main image on mobile,
       no side rail squeezing the gallery */
    .ee-pdp-thumbs--rail {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        gap: 8px !important;
        padding-bottom: 4px !important;
        -webkit-overflow-scrolling: touch;
    }
    .ee-pdp-thumbs--rail .ee-pdp-thumb {
        flex: 0 0 64px !important;
        width: 64px !important;
        height: 64px !important;
    }

    /* 7. Checkout step pills — wrap, not horizontal-scroll */
    .ee-checkout-steps {
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: center !important;
    }
    .ee-checkout-step-line { display: none !important; }

    /* 8. Wrap padding tighter so content gets more room */
    .ee-wrap {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    /* 9. Final safety: any direct child of body/wrap can't be
       wider than viewport — pure overflow hammer */
    .ee-pdp,
    .ee-cart,
    .ee-checkout,
    .ee-checkout-grid,
    .ee-checkout-main,
    .ee-checkout-side,
    .ee-checkout-card,
    .ee-pdp-info,
    .ee-pdp-gallery-wrap,
    .ee-cart-summary,
    .ee-cart-items {
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* 10. Hero / section padding tightening — was 64px, way too much */
    .ee-section { padding: 32px 0 !important; }
}

/* ============================================================
   v12.4 — Mobile bottom-nav alignment fixes
   - Sticky CTA was leaving a gap above the bottom-nav. Slide it
     down to sit flush.
   - Cart drawer's checkout button was half-hidden behind the
     bottom-nav. Hide the bottom-nav while the drawer is open
     (drawer is full-height — nav is redundant there).
   ============================================================ */
@media (max-width: 899.98px) {
    /* Sticky CTA flush against the bottom nav (was 70px → measured nav ~56px) */
    .ee-mob-cta {
        bottom: calc(54px + env(safe-area-inset-bottom)) !important;
    }

    /* When cart drawer is open (body.ee-cart-open), hide the bottom
       nav so the drawer's "Secure checkout" button is fully visible.
       Same goes for the slide-in left menu drawer (body.ee-mob-open). */
    body.ee-cart-open .ee-mob-bottomnav,
    body.ee-cart-open .ee-mob-cta,
    body.ee-mob-open .ee-mob-bottomnav,
    body.ee-mob-open .ee-mob-cta {
        display: none !important;
    }

    /* Safety net: even if no body class fires, ensure the drawer's
       summary clears the bottom-nav so the checkout button is never
       half-covered. */
    .ee-cart-drawer .ee-cart-summary,
    .ee-cart-aside .ee-cart-summary {
        padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    }
}

/* ============================================================
   v12.5 — Checkout overflow, logo, category density
   ============================================================ */

/* ---- 1. LOGO IN HEADER ----
   The store logo is now always rendered as <img> (the blade no longer
   gates on a server-side file_exists, which was unreliable on this
   deploy). Give it a sane, consistent size. ---- */
.ee-brand-logo {
    max-height: 46px;
    width: auto;
    display: inline-block;
    object-fit: contain;
}
@media (max-width: 899.98px) {
    .ee-brand-logo { max-height: 38px; }
}

/* ---- 2. DRAWER OVERFLOW FIX ----
   The cart drawer (right:-460px) and mobile menu drawer (left:-300px)
   were positioned OFF-SCREEN using negative offsets. On mobile that
   extends the document and creates a horizontal scroll / left-clipped
   content (the checkout overflow you saw). Re-anchor them to the edge
   and move them off-screen with translateX() instead — transformed
   elements do NOT extend the scrollable area, so no overflow. ---- */
.ee-cart-drawer {
    left: auto !important;
    right: 0 !important;
    width: min(440px, 100%) !important;
    max-width: 440px !important;
    transform: translateX(105%);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1) !important;
}
body.ee-cart-open .ee-cart-drawer {
    transform: translateX(0) !important;
    right: 0 !important;
}
.ee-mob-drawer {
    right: auto !important;
    left: 0 !important;
    width: 280px !important;
    max-width: 84vw !important;
    transform: translateX(-105%);
    transition: transform .3s ease !important;
}
body.ee-mob-open .ee-mob-drawer {
    left: 0 !important;
    transform: translateX(0) !important;
}

/* Belt-and-braces: clip any residual horizontal overflow at the root. */
html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

/* ---- 3. CATEGORY CAROUSEL DENSITY ----
   Items were ~176px wide while the circular tile was capped at 130px,
   leaving big empty side-gaps so the circles looked far apart. Make the
   tile width hug the circle and let the circle fill it, with a tight,
   even gap — a proper, snug horizontal carousel. ---- */
.ee-carousel-track > .ee-cat {
    width: 122px !important;
    min-width: 122px !important;
}
@media (max-width: 1024px) {
    .ee-carousel-track > .ee-cat { width: 110px !important; min-width: 110px !important; }
}
@media (max-width: 720px) {
    .ee-carousel-track > .ee-cat { width: 96px !important; min-width: 96px !important; }
}
.ee-carousel-track > .ee-cat .ee-cat-img {
    max-width: 100% !important;
    margin: 0 auto 10px !important;
}

/* =====================================================================
   PAGINATION FIX — Laravel's default pagination emits SVG chevrons
   wrapped in Tailwind classes (w-5 h-5). Elite doesn't load Tailwind,
   so the SVGs render at their natural 240×240 px size and cover the
   whole page. Constrain them here.
   ===================================================================== */
.pagination,
nav[role="navigation"] ul.pagination,
[class*="page-link"],
[class*="paginate"] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    list-style: none;
    padding: 20px 0 40px;
    margin: 0;
    flex-wrap: wrap;
}
.pagination li,
.pagination span,
.pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #e2e6ea;
    background: #fff;
    color: #1c1f24;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    border-radius: 4px;
    transition: all 0.15s ease;
}
.pagination li.active span,
.pagination li.active a,
.pagination .active span,
.pagination .active a {
    background: #1c1f24;
    color: #fff;
    border-color: #1c1f24;
}
.pagination li.disabled span,
.pagination .disabled span {
    opacity: 0.35;
    cursor: not-allowed;
}
/* THE FIX — force the Tailwind-classed SVG chevrons to a sane size. */
.pagination svg,
nav[role="navigation"] svg,
[class*="page"] svg,
[class*="paginate"] svg {
    width: 14px !important;
    height: 14px !important;
    max-width: 14px !important;
    max-height: 14px !important;
    display: inline-block !important;
    vertical-align: middle;
}

/* =====================================================================
   HEADER NAV SPACING — the CSS had gap on .ee-nav but the actual flex
   container is <ul class="ee-nav-list">, so nav items ran together with
   no whitespace. Force generous spacing between top-level nav items.
   ===================================================================== */
.ee-nav-list,
ul.ee-nav-list {
    display: inline-flex !important;
    flex-wrap: nowrap;
    align-items: center;
    gap: 32px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.ee-nav-item {
    display: inline-flex;
    align-items: center;
}
.ee-nav-item + .ee-nav-item {
    margin-left: 0; /* rely on gap, kill any legacy margin */
}
.ee-nav-link {
    padding: 8px 6px;
    white-space: nowrap;
}
@media (max-width: 1100px) {
    .ee-nav-list, ul.ee-nav-list { gap: 22px; }
    .ee-nav-link { font-size: 12px; letter-spacing: 0.10em; }
}

/* =====================================================================
   CART DRAWER — upsell HORIZONTAL PILL cards.
   Image on the left, name + price + Add button on the right. Each card
   ~230px wide × 84px tall so the ENTIRE card fits inside the drawer's
   vertical budget (previous vertical tiles were being clipped at the
   bottom by the summary section). Scrolls sideways showing ~1.6 cards
   at a time — clear affordance to swipe.
   ===================================================================== */
.ee-cart-upsell--carousel {
    padding: 14px 18px 12px;
    background: #fafaf7;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin: 8px 0 0;
    flex-shrink: 0;
}
.ee-cart-upsell-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
}
.ee-cart-upsell-head small {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 11px;
    font-weight: 700;
    color: #1c1f24;
}
.ee-cart-upsell-hint {
    font-size: 10.5px;
    color: #8a8e98;
}
.ee-cart-upsell-track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 2px 0 8px;
    margin: 0 -18px;
    padding-left: 18px;
    padding-right: 18px;
    scrollbar-width: thin;
}
.ee-cart-upsell-track::-webkit-scrollbar { height: 5px; }
.ee-cart-upsell-track::-webkit-scrollbar-track { background: transparent; }
.ee-cart-upsell-track::-webkit-scrollbar-thumb { background: #d4d4ce; border-radius: 6px; }

/* Horizontal card — image left, info right */
.ee-cart-upsell-tile {
    flex: 0 0 230px;
    height: 84px;
    scroll-snap-align: start;
    background: #fff;
    border: 1px solid #e5e5e0;
    border-radius: 10px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 84px 1fr;
    align-items: stretch;
    transition: box-shadow .15s ease, transform .15s ease;
}
.ee-cart-upsell-tile:hover {
    box-shadow: 0 6px 14px rgba(0,0,0,0.08);
    transform: translateY(-1px);
}
.ee-cart-upsell-tile-img {
    position: relative;
    display: block;
    background: #f4f4f0;
    overflow: hidden;
    height: 100%;
    text-decoration: none;
}
.ee-cart-upsell-tile-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
.ee-cart-upsell-tile:hover .ee-cart-upsell-tile-img img { transform: scale(1.06); }
.ee-cart-upsell-tile-off {
    position: absolute;
    top: 4px; left: 4px;
    background: #b8825b;
    color: #fff;
    font-size: 8.5px;
    letter-spacing: 0.04em;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 3px;
    line-height: 1.2;
}
.ee-cart-upsell-tile-body {
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-width: 0;   /* let flex children truncate cleanly */
}
.ee-cart-upsell-tile-name {
    color: #1c1f24;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.3;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ee-cart-upsell-tile-price-row {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin-top: 1px;
}
.ee-cart-upsell-tile-price-row strong {
    font-size: 12px;
    color: #1c1f24;
    font-weight: 700;
}
.ee-cart-upsell-tile-price-row s {
    font-size: 10px;
    color: #a4a4a0;
}
.ee-cart-upsell-tile-add {
    align-self: flex-start;
    border: 1px solid #1c1f24;
    background: #fff;
    color: #1c1f24;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 4px 9px;
    border-radius: 20px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    text-transform: uppercase;
    margin-top: 4px;
    transition: background 0.15s ease, color 0.15s ease;
}
.ee-cart-upsell-tile-add:hover { background: #1c1f24; color: #fff; }
.ee-cart-upsell-tile-add i { font-size: 10.5px; }

/* Ensure cart items area is scrollable so 8-item cart + upsell + summary
   don't overflow the drawer. The parent drawer has fixed viewport height.
   Cart items get the flex-grow lion's share; upsell is fixed height;
   summary is fixed at bottom. */
.ee-cart-drawer-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}
.ee-cart-items {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 100px;
}
.ee-cart-summary {
    flex-shrink: 0;
}

/* =====================================================================
   BEYOUNG-INSPIRED FASHION POLISH  (v12_10)
   Tighter spacing, warmer palette accents, motion-ready reveal states,
   card lift on hover, cart-drawer backdrop blur, typography refinement.
   ===================================================================== */

/* -- Reveal utility. Motion One promotes to visible via inView(). -- */
[data-reveal], .ee-section > .ee-wrap {
    /* CSS baseline in case Motion One fails to load */
}
@media (prefers-reduced-motion: no-preference) {
    .ee-section {
        will-change: transform, opacity;
    }
}

/* -- Section spacing tighter for editorial density (Beyoung-style) -- */
.ee-section { padding: 44px 0; }
@media (max-width: 900px) {
    .ee-section { padding: 28px 0; }
}
.ee-section-head { margin-bottom: 22px; gap: 4px; }
.ee-section-head small {
    letter-spacing: 0.18em;
    font-size: 10.5px;
    color: #b8825b;
    font-weight: 700;
}
.ee-section-head h2 {
    font-size: clamp(22px, 2.6vw, 32px);
    letter-spacing: -0.01em;
    margin: 2px 0 0;
    line-height: 1.15;
}

/* -- Product card lift + image scale on hover -- */
.ee-prod-card {
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    background: #fff;
}
.ee-prod-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(15, 15, 15, 0.10);
}
.ee-prod-card img,
.ee-prod-card .ee-prod-card-img img,
.ee-prod-card .ee-prod-card-media img {
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.ee-prod-card:hover img {
    transform: scale(1.06);
}

/* -- Category card polish -- */
.ee-cat {
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.ee-cat:hover { transform: translateY(-3px); }
.ee-cat-img {
    border-radius: 999px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(15,15,15,0.04);
    transition: box-shadow 0.3s ease;
}
.ee-cat:hover .ee-cat-img {
    box-shadow: 0 12px 30px rgba(15,15,15,0.12);
}

/* -- CTAs: smooth press + gradient wash -- */
.ee-btn, .ee-btn-primary {
    transition: transform 0.18s ease, box-shadow 0.24s ease, background 0.24s ease;
    letter-spacing: 0.06em;
}
.ee-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(15, 15, 15, 0.14);
}
.ee-btn-primary:active { transform: translateY(0); }

/* -- Cart drawer: refined backdrop blur (feels premium) -- */
.ee-cart-drawer-backdrop,
.ee-cart-backdrop,
[class*="cart-backdrop"] {
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    background: rgba(15, 15, 15, 0.35) !important;
}
.ee-cart-drawer {
    box-shadow: -12px 0 40px rgba(15, 15, 15, 0.14);
}

/* -- Header: sticky with subtle drop shadow on scroll -- */
.ee-header,
.site-navbar,
[class*="site-header"] {
    transition: box-shadow 0.28s ease, backdrop-filter 0.3s ease;
}
body.is-scrolled .ee-header,
body.is-scrolled .site-navbar {
    box-shadow: 0 6px 22px rgba(15, 15, 15, 0.05);
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
}

/* -- Trust strip refinement -- */
.ee-trust {
    padding: 22px 0;
    background: linear-gradient(180deg, #faf7f4 0%, #f5f2ee 100%);
    border-top: 1px solid rgba(15,15,15,0.05);
    border-bottom: 1px solid rgba(15,15,15,0.05);
}
.ee-trust-item {
    transition: transform 0.24s ease;
}
.ee-trust-item:hover {
    transform: translateY(-2px);
}

/* -- Hero: typographic scale + cleaner overlay -- */
.ee-hero h1, .ee-hero .ee-hero-title {
    font-size: clamp(30px, 5.5vw, 68px);
    line-height: 1.02;
    letter-spacing: -0.02em;
    font-weight: 700;
}
.ee-hero .ee-hero-eyebrow {
    letter-spacing: 0.24em;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    color: #fff;
    opacity: 0.9;
}

/* -- Selection color aligns with brand accent -- */
::selection {
    background: #b8825b;
    color: #fff;
}

/* -- Focus ring: subtle, brand-toned -- */
:focus-visible {
    outline: 2px solid rgba(184, 130, 91, 0.45);
    outline-offset: 3px;
    border-radius: 4px;
}

/* -- Fashion "Beyoung-ish" price polish: bolder present price -- */
.ee-prod-price strong,
.ee-prod-card [class*="price"] strong {
    font-weight: 700;
    font-size: 15px;
    color: #1c1f24;
}

/* =====================================================================
   FINAL LAYOUT POLISH (v12_11)
   – Newsletter: from 80px slab to a tight, modern 2-col call-out
   – Kill about section on fashion stores (leftover from jewellery seed)
   – Tighten PDP related-products → reviews gap (was 500px of white)
   – Compact review CTA card
   ===================================================================== */

/* ----- Newsletter: tight + modern ----- */
.ee-newsletter {
    padding: 56px 0 !important;
    background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 100%);
}
.ee-newsletter-inner {
    grid-template-columns: 1fr !important;
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
    gap: 22px !important;
}
.ee-newsletter-text small {
    font-size: 10.5px !important;
    letter-spacing: 0.28em !important;
    margin-bottom: 8px !important;
    color: #b8825b !important;
}
.ee-newsletter-text h2 {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(22px, 2.6vw, 30px) !important;
    letter-spacing: -0.01em !important;
    font-weight: 700 !important;
    margin: 0 0 6px 0 !important;
    color: #fff;
}
.ee-newsletter-text p {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    max-width: 520px;
    margin: 0 auto !important;
    color: rgba(255, 255, 255, 0.65) !important;
}
.ee-newsletter-form {
    max-width: 460px;
    margin: 4px auto 0;
    padding: 4px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255,255,255,0.12) !important;
}
.ee-newsletter-form input {
    padding: 12px 20px !important;
    font-size: 13.5px !important;
}
.ee-newsletter-form button {
    padding: 12px 22px !important;
    font-size: 11px !important;
    letter-spacing: 0.14em !important;
}

/* ----- Kill the leftover about section (leaf placeholder) ----- */
.ee-about {
    display: none !important;
}

/* ----- PDP: tighten related products → reviews (kill huge dead space) ----- */
.ee-related-products,
.ee-pdp-related,
[class*="ee-related"] {
    padding: 36px 0 24px !important;
    margin-bottom: 0 !important;
}
.ee-pdp-reviews,
.ee-reviews,
[class*="ee-review"] {
    padding: 28px 0 44px !important;
    margin-top: 0 !important;
}

/* ----- Review CTA: compact + brand-appropriate ----- */
.ee-review-cta,
.ee-pdp-review-cta,
.ee-review-signin,
[class*="review-signin"],
[class*="review-cta"] {
    max-width: 520px;
    margin: 20px auto !important;
    padding: 22px 26px !important;
    background: linear-gradient(135deg, #fef7e6 0%, #fdefd1 100%) !important;
    border: 1px solid rgba(184, 130, 91, 0.22) !important;
    border-radius: 14px;
    text-align: center;
    box-shadow: 0 8px 20px rgba(184, 130, 91, 0.08);
}

/* Review section header — smaller + tighter */
.ee-pdp-reviews h2,
.ee-reviews h2,
[class*="review"] > h2 {
    font-size: clamp(22px, 2.6vw, 30px) !important;
    margin: 0 0 12px !important;
}
.ee-pdp-reviews > small,
.ee-reviews > small,
[class*="review"] > small {
    font-size: 10.5px !important;
    letter-spacing: 0.24em !important;
    color: #b8825b !important;
}

/* ----- Global: kill any 60px+ empty vertical gaps between sections ----- */
.ee-section + .ee-section,
.ee-section + section[class*="ee-"],
section[class*="ee-"] + section[class*="ee-"] {
    padding-top: 20px;
}

/* =====================================================================
   MOBILE POLISH (v12_12)
   – Fix trust strip: icons + labels visible on mobile (was showing empty circles)
   – Compress announcement bar
   – Tighter mobile section spacing
   – Better hero legibility
   ===================================================================== */
@media (max-width: 600px) {
    /* Trust strip — force 2 columns, ensure labels render */
    .ee-trust {
        padding: 14px 0 !important;
    }
    .ee-trust-grid,
    .ee-trust ul {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px 10px !important;
        padding: 0 14px !important;
    }
    .ee-trust-item {
        gap: 8px !important;
        align-items: center !important;
        min-width: 0;
    }
    .ee-trust-item i {
        width: 32px !important;
        height: 32px !important;
        font-size: 16px !important;
        flex-shrink: 0 !important;
    }
    /* Force text visible — was disappearing due to some inherited style */
    .ee-trust-item strong,
    .ee-trust-item > div > strong {
        display: block !important;
        font-size: 11.5px !important;
        line-height: 1.2 !important;
        color: #1c1f24 !important;
        font-weight: 700 !important;
        white-space: normal !important;
    }
    .ee-trust-item small,
    .ee-trust-item > div > small {
        display: block !important;
        font-size: 10.5px !important;
        line-height: 1.25 !important;
        color: #6b6b6b !important;
        margin-top: 1px;
        white-space: normal !important;
    }
    .ee-trust-item > div {
        min-width: 0;
        flex: 1;
    }

    /* Announcement bar — shrink so it stays one tight line */
    .ee-announce, [class*="announce"] {
        font-size: 10.5px !important;
        padding: 8px 12px !important;
        letter-spacing: 0.06em !important;
        line-height: 1.3 !important;
    }

    /* Section spacing — tighter on mobile */
    .ee-section { padding: 24px 0 !important; }
    .ee-section-head { margin-bottom: 14px !important; }
    .ee-section-head h2 {
        font-size: clamp(18px, 5.5vw, 24px) !important;
        line-height: 1.15 !important;
    }
    .ee-section-head small {
        font-size: 9.5px !important;
        letter-spacing: 0.18em !important;
    }

    /* Newsletter — tighter mobile */
    .ee-newsletter { padding: 40px 16px !important; }
    .ee-newsletter-text h2 {
        font-size: 20px !important;
        line-height: 1.2 !important;
    }
    .ee-newsletter-text p {
        font-size: 12.5px !important;
    }
    .ee-newsletter-form {
        flex-direction: column;
        border-radius: 12px !important;
        padding: 6px !important;
        gap: 6px;
    }
    .ee-newsletter-form input {
        width: 100%;
        text-align: center;
        padding: 12px !important;
    }
    .ee-newsletter-form button {
        width: 100%;
        padding: 12px !important;
    }

    /* Category tiles: 3-per-row on mobile */
    .ee-cat-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
    }
    .ee-cat span {
        font-size: 10.5px !important;
        letter-spacing: 0.03em !important;
    }

    /* Hero: legible headline, no huge padding */
    .ee-hero h1, .ee-hero .ee-hero-title {
        font-size: clamp(24px, 8vw, 34px) !important;
        line-height: 1.05 !important;
    }
    .ee-hero-eyebrow {
        font-size: 9.5px !important;
    }

    /* Kill excessive vertical rhythm between sections */
    section + section { padding-top: 12px; }
}

/* =====================================================================
   CHECKOUT NEWSLETTER CHECKBOX — was rendering at ~70px on mobile because
   Bootstrap's global input reset was expanding native <input> to 100% or
   inheriting a large min-height. Nail it to 18×18px explicitly.
   ===================================================================== */
.ee-checkout-newsletter {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    font-size: 12.5px !important;
    color: #4b4b4b !important;
    cursor: pointer;
    padding: 10px 0;
    line-height: 1.4;
}
.ee-checkout-newsletter input[type="checkbox"],
.ee-checkout-newsletter input {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    flex-shrink: 0 !important;
    margin: 3px 0 0 !important;
    padding: 0 !important;
    border: 1.5px solid #cbd0d4 !important;
    border-radius: 4px !important;
    background: #fff !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    cursor: pointer;
    position: relative;
    transition: border-color 0.15s ease, background 0.15s ease;
    box-shadow: none !important;
}
.ee-checkout-newsletter input[type="checkbox"]:checked {
    background: #1c1f24 !important;
    border-color: #1c1f24 !important;
}
.ee-checkout-newsletter input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 5px; top: 1px;
    width: 5px; height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.ee-checkout-newsletter input[type="checkbox"]:focus-visible {
    outline: 2px solid rgba(184, 130, 91, 0.4);
    outline-offset: 2px;
}

/* Apply the same fix to ANY checkbox inside the checkout form
   (belt-and-braces in case there are more later). */
.ee-checkout input[type="checkbox"],
form.checkout input[type="checkbox"],
form[id*="checkout"] input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    min-height: 18px !important;
    flex-shrink: 0 !important;
}


/* ═════════════════════════════════════════════════════════════════════
   v13 — Big-brand compliance footer + premium newsletter block
   ═════════════════════════════════════════════════════════════════════ */

/* ---------- Trust badge strip above main footer ---------- */
.ee-footer.ee-footer-v2 { padding-top: 0; margin-top: 100px; }
.ee-footer-trust {
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 28px 0;
}
.ee-footer-trust-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 640px)  { .ee-footer-trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ee-footer-trust-grid { grid-template-columns: repeat(4, 1fr); } }
.ee-footer-trust-item {
    display: flex; align-items: center; gap: 14px;
}
.ee-footer-trust-item i {
    font-size: 24px;
    color: var(--ee-gold);
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(192,150,94,0.35);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ee-footer-trust-item strong {
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    display: block;
    letter-spacing: .02em;
}
.ee-footer-trust-item small {
    color: rgba(255,255,255,0.55);
    font-size: 12px;
    display: block;
    margin-top: 2px;
}

/* ---------- 5-column main grid ---------- */
.ee-footer-v2 .ee-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 56px 0 40px;
}
@media (min-width: 640px)  { .ee-footer-v2 .ee-footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .ee-footer-v2 .ee-footer-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .ee-footer-v2 .ee-footer-grid { grid-template-columns: 1.6fr repeat(4, 1fr); } }

.ee-footer-brand .ee-footer-brand-link { font-size: 30px; margin-bottom: 4px; }
.ee-footer-tagline {
    font-size: 14px;
    color: rgba(255,255,255,0.65);
    line-height: 1.55;
    margin: 4px 0 12px 0;
    max-width: 340px;
}
.ee-footer-address, .ee-footer-contactline {
    font-size: 13px;
    color: rgba(255,255,255,0.62);
    display: inline-flex; align-items: flex-start; gap: 8px;
    line-height: 1.55;
    max-width: 320px;
}
.ee-footer-contactline { padding: 3px 0; }
.ee-footer-contactline:hover { color: var(--ee-gold); }
.ee-footer-address i, .ee-footer-contactline i { color: var(--ee-gold); margin-top: 2px; }

/* ---------- Payment methods strip ---------- */
.ee-footer-pay-strip {
    background: rgba(0,0,0,0.15);
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 20px 0;
}
.ee-footer-pay-inner {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 14px;
}
.ee-footer-pay-inner small {
    color: rgba(255,255,255,0.55);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
}
.ee-footer-pay-icons {
    display: flex; gap: 8px; flex-wrap: wrap;
}
.ee-pay-chip {
    display: inline-flex;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.ee-pay-chip svg { display: block; width: 40px; height: 24px; }

/* ---------- Bottom bar ---------- */
.ee-footer-v2 .ee-footer-bottom {
    background: rgba(0,0,0,0.25);
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 16px 0;
}
.ee-footer-v2 .ee-footer-bottom-inner {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px;
}
.ee-footer-legal-microcopy {
    color: rgba(255,255,255,0.45) !important;
    font-size: 10.5px !important;
    letter-spacing: .04em !important;
}

/* ---------- Newsletter block premium refresh ---------- */
.ee-newsletter {
    background:
        radial-gradient(circle at 20% 20%, rgba(192,150,94,0.08), transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(192,150,94,0.06), transparent 40%),
        var(--ee-ink);
    padding: 72px 0 !important;
    border-top: 1px solid rgba(255,255,255,0.06);
    position: relative;
}
.ee-newsletter::before {
    content: '';
    position: absolute; inset: 0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><circle cx="30" cy="30" r="1" fill="rgba(255,255,255,0.03)"/></svg>');
    background-size: 22px 22px;
    pointer-events: none;
    opacity: .6;
}
.ee-newsletter-inner {
    position: relative; z-index: 1;
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
    display: flex; flex-direction: column; align-items: center; gap: 22px;
}
.ee-newsletter-text small {
    display: inline-block;
    color: var(--ee-gold);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid rgba(192,150,94,0.35);
    background: rgba(192,150,94,0.06);
    margin-bottom: 14px;
}
.ee-newsletter-text h2 {
    font-family: 'Playfair Display', serif;
    color: #fff !important;
    font-size: clamp(28px, 4vw, 40px) !important;
    line-height: 1.15 !important;
    text-align: center !important;
    max-width: 560px;
    margin: 0 auto !important;
}
.ee-newsletter-text p {
    color: rgba(255,255,255,0.7);
    font-size: 15px;
    line-height: 1.6;
    max-width: 480px;
    margin: 0 auto;
}
.ee-newsletter-form {
    display: flex; gap: 8px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 999px;
    padding: 6px;
    width: 100%;
    max-width: 480px;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.ee-newsletter-form:focus-within {
    border-color: var(--ee-gold);
    box-shadow: 0 0 0 4px rgba(192,150,94,0.12);
}
.ee-newsletter-form input {
    flex: 1;
    background: transparent !important;
    border: 0 !important;
    color: #fff !important;
    padding: 12px 18px !important;
    font-size: 14px;
    outline: none !important;
}
.ee-newsletter-form input::placeholder { color: rgba(255,255,255,0.5); }
.ee-newsletter-form button {
    background: var(--ee-gold) !important;
    color: #1c1f24 !important;
    border: 0 !important;
    padding: 12px 24px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .02em;
    cursor: pointer;
    transition: transform .15s ease, filter .15s ease;
    white-space: nowrap;
}
.ee-newsletter-form button:hover { filter: brightness(1.1); transform: translateY(-1px); }
.ee-newsletter-perks {
    display: inline-flex; flex-wrap: wrap; gap: 22px; justify-content: center;
    color: rgba(255,255,255,0.55);
    font-size: 12.5px;
    margin-top: 4px;
}
.ee-newsletter-perks span {
    display: inline-flex; align-items: center; gap: 6px;
}
.ee-newsletter-perks i { color: var(--ee-gold); }


/* ═════════════════════════════════════════════════════════════════════
   v13_1 — Checkout mobile fix + sign-in bar + country + coupon sheet
   ═════════════════════════════════════════════════════════════════════ */

/* ---------- Kill horizontal scroll on checkout ---------- */
/* Root cause on mobile: the sticky pay bar + payment rows had unbounded
   grid children (min-content), and the previous sign-in card's black pill
   was overflowing on narrow screens. Belt-and-braces: force the checkout
   containers to respect the viewport width. */
html, body { max-width: 100%; overflow-x: hidden; }
.ee-checkout { overflow-x: hidden; }
.ee-checkout .ee-wrap { max-width: 100%; overflow-x: hidden; }
.ee-checkout-grid { max-width: 100%; }
.ee-checkout-grid > * { min-width: 0; }        /* let grid children shrink */
.ee-checkout-card { max-width: 100%; overflow: hidden; }
.ee-checkout-fields { max-width: 100%; }
.ee-checkout-field, .ee-checkout-field-grid { min-width: 0; max-width: 100%; }
.ee-checkout-field input,
.ee-checkout-field select { max-width: 100%; box-sizing: border-box; }
.ee-checkout-pay-opt {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}
.ee-checkout-pay-meta {
    min-width: 0;
}
.ee-checkout-pay-meta strong,
.ee-checkout-pay-meta small {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Mobile: the "Recommended" badge next to PeClick Payments was wrapping
   past the row edge. Make it stack under the label on narrow screens. */
@media (max-width: 599px) {
    .ee-checkout-pay-meta strong span {
        display: block !important;
        margin: 4px 0 0 0 !important;
        max-width: fit-content;
    }
    .ee-checkout-pay-opt {
        grid-template-columns: 38px 1fr 24px !important;
        gap: 10px !important;
        padding: 12px !important;
    }
}

/* ---------- Redesigned sign-in bar ---------- */
.ee-checkout-login-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: var(--ee-cream, #faf7f2);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 12px;
    margin-bottom: 16px;
    font-size: 13px;
}
.ee-checkout-login-bar-body {
    display: inline-flex; align-items: center; gap: 10px;
    min-width: 0; flex: 1;
    color: var(--ee-ink-2, #55524d);
}
.ee-checkout-login-bar-body i {
    color: var(--ee-gold, #c0965e);
    font-size: 16px;
    flex-shrink: 0;
}
.ee-checkout-login-bar-body span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ee-checkout-login-link {
    color: var(--ee-ink, #1c1f24) !important;
    font-size: 13px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    display: inline-flex; align-items: center; gap: 6px;
    white-space: nowrap;
    padding: 6px 10px;
    border-radius: 8px;
    transition: background .15s ease;
}
.ee-checkout-login-link:hover {
    background: rgba(0,0,0,0.04);
}
.ee-checkout-login-link i { font-size: 13px; }

/* ---------- Country select styling ---------- */
.ee-checkout-field select#country {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%2355524d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px;
    padding-right: 40px;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

/* ---------- Google Places autofilled hint ---------- */
.ee-checkout-hint {
    display: inline-flex; align-items: center; gap: 5px;
    color: #059669;
    font-size: 11.5px;
    font-weight: 600;
    background: #ecfdf5;
    padding: 3px 8px;
    border-radius: 999px;
    margin-top: 6px;
    align-self: flex-start;
    animation: eeHintFade .25s ease;
}
@keyframes eeHintFade { from { opacity: 0; transform: translateY(4px);} to { opacity: 1; transform: translateY(0);} }

/* Google's autocomplete dropdown — style to match theme */
.pac-container {
    border-radius: 12px !important;
    box-shadow: 0 12px 40px -6px rgba(0,0,0,.18) !important;
    border: 1px solid rgba(0,0,0,0.06) !important;
    margin-top: 4px !important;
    font-family: inherit !important;
    z-index: 100000 !important;
}
.pac-item {
    padding: 10px 14px !important;
    font-size: 13px !important;
    border-top: 1px solid rgba(0,0,0,0.05) !important;
    cursor: pointer !important;
}
.pac-item:hover { background: var(--ee-cream, #faf7f2) !important; }
.pac-icon { display: none !important; }
.pac-item-query { font-size: 13.5px !important; font-weight: 600 !important; color: var(--ee-ink, #1c1f24) !important; }

/* ═════════════════════════════════════════════════════════════════════
   Coupon FAB + bottom sheet
   ═════════════════════════════════════════════════════════════════════ */
.ee-coupon-fab {
    position: fixed;
    right: 20px;
    bottom: 90px;              /* above mobile pay bar */
    z-index: 88;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, #e23744 0%, #b5121b 100%);
    color: #fff;
    border: 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    box-shadow: 0 10px 30px -6px rgba(226,55,68,.55), 0 4px 10px rgba(0,0,0,.1);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}
.ee-coupon-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -6px rgba(226,55,68,.55); }
.ee-coupon-fab:active { transform: scale(.97); }
.ee-coupon-fab i { font-size: 16px; }

@media (min-width: 900px) {
    .ee-coupon-fab { bottom: 30px; right: 30px; }
}
/* Note: global html/body { overflow-x: hidden !important } already lives at
 * the very bottom of this file (~line 4122+) — no per-media override needed. */

/* Backdrop */
.ee-coupon-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 95;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}
body.ee-coupon-open .ee-coupon-backdrop {
    opacity: 1; pointer-events: auto;
}

/* Sheet */
.ee-coupon-sheet {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 96;
    background: #fff;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -20px 60px -10px rgba(0,0,0,.2);
    transform: translateY(100%);
    transition: transform .28s cubic-bezier(.2,.85,.25,1);
    max-height: 80vh;
    display: flex; flex-direction: column;
}
body.ee-coupon-open .ee-coupon-sheet { transform: translateY(0); }

.ee-coupon-sheet-grab {
    width: 44px; height: 4px;
    background: rgba(0,0,0,.15);
    border-radius: 999px;
    margin: 8px auto 0;
    cursor: pointer;
}
.ee-coupon-sheet-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 12px 20px 16px;
    border-bottom: 1px solid rgba(0,0,0,.06);
}
.ee-coupon-sheet-head h3 {
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    color: var(--ee-ink, #1c1f24);
}
.ee-coupon-sheet-head small {
    display: block;
    color: var(--ee-ink-2, #55524d);
    font-size: 12.5px;
    margin-top: 2px;
}
.ee-coupon-sheet-close {
    background: transparent;
    border: 0;
    color: var(--ee-ink-2);
    padding: 6px;
    cursor: pointer;
    font-size: 18px;
}

.ee-coupon-sheet-body {
    overflow-y: auto;
    padding: 16px 20px 24px;
    display: flex; flex-direction: column; gap: 12px;
    flex: 1;
}

.ee-coupon-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 16px;
    border: 1.5px dashed rgba(0,0,0,.12);
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
    position: relative;
}
.ee-coupon-card:hover {
    border-color: #e23744;
    background: #fff9f9;
    transform: translateY(-2px);
}
.ee-coupon-card.is-locked {
    opacity: .68;
    cursor: not-allowed;
    background: #fafafa;
}
.ee-coupon-card.is-locked:hover { border-color: rgba(0,0,0,.12); transform: none; background: #fafafa; }

.ee-coupon-card-left { min-width: 0; }
.ee-coupon-card-badge {
    display: inline-block;
    background: linear-gradient(135deg, #e23744 0%, #b5121b 100%);
    color: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.ee-coupon-card.is-locked .ee-coupon-card-badge {
    background: #94a3b8;
}
.ee-coupon-card-code {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--ee-ink, #1c1f24);
    margin-bottom: 4px;
}
.ee-coupon-card-sub {
    display: block;
    color: var(--ee-ink-2, #55524d);
    font-size: 12.5px;
    line-height: 1.4;
}
.ee-coupon-card-lock {
    display: block;
    color: #f59e0b;
    font-size: 11.5px;
    font-weight: 700;
    margin-top: 6px;
}
.ee-coupon-card-cta {
    color: #e23744;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: .06em;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #fff5f5;
    white-space: nowrap;
}
.ee-coupon-card.is-locked .ee-coupon-card-cta {
    color: #94a3b8;
    background: transparent;
}
.ee-coupon-card.is-loading { pointer-events: none; opacity: .7; }
.ee-coupon-card.is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.6) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 50 50"><circle cx="25" cy="25" r="20" fill="none" stroke="%23e23744" stroke-width="4" stroke-linecap="round" stroke-dasharray="90,150" stroke-dashoffset="0"><animate attributeName="stroke-dashoffset" values="0;-45;-125" dur="1.5s" repeatCount="indefinite"/><animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="1.5s" repeatCount="indefinite"/></circle></svg>') center center no-repeat;
    border-radius: 14px;
}

/* Toast inside the sheet */
.ee-coupon-sheet-toast {
    position: absolute;
    left: 20px; right: 20px; bottom: 20px;
    padding: 14px 18px;
    background: #1c1f24;
    color: #fff;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 10px 30px -6px rgba(0,0,0,.4);
    animation: eeToastIn .3s ease;
    z-index: 2;
}
.ee-coupon-sheet-toast.is-err {
    background: #dc2626;
}
@keyframes eeToastIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Hide the coupon FAB when the sheet is open */
body.ee-coupon-open .ee-coupon-fab { opacity: 0; pointer-events: none; transform: scale(.85); transition: all .2s ease; }

/* On desktop, sheet slides in from bottom-right as a card, not full-width */
@media (min-width: 900px) {
    .ee-coupon-sheet {
        left: auto;
        right: 30px;
        bottom: 30px;
        width: 420px;
        border-radius: 20px;
        max-height: 70vh;
    }
}