/** Shopify CDN: Minification failed

Line 470:0 Expected "}" to go with "{"

**/
/* ==========================================================================
   Homepage Bundles section
   ========================================================================== */

.hpbundles .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.hpbundles {
  padding: 64px 0 56px;
  font-family: kensington, 'Kensington', 'wedding-gothic-atf-wide', serif;
  color: #e5c78b;
  box-sizing: border-box;
}

.hpbundles *,
.hpbundles *::before,
.hpbundles *::after {
  box-sizing: border-box;
}

.hpbundles__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 64px;
  text-align: center;
}

/* ---------- section title ---------- */
.hpbundles__title {
  margin: 0 0 32px;
  display: flex;
  justify-content: center;
}

.hpbundles__title-svg {
  display: block;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 651 / 256;
  line-height: 0;
}

.hpbundles__title-svg svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- 4-col grid ---------- */
.hpbundles__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  list-style: none !important;
  margin: 0 0 32px;
  padding: 0;
}

.hpbundles__grid > li {
  list-style: none !important;
  margin: 0;
  padding: 0;
}

.hpbundles__grid > li::marker,
.hpbundles__grid > li::before {
  content: none !important;
  display: none !important;
}

/* ---------- card ---------- */
.hpbundles__card {
  position: relative;
  display: flex;
}

.hpbundles__card-link {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: var(--card-frame);
  border-radius: 14px;
  padding: 6px;
  text-decoration: none;
  color: inherit;
  transition: transform 150ms ease;
}

.hpbundles__card-link:focus-visible {
  outline: 2px solid #102129;
  outline-offset: 3px;
}

/* Card inset uses a flex column layout. Title is fixed height at top,
   price + button sit at the bottom via margin-top: auto. The products
   image fills the available space in between as an absolutely-positioned
   layer that sits behind the content, so it can visually "bleed" under
   the title/price when content is shorter than the image. */
.hpbundles__card-inset {
  position: relative;
  isolation: isolate;
  flex: 1;
  /* Interior fill. Defaults to transparent so the --card-frame colour shows
     through, which is how every pre-Tour-&-Taste card was built. Palettes
     that need a distinct interior (e.g. paynes) set --card-bg. */
  background-color: var(--card-bg, transparent);
  border: 1px solid var(--card-inner);
  border-radius: 9px;
  /* no horizontal padding — children that need it pad themselves; this
     lets the absolute-positioned products image fill the full interior. */
  padding: 18px 0 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  aspect-ratio: 316 / 560;
  min-height: 0;
}

/* ---------- layer 0: pattern (behind everything) ---------- */
.hpbundles__card-pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.hpbundles__pattern-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
}

/* ---------- layer 1: products image (fills full interior width) ---------- */
.hpbundles__card-image {
  position: absolute;
  top: 21%;
  left: 0;
  right: 0;
  z-index: 1;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hpbundles__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ---------- layer 2: title, price, button ---------- */
.hpbundles__card-title,
.hpbundles__card .custom-price-wrapper-main,
.hpbundles__card .bundle-button-wrapper {
  position: relative;
  z-index: 2;
}

/* Title sized by width: SVG fills 75% of the card's inner width and
   height follows each SVG's viewBox aspect ratio. Cards 1 and 2 have
   two stacked SVGs — both take full inner width and stack via flex-column. */
.hpbundles__card-title {
  margin: 0;
  padding: 0 14px;
  width: 100%;
  flex: 0 0 auto;
  line-height: 0;
  display: flex;
  justify-content: center;
}

.hpbundles__card-title-svg {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  width: 75%;
  line-height: 0;
}

.hpbundles__card-title-svg svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* Price panel: pushed to bottom via margin-top: auto (takes all vertical slack).
   Horizontal margin pads it in from the (now 0-padded) card-inset. */
.hpbundles .custom-price-wrapper-main {
  margin: auto 14px 8px;
  padding: 3px;
  border: 1px solid var(--price-outer-border, #e5c78b);
  border-radius: 6px;
  background-color: var(--price-outer-bg, transparent);
  overflow: hidden;
  flex: 0 0 auto;
}

.hpbundles .custom-price-wrapper {
  display: flex;
  border: 1px solid var(--price-inner-border, #e5c78b);
  border-radius: 3px;
  overflow: hidden;
}

.hpbundles .custom-price-wrapper .custom-price-left,
.hpbundles .custom-price-wrapper .custom-price-right {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}

.hpbundles .custom-price-wrapper .custom-price-left {
  background-color: var(--price-left-bg, #bd380f);
  width: 62%;
  border-right: 1px solid var(--price-inner-border, #e5c78b);
  padding: 4px 10px;
}

.hpbundles .custom-price-wrapper .custom-price-right {
  background-color: var(--price-right-bg, #1c3543);
  width: 38%;
  padding: 4px 6px;
}

.hpbundles .custom-price-wrapper-main .product-page-info__price {
  margin: 0 !important;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  line-height: 1;
}

.hpbundles .custom-price-wrapper .price.price--sale {
  margin: 0;
  order: 2;
}

.hpbundles .custom-price-wrapper .Sale-price,
.hpbundles .custom-price-wrapper .regular-price {
  margin: 0;
  display: inline-flex;
  align-items: baseline;
}

.hpbundles .custom-price-wrapper .Sale-price .price-round,
.hpbundles .custom-price-wrapper .regular-price .price-round {
  font-family: kensington, sans-serif;
  /* !important needed to override bourbon-country-bundle.css's global
     .custom-price-wrapper .price-round { color: #e59d29 !important } */
  color: var(--price-text-color, #e5c78b) !important;
  line-height: 1;
}

.hpbundles .custom-price-wrapper .Sale-price .price-round {
  font-size: 32px;
  font-weight: 700;
}

.hpbundles .custom-price-wrapper .regular-price {
  opacity: 0.5;
  position: relative;
}

.hpbundles .custom-price-wrapper .regular-price .price-round {
  font-size: 32px;
  font-weight: 400 !important;
}

.hpbundles .custom-price-wrapper .regular-price::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 2px;
  /* !important needed to override theme's global strike-through color */
  background: var(--price-text-color, #e5c78b) !important;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.hpbundles .lable-wrapper.sale-lable {
  /* Global theme .lable-wrapper uses position: absolute + bottom: -35px +
     mask-image to attach to product cards. Reset all of that inside our
     section so the savings label renders in-flow inside the price panel. */
  position: static !important;
  right: auto !important;
  bottom: auto !important;
  top: auto !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0;
  background-color: transparent;
  font-family: kensington, sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  /* !important in case theme rule uses !important (bundle-card variant does) */
  color: var(--savings-text-color, #e5c78b) !important;
  white-space: nowrap;
}

.hpbundles .lable-wrapper.sale-lable .savings-amount {
  font: inherit;
  color: inherit;
}

/* Button wrapper: bottom of card, below price panel.
   Horizontal margin pads it in from the (now 0-padded) card-inset.
   `width: auto` overrides the theme's `width: 100%` which (combined with
   our margin) would make the wrapper 28px wider than the card. */
.hpbundles__card .bundle-button-wrapper {
  margin: 0 14px;
  width: auto;
  max-width: none;
  flex: 0 0 auto;
}

.hpbundles__card .bundle-button {
  font-size: 16px;
  min-height: 44px;
  letter-spacing: 0.8px;
  padding: 10px 12px;
}

/* ---------- primary CTA (cream pill below the grid) ---------- */
/* Primary CTA reuses the theme's .btn + .view-all-product-btn pattern
   (matches "Shop All Soy Sauces" / "Discover our Story" on the homepage).
   We only wrap-position the button and cap its width at 200px. */
.hpbundles__primary-cta-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 32px auto 0;
}

.hpbundles__primary-cta.btn {
  max-width: 200px;
  font-size: 20px;
}

/* ---------- responsive ---------- */
@media (max-width: 1199px) {
  .hpbundles__inner {
    padding: 0 32px;
  }
  .hpbundles__grid {
    gap: 12px;
  }
  .hpbundles .custom-price-wrapper .Sale-price .price-round,
  .hpbundles .custom-price-wrapper .regular-price .price-round {
    font-size: 26px;
  }
  .hpbundles .lable-wrapper.sale-lable {
    font-size: 20px;
  }
  .hpbundles__card .bundle-button {
    font-size: 12px;
    min-height: 40px;
    letter-spacing: 0.5px;
  }
}

@media (max-width: 1023px) {
  .hpbundles__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
  .hpbundles .custom-price-wrapper .Sale-price .price-round,
  .hpbundles .custom-price-wrapper .regular-price .price-round {
    font-size: 32px;
  }
  .hpbundles .lable-wrapper.sale-lable {
    font-size: 24px;
  }
  .hpbundles__card .bundle-button {
    font-size: 15px;
    min-height: 48px;
  }
}


/* ---------------------------------------------------------------------------
   Tour & Taste card only.
   Cards 2-4 are client-approved and individually tuned — do NOT generalise
   these. Each bundle's scatter artwork has different proportions, so per-card
   overrides are the established pattern here.

   Tour & Taste's artwork is near-square (aspect 1.04) where the others are
   portrait (0.78-0.95). The layout top-anchors the artwork and relies on it
   being tall enough to bleed behind the price panel, so this one stopped short
   and left dead space. Spanning the holder to the card bottom and centring
   distributes that slack. max-height means the artwork is never scaled up.
   --------------------------------------------------------------------------- */
@media (max-width: 639px) {
  .hpbundles__card.bbf-palette--paynes .hpbundles__card-image {
    /* Shared anchor is 21%; this artwork reads best 20px lower. Kept as a
       calc off the shared value so it tracks any future change to the base. */
    top: calc(21% + 20px);
  }

  .hpbundles__card.bbf-palette--paynes .hpbundles__img {
    /* Scaled past the card edge on purpose. The other bundles' artwork spans
       its full canvas and is cropped by the card (all cards use cover +
       overflow:hidden), so products running off the edge is the house style.
       Tour & Taste's composition has ~1.4% side margin, leaving its products
       visually smaller than the rest; 115% brings them to a matching size.

       That extra height is also what lets this card keep the shared
       top: 21% anchor — the artwork now tucks behind the title and bleeds
       behind the price panel exactly like cards 2-4, so no bespoke vertical
       positioning is needed. Revisit if the artwork is ever re-composed. */
    width: 115%;
    height: auto;
    max-width: none;
    flex: 0 0 auto;
  }

@media (max-width: 639px) {
  .hpbundles {
    padding: 40px 0 32px;
  }
  .hpbundles__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .hpbundles__inner {
    padding: 0 16px;
  }
  .hpbundles__title {
    margin-bottom: 24px;
  }
  .hpbundles__title-svg {
    max-width: 320px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .hpbundles__card-link:hover {
    transform: translateY(-2px);
  }
}