/** Shopify CDN: Minification failed

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

**/

/* ===== Header Logo Max Height (viewport-height relative) ===== */
/* Visual extent = max-height × scale(5). At 8vh: visual = 40vh on any screen.
   clamp() ensures a sensible floor on tiny phones and a cap on large monitors.
   Tune the middle value (8vh) to make the logo larger or smaller at the top. */
body.is-top .header__logo-image,
body.is-top .header__logo-image--transparent {
  max-height: clamp(50px, 8vh, 93px) !important;
}

/* Short screens (< 900px tall): header.liquid drops scale to 4, so allow a touch more height */
@media (max-height: 900px) {
  body.is-top .header__logo-image,
  body.is-top .header__logo-image--transparent {
    max-height: clamp(50px, 9vh, 93px) !important;
  }
}
/* Mobile Header - Stack icons 2 rows: 2 on top, 1 bottom right */
@media screen and (max-width: 699px) {
  /* Ensure consistent header height on mobile for home page */
  .template-index .header {
    min-height: 60px !important;
    padding-block: 0.5rem !important;
  }
  
  .header__secondary-nav > ul {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: dense;
    justify-items: end;
    align-items: center;
    gap: 0.625rem 0.9rem;
    width: 100%;
  }
  
  /* First two items fill first row */
  .header__secondary-nav li:nth-child(1),
  .header__secondary-nav li:nth-child(2) {
    /* auto placement in grid */
  }
  
  /* Third item goes to second row, second column (right side) */
  .header__secondary-nav li:nth-child(3) {
    grid-column: 2;
  }
  
  /* Completely hide 3rd drawer/panel on mobile */
  .header-sidebar__third-panel,
  .header-sidebar__panel3 {
    display: none !important;
  }
  
}

@media (min-width: 640px) {
  /* your existing grid layout */
  x-tabs.content-tabs::part(tab-list) {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-items: center;
    align-items: center;
    width: 100%;
  }

  /* add this to pad out each tab button */
  x-tabs.content-tabs > button[slot="title"] {
    padding: 1rem 3rem;
  }
}

.content-tabs--center::part(tab-panel-list){
  width: 100% !important;
  text-align: left !important;
}
/* Food Pairing Tab - Product Template */
/* Scoped and reset */

.food-pairing-recipes .paring-title{
  font-family: var(--text-font-family);
  margin-bottom: 20px;
}
.food-pairing-recipes .wine-food-pairings .wine-food-item {
  display: flex;
  align-items: center;      /* ✅ vertical center */
  gap: 10px;
  margin: 0;               /* ✅ prevent external spacing */
  padding: 0;
  line-height: 1.2;        /* consistent height */
}

.food-pairing-recipes .wine-food-pairings .wine-food-item > img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  flex-shrink: 0;
  margin: 0;              /* ✅ no bottom gap */
}

.food-pairing-recipes .wine-food-pairings .wine-food-item > span {
  display: inline-block;
  margin: 0;              /* ✅ removes theme text margins */
  padding: 0;
}

/* Grid reset */
.food-pairing-recipes .wine-food-pairings {
  display: flex;
  justify-content: space-evenly;
  gap: 20px;
  margin: 0;              /* ✅ prevent inherited grid spacing */
  padding: 0;
}

/* Tablet / Mobile layout */
@media (max-width: 768px) {
  .food-pairing-recipes .wine-food-pairings {
    grid-template-columns: repeat(2, 1fr);
  }
  .food-pairing-recipes .wine-food-pairings .wine-food-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .food-pairing-recipes .wine-food-pairings .wine-food-item > span {
    margin-top: 8px; /* ✅ add back controlled spacing under icon */
  }
}

/* 2-column grid for recipes */
.food-pairing-recipes .wine-recipes {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 items per row */
  gap: 30px; /* spacing between items */
  margin: 0;
  padding: 0;
}

/* Each recipe becomes a left/right layout */
.food-pairing-recipes .wine-recipes .wine-recipes-item {
  display: grid;
  grid-template-columns: 45% 1fr; /* left image fixed, right text flexible */
  align-items: center; /* vertically align text with image */
  gap: 20px;
  margin: 0;
  padding: 0;
}

.food-pairing-recipes .wine-recipes .wine-recipes-item img {
  width: 100%;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  flex-shrink: 0;
  margin: 0;
}

.food-pairing-recipes .wine-recipes .wine-recipes-item h4 {
  margin: 0 0 5px 0;
  font-size: 1.1rem;
  font-weight: bold;
}

.food-pairing-recipes .wine-recipes .wine-recipes-item p {
  margin: 0;
  font-size: 0.95rem;
  color: #555;
}

/* Mobile: stack each recipe full-width, image above text */
@media (max-width: 768px) {
  .food-pairing-recipes .wine-recipes {
    grid-template-columns: 1fr; /* single column on mobile */
  }
  .food-pairing-recipes .wine-recipes .wine-recipes-item {
    grid-template-columns: 1fr; /* image above text */
    text-align: center;
  }
  .food-pairing-recipes .wine-recipes .wine-recipes-item img {
    margin: 0 auto 10px auto; /* center image on mobile */
  }
}



  /** End Food Pairing Tab **/

  /* Technical Specs Tab - Product Template */
  .wine-technical-specs {
    display: flex;
    flex-wrap: wrap;         /* wrap onto multiple lines if needed */
    gap: 20px;               /* space between items */
    margin: 0;
    padding: 12px 16px;
    margin-top: 40px;
  }
  .wine-technical-specs-title{
    font-family: var(--text-font-family);
  }

  .wine-technical-specs .spec {
    display: flex;
    align-items: center;     /* vertical align label + value */
    gap: 8px;                /* space between label and value */
    flex: 1 1 calc(20% - 20px); /* 4 per row with gap accounted for */
    font-size: 16px;
    line-height: 1.4;
    margin: 0;
  }

  .wine-technical-specs .spec .first {
    font-weight: 400;        /* label style */
    color: #6A5A40;
    font-size: 18px;
    white-space: nowrap;     /* keep label on one line */
  }

  .wine-technical-specs .spec .second {
    font-weight: 700;        /* value bolded */
  }

  @media (max-width: 768px) {
    .wine-technical-specs .spec {
      font-size: 14px;
      align-items: flex-start; /* align to top when value wraps */
    }
    .wine-technical-specs .spec .first {
      font-size: 15px;
    }
    .wine-technical-specs .spec .second {
      flex: 1;                 /* allow value to wrap to multiple lines */
    }
  }

  /* Tablet: 2 per row */
  @media (max-width: 768px) {
    .wine-technical-specs .spec {
      flex: 1 1 calc(50% - 20px); /* 2 per row */
    }
  }

    /** End Tech Specs Tab **/

  /* Awards Tab - Product Template */
      .wine-awards{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:20px;
  }
  @media (max-width:768px){
    .wine-awards{ grid-template-columns:1fr; }
  }

  /* card */
  .wine-award-card{
    display:grid;
    grid-template-columns:30% 1fr;
    grid-template-areas:
      "media tag"
      "media title"
      "quote quote";
    gap:8px 16px;
    align-items:start;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:16px;
    background:#fff;
  }

  .wa-media{ grid-area: media; }
  .wa-tag{ grid-area: tag; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:#6b7280; }
  .wa-title{ grid-area: title; font-size:18px; font-weight:700; line-height:1.3; margin:0; }
  .wa-quote{ grid-area: quote; font-size:14px; color:#374151; margin-top:6px; }

  @media (max-width: 768px) {
    .wa-tag{ font-size:10px; }
    .wa-title{ font-size:16px; }
    .wa-quote{ font-size:13px; }
  }

  .wa-media img{
    width:100%;
    height:auto;
    display:block;
    border-radius:10px;
  }
  .wa-number{
    display:flex; align-items:center; justify-content:center;
    width:100%; aspect-ratio:1/1;
    border-radius:10px; border:1px dashed #cbd5e1;
    font-size:28px; font-weight:700; color:#111827; background:#f8fafc;
  }
      /** End Awards Tab **/


/** Custom Menu Images **/
.menu-item-overlay-link {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
}

.menu-item__image-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
}

.menu-item__image-wrapper img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.menu-item__overlay-text {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 8px 12px;
  background: rgba(0,0,0,.5);
  color: #fff;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
}

/* Mobile visibility helpers */
.show-on-mobile { display: none; }
.hide-on-mobile { /* default visible on desktop */ }

@media (max-width: 749px) {
  .hide-on-mobile { display: none; }          /* hide image tile when flag is off */
  .show-on-mobile { display: inline; }        /* show text fallback on mobile when flag is off */
  .visually-hidden-mobile {
    position: absolute!important;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
}

/** Testimonials Fonts **/
.testimonial-item {
  max-width: 45vw !important;
}
.testimonial-item .prose {
  font-style: italic;
}
.testimonial-item span.metafield-multi_line_text_field {
  font-family: var(--heading-font-family);
  font-size:2.8rem;
  color:#fff;
}
.testimonial-item p.text-base {
  text-transform: uppercase;
  font-size: 1.2rem;
}

/* Mobile adjustments for testimonials */
@media (max-width: 768px) {
  .testimonial-item {
    max-width: 90vw !important;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .testimonial-item span.metafield-multi_line_text_field {
    font-size: 1.6rem;
    line-height: 1.3;
  }
}

/** FAQ width **/
.faq__content {
    flex-basis: 850px;
}


/** Fonts **/
/* Typography now controlled via section settings instead of hardcoded CSS */

.shopify-section--collection-list .prose .h6,
.shopify-section--text-with-icons .h6,
.shopify-section--featured-product .prose .h6{
  text-transform:uppercase
}
.prose .h6, .h6
{
  font-family: var(--text-font-family);
}

.button{
  font-weight: bold;
}

.shopify-section--apps h2 {
  font-family: var(--text-font-family);
  font-weight:400
}

/* Featured Product Video Fixes */
.shopify-section--featured-product .product-gallery__media[data-media-type="video"] video-media,
.shopify-section--featured-product .product-gallery__media[data-media-type="external_video"] video-media {
  max-height: 600px;
}

.shopify-section--featured-product .product-gallery__media[data-media-type="video"] video-media > video,
.shopify-section--featured-product .product-gallery__media[data-media-type="external_video"] video-media > video,
.shopify-section--featured-product .product-gallery__media[data-media-type="external_video"] video-media > iframe {
  object-fit: contain !important;
  max-height: 600px;
}

/* Featured product layout - keep button centered on desktop */
.shopify-section--featured-product .product {
  display: flex;
  align-items: end;
  gap: 40px;
  max-height: 800px;
}

.shopify-section--featured-product .product img {
  max-height: 700px;
  object-fit: contain;
}

@media screen and (min-width: 768px) {
  .shopify-section--featured-product .product > *:not(.product-gallery) {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Mobile: Force gallery to stack above product info */
@media screen and (max-width: 767px) {
  .shopify-section--featured-product .product {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
    max-height: none !important;
    align-items: start !important;
  }
  
  .shopify-section--featured-product .product-gallery {
    width: 100% !important;
    order: 1;
  }
  
  .shopify-section--featured-product .product-info {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    order: 2;
  }
}

/** insta feed reordering **/
.instafeed-bottom-link-wrapper a {
  font-family: var(--heading-font-family);
  font-size:3.5rem !important;
}
.instafeed-bottom-link-wrapper a:after{
  display:none !important;
}

@media (max-width: 768px) {
  .instafeed-bottom-link-wrapper a {
    font-size: 2rem !important;
  }
}


.announcement-bar__carousel .heading{
  font-family: var(--text-font-family) !important;
}

.product-title{
   font-family: var(--text-font-family) !important;
   text-transform: uppercase;
}

.shopify-section--blog-posts .blog-post-card__image {
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  height: auto !important;
  width: 100% !important;
  display: block;
}

/* Footer first link bold */
.footer ul li:not(:has(> a.single-link)):first-of-type,
.footer ul li:not(:has(> a.single-link)):nth-child(1 of :not(:has(> a.single-link))) {
  font-weight: bold;
}
li:has(.single-link) {
  font-weight: bold;
  margin: 10px 0;
}

/* Header Panel Customization */
.header-sidebar__sub-panel .header-sidebar__linklist.divide-y > li {
  border-bottom: none !important;
}

.header-sidebar__sub-panel .header-sidebar__linklist.divide-y > :not([hidden]) ~ :not([hidden]) {
  border-block-start-width: 0 !important;
}

.header-sidebar__sub-panel .header-sidebar__linklist-button {
  padding-block-start: 0.5rem !important;
  padding-block-end: 0.5rem !important;
}

.header-sidebar__sub-panel .header-sidebar__nested-linklist a {
  padding-block-start: 0.5rem !important;
  padding-block-end: 0.5rem !important;
}

/* Hide accordion summary (Subregions heading) */
.header-sidebar__sub-panel accordion-disclosure summary {
  display: none !important;
}

/* Footer copyright centered with body text font */
.footer__aside {
  justify-content: center !important;
}

.footer__aside > p {
  text-align: center !important;
  font-family: var(--text-font-family) !important;
}



/* PDP only: keep flags under sticky header & bars, but above the image */
.shopify-section--main-product .product-gallery { position: relative; }          /* create a local context */
.shopify-section--main-product .product-gallery .product-flags {
  position: absolute;
  left: .5rem;
  top: .5rem;
  z-index: 2;             /* low layer so header can sit above */
  pointer-events: none;   /* avoid blocking zoom/next clicks */
}

/* Ensure the main media sits below the flags inside the gallery */
.shopify-section--main-product .product-gallery .product-gallery__media {
  position: relative;
  z-index: 1;
}

/* (Optional) if you want the flags a bit larger on PDP only */
.shopify-section--main-product .product-gallery .product-flags img {
  width: 84px;            /* tweak to taste */
  height: auto;
}





/* Klaviyo reviews styling */

:root{
  --kl-reviews-reviews-primary-font-font-family: var(--text-font-family) !important;
}
#klaviyo-reviews-all .kl_reviews__summary {
    display: none
}
#klaviyo-reviews-all .kl_reviews__reviews_list.kl_reviews__reviews_list.kl_reviews__reviews_list .kl_reviews__list__tab_buttons{
    display: none;
}
#klaviyo-reviews-all{
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
    font-family: var(--text-font-family) !important;
}
.kl_reviews__star{
  fill: #6A5A40;
}
#klaviyo-reviews-all .kl_reviews__review_item{
    border: 1px solid #1C1C1C !important;
    padding: 20px;
    border-radius: 10px;
}


#klaviyo-reviews-all :where(:not(meta, span) + *) {
    margin-block-start: 0;        /* or revert if you prefer UA/default */
    /* margin-block-start: revert; */
}

.kl_reviews__reviews_list.kl_reviews__reviews_list.kl_reviews__reviews_list .kl_reviews__list__tabs{
    border-bottom: 0 !important;
    margin: 0 !important;
}
#klaviyo-reviews-all .kl_reviews__list_container{
  margin-top: 20px;
}
#klaviyo-reviews-all .kl_reviews__load_more_button{
  margin-top: 20px !important;
}

/* Mobile: left-align button bar */
@media screen and (max-width: 999px) {
  #klaviyo-reviews-all .kl_reviews__button_bar {
    justify-content: flex-start !important;
    margin-bottom: 0.7rem !important;
  }
  .kl_reviews__filters{
    padding-bottom:0.7rem !important;
  }
}

@media screen and (min-width: 1000px) {
  /* Create a two-column grid for each review item */
  #klaviyo-reviews-all .kl_reviews__review_item > div {
    display: grid;
    grid-template-columns: max-content 1fr; /* left: stars/name/time | right: title/review */
    grid-template-areas:
      "stars  title"
      "author content"
      "time   content";
    column-gap: 1rem;
    row-gap: .5rem;
    align-items: start;
  }

  /* Flatten the nested structure without changing HTML */
  #klaviyo-reviews-all .kl_reviews__review_item > div > :nth-child(2) {
    display: contents;
  }

  /* Assign areas */
  #klaviyo-reviews-all .kl_reviews__review_stars_and_time { grid-area: stars; }
  #klaviyo-reviews-all .kl_reviews__review__author        { grid-area: author; }
  #klaviyo-reviews-all .kl_reviews__time_badge            { grid-area: time; }
  #klaviyo-reviews-all .kl_reviews__review__title         { grid-area: title; }
  #klaviyo-reviews-all .kl_reviews__review__content       { grid-area: content; }

  /* Optional: style tweaks */
  #klaviyo-reviews-all .kl_reviews__stars_badge { display: inline-block; }
  #klaviyo-reviews-all .kl_reviews__review__author {
    font-weight: 600;
    margin-bottom: 0;
  }
  #klaviyo-reviews-all .kl_reviews__time_badge {
    font-size: 0.9rem;
    color: #777;
    float: right;
    padding-left: 10px;
  }

  /* Hide empty titles */
  #klaviyo-reviews-all .kl_reviews__review__title:empty {
    display: none;
  }
/* Desktop-only styling for the JOIN button in this specific Wine Club section */
@media (min-width: 768px) {
  #shopify-section-template--20269585334372__176352684915876134
    .subscription-module > header .wh-button-primary {
      position: relative;
      overflow: hidden;

      /* Size / layout */
      display: inline-flex !important;
      justify-content: center;
      align-items: center;
      padding: 0.75rem 2rem !important;
      width: auto !important;

      /* Visuals */
      border: 1px solid #000 !important;
      background: #000 !important;
      color: #fff !important;
      border-radius: 0 !important;       /* square corners */

      /* Typography */
      font-weight: 700 !important;       /* bold */
      text-transform: uppercase !important;
      letter-spacing: 0.04em;
      z-index: 1;
  }

  /* Swipe effect: cream (#f9f5f3) from left → right on hover */
  #shopify-section-template--20269585334372__176352684915876134
    .subscription-module > header .wh-button-primary::before {
      content: "";
      position: absolute;
      inset: 0;
      background: #f9f5f3;
      transform: translateX(-100%);        /* start off to the LEFT */
      transition: transform 0.35s ease-out;
      z-index: -1;                          /* behind text, above black base */
  }

  #shopify-section-template--20269585334372__176352684915876134
    .subscription-module > header .wh-button-primary:hover::before {
      transform: translateX(0);             /* swipe across */
  }

  #shopify-section-template--20269585334372__176352684915876134
    .subscription-module > header .wh-button-primary:hover {
      color: #000 !important;               /* text turns black on hover */
  }
}
/* Shrink the WineHub Join widget height in this section */
#shopify-section-template--20269585334372__176352684915876134
  #wine-subscription-app-AY2ttYWMyQ1JlendJb__winehub_commerce_wine_club_sign_up_Q8PWnY {
    min-height: 0 !important;      /* remove forced 400px height */
    padding-bottom: 0 !important;  /* reduce space under the button */
}
.exclusive-lockout {
  border: 1px solid #B19458;
  padding: 20px;
  margin-top: 20px;
  border-radius: 4px;
  text-align: center;
  background-color: #f9f5f3;
}

.exclusive-lockout p {
  margin-bottom: 10px;
  color: #6A5A40;
  font-family: Georgia, serif;
}

.exclusive-login-btn {
  display: inline-block;
  padding: 10px 18px;
  background-color: #B19458;
  color: #fff;
  text-decoration: none;
  font-family: Georgia, serif;
  border-radius: 4px;
}

.exclusive-login-btn:hover {
  background-color: #927847;
}

.exclusive-note a {
  text-decoration: underline;
}

/* ===== Magnum label next to quantity selector ===== */
.quantity-with-magnum {
  display: flex;
  align-items: center;
  gap: 10px;
}

.magnum-qty-label {
  font-size: 1em;
  color: #554E49;
  white-space: nowrap;
}
/* ---------- Shop page Wine Club pricing ---------- */

.product-card-wc-pricing p {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
  font-size: 0.95rem;
}

.product-card-wc-pricing .member-price {
  color: #554E49 !important;
}

.product-card-wc-pricing .upgrade-line,
.product-card-wc-pricing .guest-line {
  color: #887B67 !important;
  margin-top: 0.3rem !important;
}

/* Disable Quick Add (+) everywhere */
.product-card__quick-add-button {
  display: none !important;
}
/* Product template only: hide variant picker UI */
body.template-product variant-picker,
body.template-product .variant-picker {
  display: none !important;
}
body[class*="template-product"] variant-picker,
body[class*="template-product"] .variant-picker,
body .shopify-section--main-product variant-picker,
body .shopify-section--main-product .variant-picker {
  display: none !important;
}
/* Pack contents link */
.sf-pack-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.92em;
  text-decoration: underline;
  cursor: pointer;
  color: #6A5A40;
}
.sf-pack-link:hover {
  opacity: 0.85;
}

/* Pack contents modal */
.sf-pack-modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 1000000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.sf-pack-modal{
  width: min(720px, 92vw);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
  overflow: hidden;
}
.sf-pack-modal__header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.sf-pack-modal__title{
  font-weight: 700;
}
.sf-pack-modal__close{
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  padding: 6px 10px;
}
.sf-pack-modal__body{
  padding: 14px 16px 16px;
}
.sf-pack-modal__body ul{
  margin: 10px 0 0;
  padding-left: 18px;
}
.sf-pack-modal__hint{
  font-size: 0.92em;
  opacity: 0.75;
  margin-top: 10px;
}
/* Modal copy formatting */
.sf-pack-modal__intro,
.sf-pack-modal__outro {
  font-weight: 400;
  margin-bottom: 10px;
}

.sf-pack-modal__outro {
  margin-top: 12px;
}

/* Force all pack items to NOT be bold */
.sf-pack-modal__list {
  margin: 6px 0 0;
  padding-left: 18px;
}

.sf-pack-modal__list li {
  font-weight: 400 !important;
}

/* Actions */
.sf-pack-modal__actions {
  margin-top: 18px;
  text-align: center;
}

.sf-pack-modal__close-btn {
  background-color: rgb(177, 148, 88);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  cursor: pointer;
}

.sf-pack-modal__close-btn:hover {
  opacity: 0.9;
}
/* Force pack contents list items to stack correctly (some theme/WineHub styles make li inline) */
.sf-pack-modal__list {
  list-style: disc !important;
  padding-left: 18px !important;
  margin: 10px 0 0 !important;
}

.sf-pack-modal__list li {
  display: list-item !important;   /* key fix */
  margin: 6px 0 !important;
  white-space: normal !important;
}

/* =========================================================
   Singlefile — Winehub subscription UI (Desktop approved + Mobile safe)
   KNOWN-GOOD CSS (pairs with the cleaned JS)
   ========================================================= */

/* ---------------------------------------------------------
   1) Hide native Winehub UI (only after our UI is mounted)
   --------------------------------------------------------- */

/* Desktop: hide only after we mark the .sp-selector */
.sp-selector.sf-winehub-ready .sp-selector-option,
.sp-selector.sf-winehub-ready .winehub-selling-plan-group {
  display: none !important;
}

/* Global/mobile: hide wherever Winehub renders, after mount */
html.sf-winehub-ready-global .winehub-selling-plan-group,
html.sf-winehub-ready-global .sp-selector-option {
  display: none !important;
}

/* NOTE: we DO NOT hide .sp-selector here; JS handles stubborn cases inline.
   Hiding .sp-selector can break layouts in some Prestige contexts. */

/* ---------------------------------------------------------
   2) Subscribe section container
   --------------------------------------------------------- */
.sf-subscribe-section {
  margin-top: 0;
  position: relative;
}

/* ---------------------------------------------------------
   3) Subscribe trigger button
   --------------------------------------------------------- */
.sf-subscribe-trigger {
  width: 100%;
  border-radius: 0 !important;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  background: transparent !important;
  border: 1px solid rgba(0,0,0,0.18) !important;

  position: relative;
  overflow: hidden;

  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.sf-subscribe-trigger:hover {
  border-color: rgba(0,0,0,0.28) !important;
}

/* Swipe-fill hover for SUBSCRIBE only */
.sf-subscribe-trigger::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #2B211C;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
  z-index: 0;
}

.sf-subscribe-trigger > * {
  position: relative;
  z-index: 1;
}

.sf-subscribe-trigger:hover::before,
.sf-subscribe-trigger:focus-visible::before {
  transform: scaleX(1);
}

.sf-subscribe-trigger:hover,
.sf-subscribe-trigger:focus-visible {
  color: #fff !important;
}


/* ---------------------------------------------------------
   4) Panel spacing (visibility handled by JS via panel.hidden)
   --------------------------------------------------------- */
.sf-subscribe-panel {
  margin-top: 10px;
}

/* ---------------------------------------------------------
   5) Controls row (Select + Proceed)
   --------------------------------------------------------- */
.sf-subscribe-controls {
  display: flex;
  align-items: stretch;
  gap: 12px;

  /* stay on one row unless absolutely impossible */
  flex-wrap: nowrap;
}

.sf-subscribe-wrap {
  flex: 1 1 auto;
  min-width: 0;
}

/* Proceed should NOT be forced full-width by theme */
.sf-subscribe-submit {
  flex: 0 0 auto !important;
  width: auto !important;
  white-space: nowrap;
}

/* ---------------------------------------------------------
   6) Select styling (button-like: no fill, same border)
   --------------------------------------------------------- */
.sf-subscribe-select {
  width: 100% !important;
  height: 52px;

  padding: 14px 48px 14px 16px;

  background: transparent !important;
  border: 1px solid rgba(0,0,0,0.18) !important;
  border-radius: 0 !important;

  line-height: 1.2;
  font-size: 1rem;
  color: inherit;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 14px 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='rgba(0,0,0,0.6)' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
}

.sf-subscribe-select:focus {
  outline: none;
  border-color: rgba(0,0,0,0.28) !important;
}

/* Subtle selected state */
.sf-subscribe-wrap.is-selected .sf-subscribe-select {
  background-color: rgba(0,0,0,0.02) !important;
  border-color: rgba(0,0,0,0.22) !important;
}

/* ---------------------------------------------------------
   7) Proceed button states
   --------------------------------------------------------- */
.sf-subscribe-submit:disabled {
  background: transparent !important;
  border: 1px solid rgba(0,0,0,0.18) !important;
  color: rgba(0,0,0,0.45) !important;
  cursor: not-allowed;
  opacity: 0.55;
}

.sf-subscribe-submit:not(:disabled) {
  background: #2B211C !important;
  border-color: #2B211C !important;
  color: #fff !important;

  --button-background: 43, 33, 28 !important;
  --button-outline-color: 43, 33, 28 !important;
  --button-text-color: 255, 255, 255 !important;

  cursor: pointer;
}

.sf-subscribe-submit:not(:disabled):hover,
.sf-subscribe-submit:not(:disabled):focus-visible {
  background: #2B211C !important;
  color: #fff !important;
}

/* ---------------------------------------------------------
   8) Helper text
   --------------------------------------------------------- */
.sf-subscribe-help {
  margin-top: 10px;
  padding: 12px 14px;
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.12);
}

.sf-subscribe-help-title {
  font-weight: 600;
  margin-bottom: 6px;
}

.sf-subscribe-help-body {
  font-size: 0.9rem;
  line-height: 1.4;
  color: rgba(0,0,0,0.75);
}

.sf-subscribe-help-body .sf-perk-line {
  margin-top: 10px;
}

/* ---------------------------------------------------------
   9) Winehub-only ATC hover (scoped)
   --------------------------------------------------------- */
.sf-winehub-form .buy-buttons > button[type="submit"].button {
  position: relative;
  overflow: hidden;
}

.sf-winehub-form .buy-buttons > button[type="submit"].button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #2B211C;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
  z-index: 0;
}

.sf-winehub-form .buy-buttons > button[type="submit"].button > * {
  position: relative;
  z-index: 1;
}

.sf-winehub-form .buy-buttons > button[type="submit"].button:hover::before,
.sf-winehub-form .buy-buttons > button[type="submit"].button:focus-visible::before {
  transform: scaleX(1);
}

.sf-winehub-form .buy-buttons > button[type="submit"].button:hover .sf-atc-label,
.sf-winehub-form .buy-buttons > button[type="submit"].button:focus-visible .sf-atc-label {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* ATC disabled */
.sf-atc-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.sf-winehub-form .buy-buttons > button[type="submit"]:disabled::before,
.sf-winehub-form .buy-buttons > button[type="submit"][aria-disabled="true"]::before {
  transform: scaleX(0) !important;
  transition: none !important;
  background: transparent !important;
}

.sf-winehub-form .buy-buttons > button[type="submit"]:disabled,
.sf-winehub-form .buy-buttons > button[type="submit"][aria-disabled="true"] {
  pointer-events: none;
  cursor: default;
}

/* ---------------------------------------------------------
   10) Mobile — clean, single source of truth
   --------------------------------------------------------- */

.sf-subscribe-section .sf-subscribe-wrap {
  position: relative;
}

/* Draw the dropdown chevron ourselves (more consistent on mobile) */
.sf-subscribe-section .sf-subscribe-wrap::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 2px solid rgba(0,0,0,0.6);
  border-bottom: 2px solid rgba(0,0,0,0.6);
  transform: translateY(-50%) rotate(45deg);
  pointer-events: none;
}

/* Make wrapper look like the desktop "field" */
.sf-subscribe-section .sf-subscribe-wrap {
  border: 1px solid rgba(0,0,0,0.18);
  background: transparent;
  border-radius: 0;
}

/* Make the select itself visually "disappear" into the wrapper */
.sf-subscribe-section .sf-subscribe-wrap .sf-subscribe-select {
  width: 100% !important;
  height: 54px !important;
  padding: 16px 44px 16px 16px !important;

  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;

  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;

  outline: none !important;
  box-shadow: none !important;
}

/* When selected, tint the wrapper (not the select) */
.sf-subscribe-section .sf-subscribe-wrap.is-selected {
  background: rgba(0,0,0,0.02);
  border-color: rgba(0,0,0,0.22);
}

/* Force the row layout on mobile using grid (theme-proof) */
@media (max-width: 740px) {
  .sf-subscribe-section .sf-subscribe-controls {
    display: grid !important;
    grid-template-columns: 1fr 140px;
    gap: 10px;
    align-items: stretch;
  }

  .sf-subscribe-section .sf-subscribe-submit {
    width: 100% !important;
    height: 54px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Helper text MUST be boxed like desktop */
  .sf-subscribe-section .sf-subscribe-help {
    margin-top: 12px !important;
    padding: 12px 14px !important;
    background: rgba(0,0,0,0.03) !important;
    border: 1px solid rgba(0,0,0,0.12) !important;
  }
}

/* Extra-tight phones */
@media (max-width: 420px) {
  .sf-subscribe-section .sf-subscribe-controls {
    grid-template-columns: 1fr 120px;
    gap: 8px;
  }
}
/* =========================================================
   Winehub Subscribe — FORCE visual styling (Prestige-safe)
   Put at VERY BOTTOM of CSS
   ========================================================= */

.sf-subscribe-section .sf-subscribe-wrap {
  position: relative !important;
}

/* Make the wrapper look like the desktop "field" */
.sf-subscribe-section .sf-subscribe-wrap {
  border: 1px solid rgba(0,0,0,0.18) !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* Remove theme styling from the SELECT itself */
.sf-subscribe-section .sf-subscribe-wrap .sf-subscribe-select {
  width: 100% !important;
  height: 54px !important;
  padding: 16px 44px 16px 16px !important;

  border: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;

  color: inherit !important;
  line-height: 1.2 !important;

  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;

  box-shadow: none !important;
  outline: none !important;
}

/* Draw the dropdown chevron ourselves (more consistent than mobile select UI) */
.sf-subscribe-section .sf-subscribe-wrap::after{
  content:"" !important;
  position:absolute !important;
  right:18px !important;
  top:50% !important;
  width:7px !important;
  height:7px !important;
  border-right:2px solid rgba(0,0,0,0.6) !important;
  border-bottom:2px solid rgba(0,0,0,0.6) !important;

  transform: translateY(-50%) rotate(45deg) !important; /* Down */
  transition: transform 0.2s ease !important;

  pointer-events:none !important;
}
/* When select is focused (dropdown open on desktop), rotate arrow up */
@media (hover: hover) and (pointer: fine) {
  .sf-subscribe-section .sf-subscribe-select:focus + .sf-subscribe-chevron,
  .sf-subscribe-section .sf-subscribe-wrap:focus-within::after{
    transform: translateY(-50%) rotate(-135deg) !important; /* Up */
  }
}


/* Selected state should tint the WRAPPER not the select */
.sf-subscribe-section .sf-subscribe-wrap.is-selected {
  background: rgba(0,0,0,0.02) !important;
  border-color: rgba(0,0,0,0.22) !important;
}

/* FORCE the helper box background/border (theme is stripping/overriding it) */
.sf-subscribe-section .sf-subscribe-help {
  margin-top: 12px !important;
  padding: 12px 14px !important;
  background: rgba(0,0,0,0.03) !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
}

/* If Prestige is setting backgrounds on children, force it here too */
.sf-subscribe-section .sf-subscribe-help * {
  background: transparent !important;
}
/* Product card ATC */
.product-card .collection-add-to-cart-btn{
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 0;
  border: 1px solid #000;
  background: transparent;
  color: #000;
  font-family: var(--font-body-family);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;

  /* helps if there are button resets */
  appearance: none;
  -webkit-appearance: none;
}

.product-card .collection-add-to-cart-btn:hover{
  background-color: #000;
  color: #fff;
}

.product-card .collection-add-to-cart-btn.is-sold-out{
  background-color: #b3b3b3;
  border-color: #b3b3b3;
  color: #fff;
  cursor: not-allowed;
}

.product-card .collection-add-to-cart-btn.is-sold-out:hover{
  background-color: #b3b3b3;
  color: #fff;
}
/* Ensure ATC container spans full card width */
.product-card__atc {
  width: 100%;
}

/* Ensure button fills container */
.product-card__atc .collection-add-to-cart-btn {
  width: 100%;
  display: flex;
}
@media (max-width: 699px) {
  /* Search results: force ATC area + button to behave like the rest of the site */
  .shopify-section--main-search .product-card__atc {
    width: 100%;
    align-self: stretch;
  }

  .shopify-section--main-search .product-card__atc .collection-add-to-cart-btn {
    width: 100% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;

    padding: 0.75rem 1rem !important;
    border: 1px solid #000 !important;
    background: transparent !important;
    color: #000 !important;

    appearance: none;
    -webkit-appearance: none;
  }
}
/* Product card ATC hover (works for both <button> and <a>) */
@media (hover: hover) and (pointer: fine) {
  .product-card .collection-add-to-cart-btn:hover {
    background-color: #000 !important;
    color: #fff !important;
    border-color: #000 !important;
  }