/* ═══════════════════════════════════════════════════════════════════════════
   VYNK HOME — Customer Site Design System  Phase 2.5
   Exact values sourced from vynk-app.jsx design file.
   Accent colours = merchant --color-base. Surfaces = warm palette.
   Never edit vynk-entry.css (splash only). All homepage styles live here.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── LEGACY NAV HIDE ────────────────────────────────────────────────────── */
.vynk-legacy-nav { display: none !important; }

/* ─── HEADER ROOT (sticky) ───────────────────────────────────────────────── */
#vynk-header-root { position: sticky; top: 0; z-index: 40; }

/* ─── HEADER BAR ─────────────────────────────────────────────────────────── */
/* Design: padding 60px 18px 14px (60px = iOS status bar). We use 0 top     */
/* padding since our layout sits below the browser chrome naturally.          */
#vynk-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0 1.125rem;           /* 18px sides — exact from design */
    background: #ffffff;
    border-bottom: 1px solid rgba(22,19,13,0.08);
    height: 3.5rem;
    overflow: visible;
}
.dark #vynk-header {
    background: #171310;           /* pal.surface dark */
    border-bottom-color: rgba(244,236,221,0.08);
}

/* Brand cluster */
.vynk-hdr-brand { display: flex; align-items: center; gap: 0.625rem; flex: 1; min-width: 0; }

/* Logo: fixed square, no crop */
.vynk-hdr-logo {
    width: 1.75rem;                /* 28px — VynkMark size from design */
    height: 1.75rem;
    border-radius: 0.25rem;
    object-fit: contain;
    object-position: center;
    flex-shrink: 0;
}

.vynk-hdr-brand-text { display: flex; flex-direction: column; min-width: 0; }

/* Design: fontSize 16, fontWeight 700, letterSpacing -0.2 */
.vynk-hdr-name {
    font-size: 1rem;
    font-weight: 700;
    color: #16130d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.0125rem;
    line-height: 1.2;
}
.dark .vynk-hdr-name { color: #f4ecdd; }

/* Design: fontSize 10.5, fontWeight 500, color pal.muted */
.vynk-hdr-subtitle {
    font-size: 0.65625rem;         /* 10.5px */
    color: #6b6557;                /* pal.muted light */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    margin-top: 1px;
    font-weight: 500;
}
.dark .vynk-hdr-subtitle { color: #8c8472; } /* pal.muted dark */

/* Right cluster */
.vynk-hdr-right { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.vynk-hdr-wifi-wrap { display: flex; align-items: center; }

/* Icon buttons: w38 h38 radius12 surface bg + border — exact from design */
.vynk-hdr-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.375rem;               /* 38px */
    height: 2.375rem;
    border-radius: 0.75rem;        /* 12px */
    color: #16130d;
    background: #ffffff;
    border: 1px solid rgba(22,19,13,0.08);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    flex-shrink: 0;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
}
.vynk-hdr-icon-btn:hover { background: #f7f3ea; }
.dark .vynk-hdr-icon-btn {
    color: #f4ecdd;
    background: #171310;
    border-color: rgba(244,236,221,0.08);
}
.dark .vynk-hdr-icon-btn:hover { background: #1f1a14; }
.vynk-hdr-icon-btn svg { width: 1.125rem; height: 1.125rem; display: block; }

/* ─── DROPDOWN DRAWER ────────────────────────────────────────────────────── */
#vynk-drawer {
    background: #ffffff;
    border-bottom: 1px solid rgba(22,19,13,0.08);
}
.dark #vynk-drawer {
    background: #171310;
    border-bottom-color: rgba(244,236,221,0.08);
}
.vynk-drawer-nav { padding: 0.375rem 0; }
.vynk-drawer-link {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.75rem 1.125rem;
    font-size: 0.875rem; font-weight: 500;
    color: #3a342a; text-decoration: none;
    transition: background 0.1s ease;
}
.vynk-drawer-link:hover { background: #f7f3ea; }
.dark .vynk-drawer-link { color: #d4cab7; }
.dark .vynk-drawer-link:hover { background: #1f1a14; }
.vynk-drawer-link svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; color: #8c8472; }
.dark .vynk-drawer-link svg { color: #6b6557; }
.vynk-drawer-link--danger, .vynk-drawer-link--danger svg { color: #dc2626; }
.dark .vynk-drawer-link--danger, .dark .vynk-drawer-link--danger svg { color: #f87171; }

/* ─── WELCOME CARD ───────────────────────────────────────────────────────── */
/* Design: margin 4px 18px 14px, padding 12px 14px, radius 16, border 1px   */
.vynk-welcome-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;                  /* 12px gap */
    margin: 0.25rem 1.125rem 0.875rem; /* 4px 18px 14px */
    padding: 0.75rem 0.875rem;     /* 12px 14px */
    background: #ffffff;
    border-radius: 1rem;           /* 16px */
    border: 1px solid rgba(22,19,13,0.08);
}
/* Design dark: linear-gradient(120deg, surface #171310, surface2 #1f1a14) */
.dark .vynk-welcome-card {
    background: linear-gradient(120deg, #171310, #1f1a14);
    border-color: rgba(244,236,221,0.08);
}

/* Icon: w40 h40 radius12, gradient rust→accent — exact from design */
.vynk-welcome-icon {
    display: flex; align-items: center; justify-content: center;
    width: 2.5rem; height: 2.5rem; /* 40px */
    border-radius: 0.75rem;        /* 12px */
    background: linear-gradient(135deg, #c2541a, rgb(var(--color-base)));
    flex-shrink: 0;
}
.vynk-welcome-icon svg { width: 1.25rem; height: 1.25rem; color: #fbf8f1; }

/* Text */
.vynk-welcome-text { flex: 1; min-width: 0; }

/* Design: fontSize 11, fontWeight 600, letterSpacing 0.4, uppercase */
.vynk-welcome-label {
    display: block;
    font-size: 0.6875rem;          /* 11px */
    font-weight: 600;
    color: #6b6557;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    line-height: 1.2;
    margin-bottom: 0.125rem;
}
.dark .vynk-welcome-label { color: #8c8472; }

/* Design: fontSize 15, fontWeight 600, letterSpacing -0.2 */
.vynk-welcome-greeting {
    font-size: 0.9375rem;          /* 15px */
    font-weight: 600;
    color: #16130d;
    margin: 0;
    line-height: 1.35;
    letter-spacing: -0.0125rem;
}
.dark .vynk-welcome-greeting { color: #f4ecdd; }
.vynk-welcome-dot { color: rgba(22,19,13,0.3); }
.dark .vynk-welcome-dot { color: rgba(244,236,221,0.3); }
.vynk-welcome-table-name { color: rgb(var(--color-base)); font-weight: 700; }

/* Waiter button: compact pill in welcome card */
.vynk-welcome-waiter > div {
    display: flex !important; flex-direction: row !important;
    align-items: center !important; gap: 0 !important; margin: 0 !important;
}
.vynk-welcome-waiter > div > button:first-child {
    padding: 0.5rem 0.75rem !important; /* 8px 12px */
    font-size: 0.71875rem !important;   /* 11.5px */
    border-radius: 9999px !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    min-height: 0 !important;
    white-space: nowrap;
}

/* ─── SEARCH BAR (above banner, in cart.blade.php) ───────────────────────── */
/* Design: margin 0 18px 18px, padding 12px 14px, radius 14 (NOT full pill)  */

.vynk-searchbar-wrap {
    padding: 0 1.125rem 1.125rem;  /* 0 18px 18px */
    background: transparent;
}

.vynk-searchbar-inner {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;     /* 12px 14px */
    background: rgba(22,19,13,0.05); /* pal.chipBg light */
    border-radius: 0.875rem;       /* 14px — NOT a pill, per design */
    border: 1px solid rgba(22,19,13,0.08);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.dark .vynk-searchbar-inner {
    background: rgba(244,236,221,0.06); /* pal.chipBg dark */
    border-color: rgba(244,236,221,0.08);
}
.vynk-searchbar-inner:focus-within {
    border-color: rgb(var(--color-base));
    background: rgba(22,19,13,0.03);
}
.dark .vynk-searchbar-inner:focus-within {
    border-color: rgb(var(--color-base));
    background: rgba(244,236,221,0.04);
}
.vynk-searchbar-icon { width: 1rem; height: 1rem; color: #8c8472; flex-shrink: 0; }
.dark .vynk-searchbar-icon { color: #6b6557; }

/* Design: fontSize ~13.5px, color pal.muted */
.vynk-searchbar-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 0.84375rem;         /* 13.5px */
    color: #16130d;
    padding: 0;
    min-width: 0;
    font-weight: 500;
}
.dark .vynk-searchbar-input { color: #f4ecdd; }
.vynk-searchbar-input::placeholder { color: #8c8472; }
.dark .vynk-searchbar-input::placeholder { color: #6b6557; }

/* ─── BANNER RESERVE CTA ─────────────────────────────────────────────────── */
/* Frosted pill overlaid on banner image, left-aligned (doesn't conflict     */
/* with the centered slide dots)                                              */
.vynk-banner-reserve {
    position: absolute;
    bottom: 0.875rem;
    left: 1rem;
    z-index: 20;
}

.vynk-banner-reserve a {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: rgba(255,255,255,0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #16130d;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.45);
    transition: background 0.15s ease;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.vynk-banner-reserve a:hover {
    background: rgba(255,255,255,0.96);
}
/* === PHASE 3A — Banner + Search Redesign ============================== */

/* Banner section: transparent bg, 18px sides matching design spec */
.vynk-banner-section {
    background: transparent;
    padding: 0 1.125rem;
}

/* Carousel outer: expand to 204px so dots get their own 24px row below image */
#default-carousel {
    height: 204px !important;
}
@media (min-width: 1024px) {
    #default-carousel { height: 244px !important; }
}

/* Inner slide wrapper: constrained to image height, radius + clip */
#default-carousel > .relative {
    height: 180px !important;
    border-radius: 1.25rem !important;
    overflow: hidden !important;
}
@media (min-width: 1024px) {
    #default-carousel > .relative { height: 220px !important; }
}

/* Dots row: absolute inside carousel but in the 24px zone below image */
.vynk-dots-row {
    position: absolute !important;
    bottom: 5px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Kill Tailwind space-x sibling margins */
.vynk-dots-row > * + * { margin-left: 0 !important; }

/* Active dot: pill, merchant accent */
.vynk-dots-row button[aria-current="true"] {
    width: 22px !important;
    height: 6px !important;
    border-radius: 999px !important;
    background: rgb(var(--color-base)) !important;
    opacity: 1 !important;
    transition: width 0.3s ease, background 0.3s ease !important;
}

/* Inactive dot: small circle, muted */
.vynk-dots-row button:not([aria-current="true"]) {
    width: 6px !important;
    height: 6px !important;
    border-radius: 999px !important;
    background: rgba(22,19,13,0.22) !important;
    opacity: 1 !important;
    transition: width 0.3s ease, background 0.3s ease !important;
}
.dark .vynk-dots-row button:not([aria-current="true"]) {
    background: rgba(244,236,221,0.28) !important;
}

/* Search input: strip all component defaults */
.vynk-searchbar-input {
    flex: 1 !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    color: #16130d !important;
    min-width: 0 !important;
    width: 100% !important;
}
.dark .vynk-searchbar-input { color: #f4ecdd !important; }
.vynk-searchbar-input::placeholder { color: #8c8472 !important; }
.dark .vynk-searchbar-input::placeholder { color: #6b6557 !important; }
/* ====================================================================== */
/* === PHASE 3B — Sections Rail + Category Pills ======================== */
.vynk-sections-header{display:flex;align-items:center;justify-content:space-between;padding:20px 1.125rem 0;}
.vynk-sections-label{font-size:10.5px;letter-spacing:0.2em;text-transform:uppercase;color:#6b6557;font-weight:700;}
.dark .vynk-sections-label{color:#8c8472;}
.vynk-sections-rail{display:flex;gap:8px;overflow-x:auto;padding:10px 1.125rem 6px;scrollbar-width:none;-ms-overflow-style:none;}
.vynk-sections-rail::-webkit-scrollbar{display:none;}
.vynk-spill{flex-shrink:0;display:flex;align-items:center;gap:8px;padding:10px 15px 10px 13px;border-radius:14px;cursor:pointer;border:1px solid;transition:all .22s;white-space:nowrap;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:none;font-family:inherit;}
.vynk-spill--all-active{background:#16130d;border-color:#16130d;color:#fbf8f1;}
.vynk-spill--all-inactive{background:#ffffff;border-color:rgba(22,19,13,0.08);color:#16130d;}
.dark .vynk-spill--all-active{background:#f4ecdd;border-color:#f4ecdd;color:#16130d;}
.dark .vynk-spill--all-inactive{background:#171310;border-color:rgba(244,236,221,0.08);color:#f4ecdd;}
.vynk-spill--active{background:rgba(var(--color-base),0.1);border-color:rgba(var(--color-base),0.35);color:#16130d;box-shadow:0 0 0 1px rgba(var(--color-base),0.2),0 4px 16px rgba(var(--color-base),0.12);}
.vynk-spill--inactive{background:#ffffff;border-color:rgba(22,19,13,0.08);color:#16130d;}
.dark .vynk-spill--active{background:#251f18;border-color:rgba(244,236,221,0.16);color:#f4ecdd;box-shadow:0 0 0 1px rgba(229,160,44,0.22),0 4px 16px rgba(229,160,44,0.15);}
.dark .vynk-spill--inactive{background:#171310;border-color:rgba(244,236,221,0.08);color:#f4ecdd;}
.vynk-spill-dot{width:8px;height:8px;border-radius:99px;background:rgb(var(--color-base));flex-shrink:0;}
.vynk-spill-name{font-weight:700;font-size:13px;line-height:1.15;letter-spacing:-0.1px;}
.vynk-spill-badge{padding:2px 8px;border-radius:99px;background:rgba(22,19,13,0.07);color:#6b6557;font-size:11px;font-weight:700;margin-left:2px;transition:background .22s,color .22s;}
.dark .vynk-spill-badge{background:rgba(244,236,221,0.06);color:#8c8472;}
.vynk-spill-badge--on{background:rgb(var(--color-base))!important;color:#fbf8f1!important;}
.vynk-cats-rail{margin-top:12px;display:flex;gap:8px;overflow-x:auto;padding:0 1.125rem 4px;scrollbar-width:none;-ms-overflow-style:none;}
.vynk-cats-rail::-webkit-scrollbar{display:none;}
.vynk-cat-pill{padding:9px 16px;border-radius:999px;flex-shrink:0;font-size:12.5px;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap;border:1px solid;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:none;font-family:inherit;}
.vynk-cat-pill--active{background:#16130d;color:#fbf8f1;border-color:#16130d;}
.vynk-cat-pill--inactive{background:transparent;color:#3a342a;border-color:rgba(22,19,13,0.08);}
.dark .vynk-cat-pill--active{background:#f4ecdd;color:#16130d;border-color:#f4ecdd;}
.dark .vynk-cat-pill--inactive{background:transparent;color:#d4cab7;border-color:rgba(244,236,221,0.08);}
/* ====================================================================== */
/* === PHASE 3B-SHEET — Browse All Bottom Sheet ========================= */
.vynk-browse-all-btn{background:#2d1810;border:none;border-radius:9999px;padding:6px 12px;display:inline-flex;align-items:center;gap:5px;color:#e8a050;font-size:12px;font-weight:700;cursor:pointer;letter-spacing:0.2px;font-family:inherit;}
.vynk-sheet-scrim{position:fixed;inset:0;background:rgba(22,19,13,0.32);backdrop-filter:blur(2px);z-index:40;}
.dark .vynk-sheet-scrim{background:rgba(0,0,0,0.5);}
.vynk-sheet{position:fixed;left:0;right:0;bottom:0;z-index:50;background:#fbf8f1;border-top-left-radius:24px;border-top-right-radius:24px;height:92vh;max-height:92vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 -8px 30px rgba(0,0,0,0.2);}
.dark .vynk-sheet{background:#13100c;}
.vynk-sheet-handle{width:40px;height:4px;border-radius:99px;background:rgba(22,19,13,0.16);margin:14px auto 0;flex-shrink:0;}
.dark .vynk-sheet-handle{background:rgba(244,236,221,0.16);}
.vynk-sheet-header{display:flex;align-items:flex-start;justify-content:space-between;padding:10px 20px 14px;flex-shrink:0;}
.vynk-sheet-title{font-size:19px;font-weight:700;color:#16130d;letter-spacing:-0.3px;line-height:1.2;}
.dark .vynk-sheet-title{color:#f4ecdd;}
.vynk-sheet-subtitle{font-size:12px;color:#6b6557;margin-top:2px;}
.dark .vynk-sheet-subtitle{color:#8c8472;}
.vynk-sheet-close{width:32px;height:32px;border-radius:99px;background:rgba(22,19,13,0.05);border:none;cursor:pointer;font-size:16px;font-weight:700;color:#16130d;display:grid;place-items:center;flex-shrink:0;}
.dark .vynk-sheet-close{background:rgba(244,236,221,0.06);color:#f4ecdd;}
.vynk-sheet-body{flex:1;min-height:0;overflow-y:auto;padding:8px 20px 32px;display:flex;flex-direction:column;gap:8px;}
.vynk-sheet-body>*{flex-shrink:0;}
.vynk-sheet-body .vynk-spill{width:100%;}
/* ====================================================================== */
/* === PHASE 3C — 2-Column Item Cards ================================== */
.vynk-item-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:12px!important;}
.vynk-item-card{flex-direction:column!important;border-radius:18px!important;overflow:hidden!important;background:#ffffff!important;box-shadow:none!important;align-items:stretch!important;border-color:rgba(22,19,13,0.08)!important;}
.dark .vynk-item-card{background:#171310!important;border-color:rgba(244,236,221,0.08)!important;}
.vynk-item-card>div{flex-direction:column!important;padding:0!important;gap:0!important;width:100%!important;}
.vynk-item-card img.object-cover{width:100%!important;height:110px!important;border-radius:0!important;object-fit:cover!important;flex-shrink:0!important;}
.vynk-item-card .flex-col{padding:10px!important;gap:3px!important;flex:1!important;}
.vynk-item-card .text-xs.cursor-pointer{display:none!important;}
.vynk-item-card .my-1{display:none!important;}
/* ====================================================================== */
/* === FIX 2 — Item card alignment ====================================== */
/* Price: compact, no wrap */
.vynk-item-card .font-semibold.text-gray-900,
.vynk-item-card .font-semibold.dark\:text-white {
    font-size: 12.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
/* Item name: max 2 lines */
.vynk-item-card .inline-flex.font-semibold {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    white-space: normal !important;
    font-size: 12.5px !important;
}
/* Add button: green pill matching design */
.vynk-item-card .x-cart-button button,
.vynk-item-card button[wire\:click*="addCartItems"],
.vynk-item-card button[wire\:click*="addQty"] {
    background: rgb(var(--color-base)) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 6px 11px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}
/* ====================================================================== */
/* === FIX 3 — Reduce banner height + tighten top spacing =============== */
/* Banner: JSX design spec is 168px image height */
#default-carousel { height: 190px !important; }
@media (min-width: 1024px) { #default-carousel { height: 230px !important; } }
#default-carousel > .relative { height: 168px !important; }
@media (min-width: 1024px) { #default-carousel > .relative { height: 208px !important; } }
/* Tighten sections header top gap */
.vynk-sections-header { padding-top: 12px !important; }
/* Tighten category rail top gap */
.vynk-cats-rail { margin-top: 8px !important; }
/* ====================================================================== */
/* Issue 1: Compact qty counter for 2-col cards */
.vynk-item-card .relative.flex.items-center.max-w-24 { max-width: none !important; flex-shrink: 0; }
.vynk-item-card .relative.flex.items-center.max-w-24 button { height: 26px !important; padding: 0 4px !important; min-width: 24px !important; }
.vynk-item-card .relative.flex.items-center.max-w-24 input { height: 26px !important; min-width: 22px !important; width: 28px !important; font-size: 11px !important; padding: 0 !important; }

/* Issue 2: Prevent Add button cutoff on price row */
.vynk-item-card .flex.items-center.justify-between.w-full > div:first-child { min-width: 0 !important; flex: 1 1 0 !important; overflow: hidden !important; }
.vynk-item-card .flex.items-center.justify-between.w-full > *:last-child { flex-shrink: 0 !important; }

/* === PREMIUM CARD v2 — Full image + icon above name =================== */
/* Full image: contain with warm bg, no crop */
.vynk-item-card img.object-cover { object-fit: contain !important; background: #f5f0e8 !important; padding: 10px !important; height: 118px !important; }
.dark .vynk-item-card img.object-cover { background: #1f1a14 !important; }
/* Fix space-x-4 left margin when column-stacked */
.vynk-item-card > div > * + * { margin-left: 0 !important; }
/* Icon above name */
.vynk-item-card .inline-flex.items-center { flex-direction: column !important; align-items: flex-start !important; gap: 2px !important; }
.vynk-item-card .inline-flex.items-center img { margin-right: 0 !important; width: 14px !important; height: 14px !important; }
/* Price: no clip, reduced size for long Naira values */
.vynk-item-card .font-semibold.text-gray-900, .vynk-item-card .font-semibold.dark\:text-white { font-size: 11px !important; white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; }

/* Image white bg: blend with warm card bg */
.vynk-item-card img.object-cover { mix-blend-mode: multiply !important; }
.dark .vynk-item-card img.object-cover { mix-blend-mode: normal !important; }
/* Price row: wrap so long prices push counter to next line */
.vynk-item-card .flex.items-center.justify-between.w-full { flex-wrap: wrap !important; gap: 4px !important; }
.vynk-item-card .flex.items-center.justify-between.w-full > div:first-child { flex: 0 0 auto !important; overflow: visible !important; }

/* Issue 3: Instant tap feedback while Livewire round-trip processes */
.vynk-item-card button[wire\:click*='addCartItems']:active, .vynk-item-card button[wire\:click*='addQty']:active { opacity: 0.7 !important; transform: scale(0.94) !important; transition: transform 0.08s, opacity 0.08s !important; }

/* Issue 4: Bottom padding so last items clear browser chrome + cart bar */
.vynk-item-grid { padding-bottom: 100px !important; }

/* Larger tap area on qty counter buttons */
.vynk-item-card .relative.flex.items-center.max-w-24 button { min-width: 32px !important; min-height: 32px !important; padding: 0 8px !important; font-weight: 700 !important; font-size: 15px !important; }

/* Page background: warm cream */
body { background: #faf8f4 !important; }
/* Card image area: clean white, no cream bg, no blend */
.vynk-item-card img.object-cover { background: #ffffff !important; mix-blend-mode: normal !important; padding: 12px !important; height: 120px !important; }
.dark .vynk-item-card img.object-cover { background: #1a1713 !important; }
/* Card: subtle shadow to lift off cream page */
.vynk-item-card { box-shadow: 0 1px 4px rgba(22,19,13,0.07) !important; }
/* Show prep time with clock prefix */
.vynk-item-card .inline-flex.items-center.my-1 { display: inline-flex !important; font-size: 10px !important; color: #6b6557 !important; gap: 3px !important; }
.vynk-item-card .inline-flex.items-center.my-1::before { content: '⏱'; font-size: 10px; }

/* Fix: remove per-grid bottom padding that created section gaps */
.vynk-item-grid { padding-bottom: 0 !important; margin-bottom: 4px !important; }
/* Bottom clearance for fixed cart bar */
body { padding-bottom: 80px !important; }