/* =============================================================
   Saloia com Pinta® — Main Stylesheet
   css/style.css
   Requirements: 2.5, 9.1

   WCAG 2.1 AA Colour-Contrast Baseline (minimum required: 4.5:1)
   ---------------------------------------------------------------
   --color-text-primary  (#1A1A18) on --color-bg     (#FAFAF8):
     Contrast ratio exceeds 19:1 — well above the 4.5:1 WCAG AA
     requirement for normal body text.                          ✓

   Additional verified pairs:
     --color-text-primary  #1A1A18  on --color-surface #FFFFFF  → ~18:1  ✓
     --color-text-secondary #5C5B57 on --color-bg     #FAFAF8   → ~7.2:1 ✓
     --color-accent        #F01E69  on --color-bg     #FAFAF8   → ~5.2:1 ✓
     --color-new-text      #2E7D32  on --color-new-bg #E8F5E9   → ~5.9:1 ✓
     --color-sold-text     #757575  on --color-sold-bg #F5F5F5  → ~4.6:1 ✓
     #FFFFFF               on --color-accent #F01E69             → ~5.2:1 ✓
   ============================================================= */

/* -------------------------------------------------------------
   1. DESIGN TOKENS (CSS Custom Properties)
   ------------------------------------------------------------- */
:root {
  /* --- Brand colours — extracted from scp_logo2.png --- */
  --color-accent:          #F01E69;   /* logo hot pink — primary CTA */
  --color-accent-dark:     #C4165A;   /* hover/active state */
  --color-accent-light:    #FDE8F1;   /* tinted backgrounds, badge fills */

  /* --- Neutrals --- */
  --color-bg:              #FAFAF8;   /* warm off-white page background */
  --color-surface:         #FFFFFF;   /* cards, drawers, modals */
  --color-border:          #E8E5E0;   /* subtle dividers */
  --color-text-primary:    #1A1A18;   /* headings, primary text */
  --color-text-secondary:  #5C5B57;   /* labels, meta text */
  --color-text-muted:      #9E9C97;   /* placeholders, disabled */

  /* --- Status colours --- */
  --color-new-bg:          #E8F5E9;   /* "New" badge — soft green */
  --color-new-text:        #2E7D32;
  --color-sold-bg:         #F5F5F5;   /* "Sold Out" badge — grey */
  --color-sold-text:       #757575;
  --color-error:           #D32F2F;

  /* --- Spacing scale --- */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;

  /* --- Border radius --- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-card:   0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-hover:  0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-drawer: -4px 0 24px rgba(0, 0, 0, 0.10);
  --shadow-modal:  0 8px 48px rgba(0, 0, 0, 0.16);

  /* --- Typography --- */
  --font-family:   -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                   Helvetica, Arial, sans-serif;
  --font-size-xs:  12px;
  --font-size-sm:  14px;
  --font-size-md:  16px;
  --font-size-lg:  18px;
  --font-size-xl:  24px;
  --font-size-2xl: 32px;
  --line-height:   1.6;

  /* --- Transitions --- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}

/* -------------------------------------------------------------
   2. GLOBAL RESET & BOX-SIZING
   ------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* overflow-x clamp via max-width instead — avoids breaking position:sticky */
}

body {
  font-family:      var(--font-family);
  font-size:        var(--font-size-md);
  line-height:      var(--line-height);
  color:            var(--color-text-primary);
  background-color: var(--color-bg);
  min-width:        320px;
  /* NO overflow-x:hidden here — it breaks position:sticky on the header */
}

img {
  max-width: 100%;
  display:   block;
}

button {
  font-family: inherit;
  cursor:      pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

/* -------------------------------------------------------------
   3. SCREEN-READER UTILITY
   ------------------------------------------------------------- */
.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;
}

/* -------------------------------------------------------------
   4. STICKY HEADER  (.site-header)
   Brand logotype in --color-accent; frosted-glass backdrop.
   ------------------------------------------------------------- */
.site-header {
  position:         sticky;
  top:              0;
  z-index:          100;
  width:            100%;
  background-color: var(--color-accent);
  /* Polka-dot texture matching the logo's own border: pink field, white
     dots. Two radial-gradient layers offset by half a tile stagger
     alternating rows — a plain single-layer grid lines dots up in
     columns, which reads as a grid, not polka dots. */
  background-image:
    radial-gradient(#fff 2px, transparent 2px),
    radial-gradient(#fff 2px, transparent 2px);
  background-size:     20px 20px;
  background-position: 0 0, 10px 10px;
  /* Frosted-glass — gracefully degrades where unsupported */
  backdrop-filter:  blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom:    1px solid var(--color-border);
}

/* Inner row: brand left, controls right */
.header-inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-md);
  padding:         var(--space-sm) var(--space-lg);
  max-width:       1400px;
  margin:          0 auto;
  width:           100%;
}

/* Brand / logotype group — white box so the original dark text/logo
   stay legible against the now-pink header */
.header-brand {
  display:          flex;
  align-items:      center;
  gap:              var(--space-sm);
  line-height:      1.2;
  min-width:        0;
  background-color: var(--color-surface);
  border-radius:    var(--radius-md);
  padding:          var(--space-xs) var(--space-md);
  box-shadow:       var(--shadow-card);
}

/* Text block: name + tagline stacked, sitting beside the logo */
.header-brand-text {
  display:        flex;
  flex-direction: column;
  min-width:      0;
}

/* Whole brand area is clickable — clear visual affordance */
.header-brand {
  cursor: pointer;
}

.header-brand:hover .brand-name {
  color: var(--color-accent);
  transition: color var(--transition-fast);
}

.brand-logo {
  text-decoration: none;
  display:         flex;
  align-items:     center;
  gap:             var(--space-sm);
}

.header-logo {
  width:      36px;
  height:     36px;
  object-fit: contain;
  flex-shrink: 0;
}

.brand-name {
  font-size:   var(--font-size-lg);
  font-weight: 700;
  color:       var(--color-text-primary);   /* black, not accent */
  white-space: nowrap;
}

/* The ® <sup> otherwise inherits .brand-name's bold weight and near-black
   color at a tiny superscript size, rendering as a dense, hard-to-read
   dark blob rather than a legible symbol. */
.brand-name sup {
  font-weight: 400;
  color:       var(--color-text-secondary);
}

.brand-tagline {
  font-size:   var(--font-size-xs);
  color:       var(--color-text-secondary);
  white-space: nowrap;
}

/* Right-hand controls: language switcher + cart */
.header-controls {
  display:     flex;
  align-items: center;
  gap:         var(--space-md);
  flex-shrink: 0;
}

/* Language switcher */
.lang-switcher {
  display:     flex;
  align-items: center;
  gap:         var(--space-xs);
}

/* Inactive state filled with the logo colour (same pink as the header) —
   the translucent white border is what defines its edge against the bar.
   Round, same 44px size as the cart button. */
.lang-btn {
  background-color: var(--color-accent);
  border:          1px solid rgba(255, 255, 255, 0.5);
  border-radius:   var(--radius-full);
  width:           44px;
  height:          44px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       var(--font-size-sm);
  color:           #fff;
  transition:      color var(--transition-fast),
                   background-color var(--transition-fast),
                   border-color var(--transition-fast);
}

.lang-btn[aria-pressed="true"],
.lang-btn:hover {
  background-color: var(--color-accent-light);
  border-color:     var(--color-accent);
  color:            var(--color-accent);
}

/* Cart button — round light-pink background so the (original-colour)
   icon stays visible against the now-pink header. Same 44px size as the
   language buttons. */
.cart-btn {
  position:         relative;
  background-color: var(--color-accent-light);
  border:           none;
  border-radius:    var(--radius-full);
  width:            44px;
  height:           44px;
  color:            var(--color-text-primary);
  transition:       color var(--transition-fast);
  display:          flex;
  align-items:      center;
  justify-content:  center;
}

.cart-btn:hover {
  color: var(--color-accent);
}

.cart-icon {
  display: block;
  width:   24px;
  height:  24px;
}

/* Cart item-count badge */
.cart-badge {
  position:         absolute;
  top:              -4px;
  right:            -6px;
  background-color: var(--color-accent);
  color:            #fff;
  font-size:        var(--font-size-xs);
  font-weight:      700;
  line-height:      1;
  min-width:        18px;
  height:           18px;
  border-radius:    var(--radius-full);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  padding:          0 4px;
}

/* -------------------------------------------------------------
   5. LAYOUT — <main> and <footer>
   ------------------------------------------------------------- */

/* Main content area */
#main-content {
  padding:   var(--space-lg) var(--space-lg) var(--space-2xl);
  max-width: 1400px;
  margin:    0 auto;
  width:     100%;
}

/* Narrow the horizontal padding on small screens */
@media (max-width: 599px) {
  #main-content {
    padding-left:  var(--space-md);
    padding-right: var(--space-md);
  }
  .header-inner {
    padding-left:  var(--space-md);
    padding-right: var(--space-md);
  }
}

/* Footer */
.site-footer {
  padding:          var(--space-lg);
  text-align:       center;
  font-size:        var(--font-size-sm);
  color:            var(--color-text-muted);
  border-top:       1px solid var(--color-border);
  background-color: var(--color-surface);
}

.footer-inner {
  max-width: 1400px;
  margin:    0 auto;
}

.footer-brand {
  font-size:   var(--font-size-md);
  font-weight: 700;
  color:       var(--color-accent);
  margin-bottom: var(--space-xs);
}

.footer-tagline {
  font-size:     var(--font-size-sm);
  color:         var(--color-text-secondary);
  margin-bottom: var(--space-sm);
}

.footer-nav {
  margin-bottom: var(--space-sm);
}

.footer-nav a {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  transition: color var(--transition-fast);
}

.footer-nav a:hover {
  color: var(--color-accent);
}

.footer-copy {
  font-size: var(--font-size-xs);
  color:     var(--color-text-muted);
}

/* -------------------------------------------------------------
   6. CATALOG LAYOUT — filter panel + catalog main
   ------------------------------------------------------------- */

/* The catalog view: filter above, grid below on mobile;
   sidebar + grid side-by-side on desktop */
.view-catalog {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

@media (min-width: 1024px) {
  .view-catalog {
    flex-direction: row;
    align-items: flex-start;
  }
}

/* Filter panel */
.filter-panel {
  display:   flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap:       var(--space-sm);
  /* Horizontal scroll on narrow screens */
  overflow-x: auto;
  padding-bottom: var(--space-xs);
}

/* Search + About block — its own tight column so the gap between them
   is fixed and never affected by other filter groups' collapsed/expanded
   state or width. Also kept as one unit so it can't be split across
   flex-wrap lines on narrower widths. */
.filter-panel-top {
  display:        flex;
  flex-direction: column;
  gap:            calc(var(--space-xs) * 3);
  width:          100%;
  flex-shrink:    0;
}

@media (min-width: 1024px) {
  .filter-panel {
    flex-direction: column;
    flex-wrap:      nowrap;
    overflow-x:     visible;
    overflow-y:     auto;           /* enable vertical scroll */
    flex-shrink:    0;
    width:          220px;          /* slightly wider to accommodate scrollbar */
    position:       sticky;
    top:            calc(60px + var(--space-lg)); /* below sticky header */
    max-height:     calc(100vh - 60px - var(--space-2xl)); /* fill remaining viewport */
    padding-right:  var(--space-lg); /* room for scrollbar — prevents content overlap */
    scrollbar-gutter: stable;        /* reserve scrollbar space always (modern browsers) */
  }
}

/* Mobile-only toggle button for the filter panel — hidden on tablet/desktop */
.btn-toggle-filters {
  display:         none;
  align-items:     center;
  gap:             var(--space-xs);
  width:           100%;
  background:      var(--color-accent-light);
  color:           var(--color-accent);
  border:          1px solid transparent;
  border-radius:   var(--radius-full);
  padding:         var(--space-sm) var(--space-md);
  font-size:       var(--font-size-sm);
  font-weight:     700;
  cursor:          pointer;
  margin-bottom:   var(--space-sm);
}

.btn-toggle-filters[aria-expanded="true"] {
  background-color: var(--color-accent);
  color:            #fff;
}

@media (max-width: 599px) {
  .btn-toggle-filters {
    display: inline-flex;
  }

  .filter-panel {
    display: none;
  }

  .filter-panel.is-open {
    display: flex;
  }
}

/* Filter group labels */
.filter-group {
  display:  flex;
  flex-wrap: wrap;
  gap:       var(--space-xs);
  align-items: center;
}

@media (min-width: 1024px) {
  .filter-group {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--space-sm);
  }
}

/* Collapsible filter group toggle button */
.filter-group-toggle {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  width:           100%;
  background:      none;
  border:          none;
  border-radius:   var(--radius-sm);
  padding:         var(--space-xs) 0;
  cursor:          pointer;
  text-align:      left;
  gap:             var(--space-xs);
}

.filter-group-toggle:hover {
  color: var(--color-accent);
}

.filter-group-toggle:focus-visible {
  outline:        2px solid var(--color-accent);
  outline-offset: 2px;
}

.filter-group-toggle .toggle-arrow {
  font-size:  10px;
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}

.filter-group.is-open .toggle-arrow {
  transform: rotate(180deg);
}

/* Collapsible chips container */
.filter-chips-wrap {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--transition-base);
}

.filter-group.is-open .filter-chips-wrap {
  /* Must exceed the tallest possible expanded content — the Type group
     alone has 42 chips wrapping in a ~200px column, which runs past
     1200px and was silently clipping the list (this container has its
     own overflow:hidden, independent of the sidebar's outer scroll). */
  max-height: 4000px;
}

.filter-group-label {
  font-size:   var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color:       var(--color-text-muted);
  white-space: nowrap;
}

/* Filter chip pills */
.filter-chips {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-xs);
}

.filter-chip {
  background:    var(--color-accent-light);
  color:         var(--color-accent);
  border:        1px solid transparent;
  border-radius: var(--radius-full);
  padding:       var(--space-xs) var(--space-md);
  font-size:     var(--font-size-sm);
  cursor:        pointer;
  white-space:   nowrap;
  transition:    background-color var(--transition-fast),
                 color var(--transition-fast);
}

.filter-chip.active,
.filter-chip[aria-pressed="true"] {
  background-color: var(--color-accent);
  color:            #fff;
}

.filter-chip:hover:not(.active):not([aria-pressed="true"]) {
  border-color: var(--color-accent);
}

/* "What's New" toggle chip */
.filter-toggle {
  display:     flex;
  align-items: center;
  gap:         var(--space-xs);
  cursor:      pointer;
}

.filter-toggle input[type="checkbox"] {
  position: absolute;
  opacity:  0;
  width:    0;
  height:   0;
}

.filter-toggle input[type="checkbox"]:checked + .filter-chip {
  background-color: var(--color-accent);
  color:            #fff;
}

/* Focus ring for keyboard users */
.filter-toggle input[type="checkbox"]:focus-visible + .filter-chip {
  outline:        2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Catalog main area: result count + grid */
.catalog-main {
  flex: 1;
  min-width: 0;
}

/* Search input.
   flex-basis is a HEIGHT once a flex item sits in a column-direction
   parent — .search-wrap now always lives inside .filter-panel-top, which
   is flex-direction:column, so the old "flex: 1 1 200px" (written for a
   row-wrap layout, where 200px meant width) was rendering as a 200px-tall
   box instead of a 200px-wide one. */
.search-wrap {
  width:      100%;
  min-width:  0;
  flex-shrink: 0;
}

#search-input {
  width:         100%;
  padding:       var(--space-sm) var(--space-md);
  font-size:     var(--font-size-sm);
  font-family:   inherit;
  border:        1px solid var(--color-border);
  border-radius: var(--radius-full);
  background:    var(--color-surface);
  color:         var(--color-text-primary);
  outline:       none;
  transition:    border-color var(--transition-fast),
                 box-shadow var(--transition-fast);
}

#search-input::placeholder {
  color: var(--color-text-muted);
}

#search-input:focus {
  border-color: var(--color-accent);
  box-shadow:   0 0 0 3px rgba(201, 99, 74, 0.15);
}

/* Result count */
.result-count {
  font-size:     var(--font-size-sm);
  color:         var(--color-text-muted);
  margin-bottom: var(--space-md);
  min-height:    var(--font-size-md);  /* preserve layout even when empty */
}

/* Load-error region */
.load-error {
  padding:          var(--space-lg);
  background-color: #FEE;
  color:            var(--color-error);
  border:           1px solid var(--color-error);
  border-radius:    var(--radius-md);
  margin-bottom:    var(--space-lg);
  font-size:        var(--font-size-md);
}

/* -------------------------------------------------------------
   7. PRODUCT GRID — Mobile-first responsive (Requirements 2.5, 9.1)
   ------------------------------------------------------------- */

/* Mobile base: 1 column */
#product-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--space-md);
  padding:               var(--space-md);
}

/* Tablet: 2 columns at ≥ 600 px */
@media (min-width: 600px) {
  #product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop: 3 columns at ≥ 1024 px */
@media (min-width: 1024px) {
  #product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* -------------------------------------------------------------
   8. TOUCH TARGETS — Requirement 9.6 (≥ 44 × 44 px on mobile)
   ------------------------------------------------------------- */
@media (max-width: 599px) {
  button,
  .lang-btn,
  .filter-chip,
  .filter-toggle,
  input[type="number"],
  input[type="checkbox"],
  input[type="radio"],
  .cart-btn {
    min-height: 44px;
    min-width:  44px;
  }
}

/* -------------------------------------------------------------
   9. PRODUCT CARD BASE — stub for task 2.2
   (task 2.2 adds image, badge, body, hover/focus styles)
   ------------------------------------------------------------- */
.product-card {
  background:    var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow:    var(--shadow-card);
  overflow:      hidden;
  cursor:        pointer;
}

/* -------------------------------------------------------------
   10. VIEW VISIBILITY — driven by the `hidden` HTML attribute
   (task 2.3 adds transitions and overlay-specific styles)
   ------------------------------------------------------------- */

/* The HTML uses the native `hidden` attribute to show/hide views;
   JavaScript removes/adds it at runtime.  No extra class needed. */

[hidden] {
  display: none !important;
}

/* Cart drawer and detail/checkout are positioned — base resets
   so task 2.3 can layer transitions on top cleanly */
.view-cart-drawer {
  position: fixed;
  inset:    0;
  z-index:  200;
  /* panel and overlay styled in task 2.3 */
}

#view-detail {
  position: fixed;
  inset:    0;
  z-index:  300;
  /* panel and overlay styled in task 2.3 */
}

#view-checkout {
  /* inline in the main flow — no overlay needed */
}

/* Primary / secondary / text button stubs
   (used by checkout, cart drawer — task 2.3 finishes these) */
.btn-primary {
  display:          inline-block;
  background-color: var(--color-accent);
  color:            #fff;
  border:           none;
  border-radius:    var(--radius-full);
  padding:          var(--space-sm) var(--space-lg);
  font-size:        var(--font-size-md);
  font-weight:      600;
  cursor:           pointer;
  transition:       background-color var(--transition-fast);
  text-align:       center;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background-color: var(--color-accent-dark);
}

.btn-primary:focus-visible {
  outline:        2px solid var(--color-accent);
  outline-offset: 2px;
}

.btn-secondary {
  display:          inline-block;
  background-color: transparent;
  color:            var(--color-accent);
  border:           2px solid var(--color-accent);
  border-radius:    var(--radius-full);
  padding:          var(--space-sm) var(--space-lg);
  font-size:        var(--font-size-md);
  font-weight:      600;
  cursor:           pointer;
  transition:       background-color var(--transition-fast),
                    color var(--transition-fast);
  text-align:       center;
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  background-color: var(--color-accent-light);
}

.btn-secondary:focus-visible {
  outline:        2px solid var(--color-accent);
  outline-offset: 2px;
}

.btn-text {
  background: none;
  border:     none;
  color:      var(--color-accent);
  font-size:  var(--font-size-sm);
  cursor:     pointer;
  padding:    0;
  transition: color var(--transition-fast);
}

.btn-text:hover {
  color: var(--color-accent-dark);
}

/* =============================================================
   TASK 2.2 — ProductCard, badges, and interactive states
   Requirements: 2.2, 2.3, 2.4, 9.4
   ============================================================= */

/* -------------------------------------------------------------
   11. PRODUCT CARD — full component styles
   ------------------------------------------------------------- */

/* Card container */
.product-card {
  background:    var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow:    var(--shadow-card);
  overflow:      hidden;
  cursor:        pointer;
  transition:    box-shadow var(--transition-base),
                 transform  var(--transition-base);
}

.product-card:hover {
  box-shadow: var(--shadow-hover);
}

/* Image wrapper — square container, scales with card width */
.card-image-wrap {
  position:     relative;
  overflow:     hidden;
  background:   var(--color-bg);
  aspect-ratio: 1 / 1;         /* square — keeps padding visually equal on all sides */
  box-sizing:   border-box;
  padding:      var(--space-sm); /* equal gap on all four sides */
  display:      flex;
  align-items:  center;
  justify-content: center;
}

/* Product image — always fills the padded box, so the gap is equal on
   every side regardless of the source photo's own aspect ratio */
.card-image-wrap img {
  width:      100%;
  height:     100%;
  display:    block;
  object-fit: cover;
  transition: transform var(--transition-base);
}

.product-card:hover .card-image-wrap img {
  transform: scale(1.03);
}

/* Sold-out image treatment: original colour; white overlay dims without greyscale */
.product-card:has(.badge-soldout) .card-image-wrap::after {
  content:        "";
  position:       absolute;
  inset:          0;
  background:     rgba(255, 255, 255, 0.45);
  pointer-events: none;
  z-index:        1;
}

/* ----- Badges ----- */
/* Shared badge base */
.badge-new,
.badge-soldout {
  position:      absolute;
  top:           var(--space-sm);
  right:         var(--space-sm);
  border-radius: var(--radius-full);
  font-size:     var(--font-size-xs);
  font-weight:   600;
  padding:       var(--space-xs) var(--space-sm);
  line-height:   1;
  pointer-events: none;   /* badges are decorative; don't intercept clicks */
}

/* "New" badge — soft green */
.badge-new {
  background-color: var(--color-new-bg);
  color:            var(--color-new-text);
}

/* "Sold Out" badge — grey, raised above the sold-out overlay */
.badge-soldout {
  background-color: var(--color-sold-bg);
  color:            var(--color-sold-text);
  z-index:          2;
}

/* ----- Card body ----- */
.card-body {
  padding: var(--space-sm) var(--space-md) var(--space-md);
}

/* Product type label */
.card-type {
  color:          var(--color-text-muted);
  font-size:      var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom:  var(--space-xs);
}

/* Product name */
.card-name {
  color:         var(--color-text-primary);
  font-size:     var(--font-size-md);
  font-weight:   600;
  margin-bottom: var(--space-xs);
}

/* Price */
.card-price {
  color:       var(--color-accent);
  font-size:   var(--font-size-lg);
  font-weight: 700;
}

/* ----- Focus rings for keyboard navigation (Requirement 9.4) ----- */

/* Visible focus ring when navigating by keyboard */
.product-card:focus-visible {
  outline:        2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Remove outline on mouse click — only show for keyboard nav */
.product-card:focus:not(:focus-visible) {
  outline: none;
}


/* =============================================================
   TASK 2.3 — CartDrawer, ProductDetail modal, touch targets,
               checkout form, and waitlist form
   Requirements: 9.4, 9.6, 6.7
   ============================================================= */

/* -------------------------------------------------------------
   12. CART DRAWER  (#view-cart-drawer / .view-cart-drawer)
   ------------------------------------------------------------- */

/* Semi-transparent backdrop */
.cart-drawer-overlay {
  position:   fixed;
  inset:      0;
  background: rgba(0, 0, 0, 0.4);
  z-index:    200;
}

/* Slide-in panel from the right */
.cart-drawer-panel {
  position:        fixed;
  top:             0;
  right:           0;
  height:          100%;
  width:           min(400px, 100vw);
  background:      var(--color-surface);
  box-shadow:      var(--shadow-drawer);
  display:         flex;
  flex-direction:  column;
  padding:         var(--space-lg);
  overflow-y:      auto;
  z-index:         201;
}

/* Header row: title + close button */
.cart-drawer-header {
  display:         flex;
  flex-direction:  row;
  justify-content: space-between;
  align-items:     center;
  margin-bottom:   var(--space-md);
}

/* Close-cart icon button */
.btn-close-cart {
  background:  none;
  border:      none;
  font-size:   var(--font-size-xl);
  color:       var(--color-text-secondary);
  line-height: 1;
  padding:     var(--space-xs);
  transition:  color var(--transition-fast);
}

.btn-close-cart:hover {
  color: var(--color-accent);
}

/* Cart item row — full rules defined in the "Cart item layout" section below */

/* Cart grand total */
#cart-total {
  font-size:   var(--font-size-lg);
  font-weight: 700;
  color:       var(--color-accent);
  margin-top:  var(--space-md);
}

/* Empty-cart message */
.cart-empty-msg {
  color:      var(--color-text-muted);
  text-align: center;
  padding:    var(--space-xl) 0;
}

/* Shipping placeholder row */
.cart-shipping {
  font-size:  var(--font-size-sm);
  color:      var(--color-text-secondary);
  margin-top: var(--space-sm);
}

/* Checkout button in cart drawer */
#btn-checkout {
  width:      100%;
  margin-top: var(--space-md);
}

/* -------------------------------------------------------------
   13. PRODUCT DETAIL MODAL  (#view-detail)
   ------------------------------------------------------------- */

/* Full-screen backdrop */
.detail-overlay {
  position:   fixed;
  inset:      0;
  background: rgba(0, 0, 0, 0.5);
  z-index:    300;
}

/* Slide-in panel from the right */
.detail-panel {
  position:       fixed;
  top:            0;
  right:          0;
  height:         100%;
  width:          min(600px, 100vw);
  background:     var(--color-surface);
  box-shadow:     var(--shadow-modal);
  overflow-y:     auto;
  padding:        var(--space-lg);
  z-index:        301;
  display:        flex;
  flex-direction: column;
  gap:            var(--space-md);
}

/* Close-detail button — absolute top-right inside the panel */
.btn-close-detail {
  position:    absolute;
  top:         var(--space-md);
  right:       var(--space-md);
  background:  none;
  border:      none;
  font-size:   var(--font-size-xl);
  color:       var(--color-text-secondary);
  line-height: 1;
  padding:     var(--space-xs);
  cursor:      pointer;
  transition:  color var(--transition-fast);
  z-index:     302;
}

.btn-close-detail:hover {
  color: var(--color-accent);
}

/* Main product photo */
.detail-gallery .detail-main-photo {
  width:         100%;
  max-height:    400px;
  object-fit:    contain;
  border-radius: var(--radius-md);
}

/* Thumbnail strip */
.detail-thumb-strip {
  display:    flex;
  gap:        var(--space-xs);
  overflow-x: auto;
  margin-top: var(--space-sm);
}

.detail-thumb-strip img {
  width:         64px;
  height:        64px;
  object-fit:    cover;
  border-radius: var(--radius-sm);
  cursor:        pointer;
  border:        2px solid transparent;
  flex-shrink:   0;
  transition:    border-color var(--transition-fast);
}

.detail-thumb-strip img:hover,
.detail-thumb-strip img.active {
  border-color: var(--color-accent);
}

/* Detail info typography */
.detail-name {
  font-size:   var(--font-size-xl);
  font-weight: 700;
}

.detail-price {
  font-size:   var(--font-size-xl);
  font-weight: 700;
  color:       var(--color-accent);
}

/* Price + qty/add-to-cart (or notify-me) share one row */
.detail-price-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             var(--space-sm) var(--space-md);
}

.action-instock {
  display:     flex;
  align-items: center;
  gap:         var(--space-xs);
}

/* Keep the button label on one line instead of wrapping when the flex
   row above gets tight */
.btn-add-to-cart,
.btn-notify {
  white-space: nowrap;
  flex-shrink: 0;
}

.qty-label {
  font-size: var(--font-size-xs);
  color:     var(--color-text-muted);
}

.detail-type,
.detail-collection {
  font-size: var(--font-size-sm);
  color:     var(--color-text-secondary);
}

/* Meta key-value grid (Ref., Peso) */
.detail-meta {
  font-size:             var(--font-size-sm);
  color:                 var(--color-text-muted);
  display:               grid;
  grid-template-columns: auto 1fr;
  gap:                   var(--space-xs) var(--space-sm);
}

/* Quantity input in detail panel */
.detail-qty {
  width:         56px;
  padding:       var(--space-sm);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-sm);
  text-align:    center;
  font-family:   inherit;
  font-size:     var(--font-size-md);
}

/* Multi-unit disclaimer */
.multi-disclaimer {
  font-size:     var(--font-size-sm);
  color:         var(--color-text-secondary);
  background:    var(--color-accent-light);
  border-radius: var(--radius-md);
  padding:       var(--space-sm) var(--space-md);
}

/* Outer wrapper — clips horizontal overflow without breaking sticky */
.site-wrapper {
  overflow-x: clip; /* clip (not hidden) preserves position:sticky */
  min-width:  320px;
}
.detail-subtype-desc span {
  display: block;
  margin-bottom: var(--space-xs);
}
.detail-subtype-desc span:last-child {
  margin-bottom: 0;
}

/* Form field validation error message */
.field-error {
  color:       var(--color-error);
  font-size:   var(--font-size-xs);
  display:     block;
  margin-top:  var(--space-xs);
}

/* Ordering-unavailable notice */
#ordering-unavailable {
  color:      var(--color-error);
  font-size:  var(--font-size-sm);
  margin-top: var(--space-md);
}

/* -------------------------------------------------------------
   14. TOUCH TARGETS — extend the existing mobile block
   Added: .btn-close-detail, .btn-close-cart, .btn-remove, .item-qty
   (Requirements 9.4, 9.6)
   ------------------------------------------------------------- */
@media (max-width: 599px) {
  .btn-close-detail,
  .btn-close-cart,
  .btn-remove,
  .item-qty {
    min-height: 44px;
    min-width:  44px;
  }
}

/* -------------------------------------------------------------
   15. CHECKOUT FORM  (#view-checkout)
   ------------------------------------------------------------- */

/* Centred, max-width container */
.checkout-container {
  max-width: 640px;
  margin:    0 auto;
  padding:   var(--space-lg);
}

/* Form field wrapper: label stacked above input */
.form-field {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-xs);
  margin-bottom:  var(--space-md);
}

.form-field label {
  font-size:   var(--font-size-sm);
  font-weight: 600;
  color:       var(--color-text-primary);
}

.form-field.is-required > label::after {
  content:     " *";
  color:       var(--color-accent);
  font-weight: 700;
}

.form-field input[readonly] {
  color:        var(--color-text-secondary);
  background:   var(--color-bg, #fafaf8);
  cursor:       default;
  border-style: solid;
}

/* All text-like inputs, select, and textarea */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea {
  width:       100%;
  padding:     var(--space-sm) var(--space-md);
  border:      1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size:   var(--font-size-md);
  color:       var(--color-text-primary);
  background:  var(--color-surface);
  outline:     none;
  transition:  border-color var(--transition-fast),
               box-shadow   var(--transition-fast);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  border-color: var(--color-accent);
  box-shadow:   0 0 0 3px rgba(201, 99, 74, 0.15);
}

/* Remove native OS chrome from selects inside form fields */
.form-field select {
  -webkit-appearance: none;
  -moz-appearance:    none;
  appearance:         none;
  background-image:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:  no-repeat;
  background-position: right var(--space-md) center;
  padding-right:      calc(var(--space-md) * 2 + 12px);
  cursor:             pointer;
}

/* Fieldset used for grouped form sections */
.form-fieldset {
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding:       var(--space-md);
  margin-bottom: var(--space-md);
}

/* Payment method radio card */
.payment-option {
  display:       flex;
  align-items:   center;
  gap:           var(--space-sm);
  padding:       var(--space-sm);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor:        pointer;
  margin-bottom: var(--space-xs);
  transition:    border-color var(--transition-fast),
                 background   var(--transition-fast);
}

.payment-option:has(input[type="radio"]:checked) {
  border-color: var(--color-accent);
  background:   var(--color-accent-light);
}

/* Submit button — full width */
.btn-submit {
  width:   100%;
  padding: var(--space-md);
  font-size: var(--font-size-lg);
}

/* Checkout success banner */
#checkout-success {
  background:    #E8F5E9;
  color:         var(--color-new-text);
  border-radius: var(--radius-md);
  padding:       var(--space-md);
}

/* Checkout error banner */
#checkout-error {
  background:    #FEECEC;
  color:         var(--color-error);
  border-radius: var(--radius-md);
  padding:       var(--space-md);
}

/* Remember-me checkbox */
.form-check {
  display:     flex;
  align-items: center;
  gap:         var(--space-sm);
  margin:      var(--space-md) 0;
  cursor:      pointer;
  font-size:   var(--font-size-sm);
  color:       var(--color-text-secondary);
}
.form-check input[type="checkbox"] {
  width:        1rem;
  height:       1rem;
  flex-shrink:  0;
  cursor:       pointer;
  accent-color: var(--color-accent);
}

/* Done button — shown only after successful order */
.btn-checkout-done {
  width:      100%;
  padding:    var(--space-md);
  font-size:  var(--font-size-lg);
  margin-top: var(--space-lg);
}

/* ── Submit button loading state ───────────────────────────── */
@keyframes scp-spin {
  to { transform: rotate(360deg); }
}

.btn-primary.btn-loading {
  background-color: var(--color-accent);
  opacity:          0.92;
  cursor:           default;
}

.btn-primary.btn-loading::after {
  content:       "";
  display:       inline-block;
  width:         14px;
  height:        14px;
  border:        2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation:     scp-spin 0.7s linear infinite;
  margin-left:   var(--space-sm);
  vertical-align: middle;
}

/* ── Checkout progress indicator ───────────────────────────── */
.checkout-progress {
  display:        flex;
  align-items:    center;
  gap:            var(--space-sm);
  margin-top:     var(--space-md);
  padding:        var(--space-sm) var(--space-md);
  background:     var(--color-accent-light);
  border-radius:  var(--radius-md);
  font-size:      var(--font-size-sm);
  color:          var(--color-accent);
  font-weight:    500;
}

.checkout-progress-spinner {
  width:         12px;
  height:        12px;
  border:        2px solid rgba(240, 30, 105, 0.25);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation:     scp-spin 0.7s linear infinite;
  flex-shrink:   0;
}

/* Shipping summary line in checkout */
.checkout-shipping-summary {
  font-size:     var(--font-size-sm);
  color:         var(--color-text-muted);
  margin-bottom: var(--space-md);
}

/* -------------------------------------------------------------
   16. WAITLIST FORM  (.waitlist-section)
   ------------------------------------------------------------- */
.waitlist-section {
  padding-top:   var(--space-md);
  border-top:    1px solid var(--color-border);
  margin-top:    var(--space-md);
}

/* =============================================================
   IMAGE LIGHTBOX
   ============================================================= */

.img-lightbox {
  position:   fixed;
  inset:      0;
  z-index:    500;
  display:    flex;
  align-items: center;
  justify-content: center;
}

.lightbox-backdrop {
  position:   absolute;
  inset:      0;
  background: rgba(0, 0, 0, 0.88);
  cursor:     zoom-out;
}

.lightbox-content {
  position:        relative;
  z-index:         501;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             var(--space-md);
  max-width:       90vw;
  max-height:      90vh;
}

.lightbox-photo {
  max-width:    90vw;
  max-height:   80vh;
  object-fit:   contain;
  border-radius: var(--radius-md);
  box-shadow:   var(--shadow-modal);
  cursor:       zoom-out;
}

.lightbox-actions {
  display:     flex;
  gap:         var(--space-sm);
}

.btn-lightbox {
  display:          inline-flex;
  align-items:      center;
  gap:              var(--space-xs);
  padding:          var(--space-xs) var(--space-md);
  background:       rgba(255, 255, 255, 0.15);
  color:            #fff;
  border:           1px solid rgba(255, 255, 255, 0.3);
  border-radius:    var(--radius-full);
  font-size:        var(--font-size-sm);
  cursor:           pointer;
  text-decoration:  none;
  transition:       background var(--transition-fast);
  backdrop-filter:  blur(4px);
}

.btn-lightbox:hover {
  background: rgba(255, 255, 255, 0.28);
}

.btn-lightbox-close {
  background: rgba(240, 30, 105, 0.6);
  border-color: rgba(240, 30, 105, 0.8);
}

.btn-lightbox-close:hover {
  background: rgba(240, 30, 105, 0.85);
}

/* Make detail main photo clickable */
.detail-main-photo {
  cursor: zoom-in;
}

/* =============================================================
   FOOTER — logo, contacts, social, nav
   ============================================================= */

.site-footer {
  background-color: var(--color-surface);
  border-top:       1px solid var(--color-border);
  padding:          var(--space-xl) var(--space-lg);
  font-size:        var(--font-size-sm);
}

.footer-inner {
  max-width:      900px;
  margin:         0 auto;
  display:        flex;
  flex-wrap:      wrap;
  gap:            var(--space-xl);
  align-items:    flex-start;
  justify-content: center;
  text-align:     center;
}

/* Groups the boneca block and brand block side by side */
.footer-brand-group {
  display:     flex;
  align-items: center;
  gap:         var(--space-sm);
}

.footer-brand-block {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-xs);
}

/* Boneca mascot block — before (to the left of) the brand block */
.footer-boneca-block {
  display: flex;
}

/* Saloia mascot figure — from the pre-rewrite site's footer.
   Fixed height matching .footer-brand-block's own height (80px logo +
   3 text lines + gaps, ~160px) — flex-stretch sizing didn't carry
   through reliably, so this is pinned directly instead. */
.footer-boneca {
  height:     160px;
  width:      auto;
  object-fit: contain;
}

.footer-logo {
  width:         80px;
  height:        auto;
  margin-bottom: var(--space-xs);
}

.footer-brand-name {
  font-size:   var(--font-size-md);
  font-weight: 700;
  color:       var(--color-accent);
}

.footer-tagline {
  font-size:  var(--font-size-sm);
  color:      var(--color-text-secondary);
  font-style: italic;
}

.footer-location {
  font-size: var(--font-size-xs);
  color:     var(--color-text-muted);
}

.footer-contacts {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-sm);
  align-items:    flex-start;
}

.footer-contact-link {
  display:     flex;
  align-items: center;
  gap:         var(--space-xs);
  color:       var(--color-text-secondary);
  font-size:   var(--font-size-sm);
  transition:  color var(--transition-fast);
  text-decoration: none;
}

.footer-contact-link:hover { color: var(--color-accent); }

.footer-social {
  display:     flex;
  align-items: center;
  gap:         var(--space-md);
}

.footer-social-link {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-xs);
  color:           var(--color-text-secondary);
  text-decoration: none;
  transition:      color var(--transition-fast);
}

.footer-social-link:hover { color: var(--color-accent); }

/* Facebook link styled with branding */
.footer-social-facebook {
  background-color: #1877F2;
  color:            #fff;
  padding:          var(--space-xs) var(--space-sm);
  border-radius:    var(--radius-sm);
  font-size:        var(--font-size-sm);
  font-weight:      600;
}

.footer-social-facebook:hover {
  background-color: #166fe5;
  color:            #fff;
}

.footer-nav {
  width:       100%;
  display:     flex;
  flex-wrap:   wrap;
  gap:         var(--space-sm);
  justify-content: center;
  padding-top: var(--space-md);
  border-top:  1px solid var(--color-border);
}

.footer-nav-btn {
  background:  none;
  border:      none;
  color:       var(--color-text-secondary);
  font-size:   var(--font-size-sm);
  cursor:      pointer;
  padding:     var(--space-xs) var(--space-sm);
  transition:  color var(--transition-fast);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-nav-btn:hover { color: var(--color-accent); }

.footer-copy {
  width:      100%;
  text-align: center;
  color:      var(--color-text-muted);
  font-size:  var(--font-size-xs);
}

/* =============================================================
   STATIC PAGES — About, Contact, Terms, Privacy
   ============================================================= */

.static-page {
  position: fixed;
  inset:    0;
  z-index:  400;
  overflow-y: auto;
  background: var(--color-bg);
}

.static-page-inner {
  max-width:  760px;
  margin:     0 auto;
  padding:    var(--space-xl) var(--space-lg) var(--space-2xl);
}

.btn-page-back {
  background:  none;
  border:      none;
  color:       var(--color-accent);
  font-size:   var(--font-size-sm);
  cursor:      pointer;
  padding:     0;
  margin-bottom: var(--space-lg);
  display:     inline-flex;
  align-items: center;
  gap:         var(--space-xs);
  transition:  color var(--transition-fast);
}

.btn-page-back:hover { color: var(--color-accent-dark); }

.static-page-inner h1 {
  font-size:     var(--font-size-2xl);
  color:         var(--color-accent);
  margin-bottom: var(--space-lg);
}

.static-page-inner h2 {
  font-size:     var(--font-size-xl);
  color:         var(--color-text-primary);
  margin-top:    var(--space-xl);
  margin-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-accent-light);
  padding-bottom: var(--space-xs);
}

.static-page-inner h3 {
  font-size:     var(--font-size-lg);
  color:         var(--color-text-primary);
  margin-top:    var(--space-lg);
  margin-bottom: var(--space-xs);
}

.static-page-inner p {
  margin-bottom: var(--space-md);
  color:         var(--color-text-secondary);
  line-height:   1.8;
}

.static-page-inner ul {
  list-style:    disc;
  padding-left:  var(--space-xl);
  margin-bottom: var(--space-md);
}

.static-page-inner li {
  margin-bottom: var(--space-xs);
  color:         var(--color-text-secondary);
  line-height:   1.7;
}

.static-page-inner a {
  color:           var(--color-accent);
  text-decoration: underline;
}

.legal-intro {
  font-size:       var(--font-size-md);
  color:           var(--color-text-primary);
  background:      var(--color-accent-light);
  border-left:     4px solid var(--color-accent);
  padding:         var(--space-md);
  border-radius:   var(--radius-sm);
  margin-bottom:   var(--space-lg);
}

/* About page */
.about-hero {
  background:    var(--color-accent-light);
  border-radius: var(--radius-lg);
  padding:       var(--space-xl);
  text-align:    center;
  margin-bottom: var(--space-xl);
}

.about-hero h2 {
  font-size:   var(--font-size-2xl);
  color:       var(--color-accent);
  border:      none;
  margin-top:  0;
}

.about-subtitle {
  font-size:  var(--font-size-lg);
  color:      var(--color-text-secondary);
  font-style: italic;
  margin:     0 !important;
}

/* Contact form */
.contact-info-block {
  background:    var(--color-accent-light);
  border-radius: var(--radius-md);
  padding:       var(--space-lg);
  margin-bottom: var(--space-xl);
  line-height:   1.8;
}

.contact-info-block a {
  color: var(--color-accent);
}

.contact-info-block small {
  display:   block;
  font-size: var(--font-size-xs);
  color:     var(--color-text-muted);
}

.contact-form h2 {
  margin-top: 0;
  border:     none;
  font-size:  var(--font-size-xl);
}

.contact-form button[type="submit"] {
  margin-bottom: var(--space-lg);
}

.about-logo {
  width:    110px;
  height:   auto;
  display:  block;
  margin:   0 auto var(--space-md);
}

.contact-success {
  color:         var(--color-new-text);
  background:    var(--color-new-bg);
  border-radius: var(--radius-md);
  padding:       var(--space-md);
  margin-top:    var(--space-md);
}

.contact-error {
  color:         var(--color-error);
  background:    #feecec;
  border-radius: var(--radius-md);
  padding:       var(--space-md);
  margin-top:    var(--space-md);
}

/* Phone legal notice */
.footer-phone-block {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.footer-phone-notice {
  font-size:   var(--font-size-xs);
  color:       var(--color-text-muted);
  padding-left: 22px; /* align under phone number, past icon */
}

/* Facebook follower badge */
.fb-followers-badge {
  background:    rgba(255,255,255,0.25);
  border-radius: var(--radius-full);
  font-size:     var(--font-size-xs);
  padding:       1px 6px;
  margin-left:   2px;
  font-weight:   600;
}

/* Filter panel — all interactive elements full-width like search */
.filter-panel .filter-chip,
.filter-panel .filter-chip-contact,
.filter-panel .filter-toggle,
.filter-panel .filter-group-toggle {
  width:      100%;
  box-sizing: border-box;
  text-align: left;
}

.filter-panel .filter-chips {
  width: 100%;
}

.filter-panel .filter-chips .filter-chip {
  width:           100%;
  justify-content: flex-start;
}

/* Contact/About buttons — full width, same height as search */
.filter-chip-contact {
  display:          flex;
  align-items:      center;
  gap:              var(--space-xs);
  width:            100%;
  background:       var(--color-accent);
  color:            #fff;
  border:           none;
  border-radius:    var(--radius-full);
  padding:          var(--space-sm) var(--space-md);
  font-size:        var(--font-size-sm);
  cursor:           pointer;
  white-space:      nowrap;
  transition:       background-color var(--transition-fast);
  box-sizing:       border-box;
}

.filter-chip-contact:hover {
  background-color: var(--color-accent-dark);
}

/* What's New toggle — full width */
.filter-toggle.filter-isnew {
  width:      100%;
  box-sizing: border-box;
}

.filter-toggle.filter-isnew .filter-chip {
  width:      100%;
  box-sizing: border-box;
}

/* Active filter bar — shown above product grid when a filter is selected */
.active-filter-bar {
  display:         flex;
  align-items:     center;
  gap:             var(--space-sm);
  padding:         var(--space-xs) var(--space-md);
  background:      var(--color-accent-light);
  border:          1px solid var(--color-accent);
  border-radius:   var(--radius-full);
  margin-bottom:   var(--space-md);
  width:           fit-content;
  max-width:       100%;
}

.active-filter-label {
  font-size:   var(--font-size-sm);
  font-weight: 600;
  color:       var(--color-accent);
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}

.active-filter-clear {
  background:   none;
  border:       none;
  color:        var(--color-accent);
  font-size:    var(--font-size-lg);
  line-height:  1;
  cursor:       pointer;
  padding:      0 2px;
  flex-shrink:  0;
  transition:   color var(--transition-fast);
}

.active-filter-clear:hover {
  color: var(--color-accent-dark);
}

/* =============================================================
   SUBTYPE PICKER — styled identically to product cards
   ============================================================= */

.subtype-picker {
  width: 100%;
}

.subtype-picker-heading {
  font-size:     var(--font-size-xl);
  color:         var(--color-accent);
  margin-bottom: var(--space-lg);
  font-weight:   700;
}

/* Same responsive grid as product grid */
.subtype-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--space-md);
  padding:               var(--space-md);
  align-items:           stretch;  /* stretch buttons to fill cell height */
}

@media (min-width: 600px) {
  .subtype-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .subtype-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Subtype card — identical structure to .product-card */
.subtype-card {
  background:     var(--color-surface);
  border-radius:  var(--radius-md);
  box-shadow:     var(--shadow-card);
  overflow:       hidden;
  cursor:         pointer;
  padding:        0;
  border:         none;
  display:        flex;
  flex-direction: column;
  text-align:     left;
  width:          100%;   /* fill the grid cell — buttons don't do this by default */
  min-width:      0;      /* prevent grid blowout */
  box-sizing:     border-box;
  transition:     box-shadow var(--transition-base),
                  transform  var(--transition-base);
}

.subtype-card:hover {
  box-shadow: var(--shadow-hover);
}

.subtype-card:focus-visible {
  outline:        2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Image area — same fixed height + contain as product cards */
.subtype-card .card-image-wrap {
  position:        relative;
  overflow:        hidden;
  background:      var(--color-bg);
  height:          200px;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

/* Override the general .card-image-wrap img margin — flexbox centers this */
.subtype-card .card-image-wrap img {
  width:      70%;
  height:     auto;
  max-height: 160px;
  display:    block;
  object-fit: contain;
  margin:     0 !important;  /* cancel the general rule's top/bottom margin */
  flex-shrink: 0;
  transition: transform var(--transition-base);
}

.subtype-card:hover img {
  transform: scale(1.03);
}

/* Label area — matches .card-body */
.subtype-card-label {
  padding:     var(--space-sm) var(--space-md) var(--space-md);
  font-size:   var(--font-size-md);
  font-weight: 600;
  color:       var(--color-text-primary);
  line-height: 1.4;
  display:     block;
}

/* Subtype card image wrapper — clean flex centering, no inherited conflicts */
.subtype-img-wrap {
  width:           100%;
  height:          200px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      var(--color-bg);
  overflow:        hidden;
}

.subtype-img-wrap img {
  width:       70%;
  height:      auto;
  max-height:  160px;
  object-fit:  contain;
  display:     block;
  margin:      0;
  transition:  transform var(--transition-base);
}

.subtype-card:hover .subtype-img-wrap img {
  transform: scale(1.03);
}

/* Active filter breadcrumb — type back button */
.active-filter-btn {
  background:      none;
  border:          none;
  color:           var(--color-accent);
  font-size:       var(--font-size-sm);
  font-weight:     600;
  cursor:          pointer;
  padding:         0;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition:      color var(--transition-fast);
  white-space:     nowrap;
}

.active-filter-btn:hover {
  color: var(--color-accent-dark);
}

.active-filter-sep {
  color:      var(--color-text-muted);
  font-size:  var(--font-size-sm);
  padding:    0 2px;
  flex-shrink: 0;
}

/* Waitlist note */
.waitlist-note {
  font-size:     var(--font-size-sm);
  color:         var(--color-text-secondary);
  margin-bottom: var(--space-md);
  line-height:   1.6;
}

/* Livro de Reclamações */
.footer-reclamacoes {
  width:      100%;
  text-align: center;
  padding:    var(--space-sm) 0;
  border-top: 1px solid var(--color-border);
}

.reclamacoes-link {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-xs);
  color:           #c00;
  font-size:       var(--font-size-sm);
  font-weight:     600;
  text-decoration: none;
  padding:         var(--space-xs) var(--space-md);
  border:          2px solid #c00;
  border-radius:   var(--radius-sm);
  transition:      background var(--transition-fast), color var(--transition-fast);
}

.reclamacoes-link:hover {
  background: #c00;
  color:      #fff;
}

/* Collection / Line description banner */
.filter-description {
  margin-bottom: var(--space-lg);
  background:    var(--color-accent-light);
  border-radius: var(--radius-md);
  overflow:      hidden;
}

.filter-description-inner {
  display:     flex;
  flex-direction: row;   /* image left, text right */
  gap:         var(--space-lg);
  align-items: flex-start;
  padding:     var(--space-lg);
}

.filter-description-photo {
  width:         180px;
  max-height:    200px;  /* cap height */
  object-fit:    cover;
  border-radius: var(--radius-md);
  flex-shrink:   0;
}

@media (max-width: 599px) {
  .filter-description-inner {
    flex-direction: column;  /* stack on mobile */
  }
  .filter-description-photo {
    width:      100%;
    max-height: 180px;
  }
}

.filter-description-name {
  font-size:     var(--font-size-lg);
  font-weight:   700;
  color:         var(--color-accent);
  margin-bottom: var(--space-sm);
}

.filter-description-body {
  font-size:   var(--font-size-sm);
  color:       var(--color-text-secondary);
  line-height: 1.7;
}

/* Waitlist sold-out product info */
.waitlist-product-info {
  background:    var(--color-sold-bg);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding:       var(--space-md);
  margin-bottom: var(--space-md);
}

.waitlist-product-name {
  font-size:   var(--font-size-md);
  font-weight: 600;
  color:       var(--color-text-primary);
  margin-top:  var(--space-xs);
}

/* Sold-out badge on detail panel main image */
.detail-image-main {
  position: relative;
  display:  inline-block;
  width:    100%;
}

.detail-soldout-badge {
  position:      absolute;
  top:           var(--space-sm);
  right:         var(--space-sm);
  border-radius: var(--radius-full);
  font-size:     var(--font-size-xs);
  font-weight:   600;
  padding:       var(--space-xs) var(--space-sm);
  background-color: var(--color-sold-bg);
  color:            var(--color-sold-text);
  pointer-events:   none;
  z-index:          1;
}

/* Cart country selector and shipping cost */
.cart-country-row {
  margin-top:    var(--space-md);
  display:       flex;
  flex-direction: column;
  gap:           var(--space-xs);
}

.cart-country-label {
  font-size:   var(--font-size-xs);
  font-weight: 600;
  color:       var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cart-country-select {
  width:       100%;
  padding:     var(--space-xs) var(--space-sm);
  border:      1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size:   var(--font-size-sm);
  background:  var(--color-surface);
}

.cart-shipping-cost-row {
  display:     flex;
  align-items: center;
  gap:         var(--space-sm);
  margin-top:  var(--space-sm);
  font-size:   var(--font-size-sm);
  color:       var(--color-text-secondary);
}

.cart-shipping-cost-value {
  font-weight: 600;
  color:       var(--color-text-primary);
}

.cart-shipping-timing {
  font-size:  var(--font-size-xs);
  color:      var(--color-text-muted);
}

.cart-shipping-inactive {
  font-size:     var(--font-size-sm);
  color:         var(--color-error);
  margin-top:    var(--space-sm);
  padding:       var(--space-sm);
  background:    #feecec;
  border-radius: var(--radius-sm);
}

.cart-shipping-inactive a {
  color:           var(--color-accent);
  text-decoration: underline;
}

.cart-grand-total-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-top:      var(--space-md);
  padding-top:     var(--space-sm);
  border-top:      2px solid var(--color-border);
}

.cart-grand-total-label {
  font-size:   var(--font-size-md);
  font-weight: 700;
  color:       var(--color-text-primary);
}

.cart-grand-total {
  font-size:   var(--font-size-xl);
  font-weight: 700;
  color:       var(--color-accent);
}

/* ── Cart item layout ─────────────────────────────────────────────────────
   4-column grid: thumbnail | name+qty | price | remove.
   Fixed column widths so the shipping row (.cart-shipping-row-grid, which
   reuses .cart-item) keeps its price column aligned with the product rows.
   The remove column is 44px (not the visual 24px button size) so the
   mobile touch-target rule below (min 44x44) fits without overflowing. */
.cart-item {
  display:               grid;
  grid-template-columns: 48px 1fr 70px 44px;
  gap:                   var(--space-sm);
  align-items:           center;
  padding:               var(--space-xs) 0;
  border-bottom:         none;
}

/* Small thumbnail */
.item-thumb {
  width:         48px;
  height:        48px;
  object-fit:    cover;
  border-radius: var(--radius-sm);
  flex-shrink:   0;
}

/* Details column: name on top, qty below */
.item-details {
  display:        flex;
  flex-direction: column;
  gap:            2px;
  min-width:      0;
}

.item-name {
  font-size:     var(--font-size-sm);
  font-weight:   600;
  color:         var(--color-text-primary);
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}

.item-controls {
  display:     flex;
  align-items: center;
  gap:         var(--space-xs);
}

/* Compact qty input.
   Selector is `input.item-qty` (not just `.item-qty`) so its specificity
   ties the global `input[type="number"]` form-field rule further up the
   sheet — without the element qualifier, that rule's width/padding/font-size
   would win instead, since a bare class alone doesn't out-rank tag+attribute. */
input.item-qty {
  width:         44px;
  text-align:    center;
  border:        1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding:       2px var(--space-xs);
  font-size:     var(--font-size-xs);
  font-family:   inherit;
}

/* Price column — right-aligned, vertically centred in its grid cell */
.item-price-col {
  display:         flex;
  align-items:     center;
  justify-content: flex-end;
}

.item-line-total {
  text-align:  right;
  width:       100%;
  font-weight: 700;
  color:       var(--color-accent);
  white-space: nowrap;
}

/* All cart prices pink */
.cart-price-pink {
  color:       var(--color-accent);
  font-weight: 700;
}

/* Hide product subtotal — grand total shown instead */
#cart-total { display: none !important; }

/* Remove button — its own grid column, centred both axes */
.btn-remove {
  display:         flex;
  align-items:     center;
  justify-content: center;
  justify-self:    center;
  width:           24px;
  height:          24px;
  font-size:       var(--font-size-md);
  color:           var(--color-text-muted);
  background:      none;
  border:          none;
  cursor:          pointer;
  padding:         0;
  transition:      color var(--transition-fast);
}

.btn-remove:hover { color: var(--color-error); }

/* Shipping section: country selector left, cost right on same line */
.cart-shipping-section {
  margin-top:    var(--space-md);
  padding-top:   var(--space-sm);
  border-top:    1px solid var(--color-border);
}

.cart-country-col {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            3px;
}

/* Sized and styled like the qty input, not a full-width dropdown bar —
   min-width keeps longer country names from looking cramped. */
select.cart-country-select {
  width:         auto;
  min-width:     130px;
  max-width:     100%;
  padding:       2px var(--space-xs);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size:     var(--font-size-xs);
  font-family:   inherit;
  background:    var(--color-surface);
}

#cart-shipping-timing {
  font-size:    var(--font-size-xs);
  color:        var(--color-text-muted);
  padding-left: 2px;
}

/* Shipping cost value — same right-aligned column as item prices */
#cart-shipping-cost-value {
  display:      inline-block;
  min-width:    70px;
  text-align:   right;
  font-weight:  700;
  color:        var(--color-accent);
}

/* "Contact us" shipping message — a plain block below the country/price
   grid row (not a grid item itself) so long text can wrap normally
   instead of overflowing past the drawer's edge */
.cart-shipping-message {
  margin-top:  var(--space-xs);
  font-size:   var(--font-size-xs);
  font-weight: 600;
  color:       var(--color-accent);
}

/* Grand total row */
.cart-grand-total-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-top:      var(--space-md);
  padding-top:     var(--space-sm);
  border-top:      2px solid var(--color-border);
}

.cart-grand-total-label {
  font-size:   var(--font-size-md);
  font-weight: 700;
  color:       var(--color-text-primary);
}

/* Grand total price — aligned with item prices */
.cart-grand-total {
  font-size:   var(--font-size-xl);
  font-weight: 700;
  color:       var(--color-accent);
  min-width:   70px;
  text-align:  right;
}

/* Shipping row reuses .cart-item's grid so its price column lines up */
.cart-shipping-row-grid {
  border-bottom: none;
  padding-top:   var(--space-xs);
}

/* ── Product card — quick-add button ─────────────────────────────────────── */

.card-footer {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-xs);
  margin-top:      2px;
}

.btn-quick-add {
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            30px;
  height:           30px;
  background-color: var(--color-accent);
  color:            #fff;
  border:           none;
  border-radius:    var(--radius-full);
  cursor:           pointer;
  flex-shrink:      0;
  transition:       background-color var(--transition-fast),
                    transform var(--transition-fast);
  font-size:        var(--font-size-md);
  font-weight:      700;
  line-height:      1;
}

.btn-quick-add:hover {
  background-color: var(--color-accent-dark);
  transform:        scale(1.1);
}

.btn-quick-add:focus-visible {
  outline:        2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ── Cart toast notification ─────────────────────────────────────────────── */

.cart-toast {
  position:         fixed;
  top:              70px;
  right:            var(--space-lg);
  z-index:          600;
  background:       var(--color-accent);
  color:            #fff;
  font-size:        var(--font-size-sm);
  font-weight:      600;
  padding:          var(--space-sm) var(--space-lg);
  border-radius:    var(--radius-full);
  box-shadow:       var(--shadow-hover);
  pointer-events:   none;
  opacity:          0;
  transform:        translateY(-8px);
  transition:       opacity 200ms ease, transform 200ms ease;
}

.cart-toast.show {
  opacity:   1;
  transform: translateY(0);
}

/* Checkout pickup note */
.checkout-pickup-note {
  background:    var(--color-accent-light);
  border-left:   4px solid var(--color-accent);
  border-radius: var(--radius-sm);
  padding:       var(--space-md);
  margin-bottom: var(--space-md);
  font-size:     var(--font-size-sm);
  color:         var(--color-text-secondary);
}

.checkout-pickup-note em {
  display:    block;
  margin-top: var(--space-xs);
  color:      var(--color-text-muted);
}

/* ── Catalog hero banner (default home screen, no filters active) ─────────── */
.catalog-hero {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  background:            var(--color-surface);
  border-radius:         var(--radius-lg);
  box-shadow:            var(--shadow-card);
  overflow:              hidden;
  margin:                var(--space-md) var(--space-md) var(--space-xl);
}

.catalog-hero-image {
  overflow:        hidden;
  background:      var(--color-surface);
  min-height:      262px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
}

.catalog-hero-image img {
  width:      auto;
  max-width:  100%;
  height:     auto;
  max-height: 242px;
  object-fit: contain;
  display:    block;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.catalog-hero-image:hover img {
  transform: scale(1.04);
}

.catalog-hero-body {
  padding:         var(--space-xl);
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  gap:             var(--space-md);
}

.catalog-hero-headline {
  font-size:   var(--font-size-2xl);
  font-weight: 800;
  color:       var(--color-accent);
  line-height: 1.2;
  margin:      0;
}

.catalog-hero-text {
  font-size:   var(--font-size-md);
  color:       var(--color-text-secondary);
  line-height: 1.7;
  margin:      0;
}

.catalog-hero-cta {
  align-self:     flex-start;
  margin-top:     var(--space-xs);
  padding:        var(--space-sm) var(--space-lg);
  background:     var(--color-accent);
  color:          #fff;
  border:         none;
  border-radius:  var(--radius-full);
  font-size:      var(--font-size-md);
  font-weight:    700;
  cursor:         pointer;
  letter-spacing: 0.02em;
  transition:     background var(--transition-fast), transform var(--transition-fast);
}

.catalog-hero-cta:hover {
  background: var(--color-accent-dark);
  transform:  translateY(-2px);
}

.catalog-hero-cta:active {
  transform: translateY(0);
}

@media (max-width: 700px) {
  .catalog-hero {
    grid-template-columns: 1fr;
    margin: var(--space-sm) var(--space-sm) var(--space-lg);
  }
  .catalog-hero-image img {
    max-height: 194px;
  }
  .catalog-hero-body {
    padding: var(--space-lg);
  }
  .catalog-hero-headline {
    font-size: var(--font-size-xl);
  }
}

/* ── Lines quick-nav box (pink buttons, under the hero banner) ─────────────── */
.hero-lines-box {
  background:    var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow:    var(--shadow-card);
  padding:       var(--space-lg);
  margin:        0 var(--space-md) var(--space-xl);
}

.hero-line-chips {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  gap:             var(--space-sm);
}

/* Sized to fit each label (like the sidebar filter chips) instead of being
   force-divided evenly across one unbreakable row — with 7+ lines and some
   long names ("Frames, Mirrors and Picture"), equal division squeezed every
   button down to an illegible, 2-line-clamped sliver. Wrapping to as many
   rows as needed reads far better regardless of how many lines exist. */
.hero-line-btn {
  flex:           0 0 auto;
  text-align:     center;
  white-space:    nowrap;
  background:     var(--color-accent-light);
  color:          var(--color-accent);
  border:         1px solid transparent;
  border-radius:  var(--radius-full);
  padding:        var(--space-sm) var(--space-lg);
  font-size:      var(--font-size-sm);
  font-weight:    700;
  letter-spacing: 0.02em;
  line-height:    1.2;
  cursor:         pointer;
  transition:     background-color var(--transition-fast), color var(--transition-fast);
}

.hero-line-btn:hover:not(.active):not([aria-pressed="true"]) {
  border-color: var(--color-accent);
}

.hero-line-btn.active,
.hero-line-btn[aria-pressed="true"] {
  background-color: var(--color-accent);
  color:            #fff;
}

@media (max-width: 700px) {
  .hero-lines-box {
    margin: 0 var(--space-sm) var(--space-lg);
    padding: var(--space-md);
  }
  /* Let a long label wrap within its own chip on narrow screens instead of
     forcing nowrap text wider than the viewport */
  .hero-line-btn {
    max-width:   100%;
    white-space: normal;
  }
}