/** Shopify CDN: Minification failed

Line 825:10 Unexpected "{"
Line 825:19 Expected ":"

**/
/* ============================================================
   ALBANOTTE — Custom CSS
   Drop this entire file into assets/custom.css in Shopify.
   Wire it up in layout/theme.liquid before </head>:
     {{ 'custom.css' | asset_url | stylesheet_tag }}
   ============================================================ */

:root {
  --alb-black: #0B0B0B;
  --alb-charcoal: #141412;
  --alb-warm-dark: #13130F;
  --alb-surface: #161614;
  --alb-off-white: #F2F0EA;
  --alb-stone: #F4F2ED;
  --alb-olive: #5C6B4F;
  --alb-muted: #999590;
  --alb-biscotti-gold: #C4956A;
  --alb-muted-red: #8B3A3A;
}

/* ============================================
   SECTION BACKGROUND VARIANTS
   Used by custom Liquid sections via select dropdown.
   Replaces the named color scheme system.
   ============================================ */

.alb-section--black {
  background: #0B0B0B;
  color: #F2F0EA;
}
.alb-section--charcoal {
  background: #141412;
  color: #F2F0EA;
}
.alb-section--warm-dark {
  background: #13130F;
  color: #F2F0EA;
}
.alb-section--surface {
  background: #161614;
  color: #F2F0EA;
}
.alb-section--stone {
  background: #F4F2ED;
  color: #141412;
}
.alb-section--stone h1,
.alb-section--stone h2,
.alb-section--stone h3,
.alb-section--stone h4,
.alb-section--stone h5,
.alb-section--stone h6 {
  color: #141412;
}

/* ============================================
   TYPOGRAPHY POLISH
   ============================================ */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: Oswald, Impact, "Arial Narrow", sans-serif !important;
  letter-spacing: -0.01em;
  text-transform: uppercase !important;
  line-height: 0.95;
  font-weight: 700;
}

/* Hero H1 — overrides Impact's default scale */
.section-hero h1,
.video-section h1,
.banner__heading,
.hero h1 {
  font-size: clamp(3.5rem, 8vw, 7rem) !important;
  line-height: 0.9 !important;
  letter-spacing: -0.02em !important;
}

/* Eyebrow text pattern — used everywhere on the brand */
.alb-eyebrow {
  font-family: "DM Sans", -apple-system, sans-serif;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #5C6B4F;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.875rem;
}
.alb-eyebrow::before {
  content: '';
  width: 2rem;
  height: 1px;
  background: #5C6B4F;
  display: inline-block;
}
.alb-eyebrow--center {
  justify-content: center;
}

/* ============================================
   BUTTONS — sharp, sticker-shadow capable
   ============================================ */

.button,
button.btn,
a.btn,
.shopify-payment-button__button,
.product-form__submit {
  border-radius: 2px !important;
  letter-spacing: 0.08em !important;
  font-family: Oswald, sans-serif !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              background-color 0.3s ease !important;
}

.button--primary:hover,
button.btn--primary:hover,
a.btn--primary:hover,
.product-form__submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(92, 107, 79, 0.3);
}

/* Secondary button — transparent fill with thin border */
.button--secondary,
button.btn--secondary,
a.btn--secondary {
  background: transparent !important;
  border: 1px solid rgba(242, 240, 234, 0.25) !important;
  color: #F2F0EA !important;
}
.button--secondary:hover,
button.btn--secondary:hover,
a.btn--secondary:hover {
  border-color: #F2F0EA !important;
  background: transparent !important;
  transform: translateY(-2px);
}

/* ============================================
   FORM ELEMENTS — sharp corners
   ============================================ */

input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select,
.input,
.field__input {
  border-radius: 2px !important;
}

/* ============================================
   NOISE TEXTURE
   Add the .alb-noise class to any section for subtle grain.
   Uses a base64 data URI so it works in asset files
   (data: URIs are blocked by the theme settings CSS validator).
   ============================================ */

.alb-noise {
  position: relative;
}
.alb-noise::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgMjU2IDI1NicgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPSc0JyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJy8+PC9zdmc+");
  z-index: 1;
}
.alb-noise > * {
  position: relative;
  z-index: 2;
}

/* ============================================
   SCROLLBAR — dark + olive hover
   ============================================ */

::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #0B0B0B;
}
::-webkit-scrollbar-thumb {
  background: #999590;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #5C6B4F;
}

::selection {
  background: #5C6B4F;
  color: #F2F0EA;
}

/* ============================================
   PRODUCT CARDS — overlay-on-image style
   matches the homepage Coffee Grid look
   ============================================ */

.card--product {
  position: relative;
}
.card--product::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: #5C6B4F;
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 3;
}
.card--product:hover::after {
  width: 100%;
}

/* ============================================
   ANNOUNCEMENT BAR
   ============================================ */

.announcement-bar,
.utility-bar,
.shopify-section-group-header-group .announcement-bar {
  background: #5C6B4F !important;
  color: #F2F0EA !important;
}
.announcement-bar__message,
.announcement__text {
  font-size: 0.6875rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  color: #F2F0EA !important;
}

/* ============================================
   HEADER — transparent over hero, blurs on scroll
   ============================================ */

.section-header.section-header--transparent,
.header--transparent {
  background: rgba(11, 11, 11, 0.45) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.section-header.section-header--scrolled,
.section-header:not(.section-header--transparent),
.header--scrolled {
  background: rgba(11, 11, 11, 0.92) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Nav link underline — olive, animated.
   Defensive: covers multiple Impact selector conventions. */
.header__menu-item,
.header__inline-menu .list-menu__item,
.header-menu__link,
.header nav a {
  position: relative;
}
.header__menu-item::after,
.header__inline-menu .list-menu__item::after,
.header-menu__link::after,
.header nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 1px;
  background: #5C6B4F;
  transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.header__menu-item:hover::after,
.header__inline-menu .list-menu__item:hover::after,
.header-menu__link:hover::after,
.header nav a:hover::after {
  width: 100%;
}

/* Cart count bubble */
.header__icon-cart-count,
.header__cart-count,
.cart-count,
.cart-count-bubble {
  background: #5C6B4F !important;
  color: #F2F0EA !important;
}

/* ============================================
   EMAIL SIGNUP — olive radial glow
   ============================================ */

.section-email-signup,
.newsletter-section,
.section--newsletter {
  position: relative;
  overflow: hidden;
}
.section-email-signup::before,
.newsletter-section::before,
.section--newsletter::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(92, 107, 79, 0.08), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.section-email-signup > *,
.newsletter-section > *,
.section--newsletter > * {
  position: relative;
  z-index: 1;
}

/* ============================================
   MOBILE MENU — full-screen black drawer
   ============================================ */

.menu-drawer,
.mobile-menu,
.drawer__inner {
  background: #0B0B0B !important;
}
.menu-drawer__menu-item,
.mobile-menu a {
  font-family: Oswald, sans-serif;
  font-size: 2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.menu-drawer__menu-item:hover,
.mobile-menu a:hover {
  color: #5C6B4F;
}

/* ============================================
   FEATURED COLLECTION — tighter mobile gaps
   ============================================ */

.featured-collection .grid,
.product-grid {
  gap: 12px;
}
@media (min-width: 768px) {
  .featured-collection .grid,
  .product-grid {
    gap: 20px;
  }
}

/* ============================================
   MOBILE OPTIMIZATION
   ============================================ */

@media (max-width: 749px) {
  .section {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .video-section,
  .section-hero {
    min-height: 100svh;
    min-height: 100dvh;
  }

  /* Featured collection — 2 cols on mobile */
  .featured-collection .grid--3-col-tablet,
  .featured-collection .grid--4-col-desktop,
  .product-grid--3-col,
  .product-grid--4-col {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }

  /* Mobile menu items — large tap targets */
  .menu-drawer__menu-item,
  .mobile-menu a {
    font-size: 2rem;
    padding: 0.75rem 0;
  }

  /* Cart drawer full-width on mobile */
  cart-drawer,
  .cart-drawer {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* iOS safe-area for fixed elements */
@supports (padding: max(0px)) {
  .section-header,
  .announcement-bar {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
}

/* ============================================
   REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
/* ============================================
   HERO VIDEO — body paragraph & subheading
   tighten line-height, normalize weight
   ============================================ */

/* Body paragraphs only — explicitly exclude heading classes
   so heading-class paragraphs keep their large hero typography */
.content-over-media .prose p:not(.h0):not(.h1):not(.h2):not(.h3):not(.h4):not(.h5):not(.h6),
.shopify-section--video .prose p:not(.h0):not(.h1):not(.h2):not(.h3):not(.h4):not(.h5):not(.h6),
.video-section .prose p:not(.h0):not(.h1):not(.h2):not(.h3):not(.h4):not(.h5):not(.h6) {
  line-height: 1.5 !important;
  font-weight: 400 !important;
  font-family: "DM Sans", -apple-system, sans-serif !important;
  font-size: clamp(0.95rem, 1.4vw, 1.125rem) !important;
}

/* Force-disable any "bold" class Impact applies to body subheadings
   (but only on non-heading paragraphs) */
.content-over-media .prose p.bold:not(.h0):not(.h1):not(.h2):not(.h3),
.shopify-section--video .prose p.bold:not(.h0):not(.h1):not(.h2):not(.h3),
.video-section .prose p.bold:not(.h0):not(.h1):not(.h2):not(.h3) {
  font-weight: 400 !important;
}

/* Heading XX-Large (h0) — the biggest hero scale, matches Vercel site */
.content-over-media .prose p.h0,
.shopify-section--video .prose p.h0,
.video-section .prose p.h0 {
  font-family: Oswald, Impact, sans-serif !important;
  font-size: clamp(3.5rem, 8vw, 7rem) !important;
  font-weight: 700 !important;
  line-height: 0.9 !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
  margin-block: 0 !important;
}

/* Heading X-Large (h1) */
.content-over-media .prose p.h1,
.shopify-section--video .prose p.h1,
.video-section .prose p.h1 {
  font-family: Oswald, Impact, sans-serif !important;
  font-size: clamp(2.75rem, 6.5vw, 5.5rem) !important;
  font-weight: 700 !important;
  line-height: 0.9 !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
  margin-block: 0 !important;
}

/* Heading Large (h2) */
.content-over-media .prose p.h2,
.shopify-section--video .prose p.h2,
.video-section .prose p.h2 {
  font-family: Oswald, Impact, sans-serif !important;
  font-size: clamp(2.25rem, 5vw, 4rem) !important;
  font-weight: 700 !important;
  line-height: 0.95 !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
  margin-block: 0 !important;
}

/* Heading Medium (h3) */
.content-over-media .prose p.h3,
.shopify-section--video .prose p.h3,
.video-section .prose p.h3 {
  font-family: Oswald, Impact, sans-serif !important;
  font-size: clamp(1.75rem, 4vw, 3rem) !important;
  font-weight: 700 !important;
  line-height: 0.95 !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
  margin-block: 0 !important;
}

/* Spacing between heading block → body paragraph → buttons
   Using :not() ensures stacked heading lines don't get spacing between them */
.content-over-media .prose > p.h0 + p:not(.h0):not(.h1):not(.h2):not(.h3),
.content-over-media .prose > p.h1 + p:not(.h0):not(.h1):not(.h2):not(.h3),
.content-over-media .prose > p.h2 + p:not(.h0):not(.h1):not(.h2):not(.h3),
.content-over-media .prose > p.h3 + p:not(.h0):not(.h1):not(.h2):not(.h3),
.content-over-media .prose > p.h0 + div,
.content-over-media .prose > p.h1 + div,
.content-over-media .prose > p.h2 + div,
.content-over-media .prose > p.h3 + div {
  margin-top: 1.5rem !important;
}

.content-over-media .prose > p + .button,
.content-over-media .prose > div + .button,
.content-over-media .prose > p + a.button {
  margin-top: 2rem !important;
}
/* ============================================
   HERO HEADING — olive split on last 2 lines
   "ROASTED" and "FRESH" render in olive
   matches the Vercel site's split-color hero
   ============================================ */

/* When 4 heading blocks are stacked, the 3rd and 4th get olive */
.content-over-media .prose p.h0:nth-of-type(3),
.content-over-media .prose p.h0:nth-of-type(4),
.content-over-media .prose p.h1:nth-of-type(3),
.content-over-media .prose p.h1:nth-of-type(4),
.shopify-section--video .prose p.h0:nth-of-type(3),
.shopify-section--video .prose p.h0:nth-of-type(4) {
  color: #5C6B4F !important;
}
/* ============================================
   HERO TRUST BAR — kill Impact's wrapper padding
   so it sits flush against the hero video above
   and flush against the next section below
   ============================================ */

.shopify-section:has(.alb-trust-bar),
#shopify-section [class*="trust-bar"] {
  --section-outer-spacing-block: 0 !important;
}

.shopify-section .alb-trust-bar {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin: 0 !important;
}

/* The inner grid keeps minimal vertical breathing room */
.alb-trust-bar__grid {
  padding-block: 0.875rem !important;
}
@media (min-width: 768px) {
  .alb-trust-bar__grid {
    padding-block: 1.25rem !important;
  }
}
/* ============================================
   PRODUCT CARDS — fill empty space around image
   so 2:3 cards don't look hollow when product
   photo has whitespace around it
   ============================================ */

.card--product .card__media,
.card--product .product-card__media,
.card--product picture {
  background: #1a1612 !important; /* matches the warm wood tone in your bag photos */
}
/* ============================================
   PRODUCT CARDS — overlay metadata on image
   Editorial style: roast badge top-left,
   origin + tasting notes pinned to image bottom
   ============================================ */

/* Figure becomes a positioned container so we can overlay children */
.product-card__figure {
  position: relative;
  isolation: isolate;
}

/* Dark gradient at bottom of image — makes overlay text readable */
.product-card__figure::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 50%;
  background: linear-gradient(
    to top,
    rgba(11, 11, 11, 0.92) 0%,
    rgba(11, 11, 11, 0.5) 50%,
    rgba(11, 11, 11, 0) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Roast level badge — top-left corner of image */
.alb-roast-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 3;
  display: inline-block;
  padding: 0.3rem 0.625rem;
  background: rgba(92, 107, 79, 0.92);
  color: #F2F0EA;
  font-family: Oswald, sans-serif;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 2px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
@media (min-width: 768px) {
  .alb-roast-badge {
    top: 1rem;
    left: 1rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.6875rem;
  }
}

/* Overlay info block — bottom of image */
.alb-card-overlay {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  pointer-events: none;
}
@media (min-width: 768px) {
  .alb-card-overlay {
    padding: 1rem;
    gap: 0.5rem;
  }
}

/* Origin caption — small eyebrow above tasting notes */
.alb-card-overlay__origin {
  font-family: "DM Sans", sans-serif;
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(242, 240, 234, 0.75);
  font-weight: 500;
}
@media (min-width: 768px) {
  .alb-card-overlay__origin {
    font-size: 0.6875rem;
  }
}

/* Tasting notes row — hidden on mobile, visible desktop */
.alb-card-overlay__notes {
  display: none;
  flex-wrap: wrap;
  gap: 0.3rem;
}
@media (min-width: 768px) {
  .alb-card-overlay__notes {
    display: flex;
  }
}

/* Individual tasting note pill */
.alb-card-overlay__note {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  background: rgba(242, 240, 234, 0.1);
  border: 1px solid rgba(242, 240, 234, 0.15);
  color: rgba(242, 240, 234, 0.85);
  font-family: "DM Sans", sans-serif;
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  border-radius: 2px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/* ============================================
   STORY SECTION — Image with text overlay
   Constrain content width for editorial feel,
   olive eyebrow on first paragraph
   ============================================ */

/* Tighten content width when left-aligned so it reads like a magazine column */
.image-with-text-overlay .prose,
.shopify-section--image-with-text-overlay .prose,
.section--image-with-text-overlay .prose {
  max-width: 580px !important;
}

/* Olive eyebrow on the subheading block (first paragraph that's NOT a heading) */
.image-with-text-overlay .prose > p:first-child:not(.h0):not(.h1):not(.h2):not(.h3),
.shopify-section--image-with-text-overlay .prose > p:first-child:not(.h0):not(.h1):not(.h2):not(.h3),
.section--image-with-text-overlay .prose > p:first-child:not(.h0):not(.h1):not(.h2):not(.h3) {
  color: #5C6B4F !important;
  font-size: 0.6875rem !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  margin-bottom: 0.875rem !important;
}

/* Add a small olive accent line before the eyebrow */
.image-with-text-overlay .prose > p:first-child:not(.h0):not(.h1):not(.h2):not(.h3)::before,
.shopify-section--image-with-text-overlay .prose > p:first-child:not(.h0):not(.h1):not(.h2):not(.h3)::before,
.section--image-with-text-overlay .prose > p:first-child:not(.h0):not(.h1):not(.h2):not(.h3)::before {
  content: '';
  display: inline-block;
  width: 2rem;
  height: 1px;
  background: #5C6B4F;
  margin-right: 0.625rem;
  vertical-align: middle;
}

/* Paragraph spacing within Story */
.image-with-text-overlay .prose > p:not(.h0):not(.h1):not(.h2):not(.h3),
.shopify-section--image-with-text-overlay .prose > p:not(.h0):not(.h1):not(.h2):not(.h3) {
  line-height: 1.7 !important;
  font-size: 1rem !important;
}
@media (min-width: 768px) {
  .image-with-text-overlay .prose > p:not(.h0):not(.h1):not(.h2):not(.h3),
  .shopify-section--image-with-text-overlay .prose > p:not(.h0):not(.h1):not(.h2):not(.h3) {
    font-size: 1.0625rem !important;
  }
}

/* Section min-height — make it feel substantial */
.shopify-section--image-with-text-overlay .content-over-media,
.image-with-text-overlay .content-over-media {
  min-height: 75vh;
}
@media (min-width: 768px) {
  .shopify-section--image-with-text-overlay .content-over-media,
  .image-with-text-overlay .content-over-media {
    min-height: 80vh;
  }
}
/* ============================================
   RICH TEXT — Membership teaser card (aggressive)
   Forces card styling with gradient strip
   ============================================ */

/* Target ANY rich text section by its tag identifier */
[id^="shopify-section"] .rich-text,
[id^="shopify-section"] [class*="rich-text"] {
  position: relative;
}

/* Find the main content container within rich text and wrap it as a card */
[id^="shopify-section"] .rich-text > .page-width,
[id^="shopify-section"] .rich-text > .section,
[id^="shopify-section"] [class*="rich-text"] > .page-width {
  max-width: 800px !important;
  margin: 0 auto !important;
  background: #161614 !important;
  border: 1px solid rgba(242, 240, 234, 0.06) !important;
  border-radius: 2px !important;
  padding: 2.5rem 1.5rem !important;
  position: relative !important;
  overflow: hidden !important;
}

@media (min-width: 768px) {
  [id^="shopify-section"] .rich-text > .page-width,
  [id^="shopify-section"] .rich-text > .section,
  [id^="shopify-section"] [class*="rich-text"] > .page-width {
    padding: 3rem 2.5rem !important;
  }
}

/* Olive→gold gradient strip on the card */
[id^="shopify-section"] .rich-text > .page-width::before,
[id^="shopify-section"] .rich-text > .section::before,
[id^="shopify-section"] [class*="rich-text"] > .page-width::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(to right, #5C6B4F 0%, #BFA343 100%);
  z-index: 5;
}
/* Featured collection — force background to fill section width
   (not just inner content container) */
.shopify-section--featured-collection {
  background: #0B0B0B !important;
}
/* ============================================
   GEO STAMP — kill Impact's wrapper padding
   so the brand sign-off sits tight against
   the email signup section above and the footer below
   ============================================ */

.shopify-section:has(.alb-geo),
[id*="shopify-section"]:has(.alb-geo) {
  --section-outer-spacing-block: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#alb-geo-{{ section.id }}.alb-geo,
.alb-geo {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}
@media (min-width: 768px) {
  .alb-geo {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
}
/* ============================================
   ALBANOTTE — PRODUCT PAGE
   Append to assets/custom.css
   ============================================ */

/* ---- PRODUCT INTRO (eyebrow + title + meta pills + tasting notes) ---- */

.alb-product-intro {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-bottom: 0.5rem;
}

.alb-product-intro__eyebrow {
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.6875rem !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #5C6B4F !important;
  margin: 0 !important;
}

.alb-product-intro__title {
  font-family: Oswald, Impact, sans-serif !important;
  font-size: clamp(2.25rem, 4vw, 3.5rem) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: -0.01em !important;
  line-height: 0.95 !important;
  color: #F2F0EA !important;
  margin: 0 !important;
}

.alb-product-intro__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.25rem 0 0 0;
}

.alb-product-intro__meta-item {
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(242, 240, 234, 0.6) !important;
  padding: 0.375rem 0.75rem;
  border: 1px solid rgba(242, 240, 234, 0.12);
  border-radius: 999px;
  background: rgba(242, 240, 234, 0.02);
}

.alb-product-intro__tasting {
  margin-top: 0.5rem;
}

.alb-product-intro__tasting-label {
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.625rem !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(242, 240, 234, 0.5) !important;
  margin: 0 0 0.625rem 0 !important;
}

.alb-product-intro__tasting-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.alb-product-intro__tasting-pill {
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em;
  color: #F2F0EA !important;
  padding: 0.4375rem 0.875rem;
  background: rgba(92, 107, 79, 0.18);
  border: 1px solid rgba(92, 107, 79, 0.35);
  border-radius: 2px;
}

/* ---- HIDE the verbose stock title since we replace it ---- */
/* The patched template replaces the title block content,
   but some themes also render product.title elsewhere. Hide if duplicates appear: */
.product-info > [class*="product-info__title"]:not(.alb-product-intro__title) {
  display: none !important;
}

/* Hide the vendor block (says "Albanotte" generically — redundant with our brand site) */
.product-info__vendor,
.shopify-section--main-product [class*="vendor"]:not(.alb-product-intro__meta) {
  display: none !important;
}

/* ---- PRICE STYLING (touch up the default) ---- */
.product-info__price {
  margin-top: 0.5rem;
}
.product-info__price [class*="price"] {
  font-family: Oswald, sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: #F2F0EA !important;
  letter-spacing: -0.01em;
}

/* ---- VARIANT PICKER / QUANTITY / BUY BUTTONS area ---- */
.product-info__buy-buttons {
  margin-top: 1rem;
}

/* Make the ATC button match brand olive */
.product-info__buy-buttons button[type="submit"],
.product-info__buy-buttons .button--primary {
  background: #5C6B4F !important;
  color: #F2F0EA !important;
  border: none !important;
  border-radius: 2px !important;
  font-family: Oswald, sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 1rem 2rem !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.product-info__buy-buttons button[type="submit"]:hover,
.product-info__buy-buttons .button--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(92, 107, 79, 0.3);
}

/* ---- ALB PRODUCT EXTRAS (callouts + membership upsell) ---- */

.alb-product-extras {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.alb-product-callouts {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
@media (min-width: 500px) {
  .alb-product-callouts {
    flex-direction: row;
    gap: 1.25rem;
  }
}

.alb-product-callout {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.alb-product-callout__icon {
  font-size: 1rem;
  line-height: 1;
}

.alb-product-callout__text {
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  color: rgba(242, 240, 234, 0.7) !important;
  letter-spacing: 0.01em;
}

/* ---- MEMBERSHIP UPSELL CARD ---- */

.alb-product-membership {
  display: block;
  position: relative;
  background: #161614;
  border: 1px solid rgba(242, 240, 234, 0.06);
  border-radius: 2px;
  overflow: hidden;
  text-decoration: none !important;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.alb-product-membership:hover {
  border-color: rgba(196, 149, 106, 0.3);
  transform: translateY(-1px);
}

.alb-product-membership__strip {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, #5C6B4F 0%, #BFA343 100%);
}

.alb-product-membership__inner {
  padding: 1rem 1.25rem;
}

.alb-product-membership__heading {
  font-family: Oswald, sans-serif !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #F2F0EA !important;
  margin: 0 0 0.25rem 0 !important;
  line-height: 1.3;
}

.alb-product-membership__sub {
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.8125rem !important;
  color: rgba(242, 240, 234, 0.6) !important;
  margin: 0 !important;
  line-height: 1.5;
}

.alb-product-membership__cta {
  color: #C4956A !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em;
}

/* ---- DESCRIPTION POLISH ---- */
.product-info__description,
.shopify-section--main-product .prose {
  font-family: "DM Sans", sans-serif !important;
  color: rgba(242, 240, 234, 0.75) !important;
  line-height: 1.65;
}
.shopify-section--main-product .prose strong {
  color: #F2F0EA !important;
}

/* ---- ACCORDION / COLLAPSIBLE styling polish ---- */
.shopify-section--main-product details summary,
.shopify-section--main-product [class*="accordion"] summary {
  font-family: Oswald, sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.8125rem !important;
}

/* ---- SECTION SPACING ---- */
.shopify-section--main-product .product-info {
  gap: 1.25rem;
}
/* ============================================
   HIDE third-party subscription app widgets
   on product pages. Native Shopify selling-plan
   UI is NO LONGER hidden globally — it stays
   visible so subscription-only products
   (CIAO, NOTTE) can actually be purchased.
   ============================================ */

.seal-subscriptions-widget,
.seal-subscriptions,
seal-subscriptions-widget,
[class*="seal-subscriptions"],
[id^="seal-subscriptions"],
[id^="seal_subscriptions"],
.recharge-subscription,
.rc-widget,
[class*="recharge"],
.appstle_subscription_wrapper,
[class*="appstle_subscription"],
[id*="appstle_subscription"],
.bold-subscription,
[class*="bold-subscription"] {
  display: none !important;
}
/* ============================================
   PRODUCT PAGE — sticky right column (clean version)
   ============================================ */
@media (min-width: 1000px) {
  .shopify-section--main-product .product-info,
  .shopify-section--main-product safe-sticky.product-info {
    position: sticky;
    top: 100px;
    align-self: start;
  }
}
/* ============================================
   COLLECTION PAGE — tighten hero/banner
   Impact's default banner is too tall for a
   simple title + subtitle. Slim it down.
   ============================================ */

.shopify-section--collection-banner,
[id*="shopify-section"] [class*="collection-banner"] {
  padding-top: 3rem !important;
  padding-bottom: 1.5rem !important;
}
@media (min-width: 768px) {
  .shopify-section--collection-banner,
  [id*="shopify-section"] [class*="collection-banner"] {
    padding-top: 4rem !important;
    padding-bottom: 2rem !important;
  }
}

/* Kill the inner padding too if it's overcompensating */
.shopify-section--collection-banner .container,
.shopify-section--collection-banner [class*="banner__content"] {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
}

/* Subtitle ("Drop 001") — make it olive eyebrow style instead of generic gray */
.shopify-section--collection-banner [class*="subheading"],
.shopify-section--collection-banner [class*="subtitle"],
.shopify-section--collection-banner p {
  color: #5C6B4F !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  margin-top: 0.625rem !important;
}
/* === COLLECTION BANNER — TIGHTEN === */
.shopify-section--collection-banner,
[id*="shopify-section"] [class*="collection-banner"] {
  padding-top: 3rem !important;
  padding-bottom: 1.5rem !important;
  min-height: 0 !important;
}
@media (min-width: 768px) {
  .shopify-section--collection-banner,
  [id*="shopify-section"] [class*="collection-banner"] {
    padding-top: 4rem !important;
    padding-bottom: 2rem !important;
  }
}

/* Kill internal wrapper padding + forced heights */
.shopify-section--collection-banner .container,
.shopify-section--collection-banner [class*="banner__content"],
.shopify-section--collection-banner [class*="banner__wrapper"],
.shopify-section--collection-banner [class*="section-padding"] {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
}

/* Title — Oswald, tight */
.shopify-section--collection-banner h1,
.shopify-section--collection-banner [class*="banner__title"],
.shopify-section--collection-banner [class*="banner__heading"] {
  font-family: "Oswald", sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.01em !important;
  line-height: 1 !important;
  margin: 0 !important;
  color: #F2F0EA !important;
  font-size: clamp(2.5rem, 6vw, 4.5rem) !important;
}

/* Subtitle — olive eyebrow */
.shopify-section--collection-banner [class*="subheading"],
.shopify-section--collection-banner [class*="subtitle"],
.shopify-section--collection-banner p {
  color: #5C6B4F !important;
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  margin: 0.625rem 0 0 0 !important;
}
/* === ALB — Eliminate page-background gaps between sections === */

body,
main,
#MainContent,
.shopify-section,
.template-collection,
.template-product,
.template-page,
.template-index {
  background-color: #0B0B0B !important;
}

.shopify-section--header + .shopify-section {
  margin-top: 0 !important;
}

.shopify-section--header + .shopify-section [class*="section-padding"]:first-child {
  padding-top: 0 !important;
}

.shopify-section--announcement-bar {
  background-color: inherit !important;
}
/* === ALB — Distinct section background palette === */

.alb-content--warm-dark,
.alb-founder--warm-dark,
.alb-stats--warm-dark,
.alb-blends--warm-dark {
  background-color: #1F1612 !important;
}
.alb-stats--warm-dark .alb-stats__card {
  background-color: #1F1612 !important;
}

.alb-content--surface,
.alb-founder--surface,
.alb-stats--surface,
.alb-blends--surface {
  background-color: #2D3527 !important;
}
.alb-stats--surface .alb-stats__card {
  background-color: #2D3527 !important;
}
/* ============================================================
   ALB GLOBAL SECTION SPACING SYSTEM
   Paste at the very bottom of assets/custom.css.

   This replaces the scattered padding overrides above with a
   single source of truth driven by CSS variables.

   To tighten / loosen ALL section spacing site-wide:
     - Change --alb-section-y values below
     - Desktop and mobile are independent

   Sections that should be flush (no spacing) are listed in the
   "FLUSH SECTIONS" block — header, announcement bar, footer,
   trust bar, geo stamp.

   Custom ALB sections (alb-content, alb-founder, alb-stats,
   alb-blends) keep their per-section padding sliders intact —
   this system only governs Impact's default sections and the
   gaps between them.
   ============================================================ */

:root {
  /* Desktop default — comfortable breathing room */
  --alb-section-y: 56px;
}

@media (max-width: 749px) {
  :root {
    /* Mobile — half of desktop. Tight, modern, scrollable. */
    --alb-section-y: 24px;
  }
}

/* ============================================
   APPLY to all Shopify sections globally.
   Impact reads from these CSS variables, so
   overriding them here flows everywhere. */

.shopify-section {
  --section-spacing-block-start: var(--alb-section-y) !important;
  --section-spacing-block-end: var(--alb-section-y) !important;
  --section-outer-spacing-block: var(--alb-section-y) !important;
  --section-inner-spacing-block: var(--alb-section-y) !important;
  --section-inner-max-spacing-block: var(--alb-section-y) !important;
}

/* Fallback: some Impact sections apply padding directly via the
   `section-padding` utility class instead of via CSS vars. Cap
   those too. */
.shopify-section [class*="section-padding"] {
  padding-block: var(--alb-section-y) !important;
}

/* ============================================
   FLUSH SECTIONS — zero spacing, sit edge-to-edge
   with their neighbors. */

.shopify-section--header,
.shopify-section--announcement-bar,
.shopify-section--footer,
.shopify-section:has(.alb-trust-bar),
.shopify-section:has(.alb-geo),
.shopify-section:has(.alb-divider) {
  --section-spacing-block-start: 0 !important;
  --section-spacing-block-end: 0 !important;
  --section-outer-spacing-block: 0 !important;
  --section-inner-spacing-block: 0 !important;
  --section-inner-max-spacing-block: 0 !important;
  padding-block: 0 !important;
  margin-block: 0 !important;
}

/* ============================================
   HERO VIDEO — content centered, no bottom void.
   Fixes the "empty black space below buttons"
   problem visible on mobile when the hero is
   forced to 100vh and content sits at the top. */

.shopify-section--video,
.shopify-section:has(video-section),
.shopify-section:has(.video-section) {
  --section-spacing-block-end: 0 !important;
}

@media (max-width: 749px) {
  /* Reduce the hero forced-height on mobile so it doesn't
     create a void below short content. */
  .video-section,
  .section-hero,
  .shopify-section--video .content-over-media {
    min-height: 78svh !important;
    min-height: 78dvh !important;
  }

  /* Center hero content vertically so it's not pinned to the
     top of an oversized container. */
  .shopify-section--video [class*="place-self-start"],
  .shopify-section--video [class*="place-self"] {
    place-self: center !important;
  }
}

/* ============================================
   ALB CUSTOM SECTIONS — leave alone.
   These have their own per-section padding sliders
   in the theme editor. The wrapper-level overrides
   above don't touch the inner .alb-* container. */

#shopify-section[id*="alb-content"] .alb-content,
#shopify-section[id*="alb-founder"] .alb-founder,
#shopify-section[id*="alb-stats"] .alb-stats,
#shopify-section[id*="alb-blends"] .alb-blends {
  /* No override — uses inline padding from slider. */
}

/* ============================================
   MOBILE — pull horizontal padding tighter so
   text doesn't have giant left/right margins
   on phones. */

@media (max-width: 749px) {
  .shopify-section .page-width,
  .shopify-section .container,
  .shopify-section [class*="section__content"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}
/* ============================================
   PRODUCT PAGE — Biscotti shipping notice
   Only renders on products in the biscotti collection
   ============================================ */

/* ============================================
   ALBANOTTE — PRODUCT PAGE
   Append to assets/custom.css
   ============================================ */

/* ---- PRODUCT INTRO (eyebrow + title + meta pills + tasting notes) ---- */

.alb-product-intro {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-bottom: 0.5rem;
}

.alb-product-intro__eyebrow {
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.6875rem !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #5C6B4F !important;
  margin: 0 !important;
}

.alb-product-intro__title {
  font-family: Oswald, Impact, sans-serif !important;
  font-size: clamp(2.25rem, 4vw, 3.5rem) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: -0.01em !important;
  line-height: 0.95 !important;
  color: #F2F0EA !important;
  margin: 0 !important;
}

.alb-product-intro__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.25rem 0 0 0;
}

.alb-product-intro__meta-item {
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(242, 240, 234, 0.6) !important;
  padding: 0.375rem 0.75rem;
  border: 1px solid rgba(242, 240, 234, 0.12);
  border-radius: 999px;
  background: rgba(242, 240, 234, 0.02);
}

.alb-product-intro__tasting {
  margin-top: 0.5rem;
}

.alb-product-intro__tasting-label {
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.625rem !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(242, 240, 234, 0.5) !important;
  margin: 0 0 0.625rem 0 !important;
}

.alb-product-intro__tasting-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.alb-product-intro__tasting-pill {
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em;
  color: #F2F0EA !important;
  padding: 0.4375rem 0.875rem;
  background: rgba(92, 107, 79, 0.18);
  border: 1px solid rgba(92, 107, 79, 0.35);
  border-radius: 2px;
}

/* ---- HIDE the verbose stock title since we replace it ---- */
/* The patched template replaces the title block content,
   but some themes also render product.title elsewhere. Hide if duplicates appear: */
.product-info > [class*="product-info__title"]:not(.alb-product-intro__title) {
  display: none !important;
}

/* Hide the vendor block (says "Albanotte" generically — redundant with our brand site) */
.product-info__vendor,
.shopify-section--main-product [class*="vendor"]:not(.alb-product-intro__meta) {
  display: none !important;
}

/* ---- PRICE STYLING (touch up the default) ---- */
.product-info__price {
  margin-top: 0.5rem;
}
.product-info__price [class*="price"] {
  font-family: Oswald, sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: #F2F0EA !important;
  letter-spacing: -0.01em;
}

/* ---- VARIANT PICKER / QUANTITY / BUY BUTTONS area ---- */
.product-info__buy-buttons {
  margin-top: 1rem;
}

/* Make the ATC button match brand olive */
.product-info__buy-buttons button[type="submit"],
.product-info__buy-buttons .button--primary {
  background: #5C6B4F !important;
  color: #F2F0EA !important;
  border: none !important;
  border-radius: 2px !important;
  font-family: Oswald, sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 1rem 2rem !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.product-info__buy-buttons button[type="submit"]:hover,
.product-info__buy-buttons .button--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(92, 107, 79, 0.3);
}

/* ---- ALB PRODUCT EXTRAS (callouts + membership upsell) ---- */

.alb-product-extras {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.alb-product-callouts {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
@media (min-width: 500px) {
  .alb-product-callouts {
    flex-direction: row;
    gap: 1.25rem;
  }
}

.alb-product-callout {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.alb-product-callout__icon {
  font-size: 1rem;
  line-height: 1;
}

.alb-product-callout__text {
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  color: rgba(242, 240, 234, 0.7) !important;
  letter-spacing: 0.01em;
}

/* ---- MEMBERSHIP UPSELL CARD ---- */

.alb-product-membership {
  display: block;
  position: relative;
  background: #161614;
  border: 1px solid rgba(242, 240, 234, 0.06);
  border-radius: 2px;
  overflow: hidden;
  text-decoration: none !important;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.alb-product-membership:hover {
  border-color: rgba(196, 149, 106, 0.3);
  transform: translateY(-1px);
}

.alb-product-membership__strip {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(to right, #5C6B4F 0%, #BFA343 100%);
}

.alb-product-membership__inner {
  padding: 1rem 1.25rem;
}

.alb-product-membership__heading {
  font-family: Oswald, sans-serif !important;
  font-size: 0.9375rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #F2F0EA !important;
  margin: 0 0 0.25rem 0 !important;
  line-height: 1.3;
}

.alb-product-membership__sub {
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.8125rem !important;
  color: rgba(242, 240, 234, 0.6) !important;
  margin: 0 !important;
  line-height: 1.5;
}

.alb-product-membership__cta {
  color: #C4956A !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em;
}

/* ---- DESCRIPTION POLISH ---- */
.product-info__description,
.shopify-section--main-product .prose {
  font-family: "DM Sans", sans-serif !important;
  color: rgba(242, 240, 234, 0.75) !important;
  line-height: 1.65;
}
.shopify-section--main-product .prose strong {
  color: #F2F0EA !important;
}

/* ---- ACCORDION / COLLAPSIBLE styling polish ---- */
.shopify-section--main-product details summary,
.shopify-section--main-product [class*="accordion"] summary {
  font-family: Oswald, sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.8125rem !important;
}

/* ---- SECTION SPACING ---- */
.shopify-section--main-product .product-info {
  gap: 1.25rem;
}

/* ============================================
   PRODUCT PAGE — Biscotti shipping notice
   Only renders on products in the biscotti collection
   (controlled in product-info.liquid via {% if is_biscotti %})
   ============================================ */

.alb-product-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 0.875rem 1rem;
  background: rgba(196, 149, 106, 0.08);
  border: 1px solid rgba(196, 149, 106, 0.25);
  border-left: 3px solid #C4956A;
  border-radius: 2px;
  margin-bottom: 1.25rem;
}

.alb-product-notice__icon {
  font-size: 1.125rem;
  line-height: 1.2;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0.875rem;
  height: 0.875rem;
  margin-top: 0.25rem;
}

.alb-product-notice__pulse {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #C4956A;
  box-shadow: 0 0 0 0 rgba(196, 149, 106, 0.7);
  animation: alb-batch-pulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes alb-batch-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(196, 149, 106, 0.7);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(196, 149, 106, 0);
    transform: scale(1.15);
  }
}

.alb-product-notice__body {
  flex: 1;
  min-width: 0;
}

.alb-product-notice__heading {
  font-family: Oswald, sans-serif !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #C4956A !important;
  margin: 0 0 0.25rem 0 !important;
  line-height: 1.3;
}

.alb-product-notice__sub {
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.8125rem !important;
  color: rgba(242, 240, 234, 0.65) !important;
  margin: 0 !important;
  line-height: 1.45;
}

/* ============================================
   PRODUCT PAGE — Biscotti "Other Flavors" quick-add
   Sits immediately under the ATC/buy buttons
   Compressed cards with image + name + price + quick-add btn
   ============================================ */

.alb-product-others {
  margin-top: 1rem;
}

.alb-product-others__heading {
  font-family: Oswald, sans-serif !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(242, 240, 234, 0.55) !important;
  margin: 0 0 0.75rem 0 !important;
}

.alb-product-others__grid {
  display: grid;
  gap: 0.625rem;
}
.alb-product-others__grid--1 {
  grid-template-columns: 1fr;
}
.alb-product-others__grid--2 {
  grid-template-columns: repeat(2, 1fr);
}
.alb-product-others__grid--3,
.alb-product-others__grid--4,
.alb-product-others__grid--5 {
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) {
  .alb-product-others__grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.alb-product-others__card {
  display: flex;
  flex-direction: column;
  background: rgba(242, 240, 234, 0.025);
  border: 1px solid rgba(242, 240, 234, 0.06);
  border-radius: 2px;
  overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.alb-product-others__card:hover {
  border-color: rgba(196, 149, 106, 0.35);
  transform: translateY(-1px);
}

.alb-product-others__link {
  display: block;
  text-decoration: none !important;
  color: inherit !important;
}

.alb-product-others__image-wrap {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #0B0B0B;
}

.alb-product-others__image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.alb-product-others__card:hover .alb-product-others__image {
  transform: scale(1.04);
}

.alb-product-others__info {
  padding: 0.625rem 0.75rem 0.5rem 0.75rem;
}

.alb-product-others__name {
  font-family: Oswald, sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #F2F0EA !important;
  margin: 0 !important;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.alb-product-others__price {
  font-family: "DM Sans", sans-serif !important;
  font-size: 0.8125rem !important;
  color: rgba(242, 240, 234, 0.6) !important;
  margin: 0.125rem 0 0 0 !important;
}

.alb-product-others__form {
  margin: 0;
  padding: 0 0.5rem 0.5rem 0.5rem;
}

.alb-product-others__btn {
  width: 100%;
  background: transparent !important;
  color: #C4956A !important;
  font-family: Oswald, sans-serif !important;
  font-size: 0.6875rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 1px solid rgba(196, 149, 106, 0.4) !important;
  border-radius: 2px;
  padding: 0.5rem 0.5rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.alb-product-others__btn:hover:not(:disabled) {
  background: #C4956A !important;
  color: #0B0B0B !important;
  border-color: #C4956A !important;
}
.alb-product-others__btn:disabled {
  opacity: 0.7;
  cursor: wait;
}
/* ============================================
   PRODUCT PAGE — Compact qty + ATC row
   Quantity selector inline with the Add to Cart button
   Saves a row, surfaces total price for AOV nudge
   No DOM moving — uses CSS to position adjacent blocks side-by-side
   ============================================ */

/* Hide the "Quantity:" label — the +/- are obvious */
.product-info__quantity-selector .block-label,
.product-info__quantity-selector label[for$="quantity"] {
  display: none !important;
}

/* Strip wrapper padding/margin */
.product-info__quantity-selector,
.product-info__quantity-selector .form-control {
  margin: 0 !important;
  padding: 0 !important;
}

/* Style the qty selector as a compact pill */
.product-info__quantity-selector .quantity-selector,
quantity-selector {
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid rgba(242, 240, 234, 0.15) !important;
  border-radius: 2px !important;
  background: transparent !important;
  height: 56px !important;
  width: 110px !important;
  flex-shrink: 0 !important;
  overflow: hidden;
}

/* qty +/- buttons — make icons visible by setting fill/stroke on inner SVG */
.product-info__quantity-selector .quantity-selector__button {
  width: 32px !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  cursor: pointer;
  transition: background 0.15s ease;
  border: none !important;
  padding: 0 !important;
}
.product-info__quantity-selector .quantity-selector__button svg,
.product-info__quantity-selector .quantity-selector__button svg * {
  fill: rgba(242, 240, 234, 0.7) !important;
  stroke: rgba(242, 240, 234, 0.7) !important;
  width: 10px !important;
  height: 10px !important;
}
.product-info__quantity-selector .quantity-selector__button:hover {
  background: rgba(242, 240, 234, 0.04) !important;
}
.product-info__quantity-selector .quantity-selector__button:hover svg,
.product-info__quantity-selector .quantity-selector__button:hover svg * {
  fill: #F2F0EA !important;
  stroke: #F2F0EA !important;
}

.product-info__quantity-selector .quantity-selector__input {
  width: 46px !important;
  height: 100% !important;
  background: transparent !important;
  border: none !important;
  color: #F2F0EA !important;
  text-align: center !important;
  font-family: Oswald, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  -moz-appearance: textfield;
  padding: 0 !important;
}
.product-info__quantity-selector .quantity-selector__input::-webkit-outer-spin-button,
.product-info__quantity-selector .quantity-selector__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* SIDE-BY-SIDE LAYOUT (no DOM moving — uses absolute positioning + flex)
   When the product-info has both qty and buy-buttons blocks,
   position qty as floating-left, push buy-buttons to fill remaining width. */
@media (min-width: 500px) {
  .shopify-section--main-product .product-info:has(.product-info__quantity-selector):has(.product-info__buy-buttons) {
    position: relative;
  }

  .product-info__quantity-selector {
    float: left;
    margin-right: 0.625rem !important;
    width: 110px;
  }

  .product-info__quantity-selector + .product-info__buy-buttons {
    margin-left: 120px !important;
    margin-top: 0 !important;
    clear: none;
  }
}

/* ATC button — fill width, match qty height, override default Impact button styles */
.product-info__buy-buttons buy-buttons {
  display: block !important;
  width: 100% !important;
}

.product-info__buy-buttons .product-form__buttons button[type="submit"],
.product-info__buy-buttons button[type="submit"] {
  width: 100% !important;
  height: 56px !important;
  padding: 0 1rem !important;
  font-size: 0.875rem !important;
}

/* Inline "ADD TO CART — $21" formatting */
.alb-atc-with-price {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}
.alb-atc-with-price__price {
  opacity: 0.85;
  font-size: 0.875rem;
  font-weight: 600;
}

/* Shop Pay button always clears below */
.shopify-payment-button {
  clear: both;
  display: block !important;
  margin-top: 0.5rem !important;
}

/* Mobile (< 500px): stack qty on its own row above ATC */
@media (max-width: 499px) {
  .product-info__quantity-selector {
    width: 110px !important;
    margin-bottom: 0.625rem !important;
  }
}

/* ============================================
   PRODUCT PAGE — Tighten padding above title
   Kill the stacked Impact section + product-info top padding
   ============================================ */

.shopify-section--main-product .product-info {
  padding-top: 0 !important;
}

.shopify-section--main-product .product-info > *:first-child,
.shopify-section--main-product .product-info .alb-product-notice,
.shopify-section--main-product .product-info .alb-product-intro {
  margin-top: 0 !important;
}

/* Reduce the section's overall top spacing on product pages */
.shopify-section--main-product {
  --section-outer-spacing-block: 1rem !important;
}

@media (min-width: 768px) {
  .shopify-section--main-product {
    --section-outer-spacing-block: 1.5rem !important;
  }
}

/* Also nuke any top padding on the inner product layout container */
.shopify-section--main-product [class*="product__layout"],
.shopify-section--main-product [class*="product-page"] {
  padding-top: 0 !important;
}
/* Kill 24px gap above product content */
.shopify-section--main-product > .section.section--tight {
  padding-top: 0 !important;
  padding-block-start: 0 !important;
}
/* Desktop-only gap killer — pull product content up over the 24px gap */
@media (min-width: 1000px) {
  .shopify-section--main-product .product {
    margin-top: -24px !important;
  }
}
/* ─────── Bundle CTA (biscotti AOV) ─────── */

/* Wrapper: stacks on desktop, side-by-side on mobile */
.alb-qty-row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* MOBILE: qty + CTA side by side */
@media (max-width: 749px) {
  .alb-qty-row--with-bundle {
    flex-direction: row;
    align-items: stretch;
    gap: 0.625rem;
  }
  .alb-qty-row--with-bundle .product-info__quantity-selector {
    flex-shrink: 0;
  }
  .alb-qty-row--with-bundle .alb-bundle-cta {
    flex: 1;
    margin: 0;
  }
}

/* The CTA itself */
.alb-bundle-cta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  margin: 0;
  background: linear-gradient(135deg, rgba(196, 149, 106, 0.08), rgba(196, 149, 106, 0.03));
  border: 1px solid rgba(196, 149, 106, 0.35);
  border-radius: 6px;
}

.alb-bundle-cta__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #C4956A;
  color: #0B0B0B;
  font-family: Oswald, Impact, sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  line-height: 1;
}

.alb-bundle-cta__body {
  flex: 1;
  min-width: 0;
}

.alb-bundle-cta__headline {
  font-family: Oswald, Impact, sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #F2F0EA;
  margin: 0 0 0.125rem 0;
  text-transform: uppercase;
  line-height: 1.2;
}

.alb-bundle-cta__sub {
  font-family: "DM Sans", sans-serif;
  font-size: 0.75rem;
  color: rgba(242, 240, 234, 0.6);
  margin: 0;
  line-height: 1.3;
}

/* On mobile, the qty box gets tighter visual weight */
@media (max-width: 480px) {
  .alb-bundle-cta {
    padding: 0.625rem 0.75rem;
  }
  .alb-bundle-cta__headline {
    font-size: 0.8125rem;
  }
  .alb-bundle-cta__sub {
    font-size: 0.6875rem;
  }
}
/* ─────── NOTTE Bundle Upsell Selector ─────── */
.alb-notte-upsell {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin: 0 0 1rem 0;
}

.alb-notte-opt {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1rem;
  background: rgba(242, 240, 234, 0.02);
  border: 1.5px solid rgba(242, 240, 234, 0.12);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
  position: relative;
}

.alb-notte-opt:hover {
  border-color: rgba(242, 240, 234, 0.25);
}

.alb-notte-opt[data-selected="true"] {
  border-color: #F2F0EA;
  background: rgba(242, 240, 234, 0.04);
}

.alb-notte-opt--notte[data-selected="true"] {
  border-color: #C4956A;
  background: linear-gradient(135deg, rgba(196, 149, 106, 0.06), rgba(196, 149, 106, 0.02));
}

.alb-notte-opt__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.alb-notte-opt__radio {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 1.5px solid rgba(242, 240, 234, 0.4);
  border-radius: 50%;
  margin-top: 2px;
  position: relative;
  transition: border-color 0.2s ease;
}

.alb-notte-opt[data-selected="true"] .alb-notte-opt__radio {
  border-color: #F2F0EA;
}

.alb-notte-opt--notte[data-selected="true"] .alb-notte-opt__radio {
  border-color: #C4956A;
}

.alb-notte-opt[data-selected="true"] .alb-notte-opt__radio::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #F2F0EA;
}

.alb-notte-opt--notte[data-selected="true"] .alb-notte-opt__radio::after {
  background: #C4956A;
}

.alb-notte-opt__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.alb-notte-opt__badge {
  display: inline-flex;
  align-self: flex-start;
  background: #C4956A;
  color: #0B0B0B;
  font-family: Oswald, Impact, sans-serif;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  margin-bottom: 0.25rem;
  line-height: 1;
}

.alb-notte-opt__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.alb-notte-opt__title {
  font-family: Oswald, Impact, sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #F2F0EA;
  text-transform: uppercase;
  line-height: 1.2;
}

.alb-notte-opt__price {
  font-family: Oswald, Impact, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #F2F0EA;
  white-space: nowrap;
  line-height: 1.2;
}

.alb-notte-opt__sub {
  font-family: "DM Sans", sans-serif;
  font-size: 0.8125rem;
  color: rgba(242, 240, 234, 0.65);
  line-height: 1.4;
}

.alb-notte-opt__sub strong {
  color: #C4956A;
  font-weight: 600;
}

.alb-notte-opt__perks {
  list-style: none;
  padding: 0.5rem 0 0 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.alb-notte-opt__perks li {
  font-family: "DM Sans", sans-serif;
  font-size: 0.75rem;
  color: rgba(242, 240, 234, 0.7);
  padding-left: 1rem;
  position: relative;
  line-height: 1.4;
}

.alb-notte-opt__perks li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #C4956A;
  font-weight: 700;
}

/* Mobile */
@media (max-width: 480px) {
  .alb-notte-opt {
    padding: 0.875rem;
    gap: 0.75rem;
  }
  .alb-notte-opt__title {
    font-size: 0.875rem;
  }
  .alb-notte-opt__price {
    font-size: 0.9375rem;
  }
  .alb-notte-opt__sub {
    font-size: 0.75rem;
  }
  .alb-notte-opt__perks li {
    font-size: 0.6875rem;
  }
}

/* Hide old membership card if it still renders anywhere */
.alb-product-membership { display: none !important; }
/* BISCOTTI LOVER tagline */
.alb-notte-opt__tagline {
  font-family: "DM Sans", sans-serif;
  font-size: 0.75rem;
  font-style: italic;
  color: rgba(196, 149, 106, 0.85);
  margin-top: 0.5rem;
  display: block;
}
/* ═══════════════════════════════════════════════════════════════════
   ALBANOTTE — Custom CSS additions
   Append these blocks to the bottom of assets/custom.css
   ═══════════════════════════════════════════════════════════════════ */


/* ─────── Desktop gap fix (kill 24px above product content) ─────── */
@media (min-width: 1000px) {
  .shopify-section--main-product .product {
    margin-top: -24px !important;
  }
}


/* ─────── Bundle CTA wrapper (qty row) ─────── */
.alb-qty-row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1rem;
}

@media (max-width: 749px) {
  .alb-qty-row--with-bundle {
    flex-direction: row;
    align-items: stretch;
    gap: 0.625rem;
  }
  .alb-qty-row--with-bundle .product-info__quantity-selector {
    flex-shrink: 0;
  }
  .alb-qty-row--with-bundle .alb-bundle-cta {
    flex: 1;
    margin: 0;
  }
}


/* ─────── Biscotti "Mix any 3, save $3" Bundle CTA ─────── */
.alb-bundle-cta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  margin: 0;
  background: linear-gradient(135deg, rgba(196, 149, 106, 0.08), rgba(196, 149, 106, 0.03));
  border: 1px solid rgba(196, 149, 106, 0.35);
  border-radius: 6px;
}

.alb-bundle-cta__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: #C4956A;
  color: #0B0B0B;
  font-family: Oswald, Impact, sans-serif;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  line-height: 1;
}

.alb-bundle-cta__body {
  flex: 1;
  min-width: 0;
}

.alb-bundle-cta__headline {
  font-family: Oswald, Impact, sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #F2F0EA;
  margin: 0 0 0.125rem 0;
  text-transform: uppercase;
  line-height: 1.2;
}

.alb-bundle-cta__sub {
  font-family: "DM Sans", sans-serif;
  font-size: 0.75rem;
  color: rgba(242, 240, 234, 0.6);
  margin: 0;
  line-height: 1.3;
}

@media (max-width: 480px) {
  .alb-bundle-cta {
    padding: 0.625rem 0.75rem;
  }
  .alb-bundle-cta__headline {
    font-size: 0.8125rem;
  }
  .alb-bundle-cta__sub {
    font-size: 0.6875rem;
  }
}


/* ─────── Membership Upsell Selector (BISCOTTI LOVER + NOTTE) ─────── */
.alb-notte-upsell {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin: 0 0 1rem 0;
}

.alb-notte-opt {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1rem;
  background: rgba(242, 240, 234, 0.02);
  border: 1.5px solid rgba(242, 240, 234, 0.12);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
  position: relative;
}

.alb-notte-opt:hover {
  border-color: rgba(242, 240, 234, 0.25);
}

.alb-notte-opt[data-selected="true"] {
  border-color: #F2F0EA;
  background: rgba(242, 240, 234, 0.04);
}

.alb-notte-opt--notte[data-selected="true"] {
  border-color: #C4956A;
  background: linear-gradient(135deg, rgba(196, 149, 106, 0.06), rgba(196, 149, 106, 0.02));
}

.alb-notte-opt__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.alb-notte-opt__radio {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 1.5px solid rgba(242, 240, 234, 0.4);
  border-radius: 50%;
  margin-top: 2px;
  position: relative;
  transition: border-color 0.2s ease;
}

.alb-notte-opt[data-selected="true"] .alb-notte-opt__radio {
  border-color: #F2F0EA;
}

.alb-notte-opt--notte[data-selected="true"] .alb-notte-opt__radio {
  border-color: #C4956A;
}

.alb-notte-opt[data-selected="true"] .alb-notte-opt__radio::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #F2F0EA;
}

.alb-notte-opt--notte[data-selected="true"] .alb-notte-opt__radio::after {
  background: #C4956A;
}

.alb-notte-opt__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.alb-notte-opt__badge {
  display: inline-flex;
  align-self: flex-start;
  background: #C4956A;
  color: #0B0B0B;
  font-family: Oswald, Impact, sans-serif;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  margin-bottom: 0.25rem;
  line-height: 1;
}

.alb-notte-opt__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.alb-notte-opt__title {
  font-family: Oswald, Impact, sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #F2F0EA;
  text-transform: uppercase;
  line-height: 1.2;
}

.alb-notte-opt__price {
  font-family: Oswald, Impact, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #F2F0EA;
  white-space: nowrap;
  line-height: 1.2;
}

.alb-notte-opt__sub {
  font-family: "DM Sans", sans-serif;
  font-size: 0.8125rem;
  color: rgba(242, 240, 234, 0.65);
  line-height: 1.4;
}

.alb-notte-opt__sub strong {
  color: #C4956A;
  font-weight: 600;
}

.alb-notte-opt__perks {
  list-style: none;
  padding: 0.5rem 0 0 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.alb-notte-opt__perks li {
  font-family: "DM Sans", sans-serif;
  font-size: 0.75rem;
  color: rgba(242, 240, 234, 0.7);
  padding-left: 1rem;
  position: relative;
  line-height: 1.4;
}

.alb-notte-opt__perks li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #C4956A;
  font-weight: 700;
}

.alb-notte-opt__tagline {
  font-family: "DM Sans", sans-serif;
  font-size: 0.75rem;
  font-style: italic;
  color: rgba(196, 149, 106, 0.85);
  margin-top: 0.5rem;
  display: block;
}

@media (max-width: 480px) {
  .alb-notte-opt {
    padding: 0.875rem;
    gap: 0.75rem;
  }
  .alb-notte-opt__title {
    font-size: 0.875rem;
  }
  .alb-notte-opt__price {
    font-size: 0.9375rem;
  }
  .alb-notte-opt__sub {
    font-size: 0.75rem;
  }
  .alb-notte-opt__perks li {
    font-size: 0.6875rem;
  }
}

/* Hide legacy membership link card if it still renders anywhere */
.alb-product-membership { display: none !important; }
/* ─────── Inline shipping notice on biscotti pages ─────── */
.alb-product-intro__eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.alb-product-intro__eyebrow-row .alb-product-intro__eyebrow {
  margin: 0;
}

.alb-product-intro__shipping {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "DM Sans", sans-serif;
  font-size: 0.6875rem;
  font-weight: 500;
  color: rgba(196, 149, 106, 0.95);
  letter-spacing: 0.02em;
  line-height: 1;
}

.alb-product-intro__shipping-dot {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 8px;
  height: 8px;
  flex-shrink: 0;
}

.alb-product-intro__shipping-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #C4956A;
  border-radius: 50%;
}

.alb-product-intro__shipping-pulse {
  position: absolute;
  inset: 0;
  background: #C4956A;
  border-radius: 50%;
  animation: alb-shipping-pulse 1.8s ease-out infinite;
  opacity: 0.6;
}

@keyframes alb-shipping-pulse {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}

.alb-product-intro__shipping-text {
  white-space: nowrap;
}

@media (max-width: 480px) {
  .alb-product-intro__shipping-text {
    white-space: normal;
  }
  .alb-product-intro__shipping {
    font-size: 0.625rem;
  }
}

/* Hide the old standalone notice if it still renders from cache anywhere */
.alb-product-notice { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   ALBANOTTE — Compact upsell row + batch-in-oven eyebrow
   Appended; supersedes earlier rules due to cascade order
   ═══════════════════════════════════════════════════════════════════ */

/* ─────── Batch-in-oven inline eyebrow (replaces "BISCOTTI" text on biscotti pages) ─────── */
.alb-product-intro__eyebrow--batch {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  font-family: Oswald, Impact, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #5C6B4F; /* olive — matches old BISCOTTI eyebrow color */
  margin: 0 0 0.5rem 0;
  text-transform: uppercase;
  line-height: 1;
}

.alb-product-intro__shipping-dot {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 9px;
  height: 9px;
  flex-shrink: 0;
}

.alb-product-intro__shipping-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #5C6B4F;
  border-radius: 50%;
}

.alb-product-intro__shipping-pulse {
  position: absolute;
  inset: 0;
  background: #5C6B4F;
  border-radius: 50%;
  animation: alb-shipping-pulse 1.8s ease-out infinite;
  opacity: 0.6;
}

@keyframes alb-shipping-pulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2.8); opacity: 0; }
}

@media (max-width: 480px) {
  .alb-product-intro__eyebrow--batch {
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
  }
}

/* Hide the old standalone box and stale qty-row CSS path */
.alb-product-notice { display: none !important; }
.alb-qty-row .alb-bundle-cta { display: none !important; }
.alb-qty-row--with-bundle { flex-direction: column !important; }
.alb-qty-row--with-bundle .alb-bundle-cta { display: none !important; }


/* ─────── Top row: compact "Just the biscotti" pill + inline Bundle CTA ─────── */
.alb-notte-upsell__top-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  margin-bottom: 0.625rem;
}

.alb-notte-upsell__top-row > * {
  flex: 1;
  min-width: 0;
}

/* Compact standard pill (sits next to bundle CTA) */
.alb-notte-opt--compact {
  padding: 0.625rem 0.75rem !important;
  gap: 0.5rem !important;
  align-items: center !important;
}

.alb-notte-opt--compact .alb-notte-opt__body {
  gap: 0 !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.alb-notte-opt--compact .alb-notte-opt__title {
  font-size: 0.75rem !important;
  letter-spacing: 0.04em;
}

.alb-notte-opt--compact .alb-notte-opt__price {
  font-size: 0.875rem !important;
}

.alb-notte-opt--compact .alb-notte-opt__radio {
  width: 16px !important;
  height: 16px !important;
  margin-top: 0 !important;
}

.alb-notte-opt--compact .alb-notte-opt__radio::after {
  width: 8px !important;
  height: 8px !important;
}

/* Inline bundle CTA (sits next to compact standard pill) */
.alb-bundle-cta--inline {
  padding: 0.625rem 0.75rem !important;
  gap: 0.5rem !important;
  margin: 0 !important;
  display: flex !important;
}

.alb-bundle-cta--inline .alb-bundle-cta__headline {
  font-size: 0.75rem !important;
  letter-spacing: 0.04em;
}

.alb-bundle-cta--inline .alb-bundle-cta__sub {
  font-size: 0.625rem !important;
}

.alb-bundle-cta--inline .alb-bundle-cta__badge {
  font-size: 0.5625rem !important;
  padding: 0.2rem 0.4rem !important;
}

/* Stack the top row on very narrow screens */
@media (max-width: 480px) {
  .alb-notte-upsell__top-row {
    flex-direction: column;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   ALBANOTTE — Final layout pass:
   • Olive hairline strip on batch eyebrow
   • Bundle CTA inline next to qty selector
   • Membership card as toggle (no standard pill)
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Olive hairline strip + pulsing dot on batch eyebrow ─── */
.alb-product-intro__eyebrow--batch {
  position: relative;
  padding-left: 0.875rem !important;
}

.alb-product-intro__eyebrow--batch::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 14px;
  background: #5C6B4F;
  border-radius: 2px;
}

/* ─── Qty selector + Bundle CTA side by side ─── */
.alb-qty-row {
  display: flex !important;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1rem;
}

.alb-qty-row--with-bundle {
  flex-direction: row !important;
  align-items: stretch;
  gap: 0.625rem;
}

.alb-qty-row--with-bundle .product-info__quantity-selector {
  flex-shrink: 0;
}

.alb-qty-row--with-bundle .alb-bundle-cta--qty-inline {
  flex: 1;
  margin: 0 !important;
  display: flex !important;
  align-items: center;
}

.alb-bundle-cta--qty-inline {
  padding: 0.625rem 0.875rem !important;
  gap: 0.625rem !important;
}

.alb-bundle-cta--qty-inline .alb-bundle-cta__headline {
  font-size: 0.8125rem !important;
  letter-spacing: 0.04em;
}

.alb-bundle-cta--qty-inline .alb-bundle-cta__sub {
  font-size: 0.6875rem !important;
}

@media (max-width: 480px) {
  .alb-qty-row--with-bundle {
    gap: 0.5rem !important;
  }
  .alb-bundle-cta--qty-inline {
    padding: 0.5rem 0.625rem !important;
  }
  .alb-bundle-cta--qty-inline .alb-bundle-cta__headline {
    font-size: 0.75rem !important;
  }
  .alb-bundle-cta--qty-inline .alb-bundle-cta__sub {
    font-size: 0.625rem !important;
  }
}

/* ─── Hide the stale "top row" containers from the previous iteration ─── */
.alb-notte-upsell__top-row { display: none !important; }
.alb-notte-opt--compact { display: none !important; }
.alb-bundle-cta--inline { display: none !important; }

/* ─── Toggleable membership card (cursor + slight hover lift) ─── */
.alb-notte-opt--toggleable {
  cursor: pointer;
}

.alb-notte-opt--toggleable:hover {
  border-color: rgba(196, 149, 106, 0.55);
}

/* Hide the hidden default radio */
.alb-notte-upsell > input[type="radio"][hidden] {
  display: none !important;
}
/* ═══════════════════════════════════════════════════════════════════
   Judge.me reviews — ALBANOTTE brand styling (v3 — REVAMPED WIDGET)
   Your widget is Judge.me's new revamped widget. Text elements use
   `jm-text`, container is `jm-review-widget` + `jdgm-widget`.
   We scope to `.jdgm-widget` (the modal does NOT have this class,
   so the modal is never affected).
   ═══════════════════════════════════════════════════════════════════ */

/* ── ALL widget text → off-white ── */
.jdgm-widget,
.jdgm-widget .jm-text,
.jdgm-widget p,
.jdgm-widget span,
.jdgm-widget div,
.jdgm-widget a {
  color: #F2F0EA !important;
}

/* Heading "Customer Reviews" → Oswald */
.jdgm-widget .jm-review-widget-minimal-header__title,
.jdgm-widget [class*="header__title"] {
  color: #F2F0EA !important;
  font-family: Oswald, Impact, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}

/* Muted secondary text — "1 review", dates */
.jdgm-widget [class*="review-count"],
.jdgm-widget [class*="timestamp"],
.jdgm-widget [class*="date"],
.jdgm-widget [class*="--subdued"],
.jdgm-widget [class*="caption"] {
  color: rgba(242, 240, 234, 0.5) !important;
}

/* Review body — slightly softened */
.jdgm-widget [class*="review-body"],
.jdgm-widget [class*="review__body"],
.jdgm-widget [class*="content__body"] {
  color: rgba(242, 240, 234, 0.85) !important;
}

/* Reviewer name — bold off-white */
.jdgm-widget [class*="reviewer-name"],
.jdgm-widget [class*="review__author"],
.jdgm-widget [class*="author"] {
  color: #F2F0EA !important;
  font-weight: 700 !important;
}

/* ── STARS — olive ──
   New widget renders stars as SVG. Catch both SVG fill and old font icons. */
.jdgm-widget .jm-star svg,
.jdgm-widget [class*="star"] svg,
.jdgm-widget [class*="star"] path {
  fill: #5C6B4F !important;
  color: #5C6B4F !important;
}
.jdgm-widget [class*="star"][class*="--empty"] svg,
.jdgm-widget [class*="star"][class*="--off"] svg,
.jdgm-widget [class*="star"][class*="--empty"] path,
.jdgm-widget [class*="star"][class*="--off"] path {
  fill: rgba(242, 240, 234, 0.18) !important;
}
/* Old font-based stars fallback */
.jdgm-widget .jdgm-star.jdgm--on,
.jdgm-widget .jdgm-star.jdgm--half {
  color: #5C6B4F !important;
}
.jdgm-widget .jdgm-star.jdgm--off {
  color: rgba(242, 240, 234, 0.18) !important;
}

/* ── Avatar circle — olive ── */
.jdgm-widget [class*="avatar"],
.jdgm-widget [class*="reviewer-avatar"],
.jdgm-widget .jdgm-rev__icon {
  background-color: #5C6B4F !important;
  color: #F2F0EA !important;
  font-family: Oswald, Impact, sans-serif !important;
}

/* ── Verified badge ── */
.jdgm-widget [class*="badge"] {
  color: rgba(242, 240, 234, 0.65) !important;
  border-color: rgba(242, 240, 234, 0.25) !important;
}

/* ── "WRITE A REVIEW" button — jm-button primary ── */
.jm-button.jm-button--primary,
.jm-action-buttons__button.jm-button--primary,
button.jm-button--primary {
  background-color: #5C6B4F !important;
  background-image: none !important;
  color: #F2F0EA !important;
  border: none !important;
  border-radius: 6px !important;
  font-family: Oswald, Impact, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}
.jm-button.jm-button--primary *,
button.jm-button--primary * {
  color: #F2F0EA !important;
}
.jm-button.jm-button--primary:hover,
button.jm-button--primary:hover {
  background-color: #4a5640 !important;
}

/* ── Filter + sort icon buttons — outlined, white icons ── */
.jdgm-widget [class*="filter"] button,
.jdgm-widget [class*="sort"] button,
.jdgm-widget button[class*="icon"] {
  background-color: transparent !important;
  border: 1px solid rgba(242, 240, 234, 0.2) !important;
  border-radius: 6px !important;
}
.jdgm-widget [class*="filter"] svg path,
.jdgm-widget [class*="sort"] svg path,
.jdgm-widget button[class*="icon"] svg path {
  fill: #F2F0EA !important;
  stroke: #F2F0EA !important;
}

/* ── Histogram bars ── */
.jdgm-widget [class*="histogram"] [class*="bar-fill"],
.jdgm-widget [class*="histogram"] [class*="bar-content"] {
  background-color: #5C6B4F !important;
}
.jdgm-widget [class*="histogram"] [class*="bar"]:not([class*="fill"]):not([class*="content"]) {
  background-color: rgba(242, 240, 234, 0.08) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   MODAL — untouched. It has class `jdgm-write-review-modal` and is a
   direct <body> child. None of the .jdgm-widget rules above can reach
   it. Judge.me's own modal styling renders as designed.
   ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════
   Text-with-icons section — separate it from sections above with a
   faint hairline seam only. No background tint (the tint read as a
   "glow" between two pure-black sections).
   ═══════════════════════════════════════════════════════════════════ */
.shopify-section--text-with-icons {
  border-top: 1px solid rgba(242, 240, 234, 0.06) !important; /* faint neutral seam */
  position: relative;
}

/* Breathing room so the section reads as its own block */
.shopify-section--text-with-icons .section {
  padding-block: 3rem !important;
}

@media (min-width: 1000px) {
  .shopify-section--text-with-icons .section {
    padding-block: 4rem !important;
  }
}