/* ============================================
     PRODUCT DETAIL PAGE
     ============================================ */

  /* Post-review success banner — shown only when a review submitted via
     the My Account "Write a review" flow just earned WPLoyalty points
     (see happybud_flag_review_success_redirect() in includes/wployalty-
     account.php). Markup: iconify-icon + .review-success-copy, both
     direct children of .review-success-banner. */
  .review-success-banner {
    /* 1136px = the 1200px page container minus the 32px side gutter
       .product-breadcrumb uses, so the card lines up with it below. */
    width: calc(100% - 64px); max-width: 1136px; margin: 14px auto 0;
    padding: 16px 20px;
    display: flex; align-items: center; gap: 12px;
    background: rgba(31, 93, 63, 0.08);
    border: 2px solid #1f5d3f;
    border-radius: 16px;
  }
  .review-success-banner > iconify-icon {
    font-size: 26px; color: #1f5d3f; flex-shrink: 0;
  }
  .review-success-copy { display: flex; flex-direction: column; gap: 2px; }
  .review-success-copy strong { font-size: 14.5px; font-weight: 800; color: #1a1a1a; }
  .review-success-copy span { font-size: 13px; color: #4a4a4a; }
  .review-success-copy a { color: #1f5d3f; font-weight: 700; text-decoration: underline; }
  .review-success-copy a:hover { color: #ff6b35; }
  @media (max-width: 640px) {
    .review-success-banner { padding: 14px 20px; }
  }

  /* Pending variant — review submitted but held for moderation, so no
     points yet (see happybud_user_has_pending_dashboard_review() in
     includes/wployalty-account.php). Amber instead of green so it doesn't
     read as a completed success. */
  .review-success-banner.pending { background: rgba(184, 121, 31, 0.1); border-color: #b8791f; }
  .review-success-banner.pending > iconify-icon { color: #b8791f; }
  .review-success-banner.pending .review-success-copy a { color: #b8791f; }

  /* Breadcrumb strip */
  .product-breadcrumb {
    max-width: 1200px; margin: 0 auto;
    padding: 10px 32px 0;
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 600;
    color: #6b6b6b;
    text-transform: uppercase; letter-spacing: 0.05em;
  }
  .product-breadcrumb a:hover { color: #ff6b35; }
  .product-breadcrumb iconify-icon { font-size: 10px; }

  /* Main product layout: gallery (left) + buy box (right) */
  .product-main {
    max-width: 1200px; margin: 0 auto;
    padding: 32px 32px 64px;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 56px;
  }

  /* ============== GALLERY (LEFT) ============== */
  .gallery {
    position: sticky; top: 100px; align-self: start;
  }
  .gallery-main {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #fff;
    border: 3px solid #1a1a1a;
    border-radius: 28px;
    overflow: hidden;
    margin-bottom: 14px;
  }
  .gallery-main-image {
    width: 100%; height: 100%;
    background-size: cover; background-position: center;
    transition: transform 0.4s;
  }
  .gallery-main:hover .gallery-main-image { transform: scale(1.04); }
  /* Floating badges on gallery */
  .gallery-badges {
    position: absolute; top: 16px; left: 16px;
    display: flex; flex-direction: column; gap: 8px;
    z-index: 2;
  }
  .gallery-main .effect-chip-group {
    z-index: 2;
    top: 16px; right: 16px;
  }
  .gallery-main .effect-chip {
    font-size: 11px;
    padding: 5px 12px;
  }
  .gallery-badge {
    padding: 6px 14px;
    background: #1a1a1a; color: #ff6b35;
    border-radius: 980px;
    font-size: 12px; font-weight: 800;
    transform: rotate(-2deg);
    box-shadow: 3px 3px 0 #fcfaf4;
  }
  .gallery-badge.sale {
    background: #ff6b35; color: #1a1a1a;
    transform: rotate(1deg);
  }
  .gallery-badge.out-of-stock {
    background: #6b6b6b; color: #fcfaf4;
  }
  /* Strain chip on gallery */
  .gallery-strain {
    position: absolute; top: 16px; right: 16px;
    padding: 6px 14px;
    background: rgba(255, 248, 240, 0.92);
    backdrop-filter: blur(4px);
    border: 2px solid #1a1a1a;
    border-radius: 980px;
    font-size: 12px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.05em;
    z-index: 2;
  }
  /* Gallery nav arrows */
  .gallery-nav {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(26, 26, 26, 0.85);
    color: #fcfaf4;
    display: flex; align-items: center; justify-content: center;
    z-index: 3;
    transition: background 0.2s;
  }
  .gallery-nav:hover { background: #ff6b35; color: #1a1a1a; }
  .gallery-nav.prev { left: 16px; }
  .gallery-nav.next { right: 16px; }

  /* Thumbnail strip */
  .gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
  }
  .gallery-thumb {
    aspect-ratio: 1 / 1;
    border: 2px solid #1a1a1a;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    background-size: cover; background-position: center;
    transition: transform 0.2s, opacity 0.2s;
    opacity: 0.6;
  }
  .gallery-thumb:hover { opacity: 1; transform: translateY(-2px); }
  .gallery-thumb.active {
    opacity: 1;
    border-color: #ff6b35;
    border-width: 3px;
  }

  /* ============== BUY BOX (RIGHT) ============== */
  /* .buy-box { } */
  .product-tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px;
    background: #1a1a1a; color: #ff6b35;
    border-radius: 980px;
    font-size: 11px; font-weight: 800;
    letter-spacing: 0.08em; text-transform: uppercase;
    margin-bottom: 16px;
    transform: rotate(-1deg);
  }
  .product-title {
    font-size: clamp(40px, 5vw, 56px);
    font-weight: 900; letter-spacing: -0.04em;
    line-height: 1;
    margin-bottom: 14px;
  }
  .product-subtitle {
    font-size: 16px;
    color: #555;
    margin-bottom: 20px;
    font-weight: 500;
  }
  .desc-clamp {
    max-height: 4.8em; /* ~3 lines */
    overflow: hidden;
    transition: max-height 0.35s ease;
    line-height: 1.6;
  }
  .desc-clamp.is-expanded {
    max-height: 600px;
  }
  .desc-read-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    background: none;
    border: none;
    padding: 0;
    font-size: 14px;
    font-weight: 700;
    color: #ff6b35;
    cursor: pointer;
    text-decoration: none;
  }
  .desc-read-more:hover {
    opacity: 0.8;
    background: none !important;
  }
  /* Rating row */
  .product-rating-row {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 14px;
    padding-bottom: 24px;
    border-bottom: 2px dashed #e0d8c8;
  }
  .stars-large {
    color: #ff6b35;
    font-size: 18px;
    letter-spacing: 2px;
  }
  .rating-number {
    font-size: 16px; font-weight: 800;
  }
  .rating-count {
    font-size: 14px;
    color: #6b6b6b;
  }
  .rating-count a { color: #ff6b35; text-decoration: underline; }

  /* Stats grid */
  .product-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 28px;
    padding: 20px;
    background: #fff;
    border: 2px solid #1a1a1a;
    border-radius: 16px;
  }
  .stat-cell {
    text-align: center;
  }
  .stat-cell .icon {
    font-size: 22px; color: #ff6b35;
    margin-bottom: 6px;
  }
  .stat-cell .label {
    font-size: 10px; font-weight: 700;
    color: #6b6b6b;
    text-transform: uppercase; letter-spacing: 0.08em;
    margin-bottom: 4px;
  }
  .stat-cell .value {
    font-size: 16px; font-weight: 800;
    color: #1a1a1a;
    letter-spacing: -0.01em;
  }

  /* Variant selector — weight */
  .variant-section {
    margin-bottom: 14px;
  }
  .variant-label {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 13px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.05em;
    margin-bottom: 12px;
    gap: 12px;
    flex-wrap: wrap;
  }
  .variant-label .best-value {
    color: #ff6b35;
    text-transform: none; letter-spacing: 0;
    font-weight: 700;
    font-size: 12px;
  }
  /* Custom dropdown wrapper */
  .variant-dropdown {
    position: relative;
  }
  .variant-dropdown select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: #fff;
    border: 3px solid #1a1a1a;
    border-radius: 14px;
    padding: 16px 48px 16px 20px;
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    line-height: 1.3;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .variant-dropdown select:hover {
    border-color: #ff6b35;
  }
  .variant-dropdown select:focus {
    border-color: #ff6b35;
    box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.15);
  }
  .variant-dropdown .dropdown-caret {
    position: absolute;
    top: 50%; right: 18px;
    transform: translateY(-50%);
    color: #1a1a1a;
    font-size: 16px;
    pointer-events: none;
  }
  .variant-helper {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 12px;
    color: #6b6b6b;
    font-weight: 500;
  }
  .variant-helper iconify-icon {
    color: #ff6b35;
    font-size: 14px;
  }

  /* Price block */
  .price-block {
    display: flex; align-items: baseline; gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
  }
  .price-current {
    font-size: 40px; font-weight: 900;
    letter-spacing: -0.03em;
    color: #1a1a1a;
  }
  .price-was {
    font-size: 22px;
    color: #b0b0b0;
    text-decoration: line-through;
    font-weight: 600;
  }
  .price-save {
    background: #ff6b35;
    color: #1a1a1a;
    padding: 4px 12px;
    border-radius: 980px;
    font-size: 12px;
    font-weight: 800;
  }

  /* Quantity + add to cart */
  .add-row {
    display: flex; gap: 12px;
    margin-bottom: 20px;
  }
  .qty-wrap {
    display: inline-flex; align-items: center;
    border: 3px solid #1a1a1a;
    border-radius: 980px;
    background: #fff;
    overflow: hidden;
  }
  .qty-wrap button {
    width: 44px; height: 52px;
    font-size: 18px; font-weight: 700;
    transition: background 0.2s;
  }
  .qty-wrap button:hover { background: #ff6b35; }
  .qty-wrap input {
    width: 44px;
    height: 52px;
    text-align: center;
    background: transparent;
    border: none;
    font-size: 16px; font-weight: 800;
    color: #1a1a1a;
    font-family: inherit;
    outline: none;
  }
  .add-btn {
    flex: 1;
    background: #1a1a1a;
    color: #ff6b35;
    padding: 0 32px;
    height: 52px;
    border-radius: 980px;
    font-size: 15px; font-weight: 800;
    letter-spacing: 0.02em;
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    box-shadow: 5px 5px 0 #ff6b35;
    transition: transform 0.2s, box-shadow 0.2s;
  }
  .add-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 #ff6b35;
  }
  .fav-btn {
    width: 52px; height: 52px;
    border: 3px solid #1a1a1a;
    border-radius: 50%;
    background: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px;
    transition: background 0.2s, color 0.2s;
  }
  .fav-btn:hover { background: #ff6b35; }
  .fav-btn.active { color: #ff6b35; }

  /* Trust strip beneath buy button */
  .buy-trust {
    display: flex; gap: 0;
    background: #fff;
    border: 2px solid #1a1a1a;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 14px;
  }
  .buy-trust-cell {
    flex: 1;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    border-right: 1px solid #e0d8c8;
  }
  .buy-trust-cell:last-child { border-right: none; }
  .buy-trust-cell iconify-icon {
    font-size: 20px;
    color: #1f5d3f;
    line-height: 1;
  }
  .buy-trust-cell .text {
    font-size: 10px; font-weight: 700;
    line-height: 1.3;
    color: #1a1a1a;
  }

  /* Quick description */
  .product-quick-desc {
    font-size: 15px;
    line-height: 1.6;
    color: #444;
    padding: 20px;
    background: rgba(255, 107, 53, 0.06);
    border-radius: 14px;
    border-left: 4px solid #ff6b35;
  }

  /* ============== TABS SECTION ============== */
  .product-tabs {
    max-width: 1200px; margin: 0 auto;
    padding: 32px 32px 64px;
  }
  .tabs-nav {
    display: flex; gap: 0;
    border-bottom: 3px solid #1a1a1a;
    margin-bottom: 10px;
    overflow-x: auto;
  }
  .tab-link {
    padding: 18px 28px;
    font-size: 14px; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: #6b6b6b;
    border-bottom: 4px solid transparent;
    margin-bottom: -3px;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    white-space: nowrap;
  }
  .tab-link:hover { color: #1a1a1a; }
  .tab-link.active {
    color: #1a1a1a;
    border-color: #ff6b35;
  }

  /* Tab content */
  .tab-pane { display: none; }
  .tab-pane.active { display: block; }

  /* Description content layout */
  .desc-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 48px;
  }
  .desc-main h2 {
    font-size: 32px;
    font-weight: 900;
    letter-spacing: -0.03em;
    margin-bottom: 16px;
  }
  .desc-main h3 {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.02em;
    margin: 18px 0 8px;
  }
  .desc-main p {
    font-size: 16px;
    line-height: 1.75;
    color: #333;
    margin-bottom: 10px;
  }

  /* Lab Results / COA */
  .lab-results {
    background: #fff;
    border: 3px solid #1a1a1a;
    border-radius: 24px;
    padding: 32px;
  }
  .lab-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 14px;
    flex-wrap: wrap; gap: 16px;
  }
  .lab-title {
    font-size: 22px; font-weight: 900;
    letter-spacing: -0.02em;
  }
  .lab-title-sub {
    font-size: 13px;
    color: #6b6b6b;
    margin-top: 4px;
  }
  .secondary-link-btn {
    padding: 10px 18px;
    background: #1a1a1a; color: #ff6b35;
    border-radius: 980px;
    font-size: 13px; font-weight: 800;
    display: inline-flex; align-items: center; gap: 8px;
  }
  .secondary-link-btn:hover { background: #ff6b35; color: #1a1a1a; }
  .lab-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 28px;
  }
  .lab-row {
    padding: 22px 20px;
    background: #fcfaf4;
    border-radius: 14px;
    text-align: center;
  }
  .lab-row .name {
    font-size: 12px; font-weight: 700;
    color: #6b6b6b;
    text-transform: uppercase; letter-spacing: 0.08em;
    margin-bottom: 8px;
  }
  .lab-row .val {
    font-size: 32px; font-weight: 900;
    letter-spacing: -0.02em;
    color: #1a1a1a;
    line-height: 1;
  }
  .lab-row .unit {
    font-size: 14px;
    color: #6b6b6b;
    font-weight: 600;
    margin-left: 2px;
  }
  .lab-pass {
    display: flex; gap: 10px;
    flex-wrap: wrap;
  }
  .lab-pass-item {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px;
    background: rgba(31, 93, 63, 0.1);
    color: #1f5d3f;
    border-radius: 980px;
    font-size: 12px; font-weight: 700;
  }
  .lab-pass-item iconify-icon { font-size: 14px; }

  /* ============== REVIEWS TAB — store-proof-style teaser ============== */
  .store-proof {
    border: 2px solid #1a1a1a;
    border-radius: 18px;
    background: #fff8ef;
    padding: 22px;
    box-shadow: 5px 5px 0 #1a1a1a;
    margin-bottom: 22px;
  }
  .store-proof-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    flex-wrap: wrap;
  }
  .store-proof-score {
    font-size: 16px;
    color: #ff6b35;
    white-space: nowrap;
    letter-spacing: 1px;
  }
  .store-proof-score strong {
    color: #1a1a1a;
    font-size: 22px;
    font-weight: 900;
    margin-left: 4px;
    letter-spacing: 0;
  }
  .store-proof-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 200px;
  }
  .store-proof-copy strong {
    font-size: 16px;
    font-weight: 800;
  }
  .store-proof-copy span {
    font-size: 13px;
    color: #6b6b6b;
  }
  .store-proof-copy .link-btn {
    color: #1f5d3f;
    font-weight: 700;
    text-decoration: none;
  }
  /* Plain inline-text button — resets the browser/Storefront default
     button chrome (dark background, white text) so it reads as a link,
     since it triggers "See all reviews" rather than navigating. */
  .link-btn {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
  }
  .link-btn:hover { background: none; }
  .store-proof-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
  .store-review {
    margin: 0;
    background: #fff;
    border: 2px solid #1a1a1a;
    border-radius: 14px;
    padding: 14px;
  }
  .store-review-stars {
    color: #ff6b35;
    font-size: 13px;
    letter-spacing: 1px;
  }
  .store-review p {
    font-size: 13.5px;
    line-height: 1.5;
    color: #1a1a1a;
    margin: 8px 0 10px;
  }
  .store-review cite {
    font-size: 12px;
    color: #6b6b6b;
    font-style: normal;
    font-weight: 700;
  }
  .product-reviews-empty {
    text-align: center;
    padding: 26px 16px;
    border: 2px dashed #d8cfbe;
    border-radius: 16px;
  }
  .product-reviews-empty h3 {
    font-size: 17px;
    font-weight: 800;
    margin: 0 0 6px;
  }
  .product-reviews-empty p {
    font-size: 14px;
    color: #6b6b6b;
    margin: 0 0 16px;
  }
  .write-review-btn.write-review-btn-mobile {
    display: none;
  }
  @media (max-width: 760px) {
    .store-proof-cards { grid-template-columns: 1fr; }
    .store-proof-head {
      flex-direction: column;
      align-items: flex-start;
    }
    .store-proof-head .write-review-btn {
      display: none;
    }
    .write-review-btn.write-review-btn-mobile {
      display: flex;
      width: 100%;
      justify-content: center;
      margin-top: 14px;
    }
  }
  .write-review-btn {
    padding: 12px 24px;
    background: #1a1a1a;
    color: #ff6b35;
    border-radius: 980px;
    border: none;
    font-size: 13px; font-weight: 800;
    display: inline-flex; align-items: center; gap: 8px;
    cursor: pointer;
  }
  .write-review-btn:hover { background: #ff6b35; color: #1a1a1a; }

  /* ── Review form ── */
  .review-form-wrap {
    display: none;
    margin-top: 40px;
    padding: 32px;
    background: #fff;
    border: 2px solid #1a1a1a;
    border-radius: 20px;
  }
  .review-form-wrap.is-open { display: block; }

  .review-form-wrap .comment-reply-title {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -0.02em;
    margin-bottom: 24px;
  }

  .review-form-wrap .comment-form p {
    margin-bottom: 18px;
  }

  .review-form-wrap .comment-form label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b6b6b;
    margin-bottom: 6px;
  }

  /* ── Clickable 5-star rating picker — pure CSS, no JS needed.
     Radios render in DOM order 5,4,3,2,1 then flip visually with
     row-reverse so it reads 1→5 left-to-right; the general sibling
     selector (~) then lights up every star from the hovered/checked
     one through to the end of that reversed DOM order, which lands
     on the correct "N stars filled from the left" visual. ── */
  .comment-form-rating {
    margin-bottom: 20px;
  }
  .comment-form-rating .required {
    color: #ff6b35;
  }
  .star-picker {
    display: flex;
    flex-direction: row-reverse;
    gap: 6px;
    font-size: 30px;
    width: fit-content;
  }
  .star-picker input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
  }
  .review-form-wrap .comment-form .star-picker label {
    display: inline-block;
    cursor: pointer;
    color: #ddd3bd;
    transition: color 0.15s;
    text-transform: none;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: normal;
    margin-bottom: 0;
  }
  .review-form-wrap .comment-form .star-picker label:hover,
  .review-form-wrap .comment-form .star-picker label:hover ~ label,
  .review-form-wrap .comment-form .star-picker input:checked ~ label {
    color: #ff6b35;
  }
  .review-form-wrap .comment-form .star-picker input:focus-visible ~ label {
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
    border-radius: 4px;
  }

  .review-form-wrap .comment-form input[type="text"],
  .review-form-wrap .comment-form input[type="email"],
  .review-form-wrap .comment-form input[type="url"] {
    width: 100%;
    height: 50px;
    padding: 0 18px;
    background: #fafafa;
    border: 1.5px solid #e0e0e0;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 500;
    color: #1a1a1a;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
  }

  .review-form-wrap .comment-form input[type="text"]:focus,
  .review-form-wrap .comment-form input[type="email"]:focus,
  .review-form-wrap .comment-form input[type="url"]:focus {
    border-color: #ff6b35;
    box-shadow: 0 0 0 3px rgba(255,107,53,0.15);
  }

  .review-form-wrap .comment-form textarea {
    width: 100%;
    padding: 14px 18px;
    background: #fafafa;
    border: 1.5px solid #e0e0e0;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 500;
    color: #1a1a1a;
    outline: none;
    resize: vertical;
    min-height: 130px;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
    font-family: inherit;
  }

  .review-form-wrap .comment-form textarea:focus {
    border-color: #ff6b35;
    box-shadow: 0 0 0 3px rgba(255,107,53,0.15);
  }

  .review-form-wrap .comment-form .form-submit {
    margin-top: 8px;
    margin-bottom: 0;
  }

  .review-form-wrap .comment-form .form-submit .submit {
    width: 100%;
    justify-content: center;
  }

  /* ── Optional photo field ── */
  .comment-form-photo label {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
  }
  .comment-form-photo input[type="file"] {
    width: 100%;
    padding: 12px 14px;
    background: #fafafa;
    border: 1.5px dashed #d8cfbe;
    border-radius: 12px;
    font-size: 13px;
    color: #6b6b6b;
    box-sizing: border-box;
  }
  .comment-form-photo .photo-file-name {
    display: block;
    margin-top: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: #1f5d3f;
  }
  .review-card {
    background: #fff;
    border: 2px solid #1a1a1a;
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 16px;
  }
  .review-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 12px;
    flex-wrap: wrap; gap: 12px;
  }
  .review-author {
    display: flex; align-items: center; gap: 12px;
  }
  .review-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1f5d3f, #ff6b35);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900;
    font-size: 16px;
  }
  .review-name {
    font-size: 15px; font-weight: 800;
    line-height: 1.2;
    margin-bottom: 2px;
  }
  .review-meta {
    font-size: 12px;
    color: #6b6b6b;
    display: flex; align-items: center; gap: 8px;
  }
  .review-meta .verified {
    color: #1f5d3f; font-weight: 700;
    display: inline-flex; align-items: center; gap: 4px;
  }
  .review-stars {
    color: #ff6b35;
    font-size: 14px;
    letter-spacing: 1px;
  }
  .review-title {
    font-size: 16px; font-weight: 800;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
  }
  .review-body {
    font-size: 14px;
    line-height: 1.6;
    color: #333;
  }
  .review-helpful {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed #e0d8c8;
    display: flex; gap: 16px;
    font-size: 12px;
    color: #6b6b6b;
  }
  .review-helpful button {
    display: inline-flex; align-items: center; gap: 4px;
    color: #6b6b6b; font-weight: 600;
    transition: color 0.2s;
  }
  .review-helpful button:hover { color: #ff6b35; }

  /* ============== RELATED PRODUCTS (styling mirrors the cart
     page's .recs-* recommendations rail, see assets/css/cart.css —
     no slider controls/auto-advance here, just a horizontal scroll rail) ============== */
  .recs-section {
    background: #fcfaf4;
    padding: 70px 32px 14px;
    border-top: 3px solid #1a1a1a;
  }
  .recs-inner { max-width: 1200px; margin: 0 auto; }
  .recs-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 28px;
    flex-wrap: wrap; gap: 12px;
  }
  .recs-header h2 {
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 900; letter-spacing: -0.03em;
    line-height: 1;
  }
  .recs-header h2 .accent {
    background: linear-gradient(135deg, #1f5d3f 0%, #ff6b35 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .related-link {
    font-size: 13px; font-weight: 800;
    color: #1a1a1a;
    display: inline-flex; align-items: center; gap: 6px;
    text-transform: uppercase; letter-spacing: 0.05em;
  }
  .related-link:hover { color: #ff6b35; }
  .recs-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scroll-snap-type: x mandatory;
    gap: 20px;
    padding-top: 4px;
    padding-left: 4px;
    padding-bottom: 8px;
  }
  .recs-grid::-webkit-scrollbar { height: 4px; }
  .recs-grid::-webkit-scrollbar-thumb { background: rgba(26, 26, 26, 0.2); border-radius: 4px; }
  .recs-grid .product-card {
    flex: 0 0 calc(25% - 15px);
    scroll-snap-align: start;
    min-width: 0;
  }

  /* Responsive */

@media (max-width: 1024px) {

    .product-main {
      grid-template-columns: 1fr;
      gap: 32px;
      padding: 24px 22px 48px;
    }
    .gallery { position: static; }
    .desc-grid { grid-template-columns: 1fr; gap: 32px; }
    .recs-section { padding: 48px 22px 14px; }
    .recs-grid { gap: 16px; }
    .recs-grid .product-card { flex: 0 0 calc(50% - 8px); }
  }
  @media (max-width: 640px) {
    .product-stats { grid-template-columns: 1fr 1fr; padding: 16px; gap: 8px; }
    .variant-dropdown select { font-size: 14px; padding: 14px 44px 14px 16px; }
    .reviews-summary { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
    .lab-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .lab-row { padding: 16px 12px; }
    .lab-row .val { font-size: 24px; }
    .product-tabs { padding: 24px 22px 48px; }
    .recs-section { padding: 32px 16px 14px; }
    .recs-grid { gap: 12px; }
    .recs-grid .product-card { flex: 0 0 calc(50% - 6px); }
  }

  /* =========== STICKY MOBILE ADD-TO-BAG =========== */
  .mobile-buy-bar {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #fcfaf4;
    border-top: 2px solid #1a1a1a;
    padding: 12px 16px;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
    z-index: 9000;
    align-items: center;
    gap: 12px;
    /* Safe-area inset for iOS notch / home indicator */
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
  .mbb-price {
    display: flex; flex-direction: column;
    flex-shrink: 0;
  }
  .mbb-price-now {
    font-size: 22px; font-weight: 900; font-style: italic;
    line-height: 1; color: #1a1a1a;
  }
  .mbb-price-was {
    font-size: 12px; color: #6b6b6b;
    text-decoration: line-through;
    margin-top: 2px;
  }
  .mbb-qty {
    display: flex; align-items: center;
    background: #ede4d3;
    border-radius: 980px;
    flex-shrink: 0;
  }
  .mbb-qty button {
    width: 36px; height: 36px;
    background: transparent; border: none;
    font-size: 18px; font-weight: 800;
    color: #1a1a1a; cursor: pointer;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .mbb-qty input {
    width: 28px; text-align: center;
    background: transparent; border: none;
    font-size: 15px; font-weight: 700;
    color: #1a1a1a;
  }
  .mbb-add {
    flex: 1;
    min-height: 50px;
    background: #1a1a1a; color: #fcfaf4;
    border: none; border-radius: 14px;
    font-size: 15px; font-weight: 800;
    letter-spacing: 0.02em;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
  }
  .mbb-add:active { transform: scale(0.98); }
  .mbb-add:hover { background: #ff6b35; color: #1a1a1a; }
  .mbb-add iconify-icon { font-size: 20px; }
  @media (max-width: 768px) {
    .mobile-buy-bar { display: flex; }
    /* Add padding to bottom of page so sticky bar doesn't cover footer */
    body { padding-bottom: 92px; }
  }

  
  /* ====================================================================
     Subscribe & Save toggle (Woo Subscriptions plugin at build)
     ==================================================================== */
  .subscribe-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 18px 0 22px;
  }
  .subscribe-option {
    position: relative;
    display: block;
    border: 2px solid #d9d4c7;
    border-radius: 14px;
    padding: 14px 14px 12px;
    cursor: pointer;
    background: #fff;
    transition: border-color 0.18s, background 0.18s, transform 0.18s;
  }
  .subscribe-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .subscribe-option:hover {
    border-color: #1a1a1a;
    transform: translateY(-1px);
  }
  .subscribe-option.active,
  .subscribe-option:has(input:checked) {
    border-color: #1a1a1a;
    background: #fcfaf4;
    box-shadow: 3px 3px 0 #1a1a1a;
  }
  .subscribe-option-deal {
    border-color: #7fb069;
  }
  .subscribe-option-deal.active,
  .subscribe-option-deal:has(input:checked) {
    border-color: #1f5d3f;
    background: #f0f8eb;
  }
  .subscribe-badge {
    position: absolute;
    top: -10px;
    right: 10px;
    background: #ff6b35;
    color: #1a1a1a;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.06em;
    padding: 4px 8px;
    border-radius: 980px;
    border: 2px solid #1a1a1a;
  }
  .subscribe-option-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
  }
  .subscribe-option-title {
    font-size: 14px;
    font-weight: 800;
    color: #1a1a1a;
    letter-spacing: -0.01em;
  }
  .subscribe-option-price {
    font-size: 18px;
    font-weight: 900;
    color: #1a1a1a;
  }
  .subscribe-option-cadence {
    font-size: 11px;
    font-weight: 700;
    color: #6b6b6b;
    margin-left: 2px;
  }
  .subscribe-option-sub {
    font-size: 12px;
    color: #6b6b6b;
    line-height: 1.4;
    font-weight: 500;
  }
  @media (max-width: 560px) {
    .subscribe-toggle { grid-template-columns: 1fr; }
  }

  /* ====================================================================
     Brand-level review band (synchronised: 4.9 / 5,124 verified buyers)
     ==================================================================== */
  .brand-trust-band {
    display: grid;
    grid-template-columns: auto auto auto 1fr auto;
    align-items: center;
    gap: 18px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px 28px;
    background: #1a1a1a;
    color: #fcfaf4;
    border-radius: 18px;
    text-decoration: none;
    box-shadow: 0 4px 0 #ff6b35;
    transition: transform 0.2s, box-shadow 0.2s;
    margin-top: 0;
    margin-bottom: 0;
  }
  .brand-trust-band + .product-tabs,
  .brand-trust-band + section { margin-top: 14px; }
  .brand-trust-band:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 #ff6b35;
  }
  .brand-trust-stars {
    color: #ff6b35;
    font-size: 22px;
    letter-spacing: -1px;
  }
  .brand-trust-rating {
    font-size: 32px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
  }
  .brand-trust-divider {
    width: 1px;
    height: 36px;
    background: rgba(255,248,240,0.2);
  }
  .brand-trust-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .brand-trust-copy strong {
    font-size: 16px;
    font-weight: 800;
    color: #fcfaf4;
  }
  .brand-trust-copy span {
    font-size: 13px;
    font-weight: 500;
    color: #c9c5bc;
  }
  .brand-trust-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: #1f5d3f;
    color: #fcfaf4;
    border-radius: 980px;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
  }
  /* When band sits on the cream homepage background, give it side padding */
  section + .brand-trust-band,
  .hero + .brand-trust-band {
    margin: 18px auto 0;
    width: calc(100% - 64px);
  }
  @media (max-width: 1024px) {
    .brand-trust-band {
      grid-template-columns: auto auto 1fr;
      grid-template-areas: "stars rating copy" "cta cta cta";
      row-gap: 14px;
    }
    .brand-trust-stars { grid-area: stars; }
    .brand-trust-rating { grid-area: rating; }
    .brand-trust-copy { grid-area: copy; }
    .brand-trust-divider { display: none; }
    .brand-trust-cta { grid-area: cta; justify-self: stretch; justify-content: center; }
  }
  @media (max-width: 560px) {
    .brand-trust-band { padding: 16px 18px; gap: 12px; }
    .brand-trust-rating { font-size: 26px; }
    .brand-trust-copy strong { font-size: 14px; }
    .brand-trust-copy span { font-size: 12px; }
  }

  /* Footer rating pill (small social-proof anchor in footer-brand) */
  .footer-rating-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding: 8px 14px;
    background: rgba(255,107,53,0.12);
    border: 1px solid rgba(255,107,53,0.35);
    border-radius: 980px;
    color: inherit;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
  }
  .footer-rating-pill:hover {
    background: rgba(255,107,53,0.22);
    border-color: #ff6b35;
  }
  .footer-rating-stars {
    color: #ff6b35;
    font-size: 13px;
    letter-spacing: -0.5px;
  }
  .footer-rating-text {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.01em;
  }
  .footer-rating-text strong { font-weight: 900; }


/* ============== SHOP DROPDOWN: 3-COLUMN MEGA-MENU (Category + Feel + More) ============== */
.nav-dropdown.nav-dropdown-mega {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 20px;
  min-width: 480px;
  padding: 18px;
  align-items: start;
  /* Override base .nav-dropdown centering — anchor to left of trigger so wide panel stays on-screen */
  left: 0;
  transform: translateX(0) translateY(-10px);
}
.nav-item.has-dropdown:hover .nav-dropdown.nav-dropdown-mega,
.nav-item.has-dropdown:focus-within .nav-dropdown.nav-dropdown-mega {
  transform: translateX(0) translateY(0);
}
.nav-dropdown.nav-dropdown-mega::after {
  /* Arrow tip aligned with Shop trigger center instead of dropdown center */
  left: 32px;
  transform: rotate(45deg);
}
.nav-dropdown.nav-dropdown-mega .dd-col {
  display: flex;
  flex-direction: column;
}
.nav-dropdown.nav-dropdown-mega .dd-col-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #6b6b6b;
  padding: 0 12px 8px;
  text-transform: uppercase;
  border-bottom: 1px dashed #d8d2c4;
  margin-bottom: 6px;
}
.nav-dropdown.nav-dropdown-mega .dd-item { padding: 8px 12px; }
.nav-dropdown.nav-dropdown-mega .dd-item .dd-title { font-size: 13px; }
.nav-dropdown.nav-dropdown-mega .dd-item .dd-sub { font-size: 11px; }


/* ============== PDP QUICK ANSWERS FAQ (mood.com pattern) ============== */
.pdp-faq-section {
  background: #fcfaf4;
  padding: 14px 32px;
  border-top: 3px solid #1a1a1a;
}
.pdp-faq-inner {
  max-width: 880px;
  margin: 0 auto;
}
.pdp-faq-head {
  text-align: center;
  margin-bottom: 10px;
}
.pdp-faq-title {
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #1a1a1a;
}
.pdp-faq-title .accent {
  background: linear-gradient(135deg, #1f5d3f 0%, #ff6b35 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pdp-faq-item {
  background: #fff;
  border: 2px solid #1a1a1a;
  border-radius: 16px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: box-shadow 0.2s;
}
.pdp-faq-item:hover { box-shadow: 4px 4px 0 #1a1a1a; }
.pdp-faq-item[open] { box-shadow: 4px 4px 0 #ff6b35; }
.pdp-faq-item summary {
  list-style: none;
  padding: 18px 22px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #1a1a1a;
}
.pdp-faq-item summary::-webkit-details-marker { display: none; }
.pdp-faq-item summary iconify-icon {
  font-size: 18px;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.pdp-faq-item[open] summary iconify-icon { transform: rotate(180deg); }
.pdp-faq-item p {
  padding: 0 22px 20px;
  font-size: 14px;
  line-height: 1.6;
  color: #555;
}
.pdp-faq-item a {
  color: #ff6b35;
  font-weight: 700;
  text-decoration: underline;
}
@media (max-width: 640px) {
  .pdp-faq-section { padding: 56px 20px; }
  .pdp-faq-item summary { padding: 16px 18px; font-size: 15px; }
  .pdp-faq-item p { padding: 0 18px 18px; font-size: 13.5px; }
}


/* ============== VARIANT PILLS (mood.com pattern — replaces dropdown) ============== */
.variant-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 18px 0 8px;
}
.variant-option {
  position: relative;
  display: block;
  background: #fff;
  border: 2.5px solid #1a1a1a;
  border-radius: 16px;
  padding: 14px 18px;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
}
.variant-option:hover { background: #f0e8d8; }
.variant-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.variant-option.selected {
  background: #1a1a1a;
  color: #fcfaf4;
  box-shadow: 5px 5px 0 #ff6b35;
}
.variant-option.selected:hover { background: #1a1a1a; }
.variant-option-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.variant-option-main { flex: 1; min-width: 0; }
.variant-option-size {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.variant-option-sub {
  font-size: 12.5px;
  color: #6b6b6b;
  font-weight: 600;
  margin-top: 3px;
  line-height: 1.3;
}
.variant-option.selected .variant-option-sub { color: rgba(255, 248, 240, 0.7); }
.variant-option-price {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
  white-space: nowrap;
  text-align: right;
}
.variant-option-was {
  display: block;
  font-size: 12px;
  color: #999;
  text-decoration: line-through;
  font-weight: 600;
  margin-top: 2px;
}
.variant-option.selected .variant-option-was { color: rgba(255, 248, 240, 0.5); }
.variant-badge {
  position: absolute;
  top: -10px;
  left: 16px;
  padding: 4px 11px;
  background: #ff6b35;
  color: #1a1a1a;
  border: 2px solid #1a1a1a;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.variant-option-best .variant-badge {
  background: #1f5d3f;
  color: #fcfaf4;
}
/* Out-of-stock weight — disabled radio (see single-product.php), pill
   greyed out with a "Sold out" tag instead of a price/selection state. */
.variant-option.is-out-of-stock {
  cursor: not-allowed;
  background: #f2ede0;
  color: #9a9a9a;
  opacity: 0.75;
}
.variant-option.is-out-of-stock:hover { background: #f2ede0; }
.variant-option.is-out-of-stock .variant-option-sub { color: #9a9a9a; }
.variant-option-oos {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9a9a9a;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .variant-option { padding: 12px 16px; }
  .variant-option-size { font-size: 16px; }
  .variant-option-price { font-size: 19px; }
  .variant-badge { font-size: 9px; padding: 3px 9px; }
}


/* ============== VARIANT PILLS — HORIZONTAL CARD GRID (overrides vertical above) ============== */
.variant-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  flex-direction: initial;
  gap: 10px;
  margin: 18px 0 8px;
}
.variant-option {
  padding: 18px 10px 14px;
  text-align: center;
  border-radius: 14px;
}
.variant-option-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
}
.variant-option-main {
  flex: initial;
  width: 100%;
}
.variant-option-size {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
}
.variant-option-sub {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b6b6b;
  margin-top: 5px;
}
.variant-option.selected .variant-option-sub { color: rgba(255, 248, 240, 0.7); }
.variant-option-price {
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}
.variant-option-was {
  display: block;
  font-size: 11px;
  color: #999;
  text-decoration: line-through;
  font-weight: 600;
}
.variant-option.selected .variant-option-was { color: rgba(255, 248, 240, 0.5); }
.variant-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 9px;
  background: #ff6b35;
  color: #1a1a1a;
  border: 2px solid #1a1a1a;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.variant-option-best .variant-badge {
  background: #1f5d3f;
  color: #fcfaf4;
}
@media (max-width: 480px) {
  .variant-options { grid-template-columns: repeat(2, 1fr); }
  .variant-option { padding: 14px 8px 12px; }
  .variant-option-size { font-size: 17px; }
  .variant-option-price { font-size: 17px; margin-top: 8px; }
}


/* ============== SUBSCRIBE & SAVE: TIERED CADENCE LADDER ============== */
.subscribe-section {
  margin: 16px 0 8px;
}
.subscribe-section-head {
  margin-bottom: 10px;
}
.subscribe-section-title {
  display: block;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #1a1a1a;
}
.subscribe-section-sub {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #6b6b6b;
  margin-top: 2px;
}
.subscribe-tiers {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.subscribe-tier {
  position: relative;
  display: block;
  background: #fff;
  border: 2.5px solid #1a1a1a;
  border-radius: 14px;
  padding: 13px 16px;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
}
.subscribe-tier:hover { background: #f0e8d8; }
.subscribe-tier input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.subscribe-tier.selected {
  background: #1a1a1a;
  color: #fcfaf4;
  box-shadow: 4px 4px 0 #ff6b35;
}
.subscribe-tier.selected:hover { background: #1a1a1a; }
.subscribe-tier-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.subscribe-tier-main { flex: 1; min-width: 0; }
.subscribe-tier-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.subscribe-tier-sub {
  font-size: 11.5px;
  color: #6b6b6b;
  font-weight: 600;
  margin-top: 2px;
}
.subscribe-tier.selected .subscribe-tier-sub { color: rgba(255, 248, 240, 0.7); }
.subscribe-tier-savings {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #1f5d3f;
  white-space: nowrap;
  padding: 4px 9px;
  background: #f0f5e8;
  border-radius: 999px;
  border: 1.5px solid #1f5d3f;
}
.subscribe-tier.selected .subscribe-tier-savings {
  background: #ff6b35;
  color: #1a1a1a;
  border-color: #ff6b35;
}
.subscribe-tier-savings:empty,
.subscribe-tier-savings:contains("—") {
  border: none;
  background: none;
  color: #999;
}
.subscribe-tier-badge {
  position: absolute;
  top: -10px;
  left: 16px;
  padding: 3px 10px;
  background: #ff6b35;
  color: #1a1a1a;
  border: 2px solid #1a1a1a;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.subscribe-tier-best .subscribe-tier-badge {
  background: #1f5d3f;
  color: #fcfaf4;
}
@media (max-width: 640px) {
  .subscribe-tier { padding: 11px 14px; }
  .subscribe-tier-title { font-size: 14px; }
  .subscribe-tier-savings { font-size: 11px; padding: 3px 8px; }
}

  /* ====================================================================
     Accessibility: respect prefers-reduced-motion (WCAG 2.3.3)
     ==================================================================== */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
    .reveal {
      opacity: 1 !important;
      transform: none !important;
    }
  }

  /* ====================================================================
     PDP gallery thumbs at narrow widths — horizontal scroll instead of cramped 5-col
     ==================================================================== */
  @media (max-width: 480px) {
    .gallery-thumbs {
      display: flex;
      overflow-x: auto;
      gap: 8px;
      padding-bottom: 4px;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
    }
    .gallery-thumbs::-webkit-scrollbar { height: 4px; }
    .gallery-thumbs::-webkit-scrollbar-thumb {
      background: rgba(26,26,26,0.3);
      border-radius: 4px;
    }
    .gallery-thumb {
      flex: 0 0 72px;
      width: 72px;
      height: 72px;
      scroll-snap-align: start;
      aspect-ratio: 1 / 1;
    }
  }




  /* ====================================================================
     MOBILE E-COMMERCE NORMALIZATION (standard phone patterns)
     ==================================================================== */

  /* ≤640px (phone) — 2-col product grids, tighter cards, compact hero */
  @media (max-width: 640px) {
    /* Product grids — 2 columns (standard e-comm on phone, NOT single col) */
    .products-grid {
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 10px !important;
    }
    /* Product cards — compact, tighter */
    .product-card {
      border-radius: 14px !important;
      border-width: 2px !important;
    }
    .product-image {
      height: 130px !important;
    }
    .product-body {
      padding: 10px !important;
    }
    .product-category {
      font-size: 10px !important;
      margin-bottom: 2px !important;
    }
    .product-name {
      font-size: 13px !important;
      margin-bottom: 2px !important;
      line-height: 1.15 !important;
    }
    .product-meta {
      font-size: 10px !important;
      margin-bottom: 4px !important;
    }
    .product-meta > span {
      font-size: 10px !important;
    }
    .product-rating {
      font-size: 10px !important;
    }
    .product-price {
      font-size: 14px !important;
      color: #1a1a1a !important;
    }
    .quick-add,
    .related-card-add {
      font-size: 11px !important;
      padding: 5px 8px !important;
    }
    .product-footer {
      gap: 4px !important;
    }
    .product-badge {
      font-size: 9px !important;
      padding: 3px 7px !important;
      top: 6px !important;
      left: 6px !important;
    }
    .product-fav {
      top: 6px !important;
      right: 6px !important;
    }
    /* Section padding — tighter */
    section {
      padding: 32px 14px !important;
    }
    /* Page-hero — tighter */
    .page-hero,
    .contact-hero,
    .about-hero,
    .bundles-hero,
    .faq-hero,
    .reviews-hero,
    .rewards-hero,
    .category-hero,
    .post-hero,
    .blog-hero {
      padding: 28px 16px 16px !important;
    }
    /* Headlines slightly tighter on mobile but readable */
    .page-hero h1,
    .contact-hero h1,
    .about-hero h1,
    .bundles-hero h1,
    .faq-hero h1,
    .reviews-hero h1,
    .rewards-hero h1,
    .category-hero h1,
    .post-hero h1,
    .blog-hero h1 {
      font-size: clamp(28px, 9vw, 42px) !important;
    }
    /* Buttons — bigger tap targets, full-ish width */
    .btn-primary,
    .btn-secondary,
    .vault-cta,
    .hero-cta-primary,
    .welcome-cta {
      padding: 12px 18px !important;
      font-size: 14px !important;
    }
    /* Container padding */
    .container {
      padding-left: 14px !important;
      padding-right: 14px !important;
    }
  }

  /* ≤480px (small phone) — even tighter */
  @media (max-width: 480px) {
    .product-image { height: 110px !important; }
    .product-name { font-size: 12px !important; }
    .product-price { font-size: 13px !important; }
    section { padding: 28px 12px !important; }
  }

  /* ≤380px (iPhone SE) — minimum sane */
  @media (max-width: 380px) {
    .products-grid {
      gap: 8px !important;
    }
    .product-image { height: 95px !important; }
    .product-body { padding: 8px !important; }
    .product-name { font-size: 11px !important; }
    .product-price { font-size: 12px !important; }
  }


  /* PDP-specific mobile layout */
  @media (max-width: 768px) {
    .product-main {
      grid-template-columns: minmax(0, 1fr) !important;
      gap: 20px !important;
      padding: 20px 14px !important;
    }
    .product-main > .gallery,
    .product-main > .buy-box { min-width: 0; }
    .gallery-main { height: 320px !important; }
    .gallery-main-image { background-size: cover !important; }
    .buy-box {
      padding: 0 !important;
    }
    .product-title {
      font-size: 24px !important;
    }
    .product-subtitle {
      font-size: 13px !important;
    }
    .product-stats {
      grid-template-columns: repeat(3, 1fr) !important;
      gap: 8px !important;
    }
    .stat-cell {
      padding: 10px 6px !important;
    }
    .stat-cell .value {
      font-size: 16px !important;
    }
    .variant-dropdown select {
      font-size: 13px !important;
    }
    .price-current { font-size: 28px !important; }
    .add-row {
      flex-wrap: wrap !important;
    }
    .add-btn {
      flex: 1 1 100% !important;
      order: 3 !important;
      padding: 14px !important;
    }
    .buy-trust {
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 8px !important;
    }
    .product-tabs { padding: 0 14px !important; }
    .tabs-nav {
      overflow-x: auto !important;
      flex-wrap: nowrap !important;
      scrollbar-width: none;
    }
    .tabs-nav::-webkit-scrollbar { display: none; }
    .tab-link {
      flex-shrink: 0 !important;
      padding: 10px 14px !important;
      font-size: 13px !important;
      white-space: nowrap !important;
    }
    /* Horizontal scroll rail: customers swipe right for more recs */
    .related-grid {
      display: flex !important;
      grid-template-columns: none !important;
      flex-wrap: nowrap !important;
      overflow-x: auto !important;
      -webkit-overflow-scrolling: touch !important;
      scrollbar-width: thin;
      scroll-snap-type: x mandatory;
      gap: 12px !important;
      padding-bottom: 8px;
    }
    .related-grid::-webkit-scrollbar { height: 4px; }
    .related-grid::-webkit-scrollbar-thumb { background: rgba(26,26,26,0.2); border-radius: 4px; }
    .related-card {
      flex: 0 0 60% !important;
      scroll-snap-align: start;
    }
    .related-card-img { height: 140px !important; }
  }
  @media (max-width: 480px) {
    .gallery-main { height: 260px !important; }
    .product-title { font-size: 20px !important; }
    .product-stats { gap: 6px !important; }
    .stat-cell .value { font-size: 14px !important; }
  }

/* ==========================================================================
   Shopify-style mobile normalization (appended for site-wide consistency)
   - 2-col product grids on phone (not 1-col)
   - 44px+ tap targets
   - Horizontal-scroll rails for related products / category chips / trust badges
   - Single-col forms on small screens
   - No emoji-only headings; readable type at small sizes
   ========================================================================== */
@media (max-width: 768px) {
  .products-grid,
  .product-grid,
  .related-grid,
  .related-products,
  .you-may-also-like { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .collections-grid,
  .categories-grid,
  .feel-grid,
  .effects-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .bundle-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; }
  /* Horizontal scroll rails — trust badges, category chips, related products on PDP */
  .badge-rail,
  .chip-rail,
  .pill-rail,
  .filter-chips,
  .trust-marquee,
  .category-chips {
    display: flex !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 10px !important;
    padding: 4px 22px 8px !important;
    margin: 0 -22px !important;
    scroll-snap-type: x mandatory !important;
  }
  .badge-rail::-webkit-scrollbar,
  .chip-rail::-webkit-scrollbar,
  .pill-rail::-webkit-scrollbar,
  .filter-chips::-webkit-scrollbar,
  .trust-marquee::-webkit-scrollbar,
  .category-chips::-webkit-scrollbar { display: none !important; }
}
@media (max-width: 640px) {
  section { padding: 40px 22px !important; }
  /* Tap targets — Shopify minimum is 44px */
  .btn-primary,
  .btn-secondary,
  .btn,
  button[type="submit"],
  .add-to-cart,
  .cta { min-height: 44px !important; padding: 12px 18px !important; }
  /* Product cards on phone — Shopify style */
  .product-card { border-radius: 14px !important; border-width: 2px !important; }
  .product-image,
  .product-thumb { height: 130px !important; }
  .product-body { padding: 10px !important; }
  .product-name,
  .product-title { font-size: 13px !important; line-height: 1.3 !important; }
  .product-price { font-size: 14px !important; }
  /* Single-col forms on phone */
  .form-grid,
  .form-row,
  .checkout-grid,
  .cart-grid,
  .account-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  /* Headings — keep readable on phone */
  h1, .h1 { font-size: clamp(28px, 8vw, 40px) !important; line-height: 1.05 !important; }
  h2, .h2 { font-size: clamp(22px, 6.5vw, 32px) !important; line-height: 1.1 !important; }
  /* Hero CTAs stack full-width on phone */
  .hero-ctas,
  .cta-group { flex-direction: column !important; }
  .hero-ctas .btn-primary,
  .hero-ctas .btn-secondary,
  .cta-group .btn { width: 100% !important; justify-content: center !important; }
}

/* Dark variant of .dd-tag — dark bg, orange text. Used on the Bulk dropdown
   item so it visually distinguishes from the Bundles tag (orange bg, dark text).
   Matches the BULK badge palette used on the bulk product cards. */
.dd-tag.dd-tag-dark {
  background: #1a1a1a;
  color: #ff6b35;
}

/* Points-earn at the decision point (competitor teardown takeaway) */
.earn-pts-line { display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:#1f5d3f; margin:10px 0 2px; }
.earn-pts-line iconify-icon { color:#ff6b35; font-size:16px; }
.earn-pts-line strong { font-weight:800; }

/* Low-stock note — shown when wc_get_low_stock_amount()'s threshold is
   met (see $low_stock in single-product.php); urgency without implying
   the item is unavailable, unlike the grey out-of-stock badge. */
.stock-low-note { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:#c93838; margin:6px 0 0; }
.stock-low-note iconify-icon { font-size:15px; }
.variant-option-low {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #c93838;
  white-space: nowrap;
}
.variant-option.selected .variant-option-low { color: #ffb3b3; }

/* Stock-limit toast — bottom-center, matches the cart page's .cart-toast
   component (cart.css) so the same "you hit the cap" moment looks and
   behaves the same across both pages. */
.hb-stock-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 24px);
  padding: 12px 20px;
  background: #1a1a1a;
  color: #fcfaf4;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 9999;
  max-width: calc(100vw - 32px);
}
.hb-stock-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
@media (prefers-reduced-motion: reduce) {
  .hb-stock-toast { transition: opacity 0.01s; transform: translate(-50%, 0); }
}


/* ---- Reorder reminder (replaces the old Subscribe & Save ladder; non-recurring, no discount) ---- */
.reorder-reminder { border: 2px solid #1a1a1a; border-radius: 16px; background: #fff; padding: 16px; margin: 4px 0 18px; box-shadow: 3px 3px 0 #1a1a1a; }
.reorder-reminder-head { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.reorder-reminder-icon { font-size: 22px; color: #1f5d3f; flex-shrink: 0; margin-top: 1px; }
.reorder-reminder-title { font-weight: 800; font-size: 15px; letter-spacing: -0.01em; }
.reorder-reminder-sub { font-size: 12.5px; color: #6b6b6b; line-height: 1.4; margin-top: 2px; }
.reorder-reminder-options { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.reorder-pill { position: relative; cursor: pointer; }
.reorder-pill input { position: absolute; opacity: 0; pointer-events: none; }
.reorder-pill span { display: inline-block; padding: 7px 14px; border: 2px solid #1a1a1a; border-radius: 980px; font-size: 13px; font-weight: 700; background: #faf7f0; transition: background 0.15s, color 0.15s; }
.reorder-pill input:checked + span { background: #1f5d3f; color: #fcfaf4; }
.reorder-pill input:focus-visible + span { outline: 2px solid #ff6b35; outline-offset: 2px; }
.reorder-reminder-btn { display: inline-flex; align-items: center; gap: 7px; width: 100%; justify-content: center; padding: 11px 16px; border: 2px solid #1a1a1a; border-radius: 980px; background: #fcfaf4; font-weight: 800; font-size: 14px; cursor: pointer; box-shadow: 2px 2px 0 #1a1a1a; transition: transform 0.12s, box-shadow 0.12s, background 0.15s; }
.reorder-reminder-btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 #1a1a1a; }
.reorder-reminder.is-set .reorder-reminder-btn { background: #7fb069; }
.reorder-reminder.is-set .reorder-reminder-options { opacity: 0.55; pointer-events: none; }




/* COPIED FROM THE SINGLE PRODUCT PHP */
.happybud-single-product .add-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}
.happybud-single-product .qty-wrap {
    display: inline-flex;
    align-items: center;
    border: 2px solid #1a1a1a;
    border-radius: 999px;
    overflow: hidden;
    flex-shrink: 0;
    height: 48px;
    background: #fff;
}
.happybud-single-product .qty-wrap button {
    all: unset;
    width: 40px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
    cursor: pointer;
    color: #1a1a1a;
    background: transparent;
    border: none;
    padding: 0;
    line-height: 1;
}
.happybud-single-product .qty-wrap button:hover {
    background: #f5f0e8;
}
.happybud-single-product .qty-wrap button:disabled {
    color: #c4c4c4;
    cursor: not-allowed;
}
.happybud-single-product .qty-wrap button:disabled:hover {
    background: transparent;
}
.happybud-single-product .qty-wrap input#qty {
    all: unset;
    width: 32px;
    text-align: center;
    font-size: 16px;
    font-weight: 800;
    color: #1a1a1a;
    border: none;
    background: transparent;
    padding: 0;
    height: 48px;
}
/* ── Add to bag button — no bg change on hover ── */
.happybud-single-product .add-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    background: #1a1a1a;
    color: #ff6b35;
    border: 2px solid #1a1a1a;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
    padding: 0 20px;
    min-width: 0;
}
.happybud-single-product .add-btn:hover,
.happybud-single-product .add-btn:focus {
    background: #1a1a1a;
    color: #ff6b35;
    outline: none;
}
.happybud-single-product .add-btn:disabled {
    background: #ccc;
    border-color: #999;
    color: #6b6b6b;
    cursor: not-allowed;
}
.happybud-single-product .add-btn:disabled:hover {
    background: #ccc;
    color: #6b6b6b;
}
/* ── Fav button — proper circle ── */
.happybud-single-product .fav-btn {
    all: unset;
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    border: 2px solid #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    color: #1a1a1a;
    background: #fff;
    flex-shrink: 0;
    box-sizing: border-box;
}
.happybud-single-product .fav-btn:hover {
    background: #f5f0e8;
}
/* ── Tabs — no bg on hover ── */
.happybud-single-product .tab-link {
    background: transparent;
    border: none;
    cursor: pointer;
}
.happybud-single-product .tab-link:hover {
    background: transparent;
}
/* ── Reorder reminder button — no color change on hover ── */
.happybud-single-product .reorder-reminder-btn:hover {
    background: transparent;
    color: inherit;
}
/* ── Tab pane padding top ── */
.happybud-single-product .tab-pane {
    padding-top: 28px;
}
/* ── See all reviews bottom padding ── */
.happybud-single-product .reviews-see-all {
    text-align: center;
    margin-top: 24px;
    padding-bottom: 32px;
}
/* ── Product attributes block ── */
.happybud-single-product .product-attrs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 18px;
}
.happybud-single-product .product-attr-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #f5f0e8;
    border: 1.5px solid #e0d8c8;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.4;
}
.happybud-single-product .product-attr-chip .attr-label {
    color: #6b6b6b;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.04em;
}

/* ═══════════ MOBILE ═══════════ */
@media (max-width: 767px) {

    /* Breadcrumb: wrap nicely, smaller text */
    .happybud-single-product .product-breadcrumb {
        font-size: 11px;
        flex-wrap: wrap;
        gap: 3px 4px;
        padding: 10px 16px;
        line-height: 1.6;
    }

    /* Gallery full width */
    .happybud-single-product .gallery,
    .happybud-single-product .gallery-main,
    .happybud-single-product .gallery-main-image {
        width: 100%;
    }

    /* Earn pts line: wrap text, smaller */
    .happybud-single-product .earn-pts-line {
        font-size: 12px;
        flex-wrap: wrap;
        gap: 2px;
        line-height: 1.6;
    }

    /* Add row: wrap so qty is full row on very small screens */
    .happybud-single-product .add-row {
        flex-wrap: wrap;
        gap: 8px;
    }
    .happybud-single-product .add-row .qty-wrap {
        flex: 0 0 auto;
    }
    .happybud-single-product .add-row .add-btn {
        flex: 1 1 auto;
    }
    .happybud-single-product .add-row .fav-btn {
        flex-shrink: 0;
    }
}







/* ════════════════════════════════════════════
   VIDEO POPUP — lightbox player
   Follows site design language:
   dark backdrop, white box, 3px solid #1a1a1a
   border, brand orange close button accent.
════════════════════════════════════════════ */

/* Backdrop — full screen dark overlay */
.video-popup {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}
.video-popup.open {
    display: flex;
}

/* Prevent body scroll when popup is open */
body.video-popup-open {
    overflow: hidden;
}

/* Clickable dark backdrop */
.video-popup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(26, 26, 26, 0.88);
    cursor: pointer;
}

/* Popup box — site card style */
.video-popup-box {
    position: relative;
    width: 100%;
    max-width: 900px;
    background: #1a1a1a;
    border: 3px solid #1a1a1a;
    border-radius: 24px;
    box-shadow: 8px 8px 0 #ff6b35;
    overflow: hidden;
    z-index: 1;
}

/* Close button — top right, brand orange */
.video-popup-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    background: none;
    border: none;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}
.video-popup-close:hover {
    color: #ff6b35;
}

/* Player area — 16:9 ratio */
.video-popup-player {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #1a1a1a;
}
.video-popup-player iframe,
.video-popup-player video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    border: none;
}

/* ── Video thumbnail in the thumb strip ── */
.gallery-thumb-video {
    position: relative;
    cursor: pointer;
}
.gallery-thumb-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    border-radius: inherit;
    transition: background 0.2s;
}
.gallery-thumb-video:hover .gallery-thumb-play {
    background: rgba(0, 0, 0, 0.55);
}
.gallery-thumb-play iconify-icon {
    font-size: 28px;
    color: #fff;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

/* Mobile */
@media (max-width: 600px) {
    .video-popup {
        padding: 16px;
    }
    .video-popup-box {
        border-radius: 16px;
        box-shadow: 5px 5px 0 #ff6b35;
    }
    .video-popup-close {
        top: 8px;
        right: 8px;
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
}

/* ── Play overlay on main gallery when video thumb is active via arrow ── */
.gallery-video-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.25);
    cursor: pointer;
    z-index: 2;
    transition: background 0.2s;
}
.gallery-video-overlay:hover {
    background: rgba(0, 0, 0, 0.45);
}
.gallery-video-play-btn {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #ff6b35;
    border: 3px solid #1a1a1a;
    box-shadow: 4px 4px 0 #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1a1a;
    font-size: 32px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.gallery-video-overlay:hover .gallery-video-play-btn {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 #1a1a1a;
}

.gallery-thumb-video.popup-active {
    opacity: 1;
    border-color: #ff6b35;
    border-width: 3px;
}



/* ════════════════════════════════════════════
   VARIANT SELECTOR — weight pills
════════════════════════════════════════════ */

.variant-section {
    margin-bottom: 18px;
}

.variant-label {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
    color: #1a1a1a;
}

.variant-options {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax( 110px, 1fr ) );
    gap: 10px;
}

.variant-option {
    position: relative;
    display: block;
    background: #fff;
    border: 2.5px solid #1a1a1a;
    border-radius: 14px;
    padding: 16px 10px 14px;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
}
.variant-option:hover {
    background: #f0e8d8;
}
.variant-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.variant-option.selected {
    background: #1a1a1a;
    color: #fcfaf4;
    box-shadow: 5px 5px 0 #ff6b35;
}
.variant-option.selected:hover {
    background: #1a1a1a;
}

.variant-option-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.variant-option-main {
    width: 100%;
}
.variant-option-size {
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1;
}
.variant-option-sub {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6b6b6b;
    margin-top: 4px;
}
.variant-option.selected .variant-option-sub {
    color: rgba( 255, 248, 240, 0.7 );
}
.variant-option-price {
    font-size: 18px;
    font-weight: 900;
    letter-spacing: -0.02em;
    margin-top: 10px;
}
.variant-option-was {
    display: block;
    font-size: 11px;
    color: #999;
    text-decoration: line-through;
    font-weight: 600;
    margin-top: 2px;
}
.variant-option.selected .variant-option-was {
    color: rgba( 255, 248, 240, 0.5 );
}

@media ( max-width: 640px ) {
    .variant-options {
        grid-template-columns: repeat( 2, 1fr );
    }
    .variant-option {
        padding: 12px 8px;
    }
    .variant-option-size {
        font-size: 17px;
    }
    .variant-option-price {
        font-size: 16px;
    }
}


/* ========================================
   BUNDLE CONTENTS — single bundle product page
   Read-only "what's included" list for fixed-content Smart Bundles.
   Visual language borrowed from design-package/product-byo.html's
   .byo-picker, but deliberately its own class names (no steppers, no
   picked/total counter) since these bundles have nothing to choose.
   ======================================== */
.bundle-contents {
    border: 2.5px solid #1a1a1a;
    border-radius: 16px;
    padding: 16px 18px 12px;
    margin: 0 0 20px;
    background: #fff;
}
.bundle-contents-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.bundle-contents-title {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #888;
}
.bundle-contents-count {
    font-size: 12.5px;
    font-weight: 900;
    background: #1a1a1a;
    color: #fcfaf4;
    padding: 4px 12px;
    border-radius: 980px;
}
.bundle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-top: 1.5px dashed #eee6d8;
}
.bundle-row:first-of-type {
    border-top: none;
}
.bundle-row-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.bundle-row-name {
    font-size: 14.5px;
    font-weight: 800;
    color: #1a1a1a;
}
.bundle-row-meta {
    font-size: 12px;
    font-weight: 600;
    color: #888;
}
.bundle-row-meta strong {
    color: #ff6b35;
    font-weight: 800;
}
.bundle-row-qty {
    font-size: 13px;
    font-weight: 900;
    color: #1f5d3f;
    flex-shrink: 0;
}