/*
 * White-label web storefront shell.
 * The catalog engine is shared with Mini App, but the web layout mirrors the
 * full reseller catalog: persistent navigation, workspace and buyer cabinet.
 */

body[data-channel="web"]{
  min-height:100vh;
  background:
    radial-gradient(900px 520px at 95% 4%,color-mix(in srgb,var(--accent) 11%,transparent),transparent 72%),
    radial-gradient(760px 520px at 32% 96%,color-mix(in srgb,var(--accent-2) 7%,transparent),transparent 74%),
    color-mix(in srgb,var(--bg) 94%,#030807);
}

body[data-channel="web"] .ambient-scene{opacity:.44}
body[data-channel="web"] .ambient-grid{opacity:.11}

.website-app{
  position:relative;
  z-index:2;
  display:grid;
  min-height:100vh;
  grid-template-columns:310px minmax(0,1fr);
  align-items:start;
}

.website-app>.preview-strip{
  position:sticky;
  z-index:80;
  top:0;
  grid-column:1/-1;
  min-height:38px;
  padding:7px 20px;
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  backdrop-filter:blur(18px);
}

.store-header{
  position:sticky;
  z-index:40;
  top:0;
  display:flex;
  width:310px;
  height:100vh;
  min-height:0;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  padding:23px 17px 17px;
  overflow:hidden;
  border:0;
  border-right:1px solid color-mix(in srgb,var(--accent) 15%,var(--line));
  background:
    radial-gradient(310px 260px at 0 0,color-mix(in srgb,var(--accent) 11%,transparent),transparent 72%),
    linear-gradient(180deg,color-mix(in srgb,var(--surface) 96%,#07100e),color-mix(in srgb,var(--bg) 97%,#030706));
  box-shadow:18px 0 60px #0003;
  backdrop-filter:none;
}

.website-app:has(.preview-strip:not([hidden])) .store-header{
  top:38px;
  height:calc(100vh - 38px);
}

.store-header:after{right:0;bottom:0;left:auto;width:1px;height:100%;background:linear-gradient(transparent,color-mix(in srgb,var(--accent) 42%,transparent),transparent)}

.store-header .brand{
  width:100%;
  min-height:55px;
  justify-self:auto;
  padding:4px 6px 15px;
  border-bottom:1px solid color-mix(in srgb,var(--line) 78%,transparent);
}

.store-header .brand>i{
  width:43px;
  height:43px;
  flex:0 0 auto;
  border-radius:14px;
  box-shadow:0 0 28px color-mix(in srgb,var(--accent) 12%,transparent);
}

.store-header .brand b{
  display:block;
  max-width:178px;
  overflow:hidden;
  font-size:12px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.store-nav-caption,.store-category-nav>p{
  margin:20px 8px 8px;
  color:color-mix(in srgb,var(--accent) 52%,var(--muted));
  font-size:9px;
  font-weight:900;
  letter-spacing:1.35px;
}

.store-header nav{
  position:relative;
  display:grid;
  width:100%;
  gap:8px;
}

.store-header nav button{
  position:relative;
  z-index:2;
  display:grid;
  min-height:66px;
  grid-template-columns:42px minmax(0,1fr) 28px;
  align-items:center;
  gap:11px;
  padding:10px;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--accent) 23%,var(--line));
  border-radius:14px;
  background:linear-gradient(105deg,color-mix(in srgb,var(--accent) 7%,var(--surface)),color-mix(in srgb,var(--surface) 82%,var(--bg)));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,#fff 2.5%,transparent);
  color:var(--text);
  text-align:left;
  transition:border-color .2s,background .2s,transform .2s,box-shadow .2s;
}

.store-header nav button>i{
  display:grid;
  width:40px;
  height:40px;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--accent) 37%,var(--line));
  border-radius:12px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 13%,var(--surface)),color-mix(in srgb,var(--surface) 85%,var(--bg)));
  color:var(--accent);
  font-size:13px;
  font-style:normal;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,#fff 3%,transparent);
}

.store-header nav button>span{font-size:12px;font-weight:800}
.store-header nav button>b{display:grid;width:26px;height:26px;place-items:center;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));border-radius:50%;background:color-mix(in srgb,var(--accent) 8%,var(--surface));color:var(--accent);font-size:11px;opacity:.8}
.store-header nav button:hover,.store-header nav button.active{border-color:color-mix(in srgb,var(--accent) 65%,var(--line));background:linear-gradient(105deg,color-mix(in srgb,var(--accent) 15%,var(--surface)),color-mix(in srgb,var(--accent) 4%,var(--surface)));color:var(--text);transform:translateX(2px);box-shadow:0 10px 22px #0004}
.store-header nav button.active{box-shadow:inset 3px 0 var(--accent),0 10px 22px #0003}
.store-header nav button.active>i{border-color:color-mix(in srgb,var(--accent) 52%,var(--line));background:var(--soft);color:var(--accent)}
.store-header nav button.active>b{color:var(--accent);opacity:1}
.store-header .nav-glider{display:none}

.store-category-nav{
  min-height:0;
  flex:1;
  overflow:auto;
  padding:0 3px 5px;
  scrollbar-color:color-mix(in srgb,var(--accent) 50%,transparent) transparent;
  scrollbar-width:thin;
}

.store-category-nav>button{
  display:grid;
  width:100%;
  min-height:68px;
  grid-template-columns:42px minmax(0,1fr) 28px;
  align-items:center;
  gap:11px;
  margin:6px 0;
  padding:10px;
  border:1px solid color-mix(in srgb,var(--accent) 23%,var(--line));
  border-radius:14px;
  background:linear-gradient(105deg,color-mix(in srgb,var(--accent) 7%,var(--surface)),color-mix(in srgb,var(--surface) 82%,var(--bg)));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,#fff 2.5%,transparent);
  color:var(--text);
  text-align:left;
  transition:border-color .2s,background .2s,transform .2s;
}

.store-category-nav>button:hover,.store-category-nav>button.active{
  border-color:color-mix(in srgb,var(--accent) 65%,var(--line));
  background:linear-gradient(105deg,color-mix(in srgb,var(--accent) 15%,var(--surface)),color-mix(in srgb,var(--accent) 4%,var(--surface)));
  transform:translateX(2px);
  box-shadow:0 10px 22px #0004;
}

.store-category-nav>button>i{display:grid;width:40px;height:40px;place-items:center;border:1px solid color-mix(in srgb,var(--accent) 37%,var(--line));border-radius:12px;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 13%,var(--surface)),color-mix(in srgb,var(--surface) 85%,var(--bg)));color:var(--accent);font-size:8px;font-style:normal;font-weight:900;box-shadow:inset 0 0 0 1px color-mix(in srgb,#fff 3%,transparent)}
.store-category-nav>button>span{display:grid;min-width:0;gap:3px}
.store-category-nav>button b{overflow:hidden;font-size:12px;line-height:1.2;text-overflow:ellipsis;white-space:nowrap}
.store-category-nav>button small{overflow:hidden;color:var(--muted);font-size:9px;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}
.store-category-nav>button>em{display:grid;width:26px;height:26px;place-items:center;border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));border-radius:50%;background:color-mix(in srgb,var(--accent) 8%,var(--surface));color:var(--accent);font-size:11px;font-style:normal;opacity:.8}

.store-sidebar-foot{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
  padding:14px 7px 0;
  border-top:1px solid color-mix(in srgb,var(--line) 75%,transparent);
}
.store-sidebar-foot>i,.store-live>i{width:7px;height:7px;flex:0 0 auto;border-radius:50%;background:var(--accent);box-shadow:0 0 13px var(--accent)}
.store-sidebar-foot>span{display:grid;gap:2px}.store-sidebar-foot b{font-size:9px}.store-sidebar-foot small{color:var(--muted);font-size:7px}

.store-workspace{display:flex;min-width:0;min-height:100vh;grid-column:2;flex-direction:column;align-self:stretch}
.store-topbar{
  position:sticky;
  z-index:35;
  top:0;
  display:flex;
  min-height:72px;
  align-items:center;
  gap:17px;
  padding:11px 30px;
  border-bottom:1px solid color-mix(in srgb,var(--accent) 12%,var(--line));
  background:color-mix(in srgb,var(--bg) 89%,transparent);
  backdrop-filter:blur(18px);
}
.website-app:has(.preview-strip:not([hidden])) .store-topbar{top:38px}

.store-menu-button{display:none;width:38px;height:38px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text)}
.store-context{display:grid;min-width:0;gap:3px}.store-context small{color:var(--muted);font-size:7px;font-weight:900;letter-spacing:1.1px}.store-context b{overflow:hidden;max-width:330px;font:700 12px Unbounded,sans-serif;text-overflow:ellipsis;white-space:nowrap}
.store-live{display:flex;align-items:center;gap:7px;margin-left:auto;color:var(--muted);font-size:9px}.store-live>i{width:6px;height:6px}
.header-account{display:flex;align-items:center;gap:9px}
.store-topbar .balance-pill{min-width:116px;padding:8px 12px;border-color:color-mix(in srgb,var(--accent) 22%,var(--line));background:color-mix(in srgb,var(--surface) 87%,transparent)}
.store-topbar .web-profile{width:41px;height:41px}

body[data-channel="web"] .web-main{
  flex:1 0 auto;
  width:calc(100% - 56px);
  max-width:1640px;
  margin:0 auto;
  padding:29px 0 64px;
}

.website-app .hero.shop-hero{grid-template-columns:minmax(0,1fr) 320px;gap:14px}
.website-app .hero-copy,.website-app .hero-status{min-height:238px;border-radius:22px;box-shadow:0 20px 52px #0004}
.website-app .hero-copy{padding:30px 32px;background:radial-gradient(480px 220px at 95% 0,color-mix(in srgb,var(--accent) 13%,transparent),transparent 70%),linear-gradient(135deg,var(--surface-2),var(--surface))}
.website-app .hero-copy:after{right:-120px;bottom:-330px;width:520px;height:520px}
.website-app .hero-copy h1{max-width:760px;margin-top:10px;font-size:clamp(30px,3vw,45px);line-height:1.03;letter-spacing:-2.2px}
.website-app .hero-copy>span{max-width:710px;margin-top:12px;font-size:11px;line-height:1.55}
.website-app .hero-search{max-width:700px;margin-top:20px;padding:5px;border-radius:12px;box-shadow:none}
.website-app .hero-search input{padding:10px;font-size:11px}
.website-app .hero-search button{padding:10px 14px}
.website-app .hero-shortcuts{margin-top:11px}
.website-app .hero-status{min-height:238px;padding:22px;background:radial-gradient(250px 220px at 100% 0,var(--soft),transparent 74%),var(--surface)}
.website-app .hero-status>p{font-size:9px}
.website-app .hero-journey{grid-template-columns:repeat(3,1fr);gap:7px;margin:17px 0 12px}
.website-app .hero-journey li{display:block;padding:9px;border:1px solid var(--line);border-radius:10px;background:color-mix(in srgb,var(--surface-3) 58%,transparent)}
.website-app .hero-journey li:not(:last-child):after{display:none}
.website-app .hero-journey li>i{width:25px;height:25px;margin-bottom:7px;border-radius:7px}
.website-app .hero-journey li>span{gap:2px}.website-app .hero-journey li b{font-size:8px}.website-app .hero-journey li small{display:none}
.website-app .hero-commerce-map{display:none!important}
.website-app .hero-status>section{gap:7px;margin-top:auto}.website-app .hero-status article{padding:11px;border-radius:10px}.website-app .hero-status strong{font-size:15px;letter-spacing:-.7px}.website-app .hero-status article small{font-size:7px}

.website-app .signal-rail{margin-top:13px}
.website-app .directory{
  position:relative;
  margin-top:15px;
  padding:24px;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--accent) 14%,var(--line));
  border-radius:22px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 94%,transparent),color-mix(in srgb,var(--bg) 96%,transparent));
  box-shadow:0 24px 58px #0004;
}
.website-app .directory:before{position:absolute;top:0;right:8%;left:8%;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);content:"";opacity:.55}
.website-app .section-heading{margin-bottom:18px}.website-app .section-heading h2{font-size:27px}.website-app .section-heading>div>span{font-size:10px}
.website-app .catalog-directory.section-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(150px,auto);gap:11px}
.website-app .catalog-section-card{min-height:150px;padding:18px;border-radius:16px;background:radial-gradient(230px 160px at 100% 0,color-mix(in srgb,var(--card-tint) 19%,transparent),transparent 72%),linear-gradient(145deg,var(--surface-2),var(--surface))}
.website-app .catalog-section-card:first-child{min-height:311px;grid-column:span 2;grid-row:span 2;padding:25px}
.website-app .catalog-section-card>small{font-size:8px}.website-app .catalog-section-card>i{width:40px;height:40px;margin:11px 0 14px;border-radius:12px;font-size:16px}
.website-app .catalog-section-card>span{max-width:72%}.website-app .catalog-section-card>span b{font-size:14px}.website-app .catalog-section-card>span em{font-size:9px}
.website-app .catalog-section-card:first-child>span b{font-size:23px}.website-app .catalog-section-card:first-child>span em{font-size:11px}
.website-app .section-card-art{top:16px;right:10px;width:42%;height:92px}.website-app .catalog-section-card:first-child .section-card-art{top:28px;right:20px;width:43%;height:170px}
.website-app .section-card-examples{margin-top:11px}.website-app .section-card-examples li{font-size:6px}
.website-app .catalog-section-card>strong{padding-top:10px;font-size:10px}.website-app .catalog-section-card>strong:before{font-size:6px}
.website-app .catalog-section-card:first-child>strong{font-size:14px}
.website-app .trust-row article{min-height:78px;padding:15px}.website-app .trust-row article>i{width:38px;height:38px}.website-app .trust-row b{font-size:10px}

.website-app .catalog-results{padding-top:0}
.website-app .catalog-back{margin:0 0 13px;padding:10px 13px;border:1px solid var(--line);border-radius:11px;background:var(--surface);text-align:left}
.website-app .catalog-section-spotlight{border-radius:20px}
.website-app .catalog-toolbar{padding:13px 15px;border:1px solid var(--line);border-radius:15px;background:var(--surface)}
.website-app .product-grid{grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:13px}
.website-app .catalog-results .product-card,.website-app .catalog-group-card{min-height:270px;border-radius:16px;background:linear-gradient(155deg,var(--surface-2),var(--surface))}
.website-app .catalog-results .product-card>i,.website-app .catalog-group-card>i{height:148px}

.website-app .account-page{width:min(1080px,100%);margin:0 auto}
.website-app .web-page-heading,.website-app .profile-card,.website-app .franchise-hero{border-radius:22px;background:radial-gradient(480px 220px at 100% 0,var(--soft),transparent 72%),linear-gradient(135deg,var(--surface-2),var(--surface))}
.website-app .balance-hero,.website-app .topup-card,.website-app .included-card,.website-app .owner-funds{box-shadow:0 20px 50px #0003}

.store-footer{min-height:88px;flex:0 0 auto;margin-top:0;padding:23px 28px;border-color:color-mix(in srgb,var(--accent) 12%,var(--line));background:color-mix(in srgb,var(--surface) 84%,transparent)}

@media(max-width:1180px){
  .website-app{grid-template-columns:246px minmax(0,1fr)}
  .store-header{width:246px;padding-right:13px;padding-left:13px}
  body[data-channel="web"] .web-main{width:calc(100% - 38px)}
  .website-app .hero.shop-hero{grid-template-columns:1fr}
  .website-app .hero-status{display:none}
  .website-app .catalog-directory.section-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .website-app .catalog-section-card:first-child{grid-column:span 2}
}

@media(max-width:900px){
  .website-app{display:block}
  .website-app>.preview-strip{position:relative}
  .store-workspace{width:100%}
  .store-header,.website-app:has(.preview-strip:not([hidden])) .store-header{
    position:fixed;
    z-index:120;
    top:0;
    bottom:0;
    left:0;
    width:min(310px,88vw);
    height:100dvh;
    transform:translateX(-105%);
    transition:transform .3s cubic-bezier(.22,1,.36,1);
  }
  body.store-menu-open{overflow:hidden}
  body.store-menu-open .store-header{transform:none}
  body.store-menu-open:after{position:fixed;z-index:110;inset:0;background:#000a;backdrop-filter:blur(5px);content:""}
  .store-topbar,.website-app:has(.preview-strip:not([hidden])) .store-topbar{top:0;min-height:64px;padding:9px 16px}
  .store-menu-button{display:grid;place-items:center}
  .store-context{display:none}
  .store-live{margin-left:0}
  .header-account{margin-left:auto}
  body[data-channel="web"] .web-main{width:calc(100% - 28px);padding-top:17px}
  .website-app .hero-copy{min-height:260px;padding:27px}
  .website-app .catalog-directory.section-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .store-footer{padding-bottom:88px}
}

@media(max-width:620px){
  .preview-strip{align-items:flex-start;gap:8px;padding:8px 12px}.preview-strip>span{align-items:flex-start;flex-wrap:wrap}.preview-strip em{width:100%;padding-left:14px;font-size:8px}.preview-strip>div{display:flex;gap:5px}
  .store-live{font-size:8px}.store-topbar .balance-pill{min-width:92px}.store-topbar .balance-pill small{font-size:6px}.store-topbar .balance-pill b{font-size:11px}.store-topbar .web-profile{width:37px;height:37px}
  .website-app .hero-copy{min-height:300px;padding:24px 20px}.website-app .hero-copy h1{font-size:31px}.website-app .hero-copy>span{font-size:10px}.website-app .hero-search{margin-top:18px}.website-app .hero-search button{font-size:0}.website-app .hero-search button:after{font-size:14px;content:"→"}
  .website-app .hero-shortcuts{display:none}.website-app .signal-rail{display:none}
  .website-app .directory{margin-top:11px;padding:17px}.website-app .section-heading{align-items:flex-start;flex-direction:column;gap:12px}.website-app .section-heading h2{font-size:23px}.website-app .section-heading>button{width:100%}
  .website-app .catalog-directory.section-grid{grid-template-columns:1fr;grid-auto-rows:auto}.website-app .catalog-section-card,.website-app .catalog-section-card:first-child{min-height:190px;grid-column:auto;grid-row:auto;padding:19px}.website-app .catalog-section-card:first-child{min-height:245px}.website-app .catalog-section-card:first-child>span b{font-size:18px}.website-app .catalog-section-card>span{max-width:74%}.website-app .catalog-section-card:first-child .section-card-art{top:19px;right:8px;height:122px}.website-app .catalog-section-card:first-child>strong{font-size:11px}
  .website-app .trust-row{grid-template-columns:1fr}.website-app .trust-row article{min-height:68px}
  .website-app .catalog-section-spotlight{grid-template-columns:55px minmax(0,1fr);padding:17px}.website-app .catalog-section-spotlight>i{width:55px;height:55px}.website-app .catalog-section-spotlight>b{display:none}
  .website-app .catalog-toolbar{display:grid;grid-template-columns:1fr}.website-app .result-meta{justify-content:flex-start}
  .website-app .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.website-app .catalog-results .product-card,.website-app .catalog-group-card{min-height:225px}.website-app .catalog-results .product-card>i,.website-app .catalog-group-card>i{height:112px}.website-app .catalog-results .product-card>span,.website-app .catalog-group-card>span{padding:11px 11px 7px}.website-app .catalog-results .product-card>footer,.website-app .catalog-group-card>footer{margin:0 11px;padding:10px 0 12px}.website-app .catalog-results .product-card footer em,.website-app .catalog-group-card footer em{font-size:0}.website-app .catalog-results .product-card footer em:after,.website-app .catalog-group-card footer em:after{font-size:12px;content:"→"}
  .store-footer{align-items:flex-start;flex-direction:column}.store-footer p{margin:0}.store-footer>button{width:100%}
}

@media(max-width:390px){
  .store-live{display:none}
  .website-app .product-grid{grid-template-columns:1fr}
  .website-app .catalog-results .product-card,.website-app .catalog-group-card{min-height:260px}
  .website-app .catalog-results .product-card>i,.website-app .catalog-group-card>i{height:145px}
}

@media(prefers-reduced-motion:reduce){.store-header{transition:none}}