/* ==========================================================================
   OAK & EMBER — eCommerce HTML Template
   Version: 1.0.0
   Built on: Bootstrap 5.3.x
   --------------------------------------------------------------------------
   TABLE OF CONTENTS
   01. Design Tokens (CSS variables)
   02. Base & Typography
   03. Utilities & Helpers
   04. Buttons
   05. Announcement Bar
   06. Header & Navigation
   07. Hero
   08. Feature Strip (USP)
   09. Section Headings
   10. Category Tiles
   11. Product Card
   12. Promo Banners
   13. Deal of the Week (countdown)
   14. Testimonials
   15. Blog Cards
   16. Brand Strip
   17. Newsletter
   18. Footer
   19. Page Header / Breadcrumb
   20. Shop Page (filters, toolbar, pagination)
   21. Product Detail Page
   22. Cart Page
   23. Mini Cart (Offcanvas) & Toast
   24. Back To Top
   25. Responsive Tweaks
   26. Header: Mega Menu & Mobile Slide-in Menu
   27. Forms (inputs, validation, password toggle)
   28. Login / Register
   29. My Account
   30. Checkout
   31. Contact, FAQ & 404
   32. Blog (listing & post details)
    33. Track Order
    34. Product gallery - Swiper slider & image popup
     35. Product reviews tab - summary, list, star input & form
    36. Home carousels - testimonials & promo banners (Swiper)
    37. Shop filters - category tabs, colour swatches & empty state
    38. Preloader (page load)
    39. Brand logo mark (header)
   ========================================================================== */


/* ==========================================================================
   01. DESIGN TOKENS
   Change brand colours / fonts here — the whole template follows.
   ========================================================================== */
:root {
  /* Brand palette */
  --oe-forest:      #1f3a2e;   /* primary — deep forest green  */
  --oe-forest-700:  #172c23;
  --oe-ember:       #d9552b;   /* accent — terracotta ember    */
  --oe-ember-700:   #b9441f;
  --oe-sand:        #f6f1e9;   /* warm page background         */
  --oe-sand-200:    #ece4d6;
  --oe-ink:         #16181a;   /* headings / dark text         */
  --oe-muted:       #6d6a64;   /* secondary text               */
  --oe-line:        #e3dccd;   /* borders / dividers           */
  --oe-white:       #ffffff;
  --oe-gold:        #e8a317;   /* rating stars                 */

  /* Typography */
  --oe-font-head: "Fraunces", Georgia, serif;
  --oe-font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Shape & depth */
  --oe-radius:     14px;
  --oe-radius-sm:  8px;
  --oe-shadow:     0 10px 30px -12px rgba(22, 24, 26, .18);
  --oe-shadow-lg:  0 24px 50px -18px rgba(22, 24, 26, .28);
  --oe-ease:       cubic-bezier(.2, .7, .2, 1);

  /* Hook into Bootstrap's own variables so utilities match the brand */
  --bs-body-font-family: var(--oe-font-body);
  --bs-body-color:       var(--oe-ink);
  --bs-body-bg:          var(--oe-sand);
  --bs-link-color:       var(--oe-forest);
  --bs-link-hover-color: var(--oe-ember);
  --bs-border-color:     var(--oe-line);
}


/* ==========================================================================
   02. BASE & TYPOGRAPHY
   ========================================================================== */
body { font-size: 15.5px; line-height: 1.65; -webkit-font-smoothing: antialiased; }

h1, h2, h3, h4, h5, h6,
.font-head {
  font-family: var(--oe-font-head);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--oe-ink);
}

a { text-decoration: none; transition: color .2s var(--oe-ease); }
img { max-width: 100%; height: auto; }
::selection { background: var(--oe-ember); color: #fff; }

/* Keyboard focus ring (accessibility) */
:focus-visible { outline: 2px solid var(--oe-ember); outline-offset: 2px; }


/* ==========================================================================
   03. UTILITIES & HELPERS
   ========================================================================== */
.section-pad   { padding: 88px 0; }
.bg-sand-200   { background: var(--oe-sand-200); }
.bg-forest     { background: var(--oe-forest); color: #fff; }
.text-ember    { color: var(--oe-ember) !important; }
.text-muted-oe { color: var(--oe-muted) !important; }
.rounded-oe    { border-radius: var(--oe-radius) !important; }

/* Professional scroll reveal animation — keeps the content intact and just fades it into view. */
.reveal {
  opacity: 0;
  transform: translate3d(0, 30px, 0) scale(.98);
  filter: blur(8px);
  transition: opacity .8s var(--oe-ease), transform .8s var(--oe-ease), filter .8s var(--oe-ease);
  will-change: opacity, transform, filter;
}

.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

/* Image wrapper with fixed ratio + zoom on hover */
.img-zoom { overflow: hidden; border-radius: var(--oe-radius); position: relative; }
.img-zoom img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--oe-ease); }
.img-zoom:hover img { transform: scale(1.06); }

/* Small uppercase label above headings */
.eyebrow {
  display: inline-block; font-size: .75rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--oe-ember);
}


/* ==========================================================================
   04. BUTTONS
   ========================================================================== */
.btn { font-weight: 600; border-radius: 50px; padding: .72rem 1.6rem; transition: all .25s var(--oe-ease); }

.btn-oe {                       /* primary solid */
  background: var(--oe-forest); color: #fff; border: 2px solid var(--oe-forest);
}
.btn-oe:hover { background: var(--oe-ember); border-color: var(--oe-ember); color: #fff; transform: translateY(-2px); }

.btn-ember {                    /* accent solid */
  background: var(--oe-ember); color: #fff; border: 2px solid var(--oe-ember);
}
.btn-ember:hover { background: var(--oe-ember-700); border-color: var(--oe-ember-700); color: #fff; transform: translateY(-2px); }

.btn-outline-oe {               /* ghost */
  background: transparent; color: var(--oe-forest); border: 2px solid var(--oe-forest);
}
.btn-outline-oe:hover { background: var(--oe-forest); color: #fff; }

.btn-light-oe { background: #fff; color: var(--oe-forest); border: 2px solid #fff; }
.btn-light-oe:hover { background: var(--oe-ember); border-color: var(--oe-ember); color: #fff; }

/* Circular icon button (wishlist, quick view …) */
.btn-icon {
  width: 40px; height: 40px; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--oe-ink); border: 0; box-shadow: var(--oe-shadow);
}
.btn-icon:hover, .btn-icon.active { background: var(--oe-ember); color: #fff; }


/* ==========================================================================
   05. ANNOUNCEMENT BAR
   ========================================================================== */
.topbar { background: var(--oe-forest); color: #e8efe9; font-size: .82rem; padding: 9px 0; }
.topbar a { color: #e8efe9; }
.topbar a:hover { color: #fff; text-decoration: underline; }


/* ==========================================================================
   06. HEADER & NAVIGATION
   ========================================================================== */
.site-header {
  background: rgba(246, 241, 233, .92); backdrop-filter: blur(10px);
  position: sticky; top: 0; z-index: 1030;
  border-bottom: 1px solid var(--oe-line); transition: box-shadow .3s;
}
.site-header.is-stuck { box-shadow: 0 8px 24px -14px rgba(0, 0, 0, .35); }   /* toggled by main.js */

.brand { font-family: var(--oe-font-head); font-size: 1.65rem; font-weight: 700; color: var(--oe-forest); }
.brand span { color: var(--oe-ember); font-style: italic; }
.brand:hover { color: var(--oe-forest); }

.navbar-nav .nav-link {
  font-weight: 600; color: var(--oe-ink); padding: 1.35rem .95rem !important; position: relative;
}
.navbar-nav .nav-link::before {           /* animated underline (::after is kept for the dropdown caret) */
  content: ""; position: absolute; left: .95rem; right: .95rem; bottom: .95rem;
  height: 2px; background: var(--oe-ember); transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--oe-ease);
}
.navbar-nav .nav-link:hover::before,
.navbar-nav .nav-link.active::before { transform: scaleX(1); }
.navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { color: var(--oe-ember); }

/* Dropdown + mega menu */
.dropdown-menu { border: 1px solid var(--oe-line); border-radius: var(--oe-radius-sm); box-shadow: var(--oe-shadow); padding: .6rem; }
.dropdown-item { border-radius: 6px; padding: .45rem .9rem; font-weight: 500; }
.dropdown-item:hover { background: var(--oe-sand-200); color: var(--oe-ember); }
/* Hover-open + full-width mega menu: see section 26 */

/* Header action icons (search / wishlist / cart) */
.header-actions .action-btn {
  position: relative; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--oe-ink); background: transparent; border: 0; font-size: 1.2rem;
}
.header-actions .action-btn:hover { background: var(--oe-sand-200); color: var(--oe-ember); }
/* Optical balance: Bootstrap draws the bi-person glyph ~20% smaller than its
   sibling glyphs (search / heart / bag), so bump it slightly to line up with
   the rest of the header row. em-based, so it follows the mobile sizing too. */
.header-actions .action-btn .bi-person { font-size: 1.25em; }
.badge-count {
  position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px;
  font-size: .68rem; font-weight: 700; line-height: 18px; text-align: center;
  background: var(--oe-ember); color: #fff; border-radius: 20px;
}

/* Language + currency switchers (pill-shaped variant of .action-btn) */
.header-actions .action-btn--text {
  width: auto; padding: 0 .7rem; gap: .3rem; border-radius: 22px;
  font-size: .8rem; font-weight: 700; letter-spacing: .04em;
}
.header-actions .action-btn--text .bi { font-size: 1.05rem; }
.locale-menu { min-width: 200px; }
.locale-menu .dropdown-item { display: flex; align-items: center; gap: .5rem; }
.locale-menu .dropdown-item .bi { margin-left: auto; }
.locale-menu .dropdown-item.active { background: var(--oe-sand-200); color: var(--oe-ember); }
.locale-menu .dropdown-item.active .bi { color: var(--oe-ember); }
/* Same options, as chips, inside the mobile slide-in menu */
.mobile-locale .btn { font-size: .8rem; font-weight: 600; }
.mobile-locale .mega-title { margin-bottom: .55rem; }

/* Search overlay */
.search-modal .modal-content { border: 0; border-radius: var(--oe-radius); }
.search-modal .form-control { border: 0; border-bottom: 2px solid var(--oe-ink); border-radius: 0; font-size: 1.4rem; background: transparent; font-family: var(--oe-font-head); }
.search-modal .form-control:focus { box-shadow: none; border-color: var(--oe-ember); }


/* ==========================================================================
   07. HERO
   Editorial hero — layered backdrop, arched portrait, rotating seal.
   ========================================================================== */
.hero { position: relative; padding: 84px 0 116px; isolation: isolate; overflow: hidden; }

/* --- decorative backdrop --- */
.hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hero-orb { position: absolute; border-radius: 50%; }
.orb-1 {
  width: 640px; height: 640px; right: -170px; top: -190px;
  background: radial-gradient(circle at 32% 32%, rgba(217, 85, 43, .26) 0%, rgba(217, 85, 43, 0) 66%);
}
.orb-2 {
  width: 540px; height: 540px; left: -200px; bottom: -240px;
  background: radial-gradient(circle at 50% 50%, rgba(31, 58, 46, .16) 0%, rgba(31, 58, 46, 0) 68%);
}
.hero-dots {                              /* fading dot grid texture */
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(31, 58, 46, .13) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 68% 62% at 50% 42%, #000 0%, transparent 76%);
          mask-image: radial-gradient(ellipse 68% 62% at 50% 42%, #000 0%, transparent 76%);
  opacity: .55;
}

/* --- copy --- */
.hero h1 { font-size: clamp(2.7rem, 5.8vw, 4.9rem); line-height: 1.03; letter-spacing: -.012em; margin: 1.15rem 0 1.3rem; text-wrap: balance; }
.hero h1 em { color: var(--oe-ember); font-weight: 500; position: relative; white-space: nowrap; }
.hero h1 em::after {                              /* hand-underline accent */
  content: ""; position: absolute; left: 0; right: 0; bottom: .05em; height: .1em; border-radius: 999px;
  background: linear-gradient(90deg, rgba(217, 85, 43, .38), rgba(217, 85, 43, .04));
}
.hero p.lead { color: var(--oe-muted); max-width: 485px; font-size: 1.06rem; line-height: 1.75; }

.hero-eyebrow {                                 /* pill badge variant */
  display: inline-flex; align-items: center; gap: .7rem;
  padding: .5rem 1.05rem; border-radius: 999px;
  background: #fff; border: 1px solid var(--oe-line); box-shadow: var(--oe-shadow);
  color: var(--oe-forest);
}
.hero-eyebrow .eyebrow-line { width: 26px; height: 2px; border-radius: 2px; background: var(--oe-ember); }

.hero-cta .btn-lg { padding: .9rem 1.9rem; }
.hero-cta .btn i { transition: transform .25s var(--oe-ease); display: inline-block; }
.hero-cta .btn:hover i { transform: translateX(4px); }

/* --- stats bar --- */
.hero-stats {
  display: inline-flex; align-items: center; flex-wrap: wrap;
  margin-top: 2.9rem; padding: 1.05rem 1.7rem;
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(227, 220, 205, .9); border-radius: var(--oe-radius);
  box-shadow: var(--oe-shadow); max-width: 100%;
}
.hero-stat { padding: 0 1.85rem; }
.hero-stat:first-child { padding-left: 0; }
.hero-stat:last-child { padding-right: 0; }
.hero-stat + .hero-stat { border-left: 1px solid var(--oe-line); }
.hero-stat strong { font-family: var(--oe-font-head); font-size: 1.85rem; display: block; line-height: 1.15; color: var(--oe-forest); }
.hero-stat small { color: var(--oe-muted); font-size: .82rem; letter-spacing: .01em; }

/* --- visual --- */
.hero-visual { position: relative; }
.hero-visual .main-img {
  position: relative; z-index: 2;
  border-radius: 240px 24px 240px 24px;          /* organic leaf / petal shape */
  aspect-ratio: 4 / 5; object-fit: cover; width: 100%;
  box-shadow: var(--oe-shadow-lg);
}
.hv-frame {                                     /* offset outline behind portrait */
  position: absolute; inset: 30px -24px -30px 30px; z-index: 1; pointer-events: none;
  border: 1.5px solid var(--oe-ember); opacity: .4; border-radius: 240px 24px 240px 24px;
}

.hv-seal {                                      /* rotating brand seal (top-left notch) */
  position: absolute; z-index: 4; left: -16px; top: 14px;
  width: 118px; height: 118px; border-radius: 50%;
  background: var(--oe-forest); color: #fff; display: grid; place-items: center;
  box-shadow: var(--oe-shadow-lg);
}
.hv-seal svg { position: absolute; inset: 7px; width: calc(100% - 14px); height: calc(100% - 14px); animation: seal-spin 22s linear infinite; }
.hv-seal text { font-family: var(--oe-font-body); font-size: 10.6px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; fill: rgba(255, 255, 255, .9); }
.hv-seal > .bi { font-size: 1.4rem; color: #fff; }

.hero-visual .float-card {
  position: absolute; z-index: 5;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .8); border-radius: var(--oe-radius);
  padding: 13px 18px; box-shadow: var(--oe-shadow-lg);
  display: flex; align-items: center; gap: 12px;
  animation: floaty 6s ease-in-out infinite;
}
.hero-visual .float-card.fc-1 { left: -30px; bottom: 64px; }
.hero-visual .float-card.fc-2 { right: -10px; top: 56px; animation-delay: -2.4s; }
.float-card .ico { width: 44px; height: 44px; border-radius: 50%; background: var(--oe-sand-200); color: var(--oe-ember); display: grid; place-items: center; font-size: 1.2rem; }

/* --- entrance motion --- */
@keyframes hero-up   { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes hero-in   { from { opacity: 0; transform: translateY(30px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes floaty    { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes seal-spin { to { transform: rotate(360deg); } }
.hero-copy .hero-eyebrow { animation: hero-up .7s .05s var(--oe-ease) both; }
.hero-copy h1          { animation: hero-up .7s .15s var(--oe-ease) both; }
.hero-copy .lead       { animation: hero-up .7s .25s var(--oe-ease) both; }
.hero-copy .hero-cta   { animation: hero-up .7s .35s var(--oe-ease) both; }
.hero-copy .hero-stats { animation: hero-up .7s .45s var(--oe-ease) both; }
.hero-visual           { animation: hero-in 1s .2s var(--oe-ease) both; }


/* ==========================================================================
   08. FEATURE STRIP (USP)
   ========================================================================== */
.usp { background: #fff; border-radius: var(--oe-radius); box-shadow: var(--oe-shadow); margin-top: -46px; position: relative; z-index: 2; padding: 26px 10px; }
.usp-item { display: flex; align-items: center; gap: 14px; padding: 6px 20px; }
.usp-item i { font-size: 1.9rem; color: var(--oe-ember); }
.usp-item h6 { margin: 0; font-family: var(--oe-font-body); font-weight: 700; font-size: .95rem; }
.usp-item small { color: var(--oe-muted); }
@media (min-width: 992px) { .usp .col-lg-3 + .col-lg-3 { border-left: 1px dashed var(--oe-line); } }


/* ==========================================================================
   09. SECTION HEADINGS
   ========================================================================== */
.section-head { margin-bottom: 2.6rem; }
.section-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin: .4rem 0 0; }
.section-head p { color: var(--oe-muted); max-width: 520px; }

/* Underlined tab filter (home product tabs) */
.tab-filter { gap: 1.6rem; border: 0; }
.tab-filter .nav-link { color: var(--oe-muted); font-weight: 700; padding: .3rem 0; border: 0; background: none; position: relative; }
.tab-filter .nav-link.active, .tab-filter .nav-link:hover { color: var(--oe-ink); background: none; }
.tab-filter .nav-link.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--oe-ember); }


/* ==========================================================================
   10. CATEGORY TILES
   ========================================================================== */
.cat-tile { position: relative; display: block; border-radius: var(--oe-radius); overflow: hidden; min-height: 300px; color: #fff; }
.cat-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--oe-ease); }
.cat-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(10,20,15,.72) 100%); }
.cat-tile:hover img { transform: scale(1.08); }
.cat-tile .cat-body { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 20px; display: flex; justify-content: space-between; align-items: end; }
.cat-tile h3 { color: #fff; font-size: 1.45rem; margin: 0; }
.cat-tile small { opacity: .85; }
.cat-tile .arrow { width: 42px; height: 42px; border-radius: 50%; background: #fff; color: var(--oe-ink); display: grid; place-items: center; transition: .3s; }
.cat-tile:hover .arrow { background: var(--oe-ember); color: #fff; transform: rotate(-45deg); }
.cat-tile.tall { min-height: 100%; }


/* ==========================================================================
   11. PRODUCT CARD
   ========================================================================== */
.product-card { background: #fff; border-radius: var(--oe-radius); overflow: hidden; height: 100%; transition: transform .35s var(--oe-ease), box-shadow .35s; border: 1px solid transparent; }
.product-card:hover { transform: translateY(-6px); box-shadow: var(--oe-shadow-lg); border-color: var(--oe-line); }

.product-media { position: relative; aspect-ratio: 4 / 4.6; overflow: hidden; background: var(--oe-sand-200); }
.product-media img { width: 100%; height: 100%; object-fit: cover; transition: opacity .5s, transform .8s var(--oe-ease); }
.product-media .img-hover { position: absolute; inset: 0; opacity: 0; }            /* second image shown on hover */
.product-card:hover .img-hover { opacity: 1; }
.product-card:hover .product-media img { transform: scale(1.05); }

.product-badges { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.pbadge { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 30px; background: var(--oe-forest); color: #fff; }
.pbadge.sale { background: var(--oe-ember); }

/* Hover action buttons slide in from the right */
.product-actions { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; gap: 8px; z-index: 2; }
.product-actions .btn-icon { opacity: 0; transform: translateX(14px); transition: .35s var(--oe-ease); }
.product-card:hover .product-actions .btn-icon { opacity: 1; transform: none; }
.product-actions .btn-icon:nth-child(2) { transition-delay: .05s; }
.product-actions .btn-icon:nth-child(3) { transition-delay: .1s; }
@media (hover: none) { .product-actions .btn-icon { opacity: 1; transform: none; } }  /* always visible on touch */

/* "Add to cart" bar slides up from bottom */
.add-to-cart-bar {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2;
  transform: translateY(120%); transition: transform .35s var(--oe-ease);
}
.product-card:hover .add-to-cart-bar { transform: none; }
@media (hover: none) { .add-to-cart-bar { transform: none; } }
.add-to-cart-bar .btn { width: 100%; padding: .6rem 1rem; font-size: .9rem; }

.product-info { padding: 16px 18px 20px; }
.product-info .cat { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--oe-muted); }
.product-info h3 { font-family: var(--oe-font-body); font-size: 1.02rem; font-weight: 600; margin: 4px 0 6px; }
.product-info h3 a { color: var(--oe-ink); }
.product-info h3 a:hover { color: var(--oe-ember); }
.rating { color: var(--oe-gold); font-size: .8rem; letter-spacing: 1px; }
.price { font-weight: 700; font-size: 1.05rem; }
.price del { color: var(--oe-muted); font-weight: 400; font-size: .9rem; margin-left: 6px; }
.price .now { color: var(--oe-ember); }

/* Colour swatches */
.swatches { display: flex; gap: 6px; margin-top: 8px; }
.swatch { width: 16px; height: 16px; padding: 0; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--oe-line); cursor: pointer; transition: transform .2s var(--oe-ease), box-shadow .2s var(--oe-ease); }
.swatch:hover { transform: scale(1.12); }
.swatch:focus-visible { outline: 2px solid var(--oe-ember); outline-offset: 3px; }
.swatch.active { box-shadow: 0 0 0 2px var(--oe-ink); }


/* ==========================================================================
   12. PROMO BANNERS
   ========================================================================== */
.promo { position: relative; border-radius: var(--oe-radius); overflow: hidden; min-height: 320px; display: flex; align-items: center; padding: 40px; color: #fff; }
.promo img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform .8s var(--oe-ease); }
.promo:hover img.bg { transform: scale(1.05); }
.promo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(23,44,35,.88) 0%, rgba(23,44,35,.1) 80%); }
.promo.promo-warm::before { background: linear-gradient(90deg, rgba(185,68,31,.88) 0%, rgba(185,68,31,.05) 80%); }
.promo .content { position: relative; z-index: 2; max-width: 300px; }
.promo h3 { color: #fff; font-size: 2rem; }
.promo .eyebrow { color: #ffd6c4; }


/* ==========================================================================
   13. DEAL OF THE WEEK (countdown)
   ========================================================================== */
.deal-box { background: var(--oe-forest); color: #fff; border-radius: calc(var(--oe-radius) + 8px); overflow: hidden; }
.deal-box h2, .deal-box h3 { color: #fff; }
.deal-box .deal-img { height: 100%; min-height: 380px; object-fit: cover; width: 100%; }
.countdown { display: flex; gap: 12px; margin: 1.4rem 0 1.8rem; }
.countdown .cd-cell { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 12px; padding: 12px 6px; width: 78px; text-align: center; }
.countdown .cd-cell b { display: block; font-family: var(--oe-font-head); font-size: 1.8rem; line-height: 1; }
.countdown .cd-cell span { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.deal-box .price .now { color: #ffb598; font-size: 1.8rem; }
.deal-box .price del { color: rgba(255,255,255,.6); }


/* ==========================================================================
   14. TESTIMONIALS
   ========================================================================== */
.testi-card { background: #fff; border-radius: var(--oe-radius); padding: 30px; height: 100%; position: relative; }
.testi-card::before { content: "\201C"; font-family: var(--oe-font-head); font-size: 5rem; line-height: 1; color: var(--oe-sand-200); position: absolute; top: 12px; right: 24px; }
.testi-card .who { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.testi-card .who img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.testi-card .who strong { display: block; line-height: 1.2; }
.testi-card .who small { color: var(--oe-muted); }


/* ==========================================================================
   15. BLOG CARDS
   ========================================================================== */
.post-card .img-zoom { aspect-ratio: 16 / 11; }
.post-card .meta { font-size: .8rem; color: var(--oe-muted); margin: 16px 0 6px; }
.post-card h3 { font-size: 1.3rem; }
.post-card h3 a { color: var(--oe-ink); }
.post-card h3 a:hover { color: var(--oe-ember); }
.link-arrow { font-weight: 700; color: var(--oe-forest); }
.link-arrow i { transition: transform .25s; display: inline-block; }
.link-arrow:hover i { transform: translateX(5px); }


/* ==========================================================================
   16. BRAND STRIP
   ========================================================================== */
.brand-strip { border-top: 1px solid var(--oe-line); border-bottom: 1px solid var(--oe-line); padding: 34px 0; }
.brand-strip span { font-family: var(--oe-font-head); font-size: 1.5rem; font-weight: 600; color: #b9b3a6; transition: color .25s; letter-spacing: .02em; }
.brand-strip span:hover { color: var(--oe-forest); }


/* ==========================================================================
   17. NEWSLETTER
   ========================================================================== */
.newsletter { background: var(--oe-ember); color: #fff; border-radius: calc(var(--oe-radius) + 8px); padding: 56px 40px; position: relative; overflow: hidden; }
.newsletter h2 { color: #fff; }
.newsletter::after { content: ""; position: absolute; width: 340px; height: 340px; border-radius: 50%; border: 50px solid rgba(255,255,255,.08); right: -90px; bottom: -150px; }
.newsletter .input-group { background: #fff; border-radius: 50px; padding: 5px; max-width: 520px; }
.newsletter .form-control { border: 0; background: transparent; box-shadow: none; padding-left: 20px; }
.newsletter .btn { background: var(--oe-forest); color: #fff; }
.newsletter .btn:hover { background: var(--oe-ink); }


/* ==========================================================================
   18. FOOTER
   ========================================================================== */
a{
  transition: .5s;
}
.site-footer { background: var(--oe-forest-700); color: #b9c7bf; padding: 80px 0 0; margin-top: 90px; }
.site-footer h5 { color: #fff; font-family: var(--oe-font-body); font-weight: 700; font-size: 1rem; margin-bottom: 1.2rem; }
.site-footer a { color: #b9c7bf; }
.site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .55rem; }
.site-footer .brand { color: #fff; }
.social a {  transition: .5s; width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); margin-right: 8px; }
.social a:hover { background: var(--oe-ember); border-color: var(--oe-ember); color: #fff; padding-left: 0; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 56px; padding: 22px 0; font-size: .85rem; }
.pay-icons i { font-size: 1.7rem; margin-left: 10px; opacity: .8; }


/* ==========================================================================
   19. PAGE HEADER / BREADCRUMB (inner pages)
   ========================================================================== */
.page-header { background: var(--oe-sand-200); padding: 54px 0; text-align: center; position: relative; overflow: hidden; }
.page-header h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: .6rem; }
.breadcrumb { justify-content: center; margin: 0; font-size: .88rem; }
.breadcrumb-item a { color: var(--oe-muted); }
.breadcrumb-item.active { color: var(--oe-ember); }


/* ==========================================================================
   20. SHOP PAGE
   ========================================================================== */
.filter-box { background: #fff; border-radius: var(--oe-radius); padding: 24px; margin-bottom: 20px; }
.filter-box h5 { font-family: var(--oe-font-body); font-size: .95rem; font-weight: 700; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: .06em; }
.filter-list { list-style: none; padding: 0; margin: 0; }
.filter-list li { display: flex; justify-content: space-between; padding: 6px 0; }
.filter-list a { color: var(--oe-ink); }
.filter-list a:hover { color: var(--oe-ember); }
.filter-list span { color: var(--oe-muted); font-size: .85rem; }
.form-check-input:checked { background-color: var(--oe-forest); border-color: var(--oe-forest); }
.form-range::-webkit-slider-thumb { background: var(--oe-ember); }
.form-range::-moz-range-thumb { background: var(--oe-ember); }

.shop-toolbar { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; background: #fff; border-radius: var(--oe-radius); padding: 12px 18px; margin-bottom: 24px; }
.shop-toolbar .form-select { border-radius: 50px; border-color: var(--oe-line); max-width: 200px; }
.view-toggle .btn { width: 38px; height: 38px; padding: 0; border-radius: 10px; }

.pagination .page-link { border: 0; border-radius: 50% !important; width: 42px; height: 42px; display: grid; place-items: center; margin: 0 4px; color: var(--oe-ink); background: #fff; }
.pagination .page-item.active .page-link, .pagination .page-link:hover { background: var(--oe-forest); color: #fff; }


/* ==========================================================================
   21. PRODUCT DETAIL PAGE
   ========================================================================== */
.gallery-main { border-radius: var(--oe-radius); overflow: hidden; background: #fff; }
.gallery-main img { width: 100%; aspect-ratio: 1 / 1.1; object-fit: cover; }
.gallery-thumbs { display: flex; gap: 12px; margin-top: 12px; }
.gallery-thumbs img { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; cursor: pointer; border: 2px solid transparent; opacity: .7; transition: .25s; }
.gallery-thumbs img.active, .gallery-thumbs img:hover { border-color: var(--oe-ember); opacity: 1; }

.pd-title { font-size: clamp(1.8rem, 3vw, 2.5rem); }
.pd-price { font-size: 1.8rem; font-weight: 700; }
.pd-price .now { color: var(--oe-ember); }
.pd-price del { font-size: 1.1rem; color: var(--oe-muted); font-weight: 400; }

/* Size selector pills */
.size-opts { display: flex; flex-wrap: wrap; gap: 10px; }
.size-opts input { display: none; }
.size-opts label { min-width: 48px; text-align: center; padding: 8px 14px; border: 1.5px solid var(--oe-line); border-radius: 10px; cursor: pointer; font-weight: 600; transition: .2s; background: #fff; }
.size-opts input:checked + label, .size-opts label:hover { border-color: var(--oe-forest); background: var(--oe-forest); color: #fff; }

/* Quantity stepper (shared with cart) */
.qty { display: inline-flex; align-items: center; background: #fff; border: 1.5px solid var(--oe-line); border-radius: 50px; }
.qty button { width: 40px; height: 44px; border: 0; background: none; font-size: 1.1rem; color: var(--oe-ink); }
.qty button:hover { color: var(--oe-ember); }
.qty input { width: 44px; text-align: center; border: 0; background: none; font-weight: 700; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; }

.pd-meta li { padding: 4px 0; color: var(--oe-muted); list-style: none; }
.pd-meta b { color: var(--oe-ink); }
.pd-tabs .nav-link { color: var(--oe-muted); font-weight: 700; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: .8rem 1.4rem; }
.pd-tabs .nav-link.active { color: var(--oe-ink); border-color: var(--oe-ember); background: none; }


/* ==========================================================================
   22. CART PAGE
   ========================================================================== */
.cart-table { background: #fff; border-radius: var(--oe-radius); overflow: hidden; }
.cart-table th { background: var(--oe-sand-200); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; padding: 16px; border: 0; }
.cart-table td { padding: 20px 16px; vertical-align: middle; border-color: var(--oe-line); }
.cart-table img { width: 80px; height: 96px; object-fit: cover; border-radius: 10px; }
.remove-item { color: var(--oe-muted); background: none; border: 0; font-size: 1.2rem; }
.remove-item:hover { color: var(--oe-ember); }
.summary-box { background: #fff; border-radius: var(--oe-radius); padding: 30px; position: sticky; top: 100px; }
.summary-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed var(--oe-line); }
.summary-row.total { font-size: 1.25rem; font-weight: 700; border: 0; padding-top: 16px; }
.free-ship { height: 8px; background: var(--oe-sand-200); border-radius: 10px; overflow: hidden; }
.free-ship span { display: block; height: 100%; background: var(--oe-ember); border-radius: 10px; transition: width .5s var(--oe-ease); }


/* ==========================================================================
   23. MINI CART (OFFCANVAS) & TOAST
   ========================================================================== */
.offcanvas { background: var(--oe-sand); }
.mini-item { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--oe-line); }
.mini-item img { width: 70px; height: 84px; object-fit: cover; border-radius: 10px; }
.mini-item h6 { font-family: var(--oe-font-body); font-weight: 600; font-size: .95rem; margin: 0 0 2px; }

.toast-oe { background: var(--oe-forest); color: #fff; border-radius: 50px; border: 0; }
.toast-oe .btn-close { filter: invert(1); }


/* ==========================================================================
   24. BACK TO TOP
   ========================================================================== */
#backToTop {
  position: fixed; right: 22px; bottom: 22px; width: 48px; height: 48px; border-radius: 50%;
  background: var(--oe-forest); color: #fff; border: 0; display: grid; place-items: center;
  opacity: 0; visibility: hidden; transform: translateY(14px); transition: .3s; z-index: 1000; box-shadow: var(--oe-shadow);
}
#backToTop.show { opacity: 1; visibility: visible; transform: none; }
#backToTop:hover { background: var(--oe-ember); }


/* ==========================================================================
   25. RESPONSIVE TWEAKS
   ========================================================================== */
@media (max-width: 991.98px) {
  .section-pad { padding: 64px 0; }
  .navbar-nav .nav-link { padding: .8rem 0 !important; }
  .navbar-nav .nav-link::before { display: none; }
  .hero { padding: 48px 0 96px; }
  .hero-visual { margin-top: 3.4rem; }
  .hero-visual .float-card.fc-1 { left: 0; }
  .hero-visual .float-card.fc-2 { right: 0; }
  .hv-frame { inset: 22px -14px -22px 22px; }
  .hv-seal { left: 0; top: -18px; width: 98px; height: 98px; }
  .hv-seal text { font-size: 11.4px; }
  .summary-box { position: static; margin-top: 24px; }
}
@media (max-width: 575.98px) {
  .promo { padding: 28px; }
  .newsletter { padding: 40px 22px; }
  .hero-stats { width: 100%; padding: 1rem 1.15rem; }
  .hero-stat { padding: 0 1rem; }
  .hero-stat strong { font-size: 1.5rem; }
  .hero-stat small { font-size: .74rem; }
  .countdown .cd-cell { width: 64px; }
  .cart-table .hide-xs { display: none; }
  /* Header: keep brand + all action icons on one row on the smallest phones */
  .navbar-brand.brand { font-size: 1.35rem; margin-right: .75rem; }
  .header-actions .action-btn { width: 38px; height: 38px; font-size: 1.1rem; }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}


/* ==========================================================================
   26. HEADER: MEGA MENU & MOBILE SLIDE-IN MENU
   Desktop (>=992px): inline menu, mega menu opens on hover, full container width.
   Mobile  (<992px) : offcanvas slide-in menu, dropdowns open on tap.
   ========================================================================== */
body { overflow-x: clip; }                                  /* never allow sideways scroll */

.site-header .navbar { padding: 0; }
.site-header .navbar > .container { position: relative; min-height: 72px; }   /* mega menu anchors to this */
.navbar-brand.brand { padding: .8rem 0; margin-right: 1.5rem; }
.account-menu { min-width: 210px; }
.navbar-toggler { color: var(--oe-ink); }

/* ---- Mega menu content ---- */
.mega-title { font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--oe-ember); margin-bottom: .6rem; }
.mega-menu .dropdown-item { padding: .38rem 0; background: none; transition: padding .2s, color .2s; }
.mega-menu .dropdown-item:hover { padding-left: 6px; color: var(--oe-ember); }
.mega-tag { font-size: .62rem; font-weight: 700; background: var(--oe-ember); color: #fff; border-radius: 20px; padding: 2px 7px; margin-left: 6px; vertical-align: middle; }
.mega-promo { position: relative; display: block; min-height: 250px; height: 100%; border-radius: var(--oe-radius); overflow: hidden; color: #fff; }
.mega-promo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--oe-ease); }
.mega-promo:hover img { transform: scale(1.06); }
.mega-promo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(23,44,35,.88), rgba(23,44,35,0) 65%); }
.mega-promo .body { position: absolute; z-index: 2; left: 22px; right: 22px; bottom: 20px; }
.mega-promo h5 { color: #fff; font-size: 1.35rem; margin: .2rem 0 .5rem; }

/* ---- Desktop behaviour ---- */
@media (min-width: 992px) {
  /* Turn the off-canvas shell into a plain inline menu at desktop widths.
     (The plain .offcanvas class stays position:fixed + visibility:hidden
     otherwise — see Bootstrap's _offcanvas.scss.) */
  .offcanvas-nav {
    position: static !important;
    visibility: visible !important;
    width: auto !important;
    height: auto !important;
    max-width: none;
    flex-grow: 1;
    z-index: auto;
    overflow: visible;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }
  .offcanvas-nav .offcanvas-header { display: none; }
  .offcanvas-nav .offcanvas-body { display: flex; flex-grow: 1; padding: 0; overflow: visible; }

  /* Hide the slide-in toggler on desktop. Bootstrap's own rule
     (.navbar-expand-lg > .container > .navbar-toggler { display: none })
     misses it because the button lives inside .header-actions. */
  .navbar-toggler { display: none; }

  .navbar-nav .nav-link { height: 72px; display: flex; align-items: center; padding: 0 .95rem !important; }
  .navbar-nav .nav-link::before { left: .95rem; right: .95rem; bottom: 20px; }
  /* Submenu reveal — keep the menus rendered (display:block) but hidden with
     opacity/visibility so they animate smoothly BOTH in and out on hover
     (and on keyboard focus). Uses the standalone `translate` property so it
     never conflicts with Popper's inline `transform`. */
  .navbar-nav .dropdown-menu {
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    translate: 0 12px;
    transition: opacity .28s var(--oe-ease), translate .28s var(--oe-ease), visibility .28s;
  }
  .navbar-nav .dropdown:hover > .dropdown-menu,
  .navbar-nav .dropdown:focus-within > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    translate: none;
  }
  .navbar-nav .dropdown:hover > .nav-link { color: var(--oe-ember); }
  .navbar-nav .dropdown:hover > .nav-link::before { transform: scaleX(1); }
  .navbar-expand-lg .navbar-nav .dropdown-menu { margin-top: 0 !important; border-top: 2px solid var(--oe-ember); border-radius: 0 0 var(--oe-radius-sm) var(--oe-radius-sm); }
  .site-header .mega-menu { left: 0; right: 0; width: 100%; padding: 34px; border-radius: 0 0 var(--oe-radius) var(--oe-radius); box-shadow: var(--oe-shadow-lg); }
}

/* Keyframe used when a submenu is tapped open inside the mobile menu
   (an animation runs on display change; a transition would not). */
@keyframes oeDropIn {
  from { opacity: 0; translate: 0 -8px; }
  to   { opacity: 1; translate: none; }
}

/* ---- Mobile slide-in menu ---- */
@media (max-width: 991.98px) {
  /* FIX: the header's backdrop-filter makes it the containing block for the
     position:fixed #mainNav offcanvas nested inside it, which collapses the
     mobile menu to the header's own height. Drop the blur on mobile and use
     a solid background instead. */
  .site-header { background: var(--oe-sand); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .offcanvas-nav { --bs-offcanvas-width: 340px; max-width: 88vw; }
  .offcanvas-nav .offcanvas-header { border-bottom: 1px solid var(--oe-line); padding: 16px 20px; }
  .offcanvas-nav .offcanvas-body { padding: 6px 20px 28px; }
  .offcanvas-nav .navbar-nav .nav-link { display: flex; justify-content: space-between; align-items: center; padding: .95rem 0 !important; border-bottom: 1px solid var(--oe-line); font-size: 1.05rem; }
  .offcanvas-nav .dropdown-menu { border: 0; box-shadow: none; background: transparent; padding: .5rem 0 .8rem .5rem; }
  .offcanvas-nav .dropdown-menu.show { animation: oeDropIn .3s var(--oe-ease) both; }
  .offcanvas-nav .mega-menu .mega-title { margin-top: .6rem; }
  .mobile-menu-extra { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--oe-line); }
  .mobile-menu-extra a:not(.btn) { color: var(--oe-ink); font-weight: 600; font-size: .9rem; }
}


/* ==========================================================================
   27. FORMS
   ========================================================================== */
.form-label { font-weight: 600; font-size: .88rem; margin-bottom: .4rem; }
.form-control, .form-select { border: 1.5px solid var(--oe-line); border-radius: 12px; padding: .72rem 1rem; background-color: #fff; color: var(--oe-ink); }
.form-control:focus, .form-select:focus { border-color: var(--oe-forest); box-shadow: 0 0 0 .22rem rgba(31, 58, 46, .12); }
.form-control::placeholder { color: #a8a396; }
.form-check-input { border-color: #b9b3a6; }
.form-card { background: #fff; border-radius: var(--oe-radius); padding: 30px; margin-bottom: 24px; }
.form-card h4 { font-size: 1.3rem; margin-bottom: 1.3rem; }
.panel-box { background: #fff; border-radius: var(--oe-radius); padding: 28px; }

/* Password field with show/hide button */
.input-group.has-validation > .form-control { border-radius: 12px 0 0 12px !important; }
.btn-pw { background: #fff; border: 1.5px solid var(--oe-line); border-left: 0; border-radius: 0 12px 12px 0 !important; color: var(--oe-muted); padding: 0 16px; }
.btn-pw:hover { color: var(--oe-ember); }
.strength { height: 6px; background: var(--oe-sand-200); border-radius: 10px; overflow: hidden; }
.strength span { display: block; height: 100%; width: 0; transition: width .3s, background .3s; }


/* ==========================================================================
   28. LOGIN / REGISTER
   ========================================================================== */
.auth-card { background: #fff; border-radius: calc(var(--oe-radius) + 8px); overflow: hidden; box-shadow: var(--oe-shadow-lg); }
.auth-aside { position: relative; color: #fff; padding: 40px; align-items: flex-end; min-height: 100%; }
.auth-aside img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.auth-aside::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(23,44,35,.3), rgba(23,44,35,.92)); }
.auth-aside .inner { position: relative; z-index: 2; }
.auth-aside h3 { color: #fff; }
.auth-aside li { list-style: none; margin-bottom: .5rem; }
.auth-tabs { display: inline-flex; gap: .3rem; background: var(--oe-sand-200); border-radius: 50px; padding: 5px; margin-bottom: 1.8rem; }
.auth-tabs .nav-link { border-radius: 50px; border: 0; background: none; color: var(--oe-ink); font-weight: 700; padding: .5rem 1.5rem; }
.auth-tabs .nav-link.active { background: var(--oe-forest); color: #fff; }
.divider-text { display: flex; align-items: center; gap: 12px; color: var(--oe-muted); font-size: .85rem; margin: 1.4rem 0; }
.divider-text::before, .divider-text::after { content: ""; flex: 1; height: 1px; background: var(--oe-line); }
.btn-social { width: 100%; background: #fff; border: 1.5px solid var(--oe-line); color: var(--oe-ink); }
.btn-social:hover { border-color: var(--oe-forest); color: var(--oe-forest); }


/* ==========================================================================
   29. MY ACCOUNT
   ========================================================================== */
.account-nav { background: #fff; border-radius: var(--oe-radius); padding: 22px; }
.account-user { display: flex; gap: 14px; align-items: center; padding-bottom: 18px; margin-bottom: 12px; border-bottom: 1px solid var(--oe-line); }
.account-user img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.account-tabs .nav-link { display: flex; align-items: center; gap: 10px; color: var(--oe-ink); font-weight: 600; border-radius: 10px; padding: .7rem 1rem; text-align: left; background: none; border: 0; }
.account-tabs .nav-link:hover { background: var(--oe-sand-200); }
.account-tabs .nav-link.active { background: var(--oe-forest); color: #fff; }
@media (max-width: 991.98px) {              /* tabs become a horizontal scroller on tablet/mobile */
  .account-tabs { flex-direction: row !important; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .account-tabs .nav-link { white-space: nowrap; }
}
.stat-card { background: #fff; border-radius: var(--oe-radius); padding: 24px; display: flex; gap: 16px; align-items: center; height: 100%; }
.stat-card > i { width: 52px; height: 52px; border-radius: 14px; background: var(--oe-sand-200); color: var(--oe-ember); display: grid; place-items: center; font-size: 1.4rem; flex: none; }
.stat-card strong { font-family: var(--oe-font-head); font-size: 1.8rem; line-height: 1; display: block; }
.status { display: inline-block; font-size: .74rem; font-weight: 700; padding: 4px 12px; border-radius: 30px; background: #e5efe8; color: var(--oe-forest); }
.status.pending   { background: #fdecc8; color: #8a5a00; }
.status.shipped   { background: #dbe8f7; color: #1c4f8c; }
.status.cancelled { background: #f9dcd3; color: var(--oe-ember-700); }
.address-card { border: 1.5px dashed var(--oe-line); background: #fff; border-radius: var(--oe-radius); padding: 22px; height: 100%; }
.address-card.default { border-style: solid; border-color: var(--oe-forest); }


/* ==========================================================================
   30. CHECKOUT
   ========================================================================== */
.pay-option { display: flex; align-items: center; gap: 12px; border: 1.5px solid var(--oe-line); border-radius: 12px; padding: 14px 18px; margin-bottom: 12px; background: #fff; cursor: pointer; transition: .2s; }
.pay-option:hover { border-color: var(--oe-forest); }
.pay-option:has(input:checked) { border-color: var(--oe-forest); background: #f1f6f2; }
.pay-panel { padding: 4px 2px 14px; }
.checkout-item { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px dashed var(--oe-line); }
.checkout-item img { width: 60px; height: 72px; object-fit: cover; border-radius: 8px; }


/* ==========================================================================
   31. CONTACT, FAQ & 404
   ========================================================================== */
.info-card { background: #fff; border-radius: var(--oe-radius); padding: 28px; text-align: center; height: 100%; transition: .3s var(--oe-ease); }
.info-card:hover { transform: translateY(-5px); box-shadow: var(--oe-shadow); }
.info-card > i { width: 60px; height: 60px; border-radius: 50%; background: var(--oe-sand-200); color: var(--oe-ember); display: inline-grid; place-items: center; font-size: 1.5rem; margin-bottom: 14px; }
.map-frame { border: 0; width: 100%; min-height: 420px; border-radius: var(--oe-radius); filter: saturate(.8); }
.accordion { --bs-accordion-bg: #fff; --bs-accordion-border-color: var(--oe-line); --bs-accordion-active-bg: var(--oe-sand-200); --bs-accordion-active-color: var(--oe-ink); --bs-accordion-btn-focus-box-shadow: none; }
.accordion-item { border-radius: var(--oe-radius-sm) !important; overflow: hidden; margin-bottom: 12px; border: 1px solid var(--oe-line); }
.accordion-button { font-weight: 700; }
.error-404 { font-family: var(--oe-font-head); font-size: clamp(6rem, 22vw, 14rem); line-height: 1; font-weight: 700; color: var(--oe-forest); }
.error-404 span { color: var(--oe-ember); font-style: italic; }


/* ==========================================================================
   32. BLOG (listing & post details)
   ========================================================================== */
/* Featured post card (top of the blog listing) */
.featured-post { display: grid; background: #fff; border-radius: var(--oe-radius); overflow: hidden; box-shadow: var(--oe-shadow); margin-bottom: 40px; }
.featured-post .img-zoom { border-radius: 0; aspect-ratio: auto; min-height: 300px; }
.featured-post .content { padding: 40px; align-self: center; }
.featured-post h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin: .5rem 0 1rem; }
.featured-post h2 a { color: var(--oe-ink); }
.featured-post h2 a:hover { color: var(--oe-ember); }
@media (min-width: 992px) { .featured-post { grid-template-columns: 1.1fr 1fr; } }

/* Meta row (author · date · read time) used on cards, posts and comments */
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: .85rem; color: var(--oe-muted); }
.post-meta i { color: var(--oe-ember); margin-right: 5px; }
.post-meta img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; margin-right: 8px; vertical-align: middle; }
.post-meta b { color: var(--oe-ink); font-weight: 600; }

/* Article typography (post details page) */
.post-content { font-size: 1.02rem; color: #3d3b37; }
.post-content > *:last-child { margin-bottom: 0; }
.post-content h2, .post-content h3 { margin: 2.2rem 0 .8rem; }
.post-content p { margin-bottom: 1.3rem; }
.post-content figure { margin: 2rem 0; }
.post-content figure img { border-radius: var(--oe-radius); width: 100%; }
.post-content figcaption { font-size: .82rem; color: var(--oe-muted); text-align: center; margin-top: .6rem; }
.post-content blockquote { margin: 2rem 0; padding: 26px 30px; background: var(--oe-sand-200); border-left: 4px solid var(--oe-ember); border-radius: 0 var(--oe-radius-sm) var(--oe-radius-sm) 0; font-family: var(--oe-font-head); font-size: 1.25rem; color: var(--oe-ink); }

/* Tags + share row */
.post-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.post-tags a { font-size: .8rem; font-weight: 600; padding: 6px 14px; border-radius: 50px; background: var(--oe-sand-200); color: var(--oe-ink); }
.post-tags a:hover { background: var(--oe-forest); color: #fff; }
.share-bar { display: flex; gap: 10px; }
.share-bar a { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--oe-ink); box-shadow: var(--oe-shadow); }
.share-bar a:hover { background: var(--oe-ember); color: #fff; }

/* Author card (below the article) */
.author-box { display: flex; gap: 18px; align-items: center; background: #fff; border-radius: var(--oe-radius); padding: 26px; }
.author-box img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; flex: none; }

/* Prev / next post navigation */
.post-nav { display: flex; justify-content: space-between; gap: 16px; background: #fff; border-radius: var(--oe-radius); padding: 22px 26px; }
.post-nav a { max-width: 47%; }
.post-nav small { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--oe-muted); margin-bottom: 4px; }
.post-nav strong { color: var(--oe-ink); font-weight: 600; }
.post-nav a:hover strong { color: var(--oe-ember); }
.post-nav .next { text-align: right; }

/* Comments */
.comment { display: flex; gap: 16px; padding: 22px 0; border-bottom: 1px dashed var(--oe-line); }
.comment:last-of-type { border-bottom: 0; }
.comment > img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; }
.comment .body { background: #fff; border-radius: var(--oe-radius-sm); padding: 18px 20px; margin-top: 10px; }
.comment .reply { font-size: .8rem; font-weight: 700; color: var(--oe-ember); }
.comment .reply:hover { color: var(--oe-ember-700); }

/* Sidebar widgets (recent posts list, sticky column) */
.recent-post { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--oe-line); }
.recent-post:last-child { border-bottom: 0; padding-bottom: 0; }
.recent-post img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; flex: none; }
.recent-post h6 { font-family: var(--oe-font-body); font-size: .92rem; font-weight: 600; margin: 0 0 2px; line-height: 1.35; }
.recent-post h6 a { color: var(--oe-ink); }
.recent-post h6 a:hover { color: var(--oe-ember); }
.recent-post small { color: var(--oe-muted); font-size: .78rem; }
.blog-sidebar { position: sticky; top: 100px; }
@media (max-width: 991.98px) { .blog-sidebar { position: static; } }


/* ==========================================================================
   33. TRACK ORDER
   ========================================================================== */

/* Horizontal progress stepper (Order placed → … → Delivered) */
.track-steps { display: flex; margin: 28px 0 6px; }
.track-step { flex: 1; position: relative; text-align: center; font-size: .8rem; color: var(--oe-muted); }
.track-step::before { content: ""; position: absolute; top: 15px; right: 50%; width: 100%; height: 3px; background: var(--oe-line); }
.track-step:first-child::before { display: none; }
.track-step.done::before, .track-step.current::before { background: var(--oe-forest); }
.track-step .dot { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; background: var(--oe-sand-200); color: var(--oe-muted); display: inline-grid; place-items: center; font-size: .9rem; margin-bottom: 8px; transition: .3s var(--oe-ease); }
.track-step.done .dot { background: var(--oe-forest); color: #fff; }
.track-step.current .dot { background: var(--oe-ember); color: #fff; box-shadow: 0 0 0 5px rgba(217, 85, 43, .16); }
.track-step strong { display: block; color: var(--oe-ink); font-weight: 700; }
.track-step.current strong { color: var(--oe-ember); }
@media (max-width: 575.98px) {
  .track-step { font-size: .68rem; }
  .track-step .dot { width: 26px; height: 26px; font-size: .78rem; margin-bottom: 6px; }
  .track-step::before { top: 12px; }
}

/* Vertical tracking history timeline */
.track-tl { list-style: none; margin: 0; padding: 0; }
.track-tl li { position: relative; display: flex; gap: 16px; padding-bottom: 22px; }
.track-tl li::before { content: ""; position: absolute; left: 17px; top: 38px; bottom: 4px; width: 2px; background: var(--oe-line); }
.track-tl li:last-child { padding-bottom: 0; }
.track-tl li:last-child::before { display: none; }
.track-tl li > i { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--oe-sand-200); color: var(--oe-muted); display: grid; place-items: center; z-index: 1; }
.track-tl li.done > i { background: var(--oe-forest); color: #fff; }
.track-tl li.current > i { background: var(--oe-ember); color: #fff; box-shadow: 0 0 0 4px rgba(217, 85, 43, .14); }
.track-tl li.pending { opacity: .65; }
.track-tl li.pending > i { background: #fff; border: 2px solid var(--oe-line); }
.track-tl strong { display: block; color: var(--oe-ink); }
.track-tl small { color: var(--oe-muted); font-size: .8rem; }

/* Compact product rows in the order summary panel */
.tk-item { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--oe-line); }
.tk-item:last-child { border-bottom: 0; padding-bottom: 0; }
.tk-item img { width: 52px; height: 62px; border-radius: 8px; object-fit: cover; flex: none; }


/* ==========================================================================
   34. PRODUCT GALLERY — SWIPER SLIDER & IMAGE POPUP
   ========================================================================== */

/* ---- Main gallery slider ---- */
.pd-gallery-main { border-radius: var(--oe-radius); overflow: hidden; background: var(--oe-sand-200); position: relative; }
.pd-gallery-main .swiper-slide img { width: 100%; aspect-ratio: 9 / 10; object-fit: cover; display: block; }
.pd-gallery-main .swiper-button-prev,
.pd-gallery-main .swiper-button-next {
  width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .88); color: var(--oe-ink);
  transition: background .25s var(--oe-ease), color .25s var(--oe-ease), transform .25s var(--oe-ease);
}
.pd-gallery-main .swiper-button-prev::after,
.pd-gallery-main .swiper-button-next::after { font-size: .85rem; font-weight: 700; }
.pd-gallery-main .swiper-button-prev { left: 14px; }
.pd-gallery-main .swiper-button-next { right: 14px; }
.pd-gallery-main .swiper-button-prev:hover,
.pd-gallery-main .swiper-button-next:hover { background: #fff; color: var(--oe-ember); transform: scale(1.06); }
.pd-gallery-main .swiper-button-disabled { opacity: 0; pointer-events: none; }
@media (max-width: 575.98px) {                       /* touch users swipe instead */
  .pd-gallery-main .swiper-button-prev,
  .pd-gallery-main .swiper-button-next { display: none; }
}

/* Fullscreen / popup trigger on the main image */
.pd-zoom-btn {
  position: absolute; right: 14px; bottom: 14px; z-index: 3; width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .9); color: var(--oe-ink); display: grid; place-items: center;
  transition: background .25s var(--oe-ease), color .25s var(--oe-ease), transform .25s var(--oe-ease);
}
.pd-zoom-btn:hover { background: var(--oe-forest); color: #fff; transform: scale(1.08); }

/* ---- Thumbnail strip ---- */
.pd-gallery-thumbs { margin-top: 12px; }
.pd-gallery-thumbs .swiper-slide {
  width: 84px; cursor: pointer; border-radius: 12px; overflow: hidden; border: 2px solid transparent;
  opacity: .55; transition: opacity .25s var(--oe-ease), border-color .25s var(--oe-ease);
}
.pd-gallery-thumbs .swiper-slide img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.pd-gallery-thumbs .swiper-slide:hover { opacity: 1; }
.pd-gallery-thumbs .swiper-slide-thumb-active { opacity: 1; border-color: var(--oe-forest); }

/* ---- Image popup — Magnific Popup (themed overrides) ---- */
.pd-popup { display: block; cursor: zoom-in; }
.mfp-bg { background: #0e1512; }
.mfp-bg.mfp-ready { opacity: .94; }
.mfp-img { border-radius: var(--oe-radius); }
.mfp-figure::after { box-shadow: none; background: transparent; padding: 0; }
.mfp-title { color: rgba(255, 255, 255, .85); font-size: .85rem; letter-spacing: .04em; padding-top: 10px; text-shadow: none; }
.mfp-counter { color: rgba(255, 255, 255, .7); font-size: .78rem; letter-spacing: .08em; }
.mfp-close { color: #fff; opacity: .85; }
.mfp-close:hover { opacity: 1; }
.mfp-arrow { width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .1); transition: background .25s var(--oe-ease); }
.mfp-arrow:hover { background: rgba(255, 255, 255, .24); }
.mfp-arrow.mfp-arrow-left { left: 12px; }
.mfp-arrow.mfp-arrow-right { right: 12px; }

/* ---- Related products carousel ---- */
.related-nav .swiper-button-prev,
.related-nav .swiper-button-next {
  position: static; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--oe-line);
  background: #fff; color: var(--oe-ink); margin: 0; transition: .25s var(--oe-ease);
}
.related-nav .swiper-button-prev::after,
.related-nav .swiper-button-next::after { font-size: .8rem; font-weight: 700; }
.related-nav .swiper-button-prev:hover,
.related-nav .swiper-button-next:hover { background: var(--oe-forest); border-color: var(--oe-forest); color: #fff; }
.related-nav .swiper-button-disabled { opacity: .35; pointer-events: none; }
.pd-related .product-card { height: 100%; }


/* ==========================================================================
   35. PRODUCT REVIEWS TAB — summary, review list, star input & form
   ========================================================================== */

/* ---- Rating summary card ---- */
.rev-summary { background: var(--oe-white); border: 1px solid var(--oe-line); border-radius: var(--oe-radius); padding: 26px; }
.rev-score { font-family: var(--oe-font-head); font-size: 3.2rem; font-weight: 600; line-height: 1; color: var(--oe-ink); }
.rev-bars { list-style: none; padding: 0; display: grid; gap: 6px; }
.rev-bars li { display: grid; grid-template-columns: 14px 1fr 24px; align-items: center; gap: 10px; font-size: .8rem; color: var(--oe-muted); }
.rev-track { height: 6px; background: var(--oe-sand-200); border-radius: 999px; overflow: hidden; }
.rev-track span { display: block; height: 100%; background: var(--oe-gold); border-radius: 999px; }

/* ---- Review list ---- */
.rev-list { display: grid; gap: 20px; }
.rev-item { background: var(--oe-white); border: 1px solid var(--oe-line); border-radius: var(--oe-radius); padding: 24px; }
.rev-item img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.rev-item-head strong { display: block; line-height: 1.25; }
.rev-item-head .rating { white-space: nowrap; }
.rev-item-head small i { color: var(--oe-forest); }
.rev-item h6 { font-family: var(--oe-font-head); font-weight: 600; font-size: 1.02rem; }
.rating .star-off { color: var(--oe-line); }
.rev-reco {
  display: inline-flex; align-items: center; font-size: .82rem; font-weight: 600;
  color: var(--oe-forest); background: rgba(31, 58, 46, .08); border-radius: 999px; padding: .3rem .85rem;
}
.rev-avatar {
  width: 46px; height: 46px; border-radius: 50%; background: var(--oe-sand-200); color: var(--oe-muted);
  display: grid; place-items: center; font-size: 1.25rem; flex-shrink: 0;
}
.rev-helpful-btn {
  border: 1px solid var(--oe-line); background: none; color: var(--oe-muted);
  border-radius: 999px; padding: .32rem .95rem; font-size: .82rem;
  transition: color .2s var(--oe-ease), border-color .2s var(--oe-ease), background .2s var(--oe-ease);
}
.rev-helpful-btn:hover { color: var(--oe-ink); border-color: var(--oe-ink); }
.rev-helpful-btn.is-on { background: var(--oe-forest); border-color: var(--oe-forest); color: #fff; }
.rev-item--new { animation: oeRevIn .55s var(--oe-ease) both; }
@keyframes oeRevIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---- Write-a-review form ---- */
.review-form { background: var(--oe-white); border: 1px solid var(--oe-line); border-radius: var(--oe-radius); padding: 28px; }

/* ---- Star rating input (DOM order 5→1 + row-reverse renders 1→5 left→right) ---- */
.star-rating {
  display: flex; flex-direction: row-reverse; justify-content: flex-end; flex-wrap: wrap;
  align-items: center; gap: 4px 8px; position: relative;
}
.star-rating input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.star-rating label {
  font-size: 1.75rem; line-height: 1; color: var(--oe-line); cursor: pointer; user-select: none;
  transition: color .15s var(--oe-ease), transform .15s var(--oe-ease);
}
.star-rating label:hover { transform: scale(1.12); }
.star-rating:hover label:not(:hover) { color: var(--oe-line); }                    /* dim checked fill while previewing */
.star-rating input:checked ~ label { color: var(--oe-gold); }                      /* keep hover rules below in source order */
.star-rating[data-hover="5"] label,
.star-rating[data-hover="4"] label:nth-of-type(n+2),
.star-rating[data-hover="3"] label:nth-of-type(n+3),
.star-rating[data-hover="2"] label:nth-of-type(n+4),
.star-rating[data-hover="1"] label:nth-of-type(n+5) { color: var(--oe-gold); }
.star-rating input:focus-visible + label,
.was-validated .star-rating input:invalid:focus + label { outline: 2px solid var(--oe-ember); outline-offset: 3px; border-radius: 4px; }
.was-validated .star-rating input:invalid ~ .invalid-feedback { display: block; }
.star-rating .invalid-feedback { flex-basis: 100%; width: 100%; }

/* ---- Reviews on small screens ---- */
@media (max-width: 575.98px) {
  .rev-item .rev-item-head { flex-direction: column; }
  .review-form { padding: 22px 18px; }
  .rev-summary { padding: 22px; }
}


/* ==========================================================================
   36. HOME CAROUSELS — TESTIMONIALS & PROMO BANNERS (Swiper)
   ========================================================================== */

/* ---- Shared: pagination bullets ---- */
.testi-swiper .swiper-pagination,
.promo-swiper .swiper-pagination { bottom: 0; }
.testi-swiper .swiper-pagination-bullet,
.promo-swiper .swiper-pagination-bullet { width: 8px; height: 8px; background: var(--oe-ink); opacity: .18; transition: .25s var(--oe-ease); }
.testi-swiper .swiper-pagination-bullet-active,
.promo-swiper .swiper-pagination-bullet-active { width: 26px; border-radius: 999px; background: var(--oe-ember); opacity: 1; }

/* ---- Testimonials ---- */
.testi-swiper { padding-bottom: 46px; }
.testi-swiper .swiper-slide { height: auto; }
.testi-swiper .testi-card { height: 100%; }

/* ---- Promo banners ---- */
.promo-swiper { padding-bottom: 50px; }
.promo-swiper .swiper-slide { height: auto; }
.promo-swiper .promo { height: 100%; }

/* Arrows float over the banner (same treatment as the product gallery) */
.promo-swiper .swiper-button-prev,
.promo-swiper .swiper-button-next {
  width: 44px; height: 44px; margin-top: 0; top: 50%; transform: translateY(-50%);
  border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff;
  transition: .25s var(--oe-ease);
}
.promo-swiper .swiper-button-prev::after,
.promo-swiper .swiper-button-next::after { font-size: .8rem; font-weight: 700; }
.promo-swiper .swiper-button-prev { left: 16px; }
.promo-swiper .swiper-button-next { right: 16px; }
.promo-swiper .swiper-button-prev:hover,
.promo-swiper .swiper-button-next:hover { background: #fff; color: var(--oe-ember); }
.promo-swiper .swiper-button-disabled { opacity: 0; pointer-events: none; }


/* ==========================================================================
   37. SHOP FILTERS — CATEGORY TABS, COLOUR SWATCHES & EMPTY STATE
   ========================================================================== */

/* ---- Category list (sidebar) behaves like tabs ---- */
.filter-list li { cursor: pointer; }
.filter-list li a { color: var(--oe-ink); transition: color .2s var(--oe-ease); }
.filter-list li.active a,
.filter-list li.active a:hover { color: var(--oe-ember); font-weight: 600; }
.filter-list li.active span { color: var(--oe-ember); }

/* ---- Filter swatches: pressed state reads as "on" ---- */
.filter-box .swatches .swatch { border-width: 2px; }
.filter-box .swatches .swatch.active { box-shadow: 0 0 0 2px var(--oe-ember); transform: scale(1.12); }

/* ---- Empty state (no product matches the filters) ---- */
.shop-empty { border: 1px dashed var(--oe-line); border-radius: var(--oe-radius); background: var(--oe-white); text-align: center; padding: 56px 24px; }
.shop-empty[hidden] { display: none; }


/* ==========================================================================
   38. PRELOADER (PAGE LOAD)
   Full-screen overlay shown while the page loads; fades out via main.js.
   ========================================================================== */
.preloader {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: var(--oe-sand);
  transition: opacity .5s var(--oe-ease), visibility .5s var(--oe-ease);
}
.preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }

.preloader-logo {
  display: flex; align-items: center; gap: 12px;
  animation: preloaderPulse 1.6s var(--oe-ease) infinite;
}
.preloader-logo img { height: 46px; }
.preloader-logo .brand { font-size: 1.9rem; }

/* Progress bar: indeterminate slide across a track */
.preloader-bar {
  width: 180px; height: 3px; border-radius: 999px;
  background: var(--oe-sand-200); overflow: hidden;
}
.preloader-bar span {
  display: block; width: 40%; height: 100%; border-radius: 999px;
  background: var(--oe-ember);
  animation: preloaderSlide 1.1s var(--oe-ease) infinite;
}

@keyframes preloaderPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes preloaderSlide {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}

/* Respect reduced-motion: skip the shimmer, just fade */
@media (prefers-reduced-motion: reduce) {
  .preloader-logo, .preloader-bar span { animation: none; }
}


/* ==========================================================================
   39. BRAND LOGO MARK (HEADER)
   The <img> logo mark next to the wordmark in the navbar / footer.
   ========================================================================== */
.brand-logo { height: 38px; flex-shrink: 0; }
.navbar-brand.brand { display: inline-flex; align-items: center; gap: 10px; }