/* =========================================================
   Alpine Nomad — catálogo (tienda.html) y ficha (producto.html)
   ========================================================= */

/* ---------- Cabecera del catálogo ---------- */
.shop-hero{ position:relative; background:var(--bg); color:var(--paper); padding:calc(var(--header-h) + clamp(36px,6vw,72px)) 0 clamp(34px,5vw,58px); overflow:hidden; isolation:isolate; }
.shop-hero::before{
  content:''; position:absolute; inset:0; z-index:-1; opacity:.5;
  background:
    radial-gradient(60% 120% at 100% 0%, rgba(199,242,59,.14), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 59px, rgba(246,244,238,.05) 59px 60px),
    repeating-linear-gradient(90deg, transparent 0 89px, rgba(246,244,238,.05) 89px 90px);
}
.crumbs{ display:flex; flex-wrap:wrap; gap:8px; font-size:13px; color:#9A9CA1; margin-bottom:18px; }
.crumbs a:hover{ color:var(--lime); }
.crumbs span[aria-hidden]{ opacity:.5; }
.shop-hero h1{ font-size:clamp(48px,8vw,116px); }
.shop-hero p.lead{ margin-top:16px; max-width:52ch; color:#c9cbd0; font-size:clamp(15px,1.4vw,18px); }
.groups{ display:flex; gap:8px; margin-top:26px; flex-wrap:wrap; }
.groups .chip{ color:var(--paper); border-color:var(--line-light); }
.groups .chip:hover, .groups .chip.is-active{ background:var(--lime); border-color:var(--lime); color:var(--ink); }

/* ---------- Barra de filtros ---------- */
.toolbar{
  position:sticky; top:var(--header-h); z-index:40; background:rgba(246,244,238,.94);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
}
.toolbar__row{ display:flex; align-items:center; gap:16px; padding-block:12px; }
.cat-chips{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; flex:1; min-width:0; padding-block:2px; -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent); mask-image:linear-gradient(90deg,#000 92%,transparent); }
.cat-chips::-webkit-scrollbar{ display:none; }
.cat-chips .chip{ white-space:nowrap; flex:none; }
.chip small{ margin-left:7px; font-size:11.5px; opacity:.6; font-weight:700; }
.tools{ display:flex; align-items:center; gap:12px; flex:none; }
.field{ position:relative; }
.field input, .field select{
  height:42px; border:1.5px solid var(--line); border-radius:var(--radius); background:#fff; padding:0 14px; font-size:14px; font-weight:500; outline:none; transition:border-color .2s;
}
.field input:focus, .field select:focus{ border-color:var(--ink); }
.field--search input{ width:220px; padding-left:38px; }
.field--search svg{ position:absolute; left:12px; top:50%; width:18px; height:18px; transform:translateY(-50%); color:var(--muted-dark); pointer-events:none; }
.shop{ padding:28px 0 clamp(70px,9vw,120px); min-height:60vh; }
.result-count{ font-size:14px; color:var(--muted-dark); margin-bottom:24px; }
@media (max-width:1000px){
  .toolbar__row{ flex-wrap:wrap; }
  .cat-chips{ flex:1 1 100%; }
  .tools{ flex:1 1 100%; flex-wrap:wrap; }
  .field--search{ flex:1 1 180px; } .field--search input{ width:100%; }
}
@media (max-width:520px){ .tools .field select{ max-width:150px; } }

/* ---------- Ficha de producto ---------- */
.pdp{ padding:calc(var(--header-h) + 26px) 0 clamp(50px,7vw,90px); }
.pdp .crumbs{ color:var(--muted-dark); margin-bottom:22px; }
.pdp .crumbs a:hover{ color:var(--rust); }
.pdp__grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(28px,5vw,72px); align-items:start; }

.gallery{ display:grid; grid-template-columns:84px 1fr; gap:14px; }
.gallery__thumbs{ display:flex; flex-direction:column; gap:10px; }
.gallery__thumbs button{ aspect-ratio:4/5; border-radius:var(--radius); overflow:hidden; border:2px solid transparent; background:var(--stone); opacity:.7; transition:opacity .2s, border-color .2s; }
.gallery__thumbs button:hover{ opacity:1; }
.gallery__thumbs button.is-active{ border-color:var(--ink); opacity:1; }
.gallery__thumbs img{ width:100%; height:100%; object-fit:cover; }
.gallery__main{ position:relative; aspect-ratio:4/5; border-radius:var(--radius-l); overflow:hidden; background:var(--stone); cursor:zoom-in; }
.gallery__main img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .25s ease-out, opacity .3s; }
.gallery__main.is-zoom img{ transform:scale(1.9); }
.gallery__main .pcard__badges{ left:14px; top:14px; }
.gallery--single{ grid-template-columns:1fr; }
.gallery--single .gallery__thumbs{ display:none; }

.info{ position:sticky; top:calc(var(--header-h) + 24px); }
.info__cat{ font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--rust); }
.info h1{ font-size:clamp(40px,4.6vw,66px); margin:10px 0 16px; }
.info__price{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; font-family:var(--font-display); font-weight:700; font-size:clamp(34px,3.4vw,46px); line-height:1; }
.info__price s{ font-family:var(--font-body); font-size:17px; font-weight:500; color:var(--muted); }
.info__price .badge{ align-self:center; font-family:var(--font-body); }
.stock{ display:inline-flex; align-items:center; gap:9px; margin-top:16px; font-size:14px; font-weight:600; }
.stock::before{ content:''; width:9px; height:9px; border-radius:50%; background:#2fb463; box-shadow:0 0 0 4px rgba(47,180,99,.18); }
.stock--low{ color:#b4400f; } .stock--low::before{ background:var(--rust); box-shadow:0 0 0 4px rgba(214,82,28,.18); }
.stock--out{ color:var(--muted-dark); } .stock--out::before{ background:#9a9a9a; box-shadow:none; }

.opt{ margin-top:28px; scroll-margin-top:120px; }
.opt__label{ display:flex; justify-content:space-between; font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:12px; }
.opt__label em{ font-style:normal; color:var(--rust); text-transform:none; letter-spacing:0; font-weight:600; }
.sizes{ display:flex; flex-wrap:wrap; gap:8px; }
.size{ min-width:52px; height:48px; padding:0 12px; border:1.5px solid var(--line); border-radius:var(--radius); background:#fff; font-weight:700; font-size:15px; transition:all .15s; }
.size:hover{ border-color:var(--ink); }
.size[aria-checked="true"]{ background:var(--ink); border-color:var(--ink); color:var(--lime); }
.sizes.is-error .size{ border-color:var(--rust); animation:shake .4s; }
@keyframes shake{ 25%{ transform:translateX(-4px); } 75%{ transform:translateX(4px); } }
.buy{ display:grid; gap:12px; margin-top:28px; }
.buy__row{ display:grid; grid-template-columns:auto 1fr; gap:12px; }
.buy__row .qty{ margin-top:0; height:52px; }
.buy__row .qty button{ width:42px; height:100%; }
.buy .btn{ min-height:52px; }
.info__desc{ margin-top:34px; padding-top:26px; border-top:1px solid var(--line); }
.info__desc h2{ font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin-bottom:12px; font-family:var(--font-body); }
.info__desc p{ color:#3b3e43; white-space:pre-line; max-width:60ch; }
.perks{ display:grid; gap:10px; margin-top:26px; font-size:14px; color:var(--muted-dark); }
.perks li{ display:flex; gap:10px; align-items:center; }
.perks svg{ width:20px; height:20px; color:var(--ink); flex:none; }

.related{ padding:clamp(50px,7vw,90px) 0 clamp(70px,9vw,120px); background:var(--stone); }
.related h2{ font-size:clamp(36px,4.6vw,60px); margin-bottom:32px; }

.sticky-bar{
  position:fixed; inset:auto 0 0 0; z-index:85; display:none; align-items:center; gap:12px; padding:12px var(--gutter) max(12px,env(safe-area-inset-bottom));
  background:rgba(246,244,238,.96); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-top:1px solid var(--line);
  transform:translateY(110%); transition:transform .35s var(--ease);
}
.sticky-bar.is-show{ transform:none; }
.sticky-bar__price{ font-family:var(--font-display); font-weight:700; font-size:26px; line-height:1; margin-right:auto; }
.sticky-bar__price small{ display:block; font-family:var(--font-body); font-size:11.5px; font-weight:600; color:var(--muted-dark); letter-spacing:.02em; margin-bottom:3px; max-width:26ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

@media (max-width:900px){
  .pdp__grid{ grid-template-columns:1fr; }
  .info{ position:static; }
  .gallery{ grid-template-columns:1fr; }
  .gallery__thumbs{ flex-direction:row; order:2; overflow-x:auto; }
  .gallery__thumbs button{ width:68px; flex:none; }
  .sticky-bar{ display:flex; }
}