/**
 * Summit Peak Labs V10 - Custom CSS
 * Additional styles that complement Tailwind CSS
 */

/* ==========================================================================
   Color Fallbacks (when Tailwind CDN blocked or fails - ad blockers, slow
   networks, different regions). Ensures brand colors still display correctly.
   ========================================================================== */

.bg-\[\#6bb3fb\] { background-color: #6bb3fb !important; }
.bg-\[\#6bb3fb\]:hover, .hover\:bg-\[\#9dcbfd\]:hover { background-color: #9dcbfd !important; }
.bg-\[\#03284f\] { background-color: #03284f !important; }
.bg-\[\#011a2e\] { background-color: #011a2e !important; }
.bg-\[\#0a1628\] { background-color: #0a1628 !important; }
.bg-\[\#064272\] { background-color: #064272 !important; }
.bg-\[\#162d4a\] { background-color: #162d4a !important; }
.bg-\[\#28B7D9\] { background-color: #28B7D9 !important; }
.text-\[\#011a2e\] { color: #011a2e !important; }
.border-\[\#0a5a9e\] { border-color: #0a5a9e !important; }
.border-\[\#234567\] { border-color: #234567 !important; }

/* Add to cart / CTA buttons */
button.bg-\[\#6bb3fb\],
a.bg-\[\#6bb3fb\] { background-color: #6bb3fb !important; color: #011a2e !important; }

/* ==========================================================================
   Typography Enhancements
   ========================================================================== */

.font-display {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.font-body {
    font-family: 'Inter', sans-serif;
}

/* Line Clamp Support */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==========================================================================
   WooCommerce Overrides
   ========================================================================== */

/* Remove default WooCommerce styles */
.woocommerce-result-count {
    margin: 0 !important;
    padding: 0 !important;
    color: #a3c4d9;
    font-size: 0.875rem;
}

.woocommerce-ordering {
    margin: 0 !important;
}

.woocommerce-ordering select {
    background-color: #162d4a;
    border: 1px solid #234567;
    border-radius: 0.5rem;
    padding: 0.625rem 2.5rem 0.625rem 1rem;
    color: #a3c4d9;
    font-size: 0.875rem;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236a8fa8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem;
    transition: border-color 0.2s ease;
}

.woocommerce-ordering select:hover,
.woocommerce-ordering select:focus {
    border-color: rgba(40, 183, 217, 0.5);
    outline: none;
}

/* Shop sort control: never overflow the viewport. Native <select>, so its
   option list is rendered by the OS and always stays on-screen; we only need
   to constrain the control itself. Full width on mobile for a clean toolbar. */
.everest-shop-sort,
.everest-shop-sort .woocommerce-ordering,
.everest-shop-sort select.orderby {
    max-width: 100%;
}

@media (max-width: 639px) {
    .everest-shop-sort,
    .everest-shop-sort .woocommerce-ordering,
    .everest-shop-sort select.orderby {
        width: 100%;
    }
}

/* Pagination */
.woocommerce-pagination ul,
.page-numbers {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.woocommerce-pagination ul li,
.page-numbers li {
    margin: 0;
}

.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span,
.page-numbers a,
.page-numbers span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    background-color: #162d4a;
    border: 1px solid #234567;
    border-radius: 0.5rem;
    color: #a3c4d9;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.woocommerce-pagination ul li a:hover,
.page-numbers a:hover {
    border-color: #28B7D9;
    color: #28B7D9;
}

.woocommerce-pagination ul li span.current,
.page-numbers span.current {
    background-color: #28B7D9;
    border-color: #28B7D9;
    color: #0a1628;
}

.woocommerce-pagination ul li .prev,
.woocommerce-pagination ul li .next,
.page-numbers .prev,
.page-numbers .next {
    padding: 0;
}

/* Quantity Input */
.woocommerce .quantity {
    display: flex;
    align-items: center;
}

.woocommerce .quantity .qty {
    width: 4rem;
    padding: 0.5rem;
    text-align: center;
    background-color: #0f2137;
    border: 1px solid #234567;
    border-radius: 0.5rem;
    color: #ffffff;
    font-size: 1rem;
    -moz-appearance: textfield;
}

.woocommerce .quantity .qty::-webkit-outer-spin-button,
.woocommerce .quantity .qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.woocommerce .quantity .qty:focus {
    outline: none;
    border-color: #28B7D9;
}

/* WooCommerce Messages */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    background-color: #162d4a !important;
    border: 1px solid #234567 !important;
    border-radius: 0.75rem !important;
    padding: 1rem 1.5rem !important;
    margin-bottom: 1.5rem !important;
    color: #a3c4d9 !important;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
    color: #28B7D9 !important;
}

.woocommerce-message {
    border-left: 3px solid #10b981 !important;
}

.woocommerce-message::before {
    color: #10b981 !important;
}

.woocommerce-error {
    border-left: 3px solid #ef4444 !important;
}

.woocommerce-error::before {
    color: #ef4444 !important;
}

.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a {
    color: #28B7D9 !important;
}

/* ==========================================================================
   Form Styles
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
    background-color: #162d4a;
    border: 1px solid #234567;
    border-radius: 0.75rem;
    padding: 0.875rem 1rem;
    color: #ffffff;
    font-size: 1rem;
    transition: border-color 0.2s ease;
    width: 100%;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: #28B7D9;
}

input::placeholder,
textarea::placeholder {
    color: #6a8fa8;
}

/* Checkbox & Radio */
input[type="checkbox"],
input[type="radio"] {
    width: 1.25rem;
    height: 1.25rem;
    background-color: #162d4a;
    border: 2px solid #234567;
    border-radius: 0.25rem;
    cursor: pointer;
    appearance: none;
    transition: all 0.2s ease;
}

input[type="radio"] {
    border-radius: 50%;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background-color: #28B7D9;
    border-color: #28B7D9;
}

input[type="checkbox"]:checked::after {
    content: '';
    display: block;
    width: 0.375rem;
    height: 0.625rem;
    border: solid #0a1628;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin: 0.125rem auto;
}

input[type="radio"]:checked::after {
    content: '';
    display: block;
    width: 0.5rem;
    height: 0.5rem;
    background-color: #0a1628;
    border-radius: 50%;
    margin: 0.25rem auto;
}

/* Labels */
label {
    display: block;
    margin-bottom: 0.5rem;
    color: #a3c4d9;
    font-size: 0.875rem;
    font-weight: 500;
}

/* ==========================================================================
   Custom Scrollbar
   ========================================================================== */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #0a1628;
}

::-webkit-scrollbar-thumb {
    background: #234567;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #2d5a85;
}

/* ==========================================================================
   Alpine.js Collapse Plugin Fallback
   ========================================================================== */

[x-cloak] {
    display: none !important;
}

/* ==========================================================================
   Prose/Content Styling
   ========================================================================== */

.prose {
    color: #a3c4d9;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
    color: #ffffff;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
}

.prose a {
    color: #28B7D9;
    text-decoration: none;
}

.prose a:hover {
    color: #3fcbe8;
    text-decoration: underline;
}

.prose strong {
    color: #ffffff;
}

.prose code {
    background-color: #162d4a;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.875em;
}

.prose pre {
    background-color: #162d4a;
    border: 1px solid #234567;
    border-radius: 0.75rem;
    padding: 1rem;
}

.prose blockquote {
    border-left: 3px solid #28B7D9;
    padding-left: 1rem;
    color: #6a8fa8;
    font-style: italic;
}

.prose ul,
.prose ol {
    padding-left: 1.5rem;
}

.prose li {
    margin-bottom: 0.5rem;
}

.prose ul li::marker {
    color: #28B7D9;
}

.prose ol li::marker {
    color: #28B7D9;
}

.prose hr {
    border-color: #234567;
}

.prose table {
    width: 100%;
    border-collapse: collapse;
}

.prose th,
.prose td {
    padding: 0.75rem;
    border: 1px solid #234567;
}

.prose th {
    background-color: #162d4a;
    color: #ffffff;
    font-weight: 600;
    text-align: left;
}

/* ==========================================================================
   Loading Skeleton
   ========================================================================== */

.skeleton {
    background: linear-gradient(
        90deg,
        #162d4a 0%,
        #1c3a5c 50%,
        #162d4a 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* ==========================================================================
   Selection Styling
   ========================================================================== */

::selection {
    background-color: rgba(40, 183, 217, 0.3);
    color: #ffffff;
}

::-moz-selection {
    background-color: rgba(40, 183, 217, 0.3);
    color: #ffffff;
}

/* ==========================================================================
   Focus Visible (Accessibility)
   ========================================================================== */

:focus-visible {
    outline: 2px solid #28B7D9;
    outline-offset: 2px;
}

button:focus-visible,
a:focus-visible {
    outline: 2px solid #28B7D9;
    outline-offset: 2px;
}

/* ==========================================================================
   Image Handling
   ========================================================================== */

.wp-post-image,
.woocommerce-product-gallery__image img,
.attachment-product-card,
.attachment-product-hero {
    object-fit: cover;
}

/* ==========================================================================
   Cart Styles
   ========================================================================== */

.woocommerce-cart-form .product-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.5rem;
}

/* Remove default table styling from cart */
.woocommerce-cart-form table.shop_table {
    border: none;
}

.woocommerce-cart-form table.shop_table td,
.woocommerce-cart-form table.shop_table th {
    border: none;
    padding: 0;
}

/* ==========================================================================
   Mobile Menu Animation
   ========================================================================== */

@media (max-width: 1023px) {
    .mobile-menu-open {
        overflow: hidden;
    }
}

/* ==========================================================================
   Custom Logo Styles
   ========================================================================== */

.custom-logo-link {
    display: flex;
    align-items: center;
}

.custom-logo {
    height: 40px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
}

@media (min-width: 640px) {
    .custom-logo {
        height: 48px;
        max-width: 220px;
    }
}

/* ==========================================================================
   Checkout Place Order Button
   ========================================================================== */

#place_order,
.woocommerce-checkout #place_order,
button#place_order {
    width: 100% !important;
    padding: 1.25rem 2rem !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    background: #6bb3fb !important;
    color: #011a2e !important;
    border: none !important;
    border-radius: 0.75rem !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin-top: 1.5rem !important;
}

#place_order:hover,
.woocommerce-checkout #place_order:hover,
button#place_order:hover {
    background: #9dcbfd !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 25px rgba(107, 179, 251, 0.3) !important;
}

#place_order:disabled,
.woocommerce-checkout #place_order:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

/* Payment methods styling */
.wc_payment_methods {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 1rem 0 !important;
}

.wc_payment_method {
    background: #064272 !important;
    border: 1px solid #0a5a9e !important;
    border-radius: 0.75rem !important;
    margin-bottom: 0.75rem !important;
    overflow: hidden !important;
}

.wc_payment_method label {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 1rem !important;
    cursor: pointer !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

.wc_payment_method .payment_box {
    padding: 1rem !important;
    background: #03284f !important;
    border-top: 1px solid #0a5a9e !important;
    color: #b8d4ed !important;
    font-size: 0.875rem !important;
}

/* ==========================================================================
   Hide product description in Cart & Checkout (WooCommerce Blocks)
   ========================================================================== */

.wc-block-components-product-metadata__description,
.wc-block-cart-item__product .wc-block-components-product-metadata,
.wc-block-checkout .wc-block-components-product-metadata {
    display: none !important;
}

/* ==========================================================================
   Dosage Variation Buttons (replaces default WooCommerce dropdown)
   ========================================================================== */

/* Hide the native <select> wrapper while keeping it in the DOM */
.everest-native-select-wrap {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Button base */
.everest-dosage-btn {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 120px;
    padding: 18px 30px;
    background: #064272;
    border: 2px solid #0a5a9e;
    border-radius: 12px;
    color: #b8d4ed;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.everest-dosage-btn:hover {
    border-color: #6bb3fb;
    color: #ffffff;
    background: #085490;
}

.everest-dosage-btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(107, 179, 251, 0.4);
}

/* Active / selected state */
.everest-dosage-btn.active {
    border-color: #6bb3fb;
    background: rgba(107, 179, 251, 0.10);
    color: #ffffff;
    box-shadow: 0 0 0 1px #6bb3fb, 0 4px 14px rgba(107, 179, 251, 0.18);
}

/* Non-interactive variant — used on single-variation variable products
   (e.g. KPV when 10mg is the only dosage). Looks identical to an active
   dosage button, but with no cursor / no hover state since there's
   nothing to choose. */
.everest-dosage-btn--static,
.everest-dosage-btn--static:hover,
.everest-dosage-btn--static:focus,
.everest-dosage-btn--static:focus-visible {
    cursor: default;
    pointer-events: none;
    /* Lock in the active look — overrides hover styles. */
    border-color: #6bb3fb;
    background: rgba(107, 179, 251, 0.10);
    color: #ffffff;
    box-shadow: 0 0 0 1px #6bb3fb, 0 4px 14px rgba(107, 179, 251, 0.18);
}

/* Label inside button */
.everest-dosage-btn__label {
    line-height: 1.2;
    letter-spacing: 0.01em;
}

/* ===================================================================
   Product card layout — pin Add to Cart / Select Options to the bottom
   ===================================================================
   Variable products (with price ranges that wrap to 2 lines) and
   long product titles (line-clamp-2) used to push the button down by
   different amounts, leaving uneven button positions across a grid row.

   Fix: the card is a flex column that fills its grid row (`height: 100%`),
   the body grows to fill the card, and the button — always the last
   child of the body — is pinned to the bottom with `margin-top: auto`. */
.everest-product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.everest-product-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.everest-product-card-body > :last-child {
    margin-top: auto;
}

/* Product title — reserve EXACTLY 2 lines so 1-line and 2-line titles
   occupy the same height. That keeps the "From", price, and button on
   the same Y position across every card in a row. min-height is in `em`
   (line-height 1.3 × 2 lines = 2.6em) so it tracks the font-size at any
   breakpoint. Medium weight, left-aligned, ellipsis past 2 lines. */
.everest-card-title {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.3;
    min-height: 2.6em;
    margin-bottom: 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Unified product-card price block ("From" label + single price).
   One price only — sale-aware, no range, no strikethrough. Any <del>
   WooCommerce might inject is hard-hidden as a safety net. Left-aligned. */
.everest-card-price {
    line-height: 1.1;
}

.everest-card-price-label {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #7fa8c9;
    margin-bottom: 0.15rem;
}

.everest-card-price-value {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.15;
    color: #6bb3fb;
}

/* Mobile (2-up): scale the price down a touch so it never overflows at
   ~390px, but keep it the dominant element in the lower card. */
@media (max-width: 480px) {
    .everest-card-title {
        font-size: 1rem;
    }
    .everest-card-price-label {
        font-size: 0.72rem;
    }
    .everest-card-price-value {
        font-size: 1.2rem;
    }
}

.everest-card-price-value .woocommerce-Price-amount {
    color: #6bb3fb;
}

.everest-card-price-value del,
.everest-card-price-value .price del {
    display: none !important;
}

.everest-card-price-value ins {
    text-decoration: none !important;
}

/* Variable product price range (initial "From $X – $Y" display) */
.everest-variable-price-range .price {
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
}

.everest-variable-price-range .price del {
    color: #7fa8c9 !important;
    font-size: 0.65em !important;
    opacity: 0.7;
}

.everest-variable-price-range .price ins {
    text-decoration: none !important;
}

.everest-variable-price-range .woocommerce-Price-amount {
    color: #6bb3fb;
}

/* Style the WooCommerce variation price area (shown after variation selected) */
.single_variation_wrap .woocommerce-variation-price {
    margin-bottom: 16px;
}

.single_variation_wrap .woocommerce-variation-price .price {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #6bb3fb !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.single_variation_wrap .woocommerce-variation-price .price del {
    color: #7fa8c9 !important;
    font-size: 18px !important;
    opacity: 0.7;
}

.single_variation_wrap .woocommerce-variation-price .price ins {
    text-decoration: none !important;
    color: #6bb3fb !important;
}

/* Style the WooCommerce variation description */
.single_variation_wrap .woocommerce-variation-description p {
    color: #b8d4ed;
    font-size: 14px;
    margin-bottom: 12px;
}

/* Style the WooCommerce add-to-cart button for variable products */
.single_variation_wrap .woocommerce-variation-add-to-cart {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 420px;
}

.single_variation_wrap .woocommerce-variation-add-to-cart .quantity {
    display: flex;
    align-items: stretch;
    height: 52px;
    box-sizing: border-box;
    background: #064272;
    border: 1px solid #0a5a9e;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}

.single_variation_wrap .woocommerce-variation-add-to-cart .quantity .qty-btn {
    width: 46px;
    height: auto;
    min-height: 0;
    flex: 0 0 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #b8d4ed;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
    padding: 0;
}

.single_variation_wrap .woocommerce-variation-add-to-cart .quantity .qty-btn:hover {
    color: #ffffff;
    background: #085490;
}

.single_variation_wrap .woocommerce-variation-add-to-cart .quantity .qty {
    width: 48px;
    height: 100%;
    min-height: 0;
    text-align: center;
    background: transparent;
    border: none;
    border-left: 1px solid #0a5a9e;
    border-right: 1px solid #0a5a9e;
    color: #ffffff;
    font-size: 17px;
    font-weight: 600;
    -moz-appearance: textfield;
    outline: none;
}

.single_variation_wrap .woocommerce-variation-add-to-cart .quantity .qty::-webkit-outer-spin-button,
.single_variation_wrap .woocommerce-variation-add-to-cart .quantity .qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.single_variation_wrap .single_add_to_cart_button {
    flex: 1;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    box-sizing: border-box !important;
    padding: 0 24px !important;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2 !important;
    font-family: 'Inter', -apple-system, sans-serif;
    background: #6bb3fb !important;
    color: #011a2e !important;
    border: none !important;
    border-radius: 12px !important;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(107, 179, 251, 0.25);
    white-space: nowrap;
    -webkit-appearance: none;
    appearance: none;
}

.single_variation_wrap .single_add_to_cart_button:hover {
    background: #9dcbfd !important;
    box-shadow: 0 6px 20px rgba(107, 179, 251, 0.35);
}

/* Simple product (Alpine row in single-product.php): match qty + ATC height,
   AND cap row width to match variable product (420px) so both layouts look
   consistent regardless of column width. */
.everest-simple-addtocart-row {
    align-items: center;
    max-width: 420px;
}

.everest-simple-addtocart-row .everest-simple-atc {
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    box-sizing: border-box !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    line-height: 1.2 !important;
    font-size: 16px !important;
}

/* Availability text styling */
.single_variation_wrap .woocommerce-variation-availability p {
    color: #10b981;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 8px;
}

.single_variation_wrap .woocommerce-variation-availability .out-of-stock {
    color: #ef4444;
}

/* Back-in-stock / waitlist plugin forms */
.everest-stock-notifier-slot input[type="email"],
.everest-stock-notifier-slot input[type="text"] {
    width: 100%;
    padding: 12px 16px;
    background: #064272;
    border: 1px solid #0a5a9e;
    border-radius: 10px;
    color: #ffffff;
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s ease;
}

.everest-stock-notifier-slot input[type="email"]:focus,
.everest-stock-notifier-slot input[type="text"]:focus {
    border-color: #6bb3fb;
}

.everest-stock-notifier-slot input[type="submit"],
.everest-stock-notifier-slot button[type="submit"] {
    padding: 12px 24px;
    background: #6bb3fb !important;
    color: #011a2e !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease;
}

.everest-stock-notifier-slot input[type="submit"]:hover,
.everest-stock-notifier-slot button[type="submit"]:hover {
    background: #9dcbfd !important;
}

.everest-stock-notifier-slot label {
    color: #b8d4ed;
    font-size: 14px;
    margin-bottom: 6px;
    display: block;
}

.everest-stock-notifier-slot p {
    color: #b8d4ed;
    font-size: 14px;
}

/* WPForms dark theme styling */
div.wpforms-container-full .wpforms-form .wpforms-field-label {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
}

div.wpforms-container-full .wpforms-form .wpforms-field-sublabel {
    color: #6a8fa8 !important;
}

div.wpforms-container-full .wpforms-form .wpforms-required-label {
    color: #28B7D9 !important;
}

/* Full-width fields and layout */
div.wpforms-container-full .wpforms-form,
div.wpforms-container-full .wpforms-form .wpforms-field-container {
    width: 100% !important;
}

div.wpforms-container-full .wpforms-form .wpforms-field {
    padding: 8px 0 !important;
    width: 100% !important;
}

div.wpforms-container-full .wpforms-form .wpforms-field-name .wpforms-field-row {
    display: flex !important;
    gap: 16px !important;
}

div.wpforms-container-full .wpforms-form .wpforms-field-name .wpforms-field-row .wpforms-field-row-block {
    flex: 1 !important;
    width: auto !important;
}

div.wpforms-container-full .wpforms-form input[type="text"],
div.wpforms-container-full .wpforms-form input[type="email"],
div.wpforms-container-full .wpforms-form input[type="tel"],
div.wpforms-container-full .wpforms-form input[type="url"],
div.wpforms-container-full .wpforms-form input[type="number"],
div.wpforms-container-full .wpforms-form select,
div.wpforms-container-full .wpforms-form textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    background-color: #0f2137 !important;
    border: 1px solid #234567 !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    padding: 12px 16px !important;
    font-size: 15px !important;
    transition: border-color 0.2s ease !important;
    outline: none !important;
}

div.wpforms-container-full .wpforms-form input[type="text"]:focus,
div.wpforms-container-full .wpforms-form input[type="email"]:focus,
div.wpforms-container-full .wpforms-form input[type="tel"]:focus,
div.wpforms-container-full .wpforms-form input[type="url"]:focus,
div.wpforms-container-full .wpforms-form input[type="number"]:focus,
div.wpforms-container-full .wpforms-form select:focus,
div.wpforms-container-full .wpforms-form textarea:focus {
    border-color: #28B7D9 !important;
    box-shadow: 0 0 0 2px rgba(40, 183, 217, 0.15) !important;
}

div.wpforms-container-full .wpforms-form input::placeholder,
div.wpforms-container-full .wpforms-form textarea::placeholder {
    color: #6a8fa8 !important;
    -webkit-text-fill-color: #6a8fa8 !important;
}

div.wpforms-container-full .wpforms-form select option {
    background: #0f2137;
    color: #ffffff;
}

div.wpforms-container-full .wpforms-form select {
    -webkit-text-fill-color: #ffffff !important;
}

div.wpforms-container-full .wpforms-form textarea {
    min-height: 150px;
    resize: vertical;
}

div.wpforms-container-full .wpforms-form button[type="submit"],
div.wpforms-container-full .wpforms-form .wpforms-submit {
    background: #28B7D9 !important;
    color: #0a1628 !important;
    -webkit-text-fill-color: #0a1628 !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 14px 32px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 12px rgba(40, 183, 217, 0.25) !important;
    width: auto !important;
}

div.wpforms-container-full .wpforms-form button[type="submit"]:hover,
div.wpforms-container-full .wpforms-form .wpforms-submit:hover {
    background: #3fcbe8 !important;
    box-shadow: 0 6px 20px rgba(40, 183, 217, 0.35) !important;
}

div.wpforms-container-full .wpforms-form .wpforms-confirmation-container-full {
    background: rgba(16, 185, 129, 0.1) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    padding: 20px !important;
}

div.wpforms-container-full .wpforms-form .wpforms-confirmation-container-full p {
    color: #b8d4ed !important;
}

div.wpforms-container-full .wpforms-form .wpforms-error,
div.wpforms-container-full .wpforms-form label.wpforms-error {
    color: #ef4444 !important;
    font-size: 13px !important;
}

/* Mobile adjustments */
@media (max-width: 480px) {
    .everest-dosage-btn {
        min-width: 100px;
        padding: 16px 22px;
        font-size: 16px;
    }

    .single_variation_wrap .woocommerce-variation-add-to-cart {
        gap: 12px;
    }

    .single_variation_wrap .woocommerce-variation-add-to-cart .quantity {
        height: 46px;
    }

    .single_variation_wrap .woocommerce-variation-add-to-cart .quantity .qty-btn {
        width: 36px;
        flex-basis: 36px;
    }

    .single_variation_wrap .woocommerce-variation-add-to-cart .quantity .qty {
        width: 36px;
        font-size: 15px;
    }

    .single_variation_wrap .single_add_to_cart_button {
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        padding: 0 16px !important;
        font-size: 15px;
    }

    .everest-simple-addtocart-row .everest-simple-qty {
        height: 46px !important;
    }

    .everest-simple-addtocart-row .everest-simple-atc {
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
    }
}

/* ==========================================================================
   Homepage Hero — cinematic mountain background (art-directed)
   ========================================================================== */

/* The section already reserves height (Tailwind min-h-[90vh]), so the
   background image causes no layout shift (CLS). Navy base color shows
   instantly while the image loads. */
.everest-hero-bg {
    /* Navy base = no flash before the image paints (brand #011a2e). */
    background-color: #011a2e;
    background-repeat: no-repeat;
    background-size: cover;

    /* MOBILE-FIRST image (portrait 9:16).
       background-position: tweak the second value to reframe the peak so
       it isn't hidden behind the centered headline. center 30% keeps the
       summit high in frame on tall phones. */
    background-position: center 30%;
    /* JPG fallback first (old browsers), WebP via image-set for the rest. */
    background-image: url('../images/hero-mobile.jpg');
    background-image: -webkit-image-set(url('../images/hero-mobile.webp') 1x);
    background-image: image-set(
        url('../images/hero-mobile.webp') type('image/webp'),
        url('../images/hero-mobile.jpg') type('image/jpeg')
    );
}

/* Navy overlay ON TOP of the image for white-text legibility. Darker at
   the top (behind the nav), lighter mid, slightly darker at the bottom.
   Built from brand navy #011a2e / #03284f. The source file is untouched. */
.everest-hero-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(1, 26, 46, 0.85) 0%,
        rgba(3, 40, 79, 0.62) 45%,
        rgba(1, 26, 46, 0.78) 100%
    );
}

/* DESKTOP image (landscape 16:9) on >= 768px. */
@media (min-width: 768px) {
    .everest-hero-bg {
        /* Desktop: center keeps the peak visible around the headline.
           Tweak this to reframe. */
        background-position: center center;
        background-image: url('../images/hero-desktop.jpg');
        background-image: -webkit-image-set(url('../images/hero-desktop.webp') 1x);
        background-image: image-set(
            url('../images/hero-desktop.webp') type('image/webp'),
            url('../images/hero-desktop.jpg') type('image/jpeg')
        );
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    body {
        background: white;
        color: black;
    }
    
    header,
    footer,
    .no-print {
        display: none !important;
    }
}

/* =========================================================================
   BUNDLE & SAVE — product-page tier cards + live readout.
   Uses the same brand tokens as the dosage buttons (#064272 / #0a5a9e /
   #6bb3fb) so it sits seamlessly in the buy box. No outer container — the
   cards sit directly in the buy box. Selected/hover cards get a soft glow.
   ========================================================================= */
.everest-bundle {
    margin-bottom: 1.5rem;
}

.everest-bundle__heading {
    margin-bottom: 0.75rem;
}

.everest-bundle__title {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff;
}

.everest-bundle__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.everest-bundle__card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 84px;
    padding: 16px 10px;
    background: #064272;
    border: 2px solid #0a5a9e;
    border-radius: 12px;
    color: #b8d4ed;
    font-family: 'Inter', -apple-system, sans-serif;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    text-align: center;
    -webkit-appearance: none;
    appearance: none;
}

.everest-bundle__card.has-badge {
    margin-top: 9px; /* room for the ribbon badge that overhangs the top edge */
}

/* Hover lift + glow */
.everest-bundle__card:hover {
    border-color: #6bb3fb;
    color: #ffffff;
    background: #085490;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(2, 18, 33, 0.45);
}

.everest-bundle__card:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(107, 179, 251, 0.4);
}

/* Selected glow */
.everest-bundle__card.is-selected {
    border-color: #6bb3fb;
    background: rgba(107, 179, 251, 0.12);
    color: #ffffff;
    box-shadow: 0 0 0 1px #6bb3fb, 0 10px 24px rgba(107, 179, 251, 0.22);
}

.everest-bundle__qty {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.1;
    color: #ffffff;
    text-transform: uppercase;
}

.everest-bundle__off {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #6bb3fb;
}

.everest-bundle__off--base {
    color: #7fa8c9;
    font-weight: 600;
}

/* Ribbon badge (MOST POPULAR / BEST VALUE) */
.everest-bundle__badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    padding: 2px 8px;
    border-radius: 999px;
    background: #6bb3fb;
    color: #011a2e;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(107, 179, 251, 0.35);
}

/* Live readout: discounted line total + struck original + savings note */
.everest-bundle__readout {
    margin-top: 0.85rem;
    padding: 0.85rem 1rem;
    background: rgba(107, 179, 251, 0.08);
    border: 1px solid rgba(107, 179, 251, 0.25);
    border-radius: 12px;
}

.everest-bundle__readout-row {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.everest-bundle__total {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
    color: #6bb3fb;
}

.everest-bundle__orig {
    font-size: 1.05rem;
    color: #7fa8c9;
    text-decoration: line-through;
}

.everest-bundle__save {
    margin-top: 0.25rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #10b981;
}

/* Cart / checkout strikethrough (classic cart — only when WooCommerce
   applies the discount itself; disabled on Tagada-hosted checkout) */
.everest-bundle-price .everest-bundle-orig {
    display: inline-block;
    margin-right: 6px;
    color: #999;
    text-decoration: line-through;
}

.everest-bundle-price .everest-bundle-new {
    text-decoration: none;
    font-weight: 700;
}

.everest-bundle-save {
    display: block;
    margin-top: 2px;
    font-size: 0.8em;
    font-weight: 700;
    color: #1a8f5f;
}

@media (max-width: 480px) {
    .everest-bundle__cards {
        gap: 0.5rem;
    }
    .everest-bundle__card {
        min-height: 76px;
        padding: 14px 6px;
    }
    .everest-bundle__qty {
        font-size: 0.95rem;
    }
    .everest-bundle__off {
        font-size: 0.72rem;
    }
    .everest-bundle__total {
        font-size: 1.35rem;
    }
}

/* =========================================================================
   MOBILE MENU — iOS-safe, scroll-independent overlay.
   - Body scroll is locked via position:fixed (JS stores/restores scrollY).
   - Header is pinned to top:0 while open so it never jumps when the banner
     leaves flow; the banner fades out deliberately.
   - Panel height uses dvh/svh so the iOS address bar can't clip the bottom.
   - "Shop All" offset comes from the REAL header height (--everest-header-h),
     so it's identical at the top of the page and after scrolling.
   ========================================================================= */

/* Panel: anchored to the viewport top, dynamic-viewport height (iOS-safe). */
.everest-mobile-menu {
    height: 100vh;   /* fallback for old browsers */
    height: 100svh;  /* safe small viewport */
    height: 100dvh;  /* dynamic — tracks the collapsing address bar */
}

/* First item sits a comfortable, consistent distance below the pinned header. */
.everest-mobile-menu__nav {
    padding-top: calc(var(--everest-header-h, 64px) + 1.5rem);
}

/* The announcement banner fades out cleanly when the menu opens (intentional). */
.everest-announcement-bar {
    transition: opacity 0.25s ease;
}

/* Countdown timer — boxed digit chips. Each chip holds a tabular (fixed-width)
   number above a tiny unit label, so the seconds tick with no jitter/reflow. */
.everest-countdown {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    white-space: nowrap;
}

.everest-cd-eyebrow {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
}

.everest-cd-grid {
    display: inline-flex;
    align-items: stretch;
    gap: 0.25rem;
}

.everest-cd-box {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 2.1rem;
    padding: 0.15rem 0.3rem 0.2rem;
    border-radius: 0.45rem;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 1px 2px rgba(0, 0, 0, 0.25);
    line-height: 1;
}

.everest-cd-box b {
    font-size: 0.95rem;
    font-weight: 800;
    color: #fff;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    letter-spacing: 0.03em;
}

.everest-cd-box i {
    font-style: normal;
    margin-top: 0.12rem;
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

/* Tighten the chips a touch on small screens so the row never overflows. */
@media (max-width: 639px) {
    .everest-cd-box {
        min-width: 1.95rem;
        padding: 0.12rem 0.25rem 0.16rem;
    }
    .everest-cd-box b { font-size: 0.88rem; }
}

@media (max-width: 1023px) {
    /* Body scroll lock. JS sets body.top = -scrollY so the page stays put,
       and restores the exact position on close. */
    html.everest-menu-open,
    html.everest-menu-open body {
        overflow: hidden;
    }

    html.everest-menu-open body {
        position: fixed;
        left: 0;
        right: 0;
        width: 100%;
    }

    /* Pin the header to the very top of the viewport while the menu is open,
       independent of scroll position, so it doesn't jump when the banner is
       removed from flow and the body is locked. Keeps the X + icons in place. */
    html.everest-menu-open header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }

    /* Deliberate, clean hide of the banner (no abrupt removal / dead space). */
    html.everest-menu-open .everest-announcement-bar {
        opacity: 0;
        pointer-events: none;
    }
}