/* ===================================
   LOTUS CUPCAKES - PRODUCT PAGE
=================================== */

.product-page{
    width:100%;
    max-width:1280px;
    margin:0 auto;
    padding:40px 28px 90px;
}

.product-breadcrumb{
    display:flex;
    align-items:center;
    gap:10px;

    margin-bottom:28px;

    font-family:'Poppins',sans-serif;
    font-size:13px;
    color:#777;
}

.product-breadcrumb a{
    color:#777;
}

.product-breadcrumb a:hover{
    color:#b57a93;
}

.product-layout{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(430px,.95fr);
    gap:64px;
    align-items:start;
}


/* ===================================
   PRODUCT GALLERY
=================================== */

.product-gallery{
    position:sticky;
    top:115px;
    min-width:0;
}

.product-image-stage{
    position:relative;

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

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

    overflow:hidden;

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

    border:1px solid rgba(181,122,147,.13);
    border-radius:26px;

    box-shadow:0 20px 55px rgba(70,40,52,.10);
}

/* MAIN PRODUCT IMAGE */

#product-image{
    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

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

.product-image-stage:hover #product-image{
    transform:scale(1.012);
}

.product-image-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:5;

    width:48px;
    height:48px;

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

    padding:0;

    background:rgba(255,255,255,.95);
    color:#b57a93;

    border:1px solid rgba(181,122,147,.18);
    border-radius:50%;

    box-shadow:0 8px 24px rgba(0,0,0,.12);

    font-size:22px;
}

.product-image-arrow:hover{
    background:#b57a93;
    color:#fff;
    transform:translateY(-50%);
}

.product-image-arrow-left{
    left:16px;
}

.product-image-arrow-right{
    right:16px;
}

.product-image-position{
    position:absolute;
    right:16px;
    bottom:16px;

    padding:7px 11px;

    background:rgba(255,255,255,.92);
    color:#6d5260;

    border-radius:999px;

    font-family:'Poppins',sans-serif;
    font-size:12px;
    font-weight:600;

    box-shadow:0 4px 14px rgba(0,0,0,.08);
}

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

    margin-top:14px;
}

.product-thumbnail{
    width:100%;
    aspect-ratio:1 / 1;

    padding:0;

    overflow:hidden;

    background:#fff;

    border:2px solid transparent;
    border-radius:14px;
}

.product-thumbnail:hover{
    transform:none;
    border-color:rgba(181,122,147,.45);
}

.product-thumbnail.active{
    border-color:#b57a93;
}

.product-thumbnail img{
    width:100%;
    height:100%;

    object-fit:cover;
}


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

.product-purchase-card{
    width:100%;
    padding:38px;

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

    border:1px solid rgba(181,122,147,.11);
    border-radius:26px;

    box-shadow:0 20px 55px rgba(70,40,52,.10);

    backdrop-filter:blur(10px);
}

.product-heading-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:24px;
}

.product-eyebrow{
    margin:0 0 8px;

    font-family:'Poppins',sans-serif;
    font-size:12px;
    font-weight:700;
    letter-spacing:.12em;
    text-transform:uppercase;

    color:#b57a93;
}

.product-heading-row h1{
    margin:0;

    font-size:44px;
    line-height:1.08;
}

.product-price{
    flex-shrink:0;

    margin:4px 0 0;

    font-family:'Poppins',sans-serif;
    font-size:25px;
    font-weight:700;

    color:#b57a93;
}

.product-rating-row{
    display:flex;
    align-items:center;
    gap:10px;

    margin-top:17px;

    font-family:'Poppins',sans-serif;
    font-size:13px;

    color:#777;
}

.product-rating-row span:first-child{
    color:#d696ad;
    letter-spacing:2px;
}

.product-description{
    margin:22px 0 0;

    font-family:'Poppins',sans-serif;
    font-size:15px;
    line-height:1.75;

    color:#555;
}

.product-highlights{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px 18px;

    margin:24px 0 0;
    padding:0;

    list-style:none;
}

.product-highlights li{
    position:relative;
    padding-left:20px;

    font-family:'Poppins',sans-serif;
    font-size:13px;
    line-height:1.5;

    color:#555;
}

.product-highlights li::before{
    content:"✓";

    position:absolute;
    left:0;
    top:0;

    color:#b57a93;
    font-weight:700;
}

.product-divider{
    width:100%;
    height:1px;

    margin:28px 0;

    background:rgba(181,122,147,.17);
}


/* ===================================
   OPTIONS
=================================== */

.product-option-group{
    margin-bottom:24px;
}

.product-option-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;

    margin-bottom:9px;
}

.product-option-heading label,
.upload-label,
.quantity-control > label{
    font-family:'Poppins',sans-serif;
    font-size:14px;
    font-weight:600;

    color:#333;
}

.product-option-heading span,
.upload-label span{
    font-family:'Poppins',sans-serif;
    font-size:12px;
    font-weight:400;

    color:#888;
}


/* ===================================
   DROPDOWNS
=================================== */

.custom-dropdown{
    position:relative;
}

.dropdown-toggle{
    width:100%;
    min-height:52px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;

    padding:13px 15px;

    background:#fff;
    color:#333;

    border:1px solid #dedede;
    border-radius:12px;

    font-family:'Poppins',sans-serif;
    font-size:14px;
    font-weight:400;
    text-align:left;
}

.dropdown-toggle span{
    font-family:'Poppins',sans-serif;
    font-size:14px;
    font-weight:400;
    color:#333;
}

.dropdown-toggle:hover,
.dropdown-toggle:focus{
    background:#fff;
    color:#333;

    border-color:#b57a93;

    box-shadow:0 0 0 3px rgba(181,122,147,.11);

    transform:none;
    outline:none;
}

.dropdown-menu{
    display:none;

    position:absolute;
    top:calc(100% + 7px);
    left:0;
    z-index:50;

    width:100%;
    max-height:285px;

    overflow-y:auto;

    padding:8px;

    background:#fff;

    border:1px solid #dedede;
    border-radius:12px;

    box-shadow:0 16px 35px rgba(0,0,0,.14);
}

.custom-dropdown.open .dropdown-menu{
    display:block;
}

.dropdown-option{
    display:flex;
    align-items:center;
    gap:10px;

    padding:10px;

    border-radius:8px;

    font-family:'Poppins',sans-serif;
    font-size:14px;
    font-weight:400;

    line-height:1.4;

    color:#333;

    cursor:pointer;
}

.dropdown-option span{
    font-family:'Poppins',sans-serif;
    font-size:14px;
    font-weight:400;
    line-height:1.4;
    color:#333;
}

.dropdown-option:hover{
    background:#faf1f5;
}

.dropdown-option input{
    width:17px;
    height:17px;

    margin:0;

    flex-shrink:0;

    accent-color:#b57a93;
}

.selection-summary{
    min-height:19px;
    margin:7px 0 0;

    font-family:'Poppins',sans-serif;
    font-size:12px;
    line-height:1.5;

    color:#777;
}

#extra-details{
    width:100%;
    min-height:135px;

    padding:14px 15px;

    resize:vertical;

    background:#fff;

    border:1px solid #dedede;
    border-radius:12px;

    font-family:'Poppins',sans-serif;
    font-size:14px;
    line-height:1.6;
}

#extra-details:focus{
    border-color:#b57a93;
    box-shadow:0 0 0 3px rgba(181,122,147,.11);
    outline:none;
}

.upload-label{
    display:flex;
    justify-content:space-between;
    gap:15px;

    margin-bottom:9px;
}

.image-upload-panel{
    padding:17px;

    background:#fff;

    border:1px dashed #cfa6b7;
    border-radius:12px;
}

.image-upload-panel input[type="file"]{
    width:100%;

    font-family:'Poppins',sans-serif;
    font-size:13px;
}

.image-preview-wrap{
    display:none;
    margin-top:15px;
}

.image-preview{
    width:100%;
    max-height:260px;

    object-fit:contain;

    background:#fafafa;

    border:1px solid #eee;
    border-radius:10px;
}

.remove-image-button{
    margin-top:10px;
    padding:9px 14px;

    background:#eee;
    color:#444;

    border-radius:9px;

    font-size:12px;
}

.remove-image-button:hover{
    background:#e5e5e5;
    color:#444;
    transform:none;
}

.field-help{
    margin:7px 0 0;

    font-family:'Poppins',sans-serif;
    font-size:12px;

    color:#888;
}


/* ===================================
   QUANTITY AND ADD TO BASKET
=================================== */

.purchase-row{
    display:grid;
    grid-template-columns:145px 1fr;
    gap:14px;
    align-items:end;
}

.quantity-control > label{
    display:block;
    margin-bottom:9px;
}

.quantity-stepper{
    display:grid;
    grid-template-columns:42px 1fr 42px;

    height:54px;

    overflow:hidden;

    background:#fff;

    border:1px solid #dedede;
    border-radius:12px;
}

.quantity-stepper button{
    width:42px;
    height:52px;

    padding:0;

    background:#fff;
    color:#b57a93;

    border-radius:0;

    font-size:20px;
}

.quantity-stepper button:hover{
    background:#faf1f5;
    color:#b57a93;
    transform:none;
}

.quantity-stepper input{
    width:100%;

    border:0;
    border-left:1px solid #eee;
    border-right:1px solid #eee;

    font-family:'Poppins',sans-serif;
    font-size:15px;
    text-align:center;

    appearance:textfield;
}

.quantity-stepper input::-webkit-outer-spin-button,
.quantity-stepper input::-webkit-inner-spin-button{
    margin:0;
    appearance:none;
}

.add-to-basket-button{
    min-height:54px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    padding:14px 20px;

    background:#b57a93;
    color:#fff;

    border-radius:12px;

    font-family:'Poppins',sans-serif;
    font-size:15px;
    font-weight:700;
}

.add-to-basket-button:hover{
    background:#9d667d;
}

.product-message{
    min-height:22px;

    margin-top:13px;

    font-family:'Poppins',sans-serif;
    font-size:13px;
    font-weight:600;
    text-align:center;
}

.product-message.success{
    color:#41834f;
}

.product-message.error{
    color:#b84141;
}

.product-trust-row{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;

    margin-top:24px;
    padding-top:22px;

    border-top:1px solid rgba(181,122,147,.14);
}

.product-trust-row div{
    display:flex;
    align-items:flex-start;
    gap:7px;

    font-family:'Poppins',sans-serif;
    font-size:11px;
    line-height:1.45;

    color:#777;
}

.product-trust-row span{
    color:#b57a93;
    font-weight:700;
}


/* ===================================
   SUCCESS MESSAGE
=================================== */

#success{
    min-height:25px;

    margin-top:15px;

    text-align:center;

    color:#4f9b61;

    font-family:'Poppins',sans-serif;
    font-size:14px;
    font-weight:600;
}


/* ===================================
   ERROR POPUP
=================================== */

.product-message-popup{
    position:fixed;

    top:100px;
    left:50%;

    transform:
        translateX(-50%)
        translateY(-20px);

    width:min(90%,500px);

    padding:16px 22px;

    background:#fff;

    border:2px solid #c62828;
    border-radius:10px;

    box-shadow:
        0 8px 25px rgba(0,0,0,.18);

    color:#c62828;

    font-family:'Poppins',sans-serif;
    font-size:15px;
    font-weight:500;

    text-align:center;

    z-index:99999;

    opacity:0;
    visibility:hidden;

    transition:
        opacity .25s ease,
        transform .25s ease,
        visibility .25s ease;
}

.product-message-popup.show{
    opacity:1;
    visibility:visible;

    transform:
        translateX(-50%)
        translateY(0);
}


/* ===================================
   TABLET
=================================== */

@media(max-width:1020px){

    .product-layout{
        grid-template-columns:minmax(0,1fr) minmax(370px,450px);
        gap:38px;
    }

    .product-purchase-card{
        padding:30px;
    }

    .product-heading-row h1{
        font-size:38px;
    }

}


/* ===================================
   MOBILE
=================================== */

@media(max-width:800px){

    .product-page{
        padding:24px 14px 55px;
    }

    .product-breadcrumb{
        margin-bottom:18px;
    }

    .product-layout{
        display:flex;
        flex-direction:column;
        gap:24px;
    }

    .product-gallery{
        position:static;
        order:1;
        width:100%;
    }

    .product-purchase-card{
        order:2;
        width:100%;
        padding:25px 18px;
        border-radius:20px;
    }

    .product-heading-row{
        flex-direction:column;
        gap:8px;
    }

    .product-heading-row h1{
        font-size:34px;
    }

    .product-price{
        margin:0;
    }

    .product-highlights{
        grid-template-columns:1fr;
    }

    .purchase-row{
        grid-template-columns:120px 1fr;
    }

    .product-trust-row{
        grid-template-columns:1fr;
    }

}


/* ===================================
   SMALL PHONES
=================================== */

@media(max-width:480px){

    .product-page{
        padding:18px 10px 45px;
    }

    .product-purchase-card{
        padding:22px 15px;
    }

    .product-heading-row h1{
        font-size:30px;
    }

    .product-image-arrow{
        width:40px;
        height:40px;
        font-size:19px;
    }

    .product-image-arrow-left{
        left:8px;
    }

    .product-image-arrow-right{
        right:8px;
    }

    .product-thumbnails{
        gap:7px;
    }

    .purchase-row{
        grid-template-columns:1fr;
    }

}

/* ===================================
   CUSTOM PRODUCT PAGE - FOOTER FIX
=================================== */

html,
body {
    min-height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-header {
    flex-shrink: 0;
}

.premade-product-page {
    flex: 1;
}

footer {
    flex-shrink: 0;
}