/* Public shop: phone layout fixes (loaded after shop.css). */

/* The old 64px top header is gone: the category tabs stick to the top on desktop, scroll away on phones
   (a sticky bar would sit under the floating menu button). */
@media (min-width: 820px) { .cat-tabs { top: 0; } }
@media (max-width: 819px) {
    .cat-tabs { position: static; top: auto; }
    /* WhatsApp button: smaller and out of the way of Add to Cart buttons */
    .wa-float { width: 46px; height: 46px; right: 14px; bottom: 14px; }
    .wa-float svg { width: 24px; height: 24px; }
    #toast-container { top: 72px !important; right: 12px !important; left: 12px; align-items: flex-end; }
}

@media (max-width: 600px) {
    /* trust tabs: stacked compact rows (the earlier rule for this was overridden by source order) */
    .trust-bar-inner { grid-template-columns: 1fr; gap: 10px; padding: 18px 16px; }
    .trust-item { flex-direction: row; align-items: center; text-align: left; gap: 14px; padding: 14px 16px; }
    .trust-icon-wrap { width: 46px; height: 46px; min-width: 46px; margin-bottom: 0; flex-shrink: 0; border-radius: 10px; }
    .trust-img { width: 30px; height: 30px; }
    .trust-icon { font-size: 24px; }
    .trust-text { gap: 2px; }
    .trust-heading { font-size: 15px; }
    .trust-desc { display: block; font-size: 12px; line-height: 1.4; }

    /* catalog: slightly shorter photos so more tiles fit per screen */
    .card-image-wrap { aspect-ratio: 3 / 2; }

    /* product page: price, then the Add to Cart button, then the long spec table */
    .product-info { display: flex; flex-direction: column; }
    .product-info > * { order: 2; }
    .product-brand, .product-title, .detail-sku, .product-price-block, .product-cart-row { order: 1; }
    .product-cart-row { margin: 6px 0 14px; }
    .product-cart-row .btn-cart, .product-cart-row .btn-secondary { flex: 1 1 100%; text-align: center; padding: 14px 20px; font-size: 16px; }
    .reviews-section { padding-left: 0; padding-right: 0; }
}

/* phones: Filters button in the catalog header (opens the menu drawer at the filters) */
.gs-filters-btn { display: none; }
@media (max-width: 819px) {
    .gs-filters-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: 999px; padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
    .gs-filters-n { background: var(--green); color: #0d0d0d; border-radius: 999px; min-width: 18px; height: 18px; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }
}
/* the floating WhatsApp button would sit on top of the open menu drawer */
@media (max-width: 819px) { .gs.mobile-open ~ .wa-float { display: none; } }

/* Active filters bar above the results (all screen sizes): each chip removes one filter */
.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.af-label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); margin-right: 2px; }
.af-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text); background: var(--surface); border: 1px solid var(--border); text-decoration: none; transition: border-color .2s, background .2s; }
.af-chip:hover { border-color: var(--green); text-decoration: none; }
.af-chip span { font-size: 16px; line-height: 1; color: var(--text-muted); }
.af-clear { font-size: 13px; font-weight: 700; color: var(--green); padding: 6px 4px; }

/* ── Phone banner: show the whole laptop and put the logo + text on its screen ──
   Only for the default banner artwork (class hero-laptop is set in shop/index.html when no custom banner is
   configured), because the screen position below belongs to that picture. The artwork is 4032x1056 with the
   laptop centred: a 36%-wide centre window (1452x1056) frames the full laptop with a small margin. */
@media (max-width: 600px) {
    .video-hero.hero-laptop { aspect-ratio: 1452 / 1056; }
    .video-hero.hero-laptop .hero-banner-overlay img { object-fit: cover; object-position: 50% 50%; }
    .video-hero.hero-laptop .hero-overlay { background: none; padding: 0; }
    .video-hero.hero-laptop .hero-content {
        position: absolute; left: 21.3%; top: 17.9%; width: 57.2%; height: 54.6%;
        display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    }
    .video-hero.hero-laptop .hero-brand-icon { max-height: 9vw !important; width: auto; margin: 0 auto 1.6vw !important; }
    .video-hero.hero-laptop .hero-content h1 { font-size: 4vw; line-height: 1.15; margin-bottom: 1.2vw; text-wrap: balance; text-shadow: 0 1px 6px rgba(0, 0, 0, .7); }
    .video-hero.hero-laptop .hero-content p { font-size: 2.7vw; line-height: 1.3; margin-bottom: 0; text-wrap: balance; color: rgba(255, 255, 255, .85); text-shadow: 0 1px 4px rgba(0, 0, 0, .7); }
}