/**
 * SinghBros Mart — Webapp / PWA UI Enhancements
 * Applied on all pages to improve mobile & installed-app experience
 */

/* ══════════════════════════════════════════════════════════════
   1. LOGO FIX — always visible on white header
   ══════════════════════════════════════════════════════════════ */

/* Force logo to be visible: multiply blend removes white pixels */
.h-logo .logo-img,
.logo-img {
  mix-blend-mode: multiply;
}

/* If logo is transparent/dark already, mix-blend-mode multiply is safe */
/* Fallback: show text brand beside logo always (not just on error) */
.h-logo-text {
  display: flex !important;
}

/* Logo container — tighten on mobile */
@media (max-width: 768px) {
  .h-logo {
    gap: 8px;
    min-width: 0;
    max-width: calc(100vw - 180px);
  }
  .h-logo .logo-img {
    height: 38px;
    max-width: 120px;
    flex-shrink: 0;
  }
  /* Always show brand text on mobile for reliability */
  .h-logo-text {
    display: flex !important;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
    overflow: hidden;
  }
  .h-logo-name {
    font-size: 14px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .h-logo-tag {
    font-size: 8px !important;
    display: block;
  }
}

@media (max-width: 360px) {
  .h-logo .logo-img { display: none; }
  .h-logo-name { font-size: 15px !important; }
}

/* ══════════════════════════════════════════════════════════════
   2. STICKY HEADER — rock-solid on all browsers & iOS PWA
   ══════════════════════════════════════════════════════════════ */
.site-header {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  will-change: transform; /* GPU layer — prevents flicker on scroll */
}

/* Topbar scrolls away, header stays */
.topbar {
  position: relative;
  z-index: 999;
}

/* ══════════════════════════════════════════════════════════════
   3. MOBILE TOPBAR — hide clutter on phones
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .topbar { display: none !important; }

  /* Buy-intent strip — single compact line */
  .buy-intent-strip {
    font-size: 11px !important;
    padding: 6px 12px !important;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ══════════════════════════════════════════════════════════════
   4. BODY BOTTOM PADDING — never hidden behind bottom nav
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body {
    padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   5. MOBILE BOTTOM NAV — polish & reliability
   ══════════════════════════════════════════════════════════════ */
#mobile-bottom-nav {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background: rgba(255,255,255,.96) !important;
}

/* Active item gold underline */
.mbn-item.mbn-active .mbn-icon::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #7A1C1C;
}

/* ══════════════════════════════════════════════════════════════
   6. WHATSAPP FAB — z-index & safe area fix
   ══════════════════════════════════════════════════════════════ */
#whatsapp-fab {
  z-index: 998 !important;
}

@media (max-width: 768px) {
  #whatsapp-fab {
    bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
    right: 14px !important;
    width: 48px !important;
    height: 48px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   7. PRODUCT CARDS — better mobile layout
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* 2-column grid on small phones — tighter gap */
  .products-grid {
    gap: 10px !important;
    padding: 0 4px;
  }

  .product-card {
    border-radius: 10px;
  }

  /* Tighter card padding */
  .product-card-info,
  .product-info {
    padding: 8px 10px 10px !important;
  }

  .product-card-info h3,
  .product-card .product-name {
    font-size: 12px !important;
    line-height: 1.3;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .product-card-price,
  .price-current {
    font-size: 13px !important;
  }

  /* Full-width ATC button on mobile */
  .atc-btn, .add-to-cart-btn {
    width: 100%;
    font-size: 12px !important;
    padding: 8px 6px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   8. HERO SECTION — mobile improvements
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .hero-cinema {
    min-height: 380px !important;
    max-height: 70vh;
  }

  .hero-heading {
    font-size: clamp(22px, 6vw, 32px) !important;
    line-height: 1.2;
  }

  .hero-sub {
    font-size: 13px !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .hero-ctas {
    flex-direction: column;
    gap: 10px !important;
    align-items: flex-start;
  }

  .hero-ctas .btn-lg {
    padding: 11px 20px !important;
    font-size: 14px !important;
    width: auto;
  }

  .hero-cinema-content {
    padding: 20px 16px !important;
  }

  /* Install widget on hero */
  #sbm-install-widget {
    margin-top: 12px;
  }
  .sbm-install-btn {
    padding: 10px 16px !important;
    font-size: 13px;
  }
  .sbm-iw-text strong { font-size: 13px !important; }
  .sbm-iw-text small  { font-size: 10px !important; }
}

/* ══════════════════════════════════════════════════════════════
   9. TOUCH TARGETS — all interactive elements ≥ 44px
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .h-icon-btn,
  .mbn-item,
  .btn,
  .wishlist-btn,
  .atc-btn,
  .add-to-cart-btn {
    min-height: 44px;
    min-width: 44px;
  }

  /* Larger tap area for nav links */
  .mobile-nav-link,
  .mobile-accordion-btn {
    min-height: 52px !important;
    padding: 14px 16px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   10. CART & CHECKOUT — mobile optimised
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Cart: stack item row vertically */
  .cart-item {
    flex-direction: column;
    gap: 10px;
  }

  .cart-item-img {
    width: 100% !important;
    height: 160px !important;
    border-radius: 8px;
    object-fit: cover;
  }

  /* Checkout: single column */
  .checkout-grid,
  .checkout-layout {
    grid-template-columns: 1fr !important;
  }

  /* Sticky order summary at bottom on mobile */
  .order-summary-sidebar {
    position: sticky !important;
    bottom: 70px;
    background: #fff;
    z-index: 10;
    border-top: 2px solid #e0d5c0;
    box-shadow: 0 -4px 20px rgba(0,0,0,.08);
    border-radius: 12px 12px 0 0;
    padding: 14px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   11. SEARCH BAR — mobile full-width fix
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .h-search-form {
    width: 100% !important;
    min-width: 0;
  }
  .h-search-input {
    min-width: 0;
    font-size: 16px !important; /* prevents iOS zoom on focus */
  }
}

/* ══════════════════════════════════════════════════════════════
   12. PAGE TRANSITIONS — smooth feel
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  main {
    animation: sbm-fadein .25s ease;
  }
  @keyframes sbm-fadein {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* ══════════════════════════════════════════════════════════════
   13. BACK TO TOP — floating button on scroll
   ══════════════════════════════════════════════════════════════ */
#sbm-back-top {
  position: fixed;
  bottom: calc(76px + env(safe-area-inset-bottom, 0px));
  left: 14px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(122,28,28,.85);
  color: #fff;
  border: none;
  font-size: 18px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 997;
  box-shadow: 0 2px 12px rgba(0,0,0,.2);
  transition: opacity .2s, transform .2s;
  -webkit-tap-highlight-color: transparent;
}
#sbm-back-top.visible {
  display: flex;
  animation: sbm-fadein .2s ease;
}
#sbm-back-top:active { transform: scale(.9); }

@media (min-width: 769px) {
  #sbm-back-top {
    left: auto;
    right: 80px;
    bottom: 24px;
  }
}

/* ══════════════════════════════════════════════════════════════
   13b. MOBILE ATC BAR — push above bottom nav
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .mobile-atc-bar {
    bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 500 !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   14. PRODUCT PAGE — mobile layout
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .product-layout {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  .product-gallery {
    position: relative !important;
    top: auto !important;
  }

  .product-main-img {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: 10px;
  }

  /* Sticky ATC on product page */
  .product-sticky-atc {
    position: fixed;
    bottom: calc(62px + env(safe-area-inset-bottom, 0px));
    left: 0; right: 0;
    background: #fff;
    border-top: 1px solid #e0d5c0;
    padding: 10px 16px;
    z-index: 500;
    display: flex;
    gap: 10px;
    box-shadow: 0 -2px 12px rgba(0,0,0,.08);
  }

  .product-sticky-atc .atc-btn {
    flex: 1;
    min-height: 48px !important;
    font-size: 15px !important;
    font-weight: 700;
  }
}

/* ══════════════════════════════════════════════════════════════
   15. PWA STANDALONE MODE — extra polish
   ══════════════════════════════════════════════════════════════ */
@media (display-mode: standalone) {
  /* Extra top padding for PWA status bar on iPhone */
  .site-header {
    padding-top: env(safe-area-inset-top, 0px);
  }

  /* Hide topbar in PWA — saves vertical space */
  .topbar,
  .buy-intent-strip {
    display: none !important;
  }

  /* Make header brand area taller to compensate */
  .header-row-1 {
    padding: 12px 0 !important;
  }

  /* Slightly larger logo in standalone */
  .h-logo .logo-img {
    height: 44px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   16. TOAST NOTIFICATIONS — better mobile positioning
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .toast,
  .sbm-toast {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    left: 12px !important;
    right: 12px !important;
    max-width: none !important;
    text-align: center;
  }
}

/* ══════════════════════════════════════════════════════════════
   17. NEWSLETTER — mobile compact
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .newsletter {
    padding: 28px 16px !important;
  }
  .newsletter h2 {
    font-size: 18px !important;
  }
  .newsletter-form {
    flex-direction: column;
    gap: 10px;
  }
  .newsletter-form input,
  .newsletter-form button {
    width: 100% !important;
    border-radius: 8px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   18. SCROLLBAR — thin, brand coloured
   ══════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #f0ebe2; }
::-webkit-scrollbar-thumb { background: #7A1C1C; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #C9A84C; }

/* ══════════════════════════════════════════════════════════════
   19. SELECTION COLOUR — on-brand
   ══════════════════════════════════════════════════════════════ */
::selection { background: #C9A84C; color: #1C1A18; }
::-moz-selection { background: #C9A84C; color: #1C1A18; }

/* ══════════════════════════════════════════════════════════════
   20. FOCUS STYLES — accessible but on-brand
   ══════════════════════════════════════════════════════════════ */
:focus-visible {
  outline: 2px solid #C9A84C;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ══════════════════════════════════════════════════════════════
   21. PAGE HERO / DARK BANNERS — text always visible
   ══════════════════════════════════════════════════════════════ */
.page-hero,
.page-banner,
.page-header-dark {
  color: #fff !important;
}

/* Breadcrumbs on dark backgrounds — force white text + links */
.page-hero .breadcrumb,
.page-hero .breadcrumbs,
.page-hero nav[aria-label="Breadcrumb"],
.page-hero ol,
.page-hero li,
.page-hero li a,
.page-hero li span,
.page-banner .breadcrumb a,
.page-banner .breadcrumbs a {
  color: rgba(255,255,255,.75) !important;
}
.page-hero .breadcrumb a:hover,
.page-hero .breadcrumbs a:hover {
  color: #fff !important;
}
/* Separator arrows/slashes in breadcrumbs */
.page-hero .breadcrumb-sep,
.page-hero li + li::before {
  color: rgba(255,255,255,.4) !important;
}

/* ══════════════════════════════════════════════════════════════
   22. MOBILE BOTTOM NAV — guaranteed visibility
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #mobile-bottom-nav {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    background: rgba(255,255,255,.97) !important;
    border-top: 1px solid #e0d5c0 !important;
    box-shadow: 0 -2px 16px rgba(0,0,0,.1) !important;
  }

  /* Ensure body clears the nav */
  body {
    padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   23. PWA INSTALL CHIP — above bottom nav, above WhatsApp
   ══════════════════════════════════════════════════════════════ */
#sbm-install-chip {
  bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 9000 !important;
}

@media (min-width: 769px) {
  #sbm-install-chip {
    bottom: 24px !important;
  }
  #sbm-install-banner {
    bottom: 24px !important;
    left: auto !important;
    right: 20px !important;
    max-width: 380px !important;
  }
}