:root {
  --navy: #0e2344;
  --navy-2: #17365f;
  --orange: #ed1c24;
  --gold: #f6c343;
  --ink: #151922;
  --muted: #6b7280;
  --paper: #f4f6f9;
  --card: #ffffff;
  --line: #e4e7ec;
  --green: #16825d;
  --red: #c43c35;
  --shadow: 0 18px 46px rgba(16, 33, 63, .12);
  --soft-shadow: 0 8px 24px rgba(16, 33, 63, .08);
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation;
}
body {
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(180deg, #f8fafc 0, var(--paper) 360px),
    var(--paper);
  font-family: Aptos, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  touch-action: manipulation;
}
@keyframes softDrop { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes gentlePulse { 50% { box-shadow: 0 0 0 5px rgba(237, 28, 36, .10); } }
@keyframes floatCard { 50% { transform: translateY(-8px); } }
@keyframes badgePop { 0% { transform: scale(.82); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes sheen { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(220%) skewX(-18deg); } }
@keyframes softGlow { 50% { opacity: .55; transform: scale(1.04); } }
@keyframes heroSweep { from { transform: translateX(-140%) rotate(12deg); } to { transform: translateX(180%) rotate(12deg); } }
@keyframes orbitGlow {
  0% { transform: translate3d(-10px, 0, 0) scale(.98); opacity: .55; }
  50% { transform: translate3d(10px, -8px, 0) scale(1.05); opacity: .9; }
  100% { transform: translate3d(-10px, 0, 0) scale(.98); opacity: .55; }
}
@keyframes cartPulse {
  0% { box-shadow: 0 0 0 0 rgba(237,28,36,.32); }
  70% { box-shadow: 0 0 0 10px rgba(237,28,36,0); }
  100% { box-shadow: 0 0 0 0 rgba(237,28,36,0); }
}
@keyframes imageFloat { 50% { transform: translateY(-5px) scale(1.035); } }
@keyframes productOpen {
  from { opacity: 0; transform: translateY(22px) scale(.985); filter: blur(8px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes productImageReveal {
  from { opacity: 0; transform: translateY(26px) scale(.92) rotate(-1.5deg); }
  to { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
@keyframes addedBurst {
  0% { transform: translateY(0) scale(1); }
  34% { transform: translateY(-2px) scale(.98); }
  72% { transform: translateY(0) scale(1.025); box-shadow: 0 16px 32px rgba(237,28,36,.18); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes flyToCart {
  0% { opacity: 0; filter: blur(2px); transform: translate(-50%, -50%) scale(.56) rotateY(-28deg) rotateZ(-8deg); }
  14% { opacity: 1; filter: blur(0); transform: translate(-50%, -86%) scale(.96) rotateY(-10deg) rotateZ(2deg); }
  54% { opacity: 1; transform: translate(calc(-50% + var(--fly-x) * .54), calc(-50% + var(--fly-y) * .36 - 64px)) scale(.72) rotateY(18deg) rotateZ(7deg); }
  84% { opacity: .96; transform: translate(calc(-50% + var(--fly-x) * .92), calc(-50% + var(--fly-y) * .88 - 18px)) scale(.36) rotateY(34deg) rotateZ(12deg); }
  100% { opacity: 0; filter: blur(1px); transform: translate(calc(-50% + var(--fly-x)), calc(-50% + var(--fly-y))) scale(.16) rotateY(42deg) rotateZ(15deg); }
}
@keyframes cartAdded {
  0% { transform: translateY(0) scale(1); }
  34% { transform: translateY(-3px) scale(1.075) rotate(-2deg); }
  70% { transform: translateY(0) scale(.99) rotate(1deg); }
  100% { transform: translateY(0) scale(1) rotate(0); }
}
@keyframes shelfSettle {
  from { opacity: 0; transform: translateY(16px) rotateX(5deg); }
  to { opacity: 1; transform: translateY(0) rotateX(0); }
}
@keyframes drawerIn {
  from { opacity: 0; transform: translateX(28px) scale(.985); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes quietShine {
  from { transform: translateX(-140%) skewX(-18deg); }
  to { transform: translateX(190%) skewX(-18deg); }
}
@keyframes softScaleIn {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes buttonBreath {
  50% { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(237,28,36,.18); }
}
@keyframes searchPop {
  from { opacity: 0; transform: translateY(8px) scale(.98); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes softFocusRing {
  50% { box-shadow: 0 0 0 5px rgba(237,28,36,.08), 0 16px 34px rgba(14,35,68,.10); }
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled {
  cursor: not-allowed;
  opacity: .7;
}
button.loading {
  position: relative;
  overflow: hidden;
}
button.loading:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  animation: quietShine .9s ease infinite;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.site-header {
  position: static;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 4px 18px rgba(16, 33, 63, .05);
  animation: softDrop .45s ease both;
}
body.admin-mode .site-header,
body.admin-mode .mobile-bottom-nav,
body.admin-mode .site-footer {
  display: none !important;
}
body.admin-mode {
  background: #f7f9fc;
}
body.admin-mode #app {
  min-height: 100vh;
}
.topline {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  padding: 8px 16px;
  color: #fff;
  background: var(--navy);
  font-size: 13px;
}
.topline span { display: inline-flex; align-items: center; gap: 8px; }
.topline span:before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--gold);
}
.top-socials {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.top-socials a {
  position: relative;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  transition: transform .18s ease, background .18s ease;
}
.top-socials a:after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.20);
  opacity: 0;
  transform: scale(.72);
  transition: opacity .18s ease, transform .18s ease;
}
.top-socials a:hover {
  transform: translateY(-3px) scale(1.06);
  background: rgba(255,255,255,.22);
}
.top-socials a:hover:after {
  opacity: 1;
  transform: scale(1);
}
.top-socials svg {
  width: 18px;
  height: 18px;
  display: block;
}
.top-language {
  width: 76px;
  min-width: 76px;
  max-width: 76px;
  flex: 0 0 auto;
  min-height: 34px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  padding: 6px 24px 6px 10px;
  color: #fff;
  background: rgba(255,255,255,.10);
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}
.top-language option {
  color: var(--ink);
  background: #fff;
}
.header-main {
  display: grid;
  grid-template-columns: 260px minmax(260px, 1fr) auto;
  gap: 20px;
  align-items: center;
  padding: 16px clamp(16px, 4vw, 56px);
}
.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.mark {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 999px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(14, 35, 68, .16);
}
.mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand strong, .brand small { display: block; }
.brand strong { color: var(--navy); font-size: 18px; text-transform: uppercase; }
.brand small { color: var(--muted); font-size: 12px; }

.header-search {
  position: relative;
  z-index: 120;
  display: grid;
  grid-template-columns: 1fr auto;
  border: 1px solid #cfd7e4;
  border-radius: 16px;
  overflow: visible;
  background: #fff;
  transition: box-shadow .18s ease, transform .18s ease;
}
.header-search:focus-within {
  box-shadow: 0 12px 28px rgba(14, 35, 68, .12);
  transform: translateY(-1px);
  animation: softFocusRing .72s ease;
}
.header-search input {
  border: 0;
  border-radius: 16px 0 0 16px;
  min-height: 48px;
  padding: 0 16px;
  outline: none;
}
.header-search button {
  border: 0;
  border-radius: 0 16px 16px 0;
  padding: 0 22px;
  color: #fff;
  background: linear-gradient(135deg, var(--navy), var(--navy-2));
  font-weight: 800;
}

.shop-search-wrap {
  position: relative;
  z-index: 120;
  min-width: 0;
}

.shop-search-wrap input {
  width: 100%;
}

.search-suggest {
  position: absolute;
  z-index: 1400;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(207, 215, 228, .92);
  border-radius: 16px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 24px 50px rgba(14,35,68,.16);
  backdrop-filter: blur(16px);
  animation: searchPop .18s ease both;
}

.search-suggest-item {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 7px;
  border-radius: 12px;
  color: var(--navy);
  text-decoration: none;
  transition: background .16s ease, transform .16s ease;
}

.search-suggest-item:hover,
.search-suggest-item:focus {
  background: #f6f8fb;
  transform: translateX(2px);
}

.search-suggest-item span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: #f7f9fc;
  overflow: hidden;
  color: var(--navy);
  font-size: 12px;
  font-weight: 950;
}

.search-suggest-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}

.search-suggest-item strong,
.search-suggest-item small {
  display: block;
  min-width: 0;
}

.search-suggest-item strong {
  overflow: hidden;
  font-size: 14px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-suggest-item small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.search-suggest-item em {
  color: var(--red);
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
}

.search-empty {
  padding: 12px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.header-actions a,
.secondary,
.text-link,
.ghost,
.tab {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 11px 13px;
  color: var(--ink);
  background: #fff;
  text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.header-actions a:hover,
.secondary:hover,
.text-link:hover,
.ghost:hover,
.tab:hover {
  border-color: var(--navy);
  box-shadow: 0 8px 18px rgba(16, 33, 63, .09);
  transform: translateY(-1px);
}
.message-link svg { width: 21px; height: 21px; }
.cart-link {
  position: relative;
  display: inline-grid !important;
  grid-template-columns: 22px auto;
  place-items: center;
  min-width: 58px;
  background: var(--orange) !important;
  color: #fff !important;
  border-color: var(--orange) !important;
  font-weight: 850;
}
.cart-link svg {
  width: 22px;
  height: 22px;
  transition: transform .2s ease;
}
.cart-link:hover svg { transform: translateY(-1px) rotate(-5deg); }
.cart-link:hover { animation: cartPulse 1.1s ease; }
.cart-link.cart-added {
  animation: cartAdded .9s cubic-bezier(.16, 1, .3, 1), cartPulse 1.25s ease;
}
.mobile-bottom-nav a.cart-added {
  color: #fff;
  background: linear-gradient(135deg, var(--navy), var(--orange));
  animation: cartAdded .9s cubic-bezier(.16, 1, .3, 1), cartPulse 1.25s ease;
}
.cart-link b {
  position: absolute;
  top: -8px;
  right: -8px;
  display: inline-grid;
  place-items: center;
  min-width: 23px;
  height: 23px;
  margin-left: 0;
  border-radius: 999px;
  color: var(--orange);
  background: #fff;
  box-shadow: 0 8px 18px rgba(237, 28, 36, .25);
  animation: badgePop .28s ease both;
}
.category-nav {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 0 clamp(16px, 4vw, 56px) 14px;
}
.category-nav a {
  position: relative;
  flex: none;
  border-radius: 8px;
  padding: 10px 13px;
  color: var(--navy);
  text-decoration: none;
  font-size: 14px;
  font-weight: 750;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.category-nav a:after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 4px;
  height: 2px;
  border-radius: 99px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.category-nav a:hover:after { transform: scaleX(1); }
.category-nav a:hover { background: #eef3fb; color: var(--orange); transform: translateY(-1px); }
.mobile-bottom-nav { display: none !important; }

select.top-language,
#languageSelect.top-language {
  width: 76px !important;
  min-width: 76px !important;
  max-width: 76px !important;
}

.storefront {
  display: block;
  padding: 24px clamp(16px, 4vw, 56px) 18px;
}
.storefront, .section, .page { animation: fadeUp .42s ease both; }
.shop-sidebar {
  align-self: start;
  position: sticky;
  top: 170px;
  max-height: calc(100vh - 190px);
  border-radius: 22px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--soft-shadow);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.sidebar-title {
  padding: 18px;
  color: #fff;
  background:
    radial-gradient(circle at 90% 10%, rgba(246,195,67,.30), transparent 38%),
    var(--navy);
  font-weight: 900;
}
.side-category {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
  transition: background .16s ease, color .16s ease, padding .16s ease;
  animation: softScaleIn .34s ease both;
}
.side-category:hover,
.side-category.active { color: var(--orange); background: #fafafa; padding-left: 22px; }
.side-category span { color: var(--muted); font-size: 13px; }
.sidebar-group {
  border-bottom: 1px solid var(--line);
}
.sidebar-group summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  font-weight: 900;
  transition: background .16s ease, color .16s ease;
}
.sidebar-group summary::-webkit-details-marker {
  display: none;
}
.sidebar-group summary:before {
  content: ">";
  width: 18px;
  color: var(--orange);
  font-weight: 950;
  transition: transform .16s ease;
}
.sidebar-group[open] summary:before {
  transform: rotate(90deg);
}
.sidebar-group summary strong {
  flex: 1;
}
.sidebar-parent-link {
  flex: 1;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}
.sidebar-parent-link.active {
  color: var(--orange);
}
.sidebar-group summary span {
  color: var(--muted);
  font-size: 13px;
}
.sidebar-group summary:hover {
  color: var(--orange);
  background: #fafafa;
}
.sidebar-subcategories {
  padding: 0 0 8px;
  background: #fbfcfe;
}
.side-category.child {
  padding-left: 42px;
  background: #fbfcfe;
  font-size: 14px;
}
.side-category.child:hover,
.side-category.child.active {
  padding-left: 46px;
}
.sidebar-group.nested {
  border-bottom: 0;
  background: #fbfcfe;
}
.sidebar-group.nested summary {
  padding-left: 36px;
  background: #fbfcfe;
}
.sidebar-group.nested.deeper summary {
  padding-left: 52px;
  background: #f5f8fc;
}
.side-category.child.deep {
  padding-left: 68px;
  background: #f5f8fc;
}
.side-category.child.deep:hover,
.side-category.child.deep.active {
  padding-left: 72px;
}

.store-main { display: grid; gap: 14px; min-width: 0; }
.hero-banner {
  position: relative;
  min-height: 540px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  align-items: center;
  gap: clamp(18px, 4vw, 44px);
  border-radius: 28px;
  overflow: hidden;
  padding: clamp(24px, 5vw, 48px);
  color: #fff;
  background:
    radial-gradient(circle at 82% 18%, rgba(246,195,67,.38), transparent 26%),
    linear-gradient(90deg, rgba(14,35,68,.94), rgba(14,35,68,.68), rgba(14,35,68,.30)),
    url("./assets/hero-school-shop.jpg") center / cover;
  box-shadow: var(--shadow);
}
.hero-banner { animation: fadeUp .55s ease both; }
.hero-banner:before {
  content: "";
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: 10%;
  width: 110px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  opacity: .55;
  transform: translateX(-140%) rotate(12deg);
  animation: heroSweep 7s ease-in-out infinite;
  pointer-events: none;
}
.hero-banner:after {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 22px;
  pointer-events: none;
}
.hero-copy { position: relative; z-index: 1; max-width: 740px; }
.hero-copy:after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -120px;
  top: -70px;
  border-radius: 999px;
  background: rgba(246,195,67,.14);
  animation: orbitGlow 6.5s ease-in-out infinite;
  pointer-events: none;
}
.hero-shop-card {
  position: relative;
  z-index: 1;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 420px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 24px;
  padding: 18px;
  background: rgba(255,255,255,.88);
  color: var(--ink);
  box-shadow: 0 28px 70px rgba(0,0,0,.20);
  backdrop-filter: blur(18px);
  animation: floatCard 5.8s ease-in-out infinite;
}
.hero-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.hero-card-head span {
  border-radius: 999px;
  padding: 7px 10px;
  color: var(--orange);
  background: #fff0f0;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}
.hero-card-head b { color: var(--navy); }
.hero-picks { display: grid; gap: 10px; }
.hero-pick {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(14,35,68,.08);
  border-radius: 18px;
  padding: 10px;
  color: var(--ink);
  background: #fff;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
  animation: softScaleIn .42s ease both;
}
.hero-pick:nth-child(2) { animation-delay: .07s; }
.hero-pick:nth-child(3) { animation-delay: .14s; }
.hero-pick:hover {
  transform: translateX(4px);
  box-shadow: var(--soft-shadow);
}
.hero-pick img,
.hero-pick > span {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  object-fit: contain;
  background: #f4f6f9;
}
.hero-pick-art {
  display: grid;
  place-items: center;
  overflow: hidden;
}
.hero-pick-art > img {
  width: 100%;
  height: 100%;
  padding: 6px;
  display: block;
}
.hero-pick-art .bundle-art,
.hero-pick-art .bundle-art-hero {
  width: 58px;
  height: 58px;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  padding: 5px;
  border-radius: 14px;
  background: #f4f6f9;
}
.hero-pick-art .bundle-art img,
.hero-pick-art .bundle-art-hero img {
  width: 100%;
  height: 100%;
  padding: 1px;
  border-radius: 8px;
  object-fit: contain;
  background: #fff;
}
.hero-pick strong {
  display: block;
  color: var(--navy);
  font-size: 14px;
  line-height: 1.15;
}
.hero-pick small { color: var(--muted); }
.hero-pick b { color: var(--orange); white-space: nowrap; }
.hero-card-link {
  display: flex;
  justify-content: center;
  border-radius: 16px;
  padding: 13px;
  color: #fff;
  background: var(--navy);
  text-decoration: none;
  font-weight: 900;
}
.hero-floating-note {
  position: absolute;
  right: min(32vw, 430px);
  bottom: 34px;
  z-index: 2;
  display: grid;
  gap: 2px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 18px;
  padding: 14px 16px;
  background: rgba(14,35,68,.70);
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 40px rgba(0,0,0,.18);
}
.hero-floating-note strong { font-size: 14px; }
.hero-floating-note span { color: rgba(255,255,255,.72); font-size: 12px; }
.eyebrow {
  margin: 0 0 10px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .16em;
  text-transform: uppercase;
}
h1, h2, h3, p { margin-top: 0; }
h1 {
  margin-bottom: 16px;
  color: inherit;
  font-size: clamp(36px, 5.3vw, 68px);
  line-height: .98;
  letter-spacing: -.045em;
}
h2 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.05;
  letter-spacing: -.03em;
}
.hero-banner p:not(.eyebrow) {
  max-width: 620px;
  color: rgba(255,255,255,.84);
  font-size: 18px;
  line-height: 1.6;
}
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.hero-mini-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.hero-mini-stats span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  padding: 9px 12px;
  color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  font-size: 13px;
}
.hero-mini-stats b { color: #fff; font-size: 16px; }
.hero-mini-stats em { font-style: normal; }
.primary {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 14px;
  padding: 13px 16px;
  color: #fff;
  background: linear-gradient(135deg, #ff3138, var(--orange));
  font-weight: 850;
  text-decoration: none;
  transition: transform .18s ease, filter .18s ease;
}
.primary:before {
  content: "";
  position: absolute;
  inset: 0;
  width: 42%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transform: translateX(-120%) skewX(-18deg);
}
.primary:hover:before { animation: sheen .75s ease; }
.primary:hover { transform: translateY(-1px); filter: brightness(.96); }
.primary:hover { animation: buttonBreath .72s ease; }
.primary:active { transform: translateY(0); }
.info-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.info-row div {
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 18px;
  background: #fff;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.info-row div:hover {
  transform: translateY(-3px);
  border-color: rgba(237, 28, 36, .26);
  box-shadow: 0 12px 28px rgba(16, 33, 63, .08);
}
.info-row strong { display: block; color: var(--navy); }
.info-row span { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; }
.quick-shop-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 0 2px;
}
.quick-shop-strip a {
  flex: none;
  border: 1px solid #dfe5ee;
  border-radius: 999px;
  padding: 10px 14px;
  color: var(--navy);
  background: #fff;
  text-decoration: none;
  font-weight: 850;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
  transition: transform .18s ease, border-color .18s ease, color .18s ease;
}
.quick-shop-strip a:hover {
  transform: translateY(-2px);
  border-color: rgba(237, 28, 36, .28);
  color: var(--orange);
}
.deal-strip {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr);
  gap: 18px;
  overflow: hidden;
  border-radius: 24px;
  padding: 22px;
  color: #fff;
  background:
    radial-gradient(circle at 84% 16%, rgba(246,195,67,.34), transparent 28%),
    linear-gradient(135deg, var(--navy), #07162d);
  box-shadow: var(--shadow);
}
.deal-strip:before {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  right: -80px;
  bottom: -110px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  animation: softGlow 5s ease-in-out infinite;
}
.deal-strip > div { position: relative; z-index: 1; }
.deal-strip h2 {
  color: #fff;
  max-width: 460px;
}
.deal-strip p:not(.eyebrow) {
  max-width: 520px;
  margin: 12px 0 0;
  color: rgba(255,255,255,.72);
  line-height: 1.65;
}
.deal-products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.deal-product {
  display: grid;
  gap: 10px;
  align-content: start;
  min-height: 210px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  padding: 12px;
  color: #fff;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
  text-decoration: none;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.deal-product:hover {
  transform: translateY(-5px);
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.32);
}
.deal-product:nth-child(2) { transition-delay: .04s; }
.deal-product:nth-child(3) { transition-delay: .08s; }
.deal-product img,
.deal-product > span {
  width: 100%;
  height: 104px;
  border-radius: 14px;
  object-fit: contain;
  padding: 10px;
  background: #fff;
}
.deal-product strong {
  display: block;
  min-height: 34px;
  color: #fff;
  font-size: 14px;
  line-height: 1.15;
}
.deal-product small {
  color: rgba(255,255,255,.68);
  font-size: 12px;
}
.deal-product b {
  color: var(--gold);
  font-size: 18px;
}

.section, .page {
  padding: clamp(28px, 4vw, 54px) clamp(16px, 4vw, 56px);
  background: #fff;
}
.surface {
  background:
    linear-gradient(180deg, #f8fafc, var(--paper));
}
.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}
.section-head .text-link {
  white-space: nowrap;
  font-weight: 900;
}
.section-subtitle {
  max-width: 640px;
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.6;
}
.home-trend-section {
  background:
    linear-gradient(180deg, #fff, #f8fafc);
}
.home-trend-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.home-map-section {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(360px, 1.1fr);
  gap: clamp(18px, 4vw, 42px);
  align-items: stretch;
  background: #fff;
}
.home-map-copy {
  display: grid;
  align-content: center;
}
.home-map-copy h2 {
  max-width: 620px;
  margin: 0;
  color: var(--navy);
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1;
}
.home-map-copy p:not(.eyebrow) {
  max-width: 620px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
}
.home-info-list {
  display: grid;
  gap: 10px;
  margin: 20px 0;
}
.home-info-list span {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  background: #f8fafc;
  color: var(--muted);
}
.home-info-list b {
  color: var(--navy);
}
.home-map-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.map-card {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background:
    linear-gradient(rgba(14,35,68,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14,35,68,.08) 1px, transparent 1px),
    radial-gradient(circle at 55% 45%, rgba(237,28,36,.20), transparent 18%),
    linear-gradient(135deg, #eef2f7, #fff);
  background-size: 42px 42px, 42px 42px, auto, auto;
  box-shadow: var(--soft-shadow);
}
.map-card-link {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  color: var(--navy);
  text-align: center;
  text-decoration: none;
}
.map-card-link:before,
.map-card-link:after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}
.map-card-link:before {
  width: 190px;
  height: 190px;
  border: 1px solid rgba(237,28,36,.18);
  background: rgba(237,28,36,.05);
}
.map-card-link:after {
  width: 310px;
  height: 310px;
  border: 1px solid rgba(14,35,68,.10);
}
.map-pin {
  position: relative;
  z-index: 1;
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #fff;
  background: var(--orange);
  font-weight: 950;
  font-size: 24px;
  box-shadow: 0 18px 38px rgba(237,28,36,.28);
}
.map-card-link strong,
.map-card-link small,
.map-card-link em {
  position: relative;
  z-index: 1;
}
.map-card-link strong {
  font-size: 26px;
  font-weight: 950;
}
.map-card-link small {
  color: var(--muted);
  font-size: 16px;
  font-weight: 900;
}
.map-card-link em {
  margin-top: 8px;
  border-radius: 999px;
  padding: 11px 16px;
  color: #fff;
  background: var(--navy);
  font-style: normal;
  font-weight: 950;
}
.map-card iframe {
  width: 100%;
  height: 100%;
  min-height: 420px;
  display: block;
  border: 0;
}
.services-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 90% 10%, rgba(246, 195, 67, .18), transparent 30%),
    linear-gradient(180deg, #fff, #f8fafc);
}
.shop-flow-section {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  background: var(--paper);
}
.shop-flow-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 22px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.shop-flow-card:hover {
  transform: translateY(-5px);
  border-color: rgba(237,28,36,.22);
  box-shadow: var(--soft-shadow);
}
.shop-flow-card span {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: #fff;
  background: var(--navy);
  font-weight: 950;
}
.shop-flow-card strong {
  display: block;
  margin-top: 18px;
  color: var(--navy);
  font-size: 20px;
}
.shop-flow-card p {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.55;
}
.services-section + .section {
  border-top: 1px solid rgba(14,35,68,.06);
}
.services-head { align-items: start; }
.services-head p:last-child {
  max-width: 660px;
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
}
.service-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.service-card {
  position: relative;
  min-height: 360px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  color: var(--ink);
  background: rgba(255,255,255,.86);
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(16, 33, 63, .06);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.service-card img {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 16 / 10;
  display: block;
  object-fit: cover;
  border-radius: 14px;
  margin-bottom: 18px;
  background: #f3f5f8;
  box-shadow: 0 12px 26px rgba(16, 33, 63, .10);
  transition: transform .28s ease, filter .28s ease;
}
.service-card:before {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  right: -42px;
  top: -42px;
  border-radius: 999px;
  background: rgba(237, 28, 36, .10);
  transition: transform .22s ease;
}
.service-card:hover {
  transform: translateY(-6px);
  border-color: rgba(237, 28, 36, .28);
  box-shadow: 0 20px 42px rgba(16, 33, 63, .12);
}
.service-card:nth-child(2) { transition-delay: .03s; }
.service-card:nth-child(3) { transition-delay: .06s; }
.service-card:nth-child(4) { transition-delay: .09s; }
.service-card:hover:before { transform: scale(1.25); }
.service-card:hover img {
  transform: translateY(-3px) scale(1.025);
  filter: saturate(1.08);
}
.service-card span {
  position: relative;
  color: var(--orange);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .16em;
}
.service-card h3 {
  position: relative;
  margin: 12px 0 10px;
  color: var(--navy);
  font-size: 24px;
  line-height: 1.08;
}
.service-card p {
  position: relative;
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}
.service-card b {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  color: var(--navy);
}
.service-card b:after {
  content: "->";
  color: var(--orange);
}
.home-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}
.home-category-card {
  display: grid;
  grid-template-columns: 92px 1fr;
  align-items: center;
  gap: 14px;
  min-height: 132px;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 14px;
  color: var(--ink);
  background:
    linear-gradient(135deg, #fff, #f8fafc);
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.home-category-card img,
.category-initial {
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  object-fit: contain;
  padding: 10px;
  color: #fff;
  background: #eef3fb;
  font-size: 28px;
  font-weight: 950;
  transition: transform .24s ease, box-shadow .24s ease;
}
.home-category-card:hover img,
.home-category-card:hover .category-initial {
  transform: rotate(-3deg) scale(1.06);
  box-shadow: 0 12px 24px rgba(16,33,63,.12);
}
.home-category-card:hover {
  transform: translateY(-5px);
  border-color: #d2d8e2;
  box-shadow: var(--shadow);
}
.home-category-card strong {
  display: block;
  color: var(--navy);
  font-size: 18px;
}
.home-category-card span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
}
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
}
.product-count {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.pagination button,
.pagination span {
  min-width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 12px;
  color: var(--navy);
  background: #fff;
  font-weight: 900;
}
.pagination button.active {
  color: #fff;
  border-color: var(--navy);
  background: var(--navy);
}
.pagination button:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.product-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #fff;
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s ease, border-color .28s ease;
  animation: shelfSettle .46s cubic-bezier(.2, .8, .2, 1) both;
}
.product-card:before {
  content: "";
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 38%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.48), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
  z-index: 2;
}
.product-card .primary {
  min-height: 46px;
  width: 100%;
}
.product-card:hover {
  transform: translateY(-8px);
  border-color: #d2d8e2;
  box-shadow: 0 24px 54px rgba(14,35,68,.14);
}
.product-card:hover:before { animation: quietShine .78s ease; }
.product-card:nth-child(2n) { animation-delay: .04s; }
.product-card:nth-child(3n) { animation-delay: .08s; }
.product-art {
  position: relative;
  display: block;
  height: 230px;
  background:
    radial-gradient(circle at 70% 20%, rgba(246,195,67,.22), transparent 30%),
    #f7f8fb;
  overflow: hidden;
}
.product-art:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 42%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent);
  transform: skewX(-16deg);
  transition: left .52s ease;
  pointer-events: none;
}
.product-card:hover .product-art:after { left: 118%; }
.product-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 18px;
  display: block;
  margin: 0 auto;
  transition: transform .22s ease;
}
.product-card:hover .product-art img {
  transform: scale(1.06);
  animation: imageFloat 2.2s ease-in-out infinite;
}
.product-link.product-clicked {
  transform: scale(.975);
  filter: saturate(1.12);
}
.placeholder {
  position: absolute;
  inset: 22px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: var(--navy);
  font-size: 32px;
  font-weight: 950;
}
.product-body {
  display: grid;
  grid-template-rows: auto minmax(48px, auto) minmax(54px, 1fr) auto auto;
  gap: 10px;
  padding: 16px;
}
.product-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.product-body small {
  color: var(--orange);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}
.product-meta span {
  flex: none;
  border-radius: 999px;
  padding: 5px 8px;
  color: var(--green);
  background: #eaf8f1;
  font-size: 11px;
  font-weight: 850;
}
.product-body h3 {
  margin: 0;
  min-height: 48px;
  color: var(--navy);
  font-size: 17px;
  line-height: 1.25;
}
.specs {
  display: grid;
  align-content: start;
  gap: 4px;
  color: var(--muted);
  font-size: 13px;
}
.price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.price-row a {
  color: var(--navy);
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}
.price-row a:hover { color: var(--orange); }
.price { font-size: 22px; font-weight: 950; color: var(--navy); }
.stock {
  border-radius: 999px;
  padding: 5px 8px;
  color: var(--green);
  background: #eaf8f1;
  font-size: 11px;
  font-weight: 850;
  animation: gentlePulse 2.8s ease-in-out infinite;
}
.stock.out { color: var(--red); background: #fff0ee; }
.toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 12px;
  margin-bottom: 18px;
}
.product-toolbar { grid-template-columns: minmax(220px, 320px) minmax(180px, 220px); justify-content: end; }
.shop-title { align-items: center; }
.delivery-chip {
  display: inline-flex;
  width: fit-content;
  margin-top: 10px;
  border: 1px solid rgba(22,130,93,.16);
  border-radius: 999px;
  padding: 8px 11px;
  color: var(--green);
  background: #eaf8f1;
  font-size: 12px;
  font-weight: 900;
}
input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px 14px;
  background: #fff;
  outline: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--navy);
  box-shadow: 0 0 0 4px rgba(14,35,68,.10);
}
.shop-page {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 20px;
  background:
    linear-gradient(180deg, #fff, #f7f9fc);
}
.shop-page .section-head { margin-bottom: 18px; }
.split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 24px; align-items: start; }
.detail-art {
  position: relative;
  height: min(58vh, 520px);
  min-height: 360px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow);
  animation: productOpen .58s cubic-bezier(.2, .9, .2, 1) both;
}
.detail-art img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  object-fit: contain;
  padding: clamp(20px, 4vw, 46px);
  animation: productImageReveal .72s cubic-bezier(.18, .9, .18, 1) both;
}
.bundle-art {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  background: linear-gradient(180deg, #fff, #f8fafc);
}
.bundle-art img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  border: 1px solid #e7edf5;
  border-radius: 8px;
  padding: 8px;
  background: #fff;
}
.bundle-art-card,
.bundle-art-admin {
  padding: 12px;
}
.bundle-art-detail {
  padding: clamp(16px, 3vw, 30px);
  gap: clamp(8px, 2vw, 14px);
}
.bundle-art-thumb {
  gap: 3px;
  padding: 0;
  background: transparent;
}
.bundle-art-thumb img {
  border-radius: 6px;
  padding: 2px;
}
.zoom-trigger {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 3;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(14,35,68,.12);
  border-radius: 50%;
  background: #fff;
  color: var(--navy);
  box-shadow: 0 12px 28px rgba(14,35,68,.16);
  cursor: pointer;
}
.zoom-trigger:hover {
  color: #fff;
  background: var(--orange);
}
.zoom-lens {
  position: absolute;
  z-index: 4;
  width: 154px;
  height: 154px;
  display: none;
  border: 3px solid #fff;
  border-radius: 50%;
  background-repeat: no-repeat;
  box-shadow: 0 18px 42px rgba(14,35,68,.28);
  pointer-events: none;
}
.detail-art.lens-on {
  cursor: none;
}
.detail-art.lens-on .zoom-lens {
  display: block;
}
.image-zoom-modal {
  position: fixed;
  inset: 0;
  z-index: 140;
  display: grid;
  place-items: center;
  padding: 24px;
}
.image-zoom-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8,14,25,.82);
}
.image-zoom-stage {
  position: relative;
  z-index: 1;
  width: min(96vw, 1180px);
  height: min(90vh, 820px);
  overflow: auto;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 30px 80px rgba(0,0,0,.34);
  cursor: zoom-in;
}
.image-zoom-stage img {
  width: 100%;
  min-width: 100%;
  max-width: none;
  height: auto;
  min-height: 100%;
  display: block;
  object-fit: contain;
  transform-origin: center;
  transition: width .18s ease;
}
.image-zoom-stage.zoomed {
  cursor: zoom-out;
}
.image-zoom-stage.zoomed img {
  width: 175%;
}
.image-zoom-close {
  position: sticky;
  top: 12px;
  left: calc(100% - 56px);
  z-index: 2;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: var(--navy);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.detail-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  overflow-x: auto;
}
.detail-thumbs button {
  width: 74px;
  height: 74px;
  flex: 0 0 auto;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}
.detail-thumbs button.active {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(237,28,36,.12);
}
.detail-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.detail-page .panel {
  animation: productOpen .64s .08s cubic-bezier(.2, .9, .2, 1) both;
}
.detail-panel h1 { font-size: clamp(34px, 5vw, 64px); line-height: 1; letter-spacing: -.04em; }
.product-option-label {
  margin-top: 18px;
}
.product-option-label select {
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  background: #fff;
  color: var(--ink);
}
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.trust-strip span {
  border: 1px solid rgba(14,35,68,.10);
  border-radius: 999px;
  padding: 9px 11px;
  color: var(--navy);
  background: #f8fafc;
  font-size: 12px;
  font-weight: 900;
}
.related-section {
  padding-top: 10px;
  background: linear-gradient(180deg, #fff, #f8fafc);
}
.cart-flyer {
  position: fixed;
  z-index: 1000;
  width: 74px;
  height: 74px;
  border: 1px solid rgba(255,255,255,.74);
  border-radius: 14px;
  display: grid;
  place-items: center;
  background:
    linear-gradient(90deg, rgba(14,35,68,.08), transparent 18%),
    rgba(255,255,255,.94);
  box-shadow: 0 24px 54px rgba(14,35,68,.22);
  pointer-events: none;
  overflow: hidden;
  transform-style: preserve-3d;
  animation: flyToCart 1.35s cubic-bezier(.16, .88, .2, 1) forwards;
}
.cart-flyer img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8px;
}
.cart-flyer span {
  color: #fff;
  background: var(--navy);
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-weight: 950;
}
.primary.added-burst {
  animation: addedBurst .7s cubic-bezier(.16, 1, .3, 1);
}
.panel {
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 20px;
  background: #fff;
  box-shadow: var(--soft-shadow);
  animation: shelfSettle .46s cubic-bezier(.2, .8, .2, 1) both;
}
.cart-page {
  background: linear-gradient(180deg, #eef1f6, #f8fafc);
}
.mini-cart-shell {
  position: fixed;
  inset: 0;
  z-index: 1600;
  pointer-events: none;
}
.mini-cart-backdrop {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: rgba(14,35,68,.34);
  backdrop-filter: blur(4px);
  transition: opacity .24s ease;
}
.mini-cart-drawer {
  position: absolute;
  top: 14px;
  right: 14px;
  bottom: 14px;
  width: min(440px, calc(100% - 28px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 34px 90px rgba(5,13,31,.34);
  transform: translateX(24px) scale(.985);
  opacity: 0;
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), opacity .22s ease;
}
.mini-cart-shell.open { pointer-events: auto; }
.mini-cart-shell.open .mini-cart-backdrop { opacity: 1; }
.mini-cart-shell.open .mini-cart-drawer { opacity: 1; transform: translateX(0) scale(1); animation: drawerIn .32s cubic-bezier(.2,.8,.2,1); }
.mini-cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px;
  color: #fff;
  background:
    radial-gradient(circle at 84% 14%, rgba(246,195,67,.24), transparent 32%),
    var(--navy);
}
.mini-cart-head h3 { margin: 0; font-size: 26px; }
.mini-cart-head .eyebrow { color: var(--gold); }
.mini-cart-close {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  color: var(--navy);
  background: #fff;
  font-size: 24px;
  line-height: 1;
}
.mini-cart-list {
  display: grid;
  align-content: start;
  gap: 0;
  overflow: auto;
  padding: 8px 20px;
}
.mini-cart-item {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.mini-cart-item .cart-thumb {
  width: 80px;
  height: 80px;
}
.mini-cart-item strong { display: block; color: var(--navy); line-height: 1.22; font-size: 17px; }
.mini-cart-item small { display: block; margin: 4px 0 10px; color: var(--muted); font-size: 12px; }
.mini-cart-item > b {
  align-self: center;
  color: var(--navy);
  white-space: nowrap;
  font-size: 18px;
}
.mini-cart-qty {
  width: fit-content;
  gap: 10px;
  border-radius: 14px;
  background: #f3f6fb;
}
.mini-cart-qty button {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  padding: 0;
}
.mini-cart-foot {
  display: grid;
  gap: 12px;
  padding: 20px;
  border-top: 1px solid var(--line);
  background: #f8fafc;
}
.mini-cart-foot > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-weight: 850;
}
.mini-cart-foot strong { color: var(--navy); font-size: 24px; }
.mini-cart-foot .primary,
.mini-cart-foot .secondary {
  justify-content: center;
  width: 100%;
}
.empty-state {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  min-height: 260px;
  border: 1px dashed #d8dde7;
  border-radius: 24px;
  padding: 34px 20px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0, rgba(246,195,67,.16), transparent 34%),
    #fff;
}
.empty-mark {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 16px;
  color: #fff;
  background: var(--navy);
  font-weight: 950;
  box-shadow: var(--soft-shadow);
}
.empty-emoji {
  display: block;
  margin-bottom: 12px;
  font-size: 54px;
  line-height: 1;
  filter: grayscale(.1);
}
.empty-state h2 {
  margin: 8px 0 4px;
  color: var(--navy);
  font-size: clamp(28px, 5vw, 44px);
}
.empty-state p:last-child {
  max-width: 420px;
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}
.cart-head {
  max-width: 1180px;
  margin: 0 auto 18px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}
.cart-head h2 {
  color: var(--navy);
  font-size: clamp(34px, 5vw, 58px);
  letter-spacing: -.04em;
}
.cart-head span {
  color: var(--muted);
  font-weight: 800;
}
.cart-layout {
  max-width: 1180px;
  min-height: 560px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(16,33,63,.14);
  overflow: hidden;
}
.cart-list {
  display: grid;
  align-content: start;
  gap: 0;
  padding: clamp(22px, 4vw, 54px);
}
.cart-table-head {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 120px 110px 110px;
  gap: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}
.cart-item {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 120px 110px 110px;
  gap: 18px;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.cart-item-media {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  color: inherit;
  text-decoration: none;
}
.cart-item-media .cart-thumb {
  width: 82px;
  height: 82px;
  border-radius: 10px;
  padding: 8px;
}
.cart-item-main small {
  color: var(--orange);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}
.cart-item-main h3 {
  margin: 4px 0;
  color: var(--navy);
  font-size: 16px;
}
.cart-item-main p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
.cart-item-actions {
  display: contents;
}
.cart-item-actions strong {
  color: var(--navy);
  font-size: 15px;
}
.cart-qty {
  justify-content: flex-start;
}
.cart-qty b {
  min-width: 34px;
  min-height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--navy);
  background: #fff;
}
.cart-qty button {
  background: transparent;
}
.cart-remove {
  width: fit-content;
  margin-top: 8px;
  padding: 0;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
}
.continue-shopping {
  width: fit-content;
  margin-top: 28px;
  color: var(--navy);
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}
.continue-shopping:hover { color: var(--orange); }
.cart-summary {
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  padding: clamp(24px, 4vw, 54px) 34px;
  background: #f3f4f6;
  box-shadow: none;
}
.cart-summary h3 {
  margin-bottom: 26px;
  color: var(--navy);
  font-size: 28px;
}
.summary-lines {
  display: grid;
  gap: 18px;
  margin: 24px 0;
}
.summary-lines div {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}
.summary-lines b {
  color: var(--navy);
  text-align: right;
}
.summary-total {
  margin-top: 14px;
  padding-top: 20px;
  border-top: 1px solid #d9dee7;
}
.summary-total strong {
  color: var(--navy);
  font-size: 22px;
}
.cart-summary .primary,
.cart-summary .secondary {
  width: 100%;
  justify-content: center;
  margin-top: 12px;
}
.cart-empty {
  min-height: 62vh;
  display: grid;
  place-items: center;
  text-align: center;
}
.cart-empty .panel {
  max-width: 560px;
}
.cart-empty h2 {
  color: var(--navy);
  font-size: clamp(38px, 6vw, 70px);
  letter-spacing: -.04em;
}
.cart-empty p {
  color: var(--muted);
  font-size: 18px;
  line-height: 1.6;
}
.cart-line, .order-line, .admin-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  transition: transform .18s ease, box-shadow .18s ease;
}
.cart-line:hover, .order-line:hover, .admin-row:hover {
  transform: translateY(-2px);
  box-shadow: var(--soft-shadow);
}
.cart-line.has-thumb,
.order-line.has-thumb {
  grid-template-columns: 68px 1fr auto;
}
.cart-thumb {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f7f8fb;
  object-fit: contain;
  padding: 6px;
}
.cart-thumb > img,
.cart-thumb .bundle-art,
.cart-thumb .placeholder {
  width: 100%;
  height: 100%;
}
.cart-thumb.placeholder {
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--navy);
  font-size: 18px;
  font-weight: 900;
}
.cart-thumb .placeholder {
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  background: var(--navy);
  font-size: 18px;
  font-weight: 900;
}
.admin-order-products {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
.admin-order-product {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
}
.admin-order-product img {
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  object-fit: contain;
  padding: 4px;
  background: #fff;
}
.list { display: grid; gap: 12px; }
.qty { display: flex; gap: 8px; align-items: center; }
.qty button, .danger, .edit {
  border: 0;
  border-radius: 8px;
  padding: 9px 12px;
  font-weight: 800;
}
.qty button, .edit { color: var(--navy); background: #eef3fb; }
.danger { color: var(--red); background: #fff0ee; }
.total-box {
  margin-top: 18px;
  padding: 18px;
  border-radius: 10px;
  color: #fff;
  background: var(--navy);
}
.total-box div { display: flex; justify-content: space-between; gap: 12px; margin: 8px 0; }
.checkout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
label { display: grid; gap: 7px; color: var(--muted); font-size: 13px; font-weight: 800; }
.wide { grid-column: 1 / -1; }
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.turnstile-box {
  min-height: 65px;
}
.admin-shell { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 20px; }
.admin-side { position: sticky; top: 170px; align-self: start; display: grid; gap: 8px; }
.admin-side button { text-align: left; }
.admin-mobile-top,
.admin-side-backdrop {
  display: none;
}
.admin-view { display: grid; gap: 18px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.stat {
  border: 0;
  border-radius: 18px;
  padding: 20px;
  color: #fff;
  text-align: left;
  background:
    radial-gradient(circle at 88% 12%, rgba(246,195,67,.24), transparent 34%),
    linear-gradient(145deg, var(--navy), var(--navy-2));
  box-shadow: var(--soft-shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.stat:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.db-stat.ok {
  background:
    radial-gradient(circle at 88% 12%, rgba(96,211,148,.28), transparent 34%),
    linear-gradient(145deg, #123b2a, #0e2344);
}
.db-stat.error {
  background:
    radial-gradient(circle at 88% 12%, rgba(237,28,36,.28), transparent 34%),
    linear-gradient(145deg, #5b1820, #0e2344);
}
.stat strong { display: block; margin: 8px 0; font-size: 36px; }
.stat small { display: block; color: rgba(255,255,255,.78); line-height: 1.45; }
.db-save-status {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 14px;
  color: var(--navy);
  background: #f7f9fc;
  font-weight: 800;
}
.db-save-status.ok {
  border-color: rgba(35,164,94,.28);
  color: #146c43;
  background: #ecfdf3;
}
.db-save-status.saving {
  border-color: rgba(246,195,67,.42);
  background: #fff8df;
}
.db-save-status.error {
  border-color: rgba(237,28,36,.28);
  color: #9f1d2c;
  background: #fff1f2;
}
.admin-welcome h2 {
  margin-bottom: 8px;
  color: var(--navy);
  font-size: clamp(30px, 5vw, 52px);
  letter-spacing: -.04em;
}
.admin-welcome p:not(.eyebrow) {
  max-width: 760px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
}
.admin-guide {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}
.admin-guide article {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}
.admin-guide b {
  display: block;
  margin-bottom: 6px;
  color: var(--navy);
}
.admin-guide span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.admin-chart {
  display: grid;
  gap: 18px;
}
.admin-chart h2 {
  color: var(--navy);
  font-size: clamp(26px, 4vw, 42px);
  letter-spacing: -.035em;
}
.chart-bars {
  height: 250px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
  padding-top: 20px;
}
.chart-bar {
  min-width: 0;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr auto auto;
  gap: 7px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}
.chart-bar span {
  align-self: end;
  border-radius: 12px 12px 4px 4px;
  background: linear-gradient(180deg, var(--orange), var(--navy));
  box-shadow: 0 10px 18px rgba(14,35,68,.14);
  animation: chartGrow .65s ease both;
}
.chart-bar b {
  color: var(--navy);
  font-size: 12px;
}
.order-card {
  width: 100%;
  cursor: pointer;
  text-align: left;
}
.order-delete-btn {
  width: 100%;
  margin-top: 12px;
}
.admin-order-filter {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(160px, 240px);
  gap: 12px;
}
.order-card > span {
  align-self: center;
}
.order-detail-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 16px;
}
.detail-list {
  display: grid;
  gap: 8px;
}
.detail-list p {
  margin: 0;
  color: var(--muted);
}
.detail-list b {
  color: var(--navy);
}
@keyframes chartGrow {
  from { transform: scaleY(.2); transform-origin: bottom; opacity: .3; }
  to { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
}
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.image-preview { width: 170px; height: 120px; border: 1px solid var(--line); border-radius: 10px; background-size: cover; background-position: center; }
.admin-gallery-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.admin-gallery-preview img {
  width: 86px;
  height: 86px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 6px;
}
.category-rename {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.category-create {
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 260px) auto;
}
.category-rename input {
  min-width: 220px;
}
.category-parent-select {
  min-width: 190px;
}
.hidden { display: none !important; }
.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 99;
  transform: translate(-50%, 140%);
  padding: 13px 16px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--navy), var(--navy-2));
  box-shadow: var(--shadow);
  transition: transform .2s;
}
.toast.show { transform: translate(-50%, 0); }
.school-page { display: grid; gap: 24px; }
.section-shop-grid {
  margin-top: 0;
}
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.portfolio-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
}
.portfolio-card img,
.portfolio-card video {
  width: 100%;
  height: 230px;
  display: block;
  object-fit: contain;
  background: #05070b;
}
.portfolio-card div {
  padding: 16px;
}
.portfolio-card small {
  color: var(--orange);
  font-weight: 900;
  text-transform: uppercase;
}
.portfolio-card h3 {
  margin: 6px 0 8px;
  color: var(--navy);
}
.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.social-links a {
  display: grid;
  place-items: center;
  min-width: 48px;
  height: 44px;
  border-radius: 10px;
  color: #fff;
  background: var(--navy);
  text-decoration: none;
  font-size: 13px;
  font-weight: 950;
  transition: transform .18s ease, background .18s ease;
}
.social-links a:hover {
  transform: translateY(-2px);
  background: var(--orange);
}
.school-showcase { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; max-width: min(100%, 980px); }
.showcase-card { min-height: 250px; border-radius: 12px; padding: 26px; background: #fff; box-shadow: var(--shadow); overflow: hidden; position: relative; }
.showcase-card.dark { color: #fff; background: linear-gradient(145deg, var(--navy), var(--navy-2)); }
.showcase-card.image { min-height: 290px; background: linear-gradient(90deg, rgba(14,35,68,.78), rgba(14,35,68,.08)), url("./assets/hero-school-shop.jpg") center / cover; color: #fff; }
.business-hero {
  background:
    radial-gradient(circle at 86% 12%, rgba(246,195,67,.24), transparent 30%),
    linear-gradient(135deg, #fff, #f7f9fc);
}
.business-hero h2 {
  max-width: 780px;
  font-size: clamp(38px, 6vw, 76px);
  letter-spacing: -.04em;
  color: var(--navy);
}
.business-hero p:not(.eyebrow) {
  max-width: 720px;
  color: var(--muted);
  font-size: 19px;
  line-height: 1.6;
}
.business-pills { margin: 0; }
.business-page {
  background: linear-gradient(180deg, #fff, #f7f9fc);
}
.business-services {
  border: 1px solid var(--line);
  border-radius: 24px;
  margin: 18px 0 26px;
  padding: clamp(20px, 4vw, 34px);
  box-shadow: var(--soft-shadow);
}
.business-empty {
  max-width: 900px;
}
.admin-page {
  max-width: none;
  width: 100%;
  min-height: 100vh;
  padding-top: clamp(18px, 3vw, 34px);
}
.admin-page .admin-shell {
  max-width: 1500px;
  margin: 0 auto;
}
.admin-category-browser {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.admin-cat-card,
.trend-option {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  background: #fff;
  text-align: left;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.admin-cat-card:hover,
.admin-cat-card.active,
.trend-option:hover {
  transform: translateY(-2px);
  border-color: rgba(237,28,36,.34);
  box-shadow: var(--soft-shadow);
}
.admin-cat-card strong,
.trend-option span {
  display: block;
  color: var(--navy);
  font-weight: 900;
}
.admin-cat-card span,
.trend-option small {
  color: var(--muted);
  font-size: 13px;
}
.admin-products-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.admin-product-main {
  display: flex;
  align-items: center;
  gap: 12px;
}
.admin-product-thumb {
  width: 58px;
  height: 58px;
  border: 1px solid var(--line);
  border-radius: 10px;
  object-fit: contain;
  background: #fff;
  padding: 5px;
}
.admin-product-thumb.placeholder {
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--navy);
  font-weight: 900;
}
.trend-picker {
  display: grid;
  gap: 16px;
}
.trend-option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}
.trend-option input {
  width: 18px;
  height: 18px;
}
.premium-band {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
  gap: clamp(18px, 4vw, 44px);
  align-items: center;
  color: #fff;
  background:
    radial-gradient(circle at 92% 12%, rgba(246,195,67,.26), transparent 30%),
    linear-gradient(135deg, var(--navy), #102a52 58%, #09182f);
}
.premium-copy h2 {
  max-width: 820px;
  margin: 0;
  color: #fff;
  font-size: clamp(36px, 5vw, 72px);
  line-height: .98;
  letter-spacing: -.04em;
}
.premium-copy p:not(.eyebrow) {
  max-width: 680px;
  color: rgba(255,255,255,.74);
  font-size: 18px;
  line-height: 1.7;
}
.premium-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.premium-points span {
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  padding: 10px 13px;
  color: #fff;
  background: rgba(255,255,255,.08);
  font-weight: 900;
}
.testimonial-stack {
  display: grid;
  gap: 14px;
  perspective: 900px;
}
.testimonial-stack article {
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  padding: 22px;
  background: rgba(255,255,255,.10);
  box-shadow: 0 18px 40px rgba(0,0,0,.14);
  animation: shelfSettle .58s cubic-bezier(.2,.8,.2,1) both;
}
.testimonial-stack article:nth-child(2) { transform: translateX(18px); animation-delay: .08s; }
.testimonial-stack b {
  display: block;
  margin-bottom: 8px;
  font-size: 20px;
}
.site-footer {
  margin-top: 38px;
  padding: 34px clamp(16px, 4vw, 56px) calc(34px + env(safe-area-inset-bottom));
  color: #fff;
  background:
    linear-gradient(135deg, #081a33, var(--navy) 58%, #061325);
}
.footer-inner {
  width: min(1500px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(260px, 1.35fr) repeat(3, minmax(140px, 1fr));
  gap: clamp(20px, 4vw, 46px);
}
.footer-brand {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.footer-logo {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}
.footer-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.footer-brand strong,
.footer-col h3 {
  color: #fff;
  font-weight: 950;
}
.footer-brand strong {
  display: block;
  margin-bottom: 8px;
  font-size: 18px;
}
.footer-brand p {
  max-width: 360px;
  margin: 0;
  color: rgba(255,255,255,.72);
  line-height: 1.65;
}
.footer-col {
  display: grid;
  align-content: start;
  gap: 8px;
}
.footer-col h3 {
  margin: 0 0 6px;
  font-size: 14px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.footer-col a,
.footer-col span {
  color: rgba(255,255,255,.72);
  text-decoration: none;
  line-height: 1.55;
}
.footer-col a:hover {
  color: #fff;
}
.footer-bottom {
  width: min(1500px, 100%);
  margin: 26px auto 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  color: rgba(255,255,255,.62);
  font-size: 13px;
}
.footer-credit {
  color: rgba(255,255,255,.34);
  font-size: 11px;
}
.testimonial-stack span {
  color: rgba(255,255,255,.74);
  line-height: 1.55;
}
.showcase-card h3 { font-size: clamp(28px, 4vw, 44px); margin-bottom: 12px; letter-spacing: -.04em; }
.supply-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.supply-pills span { border-radius: 999px; padding: 10px 13px; color: var(--navy); background: #fff; font-weight: 800; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .45s ease, transform .45s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.thanks-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(14,35,68,.52);
  backdrop-filter: blur(10px);
  animation: fadeUp .22s ease both;
}
.thanks-card {
  position: relative;
  width: min(560px, 100%);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.70);
  border-radius: 28px;
  padding: clamp(34px, 8vw, 64px) 26px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0, rgba(246,195,67,.34), transparent 38%),
    #fff;
  box-shadow: 0 30px 90px rgba(5,13,31,.36);
}
.thanks-card strong {
  display: block;
  color: var(--navy);
  font-size: clamp(38px, 8vw, 70px);
  line-height: .95;
  letter-spacing: -.04em;
}
.thanks-card p {
  max-width: 360px;
  margin: 18px auto 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
}
.confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.confetti i {
  position: absolute;
  left: calc(50% + var(--x) * 10%);
  top: calc(58% + var(--y) * 12%);
  width: 10px;
  height: 18px;
  border-radius: 3px;
  background: hsl(calc(var(--i) * 38), 85%, 56%);
  animation: confettiFly 1.8s var(--d) cubic-bezier(.16,.84,.22,1) infinite;
  will-change: transform, opacity;
}
@keyframes confettiFly {
  0% { opacity: 0; transform: translate3d(0,18px,0) rotate(0) scale(.7); }
  12% { opacity: 1; }
  62% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(calc(var(--x) * 34px), calc(-190px - var(--y) * 16px), 0) rotate(420deg) scale(1); }
}
@media (max-width: 1020px) {
  .header-main, .storefront, .hero-banner, .shop-page, .split, .admin-shell, .school-showcase, .premium-band, .home-map-section { grid-template-columns: 1fr; }
  .home-trend-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .deal-strip, .shop-flow-section { grid-template-columns: 1fr; }
  .deal-products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-banner { min-height: auto; }
  .hero-shop-card { min-height: 0; animation: none; }
  .hero-floating-note { position: relative; right: auto; bottom: auto; width: fit-content; }
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop-sidebar { position: static; }
  .admin-shell {
    display: block;
    gap: 0;
  }
  .admin-mobile-top {
    position: sticky;
    top: 0;
    z-index: 95;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -24px -16px 16px;
    padding: 10px 16px;
    color: #fff;
    background: var(--navy);
    box-shadow: 0 10px 28px rgba(14,35,68,.18);
  }
  .admin-mobile-top strong {
    font-size: 15px;
    font-weight: 950;
  }
  .admin-menu-toggle {
    width: 44px;
    height: 40px;
    display: grid;
    place-items: center;
    gap: 4px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 12px;
    background: rgba(255,255,255,.08);
  }
  .admin-menu-toggle span {
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: #fff;
  }
  .admin-side {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 110;
    width: min(82vw, 300px);
    display: grid;
    align-content: start;
    gap: 8px;
    overflow: auto;
    padding: 18px;
    background: #fff;
    box-shadow: 22px 0 60px rgba(14,35,68,.25);
    transform: translateX(-105%);
    transition: transform .24s ease;
  }
  .admin-shell.nav-open .admin-side {
    transform: translateX(0);
  }
  .admin-side-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    background: rgba(8,19,37,.42);
  }
  .admin-shell.nav-open .admin-side-backdrop {
    display: block;
  }
  .admin-side button {
    min-height: 44px;
    padding: 11px 10px;
    text-align: left;
    border-radius: 12px;
  }
  .header-actions { flex-wrap: wrap; }
}
@media (max-width: 700px) {
  body { padding-bottom: 78px; }
  body.product-mobile-mode { padding-bottom: 0; }
  .site-header { position: static; }
  .topline { flex-direction: row; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 8px 10px; font-size: 12px; }
  .topline span { white-space: nowrap; }
  .top-language { width: 76px; min-width: 76px; max-width: 76px; min-height: 36px; }
  .product-mobile-mode .top-socials,
  .product-mobile-mode .top-language,
  .product-mobile-mode .header-search,
  .product-mobile-mode .header-actions,
  .product-mobile-mode .category-nav,
  .product-mobile-mode .mobile-bottom-nav,
  .product-mobile-mode .brand small {
    display: none;
  }
  .product-mobile-mode .topline {
    justify-content: center;
  }
  .product-mobile-mode .header-main {
    display: flex;
    justify-content: center;
    padding: 10px 12px;
  }
  .product-mobile-mode .brand {
    justify-content: center;
  }
  .product-mobile-mode .mark {
    width: 58px;
    height: 58px;
  }
  .top-socials a { width: 34px; height: 34px; }
  .top-socials svg { width: 20px; height: 20px; }
  .header-main { gap: 10px; padding: 12px; }
  .brand { gap: 10px; }
  .mark { width: 52px; height: 52px; }
  .brand strong { font-size: 15px; }
  .brand small { font-size: 11px; }
  .header-actions { display: none; }
  .message-link { min-height: 46px; }
  .cart-link { min-height: 46px; justify-self: end; }
  .header-search { display: none; }
  .header-search { grid-template-columns: 1fr; }
  .header-search button { min-height: 44px; }
  .category-nav { display: none; }
  .category-nav a { min-height: 42px; display: inline-flex; align-items: center; scroll-snap-align: start; background: #fff; border: 1px solid var(--line); }
  .shop-sidebar {
    display: block;
    max-height: 360px;
    overflow: auto;
    border-radius: 16px;
  }
  .shop-sidebar a {
    min-height: 44px;
    padding: 12px 14px;
  }
  .shop-page { gap: 14px; }
  .shop-title { align-items: start; }
  .product-toolbar { grid-template-columns: 1fr; }
  .shop-page .toolbar select { display: block; }
  .shop-page .product-toolbar {
    display: none;
  }
  .product-count {
    justify-content: center;
    text-align: center;
  }
  .pagination {
    justify-content: center;
    gap: 7px;
  }
  .pagination button,
  .pagination span {
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    font-size: 13px;
  }
  .storefront, .section, .page { padding-inline: 12px; padding-block: 24px; }
  .hero-banner { border-radius: 20px; padding: 22px; gap: 16px; }
  .hero-copy:after, .hero-banner:before { display: none; }
  .hero-banner:after { display: none; }
  .hero-banner p:not(.eyebrow) { font-size: 16px; }
  .hero-actions .primary, .hero-actions .secondary { width: 100%; min-height: 48px; }
  .hero-mini-stats span { flex: 1 1 130px; justify-content: center; }
  .hero-shop-card { border-radius: 18px; padding: 12px; }
  .hero-pick { grid-template-columns: 50px 1fr; }
  .hero-pick b { grid-column: 2; justify-self: start; }
  .hero-floating-note { width: 100%; }
  .deal-strip { border-radius: 20px; padding: 18px; }
  .deal-products { grid-template-columns: 1fr; }
  .deal-product { grid-template-columns: 74px 1fr auto; align-items: center; min-height: 0; }
  .deal-product img, .deal-product > span { width: 74px; height: 74px; }
  .deal-product strong { min-height: 0; }
  .premium-band { border-radius: 0; }
  .home-trend-grid {
    grid-template-columns: 1fr;
  }
  .home-info-list span {
    display: grid;
    gap: 4px;
  }
  .map-card,
  .map-card iframe {
    min-height: 320px;
  }
  .premium-copy h2 { font-size: 36px; }
  .premium-copy p:not(.eyebrow) { font-size: 16px; }
  .testimonial-stack article:nth-child(2) { transform: none; }
  .shop-flow-section { gap: 10px; }
  .home-category-card { grid-template-columns: 78px 1fr; border-radius: 18px; }
  .home-category-card img, .category-initial { width: 78px; height: 78px; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .home-category-grid, .portfolio-grid { grid-template-columns: 1fr; }
  .product-card { border-radius: 16px; }
  .product-art { height: 132px; }
  .product-art img { padding: 10px; }
  .detail-art { height: 320px; min-height: 260px; }
  .detail-art img { padding: 18px; }
  .trust-strip span { flex: 1 1 auto; text-align: center; }
  .mini-cart-drawer { top: auto; left: 10px; right: 10px; bottom: 10px; width: auto; max-height: 82vh; border-radius: 24px; transform: translateY(28px) scale(.985); }
  .mini-cart-shell.open .mini-cart-drawer { transform: translateY(0) scale(1); animation: none; }
  .mini-cart-head { padding: 18px; }
  .mini-cart-head h3 { font-size: 24px; }
  .mini-cart-list { padding: 8px 18px; }
  .mini-cart-item {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
  }
  .mini-cart-item .cart-thumb {
    width: 92px;
    height: 92px;
  }
  .mini-cart-item > b {
    grid-column: 2;
    justify-self: start;
    align-self: start;
    margin-top: -4px;
    font-size: 18px;
  }
  .mini-cart-qty {
    margin-top: 8px;
  }
  .mini-cart-foot { padding: 18px; }
  .product-body { padding: 10px; gap: 8px; }
  .product-body small { font-size: 10px; }
  .product-meta { align-items: flex-start; }
  .product-meta span { padding: 4px 6px; font-size: 10px; }
  .product-body h3 { font-size: 14px; line-height: 1.22; }
  .specs { font-size: 11px; gap: 3px; }
  .specs span:nth-child(n+3) { display: none; }
  .price-row { align-items: flex-start; flex-direction: column; gap: 4px; }
  .price { font-size: 18px; }
  .price-row a { font-size: 12px; }
  .product-body {
    grid-template-rows: auto minmax(38px, auto) minmax(48px, 1fr) auto auto;
  }
  .product-body h3 { min-height: 38px; }
  .product-card .primary { min-height: 42px; padding: 10px 8px; font-size: 13px; border-radius: 12px; }
  .service-grid { grid-template-columns: 1fr; }
  .service-card { min-height: 0; padding: 16px; border-radius: 18px; }
  .service-card img { margin-bottom: 14px; }
  .services-head { display: block; }
  .info-row, .toolbar, .checkout-grid, .form-grid { grid-template-columns: 1fr; }
  .order-detail-grid { grid-template-columns: 1fr; }
  .admin-page {
    padding-inline: 10px;
  }
  .admin-shell {
    display: block;
    gap: 0;
  }
  .admin-mobile-top {
    position: sticky;
    top: 0;
    z-index: 95;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: -24px -10px 14px;
    padding: 10px 12px;
    color: #fff;
    background: var(--navy);
    box-shadow: 0 10px 28px rgba(14,35,68,.18);
  }
  .admin-mobile-top strong {
    font-size: 15px;
    font-weight: 950;
  }
  .admin-menu-toggle {
    width: 44px;
    height: 40px;
    display: grid;
    place-items: center;
    gap: 4px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 12px;
    background: rgba(255,255,255,.08);
  }
  .admin-menu-toggle span {
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: #fff;
  }
  .admin-side {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 110;
    width: min(82vw, 300px);
    display: grid;
    align-content: start;
    gap: 8px;
    overflow: auto;
    padding: 18px;
    background: #fff;
    box-shadow: 22px 0 60px rgba(14,35,68,.25);
    transform: translateX(-105%);
    transition: transform .24s ease;
  }
  .admin-shell.nav-open .admin-side {
    transform: translateX(0);
  }
  .admin-side-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    background: rgba(8,19,37,.42);
  }
  .admin-shell.nav-open .admin-side-backdrop {
    display: block;
  }
  .admin-side button {
    min-height: 44px;
    padding: 11px 10px;
    text-align: left;
    border-radius: 12px;
  }
  .admin-view {
    gap: 12px;
  }
  .admin-order-filter,
  .admin-products-head,
  .category-rename,
  .admin-product-main {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .admin-products-head .primary,
  .category-rename button {
    width: 100%;
  }
  .admin-product-thumb {
    width: 72px;
    height: 72px;
  }
  .admin-category-browser {
    grid-template-columns: 1fr;
  }
  .chart-bars { gap: 7px; height: 210px; }
  .chart-bar b { font-size: 10px; }
  .cart-head { display: grid; padding-inline: 4px; }
  .cart-layout { grid-template-columns: 1fr; min-height: 0; }
  .cart-list { padding: 18px; }
  .cart-table-head { display: none; }
  .cart-item {
    grid-template-columns: 86px 1fr;
    gap: 12px;
    padding: 16px 0;
  }
  .cart-item-media {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .cart-item-media .cart-thumb {
    width: 86px;
    height: 86px;
  }
  .cart-item-main {
    grid-column: 2;
    grid-row: 1;
  }
  .cart-item-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
  }
  .cart-remove {
    margin-top: 0;
    justify-self: end;
  }
  .cart-summary {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 22px 18px;
  }
  .mobile-bottom-nav {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 80;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    border: 1px solid rgba(14,35,68,.12);
    border-radius: 22px;
    padding: 8px;
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(16px);
    box-shadow: 0 18px 44px rgba(14,35,68,.18);
  }
  .mobile-bottom-nav a {
    min-width: 0;
    min-height: 52px;
    display: grid;
    place-items: center;
    gap: 3px;
    border-radius: 16px;
    color: var(--navy);
    text-decoration: none;
    font-size: 10px;
    font-weight: 900;
  }
  .mobile-bottom-nav a:hover {
    color: #fff;
    background: var(--navy);
  }
  .mobile-bottom-nav svg {
    width: 20px;
    height: 20px;
  }
  .cart-line, .order-line, .admin-row, .cart-line.has-thumb, .order-line.has-thumb { grid-template-columns: 1fr; gap: 10px; }
  .qty { justify-content: space-between; }
  .qty button, .danger, .edit { min-height: 44px; min-width: 44px; }
  .cart-thumb { width: 92px; height: 92px; }
  input, select, textarea { min-height: 46px; font-size: 16px; }
  .toast { width: calc(100% - 24px); text-align: center; }
  h1 { font-size: 40px; }
  .site-footer {
    margin-bottom: 86px;
    padding-inline: 16px;
  }
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .footer-bottom {
    display: grid;
    gap: 8px;
  }
}

@media (min-width: 701px) {
  .mobile-bottom-nav {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  .mobile-bottom-nav svg {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
  }
}

/* 7 DAYS visual refresh */
:root {
  --navy: #071f3f;
  --navy-2: #123d73;
  --orange: #ec1c24;
  --gold: #ffc83d;
  --ink: #111827;
  --muted: #667085;
  --paper: #f2f6fb;
  --card: #ffffff;
  --line: #dce5f0;
  --green: #11845b;
  --red: #c8323d;
  --sky: #e7f3ff;
  --cream: #fff7df;
  --shadow: 0 24px 70px rgba(7, 31, 63, .16);
  --soft-shadow: 0 12px 32px rgba(7, 31, 63, .10);
}

body {
  background:
    radial-gradient(circle at 8% 0%, rgba(255,200,61,.22), transparent 28%),
    radial-gradient(circle at 92% 6%, rgba(236,28,36,.10), transparent 26%),
    linear-gradient(180deg, #fbfdff 0, var(--paper) 420px, #f9fbfe 100%);
}

h1, h2, .detail-panel h1, .cart-head h2, .cart-empty h2,
.admin-welcome h2, .admin-chart h2, .business-hero h2,
.showcase-card h3, .premium-copy h2 {
  letter-spacing: 0 !important;
}

.site-header {
  position: sticky;
  background:
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.90));
  border-bottom: 1px solid rgba(7,31,63,.10);
  box-shadow: 0 16px 36px rgba(7,31,63,.08);
}

.topline {
  justify-content: space-between;
  padding-inline: clamp(16px, 4vw, 56px);
  background:
    linear-gradient(90deg, #071f3f, #123d73 52%, #071f3f);
}

.topline span:first-child {
  font-weight: 900;
}

.topline span:before {
  box-shadow: 0 0 0 5px rgba(255,200,61,.14);
}

.header-main {
  grid-template-columns: minmax(250px, 320px) minmax(280px, 1fr) auto;
  padding-block: 18px;
}

.brand {
  min-width: 0;
}

.mark {
  width: 68px;
  height: 68px;
  border: 3px solid #fff;
  box-shadow: 0 12px 32px rgba(7,31,63,.18);
}

.brand strong {
  font-size: 20px;
  line-height: 1.05;
}

.brand small {
  margin-top: 3px;
  color: #4b5870;
  font-weight: 750;
}

.header-search {
  border: 1px solid rgba(7,31,63,.14);
  border-radius: 999px;
  padding: 5px;
  background: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 10px 26px rgba(7,31,63,.06);
}

.header-search input {
  min-height: 48px;
  background: transparent;
}

.header-search button {
  min-height: 48px;
  border-radius: 999px;
  background:
    linear-gradient(135deg, var(--orange), #ff5a2e);
  box-shadow: 0 12px 24px rgba(236,28,36,.20);
}

.header-actions a,
.secondary,
.text-link,
.ghost,
.tab {
  border-color: rgba(7,31,63,.12);
  box-shadow: 0 6px 18px rgba(7,31,63,.05);
}

.message-link {
  border-radius: 999px !important;
}

.cart-link {
  min-width: 64px;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--orange), #ff6a32) !important;
  box-shadow: 0 14px 30px rgba(236,28,36,.22);
}

.category-nav {
  gap: 8px;
  padding-bottom: 16px;
}

.category-nav a {
  border: 1px solid rgba(7,31,63,.09);
  border-radius: 999px;
  background: rgba(255,255,255,.74);
  box-shadow: 0 5px 15px rgba(7,31,63,.04);
}

.category-nav a:hover {
  background: var(--navy);
  color: #fff;
}

.storefront {
  background:
    linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,0));
}

.hero-banner {
  min-height: 590px;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 430px);
  border-radius: 32px;
  border: 1px solid rgba(255,255,255,.40);
  background:
    radial-gradient(circle at 82% 16%, rgba(255,200,61,.46), transparent 24%),
    radial-gradient(circle at 12% 18%, rgba(236,28,36,.28), transparent 22%),
    linear-gradient(100deg, rgba(7,31,63,.96), rgba(7,31,63,.78) 48%, rgba(7,31,63,.20)),
    url("./assets/hero-school-shop.jpg") center / cover;
  box-shadow: 0 34px 90px rgba(7,31,63,.24);
}

.hero-banner:after {
  inset: 18px;
  border-radius: 24px;
  border-color: rgba(255,255,255,.28);
}

.hero-copy {
  max-width: 760px;
}

.hero-copy .eyebrow {
  width: fit-content;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  padding: 8px 11px;
  color: #fff;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  letter-spacing: .10em;
}

h1 {
  max-width: 780px;
  font-size: clamp(42px, 5.5vw, 76px);
  line-height: 1;
}

h2 {
  line-height: 1.08;
}

.hero-banner p:not(.eyebrow) {
  max-width: 660px;
  color: rgba(255,255,255,.88);
  font-size: 19px;
}

.hero-actions .primary,
.hero-actions .secondary {
  min-height: 54px;
  border-radius: 999px;
  padding-inline: 22px;
}

.hero-actions .secondary {
  color: #fff;
  border-color: rgba(255,255,255,.26);
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
}

.hero-shop-card {
  min-height: 454px;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.88));
  box-shadow: 0 34px 80px rgba(0,0,0,.24);
}

.hero-card-head span {
  background: #fff1f1;
}

.hero-pick {
  border-radius: 20px;
  box-shadow: 0 8px 20px rgba(7,31,63,.06);
}

.hero-pick img,
.hero-pick > span {
  background:
    radial-gradient(circle at 65% 18%, rgba(255,200,61,.24), transparent 36%),
    #f4f8fd;
}

.hero-card-link {
  border-radius: 999px;
  background: linear-gradient(135deg, var(--navy), var(--navy-2));
}

.hero-mini-stats span {
  padding: 10px 14px;
  background: rgba(255,255,255,.14);
}

.quick-shop-strip {
  padding: 10px 2px 6px;
}

.quick-shop-strip a {
  border-color: rgba(7,31,63,.10);
  padding: 12px 16px;
  box-shadow: 0 10px 24px rgba(7,31,63,.07);
}

.section, .page {
  background: rgba(255,255,255,.82);
}

.home-trend-section,
.shop-page {
  background:
    radial-gradient(circle at 8% 0%, rgba(255,200,61,.16), transparent 22%),
    linear-gradient(180deg, #fff, #f5f8fc);
}

.home-trend-grid {
  gap: 20px;
}

.product-grid {
  gap: 18px;
}

.product-card {
  border-color: rgba(7,31,63,.10);
  border-radius: 24px;
  display: grid;
  grid-template-rows: auto 1fr;
  background:
    linear-gradient(180deg, #fff, #fbfdff);
  box-shadow: 0 12px 30px rgba(7,31,63,.07);
}

.product-card:hover {
  transform: translateY(-9px) scale(1.01);
  border-color: rgba(236,28,36,.22);
  box-shadow: 0 28px 70px rgba(7,31,63,.16);
}

.product-art {
  height: 250px;
  background:
    radial-gradient(circle at 72% 18%, rgba(255,200,61,.28), transparent 30%),
    radial-gradient(circle at 18% 82%, rgba(236,28,36,.10), transparent 32%),
    linear-gradient(145deg, #f7fbff, #eef5fd);
}

.product-art img {
  padding: 20px;
}

.product-body {
  grid-template-rows: auto minmax(48px, auto) minmax(58px, 1fr) auto auto;
  gap: 12px;
  padding: 18px;
}

.product-body h3 {
  color: #09264c;
  font-size: 18px;
}

.price {
  color: var(--orange);
}

.stock {
  background: #e7f8f0;
}

.shop-sidebar {
  border: 1px solid rgba(7,31,63,.10);
  border-radius: 22px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 16px 40px rgba(7,31,63,.08);
}

.side-category.active,
.side-category:hover {
  background: linear-gradient(135deg, var(--navy), var(--navy-2));
  color: #fff;
}

.toolbar input,
.toolbar select,
input,
select,
textarea {
  border-color: rgba(7,31,63,.13);
  box-shadow: 0 4px 14px rgba(7,31,63,.04);
}

.cart-page,
.mini-cart-drawer,
.cart-summary,
.panel {
  border-color: rgba(7,31,63,.10);
  box-shadow: 0 18px 48px rgba(7,31,63,.09);
}

.cart-head {
  border-radius: 24px;
  padding: 18px 20px;
  background:
    radial-gradient(circle at 90% 20%, rgba(255,200,61,.18), transparent 24%),
    linear-gradient(135deg, #fff, #f6f9fd);
}

.cart-summary {
  background:
    linear-gradient(180deg, #fff, #f7fbff);
}

.total-box {
  border-radius: 18px;
  background:
    radial-gradient(circle at 88% 18%, rgba(255,200,61,.28), transparent 30%),
    linear-gradient(135deg, var(--navy), var(--navy-2));
}

.site-footer {
  background:
    radial-gradient(circle at 12% 0%, rgba(255,200,61,.18), transparent 26%),
    linear-gradient(135deg, #061b37, #09264c);
  box-shadow: 0 -18px 50px rgba(7,31,63,.10);
}

body.admin-mode {
  background:
    radial-gradient(circle at 6% 0%, rgba(255,200,61,.18), transparent 26%),
    linear-gradient(180deg, #eef4fb, #f8fbff);
}

.admin-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 90% 0%, rgba(236,28,36,.10), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.50), rgba(255,255,255,0));
}

.admin-shell {
  grid-template-columns: 260px minmax(0, 1fr);
}

.admin-side {
  top: 24px;
  border: 1px solid rgba(7,31,63,.10);
  border-radius: 24px;
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,250,254,.94));
  box-shadow: 0 24px 60px rgba(7,31,63,.12);
}

.admin-side:before {
  content: "7 DAYS";
  display: block;
  margin: 4px 4px 10px;
  color: var(--orange);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .12em;
}

.admin-side .tab {
  border-radius: 16px;
  padding: 13px 14px;
  color: #0b2b55;
  font-weight: 900;
  background: #fff;
}

.admin-side .tab:hover,
.admin-side .tab:focus {
  color: #fff;
  background: linear-gradient(135deg, var(--navy), var(--navy-2));
}

.admin-view {
  gap: 20px;
}

.admin-welcome.panel,
.admin-chart.panel {
  overflow: hidden;
  border-radius: 26px;
  background:
    radial-gradient(circle at 88% 12%, rgba(255,200,61,.22), transparent 24%),
    linear-gradient(135deg, #fff, #f6faff);
}

.admin-welcome h2 {
  font-size: clamp(32px, 4.5vw, 56px);
}

.stat {
  border-radius: 22px;
  background:
    radial-gradient(circle at 86% 14%, rgba(255,200,61,.30), transparent 32%),
    linear-gradient(145deg, #071f3f, #124579);
  box-shadow: 0 20px 50px rgba(7,31,63,.16);
}

.admin-row,
.cart-line,
.order-line {
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(7,31,63,.06);
}

.premium-band {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  margin-inline: clamp(16px, 4vw, 56px);
  padding: clamp(24px, 4vw, 42px);
  color: #fff;
  background:
    radial-gradient(circle at 88% 18%, rgba(255,200,61,.34), transparent 28%),
    linear-gradient(135deg, #071f3f, #0d3565 60%, #ec1c24);
  box-shadow: 0 30px 80px rgba(7,31,63,.22);
}

.premium-band:before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 24px;
  pointer-events: none;
}

.premium-copy,
.testimonial-stack {
  position: relative;
  z-index: 1;
}

.premium-copy h2 {
  max-width: 720px;
  color: #fff;
}

.premium-copy p:not(.eyebrow) {
  max-width: 560px;
  margin-bottom: 18px;
  color: rgba(255,255,255,.78);
}

.premium-points {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.premium-points span {
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 999px;
  padding: 9px 13px;
  color: #fff;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
}

.testimonial-stack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-content: end;
}

.testimonial-stack article,
.testimonial-stack article:nth-child(2) {
  min-height: 132px;
  display: grid;
  align-content: space-between;
  transform: none;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 22px;
  padding: 16px;
  color: #fff;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
  box-shadow: none;
}

.testimonial-stack b {
  color: var(--gold);
  font-size: 28px;
}

.testimonial-stack span {
  color: rgba(255,255,255,.88);
  font-size: 15px;
  font-weight: 900;
}

.admin-product-thumb,
.cart-thumb {
  border-radius: 16px;
  background:
    radial-gradient(circle at 70% 18%, rgba(255,200,61,.18), transparent 34%),
    #f4f8fd;
}

.db-save-status {
  border-radius: 16px;
}

@media (max-width: 1020px) {
  .site-header {
    position: static;
  }

  .hero-banner {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .admin-mobile-top {
    border-radius: 0 0 22px 22px;
    background:
      radial-gradient(circle at 92% 10%, rgba(255,200,61,.22), transparent 28%),
      linear-gradient(135deg, var(--navy), var(--navy-2));
  }

  .admin-side {
    border-radius: 0 24px 24px 0;
  }
}

@media (max-width: 700px) {
  body {
    background:
      radial-gradient(circle at 50% -6%, rgba(255,200,61,.24), transparent 26%),
      linear-gradient(180deg, #fbfdff, #f2f6fb);
  }

  .topline {
    justify-content: center;
    border-radius: 0 0 18px 18px;
  }

  .topline span:nth-child(2) {
    display: none;
  }

  .header-main {
    padding: 14px 14px 10px;
    background: rgba(255,255,255,.78);
  }

  .brand {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .mark {
    width: 58px;
    height: 58px;
  }

  .brand strong {
    font-size: 16px;
  }

  .storefront, .section, .page {
    padding-inline: 14px;
  }

  .hero-banner {
    border-radius: 26px;
    padding: 24px 18px;
    background:
      radial-gradient(circle at 80% 8%, rgba(255,200,61,.38), transparent 28%),
      linear-gradient(180deg, rgba(7,31,63,.94), rgba(7,31,63,.76)),
      url("./assets/hero-school-shop.jpg") center / cover;
    box-shadow: 0 24px 62px rgba(7,31,63,.24);
  }

  h1 {
    font-size: 39px;
    line-height: 1.02;
  }

  .hero-banner p:not(.eyebrow) {
    font-size: 15.5px;
    line-height: 1.55;
  }

  .hero-mini-stats {
    gap: 8px;
  }

  .hero-mini-stats span {
    flex: 1 1 120px;
    border-radius: 16px;
  }

  .hero-shop-card {
    border-radius: 22px;
    padding: 14px;
  }

  .premium-band {
    margin-inline: 14px;
    border-radius: 24px;
    padding: 22px 16px;
  }

  .testimonial-stack {
    grid-template-columns: 1fr;
  }

  .testimonial-stack article,
  .testimonial-stack article:nth-child(2) {
    min-height: 86px;
  }

  .hero-pick {
    grid-template-columns: 58px 1fr;
    border-radius: 18px;
  }

  .hero-pick img,
  .hero-pick > span {
    width: 58px;
    height: 58px;
  }

  .quick-shop-strip {
    margin-inline: -14px;
    padding-inline: 14px;
    scroll-snap-type: x mandatory;
  }

  .quick-shop-strip a {
    scroll-snap-align: start;
  }

  .home-trend-grid,
  .product-grid {
    gap: 12px;
  }

  .product-card {
    border-radius: 20px;
  }

  .product-art {
    height: 150px;
  }

  .product-body {
    padding: 12px;
    grid-template-rows: auto minmax(38px, auto) minmax(48px, 1fr) auto auto;
  }

  .product-body h3 {
    font-size: 14px;
  }

  .product-card .primary {
    min-height: 44px;
  }

  .shop-sidebar {
    display: none;
  }

  .shop-page {
    display: block;
  }

  .cart-head,
  .cart-page,
  .cart-summary {
    border-radius: 22px;
  }

  .mobile-bottom-nav {
    left: 12px;
    right: 12px;
    bottom: 12px;
    border-radius: 26px;
    padding: 8px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.90));
    box-shadow: 0 20px 54px rgba(7,31,63,.22);
  }

  .mobile-bottom-nav a {
    min-height: 56px;
    border-radius: 20px;
  }

  .mobile-bottom-nav a:hover,
  .mobile-bottom-nav a:focus {
    color: #fff;
    background: linear-gradient(135deg, var(--navy), var(--orange));
  }

  .admin-page {
    padding-inline: 12px;
  }

  .admin-mobile-top {
    margin-inline: -12px;
  }

  .admin-welcome.panel,
  .admin-chart.panel,
  .stat,
  .panel {
    border-radius: 22px;
  }

  .stats {
    grid-template-columns: 1fr;
  }
}

.custom-designer-page {
  background:
    radial-gradient(circle at 10% 0%, rgba(255,200,61,.20), transparent 26%),
    linear-gradient(180deg, #fff, #f5f8fc);
}

.custom-designer-grid {
  display: grid;
  grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
  gap: 24px;
  align-items: stretch;
}

.custom-designer-controls {
  display: grid;
  gap: 18px;
}

.designer-field {
  display: grid;
  gap: 10px;
}

.designer-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 10px;
}

.designer-swatch {
  display: grid;
  gap: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  color: var(--navy);
}

.designer-swatch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.designer-swatch span {
  height: 42px;
  border: 2px solid rgba(7,31,63,.12);
  border-radius: 14px;
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.72), 0 8px 18px rgba(7,31,63,.08);
}

.designer-swatch input:checked + span {
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(236,28,36,.12), 0 10px 22px rgba(7,31,63,.12);
}

.custom-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-radius: 16px;
  background: #f8fafc;
  color: var(--navy);
}

.custom-price-row strong {
  color: var(--orange);
  font-size: 24px;
}

.custom-pen-preview-card {
  display: grid;
  gap: 16px;
  overflow: hidden;
}

.custom-gift-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: 24px;
  align-items: center;
  background:
    radial-gradient(circle at 84% 18%, rgba(255,200,61,.30), transparent 28%),
    linear-gradient(135deg, #0e2344, #173761);
  color: #fff;
  overflow: hidden;
}

.custom-gift-copy {
  display: grid;
  gap: 16px;
  max-width: 760px;
}

.custom-gift-copy p:not(.eyebrow) {
  color: rgba(255,255,255,.84);
  font-size: 18px;
  line-height: 1.65;
}

.custom-gift-copy .secondary {
  color: #fff;
  border-color: rgba(255,255,255,.24);
  background: rgba(255,255,255,.12);
}

.custom-gift-preview {
  min-height: 280px;
  position: relative;
  display: grid;
  place-items: center;
}

.gift-pen,
.gift-lighter {
  position: absolute;
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
}

.gift-pen {
  width: 310px;
  height: 52px;
  display: grid;
  place-items: center;
  transform: rotate(-12deg) translateY(-42px);
  border-radius: 999px;
  color: #101828;
  background: linear-gradient(180deg, #fff, #dde6f2);
}

.gift-lighter {
  width: 150px;
  height: 210px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  transform: rotate(10deg) translate(64px, 42px);
  border-radius: 22px;
  background: linear-gradient(160deg, #f8fafc, #cbd5e1);
  color: #0e2344;
}

.gift-lighter:before {
  content: "";
  position: absolute;
  top: -28px;
  width: 56px;
  height: 42px;
  border-radius: 12px 12px 6px 6px;
  background: linear-gradient(180deg, #cbd5e1, #64748b);
}

.gift-lighter b {
  font-size: 28px;
}

.gift-lighter span {
  font-weight: 800;
}

.custom-pen-product-image {
  min-height: 150px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: #f8fafc;
  border: 1px solid rgba(7,31,63,.10);
}

.custom-pen-product-image img,
.custom-pen-product-image span {
  width: min(100%, 260px);
  height: 130px;
  object-fit: contain;
}

.custom-pen-product-image span {
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: #fff;
  background: var(--navy);
  font-weight: 900;
}

.phone-mockup {
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
  padding: 12px;
  border-radius: 34px;
  background: #101828;
  box-shadow: 0 30px 80px rgba(7,31,63,.25);
}

.lighter-stage {
  min-height: 280px;
  display: grid;
  place-items: center;
}

.lighter-body {
  position: relative;
  width: 142px;
  height: 218px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  border-radius: 22px;
  background: linear-gradient(160deg, #f8fafc, #dbe4ef);
  color: #0e2344;
  box-shadow: 0 22px 44px rgba(7,31,63,.22);
}

.lighter-body.laser-black {
  background: linear-gradient(160deg, #172033, #020617);
}

.lighter-body strong,
.lighter-body small {
  position: relative;
  z-index: 1;
}

.lighter-body small {
  font-weight: 900;
  letter-spacing: .12em;
}

.lighter-flame {
  position: absolute;
  top: -34px;
  width: 52px;
  height: 46px;
  border-radius: 14px 14px 8px 8px;
  background: linear-gradient(180deg, #cbd5e1, #64748b);
}

.phone-screen {
  min-height: 560px;
  display: grid;
  align-content: center;
  gap: 24px;
  padding: 28px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 72% 18%, rgba(255,200,61,.34), transparent 30%),
    linear-gradient(160deg, #fff, #eaf2fb);
}

.pen-stage {
  position: relative;
  min-height: 280px;
  display: grid;
  place-items: center;
}

.laser-light {
  position: absolute;
  width: 52%;
  height: 3px;
  transform: translateY(-54px) rotate(-10deg);
  background: linear-gradient(90deg, transparent, rgba(237,28,36,.85), transparent);
  filter: blur(.4px);
}

.pen-shadow {
  position: absolute;
  bottom: 55px;
  width: 78%;
  height: 26px;
  border-radius: 50%;
  background: rgba(7,31,63,.16);
  filter: blur(10px);
}

.pen-body {
  --pen-color: #f8fafc;
  position: relative;
  width: min(100%, 330px);
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 58px 0 34px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.72), transparent 48%, rgba(0,0,0,.10)),
    var(--pen-color);
  border: 1px solid rgba(7,31,63,.14);
  box-shadow: 0 18px 34px rgba(7,31,63,.18);
}

.pen-body strong {
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 22px;
  letter-spacing: .02em;
}

.pen-tip {
  position: absolute;
  right: -30px;
  width: 50px;
  height: 22px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(90deg, #d7dde8, #7d8898);
}

.pen-clip {
  position: absolute;
  top: -14px;
  left: 62px;
  width: 118px;
  height: 13px;
  border-radius: 999px;
  background: rgba(7,31,63,.72);
}

.mockup-note {
  display: grid;
  gap: 4px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  color: var(--navy);
}

.mockup-note span,
.custom-order-details {
  color: var(--muted);
}

.custom-order-details {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.custom-order-details span {
  padding: 5px 8px;
  border-radius: 999px;
  background: #fff7e8;
  color: var(--navy);
  font-size: 12px;
  font-weight: 800;
}

.bundle-box {
  display: grid;
  gap: 10px;
  margin: 16px 0;
  padding: 14px;
  border-radius: 16px;
  background: #f8fafc;
  border: 1px solid rgba(7,31,63,.10);
  color: var(--navy);
}

.bundle-box ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
}

.bundle-box b {
  color: var(--orange);
}

/* Homepage + mobile nav polish */
.custom-gift-band {
  position: relative;
  isolation: isolate;
  width: min(1500px, calc(100% - 32px));
  margin-inline: auto;
  padding: clamp(30px, 5vw, 64px);
  grid-template-columns: minmax(0, 1fr) minmax(320px, 460px);
  gap: clamp(28px, 5vw, 72px);
  border: 1px solid rgba(7,31,63,.10);
  border-radius: 8px;
  color: #fff;
  background:
    linear-gradient(120deg, rgba(7,31,63,.98), rgba(14,35,68,.94)),
    var(--navy);
  box-shadow: 0 20px 54px rgba(7,31,63,.16);
}

.custom-gift-band:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(236,28,36,.18), transparent 42%, rgba(246,195,67,.12));
  opacity: .75;
}

.custom-gift-copy {
  gap: 18px;
}

.custom-gift-copy .eyebrow,
.premium-copy .eyebrow {
  color: var(--gold);
}

.custom-gift-copy h2 {
  max-width: 760px;
  margin: 0;
  color: #fff;
  font-size: clamp(34px, 4vw, 58px);
  line-height: 1.04;
  letter-spacing: 0;
}

.custom-gift-copy p:not(.eyebrow) {
  max-width: 720px;
  color: rgba(255,255,255,.88);
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.7;
}

.custom-gift-band .home-map-actions,
.premium-band .home-map-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.custom-gift-band .primary,
.custom-gift-band .secondary {
  min-height: 48px;
  border-radius: 8px;
}

.custom-gift-band .secondary {
  color: #fff;
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.10);
}

.custom-gift-band .premium-points,
.premium-band .premium-points {
  gap: 8px;
  margin-top: 4px;
}

.custom-gift-band .premium-points span,
.premium-band .premium-points span {
  border-radius: 8px;
  padding: 9px 12px;
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
}

.custom-gift-preview {
  min-height: 300px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  background: rgba(255,255,255,.06);
}

.gift-pen,
.gift-lighter {
  box-shadow: 0 20px 46px rgba(0,0,0,.20);
}

.gift-pen {
  width: min(320px, 82%);
  height: 48px;
  transform: rotate(-10deg) translate(-10px, -54px);
}

.gift-lighter {
  width: 142px;
  height: 198px;
  transform: rotate(8deg) translate(54px, 42px);
  border-radius: 18px;
}

.premium-band {
  width: min(1500px, calc(100% - 32px));
  margin: 22px auto 0;
  padding: clamp(28px, 4.5vw, 54px);
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  gap: clamp(24px, 5vw, 62px);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(7,31,63,.10);
  box-shadow: 0 18px 46px rgba(7,31,63,.10);
}

.premium-band:before {
  display: none;
}

.premium-copy h2 {
  max-width: 760px;
  color: var(--navy);
  font-size: clamp(32px, 4vw, 58px);
  line-height: 1.05;
  letter-spacing: 0;
}

.premium-copy p:not(.eyebrow) {
  color: #475467;
  font-size: clamp(16px, 1.2vw, 18px);
}

.premium-band .premium-points span {
  color: var(--navy);
  background: #f8fafc;
  border-color: #e4e7ec;
}

.testimonial-stack {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.testimonial-stack article,
.testimonial-stack article:nth-child(2) {
  min-height: 132px;
  border-radius: 8px;
  border: 1px solid #e4e7ec;
  color: var(--navy);
  background: #f8fafc;
  box-shadow: none;
}

.testimonial-stack b {
  color: var(--orange);
}

.testimonial-stack span {
  color: var(--navy);
}

.mobile-bottom-nav a.active,
.mobile-bottom-nav a[aria-current="page"] {
  color: #fff;
  background: var(--orange);
  box-shadow: 0 10px 24px rgba(236,28,36,.24);
}

.mobile-bottom-nav a:hover,
.mobile-bottom-nav a:focus {
  color: #fff;
  background: var(--orange);
}

.custom-designer-page .section-head {
  align-items: end;
  gap: 18px;
}

.custom-designer-grid,
.custom-form-card,
.custom-pen-preview-card {
  border-radius: 8px;
}

@media (max-width: 860px) {
  .custom-gift-band,
  .premium-band {
    width: calc(100% - 24px);
    margin-inline: auto;
    border-radius: 8px;
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 24px 16px;
  }

  .custom-gift-copy h2,
  .premium-copy h2 {
    font-size: 30px;
    line-height: 1.08;
  }

  .custom-gift-copy p:not(.eyebrow),
  .premium-copy p:not(.eyebrow) {
    font-size: 15.5px;
    line-height: 1.62;
  }

  .custom-gift-band .home-map-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .custom-gift-band .primary,
  .custom-gift-band .secondary {
    width: 100%;
    justify-content: center;
  }

  .custom-gift-preview {
    min-height: 210px;
    overflow: hidden;
  }

  .gift-pen {
    width: 250px;
    height: 42px;
    transform: rotate(-9deg) translate(-20px, -40px);
  }

  .gift-lighter {
    width: 112px;
    height: 158px;
    transform: rotate(7deg) translate(42px, 34px);
  }

  .gift-lighter b {
    font-size: 21px;
  }

  .testimonial-stack {
    grid-template-columns: 1fr;
  }

  .testimonial-stack article,
  .testimonial-stack article:nth-child(2) {
    min-height: 82px;
    padding: 15px;
  }

  .mobile-bottom-nav {
    border-color: rgba(236,28,36,.18);
    box-shadow: 0 18px 42px rgba(7,31,63,.18);
  }
}

@media (max-width: 860px) {
  .custom-gift-band {
    grid-template-columns: 1fr;
  }

  .custom-gift-preview {
    min-height: 230px;
  }

  .custom-designer-grid {
    grid-template-columns: 1fr;
  }

  .phone-screen {
    min-height: 430px;
    padding: 22px;
  }

  .pen-body {
    width: min(88vw, 310px);
  }
}

@media (max-width: 860px) {
  .custom-gift-band,
  .premium-band {
    width: calc(100% - 24px);
    margin-inline: auto;
    border-radius: 8px;
  }

  .custom-gift-preview {
    min-height: 210px;
  }
}

.mobile-bottom-nav a.active,
.mobile-bottom-nav a[aria-current="page"],
.mobile-bottom-nav a:hover,
.mobile-bottom-nav a:focus {
  color: #fff;
  background: var(--orange);
}

/* Admin product form cleanup */
body.admin-mode {
  background: #f6f8fb;
}

.admin-page {
  padding-block: 18px;
}

.admin-shell {
  width: min(1480px, calc(100% - 28px));
  margin-inline: auto;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 16px;
}

.admin-side {
  top: 18px;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 16px 36px rgba(7,31,63,.10);
}

.admin-side .tab {
  min-height: 42px;
  border-radius: 8px;
  padding: 10px 12px;
}

.admin-welcome.panel {
  border-radius: 8px;
  padding: 20px 22px;
}

.admin-welcome h2 {
  font-size: clamp(28px, 3vw, 42px);
}

.admin-category-browser {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 8px;
}

.admin-cat-card {
  min-width: 150px;
  border-radius: 8px;
  padding: 13px 14px;
}

.admin-product-form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  border-radius: 8px;
  padding: 20px;
}

.admin-product-form label {
  gap: 7px;
}

.admin-product-form input,
.admin-product-form select,
.admin-product-form textarea {
  border-radius: 8px;
}

.admin-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.admin-field-head strong {
  display: block;
  color: var(--navy);
  font-size: 17px;
}

.admin-field-head small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-weight: 750;
}

.admin-bundle-box,
.admin-laser-box {
  border: 1px solid #dce5f0;
  border-radius: 8px;
  padding: 16px;
  background: #f8fafc;
}

.admin-laser-box {
  background: #fff;
}

.admin-laser-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.bundle-choice-list {
  max-height: 260px;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
  margin-top: 12px;
  padding-right: 4px;
}

.bundle-filter-row {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.bundle-filter-row label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.bundle-choice {
  display: grid;
  grid-template-columns: auto 44px minmax(0, 1fr);
  grid-template-areas:
    "check img name"
    "check img meta";
  align-items: center;
  column-gap: 10px;
  row-gap: 2px;
  border: 1px solid #e1e7ef;
  border-radius: 8px;
  padding: 10px;
  background: #fff;
  cursor: pointer;
}

.bundle-choice input {
  grid-area: check;
  width: 18px;
  height: 18px;
}

.bundle-choice span {
  grid-area: img;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  color: #fff;
  background: var(--navy);
  font-size: 12px;
}

.bundle-choice img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bundle-choice strong {
  grid-area: name;
  min-width: 0;
  overflow: hidden;
  color: var(--navy);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.bundle-choice small {
  grid-area: meta;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.bundle-choice:has(input:checked) {
  border-color: rgba(236,28,36,.46);
  box-shadow: 0 0 0 3px rgba(236,28,36,.08);
}

.bundle-hide-select {
  margin-top: 12px;
}

.admin-products-head,
.admin-product-row {
  border-radius: 8px;
}

.admin-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}

.admin-product-card {
  overflow: hidden;
  border: 1px solid #dce5f0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(7,31,63,.06);
}

.admin-product-card-main {
  width: 100%;
  display: block;
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  text-align: left;
}

.admin-product-card-main > img,
.admin-product-card-main > .admin-product-thumb,
.admin-product-card-main > .bundle-art {
  width: 100%;
  height: 170px;
  display: grid;
  place-items: center;
  object-fit: contain;
  padding: 14px;
  border-bottom: 1px solid #eef2f7;
  background: #f8fafc;
}

.admin-product-card-main > div {
  padding: 14px;
}

.admin-product-card-main small {
  display: block;
  color: var(--orange);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.admin-product-card-main h3 {
  min-height: 42px;
  margin: 6px 0 5px;
  color: var(--navy);
  font-size: 15px;
  line-height: 1.25;
}

.admin-product-card-main p {
  margin: 0 0 10px;
  color: var(--navy);
  font-size: 14px;
  font-weight: 900;
}

.admin-product-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-product-tags span {
  border: 1px solid #e4e7ec;
  border-radius: 999px;
  padding: 5px 8px;
  color: #536176;
  background: #fff;
  font-size: 11px;
  font-weight: 850;
}

.admin-product-actions {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 12px;
  border-top: 1px solid #eef2f7;
}

.admin-product-actions code {
  min-width: 0;
  overflow: hidden;
  color: #667085;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}

.admin-product-card .edit,
.admin-product-card .danger {
  min-height: 36px;
  padding: 8px 10px;
  border-radius: 8px;
}

.admin-product-card-main:hover img,
.admin-product-card-main:focus img {
  transform: scale(1.02);
}

.admin-product-card-main img {
  transition: transform .18s ease;
}

.product-art .bundle-art,
.admin-product-card-main > .bundle-art,
.admin-set-head > .bundle-art,
.image-preview.bundle-preview .bundle-art {
  display: grid;
}

.product-art .bundle-art img,
.admin-product-card-main > .bundle-art img,
.admin-set-head > .bundle-art img,
.image-preview.bundle-preview .bundle-art img {
  object-fit: contain;
  padding: 6px;
  transform: none;
  animation: none;
}

.product-card:hover .bundle-art img,
.admin-product-card-main:hover .bundle-art img,
.admin-product-card-main:focus .bundle-art img {
  transform: none;
  animation: none;
}

.admin-product-form .image-preview {
  width: 170px;
  height: 120px;
  max-width: 100%;
  align-self: end;
  justify-self: start;
  overflow: hidden;
  background-color: #f8fafc;
  background-size: contain;
  background-repeat: no-repeat;
}

.image-preview.bundle-preview {
  background-image: none !important;
  padding: 0;
}

.admin-set-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}

.admin-set-card {
  display: grid;
  gap: 14px;
}

.admin-set-head {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.admin-set-head img,
.admin-set-head > .admin-product-thumb,
.admin-set-head > .bundle-art {
  width: 78px;
  height: 78px;
  object-fit: contain;
  padding: 8px;
  border: 1px solid #eef2f7;
  border-radius: 8px;
  background: #f8fafc;
}

.admin-set-head h3 {
  margin: 4px 0;
  color: var(--navy);
  font-size: 18px;
}

.admin-set-head small,
.admin-set-part small {
  display: block;
  color: var(--muted);
  font-weight: 800;
}

.admin-set-parts {
  display: grid;
  gap: 8px;
}

.admin-set-part {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid #e7edf5;
  border-radius: 8px;
  padding: 8px;
  background: #fff;
}

.admin-set-part img,
.admin-set-part > span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  object-fit: contain;
  border-radius: 8px;
  background: #f8fafc;
  color: var(--navy);
  font-size: 12px;
  font-weight: 950;
}

.admin-set-part strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--navy);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-set-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  border-top: 1px solid #eef2f7;
  padding-top: 12px;
}

.backup-panel,
.bundle-summary-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
}

.backup-panel p,
.bundle-summary-preview p,
.bundle-summary-preview small {
  margin: 4px 0 0;
  color: var(--muted);
}

.danger-zone {
  border-color: rgba(255, 42, 61, .22);
  background: linear-gradient(180deg, #fff, #fff7f7);
}

.file-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid #d8e0ea;
  border-radius: 10px;
  background: #fff;
  color: var(--navy);
  font-weight: 900;
  cursor: pointer;
}

.file-action input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.bundle-summary-preview {
  grid-column: 1 / -1;
  grid-template-columns: 92px minmax(0, 1fr);
  padding: 12px;
  border: 1px solid #dce5f0;
  border-radius: 12px;
  background: #fff;
}

.bundle-summary-preview b {
  color: var(--red);
}

.bundle-summary-art,
.bundle-summary-art .bundle-art {
  width: 84px;
  height: 84px;
}

.mobile-category-strip {
  display: none;
}

@media (max-width: 860px) {
  .admin-shell {
    width: 100%;
    grid-template-columns: 1fr;
  }

  .admin-product-form,
  .admin-laser-grid {
    grid-template-columns: 1fr;
  }

  .bundle-choice-list {
    grid-template-columns: 1fr;
    max-height: 310px;
  }

  .admin-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .admin-product-card-main > img,
  .admin-product-card-main > .admin-product-thumb {
    height: 128px;
  }

  .admin-product-card-main > div,
  .admin-product-actions {
    padding: 10px;
  }

  .admin-product-actions {
    grid-template-columns: 1fr;
  }

  .admin-set-grid {
    grid-template-columns: 1fr;
  }

  .admin-set-part {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .admin-set-part .danger {
    grid-column: 1 / -1;
  }

  .backup-panel,
  .bundle-summary-preview {
    grid-template-columns: 1fr;
  }

  .bundle-summary-art,
  .bundle-summary-art .bundle-art {
    width: 100%;
    height: 118px;
  }
}

@media (max-width: 760px) {
  .mobile-category-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    margin: -4px 0 12px;
    padding: 2px 0 10px;
    scrollbar-width: none;
  }

  .mobile-category-strip::-webkit-scrollbar {
    display: none;
  }

  .mobile-category-strip a {
    scroll-snap-align: start;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 9px 12px;
    border: 1px solid #d8e0ea;
    border-radius: 999px;
    background: #fff;
    color: var(--navy);
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(14, 35, 68, .07);
  }

  .mobile-category-strip a span {
    color: var(--muted);
    font-size: 12px;
  }

  .mobile-category-strip a.active {
    border-color: var(--red);
    background: var(--red);
    color: #fff;
  }

  .mobile-category-strip a.active span {
    color: rgba(255,255,255,.8);
  }

  .product-toolbar {
    position: sticky;
    top: 0;
    z-index: 12;
    grid-template-columns: 1fr 1fr;
    padding: 8px;
    margin-bottom: 12px;
    border: 1px solid #e4e7ec;
    border-radius: 14px;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(14px);
    box-shadow: 0 12px 28px rgba(14, 35, 68, .09);
  }

  .product-toolbar input {
    grid-column: 1 / -1;
  }

  .shop-search-wrap {
    grid-column: 1 / -1;
  }

  .search-suggest {
    position: fixed;
    top: auto;
    left: 12px;
    right: 12px;
    bottom: 86px;
    max-height: min(360px, 58vh);
    overflow-y: auto;
  }

  .header-search .search-suggest {
    bottom: 82px;
  }

  .search-suggest-item {
    grid-template-columns: 42px minmax(0, 1fr) auto;
  }

  .search-suggest-item span {
    width: 42px;
    height: 42px;
  }
}

/* Fast render + lightweight motion polish */
.section,
.product-grid,
.home-category-grid,
.portfolio-grid,
.admin-product-grid {
  content-visibility: auto;
  contain-intrinsic-size: 1px 780px;
}

.product-art img,
.bundle-art img,
.cart-thumb img,
.admin-product-card img,
.portfolio-card img {
  image-rendering: auto;
}

.product-card,
.home-category-card,
.service-card,
.cart-item,
.mini-cart-item,
.admin-product-card {
  backface-visibility: hidden;
  transform: translateZ(0);
}

.product-card,
.cart-item,
.admin-product-card {
  will-change: transform;
}

.product-card:hover,
.cart-item:hover,
.admin-product-card:hover {
  transition-duration: .18s;
}

.product-card {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 42px rgba(14,35,68,.13);
}

.category-nav a,
.mobile-bottom-nav a {
  transition: color .18s ease, background .18s ease, transform .18s ease, border-color .18s ease;
}

.category-nav a:hover,
.mobile-bottom-nav a:hover {
  transform: translateY(-1px);
}

.hero-pick,
.side-category,
.mobile-category-strip a {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.hero-pick:hover,
.side-category:hover,
.mobile-category-strip a:hover {
  transform: translateY(-2px);
}

.cart-thumb img,
.cart-thumb .bundle-art {
  animation: thumbPop .28s cubic-bezier(.2,.8,.2,1) both;
}

.bundle-art img:nth-child(2) { animation-delay: .035s; }
.bundle-art img:nth-child(3) { animation-delay: .07s; }
.bundle-art img:nth-child(4) { animation-delay: .105s; }

.product-card:hover .bundle-art {
  animation: bundleLift .72s cubic-bezier(.2,.8,.2,1);
}

.primary:active,
.qty button:active,
.product-link:active {
  transform: scale(.97);
}

@keyframes thumbPop {
  from { opacity: .65; transform: scale(.94); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes bundleLift {
  45% { transform: translateY(-3px) scale(1.01); }
}

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

/* Final mobile shop fix: keep phone UI separate from desktop category tree */
@media (max-width: 760px) {
  body {
    overflow-x: hidden;
  }

  .shop-page,
  .shop-page.section-shop-grid {
    display: block !important;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 14px 12px calc(96px + env(safe-area-inset-bottom)) !important;
  }

  .school-page {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .school-page .shop-page > div,
  .school-page #schoolGrid {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .shop-sidebar {
    display: none !important;
  }

  .shop-title {
    display: block;
    margin-bottom: 10px;
  }

  .shop-title h2 {
    max-width: 100%;
    font-size: 26px;
    line-height: 1.05;
    overflow-wrap: anywhere;
  }

  .delivery-chip {
    margin-top: 8px;
  }

  .mobile-category-strip {
    display: flex !important;
    gap: 8px;
    margin: 0 -12px 10px;
    padding: 2px 12px 10px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .mobile-category-strip::-webkit-scrollbar {
    display: none;
  }

  .mobile-category-strip a {
    flex: 0 0 auto;
    max-width: 72vw;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #dfe5ee;
    border-radius: 999px;
    padding: 9px 12px;
    color: var(--navy);
    background: #fff;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 8px 18px rgba(14,35,68,.06);
  }

  .mobile-category-strip a span {
    color: var(--muted);
    font-size: 12px;
  }

  .mobile-category-strip a.active,
  .mobile-category-strip a[aria-current="page"] {
    border-color: var(--red);
    color: #fff;
    background: var(--red);
  }

  .mobile-category-strip a.active span,
  .mobile-category-strip a[aria-current="page"] span {
    color: rgba(255,255,255,.82);
  }

  .product-toolbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 0 0 12px;
    padding: 8px;
    border: 1px solid #e5eaf1;
    border-radius: 14px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 12px 26px rgba(14,35,68,.08);
    backdrop-filter: blur(14px);
  }

  .product-toolbar .shop-search-wrap,
  .product-toolbar input {
    grid-column: 1 / -1;
    min-width: 0;
  }

  .product-toolbar select,
  .product-toolbar input {
    width: 100%;
    min-width: 0;
    height: 42px;
    border-radius: 12px;
    font-size: 13px;
  }

  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    content-visibility: visible;
  }

  .school-page .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .product-card {
    min-width: 0;
    border-radius: 16px;
  }

  .product-art {
    height: 136px !important;
  }

  .product-art img {
    padding: 10px;
  }

  .product-body {
    padding: 10px !important;
    gap: 7px;
    grid-template-rows: auto auto 1fr auto auto;
  }

  .product-meta {
    gap: 5px;
  }

  .product-meta small,
  .product-meta span {
    max-width: 100%;
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .product-body h3 {
    min-height: 34px;
    max-height: 36px;
    margin: 0;
    font-size: 13px !important;
    line-height: 1.25;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .product-body .specs {
    min-height: 24px;
    max-height: 24px;
    overflow: hidden;
  }

  .product-body .specs span:nth-child(n+2) {
    display: none;
  }

  .price-row {
    align-items: center;
    gap: 6px;
  }

  .price {
    font-size: 16px !important;
  }

  .price-row .product-link {
    font-size: 12px;
  }

  .product-card .primary {
    min-height: 40px !important;
    border-radius: 12px !important;
    padding: 9px 8px !important;
    font-size: 12px !important;
  }

  .bundle-art-card {
    height: 136px !important;
    grid-template-columns: repeat(2, 1fr);
  }

  .detail-page {
    padding: 12px 12px calc(92px + env(safe-area-inset-bottom)) !important;
  }

  .detail-art {
    min-height: 300px;
    border-radius: 18px;
  }

  .detail-thumbs {
    grid-auto-columns: 72px;
    overflow-x: auto;
    padding-bottom: 8px;
  }
}

/* Hard phone fallback for real devices: never let desktop shop UI squeeze into mobile. */
@media screen and (max-width: 900px), screen and (max-device-width: 900px), (hover: none) and (pointer: coarse) {
  html,
  body,
  #app {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .site-header,
  .header-main,
  .storefront,
  .page,
  .section,
  .shop-page,
  .shop-page.section-shop-grid,
  .school-page {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }

  .site-header {
    position: sticky;
    top: 0;
  }

  .topline {
    padding: 6px 10px;
    gap: 8px;
    font-size: 10px;
    overflow-x: auto;
    justify-content: flex-start;
  }

  .header-main {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    padding: 8px 10px !important;
  }

  .brand {
    min-width: 0;
  }

  .brand small,
  .brand strong {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .header-search {
    grid-column: 1 / -1;
    order: 3;
    width: 100%;
    min-width: 0;
  }

  .header-search input {
    min-width: 0;
  }

  .category-nav,
  .shop-sidebar {
    display: none !important;
  }

  .shop-page,
  .shop-page.section-shop-grid {
    display: block !important;
    padding: 12px 10px calc(94px + env(safe-area-inset-bottom)) !important;
    gap: 0 !important;
  }

  .shop-page > div,
  .school-page .shop-page > div,
  .school-page #schoolGrid,
  #productGrid,
  #businessGrid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .shop-title {
    display: block !important;
    margin: 0 0 10px !important;
  }

  .shop-title h2 {
    font-size: 24px !important;
    line-height: 1.08 !important;
    max-width: 100% !important;
  }

  .mobile-category-strip {
    display: flex !important;
    gap: 8px !important;
    width: calc(100% + 20px) !important;
    max-width: none !important;
    margin: 0 -10px 10px !important;
    padding: 2px 10px 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .mobile-category-strip::-webkit-scrollbar {
    display: none;
  }

  .mobile-category-strip a {
    flex: 0 0 auto !important;
    max-width: 74vw !important;
    min-height: 38px !important;
    padding: 9px 12px !important;
    border-radius: 999px !important;
    border: 1px solid #dfe5ee !important;
    background: #fff !important;
    color: var(--navy) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: 0 8px 18px rgba(14,35,68,.06) !important;
  }

  .mobile-category-strip a.active,
  .mobile-category-strip a[aria-current="page"] {
    border-color: var(--orange) !important;
    background: var(--orange) !important;
    color: #fff !important;
  }

  .mobile-category-strip a span {
    color: var(--muted) !important;
    font-size: 11px !important;
  }

  .mobile-category-strip a.active span,
  .mobile-category-strip a[aria-current="page"] span {
    color: rgba(255,255,255,.82) !important;
  }

  .product-toolbar {
    position: sticky !important;
    top: 72px !important;
    z-index: 20 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 0 10px !important;
    padding: 8px !important;
    border: 1px solid #e5eaf1 !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.96) !important;
    box-shadow: 0 12px 26px rgba(14,35,68,.08) !important;
    backdrop-filter: blur(14px);
  }

  .product-toolbar .shop-search-wrap,
  .product-toolbar input {
    grid-column: 1 / -1 !important;
  }

  .product-toolbar input,
  .product-toolbar select {
    width: 100% !important;
    min-width: 0 !important;
    height: 42px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
  }

  .product-count {
    margin: 0 0 8px !important;
    font-size: 11px !important;
  }

  .product-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    content-visibility: visible !important;
  }

  .school-page .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .product-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  .product-art,
  .bundle-art-card {
    height: 128px !important;
    min-height: 128px !important;
    border-radius: 16px 16px 0 0 !important;
  }

  .product-art img {
    max-width: 92% !important;
    max-height: 92% !important;
    padding: 8px !important;
    object-fit: contain !important;
  }

  .bundle-art-card {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
    padding: 8px !important;
  }

  .bundle-art-card img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
  }

  .product-body {
    padding: 9px !important;
    gap: 6px !important;
    min-width: 0 !important;
  }

  .product-body h3 {
    min-height: 32px !important;
    max-height: 34px !important;
    font-size: 12px !important;
    line-height: 1.24 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .product-meta,
  .product-body .specs,
  .price-row {
    min-width: 0 !important;
  }

  .product-meta small,
  .product-meta span,
  .product-body .specs span {
    max-width: 100% !important;
    font-size: 9px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .product-body .specs {
    min-height: 18px !important;
    max-height: 20px !important;
    overflow: hidden !important;
  }

  .product-body .specs span:nth-child(n+2) {
    display: none !important;
  }

  .price {
    font-size: 15px !important;
    color: var(--orange) !important;
  }

  .price-row .product-link {
    font-size: 11px !important;
  }

  .product-card .primary {
    min-height: 38px !important;
    padding: 8px 6px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
  }

  .mobile-bottom-nav {
    position: fixed !important;
    left: max(10px, env(safe-area-inset-left)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    z-index: 80 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px !important;
    padding: 7px !important;
    border: 1px solid rgba(14,35,68,.12) !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.96) !important;
    box-shadow: 0 18px 42px rgba(14,35,68,.18) !important;
    backdrop-filter: blur(18px);
  }

  .mobile-bottom-nav a {
    min-width: 0 !important;
    display: grid !important;
    place-items: center !important;
    gap: 2px !important;
    padding: 6px 2px !important;
    border-radius: 13px !important;
    color: var(--navy) !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
  }

  .mobile-bottom-nav a.active,
  .mobile-bottom-nav a[aria-current="page"] {
    background: var(--orange) !important;
    color: #fff !important;
  }
}

html.force-mobile-ui body,
body.force-mobile-ui {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

body.force-mobile-ui .category-nav,
body.force-mobile-ui .shop-sidebar {
  display: none !important;
}

body.force-mobile-ui .mobile-category-strip,
body.force-mobile-ui .mobile-bottom-nav {
  display: flex !important;
}

body.force-mobile-ui .mobile-bottom-nav {
  display: grid !important;
}

/* Desktop category panel cleanup */
@media (min-width: 901px) {
  .shop-sidebar {
    border-radius: 20px !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  .shop-sidebar .sidebar-title {
    padding: 18px 20px !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--navy), #17365f) !important;
    font-size: 17px !important;
    letter-spacing: 0 !important;
  }

  .shop-sidebar .side-category {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 48px !important;
    padding: 13px 18px !important;
    border-bottom: 1px solid #e5eaf1 !important;
    color: var(--navy) !important;
    background: #fff !important;
    font-size: 15px !important;
    line-height: 1.1 !important;
    text-decoration: none !important;
    animation: none !important;
  }

  .shop-sidebar .side-category strong {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .shop-sidebar .side-category span {
    min-width: 26px !important;
    color: #66758d !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-align: right !important;
  }

  .shop-sidebar .side-category.has-children {
    grid-template-columns: 14px minmax(0, 1fr) auto !important;
  }

  .shop-sidebar .side-category.has-children::before {
    content: "›";
    color: var(--orange);
    font-size: 19px;
    font-weight: 950;
    line-height: 1;
  }

  .shop-sidebar .side-category.has-children.active::before {
    transform: rotate(90deg);
  }

  .shop-sidebar .side-category:hover,
  .shop-sidebar .side-category.active {
    padding-left: 18px !important;
    color: #fff !important;
    background: var(--navy) !important;
  }

  .shop-sidebar .side-category:hover span,
  .shop-sidebar .side-category.active span,
  .shop-sidebar .side-category:hover::before,
  .shop-sidebar .side-category.active::before {
    color: rgba(255,255,255,.86) !important;
  }

  .shop-sidebar .sidebar-subcategories {
    padding: 6px 0 !important;
    border-bottom: 1px solid #e5eaf1 !important;
    background: #f7f9fc !important;
  }

  .shop-sidebar .side-category.child {
    min-height: 42px !important;
    padding: 11px 18px 11px 34px !important;
    background: #f7f9fc !important;
    font-size: 14px !important;
  }

  .shop-sidebar .side-category.child.has-children {
    grid-template-columns: 14px minmax(0, 1fr) auto !important;
    padding-left: 24px !important;
  }

  .shop-sidebar .side-category.child.deep {
    padding-left: 48px !important;
    background: #eef3f9 !important;
  }

  .shop-sidebar .side-category.child:hover,
  .shop-sidebar .side-category.child.active {
    padding-left: 34px !important;
    background: var(--navy) !important;
  }

  .shop-sidebar .side-category.child.has-children:hover,
  .shop-sidebar .side-category.child.has-children.active {
    padding-left: 24px !important;
  }

  .shop-sidebar .side-category.child.deep:hover,
  .shop-sidebar .side-category.child.deep.active {
    padding-left: 48px !important;
  }
}

/* Checkout mobile compaction */
@media (max-width: 760px) {
  .checkout-page {
    gap: 12px !important;
    padding: 12px 10px calc(92px + env(safe-area-inset-bottom)) !important;
  }

  .checkout-form.panel,
  .checkout-summary.panel {
    border-radius: 18px !important;
    padding: 18px !important;
  }

  .checkout-form {
    gap: 10px !important;
  }

  .checkout-form .wide:first-child {
    margin-bottom: 0;
  }

  .checkout-form .eyebrow {
    margin-bottom: 4px;
    font-size: 12px;
  }

  .checkout-form h2 {
    margin: 0;
    font-size: 29px;
    line-height: 1.04;
    letter-spacing: 0;
  }

  .checkout-form label {
    gap: 6px;
    color: #667085;
    font-size: 14px;
    line-height: 1.2;
  }

  .checkout-form input,
  .checkout-form select,
  .checkout-form textarea {
    min-height: 42px !important;
    height: 42px;
    border-radius: 14px !important;
    padding: 8px 12px !important;
    font-size: 16px;
  }

  .checkout-form textarea {
    height: 72px;
    min-height: 72px !important;
  }

  .checkout-form #placeOrderBtn {
    min-height: 46px;
    margin-top: 2px;
  }

  .checkout-summary h3 {
    margin: 0 0 10px;
    font-size: 20px;
  }

  .checkout-summary .list {
    gap: 8px;
  }

  .checkout-summary .order-line.has-thumb {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 9px;
    border-radius: 14px;
  }

  .checkout-summary .cart-thumb,
  .checkout-summary .cart-thumb img,
  .checkout-summary .cart-thumb .bundle-art {
    width: 44px;
    height: 44px;
  }

  .checkout-summary .order-line span {
    font-size: 13px;
    line-height: 1.25;
  }

  .checkout-summary .order-line b {
    font-size: 13px;
  }

  .checkout-summary .total-box {
    margin-top: 10px;
    gap: 8px;
  }
}

/* Admin refinement + performance pass */
body.admin-mode {
  color: #162033;
  background:
    linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,0) 260px),
    #f4f7fb !important;
}

body.admin-mode #app {
  min-height: 100vh;
}

body.admin-mode .page,
body.admin-mode .section,
body.admin-mode .storefront {
  animation-duration: .24s;
}

body.admin-mode .admin-page {
  width: 100%;
  padding: clamp(12px, 2vw, 24px);
}

body.admin-mode .admin-shell {
  width: min(1560px, 100%);
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

body.admin-mode .admin-side {
  top: 14px;
  max-height: calc(100vh - 28px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  border: 1px solid #d9e2ed;
  border-radius: 8px;
  padding: 10px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 14px 32px rgba(15,35,68,.10);
}

body.admin-mode .admin-side:before {
  margin: 4px 6px 10px;
  color: #667085;
  letter-spacing: .08em;
}

body.admin-mode .admin-side .tab {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 9px 11px;
  color: #263750;
  background: transparent;
  font-size: 14px;
  transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}

body.admin-mode .admin-side .tab span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.admin-mode .admin-side .tab b {
  min-width: 26px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #eef4fb;
  color: #174f85;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}

body.admin-mode .admin-side .tab:hover,
body.admin-mode .admin-side .tab:focus,
body.admin-mode .admin-side .tab.active,
body.admin-mode .admin-side .tab[aria-current="page"] {
  color: #fff;
  border-color: rgba(14,35,68,.12);
  background: linear-gradient(135deg, #0e2344, #174f85);
  transform: translateX(2px);
}

body.admin-mode .admin-side .tab:hover b,
body.admin-mode .admin-side .tab:focus b,
body.admin-mode .admin-side .tab.active b,
body.admin-mode .admin-side .tab[aria-current="page"] b {
  background: rgba(255,255,255,.18);
  color: #fff;
}

body.admin-mode .admin-view {
  gap: 16px;
  min-width: 0;
}

body.admin-mode .panel,
body.admin-mode .admin-product-card,
body.admin-mode .portfolio-card,
body.admin-mode .admin-set-card {
  border: 1px solid #dce5f0;
  border-radius: 8px !important;
  background: #fff;
  box-shadow: 0 8px 22px rgba(15,35,68,.06);
}

body.admin-mode .panel {
  padding: clamp(16px, 2vw, 22px);
}

body.admin-mode .admin-welcome.panel {
  display: grid;
  gap: 8px;
  min-height: auto;
  background:
    linear-gradient(135deg, #fff, #f7faff);
}

body.admin-mode .admin-product-hero {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border-color: #cddff3;
  background:
    linear-gradient(135deg, rgba(23,79,133,.10), rgba(255,255,255,.94) 44%),
    #fff;
}

body.admin-mode .admin-welcome h2,
body.admin-mode .admin-chart h2 {
  max-width: 100%;
  margin: 0;
  font-size: clamp(24px, 3vw, 38px);
  letter-spacing: 0;
  line-height: 1.08;
}

body.admin-mode .admin-welcome p:not(.eyebrow) {
  max-width: 840px;
  margin: 0;
  font-size: 15px;
}

body.admin-mode .stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

body.admin-mode .stat {
  min-height: 132px;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 12px 28px rgba(14,35,68,.12);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

body.admin-mode .stat:hover,
body.admin-mode .stat:focus {
  transform: translateY(-2px);
  filter: saturate(1.04);
  box-shadow: 0 16px 34px rgba(14,35,68,.16);
}

body.admin-mode .stat strong {
  margin: 5px 0;
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing: 0;
}

body.admin-mode .stat small {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

body.admin-mode .admin-chart {
  gap: 12px;
}

body.admin-mode .chart-bars {
  height: 210px;
  gap: 9px;
  padding-top: 8px;
}

body.admin-mode .chart-bar span {
  border-radius: 8px 8px 3px 3px;
  animation-duration: .38s;
  will-change: transform;
}

body.admin-mode .admin-order-filter,
body.admin-mode .admin-products-head {
  border-radius: 8px;
}

body.admin-mode .admin-workbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: end;
  gap: 12px;
  position: sticky;
  top: 14px;
  z-index: 8;
}

body.admin-mode .admin-workbar label {
  display: grid;
  gap: 6px;
  color: #475569;
  font-size: 13px;
  font-weight: 800;
}

body.admin-mode .admin-workbar input {
  min-height: 48px;
  border-color: #cbd8e8;
  background: #f8fbff;
  font-size: 15px;
}

body.admin-mode .admin-workbar-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

body.admin-mode .admin-category-browser {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 1px 1px 8px;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}

body.admin-mode .admin-cat-card,
body.admin-mode .trend-option {
  flex: 0 0 auto;
  min-width: 172px;
  border-radius: 8px;
  box-shadow: none;
  scroll-snap-align: start;
}

body.admin-mode .admin-cat-card:hover,
body.admin-mode .admin-cat-card.active,
body.admin-mode .trend-option:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(15,35,68,.08);
}

body.admin-mode .form-grid,
body.admin-mode .checkout-grid,
body.admin-mode .admin-product-form {
  gap: 12px;
}

body.admin-mode .admin-editor {
  overflow: hidden;
  padding: 0;
}

body.admin-mode .admin-editor summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
  border-bottom: 1px solid #e3ebf5;
  background: #f8fbff;
}

body.admin-mode .admin-editor summary::-webkit-details-marker {
  display: none;
}

body.admin-mode .admin-editor summary span {
  color: #162033;
  font-size: 18px;
  font-weight: 900;
}

body.admin-mode .admin-editor summary small {
  color: #64748b;
  font-weight: 800;
  text-align: right;
}

body.admin-mode .admin-editor .admin-product-form {
  padding: clamp(14px, 2vw, 20px);
}

body.admin-mode input,
body.admin-mode select,
body.admin-mode textarea {
  min-height: 42px;
  border-radius: 8px !important;
}

body.admin-mode textarea {
  min-height: 92px;
}

body.admin-mode button,
body.admin-mode .primary,
body.admin-mode .ghost,
body.admin-mode .edit,
body.admin-mode .danger {
  border-radius: 8px;
}

body.admin-mode .admin-product-grid,
body.admin-mode .portfolio-grid,
body.admin-mode .admin-set-grid,
body.admin-mode .list {
  content-visibility: auto;
  contain-intrinsic-size: 1px 900px;
}

body.admin-mode .admin-product-grid {
  grid-template-columns: repeat(auto-fill, minmax(214px, 1fr));
  gap: 12px;
}

body.admin-mode .admin-product-card {
  overflow: hidden;
  contain: layout paint style;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

body.admin-mode .admin-product-card:hover {
  transform: translateY(-2px);
  border-color: #cdd8e6;
  box-shadow: 0 12px 28px rgba(15,35,68,.10);
}

body.admin-mode .admin-product-card-main > img,
body.admin-mode .admin-product-card-main > .admin-product-thumb,
body.admin-mode .admin-product-card-main > .bundle-art {
  height: 150px;
  padding: 12px;
}

body.admin-mode .admin-product-card-main h3 {
  min-height: 38px;
  font-size: 14px;
}

body.admin-mode .admin-product-tags span {
  padding: 4px 7px;
  font-size: 10.5px;
}

body.admin-mode .admin-product-actions {
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 6px;
}

body.admin-mode .admin-product-actions code {
  max-width: 100%;
}

body.admin-mode .cart-line,
body.admin-mode .order-line,
body.admin-mode .admin-row {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(15,35,68,.05);
}

body.admin-mode .cart-line:hover,
body.admin-mode .order-line:hover,
body.admin-mode .admin-row:hover {
  transform: translateY(-1px);
}

body.admin-mode .bundle-choice-list {
  max-height: 300px;
  overscroll-behavior: contain;
}

body.admin-mode .bundle-choice {
  border-radius: 8px;
}

body.admin-mode .toast {
  border-radius: 8px;
}

body.admin-mode .admin-set-head {
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}

body.admin-mode .admin-set-head > img,
body.admin-mode .admin-set-head > .admin-product-thumb,
body.admin-mode .admin-set-head > .bundle-art {
  width: 104px;
  height: 88px;
  min-width: 104px;
  padding: 8px;
}

body.admin-mode .admin-set-head > .bundle-art {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

body.admin-mode .admin-set-head > .bundle-art img {
  min-width: 0;
  min-height: 0;
  padding: 3px;
}

body.admin-mode .admin-set-head > div {
  min-width: 0;
  padding-top: 2px;
}

body.admin-mode .admin-set-head .eyebrow {
  overflow-wrap: anywhere;
  line-height: 1.25;
}

body.admin-mode .admin-set-head h3 {
  display: -webkit-box;
  overflow: hidden;
  margin: 5px 0 4px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.2;
}

@media (max-width: 1180px) {
  body.admin-mode .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  body.admin-mode {
    padding-bottom: 0;
  }

  body.admin-mode .admin-page {
    padding: 0 10px 18px;
  }

  body.admin-mode .admin-shell {
    width: 100%;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  body.admin-mode .admin-mobile-top {
    position: sticky;
    top: 0;
    z-index: 36;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    min-height: 58px;
    margin: 0 -10px 12px;
    padding: 8px 12px max(8px, env(safe-area-inset-top));
    border-radius: 0 0 8px 8px;
    background: linear-gradient(135deg, #0e2344, #174f85);
    box-shadow: 0 10px 26px rgba(14,35,68,.18);
  }

  body.admin-mode .admin-mobile-top strong {
    overflow: hidden;
    color: #fff;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.admin-mode .admin-menu-toggle {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: rgba(255,255,255,.12);
  }

  body.admin-mode .admin-side {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 42;
    width: min(82vw, 310px);
    max-height: 100vh;
    border-radius: 0 8px 8px 0;
    padding: max(14px, env(safe-area-inset-top)) 10px max(14px, env(safe-area-inset-bottom));
    transform: translate3d(-104%, 0, 0);
    transition: transform .22s cubic-bezier(.2,.8,.2,1);
    will-change: transform;
  }

  body.admin-mode .admin-shell.nav-open .admin-side {
    transform: translate3d(0, 0, 0);
  }

  body.admin-mode .admin-side-backdrop {
    position: fixed;
    inset: 0;
    z-index: 41;
    display: block;
    opacity: 0;
    pointer-events: none;
    background: rgba(7,18,35,.42);
    transition: opacity .18s ease;
  }

  body.admin-mode .admin-shell.nav-open .admin-side-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  body.admin-mode .admin-side .tab {
    min-height: 46px;
    font-size: 15px;
  }

  body.admin-mode .admin-view {
    gap: 12px;
  }

  body.admin-mode .admin-product-hero,
  body.admin-mode .admin-workbar {
    grid-template-columns: 1fr;
    position: static;
  }

  body.admin-mode .admin-workbar-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  body.admin-mode .admin-product-form,
  body.admin-mode .form-grid,
  body.admin-mode .checkout-grid,
  body.admin-mode .bundle-filter-row,
  body.admin-mode .admin-laser-grid {
    grid-template-columns: 1fr;
  }

  body.admin-mode .admin-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body.admin-mode .admin-product-card-main > img,
  body.admin-mode .admin-product-card-main > .admin-product-thumb,
  body.admin-mode .admin-product-card-main > .bundle-art {
    height: 128px;
  }

  body.admin-mode .admin-product-card-main > div {
    padding: 11px;
  }

  body.admin-mode .admin-product-actions {
    grid-template-columns: 1fr;
  }

  body.admin-mode .admin-product-actions code {
    display: none;
  }

  body.admin-mode .admin-order-filter,
  body.admin-mode .admin-products-head,
  body.admin-mode .order-detail-grid {
    grid-template-columns: 1fr;
  }

  body.admin-mode .admin-products-head {
    align-items: stretch;
  }

  body.admin-mode .admin-editor summary {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  body.admin-mode .admin-editor summary small {
    text-align: left;
  }

  body.admin-mode .chart-bars {
    height: 180px;
  }
}

@media (max-width: 560px) {
  body.admin-mode .stats {
    grid-template-columns: 1fr;
  }

  body.admin-mode .admin-welcome h2,
  body.admin-mode .admin-chart h2 {
    font-size: 26px;
  }

  body.admin-mode .admin-product-grid {
    grid-template-columns: 1fr;
  }

  body.admin-mode .admin-product-card-main {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr);
  }

  body.admin-mode .admin-product-card-main > img,
  body.admin-mode .admin-product-card-main > .admin-product-thumb,
  body.admin-mode .admin-product-card-main > .bundle-art {
    width: 108px;
    height: 100%;
    min-height: 136px;
    border-right: 1px solid #eef2f7;
    border-bottom: 0;
  }

  body.admin-mode .admin-product-card-main h3 {
    min-height: 0;
  }

  body.admin-mode .bundle-choice-list,
  body.admin-mode .admin-set-grid {
    grid-template-columns: 1fr;
  }

  body.admin-mode .category-create,
  body.admin-mode .category-rename {
    display: grid;
    grid-template-columns: 1fr;
  }

  body.admin-mode .category-rename input,
  body.admin-mode .category-parent-select {
    min-width: 0;
    width: 100%;
  }
}

/* Keep the desktop category list steady while closed branches stay hidden. */
@media (min-width: 901px) {
  .shop-sidebar {
    position: static !important;
    top: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .shop-sidebar .side-category {
    transition: background .16s ease, color .16s ease !important;
    animation: none !important;
  }

  .shop-sidebar .side-category:hover,
  .shop-sidebar .side-category.active {
    padding-left: 18px !important;
  }

  .shop-sidebar .side-category.child,
  .shop-sidebar .side-category.child:hover,
  .shop-sidebar .side-category.child.active {
    padding-left: 34px !important;
  }

  .shop-sidebar .side-category.child.has-children,
  .shop-sidebar .side-category.child.has-children:hover,
  .shop-sidebar .side-category.child.has-children.active {
    padding-left: 24px !important;
  }

  .shop-sidebar .side-category.child.deep,
  .shop-sidebar .side-category.child.deep:hover,
  .shop-sidebar .side-category.child.deep.active {
    padding-left: 48px !important;
  }
}