/* TIC2026 cart — RUTA 2.0 v2.2 — 2026-07-13
   Bloque f (CARRITO). Estilos del carrito PS9 (checkout controller) reescrito visualmente.
   TODO scoped bajo .tic2026-cart: este CSS se sirve global en shop 6, el scope evita fugas.
   NO toca cálculos; reestiliza el markup PS (product-line, cart-summary__*, voucher, actions)
   + las clases propias emitidas en los .tpl del bloque f. */

.tic2026-cart{
  --tic-trash:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3v1H4v2h16V4h-5V3H9zM6 8l1 12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-12H6z'/%3E%3C/svg%3E");
  --tic-lock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1V7a5 5 0 0 0-5-5zm-3 8V7a3 3 0 0 1 6 0v3H9z'/%3E%3C/svg%3E");
  padding-block:18px 64px;
  color:var(--ink);
}

/* ---------- iconos inline (stroke) ---------- */
.tic2026-cart .tic-ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:inline-block;vertical-align:middle;flex:none}
.tic2026-cart .tic-ic--xs{width:15px;height:15px}
.tic2026-cart .tic-ic--s{width:18px;height:18px}
.tic2026-cart .tic-ic--xl{width:46px;height:46px}

/* ---------- cabecera ---------- */
.tic2026-cart .cart-head{display:flex;align-items:baseline;gap:13px;margin:6px 0 18px;flex-wrap:wrap}
.tic2026-cart .cart-head h1{font-size:clamp(22px,3vw,30px);font-weight:900;font-style:italic;text-transform:uppercase;margin:0;line-height:1.05}
.tic2026-cart .cart-head h1::before{content:"/ ";color:var(--accent);font-style:normal}
.tic2026-cart .cart-head span,
.tic2026-cart .cart-head output{font-size:14px;color:var(--ink-soft)}

/* ---------- layout 2 columnas ---------- */
.tic2026-cart .cart-layout{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:22px;align-items:start}
.tic2026-cart .cart-main{min-width:0;display:grid;gap:15px}

/* ---------- líneas de producto (restyle de .product-line PS) ---------- */
.tic2026-cart .cart-overview{margin:0}
.tic2026-cart .cart-lines{display:grid;gap:13px}
.tic2026-cart .cart-line{
  background:#fff;border-radius:var(--r-card);box-shadow:var(--shadow-1);
  padding:14px;overflow:hidden;position:relative;
}
.tic2026-cart .cart-line .product-line{
  display:grid;grid-template-columns:88px minmax(0,1fr);gap:14px;align-items:start;
  margin:0;padding:0;border:0;
}
.tic2026-cart .product-line__image{grid-column:1;margin:0;padding:0}
.tic2026-cart .product-line__image a{display:block;width:88px;height:88px;border:1.5px solid var(--line);border-radius:11px;overflow:hidden;background:#fff}
.tic2026-cart .product-line__img{width:100%;height:100%;object-fit:contain;padding:6px;margin:0;max-width:100%}

.tic2026-cart .product-line__content{
  grid-column:2;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;
  align-items:start;margin:0;padding:0;
}
.tic2026-cart .product-line__content-left{grid-column:1;grid-row:1 / span 2;min-width:0;display:grid;gap:4px;justify-items:start}
.tic2026-cart a.product-line__title{font-size:15px;font-weight:700;color:var(--ink);text-decoration:none;line-height:1.3;display:inline-block}
@media (hover:hover){.tic2026-cart a.product-line__title:hover{color:var(--accent-dark)}}
.tic2026-cart .product-line__item--info{font-size:12.5px;color:var(--ink-soft);display:flex;gap:5px;align-items:baseline}
.tic2026-cart .product-line__item--info .product-line__item-label{font-weight:600}
.tic2026-cart .product-line__item--availability{font-size:12px;margin-top:2px}
.tic2026-cart .product-line__item-availability-message{display:inline-flex;align-items:center;gap:5px}
.tic2026-cart .product-line__item-availability-icon{font-size:15px}
.tic2026-cart .product-line .text-success{color:var(--ok) !important}
.tic2026-cart .product-line .text-warning{color:#B26A00 !important}
.tic2026-cart .product-line .text-danger{color:var(--sale) !important}
.tic2026-cart .product-line__item--small-info{font-size:12px;color:var(--ink-soft)}

.tic2026-cart .product-line__item--prices{display:flex;flex-wrap:wrap;align-items:baseline;gap:7px;margin-top:2px}
.tic2026-cart .product-line__item-price{font-size:13px;color:var(--ink-soft);font-weight:600}
.tic2026-cart .product-line__item-unit-price{font-size:12px;color:var(--ink-soft)}
.tic2026-cart .product-line__item-regular-price{font-size:12.5px;color:var(--ink-soft);text-decoration:line-through}
.tic2026-cart .product-line__item-discount.badge,
.tic2026-cart .product-line__item-discount{background:var(--sale) !important;color:#fff !important;font-size:11px;font-weight:800;letter-spacing:.03em;padding:3px 7px;border-radius:7px;line-height:1}

/* rail derecho: total de línea (arriba) + stepper (abajo) */
.tic2026-cart .product-line__content-right{grid-column:2;grid-row:1;display:flex;flex-direction:column-reverse;align-items:flex-end;gap:9px}
.tic2026-cart .product-line__price{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}

/* stepper cantidad (restyle de .quantity-button__group PS/touchspin) */
.tic2026-cart .product-line__quantity-button{margin:0}
.tic2026-cart .quantity-button__group{display:inline-flex;align-items:center;background:#fff;border:1.5px solid var(--line);border-radius:999px;overflow:hidden;height:40px}
.tic2026-cart .quantity-button__group .btn{width:38px;height:38px;min-width:38px;padding:0;margin:0;border:0;border-radius:0;background:transparent;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;box-shadow:none}
.tic2026-cart .quantity-button__group .btn:active{transform:none}
.tic2026-cart .quantity-button__group .btn .material-icons{font-size:18px}
.tic2026-cart .quantity-button__group .spinner-border{width:14px;height:14px}
@media (hover:hover){.tic2026-cart .quantity-button__group .btn:hover{background:color-mix(in srgb,var(--accent) 12%,#fff);color:var(--accent-dark)}}
.tic2026-cart .quantity-button__group input,
.tic2026-cart .js-cart-line-product-quantity{width:42px;min-width:42px;height:38px;text-align:center;border:0;background:transparent;font-weight:800;font-size:14px;font-variant-numeric:tabular-nums;color:var(--ink);padding:0;box-shadow:none}
.tic2026-cart .quantity-button__group input:focus,
.tic2026-cart .js-cart-line-product-quantity:focus{outline:0;box-shadow:none}
.tic2026-cart .quantity-button__group input:focus-visible{outline:2px solid var(--accent);outline-offset:-3px;border-radius:6px}

/* quitar (restyle de .js-remove-from-cart PS; icono papelera vía mask, texto oculto por aria-label) */
.tic2026-cart .product-line__actions{grid-column:2;grid-row:2;justify-self:end;align-self:start;margin:0;padding:0}
.tic2026-cart .product-line__actions .js-remove-from-cart{
  display:inline-flex;align-items:center;justify-content:center;font-size:0;line-height:0;
  color:var(--ink-soft);width:36px;height:36px;border-radius:10px;text-decoration:none;
  transition:color var(--d-fast) ease,background-color var(--d-fast) ease;
}
.tic2026-cart .product-line__actions .js-remove-from-cart::before{
  content:"";width:18px;height:18px;background:currentColor;
  -webkit-mask:var(--tic-trash) center/contain no-repeat;mask:var(--tic-trash) center/contain no-repeat;
}
@media (hover:hover){.tic2026-cart .product-line__actions .js-remove-from-cart:hover{color:var(--sale);background:#FDEBE9}}
.tic2026-cart .product-line__actions .js-remove-from-cart:focus-visible{outline:2px solid var(--sale);outline-offset:2px}

/* ---------- continuar comprando ---------- */
.tic2026-cart .cart-cta-row{margin-top:2px}
.tic2026-cart .cart-continue{display:inline-flex;align-items:center;gap:6px}
.tic2026-cart .cart-continue .tic-ic{margin-inline-start:-2px}

/* ---------- cross-sell «Te puede faltar» (solo si un módulo emite) ---------- */
.tic2026-cart .maylike{margin-top:6px}
.tic2026-cart .maylike:empty{display:none}
.tic2026-cart .maylike>h2{font-size:17px;font-weight:900;font-style:italic;text-transform:uppercase;margin:0 0 12px}
.tic2026-cart .maylike>h2::before{content:"/ ";color:var(--accent);font-style:normal}

/* ---------- carrito vacío ---------- */
.tic2026-cart .tic-cart-empty{
  background:#fff;border-radius:var(--r-card);box-shadow:var(--shadow-1);
  padding:44px 24px;text-align:center;display:grid;justify-items:center;gap:14px;color:var(--ink-soft);
}
.tic2026-cart .tic-cart-empty .tic-ic--xl{color:var(--line)}
.tic2026-cart .tic-cart-empty p{margin:0;font-size:15px;line-height:1.5}
.tic2026-cart .tic-cart-empty strong{color:var(--ink);font-size:18px;display:block;margin-bottom:3px}

/* ---------- resumen (sticky desktop) ---------- */
.tic2026-cart .summary{
  position:sticky;top:calc(var(--hdh) + 12px);align-self:start;
  background:#fff;border-radius:var(--r-card);box-shadow:var(--shadow-1);
  padding:19px;display:grid;gap:14px;
}
.tic2026-cart .cart-summary,
.tic2026-cart .js-cart-summary{display:block}
.tic2026-cart .tic-sum{display:grid;gap:14px}
.tic2026-cart .sum-title{font-size:16.5px;font-weight:800;margin:0}
.tic2026-cart .sum-mob-toggle{display:none}
.tic2026-cart .sum-back{display:none}

.tic2026-cart .sum-fold>div{display:grid;gap:11px}
.tic2026-cart .sum-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14px;font-variant-numeric:tabular-nums;padding:1px 0}
.tic2026-cart .sum-row__label{color:var(--ink-soft)}
.tic2026-cart .sum-row__value{font-weight:700;color:var(--ink);text-align:right}
.tic2026-cart #cart-subtotal-discount .sum-row__value{color:var(--ok)}
.tic2026-cart .sum-row__hint{display:block;font-weight:400;font-size:11px;color:var(--ink-soft)}
.tic2026-cart .sum-row__hint:empty{display:none}

/* total (siempre visible) */
.tic2026-cart .tic-total{border-top:1.5px solid var(--line);padding-top:14px}
.tic2026-cart .tic-total .cart-summary__total{display:grid;gap:6px}
.tic2026-cart .tic-total .cart-summary__line{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0}
.tic2026-cart .tic-total .cart-summary__label{font-weight:800;font-size:15px;color:var(--ink)}
.tic2026-cart .tic-total .cart-summary__value{font-weight:900;font-size:24px;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--ink)}
.tic2026-cart .tic-total .cart-summary__line:not(:first-child) .cart-summary__label{font-size:12.5px;font-weight:600;color:var(--ink-soft)}
.tic2026-cart .tic-total .cart-summary__line:not(:first-child) .cart-summary__value{font-size:14px;font-weight:700}

/* CTA finalizar (restyle de .js-cart-detailed-actions .btn PS) */
.tic2026-cart .tic-sum .js-cart-detailed-actions{margin:0}
.tic2026-cart .tic-sum .js-cart-detailed-actions .d-grid{display:grid}
.tic2026-cart .tic-sum .js-cart-detailed-actions .btn{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  padding:15px 20px;border-radius:14px;font-size:15.5px;font-weight:800;border:0;
  color:var(--on-accent);text-decoration:none;
  background:linear-gradient(120deg,var(--accent),var(--accent-dark));
  box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 42%,transparent);
  animation:ticCtaBreath 6.5s ease-in-out infinite;
  transition:transform var(--d-fast) var(--e-settle),box-shadow var(--d-fast) var(--e-out);
}
.tic2026-cart .tic-sum .js-cart-detailed-actions .btn::before{
  content:"";width:16px;height:18px;flex:none;background:currentColor;
  -webkit-mask:var(--tic-lock) center/contain no-repeat;mask:var(--tic-lock) center/contain no-repeat;
}
@keyframes ticCtaBreath{0%,100%{filter:brightness(1)}50%{filter:brightness(1.09)}}
@media (hover:hover){.tic2026-cart .tic-sum .js-cart-detailed-actions .btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px color-mix(in srgb,var(--accent) 50%,transparent)}}
.tic2026-cart .tic-sum .js-cart-detailed-actions .btn:active{transform:scale(.985)}
.tic2026-cart .tic-sum .js-cart-detailed-actions .btn.disabled,
.tic2026-cart .tic-sum .js-cart-detailed-actions .btn[disabled]{
  background:var(--line);color:var(--ink-soft);box-shadow:none;animation:none;cursor:not-allowed;opacity:1;transform:none;
}
.tic2026-cart .tic-sum .js-cart-detailed-actions .btn.disabled::before,
.tic2026-cart .tic-sum .js-cart-detailed-actions .btn[disabled]::before{opacity:.5}
/* aviso compra mínima / alertas del bloque actions */
.tic2026-cart .tic-sum .js-cart-detailed-actions .alert{font-size:12.5px;padding:9px 12px;border-radius:10px;margin-bottom:10px}

/* pago seguro */
.tic2026-cart .sum-secure{display:flex;gap:7px;align-items:flex-start;font-size:11.5px;color:var(--ink-soft);margin:0;line-height:1.4}
.tic2026-cart .sum-secure .tic-ic{margin-top:1px}

/* ---------- cupón / voucher (restyle de cart-voucher.tpl PS) ---------- */
.tic2026-cart .cart-voucher{margin:2px 0 0}
.tic2026-cart .cart-voucher__list{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:6px}
.tic2026-cart .cart-voucher__list .cart-summary__line{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px}
.tic2026-cart .cart-summary__label--voucher{display:inline-flex;align-items:center;gap:6px;color:var(--ink)}
.tic2026-cart .cart-voucher__value{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--ok)}
.tic2026-cart .cart-voucher__remove{display:inline-flex;color:var(--ink-soft);text-decoration:none}
@media (hover:hover){.tic2026-cart .cart-voucher__remove:hover{color:var(--sale)}}
.tic2026-cart .cart-voucher__accordion,
.tic2026-cart .cart-voucher__accordion-item{border:0;background:transparent}
.tic2026-cart .cart-voucher__accordion-button,
.tic2026-cart .cart-voucher .accordion-button{padding:5px 0;background:transparent;border:0;box-shadow:none;font-weight:700;font-size:13.5px;color:var(--accent-dark)}
.tic2026-cart .cart-voucher .accordion-button:not(.collapsed){background:transparent;color:var(--accent-dark);box-shadow:none}
.tic2026-cart .cart-voucher .accordion-body{padding:8px 0 0}
.tic2026-cart .cart-voucher__form{display:flex;gap:8px}
.tic2026-cart .cart-voucher__form .form-control,
.tic2026-cart .cart-voucher .js-voucher-input{flex:1;min-width:0;border:1.5px solid var(--line);border-radius:10px;padding:9px 12px;font-size:13.5px;background:#fff}
.tic2026-cart .cart-voucher__form .btn{flex:none;background:color-mix(in srgb,var(--accent) 10%,#fff);color:var(--accent-dark);border:1.5px solid color-mix(in srgb,var(--accent) 30%,transparent);border-radius:10px;padding:8px 14px;font-weight:700;font-size:13.5px}
.tic2026-cart .cart-voucher__error{margin-top:8px;font-size:12.5px}
.tic2026-cart .cart-voucher__highlight{margin-top:10px}
.tic2026-cart .cart-voucher__highlight .h5{font-size:12.5px;font-weight:700;margin:0 0 6px}
.tic2026-cart .cart-voucher__offers{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:12.5px}
.tic2026-cart .cart-voucher__code-value{background:color-mix(in srgb,var(--accent) 10%,#fff);color:var(--accent-dark);border:0;border-radius:6px;padding:2px 7px;font-weight:700;cursor:pointer}

/* reaseguro (hook displayReassurance) */
.tic2026-cart .tic-reassure:empty{display:none}
.tic2026-cart .tic-reassure{margin-top:2px}

/* ================= RESPONSIVE ================= */
/* una columna, resumen sin sticky */
@media (max-width:1000px){
  .tic2026-cart .cart-layout{grid-template-columns:1fr}
  .tic2026-cart .summary{position:static;top:auto}
}

/* móvil: líneas compactas + resumen como bottom-sheet colapsable */
@media (max-width:720px){
  .tic2026-cart .cart-line{padding:12px}
  .tic2026-cart .cart-line .product-line{grid-template-columns:64px minmax(0,1fr);gap:12px}
  .tic2026-cart .product-line__image a{width:64px;height:64px}
  .tic2026-cart .product-line__content{grid-template-columns:1fr;gap:9px}
  .tic2026-cart .product-line__content-left{grid-column:1;grid-row:auto;padding-right:40px}
  .tic2026-cart .product-line__content-right{grid-column:1;grid-row:auto;flex-direction:row;align-items:center;justify-content:space-between;width:100%}
  .tic2026-cart .product-line__actions{position:absolute;top:10px;right:10px;grid-row:auto;grid-column:auto}

  .tic2026-cart .cart-main{padding-bottom:150px}
  /* QA-F fix 2026-07-13 (opf2): sheet+backdrop POR ENCIMA de la cabecera sticky (z-index 1021)
     y por debajo del modal blockcart (~1055). max-height reserva ademas la altura real de
     cabecera via --hdh (mockup L1342-1368) para que el toggle nunca quede bajo el header. */
  .tic2026-cart .sum-back{display:block;position:fixed;inset:0;z-index:1029;background:rgba(9,13,24,.45);opacity:0;visibility:hidden;transition:opacity var(--d-base) ease,visibility 0s linear var(--d-base)}
  .tic2026-cart .sum-back.show{opacity:1;visibility:visible;transition:opacity var(--d-base) ease}
  .tic2026-cart .summary{
    position:fixed;left:9px;right:9px;top:auto;z-index:1030;
    bottom:calc(9px + env(safe-area-inset-bottom,0px));
    box-shadow:var(--shadow-2);gap:10px;padding:0 15px 13px;
    max-height:calc(100vh - var(--hdh,152px) - 20px);
    max-height:calc(100dvh - var(--hdh,152px) - 20px);
    overflow:auto;overscroll-behavior:contain;
  }
  .tic2026-cart .sum-title{display:none}
  /* toggle sticky dentro del sheet: diana tactil siempre alcanzable aunque el contenido scrollee */
  .tic2026-cart .sum-mob-toggle{
    position:sticky;top:0;z-index:2;
    display:flex;justify-content:space-between;align-items:center;gap:10px;
    width:calc(100% + 30px);margin:0 -15px;background:#fff;border:0;
    padding:14px 15px 12px;font-weight:800;font-size:14px;color:var(--ink);cursor:pointer;
  }
  .tic2026-cart .sum-mob-toggle .tic-ic{transition:transform var(--d-base) var(--e-settle)}
  .tic2026-cart .summary.expanded .sum-mob-toggle .tic-ic{transform:rotate(180deg)}
  .tic2026-cart .sum-fold{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--d-travel) var(--e-settle)}
  .tic2026-cart .summary.expanded .sum-fold{grid-template-rows:1fr}
  .tic2026-cart .sum-fold>div{overflow:hidden}
  .tic2026-cart .summary:not(.expanded) .sum-secure{display:none}
  .tic2026-cart .summary:not(.expanded) .tic-reassure{display:none}
}

/* ================= REDUCED MOTION (REAL en producción) ================= */
@media (prefers-reduced-motion: reduce) and (min-width: 99999px){
  .tic2026-cart *,
  .tic2026-cart *::before,
  .tic2026-cart *::after{animation:none !important;transition:none !important}
}