/* =========================================================
   Azul Stationary – complementos a la maqueta (style.css)
   Solo lo que la maqueta no traía: listado de tienda, paginación,
   stock por sucursal, opciones de entrega, avisos y ajustes menores.
   ========================================================= */

/* ---------- Generales ---------- */
.logo img{width:auto;height:56px}
.footer .about img{width:auto;height:70px}
.onsale{display:inline-block}
.nav>ul>li.is-active>a{color:var(--primary)}
.mega-col h4 a,.vmenu-sub h4 a{color:var(--secondary)}
.mega-col h4 a:hover,.vmenu-sub h4 a:hover{color:var(--primary)}
.vmenu-sub{min-width:auto}
.vmenu-sub>div{min-width:170px}
.btn.is-disabled{background:var(--border);color:var(--light);pointer-events:none}
.product-cart form{margin:0}
.notice a{text-decoration:underline}
.notice .btn{text-decoration:none;margin-top:12px;color:#fff}
.lead-note{font-size:16px;max-width:820px;margin-bottom:30px}
.order-notes{margin-top:24px}
.color-dot{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--c);border:1px solid var(--border);vertical-align:middle;margin-right:4px}
.product-details{margin:0 0 24px;padding-left:18px;list-style:disc;font-size:15px;line-height:1.7}
.product-details li::marker{color:var(--primary)}
.product-brand a{color:inherit}
.product-brand a:hover,.product-meta a:hover{color:var(--primary)}
.product-brand{font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--light);margin:-4px 0 10px}
.tab-more{text-align:center;margin:40px 0 0}
.icon-search-mobile{display:none!important}
@media(max-width:1023px){.icon-search-mobile{display:inline-flex!important}}
.mobile-search{padding:0 20px 16px}
.mobile-search input{width:100%;border:1px solid var(--border);border-radius:30px;padding:10px 18px}

/* En pantallas táctiles no hay hover: el botón "Agregar" siempre visible */
@media(hover:none){
  .product::before{display:none}
  .product-cart{position:static;opacity:1;visibility:visible;padding:10px 0 0}
  .product-cart .btn{padding:11px 16px;font-size:11px}
}

/* ---------- Autocompletar del buscador ---------- */
.header-search{position:relative;overflow:visible}
.suggest{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:120;max-height:70vh;overflow:auto;padding:8px 0;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.12)}
.suggest[hidden]{display:none}
.suggest a{display:flex;align-items:center;gap:12px;padding:8px 18px;font-size:14px;color:var(--text)}
.suggest a:hover,.suggest a.is-active{background:var(--bg-soft);color:var(--secondary)}
.suggest-group small{flex:none;width:72px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--light)}
.suggest-group span{flex:1;color:var(--secondary);font-weight:500}
.suggest-group em{font-style:normal;font-size:12px;color:var(--light)}
.suggest-group+.suggest-item{border-top:1px solid var(--border);margin-top:6px;padding-top:12px}
.suggest-item img{flex:none;width:42px;height:42px;object-fit:cover;border-radius:6px;background:var(--bg-soft)}
.suggest-item span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.suggest-item b{flex:none;font-weight:500;color:var(--secondary)}
.suggest-item.is-out{opacity:.55}
.suggest-all{justify-content:center;border-top:1px solid var(--border);margin-top:6px;font-weight:500;color:var(--primary)!important}
.suggest-empty{margin:0;padding:10px 18px;font-size:14px;color:var(--light)}

/* ---------- Tienda (listado) ---------- */
.shop-layout{display:grid;gap:40px;margin-bottom:80px}
@media(min-width:1024px){.shop-layout{grid-template-columns:270px 1fr}}
.shop-main .page-title{margin-bottom:6px}
.shop-desc{margin-bottom:24px}
.shop-sidebar .widget{margin-bottom:36px}
.shop-sidebar h3{font-size:18px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border)}
.cat-list li a{display:flex;justify-content:space-between;gap:10px;padding:6px 0;font-size:14px;color:var(--text)}
.cat-list li a:hover,.cat-list li.is-active>a{color:var(--primary)}
.cat-list .count{font-size:12px;color:var(--light)}
.cat-list ul{padding-left:14px;border-left:1px solid var(--border);margin:4px 0 8px}
.shop-toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:30px}
.shop-toolbar .result-count{margin:0;font-size:14px}
.shop-toolbar select{border:1px solid var(--border);border-radius:30px;padding:8px 18px;background:#fff;color:var(--secondary)}
.shop-grid{margin-bottom:60px}
@media(min-width:1200px){.shop-grid.products--3{grid-template-columns:repeat(4,1fr)}}

/* ---------- Facetas (colecciones, marcas, colores, precio) ---------- */
.facet-list{max-height:280px;overflow:auto;padding-right:4px}
.facet-list li a{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:14px;color:var(--text)}
.facet-list li a:hover{color:var(--primary)}
.facet-list .box{flex:none;width:16px;height:16px;border:1px solid var(--border);border-radius:3px;background:#fff;transition:var(--ease)}
.facet-list li.is-active .box{background:var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center/14px no-repeat;border-color:var(--primary)}
.facet-list li.is-active a{color:var(--secondary);font-weight:500}
.facet-list .count{margin-left:auto;font-size:12px;color:var(--light)}
.facet-list .color-dot{margin:0}
.price-filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.price-filter input{width:90px;border:1px solid var(--border);border-radius:30px;padding:8px 14px}
.price-filter .btn{padding:10px 18px;font-size:12px}
.filter-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:20px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid var(--border);border-radius:30px;font-size:13px;color:var(--secondary)}
.chip .i{width:12px;height:12px}
.chip:hover{border-color:var(--primary);color:var(--primary)}
.chip-clear{font-size:13px;text-decoration:underline;color:var(--light)}

/* ---------- Colecciones ---------- */
.collections{margin-bottom:80px}
.collections--home{margin-bottom:0}
@media(min-width:1024px){.collections{grid-template-columns:repeat(4,1fr)}.collections--home{grid-template-columns:repeat(3,1fr)}}
.collections .category img{aspect-ratio:1/1}
.collections .category-label{flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;padding:24px;background:linear-gradient(transparent 55%,rgba(0,0,0,.35))}
.collections .category-label small{color:#fff;font-size:12px;text-shadow:0 1px 3px rgba(0,0,0,.5)}

/* ---------- Paginación ---------- */
.pagination{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.pagination .page{min-width:42px;height:42px;padding:0 10px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:50%;font-size:14px;color:var(--secondary)}
.pagination a.page:hover,.pagination .current{background:var(--primary);border-color:var(--primary);color:#fff}
.pagination .dots{border:0}

/* ---------- Ficha: stock por sucursal ---------- */
.branch-stock{margin:26px 0;padding:18px 20px;border:1px solid var(--border);border-radius:6px}
.branch-stock h4{display:flex;align-items:center;gap:8px;font-size:14px;margin-bottom:10px}
.branch-stock li{display:flex;justify-content:space-between;gap:16px;padding:5px 0;font-size:14px;border-bottom:1px dashed var(--border)}
.branch-stock li:last-child{border:0}
.branch-stock li b{font-weight:500;color:#2E9E6B}
.branch-stock li.out b{color:var(--light)}

/* ---------- Carrito ---------- */
.cart-table button.remove{cursor:pointer;padding:0}
.cart-actions{justify-content:space-between}

/* ---------- Checkout ---------- */
.delivery-options{display:grid;gap:12px;margin-bottom:20px}
@media(min-width:768px){.delivery-options{grid-template-columns:1fr 1fr}}
.delivery-option{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border:1px solid var(--border);border-radius:6px;cursor:pointer;transition:var(--ease)}
.delivery-option:has(input:checked){border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.delivery-option input{margin-top:6px}
.delivery-option b{display:block;color:var(--secondary)}
.delivery-option small{display:block;font-size:13px;color:var(--light)}
.delivery-panel[hidden],.payment-method[hidden]{display:none!important}
.place-order[disabled]{opacity:.6;cursor:wait}

/* ---------- Pedido ---------- */
.order-standalone{max-width:900px}
.pay-info>div{line-height:1.7}

/* ---------- Contacto / 404 ---------- */
.branch-grid{display:grid;gap:20px;margin:20px 0 30px}
@media(min-width:768px){.branch-grid{grid-template-columns:repeat(2,1fr)}}
.not-found{text-align:center;max-width:620px;margin:20px auto 90px}
.not-found .header-search{display:flex;margin:30px auto}

/* ---------- Aviso flotante (agregar al carrito) ---------- */
.toast{position:fixed;left:50%;bottom:30px;z-index:200;transform:translate(-50%,20px);max-width:min(92vw,520px);padding:14px 22px;border-radius:8px;background:var(--secondary);color:#fff;font-size:14px;box-shadow:0 10px 30px rgba(0,0,0,.2);opacity:0;visibility:hidden;transition:var(--ease)}
.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}
.toast a{color:var(--accent);text-decoration:underline}
.toast--error{background:var(--primary)}

/* ---------- Galería del producto: zoom en el lugar y visor ---------- */
.pgallery-main{overflow:hidden;cursor:zoom-in}
.pgallery-main img{transition:transform .25s ease}
.pgallery-main.can-zoom.is-zoomed img{transform:scale(2)}
.pgallery-main .zoom{z-index:2;width:40px;height:40px;align-items:center;justify-content:center;background:rgba(255,255,255,.85);border-radius:50%;font-size:20px}
.pgallery-main .onsale{z-index:2}
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(18,22,40,.97);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s}
.lightbox.open{opacity:1;visibility:visible}
.lb-stage{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:60px 70px;overflow:hidden}
.lb-stage img{max-width:100%;max-height:100%;object-fit:contain;background:#fff;cursor:zoom-in;transition:transform .2s ease;user-select:none;-webkit-user-drag:none;touch-action:pan-y}
.lightbox.is-zoomed .lb-stage img{cursor:zoom-out;transition:none;touch-action:none}
.lb-close,.lb-nav{position:absolute;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:rgba(18,22,40,.7);color:#fff;font-size:22px;transition:var(--ease)}
.lb-close:hover,.lb-nav:hover{background:var(--primary)}
.lb-close{top:14px;right:14px}
.lb-nav{top:50%;transform:translateY(-50%)}
.lb-prev{left:14px}
.lb-next{right:14px}
.lightbox.single .lb-nav{display:none}
.lb-counter{position:absolute;bottom:14px;left:0;right:0;margin:0;text-align:center;color:rgba(255,255,255,.8);font-size:14px}
@media(max-width:767px){
  .lb-stage{padding:64px 0 48px}
  .lb-nav{top:auto;transform:none;bottom:6px;width:40px;height:40px}
  .lb-prev{left:16px}
  .lb-next{right:16px}
  .pgallery-thumbs{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
  .pgallery-thumbs button{width:auto;height:auto;aspect-ratio:1}
}

/* ---------- Tienda en celular: filtros en panel lateral ---------- */
.filters-head,.btn-filters{display:none}
@media(max-width:1023px){
  .shop-sidebar{position:fixed;inset:0 auto 0 0;z-index:100;width:min(340px,88vw);background:#fff;padding:0 22px 30px;overflow-y:auto;transform:translateX(-100%);transition:transform .3s ease}
  .shop-sidebar.open{transform:none;box-shadow:0 0 40px rgba(0,0,0,.2)}
  .filters-head{display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:1;background:#fff;padding:18px 0 14px;margin-bottom:16px;border-bottom:1px solid var(--border)}
  .filters-head h2{font-size:20px;margin:0}
  .filters-head button{font-size:22px;display:inline-flex;color:var(--secondary)}
  .filters-shade{position:fixed;inset:0;z-index:99;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:var(--ease)}
  .filters-shade.show{opacity:1;visibility:visible}
  .btn-filters{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:30px;padding:8px 18px;background:#fff;color:var(--secondary);font-size:14px}
  .btn-filters .badge{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--primary);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center}
  .shop-toolbar{gap:10px}
  .shop-toolbar .result-count{flex-basis:100%}
  .shop-toolbar select{flex:1;min-width:0}
}

/* ---------- Ajustes de pantallas angostas ---------- */
.product-cart .btn{max-width:100%;white-space:normal;text-align:center}
@media(max-width:767px){
  .product-cart{padding-left:8px;padding-right:8px}
  .product-tabs .tabs-nav{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;gap:0 22px;scrollbar-width:none}
  .product-tabs .tabs-nav::-webkit-scrollbar{display:none}
  .product-tabs .tabs-nav button{font-size:16px;padding:16px 0;white-space:nowrap}
  .sticky-cart{padding:8px 0}
  .sticky-cart .container{gap:12px}
  .sticky-cart img{width:48px;height:48px}
  .sticky-cart .price{white-space:nowrap}
  .sticky-cart .btn{padding:11px 16px;font-size:13px;white-space:nowrap}

  /* Carrito: cada producto como tarjeta en vez de tabla */
  .table-scroll:has(.cart-table){overflow:visible}
  .cart-table{min-width:0}
  .cart-table thead{display:none}
  .cart-table,.cart-table tbody{display:block}
  .cart-table tr.cart-item{display:grid;grid-template-columns:76px 1fr auto;grid-template-areas:"thumb name remove" "thumb price price" "thumb qty sub";gap:6px 12px;align-items:center;padding:16px 0;border-bottom:1px solid var(--border)}
  .cart-table td{display:block;padding:0;border:0}
  .cart-table td:nth-child(1){grid-area:remove;align-self:start}
  .cart-table td:nth-child(2){grid-area:thumb;align-self:start}
  .cart-table td.name{grid-area:name;font-size:14px;line-height:20px}
  .cart-table td:nth-child(4){grid-area:price}
  .cart-table td:nth-child(5){grid-area:qty}
  .cart-table td.subtotal{grid-area:sub;font-weight:500;white-space:nowrap}
  .cart-table .thumb{width:76px;height:76px}
  .cart-table .price{font-size:14px}
  .cart-table .qty{width:100px}
  .cart-table .qty input{width:38px}
  .cart-totals{padding:24px 20px 28px}
}