/* PRODUCT DETAIL PAGE */

.product-page{
    background:#F7FAF0;
    color:#1A4D33;
}

.product-navbar{
    background:#F7FAF0;
    border-bottom:1px solid rgba(26,77,51,.13);
    box-shadow:none;
}

.product-navbar,
.product-navbar.scrolled{
    padding:22px 60px;
}

.product-navbar .logo,
.product-navbar .nav-links a,
.product-navbar .nav-products-toggle{
    color:#1A4D33;
}

.product-navbar .buy-btn{
    color:#1A4D33;
    border-color:#1A4D33;
}

.product-navbar .buy-btn:hover,
.product-order-btn:hover,
.product-order-submit:hover{
    background:#D97824;
    border-color:#D97824;
    color:white;
}

.product-navbar.products-open{
    background:#1A4D33;
}

.product-navbar.products-open .logo,
.product-navbar.products-open .nav-links a,
.product-navbar.products-open .nav-products-toggle{
    color:white;
}

.product-navbar.products-open .buy-btn{
    color:white;
    border-color:white;
}

.product-detail{
    min-height:100vh;
    padding:132px 40px 56px;
    background:#F7FAF0;
}

.product-back-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin:0 0 20px;
    font-family:Verdana, Geneva, sans-serif;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:1.5px;
    text-decoration:none;
    text-transform:uppercase;
    color:#1A4D33;
}

.product-back-link::before{
    content:"←";
    font-size:1.15rem;
}

.product-detail-grid{
    display:grid;
    grid-template-columns:minmax(340px, 1fr) minmax(420px, 1.35fr);
    gap:48px;
    align-items:stretch;
    max-width:1840px;
    margin:0 auto;
}

.product-detail-intro{ grid-column:1; }

.product-detail-copy{
    grid-column:1;
    align-self:center;
    max-width:620px;
    padding:12px 0 22px;
}

.product-meta-row{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:16px;
    font-family:Verdana, Geneva, sans-serif;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:1.4px;
    text-transform:uppercase;
}

.product-meta-row > span:first-child{
    padding:7px 12px;
    border-radius:999px;
    background:#1A4D33;
    color:white;
}

.product-rating{
    color:#D97824;
    letter-spacing:2px;
}

.product-rating small{
    color:#1A4D33;
    letter-spacing:0;
    font-size:.7rem;
}

.product-detail-intro h1{
    max-width:620px;
    font-family:Verdana, Geneva, sans-serif;
    font-size:clamp(3.5rem, 5.9vw, 7.5rem);
    line-height:.87;
    font-weight:700;
    letter-spacing:-.08em;
    text-transform:uppercase;
    color:#1A4D33;
}

.product-benefits-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:46px;
    margin-top:22px;
    padding:12px 20px;
    border:1px solid #1A4D33;
    border-radius:999px;
    color:#1A4D33;
    font:700 .72rem Verdana, Geneva, sans-serif;
    letter-spacing:1px;
    text-decoration:none;
    text-transform:uppercase;
    transition:background .25s ease, color .25s ease, transform .25s ease;
}

.product-benefits-link:hover{
    background:#1A4D33;
    color:white;
    transform:translateY(-2px);
}

.product-purchase-options{
    display:grid;
    gap:18px;
    margin-top:27px;
}

.product-option-label{
    display:block;
    margin-bottom:9px;
    font-family:Verdana, Geneva, sans-serif;
    font-size:.7rem;
    font-weight:700;
    letter-spacing:1.4px;
    text-transform:uppercase;
}

.product-size-pill,
.product-flavour-display,
.product-flavour-select,
.product-quantity,
.product-delivery-select{
    min-height:53px;
    border:1px solid rgba(26,77,51,.3);
    border-radius:999px;
    background:rgba(255,255,255,.72);
    color:#1A4D33;
    font-family:Verdana, Geneva, sans-serif;
}

.product-size-pill{
    padding:0 20px;
    font-size:.9rem;
    font-weight:700;
}

.product-flavour-and-quantity{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 126px;
    gap:12px;
}

.product-extra-flavours{
    display:grid;
    gap:10px;
    margin-top:10px;
}

.product-extra-flavour-row{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 126px 34px;
    gap:10px;
    align-items:center;
}

.product-extra-flavour-row .product-flavour-select,
.product-extra-flavour-row .product-quantity{
    min-height:48px;
}

.product-remove-flavour{
    width:32px;
    height:32px;
    border:0;
    border-radius:50%;
    background:transparent;
    color:#1A4D33;
    font-size:1.4rem;
    cursor:pointer;
}

.product-add-flavour{
    width:100%;
    min-height:48px;
    margin-top:12px;
    border:1px solid rgba(26,77,51,.3);
    border-radius:999px;
    background:rgba(255,255,255,.72);
    color:#1A4D33;
    font:700 .76rem Verdana, Geneva, sans-serif;
    letter-spacing:.7px;
    text-transform:uppercase;
    cursor:pointer;
}

.product-add-flavour:hover{
    background:#1A4D33;
    color:white;
}

.product-add-flavour:disabled{
    opacity:.45;
    cursor:not-allowed;
}

.product-flavour-display{
    display:flex;
    align-items:center;
    gap:11px;
    padding:0 18px;
    font-size:.9rem;
    font-weight:700;
}

.product-flavour-select{
    width:100%;
    padding:0 18px;
    font-size:.9rem;
    font-weight:700;
    cursor:pointer;
}

.product-flavour-display::after{
    content:"⌄";
    margin-left:auto;
    font-size:1.2rem;
}

.product-flavour-dot{
    width:12px;
    height:12px;
    flex:0 0 auto;
    border-radius:50%;
    background:#8EA85C;
}

.product-quantity{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 13px;
}

.product-quantity button{
    width:26px;
    border:0;
    background:transparent;
    color:#1A4D33;
    font-size:1.25rem;
    cursor:pointer;
}

.product-quantity input{
    width:34px;
    border:0;
    outline:0;
    background:transparent;
    color:#1A4D33;
    font-family:Verdana, Geneva, sans-serif;
    font-size:1rem;
    font-weight:700;
    text-align:center;
}

.product-frequency-options{
    display:grid;
    gap:9px;
}

.product-frequency-option{
    position:relative;
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:13px;
    min-height:61px;
    padding:10px 17px;
    border:1px solid rgba(26,77,51,.22);
    border-radius:18px;
    background:rgba(255,255,255,.66);
    cursor:pointer;
}

.product-frequency-option input{
    position:absolute;
    opacity:0;
}

.product-radio{
    width:20px;
    height:20px;
    border:2px solid #1A4D33;
    border-radius:50%;
}

.product-frequency-option input:checked + .product-radio{
    border:6px solid #D97824;
}

.product-frequency-option strong,
.product-frequency-option small,
.product-frequency-option b{
    font-family:Verdana, Geneva, sans-serif;
}

.product-frequency-option strong{
    display:block;
    font-size:.94rem;
}

.product-frequency-option small{
    display:block;
    margin-top:3px;
    font-size:.63rem;
}

.product-frequency-option b{
    font-size:.83rem;
}

.product-frequency-option del{
    margin-right:6px;
    color:rgba(26,77,51,.55);
    font-size:.72rem;
}

.product-delivery-select{
    width:100%;
    padding:0 18px;
    font-size:.86rem;
    font-weight:700;
}

.product-delivery-note{
    margin-top:7px;
    font-family:Verdana, Geneva, sans-serif;
    font-size:.68rem;
    font-weight:700;
}

.product-order-btn{
    width:100%;
    min-height:58px;
    margin-top:23px;
    padding:16px 24px;
    border:1px solid #1A4D33;
    border-radius:999px;
    background:#1A4D33;
    color:white;
    font-family:Verdana, Geneva, sans-serif;
    font-size:.78rem;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    cursor:pointer;
    transition:.25s ease;
}

.product-order-form{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;
    margin-top:20px;
    padding:20px;
    border:1px solid rgba(26,77,51,.18);
    border-radius:18px;
    background:#EEF5E7;
}

.product-order-form[hidden]{ display:none; }
.order-field{ display:flex; flex-direction:column; gap:7px; }
.order-field-full{ grid-column:1 / -1; }

.order-field label{
    font-family:Verdana, Geneva, sans-serif;
    font-size:.68rem;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
}

.order-field input,
.order-field textarea{
    width:100%;
    border:1px solid rgba(26,77,51,.28);
    border-radius:10px;
    background:white;
    color:#1A4D33;
    font-family:Verdana, Geneva, sans-serif;
    font-size:.88rem;
    padding:12px;
}

.order-field input:focus,
.order-field textarea:focus{ outline:3px solid rgba(217,120,36,.25); }

.product-coupon{
    display:flex;
    gap:8px;
}

.product-coupon input{ flex:1; }

.product-coupon button{
    min-width:78px;
    border:1px solid #1A4D33;
    border-radius:10px;
    background:#1A4D33;
    color:#fff;
    font:700 .7rem Verdana, Geneva, sans-serif;
    letter-spacing:.7px;
    text-transform:uppercase;
    cursor:pointer;
}

.product-coupon-note{
    min-height:1.1em;
    margin:0;
    font:400 .78rem/1.4 Verdana, Geneva, sans-serif;
}

.product-order-submit{
    grid-column:1 / -1;
    width:100%;
    min-height:50px;
    border:1px solid #1A4D33;
    border-radius:999px;
    background:#1A4D33;
    color:white;
    font-family:Verdana, Geneva, sans-serif;
    font-size:.75rem;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    cursor:pointer;
}

.product-detail-image{
    grid-column:2;
    grid-row:1 / span 2;
    order:2;
    display:grid;
    place-items:center;
    justify-self:center;
    align-self:start;
    width:min(100%, 540px);
    min-height:clamp(330px, 38vw, 430px);
    overflow:hidden;
    position:relative;
}

.product-image-gallery{
    display:flex;
    width:100%;
    height:100%;
    overflow:visible;
    touch-action:pan-y;
    transition:transform .45s ease;
}

.product-gallery-card{
    width:100%;
    height:100%;
    flex:0 0 100%;
    display:grid;
    place-items:center;
    margin:0;
    overflow:hidden;
    border-radius:26px;
    background:#DCE8D1;
}

.product-image-gallery img{
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
    mix-blend-mode:multiply;
    /* Keep the bottle deliberately compact inside the product-stage panel. */
    transform:scale(1);
}

.product-gallery-next,
.product-gallery-previous{
    position:absolute;
    right:14px;
    top:50%;
    z-index:1;
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border:1px solid rgba(26,77,51,.22);
    border-radius:50%;
    background:rgba(255,255,255,.92);
    color:#1A4D33;
    font-size:1.5rem;
    cursor:pointer;
    transform:translateY(-50%);
    transition:background .2s ease, color .2s ease;
}

.product-gallery-next{ right:14px; }

.product-gallery-previous{ left:14px; }

.product-gallery-next:hover,
.product-gallery-previous:hover{
    background:#1A4D33;
    color:white;
}

.product-gallery-next[hidden],
.product-gallery-previous[hidden]{ display:none; }

.product-page .site-footer{ display:none; }

@media(max-width:900px){
    .product-navbar,
    .product-navbar.scrolled{ padding:18px 22px; }
    .product-detail{ padding:100px 22px 42px; }
    .product-detail-grid{ grid-template-columns:1fr; gap:28px; }
    .product-detail-intro,
    .product-detail-copy{ grid-column:1; }
    .product-detail-image{
        grid-column:1;
        grid-row:auto;
        order:0;
        width:min(100%, 480px);
        min-height:clamp(270px, 54vw, 350px);
    }
    .product-image-gallery img{ transform:scale(1); }
    .product-gallery-card{ border-radius:22px; }
    .product-detail-copy{ max-width:none; }
    .product-detail-intro h1{ font-size:clamp(3.2rem, 14vw, 5.5rem); }
}

@media(max-width:420px){
    .product-coupon{ flex-direction:column; }
    .product-coupon button{ min-height:42px; }
}

@media(max-width:540px){
    .product-navbar,
    .product-navbar.scrolled{ padding:14px 16px; }
    .product-detail{ padding:82px 16px 32px; }
    .product-back-link{
        margin-bottom:16px;
        font-size:.64rem;
        letter-spacing:1.1px;
    }
    .product-detail-grid{ gap:24px; }
    .product-meta-row{ align-items:flex-start; flex-direction:column; gap:9px; }
    .product-detail-intro h1{ font-size:clamp(2.75rem, 13vw, 4.1rem); }
    .product-flavour-and-quantity{ grid-template-columns:1fr 112px; }
    .product-extra-flavour-row{ grid-template-columns:minmax(0, 1fr) 112px 30px; gap:7px; }
    .product-frequency-option{ padding:10px 13px; }
    .product-detail-image{
        width:min(100%, 380px);
        min-height:clamp(220px, 58vw, 270px);
        border-radius:18px;
    }
    .product-image-gallery img{ transform:scale(1); }
    .product-gallery-card{ border-radius:18px; }
    .product-gallery-next,
    .product-gallery-previous{
        right:10px;
        width:42px;
        height:42px;
        font-size:1.3rem;
    }
    .product-gallery-previous{ left:10px; right:auto; }
    .product-size-pill,
    .product-flavour-display,
    .product-flavour-select,
    .product-quantity,
    .product-delivery-select{ min-height:50px; }
    .product-order-form{ grid-template-columns:1fr; padding:16px; }
}