/* ================================================================
   ODOS GIDAS — Botanical Derma
   Full theme. Matches actual template HTML structure.
   ================================================================ */

/* ── Tokens ────────────────────────────────────────────────── */
:root {
  --bg:           #f7f5f0;
  --surface:      #ffffff;
  --surface-2:    #f2efe8;
  --surface-3:    #eae7df;

  --sage:         #47715a;
  --sage-mid:     #6a9470;
  --sage-light:   #a8c5ab;
  --sage-pale:    #d6e8d8;
  --sage-faint:   #edf4ee;
  --sage-dark:    #2c4a35;

  --ink:          #191b17;
  --ink-2:        #454840;
  --ink-3:        #7a8070;
  --ink-4:        #aab0a2;
  --ink-5:        #ced4c5;

  --line:         #e2ded5;
  --line-2:       #d0ccC2;
  --line-sage:    #bfd4c0;

  --red:          #b83c2e;
  --amber:        #a07020;

  --r:            3px;
  --r2:           8px;
  --r3:           16px;
  --pill:         100px;

  --ease:         cubic-bezier(.4,0,.2,1);
  --spring:       cubic-bezier(0,.8,.3,1);
  --t:            .24s;

  --sh1:          0 1px 3px rgba(25,27,23,.06), 0 4px 16px rgba(25,27,23,.05);
  --sh2:          0 4px 20px rgba(25,27,23,.10), 0 1px 4px rgba(25,27,23,.05);
  --sh3:          0 12px 48px rgba(25,27,23,.14), 0 3px 10px rgba(25,27,23,.06);

  --glow:         0 0 0 3px rgba(71,113,90,.14);
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px; font-weight: 400; line-height: 1.68;
  letter-spacing: .006em; color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* subtle parchment grain */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none; opacity: .022;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='g'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 160px;
}

@keyframes fadeUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
body { animation: fadeUp .4s var(--spring) both; }

/* ── Type ──────────────────────────────────────────────────── */
h1,h2,h3,h4,.h1,.h2,.h3,.h4 {
  font-family: 'Cormorant', Georgia, serif;
  font-weight: 300; letter-spacing: .04em; line-height: 1.1; color: var(--ink);
}
h1,.h1 { font-size: clamp(2.2rem,4.5vw,4.8rem); }
h2,.h2 { font-size: clamp(1.8rem,3.5vw,3.2rem); }
h3,.h3 { font-size: clamp(1.1rem,2vw,1.65rem); font-weight: 400; }
h4,.h4 { font-size: 1.05rem; font-weight: 400; }

a { color: var(--sage); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--sage-dark); }
p { color: var(--ink-2); }
strong, b { font-weight: 600; color: var(--ink); }
.text-muted, .text-sm-center { color: var(--ink-3) !important; }

/* ── Layout ────────────────────────────────────────────────── */
.container { max-width: 1340px; padding-inline: 2rem; }
#wrapper { padding-top: 2rem; }

/* Remove Bootstrap's negative row margins everywhere — prevents overflow */
.row { margin-left: 0 !important; margin-right: 0 !important; }

/* Main layout column padding */
#left-column  { padding-left: 0 !important; padding-right: 2rem !important; }
#right-column { padding-right: 0 !important; padding-left: 2rem !important; }
#content-wrapper { padding-left: 0 !important; padding-right: 0 !important; }

/* Product grid — grid override is in PRODUCT GRID section below */

/* ── ═══════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════ */

#header {
  position: sticky; top: 0; z-index: 900;
  background: rgba(247,245,240,.96);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--t) var(--ease);
}
#header.scrolled { box-shadow: 0 2px 32px rgba(25,27,23,.1); }

/* Banner */
.og-banner { background: var(--sage); color: #fff; text-align: center; padding: .35rem 1rem; font-size: .62rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
.og-banner a { color: #fff; }

/* ── Utility strip ── */
.og-strip {
  border-bottom: 1px solid var(--line);
  padding: .22rem 0;
}
.og-strip__inner {
  display: flex; align-items: center; justify-content: space-between; height: 28px;
}

/* displayNav1 content (contact info) */
.og-strip__left,
.og-strip__left * { font-size: .6rem !important; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3) !important; }
.og-strip__left a:hover { color: var(--sage) !important; }

/* displayNav2: lang/currency/user/cart */
.og-strip__right { display: flex; align-items: center; gap: .1rem; }
.og-strip__right .language-selector,
.og-strip__right .currency-selector,
.og-strip__right #_desktop_user_info,
.og-strip__right #_desktop_cart { display: flex; align-items: center; }
.og-strip__right a {
  font-size: .6rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); padding: .2rem .5rem; border-radius: var(--r);
  transition: color var(--t), background var(--t);
}
.og-strip__right a:hover { color: var(--sage); background: var(--sage-faint); }
.og-strip__right .cart-products-count {
  background: var(--sage); color: #fff; border-radius: 50%;
  width: 15px; height: 15px; font-size: .55rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; margin-left: .15rem;
}

/* ── Main header — LOGO CENTERED ── */
.og-header-main { padding: 1.1rem 0; }
.og-header-main__inner { display: flex; justify-content: center; align-items: center; }

/* Logo */
.og-logo { display: flex; justify-content: center; }
.og-logo__wrap { margin: 0; line-height: 1; }
.og-logo a, .og-logo img { display: block; }
.og-logo img { max-height: 52px; width: auto; }

/* If no image logo — text */
.og-logo a:not(:has(img)) {
  font-family: 'Cormorant', serif;
  font-size: 2rem; font-weight: 300; letter-spacing: .65em; text-transform: uppercase;
  color: var(--ink) !important; padding-right: .65em;
}
.og-logo a:not(:has(img)):hover { color: var(--ink) !important; }

/* Fallback for older browsers without :has() */
#_desktop_logo h1, #_desktop_logo div.og-logo__wrap {
  font-size: 0; /* hide PS's default h1 if no image */
}
#_desktop_logo img ~ * { display: none; }

/* ── Nav bar ── */
.og-nav-bar {
  border-top: 1px solid var(--line);
  padding: 0;
  background: transparent;
}
.og-nav-bar__inner { display: flex; align-items: center; justify-content: center; }

/* displayTop renders #_desktop_top_menu and #search_widget */
.og-nav-bar__menu { display: flex; align-items: center; justify-content: center; width: 100%; }

/* Menu itself */
#_desktop_top_menu { display: flex; align-items: center; justify-content: center; width: 100%; }
#_desktop_top_menu .top-menu, #_desktop_top_menu > ul {
  display: flex; align-items: center; list-style: none; padding: 0; margin: 0; gap: 0; flex-wrap: wrap;
}
#_desktop_top_menu .top-menu > li > a,
#_desktop_top_menu > ul > li > a {
  font-size: .65rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-3); padding: .7rem 1.1rem; display: block; white-space: nowrap;
  transition: color var(--t), background var(--t);
  border-bottom: 2px solid transparent;
}
#_desktop_top_menu .top-menu > li > a:hover,
#_desktop_top_menu .top-menu > li.current > a {
  color: var(--sage); border-bottom-color: var(--sage);
}
#_desktop_top_menu .sub-menu {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r2); box-shadow: var(--sh3); min-width: 175px;
  padding: .5rem 0; position: absolute; z-index: 200;
}
#_desktop_top_menu .sub-menu a {
  display: block; font-size: .7rem; color: var(--ink-2);
  padding: .48rem 1.2rem; letter-spacing: .06em;
  border-bottom: none !important; transition: all var(--t);
}
#_desktop_top_menu .sub-menu a:hover { color: var(--sage); background: var(--sage-faint); padding-left: 1.6rem; }

/* Search widget in nav bar */
#search_widget {
  flex-shrink: 0; margin-left: auto; padding: .4rem 0;
}
#search_widget input[type="text"] {
  background: var(--surface-2) !important; border: 1px solid var(--line) !important;
  border-radius: var(--pill) !important; color: var(--ink) !important;
  font-family: 'DM Sans', sans-serif; font-size: .76rem;
  padding: .42rem 2.4rem .42rem .9rem; min-width: 220px;
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
#search_widget input:focus { outline: none !important; border-color: var(--sage-mid) !important; background: var(--surface) !important; box-shadow: var(--glow) !important; }
#search_widget input::placeholder { color: var(--ink-4) !important; }
#search_widget button { position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--ink-3); cursor: pointer; }
#search_widget button:hover { color: var(--sage); }
#search_widget form { position: relative; }

/* Mobile bar */
.og-mobile-bar {
  display: flex; align-items: center; justify-content: space-between; width: 100%; padding: .4rem 0;
}
.og-mobile-bar__center { flex: 1; text-align: center; }
.og-mobile-bar__center img { max-height: 38px; }
.og-mobile-bar__left, .og-mobile-bar__right { flex: 0 0 auto; display: flex; align-items: center; gap: .3rem; }

/* Hamburger */
.og-hamburger { background: none; border: none; cursor: pointer; padding: .3rem; display: flex; flex-direction: column; gap: 5px; }
.og-hamburger span { display: block; width: 22px; height: 1.5px; background: var(--ink-2); transition: all var(--t) var(--ease); }
.og-hamburger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.og-hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.og-hamburger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile drawer */
.og-mobile-drawer { background: var(--surface); border-top: 1px solid var(--line); padding: .8rem 0; }
.og-mobile-drawer .top-menu { list-style: none; padding: 0; margin: 0; }
.og-mobile-drawer .top-menu a {
  display: block; padding: .7rem 1rem; font-size: .8rem;
  color: var(--ink-2); border-bottom: 1px solid var(--line);
  transition: color var(--t), padding-left var(--t);
}
.og-mobile-drawer .top-menu a:hover { color: var(--sage); padding-left: 1.4rem; }
.og-mobile-drawer__bottom { padding: .8rem 1rem 0; display: flex; gap: 1rem; }
.og-mobile-drawer__bottom a { font-size: .72rem; color: var(--ink-3); }

/* ── ═══════════════════════════════════════════════════════════
   HOMEPAGE HERO
   ═══════════════════════════════════════════════════════════ */

.og-hero {
  padding: 5.5rem 0 4rem; overflow: hidden;
  border-bottom: 1px solid var(--line); position: relative;
}
/* geometric circle accents */
.og-hero::before {
  content: ''; position: absolute; right: -6vw; top: -20%; pointer-events: none;
  width: 42vw; height: 42vw; border-radius: 50%; border: 1px solid var(--line-sage);
}
.og-hero::after {
  content: ''; position: absolute; right: 0; top: 15%; pointer-events: none;
  width: 28vw; height: 28vw; border-radius: 50%; border: 1px solid var(--sage-pale);
}
.og-hero__inner { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2rem; position: relative; z-index: 1; }
.og-hero__copy { max-width: 72%; }
.og-hero__eyebrow {
  font-size: .6rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase;
  color: var(--sage-mid); margin-bottom: 1.5rem;
  display: flex; align-items: center; gap: .8rem;
}
.og-hero__eyebrow::before { content: ''; width: 30px; height: 1px; background: var(--sage-mid); flex-shrink: 0; }

.og-hero__word {
  display: block; font-family: 'Cormorant', serif; font-weight: 300;
  font-size: clamp(5.5rem, 13vw, 13rem); line-height: .84; letter-spacing: -.01em; color: var(--ink);
}
.og-hero__word--outline { color: transparent; -webkit-text-stroke: 1px var(--line-sage); }

.og-hero__tagline {
  margin-top: 1.5rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
  font-family: 'Cormorant', serif; font-size: clamp(.95rem, 1.5vw, 1.22rem);
  font-weight: 300; font-style: italic; color: var(--ink-3); line-height: 1.68; max-width: 460px;
}
.og-hero__vert {
  writing-mode: vertical-rl; transform: rotate(180deg); align-self: center;
  font-size: .58rem; font-weight: 500; letter-spacing: .28em; text-transform: uppercase;
  color: var(--ink-4); padding-bottom: .4rem;
}

/* ── Marquee ── */
.og-marquee { overflow: hidden; background: var(--sage-faint); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: .62rem 0; }
.og-marquee__track { display: flex; width: max-content; animation: ticker 30s linear infinite; }
.og-marquee:hover .og-marquee__track { animation-play-state: paused; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.og-marquee__item {
  display: flex; align-items: center; gap: 2.5rem; padding: 0 2.5rem;
  font-size: .58rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap;
}
.og-marquee__item::after { content: '◇'; color: var(--sage-mid); font-size: .5rem; }

/* ── Section label ── */
.og-section-label {
  display: flex; align-items: center; gap: 1.5rem; padding: 2.5rem 0 1.5rem;
}
.og-section-label::before, .og-section-label::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.og-section-label span {
  font-size: .58rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-4); white-space: nowrap;
}

/* ── ═══════════════════════════════════════════════════════════
   PRODUCT GRID
   ═══════════════════════════════════════════════════════════ */

/* Override PS/Bootstrap columns */
.products { display: grid !important; grid-template-columns: repeat(3,1fr); gap: 3px; float: none !important; }
.products .js-product { width: auto !important; padding: 0 !important; float: none !important; }
.page-home .products .js-product:first-child { grid-column: span 2; }

/* Stagger */
.products .js-product { animation: cardFade .4s var(--spring) both; }
.products .js-product:nth-child(1) { animation-delay: .03s; }
.products .js-product:nth-child(2) { animation-delay: .07s; }
.products .js-product:nth-child(3) { animation-delay: .11s; }
.products .js-product:nth-child(4) { animation-delay: .15s; }
.products .js-product:nth-child(5) { animation-delay: .19s; }
.products .js-product:nth-child(6) { animation-delay: .22s; }
.products .js-product:nth-child(n+7) { animation-delay: .25s; }
@keyframes cardFade { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }

@media (max-width: 992px) { .products { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .products { grid-template-columns: 1fr; } .page-home .products .js-product:first-child { grid-column: span 1; } }

/* ── ═══════════════════════════════════════════════════════════
   PRODUCT CARD (new HTML structure)
   ═══════════════════════════════════════════════════════════ */

.product-miniature {
  background: var(--surface); border: 1px solid var(--line);
  display: flex; flex-direction: column; height: 100%;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t) var(--ease);
}
.product-miniature:hover {
  border-color: var(--line-sage); box-shadow: var(--sh3); transform: translateY(-4px); z-index: 3;
}

/* Image */
.og-card__image {
  position: relative; overflow: hidden; flex-shrink: 0;
  background: var(--surface-2);
  aspect-ratio: 1 / 1.08;
}
.page-home .products .js-product:first-child .og-card__image { aspect-ratio: 2.1 / 1.08; }

.og-card__img-link { display: block; height: 100%; }
.og-card__img-link img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .6s var(--ease);
}
.product-miniature:hover .og-card__img-link img { transform: scale(1.06); }

/* Sage line reveal on hover */
.og-card__image::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 2px; background: linear-gradient(90deg, var(--sage), var(--sage-light));
  transform: scaleX(0); transform-origin: left; transition: transform .38s var(--ease); z-index: 2;
}
.product-miniature:hover .og-card__image::after { transform: scaleX(1); }

/* Hover overlay */
.og-card__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(247,245,240,.92) 0%, transparent 55%);
  display: flex; align-items: flex-end; padding: .8rem 1rem;
  opacity: 0; transition: opacity var(--t) var(--ease); z-index: 3;
}
.product-miniature:hover .og-card__overlay { opacity: 1; }
.og-card__quickview {
  font-size: .6rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--sage) !important; display: inline-flex; align-items: center; gap: .3rem;
}

/* Product flags */
.product-flags { position: absolute; top: .75rem; left: .75rem; z-index: 4; display: flex; flex-direction: column; gap: .22rem; }
.product-flag {
  font-size: .57rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: .18rem .55rem; border-radius: var(--pill); background: var(--sage); color: #fff; line-height: 1.6;
}
.product-flag.new { background: var(--sage-mid); }
.product-flag.sale, .product-flag.on-sale { background: var(--red); }
.product-flag.pack { background: var(--amber); }

/* Info area */
.og-card__info {
  padding: .85rem 1rem 1rem; flex: 1; display: flex; flex-direction: column;
  border-top: 1px solid var(--line);
}
.og-card__name { flex: 1; margin-bottom: .5rem; }
.og-card__name h2, .og-card__name h3 {
  font-family: 'Cormorant', serif; font-size: 1.08rem; font-weight: 400;
  line-height: 1.2; letter-spacing: .02em; margin: 0;
}
.og-card__name a { color: var(--ink); transition: color var(--t); }
.og-card__name a:hover { color: var(--sage); }

.og-card__footer { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.og-card__price { display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; }
.og-card__price-current { font-size: .9rem; font-weight: 500; color: var(--sage); font-family: 'DM Sans', sans-serif; letter-spacing: .02em; }
.og-card__price-old { font-size: .76rem; color: var(--ink-4); text-decoration: line-through; }
.og-card__badge {
  font-size: .57rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  background: var(--sage-pale); color: var(--sage-dark); padding: .12rem .45rem; border-radius: var(--pill);
}

/* Variants (colour swatches) */
.variant-links { display: flex; gap: .3rem; flex-wrap: wrap; }
.color { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid rgba(0,0,0,.08); display: inline-block; }

/* ── ═══════════════════════════════════════════════════════════
   SORT / FILTER BAR
   ═══════════════════════════════════════════════════════════ */

#js-product-list-top { margin-bottom: 1.2rem; }
.products-selection {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r2);
  padding: .65rem 1rem;
}
.sort-by { font-size: .62rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-4); white-space: nowrap; }

.products-sort-order { position: relative; }
.products-sort-order .select-title, .btn-unstyle.select-title {
  display: flex; align-items: center; gap: .4rem; cursor: pointer;
  font-family: 'DM Sans', sans-serif; font-size: .76rem; font-weight: 500; color: var(--ink-2);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--pill);
  padding: .38rem .9rem; transition: border-color var(--t), background var(--t);
}
.products-sort-order .select-title:hover { border-color: var(--sage-mid); background: var(--sage-faint); }
.products-sort-order .select-title .material-icons { font-size: .9rem; color: var(--ink-3); }

.products-sort-order .dropdown-menu {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r2);
  box-shadow: var(--sh3); padding: .5rem 0; min-width: 210px; z-index: 300;
}
.products-sort-order .dropdown-menu a {
  display: block; font-size: .78rem; color: var(--ink-2); padding: .5rem 1.1rem;
  transition: all var(--t);
}
.products-sort-order .dropdown-menu a:hover, .products-sort-order .dropdown-menu a.current {
  color: var(--sage); background: var(--sage-faint); padding-left: 1.5rem;
}
.products-sort-order .dropdown-menu a.current { font-weight: 500; }

.showing-products p, .total-products p {
  font-size: .65rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-4); margin: 0;
}

/* ── ═══════════════════════════════════════════════════════════
   BREADCRUMB
   ═══════════════════════════════════════════════════════════ */

nav.breadcrumb { background: none; border: none; padding: .6rem 0; margin-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
nav.breadcrumb ol { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem; list-style: none; padding: 0; margin: 0; }
nav.breadcrumb li { font-size: .6rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); display: flex; align-items: center; gap: .25rem; }
nav.breadcrumb li + li::before { content: '—'; color: var(--ink-5); }
nav.breadcrumb li a { color: var(--ink-3); transition: color var(--t); }
nav.breadcrumb li a:hover { color: var(--sage); }
nav.breadcrumb li span { color: var(--ink-3); }

/* ── ═══════════════════════════════════════════════════════════
   CATEGORY HEADER
   ═══════════════════════════════════════════════════════════ */

#js-product-list-header { margin-bottom: 2rem; }
.block-category { background: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; }
.block-category .h1 {
  font-size: clamp(2.4rem,5vw,4.8rem); font-weight: 300; letter-spacing: .08em;
  padding-bottom: 1rem; margin-bottom: 1.2rem; border-bottom: 1px solid var(--line);
}
.block-category-inner { display: flex; gap: 2rem; align-items: flex-start; }
#category-description { color: var(--ink-3) !important; font-size: .9rem; line-height: 1.82; flex: 1; }
.block-category .category-cover {
  width: 220px; flex-shrink: 0; border-radius: var(--r2); overflow: hidden; border: 1px solid var(--line);
}
.block-category .category-cover img { width: 100%; display: block; }

/* ── ═══════════════════════════════════════════════════════════
   PRODUCT PAGE
   ═══════════════════════════════════════════════════════════ */

.page-product #content-wrapper { background: var(--bg); }
.product-container {
  padding: 1.5rem 0 2rem;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: start;
}
.product-container > [class*="col-"] {
  padding: 0 !important; width: auto !important; max-width: none !important; flex: none !important;
}

/* Images column */
.product-cover { border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden; background: var(--surface-2); }
.product-cover img { width: 100%; display: block; }
.product-cover .layer { background: transparent; }
.product-cover .layer .material-icons { color: var(--sage); font-size: 1.8rem; }

#product-images-thumbs { display: flex; gap: 4px; margin-top: 4px; }
.thumb-container { flex: 1; border: 1.5px solid var(--line); border-radius: var(--r); overflow: hidden; cursor: pointer; transition: border-color var(--t); }
.thumb-container:hover, .thumb-container.selected { border-color: var(--sage-mid); }
.thumb-container img { width: 100%; display: block; }
.scroll-box-arrows { display: none; }

/* Info column */
.page-product h1 { font-size: clamp(2rem,3.5vw,3rem); font-weight: 300; letter-spacing: .06em; line-height: 1.05; margin-bottom: .5rem; }

/* Price */
.product-prices { margin-bottom: 1.2rem; }
.product-prices .product-price { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; margin-bottom: .3rem; }
.current-price { display: flex; align-items: baseline; gap: .6rem; }
.current-price-value { font-family: 'Cormorant', serif; font-size: 2.2rem; font-weight: 300; color: var(--sage); letter-spacing: .04em; }
.product-prices .regular-price { font-size: 1.1rem; color: var(--ink-4); text-decoration: line-through; font-family: 'DM Sans', sans-serif; }
.product-prices .discount, .product-prices .discount-percentage, .product-prices .discount-amount {
  font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  background: var(--sage-pale); color: var(--sage-dark); padding: .2rem .6rem; border-radius: var(--pill);
}
.tax-shipping-delivery-label { font-size: .72rem; color: var(--ink-3); margin-top: .3rem; line-height: 1.6; }
.tax-shipping-delivery-label a { color: var(--ink-3); text-decoration: underline; }
.delivery-information { display: block; }

/* Short desc */
.product-information > .product-description { color: var(--ink-2); font-size: .92rem; line-height: 1.82; margin: 1rem 0; }

/* Variants */
.product-variants { margin: 1.2rem 0; }
.product-variants .control-label { display: block; font-size: .6rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .55rem; }
.product-variants-item { margin-bottom: .9rem; }
.product-variants-item input[type="radio"] { display: none; }
.product-variants-item input[type="radio"] + label {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 .8rem;
  border: 1.5px solid var(--line); border-radius: var(--r2); cursor: pointer;
  font-size: .84rem; color: var(--ink-2); margin-right: .4rem;
  transition: border-color var(--t), background var(--t);
}
.product-variants-item input[type="radio"] + label:hover { border-color: var(--sage-mid); background: var(--sage-faint); }
.product-variants-item input[type="radio"]:checked + label { border-color: var(--sage); background: var(--sage-faint); color: var(--sage-dark); font-weight: 600; }
.color { width: 30px !important; height: 30px !important; min-width: unset !important; padding: 0 !important; border-radius: 50% !important; }

/* Add to cart */
.product-add-to-cart { margin-top: 1.5rem; }
.product-add-to-cart > .control-label { font-size: .6rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: .65rem; }
.product-quantity { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }

.qty {
  display: flex; align-items: center; overflow: hidden;
  border: 1.5px solid var(--line); border-radius: var(--pill); background: var(--surface);
  transition: border-color var(--t), box-shadow var(--t);
}
.qty:focus-within { border-color: var(--sage-mid); box-shadow: var(--glow); }
.qty input#quantity_wanted {
  width: 52px; text-align: center; font-family: 'DM Sans', sans-serif; font-size: .95rem; font-weight: 500;
  background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important;
  color: var(--ink); padding: .52rem .2rem; -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.bootstrap-touchspin-up, .bootstrap-touchspin-down {
  background: transparent; border: none; color: var(--ink-3); padding: .52rem .65rem; cursor: pointer; font-size: .95rem; transition: color var(--t), background var(--t);
}
.bootstrap-touchspin-up:hover, .bootstrap-touchspin-down:hover { color: var(--sage); background: var(--sage-faint); }

/* Availability */
#product-availability { margin-top: .8rem; }
#product-availability .alert {
  display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .9rem;
  border-radius: var(--pill); font-size: .72rem; font-weight: 500; letter-spacing: .04em; margin: 0;
}
#product-availability .alert-content-wrapper { display: flex; align-items: center; gap: .4rem; }
#product-availability .alert-success { background: #ecf7ed; border: 1.5px solid var(--sage-pale); color: var(--sage-dark); }
#product-availability .alert-warning { background: #fdf6e3; border: 1.5px solid #ecd98a; color: var(--amber); }
#product-availability .alert-danger { background: #fdf0ef; border: 1.5px solid #f2b8b4; color: var(--red); }
#product-availability .material-icons { font-size: 1rem; }
.product-minimal-quantity { font-size: .72rem; color: var(--ink-3); margin-top: .5rem; }

/* Reassurance */
.block-reassurance { margin-top: 1.8rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.block-reassurance ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .65rem; }
.block-reassurance li { display: flex; align-items: center; gap: .65rem; font-size: .82rem; color: var(--ink-3); }
.block-reassurance li .material-icons, .block-reassurance li img { color: var(--sage); font-size: 1.1rem; flex-shrink: 0; width: 20px; }

/* Tabs */
.tabs { margin-top: 2.5rem; }
.tabs .nav-tabs { border-bottom: 1.5px solid var(--line); display: flex; gap: 0; margin-bottom: 1.8rem; }
.tabs .nav-tabs .nav-link {
  font-size: .62rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-3); border: none; border-bottom: 2.5px solid transparent;
  padding: .75rem 1.4rem; border-radius: 0; transition: color var(--t), border-color var(--t);
}
.tabs .nav-tabs .nav-link:hover { color: var(--sage); }
.tabs .nav-tabs .nav-link.active { color: var(--sage); border-bottom-color: var(--sage); }
.tabs .tab-content { font-size: .92rem; color: var(--ink-2); line-height: 1.85; }
.tabs .tab-pane { padding: .3rem 0; }

/* Product details table */
.table.product-details-feature-list { border-collapse: collapse; width: 100%; }
.table.product-details-feature-list th, .table.product-details-feature-list td { padding: .6rem .4rem; font-size: .86rem; border-bottom: 1px solid var(--line); }
.table.product-details-feature-list th { font-weight: 500; color: var(--ink-3); width: 42%; }
.table.product-details-feature-list td { color: var(--ink); }
.table.product-details-feature-list tr:last-child th, .table.product-details-feature-list tr:last-child td { border-bottom: none; }

/* Accessories */
.product-accessories { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--line); }

/* ── ═══════════════════════════════════════════════════════════
   FACETS
   ═══════════════════════════════════════════════════════════ */

#search_filters, #search_filters_wrapper {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r2); padding: 1.2rem;
}
.facet { border-top: 1px solid var(--line); padding: 1rem 0; }
.facet:first-child { border-top: none; padding-top: 0; }
.facet-title { font-size: .62rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .7rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.facet-title .material-icons { font-size: .9rem; color: var(--ink-4); }
.facet-label { display: flex; align-items: center; gap: .5rem; font-size: .84rem; color: var(--ink-2); padding: .25rem 0; cursor: pointer; transition: color var(--t); }
.facet-label:hover { color: var(--sage); }
.facet-label input[type="checkbox"] { accent-color: var(--sage); width: 14px; height: 14px; flex-shrink: 0; }
.facet-label .magnitude { color: var(--ink-4); font-size: .72rem; margin-left: auto; }
.active-filters { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.filter-block {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .65rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sage-dark); background: var(--sage-pale); padding: .28rem .7rem; border-radius: var(--pill);
}
.filter-block .material-icons { font-size: .75rem; cursor: pointer; }
.js-search-filters-clear-all { font-size: .65rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--red); }

/* ── ═══════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════ */

.btn, button, input[type="submit"], input[type="button"] {
  font-family: 'DM Sans', sans-serif; font-size: .65rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; border-radius: var(--pill);
  transition: all var(--t) var(--ease); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
}
.btn-primary, .add-to-cart, [data-button-action="add-to-cart"] {
  background: var(--sage); color: #fff !important; border: 1.5px solid var(--sage);
  padding: .82rem 2.2rem; position: relative; overflow: hidden;
}
.btn-primary::after, .add-to-cart::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
  transform: translateX(-100%); transition: transform .5s var(--ease);
}
.btn-primary:hover::after, .add-to-cart:hover::after { transform: translateX(100%); }
.btn-primary:hover, .add-to-cart:hover {
  background: var(--sage-dark); border-color: var(--sage-dark); color: #fff !important;
  transform: translateY(-1px); box-shadow: 0 6px 22px rgba(71,113,90,.28);
}
.btn-primary:active, .add-to-cart:active { transform: none; box-shadow: none; }
.btn-primary:disabled, .add-to-cart:disabled { background: var(--ink-5) !important; border-color: var(--ink-5) !important; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-secondary, .btn-outline-secondary {
  background: transparent; color: var(--ink-3) !important;
  border: 1.5px solid var(--line); padding: .78rem 1.8rem;
}
.btn-secondary:hover, .btn-outline-secondary:hover { border-color: var(--sage-mid); color: var(--sage) !important; background: var(--sage-faint); }

.btn-link { background: none; border: none; padding: 0; color: var(--sage); font-size: inherit; font-weight: 500; letter-spacing: 0; text-transform: none; border-radius: 0; }
.btn-link:hover { color: var(--sage-dark); text-decoration: underline; }
.btn-unstyle { background: none; border: none; padding: 0; cursor: pointer; letter-spacing: 0; text-transform: none; font-size: inherit; border-radius: 0; }

/* ── ═══════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════ */

.form-control, input[type="text"], input[type="email"], input[type="password"], input[type="tel"], textarea, select {
  background: var(--surface-2) !important; border: 1.5px solid var(--line) !important;
  border-radius: var(--r2) !important; color: var(--ink) !important;
  font-family: 'DM Sans', sans-serif; font-size: .88rem; padding: .65rem .9rem; width: 100%;
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
.form-control:focus, input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, textarea:focus, select:focus {
  outline: none !important; border-color: var(--sage-mid) !important;
  box-shadow: var(--glow) !important; background: var(--surface) !important;
}
input::placeholder, .form-control::placeholder { color: var(--ink-5) !important; }
label, .form-group label, .form-label {
  font-size: .62rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: .4rem; display: block;
}
.form-group { margin-bottom: 1.1rem; }
.form-error, .form-errors, .alert-danger li { color: var(--red); font-size: .78rem; margin-top: .3rem; }
.custom-checkbox, .custom-radio { display: flex; align-items: flex-start; gap: .5rem; cursor: pointer; }
.custom-checkbox input, .custom-radio input { accent-color: var(--sage); margin-top: .18rem; flex-shrink: 0; }
.custom-checkbox label, .custom-radio label { font-size: .86rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-2); cursor: pointer; margin: 0; }

/* ── ═══════════════════════════════════════════════════════════
   NOTIFICATIONS
   ═══════════════════════════════════════════════════════════ */

#notifications { padding: .8rem 0; }
#notifications .alert {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .88rem 1.1rem; border-radius: var(--r2); border: 1.5px solid;
  font-size: .86rem; margin-bottom: .4rem;
}
#notifications .alert ul { list-style: none; padding: 0; margin: 0; }
#notifications .alert-success { background: #ecf7ed; border-color: var(--sage-pale); color: var(--sage-dark); }
#notifications .alert-danger { background: #fdf0ef; border-color: #f2b8b4; color: var(--red); }
#notifications .alert-warning { background: #fdf6e3; border-color: #ead998; color: var(--amber); }
#notifications .alert-info { background: #edf4fb; border-color: #a8cde8; color: #1a5c8a; }

/* ── ═══════════════════════════════════════════════════════════
   CART
   ═══════════════════════════════════════════════════════════ */

.cart-item {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r2);
  padding: 1.1rem; display: flex; gap: 1rem; align-items: flex-start; margin-bottom: .5rem;
  transition: border-color var(--t), box-shadow var(--t);
}
.cart-item:hover { border-color: var(--line-sage); box-shadow: var(--sh1); }
.cart-item .product-image { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); flex-shrink: 0; }
.cart-item .product-image img { width: 88px; height: 88px; object-fit: cover; display: block; }
.cart-item .product-line-info .label { font-size: .6rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.cart-item .product-line-info .value { font-size: .86rem; color: var(--ink); }
.cart-item .current-price-value, .cart-item .price { font-size: .9rem; font-weight: 500; color: var(--sage); }

.cart-summary {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r2); padding: 1.4rem; position: sticky; top: 110px;
}
.cart-summary-line {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: .45rem 0; border-bottom: 1px solid var(--line); font-size: .88rem; color: var(--ink-2);
}
.cart-summary-line:last-of-type { border-bottom: none; font-weight: 600; color: var(--ink); font-size: .96rem; }
.cart-summary-line .value { color: var(--sage); }
.proceed-to-checkout .btn { width: 100%; padding: .95rem; font-size: .7rem; margin-top: 1rem; }

/* ── ═══════════════════════════════════════════════════════════
   CHECKOUT
   ═══════════════════════════════════════════════════════════ */

.checkout-step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r2); margin-bottom: .8rem; overflow: hidden; }
.checkout-step .step-title {
  display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.4rem;
  font-size: .65rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); cursor: pointer;
  border-bottom: 1px solid var(--line); transition: background var(--t);
}
.checkout-step .step-title:hover { background: var(--surface-2); }
.checkout-step.-current .step-title { color: var(--sage); }
.step-number {
  width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid currentColor;
  display: flex; align-items: center; justify-content: center; font-size: .65rem; font-weight: 700; flex-shrink: 0;
}
.-complete .step-number { background: var(--sage); border-color: var(--sage); color: #fff; }
.checkout-step .step-content { padding: 1.5rem 1.4rem; }

/* ── ═══════════════════════════════════════════════════════════
   PAGINATION
   ═══════════════════════════════════════════════════════════ */

.pagination { display: flex; gap: 4px; margin-top: 3rem; flex-wrap: wrap; }
.page-link {
  background: var(--surface) !important; border: 1.5px solid var(--line) !important; border-radius: var(--pill) !important;
  color: var(--ink-3) !important; font-size: .65rem; font-weight: 600; letter-spacing: .1em;
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; transition: all var(--t);
}
.page-link:hover { border-color: var(--sage-mid) !important; color: var(--sage) !important; }
.page-item.active .page-link { background: var(--sage) !important; border-color: var(--sage) !important; color: #fff !important; }
.page-item.disabled .page-link { opacity: .4; cursor: not-allowed; }

/* ── ═══════════════════════════════════════════════════════════
   ALERTS
   ═══════════════════════════════════════════════════════════ */

.alert { background: var(--surface-2); border: 1.5px solid var(--line); border-radius: var(--r2); color: var(--ink-2); font-size: .86rem; padding: .85rem 1rem; }
.alert-success { border-left: 3px solid var(--sage); }
.alert-danger, .alert-warning { border-left: 3px solid var(--red); }
.alert-info { border-left: 3px solid #2874a6; }

/* ── ═══════════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════════ */

.table { width: 100%; border-collapse: collapse; }
.table th { font-size: .6rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1.5px solid var(--line); padding: .7rem .8rem; background: var(--surface-2); }
.table td { padding: .7rem .8rem; border-bottom: 1px solid var(--line); font-size: .88rem; color: var(--ink-2); }
.table tr:last-child td { border-bottom: none; }

/* ── ═══════════════════════════════════════════════════════════
   CARDS (PS generic)
   ═══════════════════════════════════════════════════════════ */

.card { background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: var(--r2) !important; box-shadow: var(--sh1); color: var(--ink); }
.card-block { padding: 1.4rem !important; }

/* ── ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */

#footer { background: var(--surface-2); border-top: 1px solid var(--line); margin-top: 6rem; }
.footer-container { padding: 3.5rem 0 0; }

/* ── Main footer row: 4 columns (6+3+3) ── */
.footer-container > .container > .row:first-child {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 0 2.5rem;
  align-items: start;
}

/* Hide blockwishlist modals that land in footer row — they break the grid */
.footer-container .wishlist-add-to,
.footer-container .wishlist-delete,
.footer-container .wishlist-create,
.footer-container .wishlist-login,
.footer-container .wishlist-toast { display: none !important; }

/* ps_linklist wraps two cols in its own nested row — undo that nesting */
.footer-container .col-md-6.links {
  display: contents; /* dissolve the col-md-6 wrapper, expose the two inner cols to the grid */
}
.footer-container .col-md-6.links > .row {
  display: contents; /* also dissolve the inner row */
}
/* Each inner wrapper becomes a direct grid child */
.footer-container .col-md-6.links > .row > .wrapper { padding: 0; }

/* All footer column wrappers */
.footer-container .wrapper,
.footer-container .block-contact,
#block_myaccount_infos { padding: 0; }

/* ── Footer column headings ── */
.footer-container .h3,
.footer-container .h4,
.footer-container .myaccount-title,
.footer-container .block-contact-title,
.footer-container p.h3,
.footer-container p.h4 {
  font-family: 'DM Sans', sans-serif !important;
  font-size: .58rem !important;
  font-weight: 700 !important;
  letter-spacing: .26em !important;
  text-transform: uppercase !important;
  color: var(--ink-3) !important;
  margin-bottom: 1.1rem !important;
  line-height: 1.4 !important;
}
.footer-container .myaccount-title a { color: var(--ink-3) !important; }
.footer-container .myaccount-title a:hover { color: var(--sage) !important; }

/* ── Mobile collapse titles — hidden on desktop ── */
.footer-container .title.hidden-md-up { display: none; }

/* ── Footer link lists — SHOW on desktop (Bootstrap hides .collapse) ── */
.footer-container ul.collapse,
.footer-container .account-list.collapse,
.footer-container #contact-infos.collapse {
  display: block !important;
}

/* ── Link styling ── */
.footer-container ul { list-style: none; padding: 0; margin: 0; }
.footer-container ul li { padding: 0; border: none; }
.footer-container ul li a {
  display: block; padding: .28rem 0;
  font-size: .82rem; color: var(--ink-3);
  transition: color var(--t), padding-left var(--t);
  line-height: 1.6;
}
.footer-container ul li a:hover { color: var(--sage); padding-left: 4px; }

/* Contact info text */
.footer-container .block-contact #contact-infos {
  font-size: .82rem; color: var(--ink-3); line-height: 1.8;
}
.footer-container .block-contact #contact-infos a { color: var(--sage); display: inline; padding: 0; }

/* ── Copyright row ── */
.footer-container > .container > .row:last-child {
  border-top: 1px solid var(--line); margin-top: 2.8rem; padding: 1.4rem 0;
  display: flex !important; justify-content: center; align-items: center;
}
.footer-container .text-sm-center { text-align: center; width: 100%; }
.footer-container .text-sm-center span,
.footer-container .text-sm-center a {
  font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4);
}

/* Newsletter */
.block_newsletter label { font-family: 'Cormorant', serif; font-size: 1.05rem; font-style: italic; font-weight: 300; color: var(--ink-2); text-transform: none; letter-spacing: 0; margin-bottom: .6rem; }
.block_newsletter .input-group { display: flex; border: 1.5px solid var(--line); border-radius: var(--pill); overflow: hidden; background: var(--surface); }
.block_newsletter input[type="email"] { background: transparent !important; border: none !important; border-radius: 0 !important; flex: 1; padding: .58rem 1rem; box-shadow: none !important; }
.block_newsletter .btn { background: var(--sage); color: #fff; border: none; border-radius: var(--pill); flex-shrink: 0; padding: .58rem 1.3rem; font-size: .6rem; letter-spacing: .18em; transition: background var(--t); }
.block_newsletter .btn:hover { background: var(--sage-dark); color: #fff; }

/* Social */
.social-sharing a, .social-link { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1.5px solid var(--line); border-radius: 50%; color: var(--ink-3); transition: all var(--t); }
.social-sharing a:hover, .social-link:hover { border-color: var(--sage-mid); color: var(--sage); background: var(--sage-faint); }

/* ── ═══════════════════════════════════════════════════════════
   UTILS
   ═══════════════════════════════════════════════════════════ */

.material-icons { color: inherit; font-size: inherit; vertical-align: middle; line-height: 1; }
::selection { background: var(--sage-pale); color: var(--sage-dark); }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }

/* ── ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

/* ── ═══════════════════════════════════════════════════════════
   FEATURED PRODUCTS MODULE + HOME HOOKS
   ═══════════════════════════════════════════════════════════ */

/* Featured products and similar hook blocks */
.featured-products, .new-products, .best-sales {
  padding: 0; margin: 0;
}
.featured-products > .container, .new-products > .container, .best-sales > .container {
  padding-inline: 2rem;
}

/* Module section header → mimic og-section-label */
.block-section-header, .featured-products header, .new-products header {
  display: flex; align-items: center; gap: 1.5rem;
  padding: 2rem 0 1.4rem;
}
.block-section-header::before, .block-section-header::after,
.featured-products header::before, .featured-products header::after {
  content: ''; flex: 1; height: 1px; background: var(--line);
}
.block-section-header__title, .featured-products header h2, .new-products header h2 {
  font-size: .58rem !important; font-weight: 600 !important; letter-spacing: .3em !important;
  text-transform: uppercase; color: var(--ink-4) !important; white-space: nowrap;
  font-family: 'DM Sans', sans-serif !important;
}

/* "All products" link */
.all-product-link { text-align: center; padding: 2.2rem 0 1rem; }
.all-product-link a {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .62rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-3); border-bottom: 1px solid var(--line); padding-bottom: .15rem;
  transition: color var(--t), border-color var(--t);
}
.all-product-link a:hover { color: var(--sage); border-color: var(--sage-light); }

/* Wrapper section (PS9 featured products) */
.page-home #content .products-section-title {
  font-size: .58rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink-4); text-align: center; margin: 0; font-family: 'DM Sans', sans-serif !important;
}

/* ── ═══════════════════════════════════════════════════════════
   SUBCATEGORIES
   ═══════════════════════════════════════════════════════════ */

#subcategories { background: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin-bottom: 2rem; }
.subcategory-heading {
  font-family: 'Cormorant', serif; font-size: 1.1rem; font-weight: 400; letter-spacing: .08em;
  color: var(--ink-3); margin-bottom: 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line);
}
.subcategories-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1rem; }
.subcategories-list li { text-align: center; }
.subcategory-image { border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden; aspect-ratio: 1; background: var(--surface-2); transition: border-color var(--t), box-shadow var(--t); }
.subcategory-image:hover { border-color: var(--line-sage); box-shadow: var(--sh2); }
.subcategory-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.subcategory-image:hover img { transform: scale(1.05); }
.subcategory-name { font-size: .76rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); transition: color var(--t); display: block; padding: .5rem 0 .2rem; }
.subcategory-name:hover { color: var(--sage); }
.cat_desc { font-size: .72rem; color: var(--ink-4); line-height: 1.5; }

/* ── ═══════════════════════════════════════════════════════════
   ACCOUNT / MY PAGES
   ═══════════════════════════════════════════════════════════ */

.page-customer-account #content-wrapper .card,
.page-order-detail #content-wrapper .card,
.page-history #content-wrapper .card,
.page-addresses #content-wrapper .card,
.page-identity #content-wrapper .card {
  border: 1px solid var(--line) !important;
  border-radius: var(--r2) !important;
  box-shadow: var(--sh1) !important;
  background: var(--surface) !important;
}

/* Account links grid */
.page-customer-account .links { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; list-style: none; padding: 0; margin: 0; }
.page-customer-account .links a {
  display: flex; flex-direction: column; align-items: center; gap: .7rem; text-align: center;
  padding: 1.5rem 1rem; border: 1.5px solid var(--line); border-radius: var(--r2);
  background: var(--surface); color: var(--ink-2); font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  transition: all var(--t);
}
.page-customer-account .links a:hover { border-color: var(--line-sage); color: var(--sage); background: var(--sage-faint); transform: translateY(-2px); box-shadow: var(--sh2); }
.page-customer-account .links .material-icons { font-size: 1.8rem; color: var(--sage-light); transition: color var(--t); }
.page-customer-account .links a:hover .material-icons { color: var(--sage); }

/* ── ═══════════════════════════════════════════════════════════
   CMS / CONTENT PAGES
   ═══════════════════════════════════════════════════════════ */

.page-cms .page-content, .page-contact .page-content {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r2) !important;
  padding: 2rem 2.5rem !important;
  box-shadow: var(--sh1);
}
.page-cms h1, .page-contact h1 { margin-bottom: 1.8rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line); }
.page-cms .page-content p, .page-contact .page-content p { font-size: .92rem; line-height: 1.88; margin-bottom: 1rem; }
.page-cms .page-content a { color: var(--sage); text-decoration: underline; }

/* ── ═══════════════════════════════════════════════════════════
   BACK TO TOP / MISC
   ═══════════════════════════════════════════════════════════ */

.up { margin-top: 1.5rem; }
.up .btn-secondary {
  font-size: .6rem; letter-spacing: .18em; color: var(--ink-4) !important;
  border-color: var(--line) !important; padding: .5rem 1.2rem; background: transparent;
}
.up .btn-secondary:hover { color: var(--sage) !important; border-color: var(--sage-light) !important; }

/* ── ═══════════════════════════════════════════════════════════
   QUICKVIEW MODAL
   ═══════════════════════════════════════════════════════════ */

#quickview-modal .modal-content {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r3);
  box-shadow: var(--sh3); overflow: hidden;
}
#quickview-modal .modal-header { border-bottom: 1px solid var(--line); padding: 1rem 1.5rem; }
#quickview-modal .modal-header .close { background: none; border: none; font-size: 1.2rem; color: var(--ink-3); cursor: pointer; transition: color var(--t); }
#quickview-modal .modal-header .close:hover { color: var(--ink); }
#quickview-modal .modal-body { padding: 1.5rem; }
.modal-backdrop { background: rgba(25,27,23,.6) !important; backdrop-filter: blur(6px); }

/* ── ═══════════════════════════════════════════════════════════
   AUTH PAGES — Login, Register, Forgot Password
   ═══════════════════════════════════════════════════════════ */

/* Auth page wrapper — constrained card */
.page-authentication #content-wrapper,
.page-password-recovery #content-wrapper {
  max-width: 540px; margin: 0 auto; padding: 0 !important;
}

/* Card wrapper */
.page-content.card.card-block,
.login-form, .register-form {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r3) !important;
  padding: 2.5rem !important;
  box-shadow: var(--sh2) !important;
}

/* Override Bootstrap horizontal form (col-md-3 label + col-md-6 input) → stacked */
.form-group.row {
  flex-direction: column !important;
  margin: 0 0 1.2rem 0 !important;
}
.form-group.row > [class*="col-"] {
  display: block !important;
  padding: 0 !important; width: 100% !important; max-width: 100% !important;
  flex: none !important; float: none !important; text-align: left !important;
}
/* Label element itself — must be block + left-aligned */
.form-control-label,
label.form-control-label,
.form-group label {
  display: block !important;
  text-align: left !important;
  font-size: .6rem !important; font-weight: 600 !important; letter-spacing: .2em !important;
  text-transform: uppercase !important; color: var(--ink-3) !important;
  margin-bottom: .45rem !important; margin-left: 0 !important;
  padding: 0 !important; width: 100% !important;
}
.form-control-comment { font-size: .72rem; color: var(--ink-4); margin-top: .3rem; text-align: left !important; }

/* Input group (password with show/hide) */
.input-group.js-parent-focus {
  display: flex !important; align-items: stretch;
  border: 1.5px solid var(--line) !important; border-radius: var(--r2) !important;
  overflow: hidden; background: var(--surface-2);
  transition: border-color var(--t), box-shadow var(--t);
}
.input-group.js-parent-focus:focus-within {
  border-color: var(--sage-mid) !important; box-shadow: var(--glow) !important; background: var(--surface) !important;
}
.input-group.js-parent-focus .form-control {
  border: none !important; border-radius: 0 !important; background: transparent !important;
  box-shadow: none !important; flex: 1; padding: .65rem .9rem !important;
}
.input-group.js-parent-focus:focus-within .form-control { background: transparent !important; box-shadow: none !important; }
.input-group-btn {
  display: flex; align-items: center; flex-shrink: 0;
  border-left: 1px solid var(--line); background: transparent;
}
.input-group-btn .btn {
  background: none !important; border: none !important; border-radius: 0 !important;
  font-size: .6rem !important; font-weight: 600 !important; letter-spacing: .12em !important; text-transform: uppercase !important;
  color: var(--ink-4) !important; padding: .65rem .9rem !important; cursor: pointer;
  transition: color var(--t) !important; white-space: nowrap;
}
.input-group-btn .btn:hover { color: var(--sage) !important; }

/* Forgot password */
.forgot-password { text-align: right; margin-top: .4rem; }
.forgot-password a {
  font-size: .65rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-4); transition: color var(--t);
}
.forgot-password a:hover { color: var(--sage); }

/* Form footer */
.form-footer { text-align: center !important; margin-top: 1.8rem; clear: both; }
.form-footer .btn-primary { width: 100%; justify-content: center; padding: .9rem 2rem; }

/* Divider */
hr { border: none; border-top: 1px solid var(--line); margin: 1.8rem 0; }

/* No account / register link */
.no-account { text-align: center; }
.no-account a {
  font-size: .72rem; color: var(--ink-3); transition: color var(--t);
}
.no-account a:hover { color: var(--sage); }

/* Section heading in auth forms */
.login-form h4, .register-form h4, .login-form h3, .register-form h3 {
  font-family: 'Cormorant', serif; font-size: 1.6rem; font-weight: 300; letter-spacing: .08em;
  color: var(--ink); margin-bottom: 1.8rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line);
}

/* Registration page — two columns side by side */
.page-authentication .register-form .row {
  display: grid !important; grid-template-columns: 1fr 1fr; gap: 0 2rem;
}
.page-authentication .register-form .row > .login-form { grid-column: 1; }

/* ── ═══════════════════════════════════════════════════════════
   SEARCH PAGE
   ═══════════════════════════════════════════════════════════ */

.page-search #search_filters_wrapper { margin-bottom: 1.5rem; }
#search-filter-controls { display: none; }

/* ── ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 991px) {
  .container { padding-inline: 1.2rem; }
  .block-category-inner { flex-direction: column; }
  .block-category .category-cover { width: 100%; max-width: 300px; }
  #left-column { padding-right: 1.2rem !important; }
  .subcategories-list { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .og-hero { padding: 3rem 0 2.5rem; }
  .og-hero__word { font-size: clamp(3.5rem,17vw,6rem); }
  .og-hero__inner { grid-template-columns: 1fr; }
  .og-hero__vert, .og-hero::before, .og-hero::after { display: none; }
  .products { grid-template-columns: repeat(2,1fr); }
  .page-home .products .js-product:first-child { grid-column: span 2; }
  /* Collapse sidebar on mobile */
  #left-column { padding: 0 !important; width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }
  #content-wrapper.left-column { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }
  #search_filters { display: none; }
  #search_filters.open { display: block; }
  .subcategories-list { grid-template-columns: repeat(2, 1fr); }
  /* Product detail stacked layout */
  .product-container { grid-template-columns: 1fr !important; gap: 2rem !important; }
}
@media (max-width: 480px) {
  .container { padding-inline: .9rem; }
  .products { gap: 2px; }
  .page-cms .page-content, .page-contact .page-content { padding: 1.4rem !important; }
}