/* ==========================================================================
   QRBELL Store — Base
   Reset, document defaults, typography, focus, accessibility primitives.
   Loaded after Bootstrap so it can correct Bootstrap's defaults.
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Offset for the sticky header when jumping to an anchor */
  scroll-padding-top: calc(var(--header-height-mobile) + var(--space-4));
}

@media (min-width: 992px) {
  html { scroll-padding-top: calc(var(--header-height-desktop) + var(--space-4)); }
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Nothing may cause sideways scroll — spec §73 */
  overflow-x: hidden;
}

/* Pages with the mobile bottom nav reserve space so content is never hidden
   behind it, including the iOS home indicator. Removed at lg where the bar
   is not rendered. */
body.has-bottomnav {
  padding-bottom: calc(var(--bottomnav-height) + var(--safe-bottom));
}
body.has-bottomnav.has-stickybar {
  padding-bottom: calc(var(--bottomnav-height) + var(--stickybar-height) + var(--safe-bottom));
}

@media (min-width: 992px) {
  body.has-bottomnav,
  body.has-bottomnav.has-stickybar { padding-bottom: 0; }
}

/* When a modal or sheet is open */
body.is-locked { overflow: hidden; }


/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  /* Long product names must not blow out narrow viewports */
  overflow-wrap: break-word;
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-md); }
h6 { font-size: var(--text-base); }

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

small { font-size: var(--text-xs); }

strong, b { font-weight: var(--weight-semibold); }

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--transition-base);
}
a:hover { color: var(--color-link-hover); text-decoration: underline; }

ul, ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
ul:last-child, ol:last-child { margin-bottom: 0; }

hr {
  height: 1px;
  margin: var(--space-6) 0;
  border: 0;
  background: var(--color-border);
  opacity: 1;
}

code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; }

/* Indian rupee amounts — tabular figures so column totals line up */
.qb-amount,
.qb-tabular { font-variant-numeric: tabular-nums; }


/* --------------------------------------------------------------------------
   Media
   -------------------------------------------------------------------------- */

img, svg, video, canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Consistent aspect ratios — spec §82 */
.qb-ratio-1x1   { aspect-ratio: 1 / 1;   object-fit: cover; }
.qb-ratio-4x3   { aspect-ratio: 4 / 3;   object-fit: cover; }
.qb-ratio-16x9  { aspect-ratio: 16 / 9;  object-fit: cover; }
.qb-ratio-3x4   { aspect-ratio: 3 / 4;   object-fit: cover; }


/* --------------------------------------------------------------------------
   Forms — base only; the styled controls live in components.css
   -------------------------------------------------------------------------- */

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

button { cursor: pointer; background: none; border: none; padding: 0; }
button:disabled { cursor: not-allowed; }

/* 16px on mobile inputs prevents iOS Safari from zooming on focus */
input, select, textarea { font-size: var(--text-md); }

textarea { resize: vertical; }

/* Remove the number spinners — quantity uses explicit +/- buttons */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }


/* --------------------------------------------------------------------------
   Focus — visible, consistent, keyboard-only
   WCAG 2.4.7. :focus-visible so pointer users don't see rings on click.
   -------------------------------------------------------------------------- */

:focus { outline: none; }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-xs);
  position: relative;
  z-index: var(--z-base);
}

/* Elements that already own a radius keep it while focused */
.qb-btn:focus-visible,
.qb-input:focus-visible { border-radius: inherit; }


/* --------------------------------------------------------------------------
   Accessibility helpers
   -------------------------------------------------------------------------- */

.qb-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link — first focusable element on every page */
.qb-skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: var(--z-tooltip);
  padding: var(--space-3) var(--space-5);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-btn);
  box-shadow: var(--shadow-md);
  transform: translateY(-200%);
  transition: transform var(--transition-base);
}
.qb-skip-link:focus {
  transform: translateY(0);
  text-decoration: none;
  color: var(--color-on-primary);
}

/* Every interactive control clears the 44px touch minimum — spec §52 */
.qb-touch {
  min-width: var(--touch-min);
  min-height: var(--touch-min);
}


/* --------------------------------------------------------------------------
   Selection
   -------------------------------------------------------------------------- */

::selection {
  background: var(--color-primary-soft);
  color: var(--color-text);
}


/* --------------------------------------------------------------------------
   Scrollbars — slim, only where we scroll our own containers
   -------------------------------------------------------------------------- */

.qb-scroll-x {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

/* Horizontal rails snap so cards land cleanly — spec §9 */
.qb-snap-x {
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--gutter);
}
.qb-snap-x > * { scroll-snap-align: start; }

/* Hide the bar on touch rails without losing the scroll */
.qb-scroll-hide { scrollbar-width: none; -ms-overflow-style: none; }
.qb-scroll-hide::-webkit-scrollbar { display: none; }

.qb-scroll-x::-webkit-scrollbar { height: 6px; }
.qb-scroll-x::-webkit-scrollbar-track { background: transparent; }
.qb-scroll-x::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: var(--radius-pill);
}


/* --------------------------------------------------------------------------
   Reduced motion — honour the OS setting completely
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* --------------------------------------------------------------------------
   Print — orders and invoices are the realistic print targets
   -------------------------------------------------------------------------- */

@media print {
  .qb-header,
  .qb-bottomnav,
  .qb-stickybar,
  .qb-footer,
  .qb-no-print { display: none !important; }

  body { background: #fff; padding-bottom: 0; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}