:root{
  --bg:#020612;
  --panel:#08152e;
  --panel2:#091a3a;
  --card:#0c213f;
  --card2:#0a1b34;
  --line:rgba(106,206,255,.16);
  --line-strong:rgba(128,226,255,.55);
  --text:#f8fbff;
  --muted:#a8bfd6;
  --blue1:#94efff;
  --blue2:#4bd0ff;
  --blue3:#1198ff;
  --blue4:#0574dc;
  --shadow:0 26px 90px rgba(0,0,0,.58);
  --scene-w: 1720px;
  --scene-h: 880px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  overflow:hidden;
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:#020612 url('assets/background.jpg') center/cover no-repeat fixed;
}
button,input{font:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible,.panel:focus-visible{outline:2px solid #bcefff;outline-offset:3px}

.app-shell{
  min-height:100%;
  display:grid;
  place-items:center;
  padding:8px 10px 12px;
  background:
    radial-gradient(circle at 7% 16%, rgba(54,198,255,.06), transparent 17%),
    radial-gradient(circle at 95% 5%, rgba(54,198,255,.06), transparent 12%),
    linear-gradient(180deg, rgba(5,17,40,.15), rgba(3,9,24,.35));
}
.scene-frame{
  position:relative;
  width:min(96vw, var(--scene-w));
  height:min(92vh, var(--scene-h));
  min-width:320px;
  min-height:620px;
}
.scene{
  position:relative;
  width:100%;
  height:100%;
  overflow:visible;
}

.panel{
  position:absolute;
  border-radius:30px;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(11,27,57,.98), rgba(7,18,38,.995));
  border:1px solid rgba(149,238,255,.26);
  box-shadow:
    0 0 0 1px rgba(118,222,255,.12),
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 18px 60px rgba(0,0,0,.48),
    0 0 40px rgba(37,152,255,.12),
    0 0 90px rgba(17,126,255,.08);
  transition:
    left .58s cubic-bezier(.22,.86,.22,1),
    top .58s cubic-bezier(.22,.86,.22,1),
    width .58s cubic-bezier(.22,.86,.22,1),
    height .58s cubic-bezier(.22,.86,.22,1),
    opacity .58s ease,
    filter .58s ease,
    box-shadow .58s ease;
}
.panel-glow{
  position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  box-shadow:
    inset 0 0 0 1px rgba(184,245,255,.08),
    inset 0 0 28px rgba(46,194,255,.08),
    0 0 22px rgba(56,202,255,.16),
    0 0 62px rgba(17,127,255,.1);
}
.box-glow{
  position:relative;
  border-radius:16px;
  border:1px solid rgba(127,227,255,.14);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 0 20px rgba(37,167,255,.06);
}
.glow-card{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 0 18px rgba(37,167,255,.06);
}

/* exact panel sizing, store doesn't resize when cart is front */
.store-panel{
  left:4.2%;
  top:15.8%;
  width:71.8%;
  height:78.3%;
  z-index:5;
}
.cart-panel{
  left:53.8%;
  top:4.4%;
  width:34.8%;
  height:83.3%;
  z-index:2;
}
.scene.cart-front .store-panel{
  left:4.2%;
  top:15.8%;
  width:71.8%;
  height:78.3%;
  z-index:3;
  filter:brightness(.73) saturate(.86);
}
.scene.cart-front .cart-panel{
  left:37.4%;
  top:8.6%;
  width:42.6%;
  height:81.2%;
  z-index:7;
  filter:none;
}
.scene:not(.cart-front) .cart-panel:hover{
  box-shadow:
    0 0 0 1px rgba(118,222,255,.18),
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 18px 60px rgba(0,0,0,.5),
    0 0 54px rgba(56,202,255,.16),
    0 0 110px rgba(17,126,255,.1);
}

/* HEADER + BRAND */
.store-header{
  display:grid;
  grid-template-columns:minmax(300px,1fr) minmax(340px,1.05fr) auto;
  gap:16px;
  align-items:center;
  padding:18px 22px;
  min-height:86px;
  background:linear-gradient(180deg, rgba(4,15,34,.92), rgba(5,16,36,.48));
  border-bottom:1px solid rgba(89,209,255,.12);
}
.brand-wrap{display:flex;align-items:center;gap:12px;min-width:0}
.brand-mark{
  width:56px;height:56px;border-radius:50%;overflow:hidden;flex:0 0 auto;
  border:1px solid rgba(118,222,255,.28);
  box-shadow:0 0 18px rgba(56,202,255,.14), 0 0 36px rgba(17,126,255,.08);
}
.brand-mark img{width:100%;height:100%;object-fit:cover;display:block}
.brand-copy{min-width:0}
.brand-name{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(30px,1.95vw,40px);
  line-height:.9;
  font-weight:800;
  letter-spacing:-.03em;
}
.brand-sub{
  margin-top:2px;
  color:#58d8ff;
  font-weight:800;
  font-size:clamp(17px,1vw,22px);
}
.brand-tag{margin-top:4px;font-size:10px;color:#abc7dd}

.main-nav{display:flex;justify-content:center;align-items:center;gap:2px;min-width:0}
.main-nav button{
  border:0;background:transparent;color:#deedf9;
  padding:10px 10px;border-radius:10px;font-size:12px;white-space:nowrap
}
.main-nav button:hover{background:rgba(73,195,255,.08);color:#fff}

.header-actions{display:flex;justify-content:flex-end;align-items:center;gap:8px;flex-wrap:wrap}
.icon-btn,.outline-btn,.primary-btn,.text-btn{
  border-radius:12px;
  font-weight:800;
}
.icon-btn{
  width:42px;height:42px;border:0;background:transparent;color:#ebfbff;font-size:22px
}
.outline-btn{
  color:#f4fbff;
  padding:10px 14px;
  border:1px solid rgba(121,223,255,.48);
  background:
    linear-gradient(180deg, rgba(14,39,76,.98) 0%, rgba(10,28,58,.98) 48%, rgba(8,22,46,.98) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 0 18px rgba(24,149,255,.08);
}
.outline-btn:hover{filter:brightness(1.06)}
.primary-btn{
  color:#03111d;
  padding:11px 16px;
  border:1px solid rgba(218,251,255,.78);
  background:
    linear-gradient(180deg, #ccfbff 0%, #85eaff 6%, #59d6ff 42%, #23bcff 52%, #139efe 78%, #0b7de7 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    inset 0 -2px 0 rgba(3,74,130,.5),
    0 6px 0 rgba(3,66,120,.38),
    0 0 26px rgba(58,205,255,.2);
}
.primary-btn:hover{transform:translateY(-1px);filter:brightness(1.04)}
.text-btn{border:0;background:transparent;color:#75dcff;padding:6px 2px}

/* hero */
.hero{
  position:relative;
  margin:18px 18px 0;
  min-height:292px;
  overflow:hidden;
  background:
    linear-gradient(115deg, rgba(6,20,43,.96) 0%, rgba(8,28,63,.92) 32%, rgba(7,19,41,.94) 62%, rgba(7,23,49,.95) 100%);
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 66% 40%, rgba(70,208,255,.12), transparent 24%),
    linear-gradient(0deg, rgba(255,255,255,.015), rgba(255,255,255,.01));
}
.hero-copy{
  position:relative;
  z-index:2;
  width:53%;
  padding:26px 24px 14px;
}
.hero-eyebrow{font-size:11px;font-weight:800;letter-spacing:.24em;color:#9fe9ff}
.hero h1{
  margin:10px 0 8px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(42px,3.1vw,66px);
  line-height:.98;
  letter-spacing:-.032em;
}
.hero h1 span{color:#4ed9ff}
.hero p{margin:0 0 16px;font-size:15px;color:#bfd9eb}

.search-bar{
  display:flex;align-items:center;gap:8px;height:46px;max-width:620px;
  border-radius:12px;padding-left:12px;
  border:1px solid rgba(110,218,255,.18);
  background:linear-gradient(180deg, rgba(10,28,56,.94), rgba(8,22,45,.98));
  box-shadow:inset 0 0 18px rgba(40,183,255,.06), 0 0 18px rgba(37,167,255,.04);
}
.search-glyph{font-size:22px;color:#c0f2ff}
.search-bar input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:#fff;font-size:14px}
.search-bar input::placeholder{color:#9cb8cf}
.search-bar .primary-btn{height:100%;min-width:112px;border-radius:11px}

.hero-pills{
  margin-top:10px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  max-width:735px;
}
.hero-pills article{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(111,219,255,.15);
  background:linear-gradient(180deg, rgba(10,29,58,.96), rgba(7,22,43,.96));
}
.pill-icon{
  width:36px;height:36px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  color:#56deff;border:1px solid rgba(116,224,255,.42);
  background:radial-gradient(circle at 36% 30%, rgba(205,247,255,.12), rgba(10,72,181,.2) 52%, rgba(0,0,0,0) 64%);
  box-shadow:0 0 18px rgba(44,190,255,.11);
}
.hero-pills strong{display:block;font-size:11px}
.hero-pills span{display:block;font-size:9px;color:#b2cadf;margin-top:2px}

.hero-art{
  position:absolute;
  right:-1.8%;
  top:-6%;
  width:50%;
  height:111%;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.hero-art img{
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 0 30px rgba(55,201,255,.2)) drop-shadow(0 0 80px rgba(20,134,255,.18));
}

/* sidebar and catalog */
.catalog-wrap{
  display:grid;
  grid-template-columns:210px minmax(0,1fr);
  gap:0;
  margin:0 18px 18px;
}
.sidebar{
  padding:14px 14px 16px;
  background:linear-gradient(180deg, rgba(9,25,53,.98), rgba(7,20,43,.98));
  border-radius:0 0 0 18px;
  border-top:0;
}
.sidebar h2,.catalog-head h2{margin:0;font-size:17px}
.category-list{display:flex;flex-direction:column;gap:4px;margin-top:10px}
.category-list button{
  border:0;background:transparent;color:#d7e5f2;text-align:left;
  font-size:12px;border-radius:8px;padding:8px 10px
}
.category-list button::before{content:"▧";color:#8ce4ff;margin-right:8px}
.category-list button.active{
  background:linear-gradient(90deg, rgba(14,112,220,.94), rgba(8,79,163,.56));
  box-shadow:inset 0 0 0 1px rgba(96,215,255,.1), 0 0 18px rgba(33,148,255,.1);
}
.account-box{
  margin-top:12px;padding:12px;border-radius:12px;text-align:center;font-size:11px;
  color:#d8efff;border:1px solid rgba(110,219,255,.2);
  background:linear-gradient(180deg, rgba(8,27,58,.96), rgba(5,18,38,.98));
  box-shadow:inset 0 0 20px rgba(38,189,255,.05), 0 0 18px rgba(33,138,255,.06);
}
.account-crown{font-size:22px;margin-bottom:6px;color:#54dbff}
.account-box .outline-btn{margin-top:10px;width:100%;font-size:11px;padding:9px 8px}

.catalog{
  padding:14px;
  border-radius:0 0 18px 0;
  background:linear-gradient(180deg, rgba(9,25,53,.98), rgba(7,20,43,.98));
}
.catalog-head{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-bottom:10px}
.catalog-head p{margin:2px 0 0;font-size:11px;color:#abc3d9}
.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}

.product-card{
  position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;
  border-radius:12px;border:1px solid rgba(110,219,255,.18);
  background:linear-gradient(180deg, rgba(10,30,61,.97), rgba(8,22,45,.98));
  box-shadow:
    inset 0 0 24px rgba(43,190,255,.05),
    0 8px 24px rgba(0,0,0,.24),
    0 0 18px rgba(34,145,255,.06);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.product-card:hover{
  transform:translateY(-2px);
  border-color:rgba(120,230,255,.32);
  box-shadow:
    inset 0 0 28px rgba(43,190,255,.08),
    0 12px 28px rgba(0,0,0,.28),
    0 0 28px rgba(34,145,255,.09);
}
.badge{
  position:absolute;left:8px;top:8px;z-index:2;border-radius:999px;padding:4px 8px;
  font-size:9px;font-weight:800;color:#03111d;
  background:linear-gradient(180deg, #bff7ff, #58d8ff);
  box-shadow:0 0 18px rgba(94,219,255,.22);
}
.badge.hot{background:linear-gradient(180deg,#a6f1ff,#32c3ff)}
.badge.value{background:linear-gradient(180deg,#c8fbff,#75e4ff)}
.badge.new{background:linear-gradient(180deg,#d0fdff,#90ebff)}
.favorite-btn{position:absolute;right:8px;top:8px;z-index:2;border:0;background:transparent;color:#eefcff;font-size:18px;padding:0}

.product-image{
  position:relative;height:106px;display:grid;place-items:center;font-size:54px;
  background:
    radial-gradient(circle at 50% 40%, rgba(123,226,255,.16), transparent 26%),
    radial-gradient(circle at 38% 72%, rgba(16,132,255,.16), transparent 26%),
    linear-gradient(180deg, rgba(14,40,80,.96), rgba(9,27,53,.98));
  border-bottom:1px solid rgba(88,204,255,.1);
}
.product-image::before{
  content:"";
  position:absolute;width:74px;height:74px;border-radius:50%;
  background:radial-gradient(circle at 35% 32%, rgba(208,248,255,.28), rgba(71,198,255,.12) 28%, rgba(7,72,190,.13) 56%, transparent 68%);
  filter:blur(3px);
}
.product-body{display:flex;flex-direction:column;flex:1;padding:10px}
.product-body h3{margin:0 0 2px;font-size:12px;line-height:1.16}
.product-meta{font-size:9px;color:#9fb7cd}
.moq{margin:4px 0 7px;font-size:10px;font-weight:800}
.price-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-bottom:8px}
.tier-chip{font-size:9px;color:#d1e7f7}
.tier-chip strong{display:block;margin-top:1px;font-size:10px;color:#fff}
.add-btn{
  margin-top:auto;border:1px solid rgba(218,251,255,.72);border-radius:9px;padding:8px 8px;
  font-weight:800;font-size:10px;color:#00111d;
  background:
    linear-gradient(180deg, #d7fdff 0%, #93eaff 8%, #54d6ff 42%, #25bfff 54%, #139efe 82%, #0b7ce4 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 0 rgba(2,64,120,.45), 0 4px 0 rgba(4,68,125,.3), 0 0 18px rgba(57,192,255,.14);
}
.empty-state{
  grid-column:1/-1;padding:34px 18px;border:1px dashed rgba(98,214,255,.22);border-radius:14px;
  text-align:center;color:#a8c1d8
}

/* cart */
.cart-panel{padding:16px 18px 18px}
.cart-header{
  display:flex;justify-content:space-between;align-items:flex-start;gap:14px;
  padding:4px 4px 12px;min-height:78px;
  border-bottom:1px solid rgba(88,204,255,.11)
}
.cart-title-wrap{display:flex;gap:12px;align-items:flex-start}
.cart-icon{font-size:33px;color:#59d5ff;filter:drop-shadow(0 0 10px rgba(80,217,255,.2))}
.micro-copy{font-size:9px;letter-spacing:.17em;color:#91e6ff}
.cart-header h2{margin:0 0 4px;font-size:clamp(18px,1.4vw,28px);line-height:1}
.cart-header h2 span{
  display:inline-grid;place-items:center;min-width:28px;height:28px;margin-left:8px;border-radius:999px;
  color:#00131f;background:linear-gradient(180deg, #d7fdff, #43cfff);
  box-shadow:0 0 16px rgba(70,209,255,.18);font-size:12px
}
.cart-header p{margin:0;font-size:11px;color:#abc4d9}
.cart-items{border-bottom:1px solid rgba(88,204,255,.11)}
.cart-row{
  display:grid;grid-template-columns:minmax(215px,1.7fr) 130px 90px 100px 28px;
  gap:10px;align-items:center;padding:12px 2px;
  border-bottom:1px solid rgba(88,204,255,.08)
}
.cart-product{display:flex;align-items:center;gap:10px;min-width:0}
.cart-thumb{
  width:56px;height:48px;flex:0 0 auto;display:grid;place-items:center;font-size:30px;
  border-radius:10px;border:1px solid rgba(87,203,255,.16);
  background:
    radial-gradient(circle at 50% 40%, rgba(120,227,255,.16), transparent 24%),
    linear-gradient(180deg, rgba(11,35,72,.97), rgba(8,22,46,.99));
  box-shadow:inset 0 0 18px rgba(36,191,255,.05), 0 0 18px rgba(32,146,255,.06);
}
.cart-product strong{
  display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.cart-product small{display:block;margin-top:2px;font-size:9px;color:#b7d7ec}
.qty-control{
  display:flex;align-items:center;border-radius:9px;overflow:hidden;
  border:1px solid rgba(86,204,255,.14);background:rgba(6,21,45,.9)
}
.qty-control button{width:34px;height:32px;border:0;background:transparent;color:#eaf7ff}
.qty-control span{min-width:50px;text-align:center;font-size:11px}
.unit-price,.row-total{text-align:right;font-size:11px}
.row-total{font-weight:800}
.remove-btn{border:0;background:transparent;color:#72deff;font-size:18px}

.cart-summary,.info-section,.business-status{margin-top:12px}
.cart-summary{padding:13px}
.summary-row,.summary-total{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:3px 4px;font-size:12px}
.summary-row.discount{color:#56daff}
.summary-total{margin-top:6px;padding-top:10px;border-top:1px solid rgba(88,204,255,.12);font-size:19px}
.summary-total strong{font-size:clamp(22px,1.65vw,34px)}
.checkout-btn{width:100%;margin-top:8px;font-size:13px}
.checkout-note,.checkout-subnote{text-align:center;font-size:9px;color:#c1dcef;margin-top:8px}
.checkout-subnote{font-size:8px;margin-top:3px;color:#8eacc4}

.info-section{padding:13px}
.section-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.section-head h3{margin:0;font-size:13px}
.benefit-grid{margin-top:8px;display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:7px}
.benefit-grid article{
  text-align:center;padding:10px 5px;border-radius:10px;border:1px solid rgba(88,204,255,.12);
  background:linear-gradient(180deg, rgba(8,25,51,.96), rgba(8,21,43,.98));
  box-shadow:inset 0 0 20px rgba(37,184,255,.04), 0 0 18px rgba(37,167,255,.04)
}
.benefit-icon{font-size:18px;color:#64dcff;text-shadow:0 0 14px rgba(90,220,255,.18)}
.benefit-grid strong,.benefit-grid span{display:block;font-size:9px}
.benefit-grid span{color:#b7d0e3;margin-top:2px}
.tier-caption{margin:2px 0 7px 25px;font-size:9px;color:#90afc7}
.tier-row{
  display:grid;grid-template-columns:1fr 80px 70px;gap:10px;padding:6px 8px;
  border-top:1px solid rgba(88,204,255,.08);font-size:10px
}
.tier-row em{text-align:right;font-style:normal;color:#5fdaff}

.business-status{
  display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:center;
  padding:10px
}
.status-icon{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(180deg, #8af6df, #2fe0af);color:#03241f;font-weight:900;
  box-shadow:0 0 16px rgba(62,232,195,.18)
}
.business-status strong,.business-status span,.business-status small{display:block}
.business-status strong{font-size:11px}
.business-status span{font-size:9px;color:#7ff3d6;margin-top:2px}
.business-status small{font-size:8px;color:#a9ddd0;margin-top:2px}
.status-pill{
  padding:6px 10px;border-radius:999px;border:1px solid rgba(79,235,196,.28);
  background:rgba(9,87,94,.7);color:#8ef9df;font-size:9px
}

/* side decorations */
.side-type{
  position:absolute;display:flex;flex-direction:column;gap:9px;color:#71dbff;
  font-size:9px;letter-spacing:.28em;opacity:.74;text-shadow:0 0 16px rgba(72,205,255,.12)
}
.side-type-right{right:1.2%;top:17%}
.side-type-left{left:.2%;bottom:3%}
.side-type i{width:28px;height:2px;background:#50d5ff;margin-top:10px;box-shadow:0 0 16px rgba(80,213,255,.18)}
.corner-note{
  position:absolute;right:1.5%;bottom:8%;
  font-family:"Segoe Script","Brush Script MT",cursive;font-size:20px;line-height:1.05;
  text-align:right;color:#dff6ff;opacity:.85;text-shadow:0 0 18px rgba(79,211,255,.12)
}

/* toast + dialog */
.toast{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);opacity:0;pointer-events:none;
  padding:12px 16px;border-radius:12px;border:1px solid rgba(98,214,255,.28);
  background:linear-gradient(180deg, rgba(8,27,57,.98), rgba(6,18,39,.99));color:#eefaff;font-size:12px;
  box-shadow:0 22px 60px rgba(0,0,0,.45);transition:.24s ease;z-index:1000
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.dialog{
  width:min(520px, calc(100vw - 28px));padding:22px;border-radius:18px;border:1px solid rgba(98,214,255,.35);
  background:linear-gradient(180deg, rgba(10,31,63,.98), rgba(7,21,43,.99));color:var(--text);
  box-shadow:0 28px 90px rgba(0,0,0,.65)
}
.dialog::backdrop{background:rgba(0,8,20,.76);backdrop-filter:blur(6px)}
.dialog-close{position:absolute;right:12px;top:9px;border:0;background:transparent;color:#c6efff;font-size:24px}
.dialog-title{margin:0 0 9px;font-size:22px}
.dialog-copy{font-size:13px;line-height:1.55;color:#acc9df}
.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}

@media (max-width: 1380px){
  body{overflow:auto}
  .app-shell{padding:10px}
  .scene-frame{height:auto;min-height:0}
  .scene{height:auto;display:flex;flex-direction:column;gap:14px}
  .panel,.scene.cart-front .panel{
    position:relative;left:auto!important;top:auto!important;width:100%!important;height:auto!important;filter:none!important
  }
  .store-header{grid-template-columns:minmax(260px,1fr) auto;row-gap:8px}
  .main-nav{grid-column:1/-1;justify-content:flex-start;overflow:auto}
  .hero-copy{width:58%}
  .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .scene.cart-front .cart-panel{order:1}
  .scene.cart-front .store-panel{order:2}
  .side-type,.corner-note{display:none}
}
@media (max-width: 820px){
  .store-header{display:flex;flex-wrap:wrap;padding:16px}
  .brand-wrap{width:100%}
  .main-nav{width:100%;order:3}
  .header-actions{width:100%;justify-content:flex-start}
  .hero-copy{width:100%;padding:20px 18px}
  .hero-art{opacity:.28;width:80%;right:-26%;top:-8%}
  .hero h1{font-size:36px}
  .hero-pills{grid-template-columns:1fr}
  .catalog-wrap{grid-template-columns:1fr}
  .sidebar{border-radius:0}
  .catalog{border-radius:0 0 18px 18px}
  .category-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cart-row{grid-template-columns:minmax(0,1fr) auto;gap:8px}
  .qty-control{grid-column:1;max-width:130px}
  .unit-price{display:none}
  .row-total{grid-column:2;grid-row:2}
  .remove-btn{grid-column:2;grid-row:1}
}
@media (max-width: 560px){
  .hero h1{font-size:30px}
  .search-bar{height:auto;flex-wrap:wrap;padding:8px}
  .search-bar .primary-btn{width:100%;height:38px}
  .product-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .panel,.toast{transition:none !important}
}


/* =======================================================================
   2026-09-14 VISUAL POLISH PASS
   - Keep user's replacement JPG assets by filename (assets folder not included).
   - Background always fills the viewport.
   - hero_globe.jpg is the entire hero-block background and may crop vertically.
   - Borders are 2x thicker, gradient-lit, with stronger bloom/lens flares.
   - When cart comes forward, storefront recedes to 85% scale and returns to 100%.
   - Other panel motion remains unchanged.
   ======================================================================= */

html, body {
  width: 100%;
  min-height: 100%;
}
body {
  min-height: 100vh;
  min-height: 100dvh;
  background-color: #020612;
  background-image: url('assets/background.jpg');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Main panels: true 2px gradient rim + layered bloom. */
.panel {
  border: 2px solid transparent;
  background:
    linear-gradient(180deg, rgba(11,27,57,.985), rgba(7,18,38,.997)) padding-box,
    linear-gradient(135deg,
      #d6fbff 0%,
      #6ce4ff 12%,
      #17b9ff 29%,
      #0969ff 50%,
      #24c5ff 70%,
      #9bedff 88%,
      #d8fcff 100%) border-box;
  box-shadow:
    0 0 10px rgba(151,238,255,.52),
    0 0 28px rgba(50,201,255,.36),
    0 0 72px rgba(18,123,255,.24),
    inset 0 0 20px rgba(87,218,255,.11),
    0 22px 66px rgba(0,0,0,.50);
  transform: scale(1);
  transform-origin: left center;
  transition:
    left .58s cubic-bezier(.22,.86,.22,1),
    top .58s cubic-bezier(.22,.86,.22,1),
    width .58s cubic-bezier(.22,.86,.22,1),
    height .58s cubic-bezier(.22,.86,.22,1),
    transform .58s cubic-bezier(.22,.86,.22,1),
    opacity .58s ease,
    filter .58s ease,
    box-shadow .58s ease;
}

/* Pronounced lens flare stars on the main panel rims. */
.panel-glow {
  z-index: 30;
  overflow: hidden;
  background:
    radial-gradient(circle at 1.5% 2%, rgba(255,255,255,.98) 0 2px, rgba(161,243,255,.94) 3px 6px, rgba(50,203,255,.52) 7px 14px, transparent 31px),
    radial-gradient(circle at 98% 79%, rgba(255,255,255,.96) 0 2px, rgba(151,239,255,.90) 3px 5px, rgba(35,179,255,.46) 6px 13px, transparent 28px),
    linear-gradient(90deg, transparent 0%, rgba(85,221,255,.18) 39%, rgba(218,251,255,.90) 50%, rgba(85,221,255,.18) 61%, transparent 100%) left top / 220px 3px no-repeat,
    linear-gradient(180deg, transparent 0%, rgba(85,221,255,.13) 36%, rgba(218,251,255,.70) 50%, rgba(85,221,255,.13) 64%, transparent 100%) left top / 3px 160px no-repeat,
    linear-gradient(90deg, transparent 0%, rgba(65,205,255,.11) 39%, rgba(208,249,255,.62) 50%, rgba(65,205,255,.11) 61%, transparent 100%) right 18% / 180px 2px no-repeat;
  box-shadow:
    inset 0 0 0 1px rgba(203,250,255,.14),
    inset 0 0 32px rgba(46,194,255,.10),
    0 0 28px rgba(56,202,255,.24),
    0 0 78px rgba(17,127,255,.17);
}
.panel-glow::before,
.panel-glow::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(.2px) drop-shadow(0 0 13px rgba(87,222,255,.95)) drop-shadow(0 0 32px rgba(18,144,255,.65));
}
.panel-glow::before {
  width: 155px;
  height: 42px;
  left: -50px;
  top: -20px;
  background:
    radial-gradient(circle at 50% 50%, #fff 0 2px, #c6f9ff 3px 5px, rgba(67,216,255,.82) 6px 12px, transparent 25px),
    linear-gradient(90deg, transparent, rgba(112,232,255,.28) 27%, rgba(234,253,255,.95) 50%, rgba(112,232,255,.28) 73%, transparent);
}
.panel-glow::after {
  width: 145px;
  height: 38px;
  right: -38px;
  bottom: 17%;
  background:
    radial-gradient(circle at 50% 50%, #fff 0 2px, #c6f9ff 3px 5px, rgba(67,216,255,.78) 6px 11px, transparent 24px),
    linear-gradient(90deg, transparent, rgba(112,232,255,.24) 27%, rgba(234,253,255,.88) 50%, rgba(112,232,255,.24) 73%, transparent);
}

/* Every major interior box gets a thicker gradient edge and bloom. */
.box-glow,
.glow-card,
.product-card,
.account-box,
.search-bar,
.benefit-grid article,
.cart-thumb,
.qty-control,
.brand-mark {
  border: 2px solid transparent;
  background:
    linear-gradient(180deg, rgba(9,27,56,.94), rgba(7,20,43,.97)) padding-box,
    linear-gradient(135deg,
      rgba(191,248,255,.95),
      rgba(55,205,255,.82) 28%,
      rgba(14,113,255,.86) 56%,
      rgba(91,224,255,.88) 82%,
      rgba(208,251,255,.96)) border-box;
  box-shadow:
    0 0 7px rgba(121,229,255,.25),
    0 0 20px rgba(37,172,255,.16),
    inset 0 0 15px rgba(70,207,255,.05);
}

.box-glow,
.glow-card,
.product-card,
.account-box {
  position: relative;
}
.box-glow::after,
.glow-card::after,
.account-box::after {
  content: "";
  position: absolute;
  z-index: 4;
  pointer-events: none;
  width: 95px;
  height: 28px;
  right: -30px;
  top: -13px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.98) 0 1px, rgba(168,244,255,.90) 2px 4px, rgba(46,196,255,.54) 5px 10px, transparent 20px),
    linear-gradient(90deg, transparent, rgba(103,226,255,.20) 30%, rgba(232,253,255,.74) 50%, rgba(103,226,255,.20) 70%, transparent);
  filter: drop-shadow(0 0 10px rgba(74,217,255,.72)) drop-shadow(0 0 22px rgba(21,145,255,.40));
}

/* Hero JPG now fills the WHOLE "Wholesale Today" block.  The image is
   allowed to crop vertically; cover guarantees no horizontal gaps. */
.hero.box-glow {
  border: 2px solid transparent;
  background:
    linear-gradient(90deg,
      rgba(3,13,30,.90) 0%,
      rgba(4,17,37,.78) 31%,
      rgba(4,19,43,.46) 49%,
      rgba(3,15,35,.12) 72%,
      rgba(3,14,32,.06) 100%) padding-box,
    url('assets/hero_globe.png') center center / cover no-repeat padding-box,
    linear-gradient(135deg,
      #d5fbff 0%,
      #60ddff 16%,
      #13b0ff 34%,
      #0960ff 56%,
      #35cbff 78%,
      #c4f8ff 100%) border-box;
  box-shadow:
    0 0 9px rgba(139,235,255,.34),
    0 0 26px rgba(51,194,255,.24),
    0 0 58px rgba(18,123,255,.14),
    inset 0 0 36px rgba(27,149,255,.06);
}
.hero-art { display: none !important; }

/* Preserve special surfaces while retaining the new gradient rim. */
.business-status.box-glow {
  background:
    linear-gradient(180deg, rgba(7,76,78,.28), rgba(7,48,53,.34)) padding-box,
    linear-gradient(135deg, #8dffe1, #27e0b2 36%, #1aa4ff 72%, #aaf6ff) border-box;
  box-shadow: 0 0 10px rgba(82,241,205,.22), 0 0 28px rgba(44,198,255,.11), inset 0 0 18px rgba(59,230,194,.06);
}

/* Keep the generated/replacement background fitted to the browser viewport. */
@media (max-width: 1380px) {
  body {
    background-size: cover;
    background-position: center center;
    background-attachment: scroll;
  }
}

/* Validated desktop geometry from v4: entire two-panel composition occupies
   90% x 90% of the viewport, preserving its established relative placement. */
@media (min-width: 1381px) {
  body { overflow: hidden; }
  .app-shell {
    position: fixed;
    inset: 0;
    min-height: 0;
    padding: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
  }
  .scene-frame {
    width: 90vw;
    height: 90vh;
    height: 90dvh;
    min-width: 0;
    min-height: 0;
    max-width: none;
    max-height: none;
  }
  .scene {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
  }
  .panel {
    position: absolute;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(110,218,255,.35) transparent;
  }

  .store-panel,
  .scene.cart-front .store-panel {
    left: 0%;
    top: 12.70903010%;
    width: 85.07109005%;
    height: 87.29096990%;
  }
  .cart-panel {
    left: 58.76777251%;
    top: 0%;
    width: 41.23222749%;
    height: 92.86510591%;
  }
  .scene.cart-front .cart-panel {
    left: 39.33649289%;
    top: 4.68227425%;
    width: 50.47393365%;
    height: 90.52396878%;
  }

  .store-panel { container-type: inline-size; container-name: storefront; }
  .cart-panel { container-type: inline-size; container-name: wholesale-cart; }

  /* Storefront remains the same CSS size/position, but visually recedes to 85%.
     Returning it to the front automatically animates scale back to 100%. */
  .store-panel { transform: scale(1); transform-origin: left center; }
  .scene.cart-front .store-panel {
    transform: scale(.85);
    filter: brightness(.72) saturate(.84);
  }

  /* Front panel casts a pronounced real shadow onto the rear panel, while the
     cyan edge bloom remains visible around it. */
  .store-panel.is-front {
    box-shadow:
      13px 15px 22px 2px rgba(0,0,0,.76),
      32px 30px 58px 8px rgba(0,0,0,.70),
      0 0 11px rgba(151,238,255,.55),
      0 0 32px rgba(50,201,255,.38),
      0 0 82px rgba(18,123,255,.24),
      inset 0 0 22px rgba(87,218,255,.11);
  }
  .scene.cart-front .cart-panel.is-front {
    box-shadow:
      -13px 15px 22px 2px rgba(0,0,0,.76),
      -32px 30px 58px 8px rgba(0,0,0,.70),
      0 0 11px rgba(151,238,255,.55),
      0 0 32px rgba(50,201,255,.38),
      0 0 82px rgba(18,123,255,.24),
      inset 0 0 22px rgba(87,218,255,.11);
  }

  .side-type-left { left: auto; right: calc(100% + .6vw); }
  .side-type-right { right: auto; left: calc(100% + .6vw); }
  .corner-note { right: 0; bottom: auto; top: calc(100% + .3vh); font-size: 11px; }
}

/* Reflow content based on the actual storefront panel width on ultrawide screens. */
@container storefront (max-width: 1200px) {
  .store-header { grid-template-columns: minmax(0,1fr) auto; row-gap: 8px; }
  .main-nav { grid-column: 1 / -1; justify-content: flex-start; overflow: auto; }
  .hero-copy { width: 58%; }
}
@container storefront (max-width: 850px) {
  .store-header { display: flex; flex-wrap: wrap; }
  .brand-wrap { width: 100%; }
  .header-actions { width: 100%; justify-content: flex-start; }
  .main-nav { width: 100%; order: 3; }
  .hero-copy { width: 66%; }
  .product-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@container storefront (max-width: 650px) {
  .hero-copy { width: 100%; }
  .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .panel { transition: none !important; }
}


/* =======================================================================
   2026-09-14 V6 CORRECTIONS
   1) Lens flares remain ONLY on the two main panels (.panel-glow).
   2) Interior boxes keep their gradient rims and bloom, but no flare stars.
   3) hero_globe.png is a RELATIVE asset path, so the whole site folder can move.
   4) The hero image is exactly the width of the hero block, centered vertically.
      Any excess height is cropped by the hero's existing overflow:hidden.
   ======================================================================= */

/* Remove lens-flare hotspots from every interior box.
   Main storefront/cart flares are untouched because they live in .panel-glow. */
.box-glow::after,
.glow-card::after,
.account-box::after {
  content: none !important;
  display: none !important;
}

/* Keep the hero image confined to this block only.
   100% auto = exactly the block width, never wider.
   center center = vertically centered; hero overflow crops excess height. */
.hero.box-glow {
  background:
    linear-gradient(90deg,
      rgba(3,13,30,.90) 0%,
      rgba(4,17,37,.74) 31%,
      rgba(4,19,43,.40) 49%,
      rgba(3,15,35,.10) 72%,
      rgba(3,14,32,.04) 100%) padding-box,
    url('assets/hero_globe.png') center center / 100% auto no-repeat padding-box,
    linear-gradient(135deg,
      #d5fbff 0%,
      #60ddff 16%,
      #13b0ff 34%,
      #0960ff 56%,
      #35cbff 78%,
      #c4f8ff 100%) border-box;
}

/* The generated-image element is not used; the PNG is the hero background. */
.hero-art {
  display: none !important;
}


/* =======================================================================
   V7 BRAND UPDATE
   Replace the old generated globe + text wordmark with assets/logo.png.
   ======================================================================= */
.brand-logo {
  display: block;
  width: auto;
  height: 58px;
  max-width: min(320px, 25vw);
  object-fit: contain;
  object-position: left center;
  flex: 0 1 auto;
  filter:
    drop-shadow(0 0 7px rgba(92, 220, 255, .24))
    drop-shadow(0 0 18px rgba(30, 150, 255, .12));
}

.brand-wrap {
  min-width: 0;
}

.brand-copy {
  flex: 0 1 auto;
  min-width: 0;
}

@media (max-width: 820px) {
  .brand-logo {
    height: 52px;
    max-width: min(280px, 70vw);
  }
}

@media (max-width: 560px) {
  .brand-logo {
    height: 46px;
    max-width: 64vw;
  }
}


/* =======================================================================
   V8 PHONE LANDSCAPE LOCK
   On phone-sized touch devices, portrait orientation is visually rotated
   into landscape. This is a software fallback for browsers that do not
   allow normal web pages to force the OS orientation.
   ======================================================================= */

html.phone-landscape-lock,
html.phone-landscape-lock body {
  width: 100%;
  height: 100%;
  overflow: hidden !important;
  overscroll-behavior: none;
}

html.phone-landscape-lock body {
  position: fixed;
  inset: 0;
}

/* Turn the portrait viewport into a landscape canvas.
   JS supplies exact live viewport dimensions so mobile browser bars do not
   distort the calculation. */
html.phone-landscape-lock .app-shell {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: var(--phone-viewport-h) !important;
  height: var(--phone-viewport-w) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding:
    max(6px, env(safe-area-inset-left))
    max(6px, env(safe-area-inset-bottom))
    max(6px, env(safe-area-inset-right))
    max(6px, env(safe-area-inset-top)) !important;
  transform-origin: top left !important;
  transform: rotate(90deg) translateY(-100%) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Use the full rotated landscape width instead of the original portrait vw. */
html.phone-landscape-lock .scene-frame {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* Preserve the normal mobile-responsive site inside the rotated landscape
   canvas rather than letting the browser crop the page. */
html.phone-landscape-lock .scene {
  width: 100% !important;
  min-width: 0 !important;
}

/* Avoid selection/drag artifacts while the whole site is rotated. */
html.phone-landscape-lock .panel {
  -webkit-tap-highlight-color: transparent;
}

/* In genuine landscape orientation no transform is needed. */
html.phone-landscape-native,
html.phone-landscape-native body {
  min-height: 100%;
}

:root{--bw-accent:#58d8ff;--bw-line:rgba(88,216,255,.26);--bw-soft:rgba(12,67,108,.34);--bw-glow:rgba(56,202,255,.28);}

/* =======================================================================
   LIVE BUSINESS & WHOLESALE CATALOG + PROFIT-TIER INTEGRATION
   Keeps the approved two-panel Business design; only live product/cart
   content and wholesale-pricing presentation are added here.
   ======================================================================= */
.category-error{padding:8px 10px;font-size:10px;color:var(--muted)}
.catalog{max-height:330px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--bw-accent) transparent}
.sidebar{max-height:330px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--bw-accent) transparent}
.product-card{cursor:pointer}
.product-card.is-unavailable{opacity:1}
.product-image{overflow:hidden}
.product-image img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;display:block;padding:8px}
.product-image-placeholder{position:relative;z-index:1;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;font-size:30px;font-weight:900;border:1px solid var(--bw-line);background:var(--bw-soft)}
.favorite-btn.saved{color:var(--bw-accent);text-shadow:0 0 12px var(--bw-glow)}
.retail-line{display:flex;justify-content:space-between;gap:6px;align-items:center;margin:6px 0 2px;font-size:9px;color:var(--muted)}
.retail-line strong{color:var(--text);font-size:10px}
.price-tiers{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.tier-chip{min-width:0;padding:5px 6px;border:1px solid var(--bw-line);border-radius:7px;background:var(--bw-soft)}
.tier-chip span,.tier-chip strong,.tier-chip small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tier-chip strong{font-size:10px}
.tier-chip small{margin-top:1px;font-size:7px;color:var(--bw-accent)}
.add-btn:disabled{cursor:not-allowed;filter:grayscale(.7);opacity:.6;transform:none!important}
.empty-state.compact{padding:15px 10px;font-size:10px}
.empty-state .retry-products{margin-top:10px}
.cart-thumb{overflow:hidden}
.cart-thumb img{width:100%;height:100%;object-fit:contain;padding:3px}
.cart-thumb span{font-weight:900;color:var(--bw-accent)}
.cart-product small{white-space:normal;line-height:1.3}
.cart-row{grid-template-columns:minmax(200px,1.55fr) 132px 94px 105px 28px}
.qty-control input{width:58px;height:32px;border:0;border-left:1px solid var(--bw-line);border-right:1px solid var(--bw-line);outline:0;background:transparent;color:var(--text);text-align:center;font-size:11px;-moz-appearance:textfield}
.qty-control input::-webkit-outer-spin-button,.qty-control input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.unit-price{display:flex;flex-direction:column;gap:1px}
.unit-price .old-unit{text-decoration:line-through;color:var(--muted);font-size:8px}
.unit-price strong{color:var(--bw-accent)}
.row-total{display:flex;flex-direction:column;gap:1px}
.row-total small{color:var(--bw-accent);font-size:8px}
.row-total strong{font-size:11px}
.summary-row.discount strong{color:var(--bw-accent)}
.tier-row{grid-template-columns:minmax(0,1.3fr) minmax(72px,.7fr) 56px}
.tier-row strong{font-size:9px;text-align:right}

.dialog:has(.business-product-detail),.dialog:has(.rules-table-wrap){width:min(980px,calc(100vw - 28px));max-height:min(90vh,880px);overflow:auto}
.business-product-detail{display:grid;grid-template-columns:minmax(240px,36%) minmax(0,1fr);gap:20px;align-items:start}
.detail-media{min-height:270px;border-radius:14px;border:1px solid var(--bw-line);background:var(--bw-soft);display:grid;place-items:center;overflow:hidden}
.detail-media img{width:100%;height:320px;object-fit:contain;padding:12px}
.detail-image-placeholder{color:var(--muted)}
.detail-main h3{margin:4px 0 10px;font-size:22px;line-height:1.12;color:var(--text)}
.detail-rppn{font-size:9px;letter-spacing:.14em;color:var(--bw-accent)}
.detail-price-line{display:flex;justify-content:space-between;gap:12px;padding:9px 10px;border:1px solid var(--bw-line);border-radius:10px;background:var(--bw-soft)}
.detail-price-line span{color:var(--muted)}
.detail-price-line strong{font-size:18px;color:var(--text)}
.detail-moq{margin:9px 0;font-size:11px;color:var(--muted)}
.detail-moq strong{color:var(--bw-accent)}
.detail-tier-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:12px 0}
.detail-tier-card{padding:9px 10px;border:1px solid var(--bw-line);border-radius:10px;background:var(--bw-soft)}
.detail-tier-card strong,.detail-tier-card span,.detail-tier-card small{display:block}
.detail-tier-card strong{font-size:10px}
.detail-tier-card span{margin-top:2px;font-size:14px;color:var(--bw-accent);font-weight:900}
.detail-tier-card small{margin-top:3px;font-size:8px;color:var(--muted)}
.detail-profit-note{padding:9px 10px;border-left:3px solid var(--bw-accent);background:var(--bw-soft);font-size:10px;line-height:1.45;color:var(--muted)}
.detail-description{max-height:120px;overflow:auto;margin-top:10px;font-size:10px;line-height:1.45;color:var(--muted)}
.variant-selectors{display:grid;gap:8px;margin:10px 0}
.variant-group>strong{display:block;margin-bottom:5px;font-size:10px}
.variant-options{display:flex;flex-wrap:wrap;gap:5px}
.variant-option{padding:6px 8px;border-radius:8px;border:1px solid var(--bw-line);background:var(--bw-soft);color:var(--text);font-size:9px}
.variant-option.selected{border-color:var(--bw-accent);box-shadow:0 0 12px var(--bw-glow);color:var(--bw-accent)}
.variant-option:disabled{opacity:.28;cursor:not-allowed}
.rules-table-wrap{overflow:auto;border:1px solid var(--bw-line);border-radius:12px}
.rules-table{width:100%;border-collapse:collapse;font-size:11px}
.rules-table th,.rules-table td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--bw-line);vertical-align:top}
.rules-table th{color:var(--bw-accent);background:var(--bw-soft)}
.rules-table tbody tr:last-child td{border-bottom:0}
.checkout-review-row,.checkout-review-savings,.checkout-review-total{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--bw-line)}
.checkout-review-savings{color:var(--bw-accent)}
.checkout-review-total{margin-top:4px;font-size:16px;border-bottom:0}

@media(max-width:820px){
  .catalog,.sidebar{max-height:none;overflow:visible}
  .business-product-detail{grid-template-columns:1fr}
  .detail-media{min-height:180px}.detail-media img{height:220px}
}


/* =======================================================================
   2026-09-17 FINAL BUSINESS FUNCTIONALITY PASS
   Existing two-panel artwork is preserved. These rules only correct the live
   catalog density, logo scale, square product media, category drill-down and
   application/verification dialogs.
   ======================================================================= */
.brand-logo{height:116px!important;max-width:min(520px,42vw)!important}
.product-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:8px!important}
.product-image{height:auto!important;aspect-ratio:1/1!important}
.catalog,.sidebar{max-height:none!important;overflow:visible!important}
.catalog-wrap{align-items:stretch}
.store-panel{overflow-y:auto!important;overflow-x:hidden!important}
.category-list{display:block!important}
.category-node{display:grid;grid-template-columns:18px minmax(0,1fr);align-items:center;gap:2px;margin:1px 0;padding-left:calc(var(--category-depth,0) * 10px)}
.category-node.depth-1{--category-depth:1}.category-node.depth-2{--category-depth:2}.category-node.depth-3{--category-depth:3}.category-node.depth-4{--category-depth:4}.category-node.depth-5{--category-depth:5}
.category-arrow,.category-arrow-spacer{width:18px;height:28px;display:grid;place-items:center;border:0;background:transparent;color:var(--bw-accent);padding:0;font-size:12px}
.category-name-btn,.category-all-btn{width:100%;border:0;background:transparent;color:#d7e5f2;text-align:left;font-size:11px;border-radius:8px;padding:7px 8px}
.category-name-btn.active,.category-all-btn.active{background:linear-gradient(90deg,rgba(14,112,220,.94),rgba(8,79,163,.56));box-shadow:inset 0 0 0 1px rgba(96,215,255,.1),0 0 18px rgba(33,148,255,.1)}

.dialog:has(.business-intro),.dialog:has(.application-step),.dialog:has(.application-form),.dialog:has(.certificate-confirm){width:min(840px,calc(100vw - 28px));max-height:min(92vh,900px);overflow:auto}
.business-intro{display:grid;gap:16px}
.business-intro-hero{display:grid;grid-template-columns:92px minmax(0,1fr);gap:16px;align-items:center;padding:20px;border:1px solid var(--bw-line);border-radius:16px;background:linear-gradient(135deg,var(--bw-soft),rgba(255,255,255,.025));box-shadow:0 0 28px var(--bw-glow)}
.intro-spark{width:82px;height:82px;border-radius:50%;display:grid;place-items:center;font-size:42px;color:var(--bw-accent);border:1px solid var(--bw-line);background:radial-gradient(circle,rgba(255,255,255,.18),var(--bw-soft));box-shadow:0 0 28px var(--bw-glow)}
.intro-kicker{font-size:9px;letter-spacing:.2em;color:var(--bw-accent);font-weight:900}
.business-intro h3{margin:4px 0 6px;font-size:28px;line-height:1.05;color:var(--text)}
.business-intro p{margin:0;color:var(--muted)}
.intro-top-cta{margin-top:12px}
.intro-benefit-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.intro-benefit-grid article{padding:12px;border:1px solid var(--bw-line);border-radius:12px;background:var(--bw-soft)}
.intro-benefit-grid b{display:grid;width:34px;height:34px;place-items:center;border-radius:50%;color:var(--bw-accent);background:rgba(255,255,255,.06);margin-bottom:7px}
.intro-benefit-grid strong,.intro-benefit-grid span{display:block}.intro-benefit-grid strong{font-size:11px;color:var(--text)}.intro-benefit-grid span{font-size:9px;line-height:1.4;color:var(--muted);margin-top:3px}
.intro-how,.intro-callout{padding:14px;border:1px solid var(--bw-line);border-radius:12px;background:rgba(255,255,255,.025)}
.intro-how h4{margin:0 0 8px;color:var(--text)}.intro-how ol{margin:0;padding-left:20px}.intro-how li{margin:7px 0;color:var(--muted)}
.intro-callout{border-left:4px solid var(--bw-accent);color:var(--muted)}
.application-form,.application-step{display:grid;gap:11px}.application-form label,.application-step label{display:grid;gap:5px;font-size:10px;font-weight:800;color:var(--text)}
.application-form input,.application-form select,.application-step input,.application-step select{width:100%;min-height:42px;border-radius:9px;border:1px solid var(--bw-line);background:rgba(0,0,0,.22);color:var(--text);padding:9px 10px;outline:0}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.form-note{font-size:9px!important;line-height:1.5;color:var(--muted)!important}.application-message{min-height:18px;color:var(--bw-accent);font-size:10px;font-weight:800}
.capture-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.capture-box{min-height:90px;padding:10px;border:1px dashed var(--bw-line)!important;border-radius:12px;background:var(--bw-soft)}.capture-box input{min-height:38px!important;padding:6px!important}
.certificate-confirm{display:grid;grid-template-columns:1fr 1fr;gap:8px}.certificate-confirm>div{padding:12px;border:1px solid var(--bw-line);border-radius:10px;background:var(--bw-soft)}.certificate-confirm span,.certificate-confirm strong{display:block}.certificate-confirm span{font-size:9px;color:var(--muted)}.certificate-confirm strong{margin-top:3px;color:var(--text)}.certificate-confirm p{grid-column:1/-1;color:var(--muted)}
.read-only-business,.account-summary,.application-success{padding:13px;border:1px solid var(--bw-line);border-radius:12px;background:var(--bw-soft)}.read-only-business span,.read-only-business strong,.read-only-business small{display:block}.read-only-business strong{font-size:16px;color:var(--text)}.read-only-business small{color:var(--muted)}
.square-card-box{min-height:90px;padding:12px;border:1px solid var(--bw-line);border-radius:12px;background:#fff}.success-check{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;margin:0 auto 10px;font-size:30px;color:#062;background:#bfffd7}.application-success{text-align:center}

@media(max-width:1380px){.product-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important}.brand-logo{height:100px!important}}
@media(max-width:820px){.product-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}.brand-logo{height:92px!important;max-width:76vw!important}.intro-benefit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.capture-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.product-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:5px!important}.product-body{padding:6px!important}.product-body h3{font-size:9px!important}.product-meta,.retail-line,.moq{font-size:7px!important}.tier-chip{padding:3px!important}.tier-chip strong{font-size:8px!important}.tier-chip small{font-size:6px!important}.add-btn{font-size:8px!important;padding:6px 4px!important}.brand-logo{height:86px!important}.business-intro-hero{grid-template-columns:1fr}.intro-spark{display:none}.form-grid-2,.certificate-confirm{grid-template-columns:1fr}.capture-grid{grid-template-columns:1fr 1fr}}

/* Phone density stays four across even on wide landscape phones. */
html.phone-landscape-lock .product-grid,html.phone-landscape-native .product-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}

/* =======================================================================
   2026-09-18 BUSINESS EXPERIENCE + DENSITY UPDATE
   Keeps the approved two-panel artwork while making the storefront compact,
   account-gated and functionally aligned with the retail catalog engine.
   ======================================================================= */
.store-header{
  min-height:44px!important;
  height:48px!important;
  padding:3px 12px!important;
  grid-template-columns:minmax(220px,1fr) 1px auto!important;
  overflow:visible!important;
}
.brand-wrap{height:42px!important;overflow:visible!important;position:relative;z-index:4}
.brand-logo{height:76px!important;max-width:360px!important;object-fit:contain!important;transform:translateY(1px);transform-origin:left center}
.brand-copy{margin-left:4px}.brand-sub{font-size:13px!important}.brand-tag{font-size:8px!important;margin-top:0!important}
.main-nav{display:none!important}
.header-actions{gap:6px!important;flex-wrap:nowrap!important}
.header-actions .outline-btn,.header-actions .primary-btn{padding:7px 10px!important;font-size:10px!important;white-space:nowrap}
.icon-btn{width:31px!important;height:31px!important;font-size:17px!important}

/* Six compact cards across desktop; four across every phone presentation. */
.product-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:6px!important;align-items:start!important}
.product-card{border-radius:9px!important;min-width:0!important;overflow:hidden!important}
.product-image{aspect-ratio:1/1!important;height:auto!important;min-height:0!important}
.product-image img{padding:3px!important;object-fit:contain!important}
.product-body{padding:5px!important;gap:2px!important}
.product-body h3{font-size:9px!important;line-height:1.12!important;min-height:20px!important;max-height:30px!important;overflow:hidden!important}
.product-meta{font-size:6.5px!important;line-height:1.2!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.retail-line,.moq{font-size:7.5px!important;margin:1px 0!important}
.struck-price{text-decoration:line-through!important;text-decoration-thickness:1.5px!important;opacity:.72}
.price-tiers{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:3px!important;margin:3px 0!important}
.tier-chip{padding:3px 4px!important;border-radius:6px!important}
.tier-chip span{font-size:7px!important}.tier-chip strong{font-size:11px!important;line-height:1.1!important;color:var(--bw-accent)!important}.tier-chip small{font-size:6px!important}
.card-actions{display:grid;grid-template-columns:1fr;gap:4px;margin-top:3px}
.wishlist-btn,.add-btn{width:100%;border-radius:7px;font-weight:900}
.wishlist-btn{min-height:25px;padding:4px;border:1px solid var(--bw-line);background:var(--bw-soft);color:var(--text);font-size:7.5px}
.wishlist-btn.saved{color:var(--bw-accent);border-color:var(--bw-accent)}
.add-btn{min-height:33px!important;padding:6px 4px!important;font-size:9px!important}

/* One-level-at-a-time category navigation, matching the retail drawer behavior. */
.category-list{display:block!important}
.category-drill-row{display:grid;grid-template-columns:minmax(0,1fr) 28px;gap:2px;align-items:center;border-bottom:1px solid rgba(255,255,255,.035)}
.category-name-btn,.category-all-btn,.category-back-btn{width:100%;border:0;background:transparent;color:#d7e5f2;text-align:left;font-size:10px;border-radius:7px;padding:7px 6px}
.category-name-btn.active,.category-all-btn.active{background:var(--bw-soft);color:var(--bw-accent)}
.category-drill-arrow{height:28px;border:0;background:transparent;color:var(--bw-accent);font-size:20px;font-weight:900;border-radius:6px}
.category-drill-arrow:hover,.category-back-btn:hover,.category-name-btn:hover{background:var(--bw-soft)}
.category-current{padding:5px 6px 8px;color:var(--bw-accent);font-size:11px;font-weight:900;border-bottom:1px solid var(--bw-line)}

/* Initial sign-in / sign-up gate: nearly full screen, locked, split 50/50. */
.dialog.entry-gate{width:min(94vw,1580px)!important;max-width:none!important;height:min(91vh,920px)!important;max-height:none!important;padding:0!important;overflow:auto!important}
.dialog.entry-gate .dialog-close{display:none!important}
.dialog.entry-gate #dialogBody{height:100%}
.entry-gate-grid{min-height:100%;display:grid;grid-template-columns:1fr 1fr}
.entry-signin,.entry-join{padding:clamp(24px,3vw,52px);display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.entry-signin{background:linear-gradient(145deg,rgba(255,255,255,.035),var(--bw-soft))}
.entry-signin::before,.entry-join::after{content:"";position:absolute;width:320px;height:320px;border-radius:50%;filter:blur(2px);opacity:.2;pointer-events:none;background:radial-gradient(circle,var(--bw-accent),transparent 68%)}
.entry-signin::before{left:-160px;top:-120px}.entry-join::after{right:-160px;bottom:-120px}
.entry-signin>* ,.entry-join>*{position:relative;z-index:1}
.entry-signin h2{font-size:clamp(28px,2.3vw,44px);margin:8px 0}.entry-signin p{font-size:14px;color:var(--muted);max-width:560px}
.entry-icon{width:76px;height:76px;border-radius:20px;display:grid;place-items:center;font-size:36px;color:var(--bw-accent);background:var(--bw-soft);border:1px solid var(--bw-line);box-shadow:0 0 34px var(--bw-glow)}
.entry-signin .application-form{max-width:520px;margin-top:18px}.entry-signin-btn{margin-top:5px}
.entry-join{border-left:1px solid var(--bw-line);background:radial-gradient(circle at 85% 10%,var(--bw-glow),transparent 30%),rgba(255,255,255,.015)}
.entry-join .business-intro-hero{grid-template-columns:72px minmax(0,1fr)!important;padding:14px!important}.entry-join .intro-spark{width:62px;height:62px;font-size:30px}
.entry-join .business-intro h3{font-size:25px!important}.entry-join .intro-benefit-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.entry-start-btn{margin-top:14px;min-height:48px;font-size:14px}

/* Large product detail, with media + information + dedicated quantity column. */
.dialog.product-detail-dialog{width:min(96vw,1720px)!important;max-width:none!important;height:min(93vh,980px)!important;max-height:none!important;overflow:auto!important}
.dialog.product-detail-dialog .dialog-copy{height:calc(100% - 80px)}
.business-product-detail{display:grid!important;grid-template-columns:minmax(300px,34%) minmax(420px,1fr) minmax(230px,20%)!important;gap:18px!important;align-items:start!important;min-height:68vh}
.detail-media{min-height:520px!important;display:grid!important;place-items:center!important}.detail-media img{width:100%!important;height:min(68vh,650px)!important;object-fit:contain!important}
.detail-main h3{font-size:clamp(24px,2vw,38px)!important;margin:7px 0 10px!important}.detail-price-line{font-size:14px!important;padding:11px!important}.detail-price-line strong{font-size:23px!important}
.detail-tier-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;margin:10px 0!important}.detail-tier-card{padding:10px!important}.detail-tier-card strong{font-size:12px!important}.detail-tier-card span{font-size:18px!important}.detail-tier-card small{font-size:9px!important}
.detail-moq{font-size:12px!important}.detail-description{max-height:170px!important;font-size:11px!important}
.detail-purchase{position:sticky;top:10px;padding:16px;border:1px solid var(--bw-line);border-radius:14px;background:var(--bw-soft);box-shadow:0 0 24px var(--bw-glow);display:grid;gap:10px}
.detail-purchase label{display:grid;gap:6px;font-weight:900}.detail-purchase input{width:100%;min-height:48px;border-radius:9px;border:1px solid var(--bw-line);background:rgba(0,0,0,.25);color:var(--text);padding:8px 10px;font-size:18px;font-weight:900}.detail-purchase small{color:var(--muted);line-height:1.4}.purchase-kicker{font-size:10px;letter-spacing:.14em;color:var(--bw-accent);font-weight:900}.detail-add-cart{min-height:48px}.detail-wishlist{min-height:42px}
.variant-selectors{gap:12px!important}.variant-group>strong{font-size:12px!important}.variant-options{gap:7px!important}
.variant-option{display:grid!important;grid-template-rows:64px auto!important;place-items:center!important;min-width:78px!important;max-width:110px!important;padding:5px!important;font-size:8px!important}
.variant-option img{width:64px;height:64px;object-fit:contain;border-radius:7px;background:#fff}.variant-option span{max-width:94px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-top:3px}

/* Live certificate camera capture. */
.camera-stage{width:100%;min-height:360px;display:grid;place-items:center;border:1px solid var(--bw-line);border-radius:14px;overflow:hidden;background:#02050a}.camera-stage video,.camera-stage canvas{display:block;max-width:100%;max-height:60vh;object-fit:contain}.camera-actions{display:flex;gap:8px;justify-content:center}

/* Business account and wishlist use business styling while mirroring retail functions. */
.dialog.business-account-dialog,.dialog.wishlist-dialog{width:min(93vw,1500px)!important;max-width:none!important;max-height:92vh!important;overflow:auto!important}
.business-account-page{display:grid;gap:14px}.account-hero{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:18px;border:1px solid var(--bw-line);border-radius:15px;background:linear-gradient(135deg,var(--bw-soft),rgba(255,255,255,.02))}.account-hero h3{font-size:26px;margin:4px 0}.account-hero p{margin:0;color:var(--muted)}
.membership-card{padding:12px 16px;border:1px solid var(--bw-line);border-radius:12px;text-align:right}.membership-card span,.membership-card strong{display:block}.membership-card span{color:var(--bw-accent);font-weight:900}.membership-card strong{margin-top:4px}
.account-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.account-section{padding:14px;border:1px solid var(--bw-line);border-radius:13px;background:var(--bw-soft)}.account-section h4{margin:0 0 9px;font-size:15px}.account-section dl{display:grid;grid-template-columns:130px 1fr;gap:7px 10px;margin:0}.account-section dt{color:var(--muted)}.account-section dd{margin:0;color:var(--text);font-weight:700}.account-section-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.saved-card{padding:12px;border-radius:10px;background:rgba(0,0,0,.2);font-size:16px;font-weight:900}.saved-card small{display:block;margin-top:5px;color:var(--muted);font-size:10px}
.account-order-row{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--bw-line)}.account-order-row span strong,.account-order-row span small{display:block}.account-order-row small{color:var(--muted)}.account-empty{padding:18px;text-align:center;color:var(--muted)}
.account-wishlist-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.account-wishlist-tile{border:1px solid var(--bw-line);border-radius:9px;background:rgba(0,0,0,.18);color:var(--text);padding:7px;text-align:left}.account-wishlist-tile img{width:100%;aspect-ratio:1;object-fit:contain;background:#fff;border-radius:7px}.account-wishlist-tile span{display:block;margin-top:5px;font-size:9px;line-height:1.25}
.full-wishlist-grid{display:grid;gap:10px}.wishlist-product{display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;padding:12px;border:1px solid var(--bw-line);border-radius:12px;background:var(--bw-soft)}.wishlist-product>img{width:150px;height:150px;object-fit:contain;background:#fff;border-radius:9px}.wishlist-product h3{margin:0 0 7px;color:var(--text)}.wishlist-product p{margin:0 0 5px}.wishlist-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.support-panel{padding:20px;border:1px solid var(--bw-line);border-radius:14px;background:var(--bw-soft)}.support-email{display:inline-block;margin-top:10px;text-decoration:none}
.shipping-choice{display:grid;gap:5px;margin:12px 0;color:var(--text);font-weight:900}.shipping-choice select{min-height:42px;border-radius:8px;border:1px solid var(--bw-line);background:var(--bw-soft);color:var(--text);padding:7px 9px}

@media(max-width:1050px){
  .business-product-detail{grid-template-columns:1fr 1fr!important}.detail-purchase{position:static;grid-column:1/-1}.detail-media{min-height:320px!important}.detail-media img{height:380px!important}
  .account-grid{grid-template-columns:1fr}.entry-gate-grid{grid-template-columns:1fr}.entry-join{border-left:0;border-top:1px solid var(--bw-line)}
}
@media(max-width:820px){
  .product-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}.store-header{grid-template-columns:minmax(150px,1fr) 1px auto!important}.brand-logo{height:66px!important}.brand-copy{display:none}
  .business-product-detail{grid-template-columns:1fr!important}.detail-purchase{grid-column:auto}.detail-media{min-height:240px!important}.detail-media img{height:280px!important}
  .account-wishlist-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.wishlist-product{grid-template-columns:100px minmax(0,1fr)}.wishlist-product>img{width:100px;height:100px}
}
@media(max-width:560px){
  .product-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:3px!important}.product-body{padding:3px!important}.product-body h3{font-size:7px!important;min-height:16px!important}.product-meta{display:none}.retail-line,.moq{font-size:6px!important}.tier-chip strong{font-size:7px!important}.tier-chip span,.tier-chip small{font-size:5px!important}.wishlist-btn{font-size:5.8px!important;min-height:20px}.add-btn{font-size:6px!important;min-height:25px!important}
  .header-actions .outline-btn,.header-actions .primary-btn{font-size:7px!important;padding:5px!important}.brand-logo{height:58px!important}.store-header{height:40px!important;min-height:40px!important}
}
html.phone-landscape-lock .product-grid,html.phone-landscape-native .product-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}

/* Full-color product imagery, including unavailable cards outside search. */
.product-card,.product-card.is-unavailable{opacity:1}.product-card img{filter:none;opacity:1;mix-blend-mode:normal}
@media(min-width:1400px){.catalog-wrap{grid-template-columns:240px minmax(0,1fr)}.product-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}

/* ROXXHARBOR Champagne_Atelier theme overrides */
:root{--harbor-bg:#f6f0e7;--harbor-surface:#fffdf8;--harbor-ink:#3d3025;--harbor-gold:#ad8656;--harbor-line:#e1d1bc;--bw-line:#e1d1bc;--bw-soft:#f6f0e7;--bw-glow:#8c694020;--muted:#806f5e}
html,body,body::before,body::after{background:#f6f0e7!important;color:#3d3025!important}
.scene,.scene-frame,.app-shell{background:transparent!important}
.panel,.store-panel,.cart-panel,.box-glow,.catalog,.sidebar,.cart-summary,.info-section,.business-status{background:#fffdf8!important;color:#3d3025!important;border-color:#e1d1bc!important;box-shadow:0 14px 38px #4c3b261b!important}
.store-header,.cart-header,.catalog-head{background:#fffdf8!important;color:#3d3025!important;border-color:#e1d1bc!important}
.store-panel{background:#fffdf8!important}
.cart-panel{background:linear-gradient(150deg,#fffdf8,#f6f0e7)!important}
.store-panel .brand-logo{content:url('assets/roxxharbor-logo.png');width:min(360px,38vw)!important;max-height:110px!important;object-fit:contain!important}
.brand-sub,.brand-tag,.micro-copy,.cart-header p,.catalog-head p,.checkout-note,.checkout-subnote,.tier-caption{color:#806f5e!important}
h1,h2,h3,h4,strong,.store-panel p,.cart-panel p,.sidebar label,.catalog-head,.summary-row,.summary-total{color:#3d3025!important}
.primary-btn,.checkout-btn{background:#ad8656!important;color:#fff!important;border-color:#ad8656!important;box-shadow:none!important}
.outline-btn,.text-btn,.icon-btn{color:#ad8656!important;border-color:#e1d1bc!important;background:#fffdf8!important}
.harbor-search{padding:14px 18px 7px;background:#fffdf8;border-bottom:1px solid #e1d1bc}
.harbor-search .search-bar{margin:0!important;max-width:none!important;background:#fffdf8!important;border:1px solid #e1d1bc!important;box-shadow:none!important}
.harbor-search input{color:#3d3025!important;background:transparent!important}
.catalog-wrap{margin-top:8px!important}
.product-card,.product-grid article,.glow-card,.tier-chip,.product-body,.product-image,.product-media{border-color:#e1d1bc!important}
.product-grid img{object-fit:contain}
.cart-panel .cart-items,.cart-panel .cart-summary{color:#3d3025!important}
.scene.cart-front .cart-panel{box-shadow:0 22px 75px #392b2240!important}
.side-type,.corner-note{display:none!important}

.catalog-head h2,.cart-header h2{font-family:Georgia,serif!important}.panel{border-radius:15px!important}


/* ROXXHARBOR V2 — OUTSIDE BRAND / CLEAN EDGES / SIMPLIFIED HEADER
   Overrides only presentation; the cart-front/store-front geometry and
   interactive layering in demo.js are retained without alteration. */
.site-masthead {
  position: absolute;
  top: 0;
  left: 0;
  height: 12%;
  width: min(38%, 465px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  z-index: 4;
  pointer-events: none;
}
.site-masthead img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  /* Blends the source logo's white backing seamlessly into the cream canvas
     without changing the metal lion, lettering, or compass geometry. */
  mix-blend-mode: multiply;
}
/* Disable the original electric-blue star flares and bloom on both panels. */
.panel-glow, .panel-glow::before, .panel-glow::after {
  display: none !important;
  content: none !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}
/* Keep the original narrow top utility bar, now without an internal logo. */
.store-header {
  grid-template-columns: minmax(150px, 1fr) auto !important;
  gap: 10px !important;
}
.brand-wrap {
  height: auto !important;
  min-width: 0;
}
.brand-copy {
  margin-left: 0 !important;
}
.header-actions {
  flex: 0 0 auto;
}
@media (max-width: 1380px) {
  .site-masthead {
    position: relative;
    left: auto;
    top: auto;
    width: min(390px, 94%);
    height: 106px;
    flex: 0 0 auto;
  }
}
@media (max-width: 560px) {
  .site-masthead { height: 70px; width: min(290px, 96%); }
  .store-header { min-height: 40px !important; }
}


/* ===================== ROXXHARBOR HARBORFRONT V3 ======================== */
/* User-supplied harbor is a full-viewport cover image at every screen size. */
html{min-height:100%;background:#d8c1a0}
html,body{margin:0;min-height:100%;}
body::before,body::after{
  background-color:transparent!important;
  background-image:none!important;
}
body { color:#42352b!important; }
body{
  background:#d8c1a0 url('assets/sepia-harbor.png') center center / cover no-repeat fixed!important;
  background-attachment:fixed!important;
}
body::before,body::after{content:none!important;display:none!important}
.app-shell,.scene-frame,.scene{background:transparent!important}
.app-shell{background:linear-gradient(180deg,rgba(240,226,202,.05),rgba(87,62,32,.14))!important}
.site-masthead{top:0!important;left:0!important;width:min(37%,460px)!important;height:13%!important;position:absolute!important;z-index:10!important;}
.site-masthead img{mix-blend-mode:normal!important;object-fit:contain!important;object-position:left center!important}
/* Preserve sliding stacked panel mechanics, narrowing the resting cart by 1/3. */
.cart-panel{left:65.4%;top:4.4%;width:23.2%;height:83.3%;padding:17px 15px 19px!important;z-index:2}
.store-panel{left:4.2%;top:15.8%;width:71.8%;height:78.3%;z-index:5}
.scene.cart-front .store-panel{left:4.2%;top:15.8%;width:71.8%;height:78.3%;z-index:3;filter:brightness(.80) saturate(.90)}
.scene.cart-front .cart-panel{left:44%;top:8.6%;width:39%;height:81.2%;z-index:7;filter:none}
/* Remove inherited blue glows, lens flares and edge marketing. */
.panel,.box-glow,.store-panel,.cart-panel{box-shadow:0 22px 55px rgba(47,32,17,.22)!important}
.panel-glow,.side-type,.corner-note{display:none!important}
.store-panel,.cart-panel{background:rgba(255,253,249,.97)!important;border:1px solid rgba(165,133,93,.42)!important}
.store-panel{overflow-y:auto!important;overflow-x:hidden!important}
.cart-panel{overflow-y:auto!important;overflow-x:hidden!important}
.scene:not(.cart-front) .cart-panel{cursor:pointer}
.scene.cart-front .cart-panel{cursor:default}
.store-panel{scrollbar-color:#c4a67e #fff9f0}
.cart-panel{scrollbar-color:#c4a67e #fff9f0}
.harbor-search{padding:20px 20px 15px!important;background:transparent!important;border-bottom:1px solid #e8dccb!important}
.harbor-search .search-bar{height:49px!important;border-radius:10px!important;background:white!important}
.harbor-search .search-bar input{font-size:14px!important}
.harbor-search .search-bar .primary-btn{box-shadow:none!important}
.catalog-wrap{margin:0 12px 16px!important;grid-template-columns:165px minmax(0,1fr)!important;gap:10px!important;align-items:start!important}
.sidebar,.catalog{border:1px solid #e8dccb!important;border-radius:10px!important;background:rgba(255,252,247,.94)!important}
.sidebar{padding:18px 13px!important}
.sidebar h2{font-size:14px!important;color:#5a4430!important;font-family:Georgia,serif}
.catalog{padding:17px!important}
.catalog-head h2{font-size:19px!important}
.catalog-head{margin-bottom:15px!important}
.catalog-head p{font-size:11px!important}
.retail-category-list{display:grid;gap:4px;margin-top:13px}
.retail-category-list label{display:flex;gap:6px;align-items:center;padding:8px 6px;border-radius:7px;font-size:11px;cursor:pointer;color:#5b4a3b}
.retail-category-list label:has(input:checked){background:#efe2d0;font-weight:800;color:#7a592f}
.retail-category-list input{accent-color:#a67f4f}
.product-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important}
.harbor-product{min-width:0;border:1px solid #e1d2bf;background:white;border-radius:10px;overflow:hidden;box-shadow:0 3px 12px rgba(69,46,20,.05)}
.demo-product-image{height:130px;display:grid;place-items:center;background:linear-gradient(145deg,var(--product-color),#f6f0e7)}
.demo-product-copy{padding:11px;display:flex;flex-direction:column;min-height:131px}
.demo-product-copy small{font-size:10px;color:#917759}
.demo-product-copy h3{font-size:12px!important;line-height:1.3;min-height:32px!important;margin:5px 0 4px!important;color:#453526}
.demo-product-copy strong{font-size:13px;color:#473422}
.add-demo{margin-top:auto;display:block;width:100%;font-size:11px!important;padding:9px 5px!important;border-radius:7px!important}
/* A true retail cart: no wholesale tiers, discount tables or unit-price columns. */
.retail-cart-header{display:flex;align-items:center;justify-content:space-between;gap:7px;border-bottom:1px solid #e3d7c9;padding:0 0 15px}
.retail-cart-title{display:flex;align-items:center;gap:9px;min-width:0}
.retail-cart-symbol{display:grid;place-items:center;color:#936c3e;font-size:25px;flex:0 0 auto}
.cart-eyebrow{font-size:9px;letter-spacing:.18em;font-weight:700;color:#997a50;margin-bottom:4px}
.retail-cart-header h2{margin:0;font-family:Georgia,serif;font-size:clamp(14px,1.18vw,22px);line-height:1.1;white-space:nowrap;color:#4a3728}
.retail-cart-header h2 span{font-family:Inter,system-ui,sans-serif;display:inline-grid;place-items:center;background:#ead9c0;border-radius:999px;min-width:21px;height:21px;font-size:11px;margin-left:3px}
.clear-cart-btn{font-size:11px!important;padding:5px!important;white-space:nowrap}
.retail-cart-items{min-height:130px;max-height:calc(100% - 225px);overflow:auto}
.empty-retail-cart{display:grid;justify-items:center;text-align:center;gap:7px;padding:40px 4px 24px;color:#776756}
.empty-retail-cart span{font-size:30px}.empty-retail-cart strong{color:#523f2b;font-size:13px}.empty-retail-cart p{margin:0;font-size:11px}
.retail-cart-item{display:grid;grid-template-columns:40px minmax(0,1fr);gap:9px;padding:12px 0;border-bottom:1px solid #eee5d9;align-items:start}
.cart-mini-thumb{display:grid;place-items:center;background:linear-gradient(140deg,var(--product-color),#f7f0e6);border:1px solid #e2d5c5;border-radius:7px;width:40px;height:43px;font-size:19px;color:#8f765b}
.cart-item-details{min-width:0}.cart-item-details strong{display:block;font-size:11px;line-height:1.3;color:#453425;white-space:normal}.cart-item-details>span{display:block;margin:4px 0 7px;font-size:13px;font-weight:800;color:#6b4b2e}
.cart-item-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.cart-qty{display:flex;align-items:center;border:1px solid #e3d5c2;border-radius:7px;overflow:hidden}.cart-qty button{width:23px;height:24px;background:white;border:0;color:#58432d}.cart-qty output{font-size:11px;min-width:18px;text-align:center}.remove-cart-item{border:0;background:transparent;font-size:10px;color:#866749;text-decoration:underline;cursor:pointer}
.retail-cart-summary{border:0!important;border-top:1px solid #dfd0bc!important;box-shadow:none!important;background:transparent!important;border-radius:0!important;margin-top:15px!important;padding:13px 0 0!important}
.retail-subtotal{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:15px;font-weight:750}.retail-subtotal strong{font-size:20px;color:#443221}
.shipping-note{font-size:10px!important;line-height:1.5;color:#8e7862!important;margin:10px 0 12px!important}
.checkout-btn{display:flex;align-items:center;justify-content:space-between;width:100%;border-radius:8px!important;min-height:41px!important;margin:0!important;font-size:12px!important;padding:9px 12px!important}
.prototype-note{color:#9c8a75!important;text-align:center;font-size:9px!important;margin:10px 0!important}
.toast{z-index:50}
/* Preserve side-by-side desktop panel behavior instead of the source's 1380px stacking. */
@media(min-width:1000px) and (max-width:1380px){
 .scene-frame{height:min(92vh,880px)!important;min-height:570px!important;width:min(96vw,1720px)!important}
 .scene{height:100%!important;display:block!important}
 .panel,.scene.cart-front .panel{position:absolute!important;height:78.3%!important}
 .store-panel,.scene.cart-front .store-panel{left:4.2%!important;top:15.8%!important;width:71.8%!important;height:78.3%!important}
 .cart-panel{left:65.4%!important;top:4.4%!important;width:23.2%!important;height:83.3%!important}
 .scene.cart-front .cart-panel{left:44%!important;top:8.6%!important;width:39%!important;height:81.2%!important}
 .site-masthead{position:absolute!important;top:0!important;left:0!important;width:min(37%,460px)!important;height:13%!important}
}
@media(max-width:999px){
 body{overflow:auto!important;background-attachment:scroll!important}
 .app-shell{display:block!important;min-height:100vh!important;padding:14px!important}
 .scene-frame{height:auto!important;min-height:0!important;width:100%!important}
 .scene{height:auto!important;display:flex!important;flex-direction:column!important;gap:12px!important}
 .site-masthead{position:relative!important;width:min(440px,90%)!important;height:100px!important;flex:0 0 auto!important}
 .panel,.scene.cart-front .panel{position:relative!important;left:auto!important;top:auto!important;width:100%!important;height:auto!important;filter:none!important}
 .cart-panel{order:2!important}.store-panel{order:1!important}
 .scene.cart-front .cart-panel{order:1!important}.scene.cart-front .store-panel{order:2!important}
 .retail-cart-items{max-height:none!important}
 .product-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:650px){
 .app-shell{padding:10px!important}.site-masthead{height:72px!important;width:min(310px,90%)!important}
 .catalog-wrap{grid-template-columns:1fr!important}.sidebar{padding:10px 12px!important}
 .retail-category-list{display:flex;flex-wrap:wrap;gap:3px;margin-top:8px}.retail-category-list label{font-size:10px;padding:6px}
 .harbor-search{padding:12px!important}.harbor-search .search-bar{height:auto!important;min-height:42px!important}
 .harbor-search .search-bar .primary-btn{width:auto!important;min-width:74px!important;height:38px!important}
 .catalog{padding:12px!important}.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
 .demo-product-image{height:122px}.demo-product-copy{min-height:134px}.demo-product-copy h3{font-size:11px!important}
 .retail-cart-header h2{font-size:19px}
}

/* FINAL BACKGROUND FIX: explicit image wins over older theme resets. */
html body[data-storefront="roxxharbor"] {
  background-color: #d8c1a0 !important;
  background-image: url("assets/sepia-harbor.png") !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}
@media(max-width:999px) {
  html body[data-storefront="roxxharbor"] { background-attachment: scroll !important; }
}