/* ==========================================================================
   WELL AID — lo que anaden la ficha de producto, el carrito y la confirmacion.
   La paleta, la cabecera, el logotipo y el pie viven en store.css y NO se
   repiten aqui: un verde escrito dos veces es un verde que se queda viejo en
   uno de los dos sitios.
   ========================================================================== */

:root{
  --star-on:  #E8A317;
  --err-bg:   #FBE9E4;
  --err-ink:  #8C3320;
  --starmask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 6.6 7 .8-5.2 4.8 1.4 7L12 17.8 5.8 21.2l1.4-7L2 9.4l7-.8z'/%3E%3C/svg%3E") center/contain no-repeat;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --star-on:#F0BC46; --err-bg:#3A1A12; --err-ink:#F0B8A6; }
}
:root[data-theme="dark"]{ --star-on:#F0BC46; --err-bg:#3A1A12; --err-ink:#F0B8A6; }

/* --- migas ------------------------------------------------------------- */
.crumbs{font-size:13px; color:var(--ink-faint); padding:22px 0 0; display:flex; gap:8px; flex-wrap:wrap}
.crumbs a{text-decoration:none; color:var(--ink-soft)}
.crumbs a:hover{color:var(--green)}
.crumbs i{font-style:normal; opacity:.5}

/* --- estrellas --------------------------------------------------------- */
.stars{display:inline-flex; gap:2px; vertical-align:-2px}
.stars .st{position:relative; width:15px; height:15px; display:inline-block; overflow:hidden;
  background:var(--line); -webkit-mask:var(--starmask); mask:var(--starmask)}
.stars .st i{position:absolute; left:0; top:0; bottom:0; background:var(--star-on); display:block}
.rate{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-soft)}
.rate small{color:var(--ink-faint); text-decoration:underline; text-underline-offset:2px}

/* --- el estante, con foto real ----------------------------------------- */
.prod .shot{overflow:hidden; text-decoration:none}
.prod .shot > img{position:absolute; inset:12%; width:auto; height:auto;
  max-width:76%; max-height:76%; margin:auto; object-fit:contain; transition:transform .3s}
/* Mismo cuento que la galeria: el marco es cuadrado y la foto es alta, asi que
   se ata a los cuatro lados en vez de darle un ancho. */
.prod:hover .shot > img{transform:scale(1.05)}
.prod .shot .flag{position:absolute; left:12px; top:12px}
.prod h3 a{text-decoration:none}
.prod h3 a:hover{color:var(--green)}
.prod .add.done{background:var(--green); color:var(--on-green); border-color:var(--green)}

/* --- ficha de producto -------------------------------------------------- */
.pdp{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:52px; padding:26px 0 10px}
@media (max-width:960px){ .pdp{grid-template-columns:1fr; gap:30px} }

.gallery{position:sticky; top:92px; align-self:start}
@media (max-width:960px){ .gallery{position:static} }
.gallery .main{border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  aspect-ratio:1/1; display:grid; place-items:center; padding:26px; position:relative; overflow:hidden}
.gallery .main img{position:absolute; inset:26px; width:auto; height:auto;
  max-width:calc(100% - 52px); max-height:calc(100% - 52px); margin:auto; object-fit:contain;
  transition:transform .35s}
/* ⚠️ La foto del bote mide 742x1300 y el marco es cuadrado: ni `max-height:100%`
   ni `height:100%` la encogen, porque un porcentaje de alto dentro de una
   rejilla cuyo alto lo pone `aspect-ratio` no resuelve y se queda en `auto` —
   el bote salia recortado y parecia un zoom. Se saca del flujo y se ata a los
   cuatro lados, que si son medidas de verdad. */
.gallery .main:hover img{transform:scale(1.07)}
.gallery .main .flag{position:absolute; left:16px; top:16px}
.gallery .thumbs{display:flex; gap:12px; margin-top:14px}
.gallery .thumbs button{width:84px; height:84px; border-radius:10px; border:1px solid var(--line);
  background:var(--surface); padding:9px; cursor:pointer; display:grid; place-items:center;
  overflow:hidden}
.gallery .thumbs button.on{border-color:var(--green); box-shadow:0 0 0 3px var(--sage-wash)}
.gallery .thumbs img{width:auto; height:auto; max-width:100%; max-height:100%; object-fit:contain}

.pdp h1{font-family:var(--display); font-weight:600; letter-spacing:.005em;
  font-size:clamp(23px,2.6vw,30px); line-height:1.25; margin:6px 0 12px}
.brandline{display:flex; align-items:center; gap:10px; font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--herb); font-weight:500}
.pricebox{display:flex; align-items:baseline; gap:12px; margin:18px 0 3px; flex-wrap:wrap}
.pricebox .big{font-family:var(--display); font-size:34px; font-weight:600; letter-spacing:.01em}
.pricebox .per{font-size:14px; color:var(--ink-soft)}
.pdp .when{font-size:13px; color:var(--ink-faint); margin:0 0 18px}

.flag{background:var(--green); color:var(--on-green); font-size:11.5px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; border-radius:999px; padding:5px 12px; display:inline-block}
.offer{border:1px dashed var(--line); border-radius:12px; padding:14px 16px; margin-bottom:12px; background:var(--paper)}
.offer b{font-size:15px; font-weight:500}
.offer p{margin:5px 0 0; font-size:13px; color:var(--ink-soft)}
.offer a{color:var(--green); text-decoration:underline; text-underline-offset:2px}
.offer code{font-family:var(--ui); font-weight:500; letter-spacing:.06em; color:var(--green-dark);
  background:var(--sage-wash); border-radius:5px; padding:1px 7px}
.rewards{display:flex; gap:14px; align-items:center; background:var(--sage-wash); border-radius:12px;
  padding:14px 16px; margin:6px 0 24px; font-size:13.5px; color:var(--ink-soft)}
.rewards .r{width:38px; height:38px; border-radius:50%; background:var(--paper); flex:none;
  display:grid; place-items:center; font-family:var(--display); font-weight:600; color:var(--green)}
.rewards a{color:var(--green); text-decoration:underline; text-underline-offset:2px}

/* las tres puertas, aqui como opciones que se eligen */
.fulfil{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin:6px 0 22px}
.fulfil h4{margin:0; padding:12px 18px; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-faint); background:var(--surface); border-bottom:1px solid var(--line-soft); font-weight:500}
.opt{display:flex; gap:14px; padding:16px 18px; border-bottom:1px solid var(--line-soft); cursor:pointer}
.opt:last-child{border-bottom:0}
.opt:hover{background:var(--surface)}
.opt input{margin:3px 0 0; accent-color:var(--green); width:17px; height:17px; flex:none}
.opt .ic{width:20px; flex:none; margin-top:1px}
.opt .ic svg{width:20px; height:20px; stroke:var(--green); fill:none; stroke-width:1.5}
.opt .t{flex:1; min-width:0}
.opt .t b{display:block; font-weight:500; font-size:15px}
.opt .t small{display:block; color:var(--ink-soft); font-size:13px; margin-top:3px; font-weight:300}
.opt .t .stock{color:var(--green-dark); font-size:13px; margin-top:5px; display:flex; align-items:center; gap:6px}
.opt .t .stock svg{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2.2; flex:none}
.opt .cost{font-size:14px; color:var(--ink-soft); white-space:nowrap; font-variant-numeric:tabular-nums}

.buyrow{display:flex; gap:12px; align-items:stretch; flex-wrap:wrap}
.qty{display:flex; align-items:center; border:1px solid var(--line); border-radius:999px; background:var(--paper)}
.qty button{width:42px; height:46px; border:0; background:none; color:var(--ink-soft);
  font-size:19px; cursor:pointer; border-radius:999px; font-family:var(--ui)}
.qty button:hover{color:var(--green)}
.qty span{min-width:26px; text-align:center; font-variant-numeric:tabular-nums; font-size:15px}
.line .qty{width:max-content}
.qty.sm button{width:32px; height:34px; font-size:16px}
.qty.sm span{font-size:14px; min-width:22px}
.buyrow .btn{flex:1 1 210px; justify-content:center; padding:14px 26px}
.btn.done{background:var(--green-dark)}
.linky{background:none; border:0; padding:0; margin-top:16px; cursor:pointer; color:var(--ink-soft);
  font-family:var(--ui); font-size:13.5px; display:inline-flex; align-items:center; gap:8px}
.linky:hover{color:var(--green)}
.linky svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.6}
.assure{display:flex; gap:22px; flex-wrap:wrap; margin-top:22px; padding-top:20px; border-top:1px solid var(--line-soft)}
.assure div{display:flex; gap:9px; align-items:center; font-size:13px; color:var(--ink-soft)}
.assure svg{width:17px; height:17px; stroke:var(--green); fill:none; stroke-width:1.5; flex:none}

/* pestanas */
.tabs{border-top:1px solid var(--line); margin-top:14px}
.tabbar{display:flex; gap:28px; overflow-x:auto; border-bottom:1px solid var(--line-soft)}
.tabbar button{background:none; border:0; padding:18px 2px; cursor:pointer; white-space:nowrap;
  font-family:var(--ui); font-size:14.5px; color:var(--ink-soft);
  border-bottom:2px solid transparent; margin-bottom:-1px}
.tabbar button.on{color:var(--green-dark); border-bottom-color:var(--green); font-weight:500}
.tabbody{padding:28px 0 10px; max-width:760px}
.tabbody p{margin:0 0 14px; color:var(--ink-soft); font-weight:300; font-size:15px}
.tabbody ul{margin:0 0 14px; padding-left:20px; color:var(--ink-soft); font-weight:300; font-size:15px}
.tabbody li{margin-bottom:7px}
.tabbody h4{font-family:var(--display); font-size:17px; margin:0 0 10px; font-weight:600; color:var(--ink)}
table.facts{width:100%; border-collapse:collapse; font-size:14.5px; max-width:580px}
table.facts td{padding:11px 0; border-bottom:1px solid var(--line-soft); vertical-align:top}
table.facts td:first-child{color:var(--ink-soft); font-weight:300; width:52%}
table.facts td:last-child{text-align:right}
.fineprint{font-size:12.5px; color:var(--ink-faint); font-weight:300; line-height:1.65}

/* --- carrito ------------------------------------------------------------ */
.checkout{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:44px; padding:20px 0 0}
@media (max-width:960px){ .checkout{grid-template-columns:1fr; gap:28px} }
.lines{border-top:1px solid var(--line)}
.line{display:grid; grid-template-columns:96px 1fr auto; gap:18px; padding:22px 0; border-bottom:1px solid var(--line-soft)}
@media (max-width:560px){ .line{grid-template-columns:72px 1fr; } .line .right{grid-column:2; align-items:flex-start} }
.line .pic{width:96px; height:96px; border:1px solid var(--line); border-radius:10px;
  background:var(--surface); display:grid; place-items:center; padding:8px}
@media (max-width:560px){ .line .pic{width:72px; height:72px} }
.line .pic img{width:100%; height:100%; object-fit:contain}
.line h3{margin:0 0 4px; font-size:15.5px; font-weight:500; line-height:1.4}
.line h3 a{text-decoration:none}
.line h3 a:hover{color:var(--green)}
.line .meta{font-size:13px; color:var(--ink-faint); margin-bottom:12px}
.line .right{text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:6px}
.line .amt{font-family:var(--display); font-size:17px; font-weight:600; font-variant-numeric:tabular-nums}
.line .was{font-size:13px; color:var(--ink-faint); text-decoration:line-through}
.line .saved{color:var(--green-dark); font-size:12.5px}
.line .drop{background:none; border:0; color:var(--ink-faint); cursor:pointer; font-size:13px;
  font-family:var(--ui); padding:0}
.line .drop:hover{color:var(--bark)}

.summary{position:sticky; top:92px; align-self:start; border:1px solid var(--line);
  border-radius:var(--r); padding:24px; background:var(--surface)}
@media (max-width:960px){ .summary{position:static} }
.summary h3{font-family:var(--display); font-size:19px; margin:0 0 10px; font-weight:600}
.sumrow{display:flex; justify-content:space-between; gap:16px; padding:9px 0; font-size:14.5px; color:var(--ink-soft)}
.sumrow b{color:var(--ink); font-weight:500; font-variant-numeric:tabular-nums; white-space:nowrap}
.sumrow.good b{color:var(--green-dark)}
.sumrow small{display:block; font-size:11.5px; color:var(--ink-faint); font-weight:300; margin-top:3px}
.sumtot{display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  border-top:1px solid var(--line); margin-top:10px; padding-top:16px}
.sumtot span{font-size:15px}
.sumtot b{font-family:var(--display); font-size:27px; font-weight:600; font-variant-numeric:tabular-nums}
.nudge{background:var(--sage-wash); border-radius:10px; padding:11px 14px; font-size:13px;
  color:var(--green-dark); margin:14px 0 0}
/* La caja va en la columna ANCHA, debajo de los articulos, y el resumen se queda
   pegado a la derecha: el formulario de Stripe es alto y, colgado del resumen,
   dejaba media pagina en blanco a la izquierda. Tope de ancho porque un
   formulario de pago de 700 px se lee peor, no mejor. */
.paybox{margin-top:34px; max-width:620px; padding-top:30px; border-top:1px solid var(--line)}
.paybox .head{display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--ink-faint); margin-bottom:14px}
.paybox .head svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.7; flex:none}
.paybox .head .line-r{flex:1; height:1px; background:var(--line-soft)}
#pay-mount{min-height:4px}
.skel{height:220px; border-radius:10px; background:linear-gradient(100deg,var(--surface) 30%,var(--sage-wash) 50%,var(--surface) 70%);
  background-size:280% 100%; animation:sk 1.4s linear infinite}
@keyframes sk{to{background-position:-180% 0}}
.empty-cart{text-align:center; padding:70px 20px; border:1px dashed var(--line); border-radius:var(--r)}
.empty-cart p{color:var(--ink-soft); font-weight:300; margin:10px 0 22px}
.err{background:var(--err-bg); color:var(--err-ink); border-radius:10px; padding:12px 14px;
  font-size:13.5px; margin-top:14px}

/* --- confirmacion ------------------------------------------------------- */
.done-card{max-width:660px; margin:0 auto; padding:56px 0 20px}
.done-card .top{text-align:center}
.done-card .tick{width:66px; height:66px; border-radius:50%; background:var(--sage-wash);
  margin:0 auto 22px; display:grid; place-items:center}
.done-card .tick svg{width:30px; height:30px; stroke:var(--green); fill:none; stroke-width:2.2}
.done-card h1{font-family:var(--display); font-size:clamp(26px,3.4vw,36px); margin:0 0 10px; font-weight:600}
.done-card .top > p{color:var(--ink-soft); font-weight:300; margin:0 0 30px}
.receipt{border:1px solid var(--line); border-radius:var(--r); padding:24px; background:var(--surface)}
.receipt h4{font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint);
  margin:0 0 12px; font-weight:500}
.receipt .r{display:flex; justify-content:space-between; gap:16px; padding:9px 0; font-size:14.5px; color:var(--ink-soft)}
.receipt .r b{color:var(--ink); font-weight:500; font-variant-numeric:tabular-nums; white-space:nowrap}
.receipt .tot{border-top:1px solid var(--line); margin-top:10px; padding-top:14px}
.receipt .tot b{font-family:var(--display); font-size:20px}