/* Salus Biosciences: video hero (same height and proportions as the original layout) and silver/blue accents.
   Loaded after style.css and mobile.css. The hero keeps the original .hero-grid sizing; only the background is a video. */
:root { --silver: #c3ccd6; --silver-dark: #9fadbb; }

.hero--video { background: var(--navy-deep); }
.hero-video { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--navy-deep) url('/assets/video/hero-poster.jpg') 50% 38% / cover no-repeat; }
.hero-video video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }

/* Dark blue overlay: stronger behind the text on the left, lighter on the right so the footage stays visible. */
.hero--video::before { z-index: 1; opacity: .08; mask-image: none; }
.hero--video::after { content: ""; position: absolute; z-index: 1; inset: 0; width: auto; pointer-events: none; background-color: transparent; background-image: linear-gradient(90deg, rgba(4, 28, 49, .86) 0%, rgba(8, 42, 73, .74) 45%, rgba(8, 42, 73, .5) 100%), linear-gradient(0deg, rgba(4, 28, 49, .35), rgba(4, 28, 49, 0) 40%); background-size: auto; background-position: 0 0; }
.hero--video .hero-grid { z-index: 2; }
.hero--video .hero-copy { text-shadow: 0 1px 18px rgba(4, 28, 49, .45); }
.hero--video .hero-index { z-index: 2; }

/* Wide screens: the headline sits over the left half, so the footage is enlarged and anchored left to move the microscope into the clear right half. */
@media (min-width: 1020px) {
    .hero-video video { width: 124%; object-position: 38% 36%; }
    .hero-video { background-position: 38% 36%; }
}

/* Silver on dark, blue on light. */
.hero--video .hero-copy .eyebrow span { background: var(--silver); }
.hero--video .hero-meta i { color: var(--silver); }
.hero--video .hero-copy .eyebrow { color: #dbe3ea; }
.hero--video .button--outline { border-color: rgba(195, 204, 214, .7); }
.hero--video .button--outline:hover { background: rgba(195, 204, 214, .14); }

@media (max-width: 767px) {
    .hero-video { background-image: url('/assets/video/hero-poster-mobile.jpg'); background-position: 50% 30%; }
    .hero-video video { object-position: 50% 30%; }
    .hero--video::after { background-image: linear-gradient(180deg, rgba(4, 28, 49, .74) 0%, rgba(8, 42, 73, .56) 50%, rgba(4, 28, 49, .8) 100%); }
}
@media (prefers-reduced-motion: reduce) { .hero-video video { display: none; } }

/* Under-21 page */
.minor-page { padding: 56px 0 72px; }
.minor-card { max-width: 880px; margin: 0 auto; }
.minor-card h1 { margin-bottom: 14px; font-size: clamp(30px, 6vw, 46px); line-height: 1.1; }
.minor-card p { max-width: 640px; color: var(--slate); font-size: 17px; line-height: 1.65; }
.minor-video { position: relative; width: 100%; margin-top: 28px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 5px; background: var(--navy-deep); box-shadow: var(--shadow); }
.minor-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.minor-card .minor-note { margin-top: 16px; font-size: 14px; }

/* Salus logo: the supplied logo is 3.4:1, so it is sized by height to keep the original header footprint. */
.brand { width: auto; }
.brand img { width: auto; height: 46px; }
.footer-brand img { width: 180px; height: auto; }
.age-gate__logo { width: 210px; height: auto; }
.admin-brand img { width: 190px; height: auto; }
.admin-login-logo { width: 230px; height: auto; }
@media (min-width: 768px) { .brand img { height: 50px; } .footer-brand img { width: 200px; } }
@media (min-width: 1020px) { .brand img { height: 62px; } }

/* Show/hide password on the customer sign-in, registration and reset forms */
.stack-form .password-field { position: relative; display: block; }
.stack-form .password-field input { width: 100%; padding-right: 52px; }
.stack-form .password-toggle { position: absolute; top: 50%; right: 6px; display: grid; width: 40px; height: 40px; padding: 0; color: #5b6875; background: none; border: 0; border-radius: 4px; place-items: center; transform: translateY(-50%); font-size: 20px; cursor: pointer; }
.stack-form .password-toggle:hover { color: var(--navy); background: #eef3f8; }

/* Quantity box with minus / plus buttons (rectangular, 44px touch targets) */
.qty-stepper { display: inline-flex; align-items: stretch; border: 1px solid #cbd5dd; border-radius: 4px; background: #fff; overflow: hidden; }
.qty-stepper input { width: 56px; min-height: 46px; padding: 0 4px; color: #0f1d2b; text-align: center; background: #fff; border: 0; border-left: 1px solid #e2e8ee; border-right: 1px solid #e2e8ee; border-radius: 0; font-size: 16px; font-weight: 700; -moz-appearance: textfield; appearance: textfield; }
.qty-stepper input::-webkit-outer-spin-button, .qty-stepper input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.qty-stepper__btn { display: grid; width: 46px; min-height: 46px; padding: 0; color: #0f1d2b; background: #f3f6f9; border: 0; border-radius: 0; place-items: center; font-size: 16px; cursor: pointer; }
.qty-stepper__btn:hover:not(:disabled) { color: #fff; background: var(--blue, #2b7fc1); }
.qty-stepper__btn:disabled { color: #a8b3be; cursor: not-allowed; }
.qty-stepper:focus-within { border-color: var(--blue, #2b7fc1); box-shadow: 0 0 0 3px rgba(43, 127, 193, .15); }
.cart-item .qty-stepper input { width: 52px; }

/* Product page: size picker and buy row */
.product-detail-purchase--sizes, .product-detail-purchase { flex-direction: column; align-items: stretch; gap: 18px; }
.product-detail-purchase > strong { font-size: 34px; line-height: 1.1; }
.size-picker { display: grid; gap: 8px; }
.size-picker__label, .buy-qty__label { color: #5b6875; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.size-picker__options { display: flex; flex-wrap: wrap; gap: 8px; }
.size-option { display: inline-flex; min-width: 64px; min-height: 44px; padding: 0 16px; color: var(--navy, #0b2a49); background: #fff; border: 1px solid #cbd5dd; border-radius: 4px; align-items: center; justify-content: center; font-weight: 700; text-decoration: none; }
.size-option:hover { border-color: var(--blue, #2b7fc1); }
.size-option.is-selected { color: #fff; background: var(--blue, #2b7fc1); border-color: var(--blue, #2b7fc1); }
.size-option.is-unavailable { color: #8a96a3; text-decoration: line-through; }
.size-option.is-unavailable.is-selected { color: #fff; text-decoration: none; opacity: .75; }
.buy-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.buy-qty { display: grid; gap: 8px; }
.buy-row .button { flex: 1; min-width: 180px; min-height: 48px; }
.buy-row .button:disabled { opacity: .55; cursor: not-allowed; }
@media (max-width: 520px) { .buy-row { flex-direction: column; align-items: stretch; } .buy-qty { width: 100%; } .buy-row .qty-stepper { width: 100%; } .buy-row .qty-stepper input { flex: 1; width: auto; } }

/* Cart rows: leave room for the quantity box with its minus / plus buttons */
@media (min-width: 700px) {
    .cart-item { grid-template-columns: 1fr 156px 100px; }
    .cart-heading { grid-template-columns: 1fr 156px 100px; }
    .cart-item > label { justify-self: start; }
}

/* Release 2: price block, Bundle & Save cards, cart notes */
.product-detail-purchase form { display: grid; align-items: stretch; gap: 18px; }
.buy-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.buy-price > strong { font-size: 38px; line-height: 1.05; }
.buy-price s { color: #7b8794; font-size: 18px; }
.save-chip { padding: 3px 10px; color: #fff; background: #c0392b; border-radius: 3px; font-size: 13px; font-weight: 800; }
.buy-each { color: #5b6875; font-size: 15px; }
.buy-qty .qty-stepper { justify-self: start; }
.bundle { display: grid; gap: 8px; }
.bundle__label { color: #5b6875; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.bundle__options { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; }
.bundle-card { position: relative; display: grid; min-height: 62px; padding: 14px 12px 10px; color: #0f1d2b; background: #fff; border: 1px solid #cbd5dd; border-radius: 4px; text-align: left; gap: 2px; font: inherit; cursor: pointer; }
.bundle-card:hover:not(:disabled) { border-color: var(--blue, #2b7fc1); }
.bundle-card:disabled { opacity: .5; cursor: not-allowed; }
.bundle-card.is-active { border: 2px solid var(--navy, #0b2a49); padding: 13px 11px 9px; box-shadow: 0 0 0 3px rgba(43, 127, 193, .14); }
.bundle-card__title { font-size: 15px; font-weight: 800; }
.bundle-card__sub { color: #5b6875; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.bundle-card__sub--off { color: #b3261e; }
.bundle-card__badge { position: absolute; top: -9px; left: 10px; padding: 2px 8px; color: #fff; background: var(--navy, #0b2a49); border-radius: 3px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.buy-button { width: 100%; min-height: 52px; justify-content: center; }
.buy-button:disabled { opacity: .55; cursor: not-allowed; }
.buy-button-total { font-weight: 800; }
.bundle-note s { color: #7b8794; }
.bundle-note b { color: #b3261e; font-weight: 800; }
.bundle-hint { margin-top: 4px; color: #2b7fc1; font-size: 13px; font-weight: 700; }
.order-summary .summary-saving { color: #b3261e; }
@media (max-width: 520px) { .buy-qty .qty-stepper { width: 100%; } .buy-qty .qty-stepper input { flex: 1; width: auto; } .buy-price > strong { font-size: 34px; } }

/* Release 3: coupon box on checkout; desktop bundle cards on one row */
.coupon-box { margin: 16px 0 6px; padding: 14px 0 4px; border-top: 1px solid var(--line, #d9e0e8); }
.coupon-form label { display: block; margin-bottom: 6px; color: #5b6875; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.coupon-form__row { display: flex; gap: 8px; }
.coupon-form__row input { flex: 1; min-width: 0; min-height: 46px; padding: 0 12px; border: 1px solid #cbd5dd; border-radius: 4px; font-size: 16px; text-transform: uppercase; letter-spacing: .04em; }
.coupon-form__row .button { min-height: 46px; padding: 0 18px; }
.coupon-applied { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; color: #14573a; background: #e4f5ec; border: 1px solid #b9e2cd; border-radius: 4px; }
.coupon-applied form { margin: 0; }
.coupon-applied .text-button { padding: 4px 6px; color: #14573a; font-weight: 700; text-decoration: underline; background: none; border: 0; cursor: pointer; }
.checkout-summary__row--saving { color: #14573a; font-weight: 700; }
@media (min-width: 700px) { .bundle__options { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); } }

/* Product page layout: image, then catalog facts, then description (left); title, price and buying (right).
   On phones everything stacks: image, title, buy box, facts, description. */
.product-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.product-detail-copy { display: contents; }
.product-gallery { order: 1; }
.product-head { order: 2; margin-top: 22px; }
.product-buy { order: 3; }
.product-facts { order: 4; margin-top: 26px; }
.product-facts .product-records { margin-top: 0; }
.product-records strong { overflow-wrap: anywhere; }
.product-about { order: 5; margin-top: 26px; }
.product-about__label { margin: 0 0 10px; color: var(--slate, #5b6875); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.product-about .product-detail-description { margin: 0; font-size: 16px; line-height: 1.7; }
.product-head .product-back { margin-bottom: 18px; }
.product-head h1 { margin-top: 14px; }
@media (min-width: 700px) {
    .product-facts .product-records { grid-template-columns: repeat(4, 1fr); }
    .product-about .product-detail-description { font-size: 17px; }
}
@media (min-width: 1020px) {
    .product-detail-grid { grid-template-columns: minmax(0, 1fr) minmax(420px, .85fr); column-gap: 80px; grid-template-rows: auto auto 1fr; }
    .product-gallery { grid-column: 1; grid-row: 1; order: 0; }
    .product-facts { grid-column: 1; grid-row: 2; order: 0; margin-top: 28px; }
    .product-about { grid-column: 1; grid-row: 3; order: 0; margin-top: 30px; }
    .product-detail-copy { display: block; grid-column: 2; grid-row: 1 / span 3; align-self: start; position: sticky; top: 150px; padding-top: 20px; }
    .product-head, .product-buy { order: 0; margin-top: 0; }
}