/* =============================================================================
   OLFA (theme 29 / institute 41) — MOBILE-ONLY layer, ≤767px
   -----------------------------------------------------------------------------
   Source of truth: resources/views/theme_page/lelabo_fragrances/html/responsive/formtwo.html
   Loaded LAST (end of <body>, theme-29 gate in layouts/app.blade.php).
   The ENTIRE file is wrapped in one media query. 768px and up: this file is inert.
   EXCEPTION: one small block after the closing brace, wrapped in its own
   @media (max-width:1080px), matching header.css's own tablet breakpoint for
   #nav-screen-overlay (L2945) — see the note at the bottom of this file.
   Every rule is scoped to html body.themeclass29 so it can never leak to another tenant.
   `!important` is used only where an existing rule already carries it (see Phase 0 §5).
   Companion: resources/assets/js/lelabo-mobile.js (all handlers matchMedia-gated).
   Sections:  0 tokens/base · 1 announcement+header · 2 drawer · 3 footer · 4 home
              5 listings · 6 product · 7 info pages · 8 cart+search · 9 utilities
   ========================================================================== */
@media only screen and (max-width: 767px) {

/* ---------- 0. tokens + base ---------------------------------------------- */
html body.themeclass29 {
  --llbx-ink: #292c2b;
  --llbx-line: #d8d9d5;
  --llbx-muted: #646862;
  --llbx-paper: #fff;
  --llbx-surface: #f4f5f2;
  --llbx-surface-2: #f3f4f1;
  --llbx-surface-3: #faf9f6;
  --llbx-surface-4: #f7f6f2;
  --llbx-dark: #292c29;
  --llbx-dark-text: #f5f1e9;
  --llbx-img-bg: #f5f3ef;
  --llbx-gutter: 22px;
  --llbx-grid-gutter: 16px;
  --llbx-header-h: 76px;
  --llbx-annc-h: 32px;
  background: var(--llbx-paper);
  color: var(--llbx-ink);
  overflow-wrap: break-word;
  -webkit-tap-highlight-color: transparent;
}
html body.themeclass29 main { background: var(--llbx-paper); }
html body.themeclass29 main h1,
html body.themeclass29 main h2,
html body.themeclass29 main h3 { overflow-wrap: anywhere; }
html body.themeclass29 a:focus-visible,
html body.themeclass29 button:focus-visible,
html body.themeclass29 input:focus-visible { outline: 2px solid #704a66; outline-offset: 4px; }

/* Mobile-only markup emitted by partials/lelabo-mobile.blade.php ships with the `hidden`
   attribute; lelabo-mobile.js removes it only while (max-width:767px) matches. */

/* Utility: primary / secondary buttons (used by the purchase bar + hero CTA restyles) */
html body.themeclass29 .llbx-btn,
html body.themeclass29 .llbx-btn--secondary {
  min-height: 50px; padding: 13px 17px; display: flex; align-items: center; justify-content: center;
  width: 100%; font-size: 14px; font-weight: 700; letter-spacing: .3px; text-decoration: none;
  border: 1px solid var(--llbx-ink); background: var(--llbx-ink); color: #fff; cursor: pointer; border-radius: 0;
}
html body.themeclass29 .llbx-btn--secondary { background: transparent; color: var(--llbx-ink); }

/* ---------- 1. announcement bar + header (52px tier → 76px mockup header) ---- */
html body.themeclass29 #llbAnncBar.llb-annc,
html body.themeclass29 #llbAnncBar .llb-annc__inner,
html body.themeclass29 #llbAnncBar .llb-annc__viewport,
html body.themeclass29 #llbAnncBar .llb-annc__track,
html body.themeclass29 #llbAnncBar .llb-annc__slide,
html body.themeclass29 #llbAnncBar .llb-annc__slide a,
html body.themeclass29 #llbAnncBar .llb-annc__slide span { height: var(--llbx-annc-h) !important; min-height: 0 !important; line-height: 1.3 !important; }
html body.themeclass29 #llbAnncBar.llb-annc {
  background: #3e403e !important; color: #fff !important; font-size: 12px !important; letter-spacing: .3px !important; text-align: center;
}
html body.themeclass29 #llbAnncBar .llb-annc__slide a,
html body.themeclass29 #llbAnncBar .llb-annc__slide span { color: #fff !important; font-size: 12px !important; padding: 0 12px !important; display: flex !important; align-items: center; justify-content: center; }

html body.themeclass29 #app nav.common-head {
  height: var(--llbx-header-h) !important;
  background: #fff !important;
  border-bottom: 1px solid var(--llbx-line);
  box-shadow: none !important;
}
html body.themeclass29 #app nav.common-head .nav-wrapper,
html body.themeclass29 #app nav.common-head .nav-wrapper > div,
html body.themeclass29 #app nav.common-head .bxiMoni { height: var(--llbx-header-h) !important; }
html body.themeclass29 #app nav.common-head .llb-row1 {
  position: relative; height: var(--llbx-header-h) !important;
  display: flex !important; align-items: center; justify-content: flex-end;
  padding: 0 0 0 58px !important; /* 58 = hamburger slot on the left. Right: the row already sits 5px in
                                     from the nav edge; + the 11px inset of a centred 22px icon in its
                                     44px target = the bag icon ends on the 16px right gutter (measured). */
  gap: 0 !important;
}
/* hamburger → left, 44px target */
html body.themeclass29 #page-header {
  position: absolute !important; top: 50% !important; transform: translateY(-50%);
  inset-inline-end: auto !important; inset-inline-start: 1px !important; left: 1px; right: auto; /* lines measured 15px in from this edge -> they start on the 16px gutter */
  width: 44px; height: 44px; margin: 0 !important; display: flex; align-items: center; justify-content: center;
}
/* MOBILE-HDR (2026-09-24): two 22x1 lines, 7px apart, centred in the 44x44 target (flex column). */
html body.themeclass29 #page-header a#hamburger {
  width: 44px !important; height: 44px !important; position: relative;
  display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
}
html body.themeclass29 #page-header a#hamburger span.line {
  position: static !important; top: auto !important; left: auto !important; transform: none !important;
  width: 22px !important; height: 1px !important; margin: 0 !important; background: #292C2B !important;
}
html body.themeclass29 #page-header a#hamburger span.line:nth-child(3) { display: none !important; }
/* logo → dead centre */
html body.themeclass29 .llb-row1 .bxiMiLog,
html body.themeclass29 nav.common-head .bxiMoni .bxiMiLog {
  position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%);
  width: 40px !important; min-width: 40px !important; height: 60px !important; margin: 0 !important; padding: 0 !important;
  inset-inline-start: 50% !important;
}
html body.themeclass29 .bxiMiLog { border: 0 !important; }
/* MOBILE-HDR: top_menu draws the divider with the LOGICAL border-inline-end (!important), which the physical
   border:0 above did not cancel (measured 1px on the live page). Clear both, at higher specificity. */
html body.themeclass29 #app nav.common-head .llb-row1 .bxiMiLog,
html body.themeclass29 #app nav.common-head .bxiMoni .bxiMiLog { border: 0 !important; border-inline: 0 !important; }
html body.themeclass29 nav.common-head { top: var(--llbx-annc-h) !important; }
html body.themeclass29.llb-stuck nav.common-head { top: 0 !important; }
html body.themeclass29 .bxiMiLog a.brand-logo {
  position: static !important; transform: none !important; float: none !important; left: auto !important; top: auto !important; inset-inline-start: auto !important;
  height: 60px !important; width: 40px !important; display: flex !important; align-items: center; justify-content: center; margin: 0 !important; padding: 0 !important;
}
html body.themeclass29 .bxiMiLog a.brand-logo img,
html body.themeclass29 .incenseTheme img.logiHidi,
html body.themeclass29 img.logiHidi { max-height: 60px !important; height: 60px !important; width: 40px !important; max-width: 40px !important; object-fit: contain; margin: 0 !important; }
/* the desktop search bar collapses to nothing; a mobile icon (JS-injected) takes its place */
html body.themeclass29 .llb-row1 #llbSearchBar.llb-searchbar { display: none !important; }
/* tools: mail hidden (mockup has search + bag only), search icon, bag */
html body.themeclass29 .llb-row1 .header-btn.hidiRoMib {
  position: static !important; display: flex !important; align-items: center; gap: 4px !important;
  height: var(--llbx-header-h) !important; width: auto !important; padding: 0 !important; margin: 0 !important;
}
html body.themeclass29 .llb-row1 .header-btn.hidiRoMib a.llb-mail-btn { display: none !important; }
/* MOBILE-HDR: account icon hidden on mobile - Login / Sign Up stay in the hamburger drawer. */
html body.themeclass29 #app nav.common-head .llb-row1 .header-btn.hidiRoMib a.login-today.llb-icon-btn { display: none !important; }
html body.themeclass29 .llb-row1 .llbx-search-btn {
  width: 44px !important; height: 44px !important; padding: 0 !important; margin: 0 !important; background: none !important;
  display: flex !important; align-items: center; justify-content: center; color: var(--llbx-ink) !important; border: 0 !important;
}
/* MOBILE-HDR: search + bag icons identical - 22px, 1px stroke, #292C2B, no fill. */
html body.themeclass29 .llb-row1 .llbx-search-btn svg,
html body.themeclass29 .llb-row1 .iconCart a.dropdown-button svg.llb-bag-icon {
  width: 22px !important; height: 22px !important; stroke: #292C2B !important; stroke-width: 1 !important; fill: none !important;
}
html body.themeclass29 .llb-row1 .header-btn.hidiRoMib a.login-today { order: 3; }
html body.themeclass29 .llb-row1 .llbx-search-btn { order: 1; }
html body.themeclass29 .llb-row1 li.msg_icon.showRoMiblo.iconCart {
  order: 2; position: static !important; width: 44px !important; min-width: 0 !important; height: 44px !important; min-height: 0 !important;
  padding: 0 !important; margin: 0 !important; right: auto !important; inset-inline-end: auto !important; display: flex !important; align-items: center; justify-content: center; list-style: none;
}
/* MOBILE-HDR: no dividers around the bag (top_menu adds border-inline-start, lelabotheme <=1080px a border-right). */
html body.themeclass29 #app nav.common-head .llb-row1 .header-btn.hidiRoMib li.msg_icon.iconCart {
  border: 0 !important; border-inline: 0 !important; margin-inline-start: 0 !important; padding-inline-start: 0 !important;
}
html body.themeclass29 #app nav.common-head .llb-row1 li.iconCart::before,
html body.themeclass29 #app nav.common-head .llb-row1 li.iconCart::after { content: none !important; display: none !important; }
html body.themeclass29 .iconCart a.dropdown-button { position: relative !important; display: flex !important; align-items: center; justify-content: center; gap: 0; padding: 0 !important; margin: 0 !important; height: 44px !important; width: 44px !important; color: var(--llbx-ink) !important; }
/* MOBILE-HDR: cart count = plain number, top-right of the 44px bag target, blue, no brackets, hidden at 0.
   The "( )" were CSS: this file's own ::before/::after (removed here) plus top_menu's desktop
   ".iconCart .badge::before/::after" rules (all widths, kept for desktop) - cancelled below for mobile.
   Blade prints the number only when count > 0 and top_menu's cart-sync JS trims it, so 0 = :empty. */
html body.themeclass29 #app nav.common-head .iconCart a.dropdown-button span#totalcartm.badge {
  position: absolute !important; top: 6px !important; right: 4px !important; left: auto !important; bottom: auto !important;
  font-size: 11px !important; line-height: 1 !important; font-weight: 500 !important; color: #1E6FD9 !important;
  background: none !important; min-width: 0 !important; height: auto !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important;
}
html body.themeclass29 #app nav.common-head .iconCart a.dropdown-button span#totalcartm.badge::before,
html body.themeclass29 #app nav.common-head .iconCart a.dropdown-button span#totalcartm.badge::after { content: none !important; }
html body.themeclass29 #app nav.common-head .iconCart a.dropdown-button span#totalcartm.badge:empty { display: none !important; }

/* ---------- 2. off-canvas drawer (#sidebar-nav) → full-height sheet ---------- */
html body.themeclass29 nav#sidebar-nav.hedComn {
  width: min(100vw, 460px) !important; max-width: 460px !important; left: auto !important; right: 0 !important;
  top: 0 !important; height: 100vh !important; height: 100dvh !important; max-height: 100dvh !important;
  padding: 0 !important; background: var(--llbx-paper) !important; overflow-y: auto !important; box-shadow: none !important;
  transform: translateX(100%) !important; transition: transform .25s ease !important;
}
html body.themeclass29 nav#sidebar-nav.hedComn.active { transform: translateX(0) !important; }
/* Scoped to the SAME open-state selectors header.css itself uses (L1580 .active,
   L2340 :target) — never touches the closed/base rule, so opacity/display/pointer-events
   for the closed state stay entirely owned by header.css's existing drawer script.
   NOTE: superseded below — the ≤1080px block at the end of this file now hides
   a#nav-screen-overlay unconditionally for OLFA, so this background/opacity pair
   never paints (display:none !important always wins). Left in place, harmless,
   in case the 1080px rule is ever narrowed back to a real open/closed guard. */
html body.themeclass29 nav#sidebar-nav.hedComn.active + #nav-screen-overlay,
html body.themeclass29 #sidebar-nav:target + #nav-screen-overlay {
  background: rgba(15, 23, 24, .6) !important;
  opacity: 1 !important;
}
/* JS-injected head row: "Explore OLFA" + ✕ */
html body.themeclass29 nav#sidebar-nav .llbx-drawer-head {
  display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 22px 22px 0; margin-bottom: 20px;
}
html body.themeclass29 nav#sidebar-nav .llbx-drawer-head h2 { margin: 0; font-size: 23px; line-height: 1.2; color: var(--llbx-ink); font-weight: 700; }
html body.themeclass29 nav#sidebar-nav .llbx-drawer-head button { width: 44px; height: 44px; font-size: 21px; background: none; border: 0; color: var(--llbx-ink); cursor: pointer; padding: 0; }
html body.themeclass29 nav#sidebar-nav ul#sidebar-nav-list { padding: 0 22px !important; margin: 0 !important; }
html body.themeclass29 nav#sidebar-nav ul#sidebar-nav-list > li.sidebar-nav-item {
  padding: 0 !important; margin: 0 !important; opacity: 1 !important; transform: none !important; border-bottom: 1px solid var(--llbx-line);
}
html body.themeclass29 nav#sidebar-nav #sidebar-nav-list .sidebar-nav-item > a,
html body.themeclass29 nav#sidebar-nav #sidebar-nav-list .sidebar-nav-item.llbm-item > .llbm-toggle {
  display: flex !important; align-items: center; justify-content: space-between; width: 100%;
  padding: 17px 0 !important; margin: 0 !important; font-size: 15px !important; line-height: 1.3 !important;
  color: var(--llbx-ink) !important; text-decoration: none !important; text-transform: none !important; letter-spacing: 0 !important;
  background: none !important; border: 0 !important;
}
html body.themeclass29 nav#sidebar-nav #sidebar-nav-list .sidebar-nav-item.llbm-item > .llbm-toggle .llbm-chevron { font-size: 14px; margin-inline-start: 12px; }
html body.themeclass29 nav#sidebar-nav ul.llbm-sub { padding: 0 0 10px !important; margin: 0 !important; }
html body.themeclass29 nav#sidebar-nav ul.llbm-sub li.sidebar-nav-item { border: 0 !important; }
html body.themeclass29 nav#sidebar-nav ul.llbm-sub li.sidebar-nav-item > a {
  padding: 8px 0 8px 16px !important; font-size: 14px !important; color: var(--llbx-muted) !important; justify-content: flex-start;
}
html body.themeclass29 nav#sidebar-nav ul.llbm-sub li.sidebar-nav-item.llbm-all > a { color: var(--llbx-ink) !important; text-decoration: underline !important; text-underline-offset: 4px; }
/* language / currency selects + login buttons (withouthead list) */
html body.themeclass29 nav#sidebar-nav ul#sidebar-nav-list.withouthead { padding: 14px 22px 30px !important; display: flex; flex-wrap: wrap; gap: 10px; }
html body.themeclass29 nav#sidebar-nav ul#sidebar-nav-list.withouthead > li.sidebar-nav-item { border: 0; flex: 1 1 45%; min-width: 0; }
html body.themeclass29 nav#sidebar-nav ul#sidebar-nav-list.withouthead .input-field.forcomn { margin: 0 !important; }
html body.themeclass29 nav#sidebar-nav ul#sidebar-nav-list.withouthead select {
  display: block !important; width: 100% !important; height: 44px !important; padding: 0 14px !important; margin: 0 !important;
  border: 1px solid var(--llbx-line) !important; border-radius: 0 !important; background: #fff !important; font-size: 14px !important; color: var(--llbx-ink) !important;
}
html body.themeclass29 nav#sidebar-nav ul#sidebar-nav-list.withouthead .select-wrapper input.select-dropdown {
  height: 44px !important; line-height: 44px !important; margin: 0 !important; padding: 0 14px !important; border: 1px solid var(--llbx-line) !important; border-radius: 0 !important; font-size: 14px !important; box-sizing: border-box;
}
html body.themeclass29 nav#sidebar-nav .sidebarFoti { display: none !important; }
html body.themeclass29 nav#sidebar-nav a.btn,
html body.themeclass29 nav#sidebar-nav button.btn,
html body.themeclass29 nav#sidebar-nav .sidebar-nav-item .btn {
  width: 100% !important; margin: 0 0 10px !important; height: 50px !important; line-height: 48px !important; border-radius: 0 !important;
  box-shadow: none !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: .3px !important; text-transform: none !important;
}

/* ---------- 3. footer → accordion columns ---------------------------------- */
html body.themeclass29 footer.site-footer {
  padding: 15px var(--llbx-gutter) 28px !important; background: var(--llbx-surface-2) !important; border-top: 1px solid var(--llbx-line) !important; margin: 0 !important;
}
html body.themeclass29 footer.site-footer .footer-grid { display: block !important; gap: 0 !important; padding: 0 !important; max-width: none !important; }
html body.themeclass29 footer.site-footer .footer-col { border-bottom: 1px solid var(--llbx-line); padding: 0 !important; margin: 0 !important; }
html body.themeclass29 footer.site-footer .footer-col h4 {
  cursor: pointer; padding: 17px 0 !important; margin: 0 !important; display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-size: 15px !important; line-height: 1.3 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--llbx-ink) !important; font-weight: 400 !important;
}
html body.themeclass29 footer.site-footer .footer-col h4:after { content: "+"; font-size: 20px; line-height: 1; }
html body.themeclass29 footer.site-footer .footer-col.llbx-open h4:after { content: "−"; }
html body.themeclass29 footer.site-footer .footer-col > a,
html body.themeclass29 footer.site-footer .footer-col > .footer-social,
html body.themeclass29 footer.site-footer .footer-col > p,
html body.themeclass29 footer.site-footer .footer-col > ul { display: none; }
html body.themeclass29 footer.site-footer .footer-col.llbx-open > a,
html body.themeclass29 footer.site-footer .footer-col.llbx-open > p,
html body.themeclass29 footer.site-footer .footer-col.llbx-open > ul { display: block; }
html body.themeclass29 footer.site-footer .footer-col.llbx-open > .footer-social { display: flex; gap: 14px; padding: 4px 0 18px; }
html body.themeclass29 footer.site-footer .footer-col > a { padding: 8px 0 !important; margin: 0 !important; font-size: 14px !important; color: var(--llbx-ink) !important; text-decoration: none; }
html body.themeclass29 footer.site-footer .footer-col > a:last-of-type { padding-bottom: 18px !important; }
/* "Stay Close" newsletter column hidden on mobile per request 2026-09-23 (desktop untouched — this file is media-query-gated) */
html body.themeclass29 footer.site-footer .footer-col.newsletter { display: none !important; }
/* newsletter column stays open, no toggle */
html body.themeclass29 footer.site-footer .footer-col.newsletter h4 { cursor: default; }
html body.themeclass29 footer.site-footer .footer-col.newsletter h4:after { content: none; }
html body.themeclass29 footer.site-footer .footer-col.newsletter > p { display: block !important; }
html body.themeclass29 footer.site-footer .footer-col.newsletter > form { display: grid !important; }
html body.themeclass29 footer.site-footer .footer-col.newsletter > p { font-size: 14px !important; line-height: 1.6; color: var(--llbx-muted); margin: 0 0 14px !important; }
html body.themeclass29 footer.site-footer .llb-newsletter-form { display: grid !important; grid-template-columns: 1fr auto; gap: 8px !important; margin-bottom: 18px; }
html body.themeclass29 footer.site-footer .llb-newsletter-form input {
  height: 48px !important; margin: 0 !important; padding: 0 14px !important; border: 1px solid var(--llbx-line) !important; border-radius: 0 !important; background: #fff !important; font-size: 14px !important; min-width: 0 !important; box-sizing: border-box;
}
html body.themeclass29 footer.site-footer .llb-newsletter-form button {
  height: 48px !important; padding: 0 18px !important; margin: 0 !important; border: 1px solid var(--llbx-ink) !important; background: var(--llbx-ink) !important; color: #fff !important; font-size: 14px !important; font-weight: 700; border-radius: 0 !important;
}
html body.themeclass29 footer.site-footer .llb-newsletter-form .llb-newsletter-status { grid-column: 1 / -1; margin: 0; }
html body.themeclass29 footer.site-footer .llb-newsletter-form .llb-newsletter-status:empty { display: none; }
html body.themeclass29 footer.site-footer .footer-copy,
html body.themeclass29 footer.site-footer .footer-bottom {
  display: block !important; padding: 0 !important; margin: 25px 0 0 !important; font-size: 13px !important; color: var(--llbx-muted) !important; text-align: left; border: 0 !important;
}
html body.themeclass29 footer.site-footer .footer-bottom { margin-top: 6px !important; }
/* the layout's generic footer (theme_page/layouts/footer) — keep only its scripts/modals */
html body.themeclass29 main + footer:not(.site-footer),
html body.themeclass29 footer.page-footer:not(.site-footer) { display: none !important; }
/* VAT badge / "Powered by" / Terms bar (div#footer, separate from footer.site-footer)
   hidden on mobile per request 2026-09-23 (desktop untouched — this file is media-query-gated) */
html body.themeclass29 #footer { display: none !important; }

/* ---------- 4. home ------------------------------------------------------- */
/* hero: the 5-column teaser strip becomes a horizontal snap track of 3/4 slides;
   the existing .slide-bg crossfade stays behind it, driven by lelabo-mobile.js */
html body.themeclass29 .hero-slider {
  position: relative; height: auto !important; min-height: 0 !important; max-height: none !important;
  aspect-ratio: 3 / 4; overflow: hidden; background: #1b292d; color: #fff; margin: 0 !important; padding: 0 !important;
}
html body.themeclass29 .hero-slider .slide-bgs,
html body.themeclass29 .hero-slider .slide-bg { position: absolute; inset: 0; height: 100% !important; }
html body.themeclass29 .hero-slider .slide-bg picture,
html body.themeclass29 .hero-slider .slide-bg .slide-media { width: 100% !important; height: 100% !important; object-fit: cover; object-position: 60% center; display: block; }
html body.themeclass29 .hero-slider .slider-veil { display: none !important; }
html body.themeclass29 .hero-slider .teasers {
  position: absolute !important; inset: 0 !important; z-index: 2;
  display: flex !important; grid-template-columns: none !important; gap: 0 !important; padding: 0 !important; margin: 0 !important;
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
}
html body.themeclass29 .hero-slider .teasers::-webkit-scrollbar { display: none; }
html body.themeclass29 .hero-slider .teaser {
  flex: 0 0 100% !important; width: 100% !important; min-width: 0 !important; height: 100% !important;
  position: relative !important; display: block !important; opacity: 1 !important; transform: none !important;
  border: 0 !important; padding: 0 !important; margin: 0 !important; scroll-snap-align: start; scroll-snap-stop: always;
  background: linear-gradient(0deg, rgba(10, 19, 22, .91), transparent 85%);
}
html body.themeclass29 .hero-slider .teaser-inner {
  position: absolute !important; left: 24px !important; right: 24px !important; bottom: 28px !important; top: auto !important;
  display: block !important; transform: none !important; opacity: 1 !important; padding: 0 !important; margin: 0 !important; height: auto !important;
}
html body.themeclass29 .hero-slider .teaser h3 { margin: 0 !important; padding: 0 !important; }
html body.themeclass29 .hero-slider .teaser h3 .teaser-link {
  font-size: 20px !important; line-height: 1.2 !important; letter-spacing: -.2px !important; color: #fff !important; text-transform: none !important; display: block; text-decoration: none;
}
html body.themeclass29 .hero-slider .teaser .teaser-tag {
  display: block !important; opacity: 1 !important; transform: none !important; margin: 10px 0 0 !important; padding: 0 !important;
  font-size: 16px !important; line-height: 1.55 !important; color: #fff !important; max-width: 300px;
}
html body.themeclass29 .hero-slider .teaser .teaser-more {
  display: flex !important; align-items: center; justify-content: center; opacity: 1 !important; pointer-events: auto !important; transform: none !important;
  margin: 21px 0 0 !important; min-height: 50px; padding: 13px 17px; width: 100%; box-sizing: border-box;
  font-size: 14px !important; font-weight: 700 !important; letter-spacing: .3px !important; text-decoration: none !important; text-transform: none !important;
  background: rgba(23, 23, 23, .30) !important; border:1px solid #ffffff78 !important; color: #fff !important;
}
html body.themeclass29 .hero-slider .teaser .teaser-more::before { content: none !important; }
html body.themeclass29 .hero-slider .teaser .teaser-more::after { content: none !important; }
/* carousel controls (partial, moved under the hero by JS) */
html body.themeclass29 .llbx-hero-controls {
  display: flex; align-items: center; justify-content: space-between; padding: 2px 15px; border-bottom: 1px solid var(--llbx-line); background: var(--llbx-paper);
}
html body.themeclass29 .llbx-hero-controls .llbx-hero-step { font-size: 29px; width: 44px; height: 44px; line-height: 1; background: none; border: 0; color: var(--llbx-ink); padding: 0; cursor: pointer; }
html body.themeclass29 .llbx-hero-controls .llbx-hero-step:disabled { opacity: .5; cursor: not-allowed; }
html body.themeclass29 .llbx-hero-dots { display: flex; align-items: center; }
html body.themeclass29 .llbx-hero-dots button { width: 34px; height: 44px; padding: 0; display: grid; place-items: center; background: none; border: 0; cursor: pointer; }
html body.themeclass29 .llbx-hero-dots button span { width: 6px; height: 6px; border-radius: 50%; background: #babcb8; display: block; transition: width .2s; }
html body.themeclass29 .llbx-hero-dots button[aria-pressed="true"] span { background: var(--llbx-ink); width: 20px; border-radius: 4px; }

/* Simply Natural */
/* NB: on the live page .new-releases and .olfa-reviews are nested INSIDE .olfa-natural,
   so the beige "Simply Natural" surface is applied to .olfa-wrap, not the section. */
html body.themeclass29 .olfa-natural { background: var(--llbx-paper) !important; padding: 0 !important; margin: 0 !important; }
html body.themeclass29 .olfa-natural .olfa-wrap { background: var(--llbx-surface-3); text-align: center; max-width: none !important; padding: 34px 24px 36px !important; margin: 0 !important; }
html body.themeclass29 .olfa-natural h2.olfa-heading { font-size: 25px !important; line-height: 1.3 !important; font-weight: 700 !important; letter-spacing: 3.5px !important; text-transform: uppercase; margin: 0 !important; }
html body.themeclass29 .olfa-natural p.olfa-intro { max-width: 440px; margin: 18px auto 0 !important; font-size: 15px !important; line-height: 1.9 !important; font-weight: 400; color: #64605c !important; }
/* Restored 2026-09-23 (was removed, then asked back): permanent 3-icon
   summary (Handcrafted / Natural Materials / No Synthetic Fragrance) PLUS
   "Our approach", which expands to the real 5-item list (full titles + copy).
   .llbx-feature-preview is built by JS by cloning the icon from the first 3
   real .olfa-feature items and never touched by the toggle. JS places
   [preview, toggle, features] in that DOM order so nothing above the toggle
   ever changes size — opening/closing can't push the button around. */
html body.themeclass29 .olfa-natural .llbx-feature-preview {
  display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px 10px !important; margin: 27px auto 14px !important; max-width: 400px; padding: 0 !important;
}
html body.themeclass29 .olfa-natural .olfa-feature { display: flex !important; flex-direction: column; align-items: center; gap: 10px; padding: 0 !important; margin: 0 !important; text-align: center; }
html body.themeclass29 .olfa-natural .olfa-feature-icon { width: 29px; height: 29px; display: inline-flex; color: #394743; margin: 0 !important; }
html body.themeclass29 .olfa-natural .olfa-feature-icon img,
html body.themeclass29 .olfa-natural .olfa-feature-icon svg { width: 29px !important; height: 29px !important; }
html body.themeclass29 .olfa-natural .olfa-feature-title { font-size: 12px !important; line-height: 1.4 !important; font-weight: 700 !important; letter-spacing: .1px !important; margin: 0 !important; text-transform: none !important; }
html body.themeclass29 .olfa-natural .olfa-feature-text { display: none; }
html body.themeclass29 .olfa-natural .olfa-features { display: none !important; }
/* "Our approach" toggle (JS-injected) → expanded list with the feature copy */
html body.themeclass29 .olfa-natural .llbx-values-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; padding: 10px 0; margin: 0 auto;
  font-size: 13px; color: #514d47; text-decoration: underline; text-underline-offset: 5px; background: none !important; border: 0; cursor: pointer;
}
html body.themeclass29 .olfa-natural .llbx-values-toggle:after { content: "+"; font-size: 18px; text-decoration: none; }
html body.themeclass29 .olfa-natural.llbx-values-open .llbx-values-toggle:after { content: "\2212"; }
html body.themeclass29 .olfa-natural.llbx-values-open .olfa-features { display: block !important; max-width: 440px; text-align: left; margin-top: 10px !important; }
html body.themeclass29 .olfa-natural.llbx-values-open .olfa-features .olfa-feature { display: block !important; text-align: left; border-top: 1px solid #dedbd4; padding: 17px 0 !important; }
/* Icons removed from the expanded list per request 2026-09-23 — title/text only */
html body.themeclass29 .olfa-natural.llbx-values-open .olfa-features .olfa-feature-icon { display: none !important; }
html body.themeclass29 .olfa-natural.llbx-values-open .olfa-features .olfa-feature:last-child { padding-bottom: 0 !important; }
html body.themeclass29 .olfa-natural.llbx-values-open .olfa-features .olfa-feature-title { font-size: 14px !important; line-height: 1.5 !important; letter-spacing: .3px !important; }
html body.themeclass29 .olfa-natural.llbx-values-open .olfa-features .olfa-feature-text { display: block; font-size: 14px !important; line-height: 1.75 !important; margin: 7px 0 0 !important; color: var(--llbx-ink); max-width: none !important; }
/* "The Story" CTA removed per request 2026-09-23 */
html body.themeclass29 .olfa-natural .olfa-cta { display: none !important; }
/* wide banners (partial) */
html body.themeclass29 .llbx-banner-stack { display: grid; gap: 14px; padding: 18px 16px 28px; background: var(--llbx-paper); }
html body.themeclass29 .llbx-wide-banner { aspect-ratio: 16 / 9; position: relative; display: block; background: #253134; color: #fff; text-decoration: none; overflow: hidden; }
html body.themeclass29 .llbx-wide-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
html body.themeclass29 .llbx-wide-banner:after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7, 16, 19, .78), rgba(7, 16, 19, .05) 85%); }
html body.themeclass29 .llbx-wide-banner > div { position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 1; }
html body.themeclass29 .llbx-wide-banner h2 { font-size: 25px; line-height: 1.2; margin: 0; color: #fff; }
html body.themeclass29 .llbx-wide-banner span { display: inline-block; margin-top: 8px; font-size: 14px; text-decoration: underline; text-underline-offset: 5px; }
/* new releases → simple stack */
/* "New From OLFA" hidden on mobile per request 2026-09-23 (desktop untouched — this file is media-query-gated) */
html body.themeclass29 .new-releases { display: none !important; }
html body.themeclass29 .new-releases__header { display: flex !important; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 0 0 22px !important; padding: 0 !important; }
html body.themeclass29 .new-releases__title { font-size: 23px !important; line-height: 1.2 !important; margin: 0 !important; }
html body.themeclass29 .new-releases__all { font-size: 13px !important; color: var(--llbx-muted) !important; text-decoration: underline; }
html body.themeclass29 .new-releases__grid { display: grid !important; grid-template-columns: 1fr !important; gap: 24px 14px !important; }
html body.themeclass29 .new-releases__secondary { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 24px 14px !important; }
html body.themeclass29 .new-release-card { display: block !important; text-decoration: none; min-width: 0; height: auto !important; }
html body.themeclass29 .new-release-card__image { display: block !important; width: 100% !important; height: auto !important; aspect-ratio: 16 / 10; background-size: cover; background-position: 76% center; background-color: var(--llbx-img-bg); }
html body.themeclass29 .new-releases__secondary .new-release-card__image { aspect-ratio: 3 / 4; }
html body.themeclass29 .new-release-card__copy { display: block !important; padding: 13px 0 0 !important; position: static !important; background: none !important; color: var(--llbx-ink) !important; }
html body.themeclass29 .new-release-card__label { display: block; font-size: 11px !important; letter-spacing: .2px; color: var(--llbx-muted); margin: 0 0 7px; }
html body.themeclass29 .new-release-card__name { display: block; font-size: 17px !important; line-height: 1.3; color: var(--llbx-ink) !important; }
html body.themeclass29 .new-release-card__aroma { display: block; font-size: 14px !important; line-height: 1.4; margin-top: 7px; color: var(--llbx-muted) !important; }
html body.themeclass29 .new-release-card__cta { display: inline-block; margin-top: 11px; font-size: 14px !important; text-decoration: underline; text-underline-offset: 4px; color: var(--llbx-ink) !important; }
/* reviews */
/* Reviews section hidden on mobile per request 2026-09-23 (desktop untouched — this file is media-query-gated) */
html body.themeclass29 .olfa-reviews { display: none !important; }

/* ---------- 5. collection landings + category listings ---------------------- */
/* shared: breadcrumbs → "‹ Parent" back link + intro block (.shopIntro in the mockup) */
html body.themeclass29 .page-crumbs { padding: 24px var(--llbx-gutter) 0 !important; margin: 0 !important; background: var(--llbx-paper); }
html body.themeclass29 .page-crumbs .crumbs-inner {
  display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px; max-width: none !important; padding: 0 !important; margin: 0 !important;
  font-size: 13px !important; line-height: 1.4 !important; color: var(--llbx-muted) !important; letter-spacing: 0 !important; text-transform: none !important; min-height: 44px;
}
html body.themeclass29 .page-crumbs .crumbs-inner a,
html body.themeclass29 .page-crumbs .crumbs-inner span { font-size: 13px !important; color: var(--llbx-ink) !important; text-decoration: none; letter-spacing: 0 !important; text-transform: none !important; }
html body.themeclass29 .page-crumbs .crumbs-inner .crumbs-count { margin-inline-start: auto; color: var(--llbx-muted) !important; }
/* collection landing (classic-collection): heading + stacked 16/10 banners with title below */
html body.themeclass29 .classic-head { padding: 12px var(--llbx-gutter) 18px !important; margin: 0 !important; max-width: none !important; text-align: left !important; background: var(--llbx-paper); }
html body.themeclass29 .classic-head h1 { font-size: 28px !important; line-height: 1.2 !important; letter-spacing: -.6px !important; margin: 0 !important; padding: 0 !important; text-align: left !important; text-transform: none !important; }
html body.themeclass29 .classic-head p { font-size: 16px !important; line-height: 1.65 !important; color: var(--llbx-muted) !important; margin: 12px 0 0 !important; max-width: none !important; text-align: left !important; }
html body.themeclass29 .classic-list {
  display: grid !important; grid-template-columns: 1fr !important; gap: 28px !important; padding: 0 20px 36px !important; margin: 0 !important; max-width: none !important; background: var(--llbx-paper);
}
html body.themeclass29 .classic-list .classic-item { border-bottom: 1px solid #d5d0c7; padding-bottom: 24px; }
/* FLATLAY-OVERLAY (2026-10-12): the stacked-card banner rules (aspect-ratio:auto,
   overflow:visible, bottom border, static image, hidden veil, title below +
   "Explore ->") were removed here. Mobile now matches desktop: title centred over
   a 16/9 image. See FLATLAY-OVERLAY in lelabotheme.css. */
html body.themeclass29 .classic-pagination { padding: 0 var(--llbx-gutter) 30px !important; }
/* category listing (product-category): hero → intro, 2-column card grid */
html body.themeclass29 .pdp-hero { padding: 0 !important; margin: 0 !important; background: var(--llbx-paper); }
/* PDP-HERO-BANNER (2026-10-12): the rules that hid .pdp-flatlay-img and put the
   title below as plain text were removed. Mobile now matches desktop (image +
   centred title); see PDP-HERO-BANNER in lelabotheme.css. */
/* PDP-2COL (2026-10-12): columns / gap / padding are set once, in OLFA-PDP-MOBILE-1 at the end of this file. */
html body.themeclass29 .pdp-variants {
  display: grid !important;
  margin: 0 !important; max-width: none !important; width: auto !important; background: var(--llbx-paper);
}
html body.themeclass29 .pdp-variants-clear { display: none !important; }
html body.themeclass29 .pdp-variants .pdp-variant.pdp-card,
html body.themeclass29 .vp-recs .pdp-variant.pdp-card {
  min-height: 0 !important; height: auto !important; width: auto !important; max-width: none !important; min-width: 0 !important;
  display: flex !important; flex-direction: column; border: 0 !important; box-shadow: none !important; background: transparent !important; padding: 0 !important; margin: 0 !important;
}
html body.themeclass29 .pdp-card .pdp-variant-art {
  display: block !important; width: 100% !important; height: auto !important; max-height: none !important; aspect-ratio: 3 / 4 !important; background: var(--llbx-img-bg) !important; margin: 0 !important; overflow: hidden;
}
html body.themeclass29 .pdp-card .pdp-variant-art img { width: 100% !important; height: 100% !important; object-fit: contain !important; display: block; }
html body.themeclass29 .pdp-card .pdp-card-greenbar { display: none !important; }
html body.themeclass29 .pdp-card .pdp-card-row { position: static !important; inset: auto !important; padding: 0 1px !important; margin: 0 !important; height: auto !important; min-height: 0 !important; border: 0 !important; text-align: left !important; justify-content: flex-start !important; width: auto !important; background: none !important; }
html body.themeclass29 .pdp-card .pdp-card-name {
  order: 1; margin-top: 12px !important; font-size: 16px !important; line-height: 1.35 !important; letter-spacing: 0 !important; color: var(--llbx-ink) !important; text-decoration: none; text-transform: uppercase; font-weight: 700;
}
html body.themeclass29 .pdp-card .pdp-card-desc { order: 2; font-size: 14px !important; line-height: 1.5 !important; color: var(--llbx-muted) !important; margin-top: 8px !important; -webkit-line-clamp: 3; display: -webkit-box !important; -webkit-box-orient: vertical; overflow: hidden; }
html body.themeclass29 .pdp-card .pdp-card-pack { order: 3; font-size: 12px !important; line-height: 1.4 !important; color: var(--llbx-muted) !important; margin-top: 10px !important; display: block !important; }
html body.themeclass29 .pdp-card .pdp-card-pack > * { padding: 0 !important; margin: 0 !important; font-size: 12px !important; }
html body.themeclass29 .pdp-card .pdp-card-cart { order: 4; display: flex !important; flex-direction: column-reverse; align-items: flex-start !important; gap: 0 !important; margin-top: 10px !important; }
html body.themeclass29 .pdp-card .pdp-card-price { font-size: 16px !important; line-height: 1.3 !important; color: var(--llbx-ink) !important; margin: 0 !important; padding: 0 !important; display: block; font-weight: 400; }
html body.themeclass29 .pdp-card .pdp-card-cart__link {
  display: inline-flex !important; align-items: center; min-height: 44px; font-size: 13px !important; text-decoration: underline !important; text-underline-offset: 4px; color: var(--llbx-ink) !important;
  background: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important; letter-spacing: 0 !important; text-transform: none !important;
}
html body.themeclass29 .pdp-card .pdp-card-cart__status { order: 5; font-size: 12px; color: var(--llbx-muted); }
html body.themeclass29 .pdp-card .pdp-card-cart__status:empty { display: none; }
/* small phones */
@media (max-width: 359px) {
  html body.themeclass29 .pdp-card .pdp-card-name { font-size: 14px !important; }
  html body.themeclass29 .pdp-card .pdp-card-desc { font-size: 13px !important; }
  html body.themeclass29 .classic-head h1 { font-size: 25px !important; }
}

/* ---------- 6. product page ----------------------------------------------- */
/* Gallery: horizontal scroll-snap swipe, 3/4 aspect, dots navigation */
html body.themeclass29 .productCrumb { padding: 24px var(--llbx-gutter) 0 !important; margin: 0 !important; background: var(--llbx-paper); }
html body.themeclass29 .productGallery {
  display: block !important; position: relative; margin: 0 !important; padding: 0 !important;
  width: 100%; background: var(--llbx-surface);
}
html body.themeclass29 .productGallery .galleryTrack {
  display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
  width: 100%; height: auto; aspect-ratio: 3 / 4; gap: 0 !important; margin: 0 !important; padding: 0 !important;
  scrollbar-width: none; /* Firefox */ background: var(--llbx-surface);
}
html body.themeclass29 .productGallery .galleryTrack::-webkit-scrollbar { display: none; } /* Chrome/Safari */
html body.themeclass29 .productGallery .galleryTrack img {
  flex: 0 0 100% !important; width: 100% !important; height: auto !important; aspect-ratio: 3 / 4 !important;
  object-fit: contain !important; object-position: center; display: block; scroll-snap-align: start; scroll-snap-stop: always;
  margin: 0 !important; padding: 0 !important; background: var(--llbx-img-bg);
}
html body.themeclass29 .productGallery .galleryDots {
  display: flex !important; justify-content: center; align-items: center; gap: 8px;
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 10;
  padding: 8px 12px !important; background: rgba(0, 0, 0, 0.4); border-radius: 20px; margin: 0 !important;
}
html body.themeclass29 .productGallery .galleryDots button {
  display: flex; align-items: center; justify-content: center; width: 8px; height: 8px;
  background: rgba(255, 255, 255, 0.6); border: 0 !important; border-radius: 50%; padding: 0 !important; margin: 0 !important;
  cursor: pointer; min-height: 0; min-width: 0;
}
html body.themeclass29 .productGallery .galleryDots button[aria-pressed="true"] { background: #fff; }
html body.themeclass29 .productGallery .galleryDots button span { display: none; }
/* Product info section */
html body.themeclass29 .productBody { padding: 24px var(--llbx-gutter) !important; margin: 0 !important; background: var(--llbx-paper); }
html body.themeclass29 .productBody .eyebrow {
  font-size: 12px !important; letter-spacing: 1.7px !important; text-transform: uppercase; color: var(--llbx-muted) !important;
  margin: 0 0 8px !important; padding: 0 !important; font-weight: 400;
}
html body.themeclass29 .productBody .productHeading {
  display: flex !important; flex-wrap: wrap; gap: 12px; align-items: baseline; justify-content: space-between; margin: 0 0 6px !important; width: 100%;
}
html body.themeclass29 .productBody .productHeading h1 {
  font-size: 27px !important; line-height: 1.2 !important; letter-spacing: -.6px !important; color: var(--llbx-ink) !important;
  margin: 0 !important; padding: 0 !important; flex: 1 1 100%; text-transform: none !important;
}
html body.themeclass29 .productBody .productHeading span {
  font-size: 22px !important; line-height: 1.3 !important; color: var(--llbx-ink) !important; font-weight: 400;
  margin: 0 !important; padding: 0 !important; flex: 0 0 auto;
}
html body.themeclass29 .productBody .productPack {
  font-size: 14px !important; line-height: 1.5 !important; color: var(--llbx-muted) !important;
  margin: 0 0 18px !important; padding: 0 !important;
}
/* Variant choices (Terra/Bloom discovery switch) */
html body.themeclass29 .discoverySwitch {
  display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 14px !important; margin: 20px 0 !important; padding: 0 !important;
  list-style: none; background: none !important; border: none !important;
}
html body.themeclass29 .discoverySwitch a {
  display: flex !important; flex-direction: column; gap: 6px; padding: 14px !important; border: 1px solid var(--llbx-line); text-decoration: none;
  text-align: left; background: var(--llbx-surface-2) !important; color: var(--llbx-ink) !important;
}
html body.themeclass29 .discoverySwitch a[aria-current="page"] { background: #efede7 !important; border-color: var(--llbx-ink); }
html body.themeclass29 .discoverySwitch a strong { font-size: 15px !important; font-weight: 700; color: var(--llbx-ink) !important; }
html body.themeclass29 .discoverySwitch a span { font-size: 12px !important; color: var(--llbx-muted) !important; line-height: 1.4; }
/* Variant size choices */
html body.themeclass29 .variantChoices {
  display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important;
  margin: 20px 0 !important; padding: 0 !important; border: none !important; background: none !important;
}
html body.themeclass29 .variantChoices legend { padding: 0 !important; margin: 0 0 12px !important; width: 100%; font-size: 14px !important; font-weight: 400; }
html body.themeclass29 .variantChoices button {
  display: flex !important; flex-direction: column; gap: 4px; align-items: center; justify-content: center;
  padding: 12px 8px !important; border: 1px solid var(--llbx-line) !important; background: var(--llbx-surface-2) !important;
  color: var(--llbx-ink) !important; font-size: 14px !important; font-weight: 400; cursor: pointer; min-height: 60px;
  text-align: center; letter-spacing: 0 !important; text-transform: none !important;
}
html body.themeclass29 .variantChoices button[aria-pressed="true"] { background: #efede7 !important; border-color: var(--llbx-ink); font-weight: 700; }
html body.themeclass29 .variantChoices button small { font-size: 12px !important; color: var(--llbx-muted) !important; font-weight: 400; }
/* Qty controls + purchase row */
html body.themeclass29 .purchaseRow {
  display: flex !important; gap: 12px; align-items: center; margin: 24px 0 !important; padding: 0 !important;
}
html body.themeclass29 .purchaseRow .qty {
  display: flex !important; align-items: center; gap: 0 !important; border: 1px solid var(--llbx-line); height: 37px;
  background: var(--llbx-surface-2) !important; border-radius: 0;
}
html body.themeclass29 .purchaseRow .qty button {
  width: 37px; height: 37px; min-height: 0; padding: 0 !important; display: flex; align-items: center; justify-content: center;
  background: transparent !important; border: 0 !important; border-right: 1px solid var(--llbx-line); color: var(--llbx-ink) !important;
  font-size: 16px !important; font-weight: 700; cursor: pointer; flex: 0 0 auto;
}
html body.themeclass29 .purchaseRow .qty button:last-child { border-right: none; border-left: 1px solid var(--llbx-line); }
html body.themeclass29 .purchaseRow .qty output {
  flex: 1; text-align: center; font-size: 14px !important; font-weight: 400; color: var(--llbx-ink) !important;
  display: block; padding: 0 8px; margin: 0 !important;
}
html body.themeclass29 .purchaseRow button.primary {
  flex: 1; min-height: 37px; padding: 8px 17px !important; font-size: 13px !important;
}
/* Duo offer section */
html body.themeclass29 .duoOffer {
  background: #eeeae2 !important; border: none !important; padding: 24px var(--llbx-gutter) !important; margin: 24px 0 !important;
  text-align: center;
}
html body.themeclass29 .duoOffer .duoTitle {
  display: flex !important; align-items: center; justify-content: center; gap: 8px; font-size: 20px !important; line-height: 1.3 !important;
  letter-spacing: 0 !important; color: var(--llbx-ink) !important; margin: 0 0 12px !important; padding: 0 !important; text-transform: none !important;
}
html body.themeclass29 .duoOffer .duoTitle svg { width: 44px; height: 80px; flex: 0 0 auto; }
html body.themeclass29 .duoOffer .duoTitle span { flex: 1; text-align: center; }
html body.themeclass29 .duoOffer p { font-size: 14px !important; line-height: 1.5 !important; color: var(--llbx-ink) !important; margin: 0 0 8px !important; }
html body.themeclass29 .duoOffer .duoPack { font-size: 12px !important; color: var(--llbx-muted) !important; }
html body.themeclass29 .duoOffer strong { font-weight: 700; }
html body.themeclass29 .duoOffer .duoSaving { display: block; font-size: 12px !important; color: var(--llbx-muted) !important; margin-top: 4px; }
html body.themeclass29 .duoOffer .purchaseRow { justify-content: center; margin: 16px 0 0 !important; }
html body.themeclass29 .duoOffer .qty button { border-color: var(--llbx-ink) !important; }
/* Delivery info */
html body.themeclass29 .deliverySmall {
  font-size: 13px !important; line-height: 1.8 !important; color: var(--llbx-muted) !important;
  margin: 24px 0 !important; padding: 0 !important; text-align: left;
}
html body.themeclass29 .deliverySmall a { color: var(--llbx-ink) !important; text-decoration: underline; text-underline-offset: 3px; }
/* Product description */
html body.themeclass29 .productDescription {
  margin: 24px 0 !important; padding: 0 !important; font-size: 14px !important; line-height: 1.7 !important;
  color: var(--llbx-ink) !important;
}
html body.themeclass29 .productDescription p { margin: 0 0 16px !important; padding: 0 !important; }
html body.themeclass29 .productDescription strong { font-weight: 700; }
html body.themeclass29 .productDescription em { font-style: italic; }
html body.themeclass29 .productDescription a { color: var(--llbx-ink) !important; text-decoration: underline; text-underline-offset: 3px; }
html body.themeclass29 .productDescription h2,
html body.themeclass29 .productDescription h3 { font-size: 16px !important; font-weight: 700; line-height: 1.3; margin: 20px 0 8px !important; color: var(--llbx-ink) !important; }
html body.themeclass29 .productDescription ul,
html body.themeclass29 .productDescription ol { margin: 12px 0 !important; padding: 0 0 0 20px !important; }
html body.themeclass29 .productDescription li { margin: 6px 0 !important; }
/* Accordions */
html body.themeclass29 .productAccordion { margin: 0 0 12px !important; padding: 0 !important; border: 1px solid var(--llbx-line); background: var(--llbx-paper); }
html body.themeclass29 .productAccordion summary {
  display: flex !important; align-items: center; justify-content: space-between; cursor: pointer;
  padding: 16px var(--llbx-gutter) !important; margin: 0 !important; font-size: 15px !important; font-weight: 700;
  color: var(--llbx-ink) !important; background: var(--llbx-surface-2) !important; list-style: none;
}
html body.themeclass29 .productAccordion summary::-webkit-details-marker { display: none; }
html body.themeclass29 .productAccordion summary::after {
  content: "+"; display: block; font-size: 18px; font-weight: 700; color: var(--llbx-ink); transition: transform 0.2s ease;
}
html body.themeclass29 .productAccordion[open] summary::after { content: "−"; }
html body.themeclass29 .productAccordion .rich {
  padding: 16px var(--llbx-gutter) !important; margin: 0 !important; font-size: 14px !important; line-height: 1.6 !important;
  color: var(--llbx-ink) !important; background: var(--llbx-paper);
}
/* Related products section */
html body.themeclass29 .related { padding: 30px var(--llbx-gutter) !important; margin: 0 !important; background: var(--llbx-paper); border-top: 1px solid var(--llbx-line); }
html body.themeclass29 .related h2 { font-size: 20px !important; line-height: 1.3 !important; color: var(--llbx-ink) !important; margin: 0 0 20px !important; padding: 0 !important; }
html body.themeclass29 .related.collectionRelated .discoveryBanners { gap: 0 !important; padding: 0 !important; margin: 0 !important; }
html body.themeclass29 .related .shopGrid { gap: 27px 14px !important; padding: 0 !important; margin: 0 !important; display: grid !important; grid-template-columns: 1fr 1fr !important; }
/* Natural features strip (llb-nat) */
html body.themeclass29 section.llb-nat { padding: 30px var(--llbx-gutter) !important; margin: 0 !important; background: var(--llbx-paper); border-top: 1px solid var(--llbx-line); }
html body.themeclass29 section.llb-nat .llb-nat__row { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 27px 14px !important; }
/* Sticky purchase bar */
html body.themeclass29 #llbxPurchaseBar {
  position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; z-index: 100;
  width: 100% !important; background: var(--llbx-paper) !important; border-top: 1px solid var(--llbx-line);
  display: flex !important; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px var(--llbx-gutter) !important; min-height: 60px; padding-bottom: max(12px, env(safe-area-inset-bottom));
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
}
html body.themeclass29 #llbxPurchaseBar .llbx-purchase-bar__price {
  display: flex !important; flex-direction: column; gap: 2px; margin: 0 !important;
}
html body.themeclass29 #llbxPurchaseBar .llbx-purchase-bar__price span {
  font-size: 18px !important; font-weight: 700; color: var(--llbx-ink) !important; line-height: 1.2 !important;
  margin: 0 !important; padding: 0 !important; display: block;
}
html body.themeclass29 #llbxPurchaseBar .llbx-purchase-bar__price small {
  font-size: 12px !important; color: var(--llbx-muted) !important; margin: 0 !important; padding: 0 !important; display: block;
}
html body.themeclass29 #llbxPurchaseBar button {
  flex: 1; min-height: 44px; margin: 0 !important; padding: 10px 14px !important;
  font-size: 13px !important; font-weight: 700; letter-spacing: .3px;
}
html body.themeclass29 body.product { padding-bottom: max(88px, calc(88px + env(safe-area-inset-bottom))) !important; }
/* small phones */
@media (max-width: 359px) {
  html body.themeclass29 .productBody { padding: 18px 18px !important; }
  html body.themeclass29 .productBody .productHeading h1 { font-size: 24px !important; }
  html body.themeclass29 .variantChoices { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  html body.themeclass29 .productGallery .galleryDots { bottom: 12px; padding: 6px 10px !important; gap: 6px; }
  html body.themeclass29 .duoOffer { padding: 18px 18px !important; }
}

/* ---------- 7. info pages ------------------------------------------------- */
/* Shared: "find your scent" prompt (values page + incense/ritual-sticks listings) */
html body.themeclass29 .discoveryPrompt {
  padding: 27px var(--llbx-gutter) !important; margin: 12px 0 0 !important; background: var(--llbx-surface-4) !important;
  border-top: 1px solid var(--llbx-line); text-align: left;
}
html body.themeclass29 .discoveryPrompt h2 { font-size: 21px !important; line-height: 1.3 !important; margin: 0 0 8px !important; padding: 0 !important; color: var(--llbx-ink) !important; }
html body.themeclass29 .discoveryPrompt p { font-size: 15px !important; line-height: 1.5 !important; margin: 0 !important; color: var(--llbx-muted) !important; }
html body.themeclass29 .discoveryPrompt.discoveryInvitation { background: var(--llbx-dark) !important; color: var(--llbx-dark-text) !important; }
html body.themeclass29 .discoveryPrompt.discoveryInvitation h2,
html body.themeclass29 .discoveryPrompt.discoveryInvitation p { color: var(--llbx-dark-text) !important; }
html body.themeclass29 .discoveryPrompt > a {
  display: inline-flex !important; align-items: center; min-height: 44px; margin-top: 10px !important; font-size: 14px !important;
  color: inherit !important; text-decoration: underline; text-underline-offset: 3px;
}
/* Generic info-page rich content (refills, archive-detail, and any page with no dedicated classes below) */
html body.themeclass29 .infoPage,
html body.themeclass29 .infoPage.rich { padding: 0 var(--llbx-gutter) 30px !important; margin: 0 !important; font-size: 14px !important; line-height: 1.7 !important; color: var(--llbx-ink) !important; }
html body.themeclass29 .infoPage img { width: 100% !important; height: auto !important; max-height: 530px; object-fit: cover; margin: 20px 0 !important; display: block; }
html body.themeclass29 .infoPage article { padding: 18px 0 !important; margin: 0 !important; border-bottom: 1px solid var(--llbx-line); }
html body.themeclass29 .infoPage .hero-image img { aspect-ratio: 3 / 4; }
/* About / Story (about-us.blade.php) */
html body.themeclass29 .au-section-title {
  font-size: 28px !important; line-height: 1.2 !important; letter-spacing: -.6px !important; color: var(--llbx-ink) !important;
  padding: 24px var(--llbx-gutter) 12px !important; margin: 0 !important; text-align: left !important; text-transform: none !important;
}
html body.themeclass29 .au-story-row { padding: 20px var(--llbx-gutter) !important; margin: 0 !important; border-bottom: 1px solid var(--llbx-line); }
html body.themeclass29 .au-story-row h3 { font-size: 20px !important; line-height: 1.3 !important; margin: 0 0 10px !important; padding: 0 !important; color: var(--llbx-ink) !important; }
html body.themeclass29 .au-story-row p { font-size: 14px !important; line-height: 1.7 !important; color: var(--llbx-muted) !important; margin: 0 !important; }
html body.themeclass29 .au-postimg { margin: 0 0 0 !important; padding: 0 !important; }
html body.themeclass29 .au-postimg img { width: 100% !important; height: auto !important; display: block; }
html body.themeclass29 .au-story-closing,
html body.themeclass29 .storyClosing {
  background: #253134 !important; color: #fff !important; text-align: center; padding: 38px var(--llbx-gutter) !important; margin: 32px 0 0 !important;
}
html body.themeclass29 .au-story-closing h2,
html body.themeclass29 .storyClosing h2 { color: #fff !important; font-size: 23px !important; line-height: 1.4 !important; margin: 0 0 23px !important; padding: 0 !important; }
html body.themeclass29 .au-story-closing p,
html body.themeclass29 .storyClosing p { color: #fff !important; line-height: 1.8 !important; margin: 0 !important; font-size: 14px !important; }
html body.themeclass29 .au-story-closing hr,
html body.themeclass29 .storyClosing hr { border: 0; border-top: 1px solid #777b74; margin: 28px 0 !important; }
/* What we stand for / values (what-we-stand.blade.php) */
html body.themeclass29 section.intro-wrap { padding: 24px var(--llbx-gutter) !important; margin: 0 !important; }
html body.themeclass29 section.intro-wrap h1 { font-size: 28px !important; line-height: 1.2 !important; letter-spacing: -.6px !important; margin: 0 0 12px !important; padding: 0 !important; color: var(--llbx-ink) !important; }
html body.themeclass29 section.intro-wrap p { font-size: 16px !important; line-height: 1.65 !important; color: var(--llbx-muted) !important; margin: 0 !important; }
/* Corporate gifting (corporate-gifting.blade.php) */
html body.themeclass29 .cg-form-heading { display: none !important; }
html body.themeclass29 .cg-cards { display: block !important; padding: 0 var(--llbx-gutter) !important; margin: 0 !important; }
html body.themeclass29 .cg-card { border-top: 1px solid var(--llbx-line); padding: 18px 0 !important; margin: 0 !important; }
html body.themeclass29 .cg-card h3 { font-size: 18px !important; line-height: 1.3 !important; margin: 0 0 8px !important; padding: 0 !important; color: var(--llbx-ink) !important; }
html body.themeclass29 .cg-card p { font-size: 14px !important; line-height: 1.6 !important; color: var(--llbx-muted) !important; margin: 0 !important; }
/* Contact (contactus.blade.php) */
html body.themeclass29 .cu-card { padding: 0 var(--llbx-gutter) 24px !important; margin: 0 !important; }
html body.themeclass29 .cu-copy h1 { font-size: 28px !important; line-height: 1.2 !important; letter-spacing: -.6px !important; margin: 0 0 12px !important; padding: 0 !important; color: var(--llbx-ink) !important; }
html body.themeclass29 .cu-copy p { font-size: 15px !important; line-height: 1.6 !important; color: var(--llbx-muted) !important; margin: 0 0 16px !important; }
html body.themeclass29 .cu-row { display: block !important; margin: 0 0 14px !important; }
html body.themeclass29 .cu-row input,
html body.themeclass29 .cu-row select,
html body.themeclass29 .cu-row textarea {
  width: 100% !important; min-height: 44px; padding: 10px 12px !important; font-size: 15px !important; border: 1px solid var(--llbx-line) !important;
  border-radius: 0 !important; background: var(--llbx-paper) !important; color: var(--llbx-ink) !important; display: block !important;
}
/* Store locator (store-locator.blade.php) */
html body.themeclass29 .sl-title { font-size: 28px !important; line-height: 1.2 !important; letter-spacing: -.6px !important; padding: 24px var(--llbx-gutter) 12px !important; margin: 0 !important; color: var(--llbx-ink) !important; }
html body.themeclass29 .sl-card { padding: 18px var(--llbx-gutter) !important; margin: 0 !important; border-bottom: 1px solid var(--llbx-line); }
html body.themeclass29 .sl-card h3 { font-size: 17px !important; line-height: 1.3 !important; margin: 0 0 6px !important; padding: 0 !important; color: var(--llbx-ink) !important; }
html body.themeclass29 .sl-card p { font-size: 14px !important; line-height: 1.6 !important; color: var(--llbx-muted) !important; margin: 0 !important; }
/* FAQ index (faq.blade.php) */
html body.themeclass29 .faqg-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important; padding: 0 var(--llbx-gutter) 24px !important; margin: 0 !important; }
html body.themeclass29 .faqg-tile {
  border: 1px solid var(--llbx-line) !important; padding: 14px !important; text-decoration: none; font-size: 14px !important; line-height: 1.5 !important;
  color: var(--llbx-ink) !important; display: block !important; background: var(--llbx-paper);
}
/* FAQ category (faq-category.blade.php) */
html body.themeclass29 .faqc-eyebrow { font-size: 12px !important; letter-spacing: 1.7px !important; text-transform: uppercase; color: var(--llbx-muted) !important; padding: 24px var(--llbx-gutter) 0 !important; margin: 0 !important; }
html body.themeclass29 .faqc-title { font-size: 26px !important; line-height: 1.25 !important; letter-spacing: -.5px !important; padding: 6px var(--llbx-gutter) 18px !important; margin: 0 !important; color: var(--llbx-ink) !important; }
html body.themeclass29 .faqc-list { padding: 0 var(--llbx-gutter) 18px !important; margin: 0 !important; display: flex; flex-wrap: wrap; gap: 8px; }
html body.themeclass29 .faqc-list a { font-size: 13px !important; padding: 8px 12px !important; border: 1px solid var(--llbx-line); text-decoration: none; color: var(--llbx-ink) !important; }
html body.themeclass29 .faqc-panel {
  padding: 0 var(--llbx-gutter) !important; margin: 0 !important; border: 0 !important; border-bottom: 1px solid var(--llbx-line);
}
html body.themeclass29 .faqc-panel summary {
  font-size: 16px !important; line-height: 1.45 !important; font-weight: 700; padding: 16px 0 !important; margin: 0 !important; cursor: pointer;
  color: var(--llbx-ink) !important; display: flex !important; align-items: center; justify-content: space-between; list-style: none;
}
html body.themeclass29 .faqc-panel summary::-webkit-details-marker { display: none; }
html body.themeclass29 .faqc-panel summary::after { content: "+"; font-size: 18px; font-weight: 700; color: var(--llbx-ink); }
html body.themeclass29 .faqc-panel[open] summary::after { content: "\2212"; }
html body.themeclass29 .faqc-panel p { padding: 0 0 16px !important; margin: 0 !important; font-size: 16px !important; line-height: 1.6 !important; color: var(--llbx-muted) !important; }
/* Scent archive (olfa-scent-archive.blade.php) */
html body.themeclass29 .osa-hero { padding: 24px var(--llbx-gutter) 6px !important; margin: 0 !important; }
html body.themeclass29 .osa-hero h1 { font-size: 28px !important; line-height: 1.2 !important; letter-spacing: -.6px !important; margin: 0 0 10px !important; padding: 0 !important; color: var(--llbx-ink) !important; }
html body.themeclass29 .osa-hero p { font-size: 15px !important; line-height: 1.6 !important; color: var(--llbx-muted) !important; margin: 0 !important; }
html body.themeclass29 .osa-toolbar { padding: 12px var(--llbx-gutter) 18px !important; margin: 0 !important; }
html body.themeclass29 .osa-toolbar input[type="search"],
html body.themeclass29 .osa-toolbar input[type="text"] {
  width: 100% !important; min-height: 44px; padding: 10px 12px !important; font-size: 15px !important; border: 1px solid var(--llbx-line) !important;
  border-radius: 0 !important; background: var(--llbx-paper) !important;
}
html body.themeclass29 .osa-card {
  display: block !important; text-decoration: none; padding: 24px var(--llbx-gutter) !important; margin: 0 !important; border-bottom: 1px solid var(--llbx-line);
}
html body.themeclass29 .osa-card .eyebrow,
html body.themeclass29 .osa-card [class*="category"] { font-size: 12px !important; letter-spacing: 1.7px !important; text-transform: uppercase; color: var(--llbx-muted) !important; margin: 0 0 8px !important; }
html body.themeclass29 .osa-card h2,
html body.themeclass29 .osa-card h3 { font-size: 21px !important; line-height: 1.3 !important; color: var(--llbx-ink) !important; margin: 0 0 8px !important; padding: 0 !important; }
html body.themeclass29 .osa-card p { font-size: 15px !important; line-height: 1.6 !important; color: var(--llbx-muted) !important; margin: 0 !important; }
/* Privacy / Terms (online_packages/privacy_policy.blade.php) */
html body.themeclass29 .privacy-policy-wrap { padding: 0 var(--llbx-gutter) 30px !important; margin: 0 !important; }
html body.themeclass29 .privacy-policy-header {
  font-size: 28px !important; line-height: 1.2 !important; letter-spacing: -.6px !important; padding: 24px 0 12px !important; margin: 0 !important; color: var(--llbx-ink) !important;
}
html body.themeclass29 .privacy-policy-content {
  font-size: 14px !important; line-height: 1.7 !important; color: var(--llbx-ink) !important; padding: 0 !important; margin: 0 !important;
}
html body.themeclass29 .privacy-policy-content p { margin: 0 0 16px !important; }
html body.themeclass29 .privacy-policy-content strong { font-size: 14px !important; font-weight: 700; }
html body.themeclass29 .privacy-policy-content ul,
html body.themeclass29 .privacy-policy-content ol { padding: 0 0 0 20px !important; margin: 12px 0 !important; }
/* small phones */
@media (max-width: 359px) {
  html body.themeclass29 .au-section-title,
  html body.themeclass29 section.intro-wrap h1,
  html body.themeclass29 .cu-copy h1,
  html body.themeclass29 .sl-title,
  html body.themeclass29 .osa-hero h1,
  html body.themeclass29 .privacy-policy-header { font-size: 25px !important; }
  html body.themeclass29 .faqg-grid { grid-template-columns: 1fr !important; }
}

/* ---------- 8. cart drawer + search overlay ---------------------------------- */
/* Cart drawer: full-height sheet (mirrors mockup #bag dialog + bagRow pattern). Beats
   the html body .llb-cart li.wishBtni a.llb-cartlist, a.llb-checkout !important rules
   flagged in Phase 0 §5 (L3797/L3809) — every selector below carries !important. */
html body.themeclass29 .llb-cart {
  width: 100% !important; max-width: 100% !important; height: 100dvh !important; max-height: 100dvh !important;
  padding: 22px var(--llbx-gutter) !important; margin: 0 !important; overflow-y: auto; background: var(--llbx-paper) !important;
  border: 0 !important; box-shadow: none !important;
}
html body.themeclass29 .llb-cart .dropdown-title,
html body.themeclass29 .llb-cart > h2,
html body.themeclass29 .llb-cart > h3 {
  font-size: 23px !important; line-height: 1.3 !important; letter-spacing: 0 !important; margin: 0 0 20px !important; padding: 0 !important; color: var(--llbx-ink) !important;
}
html body.themeclass29 .llb-cart .llb-cart-close,
html body.themeclass29 .llb-cart .close-cart {
  width: 44px !important; height: 44px !important; display: flex !important; align-items: center; justify-content: center;
  font-size: 21px !important; background: none !important; border: 0 !important; padding: 0 !important; color: var(--llbx-ink) !important;
}
/* line items: 60px thumb / name+meta / trailing price, matches mockup .bagRow */
html body.themeclass29 .llb-cart li.wishBtni {
  display: grid !important; grid-template-columns: 60px 1fr auto !important; gap: 12px !important; align-items: start !important;
  padding: 20px 0 !important; margin: 0 !important; border: 0 !important; border-bottom: 1px solid var(--llbx-line) !important; list-style: none !important;
  width: auto !important; height: auto !important; min-height: 0 !important; background: none !important;
}
html body.themeclass29 .llb-cart li.wishBtni img {
  width: 60px !important; height: auto !important; aspect-ratio: 3 / 4 !important; object-fit: contain !important; background: var(--llbx-img-bg) !important;
  margin: 0 !important; padding: 0 !important; grid-row: 1 / span 2;
}
html body.themeclass29 .llb-cart a.llb-cartlist {
  font-size: 14px !important; font-weight: 700 !important; line-height: 1.4 !important; color: var(--llbx-ink) !important;
  text-decoration: none !important; display: block !important; padding: 0 !important; margin: 0 !important;
}
html body.themeclass29 .llb-cart li.wishBtni .variant,
html body.themeclass29 .llb-cart li.wishBtni p {
  font-size: 13px !important; line-height: 1.4 !important; color: var(--llbx-muted) !important; margin: 4px 0 0 !important; padding: 0 !important;
}
html body.themeclass29 .llb-cart li.wishBtni .qty,
html body.themeclass29 .llb-cart li.wishBtni .bagQty {
  display: flex !important; align-items: center; gap: 15px !important; margin: 10px 0 0 !important; padding: 0 !important;
}
html body.themeclass29 .llb-cart li.wishBtni .qty button,
html body.themeclass29 .llb-cart li.wishBtni .bagQty button {
  min-width: 28px !important; min-height: 28px !important; text-align: center; font-size: 18px !important;
  background: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important; color: var(--llbx-ink) !important;
}
html body.themeclass29 .llb-cart li.wishBtni .row-price {
  font-size: 14px !important; font-weight: 700 !important; color: var(--llbx-ink) !important; white-space: nowrap; text-align: right;
}
/* subtotal / total row */
html body.themeclass29 .llb-cart .cart-total,
html body.themeclass29 .llb-cart .total {
  display: flex !important; justify-content: space-between !important; align-items: baseline; font-weight: 700 !important;
  padding: 20px 0 !important; margin: 0 !important; font-size: 16px !important; color: var(--llbx-ink) !important; border-top: 1px solid var(--llbx-line) !important;
}
/* checkout link — primary button styling, beats L3809 */
html body.themeclass29 a.llb-checkout {
  display: flex !important; align-items: center !important; justify-content: center !important; min-height: 50px !important;
  width: 100% !important; margin: 12px 0 0 !important; padding: 13px 17px !important; font-size: 14px !important; font-weight: 700 !important;
  letter-spacing: .3px !important; background: var(--llbx-ink) !important; color: #fff !important; text-decoration: none !important;
  border: 1px solid var(--llbx-ink) !important; border-radius: 0 !important;
}
/* empty state */
html body.themeclass29 .llb-cart .cart-empty,
html body.themeclass29 .llb-cart .empty {
  padding: 20px 0 30px !important; text-align: center !important; font-size: 15px !important; color: var(--llbx-muted) !important;
}
html body.themeclass29 .llb-cart .cart-empty a.primary,
html body.themeclass29 .llb-cart .empty > a {
  display: inline-flex !important; align-items: center; justify-content: center; min-height: 50px; width: 100%;
  margin-top: 14px !important; padding: 13px 17px !important; font-size: 14px !important; font-weight: 700 !important;
  background: var(--llbx-ink) !important; color: #fff !important; text-decoration: none;
}

/* Search overlay: full-height sheet (mirrors mockup #search dialog). #llbSearchBar
   itself stays hidden at all mobile widths (rule already in section 1); the header
   search icon (Phase 1, .llbx-search-btn) opens this overlay via window.eosOpenSearch(). */
html body.themeclass29 #eosSearchOverlay {
  position: fixed !important; inset: 0 !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  width: 100% !important; max-width: 100% !important; height: 100dvh !important; max-height: 100dvh !important;
  padding: 22px var(--llbx-gutter) !important; margin: 0 !important; background: var(--llbx-paper) !important;
  overflow-y: auto; z-index: 300 !important; border: 0 !important; box-shadow: none !important;
}
html body.themeclass29 #eosSearchOverlay .search-head,
html body.themeclass29 #eosSearchOverlay .dialogHead {
  display: flex !important; align-items: center; justify-content: space-between; gap: 15px !important; margin: 0 0 20px !important; padding: 0 !important;
}
html body.themeclass29 #eosSearchOverlay .search-head h2,
html body.themeclass29 #eosSearchOverlay .dialogHead h2 { font-size: 23px !important; margin: 0 !important; padding: 0 !important; color: var(--llbx-ink) !important; }
html body.themeclass29 #eosSearchOverlay label {
  display: block !important; font-size: 14px !important; margin: 0 0 8px !important; padding: 0 !important; color: var(--llbx-muted) !important;
}
html body.themeclass29 #eosSearchInput {
  width: 100% !important; min-height: 50px !important; padding: 14px !important; border: 1px solid var(--llbx-line) !important;
  border-radius: 0 !important; font-size: 16px !important; background: var(--llbx-paper) !important; color: var(--llbx-ink) !important; margin: 0 !important;
}
html body.themeclass29 #eosSearchOverlay .search-close,
html body.themeclass29 #eosSearchOverlay [data-llbx-search-close] {
  width: 44px !important; height: 44px !important; display: flex !important; align-items: center; justify-content: center;
  font-size: 21px !important; background: none !important; border: 0 !important; padding: 0 !important; color: var(--llbx-ink) !important;
}
html body.themeclass29 #eosSearchOverlay .search-results,
html body.themeclass29 #eosSearchOverlay #results {
  padding: 20px 0 0 !important; margin: 0 !important;
}
html body.themeclass29 #eosSearchOverlay .search-results a,
html body.themeclass29 #eosSearchOverlay #results a {
  display: flex !important; justify-content: space-between; align-items: center; gap: 15px !important; font-size: 14px !important;
  padding: 14px 0 !important; margin: 0 !important; min-height: 44px; border-bottom: 1px solid var(--llbx-line) !important;
  text-decoration: none !important; color: var(--llbx-ink) !important;
}

/* OLFA-SEARCH-1 (PUSHPENDRA-198): the overlay carries NO input of its own - the one
   search field is #eosSearchInput inside #llbSearchBar - so with the bar hidden a
   phone could open the panel but never type a search. While the panel is open
   (body.llb-search-open, set/cleared by eosOpenSearch/eosCloseSearch in
   top_menu.blade.php) the bar is pinned above the sheet; Enter or its search
   button submits the same GET /view-collections?keywordsearch= form as desktop. */
html body.themeclass29.llb-search-open .llb-row1 #llbSearchBar.llb-searchbar {
  display: block !important; opacity: 1 !important; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 301 !important; padding: 16px var(--llbx-gutter) !important; margin: 0 !important; background: var(--llbx-paper) !important;
  border-bottom: 1px solid var(--llbx-line) !important;
}
html body.themeclass29.llb-search-open .llb-row1 #llbSearchBar .llb-searchbarMid { width: 100% !important; }
html body.themeclass29.llb-search-open #eosSearchOverlay { padding-top: 96px !important; }

/* ---------- 9. utilities ---------------------------------------------------- */
html body.themeclass29 #buttoning { bottom: 96px !important; }  /* scroll-to-top clears the purchase bar */

} /* end @media (max-width: 767px) */

/* -----------------------------------------------------------------------------
   OLFA-only exception, outside the file's single 767px wrapper on purpose:
   removes the a#nav-screen-overlay backdrop entirely, in every state (drawer
   open or closed), at the SAME breakpoint header.css itself switches the
   drawer to its narrow/tablet behaviour (L2945 @media max-width:1080px,
   L3031 a#nav-screen-overlay{display:block!important}). Requested and
   confirmed 2026-09-23: no dimming behind the drawer at all for OLFA at
   ≤1080px; closing is via the drawer's own ✕ button (Phase 2 head row),
   not backdrop-tap. Does not touch header.css or its z-index/pointer-events/
   display rules for any other theme.
   ----------------------------------------------------------------------------- */
@media only screen and (max-width: 1080px) {
  html body.themeclass29 a#nav-screen-overlay { display: none !important; }
}

/* ==========================================================================
   OLFA-PDP-MOBILE-1 (2026-10-06) — category-page product cards on mobile
   (.pdp-variants .pdp-card, e.g. /lelabo/product-category/terra-notes).
   Restores the desktop card on <=767px, one card per row: image filling the
   frame, green bar + round olfa logo, bold uppercase name, one-line
   description with ellipsis, pack size, "Add to Cart" left / orange price
   right, thin card border + row dividers. Scoped to .pdp-variants so the
   product-page recommendations (.vp-recs) keep their mobile style.
   Desktop (>=768px) is untouched: everything sits inside this media query.
   ========================================================================== */
@media only screen and (max-width: 767px) {
  /* PDP-2COL (2026-10-12): 2 products per row (was 1fr), card scaled for the narrower column. */
  html body.themeclass29 .pdp-variants {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px 12px !important;
    padding: 18px 12px 30px !important;
  }
  html body.themeclass29 .pdp-variants article.pdp-variant.pdp-card {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    border: 1px solid #cfc6b3 !important;
    background: #fff !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: Avenir, "Avenir Next", "Helvetica Neue", Arial, sans-serif;
    letter-spacing: .28px;
  }

  /* 1. image fills the frame (desktop proportions 355.5 x 450) */
  html body.themeclass29 .pdp-variants article.pdp-variant.pdp-card .pdp-variant-art {
    order: 0 !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 355.5 / 450 !important;
    background: #e8e8e4 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
  html body.themeclass29 .pdp-variants article.pdp-variant.pdp-card .pdp-variant-art img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* 2. green bar with the round logo at the bottom-right of the image */
  html body.themeclass29 .pdp-variants article.pdp-variant.pdp-card .pdp-card-greenbar {
    order: 1 !important;
    display: block !important;
    position: relative !important;
    height: 26px !important;
    margin: 0 0 16px !important;
    background: var(--bar-color, #488556) !important;
  }
  html body.themeclass29 .pdp-variants article.pdp-variant.pdp-card .pdp-card-greenbar__logo {
    position: absolute !important;
    top: 50% !important; /* centred on the bar, half above / half below */
    bottom: auto !important;
    right: -2px !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: var(--bar-color, #488556) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: translateY(-50%) !important;
  }
  html body.themeclass29 .pdp-variants article.pdp-variant.pdp-card .pdp-card-greenbar__logo img {
    width: 32px !important;
    height: 32px !important;
    object-fit: contain !important;
  }

  /* shared row reset — rows 4-6 get the thin divider */
  html body.themeclass29 .pdp-variants article.pdp-variant.pdp-card .pdp-card-row {
    position: static !important;
    width: auto !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border: 0 !important;
    border-top: 1px solid #e2ddd0 !important;
    font-size: 12px !important;
    line-height: 1.55 !important;
    text-align: left !important;
    background: none !important;
  }

  /* 3. name: bold, uppercase */
  html body.themeclass29 .pdp-variants article.pdp-variant.pdp-card .pdp-card-name {
    order: 2 !important;
    display: block !important;
    border-top: 0 !important;
    padding: 0 12px 10px !important; /* the 48px badge ends 5px above the name, no extra right padding needed */
    margin: 0 !important;
    min-height: 44px !important; /* 1-2 line names keep the cards in a row aligned (!important: the shared .pdp-card-row reset forces min-height:0 !important) */
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-transform: uppercase !important;
    color: #2a2a24 !important;
    text-decoration: none !important;
  }

  /* 4. description: one line with ellipsis */
  html body.themeclass29 .pdp-variants article.pdp-variant.pdp-card .pdp-card-desc {
    order: 3 !important;
    display: block !important;
    font-size: 12px !important;
    -webkit-line-clamp: unset !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: #8a8479 !important;
  }

  /* 5. pack size */
  html body.themeclass29 .pdp-variants article.pdp-variant.pdp-card .pdp-card-pack {
    order: 4 !important;
    display: flex !important;
    color: #2a2a24 !important;
  }
  html body.themeclass29 .pdp-variants article.pdp-variant.pdp-card .pdp-card-pack > * {
    font-size: 12px !important;
  }

  /* 6. Add to Cart left, price right, same row */
  html body.themeclass29 .pdp-variants article.pdp-variant.pdp-card .pdp-card-cart {
    order: 5 !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    margin-top: auto !important;
    font-weight: 600 !important;
  }
  html body.themeclass29 .pdp-variants article.pdp-variant.pdp-card .pdp-card-cart__link {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    color: #2a2a24 !important;
    background: transparent !important;
    border: 0 !important;
  }
  html body.themeclass29 .pdp-variants article.pdp-variant.pdp-card .pdp-card-price {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    color: #9c4a2a !important;
  }
  html body.themeclass29 .pdp-variants article.pdp-variant.pdp-card .pdp-card-cart__status {
    order: 6 !important;
    padding: 0 12px 10px !important;
  }
}

/* ==========================================================================
   NR-2CARD (2026-10-09) - "New From OLFA" on mobile: two cards stacked in one
   column, full width, both 1:1, image filling the frame (cover, centred).
   NOTE: the whole section is still hidden on mobile by the
   "hidden on mobile per request 2026-09-23" rule above; these rules apply
   as soon as that line is removed.
   ========================================================================== */
@media only screen and (max-width: 767px) {
  html body.themeclass29 .new-releases .new-releases__secondary { grid-template-columns: 1fr !important; }
  html body.themeclass29 .new-releases .new-release-card__image,
  html body.themeclass29 .new-releases .new-releases__secondary .new-release-card__image {
    position: relative !important;
    inset: auto !important;
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    height: auto !important;
    background-size: cover !important;
    background-position: center !important;
  }
}



.llb-pdp .vp-ben-text { 
    font-size: 13.5px !important; 
}