@charset "UTF-8";
/* ===== Custom fonts =====================================================
   Two faces, and only two: MagdaCleanMono for every heading, Avenir for all
   content. Files live in resources/assets/css/theme_css/fonts/ .
   MagdaCleanMono is WOFF2 (converted from "MagdaCleanMono Bold.ttf" -- IIS
   web.config only serves woff/woff2/ttf/eot, so the source .otf would 404).
   The regular MagdaClean face was dropped on 2026-09-08 when body text moved
   to Avenir; MagdaClean.woff2/.otf are still on disk but nothing loads them.
   ====================================================================== */
@font-face {
  font-family: 'MagdaClean';
  src: url('fonts/MagdaClean.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'MagdaCleanMono';
  src: url('fonts/MagdaCleanMono-Bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* Avenir -> body/content text (headings stay MagdaCleanMono, see EOF).
   TTF, not WOFF2: the source is Avenir.ttc, a 12-face Apple collection IIS
   will not serve at all (no .ttc MIME mapping), so faces 0 (Book) and 4
   (Heavy) were extracted to standalone TrueType. Declared HERE rather than in
   home.blade.php / faq.blade.php as before -- every lelabo view links this
   sheet, so Avenir now actually loads on About Us, the PDP, cart, checkout,
   store-locator and the rest instead of silently falling back to Arial. */
@font-face {
  font-family: 'Avenir';
  src: url('fonts/AvenirBook.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Avenir';
  src: url('fonts/AvenirHeavy.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ===== CONTENT FACE - single source of truth (Arshad, 2026-09-08) =========
   Every non-heading element on the OLFA storefront reads Avenir. It is set on
   the theme body and INHERITED downward on purpose: an inherited value always
   loses to a direct rule, so the icon fonts (.fa, .material-icons) keep
   winning untouched -- an element sweep (`body.themeclass29 span, a, li ...`)
   would have outranked them at 0,1,1 and turned every icon into a letter.
   Form controls do not inherit font by default, so they are named explicitly,
   and so is the legacy <font> element: admin-entered product descriptions
   still contain <font face="..."> tags, and that presentational hint beats an
   inherited value (it was previously answered by a `font-family:inherit
   !important` guard in product-vert-prive.blade.php:370, now removed).
   Headings are re-asserted in the HEADING FACE block at the END of this file
   (later + higher specificity), so h1-h6 / .au-title / .au-titlebar / the
   breadcrumb never fall back to Avenir.
   The 107 per-component font-family declarations that used to compete with
   this (Arial / Georgia / "Courier New" / MagdaClean, here and in the lelabo
   views' <style> blocks) were REMOVED, not overridden. ==================== */
body.themeclass29,
body.themeclass29 input,
body.themeclass29 select,
body.themeclass29 textarea,
body.themeclass29 button,
body.themeclass29 font {
  font-family: 'Avenir', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
}
body.themeclass29 ::placeholder { font-family: inherit; }
/* Exceptions to the two-font system, by request (2026-09-08). Everything that
   uses the THIRD face lives in this one rule -- the top menu (nav links, their
   chevrons, the mega-menu panels) and the collection-tile labels on
   /lelabo/{slug} ("TERRA DISCOVERY", "BLOOM DISCOVERY"). The MagdaClean
   @font-face at the top of this file exists solely for these; drop the rule
   and the face together if they ever move to Avenir or MagdaCleanMono.
   !important + the descendant chains outrank the CONTENT FACE rule regardless
   of order, and no heading element is matched here (.mega-group-title and
   .flatlay-overlay are both divs), so the HEADING FACE block at EOF is
   unaffected. */
.main-nav .nav-item > a,
.main-nav .nav-item > a .chevron,
.main-nav .mega-menu,
.main-nav .mega-group-title,
.main-nav .mega-col a,
.main-nav .mega-group-cols a,
.flatlay .flatlay-overlay,
/* the same kind of label on the wide category/brand banner
   (/lelabo/product-category/{slug}, brand + collection pages) -- moved out of
   the HEADING block for this. */
.pdp-flatlay .pdp-flatlay-name,
/* breadcrumbs, all three variants in this theme: .page-crumbs/.crumbs-inner
   (13 views incl. the collection pages), .au-crumb (About Us -- moved out of
   the HEADING block for this, its .au-title h1 stays MagdaCleanMono) and
   .page-head .crumbs. Set on the containers; the links and separators inside
   carry no font-family of their own, so they inherit. */
.page-crumbs,
.crumbs-inner,
.page-head .crumbs,
.au-titlebar .au-crumb,
.au-titlebar .au-crumb a,
/* MOBILE off-canvas menu (#sidebar-nav, built by top_menumobile.blade.php --
   OLFA-only, included solely for theme 29). It is the same navigation as
   .main-nav above, so it takes the same face. Three shapes to cover: the
   plain rows (HOME / THE STORY / CONTACT US), the expanding category rows
   which are <button class="llbm-toggle"> and do NOT inherit font by default,
   and the nested product links inside .llbm-sub. */
body.themeclass29 #sidebar-nav #sidebar-nav-list .sidebar-nav-item > a,
body.themeclass29 #sidebar-nav #sidebar-nav-list .sidebar-nav-item > .llbm-toggle,
body.themeclass29 #sidebar-nav #sidebar-nav-list .llbm-sub .sidebar-nav-item > a {
  font-family: 'MagdaClean', Arial, Helvetica, sans-serif !important;
}
/* The About Us story body is CMS HTML whose editor emits inline font-family
   spans, and only !important defeats an inline style. Moved here from
   about-us.blade.php:105 (was Arial). The heading block at EOF outranks this
   for the h1-h4 / strong inside the same blocks. */
body.themeclass29 .au-zz-text,
body.themeclass29 .au-zz-text * {
  font-family: 'Avenir', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif !important;
}

/* MagdaCleanMono Bold → mega-menu column titles + every product title on the
   product-detail page (main title + related-product names). */
body.themeclass29 .main-nav .mega-group-title,
body.themeclass29 .main-nav .mega-prod-head-title,
body.themeclass29 #vp-title,
body.themeclass29 .vp-rec-name {
  font-weight: 700 !important;
}

/* ===== Privacy policy page — compact legal panel ===== */
body.themeclass29 .privacy-policy-shell {
  background: #eceae6;
  padding: 26px 0 60px;
}
body.themeclass29 .privacy-policy-wrap {
  width: 880px;
  max-width: calc(100% - 32px);
  margin: 0 auto;
  background: #f7f7f5;
  border: 1px solid #d6d0c6;
  padding: 18px 26px 30px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
body.themeclass29 .privacy-policy-header {
  text-align: center;
  margin: 0 0 18px;
  padding: 0 0 14px;
  border-bottom: 1px solid #d8d1c7;
}
body.themeclass29 .privacy-policy-header h4 {
  margin: 0;
  font-family: 'Avenir', 'Avenir Next', Arial, sans-serif;
  font-size: 18px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: #1b1b1b;
}
body.themeclass29 .privacy-policy-content {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  color: #2a2a2a;
  font-family: 'Avenir', 'Avenir Next', Arial, sans-serif;
  line-height: 1.9;
}
body.themeclass29 .privacy-policy-content p,
body.themeclass29 .privacy-policy-content li,
body.themeclass29 .privacy-policy-content td,
body.themeclass29 .privacy-policy-content th,
body.themeclass29 .privacy-policy-content span,
body.themeclass29 .privacy-policy-content a,
body.themeclass29 .privacy-policy-content strong,
body.themeclass29 .privacy-policy-content b {
  font-size: 14px !important;
  line-height: 1.9 !important;
  color: #2b2b2b !important;
}
body.themeclass29 .privacy-policy-content h1,
body.themeclass29 .privacy-policy-content h2,
body.themeclass29 .privacy-policy-content h3,
body.themeclass29 .privacy-policy-content h4,
body.themeclass29 .privacy-policy-content h5,
body.themeclass29 .privacy-policy-content h6 {
  margin: 28px 0 12px;
  color: #1a1a1a;
  font-family: 'Avenir', 'Avenir Next', Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.35;
}
body.themeclass29 .privacy-policy-content h1,
body.themeclass29 .privacy-policy-content h2,
body.themeclass29 .privacy-policy-content h3 {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
body.themeclass29 .privacy-policy-content ul,
body.themeclass29 .privacy-policy-content ol {
  margin: 0 0 18px;
  padding-left: 22px;
}
body.themeclass29 .privacy-policy-content li { margin: 0 0 8px; }
body.themeclass29 .privacy-policy-content a {
  color: #1b1b1b;
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.themeclass29 .privacy-policy-content hr {
  border: 0;
  border-top: 1px solid #d9d1c8;
  margin: 22px 0;
}
body.themeclass29 .privacy-policy-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0;
}
body.themeclass29 .privacy-policy-content th,
body.themeclass29 .privacy-policy-content td {
  padding: 10px 12px;
  border: 1px solid #ddd3c8;
  vertical-align: top;
}
body.themeclass29 .privacy-policy-content th {
  background: #f0ede7;
  font-weight: 700;
}
@media (max-width: 767px) {
  body.themeclass29 .privacy-policy-wrap {
    padding: 14px 18px 22px;
  }
  body.themeclass29 .privacy-policy-header h4 {
    font-size: 15px;
    letter-spacing: 0.08em;
  }
}

/* ===== Maison Atelier — warm apothecary theme ===== */
:root {
  --bg: #f4efe6;
  --bg-alt: #ebe3d4;
  --ink: #2a2a24;
  --ink-soft: #5a564b;
  --accent: #9c4a2a;       /* terracotta */
  --accent-deep: #6b2f1a;
  --moss: #3d4a32;         /* forest green */
  --line: #cfc6b3;
  --cream: #faf6ee;
}

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

html { scroll-behavior: smooth; }

body {
  background: #f4efe6;
  color: #2a2a24;
  line-height: 1.55;
  font-size: 14px;
  letter-spacing: 0.02em;
}

h1, h2, h3, h4 { 
  font-weight: 400;
  letter-spacing: 0.01em;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* Inner pages get a cool off-white page wash (home keeps its cream) */
body.inner-page { background: #f6f8f6; }
body.inner-page .page-crumbs,
body.inner-page .page-head,
body.inner-page .filter-bar { background: #f6f8f6; }

/* ---------- Top banner ---------- */
.announce {
  background: #3a3a3a;
  color: #f0ece3;
  text-align: center;
  padding: 8px 16px;
  font-size: 12px;
  letter-spacing: 0.06em;
}

.lelaboTheme .faqc-panel p {    
	}

/* ---------- Header ---------- */
.site-header {
  background: #ffffff;
  border-bottom: 1px solid #cfc6b3;
  padding: 8px 40px 0;
  position: sticky;
  top: 0;
  z-index: 20;
}

.header-row {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: 24px;
  align-items: center;
  padding-bottom: 4px;
}

.brand {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand-mark {
  font-size: 22px;
  letter-spacing: 0.16em;
  color: #6b2f1a;
}

.brand-sub {
  font-size: 9px;
  letter-spacing: 0.3em;
  color: #5a564b;
  margin-top: 4px;
  text-transform: uppercase;
}

.search {
  position: relative;
  max-width: 640px;
  width: 100%;
  justify-self: center;
}

.search input {
  width: 100%;
  border: 1px solid #cfc6b3;
  background: transparent;
  padding: 9px 14px 9px 38px;
  font: inherit;
  font-size: 13px;
  color: #2a2a24;
  border-radius: 2px;
  outline: none;
}

.search input:focus { border-color: #9c4a2a; }

.search::before {
  content: "⌕";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: #5a564b;
}

.header-icons {
  display: flex;
  gap: 18px;
  align-items: center;
  font-size: 13px;
}

.header-icons a {
  padding: 8px;
  border: 1px solid transparent;
  transition: border-color 0.2s;
}

.header-icons a:hover { border-color: #cfc6b3; }

.cart-count {
  margin-left: 4px;
  color: #5a564b;
}

/* ---------- Navigation ---------- */
.main-nav {
  display: flex;
  justify-content: center;
  gap: 32px;
  padding: 8px 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  border-top: 1px solid #cfc6b3;
}

.main-nav > a,
.nav-item > a {
  padding: 4px 2px;
  font-weight: 700;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s, color 0.2s;
  display: inline-block;
}

.main-nav > a:hover,
.main-nav > a.active,
.nav-item:hover > a,
.nav-item > a.active {
  border-bottom-color: #9c4a2a;
  color: #6b2f1a;
}

/* Hover mega-menu */
.nav-item { position: static; }

.nav-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #ffffff;
  border-top: 1px solid #cfc6b3;
  border-bottom: 1px solid #cfc6b3;
  box-shadow: 0 14px 30px -18px rgba(42, 30, 20, 0.22);
  padding: 36px 40px 44px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.25s ease, visibility 0s linear 0.25s;
  z-index: 30;
}

.nav-item:hover .nav-panel,
.nav-item:focus-within .nav-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.2s ease, transform 0.25s ease, visibility 0s;
}

.nav-panel-inner {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr 1fr;
  gap: 40px;
  letter-spacing: normal;
  text-transform: none;
}

.nav-col h5 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9c4a2a;
  margin-bottom: 14px;
}

.nav-col a {
  display: block;
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  color: #2a2a24;
  padding: 6px 0;
  border-bottom: none;
}

.nav-col a:hover { color: #6b2f1a; }

.nav-col .note {
  font-style: normal;
  font-size: 12px;
  color: #5a564b;
  line-height: 1.6;
}

.nav-feature {
  background: #141210;
  color: #faf6ee;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
}

.nav-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(200,120,60,0.18), transparent 55%),
    linear-gradient(135deg, #3d2a1c 0%, #1f1510 100%);
  z-index: 0;
}

.nav-feature > * { position: relative; z-index: 1; }

.nav-feature-kicker {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 6px;
}

.nav-feature-title {
  font-style: italic;
  font-size: 22px;
}

/* ---------- Hero ---------- */
.hero-home {
  min-height: calc(100vh - 148px);
}

/* ---------- Hero slider (4 hover-driven slides) ---------- */
.hero-slider {
  position: relative;
  min-height: calc(100vh - 148px);
  overflow: hidden;
  color: #faf6ee;
  isolation: isolate;
}

.slide-bgs {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Crossfade rebuild (anti-jerk): every layer stays at opacity 1 and only the
   INCOMING slide animates (heroFadeIn on .is-active, stacked on top). The
   outgoing slide holds .was-active (z-index 1, set by JS for 650ms) so there
   is never a frame with no fully-opaque backdrop — no brightness dip, no
   double-image ghosting. */
.slide-bg {
  position: absolute;
  inset: 0;
  opacity: 1;
  z-index: 0;
  transform: translateZ(0);
  backface-visibility: hidden;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.slide-bg.is-active { z-index: 2; animation: heroFadeIn .45s ease both; }
.slide-bg.was-active { z-index: 1; }

@keyframes heroFadeIn { from { opacity: 0; } to { opacity: 1; } }

.slide-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Ken Burns on the media only — identical for every slide (images AND videos),
   and never restarting: the animation always runs and is merely paused while
   the slide is inactive, so re-activating resumes mid-drift instead of
   snapping back to frame 0. */
.slide-bg .slide-media {
  animation: heroDrift 18s ease-in-out infinite alternate;
  animation-play-state: paused;
  will-change: transform;
}
.slide-bg.is-active .slide-media { animation-play-state: running; }

@keyframes heroDrift { from { transform: scale(1); } to { transform: scale(1.05); } }

/* Slide 1 — "video" style: warm wood + slow drift */
.slide-bg[data-slide="1"] {
  background:
    radial-gradient(circle at 30% 40%, rgba(255,220,170,0.18) 0%, transparent 55%),
    radial-gradient(circle at 75% 70%, rgba(200,120,60,0.22) 0%, transparent 50%),
    linear-gradient(135deg, #3d2a1c 0%, #5a3a22 40%, #7a5030 100%);
}
/* (drift animation removed — it restarted on every hover and fought the
   crossfade; motion now lives on .slide-media via heroDrift) */

/* Slide 2 — static "image": deep amber resin */
.slide-bg[data-slide="2"] {
  background:
    radial-gradient(ellipse at 60% 50%, #b56a2c 0%, #6b2f1a 55%, #2a1208 100%),
    linear-gradient(180deg, rgba(0,0,0,0.25), transparent);
}

/* Slide 3 — static "image": cool apothecary shelf (pale) */
.slide-bg[data-slide="3"] {
  background:
    linear-gradient(180deg, rgba(40,40,40,0.35), rgba(20,20,20,0.55)),
    repeating-linear-gradient(90deg, #cfc4b0 0 80px, #b9ad97 80px 160px),
    linear-gradient(180deg, #d9cfb8, #8e8470);
}

/* Slide 4 — "video" style: dark brick + slow drift */
.slide-bg[data-slide="4"] {
  background:
    radial-gradient(circle at 70% 30%, rgba(255,200,150,0.12) 0%, transparent 50%),
    linear-gradient(135deg, #2a1d14 0%, #4a2e1c 50%, #1f140c 100%);
}
/* (drift animation + keyframes removed — see slide-1 note; the
   alternate-reverse variant here snapped to scale(1.04) instantly) */

.slider-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0.7) 100%);
  pointer-events: none;
}

.teasers {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
     padding: 0 40px 0px;
    height: 100%;
}

.teaser {
	/* 80px bottom clearance under the teaser text (hovered/raised state) */
	padding: 16px 20px 80px;
	cursor: pointer;
	border-left:1px solid rgb(86 94 115 / 12%) !important;
	transition: border-color 0.25s;
	align-items: flex-end;
    display: flex;
}

.teaser:first-child { border-left: none; }

.teaser h3 {
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: #fff; 
  transition: opacity 0.25s;
  margin-bottom: 10px;
      text-transform: capitalize;
}

/* Always visible on every column — it used to be max-height:0 / opacity:0 and
   only revealed on the hovered (.is-active) column, which meant four of the five
   descriptions were invisible at rest and NONE of them showed on touch, where
   there is no hover to activate a column. Hovering now only brightens it, the
   same way it does the heading. */
.teaser-tag {
  font-size:17px;
  line-height: 1.6;
  color:#fff;
  max-height: none; 
  overflow: visible;
  transition: opacity 0.25s ease;
  margin: 0 0 6px;
}


.hero-slider .teaser h3 .teaser-link { 
    font-weight: 700;
}


.teaser-more {
  display: inline-block;
  font-size: 18px;
  color: #fff;
  border-bottom: 1px solid #faf6ee;
  padding-bottom: 2px;
  margin-top:0px;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Hover slide-up: at rest the block sits pushed down by the "View more" row's
   height (the hero's overflow:hidden clips it); activating the column slides
   the whole block up while the link fades in. */
.teaser-inner {
  transform: translateY(34px);
  /* rest state is dimmed; only the hovered/active column reads at full strength */
  opacity: 0.5;
  transition: transform 0.35s ease, opacity 0.35s ease;
}
.teaser.is-active .teaser-inner,
.teaser:hover .teaser-inner {
  transform: translateY(0);
  opacity: 1;
}

.teaser.is-active { border-left-color: rgba(250, 246, 238, 0.3); }
.teaser.is-active h3 { opacity: 1; }
/* Hover/focus just brightens the description; it is already on screen. */
.teaser.is-active .teaser-tag {
  opacity: 1;
}
.teaser.is-active .teaser-more {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

@media (max-width: 820px) {
  .teasers { grid-template-columns: 1fr 1fr; padding: 0 20px 28px; }
  .teaser { border-left: none; padding: 12px 14px; }
  .teaser h3 { font-size: 16px; }
}

.hero {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #faf6ee;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(42,42,36,0.55), rgba(107,47,26,0.45)),
    radial-gradient(circle at 30% 40%, #a86a3e 0%, #4a2d1c 60%, #241510 100%);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,230,190,0.08) 0, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255,200,150,0.06) 0, transparent 45%);
  pointer-events: none;
}

.hero-inner { position: relative; z-index: 2; padding: 40px 24px; max-width: 720px; }

.hero-eyebrow {
  font-size: 11px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  margin-bottom: 22px;
  opacity: 0.85;
}

.hero h1 {
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1.1;
  font-style: italic;
  margin-bottom: 24px;
}

.hero p {
  font-size: 14px;
  max-width: 520px;
  margin: 0 auto 32px;
  opacity: 0.9;
}

.btn {
  display: inline-block;
  padding: 14px 36px;
  border: 1px solid currentColor;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.btn:hover {
  background: #faf6ee;
  color: #2a2a24;
}

.btn-solid {
  background: #9c4a2a;
  border-color: #9c4a2a;
  color: #faf6ee;
}

.btn-solid:hover {
  background: #6b2f1a;
  border-color: #6b2f1a;
  color: #faf6ee;
}

/* ---------- Section scaffolding ---------- */
.section {
  padding: 80px 40px;
  max-width: 1320px;
  margin: 0 auto;
}

.section-head {
  text-align: center;
  margin-bottom: 48px;
}

.section-head h2 {
  font-size: 34px;
  font-style: italic;
  margin-bottom: 10px;
}

.section-head p {
  color: #5a564b;
  max-width: 560px;
  margin: 0 auto;
}

/* ---------- Product grid ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 28px;
}

.card {
  background: #faf6ee;
  border: 1px solid #cfc6b3;
  padding: 0;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s, box-shadow 0.25s;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -20px rgba(42,30,20,0.35);
}

.card-visual {
  aspect-ratio: 4 / 5;
  position: relative;
  overflow: hidden;
}

.card-visual svg { width: 100%; height: 100%; display: block; }

.card-body {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.card-kind {
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #5a564b;
}

.card-name {
  font-size: 20px;
  font-style: italic;
  color: #6b2f1a;
}

.card-notes {
  color: #5a564b;
  font-size: 12px;
  margin: 6px 0 14px;
}

.card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #cfc6b3;
  padding-top: 12px;
  font-size: 12px;
}

.card-price { color: #9c4a2a; letter-spacing: 0.1em; }

.card-link {
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #2a2a24;
  border-bottom: 1px solid #2a2a24;
  padding-bottom: 2px;
}

/* ---------- Split feature ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: #ebe3d4;
}

.split > div {
  padding: 80px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.split-visual {
  min-height: 480px;
  background:
    linear-gradient(135deg, rgba(107,47,26,0.15), transparent),
    repeating-linear-gradient(45deg, #d9c9ad 0 14px, #cfbb9a 14px 28px);
  position: relative;
}

.split-visual::after {
  content: "";
  position: absolute;
  inset: 20%;
  border: 1px solid rgba(42,42,36,0.2);
}

.split h2 {
  font-size: 32px;
  font-style: italic;
  margin-bottom: 20px;
}

.split p {
  color: #5a564b;
  margin-bottom: 24px;
  max-width: 420px;
}

/* ---------- Filter bar (collection) ---------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  padding: 28px 16px;
  border-bottom: 1px solid #cfc6b3;
  background: #ebe3d4;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.chip {
  padding: 8px 18px;
  border: 1px solid #cfc6b3;
  background: #faf6ee;
  cursor: pointer;
  transition: all 0.2s;
  color: #2a2a24;
}

.chip:hover,
.chip.active {
  border-color: #9c4a2a;
  color: #6b2f1a;
  background: transparent;
}

/* ---------- Collection header ---------- */
.page-head {
  text-align: center;
  padding: 72px 24px 40px;
  background: #ebe3d4;
  border-bottom: 1px solid #cfc6b3;
}

.page-head .crumbs {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #5a564b;
  margin-bottom: 14px;
}

.page-head h1 {
  font-size: 46px;
  font-style: italic;
  margin-bottom: 14px;
}

.page-head p {
  max-width: 560px;
  margin: 0 auto;
  color: #5a564b;
}

/* ---------- Footer (light, link-list style) ---------- */
.site-footer {
  background: #faf6ee;
  color: #2a2a24;
  padding: 56px 40px 0;
  border-top: 1px solid #cfc6b3;
  margin-top: 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr) 2fr;
  gap: 40px;
  max-width: 1320px;
  margin:0px auto 0px;
}

.footer-col h4 {
  font-size: 13px;
  font-weight: 700;
  color: #9c4a2a;
  margin-bottom: 16px;
  letter-spacing: 0;
  text-transform: none;
}

.footer-col a {
  display: block;
  font-size: 13px;
  padding: 4px 0;
  color: #2a2a24;
  transition: color 0.15s;
}

.footer-col a:hover { color: #9c4a2a; }

.newsletter p {
  font-size: 12px;
  line-height: 1.6;
  color: #5a564b;
  margin-bottom: 18px;
  max-width: 520px;
}

.newsletter .policy-link {
  display: inline;
  padding: 0;
  color: #2a2a24;
  text-decoration: underline;
}

.newsletter form {
  display: block;
  margin-bottom: 10px;
}

.newsletter input {
  width: 100%;
  max-width: 520px;
  background: #fff;
  border: 1px solid #cfc6b3;
  color: #2a2a24;
  font: inherit;
  font-size: 13px;
  /* fixed 44px box (Materialize's input height/margin would otherwise win) */
  height: 44px !important;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 0 16px;
  outline: none;
  border-radius: 0;
}

.newsletter input::placeholder { color: #b8ad97; }

.newsletter input:focus { border-color: #9c4a2a; }

.newsletter button {
  background: none;
  border: none;
  color: #2a2a24;
  font: inherit;
  font-size: 13px;
  padding: 4px 0;
  margin-top: 6px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.newsletter button:hover { color: #9c4a2a; }

.footer-copy {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  color: #2a2a24;
}
div#footer {
    width: 100%;
    margin-top: 0px;
    display: inline-block;
    background: #faf6ee;
}

.footer-bottom {
  max-width: 1320px;
  margin: 0 auto;
  padding: 20px 0;
  border-top: 1px solid #cfc6b3;
  font-size: 13px;
  font-weight: 700;
  color: #2a2a24;
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .header-row { grid-template-columns: 1fr auto; }
  .search { grid-column: 1 / -1; order: 3; }
  .main-nav { flex-wrap: wrap; gap: 18px; }
  .split { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-bottom { flex-direction: column; gap: 10px; }
  .section { padding: 56px 20px; }
  .split > div { padding: 48px 28px; }
}

@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
  .page-head h1 { font-size: 34px; }
}
/* ===== Classic Collection — light page, dark flat-lay tiles ===== */

/* Breadcrumbs — black ink on cream */
.page-crumbs {
  background: #faf6ee;
  border-bottom: 1px solid #cfc6b3;
  padding: 18px 0;
}
.crumbs-inner {
  max-width: 1170px;
  margin: 0 auto;
  padding: 00px;
  font-size: 13px;
  color: #2a2a24;
}
.crumbs-inner a { color: #2a2a24; }
.crumbs-inner a:hover { color: #9c4a2a; }
.crumbs-inner span { color: #9c4a2a; font-weight: 700; }
/* Product-category page: breadcrumb trail (left) + item count (right), one row. */
.crumbs-inner--rowcount {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.crumbs-inner--rowcount .crumbs-trail { color: #2a2a24; font-weight: 400; }
.crumbs-inner .crumbs-count {
  color: #5a564b;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Page intro — bold sans-serif heading like the reference catalog */
.classic-head {
  padding: 18px 0px 24px;
  text-align: left;
  max-width: 1170px;
  margin: 0 auto;
}
.classic-head h1 {
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #2a2a24;
  margin-bottom: 0;
}
.classic-head p { display: none; }

/* Flatlay list — stacked tiles with gutters on both sides */
.classic-list {
  max-width: 1170px;
  margin: 0 auto;
  /* Breathing room before the footer. Was `padding: 0`, so the last flatlay
     tile ended exactly where footer.site-footer begins — measured 0px gap on
     /lelabo/discovery-sets AND /lelabo/incense, i.e. every collection page
     rendered by classic-collection.blade.php, not just the one reported.
     60px matches the bottom padding .pdp-variants already uses on the
     category listings, so the two page types share one rhythm. */
  padding: 0 0 60px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.flatlay {
  display: block;
  position: relative;
  overflow: hidden;
  background: #141210;
  aspect-ratio: 1600 / 500;
  width: 100%;
  border: none;
  outline: none;
  text-decoration: none;
}

.flatlay + .flatlay { margin-top: 2px; }

.flatlay svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 0.9s cubic-bezier(.2,.6,.2,1), filter 0.5s;
}

.flatlay:hover svg {
  transform: scale(1.015);
  filter: brightness(1.06);
}

/* Pagination bar (collection / refills). Scoped under .lelaboTheme and forced
   transparent to override Materialize's global nav{background:#ee6e73} bleed. */
.lelaboTheme .classic-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: 1170px;
  height: auto;
  line-height: normal;
  margin: 36px auto 8px;
  padding: 0 24px;
  background: transparent !important;
  box-shadow: none !important;
}
.lelaboTheme .classic-pagination .pg-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  font-size: 13px;
  line-height: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2a2a24;
  text-decoration: none;
  border: 1px solid rgba(42, 42, 36, 0.22);
  background: transparent;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.lelaboTheme .classic-pagination a.pg-link,
.lelaboTheme .classic-pagination a.pg-link:link,
.lelaboTheme .classic-pagination a.pg-link:visited {
  color: #2a2a24;
}
.lelaboTheme .classic-pagination a.pg-link:hover {
  background: #2a2a24;
  color: #faf6ee;
  border-color: #2a2a24;
}
.lelaboTheme .classic-pagination .pg-active {
  background: #8a6a42;
  color: #faf6ee;
  border-color: #8a6a42;
  cursor: default;
}
.lelaboTheme .classic-pagination .pg-disabled {
  color: #2a2a24;
  opacity: 0.35;
  cursor: not-allowed;
}

/* Closing monogram — muted ink on cream */
.classic-end {
  padding: 56px 24px 80px;
  text-align: center;
}
.monogram {
  display: inline-block;
  width: 64px;
  height: 64px;
  line-height: 64px;
  border: 1px solid #cfc6b3;
  border-radius: 50%;
  font-size: 14px;
  letter-spacing: 0.3em;
  color: #5a564b;
}

@media (max-width: 820px) {
  .classic-head h1 { font-size: 18px; letter-spacing: 0.18em; }
  .crumbs-inner { padding: 0 20px; }
}
/* ===== Product Detail Page (PDP) ===== */

.pdp {
  max-width: 1170px;
  margin: 0 auto;
  padding: 40px 0 60px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 60px;
  align-items: start;
}

/* ---------- Visual column ---------- */
.pdp-visual-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #141210;
  overflow: hidden;
}
.pdp-visual-frame svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.pdp-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.pdp-thumb {
  width: 72px;
  height: 72px;
  padding: 0;
  border: 1px solid #cfc6b3;
  background: transparent;
  cursor: pointer;
  transition: border-color 0.2s;
  overflow: hidden;
}
.pdp-thumb svg { width: 100%; height: 100%; display: block; }
.pdp-thumb.is-active { border-color: #9c4a2a; }
.pdp-thumb:hover { border-color: #9c4a2a; }

/* ---------- Info column ---------- */
.pdp-info {
  padding: 8px 0 0;
}

.pdp-kicker {
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #5a564b;
  margin-bottom: 14px;
}

.pdp-name {
  font-style: italic;
  font-weight: 400;
  font-size: 44px;
  color: #6b2f1a;
  line-height: 1.05;
  margin-bottom: 18px;
}

.pdp-tagline {
  font-size: 14px;
  line-height: 1.65;
  color: #2a2a24;
  max-width: 460px;
  margin-bottom: 24px;
}

.pdp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #5a564b;
  padding: 14px 0;
  border-top: 1px solid #cfc6b3;
  border-bottom: 1px solid #cfc6b3;
  margin-bottom: 28px;
}

/* Size selector */
.pdp-size {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.pdp-size-opt {
  flex: 1;
  padding: 14px 10px;
  background: transparent;
  border: 1px solid #cfc6b3;
  cursor: pointer;
  font: inherit;
  color: #2a2a24;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  letter-spacing: 0.08em;
  font-size: 13px;
  transition: border-color 0.2s, background 0.2s;
}
.pdp-size-opt small {
  font-size: 11px;
  color: #5a564b;
  letter-spacing: 0.12em;
}
.pdp-size-opt:hover { border-color: #9c4a2a; }
.pdp-size-opt.is-active {
  border-color: #9c4a2a;
  background: #faf6ee;
}
.pdp-size-opt.is-active small { color: #6b2f1a; }

.pdp-price {
  font-size: 26px;
  color: #9c4a2a;
  letter-spacing: 0.04em;
  margin-bottom: 20px;
}

/* Quantity + add-to-bag row */
.pdp-qty-cart {
  display: flex;
  gap: 14px;
  margin-bottom: 22px;
}

.pdp-qty {
  display: flex;
  align-items: stretch;
  border: 1px solid #cfc6b3;
}
.pdp-qty button {
  width: 42px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: #2a2a24;
}
.pdp-qty button:hover { color: #9c4a2a; }
.pdp-qty input {
  width: 42px;
  border: none;
  background: transparent;
  text-align: center;
  font: inherit;
  font-size: 14px;
  color: #2a2a24;
}

.btn.pdp-addbag {
  flex: 1;
  padding: 14px 24px;
  letter-spacing: 0.24em;
  font-size: 11px;
}

.pdp-quick {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  font-size: 12px;
  color: #5a564b;
}
.pdp-quick li {
  padding: 4px 0 4px 18px;
  position: relative;
}
.pdp-quick li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: #9c4a2a;
}

.pdp-find a {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #2a2a24;
  border-bottom: 1px solid #2a2a24;
  padding-bottom: 2px;
}
.pdp-find a:hover {
  color: #9c4a2a;
  border-color: #9c4a2a;
}

/* ---------- Tabs ---------- */
.pdp-tabs {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 0 80px;
}

.pdp-tabbar {
  display: flex;
  gap: 0;
  border-bottom: 1px solid #cfc6b3;
}

.pdp-tab {
  padding: 18px 28px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #5a564b;
  transition: color 0.2s, border-color 0.2s;
}
.pdp-tab:hover { color: #2a2a24; }
.pdp-tab.is-active {
  color: #6b2f1a;
  border-bottom-color: #9c4a2a;
}

.pdp-panel {
  display: none;
  padding: 36px 0 0;
  max-width: 780px;
}
.pdp-panel.is-active { display: block; }

.pdp-panel p {
  font-size: 14px;
  line-height: 1.75;
  color: #2a2a24;
  margin-bottom: 16px;
}

.pdp-notes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.pdp-notes-col h4 {
  font-style: italic;
  font-size: 18px;
  color: #6b2f1a;
  margin-bottom: 8px;
  font-weight: 400;
}
.pdp-notes-col p {
  font-size: 13px;
  color: #5a564b;
  line-height: 1.6;
}

/* ---------- Related ---------- */
.pdp-related {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 0 80px;
}
.pdp-related h2 {
  font-style: italic;
  font-size: 28px;
  color: #2a2a24;
  margin-bottom: 28px;
  text-align: center;
}
.pdp-related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.pdp-card {
  display: block;
  border: 1px solid #cfc6b3;
  background: #faf6ee;
  overflow: hidden;
  transition: transform 0.25s, border-color 0.25s;
  text-decoration: none;
  color: inherit;
}
.pdp-card:hover {
  transform: translateY(-3px);
  border-color: #9c4a2a;
}
.pdp-card-art {
  aspect-ratio: 300 / 380;
  overflow: hidden;
}
.pdp-card-art svg { width: 100%; height: 100%; display: block; }
.pdp-card-body {
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pdp-card-kind {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #5a564b;
}
.pdp-card-name {
  font-style: italic;
  font-size: 20px;
  color: #6b2f1a;
}
.pdp-card-price {
  font-size: 12px;
  color: #9c4a2a;
  letter-spacing: 0.08em;
  margin-top: 4px;
}



.flatlay { position: relative; margin-bottom: 50px; }
  .flatlay + .flatlay { margin-top: 0; }
  .flatlay:last-child { margin-bottom: 0; }
  .flatlay .flatlay-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.9s cubic-bezier(.2,.6,.2,1);
  }
  .flatlay:hover .flatlay-img { transform: scale(1.02); }
  .flatlay .flatlay-veil {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    transition: background 0.4s;
    z-index: 1;
  }
  .flatlay:hover .flatlay-veil { background: rgba(0, 0, 0, 0.12); }
  .flatlay .flatlay-overlay {
    opacity: 0.80;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    font-weight: 700;
    font-size: 24px;
    letter-spacing: 0.22em;
    color: #f4ecd8;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
    pointer-events: none;
    white-space: nowrap;
  }



  .collection-note {
    text-align: center;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #5a564b;
    padding: 18px 16px 0;
  }
  .tag {
    display: inline-block;
    font-size: 9px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    padding: 3px 8px;
    border: 1px solid #cfc6b3;
    color: #5a564b;
    margin-right: 6px;
  }
  .tag.new { color: #6b2f1a; border-color: #9c4a2a; }




 /* PDP page-scoped layout — does not affect the shared stylesheet */
  .pdp-page-head {
    max-width: 1170px;
    margin: 0 auto;
    padding: 22px 40px 18px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
  }
  .pdp-page-head .pdp-page-num {
    font-weight: 700;
    font-size: 22px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #2a2a24;
  }
  .pdp-page-head .pdp-page-kind {
    font-size: 11px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: #5a564b;
  }

  .pdp-hero {
    width: 100%;
    margin: 0 0 28px;
    padding: 0;
  }
  .pdp-flatlay {
    position: relative;
    width: 100%;
    aspect-ratio:1600 / 500;
    overflow: hidden;
    background: #141210;
  }
  .pdp-flatlay svg,
  .pdp-flatlay-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
  }
  .pdp-flatlay-name {
    opacity: 0.8;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    text-align: center;
    pointer-events: none;
    font-weight: 700;
    font-size: 26px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #f4ecd8;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
  }

  /* Info block centered under the hero */
  .pdp-info-center {
    max-width: 640px;
    margin: 0 auto;
    padding: 20px 24px 48px;
    text-align: center;
  }
  .pdp-info-center .pdp-kicker { margin-bottom: 10px; }
  .pdp-info-center .pdp-name {
    font-size: 40px;
    margin-bottom: 14px;
  }
  .pdp-info-center .pdp-tagline {
    margin: 0 auto 22px;
  }
  .pdp-info-center .pdp-meta { justify-content: center; }
  .pdp-info-center .pdp-size { justify-content: center; max-width: 440px; margin: 0 auto 16px; }
  .pdp-info-center .pdp-qty-cart { justify-content: center; max-width: 440px; margin: 0 auto 22px; }
  .pdp-info-center .pdp-quick {
    display: inline-flex;
    flex-direction: column;
    text-align: left;
    margin: 0 auto 18px;
  }

  @media (max-width: 820px) {
    .pdp-page-head { padding: 16px 20px 12px; flex-direction: column; gap: 6px; }
    .pdp-hero { padding: 0; }
    .pdp-flatlay { aspect-ratio: 1600 / 820; }
    .pdp-flatlay-name { font-size: 18px; letter-spacing: 0.18em; }
    .pdp-info-center .pdp-name { font-size: 30px; }
  }

  /* Match reference: breadcrumb tail stays dark ink (not terracotta) */
  .page-crumbs .crumbs-inner span {
    color: #2a2a24;
    font-weight: 400;
  }

  /* Collapse space between crumb and title so they read as one block */
  .page-crumbs {
    border-bottom: none;
    padding: 14px 0 0;
  }

  .pdp-page-head {
    padding: 4px 40px 16px;
    align-items: center;
  }
  .pdp-page-head .pdp-page-num {
    font-size: 20px;
    letter-spacing: 0.14em;
  }

  /* "Type" filter — clickable toggle with a dropdown panel */
  .pdp-type-filter {
    position: relative;
    font-size: 13px;
    color: #2a2a24;
  }
  .pdp-type-toggle {
    background: transparent;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    color: #2a2a24;
    display: inline-flex;
    align-items: center;
    gap: 16px;
  }
  .pdp-type-toggle .pdp-type-label { letter-spacing: 0; }
  .pdp-type-toggle .pdp-type-sign {
    display: inline-block;
    width: 18px;
    text-align: center;
    font-size: 18px;
    line-height: 1;
    color: #2a2a24;
  }

  .pdp-type-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    min-width: 220px;
    background: #ffffff;
    border: 1px solid #cfc6b3;
    box-shadow: 0 10px 28px -14px rgba(42, 30, 20, 0.22);
    padding: 14px 18px 18px;
    z-index: 25;
    display: none;
  }
  .pdp-type-filter.is-open .pdp-type-panel { display: block; }
  .pdp-type-filter.is-open .pdp-type-sign::before { content: "×"; }
  .pdp-type-filter.is-open .pdp-type-sign { font-size: 20px; }

  .pdp-type-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #cfc6b3;
    padding-bottom: 10px;
    margin-bottom: 10px;
    font-size: 13px;
    color: #2a2a24;
  }
  .pdp-type-panel-close {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: #2a2a24;
  }
  .pdp-type-panel ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .pdp-type-panel li + li { margin-top: 8px; }
  .pdp-type-opt {
    background: transparent;
    border: none;
    padding: 6px 0;
    font: inherit;
    cursor: pointer;
    color: #2a2a24;
    width: 100%;
    text-align: left;
    font-size: 13px;
  }
  .pdp-type-opt:hover { 
	color: #9c4a2a;
	}
  .pdp-type-opt.is-active { 
	color: #9c4a2a; 
	font-weight: 700;
	}  
  .pdp-variants {
    max-width: 1260px;
    margin: 0 auto;
    padding: 36px 0px 60px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }

  /* AROMATIC RESINS listing: 10 products across 2 rows of 5, instead of the
     4-per-row default that left a ragged 4/4/2. Scoped with the cat-<slug> hook
     emitted by product-category.blade.php so no other category listing changes.
     The shared 960px / 520px breakpoints below still apply (2 cols, then 1);
     the extra 1180px step keeps the cards from getting too narrow between
     5-across and the 2-across fallback. */
  .pdp-variants.cat-aromatic-resins {
    grid-template-columns: repeat(5, 1fr);
  }
  @media (max-width: 1180px) {
    .pdp-variants.cat-aromatic-resins { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 960px) {
    .pdp-variants.cat-aromatic-resins { grid-template-columns: repeat(2, 1fr); }
  }

  /* AROMATIC RESINS card sequence — DATA, not CSS (changed 2026-09-09).
     Ten `order:` rules used to pin the sequence here, keyed on the slug at the
     end of each card href. Being flex `order`, they repainted the grid on top
     of the DOM, so the admin "Product Sort" number had no visible effect on
     this listing: changing it appeared to do nothing. That is the bug this
     removal fixes.
     The listing now renders in ec_products.ordering order, which admin owns:
        WHITE COPAL 1, MANILA COPAL 2, PALO SANTO RESIN 3, CAMPHOR 4,
        BLACK COPAL 5, BASILICA BLEND 6, BLACK FRANKINCENSE 7, MYRRH 8,
        GUGGUL 9, DAKKARAH 10
     NOTE this is NOT the sequence the deleted rules painted — those put BLACK
     FRANKINCENSE first. Restoring that is now a one-field edit in admin
     (Product Sort), which is the point of removing them.
     ec_products.ordering is GLOBAL, so any number set here also positions the
     same product in purification-rituals and palo-santo. Per-category ranks
     need a pivot column (design B), not yet built.
     The nav dropdown in top_menu.blade.php keeps its own CSS order rules —
     deliberately untouched, that listing was not part of this fix. */



  .pdp-variant {
	background:#ffffff;
    border:1px solid #cfc6b3;
    display:flex;
    flex-direction:column;
    transition:border-color 0.2s, transform 0.3s;
    text-decoration:none;
    color:inherit;
    min-height:565px !important;
  }
  .pdp-variant:hover {
    border-color:#9c4a2a;
    transform:translateY(-2px);
  }
  .pdp-variant-art {
    background:#e8e8e4;
    aspect-ratio:1 / 1;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    overflow:hidden;
    padding:18px 18px 22px;
  }
  .pdp-card-row.pdp-card-cart{
    position:absolute;
    bottom:0px;
    width:100%;
	}
  .pdp-variant-art svg {
	  height: 100%; 
	  width: auto; 
	  display: block;
	  }
  .pdp-variant-art img {
	  width: 100%;
	  height: 100%;
	  object-fit: contain;
	  display: block;
	  }
  .pdp-variant-body {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .pdp-variant-name {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: #2a2a24;
    text-transform: uppercase;
    margin-bottom: 4px;
  }
  .pdp-variant-size {
    font-size: 12px;
    color: #2a2a24;
  }
  .pdp-variant-kind {
    font-size: 12px;
    color: #5a564b;
    margin-bottom: 10px;
  }
  .pdp-variant-foot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-top: 1px solid #cfc6b3;
    padding-top: 10px;
    margin-top: 6px;
  }
  .pdp-variant-cta {
    font-size: 12px;
    color: #2a2a24;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .pdp-variant-price {
    font-size: 13px;
    font-weight: 700;
    color: #2a2a24;
    text-align: right;
  }
  .pdp-variant-price small {
    display: block;
    font-size: 10px;
    font-weight: 400;
    color: #5a564b;
    margin-top: 2px;
  }

  /* ===== Product card (mockup style) — shared by the category grid and the
     product-detail "Recommendations" strip via _product_card.blade.php ===== */
  .pdp-card { position: relative; }
  .pdp-card .pdp-card-greenbar {
    position: relative;
    height:32px;
    margin: 0px 1px 20px 0px;
    background: var(--bar-color, #2f7d32);
    border-radius: 0px 10px 10px 0px;
  }
  .pdp-card .pdp-card-greenbar__logo {
    position: absolute;
    top: 50%;
    inset-inline-end: -2px;
    transform: translateY(-50%);
        width: 62px;
    height: 62px;
    border-radius: 50%;
    background: var(--bar-color, #2f7d32);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .pdp-card .pdp-card-greenbar__logo img {
    width:42px;
    height:42px;
    object-fit: contain;
    filter: brightness(0) invert(1);
  }
  .pdp-card .pdp-card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid #e2ddd0;
    font-size: 13px;
    color: #2a2a24;
  }
  .pdp-card .pdp-card-name {
    border-top: none;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0 16px 12px;
    font-size: 16px;
    font-style: normal;
  }
  .pdp-card .pdp-card-desc {
    display: block;
    color: #8a8479;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pdp-card .pdp-card-cart { font-weight: 600; }
  .pdp-card .pdp-card-price { font-weight: 700; white-space: nowrap; }
  .pdp-variants-clear {
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 40px;
    text-align: right;
    font-size: 12px;
    color: #2a2a24;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .pdp-variants-clear a { color: inherit; }






.page-crumbs .crumbs-inner span { 
	color:#2a2a24; 
	font-weight:400;
	}
.page-crumbs {
	border-bottom:none; 
	padding:12px 0px 10px;
	}
.vp-pdp {
       max-width:1400px;
    margin: 0 auto;
    padding:16px 20px 64px;
    display: grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1.15fr);
    gap:30px;
    align-items: start;
  }
  
  .vp-gallery {
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: 14px;
  }
  .vp-thumbs {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .vp-thumb {
    width: 84px;
    aspect-ratio: 1 / 1;
    background: #ededed;
    border: 1px solid #cfc6b3;
    padding:0px;
    cursor: pointer;
    transition: border-color 0.2s;
    display: block;
  }
  .vp-thumb svg, .vp-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .vp-thumb.is-active, .vp-thumb:hover { border-color: #9c4a2a; }

  .vp-main {        
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .vp-main img {
    max-width:100%;
    max-height:100%;
    object-fit: contain;
    display: block;
  }

  .vp-personalize-hint {
    font-size: 12px;
    color: #5a564b;
    padding: 12px 0 0 98px;
  }
  .vp-personalize-hint a {
    color: #2a2a24;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* Right column: info panel */
  .vp-info {
    padding-top:0px;
  }
  .vp-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 8px;
  }
  .vp-title h1 {
    font-weight: 800;
    font-size: 24px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #2a2a24;
    margin: 0 0 4px;
    line-height: 1.1;
  }
  .vp-subtitle {
    font-size: 14px;
    color: #2a2a24;
  }
  .vp-price {
    text-align: right;
  }
  .vp-price-main {
    font-size: 22px;
    font-weight: 400;
    color: #2a2a24;
    line-height: 1;
  }
  .vp-price-meta {
    font-size: 11px;
    color: #5a564b;
    margin-top: 6px;
    line-height: 1.4;
  }

  /* Form rows */
  .vp-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 2px;
    border-top: 1px solid #cfc6b3;
    font-size: 13px;
    gap: 12px;
  }
  .vp-row-label { color: #2a2a24; }
  .vp-row-value {
    font-weight: 400;
    color: #2a2a24;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  /* Custom dropdown (replaces <select>) */
  .vp-select { position: relative; }
  .vp-select-toggle {
    background: transparent;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 13px;
    color: #2a2a24;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    outline: none;
  }
  .vp-select-chev {
    font-size: 12px;
    color: #5a564b;
    transition: transform 0.15s;
  }
  .vp-select.is-open .vp-select-chev { transform: rotate(180deg); }

  .vp-select-panel {
    position: absolute;
    right: 100%;
    top: -18px;
    margin-right: 14px;
    min-width: 260px;
    background: #ffffff;
    border: 1px solid #cfc6b3;
    box-shadow: 0 14px 32px -16px rgba(42, 30, 20, 0.25);
    padding: 14px 18px 14px 22px;
    z-index: 30;
    display: none;
  }
  .vp-select.is-open .vp-select-panel { display: block; }
  .vp-select-panel--short { min-width: 160px; }

  .vp-select-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: #2a2a24;
  }
  .vp-select-panel ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .vp-select-panel li { padding: 4px 0; }
  .vp-select-panel li button {
    background: transparent;
    border: none;
    padding: 4px 0;
    font: inherit;
    font-size: 13px;
    color: #2a2a24;
    cursor: pointer;
    text-align: left;
    width: 100%;
  }
  .vp-select-panel li button:hover { color: #9c4a2a; }
  .vp-select-panel li button.is-active { color: #9c4a2a; }
  .vp-row-input {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    justify-content: flex-end;
  }
  .vp-row-input input {
    background: transparent;
    border: none;
    font: inherit;
    font-size: 13px;
    color: #5a564b;
    outline: none;
    text-align: right;
    width: 100%;
    padding: 0 6px 0 0;
  }
  .vp-row-input input::placeholder { color: #5a564b; font-style: italic; }
  .vp-row-input .vp-counter {
    font-size: 12px;
    color: #5a564b;
    min-width: 22px;
    text-align: right;
  }

  .vp-notify {
    display: block;
    width: 100%;
    background: #3a3a3a;
    color: #ffffff;
    border: none;
    padding: 18px 24px;
    margin-top: 24px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s;
  }
  .vp-notify:hover { background: #1f1f1f; }

  .vp-desc {
    margin-top: 28px;
    font-size: 13px;
    line-height: 1.75;
    color: #2a2a24;
  }
  .vp-desc .vp-more {
    display: inline-block;
    margin-top: 14px;
    font-size: 13px;
    color: #2a2a24;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .vp-sample-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 0;
    margin-top: 14px;
    border-top: 1px solid #cfc6b3;
    font-size: 13px;
    color: #2a2a24;
  }
  .vp-sample-row a {
    color: #2a2a24;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .vp-help-row {
    padding: 10px 0 0;
    font-size: 13px;
    color: #2a2a24;
  }
  .vp-help-row a { color: #2a2a24; text-decoration: underline; text-underline-offset: 3px; }
  .vp-help-row .vp-help-pipe { margin: 0 8px; color: #5a564b; }

  @media (max-width: 960px) {
    .vp-pdp { grid-template-columns: 1fr; gap: 28px; padding: 12px 20px 48px; }
    .vp-gallery { grid-template-columns: 64px 1fr; }
    .vp-thumb { width: 64px; padding: 6px; }
    .vp-personalize-hint { padding-left: 78px; }
  }
  @media (max-width: 520px) {
    .vp-gallery { grid-template-columns: 1fr; }
    .vp-thumbs { flex-direction: row; order: 2; }
    .vp-thumb { flex: 1; }
    .vp-personalize-hint { padding-left: 0; }
  }

  /* Recommendations section */
  .vp-recs {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px 40px 80px;
    border-top: 1px solid #cfc6b3;
  }
  .vp-recs-title {
    font-size: 13px;
    color: #2a2a24;
    margin: 0 0 22px;
  }
  .vp-recs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
  }
  .vp-rec {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #cfc6b3;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, transform 0.25s;
  }
  .vp-rec:hover { border-color: #9c4a2a; transform: translateY(-2px); }
  .vp-rec-art {
    background: #ededed;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .vp-rec-art img {
    max-width: 60%;
    max-height: 92%;
    object-fit: contain;
    display: block;
  }
  .vp-rec-body {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .vp-rec-name {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #2a2a24;
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .vp-rec-size,
  .vp-rec-scent {
    font-size: 13px;
    line-height: 1.45;
  }
  .vp-rec-size { color: #2a2a24; }
  .vp-rec-scent { color: #2a2a24; margin-bottom: 14px; }
  .vp-rec-foot {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-top: 1px solid #cfc6b3;
    padding-top: 12px;
  }
  .vp-rec-cta {
    font-size: 13px;
    color: #2a2a24;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .vp-rec-price {
    text-align: right;
    font-size: 14px;
    font-weight: 700;
    color: #2a2a24;
  }
  .vp-rec-price small {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: #5a564b;
    margin-top: 2px;
  }





  .welcome {
    position: fixed;
    inset: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
  }

  .welcome-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  .welcome-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    filter: brightness(0.85) saturate(0.9);
  }
  .welcome-veil {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse at center, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.65) 75%),
      linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.55));
  }

  .welcome-card {
    position: relative;
    z-index: 2;
    max-width: 520px;
    width: 100%;
    color: #f4ecd8;
  }

  .welcome-brand {
    display: inline-block;
    margin: 0 auto 80px;
    line-height: 1.1;
  }
  .welcome-brand .mark {
    font-size: 28px;
    letter-spacing: 0.18em;
    color: #f4ecd8;
    display: block;
  }
  .welcome-brand .sub {
    margin-top: 6px;
    font-size: 10px;
    letter-spacing: 0.32em;
    color: #b6ad97;
    text-transform: uppercase;
  }

  .welcome-title {
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #f4ecd8;
    margin: 0 0 20px;
  }

  .welcome-field {
    background: rgba(255, 255, 255, 0.95);
    color: #2a2a24;
    display: flex;
    align-items: center;
    padding: 14px 18px;
    margin-bottom: 14px;
    border: 1px solid rgba(255, 255, 255, 0.4);
  }
  .welcome-field-label {
    font-size: 13px;
    color: #2a2a24;
    margin-right: 16px;
    white-space: nowrap;
  }
  .welcome-field select {
    flex: 1;
    background: transparent;
    border: none;
    font: inherit;
    font-size: 13px;
    color: #6f6850;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 22px;
    background-image: linear-gradient(45deg, transparent 50%, #2a2a24 50%),
                      linear-gradient(135deg, #2a2a24 50%, transparent 50%);
    background-position: right 8px top 50%, right 4px top 50%;
    background-size: 4px 4px, 4px 4px;
    background-repeat: no-repeat;
  }
  .welcome-field select:has(option:checked:not([value=""])) { color: #2a2a24; }

  .welcome-enter {
    display: block;
    width: 100%;
    background: rgba(50, 48, 44, 0.92);
    color: #f4ecd8;
    border: 1px solid rgba(255, 255, 255, 0.35);
    padding: 18px 24px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
  }
  .welcome-enter:hover { background: rgba(80, 72, 60, 0.95); }
  .welcome-enter[disabled] { opacity: 0.55; cursor: not-allowed; }

  .welcome-acc {
    margin-top: 22px;
    font-size: 12px;
    color: #b6ad97;
  }
  .welcome-acc a {
    color: #b6ad97;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .welcome-acc a:hover { color: #f4ecd8; }




.main-nav .mega-feature:hover .feature-image img {
    transform: scale(1) !important;
	}






.co-header {
    border-bottom: 1px solid #cfc6b3;
    background: #faf6ee;
    padding: 16px 32px;
    position: relative;
    text-align: center;
  }
  .co-back {
    position: absolute;
    left: 32px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: #2a2a24;
    text-decoration: none;
  }
  .co-back:hover { text-decoration: underline; text-underline-offset: 3px; }
  .co-mark {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: #2a2a24;
    text-transform: uppercase;
  }
  .co-tagline {
    margin-top: 4px;
    font-size: 9px;
    letter-spacing: 0.36em;
    color: #5a564b;
    text-transform: uppercase;
  }

  /* Two-column layout */
  .co-wrap {
    max-width: 1024px;
    margin: 0 auto;
    padding: 40px 32px 80px;
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
  }
  .co-col {
    background:#fff;
    padding:32px 36px;
    border:1px solid #ccc;
  }

  /* Section heading row */
  .co-section-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid #ccc !important;
    padding-bottom: 16px;
    margin-bottom: 4px;
  }
  .co-section-head h2 {
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #2a2a24;
    margin: 0;
  }
  .co-required {
    font-size: 12px;
    color: #5a564b;
  }
  .co-section { padding: 36px 0; border-top: 1px solid #ccc !important; }
  .co-section:first-child { border-top: none; padding-top: 0; }

  /* Form rows */
  .co-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 0;
    border-top: 1px solid #ccc !important;
  }
  .co-row:first-of-type { border-top: 1px solid #ccc !important; }
  .co-row label {
    font-size: 13px;
    color: #2a2a24;
    flex: 0 0 200px;
  }
  .co-row .req {
    color: #2a2a24;
    margin-left: 1px;
  }
  .co-row input[type="text"],
  .co-row input[type="email"],
  .co-row input[type="tel"],
  .co-row select {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font: inherit;
    font-size: 14px;
    color: #2a2a24;
    padding: 4px 0;
    border-radius: 0;
  }
  .co-row input::placeholder { color: #5a564b; }
  .co-row select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
  }


.co-row input[type="text"], .co-row input[type="email"], .co-row input[type="tel"]{    
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    padding-left: 10px !important;
	}



  /* Checkboxes */
  .co-check {
    
    gap: 14px;
    align-items: flex-start;
    padding: 14px 0;
    border-top:1px solid #ccc !important;
  }
  
  .co-check label {
 
    height: auto;
}
  
  .co-check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border:1px solid #ccc !important;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 2px;
    border-radius: 0;
    position: relative;
  }
  .co-check input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    inset: 2px;
    background: #2a2a24;
  }
  .co-check label {
    font-size: 13px;
    color: #2a2a24;
    line-height: 1.55;
    cursor: pointer;
  }
  .co-check small {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #5a564b;
    line-height: 1.55;
  }

  /* Accordion rows (visual only — collapsed) */
  .co-acc {
    border-top: 1px solid #ccc !important;
  }
  .co-acc-row {
    padding: 22px 0;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #2a2a24;
    border-bottom: 1px solid #ccc !important;
  }
  .co-acc-row:last-of-type { border-bottom: none; }

  /* ---------- Step flow ---------- */
  .co-page-title {
    font-weight: 800;
    font-size: 18px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #2a2a24;
    margin: 0 0 12px;
    padding-bottom: 14px;
    border-bottom: 1px solid #ccc !important;
  }

  .co-step {
    border-bottom:1px solid #ccc !important;
  }
  .co-step:last-of-type { border-bottom: none; }

  .co-step-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 22px 0 18px;
  }
  .co-step-head h2 {
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #2a2a24;
    margin: 0;
  }
  .co-edit {
    font-size: 12px;
    color: #2a2a24;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
  }

  .co-step-body, .co-step-summary, .co-step .co-cta { display: none; }

  .co-step.is-active .co-step-body { display: block; }
  .co-step.is-active .co-cta { display: block; }
  .co-step.is-done .co-step-summary { display: block; }
  .co-step.is-done .co-edit { display: inline; }
  .co-step:not(.is-done) .co-edit { display: none; }
  .co-step.is-pending .co-step-head { padding-bottom: 22px; }

  .co-step-summary {
    padding: 0 0 22px;
    font-size: 13px;
    line-height: 1.7;
    color: #2a2a24;
    white-space: pre-line;
  }

  /* Delivery / Pick Up two-tab toggle */
  .co-mode {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin: 4px 0 24px;
  }
  .co-mode-opt {
    background: #ffffff;
    border: 1px solid #ccc !important;
    padding: 18px 16px;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #2a2a24;
    cursor: pointer;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
  }
  .co-mode-opt + .co-mode-opt { border-left: none; }
  .co-mode-opt.is-active {
    background: #9c4a2a;
    color: #ffffff;
    border-color: #9c4a2a;
  }
  .co-mode-icon { font-size: 14px; }

  .co-deliv-label {
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #2a2a24;
    margin-bottom: 14px;
  }
  .co-deliv-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
  }
  .co-deliv-opt {
    background: #ffffff;
    border:1px solid #ccc !important;
    padding: 16px 20px;
    font-size: 13px;
    color: #2a2a24;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    border-radius: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
  }
  .co-deliv-opt:hover { border-color: #9c4a2a; }
  .co-deliv-opt.is-active {
    background: #9c4a2a;
    color: #ffffff;
    border-color: #9c4a2a;
  }
  .co-deliv-price {
    font-size: 13px;
  }

  /* Payment — Gift Card section */
  .co-pay-section {
    margin: 8px 0 24px;
  }
  .co-pay-section-title {
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #2a2a24;
    margin: 8px 0 12px;
  }
  .co-pay-input {
    background: #ffffff;
    border: 1px solid #ccc !important;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .co-pay-input label {
    font-size: 13px;
    color: #5a564b;
    flex: 0 0 auto;
  }
  .co-pay-input input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font: inherit;
    font-size: 13px;
    color: #2a2a24;
    padding: 4px 0;
  }
  .co-pay-apply {
    display: inline-block;
    margin-top: 12px;
    font-size: 13px;
    color: #2a2a24;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* Payment method options (3 stacked rows with square hollow check) */
  .co-pay-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .co-pay-opt {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #ffffff;
    border: 1px solid #ccc !important;
    padding: 16px 20px;
    cursor: pointer;
    transition: border-color 0.15s;
  }
  .co-pay-opt:hover { border-color: #9c4a2a; }
  .co-pay-opt input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .co-pay-mark {
    width: 16px;
    height: 16px;
    border: 1px solid #ccc !important;
    flex-shrink: 0;
    position: relative;
    background: transparent;
  }
  .co-pay-opt input[type="radio"]:checked ~ .co-pay-mark::after {
    content: "";
    position: absolute;
    inset: 2px;
    background: #2a2a24;
  }
  .co-pay-name {
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #2a2a24;
    flex: 1;
  }
  .co-pay-tag {
    font-size: 11px;
    letter-spacing: 0.08em;
    padding: 4px 10px;
    text-transform: lowercase;
    color: #ffffff;
  }
  .co-pay-tag--dark { background: #0a0a0a; }
  .co-pay-tag--blue { background: #0070ba; }

  /* "Send as gift" gift options block */
  .co-gift-box {
    border: 1px solid #ccc !important;
    padding: 22px 24px;
    margin-bottom: 8px;
  }
  .co-gift-box .co-check {
    border-top: none !important;
    padding: 0;
  }
  .co-gift-label {
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #2a2a24;
    margin: 0 0 6px;
  }
  .co-gift-help {
    font-size: 12px;
    color: #5a564b;
    line-height: 1.55;
  }

  /* Primary CTA */
  .co-cta {
    display: block;
    width: 100%;
    background: #4a4744;
    color: #ffffff;
    border: none;
    padding: 22px 24px;
    margin-top: 24px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 0;
  }
  .co-cta:hover { background: #2a2826; }

  /* ---------- Right column ---------- */
  .co-summary { padding: 32px 32px; }

  .co-items-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid #ccc !important;
    padding-bottom: 16px;
    margin-bottom: 20px;
  }
  .co-items-head h3 {
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 0;
    color: #2a2a24;
  }
  .co-items-head a {
    font-size: 12px;
    text-decoration: underline;
    text-underline-offset: 3px;
    color: #2a2a24;
  }

  .co-item {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 18px;
    padding-bottom: 24px;
    border-bottom: 1px solid #ccc !important;
    margin-bottom: 24px;
  }
  .co-item-art {
    background: #ECE7DC;
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }
  .co-item-art img {
    max-width: 80%;
    max-height: 92%;
    object-fit: contain;
  }
  .co-item-body { font-size: 13px; }
  .co-item-name {
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #2a2a24;
    margin-bottom: 4px;
  }
  .co-item-variant {
    font-style: italic;
    color: #2a2a24;
    margin-bottom: 10px;
    font-size: 12px;
  }
  .co-item dl {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 4px 12px;
    margin: 0;
    font-size: 12px;
  }
  .co-item dt { color: #2a2a24; }
  .co-item dd { margin: 0; color: #2a2a24; }

  .co-totals h3 {
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 0 0 16px;
    color: #2a2a24;
  }
  .co-totals dl {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr auto;
  }
  .co-totals dt,
  .co-totals dd {
    padding: 12px 0;
    border-top: 1px solid #ccc !important;
    margin: 0;
    font-size: 13px;
    color: #2a2a24;
  }
  .co-totals dt { text-align: left; }
  .co-totals dd { text-align: right; }
  .co-totals .co-grand-dt,
  .co-totals .co-grand-dd {
    font-weight: 800;
    letter-spacing: 0.04em;
    border-top: 1px solid #ccc !important;
  }

  /* Need help */
  .co-help {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid #ccc !important;
    font-size: 13px;
    color: #2a2a24;
  }
  .co-help h4 {
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin: 0 0 10px;
  }
  .co-help a {
    text-decoration: underline;
    text-underline-offset: 3px;
    display: block;
    padding: 3px 0;
  }








/* Hero — full-bleed photograph */
.au-hero {
  width: 100%;
  height: 50vh;
  min-height: 360px;
  overflow: hidden;
  background: #1a1a1a;
  border-bottom: 1px solid #cfc6b3;
}
.au-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: none;
}

/* Crumb + page title */
.au-titlebar {
  max-width: 1170px;
  margin: 0 auto;
  padding: 28px 40px 0;
}
.au-crumb {
  font-size: 13px;
  color: #2a2a24;
  margin-bottom: 14px;
}
.au-crumb a { color: #2a2a24; text-decoration: none; }
.au-crumb a:hover { text-decoration: underline; text-underline-offset: 3px; }

.au-title {
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #2a2a24;
  margin: 0;
  padding-bottom: 18px;
  border-bottom: 1px solid #cfc6b3;
}

/* Narrow editorial column */
.au-col {
  max-width: 100%;
  margin: 0 auto;
  padding:56px 24px 0px;
}

.au-section-title {
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #2a2a24;
  margin: 0 0 28px;
}

/* Manifesto — mono, double-spaced, one belief per paragraph */
.au-manifesto {
  font-size: 14px;
  line-height: 1.8;
  color: #2a2a24;
}
.au-manifesto p {
  /* Centre the 64ch measure in whatever container holds it. The manifesto used
     to sit in the narrow .au-col article, where 64ch filled the column and the
     left edge was the column edge. It now renders inside .au-story-title, which
     is full width and text-align:center — with margin-left:0 every paragraph
     pinned to the far left and left half the band empty. */
  margin: 0 auto 22px;
  max-width: 64ch;
}
.au-manifesto p.au-lede { margin-bottom: 30px; }
.au-manifesto p.au-coda { margin-top: 14px; font-style: italic; }

/* Subsection lead-ins — labs / souls / roots */
.au-sub {
  max-width: 1170px;
  margin: 0 auto;
  padding: 56px 40px 0;
}
.au-zz-text h1 { 
    line-height: 30px !important;
}
.llb-pdp .reviews { 
    padding: 2px 0 10px !important;    
	}

.au-sub-head {
  max-width:100%;
  margin: 0 auto 22px;
  padding: 0 24px;
}
.au-sub-head h2 {
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 12px;
  color: #2a2a24;
}
.au-sub-head p {
  font-size: 14px;
  line-height: 1.7;
  color: #2a2a24;
  margin: 0;
}

.au-figure {
  max-width: 1170px;
  margin: 18px auto 0;
  padding: 0 40px;
}
.au-figure img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: none;
  background: #1a1a1a;
}

.au-cta-row {
  max-width: 720px;
  margin: 28px auto 0;
  padding: 0 24px;
  text-align: center;
}
.au-cta {
  display: inline-block;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #2a2a24;
  border: 1px solid #2a2a24;
  padding: 14px 28px;
  text-decoration: none;
  background: transparent;
  transition: background 0.2s, color 0.2s;
}
.au-cta:hover {
  background: #2a2a24;
  color: #faf6ee;
}

/* Craftspeople / Collections — small flat card grid */
.au-grid {
  max-width: 1170px;
  margin: 22px auto 0;
  padding: 0 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.au-card {
  display: block;
  background: #ffffff;
  border: 1px solid #cfc6b3;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, transform 0.25s;
}
.au-card:hover {
  border-color: #2a2a24;
  transform: translateY(-2px);
}
.au-card-art {
  aspect-ratio: 1 / 1;
  background: #1a1a1a;
  overflow: hidden;
}
.au-card-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: none;
}
.au-card-body {
  padding: 14px 16px 18px;
}
.au-card-name {
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #2a2a24;
  margin-bottom: 4px;
}
.au-card-meta {
  font-size: 12px;
  color: #5a564b;
}

/* Roots — closing paragraph + atelier exterior shot */
.au-roots-photo {
  max-width: 1170px;
  margin: 18px auto 0;
  padding: 0 40px;
}
.au-roots-photo img {
  width: 100%;
  height: 460px;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: none;
  background: #1a1a1a;
}

/* Bottom rule before footer */
.au-tail {
  max-width: 1170px;
  margin: 56px auto 0;
  padding: 0 40px;
  border-top: 1px solid #cfc6b3;
}

@media (max-width: 960px) {
  .au-grid { grid-template-columns: repeat(2, 1fr); }
  .au-titlebar { padding: 20px 20px 0; }
  .au-sub, .au-figure, .au-roots-photo, .au-tail { padding-left: 20px; padding-right: 20px; }
  .au-figure img { height: 260px; }
  .au-roots-photo img { height: 320px; }
}
@media (max-width: 520px) {
  .au-grid { grid-template-columns: 1fr; }
  .au-col { padding: 36px 20px 16px; }
  .au-title { font-size: 18px; letter-spacing: 0.18em; }
}




.bxiMiLog a.brand-logo {    
	height:100px !important;
	}
nav.common-head .bxiMoni > #llbMainNav {
    padding-left: 100px !important;
    padding-right: 95px !important;
	}	
.llb-row1 {
    padding-left:120px !important;
	}

.incenseTheme img.logiHidi {
    max-width: inherit !important;
    width: auto;
    max-height:100px !important;
    margin-left: 15px;
	}	
.llb-row1 {     
	gap: 10px;     
	}	
	
.co-err-msg {
    position: absolute;
    left: 0px;
    bottom: 10px;
	}
.co-row {
    position: relative;
	}	

.btn_lang a.dropdown-button img {    
    margin-top: 0px !important;
	}
.btn_lang a.dropdown-button:after {    
    top: 0px;
	}
.btn_lang.dropComnLang a.dropdown-button span.languagecls {    
    line-height: 20px !important;
	}


.co-phone-group .co-dial {    
    height: 55px;
    
	}
.co-step-body select#co-country {
    display: block;
    border: 1px solid #ccc !important;
    border-radius: 4px !important;
    padding-left: 10px !important;
	height: 54px;
	}	


.cu-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 24px 80px;
}

.cu-card {
  background: #faf6ee;
  border: 1px solid #cfc6b3;
  padding: 36px 40px 40px;
}

.cu-title {
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #2a2a24;
  margin: 0 0 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid #cfc6b3;
}

.cu-intro {
  font-size: 15px;
  line-height: 1.7;
  color: #2a2a24;
  margin: 0 0 22px;
  max-width: 100ch;
}
/* The mini headings inside the intro ("Join Our Community", "Contact").
   <strong> was computing to font-weight:500 here, and the MagdaClean face is
   registered at weight 400 only — browsers do not synthesise bold below ~600,
   so 500 rendered indistinguishable from normal text. 700 forces synthetic
   bolding of the single-weight face, which is how it reads as bold. */
.cu-intro strong,
.cu-legal strong {
  font-weight: 700 !important;
}

.cu-required {
  text-align: right;
  font-size: 13px;
  color: #c0392b;
  margin-bottom: 4px;
}
.cu-required::before { content: "*"; margin-right: 1px; }

/* Each row: label (fixed col) + control (flex). Thin rule above each row. */
.cu-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid #cfc6b3;
}
.cu-row--stack {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.cu-row label {
  flex: 0 0 180px;
  font-size: 13px;
  color: #2a2a24;
}
.cu-row .cu-req { color: #2a2a24; margin-left: 1px; }

.cu-row input,
.cu-row select,
.cu-row textarea {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font: inherit;
  font-size: 14px;
  color: #2a2a24;
  padding: 4px 0;
  border-radius: 0;
}
.cu-row input::placeholder,
.cu-row textarea::placeholder {
  color: #5a564b;
}

.cu-row select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, #2a2a24 50%),
    linear-gradient(135deg, #2a2a24 50%, transparent 50%);
  background-position:
    right 8px top 50%,
    right 4px top 50%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  padding-right: 22px;
}
.cu-row select:invalid { color: #5a564b; }
.cu-row select option { color: #2a2a24; }

.cu-row--message {
  align-items: flex-start;
}
.cu-row--message label { padding-top: 6px; }
.cu-row--message textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.6;
}

.cu-legal {
  font-size: 12px;
  line-height: 1.6;
  color: #5a564b;
  margin: 26px 0 0;
  padding-top: 18px;
  border-top: 1px solid #cfc6b3;
}
.cu-legal a {
  color: #2a2a24;
  /* !important is load-bearing: without it this computed to text-decoration:none
     — a broader theme link reset wins otherwise, leaving the mailto and Privacy
     Policy links indistinguishable from the surrounding plain text. */
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

.cu-submit {
  display: block;
  width: 100%;
  background: #9c4a2a;
  color: #ffffff;
  border: none;
  padding: 22px 24px;
  margin-top: 24px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 0;
  transition: background 0.2s;
}
.cu-submit:hover { background: #1f1f1f; }
.cu-submit[disabled] { opacity: 0.55; cursor: not-allowed; }

.cu-stores {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid #cfc6b3;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #5a564b;
  line-height: 1.8;
}
.cu-stores .cu-region {
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #2a2a24;
  margin-right: 4px;
}
.cu-stores a {
  color: #5a564b;
  text-decoration: none;
}
.cu-stores a:hover { color: #2a2a24; text-decoration: underline; text-underline-offset: 3px; }

.cu-thanks {
	display: none;
	padding: 22px 0 6px;
	font-size: 14px;
	color: #2a2a24;
	line-height: 1.7;
	}
.cu-thanks.is-visible {
	display: block;
	}
.llb-pdp .btn-bloom {
    background:#1a1a1a ;
	}	
.llb-pdp .btn-bloom:focus {
    background-color:#725667 !important;
	}
.llb-pdp .btn-view:focus {
    background-color:#725667 !important;
	color: #fff;
	}
.llb-pdp .btn-duo.btn-terra {
    background: #48564E !important;
}	
.cu-row select{
	display:block !important;
	}
	
/* VIEW CART + CHECKOUT in the cart popup.
   header.css sets `html body li.wishBtni a { width:80% !important; padding:6px
   !important; margin-top/bottom:10px !important }` — specificity (0,1,4) — which
   outranks any `.llb-cart a.llb-checkout` (0,2,1) rule and left the two buttons
   with an inconsistent box, so they rendered staggered instead of stacked.
   This block is (0,3,4) so it wins, and it pins the ENTIRE box model on both so
   they are guaranteed identical. Geometry only — colour is left to the rules
   above so the buttons keep their current look. */
html body .llb-cart li.wishBtni a.llb-cartlist,
html body .llb-cart li.wishBtni a.llb-checkout {
    display: block !important;
    box-sizing: border-box !important;
    width: calc(100% - 40px) !important;
    max-width: none !important;
    float: none !important;
    margin: 0 20px 10px 20px !important;
    padding: 15px !important;
    border-radius: 0 !important;
    text-align: center !important;
    line-height: normal !important;
	}
html body .llb-cart li.wishBtni a.llb-checkout {
    margin-bottom: 20px !important;
	}
	
.nav-item.nav-discovery-sets .mega-group-cols {
    columns: 1;
	}
.nav-item.nav-discovery-sets-1 .mega-group-cols {
    columns: 1;
	}	
	
	
	
	

@media (max-width: 1470px) {	
	
	html body nav.main-nav {
		gap: 10px !important;
	}
	html body .main-nav .nav-item > a {
		font-size: 16px !important;
	}
}

@media (max-width: 1260px) {
    html body .main-nav .nav-item > a {
        font-size: 14px !important;
    }
}
	



@media (max-width: 1200px) {
	
	.incenseTheme img.logiHidi {
		margin-left: 0px;
	}	
	.llb-row1 .bxiMiLog, nav.common-head .bxiMoni .bxiMiLog {    
		min-width: 65px !important;
	}
	.incenseTheme img.logiHidi {    
		max-height: 80px !important;
	}
	.common-head li.msg_icon.iconCart {
		min-width: 65px;
		padding: 10px 10px 10px 0px !important;
	}

}



@media (max-width: 1150px) {
	html body.incenseTheme img.logiHidi {    
		max-height: 80px !important;
	}
	html body .common-head li.msg_icon.iconCart {
		min-width: 65px;
		padding: 10px 10px 10px 0px !important;
	}
	html body nav.common-head .bxiMoni > #llbMainNav {
		padding-inline-start: 80px !important;
	}
	html body nav.common-head .bxiMoni > #llbMainNav {
		padding-left: 65px !important;
		padding-right: 60px !important;
	}
}


@media (max-width: 1080px) {
	.common-head li.msg_icon.iconCart { 
		        min-height: 49px !important;
        right: 50px !important;
        border-right: 1px solid #e2e2e2;
	}
	.llb-row1 .bxiMiLog, nav.common-head .bxiMoni .bxiMiLog {
        min-width: 40px !important;
    }
	.bxiMiLog a.brand-logo {
		height: 40px !important;
	}
	.llb-row1 .header-btn.hidiRoMib {
		padding-inline-end:65px !important;
	}
	.header-btn.hidiRoMib {
		margin-top: 0px !important;
	}	
    .incenseTheme .bxiMiLog a.brand-logo img {
        max-height: 40px !important;
        width: 40px !important;
    }
	
}

@media (max-width: 720px) {
	.cu-card { padding: 24px 20px 28px; }
	.cu-row { flex-direction: column; align-items: stretch; gap: 6px; }
	.cu-row label { flex: 0 0 auto; }
	.cu-title { font-size: 16px; }
	.llb-annc__slide a, .llb-annc__slide span {    
		font-size:13px;
	}
	.teasers {
		padding:0px 0px 0px;
	}
	.teaser {
		padding:10px 10px;
	}
  
}



  @media (max-width: 960px) {
    .co-wrap { grid-template-columns: 1fr; gap: 24px; padding: 24px 16px 56px; }
    .co-col, .co-summary { padding: 24px 20px; }
    .co-row { flex-wrap: wrap; }
    .co-row label { flex-basis: 100%; }
  }











  @media (max-width: 520px) {
    .welcome-brand { margin-bottom: 48px; }
    .welcome-brand .mark { font-size: 22px; }
    .welcome-title { font-size: 15px; }
  }




  @media (max-width: 960px) {
    .vp-recs { padding: 16px 20px 56px; }
    .vp-recs-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 520px) {
    .vp-recs-grid { grid-template-columns: 1fr; }
  }




  @media (max-width: 960px) {
    .pdp-variants { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 520px) {
    .pdp-variants { grid-template-columns: 1fr; padding: 24px 20px 40px; }
    .classic-list { padding-bottom: 40px; }
    .pdp-variants-clear { padding: 0 20px; }
  }



  @media (max-width: 820px) {
    .flatlay .flatlay-overlay { font-size: 16px; letter-spacing: 0.18em; }
  }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .pdp { grid-template-columns: 1fr; gap: 32px; padding: 24px 20px 40px; }
  .pdp-related-grid { grid-template-columns: repeat(2, 1fr); }
  .pdp-notes-grid { grid-template-columns: 1fr; gap: 20px; }
  .pdp-tabbar { overflow-x: auto; }
  .pdp-tab { padding: 14px 18px; white-space: nowrap; }
}

@media (max-width: 520px) {
  .pdp-name { font-size: 34px; }
  .pdp-related-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   Le Labo cart-list restyle.
   Moved here out of the inline <style> in theme_page/cart_list.blade.php.
   That view is SHARED with every other tenant, so the markup hook
   (.llb-cartpage on #product_cart) is still emitted only when
   $useIncenseProductPage, and the <link> to this sheet is gated the same
   way — nothing below can reach another institute's cart page.

   .llb-* selectors are unique to this theme and need no extra scoping.
   .checkrighting is NOT llb-prefixed and also exists in the ecommerce-theme
   cart, so every rule for it is scoped under body.themeclass29 (the body
   class the layout renders from theme_select_id — the same 29 the PHP gate
   uses). Restyles the cart rows + summary into the MY CART popup look:
   monospace type, uppercase titles, neutral palette, dark full-width
   CHECKOUT. No pricing or markup logic here — presentation only.
   ============================================================ */
:root{ --llb-ink:#1a1a1a; --llb-mut:#8a8a8a; --llb-line:#e6e6e6; --llb-btn:#5b5b5b; --llb-box:#e9e6df; }

/* Monospace only for LTR — Arabic renders poorly in Courier, so leave it.
   The blade used @if(Session::get('locale') != 'ar'); in a static sheet the
   equivalent hook is <html lang>, which the layout sets from app()->getLocale(). */
html:not([lang="ar"]) .llb-cartpage,

/* --- cart-list rows: SAME markup as the MY CART popup (_cart_popup_meta) --- */
.llb-cartpage{ list-style:none; margin:0; padding:0; color:var(--llb-ink); }
.llb-cartpage .llb-cp-row{ list-style:none; position:relative; display:flex; gap:20px; align-items:flex-start; margin:0; padding:24px 4px; border-bottom:1px solid var(--llb-line); background:#fff; }
.llb-cartpage .llb-cp-row.is-busy{ opacity:.55; pointer-events:none; }
/* Row body is a plain div, NOT a link: on the cart page only the product title
   is clickable (the popup still wraps its whole row in an <a>). Same flex
   geometry the old wrapper anchor had, so the layout is unchanged. */
.llb-cartpage .llb-cp-row > .llb-cp-main{ display:flex; gap:20px; align-items:flex-start; flex:1 1 auto; min-width:0; text-decoration:none; color:var(--llb-ink); }
.llb-cartpage .llb-cp-row > .llb-cp-main > img{ flex:0 0 120px; width:120px; height:120px; object-fit:cover; background:var(--llb-box); display:block; }
.llb-cartpage .neimiHart{ display:block; flex:1 1 auto; min-width:0; }

/* popup item classes, reused verbatim */
.llb-cartpage .llb-ci-title{ display:block; font-size:16px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; line-height:1.35; color:var(--llb-ink); padding-inline-end:30px; }
/* The only clickable thing in the row. Inline-block so the hit area is the text
   itself, not the full-width block the <span> version occupies. */
.llb-cartpage a.llb-ci-title{ display:inline-block; text-decoration:none; color:var(--llb-ink); }
.llb-cartpage a.llb-ci-title:hover{ text-decoration:underline; }
.llb-cartpage .llb-ci-sub{ display:block; font-size:12px; color:var(--llb-mut); margin:3px 0 12px; }
.llb-cartpage .llb-ci-meta{ display:block; font-size:13px; }
.llb-cartpage .llb-ci-meta .row{ display:flex; gap:10px; margin:4px 0; }
.llb-cartpage .llb-ci-meta .row .k{ flex:0 0 88px; width:88px; color:var(--llb-mut); }
.llb-cartpage .llb-ci-meta .row .v{ color:var(--llb-ink); }
.llb-cartpage .llb-ci-meta .row .v del{ color:var(--llb-mut); margin-left:4px; }

/* quantity stepper */
.llb-cartpage .llb-qty{ display:inline-flex; align-items:center; gap:12px; border:1px solid var(--llb-line); padding:2px 10px; }
.llb-cartpage .llb-qty button{ background:none; border:0; cursor:pointer; font-size:16px; color:var(--llb-ink); line-height:1; padding:0 2px; min-width:16px; }
.llb-cartpage .llb-qty button:disabled{ opacity:.35; cursor:default; }
.llb-cartpage .llb-qty .n{ min-width:16px; text-align:center; }

/* remove (top-inline-end) + save/wishlist link column */
.llb-cartpage .llb-remove{ position:absolute; top:22px; inset-inline-end:4px; right:4px; background:none; border:0; padding:4px; cursor:pointer; line-height:0; color:var(--llb-mut); }
.llb-cartpage .llb-remove:hover{ color:var(--llb-ink); }
.llb-cartpage .llb-remove svg{ width:16px; height:16px; display:block; }
.llb-cartpage .llb-cp-extra{ flex:0 0 auto; align-self:flex-start; margin-top:30px; text-align:end; }
.llb-cartpage .llb-linkbtn{ display:block; background:none; border:0; padding:0; margin:6px 0 0; color:var(--llb-mut); text-decoration:underline; font-size:12px; cursor:pointer; white-space:nowrap; }
.llb-cartpage .llb-linkbtn:hover{ color:var(--llb-ink); }
@media (max-width:600px){
  .llb-cartpage .llb-cp-row{ flex-wrap:wrap; }
  .llb-cartpage .llb-cp-row > .llb-cp-main > img{ flex-basis:88px; width:88px; height:88px; }
  .llb-cartpage .llb-cp-extra{ margin-top:8px; text-align:start; flex-basis:100%; }
}

/* --- summary panel (scoped: .checkrighting is shared with other carts) --- */
body.themeclass29 .checkrighting{ background:#fff;border:1px solid var(--llb-line);padding:24px 22px;color:var(--llb-ink); }
body.themeclass29 .checkrighting h5{ font-size:13px;letter-spacing:1.2px;text-transform:uppercase;color:var(--llb-mut);margin:0 0 6px; }
body.themeclass29 .checkrighting h3#sum_total_amount{ font-size:24px;font-weight:700;margin:0 0 20px;color:var(--llb-ink); }
body.themeclass29 .checkrighting .pairdisc-line{ font-size:12px; }
body.themeclass29 .checkrighting .tbnRemoveing{ display:block;width:100%;background:var(--llb-btn);color:#fff !important;border:0;text-align:center;padding:15px;letter-spacing:1.5px;font-size:14px;font-weight:700;text-transform:uppercase;cursor:pointer;margin:8px 0 0; }
body.themeclass29 .checkrighting .tbnRemoveing:hover{ background:#444; }
body.themeclass29 .checkrighting .guest_line{ display:block;text-align:center;color:var(--llb-mut);margin:14px 0 2px;font-size:12px;text-transform:uppercase;letter-spacing:1px; }


/* ==========================================================================
   HEADING FACE — single source of truth (Arshad, 2026-09-08)
   Every heading-type element on the OLFA storefront reads MagdaCleanMono.
   The per-component font-family declarations that used to compete with this
   (Georgia / Arial / "Courier New" in this file and in the lelabo views'
   <style> blocks) were REMOVED, not overridden — grep `font-family` in this
   file and in views/theme_page/lelabo_fragrances/ to audit. Scoped to the
   theme body class so it can never reach another tenant.
   The one !important answers about-us.blade.php:105
   (`.au-zz-text, .au-zz-text * { font-family: Arial !important }` — the
   story body-copy reset that also sweeps the headings inside it and renders
   AFTER this sheet).
   ========================================================================== */
body.themeclass29 h1, body.themeclass29 h2, body.themeclass29 h3,
body.themeclass29 h4, body.themeclass29 h5, body.themeclass29 h6,
body.themeclass29 .au-title,
body.themeclass29 .au-section-title, body.themeclass29 .au-card-name,
body.themeclass29 .nav-feature-title, body.themeclass29 .card-name,
body.themeclass29 .pdp-name, body.themeclass29 .pdp-card-name,
body.themeclass29 .pdp-variant-name,
body.themeclass29 .vp-recs-title, body.themeclass29 .vp-rec-name,
body.themeclass29 .welcome-title, body.themeclass29 .co-page-title,
body.themeclass29 .co-pay-section-title, body.themeclass29 .cu-title,
body.themeclass29 .llb-cart-head .t,
body.themeclass29 .cg-title, body.themeclass29 .osa-hero-title,
body.themeclass29 .osa-panel-heading, body.themeclass29 .osa-section-heading,
body.themeclass29 .osa-subtitle, body.themeclass29 .title, body.themeclass29 .subtitle,
body.themeclass29 .form-title, body.themeclass29 summary,
body.themeclass29 .new-releases__title, body.themeclass29 .olfa-heading,
body.themeclass29 .olfa-feature-title,
body.themeclass29 .au-postimg a > span /* About Us image-band label (was inline Courier) */ {
  font-family: 'MagdaCleanMono', 'Courier New', monospace;
}
/* headings + bold sub-lines inside the About Us story blocks, incl. the
   editor's inline <span>s */
body.themeclass29 .au-zz-text h1, body.themeclass29 .au-zz-text h1 *,
body.themeclass29 .au-zz-text h2, body.themeclass29 .au-zz-text h2 *,
body.themeclass29 .au-zz-text h3, body.themeclass29 .au-zz-text h3 *,
body.themeclass29 .au-zz-text h4, body.themeclass29 .au-zz-text h4 *,
body.themeclass29 .au-zz-text strong, body.themeclass29 .au-zz-text strong *,
body.themeclass29 .au-zz-text b, body.themeclass29 .au-zz-text b * {
  font-family: 'MagdaCleanMono', 'Courier New', monospace !important; /* answers about-us.blade.php:105 */
}

/* ---------------------------------------------------------------------------
   Product-card name: fixed two-line box + smaller botanical part.

   Appended at the END of the file on purpose. `.pdp-card-row.pdp-card-name`
   (0,2,0) and the `.pdp-card .pdp-card-name` block inside the
   @media (max-width: 960px) further up (also 0,2,0) have EQUAL specificity -
   a media query adds none - so source order is what decides, and letter-spacing
   here only overrides the 0.14em there because this rule comes last.

   The span is emitted at render time by Helpertheme::botanical(), which wraps
   the "(Genus species)" part of the name, parentheses included. Names with no
   parenthetical get no span and are unaffected.
   --------------------------------------------------------------------------- */
.pdp-card-row.pdp-card-name {
    display: inline-block;
    min-height: 60px;
    letter-spacing: 0px;
    line-height: 22px;
}
html body .pdp-card .pdp-card-name {
    font-family: 'Avenir', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif !important;
}
.pdp-card-row.pdp-card-name span {
    font-size: 12px;
}

/* ---------------------------------------------------------------------------
   Product card: element types changed in _product_card.blade.php.
   The card used to be ONE anchor wrapping everything, so nothing inside it
   could be its own control. It is now an <article>, and three separate
   anchors sit inside: the art, the name, and the "Add to Cart" LABEL (the
   cart row itself is still a plain div, so the price is not clickable).

   These three rules exist ONLY to stop those anchors picking up link colour
   and underline. Nothing here is a design change - every size, padding,
   border and weight still comes from the existing .pdp-card rules above.
   --------------------------------------------------------------------------- */
a.pdp-variant-art,
a.pdp-card-row.pdp-card-name,
a.pdp-card-cart__link { color: inherit; text-decoration: none; }

/* ---------------------------------------------------------------------------
   MOBILE MENU — language / currency selects: theme the blue caret pill.

   The shared header.css paints these two <select>s with a bright blue rounded
   caret (assets/css/header.css, inside @media max-width:1080px):

       background-image: linear-gradient(45deg,  transparent 50%, white 50%),
                         linear-gradient(135deg, white 50%, transparent 50%),
                         linear-gradient(to right, #2d8ae8, #2d8ae8);

   header.css is loaded by EVERY institute, so it is not touched. This is an
   override instead: same three layers, same geometry - only the third layer's
   colour swaps from #2d8ae8 to the theme ink, so the pill matches the SIGN UP
   button directly above it. The two white wedges that draw the arrow are
   repeated verbatim because background-image is a single property; restating
   one layer means restating all three.

   Scoped body.themeclass29 (0,2,1) which outranks the shared rule (0,1,1), and
   wrapped in the SAME breakpoint - outside it the shared rule paints nothing.
   --------------------------------------------------------------------------- */
@media only screen and (max-width: 1080px) {
  body.themeclass29 .input-field.forcomn select {
    background-image:
      linear-gradient(45deg,  transparent 50%, #fff 50%),
      linear-gradient(135deg, #fff 50%, transparent 50%),
      linear-gradient(to right, var(--llb-ink, #1a1a1a), var(--llb-ink, #1a1a1a));
  }
}