:root{
  --app-bg:#07070a;
  --app-panel:#101014;
  --app-panel-2:#17171d;
  --app-text:#f8f6fb;
  --app-muted:#a7a4ad;
  --app-purple:#9f3cff;
  --app-pink:#ff2aa3;
  --app-teal:#19d6d1;
  --app-green:#6df06e;
  --app-border:rgba(255,255,255,.10);
}

html{scroll-behavior:smooth}
body{background:var(--app-bg);color:var(--app-text)}
body.has-app-nav{padding-bottom:88px}

.app-status-strip{
  display:none;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  min-height:30px;
  padding:.35rem 1rem;
  background:linear-gradient(90deg,rgba(159,60,255,.17),rgba(255,42,163,.16),rgba(25,214,209,.14));
  border-bottom:1px solid var(--app-border);
  color:#ddd9e5;
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.app-status-dot{width:7px;height:7px;border-radius:50%;background:var(--app-green);box-shadow:0 0 12px rgba(109,240,110,.8)}

.app-bottom-nav{
  position:fixed;
  left:12px;
  right:12px;
  top:auto!important;
  bottom:max(12px,env(safe-area-inset-bottom));
  height:auto;
  min-height:0;
  z-index:80;
  display:none;
  grid-template-columns:repeat(5,1fr);
  align-items:stretch;
  gap:4px;
  padding:8px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  background:rgba(12,12,17,.92);
  backdrop-filter:blur(18px) saturate(1.25);
  -webkit-backdrop-filter:blur(18px) saturate(1.25);
  box-shadow:0 20px 45px rgba(0,0,0,.45);
}
.app-bottom-nav a,
.app-bottom-nav button{
  min-width:0;
  min-height:54px;
  border:0;
  border-radius:15px;
  background:transparent;
  color:#bdb8c6;
  font:inherit;
  text-decoration:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  cursor:pointer;
}
.app-bottom-nav .app-nav-icon{font-size:1.25rem;line-height:1}
.app-bottom-nav .app-nav-label{font-size:.62rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.app-bottom-nav a[aria-current="page"],
.app-bottom-nav a.is-active{
  color:#fff;
  background:linear-gradient(135deg,rgba(159,60,255,.30),rgba(255,42,163,.20));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.app-bottom-nav .app-cart-button{position:relative}
.app-bottom-nav .app-cart-badge{
  position:absolute;
  top:5px;
  right:calc(50% - 20px);
  min-width:17px;
  height:17px;
  padding:0 4px;
  border-radius:999px;
  background:var(--app-pink);
  color:#fff;
  font-size:.62rem;
  font-weight:900;
  line-height:17px;
  text-align:center;
}

.app-mobile-brandline{
  display:none;
  color:var(--app-muted);
  font-size:.66rem;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.app-home-shortcuts{
  display:none;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  padding:0 16px 18px;
}
.app-home-shortcuts a{
  min-height:82px;
  padding:14px;
  border:1px solid var(--app-border);
  border-radius:18px;
  background:linear-gradient(145deg,#141419,#0d0d11);
  color:#fff;
  text-decoration:none;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:4px;
}
.app-home-shortcuts strong{font-size:1rem;line-height:1}
.app-home-shortcuts span{font-size:.68rem;color:var(--app-muted)}
.app-home-shortcuts a:nth-child(1){box-shadow:inset 3px 0 0 var(--app-purple)}
.app-home-shortcuts a:nth-child(2){box-shadow:inset 3px 0 0 var(--app-teal)}
.app-home-shortcuts a:nth-child(3){box-shadow:inset 3px 0 0 var(--app-pink)}
.app-home-shortcuts a:nth-child(4){box-shadow:inset 3px 0 0 var(--app-green)}

.app-product-sticky{
  display:none;
  position:fixed;
  left:12px;
  right:12px;
  bottom:88px;
  z-index:70;
  gap:8px;
  padding:10px;
  border:1px solid var(--app-border);
  border-radius:18px;
  background:rgba(12,12,17,.94);
  backdrop-filter:blur(16px);
  box-shadow:0 16px 34px rgba(0,0,0,.38);
}
.app-product-sticky button{
  width:100%;
  min-height:46px;
  border:0;
  border-radius:13px;
  background:linear-gradient(90deg,var(--app-purple),var(--app-pink));
  color:#fff;
  font-weight:900;
  letter-spacing:.04em;
}

/* Skelly Love configurable product */
.skelly-option-group{
  display:grid;
  gap:8px;
  margin:0 0 14px;
}
.skelly-option-group[hidden]{display:none!important}
.skelly-option-group label{
  color:#f4f1f7;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.product-option-select{
  width:100%;
  min-height:50px;
  padding:0 42px 0 14px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:13px;
  background:#121217;
  color:#fff;
  font:inherit;
  font-weight:800;
  cursor:pointer;
  color-scheme:dark;
}
.product-option-select:hover{border-color:rgba(159,60,255,.65)}
.product-option-select:focus{
  outline:2px solid var(--app-purple);
  outline-offset:2px;
  border-color:transparent;
}
.skelly-selection-note{
  margin:2px 0 18px;
  padding:11px 13px;
  border-left:3px solid var(--app-teal);
  border-radius:0 10px 10px 0;
  background:rgba(25,214,209,.07);
  color:var(--app-muted);
  font-size:.82rem;
  line-height:1.45;
}
.cart-line-options{
  display:grid;
  gap:3px;
  margin:7px 0 10px;
  padding:8px 10px;
  border-radius:9px;
  background:rgba(159,60,255,.08);
  color:#cfc9d8;
  font-size:.76rem;
  line-height:1.35;
}
.cart-line-options span{display:block}

@media(max-width:800px){
  .app-status-strip{display:flex}
  .app-bottom-nav{
    display:grid;
    top:auto!important;
    bottom:max(12px,env(safe-area-inset-bottom));
    height:auto;
    flex-direction:initial;
    align-items:stretch;
  }
  .app-mobile-brandline{display:block}
  .app-home-shortcuts{display:grid}
  .site-header{padding-top:10px;padding-bottom:10px}
  .site-header .brand{line-height:.9}
  .site-header .brand span,.site-header .brand strong{display:block}
  .site-header nav{padding-bottom:92px}
  .shop-page,.product-page{padding-bottom:18px}
  .cart-panel{padding-bottom:92px}
  .shop-tools{
    position:sticky;
    top:58px;
    z-index:24;
    background:rgba(7,7,10,.94);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--app-border);
  }
  .shop-hero{border-radius:0 0 22px 22px;overflow:hidden}
  .product-detail{gap:18px}
  .product-copy{padding-bottom:80px}
  .app-product-sticky{display:flex}
}

@media(min-width:801px){
  body{padding-bottom:0!important}
}