:root{
    --cream:#f7f4ee;
    --paper:#fffefa;
    --blue:#214d88;
    --baby-blue:#cfeaff;
    --navy:#122f51;
    --text:#1e2a34;
    --muted:#6f7780;
    --line:#e5e2db;
    --danger:#b54d4d;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    font-family:'Poppins',sans-serif;
    color:var(--text);
    background:var(--paper);
}

img{
    max-width:100%;
}

button,
input,
textarea{
    font:inherit;
}

.eyebrow{
    margin:0 0 10px;
    color:var(--blue);
    font-size:12px;
    font-weight:700;
    letter-spacing:2px;
}

/* NAV */

.top-nav{
    position:sticky;
    top:0;
    z-index:100;
    background:rgba(255,254,250,.94);
    border-bottom:1px solid var(--line);
    backdrop-filter:blur(12px);
}

.nav-inner{
    min-height:72px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.brand{
    display:flex;
    align-items:center;
    gap:11px;
    color:var(--navy);
    font-weight:700;
    text-decoration:none;
    letter-spacing:.5px;
}

.brand img{
    width:42px;
    height:42px;
    object-fit:cover;
    border-radius:50%;
}

.nav-cart-link{
    display:flex;
    align-items:center;
    gap:9px;
    color:var(--navy);
    font-size:14px;
    font-weight:600;
    text-decoration:none;
}

.nav-cart-link span{
    min-width:27px;
    height:27px;
    padding:0 7px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    background:var(--navy);
    border-radius:999px;
    font-size:12px;
}

/* HERO */

.hero{
    padding:76px 0;
    background:
        radial-gradient(circle at 8% 20%, rgba(207,234,255,.8), transparent 25%),
        linear-gradient(135deg,#fffefa,#f4f0e8);
    border-bottom:1px solid var(--line);
}

.hero h1{
    margin:0;
    color:var(--navy);
    font-family:'DM Serif Display',serif;
    font-size:clamp(54px,8vw,92px);
    line-height:.95;
    letter-spacing:-2px;
}

.hero-description{
    max-width:520px;
    margin:26px 0 0;
    color:var(--muted);
    font-size:17px;
    line-height:1.8;
}

.hero-actions{
    margin-top:30px;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:18px;
}

.primary-link{
    padding:14px 24px;
    color:white;
    background:var(--navy);
    border-radius:999px;
    font-weight:600;
    text-decoration:none;
    transition:.2s;
}

.primary-link:hover{
    color:white;
    background:var(--blue);
    transform:translateY(-2px);
}

.po-status{
    color:var(--blue);
    font-size:13px;
    font-weight:600;
}

.hero-image-wrap{
    padding:4px;
    background:white;
    border:1px solid var(--line);
    border-radius:32px;
    box-shadow:0 24px 70px rgba(22,47,81,.10);
    transform:rotate(1.5deg);
}

.hero-image-wrap img{
    width:100%;
    display:block;
    border-radius:21px;
}

.hero-image-wrap{
    position:relative;
    overflow:hidden;
}

/* PRODUCT */

.product-section{
    padding:90px 0;
}

.gallery-panel{
    position:sticky;
    top:100px;
}

.main-image-frame{
    overflow:hidden;
    background:var(--cream);
    border:1px solid var(--line);
    border-radius:26px;
}

.main-image-frame img{
    width:100%;
    display:block;
    aspect-ratio:1/1;
    object-fit:contain;
    transition:opacity .2s ease;
}

.thumbnail-grid{
    margin-top:14px;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:10px;
}

.thumb-button{
    padding:0;
    overflow:hidden;
    background:var(--cream);
    border:2px solid transparent;
    border-radius:14px;
    transition:.2s;
}

.thumb-button:hover,
.thumb-button.active{
    border-color:var(--blue);
    transform:translateY(-2px);
}

.thumb-button img{
    width:100%;
    display:block;
    aspect-ratio:1/1;
    object-fit:cover;
}

.product-panel{
    padding:10px 0;
}

.product-panel h2{
    margin:0;
    color:var(--navy);
    font-family:'DM Serif Display',serif;
    font-size:clamp(42px,5vw,60px);
    line-height:1;
}

.product-price{
    margin:22px 0 0;
    color:var(--blue);
    font-size:28px;
    font-weight:700;
}

.product-copy{
    margin:18px 0 0;
    color:var(--muted);
    line-height:1.8;
}

.feature-list{
    margin:20px 0 0;
    padding-left:20px;
    color:var(--text);
    line-height:1.9;
    font-size:14px;
}

.divider{
    height:1px;
    margin:30px 0;
    background:var(--line);
}

.option-block{
    margin-bottom:27px;
}

.option-block h3{
    margin:0 0 12px;
    color:var(--navy);
    font-size:15px;
    font-weight:700;
}

.option-heading{
    margin-bottom:13px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
}

.option-heading h3{
    margin:0;
}

.option-heading span{
    color:var(--blue);
    font-size:13px;
    font-weight:600;
}

.colour-options,
.choice-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.colour-choice,
.text-choice{
    min-height:48px;
    padding:10px 16px;
    display:flex;
    align-items:center;
    gap:9px;
    color:var(--navy);
    background:white;
    border:1px solid var(--line);
    border-radius:12px;
    transition:.2s;
}

.colour-choice:hover,
.colour-choice.active,
.text-choice:hover,
.text-choice.active{
    background:#eef7fd;
    border-color:var(--blue);
}

.colour-swatch{
    width:18px;
    height:18px;
    border:1px solid rgba(0,0,0,.16);
    border-radius:50%;
}

.colour-swatch.white{
    background:#f8f5ef;
}

.colour-swatch.baby-blue{
    background:#bfe5f8;
}

.colour-swatch.navy{
    background:#193857;
}

.text-choice small{
    color:var(--muted);
    font-size:11px;
}

.asset-note{
    margin:9px 0 0;
    color:var(--muted);
    font-size:11px;
}

.size-options{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:9px;
}

.size-choice{
    min-height:54px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color:var(--navy);
    background:white;
    border:1px solid var(--line);
    border-radius:12px;
    font-weight:600;
    transition:.2s;
}

.size-choice small{
    color:var(--muted);
    font-size:10px;
    font-weight:400;
}

.size-choice:hover,
.size-choice.active{
    background:#eef7fd;
    border-color:var(--blue);
}

.quantity-control{
    width:145px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:12px;
}

.quantity-control button{
    width:46px;
    height:100%;
    background:var(--cream);
    border:0;
    color:var(--navy);
    font-size:21px;
}

.quantity-control button:hover{
    background:var(--baby-blue);
}

.quantity-control span{
    font-weight:700;
}

.price-summary{
    padding:20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    background:var(--cream);
    border:1px solid var(--line);
    border-radius:16px;
}

.price-summary span{
    display:block;
    color:var(--navy);
    font-weight:700;
}

.price-summary small{
    display:block;
    margin-top:4px;
    color:var(--muted);
    font-size:11px;
}

.price-summary strong{
    color:var(--blue);
    font-size:25px;
    white-space:nowrap;
}

.add-cart-button,
.checkout-button,
.submit-order-button{
    border:0;
    color:white;
    background:var(--navy);
    border-radius:12px;
    font-weight:600;
    transition:.2s;
}

.add-cart-button{
    width:100%;
    margin-top:14px;
    padding:16px 20px;
}

.add-cart-button:disabled,
.add-cart-button:disabled:hover{
    opacity:.55;
    cursor:not-allowed;
    background:var(--navy);
    transform:none;
}

.add-cart-button:hover,
.checkout-button:hover,
.submit-order-button:hover{
    background:var(--blue);
    transform:translateY(-1px);
}

.selection-warning{
    min-height:18px;
    margin:9px 0 0;
    color:var(--danger);
    font-size:12px;
    text-align:center;
}

/* CART */

.cart-section{
    padding:0 0 90px;
}

.cart-card{
    padding:34px;
    background:var(--cream);
    border:1px solid var(--line);
    border-radius:26px;
}

.cart-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:25px;
}

.cart-header h2{
    margin:0;
    color:var(--navy);
    font-family:'DM Serif Display',serif;
    font-size:42px;
}

.cart-header > span{
    padding:7px 13px;
    color:var(--blue);
    background:white;
    border-radius:999px;
    font-size:13px;
    font-weight:600;
}

.empty-cart{
    padding:28px;
    color:var(--muted);
    background:white;
    border:1px dashed #cfcac0;
    border-radius:15px;
    text-align:center;
}

.cart-item{
    padding:18px 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    border-bottom:1px solid var(--line);
}

.cart-item h3{
    margin:0 0 5px;
    color:var(--navy);
    font-size:16px;
}

.cart-item p{
    margin:0;
    color:var(--muted);
    font-size:13px;
}

.cart-item-price{
    text-align:right;
}

.cart-item-price strong{
    display:block;
    color:var(--blue);
}

.remove-item-button{
    margin-top:5px;
    padding:0;
    color:var(--danger);
    background:none;
    border:0;
    font-size:12px;
}

.cart-summary{
    margin-top:24px;
    padding-top:22px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    border-top:1px solid var(--line);
}

.cart-summary span{
    display:block;
    color:var(--muted);
    font-size:13px;
}

.cart-summary strong{
    color:var(--navy);
    font-size:27px;
}

.checkout-button{
    padding:14px 24px;
}

/* MODAL */

.checkout-modal,
.success-modal{
    overflow:hidden;
    border:0;
    border-radius:22px;
}

.modal-header,
.modal-footer{
    padding:22px 25px;
    border-color:var(--line);
}

.modal-body{
    padding:25px;
}

.modal-title{
    color:var(--navy);
    font-family:'DM Serif Display',serif;
    font-size:33px;
}

.form-label{
    color:var(--navy);
    font-size:14px;
    font-weight:600;
}

.form-control{
    padding:12px 14px;
    border-color:var(--line);
    border-radius:10px;
}

.form-control:focus{
    border-color:var(--blue);
    box-shadow:0 0 0 .2rem rgba(33,77,136,.12);
}

.optional-text{
    color:var(--muted);
    font-size:12px;
    font-weight:400;
}

.checkout-summary{
    margin-top:22px;
    padding:18px;
    background:var(--cream);
    border-radius:14px;
}

.checkout-summary span,
.checkout-summary small{
    color:var(--muted);
}

.checkout-summary strong{
    display:block;
    margin:4px 0;
    color:var(--navy);
    font-size:25px;
}

.submit-order-button{
    padding:11px 20px;
}

.success-modal{
    padding:18px;
}

.success-icon{
    width:64px;
    height:64px;
    margin:5px auto 20px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    background:var(--blue);
    border-radius:50%;
    font-size:29px;
}

.success-modal h2{
    color:var(--navy);
    font-family:'DM Serif Display',serif;
}

.success-modal p{
    margin:12px 0 23px;
    color:var(--muted);
}

.success-order-id{
    margin:0 auto 24px;
    padding:13px 17px;
    color:var(--navy);
    background:var(--cream);
    border:1px dashed var(--blue);
    border-radius:12px;
    font-size:17px;
    font-weight:700;
    letter-spacing:.6px;
}

/* FOOTER */

footer{
    padding:35px 0;
    border-top:1px solid var(--line);
}

.footer-inner{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    color:var(--muted);
    font-size:13px;
}

.footer-inner img{
    width:42px;
    height:42px;
    object-fit:cover;
    border-radius:50%;
}

.footer-inner p{
    margin:0;
}

/* RESPONSIVE */

.size-chart-link{
    margin-top:12px;
    padding:0;
    color:var(--blue);
    background:none;
    border:0;
    font-size:13px;
    font-weight:600;
    text-decoration:underline;
    cursor:pointer;
}

.size-chart-link:hover{
    color:var(--navy);
}

.merchandise-switcher{
    padding-top:70px;
    text-align:center;
}

.merch-tabs{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px;
    margin-top:15px;
}

.merch-tab{
    min-width:180px;
    min-height:58px;
    padding:15px 28px;
    color:var(--navy);
    background:white;
    border:1px solid var(--line);
    border-radius:999px;
    font-size:15px;
    font-weight:600;
    transition:.2s;
    cursor:pointer;
}

.merch-tab:hover,
.merch-tab.active{
    color:white;
    background:var(--navy);
    border-color:var(--navy);
}

.merch-tab:disabled{
    opacity:.45;
    cursor:not-allowed;
}

.merch-product{
    display:none;
}

.merch-product.active-product{
    display:block;
}
.order-id-copy-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-top:6px;
}

.order-id-copy-row h3{
    margin:0;
}

.copy-order-id-button{
    padding:7px 12px;
    color:var(--blue);
    background:white;
    border:1px solid var(--blue);
    border-radius:8px;
    font-size:12px;
    font-weight:600;
    cursor:pointer;
}

.copy-order-id-button:hover{
    color:white;
    background:var(--blue);
}

.contact-link{
    color:var(--blue);
    font-size:13px;
    font-weight:600;
    text-decoration:none;
    transition:.2s;
}

.contact-link:hover{
    color:var(--navy);
    text-decoration:underline;
}
.whatsapp-contact{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
}

.whatsapp-icon{
    width:21px;
    height:21px;
    flex-shrink:0;
}

.success-order-summary{
    margin-top:20px;
}

.success-order-item{
    padding:12px 0;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    border-bottom:1px solid var(--line);
    text-align:left;
}

.success-order-item > div{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.success-order-item strong{
    color:var(--navy);
}

.success-order-item small{
    display:block;
    color:var(--muted);
    font-size:12px;
    line-height:1.5;
}

.success-order-item > strong{
    white-space:nowrap;
    color:var(--blue);
}

.success-order-total{
    padding-top:14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
}

.success-order-total span{
    color:var(--muted);
    font-size:13px;
}

.success-order-total strong{
    color:var(--navy);
    font-size:18px;
}

.success-shipping-warning{
    margin:14px 0 18px !important;
    color:var(--danger) !important;
    font-size:13px;
}

.success-shipping-note{
    margin:18px 12px !important;
    font-size:13px;
    line-height:1.7;
    text-align:left;
}

@media (max-width:991px){
    .gallery-panel{
        position:static;
    }

    .hero{
        padding:55px 0;
    }

    .hero-image-wrap{
        transform:none;
    }
}

#heroCarousel .carousel-item{
    height:520px;
}

#heroCarousel .carousel-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
}

#heroCarousel .carousel-item:nth-child(2) img{
    object-position:center 35%;
}

@media (max-width:576px){

    .success-modal h2{
    font-size:30px;
    line-height:1.15;
}

.success-order-item{
    gap:10px;
}

.success-order-item > strong{
    font-size:13px;
}

.success-order-total{
    align-items:flex-end;
}

.success-order-total strong{
    font-size:17px;
}

    .nav-inner{
        min-height:62px;
    }

    .brand span{
        font-size:14px;
    }

    .brand img{
        width:36px;
        height:36px;
    }

    .hero{
        padding:45px 0;
    }

    .hero h1{
        font-size:53px;
    }

    .product-section{
        padding:55px 0;
    }

    .thumbnail-grid{
        grid-template-columns:repeat(5,1fr);
        gap:7px;
    }

    .product-panel h2{
        font-size:43px;
    }

    .size-options{
        gap:7px;
    }

    .price-summary{
        align-items:flex-start;
        flex-direction:column;
        gap:10px;
    }

    .cart-card{
        padding:20px;
    }

    .cart-item,
    .cart-summary{
        align-items:flex-start;
        flex-direction:column;
    }

    .cart-item-price{
        text-align:left;
    }

    .checkout-button{
        width:100%;
    }

    .footer-inner{
        padding:0 20px;
        text-align:center;
    }
}