/* Herbalson Bundle & Rating — uses the theme tokens from main.css */

/* Rating under the title */
.hsb-rating {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 2px 0 14px;
    font-size: .9375rem;
    color: var(--color-text, #0a0a0a);
    text-decoration: none;
}
.hsb-rating:hover .hsb-rating-count { color: var(--color-text, #0a0a0a); text-decoration: underline; }
.hsb-stars { display: inline-flex; gap: 2px; }
.hsb-star {
    position: relative;
    width: 18px;
    height: 18px;
    background: #e5e7eb;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.94 5.96 6.56.95-4.75 4.63 1.12 6.54L12 17.5l-5.87 3.08 1.12-6.54L2.5 9.41l6.56-.95z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.94 5.96 6.56.95-4.75 4.63 1.12 6.54L12 17.5l-5.87 3.08 1.12-6.54L2.5 9.41l6.56-.95z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hsb-star-fill { position: absolute; inset: 0 auto 0 0; background: #f5a623; }
.hsb-rating-val { font-weight: 700; }
.hsb-rating-count { color: var(--color-text-light, #6b7280); transition: color var(--transition, .2s ease); }
.reviews-carousel-star.hsb-star-off { color: #e5e7eb; }

/* Reviews carousel controls (dots are created by bundle.js) */
.reviews-carousel-track { scroll-snap-type: x mandatory; scroll-behavior: smooth; }
.reviews-carousel-card { scroll-snap-align: start; }
.reviews-carousel-dots { display: flex; gap: 6px; flex-wrap: wrap; }
.hsb-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 100px;
    background: var(--color-border, #e5e7eb);
    cursor: pointer;
    transition: width var(--transition, .2s ease), background var(--transition, .2s ease);
}
.hsb-dot.is-active { width: 22px; background: var(--color-text, #0a0a0a); }
.reviews-carousel-arrow[disabled] { opacity: .35; cursor: default; }
.hsb-carousel-static .reviews-carousel-nav { display: none; }

/* Frequently bought together — full-width row of the product card grid */
.sp-layout > .hsb-bundle,
.sp-layout > .hsb-badges-cell,
.sp-layout > .hsb-details { grid-column: 1 / -1; }
.hsb-bundle {
    padding: 28px 0 4px;
    border-top: 1px solid var(--color-border, #e5e7eb);
}

/* Badges: one strip across the page */
.hsb-badges-cell .sp-badges {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    margin-top: 0;
    padding: 28px 0;
    border-top: 1px solid var(--color-border, #e5e7eb);
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}

/* Benefits | How to take → feature cards → FAQ */
.hsb-details { display: flex; flex-direction: column; gap: 56px; padding: 48px 0 64px; }
.hsb-details .sp-advantages,
.hsb-details .sp-how-to-take,
.hsb-details .sp-features-grid,
.hsb-details .sp-faq { margin-bottom: 0; }
.hsb-details .sp-section-title { font-size: .875rem; margin-bottom: 20px; }

.hsb-intro { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.hsb-intro--single { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.hsb-details .sp-check-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; }
.hsb-details .sp-check-list li { align-items: flex-start; line-height: 1.5; }
.hsb-howto-card {
    padding: 28px;
    background: var(--color-bg-card, #f5f5f5);
    border-radius: var(--radius, 12px);
}
.hsb-howto-card .sp-how-to-take p { color: var(--color-text, #0a0a0a); font-size: 1rem; }

.hsb-details .sp-features-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.hsb-details .sp-feature-card { padding: 28px; }
.hsb-details .sp-feature-card h4 { font-size: 1.0625rem; }
.hsb-details .sp-feature-card p { font-size: .9375rem; }

.hsb-details .sp-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: 48px; align-items: start; }
.hsb-details .sp-faq > .sp-section-title { grid-column: 1; grid-row: 1 / span 50; position: sticky; top: 120px; font-size: 1.5rem; letter-spacing: -.01em; text-transform: none; }
.hsb-details .sp-faq > .sp-faq-item { grid-column: 2; }
.hsb-details .sp-faq > .sp-faq-item:first-of-type { border-top: 1px solid var(--color-border, #e5e7eb); }

.hsb-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.hsb-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; margin: 0; }
.hsb-badge {
    background: var(--color-accent, #4a9a4a);
    color: #fff;
    font-size: .8125rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 100px;
    white-space: nowrap;
}
.hsb-badge span { font-weight: 500; }
.hsb-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: stretch;
}
.hsb-items {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius, 12px);
}
.hsb-item { position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 16px; }
.hsb-item-tag {
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--color-accent, #4a9a4a);
}
.hsb-item-img {
    flex: 0 0 120px;
    display: block;
    aspect-ratio: 3 / 4;
    background: var(--color-bg-card, #f5f5f5);
    border-radius: var(--radius-sm, 8px);
    overflow: hidden;
}
.hsb-item-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.hsb-item-img:hover img { transform: scale(1.04); }
.hsb-item-text { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.hsb-item-name {
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--color-text, #0a0a0a);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hsb-item-name:hover { text-decoration: underline; }
.hsb-item-price { font-weight: 700; font-size: 1rem; }
.hsb-plus { flex: 0 0 auto; font-size: 1.5rem; font-weight: 300; color: var(--color-text-light, #6b7280); }

.hsb-summary {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px;
    background: var(--color-bg-card, #f5f5f5);
    border-radius: var(--radius, 12px);
}
.hsb-total-label { font-size: .8125rem; color: var(--color-text-light, #6b7280); margin-bottom: 4px; }
.hsb-prices { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.hsb-new { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.hsb-old { font-size: 1rem; color: var(--color-text-light, #6b7280); }
.hsb-save { color: var(--color-accent, #4a9a4a); font-weight: 600; font-size: .9375rem; margin: 2px 0 16px; }
.hsb-add {
    display: block;
    width: 100%;
    padding: 14px 20px;
    border: none;
    border-radius: 100px;
    background: var(--color-accent, #4a9a4a);
    color: #fff;
    font: 600 .9375rem var(--font-family, inherit);
    cursor: pointer;
    transition: background var(--transition, .2s ease);
}
.hsb-add:hover { background: var(--color-accent-hover, #3d8240); }
.hsb-add[disabled] { opacity: .7; cursor: progress; }
.hsb-note { font-size: .75rem; color: var(--color-text-light, #6b7280); text-align: center; margin-top: 8px; }
.hsb-error { color: #ef4444; font-size: .8125rem; text-align: center; margin-top: 8px; }

/* Theme fix: grid items default to min-width:auto, so the 768px gallery image
   stretched the single mobile column past the screen (page 492px wide at 375px). */
.sp-layout > * { min-width: 0; }

@media (max-width: 1360px) {
    .hsb-item { gap: 12px; }
    .hsb-item-img { flex-basis: 90px; }
    .hsb-item-name { font-size: .875rem; }
}
@media (max-width: 640px) {
    .hsb-items { align-items: flex-start; }
    .hsb-plus { align-self: center; }
    .hsb-item { flex-direction: column; align-items: stretch; gap: 8px; }
    .hsb-item-text { gap: 4px; }
    .hsb-item-img { flex: none; }
    .hsb-item-name { -webkit-line-clamp: 2; }
}
@media (max-width: 1024px) {
    .hsb-body { grid-template-columns: 1fr; }
    .hsb-badges-cell .sp-badges { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .hsb-intro { grid-template-columns: 1fr; gap: 32px; }
    .hsb-details .sp-features-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hsb-details .sp-faq { grid-template-columns: 1fr; }
    .hsb-details .sp-faq > .sp-section-title { grid-column: 1; grid-row: auto; position: static; font-size: .875rem; text-transform: uppercase; letter-spacing: .05em; }
    .hsb-details .sp-faq > .sp-faq-item { grid-column: 1; }
}
/* Tablets: summary as one row — price on the left, button on the right */
@media (max-width: 1024px) and (min-width: 561px) {
    .hsb-summary {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "label btn" "prices btn" "save btn" "note note";
        column-gap: 24px;
        align-items: center;
    }
    .hsb-total-label { grid-area: label; }
    .hsb-prices { grid-area: prices; }
    .hsb-save { grid-area: save; margin-bottom: 0; }
    .hsb-add { grid-area: btn; width: auto; padding: 14px 32px; }
    .hsb-note { grid-area: note; text-align: left; margin-top: 12px; }
    .hsb-error { grid-column: 1 / -1; text-align: left; }
}

/* Tablets: the theme puts the sidebar cards in a 2-column grid and stretches
   "Subscribe" to the height of the price card. Stack Subscribe + store card on the right. */
@media (max-width: 1024px) and (min-width: 769px) {
    .sp-sidebar-inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "price sub" "price store" "price .";
        grid-template-rows: auto auto 1fr;
        align-items: start;
    }
    .sp-sidebar-inner > .sp-price-card { grid-area: price; }
    .sp-sidebar-inner > .sp-sub-card { grid-area: sub; }
    .sp-sidebar-inner > .sp-store-card { grid-area: store; }
}

/* Phones: gallery → bundle → badges → buy buttons → title…specs → details → sidebar
   (the theme's sticky bottom bar keeps "Add to cart" on screen) */
@media (max-width: 768px) {
    .sp-layout > .sp-gallery { order: 1; }
    .sp-layout > .hsb-bundle { order: 2; }
    .sp-layout > .hsb-badges-cell { order: 3; }
    .sp-layout > .sp-mobile-cta { order: 4; }
    .sp-layout > .sp-info { order: 5; }
    .sp-layout > .hsb-details { order: 6; }
    .sp-layout > .sp-sidebar { order: 7; }
    .hsb-badges-cell .sp-badges { padding: 20px 0 0; border-bottom: 0; }
    .sp-layout > .sp-mobile-cta { padding-top: 0; }
    .hsb-bundle { padding-top: 0; border-top: 0; }
    .hsb-details { gap: 36px; padding-top: 8px; }
    .hsb-details .sp-check-list { grid-template-columns: 1fr; gap: 12px; }
    .hsb-howto-card { padding: 20px; }
    .hsb-details .sp-features-grid { grid-template-columns: 1fr; gap: 12px; }
    .hsb-details .sp-feature-card { padding: 20px; }
    .hsb-title { font-size: 1.25rem; }
    .hsb-items { padding: 12px; gap: 6px; }
    .hsb-plus { font-size: 1.125rem; }
    .hsb-item-name { font-size: .8125rem; }
    .hsb-new { font-size: 1.75rem; }
}