/* Artwork Empire — global responsive layer
 * Loaded on every page after tokens.css.
 * Source HTML files in New Design V2 had no @media queries — this file
 * carries every mobile/tablet adjustment in one place so future tweaks
 * are predictable.
 *
 * Breakpoints:
 *   ≤960px  tablet (sidebar collapses, multi-col grids start halving)
 *   ≤640px  phone  (most grids → 1–2 cols, hamburger nav, footer stacks)
 */

/* ════════════════════════════════════════════════════════════════════
   HAMBURGER NAV (always rendered, hidden ≥961px)
   ════════════════════════════════════════════════════════════════════ */
.nav-burger{
    display:none;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    background:none;
    border:none;
    border-radius:50%;
    padding:0;
    cursor:pointer;
    flex-shrink:0;
    position:relative;
    transition:background 0.2s ease;
    -webkit-tap-highlight-color:transparent;
}
.nav-burger:hover{background:rgba(44,58,46,0.06);}
.nav-burger:active{transform:scale(0.94);transition:transform 0.1s ease, background 0.2s ease;}

/* The 3 lines live inside a 22×16 box so the rotation pivots cleanly */
.nav-burger span{
    position:absolute;
    left:9px;
    width:22px;
    height:2px;
    background:var(--col-primary);
    border-radius:2px;
    transition:transform 0.32s cubic-bezier(0.65,0.05,0.36,1), opacity 0.18s ease, top 0.32s cubic-bezier(0.65,0.05,0.36,1);
    transform-origin:center;
}
.nav-burger span:nth-child(1){top:13px;}
.nav-burger span:nth-child(2){top:19px;}
.nav-burger span:nth-child(3){top:25px;}

/* Open state: lines collapse to center + cross into ✕ */
.site-nav.nav-open .nav-burger span:nth-child(1){top:19px;transform:rotate(45deg);}
.site-nav.nav-open .nav-burger span:nth-child(2){opacity:0;transform:scaleX(0);}
.site-nav.nav-open .nav-burger span:nth-child(3){top:19px;transform:rotate(-45deg);}

/* Mobile-only menu items — hidden on desktop so they don't appear as extra
   nav links. The @media block below re-enables them. */
.nav-mobile-account{display:none;}

/* ════════════════════════════════════════════════════════════════════
   ≤ 960px — TABLET / PHONE
   ════════════════════════════════════════════════════════════════════ */
@media (max-width:960px){
    /* Nav: hamburger + slide-down panel ─────────────────── */
    .nav-burger{display:flex;}
    .nav-inner{gap:12px;}
    .nav-logo img{height:38px;}
    .nav-wordmark{font-size:15px;}
    .nav-wordmark small{font-size:8px;letter-spacing:0.14em;}

    .nav-links{
        position:fixed;
        top:72px;
        left:0;
        right:0;
        flex-direction:column;
        background:var(--col-lite);
        border-bottom:1px solid var(--col-border);
        gap:0;
        padding:0;
        max-height:calc(100vh - 72px);
        overflow-y:auto;
        transform:translateY(-12px);
        opacity:0;
        pointer-events:none;
        transition:opacity 0.2s ease, transform 0.2s ease;
        z-index:899;
    }
    .site-nav.nav-open .nav-links{
        transform:translateY(0);
        opacity:1;
        pointer-events:auto;
    }
    .nav-links li{border-bottom:1px solid var(--col-border);}
    .nav-links li:last-child{border-bottom:none;}
    .nav-links a{
        display:block;
        padding:18px var(--outer);
        font-size:14px;
        opacity:1;
        letter-spacing:0.06em;
    }

    /* Account row in mobile menu — gets a top border + icon alignment */
    .nav-mobile-account{display:list-item;margin-top:8px;border-top:1px solid var(--col-border);}
    .nav-mobile-account a{display:flex !important;align-items:center;gap:12px;color:var(--col-grey);}
    .nav-mobile-account svg{flex-shrink:0;stroke:var(--col-grey);}

    /* Right-side nav: hide the desktop-only account icon (the menu carries it now) */
    .nav-icon-btn{display:none;}
    .nav-cart-wrap{font-size:0;}
    .nav-cart-wrap svg{width:20px;height:20px;}
    .nav-cart-wrap .nav-cart-count{font-size:10px;}

    /* Lang dropdown stays */
    .nav-lang-btn{padding:6px 6px;}
    .nav-lang-code{font-size:11px;}

    /* Footer: 4-col → 2-col ──────────────────────────── */
    .footer-grid{grid-template-columns:1fr 1fr;gap:32px;}
    .footer-bottom{flex-direction:column;gap:14px;align-items:flex-start;}
    .footer-langs{flex-wrap:wrap;}
}

/* ════════════════════════════════════════════════════════════════════
   ≤ 640px — PHONE
   ════════════════════════════════════════════════════════════════════ */
@media (max-width:640px){
    /* Footer: 1-col */
    .footer-grid{grid-template-columns:1fr;gap:36px;}
    .footer-tag{max-width:100%;}

    /* HOMEPAGE ─────────────────────────────────────────── */
    .prod-grid{grid-template-columns:repeat(2,1fr);}
    .trust-strip-in{grid-template-columns:1fr;}
    .trust-block+.trust-block{border-left:none;border-top:1px solid var(--col-border);}
    .craft{grid-template-columns:1fr;gap:32px;padding-top:48px;padding-bottom:48px;}
    .craft-div{display:none;}
    .craft-stats{grid-template-columns:1fr 1fr;gap:18px;margin-top:28px;}
    .subj-grid{grid-template-columns:repeat(2,1fr);}
    .hiw-grid{grid-template-columns:repeat(2,1fr);}
    .viz-grid{grid-template-columns:repeat(2,1fr);}
    .artists-grid{grid-template-columns:1fr;gap:32px;}
    .artists-img-secondary{display:none;}
    .rev-grid{grid-template-columns:1fr;}
    .gift{grid-template-columns:1fr;gap:32px;}
    .gift-badge{position:static;margin-top:-1px;width:fit-content;}
    .cta-banner{grid-template-columns:1fr;gap:32px;}
    .cta-btns{flex-direction:column;align-items:stretch;}

    /* Hero: cap headline so it doesn't dominate */
    .hero{min-height:80svh;}
    .t-display{font-size:clamp(36px,9vw,52px);}
    .hero-promo{display:none;}

    /* Section heading rows: stack */
    .sh-row{flex-direction:column;align-items:flex-start;}

    /* PRODUCT PAGE ─────────────────────────────────────── */
    .pp{grid-template-columns:1fr;gap:36px;padding-top:32px;}
    .gallery-wrap{position:static;}
    .gallery{grid-template-columns:1fr;}
    .thumbs{flex-direction:row;order:2;overflow-x:auto;}
    .thumb{width:64px;height:64px;}
    .pi-title{font-size:clamp(26px,7vw,34px);}
    .pi-bullets li{font-size:13px;}
    .pill-grid{grid-template-columns:1fr 1fr;}
    .qty-row{flex-wrap:wrap;}
    .config-inline{flex-basis:100%;justify-content:space-between;}
    .prod-hiw-grid{grid-template-columns:1fr 1fr;}
    .texture-inner{grid-template-columns:1fr;gap:32px;}
    .texture-points{grid-template-columns:1fr;}
    .ap-in{grid-template-columns:1fr;gap:32px;}
    section.ap .ap-img-wrap{position:static;}
    .rev-grid,.rel-grid{grid-template-columns:1fr 1fr;}

    /* SHOP / ARCHIVE ───────────────────────────────────── */
    .shop-layout{grid-template-columns:1fr;gap:24px;}
    .sidebar{position:static;}
    .prod-grid[data-view],
    .prod-grid[data-view="3"],
    .prod-grid[data-view="4"],
    .prod-grid[data-view="5"]{grid-template-columns:repeat(2,1fr);}
    .bs-row-grid{grid-template-columns:1fr 1fr;}
    .ah-title{font-size:clamp(36px,10vw,48px);}
    /* Tag strip stays scrollable */

    /* CUSTOM ORDER ──────────────────────────────────────── */
    .co-steps{grid-template-columns:repeat(2,1fr);}
    .wwc-grid{grid-template-columns:1fr;}
    .prom-grid{grid-template-columns:1fr;}
    .form-output{padding:24px;}

    /* HIW PAGE ──────────────────────────────────────────── */
    .overview-inner{grid-template-columns:repeat(2,1fr);}
    .ov-step+.ov-step{border-left:none;}
    .ov-step:nth-child(2),
    .ov-step:nth-child(4){border-left:1px solid rgba(44,58,46,0.1);}
    .step-section{grid-template-columns:1fr;min-height:0;}
    .step-section.reverse .ss-img,
    .step-section.reverse .ss-text{order:0;}
    .ss-img img{aspect-ratio:4/3;height:auto;}
    .photo-strip{grid-template-columns:repeat(2,1fr);}
    .why-inner{grid-template-columns:1fr;}
    .cta-banner-inner{grid-template-columns:1fr;}

    /* ABOUT ─────────────────────────────────────────────── */
    .symphony{grid-template-columns:1fr;gap:36px;}
    .artist-intro{grid-template-columns:1fr;gap:32px;}
    .artist-section{grid-template-columns:1fr;gap:32px;}
    .artist-section.reverse .art-img,
    .artist-section.reverse .art-text{order:0;}
    .relief-inner{grid-template-columns:1fr;gap:32px;}
    .frames{grid-template-columns:1fr;gap:32px;}
    .pres-inner{grid-template-columns:1fr;gap:32px;}

    /* CONTACT ───────────────────────────────────────────── */
    .contact-main{grid-template-columns:1fr;gap:32px;}

    /* BLOG INDEX ────────────────────────────────────────── */
    .blog-header{grid-template-columns:1fr;gap:32px;}
    .blog-layout{grid-template-columns:1fr;gap:32px;}
    .blog-sidebar{position:static;}
    .post-card{grid-template-columns:1fr;gap:16px;}

    /* SINGLE POST ──────────────────────────────────────── */
    .article-layout{grid-template-columns:1fr;gap:32px;}
    .article-sidebar{position:static;}
    .rp-grid{grid-template-columns:1fr;}
    .featured-img{aspect-ratio:4/3;}

    /* LEGAL ────────────────────────────────────────────── */
    .page-wrap{grid-template-columns:1fr;gap:32px;}
    .page-sidebar{position:static;}

    /* CART / CHECKOUT — flex from woocommerce-blocks.css already wraps; ensure
       sidebar isn't sticky on small screens so it shows below items, not above. */
    .wc-page-wrap .wc-block-cart__sidebar,
    .wc-page-wrap .wc-block-checkout__sidebar{position:static;}
    .wc-page-header .wc-page-title{font-size:clamp(28px,8vw,40px);}
}

/* ════════════════════════════════════════════════════════════════════
   ≤ 480px — Small phones, last polish
   ════════════════════════════════════════════════════════════════════ */
@media (max-width:480px){
    .prod-grid,
    .prod-grid[data-view],
    .prod-grid[data-view="3"],
    .prod-grid[data-view="4"],
    .prod-grid[data-view="5"],
    .bs-row-grid,
    .subj-grid,
    .hiw-grid,
    .viz-grid,
    .prod-hiw-grid,
    .co-steps,
    .photo-strip{grid-template-columns:1fr;}
    .craft-stats{grid-template-columns:1fr;}
    .rev-grid,.rel-grid{grid-template-columns:1fr;}
}