/* =====================================================================
   FERNLEIGH & CO. — Flower Pot & Indoor Plant Shop
   assets/css/style.css
   Theme + component layer on top of real Bootstrap 5.3 (loaded via CDN
   in <head>, before this file) and Bootstrap Icons. This file supplies:
   design tokens, typography, Bootstrap component re-theming (buttons,
   navbar, dropdown, offcanvas, modal, accordion, carousel, forms), and
   the shop-specific components Bootstrap doesn't provide out of the box
   (product/blog/category cards, hero, page banners, footer, etc).
   ===================================================================== */

/* --------------------------- 1. RESET / BASE --------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.65;
  overflow-x: hidden;
  transition: background-color .35s ease, color .35s ease;
}
a { color: inherit; text-decoration: none; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-heading); font-weight: 700; line-height: 1.15; color: var(--color-heading); text-wrap: balance; }
hr { border-top: 1px solid var(--color-border); }

/* --------------------------- 2. DESIGN TOKENS --------------------------- */
:root{
  --primary-color:#1F4D3A;
  --primary-color-dark:#153726;
  --secondary-color:#6F8F72;
  --light-sage:#DCE7DC;
  --light-bg:#F7F5EF;
  --warm-beige:#E8E0D1;
  --accent-color:#4C8C63;
  --accent-color-dark:#3A6B4C;
  --dark-text:#1D2A22;
  --light-text:#FFFFFF;
  --gold:#7FA66B;

  --color-bg: var(--light-bg);
  --color-surface: #FFFFFF;
  --color-surface-alt: var(--light-sage);
  --color-surface-warm: var(--warm-beige);
  --color-text: var(--dark-text);
  --color-text-muted: #55645A;
  --color-heading: var(--primary-color);
  --color-border: rgba(29,42,34,0.12);
  --color-border-strong: rgba(29,42,34,0.22);
  --color-primary: var(--primary-color);
  --color-accent: var(--accent-color);
  --color-focus: #8A5A2E;
  --shadow-sm: 0 .25rem .75rem -0.4rem rgba(29,42,34,0.18);
  --shadow-md: 0 1rem 2.4rem -0.9rem rgba(29,42,34,0.28);
  --shadow-lg: 0 1.8rem 4rem -1.4rem rgba(29,42,34,0.34);
  --radius-md: 1rem;
  --radius-lg: 1.75rem;
  --radius-pill: 100px;
  --banner-h: 320px;

  --font-heading: "Cormorant Garamond", "Georgia", serif;
  --font-body: "Jost", -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;

  /* ---- Bootstrap re-theme (Bootstrap 5.3 per-component CSS variables) ---- */
  --bs-body-bg: var(--color-bg);
  --bs-body-color: var(--color-text);
  --bs-primary: var(--primary-color);
  --bs-primary-rgb: 31,77,58;
  --bs-link-color: var(--primary-color);
  --bs-link-hover-color: var(--accent-color);
  --bs-border-color: var(--color-border-strong);
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-font-sans-serif: var(--font-body);
  --bs-emphasis-color: var(--color-heading);
}

/* --------------------------- 3. LAYOUT HELPERS --------------------------- */

/* ============================================================
   GLOBAL FULL-WIDTH CONTAINER SYSTEM
   Bootstrap's default .container steps to fixed max-widths
   (540/720/960/1140/1320px), which left large unused margins on
   wide screens. This replaces that with a fluid, full-width
   container: 100% wide with responsive side padding, capped at
   --container-max on very large displays so lines don't stretch
   forever. Every section, card grid, header and footer uses the
   same .container, so the whole site now shares one consistent
   horizontal grid instead of per-section fixes.
   ============================================================ */
:root{
  --container-max: 1440px;
  --container-pad: 20px;   /* mobile: ~16-24px */
}
@media (min-width:576px){  :root{ --container-pad: 28px; } }   /* large mobile */
@media (min-width:768px){  :root{ --container-pad: 36px; } }   /* tablet: ~30-40px */
@media (min-width:992px){  :root{ --container-pad: 48px; } }   /* desktop: ~40-60px */
@media (min-width:1200px){ :root{ --container-pad: 56px; } }
@media (min-width:1440px){ :root{ --container-pad: 72px; } }   /* large desktop: ~60-80px */

.container{
  width: 100%;
  max-width: min(100%, var(--container-max));
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
  margin-left: auto;
  margin-right: auto;
}

.section{ padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.section-alt{ background: var(--color-surface-alt); }
.section-warm{ background: var(--color-surface-warm); }
.section-primary{ background: var(--color-primary); color: var(--light-text); }
.section-primary .section-head p{ color: rgba(255,255,255,.78); }
.section-head{ max-width: 42rem; margin-bottom: clamp(2rem,4vw,3.25rem); }
.section-head.center{ margin-inline:auto; text-align:center; }
.section-head-row{ display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap; margin-bottom: clamp(2rem,4vw,3.25rem); }
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap: clamp(1.25rem,3vw,2.5rem);}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap: clamp(1.25rem,3vw,2rem);}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap: clamp(1rem,2.4vw,1.75rem);}
.grid-6{display:grid; grid-template-columns:repeat(6,1fr); gap: 0.6rem;}
@media (max-width:1023px){ .grid-4{grid-template-columns:repeat(2,1fr);} .grid-6{grid-template-columns:repeat(3,1fr);} }
@media (max-width:900px){ .grid-3{grid-template-columns:repeat(2,1fr);} .grid-2{grid-template-columns:1fr;} }
@media (max-width:639px){ .grid-6{grid-template-columns:repeat(2,1fr);} }
@media (max-width:575.98px){ .grid-3, .grid-4, .grid-2{grid-template-columns:1fr;} }


.eyebrow{
  display:inline-flex; align-items:center; gap:.6em;
  font-weight:700; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--color-accent); margin-bottom: .9rem;
}
.eyebrow::before{ content:""; width:1.5em; height:2px; background:currentColor; display:inline-block; border-radius:2px; }
.section-title{ font-size: clamp(1.9rem, 3.6vw, 2.75rem); }
.page-h1{ font-size: clamp(2.1rem, 4.4vw, 3.1rem); color:#fff; margin-bottom:0; }

/* --------------------------- 4. BOOTSTRAP RE-THEME --------------------------- */
.btn{ font-weight:700; --bs-btn-border-radius: var(--radius-pill); --bs-btn-font-size:.92rem; padding:.85em 1.8em; }
.btn:hover{ transform: translateY(-2px); }
.btn{ transition: transform .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease; }
.btn-sm{ --bs-btn-padding-y:.5em; --bs-btn-padding-x:1.2em; --bs-btn-font-size:.82rem; }
.btn-primary{
  --bs-btn-bg: var(--color-primary); --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-bg: var(--primary-color-dark); --bs-btn-hover-border-color: var(--primary-color-dark);
  --bs-btn-active-bg: var(--primary-color-dark); --bs-btn-active-border-color: var(--primary-color-dark);
  --bs-btn-focus-shadow-rgb: 31,77,58;
}
.btn-accent{
  --bs-btn-color:#fff; --bs-btn-bg: var(--color-accent); --bs-btn-border-color: var(--color-accent);
  --bs-btn-hover-color:#fff; --bs-btn-hover-bg: var(--accent-color-dark); --bs-btn-hover-border-color: var(--accent-color-dark);
  --bs-btn-active-color:#fff; --bs-btn-active-bg: var(--accent-color-dark);
}
.btn-outline-secondary{
  --bs-btn-color: var(--color-heading); --bs-btn-border-color: var(--color-border-strong);
  --bs-btn-hover-color: var(--color-heading); --bs-btn-hover-bg: var(--color-surface-alt); --bs-btn-hover-border-color: var(--color-primary);
  --bs-btn-active-bg: var(--color-surface-alt); --bs-btn-active-color: var(--color-heading);
}
.btn-light{ --bs-btn-bg:#fff; --bs-btn-border-color:#fff; --bs-btn-color: var(--color-primary); --bs-btn-hover-bg: var(--light-sage); --bs-btn-hover-border-color: var(--light-sage); }
.btn-icon{ width:44px; height:44px; padding:0; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:transparent; border:1px solid transparent; color:var(--color-heading); font-size:1.05rem; flex:none; }
.btn-icon:hover{ background: var(--color-surface-alt); border-color:var(--color-border); }
.btn-close{ filter: var(--bs-btn-close-white-filter, none); }
[data-theme="dark"] .btn-close{ filter: invert(1) grayscale(100%) brightness(200%); }

.dropdown-menu{ border-radius: var(--radius-md); border-color: var(--color-border); box-shadow: var(--shadow-lg); padding:.6rem; background: var(--color-surface); }
.dropdown-item{ border-radius:.6rem; font-weight:600; font-size:.9rem; padding:.65rem .9rem; color: var(--color-text); }
.dropdown-item:hover, .dropdown-item:focus{ background: var(--color-surface-alt); color:var(--color-primary); }

.offcanvas{ background: var(--color-surface); color: var(--color-text); }
.modal-content{ background: var(--color-surface); color: var(--color-text); border-radius: var(--radius-md); }

.accordion-item{ background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-md) !important; overflow:hidden; margin-bottom:1rem; }
.accordion-button{ background: var(--color-surface); color: var(--color-text); font-weight:700; box-shadow:none !important; }
.accordion-button:not(.collapsed){ background: var(--color-surface-alt); color: var(--color-primary); }
.accordion-button::after{ filter: none; }
.accordion-body{ background: var(--color-surface); }

.form-control, .form-select{
  background: var(--color-surface); color: var(--color-text); border-color: var(--color-border-strong);
  border-radius: .6rem; padding:.75em 1em; min-height:44px;
}
.form-control:focus, .form-select:focus{
  border-color: var(--color-primary); box-shadow: 0 0 0 .2rem rgba(31,77,58,.15); background: var(--color-surface); color: var(--color-text);
}
.form-control.is-invalid{ border-color:#B3261E; }
.invalid-feedback{ display:none; }
.form-control.is-invalid ~ .invalid-feedback, .was-validated .form-control:invalid ~ .invalid-feedback{ display:block; }

.carousel-indicators [data-bs-target]{ background-color: var(--color-border-strong); width:9px; height:9px; border-radius:50%; opacity:1; }
.carousel-indicators .active{ background-color: var(--color-accent); width:22px; border-radius:6px; }

i.bi{ line-height:1; vertical-align:-0.08em; }

/* --------------------------- 5. TOP BAR + HEADER --------------------------- */
.topbar{ background: var(--color-primary); color: rgba(255,255,255,.92); font-size:.8rem; font-weight:500; }
.topbar a:hover{ color: var(--gold); }
@media (max-width:639px){ .topbar-left span.hide-xs{ display:none; } }

.site-header{ position:sticky; top:0; z-index:1030; background: var(--color-bg); border-bottom:1px solid var(--color-border); }
.site-header.is-stuck{ box-shadow: var(--shadow-sm); }
.main-nav{ padding-block:.6rem; }
.brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--font-heading); font-weight:700; font-size:1.5rem; color:var(--color-heading) !important; }
.brand i.bi{ font-size:1.9rem; color: var(--color-accent); }
.brand small{ display:block; font-family:var(--font-body); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--color-text-muted); font-weight:600; }

/* Image logo: the source file bakes in dark-green artwork, so on any
   surface that is always dark (the footer) or goes dark in dark mode
   (header / mobile drawer), flip it to a flat white silhouette instead
   of swapping image files. */
.brand-logo-img{ height:58px; width:auto; display:block; }
.footer-brand .brand-logo-img,
.offcanvas .brand-logo-img{ height:72px; }
.footer-brand .brand-logo-img{ filter: brightness(0) invert(1); }
[data-theme="dark"] .brand-logo-img{ filter: brightness(0) invert(1); }
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .brand-logo-img{ filter: brightness(0) invert(1); }
}

.nav-links{ gap: clamp(.9rem,1.4vw,1.7rem); }
.nav-link{ font-weight:600; font-size:.94rem; color: var(--color-text) !important; padding:.6rem .1rem !important; position:relative; }
.nav-link.active, .nav-link:hover{ color: var(--color-accent) !important; }
.nav-link.active::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--color-accent); border-radius:2px; }

.nav-tools{ gap:.3rem; }

/* Primary header CTA: keep one clear conversion action tied to the plant-shop theme. */
.header-cta{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:42px; padding:.65rem 1.05rem;
  border-radius:var(--radius-pill);
  background:var(--color-accent); color:#fff !important;
  border:1px solid var(--color-accent);
  font-weight:800; font-size:.9rem; line-height:1;
  text-decoration:none !important; white-space:nowrap;
  box-shadow:0 6px 16px rgba(0,0,0,.10);
  transition:transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.header-cta:hover, .header-cta:focus-visible{
  background:var(--accent-color-dark); color:#fff !important;
  border-color:var(--accent-color-dark);
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(0,0,0,.16);
}
.header-cta:focus-visible{ outline:3px solid color-mix(in srgb, var(--color-accent) 35%, transparent); outline-offset:2px; }
[data-theme="dark"] .header-cta{
  background:var(--color-accent); border-color:var(--color-accent); color:#07140c !important;
}
[data-theme="dark"] .header-cta:hover, [data-theme="dark"] .header-cta:focus-visible{
  background:var(--accent-color-dark); border-color:var(--accent-color-dark); color:#fff !important;
}
@media (max-width:575.98px){
  .header-cta{ min-height:38px; padding:.55rem .8rem; font-size:.78rem; }
}
.theme-toggle .icon-moon{ display:none; }
[data-theme="dark"] .theme-toggle .icon-sun{ display:none; }
[data-theme="dark"] .theme-toggle .icon-moon{ display:inline; }

/* Match the mobile menu button to the other circular icon buttons instead of
   Bootstrap's default bordered rectangle, and keep the brand + toolbar on a
   single row on mobile instead of wrapping onto a second line. */
.navbar-toggler{
  width:44px; height:44px; padding:0; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid transparent; color:var(--color-heading);
  font-size:1.15rem; flex:none; box-shadow:none;
}
.navbar-toggler:hover{ background:var(--color-surface-alt); border-color:var(--color-border); }
.navbar-toggler:focus{ box-shadow:none; }

.main-nav .container{ flex-wrap:nowrap; }
.main-nav .navbar-brand{ flex-shrink:1; min-width:0; margin-inline-end:.5rem; }

@media (max-width:575.98px){
  .brand-logo-img{ height:60px; }
  .nav-tools{ gap:.1rem; }
  .btn-icon, .navbar-toggler{ width:38px; height:38px; font-size:1rem; }
}

.mobile-drawer .brand{ font-size:1.25rem; }
.drawer-nav{ list-style:none; margin:0; padding:1rem 0 0; display:flex; flex-direction:column; }
.drawer-nav > li > a{ display:block; padding:.9rem .1rem; border-bottom:1px solid var(--color-border); font-weight:700; min-height:44px; }
.drawer-sub{ list-style:none; margin:0; padding:0 0 .4rem 1rem; }
.drawer-sub li a{ display:block; padding:.6rem .1rem; font-weight:500; color:var(--color-text-muted); min-height:40px; }

/* --------------------------- 6. HERO --------------------------- */
.hero{ position:relative; overflow:hidden; background: linear-gradient(170deg, var(--light-sage) 0%, var(--light-bg) 55%); }
.hero .container{ position:relative; z-index:1; padding-block: clamp(3rem,7vw,5.5rem); }
.hero-copy .hero-title{ font-size:clamp(2.5rem,5.4vw,4.2rem); }
.hero-copy .hero-title em{ font-style:italic; color:var(--color-accent); font-weight:600; }
.hero-copy p.lead{ font-size:1.08rem; color:var(--color-text-muted); max-width:32rem; margin-top:1.1rem; }
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:2rem; }
.hero-stat strong{ display:block; font-family:var(--font-heading); font-size:1.7rem; color:var(--color-heading); font-weight:560; }
.hero-stat span{ font-size:.82rem; color:var(--color-text-muted); }

.hero-visual{ position:relative; }
.hero-visual .frame{ border-radius: 58% 42% 55% 45%/50% 55% 45% 50%; overflow:hidden; aspect-ratio:1/1; box-shadow:var(--shadow-lg); position:relative; }
.hero-visual .frame img{ width:100%; height:100%; object-fit:cover; }
.float-card{
  position:absolute; background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-md); padding:.7rem 1.1rem; box-shadow:var(--shadow-md);
  font-weight:700; font-size:.86rem; display:flex; align-items:center; gap:.55rem;
  animation:drift 7s ease-in-out infinite;
}
.float-card i.bi{ color:var(--color-accent); font-size:1.15rem; }
.float-1{ top:6%; left:-6%; animation-delay:.2s; } .float-2{ bottom:9%; right:-4%; animation-delay:1.2s; }
@keyframes drift{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-10px);} }
@media(prefers-reduced-motion:reduce){ .float-card{ animation:none; } }
@media (max-width:991px){ .hero-visual{ order:-1; max-width:22rem; margin-inline:auto; margin-bottom:2rem; } }

/* ---- home 1 hero: organic blob split ---- */
.hero-organic .hero-grid{ display:grid; grid-template-columns:0.62fr 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:center; }
@media (max-width:991px){ .hero-organic .hero-grid{ grid-template-columns:1fr; } }

/* ---- home 2 hero: asymmetric editorial grid ---- */
.hero-editorial{ padding-top:1.6rem; }
.hero-editorial .main-tile{
  border-radius:var(--radius-lg); overflow:hidden; min-height:26rem; position:relative;
  display:flex; align-items:flex-end; color:#fff;
}
.hero-editorial .main-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero-editorial .main-tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(15,25,18,.82) 0%, rgba(15,25,18,.15) 55%, transparent 78%); z-index:1; }
.hero-editorial .main-tile .tile-copy{ position:relative; z-index:2; padding:2.4rem; max-width:28rem; }
.hero-editorial .side-tile{ border-radius:var(--radius-lg); overflow:hidden; position:relative; display:flex; align-items:flex-end; min-height:12.5rem; color:#fff; }
.hero-editorial .side-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.hero-editorial .side-tile:hover img{ transform:scale(1.06); }
.hero-editorial .side-tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(15,25,18,.7), transparent 65%); }
.hero-editorial .side-tile span{ position:relative; z-index:1; padding:1.1rem; font-family:var(--font-heading); font-weight:700; font-size:1.1rem; }

/* ---- home 2 hero: full-bleed room banner ---- */
.room-banner{ position:relative; min-height:clamp(28rem,50vw,36rem); display:flex; align-items:center; overflow:hidden; }
.room-banner .banner-media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.room-banner .banner-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,25,18,.6) 0%, rgba(18,36,26,.72) 45%, rgba(18,36,26,.92) 100%); z-index:1; }
.room-banner .container{ position:relative; z-index:2; padding-block: clamp(3rem,6vw,4.5rem); }
.room-banner .banner-content{ max-width:38rem; margin-inline:auto; text-align:center; color:#fff; }
.room-banner .banner-content .eyebrow{ color:var(--gold); text-shadow:0 1px 10px rgba(0,0,0,.55); }
.room-banner .banner-content .page-h1{ text-shadow:0 2px 16px rgba(0,0,0,.45); }
.room-banner .banner-content .banner-desc{ margin-inline:auto; color:rgba(255,255,255,.92); text-shadow:0 1px 8px rgba(0,0,0,.4); }
.room-banner .banner-actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:1.8rem; }
.quick-pills{ display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem; margin-top:2.4rem; }
.quick-pill{ display:inline-flex; align-items:center; gap:.5em; background:rgba(255,255,255,.14); border:1.5px solid rgba(255,255,255,.42); backdrop-filter:blur(3px); color:#fff; border-radius:var(--radius-pill); padding:.6em 1.3em; font-weight:700; font-size:.85rem; transition:background-color .25s ease, border-color .25s ease, transform .25s ease; }
.quick-pill:hover{ background:rgba(255,255,255,.28); border-color:#fff; transform:translateY(-2px); color:#fff; }

/* --------------------------- 7. PAGE BANNER (fixed height, all non-home pages) --------------------------- */
.page-banner{
  position:relative; overflow:hidden; color:#fff;
  height: var(--banner-h); display:flex; align-items:center;
}
.page-banner .banner-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.page-banner .banner-scrim{ position:absolute; inset:0; background:linear-gradient(115deg, rgba(18,36,26,.92) 0%, rgba(18,36,26,.78) 45%, rgba(31,77,58,.55) 100%); z-index:1; }
.page-banner .container{ position:relative; z-index:2; }
.page-banner .banner-desc{ max-width:34rem; color:rgba(255,255,255,.82); margin-top:.7rem; }
.breadcrumb{ display:flex; gap:.5rem; align-items:center; font-size:.86rem; font-weight:600; color:rgba(255,255,255,.75); margin-top:1rem; flex-wrap:wrap; background:none; padding:0; }
.breadcrumb a:hover{ color:#fff; }
.breadcrumb .sep{ opacity:.5; }
@media (max-width:640px){ .page-banner{ height:260px; } }

/* --------------------------- 8. CARDS --------------------------- */
.card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius: var(--radius-md); overflow:hidden; transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease; }
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in-view{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } }

/* ---- redesigned collection / category cards ---- */
.cat-card{ position:relative; border-radius:var(--radius-lg); overflow:hidden; display:block; aspect-ratio:3/4; isolation:isolate; }
.cat-card .media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .6s cubic-bezier(.2,.8,.2,1), filter .5s ease; }
.cat-card:hover .media{ transform:scale(1.08); filter:brightness(.92); }
.cat-card .overlay{ position:absolute; inset:0; background:linear-gradient(0deg,rgba(12,22,16,.88) 0%, rgba(12,22,16,.18) 52%, transparent 74%); }
.cat-card .cat-index{
  position:absolute; top:1.1rem; right:1.1rem; z-index:2; font-family:var(--font-heading); font-size:.85rem; font-weight:700;
  color:rgba(255,255,255,.85); border:1px solid rgba(255,255,255,.4); border-radius:100px; padding:.25em .75em;
}
.cat-card .body{ position:absolute; inset-inline:0; bottom:0; padding:1.6rem; color:#fff; }
.cat-card .badge-soft{ background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.35); backdrop-filter:blur(2px); }
.cat-card h3{ color:#fff; font-size:1.4rem; margin:.5rem 0 .35rem; }
.cat-card p{ font-size:.86rem; color:rgba(255,255,255,.82); margin-bottom:.9rem; max-width:18rem; }
.cat-card .explore-btn{
  width:42px; height:42px; border-radius:50%; border:1.5px solid rgba(255,255,255,.6);
  display:inline-flex; align-items:center; justify-content:center; color:#fff;
  transition: background-color .25s ease, transform .25s ease;
}
.cat-card:hover .explore-btn{ background:var(--color-accent); border-color:var(--color-accent); transform:translateX(4px); }
[dir="rtl"] .cat-card:hover .explore-btn{ transform:translateX(-4px); }

.feature-card{ padding:2rem 1.6rem; text-align:center; border-radius:var(--radius-lg); background:var(--color-surface); border:1px solid var(--color-border); height:100%; }
.feature-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-4px); }
.feature-card .ico-wrap{ width:64px; height:64px; border-radius:50%; background:var(--light-sage); color:var(--color-primary); display:flex; align-items:center; justify-content:center; margin:0 auto 1.1rem; font-size:1.6rem; }
.feature-card h3{ font-size:1.12rem; margin-bottom:.5rem; }
.feature-card p{ font-size:.9rem; color:var(--color-text-muted); margin:0; }

.product-card .media{ position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--color-surface-alt); }
.product-card .media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.product-card:hover .media img{ transform:scale(1.06); }
.badge-tag{ position:absolute; top:.8rem; inset-inline-start:.8rem; background:var(--color-accent); color:#fff; font-size:.66rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:.35em .75em; border-radius:var(--radius-pill); z-index:2; }
.product-card .wish{ position:absolute; top:.7rem; inset-inline-end:.7rem; width:2.2rem; height:2.2rem; border-radius:50%; background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; z-index:2; color:var(--color-primary); }
.product-card .wish[aria-pressed="true"]{ color:var(--color-accent); }
/* CTAs are always visible (no hover needed) */
.quick-actions{ position:absolute; left:.7rem; right:.7rem; bottom:.7rem; display:flex; gap:.5rem; transform:translateY(0); opacity:1; visibility:visible; pointer-events:auto; z-index:2; }
.product-card:hover .quick-actions, .product-card:focus-within .quick-actions{ transform:translateY(0); opacity:1; visibility:visible; }
.quick-actions .btn{ flex:1; padding:.55em .8em; font-size:.78rem; }
.product-card .body{ padding:1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; gap:.35rem; }
.product-card .cat{ font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--secondary-color); }
.product-card .name{ font-family:var(--font-heading); font-size:1.1rem; }
.product-card .rating{ display:flex; align-items:center; gap:.3rem; font-size:.78rem; color:var(--color-text-muted); }
.product-card .rating .stars{ color:var(--gold); display:inline-flex; gap:1px; font-size:.8rem; }
.product-card .price{ margin-top:auto; padding-top:.5rem; font-weight:800; font-size:1.05rem; display:flex; align-items:center; gap:.5em; }
.product-card .price .old{ font-weight:600; font-size:.85rem; text-decoration:line-through; color:var(--color-text-muted); }

.blog-card .media{ aspect-ratio:16/10; position:relative; overflow:hidden; display:block; }
.blog-card .media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.blog-card:hover .media img{ transform:scale(1.06); }
.blog-card .media .cat-tag{ position:absolute; top:.8rem; inset-inline-start:.8rem; background:var(--color-surface); color:var(--color-primary); font-size:.7rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:.4em .8em; border-radius:var(--radius-pill); z-index:2; }
.blog-card .body{ padding:1.3rem 1.2rem 1.4rem; }
.blog-card .meta{ display:flex; gap:1rem; font-size:.78rem; color:var(--color-text-muted); margin-bottom:.6rem; }
.blog-card h3{ font-size:1.15rem; margin-bottom:.5rem; }
.blog-card .readmore{ font-weight:700; font-size:.86rem; color:var(--color-accent); display:inline-flex; align-items:center; gap:.4em; }
.blog-card:hover .readmore i{ transform:translateX(4px); }
.blog-card .readmore i{ transition:transform .25s ease; }

/* --------------------------- 9. TESTIMONIALS (Bootstrap carousel) --------------------------- */
.testi-wrap{ max-width:44rem; margin-inline:auto; text-align:center; }
.testi-wrap .carousel-item{ padding:0 1rem; }
.testi-avatar{ width:76px; height:76px; border-radius:50%; margin:0 auto 1.1rem; background:linear-gradient(155deg,var(--secondary-color),var(--primary-color)); display:flex; align-items:center; justify-content:center; overflow:hidden; color:#fff; font-family:var(--font-heading); font-size:1.5rem; font-weight:700; }
.testi-avatar img{ width:100%; height:100%; object-fit:cover; }
.testi-stars{ display:flex; gap:.2rem; justify-content:center; color:var(--gold); margin-bottom:1rem; font-size:1.1rem; }
.testi-quote{ font-family:var(--font-heading); font-size:1.35rem; font-style:italic; color:var(--color-heading); margin-bottom:1rem; }
.testi-name{ font-weight:800; margin:0; } .testi-role{ font-size:.84rem; color:var(--color-text-muted); }
.testi-controls{ display:flex; justify-content:center; align-items:center; gap:1.2rem; margin-top:1.6rem; }
.testi-dots{ position:static; margin:0; }

/* --------------------------- 10. GALLERY / OFFER / NEWSLETTER --------------------------- */
.gallery-item{ position:relative; aspect-ratio:1/1; overflow:hidden; border-radius:var(--radius-sm,.5rem); }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.gallery-item:hover img{ transform:scale(1.1); }
.gallery-item .tag{ position:absolute; inset:auto 0 0 0; padding:.5rem .7rem; font-size:.7rem; font-weight:700; color:#fff; background:linear-gradient(0deg,rgba(15,25,18,.7),transparent); }

.offer-banner{ position:relative; border-radius:var(--radius-lg); overflow:hidden; color:#fff; display:grid; grid-template-columns:1.1fr .9fr; align-items:center; }
.offer-banner .offer-copy{ padding:clamp(2.2rem,5vw,3.5rem); position:relative; z-index:1; background:linear-gradient(100deg, var(--accent-color) 45%, transparent 100%); }
.offer-banner h2{ color:#fff; font-size:clamp(1.8rem,3.6vw,2.6rem); }
.offer-visual{ position:relative; aspect-ratio:4/3; }
.offer-visual img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:900px){ .offer-banner{ grid-template-columns:1fr; } .offer-banner .offer-copy{ background: var(--accent-color); } }

/* Marquee strip banner (USP / trust banner) */
.strip-banner{ background: var(--color-primary); color:#fff; overflow:hidden; position:relative; border-block:1px solid rgba(255,255,255,.08); }
.strip-banner::before,.strip-banner::after{ content:""; position:absolute; top:0; bottom:0; width:3rem; z-index:2; pointer-events:none; }
.strip-banner::before{ inset-inline-start:0; background:linear-gradient(90deg, var(--color-primary), transparent); }
.strip-banner::after{ inset-inline-end:0; background:linear-gradient(270deg, var(--color-primary), transparent); }
.strip-track{ display:flex; width:max-content; animation: strip-scroll 32s linear infinite; }
.strip-banner:hover .strip-track{ animation-play-state: paused; }
.strip-group{ display:flex; align-items:center; flex:none; }
.strip-group span{ display:inline-flex; align-items:center; gap:.6rem; padding:.85rem 2.2rem; font-weight:700; font-size:.92rem; letter-spacing:.01em; white-space:nowrap; }
.strip-group span i{ color:var(--gold); font-size:1.05rem; }
.strip-group span:not(:last-child){ border-inline-end:1px solid rgba(255,255,255,.22); }
@keyframes strip-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .strip-track{ animation:none; flex-wrap:wrap; justify-content:center; } .strip-track .strip-group:last-child{ display:none; } }
@media (max-width:576px){ .strip-group span{ padding:.85rem 1.4rem; font-size:.85rem; } }

.newsletter-box{ background: var(--color-primary); color:#fff; border-radius:var(--radius-lg); padding: clamp(2.2rem,5vw,3.5rem); text-align:center; }
.newsletter-box h2{ color:#fff; }
.newsletter-box p{ color:rgba(255,255,255,.78); max-width:34rem; margin-inline:auto; }
.newsletter-form{ display:flex; gap:.7rem; max-width:30rem; margin:1.6rem auto 0; flex-wrap:wrap; justify-content:center; }
.newsletter-form .form-control{ flex:1; min-width:14rem; background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.32); color:#fff; border-radius:var(--radius-pill); }
.newsletter-form .form-control::placeholder{ color:#fff; opacity:1; }
.form-note{ font-size:.78rem; color:rgba(255,255,255,.6); margin-top:.8rem; }

/* --------------------------- 11. FOOTER --------------------------- */
.site-footer{ background: var(--primary-color-dark); color:rgba(255,255,255,.85); padding-top: clamp(3.5rem,7vw,5.5rem); }
.footer-grid{ padding-bottom:2.5rem; border-bottom:1px solid rgba(255,255,255,.14); }
.footer-brand .brand{ color:#fff !important; }
.footer-brand p{ font-size:.9rem; color:rgba(255,255,255,.65); margin-block:1rem 1.3rem; max-width:22rem; }
.footer-newsletter .form-control{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.25); border-radius:var(--radius-pill); color:#fff; font-size:.85rem; }
.social-row{ display:flex; gap:.6rem; margin-top: 20px; }
.social-row a{ width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; }
.social-row a:hover{ background:var(--color-accent); border-color:var(--color-accent); }
.footer-grid h5{ color:#fff; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:1.1rem; }
.footer-grid ul li{ margin-bottom:.7rem; }
.footer-grid a{ color:rgba(255,255,255,.78); }
.footer-grid a:hover{ color:#fff; }
.contact-line{ display:flex; align-items:flex-start; gap:.6rem; font-size:.88rem; color:rgba(255,255,255,.75); }
.contact-line i.bi{ flex:0 0 1.25rem; width:1.25rem; text-align:center; color:var(--gold); margin-top:.2rem; line-height:1.4; }
.contact-line span{ flex:1 1 auto; }

/* Contact page: info list sits on a light section background, not the dark
   footer, so it needs readable dark text instead of the footer's white. */
.contact-details .contact-line{ align-items:center; font-size:1rem; color:var(--color-text); }
.contact-details .contact-line i.bi{ font-size:1.1rem; margin-top:0; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; padding-block:1.5rem; font-size:.82rem; color:rgba(255,255,255,.6); }
.legal-links{ display:flex; gap:1.3rem; }

.back-to-top{
  position:fixed; bottom:1.6rem; inset-inline-end:1.6rem; width:48px; height:48px; border-radius:50%;
  background:var(--color-primary); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-md); opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s; z-index:150; border:none; font-size:1.2rem;
}
.back-to-top.show{ opacity:1; visibility:visible; transform:none; }
@media (max-width:575.98px){
  .back-to-top{ width:40px; height:40px; font-size:1rem; bottom:1.1rem; inset-inline-end:1.1rem; }
}

/* --------------------------- 12. SHOP / FILTERS / FORMS --------------------------- */
.filter-sidebar{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:1.5rem; }
.filter-block + .filter-block{ margin-top:1.6rem; padding-top:1.6rem; border-top:1px solid var(--color-border); }
.filter-block h4{ font-size:.95rem; margin-bottom:.9rem; }
.filter-block .form-check{ margin-bottom:.6rem; }
.range-row{ display:flex; justify-content:space-between; font-size:.85rem; font-weight:700; margin-top:.6rem; }
.chip-row{ display:flex; flex-wrap:wrap; gap:.55rem; }
.chip{ border:1.5px solid var(--color-border-strong); border-radius:var(--radius-pill); padding:.5em 1.1em; font-size:.82rem; font-weight:700; min-height:40px; display:inline-flex; align-items:center; background:transparent; color:var(--color-text); }
.chip[aria-pressed="true"]{ background:var(--color-primary); color:#fff; border-color:var(--color-primary); }
.toolbar{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:1.6rem; }
.result-count{ font-size:.9rem; color:var(--color-text-muted); }
.pagination .page-link{ border-radius:50%; width:44px; height:44px; display:flex; align-items:center; justify-content:center; margin-inline:.2rem; border-color:var(--color-border-strong); color:var(--color-text); background:var(--color-surface); }
.pagination .page-item.active .page-link{ background:var(--color-primary); border-color:var(--color-primary); color:#fff; }

.timeline{ list-style:none; margin:0; padding:0; border-inline-start:2px solid var(--color-border-strong); }
.timeline li{ position:relative; padding:0 0 2.4rem 2rem; }
[dir="rtl"] .timeline li{ padding:0 2rem 2.4rem 0; }
.timeline li::before{ content:""; position:absolute; inset-inline-start:-7px; top:.3rem; width:12px; height:12px; border-radius:50%; background:var(--color-accent); border:2px solid var(--color-surface); }
.timeline .yr{ font-weight:800; color:var(--color-accent); font-size:.85rem; margin:0; }
.timeline h4{ font-size:1.15rem; margin:.3rem 0 .4rem; }

.team-card{ text-align:center; }
.team-card .avatar{ aspect-ratio:1/1; border-radius:var(--radius-lg); background:linear-gradient(155deg,var(--secondary-color),var(--primary-color)); display:flex; align-items:center; justify-content:center; overflow:hidden; color:#fff; font-family:var(--font-heading); font-size:2.2rem; font-weight:700; margin-bottom:1rem; }
.team-card .avatar img{ width:100%; height:100%; object-fit:cover; }
.team-card h4{ font-size:1.1rem; margin-bottom:.2rem; }
.team-card .role{ font-size:.85rem; color:var(--color-accent); font-weight:700; }

.value-card{ display:flex; gap:1.1rem; padding:1.5rem; border-radius:var(--radius-md); background:var(--color-surface); border:1px solid var(--color-border); height:100%; }
.value-card .num{ font-family:var(--font-heading); font-size:1.8rem; color:var(--light-sage); font-weight:700; flex:none; }
[data-theme="dark"] .value-card .num{ color: var(--color-surface-alt); }

.stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; text-align:center; }
.stat-row .num{ font-family:var(--font-heading); font-size:2.6rem; color:var(--color-primary); font-weight:700; }
[style*="color:#fff"].stat-row .num, .section-primary .stat-row .num, .bulk-dark .stat-row .num{ color:#fff; }
.stat-row .label{ font-size:.85rem; color:var(--color-text-muted); }
.section-primary .stat-row .label, .bulk-dark .stat-row .label{ color:rgba(255,255,255,.72); }
@media (max-width:700px){ .stat-row{ grid-template-columns:repeat(2,1fr); } }

.gift-card{ border-radius:var(--radius-lg); overflow:hidden; background:var(--color-surface); border:1px solid var(--color-border); height:100%; }
.gift-card .media{ aspect-ratio:5/4; position:relative; overflow:hidden; }
.gift-card .media img{ width:100%; height:100%; object-fit:cover; }
.gift-card .body{ padding:1.4rem; }

.process-step{ text-align:center; }
.process-step .step-num{ width:56px; height:56px; border-radius:50%; background:var(--color-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-heading); font-weight:700; font-size:1.3rem; margin:0 auto 1rem; }

.error-page{ min-height:70vh; display:flex; align-items:center; }
.error-page .big{ font-family:var(--font-heading); font-size:clamp(5rem,14vw,9rem); color:var(--light-sage); line-height:1; }
[data-theme="dark"] .error-page .big{ color:var(--color-surface-alt); }

.article-body{ font-size:1.06rem; max-width:44rem; }
.article-body h2{ font-size:1.5rem; margin-top:2rem; }
.article-body h3{ font-size:1.2rem; margin-top:1.6rem; }
.article-body p{ margin-bottom:1.2rem; color:var(--color-text-muted); }
.article-body ul{ padding-inline-start:1.4rem; margin-bottom:1.2rem; color:var(--color-text-muted); }
.article-body ul li{ margin-bottom:.5rem; }
.callout{ background:var(--light-sage); border-inline-start:4px solid var(--color-primary); border-radius:.6rem; padding:1.2rem 1.4rem; margin:1.6rem 0; font-size:.95rem; }
[data-theme="dark"] .callout{ background: var(--color-surface-alt); }
.toc{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:1.3rem 1.5rem; }
.toc h4{ font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:.9rem; }
.toc ol{ padding-inline-start:1.2rem; display:flex; flex-direction:column; gap:.55rem; font-size:.9rem; }
.share-row{ display:flex; gap:.6rem; }
.share-row a{ width:40px; height:40px; border-radius:50%; border:1.5px solid var(--color-border-strong); display:flex; align-items:center; justify-content:center; }
.share-row a:hover{ border-color:var(--color-primary); background:var(--color-surface-alt); }
.author-box{ display:flex; gap:1.1rem; padding:1.5rem; border:1px solid var(--color-border); border-radius:var(--radius-md); align-items:center; }
.author-box .avatar{ width:64px; height:64px; border-radius:50%; background:linear-gradient(155deg,var(--secondary-color),var(--primary-color)); flex:none; display:flex; align-items:center; justify-content:center; overflow:hidden; color:#fff; font-family:var(--font-heading); font-weight:700; }
.author-box .avatar img{ width:100%; height:100%; object-fit:cover; }

.text-muted{ color:var(--color-text-muted) !important; }
.badge-soft{ background:var(--light-sage); color:var(--color-primary); font-size:.72rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:.4em .85em; border-radius:var(--radius-pill); display:inline-block; }

/* skeleton loaders */
.skeleton{ position:relative; overflow:hidden; background: var(--color-surface-alt); }
.skeleton::after{ content:""; position:absolute; inset:0; transform:translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: shimmer 1.4s infinite; }
[data-theme="dark"] .skeleton::after{ background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); }
@keyframes shimmer{ 100%{ transform:translateX(100%);} }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible{
  outline:2.5px solid var(--color-focus); outline-offset:3px; border-radius:3px;
}
.skip-link{ position:absolute; left:1rem; top:-4rem; background:var(--color-primary); color:#fff; padding:.9rem 1.4rem; border-radius:.6rem; z-index:1100; transition:top .2s ease; }
.skip-link:focus{ top:1rem; }

@media (max-width:900px){ .grid-2{ grid-template-columns:1fr; } .stat-row{ grid-template-columns:repeat(2,1fr);} }

/* ------------------ 12. PRODUCT DETAILS / VALUE / TIMELINE / MISC EXTRAS ------------------ */

/* Breadcrumb bar used on pages without a dark page-banner behind it
   (the base .breadcrumb is styled white for use over the banner scrim,
   so it needs its own contrast + rhythm here). */
.breadcrumb-bar{ padding-block:1.1rem; border-bottom:1px solid var(--color-border); }
.breadcrumb-bar .breadcrumb{ margin-top:0; color:var(--color-text-muted); }
.breadcrumb-bar .breadcrumb a{ color:var(--color-text-muted); }
.breadcrumb-bar .breadcrumb a:hover{ color:var(--color-primary); }
.breadcrumb-bar .breadcrumb span[aria-current]{ color:var(--color-heading); font-weight:700; }

.pd-row{ align-items:flex-start; }

/* Gallery */
.pd-gallery{ position:relative; }
.pd-gallery-main{ position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-md); aspect-ratio:1/1; }
.pd-gallery-main img{ width:100%; height:100%; object-fit:cover; display:block; }
.pd-gallery-badge{ position:absolute; top:1rem; inset-inline-start:1rem; display:inline-flex; align-items:center; gap:.4rem; background:rgba(255,255,255,.92); color:var(--color-primary); font-size:.78rem; font-weight:700; padding:.45em .9em; border-radius:var(--radius-pill); box-shadow:var(--shadow-sm); }
.pd-gallery-badge i{ color:var(--color-accent); }
.pd-thumb-row{ display:flex; gap:.7rem; margin-top:1rem; }
.pd-thumb{ border:2px solid transparent; border-radius:var(--radius-md); padding:0; overflow:hidden; width:72px; height:72px; flex:none; background:none; opacity:.6; transition:opacity .2s ease, border-color .2s ease; }
.pd-thumb img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:calc(var(--radius-md) - 2px); }
.pd-thumb.active, .pd-thumb:hover{ opacity:1; border-color:var(--color-primary); }

/* Info column */
.pd-info{ padding-inline-start:.5rem; }
.pd-info .cat{ display:inline-block; font-size:.75rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--secondary-color); margin-bottom:.35rem; }
.pd-info h1{ margin-bottom:.6rem; }
.pd-info .rating{ display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; font-size:.9rem; color:var(--color-text-muted); }
.pd-info .rating .stars{ color:var(--gold); display:inline-flex; gap:2px; font-size:.95rem; }
.pd-info .rating a{ color:var(--color-text); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.pd-info .rating .dot{ opacity:.5; }
.pd-info .rating .in-stock{ display:inline-flex; align-items:center; gap:.35rem; color:var(--color-accent); font-weight:700; }
.pd-info .price{ font-family:var(--font-heading); font-weight:700; font-size:2rem; color:var(--color-primary); margin:.85rem 0 .6rem; }
.pd-desc{ max-width:34rem; }

.pd-facts{ display:grid; grid-template-columns:repeat(2,1fr); gap:.7rem; margin:1.3rem 0; }
.pd-facts .fact{ display:flex; align-items:flex-start; gap:.65rem; padding:.75rem .9rem; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); }
.pd-facts .fact i{ font-size:1.1rem; color:var(--color-accent); margin-top:.2rem; flex:none; }
.pd-facts .fact-label{ display:block; font-size:.72rem; color:var(--color-text-muted); }
.pd-facts .fact-value{ display:block; font-weight:700; color:var(--color-text); font-size:.92rem; }
@media (max-width:420px){ .pd-facts{ grid-template-columns:1fr; } }

.pd-buy-row{ display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin:1.3rem 0; }
.pd-buy-row .btn-lg{ min-width:10rem; }

.pd-trust{ display:flex; flex-wrap:wrap; gap:.9rem 1.6rem; margin-top:1.2rem; padding-top:1.1rem; border-top:1px solid var(--color-border); }
.pd-trust .trust-item{ display:flex; align-items:center; gap:.5rem; font-size:.85rem; color:var(--color-text-muted); }
.pd-trust .trust-item i{ font-size:1.1rem; color:var(--color-primary); }

/* Reviews tab — rating summary */
.rating-summary{ display:flex; gap:2.5rem; flex-wrap:wrap; align-items:center; margin-bottom:2.4rem; padding-bottom:2.2rem; border-bottom:1px solid var(--color-border); }
.rating-summary .rs-score{ text-align:center; flex:none; }
.rating-summary .rs-score .num{ display:block; font-family:var(--font-heading); font-size:3rem; font-weight:700; color:var(--color-primary); line-height:1; }
.rating-summary .rs-score .stars{ display:block; color:var(--gold); margin:.45rem 0; font-size:1rem; }
.rating-summary .rs-score .count{ font-size:.82rem; color:var(--color-text-muted); }
.rating-summary .rs-bars{ flex:1 1 260px; display:flex; flex-direction:column; gap:.45rem; }
.rating-bar-row{ display:grid; grid-template-columns:3.4rem 1fr 1.6rem; align-items:center; gap:.7rem; font-size:.82rem; color:var(--color-text-muted); }
.rating-bar-row .bar{ height:8px; border-radius:99px; background:var(--color-surface-alt); overflow:hidden; }
.rating-bar-row .bar span{ display:block; height:100%; background:var(--gold); border-radius:99px; }

.pd-specs{ display:flex; flex-direction:column; gap:.55rem; margin:1.2rem 0; }
.pd-specs li{ display:flex; align-items:center; gap:.6rem; color:var(--color-text-muted); font-size:.95rem; }
.pd-specs li strong{ color:var(--color-text); font-weight:700; }
.pd-tab-content{ padding-top:1.6rem; }

@media (max-width:991.98px){
  .pd-info{ padding-inline-start:0; margin-top:1rem; }
}
@media (max-width:575.98px){
  /* Extra breathing room on narrow phones so headline/price/description
     text never sits flush against the very edge of the viewport. */
  .pd-container{ padding-inline:calc(var(--container-pad) + .5rem); }
}

.v-n{ font-family:var(--font-heading); font-size:1.8rem; color:var(--light-sage); font-weight:700; flex:none; }
[data-theme="dark"] .v-n{ color: var(--color-surface-alt); }

.t-year{ display:block; font-weight:800; color:var(--color-accent); font-size:.85rem; margin:0 0 .3rem; }

.avatar-ring{ aspect-ratio:1/1; width:100%; max-width:120px; margin-inline:auto; border-radius:50%; background:linear-gradient(155deg,var(--secondary-color),var(--primary-color)); display:flex; align-items:center; justify-content:center; overflow:hidden; color:#fff; font-family:var(--font-heading); font-size:1.8rem; font-weight:700; margin-bottom:1rem; }
.avatar-ring img{ width:100%; height:100%; object-fit:cover; }

.p-n{ width:56px; height:56px; border-radius:50%; background:var(--color-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-heading); font-weight:700; font-size:1.3rem; margin:0 auto 1rem; }

.error-code{ display:block; font-family:var(--font-heading); font-size:clamp(5rem,14vw,9rem); color:var(--light-sage); line-height:1; }
[data-theme="dark"] .error-code{ color:var(--color-surface-alt); }

.featured-post{ display:grid; grid-template-columns:1.2fr 1fr; gap:2rem; align-items:center; border-radius:var(--radius-lg); overflow:hidden; background:var(--color-surface); border:1px solid var(--color-border); box-shadow:var(--shadow-sm); }
.featured-post img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }
.featured-post .fp-copy{ padding:2rem 2.2rem 2rem 0; }
[dir="rtl"] .featured-post .fp-copy{ padding:2rem 0 2rem 2.2rem; }
@media (max-width:800px){ .featured-post{ grid-template-columns:1fr; } .featured-post .fp-copy{ padding:0 1.4rem 1.6rem; } }

.tabs-nav{ border-bottom:2px solid var(--color-border); gap:.5rem; flex-wrap:wrap; }
.tabs-nav .nav-link{ border:none; border-bottom:3px solid transparent; color:var(--color-text-muted); font-weight:700; padding:.8rem .3rem; margin-inline-end:1.6rem; background:none; }
.tabs-nav .nav-link.active{ color:var(--color-primary); border-bottom-color:var(--color-primary); background:none; }

/* =========================================================
   SHOP PAGE - FULL WIDTH CATEGORY + PRODUCTS
   ========================================================= */

.shop-products-section {
  width: 100%;
  overflow-x: hidden;
}

/* Category filter */
.category-filter-top {
  width: 100%;
  max-width: none;
  margin: 0 0 28px;
  padding: 22px 24px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e4df);
  border-radius: 16px;
  box-sizing: border-box;
}

.category-filter-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
}

.category-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--primary, #1f4d3a);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.category-filter-header h2 {
  margin: 0;
  color: var(--text, #1f2d26);
  font-size: 24px;
  line-height: 1.2;
}

.category-subtitle {
  color: var(--muted, #777);
  font-size: 13px;
  text-align: right;
}

.category-filter-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.category-option {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px 18px;
  margin: 0;
  border: 1px solid #d7ddd8;
  border-radius: 999px;
  background: #fff;
  color: #25362d;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: .25s ease;
  box-sizing: border-box;
}

.category-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.category-option:hover {
  border-color: var(--primary, #1f4d3a);
  color: var(--primary, #1f4d3a);
  transform: translateY(-1px);
}

.category-option.active {
  background: var(--primary, #1f4d3a);
  border-color: var(--primary, #1f4d3a);
  color: #fff;
}

/* Full-width products */
.products-area {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.shop-toolbar {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.shop-toolbar-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.filter-control {
  display: flex;
  align-items: center;
  gap: 7px;
}

.filter-control > label:not(.pet-safe-control) {
  margin: 0;
  color: var(--muted, #777);
  font-size: 12px;
  font-weight: 700;
}

.filter-control .form-select {
  width: auto;
  min-width: 125px;
}

.pet-safe-control {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  min-height: 38px;
  padding: 7px 12px;
  border: 1px solid var(--border, #e2e4df);
  border-radius: 8px;
  background: var(--surface, #fff);
  color: var(--text, #25362d);
  font-size: 13px;
  cursor: pointer;
}

.pet-safe-control input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--primary, #1f4d3a);
}

/* Product grid must not inherit sidebar sizing */
.product-grid {
  width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.product-grid > [class*="col-"] {
  min-width: 0;
}

.product-grid .product-card {
  width: 100%;
  height: 100%;
}

.product-grid .media {
  width: 100%;
  overflow: hidden;
}

.product-grid .media img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

/* Remove any old sidebar/grid rules */
.shop-products-section .filter-sidebar {
  display: none !important;
}

/* Tablet */
@media (max-width: 991.98px) {
  .category-filter-top {
    padding: 20px;
    margin-bottom: 24px;
  }

  .category-filter-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .category-subtitle {
    text-align: left;
  }

  .shop-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .shop-toolbar-controls {
    width: 100%;
    justify-content: flex-start;
  }
}

/* Mobile */
@media (max-width: 575.98px) {
  .category-filter-top {
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 20px;
  }

  .category-filter-header h2 {
    font-size: 20px;
  }

  .category-filter-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .category-option {
    width: 100%;
    min-height: 40px;
    padding: 8px 9px;
    font-size: 12px;
    text-align: center;
  }

  .shop-toolbar {
    gap: 14px;
    margin-bottom: 20px;
  }

  .shop-toolbar-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .filter-control {
    width: 100%;
  }

  .filter-control .form-select,
  .pet-safe-control {
    width: 100%;
  }

  .filter-control > label:not(.pet-safe-control) {
    display: none;
  }
}

/* Product cards site-wide: CTAs remain visible without hover */
.product-card .quick-actions {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.product-card .quick-actions .btn {
  transform: none;
}

.product-card:hover .quick-actions,
.product-card:focus-within .quick-actions {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

@media (max-width: 575.98px) {
  .product-card .quick-actions {
    left: .55rem;
    right: .55rem;
    bottom: .55rem;
    gap: .4rem;
  }

  .product-card .quick-actions .btn {
    min-height: 40px;
    padding: .55em .55em;
    font-size: .75rem;
  }
}


/* ==========================================================
   ACCESSIBILITY + CONTRAST POLISH
   Clear text/CTA contrast in both themes and stronger header
   hover/focus states without changing the overall visual style.
   ========================================================== */

/* CTA defaults: keep primary actions visibly distinct from body text. */
.btn-primary,
.btn-accent{
  font-weight: 750;
  letter-spacing: .01em;
}

/* Light theme accent CTA: the previous #4C8C63 + white combination
   was too low-contrast for normal-size CTA text, so use the existing
   darker accent tone for the filled CTA. */
html[data-theme="light"] .btn-accent,
html:not([data-theme="dark"]) .btn-accent{
  --bs-btn-color: #fff;
  --bs-btn-bg: #3A6B4C;
  --bs-btn-border-color: #3A6B4C;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #2D573E;
  --bs-btn-hover-border-color: #2D573E;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #2D573E;
  --bs-btn-active-border-color: #2D573E;
}

/* Header navigation: make hover state unmistakable while retaining
   the existing accent color language. */
.main-nav .nav-link{
  border-radius: .55rem;
  transition: color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.main-nav .nav-link:hover,
.main-nav .nav-link:focus-visible{
  color: var(--color-heading) !important;
  background: var(--color-surface-alt);
  box-shadow: inset 0 -2px 0 var(--color-accent);
  outline: none;
}
.main-nav .nav-link.active{
  color: var(--color-accent) !important;
  background: transparent;
}
.main-nav .nav-link.active:hover,
.main-nav .nav-link.active:focus-visible{
  color: var(--color-heading) !important;
  background: var(--color-surface-alt);
}

/* Header icon controls get a visible hover/focus surface in both themes. */
.main-nav .btn-icon,
.main-nav .navbar-toggler,
.main-nav .rtl-toggle{
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.main-nav .btn-icon:hover,
.main-nav .btn-icon:focus-visible,
.main-nav .navbar-toggler:hover,
.main-nav .navbar-toggler:focus-visible,
.main-nav .rtl-toggle:hover,
.main-nav .rtl-toggle:focus-visible{
  color: var(--color-heading);
  background: var(--color-surface-alt);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 16%, transparent);
  outline: none;
  transform: translateY(-1px);
}

/* Dropdown hover/focus states should read clearly against the surface. */
.main-nav .dropdown-item:hover,
.main-nav .dropdown-item:focus-visible{
  color: var(--color-heading) !important;
  background: var(--color-surface-alt);
  box-shadow: inset 3px 0 0 var(--color-accent);
  outline: none;
}

/* Mobile navigation gets the same interaction treatment. */
.drawer-nav > li > a:hover,
.drawer-nav > li > a:focus-visible{
  color: var(--color-heading);
  background: var(--color-surface-alt);
  padding-inline: .65rem;
  border-radius: .5rem;
  outline: none;
}
.drawer-sub li a:hover,
.drawer-sub li a:focus-visible{
  color: var(--color-heading);
  background: var(--color-surface-alt);
  padding-inline: .65rem;
  border-radius: .5rem;
  outline: none;
}

/* Strong, theme-aware keyboard focus for CTAs and links. */
.btn:focus-visible,
a:focus-visible{
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

/* Keep icon-only controls from becoming visually heavy on hover. */
.main-nav .btn-icon:hover,
.main-nav .navbar-toggler:hover{
  transform: translateY(-1px);
}

/* Dark-mode contrast: use dark text on the lighter green CTA fills. */
html[data-theme="dark"] .btn-primary{
  --bs-btn-color: #0E140F;
  --bs-btn-bg: #5B9C7E;
  --bs-btn-border-color: #5B9C7E;
  --bs-btn-hover-color: #07100B;
  --bs-btn-hover-bg: #6EAF90;
  --bs-btn-hover-border-color: #6EAF90;
  --bs-btn-active-color: #07100B;
  --bs-btn-active-bg: #6EAF90;
  --bs-btn-active-border-color: #6EAF90;
}
html[data-theme="dark"] .btn-accent{
  --bs-btn-color: #0E140F;
  --bs-btn-bg: #7BC29A;
  --bs-btn-border-color: #7BC29A;
  --bs-btn-hover-color: #07100B;
  --bs-btn-hover-bg: #91D3AC;
  --bs-btn-hover-border-color: #91D3AC;
  --bs-btn-active-color: #07100B;
  --bs-btn-active-bg: #91D3AC;
  --bs-btn-active-border-color: #91D3AC;
}
html[data-theme="dark"] .btn-outline-secondary{
  --bs-btn-color: var(--color-heading);
  --bs-btn-border-color: var(--color-border-strong);
  --bs-btn-hover-color: #0E140F;
  --bs-btn-hover-bg: #9CC98C;
  --bs-btn-hover-border-color: #9CC98C;
  --bs-btn-active-color: #0E140F;
  --bs-btn-active-bg: #9CC98C;
  --bs-btn-active-border-color: #9CC98C;
}

/* Avoid muted text becoming too faint on dark surfaces. */
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .small.text-muted,
html[data-theme="dark"] .hero-copy p.lead,
html[data-theme="dark"] .hero-stat span,
html[data-theme="dark"] .drawer-sub li a{
  color: #B9C6BA !important;
}

/* =====================================================================
   FERNLEIGH TYPOGRAPHY SYSTEM — TWO STYLES ONLY
   1) Decorative: section/page headings only
   2) Clean: all body copy, card headings and UI text
   ===================================================================== */
:root {
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Jost', Arial, sans-serif;
}

/* Decorative typography is intentionally limited to major headings. */
h1,
h2,
.page-h1,
.section-title {
  font-family: var(--font-heading) !important;
  font-weight: 700;
  line-height: 1.15;
}

/* Clean/readable typography for cards, paragraphs and all interface text. */
h3,
h4,
h5,
h6,
.card,
.card h1,
.card h2,
.card h3,
.card h4,
.card h5,
.card h6,
.product-card .name,
.category-card h3,
.team-card h4,
.value-card h3,
.blog-card h3,
.hero-editorial .side-tile span,
.testi-quote,
.hero-stat strong,
.value-card .num,
.stat-row .num,
.process-step .step-num,
.v-n,
.p-n,
.error-code,
.error-page .big,
.pd-info .price,
.rating-summary .rs-score .num,
.avatar-ring,
.team-card .avatar,
.testi-avatar,
.author-box .avatar,
.modal-title,
.accordion-header,
footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6,
.navbar,
.navbar a,
button,
.btn,
.form-control,
.form-select,
input,
textarea,
select,
label,
small,
.badge,
.breadcrumb,
.dropdown-menu,
.dropdown-item {
  font-family: var(--font-body) !important;
}

/* Keep section headings decorative even when Bootstrap utility classes are present. */
h2.section-title,
.section-title,
.page-h1,
.hero h1,
.hero-title {
  font-family: var(--font-heading) !important;
}

/* Card headings remain clean and readable, even when rendered as h3/h4. */
.product-card .name,
.card .name,
.category-card h3,
.team-card h4,
.blog-card h3,
.value-card h3,
.accordion-header {
  font-family: var(--font-body) !important;
}

/* Guided shopping experience */
.shopping-journey .section-lead{max-width:680px;margin:.75rem auto 0;color:var(--color-text-muted);font-size:1rem;}
.journey-card{height:100%;display:flex;gap:1rem;align-items:flex-start;position:relative;padding:1.5rem;border:1px solid color-mix(in srgb,var(--color-heading) 12%,transparent);border-radius:var(--radius-lg);background:var(--color-surface);color:var(--color-text);text-decoration:none;box-shadow:0 12px 30px rgba(0,0,0,.04);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;}
.journey-card:hover,.journey-card:focus-visible{transform:translateY(-5px);border-color:var(--color-accent);box-shadow:0 18px 38px rgba(0,0,0,.09);color:var(--color-text);}
.journey-card:focus-visible{outline:3px solid color-mix(in srgb,var(--color-accent) 35%,transparent);outline-offset:3px;}
.journey-icon{flex:0 0 3rem;width:3rem;height:3rem;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--color-accent) 16%,transparent);color:var(--color-primary);font-size:1.25rem;}
.journey-card h3{font-family:var(--font-body);font-size:1.12rem;font-weight:750;margin:.2rem 0 .35rem;color:var(--color-heading);}
.journey-card p{margin:0;padding-right:1.25rem;color:var(--color-text-muted);font-size:.92rem;line-height:1.65;}
.journey-step{font-family:var(--font-body);font-size:.72rem;font-weight:800;letter-spacing:.12em;color:var(--color-accent);}
.journey-arrow{margin-inline-start:auto;align-self:center;color:var(--color-primary);transition:transform .2s ease;}
.journey-card:hover .journey-arrow,.journey-card:focus-visible .journey-arrow{transform:translateX(4px);}
html[dir="rtl"] .journey-card:hover .journey-arrow,html[dir="rtl"] .journey-card:focus-visible .journey-arrow{transform:translateX(-4px);}
html[data-theme="dark"] .journey-card{background:var(--color-surface-alt);border-color:rgba(255,255,255,.12);box-shadow:0 16px 34px rgba(0,0,0,.18);}
html[data-theme="dark"] .journey-card:hover,html[data-theme="dark"] .journey-card:focus-visible{border-color:var(--color-accent);}
@media (max-width:575.98px){.journey-card{padding:1.2rem}.journey-card p{padding-right:0}.journey-icon{flex-basis:2.7rem;width:2.7rem;height:2.7rem}}

/* =========================================================
   SITE-WIDE FULL-WIDTH LAYOUT
   Header, footer and every section span the viewport.
   Content keeps a consistent 20px edge gutter for readability.
   ========================================================= */
:root{
  --container-max: none;
  --container-pad: 20px;
}

.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl{
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

header,
.topbar,
.main-nav,
.site-header,
footer,
.site-footer,
section,
.section,
.page-banner,
.hero,
.hero-section{
  width: 100%;
  max-width: none;
}

.topbar > .container,
.main-nav > .container,
footer .container,
.site-footer .container{
  width: 100% !important;
  max-width: none !important;
}

/* Keep intentionally readable text blocks from becoming excessively long. */
.section-head,
.bloom-copy,
.hero-copy,
.banner-content,
.banner-desc,
.newsletter-box p,
.footer-brand p,
.article-body,
.pd-desc{
  box-sizing: border-box;
}

@media (min-width: 576px){
  :root{ --container-pad: 20px; }
}
@media (min-width: 768px){
  :root{ --container-pad: 20px; }
}
@media (min-width: 992px){
  :root{ --container-pad: 20px; }
}
@media (min-width: 1200px){
  :root{ --container-pad: 20px; }
}
@media (min-width: 1440px){
  :root{ --container-pad: 20px; }
}

/* =========================================================
   MOBILE HEADER POLISH
   Hide Search + Wishlist on phones, keep the logo left aligned,
   and retain the primary Order Now CTA.
   ========================================================= */
@media (max-width: 575.98px){
  .main-nav > .container{
    position: relative;
    min-height: 68px;
    justify-content: flex-end;
    padding-inline: 12px;
  }

  .main-nav .navbar-brand.brand-logo{
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 !important;
    padding: 0;
    z-index: 2;
  }

  .main-nav .brand-logo-img{
    height: 52px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
  }

  /* Search + heart are intentionally hidden on mobile. */
  .main-nav .nav-tools > .btn-icon[aria-label="Search products"],
  .main-nav .nav-tools > .btn-icon[aria-label="View wishlist"]{
    display: none !important;
  }

  .main-nav .nav-tools{
    margin-inline-start: auto;
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: .15rem;
  }

  .main-nav .header-cta{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: .5rem .72rem;
    font-size: .75rem;
    white-space: nowrap;
    position: relative;
    z-index: 4;
  }
}

/* Creative bento treatment for the home-page trust section */
.section-alt .section-head .section-lead{max-width:720px;margin:.75rem auto 0;color:var(--color-text-muted);font-size:1rem;}
.feature-card{position:relative;overflow:hidden;transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;}
.feature-card::after{content:"";position:absolute;inset:auto -28px -42px auto;width:150px;height:150px;border-radius:50%;background:color-mix(in srgb,var(--color-accent) 10%,transparent);pointer-events:none;transition:transform .35s ease;}
.feature-card:hover::after{transform:scale(1.25);}
.feature-card-featured{min-height:100%;display:flex;align-items:flex-start;gap:1.5rem;text-align:left;padding:2rem 2.2rem;background:linear-gradient(135deg,var(--color-surface),color-mix(in srgb,var(--color-accent) 8%,var(--color-surface)));}
.feature-card-featured .feature-card-top{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-start;gap:.75rem;}
.feature-card-featured .feature-kicker{font-size:.68rem;font-weight:800;letter-spacing:.14em;color:var(--color-accent);}
.feature-card-featured .ico-wrap{margin:0;width:72px;height:72px;font-size:1.8rem;}
.feature-card-featured .feature-card-copy{position:relative;z-index:1;padding-top:1.35rem;max-width:620px;}
.feature-card-featured h3{font-size:1.15rem;margin-bottom:.55rem;}
.feature-card-featured p{font-size:.98rem;line-height:1.75;}
.feature-card-mark{position:absolute;right:1.5rem;top:1.5rem;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--color-surface);color:var(--color-primary);box-shadow:var(--shadow-sm);z-index:2;}
html[dir="rtl"] .feature-card-featured{text-align:right;}
html[dir="rtl"] .feature-card-mark{right:auto;left:1.5rem;}
html[data-theme="dark"] .feature-card-featured{background:linear-gradient(135deg,var(--color-surface),color-mix(in srgb,var(--color-accent) 9%,var(--color-surface)));}
@media(max-width:767.98px){.feature-card-featured{flex-direction:column;padding:1.5rem;gap:.5rem}.feature-card-featured .feature-card-copy{padding-top:0}.feature-card-featured .ico-wrap{width:60px;height:60px;font-size:1.5rem}.feature-card-mark{right:1rem;top:1rem}.section-alt .section-head .section-lead{font-size:.94rem}}


/* Refined first-row cards — equal height, distinct visual systems */
.why-grid .feature-card-delivery,
.why-grid .feature-card-care{
  min-height:100%;
  display:flex;
  flex-direction:column;
  text-align:left;
  padding:1.55rem 1.6rem;
  background:linear-gradient(145deg,var(--color-surface),color-mix(in srgb,var(--color-accent) 5%,var(--color-surface)));
}
.feature-card-minihead{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.25rem;position:relative;z-index:2}
.feature-card-index{font-family:var(--font-heading);font-size:1.05rem;font-weight:700;color:var(--color-accent)}
.feature-card-label{font-size:.61rem;font-weight:800;letter-spacing:.14em;color:var(--color-text-muted)}
.feature-card-delivery-icon{display:flex;align-items:center;gap:.7rem;min-height:72px;margin-bottom:1.1rem;position:relative;z-index:1}
.feature-card-delivery .ico-wrap,.feature-card-care .ico-wrap{margin:0;width:62px;height:62px;flex:0 0 62px}
.delivery-line{display:flex;align-items:center;gap:7px;flex:1}
.delivery-line::before{content:"";height:1px;flex:1;background:repeating-linear-gradient(90deg,var(--color-border) 0 6px,transparent 6px 11px)}
.delivery-line i{width:7px;height:7px;border-radius:50%;background:var(--color-accent);display:block}
.delivery-destination{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--color-accent) 12%,var(--color-surface));color:var(--color-accent);font-size:1rem}
.feature-card-copy{position:relative;z-index:1}
.feature-card-delivery .feature-card-copy h3,.feature-card-care .feature-card-copy h3{font-size:1.15rem;margin-bottom:.55rem}
.feature-card-delivery .feature-card-copy p,.feature-card-care .feature-card-copy p{font-size:.9rem;line-height:1.65;margin:0;color:var(--color-text-muted)}
.feature-card-note{margin-top:auto;padding-top:1.1rem;font-size:.7rem;font-weight:700;letter-spacing:.02em;color:var(--color-accent);position:relative;z-index:1}
.feature-card-note::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--color-accent);margin-inline-end:.45rem;vertical-align:middle}
.feature-card-care-icon{position:relative;min-height:72px;display:flex;align-items:center;margin-bottom:1.1rem;z-index:1}
.care-pulse{position:absolute;left:31px;top:31px;width:62px;height:62px;border-radius:50%;border:1px solid color-mix(in srgb,var(--color-accent) 38%,transparent);animation:carePulse 2.6s ease-out infinite;pointer-events:none}
@keyframes carePulse{0%,100%{transform:scale(.82);opacity:.15}50%{transform:scale(1.18);opacity:.65}}
.care-status{margin-top:auto;padding-top:1rem;display:flex;flex-wrap:wrap;gap:.5rem;position:relative;z-index:1}
.care-status span{display:inline-flex;align-items:center;gap:.35rem;padding:.38rem .55rem;border:1px solid var(--color-border);border-radius:999px;font-size:.65rem;font-weight:700;color:var(--color-text-muted);background:color-mix(in srgb,var(--color-surface) 88%,transparent)}
.care-status i{color:var(--color-accent)}
.why-grid .feature-card-delivery:hover,.why-grid .feature-card-care:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--color-accent) 48%,var(--color-border));box-shadow:var(--shadow-md)}
html[dir="rtl"] .why-grid .feature-card-delivery,html[dir="rtl"] .why-grid .feature-card-care{text-align:right}
html[dir="rtl"] .care-pulse{left:auto;right:31px}
html[data-theme="dark"] .feature-card-note{color:var(--color-accent)}
@media(max-width:767.98px){
  .why-grid .feature-card-delivery,.why-grid .feature-card-care{padding:1.25rem}
  .feature-card-minihead{margin-bottom:1rem}
  .feature-card-delivery-icon,.feature-card-care-icon{min-height:64px;margin-bottom:.9rem}
  .feature-card-delivery .ico-wrap,.feature-card-care .ico-wrap{width:56px;height:56px;flex-basis:56px}
  .care-pulse{left:28px;top:28px;width:56px;height:56px}
  html[dir="rtl"] .care-pulse{left:auto;right:28px}
}

/* Premium home shopping journey */
.gift-order-showcase{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:center;padding:clamp(1.25rem,3vw,2rem);border:1px solid color-mix(in srgb,var(--color-heading) 10%,transparent);border-radius:32px;background:linear-gradient(135deg,var(--color-surface),color-mix(in srgb,var(--color-accent) 7%,var(--color-surface)));box-shadow:0 24px 60px rgba(0,0,0,.06);overflow:hidden}
.gift-order-visual{min-height:520px;position:relative;display:flex;align-items:center;justify-content:center}
.gift-image{position:absolute;overflow:hidden;border-radius:28px;box-shadow:0 24px 50px rgba(0,0,0,.16);border:8px solid var(--color-surface)}
.gift-image img{display:block;width:100%;height:100%;object-fit:cover}
.gift-image-main{width:min(72%,430px);height:470px;transform:rotate(-4deg);left:8%;top:25px}
.gift-image-small{width:42%;height:260px;right:4%;bottom:20px;transform:rotate(5deg)}
.gift-stamp{position:absolute;right:8%;top:7%;width:118px;height:118px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:var(--color-accent);color:#fff;box-shadow:0 14px 32px rgba(0,0,0,.14);transform:rotate(8deg);z-index:3}
.gift-stamp i{font-size:1.4rem;margin-bottom:.15rem}.gift-stamp strong{font-size:.82rem}.gift-stamp small{font-size:.68rem;opacity:.9}
.gift-order-content{padding:1rem 2rem 1rem 0}.gift-order-content .section-title{max-width:600px}.gift-order-content .section-lead{max-width:600px;margin:.8rem 0 1.4rem}
.gift-order-steps{border-top:1px solid var(--color-border)}
.gift-order-step{display:grid;grid-template-columns:42px 1fr 24px;gap:1rem;align-items:center;padding:1rem 0;border-bottom:1px solid var(--color-border);text-decoration:none;color:var(--color-text);transition:padding .2s ease,color .2s ease}
.gift-order-step:hover{padding-inline-start:.5rem;color:var(--color-primary)}.gift-order-step>span{font-size:.72rem;font-weight:800;letter-spacing:.12em;color:var(--color-accent)}.gift-order-step strong{display:block;color:var(--color-heading);font-size:1rem}.gift-order-step small{display:block;margin-top:.2rem;color:var(--color-text-muted);line-height:1.5}.gift-order-step>i{font-size:1rem}.gift-order-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.4rem}
html[data-theme="dark"] .gift-order-showcase{background:linear-gradient(135deg,var(--color-surface-alt),color-mix(in srgb,var(--color-accent) 8%,var(--color-surface-alt)));border-color:rgba(255,255,255,.12);box-shadow:0 24px 60px rgba(0,0,0,.2)}
html[data-theme="dark"] .gift-image{border-color:var(--color-surface-alt)}html[data-theme="dark"] .gift-order-step small{color:#fff}
.why-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;align-items:stretch}.why-grid .feature-card{min-height:100%;height:100%;display:flex;flex-direction:column}.why-grid .feature-card-featured{grid-column:auto;grid-row:auto}.why-grid .feature-card:not(.feature-card-featured){grid-column:auto}
@media(max-width:991.98px){.gift-order-showcase{grid-template-columns:1fr}.gift-order-content{padding:0 .5rem 1rem}.gift-order-visual{min-height:480px}.why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.why-grid .feature-card-featured{grid-column:auto;grid-row:auto}}
@media(max-width:767.98px){.gift-order-showcase{border-radius:24px;padding:1rem}.gift-order-visual{min-height:390px}.gift-image-main{height:350px;left:4%;width:72%}.gift-image-small{height:200px;width:43%;right:2%;bottom:10px}.gift-stamp{width:92px;height:92px;right:3%;top:3%}.gift-stamp i{font-size:1.1rem}.gift-stamp strong{font-size:.7rem}.gift-stamp small{font-size:.58rem}.gift-order-content{padding:0}.gift-order-step{grid-template-columns:34px 1fr 20px}.why-grid{grid-template-columns:1fr 1fr}.why-grid .feature-card-featured{grid-column:auto}.gift-order-actions .btn{flex:1}}

/* Signature treatment — Why Choose Us, row 2 / column 3 */
.why-grid .feature-card-business{
  position:relative;
  min-height:100%;
  padding:1.55rem;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--color-accent) 42%,var(--color-border));
  background:
    linear-gradient(145deg,color-mix(in srgb,var(--color-accent) 13%,var(--color-surface)) 0%,var(--color-surface) 58%,color-mix(in srgb,var(--color-primary) 7%,var(--color-surface)) 100%);
  box-shadow:var(--shadow-sm);
}
.why-grid .feature-card-business::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:5px;
  background:linear-gradient(180deg,var(--color-accent),var(--color-primary));
}
.why-grid .feature-card-business::after{
  width:190px;
  height:190px;
  right:-72px;
  bottom:-92px;
  background:color-mix(in srgb,var(--color-accent) 16%,transparent);
}
.feature-card-business-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1.15rem;
}
.feature-card-business .ico-wrap{
  width:58px;
  height:58px;
  margin:0;
  flex:0 0 58px;
  border-radius:18px;
  background:var(--color-primary);
  color:var(--color-surface);
  box-shadow:0 12px 26px color-mix(in srgb,var(--color-primary) 18%,transparent);
  font-size:1.35rem;
}
.feature-card-business-label{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:.35rem .65rem;
  border-radius:999px;
  background:color-mix(in srgb,var(--color-accent) 14%,var(--color-surface));
  color:var(--color-accent);
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.13em;
  line-height:1;
}
.feature-card-business-copy{
  position:relative;
  z-index:1;
  flex:1 1 auto;
  padding-left:.25rem;
}
.feature-card-business h3{
  margin-bottom:.55rem;
  max-width:17ch;
}
.feature-card-business p{
  max-width:34ch;
  margin:0;
}
.feature-card-business-arrow{
  position:absolute;
  right:1.15rem;
  bottom:1.05rem;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--color-surface);
  color:var(--color-primary);
  box-shadow:var(--shadow-sm);
  z-index:2;
  transition:transform .25s ease,background .25s ease,color .25s ease;
}
.why-grid .feature-card-business:hover{
  transform:translateY(-5px);
  border-color:var(--color-accent);
}
.why-grid .feature-card-business:hover .feature-card-business-arrow{
  transform:translate(2px,-2px);
  background:var(--color-primary);
  color:var(--color-surface);
}
html[dir="rtl"] .why-grid .feature-card-business::before{left:auto;right:0;}
html[dir="rtl"] .feature-card-business-copy{padding-left:0;padding-right:.25rem;}
html[dir="rtl"] .feature-card-business-arrow{right:auto;left:1.15rem;}
html[data-theme="dark"] .why-grid .feature-card-business{
  background:linear-gradient(145deg,color-mix(in srgb,var(--color-accent) 12%,var(--color-surface)),var(--color-surface) 62%,color-mix(in srgb,var(--color-primary) 10%,var(--color-surface)));
}
@media(max-width:767.98px){
  .why-grid .feature-card-business{padding:1.25rem;}
  .feature-card-business-head{margin-bottom:1rem;}
  .feature-card-business .ico-wrap{width:52px;height:52px;flex-basis:52px;border-radius:16px;}
}

@media(max-width:480px){.gift-order-visual{min-height:330px}.gift-image-main{height:295px}.gift-image-small{height:165px}.why-grid{grid-template-columns:1fr}.gift-order-actions .btn{width:100%;flex:auto}}
html[dir="rtl"] .gift-order-content{padding-left:2rem;padding-right:0}html[dir="rtl"] .gift-order-step:hover{padding-inline-start:0;padding-inline-end:.5rem}html[dir="rtl"] .gift-image-main{left:auto;right:8%;transform:rotate(4deg)}html[dir="rtl"] .gift-image-small{right:auto;left:4%;transform:rotate(-5deg)}html[dir="rtl"] .gift-stamp{right:auto;left:8%}
@media(max-width:767.98px){html[dir="rtl"] .gift-order-content{padding:0}html[dir="rtl"] .gift-image-main{right:4%}html[dir="rtl"] .gift-image-small{left:2%}html[dir="rtl"] .gift-stamp{left:3%}}

/* Footer newsletter: email text/placeholder always white (footer is dark in every theme). */
.footer-newsletter .form-control,
.footer-newsletter .form-control:focus{
  color:#fff !important;
}
.footer-newsletter .form-control::placeholder,
html[data-theme="light"] .footer-newsletter .form-control::placeholder,
html:not([data-theme="dark"]) .footer-newsletter .form-control::placeholder,
html[data-theme="dark"] .footer-newsletter .form-control::placeholder{
  color:#fff !important;
  opacity:1;
}

/* Why Choose Us — equal-height cards with aligned inner rows
   (icons share one top line, titles/descriptions share one baseline) */
.why-grid{align-items:stretch}
/* root cause: height/min-height:100% + padding on content-box made each card overflow its row by its own padding */
.why-grid .feature-card,.why-grid .feature-card-delivery,.why-grid .feature-card-care,.why-grid .feature-card-featured,.why-grid .feature-card-business{box-sizing:border-box;height:auto;min-height:0}
/* row 1: one shared header zone so all three icons sit on the same line */
.why-grid .feature-card-featured .feature-card-top{gap:.75rem}
.why-grid .feature-card-featured .feature-kicker{display:block;line-height:1.05rem}
.why-grid .feature-card-minihead{min-height:1.05rem;margin-bottom:.75rem}
.why-grid .feature-card-featured .ico-wrap,
.why-grid .feature-card-delivery .ico-wrap,
.why-grid .feature-card-care .ico-wrap{width:62px;height:62px;flex:0 0 62px;font-size:1.6rem}
.why-grid .feature-card-delivery-icon,
.why-grid .feature-card-care-icon{min-height:62px;margin-bottom:0}
.care-pulse{left:0;top:calc(50% - 31px)}
html[dir="rtl"] .care-pulse{left:auto;right:0}
/* copy block: identical spacing + type, pinned to the bottom of every card */
.why-grid .feature-card-copy{margin-top:auto;padding-top:1.25rem;max-width:none}
.why-grid .feature-card-featured .feature-card-copy h3,
.why-grid .feature-card-delivery .feature-card-copy h3,
.why-grid .feature-card-care .feature-card-copy h3{font-size:1.15rem;line-height:1.3;margin-bottom:.55rem}
.why-grid .feature-card-featured .feature-card-copy p,
.why-grid .feature-card-delivery .feature-card-copy p,
.why-grid .feature-card-care .feature-card-copy p{font-size:.9rem;line-height:1.65}
.care-status:empty{display:none}
/* row 2: signature card header matches the 64px icons beside it */
.why-grid .feature-card-business-head{min-height:64px;margin-bottom:1.1rem}
@media(max-width:767.98px){.why-grid .feature-card-copy{padding-top:1rem}}
.why-grid .feature-card-featured{padding:1.55rem 1.6rem}
.why-grid .feature-card-business{padding:2rem 1.6rem}
.why-grid .feature-card-business-head{align-items:flex-start}
@media(max-width:767.98px){.why-grid .feature-card-featured{padding:1.25rem}}

/* Why Choose Us — tablet layout: 2 columns with no orphan card.
   9 cards = featured card spans the full row + 4 rows of 2. */
@media(min-width:576px) and (max-width:991.98px){
  .why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .why-grid .feature-card-featured{grid-column:1 / -1;flex-direction:row;align-items:center;gap:1.75rem;padding:1.55rem 1.75rem}
  .why-grid .feature-card-featured .feature-card-copy{margin-top:0;padding:0 3rem 0 0;flex:1 1 auto}
  html[dir="rtl"] .why-grid .feature-card-featured .feature-card-copy{padding:0 0 0 3rem}
}
/* small phones / narrow tab frames: single column so cards stay readable */
@media(max-width:575.98px){
  .why-grid{grid-template-columns:1fr}
  .why-grid .feature-card-featured{grid-column:auto}
}
/* =========================================================
   QA FIXES
   1) Why Choose Us — every card uses one identical layout
      (icon top-left, then title, then text) so icons line up.
   2) Outline CTA on dark banners — readable on hover/focus.
   3) Desktop nav 992–1199px — links stay on one line, aligned.
   ========================================================= */

/* 1) Why Choose Us: consistent icon + copy alignment */
.why-grid .feature-card{
  display:flex; flex-direction:column; align-items:flex-start;
  text-align:left; padding:1.75rem 1.6rem; height:auto; min-height:0; box-sizing:border-box;
}
.why-grid .feature-card .ico-wrap{
  width:64px; height:64px; flex:0 0 64px; margin:0 0 1.15rem; font-size:1.6rem;
}
.why-grid .feature-card h3{ font-size:1.15rem; line-height:1.3; margin:0 0 .55rem; }
.why-grid .feature-card p{ font-size:.9rem; line-height:1.65; margin:0; }
html[dir="rtl"] .why-grid .feature-card{ text-align:right; align-items:flex-start; }
@media(min-width:576px) and (max-width:991.98px){
  .why-grid .feature-card:last-child{ grid-column:1 / -1; }
}

/* 2) Outline button used over dark photo/colour bands */
.btn-on-dark,
.btn-outline-secondary.btn-on-dark{
  --bs-btn-color:#fff; --bs-btn-border-color:rgba(255,255,255,.7);
  --bs-btn-bg:transparent;
  --bs-btn-hover-color:var(--color-primary-dark, #14392a); --bs-btn-hover-bg:#fff; --bs-btn-hover-border-color:#fff;
  --bs-btn-active-color:var(--color-primary-dark, #14392a); --bs-btn-active-bg:#fff; --bs-btn-active-border-color:#fff;
  --bs-btn-focus-shadow-rgb:255,255,255;
  color:#fff; border-color:rgba(255,255,255,.7);
}
.btn-on-dark:hover,.btn-on-dark:focus-visible,.btn-on-dark:active,
html[data-theme="dark"] .btn-on-dark:hover,html[data-theme="dark"] .btn-on-dark:focus-visible,html[data-theme="dark"] .btn-on-dark:active{
  background:#fff; border-color:#fff; color:#14392a;
}

/* 3) Desktop nav: no wrapping, even spacing between 992px and 1199px */
.main-nav .nav-links .nav-link{ white-space:nowrap; }
@media(min-width:992px) and (max-width:1199.98px){
  .main-nav > .container{ gap:.5rem; }
  .main-nav .brand-logo-img{ height:50px; }
  .main-nav .nav-links{ gap:.85rem; margin-inline:auto; flex-wrap:nowrap; align-items:center; }
  .main-nav .nav-links .nav-link{ font-size:.86rem; }
  .main-nav .nav-tools{ gap:.05rem; flex:none; }
  .main-nav .btn-icon{ width:34px; height:34px; font-size:.95rem; }
  .main-nav .header-cta{ min-height:38px; padding:.55rem .85rem; font-size:.82rem; margin-inline-start:.25rem; }
  .main-nav .rtl-toggle{ margin-inline-start:.25rem; padding-inline:.5rem; }
}