:root {
  --type-caption: 12px;
  --type-body: 16px;
  --type-card: 20px;
  --type-h3: 20px;
  --type-h2: clamp(24px, 2.4vw, 28px);
  --type-hero: clamp(36px, 4.2vw, 40px);
}

body {
  font-size: var(--type-body);
  line-height: 1.55;
}

main p:not(.hero-subtitle):not(.hero-materials):not(.hero-intro):not(.hero-kicker):not(.materials-values),
.story-copy p,
.campaign-copy p,
.legal-copy p,
.contact-details p,
.fabric-copy p,
.colour-hero-copy p,
.info-hero-inner p,
.unified-footer-brand p {
  font-size: var(--type-body);
  line-height: 1.6;
}

.eyebrow,
.info-eyebrow,
.hero-kicker,
.brand-place,
.filter-chip,
.filter-meta,
.save-button,
.product-copy p,
.product-copy .product-meta,
.hero-index,
.hero-collection-link,
.hero-facts span,
.form-field label,
.contact-card small,
.contact-submit,
.legal-nav strong,
.footer-bottom,
.footer-links h2,
.footer-return,
.unified-footer-bottom,
.unified-footer-links h2,
.unified-footer-brand > a:not(:first-child),
.unified-menu-cta,
.unified-mobile-nav > a small,
.drawer-heading > span,
.drawer-heading .eyebrow,
.button,
.bag-count,
.request-count,
.search-field button,
.text-link,
.texture-note figcaption,
.story-details figcaption,
.consent,
.add-to-cart {
  font-size: var(--type-caption) !important;
  line-height: 1.35;
}

.value-item strong,
.women-page .value-item strong {
  font-size: 14px !important;
  line-height: 1.25 !important;
}

.value-item small,
.women-page .value-item small {
  font-size: 12px !important;
  line-height: 1.3 !important;
}

.info-hero h1,
.colour-hero-copy h2 {
  font-size: var(--type-hero) !important;
  line-height: 1.08 !important;
}

main h2,
.section-head h2,
.section-heading h2,
.story-copy h2,
.campaign-copy h2,
.accessory-story-copy h2,
.business-inner h2,
.category-heading h2,
.contact-details h2,
.contact-form h2,
.legal-copy h2 {
  font-size: var(--type-h2) !important;
  line-height: 1.15 !important;
}

.product-copy h3,
.category-card span:not(.category-copy):not(.card-shade),
.related-card span,
.craft-card strong,
.material-card h3 {
  font-size: var(--type-card) !important;
  line-height: 1.2 !important;
}

:is(.site-header, .collection-site-header) .desktop-nav a {
  font-size: 12px !important;
}

:is(.site-header, .collection-site-header) .brand-name {
  font-size: 16px !important;
}

:is(.site-header, .collection-site-header) .brand-place {
  font-size: 12px !important;
  letter-spacing: .28em;
}

.category-copy small {
  font-size: 15px !important;
  line-height: 1.35 !important;
}

.fabric-copy .eyebrow {
  font-size: 14px !important;
  font-weight: 700;
  letter-spacing: .1em !important;
  line-height: 1.7 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.92), 0 0 18px rgba(250,247,240,.95);
}

.fabric-copy > p:last-child {
  font-size: 14px !important;
  letter-spacing: .1em !important;
  line-height: 1.7 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.92), 0 0 16px rgba(250,247,240,.9);
}

.fabric-copy h2 {
  font-size: clamp(84px, 10vw, 150px) !important;
  line-height: .9 !important;
}

.materials-lockup h2,
#materials-brand-title {
  font-size: clamp(30px, 2.6vw, 40px) !important;
  line-height: 1 !important;
  font-weight: 400 !important;
}

.materials-lockup > p {
  font-size: clamp(14px, 1.3vw, 16px) !important;
  line-height: 1.2 !important;
}

.materials-lockup > strong {
  font-size: clamp(15px, 1.4vw, 18px) !important;
  letter-spacing: .08em;
}

.natural-dye-note p {
  font-size: clamp(14px, 1.6vw, 22px) !important;
  line-height: 1.25 !important;
}

.materials-values {
  font-size: clamp(8px, .95vw, 12px) !important;
  letter-spacing: .28em;
  line-height: 1.2 !important;
}

.fabric-card h3 {
  font-size: clamp(20px, 1.7vw, 24px) !important;
  line-height: 1.1 !important;
}

.draped-copy h2,
#draped-title {
  font-size: clamp(48px, 5.4vw, 76px) !important;
  line-height: 1.02 !important;
  font-weight: 500 !important;
}

.draped-copy .eyebrow {
  font-size: 14px !important;
  letter-spacing: .22em;
}

.draped-copy > p:not(.eyebrow) {
  font-size: 22px !important;
  line-height: 1.55 !important;
}

.draped-copy .text-link {
  font-size: 13px !important;
}

.campaign-copy h2,
#campaign-title {
  font-size: clamp(64px, 7.2vw, 118px) !important;
  line-height: .86 !important;
  font-weight: 500 !important;
}

.campaign-copy .eyebrow {
  font-size: 16px !important;
  letter-spacing: .22em;
}

.campaign-copy > p:not(.eyebrow) {
  font-size: clamp(16px, 1.6vw, 22px) !important;
  letter-spacing: .14em;
  line-height: 1.35 !important;
}

.fabric-card dt {
  font-size: 13px !important;
}

.fabric-card dd {
  font-size: 15px !important;
}

@media (max-width: 768px) {
  html,
  body,
  .men-page,
  .women-page,
  .accessories-page {
    overflow-x: hidden;
    max-width: 100%;
  }

  .values-ribbon,
  .women-page .values-ribbon {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    gap: 0 !important;
    padding: 10px 0 !important;
    white-space: normal !important;
  }

  .value-item,
  .women-page .value-item {
    display: flex !important;
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 8px 4px !important;
    overflow: hidden !important;
    text-align: center !important;
    white-space: normal !important;
    border-bottom: 0 !important;
    box-sizing: border-box !important;
  }

  .value-item img,
  .women-page .value-item img {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
  }

  .value-item span,
  .value-item strong,
  .value-item small,
  .women-page .value-item span,
  .women-page .value-item strong,
  .women-page .value-item small {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    letter-spacing: .02em !important;
    text-align: center !important;
  }

  .value-item strong,
  .women-page .value-item strong {
    display: block !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
  }

  .value-item small,
  .women-page .value-item small {
    display: block !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
  }

  .story-details figcaption {
    font-size: 11px !important;
    line-height: 1.25 !important;
  }
}

@media (max-width: 700px) {
  .category-copy small {
    font-size: 12px !important;
  }

  .fabric-copy .eyebrow,
  .fabric-copy > p:last-child {
    font-size: 13px !important;
  }

  .fabric-copy h2 {
    font-size: clamp(56px, 16vw, 76px) !important;
  }

  .materials-lockup h2,
  #materials-brand-title {
    font-size: clamp(16px, 4.6vw, 18px) !important;
  }

  .materials-lockup > p {
    font-size: 10px !important;
  }

  .materials-lockup > strong {
    font-size: 11px !important;
  }

  .natural-dye-note p {
    font-size: 12px !important;
  }

  .materials-values {
    font-size: 7px !important;
    letter-spacing: .12em;
  }

  .fabric-card h3 {
    font-size: 22px !important;
  }

  .draped-copy h2,
  #draped-title {
    font-size: clamp(40px, 11vw, 52px) !important;
  }

  .draped-copy .eyebrow {
    font-size: 12px !important;
  }

  .draped-copy > p:not(.eyebrow) {
    font-size: 18px !important;
  }

  .draped-copy .text-link {
    font-size: 12px !important;
  }

  .fabric-card dt,
  .fabric-card dd {
    font-size: 14px !important;
  }
}