@font-face { font-family: 'Domaine Display'; src: url('fonts/domaine-display-regular.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Public Sans'; src: url('fonts/public-sans-300.woff2') format('woff2'); font-style: normal; font-weight: 300; font-display: swap; }
@font-face { font-family: 'Public Sans'; src: url('fonts/public-sans-400.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'Public Sans'; src: url('fonts/public-sans-500.woff2') format('woff2'); font-style: normal; font-weight: 500; font-display: swap; }
@font-face { font-family: 'Public Sans'; src: url('fonts/public-sans-600.woff2') format('woff2'); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: 'Public Sans'; src: url('fonts/public-sans-700.woff2') format('woff2'); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/poppins-500.woff2') format('woff2'); font-style: normal; font-weight: 500; font-display: swap; }
:root {
  --paper: #fff;
  --ink: #111;
  --body: #525252;
  --display-ink: #555;
  --muted: #767676;
  --announcement: #fff1da;
  --cream: #fdfbef;
  --soft: #f6f6f6;
  --footer: #efefed;
  --editorial-action: #2c2c2c;
  --commerce-action: #1f1f1f;
  /* Source accent #ff6f61 reads 2.7:1 on white. The active-navigation colour
     carries text, so it is darkened along the same hue to 4.6:1 and stays legible. */
  --nav-active: #bf5349;
  --stars: #f7b600;
  --line: #e5e5e5;
  --line-strong: #ababab;
  --error: #943c31;
  --success: #374d3c;
  --sans: 'Public Sans', Arial, sans-serif;
  --serif: 'Domaine Display', Georgia, serif;
  --container: 1170px;
  --merch-container: 1280px;
  --drawer-duration: 500ms;
  --image-duration: 400ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { margin: 0; color: var(--body); background: var(--paper); font-family: var(--sans); font-size: 16px; line-height: 1.5; }
.overlay-open { overflow: hidden; }
[hidden] { display: none !important; }
::selection { background: var(--announcement); color: var(--ink); }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
button { border: 0; padding: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: not-allowed; opacity: .45; }
button, a, input, textarea { touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
h1:focus { outline: none; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { font-weight: 400; line-height: 1.33; color: var(--ink); }
img { display: block; max-width: 100%; height: auto; }
svg.icon { display: inline-block; flex: 0 0 auto; vertical-align: middle; }
ul, ol { margin: 0; }
input, textarea { width: 100%; border: 1px solid var(--line-strong); background: var(--paper); border-radius: 0; padding: 13px 16px; line-height: 1.5; min-width: 0; }
input::placeholder, textarea::placeholder { color: #767676; opacity: 1; }
input[type='search'] { appearance: none; }
input[type='search']::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  cursor: pointer;
  background-color: #767676;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat;
}
textarea { resize: vertical; min-height: 94px; }
input[aria-invalid='true'], textarea[aria-invalid='true'], button[aria-invalid='true'] { border-color: var(--error); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 100; padding: 12px 18px; background: var(--ink); color: white; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.container { width: min(var(--container), calc(100% - 80px)); margin-inline: auto; }
.merch-container, .wide-container { width: min(var(--merch-container), calc(100% - 80px)); margin-inline: auto; }
.eyebrow { font-size: 12px; font-weight: 400; text-transform: uppercase; line-height: 1.6; }
.serif { font-family: var(--serif); }
.fine-print { font-size: 12px; line-height: 1.65; color: var(--muted); }
.text-center { text-align: center; }
.full-width { width: 100%; }
.text-link { font-size: inherit; line-height: inherit; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.inline-link { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); font-weight: 400; font-size: 14px; padding-bottom: 4px; border-bottom: 1px solid currentColor; line-height: 1.6; width: fit-content; }
.inline-link:hover, .text-link:hover { color: var(--muted); }
.inline-link:active, .text-link:active { opacity: 0.65; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 56px; padding: 16px 28px; border: 1px solid var(--commerce-action); border-radius: 0; font-size: 16px; font-weight: 500; line-height: 22px; text-align: center; transition: color 350ms ease, background-color 350ms ease, transform 180ms ease-out; }
/* Press feedback answers on pointer-down: the control compresses under the finger, the colour lands instantly, and both settle on release. */
.button:active:not(:disabled) { transform: scale(0.98); transition: transform 90ms ease-out, color 0ms, background-color 0ms; }
.button-dark { color: var(--paper); background: var(--commerce-action); }
.button-dark:hover:not(:disabled) { background: #000; border-color: #000; }
.button-outline { background: transparent; color: var(--ink); }
.button-outline:hover:not(:disabled) { background: var(--commerce-action); color: var(--paper); }
.editorial-cta { background: var(--editorial-action); color: #fff; border: 0; border-radius: 100px; min-height: 58px; padding: 17px 40px; font-size: 19.2px; line-height: 24px; font-weight: 400; }
.small-pill { border: 0; border-radius: 100px; min-height: 56px; padding: 16px 32px; font-size: 14px; font-weight: 400; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 auto; color: var(--ink); transition: transform 120ms ease-out, background-color 180ms ease; }
.icon-button:active { transform: scale(0.92); transition: transform 90ms ease-out; }
.header-actions .icon-button:hover, .footer-icon-links .icon-button:hover { border-radius: 50%; background: #f4f4f4; }
.section-heading { display: flex; align-items: center; justify-content: center; text-align: center; gap: 24px; }
.section-heading h2 { font-size: 30px; line-height: 48px; font-weight: 500; }
.section-footer { display: flex; justify-content: center; margin-top: 40px; }
.empty-state { grid-column: 1 / -1; text-align: center; padding: 70px 20px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.empty-state h2, .empty-state h3 { font-size: 28px; line-height: 1.33; font-weight: 500; }
.empty-state > p { color: var(--muted); max-width: 380px; }
.empty-state .button { margin-top: 10px; }
.empty-state.compact { padding: 35px 12px; gap: 12px; }
.empty-state.compact h3 { font-size: 24px; }
.noscript-message { padding: 40px 0; }
.image-fallback { display: flex; align-items: center; justify-content: center; padding: 25px; text-align: center; font-size: 14px; color: var(--muted); }
.field { margin-bottom: 22px; min-width: 0; }
.field > label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 8px; color: var(--ink); }
.field-error { color: var(--error); font-size: 12px; margin-top: 7px; line-height: 1.6; }
.field-error:empty { display: none; }
@media (max-width: 1024px) { .container { width: calc(100% - 80px); } .merch-container, .wide-container { width: 100%; } }
@media (max-width: 767px) { .container, .merch-container, .wide-container { width: calc(100% - 32px); } .section-heading h2 { font-size: 24px; line-height: 40px; } .editorial-cta { font-size: 19.2px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Header geometry is static. The reference changes navigation at 992px. */
.announcement { min-height: 39.6px; padding: 10px 16px; background: var(--announcement); color: #000; text-align: center; font-size: 14px; line-height: 19.6px; font-weight: 500; }
.announcement > button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; line-height: inherit; }
.site-header { height: 91px; border-bottom: 1px solid #efefef; background: #fff; }
.header-inner { display: flex; align-items: center; height: 100%; gap: 64px; }
.wordmark { width: 186px; height: 50px; display: block; flex: 0 0 auto; }
.wordmark img { width: 100%; height: 100%; }
.primary-nav { display: flex; align-items: center; justify-content: space-between; flex: 1; min-width: 0; gap: 24px; }
.primary-nav a { font-size: 16px; font-weight: 500; line-height: 24px; white-space: nowrap; color: var(--ink); transition: color 350ms ease; }
.primary-nav a:hover, .primary-nav a[aria-current] { color: var(--nav-active); }
.header-actions { display: flex; align-items: center; width: 152px; flex: 0 0 auto; }
.bag-button { position: relative; }
.bag-count { position: absolute; top: -1px; right: -3px; min-width: 17px; height: 17px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--ink); color: #fff; font-size: 10px; line-height: 17px; padding-inline: 3px; }
.menu-toggle { display: none; }

/* Each band deliberately has its own reference width, rather than one global gutter. */
.hero { position: relative; height: 750px; background: #f8f7f3; overflow: hidden; }
.hero-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-inner { position: relative; height: 100%; display: flex; align-items: center; }
.hero-copy { width: 517px; max-width: 100%; }
.hero h1 { font-family: var(--serif); font-size: 50px; line-height: 58px; font-weight: 400; color: var(--display-ink); }
.hero-copy > p { margin-top: 16px; width: 460px; max-width: 100%; font-size: 18px; line-height: 30.6px; font-weight: 300; }
.hero-copy .editorial-cta { margin-top: 24px; width: 283.19px; max-width: 100%; padding-inline: 20px; }
.hero .editorial-cta { transition: transform 300ms ease-out, color 350ms ease, background-color 350ms ease; }
.hero .editorial-cta:hover { transform: translateY(-8px); }
.hero .editorial-cta:active { transform: translateY(-8px) scale(0.98); }
.category-section { width: calc(100% - 80px); margin: 24px auto 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.category-tile { position: relative; height: 222px; display: block; background: #f4f4f4; }
.category-art { position: absolute; top: 8px; right: 12px; width: calc(100% - 188px); height: calc(100% - 16px); object-fit: contain; object-position: right center; }
/* The accessories artwork carries three items, so it fills its corner the way the single-object tiles do. */
.category-accessories .category-art { top: 0; right: 0; height: 100%; width: calc(100% - 150px); }
.category-tile:active .category-art { opacity: 0.82; }
.category-copy { padding: 54px 24px 0; }
.category-copy h2 { width: 150px; font-size: 24px; line-height: 30px; font-weight: 500; }
.category-link { display: inline-flex; align-items: center; gap: 18px; margin-top: 24px; font-size: 16px; line-height: 24px; color: var(--display-ink); }
.category-link .icon { transition: transform 350ms ease; }
.category-tile:hover .category-link .icon { transform: translateX(4px); }
.campaign { margin: 64px 40px 0; height: 400px; display: flex; background-color: var(--cream); background-image: url('images/editorial/campaign-rebuild.jpg'); background-position: center; background-size: cover; background-repeat: no-repeat; }
.campaign-copy { margin-left: 50%; width: calc(50% - 40px); align-self: center; }
.campaign-copy > p { font-size: 16px; line-height: 22.4px; font-weight: 300; }
.campaign h2 { font-family: var(--serif); font-size: 64px; line-height: 72px; color: var(--display-ink); }
.campaign .button { margin-top: 32px; width: 266.19px; max-width: 100%; padding-inline: 20px; }
.featured-section { padding-top: 64px; padding-bottom: 90px; }
.featured-section .product-grid, .bundles-section .product-grid { margin-top: 64px; }
.product-grid { padding-bottom: 25px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 30px; row-gap: 25px; align-items: stretch; }
.bundles-section { padding-top: 168px; padding-bottom: 90px; }
.editorial-section { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 168px; text-align: center; }
.editorial { min-width: 0; }
.editorial-image { display: block; width: 82.77%; margin-inline: auto; }
.editorial-image img { width: 100%; height: 675px; object-fit: cover; }
.editorial-copy { padding: 24px 16px 0; }
.editorial-copy h2 { font-size: 24px; line-height: 30px; font-weight: 500; }
.editorial-copy > p { font-size: 18px; line-height: 28px; font-weight: 300; margin-top: 12px; }
.editorial-copy .button { margin-top: 16px; }
.reviews-section { margin-top: 152px; padding: 0; }
.reviews-heading-block { width: min(1170px, 100%); margin-inline: auto; }
.reviews-disclosure { text-align: center; font-size: 12px; line-height: 18px; color: var(--muted); margin-bottom: 10px; }
.reviews-section .section-heading { margin: 0; }
.reviews-section .section-heading h2 { width: 100%; font-size: 30px; line-height: 30px; }
.reviews-carousel { width: min(1170px, calc(100% - 80px)); position: relative; padding: 15px 35px; margin-top: 64px; margin-bottom: 30px; }
.reviews-window { overflow: hidden; touch-action: pan-y; }
.reviews-track { display: flex; gap: 20px; transition: transform 500ms ease; will-change: transform; }
/* Card height follows the guide text; the track stretches every card to the tallest one and the product strip stays pinned to the bottom. */
.review-card { flex: 0 0 calc((100% - 40px) / 3); min-width: 0; border: 1px solid #efefef; padding: 24px 20px 10px; display: flex; flex-direction: column; }
.review-person { display: flex; gap: 16px; align-items: center; padding-bottom: 18px; border-bottom: 1px solid #a5a5a5; }
.review-avatar { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #d0d5d7; font-size: 20px; font-weight: 300; }
.review-person > div { flex: 1; min-width: 0; }
.review-person strong { display: block; font-size: 16px; line-height: 22px; color: #2f3f47; font-weight: 600; }
.review-person p { font-size: 14px; line-height: 24px; color: var(--muted); }
.review-rating { display: flex; gap: 10px; align-items: center; margin-top: 16px; }
.review-rating .rating-stars .icon { width: 24px; height: 24px; }
.review-rating .sample-rating { margin: 0; height: 24px; gap: 10px; justify-content: flex-start; }
.review-rating .sample-rating-label { position: static; font-size: 14px; line-height: 24px; color: var(--muted); }
.review-content { font-size: 14px; line-height: 20px; color: #525252; margin-top: 28px; }
.review-meta { margin-top: 12px; font-size: 12px; line-height: 20px; color: var(--muted); }
.review-product { display: flex; gap: 12px; align-items: center; min-height: 72px; background: #f5f5f5; padding: 8px 10px; margin-top: auto; font-size: 14px; font-weight: 500; line-height: 19px; color: var(--ink); }
.review-product img { width: 48px; height: 56px; object-fit: contain; mix-blend-mode: multiply; }
.review-arrow { position: absolute; top: 45%; width: 28px; height: 38px; color: #777; }
.review-prev { left: 0; }
.review-next { right: 0; }
.review-dots { position: absolute; left: 0; right: 0; bottom: -30px; height: 24px; display: flex; justify-content: center; gap: 4px; }
.review-dots button { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.review-dots button::after { content: ''; display: block; width: 5px; height: 5px; border-radius: 50%; background: #c2c2c2; }
.review-dots button[aria-pressed='true']::after { background: #333; }
.corporate-section { position: relative; min-height: 630px; margin-top: 152px; background: #555 url('images/editorial/business-rebuild.jpg') center / cover no-repeat; display: flex; align-items: center; justify-content: center; text-align: center; }
.corporate-section::before { position: absolute; inset: 0; content: ''; background: rgb(0 0 0 / .6); }
.corporate-copy { position: relative; width: min(1170px, 100%); padding-block: 24px; color: #fff; }
.corporate-copy h2 { color: #fff; font-family: var(--serif); font-size: 85px; line-height: 96px; font-weight: 400; }
.corporate-copy > p { width: 460px; max-width: 100%; margin: 24px auto 0; font-size: 18px; line-height: 30px; font-weight: 300; }
.corporate-copy .button { margin-top: 48px; min-height: 58px; background: #fff; color: #2c2c2c; padding-inline: 32px; font-size: 16px; line-height: 24px; }
.corporate-copy .button:hover { background: #efefed; }
.corporate-copy .button:focus-visible { outline-color: #fff; }

/* Newsletter: the reference's reserved verification space remains, but no fake CAPTCHA. */
.newsletter-section { padding-top: 124px; text-align: center; }
.newsletter-inner { width: 650px; max-width: calc(100% - 32px); margin-inline: auto; }
.newsletter-inner h2 { color: var(--commerce-action); font-size: 45px; line-height: 55px; font-weight: 600; }
.newsletter-subcopy { width: 470px; max-width: 100%; font-size: 16px; line-height: 26px; font-weight: 300; color: #6e6e6e; margin: 24px auto 0; }
.newsletter-form { position: relative; margin-top: 13px; }
.newsletter-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.newsletter-fields input { height: 66px; border-radius: 999px; border: 1px solid var(--line-strong); padding: 20px 30px; font-family: Poppins, var(--sans); font-size: 15.49px; font-weight: 500; line-height: 24px; }
.newsletter-fields input::placeholder { color: #bfbfbf; }
.newsletter-reserved { height: 132px; display: flex; align-items: center; justify-content: center; }
.newsletter-reserved p { max-width: 350px; padding-inline: 12px; font-size: 12px; line-height: 18px; color: var(--muted); }
.newsletter-submit { height: 66px; min-height: 66px; width: 100%; border-radius: 999px; font-size: 15px; }
.newsletter-feedback { position: absolute; top: 100%; margin-top: 12px; width: 100%; text-align: center; font-size: 13px; line-height: 20px; color: var(--body); }
.newsletter-feedback.is-error { color: var(--error); }
.faq-section { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 115px; padding: 0 20px; }
.faq-list { min-width: 0; }
.faq-list details { border: 0; }
.faq-list summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 12.5px; font-weight: 700; color: var(--muted); line-height: 20px; min-height: 28px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary .icon { transition: transform 200ms ease; }
.faq-list details[open] summary .icon { transform: rotate(180deg); }
.faq-list details > p { font-size: 12.5px; line-height: 20px; color: var(--muted); font-weight: 400; margin: 0 0 10px; }
.site-footer { background: var(--footer); margin-top: 40px; }
.footer-main { display: grid; grid-template-columns: 30% 15% 16.5% 16.5% 22%; gap: 0; padding-top: 64px; padding-bottom: 70px; }
.footer-brand img { width: 100px; height: 100px; }
.footer-icon-links { display: flex; gap: 8px; margin-top: 26px; }
.footer-icon-links .icon-button { width: 24px; height: 24px; color: #525252; }
.footer-column h2 { font-size: 15.5px; line-height: 20px; font-weight: 400; }
.footer-links { display: flex; flex-direction: column; gap: 13px; font-size: 12.5px; line-height: 20px; margin-top: 16px; padding-right: 16px; }
.footer-links a, .footer-links button { text-align: left; line-height: inherit; font-weight: 400; width: fit-content; }
.footer-links a:hover, .footer-links button:hover { color: #111; text-decoration: underline; text-underline-offset: 3px; }
.footer-links p { font-size: inherit; line-height: inherit; }
.footer-bottom { min-height: 84.75px; padding: 14px max(40px, calc((100% - 1170px) / 2)); border-top: 1px solid #e3e3e3; display: flex; align-items: center; justify-content: space-between; gap: 24px; font-size: 11px; line-height: 20px; }
.footer-legal { display: flex; justify-content: center; gap: 9px; }
.payment-note { width: 312px; height: 56.75px; flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 12px; color: #525252; text-align: left; font-size: 12px; line-height: 20px; }
.payment-note strong { font-weight: 500; }
.help-launcher { position: fixed; z-index: 8; right: 21px; bottom: 21px; height: 56px; width: 56px; border-radius: 50%; display: flex; justify-content: center; align-items: center; background: #25d366; color: #fff; border: 2px solid #fff; }
.back-to-top { position: fixed; z-index: 7; right: 21px; bottom: 88px; width: 34px; height: 34px; color: #fff; background: #111; border-radius: 50%; }

@media (max-width: 1279px) and (min-width: 992px) {
  .header-inner { width: calc(100% - 64px); gap: 30px; }
  .primary-nav { gap: 14px; }
  .primary-nav a { font-size: 14px; }
  .wordmark { width: 160px; height: 43px; }
  .header-actions { width: 136px; }
  .header-actions .icon-button { width: 34px; }
}
@media (max-width: 1024px) {
  .hero { height: 500px; }
  .hero-background { object-position: left center; }
  .category-section { width: 100%; }
  .campaign { background-position: -476px 0; }
  .campaign-copy { margin-left: 36.7285%; width: calc(63.2715% - 40px); align-self: flex-end; margin-bottom: 40px; }
  .campaign h2 { font-size: clamp(44px, 6vw, 56px); line-height: 1; }
  .editorial-image { width: 100%; }
  .editorial-work .editorial-image { padding-top: 10px; }
  .editorial-work .editorial-image img { height: 400px; }
  .editorial-audio .editorial-image img { height: 420px; }
  .reviews-heading-block { padding: 65px 0 50px; }
  .reviews-carousel { width: 100%; }
  .corporate-copy { width: 100%; }
  .newsletter-reserved { height: 124px; }
  .footer-main { width: 600px; max-width: calc(100% - 32px); grid-template-columns: 1fr 1fr; column-gap: 60px; row-gap: 29px; padding-bottom: 72px; }
  .footer-brand { grid-column: 1 / -1; height: 150px; }
  .footer-bottom { padding-inline: 32px; }
}
@media (max-width: 991px) {
  .site-header { height: 97px; }
  .header-inner { width: 100%; display: grid; grid-template-columns: 1fr 186px 1fr; gap: 0; padding-inline: 12px; }
  .menu-toggle { display: inline-flex; width: 32px; justify-self: start; }
  .primary-nav { display: none; }
  .wordmark { width: 186px; height: 50px; }
  .header-actions { width: auto; justify-self: end; }
  .header-actions .icon-button { width: 38px; }
  .desktop-action { display: none; }
}
@media (max-width: 990px) { .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; } }
@media (min-width: 1025px) {
  .review-content { margin-top: 20px; }

}
@media (max-width: 767px) {
  .announcement { min-height: 34.2px; padding: 7px 12px; font-size: 12px; line-height: 20.2px; }
  .announcement > button { gap: 6px; }
  .announcement .icon { width: 13px; height: 13px; }
  .hero::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(246,245,241,0) 0%, rgba(246,245,241,0) 34%, #f6f5f1 60%); }
  .hero-inner { z-index: 2; }
  .hero h1 { font-size: 30px; line-height: 34px; }
  .hero-copy { width: 100%; }
  .hero-inner { width: calc(100% - 40px); align-items: flex-end; padding-bottom: 32px; }
  .hero-copy > p { width: 350px; font-size: 16px; line-height: 27.2px; }
  .hero-background { object-position: 75% center; }

  .category-section { width: calc(100% - 32px); margin-top: 54px; grid-template-columns: 1fr; gap: 8px; }
  .category-copy { padding-top: 54px; }
  .campaign { height: 540px; margin: 32px 20px 0; background-size: auto 300px; background-position: -300px 0; }
  .campaign-copy { margin-left: 16px; width: calc(100% - 32px); margin-bottom: 40px; text-align: center; }
  .campaign h2 { font-size: 36px; line-height: 36px; }
  .campaign-copy .editorial-cta { padding-inline: 32px; }
  .featured-section { padding-top: 32px; padding-bottom: 0; }
  .featured-section .product-grid, .bundles-section .product-grid { margin-top: 32px; }
  .product-grid { gap: 25px 15px; }
  .bundles-section { padding-top: 64px; padding-bottom: 0; }
  .editorial-section { margin-top: 64px; grid-template-columns: 1fr; gap: 40px; width: calc(100% - 32px); margin-inline: auto; }
  .editorial-work .editorial-image { padding-top: 0; }
  .editorial-work .editorial-image img { height: 320px; }
  .editorial-audio .editorial-image img { height: 400px; }
  .editorial-copy { padding: 24px 0 0; }
  .editorial-copy h2 { font-size: 24px; line-height: 30px; }
  .editorial-copy > p { font-size: 16px; line-height: 28px; }
  .reviews-section { margin-top: 0; }
  .reviews-heading-block { width: calc(100% - 32px); padding: 48px 0 8px; }
  .reviews-disclosure { font-size: 10px; }
  .reviews-section .section-heading { padding: 0; }
  .reviews-section .section-heading h2 { font-size: 28px; line-height: 28px; }
  .reviews-carousel { width: calc(100% - 32px); margin-top: 64px; padding-inline: 30px; }
  .review-person strong { font-size: 15px; }
  .corporate-section { margin-top: 0; min-height: 445px; }
  .corporate-copy { width: calc(100% - 32px); }
  .corporate-copy h2 { font-size: 32px; line-height: 42px; }
  .corporate-copy > p { width: 320px; margin-top: 20px; font-size: 16px; line-height: 26px; }
  .corporate-copy .button { margin-top: 28px; font-size: 14px; padding-inline: 26px; }
  .newsletter-section { padding-top: 44px; }
  .newsletter-inner h2 { font-size: 30px; line-height: 45px; }
  .newsletter-subcopy { width: 302px; font-size: 16px; line-height: 26px; }
  .newsletter-form { margin-top: 9px; }
  .newsletter-fields { grid-template-columns: 1fr; gap: 18px; }
  .faq-section { grid-template-columns: 1fr; gap: 0; padding: 0; margin-top: 120px; }
  .faq-list summary { min-height: 33px; }
  .site-footer { margin-top: 40px; }
  .footer-main { width: calc(100% - 32px); max-width: none; grid-template-columns: 1fr; column-gap: 0; row-gap: 29px; padding-bottom: 64px; }
  .footer-brand { grid-column: auto; height: 140px; }
  .footer-brand .footer-icon-links { margin-top: 20px; }
  .footer-links { padding-right: 0; }
  .footer-bottom { flex-direction: column; align-items: stretch; text-align: center; gap: 12px; padding: 24px 16px 0; }
  .payment-note { max-width: 100%; justify-content: center; margin: 11px auto 0; }
  .help-launcher { width: 50px; height: 50px; right: 16px; bottom: 16px; }
  .back-to-top { right: 16px; bottom: 76px; }
}
@media (max-width: 800px) { .review-card { flex-basis: calc((100% - 20px) / 2); } }
@media (max-width: 650px) { .review-card { flex-basis: 100%; } }
/* Narrow phones keep the two-line heading so the copy still sits below the photographed subject. */
@media (max-width: 360px) {
  .hero h1 { font-size: 26px; line-height: 30px; }
  .hero-inner { padding-bottom: 24px; }
}
@media (max-width: 480px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 450px) { .review-arrow { display: none; } .reviews-carousel { padding-inline: 12px; } }

/* Keep the three-tile source composition while leaving room for longer gadget labels. */
@media (min-width: 768px) and (max-width: 900px) {
  .category-copy h2 { width: 125px; font-size: 20px; line-height: 26px; }
  .category-art { width: calc(100% - 164px); }
  .campaign { background-position: -540px 0; }
}

/* Merchandise: 5:6 canvases, centered text and a single responsive commerce control. */
.product-card { display: grid; grid-template-areas: 'media' 'info'; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; align-content: start; position: relative; min-width: 0; padding-bottom: 20px; }
.product-media { grid-area: media; position: relative; aspect-ratio: 5 / 6; background: var(--soft); }
.product-photo { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; }
.product-photo img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 24px; object-fit: contain; mix-blend-mode: multiply; transition: opacity var(--image-duration) ease; }
.product-alternate { opacity: 0; }
.product-card:hover .has-alternate .product-alternate, .product-card:focus-within .has-alternate .product-alternate { opacity: 1; }
.product-card:hover .has-alternate .product-primary, .product-card:focus-within .has-alternate .product-primary { opacity: 0; }
.product-badge { position: absolute; left: 0; top: 15px; max-width: calc(100% - 48px); background: #fff; color: #111; font-size: 9px; line-height: 14px; padding: 3px 10px; pointer-events: none; }
.quick-view { position: absolute; right: 14px; top: 15px; width: 38px; height: 38px; border-radius: 50%; background: #fff; color: #111; opacity: 0; transform: translateY(10px); transition: opacity 100ms ease, transform 100ms ease; }
.product-info { display: flex; flex-direction: column; align-items: stretch; grid-area: info; padding-top: 20px; min-width: 0; text-align: center; }
/* Every card keeps the same title slot, so names, stars and prices line up across a row. */
.product-info h3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 42.56px; font-family: var(--sans); font-size: 16px; line-height: 21.28px; font-weight: 500; margin-bottom: 3px; color: var(--ink); }
.product-info h3 a { transition: color 350ms ease; }
.product-info h3 a:hover { color: #767676; }
.product-price { font-size: 16px; line-height: 24px; font-weight: 500; color: var(--muted); margin-top: 7px; }
.product-info > h3 + .product-price { margin-top: 0; }
.product-brand { color: var(--muted); font-size: 11px; text-transform: uppercase; line-height: 18px; }
.sample-rating { position: relative; display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 5px; height: 16px; }
.rating-stars { display: inline-flex; align-items: center; color: var(--stars); flex: 0 0 auto; }
.rating-stars .icon { width: 15px; height: 16px; fill: var(--stars); stroke: var(--stars); stroke-width: 1px; }
.sample-rating-label { position: absolute; left: calc(50% + 42.5px); top: 0; font-size: 9px; font-weight: 400; line-height: 16px; color: #767676; }
.card-add { grid-area: media; z-index: 2; align-self: end; margin: 0 15px 15px; width: calc(100% - 30px); height: 42px; min-height: 42px; display: flex; align-items: center; justify-content: center; background: #fff; color: #111; padding: 1px 8px; font-size: 16px; line-height: 20px; font-weight: 500; border-radius: 0; opacity: 0; transform: translateY(10px); transition: opacity 100ms ease, transform 100ms ease, color 350ms ease, background-color 350ms ease; }
.product-card:hover .quick-view, .product-card:focus-within .quick-view, .product-card:hover .card-add, .product-card:focus-within .card-add { opacity: 1; transform: translateY(0); }
.card-add:hover:not(:disabled), .card-add:active:not(:disabled) { background: #111; color: #fff; }
.bundle-card .product-photo img { padding: 0; mix-blend-mode: normal; }

/* One native dialog owns scrims, focus, Escape and actual 500ms panel motion. */
.overlay { position: fixed; inset: 0; margin: 0; padding: 0; width: 100%; height: 100%; height: 100dvh; max-width: none; max-height: none; border: 0; background: transparent; color: var(--ink); overflow: hidden; }
.overlay::backdrop { background: rgb(31 31 31 / .5); }
.overlay-surface { position: absolute; top: 0; right: 0; width: 470px; max-width: 100vw; height: 100%; background: #fff; display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--drawer-duration) ease; }
.overlay.is-open .overlay-surface { transform: translateX(0); }
.overlay-header { display: flex; align-items: center; justify-content: space-between; min-height: 90px; flex: 0 0 auto; padding: 24px 24px 20px 30px; gap: 16px; }
.overlay-header h2 { min-width: 0; flex: 1; font-size: 20px; line-height: 30px; font-weight: 500; }
.overlay-content { flex: 1; overflow: auto; overscroll-behavior: contain; padding: 18px 30px 32px; }
.overlay[data-kind='menu'] .overlay-surface { right: auto; left: 0; transform: translateX(-100%); }
.overlay[data-kind='menu'].is-open .overlay-surface { transform: translateX(0); }
.overlay[data-kind='menu'] .overlay-header { position: relative; padding: 25px 20px 20px; min-height: 153.84px; height: 153.84px; }
.overlay[data-kind='menu'] .overlay-header h2 img { width: 405px; height: 108.84px; max-width: 100%; object-fit: fill; }
.overlay[data-kind='menu'] .overlay-header > .icon-button { position: absolute; right: 0; top: 48px; width: 44px; height: 44px; color: #767676; }
.overlay[data-kind='menu'] .overlay-header > .icon-button .icon { width: 16px; height: 16px; }
.overlay[data-kind='menu'] .overlay-content { padding: 60px 30px 30px; }
.menu-links, .menu-sublist { list-style: none; margin: 0; padding: 0; }
.menu-links > li { margin-bottom: 10px; }
.menu-row { display: flex; align-items: center; width: 100%; min-height: 36px; font-size: 24px; line-height: 36px; font-weight: 400; text-align: left; }
.menu-toggle-row { justify-content: space-between; gap: 20px; }
.menu-toggle-row[aria-expanded='true'] { color: var(--nav-active); }
.menu-toggle-row .icon { width: 17px; height: 17px; transition: transform 400ms ease; }
.menu-toggle-row[aria-expanded='true'] > .icon { transform: rotate(180deg); }
.menu-sublist { padding-left: 5px; padding-top: 4px; padding-bottom: 6px; }
.menu-sublist > li { margin-bottom: 12px; }
.menu-sublist .menu-row { min-height: 30px; font-size: 20px; line-height: 30px; }
.menu-sublist .menu-sublist { padding-left: 20px; }
.menu-row:hover { color: var(--nav-active); }

/* Quick view and the timed, openly local signup preview use centered surfaces. */
.overlay[data-kind='quickview'] .overlay-surface, .overlay[data-kind='bundle'] .overlay-surface, .overlay[data-kind='newsletter'] .overlay-surface {
  top: 50%; left: 50%; right: auto; width: 990px; height: auto; max-width: calc(100vw - 64px); max-height: calc(100dvh - 48px); transform: translate(-50%, -50%) scale(.8); opacity: 0; transition: transform 500ms ease, opacity 500ms ease;
}
.overlay[data-kind='quickview'].is-open .overlay-surface, .overlay[data-kind='bundle'].is-open .overlay-surface, .overlay[data-kind='newsletter'].is-open .overlay-surface { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.overlay[data-kind='quickview'] .overlay-header, .overlay[data-kind='bundle'] .overlay-header { min-height: 68px; padding: 14px 20px 14px 28px; }
.overlay[data-kind='quickview'] .overlay-header h2, .overlay[data-kind='bundle'] .overlay-header h2 { font-size: 16px; line-height: 24px; }
.overlay[data-kind='quickview'] .overlay-content, .overlay[data-kind='bundle'] .overlay-content { padding: 0; }
.quickview-layout { display: grid; grid-template-columns: 1fr 1fr; }
.quickview-image { background: var(--soft); display: flex; align-items: center; justify-content: center; min-height: 530px; }
.quickview-image img { width: 100%; height: 100%; max-height: 650px; padding: 45px; object-fit: contain; mix-blend-mode: multiply; }
.quickview-details { padding: 30px; }
.quickview-details .product-config h2 { font-size: 28px; line-height: 37.24px; font-weight: 500; }
.quickview-details .product-description { margin-top: 20px; font-size: 14px; }
.full-details-link { margin-top: 22px; }
.bundle-preview-image { padding: 0 !important; mix-blend-mode: normal !important; }
.bundle-description { font-size: 14px; line-height: 24px; color: var(--body); margin-top: 16px; }
.bundle-components { list-style: none; padding: 0; margin-top: 24px; }
.bundle-components li { border-top: 1px solid var(--line); padding: 16px 0; }
.bundle-components a { font-size: 16px; font-weight: 500; }
.bundle-components span { display: block; font-size: 13px; line-height: 22px; color: var(--muted); margin-top: 4px; }
.bundle-total { margin-block: 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 18px; line-height: 28px; }
.bundle-details-note { margin-top: 14px; }
.overlay[data-kind='newsletter'] .overlay-surface { width: 650px; border-radius: 10px; overflow: hidden; }
.overlay[data-kind='newsletter'] .overlay-header { position: absolute; right: 20px; top: 20px; z-index: 2; min-height: 0; padding: 0; }
.overlay[data-kind='newsletter'] .overlay-header h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.overlay[data-kind='newsletter'] .overlay-header .icon-button { width: 52px; height: 52px; border-radius: 50%; background: #e4e4e4; color: #767676; }
.overlay[data-kind='newsletter'] .overlay-content { padding: 0; }
.signup-card { display: grid; grid-template-columns: 342px 308px; min-height: 600px; }
.signup-copy { padding: 76px 32px 40px; }
.signup-copy h3 { font-size: 36px; line-height: 40px; font-weight: 600; }
.signup-copy > p { font-size: 17px; line-height: 27px; color: #6e6e6e; margin-top: 10px; }
.signup-card > img { height: 100%; width: 100%; object-fit: cover; }
.signup-form { margin-top: 32px; }
.signup-form input { height: 66px; border-radius: 999px; padding: 20px 28px; font-family: Poppins, var(--sans); font-size: 15px; font-weight: 500; }
.signup-form input + label + input { margin-top: 18px; }
.signup-note { min-height: 52px; display: flex; align-items: center; font-size: 11px; line-height: 16px; color: var(--muted); }
.signup-form .button { min-height: 66px; border-radius: 999px; font-size: 15px; }
.signup-feedback { font-size: 12px; line-height: 18px; margin-top: 12px; }
.signup-feedback.is-error { color: var(--error); }

/* Full-screen black viewer; thumbnails, arrows and keyboard share one image index. */
.overlay[data-kind='gallery'] .overlay-surface { inset: 0; width: 100%; max-width: none; height: 100%; background: #111; color: #fff; transform: none; }
.overlay[data-kind='gallery'] .overlay-header { position: absolute; top: 0; left: 0; right: 0; z-index: 2; color: #fff; }
.overlay[data-kind='gallery'] .overlay-header h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; font-size: 14px; line-height: 22px; font-weight: 400; }
.overlay[data-kind='gallery'] .overlay-header .icon-button { color: #fff; }
.overlay[data-kind='gallery'] .overlay-content { padding: 0; overflow: hidden; }
.overlay[data-kind='gallery'] button:focus-visible { outline-color: #fff; }
.gallery-lightbox { position: relative; height: 100%; padding: 80px 64px; display: flex; align-items: center; justify-content: center; }
.gallery-enlarged { width: 100%; height: 100%; max-width: 100%; object-fit: contain; }
.gallery-arrow { position: absolute; top: calc(50% - 24px); color: #fff; width: 48px; height: 48px; }
.gallery-previous { left: 8px; }
.gallery-next { right: 8px; }
.gallery-counter { position: absolute; bottom: 24px; left: 0; right: 0; text-align: center; color: #fff; font-size: 14px; line-height: 24px; pointer-events: none; }

.custom-select { position: relative; font-size: 14px; min-width: 0; }
.custom-select.is-open { z-index: 8; }
.select-trigger { width: 100%; min-height: 50px; border: 1px solid var(--line-strong); padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 18px; background: #fff; text-align: left; }
.select-trigger > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-trigger.is-placeholder { color: var(--muted); }
.select-trigger > .icon { transition: transform 200ms ease; }
.select-trigger[aria-expanded='true'] > .icon { transform: rotate(180deg); }
.select-options { list-style: none; margin: 0; padding: 5px; position: fixed; inset: auto; min-width: 0; max-height: 240px; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--line-strong); background: #fff; color: var(--ink); font-family: var(--sans); font-size: 14px; z-index: 9; }
.select-options li { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 40px; padding: 9px 10px; cursor: pointer; line-height: 1.5; }
.select-options li.is-highlighted, .select-options li:hover { background: #f5f5f5; }
.select-options li[aria-selected='true'] { font-weight: 500; }
.toast { display: flex; gap: 12px; align-items: center; position: fixed; z-index: 50; left: 25px; bottom: 24px; padding: 15px 18px; background: #fff; color: var(--ink); border: 1px solid var(--ink); max-width: min(440px, calc(100vw - 40px)); font-size: 14px; line-height: 22px; }
.toast > button { width: 24px; height: 24px; display: flex; justify-content: center; align-items: center; }

@media (min-width: 991px) { .product-info { padding-inline: 15px; } }
@media (max-width: 990px) {
  .product-card { grid-template-areas: 'media' 'info' 'action'; grid-template-rows: auto 1fr auto; }
  .card-add { grid-area: action; width: 100%; margin: 15px 0 0; border-radius: 3px; background: var(--commerce-action); color: #fff; opacity: 1; transform: none; }
}
@media (hover: none) {
  .product-card:hover .has-alternate .product-primary { opacity: 1; }
  .product-card:hover .has-alternate .product-alternate { opacity: 0; }
  /* Without hover there is no reveal, and the card already carries the path: the photo opens the product page and "Select options" opens the quick view. */
  .quick-view { display: none; }
}
@media (max-width: 480px) {
  .product-info h3 { -webkit-line-clamp: 3; min-height: 63.84px; }
}
@media (max-width: 360px) {
  .product-info h3 { -webkit-line-clamp: 4; min-height: 85.12px; }
}
/* Set names are short, so their cards keep a two-line slot at every width. */
.bundle-card .product-info h3 { -webkit-line-clamp: 2; min-height: 42.56px; }
@media (max-width: 767px) {
  .product-photo img { padding: 18px; }
  .product-badge { font-size: 8px; padding: 3px 6px; }
  .overlay-header { padding: 22px 18px 16px 24px; }
  .overlay-header h2 { font-size: 18px; }
  .overlay-content { padding-inline: 24px; }
  .overlay[data-kind='quickview'] .overlay-surface, .overlay[data-kind='bundle'] .overlay-surface { max-width: calc(100vw - 24px); }
  .quickview-layout { grid-template-columns: 1fr; }
  .quickview-image { min-height: 0; height: 260px; }
  .quickview-image img { padding: 25px; }
  .quickview-details { padding: 28px 24px; }
  .quickview-details .product-purchase-row { flex-wrap: wrap; }
  .quickview-details .product-purchase-row .button { flex-basis: 100%; }
  .overlay[data-kind='newsletter'] .overlay-surface { max-width: calc(100vw - 32px); }
  .signup-card { grid-template-columns: 1fr; min-height: 0; }
  .signup-card > img { display: none; }
  .signup-copy { padding: 56px 28px 32px; }
  .signup-copy h3 { font-size: 30px; line-height: 36px; }
  .signup-copy > p { max-width: 270px; }
  .overlay[data-kind='newsletter'] .overlay-header { right: 12px; top: 12px; }
  .overlay[data-kind='newsletter'] .overlay-header .icon-button { width: 44px; height: 44px; }
  .toast { left: 16px; bottom: 76px; max-width: calc(100vw - 32px); }
  .gallery-lightbox { padding: 64px 16px 104px; }
  .gallery-arrow { top: auto; bottom: 24px; width: 44px; height: 44px; }
  .gallery-previous { left: 12px; }
  .gallery-next { right: 12px; }
  .gallery-counter { bottom: 34px; }
}
@media (max-width: 470px) {
  .overlay[data-kind='menu'] .overlay-header { min-height: calc((100vw - 84px) / 3.721 + 45px); height: calc((100vw - 84px) / 3.721 + 45px); }
  .overlay[data-kind='menu'] .overlay-header h2 { flex: none; width: calc(100% - 44px); }
  .overlay[data-kind='menu'] .overlay-header h2 img { width: 100%; height: auto; }
  .overlay[data-kind='menu'] .overlay-header > .icon-button { width: 44px; height: 44px; top: calc(25px + (100vw - 84px) / 7.442 - 22px); right: 0; }
}

.product-stock-note:empty, .bundle-availability:empty { display: none; }
.product-stock-note, .bundle-availability { margin-top: 14px; }

/* Local commerce panels. Business rules remain in domain modules, never CSS or templates. */
.panel-intro { font-family: var(--serif); font-size: 40px; line-height: 46px; font-weight: 400; color: var(--display-ink); }
.delivery-intro > .icon { margin-bottom: 20px; }
.delivery-intro > p:last-child, .help-intro > p:last-child { color: var(--muted); font-size: 14px; line-height: 24px; margin-top: 20px; }
.delivery-form { margin-top: 28px; }
.delivery-result { --muted: #6e6e6e; display: flex; gap: 14px; padding: 20px; background: #f3f5f2; margin-top: 26px; }
.delivery-result:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.delivery-result.is-unsupported { background: #f7f1ec; }
.delivery-result > .icon { margin-top: 2px; }
.delivery-result > div { min-width: 0; flex: 1; }
.delivery-result h3 { margin-top: 9px; font-size: 18px; font-weight: 500; line-height: 26px; }
.delivery-result h3 + p { font-size: 13px; color: #525252; margin-top: 12px; line-height: 23px; }
.delivery-result .eyebrow { font-size: 11px; }
.delivery-fee { font-size: 14px; margin-top: 15px; display: flex; justify-content: space-between; gap: 10px; }
.delivery-result .button { font-size: 14px; min-height: 48px; padding: 12px 16px; margin-top: 18px; }
.delivery-result .fine-print { margin-top: 15px; }
.panel-note { display: flex; gap: 12px; align-items: flex-start; padding-top: 25px; border-top: 1px solid var(--line); margin-top: 28px; }
.panel-note p { color: var(--muted); font-size: 12px; line-height: 21px; }
.panel-note strong { color: var(--ink); font-weight: 500; }
.demo-footnote { margin-top: 18px; font-size: 12px; }
.cart-intro { font-size: 14px; color: var(--muted); margin-bottom: 22px; }
.empty-bag { padding-top: 65px; }
.empty-bag .eyebrow { margin-top: 15px; }
.empty-bag h3 { font-family: var(--sans); font-size: 30px; line-height: 40px; }
.empty-bag > p:not(.eyebrow) { font-size: 14px; }
.cart-item { display: grid; grid-template-columns: 85px 1fr; gap: 20px; padding-block: 22px; border-top: 1px solid var(--line); }
.cart-item-image { height: 108px; background: var(--soft); display: flex; align-items: center; justify-content: center; }
.cart-item-image img { width: 100%; height: 100%; object-fit: contain; padding: 12px; mix-blend-mode: multiply; }
.cart-item-info h3 { font-size: 16px; line-height: 22px; font-weight: 500; margin: 3px 0 4px; }
.cart-item-info .fine-print { font-size: 12px; }
.cart-item-info > strong { font-size: 16px; font-weight: 500; display: block; margin-top: 7px; }
.cart-item-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 13px; }
.quantity-control { display: inline-flex; align-items: center; justify-content: space-between; border: 1px solid var(--line-strong); height: 38px; min-width: 104px; flex-shrink: 0; }
.quantity-control > button { height: 100%; width: 32px; display: inline-flex; align-items: center; justify-content: center; }
.quantity-control > span, .quantity-control > output { font-size: 14px; min-width: 30px; text-align: center; }
.quantity-control > button:hover:not(:disabled) { background: #f5f5f5; }
.remove-item { font-size: 12px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.cart-delivery { --muted: #6e6e6e; display: flex; gap: 14px; background: var(--soft); padding: 18px; margin-top: 10px; }
.cart-delivery > div > p:first-child { font-size: 14px; font-weight: 500; }
.cart-delivery .fine-print { font-size: 12px; margin-top: 6px; }
.cart-delivery .text-link { font-size: 12px; margin-top: 7px; }
.cart-summary { padding-top: 26px; }
.cart-summary > div { display: flex; justify-content: space-between; gap: 20px; font-size: 16px; margin-bottom: 10px; }
.cart-summary > div > strong { font-weight: 500; }
.cart-summary .cart-total { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 20px; }
.cart-summary .button { margin-top: 18px; }
.cart-summary .fine-print { font-size: 12px; margin-top: 12px; }
.continue-shopping { font-size: 14px; display: block; margin: 22px auto 0; }
.search-input-wrap { display: flex; align-items: center; height: 54px; border: 1px solid var(--line); gap: 12px; padding-inline: 14px 8px; }
.search-input-wrap input { border: 0; padding: 12px 0; font-size: 14px; }
.search-input-wrap input:focus-visible { outline-offset: 0; }
.search-input-wrap > .icon { flex-shrink: 0; }
.search-input-wrap .icon-button { width: 30px; }
.search-suggestions { margin-top: 27px; }
.suggestion-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 13px; }
.suggestion-chips button { border: 1px solid var(--line); font-size: 12px; padding: 6px 12px; }
.suggestion-chips button:hover { border-color: var(--ink); }
.search-status { margin-top: 28px; font-size: 14px; }
.search-result { display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 17px; padding-block: 18px; border-bottom: 1px solid var(--line); }
.search-result-image { width: 64px; height: 80px; background: var(--soft); }
.search-result-image img { width: 100%; height: 100%; object-fit: contain; padding: 10px; mix-blend-mode: multiply; }
.search-result > span:nth-child(2) { display: flex; flex-direction: column; gap: 4px; }
.search-result strong { font-size: 16px; font-weight: 500; }
.search-result .fine-print { font-size: 14px; color: var(--ink); }
.help-intro .panel-intro { margin-top: 18px; }
.help-links { margin-block: 26px; }
.help-links > button { display: flex; gap: 15px; width: 100%; padding-block: 22px; text-align: left; align-items: flex-start; border-top: 1px solid var(--line); }
.help-links > button > span { display: flex; flex: 1; flex-direction: column; gap: 7px; }
.help-links strong { font-size: 16px; font-weight: 500; line-height: 22px; }
.help-links > button > span > span { font-size: 13px; color: var(--muted); line-height: 22px; }
.help-links > button > .icon { margin-top: 2px; }
.policy-body { font-size: 14px; line-height: 25px; }
.policy-lead { font-family: var(--serif); font-size: 32px; line-height: 38px; }
.policy-callout { background: var(--announcement); padding: 16px 18px; font-size: 12px; line-height: 22px; margin-top: 24px; }
.policy-section { border-bottom: 1px solid var(--line); padding-block: 26px; }
.policy-section h3 { font-size: 18px; line-height: 26px; font-weight: 500; margin-bottom: 12px; }
.policy-section p { color: var(--muted); font-size: 14px; line-height: 25px; }
.policy-section p + p { margin-top: 13px; }
.policy-section .inline-link { margin-top: 17px; font-size: 14px; }
.policy-body > .inline-link { margin-top: 25px; }
.business-lead { font-size: 30px; line-height: 38px; font-family: var(--serif); color: var(--display-ink); }
.business-body > p { margin-top: 20px; font-size: 14px; line-height: 25px; }
.business-body .button { margin-top: 24px; }
@media (max-width: 767px) {
  .cart-item { grid-template-columns: 67px 1fr; gap: 15px; }
  .cart-item-image { height: 94px; }
  .cart-item-image img { padding: 10px; }
  .cart-item-info h3 { font-size: 14px; }
  .cart-item-controls .quantity-control { min-width: 95px; height: 36px; }
  .cart-item-controls .quantity-control button { width: 29px; }
  .cart-delivery { padding: 15px 12px; gap: 10px; }
  .search-result { grid-template-columns: 54px 1fr auto; gap: 12px; }
  .search-result-image { width: 54px; height: 70px; }
  .search-result strong { font-size: 14px; }
  .delivery-result { padding: 18px 14px; gap: 10px; }
  .delivery-fee { flex-wrap: wrap; }
}

/* Collection, with a real inline Filter panel that pushes the product grid down. */
.shop-intro { background: #fff; padding-block: 0 40px; text-align: center; }
.shop-intro .breadcrumbs { justify-content: center; padding-block: 28px 24px; }
.shop-intro h1 { font-family: var(--sans); font-size: 40px; line-height: 52px; font-weight: 500; }
.shop-intro h1 + p { margin-top: 16px; font-size: 14px; line-height: 24px; color: var(--muted); }
.shop-section { padding-block: 24px 90px; }
.shop-toolbar { margin-bottom: 18px; }
.collection-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 18px 32px; }
.collection-tabs button { font-size: 16px; line-height: 24px; color: var(--muted); padding-bottom: 5px; border-bottom: 1px solid transparent; }
.collection-tabs button.is-active { color: var(--ink); border-color: var(--ink); }
.shop-filter-row { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding-block: 20px 30px; }
.results-count { font-size: 14px; color: var(--muted); }
.shop-filters { display: flex; align-items: center; gap: 32px; }
.filter-toggle { display: inline-flex; align-items: center; gap: 12px; font-size: 16px; color: #111; }
.shop-filters > .custom-select { min-width: 170px; font-size: 14px; }
.shop-filters .select-trigger { min-height: 36px; padding: 6px 0; border: 0; gap: 16px; }
.shop-filters .select-options { --select-min-width: 200px; --select-align: end; }
.collection-filter-panel { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 60px; min-height: 137px; padding: 30px; border-block: 1px solid var(--line); margin-bottom: 35px; }
.shop-search { display: flex; align-items: center; gap: 15px; border-bottom: 1px solid var(--line-strong); }
.shop-search input { border: 0; padding: 14px 0; font-size: 14px; }
.shop-search input:focus-visible { outline-offset: 0; }
.shop-search .inline-link { white-space: nowrap; border: 0; padding: 0; font-size: 14px; gap: 10px; }

/* Product pages keep the source's sans commerce title and 56px purchase controls. */
.breadcrumbs { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; line-height: 20px; flex-wrap: wrap; padding-block: 28px 30px; }
.breadcrumbs > span { color: var(--ink); }
.product-layout { display: grid; grid-template-columns: 1.14fr 1fr; align-items: start; gap: 100px; }
.product-main-image { width: 100%; background: var(--soft); aspect-ratio: 670 / 816; display: flex; align-items: center; justify-content: center; }
button.product-main-image { cursor: zoom-in; }
.product-main-image img { width: 100%; height: 100%; padding: 45px; object-fit: contain; mix-blend-mode: multiply; opacity: 1; transition: opacity 400ms ease; }
.product-main-image img.is-changing { opacity: 0; }
.product-thumbnails { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.product-thumbnails button { width: 80px; height: 96px; background: var(--soft); border: 1px solid transparent; }
.product-thumbnails button.is-active { border-color: #111; }
.product-thumbnails img { width: 100%; height: 100%; padding: 10px; object-fit: contain; mix-blend-mode: multiply; }
.gallery-caption { font-size: 12px; margin-top: 16px; }
.product-config h1, .product-config h2, .bundle-details h1, .bundle-details h2 { font-family: var(--sans); font-size: 28px; font-weight: 500; line-height: 37.24px; }
.detail-price { font-size: 24px; line-height: 32px; margin-top: 18px; }
.price-note { font-size: 12px; margin-top: 8px; }
.product-description { color: var(--muted); font-size: 16px; line-height: 27.2px; margin-top: 26px; }
.finish-row { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-top: 26px; }
.finish-row > span:first-child { margin-right: 12px; }
.finish-row > strong { font-weight: 400; color: var(--muted); }
.finish-swatch { width: 20px; height: 20px; border-radius: 50%; background: var(--swatch); border: 1px solid #c4c4c4; }
.variant-fieldset { margin-top: 24px; }
.variant-fieldset legend { font-size: 14px; margin-bottom: 14px; }
.variant-options { display: flex; gap: 10px; flex-wrap: wrap; }
.variant-chip { cursor: pointer; }
.variant-chip > span { display: block; border: 1px solid var(--line); padding: 12px 16px; font-size: 14px; transition: border-color 300ms ease; }
.variant-chip > input:checked + span { border-color: #111; }
.variant-chip > input:focus-visible + span { outline: 2px solid #111; outline-offset: 3px; }
.product-purchase-row { display: flex; align-items: stretch; gap: 14px; margin-top: 28px; }
.product-purchase-row .quantity-control { height: 56px; min-width: 132px; }
.product-purchase-row .button { flex: 0 1 230px; min-width: 0; min-height: 56px; gap: 12px; padding-inline: 16px; }
.product-delivery-note { display: flex; align-items: flex-start; gap: 12px; border-block: 1px solid var(--line); padding-block: 20px; margin-top: 28px; }
.product-delivery-note > .icon { margin-top: 2px; }
.product-delivery-note p { font-size: 14px; line-height: 24px; }
.product-delivery-note .text-link { font-size: 13px; color: var(--muted); margin-top: 6px; }
.detail-preview-note { font-size: 12px; margin-top: 16px; }
.product-accordions { margin-top: 30px; }
.product-accordions details { border-bottom: 1px solid var(--line); }
.product-accordions summary { font-size: 16px; line-height: 24px; min-height: 58px; color: #111; }
/* The disclosure glyph is a plus here, so opening turns it into a close mark instead of a no-op rotation. */
.product-accordions details[open] summary .icon { transform: rotate(45deg); }
.product-accordions details > p { font-size: 14px; line-height: 24px; margin-bottom: 20px; }
.spec-list { margin: 0; padding-bottom: 22px; }
.spec-list > div { display: grid; grid-template-columns: 120px 1fr; gap: 20px; font-size: 14px; line-height: 23px; padding-block: 7px; }
.spec-list dt { color: var(--muted); }
.spec-list dd { margin: 0; }
.related-section { padding-block: 90px; }
.related-section .section-heading { justify-content: space-between; text-align: left; }
.related-section .product-grid { margin-top: 48px; }
.bundle-page { padding-bottom: 90px; }

/* Checkout is explicitly a local demo, not a payment or fulfilment service. */
.checkout-page { padding-block: 32px 90px; }
.back-link { font-size: 14px; display: inline-flex; align-items: center; gap: 10px; color: var(--muted); }
.checkout-heading { padding-top: 30px; }
.checkout-heading h1 { font-family: var(--sans); font-size: 40px; line-height: 52px; font-weight: 500; margin-top: 12px; }
.checkout-progress { display: flex; list-style: none; padding: 0; gap: 30px; align-items: center; margin-top: 24px; }
.checkout-progress li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--muted); }
.checkout-progress li > span { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; font-size: 11px; }
.checkout-progress li[aria-current] { color: var(--ink); }
.checkout-progress li[aria-current] > span { color: #fff; background: var(--ink); border-color: var(--ink); }
.demo-banner { padding: 18px 20px; border: 1px solid #dfd9c7; background: var(--announcement); display: flex; align-items: center; gap: 14px; margin-top: 28px; }
.demo-banner p { font-size: 14px; line-height: 24px; }
.demo-banner strong { font-weight: 500; }
.checkout-notice { font-size: 14px; color: var(--error); margin-top: 18px; }
.checkout-notice:empty { display: none; }
.checkout-layout { display: grid; grid-template-columns: 1.2fr .9fr; align-items: start; gap: 72px; margin-top: 37px; }
.checkout-summary { --muted: #6e6e6e; background: var(--soft); padding: 28px; position: sticky; top: 25px; }
.checkout-summary-header, .form-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; }
.checkout-summary-header h2 { font-size: 20px; font-weight: 500; }
.checkout-summary-header .text-link { font-size: 13px; color: var(--muted); }
.checkout-items { margin-top: 22px; }
.checkout-item { display: flex; gap: 15px; padding-block: 16px; border-bottom: 1px solid var(--line); }
.checkout-item-image { width: 63px; height: 80px; background: #efefed; flex-shrink: 0; }
.checkout-item-image img { width: 100%; height: 100%; object-fit: contain; padding: 10px; mix-blend-mode: multiply; }
.checkout-item h3 { font-size: 14px; font-weight: 500; margin-top: 3px; line-height: 22px; }
.checkout-item p { color: var(--muted); font-size: 12px; margin-top: 6px; line-height: 21px; }
.checkout-item strong { font-size: 14px; font-weight: 400; display: block; margin-top: 7px; }
.checkout-totals { padding-block: 24px; }
.checkout-totals > div { display: flex; justify-content: space-between; gap: 15px; font-size: 14px; margin-bottom: 11px; }
.checkout-totals .checkout-grand-total { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 18px; margin-bottom: 0; font-size: 20px; }
.checkout-grand-total strong { font-weight: 500; }
.checkout-window { display: flex; gap: 12px; padding-block: 20px; border-top: 1px solid var(--line); }
.checkout-window .icon { margin-top: 2px; }
.checkout-window strong { font-size: 14px; font-weight: 500; line-height: 23px; display: block; }
.checkout-window p { font-size: 12px; color: var(--muted); line-height: 22px; margin-top: 6px; }
.checkout-summary > .fine-print { font-size: 12px; }
.form-heading h2, .form-subheading { font-size: 24px; line-height: 32px; font-weight: 500; }
.form-heading .text-link { font-size: 13px; }
.form-description { font-size: 13px; line-height: 23px; color: var(--muted); margin-top: 10px; margin-bottom: 24px; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.form-subheading { margin-block: 30px 23px; }
.checkout-form input, .checkout-form textarea { font-size: 16px; }
.optional { font-weight: 400; color: var(--muted); }
.checkout-form-note { font-size: 12px; text-align: center; margin-top: 16px; }
.error-summary { border: 1px solid var(--error); padding: 18px 20px; margin-bottom: 25px; color: var(--error); }
.error-summary h2 { font-size: 18px; font-weight: 500; line-height: 26px; }
.error-summary ul { margin-top: 12px; padding-left: 16px; }
.error-summary li { font-size: 14px; line-height: 24px; margin-top: 7px; }
.error-summary .text-link { text-align: left; }
.review-address { font-size: 16px; line-height: 28px; margin-top: 23px; }
.review-address > strong { font-weight: 500; }
.review-address > p { color: var(--muted); margin-top: 5px; }
.review-address > p:last-child { margin-top: 12px; }
.review-payment { display: flex; align-items: flex-start; gap: 14px; padding-block: 25px; border-block: 1px solid var(--line); margin-top: 27px; }
.review-payment h3 { font-size: 18px; font-weight: 500; line-height: 26px; }
.review-payment p { color: var(--muted); font-size: 14px; line-height: 25px; margin-top: 9px; }
.review-window { margin-block: 25px; }
.review-window > strong { display: block; font-size: 18px; font-weight: 500; margin-top: 12px; }
.review-window > p:last-child { font-size: 14px; line-height: 25px; color: var(--muted); margin-top: 10px; }
.review-back { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 25px auto 0; }
.checkout-empty { min-height: 500px; justify-content: center; }
.checkout-empty h1 { font-family: var(--sans); font-size: 36px; line-height: 48px; }
.confirmation-page { max-width: 800px; padding-block: 55px 80px; }
.confirmation-heading { text-align: center; }
.confirmation-check { width: 65px; height: 65px; border: 1px solid var(--ink); display: flex; align-items: center; justify-content: center; margin: 0 auto 25px; border-radius: 50%; }
.confirmation-heading h1 { font-family: var(--sans); font-size: 40px; line-height: 52px; font-weight: 500; margin-top: 16px; }
.confirmation-heading h1 + p { color: var(--muted); font-size: 14px; margin-top: 22px; line-height: 25px; }
.confirmation-heading h1 + p strong { font-weight: 500; color: var(--ink); }
.demo-reference { font-size: 13px; margin-top: 24px; color: var(--muted); }
.confirmation-summary { --muted: #6e6e6e; background: var(--soft); padding: 30px; margin-block: 35px 22px; }
.confirmation-topline { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.confirmation-topline .eyebrow { font-size: 11px; }
.confirmation-topline strong { font-size: 14px; font-weight: 500; display: block; margin-top: 10px; line-height: 24px; }
.confirmation-item { display: flex; align-items: center; gap: 20px; padding-block: 20px; border-bottom: 1px solid var(--line); }
.confirmation-item img { width: 58px; height: 72px; object-fit: contain; padding: 5px; mix-blend-mode: multiply; }
.confirmation-item > div { flex: 1; min-width: 0; }
.confirmation-item h2 { font-size: 16px; line-height: 23px; font-weight: 500; }
.confirmation-item p { font-size: 12px; color: var(--muted); margin-top: 7px; }
.confirmation-item > strong { font-size: 14px; font-weight: 500; }
.confirmation-total { padding-top: 22px; }
.confirmation-total > div { display: flex; justify-content: space-between; gap: 20px; font-size: 14px; margin-bottom: 10px; }
.confirmation-total > div:last-child { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 18px; margin-bottom: 0; font-size: 20px; }
.confirmation-total strong { font-weight: 500; }
.confirmation-actions { display: flex; align-items: center; justify-content: center; gap: 30px; margin-top: 35px; }
.confirmation-actions .inline-link { font-size: 14px; }
.promise-page-intro { --muted: #6e6e6e; background: #f6f6f6; padding-block: 65px 70px; text-align: center; }
.promise-page-intro h1 { font-family: var(--serif); font-size: 50px; line-height: 58px; margin-top: 19px; color: var(--display-ink); }
.promise-page-intro h1 + p { margin-top: 23px; font-size: 16px; color: var(--muted); }
.promise-page-intro .button { margin-top: 28px; }
.policy-page { display: grid; grid-template-columns: .7fr 1.3fr; gap: 100px; padding-block: 70px 80px; }
.policy-page-aside { position: sticky; top: 35px; height: fit-content; }
.promise-page-number { font-family: var(--serif); font-size: 150px; line-height: 1; }
.promise-page-number span { display: block; font-family: var(--sans); font-size: 16px; line-height: 24px; margin-top: 15px; }
.policy-page-aside > p:not(.promise-page-number) { color: var(--muted); font-size: 14px; margin-top: 28px; }
.policy-page-aside .inline-link { font-size: 14px; margin-top: 28px; }
.not-found { min-height: 500px; }
.not-found h1 { font-family: var(--sans); font-size: 36px; line-height: 48px; }
@media (max-width: 1024px) {
  .product-layout { gap: 50px; }
  .product-main-image img { padding: 35px; }
  .product-purchase-row { gap: 10px; }
  .product-purchase-row .button { font-size: 14px; padding-inline: 14px; }
  .checkout-layout { grid-template-columns: 1.15fr 1fr; gap: 35px; }
  .checkout-summary { padding: 24px; }
  .checkout-form .field-row { grid-template-columns: 1fr; gap: 0; }
  .form-heading { align-items: flex-start; }
  .form-heading .text-link { max-width: 120px; text-align: right; }
  .policy-page { gap: 60px; }
}
@media (max-width: 767px) {
  .shop-intro { padding-bottom: 28px; }
  .shop-intro h1 { font-size: 32px; line-height: 42px; }
  .shop-intro h1 + p { max-width: 320px; margin-inline: auto; }
  .shop-section { padding-block: 20px 55px; }
  .collection-tabs { gap: 16px 24px; }
  .collection-tabs button { font-size: 14px; }
  .shop-filter-row { flex-direction: column; align-items: stretch; gap: 16px; }
  .shop-filters { justify-content: space-between; gap: 20px; }
  .collection-filter-panel { grid-template-columns: 1fr; gap: 20px; padding: 20px 0; }
  .shop-search input { font-size: 16px; }
  .product-layout { grid-template-columns: 1fr; gap: 32px; }
  .product-main-image { aspect-ratio: 670 / 816; }
  .product-main-image img { padding: 35px; }
  .product-thumbnails button { width: 65px; height: 78px; }
  .product-purchase-row .quantity-control { min-width: 132px; }
  .product-purchase-row .button { font-size: 16px; }
  .spec-list > div { grid-template-columns: 100px 1fr; gap: 16px; }
  .related-section { padding-block: 60px; }
  .related-section .section-heading { display: block; }
  .related-section .section-heading .inline-link { margin-top: 16px; }
  .checkout-page { padding-block: 24px 55px; }
  .checkout-heading h1 { font-size: 32px; line-height: 42px; }
  .checkout-progress { gap: 14px; }
  .checkout-progress li { font-size: 11px; gap: 6px; }
  .checkout-progress li > span { width: 24px; height: 24px; font-size: 9px; }
  .demo-banner { align-items: flex-start; padding: 16px; gap: 12px; }
  .checkout-layout { grid-template-columns: 1fr; gap: 32px; margin-top: 28px; }
  .checkout-summary { position: static; }
  .form-heading h2, .form-subheading { font-size: 22px; }
  .form-heading .text-link { max-width: 110px; }
  .field { margin-bottom: 20px; }
  .checkout-empty { min-height: 450px; padding-block: 60px; }
  .confirmation-page { padding-block: 42px 55px; }
  .confirmation-heading h1 { font-size: 32px; line-height: 42px; }
  .confirmation-heading h1 + p br { display: none; }
  .confirmation-summary { padding: 24px 18px; }
  .confirmation-topline { grid-template-columns: 1fr; gap: 20px; }
  .confirmation-item { gap: 12px; align-items: flex-start; }
  .confirmation-item img { width: 42px; height: 60px; }
  .confirmation-item h2 { font-size: 14px; }
  .confirmation-item > strong { font-size: 13px; }
  .confirmation-actions { flex-direction: column; gap: 24px; }
  .promise-page-intro { padding-block: 45px; }
  .promise-page-intro h1 { font-size: 36px; line-height: 42px; }
  .policy-page { grid-template-columns: 1fr; gap: 35px; padding-block: 45px 55px; }
  .policy-page-aside { position: static; border-bottom: 1px solid var(--line); padding-bottom: 35px; }
  .promise-page-number { font-size: 100px; }
}
@media (max-width: 480px) {
  .collection-tabs { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; gap: 14px 22px; }
  .collection-tabs button { justify-self: start; }
}