.wa-fab {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 40;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 56px;
    padding: 0 20px 0 16px;
    border-radius: var(--rachi-radius-full);
    background: #25D366;
    /* Not white: white on WhatsApp green is 1.98:1. This ink measures 8.6:1. */
    color: #062E16;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  }
  .wa-fab:hover { filter: brightness(0.95); }
  .wa-fab:focus-visible { outline: 3px solid var(--rachi-text-primary); outline-offset: 3px; }
  .wa-fab svg { width: 24px; height: 24px; }
  @media (max-width: 480px) { .wa-fab-label { display: none; } .wa-fab { padding: 0 16px; } }
  @media (prefers-reduced-motion: no-preference) { .wa-fab { transition: transform 0.15s; } .wa-fab:hover { transform: translateY(-1px); } }

  .cart-bar {
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: 62;
    width: min(560px, calc(100% - 24px));
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px 8px 6px;
    border-radius: var(--rachi-radius-full);
    background: var(--rachi-bg-elevated);
    border: 1px solid var(--rachi-border-subtle);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  }
  .cart-bar[hidden] { display: none !important; }
  /* While the list is up it owns the corner. A class the cart script sets, not
     body:has(): Firefox 115 and iOS 15.0–15.3 have no :has(), and there the
     green button sat on top of «Ver mi lista». */
  body.cart-listed .wa-fab { display: none; }
  .cart-open {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1;
    min-width: 0;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    background: none;
    border-radius: var(--rachi-radius-full);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--rachi-text-primary);
    cursor: pointer;
    text-align: left;
  }
  .cart-open .cart-n {
    min-width: 24px;
    padding: 2px 8px;
    border-radius: var(--rachi-radius-full);
    background: var(--store-accent);
    color: var(--store-accent-contrast);
    font-size: 13px;
    text-align: center;
  }
  .cart-send {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border-radius: var(--rachi-radius-full);
    background: #25D366;
    color: #06301A;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
  }
  .cart-panel {
    position: fixed;
    left: 50%;
    bottom: 78px;
    transform: translateX(-50%);
    z-index: 61;
    width: min(560px, calc(100% - 24px));
    /* vh first: a browser without dvh (iOS 15.0–15.3) keeps a cap. */
    max-height: 70vh;
    max-height: 70dvh;
    display: flex;
    flex-direction: column;
    border-radius: var(--rachi-radius-xl);
    background: var(--rachi-bg-elevated);
    border: 1px solid var(--rachi-border-subtle);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    overflow: hidden;
  }
  .cart-panel[hidden] { display: none !important; }
  .cart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 10px 12px 20px;
    border-bottom: 1px solid var(--rachi-border-subtle);
    font-family: var(--rachi-font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--rachi-text-primary);
  }
  .cart-close {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    border: 0; background: none; color: var(--rachi-text-secondary); cursor: pointer;
  }
  .cart-items { list-style: none; margin: 0; padding: 6px 20px; overflow-y: auto; }
  .cart-items li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--rachi-border-subtle);
  }
  .cart-items li:last-child { border-bottom: 0; }
  .cart-items .who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .cart-items .who b { font-size: 14px; font-weight: 600; color: var(--rachi-text-primary); }
  .cart-items .who span { font-size: 13px; color: var(--rachi-text-muted); font-variant-numeric: tabular-nums; }
  .cart-items .qty { display: flex; align-items: center; gap: 2px; }
  .cart-items .qty button {
    width: 34px; height: 34px;
    border-radius: var(--rachi-radius-md);
    border: 1px solid var(--rachi-border-subtle);
    background: var(--rachi-bg-surface);
    color: var(--rachi-text-primary);
    font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
  }
  .cart-items .qty output { min-width: 30px; text-align: center; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
  .cart-foot { padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rachi-border-subtle); }
  .cart-total { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; font-size: 14px; color: var(--rachi-text-secondary); }
  .cart-total strong { font-size: 19px; color: var(--rachi-text-primary); font-variant-numeric: tabular-nums; }
  .cart-foot .cart-send { display: flex; justify-content: center; }
  .cart-notice {
    margin: 0 0 10px;
    padding: 8px 10px;
    border-radius: var(--rachi-radius-md);
    background: var(--rachi-warning-bg);
    color: var(--rachi-warning-text);
    font-size: 12.5px;
    line-height: 1.45;
  }
  .cart-notice[hidden] { display: none !important; }
  .cart-zone { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; font-size: 14px; }
  .cart-zone select {
    min-height: 40px;
    padding: 0 10px;
    border: 1px solid var(--rachi-border-default);
    border-radius: var(--rachi-radius-md);
    background: var(--rachi-bg-page);
    color: var(--rachi-text-primary);
    font: inherit;
    font-size: 14px;
  }
  .cart-ship { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; font-size: 13.5px; color: var(--rachi-text-secondary); }
  /* The UA gives [hidden] display:none from its OWN stylesheet, which any
     author rule outranks — so the line above kept this row on screen while the
     script had marked it hidden, printing a bare "Envío" with no amount above
     every total. Four siblings already carry this guard; this one did not. */
  .cart-ship[hidden] { display: none !important; }
  .cart-address { display: block; margin-bottom: 12px; font-size: 14px; }
  .cart-address[hidden] { display: none !important; }
  .cart-address span { display: block; margin-bottom: 6px; }
  .cart-address textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--rachi-border-default);
    border-radius: var(--rachi-radius-md);
    background: var(--rachi-bg-page);
    color: var(--rachi-text-primary);
    font: inherit;
    font-size: 14px;
    resize: vertical;
  }
  .cart-address textarea::placeholder { color: var(--rachi-text-muted); opacity: 1; }
  @media (max-width: 640px) {
    .cart-bar { bottom: 12px; }
    .cart-panel { bottom: 74px; max-height: 66vh; max-height: 66dvh; }
    .cart-open .cart-word { display: none; }
  }
  .navbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 12px 24px;
    background: var(--rachi-bg-surface);
    border-bottom: 1px solid var(--rachi-border-subtle);
    /* The bar's accent surface: without this the section's accent override
       had almost nothing to colour (search and cart are neutral chrome), so
       changing "Color" looked like it did nothing. */
    box-shadow: inset 0 -3px 0 0 var(--store-accent);
  }
  .navbar .brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--rachi-font-display);
    font-size: 17px;
    font-weight: 700;
    color: var(--rachi-text-primary);
    text-decoration: none;
    flex-shrink: 0;
  }
  .navbar .brand img { height: 30px; max-width: 150px; object-fit: contain; display: block; }
  /* Text brand (no logo) carries the accent — the most visible surface a
     store without a logo has. */
  .navbar .brand.text-brand { color: var(--store-accent-text); }
  .navbar .links { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
  .navbar .links a {
    font-size: 14px;
    font-weight: 500;
    color: var(--rachi-text-secondary);
    text-decoration: none;
  }
  .navbar .links a:hover { color: var(--store-accent-text); }
  .navbar .search {
    flex: 1;
    min-width: 120px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: var(--rachi-radius-full);
    border: 1px solid var(--rachi-border-subtle);
    background: var(--rachi-bg-page);
    color: var(--rachi-text-muted);
  }
  /* 16px, not 13px: beside a 17px brand the field read as an afterthought, and
     iOS Safari zooms the whole page when a field under 16px takes focus. */
  .navbar .search input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 16px;
    color: var(--rachi-text-primary);
    font-family: inherit;
    min-width: 0;
  }
  /* The visitor's theme toggle is FIXED at top:14/right:14 and 40px wide, and
     it paints above this bar (z 50 over 40). Measured on the live storefront,
     it covered the cart icon completely — 20px of icon inside 40px of button,
     at every desktop width. Reserving its corner is the only fix that holds:
     the toggle cannot know whether a navbar exists below it. */
  .navbar { padding-right: 64px; }
  .navbar .cart {
    color: var(--store-accent);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
  }
  .navbar button.cart { cursor: pointer; min-height: 44px; }
  .navbar .cart .cart-count {
    min-width: 18px;
    padding: 1px 5px;
    border-radius: var(--rachi-radius-full);
    background: var(--store-accent);
    color: var(--store-accent-contrast);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
  }
  /* A phone: three rows, in the order a thumb expects them.
     Row 1 — the brand at the left and the cart at the right, just inside the
     corner reserved for the theme toggle. Row 2 — the links, on a line of
     their own. Row 3 — the search, full width. Before this the children
     wrapped in DOM order: brand and links filled the first row, the cart fell
     to a second row by itself at the left, and the search came third —
     which read as a header that had broken rather than one that adapted. */
  /* The burger, hidden until a phone asks for it. Sized to the 44px tap target
     the audit holds every control to. */
  .navbar .nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--rachi-border-subtle);
    border-radius: 10px;
    background: transparent;
    color: var(--rachi-text-primary);
    cursor: pointer;
  }
  .navbar .nav-toggle:hover { background: var(--rachi-bg-elevated); }

  @media (max-width: 720px) {
    .navbar { flex-wrap: wrap; padding: 10px 64px 10px 16px; gap: 10px 12px; }
    .navbar .brand { order: 0; flex: 1 1 auto; min-width: 0; }
    .navbar .brand.text-brand { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .navbar .cart { order: 1; margin-left: auto; }
    .navbar .links { order: 2; flex-basis: 100%; gap: 6px 16px; }
    .navbar .search { order: 3; flex-basis: 100%; }

    /* «Botón de menú»: the links collapse behind the toggle and drop as a
       panel when it is pressed. Everything else on the bar keeps its place,
       so the brand, the cart and the search do not move when the menu opens.

       Toggled with a CLASS on the nav rather than the [hidden] attribute:
       [hidden] comes from the UA stylesheet and loses to any rule that sets
       display, which is exactly what the .links rule above does. */
    .navbar-burger .nav-toggle { display: inline-flex; order: 1; }
    .navbar-burger .cart { order: 2; margin-left: 0; }
    .navbar-burger .links { display: none; }
    .navbar-burger.nav-open .links,
    .navbar-burger.nav-closing .links {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      padding-top: 4px;
      border-top: 1px solid var(--rachi-border-subtle);
    }
    .navbar-burger.nav-open .links a,
    .navbar-burger.nav-closing .links a {
      padding: 12px 4px;
      border-bottom: 1px solid var(--rachi-border-subtle);
    }
    .navbar-burger.nav-open .links a:last-child,
    .navbar-burger.nav-closing .links a:last-child { border-bottom: 0; }

    /* «Desde un lado»: a drawer over the page instead of a panel that pushes
       it. The page keeps its scroll position, so a visitor who opens the menu
       by accident does not lose their place, and the links get the whole
       screen rather than shoving the article off the bottom.

       It is NOT a display change like the drop panel, so it needs none of that
       one's machinery: the drawer is always in the layout and travels on a
       transform, which transitions in BOTH directions by itself. visibility is
       what keeps it out of the tab order and away from a screen reader while
       it is shut, delayed on the way out so it outlives its own exit. */
    /* Where the drawer's own content starts: clear of the bar's row, so the
       first link never sits under the X. Declared here and overwritten by the
       script when the drawer opens, the way --store-navbar-height already
       works — a var() that only ever exists in JS drops its whole declaration
       for the frame before the script runs, and the guard in
       token-exists.test.ts refuses one. 68px is the X's row on a bare bar. */
    .navbar-burger.nav-side { --store-drawer-top: 68px; }
    .navbar-burger.nav-side .links,
    .navbar-burger.nav-side.nav-closing .links {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      position: fixed;
      /* The WHOLE height of the screen: the owner asked for the menu and
         nothing else — no search field, no cart, no announcement strip showing
         past its edge. Only the X stays on top of it, because the control that
         opened the drawer has to be the one that closes it.

         The content starts below the bar's row, and that number is MEASURED
         when the drawer opens: a fixed box cannot know where a STICKY bar
         currently sits, since above the fold an announcement band is still
         pushing it down. */
      inset: 0 auto 0 0;
      width: min(86vw, 340px);
      z-index: 70;
      padding: var(--store-drawer-top) 20px 24px;
      overflow-y: auto;
      overscroll-behavior: contain;
      background: var(--rachi-bg-surface);
      border-top: 0;
      border-right: 1px solid var(--rachi-border-subtle);
      box-shadow: var(--rachi-shadow-lg);
      transform: translateX(-101%);
      visibility: hidden;
      transition: transform 260ms cubic-bezier(0.2, 0, 0, 1), visibility 0s linear 260ms;
    }
    .navbar-burger.nav-side.nav-open .links {
      transform: none;
      visibility: visible;
      transition: transform 260ms cubic-bezier(0.2, 0, 0, 1), visibility 0s;
    }
    /* The scrim is a real button: tapping beside a drawer to shut it is what
       everyone expects, and a div would hand that gesture to a mouse alone. */
    .navbar-burger .nav-scrim {
      position: fixed;
      inset: 0;
      z-index: 69;
      padding: 0;
      border: 0;
      background: rgba(0, 0, 0, 0.4);
      opacity: 0;
      visibility: hidden;
      transition: opacity 260ms ease, visibility 0s linear 260ms;
    }
    .navbar-burger.nav-side.nav-open .nav-scrim {
      opacity: 1;
      visibility: visible;
      transition: opacity 260ms ease, visibility 0s;
    }
    /* The toggle ALONE rides above the drawer. The burger is the X: the
       control that opened the menu closes it, in the corner the thumb left it.
       Everything else on the bar stays under the drawer, which is the point of
       a full-height panel. */
    .navbar-burger.nav-side .nav-toggle { position: relative; z-index: 71; }
    /* An open drawer has to clear the page's own stacked things: the cart bar
       sits at 62 and the catalogue's filter sheet at 70. */
    .navbar-burger.nav-side.nav-open { z-index: 80; }

  }

  /* The panel is a display change, so it cannot be TRANSITIONED — an animation
     is what runs when an element appears, and it needs no @starting-style, so
     it works on every phone that will ever open this. The close is the mirror,
     driven from the script: .nav-closing holds the panel in the layout for
     exactly as long as the animation lasts.

     The whole block is behind no-preference rather than reset inside a
     reduce query, because the stagger below is keyed on :nth-child and would
     OUT-SPECIFY any reset: the delays would survive it, and with a both fill a
     link sits at opacity 0 for the length of its delay. Someone who asked for
     less movement would get a menu whose links arrive blank — the one thing
     reduced motion must never produce. Declaring the movement only for whoever
     wants it cannot fail that way. */
  @media (max-width: 720px) and (prefers-reduced-motion: no-preference) {
    /* :not(.nav-side) throughout — the drawer moves on a transform that
       transitions both ways by itself, and laying a keyframed slide over a
       transition on the same property makes one of them win at random. */
    .navbar-burger:not(.nav-side).nav-open .links { animation: nav-in 240ms cubic-bezier(0.2, 0, 0, 1) both; }
    .navbar-burger:not(.nav-side).nav-closing .links { animation: nav-out 160ms cubic-bezier(0.4, 0, 1, 1) both; }
    /* The links arrive just behind the panel, close enough together to read as
       one movement. Capped at six: past that the last link waits on a queue.
       The drawer gets them too: there the panel travels and the links fade in
       behind it, which is the same idea on a different axis. */
    .navbar-burger.nav-open .links > * { animation: nav-item-in 220ms cubic-bezier(0.2, 0, 0, 1) both; }
    .navbar-burger.nav-open .links > :nth-child(2) { animation-delay: 30ms; }
    .navbar-burger.nav-open .links > :nth-child(3) { animation-delay: 60ms; }
    .navbar-burger.nav-open .links > :nth-child(4) { animation-delay: 90ms; }
    .navbar-burger.nav-open .links > :nth-child(5) { animation-delay: 120ms; }
    .navbar-burger.nav-open .links > :nth-child(n + 6) { animation-delay: 150ms; }
  }

  @keyframes nav-in { from { opacity: 0; transform: translateY(-8px); } }
  @keyframes nav-out { to { opacity: 0; transform: translateY(-8px); } }
  @keyframes nav-item-in { from { opacity: 0; transform: translateY(-6px); } }

  /* The burger becomes the X that closes it: the top and bottom rules meet in
     the middle of the 24-unit box (y=7 and y=17 both travel 5 to y=12) and
     cross there, and the middle one leaves. Translate THEN rotate — the other
     order swings the line off the centre before it turns. The X itself is not
     movement for its own sake, so it stays under reduce; only its travel
     goes, which leaves the icon telling the truth about the menu's state. */
  .navbar .nav-toggle svg path {
    transform-box: view-box;
    transform-origin: 12px 12px;
    transition: transform 240ms cubic-bezier(0.2, 0, 0, 1), opacity 140ms ease;
  }
  .navbar.nav-open .nav-toggle svg path:nth-child(1) { transform: rotate(45deg) translateY(5px); }
  .navbar.nav-open .nav-toggle svg path:nth-child(2) { opacity: 0; }
  .navbar.nav-open .nav-toggle svg path:nth-child(3) { transform: rotate(-45deg) translateY(-5px); }

  @media (prefers-reduced-motion: reduce) {
    .navbar .nav-toggle svg path { transition-duration: 0.01ms; }
  }

  /* The catalogue's filter panel sticks at 16px, which is under this bar:
     measured at 1280px, the bar held 0-69px and covered the panel's first
     53px, its search field whole. Below a bar that sticks, the panel sticks
     16px below the bar's bottom edge. The bar's script writes its real height
     on the panel, so links that wrap to a second row (92px with eight at
     1280px, 127px at 861px) no longer cover it. Without the script it is the
     bar on one row: 12px of padding, the cart's 44px, 12px and the 1px rule.
     ".navbar ~ *" is a catalogue after the bar, in the box the bar sticks in:
     main on the home, body on a page that borrows it. A styled bar sticks in
     its .sec wrapper instead, with rules of its own. Only while the panel is
     a sidebar; at 860px and under it is a bottom sheet with top: auto.
     «Encabezado fijo» off puts the 16px back (appearance.ts). */
  @media (min-width: 861px) {
    .navbar ~ * .facets { --store-navbar-height: 69px; top: calc(var(--store-navbar-height) + 16px); }
  }

  .navbar .search { position: relative; }
  /* The field sets outline: 0 for its own box, which also took the store's one
     focus ring off it (.navbar .search input outranks input:focus-visible). The
     pill carries the ring instead — a combobox nobody can see focused is one a
     keyboard user cannot find. */
  .navbar .search:focus-within { outline: 2px solid var(--store-ring, var(--store-accent)); outline-offset: 2px; }
  .navbar .search input::placeholder { color: var(--rachi-text-muted); opacity: 1; }
  .navbar .suggest {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 45;
    max-height: min(70vh, 460px);
    overflow-y: auto;
    padding: 6px;
    background: var(--rachi-bg-surface);
    border: 1px solid var(--rachi-border-subtle);
    border-radius: 14px;
    box-shadow: var(--rachi-shadow-lg);
    color: var(--rachi-text-primary);
  }
  /* [hidden] comes from the UA stylesheet and loses to any rule that sets
     display; this one says it outright. */
  .navbar .suggest[hidden] { display: none; }
  .navbar .suggest-group + .suggest-group,
  .navbar .suggest-group + .suggest-all { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--rachi-border-subtle); }
  .navbar .suggest-label {
    padding: 8px 10px 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--rachi-text-muted);
  }
  .navbar .suggest [role="option"] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 6px 10px;
    border-radius: 10px;
    cursor: pointer;
  }
  .navbar .suggest [role="option"]:hover,
  .navbar .suggest [role="option"][aria-selected="true"] { background: var(--rachi-bg-page); }
  /* The active option is marked by a shape as well as a tint: on the dark base
     the tint alone is a step of a few percent. */
  .navbar .suggest [role="option"][aria-selected="true"] { box-shadow: inset 3px 0 0 var(--store-accent); }
  .navbar .suggest .thumb {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    object-fit: cover;
    background: var(--rachi-bg-muted);
    font-family: var(--rachi-font-display);
    font-weight: 700;
    color: var(--rachi-text-muted);
  }
  .navbar .suggest .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .navbar .suggest .name,
  .navbar .suggest .meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .navbar .suggest .name { font-size: 14px; font-weight: 600; line-height: 1.3; }
  .navbar .suggest .meta { font-size: 12.5px; color: var(--rachi-text-secondary); }
  .navbar .suggest .price {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--store-accent-text);
    font-variant-numeric: tabular-nums;
  }
  .navbar .suggest .suggest-all { font-size: 14px; font-weight: 600; color: var(--store-accent-text); }
  /* The live region that says how many suggestions there are: read, not seen. */
  .navbar .suggest-status {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
  /* A styled band clips what overflows it (that is how its rounded corners
     hold), and the list hangs below the bar. The band lets it out only while
     it is open. */
  .sec-band:has(.navbar .search [aria-expanded="true"]) { overflow: visible; }
  @media (max-width: 720px) {
    .navbar .suggest { max-height: 60vh; }
  }

  .hero {
    max-width: var(--store-content);
    margin: var(--store-gap) auto 0;
    width: calc(100% - var(--store-inset));
    padding: 32px 28px;
    border-radius: var(--rachi-radius-2xl);
    background: linear-gradient(135deg, var(--store-accent), var(--store-accent-strong));
    color: var(--store-accent-contrast);
    box-shadow: var(--rachi-shadow-lg);
  }
  .hero .logo {
    display: block;
    height: 48px;
    max-width: 200px;
    object-fit: contain;
    object-position: left center;
    margin-bottom: 16px;
    border-radius: var(--rachi-radius-sm);
  }
  .hero h1 {
    margin: 0;
    font-family: var(--rachi-font-display);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.6px;
    line-height: 1.1;
  }
  .hero .address {
    margin: 8px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    opacity: 0.92;
  }
  .hero .whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    padding: 11px 20px;
    border-radius: var(--rachi-radius-full);
    background: var(--store-accent-contrast);
    /* strong, not text. This pill is INVERTED — its fill is the ink — so its
       label is scored against THAT. accent-text is lightened by the dark block
       so it reads on the page's dark ground, and on this pill that measured
       2.65:1, below even the 3:1 this file's palette decision rests on.
       accent-strong is not overridden there, and in light the two hold the
       same value, so a light store renders exactly as before. */
    color: var(--store-accent-strong);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  }
  .hero .hero-copy .whatsapp:focus-visible { outline-color: var(--store-accent-contrast); }

  .hero .subheadline {
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.5;
    opacity: 0.95;
    max-width: 46ch;
  }

  .hero.hero-editorial {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: var(--rachi-bg-page);
    color: var(--rachi-text-primary);
    box-shadow: none;
  }
  .hero-editorial .editorial-photo {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    max-height: 72vh;
    object-fit: cover;
    object-position: 70% center;
  }
  .hero-editorial.copy-end .editorial-photo { object-position: 30% center; }
  .hero-editorial .editorial-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 28px max(16px, calc((100% - var(--store-content)) / 2)) 40px;
  }
  .hero.hero-editorial h1 {
    font-size: clamp(36px, 5.2vw, 68px);
    line-height: 1.04;
    letter-spacing: 0.01em;
  }
  .hero.hero-editorial .subheadline {
    margin: 18px 0 0;
    max-width: 42ch;
    font-size: 14px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rachi-text-secondary);
    opacity: 1;
  }
  .hero.hero-editorial .address { margin-top: 16px; color: var(--rachi-text-secondary); opacity: 1; }
  .hero.hero-editorial .whatsapp {
    margin-top: 28px;
    background: linear-gradient(135deg, var(--store-accent), var(--store-accent-strong));
    color: var(--store-accent-contrast);
  }
  @media (min-width: 861px) {
    .hero-editorial .editorial-copy { padding-block: 56px; }
    .hero.hero-editorial.editorial-has-photo {
      position: relative;
      overflow: hidden;
      isolation: isolate;
      display: flex;
      align-items: center;
      min-height: clamp(420px, 70vh, 640px);
      padding: 48px max(16px, calc((100% - var(--store-content)) / 2));
    }
    .hero-editorial.editorial-has-photo.copy-end { justify-content: flex-end; }
    .hero.hero-editorial.editorial-has-photo::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: linear-gradient(to right, color-mix(in srgb, var(--rachi-bg-page) 90%, transparent) 0, color-mix(in srgb, var(--rachi-bg-page) 90%, transparent) 54%, transparent 80%);
    }
    .hero.hero-editorial.editorial-has-photo.copy-end::before { background: linear-gradient(to left, color-mix(in srgb, var(--rachi-bg-page) 90%, transparent) 0, color-mix(in srgb, var(--rachi-bg-page) 90%, transparent) 54%, transparent 80%); }
    .hero-editorial.editorial-has-photo .editorial-photo {
      position: absolute;
      inset: 0;
      z-index: -2;
      height: 100%;
      max-height: none;
      aspect-ratio: auto;
    }
    .hero-editorial.editorial-has-photo .editorial-copy { max-width: 46%; padding: 0; }
  }

  .hero .hero-eyebrow {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.3em;
    text-transform: uppercase;
  }

  .hero.hero-editorial .hero-eyebrow { margin: 0 0 16px; letter-spacing: 0.25em; color: var(--rachi-text-secondary); }

  .hero.hero-editorial .hero-title-accent { display: block; color: var(--store-accent-text); }

  .hero .hero-title-ruled::after {
    content: "";
    display: block;
    width: 56px;
    height: 2px;
    margin-top: 14px;
    border-radius: var(--rachi-radius-full);
    background: currentColor;
  }
  .hero.hero-showcase .hero-title-ruled::after { margin-inline: auto; }

  .hero.hero-editorial .hero-title-ruled::after { background: var(--store-accent-text); }
  .features {
    max-width: var(--store-content);
    margin: var(--store-gap) auto 0;
    width: calc(100% - var(--store-inset));
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 28px;
    align-items: start;
  }
  .features .pitch h2 {
    margin: 0 0 12px;
    font-family: var(--rachi-font-display);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: var(--rachi-text-primary);
  }
  .features .pitch p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--rachi-text-secondary);
    white-space: pre-line;
  }
  .features .cta {
    display: inline-block;
    margin-top: 18px;
    padding: 10px 20px;
    border-radius: var(--rachi-radius-md);
    background: var(--store-accent);
    color: var(--store-accent-contrast);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
  }
  .features .cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .features .fcard {
    padding: 16px 18px;
    border-radius: var(--rachi-radius-lg);
    background: var(--rachi-bg-surface);
    border: 1px solid var(--rachi-border-subtle);
    box-shadow: var(--rachi-shadow-sm);
  }
  .features .fcard h3 {
    margin: 0 0 6px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--store-accent-text);
  }
  .features .fcard p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--rachi-text-secondary); }
  @media (max-width: 720px) {
    .features { grid-template-columns: 1fr; gap: 20px; }
    .features .cards { grid-template-columns: 1fr; }
  }
  .features.features-items { display: block; text-align: center; }
  .features.features-items .pitch { max-width: 60ch; margin: 0 auto 28px; }
  .features.features-items .items { list-style: none; margin: 0; padding: 0; }
  .features.features-items .fitem h3 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--rachi-text-primary); }
  .features.features-items .fitem p { margin: 4px 0 0; font-size: 12px; line-height: 1.45; color: var(--rachi-text-secondary); }
  .features.features-items .fitem-art { display: block; flex: none; color: var(--store-accent-text); }
  .features.features-items .fitem-art svg, .features.features-items .fitem-art img { display: block; }
  .features.features-items .fitem-art img { object-fit: contain; }
  .features.features-strip .items { display: flex; flex-wrap: wrap; justify-content: center; }
  .features.features-strip .fitem { flex: 1 1 200px; display: flex; align-items: center; gap: 14px; padding: 6px 22px; text-align: start; }
  .features.features-strip .fitem + .fitem { border-inline-start: 1px solid var(--rachi-border-default); }
  .features.features-strip .fitem-art svg, .features.features-strip .fitem-art img { width: 36px; height: 36px; }
  .features.features-strip .fitem-art svg { stroke-width: 1.4; }
  @media (max-width: 720px) {
    .features.features-strip .items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 8px; }
    .features.features-strip .fitem { padding: 0 6px; flex-direction: column; text-align: center; gap: 8px; }
    .features.features-strip .fitem + .fitem { border-inline-start: 0; }
  }
  .features .features-title-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .features {
    max-width: var(--store-content);
    margin: var(--store-gap) auto 0;
    width: calc(100% - var(--store-inset));
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 28px;
    align-items: start;
  }
  .features .pitch h2 {
    margin: 0 0 12px;
    font-family: var(--rachi-font-display);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: var(--rachi-text-primary);
  }
  .features .pitch p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--rachi-text-secondary);
    white-space: pre-line;
  }
  .features .cta {
    display: inline-block;
    margin-top: 18px;
    padding: 10px 20px;
    border-radius: var(--rachi-radius-md);
    background: var(--store-accent);
    color: var(--store-accent-contrast);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
  }
  .features .cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .features .fcard {
    padding: 16px 18px;
    border-radius: var(--rachi-radius-lg);
    background: var(--rachi-bg-surface);
    border: 1px solid var(--rachi-border-subtle);
    box-shadow: var(--rachi-shadow-sm);
  }
  .features .fcard h3 {
    margin: 0 0 6px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--store-accent-text);
  }
  .features .fcard p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--rachi-text-secondary); }
  @media (max-width: 720px) {
    .features { grid-template-columns: 1fr; gap: 20px; }
    .features .cards { grid-template-columns: 1fr; }
  }
  .features.features-items { display: block; text-align: center; }
  .features.features-items .pitch { max-width: 60ch; margin: 0 auto 28px; }
  .features.features-items .items { list-style: none; margin: 0; padding: 0; }
  .features.features-items .fitem h3 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--rachi-text-primary); }
  .features.features-items .fitem p { margin: 4px 0 0; font-size: 12px; line-height: 1.45; color: var(--rachi-text-secondary); }
  .features.features-items .fitem-art { display: block; flex: none; color: var(--store-accent-text); }
  .features.features-items .fitem-art svg, .features.features-items .fitem-art img { display: block; }
  .features.features-items .fitem-art img { object-fit: contain; }
  .features.features-circles .items { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 24px 16px; }
  .features.features-circles .fitem { display: flex; flex-direction: column; align-items: center; gap: 12px; }
  .features.features-circles .fitem-disc { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: color-mix(in srgb, var(--store-accent) 12%, var(--rachi-bg-surface)); }
  .features.features-circles .fitem-art svg { width: 38px; height: 38px; stroke-width: 1.4; }
  .features.features-circles .fitem-art img { width: 52px; height: 52px; }
  @media (max-width: 720px) {
    .features.features-circles .items { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 10px; }
    .features.features-circles .fitem-disc { width: 68px; height: 68px; }
  }
  @media (max-width: 400px) {
    .features.features-circles .items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  .image-cards {
    max-width: var(--store-content);
    margin: var(--store-gap) auto 0;
    width: calc(100% - var(--store-inset));
  }
  .image-cards-head { margin: 0 0 20px; }
  .image-cards-head h2 {
    margin: 0;
    font-family: var(--rachi-font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--rachi-text-primary);
  }
  .image-cards-head p {
    margin: 6px 0 0;
    max-width: 64ch;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--rachi-text-secondary);
  }
  .image-cards-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  /* One card is a card, not a banner. */
  .image-cards-c1 { max-width: 560px; }
  /* A card of its own, so what it says keeps the page's inks on any band. */
  .icard {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--rachi-border-subtle);
    border-radius: var(--rachi-radius-xl);
    background: var(--rachi-bg-surface);
    color: var(--rachi-text-primary);
    overflow-wrap: anywhere;
  }
  .icard .icard-photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--rachi-bg-muted);
  }
  .icard .icard-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 18px 20px;
  }
  .icard .icard-title {
    margin: 0;
    font-family: var(--rachi-font-display);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.04em;
    color: var(--rachi-text-primary);
  }
  .icard .icard-text { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--rachi-text-secondary); }
  /* At the foot of the card, so the buttons of a row line up. */
  .icard .icard-go { margin: auto 0 0; padding-top: 16px; }
  .icard .icard-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px 9px 18px;
    border-radius: var(--rachi-radius-full);
    background: var(--store-accent);
    color: var(--store-accent-contrast);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
  }
  .icard .icard-cta svg { flex: none; }
  @media (min-width: 641px) {
    .image-cards-list { gap: 20px; }
    .image-cards-c2, .image-cards-c3, .image-cards-c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  /* Three in two columns: the third is centred under the two, at their width. */
  @media (min-width: 641px) and (max-width: 860px) {
    .image-cards-c3 > .icard:last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 10px); }
  }
  @media (min-width: 861px) {
    .image-cards-c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  .sec-bg-solid .image-cards-head h2,
  .sec-bg-solid .image-cards-head p { color: var(--store-accent-contrast); }
  .imgtext {
    display: flex;
    align-items: center;
    gap: 28px;
    max-width: var(--store-content);
    margin: var(--store-gap) auto 0;
    width: calc(100% - var(--store-inset));
  }
  .imgtext.img-right { flex-direction: row-reverse; }
  .imgtext .imgtext-photo {
    flex: 0 0 44%;
    max-width: 44%;
    border-radius: var(--rachi-radius-xl);
    aspect-ratio: 4 / 3;
    object-fit: cover;
    box-shadow: var(--rachi-shadow-md);
  }
  .imgtext .imgtext-copy { flex: 1; min-width: 0; }
  .imgtext h2 {
    margin: 0;
    font-family: var(--rachi-font-display);
    font-size: 24px;
    color: var(--rachi-text-primary);
  }
  .imgtext p { margin: 12px 0 0; font-size: 15px; line-height: 1.65; color: var(--rachi-text-secondary); white-space: pre-line; }
  .imgtext .imgtext-cta {
    display: inline-block;
    margin-top: 18px;
    padding: 10px 22px;
    border-radius: var(--rachi-radius-full);
    background: var(--store-accent);
    color: var(--store-accent-contrast);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
  }
  @media (max-width: 640px) {
    .imgtext, .imgtext.img-right { flex-direction: column; }
    .imgtext .imgtext-photo { flex-basis: auto; max-width: 100%; width: 100%; }
  }
  .cta {
    max-width: var(--store-content);
    margin: var(--store-gap) auto 0;
    width: calc(100% - var(--store-inset));
    padding: 36px 28px;
    border-radius: var(--rachi-radius-xl);
    background: linear-gradient(115deg, var(--store-accent), var(--store-accent-strong));
    color: var(--store-accent-contrast);
    text-align: center;
  }
  .cta h2 { margin: 0; font-family: var(--rachi-font-display); font-size: 26px; }
  .cta p { margin: 10px auto 0; font-size: 15px; max-width: 52ch; opacity: 0.95; }
  .cta .cta-btn {
    display: inline-block;
    margin-top: 20px;
    padding: 12px 30px;
    border-radius: var(--rachi-radius-full);
    background: var(--store-accent-contrast);
    /* strong, not text. This pill is INVERTED — its fill is the ink — so its
       label is scored against THAT. accent-text is lightened by the dark block
       so it reads on the page's dark ground, and on this pill that measured
       2.65:1, below even the 3:1 this file's palette decision rests on.
       accent-strong is not overridden there, and in light the two hold the
       same value, so a light store renders exactly as before. */
    color: var(--store-accent-strong);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    box-shadow: var(--rachi-shadow-md);
  }
  .cta .cta-btn:focus-visible { outline-color: var(--store-accent-contrast); }
  .steps {
    max-width: var(--store-content);
    margin: var(--store-gap) auto 0;
    width: calc(100% - var(--store-inset));
  }
  .steps-head { margin: 0 0 20px; }
  .steps-head h2 {
    margin: 0;
    font-family: var(--rachi-font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--rachi-text-primary);
  }
  .steps-head p {
    margin: 6px 0 0;
    max-width: 64ch;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--rachi-text-secondary);
  }
  /* A column first: a phone always stacks, and «Horizontal» lines the steps up
     only where there is room for a row. */
  .steps-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
  /* align-content: start — a step in a row is stretched to the tallest one, and
     without it that height is shared out between its rows, pushing a shorter
     step's title below its neighbours'. */
  .step {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
    align-content: start;
  }
  .step-marker {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--rachi-radius-full);
    background: var(--store-accent);
    color: var(--store-accent-contrast);
  }
  /* 19px bold is large text: the accent's contrast ink clears that floor on its fill. */
  .step-num { font-size: 19px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
  .step-marker svg { width: 22px; height: 22px; }
  .step-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    box-sizing: border-box;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border: 2px solid var(--store-accent);
    border-radius: var(--rachi-radius-full);
    background: var(--rachi-bg-surface);
    color: var(--rachi-text-primary);
    font-size: 11px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
  }
  /* The line to the next step: decoration, drawn from under this marker to the next one. */
  .step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 21px;
    top: 52px;
    bottom: -14px;
    width: 2px;
    border-radius: 1px;
    background: color-mix(in srgb, var(--store-accent) 35%, transparent);
  }
  .step-body { min-width: 0; overflow-wrap: anywhere; }
  .step-title {
    margin: 10px 0 0;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--rachi-text-primary);
  }
  .step-text { margin: 6px 0 0; font-size: 14px; line-height: 1.6; color: var(--rachi-text-secondary); }
  @media (min-width: 721px) {
    .steps-horizontal .steps-list { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 20px; }
    .steps-horizontal .step { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
    .steps-horizontal .step-title { margin-top: 12px; }
    .steps-horizontal .step:not(:last-child)::after {
      left: calc(50% + 30px);
      top: 21px;
      bottom: auto;
      width: calc(100% - 40px);
      height: 2px;
    }
  }
  /* On the accent's own fill the marker inverts, like the hero's and the CTA's pills. */
  .sec-bg-solid .step-marker { background: var(--store-accent-contrast); color: var(--store-accent-strong); }
  .sec-bg-solid .step:not(:last-child)::after { background: color-mix(in srgb, var(--store-accent-contrast) 45%, transparent); }
  .sec-bg-solid .steps-head h2,
  .sec-bg-solid .steps-head p,
  .sec-bg-solid .step-title,
  .sec-bg-solid .step-text { color: var(--store-accent-contrast); }
  .section-head {
    max-width: var(--store-content);
    margin: var(--store-gap) auto 0;
    width: calc(100% - var(--store-inset));
    display: flex;
    align-items: baseline;
    justify-content: space-between;
  }
  .section-head h2 {
    margin: 0;
    font-family: var(--rachi-font-display);
    font-size: 19px;
    font-weight: 600;
  }
  .section-head .count { font-size: 13px; color: var(--rachi-text-muted); }
  .catalog {
    max-width: var(--store-content);
    margin: var(--store-gap-inner) auto 0;
    width: calc(100% - var(--store-inset));
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
  }
  /* A phone at 390px minus the 32px inset leaves 358px, and this grid had no
     breakpoint of its own: minmax(200px, 1fr) resolved to ONE column of 358px
     cards, which for a 252-item rentals catalog is ~6,000px of scrolling even
     after filtering. Two columns halve it.

     It belongs HERE, in the CSS every catalog ships, not in the filter
     module's: a shop that turns "Mostrar buscador y filtros" off still has
     customers on phones. */
  @media (max-width: 640px) {
    .catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  }
  .cell { position: relative; display: flex; }
  .cell > .card { flex: 1; min-width: 0; }
  /* The quick-add sits ON the photo, out of the link's way. 40px so a thumb
     hits it without hitting the card underneath. */
  .cell .add {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--rachi-radius-full);
    border: 1px solid var(--rachi-border-subtle);
    background: var(--rachi-bg-surface);
    color: var(--rachi-text-primary);
    box-shadow: var(--rachi-shadow-sm);
    cursor: pointer;
    padding: 0;
  }
  .cell .add .i-ok { display: none; }
  .cell .add[aria-pressed="true"] {
    background: var(--store-accent);
    border-color: var(--store-accent);
    color: var(--store-accent-contrast);
  }
  .cell .add[aria-pressed="true"] .i-add { display: none; }
  .cell .add[aria-pressed="true"] .i-ok { display: block; }
  .card {
    display: flex;
    flex-direction: column;
    border-radius: var(--rachi-radius-lg);
    background: var(--rachi-bg-surface);
    border: 1px solid var(--rachi-border-subtle);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--rachi-shadow-sm);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .card:hover { transform: translateY(-3px); box-shadow: var(--rachi-shadow-md); }
  .card .media { background: var(--rachi-bg-muted); }
  .card img, .card .placeholder {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
  }
  .card .placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
    font-weight: 700;
    font-family: var(--rachi-font-display);
    color: var(--rachi-text-muted);
  }
  .card-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 16px; }
  /* "En 3 colores" — a fact about the model, sized under the price it follows.
     When every colour has a photo the row shows those photos: the label a shop
     types is a word ("Carey", "Palo de rosa") and only the shop knows what it
     looks like, but the photo of that colour's own product does. */
  .card .variants { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--rachi-text-muted); }
  .card .variants img {
    width: 16px;
    height: 16px;
    border-radius: var(--rachi-radius-full);
    object-fit: cover;
    display: block;
    background: var(--rachi-bg-muted);
  }
  .card .name {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--rachi-text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .card .price {
    font-size: 15px;
    font-weight: 700;
    color: var(--store-accent-text);
    font-variant-numeric: tabular-nums;
  }
  .payments {
    max-width: var(--store-content);
    margin: var(--store-gap) auto 0;
    width: calc(100% - var(--store-inset));
  }
  .payments h2 {
    margin: 0 0 14px;
    font-size: clamp(20px, 3vw, 26px);
    line-height: 1.2;
  }
  .pay-ways { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
  .pay-ways li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    border: 1px solid var(--rachi-border-subtle);
    border-radius: var(--rachi-radius-full);
    background: var(--rachi-bg-surface);
    font-size: 14.5px;
    font-weight: 600;
  }
  .pay-ways svg { color: var(--store-accent-text); }
  .pay-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 0;
    padding: 12px 22px;
    border-radius: var(--rachi-radius-full);
    background: var(--store-accent);
    color: var(--store-accent-contrast);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
  }
  .payments .note {
    margin: 14px 0 0;
    max-width: 68ch;
    color: var(--rachi-text-secondary);
    font-size: 14.5px;
    line-height: 1.6;
  }
  .contact {
    /* The card spans the shared column (it used to be 640px, which floated it
       160px inside the page's left edge); its centred text is what stays
       narrow, via the measure on the elements below. */
    max-width: var(--store-content);
    margin: var(--store-gap) auto 0;
    width: calc(100% - var(--store-inset));
    padding: 28px;
    border: 1px solid var(--rachi-border-subtle);
    border-radius: var(--rachi-radius-xl);
    background: var(--rachi-bg-surface);
    text-align: center;
  }
  .contact h2 {
    margin: 0;
    font-family: var(--rachi-font-display);
    font-size: 22px;
    color: var(--rachi-text-primary);
  }
  .contact .contact-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 12px 0 0;
    font-size: 14.5px;
    color: var(--rachi-text-secondary);
  }
  .contact .contact-week {
    margin: 14px auto 0;
    max-width: 34ch;
    font-size: 14.5px;
  }
  .contact .contact-week > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 0;
    border-bottom: 1px solid var(--rachi-border-subtle);
  }
  .contact .contact-week > div:last-child { border-bottom: 0; }
  .contact .contact-week dt { color: var(--rachi-text-secondary); }
  .contact .contact-week dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .contact .contact-hours { margin: 12px auto 0; max-width: 48ch; font-size: 14.5px; line-height: 1.7; color: var(--rachi-text-secondary); white-space: pre-line; }
  .contact .directions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 18px 0 0 10px;
    padding: 10px 20px;
    border: 1px solid var(--rachi-border-default);
    border-radius: var(--rachi-radius-full);
    color: var(--rachi-text-primary);
    font-weight: 600;
    font-size: 14.5px;
    text-decoration: none;
  }
  .contact .directions:hover { border-color: var(--store-accent); }
  .contact .whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    padding: 11px 24px;
    border-radius: var(--rachi-radius-full);
    background: var(--store-accent);
    color: var(--store-accent-contrast);
    font-weight: 600;
    font-size: 14.5px;
    text-decoration: none;
  }
  .image-cards-overlay .icard { display: grid; }
  .image-cards-overlay .icard > * { grid-area: 1 / 1; }
  .image-cards-overlay .icard .icard-photo {
    justify-self: start;
    width: 62%;
    height: 100%;
    aspect-ratio: 93 / 100;
  }
  .image-cards-overlay .icard .icard-body {
    position: relative;
    justify-self: end;
    justify-content: center;
    width: clamp(9.5rem, 48%, 100%);
    padding: 16px 14px;
    background: var(--rachi-bg-surface);
  }
  .image-cards-overlay .icard .icard-body::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 100%;
    width: 24px;
    background: linear-gradient(to left, var(--rachi-bg-surface), transparent);
    pointer-events: none;
  }
  .image-cards-overlay .icard .icard-title { font-size: 15px; letter-spacing: 0; hyphens: auto; }
  .image-cards-overlay .icard .icard-text { margin-top: 4px; font-size: 13px; line-height: 1.45; }
  /* Centred as one block, the button with the words rather than at the foot. */
  .image-cards-overlay .icard .icard-go { margin-top: 0; padding-top: 12px; }
  .image-cards-overlay .icard .icard-cta { gap: 4px; padding: 6px 10px 6px 12px; font-size: 13px; }
  .image-cards-overlay.image-cards-start .icard .icard-photo { justify-self: end; }
  .image-cards-overlay.image-cards-start .icard .icard-body { justify-self: start; }
  .image-cards-overlay.image-cards-start .icard .icard-body::before {
    right: auto;
    left: 100%;
    background: linear-gradient(to right, var(--rachi-bg-surface), transparent);
  }
body{background:color-mix(in srgb, var(--store-accent) 12%, var(--rachi-bg-page))}:root{--store-pbg-accent-text:var(--store-accent-text)}body{--rachi-text-muted:var(--rachi-text-secondary);--store-accent-text:color-mix(in oklab, var(--store-pbg-accent-text) 80%, var(--rachi-text-primary));--store-ring:var(--rachi-text-primary)}.sec[class*=" sec-accent"]:not([class*=" sec-bg-"]){--store-pbg-accent-text:var(--store-accent-text)}.sec[class*=" sec-accent"]:not([class*=" sec-bg-"])>*{--store-accent-text:color-mix(in oklab, var(--store-pbg-accent-text) 80%, var(--rachi-text-primary))}.posts .posts-all{color:var(--store-accent-text)}body>.rachi-footer{--store-ring:var(--rachi-text-primary)}:is(main:has(> .shop-footer.shop-footer-dark:last-child) ~ .rachi-footer,main:has(> .sec:not(.sec-band):last-child > .shop-footer-dark) ~ .rachi-footer,main:has(> .sec.sec-bg-aurora:not(.sec-r-soft):not(.sec-r-round):last-child > .shop-footer-dark) ~ .rachi-footer,body > .shop-footer.shop-footer-dark ~ .rachi-footer,body > .sec:not(.sec-band):has(> .shop-footer-dark) ~ .rachi-footer,body > .sec.sec-bg-aurora:not(.sec-r-soft):not(.sec-r-round):has(> .shop-footer-dark) ~ .rachi-footer){--store-ring:var(--rachi-action-primary-text)}:is(.sec-bg-aurora,.sec-bg-aurora-bold,.sec-bg-gradient){background-color:var(--rachi-bg-page)}:root main h2:not([class]):not(.entry-copy h2){text-transform:uppercase;letter-spacing:.14em;font-weight:500;overflow-wrap:anywhere}:root main h2:not([class]):not(.entry-copy h2)::after{content:"\A\2003\2003\2003";white-space:pre;font-size:.5em;line-height:1.6;letter-spacing:0;text-decoration:underline 2px var(--store-accent-text);text-underline-offset:-.1em;text-decoration-skip-ink:none}:root main .cta h2:not([class])::after{text-decoration-color:currentColor}