/** Shopify CDN: Minification failed

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

**/
/* ==========================================================================
   Product Page - Mobile First Design
   ========================================================================== */

/* Desktop: Force wrapper to always be 1:1 square */
@media screen and (min-width: 750px) {
  body.template-product .product__media-wrapper {
    aspect-ratio: 1 / 1 !important;
  }
  
  body.template-product .product__media-list,
  body.template-product .product__media-item,
  body.template-product media-gallery,
  body.template-product .product__media-wrapper slider-component {
    height: 100% !important;
    min-height: auto !important;
  }
  
  body.template-product .product__media-wrapper slider-component {
    display: block !important;
  }
  
  body.template-product .product__media-item.is-active {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Force product image to square (1:1) on mobile only */
@media screen and (max-width: 749px) {
  body.template-product .product-media-container .media {
    /* padding-top: 100% !important; */
  }
}

@media screen and (max-width: 749px) {
  /* Hide desktop sticky bar on mobile */
  .product-desktop-sticky {
    display: none !important;
  }

  /* Disable image slider/swiping - static image only */
  body.template-product .product__media-list {
    overflow: hidden !important;
    scroll-snap-type: none !important;
    touch-action: pan-y !important;
    margin: 0 !important;
    width: 100% !important;
    padding: 0 !important;
  }

  body.template-product .product__media-list .slider__slide {
    scroll-snap-align: none !important;
  }
  /* Hide header, footer, bottom nav, and related products */
  body.template-product .header-wrapper,
  body.template-product .minko-bottom-nav,
  body.template-product footer.footer--minimal,
  body.template-product .related-products,
  body.template-product product-recommendations {
    display: none !important;
  }

  /* Remove body padding */
  body.template-product {
    padding-top: 0 !important;
    padding-bottom: 100px;
  }

  /* Product media wrapper - ORIGINAL */
  body.template-product .product__media-wrapper {
    position: static;
  }

  /* Mobile Sticky Back Button - ORIGINAL: Pinned at top of page */
  .product-sticky-back {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 150;
    padding: 12px 0 12px;
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
    background: transparent;
    pointer-events: none;
  }

  /* Blurry background when scrolled 400px+ */
  .product-sticky-back.is-scrolled {
    background: transparent;
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
  }

  .product-sticky-back__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 16px;
    background: transparent;
    pointer-events: auto;
  }

  .product-sticky-back__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    color: #192A49;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    pointer-events: auto;
    margin-left: 10px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
  }

  .product-sticky-back__btn:hover {
    background: #fff;
  }

  .product-sticky-back__btn:active {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    transform: scale(1.2);
  }

  .product-sticky-back__btn svg {
    width: 20px;
    height: 20px;
  }

  .product-sticky-back__share {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    color: #192A49;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: none;
    cursor: pointer;
    pointer-events: auto;
    margin-right: 10px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
  }

  .product-sticky-back__share:hover {
    background: #fff;
  }

  .product-sticky-back__share:active {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    transform: scale(1.2);
  }

  .product-sticky-back__share svg {
    width: 20px;
    height: 20px;
  }

  /* Product section - no top padding */
  body.template-product #MainContent,
  body.template-product .shopify-section,
  body.template-product [class*="section-"][class*="-padding"] {
    padding-top: 0 !important;
  }

  /* Product layout */
  body.template-product .page-width {
    padding: 0 1.5rem;
  }

  body.template-product .product {
    display: flex;
    flex-direction: column;
  }

  /* Product image with blush background - 1:1 square with max-height cap */
  body.template-product .product__media-wrapper {
    margin: 0 0 1.5rem 0;
    border-radius: 15px;
    overflow: hidden;
    background: #F6ECDB;
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    max-height: 430px !important;
  }
  
  /* Vertical centering is handled by JS (centerMobileProductImage).
     CSS leaves margin-top alone so JS can calculate it precisely. */

  /* NOTE: No height: 100% chain here. The wrapper sets its own height via
     aspect-ratio + max-height. Children expand naturally to fit their
     content (Dawn's padding-top on .media). This avoids Safari's circular
     height dependency bug. */

  /* Make media items full width */
  body.template-product .product__media-item {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  /* Remove border from image container */
  body.template-product .product-media-container.global-media-settings {
    border: none !important;
    --media-border-width: 0px !important;
  }

  /* Make image sizing purely width-based, ignoring viewport height.
     Force full-width container (stop constrain-height width-shrinking)
     and use natural ratio with 300px floor / 430px ceiling. */
  body.template-product .product-media-container.constrain-height.media-fit-contain {
    width: 100% !important;
  }

  body.template-product .product-media-container.constrain-height .media {
    padding-top: min(max(var(--ratio-percent), 300px), 430px) !important;
  }

  body.template-product .product__media {
    background: #F6ECDB;
    border-radius: 15px;
  }

  /* Thumbnail navigation - ensure proper display */
  body.template-product .product__media-list {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Hide non-active slides on mobile - only show one image at a time */
  body.template-product .product__media-item {
    display: none !important;
    padding: 0 !important;
  }

  body.template-product .product__media-item.is-active {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 0 !important;
  }

  /* Mobile Thumbnail Strip - Bottom Right Overlay */
  /* NOTE: media-gallery does NOT have position: relative so that thumbnails */
  /* position relative to .product__media-wrapper (the wrapper fills to 430px  */
  /* via aspect-ratio, while media-gallery only expands to its content height). */
  body.template-product media-gallery,
  body.template-product slider-component {
    display: block;
  }
  
  body.template-product .product-media-thumbnails {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: flex;
    gap: 3px;
    z-index: 2;
  }

  body.template-product .product-media-thumbnail {
    width: 53px;
    height: 53px;
    padding: 0;
    border: 2px solid #F0F2F6 !important;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: #E7B89C !important;
    transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
  }

  body.template-product .product-media-thumbnail.is-active {
    border-color: #F0F2F6 !important;
    background: #E7B89C !important;
    transform: scale(1.05);
  }

  body.template-product .product-media-thumbnail img {
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    object-fit: cover;
    display: block;
    padding: 4px;
    box-sizing: content-box;
  }

  body.template-product .product-media-thumbnail--more {
    background: rgba(25, 42, 73, 0.5) !important;
    border-color: #F0F2F6 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }

  body.template-product .product-media-thumbnail--more-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
  }

  body.template-product .product-media-thumbnail--more-overlay {
    position: relative;
    z-index: 2;
    color: #F0F2F6;
    font-size: 12px;
    font-weight: 600;
    background: rgba(25, 42, 73, 0.5);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  body.template-product .product__media img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 15px;
    padding: 42px;
    box-sizing: border-box;
    object-fit: contain;
  }

  /* Override global-media-settings border-radius to match */
  body.template-product .product-media-container.global-media-settings {
    border-radius: 15px !important;
    overflow: hidden !important;
  }

  body.template-product .product-media-container.global-media-settings img {
    border-radius: 15px !important;
  }

  /* Variant pills - expand to full width */
  body.template-product .product-form__input--pill {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    border: none;
    margin: 0 0 20px 0 !important;
  }
  
  /* Add top margin to first variant picker for spacing from Shop Pay installment */
  body.template-product .product-form__input--pill:first-of-type {
    margin-top: 20px !important;
    padding: 0 !important;
    width: 100%;
    max-width: none !important;
  }
  
  /* Flavor selector mobile styles */
  body.template-product .flavor-selector {
    display: block !important;
    border: none !important;
    margin-top: 20px !important;
    padding: 0 !important;
    width: 100%;
    max-width: none !important;
  }
  
  body.template-product .flavor-selector__fieldset {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  body.template-product .flavor-selector .form__label {
    grid-column: 1 / -1 !important;
    margin-bottom: 12px !important;
  }
  
  body.template-product .flavor-selector__options {
    display: contents !important;
  }
  
  body.template-product .flavor-selector__pill,
  body.template-product .flavor-selector__pill:link,
  body.template-product .flavor-selector__pill:visited,
  body.template-product .flavor-selector__pill:active {
    width: 100% !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    border: 3px solid #F0F2F6 !important;
    border-radius: 40px !important;
    background: #F5F5F5 !important;
    color: #192A49 !important;
    text-align: center !important;
    text-decoration: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  
  body.template-product .flavor-selector__pill--active,
  body.template-product .flavor-selector__pill--active:active {
    background: #192A49 !important;
    color: #FFFFFF !important;
    border-color: #F0F2F6 !important;
    transform: none !important;
    opacity: 1 !important;
  }
  
  /* Expand buy buttons container */
  body.template-product .product-form__buttons {
    max-width: none !important;
  }
  
  body.template-product .product-form {
    max-width: none !important;
  }

  body.template-product .product-form__input--pill legend {
    width: 100%;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #192A49;
  }

  body.template-product .product-form__input--pill input[type="radio"] + label {
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px !important;
    background: #F5F5F5;
    border: 3px solid #F0F2F6;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: #192A49;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
    -webkit-user-select: none;
  }

  body.template-product .product-form__input--pill input[type="radio"]:checked + label {
    background: #192A49;
    color: #FFFFFF;
  }

  /* Weight subtitle - pill style like selected variants */
  body.template-product .product__subtitle {
    display: inline-block;
    margin: 0 0 12px 0;
  }

  body.template-product .product__subtitle span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 16px;
    background: #192A49;
    border: 3px solid #192A49;
    color: #FFFFFF;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
  }





  /* Price & title */
  /* Price & Rating */
  body.template-product .product__price-rating {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 1.5rem;
  }

  body.template-product .price {
    font-size: 24px;
    font-weight: 700;
    color: #6466F1;
    margin: 0;
  }

  /* Align strikethrough price to center of sale price on mobile */
  body.template-product .price--on-sale .price__sale {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  body.template-product .price--on-sale .price__sale .price-item {
    margin: 0;
  }

  /* Center text inside strikethrough element */
  body.template-product .price--on-sale .price__sale s.price-item--regular {
    display: flex;
    align-items: center;
    line-height: 1;
  }

  body.template-product .product__rating {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.9);
    padding: 6px 8px;
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  body.template-product .product__rating-star {
    width: 16px;
    height: 16px;
    fill: #F59E0B;
    color: #F59E0B;
  }

  body.template-product .product__rating-value {
    font-size: 14px;
    font-weight: 600;
    color: #192A49;
    line-height: 1;
  }

  body.template-product .product__rating-count {
    font-size: 13px;
    font-weight: 500;
    color: #192A49;
    line-height: 1;
  }

  body.template-product .product__title h1 {
    font-size: 24px;
    font-weight: 800;
    color: #192A49;
    margin: 0 0 1rem;
  }

  /* Sticky ATC button */
  .product-sticky-atc {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: #FFFFFF;
    border-top: 1px solid #E5E7EB;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  }
  
  /* iOS Safari fix: Equal padding for true centering of button
     Bottom space includes safe-area for home indicator + modest extra for Safari dead zone */
  @supports (-webkit-touch-callout: none) {
    .product-sticky-atc {
      padding: calc(14px + env(safe-area-inset-bottom, 0px) + 8px) 16px;
      /* Center the button vertically */
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }

  .product-sticky-atc__button {
    width: 100%;
    background: #192A49;
    color: #FFFFFF;
    border: none;
    border-radius: 999px;
    padding: 16px 20px;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
  }

  /* VIEW CART state - purple glow effect (confined to button) */
  .product-sticky-atc__button.product-sticky-atc__button--in-cart {
    box-shadow: 0 0 16px 4px rgba(100, 102, 241, 0.4);
  }

  /* Active state - keep purple glow on VIEW CART button when clicked */
  .product-sticky-atc__button.product-sticky-atc__button--in-cart:active {
    box-shadow: 0 0 16px 4px rgba(100, 102, 241, 0.4) !important;
  }

  .product-sticky-atc__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    position: absolute;
    left: 20px;
  }

  .product-sticky-atc__icon svg {
    width: 20px;
    height: 20px;
    fill: #ffffff;
  }

  .product-sticky-atc__text {
    text-align: center;
  }

  .product-sticky-atc__qty {
    min-width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    position: absolute;
    right: 20px;
  }

  /* Product Description - Show More/Less */
  body.template-product .product__description-label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #192A49;
    margin-top: 12px;
    margin-bottom: 12px;
  }

  body.template-product .product__description-content {
    position: relative;
    max-height: 5.5em;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  body.template-product .product__description-content.is-expanded {
    max-height: none;
  }

  body.template-product .product__description-content:not(.is-expanded)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2em;
    background: linear-gradient(transparent, #FAF9F5);
    pointer-events: none;
  }

  body.template-product .product__description-toggle {
    display: block;
    margin-top: 8px;
    padding: 0;
    background: none;
    border: none;
    color: #192A49;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    text-decoration: underline;
  }

  /* Tight spacing - remove all margins, use only 10px where needed */
  body.template-product .product__info-container > * {
    margin: 0 !important;
  }
  
  /* Exception: Flavor selector needs spacing from Shop Pay */
  body.template-product .product__info-container > .flavor-selector {
    margin-top: 20px !important;
  }

  body.template-product .product__price-rating {
    margin: 0 !important;
  }

  body.template-product .price__container {
    margin: 0 !important;
  }

  body.template-product .installment {
    margin: 10px 0 !important;
    padding: 0 !important;
  }

  body.template-product .product__subtitle {
    margin: 10px 0 20px !important;
  }
}

@media screen and (min-width: 750px) {
  /* DESKTOP/TABLET - Match mobile styling */
  
  /* Footer z-index - above sticky container */
  body.template-product footer {
    position: relative;
    z-index: 200;
  }
  
  /* Product image container - 40% width on tablet/small desktop */
  body.template-product .product__media-wrapper,
  body.template-product.product--large .product__media-wrapper,
  body.template-product.product--medium .product__media-wrapper,
  body.template-product.product--small .product__media-wrapper {
    max-width: 40% !important;
    width: 40% !important;
  }
  
  /* Product info wrapper - use remaining space */
  body.template-product .product__info-wrapper,
  body.template-product.product--large .product__info-wrapper,
  body.template-product.product--medium .product__info-wrapper,
  body.template-product.product--small .product__info-wrapper {
    max-width: 60% !important;
    width: 60% !important;
    padding-left: 3rem !important;
    padding-right: 0 !important;
  }
  
  /* Remove max-width restriction on info container */
  body.template-product .product__info-container {
    max-width: none !important;
  }
  
  /* Hide mobile bottom nav on tablet/desktop */
  body.template-product .minko-bottom-nav {
    display: none !important;
  }
  
  /* Rating badge - white bg with rounded corners */
  body.template-product .product__rating {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.9);
    padding: 6px 8px;
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }

  body.template-product .product__rating-star {
    width: 16px !important;
    height: 16px !important;
    fill: #F59E0B;
    color: #F59E0B;
  }

  body.template-product .product__rating-value {
    font-size: 14px;
    font-weight: 600;
    color: #192A49;
  }

  body.template-product .product__rating-count {
    font-size: 13px;
    font-weight: 500;
    color: #192A49;
  }

  /* Price & Rating row */
  body.template-product .product__price-rating {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 1.5rem !important;
  }

  body.template-product .price {
    font-size: 24px;
    font-weight: 700;
    color: #6466F1;
    margin: 0;
  }

  /* Align strikethrough price to center of sale price on desktop */
  body.template-product .price--on-sale .price__sale {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  body.template-product .price--on-sale .price__sale .price-item {
    margin: 0;
  }

  /* Center text inside strikethrough element */
  body.template-product .price--on-sale .price__sale s.price-item--regular {
    display: flex;
    align-items: center;
    line-height: 1;
  }

  /* Spacing - match mobile */
  body.template-product .product__info-container > * {
    margin: 0 !important;
  }
  
  /* Title spacing - match mobile's 1rem bottom margin */
  body.template-product .product__title {
    margin: 0 0 1rem !important;
  }

  body.template-product .price__container {
    margin: 0 !important;
  }

  body.template-product .installment {
    margin: 10px 0 !important;
    padding: 0 !important;
  }

  body.template-product .product__subtitle {
    margin: 10px 0 20px !important;
  }

  /* Variant pills */
  body.template-product .product-form__input--pill {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    border: none;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    width: 100%;
  }
  
  /* Add top margin to first variant picker for spacing from Shop Pay installment */
  body.template-product .product-form__input--pill:first-of-type,
  body.template-product .flavor-selector {
    margin-top: 20px !important;
  }

  body.template-product .product-form__input--pill legend {
    width: 100%;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #192A49;
  }

  body.template-product .product-form__input--pill input[type="radio"] + label {
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    background: #F5F5F5;
    border: 3px solid #F0F2F6;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: #192A49;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
    -webkit-user-select: none;
  }

  body.template-product .product-form__input--pill input[type="radio"]:checked + label {
    background: #192A49;
    color: #FFFFFF;
  }
  
  /* Flavor selector tablet styles */
  body.template-product .flavor-selector {
    display: block !important;
    border: none !important;
  }
  
  body.template-product .flavor-selector__fieldset {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  body.template-product .flavor-selector .form__label {
    grid-column: 1 / -1 !important;
    margin-bottom: 12px !important;
  }
  
  body.template-product .flavor-selector__options {
    display: contents !important;
  }
  
  body.template-product .flavor-selector__pill,
  body.template-product .flavor-selector__pill:link,
  body.template-product .flavor-selector__pill:visited,
  body.template-product .flavor-selector__pill:active {
    width: 100% !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 20px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border: 3px solid #F0F2F6 !important;
    border-radius: 999px !important;
    background: #F5F5F5 !important;
    color: #192A49 !important;
    text-decoration: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  
  body.template-product .flavor-selector__pill--active,
  body.template-product .flavor-selector__pill--active:active {
    background: #192A49 !important;
    color: #FFFFFF !important;
    border-color: #F0F2F6 !important;
    transform: none !important;
    opacity: 1 !important;
  }
  
  /* Expand form elements to full width */
  body.template-product .product-form,
  body.template-product .product-form__input,
  body.template-product .product-form__buttons {
    max-width: none !important;
  }

  /* Description */
  body.template-product .product__description-label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #192A49;
    margin-top: 12px;
    margin-bottom: 12px;
  }

  /* Product image with blush background */
  body.template-product .product__media-wrapper {
    margin: 0 0 0.5rem 0;
    border-radius: 15px;
    overflow: hidden;
    background: #F6ECDB;
    position: relative;
  }

  body.template-product .product__media {
    background: #F6ECDB;
    border-radius: 15px;
  }

  body.template-product .product__media img,
  body.template-product .product-media-container img {
    width: 100% !important;
    height: 100% !important;
    display: block;
    border-radius: 15px;
    padding: clamp(28px, 3.5vw, 42px);
    box-sizing: border-box;
    object-fit: contain;
  }

  /* Override global-media-settings border-radius to match */
  body.template-product .product-media-container.global-media-settings {
    border-radius: 15px !important;
    overflow: hidden !important;
  }

  body.template-product .product-media-container.global-media-settings img {
    border-radius: 15px !important;
  }

  body.template-product .product__media-list {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Hide non-active slides on desktop/tablet - only show one image at a time */
  body.template-product .product__media-item {
    display: none !important;
  }

  body.template-product .product__media-item.is-active {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* Thumbnails */
  body.template-product media-gallery {
    position: relative;
    display: block;
  }
  
  body.template-product .product-media-thumbnails {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: flex;
    gap: 3px;
    z-index: 2;
  }

  body.template-product .product-media-thumbnail {
    width: 45px;
    height: 45px;
    padding: 0;
    border: 2px solid #F0F2F6 !important;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: #E7B89C !important;
    transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
  }

  body.template-product .product-media-thumbnail.is-active {
    border-color: #F0F2F6 !important;
    background: #E7B89C !important;
    transform: scale(1.05);
  }

  body.template-product .product-media-thumbnail img {
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    object-fit: cover;
    display: block;
    padding: 4px;
    box-sizing: content-box;
  }

  body.template-product .product-media-thumbnail--more {
    background: rgba(25, 42, 73, 0.5) !important;
    border-color: #F0F2F6 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }

  body.template-product .product-media-thumbnail--more-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
  }

  body.template-product .product-media-thumbnail--more-overlay {
    position: relative;
    z-index: 2;
    color: #F0F2F6;
    font-size: 12px;
    font-weight: 600;
    background: rgba(25, 42, 73, 0.5);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Weight subtitle - pill style */
  body.template-product .product__subtitle {
    display: inline-block;
    margin: 10px 0 20px !important;
  }

  body.template-product .product__subtitle span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 16px;
    background: #192A49;
    border: 3px solid #192A49;
    color: #FFFFFF;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
  }

  /* Description show more/less */
  /* Desktop: Support both expanded and collapsed states */
  body.template-product .product__description-content {
    position: relative;
    max-height: 5.5em; /* Collapsed by default, JS adds is-expanded on load */
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  body.template-product .product__description-content.is-expanded {
    max-height: none;
    overflow: visible;
  }

  /* Gradient fade only when collapsed */
  body.template-product .product__description-content:not(.is-expanded)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2em;
    background: linear-gradient(transparent, #FAF9F5);
    pointer-events: none;
  }

  body.template-product .product__description-toggle {
    display: block;
    margin-top: 8px;
    padding: 0;
    background: none;
    border: none;
    color: #192A49;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    text-decoration: underline;
  }

  /* Product media wrapper - tablet size */
  body.template-product .product__media-wrapper {
    position: relative;
    max-width: 35%;
  }

  /* Sticky Back/Share Buttons - Positioned over product image (tablet + desktop) */
  body.template-product .product-sticky-back {
    display: block !important;
    position: absolute;
    top: 12px;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 0 16px;
    background: transparent;
    pointer-events: none;
  }

  body.template-product .product-sticky-back__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: transparent;
    pointer-events: auto;
  }

  body.template-product .product-sticky-back__btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: #FFFFFF;
    border: none;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    pointer-events: auto;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
  }

  body.template-product .product-sticky-back__btn:hover {
    background: #fff;
    transform: scale(1.05);
  }

  body.template-product .product-sticky-back__btn svg {
    width: 20px !important;
    height: 20px !important;
    color: #192A49 !important;
  }

  body.template-product .product-sticky-back__share {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: #FFFFFF;
    border: none;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    pointer-events: auto;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
  }

  body.template-product .product-sticky-back__share:hover {
    background: #fff;
    transform: scale(1.05);
  }

  body.template-product .product-sticky-back__share svg {
    width: 20px;
    height: 20px;
    color: #192A49;
  }

  /* Grid layout - prevent image from stretching when description expands */
  body.template-product .product.grid {
    align-items: start;
  }

  /* Image container - let image use natural aspect ratio on desktop */
  body.template-product .product__media-wrapper {
    align-self: start;
    overflow: hidden;
    margin-bottom: 0 !important;
  }

  /* Hide Dawn's default thumbnail slider - we use custom thumbnails instead */
  body.template-product .thumbnail-slider {
    display: none !important;
  }

  /* Hide Dawn's hidden modal toggle button that adds empty space below image */
  body.template-product .product__media-toggle {
    display: none !important;
  }

  /* Hide Dawn's slider prev/next buttons below image */
  body.template-product .slider-buttons {
    display: none !important;
  }

  /* CRITICAL: Fix SVG sizing on desktop - prevent huge icons */
  body.template-product svg {
    max-width: 100% !important;
    max-height: 100% !important;
  }
}

@media screen and (min-width: 1200px) {
  /* DESKTOP LARGE - Same 50% size as tablet */
  body.template-product .product__media-wrapper,
  body.template-product.product--large .product__media-wrapper,
  body.template-product.product--medium .product__media-wrapper,
  body.template-product.product--small .product__media-wrapper {
    max-width: 50% !important;
    width: 50% !important;
  }
  
  /* Product info wrapper - use remaining space on large desktop */
  body.template-product .product__info-wrapper,
  body.template-product.product--large .product__info-wrapper,
  body.template-product.product--medium .product__info-wrapper,
  body.template-product.product--small .product__info-wrapper {
    max-width: 50% !important;
    width: 50% !important;
    padding-left: 4rem !important;
    padding-right: 0 !important;
  }
  
  /* Remove max-width restriction on info container */
  body.template-product .product__info-container {
    max-width: none !important;
  }
  
  /* Title spacing - match mobile */
  body.template-product .product__title {
    margin: 0 0 1rem !important;
  }
  
  /* Price-rating spacing */
  body.template-product .product__price-rating {
    margin: 0 0 1.5rem !important;
  }
  
  /* Expand form elements to full width */
  body.template-product .product-form,
  body.template-product .product-form__input,
  body.template-product .product-form__buttons {
    max-width: none !important;
  }

  body.template-product .product__media-list {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Hide Dawn's default thumbnail slider - we use custom thumbnails instead */
  body.template-product .thumbnail-slider {
    display: none !important;
  }

  /* Hide Dawn's hidden modal toggle button that adds empty space below image */
  body.template-product .product__media-toggle {
    display: none !important;
  }

  /* Hide Dawn's slider prev/next buttons below image */
  body.template-product .slider-buttons {
    display: none !important;
  }
}

/* ==========================================================================
   Desktop Floating Sticky Bar - Uses existing mobile ATC button
   ========================================================================== */

@media screen and (min-width: 750px) {
  /* Hide mobile sticky bar on desktop (we'll create a different one) */
  .product-sticky-atc {
    display: none !important;
  }
  
  /* Desktop floating sticky bar - centered like page content */
  .product-desktop-sticky {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 10rem); /* 5rem margin each side */
    max-width: 110rem;
    z-index: 100;
    pointer-events: none;
  }
  
  /* Inner container */
  .product-desktop-sticky__inner {
    width: 100%;
    height: 88px; /* Fixed height: 56px image + 32px padding */
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    padding: 16px 24px;
    pointer-events: auto;
    display: flex;
    align-items: center; /* Center vertically */
    gap: 16px;
  }
  
  /* Active state - preserve container shadow on click */
  .product-desktop-sticky__inner:active {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
  }
  
  /* Large desktop - keep same margins */
  @media screen and (min-width: 1200px) {
    .product-desktop-sticky {
      width: calc(100% - 10rem);
      max-width: 110rem; /* Same max-width as smaller screens */
    }
  }
  
  /* Tablet - smaller margins */
  @media screen and (max-width: 990px) {
    .product-desktop-sticky {
      width: calc(100% - 6rem); /* 3rem margin each side */
    }
  }
  
  /* Product image - small thumbnail */
  .product-desktop-sticky__image {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    background: #F6ECDB;
    align-self: center; /* Center vertically */
  }
  
  .product-desktop-sticky__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
    box-sizing: border-box;
  }
  
  /* Product info - title and price stacked */
  .product-desktop-sticky__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    gap: 0;
  }
  
  .product-desktop-sticky__title {
    font-size: 18px;
    font-weight: 700;
    color: #192A49;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .product-desktop-sticky__price {
    font-size: 16px;
    font-weight: 700;
    color: #6466F1;
  }
  
  /* Price + Variants row */
  .product-desktop-sticky__row {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  
  .product-desktop-sticky__variants {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }
  
  .product-desktop-sticky__variant-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 14px;
    background: #F0F2F6;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    color: #192A49;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
  
  /* Use the existing mobile ATC button with desktop styling */
  .product-desktop-sticky .product-sticky-atc__button {
    flex-shrink: 0;
    background: #192A49;
    color: #FFFFFF;
    border: none;
    border-radius: 999px;
    padding: 20px 128px; /* 6px taller (14+6=20), 2x width (32*4=128) */
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    width: auto;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 0 0 0 rgba(100, 102, 241, 0);
  }

  /* Hover effect - scale up button + purple shadow on wrapper (match VIEW CART state) */
  .product-desktop-sticky__button-wrapper {
    border-radius: 999px;
    transition: box-shadow 0.3s ease;
    box-shadow: 0 0 0 0 rgba(100, 102, 241, 0);
  }
  
  .product-desktop-sticky__button-wrapper:hover {
    box-shadow: 0 0 16px 4px rgba(100, 102, 241, 0.4);
  }
  
  /* Active state - prevent flash on click */
  .product-desktop-sticky__button-wrapper:active {
    box-shadow: 0 0 16px 4px rgba(100, 102, 241, 0.4) !important;
  }
  
  .product-desktop-sticky__button-wrapper .product-sticky-atc__button {
    transition: transform 0.2s ease;
  }
  
  .product-desktop-sticky__button-wrapper:hover .product-sticky-atc__button {
    transform: scale(1.02);
  }
  
  /* Desktop sticky bar button - show cart icon and qty like mobile */
  .product-desktop-sticky .product-sticky-atc__button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }
  
  .product-desktop-sticky .product-sticky-atc__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    position: absolute;
    left: 20px;
  }
  
  .product-desktop-sticky .product-sticky-atc__icon svg {
    width: 24px;
    height: 24px;
    fill: #ffffff;
  }
  
  .product-desktop-sticky .product-sticky-atc__qty {
    min-width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    position: absolute;
    right: 20px;
  }
  
  /* Button wrapper - contains the glow */
  .product-desktop-sticky__button-wrapper {
    flex-shrink: 0;
    align-self: center; /* Don't stretch, center vertically */
    touch-action: manipulation;
  }
  
  /* Improve button click during scroll */
  .product-desktop-sticky .product-sticky-atc__button {
    touch-action: manipulation;
    cursor: pointer;
    -webkit-touch-callout: none;
    user-select: none;
  }
  
  /* VIEW CART state - purple glow on WRAPPER (not button) */
  .product-desktop-sticky__button-wrapper--in-cart {
    border-radius: 999px;
    box-shadow: 0 0 16px 4px rgba(100, 102, 241, 0.4);
  }
  
  /* Active state - keep purple glow on wrapper when clicked */
  .product-desktop-sticky__button-wrapper--in-cart:active {
    box-shadow: 0 0 16px 4px rgba(100, 102, 241, 0.4) !important;
  }

/* ==========================================================================
   Tablet Only - Slightly Reduce ATC Button Width
   Only 750px-989px (tablet), NOT small desktop (990px+)
   ========================================================================== */

@media screen and (min-width: 750px) and (max-width: 989px) {
  .product-desktop-sticky .product-sticky-atc__button {
    padding: 20px 90px !important; /* Slightly reduced from 128px */
  }
}

/* ==========================================================================
   Flavor Selector - Product Siblings Pattern
   Matches product-form__input--pill styling exactly (including mobile)
   ========================================================================== */

.flavor-selector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  border: none;
  margin: 20px 0 20px 0 !important;
  padding: 0 !important;
  width: 100%;
  max-width: none !important;
}

.flavor-selector__fieldset {
  border: none;
  padding: 0;
  margin: 0;
  display: contents;
}

.flavor-selector .form__label {
  width: 100%;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #192A49;
  grid-column: 1 / -1;
}

.flavor-selector__options {
  display: contents;
}

/* Flavor pill - identical to size variant pill on mobile */
.flavor-selector__pill,
a.flavor-selector__pill,
.flavor-selector__pill:link,
.flavor-selector__pill:visited {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border: 3px solid #F0F2F6;
  border-radius: 40px;
  background: #F5F5F5;
  color: #192A49;
  text-align: center;
  text-decoration: none;
  transition: border 0.2s ease;
  cursor: pointer;
}

.flavor-selector__pill:hover {
  border-color: #F0F2F6;
}

/* Active state - navy background with light border */
.flavor-selector__pill--active,
.flavor-selector__pill--active:hover {
  background: #192A49;
  color: #FFFFFF;
  border-color: #F0F2F6;
  cursor: default;
}

/* ==========================================================================
   Flavor Selector - No transition effect (instant navigation)
   ========================================================================== */

/* No visual change on flavor pill click */
.flavor-selector__pill[data-sibling-link] {
  transition: none !important;
}

.flavor-selector__pill[data-sibling-link]:active {
  transform: none !important;
  opacity: 1 !important;
}

/* ==========================================================================
   Image Gallery Modal - Wide mobile width constraint
   ========================================================================== */

/* Prevent modal from stretching too wide on large mobile screens (iPhone Pro/Max, etc.) */
@media screen and (min-width: 480px) {
  #ImageGalleryModal .drawer__inner,
  image-gallery-modal.active .drawer__inner,
  image-gallery-modal .drawer__inner {
    max-width: 480px !important;
    margin: 0 auto !important;
  }
}