/* ======================================================================
   STOREFRONT — PHONE APP SHELL (< 768px only; desktop is untouched)
   Compact header row (logo · search · theme · cart), category chips,
   home sections (banner, category grid, product rows) and the bottom nav.
   Loaded after public-theme.css by views/public_header.php with
   media="(max-width: 767px)". Colour tokens (--app-*, --tint-*, --ink-*)
   are defined at the end of public-theme.css, with dark-mode values.
   Backups of the files before this change: /home/paikmalkart/backups/mobile-app-ui-20261022
   ====================================================================== */
@media (max-width: 767px) {

/* ---------- Header: one compact row ---------- */
.site-header {
    border-bottom: 0;
    box-shadow: 0 1px 0 var(--app-line), 0 8px 18px -14px rgba(16, 24, 40, .35);
}
.site-header .header-top {
    position: relative; /* the search dropdown hangs off this row */
    padding: 7px 0;
    gap: 8px;
}
.site-header .logo-wrap img { height: 30px; }
.site-header .header-actions { gap: 6px; }

/* Search: a real field in the row — tap and type, no extra toggle */
.site-header .header-top .mobile-search-bar {
    position: static;
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    height: 38px;
    padding: 0 0 0 11px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: var(--app-track);
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.site-header .header-top .mobile-search-bar:focus-within {
    background: var(--bg-white);
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(243, 99, 15, .14);
}
.site-header .mobile-search-bar .pk-msearch-ico {
    flex-shrink: 0;
    font-size: 16px;
    color: var(--text-muted);
    pointer-events: none;
}
.site-header .header-top .mobile-search-bar input,
[data-theme="dark"] .site-header .header-top .mobile-search-bar input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 10px 0 7px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-dark);
    font-size: 16px; /* 16px keeps iPhone Safari from zooming in on focus */
    text-overflow: ellipsis;
    outline: none;
    -webkit-appearance: none;
            appearance: none;
}
.site-header .header-top .mobile-search-bar input::-webkit-search-decoration { display: none; }
.site-header .header-top .mobile-search-bar input::placeholder {
    font-size: 13.5px;
    color: var(--text-muted);
    opacity: 1;
}
.site-header .header-top #mobileSearchDropdown {
    top: 100%;
    left: -12px;
    right: -12px;
    margin-top: 0;
    max-height: min(70vh, 520px);
    border-width: 1px 0;
    border-radius: 0 0 16px 16px;
}

.site-header .theme-toggle {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--app-track);
    font-size: 18px;
}

/* Cart: same 38px height and corner as the search field */
.site-header .header-cart-btn {
    flex-shrink: 0;
    height: 38px;
    gap: 6px;
    padding: 0 12px 0 10px !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 14px -8px rgba(22, 163, 74, .75);
}
.site-header .header-cart-btn i { font-size: 17px; }
.site-header .header-cart-btn .cart-badge {
    min-width: 19px;
    height: 19px;
    line-height: 19px;
    font-size: 11px;
}
.site-header .header-cart-btn .cart-value-mobile { margin-left: 0; font-size: 13.5px; font-weight: 800; }

/* ---------- Category chips under the header ---------- */
.site-header .category-nav {
    background: transparent;
    border-bottom: 0;
}
.site-header .category-nav-wrap.container { padding: 0; }
.site-header .category-nav-inner {
    gap: 6px;
    padding: 0 12px 9px;
    scroll-padding: 0 12px;
}
.site-header .category-nav-inner a {
    height: 31px;
    padding: 0 13px;
    gap: 5px;
    border: 0;
    border-radius: 999px;
    background: var(--app-track);
    color: var(--app-ink-2);
    font-size: 12.5px;
    font-weight: 600;
    -webkit-tap-highlight-color: transparent;
}
.site-header .category-nav-inner a:hover { background: var(--app-track); color: var(--app-ink-2); }
.site-header .category-nav-inner a.active,
.site-header .category-nav-inner a.active:hover {
    background: var(--orange);
    color: #fff;
}
.site-header .category-nav-inner a i { font-size: 13px; }
.site-header .category-nav-wrap.can-left .category-nav-inner {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px);
            mask-image: linear-gradient(to right, transparent 0, #000 28px);
}
.site-header .category-nav-wrap.can-right .category-nav-inner {
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 28px);
            mask-image: linear-gradient(to left, transparent 0, #000 28px);
}
.site-header .category-nav-wrap.can-left.can-right .category-nav-inner {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}

/* ---------- Banner carousel: dots ride on the banner ---------- */
.promo-carousel-section { padding: 10px 0 0; }
.promo-carousel { border-radius: 14px; }
.promo-slide { padding: 0 2px; }
.promo-slide-img { border-radius: 14px; }
.promo-dots {
    position: absolute;
    left: 50%;
    bottom: 8px;
    z-index: 2;
    transform: translateX(-50%);
    gap: 4px;
    padding: 4px 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .28);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
}
.promo-dots:empty,
.promo-dots:has(.promo-dot:only-child) { display: none; }
.promo-dot {
    width: 6px;
    height: 6px;
    background: rgba(255, 255, 255, .55);
}
.promo-dot.active {
    width: 16px;
    border-radius: 3px;
    background: #fff;
}

/* ---------- Section headings ---------- */
.categories-section .section-title,
.products-section .section-title { margin-bottom: 10px; }
.categories-section .section-title h2,
.products-section .section-title h2 {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -.01em;
}
.products-section .section-title a {
    flex-shrink: 0;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--tint-orange);
    color: var(--ink-orange);
    font-size: 11.5px;
    font-weight: 700;
    -webkit-tap-highlight-color: transparent;
}
.products-section .section-title a i { font-size: 10px; }

/* ---------- Shop by category: every category at a glance ---------- */
.categories-section { padding: 14px 0 4px; }
.categories-section .category-scroll-wrap {
    overflow: visible;
    margin: 0;
    padding: 0;
    background: none;
}
.categories-section .category-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px 6px;
    min-width: 0;
}
.categories-section .category-card,
[data-theme="dark"] .categories-section .category-card {
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0;
    overflow: visible;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
}
.categories-section .category-card::before { display: none; }
.categories-section .category-card:hover { transform: none; box-shadow: none; }
.categories-section .category-icon {
    width: 100%;
    max-width: 58px;
    height: auto;
    aspect-ratio: 1;
    margin: 0;
    border-radius: 16px;
    font-size: 24px;
    transition: transform .15s ease;
}
.categories-section .category-card:active .category-icon { transform: scale(.92); }
.categories-section .category-card:nth-child(4n+1) .category-icon { background: var(--tint-orange); color: var(--ink-orange); }
.categories-section .category-card:nth-child(4n+2) .category-icon { background: var(--tint-green);  color: var(--ink-green); }
.categories-section .category-card:nth-child(4n+3) .category-icon { background: var(--tint-blue);   color: var(--ink-blue); }
.categories-section .category-card:nth-child(4n+4) .category-icon { background: var(--tint-purple); color: var(--ink-purple); }
.categories-section .category-card h3 {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--app-ink-2);
    text-align: center;
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.categories-section .category-card span { display: none; }

/* ---------- Product cards (home rows, category, search, "You may also like") ---------- */
/* Tapping anywhere on a card adds it (public_footer.php); the photo dips as feedback. */
.product-card {
    border-color: var(--app-line);
    border-radius: 14px;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
}
.product-card:hover { transform: none; box-shadow: none; }
.product-card .product-img img { transition: transform .15s ease; }
.product-card:active .product-img img { transform: scale(.94); }
.product-add-btn {
    width: auto;
    min-height: 34px;
    margin: 0 8px 8px;
    padding: 0 8px;
    overflow: hidden;
    border-radius: 10px;
    font-size: 12px;
    -webkit-tap-highlight-color: transparent;
}
.product-add-btn.in-cart { min-height: 34px; padding: 0; }
.product-add-btn .card-qty-minus,
.product-add-btn .card-qty-plus { width: 36px; min-height: 34px; }

/* Home rows */
.products-section { padding: 12px 0 4px; }
/* Bleed to the screen edge exactly: the phone gutter is 12px, not the 16px the
   base rule assumes (that made the whole page 4px wider than the phone).
   Also covers "You may also like" on product pages. */
.products-scroll-wrap { margin: 0 -12px; padding: 0 12px; scroll-padding: 0 12px; }
.products-section .products-row { gap: 10px; }
.products-section .product-card { width: 142px; }
.products-section .product-img { height: 116px; }

/* ---------- Category and search pages: three to a row ---------- */
.archive-section,
.search-section { padding: 10px 0 16px; }
.archive-header {
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
}
.archive-header h1 {
    min-width: 0;
    font-size: 18px;
    line-height: 1.25;
    letter-spacing: -.01em;
}
.archive-header span {
    flex-shrink: 0;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--app-track);
    color: var(--app-ink-2);
    font-size: 11.5px;
    font-weight: 600;
}
.archive-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.archive-grid .product-card { border-radius: 12px; }
.archive-grid .product-img { height: auto; min-height: 0; aspect-ratio: 1; padding: 6px; overflow: hidden; }
.archive-grid .product-img img { width: 100%; height: 100%; max-height: none; object-fit: contain; }
.archive-grid .product-badge { font-size: 8.5px; padding: 2px 5px; top: 5px; left: 5px; }
.archive-grid .product-info { padding: 6px 8px 6px; }
.archive-grid .product-info h4 { font-size: 11.5px; line-height: 1.3; min-height: 2.6em; margin-bottom: 4px; }
/* price on top, pack size under it: there is no room side by side */
.archive-grid .product-price { flex-direction: column; align-items: flex-start; gap: 3px; }
.archive-grid .product-price-main { min-height: 0; flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 0 4px; }
.archive-grid .product-price .rate { font-size: 14px; }
.archive-grid .product-price .cost { font-size: 10.5px; }
.archive-grid .product-variant-hint {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
}
.archive-grid .product-add-btn {
    min-height: 30px;
    margin: 0 6px 6px;
    padding: 0 4px;
    gap: 3px;
    border-radius: 9px;
    font-size: 11px;
}
.archive-grid .product-add-btn.in-cart { min-height: 30px; padding: 0; }
.archive-grid .product-add-btn .card-qty-minus,
.archive-grid .product-add-btn .card-qty-plus { width: 30px; min-height: 30px; font-size: 12px; }
.archive-grid .product-add-btn .card-qty-num { min-width: 20px; font-size: 13px; }

/* search page's own search box: same size as the header field */
.search-page-bar { margin-bottom: 12px; }
.search-page-bar input { padding: 10px 48px 10px 16px; border-width: 1px; border-radius: 12px; }
.search-page-bar button { width: 34px; height: 34px; right: 5px; border-radius: 10px; font-size: 14px; }

/* ---------- Bottom navigation ---------- */
body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
/* body padding already clears the nav; keep extra room only while the cart bar floats above it */
.site-footer { padding-bottom: 20px; }
body.pk-gcb-visible .site-footer { padding-bottom: 80px; }
/* No floating back-to-top on phones (owner's call, 2026-10-22); desktop keeps it */
.back-to-top,
.back-to-top.visible { display: none; }
.mobile-bottom-nav {
    padding: 4px 6px calc(4px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--app-line);
    box-shadow: 0 -8px 20px -14px rgba(16, 24, 40, .3);
}
.mobile-bottom-nav a {
    min-height: 48px;
    padding: 0 2px;
    gap: 2px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-muted);
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
            user-select: none;
}
.mobile-bottom-nav a i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 28px;
    border-radius: 999px;
    font-size: 20px;
    transition: background-color .2s ease, transform .15s ease;
}
.mobile-bottom-nav a.active { color: var(--ink-orange); font-weight: 800; }
.mobile-bottom-nav a.active i { background: var(--tint-orange); }
.mobile-bottom-nav a:active i { transform: scale(.9); }
.mobile-bottom-nav .mobile-cart-badge {
    top: 0;
    transform: translateX(19px);
    box-shadow: 0 0 0 2px var(--bg-white);
}

}

/* Wider phones and small tablets: room for every category on two rows */
@media (min-width: 520px) and (max-width: 767px) {
    .categories-section .category-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}

/* Very narrow phones: two to a row on category and search pages */
@media (max-width: 359px) {
    .archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Policy and info pages (privacy, terms, shipping, returns, photo credits): no 80px gap under the header */
@media (max-width: 767px) {
    .policy-section { padding: 12px 0 24px; }
    .policy-card { padding: 18px 14px; }
}