:root {
    --navy: #0a1121;
    --cyan: #34dbe0;
    --royal: #4753c4;
    --lav: #a2a2d7;
    --violet: #4c3b80;
    --silver: #c8d0e1;
    /* approximate fixed header height used to offset main content; tuned per-breakpoint below */
    --header-height: 110px;
}

/* Cart drawer and counter styles (debug/visibility helpers) */
.cart-counter {
    position: relative;
    display: inline-block;
    min-width: 28px;
    padding: 4px 8px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--silver);
    font-weight: 600;
    text-align: center;
}

.cart-drawer {
    position: fixed;
    right: 0;
    top: 64px;
    width: 360px;
    max-width: calc(100% - 24px);
    height: calc(100% - 84px);
    transform: translateX(110%);
    transition: transform 260ms ease;
    z-index: 2150;
    /* above header but below modal which uses 9999 */
    box-shadow: -8px 0 30px rgba(2, 4, 10, 0.6);
}

.cart-drawer.open {
    transform: translateX(0);
}

.cart-drawer-inner {
    background: linear-gradient(180deg, rgba(7, 16, 26, 0.96), rgba(7, 16, 26, 0.98));
    color: var(--silver);
    height: 100%;
    padding: 12px;
    border-left: 1px solid rgba(200, 208, 225, 0.04);
    overflow: auto;
}

/* Make cart drawer visually match product cards */
.cart-drawer-inner {
    border-radius: 12px 0 0 12px;
    background: linear-gradient(180deg, rgba(10, 17, 33, 0.85), rgba(10, 17, 33, 0.6));
    border: 3px solid rgba(95, 156, 206, 0.12);
    box-shadow: -8px 18px 40px rgba(2, 4, 10, 0.6);
}

.cart-drawer h3 {
    color: var(--cyan);
    margin: 8px 0 12px;
}

.cart-drawer-row {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.04);
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
    display: flex;
    gap: 8px;
    align-items: center;
}

.cart-drawer-row .cart-item-name {
    flex: 1 1 auto;
    color: var(--silver);
    font-weight: 600;
}

.cart-drawer-row .drawer-qty {
    width: 64px;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
    color: var(--silver);
}

.cart-drawer-row .drawer-remove {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.04);
    color: var(--lav);
    padding: 6px 8px;
    border-radius: 8px;
    cursor: pointer;
}

.cart-drawer-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.cart-drawer .btn {
    padding: 10px 12px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
}

.cart-drawer .btn.btn-primary {
    background: linear-gradient(180deg, var(--royal), #2f3fb2);
    color: white;
    font-weight: 700;
}

/* Responsive tweaks for the cart drawer */
@media (max-width: 640px) {
    .cart-drawer {
        width: 100%;
        top: 56px;
        height: calc(100% - 56px);
        transform: translateX(110%);
    }

    .cart-drawer-inner {
        border-radius: 0;
    }
}

.cart-drawer-close {
    background: transparent;
    border: 0;
    font-size: 22px;
    color: var(--silver);
    cursor: pointer;
}

.cart-drawer .cart-drawer-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.02);
}


* {
    box-sizing: border-box
}

body,
html {
    height: 100%
}

.alt2-body {
    font-family: Inter, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    margin: 0;
    /* dark overlay layered on top of the background image for better contrast */
    /* slightly lighter baseline so the background image is more visible */
    background-color: #071022;
    /* reduce overlay opacities to make overall page brighter while keeping text contrast */
    background-image: linear-gradient(rgba(2, 4, 10, 0.36), rgba(2, 4, 10, 0.44)), url('/JJbackground.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--silver);
    min-height: 100%
}

.alt2-header {
    position: relative;
    left: 0;
    right: 0;
    top: 0;
    z-index: 60;
    padding: 12px 20px;
    background: linear-gradient(180deg, rgba(10, 17, 33, 0.85), rgba(10, 17, 33, 0.35));
    backdrop-filter: blur(4px)
}

/* Push main content below the fixed header so headings aren't hidden.
   We use a CSS variable so the value can be adjusted responsively. */
main#app {
    padding-top: var(--header-height);
}

/* Ensure the promo/title area has a comfortable gap from the header
   and avoid relying on inline margins in individual pages. */
.promo-text {
    margin-top: 28px;
    /* default gap; fine-tune per breakpoint below */
}

.alt2-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 12px
}

.alt2-logo {
    width: 96px;
    height: 96px;
}

.site-header-bar {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 160;
    /* make header a distinct opaque band so video does not show through */
    /* slightly reduced opacity so header blends a bit with background */
    background: linear-gradient(180deg, rgba(10, 17, 33, 0.85), rgba(10, 17, 33, 0.65));
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 18px rgba(2, 4, 10, 0.45);
}

.header-profile {
    color: var(--cyan);
    margin-left: 12px;
    text-decoration: none;
    font-weight: 600;
}

#header-contact svg {
    display: block
}

.alt2-header .alt2-logo {
    width: 84px;
    height: 84px;
}

.alt2-header .header-spacer {
    flex: 1
}

.header-avatar {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    object-fit: cover;
    display: block;
}

.header-btn {
    background: transparent;
    border: 0;
    color: var(--silver);
    cursor: pointer;
    padding: 6px;
    margin-left: 8px
}

.header-btn svg {
    display: block
}

.header-cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02)
}

/* Move the login/logout button to the far right of the header
   by giving it a high flex order. This keeps layout stable while
   placing the user control at the edge where users expect it. */
#header-login {
    order: 999;
    margin-left: 12px;
    margin-right: 6px;
}

/* When showing the sign-out icon, make it slightly more prominent */
.header-logout svg {
    stroke-width: 1.4 !important;
    color: var(--cyan);
}

.header-cart .cart-badge {
    background: var(--cyan);
    color: #041018;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 12px;
    margin-left: 4px
}

/* promo video spacing and overlay handled by the main promo-video block further below */

.alt2-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1
}

.alt2-search {
    flex: 1;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid rgba(200, 208, 225, 0.06);
    background: rgba(255, 255, 255, 0.02);
    color: var(--silver)
}

.alt2-hero {
    height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.alt2-hero-overlay {
    background: linear-gradient(180deg, rgba(10, 17, 33, 0.65), rgba(10, 17, 33, 0.75));
    padding: 24px;
    border-radius: 12px;
    text-align: center;
    color: var(--silver);
    box-shadow: 0 12px 40px rgba(4, 6, 12, 0.6);
}

.alt2-hero h1 {
    color: var(--cyan);
    margin: 0 0 8px
}

/* Search container placed between header/video and product grid */
.search-container {
    max-width: 1100px;
    margin: 12px auto;
    padding: 0 20px;
    display: flex;
    justify-content: center;
}

.search-wrap {
    width: 100%;
    background: linear-gradient(180deg, rgba(6, 12, 20, 0.6), rgba(6, 12, 20, 0.35));
    border-radius: 12px;
    padding: 10px 14px;
    box-shadow: 0 8px 30px rgba(2, 4, 10, 0.38);
    border: 3px solid var(--cyan);
    /* permanent cyan frame */
}

.alt2-search {
    width: 100%;
    padding: 10px 12px;
    border-radius: 999px;
    border: 0;
    /* border handled by .search-wrap */
    background: rgba(255, 255, 255, 0.02);
    color: var(--silver);
    font-size: 16px;
    outline: none;
}

/* Replace textual placeholder with a cyan search icon inside the input.
   We use an inline SVG data URI so the color stays crisp across backgrounds. */
.alt2-search {
    /* larger, thicker cyan search icon */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M21 21l-4.35-4.35' stroke='%2334dbe0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/><circle cx='11' cy='11' r='6' stroke='%2334dbe0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position: 14px center;
    background-size: 22px 22px;
    padding-left: 52px;
    /* make room for the bigger icon */
}

.alt2-search:focus {
    box-shadow: 0 8px 28px rgba(52, 219, 224, 0.12), 0 0 0 6px rgba(255, 255, 255, 0.02);
    background: rgba(255, 255, 255, 0.04);
}

/* Hover and focus states for the whole search wrap to change frame color */
.search-wrap:hover,
.search-wrap:focus-within {
    border-color: rgba(255, 255, 255, 0.9);
    /* change frame to white on hover/focus */
    transform: translateY(-2px);
    box-shadow: 0 10px 36px rgba(2, 4, 10, 0.46);
}

.alt2-grid {
    max-width: 1200px;
    margin: 24px auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

/* Contact modal styles */
.contact-modal {
    display: none;
}

.contact-modal[aria-hidden="false"] {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 9999;
}

.contact-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 4, 10, 0.7);
}

.contact-modal-panel {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 96%;
    max-width: 560px;
    background: linear-gradient(180deg, #081022, #071022);
    border: 1px solid rgba(255, 255, 255, 0.04);
    padding: 18px;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(2, 4, 10, 0.8);
    color: var(--silver);
}

.contact-modal-panel h3 {
    margin: 0 0 8px;
    color: var(--cyan);
}

.contact-modal-panel label {
    display: block;
    margin: 10px 0;
    font-size: 14px;
}

.contact-modal-panel input[type="text"],
.contact-modal-panel input[type="email"],
.contact-modal-panel textarea {
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
    color: var(--silver);
}

.contact-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 8px;
    border: 0;
    cursor: pointer;
    background: linear-gradient(180deg, var(--royal), #2f3fb2);
    color: white;
    font-weight: 700;
    text-decoration: none;
    transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
    font-size: 14px;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(2, 4, 10, 0.18);
}

.btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.btn-ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--lav)
}

/* Subtle solid gray button for secondary actions (like clear cart)
   Match .btn geometry and interactions but use muted gray colors */
.btn-muted {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 8px;
    border: 0;
    cursor: pointer;
    background: linear-gradient(180deg, #6f6f6f, #4f4f4f);
    color: white;
    font-weight: 700;
    text-decoration: none;
    transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
    font-size: 14px;
}

.btn-muted:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(2, 4, 10, 0.18);
}

.btn-muted:active {
    transform: translateY(0);
    box-shadow: none;
}

.contact-close {
    position: absolute;
    right: 12px;
    top: 10px;
    background: transparent;
    border: 0;
    color: var(--lav);
    font-size: 22px;
    cursor: pointer
}

.contact-status {
    margin-top: 10px;
    font-size: 13px;
    min-height: 20px
}

.products-container {
    background: transparent;
    color: var(--silver);
    /* place products below the promo area; remove the negative overlap margin */
    margin: 24px auto 40px;
    max-width: 1200px;
    padding: 28px 20px 40px;
    border-radius: 12px;
    box-shadow: none;
    /* remove the rounded dark box that overlays the video */
    z-index: 1;
    position: relative;
}

.products-container .alt2-grid {
    background: transparent;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.products-container .alt2-card {
    background: transparent;
    /* let the site background show through */
    color: var(--silver);
    border: 4px solid rgba(95, 156, 206, 0.5);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
    will-change: transform;
    position: relative;
}

.alt2-card {
    background: transparent;
    border: 4px solid rgba(255, 255, 255, 0.16);
    padding: 10px 12px 20px;
    /* reduced padding to compact the cart list */
    min-height: 120px;
    border-radius: 12px;
    color: var(--silver);
    backdrop-filter: blur(6px)
}

/* floating cart icon button on cards */
.card-cart-btn {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 36px;
    padding: 6px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--cyan);
    border-radius: 8px;
    cursor: pointer;
    transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.card-cart-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(2, 4, 10, 0.25);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.03));
}

.card-cart-btn:disabled,
.card-cart-btn[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
}

.card-cart-btn svg {
    display: block;
}

/* Hide any legacy quantity inputs or textual add buttons inside alt2-card to avoid duplicate UI */
.alt2-card input[type="number"],
.alt2-card .btn-add,
.alt2-card button.btn.btn-primary {
    display: none !important;
}

/* Make sure the cart icon sits above card content */
.card-cart-btn {
    z-index: 10;
}

.alt2-card:hover,
.products-container .alt2-card:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 10px 30px rgba(2, 4, 10, 0.25);
}

.alt2-card img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    border-radius: 8px
}

/* Compact list appearance for cart items */
.cart-item {
    padding: 12px;
    margin-bottom: 12px;
    display: block;
}

/* Modern small button styles used for actions inside cart rows */
.btn-sm {
    padding: 6px 8px;
    font-size: 13px;
    border-radius: 8px;
}

.btn-ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--lav);
}

.remove {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: var(--lav);
    padding: 6px 8px;
    border-radius: 8px;
    cursor: pointer;
}

.qty-display {
    margin-left: 6px;
    color: var(--lav);
    font-weight: 600;
}

.alt2-card h3 {
    color: var(--cyan);
    margin: 8px 0 4px
}

.alt2-card p {
    /* softer, lighter variant of --silver to reduce intensity (not pure white) */
    color: rgba(200, 208, 225, 0.92);
    margin: 6px 0 0;
}

/* Stronger specificity: force product description to a softer light color in case other rules override it */
.products-container .alt2-card p,
.alt2-grid .alt2-card p,
.alt2-card .card-description,
.alt2-card p.card-description {
    color: rgba(200, 208, 225, 0.92) !important;
}

.alt2-footer {
    text-align: center;
    padding: 24px;
    color: var(--lav)
}

/* ensure app.js produced .card elements are hidden in this grid */
.alt2-grid .card {
    display: none
}

.alt2-grid .alt2-card {
    display: block
}

@media(max-width:700px) {
    .alt2-hero {
        height: 220px
    }

    /* On medium / small screens make the header offset a bit larger so the
       fixed header doesn't obscure the hero/title (mobile screenshots showed
       the heading hidden under the bar). */
    :root {
        --header-height: 140px;
    }

    .promo-text {
        margin-top: 36px;
    }


    /* Extra-small phones: provide even more offset and reduce header chrome so the
   title remains visible and comfortably spaced under the bar. */
    @media (max-width:420px) {
        :root {
            --header-height: 96px;
            /* smaller effective header on very small screens */
        }

        .promo-text {
            margin-top: 42px;
        }

        /* If header still occupies too much vertical space, make logo smaller */
        .alt2-header .alt2-logo {
            width: 40px;
            height: 40px;
        }
    }

    /* reduce card min-height on small screens so layout remains compact */
    .alt2-card {
        min-height: 0;
        padding-bottom: 44px;
        /* still keep a bit of space for icon */
    }

    .alt2-inner {
        gap: 8px
    }

    .alt2-logo {
        width: 44px;
        height: 44px
    }
}

/* Modal overlay and content (restored from previous theme to ensure UI works) */
.modal-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(11, 11, 11, 0.5);
    z-index: 9999;
    padding: 20px;
}

.modal-overlay.open {
    display: flex;
}

.modal {
    background: #fff;
    border-radius: 10px;
    max-width: 1100px;
    width: 100%;
    box-shadow: 0 20px 50px rgba(11, 11, 11, 0.2);
    overflow: hidden;
}

/* Product modal modernized layout and palette */
.modal.product-modal {
    max-width: 1180px;
    border-radius: 12px;
    overflow: hidden;
}

.modal.product-modal .modal-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    padding: 28px;
    background: linear-gradient(180deg, rgba(250, 250, 252, 0.98), rgba(244, 246, 249, 0.98));
    color: #0b1220;
}

.product-media {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.product-main-image {
    width: 100%;
    height: 520px;
    object-fit: contain;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(246, 248, 250, 1), rgba(238, 242, 246, 1));
    padding: 18px;
    box-shadow: 0 6px 24px rgba(11, 16, 22, 0.06);
}

.product-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.product-thumbs img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid transparent;
}

.product-thumbs img.selected {
    border-color: var(--cyan);
    box-shadow: 0 6px 18px rgba(52, 219, 224, 0.12);
}

.product-info {
    padding: 6px 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.product-info h2 {
    margin: 0;
    color: var(--navy);
    font-size: 28px;
}

.product-price {
    color: var(--royal);
    font-weight: 800;
    font-size: 22px;
}

/* Modern select styling */
.fancy-select {
    position: relative;
    display: inline-block;
    width: 100%;
}

.fancy-select select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(11, 18, 28, 0.08);
    background: linear-gradient(180deg, #fff, #fbfdff);
    color: var(--navy);
    font-weight: 600;
    cursor: pointer;
}

.fancy-select:after {
    content: '\25BE';
    /* down arrow */
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: rgba(11, 18, 28, 0.5);
    font-size: 12px;
}

.product-qty {
    display: flex;
    gap: 8px;
    align-items: center;
}

.btn.add-to-cart {
    background: linear-gradient(180deg, var(--royal), #2f3fb2);
    color: white;
    padding: 10px 14px;
    border-radius: 10px;
    border: none;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(71, 83, 196, 0.14);
}

/* ensure modal adapts on smaller screens */
@media(max-width:980px) {
    .modal.product-modal .modal-body {
        grid-template-columns: 1fr;
    }

    .product-main-image {
        height: 360px
    }
}

/* Ensure modal elements (actual classes used in createModal) receive the modern styling */
.modal.product-modal .modal-body .modal-media {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.modal.product-modal .modal-main-img {
    width: 100%;
    height: 520px;
    object-fit: contain;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(246, 248, 250, 1), rgba(238, 242, 246, 1));
    padding: 18px;
    box-shadow: 0 6px 24px rgba(11, 16, 22, 0.06);
}

.modal.product-modal .modal-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    align-items: center;
}

.modal.product-modal .modal-thumbs img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid transparent;
}

.modal.product-modal .modal-thumbs img.active {
    border-color: var(--cyan);
    box-shadow: 0 6px 18px rgba(52, 219, 224, 0.12);
}

.modal.product-modal .modal-details {
    padding: 4px 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.modal.product-modal .modal-title {
    margin: 0;
    color: var(--navy);
    font-size: 28px;
}

.modal.product-modal .modal-price {
    color: var(--royal);
    font-weight: 800;
    font-size: 22px;
}

/* Variant attribute wrapper */
.modal.product-modal .modal-variant-attrs-container {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.modal.product-modal .variant-attr {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 160px;
}

.modal.product-modal .variant-attr label {
    font-size: 12px;
    color: rgba(11, 18, 28, 0.7);
}

.modal.product-modal .variant-attr-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(11, 18, 28, 0.08);
    background: linear-gradient(180deg, #fff, #fbfdff);
    color: var(--navy);
    font-weight: 600;
}

.modal.product-modal .variant-attr-select:focus {
    outline: 0;
    box-shadow: 0 6px 20px rgba(52, 219, 224, 0.10);
}

/* prev/next buttons on the modal media */
.modal.product-modal .modal-prev,
.modal.product-modal .modal-next {
    appearance: none;
    border: 0;
    background: rgba(255, 255, 255, 0.9);
    color: var(--navy);
    width: 44px;
    height: 44px;
    border-radius: 8px;
    font-size: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(11, 16, 22, 0.06);
    cursor: pointer;
}

.modal.product-modal .modal-prev {
    margin-right: 8px
}

.modal.product-modal .modal-next {
    margin-left: 8px
}

.modal.product-modal .modal-purchase {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 8px;
}

.modal.product-modal .modal-purchase .modal-qty input[type="number"] {
    width: 84px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid rgba(11, 18, 28, 0.08);
}

.modal.product-modal #modal-add-btn {
    background: linear-gradient(180deg, var(--royal), #2f3fb2);
    color: white;
    padding: 10px 14px;
    border-radius: 10px;
    border: none;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(71, 83, 196, 0.14);
}

/* small screens adjustments */
@media(max-width:700px) {
    .modal.product-modal .modal-body {
        padding: 16px
    }

    .modal.product-modal .modal-main-img {
        height: 320px
    }
}

.modal .btn-close {
    appearance: none;
    border: 0;
    background: transparent;
    font-size: 26px;
    line-height: 1;
    padding: 10px 14px;
    position: absolute;
    right: 12px;
    top: 8px;
    cursor: pointer;
}

.modal-body {
    display: flex;
    gap: 18px;
    padding: 22px;
}

.modal-media {
    flex: 1 1 55%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.modal-main-img {
    max-width: 100%;
    max-height: 70vh;
    object-fit: contain;
    border-radius: 8px;
    background: #f8fafc;
}

.modal-prev,
.modal-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.8);
    border: 0;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 20px;
}

.modal-prev {
    left: 8px
}

.modal-next {
    right: 8px
}

.modal-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    overflow-x: auto;
    width: 100%;
}

.modal-thumbs img {
    width: 64px;
    height: 44px;
    object-fit: cover;
    border-radius: 6px;
    opacity: 0.8;
    cursor: pointer;
    border: 2px solid transparent;
}

.modal-thumbs img.active {
    opacity: 1;
    border-color: #111827;
}

.modal-details {
    flex: 1 1 45%;
    padding: 6px 2px;
}

.modal-title {
    margin: 0 0 8px;
}

.modal-desc {
    margin: 0 0 12px
}

.modal-specs {
    color: #374151;
    margin: 0 0 18px
}

.modal-price {
    font-weight: 700;
    font-size: 18px
}

.modal-variant-stock {
    margin-top: 8px;
    font-weight: 600;
}

.modal-variant-stock.stock-last {
    color: #ff8c00;
    /* orange */
}

.modal-variant-stock.stock-out {
    color: #e11d48;
    /* red */
}

/* small reuse: card headings */
.card h3 {
    margin: 8px 0 4px;
    font-size: 16px;
    color: #34dbe0;
}

.card p {
    color: #a2a2d7
}

.card p {
    margin: 0;
    color: #374151
}

.footer {
    padding: 20px
}

@media (max-width: 900px) {
    .modal {
        max-width: 920px;
    }
}

@media (max-width: 640px) {
    .modal-body {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 14px;
    }

    .modal-media {
        order: 0;
        width: 100%;
        flex: none;
    }

    .modal-details {
        order: 1;
        width: 100%;
        padding: 6px 0;
    }

    .modal-main-img {
        max-height: 50vh;
        width: 100%;
        border-radius: 6px;
    }

    .modal-prev,
    .modal-next {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }

    .modal-thumbs img {
        width: 56px;
        height: 40px;
    }
}

/* Promo video styles */
.promo-video-wrap {
    max-width: 1100px;
    /* push the video below the fixed header bar (adjusted for larger logo) */
    margin: 130px auto 18px;
    padding: 0 20px;
    position: relative;
    overflow: hidden;
    /* only round the bottom corners so nothing peeks under the header */
    border-radius: 0 0 12px 12px;
    /* allow the video to show through; do not paint a dark fallback band */
    background: transparent;
}

.promo-video {
    /* Keep the video inline in the flow to avoid absolute overflow and layering issues */
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    max-height: 360px;
    object-fit: cover;
    z-index: 1;
    border-radius: 0 0 12px 12px;
    box-shadow: none;
    background: #000;
}

@media (max-width: 700px) {
    .promo-video-wrap {
        margin: 12px auto;
    }
}

/* Make promo video a background layer with overlay text */
.promo-video-overlay {
    /* overlay should sit above the video so text is visible in front */
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    padding: 24px 20px;
    color: var(--silver);
    text-align: center;
    pointer-events: auto;
    /* remove the dark gradient so the video shows through; keep a subtle text-shadow for readability */
    background: transparent;
    text-shadow: 0 2px 8px rgba(2, 4, 8, 0.6);
}

.promo-title {
    font-size: 28px;
    margin: 0 0 8px;
    color: var(--cyan);
    animation: slideUpFade 900ms ease both;
}

.promo-sub {
    margin: 0;
    color: var(--lav);
    animation: slideUpFade 1100ms ease both 120ms;
}

@keyframes slideUpFade {
    from {
        transform: translateY(8px);
        opacity: 0
    }

    to {
        transform: translateY(0);
        opacity: 1
    }
}

@media (max-width:700px) {
    .promo-video-overlay {
        min-height: 180px;
        padding: 18px 12px
    }

    .promo-title {
        font-size: 20px
    }
}

/* Additional small-screen refinements for better mobile UX */
@media (max-width:480px) {

    /* Make header compact and avoid covering content */
    .site-header-bar {
        top: 0;
        background: linear-gradient(180deg, rgba(10, 17, 33, 0.95), rgba(10, 17, 33, 0.9));
        padding: 6px 10px;
        box-shadow: 0 6px 18px rgba(2, 4, 10, 0.5);
    }

    .alt2-inner {
        max-width: 100%;
        padding: 0 12px;
        gap: 8px;
        align-items: center;
    }

    .alt2-logo {
        width: 40px;
        height: 40px;
    }

    /* Reduce header controls and make them touch-friendly */
    .header-btn {
        padding: 8px;
        margin-left: 6px;
    }

    /* Show only essential header elements on the smallest screens */
    #header-contact {
        display: none;
    }

    .header-profile {
        display: none;
    }

    /* Promo video and overlay more compact */
    .promo-video-wrap {
        margin: 86px 12px 12px;
        /* account for fixed header */
        border-radius: 10px;
    }

    .promo-video {
        max-height: 260px;
    }

    .promo-video-overlay {
        padding: 12px;
    }

    .promo-title {
        font-size: 18px;
    }

    .promo-sub {
        font-size: 13px;
    }

    /* Search takes full width and reduced visual chrome */
    .search-container {
        margin: 8px auto;
        padding: 0 12px;
    }

    .search-wrap {
        padding: 8px;
        border-radius: 10px;
        border-width: 2px;
    }

    .alt2-search {
        font-size: 14px;
        padding: 10px 12px;
        /* keep the icon visible on small screens but reduce left padding slightly */
        background-position: 12px center;
        padding-left: 46px;
        background-size: 20px 20px;
    }

    /* Grid becomes single column for legibility on small devices */
    .alt2-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        margin: 8px;
    }

    .products-container {
        padding: 16px 12px 28px;
        margin: 8px auto;
    }

    /* Cards: make images taller and content denser */
    .alt2-card {
        padding: 12px 10px 48px;
        min-height: 0;
    }

    .alt2-card img {
        height: 220px;
    }

    .card-cart-btn {
        right: 8px;
        bottom: 8px;
        width: 40px;
        height: 36px;
    }

    /* Modal: ensure comfortable full-screen experience */
    .modal.product-modal {
        border-radius: 8px;
        margin: 8px;
    }

    .modal.product-modal .modal-body {
        padding: 12px;
        gap: 12px;
    }

    .modal.product-modal .modal-main-img {
        height: 280px;
    }

    /* Cart drawer becomes full-width at very small widths */
    .cart-drawer {
        width: 100%;
        top: 56px;
        height: calc(100% - 56px);
    }

    /* Extra-small screen tweaks to make product windows fit comfortably */
    /* Cards */
    .alt2-card {
        padding: 10px 8px 40px;
        border-radius: 10px;
        min-height: 0;
    }

    .alt2-card img {
        height: 160px;
    }

    .alt2-card h3 {
        font-size: 16px;
        margin: 6px 0 4px;
    }

    .alt2-card p {
        font-size: 13px;
        line-height: 1.25;
        margin: 6px 0;
    }

    /* Modal adjustments */
    .modal.product-modal {
        margin: 6px;
        max-width: calc(100% - 12px);
        border-radius: 10px;
    }

    .modal.product-modal .modal-body {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 10px;
    }

    .modal.product-modal .modal-main-img,
    .modal.product-modal .product-main-image {
        height: 200px;
        padding: 8px;
    }

    .modal.product-modal .modal-thumbs img,
    .product-thumbs img {
        width: 44px;
        height: 44px;
    }

    .modal.product-modal .modal-title {
        font-size: 20px;
    }

    .modal.product-modal .modal-price {
        font-size: 20px;
    }

    /* Variant controls: two-column compact layout on extra-small screens */
    .modal.product-modal .modal-variant-attrs-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 10px;
        align-items: start;
        width: 100%;
    }

    .modal.product-modal .variant-attr {
        min-width: 0;
        width: 100%;
    }

    .fancy-select select,
    .variant-attr-select {
        font-size: 13px;
        padding: 8px 10px;
    }

    /* Make add button prominent and full-width */
    .modal.product-modal .modal-purchase {
        flex-direction: column;
        align-items: stretch;
    }

    .modal.product-modal #modal-add-btn {
        width: 100%;
        margin-top: 6px;
        font-size: 15px;
        padding: 10px 12px;
    }

    .modal.product-modal .modal-purchase .modal-qty input[type="number"] {
        width: 64px;
    }

    /* Reduce spacing for thumbs and captions */
    .modal-thumbs {
        margin-top: 8px;
    }

    /* Reduce promo video vertical footprint */
    .promo-video {
        max-height: 220px;
    }

    .promo-video-overlay {
        padding: 10px;
    }

    /* Ensure the close button is visible above the modal and header on small screens */
    .modal-overlay .btn-close {
        /* make the button fixed in the viewport so it can't be clipped by modal rounding or overflow */
        position: fixed;
        right: 10px;
        /* account for safe area on notched devices */
        top: calc(env(safe-area-inset-top, 0px) + 10px);
        z-index: 11000;
        background: #fff;
        color: var(--navy);
        border-radius: 8px;
        padding: 6px 8px;
        box-shadow: 0 6px 18px rgba(2, 4, 10, 0.18);
    }

    /* Slightly smaller modal text for constrained widths */
    .modal.product-modal .modal-title {
        font-size: 18px;
    }

    .modal.product-modal .modal-price {
        font-size: 17px;
    }

    .modal.product-modal .modal-desc {
        font-size: 13px;
    }

}

/* Extra-tight rules for the smallest devices to avoid clipping/overflow */
@media (max-width: 360px) {

    /* Make modal body even more compact */
    .modal.product-modal .modal-body {
        padding: 8px;
        gap: 8px;
    }

    .modal.product-modal .modal-main-img,
    .modal.product-modal .product-main-image {
        height: 160px;
        padding: 6px;
    }

    .modal.product-modal .modal-title {
        font-size: 16px;
        line-height: 1.15;
    }

    .modal.product-modal .modal-price {
        font-size: 16px;
        font-weight: 800;
    }

    .modal.product-modal .modal-desc {
        font-size: 13px;
    }

    /* Slightly smaller selects to avoid pushing layout */
    .fancy-select select,
    .variant-attr-select {
        font-size: 12px;
        padding: 6px 8px;
    }

    /* If labels are too long, allow selects to stack to avoid horizontal overflow */
    .modal.product-modal .modal-variant-attrs-container {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    /* Make close button clearly visible above everything */
    .modal .btn-close {
        z-index: 11000;
        background: #fff;
        color: var(--navy);
        border-radius: 8px;
        box-shadow: 0 6px 18px rgba(2, 4, 10, 0.2);
        padding: 6px 8px;
    }

    /* Nudge the modal a bit lower so the close button doesn't overlap the fixed header accidentally */
    .modal-overlay {
        padding-top: 18px;
        padding-bottom: 10px;
    }
}

/* Slightly larger phones / small tablets */
@media (max-width:640px) and (min-width:481px) {
    .alt2-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .alt2-logo {
        width: 56px;
        height: 56px;
    }

    .promo-video-wrap {
        margin: 96px 14px 14px;
    }

    .promo-video {
        max-height: 320px;
    }
}

/* Additional overrides appended to make modal compact on small devices per user request */
@media (max-width: 480px) {

    /* Hide the verbose description and show only compact specs */
    .modal.product-modal .modal-desc {
        display: none !important;
    }

    .modal.product-modal .modal-specs {
        display: block;
        font-size: 11px;
        color: rgba(11, 18, 28, 0.6);
        line-height: 1.2;
        margin-top: 6px;
    }

    /* Force storage/color selectors to be side-by-side (two columns) when space allows */
    .modal.product-modal .modal-variant-attrs-container {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px 10px;
        width: 100%;
    }

    .modal.product-modal .variant-attr {
        width: 100%;
        min-width: 0;
    }

    .modal.product-modal .variant-attr label {
        font-size: 11px;
        color: rgba(11, 18, 28, 0.65);
    }

    .modal.product-modal .variant-attr-select {
        font-size: 13px;
        padding: 8px 10px;
    }

    /* Slightly reduce title/price to fit better */
    .modal.product-modal .modal-title {
        font-size: 18px;
    }

    .modal.product-modal .modal-price {
        font-size: 16px;
    }
}

/* Fallback for very narrow phones: stack selectors and reduce specs further */
@media (max-width: 360px) {
    .modal.product-modal .modal-variant-attrs-container {
        grid-template-columns: 1fr !important;
        gap: 6px;
    }

    .modal.product-modal .modal-specs {
        font-size: 10px;
    }

    .modal.product-modal .modal-title {
        font-size: 15px;
    }

    .modal.product-modal .modal-price {
        font-size: 15px;
    }
}

/* Cart item / totals: ensure the line-total column stays inside the card on narrow screens
   and allow the top flex row to wrap when needed. This keeps the "Total" value from
   overflowing the card edge on mobile. */
.card.cart-item>div:first-child {
    /* match the inline style used by JS but allow wrapping when there's not enough space */
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap;
    /* allow the main row to stack when viewport is narrow */
}

.card.cart-item>div:first-child>div:first-child {
    /* thumbnail container: keep its intrinsic size */
    flex: 0 0 auto;
}

.card.cart-item>div:first-child>div:nth-child(2) {
    /* main content (title + desc): take available space but allow shrinking */
    flex: 1 1 0;
    min-width: 0;
    /* allow content to truncate/wrap instead of forcing overflow */
}

.card.cart-item>div:first-child>div:last-child {
    /* right-side total column: reserve a small fixed area and don't let it grow */
    flex: 0 0 96px;
    min-width: 76px;
    max-width: 140px;
    text-align: right;
}

/* Ensure the smaller 'Total' block wraps its internal text reasonably */
.card.cart-item .qty-display,
.card.cart-item .drawer-qty,
.card.cart-item .remove {
    word-break: keep-all;
}

/* Keep the back-arrow and its label on the same line */
/* On larger screens keep the arrow and label together; on small screens we allow
   normal wrapping to avoid horizontal scrollbars (we override below for mobile). */
#cart-actions a,
#cart-actions a * {
    white-space: nowrap;
}

/* Mobile: stack subtotal, action buttons and the back-link vertically to avoid
   horizontal scrolling. Make buttons full-width and allow the back-link to wrap
   naturally if space is tight. */
@media (max-width: 420px) {
    #cart-actions {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: stretch;
        overflow: visible;
    }

    /* Make primary/secondary action buttons expand to full width for easier tapping */
    #cart-actions .btn,
    #cart-actions .btn-muted,
    #cart-actions #cart-checkout {
        width: 100%;
        box-sizing: border-box;
    }

    /* Remove legacy left-margin on the back-link so it lines up with buttons */
    #cart-actions a {
        margin-left: 0 !important;
        display: inline-block;
        white-space: normal;
        /* allow wrapping if very narrow */
        color: inherit;
        text-decoration: none;
        padding-top: 6px;
        padding-bottom: 6px;
    }
}

/* Fancy input styles for address forms */
.fancy-input {
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
    color: var(--silver);
    font-size: 16px;
    font-family: inherit;
    font-weight: 400;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.fancy-input::placeholder {
    color: var(--lav);
    opacity: 0.8;
    font-size: 16px;
    font-family: inherit;
    font-weight: 400;
}

.fancy-input:focus {
    outline: none;
    border-color: var(--cyan);
    background: rgba(255, 255, 255, 0.04);
}