/* Dachmi — Estilos exclusivos de Tienda (Colección + Vista Rápida) */

  /* ============ PAGE HEADER (colección) ============ */
  .page-hero{ padding:170px 0 0; }
  .page-hero-inner{ text-align:center; max-width:640px; margin:0 auto; }
  .result-count{ margin-top:16px; font-size:.85rem; font-weight:600; color:var(--forest); letter-spacing:.02em; }

  /* ============ LAYOUT: filtros + grid ============ */
  .shop-layout{ display:grid; grid-template-columns:240px 1fr; gap:40px; padding:40px 0 96px; align-items:start; }

  .filters{ position:sticky; top:100px; display:flex; flex-direction:column; gap:32px; }
  .filter-group h3{ font-size:.82rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); font-family:var(--font-body); font-weight:700; margin-bottom:14px; }
  .filter-option{ display:flex; align-items:center; gap:10px; padding:6px 0; font-size:.92rem; color:var(--ink); cursor:pointer; }
  .filter-option input{ width:17px; height:17px; accent-color:var(--forest); cursor:pointer; }
  .filter-clear{ font-size:.82rem; font-weight:600; color:var(--terracotta-deep); text-decoration:underline; align-self:flex-start; }

  .shop-main{ display:flex; flex-direction:column; gap:24px; }
  .shop-toolbar{ display:flex; justify-content:flex-end; align-items:center; gap:12px; }
  .sort-select{ padding:10px 34px 10px 16px; border-radius:100px; border:1.5px solid var(--line); background:var(--cream-soft) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%232B2620" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>') no-repeat right 12px center; background-size:14px; appearance:none; font-size:.88rem; font-weight:600; color:var(--forest); cursor:pointer; }

  .prod-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
  .product-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; transition:transform 220ms ease, box-shadow 220ms ease; }
  .product-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lift); }
  .product-card.is-hidden{ display:none; }
  .product-media{ position:relative; cursor:pointer; }
  .product-media .ph{ aspect-ratio:1/1; border-radius:0; }
  .product-media .ph svg{ transition:transform 260ms ease; }
  .product-card:hover .product-media .ph svg{ transform:scale(1.08); }
  .sold-out-tag{ position:absolute; top:12px; left:12px; background:var(--ink); color:#fff; font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:5px 10px; border-radius:100px; }
  .product-body{ padding:16px 16px 18px; display:flex; flex-direction:column; gap:10px; }
  .product-body h3{ font-size:.98rem; cursor:pointer; }
  .presentation-chips{ display:flex; gap:6px; flex-wrap:wrap; }
  .chip{ font-size:12px; font-weight:600; padding:6px 11px; border-radius:100px; border:1.5px solid var(--line); color:var(--ink-soft); min-width:40px; min-height:32px; display:flex; align-items:center; justify-content:center; transition:all 180ms ease; }
  .chip.is-active, .chip:hover{ border-color:var(--forest); color:var(--forest); background:rgba(46,70,50,.06); }
  .product-footer{ display:flex; align-items:center; justify-content:space-between; margin-top:4px; }
  .price{ font-family:var(--font-display); font-weight:600; font-size:1.1rem; color:var(--forest); transition:opacity 180ms ease; }
  .add-btn{ width:36px; height:36px; border-radius:50%; background:var(--forest); color:#fff; display:flex; align-items:center; justify-content:center; transition:background 200ms ease, transform 200ms ease; }
  .add-btn:hover{ background:var(--terracotta); transform:scale(1.06); }
  .add-btn:disabled{ background:var(--line); cursor:not-allowed; }
  .add-btn svg{ width:16px; height:16px; }
  .add-btn.is-confirmed{ background:var(--gold); }

  .empty-state{ display:none; text-align:center; padding:80px 20px; color:var(--ink-soft); }
  .empty-state.is-visible{ display:block; }
  .empty-state svg{ width:40px; height:40px; margin:0 auto 16px; opacity:.4; }

  @media (max-width:1023px){
    .shop-layout{ grid-template-columns:1fr; }
    .filters{ display:none; }
    .prod-grid{ grid-template-columns:repeat(2,1fr); }
    .mobile-filter-bar{ display:flex; }
  }
  @media (max-width:767px){
    .prod-grid{ grid-template-columns:repeat(2,1fr); gap:16px; }
  }

  /* Barra móvil "Filtrar y ordenar" */
  .mobile-filter-bar{ display:none; gap:10px; }
  .mobile-filter-bar button{ flex:1; padding:12px; border-radius:100px; border:1.5px solid var(--line); font-weight:600; font-size:.88rem; color:var(--forest); display:flex; align-items:center; justify-content:center; gap:8px; background:var(--cream-soft); }
  .mobile-filter-bar svg{ width:16px; height:16px; }

  /* Bottom sheet de filtros (mobile) */
  .filter-sheet{ position:fixed; inset:0; z-index:180; visibility:hidden; }
  .filter-sheet.is-open{ visibility:visible; }
  .filter-sheet .sheet-overlay{ position:absolute; inset:0; background:rgba(33,26,20,.4); opacity:0; transition:opacity 260ms ease; }
  .filter-sheet.is-open .sheet-overlay{ opacity:1; }
  .filter-sheet .sheet-panel{ position:absolute; left:0; right:0; bottom:0; max-height:82vh; overflow-y:auto; background:var(--cream-soft); border-radius:24px 24px 0 0; padding:24px 24px 32px; transform:translateY(100%); transition:transform 320ms ease; }
  .filter-sheet.is-open .sheet-panel{ transform:translateY(0); }
  .sheet-handle{ width:40px; height:4px; background:var(--line); border-radius:100px; margin:0 auto 20px; }
  .sheet-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }

  /* ============ QUICK VIEW MODAL ============ */
  .qv-overlay{ position:fixed; inset:0; z-index:200; visibility:hidden; display:flex; align-items:center; justify-content:center; padding:24px; }
  .qv-overlay.is-open{ visibility:visible; }
  .qv-backdrop{ position:absolute; inset:0; background:rgba(33,26,20,.55); opacity:0; transition:opacity 260ms ease; }
  .qv-overlay.is-open .qv-backdrop{ opacity:1; }
  .qv-modal{ position:relative; z-index:1; background:var(--white); width:100%; max-width:920px; max-height:88vh; overflow-y:auto; border-radius:var(--radius-lg); display:grid; grid-template-columns:1fr 1fr; opacity:0; transform:scale(.96); transition:opacity 260ms ease, transform 260ms ease; }
  .qv-overlay.is-open .qv-modal{ opacity:1; transform:scale(1); }
  .qv-close{ position:absolute; top:18px; right:18px; z-index:2; width:38px; height:38px; border-radius:50%; background:var(--cream-soft); display:flex; align-items:center; justify-content:center; }
  .qv-close svg{ width:18px; height:18px; }
  .qv-gallery{ padding:40px; display:flex; flex-direction:column; gap:14px; }
  .qv-main-img .ph{ aspect-ratio:1/1; border-radius:var(--radius-md); }
  .qv-thumbs{ display:flex; gap:10px; }
  .qv-thumbs .ph{ width:64px; height:64px; border-radius:10px; cursor:pointer; }
  .qv-thumbs .ph.is-active{ border-color:var(--terracotta); border-width:2px; }
  .qv-info{ padding:40px 40px 40px 8px; display:flex; flex-direction:column; gap:16px; }
  .qv-info h2{ font-size:1.5rem; }
  .qv-price{ font-family:var(--font-display); font-size:1.5rem; font-weight:600; color:var(--terracotta-deep); }
  .qv-section-label{ font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); }
  .qv-chips{ display:flex; gap:8px; flex-wrap:wrap; }
  .qv-chip{ padding:9px 18px; border-radius:100px; border:1.5px solid var(--line); font-weight:600; font-size:.88rem; color:var(--ink-soft); min-height:40px; }
  .qv-chip.is-active, .qv-chip:hover{ border-color:var(--forest); color:var(--forest); background:rgba(46,70,50,.06); }
  .qv-qty{ display:flex; align-items:center; gap:14px; }
  .qty-stepper{ display:flex; align-items:center; border:1.5px solid var(--line); border-radius:100px; }
  .qty-stepper button{ width:36px; height:36px; font-size:1.1rem; font-weight:600; color:var(--forest); }
  .qty-stepper span{ width:32px; text-align:center; font-weight:600; }
  .qv-ctas{ display:flex; gap:10px; }
  .qv-ctas .btn-primary{ flex:1; }
  .qv-share{ width:52px; height:52px; border-radius:100px; border:1.5px solid var(--forest); display:flex; align-items:center; justify-content:center; color:var(--forest); flex-shrink:0; transition:background 200ms ease, color 200ms ease; }
  .qv-share:hover{ background:var(--forest); color:#fff; }
  .qv-share svg{ width:18px; height:18px; }
  .qv-desc{ font-size:.92rem; line-height:1.6; }
  .qv-full-link{ font-size:.88rem; font-weight:600; color:var(--terracotta-deep); text-decoration:underline; align-self:flex-start; }
  .qv-toast{ position:fixed; bottom:28px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--forest); color:#fff; padding:12px 22px; border-radius:100px; font-size:.85rem; font-weight:600; z-index:300; opacity:0; transition:opacity 220ms ease, transform 220ms ease; pointer-events:none; }
  .qv-toast.is-visible{ opacity:1; transform:translateX(-50%) translateY(0); }

  @media (max-width:1023px){
    .qv-modal{ max-width:760px; }
  }
  @media (max-width:767px){
    .qv-overlay{ padding:0; align-items:flex-end; }
    .qv-modal{ max-width:100%; max-height:92vh; border-radius:24px 24px 0 0; grid-template-columns:1fr; transform:translateY(100%); }
    .qv-overlay.is-open .qv-modal{ transform:translateY(0); }
    .qv-gallery{ padding:24px 24px 0; }
    .qv-info{ padding:20px 24px 32px; }
  }