/* Product Header 4 Section Styles */

/* Container padding to match numbered-steps section */


.product-layout {
    gap: var(--space-lg);
    /* Ensure proper stacking context for sticky positioning */
    display:flex;
    position: relative;
    flex-direction: column;
  }
  
  
  @media screen and (min-width: 1024px) {
    .product-layout {
      display: block;
    }
  
    .product-layout .info-column {
      display: none;
    }
  }
  
  /* Media Column (Left - 60% width, sticky) */
  .media-column {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    /* Allow natural height to enable sticky behavior */
    min-height: 100%;
  }
  
  
  
  @media (max-width: 1023px) {
    .media-column {
      width: 100%;
      max-width: 100%;
      min-height: auto;
      position: relative;
    }
  }
  
  /* Hero Media */
  .hero-media {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 944 / 650;
    background: var(--color-neutral-light);
    cursor: pointer;
  }
  
  @media (max-width: 1023px) {
    .hero-media {
      flex-shrink: 0;
      width: 350px;
      min-width: 350px;
      aspect-ratio: 350 / 262;
      scroll-snap-align: start;
    }
  }
  
  .hero-media img,
  .hero-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* Thumbnail Carousel */
  .thumbnail-carousel-wrapper {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  
  .media-column .thumbnail-carousel-wrapper {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Left Layout: Thumbnails on the left */
  .thumbnail-carousel-wrapper.gallery-layout-left {
    flex-direction: row;
    gap: 12px;
    align-items: flex-start;
  }
  
  @media (max-width: 1023px) {
    /* Below desktop, the "left" gallery layout collapses to a single
       column. Render the main image first and convert the vertical
       thumbnail rail into a horizontal scroll row (mirroring the
       "below" layout). Without this, the vertical thumbs stack on
       top of the hero with a tall gap before the main image. */
    .thumbnail-carousel-wrapper.gallery-layout-left {
      flex-direction: column;
      gap: var(--space-sm, 8px);
    }

    .thumbnail-carousel-wrapper.gallery-layout-left .carousel-main-container {
      order: 1;
    }
    .thumbnail-carousel-wrapper.gallery-layout-left .carousel-thumbnails-wrapper-vertical {
      order: 2;
      width: 100%;
      /* The desktop JS sets an inline `height: <carousel>px` on this
         wrapper to match the main image. Force it back to auto here
         so the horizontal thumb strip on mobile doesn't inherit a
         tall empty area. */
      height: auto !important;
      position: relative;
      flex-shrink: 1;
    }

    /* Flatten the vertical track into a horizontal scroll row. */
    .thumbnail-carousel-wrapper.gallery-layout-left .carousel-thumbnails-container {
      overflow-x: auto;
      overflow-y: hidden;
      width: 100%;
      -webkit-overflow-scrolling: touch;
    }
    .thumbnail-carousel-wrapper.gallery-layout-left .carousel-thumbnails-track.carousel-thumbnails-vertical {
      width: max-content !important;
      flex-direction: row;
      max-height: none;
    }

    /* Vertical fade gradients don't apply once the track is horizontal. */
    .thumbnail-carousel-wrapper.gallery-layout-left .thumbnail-fade-top,
    .thumbnail-carousel-wrapper.gallery-layout-left .thumbnail-fade-bottom {
      display: none;
    }

    .media-column .thumbnail-carousel-wrapper {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
    }
  }
  
  /* Main Carousel Container */
  .carousel-main-container {
    position: relative;
    overflow: hidden;
    /* border-radius is set via inline style from gallery_border_radius setting */
    background: var(--color-neutral-light, #f5f5f5);
    aspect-ratio: 944 / 650;
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
  }
  
  /* Left Layout: Main carousel takes remaining space and maintains aspect ratio */
  .gallery-layout-left .carousel-main-container {
    flex: 1;
    min-width: 0;
    align-self: flex-start;
    height: auto;
  }
  
  @media (max-width: 1023px) {
    .carousel-main-container {
      aspect-ratio: 350 / 262;
      width: 100% !important;
      max-width: 100% !important;
    }
    
    .carousel-slide {
      width: 100% !important;
      /* min-width: 100% !important;
      max-width: 100% !important; */
    }
  }
  
  /* Carousel Track */
  .carousel-track {
    display: flex;
    height: 100%;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    cursor: grab;
    position: relative;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
  }
  
  .carousel-track:active {
    cursor: grabbing;
  }
  
  .carousel-track.dragging {
    transition: none;
  }
  
  .carousel-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    border: none !important;
    outline: none !important;
  }
  
  .carousel-slide img {
    width: 100% !important;
    height: 100% !important;
    /* object-fit: cover; */
    object-fit: contain;
    object-position: center;
    user-select: none;
    pointer-events: none;
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    vertical-align: top;
    line-height: 0;
  }
  
  /* Navigation Buttons Group - Using results carousel styles */
  .thumbnail-carousel-wrapper .results-carousel-nav-buttons {
    position: absolute;
    bottom: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 60;
  }
  
  /* Navigation Buttons - Side Position (Left & Right of Image) */
  .thumbnail-carousel-wrapper .results-carousel-nav-buttons.nav-position-sides {
    bottom: auto;
    right: auto;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    justify-content: space-between;
    padding: 0 16px;
    pointer-events: none;
  }
  
  .thumbnail-carousel-wrapper .results-carousel-nav-buttons.nav-position-sides .results-carousel-nav-btn {
    pointer-events: auto;
  }
  
  /* Navigation Buttons - Using results carousel styles */
  .thumbnail-carousel-wrapper .results-carousel-nav-btn {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full, 9999px);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    opacity: 0.7;
    cursor: pointer;
    flex-shrink: 0;
  }
  
  .thumbnail-carousel-wrapper .results-carousel-nav-btn:hover:not(:disabled) {
    transform: scale(1.1);
    opacity: 1;
  }
  
  .thumbnail-carousel-wrapper .results-carousel-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  
  .thumbnail-carousel-wrapper .results-carousel-nav-btn:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }
  
  .thumbnail-carousel-wrapper .results-carousel-nav-btn svg {
    width: 24px;
    height: 24px;
  }
  
  
  /* Thumbnails Wrapper (for fade gradients) */
  .carousel-thumbnails-wrapper {
    position: relative;
    width: 100%;
  }
  
  /* Vertical wrapper for left layout */
  .carousel-thumbnails-wrapper-vertical {
    width: auto;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    align-self: flex-start;
  }
  
  /* Thumbnails Container */
  .carousel-thumbnails-container {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100%;
  }
  
  .carousel-thumbnails-container::-webkit-scrollbar {
    display: none;
  }
  
  /* Fade gradients for thumbnail scroller */
  .thumbnail-fade {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
  }
  
  /* Horizontal fades (for below layout) */
  .carousel-thumbnails-wrapper:not(.carousel-thumbnails-wrapper-vertical) .thumbnail-fade {
    top: 0;
    bottom: 0;
    width: 40px;
  }
  
  .thumbnail-fade-left {
    left: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
  }
  
  .thumbnail-fade-right {
    right: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
  }
  
  /* Vertical fades (for left layout) */
  .carousel-thumbnails-wrapper-vertical {
    position: relative;
  }
  
  .carousel-thumbnails-wrapper-vertical .thumbnail-fade {
    left: 0;
    right: 0;
    height: 40px;
    position: absolute;
  }
  
  .thumbnail-fade-top {
    top: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
  }
  
  .thumbnail-fade-bottom {
    bottom: 0;
    background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
  }
  
  .thumbnail-fade.visible {
    opacity: 1;
  }
  
  .carousel-thumbnails-track {
    display: flex;
    max-height: 80px;
    padding-bottom: 8px;
    width: fit-content;
    /* gap is set inline via section settings */
  }
  
  /* Thumbnail Size Presets - Small (default) */
  .thumbnail-size-small .carousel-thumbnail {
    width: 70px;
  }
  
  .thumbnail-size-small .carousel-thumbnails-vertical .carousel-thumbnail {
    width: 70px;
    height: 70px;
  }
  
  .thumbnail-size-small .carousel-thumbnails-track {
    height: 80px;
  }
  
  .thumbnail-size-small .carousel-thumbnails-track.carousel-thumbnails-vertical {
    width: 70px;
  }
  
  /* Thumbnail Size Presets - Medium */
  .thumbnail-size-medium .carousel-thumbnail {
    width: 90px;
  }
  
  .thumbnail-size-medium .carousel-thumbnails-vertical .carousel-thumbnail {
    width: 90px;
    height: 90px;
  }
  
  .thumbnail-size-medium .carousel-thumbnails-track {
    height: 100px;
  }
  
  .thumbnail-size-medium .carousel-thumbnails-track.carousel-thumbnails-vertical {
    width: 90px;
  }
  
  /* Thumbnail Size Presets - Large */
  .thumbnail-size-large .carousel-thumbnail {
    width: 110px;
  }
  
  .thumbnail-size-large .carousel-thumbnails-vertical .carousel-thumbnail {
    width: 110px;
    height: 110px;
  }
  
  .thumbnail-size-large .carousel-thumbnails-track {
    height: 120px;
  }
  
  .thumbnail-size-large .carousel-thumbnails-track.carousel-thumbnails-vertical {
    width: 110px;
  }
  
  /* Thumbnail Size Presets - Extra Large */
  .thumbnail-size-xl .carousel-thumbnail {
    width: 130px;
  }
  
  .thumbnail-size-xl .carousel-thumbnails-vertical .carousel-thumbnail {
    width: 130px;
    height: 130px;
  }
  
  .thumbnail-size-xl .carousel-thumbnails-track {
    height: 140px;
  }
  
  .thumbnail-size-xl .carousel-thumbnails-track.carousel-thumbnails-vertical {
    width: 130px;
  }
  
  /* Thumbnail Size Presets - 2X Large */
  .thumbnail-size-2xl .carousel-thumbnail {
    width: 150px;
  }
  
  .thumbnail-size-2xl .carousel-thumbnails-vertical .carousel-thumbnail {
    width: 150px;
    height: 150px;
  }
  
  .thumbnail-size-2xl .carousel-thumbnails-track {
    height: 160px;
  }
  
  .thumbnail-size-2xl .carousel-thumbnails-track.carousel-thumbnails-vertical {
    width: 150px;
  }
  
  /* Thumbnail Size Presets - 3X Large */
  .thumbnail-size-3xl .carousel-thumbnail {
    width: 220px;
  }
  
  .thumbnail-size-3xl .carousel-thumbnails-vertical .carousel-thumbnail {
    width: 220px;
    height: 220px;
  }
  
  .thumbnail-size-3xl .carousel-thumbnails-track {
    /* height: 230px; */
    max-height: 230px;
  }
  
  .thumbnail-size-3xl .carousel-thumbnails-track.carousel-thumbnails-vertical {
    width: 220px;
  }
  
  /* Thumbnail Size Presets - Stretch (Full Width Row) */
  .thumbnail-size-stretch .carousel-thumbnails-wrapper {
    width: 100%;
  }
  
  .thumbnail-size-stretch .carousel-thumbnails-container {
    overflow: visible;
    width: 100%;
  }
  
  .thumbnail-size-stretch .carousel-thumbnails-track {
    display: grid;
    grid-template-columns: repeat(var(--thumbnail-count, 5), 1fr);
    align-items: stretch;
    width: 100%;
    max-height: none;
    padding-bottom: 0;
  }
  
  .thumbnail-size-stretch .carousel-thumbnail {
    width: 100%;
    min-width: 0;
    height: auto;
  }
  
  .thumbnail-size-stretch .carousel-thumbnail img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }
  
  /* Hide fade gradients for stretch mode since no scrolling */
  .thumbnail-size-stretch .thumbnail-fade {
    display: none;
  }
  
  @media (max-width: 1023px) {
    .thumbnail-size-stretch .carousel-thumbnails-track {
      display: flex;
      flex-wrap: nowrap;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    
    .thumbnail-size-stretch .carousel-thumbnail {
      flex: 0 0 auto;
      width: 120px;
      height: auto;
    }
    
    .thumbnail-size-stretch .carousel-thumbnail img {
      width: 100%;
      height: auto;
      object-fit: contain;
    }
  }
  
  /* Left Layout: Vertical Thumbnails */
  .carousel-thumbnails-container.carousel-thumbnails-left {
    overflow-x: hidden;
    overflow-y: auto;
    width: auto;
    flex-shrink: 0;
    flex: 1;
    min-height: 0;
    position: relative;
    height: 100%;
  }
  
  .carousel-thumbnails-container.carousel-thumbnails-left::-webkit-scrollbar {
    display: none;
  }
  
  .carousel-thumbnails-track.carousel-thumbnails-vertical {
    flex-direction: column;
    height: auto;
    padding-bottom: 0;
    width: 70px;
    /* gap is set inline via section settings */
  }
  
  @media (max-width: 1023px) {
    .carousel-thumbnails-container.carousel-thumbnails-left {
      overflow-x: auto;
      overflow-y: hidden;
      width: 100%;
      max-height: none;
    }
    
    .carousel-thumbnails-wrapper-vertical {
      width: 100%;
    }
    
    .carousel-thumbnails-track.carousel-thumbnails-vertical {
      flex-direction: row;
      padding-bottom: 8px;
      width: fit-content;
    }
    
    /* Mobile responsive thumbnail sizes */
    .thumbnail-size-small .carousel-thumbnails-track.carousel-thumbnails-vertical {
      height: 80px;
    }
    
    .thumbnail-size-medium .carousel-thumbnails-track.carousel-thumbnails-vertical {
      height: 100px;
    }
    
    .thumbnail-size-large .carousel-thumbnails-track.carousel-thumbnails-vertical {
      height: 120px;
    }
    
    .thumbnail-size-xl .carousel-thumbnails-track.carousel-thumbnails-vertical {
      height: 140px;
    }
    
    .thumbnail-size-2xl .carousel-thumbnails-track.carousel-thumbnails-vertical {
      height: 160px;
    }
    
    .thumbnail-size-3xl .carousel-thumbnails-track.carousel-thumbnails-vertical {
      height: 230px;
    }
    
    .carousel-thumbnails-wrapper-vertical .thumbnail-fade-top,
    .carousel-thumbnails-wrapper-vertical .thumbnail-fade-bottom {
      display: none;
    }
  }
  
  /* Thumbnail Buttons */
  .carousel-thumbnail {
    position: relative;
    flex-shrink: 0;
    width: 70px;
    height: 100%;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
    transition: opacity 0.3s ease;
    cursor: pointer;
    /* border-radius is set inline via section settings */
  }
  
  /* Left Layout: Match horizontal thumbnail size */
  .carousel-thumbnails-vertical .carousel-thumbnail {
    width: 70px;
    height: 70px;
    aspect-ratio: 1;
  }
  
  .carousel-thumbnail::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0);
    transition: background-color 0.3s ease;
    pointer-events: none;
    /* border-radius inherits from parent */
    border-radius: inherit;
  }
  
  .carousel-thumbnail.active::after {
    background-color: rgba(0, 0, 0, 0.5);
  }
  
  .carousel-thumbnail img {
    width: 100%;
    height: 100%;
    display: block;
    /* object-fit: cover; */
    object-fit: contain;
    pointer-events: none;
    user-select: none;
  }
  
  /* Simple Gallery Column (kept for backwards compatibility) */
  .simple-gallery-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    width: 100%;
  }
  
  .gallery-image-item {
    width: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--clr-surface);
  }
  
  .gallery-image-item img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }
  
  @media (max-width: 1023px) {
    .simple-gallery-column {
      gap: var(--space-sm);
    }
  }
  
  .gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }
  
  @media (max-width: 1023px) {
    .gallery-grid {
      display: flex;
      flex-direction: row;
      gap: 0;
      margin-left: var(--space-sm);
    }
  }
  
  .gallery-item {
    width: 100%;
    aspect-ratio: 464 / 285;
    border-radius: 16px;
    overflow: hidden;
    background: var(--color-neutral-light);
    cursor: pointer;
  }
  
  @media (max-width: 1023px) {
    .gallery-item {
      flex-shrink: 0;
      width: 350px;
      min-width: 350px;
      aspect-ratio: 350 / 262;
      scroll-snap-align: start;
    }
    
    .gallery-item:not(:first-child) {
      margin-left: var(--space-sm);
    }
  }
  
  .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* Info Column (Right - 40% width, sticky) */
  .info-column {
    flex-shrink: 0;
    width: 100%;
    min-width: 0;
  }
  
  @media (min-width: 1024px) {
    .info-column {
      position: sticky;
      top: 120px;
      align-self: flex-start;
      
      
    }
    .border-left-info{
      
    }
  }
  
  /* When media gallery is hidden, info column takes full width */
  .product-layout:not(:has(.media-column)) .info-column {
    width: 100%;
    flex: 1 1 auto;
  }
  
  @media (max-width: 1023px) {
    .info-column {
      width: 100%;
      position: relative;
      top: 0;
    }
  }
  
  .info-sticky {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    width: 100%;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
    box-sizing: border-box;
  }
  
  @media (max-width: 1023px) {
    .info-sticky {
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box;
      padding-left: 0;
      padding-right: 0;
    }
    
    .info-sticky > * {
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      box-sizing: border-box;
    }
    
    /* Override any flex constraints that might limit width */
    .info-sticky > *[style*="width"],
    .info-sticky > *[style*="max-width"] {
      width: 100% !important;
      max-width: 100% !important;
    }
    
    /* Target specific child elements that might have width constraints */
    .info-sticky .product-image-title-row,
    .info-sticky .product-title-rating-group,
    .info-sticky .product-description,
    .info-sticky .price-section,
    .info-sticky .subscription-options-wrapper,
    .info-sticky .add-to-cart-section,
    .info-sticky .wysiwyg-content,
    .info-sticky .guarantee-text,
    .info-sticky .accordions-wrapper {
      width: 100% !important;
      max-width: 100% !important;
      box-sizing: border-box;
    }
  }
  
  @media (min-width: 1024px) {
    .info-sticky {
      padding-left: var(--space-xl);
      padding-right: var(--space-xl);
    }
  }
  
  /* Product Image and Title Row */
  .product-image-title-row {
    display: flex;
    gap: var(--space-md);
    align-items: end;
    margin-bottom: var(--space-md);
  }
  
  @media (max-width: 1023px) {
    .product-image-title-row {
      flex-direction: column;
    }
  }
  
  /* Right Column Product Image */
  .right-column-product-image {
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    border-style: solid;
  }
  
  .right-column-product-image-inner {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  
  /* Individual corner border radius using theme variables */
  .right-column-product-image-inner[data-br-tl="rounded-none"] {
    border-top-left-radius: 0;
  }
  .right-column-product-image-inner[data-br-tl="rounded-sm"] {
    border-top-left-radius: var(--radius-sm);
  }
  .right-column-product-image-inner[data-br-tl="rounded"] {
    border-top-left-radius: var(--radius-base);
  }
  .right-column-product-image-inner[data-br-tl="rounded-md"] {
    border-top-left-radius: var(--radius-md);
  }
  .right-column-product-image-inner[data-br-tl="rounded-lg"] {
    border-top-left-radius: var(--radius-lg);
  }
  .right-column-product-image-inner[data-br-tl="rounded-xl"] {
    border-top-left-radius: var(--radius-xl);
  }
  .right-column-product-image-inner[data-br-tl="rounded-2xl"] {
    border-top-left-radius: var(--radius-2xl);
  }
  .right-column-product-image-inner[data-br-tl="rounded-3xl"] {
    border-top-left-radius: var(--radius-3xl);
  }
  
  .right-column-product-image-inner[data-br-tr="rounded-none"] {
    border-top-right-radius: 0;
  }
  .right-column-product-image-inner[data-br-tr="rounded-sm"] {
    border-top-right-radius: var(--radius-sm);
  }
  .right-column-product-image-inner[data-br-tr="rounded"] {
    border-top-right-radius: var(--radius-base);
  }
  .right-column-product-image-inner[data-br-tr="rounded-md"] {
    border-top-right-radius: var(--radius-md);
  }
  .right-column-product-image-inner[data-br-tr="rounded-lg"] {
    border-top-right-radius: var(--radius-lg);
  }
  .right-column-product-image-inner[data-br-tr="rounded-xl"] {
    border-top-right-radius: var(--radius-xl);
  }
  .right-column-product-image-inner[data-br-tr="rounded-2xl"] {
    border-top-right-radius: var(--radius-2xl);
  }
  .right-column-product-image-inner[data-br-tr="rounded-3xl"] {
    border-top-right-radius: var(--radius-3xl);
  }
  
  .right-column-product-image-inner[data-br-bl="rounded-none"] {
    border-bottom-left-radius: 0;
  }
  .right-column-product-image-inner[data-br-bl="rounded-sm"] {
    border-bottom-left-radius: var(--radius-sm);
  }
  .right-column-product-image-inner[data-br-bl="rounded"] {
    border-bottom-left-radius: var(--radius-base);
  }
  .right-column-product-image-inner[data-br-bl="rounded-md"] {
    border-bottom-left-radius: var(--radius-md);
  }
  .right-column-product-image-inner[data-br-bl="rounded-lg"] {
    border-bottom-left-radius: var(--radius-lg);
  }
  .right-column-product-image-inner[data-br-bl="rounded-xl"] {
    border-bottom-left-radius: var(--radius-xl);
  }
  .right-column-product-image-inner[data-br-bl="rounded-2xl"] {
    border-bottom-left-radius: var(--radius-2xl);
  }
  .right-column-product-image-inner[data-br-bl="rounded-3xl"] {
    border-bottom-left-radius: var(--radius-3xl);
  }
  
  .right-column-product-image-inner[data-br-br="rounded-none"] {
    border-bottom-right-radius: 0;
  }
  .right-column-product-image-inner[data-br-br="rounded-sm"] {
    border-bottom-right-radius: var(--radius-sm);
  }
  .right-column-product-image-inner[data-br-br="rounded"] {
    border-bottom-right-radius: var(--radius-base);
  }
  .right-column-product-image-inner[data-br-br="rounded-md"] {
    border-bottom-right-radius: var(--radius-md);
  }
  .right-column-product-image-inner[data-br-br="rounded-lg"] {
    border-bottom-right-radius: var(--radius-lg);
  }
  .right-column-product-image-inner[data-br-br="rounded-xl"] {
    border-bottom-right-radius: var(--radius-xl);
  }
  .right-column-product-image-inner[data-br-br="rounded-2xl"] {
    border-bottom-right-radius: var(--radius-2xl);
  }
  .right-column-product-image-inner[data-br-br="rounded-3xl"] {
    border-bottom-right-radius: var(--radius-3xl);
  }
  
  .right-column-product-img {
    width: 100%;
    height: 100%;
    display: block;
  }
  
  /* Border color classes */
  .right-column-product-image.border-white {
    border-color: var(--clr-white);
  }
  .right-column-product-image.border-black {
    border-color: var(--clr-black);
  }
  .right-column-product-image.border-primary {
    border-color: var(--clr-primary);
  }
  .right-column-product-image.border-secondary {
    border-color: var(--clr-secondary);
  }
  .right-column-product-image.border-tertiary {
    border-color: var(--clr-tertiary);
  }
  .right-column-product-image.border-quaternary {
    border-color: var(--clr-quaternary);
  }
  .right-column-product-image.border-success {
    border-color: var(--clr-success);
  }
  .right-column-product-image.border-warning {
    border-color: var(--clr-warning);
  }
  .right-column-product-image.border-error {
    border-color: var(--clr-error);
  }
  .right-column-product-image.border-info {
    border-color: var(--clr-info);
  }
  .right-column-product-image.border-neutral {
    border-color: var(--clr-neutral);
  }
  .right-column-product-image.border-neutral-light {
    border-color: var(--clr-neutral-light);
  }
  .right-column-product-image.border-neutral-dark {
    border-color: var(--clr-neutral-dark);
  }
  
  /* Product Title and Rating Group */
  .product-title-rating-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-width: 0;
  }
  
  /* Product Title */
  .product-title-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
  }
  
  .product-code-badge {
    border: 1px solid currentColor;
    border-radius: 573px;
    padding: 5px 9.5px;
    display: inline-flex;
    align-items: center;
    height: 27px;
  }
  
  .product-code-badge sup {
    font-size: 0.75em;
    vertical-align: super;
    line-height: 0;
  }
  
  .product-title-wrapper h1 {
    line-height: 1.2;
    margin: 0;
  }
  
/* Product Description */
  .product-description p {
    line-height: 1.5;
  }
  
  /* Price Section */
  .price-section {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
  }
  
  .price {
    line-height: 1.4;
  }
  
  .new-badge {
    padding: 2px 8px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    height: 20px;
  }
  
  /* Subscription Info */
  .subscription-info p {
    line-height: 1.47;
  }
  
  /* Subscription Options Cards */
  .subscription-options-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
  }
  
  .subscription-option-card {
    position: relative;
    border-style: solid;
    border-color: var(--clr-border-light, #eaeaea);
    background-color: var(--clr-bg-page, #ffffff);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  .subscription-option-card:hover {
    border-color: var(--clr-border-dark, #dad0c9);
  }

  .subscription-option-card.selected {
    /* Same fix as sections/product-header-4 — this section is a near-copy and
       carried the identical bug. Selection is the border colour alone. An inset
       1px shadow used to be drawn on top of the card's own border, so the two
       lines stacked into an uneven double outline that broke around the rounded
       corners and the "Most Popular" band. */
    border-color: var(--clr-text-primary, #1a1716);
  }

  .most-popular-badge {
    padding: var(--space-sm) var(--space-md);
    text-align: center;
    background-color: var(--clr-neutral-lighter, #fdf9f5);
    color: var(--clr-text-primary, #1a1716);
    border-bottom: 1px solid var(--clr-border-light, #eaeaea);
    font-weight: 600;
    letter-spacing: 0.04em;
  }

  /* The Liquid markup contains an inner <span class="text-white"> which
     hard-codes white text. Force the inner label to use dark text so the
     "Most Popular" pill is legible against the cream badge background. */
  .most-popular-badge,
  .most-popular-badge .text-white,
  .most-popular-badge span {
    color: var(--clr-text-primary, #1a1716) !important;
  }
  
  .subscription-option-label {
    display: block;
    cursor: pointer;
  }
  
  
  .subscription-radio {
    width: 20px;
    height: 20px;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    border: 2px solid var(--color-neutral-dark, #1A1716);
    border-radius: 50%;
    background-color: white;
    position: relative;
    transition: all 0.2s ease;
  }
  /* .subscription-radio:checked */
.subscription-option-card.selected .subscription-radio{
    background-color: var(--color-neutral-dark, #1A1716);
    border-color: var(--color-neutral-dark, #1A1716);
  }
  /* .subscription-radio:checked::after, */
.subscription-option-card.selected .subscription-radio::after{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: white;
  }
  
  .subscription-radio:hover {
    border-color: var(--color-neutral-dark, #1C0F8A);
  }
  
  .subscription-option-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }
  
  .subscription-option-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
  }
  
  .subscription-option-title {
    line-height: 1.2;
    flex: 1;
  }
  
  .subscription-option-price-group {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-shrink: 0;
  }
  
  .subscription-option-price {
    line-height: 1.2;
    white-space: nowrap;
  }
  
  .subscription-option-benefits {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }
  
  .subscription-option-benefits li {
    line-height: 1.4;
    padding-left: 0;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
  }
  
  /* Add to Cart Section */
  .add-to-cart-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }
  
  /* Side-by-side layout */
  .add-to-cart-section.quantity-side {
    flex-direction: row;
    align-items: stretch;
  }
  
  .add-to-cart-section.quantity-side .quantity-wrapper {
    flex: 0 0 auto;
    min-width: 0;
    display: flex;
    align-items: stretch;
    height: 100%;
  }
  
  .add-to-cart-section.quantity-side .quantity-select {
    width: auto;
    min-width: 120px;
    height: 100%;
    box-sizing: border-box;
  }
  
  .add-to-cart-section.quantity-side .quantity-select-wrapper {
    display: flex;
    align-items: stretch;
    height: 100%;
  }
  
  .add-to-cart-section.quantity-side .add-to-cart-wrapper {
    flex: 1 1 auto;
    min-width: 0;
  }
  
  /* Keep side-by-side on mobile - adjust sizing for smaller screens */
  @media (max-width: 767px) {
    .add-to-cart-section.quantity-side {
      flex-direction: row;
      gap: var(--space-sm);
    }
    
    .add-to-cart-section.quantity-side .quantity-wrapper {
      flex: 0 0 auto;
      width: auto;
    }
    
    .add-to-cart-section.quantity-side .quantity-select {
      width: auto;
      min-width: 80px;
    }
    
    .add-to-cart-section.quantity-side .quantity-stepper {
      min-width: 100px;
    }
    
    .add-to-cart-section.quantity-side .add-to-cart-wrapper {
      flex: 1 1 auto;
    }
  }
  
  /* Above layout (default) */
  .add-to-cart-section.quantity-above .quantity-wrapper {
    width: 100%;
  }
  
  .quantity-wrapper {
    display: flex;
  }
  
  .quantity-select-wrapper {
    position: relative;
    width: 100%;
  }
  
  .quantity-select {
    width: 100%;
    border: 1px solid var(--color-neutral, #E0E0E0);
    /* border-radius is controlled by utility classes (rounded-md, rounded-lg, etc.) */
    background-color: white;
    font-family: var(--font-body, 'Roboto', sans-serif);
    font-size: var(--font-size-base, 16px);
    color: var(--color-primary, #000000);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-md) center;
    /* Default to btn-md height to match button */
    padding: 12px var(--space-md);
    padding-right: calc(var(--space-md) + 32px);
    min-height: 44px;
    box-sizing: border-box;
  }
  
  /* Match button sizes for both layouts */
  .add-to-cart-section:has(.btn-sm) .quantity-select {
    padding: 8px var(--space-md);
    padding-right: calc(var(--space-md) + 32px);
    min-height: 36px;
  }
  
  .add-to-cart-section:has(.btn-md) .quantity-select {
    padding: 12px var(--space-md);
    padding-right: calc(var(--space-md) + 32px);
    min-height: 44px;
  }
  
  .add-to-cart-section:has(.btn-lg) .quantity-select {
    padding: 16px var(--space-md);
    padding-right: calc(var(--space-md) + 32px);
    min-height: 52px;
  }
  
  /* Hide display number by default (only show in side mode) */
  .quantity-display-number {
    display: none;
  }
  
  /* Hide "Quantity" text in side mode when closed, show number overlay */
  .quantity-side .quantity-select-wrapper {
    position: relative;
  }
  
  .quantity-side .quantity-display-number {
    display: block;
    position: absolute;
    left: var(--space-md);
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--color-primary, #000000);
    font-family: var(--font-body, 'Roboto', sans-serif);
    font-size: var(--font-size-base, 16px);
    z-index: 1;
  }
  
  .quantity-side .quantity-select:not(:focus) {
    color: transparent;
  }
  
  .quantity-side .quantity-select:focus {
    color: var(--color-primary, #000000);
  }
  
  .quantity-side .quantity-select:focus ~ .quantity-display-number {
    display: none;
  }
  
  .quantity-select:hover {
    border-color: var(--color-primary, #000000);
  }
  
  .quantity-select:focus {
    outline: none;
    border-color: var(--color-primary, #000000);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
  }
  
  .quantity-select option {
    padding: var(--space-sm);
  }
  
  /* Quantity Stepper Styles */
  .quantity-stepper-wrapper {
    position: relative;
    width: 100%;
  }
  
  .quantity-stepper {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-neutral, #E0E0E0);
    background-color: white;
    overflow: hidden;
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }
  
  .quantity-stepper:hover {
    border-color: var(--color-primary, #000000);
  }
  
  .quantity-stepper:focus-within {
    outline: none;
    border-color: var(--color-primary, #000000);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
  }
  
  .quantity-stepper-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 100%;
    min-height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-primary, #000000);
    transition: background-color 0.2s ease, color 0.2s ease;
    padding: 0;
    margin: 0;
  }
  
  .quantity-stepper-btn:not(:disabled) {
    cursor: pointer;
  }
  
  .quantity-stepper-btn:hover {
    background-color: var(--color-neutral-light, #F5F5F5);
  }
  
  .quantity-stepper-btn:active {
    background-color: var(--color-neutral, #E0E0E0);
  }
  
  .quantity-stepper-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  
  .quantity-stepper-btn svg {
    width: 16px;
    height: 16px;
    pointer-events: none;
  }
  
  .quantity-stepper-input {
    flex: 1;
    border: none;
    background: transparent;
    text-align: center;
    font-family: var(--font-body, 'Roboto', sans-serif);
    font-size: var(--font-size-base, 16px);
    color: var(--color-primary, #000000);
    padding: 12px var(--space-md);
    min-height: 44px;
    box-sizing: border-box;
    -moz-appearance: textfield;
    appearance: textfield;
  }
  
  .quantity-stepper-input::-webkit-outer-spin-button,
  .quantity-stepper-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  
  .quantity-stepper-input:focus {
    outline: none;
  }
  
  /* Match button sizes for stepper */
  .add-to-cart-section:has(.btn-sm) .quantity-stepper {
    min-height: 36px;
  }
  
  .add-to-cart-section:has(.btn-sm) .quantity-stepper-btn {
    width: 36px;
    min-height: 36px;
  }
  
  .add-to-cart-section:has(.btn-sm) .quantity-stepper-input {
    padding: 8px var(--space-md);
    min-height: 36px;
    font-size: var(--font-size-sm, 14px);
  }
  
  .add-to-cart-section:has(.btn-md) .quantity-stepper {
    min-height: 44px;
  }
  
  .add-to-cart-section:has(.btn-md) .quantity-stepper-btn {
    width: 44px;
    min-height: 44px;
  }
  
  .add-to-cart-section:has(.btn-md) .quantity-stepper-input {
    padding: 12px var(--space-md);
    min-height: 44px;
  }
  
  .add-to-cart-section:has(.btn-lg) .quantity-stepper {
    min-height: 52px;
  }
  
  .add-to-cart-section:has(.btn-lg) .quantity-stepper-btn {
    width: 52px;
    min-height: 52px;
  }
  
  .add-to-cart-section:has(.btn-lg) .quantity-stepper-input {
    padding: 16px var(--space-md);
    min-height: 52px;
    font-size: var(--font-size-lg, 18px);
  }
  
  .add-to-cart-section:has(.btn-lg) .quantity-stepper-btn svg {
    width: 18px;
    height: 18px;
  }
  
  /* Side layout adjustments for stepper */
  .add-to-cart-section.quantity-side .quantity-stepper-wrapper {
    display: flex;
    align-items: stretch;
    height: 100%;
  }
  
  .add-to-cart-section.quantity-side .quantity-stepper {
    width: auto;
    min-width: 120px;
    height: 100%;
  }
  
  .add-to-cart-wrapper {
    display: flex;
    width: 100%;
  }
  
  /* CTA Wrapper (kept for backwards compatibility) */
  .cta-wrapper {
    display: flex;
  }
  
  /* WYSIWYG Content */
  .wysiwyg-content {
    margin-top: var(--space-md);
  }
  
  .wysiwyg-content-inner {
    line-height: 1.5;
  }
  
  .wysiwyg-content-inner p {
    margin: 0;
    line-height: inherit;
  }
  
  .wysiwyg-content-inner p + p {
    margin-top: var(--space-xs);
  }
  
  .wysiwyg-content-inner ul,
  .wysiwyg-content-inner ol {
    margin: var(--space-xs) 0;
    padding-left: var(--space-lg);
  }
  
  .wysiwyg-content-inner h1,
  .wysiwyg-content-inner h2,
  .wysiwyg-content-inner h3,
  .wysiwyg-content-inner h4,
  .wysiwyg-content-inner h5,
  .wysiwyg-content-inner h6 {
    margin: var(--space-sm) 0;
    line-height: 1.3;
  }
  
  .wysiwyg-content-inner h1:first-child,
  .wysiwyg-content-inner h2:first-child,
  .wysiwyg-content-inner h3:first-child,
  .wysiwyg-content-inner h4:first-child,
  .wysiwyg-content-inner h5:first-child,
  .wysiwyg-content-inner h6:first-child {
    margin-top: 0;
  }
  
  .wysiwyg-content-inner a {
    text-decoration: underline;
    transition: opacity 0.2s ease;
  }
  
  .wysiwyg-content-inner a:hover {
    opacity: 0.7;
  }
  
  /* Guarantee Text */
  .guarantee-text {
    text-align: center;
  }
  
  .guarantee-content {
    line-height: 1.47;
    opacity: 0.5;
  }
  
  .guarantee-content p {
    margin: 0;
    line-height: inherit;
  }
  
  .guarantee-content p + p {
    margin-top: var(--space-xs);
  }
  
  /* Accordions */
  .accordions-wrapper {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--color-neutral);
  }
  
  .accordion-item {
    border-bottom: 1px solid var(--color-neutral);
  }
  
  .accordion-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: all 0.3s ease;
  }
  
  .accordion-header:hover {
    opacity: 0.7;
  }
  
  .accordion-icon {
    flex-shrink: 0;
    transition: transform 0.3s ease;
    width: 24px;
    height: 24px;
  }
  
  .accordion-item.active .accordion-icon {
    transform: rotate(180deg);
  }
  
  .accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  
  .accordion-item.active .accordion-content {
    max-height: 1000px;
    padding-bottom: var(--space-md);
  }
  
  /* Benefits List */
  .benefits-list {
    list-style-type: disc;
    padding-left: var(--space-lg);
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }
  
  .benefits-list li {
    line-height: 1.3;
    padding-left: var(--space-xs);
  }
  
  /* Ingredients Content */
  .ingredients-content {
    line-height: 1.5;
  }
  
  /* Bundle Card (used for Chat Help Card) */
  .bundle-card {
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-sm);
    /* border-radius, gap, and padding are set inline via section settings */
    align-items: center;
  }
  
  .bundle-image {
    flex-shrink: 0;
    width: 112px;
    height: 112px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-neutral-light);
  }
  
  .bundle-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* Chat Avatar */
  .chat-avatar {
    flex-shrink: 0;
    overflow: hidden;
    background: var(--color-neutral-light);
    /* Size, border-radius, border-width, and border-color are set inline via section settings */
  }
  
  .chat-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  .bundle-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 0;
  }
  
  .bundle-content h3 {
    line-height: 1.4;
    margin: 0;
  }
  
  .bundle-content p {
    line-height: 1.47;
    margin: 0;
  }
  
  /* Chat Link */
  .chat-link {
    text-decoration: underline;
    transition: opacity 0.2s ease;
    cursor: pointer;
  }
  
  .chat-link:hover {
    opacity: 0.8;
  }
  
  .bundle-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
  }
  
  .bundle-pricing {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
  }
  
  .bundle-original-price {
    text-decoration: line-through;
    opacity: 0.5;
  }
  
  /* Clickable Images */
  .clickable-image {
    cursor: pointer;
    transition: opacity 0.2s ease;
  }
  
  .clickable-image:hover {
    opacity: 0.9;
  }
  
  /* Image Modal/Lightbox */
  .image-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
  }
  
  .image-modal.active {
    display: flex;
  }
  
  .modal-close {
    position: absolute;
    top: var(--space-lg);
    right: var(--space-lg);
    background: none;
    border: none;
    color: white;
    font-size: 48px;
    line-height: 1;
    cursor: pointer;
    z-index: 10001;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
  }
  
  .modal-close:hover {
    opacity: 0.7;
  }
  
  .modal-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
    max-width: 100%;
    max-height: 100%;
  }
  
  .modal-main-image {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    max-height: calc(100vh - 200px);
    border-radius: 24px;
    overflow: hidden;
  }
  
  .modal-main-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 24px;
  }
  
  .modal-thumbnails {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    flex-wrap: wrap;
    max-width: 100%;
  }
  
  .modal-thumb {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s ease, transform 0.2s ease;
    border: 2px solid transparent;
  }
  
  .modal-thumb:hover {
    opacity: 0.9;
    transform: scale(1.05);
  }
  
  .modal-thumb.active {
    opacity: 1;
    border-color: white;
  }
  
  .modal-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  @media (max-width: 767px) {
    .modal-close {
      top: var(--space-md);
      right: var(--space-md);
      font-size: 36px;
      width: 36px;
      height: 36px;
    }
    
    .image-modal {
      padding: var(--space-md);
    }
    
    .modal-thumbnails {
      gap: var(--space-xs);
    }
    
    .modal-thumb {
      width: 60px;
      height: 60px;
    }
  }
  
  /* Sticky Footer */
  .sticky-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    padding: var(--space-md) var(--space-lg);
  }
  
  .sticky-footer.visible {
    transform: translateY(0);
  }
  
  .sticky-footer-content {
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
  }
  
  @media (max-width: 767px) {
    .sticky-footer {
      padding: var(--space-sm) var(--space-md);
    }
    
    .sticky-footer-content {
      gap: var(--space-sm);
    }
  }
  
  .sticky-product-info {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex: 1;
    min-width: 0;
  }
  
  @media (max-width: 767px) {
    .sticky-product-info {
      gap: var(--space-sm);
    }
  }
  
  .sticky-thumb {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-neutral-light);
  }
  
  @media (max-width: 767px) {
    .sticky-thumb {
      width: 48px;
      height: 48px;
    }
  }
  
  .sticky-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .sticky-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  
  .sticky-code {
    line-height: 1.2;
  }
  
  .sticky-code sup {
    font-size: 0.7em;
    vertical-align: super;
    line-height: 0;
  }
  
  .sticky-text h3 {
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .sticky-cta {
    flex-shrink: 0;
  }
  
  @media (max-width: 767px) {
    .sticky-cta .btn {
      white-space: nowrap;
    }
  }
  
  /* ==========================================
     Image Hover Zoom (Amazon-style)
     ========================================== */
  
  /* Zoom lens that follows cursor on the main image */
  .carousel-zoom-lens {
    position: absolute;
    border: 2px solid rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: brightness(1.1);
    border-radius: 12px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.1);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 50;
  }
  
  /* Liquid Glass Effect (when enabled) */
  .carousel-zoom-lens.liquid-glass {
    --lg-border-radius: 16px;
    --lg-blur: 4px;
    
    border: none;
    background: none;
    backdrop-filter: none;
    isolation: isolate;
    border-radius: var(--lg-border-radius);
    box-shadow: none;
    overflow: hidden;
  }
  
  /* Tint layer with inner glow */
  .carousel-zoom-lens.liquid-glass::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--lg-border-radius);
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.3) 0%,
      rgba(255, 255, 255, 0.05) 50%,
      rgba(255, 255, 255, 0.2) 100%
    );
    box-shadow: 
      inset 0 1px 2px rgba(255, 255, 255, 0.7),
      inset 0 -1px 1px rgba(0, 0, 0, 0.08),
      inset 0 0 30px -5px rgba(255, 255, 255, 0.5);
    pointer-events: none;
    z-index: 2;
  }
  
  /* Blur + glass layer with liquid distortion */
  .carousel-zoom-lens.liquid-glass::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--lg-border-radius);
    backdrop-filter: blur(var(--lg-blur)) saturate(1.2) brightness(1.05);
    -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(1.2) brightness(1.05);
    filter: var(--liquid-filter, none);
    box-shadow: 
      0 8px 32px rgba(0, 0, 0, 0.12),
      0 2px 8px rgba(0, 0, 0, 0.08),
      0 0 0 1px rgba(255, 255, 255, 0.3);
    pointer-events: none;
    z-index: 1;
  }
  
  .media-column.zoom-active .carousel-zoom-lens {
    opacity: 1;
  }
  
  /* The zoom panel that shows magnified view */
  .carousel-zoom-panel {
    position: absolute;
    top: 0;
    left: calc(100% + 16px);
    width: calc(100% - 16px);
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    overflow: hidden;
    background-color: var(--color-neutral-light, #f5f5f5);
    background-repeat: no-repeat;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 9999;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    /* No transition on background-position - instant like Amazon */

    /* Same fix as sections/product-header-4 — this section is a near-copy of it and
       carried the identical bug. `visibility: hidden` stops the panel painting but
       it still counts toward the document's scroll area, so every pack PDP scrolled
       202px sideways with nobody hovering anything. Measured on the Omega Starter
       Pack at 1440: the panel sat at x=873 to x=1642 and hiding it alone dropped
       scrollWidth from 1642 to exactly 1440. */
    display: none;
  }

  .media-column.zoom-active .carousel-zoom-panel {
    display: block;
    opacity: 1;

    /* And the same sizing cap: the base width is a full media-column, which is far
       wider than the room beside the image, so the active panel overflowed too. */
    width: 55%;
  }
  
  /* Elevate media column above info column when zoom is active */
  .media-column.zoom-active {
    z-index: 100;
  }
  
  /* Make the carousel container show crosshair cursor */
  .carousel-main-container.zoom-enabled {
    cursor: crosshair;
  }
  
  /* Hide zoom on mobile/touch devices */
  @media (max-width: 1023px) {
    .carousel-zoom-lens,
    .carousel-zoom-panel {
      display: none !important;
    }
    
    .carousel-main-container.zoom-enabled {
      cursor: grab;
    }
  }
  
  /* ==========================================
     In-Place Zoom Mode
     ========================================== */
  
  .carousel-main-container.zoom-inplace {
    cursor: crosshair;
    overflow: hidden;
  }
  
  .carousel-main-container.zoom-inplace .carousel-track {
    transition: transform 0.3s ease;
    cursor: crosshair;
  }
  
  .carousel-main-container.zoom-inplace .carousel-slide,
  .carousel-main-container.zoom-inplace .carousel-slide img {
    cursor: crosshair;
  }
  
  .carousel-main-container.zoom-inplace-active .carousel-slide img {
    transform: scale(2);
    transition: transform 0.2s ease-out;
  }
  
  .carousel-main-container.zoom-inplace .carousel-slide img {
    transition: transform 0.2s ease-out;
    transform-origin: inherit;
  }
  
  /* Hide lens and panel in inplace mode */
  .carousel-main-container.zoom-inplace ~ .carousel-zoom-lens,
  .carousel-main-container.zoom-inplace ~ .carousel-zoom-panel,
  .media-column:has(.zoom-inplace) .carousel-zoom-lens,
  .media-column:has(.zoom-inplace) .carousel-zoom-panel {
    display: none !important;
  }
  
  @media (max-width: 1023px) {
    .carousel-main-container.zoom-inplace {
      cursor: grab;
    }
    
    .carousel-main-container.zoom-inplace-active .carousel-slide img {
      transform: none;
    }
  }
  
  /* Ensure media column can show overflow for the zoom panel */
  @media (min-width: 1024px) {
    .media-column {
      overflow: visible;
      /* Note: media-column already has position: sticky which works for absolute children */
    }
    
    .thumbnail-carousel-wrapper {
      position: relative;
    }
  }

  /* =====================================================
     Enrollment-style polish — neutralize warm-gold accents
     within Product Header 4 (and its sidebar clone) only.
  ===================================================== */

  /* Add-to-Cart pill: amber accent-1 → solid dark.
     Scoped to PH4 + the cloned info-column so other sections
     that use .btn-filled-accent-1 are unaffected. */
  .product-header-4 .add-to-cart-btn.btn-filled-accent-1,
  .product-header-4 .btn-filled-accent-1.add-to-cart-btn,
  .fluid-sidebar-clone .add-to-cart-btn.btn-filled-accent-1,
  .fluid-sidebar-clone .btn-filled-accent-1.add-to-cart-btn {
    background-color: var(--clr-btn-primary, #161716);
    color: var(--clr-btn-primary-text, #ffffff);
    border-color: var(--clr-btn-primary, #161716);
  }

  .product-header-4 .add-to-cart-btn.btn-filled-accent-1:hover,
  .product-header-4 .btn-filled-accent-1.add-to-cart-btn:hover,
  .fluid-sidebar-clone .add-to-cart-btn.btn-filled-accent-1:hover,
  .fluid-sidebar-clone .btn-filled-accent-1.add-to-cart-btn:hover {
    background-color: var(--clr-btn-primary-hover, #000000);
    color: var(--clr-btn-primary-text, #ffffff);
  }


/* =====================================================
   BUNDLE GROUPS — ported from the enrollment configurator
   (flavor-customize wrapper, group sections, item cards,
   selection pills, qty steppers, included-items summary).
   Scoped vars map the enrollment palette onto this theme.
===================================================== */
.flavor-customize-wrapper {
  --enroll-primary: var(--clr-primary, #1c0f8a);
  --enroll-border: var(--clr-border-light, #f0e8e2);
  --enroll-border-hover: var(--clr-border-dark, #dad0c9);
  --enroll-bg-light: var(--clr-neutral-light, #faf3ec);
  --enroll-text-primary: var(--clr-text-primary, #1a1716);
  --enroll-text-secondary: var(--clr-text-secondary, #3b302a);
  --enroll-text-muted: var(--clr-text-muted, #7a7067);

  padding: 24px;
  background: #fff;
  border: 1.5px solid var(--enroll-border, #f0e8e2);
  border-radius: 12px;
}

.flavor-customize-wrapper [hidden] {
  display: none !important;
}

.flavor-customize-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}

.flavor-customize-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--enroll-text-primary, #1a1716);
  margin: 0;
}

.flavor-customize-subtitle {
  font-size: 13px;
  color: var(--enroll-text-muted, #9ca3af);
  margin: 0;
  line-height: 1.4;
}

/* Group sections (inside the white wrapper) */
.flavor-group-section {
  padding: 16px;
  background: var(--enroll-bg-light, #faf3ec);
  border-radius: 8px;
  margin-bottom: 12px;
}

.flavor-group-section:last-child {
  margin-bottom: 0;
}

.flavor-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.flavor-group-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--enroll-text-primary, #1a1716);
  margin: 0;
}

.flavor-group-desc {
  font-size: 12px;
  color: var(--enroll-text-muted, #9ca3af);
  margin: 0 0 10px 0;
  line-height: 1.4;
}

/* Group price chip — pricing display mirrors the global product_bundle
   section (fixed amount with compare strike, or dynamic min–max range). */
.flavor-group-price {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--enroll-text-primary, #111);
  white-space: nowrap;
}

.flavor-group-compare {
  text-decoration: line-through;
  color: var(--enroll-text-muted, #9ca3af);
  font-weight: 400;
  margin-right: 4px;
}

.flavor-group-range {
  font-size: 0.75rem;
  color: var(--enroll-text-muted, #6b7280);
  white-space: nowrap;
}

/* Mutual exclusivity: groups disabled by a sibling selection */
.flavor-group-section.is-disabled-group {
  opacity: 0.4;
  pointer-events: none;
  position: relative;
}

.flavor-group-section.is-disabled-group::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.3);
  pointer-events: none;
}

/* Item grid */
.bundle-group-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

@media (max-width: 767px) {
  .bundle-group-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* Item cards */
.flavor-option {
  position: relative;
  cursor: pointer;
  /* Grid items default to min-width:auto, which refuses to shrink below the
     card's intrinsic content width — forcing the 1fr tracks wider than the
     sidebar and pushing the card content out of its container. min-width:0
     lets the track win so the card (and its name) wrap within bounds. */
  min-width: 0;
}

.flavor-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.flavor-option-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1.5px solid var(--enroll-border, #f0e8e2);
  border-radius: 8px;
  transition: all 0.2s ease;
  min-height: 56px;
}

.flavor-option:hover .flavor-option-inner {
  border-color: var(--enroll-border-hover, #dad0c9);
  background: #fdfcfb;
}

.flavor-option input:checked + .flavor-option-inner,
.flavor-option.selected .flavor-option-inner {
  border-color: var(--enroll-text-primary, #1a1716);
  background: #fdfaf6;
}

.flavor-option.disabled .flavor-option-inner,
.flavor-option.is-unavailable .flavor-option-inner {
  opacity: 0.4;
  cursor: not-allowed;
}

.flavor-option.hidden {
  display: none;
}

/* Swatch fallback + image */
.flavor-swatch {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  border: 1px solid var(--enroll-border, #f0e8e2);
}

.flavor-image {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--enroll-bg-light, #faf3ec);
}

.flavor-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.flavor-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--enroll-text-primary, #1a1716);
  line-height: 1.3;
  min-width: 0;
  flex: 1;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Per-item price (non-fixed groups; dynamic items render as "+$x") */
.flavor-price {
  font-size: 12px;
  font-weight: 600;
  color: var(--enroll-text-secondary, #3b302a);
}

.flavor-price-compare {
  text-decoration: line-through;
  color: var(--enroll-text-muted, #9ca3af);
  font-weight: 400;
  margin-right: 4px;
}

/* Qty controls — add button transforms to stepper */
.flavor-qty-controls {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
}

.flavor-qty-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: #fff;
  border: none;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: all 0.2s ease;
}

.flavor-qty-add-btn svg {
  width: 14px;
  height: 14px;
  color: var(--enroll-primary, #49473d);
  stroke: var(--enroll-primary, #49473d);
  stroke-width: 2.5;
}

.flavor-qty-add-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.flavor-qty-add-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.flavor-qty-controls.active .flavor-qty-add-btn {
  display: none;
}

.flavor-qty-stepper {
  display: none;
  align-items: center;
  gap: 0;
  background: var(--enroll-primary, #49473d);
  border-radius: 50px;
  padding: 2px 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.flavor-qty-controls.active .flavor-qty-stepper {
  display: flex;
}

.flavor-qty-minus-btn,
.flavor-qty-plus-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.15s ease;
}

.flavor-qty-minus-btn svg,
.flavor-qty-plus-btn svg {
  width: 12px;
  height: 12px;
  color: #fff;
  stroke: #fff;
}

.flavor-qty-minus-btn:hover,
.flavor-qty-plus-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

.flavor-qty-minus-btn:disabled,
.flavor-qty-plus-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.flavor-qty-value {
  min-width: 20px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

/* Selection pill (count badge next to group title) */
.selection-pill {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 20px;
  background: var(--enroll-bg-light, #f8fafc);
  border: 1px solid var(--enroll-border, #e2e8f0);
  color: var(--enroll-text-secondary, #64748b);
  vertical-align: middle;
  margin-left: auto;
  transition: all 0.2s ease;
}

.selection-pill.pill-complete {
  background: #d1fae5;
  border-color: #6ee7b7;
  color: #065f46;
}

.selection-pill.pill-over {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #991b1b;
}

.pill-current {
  font-weight: 700;
}

.flavor-group-section .selection-pill {
  background: #fff;
}

/* Subscribe & Save toggle (per group) */
.flavor-group-section .enrollment-sub-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px 0;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--enroll-text-secondary, #3b302a);
}

.flavor-group-section .enrollment-sub-checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.flavor-group-section .enrollment-sub-slider {
  position: relative;
  flex-shrink: 0;
  width: 34px;
  height: 20px;
  border-radius: 20px;
  background: var(--enroll-border-hover, #dad0c9);
  transition: background 0.2s ease;
}

.flavor-group-section .enrollment-sub-slider::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s ease;
}

.flavor-group-section .enrollment-sub-checkbox:checked + .enrollment-sub-slider {
  background: var(--enroll-text-primary, #1a1716);
}

.flavor-group-section .enrollment-sub-checkbox:checked + .enrollment-sub-slider::after {
  transform: translateX(14px);
}

/* "Always Included" summary list */
.subchoice-summary-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.subchoice-summary-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--enroll-text-muted, #7a7067);
}

.subchoice-summary-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Top-align the qty prefix so when product names wrap, the "2x" stays at the
   top alongside the first line instead of centering in the middle. */
.subchoice-summary-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: var(--enroll-text-secondary, #3b302a);
  line-height: 1.35;
}

.subchoice-summary-line .subchoice-list-qty {
  flex-shrink: 0;
  font-weight: 700;
  color: var(--enroll-text-primary, #1a1716);
  min-width: 28px;
  line-height: 1.35;
}

.subchoice-summary-line .subchoice-list-name {
  flex: 1 1 auto;
  min-width: 0;
}

/* Disabled add-to-cart while bundle selections are incomplete */
.add-to-cart-btn[data-bundle-add-to-cart]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Brand trust line ──────────────────────────────────────────────────────
   Replaces the old per-product star rating, which shipped the same invented
   "4.8 stars • 18 Reviews" on all 30 product templates and linked to an anchor
   that did not exist.

   HIERARCHY IS THE POINT. This must read third, after the product title and the
   selling-points line, so it supports the header instead of competing with it:
     product title          26px / 32px desktop, serif, --clr-primary
     selling points         16px, body face, --clr-primary
     brand trust line       14px, body face, --clr-text-muted  <- this
   Stars are 14px in brand gold, which is the accent the brand already uses
   sparingly, and they are decorative: the accessible name lives on the wrapper.
   No underline and no link, because it is a statement, not a destination. */
.brand-trust {
  display: flex;
  align-items: center;
  gap: var(--space-sm, 8px);
  flex-wrap: wrap;
  line-height: 1.4;
}

.brand-trust__stars {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  /* Empty stars: the same gold, dropped back so the filled row reads as "most
     of the way" rather than as two different colours. */
  color: var(--clr-secondary, #E5AC40);
}

.brand-trust__stars-track,
.brand-trust__stars-fill {
  display: inline-flex;
  gap: 2px;
  white-space: nowrap;
}

.brand-trust__stars-track { opacity: 0.28; }

.brand-trust__stars-fill {
  position: absolute;
  inset: 0;
  overflow: hidden;   /* the inline width: N% is what clips the partial star */
}

.brand-trust__star {
  display: block;
  flex: 0 0 auto;
}

.brand-trust__text {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--clr-text-muted, #6C6C6C);
}

/* The figure sits in the same muted ink as the sentence — it is one statement,
   not a number with a caption. It is printed from `trust_rating`, the same
   setting that fills the stars, so the two can never disagree. */
.brand-trust__value { font-variant-numeric: tabular-nums; }

/* 2026-09-25: thumbnails follow the 944:650 product photos instead of square boxes. */
.thumbnail-carousel-wrapper .carousel-thumbnails-vertical .carousel-thumbnail {
  height: auto;
  aspect-ratio: 944 / 650;
}
.thumbnail-carousel-wrapper .carousel-thumbnail img {
  object-fit: cover;
}
@media (max-width: 1023px) {
  .thumbnail-carousel-wrapper .carousel-thumbnails-track.carousel-thumbnails-vertical {
    height: auto;
  }
}

/* 2026-09-25: a price range (e.g. "$123.97 - $229.97") could push the radio outside the card
   at 1024-1150px. Let the price wrap; the radio never shrinks. */
.subscription-option-price-group { flex-shrink: 1; min-width: 0; }
.subscription-option-price { white-space: normal; text-align: right; }
.subscription-option-price-group .subscription-radio { flex-shrink: 0; }

/* 2026-09-25 (D39): gallery arrows. They were 40px white circles with no edge, a 10% shadow
   and opacity 0.7 over the cream product photo, so they read as a shadow with no button.
   Same treatment as the video-carousel arrows: a 1px muted ring (4.9:1 on cream), no shadow,
   full opacity, 44px touch target. The :disabled rule above still dims the inactive arrow. */
.thumbnail-carousel-wrapper .results-carousel-nav-btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--clr-text-muted, #6C6C6C);
  box-shadow: none;
  opacity: 1;
}
.thumbnail-carousel-wrapper .results-carousel-nav-btn:hover:not(:disabled) {
  border-color: var(--clr-primary, #49473E);
}

/* 2026-09-25 (D99): Subscribe & Save plan dropdown. Same chevron as .quantity-select
   (12x8 at right 16px, 48px text clearance) instead of the OS arrow ~8px from the edge.
   Visual only. The !important is needed because the markup sets `padding: 12px` inline. */
.subscription-plans-dropdown {
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-md, 16px) center;
  background-size: 12px 8px;
  padding-right: 48px !important;
  cursor: pointer;
}