/* aloetherapy.shop — public site theme, TRANSCRIBED from the design model
 * ~/design/aloetherapy.shop/claude-design/ (.dc.html files). The model is
 * the spec: every value here mirrors its inline styles 1:1 (the CSP forbids
 * inline styles in authored bodies, so model blocks become classes). Do NOT
 * re-interpret: change values only when the model (or Dani) changes.
 * Fonts self-hosted (CSP): Cormorant Garamond + Jost, variable woff2. */

/* ── Fonts ─────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/cormorantgaramond-400-700-italic-latin-ext-f3bda5.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/cormorantgaramond-400-700-italic-latin-4db21d.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/cormorantgaramond-400-700-normal-latin-ext-26a769.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/cormorantgaramond-400-700-normal-latin-abcaa8.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/jost-300-600-italic-latin-ext-012253.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/jost-300-600-italic-latin-e1618f.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/jost-300-600-normal-latin-ext-1bb29f.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/jost-300-600-normal-latin-b58a58.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Model base (Home v4 <style> + root div) ───────────────────────── */
:root {
    --al-green:      #008751;
    --al-gold:       #c69908;
    --al-orange:     #ffab01;
    --al-deep:       #0B4A2E;
    --al-deep-2:     #14603C;
    --al-cream:      #F7F3E8;
    --al-sage:       #cedfa7;
    --al-sage-soft:  #EFF4DE;
    --al-body:       #40584A;
    --al-body-soft:  #5F7A66;
    --al-line:       #E9E4D4;
    --al-footer:     #006B40;
    --font-display:  'Cormorant Garamond', Georgia, serif;
    --font-body:     'Jost', ui-sans-serif, system-ui, sans-serif;
    /* module-library mapping (styleguide parity; the site pages use al-*) */
    --mod-bg: #FFFFFF; --mod-fg: var(--al-body); --mod-muted: var(--al-body-soft);
    --mod-accent: var(--al-green); --mod-accent-fg: #fff; --mod-surface: #fff;
    --al-maxw: 1280px;
    /* One side gutter for the whole site (chrome, bands, content columns).
       The model's value is 56px; the responsive section shrinks it by
       breakpoint so every band narrows together, in one place. */
    --al-pad: 56px;
    /* ONE height for every header control (account, cart, language) so the
       cluster reads as a matched set — shrunk per breakpoint below. */
    --al-ctl: 38px;
    --mod-line: rgba(0, 135, 81, .14); --mod-radius: 18px; --mod-maxw: var(--al-maxw);
    --mod-space: 28px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
[hidden] { display: none !important; }

body.site {
    font-family: var(--font-body);
    font-weight: 450;
    color: var(--al-green);
    background: #FFFFFF;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
a { color: var(--al-green); text-decoration: none; }
a:hover { color: var(--al-gold); }
::selection { background: #FFE9BE; }
input::placeholder { color: #BFD39B; }

@keyframes aloe-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes aloe-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes aloe-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.aloe-shelf::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) {
    .al-marquee-track, .al-star-spin, .al-hero-chip { animation: none !important; }
}

h1, h2, h3 { font-family: var(--font-body); font-weight: 700; color: var(--al-green); margin: 0; }
h1 em, h2 em, h3 em { font-style: italic; color: var(--al-gold); }

/* ── Header (model: sticky white, nav | centered logo | actions) ───── */
.site-header {
    position: sticky; top: 0; z-index: 60;
    background: #FFFFFF; border-bottom: 1px solid var(--al-line);
    padding: 14px var(--al-pad);
}
.site-header { display: flex; justify-content: center; }
/* Signed-in admins carry the fixed admin toolbar — the sticky header must
   stick BELOW it, not slide underneath on scroll. */
.has-adminbar .site-header { top: var(--adminbar-h, 32px); }
.site-header-inner {
    width: 100%; max-width: var(--al-maxw);
    display: flex; align-items: center; justify-content: space-between; gap: 40px;
}
.site-nav, .site-actions {
    display: flex; align-items: center; gap: 32px;
    font-size: 15px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; flex: 1;
}
.site-actions { justify-content: flex-end; }
/* The end icons are a tight cluster (Dani 2026-07-27): account + cart sit
   together so the row gains room for the nav and the language pill. */
.site-actions-end { display: inline-flex; align-items: center; gap: 8px; }
/* Language leads the cluster but keeps its distance — it is a different kind
   of control from the account/cart pair, which stays glued (Dani 2026-07-27). */
.site-actions-end > .site-lang { margin-inline-end: 12px; }
.site-nav a, .site-actions a { color: var(--al-green); }
.site-nav a:hover, .site-actions a:hover { color: var(--al-gold); }
.site-nav a.on { color: var(--al-gold); }
.site-brand { display: flex; justify-content: center; }
.site-brand img { height: 58px; width: auto; display: block; }
.site-nav-sub { position: relative; display: inline-block; }
.site-nav-drop { position: absolute; inset-inline-start: 0; top: 100%; z-index: 70;
    display: none; flex-direction: column; gap: 10px; min-width: 190px;
    padding: 16px 20px; background: #fff; border: 1px solid var(--al-line);
    border-radius: 14px; box-shadow: 0 22px 50px rgba(0, 73, 44, .14); }
.site-nav-sub:hover .site-nav-drop, .site-nav-sub:focus-within .site-nav-drop { display: flex; }
/* Language dropdown (olga's pattern in aloe's clothes — CSS-only
   details/summary, no JS, scales past two languages). */
.site-lang { position: relative; }
.site-lang > summary {
    list-style: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 7px;
    height: var(--al-ctl); padding-inline: 14px; border-radius: 999px;
    border: 1px solid rgba(0, 135, 81, .3); color: var(--al-green);
    font-size: 13px; font-weight: 600; letter-spacing: .1em;
    transition: all .2s;
}
.site-lang > summary::-webkit-details-marker { display: none; }
.site-lang > summary:hover { border-color: var(--al-green); background: rgba(0, 135, 81, .07); }
.site-lang > summary svg { width: 14px; height: 14px; }
.site-lang > summary .chev { width: 10px; height: 10px; transition: transform .2s; }
.site-lang[open] > summary .chev { transform: rotate(180deg); }
.site-lang[open] > summary { border-color: var(--al-green); }
.site-lang-panel {
    position: absolute; inset-inline-end: 0; top: calc(100% + 8px);
    z-index: 70; padding: 8px;
    background: #FFFFFF; border: 1px solid var(--al-line); border-radius: 14px;
    box-shadow: 0 22px 50px rgba(0, 73, 44, .14);
    /* TWO columns (Dani 2026-07-27): with the ten-language programme a single
       column would run off the bar; the pairs keep the panel compact. */
    display: grid; grid-template-columns: 1fr 1fr; gap: 2px; min-width: 320px;
}
.site-lang-panel a {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 9px; font-size: 14px;
    letter-spacing: normal; text-transform: none; color: var(--al-body);
    white-space: nowrap;
}
.site-lang-panel a:hover { background: var(--al-sage-soft); color: var(--al-green); }
.site-lang-panel a.on { color: var(--al-green); font-weight: 600; }
.site-lang-panel a.on::after { content: '✓'; color: var(--al-gold); margin-inline-start: auto; font-size: 12px; }
.site-lang-panel .c { font-size: 11.5px; font-weight: 600; color: var(--al-body-soft); inline-size: 22px; }
/* Account icon — ghost pill, sibling shape to the cart (Dani 2026-07-27) */
.site-actions a.site-account {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--al-ctl); height: var(--al-ctl); border-radius: 999px;
    border: 1px solid rgba(0, 135, 81, .3); color: var(--al-green);
    transition: all .2s;
}
.site-actions a.site-account:hover { background: var(--al-green); border-color: var(--al-green); color: #FFFFFF; }
/* Cart pill (model: green pill "Cesta · N", orange on hover).
   .site-actions a wins on specificity — match it. */
.site-actions a.site-cart, .site-cart {
    color: #FFFFFF; background: var(--al-green); border-radius: 999px;
    padding: 10px 22px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px;
    transition: background .25s, color .25s;
}
.site-actions a.site-cart:hover, .site-cart:hover { background: var(--al-orange); color: var(--al-deep); }
.site-cart svg { display: none; }
.site-cart-n { font-weight: 600; }
.site-cart-n:empty { display: none; }   /* empty badge must never hold the 6px gap open */

/* Icon-only cart (Dani 2026-07-27: icon instead of the word): the model's
   text pill keeps its shape, the glyph replaces the label; the live count
   still rides .site-cart-n ("· N"). */
.site-cart svg { display: block; }
.site-actions a.site-cart, .site-cart { height: var(--al-ctl); padding: 0 16px; justify-content: center; }
/* One margin does both jobs (Dani): it separates the glyph from the count,
   and with the count hidden it becomes the right-side breathing room. */
.site-cart svg { margin-inline-end: 6px; }

/* ── Shared model atoms ────────────────────────────────────────────── */
.al-eyebrow { font-size: 14px; letter-spacing: .26em; text-transform: uppercase; color: var(--al-gold); font-weight: 600; }
.al-eyebrow--dash { display: flex; align-items: center; gap: 14px; }
.al-eyebrow--dash::before { content: ''; width: 40px; height: 1px; background: var(--al-gold); }
.al-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(0, 135, 81, .45); display: inline-block; }
.al-stars { color: var(--al-orange); letter-spacing: 2px; font-size: 13.5px; }
.al-pill {
    display: inline-block; border-radius: 999px; padding: 17px 38px;
    font-size: 15.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
    transition: all .25s; border: 0; cursor: pointer; font-family: var(--font-body);
}
.al-pill--cta { background: var(--al-orange); color: var(--al-deep); }
.al-pill--cta:hover { background: var(--al-green); color: #FFFFFF; }
.al-pill--ghost { background: transparent; color: var(--al-green); border: 1px solid rgba(0, 135, 81, .45); }
.al-pill--ghost:hover { border-color: var(--al-green); background: rgba(0, 135, 81, .07); color: var(--al-green); }
.al-pill--green { background: var(--al-green); color: #FFFFFF; }
.al-pill--green:hover { background: var(--al-orange); color: var(--al-deep); }
.al-container { max-width: var(--al-maxw); margin: 0 auto; }

/* ── Home: hero (#F7F3E8, watermark, split, arch, chips, marquee) ──── */
.al-hero { position: relative; background: var(--al-cream); min-height: 700px; display: flex; flex-direction: column; overflow: hidden; }
.al-hero-mark {
    position: absolute; top: -70px; right: -40px; font-family: var(--font-display);
    font-weight: 600; font-size: 420px; line-height: 1; color: transparent;
    -webkit-text-stroke: 1.5px rgba(0, 135, 81, .13); letter-spacing: .01em;
    pointer-events: none; user-select: none;
}
.al-hero-circle { position: absolute; bottom: 40px; left: -30px; width: 480px; height: 480px; border-radius: 50%; border: 1px solid rgba(0, 135, 81, .10); pointer-events: none; }
.al-hero-grid {
    position: relative; z-index: 5; flex: 1; max-width: var(--al-maxw); width: 100%;
    margin: 0 auto; padding: 80px var(--al-pad) 90px;
    display: grid; grid-template-columns: 1.15fr .85fr; gap: 60px; align-items: center;
}
.al-hero-copy { display: flex; flex-direction: column; gap: 30px; }
.al-hero-copy h1 { font-size: 74px; line-height: .98; text-wrap: balance; }
.al-hero-lead { margin: 0; font-size: 18.5px; line-height: 1.7; color: var(--al-body); font-weight: 400; max-width: 460px; text-wrap: pretty; }
.al-hero-cta { display: flex; align-items: center; gap: 20px; margin-top: 10px; }
.al-hero-art { position: relative; display: flex; justify-content: center; }
.al-hero-arch {
    background: #FFFFFF; border-radius: 240px 240px 0 0; width: 400px; height: 560px;
    overflow: hidden; box-shadow: 0 40px 90px rgba(0, 73, 44, .22);
    outline: 2px solid rgba(198, 153, 8, .55); outline-offset: -14px;
}
.al-hero-arch img { width: 100%; height: 100%; object-fit: cover; display: block; }
.al-hero-chip {
    position: absolute; background: rgba(255, 255, 255, .82); backdrop-filter: blur(6px);
    border: 1px solid rgba(198, 153, 8, .5); color: var(--al-deep-2); border-radius: 999px;
    padding: 12px 22px; font-size: 13.5px; letter-spacing: .16em; text-transform: uppercase;
    animation: aloe-float 7s ease-in-out infinite;
}
.al-hero-chip--a { top: 96px; left: -34px; }
.al-hero-chip--b { bottom: 72px; right: -18px; animation-duration: 8s; animation-delay: 1.2s; }
.al-marquee { position: relative; z-index: 6; background: var(--al-green); overflow: hidden; padding: 13px 0; }
.al-marquee-track {
    display: flex; width: max-content; animation: aloe-marquee 46s linear infinite;
    font-size: 13.5px; letter-spacing: .32em; text-transform: uppercase; color: var(--al-sage); font-weight: 600;
}
.al-marquee-track span { white-space: nowrap; }

/* ── Home: trust strip (#cedfa7) ───────────────────────────────────── */
.al-trust { background: var(--al-sage); padding: 22px var(--al-pad); }
.al-trust-row {
    max-width: var(--al-maxw); margin: 0 auto; display: flex; align-items: center; justify-content: center;
    gap: 20px; font-size: 14.5px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--al-deep-2); font-weight: 600; flex-wrap: wrap;
}

/* ── Home: manifesto (#EFF4DE) ─────────────────────────────────────── */
.al-manifest { background: var(--al-sage-soft); padding: 110px var(--al-pad) 100px; }
.al-manifest-inner { max-width: 980px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; gap: 36px; align-items: center; }
.al-manifest-line { font-family: var(--font-display); font-weight: 600; font-size: 58px; line-height: 1.22; color: var(--al-green); text-wrap: balance; }
.al-manifest-line em { font-style: normal; color: var(--al-gold); }
.al-manifest-pill { display: inline-block; width: 96px; height: 62px; border-radius: 999px; overflow: hidden; vertical-align: middle; margin: 0 10px; background: var(--al-sage); }
.al-manifest-pill img { width: 100%; height: 100%; object-fit: cover; }
.al-manifest-sub { display: flex; align-items: center; gap: 12px; font-size: 14.5px; letter-spacing: .08em; color: var(--al-body-soft); }
.al-manifest-sub .al-dot { background: var(--al-sage); width: 3px; height: 3px; }

/* ── Home: needs (white, 4 cards) ──────────────────────────────────── */
.al-needs { background: #FFFFFF; padding: 96px var(--al-pad) 110px; }
.al-needs-inner { max-width: var(--al-maxw); margin: 0 auto; display: flex; flex-direction: column; gap: 44px; }
.al-sect-center { display: flex; flex-direction: column; gap: 12px; align-items: center; text-align: center; }
.al-needs h2 { font-size: 43px; line-height: 1.02; }
.al-needs-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.al-need-card {
    background: #FFFFFF; border: 1px solid rgba(0, 135, 81, .14); border-radius: 18px;
    padding: 32px 24px 28px; display: flex; flex-direction: column; align-items: center;
    gap: 16px; text-align: center; color: var(--al-green);
    transition: transform .25s, box-shadow .25s;
}
.al-need-card:hover { transform: translateY(-5px); box-shadow: 0 22px 50px rgba(0, 73, 44, .14); color: var(--al-green); }
.al-need-ring { width: 116px; height: 116px; border-radius: 50%; background: var(--al-sage); border: 2px solid rgba(198, 153, 8, .4); overflow: hidden; }
.al-need-ring img { width: 100%; height: 100%; object-fit: cover; }
.al-need-title { font-family: var(--font-body); font-size: 22px; font-weight: 700; }
.al-need-desc { font-size: 15.5px; color: var(--al-body); font-weight: 400; line-height: 1.5; }
.al-need-more { font-size: 13.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--al-gold); font-weight: 600; white-space: nowrap; }

/* ── Home: product shelf (#F7F3E8, horizontal snap) ────────────────── */
.al-shelfband { background: var(--al-cream); padding: 100px 0 110px; overflow: hidden; }
.al-shelf-head {
    max-width: var(--al-maxw); margin: 0 auto 52px; padding: 0 var(--al-pad);
    display: flex; align-items: flex-end; justify-content: space-between; gap: 40px;
}
.al-shelf-head-copy { display: flex; flex-direction: column; gap: 14px; }
.al-shelf-head h2 { font-size: 52px; line-height: 1; }
.al-shelf-arrows { display: flex; align-items: center; gap: 14px; }
.al-shelf-arrow {
    width: 54px; height: 54px; border-radius: 50%; border: 1px solid #A8BD8C;
    background: transparent; color: var(--al-green); font-size: 22px; cursor: pointer;
    font-family: var(--font-body); transition: all .2s;
}
.al-shelf-arrow:hover { background: var(--al-green); color: #FFFFFF; border-color: var(--al-green); }
.aloe-shelf {
    display: flex; gap: 26px; overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-padding-left: var(--al-pad); padding: 10px var(--al-pad) 30px; scrollbar-width: none;
}
.al-shelf-card {
    scroll-snap-align: start; flex: 0 0 360px; background: #FFFFFF;
    border: 1px solid rgba(0, 135, 81, .09); border-radius: 18px; overflow: hidden;
    display: flex; flex-direction: column; position: relative;
    transition: transform .3s, box-shadow .3s; color: inherit;
}
.al-shelf-card:hover { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(0, 73, 44, .18); }
.al-shelf-media { position: relative; height: 340px; background: var(--al-cream); }
.al-shelf-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.al-offer {
    position: absolute; top: 18px; left: 18px; background: var(--al-orange); color: var(--al-deep);
    font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase;
    padding: 7px 15px; border-radius: 999px; font-weight: 600;
}
.al-shelf-body { display: flex; flex-direction: column; gap: 4px; padding: 22px 26px 26px; }
.al-shelf-cat { font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--al-body-soft); font-weight: 600; }
.al-shelf-name { font-family: var(--font-body); font-size: 23px; font-weight: 700; color: var(--al-green); line-height: 1.15; display: block; }
.al-shelf-rate { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 14.5px; color: var(--al-body-soft); }
.al-shelf-benefit { font-size: 15.5px; color: var(--al-body); font-weight: 400; line-height: 1.5; margin-top: 2px; }
.al-shelf-buyrow { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.al-shelf-price { display: flex; align-items: baseline; gap: 10px; }
.al-shelf-price strong { font-size: 21px; font-weight: 600; color: var(--al-green); }
.al-shelf-price s { font-size: 15.5px; color: #A8BD8C; }
.al-btn-add {
    background: transparent; border: 1px solid var(--al-green); color: var(--al-green);
    border-radius: 999px; padding: 10px 22px; font-family: var(--font-body);
    font-size: 13.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
    cursor: pointer; transition: all .2s; display: inline-block;
}
.al-btn-add:hover { background: var(--al-green); color: #FFFFFF; }

/* ── Home: star product (white, watermark, spin badge) ─────────────── */
.al-star { background: #FFFFFF; padding: 130px var(--al-pad); position: relative; overflow: hidden; }
.al-star-mark {
    position: absolute; top: 50%; left: -30px; transform: translateY(-50%) rotate(180deg);
    writing-mode: vertical-rl; font-family: var(--font-display); font-style: italic;
    font-size: 120px; color: rgba(198, 153, 8, .18); white-space: nowrap;
    pointer-events: none; user-select: none;
}
.al-star-grid { max-width: var(--al-maxw); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; }
.al-star-art { position: relative; display: flex; justify-content: center; }
.al-star-photo { width: 88%; max-width: 460px; aspect-ratio: 1 / 1; border-radius: 28px; overflow: hidden; box-shadow: 0 34px 80px rgba(0, 73, 44, .20); }
.al-star-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.al-star-spin { position: absolute; top: -24px; right: 2px; width: 150px; height: 150px; animation: aloe-spin 20s linear infinite; }
.al-star-spin text { font-family: var(--font-body); font-size: 13.5px; letter-spacing: .28em; text-transform: uppercase; fill: var(--al-gold); }
.al-star-copy { display: flex; flex-direction: column; gap: 24px; }
.al-star-copy h2 { font-size: 54px; line-height: 1.02; }
.al-star-lead { margin: 0; font-size: 18px; line-height: 1.7; font-weight: 400; color: var(--al-body); max-width: 470px; text-wrap: pretty; }
.al-star-rate { display: flex; align-items: center; gap: 10px; font-size: 15.5px; color: var(--al-body); }
.al-sizes { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.al-size {
    background: transparent; border: 1.5px solid #A8BD8C; color: var(--al-body);
    border-radius: 999px; padding: 11px 26px; font-family: var(--font-body);
    font-size: 15.5px; letter-spacing: .06em; font-weight: 600; cursor: pointer;
    transition: all .2s; white-space: nowrap; display: inline-block;
}
.al-size:hover { border-color: var(--al-green); color: var(--al-green); }
.al-size.is-on { background: var(--al-green); border-color: var(--al-green); color: #FFFFFF; }
.al-star-price { display: flex; align-items: baseline; gap: 16px; }
.al-star-price strong { font-family: var(--font-display); font-size: 52px; font-weight: 700; color: var(--al-green); }
.al-star-price s { font-size: 21px; color: #A8BD8C; }
.al-star-buy { display: flex; align-items: center; gap: 24px; }
.al-star-buy .al-pill--green { padding: 17px 42px; }
.al-star-ship { font-size: 14.5px; letter-spacing: .06em; color: var(--al-body-soft); }

/* ── Home: island band (photo, gradient, bottom center) ────────────── */
.al-isla { position: relative; height: 620px; overflow: hidden; }
.al-isla-inner {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    justify-content: flex-end; align-items: center; padding: 0 var(--al-pad) 64px; gap: 18px;
    text-align: center;
    background-image: linear-gradient(to top, rgba(0, 73, 44, .78) 0%, rgba(0, 73, 44, .35) 45%, rgba(0, 73, 44, .12) 100%);
}
.al-isla-photo { position: absolute; inset: 0; z-index: -1; }
.al-isla-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.al-isla-eyebrow { font-size: 14px; letter-spacing: .3em; text-transform: uppercase; color: var(--al-sage); font-weight: 600; text-shadow: 0 1px 12px rgba(0, 45, 20, .6); }
.al-isla-title { font-family: var(--font-body); font-weight: 700; font-size: 88px; line-height: .98; color: #FFFFFF; letter-spacing: .02em; text-shadow: 0 2px 30px rgba(0, 45, 20, .55); }
.al-isla-lead { margin: 0; font-size: 17.5px; font-weight: 400; color: #E8F2D9; max-width: 520px; line-height: 1.6; text-wrap: pretty; text-shadow: 0 1px 14px rgba(0, 45, 20, .65); }
.al-isla-cta {
    margin-top: 10px; color: #FFFFFF; border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 999px; padding: 14px 34px; font-size: 14.5px; letter-spacing: .12em;
    text-transform: uppercase; font-weight: 600; transition: all .25s;
}
.al-isla-cta:hover { background: #FFFFFF; color: var(--al-green); border-color: #FFFFFF; }

/* ── Home: reviews (#EFF4DE, 3 cards) ──────────────────────────────── */
.al-reviews { background: var(--al-sage-soft); padding: 110px var(--al-pad); }
.al-reviews-inner { max-width: var(--al-maxw); margin: 0 auto; display: flex; flex-direction: column; gap: 54px; }
.al-reviews h2 { font-size: 47px; line-height: 1; }
.al-reviews-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 26px; }
.al-review-card {
    background: #FFFFFF; border: 1px solid rgba(0, 135, 81, .08); border-radius: 18px;
    padding: 36px 32px; display: flex; flex-direction: column; gap: 18px;
}
.al-review-card .al-stars { letter-spacing: 3px; font-size: 15.5px; }
.al-review-quote { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 24px; line-height: 1.45; color: #2E4636; text-wrap: pretty; }
.al-review-author { font-size: 14px; letter-spacing: .16em; text-transform: uppercase; color: var(--al-body-soft); font-weight: 600; }

/* ── Home: ritual band (#008751, watermark, roman cols) ────────────── */
.al-ritual { background: var(--al-green); padding: 120px var(--al-pad); position: relative; overflow: hidden; }
.al-ritual-mark {
    position: absolute; bottom: -120px; right: -60px; font-family: var(--font-display);
    font-weight: 600; font-size: 340px; line-height: 1; color: transparent;
    -webkit-text-stroke: 1px rgba(255, 255, 255, .10); pointer-events: none; user-select: none;
}
.al-ritual-inner { max-width: var(--al-maxw); margin: 0 auto; display: flex; flex-direction: column; gap: 70px; }
.al-ritual-head { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.al-ritual-head .al-eyebrow { color: var(--al-orange); }
.al-ritual-head h2 { font-size: 50px; line-height: 1.04; color: #FFFFFF; }
.al-ritual-head h2 em { color: var(--al-orange); }
.al-ritual-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 60px; }
.al-gesto { display: flex; flex-direction: column; gap: 16px; border-top: 1px solid rgba(255, 255, 255, .22); padding-top: 28px; }
.al-gesto-n { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 74px; line-height: 1; color: var(--al-orange); }
.al-gesto-t { font-size: 18.5px; font-weight: 600; color: #FFFFFF; letter-spacing: .02em; }
.al-gesto p { margin: 0; font-size: 16.5px; line-height: 1.7; color: var(--al-sage); font-weight: 400; text-wrap: pretty; }

/* ── Home: seals (white) ───────────────────────────────────────────── */
.al-seals { background: #FFFFFF; padding: 76px var(--al-pad); }
.al-seals-inner { max-width: var(--al-maxw); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 30px; }
.al-seals-label { font-size: 14px; letter-spacing: .26em; text-transform: uppercase; color: var(--al-body-soft); font-weight: 600; }
.al-seals img { width: 100%; max-width: 1060px; height: auto; display: block; }

/* ── Footer (model: #006B40, 3-col, legal row — newsletter REMOVED on Dani's ask) ── */
.site-footer { background: var(--al-footer); color: #DCE9C2; padding: 100px var(--al-pad) 44px; position: relative; overflow: hidden; }
.site-footer-inner { max-width: var(--al-maxw); margin: 0 auto; display: flex; flex-direction: column; gap: 70px; }
.site-footer-cols { display: grid; grid-template-columns: 1fr auto 1fr; gap: 60px; align-items: center; }
.site-footer-col { display: flex; flex-direction: column; gap: 12px; font-size: 16px; font-weight: 400; }
.site-footer-col--end { text-align: right; }
.site-footer-col a { color: #DCE9C2; }
.site-footer-col a:hover { color: #FFFFFF; }
.site-footer-lockup { justify-self: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.site-footer-lockup img { width: 190px; height: auto; display: block; }
.site-footer-tag { margin: 0; font-size: 14.5px; line-height: 1.6; font-weight: 400; color: var(--al-sage); max-width: 300px; text-align: center; text-wrap: pretty; }
.site-footer-legal {
    border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 26px;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 14px; font-weight: 400; color: #B9CE97; letter-spacing: .04em;
    flex-wrap: wrap; gap: 12px 24px;
}
.site-footer-legal a { color: #B9CE97; }
.site-footer-legal a:hover { color: #FFFFFF; }
.site-footer-soc, .site-footer-law { display: flex; gap: 24px; }
.site-footer-law { gap: 18px; }

/* ── Interim: pages not yet transcribed from their models keep a sane
      readable column on the white base (Categoria/Producto model passes
      replace these next). ─────────────────────────────────────────── */
.site-main { flex: 1; width: 100%; }
.site-main > .entry, .site-main > .cart-wrap, .site-main > .checkout,
.site-main > .order-confirm, .site-main > .search-page, .site-main > .shop,
.site-main > .site-wrap {
    /* content box = chrome inner width: the 56px side padding sits OUTSIDE
       the 1280 (like header/footer), so content aligns with the chrome. */
    max-width: calc(var(--al-maxw) + var(--al-pad) * 2); margin-inline: auto; padding: 64px var(--al-pad);
    color: var(--al-body); font-weight: 400;
}
.site-wrap { display: block; }
.muted { color: var(--al-body-soft); }
.site-crumbs { margin-bottom: 28px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.site-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.site-crumbs li + li::before { content: "/"; color: var(--al-body-soft); margin-inline-end: 6px; }
.site-crumbs [aria-current] { color: var(--al-gold); }
.entry { line-height: 1.7; }
.entry h1, .entry h2, .entry h3 { margin: 1.4em 0 .5em; }
.entry > h1:first-child { margin-top: 0; }
.entry img { max-width: 100%; height: auto; border-radius: 18px; }
.shop-head { display: flex; flex-direction: column; gap: 18px; margin-bottom: 30px; }
.shop-controls { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; border-bottom: 1px solid rgba(0, 135, 81, .14); }
/* Category filter: slim one-line text tabs (nav language — Dani: the 9
   pills wrapped to two lines, too heavy). Never wraps; scrolls if tight. */
.shop-cats { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 26px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.shop-cats::-webkit-scrollbar { display: none; }
.shop-cats { align-items: center; padding-bottom: 12px; }
.shop-cats a { padding: 0; border: 0; background: none; border-radius: 0; color: var(--al-body); white-space: nowrap; }
.shop-cats a:hover { color: var(--al-green); }
/* Active tab (All by default) = filled pill, clearly marked (Dani). */
.shop-cats a.is-on { background: var(--al-green); color: #FFFFFF; border-radius: 999px; padding: 8px 18px; font-weight: 600; }
.shop-cats a.is-on:hover { color: #FFFFFF; }
/* Sort select: pill with our own gold chevron (appearance:none — the CSS
   ▾ rides a ::after, no image, CSP-clean) and house colors in the open
   list. Lifted off the divider rule (Dani: it sat glued to the line). */
.shop-sort { position: relative; display: inline-block; margin-bottom: 12px; }
.shop-sort label::after { content: '▾'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--al-gold); pointer-events: none; font-size: 13px; }
.shop-sort select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    padding: 9px 38px 9px 18px; border-radius: 999px;
    border: 1px solid rgba(0, 135, 81, .3); background: #fff;
    color: var(--al-body); font: inherit; font-size: 13px;
    letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
}
.shop-sort select:hover { border-color: var(--al-green); color: var(--al-green); }
.shop-sort select:focus { outline: 2px solid rgba(0, 135, 81, .25); outline-offset: 2px; }
.shop-sort option { color: var(--al-body); background: #FFFFFF; text-transform: none; letter-spacing: normal; }
/* Custom dropdown (site.js upgrades the sort select — the native popup
   cannot be themed): pill button + house-styled options panel. */
.al-select { position: relative; display: inline-block; }
.al-select-btn {
    appearance: none; border: 1px solid rgba(0, 135, 81, .3); background: #fff;
    border-radius: 999px; padding: 9px 38px 9px 18px; font: inherit; font-size: 13px;
    letter-spacing: .08em; text-transform: uppercase; color: var(--al-body);
    cursor: pointer; position: relative; min-width: 150px; text-align: left;
    font-family: var(--font-body);
}
.al-select-btn::after { content: '▾'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--al-gold); font-size: 13px; }
.al-select-btn:hover { border-color: var(--al-green); color: var(--al-green); }
.al-select[aria-expanded="true"] .al-select-btn { border-color: var(--al-green); }
.al-select-list {
    position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 40;
    min-width: 100%; background: #FFFFFF; border: 1px solid rgba(0, 135, 81, .16);
    border-radius: 14px; box-shadow: 0 22px 50px rgba(0, 73, 44, .14);
    padding: 8px; margin: 0; list-style: none; display: none;
}
.al-select[aria-expanded="true"] .al-select-list { display: block; }
.al-select-opt {
    padding: 9px 14px; border-radius: 9px; cursor: pointer; font-size: 14px;
    color: var(--al-body); white-space: nowrap;
}
.al-select-opt:hover { background: var(--al-sage-soft); color: var(--al-green); }
.al-select-opt.is-on { color: var(--al-green); font-weight: 600; }
.al-select-opt.is-on::after { content: ' ✓'; color: var(--al-gold); }
/* Galleries: 3-up on desktop (Dani — room for the card texts). */
.shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 980px) { .shop-grid { grid-template-columns: repeat(2, 1fr); } }
/* (phones stay 2-up too — see the RESPONSIVE section at the end) */
/* Shelf cards inside a GRID (catalog/related): auto media height by ratio
   instead of the scroller's fixed 340px. */
.shop-grid .al-shelf-media { height: auto; aspect-ratio: 1; }
.shop-card { background: #fff; border: 1px solid rgba(0, 135, 81, .09); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; gap: 4px; padding: 0 0 20px; position: relative; transition: transform .3s, box-shadow .3s; }
.shop-card:hover { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(0, 73, 44, .18); }
.shop-card img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--al-cream); }
.shop-card-ph { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; background: var(--al-cream); color: var(--al-green); opacity: .75; }
.shop-card .badge-sale { position: absolute; top: 18px; inset-inline-start: 18px; }
.badge-sale { background: var(--al-orange); color: var(--al-deep); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; padding: 7px 15px; border-radius: 999px; font-weight: 600; display: inline-block; }
.shop-card-name { font-family: var(--font-body); font-size: 20px; font-weight: 700; color: var(--al-green); line-height: 1.15; padding: 14px 22px 0; }
.shop-card-price { padding: 0 22px; font-size: 18px; font-weight: 600; color: var(--al-green); }
.shop-card-price s { font-size: 15px; color: #A8BD8C; margin-inline-start: 8px; font-weight: 400; }
.shop-card-out { padding: 0 22px; font-size: 14px; color: var(--al-body-soft); }
.shop-pager { display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 44px; flex-wrap: wrap; }
.shop-pager-n {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 46px; height: 46px; padding: 0 14px; border-radius: 999px;
    border: 1px solid rgba(0, 135, 81, .3); color: var(--al-green);
    font-weight: 600; font-size: 15.5px; transition: all .2s;
}
a.shop-pager-n:hover { border-color: var(--al-green); background: rgba(0, 135, 81, .07); color: var(--al-green); }
.shop-pager-n.is-on { background: var(--al-green); border-color: var(--al-green); color: #FFFFFF; }
.shop-pager-step {
    display: inline-flex; align-items: center; height: 46px; padding: 0 22px;
    border-radius: 999px; border: 1px solid rgba(0, 135, 81, .3); color: var(--al-green);
    font-size: 13.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; transition: all .2s;
}
.shop-pager-step:hover { background: var(--al-green); border-color: var(--al-green); color: #FFFFFF; }
.product-layout { display: grid; gap: 60px; align-items: start; }
/* 901, not 900: the responsive block below is max-width 900 and both would
   match at exactly 900px, leaving the two-column layout with mobile type. */
@media (min-width: 901px) { .product-layout { grid-template-columns: 1fr 1fr; } }
.product-cover { width: 100%; border-radius: 28px; box-shadow: 0 34px 80px rgba(0, 73, 44, .20); }
.product-summary h1 { font-size: 45px; line-height: 1.02; }
.product-price { font-family: var(--font-display); font-size: 44px; font-weight: 700; color: var(--al-green); margin: 14px 0; display: flex; align-items: baseline; gap: 14px; }
.product-price .price-was { font-family: var(--font-body); font-size: 21px; color: #A8BD8C; font-weight: 400; }
.product-price .badge-sale { font-size: 12.5px; }
.product-lead { color: var(--al-body); font-size: 17px; font-weight: 400; line-height: 1.7; max-width: 470px; }
.eyebrow { display: block; font-size: 14px; letter-spacing: .26em; text-transform: uppercase; color: var(--al-gold); font-weight: 600; margin-bottom: 12px; }
.size-pills { display: flex; flex-wrap: wrap; gap: 12px; margin: 14px 0; }
.size-pills a { border: 1.5px solid #A8BD8C; color: var(--al-body); border-radius: 999px; padding: 11px 26px; font-size: 15.5px; letter-spacing: .06em; font-weight: 600; }
.size-pills a:hover { border-color: var(--al-green); color: var(--al-green); }
.size-pills a.is-on { background: var(--al-green); border-color: var(--al-green); color: #fff; }
.product-qty-row { display: flex; gap: 14px; margin-top: 16px; align-items: center; }
.product-qty-row input[type=number] { width: 5em; padding: 12px; border-radius: 12px; border: 1px solid rgba(0, 135, 81, .3); background: #fff; color: inherit; font: inherit; }
.btn-buy { background: var(--al-green); border: none; color: #fff; padding: 17px 42px; border-radius: 999px; font-family: var(--font-body); font-size: 15.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; cursor: pointer; transition: background .25s; }
.btn-buy:hover { background: var(--al-orange); color: var(--al-deep); }
.btn-buy[disabled] { opacity: .5; cursor: not-allowed; }
.product-acc { border-top: 1px solid rgba(0, 135, 81, .18); margin-top: 28px; }
.product-acc details { border-bottom: 1px solid rgba(0, 135, 81, .18); }
.product-acc summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 16px 2px; color: var(--al-green); font-weight: 600; }
.product-acc summary::-webkit-details-marker { display: none; }
.product-acc summary::after { content: '+'; font-size: 1.3em; color: var(--al-gold); }
.product-acc details[open] summary::after { content: '–'; }
.product-acc .acc-body { padding: 0 2px 18px; color: var(--al-body); }
.product-related { margin-top: 64px; }
.product-related h2 { font-size: 37px; margin-bottom: 24px; }
.product-reviews { margin: 40px 0; }
.product-review { padding: 16px 0; border-top: 1px solid rgba(0, 135, 81, .14); }
.review-stars { color: var(--al-orange); letter-spacing: 2px; }
.product-review-form textarea { width: 100%; max-width: 560px; padding: 12px; border-radius: 12px; border: 1px solid rgba(0, 135, 81, .3); background: #fff; color: inherit; font: inherit; }
.gate-box { margin: 28px 0; padding: 22px 24px; border: 1px dashed rgba(198, 153, 8, .6); border-radius: 18px; }
.post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; }
.post-tag { padding: 4px 14px; border: 1px solid rgba(0, 135, 81, .2); border-radius: 999px; color: var(--al-body-soft); font-size: 13px; }
.cart-wrap { display: grid; gap: 32px; }
@media (min-width: 820px) { .cart-wrap { grid-template-columns: minmax(0,2fr) minmax(0,1fr); align-items: start; } }
.cart-line { display: grid; grid-template-columns: 1fr auto auto auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(0, 135, 81, .14); }
.cart-line.is-dead { opacity: .55; }
.cart-line-name { font-weight: 600; color: var(--al-green); }
.cart-line-opts { display: block; font-size: 13.5px; color: var(--al-body-soft); }
.cart-qty-form { display: flex; gap: 6px; align-items: center; }
.cart-qty-form input { width: 4em; padding: 8px; border-radius: 8px; border: 1px solid rgba(0, 135, 81, .3); background: #fff; color: inherit; }
.cart-line-price { font-weight: 600; white-space: nowrap; color: var(--al-green); }
.cart-x { border: 0; background: none; color: inherit; font-size: 1.3rem; cursor: pointer; opacity: .6; }
.cart-x:hover { opacity: 1; }
.cart-summary, .checkout-summary { background: var(--al-cream); border: 1px solid rgba(0, 135, 81, .1); border-radius: 18px; padding: 24px; }
.cart-total-row { display: flex; justify-content: space-between; padding: 6px 0; }
.cart-total-row--grand { font-weight: 600; font-size: 18px; color: var(--al-green); border-top: 1px solid rgba(0, 135, 81, .18); margin-top: 6px; padding-top: 12px; }
.cart-tax-note, .checkout-safe { font-size: 13.5px; margin: 10px 0; color: var(--al-body-soft); }
.checkout { display: grid; gap: 32px; }
@media (min-width: 820px) { .checkout { grid-template-columns: minmax(0,2fr) minmax(0,1fr); align-items: start; } }
.checkout-block { margin-bottom: 24px; }
.checkout-block h2 { font-size: 26px; margin: 0 0 12px; }
.checkout-block label { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: 14.5px; margin-bottom: 12px; }
.checkout-block input, .checkout-block textarea, .checkout-block select, .checkout-coupon input {
    padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(0, 135, 81, .3); background: #fff; color: inherit; font: inherit; }
.checkout-cols { display: grid; gap: 0 14px; }
@media (min-width: 560px) { .checkout-cols { grid-template-columns: 1fr 1fr; } }
.checkout-kind { display: flex; gap: 18px; margin-bottom: 12px; }
/* Check/radio labels are ROWS — .checkout-block label's column layout is
   for text fields only, and the input sizing rule must not inflate them. */
.checkout-block label.demo-check, .checkout-block label.checkout-ship {
    flex-direction: row; align-items: center; gap: 10px; }
.checkout-block input[type="checkbox"], .checkout-block input[type="radio"] {
    width: 16px; height: 16px; padding: 0; margin: 0; flex: none; accent-color: var(--al-green); }
.checkout-ship { padding: 8px 0; }
.checkout-ship .hint { font-size: 13px; color: var(--al-body-soft); }
.checkout-ship-price { margin-left: auto; font-weight: 600; }
.checkout-item { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; padding: 4px 0; }
.order-confirm { text-align: center; max-width: 560px; margin: 0 auto; }
.order-badge { width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; margin-bottom: 18px; background: var(--al-sage-soft); }
.order-badge--ok { background: #d7f5e3; color: #1a7a45; }
.order-badge--warn { background: #fdeaea; color: #c33; }
.order-lines { text-align: left; max-width: 420px; margin: 28px auto; border: 1px solid rgba(0, 135, 81, .14); border-radius: 12px; padding: 18px; background: #fff; }
.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; }

/* ── La Plantación (model: Plantacion.dc.html, values 1:1) ─────────── */
.al-p-hero { position: relative; height: 560px; overflow: hidden; }
.al-p-hero-photo { position: absolute; inset: 0; z-index: 0; }
.al-p-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.al-p-hero-inner {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    justify-content: flex-end; padding: 0 var(--al-pad) 70px;
    background: linear-gradient(to top, rgba(0, 73, 44, .78) 0%, rgba(0, 73, 44, .30) 50%, rgba(0, 73, 44, .10) 100%);
}
.al-p-hero-copy { max-width: var(--al-maxw); width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.al-p-hero-eyebrow { font-size: 14px; letter-spacing: .3em; text-transform: uppercase; color: var(--al-sage); font-weight: 600; text-shadow: 0 1px 12px rgba(0, 45, 20, .6); }
.al-p-hero h1 { font-size: 80px; line-height: .98; color: #FFFFFF; text-shadow: 0 2px 30px rgba(0, 45, 20, .55); }
.al-p-hero h1 em { color: var(--al-orange); }
.al-p-hero-lead { margin: 0; font-size: 19px; font-weight: 400; color: #E8F2D9; max-width: 560px; line-height: 1.6; text-wrap: pretty; text-shadow: 0 1px 14px rgba(0, 45, 20, .65); }
.al-p-stats { background: var(--al-green); padding: 34px var(--al-pad); }
.al-p-stats-grid { max-width: var(--al-maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; text-align: center; }
.al-p-stat strong { display: block; font-family: var(--font-display); font-size: 42px; font-weight: 700; color: #FFFFFF; line-height: 1; margin-bottom: 6px; }
.al-p-stat span { font-size: 13.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--al-sage); }
.al-p-band { padding: 110px var(--al-pad); }
.al-p-band--cream { background: var(--al-cream); }
.al-p-band--soft { background: var(--al-sage-soft); }
.al-p-cols { max-width: var(--al-maxw); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.al-p-cols--botanic { grid-template-columns: .8fr 1.2fr; align-items: center; }
.al-p-copy { display: flex; flex-direction: column; gap: 24px; }
.al-p-copy h2 { font-size: 47px; line-height: 1.04; }
.al-p-copy p { margin: 0; font-size: 18px; line-height: 1.75; font-weight: 400; color: var(--al-body); text-wrap: pretty; }
.al-p-photo { width: 100%; height: 460px; object-fit: cover; border-radius: 24px; display: block; box-shadow: 0 30px 70px rgba(0, 73, 44, .14); }
/* The model's image-slot placeholder — the real farm photo arrives from
   Dani later (design-placeholders doctrine: ship the SAME box). */
.al-p-slot {
    width: 100%; height: 520px; border-radius: 24px; background: var(--al-cream);
    border: 1px dashed rgba(0, 135, 81, .35); display: flex; align-items: center;
    justify-content: center; text-align: center; padding: 24px;
    color: var(--al-body-soft); font-size: 14.5px; letter-spacing: .08em;
}
.al-p-gestos { display: flex; flex-direction: column; gap: 22px; }
.al-p-gesto { display: flex; gap: 22px; align-items: baseline; }
.al-p-gesto-n { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 44px; line-height: 1; color: var(--al-orange); min-width: 40px; }
.al-p-gesto-t { font-size: 18px; font-weight: 600; color: var(--al-green); }
.al-p-gesto p { margin: 4px 0 0; font-size: 16.5px; line-height: 1.65; color: var(--al-body); font-weight: 400; text-wrap: pretty; }
.al-p-frame { border: 1px solid rgba(0, 135, 81, .14); border-radius: 24px; overflow: hidden; background: var(--al-cream); }
.al-p-frame img { width: 100%; height: auto; display: block; }
.al-p-caption { font-size: 13.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--al-body-soft); text-align: center; margin-top: 14px; }
.al-p-botanic-list { display: flex; flex-direction: column; gap: 30px; }
.al-p-botanic-item { border-top: 1px solid rgba(0, 135, 81, .18); padding-top: 22px; }
.al-p-botanic-item h3 { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 29px; color: var(--al-gold); margin: 0 0 8px; }
.al-p-botanic-item p { margin: 0; font-size: 16.5px; line-height: 1.7; font-weight: 400; color: var(--al-body); text-wrap: pretty; }
.al-p-mini { max-width: var(--al-maxw); margin: 50px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; border-top: 1px solid var(--al-line); padding-top: 40px; text-align: center; }
.al-p-mini strong { display: block; font-family: var(--font-display); font-size: 34px; font-weight: 700; color: var(--al-green); margin-bottom: 4px; }
.al-p-mini span { font-size: 13.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--al-body-soft); }
.al-p-band .al-sect-center { margin-bottom: 50px; }
.al-p-band .al-sect-center h2, .al-p-visit-inner h2 { font-size: 45px; line-height: 1.02; }
.al-p-history { max-width: var(--al-maxw); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.al-p-era { position: relative; border-top: 1px solid rgba(0, 135, 81, .3); padding-top: 26px; }
.al-p-era::before { content: ''; position: absolute; top: -6px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--al-orange); }
.al-p-era h3 { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 32px; color: var(--al-green); margin: 0 0 10px; }
.al-p-era p { margin: 0; font-size: 16px; line-height: 1.65; font-weight: 400; color: var(--al-body); text-wrap: pretty; }
.al-p-benefits { max-width: var(--al-maxw); margin: 50px auto 0; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 26px; }
.al-p-benefit { background: var(--al-cream); border-radius: 18px; padding: 38px 34px; }
.al-p-benefit h3 { font-family: var(--font-body); font-weight: 700; font-size: 24px; color: var(--al-green); margin: 0 0 14px; }
.al-p-benefit p { margin: 0; font-size: 16.5px; line-height: 1.7; font-weight: 400; color: var(--al-body); text-wrap: pretty; }
.al-p-cta { background: var(--al-green); padding: 100px var(--al-pad); position: relative; overflow: hidden; }
.al-p-cta-mark { position: absolute; top: -60px; right: -40px; font-family: var(--font-display); font-weight: 600; font-size: 300px; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .10); pointer-events: none; user-select: none; }
.al-p-cta-inner { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; position: relative; z-index: 2; }
.al-p-cta-inner .al-eyebrow { color: var(--al-orange); }
.al-p-cta-inner h2 { font-size: 50px; line-height: 1.04; color: #FFFFFF; }
.al-p-cta-inner h2 em { color: var(--al-orange); }
.al-p-cta-inner > p { margin: 0; font-size: 17.5px; line-height: 1.65; font-weight: 400; color: var(--al-sage); max-width: 560px; text-wrap: pretty; }
.al-p-cta-row { display: flex; align-items: center; gap: 20px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
.al-pill--cta-white:hover { background: #FFFFFF; color: var(--al-green); }
.al-pill--ghost-white { background: transparent; color: #FFFFFF; border: 1px solid rgba(255, 255, 255, .45); }
.al-pill--ghost-white:hover { border-color: #FFFFFF; background: rgba(255, 255, 255, .1); color: #FFFFFF; }
/* Visit form band (wired to the forms engine — the model's CTA was a dead link) */
.al-p-visit { background: #FFFFFF; padding: 100px var(--al-pad); }
.al-p-visit-inner { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 30px; text-align: center; }
.al-p-visit-inner h2 { font-size: 39px; }
.al-p-visit .m-form, .al-p-visit form { text-align: left; }

/* ── Contact page (template views/site/contact.php) ────────────────── */
.al-c-head { padding-bottom: 40px; }
.al-c-head h1 { font-size: 60px; line-height: 1; }
.al-c-lead { margin: 18px 0 0; font-size: 18.5px; line-height: 1.7; color: var(--al-body); font-weight: 400; max-width: 560px; }
/* Carries its own gutter (the plain .al-container has none, so below the 1280
   cap this grid used to run edge to edge). The cap grows by exactly the two
   gutters, so the CONTENT column now tracks the header and the .al-p-band
   above it at every width — measured 1188px @1300 and 1280px @1440, same x as
   .site-header-inner. Identical to the old geometry only from 1392 up; below
   that it is deliberately different, because the old one was misaligned. */
.al-c-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 80px; align-items: start; padding-bottom: 90px;
    max-width: calc(var(--al-maxw) + var(--al-pad) * 2); padding-inline: var(--al-pad); }
@media (max-width: 900px) { .al-c-grid { grid-template-columns: 1fr; gap: 40px; } }
.al-c-form form { display: flex; flex-direction: column; gap: 16px; }
.al-c-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--al-body-soft); font-weight: 600; }
.al-c-form input[type=text], .al-c-form input[type=email], .al-c-form textarea {
    padding: 13px 16px; border-radius: 14px; border: 1px solid rgba(0, 135, 81, .25);
    background: #fff; color: var(--al-body); font: inherit; font-size: 16px; }
.al-c-form input:focus, .al-c-form textarea:focus { outline: 2px solid rgba(0, 135, 81, .25); outline-offset: 1px; border-color: var(--al-green); }
.al-c-check { flex-direction: row !important; align-items: center; gap: 10px !important; text-transform: none !important; letter-spacing: normal !important; font-size: 14.5px !important; font-weight: 400 !important; color: var(--al-body) !important; }
.al-c-form button { align-self: flex-start; margin-top: 6px; }
.al-c-alert { border: 1px solid #c33; border-radius: 12px; padding: 12px 16px; color: #c33; font-size: 14.5px; }
.al-c-sent { background: var(--al-sage-soft); border-radius: 18px; padding: 40px; }
.al-c-sent h2 { font-size: 34px; margin-bottom: 10px; }
.al-c-aside { display: flex; flex-direction: column; gap: 22px; background: var(--al-cream); border-radius: 18px; padding: 36px 34px; }
.al-c-fact { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--al-body); font-weight: 400; }
.al-c-fact span { display: block; font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--al-gold); font-weight: 600; margin-bottom: 4px; }
.al-c-fact--note { border-top: 1px solid rgba(0, 135, 81, .14); padding-top: 18px; color: var(--al-body-soft); font-size: 14.5px; }
.al-c-muted { color: var(--al-body-soft); }
.al-c-map { height: 480px; }
.al-c-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ── Documentation layout (plain pages: info + legal) ──────────────── */
.site-main > .al-doc { max-width: calc(var(--al-maxw) + var(--al-pad) * 2); margin-inline: auto; padding: 64px var(--al-pad) 90px; display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 70px; align-items: start; color: var(--al-body); font-weight: 400; }
/* Collapses at the SAME width as the responsive block that reorders its two
   children — at 861-900 the swap used to drop the article into the 260px
   sidebar track (grid places items in order-modified document order). */
@media (max-width: 900px) { .site-main > .al-doc { grid-template-columns: 1fr; gap: 40px; } }
.al-doc-side { display: flex; flex-direction: column; gap: 34px; border-right: 1px solid rgba(0, 135, 81, .12); padding-right: 34px; }
@media (max-width: 900px) { .al-doc-side { border-right: 0; padding-right: 0; } }
.al-doc-group { display: flex; flex-direction: column; gap: 10px; }
.al-doc-group .al-eyebrow { margin-bottom: 4px; }
.al-doc-group a { color: var(--al-body); font-size: 15.5px; }
.al-doc-group a:hover { color: var(--al-green); }
.al-doc-group a.on { color: var(--al-green); font-weight: 600; border-inline-start: 2px solid var(--al-gold); padding-inline-start: 10px; margin-inline-start: -12px; }
.al-doc-body h1 { font-size: 39px; margin-bottom: 18px; }
.al-doc-body { line-height: 1.75; font-size: 16.5px; }
.al-doc-body h2 { font-size: 26px; margin: 1.6em 0 .5em; }
.al-doc-body a { color: var(--al-green); text-decoration: underline; text-decoration-color: rgba(0, 135, 81, .3); }
.al-doc-body a:hover { color: var(--al-gold); }
.al-doc-body table { border-collapse: collapse; margin: 20px 0; }
.al-doc-body th, .al-doc-body td { border: 1px solid rgba(0, 135, 81, .18); padding: 10px 16px; text-align: start; }
.al-doc-body th { color: var(--al-green); font-weight: 600; }

/* ── Site search results (core view, the theme owns its looks — it had
      NONE here, so it shipped as a bare browser list with the default
      yellow <mark>). House dress, no markup change. ─────────────────── */
.search-page h1 { font-size: 39px; margin-bottom: 24px; }
.search-page__form { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 36px; }
.search-page__form input[type=search] {
    flex: 1 1 260px; padding: 13px 20px; border-radius: 999px;
    border: 1px solid rgba(0, 135, 81, .25); background: #fff;
    color: var(--al-body); font: inherit; font-size: 16px;
}
.search-page__form input:focus { outline: 2px solid rgba(0, 135, 81, .25); outline-offset: 1px; border-color: var(--al-green); }
.search-page__form button {
    background: var(--al-green); border: 0; color: #FFFFFF; border-radius: 999px;
    padding: 13px 32px; font-family: var(--font-body); font-size: 13.5px;
    letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
    cursor: pointer; transition: background .25s, color .25s;
}
.search-page__form button:hover { background: var(--al-orange); color: var(--al-deep); }
.search-page__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.search-page__item { padding: 22px 0; border-top: 1px solid rgba(0, 135, 81, .14); }
.search-page__type { display: block; font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--al-gold); font-weight: 600; margin-bottom: 6px; }
.search-page__link { font-family: var(--font-body); font-size: 22px; font-weight: 700; color: var(--al-green); line-height: 1.2; }
.search-page__link:hover { color: var(--al-gold); }
.search-page__excerpt { margin: 8px 0 0; font-size: 16px; line-height: 1.65; color: var(--al-body); font-weight: 400; }
.search-page__excerpt mark { background: #FFE9BE; color: inherit; padding: 0 2px; border-radius: 3px; }
.search-page__empty { color: var(--al-body-soft); }

/* ── Cart/checkout leftovers of the stock demo-* namespace (core generic
      views): page head in the column, styled small buttons ──────────── */
.site-main > .demo-pagehead { max-width: calc(var(--al-maxw) + var(--al-pad) * 2); margin-inline: auto; padding: 64px var(--al-pad) 0; }
.demo-pagehead h1 { font-size: 45px; }
.site-main > .cart-wrap, .site-main > .checkout { padding-top: 28px; }
.site-main > .demo-empty, .site-main > .demo-alert { max-width: calc(var(--al-maxw) + var(--al-pad) * 2); margin-inline: auto; padding: 24px var(--al-pad) 90px; color: var(--al-body); font-weight: 400; }
.demo-alert { color: #c33; }
.demo-arrow { color: var(--al-green); font-weight: 400; }
.demo-arrow:hover { color: var(--al-gold); }
.demo-btn, .cart-qty-form button {
    background: transparent; border: 1px solid var(--al-green); color: var(--al-green);
    border-radius: 999px; padding: 8px 18px; font-family: var(--font-body);
    font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600;
    cursor: pointer; transition: all .2s; display: inline-block; text-decoration: none;
}
.demo-btn:hover, .cart-qty-form button:hover { background: var(--al-green); color: #FFFFFF; }
.demo-btn--primary { background: var(--al-green); color: #FFFFFF; border-color: var(--al-green); padding: 14px 30px; font-size: 14px; }
.demo-btn--primary:hover { background: var(--al-orange); color: var(--al-deep); border-color: var(--al-orange); }
.demo-btn--block { display: block; text-align: center; width: 100%; margin: 20px 0 14px; }

/* ── Bank-transfer instructions page (core view .transfer-*) ───────── */
.site-main > .transfer { max-width: 760px; margin-inline: auto; padding: 64px var(--al-pad) 90px; color: var(--al-body); font-weight: 400; }
.transfer h1 { font-size: 45px; margin-bottom: 16px; }
.transfer-lead { font-size: 17px; line-height: 1.7; max-width: 60ch; }
.transfer-box { margin: 30px 0 0; background: var(--al-cream); border-radius: 18px; padding: 10px 34px; }
.transfer-box > div { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 16px 0; border-bottom: 1px solid rgba(0, 135, 81, .12); }
.transfer-box > div:last-child { border-bottom: 0; }
.transfer-box dt { font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--al-gold); font-weight: 600; }
.transfer-box dd { margin: 0; font-size: 17px; color: var(--al-green); text-align: end; }
.transfer-amount { font-family: var(--font-display); font-size: 30px !important; font-weight: 700; }
.transfer-iban { font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.transfer-ref { font-weight: 600; }
.transfer-note { margin-top: 18px; font-size: 14.5px; color: var(--al-body-soft); }

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — the design models (.dc.html) are desktop-only (zero
   media queries), so the phone/tablet reading of this design is
   AUTHORED here, never transcribed. Rule of the pass: the desktop
   rules above are untouched; everything below only narrows, stacks
   and rescales, keeping the model's colours, fonts and rhythm.
   Breakpoints: 1180 (small laptop) · 900 (tablet portrait / burger)
   · 640 (phone). Side gutters ride --al-pad.
   ═════════════════════════════════════════════════════════════════ */

/* ── Burger (mobile chrome) ────────────────────────────────────────── */
.site-burger { display: none; }
/* With JS off there is no drawer, so the links would be unreachable on every
   phone: fall back to the plain stacked list and hide the dead button. This
   covers scripting DISABLED, not a script that fails to load — for that the
   only real answer is a CSS-only drawer, which the markup does not have. */
@media (max-width: 1120px) and (scripting: none) {
    .site-burger { display: none !important; }
    .site-nav, .site-actions-menu { display: flex !important; }
    .site-nav { border-top: 1px solid var(--al-line); padding-top: 6px; }
}
/* Desktop: the two action groups are transparent — the model's flat
   header row is exactly as transcribed. */
.site-actions-menu { display: contents; }
/* NOT display:contents (Dani 2026-07-27): the cluster must keep its own box
   so account · cart · language sit tight instead of inheriting the nav gap. */
.site-actions-end { display: inline-flex; align-items: center; gap: 8px; }

/* CHROME-ONLY tightening (Dani 2026-07-27): the language dropdown added
   ~90px to the header row, so "La plantación" wrapped to two lines between
   1200 and 1240 — MEASURED (bar 66px there vs 58px either side), the same
   way the burger's own threshold was found. Only the bar tightens; the
   1180 block below still owns the layout. */
@media (max-width: 1260px) {
    .site-header-inner { gap: 22px; }
    .site-nav, .site-actions { gap: 20px; font-size: 14px; }
    .site-lang > summary { padding-inline: 11px; gap: 5px; }
}

@media (max-width: 1180px) {
    :root { --al-pad: 40px; }
    .site-header-inner { gap: 24px; }
    .site-nav, .site-actions { gap: 22px; font-size: 14px; }
    .al-hero { min-height: 0; }
    .al-hero-grid { padding: 64px var(--al-pad) 72px; gap: 44px; }
    .al-hero-copy h1 { font-size: 58px; }
    .al-hero-mark { font-size: 300px; top: -40px; }
    .al-hero-arch { width: 340px; height: 480px; }
    .al-needs-grid { grid-template-columns: 1fr 1fr; }
    .al-shelf-head h2 { font-size: 42px; }
    .al-star-grid { gap: 56px; }
    .al-star-copy h2 { font-size: 44px; }
    .al-isla-title { font-size: 69px; }
    .al-ritual-grid { gap: 40px; }
    .al-p-hero h1 { font-size: 62px; }
    .al-p-cols { gap: 52px; }
    .al-p-history { grid-template-columns: 1fr 1fr; gap: 34px; }
    .al-c-head h1 { font-size: 49px; }
}

/* The chrome runs out of room BEFORE the layout does, so the burger has its
   own, higher breakpoint. MEASURED, not guessed: the header-right link renders
   two lines tall at every width up to 1100 and one line from 1110 — 1120 keeps
   a small buffer. (Re-measure after the ES pass: a language pill adds ~40px to
   the row and pushes this threshold up.) */
@media (max-width: 1120px) {
    /* Header → burger. .site-actions dissolves (display:contents) so its
       two groups become header-inner flex items and can be ordered:
       burger · lockup · account+cart in the bar, menus in the drawer. */
    .site-header { padding: 10px var(--al-pad); }
    .site-header-inner { flex-wrap: wrap; gap: 14px; }
    .site-burger {
        display: flex; flex-direction: column; justify-content: center; gap: 5px;
        order: 1; width: 44px; height: 44px; margin-inline-start: -10px;
        padding: 0 10px; background: none; border: 0; cursor: pointer;
    }
    .site-burger span { display: block; height: 2px; background: var(--al-green); border-radius: 2px; transition: transform .2s, opacity .2s; }
    .site-header.is-open .site-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .site-header.is-open .site-burger span:nth-child(2) { opacity: 0; }
    .site-header.is-open .site-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    /* Logo hugs the burger instead of floating centred in the leftover space,
       and rides a touch higher in the bar (Dani 2026-07-27). */
    .site-brand { order: 2; flex: 1; justify-content: flex-start; margin-inline-start: 2px; }
    .site-brand img { position: relative; top: -2px; }
    .site-brand img { height: 38px; }
    .site-actions { display: contents; }
    .site-actions-end { display: flex; order: 3; align-items: center; gap: 8px; }
    .site-nav, .site-actions-menu {
        /* flex: 1 from the desktop rule would keep them on the first line
           (flex-basis 0 beats width) — they must claim a whole row. */
        display: none; order: 4; flex: 0 0 100%; flex-direction: column;
        align-items: flex-start; gap: 0; font-size: 15px;
        max-height: 46vh; overflow-y: auto;
    }
    .site-actions-menu { order: 5; padding-bottom: 8px; }
    .site-header.is-open .site-nav,
    .site-header.is-open .site-actions-menu { display: flex; }
    /* :not(:empty) — an instance with no curated header menu renders an empty
       spacer span with this class; it must not draw a stray divider. */
    .site-header.is-open .site-nav:not(:empty) { border-top: 1px solid var(--al-line); padding-top: 6px; }
    .site-nav a, .site-actions-menu > a { width: 100%; padding: 13px 0; }
    .site-nav-sub, .site-nav-drop { position: static; display: block; }
    .site-nav-drop { border: 0; box-shadow: none; padding: 0 0 10px 16px; min-width: 0; }
    /* The language pill rides the BAR now (not the drawer): keep it compact
       and let its panel hang from the right edge without leaving the screen. */
    .site-lang > summary { padding-inline: 10px; gap: 4px; font-size: 12.5px; }
    .site-lang-panel { grid-template-columns: 1fr; min-width: 180px; }
    /* Must match the base rule's specificity (.site-actions a.site-cart,
       0-2-1) — media queries add none, so a bare .site-cart loses. */
    .site-actions a.site-cart, .site-cart { padding: 0 14px; font-size: 14px; }
    :root { --al-ctl: 36px; }
}

@media (max-width: 900px) {
    :root { --al-pad: 32px; }

    /* Hero */
    .al-hero-grid { grid-template-columns: 1fr; padding: 48px var(--al-pad) 56px; gap: 40px; }
    .al-hero-copy { gap: 22px; }
    .al-hero-copy h1 { font-size: 46px; }
    .al-hero-lead { font-size: 17px; max-width: none; }
    .al-hero-mark { font-size: 220px; top: -20px; right: -20px; }
    .al-hero-circle { width: 320px; height: 320px; bottom: auto; top: 30%; }
    /* The chips anchor to .al-hero-art (the only positioned ancestor), so the
       art box must BE the arch — otherwise left/right: 8px lands them on the
       bare cream, 134px off the photo at 768. */
    .al-hero-art { width: 100%; max-width: 420px; margin-inline: auto; }
    .al-hero-arch { width: 100%; height: 460px; }
    .al-hero-chip--a { top: 40px; left: 8px; }
    .al-hero-chip--b { bottom: 40px; right: 8px; }

    /* Bands: vertical rhythm halves, splits become one column */
    .al-manifest { padding: 72px var(--al-pad) 64px; }
    .al-manifest-line { font-size: 40px; }
    .al-manifest-pill { width: 74px; height: 48px; }
    .al-needs { padding: 64px var(--al-pad) 72px; }
    .al-needs h2 { font-size: 32px; }
    .al-shelfband { padding: 64px 0 72px; }
    .al-shelf-head { flex-direction: column; align-items: flex-start; gap: 22px; margin-bottom: 34px; }
    .al-shelf-head h2 { font-size: 34px; }
    .al-shelf-arrow { width: 46px; height: 46px; }
    .al-shelf-card { flex: 0 0 300px; }
    .al-shelf-media { height: 300px; }
    .al-shelf-name { font-size: 20px; }
    .al-star { padding: 72px var(--al-pad); }
    .al-star-mark { display: none; }
    .al-star-grid { grid-template-columns: 1fr; gap: 40px; }
    .al-star-art { order: -1; }
    .al-star-photo { width: 100%; }
    /* The badge hangs off the photo corner in the model; with a full-width
       photo there is no margin to hang into — it moves inside. */
    .al-star-spin { width: 100px; height: 100px; top: 10px; right: 10px; }
    .al-star-copy h2 { font-size: 34px; }
    .al-star-lead { font-size: 17px; max-width: none; }
    .al-star-price strong { font-size: 40px; }
    .al-isla { height: 460px; }
    .al-isla-inner { padding: 0 var(--al-pad) 48px; }
    .al-isla-title { font-size: 48px; }
    .al-isla-lead { font-size: 16.5px; }
    .al-reviews { padding: 72px var(--al-pad); }
    .al-reviews-inner { gap: 36px; }
    .al-reviews h2 { font-size: 32px; }
    .al-reviews-grid { grid-template-columns: 1fr; gap: 18px; }
    .al-review-card { padding: 28px 26px; }
    .al-review-quote { font-size: 21px; }
    .al-ritual { padding: 76px var(--al-pad); }
    .al-ritual-inner { gap: 44px; }
    .al-ritual-head h2 { font-size: 34px; }
    .al-ritual-grid { grid-template-columns: 1fr; gap: 34px; }
    .al-gesto-n { font-size: 56px; }
    .al-seals { padding: 56px var(--al-pad); }

    /* Footer: one centred column, lockup on top */
    .site-footer { padding: 64px var(--al-pad) 36px; }
    .site-footer-inner { gap: 44px; }
    .site-footer-cols { grid-template-columns: 1fr; gap: 36px; text-align: center; }
    .site-footer-col { align-items: center; }
    .site-footer-col--end { text-align: center; }
    .site-footer-lockup { order: -1; }
    .site-footer-legal { justify-content: center; text-align: center; }

    /* Content pages */
    .site-main > .entry, .site-main > .cart-wrap, .site-main > .checkout,
    .site-main > .order-confirm, .site-main > .search-page, .site-main > .shop,
    .site-main > .site-wrap { padding: 44px var(--al-pad); }
    .site-main > .demo-pagehead { padding: 44px var(--al-pad) 0; }
    .site-main > .al-doc { padding: 44px var(--al-pad) 64px; }
    .site-main > .transfer { padding: 44px var(--al-pad) 64px; }
    .demo-pagehead h1 { font-size: 34px; }
    .transfer h1 { font-size: 34px; }
    .search-page h1 { font-size: 30px; }
    .search-page__link { font-size: 19px; }
    .al-doc-body h1 { font-size: 30px; }
    .al-doc-body h2 { font-size: 23px; }
    /* Stacked, the sidebar would push the page the reader asked for below
       a screenful of links — it becomes a "more documents" footer instead. */
    .al-doc-body { order: 1; }
    .al-doc-side {
        order: 2; border-bottom: 0; padding-bottom: 0;
        border-top: 1px solid rgba(0, 135, 81, .12); padding-top: 30px;
    }
    .product-summary h1 { font-size: 34px; }
    .product-price { font-size: 36px; }
    .product-related h2 { font-size: 27px; }
    .product-layout { gap: 36px; }
    .shop-card-name { font-size: 18px; }

    /* Contact + Plantación */
    .al-c-head h1 { font-size: 37px; }
    .al-c-lead { font-size: 17px; }
    .al-c-aside { padding: 28px 26px; }
    .al-c-map { height: 360px; }
    .al-p-hero { height: 440px; }
    .al-p-hero-inner { padding: 0 var(--al-pad) 48px; }
    .al-p-hero h1 { font-size: 42px; }
    .al-p-hero-lead { font-size: 17px; }
    .al-p-stats { padding: 28px var(--al-pad); }
    .al-p-stats-grid { gap: 24px; }
    .al-p-stat strong { font-size: 32px; }
    .al-p-band { padding: 72px var(--al-pad); }
    /* The band shorthand above resets .al-c-head's tighter bottom padding
       (same specificity, later in the file) — restate it, scaled. */
    .al-c-head { padding-bottom: 28px; }
    .al-p-cols, .al-p-cols--botanic { grid-template-columns: 1fr; gap: 36px; }
    .al-p-copy h2 { font-size: 32px; }
    .al-p-copy p { font-size: 17px; }
    .al-p-photo { height: 320px; }
    .al-p-slot { height: 300px; }
    .al-p-mini { grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 36px; padding-top: 30px; }
    .al-p-mini strong { font-size: 28px; }
    .al-p-band .al-sect-center { margin-bottom: 34px; }
    .al-p-band .al-sect-center h2, .al-p-visit-inner h2 { font-size: 32px; }
    .al-p-history { grid-template-columns: 1fr; gap: 30px; }
    .al-p-benefits { grid-template-columns: 1fr; gap: 18px; margin-top: 34px; }
    .al-p-benefit { padding: 30px 28px; }
    .al-p-cta { padding: 72px var(--al-pad); }
    .al-p-cta-mark { font-size: 190px; }
    .al-p-cta-inner h2 { font-size: 34px; }
    .al-p-visit { padding: 72px var(--al-pad); }
}

@media (max-width: 640px) {
    :root { --al-pad: 20px; }

    .site-header-inner { gap: 10px; }
    .site-brand img { height: 30px; }
    /* Phones: the three controls close ranks — the extra breathing room the
       language pill gets on desktop is width the bar cannot spare here. */
    .site-actions-end { gap: 8px; }
    .site-actions-end > .site-lang { margin-inline-end: 0; }
    :root { --al-ctl: 33px; }
    .site-actions a.site-cart, .site-cart { padding: 0 12px; font-size: 13px; letter-spacing: .1em; }
    .site-lang > summary { padding-inline: 8px; }
    .site-lang > summary svg:first-child { display: none; }   /* code + chevron is enough at 360px */
    .site-account svg { width: 19px; height: 19px; }

    /* Type: one step down across the display scale */
    .al-hero-grid { padding: 36px var(--al-pad) 44px; }
    .al-hero-copy h1 { font-size: 34px; }
    .al-hero-lead { font-size: 16px; }
    /* Two pills of different widths read as ragged when they stack — the
       phone gets one tidy column of full-width buttons. */
    .al-hero-cta { flex-direction: column; align-items: stretch; gap: 12px; }
    .al-hero-cta .al-pill { padding: 15px 28px; font-size: 14px; text-align: center; }
    .al-hero-mark { font-size: 160px; }
    .al-hero-circle { width: 240px; height: 240px; }
    .al-hero-arch { height: 380px; border-radius: 190px 190px 0 0; }
    .al-hero-chip { padding: 9px 16px; font-size: 12px; }
    .al-marquee-track { font-size: 12px; letter-spacing: .24em; }
    .al-trust-row { gap: 10px; font-size: 12.5px; }
    .al-manifest { padding: 56px var(--al-pad) 52px; }
    .al-manifest-inner { gap: 26px; }
    .al-manifest-line { font-size: 30px; }
    .al-manifest-pill { width: 58px; height: 38px; margin: 0 6px; }
    .al-needs { padding: 52px var(--al-pad) 56px; }
    .al-needs-inner { gap: 30px; }
    .al-needs h2 { font-size: 27px; }
    .al-needs-grid { grid-template-columns: 1fr; gap: 16px; }
    .al-need-card { padding: 26px 22px 24px; }
    .al-need-ring { width: 96px; height: 96px; }
    .al-need-title { font-size: 20px; }
    .al-shelfband { padding: 52px 0 56px; }
    .al-shelf-head h2 { font-size: 28px; }
    .al-shelf-arrows { display: none; }   /* swipe is the gesture here */
    .al-shelf-card { flex: 0 0 78vw; }
    .al-shelf-media { height: auto; aspect-ratio: 1; }
    .al-shelf-body { padding: 18px 20px 22px; }
    .al-star { padding: 56px var(--al-pad); }
    .al-star-copy { gap: 18px; }
    .al-star-copy h2 { font-size: 28px; }
    .al-star-price strong { font-size: 34px; }
    .al-star-buy { flex-wrap: wrap; gap: 14px; }
    .al-star-buy .al-pill--green { padding: 15px 30px; }
    .al-sizes { flex-wrap: wrap; gap: 10px; }
    .al-size { padding: 10px 20px; font-size: 14.5px; }
    .al-isla { height: 400px; }
    .al-isla-inner { padding: 0 var(--al-pad) 40px; }
    .al-isla-title { font-size: 35px; }
    .al-isla-lead { font-size: 15.5px; }
    .al-reviews { padding: 56px var(--al-pad); }
    .al-reviews h2 { font-size: 27px; }
    .al-ritual { padding: 60px var(--al-pad); }
    .al-ritual-head h2 { font-size: 28px; }
    .al-ritual-mark { font-size: 200px; bottom: -70px; }
    .al-gesto-n { font-size: 46px; }
    /* Seals are ONE image of nine marks: squeezed into 350px they turn to
       mush, so the strip keeps a legible size and scrolls sideways. */
    .al-seals { padding: 44px 0; }
    .al-seals-inner { align-items: stretch; overflow-x: auto; scrollbar-width: none; }
    .al-seals-inner::-webkit-scrollbar { display: none; }
    .al-seals-label { text-align: center; padding-inline: var(--al-pad); }
    .al-seals img { width: 560px; max-width: none; }
    .site-footer { padding: 52px var(--al-pad) 30px; }
    .site-footer-inner { gap: 36px; }
    .site-footer-legal { flex-direction: column; gap: 14px; }
    .site-footer-soc, .site-footer-law { flex-wrap: wrap; justify-content: center; gap: 14px; }

    /* Content pages */
    .site-main > .entry, .site-main > .cart-wrap, .site-main > .checkout,
    .site-main > .order-confirm, .site-main > .search-page, .site-main > .shop,
    .site-main > .site-wrap { padding: 34px var(--al-pad); }
    .site-main > .demo-pagehead { padding: 34px var(--al-pad) 0; }
    .site-main > .al-doc, .site-main > .transfer { padding: 34px var(--al-pad) 52px; }
    .demo-pagehead h1, .transfer h1, .search-page h1 { font-size: 28px; }
    .search-page__form button { flex: 1 1 auto; }
    .search-page__link { font-size: 18px; }
    .al-doc-body h1 { font-size: 26px; }
    .al-doc-body { font-size: 16px; }
    .al-doc-body table { display: block; overflow-x: auto; max-width: 100%; }

    /* Shop: the category tabs scroll edge to edge */
    .shop-controls { flex-direction: column; align-items: stretch; gap: 14px; }
    .shop-cats { margin-inline: calc(var(--al-pad) * -1); padding-inline: var(--al-pad); }
    .shop-sort { align-self: flex-start; margin-bottom: 10px; }
    /* Two up, like every phone catalogue: one column turned 34 products
       into an endless scroll. The card sheds the excerpt and stacks its
       buy row so the pair still breathes at ~165px. */
    .shop-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
    .shop-grid .al-shelf-body { padding: 14px 14px 18px; gap: 2px; }
    .shop-grid .al-shelf-cat { font-size: 11px; letter-spacing: .12em; }
    .shop-grid .al-shelf-name { font-size: 16px; }
    .shop-grid .al-shelf-benefit { display: none; }
    .shop-grid .al-shelf-buyrow { flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 10px; }
    .shop-grid .al-shelf-price strong { font-size: 18px; }
    .shop-grid .al-btn-add { padding: 9px 16px; font-size: 12px; letter-spacing: .1em; }
    .shop-grid .al-offer { top: 10px; left: 10px; padding: 5px 11px; font-size: 11px; }
    .shop-card-name { font-size: 16px; padding: 12px 14px 0; }
    .shop-card-price, .shop-card-out { padding-inline: 14px; }

    /* Product: the buy row is thumb-sized */
    .product-summary h1 { font-size: 28px; }
    .product-price { font-size: 30px; }
    .product-lead { font-size: 16px; }
    .product-qty-row { flex-wrap: wrap; }
    .product-qty-row .btn-buy { flex: 1 1 auto; padding: 16px 24px; }
    .product-related h2 { font-size: 24px; }
    .size-pills a { padding: 10px 20px; font-size: 14.5px; }

    /* Cart: name+remove on top, qty+price below */
    .cart-line {
        grid-template-columns: 1fr auto;
        grid-template-areas: "main x" "qty price";
        row-gap: 12px; padding: 16px 0;
    }
    .cart-line-main { grid-area: main; }
    .cart-line-qty { grid-area: qty; }
    .cart-line-price { grid-area: price; align-self: center; }
    .cart-line-remove { grid-area: x; }
    .cart-summary, .checkout-summary { padding: 20px; }
    .checkout-block h2 { font-size: 22px; }
    .checkout-block input, .checkout-block textarea, .checkout-block select { width: 100%; }

    /* Contact + Plantación */
    .al-c-head h1 { font-size: 30px; }
    .al-c-lead { font-size: 16px; }
    .al-c-grid { gap: 32px; padding-bottom: 56px; }
    .al-c-aside { padding: 24px 22px; }
    .al-c-map { height: 300px; }
    .al-c-sent { padding: 28px 24px; }
    .al-c-sent h2 { font-size: 26px; }
    .al-p-hero { height: 380px; }
    .al-p-hero-inner { padding: 0 var(--al-pad) 36px; }
    .al-p-hero h1 { font-size: 32px; }
    .al-p-hero-lead { font-size: 16px; }
    .al-p-stats { padding: 24px var(--al-pad); }
    .al-p-stats-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
    .al-p-stat strong { font-size: 27px; }
    .al-p-stat span { font-size: 12px; letter-spacing: .12em; }
    .al-p-band { padding: 56px var(--al-pad); }
    .al-c-head { padding-bottom: 20px; }
    .al-p-copy h2 { font-size: 27px; }
    .al-p-copy p { font-size: 16px; }
    .al-p-photo { height: 240px; }
    .al-p-slot { height: 240px; }
    .al-p-gesto { gap: 16px; }
    .al-p-gesto-n { font-size: 34px; min-width: 30px; }
    .al-p-mini strong { font-size: 25px; }
    .al-p-band .al-sect-center h2, .al-p-visit-inner h2 { font-size: 27px; }
    .al-p-benefit { padding: 26px 24px; }
    .al-p-benefit h3 { font-size: 21px; }
    .al-p-cta { padding: 56px var(--al-pad); }
    .al-p-cta-mark { font-size: 150px; }
    .al-p-cta-inner h2 { font-size: 28px; }
    .al-p-cta-row { gap: 12px; }
    .al-p-visit { padding: 56px var(--al-pad); }
    .al-p-visit-inner { gap: 22px; }

    /* Transfer instructions: label over value, IBAN never overflows */
    .transfer-box { padding: 6px 22px; }
    .transfer-box > div { flex-direction: column; align-items: flex-start; gap: 4px; }
    .transfer-box dd { text-align: start; overflow-wrap: anywhere; }
    .transfer-amount { font-size: 27px !important; }
}