/*
Theme Name: Diamond Crystal
Description: A minimal classic WordPress starter theme.
Version: 1.2.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: diamond-crystal
*/

* { box-sizing: border-box; }

/* Shared side inset for every block's inner column on phones (Figma mobile frames: 35px on a 440 canvas). */
@media (max-width: 767px) { :root { --dc-mobile-inset: 35px; } }
@media (max-width: 439px) { :root { --dc-mobile-inset: 20px; } }
body { margin: 0; color: #202124; background: #fff; font-family: system-ui, sans-serif; line-height: 1.6; }
a { color: #185abc; text-underline-offset: .15em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
img { max-width: 100%; height: auto; }
iframe, video { max-width: 100%; }
/* Main and article carry no spacing or width cap: blocks control their own layout and span the full screen. */
.site-main { width: 100%; margin: 0; padding: 0; min-height: 50vh; overflow-wrap: break-word; }
.entry { max-width: none; margin: 0; padding: 0; }
.comments-area { max-width: 48rem; margin: 0 auto 3rem; }
.entry-title { line-height: 1.2; }
.entry-meta { color: #555; font-size: .9rem; }
.entry-content::after { content: ""; display: table; clear: both; }
.navigation { margin-block: 2rem; }
.nav-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }
input, textarea, select, button { max-width: 100%; padding: .6rem; font: inherit; }
textarea { width: 100%; }
button, input[type="submit"] { cursor: pointer; }

/* Pill buttons — one shared hover for every CTA across the site: a 2px lift with a soft shadow that settles
   back on press. Filled red pills darken; outlined white pills fill in. Block stylesheets own colours and layout. */
.salt-cellar__button, .product-lineup__button, .contact-us__button, .mega-menu__bar-button, .mobile-menu__cta-button, .wp-block-button__link, .comment-form input[type="submit"] {
  transition: transform .2s cubic-bezier(.2, .7, .3, 1), box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
  will-change: transform;
}
:is(.salt-cellar__button, .product-lineup__button, .contact-us__button, .mega-menu__bar-button, .mobile-menu__cta-button, .wp-block-button__link, .comment-form input[type="submit"]):is(:hover, :focus-visible) {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .4);
}
:is(.salt-cellar__button, .product-lineup__button, .contact-us__button, .mega-menu__bar-button, .mobile-menu__cta-button, .wp-block-button__link, .comment-form input[type="submit"]):active {
  transform: translateY(0);
  box-shadow: 0 2px 6px -3px rgba(0, 0, 0, .4);
  transition-duration: .08s;
}
.mobile-menu__cta-button:hover, .mobile-menu__cta-button:focus-visible { background: #fff; color: #ac242a; }
.wp-block-button__link:hover, .wp-block-button__link:focus-visible, .comment-form input[type="submit"]:hover, .comment-form input[type="submit"]:focus-visible { filter: brightness(.9); }
@media (prefers-reduced-motion: reduce) {
  :is(.salt-cellar__button, .product-lineup__button, .contact-us__button, .mega-menu__bar-button, .mobile-menu__cta-button, .wp-block-button__link, .comment-form input[type="submit"]) { transition: background-color .2s ease, color .2s ease; will-change: auto; }
  :is(.salt-cellar__button, .product-lineup__button, .contact-us__button, .mega-menu__bar-button, .mobile-menu__cta-button, .wp-block-button__link, .comment-form input[type="submit"]):is(:hover, :focus-visible, :active) { transform: none; box-shadow: none; }
}
pre { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .5rem; border: 1px solid #ddd; text-align: start; }
.alignleft { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { display: block; margin-inline: auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text, .gallery-caption { color: #555; font-size: .9rem; }
.sticky { border-inline-start: 3px solid #185abc; padding-inline-start: 1rem; }
.bypostauthor { border-inline-start: 2px solid #ddd; padding-inline-start: 1rem; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.screen-reader-text:focus { z-index: 100000; top: 1rem; left: 1rem; width: auto; height: auto; padding: 1rem; clip-path: none; background: #fff; color: #202124; }
@media (max-width: 40rem) {
  .alignleft, .alignright { float: none; margin-inline: 0; }
}

/* Footer — Figma 560:994. Keep the brand treatment scoped to this component. */
@font-face {
  font-family: "Antonio";
  src: url("/wp-content/themes/diamond-crystal/assets/fonts/antonio-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
}

@font-face {
  font-family: "Footer Brandon Fallback";
  src: local("ArialMT"), local("Arial");
  font-weight: 400 600;
}

@font-face {
  font-family: "Footer Brandon Fallback";
  src: local("Arial-BoldMT"), local("Arial Bold");
  font-weight: 700 900;
  size-adjust: 90%;
}

.site-footer {
  --footer-body-font: "Brandon Grotesque", "Brandon Grotesque Web", "brandon-grotesque", "Footer Brandon Fallback", Arial, sans-serif;
  position: relative;
  isolation: isolate;
  color: #fff;
  background: #ac2029;
  font-family: var(--footer-body-font);
}

/* Preserve the crop of the artwork scaled to 3027 × 2018 in the 1440 × 488 frame. */
.site-footer::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: url("/wp-content/themes/diamond-crystal/assets/images/footer-pattern.jpg");
  background-size: 210.21% auto;
  background-position: 48.326% 64.245%;
  background-repeat: no-repeat;
}

.site-footer__inner { max-width: 1440px; margin-inline: auto; padding: 81px 6.667% 50px 7.431%; }
.site-footer__main { display: grid; grid-template-columns: 395fr 293fr 323fr 226fr; }
.site-footer__brand { display: block; align-self: start; margin-top: 5px; }
.site-footer__brand img { display: block; width: 307px; height: 172px; object-fit: contain; }
.site-footer__heading { margin: 0 0 45px; font-family: "Antonio", "Arial Narrow", sans-serif; font-size: 24px; font-weight: 700; line-height: 1.00085; letter-spacing: 2.88px; text-transform: uppercase; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 5px; }
.site-footer a:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
.footer-menu, .footer-menu .sub-menu { margin: 0; padding: 0; list-style: none; }
.footer-menu--column { display: grid; gap: 37px; max-width: 216px; }
.footer-menu--column li { line-height: 16px; }
.footer-menu--column a, .site-footer__label { font-size: 16px; font-weight: 900; line-height: 1; letter-spacing: 3.2px; text-transform: uppercase; }
.footer-menu--column a { display: inline-block; }
.footer-menu--column .sub-menu { display: grid; gap: 16px; margin-top: 20px; padding-inline-start: 16px; }
.footer-menu--column .sub-menu a { font-size: 14px; letter-spacing: 1.5px; line-height: 1.5; }
.site-footer__help .site-footer__heading { margin-bottom: 38px; }
.site-footer__label { margin: 0; line-height: 29px; }
.footer-menu--support { font-size: 24px; font-weight: 500; line-height: 29px; }
.site-footer__social { margin-top: 45px; }
.footer-menu--social { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 0; margin-left: -11px; }
.footer-menu--social a { display: flex; min-width: 36px; min-height: 36px; align-items: center; justify-content: center; }
.footer-social-icon { display: flex; width: 24px; height: 24px; align-items: center; justify-content: center; }
.footer-social-icon--instagram img { display: block; width: 24px; height: 24px; }
.footer-social-icon--youtube img { display: block; width: 20px; height: 16px; }
.footer-social-icon--facebook img, .footer-social-icon--linkedin img, .footer-social-icon--pinterest img, .footer-social-icon--x img, .footer-social-icon--tiktok img { display: block; width: 24px; height: 24px; filter: brightness(0) invert(1); }
.site-footer__bottom { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin: 79px 25px 0 11px; font-size: 12px; font-weight: 700; line-height: 34px; letter-spacing: .36px; text-transform: uppercase; }
.site-footer__copyright { margin: 0; }
.footer-menu--legal { display: flex; flex-wrap: wrap; justify-content: flex-end; }
.footer-menu--legal li + li::before { content: "/"; margin-inline: 4px; }
.site-footer__main > *, .site-footer__bottom > * { min-width: 0; overflow-wrap: anywhere; }

@media (min-width: 1440px) {
  .site-footer__inner { padding-inline: 107px 96px; }
}

@media (max-width: 1199px) {
  .site-footer__inner { padding: 64px 40px 36px; }
  .site-footer__main { grid-template-columns: 1fr 1fr 1fr; gap: 48px 32px; }
  .site-footer__brand { grid-column: 1 / -1; margin: 0; }
  .site-footer__bottom { flex-direction: column; gap: 8px; margin: 64px 0 0; line-height: 1.8; }
  .footer-menu--legal { justify-content: flex-start; }
  .site-footer::before { background-size: auto 210%; background-position: center; }
}

/* Mobile footer — Figma 582:2272 (440 wide): centered 240px logo, 32px Antonio headings, 20px black links 53px apart, rule above the legal lines. */
@media (max-width: 699px) {
  .site-footer__inner { padding: 52px 31px 42px; }
  .site-footer__main { grid-template-columns: 1fr; gap: 0; }
  .site-footer__brand { justify-self: center; margin: 0 0 71px; }
  .site-footer__brand img { width: 240px; height: 135px; }
  .site-footer__column { margin-bottom: 44px; }
  .site-footer__help { margin-top: 12px; }
  .site-footer__heading, .site-footer__help .site-footer__heading { margin-bottom: 18px; font-size: 32px; letter-spacing: 3.84px; }
  .footer-menu--column { gap: 0; max-width: none; }
  .footer-menu--column li { line-height: 53px; }
  .footer-menu--column a { padding-block: 0; font-size: 20px; line-height: 53px; letter-spacing: 4px; }
  .footer-menu--column .sub-menu { gap: 0; margin-top: 0; padding-inline-start: 20px; }
  .footer-menu--column .sub-menu a { font-size: 16px; line-height: 40px; letter-spacing: 3px; }
  .site-footer__help .site-footer__heading { margin-bottom: 30px; }
  .site-footer__label { font-size: 20px; letter-spacing: 4px; }
  .footer-menu--support { margin-top: 1px; }
  .site-footer__social { margin-top: 45px; }
  .footer-menu--social { gap: 18px; margin-top: 6px; margin-left: 0; }
  .footer-menu--social a { min-width: 24px; min-height: 24px; }
  .site-footer__bottom { gap: 0; margin: 56px 0 0; padding-top: 6px; border-top: 1px solid #fff; font-size: 10.5px; line-height: 34px; letter-spacing: .315px; }
  .site-footer__legal { margin-right: -12px; line-height: 29px; letter-spacing: 0; }
  .footer-menu--legal { gap: 0; }
  .footer-menu--legal li + li::before { margin-inline: 3px; }
}

@media (max-width: 359px) {
  .site-footer__inner { padding-inline: 20px; }
  .site-footer__brand img { width: 220px; height: 123.75px; }
}

/* Navigation — Figma 560:929. The exported logo includes its white diamond.
   The bar sticks to the top of the viewport (below the WordPress admin bar when logged in) but stays out of the way:
   navigation.js adds `is-stuck` once it has left its natural position (soft shadow) and `is-hidden` while the visitor
   scrolls down, sliding the bar and its hanging logo up out of view; scrolling up brings it straight back. */
.site-header {
  position: sticky;
  top: var(--dc-admin-bar-height, 0px);
  z-index: 20;
  color: #fff;
  background: #062b76;
  font-family: "Brandon Grotesque", "Brandon Grotesque Web", "brandon-grotesque", "Footer Brandon Fallback", Arial, sans-serif;
  transition: box-shadow .3s ease, transform .35s cubic-bezier(.2, .7, .2, 1);
}
.site-header.is-stuck { box-shadow: 0 6px 18px rgb(0 0 0 / 18%); }
/* Slide far enough that the logo diamond, which hangs 91px below the bar on desktop and 72px on phones, clears the viewport too. */
.site-header.is-hidden { transform: translateY(calc(-100% - 96px)); box-shadow: none; }
@media (max-width: 1199px) { .site-header.is-hidden { transform: translateY(calc(-100% - 76px)); } }
@media (prefers-reduced-motion: reduce) { .site-header { transition: box-shadow .3s ease; } }
/* Anchored jumps and focus scrolling land below the sticky bar. */
html { scroll-padding-top: calc(114px + var(--dc-admin-bar-height, 0px)); }
body.admin-bar { --dc-admin-bar-height: 32px; }
@media (max-width: 782px) { body.admin-bar { --dc-admin-bar-height: 46px; } }
@media (max-width: 1199px) { html { scroll-padding-top: calc(75px + var(--dc-admin-bar-height, 0px)); } }
.site-header__inner { max-width: 1440px; min-height: 114px; margin-inline: auto; padding-inline: 120px 118px; }
.site-header__brand { position: absolute; z-index: 2; top: -1px; left: 50%; transform: translateX(-50%); }
.site-header__brand img { display: block; width: 398px; height: 205px; max-width: none; }
.site-header__navigation { display: flex; justify-content: space-between; gap: 378px; }
.site-header__wing { flex: 1 1 412px; min-width: 0; }
.site-header a { color: inherit; text-decoration: none; }
.site-header a:hover, .header-search summary:hover { text-decoration: underline; text-underline-offset: 5px; }
.site-header :is(a, button, summary, input):focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.site-header__brand:focus-visible { outline-color: #062b76; outline-offset: -8px; }
.header-menu, .header-menu .sub-menu { padding: 0; margin: 0; list-style: none; }
.header-menu { display: flex; flex-wrap: wrap; }
.header-menu a { display: inline-block; }
.site-header__utility { position: relative; display: flex; align-items: start; flex-wrap: wrap; gap: 12px 34px; min-height: 42px; padding-top: 3px; padding-bottom: 5px; color: rgb(255 255 255 / 75%); }
.site-header__wing--right .site-header__utility { justify-content: flex-end; }
.header-menu--utility { gap: 0 34px; }
.header-menu--utility a, .header-search summary { font-size: 13px; font-weight: 700; line-height: 34px; letter-spacing: 1.43px; text-transform: uppercase; }
.site-header__rules { position: absolute; bottom: 1px; left: 0; display: grid; gap: 3.5px; width: 100%; pointer-events: none; }
.site-header__rules img { display: block; width: 100%; height: .5px; }
.site-header__primary { padding-block: 18px 20px; }
.header-menu--primary { align-items: start; gap: 8px 70px; }
.site-header__wing--left .header-menu--primary { justify-content: flex-end; }
.header-menu--primary > li > a,
.header-menu__button { font-size: 16px; font-weight: 700; line-height: 34px; letter-spacing: 1.76px; text-transform: uppercase; }
.header-menu__button { display: inline-block; padding: 0; border: 0; background: transparent; color: inherit; font-family: inherit; cursor: pointer; }
.header-menu__button:hover, .menu-item.is-open > .header-menu__button, .menu-item.is-open > a { text-decoration: underline; text-underline-offset: 5px; }
.header-menu--primary li { max-width: 100%; overflow-wrap: anywhere; }
/* Bridge the gap between an open link and its panel so the pointer never leaves the item on the way down. */
.header-menu--primary > .menu-item-has-children > :is(a, .header-menu__button) { position: relative; }
.menu-item.is-open > :is(a, .header-menu__button)::after { content: ""; position: absolute; top: 100%; left: -35px; right: -35px; height: 40px; }
.site-header.has-dropdown-open .site-header__brand { pointer-events: none; }
.site-header [hidden] { display: none !important; }

/* Desktop dropdown — Figma 524:295 "Secondary nav": a viewport-wide white panel under the header with a caret
   pointing up at the open link; the content stays in the 1440px column. */
.mega-menu { --caret-x: 50%; position: relative; color: #001e50; background: #fff; box-shadow: 0 12px 24px rgb(0 0 0 / 18%); text-align: left; }
.is-enhanced .mega-menu { position: absolute; top: 100%; left: 0; right: 0; z-index: 1; visibility: hidden; opacity: 0; clip-path: inset(-10px 0 100% 0); transition: clip-path .22s ease-in, opacity .18s ease-in, visibility 0s linear .22s; }
.is-enhanced .mega-menu :is(.mega-menu__inner, .mega-menu__bar) { transform: translateY(-24px); transition: transform .22s ease-in; }
.is-enhanced .menu-item.is-open > .mega-menu { visibility: visible; opacity: 1; clip-path: inset(-10px 0 -40px 0); transition: clip-path .42s cubic-bezier(.2, .7, .2, 1), opacity .25s ease-out, visibility 0s; }
.is-enhanced .menu-item.is-open > .mega-menu :is(.mega-menu__inner, .mega-menu__bar) { transform: none; transition: transform .42s cubic-bezier(.2, .7, .2, 1); }
@media (prefers-reduced-motion: reduce) {
  .is-enhanced .mega-menu, .is-enhanced .mega-menu :is(.mega-menu__inner, .mega-menu__bar) { transition: none; }
}
.is-enhanced .mega-menu::before { content: ""; position: absolute; top: -10px; left: var(--caret-x); width: 0; height: 0; transform: translateX(-50%); border-style: solid; border-width: 0 9px 10px; border-color: transparent transparent #fff; }
.mega-menu__inner { max-width: 1440px; margin-inline: auto; padding: 46px 119px 39px; }
.mega-menu__eyebrow { margin: 0; color: #062b76; font-size: 32px; font-weight: 700; line-height: 60px; letter-spacing: 4.16px; text-transform: uppercase; }
.mega-menu__title { margin: -3px 0 0; color: #062b76; font-family: "spirits-sharp", "Spirits Sharp", "Antonio", "Arial Narrow", sans-serif; font-size: 62px; font-weight: 400; line-height: .74; text-transform: uppercase; }
.mega-menu__title a { color: inherit; }
.mega-menu { --tile: 148px; }
.mega-menu__groups { display: flex; flex-wrap: wrap; align-items: flex-start; }
.mega-menu--row .mega-menu__groups { flex-direction: column; align-items: stretch; }
.mega-menu__group { margin-top: 49px; min-width: 0; }
.mega-menu--row .mega-menu__group + .mega-menu__group { margin-top: 40px; }
.mega-menu__group-title { margin: 0 0 24px; font-size: 28px; font-weight: 500; line-height: 24px; letter-spacing: .56px; }
.mega-menu__list { margin: 0; padding: 0; list-style: none; columns: 3; column-gap: 40px; }
.mega-menu__list--tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 28px; margin-inline: -24px; columns: auto; }
.mega-menu__item { break-inside: avoid; padding-bottom: 22px; font-size: 20px; font-weight: 500; line-height: 26px; letter-spacing: .4px; }
.mega-menu__list--tiles .mega-menu__item { padding: 0; width: var(--tile); text-align: center; line-height: 24px; }
.mega-menu .mega-menu__tile { display: block; color: inherit; }
.mega-menu__tile-image { display: flex; align-items: flex-end; justify-content: center; width: var(--tile); height: var(--tile); margin: 0 auto 18px; }
/* Grouped columns (Figma 524:403): headings side by side, tiles left-aligned five across, double rule between groups. */
.mega-menu--columns .mega-menu__group { --tiles: 5; margin-top: 25px; }
.mega-menu--columns .mega-menu__group--tiles-1 { --tiles: 1; }
.mega-menu--columns .mega-menu__group--tiles-2 { --tiles: 2; }
.mega-menu--columns .mega-menu__group--tiles-3 { --tiles: 3; }
.mega-menu--columns .mega-menu__group--tiles-4 { --tiles: 4; }
.mega-menu--columns .mega-menu__group-title { margin-bottom: 29px; }
.mega-menu--columns .mega-menu__groups { align-items: stretch; }
.mega-menu--columns .mega-menu__group + .mega-menu__group { position: relative; margin-left: 80px; padding-left: 88px; }
.mega-menu--columns .mega-menu__group + .mega-menu__group::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 7px; border-left: 1px solid rgb(0 30 80 / 20%); border-right: 1px solid rgb(0 30 80 / 20%); }
.mega-menu--columns .mega-menu__list { columns: auto; }
.mega-menu--columns .mega-menu__list--tiles { display: grid; grid-template-columns: repeat(var(--tiles), var(--tile)); justify-content: start; gap: 32px 28px; margin-inline: 0; }
.mega-menu--columns .mega-menu__tile-image { margin-bottom: 6px; }
.mega-menu--columns .mega-menu__inner { padding-bottom: 23px; }
.mega-menu__image { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; }
.mega-menu__tile-label { display: block; }
.mega-menu__bar { color: #fff; background: #ac242a; }
.mega-menu__bar-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 40px; max-width: 1440px; min-height: 76px; margin-inline: auto; padding: 16px 106px 16px 122px; }
.mega-menu__bar-side { display: flex; align-items: center; gap: 12px; }
.mega-menu__bar-side--right { margin-left: auto; gap: 25px; }
.mega-menu__bar-text { font-size: 18px; font-weight: 700; line-height: 24px; letter-spacing: 2.7px; text-transform: uppercase; }
.mega-menu .mega-menu__bar-button { display: inline-flex; align-items: center; justify-content: center; min-width: 139px; height: 44px; padding: 2px 40px 0; border: 1px solid #fff; border-radius: 10px; color: #fff; font-size: 16px; font-weight: 700; line-height: 1; letter-spacing: 2.4px; text-transform: uppercase; }
.site-header .mega-menu__bar-button:hover { text-decoration: none; background: #fff; color: #ac242a; }
.header-search { position: relative; }
.header-search summary { display: flex; align-items: center; gap: 7px; list-style: none; cursor: pointer; }
.header-search summary::-webkit-details-marker { display: none; }
.header-search summary img { width: 15px; height: 15px; }
.header-search__panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 4; width: 340px; padding: 20px; background: #062b76; box-shadow: 0 8px 16px rgb(0 0 0 / 15%); }
.header-search .search-form { display: flex; flex-wrap: wrap; gap: 12px; }
.header-search .search-form label { flex: 1 1 170px; min-width: 0; }
.header-search .search-field { width: 100%; color: #202124; background: #fff; border: 1px solid #fff; border-radius: 0; }
.header-search .search-submit { color: #062b76; background: #fff; border: 1px solid #fff; font-weight: 700; }
.site-header__toggle,
.site-header__search-toggle,
.mobile-search,
.mobile-menu { display: none; }

@media (min-width: 1200px) and (max-width: 1439px) {
  .site-header__inner { padding-inline: 40px; }
  .mega-menu__inner { padding-inline: 40px; }
  .mega-menu { --tile: 128px; }
  .mega-menu--columns .mega-menu__group + .mega-menu__group { margin-left: 40px; padding-left: 47px; }
  .mega-menu__bar-inner { padding-inline: 40px; }
  .header-menu--primary { column-gap: 32px; }
  .header-menu--utility { column-gap: 20px; }
  .site-header__utility { column-gap: 20px; }
}

@media (max-width: 1199px) {
  /* Closed bar — Figma 633:294: 75px navy bar, search left, centered logo, hamburger right. */
  .site-header { --mobile-header-height: 75px; }
  .site-header__inner { min-height: var(--mobile-header-height); padding: 0 26px; }
  .site-header__brand { left: 50%; transform: translateX(-50%); top: 0; }
  .site-header__brand img { width: 286px; height: 147.31px; }
  .site-header__navigation { display: none; }
  .site-header__search-toggle,
  .site-header__toggle { position: absolute; z-index: 3; top: 20px; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; color: rgb(255 255 255 / 75%); background: transparent; }
  .site-header__search-toggle { left: 18px; }
  .site-header__search-toggle img { width: 28px; height: 28px; filter: brightness(0) invert(1) opacity(.85); }
  .site-header__toggle { right: 20px; }
  .site-header__toggle-lines { position: relative; display: block; width: 31px; height: 23px; }
  .site-header__toggle-lines::before,
  .site-header__toggle-lines::after,
  .site-header__toggle-lines span { position: absolute; left: 0; width: 31px; height: 2px; background: currentColor; content: ""; transition: transform .25s ease, opacity .25s ease, top .25s ease; }
  .site-header__toggle-lines::before { top: 0; }
  .site-header__toggle-lines span { top: 11px; }
  .site-header__toggle-lines::after { top: 21px; }
  .site-header.is-menu-open .site-header__toggle-lines::before { top: 10.5px; transform: rotate(45deg); }
  .site-header.is-menu-open .site-header__toggle-lines span { opacity: 0; }
  .site-header.is-menu-open .site-header__toggle-lines::after { top: 10.5px; transform: rotate(-45deg); }

  /* Mobile search: a bar that drops below the header. */
  .mobile-search { position: absolute; top: 100%; left: 0; right: 0; z-index: 1; padding: 16px 26px; background: #062b76; box-shadow: 0 8px 16px rgb(0 0 0 / 15%); }
  .mobile-search { display: block; }
  .mobile-search[hidden] { display: none; }
  .mobile-search .search-form { display: flex; gap: 12px; }
  .mobile-search .search-form label { flex: 1 1 auto; min-width: 0; }
  .mobile-search .search-field { width: 100%; color: #202124; background: #fff; border: 1px solid #fff; border-radius: 0; }
  .mobile-search .search-submit { color: #062b76; background: #fff; border: 1px solid #fff; font-weight: 700; }

  /* Open menu — Figma 582:1874. Fills the screen below the bar. */
  /* Sits beneath the logo (z-index 2) so the white diamond hangs over the open menu. */
  .mobile-menu { position: fixed; top: calc(var(--mobile-header-height) + var(--dc-admin-bar-height, 0px)); left: 0; right: 0; bottom: 0; z-index: 1; overflow: hidden; color: #fff; background: #062b76; font-family: "Brandon Grotesque", "Brandon Grotesque Web", "brandon-grotesque", "Footer Brandon Fallback", Arial, sans-serif; }
  .mobile-menu { display: block; }
  .mobile-menu[hidden] { display: none; }
  .mobile-menu__root,
  .mobile-menu__section { position: absolute; inset: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .mobile-menu__root { padding-top: 106px; }
  .mobile-menu--has-cta .mobile-menu__root,
  .mobile-menu--has-cta .mobile-menu__section { padding-bottom: 116px; }
  .mobile-menu a { color: inherit; text-decoration: none; }
  .mobile-menu :is(a, button):focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
  .mobile-menu__list,
  .mobile-menu__global-list,
  .mobile-menu__group-list { margin: 0; padding: 0; list-style: none; }
  .mobile-menu__list { display: flex; flex-direction: column; gap: 44px; padding: 0 34px 0 31px; }
  .mobile-menu__item { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 34px; }
  .mobile-menu__link { display: inline-block; padding: 0; border: 0; background: transparent; color: #fff; font: inherit; font-size: 22px; font-weight: 700; line-height: 34px; letter-spacing: 2.42px; text-transform: uppercase; text-align: left; }
  .mobile-menu__item.is-current .mobile-menu__link { box-shadow: inset 0 -2px 0 #fff; padding-bottom: 2px; line-height: 32px; }
  .mobile-menu__more { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -5px -13px -5px 0; padding: 0; border: 0; background: transparent; }
  .mobile-menu__more img { width: 18px; height: 14px; transform: rotate(90deg); }

  .mobile-menu__global { margin-top: auto; padding: 4px 26px 32px; }
  .mobile-menu__global::before { content: ""; display: block; height: 4px; margin-bottom: 34px; border-top: .5px solid rgb(255 255 255 / 75%); border-bottom: .5px solid rgb(255 255 255 / 75%); }
  .mobile-menu__global-list { display: flex; flex-direction: column; gap: 11px; text-align: center; }
  .mobile-menu__global-list a { display: inline-block; padding: 2px 8px; color: rgb(255 255 255 / 75%); font-size: 16px; font-weight: 700; line-height: 34px; letter-spacing: 1.76px; text-transform: uppercase; }

  /* Red "Where to buy" bar fixed to the bottom of the menu, above every panel. */
  .mobile-menu__cta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 116px; padding: 30px 23px 30px 35px; color: #fff; background: #ac242a; }
  .mobile-menu__cta-eyebrow { font-size: 18px; font-weight: 700; line-height: 24px; letter-spacing: 2.7px; text-transform: uppercase; }
  .mobile-menu__cta-button { display: inline-flex; align-items: center; justify-content: center; min-width: 206px; min-height: 56px; padding: 0 15px; border: 2px solid #fff; border-radius: 10px; font-size: 20px; font-weight: 900; line-height: 16px; letter-spacing: 1px; text-transform: capitalize; }
  .mobile-menu__cta-button:focus-visible { outline-offset: 3px; }
  @media (max-width: 379px) {
    .mobile-menu__cta { padding-inline: 20px; }
    .mobile-menu__cta-button { min-width: 0; }
  }

  /* Section panel — Figma 582:1916: navy header with back link, white body with "Explore <section>". */
  .mobile-menu__section { color: #001e50; background: #fff; }
  .mobile-menu__section[hidden] { display: none; }
  .mobile-menu__section-head { flex: 0 0 auto; padding: 106px 31px 9px; color: #fff; background: #062b76; }
  .mobile-menu__back { display: inline-flex; align-items: center; gap: 18px; margin-left: -8px; padding: 0 8px; border: 0; background: transparent; color: #fff; font: inherit; font-size: 22px; font-weight: 700; line-height: 34px; letter-spacing: 2.42px; text-transform: uppercase; }
  .mobile-menu__back img { width: 18px; height: 14px; transform: rotate(-90deg); }
  .mobile-menu__section-body { flex: 1 0 auto; padding: 20px 26px 40px; }
  .mobile-menu__eyebrow { margin: 0; color: #062b76; font-size: 27.4px; font-weight: 700; line-height: 1.5; letter-spacing: 3.56px; text-transform: uppercase; }
  .mobile-menu__title { margin: 8px 0 32px; color: #062b76; font-family: "spirits-sharp", "Spirits Sharp", "Antonio", "Arial Narrow", sans-serif; font-size: 53px; font-weight: 400; line-height: .74; text-transform: uppercase; }
  .mobile-menu__title a { color: inherit; }
  .mobile-menu__group + .mobile-menu__group { margin-top: 42px; }
  .mobile-menu__group-title { margin: 0 0 25px; font-size: 28px; font-weight: 500; line-height: 24px; letter-spacing: .56px; }
  .mobile-menu__group-list { display: flex; flex-direction: column; gap: 22px; padding-left: 22px; }
  .mobile-menu__group-list a { display: inline-block; font-size: 20px; font-weight: 500; line-height: 26px; letter-spacing: .4px; }
  body.is-mobile-menu-open { overflow: hidden; }
}

/* Scroll-in reveals (assets/js/reveal.js). Only active once `dc-motion` is on <html> (added before first paint by an
   inline script in functions.php, never for visitors who prefer reduced motion), so nothing is hidden without JavaScript. The script removes the
   `dc-reveal` classes after each element eases in, so hover and active styles are untouched afterwards. */
html.dc-motion .dc-reveal { opacity: 0; transform: translate3d(0, 28px, 0); will-change: opacity, transform; }
html.dc-motion .dc-reveal--fade { transform: none; }
html.dc-motion .dc-reveal--left { transform: translate3d(-40px, 0, 0); }
html.dc-motion .dc-reveal--right { transform: translate3d(40px, 0, 0); }
html.dc-motion .dc-reveal--scale { transform: scale(.94); }
html.dc-motion .dc-reveal--zoom { transform: scale(1.08); }
html.dc-motion .dc-reveal.is-revealed {
  opacity: 1;
  transform: none;
  transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--reveal-delay, 0ms) + var(--reveal-i, 0) * var(--reveal-step, 110ms));
}
html.dc-motion .dc-reveal--zoom.is-revealed { transition-duration: 1.6s, 1.6s; }