:root{
    --pink:#f4c5d2;
    --pink-2:#fff0f6;
    --ink:#1b1b22;
    --muted:#6f6f7a;

    --shadow: 0 18px 55px rgba(0,0,0,.18);
    --shadow-soft: 0 12px 30px rgba(0,0,0,.12);

    --radius-xl: 26px;
    --radius-lg: 20px;
    --radius-md: 14px;

    --line: rgba(0,0,0,.08);
    --danger:#ff3b3b;
    --max: 1200px;
    --fluid-gutter: clamp(12px, 4vw, 28px);
    --fluid-content: min(var(--max), calc(100vw - (var(--fluid-gutter) * 2)));

    /* register-like focus */
    --focus: 0 0 0 4px rgba(196,84,135,.12);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
    margin:0;
    color:var(--ink);
    background: linear-gradient(180deg, #fff 0%, var(--pink-2) 40%, #fff 100%);
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans";
}

/* toggles */
.ui-toggle{ position:fixed; left:-9999px; }

/* text helpers */
.muted{ color: var(--muted); font-size:13px; }

/* backdrop (page-local) */
.backdrop--page{
    position:fixed;
    inset:0;
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(10px);
    opacity:0;
    pointer-events:none;
    z-index:60;
    transition: opacity .22s ease;
}

/* =========================
   HERO wrapper for Products
   ========================= */
.hero--page{
    min-height: calc(100vh - 72px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding: clamp(34px, 7vw, 56px) var(--fluid-gutter) clamp(48px, 8vw, 72px);
}

.hero--page .hero__inner{
    width: var(--fluid-content);
    max-width:100%;
}

/* =========================
   Buttons
   ========================= */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    border-radius:999px;
    padding:12px 18px;
    text-decoration:none;
    font-weight:800;
    letter-spacing:.3px;
    border:1px solid transparent;
    cursor:pointer;
    user-select:none;
    transition: transform .12s ease, filter .12s ease;
}
.btn:hover{ transform: translateY(-1px); filter: brightness(1.02); }
.btn:active{ transform: translateY(0); }

.btn--dark{
    background:linear-gradient(180deg, #f3a1c0, #ef8a74);
    color:#fff;
    border:0;
    box-shadow: 0 14px 30px rgba(239,138,116,.20);
}

.filtersSort.is-open{
    z-index:80;
}

.productsPage:has(.filtersSort.is-open) #productsGrid,
.page:has(.filtersSort.is-open) #productsGrid{
    transform:translateY(132px);
    transition:transform .18s ease;
}

@media (max-width:700px){
    .productsPage:has(.filtersSort.is-open) #productsGrid,
    .page:has(.filtersSort.is-open) #productsGrid{
        transform:translateY(154px);
    }
}

@media (max-width:640px){
    #loungeInfoModal.modal--loungeInfo{
        align-items:flex-start !important;
        overflow-y:auto !important;
        padding:12px 9px !important;
        -webkit-overflow-scrolling:touch;
    }

    #loungeInfoModal .modal__card--loungeInfo{
        max-height:none !important;
        min-height:0 !important;
        overflow-y:visible !important;
        scrollbar-width:auto !important;
    }

    #loungeInfoModal .modal__card--loungeInfo::-webkit-scrollbar{
        display:block !important;
        width:6px;
    }
}

/* Final mobile category grid override */
@media (max-width:640px){
    #productsGrid.grid{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        gap:12px !important;
        align-items:stretch !important;
    }

    #productsGrid.grid > .card{
        width:100% !important;
        min-width:0 !important;
        --card-side-inset:10px;
        --card-bottom-inset:10px;
        --card-cta-height:36px;
        --card-price-gap:5px;
        --card-reserved-space:10px;
        padding-bottom:0 !important;
        border-radius:18px !important;
    }

    #productsGrid.grid > .card:only-child{
        grid-column:1 / -1;
        width:min(100%, 270px) !important;
        justify-self:center;
        --card-side-inset:14px;
        --card-bottom-inset:14px;
        --card-cta-height:42px;
        --card-price-gap:7px;
        --card-reserved-space:14px;
        border-radius:24px !important;
    }

    #productsGrid .card__media{
        aspect-ratio:1 / 1 !important;
        min-height:0 !important;
        max-height:none !important;
        border-radius:14px !important;
    }

    #productsGrid .card__body{
        padding:10px 10px var(--card-reserved-space) !important;
        min-height:0 !important;
    }

    #productsGrid .card__copy{
        min-height:66px !important;
        max-width:100% !important;
    }

    #productsGrid .card__title{
        font-size:14px !important;
        line-height:1.18 !important;
        min-height:calc(1.18em * 2) !important;
    }

    #productsGrid .card__desc{
        margin-top:5px !important;
        font-size:11px !important;
        line-height:1.32 !important;
        -webkit-line-clamp:2 !important;
        line-clamp:2 !important;
    }

    #productsGrid .card__price{
        min-width:82px !important;
        padding:7px 9px !important;
    }

    #productsGrid .card__priceVal{
        font-size:17px !important;
    }

    #productsGrid .card__priceCur{
        font-size:9px !important;
    }

    #productsGrid .card__actions .btn,
    #productsGrid .card__cta{
        min-height:36px !important;
        min-width:0 !important;
        max-width:100% !important;
        padding-inline:10px !important;
        font-size:12px !important;
    }

    #productsGrid .card__tools{
        top:8px !important;
        right:8px !important;
    }

    #productsGrid .card__tools .icon-btn{
        width:34px !important;
        height:34px !important;
        min-height:34px !important;
    }

    #productsGrid.grid > .card:only-child .card__media{
        border-radius:18px !important;
    }

    #productsGrid.grid > .card:only-child .card__body{
        min-height:0 !important;
        padding:14px 14px var(--card-reserved-space) !important;
    }

    #productsGrid.grid > .card:only-child .card__copy{
        min-height:92px !important;
    }

    #productsGrid.grid > .card:only-child .card__title{
        font-size:18px !important;
    }

    #productsGrid.grid > .card:only-child .card__desc{
        font-size:13px !important;
        -webkit-line-clamp:3 !important;
        line-clamp:3 !important;
    }

    #productsGrid.grid > .card:only-child .card__actions .btn,
    #productsGrid.grid > .card:only-child .card__cta{
        min-height:42px !important;
        font-size:14px !important;
    }
}

/* Mobile category grid: two products per row */
@media (max-width:640px){
    #productsGrid.grid{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        gap:12px !important;
        align-items:stretch !important;
    }

    #productsGrid.grid > .card{
        width:100% !important;
        min-width:0 !important;
        --card-side-inset:10px;
        --card-bottom-inset:10px;
        --card-cta-height:36px;
        --card-price-gap:5px;
        --card-reserved-space:10px;
        border-radius:18px !important;
    }

    #productsGrid.grid > .card:only-child{
        grid-column:1 / -1;
        width:min(100%, 270px) !important;
        justify-self:center;
        --card-side-inset:14px;
        --card-bottom-inset:14px;
        --card-cta-height:42px;
        --card-price-gap:7px;
        --card-reserved-space:14px;
        border-radius:24px !important;
    }

    #productsGrid .card__media{
        aspect-ratio:1 / 1 !important;
        min-height:0 !important;
        max-height:none !important;
        border-radius:14px !important;
    }

    #productsGrid .card__body{
        padding:10px 10px var(--card-reserved-space) !important;
        min-height:0 !important;
    }

    #productsGrid .card__copy{
        min-height:66px !important;
        max-width:100% !important;
    }

    #productsGrid .card__title{
        font-size:14px !important;
        line-height:1.18 !important;
        min-height:calc(1.18em * 2) !important;
    }

    #productsGrid .card__desc{
        margin-top:5px !important;
        font-size:11px !important;
        line-height:1.32 !important;
        -webkit-line-clamp:2 !important;
        line-clamp:2 !important;
    }

    #productsGrid .card__price{
        min-width:82px !important;
        padding:7px 9px !important;
    }

    #productsGrid .card__priceVal{
        font-size:17px !important;
    }

    #productsGrid .card__priceCur{
        font-size:9px !important;
    }

    #productsGrid .card__actions .btn,
    #productsGrid .card__cta{
        min-height:36px !important;
        min-width:0 !important;
        max-width:100% !important;
        padding-inline:10px !important;
        font-size:12px !important;
    }

    #productsGrid .card__tools{
        top:8px !important;
        right:8px !important;
    }

    #productsGrid .card__tools .icon-btn{
        width:34px !important;
        height:34px !important;
        min-height:34px !important;
    }

    #productsGrid.grid > .card:only-child .card__media{
        border-radius:18px !important;
    }

    #productsGrid.grid > .card:only-child .card__body{
        min-height:0 !important;
        padding:14px 14px var(--card-reserved-space) !important;
    }

    #productsGrid.grid > .card:only-child .card__copy{
        min-height:92px !important;
    }

    #productsGrid.grid > .card:only-child .card__title{
        font-size:18px !important;
    }

    #productsGrid.grid > .card:only-child .card__desc{
        font-size:13px !important;
        -webkit-line-clamp:3 !important;
        line-clamp:3 !important;
    }

    #productsGrid.grid > .card:only-child .card__actions .btn,
    #productsGrid.grid > .card:only-child .card__cta{
        min-height:42px !important;
        font-size:14px !important;
    }
}

#loungeInfoModal.modal--loungeInfo{
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    padding:clamp(14px, 3vw, 34px) !important;
}

#loungeInfoModal .modal__card--loungeInfo{
    width:min(820px, calc(100vw - 28px)) !important;
    min-height:min(680px, calc(100dvh - 28px)) !important;
    max-height:calc(100dvh - 28px) !important;
    overflow-y:auto !important;
    scrollbar-width:auto !important;
}

#loungeInfoModal .loungeInfo{
    max-width:680px !important;
}

#loungeInfoModal .loungeInfo{
    display:flex !important;
    min-height:100% !important;
    max-width:100% !important;
    align-items:stretch !important;
}

#loungeInfoModal .loungeInfo__copy{
    width:100% !important;
    max-width:100% !important;
    min-height:100% !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:space-between !important;
    gap:clamp(10px, 1.5vw, 18px) !important;
    font-size:clamp(15px, 1.35vw, 19px) !important;
    line-height:1.45 !important;
}

#loungeInfoModal .loungeInfo__lead{
    font-size:clamp(22px, 2.2vw, 32px) !important;
    line-height:1.12 !important;
}

#loungeInfoModal .loungeInfo__copy h3{
    font-size:clamp(17px, 1.6vw, 23px) !important;
}

#loungeInfoModal .loungeInfo__tiers{
    gap:clamp(9px, 1.1vw, 14px) !important;
}

#loungeInfoModal .loungeInfo__tiers li{
    max-width:100% !important;
}

#loungeInfoModal .modal__card--loungeInfo{
    width:min(680px, calc(100vw - 44px)) !important;
    min-height:min(560px, calc(100dvh - 52px)) !important;
    max-height:calc(100dvh - 52px) !important;
    overflow-y:auto !important;
    padding:clamp(22px, 3vw, 34px) clamp(24px, 4vw, 46px) !important;
}

#loungeInfoModal .loungeInfo{
    max-width:560px !important;
}

#loungeInfoModal.modal--loungeInfo{
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    padding:clamp(14px, 3vw, 34px) !important;
}

#loungeInfoModal .modal__card--loungeInfo{
    width:min(820px, calc(100vw - 28px)) !important;
    min-height:min(680px, calc(100dvh - 28px)) !important;
    max-height:calc(100dvh - 28px) !important;
    overflow-y:auto !important;
}

#loungeInfoModal .loungeInfo{
    max-width:680px !important;
}

.btn--dark:hover,
.btn--dark:focus-visible{
    background:linear-gradient(180deg, #f3a1c0, #ef8a74);
    color:#fff;
    box-shadow: 0 18px 34px rgba(239,138,116,.24);
}

.btn--soft{
    background: rgba(196,84,135,.08);
    border:1px solid rgba(196,84,135,.18);
    color: var(--ink);
}

.btn--danger{
    background: rgba(255,59,59,.10);
    border:1px solid rgba(255,59,59,.22);
    color: var(--ink);
}

.btn--ghost{
    background:linear-gradient(180deg, #f3a1c0, #ef8a74);
    border:0;
    color:#fff;
    box-shadow: 0 14px 30px rgba(239,138,116,.18);
}

.btn--full{
    width:100%;
    border-radius:12px;
    padding:12px 14px;
}

/* =========================
   Page header
   ========================= */
.page{
    width: var(--fluid-content);
    max-width:100%;
    margin: 0 auto;
    padding: 0;
}

.page__head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:14px;
    padding: clamp(12px, 3vw, 18px) 0 clamp(16px, 3vw, 20px);
    border-bottom: 1px solid rgba(0,0,0,.06);
}

.kicker{
    color: rgba(0,0,0,.45);
    font-size: 11px;
    font-weight:900;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.h1{
    margin: 8px 0 0;
    font-family: ui-serif, Georgia, "Times New Roman", serif;
    font-weight:700;
    font-size: clamp(28px, 3.2vw, 44px);
    line-height: 1.06;
    color: var(--ink);
}

.subtext{
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 13px;
}

/* =========================
   Grid / Cards
   ========================= */
.grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 3vw, 22px);
    padding: clamp(18px, 3vw, 22px) 0 0;
    align-items: stretch;
}

.card{
    position:relative;
    background: rgba(255,255,255,.92);
    border:1px solid rgba(0,0,0,.06);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-soft);
    overflow:hidden;
    padding-bottom: 52px; /* space for bottom-right price */
    min-width:0;
}

.card__body{
    padding: 16px 18px 18px;
    min-width:0;
}

.card__top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap: 12px;
}

.card__top > div{
    min-width:0;
}

.card__title{
    margin:0;
    font-family: ui-serif, Georgia, "Times New Roman", serif;
    font-size: 18px;
    line-height: 1.2;
    color: var(--ink);
    max-width:100%;
    overflow-wrap:anywhere;
    word-break:break-word;
}

.card__desc{
    margin:8px 0 0;
    color:rgba(27,27,34,.62);
    font-size:14px;
    line-height:1.5;
    overflow:hidden;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    line-clamp:3;
    overflow-wrap:anywhere;
    word-break:break-word;
}

.card__tools{
    position:absolute;
    top: 12px;
    right: 12px;
    left: auto;
    display:flex;
    gap: 8px;
    z-index: 5;
}

.card__tools .icon-btn{
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.10);
    background: rgba(255,255,255,.92);
    display:grid;
    place-items:center;
    cursor:pointer;
    transition: transform .12s ease, filter .12s ease, background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
    color: #c45487;
    box-shadow: 0 10px 22px rgba(0,0,0,.10);
}

.card__tools .icon-btn svg{
    width: 18px;
    height: 18px;
    color: inherit;
}

.card__tools .icon-btn:hover{ transform: translateY(-1px); filter: brightness(1.03); }
.card__tools .icon-btn:active{ transform: translateY(0); }

.card__tools .icon-btn--active{
    filter: brightness(1.06);
    transform: translateY(-1px) scale(1.02);
}

.card__price{
    position:absolute;
    right: 14px;
    bottom: 14px;
    display:inline-flex;
    align-items:baseline;
    gap:6px;
    padding: 8px 12px;
    border-radius: 999px;
    border:1px solid rgba(196,84,135,.18);
    background: rgba(196,84,135,.08);
    white-space:nowrap;
    font-weight:900;
    color:#c45487;
}

.card__priceCur{
    color: rgba(0,0,0,.45);
    font-size: 12px;
    font-weight:800;
}

.card__actions{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top: 14px;
}

.empty{
    margin: 18px 8px 0;
    padding: 28px 18px;
    border-radius: 22px;
    border: 1px dashed rgba(0,0,0,.18);
    background: rgba(255,255,255,.70);
    text-align:center;
    box-shadow: var(--shadow-soft);
}
.empty__icon{ font-size: 30px; }
.empty__title{
    margin-top: 10px;
    font-size: 18px;
    font-weight: 900;
    color: var(--ink);
}
.empty__text{ margin-top: 6px; color: var(--muted); }

/* =========================
   Forms
   ========================= */
.form{ display:flex; flex-direction:column; gap:12px; }
.field{ display:flex; flex-direction:column; gap:6px; }

.field--inline{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:10px;
}

.field__label{
    color: rgba(0,0,0,.55);
    font-size: 11px;
    font-weight:900;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.field__label--inline{
    margin:0;
    letter-spacing: 1px;
}

.input{
    width:100%;
    padding: 11px 12px;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,.10);
    background: rgba(255,255,255,.92);
    color: var(--ink);
    outline: none;
    transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}

.input:focus{
    border-color: rgba(196,84,135,.26);
    box-shadow: var(--focus);
}

.input--area{ resize: vertical; }

.form__actions{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top: 4px;
}

/* =========================
   Modal
   ========================= */
.modal{
    position:fixed;
    inset:0;
    display:grid;
    place-items:center;
    z-index:70;
    pointer-events:none;
    opacity:0;
    transition: opacity .22s ease;
    padding:18px;
}

#profileModal.modal,
#vaultModal.modal,
#catModal.modal{
    z-index:1700;
}


.modal__card{
    width:min(540px, calc(100vw - 26px));
    background: rgba(255,255,255,.94);
    border:1px solid rgba(0,0,0,.08);
    border-radius: 30px;
    box-shadow: var(--shadow);
    padding: 18px 18px 16px;
    position:relative;
    max-height: calc(100vh - 36px);
    overflow-y: auto;
}

.modal__card--small{ width:min(440px, calc(100vw - 26px)); }

.modal__close{
    position: sticky;
    top: 14px;
    margin-left: auto;
    z-index: 5;

    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid rgba(0,0,0,.10);
    background: rgba(255,255,255,.90);
    cursor: pointer;
}
.modal__close svg{ width:18px; height:18px; color: var(--ink); }

.modal__head{
    display:flex;
    align-items:center;
    gap:12px;
    padding: 6px 6px 10px;
}

.avatar{
    width:46px;
    height:46px;
    border-radius:16px;
    display:grid;
    place-items:center;
    background: linear-gradient(135deg, var(--pink-2), #fff);
    border:1px solid rgba(196,84,135,.18);
    color:#c45487;
    font-weight:1000;
}

.modal__title{ margin:0; font-size:18px; color: var(--ink); }
.modal__sub{ margin:4px 0 0; color: var(--muted); font-size:13px; }

#addProductModal .modal__card,
#editProductModal .modal__card{
    width:min(780px, calc(100vw - (var(--fluid-gutter) * 2)));
    max-width:100%;
    border:0;
    box-shadow: 0 26px 64px rgba(17,17,17,.14);
}

#addProductModal .form,
#editProductModal .form,
#addProductModal .input,
#editProductModal .input{
    width:100%;
    min-width:0;
    max-width:100%;
}

#addProductModal input[type="file"],
#editProductModal input[type="file"]{
    width:100%;
    min-width:0;
}

/* open modals */
#addProductToggle:checked ~ #addProductModal{
    opacity:1;
    pointer-events:auto;
}
#addProductToggle:checked ~ .backdrop--page[for="addProductToggle"]{
    opacity:1;
    pointer-events:auto;
}

#editProductToggle:checked ~ #editProductModal{
    opacity:1;
    pointer-events:auto;
}
#editProductToggle:checked ~ .backdrop--page[for="editProductToggle"]{
    opacity:1;
    pointer-events:auto;
}


/* responsive */
@media (max-width: 980px){
    .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
    .page__head{ align-items:flex-start; flex-direction:column; }
    .grid{ grid-template-columns: 1fr; }
}

/* =========================
   ADDITIONS (images, badges)
   ========================= */
.card__media{
    width:100%;
    aspect-ratio: 1 / 1;
    background: rgba(0,0,0,.04);
    border-bottom: 1px solid rgba(0,0,0,.06);
    overflow:hidden;
    position: relative;
}
.card__media img{
    width:100%;
    height:100%;
    object-fit: cover;
    display:block;
}
.card__media--empty{
    display:flex;
    align-items:center;
    justify-content:center;
}
.card__media--empty::after{
    content:"No image";
    opacity:.55;
    font-size: 13px;
    color: var(--muted);
}

.input--locked{
    display:flex;
    align-items:center;
    gap:8px;
    pointer-events:none;
    user-select:none;
}

/* preview */
.img-preview{
    margin-top:10px;
    border-radius: 18px;
    overflow:hidden;
    border: 1px solid rgba(0,0,0,.08);
    background: rgba(255,255,255,.9);
    box-shadow: 0 10px 22px rgba(0,0,0,.08);
    max-height: 220px;
}
.img-preview img{
    width:100%;
    max-height: 220px;
    display:block;
    object-fit: cover;
}

.img-preview-grid{
    margin-top:10px;
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap:10px;
    max-height: 240px;
    overflow: auto;
    padding-right: 4px;
}
.img-tile{
    border-radius: 16px;
    overflow:hidden;
    border: 1px solid rgba(0,0,0,.08);
    background: rgba(255,255,255,.9);
    aspect-ratio: 1 / 1;
}
.img-tile img{
    width:100%;
    height:100%;
    object-fit: cover;
    display:block;
}

.badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:8px;
    padding:6px 10px;
    border-radius:999px;
    border:1px solid rgba(196,84,135,.18);
    background: rgba(196,84,135,.08);
    color:#c45487;
    font-weight:900;
    font-size:12px;
}

.badge--bestseller{
    display:none !important;
}

.card__dots{
    position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
    display:flex; gap:6px;
}
.card__dots span{
    width:6px; height:6px; border-radius:999px;
    background: rgba(255,255,255,.55);
}
.card__dots span.is-active{
    background: rgba(255,255,255,.95);
}

/* =========================
   VALIDATION UI (register-like)
   ========================= */

/* exact same idea as register.css */
.fieldError{
    font-size: 12px;
    font-weight: 600;
    color: #b42318;
    background: rgba(180, 35, 24, 0.08);
    border: 1px solid rgba(180, 35, 24, 0.35);
    border-radius: 10px;
    padding: 6px 10px;
    margin-top: 4px;
    line-height: 1.35;

    /* hide by default; JS sets display:block */
    display:none;
}

/* invalid input/textarea style */
.input.is-invalid{
    border-color: rgba(180, 35, 24, 0.55);
    box-shadow: 0 0 0 4px rgba(180, 35, 24, 0.10);
}

/* keep consistent focus even when invalid */
.input.is-invalid:focus{
    border-color: rgba(180, 35, 24, 0.65);
    box-shadow:
            0 0 0 4px rgba(180, 35, 24, 0.12),
            0 0 0 1px rgba(180, 35, 24, 0.25);
}

/* =========================
   VISUAL POLISH OVERRIDES
   ========================= */

.hero--page{
    padding: clamp(34px, 7vw, 56px) var(--fluid-gutter) clamp(48px, 8vw, 72px);
}

.page__head{
    padding: 12px 0 20px;
    margin-bottom: 6px;
}

.grid{
    gap: 22px;
    padding: 22px 0 0;
}

.card{
    border-radius: 28px;
    box-shadow: 0 20px 48px rgba(17,17,17,.10);
    transition: transform .16s ease, box-shadow .16s ease;
}

.card:hover{
    transform: translateY(-3px);
    box-shadow: 0 28px 60px rgba(17,17,17,.12);
}

.card__body{
    padding: 18px 18px 22px;
}

.card__title{
    font-size: 22px;
    margin-bottom: 6px;
}

.card__desc{
    font-size:14px;
    margin-top:8px;
}

.card__media{
    aspect-ratio: 1 / 1.06;
    background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(249,241,245,.92));
}

.card__media img{
    transition: transform .22s ease;
}

.card:hover .card__media img{
    transform: scale(1.02);
}

.card__price{
    font-size: 20px;
    margin-top: 12px;
}

.empty{
    margin-top: 24px;
    padding: 28px;
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,245,249,.82));
    border: 1px dashed rgba(196,84,135,.18);
}

.modal__card{
    border-radius: 32px;
    padding: 20px 20px 18px;
    border:0;
}

.form{
    gap: 14px;
}

.input,
.input--area{
    border-radius: 16px;
    min-height: 50px;
}

.input--area{
    min-height: 120px;
}

.form__actions{
    margin-top: 6px;
}

@media (max-width: 640px){
    .hero--page{
        padding: 34px var(--fluid-gutter) 48px;
    }

    .card__title{
        font-size: 20px;
    }

    .card__desc{
        font-size:13px;
    }
}

@media (max-width: 760px){
    .page__actions{
        width:100%;
    }

    .page__actions .btn{
        width:100%;
    }

    .img-preview-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #addProductModal .modal__card,
    #editProductModal .modal__card{
        width:min(100%, calc(100vw - (var(--fluid-gutter) * 2)));
    }
}

@media (max-width: 480px){
    .page__head{
        padding: 8px 0 16px;
    }

    .card__body{
        padding: 16px;
    }

    .modal{
        padding: var(--fluid-gutter);
    }

    .modal__card{
        width: min(100%, calc(100vw - (var(--fluid-gutter) * 2)));
    }

    #addProductModal .modal__card,
    #editProductModal .modal__card{
        padding:18px 16px 16px;
    }
}

/* =========================
   Pink Pact storefront refresh
   ========================= */

body{
    background:linear-gradient(135deg, #ffd6e5 0%, #ffedf4 50%, #ffd6e5 100%) fixed;
    background-size:cover;
}

.hero--page{
    background:transparent;
}

.page__head{
    border-bottom-color:rgba(196,84,135,.10);
}

.h1,
.card__title{
    color:#c45487;
}

.subtext{
    color:#7f7684;
}

.filtersPanel{
    margin-top:18px;
    padding:18px;
    border-radius:24px;
    border:1px solid rgba(196,84,135,.12);
    background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,243,247,.92));
    box-shadow:0 18px 40px rgba(35,31,39,.06);
    overflow:hidden;
    transform-origin:top center;
    will-change:height, opacity, transform;
    transition:
        height .34s cubic-bezier(.22, 1, .36, 1),
        opacity .22s ease,
        transform .34s cubic-bezier(.22, 1, .36, 1);
}

.filtersPanel[hidden]{
    display:none !important;
}

#filtersToggle{
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background-color .18s ease,
        border-color .18s ease,
        color .18s ease;
}

#filtersToggle[aria-expanded="true"]{
    transform:translateY(-1px);
    background:linear-gradient(180deg, #f3a1c0, #ef8a74);
    border-color:transparent;
    color:#fff;
    box-shadow:0 16px 30px rgba(215,112,150,.18);
}

.filtersPanel__head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:16px;
}

.filtersPanel__title{
    color:#c45487;
    font-size:18px;
    font-weight:900;
}

.filtersPanel__clear{
    appearance:none;
    border:0;
    background:transparent;
    color:#ef8a74;
    font:inherit;
    font-weight:800;
    cursor:pointer;
}

.filtersPanel__grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:12px;
}

.filtersPanel__field{
    display:grid;
    gap:8px;
}

.filtersPanel__label{
    font-size:11px;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#c45487;
}

.filtersPanel__input{
    width:100%;
    min-height:48px;
    padding:0 14px;
    border-radius:16px;
    border:1px solid rgba(196,84,135,.14);
    background:#fff;
    color:#26314b;
    font:inherit;
    font-weight:700;
}

.filtersPanel__input:focus{
    outline:none;
    border-color:rgba(196,84,135,.34);
    box-shadow:0 0 0 4px rgba(196,84,135,.10);
}

.filtersPanel__field--sort{
    position:relative;
    z-index:4;
}

.filtersSort{
    position:relative;
    display:flex;
    align-items:center;
    gap:10px;
    min-height:44px;
    padding:4px 12px 4px 8px;
    border-radius:16px;
    border:1px solid rgba(196,84,135,.18);
    background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,241,247,.94));
    box-shadow:0 14px 30px rgba(196,84,135,.10);
    transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}

.filtersSort:hover,
.filtersSort.is-open{
    transform:translateY(-1px);
    border-color:rgba(196,84,135,.28);
    box-shadow:0 18px 34px rgba(196,84,135,.14);
}

.filtersSort__icon{
    display:grid;
    place-items:center;
    width:24px;
    height:24px;
    border-radius:50%;
    background:linear-gradient(180deg, rgba(255,182,215,.42), rgba(255,231,240,.92));
    color:#c45487;
    font-size:14px;
    line-height:1;
    flex:0 0 auto;
    box-shadow:inset 0 0 0 1px rgba(196,84,135,.10);
}

.filtersSort__trigger{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    width:100%;
    min-width:0;
    padding:0 28px 0 0;
    border:none;
    background:transparent;
    color:#26314b;
    font:inherit;
    font-size:13px;
    font-weight:800;
    line-height:1.2;
    letter-spacing:.01em;
    cursor:pointer;
    outline:none;
}

.filtersSort__current{
    display:block;
    width:100%;
    text-align:left;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.filtersSort__native{
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
}

.filtersSort::after{
    content:"";
    position:absolute;
    right:15px;
    top:50%;
    width:8px;
    height:8px;
    border-right:2px solid rgba(27,27,34,.58);
    border-bottom:2px solid rgba(27,27,34,.58);
    transform:translateY(-65%) rotate(45deg);
    pointer-events:none;
    transition:transform .14s ease, border-color .14s ease;
}

.filtersSort:focus-within{
    border-color:rgba(196,84,135,.34);
    box-shadow:0 0 0 4px rgba(196,84,135,.10), 0 18px 34px rgba(196,84,135,.14);
}

.filtersSort:hover::after,
.filtersSort:focus-within::after,
.filtersSort.is-open::after{
    border-color:rgba(196,84,135,.72);
}

.filtersSort.is-open::after{
    transform:translateY(-35%) rotate(-135deg);
}

.filtersSort__menu{
    position:absolute;
    top:calc(100% + 12px);
    left:0;
    z-index:20;
    min-width:100%;
    padding:8px;
    border-radius:22px;
    border:1px solid rgba(196,84,135,.16);
    background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,246,250,.96));
    box-shadow:0 24px 48px rgba(35,31,39,.14);
    opacity:0;
    visibility:hidden;
    transform:translateY(8px) scale(.98);
    pointer-events:none;
    transition:opacity .16s ease, transform .16s ease, visibility .16s ease;
}

.filtersSort.is-open .filtersSort__menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
    pointer-events:auto;
}

.filtersSort__option{
    display:flex;
    align-items:center;
    width:100%;
    min-height:44px;
    padding:0 14px;
    border:none;
    border-radius:14px;
    background:transparent;
    color:#26314b;
    font:inherit;
    font-size:14px;
    font-weight:700;
    text-align:left;
    cursor:pointer;
    transition:background .14s ease, color .14s ease, transform .14s ease;
}

.filtersSort__option:hover,
.filtersSort__option:focus-visible{
    background:linear-gradient(180deg, rgba(255,239,246,.96), rgba(255,231,240,.92));
    color:#b81e61;
    outline:none;
}

.filtersSort__option.is-active{
    background:linear-gradient(180deg, rgba(255,225,237,.98), rgba(255,239,246,.96));
    color:#b81e61;
    box-shadow:inset 0 0 0 1px rgba(196,84,135,.12);
}

.filtersPanel__check{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-top:14px;
    color:#7f7684;
    font-weight:800;
}

.filtersPanel__check input{
    accent-color:#c45487;
}

.filtersPanel__results{
    margin-top:14px;
    color:#ef8a74;
    font-weight:900;
}

.card{
    background:#fff;
    padding-bottom:56px;
}

.card[data-bestseller="true"]{
    background:linear-gradient(180deg, rgba(255,248,228,.99), rgba(247,226,189,.98));
    border-color:rgba(225,182,109,.44);
    box-shadow:0 24px 52px rgba(216,169,98,.24);
}

.card[data-bestseller="true"] .card__body{
    background:linear-gradient(180deg, rgba(255,249,232,.99), rgba(249,231,200,.98));
}

.card[data-bestseller="true"] .card__media{
    background:linear-gradient(180deg, rgba(255,250,237,.99), rgba(250,234,205,.97));
    border-bottom-color:rgba(225,182,109,.24);
}

.card[data-bestseller="true"] .card__title{
    color:#c45487;
}

.card[data-bestseller="true"] .card__price{
    color:#64abd9;
    border-color:rgba(100,171,217,.22);
    background:rgba(100,171,217,.12);
}

.card[data-bestseller="true"] .card__priceCur{
    color:rgba(100,171,217,.72);
}

.card__title{
    font-size:20px;
}

.card__desc{
    color:#776772;
}

.card__tools .icon-btn{
    color:#c45487;
}

.card__actions{
    margin-top:18px;
}

.card__cta{
    width:100%;
    background:linear-gradient(180deg, #f4b0c5, #ef8a74);
    color:#fff;
    border:0;
    box-shadow:0 16px 30px rgba(239,138,116,.22);
}

.card__price{
    background:rgba(255,255,255,.92);
    border:1px solid rgba(100,171,217,.18);
    color:#64abd9;
}

.card__priceCur{
    color:rgba(100,171,217,.78);
}

/* Keep the price above the CTA, both anchored at the card bottom. */
.card{
    --card-side-inset:18px;
    --card-bottom-inset:18px;
    --card-cta-height:46px;
    --card-price-gap:8px;
    --card-reserved-space:132px;
    display:flex;
    flex-direction:column;
    padding-bottom:0;
    position:relative;
}

.card__body{
    display:flex;
    flex:1;
    flex-direction:column;
    padding-bottom:var(--card-reserved-space);
}

.card__actions{
    position:absolute;
    left:var(--card-side-inset);
    right:var(--card-side-inset);
    bottom:var(--card-bottom-inset);
    margin-top:0;
    padding-top:0;
}

.card__price{
    right:var(--card-side-inset);
    bottom:calc(var(--card-bottom-inset) + var(--card-cta-height) + var(--card-price-gap));
}

@media (max-width: 980px){
    .filtersPanel__grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px){
    .filtersPanel{
        padding:16px;
        border-radius:22px;
    }

    .filtersPanel__head{
        align-items:flex-start;
        flex-direction:column;
    }

    .filtersPanel__grid{
        grid-template-columns:1fr;
    }
}

/* Product cards shrink more naturally on narrower screens */
@media (max-width: 860px){
    .grid{
        gap: clamp(14px, 2.4vw, 18px);
        padding-top: clamp(14px, 2.4vw, 18px);
    }

    .card{
        border-radius: clamp(22px, 4vw, 28px);
        padding-bottom: clamp(48px, 8vw, 56px);
    }

    .card__media{
        aspect-ratio: 1 / 0.94;
    }

    .card__body{
        padding: clamp(14px, 2.6vw, 18px) clamp(14px, 2.6vw, 18px) clamp(18px, 3vw, 22px);
    }

    .card__title{
        font-size: clamp(18px, 3.3vw, 22px);
        margin-bottom: 4px;
    }

    .card__desc{
        font-size: clamp(13px, 2vw, 14px);
    }

    .card__actions{
        margin-top: clamp(12px, 2vw, 16px);
    }

    .card__tools{
        top: clamp(10px, 1.8vw, 12px);
        right: clamp(10px, 1.8vw, 12px);
        gap: 6px;
    }

    .card__tools .icon-btn{
        width: clamp(34px, 5vw, 40px);
        height: clamp(34px, 5vw, 40px);
    }

    .card__tools .icon-btn svg{
        width: clamp(16px, 2.5vw, 18px);
        height: clamp(16px, 2.5vw, 18px);
    }

    .card__cta{
        min-height: clamp(42px, 6vw, 48px);
        font-size: clamp(14px, 2.1vw, 16px);
    }

    .card__price{
        right: clamp(10px, 1.8vw, 14px);
        bottom: clamp(10px, 1.8vw, 14px);
        padding: clamp(6px, 1.4vw, 8px) clamp(10px, 1.8vw, 12px);
        font-size: clamp(16px, 2.8vw, 20px);
    }

    .card__priceCur{
        font-size: clamp(11px, 1.6vw, 12px);
    }
}

@media (max-width: 640px){
    .grid{
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 14px;
        padding-top: 14px;
    }

    .grid > .card{
        width: min(100%, clamp(268px, 84vw, 360px));
        margin-inline: auto;
    }

    .card__media{
        aspect-ratio: 1 / 0.9;
    }

    .card__body{
        padding: 14px 14px 18px;
    }

    .card__title{
        font-size: clamp(17px, 4.8vw, 20px);
    }

    .card__desc{
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .card__price{
        padding: 6px 10px;
    }
}

/* Final card-bottom alignment override */
.card{
    --card-side-inset:18px;
    --card-bottom-inset:18px;
    --card-cta-height:46px;
    --card-price-gap:8px;
    --card-reserved-space:132px;
    display:flex;
    flex-direction:column;
    padding-bottom:0;
    position:relative;
}

.card__body{
    display:flex;
    flex:1;
    flex-direction:column;
    padding-bottom:var(--card-reserved-space);
}

.card__actions{
    position:absolute;
    left:var(--card-side-inset);
    right:var(--card-side-inset);
    bottom:var(--card-bottom-inset);
    margin-top:0;
    padding-top:0;
}

.card__price{
    right:var(--card-side-inset);
    bottom:calc(var(--card-bottom-inset) + var(--card-cta-height) + var(--card-price-gap));
}

@media (max-width: 860px){
    .card{
        --card-side-inset:clamp(14px, 2.6vw, 18px);
        --card-bottom-inset:clamp(14px, 2.6vw, 18px);
        --card-cta-height:44px;
        --card-price-gap:7px;
        --card-reserved-space:124px;
    }
}

@media (max-width: 640px){
    .card{
        --card-side-inset:14px;
        --card-bottom-inset:14px;
        --card-cta-height:42px;
        --card-price-gap:6px;
        --card-reserved-space:116px;
    }
}

/* Final visual alignment override for product copy blocks */
.card__body{
    min-height: 0 !important;
}

.card__top{
    min-height: 0 !important;
}

.card__copy{
    display: grid !important;
    grid-template-rows: auto 1fr !important;
    align-content: start !important;
    width: 100% !important;
    min-height: 118px !important;
}

.card__title{
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    min-height: calc(1.2em * 2) !important;
    margin-bottom: 0 !important;
}

.card__desc{
    min-height: calc(1.5em * 3) !important;
    margin-top: 8px !important;
}

@media (max-width: 860px){
    .card__copy{
        min-height: 104px !important;
    }
}

@media (max-width: 640px){
    .card__copy{
        min-height: auto !important;
    }

    .card__desc{
        min-height: 0 !important;
    }
}

/* Keep product card text, price, and actions fixed in the visual center */
.card__body{
    align-items: center !important;
    text-align: center !important;
}

.card__top{
    justify-content: center !important;
    width: 100% !important;
}

.card__copy{
    justify-items: center !important;
    margin-inline: auto !important;
    max-width: min(100%, 34ch) !important;
    text-align: center !important;
}

.card__title,
.card__desc{
    margin-inline: auto !important;
    text-align: center !important;
    width: 100% !important;
}

.card__desc{
    max-width: 32ch !important;
}

.card__actions{
    justify-content: center !important;
}

.card__actions .btn{
    min-width: 84px;
}

.card__cta{
    margin-inline: auto;
    max-width: 280px;
}

.card__price{
    left: 50% !important;
    right: auto !important;
    justify-content: center;
    min-width: 112px;
    transform: translateX(-50%);
}

@media (max-width: 640px){
    .card__copy{
        max-width: min(100%, 30ch) !important;
    }

    .card__desc{
        max-width: 28ch !important;
    }
}

/* Keep category header actions readable when long titles wrap */
.page__head{
    align-items:center !important;
}

.page__head > :first-child{
    flex:1 1 auto;
    min-width:0;
}

.page__actions{
    flex:0 0 auto;
}

/* Match the shared/home Lounge explainer and category cards. */
#loungeInfoModal.modal{
    z-index:1700;
}

#loungeInfoModal .modal__card--loungeInfo{
    width:min(900px, calc(100vw - 32px)) !important;
    max-height:calc(100dvh - 28px) !important;
    overflow:auto !important;
    padding:clamp(18px, 4vw, 28px) !important;
    border-radius:28px !important;
    border:1px solid rgba(196,84,135,.16) !important;
    background:
        radial-gradient(circle at 18% 8%, rgba(255,206,226,.55), transparent 30%),
        radial-gradient(circle at 84% 22%, rgba(255,139,196,.24), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,244,249,.96)) !important;
    box-shadow:0 30px 80px rgba(42,10,27,.22) !important;
}

#loungeInfoModal .loungeInfo{
    display:grid !important;
    grid-template-columns:220px minmax(0, 1fr) !important;
    gap:28px !important;
    align-items:start !important;
}

#loungeInfoModal .loungeInfo__hero{
    min-height:330px !important;
    border-radius:6px !important;
    background-color:#f3dec7 !important;
    background-image:
        linear-gradient(rgba(243,222,199,.82), rgba(243,222,199,.82)),
        url("../images/logo.png") !important;
    background-size:auto, 170px auto !important;
    background-repeat:no-repeat, repeat !important;
    background-position:center, center !important;
    opacity:.9 !important;
    display:grid !important;
    place-items:center !important;
    overflow:hidden !important;
}

#loungeInfoModal .loungeInfo__hero img{
    display:none !important;
}

#loungeInfoModal .loungeInfo__copy{
    color:#25202a !important;
    font-size:15px !important;
    line-height:1.62 !important;
}

#loungeInfoModal .loungeInfo__lead{
    font-size:19px !important;
    line-height:1.34 !important;
    font-weight:900 !important;
}

#loungeInfoModal .loungeInfo__tiers{
    margin:0 !important;
    padding:0 !important;
    list-style:none !important;
    display:grid !important;
    gap:8px !important;
}

#loungeInfoModal .loungeInfo__tiers li{
    display:grid !important;
    grid-template-columns:24px minmax(0, 1fr) !important;
    gap:8px !important;
}

.grid .card__body{
    align-items:stretch !important;
    text-align:left !important;
    padding:18px 18px 22px !important;
}

.grid .card__top{
    justify-content:space-between !important;
}

.grid .card__copy{
    display:block !important;
    justify-items:initial !important;
    max-width:100% !important;
    min-height:118px !important;
    margin-inline:0 !important;
    text-align:left !important;
}

.grid .card__title,
.grid .card__desc{
    width:100% !important;
    margin-inline:0 !important;
    text-align:left !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
}

.grid .card__title{
    font-family:ui-serif, Georgia, "Times New Roman", serif !important;
    line-height:1.2 !important;
    color:#c45487 !important;
}

.grid .card__desc{
    max-width:100% !important;
    min-height:calc(1.5em * 3) !important;
    margin:8px 0 0 !important;
    color:#776772 !important;
    font-size:14px !important;
    line-height:1.5 !important;
    overflow:hidden !important;
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:3 !important;
    line-clamp:3 !important;
}

@media (max-width: 640px){
    #loungeInfoModal .modal__card--loungeInfo{
        width:calc(100vw - 16px) !important;
        max-height:calc(100dvh - 16px) !important;
        padding:18px 14px !important;
    }

    #loungeInfoModal .loungeInfo{
        grid-template-columns:1fr !important;
        gap:16px !important;
    }

    #loungeInfoModal .loungeInfo__hero{
        min-height:170px !important;
    }

    .grid .card__copy{
        min-height:auto !important;
    }

    .grid .card__desc{
        min-height:0 !important;
    }
}

.page__actions .btn{
    min-width:max-content;
    white-space:nowrap;
}

@media (max-width: 760px){
    .page__head{
        flex-direction:row !important;
        align-items:center !important;
    }

    .page__actions{
        width:auto !important;
    }

    .page__actions .btn{
        width:auto !important;
        padding-inline:14px;
    }
}

@media (max-width: 520px){
    .page__head{
        gap:10px;
    }

    .h1{
        font-size:clamp(23px, 7vw, 32px);
    }

    .page__actions .btn{
        padding:10px 12px;
        font-size:13px;
    }
}

/* Keep product modals above the shared header and show the form normally */
body:has(#addProductToggle:checked) header.topbar,
body:has(#editProductToggle:checked) header.topbar{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(calc(-100% - 12px));
}

/* Keep category titles pinned to the top center on every viewport. */
.page__head{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) minmax(0, 760px) minmax(0, 1fr) !important;
    align-items:start !important;
    text-align:center !important;
    gap:14px !important;
}

.page__head > :first-child{
    grid-column:2 !important;
    justify-self:center !important;
    width:100% !important;
    min-width:0 !important;
}

.page__actions{
    grid-column:3 !important;
    justify-self:end !important;
    align-self:start !important;
}

.page__head .h1{
    overflow-wrap:anywhere;
}

@media (max-width: 760px){
    .page__head{
        grid-template-columns:1fr !important;
        justify-items:center !important;
    }

    .page__head > :first-child,
    .page__actions{
        grid-column:1 !important;
        justify-self:center !important;
    }
}

#addProductToggle:checked ~ .backdrop--page[for="addProductToggle"],
#editProductToggle:checked ~ .backdrop--page[for="editProductToggle"]{
    z-index:2100 !important;
}

#addProductModal,
#editProductModal{
    z-index:2200 !important;
    align-items:center;
    padding:clamp(16px, 3vw, 28px);
}

#addProductModal .modal__card,
#editProductModal .modal__card{
    width:min(760px, calc(100vw - 32px)) !important;
    max-height:calc(100dvh - 32px) !important;
    padding:22px 20px 18px !important;
    background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,245,249,.94)) !important;
    overflow:auto !important;
    scrollbar-gutter:stable;
}

#addProductModal .modal__close,
#editProductModal .modal__close{
    position:absolute !important;
    right:14px !important;
    top:14px !important;
    margin-left:0 !important;
}

#addProductModal .modal__head,
#editProductModal .modal__head{
    padding-right:46px;
}

/* Final product-card flow: keep title, price, and buttons from overlapping. */
.grid .card{
    display:flex !important;
    flex-direction:column !important;
    padding-bottom:0 !important;
}

.grid .card__body{
    display:flex !important;
    flex:1 1 auto !important;
    flex-direction:column !important;
    gap:12px !important;
    padding:18px !important;
}

.grid .card__top{
    flex:1 1 auto !important;
}

.grid .card__copy{
    min-height:0 !important;
}

.grid .card__title{
    min-height:0 !important;
}

.grid .card__desc{
    min-height:0 !important;
}

.grid .card__price{
    position:static !important;
    inset:auto !important;
    transform:none !important;
    align-self:flex-end !important;
    min-width:0 !important;
    max-width:100% !important;
    margin:2px 0 0 !important;
}

.grid .card__actions{
    position:static !important;
    inset:auto !important;
    display:flex !important;
    width:100% !important;
    margin-top:auto !important;
    padding-top:2px !important;
    justify-content:stretch !important;
}

.grid .card__actions .btn{
    min-width:0 !important;
    min-height:46px !important;
}

.grid .card__cta{
    width:100% !important;
    max-width:none !important;
    margin-inline:0 !important;
}

@media (max-width:640px){
    .grid .card__body{
        padding:16px !important;
    }

    .grid .card__price{
        align-self:flex-end !important;
    }
}

/* Bestseller cards share the same burgundy/yellow treatment everywhere. */
.card[data-bestseller="true"]{
    background:#9C2A44 !important;
    border-color:rgba(156,42,68,.32) !important;
    box-shadow:0 24px 54px rgba(156,42,68,.24) !important;
}

.card[data-bestseller="true"] .card__body{
    background:#9C2A44 !important;
}

.card[data-bestseller="true"] .card__media{
    background:linear-gradient(180deg, #fff, #fff7fa) !important;
    border-bottom-color:rgba(255,255,255,.22) !important;
}

.card[data-bestseller="true"] .card__title{
    color:#FFE9A6 !important;
}

.card[data-bestseller="true"] .card__desc{
    color:rgba(255,255,255,.82) !important;
}

.card[data-bestseller="true"] .card__price{
    color:#8c9fc9 !important;
    border-color:rgba(255,255,255,.42) !important;
    background:rgba(255,255,255,.88) !important;
}

.card[data-bestseller="true"] .card__priceCur{
    color:rgba(75,91,130,.72) !important;
}

/* Lounge explainer: remove the side logo panel and use the logo as a repeated background. */
#loungeInfoModal .modal__card--loungeInfo{
    position:relative !important;
    width:min(910px, calc(100vw - 32px)) !important;
    overflow:auto !important;
    isolation:isolate !important;
    background:#f3dec7 !important;
}

#loungeInfoModal .modal__card--loungeInfo::before{
    content:"";
    position:absolute;
    inset:-45%;
    z-index:-1;
    background-image:url("../images/logo.png");
    background-size:150px auto;
    background-repeat:repeat;
    background-position:left bottom;
    opacity:.105;
    transform:rotate(-34deg);
    transform-origin:center;
    pointer-events:none;
}

#loungeInfoModal .modal__card--loungeInfo::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(180deg, rgba(255,247,251,.84), rgba(255,240,247,.78));
    pointer-events:none;
}

#loungeInfoModal .loungeInfo{
    display:block !important;
    max-width:720px !important;
    margin:0 auto !important;
    text-align:center !important;
}

#loungeInfoModal .loungeInfo__hero{
    display:none !important;
}

#loungeInfoModal .loungeInfo__copy{
    text-align:center !important;
    margin:0 auto !important;
}

#loungeInfoModal .loungeInfo__tiers{
    justify-items:center !important;
}

#loungeInfoModal .loungeInfo__tiers li{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
    max-width:640px !important;
    text-align:left !important;
}

@media (max-width:640px){
    #loungeInfoModal .modal__card--loungeInfo{
        width:calc(100vw - 16px) !important;
        padding:18px 14px !important;
    }
}

/* Client final Lounge request: beige repeated-logo background, centered text, no inner scroll. */
#loungeInfoModal .modal__card--loungeInfo{
    width:min(980px, calc(100vw - 42px)) !important;
    max-height:calc(100dvh - 42px) !important;
    overflow:hidden !important;
    padding:clamp(16px, 2.4vw, 24px) clamp(20px, 3.5vw, 42px) !important;
    border-radius:26px !important;
    background:
        radial-gradient(circle at 50% 30%, rgba(255,255,255,0.98), rgba(255,255,255,0.92) 16%, rgba(255,255,255,0) 31%),
        radial-gradient(circle at top left, rgba(255,255,255,0.82), rgba(255,255,255,0) 34%),
        radial-gradient(circle at 12% 18%, rgba(244,169,193,0.28), rgba(244,169,193,0) 36%),
        radial-gradient(circle at 88% 76%, rgba(232,172,203,0.20), rgba(232,172,203,0) 32%),
        linear-gradient(140deg, #fff8fb 0%, #ffe7f1 48%, #f8c4da 100%) !important;
    scrollbar-width:none !important;
}

#loungeInfoModal .modal__card--loungeInfo::-webkit-scrollbar{
    display:none !important;
}

#loungeInfoModal .modal__card--loungeInfo::before{
    inset:-22% !important;
    background-image:url("../images/logo.png") !important;
    background-size:92px auto !important;
    background-repeat:repeat !important;
    background-position:center !important;
    opacity:.07 !important;
    transform:rotate(-24deg) scale(1.08) !important;
}

#loungeInfoModal .modal__card--loungeInfo::after{
    background:rgba(255,255,255,.18) !important;
}

#loungeInfoModal .loungeInfo{
    max-width:820px !important;
}

#loungeInfoModal .loungeInfo__copy{
    font-size:clamp(11px, 1.05vw, 13px) !important;
    line-height:1.38 !important;
}

#loungeInfoModal .loungeInfo__lead{
    margin-bottom:8px !important;
    font-size:clamp(15px, 1.5vw, 19px) !important;
    line-height:1.18 !important;
}

#loungeInfoModal .loungeInfo__copy p{
    margin:0 0 7px !important;
}

#loungeInfoModal .loungeInfo__copy h3{
    margin:9px 0 5px !important;
    font-size:14px !important;
}

#loungeInfoModal .loungeInfo__tiers{
    gap:6px !important;
}

#loungeInfoModal .loungeInfo__tiers li{
    max-width:740px !important;
    line-height:1.34 !important;
}

@media (max-width:640px){
    #loungeInfoModal .modal__card--loungeInfo{
        width:calc(100vw - 18px) !important;
        max-height:calc(100dvh - 18px) !important;
        padding:14px 10px !important;
    }

    #loungeInfoModal .modal__card--loungeInfo::before{
        background-size:72px auto !important;
    }

    #loungeInfoModal .loungeInfo__copy{
        font-size:11px !important;
        line-height:1.34 !important;
    }

    #loungeInfoModal .loungeInfo__lead{
        font-size:15px !important;
    }

    #loungeInfoModal .loungeInfo__copy h3{
        margin:8px 0 5px !important;
        font-size:13px !important;
    }

    #loungeInfoModal .loungeInfo__tiers{
        gap:4px !important;
    }
}

/* Product-page Lounge panel lock: no scrollbars, compact copy, app login-style surface. */
#loungeInfoModal.modal--loungeInfo{
    padding:clamp(18px, 4vw, 34px) !important;
    overflow:hidden !important;
}

#loungeInfoModal .modal__card--loungeInfo{
    width:min(920px, calc(100vw - 44px)) !important;
    max-height:calc(100dvh - 52px) !important;
    overflow:hidden !important;
    padding:clamp(18px, 2.5vw, 28px) clamp(22px, 4vw, 54px) !important;
    border:1px solid rgba(196,84,135,.18) !important;
    border-radius:30px !important;
    background:
        radial-gradient(circle at 50% 30%, rgba(255,255,255,0.98), rgba(255,255,255,0.92) 16%, rgba(255,255,255,0) 31%),
        radial-gradient(circle at top left, rgba(255,255,255,0.82), rgba(255,255,255,0) 34%),
        radial-gradient(circle at 12% 18%, rgba(244,169,193,0.28), rgba(244,169,193,0) 36%),
        radial-gradient(circle at 88% 76%, rgba(232,172,203,0.20), rgba(232,172,203,0) 32%),
        linear-gradient(140deg, #fff8fb 0%, #ffe7f1 48%, #f8c4da 100%) !important;
    box-shadow:0 30px 80px rgba(42,10,27,.24), inset 0 1px 0 rgba(255,255,255,.72) !important;
    scrollbar-width:none !important;
}

#loungeInfoModal .modal__card--loungeInfo::-webkit-scrollbar{
    display:none !important;
}

#loungeInfoModal .modal__card--loungeInfo::before{
    content:"" !important;
    position:absolute !important;
    inset:-18% !important;
    z-index:-1 !important;
    background-image:url("../images/logo.png") !important;
    background-repeat:repeat !important;
    background-size:88px auto !important;
    background-position:center !important;
    opacity:.065 !important;
    transform:rotate(-24deg) scale(1.08) !important;
    transform-origin:center !important;
    pointer-events:none !important;
}

#loungeInfoModal .modal__card--loungeInfo::after{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:-1 !important;
    background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,244,249,.18)) !important;
    pointer-events:none !important;
}

#loungeInfoModal .loungeInfo{
    display:block !important;
    max-width:760px !important;
    margin:0 auto !important;
    text-align:center !important;
}

#loungeInfoModal .loungeInfo__hero{
    display:none !important;
}

#loungeInfoModal .loungeInfo__copy{
    margin:0 auto !important;
    color:#25202a !important;
    text-align:center !important;
    font-size:clamp(11px, 1vw, 13px) !important;
    line-height:1.34 !important;
}

#loungeInfoModal .loungeInfo__lead{
    margin:0 0 8px !important;
    font-size:clamp(16px, 1.6vw, 20px) !important;
    line-height:1.15 !important;
    font-weight:950 !important;
}

#loungeInfoModal .loungeInfo__copy p{
    margin:0 0 7px !important;
}

#loungeInfoModal .loungeInfo__copy h3{
    margin:10px 0 5px !important;
    color:#17131b !important;
    font-size:14px !important;
    line-height:1.2 !important;
    font-weight:950 !important;
}

#loungeInfoModal .loungeInfo__tiers{
    margin:0 !important;
    padding:0 !important;
    display:grid !important;
    gap:5px !important;
    justify-items:center !important;
}

#loungeInfoModal .loungeInfo__tiers li{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
    max-width:700px !important;
    line-height:1.3 !important;
    text-align:left !important;
}

#loungeInfoModal .loungeInfo-closeFab{
    right:16px !important;
    top:16px !important;
    background:rgba(255,255,255,.88) !important;
    border-color:rgba(196,84,135,.16) !important;
    box-shadow:0 12px 28px rgba(42,10,27,.12) !important;
}

@media (max-width:640px){
    #loungeInfoModal.modal--loungeInfo{
        padding:9px !important;
    }

    #loungeInfoModal .modal__card--loungeInfo{
        width:calc(100vw - 18px) !important;
        max-height:calc(100dvh - 18px) !important;
        padding:14px 11px !important;
        border-radius:22px !important;
    }

    #loungeInfoModal .modal__card--loungeInfo::before{
        background-size:66px auto !important;
    }

    #loungeInfoModal .loungeInfo__copy{
        font-size:10.5px !important;
        line-height:1.26 !important;
    }

    #loungeInfoModal .loungeInfo__lead{
        padding-inline:28px !important;
        font-size:14px !important;
    }

    #loungeInfoModal .loungeInfo__copy h3{
        margin:6px 0 4px !important;
        font-size:12px !important;
    }

    #loungeInfoModal .loungeInfo__tiers{
        gap:3px !important;
    }
}

@media (max-width:640px){
    #loungeInfoModal.modal--loungeInfo{
        align-items:flex-start !important;
        overflow-y:auto !important;
        padding:12px 9px !important;
        -webkit-overflow-scrolling:touch;
    }

    #loungeInfoModal .modal__card--loungeInfo{
        max-height:none !important;
        min-height:0 !important;
        overflow-y:visible !important;
        scrollbar-width:auto !important;
    }

    #loungeInfoModal .modal__card--loungeInfo::-webkit-scrollbar{
        display:block !important;
        width:6px;
    }
}

/* Last rule wins: phone category pages show two product cards per row. */
@media (max-width:640px){
    #productsGrid.grid{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        gap:12px !important;
        align-items:stretch !important;
    }

    #productsGrid.grid > .card{
        width:100% !important;
        min-width:0 !important;
        --card-side-inset:10px;
        --card-bottom-inset:10px;
        --card-cta-height:36px;
        --card-price-gap:5px;
        --card-reserved-space:10px;
        border-radius:18px !important;
    }

    #productsGrid.grid > .card:only-child{
        grid-column:1 / -1;
        width:min(100%, 270px) !important;
        justify-self:center;
        --card-side-inset:14px;
        --card-bottom-inset:14px;
        --card-cta-height:42px;
        --card-price-gap:7px;
        --card-reserved-space:14px;
        border-radius:24px !important;
    }

    #productsGrid .card__media{
        aspect-ratio:1 / 1 !important;
        min-height:0 !important;
        max-height:none !important;
        border-radius:14px !important;
    }

    #productsGrid .card__body{
        padding:10px 10px var(--card-reserved-space) !important;
        min-height:0 !important;
    }

    #productsGrid .card__copy{
        min-height:66px !important;
        max-width:100% !important;
    }

    #productsGrid .card__title{
        font-size:14px !important;
        line-height:1.18 !important;
        min-height:calc(1.18em * 2) !important;
    }

    #productsGrid .card__desc{
        margin-top:5px !important;
        font-size:11px !important;
        line-height:1.32 !important;
        -webkit-line-clamp:2 !important;
        line-clamp:2 !important;
    }

    #productsGrid .card__price{
        min-width:82px !important;
        padding:7px 9px !important;
    }

    #productsGrid .card__priceVal{
        font-size:17px !important;
    }

    #productsGrid .card__priceCur{
        font-size:9px !important;
    }

    #productsGrid .card__actions .btn,
    #productsGrid .card__cta{
        min-height:36px !important;
        min-width:0 !important;
        max-width:100% !important;
        padding-inline:10px !important;
        font-size:12px !important;
    }

    #productsGrid .card__tools{
        top:8px !important;
        right:8px !important;
    }

    #productsGrid .card__tools .icon-btn{
        width:34px !important;
        height:34px !important;
        min-height:34px !important;
    }

    #productsGrid.grid > .card:only-child .card__media{
        border-radius:18px !important;
    }

    #productsGrid.grid > .card:only-child .card__body{
        min-height:0 !important;
        padding:14px 14px var(--card-reserved-space) !important;
    }

    #productsGrid.grid > .card:only-child .card__copy{
        min-height:92px !important;
    }

    #productsGrid.grid > .card:only-child .card__title{
        font-size:18px !important;
    }

    #productsGrid.grid > .card:only-child .card__desc{
        font-size:13px !important;
        -webkit-line-clamp:3 !important;
        line-clamp:3 !important;
    }

    #productsGrid.grid > .card:only-child .card__actions .btn,
    #productsGrid.grid > .card:only-child .card__cta{
        min-height:42px !important;
        font-size:14px !important;
    }
}

/* Product category Lounge explainer: match the larger shared modal sizing. */
#loungeInfoModal.modal--loungeInfo{
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    padding:clamp(14px, 3vw, 34px) !important;
}

#loungeInfoModal .modal__card--loungeInfo{
    width:min(820px, calc(100vw - 28px)) !important;
    min-height:min(680px, calc(100dvh - 28px)) !important;
    max-height:calc(100dvh - 28px) !important;
    overflow-y:auto !important;
    padding:clamp(22px, 4vw, 44px) clamp(28px, 5vw, 58px) !important;
}

#loungeInfoModal .loungeInfo{
    display:flex !important;
    min-height:100% !important;
    max-width:100% !important;
    align-items:stretch !important;
}

#loungeInfoModal .loungeInfo__copy{
    width:100% !important;
    max-width:100% !important;
    min-height:100% !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:space-between !important;
    gap:clamp(10px, 1.5vw, 18px) !important;
    font-size:clamp(15px, 1.35vw, 19px) !important;
    line-height:1.45 !important;
}

#loungeInfoModal .loungeInfo__lead{
    font-size:clamp(22px, 2.2vw, 32px) !important;
    line-height:1.12 !important;
}

#loungeInfoModal .loungeInfo__copy h3{
    font-size:clamp(17px, 1.6vw, 23px) !important;
}

#loungeInfoModal .loungeInfo__tiers{
    gap:clamp(9px, 1.1vw, 14px) !important;
}

#loungeInfoModal .loungeInfo__tiers li{
    max-width:100% !important;
}

@media (max-width:640px){
    #loungeInfoModal.modal--loungeInfo{
        align-items:flex-start !important;
        overflow-y:auto !important;
    }

    #loungeInfoModal .modal__card--loungeInfo{
        width:calc(100vw - 18px) !important;
        min-height:0 !important;
        max-height:none !important;
        overflow-y:visible !important;
        padding:18px 14px !important;
    }

    #loungeInfoModal .loungeInfo__copy{
        font-size:14px !important;
        line-height:1.42 !important;
    }

    #loungeInfoModal .loungeInfo__lead{
        font-size:22px !important;
    }
}