/* ============================================================
   ManoMano ES — Tema daisyUI personalizado "manomano"
   Todos los colores provienen de brand_brief.json (variables CSS
   reales del sitio de referencia). No hay valores inventados.
   ============================================================ */

/* -------- Tokens de marca (fuente única de la verdad) -------- */
:root {
  --mm-primary:      #1e3c87; /* azul cobalto de marca      */
  --mm-secondary:    #58d5bf; /* turquesa / menta (CTA)      */
  --mm-accent:       #58d5bf;
  --mm-bg:           #f5f6fc; /* fondo general               */
  --mm-surface:      #ffffff; /* tarjetas / cabeceras        */
  --mm-text:         #0c193a; /* texto principal             */
  --mm-muted:        #667394; /* texto secundario            */
  --mm-border:       #e6eaf2; /* bordes                      */
  --mm-success:      #21785b;
  --mm-promo-bg:     #e9efff; /* barra promocional           */
  --mm-promo-text:   #0c193a;
  --mm-header-bg:    #0c193a; /* cabecera navy               */
  --mm-footer-bg:    #0c193a; /* pie navy                    */
  --mm-btn-bg:       #58d5bf; /* botones                     */
  --mm-btn-text:     #0c193a;
  --mm-promo-red:    #e81f1f; /* descuentos / promociones    */
  --mm-warning:      #ff7a00;
  --mm-info:         #295fe4;
  --mm-gold:         #ffb950; /* loyalty / badges dorados    */
  --mm-radius:       4px;     /* buttons.radius_px           */
}

/* -------- Tema daisyUI "manomano" (data-theme) --------
   Valores oklch derivados de los tokens de marca. daisyUI
   genera con ellos las clases btn/badge/card/navbar/etc.    */
[data-theme="manomano"] {
  color-scheme: light;
  --p:   37.9% 0.135 267;   /* primary  = #1e3c87 */
  --pc:  100% 0 0;          /* primary-content = blanco */
  --s:   79.5% 0.093 178;   /* secondary= #58d5bf */
  --sc:  22.7% 0.06 266;    /* secondary-content = #0c193a */
  --a:   79.5% 0.093 178;   /* accent   = #58d5bf */
  --ac:  22.7% 0.06 266;
  --n:   22.7% 0.06 266;    /* neutral  = #0c193a */
  --nc:  100% 0 0;
  --b1:  100% 0 0;          /* base-100 = #ffffff */
  --b2:  97.2% 0.007 270;   /* base-200 = #f5f6fc */
  --b3:  94% 0.008 270;
  --bc:  22.7% 0.06 266;    /* base-content = #0c193a */
  --in:  55% 0.18 262;
  --su:  52% 0.09 160;      /* success = #21785b */
  --wa:  74% 0.16 62;
  --er:  58% 0.23 27;       /* error   = #e81f1f */
  --rounded-box: 8px;
  --rounded-btn: 4px;
  --rounded-badge: 4px;
  --animation-btn: 0.2s;
  --border-btn: 1px;
  --tab-radius: 4px;
}

/* ============================================================
   Base
   ============================================================ */
html, body { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--mm-bg);
  color: var(--mm-text);
  margin: 0;
  max-width: 100%;
}
h1, h2, h3, h4, h5, h6 {
  font-family: "Open Sans", system-ui, sans-serif;
  color: var(--mm-text);
  font-weight: 800;
}
a { color: inherit; text-decoration: none; }
.mm-container { max-width: 1280px; margin: 0 auto; padding-inline: 16px; }
img { max-width: 100%; height: auto; display: block; }

/* ============================================================
   Botones de marca (garantizan el hex exacto sobre daisyUI)
   ============================================================ */
.btn { text-transform: none; border-radius: var(--mm-radius); font-weight: 700; }
.mm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border: 1px solid transparent; border-radius: var(--mm-radius);
  font-weight: 700; font-size: .95rem; line-height: 1;
  padding: .75rem 1.4rem; cursor: pointer; transition: filter .15s, background .15s;
  text-transform: none;
}
.mm-btn-primary { background: var(--mm-btn-bg); color: var(--mm-btn-text); }
.mm-btn-primary:hover { filter: brightness(.94); }
.mm-btn-outline {
  background: transparent; color: var(--mm-text); border-color: var(--mm-border);
}
.mm-btn-outline:hover { background: var(--mm-bg); }
.mm-btn-navy { background: var(--mm-header-bg); color: #fff; }
.mm-btn-navy:hover { filter: brightness(1.25); }
.mm-btn-block { width: 100%; }
.mm-btn-lg { padding: .95rem 1.8rem; font-size: 1.05rem; }

/* ============================================================
   Barra promocional
   ============================================================ */
.mm-promo {
  background: var(--mm-promo-bg); color: var(--mm-promo-text);
  text-align: center; font-size: .9rem; padding: .55rem 1rem;
}
.mm-promo strong { font-weight: 800; }
.mm-promo .code {
  background: #fff; border: 1px dashed var(--mm-primary); color: var(--mm-primary);
  padding: .05rem .4rem; border-radius: 4px; font-weight: 800; margin-left: .25rem;
}

/* ============================================================
   Cabecera
   ============================================================ */
.mm-header { background: var(--mm-header-bg); color: #fff; position: sticky; top: 0; z-index: 50; }
.mm-header a { color: #fff; }
.mm-header-top { display: flex; align-items: center; gap: 1.25rem; padding: .9rem 0; }
.mm-logo { flex-shrink: 0; }
.mm-logo img { height: 30px; width: 179px; max-width: 40vw; }
.mm-search { flex: 1; display: flex; min-width: 0; }
.mm-search input {
  flex: 1; min-width: 0; border: none; border-radius: 999px; padding: .8rem 1.1rem .8rem 2.6rem;
  font-size: .95rem; color: var(--mm-text); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23667394' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3-3'/%3E%3C/svg%3E") no-repeat .9rem center / 1.1rem;
  outline: none;
}
.mm-search-suggest {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff; color: var(--mm-text);
  border: 1px solid var(--mm-border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
  margin: 0; padding: .6rem; z-index: 60; max-height: 78vh; overflow-y: auto;
}
.mm-search-suggest-empty { padding: .9rem .5rem; font-size: .88rem; color: var(--mm-text-muted, #667394); text-align: center; }
/* The dropdown lives inside the dark header, where `.mm-header a` forces white text.
   Match that selector's specificity (0,1,1) so links inside the panel stay readable. */
.mm-search-suggest a { color: var(--mm-text); }
.mm-suggest-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: .5rem 1.4rem; }
.mm-suggest-col { min-width: 0; }
.mm-suggest-title {
  font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--mm-text-muted, #667394); padding: .5rem .45rem .35rem;
}
/* Left column: text suggestions */
.mm-suggest-terms { list-style: none; margin: 0 0 .3rem; padding: 0; }
.mm-suggest-term {
  display: flex; align-items: center; gap: .6rem; padding: .5rem .45rem; border-radius: 8px;
  text-decoration: none; color: inherit; font-size: .9rem; line-height: 1.3;
}
.mm-suggest-term i { font-size: .8rem; color: var(--mm-text-muted, #667394); flex-shrink: 0; }
.mm-suggest-term strong { font-weight: 800; }
.mm-suggest-term:hover, .mm-suggest-term.active { background: var(--mm-bg, #f2f4f7); }
/* Left column: brands */
.mm-suggest-brands { display: flex; flex-wrap: wrap; gap: .4rem; padding: .1rem .45rem .3rem; }
.mm-suggest-brand {
  display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .65rem;
  border: 1px solid var(--mm-border); border-radius: 999px; text-decoration: none; color: inherit;
  font-size: .78rem; font-weight: 700;
}
.mm-suggest-brand small { font-weight: 500; color: var(--mm-text-muted, #667394); }
.mm-suggest-brand:hover, .mm-suggest-brand.active { background: var(--mm-bg, #f2f4f7); border-color: var(--mm-primary, #2e7d32); }
/* Right column: product cards */
.mm-suggest-products { display: flex; flex-direction: column; gap: .15rem; }
.mm-suggest-card {
  display: flex; align-items: center; gap: .75rem; padding: .45rem; border-radius: 8px;
  text-decoration: none; color: inherit;
}
.mm-suggest-card:hover, .mm-suggest-card.active { background: var(--mm-bg, #f2f4f7); }
.mm-suggest-thumb { position: relative; flex-shrink: 0; width: 52px; height: 52px; }
.mm-suggest-thumb img { width: 52px; height: 52px; object-fit: contain; border-radius: 6px; }
.mm-suggest-badge {
  position: absolute; left: -4px; bottom: -4px; background: var(--mm-warning, #ff7a00); color: #fff;
  font-size: .55rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
  padding: .1rem .3rem; border-radius: 4px;
}
.mm-suggest-card-info { min-width: 0; }
.mm-suggest-card-name {
  font-size: .84rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.mm-suggest-card-name strong { font-weight: 800; }
.mm-suggest-card-prices { display: flex; align-items: baseline; gap: .4rem; margin-top: .2rem; }
.mm-suggest-old { font-size: .75rem; color: var(--mm-text-muted, #667394); }
.mm-suggest-price { font-size: .9rem; font-weight: 800; }
/* Footer CTA */
.mm-search-suggest a.mm-suggest-all {
  display: block; margin-top: .5rem; padding: .7rem; border-radius: 8px; text-align: center;
  background: var(--mm-primary, #2e7d32); color: #fff; text-decoration: none;
  font-size: .85rem; font-weight: 800;
}
.mm-search-suggest a.mm-suggest-all:hover, .mm-search-suggest a.mm-suggest-all.active { filter: brightness(.94); color: #fff; }
@media (max-width: 760px) {
  .mm-suggest-grid { grid-template-columns: 1fr; }
  .mm-search-suggest { max-height: 70vh; }
}
.mm-header-actions { display: flex; align-items: center; gap: 1.4rem; font-size: 1.35rem; }
.mm-header-actions a { position: relative; display: inline-flex; }
.mm-pro { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; font-weight: 700; }
.mm-pro .fa-circle-m { color: var(--mm-warning); }
.mm-cart-count, .mm-wishlist-count {
  position: absolute; top: -8px; right: -10px; background: var(--mm-secondary);
  color: var(--mm-text); font-size: .68rem; font-weight: 800; min-width: 18px; height: 18px;
  border-radius: 999px; display: grid; place-items: center; padding: 0 4px;
}
.mm-cart-total {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 6px;
  background: var(--mm-header-bg, #0c1a3a); color: #fff; font-size: .62rem; font-weight: 800;
  white-space: nowrap; padding: .1rem .4rem; border-radius: 999px; line-height: 1.4;
}
.mm-minicart-panel {
  display: none; position: fixed; right: 1rem; left: auto;
  width: min(360px, calc(100vw - 2rem)); max-height: 80vh; overflow-y: auto;
  background: #fff; color: var(--mm-text); border: 1px solid var(--mm-border); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.18); z-index: 80; padding: .9rem; box-sizing: border-box;
}
.mm-minicart-panel.mm-minicart-open { display: block; }
.mm-minicart-items { list-style: none; margin: 0 0 .8rem; padding: 0; max-height: 45vh; overflow-y: auto; }
.mm-minicart-item { display: flex; align-items: flex-start; gap: .6rem; padding: .6rem 0; border-bottom: 1px solid var(--mm-border); }
.mm-minicart-item:last-child { border-bottom: none; }
.mm-minicart-thumb { flex-shrink: 0; }
.mm-minicart-thumb img { width: 48px; height: 48px; object-fit: contain; border-radius: 6px; border: 1px solid var(--mm-border); }
.mm-minicart-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.mm-minicart-name { font-size: .82rem; font-weight: 600; color: var(--mm-text); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mm-minicart-option { font-size: .72rem; color: var(--mm-muted); }
.mm-minicart-meta { display: flex; justify-content: space-between; font-size: .82rem; }
.mm-minicart-remove-form { flex-shrink: 0; }
.mm-minicart-remove { background: none; border: none; color: var(--mm-muted); cursor: pointer; font-size: 1rem; padding: .2rem; }
.mm-minicart-remove:hover { color: var(--mm-promo-red); }
.mm-minicart-totals { border-top: 1px solid var(--mm-border); padding-top: .6rem; margin-bottom: .8rem; }
.mm-minicart-total-row { display: flex; justify-content: space-between; font-size: .85rem; padding: .15rem 0; }
.mm-minicart-actions { display: flex; flex-direction: column; gap: .5rem; }
.mm-minicart-empty { text-align: center; padding: 1.2rem 0; color: var(--mm-muted); font-size: .9rem; margin: 0; }
.mm-nav { border-top: 1px solid rgba(255,255,255,.08); }
.mm-nav ul { display: flex; align-items: center; gap: 1.5rem; list-style: none; margin: 0; padding: .7rem 0; font-size: .92rem; font-weight: 600; overflow-x: auto; }
.mm-nav .nav-guide {
  background: var(--mm-secondary); color: var(--mm-text); padding: .35rem .8rem;
  border-radius: 999px; display: inline-flex; align-items: center; gap: .4rem; font-weight: 700;
}
.mm-burger { display: none; background: none; border: none; color: #fff; font-size: 1.3rem; cursor: pointer; align-items: center; gap: .5rem; font-weight: 600; }

/* ============================================================
   Drawer móvil (lateral derecho, cómodo para el pulgar)
   ============================================================ */
.mm-drawer-toggle { display: none; }
.mm-drawer-backdrop {
  position: fixed; inset: 0; background: rgba(12,25,58,.5); opacity: 0; visibility: hidden;
  transition: opacity .25s; z-index: 60;
}
.mm-drawer-panel {
  position: fixed; top: 0; right: 0; height: 100%; width: 82%; max-width: 340px;
  background: #fff; color: var(--mm-text); transform: translateX(100%);
  transition: transform .28s ease; z-index: 61; box-shadow: -8px 0 24px rgba(0,0,0,.18);
  display: flex; flex-direction: column; overflow-y: auto;
}
.mm-drawer-toggle:checked ~ .mm-drawer-backdrop { opacity: 1; visibility: visible; }
.mm-drawer-toggle:checked ~ .mm-drawer-panel { transform: translateX(0); }
.mm-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem; background: var(--mm-header-bg); color: #fff; }
.mm-drawer-close { background: none; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; }
.mm-drawer-panel nav a {
  display: flex; align-items: center; gap: .75rem; padding: .9rem 1.1rem;
  border-bottom: 1px solid var(--mm-border); font-weight: 600;
}
.mm-drawer-panel nav a i { color: var(--mm-primary); width: 20px; text-align: center; }
.mm-drawer-section { padding: .6rem 1.1rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--mm-muted); font-weight: 700; }

/* ============================================================
   Barra de confianza (USPs)
   ============================================================ */
.mm-usps { background: var(--mm-surface); border-block: 1px solid var(--mm-border); }
.mm-usps .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding: 1.1rem 0; }
.mm-usp { display: flex; align-items: center; gap: .75rem; font-size: .9rem; font-weight: 600; }
.mm-usp .ic { width: 42px; height: 42px; border-radius: 50%; background: var(--mm-bg); color: var(--mm-primary); display: grid; place-items: center; font-size: 1.1rem; flex-shrink: 0; }
/* Texto de cada ventaja: mismo alto (2 líneas) para que iconos y bloques queden alineados */
.mm-usp-txt { display: flex; align-items: center; min-height: 2.4em; line-height: 1.2; }

/* ============================================================
   Hero
   ============================================================ */
.mm-hero-wrap { padding: 1.25rem 0; }
.mm-hero-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; }
.mm-hero-main { position: relative; border-radius: 12px; overflow: hidden; background: var(--mm-primary); }
.mm-hero-main img { width: 100%; height: 100%; object-fit: cover; min-height: 300px; }
.mm-hero-side { display: grid; grid-template-rows: 1fr 1fr; gap: 1rem; }
.mm-hero-card { background: var(--mm-surface); border: 1px solid var(--mm-border); border-radius: 12px; padding: 1rem; display: flex; align-items: center; gap: .75rem; overflow: hidden; }
.mm-hero-card img { width: 90px; object-fit: contain; flex-shrink: 0; }
.mm-hero-card > div { min-width: 0; overflow-wrap: break-word; }
.mm-price { font-size: 1.6rem; font-weight: 800; }
.mm-price .cents { font-size: .9rem; vertical-align: super; }
.mm-price-old { color: var(--mm-muted); text-decoration: line-through; font-size: .85rem; font-weight: 600; }

/* ============================================================
   Tiras promocionales
   ============================================================ */
.mm-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding-bottom: 1.25rem; }
.mm-strip-card { background: var(--mm-surface); border: 1px solid var(--mm-border); border-radius: 12px; padding: 1.4rem 1.6rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.mm-strip-card img { width: 130px; }
.mm-tag { display: inline-block; background: var(--mm-gold); color: var(--mm-text); font-weight: 800; font-size: .78rem; padding: .2rem .6rem; border-radius: 4px; margin-bottom: .5rem; }

/* ============================================================
   Secciones / títulos
   ============================================================ */
.mm-section { padding: 1.5rem 0; }
.mm-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.mm-section-head h2 { font-size: 1.4rem; }
.mm-section-head a { color: var(--mm-primary); font-weight: 700; font-size: .9rem; }

/* Categorías */
.mm-cats { display: grid; grid-template-columns: repeat(7, 1fr); gap: .75rem; }
.mm-cat { background: var(--mm-surface); border: 1px solid var(--mm-border); border-radius: 10px; padding: 1rem .5rem; text-align: center; font-weight: 700; font-size: .82rem; transition: box-shadow .15s, transform .15s; }
.mm-cat:hover { box-shadow: 0 6px 18px rgba(12,25,58,.1); transform: translateY(-2px); }
.mm-cat .ic { width: 46px; height: 46px; margin: 0 auto .6rem; border-radius: 50%; background: var(--mm-bg); color: var(--mm-primary); display: grid; place-items: center; font-size: 1.25rem; }

/* Esenciales de temporada */
.mm-esenciales { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.mm-esencial { background: var(--mm-surface); border: 1px solid var(--mm-border); border-radius: 10px; overflow: hidden; }
.mm-esencial img { aspect-ratio: 1/1; object-fit: cover; width: 100%; }
.mm-esencial span { display: block; padding: .7rem .8rem; font-weight: 700; font-size: .85rem; }

/* Rejilla de productos */
.mm-products { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.mm-card { background: var(--mm-surface); border: 1px solid var(--mm-border); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .15s; }
.mm-card:hover { box-shadow: 0 8px 22px rgba(12,25,58,.1); }
/* Reserve a fixed square box on the CONTAINER so the grid never jumps, even if the
   image is still loading, empty, or broken. */
.mm-card-img { position: relative; padding: 1rem; background: #fff; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; }
.mm-card-img img { aspect-ratio: 1/1; object-fit: contain; width: 100%; height: 100%; }
/* Neutral placeholder look for a failed image (set by mmImgFallback). */
.mm-img-fallback { object-fit: contain !important; opacity: .6; padding: 18%; box-sizing: border-box; background: var(--mm-bg, #f2f4f7); }
.mm-badge-disc { position: absolute; top: .6rem; left: .6rem; background: var(--mm-promo-red); color: #fff; font-weight: 800; font-size: .75rem; padding: .15rem .45rem; border-radius: 4px; }
.mm-card-wishlist {
  position: absolute; top: .6rem; right: .6rem; z-index: 2; width: 32px; height: 32px; border-radius: 999px;
  border: 1px solid var(--mm-border); background: #fff; color: var(--mm-text); display: grid; place-items: center;
  cursor: pointer; font-size: .9rem; padding: 0;
}
.mm-card-wishlist:hover { color: var(--mm-promo-red); }
.mm-ph { aspect-ratio: 1/1; display: grid; place-items: center; color: var(--mm-border); font-size: 3rem; background: var(--mm-bg); }
.mm-ph small { display: block; color: var(--mm-muted); font-size: .7rem; margin-top: .4rem; font-weight: 600; }
.mm-card-body { padding: .3rem .9rem 1rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.mm-card-title { font-size: .85rem; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 3.4em; }
.mm-card .mm-price { font-size: 1.25rem; }
.mm-stars { color: var(--mm-gold); font-size: .8rem; min-height: 1em; line-height: 1; }
.mm-card-body .mm-btn { margin-top: auto; }

/* ============================================================
   Blog
   ============================================================ */
.mm-blog { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.mm-post { background: var(--mm-surface); border: 1px solid var(--mm-border); border-radius: 10px; overflow: hidden; }
.mm-post .cover { aspect-ratio: 16/9; background: var(--mm-bg); display: grid; place-items: center; color: var(--mm-primary); font-size: 2rem; }
.mm-post .body { padding: 1rem; }
.mm-post h3 { font-size: 1rem; margin: .3rem 0 .5rem; }
.mm-post p { color: var(--mm-muted); font-size: .88rem; margin: 0; }

/* ============================================================
   FAQ (acordeón sin JS)
   ============================================================ */
.mm-faq { display: flex; flex-direction: column; gap: .6rem; }
.mm-faq details { background: var(--mm-surface); border: 1px solid var(--mm-border); border-radius: 8px; padding: .2rem .3rem; }
.mm-faq summary { cursor: pointer; padding: .9rem 1rem; font-weight: 700; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.mm-faq summary::-webkit-details-marker { display: none; }
.mm-faq summary::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .8rem; color: var(--mm-primary); transition: transform .2s; }
.mm-faq details[open] summary::after { transform: rotate(180deg); }
.mm-faq p { padding: 0 1rem 1rem; margin: 0; color: var(--mm-muted); }

/* ============================================================
   Texto SEO
   ============================================================ */
.mm-seo { background: var(--mm-surface); border: 1px solid var(--mm-border); border-radius: 10px; padding: 1.5rem; color: var(--mm-muted); font-size: .9rem; line-height: 1.7; }
.mm-seo h2 { margin-top: 0; }

/* ============================================================
   Pie
   ============================================================ */
.mm-footer { background: var(--mm-footer-bg); color: #fff; margin-top: 2rem; }
.mm-footer a { color: rgba(255,255,255,.8); }
.mm-footer a:hover { color: #fff; }
.mm-footer-top { display: grid; grid-template-columns: 1.2fr 1.2fr 1fr 1fr; gap: 2rem; padding: 2.5rem 0; }
.mm-footer-top-3col { grid-template-columns: 1.3fr 1.1fr .9fr; }
.mm-footer h4 { color: #fff; font-size: 1rem; margin: 0 0 1rem; }
.mm-footer h4:not(:first-child) { margin-top: 1.8rem; }
.mm-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; font-size: .88rem; }
.mm-social { display: flex; gap: .8rem; font-size: 1.3rem; }
.mm-payment-icons { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; }
.mm-pay { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 32px; background: #fff; border-radius: 6px; font-size: 1.4rem; }
.mm-pay-visa { color: #1434cb; }
.mm-pay-mc { color: #eb001b; }
.mm-pay-pp { color: #003087; }
.mm-pay-gpay { color: #5f6368; }
.mm-pay-transfer { background: var(--mm-primary, #2e7d32); color: #fff; }
.mm-trust-badges { background: #fff; display: flex; justify-content: center; align-items: center; gap: 2.5rem; padding: 1.5rem 0; flex-wrap: wrap; }
.mm-badge { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 84px; height: 84px; border-radius: 6px; font-size: .6rem; font-weight: 700; letter-spacing: .02em; line-height: 1.25; }
.mm-badge-orange { background: #ff7a00; color: #fff; }
.mm-badge-black { background: #111; color: #fff; }
.mm-badge-circle { border-radius: 50%; border: 2px solid #0c193a; color: #0c193a; }
.mm-badge-circle i { font-size: 1.1rem; margin-bottom: .25rem; }
.mm-badge small { display: block; margin-top: .2rem; font-weight: 500; font-size: .55rem; opacity: .85; }
.mm-legal-bar { border-top: 1px solid rgba(255,255,255,.12); padding: 1rem 0; }
.mm-legal-bar ul { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; list-style: none; margin: 0 0 .6rem; padding: 0; font-size: .8rem; }
.mm-copy { font-size: .8rem; color: rgba(255,255,255,.6); }

/* ============================================================
   Migas de pan / páginas internas
   ============================================================ */
.mm-breadcrumbs { font-size: .82rem; color: var(--mm-muted); padding: 1rem 0; display: flex; gap: .5rem; flex-wrap: wrap; }
.mm-breadcrumbs a { color: var(--mm-primary); }
.mm-page { padding: 1rem 0 2rem; }
.mm-page h1 { font-size: 1.9rem; margin: .5rem 0 1rem; }

/* ============================================================
   Nuestras marcas (product/manufacturer list)
   ============================================================ */
.mm-brands-lead { color: var(--mm-muted); font-size: .95rem; margin: 0 0 1.25rem; max-width: 720px; }
.mm-brands-index { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 1.75rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--mm-border); }
.mm-brands-index > span { font-weight: 700; font-size: .85rem; margin-right: .3rem; }
.mm-brands-index a { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--mm-border); border-radius: 6px; font-weight: 700; font-size: .82rem; color: var(--mm-primary); background: var(--mm-surface); }
.mm-brands-index a:hover { background: var(--mm-primary); color: #fff; border-color: var(--mm-primary); }
.mm-brands-letter { margin-bottom: 1.75rem; scroll-margin-top: 90px; }
.mm-brands-letter h2 { font-size: 1.25rem; font-weight: 800; color: var(--mm-primary); margin: 0 0 .8rem; padding-bottom: .35rem; border-bottom: 2px solid var(--mm-border); }
.mm-brands-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: .8rem; }
.mm-brand-card { display: flex; align-items: center; gap: .75rem; background: var(--mm-surface); border: 1px solid var(--mm-border); border-radius: 10px; padding: .85rem 1rem; font-weight: 700; font-size: .95rem; color: var(--mm-text); transition: box-shadow .15s, transform .15s, border-color .15s; }
.mm-brand-card:hover { box-shadow: 0 6px 18px rgba(12,25,58,.1); transform: translateY(-2px); border-color: var(--mm-primary); }
.mm-brand-initial { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; background: var(--mm-bg); color: var(--mm-primary); display: grid; place-items: center; font-size: 1.05rem; font-weight: 800; }
.mm-brand-name { min-width: 0; line-height: 1.2; overflow-wrap: break-word; }

/* Stock OpenCart pagination markup (product/category, product/search) has no theme
   styling of its own — without it the <ul>/<li> renders as a default vertical list. */
.pagination { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; list-style: none; padding: 0; margin: 0; }
.pagination .page-item { display: inline-flex; }
.pagination .page-link { display: inline-flex; align-items: center; padding: .4rem .75rem; border: 1px solid var(--mm-border); border-radius: 6px; color: var(--mm-text); text-decoration: none; font-size: .85rem; background: #fff; }
.pagination .page-link:hover { background: var(--mm-bg); }
.pagination .page-item.active .page-link { background: var(--mm-primary); color: #fff; border-color: var(--mm-primary); font-weight: 700; }
.pagination .page-item.disabled .page-link { color: var(--mm-muted); cursor: default; }
.mm-prose { background: var(--mm-surface); border: 1px solid var(--mm-border); border-radius: 10px; padding: 2rem; line-height: 1.75; max-width: 900px; }
.mm-prose h2 { font-size: 1.3rem; margin: 1.6rem 0 .7rem; }
.mm-prose h3 { font-size: 1.05rem; margin: 1.2rem 0 .5rem; }
.mm-prose p, .mm-prose li { color: #35415f; }
.mm-prose ul { padding-left: 1.2rem; }
.mm-prose a { color: var(--mm-primary); text-decoration: underline; }
.mm-note { background: var(--mm-promo-bg); border-left: 4px solid var(--mm-primary); padding: 1rem 1.2rem; border-radius: 6px; margin: 1rem 0; }

/* Boceto de navegación entre páginas de información (Términos, Privacidad, Envío, ...) */
.mm-info-layout { display: flex; align-items: flex-start; gap: 2rem; }
.mm-info-content { flex: 1; min-width: 0; }
.mm-info-nav { flex: 0 0 240px; background: var(--mm-surface); border: 1px solid var(--mm-border); border-radius: 10px; padding: .6rem; }
.mm-info-nav ul { list-style: none; margin: 0; padding: 0; }
.mm-info-nav a {
  display: block; padding: .6rem .8rem; border-radius: 6px; color: var(--mm-text); text-decoration: none;
  font-size: .9rem; line-height: 1.3;
}
.mm-info-nav a:hover { background: var(--mm-bg); color: var(--mm-primary); }
.mm-info-nav a.active { background: var(--mm-primary); color: #fff; font-weight: 700; }
@media (max-width: 760px) {
  .mm-info-layout { flex-direction: column; }
  .mm-info-nav { flex-basis: auto; width: 100%; }
  .mm-info-nav ul { display: flex; flex-wrap: wrap; gap: .4rem; }
  .mm-info-nav li { flex: 1 1 auto; }
  .mm-info-nav a { text-align: center; white-space: nowrap; }
}

/* Info cards contacto */
.mm-info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1.5rem; }
.mm-info-card { background: var(--mm-surface); border: 1px solid var(--mm-border); border-radius: 10px; padding: 1.5rem; }
.mm-info-card .ic { width: 48px; height: 48px; border-radius: 50%; background: var(--mm-bg); color: var(--mm-primary); display: grid; place-items: center; font-size: 1.3rem; margin-bottom: .8rem; }
.mm-info-card h3 { font-size: 1.05rem; margin: 0 0 .4rem; }
.mm-info-card p { color: var(--mm-muted); font-size: .9rem; margin: 0; line-height: 1.6; }

/* Formularios */
.mm-field { margin-bottom: 1rem; }
.mm-field label { display: block; font-weight: 700; font-size: .85rem; margin-bottom: .35rem; }
.mm-field input, .mm-field textarea, .mm-field select {
  width: 100%; border: 1px solid var(--mm-border); border-radius: 6px; padding: .7rem .9rem;
  font-family: inherit; font-size: .95rem; background: #fff; color: var(--mm-text); box-sizing: border-box;
}
.mm-field textarea { min-height: 120px; resize: vertical; }
/* Formulario "Escribir una valoración": campos a un ancho uniforme, etiqueta arriba */
.mm-review-form { max-width: 640px; margin-top: 1.5rem; }

/* ============================================================
   Cuenta: login / registro (dos columnas simétricas)
   ============================================================ */
.mm-auth-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; max-width: 860px; align-items: stretch; }
.mm-auth-card {
  display: flex; flex-direction: column; background: var(--mm-surface); border: 1px solid var(--mm-border);
  border-radius: 10px; padding: 1.75rem;
}
.mm-auth-card h2 { font-size: 1.25rem; font-weight: 800; margin: 0 0 .75rem; color: var(--mm-text); }
.mm-auth-lead { font-weight: 700; font-size: .95rem; margin: 0 0 .35rem; }
.mm-auth-desc { font-size: .88rem; margin: 0 0 1.25rem; line-height: 1.55; }
.mm-auth-card form { display: flex; flex-direction: column; }
.mm-auth-forgot { color: var(--mm-primary); font-size: .85rem; display: inline-block; margin: -.25rem 0 1rem; text-decoration: none; }
.mm-auth-forgot:hover { text-decoration: underline; }
/* Push the action button to the bottom so both cards line their CTAs up. */
.mm-auth-actions { margin-top: auto; }
.mm-auth-actions .mm-btn { width: 100%; text-align: center; }
@media (max-width: 760px) {
  .mm-auth-grid { grid-template-columns: 1fr; }
}

/* Formulario de registro / cuenta (etiqueta arriba, campos apilados, ancho único) */
.mm-form-card {
  max-width: 720px; background: var(--mm-surface); border: 1px solid var(--mm-border);
  border-radius: 10px; padding: 1.85rem;
}
.mm-form-card h1 { font-size: 1.6rem; font-weight: 800; margin: 0 0 .3rem; color: var(--mm-text); }
.mm-form-intro { color: var(--mm-muted); font-size: .9rem; margin: 0 0 1.5rem; line-height: 1.5; }
.mm-form-section { margin-top: 1.75rem; }
.mm-form-section:first-of-type { margin-top: 0; }
.mm-form-section > h3 {
  font-size: 1.1rem; font-weight: 800; color: var(--mm-text);
  padding-bottom: .5rem; border-bottom: 1px solid var(--mm-border); margin: 0 0 1.1rem;
}
/* Two-up row (Nombre / Apellidos) that collapses on narrow screens */
.mm-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.mm-field-row .mm-field { margin-bottom: 1rem; }
@media (max-width: 600px) { .mm-field-row { grid-template-columns: 1fr; } }
.mm-field-error { color: var(--mm-promo-red); font-size: .82rem; margin-top: .3rem; }
/* Newsletter toggle aligned with its label on one baseline */
.mm-toggle-row { display: inline-flex; align-items: center; gap: .75rem; cursor: pointer; }
.mm-toggle-row > span:last-child { font-size: .9rem; font-weight: 600; }
/* Self-contained switch that does not depend on daisyUI/Tailwind sizing utilities */
.mm-switch { position: relative; display: inline-flex; width: 42px; height: 24px; flex-shrink: 0; }
.mm-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.mm-switch-track { position: absolute; inset: 0; background: #c7ccd6; border-radius: 999px; transition: background .2s; }
.mm-switch-track::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
  background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.mm-switch input:checked + .mm-switch-track { background: var(--mm-primary); }
.mm-switch input:checked + .mm-switch-track::after { transform: translateX(18px); }
/* Choice lists (radio/checkbox custom fields) */
.mm-choice-list { display: flex; flex-direction: column; gap: .4rem; }
.mm-choice { display: flex; align-items: center; gap: .5rem; font-weight: 400; }
.mm-choice input { width: auto; margin: 0; }
/* Privacy-agreement checkbox: its own line above the submit button */
.mm-check-row { display: flex; align-items: flex-start; gap: .55rem; font-size: .9rem; margin: 1.4rem 0 0; cursor: pointer; }
.mm-check-row input { width: auto; margin: .15rem 0 0; flex-shrink: 0; }
.mm-form-submit { margin-top: 1.25rem; }

/* ============================================================
   Carrito: herramientas "Siguiente paso" (envío / cupón / vale)
   ============================================================ */
.mm-cart-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: start; margin-top: 1rem; }
.mm-cart-tool { background: var(--mm-surface); border: 1px solid var(--mm-border); border-radius: 10px; padding: 1.25rem; }
.mm-cart-tool-title { font-size: 1rem; font-weight: 800; margin: 0 0 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--mm-border); color: var(--mm-text); display: flex; align-items: center; gap: .5rem; }
.mm-cart-tool-title i { color: var(--mm-primary); }
.mm-cart-tool-hint { font-size: .85rem; color: var(--mm-muted); margin: 0 0 .9rem; }
.mm-cart-tool .mm-field { margin-bottom: .9rem; }
.mm-shipping-methods:not(:empty) { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--mm-border); }
.mm-shipping-group { font-weight: 700; font-size: .85rem; margin: .5rem 0 .35rem; }
@media (max-width: 900px) {
  .mm-cart-tools { grid-template-columns: 1fr; }
}

/* ============================================================
   Página de producto
   ============================================================ */
.mm-pdp { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem; padding: 1rem 0 2rem; }
.mm-gallery { display: flex; flex-direction: column; gap: .8rem; }
.mm-gallery-main { position: relative; background: #fff; border: 1px solid var(--mm-border); border-radius: 10px; padding: 1.5rem; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; }
.mm-gallery-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 36px; height: 36px;
  border-radius: 999px; border: 1px solid var(--mm-border); background: #fff; color: var(--mm-text);
  display: grid; place-items: center; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.mm-gallery-arrow:hover { color: var(--mm-primary); }
.mm-gallery-prev { left: .6rem; }
.mm-gallery-next { right: .6rem; }

/* Container width is an exact multiple of card-width + gap (3 cards * 220px + 2 gaps * 1rem)
   so the last visible card is never cropped — no "peek" of a partial next card. */
.mm-carousel { position: relative; max-width: 692px; }
.mm-carousel .mm-products {
  display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory;
  gap: 1rem; padding: .2rem 0 .6rem; -ms-overflow-style: none; scrollbar-width: none;
}
.mm-carousel .mm-products::-webkit-scrollbar { display: none; }
.mm-carousel .mm-products .mm-card { flex: 0 0 220px; scroll-snap-align: start; }
.mm-carousel-prev { left: -16px; }
.mm-carousel-next { right: -16px; }
@media (max-width: 760px) {
  /* Exactly one full card per view on mobile — no partial second card visible. */
  .mm-carousel { max-width: 100%; }
  .mm-carousel .mm-products .mm-card { flex-basis: 100%; }
  .mm-carousel-prev { left: 2px; }
  .mm-carousel-next { right: 2px; }
}
.mm-gallery-main img { aspect-ratio: 1/1; object-fit: contain; width: 100%; height: 100%; }
.mm-thumbs { display: flex; gap: .6rem; }
.mm-thumbs img { width: 72px; height: 72px; object-fit: contain; border: 1px solid var(--mm-border); border-radius: 8px; padding: .3rem; background: #fff; cursor: pointer; }
.mm-thumbs img.active { border-color: var(--mm-primary); }
.mm-pdp-info h1 { font-size: 1.5rem; line-height: 1.35; }
.mm-pdp-price { display: flex; align-items: baseline; gap: .7rem; margin: 1rem 0; }
.mm-pdp-price .mm-price { font-size: 2.2rem; }
.mm-stock { display: inline-flex; align-items: center; gap: .4rem; color: var(--mm-success); font-weight: 700; font-size: .9rem; }
.mm-pdp-buy { display: flex; gap: .8rem; align-items: center; margin: 1.2rem 0; }
.mm-qty { display: flex; align-items: center; border: 1px solid var(--mm-border); border-radius: 6px; overflow: hidden; }
.mm-qty button { width: 42px; height: 46px; border: none; background: #fff; font-size: 1.2rem; cursor: pointer; color: var(--mm-text); }
.mm-qty input { width: 46px; height: 46px; border: none; text-align: center; font-size: 1rem; }
.mm-pdp-perks { display: grid; gap: .6rem; margin-top: 1.2rem; }
.mm-pdp-perks li { display: flex; align-items: center; gap: .6rem; font-size: .9rem; list-style: none; }
.mm-pdp-perks i { color: var(--mm-primary); width: 20px; text-align: center; }
.mm-specs { width: 100%; border-collapse: collapse; margin-top: 1rem; }
.mm-specs th, .mm-specs td { text-align: left; padding: .7rem 1rem; border: 1px solid var(--mm-border); font-size: .9rem; }
.mm-specs th { background: var(--mm-bg); width: 40%; font-weight: 700; }

/* ============================================================
   Carrito
   ============================================================ */
.mm-cart { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.5rem; padding: 1rem 0 2rem; }
.mm-cart-list { background: var(--mm-surface); border: 1px solid var(--mm-border); border-radius: 10px; }
.mm-cart-item { display: grid; grid-template-columns: 90px 1fr auto; gap: 1rem; padding: 1.1rem; border-bottom: 1px solid var(--mm-border); align-items: center; }
.mm-cart-item:last-child { border-bottom: none; }
.mm-cart-item img { width: 90px; height: 90px; object-fit: contain; border: 1px solid var(--mm-border); border-radius: 8px; padding: .3rem; background: #fff; }
.mm-cart-item h3 { font-size: .92rem; margin: 0 0 .5rem; font-weight: 600; }
.mm-cart-remove { color: var(--mm-muted); background: none; border: none; cursor: pointer; font-size: .85rem; }
.mm-summary { background: var(--mm-surface); border: 1px solid var(--mm-border); border-radius: 10px; padding: 1.5rem; align-self: start; position: sticky; top: 120px; }
.mm-summary h3 { margin: 0 0 1rem; }
.mm-summary-row { display: flex; justify-content: space-between; padding: .5rem 0; font-size: .92rem; }
.mm-summary-total { border-top: 1px solid var(--mm-border); margin-top: .5rem; padding-top: .8rem; font-size: 1.25rem; font-weight: 800; }
.mm-coupon { display: flex; gap: .5rem; margin: 1rem 0; }
.mm-coupon input { flex: 1; border: 1px solid var(--mm-border); border-radius: 6px; padding: .6rem .8rem; }

/* ============================================================
   Banner de cookies
   ============================================================ */
.mm-cookie-banner {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 80;
  background: #fff; border: 1px solid var(--mm-border); border-radius: 12px;
  box-shadow: 0 10px 40px rgba(12,25,58,.2); padding: 1.2rem 1.4rem;
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; max-width: 900px; margin: 0 auto;
}
.mm-cookie-banner p { margin: 0; flex: 1; min-width: 240px; font-size: .88rem; color: var(--mm-muted); }
.mm-cookie-banner .actions { display: flex; gap: .6rem; }
#mm-cookie-hide:checked ~ .mm-cookie-banner,
#mm-cookie-hide:checked ~ * .mm-cookie-banner { display: none; }

/* ============================================================
   Utilidades
   ============================================================ */
.mm-missing { background: #fff3cd; color: #7a5b00; border: 1px dashed #ff7a00; padding: 0 .35rem; border-radius: 3px; font-size: .85em; font-weight: 700; }
.text-muted { color: var(--mm-muted); }
.mm-hide-mobile { display: initial; }
.mm-show-mobile { display: none; }

/* ============================================================
   Filtros de categoría/búsqueda (precio, stock)
   ============================================================ */
.mm-listing-layout { display: flex; gap: 2rem; align-items: flex-start; }
.mm-listing-main { flex: 1; min-width: 0; }
.mm-filters { flex: 0 0 230px; border: 1px solid var(--mm-border); border-radius: 8px; padding: 1rem; }
.mm-filters-title { font-size: 1.05rem; font-weight: 700; margin: 0 0 .9rem; }
.mm-filter-group { margin-bottom: .9rem; padding-bottom: .9rem; border-bottom: 1px solid var(--mm-border); }
.mm-filter-group h3 { font-size: .85rem; font-weight: 700; margin: 0 0 .5rem; text-transform: uppercase; letter-spacing: .02em; }
.mm-filter-price { display: flex; align-items: center; gap: .4rem; }
.mm-filter-price input { width: 0; flex: 1; border: 1px solid var(--mm-border); border-radius: 6px; padding: .4rem .5rem; }
.mm-filter-list { display: flex; flex-direction: column; gap: .35rem; }
.mm-filter-checkbox { display: flex; align-items: center; gap: .5rem; font-size: .88rem; cursor: pointer; line-height: 1.2; }
.mm-filter-checkbox input { flex-shrink: 0; }
.mm-filter-name { flex: 1; min-width: 0; }
.mm-filter-badge { color: var(--mm-muted); font-size: .8rem; flex-shrink: 0; }
.mm-filter-stars { color: #f0a500; font-size: .8rem; letter-spacing: 1px; flex: 0 0 auto; white-space: nowrap; }
.mm-filter-search { width: 100%; box-sizing: border-box; border: 1px solid var(--mm-border); border-radius: 6px; padding: .4rem .55rem; margin-bottom: .55rem; font-size: .85rem; }
.mm-filter-more { background: none; border: none; padding: .35rem 0 0; color: var(--mm-primary); font-weight: 700; font-size: .82rem; cursor: pointer; }
.mm-filter-more:hover { text-decoration: underline; }
#mm-filter-count { min-height: 1.1em; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .mm-cats { grid-template-columns: repeat(4, 1fr); }
  .mm-esenciales { grid-template-columns: repeat(3, 1fr); }
  .mm-products { grid-template-columns: repeat(3, 1fr); }
  .mm-blog { grid-template-columns: repeat(2, 1fr); }
  .mm-footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .mm-nav { display: none; }
  .mm-burger { display: inline-flex; }
  .mm-pro span.pro-label { display: none; }
  .mm-header-actions .mm-hide-mobile { display: none; }
  /* Cabecera móvil: logo + iconos en fila 1, buscador a todo el ancho en fila 2 */
  .mm-header-top { flex-wrap: wrap; gap: .8rem 1rem; }
  .mm-logo { order: 1; }
  .mm-header-actions { order: 2; margin-left: auto; }
  .mm-search { order: 3; flex-basis: 100%; }
  .mm-logo img { max-width: 150px; }
  .mm-hero-grid { grid-template-columns: 1fr; }
  .mm-hero-side { grid-template-rows: none; grid-template-columns: 1fr; }
  .mm-strip { grid-template-columns: 1fr; }
  .mm-usps .grid { grid-template-columns: 1fr 1fr; }
  .mm-cats { grid-template-columns: repeat(2, 1fr); }
  .mm-esenciales { grid-template-columns: repeat(2, 1fr); }
  .mm-products { grid-template-columns: repeat(2, 1fr); }
  /* Manejador general de rejillas de tarjetas en móvil (2 columnas):
     si el nº de tarjetas es impar, la última (sola en su fila) ocupa todo el ancho,
     así ningún bloque de la home queda con hueco. Vale para cualquier nº de tarjetas.
     Los listados densos de producto (categoría/búsqueda/marca) usan .mm-listing-main /
     .mm-page y quedan fuera a propósito, para no agrandar una tarjeta suelta. */
  .mm-cats > :last-child:nth-child(odd),
  .mm-esenciales > :last-child:nth-child(odd),
  .mm-section .mm-products > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .mm-blog { grid-template-columns: 1fr; }
  .mm-footer-top { grid-template-columns: 1fr; gap: 1.5rem; }
  .mm-trust-badges { gap: 1.2rem; padding: 1.2rem 1rem; }
  .mm-pdp { grid-template-columns: 1fr; }
  .mm-cart { grid-template-columns: 1fr; }
  .mm-info-grid { grid-template-columns: 1fr; }
  .mm-hide-mobile { display: none; }
  .mm-show-mobile { display: initial; }
  .mm-header-actions { gap: 1rem; }
  .mm-listing-layout { flex-direction: column; }
  .mm-filters { flex-basis: auto; width: 100%; }
}
@media (max-width: 420px) {
  .mm-usps .grid { grid-template-columns: 1fr; }
  .mm-products { grid-template-columns: 1fr 1fr; }
  .mm-cart-item { grid-template-columns: 70px 1fr; }
  .mm-cart-item img { width: 70px; height: 70px; }
}
@media (max-width: 480px) {
  .mm-card-addcart { width: 40px; height: 40px; padding: 0; margin-left: auto; margin-right: auto; }
  .mm-card-addcart .mm-btn-text { display: none; }
}