/* Accessibility layer (WCAG 2.2 AA) applied on top of the Webflow stylesheet. */
/* utilities */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 20000; padding: 10px 16px; border-radius: 999px; background: #203524; color: #f7f6f2; font: 700 14px/1 Lato, sans-serif; text-decoration: none; transition: top 150ms ease; }
.skip-link:focus { top: 12px; outline: 3px solid #dabd73; outline-offset: 2px; }
/* visible focus everywhere (Webflow resets it on several controls) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, .w-dropdown-toggle:focus-visible, .w-nav-button:focus-visible, .w-slider-arrow-left:focus-visible, .w-slider-arrow-right:focus-visible, .w-slider-dot:focus-visible, .w-lightbox:focus-visible { outline: 3px solid #dabd73 !important; outline-offset: 2px; }
.navbar a:focus-visible, .footer a:focus-visible { outline-color: #dabd73 !important; }
/* contrast: gold text on light backgrounds was 1.8:1; use a darker gold there (dark sections keep the bright gold) */
:root { --gold-on-light: #7d5f0e; }
.title-heading.gold, .ac p.ac-kicker, .prev-text, .product-main-details .field-label-cf10.red, .button-brand.gold.w-button { color: var(--gold-on-light); }
.give-back-section .title-heading.gold, .subscribe-section .title-heading.gold, .page-hero-section .title-heading.gold, .ready-to-sip-section .title-heading.gold, .did-you-know-section .title-heading.gold, .footer .title-heading.gold, .thank-you .title-heading.gold, .fs-slider .title-heading.gold, .slide-content .title-heading.gold { color: #dabd73; }
.button-brand.gold.w-button { color: #f7f6f2; }
/* grey helper text on white/cream was ~2.9:1 */
.sub-head, .form-subtitle-cf10, .order-form-section p, .checkbox-label-cf10, .w-form-label, .field-label-cf10, .subscribe-text, .text-block-5, .gc-muted, .gc-line-opts, .gc-secure, .pf-note, .co-hint, .co-secure, .ac p { color: #5f5f58; }
.gc-chip span small, .pf-chip span small { color: #5f5f58; }
.pf-chip input:checked + span small { color: #e8d59b; }
input::placeholder, textarea::placeholder { color: #6b6b64; opacity: 1; }
/* cookie bar / notices */
.cookie-policy { color: #f1d98f; }
/* footer column titles were h5 (skipped heading levels); same look as the Webflow h5 rule */
.footer h2.footer-col-title { color: #dabd73; letter-spacing: 2px; text-transform: uppercase; margin: 10px 0; font-family: 'Arbour soft', sans-serif; font-size: 16px; font-weight: 400; line-height: 20px; }
/* kicker lines ("Discover", "Order received"…) were h3s before the h2 (skipped levels); now paragraphs with the h3 look */
p.title-heading { font-family: 'Arbour soft', sans-serif; letter-spacing: 1px; text-transform: uppercase; font-weight: 400; line-height: 30px; }
p.hero-subhead { font-family: 'Arbour soft', sans-serif; font-weight: 400; }
p.heading-3 { font-family: 'Arbour soft', sans-serif; letter-spacing: 1px; text-transform: uppercase; font-weight: 400; color: #202016; }
/* blog previous/next titles were h4s inside links; paragraphs with the h4 look */
p.blog-article-heading { margin-top: 10px; margin-bottom: 10px; font-weight: 700; }
/* iOS Safari zooms into any focused field under 16px; keep every form field at 16px on phones. */
@media (max-width: 767px) { .w-input, .w-select, .w-form input:not([type=checkbox]):not([type=radio]), .w-form select, .w-form textarea { font-size: 16px !important; } }

/* WCAG AAA (7:1) text contrast on the product page. Same hues as the Webflow palette, darkened:
   crimson #c23343 -> #a32b38 (7.09:1), dim grey #656565 -> #585858 (7.11:1), #5f5f58 -> #595953 (7.05:1). */
.product-head-section .label.cc-product-details { color: #a32b38; }
.product-head-section .product-story .text-block-4,
.product-head-section .product-story p,
.product-head-section .product-story .product-rich-text p,
.product-head-section .text-block-4,
.product-head-section .pf-chip span small,
.product-head-section .pf-note,
.product-head-section .pf-hint { color: #585858; }
.product-head-section .pf-chip input:checked + span small { color: #e8d59b; } /* keep the selected-chip style */
.product-head-section .field-label-cf10:not(.red) { color: #595953; }

/* Performance: local fonts swap instead of blocking text (overrides the Webflow @font-face with font-display:auto). */
@font-face {
  font-family: 'Arbour soft';
  src: url('/assets/wf/5f7758a93e37492e6c78f2fd/5f7758dfd23a47d7a9d52f0d_Arbour%20Soft%20Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Arbour soft';
  src: url('/assets/wf/5f7758a93e37492e6c78f2fd/5f7758dfd23a4788a4d52f0e_Arbour%20Soft%20Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}