/* ============================================================
   Nobar Market — responsive & device polish
   Loaded after site.css. Targets small phones, tablets, touch
   devices, landscape phones and accessibility needs.
   ============================================================ */

/* ---------- modern browsers ---------- */
@supports (min-height: 100dvh) {
  .hero { min-height: 100dvh; }
  .drawer { max-height: 100dvh; }
}

/* ---------- prevent horizontal scroll everywhere ---------- */
html, body { overflow-x: hidden; max-width: 100%; }
img, video, svg, canvas { max-width: 100%; height: auto; }
#app { overflow-x: clip; }

/* ---------- touch targets (Apple HIG / Material both ask 44px) ---------- */
@media (pointer: coarse) {
  .icon-btn, .quick-add, .scroll-top, .pass-toggle, .slide-arrows button,
  .video-play, .menu-toggle, .mobile-admin-menu, .top-icon, .row-actions button,
  .cart-item .qty button, .qty button {
    min-width: 44px;
    min-height: 44px;
  }
  /* Keep the visual size but expand the hit area */
  .icon-btn { position: relative; }
  .icon-btn::after {
    content: ''; position: absolute; inset: -8px;
  }
  /* Pill filters need room for fingers */
  .category-pills .pill,
  .account-tabs .pill,
  .range-tabs button { padding-block: 10px; }
}

/* ---------- very small phones (320-400px) ---------- */
@media (max-width: 400px) {
  .container { width: calc(100% - 24px); }
  .site-nav { padding: 0 8px 0 12px; gap: 6px; }
  .brand strong { font-size: 17px; }
  .brand-mark { width: 32px; height: 32px; }
  .announcement { font-size: 9px; padding-inline: 8px; }
  .nav-actions { gap: 2px; }

  /* Two columns is too tight at 320px for product cards with price + rating */
  .product-grid { grid-template-columns: 1fr; gap: 26px; }
  .product-image { margin-bottom: 9px; }
  .product-name { font-size: 13px; }
  .product-price { font-size: 13px; }

  .category-rail { grid-template-columns: 1fr; gap: 12px; }
  .category-tile { min-height: 165px; }

  .trust-grid { grid-template-columns: 1fr; gap: 26px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-brand { grid-column: auto; }

  .hero h1 { font-size: clamp(34px, 11.5vw, 48px); }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; justify-content: center; }

  .detail-info h1 { font-size: 32px; }
  .form-section h2 { font-size: 32px; }
  .form-card { padding: 18px 15px; }
  .form-row { grid-template-columns: 1fr; }

  .auth-form { padding: 26px 16px; }
  .auth-image { min-height: 210px; padding: 20px; }

  .page-hero { padding: 128px 0 46px; }
  .page-hero h1 { font-size: clamp(34px, 11vw, 52px); max-width: 100%; }
  .page-hero .hero-image { display: none; }

  .drawer { width: 100%; }
  .cart-summary .btn { width: 100%; justify-content: center; }

  .kpi-grid { grid-template-columns: 1fr; }
  .kpi { padding: 14px; }
  .kpi > strong { font-size: 21px; }

  .story-stats { grid-template-columns: 1fr; gap: 16px; }
  .newsletter-form { flex-direction: column; align-items: stretch; }
  .newsletter-form .btn { width: 100%; }
}

/* ---------- short phones (landscape) ---------- */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: auto; padding: 96px 0 46px; }
  .hero-content { padding-block: 22px; }
  .hero-meta { position: static; margin-top: 22px; }
  .page-hero { padding: 104px 0 34px; }
  .auth-wrap { padding: 100px 12px 24px; }
  .auth-card { min-height: 0; }
  .auth-image { min-height: 200px; }
  /* Let the drawer scroll inside itself rather than off-screen */
  .drawer { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .drawer-head { position: sticky; top: 0; background: var(--paper); z-index: 2; }
}

/* ---------- tablets in portrait ---------- */
@media (min-width: 721px) and (max-width: 1024px) {
  /* Nav links are cramped here; switch to the mobile drawer earlier */
  .nav-links { display: none; }
  .menu-toggle { display: grid; }
  .product-grid { grid-template-columns: repeat(2, 1fr); gap: 26px 16px; }
  .course-grid, .category-large-grid, .promo-grid { grid-template-columns: repeat(2, 1fr); }
  .tier-grid { grid-template-columns: repeat(2, 1fr); }
  .detail-grid, .form-section { gap: 28px; }
  .detail-info h1 { font-size: 40px; }
  .account-grid { grid-template-columns: 1fr; gap: 24px; }
  .account-side { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; text-align: left; }
  .account-side .avatar { grid-row: span 2; }
  .account-side h2 { margin: 0; font-size: 19px; }
  .account-side > span { margin: 0; }
}

/* ---------- large phones / small tablets ---------- */
@media (min-width: 401px) and (max-width: 540px) {
  .product-name, .product-price { font-size: 12.5px; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- wide screens ---------- */
@media (min-width: 1600px) {
  .container, .site-nav { width: min(1320px, calc(100% - 64px)); }
  body { font-size: 16px; }
}
@media (min-width: 2000px) {
  /* Cap growth so text does not become unreadable on 4K monitors */
  body { font-size: 17px; }
  .container, .site-nav { width: min(1400px, calc(100% - 64px)); }
}

/* ---------- hover-capable pointers only ---------- */
/* Avoids "sticky hover" on touch devices where :hover sticks after a tap */
@media (hover: hover) and (pointer: fine) {
  .product-card:hover .product-image img { transform: scale(1.05); }
  .category-tile:hover img { transform: scale(1.06); }
  .promo-card:hover img { transform: scale(1.06); }
  .category-large:hover img { transform: scale(1.05); }
}

/* ---------- keyboard accessibility ---------- */
:focus-visible {
  outline: 2px solid var(--leaf);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Remove the default outline only where :focus-visible is supported */
:focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: absolute; top: -100px; right: 16px; z-index: 999;
  background: var(--leaf-dark); color: #fff;
  padding: 12px 20px; border-radius: 0 0 10px 10px;
  font-size: 13px; font-weight: 700;
  transition: top .2s;
}
.skip-link:focus { top: 0; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
  .hero-bg, .product-image img, .category-tile img, .promo-card img { transition: none !important; }
  .video-overlay { display: none; }
}

/* ---------- forced colors / high contrast ---------- */
@media (forced-colors: active) {
  .btn, .input, .select, .pill, .drawer, .admin-card { border: 1px solid CanvasText; }
  .slide-dot.active { outline: 2px solid Highlight; }
}

/* ---------- print ---------- */
@media print {
  .site-nav, .announcement, .scroll-top, .drawer, .drawer-backdrop,
  .mobile-menu, .toast, .footer-bottom, .newsletter, .video-section,
  .hero-ctas, .product-add, .nav-actions { display: none !important; }
  body { background: #fff; color: #000; }
  .container { width: 100%; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; color: #555; }
  .order-row, .admin-card { break-inside: avoid; border: 1px solid #ccc; }
}

/* ---------- safe areas (notched iPhones) ---------- */
@supports (padding: max(0px)) {
  .announcement { padding-inline: max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-left)); }
  .site-footer { padding-bottom: env(safe-area-inset-bottom); }
  .drawer { padding-bottom: env(safe-area-inset-bottom); }
  .cart-summary { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  .scroll-top { bottom: calc(20px + env(safe-area-inset-bottom)); }
  .admin-content { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
}

/* ---------- RTL/LTR sanity: keep numeric prices LTR ---------- */
.price, .product-price, .kpi > strong, .summary-line > span:last-child,
.money, td > strong { direction: ltr; unicode-bidi: isolate; text-align: right; }
.kpi > strong { text-align: right; }
.tier-points { direction: rtl; }