/* WhatsApp Store Theme: COSMETIC
   Folder: public/whatsapp-store-themes/cosmetic */

body.whatsapp-store-theme-cosmetic {
    --wa-green: #a73443;
    --wa-bright: #d95c6d;
    --footer-bg: rgba(255, 255, 255, .98);
    --footer-border: #f3d6d9;
    --footer-text: #6f484d;
    --footer-active: #d35666;
    --footer-shadow: rgba(145, 54, 65, .12);
    background:
        radial-gradient(circle at 18% 0%, rgba(251, 210, 216, .48), transparent 32%),
        linear-gradient(180deg, #f8e7ea 0%, #fff7f7 42%, #fff 100%);
    color: #321416;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.whatsapp-store-theme-cosmetic .app-shell {
    max-width: 430px;
    background: linear-gradient(180deg, #fff7f7 0%, #fff 54%, #fff9f9 100%);
    box-shadow: 0 24px 76px rgba(122, 42, 52, .24);
}

body.whatsapp-store-theme-cosmetic .phone-header {
    position: relative;
    overflow: hidden;
    min-height: 0;
    border: 0;
    color: #fff;
    background:
        radial-gradient(circle at 90% 8%, rgba(255,255,255,.22), transparent 20%),
        radial-gradient(circle at 8% 82%, rgba(255,198,205,.28), transparent 28%),
        linear-gradient(135deg, #d96876 0%, #c65060 45%, #a83345 100%);
}

body.whatsapp-store-theme-cosmetic .phone-header::before {
    content: none;
}

body.whatsapp-store-theme-cosmetic .phone-header::after {
    content: none;
}

body.whatsapp-store-theme-cosmetic .brand-row {
    position: relative;
    z-index: 3;
    gap: 15px;
    padding: 18px 18px 17px;
}
body.whatsapp-store-theme-cosmetic .icon-btn svg {
    stroke-width: 2.35;
}

body.whatsapp-store-theme-cosmetic .brand {
    flex: 1;
    min-width: 0;
}

body.whatsapp-store-theme-cosmetic .wa-logo {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 12px 22px rgba(90, 21, 32, .24);
}

body.whatsapp-store-theme-cosmetic .wa-logo svg {
    width: 46px;
    height: 46px;
}

body.whatsapp-store-theme-cosmetic .store-title strong {
    color: #fff;
    font-size: 22px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: -.04em;
}
body.whatsapp-store-theme-cosmetic .header-actions {
    gap: 14px;
}

body.whatsapp-store-theme-cosmetic .icon-btn {
    width: 32px;
    height: 32px;
}

body.whatsapp-store-theme-cosmetic .cart-badge,
body.whatsapp-store-theme-cosmetic .discount {
    background: #dc6171;
    color: #fff;
}

body.whatsapp-store-theme-cosmetic .cart-badge {
    right: -7px;
    top: -7px;
    border-color: rgba(255,255,255,.72);
    box-shadow: 0 5px 12px rgba(123, 38, 49, .22);
}

body.whatsapp-store-theme-cosmetic .location {
    position: relative;
    z-index: 4;
    margin-top: -1px;
    padding: 18px 20px 17px;
    border: 0;
    border-radius: 16px 16px 0 0;
    background: #fff;
    color: #7d2631;
    font-size: 15px;
    font-weight: 850;
    box-shadow: 0 -9px 22px rgba(126, 42, 52, .08);
}

body.whatsapp-store-theme-cosmetic .location svg {
    stroke: #b43d4b;
}

body.whatsapp-store-theme-cosmetic .content {
    padding: 14px 14px 94px;
}

body.whatsapp-store-theme-cosmetic .sale-card {
    height: 184px;
    min-height: 184px;
    max-height: 184px;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(204, 101, 113, .24);
    background:
        linear-gradient(90deg, rgba(255, 233, 234, .98) 0%, rgba(255, 225, 228, .94) 42%, rgba(255, 221, 224, .18) 68%),
        var(--store-banner, radial-gradient(circle at 76% 30%, rgba(255,255,255,.75), transparent 22%), linear-gradient(135deg, #ffe6e8, #f5b9c1 64%, #f9d8d6));
    background-size: cover;
    background-position: center right;
    box-shadow: 0 16px 30px rgba(152, 58, 70, .14);
}

body.whatsapp-store-theme-cosmetic .sale-card::before {
    content: "";
    position: absolute;
    right: -38px;
    top: -22px;
    width: 182px;
    height: 182px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,.55), rgba(255,210,217,.14) 58%, transparent 60%);
    pointer-events: none;
}

body.whatsapp-store-theme-cosmetic .sale-card::after {
    content: "↗ TRENDING";
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 4;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 4px solid #fff;
    background: rgba(255,255,255,.94);
    color: #ca4b5b;
    font-size: 9px;
    font-weight: 950;
    line-height: 1.05;
    text-align: center;
    box-shadow: 0 13px 24px rgba(136, 45, 55, .18);
}

body.whatsapp-store-theme-cosmetic .sale-copy {
    position: relative;
    z-index: 3;
    max-width: 48%;
    padding: 10px 13px 11px;
}

body.whatsapp-store-theme-cosmetic .tag {
    border-radius: 0;
    background: transparent;
    color: #6c2029;
    padding: 0;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .22em;
    text-transform: uppercase;
}

body.whatsapp-store-theme-cosmetic .sale-copy h2 {
    margin: 6px 0 6px;
    color: #662229;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 24px;
    line-height: .92;
    font-weight: 900;
    letter-spacing: -.04em;
}

body.whatsapp-store-theme-cosmetic .sale-copy h2 span {
    display: block;
    color: #7b2a31;
}

body.whatsapp-store-theme-cosmetic .sale-copy p {
    margin: 0 0 8px;
    color: #5b2429;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 720;
}

body.whatsapp-store-theme-cosmetic .shop-btn {
    min-height: 32px;
    border-radius: 9px;
    background: linear-gradient(135deg, #c94d5d, #d86575);
    color: #fff;
    padding: 0 14px;
    font-size: 12px;
    box-shadow: 0 12px 22px rgba(201, 77, 93, .24);
}

body.whatsapp-store-theme-cosmetic .shop-btn::after {
    content: " →";
    margin-left: 8px;
    font-size: 17px;
    line-height: 0;
}

body.whatsapp-store-theme-cosmetic .hero-products {
    right: 0;
    bottom: 0;
    width: 60%;
    height: 100%;
    justify-content: flex-end;
    align-items: end;
    gap: 2px;
    padding-right: 23px;
}

body.whatsapp-store-theme-cosmetic .bag {
    display: none;
}

body.whatsapp-store-theme-cosmetic .hero-products img {
    position: relative;
    z-index: 2;
    width: 32%;
    height: 104px;
    max-height: none;
    object-fit: contain;
    filter: drop-shadow(0 17px 18px rgba(119, 42, 52, .2));
}

body.whatsapp-store-theme-cosmetic .category-strip {
    gap: 17px;
    padding: 18px 2px 8px;
}

body.whatsapp-store-theme-cosmetic .cat-link {
    flex-basis: 62px;
    color: #321416;
}

body.whatsapp-store-theme-cosmetic .cat-icon {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: #fff0f2 !important;
    color: #9f303e;
    font-size: 11px;
    font-weight: 950;
    box-shadow: inset 0 0 0 1px rgba(213, 91, 105, .10);
}

body.whatsapp-store-theme-cosmetic .cat-link:first-child .cat-icon {
    background: linear-gradient(135deg, #d15464, #c34858) !important;
    color: #fff;
    font-size: 12px;
}

body.whatsapp-store-theme-cosmetic .cat-link span:last-child {
    width: 84px;
    margin-left: -11px;
    color: #4c1b20;
    font-size: 12px;
    font-weight: 760;
}

body.whatsapp-store-theme-cosmetic .section-head {
    margin: 19px 4px 13px;
}

body.whatsapp-store-theme-cosmetic .section-title {
    color: #9b303c;
    font-size: 20px !important;
}

body.whatsapp-store-theme-cosmetic .section-title span {
    color: #df5d6f !important;
}

body.whatsapp-store-theme-cosmetic .timer {
    border: 1px solid rgba(217, 92, 109, .24);
    border-radius: 8px;
    background: #fff0f1;
    color: #8e2732;
    font-size: 13px !important;
}

body.whatsapp-store-theme-cosmetic .view-all {
    color: #9b303c;
    font-weight: 850;
}

body.whatsapp-store-theme-cosmetic .view-all::after {
    content: "›";
    font-size: 24px;
    line-height: .5;
}

body.whatsapp-store-theme-cosmetic .deal-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

body.whatsapp-store-theme-cosmetic .product-card {
    overflow: hidden;
    border: 1px solid #f0d2d6;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(136, 45, 55, .11);
}

body.whatsapp-store-theme-cosmetic .product-image {
    height: 140px;
    background: linear-gradient(180deg, #fff9f9, #fff2f3);
}

body.whatsapp-store-theme-cosmetic .product-image::before {
    content: "♡";
    position: absolute;
    right: 10px;
    top: 8px;
    z-index: 2;
    color: #7b1e27;
    font-size: 22px;
    line-height: 1;
}

body.whatsapp-store-theme-cosmetic .product-image img {
    max-width: 96%;
    max-height: 126px;
    filter: drop-shadow(0 9px 10px rgba(131, 44, 55, .12));
}

body.whatsapp-store-theme-cosmetic .discount {
    left: 8px;
    top: 9px;
    border-radius: 999px;
    padding: 5px 9px;
    background: #d75969;
    font-size: 12px;
}

body.whatsapp-store-theme-cosmetic .product-body {
    padding: 11px 10px 12px;
}

body.whatsapp-store-theme-cosmetic .product-body h3 {
    color: #261011;
    font-size: 14px;
    font-weight: 850;
}

body.whatsapp-store-theme-cosmetic .product-body p {
    color: #8b6569;
    font-size: 12px;
    font-weight: 700;
}

body.whatsapp-store-theme-cosmetic .price {
    color: #1d0d0f;
    font-size: 16px;
}

body.whatsapp-store-theme-cosmetic .mrp {
    color: #a48b8e;
}

body.whatsapp-store-theme-cosmetic .rating {
    display: block !important;
    margin: 8px 0 9px;
    color: #cf5364;
    font-size: 11px;
}

body.whatsapp-store-theme-cosmetic .add-cart {
    min-height: 38px;
    border: 1px solid #ce5362;
    border-radius: 8px;
    background: #fff;
    color: #8c2732;
    font-size: 13px;
}

body.whatsapp-store-theme-cosmetic .add-cart::before {
    content: "🛒";
    font-size: 14px;
}

body.whatsapp-store-theme-cosmetic .product-card.is-selected {
    border-color: #d85b6c;
    box-shadow: 0 12px 26px rgba(216, 91, 108, .2), inset 0 0 0 1px rgba(216, 91, 108, .2);
}

body.whatsapp-store-theme-cosmetic .product-card.is-selected .add-cart::before {
    content: "";
}

body.whatsapp-store-theme-cosmetic .cosmetic-offer-banner {
    position: relative;
    overflow: hidden;
    min-height: 124px;
    margin: 15px 0 8px;
    border-radius: 16px;
    background:
        linear-gradient(90deg, rgba(255, 216, 221, .98) 0%, rgba(255, 220, 224, .9) 42%, rgba(255, 216, 221, .18) 76%),
        var(--store-banner, linear-gradient(135deg, #ffd9df, #f7b8c3));
    background-size: cover;
    background-position: center right;
    box-shadow: 0 13px 25px rgba(156, 54, 66, .13);
}

body.whatsapp-store-theme-cosmetic .cosmetic-offer-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 24% 20%, rgba(255,255,255,.36), transparent 16%),
        radial-gradient(circle at 78% 32%, rgba(255,255,255,.28), transparent 18%);
    pointer-events: none;
}

body.whatsapp-store-theme-cosmetic .cosmetic-offer-banner div {
    position: relative;
    z-index: 2;
    width: 52%;
    padding: 18px 20px;
}

body.whatsapp-store-theme-cosmetic .cosmetic-offer-banner p,
body.whatsapp-store-theme-cosmetic .cosmetic-offer-banner h3 {
    margin: 0;
    color: #872c35;
    font-family: Georgia, "Times New Roman", serif;
}

body.whatsapp-store-theme-cosmetic .cosmetic-offer-banner p {
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
}

body.whatsapp-store-theme-cosmetic .cosmetic-offer-banner h3 {
    margin-top: 4px;
    font-size: 19px;
    font-weight: 700;
}

body.whatsapp-store-theme-cosmetic .cosmetic-offer-banner span {
    display: inline-flex;
    margin: 10px 0 9px;
    border: 1px dashed rgba(151, 47, 58, .42);
    border-radius: 8px;
    color: #6c2029;
    padding: 4px 9px;
    font-size: 12px;
    font-weight: 800;
}

body.whatsapp-store-theme-cosmetic .cosmetic-offer-banner .shop-btn {
    min-height: 34px;
    padding: 0 16px;
}

body.whatsapp-store-theme-cosmetic .cosmetic-offer-banner img {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 1;
    width: 48%;
    height: 124px;
    object-fit: contain;
    object-position: bottom right;
    filter: drop-shadow(0 13px 16px rgba(124, 40, 51, .16));
}

body.whatsapp-store-theme-cosmetic .top-cats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

body.whatsapp-store-theme-cosmetic .top-cat {
    border: 1px solid #f0d5d9;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 8px 17px rgba(134, 45, 55, .08);
}

body.whatsapp-store-theme-cosmetic .top-cat .thumb {
    height: 83px;
    background: linear-gradient(180deg, #fff9f9, #fff1f3);
    color: #bb4351;
}

body.whatsapp-store-theme-cosmetic .top-cat span:last-child {
    color: #582127;
    font-size: 11px;
    font-weight: 820;
}

body.whatsapp-store-theme-cosmetic .bottom-nav {
    border-radius: 0;
    background: rgba(255,255,255,.98) !important;
    border-color: #f0d6d9 !important;
}

body.whatsapp-store-theme-cosmetic .bottom-nav .active,
body.whatsapp-store-theme-cosmetic .bottom-nav .active b {
    color: #d15464 !important;
}

body.whatsapp-store-theme-cosmetic .search-top {
    background: linear-gradient(135deg, #b83b4a, #dc6171);
}

body.whatsapp-store-theme-cosmetic .search-add {
    background: linear-gradient(135deg, #bc4050, #dc6171);
}

@media (max-width: 360px) {
    body.whatsapp-store-theme-cosmetic .store-title strong {
        font-size: 24px;
    }

    body.whatsapp-store-theme-cosmetic .sale-copy h2 {
        font-size: 22px;
    }

    body.whatsapp-store-theme-cosmetic .hero-products {
        width: 56%;
        padding-right: 10px;
    }

    body.whatsapp-store-theme-cosmetic .sale-card {
        height: 168px;
        min-height: 168px;
        max-height: 168px;
    }

    body.whatsapp-store-theme-cosmetic .sale-copy {
        padding: 10px 11px 10px;
    }

    body.whatsapp-store-theme-cosmetic .sale-copy p {
        font-size: 10px;
    }

    body.whatsapp-store-theme-cosmetic .product-image {
        height: 126px;
    }
}