/* ============================================================
   VELLINORE — Improvements layer (quiet luxury upgrades)
   material prestige · exclusivity · shoppable editorial · concierge
   motion restraint · type discipline · calmer hero · Auswahl · QV
   Gated on body[data-*] from the Tweaks panel where relevant.
   ============================================================ */

/* ============================================================
   MATERIAL PRESTIGE STRIP (PDP)
   ============================================================ */
body[data-material="off"] .pdp-material{ display:none; }
.pdp-material{ margin:24px 0 4px; padding:22px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.pdp-material .pm-fabric{ margin:0 0 18px; }
.pdp-material .pm-text{ font-family:var(--serif); font-style:italic; font-weight:500; font-size:clamp(18px,1.5vw,22px); line-height:1.4; color:var(--ink); }
.pdp-material .pm-specs{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.pdp-material .pm-cell{ display:flex; flex-direction:column; gap:4px; }
.pdp-material .pm-cell .k{ font-family:var(--sans); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); }
.pdp-material .pm-cell .v{ font-family:var(--sans); font-size:13.5px; color:var(--ink); }
@media (max-width:540px){ .pdp-material .pm-specs{ grid-template-columns:1fr; gap:12px; } }

/* ============================================================
   EXCLUSIVITY MARKER (PDP + cards)
   ============================================================ */
body[data-exclusive="off"] .pdp-exclusive,
body[data-exclusive="off"] .pcard .ex-badge{ display:none !important; }
.pdp-exclusive{ display:inline-flex; align-items:center; gap:9px; margin:16px 0 2px; padding:7px 14px;
  border:1px solid var(--gold); background:rgba(194,160,100,.07);
  font-family:var(--sans); font-size:11.5px; letter-spacing:.06em; color:var(--gold-deep); }
.pdp-exclusive .ex-dot{ width:6px; height:6px; border-radius:50%; background:var(--gold-deep); position:relative; }
.pdp-exclusive .ex-dot::after{ content:''; position:absolute; inset:-4px; border-radius:50%; border:1px solid var(--gold); opacity:.5; }
.pdp-exclusive[data-kind="members"]{ border-color:var(--ink); background:rgba(42,37,28,.04); color:var(--ink); }
.pdp-exclusive[data-kind="members"] .ex-dot{ background:var(--ink); }
.pdp-exclusive b{ font-weight:600; }
/* small marker on product cards — top-RIGHT so it never overlaps the NEU/Sale badge */
.pcard .ex-badge{ position:absolute; top:14px; right:14px; left:auto; z-index:2; font-family:var(--sans);
  font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep);
  background:rgba(250,246,238,.92); padding:5px 9px; border:.5px solid var(--gold); }
.pcard .ex-badge.members{ color:var(--ink); border-color:var(--ink); }

/* ============================================================
   SHOPPABLE EDITORIAL LOOK (homepage)
   ============================================================ */
body[data-shoppable="off"] .shoplook{ display:none; }
.shoplook{ position:relative; }
.shoplook .sl-stage{ position:relative; overflow:hidden; background:var(--cream-3); }
.shoplook .sl-stage img.sl-bg{ width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:16/9; }
.shoplook .sl-cap{ position:absolute; left:clamp(24px,4vw,56px); bottom:clamp(24px,4vw,48px); z-index:2; color:#F6EFE0; max-width:30ch; }
.shoplook .sl-cap .e{ font-family:var(--sans); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--champagne); }
.shoplook .sl-cap h2{ font-family:var(--serif); font-weight:500; font-size:clamp(28px,3.4vw,48px); line-height:1.02; margin-top:8px; }
.shoplook .sl-stage::after{ content:''; position:absolute; inset:0; background:linear-gradient(110deg,rgba(34,28,18,.36),rgba(34,28,18,0) 55%); z-index:1; }
/* hotspots */
.sl-hotspot{ position:absolute; z-index:3; width:30px; height:30px; transform:translate(-50%,-50%); cursor:pointer;
  border:0; background:none; }
.sl-hotspot .dot{ position:absolute; inset:0; margin:auto; width:14px; height:14px; border-radius:50%;
  background:rgba(250,246,238,.92); box-shadow:0 2px 10px rgba(0,0,0,.35); transition:transform .4s var(--ease); }
.sl-hotspot::before{ content:''; position:absolute; inset:0; margin:auto; width:14px; height:14px; border-radius:50%;
  border:1px solid rgba(250,246,238,.8); animation:slpulse 2.4s var(--ease) infinite; }
@keyframes slpulse{ 0%{ transform:scale(1); opacity:.8; } 70%{ transform:scale(2.3); opacity:0; } 100%{ opacity:0; } }
.sl-hotspot:hover .dot{ transform:scale(1.25); }
@media (prefers-reduced-motion: reduce){ .sl-hotspot::before{ animation:none; } }
.sl-hotspot .sl-tip{ position:absolute; bottom:130%; left:50%; transform:translateX(-50%) translateY(6px);
  background:var(--cream); color:var(--ink); padding:9px 13px; white-space:nowrap; opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease); box-shadow:0 14px 34px -18px rgba(34,28,18,.5); }
.sl-hotspot:hover .sl-tip, .sl-hotspot:focus-visible .sl-tip{ opacity:1; transform:translateX(-50%) translateY(0); }
.sl-tip .nm{ display:block; font-family:var(--serif); font-size:15px; }
.sl-tip .pr{ display:block; font-family:var(--sans); font-size:11.5px; color:var(--ink-soft); margin-top:2px; }

/* ============================================================
   CONCIERGE / SHOWROOM (service over e-commerce)
   ============================================================ */
body[data-concierge="off"] .concierge{ display:none; }
.concierge{ background:var(--cream-2); }
.concierge .wrap{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(36px,5vw,80px); align-items:center; padding:clamp(64px,7vw,108px) 56px; }
.concierge .cc-l .e{ font-family:var(--sans); font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold-deep); }
.concierge .cc-l h2{ font-family:var(--serif); font-weight:500; font-size:clamp(28px,3.2vw,46px); line-height:1.05; margin:16px 0 16px; }
.concierge .cc-l p{ font-family:var(--sans); font-size:16px; line-height:1.7; color:var(--ink-soft); max-width:46ch; }
.concierge .cc-sign{ display:flex; align-items:center; gap:14px; margin-top:26px; }
.concierge .cc-sign .nm{ font-family:var(--serif); font-style:italic; font-size:20px; color:var(--ink); }
.concierge .cc-sign .ro{ font-family:var(--sans); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); }
.concierge .cc-r{ display:flex; flex-direction:column; gap:14px; }
.concierge .cc-card{ display:flex; gap:16px; padding:20px 22px; background:var(--cream); border:1px solid var(--line); align-items:flex-start; }
.concierge .cc-card .ci{ font-family:var(--serif); font-style:italic; font-size:21px; color:var(--gold-deep); line-height:1; flex:none; }
.concierge .cc-card .t{ font-family:var(--sans); font-size:14px; color:var(--ink); margin-bottom:3px; }
.concierge .cc-card .d{ font-family:var(--sans); font-size:12.5px; color:var(--ink-soft); line-height:1.55; }
.concierge .cc-card a.appoint{ display:inline-block; margin-top:8px; font-family:var(--sans); font-size:12px; letter-spacing:.06em; color:var(--gold-deep); border-bottom:1px solid var(--gold); padding-bottom:2px; }
@media (max-width:820px){ .concierge .wrap{ grid-template-columns:1fr; gap:34px; padding:54px 22px; } }

/* ============================================================
   FOOTER SERVICE LINE (logistics, stated plainly)
   ============================================================ */
.footer-service{ border-top:1px solid var(--line); }
.footer-service .wrap{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(26px,5vw,72px); padding:28px 56px; }
.footer-service .fs-item{ display:flex; align-items:center; gap:10px; font-family:var(--sans); font-size:12px; letter-spacing:.04em; color:var(--ink-soft); }
.footer-service .fs-item .fi{ width:5px; height:5px; border-radius:50%; background:var(--gold); }
@media (max-width:680px){ .footer-service .wrap{ gap:14px 26px; padding:22px; } }

/* ============================================================
   MOTION WITH RESTRAINT (Tweak: data-motionfeel)
   ============================================================ */
body[data-motionfeel="restrained"] *{ --ease:cubic-bezier(.2,.6,.2,1); }
body[data-motionfeel="restrained"] .pcard .frame img{ transition:transform 1.1s cubic-bezier(.2,.6,.2,1), opacity .6s ease; }
body[data-motionfeel="restrained"] .pcard:hover .frame img{ transform:scale(1.04); }
body[data-motionfeel="restrained"] .reveal{ transition:opacity 1.1s cubic-bezier(.2,.6,.2,1), transform 1.1s cubic-bezier(.2,.6,.2,1); }
body[data-motionfeel="restrained"] .btn,
body[data-motionfeel="restrained"] .nav-link{ transition:color .5s ease, background-color .5s ease, border-color .5s ease, opacity .5s ease; }
body[data-motionfeel="restrained"] .mag .tile img,
body[data-motionfeel="restrained"] .collrow .ctile img{ transition:transform 1.3s cubic-bezier(.2,.6,.2,1); }

/* ============================================================
   TYPOGRAPHIC DISCIPLINE (Tweak: data-typescale=editorial)
   ============================================================ */
body[data-typescale="editorial"]{ --tracking-label:.22em; }
body[data-typescale="editorial"] .label,
body[data-typescale="editorial"] .pdp-eyebrow,
body[data-typescale="editorial"] .cat,
body[data-typescale="editorial"] .nav-link{ letter-spacing:.2em; }
body[data-typescale="editorial"] h1,
body[data-typescale="editorial"] h2{ letter-spacing:-.01em; line-height:1.02; }
body[data-typescale="editorial"] .pcard .nm{ font-size:16px; letter-spacing:.01em; }
body[data-typescale="editorial"] p{ line-height:1.72; }

/* ============================================================
   CALMER HERO (Tweak: data-herocalm=on) — first 3 seconds
   ============================================================ */
body[data-herocalm="on"] .hero[data-overlay]::after{ background:linear-gradient(180deg,rgba(34,28,18,.28),rgba(34,28,18,.5)) !important; }
body[data-herocalm="on"] .hero .hero-sub,
body[data-herocalm="on"] .hero .hero-cta{ opacity:0; animation:heroCalmIn 1.4s cubic-bezier(.2,.6,.2,1) forwards; }
body[data-herocalm="on"] .hero .hero-sub{ animation-delay:.7s; }
body[data-herocalm="on"] .hero .hero-cta{ animation-delay:1.05s; }
body[data-herocalm="on"] .hero h1{ opacity:0; animation:heroCalmIn 1.6s cubic-bezier(.2,.6,.2,1) .2s forwards; }
@keyframes heroCalmIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  body[data-herocalm="on"] .hero h1,
  body[data-herocalm="on"] .hero .hero-sub,
  body[data-herocalm="on"] .hero .hero-cta{ opacity:1; animation:none; }
}

/* ============================================================
   DIE AUSWAHL (wishlist) — header indicator + page
   ============================================================ */
.pdp-actions .wishlist{ transition:color .4s ease, border-color .4s ease; }
.pdp-actions .wishlist.saved{ color:var(--gold-deep); border-color:var(--gold); }
[data-auswahl-count]{ display:none; min-width:16px; height:16px; padding:0 4px; border-radius:9px; background:var(--gold-deep);
  color:var(--cream); font-family:var(--sans); font-size:10px; line-height:16px; text-align:center; margin-left:5px; vertical-align:top; }

.auswahl-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,30px); }
.auswahl-empty{ text-align:center; padding:60px 0; }
.auswahl-empty p{ font-family:var(--sans); font-size:15px; color:var(--ink-faint); margin-bottom:20px; }
@media (max-width:860px){ .auswahl-grid{ grid-template-columns:repeat(2,1fr); } }

/* ============================================================
   QUICK VIEW — refined cinematic restyle
   ============================================================ */
.qv-overlay{ background:rgba(34,28,18,.62); backdrop-filter:saturate(120%) blur(2px); }
.qv-overlay.open{ transition:opacity .45s cubic-bezier(.2,.6,.2,1); }
.qv-modal{ width:min(920px,100%); grid-template-columns:1.08fr .92fr; transition:transform .55s cubic-bezier(.2,.6,.2,1), opacity .45s ease; }
.qv-figure{ position:relative; }
.qv-figure .qv-fab{ position:absolute; top:14px; left:14px; z-index:2; background:rgba(250,246,238,.9); border:0;
  width:34px; height:34px; border-radius:50%; font-size:15px; color:var(--ink); cursor:pointer; line-height:1; transition:.25s; }
.qv-figure .qv-fab.saved{ color:var(--gold-deep); }
.qv-figure .qv-fab:hover{ background:var(--cream); }
.qv-thumbs{ display:flex; gap:8px; margin-top:14px; }
.qv-thumbs button{ width:48px; height:60px; padding:0; border:1px solid var(--line); background:var(--cream-3); cursor:pointer; overflow:hidden; opacity:.6; transition:opacity .3s ease, border-color .3s ease; }
.qv-thumbs button img{ width:100%; height:100%; object-fit:cover; }
.qv-thumbs button.active{ opacity:1; border-color:var(--ink); }
.qv-panel{ padding:46px 44px; }
.qv-panel .qv-fabric{ font-family:var(--serif); font-style:italic; font-size:15px; color:var(--ink-soft); line-height:1.5; margin:14px 0 4px; }
.qv-panel .qv-exclusive{ display:inline-flex; align-items:center; gap:8px; margin-top:10px; padding:6px 12px; border:1px solid var(--gold);
  font-family:var(--sans); font-size:10.5px; letter-spacing:.08em; color:var(--gold-deep); }
.qv-panel .qv-exclusive[hidden]{ display:none; }
@media (max-width:720px){
  .qv-modal{ grid-template-columns:1fr; }
  .qv-thumbs{ justify-content:center; }
}

/* ============================================================
   PDP GALLERY — single-image fallback
   When a product has only one image, .no-thumbs collapses
   the thumbnail column so the main stage fills the width.
   ============================================================ */
.pdp-gallery.no-thumbs{
  grid-template-columns:1fr !important;
}
.pdp-gallery.no-thumbs .pdp-thumbs{
  display:none !important;
}

/* ============================================================
   HEADER UTIL — wishlist link icon treatment
   The <a> wishlist element needs the same icon pseudo-element
   behaviour as the button-based Konto and Cart utils.
   ============================================================ */
.util[href*="wishlist"]{ cursor:pointer; }

/* ============================================================
   PURE WHITE LIGHTBOX OVERLAY
   Forced white background and dark typography/controls for accessibility.
   ============================================================ */
.lightbox {
  background: #FFFFFF !important;
}
.lightbox .lb-close {
  color: var(--ink, #2A251C) !important;
}
.lightbox .lb-nav {
  background: rgba(34, 28, 18, 0.06) !important;
  border: 1px solid rgba(34, 28, 18, 0.2) !important;
  color: var(--ink, #2A251C) !important;
}
.lightbox .lb-nav:hover {
  background: rgba(34, 28, 18, 0.14) !important;
}
.lightbox .lb-zoom {
  background: rgba(34, 28, 18, 0.05) !important;
  border: 1px solid rgba(34, 28, 18, 0.18) !important;
}
.lightbox .lb-zbtn {
  color: var(--ink, #2A251C) !important;
}
.lightbox .lb-zbtn:hover:not(:disabled) {
  background: rgba(34, 28, 18, 0.08) !important;
}
.lightbox .lb-zval {
  color: var(--ink-soft, #6B6253) !important;
}
.lightbox .lb-thumb {
  background: var(--cream-2, #FAF6EE) !important;
}
.lightbox .lb-thumb.active {
  outline-color: var(--gold-deep, #8C6E3A) !important;
}

/* ============================================================
   ZULETZT ANGESEHEN — Carousel Slider Styling
   Transforms recent-row into a premium horizontal swipe slider.
   ============================================================ */
.recent-row {
  display: flex !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory;
  gap: 24px !important;
  padding-bottom: 20px !important;
  -webkit-overflow-scrolling: touch;
}
.recent-row::-webkit-scrollbar {
  height: 3px;
}
.recent-row::-webkit-scrollbar-track {
  background: var(--line-soft, #FAF6EE);
}
.recent-row::-webkit-scrollbar-thumb {
  background: var(--gold-deep, #8C6E3A);
}
.recent-row .pcard {
  flex: 0 0 280px !important;
  scroll-snap-align: start;
  margin-right: 0 !important; /* Managed by flex gap */
}



/* ============================================================
   BESPOKE CART PAGE LAYOUT ADJUSTMENTS
   - Hides Odoo's default checkout layout sidebar on the cart page.
   - Sets the content column to full 100% width.
   ============================================================ */
body.is-cart-page .o_website_sale_checkout_container .d-none.d-lg-block.col-lg-5,
body.is-cart-page .o_website_sale_checkout_container .d-none.d-lg-block.offset-xxl-1 {
  display: none !important;
}
body.is-cart-page .o_website_sale_checkout_container .oe_cart {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Quantity selector transparent background overrides */
#add_to_cart_wrap .css_quantity,
#add_to_cart_wrap .css_quantity input,
#add_to_cart_wrap .css_quantity a,
.css_quantity,
.css_quantity input,
.css_quantity a,
input.quantity,
input.js_quantity,
.css_quantity input.js_quantity {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border-color: var(--line) !important;
}

/* Style stock availability message like the gold border badge in storefront */
#threshold_message:not(.d-none):not(.o_hidden),
#threshold_message.badge:not(.d-none):not(.o_hidden),
#threshold_message.text-bg-warning:not(.d-none):not(.o_hidden),
#threshold_message.text-bg-danger:not(.d-none):not(.o_hidden),
#threshold_message.text-bg-success:not(.d-none):not(.o_hidden),
.oe_website_sale_availability:not(.d-none):not(.o_hidden),
#product_availability_box:not(.d-none):not(.o_hidden),
.pdp-stock:not(.d-none):not(.o_hidden) {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background-color: rgba(194, 160, 100, 0.05) !important;
    border: 1px solid var(--gold, #B0894C) !important;
    border-radius: 0 !important;
    padding: 12px 18px !important;
    margin: 20px 0 !important;
    color: var(--gold-deep, #8C6E3A) !important;
    font-family: var(--sans) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: .06em !important;
    text-transform: none !important;
    text-align: left !important;
    box-shadow: none !important;
    width: 100% !important;
}

/* Custom radio-dot icon for the stock box */
#threshold_message:not(.d-none):not(.o_hidden)::before,
#product_availability_box:not(.d-none):not(.o_hidden)::before {
    content: "" !important;
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    border: 1px solid var(--gold, #B0894C) !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, var(--gold-deep, #8C6E3A) 35%, transparent 40%) !important;
    flex-shrink: 0 !important;
}

/* Hide duplicate default orange circles and font icons inside stock box */
#threshold_message i,
#threshold_message span[class*="text-"],
#threshold_message .fa,
#threshold_message .fa-circle,
#threshold_message svg {
    display: none !important;
}

/* Hide default Odoo lines, sharing, and comparison/accordion widgets to clean up space */
#product_details hr,
#product_details .s_share,
#product_details #product_share,
#product_details .oe_share_buttons,
#product_details .accordion,
#product_details .accordion-item,
#product_details #o_wsale_compare_link,
#product_details .o_add_compare,
#product_details .o_compare_link {
    display: none !important;
}

/* Hide payment method entries or links globally on portal dashboard page */
#page-konto a[href*="/my/payment_method"],
#page-konto a[href*="/my/payment_methods"],
#page-konto [data-ksec-jump="payment"],
.o_portal_docslist a[href*="payment_method"],
.o_portal_docslist .list-group-item:has(a[href*="payment_method"]),
div:has(> a[href*="/my/payment_method"]),
#page-konto .kd-card:has(a[href*="payment_method"]),
a[href*="/my/payment_method"] {
    display: none !important;
}

/* Product Title & Headings Font/Color overrides matching storefront.html */
#product_details h1,
h1[itemprop="name"],
.oe_title h1,
.pdp-name,
#page-konto h1,
#page-konto h2,
#page-konto h3,
#page-warenkorb h1,
#page-warenkorb h2,
#page-warenkorb h3,
.acc-head span,
.acc-head {
    font-family: var(--serif) !important;
    font-weight: 500 !important;
    color: var(--ink, #2A251C) !important;
}

#product_details h1,
h1[itemprop="name"],
.oe_title h1 {
    font-size: clamp(32px, 3.5vw, 44px) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 8px !important;
}

/* sup element styling resets to keep cart count look clean */
sup.cart-count,
.cart-count.my_cart_quantity,
.my_cart_quantity,
.o_wsale_wishlist_quantity {
    background-color: var(--gold-deep, #8C6E3A) !important;
    color: var(--cream, #FAF6EE) !important;
    font-family: var(--sans, "Jost", sans-serif) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    line-height: 12px !important;
    height: 16px !important;
    min-width: 16px !important;
    padding: 2px 4px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    margin-left: 6px !important;
    position: relative !important;
    top: -2px !important;
}

/* Hide empty PDP layout spaces and specifications blocks */
#product_attributes_simple:empty,
#product_attributes_simple:not(:has(*)),
#product_full_spec:empty,
.pdp-material:empty,
.pdp-material:not(:has(.pm-cell)) {
    display: none !important;
}

/* Custom PDP quantity stepper and action buttons layout matching storefront.html */
#add_to_cart_wrap {
    display: flex !important;
    flex-direction: row !important;
    gap: 14px !important;
    width: 100% !important;
    margin: 20px 0 14px 0 !important;
}

/* Quantity stepper container */
#add_to_cart_wrap .css_quantity {
    display: inline-flex !important;
    align-items: center !important;
    background-color: var(--cream-light, #FAF9F6) !important;
    border: 1px solid var(--line, #E6DECF) !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border-radius: 0 !important;
    width: auto !important;
    max-width: 120px !important;
}

/* Quantity stepper buttons (+ and -) */
#add_to_cart_wrap .css_quantity a.js_add_cart_json,
#add_to_cart_wrap .css_quantity a,
#add_to_cart_wrap .css_quantity .btn {
    color: var(--ink, #2A251C) !important;
    font-size: 16px !important;
    text-decoration: none !important;
    border: 0 !important;
    background: transparent !important;
    width: 28px !important;
    height: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* Quantity stepper input value box */
#add_to_cart_wrap .css_quantity input.js_quantity {
    border: 0 !important;
    background: transparent !important;
    color: var(--ink, #2A251C) !important;
    font-family: var(--sans) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    text-align: center !important;
    width: 40px !important;
    padding: 0 !important;
    height: 100% !important;
    box-shadow: none !important;
}

/* Add to Cart button styles */
#add_to_cart {
    background-color: var(--ink, #2A251C) !important;
    color: var(--cream, #FAF6EE) !important;
    border: 1px solid var(--ink, #2A251C) !important;
    border-radius: 0 !important;
    font-family: var(--sans) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    padding: 0 24px !important;
    flex: 1 !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    height: 52px !important;
}

#add_to_cart:hover {
    background-color: var(--gold-deep, #8C6E3A) !important;
    border-color: var(--gold-deep, #8C6E3A) !important;
}

/* Buy Now / Direkt-Kauf button styles */
#buy_now {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background-color: transparent !important;
    color: var(--ink, #2A251C) !important;
    border: 1px solid var(--ink, #2A251C) !important;
    border-radius: 0 !important;
    font-family: var(--sans) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.12em !important;
    text-transform: none !important;
    padding: 16px 24px !important;
    height: 52px !important;
    margin: 14px 0 0 0 !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

#buy_now:hover {
    background-color: var(--cream-2, #FAF6EE) !important;
    color: var(--ink, #2A251C) !important;
}

/* Remove brackets on utilities count badges and style badges to hide when empty */
.util-count::before,
.util-count::after {
    content: "" !important;
}

.my_cart_quantity:empty,
.my_cart_quantity.d-none,
.cart-count.my_cart_quantity:empty,
.cart-count.my_cart_quantity.d-none,
.o_wsale_wishlist_quantity:empty,
.o_wsale_wishlist_quantity.d-none,
.o_wsale_wishlist_quantity[style*="display: none"],
.o_wsale_wishlist_quantity[style*="display:none"] {
    display: none !important;
}



/* Universal dropdown select styling */
select,
.form-select,
.dropdown-menu {
    border: 1px solid var(--line, #E6DECF) !important;
    background-color: var(--cream-light, #FAF9F6) !important;
    color: var(--ink, #2A251C) !important;
    font-family: var(--sans, "Jost", sans-serif) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    border-radius: 0 !important;
    padding: 10px 14px !important;
    outline: none !important;
    transition: border-color 0.15s, background-color 0.15s !important;
}

select:focus,
.form-select:focus {
    border-color: var(--gold-deep, #8C6E3A) !important;
    background-color: var(--cream, #FAF6EE) !important;
}

/* Style dropdown options */
select option {
    background-color: var(--cream-light, #FAF9F6) !important;
    color: var(--ink, #2A251C) !important;
    font-family: var(--sans, "Jost", sans-serif) !important;
    text-transform: none !important;
}

/* Style bootstrap dropdown menus */
.dropdown-menu {
    box-shadow: 0 4px 10px rgba(40, 33, 20, 0.08) !important;
    padding: 8px 0 !important;
}

.dropdown-item {
    font-family: var(--sans, "Jost", sans-serif) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--ink, #2A251C) !important;
    padding: 10px 20px !important;
    transition: background-color 0.15s, color 0.15s !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--cream-2, #F4ECDA) !important;
    color: var(--gold-deep, #8C6E3A) !important;
}

/* Overlay & Drawer z-index hierarchy overrides */
.scrim {
    z-index: 10000 !important;
}
.drawer {
    z-index: 10005 !important;
}
.qv-overlay {
    z-index: 10010 !important;
}

/* Mathematically center the fit marks relative to the slider scale knob */
.fit-marks {
    position: relative !important;
    display: block !important;
    height: 20px !important;
}

.fit-marks span {
    position: absolute !important;
}

.fit-marks span:nth-child(1) {
    left: 0 !important;
    transform: none !important;
}

.fit-marks span:nth-child(2) {
    left: 50% !important;
    transform: translateX(-50%) !important;
}

.fit-marks span:nth-child(3) {
    right: 0 !important;
    transform: none !important;
}

/* Hide empty native Odoo content sections and contact/accordion wrappers to clean up space */
.o_wsale_product_details_content_section_accordion,
.o_wsale_product_details_content_section_contact,
#contact_us_wrapper,
#product_details_extra,
#product_details hr,
#product_details .oe_structure:empty,
.o_wsale_product_details_content_section:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    border: none !important;
}

/* Cart Wrap Empty State Fallback Styles */
[data-cart-wrap="true"][data-empty="true"] .my_cart_quantity,
[data-cart-wrap="true"][data-empty="true"] .cart-count {
    display: none !important;
}

/* Elevate header z-index to float above checkout summary columns and portals */
.site-header {
    z-index: 9999 !important;
}

/* Elevate toast messages to display above Quick View overlay */
.toast {
    z-index: 20000 !important;
}

/* Filter button typography & alignment override */
.vl-filter-btn {
    font-family: var(--sans, "Jost", sans-serif) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: var(--ink, #2A251C) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Remove all native Odoo content section borders, padding, and margins to prevent layout gaps */
.o_wsale_product_details_content_section {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* Clean up availability messages container spacing */
.availability_messages {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Red border and shake animation for required sizes/colors selection in Quick View */
.qv-sizes.required-highlight,
.qv-colors.required-highlight {
    border: 1px solid #d9534f !important;
    animation: qvShake 0.4s ease-in-out !important;
    padding: 6px !important;
}

@keyframes qvShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

/* ============================================================
   VELLINORE — SHOP CATEGORIES & SEARCH BAR ENHANCEMENTS
   ============================================================ */

/* 1. Categories Filmstrip Styling */
.o_wsale_filmstrip_wrapper {
    margin: 20px 0 24px 0 !important;
    padding: 8px 0 !important;
    border: none !important;
    background-color: transparent !important;
}

/* Customized scrollbar for Categories */
.o_wsale_filmstrip_wrapper::-webkit-scrollbar {
    height: 3px !important;
}
.o_wsale_filmstrip_wrapper::-webkit-scrollbar-track {
    background: var(--cream-2, #FAF6EE) !important;
}
.o_wsale_filmstrip_wrapper::-webkit-scrollbar-thumb {
    background: var(--line, #E6DFD3) !important;
    transition: background 0.2s ease !important;
}
.o_wsale_filmstrip_wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--gold, #B0894C) !important;
}

.o_wsale_filmstrip {
    gap: 14px !important;
    padding: 2px 2px 10px 2px !important;
}

.o_wsale_filmstrip li {
    flex: 0 0 auto !important;
}

.o_wsale_filmstrip_link {
    background-color: var(--cream-light, #FAF9F6) !important;
    border: 1px solid var(--line, #E6DFD3) !important;
    border-radius: 0 !important; /* Vellinore sharp/rect shape */
    padding: 8px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.o_wsale_filmstrip_link > div {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    height: 100% !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* Category Thumbnail Image */
.o_wsale_filmstrip_image {
    width: 36px !important;
    height: 36px !important;
    border-radius: 0 !important; /* Sharp corners */
    border: 1px solid var(--line-soft, rgba(42, 37, 28, 0.1)) !important;
    box-shadow: none !important;
    transition: border-color 0.25s ease !important;
}

/* Category Title Text */
.o_wsale_filmstrip_link span {
    font-family: var(--sans) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--ink, #2A251C) !important;
    transition: color 0.25s ease !important;
}

/* Categories Hover & Active States */
.o_wsale_filmstrip_link:hover {
    background-color: var(--cream-2, #FAF6EE) !important;
    border-color: var(--gold-deep, #8C6E3A) !important;
    transform: translateY(-1px) !important;
}

.o_wsale_filmstrip_link:hover span {
    color: var(--gold-deep, #8C6E3A) !important;
}

.o_wsale_filmstrip_link:hover .o_wsale_filmstrip_image {
    border-color: var(--gold, #B0894C) !important;
}

.o_wsale_filmstrip_link.active,
.o_wsale_filmstrip_link[class*="active"] {
    background-color: var(--espresso, #2A251C) !important;
    border-color: var(--espresso, #2A251C) !important;
}

.o_wsale_filmstrip_link.active span,
.o_wsale_filmstrip_link[class*="active"] span {
    color: var(--cream, #FAF6EE) !important;
}

.o_wsale_filmstrip_link.active .o_wsale_filmstrip_image,
.o_wsale_filmstrip_link[class*="active"] .o_wsale_filmstrip_image {
    border-color: rgba(250, 246, 238, 0.3) !important;
}

/* 2. Search Bar Styling */
.vl-search-wrap .o_wsale_products_searchbar_form {
    border: 1px solid var(--line, #E6DFD3) !important;
    border-radius: 0 !important; /* Sharp corners */
    background-color: transparent !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    box-shadow: none !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.vl-search-wrap .o_wsale_products_searchbar_form:focus-within,
.vl-search-wrap .o_wsale_products_searchbar_form:hover {
    border-color: var(--gold-deep, #8C6E3A) !important;
}

.vl-search-wrap .o_wsale_products_searchbar_form input.oe_search_box {
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    font-family: var(--sans) !important;
    font-size: 13px !important;
    color: var(--ink, #2A251C) !important;
    padding: 0 16px !important;
    height: 100% !important;
    box-shadow: none !important;
}

.vl-search-wrap .o_wsale_products_searchbar_form input.oe_search_box::placeholder {
    color: var(--ink-faint, #A59E92) !important;
    font-family: var(--sans) !important;
    font-size: 13px !important;
    letter-spacing: 0.05em !important;
}

.vl-search-wrap .o_wsale_products_searchbar_form .btn.oe_search_button {
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--ink-soft, #5C5549) !important;
    padding: 0 16px !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    transition: color 0.25s ease !important;
}

.vl-search-wrap .o_wsale_products_searchbar_form .btn.oe_search_button:hover {
    color: var(--gold-deep, #8C6E3A) !important;
    background-color: transparent !important;
}

/* Force elements hidden by out-of-stock javascript to hide despite other id specificity */
#add_to_cart.d-none,
#buy_now.d-none,
#add_to_cart_wrap .css_quantity.d-none,
#add_to_cart_wrap > span:first-child.d-none {
    display: none !important;
}

/* 3. Infinite Loader Styles */
#vl-infinite-loader {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 48px 0 24px 0 !important;
    animation: fadeIn 0.3s ease !important;
}

#vl-infinite-loader.d-none {
    display: none !important;
}

.loader-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
}

.loader-spinner {
    width: 28px !important;
    height: 28px !important;
    border: 2px solid var(--line, #E6DFD3) !important;
    border-top: 2px solid var(--gold-deep, #8C6E3A) !important;
    border-radius: 50% !important;
    animation: spin 0.8s linear infinite !important;
}

.loader-text {
    font-family: var(--sans) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: var(--ink-soft, #5C5549) !important;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

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

/* CSS Performance Containment Rules for off-screen sections */
section.voices,
section.filmstrip,
section.craft,
section.shoplook,
section.teaser,
section.recent,
section.trust,
section.featured-carousel {
    content-visibility: auto !important;
    contain-intrinsic-size: 350px !important;
}

/* 4. Featured Carousel Styles */
.featured-carousel {
    padding: clamp(24px, 3vw, 48px) 0 !important;
    background-color: transparent !important;
}

.fc-head {
    display: flex !important;
    align-items: baseline !important;
    gap: 18px !important;
    margin-bottom: 30px !important;
}

.fc-head h2 {
    font-family: var(--serif) !important;
    font-weight: 500 !important;
    font-size: clamp(28px, 3.2vw, 46px) !important;
    line-height: 1 !important;
    margin-top: 10px !important;
}

.fc-head .fc-hint {
    margin-left: auto !important;
    font-family: var(--sans) !important;
    font-size: 11px !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    color: var(--ink-faint) !important;
}

.fc-track {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    gap: 24px !important;
    padding-bottom: 20px !important;
    -webkit-overflow-scrolling: touch !important;
}

.fc-track::-webkit-scrollbar {
    height: 3px !important;
}

.fc-track::-webkit-scrollbar-track {
    background: var(--line-soft, #FAF6EE) !important;
}

.fc-track::-webkit-scrollbar-thumb {
    background: var(--gold-deep, #8C6E3A) !important;
}

.fc-track .pcard {
    flex: 0 0 280px !important;
    scroll-snap-align: start !important;
    margin-right: 0 !important;
}

/* 5. Drag-to-Scroll Cursor & Spacing Adjustments */
.fc-track,
.recent-row {
    cursor: grab !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

.fc-track.active-drag,
.recent-row.active-drag {
    cursor: grabbing !important;
}

#o_wsale_products_grid {
    margin-bottom: 80px !important;
}

#vl-infinite-loader {
    margin: 48px 0 80px 0 !important;
}

/* ============================================================
   6. OFFCANVAS SIDE FILTER DRAWER REDESIGN
   ============================================================ */

/* Main drawer container styling */
#o_wsale_offcanvas {
    background-color: var(--cream, #FAF6EE) !important;
    border-left: 1px solid var(--line, #E6DFD3) !important;
    border-radius: 0 !important;
}

/* Offcanvas Header Styles */
#o_wsale_offcanvas .offcanvas-header {
    background-color: var(--cream, #FAF6EE) !important;
    border-bottom: 1px solid var(--line-soft, #F5EFEB) !important;
    padding: 24px !important;
}

#o_wsale_offcanvas .offcanvas-title {
    font-family: var(--sans) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: var(--ink, #2A251C) !important;
}

/* Close button custom styling */
#o_wsale_offcanvas .btn-close {
    background-image: none !important;
    position: relative !important;
    width: 24px !important;
    height: 24px !important;
    opacity: 0.78 !important;
    box-shadow: none !important;
    transition: opacity 0.2s ease !important;
}

#o_wsale_offcanvas .btn-close:hover {
    opacity: 1 !important;
}

#o_wsale_offcanvas .btn-close::after {
    content: "×" !important;
    font-size: 26px !important;
    font-weight: 300 !important;
    color: var(--ink-soft, #5C5549) !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    line-height: 1 !important;
}

/* Accordion item container */
#o_wsale_offcanvas .accordion-item {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--line-soft, #F5EFEB) !important;
    border-radius: 0 !important;
}

/* Accordion header button */
#o_wsale_offcanvas .accordion-button {
    background-color: transparent !important;
    color: var(--ink, #2A251C) !important;
    font-family: var(--sans) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    padding: 20px 24px !important;
    box-shadow: none !important;
    transition: color 0.25s ease !important;
}

#o_wsale_offcanvas .accordion-button:not(.collapsed) {
    color: var(--gold-deep, #8C6E3A) !important;
    box-shadow: none !important;
}

/* Gold caret indicators */
#o_wsale_offcanvas .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238C6E3A'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
    background-size: 12px !important;
    transition: transform 0.2s ease-in-out !important;
}

/* Accordion Collapse Body Content */
#o_wsale_offcanvas .accordion-body {
    background-color: transparent !important;
    padding: 12px 24px 24px 24px !important;
}

/* Kill white bg on collapse wrappers */
#o_wsale_offcanvas .accordion-collapse,
#o_wsale_offcanvas .collapse,
#o_wsale_offcanvas .collapsing,
#o_wsale_offcanvas .accordion-collapse.show {
    background-color: transparent !important;
}

/* Kill white bg on any nested card/list wrappers inside accordion */
#o_wsale_offcanvas .card,
#o_wsale_offcanvas .card-body,
#o_wsale_offcanvas .list-group,
#o_wsale_offcanvas .list-group-item {
    background-color: transparent !important;
    border-color: var(--line-soft, #F5EFEB) !important;
}

/* Text selections & links inside accordion body */
#o_wsale_offcanvas .accordion-body label,
#o_wsale_offcanvas .accordion-body span,
#o_wsale_offcanvas .accordion-body a {
    font-family: var(--sans) !important;
    font-size: 13px !important;
    letter-spacing: 0.02em !important;
    color: var(--ink-soft, #5C5549) !important;
}

#o_wsale_offcanvas .accordion-body label:hover {
    color: var(--gold-deep, #8C6E3A) !important;
}

/* Checkboxes custom Bootstrap styling */
#o_wsale_offcanvas .form-check-input {
    border-radius: 0 !important;
    border: 1px solid var(--line, #E6DFD3) !important;
    cursor: pointer !important;
    background-color: transparent !important;
}

#o_wsale_offcanvas .form-check-input:checked {
    background-color: var(--gold-deep, #8C6E3A) !important;
    border-color: var(--gold-deep, #8C6E3A) !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23FAF6EE' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3 6-6'/%3e%3c/svg%3e") !important;
    box-shadow: none !important;
}

#o_wsale_offcanvas .form-check-input:focus {
    border-color: var(--gold-deep, #8C6E3A) !important;
    box-shadow: none !important;
}

/* Color tags / Pills active state */
#o_wsale_offcanvas .css_attribute_color {
    border-radius: 0 !important;
    border: 1px solid var(--line, #E6DFD3) !important;
    cursor: pointer !important;
}

#o_wsale_offcanvas .css_attribute_color.active {
    border-color: var(--gold-deep, #8C6E3A) !important;
    outline: 2px solid var(--gold-deep, #8C6E3A) !important;
}

/* Search bar inside drawer */
#o_wsale_offcanvas .o_wsale_products_searchbar_form {
    border: 1px solid var(--line, #E6DFD3) !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    height: 42px !important;
    margin: 16px 24px !important;
    box-shadow: none !important;
    transition: border-color 0.25s ease !important;
    display: flex !important;
    align-items: center !important;
}

#o_wsale_offcanvas .o_wsale_products_searchbar_form:hover {
    border-color: var(--gold-deep, #8C6E3A) !important;
}

#o_wsale_offcanvas .o_wsale_products_searchbar_form:focus-within {
    border-color: var(--gold-deep, #8C6E3A) !important;
}

/* Kill ALL Bootstrap bg utilities on search elements */
#o_wsale_offcanvas .o_wsale_products_searchbar_form [class*="text-bg-"],
#o_wsale_offcanvas .o_wsale_products_searchbar_form .input-group,
#o_wsale_offcanvas .o_wsale_products_searchbar_form .input-group-text {
    background-color: transparent !important;
    background: transparent !important;
}

#o_wsale_offcanvas .o_wsale_products_searchbar_form input,
#o_wsale_offcanvas .o_wsale_products_searchbar_form input.oe_search_box,
#o_wsale_offcanvas .o_wsale_products_searchbar_form .form-control {
    font-family: var(--sans) !important;
    font-size: 13px !important;
    padding: 0 12px !important;
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--ink, #2A251C) !important;
    height: 100% !important;
    line-height: 40px !important;
}

#o_wsale_offcanvas .o_wsale_products_searchbar_form input::placeholder {
    color: var(--ink-faint, #ACA79E) !important;
    font-family: var(--sans) !important;
    line-height: 40px !important;
}

#o_wsale_offcanvas .o_wsale_products_searchbar_form .btn.oe_search_button {
    padding: 0 12px !important;
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    color: var(--ink-soft, #5C5549) !important;
    transition: color 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

#o_wsale_offcanvas .o_wsale_products_searchbar_form .btn.oe_search_button:hover {
    color: var(--gold-deep, #8C6E3A) !important;
}

/* Price Range Multirange elements */
#o_wsale_offcanvas .multirange-wrapper {
    padding: 12px 0 !important;
}

#o_wsale_offcanvas .multirange-wrapper input[type="range"] {
    accent-color: var(--gold-deep, #8C6E3A) !important;
}

/* Slider Track webkit */
#o_wsale_offcanvas .multirange-wrapper input[type="range"]::-webkit-slider-runnable-track {
    background: var(--line-soft, #F5EFEB) !important;
    height: 2px !important;
    border-radius: 0 !important;
}

#o_wsale_offcanvas .multirange-wrapper input[type="range"].ghost::-webkit-slider-runnable-track {
    background: var(--gold-deep, #8C6E3A) !important;
}

/* Slider Track Firefox */
#o_wsale_offcanvas .multirange-wrapper input[type="range"]::-moz-range-track {
    background: var(--line-soft, #F5EFEB) !important;
    height: 2px !important;
    border-radius: 0 !important;
}

#o_wsale_offcanvas .multirange-wrapper input[type="range"].ghost::-moz-range-track {
    background: var(--gold-deep, #8C6E3A) !important;
}

/* Slider Thumbs Webkit */
#o_wsale_offcanvas .multirange-wrapper input[type="range"]::-webkit-slider-thumb {
    background: var(--cream, #FAF6EE) !important;
    border: 2px solid var(--gold-deep, #8C6E3A) !important;
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    margin-top: -6px !important;
    box-shadow: none !important;
    transition: transform 0.1s ease !important;
}

#o_wsale_offcanvas .multirange-wrapper input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2) !important;
}

/* Slider Thumbs Firefox */
#o_wsale_offcanvas .multirange-wrapper input[type="range"]::-moz-range-thumb {
    background: var(--cream, #FAF6EE) !important;
    border: 2px solid var(--gold-deep, #8C6E3A) !important;
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: transform 0.1s ease !important;
}

#o_wsale_offcanvas .multirange-wrapper input[type="range"]::-moz-range-thumb:hover {
    transform: scale(1.2) !important;
}

/* Price texts */
#o_wsale_offcanvas #o_wsale_price_range_option_inner span {
    font-family: var(--sans) !important;
    font-size: 13px !important;
    color: var(--ink-soft, #5C5549) !important;
}

/* Clear Filters & Apply Filters CTA Redesign */
#o_wsale_offcanvas .vl-filter-footer {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 16px 24px 24px !important;
    border-top: 1px solid var(--line-soft, #F5EFEB) !important;
}

#o_wsale_offcanvas .vl-apply-filters-btn {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    background-color: var(--gold-deep, #8C6E3A) !important;
    color: var(--cream, #FAF6EE) !important;
    font-family: var(--sans) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    padding: 14px 20px !important;
    border-radius: 0 !important;
    border: none !important;
    cursor: pointer !important;
    transition: background-color 0.25s ease !important;
}

#o_wsale_offcanvas .vl-apply-filters-btn:hover {
    background-color: var(--espresso, #2A251C) !important;
}

#o_wsale_offcanvas a[href="/shop"],
#o_wsale_offcanvas a[title="Clear Filters"] {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    background-color: transparent !important;
    color: var(--ink-soft, #5C5549) !important;
    font-family: var(--sans) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    padding: 12px 20px !important;
    border-radius: 0 !important;
    border: 1px solid var(--line, #E6DFD3) !important;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease !important;
}

#o_wsale_offcanvas a[href="/shop"]:hover,
#o_wsale_offcanvas a[title="Clear Filters"]:hover {
    background-color: var(--espresso, #2A251C) !important;
    color: var(--cream, #FAF6EE) !important;
    border-color: var(--espresso, #2A251C) !important;
}

/* ============================================================
   7. SEARCH AUTOCOMPLETE DROPDOWN REDESIGN
   ============================================================ */
.o_dropdown_menu.show,
.dropdown-menu.show.ui-autocomplete {
    background-color: var(--cream-light, #FAF9F6) !important;
    border: 1px solid var(--line, #E6DFD3) !important;
    border-radius: 0 !important;
    box-shadow: 0 10px 30px rgba(42, 37, 28, 0.08) !important;
    padding: 12px 0 !important;
    z-index: 1050 !important;
}

.o_dropdown_menu.show .dropdown-item,
.dropdown-menu.show.ui-autocomplete .dropdown-item {
    padding: 12px 24px !important;
    border-bottom: 1px solid var(--line-soft, #F5EFEB) !important;
    transition: background-color 0.2s ease !important;
    background-color: transparent !important;
}

.o_dropdown_menu.show .dropdown-item:last-of-type,
.dropdown-menu.show.ui-autocomplete .dropdown-item:last-of-type {
    border-bottom: none !important;
}

.o_dropdown_menu.show .dropdown-item:hover,
.o_dropdown_menu.show .dropdown-item:focus,
.dropdown-menu.show.ui-autocomplete .dropdown-item:hover,
.dropdown-menu.show.ui-autocomplete .dropdown-item:focus {
    background-color: var(--line-soft, #F5EFEB) !important;
}

.o_dropdown_menu.show .o_search_result_item,
.dropdown-menu.show.ui-autocomplete .o_search_result_item {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    width: 100% !important;
}

.o_dropdown_menu.show .o_image_64_contain,
.dropdown-menu.show.ui-autocomplete .o_image_64_contain {
    width: 48px !important;
    height: 48px !important;
    object-fit: cover !important;
    border: 1px solid var(--line-soft, #F5EFEB) !important;
    border-radius: 0 !important;
    flex-shrink: 0 !important;
}

.o_dropdown_menu.show .o_search_result_item_detail,
.dropdown-menu.show.ui-autocomplete .o_search_result_item_detail {
    padding: 0 !important;
    flex-grow: 1 !important;
}

.o_dropdown_menu.show .o_search_result_item_detail .h6,
.dropdown-menu.show.ui-autocomplete .o_search_result_item_detail .h6 {
    font-family: var(--serif, serif) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--ink, #2A251C) !important;
    margin: 0 0 4px 0 !important;
    text-transform: capitalize !important;
}

.o_dropdown_menu.show .o_search_result_item_detail p,
.dropdown-menu.show.ui-autocomplete .o_search_result_item_detail p {
    font-family: var(--sans, sans-serif) !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
    color: var(--ink-soft, #5C5549) !important;
    margin: 0 0 6px 0 !important;
}

/* Autocomplete Category / Extra Links Styling Fix */
.o_dropdown_menu.show .o_search_result_item_detail button.btn-link,
.dropdown-menu.show.ui-autocomplete .o_search_result_item_detail button.btn-link {
    font-family: var(--sans, sans-serif) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    color: var(--ink-soft, #5C5549) !important;
    text-decoration: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    display: inline-block !important;
    vertical-align: middle !important;
    cursor: default !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

.o_dropdown_menu.show .o_search_result_item_detail button.btn-link:not([disabled]),
.dropdown-menu.show.ui-autocomplete .o_search_result_item_detail button.btn-link:not([disabled]) {
    color: var(--gold-deep, #8C6E3A) !important;
    cursor: pointer !important;
}

.o_dropdown_menu.show .o_search_result_item_detail button.btn-link:not([disabled]):hover,
.dropdown-menu.show.ui-autocomplete .o_search_result_item_detail button.btn-link:not([disabled]):hover {
    color: var(--espresso, #2A251C) !important;
}

.o_dropdown_menu.show .o_search_result_item_detail button.btn-link[disabled],
.dropdown-menu.show.ui-autocomplete .o_search_result_item_detail button.btn-link[disabled] {
    margin-right: 4px !important;
}

/* Price Detail column */
.o_dropdown_menu.show .flex-shrink-0.ms-auto,
.dropdown-menu.show.ui-autocomplete .flex-shrink-0.ms-auto {
    margin-left: auto !important;
    text-align: right !important;
    flex-shrink: 0 !important;
}

.o_dropdown_menu.show .o_search_result_item b,
.dropdown-menu.show.ui-autocomplete .o_search_result_item b {
    font-family: var(--sans, sans-serif) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--ink, #2A251C) !important;
}

.o_dropdown_menu.show .o_search_result_item span[style*="text-decoration: line-through"],
.dropdown-menu.show.ui-autocomplete .o_search_result_item span[style*="text-decoration: line-through"] {
    font-family: var(--sans, sans-serif) !important;
    font-size: 11px !important;
    color: var(--ink-faint, #ACA79E) !important;
}

/* "All Results" button at bottom of autocomplete */
.o_dropdown_menu.show button[type="submit"].dropdown-item.text-center,
.dropdown-menu.show.ui-autocomplete button[type="submit"].dropdown-item.text-center {
    font-family: var(--sans, sans-serif) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: var(--espresso, #2A251C) !important;
    padding: 16px !important;
    background-color: var(--cream, #FAF6EE) !important;
    border-top: 1px solid var(--line, #E6DFD3) !important;
    border-bottom: none !important;
}

.o_dropdown_menu.show button[type="submit"].dropdown-item.text-center:hover,
.dropdown-menu.show.ui-autocomplete button[type="submit"].dropdown-item.text-center:hover {
    color: var(--gold-deep, #8C6E3A) !important;
    background-color: var(--line-soft, #F5EFEB) !important;
}

/* Spacing between shop hero banner and breadcrumbs / category list */
.vl-shop-hero {
    margin-bottom: clamp(30px, 5vw, 60px) !important;
}