@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800;900&family=Great+Vibes&family=DM+Sans:wght@400;500;600;700;800&display=swap');

/* =========================================================
   INSANE LABAN — BEVERAGES
   -> css/beverages.css

   Same design system as home.css and product.css: navy
   canvas, gold accents, Playfair display, DM Sans body.

   WHY A SEPARATE FILE AND A SEPARATE LAYOUT

   product.css is built around a dessert: a tall media column
   with thumbnails, a topping list, a sauce stepper. A drink
   has none of those. Reusing that stylesheet would mean a
   page of rules switched off, and every future change to the
   dessert page would risk breaking the drinks page.

   The page is also genuinely different. A bottle is one
   photograph and three facts, so it is laid out as a single
   centred card rather than a two-column product spread. The
   dessert page has to carry a decision; this one just has to
   get out of the way of a button.
========================================================= */

:root{
    --navy-900:#04102a;
    --navy-800:#071a3a;
    --navy-700:#0d2a55;
    --ivory:#f6f3ee;
    --gold:#d9a441;
    --gold-soft:#e8bd68;
    --violet:#6b3df5;
    --violet-hi:#7f57ff;

    --line:rgba(255,255,255,.12);
    --surface:rgba(255,255,255,.05);
    --surface-hi:rgba(255,255,255,.08);
    --text-mute:rgba(255,255,255,.7);
    --text-dim:rgba(255,255,255,.5);

    --display:"Playfair Display",Georgia,serif;
    --script:"Great Vibes",cursive;
    --sans:"DM Sans",Arial,sans-serif;
}


*,*::before,*::after{box-sizing:border-box}

body{
    margin:0;
    min-height:100vh;
    background:var(--navy-900);
    color:#fff;
    font-family:var(--sans);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}

:focus-visible{
    outline:3px solid var(--gold-soft);
    outline-offset:3px;
    border-radius:6px;
}


/* =========================================================
   PAGE SHELL
   Matches the sidebar offset used by product.css.
========================================================= */

.beverage-page{
    width:calc(100% - 165px);
    margin-left:145px;
    margin-right:20px;
    padding-top:28px;
    padding-bottom:80px;
    min-height:100vh;
}


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

.beverage-breadcrumb{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:26px;
    color:var(--text-dim);
    font-size:13px;
}

.beverage-breadcrumb a{
    color:var(--text-mute);
    text-decoration:none;
    transition:color .2s ease;
}

.beverage-breadcrumb a:hover{color:var(--gold-soft)}

.beverage-breadcrumb strong{
    color:#fff;
    font-weight:600;
}


/* =========================================================
   LISTING
========================================================= */

.beverage-listing-head{
    margin-bottom:30px;
}

.beverage-eyebrow{
    display:block;
    margin-bottom:10px;
    color:var(--gold);
    font-size:10px;
    font-weight:700;
    letter-spacing:3.5px;
    text-transform:uppercase;
}

.beverage-listing-head h1{
    margin:0;
    font-family:var(--display);
    font-size:clamp(36px,4vw,54px);
    font-weight:800;
    line-height:1.05;
    letter-spacing:-1px;
}

.beverage-listing-head p{
    max-width:46ch;
    margin:14px 0 0;
    color:var(--text-mute);
    font-size:14px;
    line-height:1.65;
}


.beverage-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
    gap:20px;
}

.beverage-card{
    display:flex;
    flex-direction:column;
    border:1px solid var(--line);
    border-radius:18px;
    background:var(--surface);
    overflow:hidden;
    text-decoration:none;
    color:inherit;
    transition:transform .25s ease,
               border-color .25s ease,
               box-shadow .25s ease;
}

.beverage-card:hover{
    transform:translateY(-4px);
    border-color:rgba(232,189,104,.35);
    box-shadow:0 20px 40px rgba(3,16,40,.5);
}


/*
| contain, not cover. A bottle is tall and narrow - cover
| keeps the middle strip and throws away the cap and the
| base, which is how a Voss bottle ends up reading as a blue
| rectangle.
*/

.beverage-card-media{
    position:relative;
    height:230px;
    padding:16px;
    background:var(--navy-700);
    display:flex;
    align-items:center;
    justify-content:center;
}

.beverage-card-media img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
}

.beverage-card-media .beverage-no-image{
    color:var(--text-dim);
    font-size:34px;
}

.beverage-card.is-out .beverage-card-media img{
    filter:grayscale(1);
    opacity:.5;
}


.beverage-card-body{
    flex:1 1 auto;
    padding:16px 18px 18px;
}

.beverage-card-body h2{
    margin:0 0 6px;
    font-family:var(--sans);
    font-size:17px;
    font-weight:800;
    line-height:1.2;
}

.beverage-card-body p{
    margin:0;
    color:var(--text-dim);
    font-size:12px;
    line-height:1.5;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.beverage-card-price{
    display:block;
    margin-top:12px;
    color:var(--gold-soft);
    font-size:19px;
    font-weight:800;
}


.beverage-card-flag{
    position:absolute;
    top:12px;
    left:12px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 11px;
    border:1px solid rgba(255,143,138,.35);
    border-radius:20px;
    background:rgba(4,16,42,.85);
    backdrop-filter:blur(4px);
    color:#ff8f8a;
    font-size:10.5px;
    font-weight:800;
    letter-spacing:.5px;
    text-transform:uppercase;
}


/* =========================================================
   SINGLE DRINK
========================================================= */

.beverage-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:50px;
    align-items:start;
    max-width:1080px;
}


/* MEDIA */

.beverage-media{
    position:relative;
    height:580px;
    padding:36px;
    border:1px solid var(--line);
    border-radius:24px;
    background:linear-gradient(160deg,#0b2148,#061229);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 20px 46px rgba(3,16,40,.45);
}

.beverage-media img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    filter:drop-shadow(0 18px 34px rgba(0,0,0,.45));
}

.beverage-media .beverage-no-image{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    color:var(--text-dim);
    font-size:14px;
}

.beverage-media .beverage-no-image i{font-size:52px}

.beverage-media.is-out img{
    filter:grayscale(1);
    opacity:.45;
}


/* INFORMATION */

.beverage-info{
    min-width:0;
    padding-top:6px;
}

.beverage-brand{
    display:block;
    margin-bottom:10px;
    color:var(--gold);
    font-size:10px;
    font-weight:700;
    letter-spacing:3.5px;
    text-transform:uppercase;
}

.beverage-info h1{
    margin:0;
    font-family:var(--display);
    font-size:clamp(38px,4vw,58px);
    font-weight:800;
    line-height:1.05;
    letter-spacing:-1px;
}

.beverage-price{
    margin-top:15px;
    color:var(--gold-soft);
    font-family:var(--display);
    font-size:34px;
    font-weight:800;
}

.beverage-description{
    padding:24px 0;
    color:var(--text-mute);
    font-size:14px;
    line-height:1.7;
    border-bottom:1px solid var(--line);
}

.beverage-badges{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    padding:22px 0;
}

.beverage-badge{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:9px 14px;
    border:1px solid rgba(232,189,104,.35);
    border-radius:999px;
    background:rgba(232,189,104,.08);
    color:var(--gold-soft);
    font-size:11.5px;
    font-weight:600;
}


/* ALLERGENS */

.beverage-allergens{
    margin-top:4px;
    padding:18px;
    border:1px solid rgba(232,189,104,.28);
    border-radius:14px;
    background:rgba(232,189,104,.06);
}

.beverage-allergens h3{
    margin:0 0 8px;
    color:var(--gold-soft);
    font-size:11px;
    font-weight:800;
    letter-spacing:1.6px;
    text-transform:uppercase;
}

.beverage-allergens p{
    margin:0;
    color:var(--text-mute);
    font-size:13px;
    line-height:1.6;
}


/* OUT OF STOCK BANNER */

.beverage-outage-banner{
    display:flex;
    align-items:flex-start;
    gap:13px;
    margin-bottom:20px;
    padding:15px 18px;
    border:1px solid rgba(255,143,138,.32);
    border-radius:14px;
    background:rgba(255,143,138,.1);
}

.beverage-outage-banner i{
    flex-shrink:0;
    margin-top:2px;
    color:#ff8f8a;
    font-size:17px;
}

.beverage-outage-banner strong{
    display:block;
    margin-bottom:3px;
    font-size:15px;
}

.beverage-outage-banner span{
    display:block;
    color:var(--text-mute);
    font-size:13px;
    line-height:1.6;
}


/* =========================================================
   PURCHASE
========================================================= */

.beverage-purchase{
    margin-top:26px;
}

.beverage-purchase-row{
    display:grid;
    grid-template-columns:150px minmax(0,1fr);
    gap:14px;
}

.beverage-quantity{
    height:60px;
    display:grid;
    grid-template-columns:42px 1fr 42px;
    align-items:center;
    border:1px solid var(--line);
    border-radius:15px;
    background:var(--surface);
}

.beverage-quantity button{
    width:42px;
    height:42px;
    margin:auto;
    border:none;
    border-radius:50%;
    background:var(--violet);
    color:#fff;
    font-size:20px;
    font-weight:700;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:background .2s ease,transform .2s ease;
}

.beverage-quantity button:hover:not(:disabled){
    background:var(--violet-hi);
    transform:scale(1.06);
}

.beverage-quantity button:disabled{
    opacity:.4;
    cursor:not-allowed;
}

.beverage-quantity span{
    text-align:center;
    font-size:16px;
    font-weight:700;
}


.beverage-add-button{
    width:100%;
    height:60px;
    border:none;
    border-radius:15px;
    background:linear-gradient(135deg,var(--violet),#5b30dc);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    font-family:var(--sans);
    font-size:15px;
    font-weight:700;
    letter-spacing:.5px;
    cursor:pointer;
    box-shadow:0 14px 30px -12px rgba(84,48,210,.95);
    transition:background .2s ease,transform .2s ease,box-shadow .2s ease;
}

.beverage-add-button:hover:not(:disabled){
    background:var(--violet-hi);
    transform:translateY(-2px);
}

.beverage-add-button.added{
    background:#128a45;
    box-shadow:none;
}

.beverage-add-button.is-unavailable,
.beverage-add-button:disabled{
    cursor:not-allowed;
    opacity:.5;
    background:#4a4d52;
    box-shadow:none;
    transform:none;
}


.beverage-go-to-cart{
    width:100%;
    min-height:52px;
    display:none;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-top:12px;
    padding:15px 20px;
    border:2px solid var(--violet);
    border-radius:14px;
    background:transparent;
    color:#fff;
    text-decoration:none;
    font-size:.95rem;
    font-weight:700;
    letter-spacing:.4px;
    transition:.2s ease;
}

.beverage-go-to-cart:hover{
    background:var(--violet);
}


/*
| The drinks-only minimum, stated on the page rather than
| sprung at checkout. A customer who finds out about a
| minimum spend after entering their address has been wasted,
| and they remember it.
*/

.beverage-minimum-note{
    display:flex;
    align-items:flex-start;
    gap:11px;
    margin-top:18px;
    padding:14px 16px;
    border:1px dashed rgba(232,189,104,.35);
    border-radius:13px;
    background:rgba(232,189,104,.05);
    color:var(--text-mute);
    font-size:12.5px;
    line-height:1.6;
}

.beverage-minimum-note i{
    flex-shrink:0;
    margin-top:2px;
    color:var(--gold-soft);
    font-size:14px;
}


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

.beverage-empty{
    padding:60px 24px;
    border:1px solid var(--line);
    border-radius:18px;
    background:var(--surface);
    text-align:center;
}

.beverage-empty i{
    display:block;
    margin-bottom:14px;
    color:var(--text-dim);
    font-size:38px;
}

.beverage-empty h2{
    margin:0 0 6px;
    font-family:var(--display);
    font-size:26px;
    font-weight:800;
}

.beverage-empty p{
    margin:0;
    color:var(--text-dim);
    font-size:13px;
}


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

@media (max-width:1050px){

    .beverage-page{
        width:calc(100% - 40px);
        margin-left:130px;
        margin-right:20px;
    }

    .beverage-layout{
        grid-template-columns:1fr;
        gap:32px;
    }

    .beverage-media{height:430px}
}


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

@media (max-width:700px){

    /* clears the fixed top bar */
    .beverage-page{
        width:calc(100% - 30px);
        margin-left:15px;
        margin-right:15px;
        padding-top:78px;
    }

    .beverage-media{
        height:330px;
        padding:22px;
        border-radius:18px;
    }

    .beverage-info h1{font-size:36px}

    .beverage-price{font-size:28px}

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

    .beverage-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
    }

    .beverage-card-media{height:160px}
}


@media (max-width:420px){

    .beverage-grid{grid-template-columns:1fr}

    .beverage-card-media{height:200px}
}


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

@media (prefers-reduced-motion:reduce){
    *{animation:none !important;transition:none !important}
}


/* =========================================================
   HOMEPAGE DRINKS BAND
   =========================================================
   |
   | Used only by index.php, which loads this stylesheet when
   | there are drinks to show.
   |
   | It sits under the dessert carousel and borrows .shell,
   | .section-head, .section-title and .view-all-btn from
   | home.css, so the heading matches "Our Signatures" exactly
   | and there is one set of section furniture on the page
   | rather than two that drift apart.
   |
   | The tiles are deliberately NOT the dessert card: a dessert
   | is sold on a big photograph and a description, a bottle is
   | a name and a price. Making them the same size would give a
   | £1.20 water the same weight on the page as a £11.99
   | dessert.
   |
========================================================= */

.drinks-section{
    margin:46px 0 0;
}


/*
| A scrolling row on narrow screens, an even row on wide ones.
| auto-fit rather than a fixed four columns, because the band
| shows whatever is in stock - which can be one bottle.
*/

.drinks-strip{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:14px;
}


.drink-tile{
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:16px;
    background:var(--surface);
    color:#fff;
    transition:transform .22s ease,border-color .22s ease,background .22s ease;
}


.drink-tile:hover{
    transform:translateY(-4px);
    border-color:rgba(232,189,104,.5);
    background:var(--surface-hi);
}


/* =========================================================
   TILE IMAGE
   =========================================================
   |
   | contain, not cover.
   |
   | A bottle is tall and narrow against a plain background.
   | cover crops it to the tile's width and takes the cap or
   | the base off - the same reason the admin beverage cards
   | use contain.
   |
========================================================= */

.drink-tile-media{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    height:150px;
    padding:12px;
    background:var(--navy-700);
}


.drink-tile-media img{
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    object-fit:contain;
}


.drink-tile-noimage{
    font-size:30px;
    color:var(--text-dim);
}


.drink-tile-flag{
    position:absolute;
    top:10px;
    left:10px;
    z-index:2;
    padding:5px 11px;
    border-radius:30px;
    background:#17212b;
    color:#fff;
    font-size:10px;
    font-weight:700;
    letter-spacing:.4px;
    text-transform:uppercase;
}


.drink-tile.is-out .drink-tile-media img{
    filter:grayscale(100%);
    opacity:.5;
}


.drink-tile.is-out .drink-tile-body strong{
    color:var(--text-mute);
}


/* =========================================================
   TILE BODY
========================================================= */

.drink-tile-body{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:13px 14px;
}


.drink-tile-body strong{
    font-size:14px;
    font-weight:700;
    line-height:1.3;
}


.drink-tile-price{
    flex:none;
    color:var(--gold-soft);
    font-size:14px;
    font-weight:800;
    white-space:nowrap;
}


/* =========================================================
   NARROW SCREENS
   =========================================================
   |
   | Below the sidebar breakpoint the grid becomes a swipeable
   | row, so four drinks do not stack into four tall blocks
   | between the desserts and the loyalty panel.
   |
========================================================= */

@media (max-width:760px){

    .drinks-strip{
        display:flex;
        gap:11px;
        overflow-x:auto;
        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
        padding-bottom:4px;
    }

    .drinks-strip::-webkit-scrollbar{display:none}

    .drink-tile{
        flex:0 0 46%;
        scroll-snap-align:start;
    }

    .drink-tile-media{
        height:124px;
    }


    /*
    | Name above price, not beside it.
    |
    | On a tile this narrow a name like "Still Water 500ml"
    | wraps to three lines while the price sits alongside in
    | the leftover sliver, which looks broken. Stacking keeps
    | the name on one or two lines and the price clear of it.
    */

    .drink-tile-body{
        flex-direction:column;
        align-items:flex-start;
        gap:5px;
        padding:11px 12px;
    }
}