/* Shared compact scale, including the homepage, catalogue and support pages. */
html { font-size: 1rem; }
:root {
  --page-max: 88vw;
  --page-gutter: max(1rem, 6vw);
  --header-h: 6.5rem;
}
@media (min-width: 1100px) {
  :root {
    font-size: max(1rem, .72115385vw);
    --page-max: max(68rem, 60vw);
  }
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
.container,
.site-footer .container,
.refined-bands,
main > .home-refined,
.membership-page,
.partner-shell,
.support-shell {
  width: min(var(--page-max), calc(100% - 2 * var(--page-gutter)));
  max-width: var(--page-max);
  margin-inline: auto;
}
/* The shared header keeps the same page edge, even on the compact catalogue. */
.site-header .header-inner {
  width: min(1800px, calc(100% - 2 * clamp(1rem, 4vw, 6rem)));
  max-width: 1800px;
  margin-inline: auto;
}
.container-narrow { width: min(55rem, calc(100% - 2 * var(--page-gutter))); }
main :is(input, select, textarea) { min-width: 0; max-width: 100%; }
main :is(h1, h2, h3, p, li, dd, a) { overflow-wrap: break-word; }
.breadcrumbs { flex-wrap: wrap; }
.footer-grid > *, .form-grid > *, .detail-grid > *, .cart-layout > *,
.checkout-layout > *, .support-workspace > * { min-width: 0; }

.shop-section > .container {
  width: min(var(--page-max), calc(100% - 2 * var(--page-gutter)));
  max-width: none;
}
/* Square photo panels retain the complete vial without empty side strips. */
.shop-section .shop-grid { gap: 24px; }
.shop-section .shop-card-media { aspect-ratio: 1; }
.shop-section .shop-card-media .product-photo {
  position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0;
  object-fit: cover; object-position: 50% 35%;
}
.shop-section .shop-card-body { padding: 1rem; gap: .4rem; }
.shop-section .shop-card-name { font-size: 1.1rem; }
.shop-section .shop-card-cat, .shop-section .shop-stock { font-size: .75rem; }
.shop-section .shop-card-spec { font-size: .8125rem; }
.shop-section .shop-card-price { font-size: 1.4rem; }
.shop-section .shop-card-purity { font-size: .75rem; }
.shop-section .shop-card-actions :is(.shop-add, .shop-details) {
  min-height: 2.75rem; font-size: .8125rem; padding: .65rem .4rem;
}
.shop-section .shop-filter-shell .shop-chip { font-size: .75rem; min-height: 2.5rem; padding: .5rem .75rem; }
.shop-section .shop-filter-shell :is(.shop-search input, .shop-sort select) { font-size: .875rem; min-height: 2.75rem; }
.shop-section .shop-catalogue-head .shop-hero-eyebrow { font-size: .6875rem; }
.shop-section .shop-catalogue-head .shop-hero-lead { font-size: .9375rem; line-height: 1.75; }
@media (min-width: 1100px) {
  .shop-section .shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
  .shop-section .shop-card-body { padding: 1rem 1.25rem; gap: .25rem; }
  .shop-section .shop-card-name { font-size: 1rem; line-height: 1.3; }
  .shop-section .shop-card-name a { padding-block: 0; }
  .shop-section .shop-card-cat { font-size: .6875rem; line-height: 1.3; }
  .shop-section .shop-card-foot { padding-top: .25rem; }
  .shop-section .shop-card-price { font-size: 1.25rem; line-height: 1.3; }
  .shop-section .shop-card-actions { margin-top: .25rem; }
  .shop-section .shop-card-actions :is(.shop-add, .shop-details) { min-height: 2.5rem; padding-block: .5rem; }
  .shop-section .shop-catalogue-head .shop-hero { padding: clamp(2rem, 3vw, 3rem); }
  .shop-section .shop-catalogue-head .shop-hero-title { font-size: clamp(2.5rem, 3.8vw, 3.5rem); }
  .shop-section .shop-hero-art > img { height: clamp(17.5rem, 22vw, 23rem); }
}

/* Product information and purchase controls keep a readable minimum size. */

/* The name and the price are the only two things in the purchase column that
   were still sized off the viewport (3.8vw and 2.8vw). Everything around them
   is on the fixed compact scale below, so on a wide display they kept growing
   while the column they sit in stopped at --page-max and the copy stayed at
   15px — a 54px heading over 15px body, which reads as a zoomed-in page.
   Sizing them against the column itself keeps the ratio steady at every width. */
#productDetail .detail-balanced .detail-copy { container-type: inline-size; }
#productDetail .detail-balanced h1 { font-size: clamp(2rem, 8cqi, 2.9rem); }
#productDetail .detail-balanced .buy-price .amount { font-size: clamp(1.5rem, 5.9cqi, 2.1rem); }
/* The chips under the specimen photo were the other end of that range at 9px. */
#productDetail .detail-balanced .media-chip { font-size: .75rem; }

#productDetail .detail-balanced .lead { font-size: .9375rem; }
#productDetail .detail-balanced :is(.detail-tag, .buy-price .unit, .stock-pill, .bundle-label, .bundle-qty, .bundle-save) { font-size: .8125rem; }
#productDetail .detail-balanced :is(.bundle-each, .bundle-label > span, .pm-text > span) { font-size: .75rem; }
#productDetail .detail-balanced .pm-text strong { font-size: .875rem; }
#productDetail .detail-balanced .purchase-mode { min-width: 0; min-height: 4.5rem; }
#productDetail .detail-balanced .btn-buy { font-size: .9375rem; min-height: 3rem; }
.detail-certificate strong, .detail-delivery-strip strong { font-size: .875rem; }
.detail-certificate small, .detail-delivery-strip small,
.product-detail .detail-support .compliance-note, .detail-order-summary { font-size: .75rem; }
.detail-delivery-more { font-size: .875rem; }

/* The homepage and membership designs previously used small fixed-pixel copy. */
.home-refined .intro > p, .home-refined .quality > p { font-size: .9375rem; max-width: 34rem; }
.home-refined .cta-row, .home-refined .secondary, .home-refined .coa-link { font-size: .875rem; }
.home-refined .eyebrow { font-size: .6875rem; }
.home-refined .intro-bottom { font-size: .75rem; flex-wrap: wrap; }
.home-refined .guarantees strong { font-size: .875rem; }
.home-refined .guarantees div div > span { font-size: .8125rem; line-height: 1.6; }
.home-refined .intro { padding: clamp(1.5rem, 3vw, 3rem) clamp(1.5rem, 3vw, 3rem) 0; }
.home-refined h1 { font-size: clamp(2.2rem, 3.4vw, 3.8rem); }
.home-refined .quality h2 { font-size: clamp(1.9rem, 2.6vw, 2.6rem); }
.membership-page .m-lead { font-size: 1rem; max-width: 32rem; }
.membership-page :is(.m-button, .m-text-link) { font-size: .875rem; min-height: 2.75rem; }
.membership-page .m-actions { flex-wrap: wrap; }
.membership-page :is(.m-copy-foot, .m-proof-item small) { font-size: .75rem; }
.membership-page :is(.m-section-head > p, .m-calc-inputs > p, .m-perk p, .m-faq details p) { font-size: .9375rem; }
.membership-page .m-faq summary { font-size: .9375rem; }
.membership-page .ml-section :is(.ml-description, .ml-features) { font-size: .875rem; }
.membership-page .ml-section :is(.ml-cta, .ml-price > span) { font-size: .875rem; }
.membership-page .ml-section :is(.ml-billing, .ml-card-action > p, .action-note) { font-size: .75rem; }
.membership-page .ml-section .ml-price { flex-wrap: wrap; }
.membership-page .ml-section .ml-plan-copy .ml-description { min-height: 0; }

/* COA, account and checkout retain their own layouts within the shared scale. */
.coa-experience :is(.cl-library, .cx-guide, .cx-faq-section, .cx-support) {
  width: min(var(--page-max), calc(100% - 2 * var(--page-gutter)));
}
.coa-experience .cl-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.coa-experience :is(.cl-card-description, .cl-library-heading > p, .cx-faq-list details p) { font-size: .875rem; }
.coa-experience :is(.cl-card-specimen-note, .cl-search-modes button, .cl-filters button) { font-size: .75rem; }
.contact-rain .contact-opening-copy { width: min(46rem, 100%); max-width: 46rem; }
.contact-rain .contact-opening-copy > p { font-size: 1rem; max-width: 34rem; }
.contact-page main .contact-rain .contact-cta { min-height: 2.75rem; font-size: .875rem; }
.checkout-page #main > .section-tight > .container,
.checkout-footer .container { max-width: 85rem; }
.checkout-page :is(.checkout-intro p, .checkout-card-heading p) { font-size: .875rem; }
.account-final-live #acctGate { max-width: 75rem; }
.account-final-live .acct-head-title { font-size: clamp(1.75rem, 2.3vw, 2.5rem); max-width: none; }
.account-final-live .signin-art h2 { font-size: clamp(2rem, 3vw, 3.25rem); }
.account-final-live :is(.account-step-description, .signin-art > div > p:not(.eyebrow)) { font-size: .9375rem; }
.account-final-live .acct-form :is(input, button) { font-size: .9375rem; }
.account-final-live .final-gate-header { padding-inline: max(clamp(1rem, 4vw, 6rem), calc((100% - 1800px) / 2)); }
.account-final-live .final-gate-header .store-nav { font-size: .875rem; }

/* Desktop artwork and headings follow the compact content frame, rather than
   retaining the oversized heights and type of the former full-width panels. */
@media (min-width: 1100px) {
  .account-final-live #acctGate { max-width: min(75rem, var(--page-max)); }
  .home-refined :is(.intro, .constellation) { min-height: 28rem; }
  .home-refined .intro { padding: 1.75rem 1.75rem 0; }
  .home-refined h1 { font-size: 2.75rem; }
  .home-refined .intro > p { font-size: .875rem; }
  .home-refined :is(.cta-row, .secondary) { font-size: .8125rem; }
  .home-refined :is(.quality h2, .quality-passport h2) { font-size: 2rem; }
  .home-refined .specimen-showcase { min-height: 28rem; }
  .quality-passport .quality-heading { padding: 1.75rem; grid-template-columns: minmax(0, 1fr) 100px; gap: 1rem; }
  .quality-passport .quality-art { transform: scale(.75); transform-origin: left center; }
  .home-refined .quality-passport .guarantees { margin-inline: 1.75rem; }
  .quality-passport .quality-action { padding: 1.5rem 1.75rem; flex-wrap: wrap; }
  .membership-page h1 { font-size: 2.75rem; }
  .membership-page :is(.m-hero-copy, .m-hero-art) { min-height: 28rem; }
  .membership-page .m-hero-copy { padding: 1.75rem 1.75rem 0; }
  .membership-page .m-section-head h2 { font-size: 2rem; }
  .partner-intro h1 { font-size: 3rem; }
  .contact-opening.contact-rain { min-height: 30rem; --rain-travel: calc(30rem + 400px); }
  .contact-rain h1 { font-size: 2.75rem; }
}

/* Reflow instead of squeezing two columns into tablet and narrow phone widths. */
@media (max-width: 1100px) {
  :root { --header-h: 5.25rem; }
}
@media (max-width: 900px) {
  #productDetail .detail-balanced { grid-template-columns: minmax(0, 1fr); }
  #productDetail .detail-balanced .detail-media { width: min(100%, 34rem); margin-inline: auto; }
  #productDetail .detail-balanced .detail-copy { padding: 0; }
  /* One column, so the copy column is now the page width and sizing the name
     against it would overshoot what the two-column layout settles on. */
  #productDetail .detail-balanced h1 { font-size: clamp(1.9rem, 4.4vw, 2.5rem); }
  #productDetail .detail-balanced .buy-price .amount { font-size: clamp(1.45rem, 3.3vw, 1.9rem); }
}
@media (max-width: 760px) {
  body:not(.dash-body) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea),
  .shop-section .shop-filter-shell :is(.shop-search input, .shop-sort select) { font-size: 1rem !important; }
  .home-refined .cta-row { gap: 1rem; }
  .home-refined .quality { padding: 1.5rem; }
  .membership-page .m-hero-copy { padding: 1.5rem 1.5rem 0; }
  .membership-page .m-copy-foot { flex-wrap: wrap; }
  .site-footer .footer-col a { font-size: .875rem; min-height: 2.75rem; }
  .site-footer .footer-trust-item { font-size: .75rem; }
}
@media (max-width: 480px) {
  .shop-section .shop-grid { grid-template-columns: minmax(0, 1fr); }
  #productDetail .detail-balanced .purchase-modes { grid-template-columns: minmax(0, 1fr); }
  #productDetail .detail-balanced .detail-tags { flex-wrap: wrap; row-gap: .65rem; }
  .membership-page h1 { font-size: clamp(2.25rem, 10vw, 3rem); }
}