/* Spin Art responsive foundation
   Loaded after each page's local styles so mobile rules stay consistent. */
html{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  overflow-x:clip;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  overflow-x:clip;
}
img,video,canvas{max-width:100%;}
button,input,select,textarea{min-width:0;}
.account-mobile-bar,.account-nav-scrim,.admin-mobile-bar,.admin-nav-scrim{display:none;}

@media (max-width:900px){
  /* Account dashboard: real off-canvas navigation and full-width content. */
  body.account-page .account-mobile-bar{
    position:fixed;inset:0 0 auto 0;z-index:140;height:62px;padding:0 12px 0 62px;
    display:flex;align-items:center;gap:10px;background:var(--bg2);background:color-mix(in srgb,var(--bg2) 92%,transparent);
    border-bottom:1px solid var(--border);backdrop-filter:blur(16px);
  }
  body.account-page .account-menu-button,
  body.admin-page .admin-menu-button{
    width:40px;height:40px;flex:0 0 40px;display:grid;place-items:center;border:1px solid var(--border2);
    border-radius:10px;background:var(--bg3);color:var(--text);font:700 20px/1 inherit;cursor:pointer;
  }
  body.account-page .account-mobile-title,
  body.admin-page .admin-mobile-title{min-width:0;font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  body.account-page .account-mobile-title small,
  body.admin-page .admin-mobile-title small{display:block;color:var(--text2);font-size:10px;font-weight:400;margin-top:1px;}
  body.account-page .account-mobile-home{
    margin-right:auto;color:var(--text2);text-decoration:none;font-size:11px;padding:8px 10px;
    border:1px solid var(--border);border-radius:9px;white-space:nowrap;
  }
  body.account-page .sidebar{
    width:min(310px,86vw);transform:translateX(105%);transition:transform .23s ease;
    z-index:170;box-shadow:-24px 0 60px rgba(0,0,0,.28);
  }
  body.account-page .sidebar.open{transform:translateX(0);}
  body.account-page .account-nav-scrim{
    position:fixed;inset:0;z-index:160;border:0;background:rgba(4,6,12,.58);backdrop-filter:blur(2px);
  }
  body.account-page .account-nav-scrim.open{display:block;}
  body.account-page .main{
    width:100%;max-width:100%;min-width:0;margin-right:0;padding:82px 18px 28px;
  }
  body.account-page .layout{display:block;width:100%;min-width:0;}
  body.account-page .theme-toggle{top:11px;left:12px;z-index:150;width:40px;height:40px;padding:0;justify-content:center;}
  body.account-page .theme-toggle [data-theme-label]{display:none;}
  body.account-page .purchases-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));width:100%;}
  body.account-page .pc-img{aspect-ratio:16/11;}
  body.account-page .page-header{margin-bottom:18px;}
  body.account-page .page-title{font-size:19px;}
  body.account-page .card{max-width:100%;}
  body.account-page table{min-width:620px;}
  body.account-page .chat-area{padding:14px;}
  body.account-page .msg{max-width:88%;}

  /* Main admin uses the same safe drawer pattern. */
  body.admin-page .admin-mobile-bar{
    position:fixed;inset:0 0 auto 0;z-index:140;height:62px;padding:0 12px 0 62px;
    display:flex;align-items:center;gap:10px;background:var(--bg2);background:color-mix(in srgb,var(--bg2) 92%,transparent);
    border-bottom:1px solid var(--border);backdrop-filter:blur(16px);
  }
  body.admin-page .sidebar{width:min(310px,86vw);transform:translateX(105%);transition:transform .23s ease;z-index:170;box-shadow:-24px 0 60px rgba(0,0,0,.28);}
  body.admin-page .sidebar.open{transform:translateX(0);}
  body.admin-page .admin-nav-scrim{position:fixed;inset:0;z-index:160;border:0;background:rgba(4,6,12,.58);backdrop-filter:blur(2px);}
  body.admin-page .admin-nav-scrim.open{display:block;}
  body.admin-page .main{width:100%;max-width:100%;min-width:0;margin-right:0;padding:82px 16px 28px;overflow:hidden;}
  body.admin-page .theme-toggle{top:11px;left:12px;z-index:150;width:40px;height:40px;padding:0;justify-content:center;}
  body.admin-page .theme-toggle [data-theme-label]{display:none;}
  body.admin-page .page-header{gap:12px;align-items:flex-start;flex-wrap:wrap;}
  body.admin-page .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  body.admin-page .card,body.admin-page .table-wrap{max-width:100%;}
}

@media (max-width:768px){
  /* Storefront header and hero. */
  body.storefront-page .nav{height:62px;padding:0 12px;gap:8px;}
  body.storefront-page .nav-logo{font-size:15px;gap:5px;white-space:nowrap;flex:0 1 auto;min-width:0;}
  body.storefront-page .nav-logo .icon{font-size:18px;}
  body.storefront-page .nav-links{display:none;}
  body.storefront-page .nav-actions{gap:6px;flex:0 0 auto;}
  body.storefront-page .theme-toggle,
  body.storefront-page #cart-btn,
  body.storefront-page #nav-auth-btn{width:38px;height:38px;padding:0;display:grid;place-items:center;flex:0 0 38px;}
  body.storefront-page .theme-toggle [data-theme-label]{display:none;}
  body.storefront-page #cart-btn{position:relative;font-size:0;}
  body.storefront-page #cart-count{
    position:absolute;top:-4px;left:-4px;display:grid;place-items:center;min-width:17px;height:17px;padding:0 3px;
    border-radius:20px;background:var(--rose);color:#fff;font-size:9px;border:2px solid var(--bg2);
  }
  body.storefront-page #nav-auth-btn{font-size:0;border-radius:9px;}
  body.storefront-page .hero{
    min-height:0;padding:112px 16px 64px;overflow:hidden;
  }
  body.storefront-page .hero-content{width:100%;max-width:620px;}
  body.storefront-page .hero-tag{max-width:100%;font-size:10px;line-height:1.65;margin-bottom:18px;padding:5px 11px;}
  body.storefront-page .hero-title{font-size:clamp(32px,9.8vw,48px);line-height:1.18;letter-spacing:-1px;margin-bottom:16px;}
  body.storefront-page .hero-sub{font-size:13px;line-height:2;margin:0 auto 25px;max-width:520px;}
  body.storefront-page .hero-sub br{display:none;}
  body.storefront-page .hero-btns{display:grid;grid-template-columns:1fr 1fr;gap:9px;width:min(100%,440px);margin:auto;}
  body.storefront-page .btn-hero{width:100%;padding:12px 10px;font-size:13px;justify-content:center;}
  body.storefront-page .hero-stats{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;width:min(100%,430px);margin:36px auto 0;
  }
  body.storefront-page .hstat{min-width:0;padding:0 7px;}
  body.storefront-page .hstat+.hstat{border-right:1px solid var(--border2);}
  body.storefront-page .hstat .num{font-size:23px;line-height:1.3;}
  body.storefront-page .hstat .lbl{font-size:10px;line-height:1.6;}
  body.storefront-page .hstat-sep{display:none;}
  body.storefront-page .hero-glow{width:100vw;height:100vw;max-width:520px;max-height:520px;}
  body.storefront-page .hero-glow2{width:52vw;height:52vw;}
  body.storefront-page .container,
  body.storefront-page .formats-inner{width:100%;max-width:100%;padding-left:16px;padding-right:16px;}
  body.storefront-page .section-header{align-items:flex-start;gap:12px;margin-bottom:20px;}
  body.storefront-page .section-title{font-size:19px;}
  body.storefront-page .cats{flex-wrap:nowrap;overflow-x:auto;padding:2px 0 8px;scroll-snap-type:x proximity;scrollbar-width:none;}
  body.storefront-page .cats::-webkit-scrollbar{display:none;}
  body.storefront-page .cat-pill{flex:0 0 auto;scroll-snap-align:start;}
  body.storefront-page .designs-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;}
  body.storefront-page .card-body{padding:11px;}
  body.storefront-page .card-specs{gap:6px;font-size:9.5px;}
  body.storefront-page .card-footer{align-items:flex-end;gap:5px;}
  body.storefront-page .card-price{font-size:13px;}
  body.storefront-page .btn-cart-card{padding:6px 8px;font-size:10px;}
  body.storefront-page .campaign-strip{grid-template-columns:1fr;}
  body.storefront-page .cart-panel{width:min(100%,390px);max-width:100%;}
  body.storefront-page .footer-top{align-items:flex-start;flex-direction:column;}

  /* Product detail becomes a purpose-built mobile reading flow. */
  body.product-page .nav{height:62px;padding:0 12px;gap:8px;}
  body.product-page .nav-logo{font-size:16px;white-space:nowrap;}
  body.product-page .nav-tools{gap:5px;min-width:0;}
  body.product-page .theme-toggle{width:38px;height:38px;padding:0;justify-content:center;flex:0 0 38px;}
  body.product-page .theme-toggle [data-theme-label]{display:none;}
  body.product-page .nav-back{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;padding:8px;}
  body.product-page .page{padding:78px 0 48px;}
  body.product-page .container{width:100%;max-width:100%;padding:0 14px;}
  body.product-page .grid{display:flex;flex-direction:column;align-items:stretch;gap:0;}
  body.product-page .info{display:contents;}
  body.product-page .breadcrumb{order:1;margin:0 0 10px;min-width:0;overflow:hidden;white-space:nowrap;}
  body.product-page .breadcrumb span{overflow:hidden;text-overflow:ellipsis;}
  body.product-page .design-title{order:2;font-size:22px;margin-bottom:10px;overflow-wrap:anywhere;}
  body.product-page .rating-row{order:3;flex-wrap:wrap;gap:7px 10px;margin-bottom:15px;}
  body.product-page .gallery{order:4;position:static;top:auto;width:100%;min-width:0;margin-bottom:18px;}
  body.product-page .main-img{aspect-ratio:1/1;border-radius:16px;background:var(--bg2);}
  body.product-page .main-img img{object-fit:contain;padding:7px;}
  body.product-page .main-img:hover img{transform:none;}
  body.product-page .thumbs{
    direction:ltr;gap:8px;margin:10px -14px 0;padding:0 14px 8px;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-inline:contain;
  }
  body.product-page .thumbs::-webkit-scrollbar{display:none;}
  body.product-page .thumb{width:70px;height:70px;scroll-snap-align:start;border-radius:11px;background:var(--bg2);}
  body.product-page .thumb{padding:0;}
  body.product-page .thumb img{object-fit:contain;}
  body.product-page .price-card{order:5;padding:18px;margin:0 0 14px;border-radius:15px;}
  body.product-page .price{font-size:30px;}
  body.product-page .specs{order:6;margin:0;padding:14px;border-radius:14px;}
  body.product-page .spec{display:grid;grid-template-columns:minmax(92px,36%) minmax(0,1fr);gap:12px;align-items:start;line-height:1.8;}
  body.product-page .spec .v{text-align:left;overflow-wrap:anywhere;word-break:normal;min-width:0;}
  body.product-page .section{margin-top:28px;}
  body.product-page .desc-text{font-size:13px;line-height:2;overflow-wrap:anywhere;}
  body.product-page .review-form{padding:15px;}
  body.product-page .lightbox img{max-width:calc(100vw - 24px);max-height:calc(100svh - 110px);}
  body.product-page .lb-prev,body.product-page .lb-next{width:40px;height:40px;}
  body.product-page .lb-prev{right:10px;}body.product-page .lb-next{left:10px;}
  body.product-page .lb-close{top:max(12px,env(safe-area-inset-top));left:12px;}

  /* Growth admin already has a drawer; these rules remove remaining width traps. */
  body.growth-page .main{width:100%;max-width:100%;min-width:0;overflow:hidden;}
  body.growth-page .content{max-width:100%;}
  body.growth-page .top{min-width:0;}
  body.growth-page .top-title{min-width:0;font-size:15px;}
  body.growth-page .top-title small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  body.growth-page .page-head{align-items:flex-start;gap:12px;flex-wrap:wrap;}
  body.growth-page .table-wrap{max-width:100%;}
}

@media (max-width:520px){
  .sa-support{left:max(12px,env(safe-area-inset-left));right:auto;bottom:max(12px,env(safe-area-inset-bottom));}
  .sa-support-launcher{width:54px;height:54px;border-radius:17px;}
  .sa-support-panel{left:10px;right:10px;bottom:78px;width:auto;max-width:none;height:min(590px,calc(100svh - 100px));}
  body.storefront-page .nav-logo{max-width:128px;overflow:hidden;text-overflow:ellipsis;}
  body.storefront-page .hero{padding-top:100px;padding-bottom:48px;}
  body.storefront-page .hero-title{font-size:clamp(29px,10vw,39px);}
  body.storefront-page .hero-btns{grid-template-columns:1fr;}
  body.storefront-page .hero-stats{margin-top:30px;}
  body.storefront-page .hstat .num{font-size:20px;}
  body.storefront-page .hstat .lbl{font-size:9px;}
  body.storefront-page .search-bar{flex-direction:column;}
  body.storefront-page .sort-sel{width:100%;}
  body.storefront-page .designs-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  body.storefront-page .card-title{font-size:12px;}
  body.storefront-page .card-format-badges{display:none;}
  body.storefront-page .btn-cart-card{font-size:0;width:32px;height:30px;padding:0;justify-content:center;}
  body.storefront-page .btn-cart-card::before{content:'+';font-size:17px;}
  body.storefront-page .formats-grid,body.storefront-page .steps,body.storefront-page .features-grid{grid-template-columns:1fr;}

  body.product-page .nav-back{max-width:118px;font-size:0;width:38px;height:38px;display:grid;place-items:center;}
  body.product-page .nav-back::before{content:'←';font-size:18px;}
  body.product-page .design-title{font-size:20px;}
  body.product-page .main-img{border-radius:14px;}
  body.product-page .btn-buy{font-size:14px;}
  body.product-page .spec{grid-template-columns:104px minmax(0,1fr);font-size:12px;}

  body.account-page .main{padding:78px 12px 24px;}
  body.account-page .account-mobile-home{font-size:0;width:38px;height:38px;padding:0;display:grid;place-items:center;}
  body.account-page .account-mobile-home::before{content:'⌂';font-size:19px;}
  body.account-page .purchases-grid{grid-template-columns:1fr;gap:13px;}
  body.account-page .purchase-card{width:100%;}
  body.account-page .pc-img{aspect-ratio:16/10;}
  body.account-page .auth-card{width:calc(100% - 24px);padding:26px 20px;}
  body.account-page .result-card{width:calc(100% - 24px);padding:32px 18px;}
  body.account-page .reply-box{flex-direction:column;}
  body.account-page .btn-send{padding:11px;}
  body.account-page .club-hero{padding:19px;border-radius:16px;}
  body.account-page .club-title{font-size:26px;}
  body.account-page .coin-value{font-size:30px;}
  body.account-page .reward-grid{grid-template-columns:1fr;}
  body.account-page .coupon-card{align-items:flex-start;flex-wrap:wrap;}

  body.admin-page .main{padding:76px 10px 22px;}
  body.admin-page .stats-grid{grid-template-columns:1fr;}
  body.admin-page .modal{width:calc(100% - 20px);padding:17px;}
  body.admin-page .support-admin-grid{grid-template-columns:1fr;}

  body.growth-page .content{padding:10px;}
  body.growth-page .kpis{grid-template-columns:1fr 1fr;gap:8px;}
  body.growth-page .kpi{padding:12px;}
  body.growth-page .top{padding:0 9px;gap:7px;}
  body.growth-page .top .btn.primary{padding:8px 10px;font-size:10px;}
  body.growth-page .actions{width:100%;}
  body.growth-page .actions .btn{flex:1;}
  body.growth-page .drawer{width:100%;}
}

@media (max-width:360px){
  body.storefront-page .nav-logo{max-width:100px;}
  body.storefront-page .hero-title{font-size:28px;}
  body.storefront-page .designs-grid{grid-template-columns:1fr;}
  body.storefront-page .card-format-badges{display:flex;}
  body.storefront-page .btn-cart-card{width:auto;padding:6px 10px;font-size:10px;}
  body.storefront-page .btn-cart-card::before{content:none;}
  body.account-page .account-mobile-title small{display:none;}
  body.product-page .nav-logo{font-size:14px;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
}