/** Shopify CDN: Minification failed

Line 198:59 Unexpected ".5"

**/
/* Flexible area: match Rich text heading sizes on mobile/desktop without inline styles */
:root {
  --flex-area-heading-mobile: 1.35rem; /* tune to match rich-text at 100% */
  --flex-area-heading-desktop: 2.25rem; /* tune to match rich-text at 100% */
}

.section-flexible-area .x-rich-text-header .h2 {
  font-size: var(--flex-area-heading-mobile);
}
@media (min-width: 768px) {
  .section-flexible-area .x-rich-text-header .h2 {
    font-size: var(--flex-area-heading-desktop);
  }
}
/* Custom header icon styling (Aromatico) */
:root {
  --mantine-scale: 1;
  --mantine-radius-xl: calc(2rem * var(--mantine-scale));
  --mantine-color-cyan-6: #2d626c;
  --mantine-color-gray-1: #f5f2f0;
  --mantine-primary-color-filled: var(--mantine-color-cyan-filled);
  --mantine-color-cyan-outline: var(--mantine-color-cyan-6);
  --mantine-color-cyan-filled: var(--mantine-color-cyan-6);
  --mantine-color-text: var(--mantine-color-black);
  --mantine-color-black: #000;
  --mantine-color-cyan-outline-hover: rgba(45, 98, 108, 0.05);
  --mantine-color-gray-2: #f5f2f0;
  --mantine-spacing-xs: calc(0.625rem * var(--mantine-scale));
  --mantine-spacing-md: calc(1rem * var(--mantine-scale));
  --mantine-radius-md: calc(0.5rem * var(--mantine-scale));
  --group-gap: var(--mantine-spacing-md);
  --popover-border-color: var(--mantine-color-gray-2);
  --colors-button: --mantine-color-cyan-6;

  --input-bg: var(--mantine-color-gray-1);
  --ai-bg: transparent;
  --ai-hover: var(--mantine-color-cyan-outline-hover);
  --ai-color: var(--mantine-color-cyan-outline);
  --ai-bd: 2px solid var(--mantine-color-cyan-outline);
  --ai-radius: var(--mantine-radius-xl);
  --ai-size: 2.5rem; /* uniform circle size for header icons (keeps previous visual size) */
  --ai-icon-size: 1rem; /* inner SVG size (keeps glyphs similar to previous) */

  /* Header search (Aromatico look) */
  --search-border-color: var(--mantine-color-cyan-6);
  --search-hover-bg: var(--mantine-color-cyan-outline-hover);
  --search-height: 48px;
  --search-placeholder-color: #6b6b6b;
  --search-width-desktop: 320px;
  /* Global page gutter (responsive) */
  --site-gutter: 16px;
}

/* Use 20px gutters on desktop to match theme .page-width default (1.25rem) */
@media (min-width: 1024px) {
  :root {
    --site-gutter: 20px;
  }
}

/* fix to make the header tags larger in mobile in relative to the body text */
@media (max-width: 1023px) {
  :root {
    --h2-font-size-mobile: 1.7rem !important; /* adjust per level as needed */
    --h3-font-size-mobile: 1.4rem !important;
  }
}

p a {
  text-decoration: underline;
}

/* Paragraph links that use theme underline animation: remove native underline */
p.effect-inline a,
p .base-link a {
  text-decoration: none;
}
p.effect-inline a:hover,
p .base-link a:hover {
  text-decoration: none;
}

.ai-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ai-bg);
  color: var(--ai-color);
  border: var(--ai-bd);
  border-radius: var(--ai-radius);
  transition: background-color 0.2s ease, color 0.2s ease,
    border-color 0.2s ease;
}

.ai-icon:hover {
  background: var(--ai-hover);
}

/* Mobile header: hamburger trigger circle (scoped to header and sticky header) */
#shopify-section-header #mobile-navigation,
#sticky-header #mobile-navigation {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--ai-size) !important;
  height: var(--ai-size) !important;
  padding: 0 !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-color: var(--ai-color) !important;
  border-radius: 9999px !important; /* always a perfect circle */
  color: var(--ai-color) !important;
  background: var(--ai-bg) !important;
}

#shopify-section-header #mobile-navigation:hover,
#sticky-header #mobile-navigation:hover {
  background: var(--ai-hover) !important;
}

#shopify-section-header #mobile-navigation .ai-icon,
#sticky-header #mobile-navigation .ai-icon {
  /* neutralize inner wrapper so the container provides the circle */
  display: contents;
  padding: 0;
  border: 0;
  background: transparent;
}

#shopify-section-header #mobile-navigation .ai-icon svg,
#sticky-header #mobile-navigation .ai-icon svg {
  width: var(--ai-icon-size);
  height: var(--ai-icon-size);
}

/* Keep all header icon SVGs a consistent size */
#shopify-section-header .ai-icon svg,
#sticky-header .ai-icon svg {
  width: var(--ai-icon-size) !important;
  height: var(--ai-icon-size) !important;
}

/* Ensure account and cart icon circles are perfect and consistent */
#shopify-section-header .ai-icon,
#sticky-header .ai-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--ai-size) !important;
  height: var(--ai-size) !important;
  padding: 0 !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-color: var(--ai-color) !important;
  border-radius: 9999px !important;
}

#shopify-section-header [aria-controls="LanguageList"],
#sticky-header [aria-controls="LanguageList"] {
  color: var(--ai-color) !important;
}
#shopify-section-header [aria-controls="LanguageList"]:hover,
#sticky-header [aria-controls="LanguageList"]:hover {
  color: var(--ai-color) !important;
}

#shopify-section-header #selector-social .toolbar-button,
#sticky-header #selector-social .toolbar-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem !important;
  border: 2px solid var(--ai-color) !important;
  border-radius: var(--ai-radius) !important;
  color: var(--ai-color) !important;
  background: transparent !important;
  margin-left: 1rem !important; /* increase spacing from previous icon */
}
#shopify-section-header #selector-social .toolbar-button:hover,
#sticky-header #selector-social .toolbar-button:hover {
  background: var(--ai-hover) !important;
}
#shopify-section-header #selector-social .toolbar-button .tabler-icon,
#shopify-section-header #selector-social .toolbar-button svg,
#sticky-header #selector-social .toolbar-button .tabler-icon,
#sticky-header #selector-social .toolbar-button svg {
  stroke: currentColor;
}

/* Hide the language dropdown caret in header for consistency with footer */
#shopify-section-header [aria-controls="LanguageList"] .icon-caret,
#sticky-header [aria-controls="LanguageList"] .icon-caret,
#shopify-section-header [aria-controls="LanguageList"] .w-2.5,
#sticky-header [aria-controls="LanguageList"] .w-2.5 {
  display: none !important;
}

/* Fallback: hide second span (caret wrapper) if class selectors change */
#shopify-section-header [aria-controls="LanguageList"] > span + span,
#sticky-header [aria-controls="LanguageList"] > span + span {
  display: none !important;
}

/* Ensure the selector group itself has breathing room next to icons */
#shopify-section-header #selector-social,
#sticky-header #selector-social {
  gap: var(--mantine-spacing-md) !important;
}

.header__inline-menu li > .tree-menu-item,
.header__inline-menu li > .simple_menu_item {
  --button-padding-x: var(--mantine-spacing-xs);
  --button-radius: var(--mantine-radius-xl);
  border-radius: var(--button-radius);
  padding-left: var(--button-padding-x);
  padding-right: var(--button-padding-x);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.header__inline-menu li:hover > .tree-menu-item,
.header__inline-menu li.is-focus > .tree-menu-item,
.header__inline-menu li:focus-within > .tree-menu-item,
.header__inline-menu li.clicked > .tree-menu-item,
.header__inline-menu li:hover > .simple_menu_item,
.header__inline-menu li.is-focus > .simple_menu_item,
.header__inline-menu li:focus-within > .simple_menu_item,
.header__inline-menu li.clicked > .simple_menu_item {
  background-color: var(--mantine-color-gray-2);
}

/* Hide caret icon for items with dropdown */
.header__inline-menu li.has-dropdown .x-icon-caret {
  display: none;
}

/* Simple menu dropdown items: full-width links with padding, radius, and hover bg */
.mega-menu-horizontal .mega-nav > li > div > a.nav-link,
.mega-menu-horizontal .mega-nav ul.list-unstyled > li > span > a.nav-link {
  --button-padding-x: var(--mantine-spacing-xs);
  --button-radius: var(--mantine-radius-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-radius: var(--button-radius);
  padding-left: var(--button-padding-x);
  padding-right: var(--button-padding-x);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.mega-menu-horizontal .mega-nav > li > div > a.nav-link:hover,
.mega-menu-horizontal .mega-nav > li > div > a.nav-link:focus,
.mega-menu-horizontal .mega-nav ul.list-unstyled > li > span > a.nav-link:hover,
.mega-menu-horizontal
  .mega-nav
  ul.list-unstyled
  > li
  > span
  > a.nav-link:focus {
  background-color: transparent;
}

/* Reset nested simple menu list items: no bg/padding on sub-items, align content to top */
.mega-menu-horizontal .mega-nav ul.list-unstyled > li {
  display: flex;
  align-items: flex-start;
  padding-left: 0;
  padding-right: 0;
  border-radius: 0;
}
.mega-menu-horizontal .mega-nav ul.list-unstyled > li:hover,
.mega-menu-horizontal .mega-nav ul.list-unstyled > li:focus-within {
  background-color: transparent;
}

/* Apply background/padding to the simple menu columns (top-level li) */
.mega-menu-horizontal .mega-nav > li {
  --button-padding-x: var(--mantine-spacing-xs);
  --button-radius: var(--mantine-radius-xl);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: var(--mantine-spacing-md);
  flex: 1 1 0%;
  min-width: 0;
  width: auto !important;
  border-radius: var(--mantine-radius-md);
  background-color: var(--mantine-color-gray-2);
  padding-top: var(--mantine-spacing-xs);
  padding-left: var(--button-padding-x);
  padding-right: var(--button-padding-x);
  padding-bottom: var(--mantine-spacing-xs);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.mega-menu-horizontal .mega-nav > li:hover,
.mega-menu-horizontal .mega-nav > li:focus-within {
  background-color: var(--mantine-color-gray-2) !important;
}

/* Columns container: equally split columns with a configurable gap */
.mega-menu-horizontal .mega-nav {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  gap: var(--group-gap) !important;
}

.mega-menu-horizontal {
  border-top: 1px solid var(--popover-border-color);
}

/* Remove anchor-level padding/radius in simple menu so column owns spacing */
.mega-menu-horizontal .mega-nav > li > div > a.nav-link,
.mega-menu-horizontal .mega-nav ul.list-unstyled > li > span > a.nav-link {
  padding-left: 0;
  padding-right: 0;
  border-radius: 0;
}

/* Multi-column layout for Roasters & Brands megamenu (stable key) */
.split-column-mega-menu .mega-menu-horizontal .mega-nav > li > ul {
  column-count: 4;
  column-gap: var(--group-gap);
  column-fill: balance;
}

.split-column-mega-menu .mega-menu-horizontal .mega-nav > li > ul > li {
  break-inside: avoid;
  break-inside: avoid-column;
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

/* mobile navigation */
#mobile-navigation * {
  cursor: pointer;
  font-size: 100%;
}

#mobile-navigation .x-block-mobile-nav-close {
  min-height: 48px;
}

#mobile-navigation .x-block-mobile-nav-close .font-menu-level-2 {
  display: none;
}

/* Footer: social icons + language selector like aromatico.de */
#section-footer #selector-social {
  gap: var(--mantine-spacing-md);
  font-size: 0.8em;
}
#section-footer #selector-social .toolbar-button span,
#section-footer #selector-social .social-list a {
  font-size: 0.8em !important; /* override rem/utility font sizes */
  line-height: 1.2;
}
/* Make language selector button a bit more compact */
#section-footer #selector-social .toolbar-button {
  font-size: 0.88em !important; /* 10% larger than 0.8em */
  padding: 0.4125rem 0.825rem; /* 10% larger than 0.375/0.75 */
}
/* Shrink social icon buttons to visually reduce the row size */
#section-footer .social-list a {
  width: 2.25rem !important; /* ~36px */
  height: 2.25rem !important;
  padding: 0.375rem !important;
}
#section-footer .social-list a svg {
  width: 1.125rem !important; /* ~18px */
  height: 1.125rem !important;
}
#section-footer .social-list a {
  border-width: 2px !important;
  border-color: var(--ai-color) !important;
  color: var(--ai-color) !important;
  border-radius: var(--ai-radius) !important;
}
#section-footer .social-list a:hover {
  background: var(--ai-hover) !important;
}
#section-footer .toolbar-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  border: 2px solid var(--ai-color);
  border-radius: var(--ai-radius);
  color: var(--ai-color);
}
#section-footer .toolbar-button svg {
  display: none;
}
#section-footer .toolbar-button:hover {
  background: var(--ai-hover);
}
#section-footer .toolbar-button .tabler-icon,
#section-footer .toolbar-button svg {
  stroke: currentColor;
}

/* Footer: make legal menu and copyright smaller */
#section-footer .footer-legal-links a,
#section-footer .footer-copyright {
  font-size: 0.67em;
}

@media (min-width: 768px) {
  .x-section-collection-banner .collection-page-container > div {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .x-section-collection-banner .collection-title {
    max-width: calc(var(--page-width) + 40px);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--site-gutter);
    padding-right: var(--site-gutter);
  }
  .x-section-collection-banner .collection-page-description .rte {
    max-width: calc(var(--page-width) + 40px);
    margin-left: auto;
    margin-right: auto;
    /* padding-left: var(--site-gutter);
    padding-right: var(--site-gutter); */
    padding-left: 10px;
    padding-right: 10px;
  }
  .x-section-product-grid .full-width {
    max-width: calc(var(--page-width) + 40px);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--site-gutter);
    padding-right: var(--site-gutter);
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .x-section-collection-banner .collection-page-description {
    max-width: calc(var(--page-width) + 40px);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--site-gutter);
    padding-right: var(--site-gutter);
  }
  .x-section-collection-banner .collection-page-description .rte,
  .x-section-collection-banner .collection-page-description .rte > .rte,
  .x-section-collection-banner .collection-page-description .pl-5,
  .x-section-collection-banner .collection-page-description .pr-5 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (min-width: 1024px) {
  .x-section-collection-banner .collection-page-description {
    max-width: calc(var(--page-width) + 40px);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--site-gutter);
    padding-right: var(--site-gutter);
  }
  .collection-page-description .rte {
    max-width: calc(var(--page-width) + 40px);
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }
  .x-section-collection-banner .collection-page-container > div {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--site-gutter);
    padding-right: var(--site-gutter);
  }
  .collection-page-container .collection-title {
    max-width: calc(var(--page-width) + 40px);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--site-gutter);
    padding-right: var(--site-gutter);
  }
}

/* Search page overrides: hide the on-page search form and left-align heading */
.search-page [x-data^="xModalSearch("] {
  display: none !important;
}
.search-page h1.h2 {
  text-align: left !important;
}

/* Stronger scoping to ensure rules win over theme utilities */
/* 1) First level: remove underline and animation entirely */
#shopify-section-header .sub-menu > span > a.nav-link,
#shopify-section-header .sub-menu > span > a.nav-link.effect-inline,
#sticky-header .sub-menu > span > a.nav-link,
#sticky-header .sub-menu > span > a.nav-link.effect-inline {
  border-bottom: 0 !important;
}
#shopify-section-header .sub-menu > span > a.nav-link::after,
#shopify-section-header .sub-menu > span > a.nav-link.effect-inline::after,
#sticky-header .sub-menu > span > a.nav-link::after,
#sticky-header .sub-menu > span > a.nav-link.effect-inline::after,
#shopify-section-header .sub-menu > span > a.nav-link:hover::after,
#shopify-section-header
  .sub-menu
  > span
  > a.nav-link.effect-inline:hover::after,
#sticky-header .sub-menu > span > a.nav-link:hover::after,
#sticky-header .sub-menu > span > a.nav-link.effect-inline:hover::after {
  display: none !important;
  transform: none !important;
}
#shopify-section-header .sub-menu > span > a.nav-link:hover,
#shopify-section-header .sub-menu > span > a.nav-link.effect-inline:hover,
#sticky-header .sub-menu > span > a.nav-link:hover,
#sticky-header .sub-menu > span > a.nav-link.effect-inline:hover {
  animation: none !important;
}
/* Target actual first-level mega menu link structure to remove underline */
#shopify-section-header
  .mega-menu-horizontal
  .mega-nav
  > li
  > .sub-menu
  a.nav-link::after,
#sticky-header
  .mega-menu-horizontal
  .mega-nav
  > li
  > .sub-menu
  a.nav-link::after {
  display: none !important;
}
/* Also hard-disable any underline coming from gradients/borders on first level */
#shopify-section-header .sub-menu > span > a.nav-link,
#sticky-header .sub-menu > span > a.nav-link,
#shopify-section-header .sub-menu > span > p.nav-link,
#sticky-header .sub-menu > span > p.nav-link {
  text-decoration: none !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  border-bottom: 0 !important;
}
/* Ensure pseudo-elements for first level never render */
#shopify-section-header .sub-menu > span > p.nav-link::after,
#sticky-header .sub-menu > span > p.nav-link::after {
  display: none !important;
  content: none !important;
}

/* 2) Sub-level: limit underline to text width */
#shopify-section-header .sub-menu-container a.nav-link,
#shopify-section-header .sub-menu-toggle .nav-link,
#shopify-section-header .list-unstyled a.nav-link,
#sticky-header .sub-menu-container a.nav-link,
#sticky-header .sub-menu-toggle .nav-link,
#sticky-header .list-unstyled a.nav-link {
  display: inline-flex !important;
  align-items: center;
  width: fit-content !important;
  width: -moz-fit-content !important; /* Firefox */
  width: -webkit-fit-content !important; /* Safari */
  max-width: 100%;
  flex: none !important;
  position: relative;
}
#shopify-section-header .sub-menu-container a.nav-link::after,
#shopify-section-header .sub-menu-toggle .nav-link::after,
#shopify-section-header .list-unstyled a.nav-link::after,
#sticky-header .sub-menu-container a.nav-link::after,
#sticky-header .sub-menu-toggle .nav-link::after,
#sticky-header .list-unstyled a.nav-link::after {
  content: "" !important;
  display: block !important;
  right: auto !important;
  left: 0 !important;
  width: 100% !important;
  border-bottom-width: 2px !important;
}

/* Collection listing */
.collection-title {
  padding-top: 0;
  padding-bottom: 0;
}

.section-collection-subnav a {
  text-decoration: none;
}

.section-collection-subnav .collection-subnav .pill {
  border: 2px solid var(--mantine-color-cyan-6);
  color: var(--mantine-color-cyan-6);
  background: transparent;
  font-weight: 600;
  transition: background-color 0.2s ease, color 0.2s ease,
    border-color 0.2s ease;
}
.section-collection-subnav .collection-subnav .pill:hover,
.section-collection-subnav .collection-subnav .pill:focus {
  background: var(--mantine-color-cyan-outline-hover);
}
.section-collection-subnav .collection-subnav .pill.is-active {
  background: var(--mantine-color-cyan-6);
  color: #fff;
  border-color: var(--mantine-color-cyan-6);
}

/* Ensure sub-navigation aligns with page gutters on desktop */
@media (min-width: 1024px) {
  /* Unify desktop width for collection sections using .page-width */
  .x-section-collection-banner .page-width,
  .x-section-product-grid .page-width,
  .section-collection-subnav .page-width {
    max-width: calc(var(--page-width) + 40px);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--site-gutter);
    padding-right: var(--site-gutter);
  }
  .section-collection-subnav .full-width nav.collection-subnav > div {
    max-width: calc(var(--page-width) + 40px);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--site-gutter);
    padding-right: var(--site-gutter);
  }
  .section-collection-subnav .x-pgw.page-width {
    max-width: calc(var(--page-width) + 40px);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--site-gutter);
    padding-right: var(--site-gutter);
  }
}

/* Normalize subnav gutters on tablet widths */
@media (min-width: 768px) and (max-width: 1023px) {
  .section-collection-subnav .x-pgw.page-width {
    padding-left: var(--site-gutter) !important;
    padding-right: var(--site-gutter) !important;
  }
}

@media (min-width: 1024px) and (max-width: 1339px) {
  .section-collection-subnav > div > .full-width,
  .x-section-product-grid > div.full-width,
  .x-section-product-grid #header-filter,
  .x-section-product-grid #header-filter > div {
    max-width: calc(var(--page-width) + 40px);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--site-gutter) !important;
    padding-right: var(--site-gutter) !important;
  }
  .section-collection-subnav .x-pgw.page-width {
    padding-left: var(--site-gutter) !important;
    padding-right: var(--site-gutter) !important;
  }
}

@media (min-width: 1340px) {
  .section-collection-subnav .x-pgw.page-width {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Collection listing - filter */
#header-filter > div {
  border-color: var(--mantine-color-cyan-6);
  border-width: 2px;
  color: var(--mantine-color-cyan-6);
}

#FacetFiltersForm input:checked {
  background-color: var(--mantine-color-cyan-6);
}

.color-filter {
  box-shadow: 0 0 0 1px #fff, 0 0 0 2px var(--mantine-color-cyan-6);
}

/* removed zero-padding neutralizer for .full-width wrappers to allow gutters */

/* Desktop header top search bar */
.x-container-header-search .border {
  border-width: 0;
  border-color: var(--search-border-color) !important;
  border-radius: var(--mantine-radius-xl) !important;
  background: var(--input-bg);
  color: var(--search-border-color);
  transition: background-color 0.2s ease, border-color 0.2s ease,
    box-shadow 0.2s ease;
  /* min-height: var(--search-height); */
}

.x-container-header-search .border:hover,
.x-container-header-search .border:focus-within {
  background: var(--search-hover-bg);
}

.x-container-header-search .input-search {
  color: var(--search-border-color);
  caret-color: var(--search-border-color);
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}

.x-container-header-search .input-search::placeholder {
  color: var(--search-placeholder-color);
  opacity: 0.7;
}

.x-container-header-search .btn-search {
  color: var(--search-border-color);
}

/* Align header search to the right and make it narrow on desktop */
@media (min-width: 1024px) {
  /* Make search (middle) column wider and icons (right) column narrower */
  #sticky-header header {
    grid-template-columns: 2fr 7fr 1.25fr !important;
  }
  /* Reduce overall header column gap to bring search closer to account */
  .header.gap-x-2 {
    column-gap: 0.125rem !important;
  }
  /* Hide the product type dropdown in header bar */
  .x-container-header-search .search-categories {
    display: none !important;
  }
  /* Ensure the input form takes full width when dropdown is hidden */
  .x-container-header-search [id^="header-form-search-"] {
    width: 100% !important;
  }
  .x-container-header-search {
    justify-content: flex-end !important;
    margin-right: 0 !important;
  }
  .header-icon-account {
    margin-left: 0 !important;
  }
  /* Prevent predictive wrapper from stretching full width on desktop */
  .x-container-header-search [data-loading-text] {
    width: auto;
    max-width: none;
  }
  .x-container-header-search .border {
    width: var(--search-width-desktop);
    margin-left: auto;
    margin-right: 0;
  }
}

/* Ensure close button (X) is visible over its teal/dark background */
.icon-close-container {
  color: #fff !important; /* SVGs use currentColor for stroke/fill */
}

/* Force background for close buttons (override generic .button/.button-action) */
.group-close-btn .icon-close-container,
.icon-close-container {
  background-color: rgb(var(--colors-line-and-border)) !important;
}

/* Mobile navigation drawer close button: outlined circle, no fill, X matches border */
#mobile-navigation .icon-close-container {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--ai-size) !important;
  height: var(--ai-size) !important;
  padding: 0 !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-color: var(--ai-color) !important;
  border-radius: 9999px !important;
  background: transparent !important;
  color: var(--ai-color) !important; /* icon uses currentColor */
  position: absolute !important;
  top: 0.5rem !important; /* matches top-2 */
  left: 0.5rem !important; /* move to left */
  right: auto !important;
}

#mobile-navigation .icon-close-container:hover {
  background: var(--ai-hover) !important;
}

#mobile-navigation .icon-close-container svg {
  width: var(--ai-icon-size) !important;
  height: var(--ai-icon-size) !important;
}

/* Cart popup/drawer close button: same style as mobile nav close */
#CloseCart.icon-close-container {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: var(--ai-size) !important;
  height: var(--ai-size) !important;
  padding: 0 !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-color: var(--ai-color) !important;
  border-radius: 9999px !important;
  background: transparent !important;
  color: var(--ai-color) !important;
}

#CloseCart.icon-close-container:hover {
  background: var(--ai-hover) !important;
}

#CloseCart.icon-close-container svg {
  width: var(--ai-icon-size) !important;
  height: var(--ai-icon-size) !important;
}

/* Cart heading count badge: outlined like close button, keep existing shape */
#update-cart .x-cart-heading .x-cart-item-count {
  background: transparent !important;
  color: var(--ai-color) !important;
  border-width: 2px !important;
  border-style: solid !important;
  border-color: var(--ai-color) !important;
  box-shadow: none !important;
}

@media (min-width: 1130px) and (max-width: 1339px) {
  .section-collection-subnav .full-width,
  .x-section-product-grid .full-width,
  .x-section-product-grid #header-filter,
  .x-section-product-grid #header-filter > div {
    padding-left: var(--site-gutter) !important;
    padding-right: var(--site-gutter) !important;
  }
  .section-collection-subnav .x-pgw.page-width {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (min-width: 1024px) {
  .section-collection-subnav .full-width {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Match .page-width on the direct child wrapper inside product grid */
  .x-section-product-grid > div.full-width {
    max-width: calc(var(--page-width, 1300px) + 40px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--site-gutter) !important;
    padding-right: var(--site-gutter) !important;
    box-sizing: border-box;
  }
  /* Ensure inner grid container aligns with theme container width */
  .x-section-product-grid #ProductGridContainer,
  .x-section-product-grid #items-grid {
    max-width: calc(var(--page-width, 1300px) + 40px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .section-collection-subnav nav.collection-subnav > div {
    max-width: calc(var(--page-width) + 40px);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--site-gutter) !important;
    padding-right: var(--site-gutter) !important;
  }
  .x-section-product-grid .full-width,
  .x-section-product-grid #header-filter,
  .x-section-product-grid #header-filter > div {
    max-width: calc(var(--page-width) + 40px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--site-gutter) !important;
    padding-right: var(--site-gutter) !important;
  }
}

/* Predictive search: make Pages (brand pages) prominent */
#shopify-section-predictive-search .predictive-pages-list,
#header-suggest-search .predictive-pages-list,
#header-search-result .predictive-pages-list,
#search-result .predictive-pages-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}
@media (min-width: 768px) {
  #shopify-section-predictive-search .predictive-pages-list,
  #header-suggest-search .predictive-pages-list,
  #header-search-result .predictive-pages-list,
  #search-result .predictive-pages-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
#shopify-section-predictive-search .predictive-page-link,
#header-suggest-search .predictive-page-link,
#header-search-result .predictive-page-link,
#search-result .predictive-page-link {
  display: inline-block;
  padding: 0;
  border: 0;
  background: transparent;
  gap: 0;
  align-items: initial;
}
#shopify-section-predictive-search .predictive-page-link--brand,
#header-suggest-search .predictive-page-link--brand,
#header-search-result .predictive-page-link--brand,
#search-result .predictive-page-link--brand {
  display: inline-block;
  padding: 0;
  border: 0;
  background: transparent;
  gap: 0;
  align-items: initial;
}
#shopify-section-predictive-search .predictive-page-link:hover,
#header-suggest-search .predictive-page-link:hover,
#header-search-result .predictive-page-link:hover,
#search-result .predictive-page-link:hover {
  background: transparent;
}
#shopify-section-predictive-search .predictive-page-link--brand:hover,
#header-suggest-search .predictive-page-link--brand:hover,
#header-search-result .predictive-page-link--brand:hover,
#search-result .predictive-page-link--brand:hover {
  background: transparent;
}
#shopify-section-predictive-search .predictive-page-badge,
#header-suggest-search .predictive-page-badge,
#header-search-result .predictive-page-badge,
#search-result .predictive-page-badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  border: 2px solid var(--mantine-color-cyan-6);
  color: var(--mantine-color-cyan-6);
  text-transform: uppercase;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
}
#shopify-section-predictive-search .predictive-page-title,
#header-suggest-search .predictive-page-title,
#header-search-result .predictive-page-title,
#search-result .predictive-page-title {
  font-weight: 700;
}

/* Contact page: color the info icons green and improve visibility */
.contact-information .w-5 {
  color: var(--ai-color);
  width: 1.6rem !important;
  height: 1.6rem !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Force outline styling so glyphs read clearly on any background */
.contact-information .w-5 svg path,
.contact-information .w-5 svg circle,
.contact-information .w-5 svg rect,
.contact-information .w-5 svg line,
.contact-information .w-5 svg polyline {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#shopify-section-predictive-search .predictive-page-title--generic,
#header-suggest-search .predictive-page-title--generic,
#header-search-result .predictive-page-title--generic,
#search-result .predictive-page-title--generic {
  font-weight: 500;
}

#shopify-section-predictive-search .predictive-page-link--generic,
#header-suggest-search .predictive-page-link--generic,
#header-search-result .predictive-page-link--generic,
#search-result .predictive-page-link--generic {
  display: inline-block;
  padding: 0;
  border: 0;
  background: transparent;
}

/* Product image modal: make image fill viewport height and center */

#header-suggest-search .popular-product-search li a,
#header-suggest-search-mobile .popular-product-search li a {
  background: rgba(var(--colors-text), 0.06);
  border-radius: 0.75rem;
}
#header-suggest-search .popular-product-search li a:hover,
#header-suggest-search-mobile .popular-product-search li a:hover {
  background: rgba(var(--colors-text), 0.09);
}

#shopify-section-predictive-search .top-product-card,
#header-search-result .top-product-card,
#search-result .top-product-card {
  background: rgba(var(--colors-text), 0.06);
  border-radius: 0.75rem;
}
#shopify-section-predictive-search .top-product-card:hover,
#header-search-result .top-product-card:hover,
#search-result .top-product-card:hover {
  background: rgba(var(--colors-text), 0.09);
}
[id^="ProductModal-"] [id^="zoom-x-product-"] .mb-3 > .flex {
  height: 100vh;
}
[id^="ProductModal-"] [id^="zoom-x-product-"] img {
  height: 100% !important;
  max-height: 100%;
  width: auto !important;
  max-width: 100vw;
  object-fit: contain;
}

#ProductInfo-template--26596584554577__main .button-link {
  font-style: normal !important;
  font-size: var(--h2-font-size-mobile) !important;
}

[aria-label="breadcrumbs"] {
  font-size: 14px !important;
}
[aria-label="breadcrumbs"] a,
[aria-label="breadcrumbs"] span:not(.breadcrumb__divider) {
  font-weight: 800 !important;
}

/* make the aromatico badges in product page smaller */
.theme-template-product .x-badges-product-detail img {
  height: 3rem;
}
@media (min-width: 768px) {
  .theme-template-product .x-badges-product-detail img {
    height: 3rem;
  }
}

/* choose options popup */
@media (min-width: 767px) {
  .choose-options .x-card-title {
    font-size: 1.35rem !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
  }
  .x-card-price {
    margin-top: 0.25rem !important;
    margin-bottom: 0.75rem !important;
  }

  /* Quantity image swatch: 10% larger than h-9/w-9 (2.25rem) */
  #choose-options-mobile fieldset[data-option-name="quantity"] .color-watches {
    width: calc(2.25rem * 1.5) !important;
    height: calc(2.25rem * 1.5) !important;
  }
}

/* Mobile quick-add (choose-options) final overrides */
@media (max-width: 767px) {
  /* Larger title in the sheet */
  #choose-options-mobile .x-card-title,
  #choose-options-mobile .product-title {
    font-size: 1.35rem !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
  }

  /* Quantity image swatch: 10% larger than h-9/w-9 (2.25rem) */
  #choose-options-mobile fieldset[data-option-name="quantity"] .color-watches {
    width: calc(2.25rem * 1.5) !important;
    height: calc(2.25rem * 1.5) !important;
  }

  /* Hide the line "Grind Size: …" (legend content) */
  #choose-options-mobile fieldset[data-option-name="grind-size"] > legend {
    display: none !important;
  }

  /* Make the Whole Bean pill 10% smaller */
  #choose-options-mobile fieldset[data-option-name="grind-size"] label {
    font-size: 0.8rem !important;
    padding: calc(0.5rem * 0.8) calc(1.25rem * 0.8) !important;
  }
  /* Make all text option pills 20% smaller on mobile (exclude color swatches) */
  #choose-options-mobile .product-form__input label:not(.color-watches) {
    font-size: 0.8rem !important;
    padding: calc(0.5rem * 0.8) calc(1.25rem * 0.8) !important;
  }
}

@media (min-width: 768px) {
  .choose-options-content fieldset[data-option-name="quantity"] .color-watches {
    width: calc(2.25rem * 1.1) !important;
    height: calc(2.25rem * 1.1) !important;
  }
  .choose-options-content fieldset[data-option-name="grind-size"] > legend {
    display: none !important;
  }
  .choose-options-content fieldset[data-option-name="grind-size"] label {
    font-size: 0.8rem !important;
    padding: calc(0.5rem * 0.8) calc(1.25rem * 0.8) !important;
  }
  /* Apply the same reduction to all text option pills on desktop (exclude color swatches) */
  .choose-options-content .product-form__input label:not(.color-watches) {
    font-size: 0.75rem !important;
    padding: calc(0.5rem * 0.7) calc(1.25rem * 0.7) !important;
  }
}