/* ==========================================================================
   soplis-fixes.css — corrections, loaded last

   This file does NOT restructure your CSS. Your page-level <style> blocks
   stay exactly where they are — 649 of your inline rules are page-specific
   and belong in the page.

   What this fixes is the 337 rules that are the SAME chrome pasted into
   15–16 files, plus values that are measurably wrong. It loads after
   styles.css and soplis.css so it wins without you editing them.

   As you migrate a page, delete that page's copy of the chrome rules.
   Nothing breaks while both exist.
   ========================================================================== */

:root {
  /* Your logo is #6d28d9 and your stylesheets are #7c3aed. Those are
     violet-700 and violet-600 — the same hue, two steps apart. They were
     never in conflict; Tailwind's stock #9333ea was the outlier. */
  --sop-brand: #7c3aed;
  --sop-brand-strong: #6d28d9;

  /* Six named layers. You had eighteen values from 1 to 9999, which is why
     the mega menu at z-60 rendered behind the bottom nav at z-900. */
  --z-sticky: 100;
  --z-float: 200;
  --z-dropdown: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;
}

/* --- contrast ------------------------------------------------------------
   Measured against white. WCAG AA needs 4.5:1 for body text.
   ------------------------------------------------------------------------ */

/* was #9aa1ad at 2.60:1 — failed */
.soplis-bottom-nav a,
.soplis-bottom-nav a span {
  color: #6b7280;          /* 4.83:1 */
  font-size: 11px;         /* was 10px; 11px is the floor */
}
.soplis-bottom-nav a.active,
.soplis-bottom-nav a.active span { color: var(--sop-brand); }

/* was #9ca3af at 2.54:1 */
.sop-faint, .text-faint { color: #6b7280; }

/* amber at 2.15:1 is unreadable as text; darken it wherever it carries meaning */
.text-amber-500, .text-yellow-500 { color: #a16207; }   /* 4.92:1 */

/* --- layering ------------------------------------------------------------
   The menu must sit above the nav, not behind it.
   ------------------------------------------------------------------------ */

.soplis-bottom-nav      { z-index: var(--z-sticky); }
.cart-float-btn,
.assistant-btn-modern   { z-index: var(--z-float); }
.sop-mega-dd,
.mega-menu-dropdown,
.profile-dropdown       { z-index: var(--z-dropdown); }

/* --- the floating stack --------------------------------------------------
   Bottom nav 0–62px, assistant 84–144px, cart 150–206px: three layers up
   the right edge, ~200px of thumb zone. The assistant belongs in the
   header; until it moves, at least stop them stacking.
   ------------------------------------------------------------------------ */

.cart-float-btn {
  bottom: calc(78px + env(safe-area-inset-bottom)) !important;
  right: 16px !important;
}
.assistant-btn-modern { display: none; }   /* move it into the header instead */

/* --- touch targets -------------------------------------------------------
   WCAG 2.2 Target Size (Minimum) is 44x44. Extend the target, not the icon.
   ------------------------------------------------------------------------ */

.soplis-bottom-nav a { min-height: 44px; }
button, .btn, [role="button"] { min-height: 44px; }
button.icon-only, .icon-btn {
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* --- focus --------------------------------------------------------------
   soplis.css defines a focus ring; nothing uses it because those rules were
   never applied. This makes it real.
   ------------------------------------------------------------------------ */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--sop-brand);
  outline-offset: 2px;
  border-radius: 6px;
}

/* --- typography ---------------------------------------------------------
   Your section headings are text-base — 16px, identical to body copy — so
   only the coloured band signals that a section began.
   ------------------------------------------------------------------------ */

h1 { font-family: 'Syne', system-ui, sans-serif; letter-spacing: -0.022em; }
h2 { font-family: 'Syne', system-ui, sans-serif; letter-spacing: -0.020em; }
section > h2, .section-title {
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
}

/* Prices, quantities, distances and ratings must align down a column. */
.price, .soplis-card-price, .amount, [data-price] {
  font-variant-numeric: tabular-nums;
}

/* --- the card -----------------------------------------------------------
   Your .soplis-card is good. On bg-gray-50 a 4% shadow leaves the edge
   undefined, and the one-line truncate cuts Portuguese product names
   mid-word. Two lines, reserved, so the grid cannot jump.
   ------------------------------------------------------------------------ */

.soplis-card, .product-card, .item-card, .job-card, .service-card, .shop-card {
  border: 1px solid #e9e6ef;
}
.soplis-card-title, .product-card .title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 40px;
  white-space: normal;      /* overrides Tailwind's `truncate` */
  text-overflow: clip;
}

/* --- hero ---------------------------------------------------------------
   The four-stop purple→fuchsia→pink→rose gradient puts text-purple-100 at
   roughly 2:1 on the rose end. Two stops, both in the brand family.
   ------------------------------------------------------------------------ */

.hero-gradient, .sop-hero {
  background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
}
.hero-gradient .text-purple-100,
.sop-hero .text-purple-100 { color: rgba(255, 255, 255, 0.88); }

/* --- motion -------------------------------------------------------------- */

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