/**

 * File:     style.css

 * Location: /wptruss/custom-blocks/mini-store/style.css

 * Purpose:  Complete frontend styles for the Mini Store block.

 *

 *           Design language: editorial luxury — the language of high fashion

 *           retail. Black headers with champagne gold accents. Ivory canvas.

 *           Refined typography. Zero noise.

 *

 *           Default color roles (Noir Atelier preset):

 *             --wpt-color-primary    champagne gold  -- CTAs, active states, price

 *             --wpt-color-dark       near-black       -- header, drawer, card names

 *             --wpt-color-light      ivory white      -- page canvas, modal bg

 *             --wpt-color-surface    warm off-white   -- product cards

 *             --wpt-color-border     cream            -- all dividers

 *             --wpt-color-muted      warm gray        -- secondary text

 *             --wpt-color-secondary  true black       -- high-contrast text

 *             --wpt-font-heading     Cormorant/Playfair -- editorial serif

 *             --wpt-font-body        Jost/DM Sans     -- geometric sans

 *

 *           Layout:

 *             - Block wrapper is flex column, min-height 100vh

 *             - Grid has flex:1 so content fills height, nav sticks to bottom

 *             - Sticky nav: position:sticky bottom:0 — requires block to be

 *               inside a scroll container, not the full page body

 *             - Modal slides up from bottom on mobile, centers on desktop

 *             - Cart drawer slides in from the right

 *

 *           Logo:

 *             - .wpt-ms-logo -- the <img> element, sized by height token class

 *             - .wpt-ms-logo--sm / --md / --lg: 32px / 44px / 60px tall

 *             - .wpt-ms-logo--desktop hidden on mobile when mobile logo set

 *             - .wpt-ms-logo--mobile shown on mobile when set, hidden on desktop

 *             - .wpt-ms-brand-name: text fallback when no logo is configured

 *             - Header placement modifiers:

 *                 .wpt-ms-header--logo-left   (default) logo left, cart right

 *                 .wpt-ms-header--logo-center logo centered, cart absolute right

 *                 .wpt-ms-header--logo-right  logo right, cart left

 *

 *           Governance:

 *             - Zero hardcoded hex values

 *             - Zero hardcoded px for spacing or radius -- all tokens

 *             - No Unicode glyphs in CSS content: values -- use \XXXX escapes

 *             - No CSS transitions (V1 motion layer policy)

 *             - BEM: .wpt-ms-{element} / .wpt-ms-{element}--{modifier}

 *

 * Encoding: UTF-8 without BOM.

 */



/* ==========================================================================

   1. BLOCK WRAPPER

   ========================================================================== */



.wpt-mini-store {

    position: relative;

    display: flex;

    flex-direction: column;

    min-height: 100vh;

    width: 100%;

    max-width: 100%;

    overflow-x: hidden;

    box-sizing: border-box;

    background-color: var(--wpt-color-light, #FAF9F7);

    font-family: var(--wpt-font-body, 'Jost', sans-serif);

    color: var(--wpt-color-dark, #0D0D0D);

    isolation: isolate;

}



/* ==========================================================================

   2. STORE HEADER

   ========================================================================== */



.wpt-ms-header {

    display: flex;

    align-items: center;

    padding: var(--wpt-spacing-sm, 0.5rem) var(--wpt-spacing-lg, 1.5rem);

    background-color: #FFFFFF;

    border-bottom: 1px solid var(--wpt-color-border, #E0DBD3);

    min-height: 60px;

    gap: var(--wpt-spacing-md, 1rem);

    position: relative;

}



/* ── Placement: left (default) ─────────────────────────────────────────── */

.wpt-ms-header--logo-left .wpt-ms-logo-wrap {

    flex: 1 1 0%;

    display: flex;

    justify-content: flex-start;

    align-items: center;

}



.wpt-ms-header--logo-left .wpt-ms-cart-icon-btn {

    flex-shrink: 0;

    margin-left: auto;

}



/* ── Placement: center ─────────────────────────────────────────────────── */

.wpt-ms-header--logo-center {

    justify-content: center;

}



.wpt-ms-header--logo-center .wpt-ms-logo-wrap {

    display: flex;

    justify-content: center;

    align-items: center;

}



.wpt-ms-header--logo-center .wpt-ms-cart-icon-btn {

    position: absolute;

    right: var(--wpt-spacing-lg, 1.5rem);

    top: 50%;

    transform: translateY(-50%);

}



/* ── Placement: right ──────────────────────────────────────────────────── */

.wpt-ms-header--logo-right {

    flex-direction: row-reverse;

}



.wpt-ms-header--logo-right .wpt-ms-logo-wrap {

    flex: 1 1 0%;

    display: flex;

    justify-content: flex-end;

    align-items: center;

}



.wpt-ms-header--logo-right .wpt-ms-cart-icon-btn {

    flex-shrink: 0;

    margin-right: auto;

}



/* ==========================================================================

   3. LOGO

   ========================================================================== */



.wpt-ms-logo {

    display: block;

    width: auto;

    object-fit: contain;

    object-position: left center;

}



/* Size variants */

.wpt-ms-logo--sm { height: 32px; }

.wpt-ms-logo--md { height: 44px; }

.wpt-ms-logo--lg { height: 60px; }



/* Centered placement — logo centres itself */

.wpt-ms-header--logo-center .wpt-ms-logo {

    object-position: center center;

    margin: 0 auto;

}



/* Right placement */

.wpt-ms-header--logo-right .wpt-ms-logo {

    object-position: right center;

}



/* Mobile / desktop visibility swap when both logos set */

.wpt-ms-logo--mobile  { display: none;  }

.wpt-ms-logo--desktop { display: block; }



@media (max-width: 640px) {

    .wpt-ms-logo--desktop { display: none;  }

    .wpt-ms-logo--mobile  { display: block; }

}



/* Brand name text fallback */

.wpt-ms-brand-name {

    font-family: var(--wpt-font-heading, 'Cormorant Garamond', serif);

    font-size: var(--wpt-text-xl, 1.25rem);

    font-weight: 600;

    color: var(--wpt-color-primary, #C9A96E);

    letter-spacing: 0.12em;

    text-transform: uppercase;

}



/* ==========================================================================

   4. CART ICON BUTTON IN HEADER

   ========================================================================== */



.wpt-ms-cart-icon-btn {

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    background: transparent;

    border: 1px solid var(--wpt-color-border, #E0DBD3);

    color: var(--wpt-color-dark, #0D0D0D);

    border-radius: var(--wpt-radius-full, 9999px);

    width: 40px;

    height: 40px;

    cursor: pointer;

    font-size: var(--wpt-text-lg, 1.125rem);

    line-height: 1;

    padding: 0;

    flex-shrink: 0;

}



.wpt-ms-cart-icon-btn:hover {

    border-color: var(--wpt-color-primary, #C9A96E);

    color: var(--wpt-color-primary, #C9A96E);

}



.wpt-ms-cart-icon-btn:focus-visible {

    outline: 2px solid var(--wpt-color-primary, #C9A96E);

    outline-offset: 2px;

}



.wpt-ms-cart-badge {

    position: absolute;

    top: -5px;

    right: -5px;

    background-color: var(--wpt-color-primary, #C9A96E);

    color: var(--wpt-color-dark, #0D0D0D);

    font-family: var(--wpt-font-body, 'Jost', sans-serif);

    font-size: 10px;

    font-weight: 700;

    line-height: 1;

    min-width: 18px;

    height: 18px;

    border-radius: var(--wpt-radius-full, 9999px);

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0 3px;

}



/* ==========================================================================

   5. FILTERS BAR

   ========================================================================== */



.wpt-ms-filters {

    display: flex;

    align-items: center;

    gap: var(--wpt-spacing-sm, 0.5rem);

    padding: var(--wpt-spacing-xs, 0.25rem) var(--wpt-spacing-lg, 1.5rem);

    background-color: var(--wpt-color-light, #FAF9F7);

    border-bottom: 1px solid var(--wpt-color-border, #E0DBD3);

}



.wpt-ms-search-input {

    flex: 1 1 0%;

    padding: var(--wpt-spacing-xs, 0.25rem) var(--wpt-spacing-sm, 0.5rem);

    border: 1px solid var(--wpt-color-border, #E0DBD3);

    border-radius: var(--wpt-radius-sm, 0.25rem);

    background-color: var(--wpt-color-light, #FAF9F7);

    color: var(--wpt-color-dark, #0D0D0D);

    font-family: var(--wpt-font-body, 'Jost', sans-serif);

    font-size: var(--wpt-text-sm, 0.875rem);

}



.wpt-ms-search-input::placeholder {

    color: var(--wpt-color-muted, #9A9490);

}



.wpt-ms-search-input:focus {

    outline: 1px solid var(--wpt-color-primary, #C9A96E);

    border-color: var(--wpt-color-primary, #C9A96E);

}



.wpt-ms-cat-select {

    padding: var(--wpt-spacing-xs, 0.25rem) var(--wpt-spacing-sm, 0.5rem);

    border: 1px solid var(--wpt-color-border, #E0DBD3);

    border-radius: var(--wpt-radius-sm, 0.25rem);

    background-color: var(--wpt-color-light, #FAF9F7);

    color: var(--wpt-color-dark, #0D0D0D);

    font-family: var(--wpt-font-body, 'Jost', sans-serif);

    font-size: var(--wpt-text-sm, 0.875rem);

    cursor: pointer;

    min-width: 130px;

}



.wpt-ms-cat-select:focus {

    outline: 1px solid var(--wpt-color-primary, #C9A96E);

    border-color: var(--wpt-color-primary, #C9A96E);

}



/* ==========================================================================

   6. PRODUCT GRID

   ========================================================================== */



.wpt-ms-grid {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 1px;               /* 1px gap creates a gallery-wall grid line effect */

    background-color: var(--wpt-color-border, #E0DBD3); /* gap color = border token */

    flex: 1 1 auto;

    align-content: start;

    /* Bottom padding clears the sticky nav */

    padding-bottom: 64px;

}



@media (min-width: 768px) {

    .wpt-ms-grid {

        grid-template-columns: repeat(3, 1fr);

    }

}



@media (min-width: 1200px) {

    .wpt-ms-grid {

        grid-template-columns: repeat(4, 1fr);

    }

}



/* ==========================================================================

   7. PRODUCT CARD

   ========================================================================== */



.wpt-ms-card {

    display: flex;

    flex-direction: column;

    background-color: var(--wpt-color-surface, #F2EFE9);

    cursor: pointer;

    /* No border — gap between grid cells acts as the separator */

}



.wpt-ms-card:focus-visible {

    outline: 2px solid var(--wpt-color-primary, #C9A96E);

    outline-offset: -2px;

}



/* Hover: subtly lift card surface */

.wpt-ms-card:hover {

    background-color: var(--wpt-color-light, #FAF9F7);

}



/* Card image */

.wpt-ms-card-img-wrap {

    position: relative;

    aspect-ratio: 3 / 4;   /* Portrait ratio — fashion photography standard */

    overflow: hidden;

    background-color: var(--wpt-color-border, #E0DBD3);

}



.wpt-ms-card-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}



/* OOS ribbon */

.wpt-ms-card-oos {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    padding: 4px var(--wpt-spacing-xs, 0.25rem);

    background-color: var(--wpt-color-dark, #0D0D0D);

    color: var(--wpt-color-muted, #9A9490);

    font-family: var(--wpt-font-body, 'Jost', sans-serif);

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    text-align: center;

}



/* Card info */

.wpt-ms-card-info {

    display: flex;

    flex-direction: column;

    gap: 3px;

    padding: var(--wpt-spacing-sm, 0.5rem) var(--wpt-spacing-sm, 0.5rem) var(--wpt-spacing-md, 1rem);

    flex: 1 1 auto;

    position: relative;

}



.wpt-ms-card-name {

    font-family: var(--wpt-font-heading, 'Cormorant Garamond', serif);

    font-size: var(--wpt-text-base, 1rem);

    font-weight: 500;

    color: var(--wpt-color-dark, #0D0D0D);

    margin: 0;

    line-height: 1.3;

    letter-spacing: 0.01em;

}



.wpt-ms-card-price {

    font-family: var(--wpt-font-body, 'Jost', sans-serif);

    font-size: var(--wpt-text-sm, 0.875rem);

    color: var(--wpt-color-primary, #C9A96E);

    font-weight: 500;

    letter-spacing: 0.02em;

}



.wpt-ms-card-price .woocommerce-Price-amount {

    color: var(--wpt-color-primary, #C9A96E);

}



.wpt-ms-card-options-hint {

    font-family: var(--wpt-font-body, 'Jost', sans-serif);

    font-size: 10px;

    color: var(--wpt-color-muted, #9A9490);

    letter-spacing: 0.08em;

    text-transform: uppercase;

}



.wpt-ms-card-chevron {

    position: absolute;

    bottom: var(--wpt-spacing-sm, 0.5rem);

    right: var(--wpt-spacing-sm, 0.5rem);

    font-size: var(--wpt-text-base, 1rem);

    color: var(--wpt-color-primary, #C9A96E);

    line-height: 1;

    opacity: 0.7;

}



/* Lazy placeholder */

.wpt-ms-lazy {

    background-color: var(--wpt-color-border, #E0DBD3);

}



/* Empty state */

.wpt-ms-empty {

    grid-column: 1 / -1;

    background-color: var(--wpt-color-light, #FAF9F7);

    text-align: center;

    padding: var(--wpt-spacing-3xl, 4rem) var(--wpt-spacing-lg, 1.5rem);

    color: var(--wpt-color-muted, #9A9490);

    font-family: var(--wpt-font-body, 'Jost', sans-serif);

    font-size: var(--wpt-text-sm, 0.875rem);

    letter-spacing: 0.04em;

}



/* Grid spinner */

.wpt-ms-grid-spinner {

    grid-column: 1 / -1;

    background-color: var(--wpt-color-light, #FAF9F7);

    display: flex;

    align-items: center;

    justify-content: center;

    padding: var(--wpt-spacing-2xl, 2.5rem);

    aspect-ratio: 1;

}



.wpt-ms-grid-spinner::after {

    content: '';

    width: 28px;

    height: 28px;

    border: 1px solid var(--wpt-color-border, #E0DBD3);

    border-top-color: var(--wpt-color-primary, #C9A96E);

    border-radius: var(--wpt-radius-full, 9999px);

}



.wpt-ms-sentinel { height: 1px; width: 100%; }



/* ==========================================================================

   8. STICKY BOTTOM NAV

   ========================================================================== */



.wpt-ms-nav {

    position: fixed;

    bottom: 0;

    left: 0;

    right: 0;

    z-index: 40;

    display: flex;

    align-items: stretch;

    background-color: var(--wpt-color-dark, #0D0D0D);

    border-top: 1px solid rgba(201, 169, 110, 0.2);

}



.wpt-ms-nav-btn {

    flex: 1 1 0%;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 2px;

    padding: var(--wpt-spacing-sm, 0.5rem) var(--wpt-spacing-xs, 0.25rem);

    min-height: 48px;

    background: transparent;

    border: none;

    border-right: 1px solid rgba(255, 255, 255, 0.06);

    color: var(--wpt-color-muted, #9A9490);

    font-family: var(--wpt-font-body, 'Jost', sans-serif);

    font-size: 10px;

    font-weight: 500;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    cursor: pointer;

}



.wpt-ms-nav-btn:last-child {

    border-right: none;

}



.wpt-ms-nav-btn.active {

    color: var(--wpt-color-primary, #C9A96E);

}



.wpt-ms-nav-btn:focus-visible {

    outline: 1px solid var(--wpt-color-primary, #C9A96E);

    outline-offset: -2px;

}



/* Nav SVG icons — must be constrained or they will inherit and grow huge */

.wpt-ms-nav-icon {

    width: 20px;

    height: 20px;

    flex-shrink: 0;

    display: block;

}



.wpt-ms-cart-count {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background-color: var(--wpt-color-primary, #C9A96E);

    color: var(--wpt-color-dark, #0D0D0D);

    font-size: 10px;

    font-weight: 700;

    min-width: 16px;

    height: 16px;

    border-radius: var(--wpt-radius-full, 9999px);

    padding: 0 3px;

    line-height: 1;

}



/* ==========================================================================

   9. OVERLAY

   ========================================================================== */



#wpt-ms-overlay {

    position: fixed;

    inset: 0;

    z-index: 100;

    background-color: var(--wpt-color-dark, #0D0D0D);

    opacity: 0.65;

}



/* ==========================================================================

   10. PRODUCT MODAL

   ========================================================================== */



.wpt-ms-modal {

    position: fixed;

    inset: 0;

    z-index: 110;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    pointer-events: none;

}



.wpt-ms-modal:not([hidden]) { pointer-events: auto; }

.wpt-ms-modal[hidden]       { display: none; }



.wpt-ms-modal-inner {

    position: relative;

    width: 100%;

    max-width: 100%;

    box-sizing: border-box;

    max-height: 92dvh;

    max-height: 92vh;

    overflow-y: auto;

    overflow-x: hidden;

    background-color: var(--wpt-color-light, #FAF9F7);

    border-top: 1px solid var(--wpt-color-border, #E0DBD3);

    padding: var(--wpt-spacing-lg, 1.5rem);

    padding-bottom: var(--wpt-spacing-4xl, 6rem);

}



@media (min-width: 768px) {

    .wpt-ms-modal {

        align-items: center;

    }

    .wpt-ms-modal-inner {

        width: 820px;

        max-width: calc(100vw - 2rem);

        border-top: none;

        border: 1px solid var(--wpt-color-border, #E0DBD3);

        padding-bottom: var(--wpt-spacing-2xl, 2.5rem);

    }

}



/* Modal top bar: Continue Shopping left + X right */

.wpt-ms-modal-topbar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 0 var(--wpt-spacing-sm, 0.5rem) 0;

    border-bottom: 1px solid var(--wpt-color-border, #E0DBD3);

    margin-bottom: var(--wpt-spacing-sm, 0.5rem);

    min-height: 36px;

    flex-shrink: 0;

}



.wpt-ms-continue-shopping {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    background: transparent;

    border: none;

    padding: 0;

    cursor: pointer;

    color: var(--wpt-color-muted, #9A9490);

    font-family: var(--wpt-font-body, 'Jost', sans-serif);

    font-size: var(--wpt-text-xs, 0.75rem);

    font-weight: 500;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    line-height: 1;

}



.wpt-ms-continue-shopping:hover { color: var(--wpt-color-dark, #0D0D0D); }

.wpt-ms-continue-shopping svg { pointer-events: none; flex-shrink: 0; }



.wpt-ms-modal-close {

    width: 30px;

    height: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: transparent;

    border: 1px solid var(--wpt-color-border, #E0DBD3);

    border-radius: var(--wpt-radius-full, 9999px);

    color: var(--wpt-color-muted, #9A9490);

    font-size: var(--wpt-text-base, 1rem);

    cursor: pointer;

    line-height: 1;

    padding: 0;

    flex-shrink: 0;

    box-sizing: border-box;

}



.wpt-ms-modal-close:hover {

    border-color: var(--wpt-color-dark, #0D0D0D);

    color: var(--wpt-color-dark, #0D0D0D);

}



.wpt-ms-modal-close:focus-visible {

    outline: 2px solid var(--wpt-color-primary, #C9A96E);

    outline-offset: 2px;

}



.wpt-ms-modal-body {

    display: flex;

    flex-direction: column;

    gap: var(--wpt-spacing-lg, 1.5rem);

    margin-top: var(--wpt-spacing-sm, 0.5rem);

}



@media (min-width: 640px) {

    .wpt-ms-modal-body {

        flex-direction: row;

        align-items: flex-start;

        gap: var(--wpt-spacing-xl, 2rem);

    }

}



/* Modal loading / error */

.wpt-ms-modal-spinner {

    width: 40px;

    height: 40px;

    border: 1px solid var(--wpt-color-border, #E0DBD3);

    border-top-color: var(--wpt-color-primary, #C9A96E);

    border-radius: var(--wpt-radius-full, 9999px);

    margin: var(--wpt-spacing-3xl, 4rem) auto;

}



.wpt-ms-modal-error {

    text-align: center;

    color: var(--wpt-color-muted, #9A9490);

    padding: var(--wpt-spacing-2xl, 2.5rem);

    font-size: var(--wpt-text-sm, 0.875rem);

}



/* ==========================================================================

   11. MODAL — GALLERY SLIDESHOW

   ========================================================================== */



.wpt-ms-modal-gallery {

    flex: 0 0 auto;

    width: 100%;

    position: relative;

    -webkit-user-select: none;

    user-select: none;

}



@media (min-width: 640px) {

    .wpt-ms-modal-gallery {

        width: 42%;

    }

}



/* Slider wrap — padding-bottom trick gives stable 3:4 aspect ratio

   that works in all flex/grid contexts unlike aspect-ratio alone */

.wpt-ms-slider-wrap {

    width: 100%;

    position: relative;

    padding-bottom: 133.33%;

    overflow: hidden;

    background-color: var(--wpt-color-surface, #F2EFE9);

    border: 1px solid var(--wpt-color-border, #E0DBD3);

    box-sizing: border-box;

}



/* Track — fills the wrap absolutely, slides sit side-by-side */

.wpt-ms-slider-track {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    display: flex;

    flex-direction: row;

    flex-wrap: nowrap;

    will-change: transform;

}



/* Slide — never shrink, fills full track height */

.wpt-ms-slide {

    flex: 0 0 100%;

    min-width: 100%;

    height: 100%;

    overflow: hidden;

    position: relative;

}



.wpt-ms-slide img {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}



/* Prev / Next arrows */

.wpt-ms-slider-prev,

.wpt-ms-slider-next {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 32px;

    height: 32px;

    background: #FFFFFF;

    border: 1px solid var(--wpt-color-border, #E0DBD3);

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    z-index: 2;

    opacity: 0.92;

    box-sizing: border-box;

}



.wpt-ms-slider-prev:hover,

.wpt-ms-slider-next:hover {

    background: var(--wpt-color-primary, #C9A96E);

    border-color: var(--wpt-color-primary, #C9A96E);

    color: #FFFFFF;

    opacity: 1;

}



.wpt-ms-slider-prev[hidden],

.wpt-ms-slider-next[hidden] { display: none; }



.wpt-ms-slider-prev { left: 8px; }

.wpt-ms-slider-next { right: 8px; }



.wpt-ms-slider-prev svg,

.wpt-ms-slider-next svg { pointer-events: none; }



/* Dot navigator */

.wpt-ms-slider-dots {

    display: flex;

    justify-content: center;

    gap: 6px;

    padding: 8px 0 4px;

}



.wpt-ms-slider-dots[hidden] { display: none; }



.wpt-ms-slider-dot {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: var(--wpt-color-border, #E0DBD3);

    border: none;

    padding: 0;

    cursor: pointer;

    flex-shrink: 0;

}



.wpt-ms-slider-dot.active {

    background: var(--wpt-color-primary, #C9A96E);

    width: 18px;

    border-radius: 3px;

}



/* Thumbnail strip — hidden on mobile, shown on desktop */

.wpt-ms-modal-thumbs {

    display: none;

    gap: 4px;

    margin-top: 4px;

    flex-wrap: wrap;

}



@media (min-width: 640px) {

    .wpt-ms-modal-thumbs { display: flex; }

}



.wpt-ms-thumb {

    width: 52px;

    height: 52px;

    overflow: hidden;

    background: transparent;

    padding: 0;

    cursor: pointer;

    flex-shrink: 0;

    border: 1px solid var(--wpt-color-border, #E0DBD3);

    box-sizing: border-box;

}



.wpt-ms-thumb.active {

    border-color: var(--wpt-color-primary, #C9A96E);

}



.wpt-ms-thumb img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}



/* ==========================================================================

   12. MODAL — INFO PANEL

   ========================================================================== */



.wpt-ms-modal-info {

    flex: 1 1 0%;

    display: flex;

    flex-direction: column;

    gap: var(--wpt-spacing-sm, 0.5rem);

}



.wpt-ms-modal-name {

    font-family: var(--wpt-font-heading, 'Cormorant Garamond', serif);

    font-size: var(--wpt-text-3xl, 1.875rem);

    font-weight: 500;

    color: var(--wpt-color-dark, #0D0D0D);

    margin: 0;

    line-height: 1.15;

    letter-spacing: 0.01em;

}



.wpt-ms-modal-price {

    font-family: var(--wpt-font-body, 'Jost', sans-serif);

    font-size: var(--wpt-text-lg, 1.125rem);

    font-weight: 500;

    color: var(--wpt-color-primary, #C9A96E);

    letter-spacing: 0.03em;

}



.wpt-ms-modal-price .woocommerce-Price-amount {

    color: var(--wpt-color-primary, #C9A96E);

}



.wpt-ms-modal-desc {

    font-family: var(--wpt-font-body, 'Jost', sans-serif);

    font-size: var(--wpt-text-sm, 0.875rem);

    color: var(--wpt-color-muted, #9A9490);

    line-height: 1.7;

    margin: 0;

}



.wpt-ms-modal-sku {

    font-family: var(--wpt-font-body, 'Jost', sans-serif);

    font-size: var(--wpt-text-xs, 0.75rem);

    color: var(--wpt-color-muted, #9A9490);

    letter-spacing: 0.08em;

    text-transform: uppercase;

    margin: 0;

}



/* Stock indicator */

.wpt-ms-stock {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    font-family: var(--wpt-font-body, 'Jost', sans-serif);

    font-size: 10px;

    font-weight: 600;

    letter-spacing: 0.1em;

    text-transform: uppercase;

}



/* Dot before text via pseudo-element using Unicode \25CF (filled circle) */

.wpt-ms-stock::before {

    content: '\25CF';

    font-size: 7px;

}



.wpt-ms-stock.in-stock {

    color: var(--wpt-color-success, #6B8E6B);

}



.wpt-ms-stock.out-of-stock {

    color: var(--wpt-color-muted, #9A9490);

}



/* ==========================================================================

   13. VARIATION SWATCHES

   ========================================================================== */



.wpt-ms-variations {

    display: flex;

    flex-direction: column;

    gap: var(--wpt-spacing-md, 1rem);

    padding: var(--wpt-spacing-md, 1rem) 0;

    border-top: 1px solid var(--wpt-color-border, #E0DBD3);

    border-bottom: 1px solid var(--wpt-color-border, #E0DBD3);

}



.wpt-ms-variation-prompt {

    font-family: var(--wpt-font-body, 'Jost', sans-serif);

    font-size: var(--wpt-text-xs, 0.75rem);

    color: var(--wpt-color-muted, #9A9490);

    letter-spacing: 0.06em;

    margin: 0;

}



.wpt-ms-attr-group {

    display: flex;

    flex-direction: column;

    gap: var(--wpt-spacing-xs, 0.25rem);

}



.wpt-ms-attr-required .wpt-ms-attr-label {

    color: var(--wpt-color-primary, #C9A96E);

}



.wpt-ms-attr-label-row {

    display: flex;

    align-items: center;

    gap: var(--wpt-spacing-xs, 0.25rem);

}



.wpt-ms-attr-label {

    font-family: var(--wpt-font-body, 'Jost', sans-serif);

    font-size: 10px;

    font-weight: 600;

    color: var(--wpt-color-dark, #0D0D0D);

    letter-spacing: 0.12em;

    text-transform: uppercase;

}



.wpt-ms-attr-selected-value {

    font-family: var(--wpt-font-body, 'Jost', sans-serif);

    font-size: 10px;

    color: var(--wpt-color-primary, #C9A96E);

    letter-spacing: 0.04em;

}



.wpt-ms-swatches {

    display: flex;

    flex-wrap: wrap;

    gap: var(--wpt-spacing-xs, 0.25rem);

}



/* Text swatch */

.wpt-ms-swatch {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 5px 10px;

    background-color: transparent;

    border: 1px solid var(--wpt-color-border, #E0DBD3);

    color: var(--wpt-color-dark, #0D0D0D);

    font-family: var(--wpt-font-body, 'Jost', sans-serif);

    font-size: var(--wpt-text-xs, 0.75rem);

    font-weight: 500;

    letter-spacing: 0.04em;

    cursor: pointer;

    min-width: 40px;

    line-height: 1;

}



.wpt-ms-swatch.selected {

    background-color: var(--wpt-color-dark, #0D0D0D);

    border-color: var(--wpt-color-dark, #0D0D0D);

    color: var(--wpt-color-primary, #C9A96E);

}



.wpt-ms-swatch:focus-visible {

    outline: 1px solid var(--wpt-color-primary, #C9A96E);

    outline-offset: 2px;

}



/* Colour circle swatch */

.wpt-ms-swatch-color {

    width: 28px;

    height: 28px;

    min-width: 28px;

    padding: 0;

    border-radius: var(--wpt-radius-full, 9999px);

    border-width: 2px;

}



.wpt-ms-swatch-color.selected {

    outline: 2px solid var(--wpt-color-primary, #C9A96E);

    outline-offset: 2px;

    background-color: inherit;

    border-color: var(--wpt-color-light, #FAF9F7);

}



/* ==========================================================================

   14. QUANTITY CONTROL

   ========================================================================== */



.wpt-ms-qty-wrap {

    display: flex;

    align-items: center;

    gap: var(--wpt-spacing-sm, 0.5rem);

}



.wpt-ms-qty-label {

    font-family: var(--wpt-font-body, 'Jost', sans-serif);

    font-size: 10px;

    font-weight: 600;

    color: var(--wpt-color-dark, #0D0D0D);

    letter-spacing: 0.12em;

    text-transform: uppercase;

}



.wpt-ms-qty-ctrl {

    display: flex;

    align-items: center;

    border: 1px solid var(--wpt-color-border, #E0DBD3);

    overflow: hidden;

    background-color: var(--wpt-color-light, #FAF9F7);

}



.wpt-ms-qty-btn {

    width: 32px;

    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: transparent;

    border: none;

    color: var(--wpt-color-dark, #0D0D0D);

    font-size: var(--wpt-text-base, 1rem);

    cursor: pointer;

    line-height: 1;

    padding: 0;

    flex-shrink: 0;

}



.wpt-ms-qty-btn:focus-visible {

    outline: 1px solid var(--wpt-color-primary, #C9A96E);

}



.wpt-ms-qty-input {

    width: 44px;

    height: 32px;

    text-align: center;

    border: none;

    border-left: 1px solid var(--wpt-color-border, #E0DBD3);

    border-right: 1px solid var(--wpt-color-border, #E0DBD3);

    background: transparent;

    color: var(--wpt-color-dark, #0D0D0D);

    font-family: var(--wpt-font-body, 'Jost', sans-serif);

    font-size: var(--wpt-text-sm, 0.875rem);

    font-weight: 500;

    padding: 0;

    -moz-appearance: textfield;

}



.wpt-ms-qty-input::-webkit-outer-spin-button,

.wpt-ms-qty-input::-webkit-inner-spin-button {

    -webkit-appearance: none;

    margin: 0;

}



.wpt-ms-qty-input:focus { outline: none; }



/* Small variant (cart drawer) */

.wpt-ms-qty-ctrl-sm .wpt-ms-qty-btn  { width: 26px; height: 26px; font-size: var(--wpt-text-sm, 0.875rem); }

.wpt-ms-qty-ctrl-sm .wpt-ms-qty-input { width: 36px; height: 26px; font-size: var(--wpt-text-xs, 0.75rem); }



/* ==========================================================================

   15. ADD TO CART — PRIMARY BUTTON

   ========================================================================== */



.wpt-ms-modal-actions {

    margin-top: var(--wpt-spacing-xs, 0.25rem);

}



/* Primary: gold on black — reversal of the header */

.wpt-ms-btn-primary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    padding: var(--wpt-spacing-sm, 0.5rem) var(--wpt-spacing-lg, 1.5rem);

    background-color: var(--wpt-color-dark, #0D0D0D);

    color: var(--wpt-color-primary, #C9A96E);

    font-family: var(--wpt-font-body, 'Jost', sans-serif);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 0.14em;

    text-transform: uppercase;

    text-decoration: none;

    border: 1px solid var(--wpt-color-dark, #0D0D0D);

    cursor: pointer;

    line-height: 1;

    min-height: 46px;

}



.wpt-ms-btn-primary:focus-visible {

    outline: 2px solid var(--wpt-color-primary, #C9A96E);

    outline-offset: 2px;

}



.wpt-ms-btn-primary:disabled,

.wpt-ms-btn-primary[aria-disabled="true"] {

    background-color: var(--wpt-color-surface, #F2EFE9);

    color: var(--wpt-color-muted, #9A9490);

    border-color: var(--wpt-color-border, #E0DBD3);

    cursor: not-allowed;

}



/* Ghost / outline button */

.wpt-ms-btn-ghost {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: var(--wpt-spacing-xs, 0.25rem) var(--wpt-spacing-md, 1rem);

    background: transparent;

    color: var(--wpt-color-dark, #0D0D0D);

    font-family: var(--wpt-font-body, 'Jost', sans-serif);

    font-size: 11px;

    font-weight: 500;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    border: 1px solid var(--wpt-color-border, #E0DBD3);

    cursor: pointer;

    min-height: 40px;

    text-decoration: none;

}



.wpt-ms-btn-ghost:focus-visible {

    outline: 1px solid var(--wpt-color-primary, #C9A96E);

    outline-offset: 2px;

}



/* ==========================================================================

   16. MINI CART (inside modal after add to cart)

   ========================================================================== */



#wpt-ms-mini-cart {

    background-color: var(--wpt-color-surface, #F2EFE9);

    border: 1px solid var(--wpt-color-border, #E0DBD3);

    padding: var(--wpt-spacing-md, 1rem);

    margin-top: var(--wpt-spacing-sm, 0.5rem);

    display: flex;

    flex-direction: column;

    gap: var(--wpt-spacing-sm, 0.5rem);

}



#wpt-ms-mini-cart[hidden] { display: none; }



.wpt-ms-mini-cart-added {

    font-family: var(--wpt-font-body, 'Jost', sans-serif);

    font-size: 11px;

    font-weight: 600;

    color: var(--wpt-color-success, #6B8E6B);

    letter-spacing: 0.1em;

    text-transform: uppercase;

}



.wpt-ms-mini-cart-item {

    display: flex;

    align-items: center;

    gap: var(--wpt-spacing-sm, 0.5rem);

    border-top: 1px solid var(--wpt-color-border, #E0DBD3);

    padding-top: var(--wpt-spacing-sm, 0.5rem);

}



.wpt-ms-mini-cart-img {

    width: 52px;

    height: 64px;

    object-fit: cover;

    flex-shrink: 0;

    background-color: var(--wpt-color-border, #E0DBD3);

}



.wpt-ms-mini-cart-item-info {

    flex: 1 1 0%;

    display: flex;

    flex-direction: column;

    gap: 2px;

}



.wpt-ms-mini-cart-item-name {

    font-family: var(--wpt-font-heading, 'Cormorant Garamond', serif);

    font-size: var(--wpt-text-base, 1rem);

    font-weight: 500;

    color: var(--wpt-color-dark, #0D0D0D);

}



.wpt-ms-mini-cart-item-var {

    font-size: var(--wpt-text-xs, 0.75rem);

    color: var(--wpt-color-muted, #9A9490);

    letter-spacing: 0.04em;

}



.wpt-ms-mini-cart-item-total {

    font-size: var(--wpt-text-sm, 0.875rem);

    font-weight: 600;

    color: var(--wpt-color-primary, #C9A96E);

}



.wpt-ms-mini-cart-total {

    display: flex;

    justify-content: space-between;

    border-top: 1px solid var(--wpt-color-border, #E0DBD3);

    padding-top: var(--wpt-spacing-sm, 0.5rem);

    font-family: var(--wpt-font-body, 'Jost', sans-serif);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    color: var(--wpt-color-dark, #0D0D0D);

}



.wpt-ms-mini-cart-actions {

    display: flex;

    gap: var(--wpt-spacing-sm, 0.5rem);

    padding-top: var(--wpt-spacing-xs, 0.25rem);

}



.wpt-ms-mini-cart-actions .wpt-ms-btn-ghost,

.wpt-ms-mini-cart-actions .wpt-ms-btn-primary {

    flex: 1 1 0%;

    font-size: 10px;

    min-height: 36px;

}



.wpt-ms-mini-cart-error {

    color: var(--wpt-color-muted, #9A9490);

    font-size: var(--wpt-text-sm, 0.875rem);

    text-align: center;

}



/* ==========================================================================

   17. CART DRAWER

   ========================================================================== */



.wpt-ms-cart-drawer {

    position: fixed;

    top: 0;

    right: 0;

    bottom: 0;

    z-index: 110;

    width: min(100vw, 360px);

    display: flex;

    flex-direction: column;

    background-color: var(--wpt-color-light, #FAF9F7);

    border-left: 1px solid var(--wpt-color-border, #E0DBD3);

}



.wpt-ms-cart-drawer[hidden] { display: none; }



.wpt-ms-drawer-inner {

    display: flex;

    flex-direction: column;

    height: 100%;

    overflow: hidden;

}



.wpt-ms-drawer-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: var(--wpt-spacing-md, 1rem) var(--wpt-spacing-lg, 1.5rem);

    background-color: var(--wpt-color-dark, #0D0D0D);

    border-bottom: 1px solid rgba(201, 169, 110, 0.2);

    flex-shrink: 0;

}



.wpt-ms-drawer-header h3 {

    font-family: var(--wpt-font-heading, 'Cormorant Garamond', serif);

    font-size: var(--wpt-text-lg, 1.125rem);

    font-weight: 500;

    color: var(--wpt-color-primary, #C9A96E);

    letter-spacing: 0.08em;

    text-transform: uppercase;

    margin: 0;

}



.wpt-ms-drawer-close {

    width: 30px;

    height: 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: transparent;

    border: 1px solid rgba(201, 169, 110, 0.4);

    border-radius: var(--wpt-radius-full, 9999px);

    color: var(--wpt-color-primary, #C9A96E);

    font-size: var(--wpt-text-base, 1rem);

    cursor: pointer;

    line-height: 1;

    padding: 0;

}



.wpt-ms-drawer-close:focus-visible {

    outline: 1px solid var(--wpt-color-primary, #C9A96E);

    outline-offset: 2px;

}



/* Scrollable body */

.wpt-ms-cart-body {

    flex: 1 1 0%;

    overflow-y: auto;

    padding: var(--wpt-spacing-md, 1rem) var(--wpt-spacing-lg, 1.5rem);

}



/* Sticky footer */

.wpt-ms-cart-footer {

    flex-shrink: 0;

    padding: var(--wpt-spacing-md, 1rem) var(--wpt-spacing-lg, 1.5rem);

    border-top: 1px solid var(--wpt-color-border, #E0DBD3);

    background-color: var(--wpt-color-light, #FAF9F7);

    display: flex;

    flex-direction: column;

    gap: var(--wpt-spacing-sm, 0.5rem);

}



.wpt-ms-cart-empty {

    text-align: center;

    padding: var(--wpt-spacing-3xl, 4rem) var(--wpt-spacing-lg, 1.5rem);

    color: var(--wpt-color-muted, #9A9490);

    font-size: var(--wpt-text-sm, 0.875rem);

    letter-spacing: 0.06em;

}



/* Cart list */

.wpt-ms-cart-list {

    list-style: none;

    margin: 0;

    padding: 0;

    display: flex;

    flex-direction: column;

    gap: var(--wpt-spacing-md, 1rem);

}



.wpt-ms-cart-list-item {

    display: flex;

    align-items: flex-start;

    gap: var(--wpt-spacing-sm, 0.5rem);

    padding-bottom: var(--wpt-spacing-md, 1rem);

    border-bottom: 1px solid var(--wpt-color-border, #E0DBD3);

}



.wpt-ms-cart-list-item:last-child { border-bottom: none; }



.wpt-ms-cart-item-img {

    width: 56px;

    height: 72px;

    object-fit: cover;

    flex-shrink: 0;

    background-color: var(--wpt-color-surface, #F2EFE9);

}



.wpt-ms-cart-item-info {

    flex: 1 1 0%;

    display: flex;

    flex-direction: column;

    gap: 3px;

}



.wpt-ms-cart-item-name {

    font-family: var(--wpt-font-heading, 'Cormorant Garamond', serif);

    font-size: var(--wpt-text-base, 1rem);

    font-weight: 500;

    color: var(--wpt-color-dark, #0D0D0D);

}



.wpt-ms-cart-item-var {

    font-size: var(--wpt-text-xs, 0.75rem);

    color: var(--wpt-color-muted, #9A9490);

    letter-spacing: 0.04em;

}



.wpt-ms-cart-item-actions {

    display: flex;

    align-items: center;

    gap: var(--wpt-spacing-xs, 0.25rem);

    margin-top: 4px;

}



.wpt-ms-cart-item-total {

    font-size: var(--wpt-text-sm, 0.875rem);

    font-weight: 600;

    color: var(--wpt-color-primary, #C9A96E);

    flex-shrink: 0;

    align-self: center;

}



.wpt-ms-cart-remove {

    width: 22px;

    height: 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: transparent;

    border: 1px solid var(--wpt-color-border, #E0DBD3);

    border-radius: var(--wpt-radius-full, 9999px);

    color: var(--wpt-color-muted, #9A9490);

    font-size: var(--wpt-text-sm, 0.875rem);

    cursor: pointer;

    line-height: 1;

    padding: 0;

}



.wpt-ms-cart-remove:focus-visible {

    outline: 1px solid var(--wpt-color-primary, #C9A96E);

}



/* Total row */

.wpt-ms-drawer-total {

    display: flex;

    justify-content: space-between;

    font-family: var(--wpt-font-body, 'Jost', sans-serif);

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    color: var(--wpt-color-dark, #0D0D0D);

    padding-bottom: var(--wpt-spacing-xs, 0.25rem);

}



.wpt-ms-drawer-actions {

    display: flex;

    gap: var(--wpt-spacing-sm, 0.5rem);

}



.wpt-ms-drawer-actions .wpt-ms-btn-ghost,

.wpt-ms-drawer-actions .wpt-ms-btn-primary {

    flex: 1 1 0%;

}



/* ==========================================================================

   18. SCROLL LOCK

   ========================================================================== */



body.wpt-ms-no-scroll { overflow: hidden; }



/* ==========================================================================

   19. GENERIC SPINNER + ERROR

   ========================================================================== */



.wpt-ms-spinner {

    width: 28px;

    height: 28px;

    border: 1px solid var(--wpt-color-border, #E0DBD3);

    border-top-color: var(--wpt-color-primary, #C9A96E);

    border-radius: var(--wpt-radius-full, 9999px);

    margin: var(--wpt-spacing-xl, 2rem) auto;

}



.wpt-ms-error {

    text-align: center;

    padding: var(--wpt-spacing-xl, 2rem);

    color: var(--wpt-color-muted, #9A9490);

    font-size: var(--wpt-text-sm, 0.875rem);

    letter-spacing: 0.04em;

}