:root{
  --azul:#273c8a;
  --lineaHeader:#2d3aa5;
  --rosa:#ff0000;

  --altoHeader:66.75px;
  --altoTopbar:44px;

  --topbarReal: var(--altoTopbar);
  --navOffset: calc(var(--topbarReal) + var(--altoHeader));

  --max:1320px;
  --texto:#0b1b3a;
  --menuBlue:#001B57;
  --sideW:160px;
  --iconMobile:#111;

  --footerBlue:#0b1b3a;
  --footerBlack:#111;
}

*{box-sizing:border-box}
html,body{height:100%}
html,body{overflow-x:hidden}

body{
  margin:0;
  font-family:"Sofia Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--texto);
  padding-top:0;
  background:#fff;
}

body.menu-open{
  overflow:hidden;
  touch-action:none;
}
body.cart-open{
  overflow:hidden;
  touch-action:none;
}

/* ===== TOPBAR ===== */
.topbar{
  position:sticky;
  top:0;
  left:0; right:0;
  z-index:2000;
  height:var(--altoTopbar);
  background:var(--lineaHeader);
  color:#fff;
  display:flex;
  align-items:center;
  transition: transform .22s cubic-bezier(.2,.8,.2,1);
}
.topbar.is-hidden{
  transform: translateY(-100%);
  pointer-events:none;
}
.topbar .inner{
  width:min(var(--max), calc(100% - 40px));
  margin:0 auto;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:22px;
  font-size:13px;
  font-weight:800;
}
.topbar-left{
  display:flex;
  gap:18px;
  align-items:center;
  margin-left:auto;
}
.topbar-left a{
  color:#fff; text-decoration:none; opacity:.95;
  font-size:13px; font-weight:800;
}
.topbar-left a:hover{ opacity:1; text-decoration:underline; }

body.topbar-hidden{ --topbarReal: 0px; }

/* ===== HEADER ===== */
.siteHeader{
  position:sticky;
  top:var(--topbarReal);
  left:0; right:0;
  z-index:1999;
  background:#fff;
  height:var(--altoHeader);
  display:flex;
  align-items:center;
  overflow:visible;
  transition: top .22s cubic-bezier(.2,.8,.2,1);
}
.siteHeader::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:0;
  height:3px;
  background:var(--lineaHeader);
}
.siteHeader .inner{
  width:min(var(--max), calc(100% - 24px));
  margin:0 auto;
  display:grid;
  grid-template-columns: var(--sideW) 1fr var(--sideW);
  align-items:center;
  gap:12px;
  overflow:visible;
}

/* brand */
.brand{
  display:flex;
  align-items:center;
  justify-self:start;
  text-decoration:none;
  width:100%;
  max-width:var(--sideW);
}
.brand img{
  height:54px;
  width:auto;
  max-width:100%;
  display:block;
  object-fit:contain;
}

/* NAV DESKTOP */
.mainNav{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  font-size:13.8px;
  font-weight:800;
  overflow:hidden;
  padding:0 10px;
}
.navItem{ position:relative; display:flex; align-items:center; flex:0 0 auto; }
.navLink{
  text-decoration:none;
  color:var(--texto);
  opacity:.98;
  padding:10px 4px;
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}
.navLink::before{
  content:"";
  position:absolute;
  top:2px;
  left:50%;
  width:6px;
  height:6px;
  border-radius:999px;
  background:transparent;
  transform:translateX(-50%);
}
.navItem:hover .navLink{ color:var(--rosa); }
.navItem:hover .navLink::before{ background:var(--rosa); }

.chev{ width:12px; height:12px; display:inline-block; transform:translateY(1px); opacity:.9; }
.chev svg{ width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2; }

/* MEGAMENU */
.hasMega{ position:relative; }
.hasMega::after{
  content:"";
  position:absolute;
  left:-50px;
  right:-50px;
  top:100%;
  height:170px;
  background:transparent;
}
.megaBar{
  position:fixed;
  left:0; right:0;
  top: calc(var(--topbarReal) + var(--altoHeader) - 3px);
  background:var(--rosa);
  padding:36px 0;
  z-index:2001;

  opacity:0;
  transform: translateY(-8px);
  pointer-events:none;
  visibility:hidden;

  transition:
    top .22s cubic-bezier(.2,.8,.2,1),
    opacity .16s ease,
    transform .16s ease,
    visibility 0s linear .16s;
}
.hasMega:hover .megaBar,
.hasMega.is-open .megaBar,
.hasMega:focus-within .megaBar,
.megaBar:hover{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
  visibility:visible;
  transition:
    top .22s cubic-bezier(.2,.8,.2,1),
    opacity .16s ease,
    transform .16s ease,
    visibility 0s;
}
.megaInner{
  width:min(var(--max), calc(100% - 40px));
  margin:0 auto;
  display:flex;
  justify-content:center;
  gap:70px;
  flex-wrap:wrap;
}
.megaBar a{
  color:#fff;
  text-decoration:none;
  font-weight:900;
  font-size:13.5px;
  padding:6px 0;
  opacity:.95;
}
.megaBar a:hover{ opacity:1; text-decoration:underline; }

/* ACTIONS */
.actions{
  justify-self:end;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}

/* LUPA DESKTOP */
.headerSearch{
  width:38px; height:38px;
  border:0;
  background:#fff;
  cursor:pointer;
  display:grid;
  place-items:center;
  padding:0;
}
.headerSearch svg{
  width:18px;height:18px;
  fill:none;
  stroke:var(--rosa);
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* icon buttons */
.iconBtn{
  width:38px;height:38px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:transparent;
  border:0;
  cursor:pointer;
  text-decoration:none;
  position:relative;
}
.iconBtn:hover{ background:#f3f4f7; }
.iconSvgImg{
  width:20px;height:20px;
  display:block;
  filter: brightness(0) invert(0);
}

/* contador arriba (carrito) */
.cartCount{
  position:absolute;
  right:-2px;
  top:-3px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background:var(--rosa);
  color:#fff;
  font-weight:900;
  font-size:11px;
  display:grid;
  place-items:center;
  border:2px solid #fff;
}

/* LOGIN dropdown */
.accountWrap{ position:relative; display:flex; align-items:center; }
.accountToggle{
  height:38px;
  padding:0 8px;
  display:flex;
  align-items:center;
  gap:6px;
  border-radius:999px;
  text-decoration:none;
  background:transparent;
}
.accountToggle:hover{ background:#f3f4f7; }
.accountToggle .chevIco{
  width:16px; height:16px;
  fill:none;
  stroke: var(--iconMobile);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.85;
}
.accountDropdown{
  position:fixed;
  right:18px;
  top: calc(var(--topbarReal) + var(--altoHeader) + 12px);
  width:320px;
  max-width: calc(100vw - 24px);
  background:#fff;
  border-radius:10px;
  box-shadow:0 18px 45px rgba(0,0,0,.22);
  border:1px solid #e9e9ee;
  padding:14px;
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
  transition: opacity .16s ease, transform .16s ease;
  z-index:99998;
}
.accountWrap.open-login .accountDropdown{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.loginBox{ display:flex; flex-direction:column; gap:10px; }
.loginBox input{
  height:42px;
  border:1px solid #e6e6ee;
  border-radius:8px;
  padding:0 12px;
  font-family:"Sofia Sans", system-ui, sans-serif;
  font-weight:700;
  outline:none;
}
.loginRow{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:2px; }
.loginRow .remember{ display:flex; gap:8px; align-items:center; font-weight:700; font-size:13px; }
.loginBtn{
  height:40px;
  border:0;
  background:var(--rosa);
  color:#fff;
  font-weight:900;
  border-radius:10px;
  padding:0 14px;
  cursor:pointer;
}
.registerLink{ font-weight:900; color:#1a2a7a; text-decoration:none; font-size:13px; }

/* HAMBURGUESA */
.menuBtn{
  display:none;
  width:44px;height:44px;
  border:0;
  background:transparent;
  border-radius:10px;
  cursor:pointer;
  padding:0;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:6px;
}
.menuBtn span{
  display:block;
  width:22px;
  height:2.6px;
  background:var(--iconMobile);
  border-radius:999px;
}

/* ===== CARRITO DRAWER ===== */
.cartDrawer{
  position:fixed;
  inset:0;
  z-index:99999;
  pointer-events:none;
  opacity:0;
  transition: opacity .18s ease;
}
.cartDrawer.open{
  pointer-events:auto;
  opacity:1;
}
.cartBackdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.35);
  border:0;
  cursor:pointer;
}
.cartPanel{
  position:absolute;
  right:0;
  top:0;
  height:100%;
  width:min(420px, 92vw);
  background:#fff;
  transform:translateX(100%);
  transition: transform .22s cubic-bezier(.2,.8,.2,1);
  display:flex;
  flex-direction:column;
}
.cartDrawer.open .cartPanel{
  transform:translateX(0);
}

/* top */
.cartPanelTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 14px;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.cartBack{
  width:44px;height:44px;
  border:0;
  border-radius:12px;
  background:#fff;
  cursor:pointer;
  display:grid;
  place-items:center;
}
.cartBack:hover{ background:#f3f4f7; }
.cartBack svg{ width:22px;height:22px; color:#222; }

.cartBubbleWrap{
  display:flex;
  align-items:center;
  gap:10px;
}
.cartBubble{
  width:46px;height:46px;
  border-radius:999px;
  background:var(--rosa);
  display:grid;
  place-items:center;
  color:#fff;
}
.cartBubble svg{
  width:24px;height:24px;
  color:#fff;
}
.cartBubbleCount{
  font-weight:900;
  color:#111;
  font-size:14px;
}

/* shipping */
.cartShip{
  padding:12px 14px;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.cartShipMsg{
  font-weight:800;
  font-size:12.8px;
  color:#111;
  margin-bottom:10px;
}
.cartShipBar{
  height:6px;
  border-radius:999px;
  background:#e9e9ee;
  overflow:hidden;
}
.cartShipFill{
  height:100%;
  background: #1fb45b;
  width:0%;
}

/* items list */
.cartItems{
  padding:14px;
  overflow:auto;
  flex:1 1 auto;
}
.cartEmpty{
  padding:26px 10px;
  text-align:center;
  color:#444;
  font-weight:800;
}

/* item */
.cartItem{
  display:grid;
  grid-template-columns: 64px 1fr auto;
  gap:12px;
  padding:12px 0;
  border-bottom:1px solid rgba(0,0,0,.08);
  align-items:start;
}
.cartItemImg{
  width:64px;
  height:64px;
  border-radius:12px;
  background:#f2f2f6;
  border:1px solid rgba(0,0,0,.08);
  background-size:cover;
  background-position:center;
}
.cartItemName{
  font-weight:900;
  color:#111;
  font-size:14px;
  line-height:1.25;
}
.cartQtyRow{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:8px;
  flex-wrap:wrap;
}
.qtyBox{
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(0,0,0,.10);
  border-radius:999px;
  overflow:hidden;
  background:#fff;
}
.qtyBtn{
  width:34px;height:32px;
  border:0;
  background:#fff;
  cursor:pointer;
  font-weight:900;
  color:#111;
}
.qtyBtn:hover{ background:#f3f4f7; }
.qtyNum{
  width:34px;
  text-align:center;
  font-weight:900;
}
.qtyRemove{
  border:0;
  background:transparent;
  color:#6b7280;
  cursor:pointer;
  font-weight:800;
  padding:6px 4px;
}
.qtyRemove:hover{ text-decoration:underline; color:#111; }

.cartItemPrice{
  font-weight:900;
  color:#111;
  white-space:nowrap;
  font-size:14px;
}

/* bottom */
.cartBottom{
  border-top:1px solid rgba(0,0,0,.08);
  padding:14px;
  background:#fff;
}
.cartSubtotalRow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
  font-weight:900;
  color:#111;
}
.cartCheckout{
  display:flex;
  align-items:center;
  justify-content:center;
  height:46px;
  border-radius:12px;
  background:var(--rosa);
  color:#fff;
  text-decoration:none;
  font-weight:900;
}
.cartCheckout:hover{ filter:brightness(1.05); }

.cartClear{
  width:100%;
  margin-top:10px;
  height:42px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.16);
  background:#fff;
  cursor:pointer;
  font-weight:900;
}
.cartClear:hover{ background:#f3f4f7; }

.cartReco{
  margin-top:14px;
  border-top:1px solid rgba(0,0,0,.08);
  padding-top:14px;
}
.cartRecoTitle{
  font-weight:900;
  color:#111;
  font-size:13px;
  margin-bottom:10px;
}
.cartRecoCard{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:12px;
  padding:12px;
}
.cartRecoDot{
  width:10px;height:10px;
  border-radius:999px;
  background:var(--rosa);
}
.cartRecoText{
  font-weight:800;
  color:#111;
}

/* ===== HERO TIENDA ===== */
.shopHero{
  position:relative;
  min-height:520px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:90px 18px 70px;
  background:#000;
  overflow:hidden;
}
.shopHero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("https://i.blogs.es/83a384/esparragos/840_560.jpg");
  background-size:cover;
  background-position:center;
  transform:scale(1);
  animation: heroZoom 22s ease-in-out infinite alternate;
  z-index:0;
}
.shopHero::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.58), rgba(0,0,0,.30) 60%, rgba(0,0,0,.20));
  z-index:1;
}
@keyframes heroZoom{ from{transform:scale(1)} to{transform:scale(1.07)} }

.shopHero__inner{
  position:relative;
  z-index:2;
  width:min(980px, calc(100% - 24px));
  text-align:center;
  color:#fff;
  text-shadow:0 10px 22px rgba(0,0,0,.55);
}
.shopHero__kicker{
  margin:0 0 10px;
  font-family:"Pacifico", cursive;
  font-size:28px;
  font-weight:400;
  opacity:.98;
}
.shopHero h1{
  margin:0 0 12px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(40px, 5vw, 72px);
  font-weight:800;
  line-height:1.05;
}
.shopHero__sub{
  margin:0 auto 18px;
  max-width:860px;
  font-size:18px;
  font-weight:650;
  line-height:1.6;
  opacity:.95;
}
.shopHero__badges{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  background: rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
  font-size:13px;
  font-weight:900;
}

/* ===== MAIN ===== */
.pageMain{ padding:0; background:#fff; }

.productWrap{
  padding:70px 20px 90px;
  background:#f3f3f5;
}
.productGrid{
  width:min(var(--max), calc(100% - 40px));
  margin:0 auto;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:22px;
}
.pCard{
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 16px 40px rgba(0,0,0,.08);
  display:flex;
  flex-direction:column;
}
.pImg{
  height:220px;
  background-size:cover;
  background-position:center;
  background-color:#f2f2f6;
}
.pBody{ padding:18px 18px 20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.pTitle{
  margin:0;
  font-size:20px;
  font-weight:900;
  color:#111;
}
.pDesc{
  margin:0;
  font-size:14.5px;
  line-height:1.6;
  font-weight:650;
  color:#26324f;
  opacity:.95;
}
.pMeta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:6px;
}
.pPrice{
  font-size:18px;
  font-weight:900;
  color:#1a0446;
}
.pTag{
  font-size:12px;
  font-weight:900;
  padding:8px 10px;
  border-radius:999px;
  background:#ffe6e6;
  color:#b30000;
  border:1px solid rgba(255,0,0,.18);
}
.pBtn{
  margin-top:auto;
  height:44px;
  border:0;
  border-radius:12px;
  background:var(--rosa);
  color:#fff;
  font-weight:900;
  cursor:pointer;
}
.pBtn:hover{ filter:brightness(1.05); }

/* Info */
.infoStrip{
  width:min(var(--max), calc(100% - 40px));
  margin:26px auto 0;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:18px;
}
.infoCard{
  background:#fff;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 16px 40px rgba(0,0,0,.06);
  padding:18px 18px 16px;
}
.infoCard h3{
  margin:0 0 10px;
  font-size:18px;
  font-weight:900;
  color:#111;
}
.infoCard p{
  margin:0 0 12px;
  color:#26324f;
  font-weight:650;
  line-height:1.6;
}
.infoCard ul{
  margin:0;
  padding-left:18px;
  color:#26324f;
  font-weight:650;
  line-height:1.75;
}
.infoBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  padding:0 18px;
  border-radius:12px;
  background:#1a0446;
  color:#fff;
  text-decoration:none;
  font-weight:900;
}
.infoBtn:hover{ filter:brightness(1.06); }

/* ===== FOOTER ===== */
.siteFooter,
.siteFooter *{
  font-family: "Sofia Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.siteFooter{ width:100%; }

.newsletterBar{
  background: var(--footerBlue);
  padding:28px 0;
  position:relative;
}
.newsletterBar::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:0;
  width:min(var(--max), calc(100% - 40px));
  height:1px;
  background:rgba(255,255,255,.22);
  pointer-events:none;
}
.newsletterInner{
  width:min(var(--max), calc(100% - 40px));
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  color:#fff;
}
.newsText{ flex:1 1 auto; min-width:260px; text-align:left; }
.newsText h3{ margin:0 0 8px; font-weight:900; font-size:18px; line-height:1.2; }
.newsText p{ margin:0; opacity:.9; font-weight:600; line-height:1.45; font-size:13.5px; }

.newsForm{
  flex:0 0 520px;
  max-width:520px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.newsRow{ display:flex; align-items:center; gap:12px; }
.newsRow input{
  flex:1 1 auto;
  height:40px;
  border-radius:6px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(0,0,0,.28);
  color:#fff;
  padding:0 14px;
  outline:none;
  font-weight:700;
  font-size:13px;
}
.newsRow input::placeholder{ color:rgba(255,255,255,.75); }
.newsRow button{
  height:40px;
  padding:0 18px;
  border-radius:6px;
  border:0;
  background:#fff;
  color:#000;
  font-weight:900;
  font-size:12.6px;
  cursor:pointer;
  white-space:nowrap;
}
.newsCheck{
  display:flex;
  gap:10px;
  align-items:flex-start;
  line-height:1.35;
  opacity:.92;
  font-size:12.5px;
  color:rgba(255,255,255,.88);
}
.newsCheck input{ margin-top:2px; }

.footerMain{ background: var(--footerBlue); padding:44px 0; }
.footerInner{
  width:min(var(--max), calc(100% - 40px));
  margin:0 auto;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:40px;
  color:#cfd6ff;
}
.siteFooter .fCol h4{
  color:#fff !important;
  font-size:16px !important;
  font-weight:900 !important;
  letter-spacing:.10em !important;
  margin:0 0 14px !important;
}
.siteFooter .fCol a,
.siteFooter .fCol p{
  font-size:13.5px !important;
  color:rgba(255,255,255,.88) !important;
  opacity:1 !important;
}
.fCol a{
  display:block;
  text-decoration:none;
  font-weight:700;
  padding:6px 0;
}
.fCol a:hover{ color:#fff !important; text-decoration:underline; }
.fMail{ color:#fff !important; font-weight:900 !important; }

.contactList{ display:flex; flex-direction:column; gap:14px; margin-top:10px; }
.cRow{ display:flex; align-items:flex-start; gap:12px; }
.cIcon{ width:30px; flex:0 0 30px; display:flex; align-items:flex-start; justify-content:center; padding-top:2px; }
.cIcon svg{
  width:18px; height:18px;
  fill:none; stroke:#fff; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round;
  display:block;
}
.cText p{ margin:0; color:rgba(255,255,255,.88); line-height:1.55; }
.cText .fMail{ margin-top:0; display:inline-block; }

.socialRow{ display:flex; gap:14px; margin-top:14px; }
.socialBtn{
  width:40px; height:40px;
  border-radius:999px;
  background:#fff;
  position:relative;
  display:inline-block;
  text-decoration:none;
  padding:0;
  border:0;
  overflow:hidden;
}
.socialBtn svg{
  position:absolute !important;
  top:50% !important;
  left:50% !important;
  transform:translate(-50%, -50%) !important;
  display:block !important;
  margin:0 !important;
  padding:0 !important;
}
.socialBtn--fb svg{
  width:16px !important;
  height:16px !important;
  fill:#111 !important;
  stroke:none !important;
  transform:translate(-50%, -50%) translateY(0.6px) !important;
}
.socialBtn--ig svg{
  width:19px !important;
  height:19px !important;
  fill:none !important;
  stroke:#111 !important;
  stroke-width:2.2 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

.footerBottomBar{
  background: var(--footerBlack);
  color:#bdbdbd;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12.642px;
  font-weight:700;
  padding:0 16px;
}

/* ===== MENÚ MÓVIL ===== */
.mMenu{
  position:fixed;
  inset:0;
  z-index:9999;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}
.mMenu.open{ opacity:1; pointer-events:auto; }

.mMenu__backdrop{
  position:absolute;
  inset:0;
  background:rgba(11,27,58,.35);
  border:0;
  cursor:pointer;
  z-index:0;
}
.mMenu__panel{
  position:absolute;
  inset:0;
  background:transparent;
  transform:translateX(14px);
  transition:transform .18s ease;
  display:flex;
  flex-direction:column;
  z-index:1;
  overflow:auto;
}
.mMenu.open .mMenu__panel{ transform:translateX(0); }

.mMenu__top{
  height:86px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  background:#fff;
  flex:0 0 auto;
}
.mMenu__brand img{ height:48px; width:auto; display:block; object-fit:contain; }
.mMenu__close{
  width:46px;height:46px;
  border-radius:12px;
  border:0;
  background:#fff;
  cursor:pointer;
  display:grid;
  place-items:center;
}
.mMenu__close svg{
  width:22px;height:22px;
  fill:none;
  stroke:var(--rosa);
  stroke-width:2.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.mMenu__body{
  background:#fff;
  padding:16px 16px 0;
  display:flex;
  flex-direction:column;
  gap:16px;
  flex:0 0 auto;
}

.mSearch{
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid #dbe2ef;
  border-radius:999px;
  background:#fff;
  height:44px;
  overflow:hidden;
}
.mSearch input{
  border:0;
  outline:none;
  height:44px;
  flex:1;
  font-size:16px;
  font-weight:600;
  color: var(--menuBlue);
  padding:14px 14px 14px 18px;
  background:transparent;
}
.mSearchBtn{
  width:44px;height:44px;
  border:0;
  background:transparent;
  cursor:pointer;
  display:grid;
  place-items:center;
}
.mSearchBtn svg{
  width:18px;height:18px;
  fill:none;
  stroke:var(--rosa);
  stroke-width:2.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.mLink, .mAcc{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 12px;
  color: var(--menuBlue);
  font-size:16px;
  font-weight:900;
  border:0;
  background:transparent;
  text-decoration:none;
}
.mAcc{ width:100%; cursor:pointer; }

.mCaret{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;height:36px;
  border-radius:10px;
}
.mCaret svg{
  width:18px;height:18px;
  fill:none;
  stroke:var(--rosa);
  stroke-width:2.8;
  transition:transform .18s ease;
}
.mAcc[aria-expanded="true"] .mCaret svg{ transform:rotate(180deg); }

.mSub{
  background:var(--rosa);
  overflow:hidden;
  max-height:0;
  transition:max-height .2s ease;
  width: calc(100% + 32px);
  margin-left: -16px;
  margin-right: -16px;
}
.mSub a{
  display:block;
  color:#fff;
  text-decoration:none;
  font-weight:800;
  padding:16px 28px;
  font-size:16px;
}
.mSub a:hover{ text-decoration:underline; }

.mAudience{
  background:var(--lineaHeader);
  padding:16px 28px;
  color:#fff;
  width: calc(100% + 32px);
  margin-left: -16px;
  margin-right: -16px;
  margin-top:10px;
}
.mAudience a{
  display:block;
  color:#fff;
  text-decoration:none;
  font-weight:800;
  font-size:16px;
  padding:8px 0;
  opacity:.95;
}
.mAudience a:hover{ opacity:1; text-decoration:underline; }

/* WHATSAPP */
.waFloat{
  position:fixed;
  right:18px;
  bottom:18px;
  width:60px;
  height:60px;
  border-radius:999px;
  background: rgb(45, 183, 66);
  display:grid;
  place-items:center;
  z-index:99999;
  box-shadow:0 10px 22px rgba(0,0,0,.25);
  text-decoration:none;
  overflow:hidden;
  border:0;
}
.waFloat svg{
  position:relative;
  width:48px;
  height:48px;
  fill:#fff;
  display:block;
}

/* RESPONSIVE */
@media (max-width:980px){
  :root{ --topbarReal: 0px; }
  .topbar{ display:none; }
  .siteHeader{ top:0; }
  .siteHeader .inner{ grid-template-columns:auto 1fr auto; }
  .mainNav{ display:none; }
  .headerSearch{ display:none; }
  .menuBtn{ display:flex; }

  .shopHero{ min-height:480px; padding:70px 18px 60px; }
  .shopHero__kicker{ font-size:24px; }

  .cartPanel{ width:min(420px, 100vw); }
}

@media (max-width:980px){
  .productGrid{ grid-template-columns:1fr; }
  .infoStrip{ grid-template-columns:1fr; }
  .newsletterInner{
    flex-direction:column;
    align-items:stretch;
    gap:18px;
  }
  .newsForm{
    flex: 0 1 auto !important;
    width:100% !important;
    max-width:560px;
  }
  .newsText{ width:100%; max-width:560px; }
  .newsRow{ flex-wrap:wrap; }
  .newsRow input{ flex:1 1 320px; min-width:220px; }
  .newsRow button{ min-width:160px; }

  .footerInner{
    grid-template-columns:1fr;
    justify-items:center;
    text-align:center;
    gap:26px;
  }
  .fCol{ width:min(560px, 100%); }
  .contactList{ width:min(560px, 100%); }
  .cRow{ justify-content:flex-start; }
  .cText{ text-align:left; }
  .socialRow{ justify-content:center; }
}