/* HappyOnam 3.0 — a multi-seller marketplace with an app-like public shell. */
:root {
  --relay: #ff5c2b;
  --relay-dark: #e74818;
  --indigo: #17204a;
  --indigo-soft: #273263;
  --pista: #cfff68;
  --mist: #f5f7fb;
  --sky: #e9efff;
  --ceramic: #ffffff;
  --graphite: #555b6e;
  --ink: var(--indigo);
  --muted: #70758a;
  --card: var(--ceramic);
  --border: #e2e6f0;
  --bg: var(--mist);
  --forest: var(--indigo);
  --forest-dark: #101737;
  --leaf: var(--relay);
  --sage: var(--sky);
  --sage-light: #f0f3fb;
  --paper: var(--mist);
  --cream: #f0f3fb;
  --peach: #ffb8a1;
  --rose: var(--relay);
  --pink: var(--relay);
  --pink-dark: var(--relay-dark);
  --green: #18845e;
  --display: "Bricolage Grotesque", "Arial Black", sans-serif;
  --sans: "Plus Jakarta Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --shadow-sm: 0 8px 24px rgba(23, 32, 74, .07);
  --shadow-md: 0 18px 48px rgba(23, 32, 74, .11);
  --shadow-lg: 0 28px 70px rgba(23, 32, 74, .16);
}

html { scroll-padding-top: 9.5rem; }
body.storefront-body {
  min-width: 0;
  background:
    linear-gradient(rgba(23,32,74,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23,32,74,.022) 1px, transparent 1px),
    var(--mist);
  background-size: 38px 38px;
  color: var(--ink);
  font-family: var(--sans);
  text-rendering: optimizeLegibility;
}

.storefront-body h1,
.storefront-body h2,
.storefront-body h3 {
  font-family: var(--display);
  font-variation-settings: "wdth" 88;
  font-weight: 750;
  letter-spacing: -.055em;
}

.page-shell,
.storefront-body .container {
  width: min(100%, 1420px);
  padding-inline: clamp(1rem, 3.8vw, 3.5rem);
}

.storefront-body :focus-visible {
  outline: 3px solid var(--pista);
  outline-offset: 3px;
}

.store-eyebrow {
  margin: 0;
  color: var(--relay);
  font-family: var(--mono);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.store-btn {
  min-height: 3.25rem;
  padding: .78rem 1.25rem;
  border: 1px solid transparent;
  border-radius: .85rem;
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: -.01em;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.store-btn:hover { transform: translateY(-2px); }
.store-btn-primary {
  background: var(--relay);
  color: #fff;
  box-shadow: 0 12px 26px rgba(255,92,43,.22);
}
.store-btn-primary:hover { background: var(--relay-dark); box-shadow: 0 15px 32px rgba(255,92,43,.28); }
.store-btn-secondary { border-color: var(--border); background: #fff; color: var(--indigo); }
.store-btn-secondary:hover { border-color: #cbd2e3; background: var(--sky); }
.text-link {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--indigo);
  font-size: .73rem;
  font-weight: 800;
}
.text-link span { color: var(--relay); transition: transform .2s ease; }
.text-link:hover span { transform: translateX(4px); }

/* Marketplace shell */
.announcement-bar { background: var(--indigo); color: #fff; }
.announcement-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: min(100%, 1480px);
  min-height: 2.25rem;
  margin: auto;
  padding: .35rem clamp(1rem,3.8vw,3.5rem);
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .04em;
}
.announcement-inner p { display: block; margin: 0; padding: 0; color: #d9ddf0; font-size: .58rem; text-align: center; }
.announcement-inner p span { color: #66709b; }
.announcement-inner > a { justify-self: end; color: #fff; }
.announcement-inner > a b { margin-left: .3rem; color: var(--pista); }
.market-status { display: inline-flex; align-items: center; gap: .45rem; text-transform: uppercase; }
.market-status i {
  width: .48rem;
  height: .48rem;
  border-radius: 50%;
  background: var(--pista);
  box-shadow: 0 0 0 .23rem rgba(207,255,104,.14);
  animation: marketPulse 2.4s ease-in-out infinite;
}
@keyframes marketPulse { 50% { box-shadow: 0 0 0 .4rem rgba(207,255,104,0); } }

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 0;
  background: rgba(255,255,255,.94);
  box-shadow: 0 12px 35px rgba(23,32,74,.07);
  backdrop-filter: blur(20px);
}
.site-header-inner {
  display: grid;
  grid-template-columns: auto minmax(20rem, 1fr) auto;
  align-items: center;
  gap: clamp(1.5rem,4vw,4rem);
  width: min(100%,1480px);
  min-height: 5.15rem;
  margin: auto;
  padding-inline: clamp(1rem,3.8vw,3.5rem);
}
.logo { display: inline-flex; align-items: center; gap: .72rem; min-width: max-content; }
.logo-mark {
  position: relative;
  display: grid;
  width: 2.65rem;
  height: 2.65rem;
  place-items: center;
  overflow: hidden;
  border-radius: .78rem;
  background: var(--indigo);
  color: #fff;
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 800;
  box-shadow: 0 9px 20px rgba(23,32,74,.18);
}
.logo-mark::before {
  position: absolute;
  top: -.55rem;
  right: -.55rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: var(--relay);
  content: "";
}
.logo-mark i {
  position: absolute;
  right: .24rem;
  bottom: .24rem;
  width: .38rem;
  height: .38rem;
  border-radius: .12rem;
  background: var(--pista);
}
.logo > span:last-child { display: flex; flex-direction: column; line-height: 1; }
.logo strong { font-family: var(--display); font-size: 1.27rem; font-weight: 800; letter-spacing: -.055em; }
.logo small { margin-top: .27rem; color: var(--muted); font-family: var(--mono); font-size: .43rem; font-weight: 600; letter-spacing: .035em; text-transform: uppercase; }

.header-search {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  width: min(100%, 46rem);
  justify-self: center;
  overflow: hidden;
  border: 1px solid #dfe3ee;
  border-radius: 1rem;
  background: var(--mist);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.header-search:focus-within { border-color: #aeb8d2; background: #fff; box-shadow: 0 0 0 4px rgba(23,32,74,.06); }
.header-search svg {
  width: 1.15rem;
  margin-left: .9rem;
  fill: none;
  stroke: var(--indigo);
  stroke-linecap: round;
  stroke-width: 1.8;
}
.header-search input {
  width: 100%;
  min-height: 3rem;
  padding: .65rem .75rem;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--indigo);
  font-size: .76rem;
}
.header-search input::placeholder { color: #858a9d; }
.header-search button {
  min-height: 2.25rem;
  margin-right: .38rem;
  padding: .45rem .75rem;
  border: 0;
  border-radius: .65rem;
  background: var(--indigo);
  color: #fff;
  font-size: .65rem;
  font-weight: 800;
}

.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: .18rem; }
.header-icon-link,
.cart-btn,
.account-menu summary {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  min-height: 2.8rem;
  padding: .48rem .65rem;
  border: 0;
  border-radius: .78rem;
  background: transparent;
  color: var(--indigo);
  font-size: .65rem;
  font-weight: 800;
  list-style: none;
}
.header-icon-link svg,
.cart-btn svg,
.account-menu svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.header-icon-link:hover,
.account-menu summary:hover { background: var(--sky); }
.cart-btn { background: var(--relay); color: #fff; box-shadow: 0 8px 18px rgba(255,92,43,.18); }
.cart-btn:hover { background: var(--relay-dark); }
.badge {
  display: grid;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 .25rem;
  place-items: center;
  border-radius: .35rem;
  background: #fff;
  color: var(--relay);
  font-family: var(--mono);
  font-size: .55rem;
}
.account-menu { position: relative; }
.account-menu summary::-webkit-details-marker { display: none; }
.account-popover {
  position: absolute;
  top: calc(100% + .75rem);
  right: 0;
  display: grid;
  width: 14rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: #fff;
  box-shadow: var(--shadow-md);
}
.account-popover p { display: grid; margin: 0; padding: 1rem; border-bottom: 1px solid var(--border); }
.account-popover p span { color: var(--muted); font-family: var(--mono); font-size: .55rem; }
.account-popover p strong { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; }
.account-popover a { padding: .7rem 1rem; font-size: .7rem; }
.account-popover a:hover { background: var(--sky); }

.category-nav { border-top: 1px solid #edf0f6; background: #fff; }
.category-nav > div {
  display: flex;
  align-items: center;
  gap: .4rem;
  width: min(100%,1480px);
  margin: auto;
  padding: .58rem clamp(1rem,3.8vw,3.5rem);
  overflow-x: auto;
  scrollbar-width: none;
}
.category-nav > div::-webkit-scrollbar { display: none; }
.dock-label {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  margin-right: .35rem;
  padding-right: .8rem;
  border-right: 1px solid var(--border);
  color: var(--indigo);
  font-family: var(--mono);
  font-size: .56rem;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}
.dock-label i { width: .45rem; height: .45rem; border-radius: .12rem; background: var(--relay); }
.category-nav a {
  flex: 0 0 auto;
  padding: .4rem .7rem;
  border-radius: .55rem;
  color: #5d6276;
  font-size: .63rem;
  font-weight: 700;
  transition: background .16s ease, color .16s ease;
}
.category-nav a:hover { background: var(--sky); color: var(--indigo); }
.category-nav .dock-all { background: var(--indigo); color: #fff; }
.category-nav .category-sale { margin-left: auto; background: var(--pista); color: var(--indigo); }

/* The hero is the marketplace thesis */
.market-hero {
  display: grid;
  grid-template-columns: minmax(0,.95fr) minmax(32rem,1.05fr);
  align-items: stretch;
  gap: 1rem;
  min-height: 38rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.market-hero-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: clamp(2rem,4.7vw,4.7rem);
  border: 1px solid var(--border);
  border-radius: 1.35rem;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.market-hero-copy::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: .42rem;
  background: linear-gradient(var(--relay) 0 62%, var(--pista) 62%);
  content: "";
}
.hero-chip {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  padding: .4rem .55rem .4rem .42rem;
  border-radius: .62rem;
  background: var(--sky);
  color: var(--indigo);
  font-family: var(--mono);
  font-size: .56rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.hero-chip span { padding: .2rem .35rem; border-radius: .32rem; background: var(--relay); color: #fff; }
.market-hero h1 {
  max-width: 8.5em;
  margin: 1.25rem 0 1.15rem;
  color: var(--indigo);
  font-size: clamp(3.5rem,5.8vw,6.6rem);
  line-height: .88;
}
.market-hero h1 em { color: var(--relay); font-style: normal; }
.market-hero .hero-lede {
  max-width: 37rem;
  margin: 0;
  color: var(--graphite);
  font-family: var(--sans);
  font-size: .94rem;
  line-height: 1.7;
}
.hero-actions { display: flex; align-items: center; gap: 1.2rem; margin-top: 1.6rem; }
.market-hero .store-btn-primary { background: var(--indigo); box-shadow: 0 12px 28px rgba(23,32,74,.2); }
.market-hero .store-btn-primary:hover { background: var(--indigo-soft); }
.hero-proof {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: .75rem;
  margin-top: 2.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
}
.hero-proof div { display: grid; }
.hero-proof strong { color: var(--indigo); font-size: .66rem; }
.hero-proof span { color: var(--muted); font-family: var(--mono); font-size: .48rem; }

.market-hero-visual {
  position: relative;
  min-height: 38rem;
  overflow: hidden;
  border-radius: 1.35rem;
  background:
    radial-gradient(circle at 78% 20%, rgba(207,255,104,.13), transparent 12rem),
    var(--indigo);
  box-shadow: var(--shadow-md);
}
.market-hero-visual::before {
  position: absolute;
  inset: 4rem 2rem 3.5rem;
  border: 1px dashed rgba(255,255,255,.15);
  border-radius: 1.1rem;
  content: "";
}
.hero-board-head {
  position: absolute;
  right: 1.35rem;
  left: 1.35rem;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  font-family: var(--mono);
  font-size: .54rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hero-board-head { top: 1.3rem; }
.hero-board-head b { color: var(--pista); font-weight: 600; }

.hero-product { position: absolute; z-index: 2; display: block; overflow: hidden; background: #e5e8f0; box-shadow: 0 20px 45px rgba(6,10,34,.34); }
.hero-product img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.hero-product:hover img { transform: scale(1.045); }
.hero-product-main { top: 4.6rem; right: 8%; width: 55%; height: 28.5rem; border: .4rem solid #fff; border-radius: 1.25rem; transform: rotate(1.5deg); }
.hero-product-side { bottom: 4rem; left: 6%; width: 27%; height: 16rem; border: .36rem solid #fff; border-radius: 1rem; transform: rotate(-4deg); }
.hero-product-float { top: 5.6rem; left: 8%; width: 22%; height: 10rem; border: .3rem solid #fff; border-radius: .9rem; transform: rotate(4deg); }
.hero-product-float span {
  position: absolute;
  right: .4rem;
  bottom: .4rem;
  left: .4rem;
  overflow: hidden;
  padding: .3rem .4rem;
  border-radius: .35rem;
  background: rgba(255,255,255,.9);
  color: var(--indigo);
  font-family: var(--mono);
  font-size: .48rem;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.hero-product-caption {
  position: absolute;
  right: .7rem;
  bottom: .7rem;
  left: .7rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .12rem .5rem;
  padding: .7rem .75rem;
  border-radius: .7rem;
  background: rgba(255,255,255,.94);
  color: var(--indigo);
  backdrop-filter: blur(12px);
}
.hero-product-caption small { grid-column: 1/-1; color: var(--relay); font-family: var(--mono); font-size: .47rem; text-transform: uppercase; }
.hero-product-caption strong { overflow: hidden; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.hero-product-caption b { font-size: .72rem; }
.hero-sticker {
  position: absolute;
  top: 14.6rem;
  left: 4%;
  z-index: 3;
  display: grid;
  width: 6.3rem;
  height: 6.3rem;
  place-items: center;
  border-radius: 1.15rem;
  background: var(--pista);
  color: var(--indigo);
  font-family: var(--mono);
  font-size: .55rem;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-7deg);
  box-shadow: 0 15px 30px rgba(0,0,0,.18);
}
.hero-sticker strong { font-family: var(--display); font-size: 1.8rem; letter-spacing: -.08em; }

.perks-strip { border: 0; background: #fff; box-shadow: var(--shadow-sm); }
.perks-strip > div { display: grid; grid-template-columns: repeat(4,1fr); padding-top: .95rem; padding-bottom: .95rem; }
.perks-strip span { display: flex; justify-content: center; gap: .55rem; border-right: 1px solid var(--border); color: #5b6075; font-size: .64rem; font-weight: 700; }
.perks-strip span:last-child { border: 0; }
.perks-strip b { color: var(--relay); }

/* Category aisles */
.category-section { padding-top: 5.7rem; padding-bottom: 5rem; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1.65rem; }
.section-heading h2,
.section-intro h2 { margin: .4rem 0 0; font-size: clamp(2.2rem,4vw,4rem); line-height: .98; }
.section-heading > p { max-width: 25rem; margin: 0; color: var(--muted); font-size: .76rem; }
.market-category-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .8rem; }
.market-category-card {
  position: relative;
  display: grid;
  min-height: 18rem;
  padding: .7rem;
  overflow: hidden;
  border: 1px solid rgba(23,32,74,.06);
  border-radius: 1.15rem;
  transition: transform .22s ease, box-shadow .22s ease;
}
.market-category-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.market-category-1 { background: #e5edff; }
.market-category-2 { background: #ffe9e1; }
.market-category-3 { background: #e6f8ef; }
.market-category-4 { background: #f1ebff; }
.market-category-5 { background: #f7f2d7; }
.category-kicker {
  position: absolute;
  top: 1.15rem;
  left: 1.15rem;
  z-index: 2;
  padding: .28rem .4rem;
  border-radius: .35rem;
  background: rgba(255,255,255,.86);
  color: var(--indigo);
  font-family: var(--mono);
  font-size: .48rem;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
}
.category-image {
  display: block;
  width: 100%;
  height: 12.5rem;
  overflow: hidden;
  border-radius: .8rem;
  background: #fff;
}
.category-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.market-category-card:hover img { transform: scale(1.04); }
.category-placeholder { display: grid; place-items: center; color: var(--indigo); font-family: var(--display); font-size: 3rem; }
.category-card-foot { display: flex; align-items: end; justify-content: space-between; gap: .5rem; padding: .8rem .35rem .25rem; }
.category-card-foot > span { display: grid; min-width: 0; }
.category-card-foot strong { overflow: hidden; font-family: var(--display); font-size: 1.02rem; letter-spacing: -.035em; text-overflow: ellipsis; white-space: nowrap; }
.category-card-foot small { color: var(--graphite); font-size: .56rem; }
.category-card-foot > b { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: .6rem; background: #fff; color: var(--relay); }

/* Multi-seller campaign */
.campaign { display: grid; grid-template-columns: .9fr 1.1fr; min-height: 26rem; padding-inline: clamp(1rem,3.8vw,3.5rem); }
.campaign-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(2rem,5vw,4.7rem);
  border-radius: 1.25rem 0 0 1.25rem;
  background: var(--indigo);
  color: #fff;
}
.campaign-copy .store-eyebrow { color: var(--pista); }
.campaign-copy h2 { margin: .55rem 0 1rem; font-size: clamp(2.8rem,5vw,5.2rem); line-height: .9; }
.campaign-copy p:not(.store-eyebrow) { max-width: 28rem; margin: 0; color: #b9c0df; font-size: .78rem; line-height: 1.65; }
.campaign-btn { margin-top: 1.5rem; background: #fff; color: var(--indigo); }
.campaign-btn:hover { background: var(--pista); }
.campaign-art { position: relative; overflow: hidden; border-radius: 0 1.25rem 1.25rem 0; background: var(--pista); }
.campaign-word {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  color: var(--indigo);
  font-family: var(--display);
  font-size: clamp(6rem,11vw,11rem);
  font-weight: 800;
  letter-spacing: -.11em;
  line-height: .63;
  transform: translate(-50%,-50%) rotate(-5deg);
}
.campaign-label {
  position: absolute;
  z-index: 2;
  padding: .5rem .7rem;
  border: 2px solid var(--indigo);
  border-radius: .55rem;
  background: #fff;
  color: var(--indigo);
  font-family: var(--mono);
  font-size: .58rem;
  font-weight: 600;
  text-transform: uppercase;
  box-shadow: .35rem .35rem 0 var(--indigo);
}
.label-one { top: 14%; left: 10%; transform: rotate(-6deg); }
.label-two { top: 18%; right: 9%; transform: rotate(7deg); }
.label-three { right: 14%; bottom: 12%; transform: rotate(-4deg); }
.shape { position: absolute; display: block; }
.shape-one { right: -5rem; bottom: -7rem; width: 18rem; height: 18rem; border: 3rem solid rgba(23,32,74,.1); border-radius: 50%; }
.shape-two { top: -4rem; left: -3rem; width: 10rem; height: 10rem; border-radius: 2rem; background: rgba(255,92,43,.55); transform: rotate(24deg); }

/* Catalogue */
.collection-section { padding-top: 6rem; padding-bottom: 6rem; }
.collection-intro { padding-bottom: 1.3rem; border-bottom: 1px solid var(--border); }
.shop-filter {
  display: grid;
  grid-template-columns: minmax(18rem,1.5fr) minmax(10rem,.55fr) auto auto;
  gap: .6rem;
  margin: 1.35rem 0 .8rem;
}
.shop-filter input,
.shop-filter select,
.price-filter summary {
  width: 100%;
  min-height: 3.15rem;
  padding: .65rem .8rem;
  border: 1px solid var(--border);
  border-radius: .8rem;
  background: #fff;
  color: var(--indigo);
  font-size: .73rem;
  box-shadow: 0 5px 15px rgba(23,32,74,.025);
}
.shop-search { position: relative; }
.shop-search svg { position: absolute; top: 50%; left: .9rem; width: 1rem; fill: none; stroke: var(--indigo); stroke-width: 1.8; transform: translateY(-50%); }
.shop-search input { padding-left: 2.5rem; }
.price-filter { position: relative; }
.price-filter summary { display: flex; align-items: center; width: 7rem; cursor: pointer; list-style: none; }
.price-filter summary::-webkit-details-marker { display: none; }
.price-filter > div {
  position: absolute;
  top: calc(100% + .45rem);
  right: 0;
  z-index: 8;
  display: grid;
  grid-template-columns: repeat(2,7rem);
  gap: .55rem;
  padding: .85rem;
  border: 1px solid var(--border);
  border-radius: .9rem;
  background: #fff;
  box-shadow: var(--shadow-md);
}
.price-filter label { display: grid; gap: .25rem; color: var(--muted); font-size: .6rem; }
.filter-reset { align-self: center; padding: .55rem; color: var(--muted); font-size: .65rem; font-weight: 700; }
.quick-occasions { display: flex; gap: .4rem; margin-bottom: 2rem; overflow-x: auto; scrollbar-width: none; }
.quick-occasions::-webkit-scrollbar { display: none; }
.quick-occasions a {
  flex: 0 0 auto;
  padding: .5rem .75rem;
  border: 1px solid var(--border);
  border-radius: .62rem;
  background: #fff;
  color: #60657a;
  font-size: .63rem;
  font-weight: 700;
}
.quick-occasions a:hover,
.quick-occasions a[aria-current="page"] { border-color: var(--indigo); background: var(--indigo); color: #fff; }
.collection-count { display: flex; justify-content: space-between; margin-bottom: .8rem; color: var(--muted); font-family: var(--mono); font-size: .55rem; text-transform: uppercase; }

.product-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1rem; }
.product-grid > .product-card:nth-last-child(2):nth-child(4n + 1) { grid-column: auto; }
.product-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 1.05rem;
  background: #fff;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.product-card:hover { border-color: #cfd5e4; transform: translateY(-5px); box-shadow: var(--shadow-md); }
.product-card-media { position: relative; overflow: hidden; border-radius: 0; background: #e9ecf3; }
.product-image { display: block; aspect-ratio: 4/5; overflow: hidden; }
.product-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.product-card:hover .product-image img { transform: scale(1.045); }
.product-ribbon {
  position: absolute;
  top: .65rem;
  left: .65rem;
  padding: .3rem .48rem;
  border: 0;
  border-radius: .42rem;
  background: #fff1dd;
  color: #8b4c00;
  font-family: var(--mono);
  font-size: .48rem;
  font-weight: 600;
  text-transform: uppercase;
  box-shadow: 0 5px 15px rgba(23,32,74,.1);
}
.new-ribbon { background: var(--pista); color: var(--indigo); }
.wish-btn {
  position: absolute;
  top: .65rem;
  right: .65rem;
  display: grid;
  width: 2.35rem;
  height: 2.35rem;
  min-height: 0;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: .7rem;
  background: rgba(255,255,255,.94);
  color: var(--indigo);
  box-shadow: 0 7px 20px rgba(23,32,74,.12);
  backdrop-filter: blur(8px);
}
.wish-btn svg { width: 1rem; fill: transparent; stroke: currentColor; stroke-width: 1.8; }
.wish-btn.saved { background: var(--relay); color: #fff; }
.wish-btn.saved svg { fill: currentColor; }
.product-media-actions {
  position: absolute;
  right: .55rem;
  bottom: .55rem;
  left: .55rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .45rem;
  pointer-events: none;
}
.product-media-actions .availability,
.product-media-actions .sold-out,
.product-media-actions .text-link {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  min-height: 2.15rem;
  padding: .42rem .6rem;
  border: 0;
  border-radius: .6rem;
  background: rgba(255,255,255,.94);
  color: var(--indigo);
  font-size: .55rem;
  box-shadow: 0 7px 18px rgba(23,32,74,.13);
  backdrop-filter: blur(8px);
  pointer-events: auto;
}
.availability i { width: .4rem; height: .4rem; border-radius: 50%; background: #1b9b6c; }
.quick-add {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 2.15rem;
  padding: .3rem .3rem .3rem .7rem;
  border: 0;
  border-radius: .65rem;
  background: var(--indigo);
  color: #fff;
  box-shadow: 0 8px 20px rgba(23,32,74,.25);
  font-size: .58rem;
  font-weight: 800;
  pointer-events: auto;
}
.quick-add:hover { background: var(--relay); }
.quick-add b { display: grid; width: 1.5rem; height: 1.5rem; place-items: center; border-radius: .42rem; background: var(--pista); color: var(--indigo); font-size: .9rem; }
.product-body { padding: .9rem .85rem 1rem; }
.product-kicker { display: flex; gap: .3rem; margin: 0 0 .38rem; color: var(--relay); font-family: var(--mono); font-size: .5rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.product-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: .7rem; }
.product-title-row h3 { margin: 0; font-family: var(--sans); font-size: .78rem; font-weight: 750; letter-spacing: -.02em; line-height: 1.3; }
.price { flex: 0 0 auto; color: var(--indigo); font-family: var(--sans); font-size: .7rem; font-weight: 800; }
.desc { min-height: 1.4em; margin: .35rem 0 0; overflow: hidden; color: var(--muted); font-size: .61rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.product-seller {
  margin: .48rem 0 0;
  overflow: hidden;
  color: #72778a;
  font-size: .55rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-seller span { margin-right: .25rem; color: var(--indigo); font-family: var(--mono); font-size: .46rem; text-transform: uppercase; }

.store-empty {
  padding: 5rem 1rem;
  border: 1px dashed #c8cfdf;
  border-radius: 1.1rem;
  background: #fff;
  text-align: center;
}
.empty-flower,
.auth-flower {
  display: grid;
  width: 3.3rem;
  height: 3.3rem;
  margin: 0 auto 1rem;
  place-items: center;
  border-radius: .9rem;
  background: var(--pista);
  color: var(--indigo);
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 800;
}
.store-empty h3 { margin: .35rem 0; font-size: 1.8rem; }
.store-empty > p:not(.store-eyebrow) { margin: 0 auto 1.2rem; color: var(--muted); font-size: .75rem; }

.promise-band { background: var(--indigo); color: #fff; }
.promise-band > div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2rem; padding-top: 2.35rem; padding-bottom: 2.35rem; }
.promise-band div > div { display: grid; grid-template-columns: 2.5rem 1fr; gap: .8rem; align-items: center; }
.promise-band span { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; border: 1px solid #4b557e; border-radius: .7rem; color: var(--pista); font-family: var(--display); font-size: 1rem; }
.promise-band p { display: grid; margin: 0; color: #9fa8cb; font-size: .63rem; }
.promise-band strong { color: #fff; font-size: .74rem; }

/* Product page and review surfaces */
.product-page { padding-top: 1.5rem; }
.breadcrumbs { display: flex; gap: .5rem; margin-bottom: 1.2rem; color: var(--muted); font-family: var(--mono); font-size: .53rem; }
.breadcrumbs a:hover { color: var(--relay); }
.product-detail { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(25rem,.8fr); gap: clamp(2rem,5vw,5rem); align-items: start; }
.main-image-wrap { position: relative; overflow: hidden; border-radius: 1.2rem; background: #e8ebf2; box-shadow: var(--shadow-sm); }
.main-image-wrap > img { display: block; width: 100%; aspect-ratio: 1/1.06; object-fit: cover; }
.image-note { position: absolute; right: .9rem; bottom: .9rem; padding: .42rem .6rem; border-radius: .55rem; background: rgba(255,255,255,.92); color: var(--indigo); font-family: var(--mono); font-size: .5rem; font-weight: 600; text-transform: uppercase; }
.thumbs { display: flex; gap: .6rem; margin-top: .75rem; }
.thumbs button { width: 4.2rem; height: 4.2rem; min-height: 0; padding: .2rem; border: 1px solid transparent; border-radius: .65rem; background: transparent; }
.thumbs button.active { border-color: var(--relay); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; border-radius: .45rem; }
.detail-info { position: sticky; top: 10rem; padding-top: .8rem; }
.detail-topline { display: flex; align-items: center; justify-content: space-between; }
.detail-topline .wish-btn { position: static; }
.detail-info h1 { margin: .55rem 0 .65rem; font-size: clamp(2.7rem,4.7vw,4.9rem); line-height: .95; }
.detail-rating { display: flex; align-items: center; gap: .55rem; font-size: .65rem; }
.stars { color: #f2a000; letter-spacing: .04em; }
.detail-rating a { color: var(--muted); text-decoration: underline; text-underline-offset: .2rem; }
.price.big { display: block; margin: 1.2rem 0 .85rem; font-family: var(--display); font-size: 1.75rem; font-weight: 750; }
.detail-description { color: var(--graphite); font-family: var(--sans); font-size: .86rem; line-height: 1.65; }
.detail-tags { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 1.35rem 0; border-block: 1px solid var(--border); }
.detail-tags span { display: grid; padding: .8rem .5rem; border-right: 1px solid var(--border); }
.detail-tags span:last-child { border: 0; }
.detail-tags small { color: var(--muted); font-family: var(--mono); font-size: .48rem; text-transform: uppercase; }
.detail-tags strong { overflow: hidden; font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }
.purchase-panel { display: grid; gap: .9rem; padding: 1rem; border: 1px solid #d8dfef; border-radius: .95rem; background: var(--sky); }
.purchase-panel > div { display: grid; }
.purchase-panel small { margin-top: .2rem; color: var(--muted); font-size: .6rem; }
.purchase-panel .store-btn { border-radius: .75rem; }
.purchase-panel.sold { background: #f6ecea; }
.detail-assurances { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .6rem; margin: 1.2rem 0; }
.detail-assurances div { display: grid; grid-template-columns: auto 1fr; gap: .45rem; align-items: start; }
.detail-assurances div > span { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border-radius: .55rem; background: var(--pista); color: var(--indigo); font-size: .68rem; }
.detail-assurances p { display: grid; margin: 0; color: var(--muted); font-size: .54rem; }
.detail-assurances strong { color: var(--indigo); font-size: .61rem; }
.care-details { border-top: 1px solid var(--border); }
.care-details summary { display: flex; justify-content: space-between; padding: .9rem 0; cursor: pointer; font-size: .7rem; font-weight: 750; list-style: none; }
.care-details summary::-webkit-details-marker { display: none; }
.care-details p { margin: 0 0 1rem; color: var(--muted); font-size: .72rem; }
.reviews-section { display: grid; grid-template-columns: .7fr 1.3fr; gap: 3rem; margin-top: 6rem; padding: 4rem 0; border-top: 1px solid var(--border); }
.reviews-intro h2 { margin: .4rem 0; font-size: 2.5rem; line-height: 1; }
.reviews-intro > p:last-child { color: var(--muted); font-size: .76rem; }
#reviews-content { grid-column: 2; grid-row: 1; }
.reviews-layout { display: grid; gap: 1rem; }
.review-form,
.review-login-card,
.review-card { padding: 1.15rem; border: 1px solid var(--border); border-radius: .95rem; background: #fff; box-shadow: var(--shadow-sm); }
.review-form h3,
.review-login-card h3 { margin: .25rem 0 .8rem; font-size: 1.4rem; }
.review-form label { display: block; margin: .65rem 0 .3rem; font-size: .66rem; font-weight: 700; }
.review-form select,
.review-form textarea { width: 100%; padding: .65rem; border: 1px solid var(--border); border-radius: .7rem; background: #fff; }
.review-form .store-btn { margin-top: .8rem; }
.review-card-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem; }
.review-avatar { display: grid; width: 2.2rem; height: 2.2rem; place-items: center; border-radius: .65rem; background: var(--sky); color: var(--indigo); font-family: var(--display); }
.review-card-head div:nth-child(2) { display: grid; }
.review-card-head strong { font-size: .7rem; }
.review-card-head div:nth-child(2) span { color: var(--muted); font-size: .53rem; }
.review-card > p { margin: .8rem 0 0; color: var(--graphite); font-family: var(--sans); font-size: .8rem; }
.review-empty { padding: 2rem; text-align: center; }
.review-empty > span { color: var(--relay); }
.review-empty h3 { margin: .4rem 0; }
.review-empty p { color: var(--muted); font-size: .7rem; }
.related-section { padding-bottom: 5rem; }

/* Cart, checkout and account app surfaces */
.simple-page-head { padding-top: 4rem; padding-bottom: 2.3rem; }
.simple-page-head h1,
.checkout-head h1,
.confirmation-page h1 { letter-spacing: -.07em; }
.simple-page-head h1 { margin: .35rem 0 .5rem; font-size: clamp(3rem,5vw,5.2rem); line-height: .92; }
.simple-page-head > p:last-child { color: var(--muted); font-family: var(--sans); font-size: .86rem; }
.cart-page { padding-bottom: 4rem; }
.cart-layout { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(20rem,.55fr); align-items: start; gap: 1.5rem; }
.cart-line-list { display: grid; overflow: hidden; border: 1px solid var(--border); border-radius: 1rem; background: #fff; }
.cart-line { display: grid; grid-template-columns: 7rem 1fr auto auto; align-items: center; gap: 1rem; padding: 1rem; border-bottom: 1px solid var(--border); }
.cart-line > a img { width: 7rem; height: 8rem; object-fit: cover; border-radius: .8rem; }
.cart-line-copy { min-width: 0; }
.cart-line-copy h3 { margin: .2rem 0; font-size: 1rem; }
.cart-line-copy > p:not(.product-kicker) { overflow: hidden; color: var(--muted); font-size: .66rem; text-overflow: ellipsis; white-space: nowrap; }
.cart-line-copy > span { color: var(--muted); font-size: .58rem; }
.cart-quantity { display: grid; gap: .25rem; color: var(--muted); font-family: var(--mono); font-size: .5rem; text-transform: uppercase; }
.cart-quantity input { width: 4rem; padding: .45rem; border: 1px solid var(--border); border-radius: .6rem; background: var(--mist); }
.cart-line-total { min-width: 5rem; text-align: right; font-size: .76rem; }
.cart-continue { margin: 1rem; }
.cart-summary-card,
.checkout-panel,
.checkout-summary,
.confirmation-card,
.customer-order-card {
  border-color: var(--border);
  border-radius: 1rem;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.cart-summary-card { position: sticky; top: 10rem; padding: 1.2rem; border: 1px solid var(--border); }
.cart-summary-card h2 { margin: .2rem 0 1rem; font-size: 1.55rem; }
.cart-summary-rows p { display: flex; justify-content: space-between; margin: .5rem 0; font-size: .68rem; }
.cart-summary-rows i { color: var(--green); font-style: normal; }
.cart-summary-rows .grand-total { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--border); font-family: var(--display); font-size: 1rem; }
.summary-progress { margin: 1rem 0; padding: .75rem; border-radius: .7rem; background: var(--sky); }
.summary-progress p { margin: 0; font-size: .62rem; }
.cart-summary-card .store-btn { width: 100%; margin-top: .8rem; }
.summary-assurance { display: flex; justify-content: center; gap: .35rem; color: var(--muted); text-align: center; font-size: .56rem; }
.summary-assurance span { color: var(--green); }

.checkout-head { display: grid; grid-template-columns: 8rem 1fr auto; align-items: end; gap: 2rem; padding-top: 3rem; padding-bottom: 2rem; }
.checkout-head h1 { margin: .3rem 0; font-size: clamp(2.8rem,5vw,4.8rem); line-height: .94; }
.checkout-head div > p:last-child { color: var(--muted); font-family: var(--sans); font-size: .8rem; }
.checkout-head ol { display: flex; gap: 1.5rem; margin: 0; padding: 0 0 .5rem; list-style: none; }
.checkout-head li { color: #9aa0b4; font-family: var(--mono); font-size: .54rem; font-weight: 600; }
.checkout-head li::before { display: block; width: .55rem; height: .55rem; margin: auto auto .35rem; border: 1px solid #aeb5c8; border-radius: .18rem; content: ""; }
.checkout-head li.done,
.checkout-head li.current { color: var(--indigo); }
.checkout-head li.done::before,
.checkout-head li.current::before { border-color: var(--relay); background: var(--relay); }
.checkout-layout { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(20rem,.55fr); align-items: start; gap: 1.5rem; padding-bottom: 4rem; }
.checkout-form { display: grid; gap: 1rem; }
.checkout-panel { overflow: hidden; border: 1px solid var(--border); }
.checkout-panel-head { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--border); background: var(--mist); }
.checkout-panel-head > span { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: .58rem; background: var(--indigo); color: var(--pista); font-family: var(--mono); font-size: .6rem; font-weight: 600; }
.checkout-panel-head h2 { margin: .1rem 0 0; font-size: 1.3rem; }
.checkout-panel-body { display: grid; gap: 1rem; padding: 1.2rem; }
.store-field { display: grid; gap: .35rem; min-width: 0; }
.store-field label { font-size: .66rem; font-weight: 750; }
.store-field input,
.store-field textarea,
.store-field select,
.store-auth-form input {
  width: 100%;
  min-height: 2.9rem;
  padding: .65rem .75rem;
  border: 1px solid #d9deea;
  border-radius: .72rem;
  background: #fff;
  color: var(--indigo);
}
.store-field input:focus,
.store-field textarea:focus,
.store-field select:focus,
.store-auth-form input:focus { border-color: var(--indigo); outline: 3px solid rgba(23,32,74,.08); }
.store-field small { color: var(--muted); font-size: .57rem; }
.gift-toggle input:checked + span { background: var(--relay); }
.payment-methods label > span { border-radius: .75rem; }
.payment-methods input:checked + span { border-color: var(--indigo); background: var(--sky); box-shadow: 0 0 0 2px rgba(23,32,74,.08); }
.pay-grid { border-radius: .85rem; background: var(--sky); }
.pay-info > strong,
.bank-transfer-amount strong { font-family: var(--display); }
.bank-transfer-card { border-radius: .85rem; background: var(--mist); }
.payment-upload input[type="file"]::file-selector-button { background: var(--indigo); }
.checkout-submit p span { color: var(--green); }
.checkout-summary { position: sticky; top: 10rem; overflow: hidden; border: 1px solid var(--border); }
.checkout-summary-head { background: var(--mist); }
.summary-qty { border-radius: .38rem; background: var(--relay); }
.checkout-promise { background: var(--pista); }
.checkout-promise > span { color: var(--indigo); }
.checkout-promise p { color: #4e5737; }
.checkout-promise strong { color: var(--indigo); }

.confirmation-page { max-width: 50rem; padding-top: 5rem; padding-bottom: 4rem; text-align: center; }
.confirmation-mark { position: relative; display: grid; width: 5rem; height: 5rem; margin: 0 auto 1.5rem; place-items: center; border-radius: 1.35rem; background: var(--pista); color: var(--indigo); font-size: 1.5rem; transform: rotate(-4deg); }
.confirmation-mark i { background: var(--relay); }
.confirmation-page h1 { margin: .5rem 0 1rem; font-size: clamp(3.2rem,7vw,5.9rem); line-height: .88; }
.confirmation-lede { max-width: 35rem; margin: auto; color: var(--muted); font-family: var(--sans); font-size: .86rem; }
.confirmation-card { margin: 2rem auto; overflow: hidden; border: 1px solid var(--border); text-align: left; }
.confirmation-card-head { background: var(--mist); }
.confirmation-status { background: #fff1d8; }
.account-page { padding-top: 4rem; padding-bottom: 4rem; }
.account-head { padding: 0 0 2.5rem; }
.saved-collection-note { border: 1px solid #dce3c8; border-radius: .8rem; background: #f4ffd9; }
.saved-collection-note > span { color: var(--indigo); }
.customer-order-list { display: grid; gap: 1rem; }
.customer-order-card { overflow: hidden; border: 1px solid var(--border); }
.customer-order-number > span { border-radius: .65rem; background: var(--pista); color: var(--indigo); }
.customer-order-total strong,
.customer-order-main > div:first-child strong { font-family: var(--display); }
.customer-payment.paid { color: var(--green); }
.timeline li.done,
.timeline li.current { color: var(--relay); }
.timeline li.done::before,
.timeline li.current::before,
.timeline li.done .timeline-dot,
.timeline li.current .timeline-dot { background: var(--relay); }
.timeline li.done .timeline-dot,
.timeline li.current .timeline-dot { box-shadow: 0 0 0 1px var(--relay); }
.timeline li.current .timeline-dot { box-shadow: 0 0 0 4px #ffe3d8; }
.customer-order-details { background: var(--mist); }

/* Customer login */
.store-login { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(22rem,.95fr); min-height: 42rem; padding-top: 1.5rem; padding-bottom: 1.5rem; }
.store-login-visual { position: relative; min-height: 39rem; overflow: hidden; border-radius: 1.25rem; box-shadow: var(--shadow-md); }
.store-login-visual img { width: 100%; height: 100%; object-fit: cover; }
.store-login-visual::after { position: absolute; inset: 0; background: linear-gradient(180deg,transparent 25%,rgba(23,32,74,.92)); content: ""; }
.store-login-visual > div { position: absolute; right: 2.5rem; bottom: 2.5rem; left: 2.5rem; z-index: 1; color: #fff; }
.store-login-visual .store-eyebrow { color: var(--pista); }
.store-login-visual h1 { margin: .4rem 0 .8rem; font-size: clamp(2.7rem,5vw,4.8rem); line-height: .92; }
.store-login-visual div > p:last-child { max-width: 34rem; color: #c7cde6; font-family: var(--sans); font-size: .8rem; }
.store-login-panel { display: grid; place-items: center; padding: clamp(1.5rem,5vw,4rem); }
.store-auth-card { width: min(100%,24rem); }
.store-auth-card .auth-flower { margin: 0 0 1rem; border-radius: .8rem; background: var(--indigo); color: var(--pista); box-shadow: .3rem .3rem 0 var(--relay); }
.store-auth-card h2 { margin: .35rem 0 .6rem; font-size: 2.2rem; line-height: 1; }
.store-auth-card > p:not(.store-eyebrow) { color: var(--muted); font-size: .75rem; }
.store-auth-form { display: grid; gap: .55rem; margin-top: 1.4rem; }
.store-auth-form label { font-size: .66rem; font-weight: 750; }
.phone-input { display: flex; align-items: center; overflow: hidden; border: 1px solid #d9deea; border-radius: .75rem; background: #fff; }
.phone-input:focus-within { border-color: var(--indigo); box-shadow: 0 0 0 3px rgba(23,32,74,.08); }
.phone-input span { padding-left: .8rem; color: var(--muted); }
.store-auth-form .phone-input input { border: 0; outline: 0; }
.store-auth-form .store-btn { width: 100%; margin-top: .6rem; }
.auth-benefits { border-color: var(--border); color: var(--muted); font-size: .55rem; }
.code-sent { border-radius: .7rem; background: var(--sky); }
.code-sent span { color: var(--green); }
.auth-resend { color: var(--relay); }

/* Drawer and footer */
#cart-overlay { position: fixed; inset: 0; z-index: 70; background: rgba(12,17,44,.58); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
#cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  display: flex;
  width: min(92vw,29rem);
  flex-direction: column;
  background: #fff;
  box-shadow: -20px 0 60px rgba(8,12,35,.25);
  transform: translateX(105%);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
body.cart-open #cart-overlay { opacity: 1; pointer-events: auto; }
body.cart-open #cart-drawer { transform: translateX(0); }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 1.15rem 1.3rem; border-bottom: 1px solid var(--border); background: var(--mist); }
.drawer-head h2 { margin: .15rem 0 0; font-size: 1.5rem; }
.drawer-close { display: grid; width: 2.2rem; height: 2.2rem; min-height: 0; padding: 0; place-items: center; border: 1px solid var(--border); border-radius: .65rem; background: #fff; color: var(--indigo); font-size: 1.2rem; }
#cart-drawer-body { display: flex; flex: 1; flex-direction: column; gap: 1rem; padding: 1rem 1.3rem 1.3rem; overflow-y: auto; }
.free-ship { padding: .8rem; border-radius: .8rem; background: var(--sky); }
.free-ship-copy > span { border-radius: .55rem; background: var(--pista); color: var(--indigo); }
.free-ship-fill { background: linear-gradient(90deg,var(--relay),var(--pista)); }
.drawer-item { border-color: var(--border); }
.drawer-item-image img { border-radius: .7rem; }
.drawer-item-name,
.upsell-info a,
.sum-total { font-family: var(--sans); }
.stepper { border-color: var(--border); border-radius: .55rem; }
.step-btn { color: var(--relay); }
.step-btn:hover { background: var(--sky); }
.upsell-card { border-radius: .75rem; }
.upsell-add { border-radius: .55rem; background: var(--indigo); }
.drawer-checkout { border-radius: .75rem; }
.drawer-viewcart { color: var(--indigo); }

.site-footer { margin-top: 0; border: 0; background: var(--indigo); color: #fff; }
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr .7fr .7fr 1fr;
  gap: 3rem;
  width: min(100%,1420px);
  margin: auto;
  padding: 4rem clamp(1rem,3.8vw,3.5rem);
}
.footer-logo { color: #fff; }
.footer-logo .logo-mark { background: #fff; color: var(--indigo); box-shadow: none; }
.footer-logo .logo-mark::before { background: var(--relay); }
.footer-logo small { color: #939dc7; }
.footer-brand > p { max-width: 25rem; color: #aeb6d7; font-family: var(--sans); font-size: .76rem; line-height: 1.7; }
.footer-links,
.footer-note { display: grid; align-content: start; gap: .6rem; }
.footer-links strong,
.footer-note strong { color: var(--pista); font-family: var(--mono); font-size: .58rem; letter-spacing: .08em; text-transform: uppercase; }
.footer-links a,
.footer-note p { margin: 0; color: #aeb6d7; font-size: .68rem; }
.footer-links a:hover { color: #fff; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  width: min(100%,1420px);
  margin: auto;
  padding: 1rem clamp(1rem,3.8vw,3.5rem);
  border-top: 1px solid #303b6a;
  color: #7883b1;
  font-family: var(--mono);
  font-size: .52rem;
  text-transform: uppercase;
}

.mobile-app-nav { display: none; }

@media (max-width: 1180px) {
  .site-header-inner { grid-template-columns: auto minmax(15rem,1fr) auto; gap: 1.25rem; }
  .logo small { display: none; }
  .market-hero { grid-template-columns: minmax(0,.9fr) minmax(28rem,1.1fr); }
  .market-category-grid { grid-template-columns: repeat(5,minmax(11rem,1fr)); overflow-x: auto; padding-bottom: .8rem; scrollbar-width: thin; }
  .product-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .footer-inner { grid-template-columns: 1.4fr repeat(2,.7fr); }
  .footer-note { display: none; }
}

@media (max-width: 820px) {
  html { scroll-padding-top: 7.5rem; }
  body.storefront-body { padding-bottom: 4.8rem; }
  .announcement-inner { grid-template-columns: 1fr auto; }
  .announcement-inner p { display: none; }
  .site-header-inner { grid-template-columns: auto 1fr; min-height: 4.5rem; }
  .header-search { display: none; }
  .header-actions { grid-column: 2; }
  .header-icon-link span,
  .account-menu summary span,
  .cart-label { display: none; }
  .optional-action { display: none; }
  .category-nav > div { padding-block: .48rem; }
  .dock-label { display: none; }
  .category-nav .category-sale { margin-left: 0; }
  .market-hero { grid-template-columns: 1fr; min-height: 0; padding-top: .8rem; }
  .market-hero-copy { min-height: 31rem; }
  .market-hero-visual { min-height: 34rem; }
  .market-category-grid { grid-template-columns: repeat(5,10.5rem); }
  .market-category-card { min-height: 16rem; }
  .category-image { height: 10.5rem; }
  .campaign { grid-template-columns: 1fr; }
  .campaign-copy { min-height: 23rem; border-radius: 1.1rem 1.1rem 0 0; }
  .campaign-art { min-height: 20rem; border-radius: 0 0 1.1rem 1.1rem; }
  .product-grid,
  .related-section .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .product-detail { grid-template-columns: 1fr; }
  .detail-info { position: static; }
  .reviews-section { grid-template-columns: 1fr; gap: 1rem; }
  #reviews-content { grid-column: 1; grid-row: 2; }
  .cart-layout,
  .checkout-layout { grid-template-columns: 1fr; }
  .cart-summary-card,
  .checkout-summary { position: static; }
  .checkout-summary { order: -1; }
  .checkout-head { grid-template-columns: 1fr auto; }
  .checkout-head > a { grid-column: 1/-1; }
  .checkout-head ol { grid-column: 2; grid-row: 2; }
  .checkout-head > div { grid-column: 1; }
  .confirmation-details,
  .customer-order-details { grid-template-columns: 1fr; }
  .store-login { grid-template-columns: 1fr; }
  .store-login-visual { min-height: 25rem; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-brand { grid-column: 1/-1; }
  .mobile-app-nav {
    position: fixed;
    right: .65rem;
    bottom: .65rem;
    left: .65rem;
    z-index: 60;
    display: grid;
    grid-template-columns: repeat(5,1fr);
    align-items: center;
    min-height: 4rem;
    padding: .35rem;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 1.15rem;
    background: rgba(23,32,74,.96);
    box-shadow: 0 18px 45px rgba(8,12,35,.28);
    backdrop-filter: blur(18px);
  }
  .mobile-app-nav a,
  .mobile-app-nav button {
    display: grid;
    min-height: 3.15rem;
    padding: .3rem;
    place-items: center;
    gap: .12rem;
    border: 0;
    border-radius: .8rem;
    background: transparent;
    color: #aeb6d7;
    font-size: .5rem;
    font-weight: 700;
  }
  .mobile-app-nav a[aria-current="page"] { background: #303b6a; color: var(--pista); }
  .mobile-app-nav svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
  .mobile-app-nav button { color: var(--indigo); }
  .mobile-app-nav button > b { color: var(--pista); font-size: .5rem; }
  .mobile-bag-icon { position: relative; display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: .62rem; background: var(--relay); color: #fff; }
  .mobile-bag-icon i { position: absolute; top: -.25rem; right: -.25rem; display: grid; min-width: .9rem; height: .9rem; padding: 0 .15rem; place-items: center; border-radius: .3rem; background: var(--pista); color: var(--indigo); font-family: var(--mono); font-size: .44rem; font-style: normal; }
  .mobile-bag-icon i:empty { display: none; }
}

@media (max-width: 560px) {
  .page-shell { padding-inline: .8rem; }
  .announcement-inner { padding-inline: 1rem; }
  .announcement-inner > a { font-size: .52rem; }
  .site-header-inner { min-height: 4.25rem; padding-inline: .8rem; }
  .logo-mark { width: 2.3rem; height: 2.3rem; }
  .logo strong { font-size: 1.08rem; }
  .login-link { display: none; }
  .market-hero { padding-inline: .55rem; }
  .market-hero-copy { min-height: 29rem; padding: 1.55rem; border-radius: 1rem; }
  .market-hero h1 { font-size: clamp(3.2rem,15vw,4.8rem); }
  .market-hero .hero-lede { font-size: .78rem; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: .9rem; }
  .hero-proof { gap: .35rem; margin-top: 1.7rem; }
  .hero-proof strong { font-size: .56rem; }
  .hero-proof span { display: none; }
  .market-hero-visual { min-height: 27rem; border-radius: 1rem; }
  .market-hero-visual::before { inset: 3.5rem 1rem 3rem; }
  .hero-product-main { top: 4rem; right: 5%; width: 60%; height: 20rem; }
  .hero-product-side { bottom: 3.2rem; left: 4%; width: 32%; height: 11rem; }
  .hero-product-float { top: 4.5rem; left: 6%; width: 25%; height: 7rem; }
  .hero-sticker { top: 11.5rem; left: 2%; width: 4.8rem; height: 4.8rem; }
  .hero-sticker strong { font-size: 1.3rem; }
  .hero-product-caption { display: none; }
  .perks-strip > div { grid-template-columns: repeat(2,1fr); gap: .8rem 0; }
  .perks-strip span { font-size: .54rem; }
  .perks-strip span:nth-child(2) { border: 0; }
  .category-section { padding-top: 4rem; padding-bottom: 4rem; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: .7rem; }
  .section-heading h2,
  .section-intro h2 { font-size: 2.4rem; }
  .market-category-grid { grid-template-columns: repeat(5,9rem); }
  .market-category-card { min-height: 13.8rem; }
  .category-image { height: 8.8rem; }
  .category-card-foot strong { font-size: .86rem; }
  .campaign { padding-inline: .55rem; }
  .campaign-copy { min-height: 21rem; padding: 2rem 1.5rem; }
  .campaign-copy h2 { font-size: 3rem; }
  .campaign-art { min-height: 15rem; }
  .campaign-word { font-size: 5.5rem; }
  .campaign-label { padding: .35rem .5rem; font-size: .45rem; box-shadow: .22rem .22rem 0 var(--indigo); }
  .collection-section { padding: 4rem .8rem; }
  .shop-filter { grid-template-columns: 1fr; }
  .shop-filter > input[name="color"],
  .price-filter,
  .filter-reset { display: none; }
  .product-grid,
  .related-section .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem; }
  .product-card { border-radius: .8rem; }
  .product-image { aspect-ratio: 4/5.2; }
  .product-ribbon { top: .45rem; left: .45rem; font-size: .4rem; }
  .wish-btn { top: .45rem; right: .45rem; width: 2rem; height: 2rem; border-radius: .58rem; }
  .product-media-actions { right: .4rem; bottom: .4rem; left: .4rem; }
  .product-media-actions .availability { display: none; }
  .quick-add { margin-left: auto; padding-left: .5rem; }
  .quick-add > span { display: none; }
  .quick-add b { width: 1.6rem; height: 1.6rem; }
  .product-body { padding: .68rem .58rem .75rem; }
  .product-kicker { font-size: .4rem; }
  .product-title-row { display: grid; gap: .25rem; }
  .product-title-row h3 { font-size: .67rem; }
  .price { font-size: .65rem; }
  .desc { display: none; }
  .product-seller { font-size: .46rem; }
  .collection-count span:last-child { display: none; }
  .promise-band > div { grid-template-columns: 1fr; gap: 1rem; }
  .detail-info h1 { font-size: 3rem; }
  .detail-tags { grid-template-columns: repeat(2,1fr); }
  .detail-tags span:last-child { grid-column: 1/-1; border-top: 1px solid var(--border); }
  .detail-assurances { grid-template-columns: 1fr; }
  .simple-page-head { padding-top: 3rem; }
  .cart-line-list { border: 0; background: transparent; }
  .cart-line { grid-template-columns: 5.4rem 1fr auto; align-items: start; padding: .8rem 0; }
  .cart-line > a img { width: 5.4rem; height: 6.4rem; }
  .cart-quantity { grid-column: 2; }
  .cart-line-total { grid-column: 3; grid-row: 1; }
  .cart-line-copy > p:not(.product-kicker) { display: none; }
  .checkout-head { display: block; }
  .checkout-head ol { display: none; }
  .checkout-panel-body .grid2 { grid-template-columns: 1fr; }
  .pay-grid { grid-template-columns: 1fr; text-align: center; }
  .checkout-submit { align-items: stretch; flex-direction: column; }
  .checkout-submit .store-btn { width: 100%; }
  .confirmation-page h1 { font-size: 3.5rem; }
  .confirmation-actions { flex-direction: column; }
  .customer-order-main { align-items: flex-start; flex-direction: column; }
  .timeline-label { font-size: .46rem; }
  .store-login { padding: .7rem; }
  .store-login-visual { min-height: 21rem; border-radius: 1rem; }
  .store-login-visual > div { right: 1.3rem; bottom: 1.3rem; left: 1.3rem; }
  .store-login-panel { padding: 2rem .3rem; }
  .auth-benefits { flex-direction: column; }
  .footer-inner { padding-block: 3rem; }
  .footer-bottom span:last-child { display: none; }
}

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