/* ==============================================================================================
   APP UI - one visual language for the website, taken from the Android app.
   ==============================================================================================

   WHY THIS FILE EXISTS

   Every page used to declare its own :root. profile.php said --brand-blue: #3b82f6, checkout.php
   said #2563eb, register.php said #0d6efd, contact.php said --accent-color: #2563eb, and header.php
   said --brand: #3b82f6. Nine palettes, all nearly the same blue, none of them the app's blue. That
   is the real reason the site did not feel like the app: not layout, but a colour that shifted
   slightly every time you moved between pages.

   The values below are lifted from lib/theme/app_theme.dart in the Flutter app, so the website and
   the app now agree by construction. When the app's palette changes, change it here.

   HOW TO USE IT
   Prefer the tokens over hex. A page that needs its own name for something should alias a token
   (--brand-blue: var(--app-primary)) rather than repeat a colour, so it follows the app forever
   after instead of drifting the moment somebody adjusts the brand.

   Loaded from header.php after Bootstrap, so it wins against Bootstrap's defaults. Page-level
   <style> blocks still come later in the document and still win against this - that is deliberate,
   because a page occasionally needs a genuine exception.
   ============================================================================================== */

:root {
    /* ---- brand ------------------------------------------------------------------------------
       primary is the app's blue (#1677E8). The site was using #2563EB / #3B82F6, which read as a
       different product sitting next to a phone showing the app. */
    --app-primary:        #1677E8;
    --app-primary-dark:   #1160BF;
    --app-primary-soft:   #E8F1FE;   /* tinted fills: selected chips, info strips */

    /* The red of the category rings and sale badges. Used sparingly - it is an accent, not a
       second brand colour. */
    --app-accent:         #ED1F4D;
    --app-accent-dark:    #D91643;
    --app-accent-soft:    #FDE8ED;

    --app-amber:          #F59E0B;
    --app-green:          #2FAF8A;   /* delivery promises, in-stock, success */
    --app-green-soft:     #E7F6F1;
    --app-red:            #EF4444;   /* errors only, never decoration */

    /* ---- surfaces --------------------------------------------------------------------------- */
    --app-bg:             #F7F8FA;   /* the app's scaffold background */
    --app-surface:        #FFFFFF;
    --app-surface-alt:    #F2F4F7;   /* image wells, skeletons, disabled fills */
    --app-border:         #E5E7EB;
    --app-border-strong:  #D7DBE0;

    /* ---- text ------------------------------------------------------------------------------- */
    --app-text:           #142033;
    --app-text-muted:     #667085;
    --app-text-faint:     #98A2B3;
    --app-nav-inactive:   #64748B;

    /* ---- shape -------------------------------------------------------------------------------
       The app uses 16 for cards and 12 for controls. Keeping those two apart is most of why an
       interface reads as "an app" rather than "a web page with rounded corners". */
    --app-r-card:         16px;
    --app-r-control:      12px;
    --app-r-pill:         999px;

    /* ---- elevation ---------------------------------------------------------------------------
       Low and soft. Material's heavy drop shadows look wrong on a white storefront. */
    --app-shadow-sm:      0 1px 2px rgba(16, 24, 40, .05);
    --app-shadow:         0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
    --app-shadow-lg:      0 8px 24px rgba(16, 24, 40, .10);

    /* ---- layout ------------------------------------------------------------------------------
       Matches siteContentWidth in the Flutter desktop build, so the two line up column for
       column when you put them side by side. */
    --app-content-width:  1280px;
    --app-gutter:         16px;
}

/* ==============================================================================================
   BASE
   ============================================================================================== */

body.app-ui {
    background: var(--app-bg);
    color: var(--app-text);
    -webkit-font-smoothing: antialiased;
}

.app-ui h1, .app-ui h2, .app-ui h3, .app-ui h4, .app-ui h5, .app-ui h6 { color: var(--app-text); }

/* LINK COLOUR GOES THROUGH BOOTSTRAP'S OWN VARIABLES, NOT A BLANKET `a` RULE.
   A plain `.app-ui a { color: ... }` looks harmless and is not: at specificity (0,1,1) it beats
   Bootstrap's `.btn-primary` (0,1,0), so every <a class="btn btn-primary"> on the site rendered
   blue text on a blue background - an invisible label on the main call to action - and every
   inactive item in the bottom tab bar turned blue as well. Setting the variables recolours real
   links and leaves anything that styles its own colour alone. */
:root {
    --bs-link-color: var(--app-primary);
    --bs-link-hover-color: var(--app-primary-dark);
    --bs-link-color-rgb: 22, 119, 232;
    --bs-link-hover-color-rgb: 17, 96, 191;
}

.app-ui .text-muted,
.app-ui .app-muted { color: var(--app-text-muted) !important; }
.app-ui .app-faint { color: var(--app-text-faint) !important; }

/* The site's own container, held to the same width as the Flutter desktop layout. */
.app-container {
    width: 100%;
    max-width: var(--app-content-width);
    margin-inline: auto;
    padding-inline: var(--app-gutter);
}

/* ==============================================================================================
   CARD
   ============================================================================================== */

.app-card {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-r-card);
    box-shadow: var(--app-shadow-sm);
}

.app-card-pad { padding: 16px; }

/* Only interactive cards lift. A card that moves when you hover it is promising a tap target. */
a.app-card, .app-card-tap {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    text-decoration: none;
    display: block;
    color: inherit;
}
a.app-card:hover, .app-card-tap:hover {
    transform: translateY(-2px);
    box-shadow: var(--app-shadow-lg);
    border-color: var(--app-border-strong);
}

/* ==============================================================================================
   BUTTONS
   ============================================================================================== */

.app-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;                       /* a real thumb target, same as the app */
    padding: 10px 18px;
    border-radius: var(--app-r-control);
    border: 1px solid transparent;
    font-weight: 600;
    font-size: .95rem;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.app-btn:active { transform: translateY(1px); }
.app-btn:disabled, .app-btn.disabled { opacity: .55; pointer-events: none; }

.app-btn-primary { background: var(--app-primary); color: #fff; }
.app-btn-primary:hover { background: var(--app-primary-dark); color: #fff; }

.app-btn-accent { background: var(--app-accent); color: #fff; }
.app-btn-accent:hover { background: var(--app-accent-dark); color: #fff; }

.app-btn-outline {
    background: var(--app-surface);
    border-color: var(--app-primary);
    color: var(--app-primary);
}
.app-btn-outline:hover { background: var(--app-primary-soft); color: var(--app-primary-dark); }

.app-btn-quiet { background: var(--app-surface-alt); color: var(--app-text); }
.app-btn-quiet:hover { background: var(--app-border); color: var(--app-text); }

.app-btn-block { width: 100%; }

/* ==============================================================================================
   INPUTS
   ============================================================================================== */

.app-input,
.app-ui .form-control,
.app-ui .form-select {
    min-height: 46px;
    border-radius: var(--app-r-control);
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    color: var(--app-text);
    padding: 10px 14px;
    font-size: .95rem;
    box-shadow: none;
}
.app-input:focus,
.app-ui .form-control:focus,
.app-ui .form-select:focus {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 3px rgba(22, 119, 232, .14);
    outline: none;
}
.app-input::placeholder,
.app-ui .form-control::placeholder { color: var(--app-text-faint); }

/* The app's search field: one visible border, icon on the left. */
.app-search {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-r-pill);
    padding: 0 16px;
    min-height: 46px;
    box-shadow: var(--app-shadow-sm);
}
.app-search:focus-within {
    border-color: var(--app-primary);
    box-shadow: 0 0 0 3px rgba(22, 119, 232, .14);
}
.app-search i, .app-search svg { color: var(--app-text-faint); flex: none; }
.app-search input {
    border: 0;
    outline: 0;
    background: transparent;
    flex: 1 1 auto;
    min-width: 0;
    font-size: .95rem;
    color: var(--app-text);
    padding: 10px 0;
}

/* ==============================================================================================
   PILLS, CHIPS, BADGES
   ============================================================================================== */

.app-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--app-r-pill);
    padding: 5px 12px;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}
.app-pill-green  { background: var(--app-green-soft);   color: #1B7F65; }
.app-pill-blue   { background: var(--app-primary-soft); color: var(--app-primary-dark); }
.app-pill-accent { background: var(--app-accent-soft);  color: var(--app-accent-dark); }
.app-pill-amber  { background: #FEF3E2;                 color: #B45309; }
.app-pill-grey   { background: var(--app-surface-alt);  color: var(--app-text-muted); }

/* The delivery promise, the one piece of chrome people look for first. */
.app-delivery-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--app-green-soft);
    color: #1B7F65;
    border-radius: var(--app-r-pill);
    padding: 6px 14px;
    font-weight: 700;
    font-size: .85rem;
}

/* ==============================================================================================
   SECTION HEADER  -  "Shop by Category" + See All
   ============================================================================================== */

.app-section {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
}
.app-section-title {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -.01em;
    margin: 0;
    color: var(--app-text);
}
.app-section-sub {
    font-size: .85rem;
    color: var(--app-text-muted);
    margin: 4px 0 0;
}
.app-see-all {
    font-size: .85rem;
    font-weight: 700;
    color: var(--app-primary);
    text-decoration: none;
    white-space: nowrap;
    flex: none;
}
.app-see-all:hover { color: var(--app-primary-dark); text-decoration: underline; }

@media (min-width: 992px) {
    .app-section-title { font-size: 1.35rem; }
}

/* ==============================================================================================
   CATEGORY TILE
   ==============================================================================================
   Square with a soft ring, matching the app. The icons are uploaded 1:1, so the well is forced
   square and the picture is contained inside it - a category photo that gets cropped to fill loses
   the very thing that identifies it. */

.app-cat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--app-text);
    text-align: center;
}
.app-cat-art {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--app-r-card);
    background: var(--app-surface);
    border: 2px solid var(--app-accent-soft);
    display: grid;
    place-items: center;
    overflow: hidden;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
/* FILLS the tile - no padding, no ring.
   The category uploads are photographs with their own coloured corners, not transparent glyphs.
   `contain` shrinks each one and leaves the tile's white background showing as a ring inside the
   border. For a square source in a square tile `cover` crops nothing; it just fills. */
.app-cat-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.app-cat:hover .app-cat-art {
    border-color: var(--app-accent);
    transform: translateY(-2px);
    box-shadow: var(--app-shadow);
}
.app-cat-name {
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--app-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.app-cat.is-active .app-cat-art { border-color: var(--app-accent); }
.app-cat.is-active .app-cat-name { color: var(--app-accent); }

/* Wrapping grid, not a scrolling rail - both lines visible at once. */
.app-cat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
@media (min-width: 576px) { .app-cat-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 768px) { .app-cat-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 992px) { .app-cat-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 18px; } }

/* ==============================================================================================
   PRODUCT CARD
   ============================================================================================== */

.app-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
@media (min-width: 576px) { .app-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) { .app-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1200px){ .app-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

.app-product {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-radius: var(--app-r-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    height: 100%;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.app-product:hover {
    transform: translateY(-2px);
    box-shadow: var(--app-shadow-lg);
    border-color: var(--app-border-strong);
    color: inherit;
}
.app-product-art {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--app-surface);
    display: grid;
    place-items: center;
    overflow: hidden;
}
/* contain, not cover: these are catalogue shots on white and cropping them loses the product. */
.app-product-art img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }

.app-product-badge {
    position: absolute;
    top: 8px; left: 8px;
    background: var(--app-accent);
    color: #fff;
    font-size: .68rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: var(--app-r-pill);
    letter-spacing: .02em;
}

.app-product-body {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
}
.app-product-vendor {
    font-size: .7rem;
    font-weight: 700;
    color: var(--app-text-faint);
    text-transform: uppercase;
    letter-spacing: .03em;
}
.app-product-title {
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--app-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.3em;                     /* keeps prices on one line across the row */
}
.app-product-price {
    display: flex;
    align-items: baseline;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: auto;
}
.app-product-price .now { font-size: 1.05rem; font-weight: 800; color: var(--app-text); }
.app-product-price .was { font-size: .8rem; color: var(--app-text-faint); text-decoration: line-through; }
.app-product-price .off { font-size: .75rem; font-weight: 800; color: var(--app-green); }

.app-rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--app-green);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 6px;
}

/* ==============================================================================================
   BANNER
   ============================================================================================== */

.app-banner {
    border-radius: var(--app-r-card);
    overflow: hidden;
    background: var(--app-surface-alt);
    aspect-ratio: 16 / 7;
}
@media (min-width: 992px) { .app-banner { aspect-ratio: 16 / 6; } }
.app-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ==============================================================================================
   STICKY PURCHASE BAR  -  the app's bottom action row on product pages
   ============================================================================================== */

.app-buybar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1035;
    display: flex;
    gap: 10px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: var(--app-surface);
    border-top: 1px solid var(--app-border);
    box-shadow: 0 -2px 12px rgba(16, 24, 40, .06);
}
.app-buybar .app-btn { flex: 1 1 0; }

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

.app-empty { text-align: center; padding: 48px 20px; color: var(--app-text-muted); }
.app-empty i { font-size: 2.5rem; color: var(--app-text-faint); margin-bottom: 12px; display: block; }
.app-empty h5 { font-weight: 700; color: var(--app-text); margin-bottom: 6px; }

/* ==============================================================================================
   SKELETON  -  shown while a section loads, so the page does not jump
   ============================================================================================== */

.app-skel {
    background: linear-gradient(90deg, var(--app-surface-alt) 25%, #E9ECF1 37%, var(--app-surface-alt) 63%);
    background-size: 400% 100%;
    animation: app-skel 1.3s ease-in-out infinite;
    border-radius: var(--app-r-control);
}
@keyframes app-skel { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

@media (prefers-reduced-motion: reduce) {
    .app-skel { animation: none; }
    .app-product, .app-cat-art, a.app-card, .app-card-tap { transition: none; }
}