:root{
  --bg:#ffffff;
  --bg-soft:#f6f6f6;
  --text:#0b0b0b;
  --muted:#6b7280;
  --line:#e5e7eb;

  --black:#0b0b0b;
  --white:#ffffff;

  --radius:18px;
  --shadow: 0 12px 35px rgba(0,0,0,.08);
  --shadow2: 0 18px 55px rgba(0,0,0,.12);
}

/* =========================
   BASE
   ========================= */
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
}

html{
  overflow-x:hidden; /* ✅ evita scroll lateral global */
}

body{
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
.container{ max-width:1120px; margin:auto; padding:0 16px; }

html.no-scroll, html.no-scroll body{ overflow:hidden; }

.muted{ color: var(--muted); }

/* =========================
   BUTTONS GLOBAL
   ========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 900;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, filter .12s ease;
  user-select:none;
  border: 1px solid transparent;
  cursor:pointer;
}
.btn:active{ transform: translateY(1px); }

.btn-black{
  background: var(--black);
  color: #fff;
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
  border-color: var(--black);
}
.btn-black:hover{ box-shadow: 0 18px 40px rgba(0,0,0,.22); }

.btn-outline{
  background:#fff;
  border: 1px solid rgba(0,0,0,.14);
  color:#111;
}
.btn-outline:hover{ background: rgba(0,0,0,.03); }

/* =========================
   NAVBAR (Nike-ish)
   ========================= */
.navbar{
  position: sticky;
  top:0;
  z-index:50;
  background: rgba(255,255,255,.88);
  border-bottom: 1px solid var(--line);
}
@supports (backdrop-filter: blur(12px)){
  .navbar{ backdrop-filter: blur(12px); }
}

.nav-flex{
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:66px;
  gap:12px;
}

.logo{ display:flex; flex-direction:column; line-height:1.05; }
.logo strong{ font-size:1.06rem; letter-spacing:-.5px; }
.logo span{ font-weight:800; font-size:.9rem; color:#111; opacity:.75; }

.logo{
  flex-direction:row;
  align-items:center;
}

.logo img{
  height:48px;
  width:auto;
  display:block;
  object-fit:contain;
}

.nav-drawer-brand img{
  height:58px;
  width:auto;
  display:block;
  object-fit:contain;
}

.nav-links{
  display:flex;
  gap:18px;
  list-style:none;
  align-items:center;
}
.nav-links a{
  font-weight:700;
  font-size:.98rem;
  opacity:.9;
}
.nav-links a:hover{ opacity:1; }

.cart-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.04);
}

/* Hamburguesa */
.nav-toggle{
  display:none;
  width:46px;
  height:46px;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
}

.nav-toggle span{
  display:block;
  width:22px;
  height:2px;
  background:#111;
  border-radius:10px;
}

/* Drawer */
.nav-overlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.40);
  z-index:60;
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease;
}
.nav-overlay.show{ opacity:1; pointer-events:auto; }

.nav-drawer{
  position:fixed;
  top:0;
  right:0;
  width:min(360px, 92vw);
  height:100vh;
  z-index:70;
  background:#fff;
  border-left:1px solid var(--line);
  transform: translateX(102%);
  transition: transform .18s ease;
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.nav-drawer.open{ transform: translateX(0); }

.nav-drawer-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.nav-drawer-brand{ display:flex; flex-direction:column; line-height:1.05; }
.nav-drawer-brand span{ color:#111; opacity:.7; font-weight:800; font-size:.9rem; }

.nav-close{
  width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  cursor:pointer;
}

.nav-drawer-links{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-top:6px;
}
.nav-drawer-links a{
  padding:12px 12px;
  border-radius:14px;
  background: var(--bg-soft);
  border:1px solid rgba(0,0,0,.06);
  font-weight:800;
}
.drawer-cart{
  background:#111 !important;
  color:#fff !important;
  border-color:#111 !important;
}

/* =========================
   HERO (Nike style)
   ========================= */
.hero-nike{
  padding: 56px 0 30px;
  background:
    radial-gradient(900px 420px at 10% 15%, rgba(0,0,0,.06), transparent 60%),
    radial-gradient(900px 420px at 90% 10%, rgba(0,0,0,.05), transparent 55%),
    linear-gradient(180deg, #fff 0%, #fbfbfb 100%);
  border-bottom: 1px solid var(--line);
}

.hero-wrap{
  display:grid;
  grid-template-columns: 1.25fr .95fr;
  gap: 22px;
  align-items: stretch;
}

.pill{
  display:inline-flex;
  align-items:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  font-weight:900;
  font-size:.85rem;
  letter-spacing:.2px;
  margin-bottom: 14px;
}

.hero-title{
  font-size: clamp(2.1rem, 3.2vw + .8rem, 3.4rem);
  line-height: .98;
  letter-spacing: -1.2px;
  margin-bottom: 14px;
  font-weight: 900;
}

.hero-sub{
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 560px;
  margin-bottom: 18px;
}

.hero-ctas{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom: 16px;
}

/* Precio */
.price-row{ margin: 8px 0 16px; }
.price{
  font-weight: 900;
  font-size: 1.55rem;
  letter-spacing: -0.6px;
}
.price-note{
  color: var(--muted);
  font-weight: 700;
  font-size: .92rem;
  margin-top: 4px;
}

.hero-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  margin-top: 4px;
}
.meta-item{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:800;
  color: rgba(11,11,11,.78);
}
.dot{
  width:8px;
  height:8px;
  border-radius:99px;
  background:#111;
  opacity:.25;
}

/* HERO imagen derecha */
.hero-visual{
  display:flex;
  align-items: stretch;
}

.product-shot{
  position: relative;
  width: 100%;
  min-height: 380px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 22px 70px rgba(0,0,0,.12);
  background: #f4f4f4;
}
.product-shot img{
  width: 100%;
  height: 100%;
  display:block;
  object-fit: cover;
  object-position: center;
  transform: scale(1.02);
}
.product-fallback{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:6px;
  color: rgba(0,0,0,.70);
}

.shot-overlay{
  position:absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  padding: 14px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(0,0,0,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
@supports (backdrop-filter: blur(10px)){
  .shot-overlay{ backdrop-filter: blur(10px); }
}

.shot-kicker{
  font-weight: 900;
  font-size: .75rem;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: rgba(0,0,0,.55);
}
.shot-title{
  font-weight: 900;
  letter-spacing: -.4px;
  margin-top: 2px;
}
.shot-cta{
  padding: 10px 14px;
  border-radius: 999px;
  background: #111;
  color:#fff;
  font-weight: 900;
  white-space: nowrap;
}

/* =========================
   SECTIONS
   ========================= */
.section{ padding: 34px 0 8px; }

.section-head h2{
  font-size: clamp(1.35rem, 1.2vw + 1rem, 1.9rem);
  letter-spacing: -0.7px;
  font-weight: 900;
}
.section-head p{
  color: var(--muted);
  margin-top: 6px;
}

/* Cards informativas */
.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 18px 0 40px;
}
.card-nike{
  background:#fff;
  border-radius: var(--radius);
  padding: 18px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: var(--shadow);
  transition: transform .14s ease, box-shadow .14s ease;
}
.card-nike:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 65px rgba(0,0,0,.12);
}
.card-tag{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  font-weight: 900;
  font-size:.78rem;
  letter-spacing:.35px;
  margin-bottom: 10px;
}
.card-nike h3{
  font-weight: 900;
  letter-spacing: -.4px;
  margin-bottom: 6px;
}
.card-nike p{
  color: var(--muted);
  margin-bottom: 10px;
}
.link-strong{
  font-weight: 900;
  color:#111;
}
.link-strong:hover{ text-decoration: underline; }

/* =========================
   TIENDA: HEADER + LAYOUT + FILTROS PRO
   ========================= */
.shop-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  padding: 18px 0 10px;
}
.shop-head h2{
  font-weight: 900;
  letter-spacing: -.8px;
  font-size: clamp(1.6rem, 1.2vw + 1.2rem, 2.2rem);
}
.shop-head p{ color: var(--muted); margin-top: 6px; font-weight: 700; }

.shop-wrap{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap: 18px;
  padding: 10px 0 6px;
  align-items:start;
}

/* Sidebar filtros (desktop) */
.filters{
  position: sticky;
  top: 86px;
  background:#fff;
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: var(--shadow);
  padding: 16px;
}

.filters-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  margin-bottom: 12px;
}
.filters-head h3{
  font-weight: 900;
  letter-spacing: -.4px;
}
.filters-clear{
  font-weight: 900;
  font-size:.9rem;
  opacity:.75;
}
.filters-clear:hover{ opacity:1; text-decoration: underline; }

.fgroup{ margin-bottom: 12px; }
.flabel{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 6px;
  font-weight: 900;
}
.fhint{ font-weight:800; color: var(--muted); font-size:.85rem; }

.input, .select{
  width:100%;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  outline: none;
}
.input:focus, .select:focus{
  border-color: rgba(0,0,0,.28);
  box-shadow: 0 0 0 4px rgba(0,0,0,.06);
}

.chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.chip{
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.03);
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size:.85rem;
  cursor:pointer;
  transition: background .14s ease, transform .12s ease, border-color .14s ease;
}
.chip:hover{ transform: translateY(-1px); }
.chip.active{
  background:#111;
  color:#fff;
  border-color:#111;
}

.filters-actions{
  display:flex;
  gap:10px;
  margin-top: 12px;
}
.filters-actions .btn{ width:100%; }

.filters-open{
  display:none;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 900;
  cursor:pointer;
}

.filters-overlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.40);
  z-index: 75;
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease;
}
.filters-overlay.show{ opacity:1; pointer-events:auto; }

.filters-drawer{
  position:fixed;
  top:0;
  right:0;
  width:min(420px, 94vw);
  height:100vh;
  z-index: 80;
  background:#fff;
  border-left:1px solid var(--line);
  transform: translateX(102%);
  transition: transform .18s ease;
  padding: 18px;
  overflow:auto;
}
.filters-drawer.open{ transform: translateX(0); }

/* =========================
   PRODUCT GRID (TIENDA)
   ========================= */
.section-products{ padding-top: 36px; }

.products-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-bottom: 10px;
}

.btn-sm{ padding:10px 14px; font-size:.92rem; }

.product-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 20px;
}

.p-card{
  position:relative;
  background:#fff;
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,.07);
  box-shadow: 0 16px 50px rgba(0,0,0,.06);
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease;
  display:block;
}

.p-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 30px 90px rgba(0,0,0,.12);
}

.p-media{
  position:relative;
  background:#f5f5f5;
  aspect-ratio: 1 / 1;
  overflow:hidden;
}

.p-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition: transform .35s ease;
}

.p-card:hover .p-media img{
  transform: scale(1.07);
}

.p-media-fallback{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  color: rgba(0,0,0,.6);
  font-weight: 800;
}

.p-badge{
  position:absolute;
  top:12px;
  left:12px;
  padding:6px 12px;
  border-radius:999px;
  background:#111;
  color:#fff;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.6px;
  text-transform:uppercase;
}

.p-body{
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.p-name{
  font-weight:900;
  font-size:1.02rem;
  line-height:1.2;
  color:#111;
  min-height: 42px;
}

.p-meta{
  font-size:.78rem;
  color:#6b7280;
  font-weight:600;
}

.p-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:6px;
  gap:10px;
}

.p-price{
  font-weight:900;
  font-size:1.1rem;
  letter-spacing:-.3px;
  color:#111;
}

.p-cta{
  background:#111;
  color:#fff;
  font-weight:900;
  font-size:.82rem;
  padding:8px 12px;
  border-radius:999px;
  opacity:0;
  transform: translateY(6px);
  transition:.18s ease;
}
.p-card:hover .p-cta{
  opacity:1;
  transform: translateY(0);
}

/* =========================
   PRODUCTO DETALLE (producto.php)
   ========================= */
.pd-actions{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}
.pd-actions .btn{
  flex:1;
  min-width: 180px;
  white-space: nowrap;
}

.pd-select,
.pd-input{
  width:100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.14);
  background:#fff;
  font-weight: 800;
  outline:none;
}
.pd-select:focus,
.pd-input:focus{
  border-color: rgba(0,0,0,.25);
  box-shadow: 0 0 0 4px rgba(0,0,0,.06);
}

/* =========================
   CARRITO (carrito.php)
   ========================= */
.cart-page{
  padding: 34px 0 10px;
}
.cart-title{
  font-size: clamp(1.7rem, 1.6vw + 1.2rem, 2.2rem);
  letter-spacing: -0.8px;
  font-weight: 900;
  margin: 10px 0 18px;
}

.cart-card{
  background:#fff;
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: var(--shadow);
  padding: 16px;
}

.cart-grid{
  display:grid;
  grid-template-columns: 1fr; /* ✅ resumen abajo */
  gap: 16px;
  margin-top: 12px;
  align-items:start;
}

/* Desktop/Tablet: tabla normal con scroll si hace falta */
.cart-table-wrap{
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  background:#fff;

  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling: touch;

  max-width:100%;
  width:100%;

  touch-action: pan-x;
  overscroll-behavior-x: contain;
}

.cart-table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 860px; /* ✅ desktop */
}

.cart-table thead th{
  background: #fafafa;
  font-weight: 900;
  text-align: left;
  padding: 14px 14px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  white-space: nowrap;
}

.cart-table td{
  padding: 14px 14px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  vertical-align: middle;
}

.cart-item{
  display:flex;
  gap:12px;
  align-items:center;
  min-width: 240px;
}
.cart-thumb{
  width: 62px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid rgba(0,0,0,.10);
  background:#f3f4f6;
}
.cart-name{
  font-weight: 900;
  color:#111;
  line-height:1.15;
  display:inline-block;
}
.cart-sub{
  font-size: .85rem;
  color: var(--muted);
  font-weight: 700;
  margin-top: 6px;
}

.cart-qty{
  width: 92px !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0,0,0,.14) !important;
  outline: none;
  font-weight: 800;
  background:#fff;
}
.cart-qty:focus{
  border-color: rgba(0,0,0,.25) !important;
  box-shadow: 0 0 0 4px rgba(0,0,0,.06);
}

.cart-money, .cart-subtotal{
  font-weight: 900;
  white-space: nowrap;
}

.badge-stock{
  display:inline-flex;
  align-items:center;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 900;
  background: rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.10);
  color:#111;
}

/* Acciones carrito */
.cart-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  justify-content:flex-start;
  margin-top: 14px;
}

/* Botones del carrito */
.btn-dark{
  background:#111;
  color:#fff;
  border: 1px solid #111;
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
}
.btn-dark:hover{ box-shadow: 0 18px 40px rgba(0,0,0,.22); }

.btn-soft{
  background: rgba(0,0,0,.04);
  color:#111;
  border: 1px solid rgba(0,0,0,.12);
}
.btn-soft:hover{ background: rgba(0,0,0,.06); }

.btn-danger{
  background:#dc2626;
  color:#fff;
  border: 1px solid #dc2626;
}
.btn-danger:hover{ filter: brightness(.95); }

/* Resumen + envío */
.cart-summary h3{
  font-weight: 900;
  letter-spacing: -.5px;
  margin-bottom: 10px;
}

.cart-total{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.02);
  margin-bottom: 14px;
}
.cart-total strong{ font-size: 1.05rem; }

.ship-form{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ship-form .field{
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.ship-form label{
  font-size: .85rem;
  font-weight: 900;
  color: rgba(0,0,0,.72);
}
.ship-form input,
.ship-form textarea,
.ship-form select{
  width:100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.14);
  background:#fff;
  font-weight: 800;
  outline:none;
}
.ship-form input:focus,
.ship-form textarea:focus,
.ship-form select:focus{
  border-color: rgba(0,0,0,.25);
  box-shadow: 0 0 0 4px rgba(0,0,0,.06);
}
.ship-form .full{ grid-column: 1 / -1; }

.checkout-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top: 12px;
}
.checkout-actions .btn{
  flex:1;
  min-width: 220px;
}

/* =========================
   FOOTER
   ========================= */
.footer{
  background:#0b0b0b;
  color: rgba(255,255,255,.82);
  text-align:center;
  padding: 30px 16px;
  margin-top: 60px;
}

/* =========================
   WHATSAPP
   ========================= */
.whatsapp-float{
  position:fixed;
  bottom:18px;
  right:18px;
  background:#25d366;
  color:#fff;
  font-size:22px;
  width:54px;
  height:54px;
  border-radius: 50%;
  display:grid;
  place-items:center;
  box-shadow: 0 14px 30px rgba(0,0,0,.22);
  z-index:80;
}
.whatsapp-float svg{
    width:30px;
    height:30px;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 1100px){
  .nav-toggle{ display:inline-flex; }
  .nav-links{ display:none; }

  .shop-wrap{ grid-template-columns: 1fr; }
  .filters{ display:none; }
  .filters-open{ display:inline-flex; align-items:center; justify-content:center; gap:8px; }
}

@media (max-width: 980px){
  .hero-wrap{ grid-template-columns: 1fr; }
  .grid{ grid-template-columns: 1fr; }
  .product-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .products-head{ flex-direction:column; align-items:flex-start; }
  .product-shot{ min-height: 320px; }

  /* Carrito: envío a 1 columna */
  .ship-form{ grid-template-columns: 1fr; }
  .checkout-actions .btn{ min-width:0; width:100%; }

  /* ✅ CLAVE: entre 980px y 721px la tabla NO se “corta”.
     El wrap usa el ancho real del viewport y scrollea cómodo */
  .cart-table-wrap{
    margin-left:-16px;   /* compensa padding del .container */
    margin-right:-16px;
    border-left:0;
    border-right:0;
    border-radius:0;
  }
}

/* ✅ MÓVIL REAL: tabla -> cards con data-label */
@media (max-width: 720px){

  /* Carrito: botones en columna */
  .cart-actions{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .cart-actions .btn,
  .cart-actions button,
  .cart-actions a{
    width: 100%;
    justify-content:center;
    white-space: normal;
  }
  .cart-actions form{ width:100%; }
  .cart-actions form .btn{ width:100%; }

  /* quitar el scroll horizontal en modo cards */
  .cart-table-wrap{
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 0 !important;
  }

  .cart-table{
    min-width: 0 !important;
    width: 100% !important;
  }

  .cart-table thead{
    display: none !important;
  }

  .cart-table,
  .cart-table tbody,
  .cart-table tr,
  .cart-table td{
    display: block !important;
    width: 100% !important;
  }

  .cart-table tr{
    background:#fff;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: var(--shadow);
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 12px;
  }

  .cart-table td{
    border: 0 !important;
    border-bottom: 1px solid rgba(0,0,0,.06) !important;
    padding: 12px 14px !important;

    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .cart-table td:last-child{ border-bottom: 0 !important; }

  .cart-table td::before{
    content: attr(data-label);
    font-weight: 900;
    color: var(--muted);
    flex: 0 0 auto;
    max-width: 42%;
  }

  .cart-table td > *{
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
  }

  .cart-table td[data-label="Producto"]{
    align-items: flex-start;
  }
  .cart-table td[data-label="Producto"] > *{
    text-align: left;
  }

  .cart-item{
    min-width: 0 !important;
    width: 100%;
  }
  .cart-thumb{
    width: 56px;
    height: 44px;
  }

  .cart-table td[data-label="Cantidad"] > *{
    display: flex;
    justify-content: flex-end;
  }

  .cart-table td[data-label="Acción"] > *{
    display:flex;
    justify-content:flex-end;
  }
  .cart-table td[data-label="Acción"] form{
    margin: 0 !important;
  }
  .cart-table td[data-label="Acción"] .btn{
    width: auto !important;
    white-space: nowrap;
  }
}

@media (max-width: 520px){
  /* Producto detalle: acciones apiladas */
  .pd-actions{
    flex-direction:column;
    align-items:stretch;
  }
  .pd-actions .btn{
    width:100%;
    min-width:0;
  }

  .cart-card{ padding: 14px; }

  .cart-qty{
    width: 86px !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
  }

  .checkout-actions .btn{
    width:100%;
    min-width:0;
  }
}

@media (max-width: 420px){
  .hero-ctas{ gap:10px; }
  .shot-overlay{
    flex-direction: column;
    align-items: flex-start;
  }
  .shot-cta{
    width: 100%;
    text-align: center;
  }

  /* ✅ tienda: CTA siempre visible en mobile */
  .p-cta{ opacity:1; transform:none; }

  .filters-actions{ flex-direction: column; }
}

/* =========================================================
   CARRITO — MODO COMPACTO (940px -> 721px)
   Achica tipografías/paddings para que entre TODO
   ========================================================= */
@media (max-width: 940px) and (min-width: 721px){

  /* Contenedor tabla: sin trucos raros, que use su ancho */
  .cart-table-wrap{
    overflow-x: auto; /* si por 1px no entra, igual hay scroll */
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* La tabla: bajamos el min-width para que no “obligue” a ocultar */
  .cart-table{
    min-width: 0 !important;      /* ✅ clave */
    width: 100% !important;       /* ✅ ocupa todo el contenedor */
    font-size: .90rem;            /* ✅ letras más chicas */
  }

  /* Cabecera */
  .cart-table thead th{
    padding: 10px 10px !important;
    font-size: .86rem !important;
    white-space: nowrap;
  }

  /* Celdas */
  .cart-table td{
    padding: 10px 10px !important;
    font-size: .90rem !important;
  }

  /* Producto */
  .cart-item{
    gap: 10px;
    min-width: 0 !important; /* ✅ que no fuerce ancho */
  }

  .cart-thumb{
    width: 54px !important;
    height: 42px !important;
    border-radius: 10px !important;
  }

  .cart-name{
    font-size: .92rem !important;
  }

  .cart-sub{
    font-size: .78rem !important;
    margin-top: 4px !important;
  }

  /* Variante */
  .cart-table td:nth-child(2){
    font-size: .88rem !important;
  }

  /* Precio / Subtotal: que no “salten” */
  .cart-money,
  .cart-subtotal{
    font-size: .92rem !important;
  }

  /* Cantidad */
  .cart-qty{
    width: 78px !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    font-size: .90rem !important;
  }

  /* Badge stock */
  .badge-stock{
    padding: 4px 8px !important;
    font-size: .72rem !important;
  }

  /* Botón quitar / acción */
  .cart-table .btn,
  .cart-table button{
    padding: 9px 12px !important;
    font-size: .85rem !important;
  }
}

@media (max-width: 1100px){
  .nav-drawer{
    right:0;
    max-width:92vw;
    overflow-x:hidden;
  }

  body,
  html{
    max-width:100%;
    overflow-x:hidden;
  }
}

@media (max-width: 520px){
  .product-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .p-card{
    border-radius: 16px;
  }

  .p-body{
    padding: 10px;
    gap: 6px;
  }

  .p-name{
    font-size: .88rem;
    min-height: 38px;
  }

  .p-meta{
    font-size: .72rem;
  }

  .p-price{
    font-size: .95rem;
  }

  .p-cta{
      opacity: 1;
      transform: none;
    
      display: inline-flex;
      align-items: center;
      justify-content: center;
    
      min-width: 52px;
      height: 34px;
      padding: 0 11px;
    
      border-radius: 999px;
      font-size: .72rem;
      line-height: 1;
      white-space: nowrap;
      flex-shrink: 0;
    }

  .p-badge{
    font-size: .62rem;
    padding: 5px 8px;
  }
  .p-row{
  align-items: flex-end;
  gap: 8px;
}

    .p-price{
      flex: 1;
      min-width: 0;
      line-height: 1.15;
    }
}