/* =====================================================================
   Mentarosa · Páginas /wishlist y /cart
   Reutiliza tokens, header, botones, tarjetas (.p), líneas (.cl) y footer
   ===================================================================== */
.ls{position:relative;background:var(--rosa-nube);overflow:clip;padding:136px 48px 160px;min-height:70vh}
.ls::before{content:"";position:absolute;width:560px;height:560px;left:-220px;top:-170px;border-radius:50%;background:var(--rosa-pastel);opacity:.5}
.ls::after{content:"";position:absolute;width:420px;height:420px;right:-160px;top:40px;border-radius:50%;background:var(--dorado-pastel);opacity:.7}
.ls [hidden]{display:none!important}
.ls-head,.ls-body{position:relative;z-index:1;max-width:1344px;margin:0 auto}
.ls .eyebrow{justify-content:flex-start}
.crumbs{display:flex;align-items:center;gap:8px;font:500 13px/18px var(--font-body);color:var(--vino-600);margin-bottom:22px}
.crumbs a{color:var(--rosa-profundo);text-decoration:none}
.crumbs a:hover{text-decoration:underline;text-underline-offset:3px}
.crumbs span[aria-hidden]{opacity:.5}
.ls-title{position:relative;display:inline-block;margin-top:12px;font:600 clamp(52px,7.4vw,112px)/.96 var(--font-display);letter-spacing:-.035em;color:var(--vino-900)}
.ls-title em{font-family:var(--font-accent);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--brand-rosa);font-size:1.03em}
.ls-spark{position:absolute;right:-.42em;top:-.1em;width:.32em;height:.32em}
.ls-sub{margin-top:16px;font:italic 400 22px/1.35 var(--font-accent);color:var(--rosa-profundo)}
.ls-body{margin-top:48px}

/* grid de favoritos (tarjetas .p del sitio) */
.ls-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:44px 24px}
.ls-grid .p.enter{animation:cardIn .6s cubic-bezier(.22,.9,.3,1) both;animation-delay:calc(var(--i,0) * 50ms)}
.ls-grid .p{transition:opacity .3s,transform .3s}
.ls-grid .p.leaving{opacity:0;transform:scale(.94)}
@keyframes cardIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* estado vacío */
.ls-empty{display:grid;justify-items:center;text-align:center;gap:14px;padding:64px 24px;border-radius:var(--radius-xl);
  background:linear-gradient(160deg,var(--rosa-rubor),var(--dorado-crema));border:2px dashed rgba(239,68,121,.25)}
.ls-empty svg{width:140px;height:124px}
.ls-empty h2{font:600 clamp(28px,3vw,36px)/1.1 var(--font-display);color:var(--vino-900)}
.ls-empty h2 em{font-family:var(--font-accent);font-style:italic;font-weight:400;color:var(--brand-rosa)}
.ls-empty p{max-width:440px;font-size:16px;line-height:24px;color:var(--vino-600)}
.ls-empty .btn{margin-top:6px}
.ls-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* carrito completo */
.cart-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:40px;align-items:start}
.cart-lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.cart-lines .cl{grid-template-columns:120px minmax(0,1fr);gap:20px;padding:16px;border-radius:var(--radius-lg)}
.cart-lines .cl-name{font-size:20px;line-height:24px}
.cart-sum{position:sticky;top:112px;padding:28px;border-radius:var(--radius-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.62));-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.95);box-shadow:var(--shadow-card),inset 0 1px 0 #fff}
.cart-sum h2{font:600 26px/1 var(--font-display);color:var(--vino-900);margin-bottom:18px}
.cs-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:12px 0;border-top:1px solid var(--rosa-pastel);font:500 15px/20px var(--font-body);color:var(--vino-600)}
.cs-row b{font:600 22px/26px var(--font-display);color:var(--vino-900);text-align:right}
.cs-row.muted span:last-child{text-align:right;font-size:13px}
.cs-note{margin-top:6px;font-size:13px;line-height:19px;color:var(--vino-600)}
.cs-pay{width:100%;justify-content:center;margin-top:18px}
.cs-pay[disabled]{background:var(--vino-600);box-shadow:none;cursor:not-allowed;transform:none}
.cs-pay-note{margin-top:8px;font-size:12.5px;line-height:18px;color:var(--vino-600);text-align:center}
.cs-wa{width:100%;justify-content:center;margin-top:12px}
.cs-back{display:block;margin-top:14px;text-align:center;font:600 14px/18px var(--font-body);color:var(--rosa-profundo);text-decoration:underline;text-underline-offset:3px}

@media (min-width:1560px){.ls-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (max-width:1100px){
  .ls{padding:124px 32px 140px}
  .ls-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 18px}
  .cart-layout{grid-template-columns:minmax(0,1fr) 320px;gap:28px}
}
@media (max-width:900px){
  .ls-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cart-layout{grid-template-columns:1fr}
  .cart-sum{position:static}
}
@media (max-width:640px){
  .ls{padding:108px 16px 120px}
  .ls-sub{font-size:19px}
  .ls-body{margin-top:32px}
  .ls-grid{gap:30px 12px}
  .cart-lines .cl{grid-template-columns:88px minmax(0,1fr);gap:14px;padding:12px}
  .cart-lines .cl-name{font-size:17px}
  .cart-sum{padding:22px}
  .ls-empty{padding:48px 18px}
}
@media (prefers-reduced-motion:reduce){.ls-grid .p.enter{animation:none}.ls-grid .p{transition:none}}

/* ============ PEDIDO POR WHATSAPP ============ */
/* botón destacado: píldora vino de la marca con el icono de WhatsApp en su verde oficial */
.wa-btn{gap:12px;padding:10px 26px 10px 10px;background:var(--vino-900);color:#fff;box-shadow:0 10px 24px rgba(61,19,37,.28);font:600 17px/22px var(--font-display)}
.wa-btn:hover{background:#56203A;transform:translateY(-2px)}
.wa-btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.wa-btn:focus-visible{outline:3px solid rgba(239,68,121,.5);outline-offset:3px}
.wa-ic{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#25D366;box-shadow:inset 0 -2px 0 rgba(0,0,0,.12)}
.wa-ic svg{width:21px;height:21px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.wa-ic svg.ic-wa{fill:#fff;stroke:none;width:20px;height:20px}
.cs-wa-order{width:100%;justify-content:center;margin-top:18px;padding-right:22px}
.cs-pay-note b{color:var(--vino-900);font-weight:600}
.cs-block{margin-top:10px;padding:10px 14px;border-radius:var(--radius-sm);background:var(--rosa-rubor);font:500 13px/19px var(--font-body);color:var(--rosa-profundo)}
.wa-status{margin-top:14px;padding:12px 14px;border-radius:var(--radius-sm);background:var(--dorado-crema);border:1px dashed var(--brand-dorado);font:500 13px/19px var(--font-body);color:var(--vino-900)}
.wa-status span{display:block;color:var(--dorado-profundo);font-weight:600}

/* resumen (diálogo) */
.od{width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 24px);margin:auto;padding:0;border:0;border-radius:var(--radius-lg);background:var(--rosa-nube);color:var(--vino-900);overflow:hidden;box-shadow:0 30px 80px rgba(61,19,37,.35)}
.od::backdrop{background:rgba(61,19,37,.45);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.od[open]{display:block;animation:odIn .4s cubic-bezier(.22,.9,.3,1) both}
@keyframes odIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
.od-in{position:relative;display:flex;flex-direction:column;max-height:calc(100dvh - 24px)}
.od-in::before{content:"";position:absolute;width:260px;height:260px;right:-100px;top:-120px;border-radius:50%;background:var(--dorado-pastel);opacity:.75;pointer-events:none}
.od [hidden]{display:none!important}
.od-step{display:flex;flex-direction:column;min-height:0;flex:1}
.od-head{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:24px 24px 14px}
.od-eyebrow{font:700 11px/14px var(--font-body);letter-spacing:.14em;text-transform:uppercase;color:var(--rosa-profundo)}
.od-head h2{margin-top:6px;font:600 28px/1.1 var(--font-display);letter-spacing:-.02em}
.od-head h2 em{font-family:var(--font-accent);font-style:italic;font-weight:400;color:var(--brand-rosa);white-space:nowrap}
.od-x{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--vino-900);box-shadow:0 4px 12px rgba(184,42,88,.14);transition:background .2s,color .2s,transform .2s}
.od-x:hover{background:var(--brand-rosa);color:#fff;transform:rotate(90deg)}
.od-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.od-body{position:relative;overflow:auto;overscroll-behavior:contain;padding:0 24px 16px}
.od-items{list-style:none;margin:0;padding:0;border-radius:var(--radius-md);background:#fff;box-shadow:0 4px 14px rgba(184,42,88,.07)}
.od-items li{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:14px 16px;border-top:1px solid var(--rosa-rubor)}
.od-items li:first-child{border-top:0}
.od-items b{display:block;font:500 16px/20px var(--font-display);color:var(--vino-900)}
.od-items span{display:block;margin-top:2px;font:500 13px/18px var(--font-body);color:var(--vino-600)}
.od-q{text-align:right;font:500 13px/18px var(--font-body);color:var(--vino-600);white-space:nowrap}
.od-q b{font:600 16px/20px var(--font-display);color:var(--rosa-profundo)}
.od-total{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:14px 4px 0;font:500 15px/20px var(--font-body);color:var(--vino-600)}
.od-total b{font:600 22px/26px var(--font-display);color:var(--vino-900);text-align:right}
.od-info{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.od-info li{padding:10px 12px;border-radius:var(--radius-sm);background:var(--dorado-crema);font:500 13px/18px var(--font-body);color:var(--vino-600)}
.od-info b{display:block;font:700 10.5px/14px var(--font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--dorado-profundo)}
.od-fields{display:grid;gap:12px;margin-top:18px}
.od-fields label{display:grid;gap:6px;font:600 14px/18px var(--font-body);color:var(--vino-900)}
.od-fields label span{font-weight:500;color:var(--vino-600)}
.od-fields input,.od-fields textarea{width:100%;padding:12px 16px;border-radius:var(--radius-md);border:1.5px solid var(--rosa-pastel);background:#fff;font:400 15px/22px var(--font-body);color:var(--vino-900);resize:vertical;transition:border-color .2s,box-shadow .2s}
.od-fields input:focus,.od-fields textarea:focus{outline:0;border-color:var(--brand-rosa);box-shadow:0 0 0 4px rgba(239,68,121,.15)}
.od-preview{margin-top:14px;border-radius:var(--radius-md);background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.95)}
.od-preview summary{cursor:pointer;padding:12px 16px;font:600 14px/18px var(--font-body);color:var(--rosa-profundo)}
.od-preview summary:focus-visible{outline:3px solid rgba(239,68,121,.45);outline-offset:-3px;border-radius:var(--radius-md)}
.od-preview pre{margin:0;padding:0 16px 14px;white-space:pre-wrap;word-break:break-word;font:400 13px/19px var(--font-body);color:var(--vino-900)}
.od-note,.od-fallback{margin-top:14px;font-size:13.5px;line-height:20px;color:var(--vino-600)}
.od-note b{color:var(--vino-900)}
.od-fallback{padding:10px 14px;border-radius:var(--radius-sm);background:var(--rosa-rubor);color:var(--rosa-profundo)}
.od-foot{position:relative;display:flex;gap:10px;padding:16px 24px calc(18px + env(safe-area-inset-bottom));border-top:1px solid var(--rosa-pastel);background:rgba(255,255,255,.85)}
.od-foot .btn{flex:1;justify-content:center}
.od-foot .wa-btn{flex:1.4;padding-right:18px}
.od-done{align-items:center;text-align:center;padding:4px 24px 0;overflow:auto}
.od-done svg{width:120px;height:110px}
.od-done h3{margin-top:10px;font:600 26px/1.15 var(--font-display);color:var(--vino-900)}
.od-done h3 em{font-family:var(--font-accent);font-style:italic;font-weight:400;color:var(--brand-rosa)}
.od-done > p{margin-top:8px;max-width:420px;font-size:15px;line-height:22px;color:var(--vino-600)}
.od-next{margin:16px 0 0;padding:14px 18px 14px 34px;border-radius:var(--radius-md);background:#fff;text-align:left;display:grid;gap:6px;font-size:14px;line-height:20px;color:var(--vino-600)}
.od-next li::marker{color:var(--brand-rosa)}
.od-foot-done{width:calc(100% + 48px);margin:18px -24px 0}
.od-link{margin:4px 0 18px;padding:8px;font:600 14px/18px var(--font-body);color:var(--rosa-profundo);text-decoration:underline;text-underline-offset:3px}
.od-x:focus-visible,.od-link:focus-visible{outline:3px solid rgba(239,68,121,.45);outline-offset:2px}
@media (max-width:640px){
  .od{width:100vw;max-width:100vw;max-height:100dvh;height:100dvh;margin:0;border-radius:0}  /* anula el max-width por defecto de <dialog> */
  .od-in{max-height:100dvh;height:100%}
  .od-head h2{font-size:24px}
  .od-foot{flex-direction:column-reverse}
  .od-foot .btn,.od-foot .wa-btn{flex:none;width:100%}
  .od-info{grid-template-columns:1fr}
  .wa-btn{font-size:16px}
}
@media (prefers-reduced-motion:reduce){.od[open]{animation:none}.wa-btn,.od-x{transition:none}}