/** Shopify CDN: Minification failed

Line 90:14 Expected identifier but found whitespace
Line 90:16 Unexpected "{"
Line 90:23 Expected ":"
Line 94:22 Expected identifier but found whitespace
Line 94:23 Unexpected "1px"
Line 94:34 Unexpected "{"
Line 94:41 Expected ":"
Line 106:18 Expected identifier but found whitespace
Line 106:20 Unexpected "{"
Line 106:27 Expected ":"
... and 20 more hidden warnings

**/
/* Benefits List Styling */
.productView-benefitsList {
    padding-top: var(--spacing-top, 0);
    padding-bottom: var(--spacing-bottom, 20px);
}

.productView-benefitsList .benefits-heading {
    margin-bottom: 15px;
        width: 80%;
}

.productView-benefitsList .benefits-heading .title {
    font-size: 15px;
    font-weight: 400;
    margin: 0;
   line-height: 20px;
    color: var(--text-color);
}

.productView-benefitsList .benefits-list {
    display: flex;
    flex-direction: column;
    gap: var(--item-spacing, 10px);
}

.productView-benefitsList .benefits-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.productView-benefitsList .benefits-icon {
    flex-shrink: 0;
    width: var(--icon-size, 18px);
    height: var(--icon-size, 18px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}

.productView-benefitsList .benefits-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.productView-benefitsList .benefits-text {
    flex: 1;
    font-size: var(--text-size, 14px);
    line-height: 1.5;
    color: var(--text-color, #232323);
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .productView-benefitsList .benefits-item {
        gap: 10px;
    }
    
    .productView-benefitsList .benefits-text {
        font-size: calc(var(--text-size, 14px) - 1px);
    }
}

/* .accordion-content css */
 .product-accordion-wrapper {
        width: 100%;
      }

      .accordion-main-heading {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 15px;
        color: {{ block.settings.title_color }};
      }

      .product-accordion .accordion-item {
        border-bottom: 1px solid {{ block.settings.border_color }};
      }

      .product-accordion .accordion-header {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 0;
        background: none;
        border: none;
        cursor: pointer;
        font-size: {{ block.settings.title_font_size }}px !important;
        font-weight: {{ block.settings.title_font_weight }};
        color: {{ block.settings.title_color }};
        text-align: left;
        transition: all 0.3s ease;
      }

      .product-accordion .accordion-header:hover {
        opacity: 0.7;
      }

      .product-accordion .accordion-icon {
        flex-shrink: 0;
        transition: transform 0.3s ease;
      }

      .product-accordion .accordion-item.active .accordion-icon {
transform: rotate(1deg);
      }

      .product-accordion .accordion-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
      }

      .product-accordion .accordion-item.active .accordion-content {
        max-height: 1000px;
      }

      .product-accordion .accordion-content-inner {
        padding: 0 0 15px 0;
        color: {{ block.settings.content_color }};
        font-size: 14px;
        line-height: 1.6;
      }
.ingredient-section {
  max-width: 100%;
  margin: 0 auto;
  padding: 20px;
  background: #fff;
}

/* Main Ingredient List */
.ingredient-list {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.ingredient-item {
  display: flex !important;
  align-items: center!important;
  align-items: flex-start;
  gap: 15px;
}

.ingredient-icon {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  background: #f8f9fa;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.ingredient-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ingredient-content {
  flex: 1;
}

.ingredient-title {
  font-size: 16px;
  font-weight: 600;
  color: #000;
  margin: 0 0 8px 0;
}

.ingredient-description {
  font-size: 14px;
  line-height: 1.6;
  color: #666;
  margin: 0;
}

/* Accordion Section */
.ingredient-accordion {
  margin: 20px 0;
}

.ingredient-accordion-item {
  background: #fff;
}

.ingredient-accordion-toggle {
  width: 100%;
  gap: 10px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  color: #000;
  text-align: left;
}

.ingredient-accordion-title {
  flex: 1;
}

.ingredient-accordion-icon {
  font-size: 20px;
  font-weight: 300;
  color: #666;
  transition: transform 0.3s ease;
  margin-left: 10px;
}

.ingredient-accordion-toggle[aria-expanded="true"] .ingredient-accordion-icon {
    transform: rotate(1deg);
}

.ingredient-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.ingredient-accordion-toggle[aria-expanded="true"] + .ingredient-accordion-content {
  max-height: 10000px;
}
.product-accordion .accordion-item.active .accordion-content {
  max-height: 10000px;   /* pehle 1000px tha */
}
.accordion-item.active .accordion-content {
  max-height: 10000px;   /* pehle 2000px tha */
}
.ingredient-accordion-inner {
  padding: 0 0 20px 0;
  font-size: 14px;
  line-height: 1.6;
  color: #666;
}

/* Features Grid */
.ingredient-features {
  margin-top: 30px;
}

.ingredient-features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0px;
}

.ingredient-feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}

.ingredient-feature-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ingredient-feature-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ingredient-feature-text {
  font-size: 13px;
  line-height: 1.4;
  color: #333;
  margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
  .ingredient-section {
    padding: 15px;
  }

  .ingredient-icon {
    width: 50px;
    height: 50px;
  }

  .ingredient-title {
    font-size: 15px;
  }

  .ingredient-description {
    font-size: 13px;
  }

  .ingredient-features-grid {
     grid-template-rows: 1fr;
    gap: 0px;
  }
}

/* Accordion Container */
.product-accordion {
  border-top: 1px solid #e5e5e5;
}

.accordion-item {
  border-bottom: 1px solid #e5e5e5;
}

/* Accordion Header */
.accordion-header {
  width: 100%;
  padding: 20px 0;
  background: none;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  text-align: left;
  transition: opacity 0.3s ease;
}

.accordion-header:hover {
  opacity: 0.7;
}

/* Accordion Icon - Plus/Minus */
.accordion-icon,
.ingredient-accordion-icon {
  width: 20px;
  height: 20px;
  position: relative;
  flex-shrink: 0;
  display: inline-block;
}

.accordion-icon::before,
.accordion-icon::after,
.ingredient-accordion-icon::before,
.ingredient-accordion-icon::after {
  content: '';
  position: absolute;
  background-color: #333;
  transition: all 0.3s ease;
}

/* Horizontal line (minus) - always visible */
.accordion-icon::before,
.ingredient-accordion-icon::before {
  width: 14px;
  height: 2px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Vertical line (plus) - hidden when active */
.accordion-icon::after,
.ingredient-accordion-icon::after {
  width: 2px;
  height: 14px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
}

/* Active state - rotate and hide vertical line */
.accordion-item.active .accordion-icon::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}

.ingredient-accordion-item.active .ingredient-accordion-icon::after {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}

/* Accordion Content */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.accordion-item.active .accordion-content {
  max-height: 2000px;
}

.accordion-content-inner {
  padding: 0 0 20px 0;
}

/* Ingredient Accordion */
.ingredient-accordion {
  margin: 20px 0;
}

.ingredient-accordion-toggle {
  width: 100%;
  padding: 15px 0;
  background: none;
  border: none;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  text-align: left;
}

.ingredient-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.ingredient-accordion-item.active .ingredient-accordion-content {
   max-height: 10000px;
}

.ingredient-accordion-inner {
  padding: 15px 0;
}
/* strt section code here */
/* Jk Image Box Css Start */
.performance-features-section {
  margin-top: 0;
  margin-bottom: 0;
}
.section-{{ section.id }}-padding {
  padding-top: {{ section.settings.padding_top }}px;
  padding-bottom: {{ section.settings.padding_bottom }}px;
}

.performance-features-section .page-width {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}
.performance-features-section .section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: 3rem;
}
.performance-features-section .section-header__text {
  flex: 1;
}
.performance-features-section .section-header__button {
  flex-shrink: 0;
  padding-top: 0.5rem;
}
.performance-features-section .section-heading {
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 0.5rem 0;
  letter-spacing: -0.02em;
  color: #000;
}
.performance-features-section .section-subheading {
  font-size: 16px;
  color: #000;
  margin: 0;
  max-width: 600px;
  line-height: 1.5;
}
.performance-features-section .button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 50px;
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid #000;
  background: transparent;
  color: #000;
  overflow: hidden;
  z-index: 1;
  transition: color 0.4s ease;
}

.performance-features-section .button::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: #000;
  transition: height 0.4s ease;
  z-index: -1;
}

.performance-features-section .button:hover::before {
  height: 100%;
}

.performance-features-section .button:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.performance-features-section .button__text {
  position: relative;
  z-index: 2;
  font-size: 14px;
}

.performance-features-section .button__arrow {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.performance-features-section .button:hover .button__arrow {
  transform: translateX(4px);
}

.performance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

@media screen and (min-width: 990px) {
  .performance-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.performance-card {
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
}

.performance-card:hover {
  transform: translateY(-5px);
}

.performance-card__image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
}

.performance-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.performance-card:hover .performance-card__image img {
  transform: scale(1.05);
}

.performance-card__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.performance-card:hover .performance-card__overlay {
  opacity: 1;
}

.performance-card__icon {
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}
.performance-card__content {
  padding: 1.5rem 0 0 0;
}
.performance-card__title {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 0.75rem 0;
  line-height: 1.3;
  color: #000;
}
.performance-card__value {
  font-weight: 400;
}
.performance-card__description {
  font-size: 16px;
  line-height: 1.7;
  color: #000;
  margin: 0;
}
/* Mobile Responsive Styles */
@media screen and (max-width: 989px) {
  .performance-features-section .page-width {
    padding: 0 1.5rem;
  }
  .performance-features-section .section-header {
    flex-direction: column;
    gap: 1.5rem;
    align-items: flex-start;
  }
  .performance-features-section .section-header__button {
    padding-top: 0;
    width: 100%;
  }
  .performance-features-section .button {
    width: 100%;
    justify-content: center;
  }
  .performance-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .performance-features-section .section-heading {
    font-size: 2rem;
  }
  .performance-features-section .section-subheading {
    font-size: 0.95rem;
  }
}
@media screen and (max-width: 749px) {
  .performance-features-section .page-width {
    padding: 0 1rem;
  }
  .performance-features-section .section-heading {
    font-size: 1.75rem;
  }
  .performance-card__title {
    font-size: 1.1rem;
  }
  .performance-card__description {
    font-size: 14px;
  }
  .performance-features-section .button {
    padding: 0.65rem 1.5rem;
    font-size: 0.9rem;
  }
}
/* Tablet Specific */
@media screen and (min-width: 750px) and (max-width: 989px) {
  .performance-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .performance-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: 50%;
    margin: 0 auto;
  }
}
/* Jk Image Box Css End */

/* Jk Portfolio Sections Start */
.compatibility-section {
  padding: 3rem 0;
}
@media (min-width: 768px) {
  .compatibility-section {
    padding: 5rem 0;
  }
}

.compatibility-section .page-width {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Section Heading */
.compatibility-heading {
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
  margin: 0 0 2.5rem;
  line-height: 1.3;
  color: #1a1a1a;
}
/* Cards Grid */
.compatibility-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .compatibility-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .compatibility-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

/* Individual Card */
.compatibility-card {
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
  aspect-ratio: 1;
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.compatibility-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

/* Card Image Container */
.compatibility-card__image-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1rem 0;
  min-height: 0;
}

.compatibility-card__image {
  max-width: 85%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Card Footer */
.compatibility-card__footer {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.compatibility-card__title {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0;
  color: #fff;
  letter-spacing: -0.01em;
}

@media (min-width: 1024px) {
  .compatibility-card__title {
    font-size: 2.5rem;
  }
}

/* Plus Button */
.compatibility-card__button {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.95);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.3s ease, background-color 0.2s ease;
  flex-shrink: 0;
}

.compatibility-card__button:hover {
  background-color: #fff;
  transform: scale(1.1) rotate(90deg);
}

.compatibility-card__button svg {
  width: 1rem;
  height: 1rem;
  stroke-width: 2.5;
  transition: transform 0.3s ease;
}
.compatibility-card--dark {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}

.compatibility-card--blue {
  background: linear-gradient(135deg, #4169E1 0%, #5B7FFF 100%);
}
.compatibility-card--gradient {
  background: linear-gradient(135deg, #56CCF2 0%, #F093FB 50%, #FF6B6B 100%);
}
.compatibility-card[style*="background"] .compatibility-card__image-wrapper {
  position: relative;
  z-index: 1;
}
/* ═══════════════════════════════════════════════════════════
   BEE NATURALS — BUTTONS
   (replaces the old "VIP ANIMATED BUTTONS" block)

   CONIC TRACE   →  every Add to Cart
                    (product page, cards, sticky bar, quick view)
   GRADIENT FLOW →  Quick Add / Select Options, Checkout, View Cart

   HOW THEY ARE TOLD APART
   In this theme `add-to-cart-form.liquid` renders on the product
   page AND inside product cards, so class names alone cannot
   separate them. The element type can:

       Add to Cart          <button>
       Quick Add / Options  <a>

   That is what the two blocks below key off.

   LABELS
   Conic Trace needs ::before and ::after for the ring, so those
   buttons show the theme's real text (font-size restored).
   Gradient Flow only paints a background, so the sliding
   ::before / ::after labels still work there.
   ═══════════════════════════════════════════════════════════ */
:root{
  --bn-fill:  #FFCE12;              /* button face (sab buttons) */
  --bn-line:  #3F5C36;              /* travelling light          */
  --bn-dim:   rgba(63,92,54,.22);   /* resting ring              */
  --bn-text:  #3F5C36;              /* label                     */
  --bn-ring:  2.5px;                /* ring thickness            */
  --bn-height: 52px;                /* sab buttons ki height     */
}

/* animatable angle for the travelling light */
@property --bn-angle{
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@keyframes bnSpin{ to{ --bn-angle: 360deg } }


/* ╔═══════════════════════════════════════════════════════╗
   ║  1 · SHARED LOOK · ADD TO CART + QUICK ADD + CART     ║
   ╚═══════════════════════════════════════════════════════╝ */

body .productView-action button.button,
body .productView-action button.product-form__submit,
body .productView-stickyCart button[data-btn-addToCart],
body .card-action button.button,
body .card-action button.button-ATC,
body .card-action button.product-form__submit,
body .card-action button[data-btn-addToCart],
body .card-action a.button,
body .card-action a.button-ATC,
body .card-action a[data-quickshop-popup],
#cart-sidebar-checkout,
.previewCartGroup .button-checkout,
.previewCartGroup .button-view-cart{
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--bn-text) !important;
  -webkit-text-fill-color: var(--bn-text) !important;

  border: var(--bn-ring) solid transparent !important;
  border-radius: 50px !important;

  /* same size for Add to Cart, Quick Add, Checkout */
  height: var(--bn-height) !important;
  min-height: var(--bn-height) !important;
  max-height: var(--bn-height) !important;
  padding: 0 20px !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
  outline: none !important;

  /* layer 1 = yellow face, layer 2 = rotating ring */
  background:
    linear-gradient(var(--bn-fill), var(--bn-fill)) padding-box,
    conic-gradient(from var(--bn-angle),
      var(--bn-dim)  0deg,
      var(--bn-dim)  190deg,
      var(--bn-line) 310deg,
      var(--bn-dim)  360deg) border-box !important;
  animation: bnSpin 3.4s linear infinite !important;

  transform: none !important;
  transition: transform .34s cubic-bezier(.22,1.2,.36,1) !important;
}

/* Add to Cart <button>s: text comes from the button itself */
body .productView-action button.button,
body .productView-action button.product-form__submit,
body .productView-stickyCart button[data-btn-addToCart],
body .card-action button.button,
body .card-action button.button-ATC,
body .card-action button.product-form__submit,
body .card-action button[data-btn-addToCart]{
  font-size: 0 !important;          /* label comes from pseudos */
}

/* Add to Cart sliding labels (same as Quick Add) */
body .productView-action button.button::before,
body .productView-action button.product-form__submit::before,
body .productView-stickyCart button[data-btn-addToCart]::before,
body .card-action button.button::before,
body .card-action button.button-ATC::before,
body .card-action button.product-form__submit::before,
body .card-action button[data-btn-addToCart]::before,
body .productView-action button.button::after,
body .productView-action button.product-form__submit::after,
body .productView-stickyCart button[data-btn-addToCart]::after,
body .card-action button.button::after,
body .card-action button.button-ATC::after,
body .card-action button.product-form__submit::after,
body .card-action button[data-btn-addToCart]::after{
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  white-space: nowrap !important;
  color: var(--bn-text) !important;
  -webkit-text-fill-color: var(--bn-text) !important;
  background: none !important;
  border: 0 !important;
  animation: none !important;
  opacity: 1;
  pointer-events: none;
  transition: transform .38s cubic-bezier(.5,0,.15,1), opacity .26s ease !important;
}
body .productView-action button.button::before,
body .productView-action button.product-form__submit::before,
body .productView-stickyCart button[data-btn-addToCart]::before,
body .card-action button.button::before,
body .card-action button.button-ATC::before,
body .card-action button.product-form__submit::before,
body .card-action button[data-btn-addToCart]::before{ content: "ADD TO CART" !important; transform: translateY(0); }
body .productView-action button.button::after,
body .productView-action button.product-form__submit::after,
body .productView-stickyCart button[data-btn-addToCart]::after,
body .card-action button.button::after,
body .card-action button.button-ATC::after,
body .card-action button.product-form__submit::after,
body .card-action button[data-btn-addToCart]::after{ content: "ADD TO CART  \2192" !important; transform: translateY(115%); opacity: 0; }

/* the theme's own gradient setting must not win */
body.enable_gradient_button_card .productView-action .button,
body.enable_gradient_button_card .card-action .button{
  border-color: transparent !important;
}


/* ╔═══════════════════════════════════════════════════════╗
   ║  2 · SLIDING LABELS · QUICK ADD / CHECKOUT / VIEW CART║
   ╚═══════════════════════════════════════════════════════╝ */

body .card-action a.button,
body .card-action a.button-ATC,
body .card-action a[data-quickshop-popup],
#cart-sidebar-checkout,
.previewCartGroup .button-checkout,
.previewCartGroup .button-view-cart{
  font-size: 0 !important;          /* label comes from pseudos */
}

body .card-action a.button-ATC::before,
body .card-action a.button-ATC::after,
body .card-action a[data-quickshop-popup]::before,
body .card-action a[data-quickshop-popup]::after,
#cart-sidebar-checkout::before, #cart-sidebar-checkout::after,
.button-view-cart::before,      .button-view-cart::after{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .08em;
  white-space: nowrap;
  color: var(--bn-text);
  -webkit-text-fill-color: var(--bn-text);
  pointer-events: none;
  transition: transform .38s cubic-bezier(.5,0,.15,1), opacity .26s ease;
}

body .card-action a.button-ATC::before,
body .card-action a[data-quickshop-popup]::before{ content: "QUICK ADD"; }
body .card-action a.button-ATC::after,
body .card-action a[data-quickshop-popup]::after { content: "QUICK ADD  \2192"; }

body .card-action a.is-notify-me::before{ content: "NOTIFY ME"; }
body .card-action a.is-notify-me::after { content: "NOTIFY ME  \2192"; }

#cart-sidebar-checkout::before { content: "CHECKOUT"; }
#cart-sidebar-checkout::after  { content: "CHECKOUT  \2192"; }
.button-view-cart::before      { content: "VIEW CART"; }
.button-view-cart::after       { content: "VIEW CART  \2192"; }

body .card-action a.button-ATC::after,
body .card-action a[data-quickshop-popup]::after,
#cart-sidebar-checkout::after,
.button-view-cart::after{
  transform: translateY(115%);
  opacity: 0;
}


/* ╔═══════════════════════════════════════════════════════╗
   ║  3 · HOVER / ACTIVE / FOCUS                           ║
   ╚═══════════════════════════════════════════════════════╝ */

@media (min-width:1025px){
  /* light speeds up on every button */
  body .productView-action button.button:hover,
  body .productView-stickyCart button[data-btn-addToCart]:hover,
  body .card-action button.button:hover,
  body .card-action button[data-btn-addToCart]:hover,
  body .card-action a.button-ATC:hover,
  body .card-action a[data-quickshop-popup]:hover,
  #cart-sidebar-checkout:hover,
  .previewCartGroup .button-checkout:hover,
  .previewCartGroup .button-view-cart:hover{
    animation-duration: 2s !important;
    color: var(--bn-text) !important;
  }

  /* lift for link buttons */
  body .productView-action button.button:hover,
  body .productView-action button.product-form__submit:hover,
  body .productView-stickyCart button[data-btn-addToCart]:hover,
  body .card-action button.button:hover,
  body .card-action button.button-ATC:hover,
  body .card-action button.product-form__submit:hover,
  body .card-action button[data-btn-addToCart]:hover,
  body .card-action a.button-ATC:hover,
  body .card-action a[data-quickshop-popup]:hover,
  #cart-sidebar-checkout:hover,
  .previewCartGroup .button-view-cart:hover{
    transform: scale(1.03) translateY(-2px) !important;
  }

  body .productView-action button.button:hover::before,
  body .productView-action button.product-form__submit:hover::before,
  body .productView-stickyCart button[data-btn-addToCart]:hover::before,
  body .card-action button.button:hover::before,
  body .card-action button.button-ATC:hover::before,
  body .card-action button.product-form__submit:hover::before,
  body .card-action button[data-btn-addToCart]:hover::before,
  body .card-action a.button-ATC:hover::before,
  body .card-action a[data-quickshop-popup]:hover::before,
  #cart-sidebar-checkout:hover::before,
  .button-view-cart:hover::before{
    transform: translateY(-115%);
    opacity: 0;
  }
  body .productView-action button.button:hover::after,
  body .productView-action button.product-form__submit:hover::after,
  body .productView-stickyCart button[data-btn-addToCart]:hover::after,
  body .card-action button.button:hover::after,
  body .card-action button.button-ATC:hover::after,
  body .card-action button.product-form__submit:hover::after,
  body .card-action button[data-btn-addToCart]:hover::after,
  body .card-action a.button-ATC:hover::after,
  body .card-action a[data-quickshop-popup]:hover::after,
  #cart-sidebar-checkout:hover::after,
  .button-view-cart:hover::after{
    transform: translateY(0);
    opacity: 1;
  }
}

body .productView-action button.button:active,
body .card-action button[data-btn-addToCart]:active{
  transform: scale(.985) !important;
}

body .productView-action button.button:focus-visible,
body .card-action button[data-btn-addToCart]:focus-visible,
body .card-action a.button-ATC:focus-visible,
body .card-action a[data-quickshop-popup]:focus-visible,
#cart-sidebar-checkout:focus-visible,
.previewCartGroup .button-view-cart:focus-visible{
  outline: 2px solid var(--bn-line) !important;
  outline-offset: 3px;
}

/* let hover lift escape the card */
.product-item .card-action,
.product-item .card-action form.variants,
.product-item .card-action .card-action__group,
.previewCartGroup{
  overflow: visible !important;
}


/* ╔═══════════════════════════════════════════════════════╗
   ║  4 · SOLD OUT · the trace stops                       ║
   ╚═══════════════════════════════════════════════════════╝ */

body .productView-action button.button[disabled],
body .card-action button.button[disabled],
body .card-action a.button-ATC[disabled]{
  animation: none !important;
  background:
    linear-gradient(#E3DFD6, #E3DFD6) padding-box,
    linear-gradient(#C9C4B8, #C9C4B8) border-box !important;
  color: #8E897C !important;
  -webkit-text-fill-color: #8E897C !important;
  cursor: not-allowed;
  transform: none !important;
}
body .productView-action button.button[disabled]::before,
body .productView-action button.product-form__submit[disabled]::before,
body .productView-stickyCart button[data-btn-addToCart][disabled]::before,
body .card-action button.button[disabled]::before,
body .card-action button.button-ATC[disabled]::before,
body .card-action button.product-form__submit[disabled]::before,
body .card-action button[data-btn-addToCart][disabled]::before,
body .card-action a.button-ATC[disabled]::before{ content: "SOLD OUT" !important; }
body .productView-action button.button[disabled]::after,
body .productView-action button.product-form__submit[disabled]::after,
body .productView-stickyCart button[data-btn-addToCart][disabled]::after,
body .card-action button.button[disabled]::after,
body .card-action button.button-ATC[disabled]::after,
body .card-action button.product-form__submit[disabled]::after,
body .card-action button[data-btn-addToCart][disabled]::after{ content: "SOLD OUT" !important; }
body .productView-action button.button[disabled]::before,
body .productView-action button.product-form__submit[disabled]::before,
body .productView-stickyCart button[data-btn-addToCart][disabled]::before,
body .card-action button.button[disabled]::before,
body .card-action button.button-ATC[disabled]::before,
body .card-action button.product-form__submit[disabled]::before,
body .card-action button[data-btn-addToCart][disabled]::before,
body .productView-action button.button[disabled]::after,
body .productView-action button.product-form__submit[disabled]::after,
body .productView-stickyCart button[data-btn-addToCart][disabled]::after,
body .card-action button.button[disabled]::after,
body .card-action button.button-ATC[disabled]::after,
body .card-action button.product-form__submit[disabled]::after,
body .card-action button[data-btn-addToCart][disabled]::after{
  color: #8E897C !important;
  -webkit-text-fill-color: #8E897C !important;
}
body .card-action a.button-ATC[disabled]::after { content: "SOLD OUT"; }
body .card-action a.button-ATC[disabled]::before,
body .card-action a.button-ATC[disabled]::after{
  color: #8E897C;
  -webkit-text-fill-color: #8E897C;
}


/* ╔═══════════════════════════════════════════════════════╗
   ║  5 · REDUCED MOTION                                   ║
   ╚═══════════════════════════════════════════════════════╝ */

@media (prefers-reduced-motion: reduce){
  body .productView-action button.button,
  body .productView-stickyCart button[data-btn-addToCart],
  body .card-action button.button,
  body .card-action a.button,
  body .card-action a.button-ATC,
  #cart-sidebar-checkout,
  .previewCartGroup .button-checkout,
  .previewCartGroup .button-view-cart{
    animation: none !important;
    background:
      linear-gradient(var(--bn-fill), var(--bn-fill)) padding-box,
      linear-gradient(var(--bn-line), var(--bn-line)) border-box !important;
  }
}


/* ╔═══════════════════════════════════════════════════════╗
   ║  6 · QUICK ADD POPUP · sizes must not hide behind ATC ║
   ╚═══════════════════════════════════════════════════════╝ */

/* popup and option boxes grow with their content */
body .card-action form.variants,
body .card-action .variants-popup,
body .card-action .variants-popup-content,
body .card-action .selector-wrapper,
body .card-action .swatch,
body .card-action .product-form__input,
body .card-action fieldset{
  height: auto !important;
  overflow: visible !important;
}

/* stack sizes above the button with a gap */
body .card-action form.variants{
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

/* size boxes sit above the button's painted ring */
body .card-action form.variants > *:not(button){
  position: relative;
  z-index: 2;
}

/* button always after the options, never on top of them */
body .card-action form.variants > button{
  position: relative !important;
  z-index: 1 !important;
  margin-top: 6px !important;
  flex: 0 0 var(--bn-height) !important;
}