/* Small additions on top of the original site.min.css for the JS frontend shell. */

/* site.min.css has no size rule for the header logo (.footer-logo img and
   .mobile-logo img are capped, but the main header/.scroll-header .logo img
   is not) - it relied on the original theme's logo file already being
   pre-sized small. Our img/logo.png is a full-resolution 1229x745 export, so
   left unconstrained it renders at native size and eats about half the
   desktop header width. Cap it the same way the mobile logo is capped -
   applies to both headers (see nav.js's headerTemplate, which now renders
   two: the main header and the .scroll-header sticky clone). */
header .logo img,
.scroll-header .logo img {
    max-height: 60px;
    width: auto;
}

/* Lays the hamburger button and logo out side by side inside
   .scroll-header's left column (see nav.js's headerTemplate - the hamburger
   moved here from mainHeader because mainHeader is entirely display:none on
   any screen narrow enough to need a hamburger at all; .scroll-header is
   the only header a mobile visitor ever actually sees). Without this the
   two would just stack as plain block-level siblings. */
.scroll-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Centers the main header's logo between the account icon (left) and
   wishlist/cart icons (right). site.min.css's own `.logo{text-align:center}`
   only centers the logo's own inline content within its box - nothing holds
   the three header-icons/logo/header-icons siblings apart into a true
   3-column layout without this, so the logo just sat wherever normal block
   flow put it (effectively left-aligned, immediately after the account
   icon). The .scroll-header's logo/menu/icons row doesn't need this - it
   already uses Bootstrap's col-lg-3/col-lg-6/col-lg-3 grid classes directly
   (see nav.js), and is deliberately LEFT-aligned there instead of centered
   (matches site.min.css's `.scroll-header .logo{text-align:left}`). */
.main-header-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
}

    .main-header-row .header-right {
        justify-self: end;
    }

.loading-placeholder {
    padding: 60px 20px;
    text-align: center;
    color: #888;
}

.alert {
    padding: 10px 14px;
    border-radius: 4px;
    margin-bottom: 12px;
}

.alert-success {
    background: #e6f4ea;
    color: #1e7e34;
    border: 1px solid #b7e1c1;
}

.alert-danger {
    background: #fdecea;
    color: #a12622;
    border: 1px solid #f4c7c3;
}

/* Header wishlist/cart badges and the account flyout now use the theme's
   own markup shape (see nav.js's headerTemplate) - site.min.css's own
   `.sm-icons li .item-count{position:absolute; top:-9px; right:-13px; ...}`
   rule (higher specificity than a bare `.item-count`) styles the badge as a
   small corner bubble on the icon, and `.user-profile`/`.user-dropdown`
   style the account flyout. No override needed here anymore - there used to
   be one, tuned for a flatter markup shape that didn't match those
   selectors, which is why the badge/flyout used to render in the wrong
   place. */

/* site.min.css's .cart-btn ("Add To Cart", revealed by
   .product-content:hover) has no pointer-events rule, so even at
   opacity:0 in its resting state it still sits in the hit-testing z-order,
   absolutely positioned near the bottom of .product-content - overlapping
   the product name/price - and swallows clicks meant for the links under
   it. That's why clicking a product card often did nothing (or added the
   item to cart) instead of opening the product page. Only accept clicks on
   it once it's actually visible. */
.cart-btn {
    pointer-events: none;
}

.product-content:hover .cart-btn {
    pointer-events: auto;
}

.address-option, .address-card {
    border: 1px solid #eee;
    padding: 10px;
    margin-bottom: 8px;
    border-radius: 4px;
}

[data-nav-link].active {
    font-weight: 600;
}

/* Uniform product card sizing on the product list. Bootstrap's .row is a
   flexbox with the default align-items:stretch, so every .col-* in a row is
   already stretched to the height of the tallest one - but .product-box
   itself (site.min.css only gives it margin-bottom) never actually claims
   that full height, so each card still shrink-wrapped to its own content
   and cards in the same row ended up different heights whenever a product
   name/price took a different number of lines. .product-content already
   has height:100% in site.min.css, but that's a no-op without a sized
   ancestor to be 100% of - .product-box supplies that here. Stacking
   .product-content as a column flex container and letting .product-details
   grow (flex:1) keeps the image a fixed size at the top and pads out
   shorter cards' detail area so every card in a row bottoms out evenly.
   .wishlist-btn/.cart-btn are position:absolute in site.min.css, so they
   sit outside this flow and are unaffected. */
.product-box {
    height: 100%;
    display: flex;
}

.product-content {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.product-details {
    flex: 1 1 auto;
}

/* Whole-card click-to-navigate (see products.js's product-box click
   handler): the card as a whole is a plain div, not a link, so give it a
   pointer cursor to match the "click anywhere on it" behavior. Clicks that
   land on the image/name links, the wishlist heart, or the Add To Cart
   button still resolve to those elements first and keep their own
   behavior - see the handler for how it tells the two apart. */
.product-box {
    cursor: pointer;
}

/* "Already in cart" visual state for a product card's Add To Cart button
   (see products.js's productCardHtml/wireProductCards - toggled from
   ProductSummaryDto.isInCart on render, and again right after a successful
   add). Still only revealed on hover like every other .cart-btn (unchanged
   from site.min.css's opacity/pointer-events behavior) - this just makes
   the label read "Added to Cart" with the button pre-filled in the same
   style site.min.css already uses for :hover, instead of looking exactly
   like an empty "Add To Cart" button once it is revealed. */
.cart-btn.in-cart:hover,
.product-content:hover .cart-btn.in-cart {
    background-color: var(--main-color);
}

.cart-btn.in-cart a,
.cart-btn.in-cart button {
    color: var(--main-color);
}

.cart-btn.in-cart:hover a,
.cart-btn.in-cart:hover button,
.product-content:hover .cart-btn.in-cart a,
.product-content:hover .cart-btn.in-cart button {
    color: #fff;
}

/* Profile picture upload (see profile.js) - the avatar is only clickable
   while the surrounding form is in edit mode (".photo-editable", toggled by
   the same Edit/Save/Cancel buttons that enable the name/mobile fields), so
   it doesn't look interactive while just browsing the page. site.min.css's
   .luxury-item-image has no hover state of its own to build on. */
.luxury-item-image.photo-editable {
    cursor: pointer;
    position: relative;
}

    .luxury-item-image.photo-editable:hover {
        opacity: 0.75;
    }

    .luxury-item-image.photo-editable::after {
        content: "Change";
        position: absolute;
        inset: auto 0 0 0;
        background: rgba(0, 0, 0, 0.55);
        color: #fff;
        font-size: 11px;
        text-align: center;
        padding: 2px 0;
    }

/* Error page (see pages/error.js) - built on top of dynamicPage.js's
   existing ".about-us-container.md-banner"/".about-us-heading"/
   ".about-us-description" (ported from the theme's own errors/minimal.blade.php),
   which already have their own type styling from site.min.css. Only the
   icon badge and the button's top spacing are new. */
.error-page-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin: 0 auto 20px auto;
    border-radius: 50%;
    background: rgba(48, 7, 8, 0.08);
    color: var(--main-color);
}

    .error-page-icon svg {
        width: 32px;
        height: 32px;
    }

.error-page-home-btn {
    display: inline-flex;
    width: auto;
    min-width: 200px;
}

/* Platform home page (see pages/home.js) - shown only for a bare domain hit
   with no tenant segment at all, so it deliberately does NOT reuse any
   tenant-storefront chrome (header/footer are empty here - see main.js's
   handleNavigate, which skips refreshNav() entirely in this case). site.min.css
   has no equivalent of this since the reference theme is single-tenant and
   never renders a page with no store context. */
.platform-hero {
    background: var(--main-color);
    padding: 90px 15px 70px 15px;
    color: #fff;
}

.platform-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 24px auto;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

    .platform-hero-icon svg {
        width: 28px;
        height: 28px;
    }

.platform-hero-title {
    font-size: 42px;
    font-weight: 400;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.platform-hero-subtitle {
    font-size: 16px;
    opacity: 0.85;
    margin: 0;
}

.platform-hero-body {
    padding: 50px 15px 70px 15px;
}

.platform-hero-text {
    max-width: 560px;
    margin: 0 auto 18px auto;
    color: #4a4a4a;
    line-height: 1.6;
}

.platform-hero-text-muted {
    font-size: 13px;
    color: #8a8a8a;
    margin-top: 24px;
}

.platform-hero-example {
    display: inline-block;
    padding: 10px 18px;
    background: #f6f3ef;
    border: 1px solid #e8e6e1;
    color: var(--main-color);
    font-size: 14px;
}

/* ---- Cart drawer (app/cartDrawer.js): internal scrolling fix ----
   site.min.css's own rules cap the item list at a fixed max-height:900px
   with overflow-y:auto, and leave .cart-popup-content (its immediate
   wrapper) as a plain block box with no height of its own. On any screen
   shorter than 900px tall (i.e. almost every laptop/phone), the item list
   just grows past the visible drawer instead of that scrollbar ever
   kicking in - the header/footer stay pinned in place but the middle never
   actually scrolls, and items past the bottom of the screen become
   unreachable. Turning the wrapper into a column flexbox that fills the
   fixed-position .cart-popup's own height (bounded by its own top:0/
   bottom:0, see site.min.css) makes the item list "whatever space is left
   between the header and footer" on any screen, and forces THAT to scroll
   instead of the whole drawer silently overflowing. Scoped to
   #cart-drawer-root (rather than overriding these class names globally)
   since ID-level specificity beats site.min.css's rules without needing
   !important, and in case any of these class names are ever reused
   elsewhere for something unrelated. */
#cart-drawer-root .cart-popup {
    height: 100%;
}

#cart-drawer-root .cart-popup-content {
    height: 100%;
    display: flex;
    flex-direction: column;
}

#cart-drawer-root .c-popup-content {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
}

    /* The 130px bottom margin on the items table was a spacer hack to keep rows
   from disappearing under the old absolutely-positioned footer (see below) -
   with the footer now a normal flex-flow sibling instead of overlapping
   anything, that spacer is just dead scroll space and is removed. */
    #cart-drawer-root .c-popup-content table {
        margin-bottom: 0;
    }

/* Un-absolutely-positions the footer (View Cart/Checkout + subtotal) so it
   takes its natural place at the bottom of the flex column above, instead
   of floating over the last couple of rows of a long item list. */
#cart-drawer-root .cart-popup-btns {
    position: static;
    flex: 0 0 auto;
}

/* ---- "Curated For You" list index (app/pages/curatedWishlists.js) ----
   Net-new UI with no equivalent in the reference theme (it has no concept
   of an admin-curated, customer-specific product list) - built from scratch
   rather than ported, reusing the theme's own card/icon/color language
   (.luxury-info-card's border/radius/shadow, --main-color) so it still
   looks like part of the site instead of a bolted-on component. */
.curated-list-index {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 24px 0 48px 0;
}

.curated-list-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 22px;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

    .curated-list-card:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
        border-color: var(--main-color);
        color: inherit;
    }

.curated-list-card-icon {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #f6f3ef;
    color: var(--main-color);
}

    .curated-list-card-icon svg {
        width: 22px;
        height: 22px;
    }

.curated-list-card-body {
    flex: 1 1 auto;
    min-width: 0;
}

    .curated-list-card-body h3 {
        font-size: 18px;
        font-weight: 600;
        margin: 0 0 4px 0;
        color: var(--main-color);
    }

.curated-list-card-message {
    font-size: 14px;
    color: #6a6a6a;
    margin: 0 0 6px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.curated-list-card-meta {
    font-size: 13px;
    color: #9a9a9a;
}

.curated-list-card-chevron {
    flex: 0 0 auto;
    color: #b5b5b5;
}

.curated-list-empty {
    text-align: center;
    padding: 60px 15px;
    color: #8a8a8a;
}

    .curated-list-empty svg {
        width: 40px;
        height: 40px;
        margin-bottom: 12px;
        color: var(--main-color);
        opacity: 0.6;
    }

/* KYC document upload section (profile.js) */
.kyc-doc-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.kyc-doc-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border: 1px solid #ececec;
    border-radius: 10px;
    background: #fff;
}

.kyc-doc-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.04);
    color: var(--main-color);
}

    .kyc-doc-icon svg {
        width: 20px;
        height: 20px;
    }

.kyc-doc-body {
    flex: 1 1 auto;
    min-width: 0;
}

    .kyc-doc-body h6 {
        margin: 0 0 6px;
        font-size: 15px;
    }

.kyc-doc-filename {
    margin-top: 4px;
    font-size: 12px;
    color: #9a9a9a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kyc-doc-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
}

.kyc-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
}

.kyc-badge-valid {
    background: rgba(40, 167, 69, 0.12);
    color: #1e7e34;
}

.kyc-badge-missing {
    background: rgba(108, 117, 125, 0.14);
    color: #5a6268;
}

.kyc-badge-expired {
    background: rgba(220, 53, 69, 0.12);
    color: #c82333;
}

/* ---------------------------------------------------------------------------
   Mobile nav menu (hamburger + off-canvas panel).

   site.min.css already ships COMPLETE, working CSS for this - #mobileMenuOverlay,
   .mobile-menu-popup (the sliding panel itself, off-canvas at left:-300px,
   sliding to left:0 via its own ".active" class), .mobile-menu-close and
   .mobile-bar-icon (already hidden above 991px / shown at or below it via
   site.min.css's own media queries - no width rule needed here) - all of it
   was simply never wired up: nav.js's header only ever rendered the desktop
   <ul class="menu"> (hover-only dropdowns), with no hamburger button and no
   popup markup at all, so on any screen narrow enough to hide that hover menu
   there was no way left to reach Jewellery/Collection/Products/account links.
   wwwroot/js/main.js (the original theme's own jQuery wiring for exactly this
   button/popup) isn't loaded by index.html either, so nothing in the old
   theme JS would have picked this up even if the markup existed.

   Rather than reproduce the theme's own tap-to-slide submenu-within-submenu
   interaction sight unseen (site.min.css's rules for it are real but only
   partially inferable from the minified selectors, and getting it subtly
   wrong would just trade one broken mobile nav for another), the submenu
   items below are rendered fully expanded under a small heading instead of
   hidden behind a second tap - simpler, and every link is reachable in
   exactly one tap from the hamburger. See nav.js's mobileMenuHtml(). */
#mobileMenuOverlay.active {
    display: block;
}

.mobile-bar-icon {
    cursor: pointer;
}

    .mobile-bar-icon svg {
        height: 22px;
        width: 22px;
        stroke: var(--main-color, #333);
    }

.mobile-menu-close {
    cursor: pointer;
}

    .mobile-menu-close svg {
        height: 20px;
        width: 20px;
    }

/* Clears the absolutely-positioned close button (top:16px/right:36px) so it
   never overlaps the first menu item. */
.mobile-menu-content {
    padding-top: 46px;
}

.mm-group {
    margin-bottom: 8px !important;
}

.mm-group-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .4px;
    margin: 0 0 4px;
    padding: 0 !important;
    border-bottom: none !important;
}

/* Overrides site.min.css's `.mobile-menu-content ul li{font-size:18px;
   font-weight:600;margin-bottom:20px;...}`, which is sized for a short flat
   list of top-level links, not a long list of nested category/metal/stone
   links - left at that size these would wrap awkwardly and make the panel
   feel like a wall of oversized text. */
.mm-sublist {
    margin: 0 0 14px !important;
    padding: 0 !important;
}

    .mm-sublist li {
        margin-bottom: 0 !important;
        font-size: 14px !important;
        font-weight: 400 !important;
    }

        .mm-sublist li a {
            padding: 8px 0 !important;
            border-bottom: 1px solid #f1f1f1 !important;
            color: #555 !important;
        }

/* ---------------------------------------------------------------------------
   Fix: logged-in user's display name/email overflows the page horizontally
   at mobile widths.

   site.min.css renders the account icon's text label (nav.js's
   userProfileLiHtml -> <span class="profile-name">) directly inline next to
   the user SVG icon, not just inside the hover-flyout dropdown. It ships one
   sizing rule for it - `.header-left .profile-name{width:100%;
   text-transform:uppercase;margin-top:4px;color:var(--main-color)}` - but
   that selector only matches the MAIN header's left column (see nav.js's
   headerTemplate: mainHeader's header-left has userProfileLiHtml all to
   itself). The `.scroll-header` sticky clone renders the exact same
   <span class="profile-name"> markup inside a DIFFERENT column instead -
   `.header-right`, col-lg-3/col-6, shared with the wishlist+cart icons - and
   site.min.css has no rule at all for `.profile-name` there. At mobile width
   that column is only ~half the viewport (Bootstrap's col-6), so an
   unconstrained, un-truncated name/email (e.g. "info@tiarasoftwares.in")
   simply pushes the column past 100% width, overflowing the whole page
   horizontally (confirmed live: 40px of horizontal scroll at 375px width).

   Rather than try to truncate the text in a cramped shared column (ellipsis
   here would still leave very little room for the wishlist/cart icons next
   to it), match the icon-only mobile treatment already used elsewhere in
   this file (the hamburger/account icons) - hide the text label below the
   same 991px breakpoint site.min.css itself already uses to switch the
   header into its mobile layout (`.mobile-bar-icon` etc.), leaving just the
   user icon. This also covers the main header's own header-left column,
   which - now that it holds both the hamburger button AND the account icon
   (see mobileMenuMarkupHtml in nav.js) - is too narrow for icon+long text
   there either. Desktop keeps the existing text label unchanged. */
@media (max-width: 991px) {
    .profile-name {
        display: none !important;
    }
}

/* ---------------------------------------------------------------------------
   Fix: product/orders/quotes/my-catalog pagination bar overflows the page
   horizontally at mobile widths.

   buildPagerHtml() (shared by products.js, orders.js, quotes.js and
   myCatalogDetail.js) always renders the full "« First ‹ Prev 1 2 … N
   Next › Last »" control set as one non-wrapping row (`<ul class=
   "pagination">`, and Bootstrap's own `.pagination{display:flex}` never
   wraps it), inside a wrapper the JS gives an accidentally-identical
   "pagination justify-content-center mt-4" class list
   (#pagination-container / #quotes-pagination-container / #orders-
   pagination-container - different ids, always this same class combo). At
   mobile widths the row's natural content width (~456px for the 8-item set
   confirmed live) is wider than the viewport (375px), and because the
   wrapper CENTERS it (Bootstrap's `.justify-content-center{justify-
   content:center!important}`) rather than left-aligning it, the excess
   bleeds out EQUALLY on both sides (confirmed live: left:-41px,
   right:416px - ~41px past the viewport on each edge). The right-side
   bleed is what actually forces the whole page to scroll horizontally
   (document.documentElement.scrollWidth landed at 416px against a 375px
   viewport, independently of the .profile-name issue fixed above - both
   were present on the same page at once); the left-side bleed is simply
   invisible/unreachable, since a non-RTL page can't scroll to a negative
   position.

   Fix: below the same 991px breakpoint used elsewhere in this file,
   left-align the bar instead of centering it (so any overflow only ever
   bleeds to the right, which IS reachable) and let the bar scroll
   horizontally within its own box - so a long pager never forces the whole
   page to scroll, on any of the pages that call buildPagerHtml(). */
@media (max-width: 991px) {
    .pagination.justify-content-center {
        justify-content: flex-start !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
}

/* ---------------------------------------------------------------------------
   Fix: the ENTIRE My Account / Profile page overflows the page horizontally
   at mobile widths (confirmed live: 196px of horizontal scroll, every
   section on the page pushed off the right edge - personal info, address
   book, KYC documents, all of it).

   Root cause, confirmed by testing live: `.luxury-grid` (profile.js's outer
   layout wrapper) is a `display:grid` container, and its child
   `.luxury-main-content` (also profile.js) is a `display:flex` container
   that holds the whole page body. Grid (and flex) items default to
   `min-width:auto`, which means the browser will NOT shrink them below
   their content's own minimum width, even if that's wider than the grid
   track/viewport - here `.luxury-main-content`'s nested rows/columns/forms
   have enough intrinsic width demand that it refuses to shrink below
   ~554px, blowing out its 351px-wide grid track (and, since everything on
   the page lives inside it, the whole page). This is a well-known CSS
   Grid/Flexbox default, not specific to any one class name - profile.js
   also has a `col-xl-9 col-lg-10 col-md-12` column further inside this
   chain (no bare col-12 fallback below 768px), but confirmed via live
   testing that fixing that column's OWN width does nothing on its own -
   its immediate ancestor was already refusing to shrink regardless of
   what width the column itself asked for.

   Fix: the standard fix for this exact situation - override the item's
   default `min-width:auto` down to `0` so it's actually allowed to shrink
   to fit its grid track. Doesn't change anything on desktop (the track is
   already wide enough there, so there's nothing to shrink), only kicks in
   once the track is narrower than the content, i.e. at mobile widths. */
.luxury-main-content {
    min-width: 0;
}

/* ---------------------------------------------------------------------------
   Fix: the quantity indicator next to each wishlist item renders as an
   unreadably thin ~5px-wide sliver instead of a normal number.

   cart.js's quantity control has three children inside `.pd-quantity`
   (a quantity-less button, the number, a quantity-add button - see
   cart.js), which is what gives that flex row its real width. Wishlist
   items have no adjustable quantity in this app (the API has no per-item
   quantity for a wishlist entry, only a fixed display of "1" - see
   wishlist.js), so its `.pd-quantity` there holds only a bare
   `<span class="quantity-count">1</span>` with nothing else in the row.
   site.min.css's sizing for this control assumes those buttons are what
   establish its width; with only one plain text node inside a flex
   container and no explicit width of its own, it collapses to
   near-zero (confirmed live: 4.875px) and the single glyph renders
   squashed into a barely-there vertical sliver.

   Rather than fabricate non-functional +/- buttons wishlist has no backend
   support for, give the number itself a sane minimum box to sit in - fixes
   the sliver on wishlist without changing anything about cart's fuller
   version (which already exceeds this minimum width on its own, so this is
   a no-op there). */
.quantity-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
}

/* ---------------------------------------------------------------------------
   Fix: the mobile "Filter" panel on the product list / my-catalog list
   (products.js and myCatalogDetail.js - both build this same markup) opens,
   but only covers part of the screen with the rest of the page still
   visible - and untouched - behind it.

   site.min.css hardcodes this off-canvas panel at a fixed 320px:
   `.mobile-filter .filter-option{position:fixed;left:-320px;width:320px;...}`
   / `.active{left:0}`. On a 375px-wide viewport that leaves ~55px of the
   actual page (header icons, product cards, footer) visible and fully
   interactive down the right edge, with nothing dimming it - it reads as a
   half-open drawer rather than a deliberate panel, and on a wider phone the
   gap only gets bigger. There was also no way to dismiss it besides the
   small X button - tapping the visible slice of page behind it did nothing.

   Fix: size the panel relative to the viewport instead of a fixed px value
   (capped at the original 320px so it doesn't balloon on tablets), and add
   a full-viewport dimmed backdrop - `.mobile-filter-overlay`, new markup
   added right before this panel in both files - shown/hidden in lockstep
   with the panel (see wireFilterPanel()/its myCatalogDetail.js twin) and
   click-to-close, matching the existing hamburger-menu overlay pattern
   (#mobileMenuOverlay) already used elsewhere in this file. */
@media (max-width: 768px) {
    .mobile-filter .filter-option {
        width: 85%;
        max-width: 320px;
        left: -100%;
    }

        .mobile-filter .filter-option.active {
            left: 0;
        }
}

.mobile-filter-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 99999998;
}

    .mobile-filter-overlay.active {
        display: block;
    }

/* ---------------------------------------------------------------------------
   Fix: on the product detail page, the extra product images render as
   full-width blocks stacked vertically underneath the main image (a wall of
   large images), instead of a row of small thumbnails.

   productDetail.js's thumbnail rail (`.pd-nav-img-slider`, one `.slider-item`
   per image) is built as static markup meant to be enhanced by the Slick
   carousel library - site.min.css's rules for it (`.slick-current`,
   `.slick-list`, etc.) only take effect once Slick's JS actually runs and
   restructures the DOM into a horizontal track. Slick's stylesheets are
   loaded (slick.css/slick-theme.css) but its script never is (see
   index.html - only jquery/bootstrap/feather are loaded), so these stay
   plain stacked `display:block` divs everywhere: on desktop that
   accidentally looks fine (site.min.css's `.pd-slider-nav{max-width:90px}`
   column is narrow, so a vertical stack of thumbnails there reads as a
   normal vertical thumbnail rail next to the main image), but site.min.css
   also has `@media(max-width:768px) .pd-nav-img-slider .pd-main-img{
   width:100%}`, which - combined with no flex/grid layout ever applied to
   the row itself - turns every thumbnail into a full-width block on mobile
   confirmed live: two 351px-wide, 70px-tall bars stacked one under the
   other below the main image, instead of a compact side-by-side row.

   Fix: lay the thumbnail rail out as a plain wrapping flex row below 768px
   (skipping Slick entirely, consistent with this codebase's existing
   approach of using plain CSS instead of reproducing the theme's JS-driven
   carousels/dropdowns - see the mobile nav menu fix earlier in this file),
   and keep each thumbnail at the same small fixed size site.min.css already
   uses for the desktop vertical rail instead of letting them stretch to
   full width. Desktop (>768px) is completely unaffected. */
@media (max-width: 768px) {
    .pd-nav-img-slider {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

        .pd-nav-img-slider .slider-item {
            max-width: 70px;
            margin-bottom: 0;
        }

        .pd-nav-img-slider .pd-main-img {
            width: 70px;
            height: 70px;
        }
}

/* /ai-search page (see wwwroot/app/pages/aiSearch.js) - a full hero banner
   above the product grid rather than a plain heading+input, since this is a
   headline feature worth a proper landing moment rather than looking like
   an afterthought bolted onto the product grid. site.min.css has no rules
   for any of these classes since the whole page is new - reuses --main-
   color/--pre-color (the theme's own burgundy/brown, see site.min.css's
   :root) so it reads as part of this store's branding, not a generic
   AI-feature template dropped in from elsewhere. */
.ai-search-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--main-color, #300708), var(--pre-color, #4c1d00));
    padding: 64px 20px 56px;
    text-align: center;
    color: #fff;
    margin-bottom: 40px;
}

/* A soft, oversized radial glow behind the content - purely decorative,
   what keeps a flat two-color gradient from reading as a plain "banner ad"
   block. Clipped by the hero's own overflow:hidden, so it never affects
   layout/scroll width. */
.ai-search-hero-glow {
    position: absolute;
    top: -180px;
    left: 50%;
    transform: translateX(-50%);
    width: 640px;
    height: 640px;
    max-width: 160vw;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 60%);
    pointer-events: none;
}

.ai-search-hero-inner {
    position: relative;
    max-width: 640px;
    margin: 0 auto;
}

.ai-search-icon-badge {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .35);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-search-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    padding: 5px 14px;
    margin-bottom: 16px;
}

.ai-search-heading {
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 10px;
}

.ai-search-subheading {
    font-size: 15px;
    color: rgba(255, 255, 255, .82);
    margin: 0 0 26px;
    line-height: 1.6;
}

.ai-search-form {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border-radius: 999px;
    padding: 6px 6px 6px 20px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .25);
}

.ai-search-form-icon {
    flex: 0 0 auto;
    display: flex;
    color: var(--main-color, #300708);
    opacity: .6;
}

.ai-search-form input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    padding: 12px 6px;
    font-size: 15px;
    color: #222;
    background: transparent;
}

.ai-search-submit {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--main-color, #300708);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 13px 22px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    cursor: pointer;
}

    .ai-search-submit:hover {
        opacity: .92;
    }

    .ai-search-submit svg {
        width: 16px;
        height: 16px;
    }

.ai-search-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 22px;
}

.ai-search-chips-label {
    font-size: 13px;
    color: rgba(255, 255, 255, .7);
    margin-right: 2px;
}

.ai-search-chip {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .35);
    color: #fff;
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: background .15s ease;
}

    .ai-search-chip:hover {
        background: rgba(255, 255, 255, .24);
    }

.ai-search-status {
    display: none;
    margin-top: 18px;
    color: rgba(255, 255, 255, .85);
    font-size: 14px;
}

/* Below ~560px the pill-shaped input+button row gets too cramped to keep on
   one line (the button's label starts clipping) - stack the button under
   the input instead, still inside the same rounded white card. */
@media (max-width: 560px) {
    .ai-search-hero {
        padding: 48px 16px 40px;
    }

    .ai-search-heading {
        font-size: 26px;
    }

    .ai-search-form {
        flex-wrap: wrap;
        border-radius: 20px;
        padding: 14px;
    }

    .ai-search-form-icon {
        display: none;
    }

    .ai-search-form input[type="text"] {
        flex: 1 1 100%;
        padding: 8px 4px;
    }

    .ai-search-submit {
        flex: 1 1 100%;
        justify-content: center;
    }
}

/* ============================================================================
   Signup spin-wheel promo popup (see app/signupSpinPopup.js) - none of this
   exists in site.min.css since the whole component is new. Colors are CSS
   variables so the tenant's real brand palette can be dropped in later
   without touching the markup/JS - currently a warm mauve/burgundy set
   loosely matching the reference screenshot the tenant shared.
   ============================================================================ */
:root {
    --spin-light: #f3e9dd;
    --spin-dark: #6b4a4a;
    --spin-accent: #7a2038;
}

.signup-spin-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(20, 12, 12, .55);
    z-index: 999999999;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

    .signup-spin-overlay.active {
        display: flex;
    }

.signup-spin-modal {
    position: relative;
    display: flex;
    background: #fff;
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow: auto;
    border-radius: 6px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}

.signup-spin-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.signup-spin-panel {
    padding: 34px;
    box-sizing: border-box;
}

.signup-spin-wheel-panel {
    flex: 0 0 44%;
    background: linear-gradient(180deg, #f7ecec, #fbe4ea);
    display: flex;
    align-items: center;
    justify-content: center;
}

.signup-spin-wheel-wrap {
    position: relative;
    width: 260px;
    height: 260px;
    max-width: 100%;
}

.spin-wheel-pointer {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-top: 18px solid var(--spin-accent);
    z-index: 3;
}

.spin-wheel-face {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: 0 0 0 6px #fff, 0 4px 20px rgba(0, 0, 0, .25);
    transition: transform 4s cubic-bezier(.17, .67, .16, .99);
}

.spin-wheel-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.spin-wheel-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.spin-wheel-label-highlight {
    font-size: 10px;
}

.spin-wheel-hub {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--spin-dark);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.3;
    box-shadow: 0 0 0 4px #fff;
    z-index: 2;
    padding: 4px;
}

.signup-spin-form-panel {
    flex: 1 1 56%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.signup-spin-brand {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.signup-spin-heading {
    font-size: 22px;
    margin-bottom: 6px;
}

.signup-spin-subheading {
    color: #666;
    margin-bottom: 20px;
    font-size: 14px;
}

.signup-spin-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.signup-spin-phone-field {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

.signup-spin-phone-code {
    padding: 12px 14px;
    border-right: 1px solid #ddd;
    color: #666;
    background: #f8f8f8;
}

.signup-spin-phone-field input {
    flex: 1;
    border: none;
    padding: 12px 14px;
    font-size: 14px;
    outline: none;
    min-width: 0;
}

.signup-spin-submit {
    background: var(--spin-dark);
    color: #fff;
    border: none;
    padding: 14px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    cursor: pointer;
}

    .signup-spin-submit:disabled {
        opacity: .7;
        cursor: default;
    }

    .signup-spin-submit:hover:not(:disabled) {
        opacity: .92;
    }

.signup-spin-result {
    margin-top: 16px;
    padding: 12px;
    background: #f6f0e9;
    border-radius: 4px;
    font-size: 14px;
}

.signup-spin-secure {
    margin-top: 18px;
    font-size: 13px;
    color: #4a8f4a;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

    .signup-spin-secure svg {
        width: 15px;
        height: 15px;
    }

.signup-spin-register {
    margin-top: 10px;
    font-size: 13px;
    color: #666;
}

    .signup-spin-register a {
        color: var(--spin-dark);
        font-weight: 600;
        text-decoration: underline;
    }

@media (max-width: 720px) {
    .signup-spin-modal {
        flex-direction: column;
        max-height: 95vh;
    }

    .signup-spin-wheel-panel {
        flex: none;
        padding: 24px;
    }

    .signup-spin-wheel-wrap {
        width: 220px;
        height: 220px;
    }

    .signup-spin-form-panel {
        flex: none;
        padding: 24px;
    }
}

/* ============================================================================
   Collection mega menu (see nav.js's collectionMenuItemHtml) - reuses the
   Jewellery menu's own .dropdwon-main/.menu-dropdown/.mega-box container
   rules from site.min.css (full-width flyout, mega-box list typography),
   these rules only add the new featured-card row and the 2-column link grid
   inside it - nothing here touches .dropdwon-main/.mega-box's own base
   rules, so the Jewellery menu is unaffected.
   ============================================================================ */
/* site.min.css's shared .menu-dropdown rule uses justify-content:space-
   between - built for the Jewellery menu's 4 evenly-spread columns, but it
   stretches this menu's only two children (the card row and the link list)
   to opposite edges of the full-width dropdown, leaving an odd empty gap
   between them. Scoped to this menu only (via the extra class below) so the
   Jewellery menu's own layout is untouched. */
.collection-mega-menu-dropdown {
    justify-content: flex-start;
    gap: 60px;
}

.collection-mega-cards {
    display: flex;
    gap: 16px;
    flex: 0 1 auto;
}

.collection-mega-card {
    position: relative;
    flex: 1 1 0;
    display: block;
    border-radius: 4px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    max-width: 220px;
}

    .collection-mega-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform .3s ease;
    }

    .collection-mega-card:hover img {
        transform: scale(1.05);
    }

.collection-mega-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .65) 100%);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 12px;
}

.collection-mega-card-title {
    color: #fff;
    font-weight: 600;
    font-size: 14px;
}

.collection-mega-card-arrow {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

    .collection-mega-card-arrow svg {
        width: 14px;
        height: 14px;
    }

.collection-mega-links {
    flex: 0 0 240px;
}

.collection-links-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 20px;
}

/* "" (bare /{tenantKey}) landing page - wwwroot/app/pages/storeHome.js.
   Same gradient-hero-with-glow visual language as .ai-search-hero above
   (reuses --main-color/--pre-color so it reads as this store's own
   branding, not a generic template), plus a category strip, a reused
   product grid (see products.js's .product-card, untouched here), a
   4-up value-prop row and a newsletter signup band. */
.store-home-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--main-color, #300708), var(--pre-color, #4c1d00));
    padding: 90px 20px 76px;
    text-align: center;
    color: #fff;
    margin-bottom: 48px;
}

.store-home-hero-glow {
    position: absolute;
    top: -220px;
    left: 50%;
    transform: translateX(-50%);
    width: 760px;
    height: 760px;
    max-width: 170vw;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 60%);
    pointer-events: none;
}

.store-home-hero-inner {
    position: relative;
    max-width: 680px;
    margin: 0 auto;
}

.store-home-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    padding: 5px 16px;
    margin-bottom: 20px;
}

.store-home-heading {
    font-family: var(--rokkitt-font, inherit);
    font-size: 42px;
    line-height: 1.2;
    font-weight: 700;
    color: #fff;
    margin: 0 0 16px;
}

.store-home-subheading {
    font-size: 15px;
    color: rgba(255, 255, 255, .84);
    margin: 0 auto 30px;
    line-height: 1.7;
    max-width: 540px;
}

.store-home-hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.store-home-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform .15s ease, background .15s ease;
}

    .store-home-btn:hover {
        transform: translateY(-1px);
    }

.store-home-btn-primary {
    background: #fff;
    color: var(--main-color, #300708);
}

    .store-home-btn-primary:hover {
        background: #f2ece9;
        color: var(--main-color, #300708);
    }

.store-home-btn-ghost {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .45);
    color: #fff;
}

    .store-home-btn-ghost:hover {
        background: rgba(255, 255, 255, .22);
        color: #fff;
    }

.store-home-section {
    max-width: 1200px;
    margin: 0 auto 56px;
    padding: 0 20px;
}

.store-home-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}

    .store-home-section-head h2 {
        font-family: var(--rokkitt-font, inherit);
        font-size: 24px;
        font-weight: 700;
        color: #222;
        margin: 0;
    }

.store-home-see-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--main-color, #300708);
    text-decoration: none;
}

    .store-home-see-all svg {
        width: 14px;
        height: 14px;
    }

.store-home-cats {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}

.store-home-cat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
}

.store-home-cat-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    background: #f4efec;
    transition: box-shadow .2s ease;
}

.store-home-cat-card:hover .store-home-cat-img {
    box-shadow: 0 0 0 3px var(--main-color, #300708);
}

.store-home-cat-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.store-home-cat-name {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .3px;
    text-align: center;
    color: #333;
}

.store-home-values {
    background: #faf6f4;
    padding: 48px 20px;
    border-radius: 12px;
}

.store-home-values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    max-width: 1200px;
    margin: 0 auto;
}

.store-home-value {
    text-align: center;
}

.store-home-value-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--main-color, #300708);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
}

.store-home-value h4 {
    font-family: var(--rokkitt-font, inherit);
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 6px;
    color: #222;
}

.store-home-value p {
    font-size: 13px;
    color: #888;
    line-height: 1.6;
    margin: 0;
}

.store-home-newsletter {
    background: linear-gradient(135deg, var(--pre-color, #4c1d00), var(--main-color, #300708));
    padding: 56px 20px;
    text-align: center;
    color: #fff;
}

.store-home-newsletter-inner {
    max-width: 520px;
    margin: 0 auto;
}

    .store-home-newsletter-inner h3 {
        font-family: var(--rokkitt-font, inherit);
        font-size: 24px;
        font-weight: 700;
        margin: 0 0 8px;
        color: #fff;
    }

    .store-home-newsletter-inner p {
        font-size: 14px;
        color: rgba(255, 255, 255, .82);
        margin: 0 0 24px;
    }

.store-home-newsletter-form {
    display: flex;
    gap: 8px;
    background: #fff;
    border-radius: 999px;
    padding: 6px 6px 6px 20px;
}

    .store-home-newsletter-form input {
        flex: 1 1 auto;
        min-width: 0;
        border: none;
        outline: none;
        padding: 12px 6px;
        font-size: 14px;
        color: #222;
        background: transparent;
    }

    .store-home-newsletter-form button {
        flex: 0 0 auto;
        background: var(--main-color, #300708);
        color: #fff;
        border: none;
        border-radius: 999px;
        padding: 13px 24px;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: .5px;
        text-transform: uppercase;
        cursor: pointer;
    }

@media (max-width: 992px) {
    .store-home-cats {
        grid-template-columns: repeat(3, 1fr);
    }

    .store-home-values-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (max-width: 576px) {
    .store-home-heading {
        font-size: 30px;
    }

    .store-home-cats {
        grid-template-columns: repeat(2, 1fr);
    }

    .store-home-values-grid {
        grid-template-columns: 1fr;
    }

    .store-home-newsletter-form {
        flex-direction: column;
        border-radius: 16px;
        padding: 14px;
    }

        .store-home-newsletter-form input {
            padding: 10px 8px;
            text-align: center;
        }
}

/* Checkout's Stripe/PayPal payment modal (wwwroot/app/pages/checkout.js's
   openPaymentModal) - Razorpay opens its own full-screen widget and never
   needs this, but Stripe (card entry via Elements) and PayPal (its own
   Buttons) both need a small piece of on-page UI to actually collect the
   payment, so this is that shared scaffold: a simple centered overlay box. */
.payment-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 20px;
}

.payment-modal {
    background: #fff;
    border-radius: 8px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
    overflow: hidden;
}

.payment-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #eee2dc;
    font-family: var(--rokkitt-font, inherit);
    font-weight: 600;
    font-size: 15px;
    color: #222;
}

.payment-modal-close {
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    color: #999;
}

    .payment-modal-close:hover {
        color: #333;
    }

.payment-modal-body {
    padding: 24px 20px;
}

.stripe-card-element {
    border: 1px solid #d8cfca;
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 16px;
    background: #fff;
}

.payment-modal-error {
    color: #a33;
    font-size: 13px;
    min-height: 18px;
    margin-bottom: 8px;
}

.payment-modal-pay-btn {
    width: 100%;
    background: var(--main-color, #300708);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    cursor: pointer;
}

    .payment-modal-pay-btn:hover {
        background: var(--pre-color, #4c1d00);
    }

    .payment-modal-pay-btn:disabled {
        opacity: .7;
        cursor: default;
    }