/* Outletmor v4 — compile-free storefront stylesheet for PrestaShop 8+.
   MarcasB2B: a boxed, sharp-cornered layout — every element is right-angled
   (only the loading spinner stays round) and the page sits in a centred
   `--om-max` column framed by a light ground, for a formal wholesale look. */
:root {
  /* MarcasB2B palette — black wordmark + metallic-gold accent, warm neutrals.
     The historical --om-green* token names are kept (they thread through the
     whole sheet); they now carry near-black / warm-charcoal values. */
  --om-ink: #1c1a17;
  --om-green: #1f1c18;
  --om-green-deep: #141210;
  --om-green-soft: #4a453d;
  --om-muted: #8a857b;
  --om-line: #e7e3da;
  --om-pill-line: #cabfa8;
  --om-field: #f5f2ec;
  --om-paper: #ffffff;
  --om-tile: #f1eee7;
  --om-green-wash: #f4eddf;
  --om-lime: #c2a163;
  --om-gold: #a9895a;
  --om-gold-deep: #8a6f42;
  --om-sale: #8a3f2b;
  --om-shadow: 0 22px 60px rgba(24, 18, 8, .18);
  --om-shadow-soft: 0 8px 26px rgba(24, 18, 8, .12);
  --om-font: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --om-gutter: clamp(1rem, 2.2vw, 2.25rem);
  --om-header: 4.25rem;
  --om-max: 96rem; /* boxed content width */
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
/* Kill the grey/black flash Chrome & Safari draw on tap, and the native focus
   box some browsers still show on a plain :focus click/tap — :focus-visible
   below puts a (green, not black) ring back for real keyboard navigation. */
a, button, input, select, textarea, summary, [role='button'] { -webkit-tap-highlight-color: transparent; }
a:focus, button:focus, input:focus, select:focus, textarea:focus, summary:focus, [role='button']:focus { outline: 0; }
body {
  margin: 0;
  color: var(--om-ink);
  background: var(--om-paper);
  font-family: var(--om-font);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .004em;
  -webkit-font-smoothing: antialiased;
}
body.outletmor-is-locked { overflow: hidden; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--om-green-deep); }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.hidden { display: none !important; }
.outletmor-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
h1, h2, h3, h4, h5, h6 { font-weight: 400; letter-spacing: -.01em; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--om-green); outline-offset: 2px;
}

/* Everything is right-angled. Zero any residual rounding from the classic
   theme.css / Bootstrap so the whole UI reads sharp and formal. The loading
   spinner keeps its circle (it is a `::after`, not matched here). */
input, select, textarea, button,
.btn, [class*='btn-'], .form-control, .input-group, .custom-select, .custom-file-label,
.card, .card-block, .panel, .well, .alert, .badge, .label, .tag,
.modal-content, .dropdown-menu, .popover, .tooltip-inner,
.page-link, .pagination a, .pagination span, .nav-tabs, .nav-link,
.progress, .progress-bar, .thumbnail, .img-thumbnail,
.custom-checkbox span, .custom-radio span,
.chosen-container .chosen-single, .chosen-container .chosen-drop,
.bootstrap-touchspin, .bootstrap-touchspin input, .bootstrap-touchspin .btn {
  border-radius: 0 !important;
}

/* Boxed layout: the store no longer runs edge to edge. `#wrapper` (all page
   content) is a centred `--om-max` column on the light `body` ground; the
   header and footer bands stay full-bleed with their own inner max-width. */
.container, .container-fluid,
#wrapper .container, #content-wrapper, #main {
  width: 100%; max-width: none; margin: 0; padding: 0;
}
#wrapper {
  max-width: var(--om-max); margin: 0 auto; padding: 0;
  background: var(--om-paper); box-shadow: none;
}
#wrapper > .container { padding: 0; }
#wrapper > .container > .row { margin: 0; }
.row { margin-left: 0; margin-right: 0; }
#content-wrapper.outletmor-catalog-content { width: 100%; float: none; padding: 0; }
.outletmor-main { min-height: 60vh; }

.outletmor-header__bar { max-width: var(--om-max); margin-inline: auto; }
.outletmor-footer__top,
.outletmor-footer__links,
.outletmor-footer__base { max-width: var(--om-max); margin-inline: auto; }

/* ---------- Header ---------- */
.outletmor-promo {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 2rem; padding: .4rem var(--om-gutter);
  background: var(--om-green-deep); color: #f3efe6;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
}
.outletmor-promo__link { border-bottom: 1px solid rgba(243, 239, 230, .5); }

.outletmor-header { background: var(--om-paper); border-bottom: 1px solid var(--om-line); }
.outletmor-header__bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 1rem; min-height: var(--om-header); padding: 0 var(--om-gutter);
}

/* Boxed layout — the hero no longer bleeds full-viewport or slides under a
   transparent header. It sits inside the centred column like any other band,
   and the header is always solid (nothing underlaps it). `.outletmor-has-hero`
   / `.outletmor-header-solid` are still toggled by head.tpl / outletmor.js;
   they're just visually inert now. */
.outletmor-has-hero #wrapper { margin-top: 0; }
@media (min-width: 641px) {
  .outletmor-has-hero .outletmorhero { height: auto; min-height: 22rem; max-height: 30rem; }
}
.outletmor-logo { grid-column: 2; justify-self: center; display: inline-flex; align-items: center; }
/* The logo is an SVG whose <svg> root has a viewBox but no width/height, and
   PrestaShop can't fill the <img width/height> attributes for it — so with
   `height:auto` the image collapses to 0×0. Pin an explicit height here and
   let the width follow the intrinsic ratio (clamped, letterboxed if huge). */
.outletmor-logo img {
  display: block; height: 1.5rem; width: auto;
  max-width: 15rem; object-fit: contain;
  transition: filter .25s ease;
}
.outletmor-logo span { font-size: 1.5rem; font-style: italic; font-weight: 500; letter-spacing: -.04em; text-transform: lowercase; }
.outletmor-header__start { grid-column: 1; justify-self: start; display: flex; align-items: center; gap: 1.5rem; min-width: 0; }
/* Quick links next to the hamburger, filled dynamically by initHeaderNav()
   from the real nav menu. Desktop only: the bottom tab bar + hamburger
   drawer stay the mobile nav. */
.outletmor-header__nav { display: none; align-items: center; gap: 1.25rem; }
.outletmor-header__nav[hidden] { display: none !important; } /* empty — initHeaderNav() found nothing to show */
.outletmor-header__nav-link {
  color: var(--om-ink); font-size: .76rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; white-space: nowrap;
}
.outletmor-header__nav-link:hover { color: var(--om-green-deep); }
@media (min-width: 641px) {
  .outletmor-header__nav:not([hidden]) { display: flex; }
}

.outletmor-header__actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: .15rem; min-width: 0; }
.outletmor-icon-button {
  position: relative; display: inline-grid; place-items: center;
  width: 2.6rem; height: 2.6rem; padding: 0; border: 0; background: transparent; color: var(--om-green-deep);
}
.outletmor-icon-button svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.outletmor-cart-count {
  position: absolute; top: .3rem; right: .2rem; min-width: .95rem; height: .95rem;
  display: grid; place-items: center; padding: 0 .16rem; border-radius: 0;
  background: var(--om-green); color: #fff; font-size: .58rem; font-weight: 600; line-height: 1;
}
.outletmor-search {
  display: flex; align-items: center; width: clamp(8rem, 15vw, 15rem);
  border: 1px solid #d9d9d9; border-radius: 0; background: #f0f0f0;
  padding: 0 .3rem 0 .9rem;
}
.outletmor-search:focus-within { border-color: var(--om-green); }
.outletmor-search .outletmor-icon-button { flex: 0 0 2.1rem; width: 2.1rem; color: var(--om-green-deep); }
.outletmor-search input[type='search'] { width: 100%; min-width: 0; height: 2.4rem; padding: .3rem 0; border: 0; background: transparent; font-size: .95rem; }
.outletmor-search input[type='search']:focus { outline: 0; }

/* ---------- Buttons ---------- */
.outletmor-button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: .8rem 1.6rem; border: 1px solid var(--om-green-deep); border-radius: 0;
  background: var(--om-green-deep); color: #fff;
  font-size: .74rem; font-weight: 600; letter-spacing: .12em; line-height: 1; text-align: center; text-transform: uppercase;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.outletmor-button:hover { background: #fff; color: var(--om-green-deep); }
.outletmor-button--outline { background: #fff; color: var(--om-green-deep); border-color: var(--om-pill-line); }
.outletmor-button--outline:hover { background: var(--om-green-deep); color: #fff; border-color: var(--om-green-deep); }
.outletmor-button--block { width: 100%; }

/* ---------- Overlay + drawers ---------- */
.outletmor-overlay { position: fixed; inset: 0; z-index: 90; background: rgba(22, 17, 10, .42); opacity: 0; transition: opacity .28s ease; }
.outletmor-overlay.is-visible { opacity: 1; }
.outletmor-cart-drawer, .outletmor-filter-drawer, .outletmor-menu-drawer {
  position: fixed; top: 0; right: 0; z-index: 100;
  width: min(100%, 30rem); height: 100dvh; display: flex; flex-direction: column;
  background: var(--om-paper); box-shadow: -14px 0 48px rgba(22, 17, 10, .16);
  transform: translateX(102%); visibility: hidden;
  transition: transform .34s cubic-bezier(.25, .8, .25, 1), visibility 0s linear .34s;
}
.outletmor-filter-drawer { width: min(100%, 33rem); }
.outletmor-menu-drawer { left: 0; right: auto; width: min(100%, 24rem); transform: translateX(-102%); }
.outletmor-cart-drawer.is-open, .outletmor-filter-drawer.is-open, .outletmor-menu-drawer.is-open {
  transform: translateX(0); visibility: visible; transition-delay: 0s;
}
.outletmor-drawer__top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.4rem clamp(1.25rem, 3vw, 1.75rem) 1.1rem;
}
.outletmor-drawer__top strong { color: var(--om-green-soft); font-size: 1rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; }
.outletmor-drawer__close { display: inline-flex; align-items: center; gap: .4rem; padding: 0; border: 0; background: transparent; color: var(--om-green-soft); font-size: .82rem; letter-spacing: .04em; }
.outletmor-drawer__close svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

.outletmor-menu-drawer__body { padding: 1.5rem 1.75rem 2.5rem; overflow-y: auto; }
.outletmor-menu-drawer nav ul { padding: 0; margin: 0; list-style: none; }
.outletmor-menu-links > li { border-bottom: 1px solid var(--om-line); }
.outletmor-menu-links a, .outletmor-menu-links summary { display: block; padding: .95rem 0; font-size: 1.05rem; color: var(--om-ink); }
.outletmor-menu-links summary { cursor: pointer; list-style: none; }
.outletmor-menu-links summary::-webkit-details-marker { display: none; }
.outletmor-menu-links details > a { padding-left: .9rem; font-size: .9rem; color: var(--om-muted); }
.outletmor-menu-links details ul a { padding-left: .9rem; font-size: .95rem; }

/* Mobile search sheet: same drawer mechanics as cart/filter/menu, but slides
   up from the bottom instead of in from the side. Styled here at every
   breakpoint (harmless — it's only ever opened by the tab bar, which is
   mobile-only) so it doesn't need a media-query gate of its own. */
.outletmor-search-sheet {
  --om-kb: 0px;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  max-height: 70vh; display: flex; flex-direction: column;
  background: var(--om-paper);
  border-top: 1px solid var(--om-line); box-shadow: 0 -6px 18px rgba(22, 17, 10, .08);
  border-radius: 0; /* square, per design */
  transform: translateY(102%); visibility: hidden;
  transition: transform .3s cubic-bezier(.25, .8, .25, 1), visibility 0s linear .3s;
}
/* .is-open also lifts the sheet by the on-screen-keyboard height (JS sets
   --om-kb from visualViewport) so an iPhone keyboard can't cover the input. */
.outletmor-search-sheet.is-open {
  transform: translateY(calc(-1 * var(--om-kb, 0px))) translateZ(0);
  visibility: visible; transition-delay: 0s; will-change: transform;
}
.outletmor-search-sheet__form {
  display: flex; align-items: center; gap: .5rem;
  padding: 1.25rem clamp(1.25rem, 3vw, 1.75rem) calc(1.5rem + env(safe-area-inset-bottom, 0px));
}
.outletmor-search-sheet__form input[type='search'] {
  flex: 1; min-width: 0; height: 2.8rem; padding: .5rem .9rem; border: 1px solid var(--om-pill-line);
  border-radius: 0; background: var(--om-field); font-size: .95rem; color: var(--om-ink);
}
.outletmor-search-sheet__form input[type='search']:focus { outline: 0; border-color: var(--om-green); }
.outletmor-search-sheet__form .outletmor-icon-button {
  flex: 0 0 2.8rem; width: 2.8rem; height: 2.8rem; border-radius: 0;
  background: var(--om-green-deep); color: #fff;
}

/* ---------- Mobile tab bar (home / search / cart / category / account) ---------- */
.outletmor-tabbar { display: none; }
/* Icon-only now — the label text stays in the DOM as .outletmor-sr-only (each
   item also carries its own aria-label) so the tab bar keeps a real
   accessible name per item without showing text. */
.outletmor-tabbar__item {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center;
  padding: .6rem 0; margin: 0; border: 0; background: transparent; color: var(--om-muted);
}
.outletmor-tabbar__item svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.outletmor-tabbar__item[aria-expanded='true'] { color: var(--om-green-deep); }
.outletmor-tabbar__icon { position: relative; display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; }
.outletmor-tabbar__icon .outletmor-cart-count { top: -.4rem; right: -.55rem; }

/* ---------- Breadcrumb ---------- */
.breadcrumb, #wrapper .breadcrumb {
  margin: 0; padding: .85rem var(--om-gutter) .3rem; background: var(--om-paper); border: 0;
  font-size: .72rem; color: var(--om-muted); letter-spacing: .02em;
}
/* Home has no trail — don't render an empty breadcrumb bar above the hero. */
body#index .breadcrumb { display: none; }
.breadcrumb ol { max-width: none; padding: 0; margin: 0; }
#wrapper .breadcrumb li a { color: var(--om-muted); }
#wrapper .breadcrumb li::after { content: '›'; margin: 0 .5rem; color: var(--om-muted); }
#wrapper .breadcrumb li:last-child { color: var(--om-green-soft); }
#wrapper .breadcrumb li:last-child::after { content: ''; margin: 0; }

/* ---------- Catalogue heading + toolbar ---------- */
#products, .featured-products, .product-accessories { margin: 0; }
.outletmor-listing-head { padding: 1.75rem var(--om-gutter) .4rem; }
.outletmor-listing-head h1, #main .page-header h1 {
  margin: 0; color: var(--om-green-soft); font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  font-weight: 400; letter-spacing: -.01em; line-height: 1.15;
}
.outletmor-listing-description { max-width: 46rem; margin: .7rem 0 0; color: var(--om-muted); font-size: .9rem; }

.outletmor-listing-toolbar {
  display: flex; align-items: center; gap: 1rem; flex-wrap: nowrap;
  padding: .6rem var(--om-gutter) 1.1rem;
}
/* .is-stuck (initListingToolbarSticky, outletmor.js) switches this to a
   hand-rolled sticky via position:fixed — CSS position:sticky can't be used
   here since its containing block (#js-product-list-top /
   .outletmor-listing-headrow) is only as tall as the toolbar itself, giving
   it no real room to stay pinned. JS sets top/left/width inline to match
   the placeholder it leaves in flow. */
.outletmor-listing-toolbar.is-stuck {
  position: fixed; z-index: 55; background: var(--om-paper);
  box-shadow: 0 6px 16px rgba(24, 34, 12, .08);
}
/* Wrapper for the pills' own rail arrows (outletmor-rail__viewport) — takes
   the flex:1 1 0 that used to live on .outletmor-category-pills itself, so
   the pills' overflow-x scroll still kicks in instead of stretching the
   toolbar, now that the pills are one step further from the toolbar row. */
.outletmor-category-pills-rail { flex: 1 1 0; min-width: 0; }
/* Arrows sized/positioned for this thin pill row, not the tall product-card
   rails .outletmor-rail__arrow is normally used for. */
.outletmor-category-pills-rail.outletmor-rail__viewport .outletmor-rail__arrow {
  top: 50%; width: 1.9rem; height: 1.9rem;
}
.outletmor-category-pills-rail.outletmor-rail__viewport .outletmor-rail__arrow svg { width: 1rem; height: 1rem; }
.outletmor-category-pills-rail .outletmor-rail__arrow--prev { left: -.3rem; }
.outletmor-category-pills-rail .outletmor-rail__arrow--next { right: -.3rem; }
/* Single scrollable line — never wraps, even with many subcategories.
   min-width:0 lets it shrink below its content width so the overflow-x
   scroll actually kicks in instead of stretching the toolbar. Side padding
   clears the arrows so the first/last pill isn't hidden under them. */
.outletmor-category-pills {
  display: flex; flex-wrap: nowrap; align-items: center; gap: .5rem;
  width: 100%; min-width: 0;
  padding: 0 1.7rem;
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
}
.outletmor-category-pills::-webkit-scrollbar { display: none; }
.outletmor-category-pills > * {
  flex: none; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.2rem;
  padding: .35rem 1rem; border: 1px solid var(--om-pill-line); border-radius: 0;
  color: var(--om-green-soft); font-size: .78rem; letter-spacing: .01em;
}
.outletmor-category-pills .is-current, .outletmor-category-pills a:hover {
  color: #fff; background: var(--om-green-deep); border-color: var(--om-green-deep);
}
/* No margin-left:auto — .outletmor-category-pills' flex:1 1 0 already
   consumes all the row's free space, which pushes this flex:none item flush
   right on its own; an auto margin here would instead absorb ALL that free
   space itself (auto margins are resolved before flex-grow gets any),
   collapsing the pills to zero width. */
.outletmor-listing-toolbar__controls { display: flex; align-items: center; gap: 1.1rem; flex: none; }
.outletmor-grid-view { display: flex; align-items: center; gap: .3rem; color: var(--om-muted); font-size: .8rem; }
.outletmor-grid-view button { min-width: 1.4rem; padding: .1rem .2rem; border: 0; background: transparent; color: var(--om-muted); font-size: .82rem; }
.outletmor-grid-view button[aria-pressed='true'] { color: var(--om-green-deep); font-weight: 600; }
.outletmor-filter-trigger {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.4rem;
  padding: .4rem 1.1rem; border: 1px solid var(--om-pill-line); border-radius: 0;
  background: #fff; color: var(--om-green-soft); font-size: .8rem;
}
.outletmor-filter-trigger svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.outletmor-filter-trigger:hover { border-color: var(--om-green-deep); color: var(--om-green-deep); }

/* ---------- Listing: permanent left filter + sort rail (desktop) ----------
   `#outletmor-filter` keeps its `.outletmor-filter-drawer` class so that below
   901px it is still the slide-in drawer opened by `.outletmor-filter-trigger`.
   From 901px the rules here dock it as a static left column: `#products` is a
   two-column grid and `.outletmor-listing-top` (the AJAX-replaced wrapper) is
   `display:contents` so the header row and the rail land in that grid. */
@media (min-width: 901px) {
  #products {
    display: grid;
    grid-template-columns: clamp(13.5rem, 17vw, 17.5rem) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: clamp(1rem, 2vw, 2rem);
    align-items: start;
  }
  .outletmor-listing-top { display: contents; }
  .outletmor-listing-headrow { grid-row: 1; grid-column: 1 / -1; min-width: 0; }
  .outletmor-listing-main { grid-row: 2; grid-column: 2; min-width: 0; }

  #outletmor-filter.outletmor-catalog-filters {
    grid-row: 2; grid-column: 1; position: sticky; top: 1rem; align-self: start;
    /* Drop the drawer's z-index:100 — as a permanent rail it must sit below the
       overlay (90) and the slide-in cart / menu drawers (100), not fight them
       (the rail comes later in the DOM, so equal z-index left it painting over
       the menu drawer). */
    z-index: 1;
    width: auto; height: auto; max-height: calc(100dvh - 2rem);
    transform: none; visibility: visible; overflow-y: auto; overflow-x: visible;
    background: transparent; box-shadow: none;
    padding: 1.5rem 0 2rem var(--om-gutter);
    scrollbar-width: thin;
  }
  /* The rail is permanent here — its toolbar toggle is only for the mobile drawer. */
  .outletmor-filter-trigger { display: none; }
  /* Drawer chrome is for the mobile sheet only. */
  .outletmor-catalog-filters .outletmor-drawer__top { padding: 0 0 1rem; border-bottom: 1px solid var(--om-line); }
  .outletmor-catalog-filters .outletmor-drawer__close { display: none; }
  .outletmor-catalog-filters .outletmor-filter-drawer__footer { display: none; }
  .outletmor-catalog-filters .outletmor-filter-drawer__body { flex: none; padding: 0; overflow: visible; }
  .outletmor-catalog-filters .outletmor-filter-drawer__body > section,
  .outletmor-catalog-filters .outletmor-filter-drawer__body .facet { padding: 1.1rem 0; }
  /* Re-expose the module's own "Filter By" heading + "Clear all" (both stripped
     in the mobile drawer, which supplies its own chrome). */
  #outletmor-filter.outletmor-catalog-filters #search_filters > .h6 {
    display: block !important; margin: 1.4rem 0 .2rem; padding: 0;
    color: var(--om-green-soft); font-size: .82rem; font-weight: 400;
    letter-spacing: .16em; text-transform: uppercase;
  }
  #outletmor-filter.outletmor-catalog-filters #search_filters .clear-all-wrapper { display: block !important; margin: .1rem 0 .4rem; }
  #outletmor-filter.outletmor-catalog-filters #search_filters .js-search-filters-clear-all {
    padding: .3rem 0; border: 0; background: transparent; color: var(--om-muted);
    font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px;
  }
  #outletmor-filter.outletmor-catalog-filters #search_filters .js-search-filters-clear-all .material-icons { display: none; }
  #outletmor-filter.outletmor-catalog-filters #search_filters .js-search-filters-clear-all:hover { color: var(--om-sale); }
}

/* ---------- Product grid ---------- */
#js-product-list .products, .products.row, .featured-products .products, .product-accessories .products {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(2px, .5vw, 8px);
  margin: 0; padding: 0; list-style: none;
}
#js-product-list .products > [class*='col-'], .products.row > [class*='col-'],
.featured-products .products > [class*='col-'], .product-accessories .products > [class*='col-'] {
  width: auto; max-width: none; padding: 0; margin: 0; flex: initial;
}
html[data-outletmor-columns='4'] #js-product-list .products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
html[data-outletmor-columns='6'] #js-product-list .products { grid-template-columns: repeat(6, minmax(0, 1fr)); }
html[data-outletmor-columns='8'] #js-product-list .products { grid-template-columns: repeat(8, minmax(0, 1fr)); }

.product-miniature.outletmor-product-card {
  position: relative; display: flex; flex-direction: column; width: auto; max-width: none;
  padding: 0; margin: 0 0 2.5rem; border: 0; border-radius: 0; background: transparent; box-shadow: none;
}
.outletmor-card__media { position: relative; overflow: hidden; background: var(--om-tile); }
.outletmor-card__img { display: block; aspect-ratio: 3 / 4; }
.outletmor-card__img img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .5s ease, opacity .2s ease; }
.outletmor-product-card:hover .outletmor-card__img img { transform: scale(1.03); }

.outletmor-card__badge {
  position: absolute; top: .8rem; right: .8rem; z-index: 2;
  padding: .15rem .3rem; border-radius: 0; background: #fff; color: var(--om-green-deep);
  font-size: .68rem; letter-spacing: .03em; box-shadow: var(--om-shadow-soft);
}
/* Same type and pill as the "New" badge — only the ground colour changes. */
.outletmor-card__badge--sale { right: auto; left: .8rem; background: #a7ff4f; }

/* Wishlist heart. blockwishlist (Vue) injects a `.wishlist-button` div into a
   `.thumbnail-container` inside every `.js-product-miniature`, then mounts its
   own `<button class="wishlist-button-add">` (a white circle + heart icon).
   `.outletmor-card__wishslot` is that injection target — kept out of the
   layout; only the button it receives is placed, bottom-right of the image. */
.outletmor-card__media .thumbnail-container,
.outletmor-card__wishslot {
  position: absolute !important; inset: 0; margin: 0 !important; padding: 0 !important;
  background: none !important; overflow: visible !important; pointer-events: none;
}
/* This build of blockwishlist injects the `<button class="wishlist-button-add">`
   straight into the `.thumbnail-container` (no intermediate `.wishlist-button`
   div), so the button itself has to re-enable pointer events that the slot
   turns off. */
.outletmor-card__media .wishlist-button,
.outletmor-card__media .wishlist-button-add { pointer-events: auto !important; }
.outletmor-card__media .wishlist-button-add {
  position: absolute !important; top: auto !important; left: auto !important;
  right: .7rem !important; bottom: .7rem !important; z-index: 4 !important;
  width: 2.15rem !important; height: 2.15rem !important; min-width: 0 !important;
  padding: 0 !important;
  background: none !important; box-shadow: none !important; border-radius: 0 !important;
}
.outletmor-card__media .wishlist-button-add i { color: var(--om-green-deep) !important; font-size: 1.1rem !important; }
/* blockwishlist's MutationObserver can re-inject on DOM changes — never show more than one */
.outletmor-card__media .wishlist-button ~ .wishlist-button { display: none !important; }

/* Size overlay — slides up over the base of the image on hover / focus. */
.outletmor-card__buy { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; margin: 0; }
.outletmor-card__panel {
  padding: .95rem 1rem 1.1rem; background: rgba(255, 255, 255, .98);
  border-top: 1px solid var(--om-line); text-align: center;
  transform: translateY(100%); opacity: 0; visibility: hidden;
  transition: transform .26s ease, opacity .26s ease, visibility 0s linear .26s;
}
.outletmor-product-card:hover .outletmor-card__panel,
.outletmor-card__buy:focus-within .outletmor-card__panel,
.outletmor-card__panel.is-options-open { transform: translateY(0); opacity: 1; visibility: visible; transition-delay: 0s; }
.outletmor-card__cta-label {
  display: block; margin-bottom: .55rem; color: var(--om-green-soft);
  font-size: .68rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
}
.outletmor-card__cta-label:empty { display: none; }
/* Per-section "Select a Colour"/"Select a Size" labels — desktop already
   names the sections elsewhere (colours sit in the card text, the panel only
   ever shows sizes), so these only show in the touch bottom sheet; see the
   @media (hover: none) overrides below. */
.outletmor-card__group-label, .outletmor-card__groups legend { display: none; }
.outletmor-card__group-label:empty { display: none; }
.outletmor-card__groups fieldset { padding: 0; margin: 0; border: 0; }
.outletmor-size-options { display: flex; flex-wrap: wrap; justify-content: center; gap: .15rem .75rem; }
.outletmor-size {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.7rem; padding: .35rem .2rem; border: 0; background: transparent;
  color: var(--om-green-soft); font-size: .85rem; letter-spacing: .04em; border-bottom: 1px solid transparent;
  text-align: center;
}
.outletmor-size[aria-pressed='true'] { color: var(--om-green-deep); border-bottom-color: var(--om-green-deep); }
.outletmor-size[data-unavailable='true'] { color: #c3c3bc; text-decoration: line-through; cursor: not-allowed; }
/* Hovering (or keyboard-focusing) an option gives it a light square ground —
   picking one adds to cart immediately (see pickSize), this is just the hint. */
.outletmor-size:hover:not(:disabled), .outletmor-size:focus-visible {
  background: var(--om-field); border-radius: 0;
}
.outletmor-card__onesize {
  display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; min-height: 0;
  padding: 0; border: 0; border-radius: 0; background: #fff; color: var(--om-green-deep);
}
.outletmor-card__onesize svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.outletmor-card__onesize:hover:not(:disabled) { background: var(--om-field); }
.outletmor-card__onesize:disabled { opacity: .5; cursor: not-allowed; }
.outletmor-card__status { margin: .5rem 0 0; min-height: .8rem; color: var(--om-muted); font-size: .68rem; }
.outletmor-card__status.is-error { color: var(--om-sale); }
.outletmor-product-card[aria-busy='true'] .outletmor-card__panel { opacity: .75; }
/* Touch-only bottom-sheet controls — styled in the (hover: none) block below. */
.outletmor-card__sheet-trigger, .outletmor-card__sheet-close { display: none; }
.outletmor-sheet-backdrop {
  position: fixed; inset: 0; z-index: 199; background: rgba(22, 17, 10, .5);
  opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility 0s linear .28s;
}
.outletmor-sheet-backdrop.is-visible { opacity: 1; visibility: visible; transition-delay: 0s; }

/* The card's own add-to-cart is now the bulk "Variations" drawer (below), so
   the hover buy-panel no longer slides up — the form stays in the DOM only as
   the POST target / no-JS fallback. The customization-only card keeps its
   panel (it has no [data-outletmor-buy]). */
.outletmor-card__buy[data-outletmor-buy] .outletmor-card__panel { display: none; }

/* ---------- Card: bulk add-to-cart trigger (right of the info block) ---------- */
.outletmor-card__bulk {
  position: absolute; top: .55rem; right: .4rem; z-index: 4;
  display: inline-grid; place-items: center; width: 2.3rem; height: 2.3rem;
  padding: 0; border: 0; border-radius: 0;
  background: var(--om-green-deep); color: #fff;
  box-shadow: var(--om-shadow-soft);
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.outletmor-card__bulk svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.outletmor-card__bulk:hover { background: var(--om-gold); color: #fff; transform: translateY(-1px); }

/* ---------- Bulk "Variations" drawer ---------- */
.outletmor-bulk-backdrop {
  position: fixed; inset: 0; z-index: 199; background: rgba(22, 17, 10, .5);
  opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility 0s linear .28s;
}
.outletmor-bulk-backdrop.is-visible { opacity: 1; visibility: visible; transition-delay: 0s; }
.outletmor-bulk-drawer {
  position: fixed; left: 50%; bottom: 0; z-index: 200;
  /* Fixed height on every breakpoint — the drawer never resizes as you switch
     colour tabs or open it on a product with more/fewer options; the body
     scrolls inside. Desktop: a hard 42rem (clamped on short viewports).
     Mobile overrides to 70dvh below. */
  width: min(34rem, 100vw); height: min(42rem, 85vh);
  display: flex; flex-direction: column;
  background: var(--om-paper); border-radius: 0;
  box-shadow: 0 -22px 64px rgba(22, 17, 10, .28);
  transform: translateX(-50%) translateY(101%); visibility: hidden;
  transition: transform .34s cubic-bezier(.25, .8, .25, 1), visibility 0s linear .34s;
}
.outletmor-bulk-drawer.is-open { transform: translateX(-50%) translateY(0); visibility: visible; transition-delay: 0s; }
.outletmor-bulk-drawer::before {
  content: ''; position: absolute; top: .55rem; left: 50%; transform: translateX(-50%);
  width: 2.5rem; height: .28rem; border-radius: 0; background: var(--om-line);
}
/* Header = the product itself (image + name + price) + a close ✕. No separate
   "Variations" title bar — every spare pixel goes to the attribute list. It's
   also the swipe handle on mobile (bindBulkSwipe), so it owns the vertical
   gesture (touch-action:none) and clears the grab handle (padding-top). */
.outletmor-bulk-drawer__head {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: .8rem;
  align-items: center;
  padding: 1.4rem clamp(1.1rem, 3vw, 1.6rem) .85rem;
  border-bottom: 1px solid var(--om-line);
  touch-action: none; -webkit-user-select: none; user-select: none;
}
.outletmor-bulk-drawer__img { width: 3rem; aspect-ratio: 3 / 4; object-fit: cover; background: var(--om-tile); }
.outletmor-bulk-drawer__img[hidden] { display: none; }
.outletmor-bulk-drawer__meta { min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.outletmor-bulk-drawer__name {
  margin: 0; font-size: .88rem; color: var(--om-green-soft); line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.outletmor-bulk-drawer__price { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .4rem; }
.outletmor-bulk-drawer__now { color: var(--om-gold-deep); font-size: 1rem; font-weight: 500; }
.outletmor-bulk-drawer__price del { color: var(--om-muted); font-size: .78rem; }
.outletmor-bulk-drawer__min { margin: 0; color: var(--om-muted); font-size: .72rem; letter-spacing: .02em; }
.outletmor-bulk-drawer__close {
  align-self: start; display: grid; place-items: center;
  width: 2rem; height: 2rem; margin: -.35rem -.35rem 0 0; padding: 0;
  border: 0; background: transparent; color: var(--om-green-soft);
}
.outletmor-bulk-drawer__close svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.outletmor-bulk-drawer__body { flex: 1; overflow-y: auto; padding: .5rem clamp(1.25rem, 3vw, 1.75rem) 1.5rem; }

.outletmor-bulk-tabs { padding-top: .9rem; }
.outletmor-bulk-tabs__label, .outletmor-bulk-rows__label {
  display: block; margin-bottom: .6rem; color: var(--om-green-soft);
  font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
}
.outletmor-bulk-tabs__strip { display: flex; flex-wrap: wrap; gap: .5rem; }
.outletmor-bulk-tab {
  position: relative; display: inline-flex; align-items: center; gap: .45rem;
  min-height: 2.4rem; padding: .35rem .8rem; border: 1px solid var(--om-line); border-radius: 0;
  background: #fff; color: var(--om-ink); font-size: .82rem;
}
.outletmor-bulk-tab[aria-pressed='true'] { border-color: var(--om-green-deep); box-shadow: inset 0 0 0 1px var(--om-green-deep); }
.outletmor-bulk-tab__dot { width: 1.1rem; height: 1.1rem; border: 1px solid rgba(0, 0, 0, .2); background-size: cover; background-position: center; }
.outletmor-bulk-tab__count {
  color: #fff; background: var(--om-gold); border-radius: 0;
  font-size: .62rem; font-weight: 600; line-height: 1; padding: .12rem .32rem;
}
.outletmor-bulk-tab__count:empty { display: none; }

.outletmor-bulk-rows { padding-top: 1.3rem; }
.outletmor-bulk-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem 0; border-bottom: 1px solid var(--om-line);
}
.outletmor-bulk-row__label { display: inline-flex; align-items: center; gap: .55rem; min-width: 0; }
.outletmor-bulk-row__sw {
  flex: none; width: 1.15rem; height: 1.15rem;
  border: 1px solid rgba(0, 0, 0, .2); background-size: cover; background-position: center;
}
.outletmor-bulk-row__text { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.outletmor-bulk-row__name { min-width: 0; font-size: .9rem; color: var(--om-ink); }
.outletmor-bulk-row.is-unavailable .outletmor-bulk-row__name { color: #c3c3bc; text-decoration: line-through; }
.outletmor-bulk-row__meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; color: var(--om-muted); }
.outletmor-bulk-row__meta.is-out { color: var(--om-sale); }
.outletmor-bulk-row__qty { flex: 0 0 auto; }
.outletmor-bulk-drawer__status { margin: 1rem 0 0; min-height: .9rem; color: var(--om-muted); font-size: .76rem; }
.outletmor-bulk-drawer__status.is-error { color: var(--om-sale); }

.outletmor-bulk-drawer__foot {
  padding: 1.1rem clamp(1.25rem, 3vw, 1.75rem) calc(1.3rem + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--om-line); background: var(--om-green-wash);
}
.outletmor-bulk-drawer__totals { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .75rem; }
.outletmor-bulk-drawer__totals span { color: var(--om-green-soft); font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; }
.outletmor-bulk-drawer__totals strong { color: var(--om-green-soft); font-size: 1.2rem; font-weight: 500; }
.outletmor-bulk-drawer__totalwrap { display: inline-flex; align-items: baseline; gap: .5rem; }
.outletmor-bulk-drawer__totalwrap del { color: var(--om-muted); font-size: .82rem; }
.outletmor-bulk-drawer__totalwrap del[hidden] { display: none; }
.outletmor-bulk-drawer__foot .outletmor-button[disabled] { opacity: .45; cursor: not-allowed; }

/* Mobile: the fixed height is 70% of the viewport instead. */
@media (max-width: 640px) {
  .outletmor-bulk-drawer {
    width: 100vw;
    height: 70vh; height: 70dvh;
    border-radius: 0;
  }
}

/* ---------- Card text: name + heart, price, colour swatches ---------- */
.outletmor-card__info { position: relative; display: flex; flex-direction: column; padding: .8rem 2.9rem .3rem .5rem; }
.outletmor-card__headline { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.outletmor-card__name {
  margin: 0; font-size: .9rem; font-weight: 400; line-height: 1.3; color: var(--om-green-soft);
  letter-spacing: normal; text-transform: none; /* immune to any section-title rule */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  min-height: 2.6em; /* reserve two lines so prices line up across a row */
}
.outletmor-card__name a { color: inherit; }
.outletmor-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; margin-top: .3rem; font-size: .88rem; }
.outletmor-price .price { color: var(--om-ink); font-weight: 400; }
.outletmor-price .regular-price { color: var(--om-muted); font-size: .8rem; text-decoration: line-through; }
.outletmor-saving { padding: .12rem .45rem; border-radius: 0; background: var(--om-green-wash); color: var(--om-gold-deep); font-size: .64rem; letter-spacing: .02em; }

/* Colour swatches in the text area — clicking one switches the card image. */
.outletmor-card__colors { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }
.outletmor-card__colors:empty { display: none; }
/* Desktop shows colours in the card text; the sheet copy is touch-only. */
.outletmor-card__colors--sheet { display: none; }
.outletmor-color { position: relative; width: 1.05rem; height: 1.05rem; padding: 0; border: 0; background: transparent; cursor: pointer; }
.outletmor-color > span {
  display: block; width: 100%; height: 100%; border: 1px solid rgba(0, 0, 0, .22);
  background-position: center; background-size: cover; font-size: 0;
}
.outletmor-color[aria-pressed='true']::after {
  content: ''; position: absolute; left: -1px; right: -1px; bottom: -4px; height: 1.5px; background: var(--om-green-deep);
}
.outletmor-color[data-unavailable='true'] { opacity: .4; cursor: not-allowed; }
.outletmor-color[data-unavailable='true']::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; transform: rotate(-45deg);
}
[data-om-cover-img].is-swapping { opacity: .3; }

/* ---------- "Added to your bag" toast (built from the card, no server round trip) ---------- */
.outletmor-add-toast {
  position: fixed; z-index: 300; top: 1rem; right: 1rem; width: min(23rem, calc(100vw - 2rem));
  padding: 1.25rem; background: #fff; border: 1px solid var(--om-line); box-shadow: var(--om-shadow);
  opacity: 0; transform: translateY(-.5rem); transition: opacity .25s ease, transform .25s ease;
}
.outletmor-add-toast.is-visible { opacity: 1; transform: translateY(0); }
.outletmor-add-toast__close {
  position: absolute; top: .8rem; right: .8rem; width: 1.8rem; height: 1.8rem; display: grid; place-items: center;
  padding: 0; border: 0; background: transparent; color: var(--om-green-soft);
}
.outletmor-add-toast__close svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
.outletmor-add-toast__title {
  margin: 0 2rem .9rem 0; color: var(--om-green-soft); font-size: .9rem; letter-spacing: .08em; text-transform: uppercase;
}
.outletmor-add-toast__body { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; align-items: start; }
.outletmor-add-toast__img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: var(--om-tile); }
.outletmor-add-toast__img[hidden] { display: none; }
.outletmor-add-toast__lines { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.outletmor-add-toast__name { font-size: .9rem; font-weight: 400; color: var(--om-green-soft); }
.outletmor-add-toast__price { font-size: .88rem; color: var(--om-ink); }
.outletmor-add-toast__attrs { margin-top: .2rem; font-size: .8rem; color: var(--om-muted); }
.outletmor-add-toast__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: 1.15rem; }
.outletmor-add-toast__btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.9rem; padding: .6rem .4rem;
  border: 1px solid var(--om-green-deep); background: #fff; color: var(--om-green-deep);
  font-size: .68rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; text-align: center;
}
.outletmor-add-toast__btn--primary { background: var(--om-green-deep); color: #fff; }
.outletmor-add-toast__btn:hover { background: var(--om-green-deep); color: #fff; }
.outletmor-add-toast__btn--primary:hover { background: #fff; color: var(--om-green-deep); }
.outletmor-add-toast.is-error { border-color: var(--om-sale); }
.outletmor-add-toast.is-error .outletmor-add-toast__title { color: var(--om-sale); }
.outletmor-add-toast__handle { display: none; }

.product-flags, .product-miniature .highlighted-informations { display: none; }

/* Infinite scroll: the theme auto-loads the next page, so the numbered pager is
   kept only as a no-JS fallback and a source for the "next" link. */
#js-product-list[data-outletmor-infinite] .pagination { display: none; }
.outletmor-infinite {
  min-height: 1.5rem; padding: 2rem var(--om-gutter) 3rem; text-align: center;
  color: var(--om-muted); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
}
.outletmor-infinite:empty { min-height: 3rem; padding: 1.5rem; }

/* ---------- Filter drawer ---------- */
.outletmor-filter-drawer__body { flex: 1; padding: .4rem clamp(1.25rem, 3vw, 1.75rem) 1.5rem; overflow-y: auto; }
.outletmor-filter-drawer__body > section, .outletmor-filter-drawer .facet {
  padding: 1.4rem 0; margin: 0; border: 0; border-top: 1px solid var(--om-line);
}
.outletmor-filter-drawer__body > section:first-child { border-top: 0; }
.outletmor-sort-options h2, .outletmor-filter-drawer .facet-title, .outletmor-filter-drawer .h6 {
  margin: 0 0 1rem; padding: 0; color: var(--om-green-soft); font-size: .82rem; font-weight: 400;
  letter-spacing: .16em; text-transform: uppercase;
}
/* ---- Order by: a native <select> dropdown ---- */
.outletmor-sort-select {
  width: 100%; min-height: 2.6rem; padding: .5rem 2.4rem .5rem 1rem; margin: 0;
  border: 1px solid var(--om-pill-line); border-radius: 0;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234a453d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: .8rem;
  color: var(--om-green-soft); font-size: .82rem; line-height: 1.2;
  appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer;
}
.outletmor-sort-select:hover { border-color: var(--om-green-deep); }
.outletmor-sort-select:focus-visible { outline: 2px solid var(--om-green); outline-offset: 2px; }
.outletmor-sort-select::-ms-expand { display: none; }

/* ---- Filter options: pills ----
   Every facet value is a rounded pill that wraps across rows; the active one
   fills dark. Colour facets are pills whose ground IS the colour. Marca /
   Disponibilidad and the Precio slider are the exceptions. Selectors stay
   double-id (#outletmor-filter #search_filters) to outweigh the classic
   theme.css leftover core still auto-loads. */
#outletmor-filter #search_filters .facet ul,
#outletmor-filter #search_filters .facet .collapse {
  display: flex !important; flex-wrap: wrap; gap: .5rem;
  padding: 0; margin: 0; list-style: none; height: auto; visibility: visible; overflow: visible;
}
#outletmor-filter #search_filters .facet li { margin: 0; padding: 0; width: auto; max-width: 100%; float: none; }

/* Label text + its (N) count never split across two lines. */
#outletmor-filter #search_filters .facet label,
#outletmor-filter #search_filters .facet label a,
#outletmor-filter #search_filters .facet .magnitude {
  max-width: none; white-space: nowrap; overflow: visible; text-overflow: clip;
}

/* Default: every facet value is a pill. */
#outletmor-filter #search_filters .facet label {
  display: inline-flex !important; align-items: center; gap: .35rem; width: auto; min-height: 2.4rem;
  padding: .4rem 1rem; margin: 0; border: 1px solid var(--om-pill-line); border-radius: 0;
  background: none; color: var(--om-green-soft); font-size: .82rem; line-height: 1.2; text-align: center;
  text-transform: none; cursor: pointer;
}
#outletmor-filter #search_filters .facet label:hover { border-color: var(--om-green-deep); }
#outletmor-filter #search_filters .facet label a {
  display: inline-flex; align-items: center; margin: 0; padding: 0; border: 0;
  color: inherit; font: inherit; line-height: inherit; text-decoration: none;
}
#outletmor-filter #search_filters .facet label.active,
#outletmor-filter #search_filters .facet label.active a,
#outletmor-filter #search_filters .facet label:has(input:checked),
#outletmor-filter #search_filters .facet label:has(input:checked) a {
  background: var(--om-green-deep); border-color: var(--om-green-deep); color: #fff;
}
#outletmor-filter #search_filters .facet input { position: absolute; opacity: 0; pointer-events: none; }
#outletmor-filter #search_filters .facet .custom-checkbox,
#outletmor-filter #search_filters .facet .custom-radio,
#outletmor-filter #search_filters .facet label .color { display: none !important; }
#outletmor-filter #search_filters .facet .magnitude { opacity: .7; font-size: .78rem; line-height: inherit; margin-left: .05rem; font-weight: 400; }
#outletmor-filter #search_filters .facet label.active .magnitude,
#outletmor-filter #search_filters .facet label:has(input:checked) .magnitude { opacity: .85; }

/* Disponibilidad (availability) — plain wrapping text, not pills. */
#outletmor-filter #search_filters .facet[data-type="availability"] ul,
#outletmor-filter #search_filters .facet[data-type="availability"] .collapse { gap: .3rem 1.1rem; }
#outletmor-filter #search_filters .facet[data-type="availability"] .facet-label {
  display: inline-flex !important; align-items: baseline; min-height: 0;
  padding: .2rem 0; border: 0; border-radius: 0; background: none !important;
  color: var(--om-green-soft); font-size: .9rem; line-height: 1.35; text-align: left;
}
#outletmor-filter #search_filters .facet[data-type="availability"] .facet-label a { white-space: normal; overflow: visible; }
#outletmor-filter #search_filters .facet[data-type="availability"] .facet-label:hover { color: var(--om-green-deep); }
#outletmor-filter #search_filters .facet[data-type="availability"] .facet-label.active,
#outletmor-filter #search_filters .facet[data-type="availability"] .facet-label:has(input:checked) {
  background: none !important; color: var(--om-green-deep); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}

/* Marca (manufacturer) — a collapsible one-per-row list, collapsed by default
   with a `+` on the section title (`−` when open). initBrandFacet() in
   outletmor.js toggles `.is-open`; it opens automatically when a brand is
   already selected. */
#outletmor-filter #search_filters .facet[data-type="manufacturer"] > .facet-title {
  display: flex !important; align-items: center; justify-content: space-between; gap: .5rem;
  margin: 0; cursor: pointer; -webkit-user-select: none; user-select: none;
}
#outletmor-filter #search_filters .facet[data-type="manufacturer"] > .facet-title::after {
  content: '+'; flex: none; font-size: 1.15rem; font-weight: 400; line-height: 1; color: var(--om-green-soft);
}
#outletmor-filter #search_filters .facet[data-type="manufacturer"].is-open > .facet-title::after { content: '\2212'; }
#outletmor-filter #search_filters .facet[data-type="manufacturer"] > .facet-title:hover { color: var(--om-green-deep); }

#outletmor-filter #search_filters .facet[data-type="manufacturer"] ul,
#outletmor-filter #search_filters .facet[data-type="manufacturer"] .collapse {
  display: flex !important; flex-direction: column; flex-wrap: nowrap; gap: 0;
  margin-top: .75rem;
}
#outletmor-filter #search_filters .facet[data-type="manufacturer"]:not(.is-open) ul,
#outletmor-filter #search_filters .facet[data-type="manufacturer"]:not(.is-open) .collapse { display: none !important; }
#outletmor-filter #search_filters .facet[data-type="manufacturer"] li { width: 100%; }

/* Each brand is a checkbox row: [box] name … (N). The row toggles the hidden
   `input[data-search-url]` (label `for=`), which core's own change handler
   turns into an `updateFacets` AJAX refresh. */
#outletmor-filter #search_filters .facet[data-type="manufacturer"] .facet-label {
  display: flex !important; align-items: center; gap: .6rem; width: 100%; min-height: 0;
  padding: .5rem 0; border: 0; border-radius: 0; background: none !important;
  color: var(--om-ink); font-size: .86rem; line-height: 1.3; text-align: left; cursor: pointer;
}
#outletmor-filter #search_filters .facet[data-type="manufacturer"] li + li .facet-label { border-top: 1px solid var(--om-line); }
#outletmor-filter #search_filters .facet[data-type="manufacturer"] .custom-checkbox,
#outletmor-filter #search_filters .facet[data-type="manufacturer"] .custom-radio {
  display: inline-flex !important; flex: none; position: relative;
  /* Reset ps_facetedsearch front.css's `top: -7px` layout compensation — with
     this theme's flex `.facet-label` the box is already centred, so the -7px
     just lifts it 7px above the brand text. */
  top: 0; margin: 0;
  width: 1.05rem; height: 1.05rem; align-items: center; justify-content: center;
  border: 1.5px solid var(--om-pill-line); background: #fff;
  transition: background .12s ease, border-color .12s ease;
}
#outletmor-filter #search_filters .facet[data-type="manufacturer"] .custom-checkbox { border-radius: 0; }
#outletmor-filter #search_filters .facet[data-type="manufacturer"] .custom-radio { border-radius: 0; }
#outletmor-filter #search_filters .facet[data-type="manufacturer"] .custom-checkbox > span,
#outletmor-filter #search_filters .facet[data-type="manufacturer"] .custom-radio > span { display: none !important; }
#outletmor-filter #search_filters .facet[data-type="manufacturer"] .facet-label:hover .custom-checkbox,
#outletmor-filter #search_filters .facet[data-type="manufacturer"] .facet-label:hover .custom-radio { border-color: var(--om-green-deep); }
#outletmor-filter #search_filters .facet[data-type="manufacturer"] .facet-label.active .custom-checkbox,
#outletmor-filter #search_filters .facet[data-type="manufacturer"] .facet-label:has(input:checked) .custom-checkbox,
#outletmor-filter #search_filters .facet[data-type="manufacturer"] .facet-label.active .custom-radio,
#outletmor-filter #search_filters .facet[data-type="manufacturer"] .facet-label:has(input:checked) .custom-radio {
  background: var(--om-green-deep); border-color: var(--om-green-deep);
}
#outletmor-filter #search_filters .facet[data-type="manufacturer"] .facet-label.active .custom-checkbox::after,
#outletmor-filter #search_filters .facet[data-type="manufacturer"] .facet-label:has(input:checked) .custom-checkbox::after {
  content: ''; width: .28rem; height: .5rem; margin-top: -.09rem;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
#outletmor-filter #search_filters .facet[data-type="manufacturer"] .facet-label.active .custom-radio::after,
#outletmor-filter #search_filters .facet[data-type="manufacturer"] .facet-label:has(input:checked) .custom-radio::after {
  content: ''; width: .4rem; height: .4rem; border-radius: 0; background: #fff;
}
#outletmor-filter #search_filters .facet[data-type="manufacturer"] .facet-label a {
  display: flex; flex: 1; min-width: 0; align-items: baseline; justify-content: space-between; gap: .5rem;
  /* theme.css puts `margin-top: .4375rem` + its own font-size on every
     `.facet-label a` — reset so the name sits centred against the checkbox. */
  margin: 0; padding: 0; font: inherit; line-height: inherit;
  color: inherit; background: none !important; border: 0; white-space: normal; overflow: visible;
}
#outletmor-filter #search_filters .facet[data-type="manufacturer"] .facet-label .magnitude {
  flex: none; margin: 0; opacity: .5; font-size: .76rem; line-height: inherit;
}
#outletmor-filter #search_filters .facet[data-type="manufacturer"] .facet-label:hover,
#outletmor-filter #search_filters .facet[data-type="manufacturer"] .facet-label:hover a { color: var(--om-green-deep); }
#outletmor-filter #search_filters .facet[data-type="manufacturer"] .facet-label.active,
#outletmor-filter #search_filters .facet[data-type="manufacturer"] .facet-label.active a,
#outletmor-filter #search_filters .facet[data-type="manufacturer"] .facet-label:has(input:checked),
#outletmor-filter #search_filters .facet[data-type="manufacturer"] .facet-label:has(input:checked) a {
  color: var(--om-green-deep); font-weight: 500;
}

/* Precio: PrestaShop's own price-range slider — full width, not a pill list.
   The jQuery-UI handles are centred on their position, so the end handles stick
   out ~.6rem past a 100%-wide track; the `<li>` gets that much side padding (and
   clips anything beyond it) so the slider can never push a horizontal scrollbar
   in the narrow rail. */
#outletmor-filter #search_filters .facet .faceted-slider { display: block !important; width: 100%; }
#outletmor-filter #search_filters .facet .faceted-slider > li {
  display: block; width: 100%; max-width: 100%; padding: 0 1rem; overflow-x: clip;
}
#outletmor-filter #search_filters .facet .faceted-slider .ui-slider,
#outletmor-filter #search_filters .facet .faceted-slider > li > p { width: 100%; margin-left: 0; margin-right: 0; }

/* Colour facets — and ONLY these — are pills whose ground is the colour itself.
   paintColorFacets() sets --facet-color and adds [data-om-light] to the pale
   ones so the label text flips to dark and stays readable. */
#outletmor-filter #search_filters .facet .facet-label--color {
  display: inline-flex !important; align-items: center; gap: .35rem; min-height: 2.3rem;
  padding: .4rem 1rem; border: 1px solid rgba(0, 0, 0, .14); border-radius: 0;
  background: var(--facet-color, var(--om-field)); color: #fff; font-size: .82rem; font-weight: 400;
  text-decoration: none;
}
#outletmor-filter #search_filters .facet .facet-label--color a,
#outletmor-filter #search_filters .facet .facet-label--color:hover,
#outletmor-filter #search_filters .facet .facet-label--color:hover a { color: #fff; text-decoration: none; }
#outletmor-filter #search_filters .facet .facet-label--color .magnitude { opacity: .8; }
#outletmor-filter #search_filters .facet .facet-label--color[data-om-light],
#outletmor-filter #search_filters .facet .facet-label--color[data-om-light] a,
#outletmor-filter #search_filters .facet .facet-label--color[data-om-light]:hover,
#outletmor-filter #search_filters .facet .facet-label--color[data-om-light]:hover a { color: var(--om-green-deep); }
#outletmor-filter #search_filters .facet .facet-label--color[data-om-light] { border-color: rgba(0, 0, 0, .22); }
#outletmor-filter #search_filters .facet .facet-label--color.active,
#outletmor-filter #search_filters .facet .facet-label--color:has(input:checked) {
  background: var(--facet-color, var(--om-field));
  outline: 2px solid var(--om-green-deep); outline-offset: 2px; border-color: transparent;
}
#outletmor-filter #search_filters .facet .collapse:not(.in) { display: flex; height: auto; visibility: visible; }
#outletmor-filter #search_filters .facet .title,
#outletmor-filter #search_filters .clear-all-wrapper,
#outletmor-filter #search_filters > .h6,
#outletmor-filter #search_filters .collapse-icons { display: none !important; }
#outletmor-filter #search_filters { padding: 0; border: 0; box-shadow: none; }
#outletmor-filter #search_filters .facet-dropdown { padding: 0; }
#outletmor-filter #search_filters .facet-dropdown .select-title { display: flex; justify-content: space-between; width: 100%; min-height: 2.7rem; padding: .5rem 1rem; border: 1px solid var(--om-pill-line); border-radius: 0; }
.outletmor-filter-drawer__footer {
  display: grid; grid-template-columns: 1fr 1fr; gap: .7rem;
  padding: 1rem clamp(1.25rem, 3vw, 1.75rem) 1.35rem; border-top: 1px solid var(--om-line); background: #fff;
}

/* ---------- Cart drawer ---------- */
.outletmor-cart-drawer__items { flex: 1; overflow-y: auto; padding: 0 clamp(1.25rem, 3vw, 1.75rem); }
.outletmor-cart-drawer__clear { display: flex; justify-content: flex-end; padding: .6rem 0 0; }
.outletmor-cart-clear {
  padding: .3rem 0; border: 0; background: transparent; color: var(--om-muted);
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px;
}
.outletmor-cart-clear:hover { color: var(--om-sale); }
.outletmor-cart-clear__confirm { display: none; }
.outletmor-cart-clear.is-confirming { color: var(--om-sale); }
.outletmor-cart-clear.is-confirming .outletmor-cart-clear__default { display: none; }
.outletmor-cart-clear.is-confirming .outletmor-cart-clear__confirm { display: inline; }
.outletmor-cart-line {
  display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 1rem;
  padding: 1.2rem 0; border-bottom: 1px solid var(--om-line);
  transition: opacity .2s ease;
}
.outletmor-cart-line.is-removing { opacity: .35; pointer-events: none; }
/* quantity is bumped optimistically — only the price/stepper of that one line
   dims briefly while the batched update syncs (no drawer-wide spinner). */
.outletmor-cart-line.is-pending .outletmor-cart-line__price,
.outletmor-cart-line.is-pending .outletmor-quantity { opacity: .45; transition: opacity .12s ease; }
.outletmor-quantity a[aria-disabled='true'] { opacity: .35; pointer-events: none; }
.outletmor-cart-line__image { display: block; aspect-ratio: 3 / 4; background: var(--om-tile); }
.outletmor-cart-line__image img { width: 100%; height: 100%; object-fit: cover; }
.outletmor-cart-line__body { min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.outletmor-cart-line__head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.outletmor-cart-line__name { font-size: .92rem; color: var(--om-green-soft); line-height: 1.3; }
.outletmor-cart-line__remove { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .3rem; color: var(--om-muted); font-size: .74rem; }
.outletmor-cart-line__remove svg { width: .9rem; height: .9rem; fill: none; stroke: currentColor; stroke-width: 1.5; }
.outletmor-cart-line__attr { margin: 0; color: var(--om-muted); font-size: .76rem; }
.outletmor-cart-line__bottom { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin-top: .35rem; }
.outletmor-cart-line__price { color: var(--om-green-soft); font-size: .92rem; }
.outletmor-quantity {
  display: inline-flex; align-items: center; border: 1px solid var(--om-pill-line); border-radius: 0; overflow: hidden; background: #fff;
}
.outletmor-quantity a, .outletmor-quantity span, .outletmor-quantity button, .outletmor-quantity input {
  display: grid; place-items: center; width: 2.1rem; height: 2.1rem; padding: 0; margin: 0; border: 0;
  background: transparent; color: var(--om-green-soft); font: inherit; line-height: 1;
}
.outletmor-quantity span, .outletmor-quantity input { width: 2.6rem; font-size: .84rem; text-align: center; }
.outletmor-quantity button { font-size: 1.05rem; cursor: pointer; }
.outletmor-quantity a:hover, .outletmor-quantity button:hover { background: var(--om-field); }
.outletmor-quantity input { -moz-appearance: textfield; appearance: textfield; }
.outletmor-quantity input::-webkit-outer-spin-button,
.outletmor-quantity input::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
.outletmor-quantity input:focus { outline: 0; }

.outletmor-cart-drawer__foot { background: var(--om-green-wash); }
.outletmor-cart-note { border-top: 1px solid rgba(40, 32, 18, .12); }
.outletmor-cart-note summary {
  display: flex; align-items: center; justify-content: space-between; padding: 1rem clamp(1.25rem, 3vw, 1.75rem);
  color: var(--om-green-soft); font-size: .92rem; cursor: pointer; list-style: none;
}
.outletmor-cart-note summary::-webkit-details-marker { display: none; }
.outletmor-cart-note summary::after { content: '⌄'; font-size: 1.1rem; line-height: 1; }
.outletmor-cart-note[open] summary::after { content: '⌃'; }
.outletmor-cart-note textarea {
  display: block; width: calc(100% - 2 * clamp(1.25rem, 3vw, 1.75rem)); min-height: 4rem; margin: 0 clamp(1.25rem, 3vw, 1.75rem) 1rem;
  padding: .65rem .8rem; border: 1px solid var(--om-pill-line); border-radius: 0; background: #fff; font-size: .85rem; resize: vertical;
}
.outletmor-cart-drawer__summary { padding: 1.1rem clamp(1.25rem, 3vw, 1.75rem) 1.5rem; }
.outletmor-cart-voucher { margin: 0 0 .8rem; font-size: .85rem; color: var(--om-green-soft); }
.outletmor-cart-voucher a, .outletmor-cart-voucher summary { color: var(--om-green-deep); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.outletmor-cart-voucher summary { list-style: none; display: inline; }
.outletmor-cart-voucher summary::-webkit-details-marker { display: none; }
.outletmor-cart-voucher form { display: flex; gap: .4rem; margin-top: .6rem; }
.outletmor-cart-voucher input[type='text'] { flex: 1; min-width: 0; height: 2.6rem; padding: 0 .8rem; border: 1px solid var(--om-pill-line); border-radius: 0; background: #fff; }
.outletmor-cart-voucher button { flex: 0 0 auto; padding: 0 1.1rem; border: 1px solid var(--om-green-deep); border-radius: 0; background: var(--om-green-deep); color: #fff; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }
.outletmor-cart-voucher__error { margin: .5rem 0 0; color: var(--om-sale); font-size: .78rem; }
.outletmor-cart-voucher__error:empty { display: none; }
.outletmor-cart-vouchers { list-style: none; margin: 0 0 .8rem; padding: 0; }
.outletmor-cart-vouchers li {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .5rem .75rem; margin-bottom: .4rem; background: var(--om-green-wash);
  color: var(--om-green-soft); font-size: .82rem;
}
.outletmor-cart-vouchers a { flex: 0 0 auto; color: var(--om-green-deep); font-size: 1.1rem; line-height: 1; text-decoration: none; }
.outletmor-cart-freeship { margin: 0 0 .9rem; color: var(--om-green-soft); font-size: .85rem; }
.outletmor-cart-drawer__totals { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .4rem; }
.outletmor-cart-drawer__totals span:first-child { color: var(--om-green-soft); font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; }
.outletmor-cart-drawer__totals strong { color: var(--om-green-soft); font-size: 1.2rem; font-weight: 400; }
.outletmor-cart-drawer__summary small { display: block; margin-bottom: 1rem; color: var(--om-muted); font-size: .74rem; }
.outletmor-cart-drawer__summary small a { text-decoration: underline; }
.outletmor-cart-empty { min-height: 16rem; display: grid; place-content: center; gap: 1.1rem; padding: 2rem; text-align: center; }
.outletmor-cart-empty p { max-width: 15rem; margin: 0 auto; color: var(--om-muted); }

/* Drawer opens instantly after an add; its contents refresh behind this state. */
.outletmor-cart-drawer.is-refreshing .outletmor-cart-drawer__items,
.outletmor-cart-drawer.is-refreshing .outletmor-cart-drawer__foot { opacity: .4; pointer-events: none; transition: opacity .15s ease; }
.outletmor-cart-drawer.is-refreshing::after {
  content: ''; position: absolute; top: 1.55rem; left: 50%; z-index: 4; width: 1.1rem; height: 1.1rem; margin-left: -.55rem;
  border: 2px solid rgba(30, 24, 14, .2); border-top-color: var(--om-green-deep); border-radius: 50%;
  animation: om-spin .7s linear infinite;
}
@keyframes om-spin { to { transform: rotate(360deg); } }

/* ---------- Product page ---------- */
#product #content-wrapper, #product #content, #product .product-container { max-width: none; padding: 0; }
#product .product-container, #product .product-cover, #product .product-images { box-shadow: none; }
#product #main .row.product-container {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(21rem, .7fr); align-items: start;
  gap: clamp(2rem, 6vw, 6rem); padding: 1rem var(--om-gutter) clamp(3rem, 8vw, 7rem);
}
#product .product-container > .col-md-6 { width: auto; max-width: none; padding: 0; }
#product .product-cover { position: relative; margin: 0; background: var(--om-tile); }
#product .product-cover img { width: 100%; max-height: none; object-fit: cover; }
#product .scroll-box-arrows, #product .product-images[hidden] { display: none; }

/* ---- Gallery carousel ---- */
.outletmor-gallery { position: relative; background: var(--om-tile); overflow: hidden; }
.outletmor-gallery__track {
  display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
}
.outletmor-gallery__track::-webkit-scrollbar { display: none; }
.outletmor-gallery__slide { flex: 0 0 100%; scroll-snap-align: start; margin: 0; }
/* `height:auto` so `aspect-ratio` wins over the img's width/height attributes
   (a presentation hint that would otherwise force the full pixel height). */
.outletmor-gallery__slide img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
@media (min-width: 641px) {
  /* Desktop: the cover + the thumbnail strip together fill the visible height
     (viewport minus the sticky header). The strip is a fixed slice; the cover
     takes the rest. */
  #product .outletmor-gallery { --om-gallery-h: clamp(30rem, calc(100vh - 6rem), 52rem); }
  #product .outletmor-gallery__thumbs {
    box-sizing: border-box; flex: none; height: 7rem;
    gap: .55rem; padding: .7rem clamp(1rem, 3vw, 2.75rem);
  }
  #product .outletmor-gallery__thumb { width: auto; height: 100%; aspect-ratio: 3 / 4; }
  #product .outletmor-gallery__slide img {
    aspect-ratio: auto;
    height: calc(var(--om-gallery-h) - 7rem);
  }
  /* lift the discount badge clear of the thumbnail strip */
  #product .outletmor-gallery .outletmor-cover-discount {
    bottom: calc(7rem + clamp(1rem, 3vw, 2.5rem));
  }
}
.outletmor-gallery__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0;
  background: rgba(255, 255, 255, .82); color: var(--om-green-deep); opacity: 0; transition: opacity .2s ease;
}
.outletmor-gallery:hover .outletmor-gallery__arrow { opacity: 1; }
.outletmor-gallery__arrow[disabled] { opacity: 0 !important; pointer-events: none; }
.outletmor-gallery__arrow--prev { left: .5rem; }
.outletmor-gallery__arrow--next { right: .5rem; }
.outletmor-gallery__arrow svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.outletmor-gallery__dots { position: absolute; left: 0; right: 0; bottom: .9rem; z-index: 3; display: flex; justify-content: center; gap: .4rem; }
.outletmor-gallery__dots button {
  width: .45rem; height: .45rem; padding: 0; border: 0; border-radius: 0; background: rgba(30, 24, 14, .3);
}
.outletmor-gallery__dots button[aria-current='true'] { background: var(--om-green-deep); }
/* The thumbnail strip replaces the dots as the position indicator. */
.outletmor-gallery:has(.outletmor-gallery__thumb) .outletmor-gallery__dots { display: none; }

.outletmor-gallery__thumbs {
  display: flex; gap: .4rem; padding: .5rem clamp(1rem, 3vw, 2.75rem);
  background: var(--om-paper);
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.outletmor-gallery__thumbs::-webkit-scrollbar { display: none; }
.outletmor-gallery__thumb {
  flex: 0 0 auto; width: 3.2rem; height: 4rem; padding: 0; border: 0; border-radius: 0;
  background: var(--om-tile); cursor: pointer; opacity: .5;
  transition: opacity .15s ease;
}
.outletmor-gallery__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.outletmor-gallery__thumb:hover { opacity: .8; }
.outletmor-gallery__thumb[aria-current='true'] { opacity: 1; outline: 1.5px solid var(--om-green-deep); outline-offset: -1.5px; }
.outletmor-gallery__slide img { cursor: zoom-in; }

/* Fullscreen image viewer — opened by clicking a cover (initGallery). */
.outletmor-lightbox {
  position: fixed; inset: 0; z-index: 210;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3.5rem);
  background: rgba(11, 9, 6, .97);
}
.outletmor-lightbox[hidden] { display: none; }
.outletmor-lightbox__stage { margin: 0; display: flex; max-width: 100%; max-height: 100%; }
.outletmor-lightbox__stage img {
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: calc(100vh - clamp(2rem, 8vw, 7rem));
  object-fit: contain;
}
.outletmor-lightbox button {
  position: absolute; display: grid; place-items: center;
  width: 2.9rem; height: 2.9rem; padding: 0; border: 0; border-radius: 0;
  background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer;
  transition: background .2s ease;
}
.outletmor-lightbox button:hover { background: rgba(255, 255, 255, .22); }
.outletmor-lightbox button[hidden] { display: none; }
.outletmor-lightbox svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.outletmor-lightbox__close { top: clamp(.75rem, 2.5vw, 1.75rem); right: clamp(.75rem, 2.5vw, 1.75rem); }
.outletmor-lightbox__nav { top: 50%; transform: translateY(-50%); }
.outletmor-lightbox__nav--prev { left: clamp(.5rem, 2.5vw, 1.75rem); }
.outletmor-lightbox__nav--next { right: clamp(.5rem, 2.5vw, 1.75rem); }

.outletmor-cover-discount {
  position: absolute; right: clamp(1rem, 3vw, 2.75rem); bottom: clamp(1rem, 3vw, 2.75rem); z-index: 4;
  display: grid; place-items: center; width: clamp(4.75rem, 13vw, 7.5rem); aspect-ratio: 1;
  border-radius: 0; background: #a7ff4f; color: var(--om-green-deep);
  font-size: clamp(1.35rem, 3vw, 2rem); font-weight: 300; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

#product .product-information { position: sticky; top: calc(var(--om-header) + 1rem); padding-top: clamp(.5rem, 3vw, 2.5rem); }
#product .h1, #product h1.h1 { margin: 0 0 .5rem; color: var(--om-green-soft); font-size: clamp(1.6rem, 2.6vw, 2.4rem); font-weight: 400; letter-spacing: -.01em; line-height: 1.1; }
#product .product-prices { margin: 0 0 1.4rem; }
#product .product-price, #product .current-price span { color: var(--om-ink); font-size: 1.15rem; font-weight: 400; }
#product .regular-price { color: var(--om-muted); font-size: .95rem; text-decoration: line-through; }
#product .current-price .discount {
  display: inline-block; margin-left: .5rem; padding: .15rem .6rem; border-radius: 0;
  background: var(--om-lime); color: var(--om-green-deep); font-size: .82rem; font-weight: 600;
  text-transform: none; font-variant-numeric: tabular-nums;
}
/* Flex + order so colour swatches always sit above size (and any other)
   selectors regardless of the attribute-group order coming from the back office. */
#product .product-variants { display: flex; flex-direction: column; border-bottom: 1px solid var(--om-line); }
#product .product-variants > .product-variants-item { order: 2; padding: 1.2rem 0; margin: 0; border-top: 1px solid var(--om-line); }
#product .product-variants > .product-variants-item--color { order: 1; }
#product .product-variants .control-label { display: block; margin-bottom: .6rem; color: var(--om-green-soft); font-size: .72rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
#product .product-variants ul { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; list-style: none; }
#product .product-variants li { margin: 0; }
#product .input-color, #product .input-radio { position: absolute; opacity: 0; pointer-events: none; }
#product .custom-radio, #product .radio-label {
  display: inline-flex; align-items: center; justify-content: center; min-width: 2.8rem; min-height: 2.8rem;
  padding: .35rem .7rem; margin: 0; border: 1px solid var(--om-pill-line); border-radius: 0;
  background: #fff; color: var(--om-green-soft); box-shadow: none; cursor: pointer;
}
#product .input-radio:checked + span, #product .input-radio:checked + .radio-label {
  background: var(--om-green-deep); color: #fff; border-color: var(--om-green-deep); outline: 0;
}
/* Out of stock for the chosen colour — greyed, struck through, not selectable
   (set by initPdpVariants, mirroring the catalogue card behaviour). */
#product .product-variants li.is-unavailable .radio-label,
#product .product-variants li.is-unavailable span,
#product .input-radio:disabled + span,
#product .input-radio:disabled + .radio-label {
  color: var(--om-pill-line); border-color: var(--om-line);
  text-decoration: line-through; cursor: not-allowed; opacity: .6;
}
#product .product-variants select option:disabled { color: #c3c3bc; }
/* Colour swatch — same square as the catalogue card, underline on the selected one. */
#product .product-variants li:has(.input-color) { margin: 0 .25rem .35rem 0; }
#product .product-variants label:has(.input-color) { position: relative; display: inline-flex; padding-bottom: 6px; cursor: pointer; }
#product .product-variants .color {
  position: relative; display: block; width: 1.2rem; height: 1.2rem; min-width: 0; padding: 0; margin: 0;
  border: 1px solid rgba(0, 0, 0, .22); border-radius: 0; box-shadow: none;
  background-size: cover; background-position: center;
}
#product .product-variants .color .attribute-name, #product .product-variants .color .sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
#product .input-color:checked + .color::after {
  content: ''; position: absolute; left: -1px; right: -1px; bottom: -6px; height: 1.5px; background: var(--om-green-deep);
}

#product .product-add-to-cart { margin-top: 1.4rem; }
#product .product-quantity { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; padding: 1.2rem 0 0; }
#product .product-quantity .qty { width: auto; }
#product .product-quantity .add { flex: 1; }
/* Same rounded stepper the cart drawer uses, just a little larger here. */
#product .outletmor-quantity a, #product .outletmor-quantity button,
#product .outletmor-quantity span, #product .outletmor-quantity input { width: 2.9rem; height: 2.9rem; }
#product .outletmor-quantity span, #product .outletmor-quantity input { width: 3rem; font-size: .92rem; }
#product .outletmor-quantity input { border: 0 !important; box-shadow: none !important; background: transparent !important; }
/* PrestaShop's touchspin wraps the input — flatten its box and hide its arrows. */
#product .outletmor-quantity .bootstrap-touchspin { display: contents; }
#product .outletmor-quantity .input-group-btn,
#product .outletmor-quantity .input-group-btn-vertical,
#product .outletmor-quantity .bootstrap-touchspin-up,
#product .outletmor-quantity .bootstrap-touchspin-down { display: none !important; }
#product .add-to-cart {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; min-height: 3.1rem;
  padding: .8rem 1.5rem; border: 1px solid var(--om-green-deep); border-radius: 0;
  background: var(--om-green-deep); color: #fff; box-shadow: none;
  font-size: .76rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
#product .add-to-cart:hover:not([disabled]) { background: #fff; color: var(--om-green-deep); }
#product .add-to-cart[disabled] { opacity: .45; }
/* JS-mounted, mobile-only (shown inside the @media (max-width: 640px) block) */
.outletmor-pdp-fab, .outletmor-pdp-sheet-backdrop, .outletmor-pdp-sheet-close, .outletmor-sticky-buy { display: none; }
#product .add-to-cart .material-icons { display: none; }

/* ---------- Product page: add-to-cart → batch "Variations" drawer ----------
   `outletmor-pdp-bulk.tpl` drops a hidden card-shaped host + a visible CTA into
   `.product-actions`; the CTA opens the same drawer the listing cards use. The
   native quantity stepper + min-qty line are then redundant. */
#product .product-actions:has(.outletmor-pdp-buy) .product-add-to-cart > .control-label,
#product .product-actions:has(.outletmor-pdp-buy) .product-quantity,
#product .product-actions:has(.outletmor-pdp-buy) .product-minimal-quantity { display: none; }
.outletmor-pdp-buy { position: relative; margin-top: 1.4rem; }
.outletmor-pdp-buy__cta { margin: 0; }
#product .product-description, #product .product-additional-info, #product .tabs { border: 0; box-shadow: none; }
#product .tabs { padding: 0 var(--om-gutter) clamp(3rem, 6vw, 5rem); }
#product .tabs .nav-tabs { border-color: var(--om-line); }
#product .tabs .nav-tabs .nav-link { padding: .8rem 1rem .8rem 0; color: var(--om-muted); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; border: 0; }
#product .tabs .nav-tabs .nav-link.active { color: var(--om-green-deep); border-bottom: 2px solid var(--om-green-deep); }
#product .product-flags { display: none; }

/* blockreassurance on the product page (displayReassurance → its own
   `blockreassurance_product` template, which the theme doesn't template-
   override) — normalise the module's boxy default to a clean theme list:
   small icon + uppercase title + muted line, one row per point. */
#product .blockreassurance_product {
  border-top: 1px solid var(--om-line); margin-top: clamp(1.5rem, 4vw, 2.5rem); padding: 1.4rem 0 0;
  display: flex; flex-direction: column; gap: .9rem;
}
#product .blockreassurance_product > div:not(.clearfix) {
  display: grid; grid-template-columns: 1.9rem minmax(0, 1fr); align-items: center; gap: 0 .75rem;
  margin: 0; padding: 0; border: 0; float: none; width: auto;
}
#product .blockreassurance_product .clearfix { display: none; }
#product .blockreassurance_product .item-product {
  grid-row: 1 / 3; display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 0;
}
#product .blockreassurance_product .item-product svg,
#product .blockreassurance_product .item-product img {
  width: 1.6rem !important; height: 1.6rem !important; margin: 0 !important;
}
#product .blockreassurance_product .item-product svg [fill]:not([fill='none']) { fill: var(--om-green-deep) !important; }
#product .blockreassurance_product .item-product svg [stroke]:not([stroke='none']) { stroke: var(--om-green-deep) !important; }
#product .blockreassurance_product .block-title {
  grid-column: 2; align-self: end;
  color: var(--om-green-soft) !important; font-size: .74rem !important; font-weight: 600 !important;
  letter-spacing: .08em; text-transform: uppercase; line-height: 1.3;
}
#product .blockreassurance_product p {
  grid-column: 2; align-self: start; margin: 0;
  color: var(--om-muted) !important; font-size: .78rem !important; font-weight: 400; line-height: 1.4;
}
/* a point with only a title (no body copy) centres on the icon */
#product .blockreassurance_product > div:not(.clearfix):not(:has(p)) { grid-template-rows: auto; }
#product .blockreassurance_product > div:not(.clearfix):not(:has(p)) .block-title { align-self: center; }

/* ---------- Cart + checkout pages ---------- */
#cart #content-wrapper, #checkout #content-wrapper { width: 100%; max-width: none; padding: 0; }
#cart .cart-grid, #checkout .checkout-container { max-width: none; margin: 0; padding: clamp(1.5rem, 4vw, 3.5rem) var(--om-gutter); }
#cart .cart-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(18rem, .6fr); gap: clamp(1.5rem, 4vw, 3.5rem); }
#checkout .checkout-container { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(19rem, .55fr); gap: 2rem; }
#cart .cart-grid-body, #cart .cart-grid-right, #checkout .checkout-step, #checkout .cart-summary {
  border: 1px solid var(--om-line); border-radius: 0; box-shadow: none;
}
#cart .cart-grid-right, #checkout .cart-summary { height: max-content; }
#cart .cart-item { padding: 1.4rem; border-color: var(--om-line); }
#cart .cart-summary-line { padding: .65rem 1.2rem; }
#cart .cart-summary-line.cart-total { padding: 1.2rem; border-color: var(--om-line); }
#cart .cart-detailed-actions .btn, #checkout .continue, #checkout .btn-primary, #cart .checkout a.btn {
  min-height: 3rem; border: 1px solid var(--om-green-deep); border-radius: 0;
  background: var(--om-green-deep); color: #fff; box-shadow: none;
  font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
#checkout .checkout-step .step-title { padding: 0 0 1rem; border-color: var(--om-line); color: var(--om-green-soft); letter-spacing: .06em; text-transform: uppercase; }

/* ---------- Static pages, forms, account ---------- */
#main .page-content, #main .page-header, #main .blockreassurance { padding-left: var(--om-gutter); padding-right: var(--om-gutter); box-shadow: none; }
#main .page-content { max-width: 64rem; padding-top: 1rem; padding-bottom: 4rem; margin: 0 auto; }
.page-my-account #content .links a, .block-categories { border-color: var(--om-line); }
.form-control, input.form-control, select.form-control, textarea.form-control {
  border: 1px solid var(--om-pill-line); border-radius: 0; box-shadow: none; color: var(--om-ink);
}
.form-control:focus { border-color: var(--om-green); box-shadow: none; }
.btn-primary, .btn-secondary {
  border-radius: 0; border: 1px solid var(--om-green-deep); background: var(--om-green-deep); color: #fff;
  font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; box-shadow: none;
}
.btn-secondary { background: #fff; color: var(--om-green-deep); border-color: var(--om-pill-line); }
.btn-primary:hover { background: #fff; color: var(--om-green-deep); }
/* Order detail (/pedido): the tax rate + tax amount line called out from the
   other subtotals — muted, like a sub-total, so it reads as supporting detail
   under the regular subtotal rows without competing with the grand Total. */
.om-order-tax { color: var(--om-muted); }
.om-order-tax .om-order-tax__rate { font-weight: 400; opacity: .85; }

/* ---------- /brands index ----------
   NOTE the !important on the grid: classic theme.css ships
   `#manufacturer #main ul { display:flex; flex-wrap:wrap }` (specificity
   2-0-1) which otherwise clobbers this grid and leaves a ragged right edge. */
#main.outletmor-brands, .outletmor-brands { padding: clamp(1.5rem, 4vw, 3rem) var(--om-gutter) clamp(3rem, 7vw, 5rem); }
.outletmor-brands__heading {
  margin: 0 0 clamp(1.25rem, 3vw, 2rem); color: var(--om-green-soft);
  font-family: var(--om-font); font-weight: 400; font-size: clamp(1.6rem, 3.4vw, 2.6rem); letter-spacing: -.01em;
}
.outletmor-brands__empty { margin: 0; color: var(--om-muted); }
.outletmor-brands-grid {
  display: grid !important;
  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  gap: 0; align-items: stretch;
  width: 100%; margin: 0; padding: 0; list-style: none;
  border-top: 1px solid var(--om-line); border-left: 1px solid var(--om-line);
}
.outletmor-brand-tile {
  width: auto; min-width: 0; margin: 0; padding: 0; background: var(--om-paper);
  border-right: 1px solid var(--om-line); border-bottom: 1px solid var(--om-line);
}
.outletmor-brand-tile__link {
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  height: 100%; padding: clamp(1rem, 2vw, 1.6rem) .75rem; text-align: center;
  color: var(--om-green-soft); transition: background .18s ease;
}
.outletmor-brand-tile__link:hover { background: var(--om-tile); }
.outletmor-brand-tile__logo { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 3 / 2; }
.outletmor-brand-tile__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.outletmor-brand-tile__initial {
  display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 0;
  background: var(--om-green-wash); color: var(--om-green-deep); font-size: 1rem; font-weight: 500; text-transform: uppercase;
}
.outletmor-brand-tile__name { color: var(--om-green-soft); font-size: .8rem; line-height: 1.3; }
.outletmor-brand-tile__count { color: var(--om-muted); font-size: .68rem; letter-spacing: .02em; }
@media (max-width: 1200px) { .outletmor-brands-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } }
@media (max-width: 900px) { .outletmor-brands-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
@media (max-width: 640px) {
  .outletmor-brands-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .outletmor-brand-tile__count { display: none; }
}

/* ---------- Footer ---------- */
/* On checkout, classic theme.css does `body#checkout #footer {padding:.9375rem;
   background:#fff}` — strip it so the `<footer id="footer">` wrapper matches
   every other page (just the global `#footer{padding-top:2.5rem}`), letting
   `.outletmor-footer` be the full-bleed footer. */
body#checkout #footer { padding: 2.5rem 0 0; background: none; color: inherit; box-shadow: none; }
.js-checkout-terms { padding: 1.25rem var(--om-gutter); color: var(--om-muted); font-size: .78rem; }
.outletmor-footer { margin-top: clamp(3rem, 7vw, 6rem); border-top: 1px solid var(--om-line); background: var(--om-field); }

/* Top band — newsletter + social side by side, trust icons full-width below */
.outletmor-footer__top {
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  padding: clamp(2rem, 4vw, 3rem) var(--om-gutter);
  border-bottom: 1px solid var(--om-line);
}
.outletmor-footer__top #block-reassurance { grid-column: 1 / -1; }
.outletmor-footer__top .row { display: block; margin: 0; }
.outletmor-footer__top [class*='col-'] { width: auto; max-width: none; padding: 0; float: none; }

.outletmor-newsletter { min-width: 0; }
.outletmor-newsletter.block_newsletter { background: none; padding: 0; margin: 0; max-width: none; width: auto; }
.outletmor-newsletter__label { margin: 0 0 .9rem; color: var(--om-green-soft); font-size: 1rem; font-weight: 400; letter-spacing: -.01em; }
/* White field + button. !important beats classic theme.css
   (`.block_newsletter form button[type=submit]{position:absolute…}` etc.) */
.outletmor-newsletter__form { position: relative; display: flex; align-items: center; gap: .5rem; max-width: 27rem; }
.outletmor-newsletter__form input[type='email'] {
  flex: 1; min-width: 0; height: 2.6rem; padding: 0 .9rem; margin: 0;
  border: 1px solid var(--om-line) !important; border-radius: 0; background: #fff !important; box-shadow: none !important;
  color: var(--om-ink); font-size: .9rem; min-width: 0;
}
.outletmor-newsletter__form input[type='email']:focus { outline: 0 !important; border-color: var(--om-green-soft) !important; }
.outletmor-newsletter__form button {
  position: static !important; flex: 0 0 auto; height: 2.6rem; padding: 0 1.1rem; margin: 0;
  border: 1px solid var(--om-line) !important; border-radius: 0; background: #fff !important; box-shadow: none !important;
  color: var(--om-green-deep); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; transition: color .2s ease, border-color .2s ease;
}
.outletmor-newsletter__form button:hover { color: var(--om-green); border-color: var(--om-green-soft) !important; }
.outletmor-newsletter__note { margin: .8rem 0 0; color: var(--om-muted); font-size: .72rem; line-height: 1.5; }
.outletmor-newsletter__msg { margin: .8rem 0 0; font-size: .8rem; }
.outletmor-newsletter__msg.is-error { color: var(--om-sale); }
.outletmor-newsletter__msg.is-ok { color: var(--om-green); }

.outletmor-social { min-width: 0; justify-self: end; }
.outletmor-footer .block-social { text-align: right; }
.outletmor-footer .block-social ul { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.outletmor-footer .block-social ul li {
  width: 1.4rem; height: 1.4rem; margin: 0; cursor: pointer;
  background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: contain;
  border: 0; border-radius: 0;
  filter: brightness(0); /* force the sprite icon solid black */
  opacity: .8; transition: opacity .18s ease;
}
.outletmor-footer .block-social ul li:hover { background-color: transparent; opacity: 1; }
.outletmor-footer .block-social ul li a { display: block; width: 100%; height: 100%; overflow: hidden; text-indent: 110%; white-space: nowrap; }

/* Link columns */
.outletmor-footer__links {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 2rem clamp(1.5rem, 3vw, 3rem);
  padding: clamp(2rem, 4vw, 3rem) var(--om-gutter);
}
.outletmor-footer__links > * { min-width: 0; }
.outletmor-footer__links [class*='col-'] { width: auto; max-width: none; padding: 0; float: none; }
.outletmor-footer__links .row { display: contents; }
.outletmor-footer__links .collapse { display: block !important; }
.outletmor-footer__links .navbar-toggler, .outletmor-footer__links .collapse-icons,
.outletmor-footer__links [data-toggle='collapse'] { display: none !important; }

.outletmor-footer-col { min-width: 0; }
.outletmor-footer-col__title { margin: 0 0 .85rem; color: var(--om-green-soft); font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.outletmor-footer-col__title a { color: inherit; }
.outletmor-footer h3, .outletmor-footer .h3, .outletmor-footer h4, .outletmor-footer .h4 {
  margin: 0 0 .85rem; color: var(--om-green-soft); font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.outletmor-footer-col ul, .outletmor-footer__links ul { padding: 0; margin: 0; list-style: none; background: none; }
.outletmor-footer-col li, .outletmor-footer__links li { margin: 0 0 .45rem; padding: 0; border: 0; font-weight: 400; }
.outletmor-footer-col li a, .outletmor-footer__links li a { color: var(--om-green-soft); font-size: .84rem; }
.outletmor-footer-col li a:hover, .outletmor-footer__links li a:hover { color: var(--om-green-deep); }
.outletmor-footer-contact { color: var(--om-green-soft); font-size: .84rem; line-height: 1.7; }
.outletmor-footer-contact a { color: inherit; }

/* Trust strip (blockreassurance) */
.outletmor-footer #block-reassurance ul { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; margin: 0; padding: 0; list-style: none; }
.outletmor-footer #block-reassurance li { margin: 0; padding: 0; border: 0; }
.outletmor-footer #block-reassurance .block-reassurance-item { display: flex; align-items: center; gap: .55rem; padding: 0; }
.outletmor-footer #block-reassurance img { width: 1.3rem; height: auto; margin: 0; }
.outletmor-footer #block-reassurance span, .outletmor-footer #block-reassurance .h6 {
  margin: 0; color: var(--om-muted); font-size: .7rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase;
}

.outletmor-footer__base {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem 1rem;
  padding: 1.1rem var(--om-gutter); border-top: 1px solid var(--om-line); color: var(--om-muted); font-size: .7rem;
}
.outletmor-footer__base #block-reassurance { display: none; } /* duplicate of the strip above (displayFooterAfter) */

/* ---------- Misc native cleanup ---------- */
#_desktop_cart, #_mobile_cart, .blockcart-modal-open #blockcart-modal { display: none; }
/* Sticky must live on #header, not its .outletmor-header child: #header's own
   box wraps that child exactly (the drawers/tabbar inside it are all
   position:fixed and add no flow height), so it had zero scroll runway and
   the "sticky" child just scrolled away with the page from pixel one. #header
   sits directly in <main>, which is always taller, giving it real runway. */
#header { position: sticky; top: 0; z-index: 60; color: var(--om-ink); box-shadow: none; }
#header a { color: var(--om-ink); }
.block-category, .featured-products, .product-accessories { padding: 0 var(--om-gutter); box-shadow: none; }

/* ---------- Product-page brand + related-products bands ---------- */
.outletmor-brand { display: inline-flex; align-items: center; margin: 0 0 .9rem; }
.outletmor-brand__logo { display: block; max-width: 9rem; max-height: 2.6rem; object-fit: contain; }
.outletmor-brand__name { color: var(--om-muted); font-size: .72rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }

.outletmor-related-products { margin-top: clamp(2.75rem, 6vw, 5.5rem); }
.outletmor-related-products > section {
  margin: 0; padding-top: clamp(2rem, 5vw, 3.25rem); padding-bottom: .5rem; border-top: 1px solid var(--om-line);
}
.outletmor-related-products > section:first-child { border-top: 0; padding-top: 0; }
/* Section headings only — must NOT reach the product-card <h2> titles that
   sit deeper inside these same wrappers (those follow .outletmor-card__name,
   exactly like the category listing page). */
.featured-products > h2,
.featured-products > .h2,
.featured-products .products-section-title,
.outletmor-home-band__head > h2,
.product-accessories > p.h5, .product-accessories > .h5, .product-accessories > .h2 {
  margin: 0; padding: 0 0 1.3rem; border: 0; color: var(--om-green-soft);
  font-size: .78rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
}

/* ---------- Homepage product rails (On sale / New arrivals / Best sellers) ---------- */
.page-home .featured-products {
  padding-top: clamp(2rem, 5vw, 3.25rem); padding-bottom: clamp(2rem, 5vw, 3.25rem);
  border-top: 1px solid var(--om-line);
}
.outletmor-home-band__head {
  display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap;
  gap: .5rem 1.5rem; margin-bottom: 1.3rem;
}
.outletmor-home-band__head h2 { padding-bottom: 0; }
.outletmor-home-band__all {
  flex: 0 0 auto; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--om-green-deep); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;
}
.outletmor-home-band__all:hover { color: var(--om-green); }

/* Homepage product rails as an arrow-scrolled strip — same interaction as the
   Brand Deals carousel (.obp). The card markup is unchanged; only the .products
   wrapper switches from grid to a horizontal flex scroller. */
.page-home .featured-products,
.page-home .obp {
  /* Lazy-render below-the-fold home sections: the browser skips their layout
     and paint until they scroll near the viewport. */
  content-visibility: auto;
  contain-intrinsic-size: auto 32rem;
}
/* …but the paint containment also makes each section a stacking context, which
   traps a card's `position:fixed` size/colour sheet (z-index 200, still inside
   the card) *below* the body-level backdrop (z-index 199). Drop the containment
   while any card sheet is open (body gets .outletmor-is-locked). */
body.outletmor-is-locked .page-home .featured-products,
body.outletmor-is-locked .page-home .obp {
  content-visibility: visible;
}
.outletmor-rail { padding-left: 0; padding-right: 0; }
.outletmor-rail .outletmor-home-band__head { padding: 0 var(--om-gutter); }
.outletmor-rail__viewport { position: relative; }
.outletmor-rail .products.outletmor-rail__track {
  display: flex; flex-wrap: nowrap; grid-template-columns: none;
  justify-content: flex-start; /* never `center`: it strands the first cards off the scrollable start */
  gap: clamp(.6rem, 1.4vw, 1.1rem);
  padding: 0 var(--om-gutter) .5rem;
  overflow-x: auto; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
}
.outletmor-rail .products.outletmor-rail__track::-webkit-scrollbar { display: none; }
/* flex-grow:1 so a short rail (3–4 products) stretches to fill a wide viewport;
   with enough products to overflow, the grow has no free space to act on and
   the cards stay at their base width and scroll. */
.outletmor-rail__track > .product-miniature {
  flex: 1 0 clamp(10.5rem, 44vw, 15rem);
  margin-bottom: 0;
}
.outletmor-rail__arrow {
  position: absolute; top: 37%; transform: translateY(-50%); z-index: 3;
  display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 0;
  border: 0; background: rgba(255, 255, 255, .92); color: var(--om-ink);
  box-shadow: var(--om-shadow-soft, 0 8px 26px rgba(31, 38, 15, .12)); cursor: pointer;
  transition: background .2s ease, opacity .25s ease;
}
.outletmor-rail__arrow:hover { background: #fff; }
.outletmor-rail__arrow svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.outletmor-rail__arrow--prev { left: clamp(.25rem, 1vw, .75rem); }
.outletmor-rail__arrow--next { right: clamp(.25rem, 1vw, .75rem); }
.outletmor-rail__arrow[hidden] { display: none; }

/* ---------- Homepage: customer-assurance strip ----------
   Reuses the Brand Deals / product-rail carousel (data-om-rail → initProductRails,
   .outletmor-rail__viewport + .outletmor-rail__arrow): prev/next arrows and a
   horizontal scroll strip, no auto-drift. Single item set. */
.outletmor-assurance {
  margin: 0; padding: clamp(1.75rem, 4vw, 2.75rem) 0;
  border-top: 1px solid var(--om-line);
}
.outletmor-assurance__track {
  display: flex; flex-wrap: nowrap; align-items: flex-start;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  padding: 0 var(--om-gutter) .5rem; margin: 0; list-style: none;
  overflow-x: auto; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
}
.outletmor-assurance__track::-webkit-scrollbar { display: none; }
.outletmor-assurance__item {
  flex: 1 0 clamp(8.5rem, 18vw, 11rem);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .55rem;
}
.outletmor-assurance__item svg {
  width: 1.8rem; height: 1.8rem; flex: none;
  fill: none; stroke: var(--om-gold-deep); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.outletmor-assurance__item span {
  color: var(--om-ink); font-size: .8rem; line-height: 1.35;
}
.outletmor-assurance .outletmor-rail__arrow { top: 50%; }
@media (max-width: 620px) {
  .outletmor-assurance__item { flex-basis: 7rem; }
  .outletmor-assurance__item span { font-size: .78rem; }
}

/* ---------- Homepage: category entries (image + eyebrow + title + CTA) ---------- */
.outletmor-cat-entries {
  padding: 0;
}
.outletmor-cat-entries .outletmor-rail__track {
  display: flex; flex-wrap: nowrap; gap: clamp(1rem, 2.4vw, 2rem);
  padding: 0 var(--om-gutter) .5rem; margin: 0; list-style: none;
  overflow-x: auto; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
}
.outletmor-cat-entries .outletmor-rail__track::-webkit-scrollbar { display: none; }
.outletmor-cat-card {
  flex: 1 0 clamp(15rem, 78vw, 24rem);
  display: flex; min-width: 0;
}
/* Promo-card style: image banner on top, then a white body with the eyebrow /
   title / copy and an outlined "Ver ofertas" button at the bottom-right. */
.outletmor-cat-card__link {
  display: flex; flex-direction: column; width: 100%;
  background: var(--om-paper); border: 1px solid var(--om-line);
  color: var(--om-ink); text-decoration: none;
  transition: border-color .2s ease;
}
.outletmor-cat-card__link:hover { border-color: var(--om-pill-line); }
.outletmor-cat-card__img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 10;
  object-fit: cover; object-position: 50% 30%;
}
.outletmor-cat-card__body {
  flex: 1;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
}
.outletmor-cat-card__eyebrow {
  margin: 0 0 .55rem; color: var(--om-ink);
  font-size: .8rem; font-weight: 700; letter-spacing: 0; text-transform: none;
}
.outletmor-cat-card__title {
  margin: 0; color: var(--om-ink); line-height: 1.12;
  font-size: clamp(1.35rem, 2.4vw, 1.7rem); font-weight: 500; font-style: normal; letter-spacing: -.01em;
}
.outletmor-cat-card__text {
  margin: .6rem 0 0; color: var(--om-muted); font-size: .9rem; line-height: 1.55;
}
.outletmor-cat-card__cta {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem); align-self: flex-end;
  padding: .7rem 1.15rem;
  border: 1px solid var(--om-ink); background: var(--om-paper);
  color: var(--om-ink); font-size: .78rem; font-weight: 600; letter-spacing: .03em;
  transition: background .2s ease, color .2s ease;
}
.outletmor-cat-card__cta svg { width: .8rem; height: .8rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.outletmor-cat-card__link:hover .outletmor-cat-card__cta { background: var(--om-ink); color: #fff; }
.outletmor-cat-card__link:focus-visible { outline: 2px solid var(--om-ink); outline-offset: 2px; }
.outletmor-cat-entries .outletmor-rail__arrow { top: 50%; }

/* ---------- Site-wide floating WhatsApp contact button ---------- */
.outletmor-whatsapp {
  position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 70;
  display: grid; place-items: center;
  width: 3.25rem; height: 3.25rem;
  background: #25d366; color: #fff;
  box-shadow: 0 8px 24px rgba(22, 17, 10, .28);
  transition: background .2s ease, transform .12s ease, opacity .2s ease;
}
.outletmor-whatsapp svg { width: 1.85rem; height: 1.85rem; display: block; }
.outletmor-whatsapp:hover { background: #1da851; color: #fff; }
.outletmor-whatsapp:active { transform: scale(.94); }
.outletmor-whatsapp:focus-visible { outline: 2px solid var(--om-ink); outline-offset: 3px; }
/* Out of the way while a drawer / overlay owns the screen. */
body.outletmor-is-locked .outletmor-whatsapp { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .outletmor-whatsapp { transition: none; } }

/* ---------- Homepage: "why choose us" + B2B-intro custom-text blocks ---------- */
.page-home #custom-text,
.page-home .outletmor-b2b-intro {
  max-width: 64rem; margin: 0 auto; padding: clamp(2.5rem, 6vw, 4rem) var(--om-gutter);
  background: none; text-align: left; border-top: 1px solid var(--om-line);
}
/* B2B intro spans the full boxed width, like the category / assurance strips. */
.page-home .outletmor-b2b-intro { max-width: none; }
.page-home #custom-text > h1,
.page-home #custom-text > h2,
.page-home .outletmor-b2b-intro > h2 {
  margin: 0 0 1.6rem; color: var(--om-green-soft); text-align: center;
  font-size: .8rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
}
.page-home #custom-text h3 {
  margin: 2.2rem 0 .85rem; color: var(--om-ink);
  font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; text-transform: none;
}
.page-home #custom-text h3:first-of-type { margin-top: 0; }
.page-home #custom-text p,
.page-home .outletmor-b2b-intro p {
  margin: 0 0 1rem; color: var(--om-muted); font-size: .93rem; line-height: 1.75;
}
.page-home #custom-text ul,
.page-home .outletmor-b2b-intro ul {
  margin: 0 0 1.3rem; padding: 0; list-style: none;
}
.page-home #custom-text li,
.page-home .outletmor-b2b-intro li {
  position: relative; margin: 0 0 .65rem; padding-left: 1.4rem;
  color: var(--om-muted); font-size: .93rem; line-height: 1.65;
}
.page-home #custom-text li::before,
.page-home .outletmor-b2b-intro li::before {
  content: ""; position: absolute; left: .1rem; top: .58em;
  width: .42rem; height: .42rem; background: var(--om-green-deep); border-radius: 0;
}
.page-home #custom-text strong,
.page-home #custom-text .dark,
.page-home .outletmor-b2b-intro strong { color: var(--om-ink); font-weight: 600; }

/* B2B-intro: the "register as a professional" call-to-action */
.outletmor-b2b-intro__cta {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.1rem 1.75rem;
  margin-top: 2.2rem; padding: 1.5rem clamp(1.25rem, 3vw, 2rem);
  background: var(--om-green-wash); border-radius: 0;
}
.outletmor-b2b-intro__cta-text { flex: 1 1 16rem; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.outletmor-b2b-intro__cta-text strong { font-size: 1rem; }
.outletmor-b2b-intro__cta-text span { color: var(--om-muted); font-size: .88rem; line-height: 1.55; }
.outletmor-b2b-intro__cta .outletmor-button { flex: 0 0 auto; }
@media (max-width: 560px) {
  .outletmor-b2b-intro__cta { align-items: stretch; }
  .outletmor-b2b-intro__cta .outletmor-button { width: 100%; }
}

.alert { border-radius: 0; }
.modal-content { border: 0; border-radius: 0; box-shadow: var(--om-shadow); }
.outletmor-toast {
  position: fixed; z-index: 150; right: 1rem; bottom: 1rem; max-width: min(22rem, calc(100% - 2rem));
  padding: .8rem 1rem; background: var(--om-green-deep); color: #fff; box-shadow: var(--om-shadow);
  font-size: .82rem; opacity: 0; pointer-events: none; transform: translateY(1rem);
  transition: opacity .2s ease, transform .2s ease;
}
.outletmor-toast.is-visible { opacity: 1; transform: translateY(0); }
.outletmor-toast.is-error { background: var(--om-sale); }

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
  html[data-outletmor-columns='8'] #js-product-list .products { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  #js-product-list .products, .products.row, .featured-products .products, .product-accessories .products,
  html[data-outletmor-columns='6'] #js-product-list .products,
  html[data-outletmor-columns='8'] #js-product-list .products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .outletmor-nav { display: none; }
  #js-product-list .products, .products.row, .featured-products .products, .product-accessories .products,
  html[data-outletmor-columns] #js-product-list .products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #product #main .row.product-container { grid-template-columns: 1fr; gap: 1.5rem; }
  #product .product-information { position: static; }
  #cart .cart-grid, #checkout .checkout-container { grid-template-columns: 1fr; }
  .outletmor-footer__top { grid-template-columns: 1fr; }
  .outletmor-social { justify-self: start; }
  .outletmor-footer .block-social, .outletmor-footer .block-social ul { text-align: left; justify-content: flex-start; }
}
@media (max-width: 640px) {
  :root { --om-gutter: .8rem; --om-header: 3.7rem; --om-tabbar-height: 3.7rem; }
  /* The bottom tab bar already covers everything #header does (home, search,
     cart, category/menu, account — same data-outletmor-*-toggle attributes
     as the header icons, opening the same drawers), so on mobile the sticky
     top header is just redundant chrome eating screen space — hide it
     outright instead of leaving it sticky. */
  #header { display: none; }
  /* …except on the home page, where the header carries the brand logo over
     the hero — keep it visible there (still no top search row / account icon
     to stay compact; the bottom tab bar covers those). */
  body#index #header { display: block; }
  .outletmor-header__actions .outletmor-account { display: none; }
  .outletmor-search { display: none; }

  /* Slide the sticky header up out of view while scrolling down; JS
     (initHeaderAutoHide) toggles .outletmor-header-away, restoring it on
     scroll-up and near the top. */
  #header { transition: transform .28s ease; will-change: transform; }
  #header.outletmor-header-away { transform: translateY(-100%); }

  /* Boxed layout: the mobile hero is a contained banner too. */
  .outletmor-has-hero #wrapper { margin-top: 0; }
  .outletmor-has-hero .outletmorhero { height: auto; min-height: 16rem; max-height: 22rem; }
  .outletmor-tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0;
    /* Above the overlay (90) and the menu / search sheets (93) so those slide
       up from BEHIND the bar instead of over it (that pass-over was the flicker);
       still below the full-screen cart / filter drawers (100), which take over. */
    z-index: 95;
    height: var(--om-tabbar-height); padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--om-green-deep); border-top: 1px solid rgba(255, 255, 255, .12);
    /* Own compositor layer so an animating drawer near it doesn't repaint the bar. */
    transform: translateZ(0);
  }
  .outletmor-tabbar__item { position: relative; z-index: 1; color: rgba(255, 255, 255, .55); transition: color .2s ease; }
  .outletmor-tabbar__item:active { color: #fff; }
  .outletmor-tabbar__item[aria-expanded='true'] { color: #fff; }
  .outletmor-tabbar .outletmor-cart-count { background: var(--om-gold); color: var(--om-green-deep); }
  /* Capsule that slides behind the tapped / active tab. JS (initTabbarPill)
     sets its size once and drives the horizontal position. */
  .outletmor-tabbar__pill {
    position: absolute; left: 0; top: 50%; z-index: 0;
    width: 0; height: 2.25rem; transform: translate(0, -50%);
    border-radius: 999px; background: rgba(255, 255, 255, .16);
    opacity: 0; pointer-events: none;
    transition: transform .34s cubic-bezier(.34, 1.2, .4, 1), opacity .2s ease;
  }
  .outletmor-tabbar.is-pill-active .outletmor-tabbar__pill { opacity: 1; }
  #main { padding-bottom: var(--om-tabbar-height); }
  .outletmor-footer { padding-bottom: var(--om-tabbar-height); }
  /* Sit above the bottom tab bar; move left so it never covers the product-page
     FAB (which is bottom-right at the same height). */
  .outletmor-whatsapp {
    right: auto; left: var(--om-gutter);
    bottom: calc(var(--om-tabbar-height) + 1rem + env(safe-area-inset-bottom, 0px));
    width: 3rem; height: 3rem;
  }
  .outletmor-whatsapp svg { width: 1.7rem; height: 1.7rem; }
  #js-product-list .products, .products.row, .featured-products .products, .product-accessories .products,
  html[data-outletmor-columns] #js-product-list .products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2px; }
  /* On mobile the rail/carousel arrows show while the strip is idle and fade
     out as soon as the user starts scrolling it (JS toggles .is-scrolling). */
  .outletmor-rail.is-scrolling .outletmor-rail__arrow,
  .obp.is-scrolling .obp__arrow { opacity: 0; pointer-events: none; }
  .outletmor-rail__track > .product-miniature { flex-basis: 46vw; }
  .products-sort-order { display: none; }
  .outletmor-grid-view { display: none; }
  /* Filter and sort collapses to an icon-only button, sharing the row with
     the category pills instead of wrapping onto its own line. */
  .outletmor-filter-trigger { min-width: 2.4rem; padding: .4rem; gap: 0; }
  .outletmor-filter-trigger__label { display: none; }
  .outletmor-card__panel { padding: .7rem .5rem .85rem; }
  .outletmor-card__name { font-size: .82rem; }
  .outletmor-cart-drawer, .outletmor-filter-drawer, .outletmor-menu-drawer { width: 100%; }
  /* Nav menu + search: bottom sheets that sit ABOVE the tab bar (their bottom
     edge is at `--om-tabbar-height`, never over it), at a FIXED height so
     expanding a submenu scrolls inside instead of resizing the sheet, with a
     grab handle + drag-down-to-close header (JS: initSheetSwipe — same gesture
     as the bulk "Variations" drawer). */
  .outletmor-menu-drawer,
  .outletmor-search-sheet {
    top: auto; left: 0; right: 0;
    bottom: calc(var(--om-tabbar-height) + env(safe-area-inset-bottom, 0px));
    /* Below the tab bar (95): the sheet slides up out from behind it. Still
       above the overlay (90). */
    z-index: 93;
    width: 100%; height: 70dvh;
    max-height: calc(100dvh - var(--om-tabbar-height) - 1rem);
    transform: translateY(calc(100% + var(--om-tabbar-height) + env(safe-area-inset-bottom, 0px)));
    box-shadow: 0 -14px 48px rgba(22, 17, 10, .18);
    will-change: transform;
  }
  /* Search needs far less room than the nav menu — cap it at 40% of the view. */
  .outletmor-search-sheet { height: 40dvh; max-height: 40dvh; }
  .outletmor-menu-drawer.is-open,
  .outletmor-search-sheet.is-open { transform: translateY(0); }
  .outletmor-menu-drawer__body { flex: 1; min-height: 0; }
  .outletmor-menu-drawer .outletmor-drawer__top,
  .outletmor-search-sheet .outletmor-drawer__top {
    position: relative; flex: none; touch-action: none;
    padding-top: 1.7rem; border-bottom: 1px solid var(--om-line);
  }
  .outletmor-menu-drawer .outletmor-drawer__top::before,
  .outletmor-search-sheet .outletmor-drawer__top::before {
    content: ''; position: absolute; top: .6rem; left: 50%; transform: translateX(-50%);
    width: 2.4rem; height: .28rem; background: var(--om-line);
  }
  .outletmor-cart-line { grid-template-columns: 4.8rem minmax(0, 1fr); }
  #product .tabs .nav-tabs { display: flex; overflow-x: auto; overflow-y: hidden; }
  /* Bootstrap's clearfix ::after becomes a flex item taller than the bar, which,
     combined with overflow-x:auto (computes overflow-y to auto), shows a stray
     vertical scrollbar on the right. Neutralise it. */
  #product .tabs .nav-tabs::after { display: none; }

  /* Product page: full-bleed gallery, always-on arrows, persistent buy bar. */
  #product #main .row.product-container { padding-left: 0; padding-right: 0; gap: 0; }
  #product .product-information { padding: 1.5rem var(--om-gutter) 0; }
  #product .tabs { padding-top: 1.5rem; }
  /* brand / title / price sit above .product-information (outside its
     padding) — give them the same gutter so they don't hug the screen edge. */
  #product .product-container .outletmor-brand,
  #product .product-container .h1,
  #product .product-container > .row > .col-md-6 > h1,
  #product .product-container .product-prices {
    padding-left: var(--om-gutter); padding-right: var(--om-gutter);
  }
  #product .outletmor-gallery__arrow { opacity: 1; background: rgba(255, 255, 255, .68); width: 2.4rem; height: 2.4rem; }
  /* Cap the gallery so a portrait product photo doesn't push the buy button
     and details far below the fold — keep it within one mobile screen. */
  #product .outletmor-gallery__slide img {
    aspect-ratio: auto;
    height: 58vh;
    height: 58svh;
    max-height: 32rem;
    min-height: 18rem;
  }
  .outletmor-cover-discount { width: clamp(4rem, 21vw, 5.25rem); font-size: clamp(1.1rem, 4.6vw, 1.45rem); right: 1rem; bottom: 2.4rem; }
  #product #main { padding-bottom: var(--om-tabbar-height); }

  /* Buy sheet holds only the buy essentials — the share buttons + "write a
     review" block are lifted out into the page flow by initPdpBuySheet();
     give them a little breathing room where they land. */
  #product .product-information > .product-additional-info { margin: 1.75rem 0 0; }

  /* qty on its own row; add-to-cart + wishlist share the next row */
  #product .product-actions .product-quantity {
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .8rem;
  }
  #product .product-actions .product-quantity .qty { grid-column: 1 / -1; }
  #product .product-actions .product-quantity .add { grid-column: 1; margin: 0; }
  #product .product-actions .product-quantity .add .btn { width: 100%; }
  #product .product-actions .product-quantity .wishlist-button,
  #product .product-actions .product-quantity .wishlist-button-add,
  #product .product-actions .product-quantity .wishlist-button-product {
    grid-column: 2; margin: 0 !important; align-self: center; justify-self: end;
    position: static !important;
  }

  /* Buy section → a floating cart button + a bottom sheet (variant selectors,
     qty, add-to-cart). The inline .product-actions is lifted out of the flow. */
  #product .product-actions.js-product-actions {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    max-height: 80vh; overflow-y: auto;
    /* The open sheet (z-90, opaque) fully covers the tab bar (z-80), so the
       bottom padding only needs thumb clearance + the iOS home indicator —
       not the whole tab-bar height. */
    padding: 1.4rem var(--om-gutter) calc(1.1rem + env(safe-area-inset-bottom, 0px));
    background: var(--om-paper); border-top: 1px solid var(--om-line);
    box-shadow: 0 -12px 34px rgba(22, 17, 10, .18);
    transform: translateY(101%); visibility: hidden;
    transition: transform .3s cubic-bezier(.25, .8, .25, 1), visibility 0s linear .3s;
  }
  #product.outletmor-pdp-sheet-open .product-actions.js-product-actions {
    transform: translateY(0) translateZ(0); visibility: visible; transition-delay: 0s; will-change: transform;
  }
  /* Batch-drawer PDP: no buy sheet — the buy area stays inline and the CTA is a
     fixed bar above the tab bar (the drawer itself is the bottom-centre sheet). */
  #product .product-actions.js-product-actions:has(.outletmor-pdp-buy) {
    position: static; max-height: none; overflow: visible; padding: 0;
    background: none; border-top: 0; box-shadow: none;
    transform: none; visibility: visible;
  }
  .outletmor-pdp-buy {
    position: sticky; bottom: calc(var(--om-tabbar-height) + .4rem); z-index: 55;
    margin: 1.4rem calc(-1 * var(--om-gutter)) 0;
    padding: .55rem var(--om-gutter) calc(.55rem + env(safe-area-inset-bottom, 0px));
    background: var(--om-paper); border-top: 1px solid var(--om-line);
  }
  .outletmor-pdp-sheet-close {
    display: block; width: 2.6rem; height: 1.5rem; margin: -.4rem auto .8rem;
    padding: 0; border: 0; background: transparent;
  }
  .outletmor-pdp-sheet-close span { display: block; width: 2.6rem; height: .28rem; border-radius: 0; background: var(--om-line); }

  .outletmor-pdp-fab {
    display: grid; place-items: center; position: fixed; z-index: 82;
    right: var(--om-gutter); bottom: calc(var(--om-tabbar-height) + 1rem + env(safe-area-inset-bottom, 0px));
    width: 3.4rem; height: 3.4rem; padding: 0; border: 1px solid var(--om-line); border-radius: 0;
    background: #fff; color: var(--om-green-deep); box-shadow: 0 8px 22px rgba(22, 17, 10, .22);
    transition: opacity .2s ease, transform .12s ease;
  }
  .outletmor-pdp-fab svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .outletmor-pdp-fab:active { transform: scale(.93); }
  #product.outletmor-pdp-sheet-open .outletmor-pdp-fab { opacity: 0; pointer-events: none; }

  .outletmor-pdp-sheet-backdrop {
    display: block; position: fixed; inset: 0; z-index: 89; background: rgba(11, 9, 6, .46);
    opacity: 0; pointer-events: none; transition: opacity .25s ease;
  }
  #product.outletmor-pdp-sheet-open .outletmor-pdp-sheet-backdrop { opacity: 1; pointer-events: auto; }
  #product.outletmor-pdp-sheet-open { overflow: hidden; }

  /* "Added to your bag" toast becomes a bottom sheet — slides up instead of
     down from the top-right, and carries a grab handle hinting the
     swipe-down-to-dismiss gesture (wired up in outletmor-combinations.js). */
  .outletmor-add-toast {
    left: 0; right: 0; top: auto; bottom: var(--om-tabbar-height);
    width: auto; max-width: none; border-left: 0; border-right: 0; border-bottom: 0;
    border-radius: 0; padding-top: 1.6rem;
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
  }
  .outletmor-add-toast.is-visible { transform: translateY(0); }
  .outletmor-add-toast__handle {
    display: block; position: absolute; top: .6rem; left: 50%; width: 2.5rem; height: .28rem;
    background: var(--om-line); border-radius: 0; transform: translateX(-50%);
  }
}
/* ---------- Touch: the size step is a bottom sheet opened from a cart icon ---------- */
@media (hover: none) {
  .outletmor-card__buy { position: static; }

  /* The size overlay becomes a sheet docked to the bottom of the viewport. */
  .outletmor-card__panel,
  .outletmor-product-card:hover .outletmor-card__panel,
  .outletmor-card__buy:focus-within .outletmor-card__panel,
  .outletmor-card__panel.is-options-open {
    position: fixed; inset: auto 0 0 0; z-index: 200; width: auto; max-height: 82vh; overflow-y: auto;
    padding: 1.4rem 1.2rem calc(1.4rem + env(safe-area-inset-bottom, 0px));
    background: #fff; border-top: 1px solid var(--om-line); border-radius: 0;
    box-shadow: 0 -14px 44px rgba(22, 17, 10, .24);
    text-align: left; transform: translateY(101%); opacity: 1; visibility: hidden;
    transition: transform .3s cubic-bezier(.25, .8, .25, 1), visibility 0s linear .3s;
  }
  .outletmor-product-card.is-sheet-open .outletmor-card__panel {
    transform: translateY(0); visibility: visible; transition-delay: 0s;
  }
  .outletmor-card__sheet-close {
    display: inline-grid; place-items: center; position: absolute; top: .9rem; right: 1rem;
    width: 2rem; height: 2rem; padding: 0; border: 0; background: transparent; color: var(--om-green-soft);
  }
  .outletmor-card__sheet-close svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
  .outletmor-card__cta-label { padding-right: 2rem; font-size: .74rem; }
  /* Colour swatches move into the sheet alongside the sizes — same layout
     switch as before, but the swatches themselves and the size options now
     keep the exact desktop styling (small square swatches with the
     underline, plain underlined text for sizes) instead of an enlarged
     circle/bordered-pill mobile-only look. */
  /* Per-section labels, touch-only: "Select a Colour" above the swatches,
     the (now visible) fieldset <legend> above each size group. */
  .outletmor-card__group-label, .outletmor-card__groups legend {
    display: block; margin: 0 0 .4rem; color: var(--om-green-soft);
    font-size: .68rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  }
  .outletmor-card__groups fieldset + fieldset legend { margin-top: 1rem; }
  /* Wider gaps than desktop's tight inline swatches — same size, but more
     breathing room between tap targets for a finger instead of a mouse. */
  .outletmor-card__colors--sheet { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0 0 .3rem; }
  .outletmor-card__colors--sheet:empty { display: none; }
  .outletmor-card__colors--sheet + .outletmor-card__groups:not([hidden]) { margin-top: .3rem; border-top: 1px solid var(--om-line); padding-top: 1rem; }
  .outletmor-card__onesize { align-self: flex-start; }
  .outletmor-card__status { text-align: left; font-size: .78rem; }
  .outletmor-saving { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; }
  .outletmor-cart-drawer.is-refreshing::after { animation-duration: 1.6s; }
}