/** Shopify CDN: Minification failed

Line 28:23 Expected ":"

**/
/* ==========================================================================
   OCCRE — index.css (main stylesheet)
   Design tokens extracted from Figma "Occre Website" → Design System page
   https://www.figma.com/design/gAbs6fWFsMDlEvZrrPFnjw/Occre-Website
   ========================================================================== */

/* --------------------------------------------------------------------
   FONTS — brand typefaces (relative URLs resolve inside /assets/)
   -------------------------------------------------------------------- */

@font-face {
  font-family: 'Suisse Intl';
  src: url('suisse-intl-light.woff2') format('woff2');
  font-weight: 100 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GT Canon';
  src: url('gt-canon-light.woff2') format('woff2');
  font-weight: 100 400;
  font-style: normal;º
  font-display: swap;
}

/* Corte condensado — títulos de tarjeta de colección.
   Light (300) y Regular (400): el diseño usa el trazo fino. */
@font-face {
  font-family: 'GT Canon Cond';
  src: url('gt-canon-cond-light.woff2') format('woff2');
  font-weight: 100 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'GT Canon Cond';
  src: url('gt-canon-cond-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'STK Bureau Sans';
  src: url('stk-bureau-sans-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'STK Bureau Sans';
  src: url('stk-bureau-sans-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --------------------------------------------------------------------
     COLORS — Figma local variables · Collection 1
     -------------------------------------------------------------------- */

  /* Brand */
  --color-brand-gold:    #aa8757;
  --color-brand-beige:   #cbc0ac;
  --color-brand-blue:    #033b4c;
  --color-brand-greyish: #8a948d;
  --color-brand-red:     #7b1d38;

  /* Colores por nivel de dificultad (Figma node 923:39290) */
  --color-level-1: #b59772; /* Beginner */
  --color-level-2: #abbaad; /* Medio */
  --color-level-3: #114c5b; /* Avanzado */
  --color-level-4: #6f1232; /* Experto */

  /* Neutrals */
  --color-white:    #ffffff;
  --color-grey-200: #f4f4f4;
  --color-grey-300: #e8e8e8;
  --color-grey-400: #d4d4d4;
  --color-grey-500: #8d8d8d;
  --color-grey-600: #545454;
  --color-grey-700: #383838;
  --color-grey-800: #242424;
  --color-grey-900: #1d1b19;
  --color-black:    #000000;

  /* --------------------------------------------------------------------
     COLORS — library tokens referenced in the file (external collections)
     -------------------------------------------------------------------- */
  --color-text-primary:   #131927; /* Text Color/text-primary-black */
  --color-text-secondary: #6d717f; /* Text Color/text-secondary-dark-grey */
  --color-surface-white:  #ffffff; /* Surface Color/surface-white */
  --color-white-20:       #ffffff33; /* White 20 (white @ 20% alpha) */

  /* --------------------------------------------------------------------
     TYPOGRAPHY — families (Design System → Font / Typography)
     -------------------------------------------------------------------- */
  --font-heading: 'GT Canon', 'GT Canon Trial', Georgia, serif;
  --font-heading-cond: 'GT Canon Cond', 'GT Canon', 'GT Canon Trial', Georgia, serif;
  --font-body:    'Suisse Intl', 'STK Bureau Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-body-2:    'STK Bureau Sans', 'Suisse Intl', 'Helvetica Neue', Arial, sans-serif;

  /* Weights used in the design system */
  --font-weight-heading-light:  100; /* cortes Light del diseño = peso 100 */
  --font-weight-heading-reg:    400; /* GT Canon L Cn Rg */
  --font-weight-body-regular:   400;
  --font-weight-body-medium:    500;

  /* --------------------------------------------------------------------
     TYPOGRAPHY — scale (Design System → Desktop Typography)
     name: size / line-height / letter-spacing
     -------------------------------------------------------------------- */

  /* NOTE: Dawn's base.css sets html { font-size: 62.5% } → 1rem = 10px.
     All rem tokens below are therefore px/10 (16px = 1.6rem). */

  /* Display XXL — GT Canon L Cn Rg · 425 · 100% · 0% */
  --text-display-xxl-size: 42.5rem; /* 425px */
  --text-display-xxl-line: 1;
  --text-display-xxl-spacing: 0;

  /* Display XL — GT Canon L Cn Rg · 64 · 100% · 0% */
  --text-display-xl-size: 6.4rem; /* 64px */
  --text-display-xl-line: 1;
  --text-display-xl-spacing: 0;

  /* Title XXL — GT Canon M Lt · 180 · 110% · -5% */
  --text-title-xxl-size: 18rem; /* 180px */
  --text-title-xxl-line: 1.1;
  --text-title-xxl-spacing: -0.05em;

  /* Title XL — GT Canon M Lt · 64 · 110% · -5% */
  --text-title-xl-size: 6.4rem; /* 64px */
  --text-title-xl-line: 1.1;
  --text-title-xl-spacing: -0.05em;

  /* Title L — GT Canon M Lt · 40 · 110% · -5% */
  --text-title-l-size: 4rem; /* 40px */
  --text-title-l-line: 1.1;
  --text-title-l-spacing: -0.05em;

  /* Title M — GT Canon M Lt · 32 · 110% · -5% */
  --text-title-m-size: 3.2rem; /* 32px */
  --text-title-m-line: 1.1;
  --text-title-m-spacing: -0.05em;

  /* Title S — GT Canon M Lt · 24 · 110% · -3% */
  --text-title-s-size: 2.4rem; /* 24px */
  --text-title-s-line: 1.1;
  --text-title-s-spacing: -0.03em;

  /* Title XS — GT Canon M Lt · 18 · 110% · -3% */
  --text-title-xs-size: 1.8rem; /* 18px */
  --text-title-xs-line: 1.1;
  --text-title-xs-spacing: -0.03em;

  /* Body L / Body L Medium — STK Bureau Sans · 18 · 140% · -1% */
  --text-body-l-size: 1.8rem; /* 18px */
  --text-body-l-line: 1.4;
  --text-body-l-spacing: -0.01em;

  /* Body M / Body M Medium — STK Bureau Sans · 16 · 140% · -1% */
  --text-body-m-size: 1.6rem; /* 16px */
  --text-body-m-line: 1.4;
  --text-body-m-spacing: -0.01em;

  /* Body S — STK Bureau Sans · 14 · 140% · -1% */
  --text-body-s-size: 1.4rem; /* 14px */
  --text-body-s-line: 1.4;
  --text-body-s-spacing: -0.01em;

  /* Body XS — STK Bureau Sans · 12 · 140% · 0% */
  --text-body-xs-size: 1.2rem; /* 12px */
  --text-body-xs-line: 1.4;
  --text-body-xs-spacing: 0;

  /* Button — STK Bureau Sans Medium · 15 · 100% · -3% */
  --text-button-size: 1.5rem; /* 15px */
  --text-button-line: 1;
  --text-button-spacing: -0.03em;
  --text-button-weight: var(--font-weight-body-medium);

  /* Tag — STK Bureau Sans Regular · 16 · 120% · 8% */
  --text-tag-size: 1.6rem; /* 16px */
  --text-tag-line: 1.2;
  --text-tag-spacing: 0.08em;

  /* --------------------------------------------------------------------
     SPACING / RADIUS — library tokens referenced in the file
     -------------------------------------------------------------------- */
  --radius-xl: 2.4rem; /* 24px · Spacing System/radius-xl */
}

/* ==========================================================================
   Typography utility classes (map 1:1 to Figma text styles)
   ========================================================================== */

.text-display-xxl {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading-reg);
  font-size: var(--text-display-xxl-size);
  line-height: var(--text-display-xxl-line);
  letter-spacing: var(--text-display-xxl-spacing);
}

.text-display-xl {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading-reg);
  font-size: var(--text-display-xl-size);
  line-height: var(--text-display-xl-line);
  letter-spacing: var(--text-display-xl-spacing);
}

.text-title-xxl {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading-light);
  font-size: var(--text-title-xxl-size);
  line-height: var(--text-title-xxl-line);
  letter-spacing: var(--text-title-xxl-spacing);
}

.text-title-xl {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading-light);
  font-size: var(--text-title-xl-size);
  line-height: var(--text-title-xl-line);
  letter-spacing: var(--text-title-xl-spacing);
}

.text-title-l {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading-light);
  font-size: var(--text-title-l-size);
  line-height: var(--text-title-l-line);
  letter-spacing: var(--text-title-l-spacing);
}

.text-title-m {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading-light);
  font-size: var(--text-title-m-size);
  line-height: var(--text-title-m-line);
  letter-spacing: var(--text-title-m-spacing);
}

.text-title-s {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading-light);
  font-size: var(--text-title-s-size);
  line-height: var(--text-title-s-line);
  letter-spacing: var(--text-title-s-spacing);
}

.text-title-xs {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading-light);
  font-size: var(--text-title-xs-size);
  line-height: var(--text-title-xs-line);
  letter-spacing: var(--text-title-xs-spacing);
}

.text-body-l {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-regular);
  font-size: var(--text-body-l-size);
  line-height: var(--text-body-l-line);
  letter-spacing: var(--text-body-l-spacing);
}

.text-body-l-medium {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-medium);
  font-size: var(--text-body-l-size);
  line-height: var(--text-body-l-line);
  letter-spacing: var(--text-body-l-spacing);
}

.text-body-m {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-regular);
  font-size: var(--text-body-m-size);
  line-height: var(--text-body-m-line);
  letter-spacing: var(--text-body-m-spacing);
}

.text-body-m-medium {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-medium);
  font-size: var(--text-body-m-size);
  line-height: var(--text-body-m-line);
  letter-spacing: var(--text-body-m-spacing);
}

.text-body-s {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-regular);
  font-size: var(--text-body-s-size);
  line-height: var(--text-body-s-line);
  letter-spacing: var(--text-body-s-spacing);
}

.text-body-xs {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-regular);
  font-size: var(--text-body-xs-size);
  line-height: var(--text-body-xs-line);
  letter-spacing: var(--text-body-xs-spacing);
}

.text-button {
  font-family: var(--font-body);
  font-weight: var(--text-button-weight);
  font-size: var(--text-button-size);
  line-height: var(--text-button-line);
  letter-spacing: var(--text-button-spacing);
}

.text-tag {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-regular);
  font-size: var(--text-tag-size);
  line-height: var(--text-tag-line);
  letter-spacing: var(--text-tag-spacing);
  text-transform: uppercase;
}

/* ==========================================================================
   Layout tokens
   ========================================================================== */

:root {
  --page-max-width: 151.2rem; /* 1512px */
  --page-gutter: 2.4rem; /* 24px */
  --grid-gap: 1.6rem; /* 16px */
  --radius-s: 0.4rem; /* 4px */
  --radius-m: 0.8rem; /* 8px */
  --header-height: 7.2rem; /* 72px */
  --announcement-height: 3.8rem; /* 38px */

  /* --------------------------------------------------------------------
     Puente Dawn → marca: base.css y los snippets de Dawn tipografían con
     --font-body-family / --font-heading-family (settings del tema, Assistant).
     Remapeadas aquí, todo lo que no declare font-family propia (modales,
     formularios, políticas, drawers…) cae en las fuentes de marca.
     -------------------------------------------------------------------- */
  --font-body-family: var(--font-body);
  --font-heading-family: var(--font-heading);
}

/* Refuerzo directo por si algún estilo inline de Dawn gana la cascada */
body {
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6,
.h0, .h1, .h2, .h3, .h4, .h5 {
  font-family: var(--font-heading);
}

/* ==========================================================================
   General layout helpers
   ========================================================================== */

.o-container {
  width: 100%;
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

/* En móvil se reduce el gutter para aprovechar el ancho completo */
@media screen and (max-width: 749px) {
  :root {
    --page-gutter: 1.6rem; /* 16px */
    --header-height: 5.6rem; /* 56px — cabecera móvil (Figma: py 8 + botones 40) */
  }
}

/* Section header row: title left, controls right */
.o-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2.4rem;
  margin-bottom: 4rem;
}

.o-eyebrow {
  font-family: var(--font-body-2);
  font-size: var(--text-body-s-size);
  letter-spacing: 0.08em;
  color: var(--color-grey-500);
}


/* ==========================================================================
   Buttons
   ========================================================================== */

.o-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  padding: 1rem 2rem;
  border: 0.1rem solid transparent;
  border-radius: var(--radius-s);
  background: var(--color-grey-900);
  color: var(--color-white);
  font-family: var(--font-body);
  font-weight: var(--text-button-weight);
  font-size: var(--text-button-size);
  line-height: var(--text-button-line);
  letter-spacing: var(--text-button-spacing);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.o-btn:hover {
  background: var(--color-grey-700);
}

.o-btn--secondary {
  background: var(--color-grey-200);
  color: var(--color-grey-900);
}

.o-btn--secondary:hover {
  background: var(--color-grey-300);
}

.o-btn--outline {
  background: transparent;
  border-color: var(--color-grey-900);
  color: var(--color-grey-900);
}

.o-btn--outline:hover {
  background: var(--color-grey-900);
  color: var(--color-white);
}

.o-btn--outline-light {
  background: transparent;
  border-color: var(--color-white);
  color: var(--color-white);
}

.o-btn--outline-light:hover {
  background: var(--color-white);
  color: var(--color-grey-900);
}

/* Square icon button (slider arrows, header icons) */
.o-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  padding: 0;
  border: 0.1rem solid var(--color-grey-300);
  border-radius: var(--radius-s);
  background: var(--color-white);
  color: var(--color-grey-900);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.o-icon-btn:hover {
  background: var(--color-grey-200);
}

.o-icon-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.o-icon-btn svg {
  width: 1.8rem;
  height: 1.8rem;
}

/* ==========================================================================
   Horizontal slider (scroll-snap based, no library)
   ========================================================================== */

.o-slider {
  display: flex;
  gap: var(--grid-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.o-slider::-webkit-scrollbar {
  display: none;
}

.o-slider > * {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* ==========================================================================
   Media / card helpers
   ========================================================================== */

.o-media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-s);
}

.o-media > img,
.o-media > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Serif title laid over an image (editorial / blog / collection cards) */
.o-media__caption {
  position: absolute;
  inset-inline: 2.4rem;
  bottom: 2.4rem;
  z-index: 2; /* siempre por encima del velo --shade */
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading-light);
  font-size: var(--text-title-m-size);
  line-height: var(--text-title-m-line);
  letter-spacing: var(--text-title-m-spacing);
}

/* ==========================================================================
   Tarjeta de producto (4s-product-card) — Figma 346x614 desktop / 267x523 mobile
   El contenedor de la tarjeta (p. ej. swiper-slide) necesita
   container-type: inline-size; los tamaños internos escalan con cqw.
   ========================================================================== */

.occre-product-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--radius-m);
  /* Figma: gradiente gris arriba -> blanco, sin sombra */
  background: linear-gradient(180deg, #eee 0%, rgb(238 238 238 / 0%) 100%), var(--color-white);
}

/* Imagen con marco blanco de 4px (Figma) */
.occre-product-card__media {
  position: relative;
  display: block;
  padding: 0.4rem;
}

.occre-product-card__media .o-media {
  aspect-ratio: 338 / 356;
  border-radius: 0.6rem;
  background: var(--color-grey-200);
}

.occre-product-card__badge {
  position: absolute;
  top: 1.6rem;
  left: 1.6rem;
  padding: 0.8rem 1.2rem;
  border-radius: var(--radius-s);
  background: rgb(235 234 232 / 88%);
  color: var(--color-grey-700);
  font-family: var(--font-body);
  font-size: clamp(1rem, 3.47cqw, 1.2rem);
  line-height: 1;
}

.occre-product-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 1.6rem;
}

/* Fila de metadatos: una sola línea, sin salto (altura constante) */
.occre-product-card__meta {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  overflow: hidden;
  white-space: nowrap;
  color: var(--color-grey-600);
  font-family: var(--font-body);
  font-size: clamp(1rem, 3.18cqw, 1.1rem);
  line-height: 1.6;
}

.occre-product-card__meta svg {
  width: min(4.05cqw, 1.4rem);
  height: min(4.05cqw, 1.4rem);
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

.occre-product-card__meta .meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* "Paso a paso" es el que cede espacio (elipsis); la dificultad y el ⓘ
   nunca se recortan. */
.occre-product-card__meta .meta-item--steps {
  min-width: 0;
  flex-shrink: 1;
  overflow: hidden;
}

.occre-product-card__meta .meta-item--steps .stlbl {
  overflow: hidden;
  text-overflow: ellipsis;
}

.occre-product-card__meta .meta-item--level {
  gap: 0;
  --level-color: var(--color-brand-gold);
  color: var(--level-color);
  flex-shrink: 0;
}

/* Colores por nivel de dificultad (metafield custom.difficulty_level) */
.occre-product-card__meta .meta-item--level-1 {
  --level-color: var(--color-level-1); /* Beginner */
}

.occre-product-card__meta .meta-item--level-2 {
  --level-color: var(--color-level-2); /* Medio */
}

.occre-product-card__meta .meta-item--level-3 {
  --level-color: var(--color-level-3); /* Avanzado */
}

.occre-product-card__meta .meta-item--level-4 {
  --level-color: var(--color-level-4); /* Experto */
}

.occre-product-card__meta .meta-item--level .lvl {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Figma: esferas pequeñas solapadas (sin separación); la esfera del nivel
   muestra su número en blanco */
.occre-product-card__meta .dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(2.3cqw, 0.8rem);
  height: min(2.3cqw, 0.8rem);
  border-radius: 50%;
  border: 0.1rem solid var(--level-color, var(--color-brand-gold));
  /* Fondo opaco (card blanca): la esfera vacía tapa la anterior al solaparse */
  background: var(--color-white);
  font-family: var(--font-heading);
  font-size: 0.7rem;
  line-height: 1;
  color: var(--color-white);
}

.occre-product-card__meta .dot + .dot {
  margin-left: -0.1rem;
}

/* Solape: las primeras esferas encima, para que el borde de la siguiente
   no se transparente dentro de la esfera rellena anterior */
.occre-product-card__meta .dot {
  position: relative;
}

.occre-product-card__meta .dot:nth-child(1) { z-index: 4; }
.occre-product-card__meta .dot:nth-child(2) { z-index: 3; }
.occre-product-card__meta .dot:nth-child(3) { z-index: 2; }
.occre-product-card__meta .dot:nth-child(4) { z-index: 1; }

.occre-product-card__meta .dot.is-on {
  background: var(--level-color, var(--color-brand-gold));
}

.occre-product-card__meta .meta-item--level .lvl {
  margin-left: 0.4rem;
}

/* Botón ⓘ al final de la fila, nunca se encoge */
.occre-product-card__meta .meta-item--info {
  margin-left: auto;
  flex-shrink: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

/* Corazón sobre la imagen (solo escritorio; en móvil va en las acciones) */
.occre-product-card__media-wish {
  position: absolute;
  top: 1.6rem;
  right: 1.6rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-grey-900);
  cursor: pointer;
  display: none;
}

.occre-product-card__media-wish svg {
  width: 2rem;
  height: 2rem;
}

.occre-product-card {
  position: relative;
}

/* Título a 2 líneas fijas con elipsis: la tarjeta siempre mide lo mismo */
.occre-product-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  height: calc(2 * 1.1em);
  margin: 1.6rem 0 0;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading-light);
  font-size: clamp(1.7rem, 6.4cqw, 2.2rem);
  line-height: 1.1;
  letter-spacing: var(--text-title-s-spacing);
}

.occre-product-card__title a {
  color: var(--color-grey-900);
  text-decoration: none;
}

/* Reserva fija de 1 línea aunque no haya subtítulo
   (anula el p:empty { display:none } de base.css) */
.occre-product-card__subtitle,
.occre-product-card__subtitle:empty {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
  height: 1.4em;
  margin: 1.2rem 0 0;
  color: var(--color-grey-600);
  font-family: var(--font-body);
  font-size: clamp(1.2rem, 4.05cqw, 1.4rem);
  line-height: 1.4;
}

.occre-product-card__price {
  margin: 1.2rem 0 0;
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-medium);
  font-size: clamp(1.2rem, 4.05cqw, 1.4rem);
  color: var(--color-grey-900);
}

.occre-product-card__price-compare {
  margin-left: 0.6rem;
  font-weight: var(--font-weight-body-regular, 400);
  font-size: 0.9em;
  color: #ababab;
  text-decoration: line-through;
}

.occre-product-card__actions {
  display: flex;
  gap: 0.8rem;
  margin-top: auto;
  padding-top: 1.6rem;
}

.occre-product-card__actions form {
  flex: 1;
  display: flex;
}

.occre-product-card__actions .o-btn {
  flex: 1;
  height: min(11.56cqw, 4rem);
  padding-block: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: clamp(1.1rem, 3.76cqw, 1.3rem);
}

/* Corazón (wishlist): solo en móvil, sustituye a "Ver más" */
.occre-product-card__wish {
  display: none;
}

@media screen and (max-width: 749px) {
  .occre-product-card__badge {
    font-size: clamp(1.1rem, 4.5cqw, 1.3rem);
  }

  .occre-product-card__meta {
    font-size: clamp(1.1rem, 4.9cqw, 1.3rem);
  }

  .occre-product-card__meta svg {
    width: min(6.74cqw, 1.8rem);
    height: min(6.74cqw, 1.8rem);
  }

  .occre-product-card__meta .dot {
    width: min(3cqw, 0.8rem);
    height: min(3cqw, 0.8rem);
  }

  .occre-product-card__title {
    font-size: clamp(1.5rem, 6cqw, 1.8rem);
  }

  .occre-product-card__subtitle,
  .occre-product-card__price {
    font-size: clamp(1.3rem, 5.2cqw, 1.5rem);
  }

  .occre-product-card__actions .o-btn {
    height: min(14.98cqw, 4rem);
    font-size: clamp(1.2rem, 4.9cqw, 1.4rem);
  }

  .occre-product-card__actions .occre-product-card__more {
    display: none;
  }

  .occre-product-card__wish {
    display: inline-flex;
    width: min(14.98cqw, 4rem);
    height: min(14.98cqw, 4rem);
    flex-shrink: 0;
  }

  .occre-product-card__wish svg {
    width: min(6.74cqw, 1.8rem);
    height: min(6.74cqw, 1.8rem);
  }

  .occre-product-card__media-wish {
    display: none;
  }
}

/* --- Modal de información rápida de la tarjeta --- */
.occre-product-modal {
  width: min(64rem, calc(100vw - 3.2rem));
  max-height: calc(100vh - 6.4rem);
  border: 0;
  border-radius: 1.2rem;
  padding: 0;
  /* Un único scroll: el del propio dialog */
  overflow-y: auto;
  background: #f8f5f1;
  color: var(--color-grey-900);
}

.occre-product-modal::backdrop {
  background: rgb(0 0 0 / 45%);
}

.occre-product-modal__inner {
  position: relative;
  padding: 3.2rem;
}

.occre-product-modal__close {
  /* Alineado con la primera línea del título (padding 3.2rem) */
  position: absolute;
  top: 3.2rem;
  right: 3.2rem;
  display: inline-flex;
  padding: 0.4rem;
  border: 0;
  background: none;
  color: var(--color-grey-900);
  cursor: pointer;
}

.occre-product-modal__close:focus,
.occre-product-modal__close:focus-visible {
  outline: none;
  box-shadow: none;
}

.occre-product-modal__close svg {
  width: 1.8rem;
  height: 1.8rem;
}

.occre-product-modal__title {
  margin: 0 3.2rem 1.6rem 0;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading-light);
  font-size: 2.8rem;
  line-height: 1.1;
  letter-spacing: var(--text-title-s-spacing);
}

.occre-product-modal__text {
  margin: 0 0 2.4rem;
  font-family: var(--font-body);
  font-size: var(--text-body-m-size);
  line-height: 1.5;
  color: var(--color-grey-700);
}

.occre-product-modal__media {
  aspect-ratio: 1;
  border-radius: var(--radius-m);
  margin-bottom: 2.4rem;
}

.occre-product-modal__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4.4rem;
  border: 0.1rem solid var(--color-grey-300);
  border-radius: var(--radius-m);
  background: var(--color-white);
  color: var(--color-grey-900);
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-medium);
  font-size: 1.4rem;
}

.occre-product-modal__cta:hover {
  background: var(--color-grey-200);
}

/* ==========================================================================
   Tapete — líneas discontinuas a sangre con cruces «+» en las intersecciones
   (Figma: dash 3.5/3.5 #d4d4d4 al 50 %, cruz 12px #d4d4d4 — ver 4s-frame)
   ========================================================================== */

.o-tapete {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  --tapete-line: rgb(212 212 212 / 50%);
  --tapete-cross: var(--color-grey-400);
  --tapete-gutter: var(--page-gutter);
  --tapete-top: 2.4rem;
  --tapete-bottom: 2.4rem;
}

/* Las líneas cruzan la sección de borde a borde (a sangre) */
.o-tapete__line {
  position: absolute;
}

.o-tapete__line--top,
.o-tapete__line--bottom {
  left: 0;
  right: 0;
  height: 0.1rem;
  background-image: repeating-linear-gradient(90deg, var(--tapete-line) 0 0.35rem, transparent 0.35rem 0.7rem);
}

.o-tapete__line--left,
.o-tapete__line--right {
  top: 0;
  bottom: 0;
  width: 0.1rem;
  background-image: repeating-linear-gradient(180deg, var(--tapete-line) 0 0.35rem, transparent 0.35rem 0.7rem);
}

.o-tapete__line--top { top: var(--tapete-top); }
.o-tapete__line--bottom { bottom: var(--tapete-bottom); }
.o-tapete__line--left { left: var(--tapete-gutter); }
.o-tapete__line--right { right: var(--tapete-gutter); }

/* Cruz «+» centrada en cada intersección línea vertical × horizontal */
.o-tapete__cross {
  position: absolute;
  width: 1.2rem;
  height: 1.2rem;
  transform: translate(-50%, -50%);
  color: var(--tapete-cross);
}

.o-tapete__cross::before,
.o-tapete__cross::after {
  content: '';
  position: absolute;
  background: var(--tapete-cross);
}

.o-tapete__cross::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 0.1rem;
  margin-top: -0.05rem;
}

.o-tapete__cross::after {
  left: 50%;
  top: 0;
  width: 0.1rem;
  height: 100%;
  margin-left: -0.05rem;
}

/* Variante estrella (Figma 282:4549) — solo donde la sección lo pida
   con {% render '4s-frame', star: true %} */
.o-tapete--star .o-tapete__cross {
  width: 3rem;
  height: 2.2rem;
  color: var(--color-grey-900);
}

.o-tapete--star .o-tapete__cross::before,
.o-tapete--star .o-tapete__cross::after {
  display: none;
}

.o-tapete--star .o-tapete__cross svg {
  display: block;
  width: 100%;
  height: 100%;
}

.o-tapete__cross--tl { left: var(--tapete-gutter); top: var(--tapete-top); }
.o-tapete__cross--tr { left: calc(100% - var(--tapete-gutter)); top: var(--tapete-top); }
.o-tapete__cross--bl { left: var(--tapete-gutter); top: calc(100% - var(--tapete-bottom)); }
.o-tapete__cross--br { left: calc(100% - var(--tapete-gutter)); top: calc(100% - var(--tapete-bottom)); }

/* Soft bottom gradient to keep overlaid text readable */
.o-media--shade::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgb(0 0 0 / 0%) 69.93%, rgb(0 0 0 / 60%) 100%);
  pointer-events: none;
}

/* ==========================================================================
   4S - Página de colección (Figma 450-8989 grid / 905-17042 lista)
   ========================================================================== */

.occre-collection {
  padding-top: 0.8rem;
  padding-bottom: 8rem;
}

/* Categorías hermanas: slider horizontal con flechas bajo el header */
/* Pegado al header (se reduce su margen inferior) y separado de los filtros */
.occre-collection__head:has(+ .occre-collection__related-wrap) {
  margin-bottom: 1.6rem;
}

.occre-collection__related-wrap {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 6.4rem;
}

.occre-collection__related {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.8rem;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.occre-collection__related::-webkit-scrollbar {
  display: none;
}

.occre-collection__related .occre-pill {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Flechas: mismo alto que los pills (stretch) para que todo quede alineado */
.occre-collection__related-arrow {
  flex-shrink: 0;
  align-self: stretch;
  height: auto;
  width: 3.6rem;
}

.occre-collection__related-arrow svg {
  fill: none;
}

.occre-collection__related-wrap[data-no-overflow] .occre-collection__related-arrow {
  display: none;
}

@media screen and (max-width: 749px) {
  .occre-collection__related-arrow {
    display: none;
  }
}

@media screen and (max-width: 749px) {
  /* Sangra hasta los bordes del o-container para que el slider llegue a pantalla completa */
  .occre-collection__related {
    margin-inline: calc(var(--page-gutter) * -1);
    padding-inline: var(--page-gutter);
  }
}

/* Breadcrumb */
.occre-collection__breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding-block: 0.8rem;
  font-weight: var(--font-weight-body-medium);
  line-height: 1;
  letter-spacing: 0.02em;
}

.occre-collection__breadcrumb a {
  color: var(--color-grey-500);
  text-decoration: none;
}

.occre-collection__breadcrumb a:hover {
  color: var(--color-grey-800);
}

.occre-collection__breadcrumb svg {
  width: 1.2rem;
  height: 1.2rem;
  color: var(--color-grey-500);
}

.occre-collection__breadcrumb [aria-current] {
  color: var(--color-grey-800);
}

/* Cabecera: título izquierda, descripción derecha */
.occre-collection__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2.4rem;
  margin-top: 4rem;
  margin-bottom: 8rem;
}

.occre-collection__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading-light);
  font-size: 4.8rem;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--color-black);
}

.occre-collection__description {
  max-width: 47.4rem;
  font-family: var(--font-body);
  font-size: var(--text-body-s-size);
  line-height: var(--text-body-s-line);
  letter-spacing: var(--text-body-s-spacing);
  color: var(--color-black);
}

.occre-collection__description p {
  margin: 0;
}

/* Toolbar: filtros + toggle de vista */
.occre-collection__toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.6rem;
  margin-bottom: 4rem;
}

.occre-collection__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
}

.occre-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.2rem;
  border: 0;
  border-radius: var(--radius-m);
  background: var(--color-grey-200);
  font-family: var(--font-body);
  font-size: var(--text-body-s-size);
  line-height: var(--text-body-s-line);
  letter-spacing: var(--text-body-s-spacing);
  color: var(--color-grey-900);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.occre-pill svg {
  width: 1.8rem;
  height: 1.8rem;
  color: var(--color-grey-900);
}

.occre-pill--main {
  background: var(--color-grey-300);
  margin-right: 1.2rem;
}

.occre-pill--group {
  background: var(--color-grey-400);
}

.occre-pill--group.is-active {
  background: var(--color-grey-900);
  color: var(--color-white);
}

.occre-pill--option {
  gap: 0.2rem;
  color: var(--color-grey-800);
}

.occre-pill--option sup {
  font-size: 0.9rem;
  line-height: 1;
  color: var(--color-grey-500);
}

.occre-pill--option.is-active {
  background: var(--color-grey-900);
  color: var(--color-white);
}

.occre-pill--option.is-active sup {
  color: var(--color-grey-400);
}

.occre-pill:hover {
  background: var(--color-grey-300);
}

.occre-pill--group:hover {
  background: var(--color-grey-500);
}

.occre-pill--group.is-active:hover,
.occre-pill--option.is-active:hover {
  background: var(--color-grey-700);
}

/* Filtros rápidos: opciones ocultas hasta abrir la pill padre */
.occre-filter-group {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.occre-filter-group__options {
  display: none;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.occre-filter-group.is-open .occre-filter-group__options {
  display: inline-flex;
}

/* Layout con panel lateral de filtros (Figma: sidebar izquierda,
   grid a 3 columnas cuando está abierto) */
.occre-collection__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.4rem;
  align-items: start;
}

.occre-collection.is-filters-open .occre-collection__layout {
  grid-template-columns: 38rem 1fr;
}

.occre-collection__sidebar {
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
  min-width: 0;
}

.occre-collection__content {
  min-width: 0;
}

.occre-filter-block__label {
  margin: 0 0 1.6rem;
  font-family: var(--font-body);
  font-size: var(--text-body-s-size);
  line-height: var(--text-body-s-line);
  letter-spacing: var(--text-body-s-spacing);
  color: var(--color-grey-900);
}

.occre-filter-block__options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

/* Checkbox "Mostrar agotados" */
.occre-filter-availability {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--font-body);
  font-size: var(--text-body-s-size);
  color: var(--color-grey-900);
  cursor: pointer;
}

.occre-filter-availability input {
  width: 1.6rem;
  height: 1.6rem;
  accent-color: var(--color-grey-900);
}

/* Filtro de precio: dos inputs + doble slider */
.occre-price__inputs {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--font-body);
  font-size: var(--text-body-s-size);
  color: var(--color-grey-900);
}

.occre-price__inputs input {
  width: 8rem;
  padding: 0.8rem 1rem;
  border: 0.1rem solid var(--color-grey-400);
  border-radius: var(--radius-s);
  font: inherit;
  color: inherit;
}

.occre-price__sep {
  color: var(--color-grey-500);
}

.occre-price__slider {
  position: relative;
  height: 2rem;
  margin-top: 1.6rem;
}

.occre-price__track {
  --lo: 0%;
  --hi: 100%;
  position: absolute;
  inset-inline: 0;
  display: block!important;
  top: 50%;
  height: 0.2rem;
  transform: translateY(-50%);
  border-radius: 0.2rem;
  background: linear-gradient(
    to right,
    var(--color-grey-400) var(--lo),
    var(--color-grey-900) var(--lo),
    var(--color-grey-900) var(--hi),
    var(--color-grey-400) var(--hi)
  );
}

.occre-price__slider input[type='range'] {
  position: absolute;
  inset: 0;
  width: 100%;
  margin: 0;
  background: none;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
}

.occre-price__slider input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--color-grey-900);
  cursor: pointer;
  pointer-events: auto;
}

.occre-price__slider input[type='range']::-moz-range-thumb {
  width: 1.4rem;
  height: 1.4rem;
  border: 0;
  border-radius: 50%;
  background: var(--color-grey-900);
  cursor: pointer;
  pointer-events: auto;
}

/* Con el panel abierto: grid 4 → 3 columnas, lista 6 → 4 */
@media screen and (min-width: 990px) {
  .occre-collection.is-filters-open .occre-collection__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .occre-collection.is-filters-open .occre-collection__row-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .occre-collection.is-filters-open .occre-collection__row {
    grid-template-columns: minmax(20rem, 30rem) 1fr;
  }
}

/* Toggle lista/grid */
.occre-collection__views {
  display: flex;
  gap: 0.8rem;
  flex-shrink: 0;
}

.occre-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-s);
  background: var(--color-grey-200);
  color: var(--color-grey-900);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.occre-view-btn svg {
  width: 1.8rem;
  height: 1.8rem;
}

.occre-view-btn:hover,
.occre-view-btn.is-active {
  background: var(--color-grey-300);
}

/* Rejilla (vista grid) */
.occre-collection__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3.2rem 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.occre-collection__cell {
  container-type: inline-size;
}

@media screen and (max-width: 989px) {
  .occre-collection__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 749px) {
  /* Figma móvil 450-12627: título 32px, descripción 12px debajo,
     toolbar solo con el toggle de vista, 1 columna con gap 8px */
  .occre-collection__head {
    flex-direction: column;
    gap: 2rem;
    margin-top: 2.4rem;
    margin-bottom: 1.6rem;
  }

  .occre-collection__title {
    font-size: 3.2rem;
  }

  .occre-collection__description {
    max-width: none;
    font-size: var(--text-body-xs-size);
    line-height: var(--text-body-xs-line);
    letter-spacing: var(--text-body-xs-spacing);
  }

  .occre-collection__filters,
  .occre-collection__sidebar {
    display: none;
  }

  .occre-collection.is-filters-open .occre-collection__layout {
    grid-template-columns: 1fr;
  }

  .occre-collection__toolbar {
    justify-content: flex-end;
    padding-block: 0.8rem;
    margin-bottom: 3.2rem;
  }

  .occre-collection__grid {
    grid-template-columns: 1fr;
    gap: 0.8rem;
  }
}

/* Vista lista: banda por categoría — columna izquierda 478px + 6 tarjetas
   compactas por fila (Figma 905-17042) */
.occre-collection__list {
  --difficulty-bronze: #b59772;
}

.occre-collection__row {
  display: grid;
  grid-template-columns: minmax(24rem, 47.8rem) 1fr;
  gap: 1.6rem;
  padding-block: 2.4rem;
  border-top: 0.1rem dashed rgb(84 84 84 / 50%);
}

.occre-collection__row:last-child {
  border-bottom: 0.1rem dashed rgb(84 84 84 / 50%);
}

.occre-collection__row-head {
  display: grid;
  grid-template-areas:
    'title from'
    'count count'
    'tag   tag';
  grid-template-columns: minmax(0, 23.2rem) auto;
  gap: 1.6rem;
  align-content: start;
  justify-content: start;
  justify-items: start;
}

.occre-collection__row-title {
  grid-area: title;
  margin: 0;
  max-width: 23.2rem;
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading-light);
  font-size: var(--text-title-s-size);
  line-height: var(--text-title-s-line);
  letter-spacing: var(--text-title-s-spacing);
  color: var(--color-black);
}

.occre-collection__row-from {
  grid-area: from;
  font-family: var(--font-body);
  font-size: var(--text-body-s-size);
  line-height: var(--text-body-s-line);
  letter-spacing: var(--text-body-s-spacing);
  text-transform: uppercase;
  color: var(--color-grey-500);
}

.occre-collection__row-count {
  grid-area: count;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body-s-size);
  line-height: var(--text-body-s-line);
  letter-spacing: var(--text-body-s-spacing);
  color: var(--color-grey-700);
}

.occre-collection__row-tag {
  grid-area: tag;
  padding: 0.6rem 0.9rem;
  border-radius: 0.3rem;
  background: rgb(0 0 0 / 5%);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--color-grey-600);
}

.occre-collection__row-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.8rem;
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Tarjeta compacta en modo lista: solo imagen, dificultad, título y precio */
.occre-collection__cell--s .occre-product-card {
  background: none;
  border-radius: 0;
  gap: 1rem;
}

.occre-collection__cell--s .occre-product-card__media {
  padding: 0;
}

.occre-collection__cell--s .occre-product-card__media .o-media {
  aspect-ratio: 155 / 196;
  border-radius: var(--radius-m);
}

.occre-collection__cell--s .occre-product-card__badge {
  top: 1.2rem;
  left: 1.2rem;
  background: rgb(0 0 0 / 8%);
  color: var(--color-grey-300);
}

.occre-collection__cell--s .occre-product-card__body {
  padding: 0;
  gap: 1rem;
}

.occre-collection__cell--s .occre-product-card__subtitle,
.occre-collection__cell--s .occre-product-card__actions,
.occre-collection__cell--s .meta-item--scale,
.occre-collection__cell--s .meta-item--steps,
.occre-collection__cell--s .meta-item--rating {
  display: none;
}

.occre-collection__cell--s .occre-product-card__meta {
  justify-content: space-between;
  font-size: 1.2rem;
}

.occre-collection__cell--s .occre-product-card__meta svg {
  width: 1.4rem;
  height: 1.4rem;
}

/* Dots de dificultad al tamaño Figma (11px, número visible);
   el color lo aporta --level-color según el nivel */
.occre-collection__cell--s .occre-product-card__meta .dot {
  width: 1.1rem;
  height: 1.1rem;
  font-size: 0.76rem;
}

.occre-collection__cell--s .occre-product-card__meta .meta-item--level .lvl {
  margin-left: 0.3rem;
}

.occre-collection__cell--s .occre-product-card__title {
  -webkit-line-clamp: 3;
  line-clamp: 3;
  height: auto;
  min-height: calc(2 * 1.4em);
  font-family: 'STK Bureau Sans', 'Suisse Intl', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--color-grey-900);
  margin: 0;
}

.occre-collection__cell--s .occre-product-card__price {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body-regular);
  font-size: 1.4rem;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--color-grey-900);
  margin: 0;
}

@media screen and (max-width: 989px) {
  .occre-collection__row {
    grid-template-columns: 1fr;
  }

  .occre-collection__row-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Figma móvil 913-27322: cabecera de banda apilada (nombre + chip,
   luego nº productos + DESDE) y fila de tarjetas con scroll horizontal */
@media screen and (max-width: 749px) {
  .occre-collection__row {
    gap: 1.6rem;
    padding-block: 2.4rem;
    border-top: 0.1rem solid var(--color-grey-300);
  }

  .occre-collection__row:last-child {
    border-bottom: 0.1rem solid var(--color-grey-300);
  }

  .occre-collection__row-head {
    grid-template-areas:
      'title title tag'
      'count from  .';
    grid-template-columns: auto auto 1fr;
    gap: 0.8rem 1rem;
    align-items: center;
    width: 100%;
  }

  .occre-collection__row-title {
    max-width: none;
  }

  .occre-collection__row-tag {
    justify-self: end;
  }

  .occre-collection__row-grid {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Sangra hasta el borde derecho de la pantalla */
    margin-right: calc(-1 * var(--page-gutter));
    padding-right: var(--page-gutter);
  }

  .occre-collection__row-grid::-webkit-scrollbar {
    display: none;
  }

  /* 2.4 tarjetas visibles por pantalla */
  .occre-collection__row-grid > .occre-collection__cell--s {
    flex: 0 0 calc((100% - var(--page-gutter) - 0.8rem) / 2.4);
  }

  .occre-collection__cell--s .occre-product-card__media .o-media {
    aspect-ratio: 5 / 6;
    border-radius: 0.5rem;
  }

  .occre-collection__cell--s .occre-product-card__badge {
    top: auto;
    bottom: 0.5rem;
    left: 0.5rem;
    font-size: var(--text-body-xs-size);
  }

  .occre-collection__cell--s .occre-product-card__title {
    line-height: 1.2;
  }
}

/* Cargar más */
.occre-collection__more {
  display: flex;
  justify-content: center;
  margin-top: 3.2rem;
}

.occre-load-more {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 1.2rem;
  border-radius: var(--radius-s);
  background: rgb(0 0 0 / 5%);
  color: var(--color-grey-600);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.occre-load-more:hover {
  background: rgb(0 0 0 / 10%);
}

.occre-load-more.is-loading {
  opacity: 0.5;
  pointer-events: none;
}

.occre-load-more svg {
  width: 1.8rem;
  height: 1.8rem;
}

.occre-collection__empty {
  padding-block: 8rem;
  text-align: center;
  color: var(--color-grey-600);
}

/* hidden debe ganar a display:grid/flex de los paneles */
.occre-collection [hidden] {
  display: none !important;
}

/* --- Swym wishlist: corazón relleno cuando el producto está en la lista --- */
.occre-product-card__media-wish.swym-added svg path,
.occre-product-card__wish.swym-added svg path,
.occre-pdp-bar__wish.swym-added svg path,
.occre-lz-bar__wish.swym-added svg path {
  fill: currentColor;
}

/* Swym oculta .swym-button hasta que su SDK añade .swym-loaded (anti-FOUC).
   Nuestros corazones son diseño propio: siempre visibles, con o sin SDK.
   Los !important replican el display que el theme ya asigna a cada botón
   por breakpoint (las cards alternan __media-wish desktop / __wish móvil). */
.occre-pdp-bar__wish.swym-button:not(.swym-loaded),
.occre-lz-bar__wish.swym-button:not(.swym-loaded) {
  display: flex !important;
}

.occre-product-card__media-wish.swym-button:not(.swym-loaded) {
  display: inline-flex !important;
}

.occre-product-card__wish.swym-button:not(.swym-loaded) {
  display: none !important;
}

@media screen and (max-width: 749px) {
  .occre-product-card__wish.swym-button:not(.swym-loaded) {
    display: inline-flex !important;
  }

  .occre-product-card__media-wish.swym-button:not(.swym-loaded) {
    display: none !important;
  }
}

/* Popup de Geolocation Orbe (app embed, #md-app-embed__modal): la app trae sus
   propias fuentes (Arial en botones/inputs y body font en el título). Alineamos
   con la tipografía del sitio: títulos GT Canon, resto Suisse Intl. */
#md-app-embed__modal .md-modal__header__title,
#md-app-embed__modal .md-modal__header__title__span {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading-reg);
}

#md-app-embed__modal,
#md-app-embed__modal button,
#md-app-embed__modal input,
#md-app-embed__modal select {
  font-family: var(--font-body);
}

.kl-teaser-TqsGNU {
  display: none!important;
}