/** Shopify CDN: Minification failed

Line 2732:41 Expected ":"

**/
/* ========================================
   NUCLEAR PRODUCT - Product Page Styles
   Gallery, Slider, Tabs, Cart Drawer
   ======================================== */

/* === PRODUCT IMAGE SLIDER === */
.mobile-image-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 0;
    scrollbar-width: none;
    border-radius: 0;
    overflow-y: hidden;
}

.mobile-image-slider::-webkit-scrollbar {
    display: none;
}

.mobile-image-slider .slide-item {
    flex: 0 0 100%;
    width: 100%;
    scroll-snap-align: center;
    position: relative;
}

.mobile-image-slider .slide-item img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* === SLIDE INDICATORS === */
.slide-indicators {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 1rem;
}

.slide-indicators .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: all 0.3s;
    cursor: pointer;
}

.slide-indicators .dot.active {
    background: var(--metallic-gold);
    transform: scale(1.2);
}

/* === PRODUCT TABS === */
.product-tabs-section {
    margin: 4rem 0;
    position: relative;
    min-height: 200px;
}

.tabs-header {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 1rem;
}

.tab-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.5rem 1rem;
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
}

.tab-btn.active {
    color: var(--metallic-gold);
    border-bottom-color: var(--metallic-gold);
}

.tab-panel {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tab-panel.active {
    display: block;
    opacity: 1;
    animation: fadeIn 0.4s ease-out forwards;
}

/* Cart drawer + cart toast styles moved to nuclear-cart.css to avoid duplication. */

/* ========================================
   NUCLEAR PDP - Main Product Styles
   ======================================== */

/* 1. PDP Content Alignment */
.pdp-title {
    font-size: 1.8rem;
    line-height: 1.2;
    color: var(--text-primary);
    margin: 1rem 0 0.5rem;
    text-align: center;
}

.pdp-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.pdp-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
}

.pdp-price {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--metallic-gold);
}

.pdp-price-note {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
}

.trust-badges {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.trust-badge {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.3rem 0.8rem;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
}

/* === PRODUCT PAGE LAYOUT FIX === */
/* Remove ALL side padding from wrappers - let children control their own */
.nuclear-product-wrapper {
    padding: 0 !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 480px !important;
}

.product-grid {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    gap: 0 !important;
    /* Remove gap, sections control their own spacing */
}

/* Image slider should be edge-to-edge (NO padding) */
.product-media-column {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

.mobile-image-slider {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Content sections get horizontal padding */
.product-info-column,
.purchase-options-section,
.product-tabs-section,
.ways-section,
.stories-section {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.purchase-options-section {
    padding-top: 0 !important;
}

/* LIVE ticker - edge to edge, top/bottom borders only */
.sales-ticker-container.mode-embedded-pdp {
    width: 100% !important;
    max-width: none !important;
    padding: 0.7rem 1rem 0.55rem !important;
    margin: 0 !important;
    position: relative !important;
    left: auto !important;
    transform: none !important;
    background: rgba(0, 0, 0, 0.6) !important;
    -webkit-backdrop-filter: blur(10px) !important;

    backdrop-filter: blur(10px) !important;
    border: none !important;
    border-top: 1px solid rgba(253, 185, 26, 0.2) !important;
    border-bottom: 1px solid rgba(253, 185, 26, 0.2) !important;
    border-radius: 0 !important;
}

/* Ensure wrapper is centered */
.mobile-universe-wrapper {
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}

/* === FIX: Mobile Universe Fixed Element Constraints === */
.mobile-sticky-cart,
.site-nav,
.mobile-menu-backdrop,
.cart-toast {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    max-width: 480px !important;
}

/* Sales ticker should be STATIC on product page (not fixed) */
.sales-ticker-container {
    position: relative !important;
    width: 100% !important;
    max-width: 480px !important;
    margin: 0 auto;
}

.cart-toast.visible {
    /* Base .cart-toast is centered with margin:0 auto — only animate Y. */
    transform: translateY(0) !important;
}

/* === VARIANT SELECTION (STACKER) === */
.purchase-group-label {
    margin: 0;
    min-height: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.62rem;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.65);
    text-align: center;
    text-transform: uppercase;
}

.purchase-group-label::before,
.purchase-group-label::after {
    content: "";
    flex: 1 1 auto;
    max-width: 58px;
    height: 1px;
    background: rgba(253, 185, 26, 0.42);
}

/* "CHOOSE PURCHASE TYPE" sits between the pack-size grid and the
   one-time/subscribe options. The middle card has a MOST POPULAR
   stripe that hangs ~13px below the card row, so we keep mt small
   (the stripe already gives visual separation) and put the bigger
   margin below so the label doesn't hug the first radio pill. */
.purchase-group-label--secondary {
    margin-top: 0.4rem;
    margin-bottom: 1rem;
}

.variant-selector-wrapper {
    width: 100%;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.variant-stacker {
    background: rgba(10, 14, 34, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 0.68rem;
    margin-bottom: 0.35rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    align-items: stretch;
}

.stack-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 0.56rem 0.68rem 1.34rem;
    background: rgba(255, 255, 255, 0.042);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    position: relative;
    gap: 0.28rem;
    appearance: none;
    text-align: center;
    color: inherit;
    min-height: 100%;
    overflow: hidden;
    box-shadow: 0 8px 18px rgba(7, 10, 24, 0.16);
}

.stack-option:hover {
    background: rgba(255, 255, 255, 0.055);
    border-color: rgba(255, 255, 255, 0.13);
    transform: translateY(-1px);
}

.stack-option:focus-visible {
    outline: none;
    border-color: #FDB91A;
    box-shadow: 0 0 0 2px rgba(253, 185, 26, 0.18);
}

.stack-option--popular {
    padding-bottom: 1.34rem;
}

.stack-option::after {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 12px;
    border: 1px solid transparent;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.stack-option.active,
.stack-option.selected {
    background: rgba(255, 255, 255, 0.078);
    border-color: #FDB91A;
    box-shadow: 0 12px 24px rgba(8, 10, 24, 0.22), inset 0 0 0 1px rgba(253, 185, 26, 0.06);
    transform: none;
}

.stack-option.active::after,
.stack-option.selected::after {
    opacity: 0;
    border-color: transparent;
    box-shadow: none;
}

.stack-option.active .stack-thumb,
.stack-option.selected .stack-thumb {
    border-color: rgba(253, 185, 26, 0.5);
    background: rgba(29, 34, 66, 0.82);
    box-shadow: none;
}

.stack-thumb {
    width: 72px;
    aspect-ratio: 4 / 5;
    border-radius: 16px;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(20, 24, 46, 0.76);
    border: 1px solid rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px;
}

.stack-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    transform: scale(0.98);
}

/* Radio Circle */
.stack-radio {
    display: none;
}

/* Text Content */
.stack-info {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
    align-items: center;
    justify-content: flex-start;
}

.stack-title-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.16rem;
    width: 100%;
    min-height: 0;
    justify-content: flex-start;
}

.stack-title {
    font-weight: 800;
    font-size: 0.88rem;
    color: #fff;
    line-height: 1.05;
    letter-spacing: -0.01em;
}

.stack-desc {
    display: none;
}

/* Price Section */
.stack-price-wrapper {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.08rem;
    flex-shrink: 0;
    margin-top: auto;
    padding-top: 0.08rem;
    min-height: 44px;
    justify-content: flex-start;
}

.stack-mrp-row {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    gap: 0.24rem;
    min-height: 0.76rem;
    line-height: 1;
}

.stack-mrp-row-placeholder {
    visibility: hidden;
}

.mrp-label,
.stack-mrp-label {
    font-size: 0.5rem;
    font-weight: 700;
    color: rgba(255, 255, 255, var(--mrp-opacity, 0.75));
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.compare-price-cut {
    position: relative;
    display: inline-block;
    text-decoration: none;
    line-height: 1;
}

.compare-price-cut::after {
    content: "";
    position: absolute;
    left: -0.04em;
    right: -0.04em;
    top: 52%;
    height: 1px;
    background: currentColor;
    transform: rotate(-8deg);
    transform-origin: center;
    pointer-events: none;
}

.stack-price {
    font-weight: 800;
    font-size: 1rem;
    color: #fff;
    line-height: 1;
    align-self: center;
}

.stack-popular-note {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: 1.05rem;
    min-height: 1.05rem;
    margin: 0;
    padding: 0 0.42rem;
    box-sizing: border-box;
    border-top: 1px solid rgba(253, 185, 26, 1);
    border-radius: 0 0 14px 14px;
    background: #FDB91A;
    font-size: 0.44rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: #191d38;
    line-height: 1;
    pointer-events: none;
    text-align: center;
    white-space: nowrap;
}

.stack-popular-note-placeholder {
    visibility: hidden;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1.05rem;
    min-height: 1.05rem;
    margin: 0;
    padding: 0 0.48rem;
    color: transparent;
    border-top-color: transparent;
    background: transparent;
}

.stack-compare-price {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, var(--mrp-opacity, 0.75));
    line-height: 1;
}

.badge-save-placeholder,
.stack-compare-price-placeholder {
    visibility: hidden;
}

/* Badges */
.stack-badge {
    font-size: 0.56rem;
    font-weight: 800;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 8px;
    line-height: 1;
    display: inline-block;
    letter-spacing: 0.04em;
}

.badge-save {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
    /* Green for math savings */
    border: 1px solid rgba(74, 222, 128, 0.3);
}

.badge-popular {
    background: #FDB91A;
    color: #191d38;
    position: absolute;
    top: 10px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    border-radius: 8px;
    padding: 5px 11px;
    font-size: 0.48rem;
    font-weight: 800;
    z-index: 2;
    letter-spacing: 0.05em;
    box-shadow: 0 6px 14px rgba(253, 185, 26, 0.12);
}

@media (max-width: 480px) {
    .variant-stacker {
        gap: 0.5rem;
        padding: 0.68rem;
    }

    .purchase-group-label {
        margin-bottom: 0.625rem;
        font-size: 0.68rem;
        gap: 0.5rem;
    }

    /* Re-assert the secondary label's spacing inside the mobile media
       query so the .purchase-group-label rule above doesn't override
       margin-bottom (equal specificity, later rule wins). */
    .purchase-group-label--secondary {
        margin-top: 0.4rem;
        margin-bottom: 1rem;
    }

    .purchase-group-label::before,
    .purchase-group-label::after {
        max-width: 46px;
    }

    .stack-option {
        padding: 0.82rem 0.58rem 1.36rem;
        gap: 0.42rem;
    }

    .stack-option--popular {
        padding-bottom: 1.36rem;
    }

    .stack-thumb {
        width: 80px;
        padding: 8px;
    }

    .stack-price {
        font-size: 0.96rem;
    }

    .stack-title {
        font-size: 0.88rem;
    }

    .stack-desc {
        font-size: 0.68rem;
        min-height: 2.15em;
    }

    .badge-popular {
        top: 8px;
        padding: 4px 8px;
    }
}


/* ===========================================================
   PDP-PAGE STYLES (moved from sections/nuclear-product.liquid)
   ===========================================================
   These rules used to live in a 2800-line inline <style> block at the
   top of the section. The section is loaded only on /products/* pages
   AND this asset is loaded globally in theme.liquid, so the styles
   still reach the PDP even though they no longer ship inline. */
/* Hide variant selector */
.variant-selector,
.product-form__input,
.product-form select,
.product-variants,
select[name="id"],
.selector-wrapper,
.single-option-selector {
  display: none !important;
}

.mobile-cart-form {
  width: 100%;
}

/* === LAYOUT === */
.nuclear-product-wrapper {
  padding: 0; /* No side padding - controlled by sections */
  padding-top: 0; /* Wrapper stays flush inside the main content shell */
  padding-bottom: 100px; /* Space for sticky cart */
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;

  min-height: 100dvh;
  display: flex;
  align-items: flex-start;
}

.product-grid {
  display: flex;
  flex-direction: column;
  gap: 0; /* Sections control their own margins */
  width: 100%;
}

/* === LEFT COLUMN: HERO MEDIA === */
.product-media-column {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 2rem;
  top: 0; /* No sticky */
  order: -1; /* Ensure distinct visual order */
}

.media-canvas {
  position: relative;
  width: 100%;
  height: 400px; /* Mobile height */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 0;
  overflow: hidden;
}

/* Product Image - Clean, no effects */
.hero-product-img {
  max-width: 100%;
  max-height: 100%; 
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ENABLE mobile-only elements EVERYWHERE */
.mobile-glass-overlay,
.wishlist-btn,
.mobile-image-slider,
.slide-indicators {
  display: block; /* Show everywhere */
}

.media-thumbnails {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.thumb-item {
  width: 45px;
  height: 60px;
  border-radius: 8px;
  border: 2px solid rgba(255,255,255,0.05);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s;
}

.thumb-item:hover, .thumb-item.active {
  border-color: var(--metallic-gold, #FDB91A);
  transform: translateY(-2px);
}

.thumb-item img { width: 100%; height: 100%; object-fit: cover; }

@keyframes floatHero {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

/* === RIGHT COLUMN: INFO === */

/* Product Details Header - with golden line above */
.product-details-header {
  position: relative;
  background: transparent;
  margin-top: 3rem; /* Space above separator line (from Add to Cart) */
  padding: 2rem 0 1.5rem; /* Space below separator line (to title) */
  text-align: center;
}

/* Golden line ABOVE the Product Details header */
.product-details-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 1.5rem;
  right: 1.5rem;
  height: 1px;
  background: rgba(253, 185, 26, 0.55);
}

.details-header-title {
  font-size: 2rem;
  font-weight: 400;
  color: #F5F3EE;
  margin: 0;
  letter-spacing: 0.03em;
}

.product-info-column {
  padding: 1.5rem 1rem; /* Side padding for text content */
}

.pdp-title {
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--metallic-gold);
  line-height: 1.1;
  margin-bottom: 1rem;
}

.pdp-brand-subtitle {
  color: var(--text-secondary);
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  max-width: 90%;
}

.pdp-meta {
  margin-bottom: 2rem;
}

.pdp-price {
  font-size: 2.2rem;
  font-weight: 500;
  color: var(--text-primary);
}

/* === ACTIONS === */
.pdp-actions {
  display: flex;
  gap: 1rem;
  margin-bottom: 3rem;
  height: 56px; 
}

.qty-wrapper {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  padding: 0 0.5rem;
  min-width: 120px;
}

.qty-btn {
  width: 40px;
  height: 100%;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 1.2rem;
  cursor: pointer;
}
.qty-btn:hover { color: var(--metallic-gold); }

#PdpQty {
  width: 40px;
  background: none;
  border: none;
  color: var(--text-primary);
  text-align: center;
  font-size: 1.1rem;
}

.btn-gold {
  background: #FDB91A;
  color: #191d38;
  border: none;
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
  border-radius: 50px; /* Fully rounded */
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 8px 20px rgba(253, 185, 26, 0.3);
}

.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(253, 185, 26, 0.5);
  filter: brightness(1.1);
}

.full-width { flex-grow: 1; }

/* === FEATURE SECTIONS === */
.feature-row {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 2rem;
  padding: 1.5rem;
  /* Nuclear Glass Standard */
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(12px);

  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2), inset 0 0 10px rgba(255, 255, 255, 0.05);
}

.feature-icon {
  font-size: 2rem;
}

.feature-text h3 {
  font-size: 1.2rem;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.feature-text p {
  color: var(--text-secondary); /* Increased contrast */
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
}

/* === USAGE IDEAS === */
.usage-ideas-section {
  margin-bottom: 3rem;
}

/* Section heading — same line-flanked design as .flavor-stories-label
   so every section divider on the PDP looks identical. */
.section-label {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.85rem;
  color: var(--metallic-gold);
  font-weight: 700;
  margin: 0 0 22px;
  padding: 18px 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  text-align: center;
  white-space: nowrap;
}

.section-label::before,
.section-label::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(
    to right,
    rgba(253, 185, 26, 0) 0%,
    rgba(253, 185, 26, 0.45) 50%,
    rgba(253, 185, 26, 0) 100%
  );
}

/* === OTHER FLAVORS === */
.other-flavors-section {
  margin-bottom: 2rem;
}

.flavors-scroll {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding: 0.5rem 0;
  scrollbar-width: none;
}

.flavors-scroll::-webkit-scrollbar {
  display: none;
}

.flavor-pill {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem 0.5rem 0.5rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50px;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.flavor-pill:hover {
  background: rgba(253, 185, 26, 0.15);
  border-color: rgba(253, 185, 26, 0.4);
  transform: translateY(-2px);
}

.flavor-pill-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: contain;
  background: rgba(255,255,255,0.05);
}

.flavor-pill-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary, #fff);
}

.usage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.usage-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.usage-card img, .usage-placeholder {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 20px; /* Matching glass radius */
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.usage-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  /* Nuclear Glass Standard */
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(12px);

  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 1rem;
  transition: all 0.3s;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.usage-card span {
  font-size: 0.9rem;
  color: var(--text-primary);
  font-weight: 500;
}

/* === PAIRS WELL WITH === */
.pairs-grid {
  display: flex;
  gap: 1.5rem;
}

.pair-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1rem;
  border-radius: 16px;
  transition: all 0.3s;
}

.pair-card:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-3px);
  border-color: var(--metallic-gold);
}

.pair-card img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.pair-title {
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 600;
}

/* === RESPONSIVE === */
/* === RESPONSIVE RULES APPLIED GLOBALLY (Mobile Universe) === */
.product-grid {
  grid-template-columns: 1fr;
  gap: 0;
}

.product-media-column {
  order: -1;
  position: relative;
  top: 0;
  margin: 0;
  padding: 0;
  width: 100%;
}

.media-canvas {
  position: relative;
  height: auto;
  min-height: 300px;
  display: block;
  padding-top: 0;
  padding: 0;
  overflow: hidden;
}

.nuclear-product-wrapper {
  padding: 0 0 130px;
  margin-top: 0;
  min-height: auto;
  display: block;
  overflow-x: hidden;
}

.trust-badges {
  flex-wrap: wrap;
}

.spice-level-section {
  flex-wrap: wrap;
}

.guarantee-section {
  flex-direction: column;
  gap: 0.75rem;
}

/* === NEW: TRUST BADGES === */
.trust-badges {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.trust-badge {
  background: rgba(253, 185, 26, 0.15);
  border: 1px solid rgba(253, 185, 26, 0.3);
  color: var(--metallic-gold, #FDB91A);
  padding: 0.4rem 0.8rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
}

/* === NEW: STAR RATING === */
.pdp-rating {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.stars {
  display: flex;
  gap: 2px;
}

.star {
  color: var(--text-faint);
  font-size: 1.2rem;
}

.star.filled {
  color: #FDB91A;
}

.star.half {
  color: #FDB91A;
  opacity: 0.6;
}

.rating-text {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* === NEW: PRICE NOTE === */
.pdp-price-note {
  display: block;
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-top: 0.25rem;
}

/* === NEW: DESCRIPTION === */
.pdp-description {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
  max-width: 95%;
}

/* === NEW: SPICE LEVEL === */
.spice-level-section {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}

.spice-label {
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
}

.spice-meter {
  display: flex;
  gap: 6px;
}

.spice-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  transition: all 0.3s;
}

.spice-dot.active {
  background: #ff6b35;
}

.spice-text {
  color: #ff6b35;
  font-weight: 600;
  font-size: 0.9rem;
}

/* === NEW: FREE SHIPPING BANNER === */
.free-shipping-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: rgba(76, 175, 80, 0.12);
  border: 1px solid rgba(76, 175, 80, 0.25);
  color: #4CAF50;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 2rem;
}

.shipping-icon {
  font-size: 1.2rem;
}

/* === NEW: GUARANTEE SECTION === */
.guarantee-section {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
  padding: 1rem 0;
  border-top: 1px solid rgba(255,255,255,0.1);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.guarantee-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.guarantee-icon {
  font-size: 1.1rem;
}

/* === NEW: USAGE EMOJI === */
.usage-emoji {
  font-size: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
}

.usage-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 1rem;
  transition: all 0.3s;
  text-align: center;
}

.usage-card:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-3px);
  border-color: rgba(253, 185, 26, 0.3);
}

.usage-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

/* ========================================
   PREMIUM TABBED PRODUCT INFO
   ======================================== */
.product-tabs-section {
  position: relative;
  background: transparent;
  padding: 0 0 0.55rem;
  margin: 0 0 1.5rem;
  border-radius: 0;
}

.product-tabs-section::after {
  display: none;
}

.tabs-header {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 0.4rem;
  padding: 0 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.tab-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 88px;
  padding: 0.95rem 0.75rem 0.85rem;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
  text-transform: uppercase;
}

.tab-btn + .tab-btn {
  border-left: none;
}

.tab-btn + .tab-btn::before {
  content: '';
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 1px;
  background: rgba(255, 255, 255, 0.12);
}

.tab-btn:hover {
  color: rgba(255, 255, 255, 0.72);
}

.tab-btn.active {
  color: #FDB91A;
  border-bottom-color: #FDB91A;
}

.tabs-content {
  background: transparent;
  padding: 0.55rem 1.5rem 0.1rem;
}

.tab-panel {
  display: none !important;
  padding: 0;
}

.tab-panel.active {
  display: block !important;
}

.tab-inner {
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
}

.tab-inner p {
  margin-bottom: 0.75rem;
}

/* Info Blocks */
.info-block {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.info-label {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.5rem;
}

.info-text {
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

/* Spice Meter */
.spice-meter {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.spice-icon {
  font-size: 1.2rem;
  transition: opacity 0.2s;
}

.spice-icon.empty {
  opacity: 0.25;
  filter: grayscale(1);
}

.spice-label {
  margin-left: 0.75rem;
  font-weight: 600;
  color: #ff6b35;
}

/* Details Grid */
.details-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.detail-row {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
}

.detail-icon {
  font-size: 0.95rem;
  line-height: 1.4;
  color: #FDB91A;
  min-width: 0.55rem;
}

.detail-text {
  color: rgba(255, 255, 255, 0.85);
}

.detail-text strong {
  color: #fff;
}

/* Certification Badges */
.cert-badges {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-wrap: wrap;
}

.cert-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  flex: 1;
  min-width: 80px;
}

.cert-icon {
  font-size: 0.95rem;
  color: #FDB91A;
  line-height: 1;
}

.cert-text {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
}

/* Usage List */
.usage-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.usage-list li {
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.85);
}

.usage-list li:last-child {
  border-bottom: none;
}

.usage-list li strong {
  color: #fff;
}

/* Pro Tip */
.pro-tip {
  margin-top: 1.5rem;
  padding: 1rem;
  background: rgba(253, 185, 26, 0.08);
  border: 1px solid rgba(253, 185, 26, 0.2);
  border-radius: 12px;
}

.pro-tip-label {
  font-weight: 700;
  color: #FDB91A;
  display: block;
  margin-bottom: 0.5rem;
}

.pro-tip p {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
}

/* === WAYS TO ENJOY - World-Class Video Carousel === */
.ways-carousel-section {
  padding: 1rem 0 1.5rem; /* Tighter spacing */
  overflow: hidden;
}

.ways-title {
  text-align: center;
  font-size: 1.8rem;
  color: #fff;
  margin: 0 0 0.15rem;
  letter-spacing: 0.08em;
}

.ways-subtitle {
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.8rem;
  margin: 0 0 0.75rem; /* Reduced from 1.5rem */
  letter-spacing: 0.05em;
}

.ways-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 1rem 0; /* Reduced from 2rem */
  align-items: center; /* Vertical center alignment */
}

.ways-track::-webkit-scrollbar {
  display: none;
}

/* Base Card - Inactive State (SMALLER via transform) */
.way-card {
  flex: 0 0 260px; /* Consistent base size */
  scroll-snap-align: center;
  position: relative;
  transform: scale(0.9);
  opacity: 0.5;
  filter: brightness(0.8);
  transition: 
    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center center;
  will-change: transform, opacity;
}

/* Active Card - Full size and fully visible */
.way-card.active {
  transform: scale(1);
  opacity: 1;
  filter: brightness(1);
  z-index: 10;
}

.way-media {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
}

.way-media video,
.way-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Play Overlay - Premium minimal style */
.way-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.way-card:not(.playing) .way-play-overlay {
  opacity: 0;
}

.way-card.paused .way-play-overlay {
  opacity: 1;
}

.play-icon {
  color: rgba(255, 255, 255, 0.9);
  font-size: 2.5rem;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s ease;
}

.way-card.paused:hover .play-icon {
  transform: scale(1.1);
}

/* === MOBILE PRODUCT PAGE - COMPLETE REWRITE === */

  /* Main wrapper - full edge-to-edge on mobile */
  .nuclear-product-wrapper {
    padding: 0 0 130px;
    margin-top: 0;
    min-height: auto;
    display: block;
    overflow-x: hidden;
  }
  
  /* Grid becomes single column */
  .product-grid {
    display: block;
  }
  
  /* Media column - full width edge-to-edge, starts right after header */
  .product-media-column {
    position: relative;
    margin: 0;
    padding: 0;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
  }
  
  /* Image container - relative for overlay positioning */
  .media-canvas {
    position: relative;
    height: auto;
    min-height: 300px;
    display: block;
    padding: 0;
    overflow: hidden;
  }
  
  /* Hide desktop hero on mobile */
  .desktop-hero-image {
    display: none !important;
  }
  
  /* Mobile Image Slider */
  .mobile-image-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    width: 100%;
  }
  
  .mobile-image-slider::-webkit-scrollbar {
    display: none;
  }
  
  .slide-item {
    flex: 0 0 100%;
    width: 100%;
    scroll-snap-align: start;
  }
  
  .slide-item img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
  }
  
  /* Slide Indicators (Dots) */
  .slide-indicators {
    position: absolute;
    bottom: 85px; /* Higher - above glass overlay */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 12; /* Above glass overlay (z-index: 5) */
  }
  
  .slide-indicators .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }
  
  .slide-indicators .dot.active {
    background: #FDB91A;
    width: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(253, 185, 26, 0.5), 0 2px 4px rgba(0, 0, 0, 0.3);
  }
  
  /* Product image - full width (legacy) */
  .hero-product-img {
    max-height: none;
    max-width: 100%;
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
  }
  
  /* Wishlist Heart Button - Premium Glass Style */
  .wishlist-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
    background: rgba(25, 29, 56, 0.85);
    -webkit-backdrop-filter: blur(12px);

    backdrop-filter: blur(12px);
    border-radius: 50%;
    border: 1.5px solid rgba(253, 185, 26, 0.6);
    color: #FDB91A;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.25s ease;
  }
  
  .wishlist-btn:hover {
    border-color: #FDB91A;
    transform: scale(1.05);
  }
  
  .wishlist-btn.active {
    background: rgba(25, 29, 56, 0.85);
    border-color: #FDB91A;
  }
  
  /* ============================================
     HEART BUTTON - Simple, No Animation
     ============================================ */
  
  .wishlist-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .wishlist-btn .heart-outline,
  .wishlist-btn .heart-filled {
    position: absolute;
    transition: opacity 0.15s ease;
  }
  
  .wishlist-btn .heart-outline {
    stroke: #FDB91A;
    opacity: 1;
  }
  
  .wishlist-btn .heart-filled {
    fill: #FDB91A;
    stroke: none;
    opacity: 0;
  }
  
  .wishlist-btn.active .heart-outline {
    opacity: 0;
  }
  
  .wishlist-btn.active .heart-filled {
    opacity: 1;
  }
  
  .wishlist-btn svg {
    width: 18px;
    height: 18px;
  }
  
  /* Glass Overlay */
  .mobile-glass-overlay {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    transform: none;
    box-sizing: border-box;
    background: var(--bg-surface);
    -webkit-backdrop-filter: blur(10px);

    backdrop-filter: blur(10px);
    border-top: 1px solid var(--border-subtle);
    border-radius: 20px 20px 0 0;
    border-radius: 20px 20px 0 0;
    padding: 10px 16px 12px;
    z-index: 5;
  }
  
  .glass-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 2px;
  }
  
  .glass-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
    flex: 1;
  }
  
  .glass-badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }
  
  .glass-price-group {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  
  .mrp-price {
    color: rgba(255, 255, 255, var(--mrp-opacity, 0.75));
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: none;
    position: relative;
    display: inline-block;
    line-height: 1;
  }

  .mrp-price::after {
    content: '';
    position: absolute;
    left: -0.04em;
    right: -0.04em;
    top: 52%;
    height: 1px;
    background: currentColor;
    transform: rotate(-8deg);
    transform-origin: center;
  }
  
  .sale-price {
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 700;
  }
  
  .weight-badge {
    background: rgba(253, 185, 26, 0.15);
    border: 1px solid rgba(253, 185, 26, 0.4);
    color: #FDB91A;
    border-radius: 5px;
    padding: 3px 6px;
    font-size: 0.65rem;
    font-weight: 600;
    flex-shrink: 0;
  }
  
  .glass-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .flavor-tag {
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: right;
  }
  
  .glass-rating {
    display: flex;
    align-items: center;
    gap: 3px;
    margin: 0;
  }
  
  .rating-score {
    margin-right: 3px;
  }
  
  /* Partial Star Fill (4.8 = 96% width) */
  .glass-stars-wrapper {
    position: relative;
    display: inline-block;
    font-size: 0.9rem;
    line-height: 1;
  }
  
  .glass-stars-bg {
    color: rgba(255, 255, 255, 0.25);
    letter-spacing: 2px;
  }
  
  .glass-stars-fill {
    position: absolute;
    left: 0;
    top: 0;
    color: #FDB91A;
    letter-spacing: 2px;
    overflow: hidden;
    white-space: nowrap;
  }
  
  .glass-rating-text {
    color: var(--text-secondary);
    font-size: 0.75rem;
  }
  
  .rating-number {
    color: #FDB91A;
    font-weight: 600;
  }
  
  /* Reviews Section - Full Width with Gradient Gold Lines */
  .reviews-carousel-section {
    padding: 8px 0;
    overflow: visible; /* Allow lines to render at full intensity */
    /* True Full Width */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    margin-top: 0;
    position: relative;
    left: 50%;
    right: 50%;
    transform: translateX(-50%);
    background: #191d38;
  }
  
  /* Gradient Gold Lines - Same as Product Tabs */
  .reviews-carousel-section::before,
  .reviews-carousel-section::after {
    content: '';
    position: absolute;
    left: 1.5rem;
    right: 1.5rem;
    height: 1px !important;
    background: rgba(253, 185, 26, 0.55);
    opacity: 1;
    z-index: 20;
  }
  
  .reviews-carousel-section::before { top: 0; }
  .reviews-carousel-section::after { bottom: 0; }
  
  .reviews-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px;
  }
  
  .reviews-track::-webkit-scrollbar {
    display: none;
  }
  
  .review-item {
    flex: 0 0 100%;
    scroll-snap-align: center; /* Center snap */
    font-size: 0.85rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.3;
    text-align: center;
    padding: 0 40px; /* Add padding to prevent edge touching */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%; /* Force full width */
  }
  
  /* Purchase Options Section */
  .purchase-options-section {
    padding: 16px;
  }
  
  .purchase-option {
    display: flex;
    align-items: center; /* ALIGN EVERYTHING IN THE MIDDLE */
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .purchase-option--detailed {
    align-items: flex-start;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .purchase-option.selected,
  .purchase-option:has(input:checked) {
    border-color: #FDB91A;
    background: rgba(255, 255, 255, 0.085);
  }

  .purchase-option input {
    display: none;
  }

  .radio-circle {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    background: transparent;
  }

  .purchase-option.selected .radio-circle {
    border-color: #FDB91A;
  }

  .purchase-option.selected .radio-circle::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: #FDB91A;
    border-radius: 50%;
  }

  .option-text {
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.03em;
  }

  .option-content {
    flex: 1;
  }

  .purchase-option--detailed .option-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .option-row {
    display: flex;
    align-items: center; /* CENTER TEXT AND BADGE HORIZONTALLY */
    gap: 8px;
    flex-wrap: wrap;
    line-height: normal;
  }

  .purchase-option--detailed .radio-circle {
    margin-top: 3px;
  }
  
  .free-shipping-badge {
    background: #22c55e;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: 0.03em;
  }
  
  .discount-badge {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
    border: 1px solid rgba(74, 222, 128, 0.3);
    font-size: 0.68rem;
    font-weight: 800;
    padding: 4px 9px;
    border-radius: 8px;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-transform: uppercase;
    height: auto;
    white-space: nowrap;
  }
  
  .option-subtext {
    display: block;
    font-size: 0.73rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 1px;
    line-height: 1.3;
  }
  
  .stock-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 12px 14px;
    margin: 0.7rem 0 0.85rem;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(7, 10, 24, 0.18);
  }
  
  .stock-dot {
    width: 11px;
    height: 11px;
    margin-right: 0.48rem;
    background: #22c55e;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(34, 197, 94, 0.42);
  }

  .stock-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.48rem;
    min-width: 0;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
  }

  .stock-badge.in-stock {
    color: rgba(255, 255, 255, 0.92);
  }

  .stock-badge.low-stock {
    color: #FDB91A;
  }

  .stock-badge.sold-out {
    color: #ef4444;
  }
  
  .stock-separator {
    width: 1px;
    height: 20px;
    margin: 0 1rem;
    background: rgba(255, 255, 255, 0.16);
    color: transparent;
    overflow: hidden;
  }
  
  .ship-time {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.92);
    display: flex;
    align-items: center;
    min-width: 0;
    line-height: 1;
    font-weight: 600;
  }
  
  /* SPLIT BUTTON ANIMATION STYLES */
  .split-btn-container {
    display: flex;
    width: 100%;
    gap: 0; /* Starts with 0 gap */
    height: 50px;
    align-items: stretch;
    transition: gap 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  }

  .split-btn-container.is-split {
    gap: 8px; /* Opens up gap when split */
  }

  .mobile-add-to-cart-btn {
    width: 100%; /* Initially 100% */
    height: 50px; 
    padding: 0;
    display: flex; 
    align-items: center;
    justify-content: center;
    background: #FDB91A;
    color: #191d38;
    border: 2px solid #FDB91A;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    flex-grow: 1; /* Allows shrinking/growing */
    flex-basis: 100%;
  }

  /* When split active, this button shrinks to 65% visually (via flex) */
  .mobile-add-to-cart-btn.split-active {
    flex-basis: 60%; 
    background: #fff; /* Optional: Change color to indicate state */
    border-color: #fff;
    color: #191d38;
  }
  
  .mobile-add-to-cart-btn:active {
    transform: scale(0.98);
  }

  /* Checkout Button (Initially Hidden) */
  .split-checkout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #FDB91A;
    color: #191d38;
    border-radius: 10px;
    font-weight: 800;
    font-size: 0.8rem;
    text-decoration: none;
    
    /* Animation States */
    width: 0;
    opacity: 0;
    padding: 0;
    overflow: hidden;
    flex-grow: 0;
    transform: translateX(20px);
    transition: all 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  }

  /* Active Checkout State */
  .split-btn-container.is-split .split-checkout-btn {
    width: auto;
    opacity: 1;
    flex-grow: 1;
    flex-basis: 35%;
    padding: 0 12px;
    transform: translateX(0);
  }

  .mobile-btn-state-added {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 16px; /* Internal padding only for this state */
    height: 100%;
  }

  .added-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 800;
    text-transform: uppercase;
  }

  .mobile-qty-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(25, 29, 56, 0.1);
    padding: 4px 12px;
    border-radius: 8px;
  }

  .mq-control {
    font-size: 1.3rem;
    line-height: 1;
    font-weight: 500;
    cursor: pointer;
    padding: 0 4px;
    user-select: none;
  }

  .mq-value {
    font-weight: 800;
    font-size: 1rem;
    min-width: 14px;
    text-align: center;
  }
  
  .mobile-cart-wrapper {
    width: 100%;
  }
  
  .mobile-qty-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: #FDB91A;
    border: 2px solid #FDB91A;
    border-radius: 10px;
    padding: 12px 24px;
  }
  
  .added-check {
    color: #191d38;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.04em;
  }
  
  .qty-row {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  
  .qty-btn {
    width: 28px;
    height: 28px;
    background: #191d38;
    color: #FDB91A;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
  }
  
  .qty-num {
    color: #191d38;
    font-size: 1rem;
    font-weight: 800;
    min-width: 20px;
    text-align: center;
  }
  
  .accordion-sections {
    padding: 12px 16px;
  }
  
  /* World-Class Accordion Design */
  .accordion-item {
    background: transparent; /* Remove box background */
    border: none;
    border-bottom: 1px solid rgba(253, 185, 26, 0.2); /* Thin gold divider */
    border-radius: 0; /* Remove rounded corners */
    margin-bottom: 0;
    overflow: hidden;
  }
  
  .accordion-item:first-child {
    border-top: 1px solid rgba(253, 185, 26, 0.2);
  }
  
  .accordion-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0; /* Increased spacing */
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    color: #FDB91A;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }
  
  .accordion-icon {
    font-size: 1.4rem;
    font-weight: 300;
    color: rgba(253, 185, 26, 0.6);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .accordion-content {
    /* Base styles */
    color: rgba(255, 255, 255, 0.85); /* Softer white for readability */
    font-size: 0.95rem; /* Slightly larger */
    line-height: 1.7; /* Much better readability */
    font-weight: 400;
    
    /* Animation */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0; /* No side padding needed in this clean layout */
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease, padding 0.4s ease;
  }
  
  .accordion-item.open .accordion-content {
    padding-bottom: 24px;
    padding-top: 4px;
  }
  
  .accordion-item.open .accordion-content {
    max-height: 500px;
    opacity: 1;
    padding-bottom: 16px;
  }
  
  .accordion-content p {
    margin: 12px 0 0;
  }
  
  .accordion-content p:last-child {
    margin-bottom: 0;
  }
  
  .accordion-content strong {
    color: #FDB91A;
  }
  
  /* Flavor Stories - Premium Cross-sell */
  .flavor-stories-section {
    --stories-shell-pad: 16px;
    --stories-line-inset: 18px;
    padding: 8px 16px 24px;
    position: relative;
  }

  .flavor-stories-section::after {
    content: "";
    position: absolute;
    left: var(--stories-line-inset);
    right: var(--stories-line-inset);
    bottom: 0;
    height: 1px;
    background: rgba(253, 185, 26, 0.3);
  }

  /* Section heading: text centered, with a thin gold line extending
     to the left AND right of the text on the same baseline. Cleaner
     and more premium than the previous "boxed between two lines" look. */
  .flavor-stories-label {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 0.78rem;
    color: #FDB91A;
    font-weight: 700;
    margin: 0 0 22px;
    padding: 18px 0 6px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    text-align: center;
    white-space: nowrap;
  }

  .flavor-stories-label::before,
  .flavor-stories-label::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(
      to right,
      rgba(253, 185, 26, 0) 0%,
      rgba(253, 185, 26, 0.45) 50%,
      rgba(253, 185, 26, 0) 100%
    );
  }
  
  .flavor-stories-track {
      display: flex;
      flex-direction: row;
      gap: 14px;
      overflow-x: auto;
    overflow-y: hidden;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding: 4px 18px 6px;
      scroll-padding-left: 18px;
      scroll-padding-right: 18px;
    }
  
  .flavor-stories-track::-webkit-scrollbar {
    display: none;
  }
  
  /* Premium Horizontal Card */
  .flavor-story-card {
      flex: 0 0 calc(100% - 58px);
      max-width: 372px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    min-height: 110px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .story-clone {
    pointer-events: none;
    user-select: none;
  }
  
  .story-img {
    width: 100px;
    min-width: 100px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    align-self: center;
  }
  
  .story-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
  }
  
  .story-content {
      flex: 1;
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      min-width: 0;
    }
    
  .story-name {
      font-size: 0.96rem;
      font-weight: 700;
      color: #fff;
      line-height: 1.2;
      letter-spacing: -0.01em;
      margin-bottom: 1px;
      text-transform: capitalize;
    }
    
  .story-copy {
      font-size: 0.72rem;
      color: rgba(255, 255, 255, 0.64);
      line-height: 1.32;
      margin: 0;
      display: -webkit-box;
      -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .story-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 7px;
      gap: 12px;
    }
  
  .story-price {
    font-size: 0.9rem;
    color: #FDB91A;
    font-weight: 700;
  }
  
  .story-add-btn,
  .qty-selector {
    background: #FDB91A;
    color: #191d38;
    border: none;
    border-radius: 999px;
    padding: 0;
    width: 96px;
    height: 34px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  
  .story-add-btn:active {
    opacity: 0.9;
  }
  
  .qty-selector {
    justify-content: space-between;
    padding: 0 10px;
  }
  
  .qty-controls,
  .qty-selector {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  .qty-minus, .qty-plus {
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    width: 14px;
    text-align: center;
    line-height: 1;
  }
  
  .qty-num {
    font-size: 0.85rem;
    font-weight: 700;
    min-width: 14px;
    text-align: center;
  }
  
  /* Hide original trust badges, title, rating on mobile (now in glass overlay) */
  .trust-badges,
  .pdp-title,
  .pdp-rating {
    display: none !important;
  }
  
  /* Thumbnails - hidden on mobile, auto-scroll handles image navigation */
  .media-thumbnails {
    display: none;
  }
  
  .media-thumbnails::-webkit-scrollbar {
    display: none;
  }
  
  .thumb-item {
    width: 48px;
    height: 64px;
    min-width: 48px;
    flex-shrink: 0;
    border-radius: 6px;
    border: 2px solid rgba(255,255,255,0.08);
    overflow: hidden;
    cursor: pointer;
    scroll-snap-align: center;
    transition: border-color 0.2s ease, transform 0.2s ease;
  }
  
  .thumb-item.active {
    border-color: #FDB91A !important;\r\n    box-shadow: 0 0 0 1px #FDB91A;
  }
  
  .thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* Info column - add padding for content */
  .product-info-column {
    padding: 0 1.25rem;
  }
  
  .info-content {
    text-align: left;
  }
  
  /* Hide desktop add to cart */
  .pdp-actions {
    display: none !important;
  }
  
  /* All text elements centered */
  .pdp-title {
    font-size: 1.8rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.15;
    margin-bottom: 0.75rem;
    display: none; /* Hide main title on mobile as it's in glass overlay */
  }
  
  .glass-title {
    text-transform: capitalize; /* Force Title Case */
  }
  
  .trust-badges {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }
  
  .pdp-rating {
    display: flex;
    justify-content: center;
    margin-bottom: 0.75rem;
  }
  
  /* HIDE REDUNDANT PRICE ON MOBILE */
  .pdp-meta {
    display: none !important; 
  }
  
  .pdp-description {
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    padding: 0 0.5rem;
    color: rgba(255, 255, 255, 0.85);
  }
  
  .spice-level-section {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
  }
  
  .free-shipping-banner {
    text-align: center;
    justify-content: center;
    margin-bottom: 1.5rem;
  }
  
  /* Feature rows */
  .feature-row {
    padding: 1rem;
    margin-bottom: 1rem;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .feature-row .feature-text {
    text-align: center;
  }
  
  .feature-row .feature-text h3 {
    text-align: center;
  }
  
  /* Usage section */
  .usage-ideas-section {
    margin-bottom: 1.5rem;
  }
  
  /* (.section-label base styles cover both layouts; no mobile-only override needed.) */
  
  .usage-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  
  .usage-card {
    padding: 0.75rem;
  }
  
  .usage-emoji {
    font-size: 2rem;
    height: 50px;
  }
  
  /* Guarantee section */
  .guarantee-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
  }
  
  .guarantee-item {
    justify-content: center;
  }
/* End of Global Mobile Styles */


/* ============================================
   STICKY CART — SINGLE SOURCE OF TRUTH
   ============================================
   ARCHITECTURE NOTE — read before touching this rule:
   1. The cart is hoisted to <body> at runtime by hoistProductStickyCart()
      (see bottom of this file). That keeps it OUT of #MainContent's
      stacking context, which historically trapped it behind the footer.
   2. Because the cart is a direct child of <body>, a normal z-index
      (9999) is enough — DO NOT bump this to 2147483647 / !important.
      Bumping z-index has been tried dozens of times; it never works
      because the bug isn't a z-index war, it's a stacking-context trap.
   3. Do NOT add `transform`, `filter`, `will-change`, `isolation`,
      `opacity < 1`, or `contain` to #MainContent, .mobile-universe-wrapper,
      or #shopify-section-footer — any of those re-creates the trap.
   ============================================ */
.mobile-sticky-cart {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100%;
  max-width: 480px;
  /* Drawer tier (2000-2100). Above nav (1000), below toasts (4000-6000)
     and modals (5000+). A higher value would put the cart on top of
     "added to cart" toasts and modals — bad UX. */
  z-index: 2100;
  display: block;
  background: var(--bg-surface, rgba(25, 29, 56, 0.98));
  -webkit-backdrop-filter: blur(20px);

  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(253, 185, 26, 0.4);
  border-radius: 24px 24px 0 0;
  transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1), border-color 0.4s ease;

  /* Hidden by default (pushed down) */
  transform: translateY(120%);
  pointer-events: none;
}

/* Sticky cart visible globally */

.mobile-sticky-cart.visible-scroll {
  transform: translateY(0); /* Slide up */
  pointer-events: auto; 
}

.mobile-sticky-cart.expanded {
  border-top-color: rgba(253, 185, 26, 0.75);
}

/* Expandable zone */
.drawer-expand-zone {
  position: relative;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}

.mobile-sticky-cart.expanded .drawer-expand-zone {
  max-height: 250px;
}

/* Close button */
/* Close button - Floating Circle style */
/* Close button - Floating Circle style */
.drawer-close-btn {
  position: absolute;
  top: -13px; /* Half height to sit EXACTLY on the line */
  right: 16px;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(253, 185, 26, 0.75); /* Match expanded drawer opacity */
  background: #191d38;
  border-radius: 50%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FDB91A;
  cursor: pointer;
  z-index: 20; /* Higher than content */
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
  
  /* Hidden by default */
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8);
}

.mobile-sticky-cart.expanded .drawer-close-btn {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.drawer-close-btn:active {
  transform: scale(0.9);
}

.drawer-close-btn svg {
  width: 16px;
  height: 16px;
}

.expand-zone-content {
  padding: 16px;
  padding-top: 12px;
}

.upsell-placeholder {
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.9rem;
}

/* Backdrop - KILLED by User Request */
.drawer-backdrop {
  display: none !important;
}

/* Button pulse animation */
@keyframes btnPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.sticky-add-btn.pulse {
  animation: btnPulse 0.3s ease;
}

/* Button wrapper with shipping text above */
.sticky-btn-wrapper {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: 100%;
  max-width: 228px;
  min-width: 192px;
  flex: 0 1 46%;
}

.ship-text {
  display: flex;
  justify-content: flex-end;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.82);
  align-items: center;
  gap: 4px;
  margin: 0;
  line-height: 1;
  white-space: nowrap;
}

.ship-icon {
  vertical-align: middle;
  margin-right: 2px;
}

.sticky-cart-inner {
  padding: 12px 14px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) minmax(192px, 46%);
  align-items: end;
  gap: 10px;
}

.sticky-price-section {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  min-height: 0;
}

.sticky-product-thumb {
  position: relative;
  align-self: end;
  bottom: 0;
  width: 36px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}

.sticky-thumb-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 56px;
  object-fit: contain;
}

.sticky-price-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sticky-price {
  font-size: 1.48rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: -0.02em;
}

.sticky-discount {
  font-size: 0.74rem;
  font-weight: 800;
  color: #31d17c;
  padding: 4px 9px;
  border-radius: 8px;
  background: rgba(49, 209, 124, 0.14);
  border: 1px solid rgba(49, 209, 124, 0.22);
  line-height: 1;
  letter-spacing: 0.03em;
}

.sticky-mrp {
  font-size: 0.74rem;
  color: rgba(255, 255, 255, var(--mrp-opacity, 0.75));
  line-height: 1;
  margin: 0;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
}

.sticky-mrp .mrp-label {
  font-size: 0.74rem;
  color: rgba(255, 255, 255, var(--mrp-opacity, 0.75));
  letter-spacing: 0.01em;
  font-weight: 500;
}

.sticky-compare-price {
  color: rgba(255, 255, 255, var(--mrp-opacity, 0.75));
  line-height: 1;
}

.sticky-tax-note {
  display: none;
}

/* The wrapper that contains BOTH the ADD-state button and the ADDED-state pill.
   Must have a fixed height — both children use `height: 100%` further down,
   and without an explicit parent height the ADD button collapses to ~20px. */
#stickyAddBtn {
  height: 46px;
  display: block;
  width: 100%;
}

.sticky-add-btn {
  background: var(--metallic-gold, #FDB91A);
  color: #191d38;
  border: none;
  border-radius: 50px;
  padding: 0 16px;
  width: 100%;
  min-width: 0;
  height: 46px;
  font-weight: 800;
  font-size: 0.82rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  letter-spacing: 0.07em;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(253, 185, 26, 0.08);
}

/* ADD STATE (Centered) */
.sticky-btn-state-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 100%;
}

/* ADDED STATE (Split from Center Animation) */
.sticky-btn-state-added {
  display: none; /* JS controls visibility */
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  gap: 0;
}

.sticky-btn-state-added[style*="flex"] {
  /* When JS sets display: flex */
  animation: splitReveal 0.25s ease-out forwards;
}

@keyframes splitReveal {
  0% {
    gap: 0;
    opacity: 0.5;
    transform: scale(0.95);
  }
  100% {
    gap: 8px;
    opacity: 1;
    transform: scale(1);
  }
}

.added-pill {
  animation: slideFromCenter 0.2s ease-out;
}

.checkout-btn-split {
  animation: slideFromCenter 0.2s ease-out 0.05s both;
}

@keyframes slideFromCenter {
  0% {
    opacity: 0;
    transform: scaleX(0.7);
  }
  100% {
    opacity: 1;
    transform: scaleX(1);
  }
}

.sticky-add-btn:active {
  transform: scale(0.97);
}

.sticky-add-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.added-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.added-check {
  font-size: 1rem;
}

.added-text {
  font-weight: 800;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.qty-group {
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(0,0,0,0.08); /* Subtle pill background */
  border-radius: 12px;
  padding: 2px 4px;
}

.qty-control {
  font-size: 1.2rem;
  padding: 0 6px;
  cursor: pointer;
  line-height: 1;
  font-weight: 600;
  display: flex;
  align-items: center;
  height: 100%;
  user-select: none;
}

.qty-value {
  font-variant-numeric: tabular-nums;
  min-width: 12px;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
}

/* Split Button Styles - Preferred Design */
.sticky-btn-state-added {
  display: flex;
  align-items: center;
  justify-content: stretch;
  width: 100%;
  height: 100%;
  gap: 8px;
}

.added-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  color: #191d38;
  padding: 0 12px;
  height: 100%;
  border-radius: 50px;
  flex: 1;
}

.added-check {
  color: #191d38;
  font-size: 0.9rem;
  font-weight: 700;
}

.added-text {
  font-weight: 800;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #191d38;
}

.qty-controls-inline {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  background: rgba(0,0,0,0.06);
  border-radius: 50px;
  padding: 4px 8px;
}

.qty-ctrl {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 600;
  color: #191d38;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
  border-radius: 50%;
}

.qty-ctrl:active {
  background: rgba(0,0,0,0.1);
}

.qty-value {
  font-variant-numeric: tabular-nums;
  min-width: 20px;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 700;
  color: #191d38;
}

.checkout-btn-split {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: #FDB91A;
  color: #191d38;
  padding: 0 20px;
  height: 100%;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.checkout-btn-split:hover {
  background: #ffe066;
  transform: scale(1.02);
}

.checkout-arrow {
  font-size: 1.2rem;
  font-weight: 400;
}

/* ============================================================
   STICKY CART — "ADD" and "ADDED" STATES (snippet class names)
   The snippet (snippets/nuclear-product-sticky.liquid) uses these
   class names; without these rules the button looks broken after
   add-to-cart because the added-state children have no styling.
   ============================================================ */

/* Label inside the gold ADD button (just the "ADD TO CART" text) */
.sticky-action-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  letter-spacing: inherit;
}

/* Outer container for the "added" state — replaces the gold pill
   button with a split layout: qty pill on the left, checkout icon
   on the right. Sits in the same 46px slot as .sticky-add-btn. */
.sticky-added-content {
  width: 100%;
  height: 46px;
  gap: 8px;
  align-items: stretch;
  /* display toggled by JS between 'none' and 'flex' */
}

/* White pill on the left: − [qty] + */
.sticky-qty-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  min-width: 0;
  background: #fff;
  color: #191d38;
  border-radius: 50px;
  padding: 0 8px;
  height: 100%;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(253, 185, 26, 0.12);
}

.sticky-qty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 1.15rem;
  font-weight: 700;
  color: #191d38;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, transform 0.1s ease;
  flex-shrink: 0;
}

.sticky-qty-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}

.sticky-qty-btn:active {
  background: rgba(0, 0, 0, 0.12);
  transform: scale(0.92);
}

.sticky-qty-val {
  font-variant-numeric: tabular-nums;
  min-width: 22px;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 800;
  color: #191d38;
  line-height: 1;
}

/* Gold rounded-square checkout link on the right */
.sticky-checkout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 100%;
  background: var(--metallic-gold, #FDB91A);
  color: #191d38;
  border-radius: 50px;
  text-decoration: none;
  flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(253, 185, 26, 0.08);
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.sticky-checkout-btn:hover {
  background: #ffe066;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
}

.sticky-checkout-btn:active {
  transform: scale(0.97);
}

.sticky-checkout-btn svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* While the sticky cart has an in-flight request, dim and lock all of
   its action surfaces so spam-clicks can't queue duplicates. The JS
   layer also blocks new requests; this is the visual half. */
.mobile-sticky-cart.is-busy .sticky-add-btn,
.mobile-sticky-cart.is-busy .sticky-qty-btn,
.mobile-sticky-cart.is-busy .sticky-checkout-btn {
  pointer-events: none;
  opacity: 0.65;
}

/* Description Content Safety */
.tab-inner img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
.tab-inner table {
  width: 100%;
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
}
.tab-inner iframe {
  max-width: 100%;
}