/* =========================================================
   SkinScience — E-commerce layer (cart drawer, search drawer,
   /carrito, /checkout). Reuses the design tokens from index.html
   ========================================================= */

/* ---------- overlay (shared by drawers) ---------- */
.ss-overlay{
  position:fixed; inset:0; z-index:990;
  background:rgba(18,18,18,0.0);
  backdrop-filter:blur(0px);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .45s var(--ease), background .45s var(--ease), backdrop-filter .45s var(--ease), visibility 0s linear .45s;
}
.ss-overlay.open{
  opacity:1; visibility:visible; pointer-events:auto;
  background:rgba(18,18,18,0.45);
  backdrop-filter:blur(2px);
  transition:opacity .45s var(--ease), background .45s var(--ease), backdrop-filter .45s var(--ease), visibility 0s linear 0s;
}

/* ---------- drawer shell (cart + search) ---------- */
.ss-drawer{
  position:fixed; top:0; right:0; height:100dvh; z-index:995;
  width:460px; max-width:92vw;
  background:var(--white);
  /*box-shadow:-30px 0 70px -25px rgba(18,18,18,0.35);*/
  transform:translateX(100%);
  transition:transform .55s var(--ease);
  display:flex; flex-direction:column;
}
.ss-drawer.open{ transform:translateX(0); }
.ss-drawer *{ box-sizing:border-box; }

.ss-drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 24px; border-bottom:1px solid var(--line); flex:0 0 auto;
}
.ss-drawer-head h3{
  font-family:var(--display); font-size:19px; font-weight:700; color:var(--ink);
  display:flex; align-items:center; gap:8px;
}
.ss-drawer-head .ss-count{
  font-family:var(--mono); font-size:12px; color:var(--teal-dark);
  background:rgba(47,167,154,0.12); padding:2px 8px; border-radius:20px;
}
.ss-close{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:transparent; transition:background .25s var(--ease), transform .35s var(--ease);
  color:var(--ink);
}
.ss-close:hover{ background:rgba(18,18,18,0.06); transform:rotate(90deg); }
.ss-close svg{ width:18px; height:18px; }

/* ---------- free shipping progress ---------- */
.ss-shipbar{ padding:16px 24px 18px; border-bottom:1px solid var(--line); flex:0 0 auto; }
.ss-shipbar p{
  font-size:13px; color:var(--ink); margin-bottom:10px; line-height:1.4;
}
.ss-shipbar p strong{ color:var(--teal-dark); }
.ss-shipbar p .ok{ color:var(--teal-dark); font-weight:700; }
.ss-shiptrack{
  height:7px; border-radius:20px; background:var(--foam); overflow:hidden; position:relative;
  border:1px solid var(--line);
}
.ss-shipfill{
  height:100%; border-radius:20px; width:0%;
  background:linear-gradient(90deg,var(--teal),var(--teal-dark));
  transition:width .6s var(--ease);
  position:relative;
}
.ss-shipfill.full{ background:linear-gradient(90deg,var(--teal-dark),#1c6a61); }
.ss-shipicons{ display:flex; justify-content:space-between; margin-top:6px; font-family:var(--mono); font-size:10px; color:rgba(18,18,18,0.4); }

/* ---------- cart body / items ---------- */
.ss-drawer-body{ flex:1 1 auto; overflow-y:auto; padding:6px 24px; }
.ss-drawer-body::-webkit-scrollbar{ width:6px; }
.ss-drawer-body::-webkit-scrollbar-thumb{ background:var(--line); border-radius:10px; }

.ss-item{
  display:grid; grid-template-columns:74px 1fr auto; gap:14px;
  padding:18px 0; border-bottom:1px solid var(--line);
  animation:ssItemIn .45s var(--ease);
}
@keyframes ssItemIn{ from{opacity:0; transform:translateX(18px);} to{opacity:1; transform:translateX(0);} }
.ss-item.removing{
  animation:ssItemOut .35s var(--ease) forwards;
}
@keyframes ssItemOut{ to{opacity:0; transform:translateX(30px) scale(.96); max-height:0; padding:0; margin:0; border:0;} }

.ss-item-media{
  width:74px; height:88px; border-radius:12px; background:var(--foam);
  display:flex; align-items:center; justify-content:center; overflow:hidden; flex:0 0 auto;
}
.ss-item-media svg{ height:74px; width:auto; }
.ss-item-info{ min-width:0; display:flex; flex-direction:column; gap:4px; }
.ss-item-cat{ font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--teal-dark); }
.ss-item-name{ font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.3; }
.ss-item-size{ font-size:12px; color:rgba(18,18,18,0.5); }
.ss-item-price{ font-family:var(--mono); font-size:13px; color:var(--science); margin-top:2px; }
.ss-item-price .ss-old{ text-decoration:line-through; color:rgba(18,18,18,0.35); margin-right:6px; }

.ss-item-side{ display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; }
.ss-remove{
  color:rgba(18,18,18,0.35); transition:color .2s, transform .2s;
}
.ss-remove:hover{ color:#C6494A; transform:scale(1.1); }
.ss-remove svg{ width:16px; height:16px; }

.ss-stepper{
  display:flex; align-items:center; border:1px solid var(--line); border-radius:30px; overflow:hidden;
}
.ss-stepper button{
  width:28px; height:28px; display:flex; align-items:center; justify-content:center;
  font-size:15px; color:var(--science); transition:background .2s, transform .12s;
}
.ss-stepper button:disabled{ opacity:.35; cursor:not-allowed; }
.ss-stepper button:hover{ background:var(--foam); }
.ss-stepper button:active{ transform:scale(.85); }
.ss-stepper span{
  min-width:26px; text-align:center; font-family:var(--mono); font-size:13px; font-weight:600;
}

.ss-empty{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:60px 20px; gap:16px;
}
.ss-empty svg{ width:64px; height:64px; color:var(--mist); }
.ss-empty h4{ font-family:var(--display); font-size:18px; color:var(--ink); }
.ss-empty p{ font-size:13.5px; color:rgba(18,18,18,0.55); max-width:260px; }

/* ---------- recommended strip ---------- */
.ss-reco{ padding:18px 0 6px; border-top:1px dashed var(--line); margin-top:4px; }
.ss-reco-title{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:rgba(18,18,18,0.5); margin-bottom:12px; }
.ss-reco-row{ display:flex; gap:12px; overflow-x:auto; padding-bottom:6px; }
.ss-reco-row::-webkit-scrollbar{ height:5px; }
.ss-reco-card{
  flex:0 0 128px; background:var(--foam); border-radius:14px; padding:10px; text-align:left; transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.ss-reco-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.ss-reco-view{ display:block; }
.ss-reco-media{ height:74px; display:flex; align-items:center; justify-content:center; margin-bottom:8px; }
.ss-reco-media svg{ height:64px; }
.ss-reco-card .name{ font-size:11.5px; font-weight:600; color:var(--ink); line-height:1.25; display:block; margin-bottom:4px; height:28px; overflow:hidden; }
.ss-reco-card .price{ font-family:var(--mono); font-size:12px; color:var(--science); display:block; margin-bottom:6px; }
.ss-reco-add{
  font-family:var(--mono); font-size:10.5px; color:var(--teal-dark); border:1px solid var(--teal-dark); border-radius:20px;
  padding:4px 0; width:100%; text-align:center; transition:background .25s var(--ease), color .25s var(--ease);
}
.ss-reco-add:hover{ background:var(--teal-dark); color:#fff; }

/* ---------- favoritos (wishlist drawer) ---------- */
.ss-wish-add{
  font-family:var(--mono); font-size:10.5px; color:var(--teal-dark); border:1px solid var(--teal-dark); border-radius:20px;
  padding:6px 14px; white-space:nowrap; transition:background .25s var(--ease), color .25s var(--ease);
}
.ss-wish-add:hover{ background:var(--teal-dark); color:#fff; }
.ss-wish-add:disabled{ opacity:.4; pointer-events:none; }

/* ---------- coupon ---------- */
.ss-coupon{ padding:16px 0; border-top:1px solid var(--line); margin-top:6px; }
.ss-coupon-row{ display:flex; gap:8px; }
.ss-coupon input{
  flex:1; border:1px solid var(--line); border-radius:10px; padding:11px 14px;
  font-family:var(--body); font-size:13.5px; background:var(--foam); color:var(--ink);
  transition:border-color .25s, box-shadow .25s;
}
.ss-coupon input:focus{ outline:none; border-color:var(--science); box-shadow:0 0 0 3px rgba(236,85,152,0.12); }
.ss-coupon-apply{
  font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.02em;
  background:var(--ink); color:#fff; border-radius:10px; padding:0 18px;
  transition:background .25s var(--ease), transform .15s;
}
.ss-coupon-apply:hover{ background:var(--science); }
.ss-coupon-apply:active{ transform:scale(.96); }
.ss-coupon-msg{ font-size:12px; margin-top:8px; min-height:14px; }
.ss-coupon-msg.err{ color:#C6494A; }
.ss-coupon-msg.ok{ color:var(--teal-dark); }
.ss-coupon-chip{
  display:none; align-items:center; gap:8px; margin-top:10px;
  background:rgba(47,167,154,0.12); color:var(--teal-dark); font-family:var(--mono); font-size:12px;
  padding:7px 12px; border-radius:20px; width:fit-content;
}
.ss-coupon-chip.show{ display:flex; animation:ssItemIn .4s var(--ease); }
.ss-coupon-chip button{ color:var(--teal-dark); display:flex; }
.ss-coupon-chip button svg{ width:12px; height:12px; }

/* ---------- footer / totals ---------- */
.ss-drawer-foot{ flex:0 0 auto; padding:18px 24px 24px; border-top:1px solid var(--line); background:var(--white); }
.ss-totals-row{ display:flex; justify-content:space-between; font-size:13.5px; color:rgba(18,18,18,0.65); margin-bottom:8px; }
.ss-totals-row.grand{ font-size:16px; font-weight:700; color:var(--ink); margin:12px 0 16px; }
.ss-totals-row.grand span:last-child{ font-family:var(--mono); }
.ss-totals-row .discount{ color:var(--teal-dark); }
.ss-checkout-btn{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  background:var(--ink); color:#fff; padding:16px; border-radius:14px;
  font-weight:600; font-size:14.5px; letter-spacing:.01em;
  transition:background .3s var(--ease), transform .2s var(--ease), box-shadow .3s var(--ease);
}
.ss-checkout-btn:hover{ background:var(--science); box-shadow:0 14px 30px -12px rgba(236,85,152,0.55); transform:translateY(-2px); }
.ss-checkout-btn:active{ transform:translateY(0) scale(.98); }
.ss-checkout-btn svg{ width:16px; height:16px; transition:transform .3s var(--ease); }
.ss-checkout-btn:hover svg{ transform:translateX(4px); }
.ss-continue{
  display:block; text-align:center; margin-top:12px; font-size:12.5px; color:rgba(18,18,18,0.55);
  text-decoration:underline; text-underline-offset:3px; transition:color .2s;
}
.ss-continue:hover{ color:var(--science); }
.ss-trust{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:16px; opacity:.55; }
.ss-trust svg{ height:16px; width:auto; color:var(--ink); }

/* ---------- search drawer specifics ---------- */
.ss-search-input-wrap{ padding:18px 24px; border-bottom:1px solid var(--line); position:relative; }
.ss-search-input-wrap svg.mag{
  position:absolute; left:38px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:rgba(18,18,18,0.4);
  z-index:2; pointer-events:none;
}
#cdSearchInput{
  width:100%; border:1px solid var(--line); background:var(--foam); border-radius:12px;
  padding:14px 44px 14px 42px; font-family:var(--body); font-size:15px; color:var(--ink);
  transition:border-color .25s, box-shadow .25s;
}
#cdSearchInput:focus{ outline:none; border-color:var(--science); box-shadow:0 0 0 3px rgba(236,85,152,0.12); background:#fff; }
.ss-search-clear{
  position:absolute; right:38px; top:50%; transform:translateY(-50%); color:rgba(18,18,18,0.4);
  width:26px; height:26px; display:flex; align-items:center; justify-content:center; border-radius:50%;
  opacity:0; pointer-events:none; transition:opacity .2s;
}
.ss-search-clear.show{ opacity:1; pointer-events:auto; }
.ss-search-clear:hover{ background:var(--line); }
.ss-search-clear svg{ width:13px; height:13px; }

.ss-search-section{ padding:20px 24px 4px; }
.ss-search-label{ font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:rgba(18,18,18,0.45); margin-bottom:12px; display:flex; justify-content:space-between; align-items:center; }
.ss-search-label button{ font-family:var(--mono); font-size:10.5px; color:var(--science); text-decoration:underline; }
.ss-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.ss-tag{
  font-size:12.5px; padding:8px 14px; border-radius:20px; background:var(--foam); color:var(--ink);
  border:1px solid var(--line); transition:all .25s var(--ease);
}
.ss-tag:hover{ background:var(--science); color:#fff; border-color:var(--science); transform:translateY(-2px); }

.ss-recent-row{ display:flex; flex-direction:column; gap:2px; }
.ss-recent-item{
  display:flex; align-items:center; justify-content:space-between; padding:10px 4px; border-radius:8px;
  transition:background .2s;
}
.ss-recent-item:hover{ background:var(--foam); }
.ss-recent-item span{ display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--ink); }
.ss-recent-item svg.clock{ width:14px; height:14px; color:rgba(18,18,18,0.35); }
.ss-recent-item button svg{ width:13px; height:13px; color:rgba(18,18,18,0.3); }

.ss-results-list{ padding:4px 24px 24px; }
.ss-result{
  display:grid; grid-template-columns:56px 1fr auto; gap:14px; align-items:center;
  padding:12px 8px; border-radius:12px; transition:background .2s;
}
.ss-result:hover{ background:var(--foam); }
.ss-result-media{ width:56px; height:64px; border-radius:10px; background:var(--foam); display:flex; align-items:center; justify-content:center; }
.ss-result-media svg{ height:52px; }
.ss-result-name{ font-size:13.5px; font-weight:600; color:var(--ink); }
.ss-result-cat{ font-size:11.5px; color:rgba(18,18,18,0.5); }
.ss-result-price{ font-family:var(--mono); font-size:13px; color:var(--science); }
.ss-noresults{ padding:50px 24px; text-align:center; color:rgba(18,18,18,0.5); font-size:13.5px; }
.ss-search-viewall{
  display:block; text-align:center; margin:6px 24px 20px; padding:13px; border-radius:12px;
  border:1px solid var(--line); font-size:13px; font-weight:600; color:var(--ink); transition:all .25s var(--ease);
}
.ss-search-viewall:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* ---------- toast ---------- */
.ss-toast{
  position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(20px); z-index:1200;
  background:var(--ink); color:#fff; padding:14px 22px; border-radius:14px; font-size:13.5px;
  display:flex; align-items:center; gap:10px; box-shadow:0 20px 40px -15px rgba(18,18,18,0.5);
  opacity:0; pointer-events:none; transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.ss-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.ss-toast svg{ width:16px; height:16px; color:var(--teal); flex:0 0 auto; }

/* ---------- cart badge bump ---------- */
@keyframes ssBump{ 0%{transform:scale(1);} 35%{transform:scale(1.35);} 100%{transform:scale(1);} }
.ss-bump{ animation:ssBump .45s var(--ease); }

/* ================= /carrito full page ================= */
.cart-page{ background:var(--foam); min-height:70vh; padding:52px 0 90px; }
.cart-page-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:34px; flex-wrap:wrap; gap:14px; }
.cart-page-head h1{ font-family:var(--display); font-size:clamp(28px,4vw,40px); color:var(--ink); }
.cart-page-head a{ font-size:13.5px; color:var(--science); display:flex; align-items:center; gap:6px; }
.cart-page-head a svg{ width:15px; height:15px; }
.cart-grid{ display:grid; grid-template-columns:1fr 380px; gap:40px; align-items:flex-start; }
@media(max-width:900px){ .cart-grid{ grid-template-columns:1fr; } }
.cart-panel{ background:#fff; border-radius:20px; box-shadow:var(--shadow); padding:8px 28px; }
.cart-panel .ss-item{ grid-template-columns:96px 1fr auto; }
.cart-panel .ss-item-media{ width:96px; height:112px; }
.cart-panel .ss-item-media svg{ height:96px; }
.cart-summary{ background:#fff; border-radius:20px; box-shadow:var(--shadow); padding:26px 26px 28px; position:sticky; top:100px; }
.cart-summary h3{ font-family:var(--display); font-size:18px; margin-bottom:16px; color:var(--ink); }
.cart-empty-page{ background:#fff; border-radius:20px; box-shadow:var(--shadow); padding:70px 30px; text-align:center; }
.cart-empty-page svg{ width:74px; height:74px; color:var(--mist); margin:0 auto 20px; }
.cart-empty-page h2{ font-family:var(--display); font-size:24px; margin-bottom:10px; }
.cart-empty-page p{ color:rgba(18,18,18,.6); margin-bottom:26px; }

/* ================= /checkout ================= */
.checkout-header{
  border-bottom:1px solid var(--line); background:#fff; padding:18px 0;
}
.checkout-header .wrap{ display:flex; align-items:center; justify-content:space-between; }
.checkout-header .logo svg{ height:30px; }
.checkout-header .logo-text{ font-size:18px; }
.checkout-secure{ display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11.5px; color:rgba(18,18,18,0.55); }
.checkout-secure svg{ width:15px; height:15px; color:var(--teal-dark); }

.checkout-steps{ background:var(--foam); border-bottom:1px solid var(--line); }
.checkout-steps .wrap{ display:flex; align-items:center; gap:8px; padding:14px 0; font-family:var(--mono); font-size:11.5px; color:rgba(18,18,18,0.4); overflow-x:auto; white-space:nowrap; }
.checkout-steps .step.active{ color:var(--science); font-weight:700; }
.checkout-steps .step.done{ color:var(--teal-dark); }
.checkout-steps .sep{ opacity:.4; }

.checkout-main{ background:var(--foam); padding:44px 0 100px; }
/* AGREGA esto en su lugar */
.checkout-grid{
  display:flex; flex-wrap:wrap; gap:48px; align-items:flex-start;
}
.co-form-col{
  flex:1 1 480px; min-width:0;
  order:1; /* desktop: formulario a la izquierda */
}
.co-summary{
  flex:0 0 420px;
  order:2; /* desktop: resumen a la derecha */
  position:sticky; top:24px;
}

@media(max-width:980px){
  .checkout-grid{ flex-direction:column; }
  .co-summary{ order:1; flex-basis:auto; } /* mobile: resumen primero (bajo el toggle) */
  .co-form-col{ order:2; flex-basis:auto; }
  .co-summary{ display:none; position:static; }
  .co-summary.open{ display:block; margin-bottom:18px; }
}


.co-card{ background:#fff; border-radius:18px; box-shadow:var(--shadow); padding:26px 28px; margin-bottom:22px; }
.co-card h2{ font-family:var(--display); font-size:18px; color:var(--ink); display:flex; align-items:center; gap:10px; margin-bottom:4px; }
.co-card h2 .num{
  width:26px; height:26px; border-radius:50%; background:var(--ink); color:#fff; font-family:var(--mono); font-size:12px;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.co-card > p.sub{ font-size:12.5px; color:rgba(18,18,18,0.5); margin:4px 0 18px 36px; }

/* login accordion */
.co-login-toggle{
  display:flex; justify-content:space-between; align-items:center; cursor:pointer;
  background:var(--foam); border:1px solid var(--line); border-radius:12px; padding:14px 16px;
  margin:14px 0 0; font-size:13.5px; color:var(--ink);
}
.co-login-toggle strong{ font-weight:600; }
.co-login-toggle .chev{ width:9px; height:9px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:rotate(45deg); transition:transform .3s var(--ease); }
.co-login-toggle.open .chev{ transform:rotate(225deg); }
.co-login-panel{
  max-height:0; overflow:hidden; transition:max-height .45s var(--ease), padding .45s var(--ease), margin .45s var(--ease);
  border:1px solid transparent; border-radius:12px;
}
.co-login-panel.open{ max-height:260px; padding:18px 4px 4px; margin-bottom:6px; }
.co-login-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.co-login-actions{ display:flex; align-items:center; justify-content:space-between; margin-top:14px; }
.co-login-actions a{ font-size:12px; color:var(--science); text-decoration:underline; }
.co-login-submit{
  background:var(--science); color:#fff; padding:11px 22px; border-radius:10px; font-size:13px; font-weight:600;
  transition:background .25s;
}
.co-login-submit:hover{ background:var(--science-2); }

.co-field{ margin-bottom:14px; }
.co-field label{ display:block; font-size:12px; color:rgba(18,18,18,0.6); margin-bottom:6px; font-weight:600; letter-spacing:.01em; }
.co-field input,.co-field select{
  width:100%; border:1px solid var(--line); border-radius:10px; padding:13px 14px;
  font-family:var(--body); font-size:14px; color:var(--ink); background:#fff;
  transition:border-color .25s, box-shadow .25s;
}
.co-field input:focus,.co-field select:focus{ outline:none; border-color:var(--science); box-shadow:0 0 0 3px rgba(236,85,152,0.12); }
.co-field.error input,.co-field.error select{ border-color:#C6494A; box-shadow:0 0 0 3px rgba(198,73,74,0.1); }
.co-field .err-msg{ display:none; font-size:11.5px; color:#C6494A; margin-top:5px; }
.co-field.error .err-msg{ display:block; }
.co-row2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.co-row3{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:12px; }
@media(max-width:520px){ .co-row2,.co-row3{ grid-template-columns:1fr; } }
.co-check{ display:flex; align-items:flex-start; gap:10px; font-size:13px; color:rgba(18,18,18,0.7); margin-top:6px; margin-bottom:10px }
.co-check input{ margin-top:3px; accent-color:var(--science); width:15px; height:15px; }

/* ---------- account drawer (login / registro) ---------- */
.ss-acc-tabs{ display:flex; gap:8px; margin:20px 24px 18px; }
.ss-acc-tab{
  flex:1; padding:11px; border-radius:10px; border:1.5px solid var(--line); font-size:13px; font-weight:600;
  color:rgba(18,18,18,0.55); transition:all .2s var(--ease); background:#fff;
}
.ss-acc-tab.active{ border-color:var(--science); background:rgba(236,85,152,0.06); color:var(--science); }
.ss-acc-panel{ padding:0 24px 24px; }
.ss-account-submit{
  width:100%; padding:14px; border-radius:12px; background:var(--ink); color:#fff; font-weight:700; font-size:14px;
  margin-top:4px; transition:background .25s;
}
.ss-account-submit:hover{ background:var(--science); }
.ss-account-submit:disabled{ opacity:.6; cursor:default; }
.ss-acc-forgot{ display:block; margin:14px auto 0; font-size:12.5px; color:var(--science); text-decoration:underline; text-align:center; }
.ss-acc-err{ display:none; font-size:12.5px; color:#C6494A; margin:-4px 0 12px; line-height:1.5; }
.ss-acc-err.show{ display:block; }
.ss-acc-err.ok{ color:var(--teal-dark); }
.ss-acc-welcome{ display:flex; align-items:center; gap:14px; padding:24px; }
.ss-acc-avatar{
  width:52px; height:52px; border-radius:50%; background:var(--science); color:#fff; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:700; font-size:19px;
}
.ss-acc-welcome strong{ display:block; font-size:15px; color:var(--ink); }
.ss-acc-welcome span{ font-size:12.5px; color:rgba(18,18,18,0.55); }
.ss-acc-hero{
  display:flex; align-items:center; gap:14px; margin:0 24px 18px; padding:16px 18px; border-radius:14px;
  background:var(--sand);
}
.ss-acc-hero-icon{
  width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,0.6); flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; color:var(--science-2);
}
.ss-acc-hero-icon svg{ width:20px; height:20px; }
.ss-acc-hero strong{ display:block; font-family:var(--display); font-size:17px; color:var(--ink); }
.ss-acc-hero span{ font-size:12px; color:rgba(18,18,18,0.6); }
.ss-acc-links{ margin:0 24px 18px; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.ss-acc-link{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 16px; font-size:13.5px; font-weight:600; color:var(--ink); background:#fff;
  border-bottom:1px solid var(--line); transition:background .2s;
}
.ss-acc-link:last-child{ border-bottom:none; }
.ss-acc-link svg{ width:16px; height:16px; color:rgba(18,18,18,0.35); }
button.ss-acc-link:hover{ background:var(--foam); }
.ss-acc-link.disabled{ color:rgba(18,18,18,0.45); cursor:default; }
.ss-acc-perks{ padding:4px 24px 22px; display:flex; flex-direction:column; gap:12px; }
.ss-acc-perk-card{ display:flex; gap:14px; padding:16px; border-radius:14px; background:var(--foam); border:1px solid var(--line); }
.ss-acc-perk-icon{
  width:40px; height:40px; border-radius:10px; background:#fff; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center; color:var(--science);
}
.ss-acc-perk-icon svg{ width:19px; height:19px; }
.ss-acc-perk-tag{
  display:inline-block; font-family:var(--mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.05em;
  background:rgba(47,167,154,0.15); color:var(--teal-dark); padding:2px 8px; border-radius:20px; margin-bottom:6px;
}
.ss-acc-perk-body h4{ font-family:var(--display); font-size:14px; margin-bottom:4px; color:var(--ink); }
.ss-acc-perk-body p{ font-size:12px; line-height:1.5; color:rgba(18,18,18,0.6); }
.ss-acc-logout{ width:calc(100% - 48px); margin:0 24px 24px; background:transparent; border:1.5px solid var(--line); color:var(--ink); }
.ss-acc-logout:hover{ background:var(--foam); }
.ss-acc-loading{ display:flex; justify-content:center; padding:60px 0; }
.co-auth-spinner{
  width:34px; height:34px; border-radius:50%;
  border:3px solid var(--line); border-top-color:var(--science);
  animation:ss-spin .8s linear infinite;
}
@keyframes ss-spin{ to{ transform:rotate(360deg); } }

/* ---------- Mis pedidos (dentro del drawer de cuenta) ---------- */
.ss-acc-orders-head{ padding:20px 24px 8px; }
.ss-acc-back{
  display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:var(--ink);
  font-family:var(--display);
}
.ss-acc-back svg{ width:17px; height:17px; color:rgba(18,18,18,0.5); }
.ss-acc-orders-list{ padding:8px 24px 20px; display:flex; flex-direction:column; }
.ss-acc-order-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0; border-bottom:1px solid var(--line);
  cursor:pointer; transition:background .2s;
}
.ss-acc-order-row:hover{ background:var(--foam); }
.ss-acc-order-row:last-child{ border-bottom:none; }
.ss-acc-order-row strong{ display:block; font-size:13.5px; color:var(--ink); }
.ss-acc-order-row > div:first-child span{ font-size:11.5px; color:rgba(18,18,18,0.5); }
.ss-acc-order-side{ display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
.ss-acc-order-status{
  font-family:var(--mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.04em;
  background:var(--foam); color:var(--science); padding:2px 8px; border-radius:20px;
}
.ss-acc-order-total{ font-family:var(--mono); font-size:12.5px; color:var(--ink); font-weight:600; }
.ss-acc-orders-empty{ padding:40px 24px; text-align:center; font-size:13px; color:rgba(18,18,18,0.55); }
.ss-acc-orders-empty a{ display:inline-block; margin-top:10px; color:var(--science); text-decoration:underline; font-weight:600; }

/* ---------- detalle de un pedido ---------- */
.ss-acc-order-detail{ padding:8px 24px 24px; }
.ss-acc-order-detail-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.ss-acc-order-detail-date{ font-size:12px; color:rgba(18,18,18,0.5); }
.ss-acc-order-items{ display:flex; flex-direction:column; gap:12px; margin-bottom:18px; }
.ss-acc-order-item{ display:flex; align-items:center; gap:12px; }
.ss-acc-order-item-media{
  width:48px; height:48px; border-radius:10px; background:var(--foam); flex:0 0 auto; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.ss-acc-order-item-media img{ width:100%; height:100%; object-fit:cover; }
.ss-acc-order-item-empty{ width:100%; height:100%; background:var(--line); }
.ss-acc-order-item-info{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ss-acc-order-item-info .name{ font-size:13px; font-weight:600; color:var(--ink); }
.ss-acc-order-item-info .qty{ font-size:11.5px; color:rgba(18,18,18,0.5); }
.ss-acc-order-item-price{ font-family:var(--mono); font-size:12.5px; color:var(--ink); flex:0 0 auto; }
.ss-acc-order-detail-totals{ border-top:1px dashed var(--line); padding-top:14px; margin-bottom:18px; }
.ss-acc-order-detail-totals .row{ display:flex; justify-content:space-between; font-size:13px; padding:4px 0; color:var(--ink); }
.ss-acc-order-detail-totals .row.discount{ color:var(--teal-dark); }
.ss-acc-order-detail-totals .row.grand{ font-weight:700; font-size:14.5px; border-top:1px solid var(--line); margin-top:6px; padding-top:10px; }
.ss-acc-order-detail-info{ display:flex; flex-direction:column; gap:10px; }
.ss-acc-order-detail-info div{ font-size:12.5px; }
.ss-acc-order-detail-info strong{ display:block; color:var(--ink); margin-bottom:2px; }
.ss-acc-order-detail-info span{ color:rgba(18,18,18,0.6); line-height:1.5; margin-top:2px; }

/* shipping / payment option cards */
.co-option{
  display:flex; align-items:center; gap:14px; border:1.5px solid var(--line); border-radius:12px; padding:14px 16px;
  margin-bottom:10px; cursor:pointer; transition:border-color .25s var(--ease), background .25s var(--ease);
}
.co-option:hover{ border-color:var(--mist); }
.co-option.selected{ border-color:var(--science); background:rgba(236,85,152,0.04); }
.co-option input{ accent-color:var(--science); width:17px; height:17px; flex:0 0 auto; }
.co-option .info{ flex:1; }
.co-option .info .t{ font-size:13.5px; font-weight:600; color:var(--ink); }
.co-option .info .d{ font-size:12px; color:rgba(18,18,18,0.5); }
.co-option .price{ font-family:var(--mono); font-size:13px; color:var(--ink); font-weight:600; }
.co-option .price.free{ color:var(--teal-dark); }
.co-option .icon{ width:32px; height:22px; display:flex; align-items:center; justify-content:center; color:var(--ink); flex:0 0 auto; }
.co-option .icon svg{ width:26px; height:20px; }

.co-payment-panel{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); }
.co-payment-panel.open{ max-height:260px; padding-top:14px; }

.co-place-btn{
  width:100%; background:var(--ink); color:#fff; padding:17px; border-radius:14px; font-size:15px; font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:10px; margin-top:6px;
  transition:background .3s var(--ease), transform .2s, box-shadow .3s var(--ease);
}
.co-place-btn:hover{ background:var(--science); box-shadow:0 16px 34px -14px rgba(236,85,152,0.55); transform:translateY(-2px); }
.co-place-btn svg{ width:16px; height:16px; }
.co-place-note{ text-align:center; font-size:11.5px; color:rgba(18,18,18,0.45); margin-top:12px; }

/* order summary */
.co-summary{ background:#fff; border-radius:18px; box-shadow:var(--shadow); padding:26px 26px 8px; position:sticky; top:24px; }
.co-summary h3{ font-family:var(--display); font-size:17px; margin-bottom:18px; }
.co-summary-item{ display:grid; grid-template-columns:56px 1fr auto; gap:12px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); }
.co-summary-item .media{ width:56px; height:64px; border-radius:10px; background:var(--foam); display:flex; align-items:center; justify-content:center; position:relative; }
.co-summary-item .media svg{ height:52px; }
.co-summary-item .media .q{ position:absolute; top:-6px; right:-6px; background:var(--ink); color:#fff; font-family:var(--mono); font-size:10px; width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.co-summary-item .name{ font-size:12.5px; font-weight:600; color:var(--ink); line-height:1.3; }
.co-summary-item .size{ font-size:11px; color:rgba(18,18,18,0.5); }
.co-summary-item .price{ font-family:var(--mono); font-size:12.5px; color:var(--ink); }
.co-summary-coupon{ padding:16px 0; }
.co-toggle-summary{
  display:none; align-items:center; justify-content:space-between; width:100%; padding:14px 18px; background:#fff;
  border-radius:14px; box-shadow:var(--shadow); font-size:13.5px; font-weight:600; margin-bottom:18px;
}
.co-toggle-summary .chev{ width:9px; height:9px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:rotate(45deg); transition:transform .3s; }
.co-toggle-summary.open .chev{ transform:rotate(225deg); }
@media(max-width:980px){
  .co-toggle-summary{ display:flex; }
  .co-summary{ display:none; position:static; }
  .co-summary.open{ display:block; margin-bottom:18px; }
}

/* success overlay */
.co-success{
  position:fixed; inset:0; z-index:1300; background:rgba(18,18,18,0.55); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .4s var(--ease);
}
.co-success.show{ opacity:1; pointer-events:auto; }
.co-success-card{
  background:#fff; border-radius:22px; padding:44px 40px; max-width:460px; width:100%; text-align:center;
  max-height:88vh; overflow-y:auto;
  transform:translateY(20px) scale(.96); transition:transform .4s var(--ease);
}
.co-success.show .co-success-card{ transform:translateY(0) scale(1); }
.co-success-check{
  width:68px; height:68px; border-radius:50%; background:rgba(47,167,154,0.12); color:var(--teal-dark);
  display:flex; align-items:center; justify-content:center; margin:0 auto 20px;
}
.co-success-check svg{ width:32px; height:32px; }
.co-success-card h2{ font-family:var(--display); font-size:22px; margin-bottom:10px; }
.co-success-card p{ color:rgba(18,18,18,0.6); font-size:13.5px; margin-bottom:22px; }
.co-success-card .order-id{ font-family:var(--mono); font-size:13px; background:var(--foam); padding:10px 16px; border-radius:10px; display:inline-block; margin-bottom:22px; }
.co-success-card a{ display:inline-flex; background:var(--ink); color:#fff; padding:13px 28px; border-radius:12px; font-size:13.5px; font-weight:600; transition:background .25s; }
.co-success-card a:hover{ background:var(--science); }

/* ---------- resumen dentro de la pantalla de éxito ---------- */
.co-success-summary{ text-align:left; border-top:1px dashed var(--line); margin-bottom:24px; padding-top:18px; }
.co-success-items{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.co-success-item{ display:flex; align-items:baseline; gap:8px; font-size:13px; }
.co-success-item .qty{ font-family:var(--mono); color:rgba(18,18,18,0.45); flex:0 0 auto; }
.co-success-item .name{ flex:1 1 auto; color:var(--ink); }
.co-success-item .price{ font-family:var(--mono); color:var(--ink); flex:0 0 auto; }
.co-success-totals{ border-top:1px solid var(--line); padding-top:12px; margin-bottom:16px; }
.co-success-totals .row{ display:flex; justify-content:space-between; font-size:13px; padding:3px 0; color:var(--ink); }
.co-success-totals .row.discount{ color:var(--teal-dark); }
.co-success-totals .row.grand{ font-weight:700; font-size:14.5px; border-top:1px solid var(--line); margin-top:6px; padding-top:8px; }
.co-success-info{ display:flex; flex-direction:column; gap:8px; }
.co-success-info div{ font-size:12.5px; }
.co-success-info strong{ display:block; color:var(--ink); margin-bottom:2px; }
.co-success-info span{ color:rgba(18,18,18,0.6); line-height:1.5; }

body.ss-lock{ overflow:hidden; }
.ss-item-media,.ss-reco-media,.ss-result-media,.co-summary-item .media{ overflow:hidden; }
.ss-added{ background:var(--teal-dark)!important; color:#fff!important; border-color:var(--teal-dark)!important; pointer-events:none; }
.ss-clear-cart{
  display:block; margin:2px 0 4px; font-size:12px; color:rgba(18,18,18,0.45);
  text-decoration:underline; text-underline-offset:3px; transition:color .2s;
}
.ss-clear-cart:hover{ color:#C6494A; }
.product-cart-fly.disabled{
  background:rgba(18,18,18,0.35)!important; pointer-events:none; cursor:not-allowed;
}
.ss-stock-low{
  font-family:var(--mono); font-size:10.5px; color:#C6494A;
  display:inline-block; margin-top:2px;
}
/* imagen de fondo real por categoría */
.cat-card{ padding:0; } /* quita el padding del card, ahora lo maneja .cat-content */
.cat-card .cat-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .5s var(--ease);
}
.cat-card:hover .cat-img{ transform:scale(1.06); }
.cat-card .cat-bg{
  background:linear-gradient(180deg,rgba(18,18,18,0) 35%,rgba(18,18,18,0.75) 100%);
  opacity:1; /* antes solo aparecía en hover, ahora siempre visible para legibilidad del texto */
}
.cat-card .cat-content{ position:relative; z-index:2; padding:18px; }
.cat-card h3,.cat-card span{ color:#fff; } /* texto blanco porque ahora va sobre foto */
.cat-card span{ opacity:.85; }

/* marca de tarjeta (logo + últimos 4) — resumen de compra y "mis pedidos" */
.ss-card-brand{ display:inline-flex; align-items:center; gap:6px; }
.ss-card-brand img{ height:16px; width:auto; }