:root {
  --white: #FFFFFF;
  --blue: #0067B1;
  --blue-hover: #00558F;
  --green: #008A5B;
  --green-hover: #006F49;
  --footer: #063B5C;
  --ink: #17242B;
  --muted: #65747B;
  --border: #CFE3F0;
  --atmo: #F4FAF9;
  --grad-a: #DCEFF2;
  --grad-b: #DDF3E9;
  --f-sec: #B8CDD5;
  --f-green: #42B883;
  --f-div: #285772;
  --chrome: #D9EEFB;
  --chrome-ink: #123A52;
  --chrome-sec: #3E6C88;
  --chrome-div: #B7DDF2;
  --display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --body: 'Lato', -apple-system, system-ui, sans-serif;
  --maxw: 1280px;
}

@media(min-width:1600px) {
  :root {
    --maxw: 1440px
  }
}

* {
  box-sizing: border-box
}

html {
  height: 100%
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #F8F1E3;
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased
}

header,
footer {
  flex-shrink: 0
}

main {
  flex: 1 0 auto;
  width: 100%
}

h1,
h2,
h3,
h4 {
  font-family: var(--display);
  margin: 0;
  line-height: 1.14;
  letter-spacing: -.02em;
  color: var(--ink)
}

a {
  color: inherit;
  text-decoration: none
}

img,
svg {
  display: block;
  max-width: 100%
}

button {
  font-family: inherit
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px
}

.eyebrow {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue)
}

.muted {
  color: var(--muted)
}

:focus-visible {
  outline: 2.5px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px
}

.btn {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  border-radius: 10px;
  padding: 13px 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: .18s
}

.btn:active {
  transform: translateY(1px)
}

.btn-primary {
  background: var(--blue);
  color: #fff
}

.btn-primary:hover {
  background: var(--blue-hover)
}

.btn-green {
  background: var(--green);
  color: #fff
}

.btn-green:hover {
  background: var(--green-hover)
}

.btn-outline {
  background: #fff;
  color: var(--blue);
  border-color: var(--blue)
}

.btn-outline:hover {
  background: var(--blue);
  color: #fff
}

.btn-sm {
  padding: 9px 16px;
  font-size: 14px;
  border-radius: 9px
}

.btn-block {
  width: 100%
}

/* announcement + header */
.ann {
  background: var(--footer);
  color: #fff;
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  text-align: center;
  padding: 9px 14px
}

.ann b {
  color: var(--f-green)
}

/* the mobile menu overlay is a fixed, full-screen panel (z-index:95) that
   paints over anything in normal document flow — including this bar, since
   it's static/unpositioned. Give it a stacking context above the overlay
   (but below the header's own 100) only while that menu is open, so it
   stays visible instead of getting covered. */
body.mmenu-lock .ann {
  position: relative;
  z-index: 96
}

header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--chrome)
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
  position: relative
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 4px
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 6px 14px
}

.brand img.brand-logo {
  height: 43px;
  width: auto;
  display: block
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 6px
}

.icon-btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--chrome-ink);
  border: 1px solid transparent;
  background: none;
  cursor: pointer;
  position: relative
}

.icon-btn:hover {
  background: rgba(18, 58, 82, .08)
}

.icon-btn .badge {
  position: absolute;
  top: 2px;
  right: 0;
  background: var(--green);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 10px;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 20px;
  display: none
}

.icon-btn .badge.on {
  display: block
}

.menu-toggle {
  display: grid
}

.menu-toggle .ic-close {
  display: none
}

.menu-toggle.open .ic-burger {
  display: none
}

.menu-toggle.open .ic-close {
  display: block
}

html.mmenu-lock,
body.mmenu-lock {
  overflow: hidden;
  height: 100%
}

.mmenu-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(6, 20, 30, .68);
  z-index: 90;
  opacity: 0;
  transition: opacity .25s
}

.mmenu-backdrop.on {
  display: block;
  opacity: 1
}

.mmenu {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  background: var(--footer);
  z-index: 95;
  padding: 100px 0 0;
  transform: translateX(-100%);
  transition: transform .3s ease;
  display: grid;
  grid-template-rows: 1fr auto;
  box-shadow: 0 0 60px -12px rgba(0, 0, 0, .5);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #285772 transparent
}

.mmenu::-webkit-scrollbar {
  width: 8px
}

.mmenu::-webkit-scrollbar-thumb {
  background: #285772;
  border-radius: 8px
}

.mmenu.open {
  transform: translateX(0)
}

.mmenu-links {
  display: flex;
  flex-direction: column;
  padding: 44px 0 12px
}

.mmenu a {
  display: block;
  padding: 12px 32px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: .01em;
  color: #fff;
  transition: background .15s
}

.mmenu a:hover,
.mmenu-account:hover {
  background: rgba(63, 143, 31, .3)
}

.mmenu .sub {
  font-weight: 500;
  color: var(--f-sec);
  font-size: 13.5px;
  padding-left: 48px
}

.mmenu-utility {
  background: rgba(255, 255, 255, .04);
  padding: 20px 32px 24px
}

.mmenu-account {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-family: var(--display);
  font-weight: 600;
  font-size: 15.5px;
  padding: 8px 0
}

@media(min-width:750px) {
  .mmenu {
    width: min(40rem, 92vw)
  }
}

/* views */
.view {
  display: none
}

#v-home {
  background: #F8F1E3
}

.view.on {
  display: block
}

section.pad {
  padding: 72px 0
}

.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 34px
}

.sec-head h2 {
  font-size: 32px;
  font-weight: 800;
  margin-top: 8px
}

.sec-head p {
  margin: 8px 0 0;
  color: var(--muted);
  max-width: 460px
}

.link-more {
  font-family: var(--display);
  font-weight: 700;
  color: var(--blue);
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  cursor: pointer
}

/* hero */
.hero {
  background: radial-gradient(120% 130% at 82% -10%, var(--atmo), #F8F1E3 62%)
}

.hero .wrap {
  padding-top: 46px;
  padding-bottom: 64px
}

.hero-copy {
  text-align: center;
  max-width: 660px;
  margin: 0 auto 34px
}

.hero-copy h1 {
  font-size: clamp(34px, 4.6vw, 52px);
  font-weight: 800
}

.hero-copy h1 .accent {
  color: var(--green)
}

.hero-copy p {
  font-size: 18px;
  color: var(--muted);
  margin: 14px auto 22px;
  max-width: 520px
}

.video-panel {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--border);
  aspect-ratio: 16/6.5;
  background: linear-gradient(120deg, #DCEFF2, #EAF4FB 45%, #DDF3E9);
  box-shadow: 0 34px 64px -34px rgba(6, 59, 92, .3)
}

.video-panel video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.video-panel .scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 59, 92, .32), rgba(6, 59, 92, .55))
}

.play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 14px 30px -8px rgba(6, 59, 92, .4);
  border: none;
  transition: transform .18s
}

.play:hover {
  transform: scale(1.06)
}

.video-panel .hs-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 40px 60px;
  pointer-events: none
}

.video-panel .hs-content.align-left {
  align-items: flex-start;
  text-align: left
}

.video-panel .hs-content.align-right {
  align-items: flex-end;
  text-align: right
}

.video-panel .hs-content .tag {
  background: #fff;
  color: var(--blue);
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 20px
}

.video-panel .hs-content h2 {
  color: #fff;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(26px, 4.4vw, 48px);
  line-height: 1.14;
  max-width: 720px;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .28)
}

.video-panel .hs-content .hs-sub {
  color: #fff;
  font-size: clamp(14px, 1.7vw, 18px);
  max-width: 560px;
  opacity: .94;
  margin: 0
}

.video-panel .hs-content .hs-cta {
  pointer-events: auto;
  margin-top: 4px
}

/* product card */
.pgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px
}

.cab-grid {
  grid-template-columns: repeat(3, 1fr)
}

/* home "Best sellers" row auto-scrolls horizontally instead of wrapping into
   a grid — the id selector's specificity beats .pgrid's grid-template-columns
   at every breakpoint, so this one row stays a scroll strip everywhere */
#home-best {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px
}

#home-best::-webkit-scrollbar {
  display: none
}

#home-best .pcard {
  flex: 0 0 260px;
  scroll-snap-align: start
}

@media(max-width:600px) {
  #home-best {
    gap: 12px
  }

  #home-best .pcard {
    flex: 0 0 64vw
  }
}

.pcard {
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 14px -6px rgba(6, 59, 92, .16);
  display: flex;
  flex-direction: column;
  transition: transform .2s, box-shadow .2s;
  cursor: pointer
}

.pcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 46px -28px rgba(6, 59, 92, .32)
}

.pcard .ph {
  aspect-ratio: 1/1;
  display: grid;
  place-items: center;
  position: relative;
  padding: 10px;
  overflow: hidden
}

.pcard .ph.has-photo {
  padding: 20px
}

.pcard .ph svg {
  height: 78%;
  width: auto
}

.pcard .ph img {
  width: 100%;
  height: 100%;
  object-fit: contain
}

.pcard .off {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--green);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 11px;
  padding: 5px 9px;
  border-radius: 6px;
  z-index: 2
}

.pcard .bd {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1
}

.pcard h3 {
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.3
}

.pcard .sub {
  font-size: 12.5px;
  color: var(--muted)
}

.rate {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted)
}

.stars {
  color: var(--green);
  letter-spacing: 1.5px;
  font-size: 13px
}

.price {
  display: flex;
  align-items: baseline;
  gap: 8px
}

.price .now {
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px
}

.price .mrp {
  color: var(--muted);
  text-decoration: line-through;
  font-size: 13.5px
}

.pcard .btn {
  margin-top: auto;
  width: 100%;
  background: #fff;
  color: var(--ink);
  border: 1.5px solid var(--ink)
}

.pcard .btn:hover {
  background: var(--ink);
  color: #fff
}

.pcard .btn:disabled {
  background: #F6F9FA;
  color: var(--muted);
  border-color: var(--border);
  cursor: not-allowed
}

/* title marquee — a single auto-scrolling row of name-only chips
   (used by "Shop by what your home needs" and "Explore our range") */
.title-marquee {
  overflow: hidden;
  display: flex;
  justify-content: center
}

.title-marquee .marquee-track {
  display: flex;
  width: max-content;
  gap: 14px
}

.title-marquee.scrolling .marquee-track {
  animation: strip-marquee 28s linear infinite
}

.title-marquee.scrolling:hover .marquee-track {
  animation-play-state: paused
}

.title-chip {
  flex: none;
  padding: 16px 30px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15.5px;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  transition: .2s
}

.title-chip:hover {
  border-color: var(--blue);
  color: var(--blue);
  transform: translateY(-2px)
}

/* category strip */
.cat-band {
  background: var(--footer);
  padding: 44px 0 52px
}

/* brand strip gets its own light-green band so it reads as a distinct
   section from the category strip right below it */
#home-brandband {
  background: linear-gradient(135deg, #DFF2E4, #EAF6E2)
}

#home-brandband .eyebrow {
  color: #0F7A4A
}

#home-brandband .cat-strip-head h2,
#home-brandband .cat-avatar>span {
  color: var(--ink)
}

#home-brandband .cat-avatar .circle.dummy {
  background: #fff
}

#home-brandband .cat-avatar .circle.dummy svg {
  color: #3F8F1F
}

.cat-strip-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  margin-bottom: 30px
}

.cat-band .eyebrow {
  color: #7FC9E8
}

.cat-band .cat-strip-head h2 {
  font-size: 26px;
  margin: 0;
  color: #fff
}

/* auto-scrolling marquee: JS renders the item list twice into
   .marquee-track, and this animates it exactly half its width so the
   loop point is seamless */
.cat-strip {
  overflow: hidden;
  display: flex;
  justify-content: center;
  padding: 6px 0 2px;
  margin: -6px 0 -2px
}

.cat-strip .marquee-track {
  display: flex;
  width: max-content;
  gap: 18px
}

.cat-strip.scrolling .marquee-track {
  animation: strip-marquee 36s linear infinite
}

.cat-strip.scrolling:hover .marquee-track {
  animation-play-state: paused
}

@keyframes strip-marquee {
  from {
    transform: translateX(0)
  }

  to {
    transform: translateX(-50%)
  }
}

.cat-avatar {
  flex: none;
  width: 108px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  text-align: center
}

.cat-avatar .circle {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 10px -4px rgba(6, 59, 92, .3);
  display: grid;
  place-items: center;
  transition: transform .2s
}

.cat-avatar:hover .circle {
  transform: translateY(-3px)
}

.cat-avatar .circle img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent
}

.cat-avatar .circle.dummy {
  background: var(--atmo)
}

.cat-avatar .circle.dummy svg {
  width: 42%;
  height: 42%;
  color: var(--muted)
}

.cat-avatar>span {
  font-size: 13.5px;
  font-weight: 600;
  color: #fff
}

@media (max-width:800px) {
  .cat-strip .marquee-track {
    gap: 10px
  }

  .cat-avatar {
    width: 80px
  }

  .cat-avatar .circle {
    width: 64px;
    height: 64px
  }

  .cat-avatar>span {
    font-size: 11.5px
  }
}

/* reels */
.reels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px
}

.reel {
  position: relative;
  aspect-ratio: 9/14;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 14px -6px rgba(6, 59, 92, .16)
}

/* an embedded Instagram reel (admin pasted a reel URL instead of uploading
   a video) — Instagram's own embed.js sizes an iframe into this box */
.reel .ig-embed {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #fff
}

.reel .ig-embed iframe {
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  inset: 0 !important
}

.reel .play {
  width: 52px;
  height: 52px;
  z-index: 2;
  transition: opacity .15s
}

.reel .play:disabled {
  opacity: .45;
  cursor: default
}

.reel-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none
}

.reel.playing .reel-video {
  display: block;
  z-index: 1
}

.reel.playing .play,
.reel.playing .views {
  display: none
}

.reel .views {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(6, 59, 92, .75);
  color: #fff;
  font-family: var(--display);
  font-weight: 600;
  font-size: 11.5px;
  padding: 5px 9px;
  border-radius: 20px;
  display: flex;
  gap: 5px;
  align-items: center
}

.reel .shop {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  background: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 10px 24px -10px rgba(6, 59, 92, .35)
}

.reel .shop .t {
  flex: 1;
  min-width: 0
}

.reel .shop .t b {
  display: block;
  font-family: var(--display);
  font-size: 12.5px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.reel .shop .t span {
  font-size: 12px;
  color: var(--muted)
}

.reel .shop button {
  flex: none;
  background: var(--blue);
  border: none;
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 12.5px;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer
}

.reel .shop button:hover {
  background: var(--blue-hover)
}

/* affiliations strip — same circular auto-scroll style as the brand strip */
#home-affband {
  background: linear-gradient(135deg, #F3EADC, #EADFC8)
}

#home-affband .eyebrow {
  color: #8A6A2E
}

#home-affband .cat-strip-head h2,
#home-affband .cat-avatar>span {
  color: var(--ink)
}

#home-affband .cat-avatar .circle.dummy {
  background: #fff
}

#home-affband .cat-avatar .circle.dummy svg {
  color: #8A6A2E
}

/* feature benefits strip */
.feat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px
}

.feat-item {
  text-align: center;
  padding: 8px 12px
}

.feat-ic {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #E9F3FA;
  color: var(--blue);
  display: grid;
  place-items: center;
  margin: 0 auto 14px
}

.feat-ic-g {
  background: #E5F4EE;
  color: var(--green)
}

.feat-item h3 {
  font-size: 15.5px;
  font-weight: 700
}

.feat-item p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--muted)
}

@media(max-width:980px) {
  .feat-strip {
    grid-template-columns: 1fr 1fr
  }
}

@media(max-width:600px) {
  .feat-strip {
    grid-template-columns: 1fr
  }
}

/* brand band */
.band {
  background: linear-gradient(135deg, #F3EADC, #F8F1E3);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border)
}

.band .tiles {
  grid-template-columns: repeat(4, 1fr)
}

/* IG grid */
.ig {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px
}

.ig a {
  aspect-ratio: 1/1;
  border-radius: 12px;
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  color: var(--blue);
  transition: .18s;
  overflow: hidden
}

.ig a:hover {
  transform: scale(1.03);
  color: var(--green)
}

.ig a img,
.ig a video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

/* reviews */
.rev-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px
}

.rev {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  background: #fff
}

.rev .stars {
  font-size: 15px
}

.rev h4 {
  font-size: 16px;
  margin: 10px 0 6px
}

.rev p {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 14px
}

.rev .who {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px
}

.rev .who span {
  color: var(--green);
  font-weight: 600;
  font-size: 12px;
  display: block
}

.score {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--atmo);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 24px;
  margin-bottom: 26px;
  width: max-content
}

.score .n {
  font-family: var(--display);
  font-weight: 800;
  font-size: 34px
}

.score .d {
  font-size: 13px;
  color: var(--muted)
}

/* shop */
.shop-head {
  padding: 44px 0 8px
}

.chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 14px 0 0
}

.chip {
  font-family: var(--display);
  font-weight: 600;
  font-size: 13.5px;
  padding: 8px 14px;
  border-radius: 30px;
  border: 1px solid var(--border);
  background: #fff;
  cursor: pointer;
  transition: .15s
}

.chip:hover {
  border-color: #cfe0e5
}

.chip.active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff
}

.fgroup {
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 18px 0 8px
}

.shop-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 36px;
  align-items: start
}

.shop-aside {
  position: sticky;
  top: 86px
}

.shop-aside-head {
  display: none
}

.shop-aside-apply {
  display: none
}

.filter-group {
  border-bottom: 1px solid var(--border);
  padding: 16px 0
}

.filter-group:first-child {
  padding-top: 0
}

.filter-group h4 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 10px
}

.filter-check {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  color: var(--ink);
  padding: 5px 0;
  cursor: pointer
}

.filter-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--blue);
  cursor: pointer
}

.filter-price {
  display: flex;
  align-items: center;
  gap: 8px
}

.filter-price input {
  width: 0;
  flex: 1;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: var(--body);
  font-size: 13.5px
}

.filter-price span {
  color: var(--muted)
}

.shop-filters-toggle {
  display: none
}

.shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap
}

.shop-sort {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px
}

.shop-sort label {
  font-size: 13.5px;
  color: var(--muted);
  white-space: nowrap
}

.shop-sort select {
  padding: 8px 30px 8px 12px;
  font-size: 13.5px
}

.filter-check .muted {
  font-size: 12px;
  margin-left: 2px
}

@media(max-width:980px) {
  .shop-layout {
    grid-template-columns: 1fr
  }

  .shop-filters-toggle {
    display: inline-flex;
    align-items: center;
    font-family: var(--display);
    font-weight: 700;
    font-size: 14px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    padding: 10px 18px;
    background: #fff;
    cursor: pointer;
    margin-bottom: 18px
  }

  .shop-aside {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 90;
    background: #fff;
    overflow: auto;
    padding: 20px 20px 90px
  }

  .shop-aside.open {
    display: block
  }

  .shop-aside-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px
  }

  .shop-aside-head .x {
    border: none;
    background: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--muted)
  }

  .shop-aside-apply {
    display: block;
    position: fixed;
    left: 20px;
    right: 20px;
    bottom: 20px;
    z-index: 91
  }

  body.shop-filters-lock {
    overflow: hidden
  }
}

/* product detail */
.crumbs {
  font-size: 13px;
  color: var(--muted);
  padding: 20px 0 0
}

.crumbs a {
  cursor: pointer
}

.crumbs a:hover {
  color: var(--blue)
}

.pd {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 44px;
  padding: 26px 0 60px
}

.gal .main {
  position: relative;
  aspect-ratio: 1/1;
  border-radius: 18px;
  overflow: hidden
}

.gal .slide {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 26px;
  opacity: 0;
  transition: opacity .4s
}

.gal .slide.on {
  opacity: 1
}

/* a real product photo fills the frame edge-to-edge with its own white
   backing — no inset padding or colored gradient showing as a border
   around it, matching how the same photo looks on the product-card grid */
.gal .slide.slide-photo {
  padding: 0;
  background: #fff
}

.gal .slide svg {
  height: 100%;
  width: auto
}

.gal .slide img {
  width: 100%;
  height: 100%;
  object-fit: contain
}

.gal .chipname {
  position: absolute;
  top: 14px;
  left: 14px;
  background: #fff;
  color: var(--blue);
  font-family: var(--display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: 20px
}

.gal .arr {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--ink);
  z-index: 3
}

.gal .arr:hover {
  color: var(--blue)
}

.gal .arr.l {
  left: 12px
}

.gal .arr.r {
  right: 12px
}

.thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap
}

.thumbs button {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 10px;
  color: var(--muted);
  background: transparent;
  padding: 4px;
  text-align: center;
  line-height: 1.2;
  overflow: hidden
}

.thumbs button img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 7px
}

.thumbs button.on {
  box-shadow: 0 0 0 2px var(--blue);
  color: var(--blue)
}

.info h1 {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800
}

.info .sub {
  color: var(--muted);
  margin: 8px 0 12px;
  font-size: 15px
}

.loved {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #E5F4EE;
  color: var(--green);
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  padding: 7px 13px;
  border-radius: 20px;
  margin: 10px 0 18px
}

.info .price .now {
  font-size: 28px
}

.info .price .save {
  color: var(--green);
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px
}

.sizes {
  display: flex;
  gap: 10px;
  margin: 16px 0 8px
}

.size {
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 10px 16px;
  cursor: pointer;
  background: #fff;
  text-align: left
}

.size b {
  display: block;
  font-family: var(--display);
  font-size: 15px
}

.size span {
  font-size: 12.5px;
  color: var(--muted)
}

.size.on {
  border-color: var(--blue);
  background: #F3F9FD
}

.qty {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  overflow: hidden
}

.qty button {
  width: 40px;
  height: 44px;
  border: none;
  background: #fff;
  font-size: 18px;
  cursor: pointer;
  color: var(--ink)
}

.qty button:hover {
  background: var(--atmo)
}

.qty span {
  width: 40px;
  text-align: center;
  font-family: var(--display);
  font-weight: 700
}

.buyrow {
  display: flex;
  gap: 12px;
  margin: 18px 0 20px;
  flex-wrap: wrap
}

.buyrow .btn {
  flex: 1;
  min-width: 150px
}

.offerbox {
  border: 1.5px dashed var(--green);
  background: #F2FBF7;
  border-radius: 14px;
  padding: 16px 18px;
  font-size: 14px
}

.offerbox b {
  font-family: var(--display)
}

.offerbox ul {
  margin: 8px 0 0;
  padding-left: 18px
}

.offerbox li {
  margin: 4px 0
}

.pd-desc {
  margin-top: 22px;
  color: #28353c;
  font-size: 15.5px
}

.meta-strip {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 20px
}

.meta-strip span {
  font-size: 13px;
  color: var(--muted);
  display: inline-flex;
  gap: 7px;
  align-items: center
}

.subsec {
  padding: 44px 0;
  border-top: 1px solid var(--border)
}

.subsec h2 {
  font-size: 26px;
  font-weight: 800;
  margin-bottom: 22px
}

.ing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px
}

.ing {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  background: #fff
}

.ing b {
  font-family: var(--display);
  display: block;
  margin-bottom: 4px
}

.ing p {
  margin: 0;
  font-size: 13.5px;
  color: var(--muted)
}

.ben li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  list-style: none;
  font-size: 15.5px
}

.ben {
  padding-left: 0;
  margin: 0
}

.ben li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #E5F4EE;
  color: var(--green);
  font-weight: 700;
  font-size: 12px;
  display: grid;
  place-items: center;
  margin-top: 3px
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px
}

.step {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  background: #fff
}

.step .n {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  display: grid;
  place-items: center;
  margin-bottom: 12px
}

.step p {
  margin: 0;
  font-size: 14px;
  color: #28353c
}

details.faq {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
  margin-bottom: 10px;
  overflow: hidden
}

details.faq summary {
  cursor: pointer;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  padding: 16px 18px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center
}

details.faq summary::after {
  content: "+";
  font-size: 20px;
  color: var(--blue)
}

details.faq[open] summary::after {
  content: "–"
}

details.faq .a {
  padding: 0 18px 16px;
  font-size: 14.5px;
  color: var(--muted)
}

.hero-cross {
  border-radius: 18px;
  border: 1px solid var(--border);
  background: linear-gradient(120deg, #DCEFF2, #DDF3E9);
  padding: 30px;
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap
}

.hero-cross svg {
  height: 120px;
  width: auto;
  flex: none
}

.hero-cross .t {
  flex: 1;
  min-width: 240px
}

.hero-cross h3 {
  font-size: 22px;
  font-weight: 800
}

.hero-cross p {
  margin: 6px 0 0;
  color: #2c5064;
  font-size: 14.5px
}

/* checkout steps */
.steps-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 8px 0 6px;
  max-width: 480px;
  margin: 0 auto
}

.step-node {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--muted);
  white-space: nowrap
}

.step-node .dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--atmo);
  border: 1.5px solid var(--border);
  display: grid;
  place-items: center;
  font-size: 12.5px;
  color: var(--muted);
  flex: none
}

.step-node.active {
  color: var(--ink)
}

.step-node.active .dot {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff
}

.step-node.done .dot {
  background: var(--green);
  border-color: var(--green);
  color: #fff
}

.step-node.done {
  color: var(--ink)
}

.step-line {
  width: 40px;
  height: 2px;
  background: var(--border);
  margin: 0 8px;
  flex: none
}

.step-line.done {
  background: var(--green)
}

@media(max-width:520px) {
  .step-node .lbl {
    display: none
  }

  .step-line {
    width: 24px
  }
}

/* cart */
.cartgrid {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 34px;
  padding: 40px 0 70px;
  align-items: start
}

.cart-head {
  display: none;
  grid-template-columns: 96px 1fr 150px 110px;
  gap: 16px;
  padding: 0 16px 12px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px
}

.cart-head .c-qty,
.cart-head .c-total {
  text-align: center
}

.citem {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 14px;
  background: #fff;
  align-items: center
}

.citem .ph {
  width: 84px;
  height: 84px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex: none;
  padding: 8px
}

.citem .ph svg {
  height: 100%;
  width: auto
}

.citem .t {
  min-width: 0
}

.citem .t b {
  font-family: var(--display);
  font-size: 15px;
  display: block;
  line-height: 1.3
}

.citem .t span {
  font-size: 13px;
  color: var(--muted)
}

.citem .t .unit {
  display: block;
  margin-top: 2px
}

.citem .row2 {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px
}

.citem .pr {
  font-family: var(--display);
  font-weight: 800;
  white-space: nowrap
}

.citem .rm {
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  text-decoration: underline;
  padding: 4px
}

.citem .rm:hover {
  color: #c0392b
}

.citem.gift {
  border-style: dashed;
  border-color: var(--green);
  background: #F2FBF7
}

.citem.gift .pr {
  color: var(--green)
}

@media(min-width:820px) {
  .cart-head {
    display: grid
  }

  .citem {
    grid-template-columns: 96px 1fr 150px 110px
  }

  .citem .row2 {
    grid-column: auto;
    display: contents
  }

  .citem .row2 .qty {
    justify-self: center
  }

  .citem .row2 .pr {
    justify-self: center;
    font-size: 16px
  }

  .citem .rm {
    display: block;
    margin-top: 6px
  }
}

.summary {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  background: #fff;
  position: sticky;
  top: 96px
}

.summary h3 {
  font-size: 19px;
  margin-bottom: 16px
}

.srow {
  display: flex;
  justify-content: space-between;
  font-size: 14.5px;
  margin-bottom: 10px
}

.srow.total {
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: 12px
}

.srow .green {
  color: var(--green);
  font-weight: 600
}

.gbar {
  margin: 6px 0 20px
}

.gbar .track {
  height: 8px;
  background: var(--atmo);
  border: 1px solid var(--border);
  border-radius: 20px;
  position: relative;
  margin: 26px 6px 8px
}

.gbar .fill {
  position: absolute;
  left: 0;
  top: -1px;
  bottom: -1px;
  background: linear-gradient(90deg, var(--blue), var(--green));
  border-radius: 20px;
  transition: width .4s
}

.gbar .mk {
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--border);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  font-size: 9px;
  color: #fff
}

.gbar .mk.hit {
  background: var(--green);
  border-color: var(--green)
}

.gbar .lbl {
  position: absolute;
  top: -24px;
  transform: translateX(-50%);
  font-family: var(--display);
  font-weight: 700;
  font-size: 10.5px;
  color: var(--muted);
  white-space: nowrap
}

.gbar .msg {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  margin-top: 6px
}

.gbar .msg b {
  color: var(--green)
}

.empty-cart {
  text-align: center;
  padding: 80px 0
}

.empty-cart p {
  color: var(--muted)
}

.citem .qty {
  transform: scale(.82);
  transform-origin: center
}

.citem .row2 {
  justify-content: flex-start;
  gap: 16px
}

@media(min-width:820px) {
  .citem .row2 {
    gap: 0
  }
}

.cart-feat {
  grid-template-columns: 1fr !important;
  margin-top: 20px;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  background: #fff;
  gap: 18px
}

.cart-feat .feat-item {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  padding: 0
}

.cart-feat .feat-ic {
  margin: 0;
  flex: none;
  width: 44px;
  height: 44px
}

/* checkout */
.ckgrid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 34px;
  padding: 40px 0 70px;
  align-items: start
}

.card {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px;
  background: #fff;
  margin-bottom: 18px
}

.card h3 {
  font-size: 18px;
  margin-bottom: 16px
}

.frow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px
}

.frow.one {
  grid-template-columns: 1fr
}

input[type=text],
input[type=tel],
input[type=email],
input[type=password],
input[type=number],
input[type=search],
input[type=url],
input:not([type]),
textarea,
select {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 12px 13px;
  font-family: var(--body);
  font-size: 14.5px;
  color: var(--ink);
  background: #fff
}

input[type=text]:disabled,
input[type=tel]:disabled,
input[type=email]:disabled,
input[type=password]:disabled,
input[type=number]:disabled,
select:disabled {
  background: #F6F9FA;
  color: var(--muted);
  cursor: not-allowed
}

input[type=checkbox],
input[type=radio] {
  width: 16px;
  height: 16px;
  accent-color: var(--blue);
  cursor: pointer
}

::placeholder {
  color: #9aabb2;
  opacity: 1
}

input:focus,
textarea:focus {
  outline: 2px solid var(--blue);
  outline-offset: 0;
  border-color: var(--blue)
}

label.f {
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  display: block;
  margin-bottom: 6px
}

.payopt {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  cursor: pointer
}

.payopt.on {
  border-color: var(--blue);
  background: #F3F9FD
}

.payopt input {
  accent-color: var(--blue)
}

.payopt b {
  font-family: var(--display);
  font-size: 14.5px
}

.payopt span {
  font-size: 12.5px;
  color: var(--muted);
  display: block
}

/* confirm */
.confirm {
  text-align: center;
  padding: 80px 0
}

.confirm .ck {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #E5F4EE;
  color: var(--green);
  display: grid;
  place-items: center;
  margin: 0 auto 22px
}

.confirm h1 {
  font-size: 32px
}

.confirm p {
  color: var(--muted)
}

.oid {
  font-family: var(--display);
  font-weight: 700;
  background: var(--atmo);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 16px;
  display: inline-block;
  margin: 14px 0 26px
}

/* blog */
.bgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px
}

.bpost {
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  transition: .2s;
  display: flex;
  flex-direction: column
}

.bpost:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 46px -28px rgba(6, 59, 92, .32)
}

.bpost .th {
  aspect-ratio: 16/10;
  position: relative
}

.bpost .tp {
  position: absolute;
  top: 14px;
  left: 14px;
  background: #fff;
  color: var(--blue);
  font-family: var(--display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 11px;
  border-radius: 20px
}

.bpost .bd {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1
}

.bpost h3 {
  font-size: 19px;
  line-height: 1.25
}

.bpost .meta {
  font-size: 13px;
  color: var(--muted)
}

.bpost p {
  font-size: 14px;
  color: var(--muted);
  margin: 0
}

article.bp {
  max-width: 720px;
  margin: 0 auto;
  padding: 30px 28px 30px
}

article.bp .kicker {
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green)
}

article.bp h1 {
  font-size: clamp(30px, 4vw, 42px);
  margin: 12px 0 14px
}

article.bp .meta {
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 24px
}

article.bp .hero-ph {
  aspect-ratio: 16/7;
  border-radius: 16px;
  border: 1px solid var(--border);
  margin-bottom: 30px
}

article.bp p {
  font-size: 17.5px;
  line-height: 1.76;
  color: #28353c;
  margin: 0 0 22px
}

article.bp h2 {
  font-size: 25px;
  margin: 36px 0 14px
}

/* account */
.acct {
  max-width: 920px;
  margin: 0 auto;
  padding: 50px 28px 80px
}

.login-card {
  max-width: 420px;
  margin: 0 auto;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 34px;
  background: #fff;
  box-shadow: 0 30px 60px -40px rgba(6, 59, 92, .3)
}

.login-ic {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #E9F3FA;
  color: var(--blue);
  display: grid;
  place-items: center;
  margin-bottom: 16px
}

.login-card h2 {
  font-size: 24px;
  margin-bottom: 6px
}

.login-card .muted {
  font-size: 14px;
  margin-bottom: 22px;
  display: block
}

.login-benefits {
  list-style: none;
  margin: 0 0 24px;
  padding: 16px 18px;
  background: var(--atmo);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 9px
}

.login-benefits li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  color: #28353c
}

.login-benefits li svg {
  flex: none;
  color: var(--green)
}

.otp-row {
  display: flex;
  gap: 10px;
  margin: 8px 0 6px
}

.otp-row input {
  width: 56px;
  height: 56px;
  text-align: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px
}

.hint {
  font-size: 12.5px;
  color: var(--muted)
}

.err {
  color: #c0392b;
  font-size: 13px;
  margin-top: 8px;
  display: none
}

.err.on {
  display: block
}

.acct-grid {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 28px;
  align-items: start
}

.acct-nav {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  padding: 10px
}

.acct-nav button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 14px;
  border: none;
  border-radius: 8px;
  background: none;
  font-family: var(--body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .02em;
  cursor: pointer;
  color: var(--ink);
  margin-bottom: 4px;
  transition: background .15s
}

.acct-nav button:first-of-type {
  margin-top: 2px
}

.acct-nav button:last-of-type {
  margin-bottom: 0
}

.acct-nav button:hover:not(.on) {
  background: #E5F4EE
}

.acct-nav button.on {
  background: #F3F9FD;
  color: var(--blue);
  box-shadow: inset 3px 0 0 var(--blue)
}

.order {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 14px;
  background: #fff
}

.order .top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px
}

.order b {
  font-family: var(--display)
}

.status {
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  padding: 5px 11px;
  border-radius: 20px
}

.status.c {
  background: #E5F4EE;
  color: var(--green)
}

.status.d {
  background: #E9F3FA;
  color: var(--blue)
}

.order .items {
  font-size: 14px;
  color: var(--muted)
}

.addr {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 12px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start
}

.addr b {
  font-family: var(--display)
}

.addr p {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--muted)
}

.vrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 12px;
  background: #fff
}

.vrow b {
  font-family: var(--display);
  font-size: 15px
}

.vrow span {
  font-size: 13px;
  color: var(--muted);
  display: block
}

.vbadge {
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 20px
}

.vbadge.ok {
  background: #E5F4EE;
  color: var(--green)
}

/* contact page */
.contact-grid {
  display: grid;
  grid-template-columns: 1.3fr .9fr;
  gap: 28px;
  align-items: start
}

.contact-side {
  display: flex;
  flex-direction: column;
  gap: 20px
}

.contact-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--atmo)
}

.contact-row:last-child {
  border-bottom: none;
  padding-bottom: 0
}

.contact-row b {
  display: block;
  font-family: var(--display);
  font-size: 14.5px
}

.contact-row span {
  font-size: 12.5px;
  color: var(--muted)
}

.contact-ic {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #E9F3FA;
  color: var(--blue);
  display: grid;
  place-items: center;
  flex: none
}

.contact-ic-g {
  background: #E5F4EE;
  color: var(--green)
}

@media(max-width:820px) {
  .contact-grid {
    grid-template-columns: 1fr
  }
}

/* static pages */
.static {
  max-width: 760px;
  margin: 0 auto;
  padding: 56px 28px 80px
}

.static h1 {
  font-size: 36px;
  margin: 10px 0 18px
}

.static p {
  color: #28353c;
  font-size: 16.5px
}

/* footer */
footer {
  background: var(--chrome);
  color: var(--chrome-ink);
  padding: 64px 0 28px;
  margin-top: 40px
}

.f-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 36px
}

.f-brand {
  flex: 1.5 1 240px
}

.f-logo-chip {
  display: inline-block;
  margin-bottom: 14px
}

.f-brand img {
  height: 36px;
  width: auto;
  display: block
}

.f-brand p {
  color: var(--chrome-sec);
  font-size: 14px;
  max-width: 280px
}

.f-social {
  display: flex;
  gap: 8px;
  margin-top: 16px
}

.f-social a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--chrome-div);
  color: var(--chrome-sec);
  display: grid;
  place-items: center;
  cursor: pointer
}

.f-social a:hover {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue)
}

.f-col {
  flex: 1 1 140px
}

.f-news {
  flex: 1.4 1 220px
}

.f-col h4 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 14px;
  color: var(--chrome-ink)
}

.f-col a {
  display: block;
  color: var(--chrome-sec);
  font-size: 14px;
  padding: 5px 0;
  cursor: pointer
}

.f-col a:hover {
  color: var(--green)
}

.f-news h4 {
  color: var(--chrome-ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 14px
}

.f-news p {
  color: var(--chrome-sec);
  font-size: 14px;
  margin: 0 0 12px
}

.news-row {
  display: flex;
  gap: 8px
}

.news-row input {
  flex: 1;
  background: #fff;
  border: 1px solid var(--chrome-div);
  color: var(--chrome-ink);
  border-radius: 9px;
  padding: 11px 13px;
  font-size: 14px
}

.news-row input::placeholder {
  color: #85a2b4
}

.f-bottom {
  border-top: 1px solid var(--chrome-div);
  margin-top: 40px;
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  color: var(--chrome-sec);
  font-size: 13px
}

.f-bottom a {
  color: var(--chrome-sec);
  cursor: pointer
}

.f-bottom a:hover {
  color: var(--blue);
  text-decoration: underline
}

/* wishlist heart on cards */
.heart {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #9aa8ae;
  z-index: 2;
  transition: .15s
}

.heart:hover {
  color: var(--green)
}

.heart.on {
  color: #008A5B
}

.heart.on svg {
  fill: #008A5B;
  stroke: #008A5B
}

.wish-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--border);
  background: #fff;
  border-radius: 12px;
  padding: 11px 16px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer
}

.wish-btn.on {
  border-color: var(--green);
  color: var(--green);
  background: #F2FBF7
}

.wish-btn.on svg {
  fill: var(--green)
}

.coupon-box {
  margin: 12px 0
}

.coupon-in {
  display: flex;
  gap: 8px
}

.coupon-in input {
  flex: 1;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: var(--body);
  font-size: 14px
}

.coupon-on {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #F2FBF7;
  border: 1px dashed var(--green);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px
}

.coupon-on button {
  border: none;
  background: none;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
  font-size: 13px
}

.offers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px
}

.offer {
  text-align: left;
  border: 1px dashed var(--border);
  background: #fff;
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  transition: .15s
}

.offer:hover {
  border-color: var(--green);
  background: #F2FBF7
}

.offer b {
  display: block;
  font-family: var(--display);
  font-size: 13px;
  color: var(--blue)
}

.offer span {
  font-size: 11.5px;
  color: var(--muted)
}

/* ===== ADMIN ===== */
body.admin-mode .ann,
body.admin-mode>header,
body.admin-mode>footer,
body.admin-mode>main>.view:not(#v-admin) {
  display: none !important
}

#v-admin {
  display: none
}

#v-admin.on {
  display: block
}

.adm {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 230px 1fr;
  background: #F6F9FA
}

.adm-side {
  background: var(--footer);
  color: #fff;
  padding: 24px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto
}

.adm-side .logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 0 8px
}

.adm-side .logo img {
  height: 44px
}

.adm-side .tag {
  font-size: 11px;
  color: var(--f-sec);
  padding: 0 8px;
  margin-bottom: 28px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-family: var(--display);
  font-weight: 700
}

.adm-side button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--f-sec);
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  padding: 9px 12px;
  border-radius: 9px;
  cursor: pointer;
  margin-bottom: 3px;
  transition: .15s
}

.adm-side button:first-of-type {
  margin-top: 6px
}

.adm-side button:hover {
  background: rgba(63, 143, 31, .32);
  color: #fff
}

.adm-side button.on {
  background: var(--blue);
  color: #fff
}

.adm-side .exit {
  display: block;
  margin-top: 18px;
  color: #9fbccb;
  font-size: 13px;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 600
}

.adm-side .exit.exit2 {
  margin-top: 6px
}

.adm-side .exit:hover {
  color: #fff
}

.adm-main {
  padding: 32px 34px 60px;
  overflow: auto
}

.adm-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 26px;
  flex-wrap: wrap
}

.adm-head h1 {
  font-size: 26px
}

.adm-head .sub {
  color: var(--muted);
  font-size: 14px;
  margin-top: 2px
}

.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 14px
}

.metric {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px
}

.metric .l {
  font-size: 12.5px;
  color: var(--muted);
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase
}

.metric .v {
  font-family: var(--display);
  font-weight: 800;
  font-size: 30px;
  margin-top: 8px;
  color: var(--ink)
}

.metric .d {
  font-size: 12.5px;
  color: var(--green);
  margin-top: 4px;
  font-weight: 600
}

.metric.blue {
  background: linear-gradient(135deg, #E9F3FA, #fff)
}

.metric.green {
  background: linear-gradient(135deg, #E5F4EE, #fff)
}

.panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px;
  margin-bottom: 20px
}

.panel h3 {
  font-size: 17px;
  margin-bottom: 14px
}

.adm-bar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 16px
}

.adm-bar .sp {
  flex: 1
}

select.adm-sel,
.adm-search {
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 10px 13px;
  font-family: var(--body);
  font-size: 14px;
  background: #fff;
  color: var(--ink)
}

select.adm-sel {
  font-family: var(--display);
  font-weight: 600;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2365747B' stroke-width='2.5'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 11px center;
  padding-right: 32px;
  -webkit-appearance: none;
  appearance: none
}

table.atbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  display: table;
  table-layout: auto
}

table.atbl thead {
  display: table-header-group
}

table.atbl tbody {
  display: table-row-group
}

table.atbl tr {
  display: table-row
}

table.atbl th,
table.atbl td {
  display: table-cell
}

table.atbl th {
  text-align: left;
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 12px;
  border-bottom: 2px solid var(--border)
}

table.atbl td {
  padding: 13px 12px;
  border-bottom: 1px solid var(--atmo);
  vertical-align: middle
}

table.atbl tr:hover td {
  background: #FAFDFC
}

table.atbl .thumb-sm {
  width: 42px;
  height: 42px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  padding: 4px
}

table.atbl .thumb-sm svg {
  height: 100%;
  width: auto
}

table.atbl .thumb-sm img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 6px
}

.atbl-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -4px
}

.atbl-wrap table.atbl {
  min-width: 640px
}

.pill {
  font-family: var(--display);
  font-weight: 700;
  font-size: 11.5px;
  padding: 5px 10px;
  border-radius: 20px;
  display: inline-block
}

.pill.g {
  background: #E5F4EE;
  color: var(--green)
}

.pill.b {
  background: #E9F3FA;
  color: var(--blue)
}

.pill.gray {
  background: #EEF2F3;
  color: var(--muted)
}

.pill.warn {
  background: #FDF0E7;
  color: #C77B33
}

.adm-btn {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13.5px;
  border-radius: 9px;
  padding: 9px 15px;
  border: 1.5px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px
}

.adm-btn.pri {
  background: var(--blue);
  color: #fff
}

.adm-btn.pri:hover {
  background: var(--blue-hover)
}

.adm-btn.ol {
  background: #fff;
  border-color: var(--border);
  color: var(--ink)
}

.adm-btn.ol:hover {
  border-color: var(--blue);
  color: var(--blue)
}

.adm-btn.dng {
  background: #fff;
  border-color: #e6c9c2;
  color: #c0392b
}

.adm-btn.dng:hover {
  background: #c0392b;
  color: #fff
}

.tlink {
  color: var(--blue);
  cursor: pointer;
  font-weight: 600
}

.tlink:hover {
  text-decoration: underline
}

/* modal */
.modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(6, 30, 45, .55);
  z-index: 200;
  display: none;
  align-items: flex-start;
  justify-content: center;
  overflow: auto;
  padding: 34px 16px
}

.modal-bg.on {
  display: flex
}

.modal {
  background: #fff;
  border-radius: 18px;
  width: min(760px, 100%);
  padding: 28px;
  box-shadow: 0 40px 80px -30px rgba(6, 30, 45, .6)
}

.modal h2 {
  font-size: 22px;
  margin-bottom: 4px
}

.modal .mtop {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px
}

.modal .x {
  border: none;
  background: #F0F4F5;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 18px;
  color: var(--muted)
}

.fgrid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}

.fld {
  margin-bottom: 14px
}

.fld label {
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  display: block;
  margin-bottom: 6px
}

.fld small {
  color: var(--muted);
  font-weight: 500
}

/* Quill rich-text editor: fixed total height, toolbar stays put, only the
   content area below it scrolls (a long field can never push the toolbar,
   or the surrounding modal, out of view). */
.quill-wrap {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: #fff
}

.quill-wrap .ql-toolbar.ql-snow {
  flex: none;
  border: none;
  border-bottom: 1px solid var(--border);
  background: #F4FAF9
}

.quill-wrap .ql-container.ql-snow {
  flex: 1;
  border: none;
  overflow: hidden;
  font-family: inherit;
  font-size: 14px
}

.quill-wrap .ql-editor {
  height: 100%;
  overflow-y: auto
}

.imggrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 10px;
  margin-top: 8px
}

.imgcell {
  position: relative;
  aspect-ratio: 1;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: #F4FAF9
}

.imgcell img {
  width: 100%;
  height: 100%;
  object-fit: contain
}

.imgcell .del {
  position: absolute;
  top: 3px;
  right: 3px;
  background: rgba(255, 255, 255, .9);
  border: none;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  cursor: pointer;
  color: #c0392b;
  font-size: 13px
}

.imgadd {
  border: 1.5px dashed var(--blue);
  border-radius: 10px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--blue);
  font-size: 24px;
  background: #F3F9FD
}

.rowset .rline {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center
}

.rowset .rline.sizes-row {
  grid-template-columns: 1.4fr 1fr 1fr 1fr auto
}

.rowset .rline.gift-row {
  grid-template-columns: 1fr 2fr auto
}

.rowset .rline.reel-row {
  grid-template-columns: 80px 1fr 1fr auto;
  align-items: start
}

.rowset input {
  padding: 9px 11px;
  min-width: 0
}

.mini-x {
  border: none;
  background: #F0F4F5;
  width: 34px;
  height: 38px;
  border-radius: 8px;
  cursor: pointer;
  color: #c0392b
}

.addline {
  background: none;
  border: 1px dashed var(--border);
  border-radius: 9px;
  padding: 8px 12px;
  cursor: pointer;
  font-family: var(--display);
  font-weight: 600;
  font-size: 13px;
  color: var(--blue)
}

.cust-detail dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 18px;
  font-size: 14px;
  margin: 0
}

.cust-detail dt {
  color: var(--muted);
  font-family: var(--display);
  font-weight: 600
}

.gate {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--footer)
}

.gate .box {
  background: #fff;
  border-radius: 20px;
  padding: 40px;
  width: min(400px, 92%);
  text-align: center;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .5)
}

.gate img {
  height: 52px;
  margin: 0 auto 18px
}

.gate h2 {
  font-size: 24px;
  margin-bottom: 6px
}

.gate .muted {
  font-size: 14px;
  margin-bottom: 20px;
  display: block
}

@media(max-width:820px) {
  .adm {
    grid-template-columns: 1fr
  }

  .adm-side {
    position: static;
    height: auto;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
  }

  .adm-side .logo {
    margin-bottom: 0;
    flex: none
  }

  .adm-side .logo img {
    height: 28px
  }

  .adm-side .tag {
    display: none
  }

  .adm-side button {
    width: auto;
    white-space: nowrap;
    margin-bottom: 0;
    flex: none
  }

  .adm-side .exit {
    margin-top: 0;
    flex: none
  }

  .metrics {
    grid-template-columns: 1fr 1fr
  }

  .fgrid2 {
    grid-template-columns: 1fr
  }
}

/* toast */
#toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 20px);
  background: var(--footer);
  color: #fff;
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  padding: 12px 20px;
  border-radius: 12px;
  opacity: 0;
  pointer-events: none;
  transition: .3s;
  z-index: 99;
  box-shadow: 0 16px 34px -12px rgba(6, 59, 92, .5)
}

#toast.on {
  opacity: 1;
  transform: translate(-50%, 0)
}

@media(max-width:980px) {
  .mainnav {
    display: none
  }

  .menu-toggle {
    display: grid
  }

  .pgrid,
  .tiles,
  .reels,
  .cab-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .band .tiles {
    grid-template-columns: repeat(2, 1fr)
  }

  .ig {
    grid-template-columns: repeat(3, 1fr)
  }

  .rev-grid,
  .bgrid,
  .ing-grid,
  .steps {
    grid-template-columns: 1fr 1fr
  }

  .pd,
  .cartgrid,
  .ckgrid {
    grid-template-columns: 1fr
  }

  .summary {
    position: static
  }

  .acct-grid {
    grid-template-columns: 1fr
  }
}

@media(max-width:600px) {

  .tiles,
  .reels,
  .rev-grid,
  .bgrid,
  .ing-grid,
  .steps,
  .band .tiles {
    grid-template-columns: 1fr
  }

  .pgrid,
  .cab-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px
  }

  .pcard .ph {
    padding: 6px
  }

  .pcard .bd {
    padding: 10px 12px 12px;
    gap: 5px
  }

  .pcard h3 {
    font-size: 14px;
    line-height: 1.25
  }

  .pcard .sub {
    font-size: 11.5px
  }

  .pcard .price .now {
    font-size: 15.5px
  }

  .pcard .price .mrp {
    font-size: 12px
  }

  .pcard .btn {
    padding: 9px 12px;
    font-size: 13px
  }

  .ig {
    grid-template-columns: repeat(2, 1fr)
  }

  .f-brand,
  .f-col,
  .f-news {
    flex-basis: 100%
  }

  .wrap {
    padding: 0 20px
  }

  .video-panel {
    aspect-ratio: 16/10
  }

  .video-panel .hs-content {
    padding: 24px 22px;
    gap: 10px
  }

  /* iOS Safari auto-zooms the page when a focused input's font-size is
     under 16px — bump to 16px on mobile only, desktop keeps the tighter 14.5px */
  input[type=text],
  input[type=tel],
  input[type=email],
  input[type=password],
  input[type=number],
  input[type=search],
  input[type=url],
  input:not([type]),
  textarea,
  select {
    font-size: 16px
  }

  .icon-btn {
    width: 42px;
    height: 42px
  }
}

@media(max-width:380px) {
  .brand {
    padding: 4px 6px
  }

  .brand img.brand-logo {
    height: 34px
  }

  .nav-left,
  .nav-right {
    gap: 0
  }

  .icon-btn {
    width: 38px;
    height: 38px
  }
}

@media(max-width:520px) {
  .frow {
    grid-template-columns: 1fr
  }

  .rowset .rline,
  .rowset .rline.sizes-row,
  .rowset .rline.gift-row,
  .rowset .rline.reel-row {
    grid-template-columns: 1fr;
    gap: 6px
  }

  .rowset .rline .mini-x {
    justify-self: start;
    width: 44px
  }

  .metrics {
    grid-template-columns: 1fr
  }

  .adm-bar {
    flex-direction: column;
    align-items: stretch
  }

  .adm-bar .adm-search,
  .adm-bar select.adm-sel {
    width: 100%
  }

  .buyrow {
    flex-wrap: wrap
  }

  .buyrow .btn {
    flex: 1 1 100%
  }

  .buyrow .wish-btn {
    flex: none;
    width: 48px;
    padding: 11px;
    justify-content: center
  }

  .buyrow .wish-btn svg {
    margin: 0
  }

  .sizes {
    flex-wrap: wrap
  }

  .modal {
    padding: 20px
  }

  .modal-bg {
    padding: 16px 10px
  }

  .otp-row input {
    width: 46px;
    height: 46px
  }

  .score {
    width: 100%
  }

  .hero-cross {
    flex-direction: column;
    text-align: center
  }

  .adm-head {
    flex-direction: column;
    align-items: flex-start
  }
}

/* ============ SCROLL REVEAL ============ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s ease, transform .6s ease
}

.reveal.in {
  opacity: 1;
  transform: translateY(0)
}

.reveal:nth-child(2) { transition-delay: .06s }
.reveal:nth-child(3) { transition-delay: .12s }
.reveal:nth-child(4) { transition-delay: .18s }
.reveal:nth-child(5) { transition-delay: .24s }
.reveal:nth-child(6) { transition-delay: .3s }

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

  .reveal {
    opacity: 1;
    transform: none
  }
}

/* ============ HERO CAROUSEL ============ */
.video-panel .hs-track {
  position: absolute;
  inset: 0
}

.video-panel .hs-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none
}

.video-panel .hs-slide.on {
  opacity: 1;
  pointer-events: auto
}

.video-panel .hs-slide img,
.video-panel .hs-slide video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: linear-gradient(120deg, #DCEFF2, #EAF4FB 45%, #DDF3E9);
  display: block
}

.video-panel .hs-arr {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .88);
  border: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--footer);
  z-index: 3;
  transition: .2s
}

.video-panel .hs-arr:hover {
  background: #fff
}

.video-panel .hs-arr.l {
  left: 14px
}

.video-panel .hs-arr.r {
  right: 14px
}

.video-panel .hs-dots {
  position: absolute;
  bottom: 16px;
  right: 18px;
  display: flex;
  gap: 6px;
  z-index: 3
}

.video-panel .hs-dots button {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .55);
  cursor: pointer;
  padding: 0;
  transition: .2s
}

.video-panel .hs-dots button.on {
  background: #fff;
  width: 18px;
  border-radius: 5px
}

@media(max-width:600px) {
  .video-panel .hs-arr {
    width: 28px;
    height: 28px;
    font-size: 16px
  }
}

/* ============ OUTLETS ============ */
.outlets-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px
}

.outlet-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  transition: .2s
}

.outlet-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 46px -28px rgba(6, 59, 92, .32)
}

.outlet-img {
  aspect-ratio: 16/10;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--atmo)
}

.outlet-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0
}

.outlet-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px
}

.outlet-body h3 {
  font-size: 19px
}

.outlet-addr {
  font-size: 14px;
  color: var(--muted);
  margin: 0
}

.outlet-line {
  font-size: 13.5px;
  color: #28353c;
  margin: 2px 0
}

.outlet-desc {
  font-size: 13.5px;
  color: var(--muted);
  margin-top: 6px
}

.outlet-desc p {
  margin: 0 0 8px
}

.outlet-body .btn {
  align-self: flex-start;
  margin-top: 10px
}

@media(max-width:980px) {
  .outlets-grid {
    grid-template-columns: 1fr 1fr
  }
}

@media(max-width:600px) {
  .outlets-grid {
    grid-template-columns: 1fr
  }
}

/* ============ RICH TEXT (QUILL) ============ */
.ql-host {
  background: #fff
}

.ql-toolbar.ql-snow {
  border-color: var(--border) !important;
  border-radius: 10px 10px 0 0;
  font-family: var(--body)
}

.ql-container.ql-snow {
  border-color: var(--border) !important;
  border-radius: 0 0 10px 10px;
  font-family: var(--body);
  font-size: 14.5px
}

.ql-editor {
  min-height: 120px
}

.pd-desc p,
.pd-detail p,
.outlet-desc p {
  margin: 0 0 10px
}

.pd-detail {
  margin-top: 14px;
  color: #28353c;
  font-size: 15.5px
}

.pd-detail h2,
.pd-detail h3 {
  margin: 20px 0 10px
}

/* ============ ADMIN: SITE THEME PICKER ============ */
.theme-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 12px
}

.theme-swatch {
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  font-family: var(--display)
}

.theme-swatch.on {
  border-color: var(--blue);
  background: #F3F9FD
}

.theme-swatch-dots {
  display: flex;
  gap: 3px
}

.theme-swatch-dots i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: block
}

/* ============ ADMIN: REPORTS ============ */
.rep-layout {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 20px;
  align-items: start
}

.rep-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 10px
}

.rep-group-t {
  font-family: var(--display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 14px 10px 6px
}

.rep-group:first-child .rep-group-t {
  margin-top: 4px
}

.rep-item {
  text-align: left;
  border: none;
  background: none;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13.5px;
  color: #28353c;
  width: 100%
}

.rep-item:hover {
  background: var(--atmo)
}

.rep-item.on {
  background: var(--blue);
  color: #fff
}

.rep-view {
  min-height: 220px
}

.rep-chart-wrap {
  margin: 6px 0 22px;
  max-width: 100%
}

@media(max-width:820px) {
  .rep-layout {
    grid-template-columns: 1fr
  }

  .rep-nav {
    flex-direction: row;
    flex-wrap: wrap;
    overflow-x: auto
  }

  .rep-group {
    display: flex;
    flex-direction: column
  }
}

table.atbl .thumb-sm video {
  height: 100%;
  width: auto;
  object-fit: cover;
  border-radius: 6px
}