/* =====================================================================
   Product detail page – new layout (desktop)
   Left: image gallery (stays fixed while scrolling)
   Right: product info (scrolls)
   Loaded after the page's own inline CSS, so !important is used to
   override the old width/float rules.
   ===================================================================== */

/* ---------- Shared bits (all screen sizes) ---------- */

/* "(Inclusive of GST)" next to the price */
.pdp-gst-note {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 6px;
    background: var(--cp-rose-50, #FFF3F8);
    color: #6b6b6b;
    font-size: 12px;
    font-weight: 500;
    vertical-align: middle;
}

/* short description under the price */
.pdp-short-desc {
    margin: 10px 0 14px;
    color: #6b6b6b;
    font-size: 14.5px;
    line-height: 1.6;
    text-align: left;
    clear: both; /* sits below the floated price row */
}

/* "4 - 6 People" under the weight chips */
.pdp-serves {
    clear: both;
    min-height: 18px;
    margin: 4px 0 0;
    color: #333;
    font-size: 13px;
    text-align: left;
}

/* section titles: "Select Weight", "Cake Message" ... */
.pdp-section-head,
.pdp-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 18px 0 4px;
    color: #222;
    font-size: 16px;
    font-weight: 600;
}

.pdp-section-head a {
    color: var(--cp-pink-dark, #C91E39);
    font-size: 13px;
    font-weight: 500;
    text-decoration: underline;
}

/* ---------- Weight chips + cake message (all screen sizes) ---------- */
/* weight chips */
.product-detail-container .pdp-input__div {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 8px 0 4px !important;
    margin: 0 !important;
}

.product-detail-container .pdp-input__div label {
    margin: 0;
}

.product-detail-container .pdp-input__div [type=radio] + span {
    display: inline-block;
    width: auto !important;
    min-width: 64px;
    height: auto !important;
    margin: 0 !important;
    padding: 9px 16px !important;
    line-height: 1.2 !important;
    border: 1.5px solid #ddd !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #333 !important;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
}

.product-detail-container .pdp-input__div [type=radio]:checked + span {
    border-color: var(--cp-pink-dark, #C91E39) !important;
    background: #FFF1F3 !important;
    color: var(--cp-pink-dark, #C91E39) !important;
    font-weight: 600;
}

/* cake message + image upload: start below the floated weight/flavour columns */
.product-detail-container .cake-message-input,
.product-detail-container .order_image-input {
    clear: both;
}

.product-detail-container input#product_messages {
    display: block;
    box-sizing: border-box;
    width: 100% !important; /* an old rule forces 45% */
    height: auto;
    margin-top: 6px;
    padding: 13px 14px !important;
    border: 1.5px solid #ddd !important;
    border-radius: 10px !important;
    font-size: 14px;
}

/* ---------- Delivery date / type / time slot (all screen sizes) ----------
   Drawn by public/assets/website/js/product-delivery.js.
   Selectors start with .pdp-delivery so they beat Materialize's button:focus colour. */

.pdp-delivery {
    clear: both;
    margin: 20px 0 0;
    border: 1px solid #e3e3e3;
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
    text-align: left;
}

.pdp-delivery.has-error {
    border-color: var(--cp-pink-dark, #C91E39);
}

.pdp-delivery [hidden],
.pdp-deliver-on[hidden] {
    display: none !important;
}

/* peach title bar */
.pdp-delivery .pdp-delivery__head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 4px 12px;
    padding: 14px 18px;
    background: #FDEBDD;
    color: #222;
    font-size: 17px;
    font-weight: 600;
}

.pdp-delivery .pdp-delivery__head small {
    color: #8a6a55;
    font-size: 12px;
    font-weight: 500;
}

.pdp-delivery .pdp-req {
    margin-left: 2px;
    color: #e11d48;
}

.pdp-delivery .pdp-delivery__body {
    padding: 16px 18px 18px;
}

/* Today / Tomorrow / Schedule cards */
.pdp-delivery .pdp-dates {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.pdp-delivery .pdp-date {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 14px 8px 11px;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
    color: #222;
    font-family: inherit;
    line-height: 1.3;
    text-transform: none;
    cursor: pointer;
}

.pdp-delivery .pdp-date__label {
    font-size: 14px;
    font-weight: 600;
}

.pdp-delivery .pdp-date__sub {
    color: #777;
    font-size: 12px;
}

.pdp-delivery .pdp-date.is-active {
    border-color: transparent;
    background: linear-gradient(90deg, var(--cp-pink, #ED217C), var(--cp-pink-dark, #C91E39));
    color: #fff;
}

.pdp-delivery .pdp-date.is-active .pdp-date__sub {
    color: rgba(255, 255, 255, .85);
}

.pdp-delivery .pdp-date__tick {
    position: absolute;
    top: 6px;
    right: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    color: var(--cp-pink-dark, #C91E39);
    font-size: 11px;
    font-weight: 700;
}

.pdp-delivery .pdp-date.is-disabled {
    box-shadow: none;
    opacity: .5;
    cursor: not-allowed;
}

/* calendar that opens from the "Schedule" card */
.pdp-delivery .pdp-cal {
    margin-top: 14px;
    padding: 4px 6px 8px;
}

.pdp-delivery .pdp-cal__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 4px 0;
}

.pdp-delivery .pdp-cal__title {
    color: #222;
    font-size: 18px;
    font-weight: 700;
}

.pdp-delivery .pdp-cal__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #f3f3f3;
    color: #444;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.pdp-delivery .pdp-cal__close:hover {
    background: #FFE1E4;
    color: var(--cp-pink-dark, #C91E39);
}

.pdp-delivery .pdp-cal__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 14px 0 10px;
}

.pdp-delivery .pdp-cal__month {
    color: #222;
    font-size: 16px;
    font-weight: 600;
}

.pdp-delivery .pdp-cal__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0 0 3px;
    border: 1px solid #e5e5e5;
    border-radius: 50%;
    background: #fff;
    color: #222;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.pdp-delivery .pdp-cal__arrow:hover:not(:disabled) {
    border-color: var(--cp-pink-dark, #C91E39);
    color: var(--cp-pink-dark, #C91E39);
}

.pdp-delivery .pdp-cal__arrow:disabled {
    opacity: .3;
    cursor: not-allowed;
}

.pdp-delivery .pdp-cal__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    row-gap: 6px;
    text-align: center;
}

.pdp-delivery .pdp-cal__dow {
    padding-bottom: 6px;
    color: #8a8a8a;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .6px;
}

.pdp-delivery .pdp-cal__day {
    position: relative;
    width: 40px;
    height: 40px;
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #222;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s;
}

.pdp-delivery .pdp-cal__day:hover:not(:disabled):not(.is-selected) {
    background: #FFE1E4;
}

/* today: small dot under the number */
.pdp-delivery .pdp-cal__day.is-today::after {
    content: "";
    position: absolute;
    bottom: 5px;
    left: 50%;
    width: 4px;
    height: 4px;
    margin-left: -2px;
    border-radius: 50%;
    background: var(--cp-pink-dark, #C91E39);
}

.pdp-delivery .pdp-cal__day.is-selected {
    background: linear-gradient(135deg, var(--cp-pink, #ED217C), var(--cp-pink-dark, #C91E39));
    box-shadow: 0 3px 8px rgba(201, 30, 57, .35);
    color: #fff;
    font-weight: 700;
}

.pdp-delivery .pdp-cal__day.is-selected::after {
    background: #fff;
}

/* past days, closed dates, days with no slots left */
.pdp-delivery .pdp-cal__day:disabled {
    color: #c4c4c4;
    text-decoration: line-through;
    text-decoration-color: #e0e0e0;
    cursor: not-allowed;
}

/* delivery types */
.pdp-delivery .pdp-types {
    margin-top: 14px;
}

.pdp-delivery .pdp-type {
    padding: 13px 0;
    border-top: 1px solid #eee;
}

.pdp-delivery .pdp-type:first-child {
    border-top: 0;
}

.pdp-delivery .pdp-type__head {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #222;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    text-align: left;
    text-transform: none;
    cursor: pointer;
}

.pdp-delivery .pdp-radio {
    position: relative;
    flex: 0 0 22px;
    box-sizing: border-box;
    width: 22px;
    height: 22px;
    border: 2px solid var(--cp-pink-dark, #C91E39);
    border-radius: 50%;
}

.pdp-delivery .pdp-type.is-selected .pdp-radio::after {
    content: "";
    position: absolute;
    top: 3px;
    right: 3px;
    bottom: 3px;
    left: 3px;
    border-radius: 50%;
    background: var(--cp-pink-dark, #C91E39);
}

.pdp-delivery .pdp-type__icon {
    display: flex;
    flex: 0 0 22px;
    color: var(--cp-pink-dark, #C91E39);
}

.pdp-delivery .pdp-type__price {
    color: var(--cp-pink-dark, #C91E39);
    font-weight: 700;
}

.pdp-delivery .pdp-type__price.is-free {
    color: #1a9a3e;
}

.pdp-delivery .pdp-type__none {
    margin-left: auto;
    color: #999;
    font-size: 12px;
}

.pdp-delivery .pdp-type.is-disabled .pdp-type__head {
    opacity: .55;
    cursor: not-allowed;
}

.pdp-delivery .pdp-type__desc {
    margin: 8px 0 12px 34px;
    color: #666;
    font-size: 12.5px;
}

/* time slot chips */
.pdp-delivery .pdp-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.pdp-delivery .pdp-type__desc + .pdp-slots {
    margin-top: 0;
}

.pdp-delivery .pdp-slot {
    min-width: 118px;
    margin: 0;
    padding: 10px 16px;
    border: 1.5px solid var(--cp-pink-dark, #C91E39);
    border-radius: 10px;
    background: #fff;
    color: #222;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    text-transform: none;
    cursor: pointer;
}

.pdp-delivery .pdp-slot.is-active {
    background: #FFE1E4;
}

.pdp-delivery button:focus {
    outline: none;
}

.pdp-delivery .pdp-delivery__note {
    margin-top: 12px;
    padding: 9px 12px;
    border-radius: 8px;
    background: #FFF4E5;
    color: #8a4b00;
    font-size: 13px;
}

/* "Need help customizing? CONNECT NOW" (WhatsApp) */
.pdp-help {
    display: flex;
    align-items: center;
    gap: 12px;
    clear: both;
    margin: 16px 0 0;
    padding: 12px 14px;
    border: 1px solid #F6E2A8;
    border-radius: 14px;
    background: linear-gradient(90deg, #FFF3D1, #FFFAEC);
    color: #2A1E19;
    font-size: 15px;
    font-weight: 500;
    text-align: left;
}

/* WhatsApp logo in a white circle */
.pdp-help__icon {
    display: flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}

.pdp-help__text {
    flex: 1 1 auto;
}

/* CONNECT NOW as a small button on the right */
.pdp-help a {
    flex: 0 0 auto;
    padding: 8px 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--cp-pink, #ED217C), var(--cp-pink-dark, #C91E39));
    box-shadow: 0 3px 8px rgba(201, 30, 57, .28);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .4px;
    text-decoration: none;
    white-space: nowrap;
}

.pdp-help a:hover {
    box-shadow: 0 5px 12px rgba(201, 30, 57, .4);
}

/* "Delivering On: 7th Nov, 5 PM – 7 PM" above the buttons */
.pdp-deliver-on {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 0;
    padding: 9px 16px 9px 12px;
    border: 1px solid #F8D3DB;
    border-radius: 12px;
    background: var(--cp-rose-50, #FFF3F8);
    color: #2A1E19;
    font-size: 14px;
    text-align: left;
}

.pdp-deliver-on[hidden] {
    display: none !important;
}

.pdp-deliver-on__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
    color: var(--cp-pink-dark, #C91E39);
}

.pdp-deliver-on strong {
    color: var(--cp-pink-dark, #C91E39);
    font-weight: 700;
}

@media (max-width: 600px) {
    .pdp-delivery .pdp-delivery__body {
        padding: 14px;
    }

    .pdp-delivery .pdp-dates {
        gap: 8px;
    }

    .pdp-delivery .pdp-cal__day {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    .pdp-help {
        flex-wrap: wrap;
        font-size: 14px;
    }

    .pdp-help__text {
        flex: 1 1 calc(100% - 60px);
    }

    .pdp-help a {
        margin-left: 50px;
    }

    .pdp-delivery .pdp-slot {
        flex: 1 1 calc(50% - 10px);
        min-width: 0;
        padding: 10px 6px;
    }
}

/* ---------- Desktop two-column layout ---------- */
@media (min-width: 901px) {

    .product-detail-container {
        max-width: 1320px;
        margin-left: auto;
        margin-right: auto;

        /* Size of the big cake image: follows the screen height (so image + trust strip always fit
           under the fixed header on small laptops; the strip adds about 16% of the image height)
           but stays between 300px and 520px.
           The left column, trust strip and thumbnails all use this same value,
           so there is no empty gap between the image and the right side. */
        --pdp-img: clamp(300px, calc((100vh - 250px) / 1.16), 520px);
    }

    /* the white card holding both columns: flex so the left column can stick */
    .product-detail-container .product-canvas .clearfix {
        display: flex !important;
        align-items: flex-start;
        gap: clamp(28px, 4vw, 56px);
        float: none !important;
        padding: 28px 36px 36px !important;
        border-radius: 16px;
    }

    .product-detail-container .product-canvas .clearfix::before,
    .product-detail-container .product-canvas .clearfix::after {
        display: none; /* old clearfix pseudo-elements would become flex items */
    }

    /* LEFT column: stays in place while the right column scrolls.
       top = fixed header height (about 203px) + a little space */
    .product-detail-container .image-part {
        flex: 0 0 calc(var(--pdp-img) + 86px); /* image + thumbnails (72px) + gap (14px) */
        width: calc(var(--pdp-img) + 86px) !important;
        float: none !important;
        position: sticky !important;
        top: 220px !important;
        align-self: flex-start;
    }

    /* thumbnails on the left, big image on the right */
    .product-detail-container .zoom-gallery {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        text-align: left;
    }

    .product-detail-container .zoom-gallery .myDIV {
        flex: 0 0 72px;
        width: 72px !important;
        padding: 0 !important;
        float: none;
        max-height: var(--pdp-img); /* thumbnails never taller than the image */
        overflow-y: auto;
        scrollbar-width: none;
    }

    .product-detail-container .zoom-gallery .myDIV::-webkit-scrollbar {
        display: none;
    }

    .product-detail-container .zoom-gallery .myDIV > div,
    .product-detail-container .zoom-gallery .selectors {
        text-align: left;
    }

    .product-detail-container .zoom-gallery .selectors a {
        display: block !important;
        width: 72px !important;
        margin: 0 0 10px !important;
    }

    .product-detail-container .zoom-gallery .selectors img.thumbnail {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border: 2px solid #eee !important;
        border-radius: 10px;
        transition: border-color .2s;
    }

    .product-detail-container .zoom-gallery .selectors a:hover img.thumbnail,
    .product-detail-container .zoom-gallery .selectors a.active img.thumbnail {
        border-color: var(--cp-pink-dark, #C91E39) !important;
    }

    .product-detail-container .product-image-part {
        flex: 1;
        min-width: 0;
        width: auto !important;
        padding: 0 !important;
        float: none;
    }

    /* big square image; shrinks on short screens so it always fits under the header */
    .product-detail-container .product-image-div {
        width: var(--pdp-img) !important;
        height: auto !important;
        aspect-ratio: 1 / 1;
        border-radius: 14px;
        overflow: hidden;
        box-shadow: none !important;
    }

    .product-detail-container .zoom-gallery-slide {
        margin-bottom: 12px !important;
    }

    /* badge flush with the image's bottom-left corner */
    .product-detail-container .product-image-div .product-detail-tag-desktop {
        top: auto;
        left: 0;
        bottom: 0;
        padding: 4px 10px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .3px;
        line-height: 1.3;
        border-radius: 8px 8px 0 0;
    }

    /* eggless badge on the image, a bit larger than on the cards */
    .product-detail-container .product-image-div .cp-eggless-badge {
        top: 12px;
        left: 12px;
        width: 22px;
        height: 22px;
    }

    .product-detail-container .product-image-div .cp-eggless-dot {
        width: 10px;
        height: 10px;
    }

    /* trust strip (On-time delivery / Fresh / FSSAI) under the image:
       same width as the big cake image, height follows from the picture's own shape */
    .product-detail-container .product-image-part > .pdp-trust {
        width: var(--pdp-img);
        margin: 8px 0 0;
    }

    .product-detail-container .product-image-part > .pdp-trust > .col {
        padding: 0 !important;
    }

    .product-detail-container .product-image-part > .pdp-trust picture,
    .product-detail-container .product-image-part > .pdp-trust img {
        display: block;
        width: 100% !important;
        height: auto !important;
        border-radius: 10px;
    }

    /* RIGHT column: scrolls normally */
    .product-detail-container .product-description-part {
        flex: 1 1 0;
        min-width: 0;
        width: auto !important;
        padding: 0 !important;
        float: none;
    }

    .product-detail-container .product-description-part .eggStatusContainer {
        margin-bottom: 4px;
    }

    .product-detail-container .product-description-part h1 {
        display: block !important;
        margin: 4px 0 8px !important;
        font-size: 26px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        color: var(--cp-ink, #2A1E19) !important;
    }

    /* price row */
    .product-detail-container .pdPriceWrapper {
        margin: 0 !important;
        padding: 0 !important;
    }

    .product-detail-container .pdPriceWrapper > .row {
        margin: 0 0 6px !important;
    }

    .product-detail-container .pdPriceWrapper .col-6 {
        padding-left: 0 !important;
    }

    .product-detail-container #productPrice,
    .product-detail-container .pdPriceWrapper .moneySymbol {
        font-size: 30px !important;
        font-weight: 700 !important;
        vertical-align: baseline !important;
    }

    /* flavour dropdown */
    .product-detail-container .Weight .col.s6.l6 {
        width: 100% !important;
        padding: 0 !important;
    }

    .product-detail-container .Weight .col.s6.l6 > div > label {
        display: block;
        margin-bottom: 6px;
        color: #222;
        font-size: 16px;
        font-weight: 600;
    }

    .product-detail-container #cakeFlavourAtt {
        width: 100% !important;
        height: 46px !important;
        padding: 0 12px !important;
        border: 1.5px solid #ddd !important;
        border-radius: 10px !important;
        background: #fff;
        font-size: 15px;
    }

    /* Add to cart + Buy now: two equal buttons side by side */
    .product-detail-container .addTCart.adtoCart {
        display: flex !important;
        gap: 12px;
        width: 100% !important;
        margin: 18px 0 6px !important;
        padding: 0 !important;
        float: none;
    }

    .product-detail-container #add {
        margin: 0 !important;
    }

    .product-detail-container #addToCartButton,
    .product-detail-container #BuyNowButton {
        flex: 1;
        box-sizing: border-box;
        min-width: 0;
        padding: 0 12px !important;
        width: auto !important;
        height: 52px !important;
        line-height: 48px !important;
        border-radius: 12px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        text-transform: none;
        box-shadow: none;
    }

    .product-detail-container #addToCartButton {
        background: #fff !important;
        border: 2px solid var(--cp-pink-dark, #C91E39);
        color: var(--cp-pink-dark, #C91E39) !important;
    }

    .product-detail-container #BuyNowButton {
        border: 2px solid transparent;
        background: linear-gradient(90deg, var(--cp-pink, #ED217C), var(--cp-pink-dark, #C91E39)) !important;
    }

    /* product description as a soft card */
    .product-detail-container #productDescriptionHeading {
        margin-top: 22px;
        padding: 20px 24px 8px !important;
        border-radius: 16px;
        background: var(--cp-rose-50, #FFF3F8) !important;
    }

    .product-detail-container #productDescriptionHeading h3 {
        font-size: 19px !important;
        margin: 0 0 10px;
    }

    .product-detail-container #productDescriptionHeading .row,
    .product-detail-container #productDescriptionHeading .col {
        margin: 0;
        padding: 0;
    }

    .product-detail-container #productDescriptionHeading .contentScroller {
        margin-top: 0 !important;
        padding-right: 0 !important;
        color: #555;
        line-height: 1.7;
    }
}