/* Larger interface typography; bottle-label text remains fitted to the packaging artwork. */
body { font-size: 15px; }
.announcement { font-size: 11.5px; }
.category-nav { font-size: 12px; }
.campaign-copy p,
.campaign-copy a,
.editorial-copy button { font-size: 12px; }
.section-title h2,
.catalogue-heading h2 { font-size: 30px; }
.trend-tab { font-size: 12px; }
.product-info h3,
.product-info .price { font-size: 14px; }
.product-info .price-note { grid-column: 1 / -1; color: #8a6a32; font-size: 10px; font-weight: 600; letter-spacing: .06em; }
.price-tier { display: block; margin-top: 9px; color: #696964; font-size: 10px; letter-spacing: .07em; }
.price-tier.trade { color: #8a6a32; font-weight: 600; }
.add-button:disabled,.modal-add:disabled { cursor: not-allowed; opacity: .58; }
.product-info .category { font-size: 12px; }
.add-button { font-size: 11px; }
.catalogue-heading p { font-size: 11px; }
.catalogue-heading > span { font-size: 12px; }
.filter { font-size: 11px; }
.search input { font-size: 13px; }
.brand-story p { font-size: 11px; }
footer a,
footer p { font-size: 13px; }
footer h3,
.footer-bottom { font-size: 11px; }
.drawer-head h2 { font-size: 20px; }
.bag-item h3 { font-size: 12px; }
.bag-item p,
.bag-summary p { font-size: 11px; }
.modal-category { font-size: 11px; }
.modal-copy h2 { font-size: 34px; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
}

.business-paths {
  padding: 96px 3vw;
  background: #fff;
}

.business-intro {
  max-width: 760px;
  margin: 0 auto 42px;
}

.business-intro > p,
.process-copy > p,
.trade-faq > div > p,
.path-card > p {
  margin: 0 0 10px;
  font-size: 11px;
  letter-spacing: .13em;
}

.business-intro > span {
  display: block;
  margin-top: 16px;
  color: var(--muted);
}

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

.path-card {
  display: flex;
  min-height: 430px;
  flex-direction: column;
  padding: 38px;
  border: 1px solid var(--line);
  background: #faf9f6;
}

.path-card.path-koko {
  background: var(--navy);
  color: #fff;
}

.path-card > span {
  margin-bottom: 55px;
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  letter-spacing: .1em;
}

.path-card h3 {
  margin: 0 0 16px;
  font-size: 36px;
  font-weight: 500;
  letter-spacing: -.035em;
}

.path-card > div {
  color: var(--muted);
  line-height: 1.65;
}

.path-koko > div { color: #d8deea; }

.path-card ul {
  margin: 24px 0 32px;
  padding-left: 19px;
  line-height: 1.8;
}

.path-card a,
.business-cta {
  width: fit-content;
  margin-top: auto;
  border: 0;
  border-bottom: 1px solid currentColor;
  padding: 0 0 5px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 12px;
  letter-spacing: .08em;
  text-decoration: none;
  cursor: pointer;
}

.business-note {
  max-width: 900px;
  margin: 24px auto 0;
  color: var(--muted);
  text-align: center;
  font-size: 12px;
}

.launch-process {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 8vw;
  padding: 100px 6vw;
  background: #e8dfd7;
}

.process-copy h2,
.trade-faq h2 {
  margin: 0 0 20px;
  font-size: clamp(42px, 5vw, 68px);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.045em;
}

.process-copy > span {
  color: #514f4c;
  line-height: 1.7;
}

.process-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: launch-step;
}

.process-steps li {
  display: grid;
  grid-template-columns: 32px 150px 1fr;
  gap: 18px;
  align-items: start;
  padding: 22px 0;
  border-top: 1px solid #15151540;
  counter-increment: launch-step;
}

.process-steps li::before {
  content: "0" counter(launch-step);
  font-size: 11px;
  letter-spacing: .08em;
}

.process-steps b { font-size: 17px; font-weight: 500; }
.process-steps span { color: #514f4c; }

.trade-faq {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 7vw;
  padding: 100px 6vw;
}

.trade-faq > div {
  grid-row: 1 / span 5;
}

.trade-faq details {
  padding: 20px 0;
  border-top: 1px solid var(--line);
}

.trade-faq summary {
  cursor: pointer;
  font-size: 17px;
  font-weight: 500;
}

.trade-faq details p {
  max-width: 680px;
  margin-bottom: 0;
  color: var(--muted);
}

.bag-checkout:not(:disabled) {
  background: var(--ink);
  color: #fff;
  cursor: pointer;
}

.modal-care {
  margin: -16px 0 28px;
  padding-left: 12px;
  border-left: 2px solid var(--sand);
  color: var(--muted);
  font-size: 12px;
}

.modal-routes {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 24px;
}

.modal-routes .business-cta {
  margin-top: 0;
  font-size: 11px;
}

.policy-contact { text-align: right; color: inherit; text-decoration: none; }
.policy-hero {
  padding: 110px 8vw 90px;
  background: #e8dfd7;
  text-align: center;
}
.policy-hero p { margin: 0 0 16px; font-size: 11px; letter-spacing: .14em; }
.policy-hero h1 { margin: 0 0 24px; font-size: clamp(48px, 7vw, 86px); line-height: .93; font-weight: 400; letter-spacing: -.055em; }
.policy-hero span { color: #514f4c; }
.policy-content { max-width: 900px; margin: 0 auto; padding: 80px 24px 110px; }
.policy-content section { display: grid; grid-template-columns: 230px 1fr; gap: 38px; padding: 28px 0; border-top: 1px solid var(--line); }
.policy-content h2 { margin: 0; font-size: 17px; font-weight: 500; }
.policy-content p { margin: 0; color: var(--muted); line-height: 1.75; }
.policy-content a { color: var(--ink); }
.policy-page footer { grid-template-columns: 2fr 1fr; }

@media (max-width: 620px) {
  .announcement { font-size: 10.5px; }
  .category-nav { font-size: 11px; }
  .product-info h3,
  .product-info .price { font-size: 13px; }
  .product-info .category { font-size: 11.5px; }
  .modal-copy h2 { font-size: 29px; }
  .hero-actions { flex-direction: column; align-items: center; gap: 14px; }
  .business-paths { padding: 68px 16px; }
  .path-grid { grid-template-columns: 1fr; }
  .path-card { min-height: 390px; padding: 30px; }
  .path-card > span { margin-bottom: 35px; }
  .launch-process,
  .trade-faq { grid-template-columns: 1fr; padding: 72px 20px; }
  .trade-faq > div { grid-row: auto; }
  .process-steps li { grid-template-columns: 28px 105px 1fr; gap: 10px; }
  .process-steps b { font-size: 15px; }
  .policy-hero { padding: 78px 20px 65px; }
  .policy-content { padding: 55px 20px 75px; }
  .policy-content section { grid-template-columns: 1fr; gap: 10px; }
  .policy-page footer { grid-template-columns: 1fr; }

  /* Phone-first homepage composition. Keep the full three-product hero visible. */
  .announcement {
    min-height: 32px;
    height: auto;
    padding: 7px 14px;
    line-height: 1.35;
    text-align: center;
  }

  .masthead {
    min-height: 62px;
    height: auto;
    padding: 0 14px;
  }

  .masthead .wordmark {
    font-size: 16px;
    letter-spacing: .035em;
  }

  .header-actions { gap: 8px; }
  #account-link {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    font-size: 10px;
    letter-spacing: .02em;
  }
  .cart-open { white-space: nowrap; }

  .category-nav {
    height: 46px;
    gap: 22px;
    padding: 0 16px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .category-nav::-webkit-scrollbar { display: none; }
  .category-nav > * { flex: 0 0 auto; scroll-snap-align: start; }

  .campaign {
    display: flex;
    flex-direction: column;
    background: #dcc9b8;
  }

  .campaign-copy {
    min-height: 0;
    padding: 54px 24px 42px;
  }

  .campaign-copy h1 {
    max-width: 330px;
    margin-bottom: 20px;
    font-size: clamp(43px, 13vw, 56px);
    line-height: .91;
  }

  .campaign-copy > span {
    max-width: 325px;
    margin-bottom: 25px;
    font-size: 14px;
    line-height: 1.55;
  }

  .hero-actions {
    width: min(100%, 310px);
    gap: 12px;
  }

  .hero-actions a {
    width: 100%;
    border: 1px solid #151515;
    padding: 12px 14px;
  }

  .hero-actions a:first-child {
    background: #151515;
    color: #fff;
  }

  .campaign-products {
    min-height: 360px;
    border-top: 1px solid #15151518;
    background:
      radial-gradient(circle at 50% 68%, #fff9 0 18%, transparent 48%),
      linear-gradient(180deg, #eee7df 0%, #e6ddd4 100%);
  }

  .campaign-serum {
    left: -14%;
    bottom: -2%;
    width: 58%;
    z-index: 1;
  }

  .campaign-pump {
    right: -15%;
    bottom: -4%;
    width: 61%;
    z-index: 2;
  }

  .campaign-jar {
    display: block;
    right: auto;
    left: 25%;
    bottom: -8%;
    width: 52%;
    z-index: 3;
  }

  .business-intro { margin-bottom: 30px; }
  .business-intro h2 { font-size: 40px; line-height: 1; }

  .path-grid { gap: 12px; }
  .path-card {
    min-height: 0;
    padding: 27px 24px 29px;
  }
  .path-card > span { margin-bottom: 24px; }
  .path-card h3 { font-size: 31px; }
  .path-card ul { margin: 20px 0 25px; }
  .path-card a { margin-top: 4px; }

  .trending,
  .catalogue { padding: 58px 15px; }

  .section-title h2,
  .catalogue-heading h2 { font-size: 28px; }

  .trend-tabs {
    justify-content: flex-start;
    gap: 22px;
    overflow-x: auto;
    margin: 28px 0 22px;
    padding-bottom: 2px;
    scrollbar-width: none;
  }
  .trend-tabs::-webkit-scrollbar { display: none; }
  .trend-tab { flex: 0 0 auto; }

  .featured-grid,
  .product-grid {
    gap: 26px 9px;
  }

  .product-frame {
    height: auto;
    aspect-ratio: .76;
  }

  .product-info {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .product-info h3,
  .product-info .price,
  .product-info .price-note,
  .product-info .category { grid-column: 1; }

  .product-info h3 { min-height: 2.75em; }
  .product-info .price { font-size: 14px; }
  .product-info .category { line-height: 1.4; }
  .add-button { min-height: 43px; padding: 9px 6px; }

  .editorial-image { height: 360px; }
  .editorial-image img { height: 108%; margin-top: -3%; }
  .editorial-copy { padding: 54px 24px 58px; }
  .editorial-copy h2 { font-size: 44px; }

  .catalogue-heading {
    display: grid;
    gap: 12px;
    margin-bottom: 22px;
  }

  .catalogue-heading > span { justify-self: start; }
  .filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 5px;
    scrollbar-width: none;
  }
  .filters::-webkit-scrollbar { display: none; }
  .filter { flex: 0 0 auto; }

  .launch-process,
  .trade-faq { padding: 66px 20px; }

  .process-copy h2,
  .trade-faq h2 { font-size: 43px; }

  .process-steps { margin-top: 30px; }
  .process-steps li {
    grid-template-columns: 26px 86px 1fr;
    gap: 8px;
  }

  .brand-story h2 { font-size: 41px; }

  footer { gap: 28px 20px; }
  .footer-bottom { flex-direction: column; gap: 8px; }
}

@media (min-width: 621px) and (max-width: 900px) {
  .path-grid { grid-template-columns: 1fr; }
  .path-card { min-height: 360px; }
  .launch-process,
  .trade-faq { grid-template-columns: 1fr; }
  .trade-faq > div { grid-row: auto; }
}