/* =========================================================
   THICHLAMBANH
   TRUNG THU LANDING PAGE V2
========================================================= */

:root{
    --moon-red:#9f1733;
    --moon-red-dark:#741126;
    --moon-pink:#ed0754;

    --moon-gold:#f5c869;
    --moon-gold-light:#ffe7ae;

    --moon-text:#332429;
    --moon-muted:#817277;

    --moon-border:#eee1df;

    --moon-cream:#fff9f3;
}


/* =========================================================
   RESET
========================================================= */

.tlb-moon-page,
.tlb-moon-page *,
.tlb-moon-page *::before,
.tlb-moon-page *::after{
    box-sizing:border-box;
}


/* =========================================================
   PAGE
========================================================= */

.tlb-moon-page{
    width:min(1440px,100%);

    margin:0 auto;

    padding:
        0
        20px
        60px;

    color:var(--moon-text);

    font-family:
        "Be Vietnam Pro",
        Arial,
        sans-serif;
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.tlb-moon-sr-only{
    position:absolute!important;

    width:1px!important;
    height:1px!important;

    padding:0!important;
    margin:-1px!important;

    overflow:hidden!important;

    clip:rect(0,0,0,0)!important;

    white-space:nowrap!important;

    border:0!important;
}


/* =========================================================
   SVG
========================================================= */

.tlb-moon-page svg{
    width:20px;
    height:20px;

    display:block;

    fill:none;
    stroke:currentColor;

    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.tlb-moon-breadcrumb{
    min-height:43px;

    display:flex;

    align-items:center;
    flex-wrap:wrap;

    gap:7px;

    color:#9b8b90;

    font-size:7px;
}


.tlb-moon-breadcrumb a{
    color:#79696e;

    text-decoration:none;
}


.tlb-moon-breadcrumb a:hover{
    color:var(--moon-pink);
}


.tlb-moon-breadcrumb strong{
    color:#4a3a3f;

    font-weight:600;
}


/* =========================================================
   HERO
========================================================= */

.tlb-moon-hero{
    position:relative;

    min-height:390px;

    display:grid;

    grid-template-columns:
        minmax(0,1.05fr)
        minmax(430px,.95fr);

    align-items:center;

    overflow:hidden;

    border-radius:21px;

    color:#fff;

    background:
        radial-gradient(
            circle at 82% 35%,
            rgba(255,225,150,.20),
            transparent 27%
        ),
        linear-gradient(
            112deg,
            #761126 0%,
            #9f1733 42%,
            #b4203c 70%,
            #9e1832 100%
        );

    box-shadow:
        0
        12px
        35px
        rgba(92,13,38,.12);
}


.tlb-moon-hero::before{
    content:"";

    position:absolute;

    z-index:1;

    left:-150px;
    bottom:-260px;

    width:520px;
    height:520px;

    border-radius:50%;

    border:
        1px
        solid
        rgba(255,224,170,.12);
}


.tlb-moon-hero::after{
    content:"";

    position:absolute;

    z-index:1;

    left:220px;
    top:-230px;

    width:420px;
    height:420px;

    border-radius:50%;

    border:
        1px
        solid
        rgba(255,224,170,.07);
}


/* =========================================================
   HERO GLOW
========================================================= */

.tlb-moon-hero__glow{
    position:absolute;

    z-index:1;

    top:-130px;
    right:80px;

    width:500px;
    height:500px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,212,112,.16),
            transparent 65%
        );

    pointer-events:none;
}


/* =========================================================
   HERO CONTENT
========================================================= */

.tlb-moon-hero__content{
    position:relative;

    z-index:5;

    max-width:640px;

    padding:
        48px
        0
        45px
        55px;
}


/* =========================================================
   KICKER
========================================================= */

.tlb-moon-kicker{
    display:inline-flex;

    align-items:center;

    gap:7px;

    margin-bottom:14px;

    color:#ffd990;

    font-size:8px;

    font-weight:700;

    letter-spacing:1.5px;
}


.tlb-moon-kicker svg{
    width:16px;
    height:16px;
}


/* =========================================================
   HERO TITLE
========================================================= */

.tlb-moon-hero h1{
    max-width:570px;

    margin:0;

    color:#fff;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:52px;
    line-height:1.02;

    font-weight:700;

    letter-spacing:-1.4px;
}


.tlb-moon-hero h1 em{
    display:block;

    margin-top:5px;

    color:#ffe1a0;

    font-style:normal;
}


/* =========================================================
   HERO TEXT
========================================================= */

.tlb-moon-hero__content > p{
    max-width:510px;

    margin:
        20px
        0
        0;

    color:
        rgba(255,255,255,.86);

    font-size:11px;
    line-height:1.75;

    font-weight:400;
}


/* =========================================================
   HERO ACTIONS
========================================================= */

.tlb-moon-hero__actions{
    margin-top:24px;

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:9px;
}


.tlb-moon-hero__button,
.tlb-moon-hero__secondary{
    min-height:42px;

    padding:
        0
        16px;

    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:8px;

    border-radius:8px;

    font-size:8px;

    font-weight:700;

    text-decoration:none;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}


.tlb-moon-hero__button{
    color:#6f1026;

    background:
        linear-gradient(
            135deg,
            #ffe399,
            #f5c667
        );

    box-shadow:
        0
        8px
        18px
        rgba(66,10,22,.18);
}


.tlb-moon-hero__button svg{
    width:14px;
    height:14px;
}


.tlb-moon-hero__button:hover{
    transform:
        translateY(-2px);

    box-shadow:
        0
        11px
        23px
        rgba(66,10,22,.23);
}


.tlb-moon-hero__secondary{
    border:
        1px
        solid
        rgba(255,255,255,.33);

    color:#fff;

    background:
        rgba(255,255,255,.07);

    backdrop-filter:
        blur(8px);
}


.tlb-moon-hero__secondary:hover{
    background:
        rgba(255,255,255,.13);
}


/* =========================================================
   HERO STATS
========================================================= */

.tlb-moon-hero__stats{
    margin-top:28px;

    display:flex;

    align-items:center;

    gap:0;
}


.tlb-moon-hero__stats > div{
    position:relative;

    min-width:105px;

    padding:
        0
        17px;

    display:flex;

    flex-direction:column;

    gap:2px;
}


.tlb-moon-hero__stats > div:first-child{
    padding-left:0;
}


.tlb-moon-hero__stats > div:not(:last-child)::after{
    content:"";

    position:absolute;

    top:2px;
    right:0;

    width:1px;
    height:30px;

    background:
        rgba(255,255,255,.17);
}


.tlb-moon-hero__stats strong{
    color:#ffe2a1;

    font-size:15px;

    font-weight:700;
}


.tlb-moon-hero__stats span{
    color:
        rgba(255,255,255,.7);

    font-size:6px;
}


/* =========================================================
   HERO VISUAL
========================================================= */

.tlb-moon-hero__visual{
    position:relative;

    z-index:4;

    width:100%;
    height:100%;

    min-height:390px;
}


/* =========================================================
   MOON
========================================================= */

.tlb-moon-hero__moon{
    position:absolute;

    z-index:1;

    top:50%;
    right:65px;

    width:270px;
    height:270px;

    display:grid;

    place-items:center;

    border-radius:50%;

    transform:
        translateY(-50%);

    background:
        radial-gradient(
            circle at 35% 30%,
            #fff9de 0%,
            #ffe79f 40%,
            #f1c65d 100%
        );

    box-shadow:
        0 0 80px
        rgba(255,207,92,.35);
}


.tlb-moon-hero__moon::before{
    content:"";

    position:absolute;

    inset:12px;

    border:
        1px
        solid
        rgba(148,95,25,.10);

    border-radius:50%;
}


.tlb-moon-hero__moon span{
    color:
        rgba(132,32,52,.25);

    font-family:
        Georgia,
        serif;

    font-size:95px;
}


/* =========================================================
   HERO PRODUCTS
========================================================= */

.tlb-moon-hero-products{
    position:absolute;

    z-index:4;

    inset:0;
}


.tlb-moon-hero-product{
    position:absolute;

    display:grid;

    place-items:center;

    overflow:hidden;

    border:
        1px
        solid
        rgba(255,255,255,.53);

    border-radius:17px;

    background:
        rgba(255,255,255,.92);

    box-shadow:
        0
        14px
        28px
        rgba(68,11,25,.19);

    backdrop-filter:
        blur(6px);
}


.tlb-moon-hero-product img{
    width:100%;
    height:100%;

    padding:7px;

    display:block;

    object-fit:contain;
}


.tlb-moon-hero-product--1{
    right:225px;
    top:69px;

    width:145px;
    height:145px;

    transform:
        rotate(-5deg);
}


.tlb-moon-hero-product--2{
    right:83px;
    bottom:54px;

    width:137px;
    height:137px;

    transform:
        rotate(5deg);
}


.tlb-moon-hero-product--3{
    right:335px;
    bottom:55px;

    width:110px;
    height:110px;

    transform:
        rotate(3deg);
}


.tlb-moon-hero-product--4{
    right:52px;
    top:54px;

    width:103px;
    height:103px;

    transform:
        rotate(7deg);
}


/* =========================================================
   HERO STARS
========================================================= */

.tlb-moon-star{
    position:absolute;

    z-index:6;

    color:#ffe2a0;
}


.tlb-moon-star--1{
    top:45px;
    left:70px;

    font-size:15px;
}


.tlb-moon-star--2{
    right:38px;
    bottom:40px;

    font-size:18px;
}


.tlb-moon-star--3{
    right:360px;
    top:42%;

    color:
        rgba(255,255,255,.65);

    font-size:13px;
}


/* =========================================================
   TRUST STRIP
========================================================= */

.tlb-moon-trust{
    min-height:76px;

    margin-top:12px;

    padding:
        0
        18px;

    display:grid;

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

    align-items:center;

    overflow:hidden;

    border:
        1px
        solid
        #f0e4e1;

    border-radius:13px;

    background:
        linear-gradient(
            90deg,
            #fffdf9,
            #fff8f3
        );
}


.tlb-moon-trust > div{
    position:relative;

    min-height:45px;

    padding:
        0
        18px;

    display:grid;

    grid-template-columns:
        34px
        minmax(0,1fr);

    grid-template-rows:
        auto
        auto;

    align-content:center;

    column-gap:10px;
}


.tlb-moon-trust > div:not(:last-child)::after{
    content:"";

    position:absolute;

    top:6px;
    right:0;

    width:1px;
    height:34px;

    background:#efdfdc;
}


.tlb-moon-trust > div > span{
    grid-row:
        1
        /
        3;

    width:34px;
    height:34px;

    display:grid;

    place-items:center;

    border-radius:9px;

    color:var(--moon-red);

    background:#fff0ec;
}


.tlb-moon-trust > div > span svg{
    width:18px;
    height:18px;
}


.tlb-moon-trust strong{
    color:#46363b;

    font-size:7.5px;
}


.tlb-moon-trust small{
    margin-top:2px;

    color:#998b8f;

    font-size:5.8px;
}


/* =========================================================
   GLOBAL SECTION HEADING
========================================================= */

.tlb-moon-section-heading{
    display:flex;

    align-items:flex-end;
    justify-content:space-between;

    gap:20px;
}


.tlb-moon-section-kicker{
    display:block;

    margin-bottom:4px;

    color:var(--moon-red);

    font-size:6.5px;

    font-weight:700;

    letter-spacing:.65px;
}


.tlb-moon-section-heading h2,
.tlb-moon-products__top h2{
    margin:0;

    color:#3b2b30;

    font-size:19px;
    line-height:1.25;

    font-weight:700;

    letter-spacing:-.3px;
}


.tlb-moon-section-heading p{
    margin:
        5px
        0
        0;

    color:#8d7f83;

    font-size:7px;
}


.tlb-moon-section-heading > a{
    color:var(--moon-red);

    font-size:7px;

    font-weight:600;

    text-decoration:none;
}


/* =========================================================
   DISCOVERY
========================================================= */

.tlb-moon-discovery{
    margin-top:28px;
}


.tlb-moon-discovery-grid{
    margin-top:13px;

    display:grid;

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

    gap:10px;
}


/* =========================================================
   DISCOVERY CARD
========================================================= */

.tlb-moon-discovery-card{
    position:relative;

    min-height:132px;

    padding:
        15px;

    display:grid;

    grid-template-columns:
        46px
        minmax(0,1fr);

    align-items:start;

    gap:11px;

    overflow:hidden;

    border:
        1px
        solid
        #eee1dd;

    border-radius:13px;

    color:#46363b;

    text-decoration:none;

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}


.tlb-moon-discovery-card:hover{
    transform:
        translateY(-3px);

    border-color:#e5c6c1;

    box-shadow:
        0
        9px
        22px
        rgba(72,25,36,.07);
}


.tlb-moon-discovery-card--rose{
    background:
        linear-gradient(
            135deg,
            #fff7f5,
            #ffefef
        );
}


.tlb-moon-discovery-card--gold{
    background:
        linear-gradient(
            135deg,
            #fffaf0,
            #fff3d8
        );
}


.tlb-moon-discovery-card--cream{
    background:
        linear-gradient(
            135deg,
            #fffdf8,
            #fff5eb
        );
}


.tlb-moon-discovery-card--peach{
    background:
        linear-gradient(
            135deg,
            #fff9f5,
            #ffede5
        );
}


.tlb-moon-discovery-card__icon{
    position:relative;

    z-index:2;

    width:46px;
    height:46px;

    display:grid;

    place-items:center;

    border-radius:11px;

    color:var(--moon-red);

    background:
        rgba(255,255,255,.84);

    box-shadow:
        0
        4px
        12px
        rgba(94,36,44,.05);
}


.tlb-moon-discovery-card__icon svg{
    width:21px;
    height:21px;
}


.tlb-moon-discovery-card__copy{
    position:relative;

    z-index:2;
}


.tlb-moon-discovery-card__copy strong{
    display:block;

    color:#403035;

    font-size:9px;
    line-height:1.35;
}


.tlb-moon-discovery-card__copy small{
    display:block;

    min-height:38px;

    margin-top:5px;

    color:#807176;

    font-size:6.3px;
    line-height:1.55;
}


.tlb-moon-discovery-card__copy b{
    display:block;

    margin-top:7px;

    color:var(--moon-red);

    font-size:6.3px;
}


.tlb-moon-discovery-card__decor{
    position:absolute;

    right:-10px;
    bottom:-28px;

    color:
        rgba(142,34,54,.06);

    font-family:
        Georgia,
        serif;

    font-size:105px;
}


/* =========================================================
   PRODUCTS
========================================================= */

.tlb-moon-products{
    margin-top:32px;
}


/* =========================================================
   PRODUCTS TOP
========================================================= */

.tlb-moon-products__top{
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(320px,430px);

    align-items:end;

    gap:25px;
}


.tlb-moon-products__top p{
    margin:
        5px
        0
        0;

    color:#8c7d82;

    font-size:7px;
}


.tlb-moon-products__top p strong{
    color:var(--moon-red);
}


/* =========================================================
   SEARCH
========================================================= */

.tlb-moon-search{
    height:43px;

    display:grid;

    grid-template-columns:
        38px
        minmax(0,1fr)
        auto;

    align-items:center;

    overflow:hidden;

    border:
        1px
        solid
        #e8d8d5;

    border-radius:9px;

    background:#fff;
}


.tlb-moon-search > span{
    display:grid;

    place-items:center;

    color:#9e8b90;
}


.tlb-moon-search > span svg{
    width:17px;
    height:17px;
}


.tlb-moon-search input[type="search"]{
    width:100%;
    min-width:0;

    height:100%;

    padding:0;

    border:0;

    outline:0;

    color:#4a3b40;

    background:transparent;

    font:
        400
        7.5px/1
        "Be Vietnam Pro",
        Arial,
        sans-serif;
}


.tlb-moon-search input::placeholder{
    color:#ad9da1;
}


.tlb-moon-search button{
    height:100%;

    padding:
        0
        16px;

    border:0;

    color:#fff;

    background:var(--moon-red);

    font-family:inherit;

    font-size:7px;

    font-weight:700;

    cursor:pointer;
}


/* =========================================================
   TOOLBAR
========================================================= */

.tlb-moon-toolbar{
    min-height:53px;

    margin-top:13px;

    padding:
        7px
        8px
        7px
        12px;

    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:15px;

    border:
        1px
        solid
        #eee4e1;

    border-radius:10px;

    background:#fffcfa;
}


.tlb-moon-toolbar__filters{
    min-width:0;

    display:flex;

    align-items:center;
    flex-wrap:wrap;

    gap:6px;
}


.tlb-moon-toolbar__label{
    margin-right:3px;

    display:inline-flex;

    align-items:center;

    gap:5px;

    color:#77686d;

    font-size:6.5px;

    font-weight:600;
}


.tlb-moon-toolbar__label svg{
    width:14px;
    height:14px;
}


.tlb-moon-toolbar__filters a{
    min-height:29px;

    padding:
        0
        10px;

    display:inline-flex;

    align-items:center;

    border:
        1px
        solid
        #e9dddd;

    border-radius:999px;

    color:#6f6065;

    background:#fff;

    font-size:6px;

    text-decoration:none;
}


.tlb-moon-toolbar__filters a:hover,
.tlb-moon-toolbar__filters a.active{
    border-color:var(--moon-red);

    color:#fff;

    background:var(--moon-red);
}


.tlb-moon-toolbar__filters
.tlb-moon-toolbar__clear{
    border-color:#f0d6dc;

    color:#b02541;

    background:#fff3f5;
}


/* =========================================================
   SORT
========================================================= */

.tlb-moon-sort{
    flex:0 0 auto;

    display:flex;

    align-items:center;

    gap:7px;
}


.tlb-moon-sort label{
    color:#8b7c80;

    font-size:6.5px;
}


.tlb-moon-sort select{
    height:35px;

    min-width:138px;

    padding:
        0
        9px;

    border:
        1px
        solid
        #e5d9d8;

    border-radius:7px;

    outline:0;

    color:#5f5055;

    background:#fff;

    font:
        500
        6.5px/1
        "Be Vietnam Pro",
        Arial,
        sans-serif;

    cursor:pointer;
}


/* =========================================================
   PRODUCT GRID
========================================================= */

.tlb-moon-product-grid{
    margin-top:12px;

    display:grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0,1fr)
        );

    gap:11px;
}


/* =========================================================
   PRODUCT CARD
========================================================= */

.tlb-moon-product-card{
    min-width:0;

    overflow:hidden;

    border:
        1px
        solid
        #eee5e3;

    border-radius:11px;

    background:#fff;

    box-shadow:
        0
        2px
        8px
        rgba(54,27,34,.025);

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}


.tlb-moon-product-card:hover{
    transform:
        translateY(-4px);

    border-color:#e9c8c7;

    box-shadow:
        0
        11px
        26px
        rgba(69,26,37,.08);
}


/* =========================================================
   PRODUCT IMAGE
========================================================= */

.tlb-moon-product-image{
    position:relative;

    width:100%;
    aspect-ratio:1 / 1;

    display:flex;

    align-items:center;
    justify-content:center;

    overflow:hidden;

    color:inherit;

    background:
        linear-gradient(
            145deg,
            #fff,
            #fffaf7
        );

    text-decoration:none;
}


.tlb-moon-product-image::after{
    content:"";

    position:absolute;

    left:12px;
    right:12px;
    bottom:0;

    height:1px;

    background:#f3ecea;
}


.tlb-moon-product-image img{
    width:100%;
    height:100%;

    padding:10px;

    display:block;

    object-fit:contain;

    transition:
        transform .25s ease;
}


.tlb-moon-product-card:hover
.tlb-moon-product-image img{
    transform:
        scale(1.045);
}


/* =========================================================
   IMAGE EMPTY
========================================================= */

.tlb-moon-product-image.is-empty::before,
.tlb-moon-image-placeholder{
    content:"☾";

    display:grid;

    width:65px;
    height:65px;

    place-items:center;

    border-radius:50%;

    color:#d6b0a5;

    background:#fff1ec;

    font-family:
        Georgia,
        serif;

    font-size:27px;
}


/* =========================================================
   STOCK BADGE
========================================================= */

.tlb-moon-product-stock{
    position:absolute;

    z-index:4;

    top:8px;
    left:8px;

    min-height:19px;

    padding:
        0
        7px;

    display:inline-flex;

    align-items:center;

    gap:4px;

    border:
        1px
        solid
        #d9eee1;

    border-radius:999px;

    color:#19764a;

    background:
        rgba(241,251,245,.94);

    font-size:5.5px;

    font-weight:600;
}


.tlb-moon-product-stock i{
    width:5px;
    height:5px;

    display:block;

    border-radius:50%;

    background:#35a468;
}


.tlb-moon-product-stock--out{
    border-color:#eadadd;

    color:#a47a85;

    background:
        rgba(249,244,245,.94);
}


.tlb-moon-product-stock--out i{
    background:#c59ba6;
}


/* =========================================================
   QUICK VIEW
========================================================= */

.tlb-moon-product-view{
    position:absolute;

    z-index:5;

    left:50%;
    bottom:12px;

    min-height:27px;

    padding:
        0
        11px;

    display:flex;

    align-items:center;

    border-radius:999px;

    color:#fff;

    background:
        rgba(126,18,43,.92);

    font-size:5.5px;

    font-weight:600;

    opacity:0;

    transform:
        translate(-50%,8px);

    transition:
        opacity .18s ease,
        transform .18s ease;
}


.tlb-moon-product-card:hover
.tlb-moon-product-view{
    opacity:1;

    transform:
        translate(-50%,0);
}


/* =========================================================
   PRODUCT BODY
========================================================= */

.tlb-moon-product-body{
    padding:
        10px
        11px
        11px;
}


.tlb-moon-product-category{
    display:block;

    color:#a29196;

    font-size:5.3px;
}


.tlb-moon-product-name{
    display:-webkit-box;

    min-height:35px;

    margin-top:4px;

    overflow:hidden;

    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;

    color:#413338;

    font-size:7.7px;
    line-height:1.45;

    font-weight:600;

    text-decoration:none;
}


.tlb-moon-product-name:hover{
    color:var(--moon-red);
}


.tlb-moon-product-sku{
    display:block;

    min-height:10px;

    margin-top:3px;

    overflow:hidden;

    color:#a8989d;

    font-size:5px;

    text-overflow:ellipsis;

    white-space:nowrap;
}


/* =========================================================
   PRODUCT FOOTER
========================================================= */

.tlb-moon-product-footer{
    min-height:31px;

    margin-top:7px;

    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:8px;
}


.tlb-moon-product-price{
    color:var(--moon-red);

    font-size:10px;

    font-weight:700;

    white-space:nowrap;
}


.tlb-moon-product-arrow{
    width:27px;
    height:27px;

    display:grid;

    place-items:center;

    flex:0 0 27px;

    border:
        1px
        solid
        #ecd9d8;

    border-radius:50%;

    color:var(--moon-red);

    background:#fff;

    font-size:8px;

    text-decoration:none;

    transition:
        color .18s ease,
        background .18s ease,
        border-color .18s ease;
}


.tlb-moon-product-arrow:hover{
    border-color:var(--moon-red);

    color:#fff;

    background:var(--moon-red);
}


/* =========================================================
   EMPTY
========================================================= */

.tlb-moon-empty{
    min-height:300px;

    margin-top:12px;

    padding:30px;

    display:flex;

    flex-direction:column;

    align-items:center;
    justify-content:center;

    border:
        1px
        dashed
        #e8d8d5;

    border-radius:13px;

    background:#fffbf8;

    text-align:center;
}


.tlb-moon-empty > span{
    display:grid;

    width:62px;
    height:62px;

    place-items:center;

    border-radius:50%;

    color:#b37076;

    background:#fff0eb;

    font-family:
        Georgia,
        serif;

    font-size:26px;
}


.tlb-moon-empty strong{
    margin-top:12px;

    color:#4b3c41;

    font-size:10px;
}


.tlb-moon-empty p{
    margin:
        5px
        0
        0;

    color:#95868a;

    font-size:6.5px;
}


.tlb-moon-empty a{
    min-height:32px;

    margin-top:12px;

    padding:
        0
        12px;

    display:flex;

    align-items:center;

    border-radius:6px;

    color:#fff;

    background:var(--moon-red);

    font-size:6px;

    font-weight:700;

    text-decoration:none;
}


/* =========================================================
   PAGINATION
========================================================= */

.tlb-moon-pagination{
    margin-top:22px;

    display:flex;

    align-items:center;
    justify-content:center;

    gap:5px;
}


.tlb-moon-pagination a,
.tlb-moon-pagination span{
    min-width:33px;
    height:33px;

    padding:
        0
        7px;

    display:grid;

    place-items:center;

    border:
        1px
        solid
        #ebdfdc;

    border-radius:7px;

    color:#6d5d62;

    background:#fff;

    font-size:6.5px;

    text-decoration:none;
}


.tlb-moon-pagination a:hover,
.tlb-moon-pagination a.active{
    border-color:var(--moon-red);

    color:#fff;

    background:var(--moon-red);
}


.tlb-moon-pagination__arrow{
    font-size:9px!important;
}


/* =========================================================
   GUIDE
========================================================= */

.tlb-moon-guide{
    margin-top:34px;

    padding:
        24px;

    display:grid;

    grid-template-columns:
        .78fr
        1.5fr;

    gap:28px;

    overflow:hidden;

    border-radius:16px;

    background:
        linear-gradient(
            125deg,
            #7a1229,
            #9f1835
        );

    color:#fff;
}


/* =========================================================
   GUIDE INTRO
========================================================= */

.tlb-moon-guide__intro{
    padding:
        6px
        5px;
}


.tlb-moon-guide__intro
.tlb-moon-section-kicker{
    color:#ffd789;
}


.tlb-moon-guide__intro h2{
    max-width:300px;

    margin:0;

    color:#fff;

    font-family:
        Georgia,
        serif;

    font-size:24px;
    line-height:1.18;
}


.tlb-moon-guide__intro p{
    max-width:330px;

    margin:
        10px
        0
        0;

    color:
        rgba(255,255,255,.72);

    font-size:7px;
    line-height:1.7;
}


.tlb-moon-guide__intro a{
    min-height:33px;

    margin-top:13px;

    padding:
        0
        11px;

    display:inline-flex;

    align-items:center;

    border-radius:6px;

    color:#761126;

    background:#f7d276;

    font-size:6.3px;

    font-weight:700;

    text-decoration:none;
}


/* =========================================================
   GUIDE STEPS
========================================================= */

.tlb-moon-guide__steps{
    display:grid;

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

    gap:8px;
}


.tlb-moon-guide__steps article{
    min-height:100px;

    padding:
        13px;

    display:grid;

    grid-template-columns:
        34px
        minmax(0,1fr);

    align-items:start;

    gap:10px;

    border:
        1px
        solid
        rgba(255,255,255,.12);

    border-radius:10px;

    background:
        rgba(255,255,255,.06);
}


.tlb-moon-guide__steps article > span{
    width:34px;
    height:34px;

    display:grid;

    place-items:center;

    border-radius:9px;

    color:#7d142b;

    background:#f5ce76;

    font-size:7px;

    font-weight:700;
}


.tlb-moon-guide__steps strong{
    display:block;

    color:#fff;

    font-size:7.5px;
}


.tlb-moon-guide__steps p{
    margin:
        5px
        0
        0;

    color:
        rgba(255,255,255,.65);

    font-size:6px;
    line-height:1.55;
}


/* =========================================================
   FINAL CTA
========================================================= */

.tlb-moon-final-cta{
    min-height:150px;

    margin-top:16px;

    padding:
        25px
        28px;

    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:30px;

    overflow:hidden;

    border:
        1px
        solid
        #eddcd8;

    border-radius:15px;

    background:
        radial-gradient(
            circle at 92% 50%,
            rgba(245,196,101,.23),
            transparent 23%
        ),
        linear-gradient(
            120deg,
            #fffaf5,
            #fff1ec
        );
}


.tlb-moon-final-cta > div:first-child{
    max-width:650px;
}


.tlb-moon-final-cta > div:first-child > span{
    color:var(--moon-red);

    font-size:6.5px;

    font-weight:700;

    letter-spacing:.7px;
}


.tlb-moon-final-cta h2{
    margin:
        4px
        0
        0;

    color:#3e3034;

    font-size:20px;
}


.tlb-moon-final-cta p{
    max-width:620px;

    margin:
        7px
        0
        0;

    color:#817176;

    font-size:7px;
    line-height:1.65;
}


.tlb-moon-final-cta__actions{
    flex:0 0 auto;

    display:flex;

    align-items:center;

    gap:8px;
}


.tlb-moon-final-cta__primary,
.tlb-moon-final-cta__secondary{
    min-height:38px;

    padding:
        0
        13px;

    display:flex;

    align-items:center;

    border-radius:7px;

    font-size:6.5px;

    font-weight:700;

    text-decoration:none;
}


.tlb-moon-final-cta__primary{
    color:#fff;

    background:var(--moon-red);
}


.tlb-moon-final-cta__secondary{
    border:
        1px
        solid
        #ddc9c6;

    color:#59494e;

    background:#fff;
}


/* =========================================================
   FAQ
========================================================= */

.tlb-moon-faq{
    margin-top:30px;
}


.tlb-moon-faq__list{
    margin-top:12px;

    display:grid;

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

    gap:9px;
}


.tlb-moon-faq details{
    overflow:hidden;

    border:
        1px
        solid
        #eee3e0;

    border-radius:10px;

    background:#fff;
}


.tlb-moon-faq summary{
    min-height:54px;

    padding:
        0
        13px;

    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:10px;

    color:#493a3f;

    cursor:pointer;

    list-style:none;

    font-size:7px;

    font-weight:600;
}


.tlb-moon-faq summary::-webkit-details-marker{
    display:none;
}


.tlb-moon-faq summary b{
    color:var(--moon-red);

    font-size:13px;

    font-weight:400;

    transition:
        transform .18s ease;
}


.tlb-moon-faq details[open]
summary b{
    transform:
        rotate(45deg);
}


.tlb-moon-faq details > div{
    padding:
        0
        13px
        13px;

    color:#837479;

    font-size:6.5px;
    line-height:1.65;
}


/* =========================================================
   <= 1150
========================================================= */

@media(max-width:1150px){

    .tlb-moon-hero{
        grid-template-columns:
            1fr
            430px;
    }


    .tlb-moon-hero__content{
        padding-left:38px;
    }


    .tlb-moon-hero h1{
        font-size:45px;
    }


    .tlb-moon-product-grid{
        grid-template-columns:
            repeat(
                4,
                minmax(0,1fr)
            );
    }


    .tlb-moon-discovery-grid{
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }

}


/* =========================================================
   <= 900
========================================================= */

@media(max-width:900px){

    .tlb-moon-hero{
        grid-template-columns:1fr;

        min-height:500px;
    }


    .tlb-moon-hero__content{
        max-width:680px;

        padding:
            40px
            36px
            250px;
    }


    .tlb-moon-hero__visual{
        position:absolute;

        inset:0;

        min-height:100%;
    }


    .tlb-moon-hero__moon{
        top:auto;
        right:50px;
        bottom:-70px;

        width:260px;
        height:260px;

        transform:none;

        opacity:.65;
    }


    .tlb-moon-hero-product--1{
        right:220px;
        top:auto;
        bottom:48px;
    }


    .tlb-moon-hero-product--2{
        right:62px;
        bottom:37px;
    }


    .tlb-moon-hero-product--3{
        right:365px;
        bottom:30px;
    }


    .tlb-moon-hero-product--4{
        display:none;
    }


    .tlb-moon-trust{
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

        padding:
            8px
            12px;
    }


    .tlb-moon-trust > div{
        min-height:58px;
    }


    .tlb-moon-trust > div:nth-child(2)::after{
        display:none;
    }


    .tlb-moon-products__top{
        grid-template-columns:1fr;
    }


    .tlb-moon-product-grid{
        grid-template-columns:
            repeat(
                3,
                minmax(0,1fr)
            );
    }


    .tlb-moon-guide{
        grid-template-columns:1fr;
    }


    .tlb-moon-final-cta{
        align-items:flex-start;

        flex-direction:column;
    }


    .tlb-moon-faq__list{
        grid-template-columns:1fr;
    }

}


/* =========================================================
   <= 650
========================================================= */

@media(max-width:650px){

    .tlb-moon-page{
        padding:
            0
            12px
            40px;
    }


    .tlb-moon-breadcrumb{
        min-height:38px;
    }


    .tlb-moon-hero{
        min-height:510px;

        border-radius:15px;
    }


    .tlb-moon-hero__content{
        padding:
            31px
            20px
            230px;
    }


    .tlb-moon-hero h1{
        max-width:400px;

        font-size:36px;

        letter-spacing:-.7px;
    }


    .tlb-moon-hero__content > p{
        max-width:390px;

        font-size:8px;
    }


    .tlb-moon-hero__stats > div{
        min-width:auto;

        padding:
            0
            10px;
    }


    .tlb-moon-hero__stats strong{
        font-size:12px;
    }


    .tlb-moon-hero__moon{
        right:-20px;
        bottom:-55px;

        width:230px;
        height:230px;
    }


    .tlb-moon-hero-product--1{
        left:28px;
        right:auto;
        bottom:42px;

        width:120px;
        height:120px;
    }


    .tlb-moon-hero-product--2{
        right:40px;
        bottom:40px;

        width:112px;
        height:112px;
    }


    .tlb-moon-hero-product--3{
        left:145px;
        right:auto;
        bottom:23px;

        width:86px;
        height:86px;
    }


    .tlb-moon-trust{
        grid-template-columns:1fr 1fr;
    }


    .tlb-moon-trust > div{
        padding-inline:9px;
    }


    .tlb-moon-trust > div:nth-child(2n)::after{
        display:none;
    }


    .tlb-moon-discovery-grid{
        grid-template-columns:1fr;
    }


    .tlb-moon-discovery-card{
        min-height:110px;
    }


    .tlb-moon-section-heading{
        align-items:flex-start;

        flex-direction:column;
    }


    .tlb-moon-products__top{
        gap:13px;
    }


    .tlb-moon-toolbar{
        align-items:flex-start;

        flex-direction:column;
    }


    .tlb-moon-sort{
        width:100%;

        justify-content:space-between;
    }


    .tlb-moon-sort select{
        flex:1 1 auto;
    }


    .tlb-moon-product-grid{
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

        gap:8px;
    }


    .tlb-moon-product-body{
        padding:
            8px;
    }


    .tlb-moon-product-name{
        font-size:7px;
    }


    .tlb-moon-product-price{
        font-size:9px;
    }


    .tlb-moon-guide{
        padding:19px;
    }


    .tlb-moon-guide__steps{
        grid-template-columns:1fr;
    }


    .tlb-moon-final-cta{
        padding:
            21px
            18px;
    }


    .tlb-moon-final-cta__actions{
        width:100%;

        align-items:stretch;

        flex-direction:column;
    }


    .tlb-moon-final-cta__primary,
    .tlb-moon-final-cta__secondary{
        justify-content:center;
    }

}


/* =========================================================
   <= 420
========================================================= */

@media(max-width:420px){

    .tlb-moon-hero h1{
        font-size:32px;
    }


    .tlb-moon-hero__stats{
        gap:0;
    }


    .tlb-moon-hero__stats > div{
        padding-inline:8px;
    }


    .tlb-moon-product-grid{
        gap:7px;
    }


    .tlb-moon-product-image img{
        padding:7px;
    }


    .tlb-moon-product-stock{
        top:5px;
        left:5px;

        padding-inline:5px;

        font-size:5px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

    .tlb-moon-page *,
    .tlb-moon-page *::before,
    .tlb-moon-page *::after{
        transition:none!important;
        animation:none!important;
    }

}