/** Shopify CDN: Minification failed

Line 859:0 Unexpected "}"
Line 984:0 Expected "{" but found "."
Line 995:0 Unexpected "}"

**/
/* Drumroaster: restore max page width to 2000px (Eclipse v5.3.1 changed the theme default to 1600px).
   Also restores the matching breakpoint for the page-width slider gutter calc, which was tied to
   the old 2000px value — without this reset it goes negative between 1600-1999px viewports.
   !important is required here: several deferred/component stylesheets (e.g. theme-deferred.css)
   redeclare --js-max-page-width and load after this file, so a plain declaration gets overridden. */
:root {
  --max-page-width: 2000px !important;
  --js-max-page-width: (min-width: 2000px) !important;
}

@media (min-width: 1600px) {
  .section-inner--width-page-width .section-slider-wrap {
    --actual-gutter: var(--gutter);
  }
}

@media (min-width: 2000px) {
  .section-inner--width-page-width .section-slider-wrap {
    --actual-gutter: calc((100vw - var(--max-page-width)) / 2);
  }
}

@font-face {
  font-family: "OCRB-Bold";
  font-weight: 700;
  font-display: swap;
  src: url("/cdn/shop/files/F2FOCRBczyk_LT_Std_Bold.woff2?v=1781899132") format("woff2"),
  url("/cdn/shop/files/F2FOCRBczyk_LT_Std_Bold.woff?v=1781898908") format("woff");
}

:root {
  --font-family-heading: OCRB-Bold;
  --font-weight-heading: 700;
  --font-style-heading: Bold;
  --font-family-navigation: OCRB-Bold;
  --font-weight-navigation: 700;
  --font-style-navigation: Bold;
  --font-family-button: OCRB-Bold;
  --font-weight-button: 700;
  --font-style-button: Bold;
}

/* ── FONT STYLES ── */

h1, h2, h3, h4, h5, h6, .product-details__title {
  letter-spacing: -0.01em !important;
  line-height: 1.1em !important;
  text-transform: lowercase !important;
  -webkit-hyphens: none !important;
  -ms-hyphens: none !important;
  hyphens: none !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.product-details__title {
  font-size: 2.1em !important;
}

@media screen and (min-width: 1024px) {
.product-details__title {
  font-size: 2.7em !important;
}
}

p {
  line-height: 1.6em !important;
}

.submenu__link, .option-group__label, button.chip.ff-body {
  text-transform: lowercase !important;
}

.btn {
  text-transform: lowercase !important;
  font-size: 1.1em !important;
}

@media screen and (min-width: 1024px) {
  .btn {
    font-size: 1.1rem !important;
  }
}

.accordion-item__title  {
  text-transform: uppercase !important;
  font-family: OCRB-Bold !important;
  font-size: 0.9em !important;
  letter-spacing: 0.04rem !important;
}

.fs-heading-in-body-200, .ff-heading-in-body {
  text-transform: lowercase !important;
  font-size: 1.4em !important;
  letter-spacing: 0.01em !important;
}

.ff-overline {
  text-transform: uppercase !important;
  font-family: OCRB-Bold !important;
  font-size: 1em !important;
  letter-spacing: 0.04rem !important;
}

/* ── PRODUCT CARDS ── */

.product-item__details {
  padding-left: 4px !important;
  padding-top: 0px !important;
  gap: 0 !important;
}

@media screen and (min-width: 1024px) {
  .product-item__details {
  padding-left: 12px !important;
  padding-top: 0px !important;
  gap: 0 !important;
  }
}

.product-item__title, .product-item__details--title {
  text-transform: lowercase !important;
  font-family: OCRB-Bold !important;
  font-size: 1.4em !important;
  text-align: left !important;
  margin-left: 0 !important;
  margin-bottom: 2px !important;
}

@media screen and (min-width: 1024px) {
  .product-item__title, .product-item__details--title {
    font-size: 1.6em !important;
  }
}

.card__subtitle {
  text-transform: capitalize !important;
  font-size: 1.1em !important;
  text-align: left !important;
  margin-left: 0 !important;
  display: block !important;
  margin-bottom: 4px !important;
}

@media screen and (min-width: 1024px) {
  .card__subtitle {
    font-size: 1.1em !important;
  }
}

.product-item__price {
  text-transform: lowercase !important;
  font-size: 0.7em !important;
  text-align: left !important;
  margin-left: 0 !important;
  display: block !important;
}

.product-item__image-wrapper, .shop-the-look__product-item {
  margin-bottom: var(--spacing-200) !important;
  row-gap: var(--spacing-200) !important;
}

.products-layout--grid .shop-the-look__product-item .shop-the-look__product-item__content {
  text-align: left !important;
  align-items: normal !important;
}

.shop-the-look__product-item .product-item__quick-shopping > .button-with-state-wrapper {
  width: stretch !important;
}

.shop-the-look__product-item {
  gap: var(--spacing-200) !important;
}

.shop-the-look__product-item__content {
  gap: var(--spacing-250) !important;
}

/* ── PRODUCT BADGES ── */

.product-item__badges {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center !important;
  position: absolute;
  top: var(--spacing-150);
  left: var(--spacing-100);
  padding: var(--spacing-50) var(--spacing-125);
  color: var(--color-background);
  border-radius: var(--radius-badge);
  z-index: var(--z-index-badge);
}

@media (max-width: 719.9px) {
  .product-item__badges {
    top: 8px !important;
    left: 8px !important;
    padding: 0 !important;
  }
}

.product-item__sale-badge, .product-item__sold-out-badge {
  position: static !important;
  top: unset;
  left: unset;
  display: inline-flex;
  align-items: center;
  text-transform: uppercase !important;
  font-family: OCRB-Bold !important;
  font-size: 0.85em !important;
  letter-spacing: 0.04rem !important;
  padding: 4px 8px 2px 8px !important;
  border-radius: 4px !important;
}

.product-item__sold-out-badge {
  background-color: #7d7d7d !important;
  color: #ffffff !important;
}

@media screen and (min-width: 1024px) {
  .product-item__sale-badge, .product-item__sold-out-badge {
    font-size: 1em !important;
  }
}

.tasting-profile_badge,
.roast-type_badge {
  position: static !important;
  top: unset;
  left: unset;
  display: inline-flex;
  text-transform: uppercase !important;
  font-family: OCRB-Bold !important;
  font-size: 1em !important;
  letter-spacing: 0.04rem !important;
  padding: 4px 8px 2px 8px !important;
  background-color: #EBE9E5 !important;
  color: #181818 !important;
  border-radius: 4px !important;
}

@media screen and (min-width: 1024px) {
  .tasting-profile_badge,
  .roast-type_badge {
    font-size: 1em !important;
  }
}

.product-page__badges {
  display: flex !important;
  flex-direction: row !important;
  gap: 6px !important;
  align-items: center !important;
  padding-top: 12px;
}

@media screen and (min-width: 1024px) {
  .product-page__badges {
    padding-top: 20px !important;
  }
}

.product-page__badges .tasting-profile_badge,
.product-page__badges .roast-type_badge  {
  background-color: #ffffff !important;
}

/* Drumroaster: on the product page, the sold-out badge sits inside .product-page__badges next to
   the tasting/roast badges (always 1em). The shared .product-item__sold-out-badge rule above drops
   to 0.85em on mobile to keep it compact on product cards — override back to 1em here so it's the
   same size as its neighbors on the product page. Product cards are untouched since this is scoped
   to .product-page__badges. See CUSTOMIZATIONS.md. */
.product-page__badges .product-item__sold-out-badge {
  font-size: 1em !important;
}

/* Drumroaster: unify the sale badge's look with the other pill badges (tasting/roast/bundle) and
   recolor it from the theme's sale badge settings instead of each instance's differing defaults.
   Covers both the custom badge row (.product-item__sale-badge — product cards and the product-page
   "Don't Delete" badges block) and the native product block's price badge
   (.product-badges__badge--sale, rendered inside .price__container). See CUSTOMIZATIONS.md. */
.product-item__sale-badge,
.product-badges__badge--sale {
  background-color: var(--color-sale-badge-background) !important;
  color: #ffffff !important;
}

.product-badges__badge--sale {
  display: inline-flex !important;
  text-transform: uppercase !important;
  font-family: OCRB-Bold !important;
  font-size: 0.85em !important;
  letter-spacing: 0.04rem !important;
  padding: 4px 8px 2px 8px !important;
  border-radius: 4px !important;
}

@media screen and (min-width: 1024px) {
  .product-badges__badge--sale {
    font-size: 1em !important;
  }
}

/* Drumroaster: on the product page, the "price" block can render its own sale badge above the
   price (.price__container .product-badges__badge--sale) — redundant with the sale badge already
   shown in the .product-page__badges row above the product title. Hide the whole badge wrapper
   (not just the badge) when it holds a sale badge, so no empty gap is left above the price. Sold-out
   and any tag-based custom badges in that same wrapper are untouched. See CUSTOMIZATIONS.md. */
.price__container .price-and-payments__badges:has(.product-badges__badge--sale) {
  display: none !important;
}

.bundle-badge {
  display: inline-flex;
  text-transform: uppercase !important;
  font-family: OCRB-Bold !important;
  font-size: 1em !important;
  letter-spacing: 0.04rem !important;
  padding: 4px 8px 2px 8px !important;
  background-color: #181818 !important;
  color: #ffffff !important;
  border-radius: 4px !important;
}

/* ── PRODUCT CAROUSELS ── */

.scroll-slider--scroll-all-sizes > .scroll-slider__slider {
  column-gap: 12px !important;
}

@media screen and (min-width: 1024px) {
  .scroll-slider--scroll-all-sizes > .scroll-slider__slider {
    column-gap: 20px !important;
  }
}

@media screen and (min-width: 1260px) {
  .featured-collection .section-inner {
    padding: var(--section-padding-top) var(--gutter) var(--section-padding-bottom) !important;
  }
}

/* ── SPACING ADJUSTMENTS ── */

.section-header {
  margin-bottom: 26px !important;
}

/* Drumroaster: on mobile, scale each section's configured top/bottom padding down to 70% instead
   of using a flat 40px/20px regardless of the section's own top_padding/bottom_padding setting.
   --section-padding-top/--section-padding-bottom are set inline per-section (in px) via
   snippets/settings-section-padding.liquid, so calc() against them here scales whatever value that
   section was configured with. See CUSTOMIZATIONS.md. */
.section-inner {
    padding-top: calc(var(--section-padding-top) * 0.7) !important;
    padding-bottom: calc(var(--section-padding-bottom) * 0.7) !important;
  }
  @media screen and (min-width: 800px) {
  .section-inner {
  padding: var(--section-padding-top) 40px var(--section-padding-bottom) !important;
  }
}

@media screen and (min-width: 1260px) {
  .section-inner {
  padding: var(--section-padding-top) 60px var(--section-padding-bottom) !important;
  }
}

@media screen and (min-width: 1024px) {
  .section-header {
    margin-bottom: var(--spacing-450) !important;
  }
}

/* ── SECTION - FEATURED LINKS ── */

.fs-heading-5-base {
  text-transform: uppercase !important;
  font-family: OCRB-Bold !important;
  font-size: 0.9em !important;
  letter-spacing: 0.04rem !important;
  line-height: 1.1rem !important;
  max-width: 400px !important;
}

.featured-links__link {
  letter-spacing: -0.03em !important;
  line-height: 1em !important;
  text-transform: lowercase !important;
  -webkit-hyphens: manual;
  -moz-hyphens: manual;
  hyphens: manual;
}

.featured-links__links-wrapper {
  row-gap: 20px !important;
}

@media screen and (min-width: 1024px) {
  .featured-links__links-wrapper {
    padding-left: 40px !important;
  }
}

featured-links .section-inner {
  align-items: flex-end !important;
}

/* ── SECTION - SHOP THE LOOK ── */

.banner-tile__content-wrapper, .promotion-tile__content-primary {
  max-width: 400px !important;
}

.banner-tile__media-wrapper {
  max-height: 700px;
}

.shop-the-look .content {
    gap: 16px !important;
}

@media screen and (min-width: 1024px) {
  .shop-the-look .content {
    gap: 40px !important;
  }
}

.shop-the-look__product-item__content-secondary {
  margin-left: 4px !important;
  margin-right: 4px !important;
}

.shop-the-look__product-item {
  column-gap: 12px !important;
}

.shop-the-look__product-item__image-container {
  position: relative;
  flex-shrink: 0;
}

.shop-the-look__product-item__image-wrapper {
  position: relative;
  display: block;
}

.products-layout--list .product-item__badges {
  display: none !important;
}

.products-layout--grid .product-item__badges {
  display: flex !important;
}

.shop-the-look .product-item__badges {
  display: none !important;
}

@media screen and (min-width: 720px) {
  .products-layout--grid .shop-the-look__product-item .product-item__badges {
    display: flex !important;
  }
}

@media screen and (min-width: 1024px) {
.shop-the-look__product-item__content-secondary {
  margin-left: 12px !important;
  margin-right: 12px !important;
}
}

@media (max-width: 719.9px) {
    shop-the-look .content .products-container-wrapper .products-container__heading {
        padding-bottom: var(--spacing-200) !important;
    }
}

/* ── SECTION - BANNER ── */

@media screen and (min-width: 1024px) {
  .banner__content-wrapper {
    bottom: 32px !important;
  }
}

.banner-tile__content-wrapper, .banner__content-wrapper {
    left: 20px !important;
    bottom: 20px !important;
    right: 20px !important;
    top: 20px !important;
}

@media screen and (min-width: 1024px) {
.banner-tile__content-wrapper, .banner__content-wrapper {
    left: 40px !important;
    bottom: 40px !important;
    right: 40px !important;
    top: 40px !important;
}
}

/* ── FOOTER ── */

.footer-block__heading {
  text-transform: uppercase !important;
  font-family: OCRB-Bold !important;
  font-size: 0.9em !important;
  letter-spacing: 0.04rem !important;
}

.footer__block--newsletter-and-socials, .footer__block--links {
  margin-top: 0px !important;
}

/* ── HEADER ── */

.header_logo {
  width: 180px !important;
}

@media screen and (min-width: 1024px) {
  .header_logo {
    width: 420px !important;
  }
}

/* Drumroaster: mobile logo image swap. header-drumroaster.liquid / header-logo-drumroaster.liquid
   render a separate mobile image (logo-drumroaster--mobile-image) alongside the regular logo, only
   when Mobile image is set. These rules hide whichever one doesn't belong at the current breakpoint.
   See CUSTOMIZATIONS.md. */
@media (max-width: 719.9px) {
  .header__logo .logo-drumroaster--desktop-image {
    display: none !important;
  }
}

@media (min-width: 720px) {
  .header__logo .logo-drumroaster--mobile-image {
    display: none !important;
  }
}

/* ── PRODUCT PAGE ── */

.product-inner {
  column-gap: 24px !important;
  row-gap: 16px !important;
}

@media screen and (min-width: 1024px) {
  .product-inner {
    column-gap: 40px !important;
    row-gap: 40px !important;
  }
  .product__details {
  padding-right: 12px !important;
}
}

.product-details__liquid {
  margin-bottom: 12px !important;
}

.sticky-atc__header-content .header-content--left .product-variant-details {
gap: 8px !important;
}


.chip {
  padding-top: 8px !important;
  padding-right: 8px !important;
  padding-left: 8px !important;
  padding-bottom: 8px !important;
}

@media screen and (min-width: 1024px) {
  .chip {
  padding-top: 12px !important;
  padding-right: 8px !important;
  padding-left: 8px !important;
  padding-bottom: 12px !important;
}
}

@media screen and (min-width: 1024px) {
.button-with-state.btn--style-solid {
  height: 60px !important;
}
}

/* ── Coffee collapsible section  ── */

.coffee-details {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.coffee-details p,
.coffee-details dd {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.coffee-details__description {
  font-size: 1em;
  line-height: 1.6;
}

.coffee-details__specs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  padding: 0;
}

.coffee-details__spec-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  padding: 6px 0;
  margin: 0 !important;
}

.coffee-details__spec-key {
  font-weight: 700;
  font-size: 1em;
  line-height: 1.5;
}

.coffee-details__spec-value {
  font-size: 1em;
  line-height: 1.5;
  margin: 0;
}

.coffee-details__additional-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.coffee-details__additional-info-item {
  font-size: 1em;
  line-height: 1.6;
  margin: 0 !important;
}

.bundle-coffee-details__name {
  font-family: OCRB-Bold !important;
  font-size: 1.2em;
  line-height: 1.3em;
  text-transform: uppercase;
  letter-spacing: 0.04rem;
  text-decoration: none !important;
  color: var(--color-text);
  display: block;
}

.bundle-coffee-details {
  padding-top: 16px;
}

/* ── Brewing  collapsible section  ── */

.brewing-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.brewing-details p,
.brewing-details dd {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.brewing-details__info {
  font-size: 1em;
  line-height: 1.6;
}

.brewing-details__intro {
  font-size: 1em;
  line-height: 1.6;
}

.brewing-details__guides {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.brewing-details__guide {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  padding: 6px 0;
}

.brewing-details__guide-title {
  font-weight: 700;
  font-size: 1em;
  line-height: 1.5;
  text-decoration: underline;
  color: var(--color-text);
  text-transform: lowercase;
  font-family: OCRB-Bold !important;
}

.brewing-details__guide-subheader {
  font-size: 1em;
  line-height: 1.5;
  margin: 0 !important;
}

.brewing-details * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.brewing-details__guide {
  margin: 0 !important;
  padding: 6px 0 !important;
}

.brewing-details__guides {
  gap: 0 !important;
}

/* ── ATC BUTTON ── */

.btn.btn--style-solid, .shopify-challenge__button.btn--style-solid {
  font-size: 1.1em !important;
}

@media screen and (min-width: 1024px) {
  .btn.btn--style-solid, .shopify-challenge__button.btn--style-solid {
    font-size: 1.4em !important;
  }
}

.button-with-state-wrapper.btn--full-width {
  height: 48px !important;
}

@media screen and (min-width: 1024px) {
  .button-with-state-wrapper.btn--full-width {
    height: 55px !important;
  }
}

/* ── FEATURED TEXT WITH ICON - TASTING NOTES ── */

.tasting-notes-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1.25em;
  row-gap: 0.3em;
  font-style: normal;
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase !important;
  font-family: OCRB-Bold !important;
  font-size: 1em !important;
  letter-spacing: 0.04rem !important;
}




/* ── MULTI COLUMN SECTION ── */

.multi-column__item-text-wrapper {
  max-width: 340px;
}

/* ── CART ── */

.free-shipping-bar {
  border-radius: 8px !important;
  background: black !important;
}

.free-shipping-bar__message {
  color: #E8E5E1 !important;
}

.free-shipping-bar__bar {
  background: rgb(232 229 225 / 0.4) !important;
}

.free-shipping-bar__bar-progress {
  background: #E8E5E1 !important;
}

.cart-item__controls {
  background: white !important;
}

input[js-quantity-input] {
  background-color: #ffffff !important;
}

/* ── MINI PRODUCT CARD ── */


@media screen and (min-width: 1024px) {
  .product-item-minimal__image {
    width: 100px !important;
  }
}

.product-item-minimal__title {
  text-transform: lowercase !important;
  font-family: OCRB-Bold !important;
  font-size: 1.2em !important;
  text-align: left !important;
  padding-top: 4px !important;
}

.product-item-minimal {
  column-gap: 10px !important;
}

.product-item-minimal--bordered {
  background: white !important;
  border: 0px !important;
  padding: 12px !important;
  border-radius: 8px !important;
}

.product-item-minimal__image {
  border-radius: 4px !important;
  width: 72px !important;
}



.btn.btn--size-small:not(.btn--style-text):not(.btn--style-icon) {
  height: 40px !important;
}
}

@media screen and (min-width: 1024px) {
.product-item-minimal--bordered {
  background: white !important;
  border: 0px !important;
  padding: 16px !important;
  border-radius: 8px !important;
}

.product-item-minimal {
  column-gap: 8px !important;
}

.product-item-minimal__image {
  border-radius: 4px !important;
  width: 92px !important;
}
}

.minimal_card__subtitle {
  text-transform: capitalize !important;
  font-size: 1em !important;
  text-align: left !important;
  margin-left: 0 !important;
  display: block !important;
  margin-bottom: 0px !important;
}

@media screen and (min-width: 1024px) {
.product-item-minimal__image {
  width: 112px !important;
}

.product-block-complementary-products-inner .product-item-minimal--bordered .product-item-minimal__content {
  flex-direction: row !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  gap: var(--spacing-200) !important;
}

.product-block-complementary-products-inner .product-item-minimal--bordered .product-item-minimal__content-main {
  flex-direction: column !important;
  justify-content: flex-start !important;
  flex: 1 !important;
}

.product-block-complementary-products-inner .product-item-minimal--bordered .product-item-minimal__content-secondary {
  flex-shrink: 0 !important;
  align-self: stretch !important;
  justify-content: flex-end !important;
  display: flex !important;
  flex-direction: column !important;
}
}

/* Drumroaster: when the complementary-products slider on a product page has only 1 product,
   make the card span the full column width on mobile instead of leaving the "peek" gap that's
   meant to hint at more slides (the peek calc reserves 60px of dead space either way). Scoped to
   this component only, and to :only-child so it has no effect once there are 2+ products.
   See CUSTOMIZATIONS.md. */
@media (max-width: 719.9px) {
  product-block-complementary-products .scroll-slider--scroll-all-sizes > .scroll-slider__slider > .complementary-product-item:only-child {
    width: 100% !important;
  }
}

/* ── BUNDLES PRODUCT PAGE ── */

.bundle-section__heading {
  margin-bottom: 16px;
}

.bundle-item {
  background: #ffffff;
  border-radius: 8px;
  padding: 16px 16px;
  margin-bottom: 12px;
}

.bundle-item__title-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}

.bundle-item__title {
  font-family: OCRB-Bold !important;
  font-size: 1.1em;
  text-decoration: underline;
  text-transform: lowercase;
  color: var(--color-text);
}

.bundle-item__size {
  font-size: 1.1em;
  color: var(--color-text);
}

.bundle-item__description {
  font-size: 1.1em;
  line-height: 1.5;
  margin: 0;
  color: var(--color-text);
}

.bundle-brewing-details__name {
  font-family: OCRB-Bold !important;
  font-size: 1.2em;
  line-height: 1.3em;
  text-transform: uppercase;
  letter-spacing: 0.04rem;
  text-decoration: none !important;
  color: var(--color-text);
  display: block;
  margin-bottom: 8px !important;
}

.bundle-brewing-details {
  padding-bottom: 8px;
}

@media screen and (min-width: 1024px)

.bundle-item {
  padding: 16px 16px;
}
.bundle-item__title {
  font-size: 1.4em;
}

.bundle-item__size {
  font-size: 1.3em;
  color: var(--color-text);
}
}

.sticky-filter-sort__filter-button, .sticky-filter-sort__sort-trigger, .collection-top-bar__filter-button {
  background-color: #ffffff !important;
}

.submenu__item--secondary-submenu > .submenu__link--heading   {
  text-transform: uppercase !important;
  font-family: OCRB-Bold !important;
  font-size: 0.9em !important;
  letter-spacing: 0.04rem !important;
}

.submenu--tertiary .submenu__link--item .submenu__link-text {
font-size: 1.2em !important;
text-transform: capitalize !important;
}

.navigation-promo__heading {
  font-size: 1.2em !important;
}

.collapsible-content-row_content {
  font-size: 1.3em !important;
  max-width: 1000px !important;
}

.content-block--overline {
margin-bottom: 8px !important;
}

.content-block--heading {
  margin-bottom: 0px !important;
}

.metafield-rich_text_field p {
  margin-top: 4px !important;
  margin-bottom: 0px !important;
}

.section-header__content-title.animation-heading {
  margin: 0 calc(var(--horizontal-font-padding) * -1) calc(var(--bottom-font-padding) * -1);
  padding: 0 var(--horizontal-font-padding) var(--bottom-font-padding);
}

.section-header__content-title {
  --bottom-font-padding: 0px;
}

@media screen and (min-width: 720px) {
.standard-grid.standard-grid--with-count-based-gaps.standard-grid--desktop-3-column {
  column-gap: 28px !important;
}
}

/* ── GIFT CARDS COLLECTION ── */

/* Drumroaster: full-tile clickable overlay for the reskinned promotion tile
   (snippets/promotion-tile-drumroaster.liquid), which reuses plain product-item markup/classes
   so it looks identical to a real product card. :has() scopes position: relative to only the
   product-item elements that contain this overlay link, leaving ordinary product cards
   untouched. See CUSTOMIZATIONS.md. */
product-item:has(.promotion-tile-drumroaster__link) {
  position: relative;
}

.promotion-tile-drumroaster__link {
  position: absolute;
  inset: 0;
}

/* ── SECTION - SCROLLING CONTENT ── */

/* Drumroaster: sections/scrolling-content-drumroaster.liquid renders as
   .section-inner--width-full-width (meant to run edge-to-edge with no side gutter), but the
   blanket .section-inner rule above (SPACING ADJUSTMENTS) forces 40px/60px side padding on every
   .section-inner regardless of width variant, which was clipping/cropping the scrolling row
   against the page edges. Previously patched per-instance with ad-hoc custom_css
   (".section-inner {padding-left: 0px !important; padding-right: 0px !important;}"), applied
   inconsistently across templates — some instances still clipped. Baked in here instead, scoped
   to the new section's own marker class so it can never be missed on a new instance. See
   CUSTOMIZATIONS.md. */
.scrolling-content-drumroaster .section-inner {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ── SECTION - BUNDLE QUANTITY BADGE ── */

/* Drumroaster: circular quantity badge (e.g. "x3") shown over a product's image whenever it's a
   single-product bundle (custom.products_in_bundle has exactly one product) sold in a quantity
   greater than one (custom.in_bundle_quantities). Used on the product page's first media item
   (sections/main-product--default-drumroaster.liquid / snippets/product-media-drumroaster.liquid),
   main grid product cards (snippets/product-item-drumroaster.liquid), small/minimal cards
   (snippets/product-item-minimal-drumroaster.liquid), and Shop the Look cards
   (sections/shop-the-look-drumroaster.liquid). See CUSTOMIZATIONS.md. */

.product-item-minimal__image {
  position: relative;
}

.bundle-quantity-badge-drumroaster {
  position: absolute;
  top: 20%;
  right: 20%;
  transform: translate(50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  min-width: 2em;
  padding: 0.3em;
  border-radius: 50%;
  background-color: #000000;
  color: #ffffff;
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-heading);
  line-height: 1;
  pointer-events: none;
  z-index: 2;
}

.bundle-quantity-badge-drumroaster--product {
  font-size: 1.5em;
}

@media (min-width: 720px) {
  .bundle-quantity-badge-drumroaster--product {
    font-size: 2em;
  }
}

@media (min-width: 1024px) {
  .bundle-quantity-badge-drumroaster--product {
    font-size: 2.3em;
  }
}

.bundle-quantity-badge-drumroaster--grid,
.bundle-quantity-badge-drumroaster--shop-the-look {
  font-size: 1.1em;
}

@media (min-width: 720px) {
  .bundle-quantity-badge-drumroaster--grid,
  .bundle-quantity-badge-drumroaster--shop-the-look {
    font-size: 1.2em;
  }
}

@media (min-width: 1024px) {
  .bundle-quantity-badge-drumroaster--grid,
  .bundle-quantity-badge-drumroaster--shop-the-look {
    font-size: 1.5em;
  }
}

/* Drumroaster: small/minimal cards use a flat 1em at all screen sizes, unlike the other card
   variants above, which scale up at wider breakpoints. */
.bundle-quantity-badge-drumroaster--minimal {
  font-size: 1em;
}

/* Drumroaster: move the badge to the bottom-right corner (same x inset, 80% y inset instead of
   20%) whenever its card is narrow. Two independent triggers: (1) a container query on the
   image wrapper itself, so it reacts to the card's actual rendered width (<250px) regardless of
   what produced it — narrow grid columns, list layouts, small screens; (2) Shop the Look's
   "grid" products_layout, which is unconditionally 2 columns per its own section settings and
   can still render wider than 250px on desktop, so it needs an explicit rule alongside the
   width-based one. */
.product-item__image-wrapper,
.product-item-minimal__image,
.shop-the-look__product-item__image-wrapper {
  container-type: inline-size;
}

@container (max-width: 250px) {
  .bundle-quantity-badge-drumroaster--grid,
  .bundle-quantity-badge-drumroaster--minimal,
  .bundle-quantity-badge-drumroaster--shop-the-look {
    top: 80%;
  }
}

.products-layout--grid .bundle-quantity-badge-drumroaster--shop-the-look {
  top: 80%;
}

/* Drumroaster: hide the badge only on the main grid card, only while hovering the image itself
   (not the whole card), and only when that image is set to swap to a second photo on hover
   (settings.product_listing_show_second_image_on_hover, marked by the
   .product-item__image-wrapper--has-hover modifier class) — the badge would otherwise sit on top
   of the incoming second image. Small/minimal cards and Shop the Look never hide the badge on
   hover — neither has this image-swap behavior. */
.product-item__image-wrapper--has-hover:hover .bundle-quantity-badge-drumroaster--grid {
  display: none;
}