/* -----------------------------
   STYLES (cleaned & reorganized)
   Sections: variables, base, utilities, components, partials
   Page-specific rules should live in page CSS (e.g. mercat.css)
   ----------------------------- */

/* 1) Variables & base */
:root {
  --color-forest:       #04202C;
  --color-evergreen:    #304040;
  --color-pine:         #5B7065;
  --color-fog:          #C9D1C8;

    /* Safe bottom spacing so fixed cart doesn't cover footer links */
    --cart-safe-bottom: 96px;
  --bg: var(--color-fog);
/* Ensure page content has enough bottom padding to avoid being covered
  by the fixed compact cart. Includes the device safe-area inset. */
main { padding-bottom: calc(var(--cart-safe-bottom) + env(safe-area-inset-bottom, 0px)); }

  --bs-border-radius:       16px;
  --bs-border-radius-sm:    16px;
  --bs-border-radius-lg:    16px;
  --bs-border-radius-xl:    16px;
  --bs-border-radius-xxl:   16px;
  --bs-border-radius-pill:  50rem;
}


html { scroll-behavior: smooth; }
body { background-color: var(--bg); }
main h2 { color: var(--color-evergreen); padding-inline: 12px; }
.container-fluid { max-width: 1320px; margin-inline: auto; }


/* 2) Utilities */
.bg-forest { background-color: var(--color-forest) !important; }
/* Utility: remove lateral page padding when needed (use class on wrapper) */
.full-bleed { padding-left: 0; padding-right: 0; }
.hidden { display: none !important; }
.btn-glass { display: inline-block; /* kept for compatibility; page-specific variant moved to index.css */ }
.btn-pine { background-color: var(--color-pine); border-color: var(--color-pine); color:#fff; font-weight:700; }
.btn-pine:hover, .btn-pine:focus { background-color: var(--color-evergreen); border-color: var(--color-evergreen); }

/* Outline variant: transparent background, pine border and text */
.btn-outline-pine{
  background-color: transparent;
  color: var(--color-pine);
  border: 1px solid var(--color-pine);
  font-weight:700;
}
.btn-outline-pine{
  border-radius: var(--bs-border-radius-pill);
  padding-inline: 1.25rem;
}
.btn-outline-pine:hover, .btn-outline-pine:focus{ background-color: rgba(91,112,101,0.06); color: var(--color-pine); }


/* 3) Components */
.icon-block { display: inline-block; /* base inline layout; presentation moved to index.css */ }

/* Address header style (icon + label) - used for address lines in pages */
.address-header-row {
  display: flex;
  align-items: center;
  gap: var(--hp-header-gap, 0.65em);
  min-height: 1em;
  padding-block: 0; /* minimal vertical padding */
  font-size: .9rem; /* match horari close-info */
  font-weight: 600;
  color: var(--hp-chip-fg, rgba(255,255,255,0.6));
  margin-bottom: 0;
  padding-left: 12px; /* align with site gutter used by horari */
}
.address-header-row .hp-icon { font-size: var(--hp-icon-size, 1.25em); margin-right: .35rem; }
.address-header-row .hp-label { display: inline-flex; align-items: center; gap: .45rem; }

/* Ensure links in address header inherit the header text style */
.address-header-row a,
.hp-root .address-header-row a {
  color: inherit !important;
  text-decoration: none !important;
}
.address-header-row a:hover,
.hp-root .address-header-row a:hover {
  color: inherit !important;
  text-decoration: underline !important;
}

/* Address text should use normal font-weight to avoid bold links in mercat */
.address-header-row .hp-label,
.address-header-row .hp-label a,
.hp-root .address-header-row .hp-label,
.hp-root .address-header-row .hp-label a {
  font-weight: 400 !important;
}

/* Mercat header sits just under the navbar with 0.5rem top spacing */
.mercat-header { padding-top: 0.5rem; padding-bottom: 1rem; }
.mercat-name { font-size: 1.25rem; font-weight: 700; margin: 0; }

/* Ensure mercat headers use the same lateral gutter
   Note: parada-specific header rules are scoped to `static/css/parada.css`.
*/
.mercat-header .hp-info-block {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* Prevent component `.hp-root` from introducing an extra offset inside mercat header */
.mercat-header .hp-root {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Address row shouldn't add its own extra left padding when inside header's hp-info-block */
.mercat-header .address-header-row {
  padding-left: 0 !important;
}

.mercat-header .hp-root .hp-header-row {
  padding-left: 0 !important;
}

.mercat-header .hp-root .accordion-button.hp-btn {
  padding-left: 0 !important;
}

/* Enforce the shared 12px gutter on the parent info block (mercat) */
.mercat-header > .container .hp-info-block {
  padding-left: 12px !important;
  padding-right: 12px !important;
}


/* --------------------------------------------------
   Pill chips (global)

   Purpose:
   - Small status chips used on top-left of product/parada "pill-card" elements.
   - Mapped from DB values to modifier classes (see mapping below).

   Usage (HTML):
   - Place a `span` with classes `pill-chip` plus one modifier inside a `.pill-card`:
     <button class="pill-card"> <span class="pill-chip pill-chip--nou">Nou</span> ...</button>

   DB -> class mapping (canonical):
   - "Nou"          -> `pill-chip--nou`
   - "De temporada" -> `pill-chip--temporada`
   - "Més venut"    -> `pill-chip--mesvenut`
   - "Promoció"     -> `pill-chip--promocio`
   - "no" or null   -> no chip rendered

   Accessibility:
   - These chips are decorative labels for product status. Prefer `aria-hidden="true"` when
     the chip conveys only visual info. If the chip conveys important state, expose it via
     an accessible text alternative or `aria-label` on the containing control.

   Notes:
   - `.pill-card` is given `position: relative` so `.pill-chip` can be absolutely positioned.
   - Keep the visual styles small and high-contrast for legibility.
   -------------------------------------------------- */

.pill-card { position: relative; }
.pill-chip {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 5;
  font-size: 0.75rem;
  padding: 0.22rem 0.5rem;
  border-radius: 999px;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
  font-weight: 700;
  display: inline-block;
}
.pill-chip--nou { background: #fff; color: var(--color-evergreen); }
.pill-chip--temporada { background: var(--color-pine); color: #fff; }
.pill-chip--mesvenut { background: #d37640; color: #fff; }
.pill-chip--promocio { background: #111; color: #fff; }

/* Mobile touch optimizations: prefer `touch-action: manipulation` on interactive
   controls to avoid double-tap zoom while keeping page-level pinch/zoom intact.
   Applied only to interactive controls (chips, buttons, action links). */
.productes-chip, .pill-card > .pill-chip, button, a, .paradista-open {
  touch-action: manipulation;
  -ms-touch-action: manipulation;
}