/*! mck-live-boost v1.1 — append AFTER style.css. Mobile-first; every rule is scoped to the /live landing page. */

/* --- 0. Region qualifier chips: one row, no horizontal bleed (3 chips fit at 320px+) ---------------- */
.live-page .mck-region{display:flex;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:0 0 12px;padding:2px 0 4px}
.live-page .mck-region::-webkit-scrollbar{display:none}
.mck-region-label{flex:none;font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--muted);text-transform:uppercase}
.mck-region>button{flex:1 1 auto;min-height:44px;padding:9px 10px;border:1px solid #cbd5c3;border-radius:28px;background:var(--paper);font-size:12px;font-weight:600;white-space:nowrap;text-align:center}
.mck-region>button[aria-checked=true]{background:var(--green);border-color:var(--green);color:#fff}
@media(max-width:560px){.mck-region-label{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}}

/* --- 1. Blocked (frozen -> East / Langkawi) tiles ------------------------------- */
.live-product.mck-blocked{opacity:.62}
.live-product.mck-blocked .live-photo{filter:grayscale(.55)}
.mck-blocked-note{display:block;margin:6px 0 0!important;padding:6px 9px;border-radius:4px;background:#f5e9df;color:#79452b!important;font-size:11px!important;font-weight:600;line-height:1.45}
.live-product.mck-in-cart{border-color:var(--green);box-shadow:0 0 0 1px var(--green) inset}

/* --- 2. Tap targets: 44x44 everywhere on the live page (was 30-38px wide) --------- */
.live-buy-row{flex-wrap:wrap;row-gap:8px}
.live-buy-row .qty{min-height:48px;gap:0}
.live-buy-row .qty button{min-width:44px;width:44px;height:46px;font-size:22px;touch-action:manipulation}
.live-buy-row .qty output{min-width:24px;font-size:15px;font-weight:700}
@media(max-width:950px){.live-buy-row .qty button{width:44px}}
@media(max-width:370px){.live-buy-row .qty button{width:44px;min-width:44px}}
.live-page .filter{min-height:44px}
.has-live-cart .languages button{min-width:40px;min-height:44px}   /* header sits outside .live-page */

/* --- 3. Sticky bar: free-delivery progress hairline + one-tap top-up ------------------------------- */
.live-cart-bar{flex-wrap:wrap;row-gap:8px;align-items:center;overflow:hidden}
.live-cart-bar>.mck-ship{flex:1 0 100%;order:-1}
.live-cart-bar>.mck-ship[hidden]{display:none}
/* keep [text | button] on ONE row even when the message is long (empty cart on 360px): only .mck-ship may take a full row */
.live-cart-bar>div:not(.mck-ship){flex:1 1 0;min-width:0}
.live-cart-bar>.btn{flex:0 0 auto}
.mck-ship-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mck-ship-text{font-size:12px;font-weight:600;line-height:1.3;min-width:0;flex:1 1 auto}
.mck-ship progress{appearance:none;position:absolute;left:0;right:0;top:0;display:block;width:100%;height:4px;margin:0;border:0;border-radius:0;overflow:hidden;background:#ffffff26}
.mck-ship progress::-webkit-progress-bar{background:#ffffff26}
.mck-ship progress::-webkit-progress-value{background:#f1dba9;transition:width .25s ease}
.mck-ship progress::-moz-progress-bar{background:#f1dba9}
.mck-ship.is-reached progress::-webkit-progress-value{background:#7fe0a1}
.mck-ship.is-reached progress::-moz-progress-bar{background:#7fe0a1}
.mck-ship.is-near .mck-ship-text{color:#f1dba9}
.mck-ship.is-clash .mck-ship-text{color:#ffd8c2}
.mck-topup,.mck-fix{flex:0 1 auto;max-width:46%;min-height:40px;padding:5px 12px;border:1px solid #f1dba9;border-radius:20px;background:transparent;color:#f1dba9;font-size:12px;font-weight:700;line-height:1.2;text-align:left;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mck-topup[hidden],.mck-ship progress[hidden]{display:none}
.mck-fix{border-color:#fff;color:#fff;max-width:48%;text-align:center}
.live-cart-bar .btn{min-height:48px}
.live-cart-bar .btn:disabled{opacity:.5}

/* --- 4. Above-the-fold on phones: put the first "+" inside the first screen ------- */
@media(max-width:760px){
  .has-live-cart{padding-bottom:150px}                       /* bar can now grow by one row when the free-delivery strip shows */
  .live-page{padding-top:14px}
  .live-page .purchase-progress{margin-bottom:10px}
  .live-page .purchase-progress ol{font-size:11px;gap:6px}
  .live-page .purchase-progress li{padding-bottom:6px;white-space:nowrap;flex:1 1 auto;min-width:0}
  .live-page .page-heading{margin-bottom:10px}
  .live-page .page-heading .eyebrow{margin-bottom:6px}
  .live-page .page-heading h1{font-size:26px;line-height:1.2;margin-bottom:8px}
  .live-page .page-heading>p:last-child{display:none}            /* long intro moves out of the first screen */
  .live-delivery{margin-bottom:10px;font-size:11px;line-height:1.45}
  .live-page .filter-row{margin-bottom:0}
  .live-products{margin:12px 0 24px}
  .live-product{align-items:start}
  .live-product p:not(.mck-blocked-note){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .live-facts{display:none}
}
@media(max-width:370px){.live-page .purchase-progress ol{font-size:10px}.live-page .purchase-progress li span{min-width:18px;height:18px}.mck-region>button{padding:9px 6px;font-size:11px}}

/* --- 5. Motion: tiny confirmation on the total, honours reduced-motion (global rule in style.css) --- */
.live-cart-bar strong{transition:transform .15s}
.live-cart-bar.is-bump strong{transform:scale(1.08)}