:root {
  --bg:#fff;
  --surface:#f1f5fb;
  --ink:#13213b;
  --muted:#57667e;
  --line:#dce3ef;
  --accent:#185ce4;
  --on-accent:#fff;
  --radius:18px;
  --photo-bg:#edf1f4;
  --badge-bg:#fff;
  --badge-ink:#1854c4;
  --utility-bg:#13213b;
  --utility-ink:#dfe8fa
}

html[data-theme=dark] {
  --bg:#0c1423;
  --surface:#172339;
  --ink:#f1f5ff;
  --muted:#afbdd5;
  --line:#31415b;
  --accent:#90b8ff;
  --on-accent:#102143;
  --badge-bg:#fff;
  --badge-ink:#1854c4;
  --utility-bg:#070e1a;
  --utility-ink:#c3d2ef
}

.brand-mark {
  border-radius:50%;
  font-weight:400
}

.brand-name {
  font-size:36px;
  letter-spacing:-.07em
}

.header-main {
  min-height:98px
}

.search {
  border-radius:100px;
  border:0;
  padding-left:20px
}

.search button {
  border-radius:50%
}

.main-nav .nav-category {
  margin-right:10px
}

.main-nav a {
  font-weight:500
}

.hero {
  height:540px;
  margin-top:28px;
  background:#e8f1fc;
  color:#13213b;
  border-radius:24px
}

.hero-image {
  object-position:70% center
}

.hero:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#e9f2fc 0%,#e9f2fcb8 42%,transparent 73%)
}

.hero-copy {
  padding:65px 55px
}

.hero-copy h1 {
  font-size:clamp(3.4rem,5.8vw,5.8rem);
  max-width:10ch;
  letter-spacing:-.065em;
  margin-block:22px
}

.hero-copy h1 em {
  color:#185ce4
}

.hero-copy .eyebrow {
  color:#1854c4
}

.hero-copy p {
  color:#50647d;
  max-width:34ch
}

.hero-copy .button {
  background:#185ce4;
  color:#fff;
  border-radius:100px
}

.hero-meta {
  color:#354b6a
}

.benefits .icon {
  background:var(--surface);
  width:46px;
  height:46px;
  padding:11px;
  border-radius:50%
}

.category {
  border:0;
  position:relative;
  padding:25px 20px
}

.category .icon {
  width:38px;
  height:38px
}

.product-picture {
  border:1px solid var(--line)
}

.product-info {
  padding-inline:6px
}

.add-button {
  border-radius:50%
}

.collection {
  border:1px solid var(--line)
}

.collection-image {
  min-height:400px;
  background:#e8f1fc
}

.collection-image>img {
  object-position:78% center
}

.collection-copy h2 {
  font-size:3rem;
  max-width:10ch
}

.button {
  border-radius:100px
}

.guide {
  border-top:1px solid var(--line);
  padding-top:40px
}

.footer {
  border-radius:30px 30px 0 0
}

.detail-image {
  border:1px solid var(--line)
}

@media(max-width:760px) {
  .hero {
    height:670px;
    margin-top:16px;
    border-radius:20px
  }
  .hero-image {
    height:55%;
    top:auto;
    bottom:0;
    object-position:75% center
  }
  .hero:after {
    background:linear-gradient(180deg,#e9f2fc 0%,#e9f2fc 43%,transparent 66%)
  }
  .hero-copy {
    padding:33px 26px
  }
  .hero-copy h1 {
    font-size:3.25rem;
    max-width:10ch;
    margin-block:17px
  }
  .hero-copy .eyebrow {
    font-size:.6rem
  }
  .hero-copy p {
    font-size:.85rem;
    max-width:33ch;
    margin-bottom:22px
  }
  .hero-meta {
    font-size:.65rem
  }
  .category {
    padding:18px 12px
  }
  .category .icon {
    width:27px;
    height:27px
  }
  .collection-copy h2 {
    font-size:2.3rem
  }
  .collection-image {
    min-height:280px
  }
}

.hero-copy h1 {
  width:55%;
  max-width:620px
}

.hero-copy .eyebrow {
  max-width:none
}

@media(max-width:760px) {
  .hero-copy h1 {
    width:100%;
    max-width:none;
    font-size:clamp(2.6rem,10vw,3.8rem)
  }
}

.hero-meta {
  background:#e8f1fce8;
  color:#354b6a;
  padding:7px 12px;
  border-radius:100px
}

@media(max-width:380px) {
  .hero-copy h1 {
    font-size:2.2rem
  }
}