/* Outletmor v4 — compile-free storefront stylesheet for PrestaShop 8+
   Editorial, full-width outlet design. Every page runs edge to edge, the cart
   is a right-hand drawer and catalogue cards carry their own colour/size buy. */
:root {
  --om-ink: #26261f;
  --om-green: #3b4a1e;
  --om-green-deep: #2b3714;
  --om-green-soft: #52623a;
  --om-muted: #8b8c82;
  --om-line: #e2e3da;
  --om-pill-line: #9aa47e;
  --om-field: #f3f3ef;
  --om-paper: #ffffff;
  --om-tile: #f2f2ee;
  --om-green-wash: #eef2e4;
  --om-lime: #a7ff4f;
  --om-sale: #7a3f2f;
  --om-shadow: 0 22px 60px rgba(31, 38, 15, .16);
  --om-shadow-soft: 0 8px 26px rgba(31, 38, 15, .1);
  --om-font: Jost, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --om-gutter: clamp(1rem, 2.2vw, 2.25rem);
  --om-header: 4.25rem;
}

*, *::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;
}

/* Full-width scaffolding: neutralise Bootstrap containers and the classic grid. */
.container, .container-fluid,
#wrapper .container, #content-wrapper, #main {
  width: 100%; max-width: none; margin: 0; padding: 0;
}
#wrapper { 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; }

/* ---------- 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: #f4f7ec;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
}
.outletmor-promo__link { border-bottom: 1px solid rgba(244, 247, 236, .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);
}
.outletmor-header__start { grid-column: 1; display: flex; align-items: center; gap: 1.5rem; min-width: 0; }
/* Hombre / Mujer / Marcas — quick links next to the hamburger. Desktop only:
   at mobile widths #header only shows on the home page (see below) and the
   bottom tab bar is already the primary nav there, so keep that bar minimal. */
.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; }
}

/* The white-header flash on the home page is avoided by head.tpl setting
   `.outletmor-has-hero` on <html> synchronously (before first paint), so the
   rules below apply from frame one; initHeaderOverlay() only clears the flag
   if no hero is present. */

/* Homepage with a hero: the header floats transparently over the photo,
   then fades to solid once you've scrolled past it. outletmor.js adds
   .outletmor-has-hero (when a .outletmorhero is on the page) and toggles
   .outletmor-header-solid on <html> while scrolling. Desktop only — on
   mobile the whole #header is hidden. */
@media (min-width: 641px) {
  /* -1px covers the header's own bottom border so the hero starts flush with
     the very top of the viewport. */
  .outletmor-has-hero #wrapper { margin-top: calc(-1 * var(--om-header) - 1px); }
  .outletmor-has-hero .outletmorhero { height: 100vh; max-height: none; }

  /* #header carries background:#fff from the classic theme.css — it has to
     go transparent too, not just the inner .outletmor-header. The inner
     element is the one that fades back to solid on scroll. */
  .outletmor-has-hero #header { background: transparent; }
  .outletmor-has-hero #header .outletmor-header {
    background: transparent; border-bottom-color: transparent;
    transition: background .25s ease, border-color .25s ease;
  }
  .outletmor-has-hero #header .outletmor-icon-button,
  .outletmor-has-hero #header .outletmor-logo,
  .outletmor-has-hero #header .outletmor-header__nav-link { color: #fff; }
  /* The search box keeps its own opaque pill background (see base
     .outletmor-search rule) regardless of the header being transparent over
     the hero, so its text/icon stay dark for contrast against that
     background rather than following the rest of the header to white. */
  .outletmor-has-hero #header .outletmor-search .outletmor-icon-button { color: var(--om-green-deep); }

  .outletmor-has-hero.outletmor-header-solid #header .outletmor-header {
    background: var(--om-paper); border-bottom-color: var(--om-line);
  }
  .outletmor-has-hero.outletmor-header-solid #header .outletmor-icon-button,
  .outletmor-has-hero.outletmor-header-solid #header .outletmor-logo,
  .outletmor-has-hero.outletmor-header-solid #header .outletmor-header__nav-link { color: var(--om-green-deep); }
}
.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;
}
/* Homepage: the logo floats over the hero photo — the SVG artwork is dark and
   an <img>-embedded SVG can't be recoloured via `fill`/`color`, so force it
   white with a filter. Reverts to the artwork colour once the header goes
   solid (desktop scroll). */
.outletmor-has-hero #header .outletmor-logo img { filter: brightness(0) invert(1); }
/* identity filter, not `none`, so the transition can interpolate back */
.outletmor-has-hero.outletmor-header-solid #header .outletmor-logo img { filter: brightness(1) invert(0); }
.outletmor-logo span { font-size: 1.5rem; font-style: italic; font-weight: 500; letter-spacing: -.04em; text-transform: lowercase; }
.outletmor-menu-toggle { grid-column: 1; justify-self: start; }

.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: 999px;
  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);
  /* 80% of the former 2.6rem button-driven height, including borders. */
  height: 2.08rem;
  border: 0; border-radius: 999px; background: var(--om-field);
  padding: 0 .3rem 0 .9rem;
}
.outletmor-search:focus-within { box-shadow: inset 0 0 0 1px var(--om-green); }
.outletmor-search .outletmor-icon-button { flex: 0 0 2.1rem; width: 2.1rem; height: 100%; color: var(--om-green-deep); }
.outletmor-search input[type='search'] { width: 100%; min-width: 0; height: 100%; padding: .15rem 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: 999px;
  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(26, 30, 14, .34); 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(24, 34, 12, .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(24, 34, 12, .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: 0 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: 999px; 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: 999px;
  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) 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 — sized to the pills'
   own min-height (2.2rem) so the arrow fully occludes the pill underneath
   it rather than floating over a sliver of visible pill edge, and given a
   fully solid background (the generic .outletmor-rail__arrow's own
   rgba(255,255,255,.92) is faintly see-through, fine over photos but not
   here where it needs to actually hide the pill behind it). */
.outletmor-category-pills-rail.outletmor-rail__viewport .outletmor-rail__arrow {
  top: 50%; width: 2.2rem; height: 2.2rem; background: #fff;
}
.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: 999px;
  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: 999px;
  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); }

/* ---------- 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='2'] #js-product-list .products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
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)); }

.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: .35rem .8rem; border-radius: 999px; 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: var(--om-lime); }

/* 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: 6px;
}
.outletmor-card__onesize {
  display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; min-height: 0;
  padding: 0; border: 0; border-radius: 999px; 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, .outletmor-card__panel-head { display: none; }
.outletmor-sheet-backdrop {
  position: fixed; inset: 0; z-index: 199; background: rgba(26, 30, 14, .42);
  opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility 0s linear .28s;
}
.outletmor-sheet-backdrop.is-visible { opacity: 1; visibility: visible; transition-delay: 0s; }

/* ---------- Card text: name + heart, price, colour swatches ---------- */
.outletmor-card__info { position: relative; display: flex; flex-direction: column; padding: .8rem .5rem .3rem; }
.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: 999px; background: var(--om-green-wash); color: var(--om-green); 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;
}
/* Facets (and sort options) wrap across rows. Selectors are anchored on BOTH
   the drawer id (#outletmor-filter) and #search_filters — two ids — so they
   outweigh the classic theme.css leftover (`#search_filters .facet
   .facet-label`, one id) that core still auto-loads and that otherwise
   stacks the labels into one column and clips them with an ellipsis. */
.outletmor-sort-options > div,
#outletmor-filter #search_filters .facet ul,
#outletmor-filter #search_filters .facet .collapse {
  display: flex !important; flex-wrap: wrap; gap: .55rem 1.4rem;
  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; }

/* Sort options are pills too, same look as the default facet pill below. */
.outletmor-sort-options a {
  display: inline-flex; align-items: center; min-height: 2.4rem;
  padding: .4rem 1rem; margin: 0; border: 1px solid var(--om-pill-line); border-radius: 999px;
  background: none; color: var(--om-green-soft); font-size: .82rem; line-height: 1.2;
  white-space: nowrap; cursor: pointer;
}
.outletmor-sort-options a.is-current {
  background: var(--om-green-deep); border-color: var(--om-green-deep); color: #fff;
}

/* Every facet label: no truncation, and the label text + its (N) count never
   split across two lines — nowrap without overflow:hidden/ellipsis means long
   labels just make the pill wider instead of clipping or wrapping mid-item. */
#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 is a pill (Size, and anything not called out below).
   Padding is symmetric — the vertical offset that looked like it needed
   asymmetric padding was actually theme.css's `#search_filters .facet
   .facet-label a { margin-top: .4375rem }` (a classic-theme leftover core
   still auto-loads): align-items:center on the flex label centers the <a>'s
   MARGIN box, so that top margin was pushing the text down by ~4px. Clearing
   the margin on the link below is the real fix; padding stays symmetric. */
#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: 999px;
  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 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; }

/* Marca (manufacturer) and Disponibilidad (availability) are the two
   exceptions — plain wrapping text, not pills. Still inline-flex (not block)
   so multiple brands line up left-to-right in the same wrapping row instead
   of stacking one per line. */
#outletmor-filter #search_filters .facet[data-type="manufacturer"] .facet-label,
#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="manufacturer"] .facet-label:hover,
#outletmor-filter #search_filters .facet[data-type="manufacturer"] .facet-label:hover a,
#outletmor-filter #search_filters .facet[data-type="availability"] .facet-label:hover,
#outletmor-filter #search_filters .facet[data-type="availability"] .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,
#outletmor-filter #search_filters .facet[data-type="availability"] .facet-label.active,
#outletmor-filter #search_filters .facet[data-type="availability"] .facet-label.active a,
#outletmor-filter #search_filters .facet[data-type="availability"] .facet-label:has(input:checked),
#outletmor-filter #search_filters .facet[data-type="availability"] .facet-label:has(input:checked) a {
  background: none !important; color: var(--om-green-deep); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}

/* Precio: PrestaShop's own price-range slider, not a facet list — give its
   row the FULL available width instead of the flex-wrap pill layout (its <ul>
   otherwise inherits display:flex from the rule above and shrinks to content
   width instead of stretching). */
#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%;
}
#outletmor-filter #search_filters .facet .faceted-slider .ui-slider,
#outletmor-filter #search_filters .facet .faceted-slider > li > p {
  width: 100%;
}

/* Colour facets — and ONLY these — are pills whose ground is the colour itself
   (JS adds [data-om-light] to the pale ones so the label 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: 999px;
  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 { color: #fff; text-decoration: none; }
#outletmor-filter #search_filters .facet .facet-label--color:hover,
#outletmor-filter #search_filters .facet .facet-label--color:hover a { color: #fff; }
#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 .magnitude { opacity: .8; }
#outletmor-filter #search_filters .facet .facet-label--color.active,
#outletmor-filter #search_filters .facet .facet-label--color.active a,
#outletmor-filter #search_filters .facet .facet-label--color:has(input:checked),
#outletmor-filter #search_filters .facet .facet-label--color:has(input:checked) a {
  font-weight: 400; text-decoration: none;
}
#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: 999px; }
.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: 999px; 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(59, 74, 30, .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: 8px; 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: 999px; background: #fff; }
.outletmor-cart-voucher button { flex: 0 0 auto; padding: 0 1.1rem; border: 1px solid var(--om-green-deep); border-radius: 999px; 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(43, 55, 20, .22); 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-paper); 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; display: flex; justify-content: center; }
/* `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: 1 / 1; object-fit: cover; }
@media (min-width: 641px) {
  /* Desktop: the cover + the thumbnail strip together fill the visible height
     (viewport minus the sticky header) exactly — no min/max clamp, so it's
     always the true visible area, not a capped approximation of it. The strip
     is a fixed slice; the cover takes the rest. The cover is square (1:1):
     with `width:auto` here (overriding the base rule's `width:100%`), height
     drives width via aspect-ratio instead of the column driving height, so
     the slide is a real square, centred in the (usually wider) column by the
     `justify-content:center` on `.outletmor-gallery__slide` above. */
  #product .outletmor-gallery { --om-gallery-h: calc(100vh - 6rem); }
  #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: 1 / 1; }
  #product .outletmor-gallery__slide img {
    width: auto;
    height: calc(var(--om-gallery-h) - 7rem);
    aspect-ratio: 1 / 1;
  }
  /* 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: 50%; background: rgba(43, 55, 20, .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(8, 11, 3, .96);
}
.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: 50%;
  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: 50%; background: var(--om-lime); 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: 999px;
  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: 999px;
  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);
}
/* Out-of-stock colour — same dimmed + diagonal-strike swatch as the
   catalogue card (.outletmor-color[data-unavailable='true']), since
   text-decoration:line-through (used for size/other groups above) has
   nothing to strike through on a plain colour square. */
#product .product-variants li.is-unavailable .color { opacity: .4; }
#product .product-variants li.is-unavailable .color::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  background: var(--om-muted); transform: rotate(-45deg);
}

#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: 999px;
  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 #product-availability { display: inline-flex; align-items: center; gap: .4rem; }
#product #product-availability .material-icons { flex: none; line-height: 1; }
#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; margin: 0;
  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:not(.block-title) {
  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:not(.block-title))) { grid-template-rows: auto; }
#product .blockreassurance_product > div:not(.clearfix):not(:has(p:not(.block-title))) .item-product { grid-row: 1; }
#product .blockreassurance_product > div:not(.clearfix):not(:has(p:not(.block-title))) .block-title { grid-row: 1; 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: 999px;
  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: 8px; box-shadow: none; color: var(--om-ink);
}
.form-control:focus { border-color: var(--om-green); box-shadow: none; }
.btn-primary, .btn-secondary {
  border-radius: 999px; 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 + checkout summary: the tax rate + tax amount line(s) 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. A compound tax (e.g. IVA + Recargo de Equivalencia) is
   split into its own "Impuestos" heading plus one indented, smaller row per
   component (see initCartTaxLine() in outletmor.js). */
.om-order-tax { color: var(--om-muted); }
.om-order-tax .om-order-tax__rate { font-weight: 400; opacity: .85; }
.om-order-tax--heading { color: var(--om-ink); font-weight: 600; }
.om-order-tax--component { padding-left: 1.1rem; font-size: .88em; }

/* ---------- /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: 50%;
  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: 2px; 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: 2px; 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) */
.outletmor-footer__cookie-settings {
  padding: 0; border: 0; background: transparent; color: var(--om-muted); font-size: .7rem;
  text-decoration: underline; text-underline-offset: .15em; cursor: pointer;
}
.outletmor-footer__cookie-settings:hover { color: var(--om-green-deep); }

/* ---------- Cookie consent banner ----------
   EU/LSSI-CE opt-in banner (outletmor-cookie-consent.tpl, initCookieConsent()
   in outletmor.js). z-index above everything else in the theme (overlay 90,
   menu/search sheets 93, tab bar 95, cart/filter/menu drawers 100) since
   it's the one thing that must never be visually trapped behind other UI. */
.outletmor-cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  display: flex; justify-content: center;
  padding: var(--om-gutter);
  pointer-events: none; /* only the box + panel themselves catch clicks */
}
.outletmor-cookie-banner[hidden] { display: none; }
.outletmor-cookie-banner__box {
  pointer-events: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem;
  width: 100%; max-width: 56rem; padding: 1.3rem 1.6rem;
  background: var(--om-paper); border: 1px solid var(--om-line);
  box-shadow: 0 -12px 34px rgba(24, 34, 12, .18);
}
.outletmor-cookie-banner__text { flex: 1 1 20rem; margin: 0; min-width: 0; color: var(--om-ink); font-size: .82rem; line-height: 1.5; }
.outletmor-cookie-banner__text a { color: var(--om-green-deep); text-decoration: underline; text-underline-offset: .15em; }
.outletmor-cookie-banner__actions {
  display: flex; flex-wrap: wrap; gap: .6rem; flex: none;
}
.outletmor-cookie-banner__actions .outletmor-button { min-height: 2.6rem; padding: .6rem 1.2rem; font-size: .68rem; }
.outletmor-cookie-banner__panel {
  pointer-events: auto;
  width: 100%; max-width: 56rem; margin-top: .6rem; padding: 1.3rem 1.6rem;
  background: var(--om-paper); border: 1px solid var(--om-line);
  box-shadow: 0 -12px 34px rgba(24, 34, 12, .18);
  display: flex; flex-direction: column; gap: 1rem;
}
.outletmor-cookie-banner__panel[hidden] { display: none; }
.outletmor-cookie-banner__category label { display: flex; align-items: center; gap: .55rem; color: var(--om-ink); font-size: .8rem; font-weight: 600; }
.outletmor-cookie-banner__category p { margin: .25rem 0 0 1.6rem; color: var(--om-muted); font-size: .74rem; line-height: 1.4; }
@media (max-width: 640px) {
  .outletmor-cookie-banner { padding: 0; }
  .outletmor-cookie-banner__box, .outletmor-cookie-banner__panel { max-width: none; border-left: 0; border-right: 0; }
  .outletmor-cookie-banner__actions { width: 100%; }
  .outletmor-cookie-banner__actions .outletmor-button { flex: 1 1 auto; }
}

/* ---------- 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; }
/* outletmorbrandrail: manufacturer logo standing in for the plain-text
   title. Height-capped, width auto, so wide or square logos both sit at
   the same visual weight as the text heading they replace. */
.outletmor-home-band__title--logo { line-height: 0; }
.outletmor-home-band__logo { display: block; height: 1.8rem; width: auto; max-width: 12rem; object-fit: contain; }
.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: 50%;
  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). `data-om-rail-loop` adds
   the continuous auto-drift: the 7 items are in the DOM twice, JS advances
   scrollLeft and folds at scrollWidth/2 for a seamless loop; any interaction
   hands scrolling to the user, and it drifts again after a short idle.
   Per-item right margin (not track `gap`) so the two halves are equal width
   and scrollWidth/2 lands exactly on the seam. */
.outletmor-assurance {
  margin: 0; padding: clamp(1.75rem, 4vw, 2.75rem) 0;
  border-top: 1px solid var(--om-line);
}
.outletmor-assurance .outletmor-rail__track {
  display: flex; flex-wrap: nowrap; align-items: flex-start;
  padding: 0 var(--om-gutter);
  overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  list-style: none; margin: 0;
}
.outletmor-assurance .outletmor-rail__track::-webkit-scrollbar { display: none; }
.outletmor-assurance__item {
  flex: 0 0 clamp(8.5rem, 18vw, 11rem);
  margin: 0 clamp(1.75rem, 4vw, 3.5rem) 0 0;
  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: #4cbb6c; 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: 8rem; }
  .outletmor-assurance__item span { font-size: .78rem; }
}

/* ---------- Homepage: "why choose us" custom-text block ---------- */
.page-home #custom-text {
  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);
}
.page-home #custom-text > h1,
.page-home #custom-text > 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 {
  margin: 0 0 1rem; color: var(--om-muted); font-size: .93rem; line-height: 1.75;
}
.page-home #custom-text ul {
  margin: 0 0 1.3rem; padding: 0; list-style: none;
}
.page-home #custom-text 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 {
  content: ""; position: absolute; left: .1rem; top: .58em;
  width: .42rem; height: .42rem; background: var(--om-green-deep); border-radius: 1px;
}
.page-home #custom-text strong,
.page-home #custom-text .dark { color: var(--om-ink); font-weight: 600; }

.alert { border-radius: 8px; }
.modal-content { border: 0; border-radius: 4px; 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='6'] #js-product-list .products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  #js-product-list .products, .products.row, .featured-products .products, .product-accessories .products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  html[data-outletmor-columns='4'] #js-product-list .products,
  html[data-outletmor-columns='6'] #js-product-list .products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .outletmor-nav { display: none; }
  #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; }

  /* Home-page header floats transparently over the hero; once scrolled past
     the hero it slides up out of the way entirely — the bottom tab bar takes
     over navigation. `.outletmor-has-hero` / `.outletmor-header-solid` are
     toggled on <html> by initHeaderOverlay(). */
  .outletmor-has-hero #wrapper { margin-top: calc(-1 * var(--om-header) - 1px); }
  .outletmor-has-hero .outletmorhero { height: 100svh; min-height: 30rem; max-height: none; }
  .outletmor-has-hero #header {
    background: transparent;
    transition: transform .3s ease, visibility 0s linear 0s;
  }
  .outletmor-has-hero #header .outletmor-header { background: transparent; border-bottom-color: transparent; }
  .outletmor-has-hero #header .outletmor-icon-button,
  .outletmor-has-hero #header .outletmor-logo { color: #fff; }
  .outletmor-has-hero.outletmor-header-solid #header {
    transform: translateY(-100%); visibility: hidden;
    transition: transform .3s ease, visibility 0s linear .3s;
  }
  .outletmor-tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0;
    /* Above the overlay (90) and the menu/search sheets (93) below, so those
       slide up from BEHIND the bar instead of passing over it. Still below
       the full-screen cart/filter drawers (100), which take over completely. */
    z-index: 95;
    height: var(--om-tabbar-height); padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--om-paper); border-top: 1px solid var(--om-line);
    /* 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; }
  /* 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: var(--om-green-wash);
    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); }
  /* Nav menu + search: bottom sheets that sit ABOVE the tab bar (their bottom
     edge stops at --om-tabbar-height, never under it), with a grab handle +
     drag-down-to-close header (JS: initSheetSwipe) — same gesture as the
     "Added to your bag" toast. Search keeps its own keyboard-aware open
     transform (--om-kb, set elsewhere) untouched; only its position moves. */
  .outletmor-menu-drawer,
  .outletmor-search-sheet {
    top: auto; left: 0; right: 0;
    bottom: calc(var(--om-tabbar-height) + env(safe-area-inset-bottom, 0px));
    z-index: 93;
    box-shadow: 0 -12px 34px rgba(24, 34, 12, .18);
  }
  .outletmor-menu-drawer {
    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)));
    transition: transform .3s cubic-bezier(.25, .8, .25, 1), visibility 0s linear .3s;
  }
  .outletmor-menu-drawer.is-open { transform: translateY(0); transition-delay: 0s; }
  .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;
  }
  .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; border-radius: 999px; background: var(--om-line);
  }
  #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 circular button, sharing the
     row with the category pills instead of wrapping onto its own line. Dark
     background + white icon (theme's own primary-action convention,
     matches add-to-cart/WhatsApp FAB) instead of the desktop white pill,
     since there's no visible label left to carry the pill's outline.
     justify-content:center: with the label hidden, the button has only
     one flex child (the svg) left inside a min-width-forced box — without
     this the icon hugs the default flex-start (left) edge instead of
     sitting in the middle of the now-wider box. */
  .outletmor-filter-trigger {
    min-width: 2.4rem; padding: .4rem; gap: 0; justify-content: center;
    background: var(--om-green-deep); color: #fff; border-color: var(--om-green-deep);
  }
  .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%; }
  .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: 100;
    max-height: 80vh; overflow-y: auto;
    /* The open sheet (opaque) fully covers the tab bar, so the bottom
       padding only needs thumb clearance + the iOS home indicator — not the
       whole tab-bar height. Sheet + its backdrop sit at the same tier as the
       cart/filter/menu drawers (z-index:100/99) — above the tab bar
       (z-index:95) — a full takeover, same as those. */
    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(24, 34, 12, .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;
  }
  /* Full-width strip, not a small centred button — same "the head IS the
     drag surface" idea as the nav/search drawers and the card sheet, so the
     whole top of the buy sheet is grabbable, not just a small pill hotspot.
     Still the sheet's one close control (click or drag), so it stays a
     real <button>, just widened. */
  .outletmor-pdp-sheet-close {
    display: flex; align-items: center; justify-content: center;
    position: relative; width: calc(100% + 2 * var(--om-gutter));
    height: 1.8rem; margin: -.4rem calc(-1 * var(--om-gutter)) .6rem;
    padding: 0; border: 0; background: transparent; touch-action: none;
  }
  .outletmor-pdp-sheet-close span { display: block; width: 2.6rem; height: .28rem; border-radius: 999px; 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: 50%;
    background: #fff; color: var(--om-green-deep); box-shadow: 0 8px 22px rgba(24, 34, 12, .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: 99; background: rgba(10, 14, 4, .42);
    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: 16px 16px 0 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: 999px; 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 wishlist heart lives on the image (blockwishlist button, bottom-right);
     the cart/size-sheet trigger takes the top-right corner of the text block. */
  .outletmor-card__info { padding-right: 2.2rem; }
  .outletmor-card__sheet-trigger {
    display: inline-grid; place-items: center; position: absolute; top: .35rem; right: 0; bottom: auto; z-index: 3;
    width: 2rem; height: 2rem; padding: 0; border: 0; background: transparent; color: var(--om-green-deep);
  }
  .outletmor-card__sheet-trigger svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

  /* 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(24, 34, 12, .24);
    text-align: left; transform: translateY(101%); opacity: 1; visibility: hidden;
    transition: transform .3s cubic-bezier(.25, .8, .25, 1), visibility 0s linear .3s;
    touch-action: pan-y;
  }
  .outletmor-product-card.is-sheet-open .outletmor-card__panel {
    transform: translateY(0); visibility: visible; transition-delay: 0s;
  }
  /* Full-width strip across the top of the sheet is the drag surface — same
     "the head IS the swipe handle" approach as the nav/search drawers
     (.outletmor-drawer__top) and the add-to-bag toast, not a small isolated
     button (too small a target to reliably grab). Sits behind the ✕ (later
     in the DOM, so it still paints — and receives clicks — on top); the
     labelled ✕ stays the one focusable "Close" control, this is drag-only. */
  .outletmor-card__panel-head {
    display: block; position: absolute; inset: 0 0 auto 0; height: 2.3rem;
    touch-action: none;
  }
  .outletmor-card__panel-head::before {
    content: ''; position: absolute; top: .55rem; left: 50%; transform: translateX(-50%);
    width: 2.6rem; height: .28rem; border-radius: 999px; background: var(--om-line);
  }
  .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. */
  .outletmor-card__colors--inline { display: none; }
  /* 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; }
}

/* ---------- CMS content: generic list bullets + embedded map (Sobre nosotros) ---------- */
.page-cms .list-1 { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.page-cms .list-1 li { position: relative; padding-left: 1.5rem; margin: 0 0 .5rem; }
.page-cms .list-1 li::before { content: '✓'; position: absolute; left: 0; color: var(--om-green-deep); font-weight: 700; }
.outletmor-cms-map { position: relative; width: 100%; max-width: 40rem; padding-bottom: 45%; height: 0; overflow: hidden; margin-top: 1.5rem; border: 1px solid var(--om-line); }
.outletmor-cms-map iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 640px) { .outletmor-cms-map { padding-bottom: 75%; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; }
  .outletmor-cart-drawer.is-refreshing::after { animation-duration: 1.6s; }
}