/* ============================================================
   OKSAMYT · Estudio de Diseño — child theme of Classic
   PrestaShop 8.x · Bootstrap 4.6
   v2.3.0 — concrete + self-sufficient (fonts declared, MI declared,
   container-xxl shim, no @import that dev CSP would block).
   ============================================================ */

/* === Fonts: self-hosted variable woff2 in assets/fonts/.
   Previously these pointed at Google Fonts v7/v16/v18 URLs which were
   garbage-collected and started returning 404 → all brand typography
   was falling back to system fonts (Georgia, Menlo, system sans).
   Self-hosting fixes it permanently and removes the upstream dependency. === */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/cormorant-garamond-variable.woff2') format('woff2-variations'),
       url('../fonts/cormorant-garamond-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/inter-tight-variable.woff2') format('woff2-variations'),
       url('../fonts/inter-tight-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

/* === Material Icons — self-hosted; classic's <i class="material-icons"> markers depend on this. === */
@font-face {
  font-family: 'Material Icons';
  font-style: normal; font-weight: 400; font-display: block;
  src: url('../fonts/material-icons-v145.woff2') format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal; font-style: normal;
  font-size: var(--t-lg); line-height: 1; letter-spacing: normal;
  text-transform: none; display: inline-block; white-space: nowrap;
  word-wrap: normal; direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'liga';
}

:root {
  --oks-bg: #fafaf7;
  --oks-bg-alt: #f1efe8;
  --oks-surface: #ffffff;
  --oks-ink: #14110d;
  --oks-ink-2: #2a2620;
  --oks-muted: #5d5448;
  --oks-line: #e2ddd2;
  --oks-line-soft: #ecead8;
  --oks-accent-deep: #7a2c0e;
  --oks-walnut: #4a3221;
  --oks-copper: #9a4f28;
  --oks-serif: 'Cormorant Garamond', Georgia, serif;
  --oks-sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  /* CC-9: token name aliases — legacy var(--oks-font-*) refs throughout file resolve to correct fonts */
  --oks-font-serif: var(--oks-serif);
  --oks-font-sans: var(--oks-sans);
  /* Option C footer tokens (2026-05-17) */
  --oks-walnut-deep: #1a1006;
  --oks-walnut-line: #3a2e25;
  --oks-walnut-inset: #0f0c08;
  --oks-ivory: #f4ede2;
  --oks-ivory-soft: rgba(244, 237, 226, 0.75);
  --oks-muted-walnut: #9e8f78;
  --oks-muted-base: #5a4a3a;
  /* ── Major-Third (×1.25) type scale — 8 tokens (2026-05-31) ── */
  --t-micro:   11px;                      /* cart-count bubble, flag ribbons — UI chrome only */
  --t-caption: 12.8px;                    /* eyebrow, nav, footer meta, breadcrumb, labels */
  --t-body:    16px;                      /* body, paragraphs, prices, buttons, inputs */
  --t-md:      20px;                      /* lede, product card titles, small headings */
  --t-lg:      25px;                      /* sub-headings, product detail price */
  --t-xl:      31.25px;                   /* section titles (Productos populares) */
  --t-2xl:     39px;                      /* category/page H1 */
  --t-display: clamp(40px, 5vw, 61px);   /* hero H1 ONLY — fluid */
  /* ── Vertical spacing scale (2026-06-01) ── */
  --space-section:    48px;   /* between major page sections, desktop */
  --space-section-sm: 32px;   /* mobile ≤767px */
  --space-block:      40px;   /* between blocks within a section */
  --space-tight:      16px;
}

/* Foundations Pass C remediation (2026-06-01): with the font-size !important guards removed,
   classic-base's `p { font-size: .8rem }` (12.8px) could leak onto genuinely-unstyled
   paragraphs (templates not covered by the 5-page snapshot survey). Re-assert the 16px body
   baseline at the ELEMENT layer (specificity 0,0,1) — beats classic by source order, while
   every class-based type rule still overrides it (footer p.h3 stays 12.8px via #footer .h3,
   cookie-modal p stays 12.8px via its own rule — verified 0 regressions). No !important. */
p { font-size: var(--t-body); }

/* ===== BASE — colors + type only ===== */
html, body {
  background: var(--oks-bg);
  color: var(--oks-ink);
  font-family: var(--oks-sans);
  font-size: var(--t-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--oks-ink); text-decoration: none; transition: color .15s ease; }
a:hover { color: var(--oks-copper); text-decoration: none; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--oks-serif);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.08;
  color: var(--oks-ink);
}
em, i { font-style: italic; }
::selection { background: var(--oks-ink); color: var(--oks-bg); }

/* ===== HEADER NAV (top dark strip) — colors only ===== */
#header .header-nav {
  background: var(--oks-ink);
  color: var(--oks-bg);
  font-family: var(--oks-sans);
  font-size: var(--t-caption);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 9px 0;
  margin-bottom: 0;
  border-bottom: 0;
}
#header .header-nav a, #header .header-nav .text { color: var(--oks-bg); opacity: .86; }
#header .header-nav a:hover { color: var(--oks-copper); opacity: 1; }
#header .header-nav .dropdown-toggle::after { display: none; }

/* ===== HEADER TOP — skin only, leaves Classic's row/col alone ===== */
#header .header-top {
  background: var(--oks-bg);
  border-bottom: 1px solid var(--oks-line);
}
#header .logo { max-height: 56px; width: auto; }

/* search bar */
#search_widget {
  border-bottom: 1px solid var(--oks-line);
  background: transparent;
}
#search_widget input[type="text"] {
  background: transparent; border: 0; outline: none;
  font-family: var(--oks-sans); font-size: var(--t-caption);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--oks-ink);
}
/* F-EAA-015: restore focus indicator for keyboard users (WCAG 2.4.7 AA) */
#search_widget input[type="text"]:focus-visible {
  outline: 2px solid var(--oks-copper);
  outline-offset: 2px;
}
#search_widget input::placeholder { color: var(--oks-muted); }
#search_widget button[type="submit"] { background: transparent; border: 0; color: var(--oks-muted); }
#search_widget button[type="submit"]:hover { color: var(--oks-copper); }

/* cart + user actions */
.blockcart, #_desktop_cart, #_desktop_user_info {
  font-family: var(--oks-sans); font-size: var(--t-caption);
  letter-spacing: 0.16em; text-transform: uppercase;
}
.blockcart .cart-products-count {
  background: var(--oks-ink); color: var(--oks-bg);
  font-family: var(--oks-sans); font-size: var(--t-micro);
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ===== MAIN MENU (ps_mainmenu) — skin only ===== */
.top-menu {
  border-top: 1px solid var(--oks-line-soft);
  border-bottom: 1px solid var(--oks-line);
  background: var(--oks-bg);
}
.top-menu > li > a {
  font-family: var(--oks-sans); font-size: var(--t-caption);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--oks-ink);
  padding: 16px 16px;
  border-bottom: 2px solid transparent;
  background: transparent;
}
.top-menu > li > a:hover,
.top-menu > li.active > a,
.top-menu > li.current > a {
  color: var(--oks-ink);
  border-bottom-color: var(--oks-ink);
  background: transparent;
}

/* ===== HERO CAROUSEL (ps_imageslider) — colors only, no display:grid ===== */
/* FIX-SLIDER-FRAME (2026-06-04): was background:var(--oks-bg-alt) (#f1efe8) — showed as a
   cream 'border' in the 24px/16px gap where the slide doesn't fill the carousel box.
   Transparent so no frame shows (gap, if any, matches page bg). */
.carousel { background: transparent; margin-bottom: 0; }
.carousel .carousel-caption {
  font-family: var(--oks-serif);
  color: var(--oks-ink);
  text-shadow: none;
}
.carousel .carousel-caption h2,
.carousel .carousel-caption .display-1 {
  font-family: var(--oks-serif); font-weight: 400;
  font-size: var(--t-display); line-height: 1.04;
  letter-spacing: -0.02em; color: var(--oks-ink);
}
.carousel .carousel-caption .lead,
.carousel .carousel-caption p {
  font-family: var(--oks-sans);
  font-size: var(--t-body); line-height: 1.6;
  color: var(--oks-ink-2);
}
.carousel-control-prev, .carousel-control-next {
  width: 40px; height: 40px;
  background: rgba(255,255,255,0.9); border-radius: 50%;
  opacity: 1; top: auto; bottom: 28px;
}
.carousel-indicators li {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(0,0,0,0.2);
}
.carousel-indicators .active { background: var(--oks-ink); }

/* ===== EYEBROW + BUTTONS ===== */
.oks-eyebrow {
  font-family: var(--oks-sans); font-size: var(--t-caption);
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--oks-muted); margin: 0 0 12px;
}

.btn, button.btn {
  font-family: var(--oks-sans); font-size: var(--t-caption); font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 14px 26px; border-radius: 0;
  border: 1px solid transparent;
  display: inline-flex; align-items: center; gap: 10px;
  transition: all .2s ease;
}
.btn-primary, .btn.btn-primary {
  background: var(--oks-ink); color: var(--oks-bg);
  border-color: var(--oks-ink);
}
.btn-primary:hover, .btn.btn-primary:hover {
  background: var(--oks-copper); border-color: var(--oks-copper); color: var(--oks-bg);
}
.btn-secondary, .btn.btn-secondary {
  background: transparent; color: var(--oks-ink);
  border-color: var(--oks-ink);
}
.btn-secondary:hover, .btn.btn-secondary:hover {
  background: var(--oks-ink); color: var(--oks-bg);
}
.btn-link, .btn.btn-link {
  background: transparent; border: 0; color: var(--oks-ink);
  padding: 4px 0 6px; border-bottom: 1px solid var(--oks-ink);
  letter-spacing: .22em; font-family: var(--oks-sans); font-size: var(--t-caption);
  text-transform: uppercase; border-radius: 0;
}
.btn-link:hover { color: var(--oks-copper); border-bottom-color: var(--oks-copper); }

/* ===== SECTION HEADERS (skin) ===== */
.featured-products .section-title,
.featured-products .products-section-title,
#content-wrapper .home-section .products-section-title {
  font-family: var(--oks-serif); font-size: var(--t-xl);
  font-weight: 400; letter-spacing: -0.015em;
  margin: 0 0 32px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--oks-ink);
  text-align: left;
}

/* ===== PRODUCT MINIATURE — skin only, NO grid override ===== */
.product-miniature, .js-product-miniature {
  background: transparent; border: 0; padding: 0;
  margin-bottom: 32px;
}
.product-miniature .thumbnail-container {
  background: transparent; border: 0; padding: 0; box-shadow: none;
  position: relative; overflow: hidden;
}
.product-miniature .thumbnail-container::before { display: none; }
.product-miniature .thumbnail {
  display: block; aspect-ratio: 4/5;
  background: var(--oks-bg-alt); overflow: hidden;
}
.product-miniature .thumbnail img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
}
.product-miniature:hover .thumbnail img { transform: scale(1.04); }

.product-miniature .product-flags {
  position: absolute; top: 10px; left: 10px;
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: 6px; flex-wrap: wrap;
}
.product-miniature .product-flag {
  font-family: var(--oks-sans); font-size: var(--t-micro); font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  background: var(--oks-ink); color: var(--oks-bg);
  padding: 5px 9px; line-height: 1; border-radius: 0;
  position: static;
}
.product-miniature .product-flag.discount,
.product-miniature .product-flag.on-sale,
.product-miniature .product-flag.discount-percentage,
.product-miniature .product-flag.discount-amount {
  background: var(--oks-copper); color: var(--oks-bg);
}
.product-miniature .product-flag.out_of_stock {
  background: var(--oks-muted); color: var(--oks-bg);
}

.product-miniature .product-description,
.product-miniature .product-title-block {
  padding: 16px 0 0; text-align: left;
}
.product-miniature .product-title { margin: 4px 0 8px; }
.product-miniature .product-title a {
  font-family: var(--oks-serif); font-size: var(--t-md);
  font-weight: 400; line-height: 1.25; color: var(--oks-ink);
}
.product-miniature .product-title a:hover { color: var(--oks-copper); }
.product-miniature .category-name,
.product-miniature .product-category {
  font-family: var(--oks-sans); font-size: var(--t-caption);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--oks-muted); margin: 0;
}
.product-miniature .product-price-and-shipping {
  font-family: var(--oks-sans); font-size: var(--t-caption);
  font-weight: 500; color: var(--oks-ink);
  letter-spacing: .04em;
}
.product-miniature .price { color: var(--oks-ink); }
.product-miniature .regular-price {
  color: var(--oks-muted); text-decoration: line-through;
  font-weight: 400; margin-right: 8px;
}
.product-miniature .discount-percentage,
.product-miniature .discount-amount {
  background: transparent; color: var(--oks-copper);
  padding: 0; font-family: var(--oks-sans);
  font-size: var(--t-caption); letter-spacing: .12em;
}
.product-miniature .highlighted-informations { display: none; }

/* ===== BREADCRUMB ===== */
#wrapper .breadcrumb {
  background: transparent; padding: 22px 0; margin: 0;
  font-family: var(--oks-sans); font-size: var(--t-caption);
  letter-spacing: .22em; text-transform: uppercase;
  border-bottom: 1px solid var(--oks-line-soft);
  border-radius: 0;
}
#wrapper .breadcrumb li { color: var(--oks-muted); }
#wrapper .breadcrumb li::after { content: '/'; margin: 0 8px; opacity: .4; }
#wrapper .breadcrumb li:last-child::after { display: none; }
#wrapper .breadcrumb li:last-child { color: var(--oks-ink); }
#wrapper .breadcrumb a { color: var(--oks-muted); }
#wrapper .breadcrumb a:hover { color: var(--oks-copper); }

/* ===== CATEGORY HEADER ===== */
#category #js-product-list-header h1,
#category .block-category h1,
#category .h1 {
  font-family: var(--oks-serif); font-size: var(--t-2xl);
  font-weight: 400; letter-spacing: -0.02em; margin: 0 0 14px;
}
#category #category-description,
#category .category-cover,
#category .block-category #category-description,
#category .block-category p {
  font-size: var(--t-body); line-height: 1.65; color: var(--oks-ink-2);
  max-width: 720px; margin: 0;
}
#category .block-category .category-cover img { display: none; }

/* ===== LISTING META (sort + count row) ===== */
#js-product-list-top, .products-selection {
  padding: 16px 0; margin: 0 0 32px;
  border-top: 1px solid var(--oks-line);
  border-bottom: 1px solid var(--oks-line);
}
.products-selection .total-products,
#js-product-list-top .total-products,
.products-selection .total-products p {
  font-family: var(--oks-sans); font-size: var(--t-caption);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--oks-ink); margin: 0;
}
.products-sort-order .select-title,
.sort-by-row label, .products-selection .sort-by {
  color: var(--oks-muted); font-weight: 400;
  font-family: var(--oks-sans); font-size: var(--t-caption);
  letter-spacing: .14em; text-transform: uppercase;
}
.products-sort-order .dropdown-menu {
  border-radius: 0; border-color: var(--oks-line);
}
.products-sort-order select, .sort-by select {
  border: 0; border-bottom: 1px solid var(--oks-ink);
  background: transparent; padding: 6px 8px;
  font-family: var(--oks-sans); font-size: var(--t-caption);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--oks-ink); border-radius: 0;
}

/* ===== PAGINATION ===== */
.pagination {
  margin: 48px 0 16px;
  font-family: var(--oks-sans); font-size: var(--t-caption);
  letter-spacing: .18em; text-transform: uppercase;
  border-radius: 0;
}
.pagination a, .pagination .current a {
  padding: 8px 12px; min-width: 40px;
  text-align: center; color: var(--oks-ink);
  border-bottom: 1px solid transparent; border-radius: 0;
}
.pagination .current a, .pagination li.current a {
  color: var(--oks-ink); border-bottom-color: var(--oks-ink);
  background: transparent;
}
.pagination .disabled, .pagination .disabled a {
  color: var(--oks-muted); pointer-events: none;
}

/* ===== PRODUCT PAGE — skin only ===== */
#product .product-cover,
#product .product-images-cover {
  background: var(--oks-bg-alt); border-radius: 0;
  overflow: hidden;
}
#product .product-cover img { width: 100%; height: auto; object-fit: cover; }
#product .images-container .thumb {
  width: 76px; height: 96px; cursor: pointer;
  border: 1px solid transparent; opacity: .7;
  transition: all .2s ease; border-radius: 0;
}
#product .images-container .thumb.selected,
#product .images-container .thumb:hover {
  border-color: var(--oks-ink); opacity: 1;
}

#product h1, .product-information h1 {
  font-family: var(--oks-serif); font-size: var(--t-2xl);
  font-weight: 400; letter-spacing: -0.02em; line-height: 1.05;
  margin: 0 0 14px;
}
.product-prices .current-price .price,
.product-price {
  font-family: var(--oks-sans); font-size: var(--t-lg); font-weight: 500;
  color: var(--oks-ink); letter-spacing: .02em;
}
.product-prices .regular-price {
  font-family: var(--oks-sans); font-size: var(--t-body);
  color: var(--oks-muted); text-decoration: line-through;
  margin-right: 12px;
}
.product-prices .discount {
  background: var(--oks-copper); color: var(--oks-bg);
  font-family: var(--oks-sans); font-size: var(--t-caption);
  letter-spacing: .16em; padding: 4px 8px; border-radius: 0;
}
.product-reference, .product-manufacturer {
  font-family: var(--oks-sans); font-size: var(--t-caption);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--oks-muted);
}
#product .product-information .product-description-short,
.product-description {
  font-size: var(--t-body); line-height: 1.7; color: var(--oks-ink-2);
}

/* qty + add-to-cart — skin only */
.qty, .product-quantity .input-group {
  border: 1px solid var(--oks-ink); border-radius: 0;
  background: transparent;
}
.product-quantity .input-group .btn,
.product-quantity .qty-btn,
.bootstrap-touchspin .btn-touchspin {
  background: transparent; border: 0;
  width: 40px; height: 48px; padding: 0;
  font-size: var(--t-md); color: var(--oks-ink);
  border-radius: 0; box-shadow: none;
}
.product-quantity #quantity_wanted,
.product-quantity input.qty-input {
  width: 56px; height: 48px; text-align: center;
  border: 0; background: transparent;
  font-family: var(--oks-sans); font-size: var(--t-body); color: var(--oks-ink);
  border-radius: 0;
}

#product .product-additional-info,
#product .product-info-block {
  border-top: 1px solid var(--oks-line);
  border-bottom: 1px solid var(--oks-line);
  padding: 22px 0; margin: 16px 0;
}
#blockcart-modal .modal-content { border-radius: 0; }

.social-sharing {
  font-family: var(--oks-sans); font-size: var(--t-caption);
  letter-spacing: .22em; text-transform: uppercase; color: var(--oks-muted);
}
.social-sharing .social-title,
.social-sharing > span:first-child { color: var(--oks-muted); }
.social-sharing li a { color: var(--oks-ink); }
.social-sharing li a:hover { color: var(--oks-copper); }

/* product tabs */
.tabs {
  background: transparent; box-shadow: none;
  padding: 32px 0 24px;
  border-radius: 0; margin-top: 32px;
  border-top: 1px solid var(--oks-line);
}
.tabs .nav-tabs { border-bottom: 1px solid var(--oks-line); }
.tabs .nav-tabs .nav-link {
  border: 0; border-bottom: 2px solid transparent;
  font-family: var(--oks-sans); font-size: var(--t-caption);
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--oks-muted); padding: 12px 0; margin-right: 32px;
  background: transparent; border-radius: 0;
}
.tabs .nav-tabs .nav-link.active {
  color: var(--oks-ink); border-bottom-color: var(--oks-ink);
  background: transparent;
}
.tabs .tab-content {
  padding: 22px 0; font-size: var(--t-body); line-height: 1.7;
  color: var(--oks-ink-2); max-width: 760px;
}

/* ===== CART PAGE — skin only, leaves Classic .row > .col-* alone ===== */
#cart h1, .cart-grid h1 {
  font-family: var(--oks-serif); font-size: var(--t-xl);
  font-weight: 400; margin: 0 0 18px;
}

.cart-overview .cart-item,
.cart-item {
  padding: 20px 0; border-bottom: 1px solid var(--oks-line);
}
.cart-item .product-line-info .label,
.cart-item .product-name {
  font-family: var(--oks-serif); font-size: var(--t-md);
  font-weight: 400; color: var(--oks-ink);
}
.cart-item .product-line-info .value,
.cart-item .product-line-info span {
  font-family: var(--oks-sans); font-size: var(--t-caption); letter-spacing: .22em;
  text-transform: uppercase; color: var(--oks-muted);
}
.cart-item .price,
.cart-item .product-price,
.cart-item .product-total {
  font-family: var(--oks-sans); font-weight: 500;
  color: var(--oks-ink); font-size: var(--t-body);
}
.cart-item .remove-from-cart {
  font-family: var(--oks-sans); font-size: var(--t-caption);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--oks-muted); border: 0; background: transparent;
}
.cart-item .remove-from-cart:hover { color: var(--oks-copper); }

.cart-summary {
  background: var(--oks-bg-alt);
  border-radius: 0; box-shadow: none;
}
.cart-summary h2, .cart-summary .h2 {
  font-family: var(--oks-sans); font-size: var(--t-caption);
  letter-spacing: .28em; text-transform: uppercase;
  color: var(--oks-muted); font-weight: 500;
}
.cart-summary-line, .cart-total {
  font-family: var(--oks-sans); font-size: var(--t-caption); color: var(--oks-ink);
}
.cart-summary-line.cart-total, .cart-total {
  border-top: 1px solid var(--oks-ink);
  margin-top: 10px; padding-top: 14px;
  font-weight: 500; font-size: var(--t-body); letter-spacing: .04em;
}

.promo-code, .block-promo {
  border-top: 1px solid var(--oks-line);
}
.promo-code .promo-input,
.block-promo input[name="discount_name"] {
  background: transparent; border: 0;
  border-bottom: 1px solid var(--oks-ink);
  padding: 8px 0; font-family: var(--oks-sans);
  font-size: var(--t-caption); letter-spacing: .18em;
  text-transform: uppercase; color: var(--oks-ink);
  border-radius: 0;
}

/* ===== REASSURANCE BLOCK — skin only ===== */
.block-reassurance {
  border-top: 1px solid var(--oks-line);
  border-bottom: 1px solid var(--oks-line);
  background: var(--oks-bg);
  margin: 32px 0 0; padding: 28px 0;
  box-shadow: none;
}
.block-reassurance li {
  border: 0; background: transparent;
}
.block-reassurance li .block-icon,
.block-reassurance li img,
.block-reassurance li svg,
.block-reassurance li i {
  color: var(--oks-ink);
}
.block-reassurance li p,
.block-reassurance li .h6,
.block-reassurance li span {
  font-family: var(--oks-sans);
  font-size: var(--t-caption); line-height: 1.5;
  color: var(--oks-ink); font-weight: 400;
  text-transform: none; letter-spacing: 0;
}
.block-reassurance li p strong,
.block-reassurance li .h6 {
  font-family: var(--oks-sans); font-size: var(--t-caption);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--oks-ink); font-weight: 500;
  display: block; margin-bottom: 2px;
}

/* ===== FOOTER — skin only ===== */
#footer {
  background: var(--oks-ink); color: var(--oks-bg);
  margin-top: 0;
  padding-top: 0;   /* 2026-06-01: kill classic-base #footer{padding-top:2.5rem} (40px) dark dead space above newsletter — stacked on both footer#footer + div#footer.oks-footer = 80px; newsletter band owns its own top padding */
}
#footer .links .h3, #footer .links h3,
#footer .block_newsletter .h3, #footer .block_newsletter h3,
#footer .block-contact .h3, #footer .block-social .h3,
#footer .h3 {
  font-family: var(--oks-sans); font-size: var(--t-caption);
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(250,250,247,.7); font-weight: 500;
  margin: 0 0 16px;
}
#footer .links a, #footer a {
  color: rgba(250,250,247,.86); font-size: var(--t-caption);
}
#footer a:hover { color: var(--oks-copper); }
#footer .block-contact p,
#footer .block_contactinfos p {
  font-size: var(--t-caption); line-height: 1.6;
  color: rgba(250,250,247,.86);
}
#footer .block-social li a {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(250,250,247,.2); border-radius: 50%;
  background: transparent; color: var(--oks-bg);
}
#footer .block-social li a:hover {
  border-color: var(--oks-copper); color: var(--oks-copper);
}
#footer .block_newsletter form {
  border-bottom: 1px solid rgba(250,250,247,.4);
  padding: 6px 0; gap: 8px;
}
#footer .block_newsletter input[type="email"] {
  background: transparent; border: 0; outline: none;
  color: var(--oks-bg); font-family: var(--oks-sans);
  font-size: var(--t-caption); letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 0;
}
/* F-EAA-015: restore focus indicator for keyboard users (WCAG 2.4.7 AA) */
#footer .block_newsletter input[type="email"]:focus-visible {
  outline: 2px solid var(--oks-bg);
  outline-offset: 2px;
}
#footer .block_newsletter input::placeholder { color: rgba(250,250,247,.5); }
#footer .block_newsletter button {
  background: transparent; border: 0; color: var(--oks-bg);
  font-family: var(--oks-sans); font-size: var(--t-caption);
  letter-spacing: .18em; text-transform: uppercase;
  padding: 6px 0; box-shadow: none;
}
#footer .block_newsletter button:hover { color: var(--oks-copper); }
#footer .footer-logo img,
#footer .brand img {
  height: 44px; filter: invert(1) brightness(2); width: auto;
}
.copyright, #footer .copyright {
  font-family: var(--oks-sans); font-size: var(--t-caption);
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(250,250,247,.55);
  border-top: 1px solid rgba(250,250,247,.12);
  padding: 22px 0;
}

/* ===== FORMS ===== */
.form-control,
input.form-control, select.form-control, textarea.form-control {
  border-radius: 0; border: 1px solid var(--oks-line);
  padding: 12px 14px; font-family: var(--oks-sans);
  font-size: var(--t-body); background: var(--oks-surface);
  color: var(--oks-ink);
}
.form-control:focus { border-color: var(--oks-ink); box-shadow: none; }
label {
  font-family: var(--oks-sans); font-size: var(--t-caption);
  letter-spacing: .14em; text-transform: uppercase; color: var(--oks-muted);
}

/* ===== ALERTS ===== */
.notifications-container { padding: 0; }
.alert {
  border-radius: 0; border: 0;
  font-family: var(--oks-sans); font-size: var(--t-body);
}
.alert-success { background: #ecead8; color: var(--oks-walnut); }
.alert-danger { background: #f8d8c8; color: var(--oks-accent-deep); }
.alert-info, .alert-warning { background: var(--oks-bg-alt); color: var(--oks-ink); }

/* ===== MODAL ===== */
.modal-content { border-radius: 0; border: 0; }
.modal-header { border-bottom-color: var(--oks-line); }
.modal-header .h5,
.modal-header .modal-title {
  font-family: var(--oks-serif); font-weight: 400; font-size: var(--t-lg);
}
.modal-footer { border-top-color: var(--oks-line); }

/* ===== UTILITY ===== */
hr { border-color: var(--oks-line); }
.text-muted { color: var(--oks-muted) !important; }
.bg-light { background: var(--oks-bg-alt) !important; }

/* ============================================================
   BS3 ↔ BS4 utility shim — Classic mixes both eras of helpers
   in its templates. Map the BS3 names to BS4 behaviour so our
   header.tpl works on both vanilla Classic and modernised cores.
   ============================================================ */
/* M1 fix — was `display: block !important` which overrode the drawer
   wrapper's inline style="display:none", forcing the mobile menu open on
   load. Removed !important so inline display:none wins until JS opens it. */
.hidden-md-up { display: block; }
@media (min-width: 768px) { .hidden-md-up { display: none !important; } }
.hidden-sm-down { display: none !important; }
@media (min-width: 768px) { .hidden-sm-down { display: block !important; } }
.hidden-xs-down { display: block !important; }
@media (max-width: 575.98px) { .hidden-xs-down { display: none !important; } }
.visible-md-up { display: none !important; }
@media (min-width: 768px) { .visible-md-up { display: block !important; } }

/* Container-xxl shim — let the editorial layout breathe past the
   Bootstrap 4 default 1140px cap on big screens. Classic uses
   .container everywhere; we widen it on ≥1400px without breaking
   the stock row > col-* grid. */
/* F1 (2026-06-05, user decision): single 1440px tier from >=1400px
   (was 1320 at >=1400 / 1440 at >=1600). At a 1440 viewport the container
   spans full width with its own 15px side padding as gutters. */
@media (min-width: 1400px) {
  #wrapper > .container,
  #header .container,
  #footer .container,
  .oks-manifesto .container,
  .oks-home-featured .container,
  .oks-home-customtext .container,
  .page-content .container,
  .featured-products .container { max-width: 1440px; width: 100%; }
  /* classic-base sets EXPLICIT width:1140px on .container at >=1200 (BS3-style);
     max-width alone cannot override an explicit width — width:100% restores
     responsive behavior so the 1440 cap actually applies (F1). */
}

/* MI ligature fallback — head.tpl pre-paint sets html.no-mi-font */
html.no-mi-font .material-icons,
html.no-mi-font i.material-icons { display: none !important; }

/* ============================================================
   HOMEPAGE — editorial frame (concrete index.tpl)
   ============================================================ */
.oks-home-hero { background: var(--oks-bg-alt); margin: 0; }
.oks-home-hero .carousel { margin: 0; }

.oks-manifesto {
  padding: 88px 0 72px;
  background: var(--oks-bg);
  border-bottom: 1px solid var(--oks-line);
}
.oks-manifesto .oks-eyebrow { margin: 0 0 20px; }
.oks-manifesto-line {
  font-family: var(--oks-serif);
  font-size: var(--t-2xl);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--oks-ink);
  margin: 0 0 20px;
  max-width: 22ch;
  text-wrap: balance;
}
.oks-manifesto-sub {
  font-size: var(--t-body);
  line-height: 1.7;
  color: var(--oks-ink-2);
  max-width: 56ch;
  margin: 0;
}

/* ============================================================
   MANIFESTO EDITORIAL — new homepage section
   Between ps_banner and ps_featuredproducts
   ============================================================ */
.oks-manifesto-editorial {
  background: #f4ebde;
  padding: clamp(4rem, 7vw, 6.5rem) 0;
  text-align: center;
}

/* Top copper hairline above eyebrow */
.oks-manifesto-editorial__eyebrow-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2.25rem;
}
.oks-manifesto-editorial__hairline-top {
  display: block;
  width: 32px;
  height: 1px;
  background: var(--oks-copper);
}
.oks-manifesto-editorial__eyebrow {
  font-family: var(--oks-sans);
  font-size: var(--t-caption);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oks-copper);
  margin: 0;
}

/* Title */
.oks-manifesto-editorial__title {
  font-family: var(--oks-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-display);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--oks-ink);
  margin: 0 auto 2rem;
  max-width: 22ch;
}

/* Lede */
.oks-manifesto-editorial__lede {
  font-family: var(--oks-serif);
  font-style: italic;
  font-size: var(--t-lg);
  line-height: 1.55;
  color: var(--oks-ink);
  max-width: 65ch;
  margin: 0 auto 2.25rem;
}
.oks-manifesto-editorial__lede em {
  color: var(--oks-copper);
  font-style: italic;
}

/* Stanzas */
.oks-manifesto-editorial__stanza {
  font-family: var(--oks-serif);
  font-size: var(--t-md);
  line-height: 1.7;
  color: var(--oks-ink-2);
  max-width: 62ch;
  margin: 0 auto 1.5rem;
}
.oks-manifesto-editorial__stanza:last-of-type { margin-bottom: 0; }

/* Hairline divider */
.oks-manifesto-editorial__divider {
  display: block;
  width: 32px;
  height: 2px;
  background: var(--oks-copper);
  margin: 3rem auto;
  border: 0;
}

/* Pillars grid */
.oks-manifesto-editorial__pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 3rem;
  max-width: 780px;
  margin: 0 auto;
  text-align: left;
}
@media (max-width: 767px) {
  .oks-manifesto-editorial__pillars {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
}
.oks-manifesto-editorial__pillar {
  border-left: 2px solid var(--oks-copper);
  padding-left: 1.25rem;
}
.oks-manifesto-editorial__pillar-heading {
  font-family: var(--oks-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-md);
  line-height: 1.2;
  color: var(--oks-ink);
  margin: 0 0 0.4rem;
}
.oks-manifesto-editorial__pillar-desc {
  font-family: var(--oks-sans);
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--oks-ink-2);
  margin: 0;
}

/* Closing creed */
.oks-manifesto-editorial__creed {
  font-family: var(--oks-serif);
  font-style: italic;
  font-size: var(--t-xl);
  line-height: 1.5;
  color: var(--oks-ink);
  max-width: 58ch;
  margin: 0 auto;
}
.oks-manifesto-editorial__creed em {
  color: var(--oks-copper);
  font-style: italic;
}

/* Maker's note */
.oks-manifesto-editorial__maker {
  font-family: var(--oks-sans);
  font-size: var(--t-caption);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oks-muted);
  margin: 2rem 0 0;
}

.oks-section-header {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  margin: 0 0 36px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--oks-ink);
}
.oks-section-header .oks-eyebrow { margin: 0; }
.oks-section-header h2 {
  font-family: var(--oks-serif);
  font-size: var(--t-xl);
  font-weight: 400;
  letter-spacing: -0.015em;
  margin: 0;
}

/* HOME-001 (updated 2026-06-01, revised 2026-06-01-seam-fixes):
   Section padding zeroed — .oks-rule margin: var(--space-section) auto owns ALL
   vertical space around each divider (Rule D2: equal above and below).
   banner→footer: zero bottom padding (Rule D1: colour change = separator, flush). */
.oks-home-featured {
  padding-block: 0 0;
  /* border-top removed — full-width grey line rejected by user */
  /* all vertical space delegated to .oks-rule margin-block */
}
.oks-home-featured .featured-products .section-title,
.oks-home-featured .featured-products .products-section-title { display: none; }
/* let Classic's row > col-* miniature grid render natively;
   whitespace above provided by --space-section padding on this wrapper */

/* HOME-002 (2026-06-01): remove full-width ink underline from "Productos populares"
   heading on home page ONLY. The approved design = short centred copper .oks-rule ABOVE
   the heading (in index.tpl); NO underline below the heading text.
   Scoped to body.page-index / .page-home to avoid touching category or other pages. */
body.page-index .featured-products .products-section-title,
body.page-index .featured-products .section-title,
body.page-index .featured-products h2,
body.page-index .page-home .featured-products .products-section-title,
.page-home .featured-products .products-section-title,
.page-home .featured-products .section-title,
.page-home .featured-products h2 {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;   /* 2026-06-01: kill the h2 top-margin that collapsed through .featured-products and made HR#2 gap-below 32px vs 16px on the other dividers */
}

.oks-home-banner { padding: 0; margin: 0; }
.oks-home-banner img { width: 100%; height: auto; display: block; }

.oks-home-customtext {
  padding-block: 0 0;
  background: var(--oks-bg-alt);
  /* Rule D1: colour change = separator — zero bottom to meet footer flush.
     Rule D2: top space delegated to .oks-rule margin-bottom above. */
}

@media (max-width: 767px) {
  .oks-home-featured  { padding-block: 0 0; }
  .oks-rule { margin-block: 11px; }   /* D2 mobile: tight, symmetric (was 32px) */
  .oks-home-customtext { padding-block: 0 0; }
}
.oks-home-customtext h1, .oks-home-customtext h2, .oks-home-customtext h3 {
  font-family: var(--oks-serif); font-weight: 400;
  letter-spacing: -0.015em;
}
.oks-home-customtext p {
  font-size: var(--t-body); line-height: 1.75; color: var(--oks-ink-2);
  max-width: 64ch;
}

.oks-home-rest { padding: 0; }   /* was 0 0 64px — kill any gap before footer (D1: colour change = separator) */
.oks-home-rest:empty { display: none; }

/* category header (concrete category.tpl) */
.oks-cat-header {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 32px 0 24px !important;
  margin: 0 0 8px !important;
}

/* === oksamyt overrides — wave 2 === */

/* D7 — product cards stacked layout (image on top, info below) */
.product-miniature, .product-miniature .product { display: block !important; }
.page-index .product-miniature .product, .page-search .product-miniature .product { width: auto !important; min-width: 0 !important; }
.product-miniature .thumbnail-container, .product-miniature .product-description { display: block; width: 100%; }
.featured-products .products, #products .products { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 28px; }

/* D5 — cart icon: remove classic's light-grey box on dark header bar */
#header .header-nav .blockcart { background: transparent !important; padding: 0 !important; height: auto !important; }
#header .header-nav .blockcart a { display: inline-flex; align-items: center; gap: 4px; }

/* D9 — newsletter input: ensure transparent on dark footer, override classic's border:1px solid #ddd */
#footer .block_newsletter input[type=email],
#footer .block_newsletter form input[type=email] {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--oks-line) !important;
  padding: 8px 0 !important;
  color: var(--oks-bg);
}
#footer .block_newsletter input[type=submit] {
  background: var(--oks-copper) !important;
  color: var(--oks-bg) !important;
  border: 0;
  padding: 8px 18px;
  font-family: var(--oks-sans);
  font-size: var(--t-caption);
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* D4 — INICIAR SESIÓN: fix margin-top causing it to float above the dark utility bar */
#header .header-nav .user-info { margin-top: 0 !important; }

/* === oksamyt overrides — wave 3 === */

/* D13 — product grid: Bootstrap .row forces display:flex, override with grid !important */
.featured-products .products,
#products .products,
.product-list .products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 28px !important;
  /* Reset Bootstrap .row flex/margin interference */
  flex-wrap: unset !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* In grid context the article fills its cell — remove Bootstrap col shrinkage */
.featured-products .products .product-miniature,
#products .products .product-miniature,
.product-list .products .product-miniature {
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* img must scale to fill .thumbnail even if naturalWidth < card width */
.product-miniature .thumbnail img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  max-width: none !important;
}

/* D14 — product title force dark ink (override classic's #7a7a7a) */
.product-miniature .product-title a,
.product-title a,
.featured-products .product-title a,
.products .product-title a {
  color: var(--oks-ink) !important;
  font-family: var(--oks-serif) !important;
  font-size: var(--t-md);
  text-align: left !important;
  text-transform: none !important;
}
.product-title a:hover {
  color: var(--oks-copper) !important;
}
.product-miniature .product-price-and-shipping .price {
  color: var(--oks-ink) !important;
  font-family: var(--oks-sans) !important;
  font-size: var(--t-body);
  letter-spacing: .04em !important;
}

/* D10 superseded by B1 — see "B1 fix — footer brand row" block below. */
#header .header-nav .language-selector { margin-top: 0 !important; }

/* ===== 2026-05-12 a11y fix wave (P1-P2-P4) ===== */

/* P2 — .page-header > h1 is decorative on homepage (sr-only).
   classic-base.css applies white text + light shadow → 2.01:1 fail.
   Hide visually but keep for SR. */
/* P2 (scoped) — sr-only ONLY on the homepage where the h1 is a duplicate of carousel content.
   Previously this rule applied site-wide, hiding the CATEGORY TITLE on category pages
   (e.g. "ART" was rendered 1x1 invisible). */
body.page-index .page-header > h1,
.page-index .page-header > h1 {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
}
/* On non-homepage pages, the page-header h1 IS the visible page title. Force dark ink + readable. */
.page-header > h1 {
  color: var(--oks-ink) !important;
  text-shadow: none !important;
  font-family: var(--oks-serif) !important;
  font-weight: 500 !important;
}
/* Subcategories heading — classic-base.css renders this white-on-cream = invisible. */
.subcategories h2,
.subcategories .h2,
#subcategories h2,
[class*="subcategor"] h2,
[class*="subcategor"] .h2 {
  color: var(--oks-ink) !important;
  font-family: var(--oks-serif) !important;
}
/* Sub-category card titles too */
.subcategories .subcategory-name,
.subcategory-image-text {
  color: var(--oks-ink) !important;
}

/* P1 — Newsletter email input: classic-base.css sets background-color:#fff on
   .form-control. Without !important, our background:transparent loses.
   Force transparent + dark text for the visible-on-cream case AND restore the
   cream-on-dark case in #footer (the footer bg is dark). */
.block_newsletter input[type="email"],
#footer .block_newsletter input[type="email"] {
  background: transparent !important;
  color: var(--oks-ink) !important;     /* form parent is #fff in this theme, axe walks up transparent → use dark text for contrast on white */
}
.block_newsletter input[type="email"]::placeholder,
#footer .block_newsletter input[type="email"]::placeholder {
  color: rgba(20, 17, 13, 0.55) !important; /* ink @ 55% on white → ~5.0:1 */
}

/* ===== 2026-05-12 header alignment fix wave =====
   Diagnostic showed .header-nav h=50 but children h=61 (account + cart with text labels stack vertically).
   .cart-products-count badge was rendering at y:52 (in the gap between header rows). */

/* Make .header-nav tall enough AND vertically center its children so icons + text-labels sit on one baseline. */
#header .header-nav {
  min-height: 50px;
  display: flex;
  align-items: center;
}
#header .header-nav > .container,
#header .header-nav > .container-fluid,
#header .header-nav > .container-xxl {
  display: flex; align-items: center; width: 100%; min-height: 50px;
}
#header .header-nav .right-nav,
#header .header-nav .left-nav {
  display: inline-flex !important;
  align-items: center !important;
  gap: 18px;
}
#header .header-nav .user-info,
#header .header-nav .blockcart,
#header .header-nav .blockcart .header {
  display: inline-flex !important;
  align-items: center !important;
  height: 32px !important;
  line-height: 1 !important;
}
#header .header-nav .user-info a,
#header .header-nav .blockcart a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
}
#header .header-nav .user-info .material-icons,
#header .header-nav .blockcart .material-icons {
  font-size: var(--t-md);
  vertical-align: middle !important;
}
/* Cart count badge: pin to the cart icon as a positioned indicator on its top-right corner */
#header .header-nav .blockcart { position: relative !important; }
#header .header-nav .blockcart .cart-products-count {
  position: absolute !important;
  top: -4px !important;
  right: -10px !important;
  width: 16px !important; height: 16px !important;
  font-size: var(--t-micro);
  background: var(--oks-copper) !important;
  color: var(--oks-bg) !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none;
}
/* Hide the badge if count is "(0)" — empty cart shouldn't show a counter at all */
#header .header-nav .blockcart .cart-products-count:empty,
#header .header-nav .blockcart .cart-products-count[data-count="0"] {
  display: none !important;
}

/* "CALL US: …" — collapse to single line; if no room, hide on smaller screens */
#header .header-nav .left-nav .text,
#header .header-nav .top-phone,
#header .header-nav .phone {
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

/* classic-base.css has #index .carousel { left:50%; width:100vw; margin-left:-50vw !important; }
   — a full-bleed breakout that clips slide text on left when image is offset.
   Override with matching specificity #index .carousel to win the cascade. */
#index .carousel,
body.page-index .carousel,
.page-index .carousel {
  left: 0 !important;
  width: auto !important;
  margin-left: 0 !important;
  max-width: 100% !important;
}

/* Carousel slide image: natural size 1340x410 but stretched to 1110x680 with object-fit:cover.
   Default object-position 50% 50% crops 556px from each side, hiding "Conecta tu" left text.
   Either: (a) honour the natural aspect ratio (image height ~339 not 680), or
           (b) anchor object-position to the LEFT edge so text isn't cut.
   Going with (a) — the design's intended for a wider/shorter banner, not a billboard. */
#index .carousel,
.page-index .carousel { height: auto !important; }
#index .carousel .carousel-inner,
.page-index .carousel .carousel-inner { height: auto !important; }
#index .carousel .carousel-item,
.page-index .carousel .carousel-item { height: auto !important; }
#index .carousel .carousel-item figure,
.page-index .carousel .carousel-item figure { height: auto !important; }
#index .carousel .carousel-item picture,
.page-index .carousel .carousel-item picture { display: block !important; }
#index .carousel .carousel-item img,
.page-index .carousel .carousel-item img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
  aspect-ratio: 21 / 9 !important;  /* matches fal.ai banners 3136x1344 = 21:9 */
}

/* Hide leftover test products from the catalog grid (defensive — DB deactivation is primary). */
article[data-id-product="27"],
article[data-id-product="61"] { display: none !important; }

/* ===== Newsletter block — make it not a white island in the dark footer ===== */
#footer .block_newsletter,
#footer #blockEmailSubscription_displayFooterBefore {
  background: transparent !important;
  color: var(--oks-bg) !important;
  padding: 0 15px !important;
}
#footer .block_newsletter #block-newsletter-label,
#footer .block_newsletter p {
  color: var(--oks-bg) !important;
  font-family: var(--oks-sans);
  font-size: var(--t-caption);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
/* Override classic's btn-primary white-on-white nightmare on the Subscribe button */
#footer .block_newsletter input[type="submit"].btn-primary,
#footer .block_newsletter button.btn-primary {
  background: var(--oks-copper) !important;
  color: var(--oks-bg) !important;
  border: 0 !important;
  padding: 8px 18px !important;
  font-family: var(--oks-sans) !important;
  font-size: var(--t-caption);
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}
/* The "Puede darse de baja…" disclaimer paragraph */
#footer .block_newsletter form p,
#footer .block_newsletter .col-xs-12 p {
  font-family: var(--oks-sans) !important;
  font-size: var(--t-caption);
  letter-spacing: 0 !important;
  text-transform: none !important;
  opacity: 0.7;
  margin-top: 12px;
}

/* FOOTER-001 fix: hide legacy ps_contactinfo block-contact module (shows duplicate
   address 'Aveida Blasco Ibanez' typo). Address is removed from the custom oks-footer
   template; this hides any module output that might still render. */
#footer .block-contact,
#footer .block_contact_us,
#footer .blockcontact,
#footer .footer-container .block-contact { display: none !important; }

/* Footer block-contact title uses .h4 not .h3 — make it match the other column headers. */
#footer .block-contact-title,
#footer .block-contact .h4,
#footer .block_contact_us .h4,
#footer p.block-contact-title {
  font-family: var(--oks-sans) !important;
  font-size: var(--t-caption);
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--oks-bg) !important;
  opacity: 0.86;
  margin: 0 0 12px !important;
}

/* Hide cart count badge when the cart is empty (PrestaShop default "(0)"). */
#header .header-nav .blockcart .cart-products-count {
  display: none;
}
#header .header-nav .blockcart.active .cart-products-count,
#header .header-nav .blockcart.cart-products-count-more .cart-products-count,
#header .header-nav .blockcart[data-empty="false"] .cart-products-count {
  display: inline-flex !important;
}

/* classic-base.css has #wrapper h1,h2,h3,h4 { color: #fff !important } designed for a dark
   theme banner — but our theme has cream bg, so white headings are INVISIBLE.
   Override at matching specificity (#wrapper prefix) + !important, loaded later → wins. */
#wrapper h1,
#wrapper h2,
#wrapper h3,
#wrapper h4,
#wrapper h5,
#wrapper h6,
#wrapper .products-section-title,
#wrapper .all-product-link,
#wrapper .page-header > h1,
#wrapper .subcategories h2,
#wrapper .subcategories .h2 {
  color: var(--oks-ink) !important;
  text-shadow: none !important;
}
/* But homepage's sr-only h1 must remain INVISIBLE — restore that override (already scoped to .page-index). */
body.page-index #wrapper .page-header > h1,
.page-index #wrapper .page-header > h1 {
  color: transparent !important;
}

/* Cart count badge — aggressive hide.
   PS renders text "(N)" — when empty it's "(0)". CSS can't text-match, so we always hide
   and let the syncCartBadge JS hook show it only when N>0 by adding inline display. */
#header .header-nav .blockcart .cart-products-count,
.blockcart .cart-products-count {
  display: none !important;
}
/* Override the hide for cart-products-count-more class (PS sets this when count > 0) */
.blockcart.active .cart-products-count,
.blockcart.cart-products-count-more .cart-products-count {
  display: inline-flex !important;
}

/* ============================================================================
   FOOTER SYMMETRY (2026-05-12)
   Top row: .block-social.col-lg-4 has empty <ul> (no social links configured).
   PrestaShop renders the wrapper anyway → 380px dead space next to newsletter.
   Bottom row: .col-md-6.links (PRODUCTOS+EMPRESA wrapped 50/50) + .col-md-3
   .block-contact (INFORMACIÓN) = 75% used, 285px empty on the right.

   Fix: hide empty .block-social, expand newsletter to col-12. Rebalance bottom
   row so 3 visible columns are 33.33% each.
   ============================================================================ */

/* Hide social block when its <ul> has no <li> children (no social links set up).
   :has() supported in all modern browsers (Chrome 105+, FF 121+, Safari 15.4+). */
#footer .block-social:has(ul:empty),
#footer .block-social ul:empty {
  display: none !important;
}
#footer .block-social:not(:has(li)) {
  display: none !important;
}

/* When social block hidden, newsletter takes full row width. */
#footer .row > .block_newsletter.col-lg-8:only-child,
#footer .row > .block_newsletter.col-lg-8:last-child:first-child {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}
/* Fallback: even when sibling DOM present but hidden, force newsletter wide.
   Apply at every breakpoint — social block is hidden everywhere when empty. */
#footer .block_newsletter.col-lg-8 {
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

/* N1 fix v2 — newsletter inner row: stack label above form, single coherent unit.
   v1 broke: DOM order placed submit BEFORE input (visual: button on left),
   label wrapped to 2 lines because letter-spacing 0.16em was too aggressive
   for the 640px container.
   v2: tighter letter-spacing on the label so it fits one line; reorder the
   submit button after the input via flex `order`; visible input chrome. */
@media (min-width: 768px) {
  #footer .block_newsletter > .row {
    flex-direction: column !important;
    align-items: stretch !important;
    max-width: 680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  #footer .block_newsletter > .row > #block-newsletter-label.col-md-5 {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 0 1rem 0 !important;
    text-align: center !important;
    font-size: var(--t-body);
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--oks-bg) !important;
    font-family: var(--oks-font-sans) !important;
    white-space: nowrap !important;
  }
  #footer .block_newsletter > .row > .col-md-7 {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  /* Form fields row: flex with input growing, button reordered to the right. */
  #footer .block_newsletter form > .row > .col-xs-12:first-child {
    display: flex !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
    flex-wrap: nowrap !important;
  }
  /* Input wrapper grows to fill remaining space */
  #footer .block_newsletter form .input-wrapper {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    order: 1 !important;
  }
  #footer .block_newsletter form input[name="email"] {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0.75rem 1rem !important;
    background: rgba(255,255,255,0.05) !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    border-radius: 0 !important;
    color: var(--oks-bg) !important;
    font-family: inherit !important;
    font-size: var(--t-body);
  }
  #footer .block_newsletter form input[name="email"]:focus {
    outline: none !important;
    border-color: var(--oks-bg) !important;
    background: rgba(255,255,255,0.1) !important;
  }
  /* Submit button: take only its natural width, reordered AFTER input */
  #footer .block_newsletter form input[type="submit"].btn-primary.hidden-xs-down {
    float: none !important;
    flex: 0 0 auto !important;
    order: 2 !important;
    padding: 0.75rem 1.5rem !important;
  }
  /* Hide the clearfix that becomes orphaned in flex layout */
  #footer .block_newsletter form > .row > .col-xs-12:first-child .clearfix {
    display: none !important;
  }
  /* Disclaimer paragraph below: centred and muted */
  #footer .block_newsletter form > .row > .col-xs-12:last-child p {
    text-align: center !important;
    font-size: var(--t-caption);
    color: rgba(255,255,255,0.55) !important;
    margin: 0.75rem 0 0 0 !important;
  }
}

/* Bottom row symmetry: rebalance 3 columns to 33.33% each on >=md.
   Outer .col-md-6.links keeps its 2 inner col-md-6 children intact;
   we expand outer to 8/12 and shrink block-contact slot equivalent.
   PRODUCTOS (33.33%) + EMPRESA (33.33%) + INFORMACIÓN (33.33%). */
@media (min-width: 768px) {
  #footer .footer-container .row > .col-md-6.links {
    flex: 0 0 66.666% !important;
    max-width: 66.666% !important;
  }
  #footer .footer-container .row > .block-contact.col-md-3 {
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
  }
}

/* Match heading typography between footer columns.
   .col-md-6.links uses <p class="h3"> while .block-contact uses <p class="h4">.
   Force both to render at the same visual weight (h3) for consistency. */
#footer .footer-container .block-contact .h4.block-contact-title,
#footer .footer-container .block-contact p.h4.block-contact-title {
  font-size: var(--t-body);
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  line-height: 1.4 !important;
  margin-bottom: 1rem !important;
  font-family: var(--oks-font-sans) !important;
  color: var(--oks-bg) !important;
  text-transform: uppercase !important;
}
#footer .footer-container .col-md-6.links .h3 {
  font-size: var(--t-body);
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  line-height: 1.4 !important;
  margin-bottom: 1rem !important;
  font-family: var(--oks-font-sans) !important;
  color: var(--oks-bg) !important;
  text-transform: uppercase !important;
}


/* N1 fix v3 — input chrome must apply at every viewport, not just >=768px.
   Mobile (<768px) was rendering the bare underline input from classic theme. */
#footer .block_newsletter form input[name="email"] {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0.7rem 0.9rem !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.25) !important;
  border-radius: 0 !important;
  color: var(--oks-bg) !important;
  font-family: inherit !important;
  font-size: var(--t-body);
}
#footer .block_newsletter form input[name="email"]::placeholder {
  color: rgba(255,255,255,0.45) !important;
  letter-spacing: 0.02em !important;
}
#footer .block_newsletter form input[name="email"]:focus {
  outline: none !important;
  border-color: var(--oks-bg) !important;
  background: rgba(255,255,255,0.1) !important;
}
/* Ensure the hidden-sm-up "OK" button on mobile has consistent padding too */
#footer .block_newsletter form input[type="submit"].btn-primary.hidden-sm-up {
  padding: 0.7rem 1rem !important;
  float: none !important;
}
/* Mobile: stack label/form vertically with consistent spacing */
@media (max-width: 767px) {
  #footer .block_newsletter > .row {
    flex-direction: column !important;
  }
  #footer .block_newsletter > .row > #block-newsletter-label.col-md-5 {
    text-align: left !important;
    padding-bottom: 0.6rem !important;
    font-size: var(--t-caption);
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--oks-bg) !important;
    font-family: var(--oks-font-sans) !important;
  }
  #footer .block_newsletter form > .row > .col-xs-12:first-child {
    display: flex !important;
    gap: 0.5rem !important;
    align-items: stretch !important;
  }
  #footer .block_newsletter form .input-wrapper {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    order: 1 !important;
  }
  #footer .block_newsletter form input[type="submit"].btn-primary.hidden-sm-up {
    order: 2 !important;
    flex: 0 0 auto !important;
  }
  #footer .block_newsletter form > .row > .col-xs-12:last-child p {
    font-size: var(--t-caption);
    color: rgba(255,255,255,0.55) !important;
    margin-top: 0.6rem !important;
  }
}

/* ============================================================================
   B1 fix — footer brand row
   Markup: <div class="row oks-footer-brand"><div class="col-md-12">
             <a class="oks-footer-logo"><span class="oks-logo-mark">O</span>
             <span class="oks-logo-word">Oksamyt Design Studio</span></a>
             <p class="oks-footer-tagline">…</p></div></div>
   Previously: zero CSS, rendered as plain text. Now becomes the centred
   identity anchor above the 3-column footer grid, with a divider line above.
   ============================================================================ */
#footer .footer-container .oks-footer-brand {
  margin: 1.5rem 0 2.25rem 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  text-align: center;
}
#footer .footer-container .oks-footer-brand > .col-md-12 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#footer .footer-container .oks-footer-brand .oks-footer-logo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.7rem;
  color: var(--oks-bg) !important;
  text-decoration: none !important;
  line-height: 1;
}
#footer .footer-container .oks-footer-brand .oks-footer-logo:hover {
  color: var(--oks-copper) !important;
}
#footer .footer-container .oks-footer-brand .oks-logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-family: var(--oks-font-serif, 'Cormorant Garamond', Georgia, serif);
  font-style: italic;
  font-size: var(--t-lg);
  font-weight: 500;
  line-height: 1;
  padding-bottom: 0.1rem; /* italic descender optical balance */
}
#footer .footer-container .oks-footer-brand .oks-logo-word {
  font-family: var(--oks-font-serif, 'Cormorant Garamond', Georgia, serif);
  font-size: var(--t-lg);
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1.1;
}
#footer .footer-container .oks-footer-brand .oks-footer-tagline {
  margin: 0.65rem 0 0 0;
  color: rgba(255,255,255,0.55);
  font-size: var(--t-caption);
  letter-spacing: 0.04em;
  font-weight: 400;
}

/* Mobile: keep centred but tighten */
@media (max-width: 767px) {
  #footer .footer-container .oks-footer-brand {
    margin: 1rem 0 1.5rem 0;
    padding-top: 1rem;
  }
  #footer .footer-container .oks-footer-brand .oks-logo-word {
    font-size: var(--t-md);
  }
  #footer .footer-container .oks-footer-brand .oks-logo-mark {
    width: 2rem;
    height: 2rem;
    font-size: var(--t-md);
  }
  #footer .footer-container .oks-footer-brand .oks-footer-tagline {
    font-size: var(--t-caption);
  }
}

/* ============================================================================
   H1 fix v2 — Top utility bar three-zone layout
   Diagnosis: prior session set .right-nav/.left-nav to display:inline-flex
   auto-width with no justification, so both cols clustered on the LEFT and
   the empty space was on the RIGHT (not the middle).
   Fix: make .hidden-sm-down a 3-zone flex container — left col, centred
   tagline, right col — using space-between + auto-margin on the middle.
   ============================================================================ */
#header .header-nav { position: relative !important; }

@media (min-width: 992px) {
  /* Force the visible-on-desktop wrapper to be a 3-zone flex row */
  #header .header-nav > .container > .row > .hidden-sm-down {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    flex: 1 0 100% !important;
    flex-basis: 100% !important;
    max-width: 100% !important;
  }
  /* Force parent row to allow full-width child */
  #header .header-nav > .container > .row {
    display: flex !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  #header .header-nav > .container > .row > .hidden-sm-down > .col-md-5 {
    flex: 0 0 auto !important;
    max-width: none !important;
    width: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: left !important;
  }
  #header .header-nav > .container > .row > .hidden-sm-down > .col-md-7 {
    flex: 0 0 auto !important;
    max-width: none !important;
    width: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: right !important;
  }
  /* Centred decorative tagline injected via ::after on the wrapper.
     pointer-events: none keeps it transparent to clicks. */
  #header .header-nav > .container > .row > .hidden-sm-down::after {
    content: "ARTESANÍA EN VALENCIA · ENVÍOS PENINSULARES";
    flex: 0 1 auto !important;
    color: rgba(255,255,255,0.5) !important;
    font-family: var(--oks-font-sans) !important;
    font-size: var(--t-caption);
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    pointer-events: none !important;
    white-space: nowrap !important;
    /* Override Bootstrap clearfix ::after which uses content:" "; display:block; clear:both */
    clear: none !important;
    display: block !important;
    height: auto !important;
    width: auto !important;
    /* Position in middle of the flex row (space-between puts it auto in middle) */
    order: 2 !important;
  }
  #header .header-nav > .container > .row > .hidden-sm-down > .col-md-5 { order: 1 !important; }
  #header .header-nav > .container > .row > .hidden-sm-down > .col-md-7 { order: 3 !important; }
}

/* ============================================================================
   H2 fix — Search input chrome
   Previous: bare underline with floating placeholder, no border/fill, no
   container affordance. Now: visible bordered container with padding, icon
   left-aligned, input grows to fill, clear icon visible when value present.
   ============================================================================ */
#search_widget {
  display: inline-flex !important;
  align-items: center !important;
  background: rgba(0,0,0,0.025) !important;
  border: 1px solid var(--oks-line, rgba(0,0,0,0.12)) !important;
  border-radius: 0 !important;
  padding: 0 0.75rem !important;
  min-width: 200px;
  max-width: 360px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
#search_widget:focus-within {
  border-color: var(--oks-ink, #1a1a1a) !important;
  background: rgba(0,0,0,0.045) !important;
}
#search_widget form {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  width: 100% !important;
  margin: 0 !important;
}
#search_widget i.material-icons.search {
  font-size: var(--t-body);
  color: var(--oks-muted, #5d5448) !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  bottom: auto !important;
  right: auto !important;
  margin: 0 !important;
  order: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  vertical-align: middle !important;
  transform: translateY(0) !important;
  align-self: center !important;
}
#search_widget form {
  align-items: center !important;
}
#search_widget {
  align-items: center !important;
}
#search_widget input[type="text"] { order: 2 !important; }
#search_widget i.material-icons.clear { order: 3 !important; position: static !important; top: auto !important; right: auto !important; }
#search_widget input[type="text"] {
  padding: 0.55rem 0 !important;
  width: 100% !important;
  background: transparent !important;
  border: 0 !important;
  outline: none !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-size: var(--t-caption);
  letter-spacing: 0.1em !important;
}
#search_widget input::placeholder {
  color: var(--oks-muted, #5d5448) !important;
  opacity: 0.85 !important;
}
#search_widget i.material-icons.clear {
  font-size: var(--t-body);
  color: var(--oks-muted) !important;
  cursor: pointer !important;
  flex: 0 0 auto !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
/* Show clear icon when input has a value (sibling selector) */
#search_widget input[type="text"]:not(:placeholder-shown) ~ i.material-icons.clear {
  opacity: 1;
  pointer-events: auto;
}

/* Mobile: fuller width within the mobile menu drawer */
@media (max-width: 991px) {
  #search_widget {
    max-width: none !important;
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* ============================================================================
   F1 fix — featured products card polish
   - Hide .category-name (always renders "Inicio" for home-cat products, noise)
   - Allow product title to wrap to 2 lines via line-clamp (preserves ellipsis
     but uses 2 lines worth of space instead of mid-word truncation)
   - Tighten card spacing
   ============================================================================ */
.product-miniature .category-name {
  display: none !important;
}
.product-miniature .product-title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 2.5em;
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
  font-size: var(--t-md);
  line-height: 1.25 !important;
}
.product-miniature .product-title a {
  color: var(--oks-ink) !important;
  text-decoration: none !important;
}
.product-miniature .product-title a:hover {
  color: var(--oks-copper) !important;
}

/* Tighten product-description block spacing */
.product-miniature .product-description {
  padding: 0.75rem 0.5rem 1rem 0.5rem !important;
}
.product-miniature .product-price-and-shipping {
  margin: 0.25rem 0 0 0 !important;
  font-size: var(--t-body);
}

/* Section title — make less SHOUTY */
.featured-products .products-section-title,
.featured-products h2.products-section-title {
  font-family: var(--oks-font-serif, 'Cormorant Garamond', serif) !important;
  font-size: var(--t-xl);
  font-weight: 500 !important;
  font-style: italic !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  margin: 2rem 0 1.5rem 0 !important;
}

/* ============================================================================
   T1 fix — tablet (768-991px) menu wrap + search truncation
   At tablet width the col-md-10 right area is too narrow for 5 letter-spaced
   uppercase menu items + a 280px search input. Shrink menu typography and
   stack the search below the menu on its own full-width row.
   ============================================================================ */
@media (min-width: 768px) and (max-width: 991px) {
  .top-menu > li > a {
    font-size: var(--t-micro);
    letter-spacing: 0.08em !important;
    padding: 12px 7px !important;
  }
  .top-menu {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-around !important;
    overflow-x: auto;
  }
  .top-menu > li {
    flex: 0 0 auto !important;
  }
  /* Search: take full row width below menu, no truncation */
  #search_widget {
    min-width: 0 !important;
    max-width: none !important;
    width: 100% !important;
  }
}

/* ============================================================================
   M3 fix — Mobile footer columns: consistent always-expanded pattern.
   Before: PRODUCTOS/EMPRESA were chevron-collapsible accordions while
   INFORMACIÓN was a title-only link (inconsistent visual pattern).
   Fix: on mobile, show all 3 column headers + their content inline. Hide the
   chevron toggle wrappers entirely.
   ============================================================================ */
@media (max-width: 767px) {
  /* Show .hidden-sm-down content on mobile inside footer columns */
  #footer .footer-container .col-md-6.links .h3.hidden-sm-down,
  #footer .footer-container .block-contact .hidden-sm-down {
    display: block !important;
  }
  /* Hide the mobile chevron toggle headers */
  #footer .footer-container .col-md-6.links .title.hidden-md-up,
  #footer .footer-container .block-contact .hidden-md-up {
    display: none !important;
  }
  /* Show submenu lists always (no collapse on mobile) */
  #footer .footer-container .col-md-6.links ul.collapse,
  #footer .footer-container .col-md-6.links ul[id^="footer_sub_menu_"] {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
  }
  /* Stack columns vertically with consistent spacing */
  #footer .footer-container .col-md-6.links > .row > .col-md-6.wrapper {
    margin-bottom: 1.5rem !important;
  }
  #footer .footer-container .col-md-6.links,
  #footer .footer-container .block-contact {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 1.5rem !important;
  }
  /* Mobile: list items typography matches block-contact body */
  #footer .footer-container .col-md-6.links ul[id^="footer_sub_menu_"],
  #footer .footer-container .col-md-6.links ul.collapse {
    background: transparent !important;
    padding-left: 0 !important;
  }
  #footer .footer-container .col-md-6.links ul li {
    background: transparent !important;
    border: 0 !important;
    padding: 0.3rem 0 !important;
    list-style: none !important;
  }
  #footer .footer-container .col-md-6.links ul li a {
    color: var(--oks-bg) !important;
    text-decoration: none !important;
    line-height: 1.6 !important;
    background: transparent !important;
    padding: 0 !important;
  }
  #footer .footer-container .col-md-6.links ul li a:hover {
    color: var(--oks-copper) !important;
  }
}

/* ============================================================================
   L1 + S1 + M2 + M3a — Header polish wave (2026-05-12)
   - L1: logo too small (was max-height:56px). Bump to 96px desktop, 72 tablet.
   - S1: search bar orphaned on row 2. Make logo|menu|search a single flex row
         so the layout reads as a coherent strip.
   - M2: menu border-top creates a partial line. Remove .top-menu border-top
         and the orphan active-state border on Mapas. Replace with a single
         full-width separator below the entire header-top area.
   - M3a: submenu Polonia/España rendering inline. Force vertical block list.
   ============================================================================ */

/* L1 — Logo size */
#header .logo,
#header #_desktop_logo img,
#header #_desktop_logo .logo {
  max-height: 96px !important;
  height: auto !important;
  width: auto !important;
}
@media (max-width: 991px) {
  #header .logo,
  #header #_mobile_logo img {
    max-height: 64px !important;
  }
}
/* Give logo column more vertical room to match larger logo */
#header .header-top { padding: 18px 0 !important; }

/* S1 — Put menu + search on a single row aligned with logo */
@media (min-width: 992px) {
  #header .header-top > .container > .row {
    align-items: center !important;
  }
  #header .header-top .header-top-right {
    display: flex !important;
    align-items: center !important;
    gap: 1.5rem !important;
  }
  /* ps_mainmenu wrapper grows; search shrinks to its natural width */
  #header .header-top .header-top-right > .js-top-menu,
  #header .header-top .header-top-right > #_desktop_top_menu,
  #header .header-top .header-top-right > nav,
  #header .header-top .header-top-right > .top-menu {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  #header .header-top .header-top-right > #search_widget,
  #header .header-top .header-top-right #search_widget {
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }
}

/* M2 — Replace menu top-border with a single under-the-header separator */
.top-menu {
  border-top: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
}
#header .header-top {
  border-bottom: 1px solid var(--oks-line, rgba(0,0,0,0.12));
}
/* Active state border: keep but make it consistent (only on active/hover, no orphaned) */
.top-menu > li > a,
.top-menu > li.category > a.dropdown-item {
  border-bottom: 2px solid transparent !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}
.top-menu > li > a:hover,
.top-menu > li.active > a,
.top-menu > li.current > a,
.top-menu > li:hover > a {
  border-bottom-color: var(--oks-ink, #14110d) !important;
  color: var(--oks-ink, #14110d) !important;
  background: transparent !important;
}

/* M3a — Submenu Polonia/España vertical stacking */
.top-menu .sub-menu ul,
.top-menu .popover ul,
.sub-menu.popover ul {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}
.top-menu .sub-menu ul > li,
.top-menu .popover ul > li,
.sub-menu.popover ul > li {
  display: block !important;
  width: 100% !important;
  float: none !important;
  list-style: none !important;
}
.top-menu .sub-menu ul > li > a,
.top-menu .popover ul > li > a,
.sub-menu.popover ul > li > a {
  display: block !important;
  width: 100% !important;
  padding: 8px 16px !important;
  color: var(--oks-ink, #14110d) !important;
  text-decoration: none !important;
  font-size: var(--t-caption);
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border-bottom: 0 !important;
}
.top-menu .sub-menu ul > li > a:hover,
.top-menu .popover ul > li > a:hover {
  background: transparent !important; /* F3 2026-06-05: no bg on hover (was rgba(0,0,0,.04)) */
  color: var(--oks-copper) !important;
}
/* Nested .collapse inside submenu — open by default (we want the full menu visible on hover) */
.top-menu .sub-menu .collapse,
.top-menu .popover .collapse {
  display: block !important;
  height: auto !important;
  visibility: visible !important;
}
.top-menu .sub-menu .dropdown-submenu {
  font-weight: 500 !important;
  color: var(--oks-muted, #5d5448) !important;
  font-size: var(--t-micro);
  letter-spacing: 0.15em !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
  padding-bottom: 6px !important;
  margin-bottom: 6px !important;
  /* IS a real link (e.g., /16-mapas-de-ciudades) — must remain clickable */
}
/* Submenu container appearance */
.top-menu .sub-menu.popover,
.top-menu .popover {
  background: var(--oks-bg, #fafaf7) !important;
  border: 1px solid var(--oks-line, rgba(0,0,0,0.12)) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
  border-radius: 0 !important;
  padding: 12px 0 !important;
  min-width: 220px !important;
}

/* Tablet: keep simpler single-row but maintain the menu-only behaviour */
@media (min-width: 768px) and (max-width: 991px) {
  #header .header-top { padding: 12px 0 !important; }
}

/* L1+S1 v2 — tighten menu padding + slightly narrower search so single-row layout fits */
@media (min-width: 992px) {
  .top-menu > li > a,
  .top-menu > li.category > a.dropdown-item {
    padding-left: 14px !important;
    padding-right: 14px !important;
    font-size: var(--t-caption);
    letter-spacing: 0.15em !important;
  }
  #header .header-top #search_widget {
    min-width: 240px !important;
    max-width: 280px !important;
  }
  /* Force the top-level menu UL onto one line. SCOPED with #top-menu so
     nested submenus inside .popover (Polonia/España) are not affected. */
  #header .header-top ul#top-menu {
    display: flex !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    padding-left: 0 !important;
    margin-bottom: 0 !important;
  }
  #header .header-top ul#top-menu > li {
    flex: 0 0 auto !important;
    list-style: none !important;
  }
}

/* ============================================================================
   CAT-3 + CAT polish — Category page filters & product cards.
   - Allow property labels to wrap to 2 lines instead of truncating
   - Tighten sidebar typography for better density
   - Product card title 2-line clamp (consistent with homepage F1)
   ============================================================================ */

#search_filters .facet,
.facet {
  margin-bottom: 1.5rem;
}
#search_filters .facet-label,
.facet .facet-label {
  display: block !important;
  font-size: var(--t-caption);
  line-height: 1.4 !important;
  letter-spacing: 0.05em !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  text-transform: uppercase !important;
  color: var(--oks-ink, #14110d) !important;
}
#search_filters .facet-title,
.facet .facet-title {
  font-family: var(--oks-font-serif, 'Cormorant Garamond', serif) !important;
  font-size: var(--t-md);
  font-weight: 500 !important;
  margin-bottom: 0.6rem !important;
  color: var(--oks-ink, #14110d) !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
}
#search_filters h4,
#search_filters .h4 {
  font-family: var(--oks-font-serif, 'Cormorant Garamond', serif) !important;
  font-size: var(--t-md);
  font-weight: 500 !important;
}
#search_filters label,
.facet label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.5rem !important;
  cursor: pointer !important;
  margin-bottom: 0.45rem !important;
}
#search_filters input[type="checkbox"],
.facet input[type="checkbox"] {
  flex: 0 0 auto !important;
  margin-top: 0.2rem !important;
}
#search_filters .facet-title-block,
.block-categories .category-top-menu,
.block-categories .category-sub-menu,
.products-section-title {
  /* keep clean */
}
/* "FILTER BY" main header */
#search_filters > h4,
#search_filters .filter-header,
#search_filters .h2 {
  font-family: var(--oks-font-sans) !important;
  font-size: var(--t-caption);
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  margin-bottom: 1rem !important;
  font-weight: 500 !important;
}

/* Product card title — make 2-line clamp consistent everywhere (categ, search, list pages) */
.products .product-miniature .product-title,
#products .product-miniature .product-title,
.product-list .product-miniature .product-title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
  font-size: var(--t-body);
  line-height: 1.3 !important;
}

/* Product flag ribbons — colours for ON SALE etc. Keep red but normalise typography. */
.product-flag,
.product-flags .product-flag {
  font-family: var(--oks-font-sans) !important;
  font-size: var(--t-micro);
  letter-spacing: 0.14em !important;
  padding: 4px 10px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
}

/* "There are X productos" line — make less prominent */
#js-product-list-top .total-products,
.total-products {
  font-family: var(--oks-font-sans) !important;
  font-size: var(--t-micro);
  letter-spacing: 0.12em !important;
  color: var(--oks-muted, #5d5448) !important;
  text-transform: uppercase !important;
}

/* Sort dropdown styling */
.products-sort-order .select-title,
#products-section-title {
  font-family: var(--oks-font-sans) !important;
  font-size: var(--t-micro);
  letter-spacing: 0.12em !important;
}

/* Subcategories section — title less shouty */
.subcategories h2,
.subcategories .h2,
#subcategories .h2 {
  font-family: var(--oks-font-serif, 'Cormorant Garamond', serif) !important;
  font-size: var(--t-lg);
  font-weight: 500 !important;
  font-style: italic !important;
  margin-bottom: 1rem !important;
}

/* ============================================================================
   Cart/Checkout header — DEAD BLOCK REMOVED 2026-06-03.
   Earlier sessions hand-styled the reduced classic checkout/_partials/header.tpl
   (logo + #contact-link single row; it forced .header-nav background:var(--oks-bg)).
   We now override checkout/_partials/header.tpl + footer.tpl to render the FULL
   site header/footer on cart + checkout (chrome parity, user decision 2026-06-03),
   so those reduced-header rules were dead AND forced the dark utility bar to cream
   on these pages. Removed. Cart *content* styles remain below.
   ============================================================================ */

/* Cart body padding */
body.page-cart #wrapper {
  padding: 2rem 0 4rem 0 !important;
}
body.page-cart .page-content {
  background: transparent !important;
}

/* Cart title "Tu cesta" */
body.page-cart .page-content h1,
body.page-cart .page-content .h1,
body.page-cart .page-header h1 {
  font-family: var(--oks-font-serif, 'Cormorant Garamond', serif) !important;
  font-size: var(--t-2xl);
  font-weight: 500 !important;
  font-style: italic !important;
  color: var(--oks-ink, #14110d) !important;
  margin-bottom: 1.5rem !important;
}

/* Cart empty state message */
body.page-cart.cart-empty .cart-empty,
body.page-cart .cart-overview .alert {
  background: var(--oks-surface, #ffffff) !important;
  border: 1px solid var(--oks-line, rgba(0,0,0,0.08)) !important;
  border-radius: 0 !important;
  padding: 1.5rem 2rem !important;
  font-size: var(--t-body);
  color: var(--oks-ink, #14110d) !important;
}

/* Continue shopping link */
body.page-cart .cart-grid-body .continue,
body.page-cart .label.js-continue {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  font-family: var(--oks-font-sans) !important;
  font-size: var(--t-caption);
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--oks-ink, #14110d) !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent !important;
  padding: 0.6rem 0 !important;
  margin-top: 1rem !important;
}
body.page-cart .cart-grid-body .continue:hover,
body.page-cart .label.js-continue:hover {
  border-bottom-color: currentColor !important;
}

/* ============================================================================
   Forms & CMS pages — Login / Register / Contact / My Account / CMS pages
   - Polish form inputs to match design language
   - Style page headers consistently (italic serif)
   - Style buttons/labels with mono caps
   - Form group layout: label left, input right (desktop) or stacked (mobile)
   ============================================================================ */

/* Page header (h1 + breadcrumb) — consistent across all non-product pages */
body.page-customer-account .page-header h1,
body.page-authentication .page-header h1,
body.page-contact .page-header h1,
body.page-cms .page-header h1,
body.page-stores .page-header h1,
body.page-not-found .page-header h1,
body.page-pagenotfound .page-header h1,
body.page-search .page-header h1,
.page-content > h1.h1,
.page-header > h1 {
  font-family: var(--oks-font-serif, 'Cormorant Garamond', Georgia, serif) !important;
  font-size: var(--t-2xl);
  font-weight: 500 !important;
  font-style: italic !important;
  color: var(--oks-ink, #14110d) !important;
  margin-bottom: 1.5rem !important;
}

/* Generic form inputs — bordered cream, focus accent */
form input[type="text"]:not([name="s"]),
form input[type="email"],
form input[type="password"],
form input[type="tel"],
form input[type="number"],
form input[type="url"],
form input[type="search"]:not([name="s"]),
form select,
form textarea,
.form-control:not(.input-group .form-control) {
  background: var(--oks-surface, #ffffff) !important;
  border: 1px solid var(--oks-line, rgba(0,0,0,0.12)) !important;
  border-radius: 0 !important;
  padding: 0.7rem 1rem !important;
  font-family: inherit !important;
  font-size: var(--t-body);
  color: var(--oks-ink, #14110d) !important;
  width: 100% !important;
  box-shadow: none !important;
}
form input[type="text"]:not([name="s"]):focus,
form input[type="email"]:focus,
form input[type="password"]:focus,
form input[type="tel"]:focus,
form textarea:focus,
form select:focus,
.form-control:not(.input-group .form-control):focus {
  outline: none !important;
  border-color: var(--oks-ink, #14110d) !important;
  background: var(--oks-surface, #ffffff) !important;
}

/* NL-001 fix: newsletter input in dark footer must stay dark on focus/autofill.
   Higher specificity overrides the generic white-bg focus rule above. */
#oks-nl-email:focus,
#oks-nl-email:focus-within,
.oks-footer-nl__input:focus,
.block_newsletter input[name="email"]:focus {
  background: var(--oks-walnut-inset, #0f0c08) !important;
  color: var(--oks-ivory, #f4ede2) !important;
  border-color: transparent !important;
  outline: none !important;
  -webkit-text-fill-color: var(--oks-ivory, #f4ede2) !important;
}
/* Autofill in dark newsletter */
#oks-nl-email:-webkit-autofill,
.oks-footer-nl__input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px var(--oks-walnut-inset, #0f0c08) inset !important;
  -webkit-text-fill-color: var(--oks-ivory, #f4ede2) !important;
  caret-color: var(--oks-ivory, #f4ede2) !important;
}

/* Form labels — mono caps */
form label,
.form-control-label,
.col-form-label,
label.form-control-label {
  font-family: var(--oks-font-sans) !important;
  font-size: var(--t-caption);
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--oks-ink, #14110d) !important;
  margin-bottom: 0.45rem !important;
  font-weight: 500 !important;
}

/* Primary buttons — dark ink */
form button[type="submit"],
.btn-primary,
button.btn-primary,
input[type="submit"].btn-primary,
button.form-control-submit,
.continue.btn-primary {
  background: var(--oks-ink, #14110d) !important;
  color: var(--oks-bg, #fafaf7) !important;
  border: 1px solid var(--oks-ink, #14110d) !important;
  border-radius: 0 !important;
  font-family: var(--oks-font-sans) !important;
  font-size: var(--t-caption);
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  padding: 0.85rem 1.8rem !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
form button[type="submit"]:hover,
.btn-primary:hover,
button.btn-primary:hover {
  background: var(--oks-copper) !important;
  border-color: var(--oks-copper) !important;
  color: var(--oks-bg, #fafaf7) !important;
}

/* Secondary (e.g., SHOW password) buttons */
button.btn-secondary,
.input-group-btn button[type="button"],
.btn-default {
  background: var(--oks-surface, #ffffff) !important;
  color: var(--oks-ink, #14110d) !important;
  border: 1px solid var(--oks-line, rgba(0,0,0,0.15)) !important;
  border-radius: 0 !important;
  font-family: var(--oks-font-sans) !important;
  font-size: var(--t-micro);
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 0.5rem 0.9rem !important;
}

/* "Forgot your password?" link */
.forgot-password a,
.forgot-password,
a.forgot-password {
  font-size: var(--t-caption);
  color: var(--oks-muted, #5d5448) !important;
  text-decoration: underline !important;
  display: inline-block !important;
  margin-top: 0.5rem !important;
}
.forgot-password a:hover {
  color: var(--oks-copper) !important;
}

/* "No account? Create one here" line */
.no-account,
.no-account a {
  font-size: var(--t-body);
  color: var(--oks-ink, #14110d) !important;
}
.no-account a {
  text-decoration: underline !important;
  font-weight: 500 !important;
}

/* Form card containers */
/* Form card chrome — scope to specific login/register/contact forms only.
   Earlier `#authentication form` also matched the newsletter form in the footer,
   making it render as a white card on auth pages. Now whitelist by id/class. */
section#authentication #login-form,
section#authentication #customer-form,
.form-fields,
#authentication .form-fields,
.contact-form,
.register-form {
  background: var(--oks-surface, #ffffff) !important;
  border: 1px solid var(--oks-line, rgba(0,0,0,0.08)) !important;
  padding: 2rem !important;
  border-radius: 0 !important;
}
/* Ensure the footer newsletter form NEVER gets a white card (override the
   broad section#content.page-content if it inherits) */
#footer .block_newsletter form,
.block_newsletter form {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

/* Field help text */
.form-control-comment,
small.form-control-comment,
.form-group small,
.help-block {
  font-size: var(--t-caption);
  color: var(--oks-muted, #5d5448) !important;
  font-style: normal !important;
  margin-top: 0.4rem !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-family: inherit !important;
}

/* Checkbox + label layout — checkboxes inline */
.custom-checkbox,
.custom-control {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.6rem !important;
  margin-bottom: 0.6rem !important;
}
.custom-checkbox input[type="checkbox"],
.custom-control input {
  flex: 0 0 auto !important;
  margin-top: 0.2rem !important;
}
.custom-checkbox span,
.custom-control-label {
  font-size: var(--t-caption);
  color: var(--oks-ink, #14110d) !important;
  font-family: inherit !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  font-weight: 400 !important;
}

/* Radio button rows — Sr./Sra. */
.form-group .radio-inline {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
  margin-right: 1rem !important;
  font-size: var(--t-body);
}

/* File input chrome (Choose file) */
.custom-file,
.input-group-file {
  position: relative;
}
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
  background: var(--oks-ink, #14110d) !important;
  color: var(--oks-bg, #fafaf7) !important;
  border: 0 !important;
  padding: 0.5rem 1rem !important;
  font-family: var(--oks-font-sans) !important;
  font-size: var(--t-micro);
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  margin-right: 0.8rem !important;
}

/* CMS page content — readable typography */
body.page-cms #content h1,
body.page-cms .cms-block h1,
body.page-cms .page-content h1 {
  font-style: italic !important;
}
body.page-cms #content h2,
body.page-cms .cms-block h2,
body.page-cms .page-content h2 {
  font-family: var(--oks-font-serif, 'Cormorant Garamond', serif) !important;
  font-size: var(--t-lg);
  font-weight: 500 !important;
  margin: 2rem 0 0.8rem 0 !important;
  color: var(--oks-ink, #14110d) !important;
}
body.page-cms p,
body.page-cms li {
  font-size: var(--t-body);
  line-height: 1.65 !important;
  color: var(--oks-ink, #14110d) !important;
}

/* 404 page — make message prominent */
body.page-pagenotfound .page-not-found,
body.page-not-found .page-not-found {
  max-width: 720px;
  margin: 2rem auto;
  text-align: center;
  padding: 2rem !important;
}
body.page-pagenotfound #content h1,
body.page-not-found #content h1 {
  text-align: center !important;
  font-size: var(--t-2xl);
}

/* Empty state cards — consistent across cart / search / 404 / category-empty */
.alert-warning,
.alert-info,
.page-content.page-not-found .alert,
.featured-products .alert {
  background: var(--oks-surface, #ffffff) !important;
  border: 1px solid var(--oks-line, rgba(0,0,0,0.08)) !important;
  border-left: 3px solid var(--oks-copper) !important;
  border-radius: 0 !important;
  padding: 1.2rem 1.5rem !important;
  color: var(--oks-ink, #14110d) !important;
  font-size: var(--t-body);
}

/* Sort dropdown polish (any list page) */
.products-sort-order .select-list,
.products-sort-order .dropdown-menu {
  background: var(--oks-surface, #ffffff) !important;
  border: 1px solid var(--oks-line, rgba(0,0,0,0.12)) !important;
  border-radius: 0 !important;
  padding: 0.3rem 0 !important;
}

/* Breadcrumb on every page (already mostly styled — ensure consistency) */
.breadcrumb,
ol.breadcrumb {
  background: transparent !important;
  padding: 0.8rem 0 !important;
  font-family: var(--oks-font-sans) !important;
  font-size: var(--t-caption);
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--oks-line, rgba(0,0,0,0.08)) !important;
}
.breadcrumb a,
.breadcrumb li,
.breadcrumb-item {
  color: var(--oks-muted, #5d5448) !important;
}
.breadcrumb a:hover {
  color: var(--oks-copper) !important;
}
.breadcrumb .active,
.breadcrumb li:last-child {
  color: var(--oks-ink, #14110d) !important;
  font-weight: 500 !important;
}

/* =============================================================================
   AUDIT REMEDIATION WAVE — 2026-05-12
   Fixes: P0 (CC-4 modal), P1 (CAT-A/B/C sidebar, CAT-E pagination, CAT-F slider,
   CAT-H wishlist, CMS-B measure, LOG-C newsletter input, BEST-A facet),
   P2 (CC-9 token aliases, CC-7 focus ring, CAT-J checkbox accent, FIX-5 flags,
   FIX-8 footer hover fallback, CAT-G sort size)
   ============================================================================= */

/* ---- FIX-1: BLOCK-CATEGORIES / PS_CATEGORYTREE SIDEBAR (P1: CAT-A, CAT-B, CAT-C, CC-3) ----
   Root cause: zero theme rules targeted these selectors — Classic defaults bled through.
   All 5 listing page types (category, sub-category, best-sellers, new-products,
   prices-drop) render block-categories in #left-column — this fix covers them all. */
.block-categories,
#left-column .block-categories,
#left-column .ps-categorytree {
  background: var(--oks-bg) !important;
  border: 0 !important;
  padding: 0 !important;
}

/* Top-level parent label (e.g. "INICIO") */
.block-categories .category-top-menu > li > a {
  font-family: var(--oks-sans) !important;
  font-size: var(--t-micro);
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  color: var(--oks-muted) !important;
  display: block !important;
  padding: 0 0 10px 0 !important;
  border-bottom: 1px solid var(--oks-line) !important;
  margin-bottom: 12px !important;
  text-decoration: none !important;
}

/* Category list items */
.block-categories .category-sub-menu {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}
.block-categories .category-sub-menu > li {
  border-bottom: 1px solid var(--oks-line-soft) !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* Category links — mono caps (CAT-B) */
.block-categories .category-sub-menu > li > a {
  font-family: var(--oks-sans) !important;
  font-size: var(--t-caption);
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--oks-ink) !important;
  font-weight: 400 !important;
  display: block !important;
  padding: 4px 0 !important;
  transition: color 0.15s ease !important;
  text-decoration: none !important;
}
.block-categories .category-sub-menu > li > a:hover {
  color: var(--oks-copper) !important;
  text-decoration: none !important;
}

/* Active/current category — serif italic (CAT-C) */
.block-categories .category-sub-menu > li > a.active,
.block-categories .category-sub-menu > li.current > a,
.block-categories .category-sub-menu > li.active > a,
.block-categories .category-sub-menu > li > a[aria-current] {
  font-family: var(--oks-serif) !important;
  font-style: italic !important;
  font-size: var(--t-body);
  color: var(--oks-ink) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-weight: 400 !important;
}

/* Sub-sub links (depth-2) */
.block-categories .category-sub-link,
.block-categories .category-sub-menu li ul li a {
  font-family: var(--oks-sans) !important;
  font-size: var(--t-micro);
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--oks-muted) !important;
  padding: 3px 0 3px 12px !important;
  display: block !important;
  text-decoration: none !important;
}
.block-categories .category-sub-link:hover,
.block-categories .category-sub-menu li ul li a:hover {
  color: var(--oks-copper) !important;
}

/* Collapse/expand icons (CAT-D) */
.block-categories .navbar-toggler.collapse-icons,
.block-categories .arrows {
  color: var(--oks-muted) !important;
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
}
.block-categories .navbar-toggler.collapse-icons .material-icons,
.block-categories .arrows .material-icons {
  font-size: var(--t-body);
  color: var(--oks-muted) !important;
  line-height: 1 !important;
}

/* ---- FIX-2: PAGINATION FONT-SIZE CONSISTENCY (P1: CAT-E, PS8-2) ----
   Classic sets .current LI to a larger font-size that bleeds into the anchor.
   More-specific rule overrides both current and non-current anchors uniformly. */
nav.pagination ul.page-list li a,
nav.pagination ul.page-list li.current a,
nav.pagination ul.page-list li .current {
  font-family: var(--oks-sans) !important;
  font-size: var(--t-caption);
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--oks-ink) !important;
  padding: 8px 14px !important;
  min-width: 36px !important;
  text-align: center !important;
  display: inline-block !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  line-height: 1.4 !important;
}
nav.pagination ul.page-list li.current a,
nav.pagination ul.page-list li.current .current {
  border-bottom-color: var(--oks-ink) !important;
  font-weight: 600 !important;
}
nav.pagination ul.page-list li a:hover {
  color: var(--oks-copper) !important;
  border-bottom-color: var(--oks-copper) !important;
}

/* ---- FIX-3: JQUERY UI PRICE RANGE SLIDER (P1: CAT-F, CC-5) ----
   Completely unstyled jQuery UI defaults replaced with design-token values. */
.ui-slider {
  background: var(--oks-line) !important;
  border: 0 !important;
  border-radius: 0 !important;
  height: 3px !important;
  margin: 10px 6px !important;
  position: relative !important;
}
.ui-slider-range {
  background: var(--oks-ink) !important;
  border-radius: 0 !important;
  height: 100% !important;
}
.ui-slider-handle {
  background: var(--oks-ink) !important;
  border: 0 !important;
  border-radius: 50% !important;
  width: 14px !important;
  height: 14px !important;
  top: -6px !important;
  margin-left: -7px !important;
  cursor: grab !important;
  box-shadow: none !important;
  transition: background 0.15s ease !important;
  outline: none !important;
}
.ui-slider-handle:hover,
.ui-slider-handle:focus,
.ui-slider-handle.ui-state-active {
  background: var(--oks-copper) !important;
  cursor: grabbing !important;
}
#facets_controller_inner_classes_container .price-range,
.price-range,
.facet .price-range,
#left-column .price-range {
  font-family: var(--oks-sans) !important;
  font-size: var(--t-caption);
  letter-spacing: 0.12em !important;
  color: var(--oks-ink) !important;
  margin-top: 12px !important;
}

/* ---- FIX-4: WISHLIST BUTTON STYLING (P1: CAT-H, CC-6) ----
   ps_wishlist renders white/black circles — replace with brand design tokens. */
.wishlist-button-add,
button.wishlist-button-add,
a.wishlist-button-add {
  background: var(--oks-bg) !important;
  color: var(--oks-muted) !important;
  border: 1px solid var(--oks-line) !important;
  border-radius: 0 !important;
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: color 0.15s ease, border-color 0.15s ease !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.wishlist-button-add:hover,
.wishlist-button-add:focus,
.wishlist-button-add.wishlist-button-product,
.wishlist-button-add.active {
  color: var(--oks-copper) !important;
  border-color: var(--oks-copper) !important;
  background: var(--oks-bg) !important;
}
.wishlist-button-add .material-icons {
  font-size: var(--t-body);
  line-height: 1 !important;
}

/* ---- FIX-5: PRODUCT FLAG CLASS SELECTOR BROADENING (P2: SRCH-C, CC-10, PS8-3) ----
   PS8 uses class names discount-percentage / discount-amount — not matched by old rule. */
.product-flag.on_sale,
.product-flag.on-sale,
.product-flag.discount,
.product-flag.discount-percentage,
.product-flag.discount-amount,
.product-flag[class*="discount"],
.product-flag[class*="sale"] {
  background: var(--oks-copper) !important;
  color: var(--oks-bg) !important;
}

/* ---- FIX-6: CHECKBOX ACCENT COLOUR (P2: CAT-J) ---- */
#search_filters input[type="checkbox"],
.facet input[type="checkbox"],
form input[type="checkbox"] {
  accent-color: var(--oks-copper) !important;
}

/* ---- FIX-7 already addressed via :root token aliases above (CC-9) ---- */

/* ---- FIX-8: FOOTER HOVER FALLBACK — remove stale #c5532c fallback (P2) ---- */
#footer .footer-container .oks-footer-brand .oks-footer-logo:hover,
#footer .footer-container a:hover {
  color: var(--oks-copper) !important;
}

/* ---- FIX-9: CMS BODY TEXT MAX-WIDTH + MEASURE (P1: CMS-B) ----
   paragraphs span full column at 1440px — constrain to 72ch for readability. */
.page-cms .page-content p,
.page-cms .cms-block p,
body.page-cms #content p,
body.page-cms .page-content p {
  max-width: 72ch !important;
  font-size: var(--t-body);
  line-height: 1.7 !important;
}

/* ---- FIX-10: FOCUS RING BRANDING (P2: CC-7) ----
   Replace browser-default 5px auto outline with crisp design-system ring. */
:focus-visible {
  outline: 2px solid var(--oks-ink) !important;
  outline-offset: 3px !important;
  box-shadow: none !important;
}
/* Inputs use border-color for focus state — suppress duplicate outline */
form input:focus-visible,
form textarea:focus-visible,
form select:focus-visible,
.form-control:focus-visible {
  outline: none !important;
}

/* ---- FIX-11: ADD-TO-CART MODAL VISIBILITY (P0: CC-4, PDP-A) ----
   Ensure #blockcart-modal and its Bootstrap backdrop render above everything.
   The JS (blockcart.showModal) calls .modal("show") correctly but if a z-index
   war or stacking-context issue on .header-nav buries the backdrop, the modal
   appears to not show. Force z-index hierarchy. */
#blockcart-modal {
  z-index: 1080 !important;
}
#blockcart-modal .modal-dialog {
  z-index: 1081 !important;
}
.modal-backdrop {
  z-index: 1079 !important;
}
#blockcart-modal .modal-content {
  background: var(--oks-bg) !important;
  border: 1px solid var(--oks-line) !important;
  border-radius: 0 !important;
  box-shadow: 0 8px 32px rgba(20,17,13,0.18) !important;
}
#blockcart-modal .modal-header {
  border-bottom: 1px solid var(--oks-line) !important;
  padding: 1rem 1.5rem !important;
  background: var(--oks-bg) !important;
}
#blockcart-modal .modal-title {
  font-family: var(--oks-sans) !important;
  font-size: var(--t-caption);
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--oks-ink) !important;
}
#blockcart-modal .modal-body {
  padding: 1.5rem !important;
  background: var(--oks-bg) !important;
}
#blockcart-modal .modal-footer {
  border-top: 1px solid var(--oks-line) !important;
  padding: 1rem 1.5rem !important;
  background: var(--oks-bg) !important;
  gap: 0.75rem !important;
  display: flex !important;
  flex-wrap: wrap !important;
}
/* Cart modal product info */
#blockcart-modal .cart-content-btn .btn {
  font-family: var(--oks-sans) !important;
  font-size: var(--t-caption);
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  padding: 0.75rem 1.5rem !important;
}
#blockcart-modal .cart-products-count {
  font-family: var(--oks-sans) !important;
  font-size: var(--t-caption);
  color: var(--oks-muted) !important;
  letter-spacing: 0.12em !important;
}

/* ---- FIX-12: STORES PAGE MAP CONTAINER MIN-HEIGHT (P0: STOR-A) ----
   The PS Stores module iframe renders at ~0px height when no map is configured.
   Give the container a visible minimum so the page is not an empty frame. */
#stores .store-map,
.store-map,
#page-stores .store-search,
.page-stores #content {
  min-height: 200px !important;
}
.store-map iframe {
  min-height: 300px !important;
  width: 100% !important;
  border: 1px solid var(--oks-line) !important;
}

/* ---- FIX: NEWSLETTER INPUT VISIBILITY ON DARK FOOTER (P1: LOG-C) ----
   The email input on the dark footer background is nearly invisible.
   Increase border opacity and add a subtle background tint. */
#footer .block_newsletter input[type="email"],
#footer .block_newsletter input[type="text"],
#footer .block_newsletter form input[type="email"] {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  color: var(--oks-bg) !important;
  border-radius: 0 !important;
}
#footer .block_newsletter input[type="email"]::placeholder,
#footer .block_newsletter form input[type="email"]::placeholder {
  color: rgba(250, 250, 247, 0.55) !important;
}
#footer .block_newsletter input[type="email"]:focus,
#footer .block_newsletter form input[type="email"]:focus {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.15) !important;
}

/* ---- FIX: FACET LABEL FULL-WIDTH HIT AREA (P1: BEST-A) ----
   Facet labels must cover the full visible label text as clickable area. */
#search_filters .facet .facet-label,
.facet .facet-label {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.5rem !important;
  cursor: pointer !important;
  width: 100% !important;
  min-height: 24px !important;
}
#search_filters .facet .facet-label a,
.facet .facet-label a {
  flex: 1 !important;
  min-width: 0 !important;
  color: var(--oks-ink) !important;
  text-decoration: none !important;
}

/* ---- FIX: CAT-G SORT DROPDOWN MINIMUM SIZE ----
   10.5px is below design-system minimum 12px for secondary UI text. */
.products-sort-order .select-title,
#products-section-title {
  font-size: var(--t-caption);
}

/* ---- FIX: HOMEPAGE CAROUSEL IMAGE MOBILE (P1: HOM-4) ----
   At 390px the slider image fails to show. Ensure the slider container
   has a defined height and images scale correctly on mobile. */
@media (max-width: 575.98px) {
  .homeslider .slick-slide,
  .ps_imageslider .slick-slide,
  #homeslider .slick-slide,
  .slider-container .slick-slide {
    min-height: 240px !important;
  }
  .homeslider img,
  .ps_imageslider img,
  #homeslider img,
  .slider-container img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    display: block !important;
  }
}

/* ============================================================================
   F1 fix — cart in header is a <div>, not a link. ps_shoppingcart renders
   .blockcart .header with no <a>. Add cursor:pointer for affordance; JS
   adds a click handler that navigates to /carrito.
   ============================================================================ */
#header .blockcart,
#header #_desktop_cart .blockcart,
#header .blockcart .header,
.blockcart .header > .material-icons.shopping-cart {
  cursor: pointer !important;
}

/* ============================================================================
   CC-4 v3 — Add-to-cart modal proper Bootstrap-style centring + chrome.
   Bootstrap 4 modal base styles aren't fully loaded by Classic, so the dialog
   ends up oversized + mis-positioned. Force a centred, reasonable-size dialog
   with our editorial card styling.
   ============================================================================ */
#blockcart-modal.modal {
  background: rgba(20, 17, 13, 0.55) !important; /* visible dark backdrop directly on .modal */
  overflow-y: auto !important;
  padding: 2rem 1rem !important;
}
#blockcart-modal .modal-dialog {
  max-width: 720px !important;
  width: auto !important;
  margin: 4rem auto !important;
  pointer-events: auto !important;
}
#blockcart-modal .modal-content {
  background: var(--oks-surface, #ffffff) !important;
  border: 1px solid var(--oks-line, rgba(0,0,0,0.12)) !important;
  border-radius: 0 !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.18) !important;
  padding: 0 !important;
}
#blockcart-modal .modal-header {
  background: transparent !important;
  border-bottom: 1px solid var(--oks-line, rgba(0,0,0,0.08)) !important;
  padding: 1.2rem 1.5rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.8rem !important;
}
#blockcart-modal .modal-title {
  font-family: var(--oks-font-serif, 'Cormorant Garamond', serif) !important;
  font-size: var(--t-lg);
  font-weight: 500 !important;
  font-style: italic !important;
  color: var(--oks-ink, #14110d) !important;
  margin: 0 !important;
}
#blockcart-modal .modal-header .close,
#blockcart-modal .modal-header button.close {
  background: transparent !important;
  border: 0 !important;
  font-size: var(--t-lg);
  cursor: pointer !important;
  margin-left: auto !important;
  padding: 0 !important;
  color: var(--oks-muted, #5d5448) !important;
}
#blockcart-modal .modal-body {
  padding: 1.5rem !important;
  font-size: var(--t-body);
  line-height: 1.5 !important;
}
#blockcart-modal .modal-body img.product-image,
#blockcart-modal .modal-body .product-image {
  max-width: 100% !important;
  height: auto !important;
}
#blockcart-modal .modal-body .product-name,
#blockcart-modal .modal-body .cart-content .product-name {
  font-family: var(--oks-font-serif, 'Cormorant Garamond', serif) !important;
  font-size: var(--t-md);
  font-weight: 500 !important;
}
#blockcart-modal .modal-body .product-price,
#blockcart-modal .modal-body .price {
  font-size: var(--t-md);
  font-weight: 500 !important;
}
#blockcart-modal .modal-footer,
#blockcart-modal .cart-content-btn {
  display: flex !important;
  gap: 0.8rem !important;
  padding: 1.2rem 1.5rem !important;
  border-top: 1px solid var(--oks-line, rgba(0,0,0,0.08)) !important;
  justify-content: flex-end !important;
  flex-wrap: wrap !important;
}
#blockcart-modal .modal-footer .btn,
#blockcart-modal .cart-content-btn .btn {
  font-family: var(--oks-font-sans) !important;
  font-size: var(--t-caption);
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 0.7rem 1.4rem !important;
  border-radius: 0 !important;
  font-weight: 500 !important;
}
#blockcart-modal .btn-primary,
#blockcart-modal .cart-content-btn .btn-primary {
  background: var(--oks-ink, #14110d) !important;
  color: var(--oks-bg, #fafaf7) !important;
  border-color: var(--oks-ink, #14110d) !important;
}
#blockcart-modal .btn-secondary,
#blockcart-modal .cart-content-btn .btn-secondary {
  background: transparent !important;
  color: var(--oks-ink, #14110d) !important;
  border: 1px solid var(--oks-line, rgba(0,0,0,0.18)) !important;
}
body.modal-open { overflow: hidden !important; }
.modal-backdrop { display: none !important; } /* using .modal background instead */

/* ============================================================================
   CC-4 v4 — Bootstrap modal opacity + transform reset.
   Only bootstrap-grid.min.css is loaded (not full bootstrap.css), so the
   .modal.fade base rule (opacity:0, transform translateY) exists from classic
   but the .show counterpart is missing. Force opacity 1 + identity transform
   when .show is present. THIS is what makes the modal visible.
   ============================================================================ */
.modal.fade.show,
#blockcart-modal.modal.fade.show,
#blockcart-modal.show {
  opacity: 1 !important;
}
.modal.show .modal-dialog,
#blockcart-modal.show .modal-dialog {
  transform: none !important;
  -webkit-transform: none !important;
}
.modal.fade {
  opacity: 0;
  transition: opacity 0.15s linear;
}
.modal.fade .modal-dialog {
  transform: translate(0, -25%);
  transition: transform 0.3s ease-out;
}

/* ============================================================================
   FIX-G — Category page product grid: 3 columns desktop, 2 tablet, 1 mobile.
   Classic theme uses .product-miniature as direct .row children at 50% width.
   With a left sidebar, this gives 2-column display with huge cards/empty space.
   Override to denser grid.
   ============================================================================ */
/* Grid parent — override grid-template-columns on .products.row (Classic uses
   CSS Grid, not Flex). 3 cols desktop with sidebar, 2 cols tablet, 1 col mobile. */
.products.row,
#js-product-list .products.row {
  display: grid !important;
  gap: 1.5rem !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.products.row > .product-miniature,
#js-product-list .products.row > .product-miniature {
  max-width: none !important;
  flex: unset !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-bottom: 0 !important;
}
@media (min-width: 768px) and (max-width: 991px) {
  .products.row,
  #js-product-list .products.row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 767px) {
  .products.row,
  #js-product-list .products.row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ============================================================================
   FIX-PDP — Social sharing block on product detail page.
   Classic markup: <div class="social-sharing"><span>Compartir</span><ul>...
   Each <li> has a class (.facebook / .twitter / .pinterest) and an <a> with
   .text-hide. The .text-hide utility isn't applied in current build, so the
   "Compartir" text appears next to each icon. Style the block as a clean
   icon strip with the brand colours.
   ============================================================================ */
.social-sharing {
  display: flex !important;
  align-items: center !important;
  gap: 0.8rem !important;
  margin: 1.2rem 0 !important;
  padding: 0 !important;
}
.social-sharing > span {
  font-family: var(--oks-font-sans) !important;
  font-size: var(--t-caption);
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--oks-muted, #5d5448) !important;
  margin-right: 0.3rem !important;
}
.social-sharing ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  gap: 0.5rem !important;
  align-items: center !important;
}
.social-sharing ul li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--oks-line, rgba(0,0,0,0.15)) !important;
  border-radius: 50% !important;
  transition: background 0.15s ease, border-color 0.15s ease !important;
  background-color: var(--oks-surface, #ffffff) !important;
  background-image: none !important; /* kill the classic sprite on the <li> so only the <a> SVG shows (was doubling the FB icon) */
}
.social-sharing ul li:hover {
  background: var(--oks-ink, #14110d) !important;
  border-color: var(--oks-ink, #14110d) !important;
}
.social-sharing ul li a {
  display: inline-block !important;
  width: 100% !important;
  height: 100% !important;
  /* Hide the text content (Compartir / Tweet / Pinterest) — visual is the icon below */
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  text-decoration: none !important;
  background-position: center !important;
  background-size: 16px 16px !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
}
.social-sharing ul li:hover a {
  filter: invert(1) brightness(2);
}
/* Inline SVG icons via background-image (data URIs) */
.social-sharing ul li.facebook a {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2314110d'><path d='M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.879V14.89h-2.54V12h2.54v-2.203c0-2.507 1.493-3.892 3.777-3.892 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.563V12h2.773l-.443 2.89h-2.33V21.88C18.343 21.128 22 16.99 22 12z'/></svg>") !important;
}
.social-sharing ul li.twitter a {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2314110d'><path d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'/></svg>") !important;
}
.social-sharing ul li.pinterest a {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2314110d'><path d='M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.402.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.92-7.252 4.158 0 7.392 2.967 7.392 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.357-.629-2.748-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12.017 24c6.624 0 11.99-5.367 11.99-11.988C24.007 5.367 18.641.001 12.017.001z'/></svg>") !important;
}
/* Instagram = PROFILE link (no web share-intent); added via theme override of
   ps_sharebuttons (2026-06-04). Same 32px circle as the FB/Pinterest buttons. */
.social-sharing ul li.instagram a {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2314110d'><path d='M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.43.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.43.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41a3.7 3.7 0 0 1-1.38-.9 3.7 3.7 0 0 1-.9-1.38c-.16-.43-.36-1.06-.41-2.23C2.17 15.58 2.16 15.2 2.16 12s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.43-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16M12 0C8.74 0 8.33.01 7.05.07 5.78.13 4.9.34 4.14.63c-.79.3-1.46.72-2.13 1.38C1.35 2.68.94 3.35.63 4.14.34 4.9.13 5.78.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.06 1.27.27 2.15.56 2.91.3.79.72 1.46 1.38 2.13.67.66 1.34 1.08 2.13 1.38.76.3 1.64.5 2.91.56C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c1.27-.06 2.15-.27 2.91-.56a5.9 5.9 0 0 0 2.13-1.38 5.9 5.9 0 0 0 1.38-2.13c.3-.76.5-1.64.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.27-.27-2.15-.56-2.91a5.9 5.9 0 0 0-1.38-2.13A5.9 5.9 0 0 0 19.86.63c-.76-.3-1.64-.5-2.91-.56C15.67.01 15.26 0 12 0zm0 5.84A6.16 6.16 0 1 0 18.16 12 6.16 6.16 0 0 0 12 5.84zm0 10.16A4 4 0 1 1 16 12a4 4 0 0 1-4 4zm6.4-11.85a1.44 1.44 0 1 0 1.44 1.44 1.44 1.44 0 0 0-1.44-1.44z'/></svg>") !important;
}

/* ============================================================================
   FIX-I1 — 404 page: hide irrelevant "empty products" message, add helpful CTA.
   PrestaShop renders an empty-products alert on the 404 page that confuses
   users. Replace with a proper "Back to home" message.
   ============================================================================ */
body.page-pagenotfound #content.page-content.page-not-found > h4,
body.page-pagenotfound #content.page-content.page-not-found > p {
  display: none !important;
}
body.page-pagenotfound #content.page-content.page-not-found {
  text-align: center;
  padding: 2rem 0 4rem 0;
}
body.page-pagenotfound #content .oks-404-back {
  display: inline-block;
  margin: 2rem auto;
  font-family: var(--oks-font-sans);
  font-size: var(--t-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--oks-ink, #14110d);
  color: var(--oks-bg, #fafaf7);
  padding: 0.9rem 2rem;
  border-radius: 0;
  text-decoration: none;
  transition: background 0.15s ease;
}
body.page-pagenotfound #content .oks-404-back:hover {
  background: var(--oks-copper);
  color: var(--oks-bg, #fafaf7);
}

/* ============================================================================
   FIX-I2-I3 — list page titles (best-sellers, new-products, prices-drop, sitemap).
   These pages render <h1 class="h2"> instead of being inside .page-header, so
   the previous page-header selector didn't match. Force italic-serif large
   title on these specific pages.
   ============================================================================ */
body.page-best-sales h1#js-product-list-header,
body.page-best-sales h1.h2,
body.page-new-products h1#js-product-list-header,
body.page-new-products h1.h2,
body.page-prices-drop h1#js-product-list-header,
body.page-prices-drop h1.h2,
body.page-sitemap h1,
body.page-stores h1,
body.page-search h1#js-product-list-header,
body.page-search h1.h2,
body.page-pagenotfound h1 {
  font-family: var(--oks-font-serif, 'Cormorant Garamond', Georgia, serif) !important;
  font-size: var(--t-2xl);
  font-weight: 500 !important;
  font-style: italic !important;
  color: var(--oks-ink, #14110d) !important;
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  margin: 1.5rem 0 1.5rem 0 !important;
  line-height: 1.2 !important;
}

/* ============================================================================
   FIX-QTY — Quantity stepper (Bootstrap-touchspin) on PDP + cart.
   Was rendering as tall vertical column (input on top, huge gap, then arrows
   stacked). Force compact horizontal layout: input on left, +/- stacked
   tight on right.
   ============================================================================ */
.bootstrap-touchspin,
.input-group.bootstrap-touchspin,
.product-quantity .input-group {
  display: inline-flex !important;
  align-items: stretch !important;
  max-width: 130px !important;
  min-width: 100px !important;
  position: relative !important;
  border: 1px solid var(--oks-line, rgba(0,0,0,0.18)) !important;
  background: var(--oks-surface, #ffffff) !important;
  height: 48px !important;
}
.bootstrap-touchspin input,
.bootstrap-touchspin input.form-control,
.bootstrap-touchspin input.input-group,
.product-quantity .input-group input[type="number"] {
  width: 70px !important;
  max-width: 70px !important;
  flex: 0 0 70px !important;
  height: 100% !important;
  border: 0 !important;
  text-align: center !important;
  font-family: var(--oks-font-sans) !important;
  font-size: var(--t-body);
  background: transparent !important;
  padding: 0 !important;
  -moz-appearance: textfield !important;
  appearance: textfield !important;
  box-shadow: none !important;
}
.bootstrap-touchspin input::-webkit-outer-spin-button,
.bootstrap-touchspin input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
.bootstrap-touchspin .input-group-btn-vertical {
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 30px !important;
  width: 30px !important;
  border-left: 1px solid var(--oks-line, rgba(0,0,0,0.18)) !important;
  height: 100% !important;
  position: static !important;
  top: auto !important;
}
.bootstrap-touchspin .input-group-btn-vertical button,
.bootstrap-touchspin .btn-touchspin {
  flex: 1 1 50% !important;
  height: 24px !important;
  min-height: 0 !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  color: var(--oks-ink, #14110d) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: var(--t-micro);
  position: static !important;
  letter-spacing: 0 !important;
  font-family: inherit !important;
  text-transform: none !important;
}
.bootstrap-touchspin .btn-touchspin.bootstrap-touchspin-up {
  border-bottom: 1px solid var(--oks-line, rgba(0,0,0,0.12)) !important;
}
.bootstrap-touchspin .btn-touchspin:hover {
  background: var(--oks-bg, #fafaf7) !important;
  color: var(--oks-copper) !important;
}
.bootstrap-touchspin .btn-touchspin i.material-icons {
  font-size: var(--t-body);
  line-height: 1 !important;
}
.bootstrap-touchspin .btn-touchspin i.material-icons.touchspin-up,
.bootstrap-touchspin .btn-touchspin i.material-icons.touchspin-down {
  font-size: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}
.bootstrap-touchspin .btn-touchspin i.material-icons.touchspin-up::after {
  content: "▲" !important;
  font-size: var(--t-caption);
  font-family: var(--oks-font-sans) !important;
  color: var(--oks-ink, #14110d) !important;
  line-height: 1 !important;
  display: inline-block !important;
}
.bootstrap-touchspin .btn-touchspin i.material-icons.touchspin-down::after {
  content: "▼" !important;
  font-size: var(--t-caption);
  font-family: var(--oks-font-sans) !important;
  color: var(--oks-ink, #14110d) !important;
  line-height: 1 !important;
  display: inline-block !important;
}
.bootstrap-touchspin .btn-touchspin:hover i.material-icons::after {
  color: var(--oks-copper) !important;
}
/* Cart page quantity stepper — same widget, slightly different selector */
.cart-item .product-line-grid .qty .input-group.bootstrap-touchspin {
  max-width: 110px !important;
  min-width: 90px !important;
  height: 40px !important;
}
.cart-item .product-line-grid .qty .input-group.bootstrap-touchspin input {
  width: 60px !important;
  max-width: 60px !important;
  flex: 0 0 60px !important;
}
.cart-item .product-line-grid .qty .input-group.bootstrap-touchspin .input-group-btn-vertical {
  flex: 0 0 28px !important;
  width: 28px !important;
}

/* ============================================================================
   FIX-SORT + FIX-PAG2 — Sort row + pagination row redesign.
   - Sort: "Ordenar por:" + dropdown inline on one line, compact button
   - Pag bottom: "Mostrando X-Y de Z artículos" one line; pagination inline
   ============================================================================ */

/* Top sort row */
#js-product-list-top.products-selection {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1.2rem !important;
  margin: 1.2rem 0 !important;
  padding: 0.9rem 1.2rem !important;
  background: var(--oks-surface, #ffffff) !important;
  border: 1px solid var(--oks-line, rgba(0,0,0,0.08)) !important;
  flex-wrap: wrap !important;
}
#js-product-list-top.products-selection .total-products {
  flex: 0 0 auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
#js-product-list-top.products-selection .total-products p {
  margin: 0 !important;
  font-family: var(--oks-font-sans) !important;
  font-size: var(--t-caption);
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--oks-muted, #5d5448) !important;
}
#js-product-list-top.products-selection > .col-lg-7 {
  flex: 0 0 auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  margin-left: auto !important;
}
#js-product-list-top .sort-by-row {
  display: flex !important;
  align-items: center !important;
  gap: 0.7rem !important;
  margin: 0 !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
}
#js-product-list-top .sort-by {
  flex: 0 0 auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: var(--oks-font-sans) !important;
  font-size: var(--t-caption);
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--oks-muted, #5d5448) !important;
  display: inline-block !important;
  white-space: nowrap !important;
  width: auto !important;
}
#js-product-list-top .products-sort-order {
  flex: 0 0 auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 200px !important;
}
#js-product-list-top .products-sort-order .select-title {
  background: transparent !important;
  border: 1px solid var(--oks-line, rgba(0,0,0,0.18)) !important;
  border-radius: 0 !important;
  padding: 0.45rem 0.8rem !important;
  font-family: var(--oks-font-sans) !important;
  font-size: var(--t-caption);
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--oks-ink, #14110d) !important;
  width: 100% !important;
  text-align: left !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  cursor: pointer !important;
  height: auto !important;
  min-height: 0 !important;
}
#js-product-list-top .products-sort-order .select-title:hover {
  border-color: var(--oks-ink, #14110d) !important;
}
#js-product-list-top .products-sort-order .select-title i.material-icons {
  font-size: var(--t-body);
  float: none !important;
  margin-left: 0.4rem !important;
}
#js-product-list-top .products-sort-order .dropdown-menu {
  background: var(--oks-surface, #ffffff) !important;
  border: 1px solid var(--oks-line, rgba(0,0,0,0.12)) !important;
  border-radius: 0 !important;
  padding: 0.3rem 0 !important;
  min-width: 220px !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08) !important;
}
#js-product-list-top .products-sort-order .select-list {
  display: block !important;
  padding: 0.55rem 0.9rem !important;
  font-family: var(--oks-font-sans) !important;
  font-size: var(--t-caption);
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--oks-ink, #14110d) !important;
  text-decoration: none !important;
}
#js-product-list-top .products-sort-order .select-list:hover {
  background: var(--oks-bg, #fafaf7) !important;
  color: var(--oks-copper) !important;
}
#js-product-list-top .products-sort-order .select-list.current {
  background: var(--oks-bg-alt, #f1efe8) !important;
  font-weight: 600 !important;
}

/* Pagination row at bottom */
.pagination,
nav.pagination,
.products-section .pagination {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1.2rem !important;
  margin: 1.8rem 0 !important;
  padding: 0.9rem 1.2rem !important;
  background: var(--oks-surface, #ffffff) !important;
  border: 1px solid var(--oks-line, rgba(0,0,0,0.08)) !important;
  flex-wrap: nowrap !important;
}
.pagination .col-md-4,
.pagination > .col-md-4 {
  flex: 0 1 auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  white-space: nowrap !important;
}
.pagination .showing,
.pagination .col-md-4:first-child {
  font-family: var(--oks-font-sans) !important;
  font-size: var(--t-caption);
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--oks-muted, #5d5448) !important;
  white-space: nowrap !important;
}
.pagination .col-md-4:last-child,
.pagination > .col-md-4:last-child {
  margin-left: auto !important;
  text-align: right !important;
}
.pagination .page-list {
  display: inline-flex !important;
  gap: 0 !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: transparent !important;
}
.pagination .page-list li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: transparent !important;
  border: 0 !important;
}
.pagination .page-list li a,
.pagination .page-list li .disabled,
.pagination .page-list li span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 32px !important;
  height: 32px !important;
  padding: 0 0.5rem !important;
  font-family: var(--oks-font-sans) !important;
  font-size: var(--t-caption);
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--oks-ink, #14110d) !important;
  text-decoration: none !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  font-weight: 500 !important;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.pagination .page-list li.current a,
.pagination .page-list li a.disabled,
.pagination .page-list li.disabled a {
  border-bottom-color: var(--oks-ink, #14110d) !important;
}
.pagination .page-list li a:hover {
  color: var(--oks-copper) !important;
}
.pagination .next a,
.pagination .previous a {
  padding: 0 0.8rem !important;
}

/* ============================================================================
   FIX-SUBCAT + FIX-INICIO-DUPE
   - "INICIO" sidebar header is a redundant duplicate of the breadcrumb's first
     "Inicio" item — hide it.
   - Subcategorías cards have huge empty card area with a small image —
     remove the inflated card height so image+label sit tight.
   - Sort row "Hay X productos" + "Ordenar por" wrapping to 2 lines on
     subcategory pages because the inner col-md-* grid forces line break at
     intermediate breakpoints. Force the inner sort-by-row to fit on one line.
   ============================================================================ */

/* Hide sidebar "INICIO" parent-category header (duplicate of breadcrumb) */
.block-categories .category-top-menu > .category-sub-menu,
aside .block-categories > .block-category-inner > a.h6,
aside .block-categories .category-top-menu > li:first-child > a,
.block-categories > h2:first-child,
.block-categories > .h6:first-child,
.block-categories .category-top-menu > li > a[href$="/"]:not([href*="-"]) {
  display: none !important;
}
/* In our markup the "INICIO" text is the FIRST <a> in the sidebar that points
   to the root (or has parent-category-id). Easier: hide first <a> in sidebar
   if its text content is the root category. We can't text-match in CSS but we
   can hide via class. Use JS at the bottom of theme.js as fallback. */

/* Subcategorías card — compact, image-led. The default classic theme gives
   the wrapper a large height; the image is tiny inside. Make image fill the
   card naturally with an aspect ratio + tight padding. */
.subcategories .subcategory,
#subcategories .subcategory,
.subcategories ul.subcategories-list li,
.subcategories > .row > div,
#subcategories > .row > div {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 1.5rem 0 !important;
}
.subcategories .subcategory-image,
#subcategories .subcategory-image,
.subcategories a.subcategory-image,
#subcategories a.subcategory-image,
.subcategories .img,
.subcategories .subcategory-heading + a,
.subcategories img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--oks-bg-alt, #f1efe8) !important;
}
.subcategories img {
  aspect-ratio: 4/5 !important;
  object-fit: cover !important;
}
.subcategories .subcategory-name,
#subcategories .subcategory-name,
.subcategories h5,
.subcategories h6 {
  margin: 0.6rem 0 0 0 !important;
  padding: 0 !important;
  font-family: var(--oks-font-sans) !important;
  font-size: var(--t-caption);
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--oks-ink, #14110d) !important;
  text-align: center !important;
  font-weight: 500 !important;
}
/* Subcategorías container grid — match products grid */
.subcategories > .row,
#subcategories > .row {
  display: grid !important;
  gap: 1.5rem !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
@media (max-width: 991px) {
  .subcategories > .row,
  #subcategories > .row { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 767px) {
  .subcategories > .row,
  #subcategories > .row { grid-template-columns: 1fr !important; }
}

/* Sort row — force inline on subcategory pages too. Add stronger overrides
   for the col-md-4/5/7 widths that Bootstrap might restore. */
@media (min-width: 768px) {
  #js-product-list-top.products-selection {
    flex-wrap: nowrap !important;
  }
  #js-product-list-top.products-selection .total-products {
    flex: 0 1 auto !important;
    width: auto !important;
  }
  #js-product-list-top.products-selection .col-lg-7,
  #js-product-list-top.products-selection > div:last-child {
    flex: 0 1 auto !important;
    width: auto !important;
    margin-left: auto !important;
  }
  #js-product-list-top .sort-by-row {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.7rem !important;
    flex-wrap: nowrap !important;
    width: auto !important;
  }
  #js-product-list-top .sort-by,
  #js-product-list-top span.sort-by {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }
  #js-product-list-top .products-sort-order {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 200px !important;
    max-width: 280px !important;
  }
}

/* ============================================================================
   COOKIE CONSENT BANNER (LSSI-CE + AEPD 2024 compliant)
   Mandatory on every page until consent recorded.
   - First layer: notice + Accept / Reject / Configure (equal prominence)
   - Persists choice in localStorage 12 months
   - Layer 2: Configure modal with granular toggles (necessary | preferences |
     analytics | marketing)
   - Non-essential cookies are NOT loaded until consent
   ============================================================================ */
#oks-cookie-banner {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 99998 !important;
  background: var(--oks-ink, #14110d) !important;
  color: var(--oks-bg, #fafaf7) !important;
  padding: 1.4rem 1.6rem !important;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.18) !important;
  display: none;
  font-family: inherit;
}
#oks-cookie-banner.is-visible { display: block !important; }
#oks-cookie-banner .oks-cookie-row {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
}
#oks-cookie-banner .oks-cookie-msg {
  flex: 1 1 380px;
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--oks-bg, #fafaf7);
}
#oks-cookie-banner .oks-cookie-msg strong {
  display: block;
  font-family: var(--oks-font-serif, 'Cormorant Garamond', serif);
  font-size: var(--t-md);
  font-style: italic;
  font-weight: 500;
  margin-bottom: 0.3rem;
}
#oks-cookie-banner .oks-cookie-msg a {
  color: var(--oks-bg, #fafaf7);
  text-decoration: underline;
}
#oks-cookie-banner .oks-cookie-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  flex: 0 0 auto;
}
#oks-cookie-banner .oks-cookie-btn {
  font-family: var(--oks-font-sans);
  font-size: var(--t-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.75rem 1.4rem;
  border: 1px solid var(--oks-bg, #fafaf7);
  background: transparent;
  color: var(--oks-bg, #fafaf7);
  cursor: pointer;
  border-radius: 0;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
#oks-cookie-banner .oks-cookie-btn:hover,
#oks-cookie-banner .oks-cookie-btn-accept {
  background: var(--oks-bg, #fafaf7);
  color: var(--oks-ink, #14110d);
}
#oks-cookie-banner .oks-cookie-btn-accept:hover {
  background: var(--oks-copper);
  color: var(--oks-bg, #fafaf7);
  border-color: var(--oks-copper);
}

/* Layer 2 — granular configuration modal */
#oks-cookie-config-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(20,17,13,0.6) !important;
  z-index: 99999 !important;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
#oks-cookie-config-backdrop.is-visible { display: flex !important; }
#oks-cookie-config {
  background: var(--oks-surface, #ffffff);
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 1.8rem;
  border: 1px solid var(--oks-line, rgba(0,0,0,0.12));
}
#oks-cookie-config h2 {
  font-family: var(--oks-font-serif, 'Cormorant Garamond', serif);
  font-size: var(--t-lg);
  font-style: italic;
  font-weight: 500;
  margin: 0 0 1rem 0;
  color: var(--oks-ink, #14110d);
}
#oks-cookie-config p.oks-intro {
  font-size: var(--t-body);
  color: var(--oks-muted, #5d5448);
  margin: 0 0 1.4rem 0;
  line-height: 1.5;
}
#oks-cookie-config .oks-cookie-cat {
  border-top: 1px solid var(--oks-line, rgba(0,0,0,0.08));
  padding: 1.1rem 0;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
#oks-cookie-config .oks-cookie-cat:last-of-type {
  border-bottom: 1px solid var(--oks-line, rgba(0,0,0,0.08));
}
#oks-cookie-config .oks-cookie-cat-text {
  flex: 1 1 auto;
}
#oks-cookie-config .oks-cookie-cat h3 {
  font-family: var(--oks-font-sans);
  font-size: var(--t-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 0.3rem 0;
  font-weight: 500;
  color: var(--oks-ink, #14110d);
}
#oks-cookie-config .oks-cookie-cat p {
  font-size: var(--t-caption);
  color: var(--oks-muted, #5d5448);
  margin: 0;
  line-height: 1.4;
}
#oks-cookie-config .oks-toggle {
  flex: 0 0 auto;
  width: 42px;
  height: 22px;
  background: var(--oks-line, rgba(0,0,0,0.18));
  border-radius: 0;
  position: relative;
  cursor: pointer;
  transition: background 0.15s ease;
}
#oks-cookie-config .oks-toggle::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: var(--oks-surface, #ffffff);
  transition: left 0.15s ease;
}
#oks-cookie-config .oks-toggle.is-on {
  background: var(--oks-ink, #14110d);
}
#oks-cookie-config .oks-toggle.is-on::before {
  left: 22px;
}
#oks-cookie-config .oks-toggle.is-locked {
  cursor: not-allowed;
  opacity: 0.5;
}
#oks-cookie-config .oks-cookie-config-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.4rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}
#oks-cookie-config .oks-cookie-btn {
  font-family: var(--oks-font-sans);
  font-size: var(--t-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.7rem 1.2rem;
  border: 1px solid var(--oks-ink, #14110d);
  background: transparent;
  color: var(--oks-ink, #14110d);
  cursor: pointer;
  border-radius: 0;
}
#oks-cookie-config .oks-cookie-btn.is-primary {
  background: var(--oks-ink, #14110d);
  color: var(--oks-bg, #fafaf7);
}

/* Mobile adjustments */
@media (max-width: 767px) {
  #oks-cookie-banner { padding: 1.2rem 1rem !important; }
  #oks-cookie-banner .oks-cookie-row { flex-direction: column; align-items: stretch; gap: 1rem; }
  #oks-cookie-banner .oks-cookie-msg { flex: 1 1 auto; }
  #oks-cookie-banner .oks-cookie-actions { justify-content: stretch; }
  #oks-cookie-banner .oks-cookie-btn { flex: 1 1 auto; text-align: center; padding: 0.85rem 0.8rem; }
}

/* ============================================================================
   TYPO + SPACING normalisation pass (2026-05-13)
   - All "page title" H1s (product, cart, login, register, contact, account,
     CMS) use the same italic-serif 36px size
   - Category pages keep their BIG 48px uppercase editorial style (different
     role: browsing vs. content) but standardised at 2rem on tablet, 1.75rem
     on mobile
   - Body paragraph base: 15px on mobile, 16px on desktop
   - Reduce homepage top padding above hero
   - Login/register: stack label above input on tighter form, equal-width cols
   ============================================================================ */

/* H1 page-title standardisation (non-category pages) */
body.page-product h1.h1,
body.page-product h1[itemprop="name"],
body.page-cart .page-content h1,
body.page-cart .page-header h1,
body.page-customer-account h1,
body.page-authentication h1,
body.page-contact h1,
body.page-cms h1,
body.page-stores h1,
body.page-search h1#js-product-list-header,
body.page-best-sales h1#js-product-list-header,
body.page-new-products h1#js-product-list-header,
body.page-prices-drop h1#js-product-list-header,
body.page-sitemap h1,
body.page-pagenotfound h1 {
  font-family: var(--oks-font-serif, 'Cormorant Garamond', Georgia, serif) !important;
  font-size: var(--t-xl); /* 36px */
  font-style: italic !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.005em !important;
  margin: 1.5rem 0 1.5rem 0 !important;
  text-transform: none !important;
}
@media (max-width: 767px) {
  body.page-product h1.h1,
  body.page-cart .page-content h1,
  body.page-customer-account h1,
  body.page-authentication h1,
  body.page-contact h1,
  body.page-cms h1,
  body.page-stores h1,
  body.page-search h1,
  body.page-best-sales h1,
  body.page-new-products h1,
  body.page-prices-drop h1,
  body.page-sitemap h1,
  body.page-pagenotfound h1 {
    font-size: var(--t-xl); /* 28px on mobile */
  }
}

/* Category title (the BIG editorial caps) — standardise across breakpoints */
body.page-category h1,
body.page-category .page-header h1,
body.page-category #content-wrapper > h1,
body.page-indexed-category h1 {
  font-family: var(--oks-font-serif, 'Cormorant Garamond', Georgia, serif) !important;
  font-size: var(--t-2xl); /* 48px */
  font-style: normal !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  line-height: 1.1 !important;
  margin: 1.5rem 0 1rem 0 !important;
}
@media (max-width: 991px) {
  body.page-category h1,
  body.page-indexed-category h1 { font-size: var(--t-xl); }
}
@media (max-width: 767px) {
  body.page-category h1,
  body.page-indexed-category h1 { font-size: var(--t-xl); }
}

/* Body paragraph base */
p, .page-content p, .product-description p, #wrapper p {
  font-size: var(--t-body); /* ~15px */
  line-height: 1.55;
}
@media (min-width: 992px) {
  p, .page-content p, .product-description p { font-size: var(--t-body); } /* 16px on desktop */
}

/* Homepage hero — reduce top padding so hero isn't pushed too far down */
body.page-index #wrapper, body.page-index main {
  padding-top: 0 !important;
}
@media (max-width: 767px) {
  body.page-index .oks-manifesto,
  body.page-index #content-wrapper > section:first-child {
    padding-top: 1.5rem !important;
  }
}

/* Login / Register — stack the label above input on form-fields-wrapper.
   Currently the .col-md-5 label + .col-md-7 input layout looks unbalanced
   because the label column is too narrow for 2-line wrapped labels like
   "CORREO ELECTRÓNICO". Switch to stacked single-column layout. */
@media (min-width: 768px) {
  body.page-authentication .form-group.row {
    display: block !important;
    margin-bottom: 1rem !important;
  }
  body.page-authentication .form-group.row > .col-md-5 {
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    padding: 0 !important;
    margin-bottom: 0.4rem !important;
  }
  body.page-authentication .form-group.row > .col-md-7 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
}

/* Consistent page-content body spacing */
body.page-authentication #content,
body.page-cms #content,
body.page-contact #content,
body.page-customer-account #content,
body.page-cart #content {
  padding-top: 1rem !important;
  padding-bottom: 3rem !important;
}

/* Breadcrumb consistent margin */
.breadcrumb {
  margin-top: 1.2rem !important;
  margin-bottom: 1.2rem !important;
  padding: 0.7rem 0 !important;
}

/* Reduce excessive gaps between page sections */
@media (max-width: 767px) {
  #wrapper > .container > .row > #content-wrapper > section {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
}

/* ============================================================================
   MOBILE TIGHT — reduce letter-spacing on uppercase tracked elements at
   small viewports so Polish/long Spanish words don't push to edges.
   ============================================================================ */
@media (max-width: 767px) {
  /* Menu items */
  .top-menu > li > a {
    letter-spacing: 0.08em !important;
    font-size: var(--t-caption);
    padding: 0.85rem 1rem !important;
  }
  /* Sidebar category items */
  .block-categories a {
    letter-spacing: 0.08em !important;
  }
  /* Sort row + total products */
  #js-product-list-top .sort-by,
  #js-product-list-top .total-products p,
  #js-product-list-top .products-sort-order .select-title {
    letter-spacing: 0.06em !important;
    font-size: var(--t-micro);
  }
  /* Footer column headers */
  #footer .footer-container .col-md-6.links .h3,
  #footer .footer-container .block-contact-title {
    letter-spacing: 0.08em !important;
    font-size: var(--t-caption);
  }
  /* Pagination */
  .pagination .page-list li a {
    letter-spacing: 0.04em !important;
    font-size: var(--t-micro);
    min-width: 28px !important;
    padding: 0 0.3rem !important;
  }
  /* Top dark utility bar */
  #header .header-nav,
  #header .header-nav a,
  #header .header-nav .text {
    letter-spacing: 0.06em !important;
    font-size: var(--t-micro);
  }
  /* Product card titles - shrink to fit */
  .product-miniature .product-title {
    font-size: var(--t-body);
    line-height: 1.25 !important;
  }
  .product-miniature .product-price-and-shipping {
    font-size: var(--t-body);
  }
  /* Heading at top of newsletter / footer headers */
  #footer .block_newsletter > .row > #block-newsletter-label.col-md-5 {
    letter-spacing: 0.08em !important;
    font-size: var(--t-caption);
  }
  /* Filter labels */
  #search_filters .facet-label {
    font-size: var(--t-caption);
    letter-spacing: 0.04em !important;
  }
  /* Page titles - tighter on mobile too */
  body.page-category h1,
  body.page-product h1.h1,
  body.page-cart h1,
  body.page-authentication h1,
  body.page-contact h1,
  body.page-cms h1 {
    letter-spacing: 0.01em !important;
  }
  /* Hero text manifesto */
  .oks-hero-title, .oks-manifesto-line, h2.h2-display {
    letter-spacing: 0 !important;
  }
}

/* Font subsetting: ensure latin-ext subset is loaded for Polish/Czech etc. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-variable.woff2') format('woff2-variations');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- F-QA-001: respect prefers-reduced-motion ----
   WCAG 2.3.3 (AAA), best practice. Disable carousel slides, all transitions,
   and animations for users who request reduced motion. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .carousel-item,
  .carousel-inner > .carousel-item {
    transition: none !important;
  }
}

/* ============================================================================
   SLIDER CAPTION — kill the broken desktop absolute-positioned overlay.
   Classic theme positions .caption absolute on desktop with white description
   text — invisible on the cream/wood banner backgrounds. Force same caption
   pattern at all viewports: dark semi-opaque card BELOW the image (which is
   what already works on mobile/tablet).
   2026-05-17: see project memory project_fal_banners_2026-05-17.
   ============================================================================ */
#index #carousel .caption,
.page-index #carousel .caption {
  position: static !important;
  left: auto !important; right: auto !important;
  top: auto !important; bottom: auto !important;
  width: 100% !important; max-width: 100% !important;
  padding: 1.25rem 1.5rem !important;
  background: rgba(20, 17, 13, 0.86) !important;
  color: #faf8f4 !important;
  text-align: center !important;
  text-shadow: none !important;
}
#index #carousel .caption h2,
#index #carousel .caption .display-1,
.page-index #carousel .caption h2,
.page-index #carousel .caption .display-1 {
  font-family: var(--oks-serif, "Cormorant Garamond", serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: var(--t-xl);
  letter-spacing: 0.01em !important;
  color: #faf8f4 !important;
  margin: 0 0 .35rem !important;
  text-transform: none !important;
  line-height: 1.15 !important;
}
#index #carousel .caption .caption-description,
.page-index #carousel .caption .caption-description {
  font-family: var(--oks-sans) !important;
  font-size: var(--t-caption);
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(250, 248, 244, 0.82) !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

/* ============================================================================
   2026-05-17: Three targeted polish fixes from session feedback.
   ============================================================================ */

/* ---- #3: Mobile menu icon must meet WCAG 2.5.5 minimum touch target (44x44).
   The #menu-icon click handler in theme.js already toggles #mobile_top_menu_wrapper
   correctly — the bug was that the bare material icon was only ~24px wide, too
   small to reliably tap on a phone. Wrap in a proper button-sized hit area. */
@media (max-width: 767.98px) {
  #menu-icon {
    min-width: 48px !important;
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 12px !important;
    margin-left: -8px !important; /* keep visual anchor at original position */
    cursor: pointer !important;
  }
  #menu-icon .material-icons {
    font-size: var(--t-lg);
    line-height: 1 !important;
  }
}

/* ---- #5: hero (oks-manifesto) — too much vertical space between header and
   the "Estudio · Valencia · 2024" eyebrow on every page. Reduce top padding.
   This applies to the existing top hero block, not the new editorial manifesto. */
.oks-home .oks-manifesto,
.page-home .oks-manifesto {
  padding-top: clamp(1.25rem, 3vw, 2.25rem) !important;
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem) !important;
}
.oks-home .oks-manifesto .oks-eyebrow,
.page-home .oks-manifesto .oks-eyebrow {
  margin-top: 0 !important;
  margin-bottom: 0.5rem !important;
}

/* ---- #6: Facet sidebar typography hierarchy.
   Existing rules already style .facet-title and .facet-label, but "Filtrar por"
   (the top-level filter heading rendered as <p class="text-uppercase h6">) had
   no specific rule and was inheriting Bootstrap's default .h6 — mismatching the
   editorial styling around it. Give it a proper eyebrow look matching the rest
   of the site's uppercase mono accents. */
#search_filters > p.text-uppercase.h6,
#search_filters > p.h6.text-uppercase {
  font-family: var(--oks-sans) !important;
  font-size: var(--t-caption);
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--oks-copper, var(--oks-copper)) !important;
  margin: 0 0 1.5rem !important;
  padding-bottom: 0.75rem !important;
  border-bottom: 1px solid var(--oks-line, rgba(20, 17, 13, 0.12)) !important;
}
/* Tighten facet-title to italic serif (matches manifesto pillars + carousel caption) */
#search_filters .facet-title,
.facet .facet-title {
  font-style: italic !important;
}
/* Make option-label option count look quieter (already small caps) */
#search_filters .facet-label .facet-label-count,
.facet .facet-label .facet-label-count,
#search_filters .facet-label,
.facet .facet-label {
  font-family: var(--oks-sans) !important;
}

/* ============================================================================
   2026-05-17 (followup): user pushback — manifesto too tall + hero gap still
   too big + space between products and manifesto too generous.
   ============================================================================ */

/* HERO: reduce top padding further (was clamp 20-36, now 8-16) so header→hero
   gap is minimal. */
.oks-home .oks-manifesto,
.page-home .oks-manifesto {
  padding-top: clamp(0.5rem, 1.2vw, 1rem) !important;
  padding-bottom: clamp(0.75rem, 1.5vw, 1.25rem) !important;
}

/* EDITORIAL MANIFESTO: halve overall block padding + tighten internal gaps.
   Original spec had ~6rem top+bottom; user feedback says it's 2x too tall. */
.oks-manifesto-editorial {
  padding-top: clamp(2rem, 3.5vw, 3rem) !important;
  padding-bottom: clamp(2rem, 3.5vw, 3rem) !important;
  margin-top: 0 !important;  /* tighten gap to products grid above */
}
.oks-manifesto-editorial .container {
  padding-top: 0 !important;
}
/* Compress vertical rhythm: tighter line-heights, smaller paragraph gaps,
   smaller pillar grid spacing. */
.oks-manifesto-editorial__title {
  margin-bottom: 1rem !important;
  line-height: 1.05 !important;
}
.oks-manifesto-editorial__lede {
  margin-top: 0 !important;
  margin-bottom: 1.25rem !important;
  line-height: 1.5 !important;
}
.oks-manifesto-editorial__stanza,
.oks-manifesto-editorial p {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
  line-height: 1.55 !important;
}
.oks-manifesto-editorial__hairline {
  margin: 1.5rem auto !important;
}
.oks-manifesto-editorial__pillars,
.oks-manifesto-editorial__grid {
  gap: 1.25rem !important;
  margin: 1.25rem 0 !important;
}
.oks-manifesto-editorial__pillar {
  padding: 0.5rem 0 0.5rem 1rem !important;
}
.oks-manifesto-editorial__pillar h3,
.oks-manifesto-editorial__pillar-title {
  margin: 0 0 0.25rem !important;
}
.oks-manifesto-editorial__creed {
  margin-top: 1.25rem !important;
  margin-bottom: 0.75rem !important;
  line-height: 1.45 !important;
}
.oks-manifesto-editorial__credit,
.oks-manifesto-editorial__maker {
  margin-top: 0.75rem !important;
}

/* Reduce the OUTER section gap between Productos populares and the manifesto.
   Featured products section + manifesto section both have generous margins;
   collapse the join. */
.featured-products + .oks-manifesto-editorial,
section.featured-products + .oks-manifesto-editorial,
.featured-products-wrapper + .oks-manifesto-editorial {
  margin-top: 0 !important;
  padding-top: clamp(1.5rem, 2.5vw, 2.25rem) !important;
}

/* ============================================================================
   OPTION C FOOTER — full editorial 3-band footer (2026-05-17)
   Override all previous #footer rules for the .oks-footer element.
   ============================================================================ */

/* ─── Shell ─────────────────────────────────────────────────────────────── */
.oks-footer {
  background: var(--oks-walnut-deep);
  color: var(--oks-ivory);
  margin-top: 0;
}

/* Remove any classic/PS #footer overrides that would bleed through */
.oks-footer a { color: var(--oks-ivory-soft); text-decoration: none; transition: color .18s ease; }
.oks-footer a:hover { color: var(--oks-copper); }

.oks-footer__container {
  max-width: 1440px; /* F1 2026-06-05: match the unified 1440 page container (was 1280) */
  margin-inline: auto;
  padding-inline: 40px;
}

/* Hairline separators between bands */
.oks-footer__band + .oks-footer__band {
  border-top: 1px solid var(--oks-walnut-line);
}

/* ─── BAND 1: Newsletter (compact band §2.2) ──────────────────────────── */
.oks-footer__band--newsletter {
  padding-block: 24px;   /* compact: was 40px — spec §2.2 var(--space-block)=24px */
}

.oks-footer-nl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;   /* compact: was 40px */
  align-items: center;
}

.oks-footer-nl__heading {
  font-family: var(--oks-serif);
  font-style: italic;
  font-size: var(--t-xl);   /* compact: was --t-2xl (39px) → --t-xl (31.25px) */
  font-weight: 400;
  color: var(--oks-ivory);
  line-height: 1.1;
  margin: 0 0 6px;   /* compact: was 10px */
  letter-spacing: -0.01em;
}

.oks-footer-nl__highlight {
  color: var(--oks-copper);
  font-style: italic;
}

.oks-footer-nl__sub {
  font-family: var(--oks-sans);
  font-size: var(--t-caption);
  color: var(--oks-muted-walnut);
  line-height: 1.55;
  margin: 0;
}

/* Form pill */
.oks-footer-nl__form-wrap {
  min-width: 0;
}

.oks-footer-nl__form {
  width: 100%;
}

.oks-footer-nl__pill {
  display: flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid var(--oks-walnut-line);
  background: var(--oks-walnut-inset);
  padding: 4px;
  min-width: 380px;
  max-width: 100%;
  overflow: hidden;
}

.oks-footer-nl__pill .oks-footer-nl__input,
.oks-footer-nl .oks-footer-nl__input {
  flex: 1 1 auto;
  min-width: 0;
  /* B2 fix (2026-05-20, revision 2): the FIRST revision set background-color
     to walnut-inset but axe still read #ffffff because `appearance: auto` was
     active — Chrome renders the input as a NATIVE widget and ignores author
     background. Adding `appearance: none` strips the native rendering so our
     background-color actually paints. !important is belt-and-suspenders against
     any later cascade. */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--oks-walnut-inset) !important;
  color: var(--oks-ivory) !important;
  color-scheme: dark;
  -webkit-text-fill-color: var(--oks-ivory);
  border: 0;
  outline: none;
  font-family: var(--oks-sans);
  font-size: var(--t-body);
  padding: 10px 16px;
  line-height: 1.4;
}

/* Defend against Chrome autofill yellow (would also break contrast). */
.oks-footer-nl__pill .oks-footer-nl__input:-webkit-autofill,
.oks-footer-nl .oks-footer-nl__input:-webkit-autofill,
.oks-footer-nl__input:-webkit-autofill:hover,
.oks-footer-nl__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--oks-ivory);
  -webkit-box-shadow: 0 0 0 100px var(--oks-walnut-inset) inset;
  caret-color: var(--oks-ivory);
}

.oks-footer-nl__pill .oks-footer-nl__input::placeholder,
.oks-footer-nl .oks-footer-nl__input::placeholder {
  color: var(--oks-muted-walnut);
}

.oks-footer-nl__pill .oks-footer-nl__input:focus-visible,
.oks-footer-nl .oks-footer-nl__input:focus-visible {
  outline: 2px solid var(--oks-copper);
  outline-offset: -2px;
  border-radius: 999px;
}

.oks-footer-nl__btn {
  flex: 0 0 auto;
  background: var(--oks-copper);
  color: #ffffff;
  border: 0;
  border-radius: 999px;
  padding: 10px 20px;
  font-family: var(--oks-sans);
  font-size: var(--t-caption);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .18s ease;
  white-space: nowrap;
  line-height: 1.4;
}

.oks-footer-nl__btn:hover {
  background: #c98550;
}

/* ─── BAND 2: 5-column nav ────────────────────────────────────────────── */
.oks-footer__band--nav {
  padding-top: 56px;
  padding-bottom: 40px;
}

.oks-footer-nav {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 48px;
  align-items: start;
}

/* Brand column */
.oks-footer-brand-logo {
  display: block;
  font-family: var(--oks-serif);
  font-style: italic;
  font-size: var(--t-2xl);
  font-weight: 400;
  color: var(--oks-ivory) !important;
  line-height: 1;
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}

.oks-footer-brand-logo:hover {
  color: var(--oks-ivory) !important;
  opacity: 0.88;
}

.oks-footer-brand-tagline {
  font-family: var(--oks-sans);
  font-size: var(--t-caption);
  color: var(--oks-muted-walnut);
  line-height: 1.65;
  max-width: 280px;
  margin: 0 0 20px;
}

.oks-footer-brand-contact {
  font-style: normal;
  margin: 0;
}

.oks-footer-brand-contact p {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--t-caption);
  line-height: 1.9;
  color: var(--oks-ivory-soft);
  margin: 0;
}

.oks-footer-brand-contact__icon {
  color: var(--oks-copper);
  flex-shrink: 0;
  line-height: 1.9;
}

.oks-footer-brand-contact a {
  color: var(--oks-ivory-soft);
  border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}

.oks-footer-brand-contact a:hover {
  color: var(--oks-copper) !important;
  border-bottom-color: var(--oks-copper);
}

/* Nav column headings */
.oks-footer-nav__label {
  font-family: var(--oks-sans);
  font-size: var(--t-caption);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--oks-copper);
  margin: 0 0 18px;
  line-height: 1;
}

/* Nav column list */
.oks-footer-nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.oks-footer-nav__list li a {
  font-family: var(--oks-sans);
  font-size: var(--t-caption);
  color: var(--oks-ivory-soft);
  transition: color .18s ease;
}

.oks-footer-nav__list li a:hover {
  color: var(--oks-copper) !important;
  opacity: 1;
}

/* ─── BAND 3: Base strip ──────────────────────────────────────────────── */
.oks-footer__band--base {
  padding-block: 22px;
}

.oks-footer-base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.oks-footer-base__copy {
  font-family: var(--oks-sans);
  font-size: var(--t-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oks-muted-base);
  margin: 0;
}

/* Social pills */
.oks-footer-social {
  display: flex;
  align-items: center;
  gap: 8px;
}

.oks-footer-social__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--oks-walnut-line);
  background: transparent;
  color: var(--oks-muted-walnut) !important;
  font-family: var(--oks-sans);
  font-size: var(--t-caption);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease;
}

.oks-footer-social__pill:hover {
  border-color: var(--oks-copper) !important;
  color: var(--oks-copper) !important;
}

/* ─── Responsive breakpoints ──────────────────────────────────────────── */

/* Tablet (≤ 1023px) */
@media (max-width: 1023px) {
  .oks-footer__container {
    padding-inline: 24px;
  }

  /* Newsletter: stack vertically */
  .oks-footer-nl {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .oks-footer-nl__pill {
    min-width: 0;
    width: 100%;
  }

  /* Nav: 2-column grid */
  .oks-footer-nav {
    grid-template-columns: 1fr 1fr;
    gap: 32px 48px;
  }

  /* Brand spans full width on tablet */
  .oks-footer-nav__col--brand {
    grid-column: 1 / -1;
  }
}

/* Mobile (≤ 639px) */
@media (max-width: 639px) {
  .oks-footer__container {
    padding-inline: 20px;
  }

  .oks-footer__band--newsletter {
    padding-block: 24px;   /* compact: matches desktop (was 32px) */
  }

  .oks-footer__band--nav {
    padding-top: 40px;
    padding-bottom: 32px;
  }

  .oks-footer-nl__heading {
    font-size: var(--t-lg);   /* compact mobile: --t-lg (25px) from --t-xl (31.25px) */
  }

  /* Nav: single column */
  .oks-footer-nav {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .oks-footer-nav__col--brand {
    grid-column: auto;
  }

  .oks-footer-base {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

/* ─── Override any legacy #footer rules that would bleed through ──────── */
/* The new .oks-footer replaces all previous #footer-scoped footer rules.
   These selectors suppress the old dark-background block_newsletter band
   and old brand-strip rules that are now part of .oks-footer bands. */
#footer.oks-footer { background: var(--oks-walnut-deep) !important; }
#footer.oks-footer .block_newsletter,
#footer.oks-footer .oks-footer-brand,
#footer.oks-footer .footer-container { display: none !important; }

/* ============================================================================
   2026-05-18: USER PUSHBACK on header/footer issues. Targeted overrides.
   ============================================================================ */

/* HEADER → MAIN: kill the 30px #main margin-top + 37.5px padding-top stack.
   Earlier .oks-manifesto + #main rules ADDED to existing PS defaults
   instead of replacing them. Total gap was 128px; target ≤16px. */
.page-home #main,
.page-index #main,
body.page-home #main,
body.page-index #main {
  margin-top: 0 !important;
  padding-top: 0 !important;
  margin-bottom: 0 !important;
}
.page-home .oks-manifesto,
.page-index .oks-manifesto,
body.page-home .oks-manifesto,
body.page-index .oks-manifesto {
  padding-top: clamp(0.75rem, 1.5vw, 1.25rem) !important;
  padding-bottom: clamp(0.75rem, 1.5vw, 1.25rem) !important;
}

/* MAIN → FOOTER: kill any large gap before footer */
#content-wrapper { margin-bottom: 0 !important; padding-bottom: 0 !important; }
/* .page-footer = empty Classic wrapper that PrestaShop injects between content
   and #footer. On the home page it renders as a near-black band because Classic's
   base CSS gives it a dark background. Neutralise completely. */
.page-footer {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  min-height: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}
footer.page-footer {
  background: transparent !important;
  background-color: transparent !important;
}
.oks-home + .page-footer,
.oks-home + footer.page-footer { margin-top: 0 !important; }
/* In case any wrapper before .oks-footer adds margin */
.oks-footer { margin-top: 0 !important; }

/* DARK CONTRAST FIX: kill bleed-through from the OLD .oks-footer-brand
   styling block (lines ~1593-1666 in theme.css) which still tries to color
   text dark/ink inside #footer. The new .oks-footer-* classes have their
   own light-on-walnut palette and must win. Force ivory text everywhere
   inside the new .oks-footer block. */
.oks-footer,
.oks-footer * {
  color: var(--oks-ivory, #f4ede2);
}
.oks-footer a {
  color: var(--oks-ivory-soft, rgba(244, 237, 226, 0.75));
}
.oks-footer a:hover,
.oks-footer a:focus {
  color: var(--oks-copper);
}
.oks-footer .oks-footer-nav__label,
.oks-footer .oks-footer-nl__highlight,
.oks-footer h4 {
  color: var(--oks-copper) !important;
}
.oks-footer .oks-footer__base-copy,
.oks-footer .oks-footer__copyright {
  color: var(--oks-muted-base, #5a4a3a) !important;
}
/* Override the OLD .oks-footer-brand rules at lines ~1593-1666 so they
   don't reach into the new editorial footer. We scope them to a parent
   that no longer exists (.footer-container) and add a *higher-specificity*
   reset for .oks-footer descendants. */
#footer.oks-footer .oks-footer-brand,
#footer.oks-footer .oks-footer-logo,
#footer.oks-footer .oks-footer-tagline,
#footer.oks-footer .oks-logo-mark,
#footer.oks-footer .oks-logo-word {
  /* hide if rendered by any leftover hook — the new footer has its own
     brand column already */
  display: none !important;
}

/* SOCIAL PILLS: SVG icon sizing + hover colour */
.oks-footer-social__pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 999px !important;
  border: 1px solid var(--oks-walnut-line, #3a2e25) !important;
  color: var(--oks-ivory-soft, rgba(244, 237, 226, 0.75)) !important;
  background: transparent !important;
  transition: color .15s ease, border-color .15s ease !important;
  text-decoration: none !important;
}
.oks-footer-social__pill:hover,
.oks-footer-social__pill:focus {
  color: var(--oks-copper) !important;
  border-color: var(--oks-copper) !important;
}
.oks-footer-social__icon {
  width: 18px !important;
  height: 18px !important;
  fill: currentColor !important;
  display: block !important;
}
.oks-footer-social {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
}

/* ============================================================================
   2026-05-18: FINAL header→main spacing fix.
   Earlier session rules (body.page-index .oks-manifesto { padding-top: 2.5rem }
   and #wrapper > .container > .row > #content-wrapper > section { margin: 2rem 0 })
   were !important AND more specific than my prior overrides. Killed at source
   plus a high-specificity winning rule below.
   ============================================================================ */
body#index #wrapper > .container > .row > #content-wrapper > #main,
body.page-index #wrapper > .container > .row > #content-wrapper > #main,
body.page-home #wrapper > .container > .row > #content-wrapper > #main {
  margin-top: 0 !important;
  padding-top: 0 !important;
  margin-bottom: 0 !important;
}
body#index .oks-home .oks-manifesto,
body.page-index .oks-home .oks-manifesto,
body.page-home .oks-home .oks-manifesto {
  padding-top: clamp(0.5rem, 1.2vw, 1rem) !important;
  padding-bottom: clamp(0.75rem, 1.4vw, 1.15rem) !important;
}

/* ============================================================================
   2026-05-18: footer text color — final override for the conflict between
   `#index h3 { color: #000 !important }` (homepage heading rule) and
   `#footer h3 { color: #fff !important }` (footer rule). Both share
   specificity (0,1,0,1) so cascade order wins. Add a 0,3,0,1 rule that
   beats both, scoping ALL footer text colors via body#index #footer.oks-footer.
   Also reset color for headings inside the editorial footer to the intended
   palette: ivory body text + copper labels.
   ============================================================================ */
body#index #footer.oks-footer,
body#index #footer.oks-footer *:not(svg):not(path) {
  color: var(--oks-ivory, #f4ede2) !important;
}
body#index #footer.oks-footer .oks-footer-nl__heading,
body#index #footer.oks-footer h3.oks-footer-nl__heading {
  color: var(--oks-ivory, #f4ede2) !important;
}
body#index #footer.oks-footer .oks-footer-nl__highlight,
body#index #footer.oks-footer em.oks-footer-nl__highlight {
  color: var(--oks-copper) !important;
}
body#index #footer.oks-footer .oks-footer-nav__label,
body#index #footer.oks-footer h4.oks-footer-nav__label {
  color: var(--oks-bg, #fafaf7) !important; /* 2026-05-31: #fafaf7 on dark #1a1006 >=4.5:1 (was #9a4f28 = 3.14:1 FAIL) */
}
body#index #footer.oks-footer .oks-footer-nl__sub,
body#index #footer.oks-footer .oks-footer-brand-tagline {
  color: var(--oks-muted-walnut, #9e8f78) !important;
}
body#index #footer.oks-footer a {
  color: var(--oks-ivory-soft, rgba(244, 237, 226, 0.75)) !important;
}
body#index #footer.oks-footer a:hover,
body#index #footer.oks-footer a:focus {
  color: var(--oks-copper) !important;
}
body#index #footer.oks-footer .oks-footer-brand-contact__icon {
  color: var(--oks-copper) !important;
}
body#index #footer.oks-footer .oks-footer__base-copy,
body#index #footer.oks-footer .oks-footer__copyright {
  color: var(--oks-muted-base, #5a4a3a) !important;
}

/* Newsletter band — compact slim strip (2026-06-01).
   Heading drops from --t-2xl (39px) to --t-lg (25px) so it fits in one line. */
.oks-footer__band--newsletter .oks-footer-nl__heading {
  font-size: var(--t-lg);
  margin-bottom: 4px !important;
}
.oks-footer__band--newsletter .oks-footer-nl__sub {
  display: none !important;
}
.oks-footer__band--newsletter {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

/* ============================================================================
   2026-05-18: ps_banner image — let it render at natural aspect.
   The classic ps_banner.tpl forces width=1110 height=213 on the <img>
   (5.21:1 slot). The new oks-psbanner is 1600x400 (4:1) — forcing it into
   the slot would squash horizontally. Override to use width 100% + height
   auto so the image renders at native aspect (~1110 × 277).
   ============================================================================ */
#ps_banner_displayHome .banner,
#ps_banner_displayHome a.banner {
  display: block !important;
  text-align: center;
}
/* 2026-06-01: kill the 24px cream gap between banner and dark footer (classic-base #wrapper .banner{margin-bottom:1.5rem}). LIVE-VERIFIED selector: a.banner sits in section#content.oks-home (NO #ps_banner_displayHome wrapper exists). Banner meets footer flush (Rule D1). */
#content.oks-home a.banner { margin-bottom: 0 !important; }
#ps_banner_displayHome .banner img,
#ps_banner_displayHome a.banner img,
a.banner img[src*="oks-psbanner"] {
  width: 100% !important;
  max-width: 1110px !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
}


/* ============================================================================
   HERO SECTION (2026-05-21)
   Editorial single-column block, first content after the header. Replaces the
   prior page_content_top oks-manifesto + bottom manifesto.tpl.
   Spec: project_hero_section_spec_2026-05-21.md

   Contract:
   - 880px content column, 96/90 vertical padding, hairline-closed
   - ONLY two type faces: Cormorant Garamond italic + Inter Tight sans
   - Copper #9a4f28 appears in EXACTLY 4 places (tick, headline accent,
     commitment accents, CTA fill)
   - All rules scoped under .oks-hero to defend against #index/#content cascade
   ============================================================================ */

/* Section frame — cream paper continuing from header
   2026-05-22: tightened from 96/90 to 48/56 per user spacing review.
   Hero was 87% of vp at 1440x900; now ~64%. */
.oks-hero {
  background-color: var(--oks-bg);
  padding: 80px 24px 80px; /* A7 2026-06-05: was 48/56 — hero needs air, CTA was drowning */
  position: relative;
}

.oks-hero__inner {
  max-width: 880px;
  margin: 0 auto;
}

/* ---- 1. Eyebrow + copper tick ---- */
.oks-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 28px;
  font-family: var(--oks-sans);
  font-size: var(--t-caption);
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--oks-copper);
  line-height: 1;
}

/* eyebrow margin-bottom defined separately so spacing review (2026-05-22) is explicit */
.oks-hero__eyebrow { margin-bottom: 20px; }

.oks-hero__tick {
  display: inline-block;
  width: 32px;
  height: 1px;
  background-color: var(--oks-copper);
  flex: 0 0 auto;
}

.oks-hero__eyebrow-text {
  display: inline-block;
  /* small visual lift so the tick sits at the baseline of the cap-height */
  transform: translateY(-1px);
}

/* ---- 2. Headline — italic display, copper accent ---- */
body#index .oks-hero .oks-hero__headline,
.oks-hero .oks-hero__headline {
  font-family: var(--oks-serif);
  font-style: italic;
  font-weight: 500;
  /* 2026-05-22 spacing review: was clamp(52, 5.4vw+16, 96) — too dominant.
     New fluid 40px→64px with gentler curve. At 1440 caps at 64. */
  font-size: var(--t-display);
  line-height: 1.05;
  letter-spacing: -0.012em;
  color: var(--oks-ink);
  /* ~14ch limit → forces 2-line break at the spec headline length */
  max-width: 14ch;
  margin: 0 0 20px;
  /* defend against #index h1, #content h1 default browser margins */
  padding: 0;
  text-wrap: balance;
}

.oks-hero__accent {
  color: var(--oks-copper);
  font-style: italic;
  /* inherit family + size so it sits flush with the surrounding italic word */
  font-family: inherit;
  font-weight: inherit;
}

/* ---- 3. Lede ---- */
.oks-hero__lede {
  font-family: var(--oks-sans);
  font-size: var(--t-md);
  line-height: 1.6;
  color: var(--oks-ink-2);
  max-width: 580px;
  margin: 0 0 24px; /* 2026-05-22: 36 -> 24 */
  font-weight: 400;
}

/* ---- 4. CTA — single copper pill ---- */
.oks-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--oks-copper);
  color: #ffffff;
  text-decoration: none;
  border: 0;
  border-radius: 999px;
  min-height: 48px; /* A7 */
  padding: 16px 32px;
  font-family: var(--oks-sans);
  font-size: var(--t-body); /* A7: was caption 12.8px — CTA got lost */
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  margin: 0; /* 2026-06-01: zeroed — .oks-rule margin: var(--space-section) auto owns full gap above AND below */
  transition: background-color 0.18s ease, transform 0.18s ease;
  /* defend against #footer a / #index a colour overrides */
}

/* Higher-specificity rule to ensure colour wins over #footer / #index anchor cascade */
body#index .oks-hero .oks-hero__cta,
body#index .oks-hero a.oks-hero__cta {
  color: #ffffff;
  background-color: var(--oks-copper);
}

.oks-hero__cta:hover,
.oks-hero__cta:focus {
  background-color: #7b3f20; /* 2026-05-22: hover darker than new base #9a4f28 */
  color: #ffffff;
  text-decoration: none;
}

.oks-hero__cta:focus-visible {
  outline: 2px solid var(--oks-copper);
  outline-offset: 2px;
}

/* ---- 5. Hairline divider ---- */
.oks-hero__rule {
  border: 0;
  border-top: 1px solid var(--oks-line);
  margin: 0 0 32px; /* 2026-05-22: 48 -> 32 */
  width: 100%;
  height: 1px;
  background: transparent;
}

/* Section dividers between home hooks — NEUTRALISED 2026-06-01.
   Full-width grey bar rejected by user ("shit"). Replaced by whitespace
   (--space-section padding) + ONE centred .oks-rule copper accent above
   Productos populares. Keep class in CSS so no render artefact if any
   stray template still references it, but make it invisible. */
.oks-section-rule {
  display: none;
}

/* ---- Centred copper accent rule (Rule D2, 2026-06-01) ----
   clamp(40px,6vw,64px) copper line + 5px diamond via ::before.
   margin: var(--space-section) auto — equal space above AND below (D2: centred in gap).
   width clamp: phone 375px → 40px (~10.7%), desktop → 64px (capped). */
.oks-rule {
  width: clamp(40px, 6vw, 64px);
  height: 0;
  border: 0;
  border-top: 1px solid var(--oks-copper);
  margin: 16px auto;   /* D2: equal breathing room above and below — TIGHT per user (was 48px, user wanted ~3x tighter) */
  position: relative;
}
.oks-rule::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 5px;
  height: 5px;
  background: var(--oks-copper);
}

/* ---- 6. Three commitments — 3-up typography, NOT cards ---- */
.oks-hero__commitments {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 36px;
}

.oks-hero__commit {
  /* No background, no border, no shadow — typography on cream paper */
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
}

/* Empty-fallback: blank commitment column hides entirely */
.oks-hero__commit:empty {
  display: none;
}

.oks-hero__commit-title {
  font-family: var(--oks-serif);
  font-style: italic;
  font-weight: 500;
  font-size: var(--t-md);
  line-height: 1.25;
  color: var(--oks-ink);
  margin: 0 0 8px;
  letter-spacing: -0.005em;
}

.oks-hero__commit-sub {
  font-family: var(--oks-sans);
  font-size: var(--t-caption);
  line-height: 1.4;
  color: var(--oks-muted);
  margin: 0;
  font-weight: 400;
}

/* ============================================================================
   Responsive
   - Tablet 640-1023px: headline 52px, commitments stack vertically with 20px gap
   - Mobile <640px: padding 60/64, headline 42px, single column
   ============================================================================ */

@media (max-width: 1023px) {
  .oks-hero__headline,
  body#index .oks-hero .oks-hero__headline {
    /* 2026-05-22: removed explicit 52px override; new clamp gives ~48px at 768 naturally */
    max-width: 16ch;
  }
  .oks-hero__commitments {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 639px) {
  .oks-hero {
    padding: 40px 24px 48px; /* 2026-05-22: 60/64 -> 40/48 for tighter mobile rhythm */
  }
  .oks-hero__headline,
  body#index .oks-hero .oks-hero__headline {
    /* 2026-05-22: removed explicit 42px; new clamp clamps at 40px on small mobile */
    max-width: 18ch;
  }
  .oks-hero__eyebrow {
    font-size: var(--t-caption);
    letter-spacing: 0.28em;
  }
  .oks-hero__lede {
    font-size: var(--t-body);
  }
  .oks-hero__cta {
    margin-bottom: 0; /* 2026-06-01: .oks-rule margin-block owns the gap */
  }
  .oks-hero__rule {
    margin-bottom: 36px;
  }
}

/* ============================================================================
   Sectional separator below hero (cosmetic — keeps the slider from feeling
   glued to the hairline). Subtle: just preserves rhythm.
   ============================================================================ */
.oks-hero + #carousel,
.oks-hero + .carousel {
  margin-top: 0; /* hero already has 90px bottom */
}

/* End hero section
   ============================================================================ */

/* ============================================================================
   CATEGORY PAGE — .oks-cat-* namespace
   Scope: body.page-category + .oks-cat-* selectors beat classic-base.css
   All copper values use #9a4f28 (--oks-copper site-wide standard).
   ============================================================================ */

/* ── Custom properties ── */
body.page-category {
  /* CONSOLIDATED 2026-06-04: cat-* are now ALIASES of the core :root tokens
     (single source of truth, same pattern as --oks-font-* aliases). Old standalone
     hex removed: cat-ink #1a1a1a, cat-cream #faf8f4, cat-hairline #d4c5a9,
     cat-muted #5a5a5a. Contrast re-checked: muted #5d5448 on bg #fafaf7 ≈ 7.3:1 (AA). */
  --oks-cat-copper: var(--oks-copper);
  --oks-cat-ink: var(--oks-ink);
  --oks-cat-cream: var(--oks-bg);
  --oks-cat-hairline: var(--oks-line);
  --oks-cat-muted: var(--oks-muted);
  --oks-cat-col-gap: 24px;
}

/* ── Page layout: full-width editorial ── */
body.page-category #wrapper {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* Override Bootstrap row to stack sidebar above grid */
/* Category: filters as a LEFT SIDEBAR, products in the main column.
   Faceted pages (have .oks-cat-facet-group) -> 2-col (sidebar + grid).
   Non-faceted (e.g. /23-polonia, no facets) -> sidebar hidden, grid full width.
   Mobile -> stacked. */
body.page-category #wrapper > .container > .row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
body.page-category #left-column { padding-top: 0; }
body.page-category #content,
body.page-category #main { width: 100%; }
body.page-category #search_filters_wrapper { display: block !important; }

@supports selector(:has(*)) {
  /* DESKTOP ONLY (>=768px): 2-col sidebar+grid. 2026-06-01: these width rules out-specified
     the mobile @media(max-width:767px) stack rule below, so on mobile #left-column kept
     width:240px -> sidebar+grid crammed side-by-side, products overlapped. Gating on
     min-width:768px lets mobile stack full-width (no overlap). */
  @media (min-width: 768px) {
    /* USEFUL-FACETED (2026-06-04 increment 3): show the 240px rail only when the category
       offers a real choice — a non-price facet group — AND is not sparse (#main.oks-cat--sparse
       is set server-side for <=4 total products). Otherwise the rail is hidden and the grid goes
       full width. Price-only / sparse rails (joyeria, mascotas) added nothing but a dead column. */
    body.page-category #wrapper > .container
      > .row:has(.oks-cat-facet-group:not([data-type="price"])) #left-column {
      width: 240px !important;
      max-width: 240px !important;
      flex: 0 0 240px !important;
      order: 1;
      padding-right: 28px;
      border-bottom: 0;
      margin-bottom: 0;
    }
    body.page-category #wrapper > .container
      > .row:has(.oks-cat-facet-group:not([data-type="price"])) #content-wrapper {
      width: calc(100% - 240px) !important;
      max-width: calc(100% - 240px) !important;
      flex: 1 1 0 !important;
      order: 2;
    }
    /* hide the sidebar (grid full width) ONLY when there is no useful (non-price) facet.
       2026-06-04 (decision b): dropped the sparse (<=4 products) hide — now that every product is
       enriched, even small categories show their rail for full consistency. */
    body.page-category #wrapper > .container > .row:not(:has(.oks-cat-facet-group:not([data-type="price"]))) #left-column { display: none !important; }
    body.page-category #wrapper > .container > .row:not(:has(.oks-cat-facet-group:not([data-type="price"]))) #content-wrapper {
      width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important;
    }
  }
  /* facets stack vertically in the sidebar (NOT a horizontal strip) — all widths */
  body.page-category #left-column .oks-cat-facets { display: block; }
  body.page-category #left-column .oks-cat-facet-group { display: block; margin-bottom: 22px; min-width: 0; max-width: none; }
  body.page-category #left-column .oks-cat-facet-list { max-height: none; overflow: visible; }
}
/* No :has() support -> content full width (filters fall below, still usable) */
@supports not selector(:has(*)) {
  body.page-category #content-wrapper { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }
}
@media (max-width: 767px) {
  body.page-category #left-column { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; padding-right: 0; }
  body.page-category #content-wrapper { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }
}

/* ── Filtrar disclosure: mobile collapse, desktop always-open ── */
/* <details> starts CLOSED in markup so mobile renders products immediately;
   desktop CSS below force-shows the content and hides the summary toggle. */
.oks-cat-facets-disclosure {
  border: 0;
  margin-bottom: 32px;
}
.oks-cat-facets-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  padding: 14px 0;
  border-top: 1px solid var(--oks-cat-hairline);
  border-bottom: 1px solid var(--oks-cat-hairline);
  font-family: var(--oks-sans);
  font-size: var(--t-caption);
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--oks-cat-copper);
}
.oks-cat-facets-summary::-webkit-details-marker { display: none; }
.oks-cat-facets-summary::marker { content: ""; }
.oks-cat-facets-summary__icon {
  width: 9px;
  height: 9px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.oks-cat-facets-disclosure[open] .oks-cat-facets-summary__icon {
  transform: rotate(-135deg);
}

/* Desktop: no toggle, rail always fully expanded regardless of open state. */
@media (min-width: 768px) {
  .oks-cat-facets-summary { display: none; }
  .oks-cat-facets-disclosure > *:not(summary) { display: block; }
  .oks-cat-facets-disclosure::details-content {
    content-visibility: visible;
  }
}

/* ── Category header (hero-mirror) ── */
.oks-cat-header {
  padding-block: 56px 40px;
  border-bottom: 1px solid var(--oks-cat-hairline);
  margin-bottom: 40px;
}

.oks-cat-eyebrow {
  font-family: var(--oks-sans);
  font-size: var(--t-caption);
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--oks-cat-copper);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.oks-cat-eyebrow__tick {
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--oks-cat-copper);
  flex-shrink: 0;
}

.oks-cat-headline {
  font-family: 'Cormorant Garamond', 'Cormorant', serif;
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-2xl);
  line-height: 1.08;
  color: var(--oks-cat-ink);
  margin: 0 0 20px;
  max-width: 28ch;
}

.oks-cat-headline em {
  color: var(--oks-cat-copper);
  font-style: inherit;
}

.oks-cat-lede {
  font-family: var(--oks-sans);
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--oks-cat-muted);
  max-width: 580px;
  margin-bottom: 0;
}

/* Header lede — short category description under the H1 (above the fold). */
.oks-cat-header__lede {
  margin-top: 16px;
}
.oks-cat-header__lede :is(p, h2, h3, ul, ol) {
  margin: 0 0 8px;
}
.oks-cat-header__lede :last-child {
  margin-bottom: 0;
}

.oks-cat-hairline {
  border: none;
  border-top: 1px solid var(--oks-cat-hairline);
  margin-block: 32px 0;
}

/* ── Category bottom description: read-more clamp (CSS-only, no JS) ──
   Full text stays in the DOM for SEO; visually clamped with a fade until the
   keyboard-focusable checkbox is toggled. Header lede (.oks-cat-header .oks-cat-lede)
   is unaffected — only the --desc modifier clamps. */
.oks-cat-desc {
  position: relative;
  max-width: 580px;
  margin-top: 16px;            /* 2026-06-03: now a header block under the H1 */
}
.oks-cat-desc__toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;            /* invisible but still keyboard-focusable + in a11y tree */
  margin: 0;
}
.oks-cat-lede--desc {
  max-width: none;
  overflow: hidden;
  max-height: 5em;       /* 2026-06-03: ~3 lines visible; rest stays in DOM */
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent);
          mask-image: linear-gradient(to bottom, #000 62%, transparent);
  transition: max-height 0.35s ease;
}
.oks-cat-desc__toggle:checked ~ .oks-cat-lede--desc {
  max-height: 240em;
  -webkit-mask-image: none;
          mask-image: none;
}
.oks-cat-desc__more {
  display: inline-block;
  margin-top: 14px;
  cursor: pointer;
  font-family: var(--oks-sans);
  font-size: var(--t-caption);
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--oks-cat-copper);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.oks-cat-desc__more--expanded { display: none; }
.oks-cat-desc__toggle:checked ~ .oks-cat-desc__more .oks-cat-desc__more--collapsed { display: none; }
.oks-cat-desc__toggle:checked ~ .oks-cat-desc__more .oks-cat-desc__more--expanded { display: inline; }
.oks-cat-desc__toggle:focus-visible ~ .oks-cat-desc__more {
  outline: 2px solid var(--oks-cat-copper);
  outline-offset: 3px;
}

/* ── Left rail shared header style ── */
.oks-cat-rail__header {
  font-family: var(--oks-sans);
  font-size: var(--t-caption);
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--oks-cat-copper);
  margin-bottom: 16px;
  margin-top: 32px;
}

.oks-cat-rail__header:first-child {
  margin-top: 0;
}

/* ── Category tree ── */
.oks-cat-categorytree {
  margin-bottom: 40px;
}

.oks-cat-tree-list,
.oks-cat-tree-children {
  list-style: none;
  margin: 0;
  padding: 0;
}

.oks-cat-tree-item {
  margin-bottom: 4px;
}

.oks-cat-tree-link {
  display: block;
  font-family: var(--oks-sans);
  font-size: var(--t-body);
  font-weight: 400;
  color: var(--oks-cat-muted);
  text-decoration: none;
  padding: 4px 0;
  transition: color 0.15s ease;
}

.oks-cat-tree-link:hover {
  color: var(--oks-cat-ink);
}

.oks-cat-tree-link--active {
  font-family: 'Cormorant Garamond', 'Cormorant', serif;
  font-style: italic;
  font-size: var(--t-md);
  font-weight: 400;
  color: var(--oks-cat-ink);
  position: relative;
  padding-left: 14px;
}

.oks-cat-tree-link--active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 1.1em;
  background: var(--oks-cat-copper);
  border-radius: 1px;
}

.oks-cat-tree-children {
  margin-left: 14px;
  margin-top: 6px;
  margin-bottom: 6px;
}

.oks-cat-tree-link--child {
  font-size: var(--t-caption);
  padding: 2px 0;
}

/* ── Facets ── */
.oks-cat-facets {
  margin-bottom: 32px;
}

.oks-cat-facet-group {
  margin-bottom: 24px;
}

.oks-cat-facet-title {
  font-family: 'Cormorant Garamond', 'Cormorant', serif;
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-md);
  color: var(--oks-cat-ink);
  margin: 0 0 10px;
  /* WCAG note: italic Cormorant 18px at #1a1a1a on cream passes 4.5:1 contrast */
}

.oks-cat-facet-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.oks-cat-facet-item {
  margin-bottom: 6px;
}

.oks-cat-facet-label {
  display: flex;
  align-items: flex-start;     /* 2026-06-03: checkbox aligns to first line of wrapping labels */
  text-align: left;            /* kill text-align:right inherited from the classic left column */
  gap: 10px;
  cursor: pointer;
  font-family: var(--oks-sans);
  font-size: var(--t-body);
  color: var(--oks-cat-muted);
  position: relative;
  padding-bottom: 2px;
  transition: color 0.15s ease;
}

.oks-cat-facet-label:hover {
  color: var(--oks-cat-ink);
}

/* Custom checkbox — reset browser appearance */
.oks-cat-facet-checkbox {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Visible checkbox box */
.oks-cat-facet-check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-top: 2px;             /* 2026-06-03: align box with first text line */
  border: 1px solid var(--oks-cat-ink);
  border-radius: 2px;
  background: transparent;
  flex-shrink: 0;
  transition: background 0.15s ease, border-color 0.15s ease;
  position: relative;
}

/* White tick via ::after */
.oks-cat-facet-check-icon::after {
  content: '';
  display: block;
  width: 5px;
  height: 9px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg) translate(-1px, -2px);
  opacity: 0;
  transition: opacity 0.1s ease;
}

/* Checked state — copper fill + white tick + copper text underline on label */
.oks-cat-facet-checkbox:checked ~ .oks-cat-facet-check-icon {
  background: var(--oks-cat-copper);
  border-color: var(--oks-cat-copper);
}

.oks-cat-facet-checkbox:checked ~ .oks-cat-facet-check-icon::after {
  opacity: 1;
}

.oks-cat-facet-item--active .oks-cat-facet-filter-label {
  text-decoration: underline;
  text-decoration-color: var(--oks-cat-copper);
  text-underline-offset: 3px;
  color: var(--oks-cat-ink);
}

.oks-cat-facet-count {
  font-size: var(--t-caption);
  color: var(--oks-cat-muted);
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
  padding-left: 8px;
}

/* 2026-06-03: filter label fills the row and reads LEFT (was inheriting text-align:right
   from the classic left column -> multi-line labels rendered ragged/right = "dancing"). */
.oks-cat-facet-filter-label {
  flex: 1 1 auto;
  min-width: 0;                /* allow the flex item to shrink so the count never clips */
  overflow-wrap: anywhere;     /* break very long single words (e.g. "Reacondicionado") */
  text-align: left;
  line-height: 1.35;
}
.oks-cat-facets,
.oks-cat-categorytree { text-align: left; }

/* Disabled filter */
.oks-cat-facet-checkbox:disabled ~ .oks-cat-facet-check-icon {
  opacity: 0.35;
}

.oks-cat-facet-checkbox:disabled ~ .oks-cat-facet-filter-label {
  opacity: 0.45;
}

/* Zero-count value — greyed, non-interactive, but kept IN PLACE (Baymard/NN-g:
   never remove a filter option; show it greyed with its (0) count). This is what
   stops the panel from "dancing" when a click drops some options to zero. */
.oks-cat-facet-item--zero .oks-cat-facet-label {
  cursor: default;
}
.oks-cat-facet-item--zero .oks-cat-facet-label:hover .oks-cat-facet-filter-label {
  color: inherit;
}
.oks-cat-facet-item--zero .oks-cat-facet-count {
  opacity: 0.45;
}

/* ── Active filter chips ── */
.oks-cat-active-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.oks-cat-active-filters__label {
  font-family: var(--oks-sans);
  font-size: var(--t-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oks-cat-muted);
}

.oks-cat-active-filters__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.oks-cat-active-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--oks-cat-copper);
  color: #fff;
  border-radius: 999px;
  padding: 5px 14px 5px 12px;
  font-family: var(--oks-sans);
  font-size: var(--t-caption);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.oks-cat-active-filter-chip:hover {
  opacity: 0.85;
  color: #fff;
}

.oks-cat-active-filter-chip__remove {
  font-size: var(--t-body);
  line-height: 1;
  opacity: 0.8;
}

/* ── Products top bar (sort + count) ── */
.oks-cat-products-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 16px;
  border-top: 1px solid var(--oks-cat-hairline);
  border-bottom: 1px solid var(--oks-cat-hairline);
  margin-bottom: 32px;
}

.oks-cat-product-count {
  font-family: var(--oks-sans);
  font-size: var(--t-caption);
  color: var(--oks-cat-muted);
}

/* ── Sort orders ── */
.oks-cat-sort-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.oks-cat-sort-label {
  font-family: var(--oks-sans);
  font-size: var(--t-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oks-cat-muted);
}

.oks-cat-sort-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0;
  position: relative;
}

.oks-cat-sort-item {
  position: relative;
}

/* The visible "selected" element behaves like a button trigger */
.oks-cat-sort-current {
  font-family: 'Cormorant Garamond', 'Cormorant', serif;
  font-style: italic;
  font-size: var(--t-body);
  color: var(--oks-cat-ink);
  cursor: default;
  display: flex;
  align-items: center;
  gap: 6px;
}

.oks-cat-sort-chevron {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-right: 1.5px solid var(--oks-cat-copper);
  border-bottom: 1.5px solid var(--oks-cat-copper);
  transform: rotate(45deg) translate(-2px, -2px);
  flex-shrink: 0;
}

.oks-cat-sort-link {
  font-family: var(--oks-sans);
  font-size: var(--t-caption);
  color: var(--oks-cat-muted);
  text-decoration: none;
  white-space: nowrap;
  padding: 4px 0;
  display: block;
  transition: color 0.15s ease;
}

.oks-cat-sort-link:hover {
  color: var(--oks-cat-ink);
}

.oks-cat-sort-link--active {
  font-family: 'Cormorant Garamond', 'Cormorant', serif;
  font-style: italic;
  font-size: var(--t-body);
  color: var(--oks-cat-ink);
}

/* ── Product grid — capped + centered (2026-06-04 increment 1) ──
   Was repeat(4,1fr): on sparse categories (2-4 items) cards stranded top-left of 4 fixed
   tracks. auto-fit + an explicit max (not 1fr) collapses empty tracks; justify-content:center
   then centres the remaining cards. Dense categories settle at 3 cols in the 870px rail layout
   (the analysis target) and 4 cols when the rail is hidden (increment 3, wider track).
   Scoped to .oks-cat-products-grid only — home keeps its own .featured-products grid. */
.oks-cat-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 270px));
  justify-content: center;
  gap: 24px var(--oks-cat-col-gap);   /* 2026-06-03: 40px magic -> --space-6 token */
  margin-bottom: 48px;
}

/* Kill legacy classic-base.css pollution: #products{background:#f5ebe0!important} painted a
   warm tan rectangle behind the toolbar+grid that was glaring on sparse categories.
   body.page-category #products (110 specificity) beats the bare #products (100). */
body.page-category #products {
  background-color: transparent !important;
}

/* Sparse closing band (2026-06-04 increment 4) — intentional ending for short category pages. */
.oks-cat-closing {
  margin-top: 72px;
  padding-bottom: 16px;
  text-align: center;
}
.oks-cat-closing .oks-rule { margin-bottom: 20px; }
.oks-cat-closing__eyebrow {
  font-family: var(--oks-sans);
  font-size: var(--t-caption);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--oks-cat-muted);
  margin: 0 0 18px;
}
.oks-cat-closing__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 28px;
}
.oks-cat-closing__links a {
  font-family: 'Cormorant Garamond', 'Cormorant', serif;
  font-style: italic;
  font-size: var(--t-md);
  color: var(--oks-cat-ink);
  text-decoration: none;
  transition: color 0.15s ease;
}
.oks-cat-closing__links a:hover { color: var(--oks-cat-copper); }

/* ── Product miniature ── */
.oks-cat-product {
  position: relative;
}

.oks-cat-product__img-link {
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  margin-bottom: 16px;
}

.oks-cat-product__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.oks-cat-product:hover .oks-cat-product__img {
  transform: scale(1.03);
}

/* Flags */
.oks-cat-product__flags {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 12px;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 1;
}

.oks-cat-product__flag {
  font-family: var(--oks-sans);
  font-size: var(--t-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 10px;
  background: #fbf8f1;             /* 2026-06-03: solid cream (was transparent over the
                                      product photo -> axe-unscorable + low contrast) */
  color: #7e3e1c;                  /* darker copper: 7.6:1 on this cream bg (WCAG AA) */
  border: 1px solid #7e3e1c;
  border-radius: 0;
  line-height: 1;
}

/* "discount" / "en oferta" — solid cream backing so contrast no longer relies on the image */
.oks-cat-product__flag--discount,
.oks-cat-product__flag--on-sale {
  background: #fbf8f1;
}

/* New product flag */
.oks-cat-product__flag--new {
  border-color: var(--oks-cat-ink);
  color: var(--oks-cat-ink);
}

/* Product description block */
.oks-cat-product__desc {
  position: relative;
}

/* Product name — italic Cormorant */
.oks-cat-product__name {
  font-family: 'Cormorant Garamond', 'Cormorant', serif;
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-md);
  line-height: 1.25;
  color: var(--oks-cat-ink);
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.5em;            /* 2026-06-03: 2 lines -> equal card heights */
}

/* Guarantee: card title stays --t-md regardless of any section-header rule above */
.featured-products .oks-cat-product__name,
#content-wrapper .home-section .oks-cat-product__name {
  font-size: var(--t-md);
}

.oks-cat-product__name a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

.oks-cat-product__name a:hover {
  color: var(--oks-cat-copper);
}

/* Price — copper */
.oks-cat-product__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 8px;
}

.oks-cat-product__current-price {
  font-family: var(--oks-sans);
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--oks-ink); /* 2026-05-31: #14110d on cream >=4.5:1 (was #9a4f28 = 3.64:1 FAIL) */
}

.oks-cat-product__regular-price {
  font-family: var(--oks-sans);
  font-size: var(--t-caption);
  color: var(--oks-cat-muted);
  text-decoration: line-through;
}

/* Wishlist heart — transparent fill, copper stroke on hover */
.oks-cat-product__wishlist {
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: transparent;
  stroke: var(--oks-cat-muted);
  transition: stroke 0.15s ease;
  line-height: 1;
}

.oks-cat-product__heart-icon {
  width: 20px;
  height: 20px;
  stroke: var(--oks-cat-muted);
  fill: none;
  transition: stroke 0.15s ease;
}

.oks-cat-product__wishlist:hover .oks-cat-product__heart-icon,
.oks-cat-product__wishlist:focus-visible .oks-cat-product__heart-icon {
  stroke: var(--oks-cat-copper);
}

/* ── Products bottom ── */
.oks-cat-products-bottom {
  border-top: 1px solid var(--oks-cat-hairline);
  padding-top: 32px;
  margin-top: 8px;
  display: flex;
  justify-content: center;
}

/* ── Pagination ── */
.oks-cat-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: 32px 0 48px;         /* 2026-06-03: 48px breathing room above footer */
}

/* Page-number links + spacer */
.oks-cat-pagination__page,
.oks-cat-pagination__spacer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding-inline: 8px;
  font-family: var(--oks-sans);
  font-size: var(--t-body);
  color: var(--oks-cat-ink);   /* 2026-06-03: #1a1a1a >=4.5:1 (was muted, barely visible) */
  text-decoration: none;
  border-radius: 2px;
  transition: color 0.15s ease, background 0.15s ease;
}

.oks-cat-pagination__page:hover {
  color: var(--oks-cat-ink);
  background: rgba(0, 0, 0, 0.04);
}

.oks-cat-pagination__spacer {
  pointer-events: none;
}

/* Current page — same sans metrics as the number links, marked copper with an inset
   underline bar so it reads as "you are here" instead of a mismatched serif glyph. */
.oks-cat-pagination__current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding-inline: 8px;
  font-family: var(--oks-sans);
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--oks-cat-copper);
  border-radius: 2px;
  box-shadow: inset 0 -2px 0 0 var(--oks-cat-copper);
  cursor: default;
}

/* Prev / Next arrows */
.oks-cat-pagination__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--oks-cat-ink);
  text-decoration: none;
  border-radius: 2px;
  transition: color 0.15s ease, background 0.15s ease;
}

.oks-cat-pagination__arrow:hover {
  color: var(--oks-cat-copper);
  background: rgba(0, 0, 0, 0.04);
}

/* ── Subcategories — HIDDEN everywhere ── */
body.page-category #subcategories,
body.page-category .subcategories,
body.page-category .oks-cat-subcategories {
  display: none !important;
}

/* ── Responsive ── */

/* Tablet — 3-column product grid */
@media (max-width: 1023px) {
  .oks-cat-products-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px var(--oks-cat-col-gap);
  }
}

@media (max-width: 768px) {
  .oks-cat-products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 16px;
  }

  .oks-cat-header {
    padding-block: 40px 28px;
  }

  .oks-cat-headline {
    font-size: var(--t-xl);
  }
}

/* Mobile — 2 columns */
@media (max-width: 480px) {
  .oks-cat-products-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 12px;
  }

  .oks-cat-products-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .oks-cat-product__img-link {
    aspect-ratio: 4 / 3;
  }
}

/* ── Accessibility ── */
.oks-cat-facet-checkbox:focus-visible ~ .oks-cat-facet-check-icon {
  outline: 2px solid var(--oks-cat-copper);
  outline-offset: 2px;
}

.oks-cat-product__wishlist:focus-visible {
  outline: 2px solid var(--oks-cat-copper);
  outline-offset: 3px;
  border-radius: 4px;
}

/* End category section
   ============================================================================ */

/* ============================================================================
   SEARCH DRAWER — magnifier trigger + modal overlay
   Resolves: 6-item menu overlapping inline #search_widget on desktop.
   Strategy:
     - Hide inline #search_widget from the header nav row on ≥768px so the menu
       gets full row width.
     - A .oks-search-trigger button replaces it in the visual flow.
     - The drawer (#oks-search-drawer) receives the #search_widget node via JS.
   ============================================================================ */

/* ── Trigger button ── */
.oks-search-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 4px;
  cursor: pointer;
  color: var(--oks-ink);
  flex: 0 0 auto;
  line-height: 1;
  /* Sit alongside the cart/user cluster */
  margin-left: 0.25rem;
}
.oks-search-trigger .material-icons {
  font-size: var(--t-lg);
  line-height: 1;
}
.oks-search-trigger:hover { color: var(--oks-copper); }
.oks-search-trigger:focus-visible {
  outline: 2px solid var(--oks-copper);
  outline-offset: 2px;
}

/* Hide inline search from header nav row on desktop and tablet (≥768px).
   The node remains in the DOM so JS can move it into the drawer. */
@media (min-width: 768px) {
  #header .header-top #search_widget,
  #header .header-top .header-top-right > #search_widget,
  #header .header-top .header-top-right #search_widget {
    display: none !important;
  }
}

/* On mobile (<768px): keep inline search hidden too — trigger + drawer is the path */
@media (max-width: 767px) {
  #header .header-top #search_widget {
    display: none !important;
  }
  /* Trigger visible on mobile in the header-top-right flex row */
  .oks-search-trigger {
    display: inline-flex;
  }
}

/* ── Backdrop ── */
.oks-search-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 17, 13, 0.55);
  z-index: 1049;
}
.oks-search-backdrop--visible {
  display: block;
}
@media (prefers-reduced-motion: no-preference) {
  .oks-search-backdrop {
    transition: opacity 0.2s ease;
    opacity: 0;
  }
  .oks-search-backdrop--visible {
    opacity: 1;
  }
}

/* ── Drawer container — slides down BELOW the header ── */
.oks-search-drawer {
  position: fixed;
  top: var(--oks-header-bottom, 0px);
  left: 0;
  right: 0;
  z-index: 1050;
  background: var(--oks-bg);
  border-bottom: 1px solid var(--oks-line);
  padding: 1.25rem 0;
  box-shadow: 0 4px 24px rgba(20, 17, 13, 0.12);
}
.oks-search-drawer[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: no-preference) {
  .oks-search-drawer:not([hidden]) {
    animation: oks-drawer-slide-down 0.22s ease both;
  }
}
@keyframes oks-drawer-slide-down {
  from { transform: translateY(-12px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ── Drawer inner layout ── */
.oks-search-drawer__inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* ── Search field slot — expand the widget to full width inside drawer ── */
.oks-search-drawer__field {
  flex: 1 1 auto;
  min-width: 0;
}
.oks-search-drawer__field #search_widget {
  display: inline-flex !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  border-bottom: 0 !important;
  border: 1px solid var(--oks-line) !important;
  background: transparent !important;
  padding: 0.5rem 0.75rem !important;
}
.oks-search-drawer__field #search_widget input[type="text"] {
  font-size: var(--t-body);
  letter-spacing: 0.05em !important;
  padding: 0.4rem 0 !important;
}

/* ── Close button ── */
.oks-search-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 4px;
  cursor: pointer;
  color: var(--oks-muted);
  flex: 0 0 auto;
  line-height: 1;
}
.oks-search-drawer__close .material-icons {
  font-size: var(--t-lg);
  line-height: 1;
}
.oks-search-drawer__close:hover { color: var(--oks-ink); }
.oks-search-drawer__close:focus-visible {
  outline: 2px solid var(--oks-copper);
  outline-offset: 2px;
}

/* ── Desktop: ensure S1 flex row still has trigger at end of row ── */
@media (min-width: 992px) {
  #header .header-top .header-top-right {
    /* already display:flex from S1 fix — trigger is a flex child */
  }
  .oks-search-trigger {
    flex: 0 0 auto;
    margin-left: auto;
  }
}

/* End search drawer
   ============================================================================ */

/* ============================================================================
   Top-bar social icons (.oks-topbar-social)
   Sits inside .header-nav .col-md-7.right-nav, after displayNav2.
   The top bar has dark background (--oks-ink), so icons inherit light colour.
   ============================================================================ */
.oks-topbar-social {
  display: none; /* hidden on mobile — top bar collapses */
  align-items: center;
  gap: 14px;
  margin-left: 10px;
}
@media (min-width: 992px) {
  .oks-topbar-social {
    display: inline-flex;
  }
}
.oks-topbar-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--oks-bg);
  opacity: 0.75;
  text-decoration: none;
  transition: opacity 0.18s ease, color 0.18s ease;
  line-height: 1;
}
.oks-topbar-social a:hover {
  color: var(--oks-copper);
  opacity: 1;
}
.oks-topbar-social a:focus-visible {
  outline: 2px solid var(--oks-copper);
  outline-offset: 2px;
  border-radius: 2px;
}
.oks-topbar-social svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  display: block;
}

/* ===== PRODUCT PAGE — WCAG AA color-contrast fixes (2026-05-31) ===== */
/* Description body text: nested <p>/<li>/<ul>/<span> may inherit #7a7a7a from Classic.
   Force all to --oks-ink-2 (#2a2620 on #fafaf7 = ~13:1, well above 4.5:1). */
#product .product-description,
#product .product-description p,
#product .product-description li,
#product .product-description ul,
#product .product-description ol,
#product .product-description span,
#product .product-description-short,
#product-description-short-{$smarty.block.child} p,
#product .product-information .rte-content,
#product .rte { color: var(--oks-ink-2) !important; }

/* Module labels: .tax-shipping-delivery-label and .product-minimal-quantity
   render #7a7a7a from Classic (contrast ratio ~4.3:1, fails AA).
   --oks-muted (#5d5448 on #fafaf7) = ~5.3:1, passes AA. */
.tax-shipping-delivery-label,
.tax-shipping-delivery-label a,
.product-minimal-quantity { color: var(--oks-muted) !important; }

/* Inactive product tab link: ensure minimum 4.5:1 contrast.
   Active is already --oks-ink; inactive uses --oks-muted which passes. */
#product .product-tabs .nav-link:not(.active),
.product-tabs .nav-link:not(.active) { color: var(--oks-muted) !important; }
/* ===== END product contrast fixes ===== */

/* ===== FIX2-THEMECSS batch (2026-05-31) ===== */

/* cms-01: classic-base.css injects background-color:#fdf0ed !important on
   .page-content.page-cms and #custom-text — override to transparent on cream bg. */
.page-content.page-cms,
#custom-text,
body.page-cms .page-content,
body.page-cms .cms-block { background-color: transparent !important; }

/* product-002 + cms-02: restore list bullets stripped by Classic's global
   list-style:none reset. Scope tightly to RTE content areas. */
#description ul,
#content ul,
.rte-content ul,
.cms-block ul,
.product-description ul { list-style: disc !important; padding-left: 1.5em !important; }

#description ol,
#content ol,
.rte-content ol,
.cms-block ol,
.product-description ol { list-style: decimal !important; padding-left: 1.5em !important; }

/* Undo <li><p> double-spacing (Classic wraps text nodes in <p> inside <li>) */
#description li > p,
#content li > p,
.rte-content li > p,
.cms-block li > p,
.product-description li > p { margin-bottom: 0 !important; }

/* product desc h3: bump weight — Cormorant Garamond at 18px/400 reads too light */
#product .product-description h3,
#product .rte h3,
.product-description h3 { font-weight: 500 !important; }

/* ===== END FIX2-THEMECSS ===== */

/* ============================================================================
   FIX: footer newsletter = consistent DARK band on ALL pages (cohesive footer)
   + readable white input. Reverts the home-only CREAM band that broke footer
   consistency (jarring cream band; different footer on home vs other pages).
   ============================================================================ */
/* Band + heading/sub: NO home-only override — newsletter inherits the dark
   walnut-deep footer like every other band, identical on every page.
   Input: white field with dark text so it stays readable on the dark band. */
#footer .oks-footer-nl__pill {
  background: #ffffff !important;
  border-color: rgba(255,255,255,0.20) !important;
}
#footer .oks-footer-nl__input,
#footer .oks-footer-nl__pill .oks-footer-nl__input {
  background-color: #ffffff !important;
  color: #1a110d !important;
  -webkit-text-fill-color: #1a110d !important;
  caret-color: #1a110d !important;   /* 2026-06-01: visible dark caret on the white pill (was ivory = invisible → field looked dead) */
  color-scheme: light !important;
}
#footer .oks-footer-nl__input::placeholder {
  color: rgba(20,17,13,0.45) !important;
}
#footer .oks-footer-nl__input:focus,
#footer .oks-footer-nl__input:focus-visible,
#footer #oks-nl-email:focus {
  background: #ffffff !important;
  color: #1a110d !important;
  -webkit-text-fill-color: #1a110d !important;
  caret-color: #1a110d !important;   /* 2026-06-01: keep caret visible on focus (generic :focus rule re-asserts ivory) */
  outline: 2px solid var(--oks-copper) !important;
  outline-offset: 2px;
}
#footer .oks-footer-nl__input:-webkit-autofill,
#footer #oks-nl-email:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 100px #ffffff inset !important;
  -webkit-text-fill-color: #1a110d !important;
  caret-color: #1a110d !important;
}
/* END newsletter footer-consistency fix */
/* Category sort bar (#37, 2026-06-01): the live markup uses BEM .oks-cat-sort-bar/.oks-cat-sort__*
   (the older single-dash .oks-cat-sort-* rules are dead — class names drifted). Make the bar a
   slim, right-aligned flex row (was display:block, ~70px tall, lone control left-aligned). */
.oks-cat-sort-bar,
#js-product-list-top.oks-cat-sort-bar {   /* beat the #js-product-list-top id (1,0,0) padding:16px 0 */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding-block: 8px;
  min-height: 0;
}

/* Piece count in the toolbar — left-aligned; margin-right:auto pushes sort/filter right. */
.oks-cat-sort-bar__count {
  margin: 0 auto 0 0;
  font-family: var(--oks-sans);
  font-size: var(--t-caption);
  letter-spacing: 0.04em;
  color: var(--oks-cat-muted);
}

/* Mobile: count + sort don't fit one row at 390px -> count clipped. Let the bar wrap
   and put the count on its own line above the sort control (2026-06-03). */
@media (max-width: 767px) {
  .oks-cat-sort-bar { flex-wrap: wrap; }
  .oks-cat-sort-bar__count { flex-basis: 100%; margin: 0 0 8px; }
  .oks-cat-sort { margin-left: auto; }
  .oks-cat-sort__select { min-height: 44px; }
}

/* Native sort select (2026-06-03 rebuild) — label OUTSIDE, styled control, no JS dep. */
.oks-cat-sort { display: inline-flex; align-items: center; gap: 8px; }
.oks-cat-sort__label {
  font-family: var(--oks-sans); font-size: var(--t-caption);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--oks-cat-muted); white-space: nowrap;
}
.oks-cat-sort__field { position: relative; display: inline-flex; align-items: center; }
.oks-cat-sort__select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background: transparent; border: 1px solid var(--oks-cat-hairline); border-radius: 2px;
  padding: 8px 34px 8px 12px; min-height: 44px;
  font-family: var(--oks-sans); font-size: var(--t-caption);
  color: var(--oks-cat-ink); cursor: pointer;
}
.oks-cat-sort__select:hover { border-color: var(--oks-cat-copper); }
.oks-cat-sort__select:focus-visible { outline: 2px solid var(--oks-cat-copper); outline-offset: 2px; }
.oks-cat-sort__field .oks-cat-sort__chevron {
  position: absolute; right: 12px; pointer-events: none; color: var(--oks-cat-copper);
}


/* 2026-06-01: pill SHAPE consistency (user: "block is rounded, the form and button not").
   The pill had 4px padding → a white frame around the SQUARE input + button, showing white
   space and square corners inside the rounded pill. Remove the frame so input + button meet
   the pill edge flush, and round each end to follow the pill: input rounds left, button rounds
   right. overflow:hidden on the pill clips them to the 999px radius. */
#footer .oks-footer-nl__pill { padding: 0 !important; }
#footer .oks-footer-nl__pill .oks-footer-nl__input,
.oks-footer-nl__pill .oks-footer-nl__input {
  border-radius: 999px 0 0 999px !important;
}
#footer .oks-footer-nl__btn,
.oks-footer-nl__btn {
  border-radius: 0 999px 999px 0 !important;
  align-self: stretch;            /* button fills pill height — no top/bottom white gap */
  display: inline-flex;
  align-items: center;
}

/* FIX3b removed — replaced by the left-sidebar layout above. */

/* ============================================================================
   COOKIE BANNER — mobile compaction (2026-06-02)
   On <=767px the banner covered ~46% of the viewport (heading + 3-line message +
   3 full-width stacked buttons). Compact it ~35-40%: tighter padding/type, and
   lay Rechazar + Aceptar todas side-by-side at IDENTICAL size (AEPD equal
   prominence preserved), with Configurar as a full-width secondary link below.
   Desktop layout unchanged.
   ============================================================================ */
@media (max-width: 767px) {
  #oks-cookie-banner {
    padding: 0.85rem 1rem 1rem !important;
  }
  #oks-cookie-banner .oks-cookie-row {
    gap: 0.7rem;
  }
  #oks-cookie-banner .oks-cookie-msg {
    flex-basis: 100%;
    font-size: var(--t-caption);
    line-height: 1.4;
  }
  #oks-cookie-banner .oks-cookie-msg strong {
    font-size: var(--t-body);
    margin-bottom: 0.15rem;
  }
  #oks-cookie-banner .oks-cookie-actions {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    width: 100%;
  }
  /* Reject + Accept: side by side, equal size = equal prominence (AEPD). */
  #oks-cookie-banner .oks-cookie-btn-reject  { order: 1; }
  #oks-cookie-banner .oks-cookie-btn-accept  { order: 2; }
  #oks-cookie-banner .oks-cookie-btn-reject,
  #oks-cookie-banner .oks-cookie-btn-accept {
    padding: 0.65rem 0.4rem;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    white-space: normal;
    text-align: center;
  }
  /* Configurar: tertiary "manage" action — full-width secondary link below. */
  #oks-cookie-banner .oks-cookie-btn-configure {
    order: 3;
    grid-column: 1 / -1;
    border: none;
    background: transparent;
    text-decoration: underline;
    padding: 0.35rem;
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    opacity: 0.85;
  }
}

/* ============================================================================
   CATEGORY PAGE — 2026-06-02 quality pass (#11 mobile cleanup, #14 a11y, #15 show-more)
   ============================================================================ */

/* #11 — Mobile filter cleanup. Our <details> disclosure is the single mobile filter
   mechanism; hide PrestaShop's redundant default controls: the duplicate "Filtrar" toggler
   button (products-top) and the "OK"/clear-all apply control. Safe on desktop (already hidden). */
#search_filter_controls,
.oks-cat-filter-toggle,
#search_filter_toggler { display: none !important; }

/* #15 — Facet "Ver más": collapse >6 values behind a keyboard-focusable toggle (no JS). */
.oks-cat-facet-more-toggle {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;            /* invisible but keyboard-focusable + in a11y tree */
  margin: 0;
}
.oks-cat-facet-list--collapsible .oks-cat-facet-item:nth-child(n+7) { display: none; }
.oks-cat-facet-more-toggle:checked ~ .oks-cat-facet-list--collapsible .oks-cat-facet-item:nth-child(n+7) { display: block; }
.oks-cat-facet-more {
  display: inline-block;
  margin-top: 8px;
  cursor: pointer;
  font-family: var(--oks-sans);
  font-size: var(--t-caption);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oks-cat-copper);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
.oks-cat-facet-more--expanded { display: none; }
.oks-cat-facet-more-toggle:checked ~ .oks-cat-facet-more .oks-cat-facet-more--collapsed { display: none; }
.oks-cat-facet-more-toggle:checked ~ .oks-cat-facet-more .oks-cat-facet-more--expanded { display: inline; }
.oks-cat-facet-more-toggle:focus-visible ~ .oks-cat-facet-more {
  outline: 2px solid var(--oks-cat-copper);
  outline-offset: 3px;
}

/* #14 — Touch targets (WCAG 2.5.8 AA >=24px; >=44px on mobile per Apple HIG) + focus-visible. */
.oks-cat-facet-label { min-height: 24px; }
@media (max-width: 767px) {
  .oks-cat-facet-label { min-height: 44px; }
}
.oks-cat-facet-checkbox:focus-visible ~ .oks-cat-facet-check-icon {
  outline: 2px solid var(--oks-cat-copper);
  outline-offset: 2px;
}
.oks-cat-pagination__page:focus-visible,
.oks-cat-pagination__arrow:focus-visible,
.oks-cat-sort__btn:focus-visible {
  outline: 2px solid var(--oks-cat-copper);
  outline-offset: 2px;
}


/* ── PDP mobile sticky add-to-cart bar (2026-06-03, Baymard mobile rule) ── */
.oks-pdp-sticky { display: none; }
@media (max-width: 767px) {
  .oks-pdp-sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 16px; padding-bottom: calc(10px + env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid #d4c5a9;   /* PDP scope: --oks-cat-* undefined here */
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.10);
    transform: translateY(110%); transition: transform 0.22s ease;
  }
  .oks-pdp-sticky.is-visible { transform: translateY(0); }
  .oks-pdp-sticky__price {
    font-family: var(--oks-sans); font-weight: 600; font-size: var(--t-md);
    color: var(--oks-ink); white-space: nowrap;
  }
  .oks-pdp-sticky__btn {
    flex: 1 1 auto; max-width: 62%; min-height: 48px;
    background: var(--oks-ink); color: #fff; border: none; border-radius: 2px;
    font-family: var(--oks-sans); text-transform: uppercase; letter-spacing: 0.08em;
    font-size: var(--t-caption); cursor: pointer;
  }
  .oks-pdp-sticky__btn:active { opacity: 0.9; }
}


/* blockwishlist sink — keep the injected wishlist button + its sink hidden (theme uses
   its own .oks-cat-product__wishlist heart). See miniatures/product.tpl (2026-06-03). */
.oks-cat-product > .thumbnail-container,
.oks-cat-product .wishlist-button,
.oks-cat-product .wishlist-button-product { display: none !important; }

/* ============================================================================
   LUXURY PASS — category PLP (2026-06-04). Research-led: whitespace over rules,
   product as hero, measured motion, restraint. Scoped to body.page-category and
   appended last so it wins by source order. Removes decorative hairlines that
   read as a "cage of rectangles"; separates sections with space, not lines.
   ============================================================================ */

/* 1 — kill decorative section rules; separate with whitespace */
body.page-category .oks-cat-hairline { display: none !important; }
body.page-category .oks-cat-header,
body.page-category .oks-cat-sort-bar,
body.page-category .oks-cat-products-bottom { border: 0 !important; }

/* 2 — collection intro: generous, editorial, narrative */
body.page-category .oks-cat-header {
  padding-block: clamp(40px, 6vw, 88px) clamp(24px, 3.2vw, 44px) !important;
  margin-bottom: 0 !important;
}
body.page-category .oks-cat-headline {
  font-size: var(--t-2xl) !important;
  line-height: 1.05 !important;
  margin: 0 0 14px !important;
  max-width: 18ch;
}
body.page-category .oks-cat-sub {
  font-family: 'Cormorant Garamond', 'Cormorant', serif;
  font-style: italic;
  font-size: var(--t-md);
  color: var(--oks-cat-copper);
  margin: 0 0 24px;
  letter-spacing: 0.01em;
}
body.page-category .oks-cat-desc--header,
body.page-category .oks-cat-lede {
  font-size: var(--t-md) !important;
  line-height: 1.75 !important;
  max-width: 56ch;
  color: var(--oks-cat-muted) !important;
}

/* 3 — quiet, secondary toolbar (no copper shout, lots of air now the rule is gone) */
body.page-category .oks-cat-sort-bar {
  padding-block: clamp(24px, 3.5vw, 48px) clamp(16px, 2.2vw, 28px) !important;
}
body.page-category .oks-cat-sort-bar__count {
  color: var(--oks-cat-muted) !important;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: var(--t-caption) !important;
}

/* 4 — product as hero: doubled air; dense keeps a tidy 3-up, sparse shows 2 big images */
body.page-category .oks-cat-products-grid {
  gap: clamp(48px, 5vw, 80px) 28px !important;   /* big VERTICAL air, tight cols so dense stays 3-up */
  margin-bottom: 0 !important;
}
/* 2026-06-04 (decision b): sparse big-grid removed — sparse categories now keep their rail and
   use the standard 3-up grid, so they render exactly like every other category. */
body.page-category .oks-cat-product__img-link {
  margin-bottom: 22px;
}
body.page-category .oks-cat-product__name {
  font-size: var(--t-lg) !important;
  line-height: 1.2 !important;
  margin: 0 0 6px !important;
  min-height: 0 !important;
}
body.page-category .oks-cat-product__price { margin: 0 !important; }
body.page-category .oks-cat-product__current-price {
  font-family: var(--oks-sans) !important;
  font-size: var(--t-caption) !important;
  font-weight: 400 !important;
  letter-spacing: 0.06em;
  color: var(--oks-cat-muted) !important;
}

/* 5 — closing band: more air above */
body.page-category .oks-cat-closing { margin-top: clamp(72px, 9vw, 128px) !important; }

/* 6 — measured motion (FAIL-SAFE: only active once JS adds body.oks-motion) */
body.oks-motion.page-category .oks-cat-product {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.6, 0.2, 1);
  will-change: opacity, transform;
}
body.oks-motion.page-category .oks-cat-product.oks-reveal {
  opacity: 1;
  transform: none;
}
body.page-category .oks-cat-product__img { transition: transform 0.8s cubic-bezier(0.2, 0.6, 0.2, 1) !important; }
body.page-category .oks-cat-product:hover .oks-cat-product__img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  body.oks-motion.page-category .oks-cat-product { opacity: 1 !important; transform: none !important; }
}

/* Luxury pass — refined hover (2026-06-04, "go further"): gentler, slower image zoom + a
   delicate copper underline that draws under the product name on hover. Restraint over flourish. */
body.page-category .oks-cat-product:hover .oks-cat-product__img { transform: scale(1.035); }
body.page-category .oks-cat-product__name a {
  background-image: linear-gradient(var(--oks-cat-copper), var(--oks-cat-copper));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.4s cubic-bezier(0.2, 0.6, 0.2, 1), color 0.2s ease;
  padding-bottom: 1px;
}
body.page-category .oks-cat-product:hover .oks-cat-product__name a,
body.page-category .oks-cat-product__name a:focus-visible { background-size: 100% 1px; }

/* ============================================================================
   LUXURY PASS — product page / PDP (2026-06-04). Same language as the category
   pass: whitespace over rules, product as hero, generous spacing, restrained
   type, measured fail-safe motion. Scoped to #product (the body id).
   ============================================================================ */

/* 1 — gallery as hero: drop the tan stage, let the image breathe on cream */
#product .product-cover,
#product .product-images-cover {
  background: transparent !important;
}
#product .product-cover img { width: 100%; height: auto; object-fit: contain; }
/* refined thumbnails — square, hairline, copper when active */
#product .images-container .thumb {
  width: 84px !important; height: 84px !important;
  border: 1px solid var(--oks-line) !important;
  opacity: 1 !important;
}
#product .images-container .thumb.selected,
#product .images-container .thumb:hover {
  border-color: var(--oks-copper) !important;
}

/* 2 — collection-voice header: italic headline + craft narrative line */
#product h1,
#product .product-information h1 {
  font-style: italic !important;
  font-size: var(--t-2xl) !important;
  line-height: 1.06 !important;
  margin: 0 0 14px !important;
}
#product .oks-prod-sub {
  font-family: var(--oks-serif);
  font-style: italic;
  font-size: var(--t-md);
  color: var(--oks-copper);
  margin: 0 0 26px;
}
/* reference: tiny, quiet */
#product .product-reference { margin: 0 0 18px; opacity: 0.85; }

/* 3 — elegant, quiet price */
#product .product-prices { margin: 0 0 26px !important; }
#product .product-prices .current-price .price,
#product .product-price {
  font-family: var(--oks-serif) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  font-size: var(--t-lg) !important;
  letter-spacing: 0 !important;
  color: var(--oks-ink) !important;
}
#product .product-prices .tax-shipping-delivery-label,
#product .product-information .product-prices .text-muted {
  text-transform: uppercase; letter-spacing: 0.16em;
  font-size: var(--t-caption); color: var(--oks-muted);
}

/* 4 — generous spacing; separate with air, not lines */
#product #main > .row { padding-block: clamp(16px, 3vw, 40px) clamp(40px, 6vw, 80px); }
@media (min-width: 992px) {
  #product #main > .row > .col-md-6:first-child { padding-right: clamp(24px, 4vw, 64px); }
}
/* A5-partial (2026-06-05) — enlarge gallery: grid 6/6 -> 7/5 (Bootstrap-native
   twelfths, no magic numbers). Cover 647px -> ~767px at 1440, under the 800px
   large_default ceiling so no upscale blur. Info column 600px still clears the
   520px lede measure and the 48px buy-box row. */
@media (min-width: 992px) {
  #product #main > .row > .col-md-6:first-child {
    flex: 0 0 58.3333%; max-width: 58.3333%;
  }
  #product #main > .row > .col-md-6.product-information {
    flex: 0 0 41.6667%; max-width: 41.6667%;
  }
}
#product .product-information > * { margin-bottom: 0; }
#product .product-actions { margin-top: clamp(20px, 3vw, 36px); }
#product .product-description-short,
#product .product-information .product-description-short {
  font-size: var(--t-md) !important; line-height: 1.7 !important; max-width: 52ch;
  margin: 0 0 8px;
}

/* 5 — typographic tabs: italic Cormorant headers, copper active underline, more air */
#product .tabs {
  border-top: 1px solid var(--oks-line) !important;
  padding-block: clamp(36px, 5vw, 64px) clamp(24px, 3vw, 40px) !important;
  margin-top: clamp(40px, 6vw, 88px) !important;
}
#product .tabs .nav-tabs { border-bottom: 1px solid var(--oks-line) !important; }
#product .tabs .nav-tabs .nav-link {
  font-family: var(--oks-serif) !important;
  font-style: italic !important;
  font-size: var(--t-lg) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--oks-muted) !important;
  padding: 10px 0 !important; margin-right: 40px !important;
  border-bottom: 2px solid transparent !important;
}
#product .tabs .nav-tabs .nav-link.active {
  color: var(--oks-ink) !important;
  border-bottom-color: var(--oks-copper) !important;
}
#product .tabs .tab-content { padding-block: clamp(28px, 3.5vw, 44px) 0 !important; }

/* 6 — related row: heading voice + hero spacing, and the category card hover (PDP isn't
   body.page-category so the category hover rules don't reach here — mirror them) */
#product .featured-products,
#product .productscategory,
#product .product-accessories { margin-top: clamp(48px, 7vw, 104px); }
#product .oks-cat-product__img { transition: transform 0.8s cubic-bezier(0.2, 0.6, 0.2, 1); }
#product .oks-cat-product:hover .oks-cat-product__img { transform: scale(1.035); }
#product .oks-cat-product__name a {
  background-image: linear-gradient(var(--oks-cat-copper, var(--oks-copper)), var(--oks-cat-copper, var(--oks-copper)));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px;
  transition: background-size 0.4s cubic-bezier(0.2, 0.6, 0.2, 1), color 0.2s ease; padding-bottom: 1px;
}
#product .oks-cat-product:hover .oks-cat-product__name a { background-size: 100% 1px; }

/* 7 — measured motion (FAIL-SAFE: only active once JS adds body.oks-motion) */
body#product.oks-motion .product-cover,
body#product.oks-motion .product-information,
body#product.oks-motion .product-tabs,
body#product.oks-motion .oks-cat-product {
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.6, 0.2, 1);
}
body#product.oks-motion .product-cover.oks-reveal,
body#product.oks-motion .product-information.oks-reveal,
body#product.oks-motion .product-tabs.oks-reveal,
body#product.oks-motion .oks-cat-product.oks-reveal {
  opacity: 1; transform: none;
}
@media (prefers-reduced-motion: reduce) {
  body#product.oks-motion .product-cover,
  body#product.oks-motion .product-information,
  body#product.oks-motion .product-tabs,
  body#product.oks-motion .oks-cat-product { opacity: 1 !important; transform: none !important; }
}

/* PDP luxury — related heading + grid + quiet description bullets (2026-06-04 refinement) */
#product .featured-products > h2,
#product .featured-products .products-section-title,
#product .featured-products .h2 {
  font-family: var(--oks-serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: var(--t-xl) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--oks-ink) !important;
  text-align: left !important;
  margin: 0 0 32px !important;
}
#product .featured-products .products {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 300px)) !important;
  justify-content: start !important;
  gap: clamp(40px, 5vw, 72px) 28px !important;
}
/* description prose — replace default disc bullets with a quiet copper dash */
#product .product-description ul,
#product #description ul,
#product .tab-content ul { list-style: none !important; padding-left: 0 !important; margin: 16px 0 !important; }
#product .product-description li,
#product #description li,
#product .tab-content li {
  position: relative; padding-left: 20px; margin-bottom: 8px;
  line-height: 1.7; color: var(--oks-ink-2);
}
#product .product-description li::before,
#product #description li::before,
#product .tab-content li::before {
  content: ""; position: absolute; left: 0; top: 0.75em;
  width: 8px; height: 1px; background: var(--oks-copper);
}

/* PDP — kill the classic-base .featured-products{background:#f5ebe0!important} tan tint behind
   the related row (same legacy pollution as the category #products band). PDP-scoped. */
#product .featured-products,
#product .featured-products .product-miniature,
#product .featured-products .oks-cat-product { background: transparent !important; }

/* ============================================================================
   LUXURY PASS — homepage "Productos populares" (2026-06-04). Propagates the
   category card system to the home featured grid. Scoped to body.page-index /
   .page-home so category + PDP grids are untouched.
   ============================================================================ */

/* kill legacy classic-base tan tiles on the home featured block */
body.page-index .featured-products,
.page-home .featured-products,
body.page-index .featured-products .product-miniature,
.page-home .featured-products .product-miniature,
body.page-index .featured-products .oks-cat-product,
.page-home .featured-products .oks-cat-product,
body.page-index .featured-products .thumbnail-container,
.page-home .featured-products .thumbnail-container { background: transparent !important; }

/* editorial section heading */
body.page-index .featured-products .products-section-title,
.page-home .featured-products .products-section-title,
body.page-index .featured-products h2,
.page-home .featured-products h2 {
  font-family: var(--oks-serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: var(--t-xl) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--oks-ink) !important;
  margin: 0 0 clamp(28px, 3.5vw, 48px) !important;
}

/* product as hero: bigger cards, doubled vertical air */
body.page-index .featured-products .products,
.page-home .featured-products .products {
  grid-template-columns: repeat(auto-fit, minmax(260px, 300px)) !important;
  justify-content: center !important;
  gap: clamp(48px, 5vw, 80px) 28px !important;
}
body.page-index .featured-products .oks-cat-product__img-link,
.page-home .featured-products .oks-cat-product__img-link { margin-bottom: 22px; }
body.page-index .featured-products .oks-cat-product__name,
.page-home .featured-products .oks-cat-product__name {
  font-size: var(--t-lg) !important; line-height: 1.2 !important;
  margin: 0 0 6px !important; min-height: 0 !important;
}
body.page-index .featured-products .oks-cat-product__current-price,
.page-home .featured-products .oks-cat-product__current-price {
  font-family: var(--oks-sans) !important; font-size: var(--t-caption) !important;
  font-weight: 400 !important; letter-spacing: 0.06em; color: var(--oks-muted) !important;
}

/* refined hover (gentle zoom + copper name underline) */
body.page-index .featured-products .oks-cat-product__img,
.page-home .featured-products .oks-cat-product__img { transition: transform 0.8s cubic-bezier(0.2, 0.6, 0.2, 1); }
body.page-index .featured-products .oks-cat-product:hover .oks-cat-product__img,
.page-home .featured-products .oks-cat-product:hover .oks-cat-product__img { transform: scale(1.035); }
body.page-index .featured-products .oks-cat-product__name a,
.page-home .featured-products .oks-cat-product__name a {
  background-image: linear-gradient(var(--oks-copper), var(--oks-copper));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px;
  transition: background-size 0.4s cubic-bezier(0.2, 0.6, 0.2, 1), color 0.2s ease; padding-bottom: 1px;
}
body.page-index .featured-products .oks-cat-product:hover .oks-cat-product__name a,
.page-home .featured-products .oks-cat-product:hover .oks-cat-product__name a { background-size: 100% 1px; }

/* measured motion — FAIL-SAFE (only active once JS adds body.oks-motion) */
body.oks-motion.page-index .featured-products .oks-cat-product,
body.oks-motion.page-home .featured-products .oks-cat-product {
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.6, 0.2, 1);
}
body.oks-motion.page-index .featured-products .oks-cat-product.oks-reveal,
body.oks-motion.page-home .featured-products .oks-cat-product.oks-reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  body.oks-motion.page-index .featured-products .oks-cat-product,
  body.oks-motion.page-home .featured-products .oks-cat-product { opacity: 1 !important; transform: none !important; }
}

/* Home luxury — quiet the slider caption: heavy dark slab -> subtle translucent cream strip
   with ink text (2026-06-04). Must match .page-index #carousel .caption specificity (L4379). */
.page-index #carousel .caption,
#index #carousel .caption {
  background: rgba(250, 250, 247, 0.82) !important;
  color: var(--oks-ink) !important;
  backdrop-filter: blur(2px);
  padding: 16px 28px !important;
}
.page-index #carousel .caption h2,
.page-index #carousel .caption .display-1,
.page-index #carousel .caption .caption-description,
.page-index #carousel .caption p,
#index #carousel .caption h2,
#index #carousel .caption .caption-description {
  color: var(--oks-ink) !important;
  text-shadow: none !important;
}

/* ----------------------------------------------------------------------------
   Tighten product-card titles + spacing (2026-06-04, user: "why in two lines?
   too much space"). Names were 25px/2-line-clamp -> long titles wrapped to 2
   ragged lines; row-gap 72px read as too much air. One quiet line + ellipsis,
   smaller, less gap. Applies to category, home featured, and PDP related.
   ---------------------------------------------------------------------------- */
body.page-category .oks-cat-product__name,
body.page-index .featured-products .oks-cat-product__name,
.page-home .featured-products .oks-cat-product__name,
#product .featured-products .oks-cat-product__name,
#product .oks-cat-product__name {
  font-size: var(--t-md) !important;     /* 20px, was 25px */
  line-height: 1.3 !important;
  -webkit-line-clamp: 1 !important;       /* single line + ellipsis (was 2) */
  min-height: 0 !important;
  margin: 0 0 4px !important;
}
/* trim the over-doubled vertical air between rows */
body.page-category .oks-cat-products-grid,
body.page-index .featured-products .products,
.page-home .featured-products .products,
#product .featured-products .products {
  row-gap: clamp(28px, 3vw, 44px) !important;
}

/* Category header: keep short names on ONE line + cut excess top space
   (2026-06-04, user: "Mapas de Madera why in two lines? too much space"). */
body.page-category .oks-cat-headline {
  font-size: var(--t-2xl) !important;  /* was up to 4.4rem -> wrapped 3-word names */
  max-width: 24ch !important;                          /* was 18ch */
  line-height: 1.04 !important;
  margin: 0 0 12px !important;
}
body.page-category .oks-cat-header {
  padding-block: 32px clamp(16px, 2.2vw, 32px) !important;  /* top=32; bottom=32 mirrors 32px outer seam below sort bar → equal whitespace above/below bordered bar (8px scale) */
}
body.page-category .oks-cat-sub { margin-bottom: 16px !important; }
body.page-category .oks-cat-sort-bar {
  padding-block: clamp(12px, 1.2vw, 16px) !important;  /* symmetric 16px top/bottom inside bordered bar */
  margin-bottom: clamp(16px, 2.2vw, 32px) !important;  /* 32px seam below bar mirrors 32px above → equal outer seams (8px scale) */
}

/* PDP — tighten info column to match the "less space" pass (2026-06-04). H1 a touch smaller
   (still full product name, may wrap if long — that's fine on a PDP); quieter gaps. */
#product h1,
#product .product-information h1 {
  font-size: var(--t-2xl) !important;
  margin: 0 0 12px !important;
}
/* MOBILE H1 STEP-DOWN (2026-06-05, user): 39px italic over a 360px column turns long
   product names into a 3-line wall. One type-scale step down on mobile. */
@media (max-width: 767px) {
  #product h1,
  #product .product-information h1 {
    font-size: var(--t-lg) !important;
    line-height: 1.2 !important;
  }
}
#product .oks-prod-sub { margin: 0 0 18px !important; }
#product .product-prices { margin: 0 0 18px !important; }
#product #main > .row { padding-block: clamp(12px, 2vw, 28px) clamp(32px, 5vw, 64px) !important; }

/* Checkout — editorial step titles (2026-06-04, user request). Was Inter Tight 24px uppercase;
   now italic Cormorant, sentence-case, with a quiet copper step number. Form fields untouched
   (checkout clarity stays plain). Scoped to body#checkout / .page-order. */
body#checkout .step-title,
body.page-order .step-title {
  font-family: var(--oks-serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: var(--t-lg) !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  color: var(--oks-ink) !important;
}
body#checkout .step-title .step-number,
body.page-order .step-title .step-number {
  font-style: italic;
  color: var(--oks-copper) !important;
  margin-right: 8px;
  font-weight: 400;
}

/* ----------------------------------------------------------------------------
   Extend the listing luxury pass to search / new-products / prices-drop /
   best-sales (2026-06-04, user: check search results). These use the SAME
   product-list templates as categories but a different body class, so the
   body.page-category-scoped luxury rules skipped them (tan band + 2-line names).
   ---------------------------------------------------------------------------- */
/* kill the legacy classic-base #products{#f5ebe0} tan band on all listing pages */
body.page-search #products,
body.page-new-products #products,
body.page-prices-drop #products,
body.page-best-sales #products { background-color: transparent !important; }

/* single-line card titles on EVERY listing grid (.oks-cat-products-grid is listing-only,
   so this safely covers category + search + new + sale without touching home/PDP) */
.oks-cat-products-grid .oks-cat-product__name {
  font-size: var(--t-md) !important;
  line-height: 1.3 !important;
  -webkit-line-clamp: 1 !important;
  min-height: 0 !important;
  margin: 0 0 4px !important;
}

/* MAP-CARD NAME SPLIT + heart clearance (2026-06-05, follow-up: "city name for maps
   are fucked"). Mobile only: the repeated "Mapa de madera" becomes a quiet caption
   line and the CITY becomes the title, so the grid scans by city. The name also
   clears the absolutely-positioned heart (20px + gap). Desktop: spans inline,
   byte-identical rendering. */
@media (max-width: 767px) {
  /* heart moves to the image's top-right corner (its spec position) so the title
     gets the full card width; desc loses its positioning context on purpose */
  .oks-cat-product { position: relative; }
  .oks-cat-product__desc { position: static; }
  .oks-cat-product__wishlist { top: 6px; right: 6px; }
  .oks-cat-product__name--map {
    display: block !important;                      /* defeat the -webkit-box clamp */
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    overflow: visible !important;
  }
  .oks-cat-product__name--map .oks-map-prefix {
    display: block;
    font-family: var(--oks-sans);
    font-style: normal;
    font-size: var(--t-caption);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--oks-cat-muted);
    margin: 0 0 2px;
  }
  .oks-cat-product__name--map .oks-map-de { display: none; }
  /* ultra-narrow (<=359px, 107px cards): drop tracking so the caption stays one line */
  @media (max-width: 359px) {
    .oks-cat-product__name--map .oks-map-prefix { font-size: 12px; letter-spacing: 0; }
  }
  .oks-cat-product__name--map .oks-map-city {
    display: block;
    font-size: var(--t-md);
    line-height: 1.2;
  }
}

/* MOBILE CARD-NAME READABILITY (2026-06-05, user: "big font, can't read the product
   name"). The 2-col mobile grid yields 142px cards; 20px/1-line shows ~10 chars, so
   every map truncates to the same string ("Mapa de mader…"). Mobile only: one
   type-scale step down (--t-body 16px) + the 2-line clamp restored. Desktop keeps
   the approved quiet single line (2026-06-04 decision). */
@media (max-width: 767px) {
  body.page-category .oks-cat-product__name,
  body.page-index .featured-products .oks-cat-product__name,
  .page-home .featured-products .oks-cat-product__name,
  #product .featured-products .oks-cat-product__name,
  #product .oks-cat-product__name,
  .oks-cat-products-grid .oks-cat-product__name {
    font-size: var(--t-body) !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
  }
}

/* match the category headline sizing + sane row-gap on these sibling listing pages */
body.page-search .oks-cat-headline,
body.page-new-products .oks-cat-headline,
body.page-prices-drop .oks-cat-headline,
body.page-best-sales .oks-cat-headline {
  font-size: var(--t-2xl) !important;
  max-width: 24ch !important;
  line-height: 1.04 !important;
}
body.page-search .oks-cat-products-grid,
body.page-new-products .oks-cat-products-grid,
body.page-prices-drop .oks-cat-products-grid,
body.page-best-sales .oks-cat-products-grid { row-gap: clamp(28px, 3vw, 44px) !important; }

/* CMS pages — editorial consistency (2026-06-04, user: check cms pages). Constrain the reading
   column and replace default disc bullets with the quiet copper dash used on the PDP. */
body.page-cms #content.page-content,
body.cms #content.page-content {
  max-width: 720px;
}
body.page-cms .page-content ul,
body.cms .page-content ul { list-style: none !important; padding-left: 0 !important; }
body.page-cms .page-content li,
body.cms .page-content li {
  position: relative; padding-left: 20px; margin-bottom: 8px; line-height: 1.7;
}
body.page-cms .page-content li::before,
body.cms .page-content li::before {
  content: ""; position: absolute; left: 0; top: 0.75em;
  width: 8px; height: 1px; background: var(--oks-copper);
}

/* Working price slider (2026-06-04) — replaces the dead single-checkbox price filter.
   Dual-handle range over a hairline track, copper fill + thumbs. Editorial + functional. */
.oks-cat-price { position: relative; height: 52px; margin-top: 4px; }
.oks-cat-price__track {
  position: absolute; top: 16px; left: 2px; right: 2px; height: 2px;
  background: var(--oks-cat-hairline);
}
.oks-cat-price__fill { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: var(--oks-cat-copper); }
.oks-cat-price__input {
  position: absolute; top: 8px; left: 0; width: 100%; height: 18px; margin: 0;
  -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none;
}
.oks-cat-price__input::-webkit-slider-runnable-track { background: transparent; border: 0; height: 18px; }
.oks-cat-price__input::-moz-range-track { background: transparent; border: 0; height: 18px; }
.oks-cat-price__input::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto; cursor: pointer;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--oks-cat-copper); border: 2px solid #faf8f4; box-shadow: 0 0 0 1px var(--oks-cat-copper);
  margin-top: 0;
}
.oks-cat-price__input::-moz-range-thumb {
  pointer-events: auto; cursor: pointer;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--oks-cat-copper); border: 2px solid #faf8f4; box-shadow: 0 0 0 1px var(--oks-cat-copper);
}
.oks-cat-price__input:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--oks-cat-copper); outline-offset: 2px; }
.oks-cat-price__vals {
  position: absolute; top: 30px; left: 0; right: 0;
  display: flex; justify-content: space-between;
  font-family: var(--oks-sans); font-size: var(--t-caption);
  letter-spacing: 0.04em; color: var(--oks-cat-muted);
}

/* Editorial product spec table — "Ficha técnica" (2026-06-04, per 05-22 PDP spec).
   <dl> as a 2-col grid, italic Cormorant keys vs Inter values, hairline between rows. */
#product .oks-prod-spec { margin: 0; max-width: 640px; }
#product .oks-prod-spec__title {
  font-family: var(--oks-serif); font-style: italic; font-weight: 400;
  font-size: var(--t-lg); color: var(--oks-ink); margin: 0 0 18px;
}
#product .oks-prod-spec__list { margin: 0; }
#product .oks-prod-spec__row {
  display: grid; grid-template-columns: minmax(120px, 1fr) 1.6fr; gap: 0 32px;
  padding: 13px 0; border-top: 1px solid var(--oks-line);
}
#product .oks-prod-spec__row:last-child { border-bottom: 1px solid var(--oks-line); }
#product .oks-prod-spec__key {
  font-family: var(--oks-serif); font-style: italic; font-size: var(--t-md);
  color: var(--oks-ink); margin: 0; line-height: 1.3;
}
#product .oks-prod-spec__val {
  font-family: var(--oks-sans); font-size: var(--t-body); color: var(--oks-ink-2);
  margin: 0; line-height: 1.55;
}
#product .oks-prod-spec__empty { font-family: var(--oks-sans); color: var(--oks-muted); }
@media (max-width: 560px) {
  #product .oks-prod-spec__row { grid-template-columns: 1fr; gap: 2px; padding: 11px 0; }
}

/* PDP image lightbox/zoom (2026-06-04) — self-contained, replaces the unwired stock modal. */
#product .product-cover { cursor: zoom-in; }
.oks-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(20, 17, 13, 0.92);
  display: flex; align-items: center; justify-content: center; padding: 4vw;
  opacity: 0; transition: opacity 0.25s ease;
}
.oks-lightbox.is-open { opacity: 1; }
.oks-lightbox__img {
  max-width: 92vw; max-height: 92vh; object-fit: contain; cursor: zoom-out;
  box-shadow: 0 12px 60px rgba(0, 0, 0, 0.5); background: #faf8f4;
}
.oks-lightbox__close {
  position: absolute; top: 18px; right: 26px;
  background: none; border: 0; color: #faf8f4; font-size: 38px; line-height: 1;
  cursor: pointer; opacity: 0.85;
}
.oks-lightbox__close:hover { opacity: 1; }

/* PDP Descripción tab — unify the voice with Detalles (2026-06-04, user choice): the merchant
   HTML uses <strong> for its labels (Características, Tamaños, Regalo) + inline product-name
   mentions. Render them in Cormorant italic (the same face as the Detalles 'Ficha técnica'
   keys) at body size so they read as elegant emphasis and flow inline — no bold-sans, no size
   jump. Body prose stays Inter. Emoji bullets kept. */
#product .product-description strong,
#product #description strong {
  font-family: var(--oks-serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: var(--oks-ink);
}

/* ============================================================================
   FIX-BUYBOX (2026-06-04) — PDP add-to-cart row.
   Qty stepper + "Añadir a la cesta" + wishlist (like) now share ONE 48px
   height, vertically centred on a single aligned row. Before: stepper 48 /
   add-to-cart 44 / wishlist 32 → ragged. "Compartir" (FB+Pinterest) stays a
   tidy row below (.social-sharing, unchanged). PDP-scoped (#product) so the
   global 32px wishlist on category cards is untouched.
   ============================================================================ */
#product .product-add-to-cart .product-quantity {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap;
  gap: 12px;
}
#product .product-add-to-cart .product-quantity .qty,
#product .product-add-to-cart .product-quantity .add {
  margin: 0 !important;
}
/* "Añadir a la cesta" → 48px to match the qty stepper */
#product .product-add-to-cart .add-to-cart.btn-primary {
  height: 48px !important;
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
}
/* wishlist (buy-box only) → 48×48 square, aligned to the row height */
#product .product-add-to-cart .product-quantity .wishlist-button-add.wishlist-button-product {
  width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
}

/* ============================================================================
   FIX-GALLERY (2026-06-04) — PDP thumb strip scrollable when >4 images.
   Stock .js-qv-mask clipped horizontal overflow with no scroll/arrows, so
   thumbs past the cover width (product 75 = 11 imgs, 64 = 5) were unreachable.
   Baseline = horizontal scroll (touch/trackpad native) + thin copper scrollbar
   + scroll-snap. Arrow buttons are progressive enhancement (product.tpl); if JS
   fails the scrollbar still reaches every thumb.
   ============================================================================ */
#product .images-container { position: relative; }
#product .images-container .js-qv-mask {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--oks-copper) transparent;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
#product .images-container .js-qv-mask::-webkit-scrollbar { height: 4px; }
#product .images-container .js-qv-mask::-webkit-scrollbar-thumb { background: var(--oks-copper); border-radius: 0; }
#product .images-container .js-qv-mask::-webkit-scrollbar-track { background: transparent; }
#product .images-container .product-images {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px;
  margin: 10px 0 0 !important;
  padding: 0 0 6px !important;
}
#product .images-container .product-images li.thumb-container {
  flex: 0 0 auto !important;
  list-style: none;
  scroll-snap-align: start;
}
/* thumb-strip arrows (added by product.tpl JS only when the strip overflows) */
#product .oks-thumb-nav {
  position: absolute; bottom: 8px; z-index: 3;
  width: 30px; height: 84px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--oks-line); background: var(--oks-bg);
  color: var(--oks-ink); cursor: pointer; line-height: 1;
  opacity: .94; transition: opacity .15s ease, color .15s ease, border-color .15s ease;
}
#product .oks-thumb-nav:hover { color: var(--oks-copper); border-color: var(--oks-copper); }
#product .oks-thumb-nav[hidden] { display: none !important; }
#product .oks-thumb-nav--prev { left: 0; }
#product .oks-thumb-nav--next { right: 0; }

/* ============================================================================
   FIX-DESC-LEDE (2026-06-04, plan B) — the first description paragraph reads as
   an editorial lede (Cormorant italic, slightly larger); the rest stays Inter
   prose. Pairs with scripts/db/reformat-descriptions.py which strips emoji +
   junk nodes, flattens <li><p>, and drops the redundant "Características
   principales:" heading so the copper-dash list stands alone.
   ============================================================================ */
#product .product-description > p:first-of-type {
  font-family: var(--oks-serif) !important;
  font-style: italic !important;
  font-size: var(--t-md) !important;
  line-height: 1.5 !important;
  color: var(--oks-ink) !important;
  margin-bottom: 18px !important;
}

/* ============================================================================
   FIX-FAQ (2026-06-04, plan A) — grouped <details> accordion on the FAQ CMS page
   (id_cms=6, /preguntas-frecuentes). Native disclosure: no JS, keyboard-
   accessible, fail-safe (content readable even if CSS/JS fail). Editorial voice:
   Cormorant-italic section headings, copper +/- markers, hairline rows.
   ============================================================================ */
.oks-faq { max-width: 760px; margin: 0 auto; }
.oks-faq__intro {
  font-family: var(--oks-serif); font-style: italic; font-size: var(--t-md);
  line-height: 1.6; color: var(--oks-ink-2); margin: 0 0 44px;
}
.oks-faq__group { margin: 0 0 44px; }
.oks-faq__group-title {
  font-family: var(--oks-serif); font-style: italic; font-weight: 400;
  font-size: var(--t-lg); color: var(--oks-ink);
  margin: 0 0 6px; padding-bottom: 10px;
  border-bottom: 1px solid var(--oks-line);
}
.oks-faq__item { border-bottom: 1px solid var(--oks-line); }
.oks-faq__q {
  list-style: none; cursor: pointer; position: relative;
  font-family: var(--oks-sans); font-size: var(--t-body); color: var(--oks-ink);
  padding: 18px 38px 18px 0; line-height: 1.5; transition: color .15s ease;
}
.oks-faq__q::-webkit-details-marker { display: none; }
.oks-faq__q:hover { color: var(--oks-copper); }
.oks-faq__q::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-family: var(--oks-sans); font-size: 22px; line-height: 1; color: var(--oks-copper);
}
.oks-faq__item[open] .oks-faq__q::after { content: "\2013"; }
.oks-faq__a { padding: 0 0 22px; color: var(--oks-ink-2); line-height: 1.7; }
.oks-faq__a p { margin: 0 0 12px; }
.oks-faq__a p:last-child { margin-bottom: 0; }
.oks-faq__a ul { list-style: none !important; padding-left: 0 !important; margin: 12px 0; }
.oks-faq__a li { position: relative; padding-left: 20px; margin-bottom: 8px; line-height: 1.6; list-style: none !important; }
.oks-faq__a li::before { content: ""; position: absolute; left: 0; top: .75em; width: 8px; height: 1px; background: var(--oks-copper); }
.oks-faq__a a { color: var(--oks-copper); text-decoration: underline; text-underline-offset: 2px; }

/* FAQ link in the dark top utility bar (left col, beside displayNav1) */
.header-nav .oks-topbar-faq {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: 16px; vertical-align: middle;
  font-family: var(--oks-sans); font-size: var(--t-caption, 12px);
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(250, 250, 247, 0.78); white-space: nowrap;
  transition: color .15s ease;
}
.header-nav .oks-topbar-faq:hover { color: var(--oks-copper); }
.header-nav .oks-topbar-faq__icon {
  width: 15px; height: 15px; fill: currentColor; flex: 0 0 auto;
}

/* ============================================================================
   HIDE-WISHLIST (2026-06-04) — the PDP buy-box wishlist heart is hidden because
   it is SILENTLY BROKEN: the blockwishlist React widget never binds to this
   theme's custom button markup, so clicking it does nothing (no toast/modal/
   save, no GraphQL mutation). Module stays installed + active; only the dead
   button is hidden. TO RESTORE: delete this block (and fix the JS binding first
   — see memory project_wishlist_hidden_2026-06-04 for the diagnosis + plan).
   ============================================================================ */
#product .product-add-to-cart .product-quantity .wishlist-button-add.wishlist-button-product {
  display: none !important;
}

/* ===== FIX-FOCUS (2026-06-05): audit F3 + F4 ==========================
   classic-base.css sets a{color:#24b9d7} (blue) and .btn:focus{outline:5px auto}
   + .btn-primary:focus{background:#1d93ab}. On MOUSE click these surface as the
   blue text + grey focus box + blue button bg the audit flagged. Kill them on
   mouse focus; keep a copper ring for KEYBOARD users only (:focus-visible, WCAG
   2.4.7). Appended at EOF so it wins the cascade over classic-base. ================ */
a:focus,
.top-menu > li > a:focus,
.top-menu .sub-menu a:focus,
#header .header-nav a:focus,
.dropdown-item:focus,
.dropdown-item:focus a {
  color: var(--oks-ink) !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
}
button:focus,
.btn:focus,
.btn.focus,
.btn:active:focus,
.btn-primary:focus,
.btn-primary.focus {
  outline: none !important;
  box-shadow: none !important;
}
/* buttons keep their brand fill on focus — never the classic blue (#1d93ab) */
.btn-primary:focus,
.btn-primary.focus {
  background: var(--oks-ink) !important;
  border-color: var(--oks-ink) !important;
  color: var(--oks-bg) !important;
}
/* KEYBOARD navigation keeps a visible copper ring (links + buttons only;
   form fields keep their border-based focus from theme.css line ~720). */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.top-menu > li > a:focus-visible,
.top-menu .dropdown-item:focus-visible,
.top-menu .dropdown-item.active:focus-visible,
#header .header-nav a:focus-visible {
  outline: 2px solid var(--oks-copper) !important;
  outline-offset: 3px !important;
  box-shadow: none !important;
}
/* HOVER + ACTIVE (added 2026-06-05 after the :focus-only fix missed them):
   classic-base also sets .dropdown-item:hover{color:#24b9d7;background:#f5f5f5}
   and .dropdown-item.active{color:#fff;background:#24b9d7} (current-page entry).
   Dropdown children had no theme hover override and fell through to blue+grey.
   Hover = copper text, transparent bg (brand link-hover); active entry = ink. */
.top-menu .dropdown-item:hover,
.top-menu .dropdown-item:active,
.js-sub-menu a.dropdown-item:hover,
.sub-menu a.dropdown-item:hover {
  color: var(--oks-copper) !important;
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
}
.top-menu .dropdown-item.active,
.top-menu .dropdown-item.active:hover,
.top-menu .dropdown-item.active:focus,
.top-menu li.current > a.dropdown-item {
  color: var(--oks-ink) !important;
  background: transparent !important;
}
/* Top-level entries keep their deliberate ink + ink-underline hover (existing
   design at .top-menu > li > a:hover); re-assert over the generic copper above. */
.top-menu > li.category > a.dropdown-item:hover {
  color: var(--oks-ink) !important;
}
/* classic-base.css contains ID-specificity rules that beat every class-based
   override above:
     #_desktop_top_menu .top-menu .sub-menu a:hover{color:#24b9d7!important}
   Found via CDP CSS.getMatchedStylesForNode (2026-06-05). Same specificity here,
   later in the cascade (theme.css loads after classic-base) -> we win. */
#_desktop_top_menu .top-menu .sub-menu a:hover,
#_desktop_top_menu .top-menu .sub-menu .dropdown-submenu:hover,
#_desktop_top_menu .top-menu .popover a:hover {
  color: var(--oks-copper) !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* ===== END FIX-FOCUS ===== */

/* ===== A17 (2026-06-05): newsletter microcopy under the subscribe pill ===== */
.oks-footer-nl__note {
  margin: 8px 2px 0;
  font-family: var(--oks-sans);
  font-size: var(--t-caption);
  color: rgba(244, 237, 226, 0.55); /* muted cream on the dark band */
  letter-spacing: 0.02em;
}

/* ===== A16 (2026-06-05): soften FAQ accordion open — native <details> opens
   abruptly; fade+slide the answer in. Close needs JS so only open is animated. */
@keyframes oksFaqOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.oks-faq__item[open] .oks-faq__a {
  animation: oksFaqOpen 0.28s ease both;
}
@media (prefers-reduced-motion: reduce) {
  .oks-faq__item[open] .oks-faq__a { animation: none; }
}

/* ===== F7 + A2 (2026-06-05): contact form layout =====
   F7: labels were inconsistently aligned (CORREO/MENSAJE right, ASUNTO left)
   and Enviar sat bottom-left. Labels: block, left, above full-width fields.
   Enviar: right-aligned. A2: custom file control replaces the native button. */
body#contact .login-form .form-fields label {
  display: block;
  width: 100%;
  margin-bottom: 20px;
}
body#contact .login-form .form-fields label > span:first-child {
  display: block;
  text-align: left;
  margin-bottom: 6px;
}
body#contact .login-form .form-fields input[type="email"],
body#contact .login-form .form-fields select,
body#contact .login-form .form-fields textarea {
  width: 100%;
  max-width: 640px;
}
body#contact .login-form .form-footer {
  display: flex;
  justify-content: flex-end;
  max-width: 640px;
}
/* custom file control */
body#contact .oks-file__control {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}
body#contact .oks-file__input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
}
body#contact .oks-file__btn {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--oks-ink);
  font-family: var(--oks-sans);
  font-size: var(--t-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--oks-ink);
  background: transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
body#contact .oks-file:hover .oks-file__btn {
  color: var(--oks-copper);
  border-color: var(--oks-copper);
}
body#contact .oks-file__control:focus-within .oks-file__btn {
  outline: 2px solid var(--oks-copper);
  outline-offset: 3px;
}
body#contact .oks-file__name {
  font-size: var(--t-caption);
  color: var(--oks-muted);
}
/* F7: kill the classic-base left indent on the fields — label and field share one left edge */
body#contact .login-form .form-fields label > input,
body#contact .login-form .form-fields label > select,
body#contact .login-form .form-fields label > textarea,
body#contact .login-form .form-fields .oks-file__control {
  display: block;
  margin-left: 0;
}
body#contact .login-form .form-fields .oks-file__control { display: flex; }
/* filenames are case-significant — never uppercase the picked file's name */
body#contact .oks-file__name { text-transform: none; letter-spacing: 0.02em; }

/* ===== A11 (2026-06-05): close hover-opened submenu while scrolling =====
   header.tpl adds .oks-menu-scrolled on scroll, removes it on mousemove. */
html.oks-menu-scrolled #header .top-menu .popover,
html.oks-menu-scrolled #header .top-menu .sub-menu {
  display: none !important;
}

/* ===== A10 (2026-06-05): pre-footer banner framed as a CTA section ===== */
.oks-wa-cta {
  background: var(--oks-bg-alt);
  padding: 60px 24px;
  margin-top: 56px;
}
.oks-wa-cta__inner {
  max-width: 1110px;
  margin: 0 auto;
  text-align: center;
}
.oks-wa-cta__title {
  font-family: var(--oks-font-serif);
  font-size: var(--t-xl);
  font-weight: 500;
  color: var(--oks-ink);
  margin: 0 0 8px;
}
.oks-wa-cta__title em {
  font-style: italic;
  color: var(--oks-copper);
}
.oks-wa-cta__sub {
  font-family: var(--oks-sans);
  font-size: var(--t-body);
  color: var(--oks-muted);
  margin: 0 0 32px;
}
.oks-wa-cta .banner { display: block; }
.oks-wa-cta .banner img { width: 100%; height: auto; }

/* ===== F2 (2026-06-05): cart qty — ONE control, minus / number / plus =====
   The global FIX-QTY keeps input + a bordered vertical-arrow column, which
   reads as two attached boxes (audit F2). In the cart: free the two buttons
   from their vertical wrapper (display:contents) and flank the number,
   no inner dividers, − and + glyphs instead of ▲▼. Cart-scoped; PDP keeps
   its approved buy-box stepper. */
body#cart .cart-item .input-group.bootstrap-touchspin {
  min-width: 124px !important;
  max-width: 132px !important;
  height: 44px !important;
}
body#cart .cart-item .bootstrap-touchspin .input-group-btn-vertical {
  display: contents !important;
  border-left: 0 !important;
}
body#cart .cart-item .bootstrap-touchspin input.js-cart-line-product-quantity {
  order: 0 !important;
  width: 44px !important;
  max-width: 44px !important;
  flex: 0 0 44px !important;
}
body#cart .cart-item .bootstrap-touchspin .btn-touchspin {
  height: 100% !important;
  flex: 1 1 38px !important;
  border: 0 !important;
}
body#cart .cart-item .bootstrap-touchspin .bootstrap-touchspin-down { order: -1 !important; }
body#cart .cart-item .bootstrap-touchspin .bootstrap-touchspin-up { order: 1 !important; border-bottom: 0 !important; }
body#cart .cart-item .btn-touchspin i.material-icons { display: none !important; }
body#cart .cart-item .bootstrap-touchspin-down::before { content: '−'; font-size: var(--t-body); line-height: 1; }
body#cart .cart-item .bootstrap-touchspin-up::before { content: '+'; font-size: var(--t-body); line-height: 1; }

/* ===== A4 (2026-06-05): consent/legal checkbox texts are SENTENCES, not labels.
   The blanket `form label { text-transform: uppercase !important }` (field-label
   styling) also hit the GDPR/newsletter/terms checkbox paragraphs on checkout —
   whole sentences in caps (audit: unreadable, alarming). Regular case, caption
   size, muted ink, readable line-height. ===== */
.custom-checkbox label,
.custom-checkbox label a,
.psgdpr_consent_message,
.psgdpr_consent_message a {
  text-transform: none !important;
  font-style: normal !important;
  font-size: var(--t-caption) !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  color: var(--oks-muted) !important;
  line-height: 1.55 !important;
}
.custom-checkbox label a { text-decoration: underline !important; }