/* 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;
}

/* 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;
}