/* ============================================================
 * Smile V2 — Universal Responsive Hardening
 * Source: design_handoff_smile_responsive_qa/FIXES_PATTERNS.md §1
 * Loaded FIRST so it sets a clean baseline before theme/component CSS.
 * Goals: no overflow-x, no iOS zoom, proper safe-areas, accessible motion.
 * ============================================================ */

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

/* HTML root: text-size-adjust, scroll-behavior, scrollbar */
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h, 64px) + 16px);
  scrollbar-gutter: stable;
}

/* Reduced motion: respect user preference */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* Body baseline */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

/* Images/media never break layout */
img, video, iframe, svg {
  max-width: 100%;
  height: auto;
}

/* Buttons & links: clean baseline */
button {
  touch-action: manipulation;
}
a {
  -webkit-tap-highlight-color: transparent;
}

/* Inputs: 16px minimum on mobile to prevent iOS zoom */
@media (max-width: 720px) {
  input, select, textarea {
    font-size: 16px;
  }
}

/* No horizontal overflow at body level (last-resort safety net) */
html, body {
  overflow-x: clip;
}

/* Safe area on body padding when content is full-bleed */
@supports (padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }
}

/* Touch targets: minimum 44x44 on any element with role=button or [data-tap] */
@media (pointer: coarse) {
  button, a[role="button"], [data-tap], .icon-btn, .qty-btn, .nav-link {
    min-height: 44px;
  }
}

/* Container max-width helper (handoff §2) */
.shell {
  max-width: var(--max-w, 1280px);
  margin-inline: auto;
  padding-left: max(20px, env(safe-area-inset-left, 20px));
  padding-right: max(20px, env(safe-area-inset-right, 20px));
}
@media (min-width: 720px) {
  .shell {
    padding-left: max(24px, env(safe-area-inset-left, 24px));
    padding-right: max(24px, env(safe-area-inset-right, 24px));
  }
}

/* Generic image-wrap with aspect ratio (handoff §6) */
.img-wrap {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--line-2);
  position: relative;
}
.img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Sticky sidebar pattern (handoff §7) */
@media (min-width: 960px) {
  .sticky-aside {
    position: sticky;
    top: calc(var(--nav-h, 64px) + 20px);
  }
}

/* Min-width 0 baseline for grid/flex children to allow shrink */
.grid > *,
.flex-wrap > * {
  min-width: 0;
}

/* Visually hidden helper (accessibility) */
.visually-hidden,
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* Focus visible baseline */
:focus-visible {
  outline: 2px solid var(--burgundy, #6B2C2C);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* ============================================================
   Category page mobile fixes
   ============================================================ */

/* Product grid: 1 column on small phones (<=520px) */
@media (max-width: 520px) {
  .smile-products,
  .products-grid .smile-products,
  .products-grid #category-products {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
}

/* 2 columns from 520px to ~720px */
@media (min-width: 521px) and (max-width: 720px) {
  .smile-products,
  .products-grid .smile-products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}

/* Sort / toolbar: allow wrap to prevent overflow */
.cat-toolbar,
.smile-toolbar {
  flex-wrap: wrap !important;
}
.cat-toolbar .right,
.smile-toolbar > * {
  min-width: 0;
}
.sort-select,
.cat-toolbar select,
.smile-toolbar select {
  max-width: 100%;
  min-width: 0;
}

/* Container width safety for category page on mobile */
@media (max-width: 720px) {
  .cat-hero .shell,
  .smile-listing-grid {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ============================================================
   QA Day 1 fixes — Hit targets <44px on mobile
   Source: Playwright audit + CLAUDE.md §4.1 (touch targets)
   ============================================================ */

@media (pointer: coarse), (max-width: 720px) {
  /* Header icon buttons (Mi cuenta, Favoritos, Carrito, Menú): 40 → 44 */
  .icon-btn,
  a.icon-btn,
  button.icon-btn {
    min-width: 44px;
    min-height: 44px;
  }

  /* Category pills (sub-cat chips): 36 → 44 */
  .cat-pill {
    min-height: 44px;
    padding: 0 18px;
    display: inline-flex;
    align-items: center;
  }

  /* Qty stepper +/- (was 36×36 from touchspin) */
  .btn.btn-touchspin,
  .js-touchspin,
  .qty-btn,
  .qty a, .qty button {
    min-width: 44px;
    min-height: 44px;
  }

  /* Color swatch on PDP - expand hit area via padding inside */
  .input-color,
  .product-variants .input-container .color {
    min-width: 44px;
    min-height: 44px;
  }

  /* Product card name link - expand hit area to full card */
  .product-miniature .product-name,
  .product-miniature .product-title {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* Section / row overflow at desktop (at_nova legacy sections wider than container) */
section.section,
section.section.tight,
.section > .row,
.section > .container > .row {
  max-width: 100%;
  overflow-x: hidden;
}

/* ============================================================
 * Skip link (a11y — WCAG 2.4.1)
 * Hidden by default; visible on keyboard focus.
 * Source: design_handoff_smile_responsive_qa/ACCESSIBILITY_CHECKLIST §2.4.1
 * ============================================================ */
.smile-skip-link {
  position: absolute;
  top: 0;
  left: 0;
  padding: 12px 16px;
  background: var(--burgundy, #6f1f3a);
  color: #fff;
  font: 600 14px/1.2 system-ui, sans-serif;
  text-decoration: none;
  border-radius: 0 0 8px 0;
  z-index: 100000;
  transform: translateY(-110%);
  transition: transform 0.18s ease;
}
.smile-skip-link:focus,
.smile-skip-link:focus-visible {
  transform: translateY(0);
  outline: 3px solid #fff;
  outline-offset: 2px;
}