/** Shopify CDN: Minification failed

Line 5131:0 Unexpected "}"

**/
/* ==========================================================================
   Kioraa Jewel — revamp design system
   Ported 1:1 from temporary-homepage/app/globals.css (React/Tailwind build).
   Loaded AFTER Craft 15.4 base.css via snippets/kinn-styles.liquid, so rules
   here win over Craft defaults by source order; a zero-specificity defense
   layer (below the tokens) additionally shields the new sections from Craft
   element styles without relying on order alone.

   FONTS — licensed, self-hosted (client confirmed licensing 2026-09-01)
   --------------------------------------------------------------------
   Quarto (300/300i) and Neue Haas (500) are served from this theme's own
   assets. Relative url() in a Shopify CSS asset resolves to the same
   assets/ folder on the Shopify CDN. Cormorant Garamond stays as a safe
   fallback while fonts stream in.
   */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;1,300&display=swap');

@font-face {
  font-family: 'Quarto';
  src: url('kinn-quarto-light.woff2') format('woff2');
  font-display: swap;
  font-style: normal;
  font-weight: 300;
}

@font-face {
  font-family: 'Quarto';
  src: url('kinn-quarto-lightitalic.woff2') format('woff2');
  font-display: swap;
  font-style: italic;
  font-weight: 300;
}

@font-face {
  font-family: 'Neue Haas';
  src: url('kinn-neuehaas-500.woff2') format('woff2');
  font-display: swap;
  font-style: normal;
  font-weight: 500;
}

:root {
  --ink: #080808;
  --ivory: #f6f4f0;
  --warm: #f1eee8;
  --placeholder: #e9e5df;
  --line: #d8d3cd;
  --forest: #012e36;
  --night: #002026;
  --announcement: #2a3a56;
  --footer-field: #304363;
  --serif: 'Quarto', 'Cormorant Garamond', Georgia, serif;
  --sans: 'Neue Haas', 'Helvetica Neue', Arial, sans-serif;
  --background: var(--ivory);
  --foreground: var(--ink);
  --card: #fff;
  --card-foreground: var(--ink);
  --popover: #fff;
  --popover-foreground: var(--ink);
  --primary: var(--night);
  --primary-foreground: var(--ivory);
  --secondary: var(--warm);
  --secondary-foreground: var(--ink);
  --muted: var(--warm);
  --muted-foreground: #666;
  --accent: var(--warm);
  --accent-foreground: var(--ink);
  --border: var(--line);
  --input: var(--line);
  --ring: var(--forest);
  --radius: 0;
}

/* ==========================================================================
   Craft-override defense layer.
   Craft 15.4 (Dawn family) base.css loads before this file and styles bare
   elements (body, h1-h3, a, button, input, summary). Everything below is
   wrapped in :where() so it has ZERO specificity: it beats Craft's element
   rules purely by loading later, while every design rule further down this
   file still wins over it. Replaces what Tailwind preflight provided.
   ========================================================================== */

:where(.announcement, .site-header, .mobile-drawer, .search-panel, .hero-shell,
  .category-strip, .featured-section, .benefits-section, .custom-section,
  .video-section, .journal-section, .surat-section, .comparison-section,
  .faq-section, .site-footer, .collections-index, .collection-page,
  .search-page, .product-page, .static-page, .policy-page, .journal-index,
  .journal-article, .not-found-page, .recommendations-section,
  .custom-inquiry-block, .pdp-sticky-cta, .filter-sheet, .kinn-carousel) {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .42px;
  line-height: 1.4;
}

:where(.announcement, .site-header, .mobile-drawer, .search-panel, .hero-shell,
  .category-strip, .featured-section, .benefits-section, .custom-section,
  .video-section, .journal-section, .surat-section, .comparison-section,
  .faq-section, .site-footer, .collections-index, .collection-page,
  .search-page, .product-page, .static-page, .policy-page, .journal-index,
  .journal-article, .not-found-page, .recommendations-section,
  .custom-inquiry-block, .pdp-sticky-cta, .filter-sheet, .kinn-carousel) a {
  color: inherit;
  text-decoration: none;
}

:where(.announcement, .site-header, .mobile-drawer, .search-panel, .hero-shell,
  .category-strip, .featured-section, .benefits-section, .custom-section,
  .video-section, .journal-section, .surat-section, .comparison-section,
  .faq-section, .site-footer, .collections-index, .collection-page,
  .search-page, .product-page, .static-page, .policy-page, .journal-index,
  .journal-article, .not-found-page, .recommendations-section,
  .custom-inquiry-block, .pdp-sticky-cta, .filter-sheet, .kinn-carousel) button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

:where(.announcement, .site-header, .mobile-drawer, .search-panel, .hero-shell,
  .category-strip, .featured-section, .benefits-section, .custom-section,
  .video-section, .journal-section, .surat-section, .comparison-section,
  .faq-section, .site-footer, .collections-index, .collection-page,
  .search-page, .product-page, .static-page, .policy-page, .journal-index,
  .journal-article, .not-found-page, .recommendations-section,
  .custom-inquiry-block, .pdp-sticky-cta, .filter-sheet, .kinn-carousel) input,
:where(.site-footer, .search-panel, .search-page, .static-page,
  .custom-inquiry-block, .filter-sheet) textarea,
:where(.site-footer, .search-panel, .search-page, .static-page,
  .custom-inquiry-block, .filter-sheet) select {
  font-family: var(--sans);
  color: inherit;
}

:where(.announcement, .site-header, .mobile-drawer, .search-panel, .hero-shell,
  .category-strip, .featured-section, .benefits-section, .custom-section,
  .video-section, .journal-section, .surat-section, .comparison-section,
  .faq-section, .site-footer, .collections-index, .collection-page,
  .search-page, .product-page, .static-page, .policy-page, .journal-index,
  .journal-article, .not-found-page, .recommendations-section,
  .custom-inquiry-block, .pdp-sticky-cta, .filter-sheet, .kinn-carousel)
  :is(h1, h2, h3) {
  margin: 0;
}

:where(.announcement, .site-header, .mobile-drawer, .search-panel, .hero-shell,
  .category-strip, .featured-section, .benefits-section, .custom-section,
  .video-section, .journal-section, .surat-section, .comparison-section,
  .faq-section, .site-footer, .collections-index, .collection-page,
  .search-page, .product-page, .static-page, .policy-page, .journal-index,
  .journal-article, .not-found-page, .recommendations-section,
  .custom-inquiry-block, .pdp-sticky-cta, .filter-sheet, .kinn-carousel) h2 {
  font-family: var(--serif);
  font-size: 42px;
  font-weight: 300;
  letter-spacing: -.72px;
  line-height: 1;
}

:where(.announcement, .site-header, .mobile-drawer, .search-panel, .hero-shell,
  .category-strip, .featured-section, .benefits-section, .custom-section,
  .video-section, .journal-section, .surat-section, .comparison-section,
  .faq-section, .site-footer, .collections-index, .collection-page,
  .search-page, .product-page, .static-page, .policy-page, .journal-index,
  .journal-article, .not-found-page, .recommendations-section,
  .custom-inquiry-block, .pdp-sticky-cta, .filter-sheet, .kinn-carousel) figure {
  margin: 0;
}

:where(.announcement, .site-header, .mobile-drawer, .search-panel, .hero-shell,
  .category-strip, .featured-section, .benefits-section, .custom-section,
  .video-section, .journal-section, .surat-section, .comparison-section,
  .faq-section, .site-footer, .collections-index, .collection-page,
  .search-page, .product-page, .static-page, .policy-page, .journal-index,
  .journal-article, .not-found-page, .recommendations-section,
  .custom-inquiry-block, .pdp-sticky-cta, .filter-sheet, .kinn-carousel)
  :is(img, video) {
  display: block;
  max-width: 100%;
  border: 0;
}

/* Nav/footer link groups may be ported as <ul>/<li>; neutralize list chrome
   there without touching editorial lists (.static-section ul keeps bullets). */
.primary-nav ul,
.primary-nav li,
.header-actions ul,
.header-actions li,
.mobile-drawer ul,
.mobile-drawer li,
.footer-links ul,
.footer-links li,
.collection-quick-links ul,
.collection-quick-links li,
.journal-filters ul,
.journal-filters li,
.search-suggestions ul,
.search-suggestions li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links > ul {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

/* Tailwind preflight replacement: screen-reader-only utility. */
.sr-only,
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap !important;
  border: 0 !important;
}


* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .42px;
  line-height: 1.5;
}

body,
button,
input {
  font-family: var(--sans);
}

button,
a,
input {
  color: inherit;
}

button {
  border: 0;
  background: none;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  text-decoration: none;
}

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

h1,
h2,
h3,
p,
figure {
  margin-top: 0;
}

h2 {
  margin-bottom: 0;
  font-family: var(--serif);
  font-size: 42px;
  font-weight: 300;
  letter-spacing: -.72px;
  line-height: 1;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
[data-slot='accordion-trigger']:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

.section-pad {
  padding: 96px 45px;
}

.centered {
  text-align: center;
}

.eyebrow {
  margin: 0 0 16px;
  font-size: 12px;
  letter-spacing: 1.1px;
  line-height: 1.25;
  text-transform: uppercase;
}

.ink-eyebrow {
  color: #4f4f4f;
}

.text-link {
  display: inline-block;
  width: fit-content;
  padding-bottom: 3px;
  border-bottom: 1px solid currentColor;
  font-size: 13px;
  letter-spacing: .48px;
  line-height: 1.25;
  text-transform: uppercase;
}

.outline-button {
  display: flex;
  width: fit-content;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  margin: 42px auto 0;
  padding: 0 24px;
  border: 1px solid var(--ink);
  font-size: 13px;
  letter-spacing: .7px;
  text-transform: uppercase;
  transition: background-color .25s ease, color .25s ease;
}

.outline-button:hover {
  background: var(--ink);
  color: var(--ivory);
}

.outline-button--light {
  margin: 30px 0 0;
  border-color: var(--ivory);
}

.outline-button--light:hover {
  background: var(--ivory);
  color: var(--night);
}

.section-heading-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 36px;
}

.heading-note {
  max-width: 390px;
  margin: 0;
  color: #4d4d4d;
  line-height: 1.5;
}

/* Hero and navigation */
.hero-shell {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: #0b1c26;
  color: white;
}

.announcement {
  position: relative;
  z-index: 11;
  min-height: 28px;
  display: grid;
  place-items: center;
  padding: 6px 20px;
  background: var(--announcement);
  color: var(--ivory);
  font-size: 13px;
  letter-spacing: .1px;
  line-height: 1.25;
  text-align: center;
}

.site-header {
  position: fixed;
  inset: 28px 0 auto;
  z-index: 10;
  height: 80px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 45px;
  color: var(--ivory);
  transition: top .25s ease, height .25s ease, color .25s ease, background-color .25s ease, border-color .25s ease;
}

.site-header--scrolled {
  top: 0;
  height: 70px;
  border-bottom: 1px solid var(--line);
  background: rgba(246, 244, 240, .97);
  color: var(--ink);
  backdrop-filter: blur(12px);
}

.primary-nav,
.header-actions {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 12px;
  letter-spacing: .48px;
  text-transform: uppercase;
}

.primary-nav a,
.header-actions a,
.header-actions button {
  transition: opacity .2s ease;
}

.primary-nav a:hover,
.header-actions a:hover,
.header-actions button:hover {
  opacity: .6;
}

.header-actions {
  justify-content: flex-end;
  gap: 20px;
}

.header-actions button,
.mobile-menu {
  cursor: pointer;
}

.header-actions a,
.header-actions button {
  display: grid;
  place-items: center;
}

.header-actions svg,
.mobile-menu svg {
  width: 17px;
  height: 17px;
  stroke-width: 1.3;
}

.wordmark {
  font-family: var(--serif);
  font-size: clamp(42px, 3vw, 54px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -3.2px;
}

.mobile-menu {
  display: none;
  width: 32px;
  height: 32px;
  padding: 0;
}

.mobile-drawer {
  position: fixed;
  inset: 93px 0 auto;
  z-index: 9;
  display: grid;
  gap: 0;
  border-bottom: 1px solid var(--line);
  background: var(--ivory);
  color: var(--ink);
}

.mobile-drawer--scrolled {
  top: 65px;
}

.mobile-drawer a {
  padding: 17px 20px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  letter-spacing: .48px;
  text-transform: uppercase;
}

.hero-media,
.hero-media img,
.hero-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-media img {
  object-fit: cover;
  object-position: center;
}

.hero-scrim {
  background: linear-gradient(90deg, rgba(0, 12, 17, .49) 0%, rgba(0, 12, 17, .12) 48%, rgba(0, 12, 17, .15) 100%);
}

.hero-copy {
  position: absolute;
  z-index: 2;
  left: 45px;
  bottom: 45px;
  max-width: 450px;
}

.hero-copy h1 {
  margin: 0 0 16px;
  font-family: var(--serif);
  font-size: 42px;
  font-weight: 300;
  letter-spacing: -.88px;
  line-height: .96;
}

.hero-copy > p:not(.eyebrow) {
  max-width: 370px;
  margin: 0 0 30px;
  line-height: 1.45;
}

/* Kinn-style category strip */
.category-strip {
  display: flex;
  gap: 3px;
  overflow: hidden;
  background: var(--ivory);
}

.category-card {
  position: relative;
  flex: 1 1 25%;
  min-width: 0;
  aspect-ratio: 5 / 7;
  overflow: hidden;
  background: var(--placeholder);
}

.category-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .65s cubic-bezier(.2, .7, .2, 1);
}

.category-card:hover img {
  transform: scale(1.018);
}

.category-card .text-link {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* Product carousel */
.featured-section {
  background: var(--ivory);
}

.product-carousel,
.video-carousel {
  position: relative;
}

.product-track,
.video-track,
.custom-track {
  margin-left: -3px !important;
}

.product-slide {
  flex-basis: 21% !important;
  padding-left: 3px !important;
}

.product-card {
  display: block;
  min-width: 0;
}

.product-media {
  position: relative;
  display: block;
  aspect-ratio: 5 / 7;
  overflow: hidden;
  border: 1px solid #ebe7e1;
  background: var(--placeholder);
}

.product-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .4s ease;
}

.product-image--hover {
  opacity: 0;
}

.product-card:hover .product-image--hover {
  opacity: 1;
}

.product-card:hover .product-name {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.product-meta {
  display: grid;
  gap: 5px;
  padding-top: 14px;
  font-size: 13px;
  line-height: 1.35;
}

.product-name {
  min-height: 2.7em;
}

.swatches {
  display: flex;
  gap: 7px;
  margin-top: 11px;
}

.swatch {
  width: 13px;
  height: 13px;
  display: block;
  border: 1px solid rgba(0, 0, 0, .16);
  border-radius: 50%;
}

.swatch--gold { background: #c9a455; }
.swatch--white { background: #e7e7e7; }
.swatch--rose { background: #d8a58d; }

.collection-arrow,
.custom-arrow {
  width: 38px !important;
  height: 38px !important;
  border: 1px solid var(--ink) !important;
  border-radius: 50% !important;
  background: rgba(246, 244, 240, .92) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}

.collection-arrow svg,
.custom-arrow svg {
  width: 15px;
  height: 15px;
}

.collection-arrow--prev {
  left: 12px !important;
}

.collection-arrow--next {
  right: 12px !important;
}

/* Benefits */
.benefits-section {
  border-top: 1px solid var(--line);
  background: #fbfaf8;
}

.benefits-section h2 {
  margin-bottom: 54px;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 34px;
  max-width: 1450px;
  margin: 0 auto;
}

.benefit svg {
  width: 28px;
  height: 28px;
  margin-bottom: 22px;
  color: var(--forest);
  stroke-width: 1.25;
}

.benefit h3 {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .2px;
  line-height: 1.25;
}

.benefit p {
  margin: 0;
  color: #3f3f3f;
  font-size: 15px;
  letter-spacing: .18px;
  line-height: 1.55;
}

/* Custom design */
.custom-section {
  display: grid;
  grid-template-columns: minmax(280px, 31%) minmax(0, 69%);
  gap: 48px;
  padding: 70px 45px;
  overflow: hidden;
  background: var(--night);
  color: var(--ivory);
}

.custom-copy {
  align-self: center;
  max-width: 430px;
}

.custom-copy h2 {
  margin-bottom: 24px;
  font-size: 42px;
}

.custom-copy > p:not(.eyebrow) {
  max-width: 390px;
  margin-bottom: 0;
  line-height: 1.55;
}

.custom-carousel {
  min-width: 0;
}

.custom-slide {
  flex-basis: 52% !important;
  padding-left: 3px !important;
}

.custom-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
}

.custom-pair figure {
  position: relative;
  margin-bottom: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--ivory);
}

.custom-pair figure > span {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  padding: 7px 9px;
  background: rgba(246, 244, 240, .9);
  color: var(--ink);
  font-size: 11px;
  letter-spacing: .65px;
  text-transform: uppercase;
}

.custom-pair img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.custom-slide > p {
  margin: 12px 0 0;
  font-size: 12px;
  letter-spacing: .6px;
  text-transform: uppercase;
}

.custom-arrow {
  inset-block: auto 6px !important;
  margin: 0 !important;
}

.custom-arrow--prev {
  left: auto !important;
  right: 50px !important;
}

.custom-arrow--next {
  right: 4px !important;
}

/* Video carousel */
.video-section {
  background: var(--ivory);
}

.video-slide {
  flex-basis: 20% !important;
  padding-left: 3px !important;
}

.video-card {
  position: relative;
  margin-bottom: 0;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: #d8d3cd;
}

.video-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-card figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 28px 16px 16px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .55));
  color: white;
  font-size: 12px;
  letter-spacing: .6px;
  text-transform: uppercase;
}

/* Journal-like stories */
.journal-section {
  border-top: 1px solid var(--line);
  background: #fbfaf8;
}

.journal-heading {
  margin-bottom: 42px;
}

.stories-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.story-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-bottom: 18px;
  object-fit: cover;
  background: var(--placeholder);
}

.story-eyebrow {
  margin: 0 0 7px;
  color: #666;
  font-size: 12px;
  letter-spacing: .7px;
  text-transform: uppercase;
}

.story-card h3 {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 300;
  letter-spacing: -.25px;
  line-height: 1.05;
}

.story-card > p:not(.story-eyebrow) {
  margin-bottom: 14px;
  color: #3f3f3f;
  font-size: 14px;
  line-height: 1.5;
}

.story-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
  font-size: 12px;
  letter-spacing: .4px;
  text-transform: uppercase;
}

.story-link svg {
  width: 13px;
  height: 13px;
}

/* Surat */
.surat-section {
  display: grid;
  grid-template-columns: 43% 57%;
  min-height: 680px;
  background: #e8f0ef;
}

.surat-copy {
  align-self: center;
  padding: 90px 70px;
}

.surat-copy h2 {
  margin-bottom: 26px;
  font-size: 42px;
}

.surat-copy > p:not(.eyebrow) {
  max-width: 520px;
  margin-bottom: 30px;
  line-height: 1.58;
}

.surat-copy ul {
  display: grid;
  gap: 14px;
  margin: 0 0 34px;
  padding: 0;
  list-style: none;
}

.surat-copy li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 11px;
  align-items: start;
  font-size: 14px;
  line-height: 1.45;
}

.surat-copy li svg {
  width: 19px;
  height: 19px;
  color: var(--forest);
  stroke-width: 1.35;
}

.surat-images {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 3px;
  min-width: 0;
  padding: 3px 3px 3px 0;
}

.surat-images img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}

/* Comparison table */
.comparison-section {
  background: var(--ivory);
}

.comparison-section h2 {
  margin-bottom: 20px;
}

.comparison-intro {
  max-width: 680px;
  margin: 0 auto 48px;
  color: #494949;
  line-height: 1.55;
}

.comparison-desktop {
  max-width: 1220px;
  margin: 0 auto;
}

.comparison-table {
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 3px;
}

.comparison-table th,
.comparison-table td {
  height: auto;
  padding: 20px 22px;
  border: 0;
  background: #e7efed;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.48;
  text-align: center;
  white-space: normal !important;
}

.comparison-table th {
  font-size: 12px;
  letter-spacing: .7px;
  text-transform: uppercase;
}

.comparison-table th:nth-child(1),
.comparison-table td:nth-child(1),
.comparison-table th:nth-child(3),
.comparison-table td:nth-child(3) {
  width: 41%;
}

.comparison-table th:nth-child(2),
.comparison-table td:nth-child(2) {
  width: 18%;
  background: #dce7e4;
  font-size: 12px;
  letter-spacing: .6px;
  text-transform: uppercase;
}

.comparison-table tr {
  border: 0 !important;
}

.comparison-table tr:hover {
  background: transparent !important;
}

.comparison-mobile {
  display: none;
}

/* FAQ */
.faq-section {
  display: grid;
  grid-template-columns: minmax(280px, 35%) minmax(0, 1fr);
  gap: 90px;
  border-top: 1px solid var(--line);
  background: #fbfaf8;
}

.faq-heading {
  align-self: start;
  position: sticky;
  top: 110px;
}

.faq-heading h2 {
  max-width: 380px;
  margin-bottom: 22px;
}

.faq-heading > p:not(.eyebrow) {
  max-width: 390px;
  margin-bottom: 26px;
  color: #494949;
  line-height: 1.55;
}

.faq-list {
  border-top: 1px solid #aaa6a0;
}

.faq-item {
  border-bottom: 1px solid #aaa6a0 !important;
}

.faq-trigger {
  min-height: 76px;
  padding: 20px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: var(--serif);
  font-size: 21px !important;
  font-weight: 300 !important;
  letter-spacing: -.15px;
  line-height: 1.15;
  text-decoration: none !important;
}

.faq-trigger svg {
  width: 17px !important;
  height: 17px !important;
  margin-top: 4px;
  color: var(--ink) !important;
  stroke-width: 1.25;
}

.faq-answer {
  max-width: 760px;
  padding: 0 48px 26px 0 !important;
  color: #414141;
  font-size: 14px !important;
  line-height: 1.65;
}

.faq-answer p {
  margin: 0;
}

/* Footer */
.site-footer {
  overflow: hidden;
  background: var(--announcement);
  color: var(--ivory);
}

.footer-main {
  display: grid;
  grid-template-columns: minmax(340px, 38%) minmax(0, 1fr);
  gap: 7vw;
  padding: 80px 45px 70px;
}

.footer-newsletter {
  max-width: 460px;
}

.footer-newsletter h2 {
  margin-bottom: 20px;
  font-size: 42px;
  line-height: 1.05;
}

.footer-newsletter h2 em {
  font-weight: 300;
}

.footer-newsletter > p:not(.eyebrow) {
  max-width: 390px;
  margin-bottom: 30px;
  color: rgba(246, 244, 240, .78);
  line-height: 1.5;
}

.footer-newsletter form {
  display: grid;
  grid-template-columns: 1fr 52px;
  min-height: 52px;
}

.footer-newsletter input {
  min-width: 0;
  border: 1px solid rgba(246, 244, 240, .24);
  border-right: 0;
  border-radius: 0;
  outline: 0;
  background: var(--footer-field);
  padding: 0 17px;
  color: var(--ivory);
  font-size: 14px;
}

.footer-newsletter input::placeholder {
  color: rgba(246, 244, 240, .72);
}

.footer-newsletter button {
  display: grid;
  place-items: center;
  border: 1px solid rgba(246, 244, 240, .24);
  background: var(--footer-field);
  cursor: pointer;
}

.footer-newsletter button svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.3;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4vw;
}

.footer-links > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.footer-links h3 {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .7px;
  text-transform: uppercase;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(246, 244, 240, .8);
  font-size: 14px;
}

.footer-links a:hover {
  color: var(--ivory);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-links a svg {
  width: 14px;
  height: 14px;
}

.footer-wordmark {
  /* Real logo artwork, masked to the footer's own field colour so it reads as the same
     tone-on-tone watermark the set text used to give. */
  display: block;
  margin: 2vw auto -1vw;
  width: min(92%, 1180px);
  aspect-ratio: 810 / 225;
  background-color: var(--footer-field);
  -webkit-mask-image: var(--footer-logo);
  mask-image: var(--footer-logo);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.footer-legal {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 45px 28px;
  border-top: 1px solid rgba(246, 244, 240, .14);
  color: rgba(246, 244, 240, .64);
  font-size: 12px;
  letter-spacing: .55px;
  text-transform: uppercase;
}

@media (max-width: 1439px) {
  .product-slide {
    flex-basis: 27% !important;
  }

  .benefits-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 42px 56px;
  }

  .video-slide {
    flex-basis: 26% !important;
  }

  .surat-copy {
    padding: 76px 50px;
  }
}

@media (max-width: 989px) {
  .section-pad {
    padding: 78px 24px;
  }

  .site-header {
    grid-template-columns: 1fr auto 1fr;
    height: 65px;
    padding: 0 20px;
  }

  .site-header--scrolled {
    height: 65px;
  }

  .primary-nav {
    display: none;
  }

  .mobile-menu {
    display: grid;
    place-items: center;
    justify-self: start;
  }

  .header-actions .currency,
  .desktop-action,
  .header-actions button:first-child {
    display: none;
  }

  .header-actions {
    gap: 0;
  }

  .wordmark {
    font-size: 40px;
    letter-spacing: -2.3px;
  }

  .hero-copy {
    left: 24px;
    bottom: 40px;
  }

  .category-strip {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .category-strip::-webkit-scrollbar {
    display: none;
  }

  .category-card {
    flex: 0 0 64vw;
    scroll-snap-align: start;
  }

  .product-slide {
    flex-basis: 31% !important;
  }

  .custom-section {
    grid-template-columns: 1fr;
    gap: 46px;
    padding: 74px 24px;
  }

  .custom-copy {
    max-width: 560px;
  }

  .custom-slide {
    flex-basis: 72% !important;
  }

  .video-slide {
    flex-basis: 32% !important;
  }

  .stories-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 46px 18px;
  }

  .surat-section {
    grid-template-columns: 1fr;
  }

  .surat-copy {
    padding: 78px 44px;
  }

  .surat-images {
    min-height: 620px;
    padding: 0 3px 3px;
  }

  .faq-section {
    grid-template-columns: 1fr;
    gap: 46px;
  }

  .faq-heading {
    position: static;
  }

  .footer-main {
    grid-template-columns: 1fr;
    gap: 60px;
    padding: 72px 24px 60px;
  }

  .footer-newsletter {
    max-width: 520px;
  }

  

  .footer-legal {
    padding-inline: 24px;
  }
}

@media (max-width: 700px) {
  h2 {
    font-size: 34px;
    letter-spacing: -.56px;
    line-height: 1.105;
  }

  .section-pad {
    padding: 68px 20px;
  }

  .announcement {
    min-height: 28px;
    font-size: 13px;
  }

  .site-header {
    inset-block-start: 28px;
  }

  .site-header--scrolled {
    top: 0;
  }

  .mobile-drawer {
    top: 93px;
  }

  .mobile-drawer--scrolled {
    top: 65px;
  }

  .hero-shell {
    min-height: 620px;
  }

  .hero-copy {
    right: 20px;
    left: 20px;
    bottom: 38px;
  }

  .hero-copy h1 {
    font-size: 34px;
    letter-spacing: -.68px;
    line-height: 1;
  }

  .hero-copy > p:not(.eyebrow) {
    max-width: 320px;
    margin-bottom: 25px;
    font-size: 14px;
  }

  .hero-scrim {
    background: linear-gradient(0deg, rgba(0, 12, 17, .67) 0%, rgba(0, 12, 17, .06) 62%, rgba(0, 12, 17, .24) 100%);
  }

  .category-card .text-link {
    bottom: 24px;
  }

  .section-heading-row {
    align-items: flex-start;
    margin-bottom: 28px;
  }

  .desktop-section-link,
  .section-heading-row .heading-note {
    display: none;
  }

  .product-slide {
    flex-basis: 49% !important;
  }

  .product-meta {
    font-size: 13px;
  }

  .collection-arrow {
    display: none !important;
  }

  .benefits-section h2 {
    margin-bottom: 42px;
  }

  .benefits-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 38px 24px;
  }

  .benefit svg {
    margin-bottom: 16px;
  }

  .benefit h3 {
    font-size: 15px;
  }

  .benefit p {
    font-size: 15px;
  }

  .outline-button {
    min-height: 48px;
    padding-inline: 18px;
    font-size: 12px;
  }

  .custom-section {
    gap: 38px;
    padding: 66px 20px;
  }

  .custom-copy h2 {
    font-size: 34px;
  }

  .custom-slide {
    flex-basis: 88% !important;
  }

  .custom-arrow {
    display: none !important;
  }

  .video-slide {
    flex-basis: 73% !important;
  }

  .stories-grid {
    display: flex;
    gap: 12px;
    margin-inline: -20px;
    padding-inline: 20px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .stories-grid::-webkit-scrollbar {
    display: none;
  }

  .story-card {
    flex: 0 0 80vw;
    scroll-snap-align: start;
  }

  .surat-copy {
    padding: 68px 20px;
  }

  .surat-copy h2 {
    font-size: 34px;
  }

  .surat-images {
    min-height: 460px;
  }

  .comparison-desktop {
    display: none;
  }

  .comparison-mobile {
    display: grid;
    gap: 3px;
  }

  .comparison-mobile article {
    background: #e7efed;
  }

  .comparison-mobile h3 {
    margin: 0;
    padding: 13px 16px;
    background: #dce7e4;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .65px;
    text-transform: uppercase;
  }

  .comparison-mobile article > div {
    padding: 15px 16px;
  }

  .comparison-mobile article > div + div {
    border-top: 1px solid rgba(0, 0, 0, .1);
  }

  .comparison-mobile span {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    letter-spacing: .6px;
    text-transform: uppercase;
  }

  .comparison-mobile p {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
  }

  .comparison-intro {
    margin-bottom: 36px;
  }

  .faq-section {
    gap: 38px;
  }

  .faq-trigger {
    min-height: 68px;
    font-size: 19px !important;
  }

  .faq-answer {
    padding-right: 24px !important;
  }

  .footer-main {
    padding: 66px 20px 52px;
  }

  .footer-newsletter h2 {
    font-size: 34px;
  }

  .footer-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 46px 30px;
  }

  .footer-wordmark { margin-bottom: -2vw; }

  .footer-legal {
    flex-direction: column;
    gap: 7px;
    padding: 20px;
  }
}

.collections-index {
  min-height: 70vh;
  background: var(--ivory);
}

.collections-directory {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
  padding: 3px;
}

.collections-directory > a {
  min-width: 0;
  padding-bottom: 42px;
}

.collections-directory > a > span {
  display: block;
  aspect-ratio: 5 / 7;
  margin-bottom: 18px;
  overflow: hidden;
  background: var(--placeholder);
}

.collections-directory img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s ease;
}

.collections-directory a:hover img {
  transform: scale(1.015);
}

.collections-directory i {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: #c5beb6;
  font-family: var(--serif);
  font-size: 42px;
  font-weight: 300;
}

.collections-directory h2,
.collections-directory p {
  margin-inline: 12px;
}

.collections-directory h2 {
  margin-bottom: 10px;
  font-size: 28px;
}

.collections-directory p {
  color: #555;
  font-size: 15px;
  line-height: 1.55;
}

@media (max-width: 989px) {
  .collections-directory {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .collections-directory h2 {
    font-size: 22px;
  }

  .collections-directory p {
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Shared storefront chrome */
.site-header--solid {
  border-bottom: 1px solid var(--line);
  background: rgba(246, 244, 240, .97);
  color: var(--ink);
  backdrop-filter: blur(12px);
}

.site-header--interior {
  top: 28px;
}

.site-header--interior.site-header--scrolled {
  top: 0;
}

.interior-header-spacer {
  height: 80px;
}

.chrome-backdrop {
  position: fixed;
  inset: 0;
  z-index: 8;
  width: 100%;
  height: 100%;
  cursor: default;
  background: rgba(2, 18, 22, .34);
  backdrop-filter: blur(3px);
}

.search-panel {
  position: fixed;
  inset: 70px 0 auto;
  z-index: 12;
  padding: 34px 45px 40px;
  border-bottom: 1px solid var(--line);
  background: var(--ivory);
  color: var(--ink);
}

.search-form {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  border-bottom: 1px solid var(--ink);
}

.search-form svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.25;
}

.search-form input {
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 300;
}

.search-form button {
  min-height: 42px;
  padding-inline: 18px;
  cursor: pointer;
  background: var(--night);
  color: var(--ivory);
  font-size: 12px;
  letter-spacing: .7px;
  text-transform: uppercase;
}

.search-suggestions {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-top: 22px;
  overflow-x: auto;
  font-size: 12px;
  letter-spacing: .6px;
  text-transform: uppercase;
  white-space: nowrap;
}

.search-suggestions span {
  color: #777;
}

.search-suggestions a {
  border-bottom: 1px solid transparent;
}

.search-suggestions a:hover {
  border-color: currentColor;
}

.footer-legal a:hover {
  color: var(--ivory);
}

/* Collection and shop pages */
.collection-page,
.search-page,
.product-page,
.static-page,
.policy-page,
.journal-index,
.journal-article {
  min-height: 70vh;
  background: var(--ivory);
}

.collection-header {
  max-width: 1440px;
  padding: 76px 45px 54px;
}

.collection-header h1 {
  max-width: 920px;
  margin: 0 0 22px;
  font-family: var(--serif);
  font-size: 42px;
  font-weight: 300;
  letter-spacing: -.9px;
  line-height: 1;
}

.collection-header h1 em {
  font-weight: 300;
}

.collection-header > p:last-child {
  max-width: 760px;
  margin: 0;
  color: #484848;
  line-height: 1.6;
}

.collection-quick-links {
  display: flex;
  gap: 32px;
  padding: 19px 45px;
  overflow-x: auto;
  border-block: 1px solid var(--line);
  font-size: 12px;
  letter-spacing: .65px;
  text-transform: uppercase;
  white-space: nowrap;
}

.collection-quick-links a {
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
}

.collection-quick-links a:hover {
  border-color: currentColor;
}

.catalog-toolbar {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 45px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  letter-spacing: .55px;
  text-transform: uppercase;
}

.catalog-controls {
  display: flex;
  align-items: center;
  gap: 18px;
}

.catalog-control-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 12px;
  letter-spacing: .55px;
  text-transform: uppercase;
}

.catalog-control-button > svg {
  width: 15px;
  height: 15px;
  stroke-width: 1.3;
}

.catalog-control-button > span {
  display: grid;
  width: 19px;
  height: 19px;
  place-items: center;
  border-radius: 50%;
  background: var(--night);
  color: var(--ivory);
  font-size: 11px;
}

.catalog-sort {
  min-width: 150px !important;
  height: auto !important;
  padding: 0 0 3px !important;
  border: 0 !important;
  border-bottom: 1px solid currentColor !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 12px !important;
  letter-spacing: .55px;
  text-transform: uppercase;
}

.catalog-sort-menu {
  min-width: 220px !important;
  border-radius: 0 !important;
  background: var(--ivory) !important;
  box-shadow: none !important;
  ring: none !important;
}

.catalog-sort-menu [data-slot='select-item'] {
  min-height: 38px;
  border-radius: 0;
  font-size: 12px;
  letter-spacing: .4px;
  text-transform: uppercase;
}

.filter-chips {
  display: flex;
  gap: 8px;
  padding: 12px 45px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.filter-chips button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border: 1px solid var(--line);
  cursor: pointer;
  font-size: 12px;
  letter-spacing: .45px;
  text-transform: uppercase;
}

.filter-chips button svg {
  width: 12px;
  height: 12px;
}

.filter-chips .filter-chips-clear {
  border-color: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.catalog-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
  padding: 3px 0 0;
}

.catalog-card {
  min-width: 0;
  overflow: hidden;
  background: var(--ivory);
}

.catalog-card-media {
  position: relative;
  aspect-ratio: 5 / 7;
  overflow: hidden;
  border: 1px solid #ebe7e1;
  background: var(--placeholder);
}

.catalog-card-media > a {
  position: absolute;
  inset: 0;
}

.catalog-card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .38s ease, transform .65s cubic-bezier(.2, .7, .2, 1);
}

.catalog-card-image--hover {
  opacity: 0;
}

.catalog-card:hover .catalog-card-image--hover {
  opacity: 1;
}

.catalog-card:hover .catalog-card-title {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.catalog-card-placeholder {
  /* No-image fallback: the logo mark in the placeholder tone, masked so it picks up the
     colour rather than shipping a second tinted copy of the artwork. */
  position: absolute;
  inset: 0;
  background-color: #c5beb6;
  -webkit-mask-image: var(--placeholder-logo);
  mask-image: var(--placeholder-logo);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 62% auto;
  mask-size: 62% auto;
}

.catalog-save {
  position: absolute;
  z-index: 2;
  top: 15px;
  right: 15px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.catalog-save svg {
  width: 17px;
  height: 17px;
  stroke-width: 1.25;
}

.catalog-save--active {
  color: var(--announcement);
}

.catalog-badge {
  position: absolute;
  z-index: 2;
  top: 15px;
  left: auto;
  right: 50px;
  padding: 6px 8px;
  background: rgba(246, 244, 240, .92);
  font-size: 8px;
  letter-spacing: .7px;
  text-transform: uppercase;
}

.catalog-badge--left {
  right: auto;
  left: 14px;
}

.catalog-card-copy {
  display: grid;
  gap: 6px;
  min-height: 118px;
  padding: 14px 12px 26px;
  font-size: 13px;
  line-height: 1.35;
}

.catalog-card-title {
  min-height: 2.7em;
}

.catalog-card-price {
  display: flex;
  gap: 8px;
  color: #4d4d4d;
}

.catalog-card-price del {
  color: #8b8781;
}

.catalog-swatches {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.catalog-swatch {
  width: 11px;
  height: 11px;
  display: block;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 50%;
}

.catalog-swatch--gold,
.metal-dot--gold { background: #c9a455; }
.catalog-swatch--white,
.metal-dot--white { background: #e6e6e6; }
.catalog-swatch--rose,
.metal-dot--rose { background: #d4a38d; }

.load-more-wrap {
  display: grid;
  place-items: center;
  gap: 15px;
  padding: 56px 20px 80px;
}

.load-more-wrap .outline-button {
  margin: 0;
}

.load-more-wrap > span {
  color: #666;
  font-size: 12px;
  letter-spacing: .55px;
  text-transform: uppercase;
}

.catalog-empty {
  min-height: 420px;
  display: grid;
  place-items: center;
  align-content: center;
  padding: 70px 20px;
  text-align: center;
}

.catalog-empty h2 {
  margin-bottom: 14px;
}

.catalog-empty p {
  color: #555;
}

.catalog-empty .outline-button {
  margin-top: 22px;
}

.catalog-empty--page {
  border-top: 1px solid var(--line);
}

.filter-sheet {
  width: min(600px, 100vw) !important;
  max-width: 600px !important;
  gap: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--ivory) !important;
  box-shadow: none !important;
}

.filter-sheet-header {
  padding: 34px 32px 26px !important;
  border-bottom: 1px solid var(--line);
}

.filter-sheet-header [data-slot='sheet-title'] {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 300;
}

.filter-sheet-header p {
  margin: 6px 0 0;
  color: #666;
  font-size: 13px;
}

.filter-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 44px 28px;
  padding: 32px;
  overflow-y: auto;
}

.filter-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.filter-group legend {
  width: 100%;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  letter-spacing: .7px;
  text-transform: uppercase;
}

.filter-group > div {
  display: grid;
  gap: 12px;
}

.filter-option {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: #424242;
  font-size: 14px;
}

.filter-option [data-slot='checkbox'] {
  border-radius: 0;
}

.filter-sheet-footer {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  padding: 20px 32px !important;
  border-top: 1px solid var(--line);
  background: var(--ivory);
  font-size: 12px;
  letter-spacing: .45px;
  text-transform: uppercase;
}

.filter-clear {
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Product detail */
.pdp-layout {
  display: grid;
  grid-template-columns: minmax(0, 57%) minmax(390px, 43%);
  align-items: start;
}

/* Thumbnail rail + one main frame. Sticky, so the gallery holds while the (longer) info
   column scrolls — one image on screen at a time instead of a 12-image stack. */
.pdp-gallery {
  min-width: 0;
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  align-items: start;
  justify-items: center;
  gap: 16px;
  padding: 20px 0 20px 28px;
  position: sticky;
  top: 92px;
}

.pdp-gallery-item {
  position: relative;
  aspect-ratio: 5 / 7;
  margin: 0;
  overflow: hidden;
  background: var(--placeholder);
}

.pdp-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pdp-info {
  min-width: 0;
  padding: 70px 6vw 80px;
}

.pdp-info-inner {
  /* Both columns pin and are sized to the fold, matching the reference store. The details
     column scrolls its own content when it overflows — the scrollbar is hidden so it reads as
     one panel, and the top padding keeps the breadcrumb clear of the sticky header rather than
     tucked under it. */
  position: sticky;
  top: 92px;
  max-width: 520px;
  margin-inline: auto;
  max-height: calc(100vh - 116px);
  padding-top: 4px;
  overflow-y: auto;
  /* Deliberately NOT `contain`: once this panel reaches its end the scroll must chain to the
     page so the reader can carry on to the next section from the right-hand side, instead of
     being trapped until the gallery has stepped through every image. */
  overscroll-behavior-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pdp-info-inner::-webkit-scrollbar { width: 0; height: 0; display: none; }

.pdp-breadcrumb {
  margin-bottom: 21px;
  color: #666;
  font-size: 12px;
  letter-spacing: .55px;
  text-transform: uppercase;
}

.pdp-breadcrumb a {
  border-bottom: 1px solid currentColor;
}

.pdp-title-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: start;
}

.pdp-title-row h1 {
  margin: 0 0 17px;
  font-family: var(--serif);
  font-size: 42px;
  font-weight: 300;
  letter-spacing: -.6px;
  line-height: 1.02;
}

.pdp-wishlist {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.pdp-wishlist svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.2;
}

.pdp-wishlist--active {
  color: var(--announcement);
}

.pdp-price {
  display: flex;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 15px;
}

.pdp-price del {
  color: #888;
}

.pdp-note {
  margin-bottom: 32px;
  color: #666;
  font-size: 12px;
  letter-spacing: .6px;
  text-transform: uppercase;
}

.pdp-options {
  display: grid;
  gap: 28px;
}

.pdp-option {
  margin: 0;
  padding: 0;
  border: 0;
}

.pdp-option legend {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 13px;
  font-size: 12px;
  letter-spacing: .65px;
  text-transform: uppercase;
}

.pdp-option legend span {
  color: #666;
  text-align: right;
}

.pdp-option legend a {
  border-bottom: 1px solid currentColor;
}

.pdp-option-values {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
}

.pdp-option-values button {
  min-height: 27px;
  padding: 0 0 3px;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  color: #696969;
  font-size: 13px;
  letter-spacing: .3px;
}

.pdp-option-values button:hover,
.pdp-option-values button.is-selected {
  border-color: currentColor;
  color: var(--ink);
}

.pdp-option-values button:disabled {
  cursor: not-allowed;
  opacity: .28;
  text-decoration: line-through;
}

.pdp-option-values--metal button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.metal-dot {
  width: 20px;
  height: 20px;
  display: block;
  border: 1px solid rgba(0, 0, 0, .18);
}

.pdp-option-values--sizes {
  gap: 7px;
}

.pdp-option-values--sizes button {
  width: 35px;
  height: 35px;
  padding: 0;
  border: 1px solid var(--line);
}

.pdp-option-values--sizes button.is-selected {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--ivory);
}

.pdp-quantity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  letter-spacing: .65px;
  text-transform: uppercase;
}

.pdp-quantity > div {
  display: grid;
  grid-template-columns: 34px 34px 34px;
  align-items: center;
  text-align: center;
}

.pdp-quantity button {
  height: 32px;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.pdp-quantity svg {
  width: 12px;
  height: 12px;
}

.pdp-cta-block {
  margin-top: 22px;
}

.pdp-primary-cta {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 24px;
  background: var(--night);
  color: var(--ivory);
  font-size: 12px;
  letter-spacing: .7px;
  text-align: center;
  text-transform: uppercase;
  transition: background-color .2s ease;
}

.pdp-primary-cta:hover {
  background: var(--announcement);
}

.pdp-cta-block > p {
  margin: 11px 0 0;
  color: #6b6b6b;
  font-size: 13px;
  line-height: 1.5;
}

.pdp-accordions {
  margin-top: 30px;
  border-top: 1px solid var(--line);
}

.pdp-accordions [data-slot='accordion-item'] {
  border-bottom: 1px solid var(--line);
}

.pdp-accordions [data-slot='accordion-trigger'] {
  min-height: 56px;
  padding: 15px 0;
  border: 0;
  border-radius: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .65px;
  text-transform: uppercase;
  text-decoration: none;
}

.pdp-accordions [data-slot='accordion-content'] > div {
  padding: 0 20px 20px 0;
  color: #4b4b4b;
  font-size: 15px;
  line-height: 1.65;
}

.pdp-specs {
  display: grid;
  gap: 0;
  margin: 0;
}

.pdp-specs div {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 18px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.pdp-specs dt {
  color: #777;
}

.pdp-specs dd {
  margin: 0;
}

.pdp-values {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block: 1px solid var(--line);
  background: #fbfaf8;
}

.pdp-values > div {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 16px;
  padding: 34px 32px;
  border-right: 1px solid var(--line);
}

.pdp-values > div:last-child {
  border-right: 0;
}

.pdp-values svg {
  width: 24px;
  height: 24px;
  color: var(--forest);
  stroke-width: 1.25;
}

.pdp-values span {
  color: #555;
  font-size: 14px;
  line-height: 1.5;
}

.pdp-values strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink);
  font-size: 12px;
  letter-spacing: .45px;
  text-transform: uppercase;
}

.pdp-on-you,
.recommendations-section {
  background: var(--ivory);
}

.pdp-lifestyle-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
}

.pdp-lifestyle-grid img {
  width: 100%;
  aspect-ratio: 5 / 7;
  object-fit: cover;
  background: var(--placeholder);
}

.pdp-faq {
  display: grid;
  grid-template-columns: 35% 1fr;
  gap: 8vw;
  border-top: 1px solid var(--line);
  background: #fbfaf8;
}

.pdp-faq-heading h2 {
  max-width: 360px;
}

.pdp-faq-list {
  border-top: 1px solid #aaa6a0;
}

.pdp-faq-list [data-slot='accordion-item'] {
  border-bottom: 1px solid #aaa6a0;
}

.pdp-faq-list [data-slot='accordion-trigger'] {
  min-height: 70px;
  padding: 18px 0;
  border: 0;
  border-radius: 0;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 300;
  text-decoration: none;
}

.pdp-faq-list [data-slot='accordion-content'] > div {
  max-width: 680px;
  padding: 0 35px 24px 0;
  color: #4b4b4b;
  line-height: 1.6;
}

.recommendations-section {
  border-top: 1px solid var(--line);
}

.recommendations-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
}

.pdp-sticky-cta {
  display: none;
}

/* Static editorial and guide pages */
.editorial-hero {
  position: relative;
  min-height: 78svh;
  overflow: hidden;
  color: white;
}

.editorial-hero > img,
.editorial-hero-scrim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.editorial-hero > img {
  object-fit: cover;
}

.editorial-hero-scrim {
  background: linear-gradient(0deg, rgba(0, 18, 23, .6), rgba(0, 18, 23, .03) 62%);
}

.editorial-hero > div:last-child {
  position: absolute;
  z-index: 2;
  right: 45px;
  bottom: 54px;
  left: 45px;
}

.editorial-hero h1 {
  max-width: 840px;
  margin: 0;
  font-family: var(--serif);
  font-size: 42px;
  font-weight: 300;
  letter-spacing: -1px;
  line-height: .98;
}

.editorial-statement {
  display: grid;
  place-items: center;
  padding: 110px 45px;
  border-bottom: 1px solid var(--line);
  text-align: center;
}

.editorial-statement p {
  max-width: 840px;
  margin: 0;
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 300;
  letter-spacing: -.45px;
  line-height: 1.18;
}

.text-page-hero {
  max-width: 980px;
  padding: 95px 45px 78px;
}

.text-page-hero h1 {
  max-width: 900px;
  margin: 0 0 26px;
  font-family: var(--serif);
  font-size: 42px;
  font-weight: 300;
  letter-spacing: -.95px;
  line-height: 1;
}

.text-page-hero > p:last-child {
  max-width: 720px;
  margin: 0;
  color: #4d4d4d;
  font-size: 16px;
  line-height: 1.6;
}

.static-sections {
  max-width: 1150px;
  margin: 0 auto;
  padding: 20px 45px 90px;
}

.static-section {
  display: grid;
  grid-template-columns: 150px minmax(0, 760px);
  gap: 42px;
  padding: 72px 0;
  border-top: 1px solid var(--line);
}

.static-section > span,
.article-body > section > span {
  color: #85817c;
  font-size: 12px;
  letter-spacing: .7px;
}

.static-section h2,
.article-body h2 {
  margin-bottom: 24px;
  font-size: 28px;
  line-height: 1.04;
}

.static-section p,
.static-section li,
.article-body p,
.article-body li {
  color: #3f3f3f;
  font-size: 15px;
  line-height: 1.75;
}

.static-section p + p,
.article-body p + p {
  margin-top: 20px;
}

.static-section ul,
.article-body ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding-left: 18px;
}

.static-page-cta {
  display: grid;
  place-items: center;
  padding: 80px 20px;
  border-top: 1px solid var(--line);
  background: #fbfaf8;
  text-align: center;
}

.static-page-cta .outline-button {
  margin-top: 12px;
}

.guide-shell {
  max-width: 1080px;
  display: grid;
  grid-template-columns: 260px minmax(0, 680px);
  gap: 70px;
  margin: 0 auto;
  padding: 30px 45px 110px;
}

.guide-shell > aside {
  position: sticky;
  top: 110px;
  height: fit-content;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}

.guide-shell > aside > span {
  margin-bottom: 12px;
  color: #777;
  font-size: 12px;
  letter-spacing: .7px;
  text-transform: uppercase;
}

.guide-shell > aside a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  font-size: 14px;
}

.guide-shell > aside a:hover {
  border-color: currentColor;
}

.guide-shell > aside svg {
  width: 14px;
  height: 14px;
}

.faq-page-list {
  border-top: 1px solid #aaa6a0;
}

.faq-page-list [data-slot='accordion-item'] {
  border-bottom: 1px solid #aaa6a0;
}

.faq-page-list [data-slot='accordion-trigger'] {
  min-height: 70px;
  padding: 18px 0;
  border: 0;
  border-radius: 0;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 300;
  line-height: 1.2;
  text-decoration: none;
}

.faq-page-list [data-slot='accordion-content'] > div {
  padding: 0 40px 24px 0;
  color: #494949;
  font-size: 14px;
  line-height: 1.65;
}

.kinn-form {
  display: grid;
  gap: 24px;
}

.kinn-form label {
  display: grid;
  gap: 7px;
  font-size: 12px;
  letter-spacing: .65px;
  text-transform: uppercase;
}

.kinn-form [data-slot='input'],
.kinn-form [data-slot='textarea'],
.kinn-form select {
  width: 100%;
  min-height: 48px;
  padding: 9px 0;
  border: 0;
  border-bottom: 1px solid #9b9791;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  font-size: 15px;
  letter-spacing: .3px;
  text-transform: none;
}

.kinn-form [data-slot='textarea'] {
  min-height: 130px;
  resize: vertical;
}

.kinn-form .pdp-primary-cta {
  width: fit-content;
  min-width: 190px;
  margin-top: 8px;
  border: 0;
  cursor: pointer;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.form-success {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  color: var(--forest);
  font-size: 14px;
  line-height: 1.5;
}

.form-success svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.custom-inquiry-block {
  display: grid;
  grid-template-columns: minmax(280px, 35%) minmax(0, 650px);
  justify-content: space-between;
  gap: 8vw;
  padding: 90px 8vw;
  background: var(--night);
  color: var(--ivory);
}

.custom-inquiry-heading {
  max-width: 430px;
}

.custom-inquiry-heading h2 {
  margin-bottom: 24px;
  font-size: 42px;
}

.custom-inquiry-heading > p:last-child {
  color: rgba(246, 244, 240, .75);
  line-height: 1.65;
}

.kinn-form--dark [data-slot='input'],
.kinn-form--dark [data-slot='textarea'],
.kinn-form--dark select {
  border-color: rgba(246, 244, 240, .42);
  color: var(--ivory);
}

.kinn-form--dark select option {
  background: var(--night);
}

.kinn-form--dark .outline-button {
  margin: 8px 0 0;
  cursor: pointer;
  background: transparent;
}

.form-success--light {
  color: var(--ivory);
}

.privacy-choice {
  max-width: 820px;
  display: grid;
  gap: 24px;
  margin: 0 auto;
  padding: 20px 45px 110px;
}

.privacy-choice > label {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 16px;
  align-items: start;
  padding: 28px;
  border: 1px solid var(--line);
  cursor: pointer;
}

.privacy-choice label span {
  color: #555;
  line-height: 1.55;
}

.privacy-choice label strong {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
}

.privacy-choice .outline-button {
  margin: 0;
  cursor: pointer;
}

.privacy-choice > p {
  display: flex;
  gap: 8px;
  color: var(--forest);
  font-size: 14px;
}

.privacy-choice > p svg {
  width: 17px;
  height: 17px;
}

.size-table-section {
  padding: 90px 45px;
  border-top: 1px solid var(--line);
  background: #fbfaf8;
}

.size-table-wrap {
  max-width: 1100px;
  overflow-x: auto;
}

.size-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.size-table-wrap th,
.size-table-wrap td {
  padding: 17px 19px;
  border-bottom: 1px solid var(--line);
}

.size-table-wrap th {
  background: #e5ecea;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .7px;
  text-transform: uppercase;
}

.size-table-wrap td {
  font-size: 14px;
}

.comparison-page-table .size-table-wrap {
  max-width: 1260px;
}

.comparison-page-table th:nth-child(2),
.comparison-page-table td:nth-child(2) {
  width: 18%;
  background: #e5ecea;
  font-size: 12px;
  letter-spacing: .5px;
  text-align: center;
  text-transform: uppercase;
}

.comparison-page-table th:first-child,
.comparison-page-table th:last-child,
.comparison-page-table td:first-child,
.comparison-page-table td:last-child {
  width: 41%;
}

.comparison-page-table > .story-link {
  margin-top: 34px;
}

/* Policies */
.policy-page {
  padding: 95px 45px 110px;
}

.policy-page > header,
.policy-copy {
  max-width: 680px;
  margin-inline: auto;
}

.policy-page > header {
  margin-bottom: 56px;
}

.policy-page h1 {
  margin: 0 0 24px;
  font-family: var(--serif);
  font-size: 42px;
  font-weight: 300;
  letter-spacing: -.8px;
  line-height: 1;
}

.policy-page > header > p:last-child,
.policy-copy p,
.policy-copy li {
  color: #434343;
  line-height: 1.75;
}

.policy-copy section {
  padding: 38px 0;
  border-top: 1px solid var(--line);
}

.policy-copy h2 {
  margin-bottom: 22px;
  font-size: 28px;
}

.policy-preview-note {
  margin-top: 40px;
  padding: 22px;
  border: 1px solid var(--line);
  background: #fbfaf8;
  font-size: 14px;
}

/* Journal */
.journal-featured,
.article-hero {
  min-height: 720px;
  display: grid;
  grid-template-columns: 50% 50%;
}

.journal-featured-media,
.article-hero > img {
  min-width: 0;
  height: 100%;
  overflow: hidden;
  background: var(--placeholder);
}

.journal-featured-media img,
.article-hero > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.journal-featured-copy,
.article-hero > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 80px 8vw;
  background: #eee2d4;
}

.journal-featured-copy h1,
.article-hero h1 {
  max-width: 620px;
  margin: 0 0 30px;
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 300;
  letter-spacing: -1px;
  line-height: 1;
}

.journal-featured-copy h1 em,
.article-hero h1 em {
  font-weight: 300;
}

.journal-featured-copy > p:not(.eyebrow),
.article-hero > div > p:not(.eyebrow) {
  max-width: 520px;
  margin-bottom: 30px;
  line-height: 1.65;
}

.journal-filters {
  display: flex;
  gap: 30px;
  padding: 21px 45px;
  overflow-x: auto;
  border-block: 1px solid var(--line);
  font-size: 12px;
  letter-spacing: .75px;
  text-transform: uppercase;
  white-space: nowrap;
}

.journal-filters a:first-child {
  border-bottom: 1px solid currentColor;
}

.journal-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 72px 24px;
}

.journal-card > a:first-child {
  display: block;
  margin-bottom: 18px;
  overflow: hidden;
}

.journal-card img {
  width: 100%;
  aspect-ratio: 5 / 7;
  object-fit: cover;
  transition: transform .5s ease;
}

.journal-card:hover img {
  transform: scale(1.015);
}

.journal-card > span,
.related-stories a > span {
  display: inline-block;
  margin-bottom: 12px;
  padding: 5px 7px;
  background: #eee2d4;
  font-size: 11px;
  letter-spacing: .65px;
  text-transform: uppercase;
}

.journal-card h2 {
  margin: 0 0 14px;
  font-size: 28px;
  line-height: 1.05;
}

.journal-card > p {
  margin-bottom: 18px;
  color: #4b4b4b;
  line-height: 1.6;
}

.article-hero > div {
  background: var(--announcement);
  color: var(--ivory);
}

.article-hero > div > p:not(.eyebrow) {
  color: rgba(246, 244, 240, .78);
}

.article-body {
  max-width: 1080px;
  margin: 0 auto;
  padding: 110px 45px;
}

.article-body > section {
  display: grid;
  grid-template-columns: 120px minmax(0, 760px);
  gap: 42px;
  padding: 58px 0;
  border-top: 1px solid var(--line);
}

.article-body blockquote {
  max-width: 820px;
  margin: 90px 0 0 120px;
  padding-left: 42px;
  border-left: 1px solid var(--ink);
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 300;
  line-height: 1.18;
}

.related-stories {
  border-top: 1px solid var(--line);
  background: #fbfaf8;
}

.related-stories > div:last-child {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.related-stories a {
  position: relative;
}

.related-stories a img {
  width: 100%;
  aspect-ratio: 16 / 10;
  margin-bottom: 16px;
  object-fit: cover;
}

.related-stories a h3 {
  max-width: 470px;
  margin: 0;
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 300;
}

.related-stories a > svg {
  position: absolute;
  right: 0;
  bottom: 4px;
  width: 18px;
  height: 18px;
}

/* Search and error states */
.search-page-header {
  padding: 84px 45px 54px;
}

.search-page-header form {
  max-width: 950px;
  display: grid;
  grid-template-columns: 1fr auto;
  border-bottom: 1px solid var(--ink);
}

.search-page-header input {
  min-width: 0;
  height: 68px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--serif);
  font-size: 42px;
  font-weight: 300;
}

.search-page-header button {
  cursor: pointer;
  font-size: 12px;
  letter-spacing: .65px;
  text-transform: uppercase;
}

.search-page-header > p:last-child {
  margin: 20px 0 0;
  color: #666;
}

.search-starting-points {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
  padding: 3px;
}

.search-starting-points a {
  min-height: 280px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 30px 20px;
  background: var(--placeholder);
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 300;
  text-align: center;
}

.not-found-page {
  min-height: 70vh;
  display: grid;
  place-items: center;
  align-content: center;
  padding: 90px 20px;
  background: var(--ivory);
  text-align: center;
}

.not-found-page h1 {
  max-width: 720px;
  margin: 0 0 18px;
  font-family: var(--serif);
  font-size: 42px;
  font-weight: 300;
  line-height: 1;
}

.not-found-page > p:not(.eyebrow) {
  max-width: 540px;
  color: #555;
}

.not-found-page > div {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-top: 30px;
}

.not-found-page .outline-button {
  margin: 0;
}

@media (max-width: 1180px) {
  .catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pdp-layout {
    grid-template-columns: minmax(0, 55%) minmax(360px, 45%);
  }

  .pdp-info {
    padding-inline: 4vw;
  }

  .pdp-values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pdp-values > div:nth-child(2) {
    border-right: 0;
  }

  .pdp-values > div:nth-child(-n+2) {
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 989px) {
  .interior-header-spacer {
    height: 65px;
  }

  .search-panel {
    padding-inline: 24px;
  }

  .catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pdp-layout {
    grid-template-columns: 1fr;
  }

  .pdp-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pdp-info {
    padding: 74px 44px 86px;
  }

  .pdp-info-inner {
    position: static;
    max-width: 680px;
    max-height: none;   /* below the sticky breakpoint the panel flows with the page */
    overflow: visible;
  }

  .editorial-hero {
    min-height: 68svh;
  }

  .editorial-hero h1 {
    font-size: 34px;
  }

  .guide-shell {
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 44px;
    padding-inline: 24px;
  }

  .custom-inquiry-block {
    grid-template-columns: 1fr;
    gap: 50px;
    padding-inline: 44px;
  }

  .journal-featured,
  .article-hero {
    min-height: 0;
  }

  .journal-featured-copy,
  .article-hero > div {
    padding: 70px 5vw;
  }

  .journal-featured-copy h1,
  .article-hero h1 {
    font-size: 42px;
  }

  .journal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .site-header--interior {
    top: 28px;
  }

  .site-header--interior.site-header--scrolled {
    top: 0;
  }

  .search-panel {
    top: 65px;
    padding: 24px 20px 28px;
  }

  .search-form {
    grid-template-columns: 22px 1fr;
  }

  .search-form input {
    font-size: 21px;
  }

  .search-form button {
    grid-column: 1 / -1;
    margin-top: 8px;
  }

  .search-suggestions {
    gap: 19px;
  }

  .mobile-drawer {
    right: auto;
    width: min(88vw, 410px);
    height: calc(100svh - 93px);
    align-content: start;
    overflow-y: auto;
    border-right: 1px solid var(--line);
  }

  .mobile-drawer--scrolled {
    height: calc(100svh - 65px);
  }

  .collection-header {
    padding: 58px 20px 40px;
  }

  .collection-header h1 {
    font-size: 34px;
  }

  .collection-header > p:last-child {
    font-size: 14px;
  }

  .collection-quick-links {
    gap: 22px;
    padding-inline: 20px;
  }

  .catalog-toolbar {
    min-height: 60px;
    padding: 0 20px;
  }

  .catalog-controls {
    gap: 13px;
  }

  .catalog-sort {
    min-width: 105px !important;
  }

  .filter-chips {
    padding-inline: 20px;
  }

  .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .catalog-card-copy {
    min-height: 112px;
    padding: 11px 8px 22px;
    font-size: 13px;
  }

  .catalog-save {
    top: 9px;
    right: 8px;
  }

  .catalog-badge {
    top: 10px;
    right: 38px;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .catalog-badge--left {
    right: auto;
    left: 8px;
  }

  .filter-groups {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 28px 20px;
  }

  .filter-sheet-header,
  .filter-sheet-footer {
    padding-inline: 20px !important;
  }

  .filter-sheet-footer > span {
    display: none;
  }

  .pdp-gallery {
    display: flex;
    gap: 3px;
    padding: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .pdp-gallery::-webkit-scrollbar {
    display: none;
  }

  .pdp-gallery-item {
    flex: 0 0 92vw;
    aspect-ratio: 5 / 7;
    scroll-snap-align: start;
  }

  .pdp-info {
    padding: 54px 20px 70px;
  }

  .pdp-title-row h1 {
    font-size: 34px;
  }

  .pdp-option-values {
    gap: 12px 16px;
  }

  .pdp-values {
    grid-template-columns: 1fr;
  }

  .pdp-values > div,
  .pdp-values > div:nth-child(2) {
    padding: 25px 20px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .pdp-values > div:last-child {
    border-bottom: 0;
  }

  .pdp-lifestyle-grid {
    display: flex;
    gap: 3px;
    margin-inline: -20px;
    padding-inline: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .pdp-lifestyle-grid img {
    flex: 0 0 78vw;
    scroll-snap-align: start;
  }

  .pdp-faq {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .pdp-faq-list [data-slot='accordion-trigger'] {
    font-size: 19px;
  }

  .recommendations-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pdp-sticky-cta {
    position: fixed;
    z-index: 20;
    inset: auto 0 0;
    min-height: 68px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 9px 12px 9px 16px;
    border-top: 1px solid var(--line);
    background: rgba(246, 244, 240, .97);
    backdrop-filter: blur(12px);
  }

  .pdp-sticky-cta > span {
    display: grid;
    gap: 2px;
    font-size: 14px;
  }

  .pdp-sticky-cta strong {
    max-width: 52vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pdp-sticky-cta a {
    min-height: 48px;
    display: flex;
    align-items: center;
    padding-inline: 18px;
    background: var(--night);
    color: var(--ivory);
    font-size: 12px;
    letter-spacing: .55px;
    text-transform: uppercase;
  }

  .editorial-hero {
    min-height: 620px;
  }

  .editorial-hero > div:last-child {
    right: 20px;
    bottom: 38px;
    left: 20px;
  }

  .editorial-hero h1 {
    font-size: 34px;
  }

  .editorial-statement {
    padding: 74px 20px;
  }

  .editorial-statement p {
    font-size: 27px;
  }

  .text-page-hero {
    padding: 66px 20px 54px;
  }

  .text-page-hero h1 {
    font-size: 34px;
  }

  .text-page-hero > p:last-child {
    font-size: 15px;
  }

  .static-sections {
    padding: 10px 20px 66px;
  }

  .static-section {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 52px 0;
  }

  .static-section h2,
  .article-body h2 {
    font-size: 28px;
  }

  .guide-shell {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 10px 20px 72px;
  }

  .guide-shell > aside {
    position: static;
    flex-direction: row;
    gap: 22px;
    overflow-x: auto;
    white-space: nowrap;
  }

  .guide-shell > aside > span {
    display: none;
  }

  .faq-page-list [data-slot='accordion-trigger'] {
    font-size: 19px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .custom-inquiry-block {
    gap: 38px;
    padding: 66px 20px;
  }

  .custom-inquiry-heading h2 {
    font-size: 34px;
  }

  .privacy-choice {
    padding: 10px 20px 72px;
  }

  .privacy-choice > label {
    padding: 20px;
  }

  .size-table-section {
    padding: 66px 20px;
  }

  .size-table-wrap {
    margin-inline: -20px;
    padding-inline: 20px;
  }

  .size-table-wrap table {
    min-width: 620px;
  }

  .policy-page {
    padding: 68px 20px 80px;
  }

  .policy-page h1 {
    font-size: 34px;
  }

  .journal-featured,
  .article-hero {
    grid-template-columns: 1fr;
  }

  .journal-featured-media,
  .article-hero > img {
    min-height: 620px;
  }

  .journal-featured-copy,
  .article-hero > div {
    padding: 62px 20px;
  }

  .journal-featured-copy h1,
  .article-hero h1 {
    font-size: 34px;
  }

  .journal-filters {
    padding-inline: 20px;
  }

  .journal-grid {
    grid-template-columns: 1fr;
    gap: 58px;
  }

  .article-body {
    padding: 74px 20px;
  }

  .article-body > section {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 48px 0;
  }

  .article-body blockquote {
    margin: 62px 0 0;
    padding-left: 24px;
    font-size: 28px;
  }

  .related-stories > div:last-child {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .search-page-header {
    padding: 58px 20px 42px;
  }

  .search-page-header input {
    height: 58px;
    font-size: 25px;
  }

  .search-starting-points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .search-starting-points a {
    min-height: 220px;
    font-size: 23px;
  }

  .not-found-page h1 {
    font-size: 34px;
  }

  .not-found-page > div {
    flex-direction: column;
  }
}

/* ==========================================================================
   Liquid-port additions.
   Everything below replaces behavior the React build got from shadcn/Tailwind
   components (Carousel, Accordion, Select, Checkbox, Table, Input) with
   dependency-free equivalents used by the kinn-* sections.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared carousel: overflow-x scroll-snap track + prev/next buttons wired by
   assets/kinn-carousel.js. Slides are direct children of the track; the
   design's slide classes (.product-slide, .custom-slide, .video-slide) keep
   their flex-basis / padding-left exactly as in the source build.
   -------------------------------------------------------------------------- */
.kinn-carousel {
  position: relative;
}

.kinn-carousel__track {
  display: flex;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

.kinn-carousel__track::-webkit-scrollbar {
  display: none;
}

.kinn-carousel__track > * {
  flex: 0 0 auto;
  min-width: 0;
  scroll-snap-align: start;
}

.kinn-carousel__btn {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  transform: translateY(-50%);
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--ivory);
  color: var(--ink);
  cursor: pointer;
  transition: opacity .2s ease, background-color .2s ease;
}

.kinn-carousel__btn svg {
  width: 15px;
  height: 15px;
}

.kinn-carousel__btn[data-dir='-1'] {
  left: 12px;
}

.kinn-carousel__btn[data-dir='1'] {
  right: 12px;
}

.kinn-carousel__btn:disabled {
  opacity: .35;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .kinn-carousel__track {
    scroll-behavior: auto;
  }
}

/* --------------------------------------------------------------------------
   Comparison table: the React build inherited width/overflow from the shadcn
   Table wrapper (w-full + overflow-x-auto). Made explicit here.
   -------------------------------------------------------------------------- */
.comparison-table {
  width: 100%;
}

.comparison-desktop {
  overflow-x: auto;
}

/* --------------------------------------------------------------------------
   Accordions ported as native <details>/<summary>. These mirror the
   [data-slot='accordion-*'] rules above so a details-based port renders
   identically. Summary chevrons rotate on open.
   -------------------------------------------------------------------------- */
.faq-list summary,
.pdp-accordions summary,
.pdp-faq-list summary,
.faq-page-list summary,
summary.faq-trigger,
button.faq-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  cursor: pointer;
  list-style: none;
  text-align: left;
}

.faq-list summary::-webkit-details-marker,
.pdp-accordions summary::-webkit-details-marker,
.pdp-faq-list summary::-webkit-details-marker,
.faq-page-list summary::-webkit-details-marker,
summary.faq-trigger::-webkit-details-marker {
  display: none;
}

.faq-list summary svg,
.pdp-accordions summary svg,
.pdp-faq-list summary svg,
.faq-page-list summary svg {
  flex: 0 0 auto;
  transition: transform .25s ease;
}

.faq-list details[open] > summary svg,
.pdp-accordions details[open] > summary svg,
.pdp-faq-list details[open] > summary svg,
.faq-page-list details[open] > summary svg {
  transform: rotate(180deg);
}

.faq-list details {
  border-bottom: 1px solid #aaa6a0;
}

.pdp-accordions details {
  border-bottom: 1px solid var(--line);
}

.pdp-accordions summary {
  min-height: 56px;
  padding: 15px 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .65px;
  text-transform: uppercase;
}

.pdp-accordions details > :not(summary) {
  padding: 0 20px 20px 0;
  color: #4b4b4b;
  font-size: 15px;
  line-height: 1.65;
}

.pdp-faq-list details {
  border-bottom: 1px solid #aaa6a0;
}

.pdp-faq-list summary {
  min-height: 70px;
  padding: 18px 0;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 300;
}

.pdp-faq-list details > :not(summary) {
  max-width: 680px;
  padding: 0 35px 24px 0;
  color: #4b4b4b;
  line-height: 1.6;
}

.faq-page-list details {
  border-bottom: 1px solid #aaa6a0;
}

.faq-page-list summary {
  min-height: 70px;
  padding: 18px 0;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 300;
  line-height: 1.2;
}

.faq-page-list details > :not(summary) {
  padding: 0 40px 24px 0;
  color: #494949;
  font-size: 14px;
  line-height: 1.65;
}

summary:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

@media (max-width: 700px) {
  .pdp-faq-list summary {
    font-size: 19px;
  }

  .faq-page-list summary {
    font-size: 19px;
  }
}

/* --------------------------------------------------------------------------
   Form controls: the React build styled shadcn slots ([data-slot='input'],
   [data-slot='textarea'], [data-slot='checkbox']). Plain elements inside
   .kinn-form / .filter-option / .privacy-choice get the same treatment.
   -------------------------------------------------------------------------- */
.kinn-form input:not([type='checkbox']):not([type='radio']),
.kinn-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 9px 0;
  border: 0;
  border-bottom: 1px solid #9b9791;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  letter-spacing: .3px;
  text-transform: none;
}

.kinn-form textarea {
  min-height: 130px;
  resize: vertical;
}

.kinn-form--dark input:not([type='checkbox']):not([type='radio']),
.kinn-form--dark textarea {
  border-color: rgba(246, 244, 240, .42);
  color: var(--ivory);
}

.filter-option input[type='checkbox'],
.privacy-choice input[type='checkbox'],
.privacy-choice input[type='radio'] {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--night);
}

select.catalog-sort {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Header logo: the design's text wordmark is replaced by the existing Kioraa
   logo SVG (//kioraajewel.com/cdn/shop/files/kioraa_jewel_logo.svg). Sized to
   the header row; rendered ivory while the transparent header overlays the
   hero, natural color once the header goes solid/scrolled.
   -------------------------------------------------------------------------- */
.wordmark {
  display: block;
  letter-spacing: 0;
}

.wordmark img {
  display: block;
  height: 32px;
  width: auto;
}

.site-header:not(.site-header--scrolled):not(.site-header--solid) .wordmark img {
  /* logo renders natively (gold+white artwork) */
  }

@media (max-width: 989px) {
  .wordmark img {
    height: 28px;
  }
}

/* --------------------------------------------------------------------------
   Live currency-estimate hook: .price-item / .price-item--regular must keep
   their classes wherever a price renders. Neutralize Craft's component-price
   styling inside the revamp cards so the money figure inherits the design.
   -------------------------------------------------------------------------- */
.product-meta .price-item,
.catalog-card-price .price-item,
.pdp-price .price-item,
.pdp-sticky-cta .price-item {
  margin: 0;
  padding: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

/* ---- Craft-cascade neutralizers (must stay at end of file) ----
   Craft's base.css sets color directly on headings; the Kinn design system
   relies on inheritance from colored section shells (.hero-shell, footer,
   .custom-section etc.). Direct rules beat inheritance regardless of load
   order, so re-assert inheritance at equal specificity, later in cascade. */
h1, h2, h3, h4, h5, h6 {
  color: inherit;
}

/* ---- App-integration corrections on the kinn PDP ---- */
/* kioraa-trust-row ships unsized SVGs (its sizing lived in kioraa.css, which
   this layout does not load). Size them here. */
.kioraa-trust__icon svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

/* Notify Me and Swym both inject their own wishlist CTA under the buy buttons;
   the design already provides a wishlist control. Suppress the injected ones. */
.pdp-info .nm-wishlist-button,
.pdp-info .atw-button,
.pdp-form .nm-wishlist-button,
.pdp-form .atw-button {
  display: none !important;
}


/* ============================================================
   UNIFIED TYPE SCALE — client-specified 2026-09-02. FINAL AUTHORITY.
   H1 42 · H2 28 · H4/FAQ 21 · body headings (h3) 18 · body 15
   CTA 15 · eyebrow/labels 13.  !important on purpose: this block
   flattens every earlier per-section and per-breakpoint size.
   Change sizes HERE only.
   ============================================================ */
h1 { font-size: 42px !important; }
h2 { font-size: 28px !important; }
h3 { font-size: 18px !important; }
h4, h5, h6 { font-size: 21px !important; }
.article-body blockquote { font-size: 28px !important; } /* pull quotes read as H2 */

body { font-size: 15px !important; }

/* body copy — everything that previously sat at 12–14px copy tiers */
p, li, td, dd,
.product-meta, .catalog-card-copy, .pdp-values span,
.footer-links a, .filter-option, .form-success, .privacy-choice > p,
.policy-preview-note, .guide-shell > aside a, .collections-directory p,
.search-suggestions, .filter-sheet-header p, .pdp-cta-block > p,
.pdp-quantity, .comparison-mobile p,
input, select, textarea {
  font-size: 15px !important;
}

/* CTAs — all buttons and action links */
button, .outline-button, .text-link, .pdp-primary-cta, .pdp-sticky-cta a,
.catalog-control-button, .filter-chips button, .search-form button,
.search-page-header button, .load-more-wrap > span, .story-link,
.pdp-accordions summary, .pdp-accordions [data-slot='accordion-trigger'] {
  font-size: 15px !important;
}

/* FAQ / question accordions — the 21px tier */
.faq-trigger, .faq-page-list summary, .faq-page-list [data-slot='accordion-trigger'],
.pdp-faq-list summary, .pdp-faq-list [data-slot='accordion-trigger'] {
  font-size: 21px !important;
}

/* eyebrows and labels — 13px */
.eyebrow, .ink-eyebrow, .story-eyebrow, .pdp-breadcrumb, .pdp-note,
.footer-legal, .comparison-table th, .comparison-page-table th,
.size-table-wrap th, .filter-group legend, .pdp-option legend,
.kinn-form label, .video-card figcaption, .custom-slide > p,
.announcement, .primary-nav, .header-actions, .catalog-toolbar,
.journal-filters, .catalog-badge,
.static-section > span, .article-body > section > span, .guide-shell > aside > span {
  font-size: 13px !important;
}

/* ============================================================
   PDP additions — spec sheet, certification line, sizing help,
   variant-linked gallery and lightbox. Sizes intentionally use
   the tokens set by the UNIFIED TYPE SCALE block above.
   ============================================================ */

.pdp-certification {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  font-family: var(--sans);
  font-size: 13px !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft, #6b6b6b);
}
.pdp-certification svg { width: 15px; height: 15px; flex: none; opacity: .75; }
.pdp-sku { text-transform: none; letter-spacing: .02em; }

.pdp-size-help {
  margin: 9px 0 0;
  font-size: 13px !important;
  color: var(--ink-soft, #6b6b6b);
}
.pdp-size-help a { color: inherit; text-underline-offset: 3px; }
.pdp-size-help a:hover { color: var(--ink, #1c1c1c); }
.pdp-size-help span { margin: 0 5px; opacity: .5; }

/* Client-authored spec sheet (ring width / centre stone / side stone). The metafield ships its
   own wrapper classes, so style those rather than rewriting the client's HTML. */
.pdp-detail-sheet { margin-top: 22px; }
.pdp-detail-sheet > h3 {
  margin: 0 0 10px;
  font-family: var(--sans);
  font-size: 13px !important;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft, #6b6b6b);
}
.pdp-detail-sheet .custom-product-detail-block + .custom-product-detail-block { margin-top: 16px; }
.pdp-detail-sheet h3 {
  margin: 0 0 6px;
  font-family: var(--sans);
  font-size: 13px !important;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft, #6b6b6b);
}
.pdp-detail-sheet p {
  margin: 0 0 4px;
  font-size: 15px !important;
  line-height: 1.5;
}
.pdp-detail-sheet .custom-product-detail-grid { display: grid; gap: 4px; }

.pdp-disclaimer {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--rule, rgba(0,0,0,.12));
}
.pdp-disclaimer h3 {
  margin: 0 0 8px;
  font-family: var(--sans);
  font-size: 13px !important;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft, #6b6b6b);
}
.pdp-disclaimer ul { margin: 0; padding-left: 16px; }
.pdp-disclaimer li {
  font-size: 13px !important;
  line-height: 1.55;
  color: var(--ink-soft, #6b6b6b);
  margin-bottom: 3px;
}

/* Gallery: zoom trigger wraps each shot without changing its box. */
.pdp-gallery-zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  font: inherit;
  color: inherit;
}
.pdp-gallery-zoom img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pdp-gallery-item { position: relative; }
.pdp-gallery-item.is-variant-target::after {
  content: '';
  position: absolute;
  inset: 0;
  outline: 2px solid var(--ink, #1c1c1c);
  outline-offset: -2px;
  pointer-events: none;
  animation: kinn-variant-flash 1.4s ease forwards;
}
@keyframes kinn-variant-flash { 0% { opacity: 0; } 18% { opacity: .85; } 100% { opacity: 0; } }

.kinn-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 4vmin;
  background: rgba(18, 18, 18, .93);
}
.kinn-lightbox[hidden] { display: none; }
.kinn-lightbox figure { margin: 0; max-width: min(92vw, 720px); text-align: center; }
.kinn-lightbox img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 84vh;
  object-fit: contain;
}
.kinn-lightbox figcaption {
  margin-top: 12px;
  font-family: var(--sans);
  font-size: 13px !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}
.kinn-lightbox-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  background: none;
  color: #fff;
  cursor: pointer;
}
.kinn-lightbox-close svg { width: 19px; height: 19px; }
.kinn-lightbox-close:hover { background: rgba(255, 255, 255, .12); }

@media (max-width: 700px) {
  .kinn-lightbox figure { max-width: 96vw; }
}

/* ============================================================
   PDP gallery rail + promises row (2 Sep)
   ============================================================ */

.pdp-thumbs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: calc(100vh - 132px);
  overflow-y: auto;
  scrollbar-width: none;
}
.pdp-thumbs::-webkit-scrollbar { display: none; }

.pdp-thumb {
  flex: none;
  width: 80px;
  aspect-ratio: 5 / 7;
  padding: 0;
  border: 1px solid transparent;
  background: var(--placeholder, #ecebe7);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .18s ease, opacity .18s ease;
  opacity: .62;
}
.pdp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdp-thumb:hover { opacity: .9; }
.pdp-thumb.is-active { opacity: 1; border-color: var(--ink, #1c1c1c); }
.pdp-thumb:focus-visible { outline: 2px solid var(--ink, #1c1c1c); outline-offset: 2px; }

.pdp-gallery-main {
  position: relative;
  margin: 0 auto;
  /* Height-driven so the whole shot lands inside the first fold. Width follows from the 5:7
     ratio; a width-driven frame on a wide column ran ~1350px tall and overflowed the screen. */
  height: calc(100vh - 132px);
  max-height: 900px;
  aspect-ratio: 5 / 7;
  width: auto;
  max-width: 100%;
  overflow: hidden;
  background: var(--placeholder, #ecebe7);
}
.pdp-gallery-main .pdp-gallery-zoom,
.pdp-gallery-main img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pdp-gallery-counter {
  position: absolute;
  right: 12px;
  bottom: 12px;
  margin: 0;
  padding: 4px 9px;
  font-family: var(--sans);
  font-size: 13px !important;
  letter-spacing: .06em;
  color: var(--ink, #1c1c1c);
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(2px);
}

.pdp-made-to-order {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 12px 0 0;
  font-family: var(--sans);
  font-size: 15px !important;
  color: var(--ink, #1c1c1c);
}
.pdp-made-to-order svg { width: 17px; height: 17px; flex: none; }

/* Six promises — two rows of three, hairline separated, icons drawn as line art. */
.pdp-promises {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px 14px;
  margin: 26px 0 0;
  padding: 22px 0 0;
  list-style: none;
  border-top: 1px solid var(--rule, rgba(0,0,0,.12));
}
.pdp-promises li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  text-align: center;
}
.pdp-promises svg {
  width: 27px;
  height: 27px;
  color: var(--ink, #1c1c1c);
  opacity: .78;
}
.pdp-promises span {
  font-family: var(--sans);
  font-size: 13px !important;
  line-height: 1.35;
  letter-spacing: .02em;
  color: var(--ink-soft, #5f5f5f);
}

@media (max-width: 989px) {
  .pdp-gallery {
    position: static;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 10px;
    padding: 12px 0 12px 12px;
  }
  .pdp-thumbs { max-height: none; }
  .pdp-thumb { width: 64px; }
  /* Below the sticky breakpoint the frame goes back to being width-driven. Keeping the
     viewport-height sizing here fought `max-width` and collapsed the frame to a sliver. */
  /* `justify-items: center` on the grid makes items shrink-to-fit, so a percentage width has
     nothing to resolve against — stretch the track instead and let the ratio set the height. */
  .pdp-gallery { justify-items: stretch; }
  .pdp-gallery-main {
    height: auto;
    max-height: none;
    width: auto;
  }
}

@media (max-width: 700px) {
  .pdp-gallery {
    /* An earlier rule turns this into a flex scroll-snap row for the old swipeable stack of
       .pdp-gallery-item, which no longer exists — that flex context collapsed the new frame to
       a sliver, so the grid is restored explicitly here. */
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow-x: visible;
    scroll-snap-type: none;
    gap: 10px;
    padding: 10px 12px;
  }
  /* On phones the rail reads better as a horizontal strip under the image. */
  .pdp-gallery-main { order: 1; }
  .pdp-thumbs {
    order: 2;
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 2px;
  }
  .pdp-thumb { width: 58px; }
  .pdp-promises { gap: 18px 10px; }
}

/* ============================================================
   Mega menu — structure comes from the store's 'nav-menu'
   linklist; styling follows the existing header design.
   ============================================================ */

.primary-nav { display: flex; align-items: center; gap: 26px; }

.nav-item { display: flex; align-items: center; }

.primary-nav .nav-top {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 0;
  position: relative;   /* containing block for the hover underline only */
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
}
.nav-caret { width: 13px; height: 13px; opacity: .55; transition: transform .18s ease; }
.nav-item.is-open .nav-caret { transform: rotate(180deg); }
.primary-nav .nav-top::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width .22s ease;
}
.nav-item:hover .nav-top::after,
.nav-item.is-open .nav-top::after { width: 100%; }

/* Anchored to the header element itself (which is position:fixed, so it is the containing
   block once .nav-item is no longer relative). top:100% means the panel always starts exactly
   at the header's bottom edge and follows it as the header changes height on scroll or when
   the logo size changes — a measured pixel offset went stale and overlapped by a few px. */
.mega-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 60;
  background: var(--ivory, #f6f4ef);
  /* The header paints its text ivory for the transparent overlay state, and the panel is a
     child of it — without this the panel rendered ivory-on-ivory and the links were invisible. */
  color: var(--ink, #1c1c1c);
  border-top: 1px solid var(--rule, rgba(0,0,0,.1));
  box-shadow: 0 18px 40px -28px rgba(0,0,0,.45);
  animation: kinn-mega-in .16s ease;
}
.mega-panel a { color: var(--ink, #1c1c1c); }
.mega-panel .mega-col-title { color: var(--ink-soft, #6b6b6b); }
.mega-panel[hidden] { display: none; }
/* Opacity only. A translateY here left the panel stuck 6px high: the element is display:none
   when the animation is assigned, so it held the first keyframe's transform and sat overlapping
   the header instead of sitting flush under it. */
@keyframes kinn-mega-in { from { opacity: 0; } to { opacity: 1; } }

.mega-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 264px;
  gap: 40px;
  max-width: 1360px;
  margin: 0 auto;
  padding: 38px 6vw 44px;
}

.mega-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 30px 36px;
}

.mega-col-title {
  display: block;
  margin: 0 0 12px;
  font-family: var(--sans);
  font-size: 13px !important;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft, #6b6b6b);
  text-decoration: none;
}
a.mega-col-title:hover { color: var(--ink, #1c1c1c); }

.mega-col ul { margin: 0; padding: 0; list-style: none; }
.mega-col li + li { margin-top: 7px; }
.mega-col li a {
  font-family: var(--sans);
  font-size: 15px !important;
  color: var(--ink, #1c1c1c);
  text-decoration: none;
  text-underline-offset: 3px;
}
.mega-col li a:hover { text-decoration: underline; }

/* Shapes column: cut icon + label per row, matching the live menu. */
.mega-shapes li a {
  display: flex;
  align-items: center;
  gap: 10px;
}
.shape-icon {
  width: 19px;
  height: 19px;
  flex: none;
  opacity: .72;
  transition: opacity .16s ease;
}
.mega-shapes li a:hover .shape-icon { opacity: 1; }
.mega-shapes li a:hover span { text-decoration: underline; text-underline-offset: 3px; }
.mega-shapes li a { text-decoration: none; }

/* Feature card: a real photograph with a caption, as the live menu shows. */
.mega-feature { padding-left: 8px; }
.mega-feature a { display: block; text-decoration: none; color: inherit; }
.mega-feature-media {
  display: block;
  aspect-ratio: 5 / 7;
  max-height: 300px;
  overflow: hidden;
  background: var(--placeholder, #ecebe7);
}
.mega-feature-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.mega-feature a:hover .mega-feature-media img { transform: scale(1.04); }
.mega-feature-caption {
  display: block;
  margin-top: 12px;
  font-family: var(--sans);
  font-size: 13px !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink, #1c1c1c);
}
.mega-feature-title {
  display: block;
  margin: 8px 0 14px;
  font-family: var(--serif);
  font-size: 28px !important;
  font-weight: 300;
  line-height: 1.1;
}
.mega-feature-link {
  font-family: var(--sans);
  font-size: 15px !important;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Mobile drawer groups */
.mobile-drawer {
  /* The drawer previously held a short list of plain links that carried their own inset; the
     menu tree needs the gutter on the container so headings and links share one left edge. */
  padding-inline: 22px;
  padding-bottom: 28px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.drawer-group { border-bottom: 1px solid var(--rule, rgba(0,0,0,.12)); }
.drawer-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--sans);
  font-size: 15px !important;
}
.drawer-group > summary::-webkit-details-marker { display: none; }
.drawer-group > summary svg { width: 17px; height: 17px; opacity: .6; transition: transform .18s ease; }
.drawer-group[open] > summary svg { transform: rotate(180deg); }
.drawer-group-body { padding: 2px 0 16px; }
.drawer-shop-all {
  display: block;
  margin-bottom: 12px;
  font-size: 15px !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.drawer-col-title {
  display: block;
  margin: 14px 0 7px;
  font-family: var(--sans);
  font-size: 13px !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft, #6b6b6b);
  text-decoration: none;
}
.drawer-sub {
  display: block;
  padding: 5px 0 5px 12px;
  font-size: 15px !important;
}
.drawer-top {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule, rgba(0,0,0,.12));
  font-size: 15px !important;
}
.drawer-utility { padding-top: 18px; }
.drawer-utility a { display: block; padding: 7px 0; font-size: 15px !important; color: var(--ink-soft, #6b6b6b); }

@media (max-width: 1100px) {
  .primary-nav { gap: 18px; }
  .mega-inner { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .mega-feature { padding: 22px 0 0; max-width: 240px; }
}

/* Footer columns now come from five store menus rather than four hand-written lists, so the
   row needs to wrap rather than force five-plus columns onto narrow screens. */
.footer-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 30px 26px;
}
.footer-credit a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 700px) {
  .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; }
}

/* ============================================================
   Utility top bar — phone + appointment left, promise strip right
   ============================================================ */
.announcement { padding: 0; }
.topbar-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 28px;
  min-height: 34px;
}
.topbar-left { display: flex; align-items: center; gap: 20px; justify-self: start; }
.topbar-left a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  opacity: .92;
}
.topbar-left a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.topbar-left svg { width: 14px; height: 14px; flex: none; }

.topbar-center { margin: 0; text-align: center; white-space: nowrap; }

.topbar-right {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  justify-self: end;
}
.topbar-right li { white-space: nowrap; opacity: .92; }
.topbar-right li + li::before {
  content: '';
  display: inline-block;
  width: 1px;
  height: 10px;
  margin: 0 12px;
  vertical-align: -1px;
  background: currentColor;
  opacity: .35;
}

@media (max-width: 1180px) {
  .topbar-center { display: none; }
  .topbar-inner { grid-template-columns: auto auto; justify-content: space-between; }
}
@media (max-width: 860px) {
  .topbar-inner { grid-template-columns: 1fr; justify-items: center; padding: 5px 16px; gap: 4px; }
  .topbar-left { gap: 16px; }
  .topbar-right li + li::before { margin: 0 8px; }
}
@media (max-width: 560px) {
  /* Keep the promises — they are the reassurance — and drop the second utility link. */
  .topbar-appointment { display: none; }
  .topbar-right li:nth-child(1)::after { content: none; }
}

/* ============================================================
   Category strip — auto-scrolling carousel, model image on hover
   ============================================================ */
.category-strip-section {
  /* Was sitting on bare white between two pale sections, which made the row float. */
  background: var(--ivory, #f6f4f0);
  padding: clamp(46px, 6vw, 84px) 0 clamp(40px, 5vw, 70px);
}
/* The heading block shares the card rail's inset so the eyebrow, title and first card all
   start on the same line — previously the heading used its own padding and sat proud. */
.category-strip-section .section-heading-row {
  display: block;
  max-width: none;
  margin: 0 0 clamp(22px, 3vw, 34px);
  padding: 0 6vw;
  text-align: left;
}
.category-strip-section .section-heading-row .eyebrow { margin: 0 0 8px; }
.category-strip-section .section-heading-row h2 { margin: 0; }

.category-carousel { position: relative; }
.category-strip {
  display: flex;
  gap: 16px;
  padding: 4px 6vw 6px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.category-strip::-webkit-scrollbar { display: none; }

.category-card {
  flex: 0 0 clamp(210px, 21vw, 292px);
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}
.category-card-media {
  position: relative;
  display: block;
  aspect-ratio: 5 / 7;
  overflow: hidden;
  background: var(--placeholder, #e9e5df);
}
.category-card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .45s ease, transform .7s ease;
}
.category-card-image--hover { opacity: 0; }
.category-card:hover .category-card-image--hover { opacity: 1; }
.category-card:hover .category-card-image { transform: scale(1.03); }

/* Name sits under its own image, centred on the card. */
.category-card-label {
  display: block;
  margin-top: 14px;
  padding: 0 6px;
  font-family: var(--sans);
  font-size: 13px !important;
  letter-spacing: .1em;
  line-height: 1.4;
  text-transform: uppercase;
  text-align: center;
}
.category-card:hover .category-card-label { text-decoration: underline; text-underline-offset: 4px; }

.category-carousel .collection-arrow {
  position: absolute;
  top: calc(50% - 30px);
  transform: translateY(-50%);
  z-index: 2;
  background: var(--ivory, #f6f4f0);
}
.category-carousel .collection-arrow--prev { left: calc(6vw - 21px); }
.category-carousel .collection-arrow--next { right: calc(6vw - 21px); }

@media (max-width: 700px) {
  .category-strip { gap: 12px; padding: 4px 5vw 6px; }
  .category-card { flex-basis: 58vw; }
  .category-carousel .collection-arrow { display: none; }
}
}

/* Footer compressed — five columns instead of six, tighter vertical rhythm. */
.site-footer .footer-main { padding-bottom: clamp(22px, 3vw, 38px); }
.footer-links { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 24px 22px; }
.footer-links h3 { margin-bottom: 9px; }
.footer-links a { padding: 3px 0; }
.footer-wordmark { margin: 1vw auto -0.5vw; width: min(78%, 900px); }
.footer-legal { padding-top: 14px; }
@media (max-width: 700px) {
  .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
  .footer-wordmark { width: 92%; }
}

/* ============================================================
   PDP refinements — price scale, spec pills, hairline separation,
   process / assurance / reviews sections
   ============================================================ */

/* Price was reading at body size against a 42px title. Bring it up so it carries. */
.pdp-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.pdp-price .price-item--regular {
  font-family: var(--sans);
  font-size: 28px !important;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.15;
}
.pdp-price del {
  font-size: 17px !important;
  opacity: .5;
}
.pdp-price .kioraa-approx,
.pdp-price [data-currency-approx] { font-size: 13px !important; opacity: .72; }

/* Stone facts, stated outright above the price. */
.pdp-spec-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
.pdp-spec-pills li {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid var(--rule, rgba(0,0,0,.14));
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 13px !important;
  line-height: 1.2;
}
.pdp-spec-pills .pill-key { color: var(--ink-soft, #6b6b6b); }
.pdp-spec-pills .pill-val { color: var(--ink, #1c1c1c); }

/* Hairline separation so the column reads as grouped blocks, not one run of text. */
.pdp-info-inner .pdp-price,
.pdp-info-inner .pdp-options,
.pdp-info-inner .pdp-cta-block,
.pdp-info-inner .pdp-promises,
.pdp-info-inner .pdp-accordions { position: relative; }
.pdp-info-inner .pdp-options { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--rule, rgba(0,0,0,.1)); }
.pdp-info-inner .pdp-promises { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--rule, rgba(0,0,0,.1)); }
.pdp-info-inner .pdp-accordions { margin-top: 24px; padding-top: 4px; border-top: 1px solid var(--rule, rgba(0,0,0,.1)); }
.pdp-option + .pdp-option { margin-top: 18px; }
.pdp-specs > div { padding: 9px 0; border-bottom: 1px solid var(--rule, rgba(0,0,0,.08)); }
.pdp-specs > div:last-child { border-bottom: 0; }

/* Four promises — matches the homepage Why-Us set. */
.pdp-promises { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pdp-promises svg { width: 24px; height: 24px; }

/* How our rings are made */
.pdp-process { background: var(--ivory, #f6f4f0); }
.pdp-process-head { text-align: center; margin-bottom: clamp(24px, 3vw, 40px); }
.pdp-process-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.pdp-process-steps li { position: relative; padding-top: 20px; border-top: 1px solid var(--rule, rgba(0,0,0,.16)); }
.pdp-process-steps .step-no {
  display: block;
  margin-bottom: 10px;
  font-family: var(--sans);
  font-size: 13px !important;
  letter-spacing: .14em;
  color: var(--ink-soft, #6b6b6b);
}
.pdp-process-steps h3 { margin: 0 0 7px; font-size: 18px !important; }
.pdp-process-steps p { margin: 0; font-size: 15px !important; line-height: 1.55; }

/* Assurance grid */
.pdp-assurance-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px 26px;
  max-width: 1240px;
  margin: clamp(24px, 3vw, 40px) auto clamp(20px, 2.4vw, 32px);
}
.pdp-assurance-grid article { text-align: center; }
.pdp-assurance-grid svg { width: 26px; height: 26px; opacity: .8; margin-bottom: 12px; }
.pdp-assurance-grid h3 { margin: 0 0 6px; font-size: 18px !important; }
.pdp-assurance-grid p { margin: 0; font-size: 15px !important; line-height: 1.55; color: var(--ink-soft, #5f5f5f); }
.pdp-assurance { text-align: center; }

/* Reviews — honest empty state until a review app is installed. */
.pdp-reviews-empty {
  max-width: 560px;
  margin: clamp(20px, 3vw, 34px) auto 0;
  padding: clamp(26px, 4vw, 44px) 28px;
  border: 1px solid var(--rule, rgba(0,0,0,.12));
  text-align: center;
}
.pdp-reviews-empty p { margin: 0 0 18px; font-size: 15px !important; line-height: 1.6; }

@media (max-width: 989px) {
  .pdp-process-steps, .pdp-assurance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .pdp-promises { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pdp-price .price-item--regular { font-size: 25px !important; }
}

/* ============================================================
   About and Contact pages
   ============================================================ */
.about-hero { text-align: center; padding-bottom: clamp(20px, 3vw, 34px); }
.about-hero-copy {
  max-width: 720px;
  margin: 18px auto 0;
  font-size: 15px !important;
  line-height: 1.7;
}

.about-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px 28px;
  max-width: 1240px;
  margin-inline: auto;
}
.about-card { text-align: center; }
.about-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin-bottom: 18px;
  background: var(--placeholder, #ecebe7);
}
.about-card h2 { margin: 0 0 10px; font-size: 28px !important; }
.about-card-copy { font-size: 15px !important; line-height: 1.65; color: var(--ink-soft, #5f5f5f); }

.about-story {
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(420px, 52vw, 620px);
  overflow: hidden;
  background: var(--announcement, #23334f);
  color: var(--ivory, #f6f4f0);
}
.about-story-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .5;
}
.about-story-inner {
  position: relative;
  max-width: 620px;
  margin-left: clamp(24px, 8vw, 130px);
  padding: clamp(40px, 6vw, 70px) 24px;
}
.about-story-inner h2 { margin: 6px 0 16px; }
.about-story-copy { font-size: 15px !important; line-height: 1.7; }
.about-story-copy p + p { margin-top: 14px; }

.about-promise { text-align: center; }
.about-promise-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 26px 18px;
  max-width: 1140px;
  margin: clamp(24px, 3vw, 38px) auto clamp(22px, 3vw, 34px);
  padding: 0;
  list-style: none;
}
.about-promise-grid li { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.about-promise-grid svg { width: 26px; height: 26px; opacity: .78; }
.about-promise-grid span {
  font-family: var(--sans);
  font-size: 13px !important;
  letter-spacing: .04em;
  line-height: 1.4;
  color: var(--ink-soft, #5f5f5f);
}
.about-cta-pair { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; }

.about-longform { max-width: 760px; margin-inline: auto; }
.about-longform h2 { margin-bottom: 16px; }
.about-longform-copy { font-size: 15px !important; line-height: 1.75; }
.about-longform-copy p + p { margin-top: 15px; }

.about-banner {
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(340px, 40vw, 470px);
  overflow: hidden;
  background: var(--ivory, #f6f4f0);
}
.about-banner-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about-banner-card {
  position: relative;
  max-width: 420px;
  margin-left: clamp(24px, 8vw, 130px);
  padding: clamp(28px, 4vw, 42px);
  background: var(--ivory, #f6f4f0);
}
.about-banner-card h2 { margin: 0 0 10px; }
.about-banner-card p { margin: 0 0 18px; font-size: 15px !important; }

/* Contact */
.contact-breadcrumb {
  padding: 100px 6vw 0;
  font-family: var(--sans);
  font-size: 13px !important;
  color: var(--ink-soft, #6b6b6b);
}
.contact-breadcrumb a { color: inherit; }
.contact-breadcrumb span { margin: 0 4px; }
.contact-head { padding: 18px 6vw 0; }
.contact-intro { max-width: 620px; margin-top: 12px; font-size: 15px !important; line-height: 1.65; }

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  max-width: 1240px;
  margin-inline: auto;
}
.contact-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.contact-form label, .contact-message { display: block; margin-bottom: 16px; }
.contact-form label > span {
  display: block;
  margin-bottom: 6px;
  font-family: var(--sans);
  font-size: 13px !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft, #6b6b6b);
}
.contact-form abbr { text-decoration: none; }
.contact-form input, .contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--rule, rgba(0,0,0,.18));
  background: transparent;
  font-family: var(--sans);
  font-size: 15px !important;
  color: inherit;
}
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--ink, #1c1c1c); outline-offset: -2px; }
.contact-form .pdp-primary-cta { width: auto; min-width: 190px; margin-top: 4px; }
.contact-note { margin-top: 12px; font-size: 13px !important; color: var(--ink-soft, #6b6b6b); }
.contact-success, .contact-error { padding: 12px 14px; margin-bottom: 18px; font-size: 15px !important; }
.contact-success { border: 1px solid rgba(30,110,60,.4); }
.contact-error { border: 1px solid rgba(150,40,40,.4); }

.contact-details { margin: 0; padding: 0; list-style: none; }
.contact-details li {
  display: flex;
  gap: 14px;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule, rgba(0,0,0,.1));
}
.contact-details li:first-child { padding-top: 0; }
.contact-details svg { width: 20px; height: 20px; flex: none; margin-top: 2px; opacity: .7; }
.contact-details h2 {
  margin: 0 0 5px;
  font-family: var(--sans);
  font-size: 13px !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft, #6b6b6b);
}
.contact-details p { margin: 0; font-size: 15px !important; line-height: 1.6; }
.contact-details a { color: inherit; }
.contact-hours { margin-top: 4px !important; font-size: 13px !important; color: var(--ink-soft, #6b6b6b); }

.contact-appointment {
  text-align: center;
  padding: clamp(40px, 6vw, 70px) 6vw;
  background: var(--ivory, #f6f4f0);
}
.contact-appointment p { max-width: 560px; margin: 10px auto 20px; font-size: 15px !important; }

@media (max-width: 989px) {
  .about-cards { grid-template-columns: 1fr; }
  .about-promise-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contact-layout { grid-template-columns: 1fr; }
  .about-story-inner, .about-banner-card { margin-inline: 5vw; }
}
@media (max-width: 560px) {
  .about-promise-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-row { grid-template-columns: 1fr; }
}

/* ============================================================
   Header round 3 — wider top bar, readable nav over pale imagery
   ============================================================ */

/* Push the utility items right out to the edges. */
.topbar-inner {
  grid-template-columns: auto auto;
  justify-content: space-between;
  max-width: none;
  padding: 0 22px;
}

/* The overlay header sits on whatever the hero happens to be. Over a pale image the ivory
   nav and gold logo disappeared, so the transparent state now carries a soft dark scrim that
   fades out downward — enough to hold the type, not enough to read as a bar. */
.site-header:not(.site-header--solid)::before {
  content: '';
  position: absolute;
  inset: -28px 0 auto;
  height: 190px;
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgba(16, 24, 38, .62) 0%,
    rgba(16, 24, 38, .42) 45%,
    rgba(16, 24, 38, 0) 100%
  );
}
.site-header:not(.site-header--solid) { isolation: isolate; }
.site-header:not(.site-header--solid) .primary-nav,
.site-header:not(.site-header--solid) .header-actions {
  text-shadow: 0 1px 12px rgba(10, 16, 28, .38);
}

/* PDP option buttons — every choice visible without opening a dropdown. */
.pdp-option--buttons legend {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-bottom: 10px;
}
.pdp-option-chosen {
  font-family: var(--sans);
  font-size: 15px !important;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink, #1c1c1c);
}
.pdp-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.pdp-swatch {
  min-width: 74px;
  padding: 11px 15px;
  border: 1px solid var(--rule, rgba(0,0,0,.22));
  background: transparent;
  font-family: var(--sans);
  font-size: 15px !important;
  line-height: 1.2;
  color: var(--ink, #1c1c1c);
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease;
}
.pdp-swatch:hover { border-color: var(--ink, #1c1c1c); }
.pdp-swatch.is-selected {
  border-color: var(--ink, #1c1c1c);
  box-shadow: inset 0 0 0 1px var(--ink, #1c1c1c);
}
.pdp-swatch.is-unavailable {
  opacity: .38;
  text-decoration: line-through;
}
.pdp-swatch:focus-visible { outline: 2px solid var(--ink, #1c1c1c); outline-offset: 2px; }

/* Ring size row: guide link sits on the label, next to the field it belongs to. */
.pdp-find-size {
  font-family: var(--sans);
  font-size: 13px !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.pdp-option legend { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; }

.pdp-consult {
  margin: 14px 0 0;
  font-family: var(--sans);
  font-size: 15px !important;
  text-align: center;
  color: var(--ink-soft, #5f5f5f);
}
.pdp-consult a { color: var(--ink, #1c1c1c); text-decoration: underline; text-underline-offset: 3px; }

/* Footer trust row — certification left, payment marks right. */
.footer-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 32px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}
.footer-trust-group { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer-trust-label {
  font-family: var(--sans);
  font-size: 13px !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .62;
}
.footer-certs, .footer-payments {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}
.footer-certs li { display: inline-flex; align-items: center; gap: 8px; font-size: 13px !important; }
.footer-certs svg { width: 20px; height: 20px; opacity: .8; }
.footer-certs strong { font-weight: 500; }
.footer-payments { gap: 8px; }
.footer-payments li { display: inline-flex; }
.footer-payments .payment-icon,
.footer-payments svg {
  height: 24px;
  width: auto;
  border-radius: 3px;
  background: #fff;
  padding: 2px 4px;
}
@media (max-width: 700px) {
  .footer-trust { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* Process steps with imagery */
.pdp-process-steps li { padding-top: 0; border-top: 0; }
.pdp-process-steps .step-media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin-bottom: 16px;
  background: var(--ivory, #f6f4f0);
}
.pdp-process-steps .step-media img { width: 100%; height: 100%; object-fit: cover; }

/* The two-track grid sized itself to its content and centred, leaving the utility items
   floating mid-bar. Flex with space-between across the full width pins them to the edges. */
.announcement > .topbar-inner,
.topbar-inner {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: none;
  padding: 0 clamp(16px, 2.2vw, 34px);
}

/* The benefits grid was fixed at six tracks from the original six-point set. With four points
   the last two tracks sat empty, pushing everything left and reading as misalignment. Auto-fit
   makes it follow however many blocks the client configures. */
.benefits-grid {
  /* Pinned to four: auto-fit produced a fifth empty track at desktop width. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1180px;
  gap: 34px 30px;
  align-items: start;
}
.benefits-grid .benefit { text-align: left; }
.benefits-grid .benefit svg { width: 26px; height: 26px; margin-bottom: 14px; opacity: .8; }
.benefits-grid .benefit h3 { margin: 0 0 8px; }
@media (max-width: 989px) {
  .benefits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   Credentials — certification / partner logo rows + trust badges
   ============================================================ */
.credentials { text-align: center; background: var(--ivory, #f6f4f0); }
.credentials-group { max-width: 1180px; margin: 0 auto clamp(26px, 3.4vw, 46px); }
.credentials-label {
  margin: 0 0 18px;
  font-family: var(--sans);
  font-size: 13px !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft, #6b6b6b);
}
.credentials-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 26px 44px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.credentials-row li { display: flex; }
.credentials-row a, .credentials-row li > img {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.credentials-row img {
  height: auto;
  max-height: 96px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
}
.credentials-row--partners img { max-height: 74px; max-width: 180px; }
.credentials-row span {
  font-family: var(--sans);
  font-size: 13px !important;
  letter-spacing: .04em;
  color: var(--ink-soft, #5f5f5f);
}

.credentials-badges { max-width: 980px; margin: clamp(10px, 2vw, 24px) auto 0; }
.credentials-badges img { width: 100%; height: auto; }

@media (max-width: 700px) {
  .credentials-row { gap: 22px 26px; }
  .credentials-row img { max-height: 70px; max-width: 150px; }
}

/* Credential logos in the footer sit on a light chip so dark-ink marks stay legible on navy. */
.footer-certs--logos { gap: 14px; }
.footer-certs--logos li {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  background: #fff;
  border-radius: 4px;
}
.footer-certs--logos img {
  height: 30px;
  width: auto;
  display: block;
}
@media (max-width: 700px) {
  .footer-certs--logos img { height: 26px; }
}

/* About: the long-copy block now opens the page, so it gets the lead treatment — centred,
   a little more air, and its h1 at page-title scale rather than section scale. */
.about-longform--lead { text-align: center; padding-top: clamp(96px, 9vw, 150px); }
.about-longform--lead h1 { margin-bottom: 20px; }
.about-longform--lead .about-longform-copy { text-align: left; }
.about-hero { padding-top: clamp(18px, 2.4vw, 34px); }

/* Page header for legacy-content pages — gives them the revamp's type and rhythm. */
.page-title-band {
  padding: clamp(104px, 10vw, 168px) 6vw clamp(22px, 3vw, 40px);
  max-width: 1240px;
  margin-inline: auto;
}
.page-title-band .eyebrow { margin: 0 0 10px; }
.page-title-band h1 { margin: 0; }
.page-title-intro {
  max-width: 660px;
  margin-top: 14px;
  font-size: 15px !important;
  line-height: 1.65;
}