/* =========================================================
   INSANE LABAN - SUGGESTION STRIP
   =========================================================
   |
   | The "before you go" rail on the dessert page and the cart.
   |
   | Rendered by renderSuggestionStrip() in suggestions.php, so
   | the markup these rules target lives in one place.
   |
   |
   | WHY IT IS A SCROLLING ROW AND NOT A GRID
   |
   | A suggestion is an afterthought by definition - the customer
   | came for something else. A grid would claim as much vertical
   | space as the thing they actually came for. A single row that
   | runs off the edge of the screen says "there is more here if
   | you want it" while costing one row of height.
   |
   |
   | COLOURS
   |
   | Tokens are declared locally rather than relying on the host
   | page, because this file is loaded by product.php and cart.php
   | and both may change independently. They are the same values
   | used across the customer side.
   |
========================================================= */

.suggestion-strip{
    --sg-gold:#d9a441;
    --sg-gold-soft:#e8bd68;
    --sg-violet:#6b3df5;
    --sg-violet-hi:#7f57ff;
    --sg-navy:#0d2a55;
    --sg-line:rgba(255,255,255,.12);
    --sg-surface:rgba(255,255,255,.05);
    --sg-surface-hi:rgba(255,255,255,.09);
    --sg-mute:rgba(255,255,255,.65);
    --sg-dim:rgba(255,255,255,.45);

    margin:34px 0 0;
}


/* =========================================================
   HEADING
========================================================= */

.suggestion-strip-head{
    display:flex;
    align-items:baseline;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:13px;
}


.suggestion-eyebrow{
    font-size:11px;
    font-weight:800;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--sg-gold);
}


.suggestion-heading{
    margin:0;
    font-size:15px;
    font-weight:700;
    color:rgba(255,255,255,.8);
}


/* =========================================================
   THE RAIL
   =========================================================
   |
   | scroll-snap so a flick lands on a tile rather than
   | halfway through one. The scrollbar is hidden because a
   | partly visible tile at the right-hand edge already says
   | the row scrolls - which is why the tiles are sized to
   | leave one peeking rather than ending flush.
   |
========================================================= */

/* =========================================================
   PAGE-LEVEL STRIP
   =========================================================
   |
   | Only needed on the cart.
   |
   | product.css puts the sidebar offset on the <main> itself
   | (.customer-product-page), so the strip on a dessert page
   | inherits it and needs nothing.
   |
   | cart.css puts the offset on the sections INSIDE <main>
   | rather than on .cart-page, so a strip added as a sibling of
   | those sections has no offset at all - and because the
   | sidebar is fixed, it does not push the strip aside, it sits
   | on top of it. The first letter of the heading disappears
   | under the sidebar.
   |
   | These are the same values and the same breakpoints as
   | .customer-product-page in product.css and .beverage-page in
   | beverages.css, so all three move together.
   |
========================================================= */

.suggestion-strip.is-page-level{
    width:calc(100% - 165px);
    margin-left:145px;
    margin-right:20px;
}

@media (max-width:1350px){

    .suggestion-strip.is-page-level{
        width:calc(100% - 155px);
        margin-left:135px;
        margin-right:20px;
    }
}

@media (max-width:1050px){

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

@media (max-width:700px){

    /* the sidebar is gone by here, replaced by the top bar */
    .suggestion-strip.is-page-level{
        width:calc(100% - 30px);
        margin-left:15px;
        margin-right:15px;
    }
}


.suggestion-rail{
    display:flex;
    gap:11px;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding:2px 2px 6px;
    margin:0 -2px;
}

.suggestion-rail::-webkit-scrollbar{display:none}


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

.suggestion-tile{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:10px;
    width:258px;
    padding:8px 10px 8px 8px;
    border:1px solid var(--sg-line);
    border-radius:999px;
    background:var(--sg-surface);
    scroll-snap-align:start;
    transition:border-color .2s ease,background .2s ease,transform .2s ease;
}


.suggestion-tile:hover{
    border-color:rgba(232,189,104,.45);
    background:var(--sg-surface-hi);
    transform:translateY(-2px);
}


/*
| The whole left-hand side is one link, so the thumbnail and
| the name are a single target rather than two.
*/

.suggestion-tile-link{
    flex:1 1 auto;
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
    color:inherit;
    text-decoration:none;
}


/* =========================================================
   THUMBNAIL
   =========================================================
   |
   | contain, not cover.
   |
   | These are bottles and plated desserts shot against a plain
   | background. cover would crop a tall bottle to a circle and
   | take the cap off it.
   |
========================================================= */

.suggestion-thumb{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
    width:46px;
    height:46px;
    border-radius:50%;
    overflow:hidden;
    background:var(--sg-navy);
    color:var(--sg-dim);
    font-size:16px;
}


.suggestion-thumb img{
    width:100%;
    height:100%;
    object-fit:contain;
    padding:5px;
}


/* =========================================================
   TEXT
========================================================= */

.suggestion-text{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
}


.suggestion-text strong{
    font-size:13.5px;
    font-weight:700;
    line-height:1.25;
    color:#fff;

    /*
    | A long dessert name must not push the + button off the
    | tile, so it is clipped rather than allowed to wrap.
    */
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}


.suggestion-meta{
    display:flex;
    align-items:center;
    flex-wrap:nowrap;
    gap:7px;
    min-width:0;
    font-size:12px;
    color:var(--sg-mute);
}

/*
| The price never shrinks and never wraps.
|
| It shared the row with the reason label as a loose text node,
| so a longer label stole its space and pushed it onto a second
| line - the tile grew, its neighbours did not, and the rail
| looked broken. The label gives up its space instead, which is
| what the ellipsis on it is for.
*/

.suggestion-price{
    flex:0 0 auto;
    white-space:nowrap;
}

.suggestion-reason{
    flex:0 1 auto;
    min-width:0;
}


.suggestion-reason{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:10px;
    font-style:normal;
    font-weight:700;
    letter-spacing:.4px;
    text-transform:uppercase;
    color:var(--sg-gold-soft);
    opacity:.85;
}


/* =========================================================
   THE BUTTON
   =========================================================
   |
   | Two states that look alike but do different things:
   |
   |   a plus   adds the drink straight to the cart
   |   an arrow opens the dessert page to choose a topping
   |
   | The arrow is deliberately quieter. A filled violet plus
   | promises one tap; an outlined arrow promises a page.
   |
========================================================= */

.suggestion-add{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    padding:0;
    border:none;
    border-radius:50%;
    background:var(--sg-violet);
    color:#fff;
    font-size:14px;
    cursor:pointer;
    text-decoration:none;
    transition:background .2s ease,transform .15s ease,opacity .2s ease;
}


.suggestion-add:hover{
    background:var(--sg-violet-hi);
    transform:scale(1.06);
}


.suggestion-add:active{
    transform:scale(.94);
}


.suggestion-add.is-link{
    background:transparent;
    border:1px solid rgba(232,189,104,.5);
    color:var(--sg-gold-soft);
}


.suggestion-add.is-link:hover{
    background:rgba(232,189,104,.14);
}


/* =========================================================
   BUSY AND DONE
   =========================================================
   |
   | The tap has to acknowledge itself immediately. Without
   | this the customer taps, nothing visibly happens while the
   | request is in flight, and they tap again - which is two
   | drinks in the cart.
   |
========================================================= */

.suggestion-add.is-busy{
    opacity:.6;
    pointer-events:none;
}


.suggestion-add.is-done{
    background:#1e9e63;
    pointer-events:none;
}


.suggestion-tile.is-added{
    border-color:rgba(30,158,99,.55);
    background:rgba(30,158,99,.12);
}


/* =========================================================
   FEEDBACK LINE
   =========================================================
   |
   | aria-live, so a screen reader hears the result of a tap
   | that is otherwise only a colour change.
   |
========================================================= */

.suggestion-feedback{
    margin:9px 0 0;
    min-height:17px;
    font-size:12.5px;
    color:var(--sg-gold-soft);
}


.suggestion-feedback.is-error{
    color:#ff9b9b;
}


/* =========================================================
   NARROW SCREENS
   =========================================================
   |
   | Tiles narrow to just under the viewport so the next one
   | always shows at the edge. Below 360px a fixed width would
   | overflow, so it becomes a percentage.
   |
========================================================= */

@media (max-width:620px){

    .suggestion-strip{
        margin-top:26px;
    }

    .suggestion-tile{
        width:min(248px,82%);
    }
}


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

@media (prefers-reduced-motion:reduce){

    .suggestion-tile,
    .suggestion-add{
        transition:none;
    }

    .suggestion-tile:hover,
    .suggestion-add:hover,
    .suggestion-add:active{
        transform:none;
    }
}


/* =========================================================
   REDUCED PRICE ON A TILE
   =========================================================
   |
   | The old price sits before the new one, struck through and
   | quieter. Deliberately small: the tile's job is the name and
   | the current price, with the saving as supporting evidence
   | rather than the headline.
   |
========================================================= */

.suggestion-was{
    margin-right:5px;
    color:var(--sg-dim);
    font-weight:500;
    text-decoration-thickness:1px;
    text-decoration-color:rgba(255,255,255,.4);
}