<?php
/**
 * RSL Immersive Light — SS26 scroll-driven landing page.
 * Server-rendered in the default language; assets/app.js drives cart state (incl. size
 * selection), language switching (by swapping data-t tagged text), and the scroll/parallax
 * effects, ported from the design's own hand-tweened engine (CSS transitions/observers are
 * unreliable in some preview hosts, so reveals and the drawer slide are timed via setTimeout).
 */

require __DIR__ . '/catalog-data.php'; // $colors, $discountActive, $baseProducts, $productPhotos, product_photo()

$defaultSize = 'M';

$langsMeta = [
    ['code' => 'ES', 'label' => 'Español'],
    ['code' => 'CA', 'label' => 'Català'],
    ['code' => 'EN', 'label' => 'English'],
];
$defaultLang = 'ES';

$translations = [
    'ES' => [
        'bag' => 'Cesta', 'scroll' => 'Desliza', 'add' => 'Añadir', 'sizes' => 'T. Única',
        'heroEyebrow' => 'Barcelona · tejido orgánico · cuatro piezas',
        'heroH1a' => 'Ilusión y creatividad,', 'heroH1b' => 'en cada prenda.',
        'heroP' => "Hola, me presento, soy Laia, una joven emprendedora que ha creado RSL para intentar compartir con todos vosotros aquellas ideas, frases que en algún momento u otro me han motivado y ayudado a seguir adelante.\n\n¿Pero dónde ponía estos pensamientos? Y surgió la idea de crear mi propia marca. Primera fase: diseñar un logo que me identificara, escoger las primeras prendas básicas, y darme a conocer. Mi proyecto quiere ir más allá, añadiendo nuevos artículos “con mi estilo” donde diseñar mis pensamientos.\n\nHe creado esta web donde NO SOLO encontraréis artículos de calidad pensados y escogidos (algodón orgánico, diseño cómodo..) sino que lo más importante es la ilusión y la creatividad que he intentado transmitir en cada diseño, cada frase, cada pensamiento.\n\nGracias a todos por compartir conmigo mi mundo.",
        'man1' => 'Cortamos un solo patrón en tres cortes.', 'shout' => 'cae recto', 'whisper' => 'cae suave', 'calc' => 'ciñe',
        'founder' => 'Un proyecto pequeño de Barcelona: una fundadora, un taller, cuatro piezas.',
        'from' => 'desde', 'threeColours' => 'tres colores',
        'closeEyebrow' => 'La colección completa', 'closeH1' => 'Cuatro piezas, doce versiones.', 'closeH2' => 'Una sola gramática de vestuario.',
        'cta' => 'Entra en la colección', 'badge1' => 'Tejido orgánico y reciclado', 'badge2' => 'Hecho en Barcelona', 'badge3' => 'Hecho para durar más que las modas',
        'cartTitle' => 'Tu cesta', 'cartEmpty' => 'Tu cesta está vacía.', 'subtotal' => 'Subtotal', 'checkout' => 'Tramitar pedido', 'checkoutLoading' => 'Procesando…', 'checkoutError' => 'No se pudo procesar el pedido. Inténtalo de nuevo.', 'size' => 'Talla', 'careLabel' => 'Composición y cuidado', 'priceBefore' => 'Antes',
        'printLabel' => 'Estampado', 'printBig' => 'Grande', 'printSmall' => 'Pequeño',
        'col' => ['white' => 'Blanco', 'black' => 'Negro', 'purple' => 'Gris Azulado', 'pink' => 'Rosa', 'beige' => 'Beige', 'malva' => 'Malva'],
        'prod' => [
            'cap'   => ['name' => 'La Gorra',     'desc' => 'Perfil bajo, seis paneles y visera precurvada. Algodón grueso lavado con acabado vintage.'],
            'recto' => ['name' => 'Básica',        'desc' => 'Corte recto, estilo medium fit. Punto de jersey en algodón orgánico, tejido lavado.'],
            'modal' => ['name' => 'Modal',        'desc' => 'Corte relajado con cuello acanalado y bajo curvo. Jersey de algodón orgánico y modal, desgastado.'],
            'fit'   => ['name' => 'Fit',          'desc' => 'Corte fit, ajustado al cuerpo. Jersey de algodón orgánico y reciclado, tejido lavado.'],
        ],
    ],
    'CA' => [
        'bag' => 'Cistella', 'scroll' => 'Desplaça', 'add' => 'Afegir', 'sizes' => 'T. Única',
        'heroEyebrow' => 'Barcelona · teixit orgànic · quatre peces',
        'heroH1a' => 'Il·lusió i creativitat,', 'heroH1b' => 'en cada peça.',
        'heroP' => "Hola em presento soc la Laia, una jove emprenedora que he creat RSL per intentar compartir amb tots vosaltres aquelles idees, frases que en un moment o altre m’han motivat i ajudat a seguir endavant.\n\nPerò on posava aquestes pensaments? I va sorgir la idea de crear la meva marca. Primera fase dissenyar un logo que m’identifiqués, escollir les primeres prendes bàsiques, i donar-me a conéixer. El meu projecte vol anar més enllà, afegint nous articles “amb el meu estil” on dissenyar els meus pensaments.\n\nHe creat aquesta web on NO NOMÉS trobareu articles de qualitat pensats i escollits (cotó orgànic, disseny còmode..) sinó que el més important és la il.lusió i la creativitat que he intentat transmetre en cada disseny, cada frase, cada pensament.\n\nGràcies a tots per compartir amb mi el meu món.",
        'man1' => 'Tallem un sol patró en tres talls.', 'shout' => 'cau recte', 'whisper' => 'cau suau', 'calc' => 'cenyeix',
        'founder' => 'Un projecte petit de Barcelona: una fundadora, un taller, quatre peces.',
        'from' => 'des de', 'threeColours' => 'tres colors',
        'closeEyebrow' => 'La col·lecció completa', 'closeH1' => 'Quatre peces, dotze versions.', 'closeH2' => 'Una sola gramàtica de vestuari.',
        'cta' => 'Entra a la col·lecció', 'badge1' => 'Teixit orgànic i reciclat', 'badge2' => 'Fet a Barcelona', 'badge3' => 'Fet per durar més que les modes',
        'cartTitle' => 'La teva cistella', 'cartEmpty' => 'La teva cistella és buida.', 'subtotal' => 'Subtotal', 'checkout' => 'Tramitar comanda', 'checkoutLoading' => 'Processant…', 'checkoutError' => 'No s’ha pogut processar la comanda. Torna-ho a provar.', 'size' => 'Talla', 'careLabel' => 'Composició i cura', 'priceBefore' => 'Abans',
        'printLabel' => 'Estampat', 'printBig' => 'Gran', 'printSmall' => 'Petit',
        'col' => ['white' => 'Blanc', 'black' => 'Negre', 'purple' => 'Gris Blavós', 'pink' => 'Rosa', 'beige' => 'Beix', 'malva' => 'Malva'],
        'prod' => [
            'cap'   => ['name' => 'La Gorra',    'desc' => 'Perfil baix, sis panells i visera precorbada. Cotó gruixut rentat amb acabat vintage.'],
            'recto' => ['name' => 'Básica',       'desc' => 'Tall recte, estil medium fit. Punt de jersei en cotó orgànic, teixit rentat.'],
            'modal' => ['name' => 'Modal',       'desc' => 'Tall relaxat amb coll acanalat i baix corbat. Jersei de cotó orgànic i modal, envellit.'],
            'fit'   => ['name' => 'Fit',         'desc' => 'Tall fit, ajustat al cos. Jersei de cotó orgànic i reciclat, teixit rentat.'],
        ],
    ],
    'EN' => [
        'bag' => 'Bag', 'scroll' => 'Scroll', 'add' => 'Add', 'sizes' => 'One size',
        'heroEyebrow' => 'Barcelona · organic cloth · four pieces',
        'heroH1a' => 'Excitement and creativity,', 'heroH1b' => 'in every piece.',
        'heroP' => "Hi, let me introduce myself — I'm Laia, a young entrepreneur who created RSL to try to share with all of you those ideas and phrases that, at one point or another, motivated me and helped me keep going.\n\nBut where was I putting these thoughts? And that's how the idea of creating my own brand came about. First phase: design a logo that represented me, choose the first basic garments, and get myself known. My project wants to go further, adding new pieces “in my own style” where I can design my thoughts.\n\nI've created this website where you'll find NOT ONLY quality products, thoughtfully chosen (organic cotton, comfortable design..), but where the most important thing is the excitement and creativity I've tried to convey in every design, every phrase, every thought.\n\nThank you all for sharing my world with me.",
        'man1' => 'One pattern, cut three ways.', 'shout' => 'falls straight', 'whisper' => 'falls soft', 'calc' => 'holds close',
        'founder' => 'A small Barcelona project: one founder, one workshop, four pieces.',
        'from' => 'from', 'threeColours' => 'three colours',
        'closeEyebrow' => 'The full collection', 'closeH1' => 'Four pieces, twelve ways.', 'closeH2' => 'One wardrobe grammar.',
        'cta' => 'Enter the collection', 'badge1' => 'Organic & recycled cloth', 'badge2' => 'Made in Barcelona', 'badge3' => 'Built to outgrow trends',
        'cartTitle' => 'Your bag', 'cartEmpty' => 'Your bag is empty.', 'subtotal' => 'Subtotal', 'checkout' => 'Checkout', 'checkoutLoading' => 'Processing…', 'checkoutError' => 'Couldn’t process your order. Please try again.', 'size' => 'Size', 'careLabel' => 'Composition & care', 'priceBefore' => 'Before',
        'printLabel' => 'Print', 'printBig' => 'Big', 'printSmall' => 'Small',
        'col' => ['white' => 'White', 'black' => 'Black', 'purple' => 'Blue-Grey', 'pink' => 'Pink', 'beige' => 'Beige', 'malva' => 'Mauve'],
        'prod' => [
            'cap'   => ['name' => 'The Cap',     'desc' => 'Low profile, six panels, pre-curved brim. Heavy washed cotton with a vintage finish.'],
            'recto' => ['name' => 'Básica',       'desc' => 'Straight cut, medium fit. Organic cotton jersey, washed fabric.'],
            'modal' => ['name' => 'Modal',       'desc' => 'Relaxed cut with ribbed collar and curved hem. Organic cotton and modal jersey, garment-washed.'],
            'fit'   => ['name' => 'Fit',         'desc' => 'Fitted cut, close to the body. Organic and recycled cotton jersey, washed fabric.'],
        ],
    ],
];

$t = $translations[$defaultLang];

function esc(string $s): string
{
    return htmlspecialchars($s, ENT_QUOTES, 'UTF-8');
}

function eur(int $cents): string
{
    return number_format($cents / 100, 2, ',', '') . "\u{00A0}\u{20AC}";
}

// Resolves the regular (non-promo) price for a print size, falling back sanely.
function product_price(array $p, string $printChoice = 'big'): int
{
    $key = $printChoice === 'small' ? 'priceSmall' : 'priceBig';
    return $p[$key] ?? $p['priceBig'] ?? $p['priceSmall'] ?? 0;
}

// HTML fragment: struck-through original + sale price while the discount is active, plain price
// otherwise. Both prices depend on print size ('big'/'small') for products with hasPrint=true.
// Labelled "Antes/Abans/Before" so it's clear which number is the old price vs. the real one.
function price_fragment_html(array $p, bool $discountActive, string $printChoice, string $beforeLabel): string
{
    $saleKey = $printChoice === 'small' ? 'salePriceSmall' : 'salePriceBig';
    $regular = product_price($p, $printChoice);
    if ($discountActive && isset($p[$saleKey])) {
        return '<span style="font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:rgba(22,24,28,.4);margin-right:4px">' . esc($beforeLabel) . '</span>'
            . '<s style="text-decoration:line-through;opacity:.45;margin-right:6px;font-weight:400">' . eur($regular) . '</s>'
            . '<strong style="font-weight:600">' . eur($p[$saleKey]) . '</strong>';
    }
    return eur($regular);
}

// Renders a "Composición y cuidado" disclosure body from an ordered [label => text|list] map.
// Used to build $careHtml below — kept out of $translations because its value is markup, not
// plain text, so it's swapped via innerHTML (see applyTranslations() in app.js) rather than
// the textContent-based data-t mechanism the rest of the copy uses.
function care_html(array $sections): string
{
    $out = '';
    foreach ($sections as $label => $value) {
        $out .= '<div style="margin-top:10px"><span style="font:10px/1 \'Space Mono\',monospace;letter-spacing:.1em;text-transform:uppercase;color:rgba(22,24,28,.42)">' . esc($label) . '</span>';
        if (is_array($value)) {
            $out .= '<ul style="margin:6px 0 0;padding-left:16px">';
            foreach ($value as $item) {
                $out .= '<li style="margin-bottom:3px">' . esc($item) . '</li>';
            }
            $out .= '</ul>';
        } else {
            $out .= '<p style="margin:4px 0 0">' . esc($value) . '</p>';
        }
        $out .= '</div>';
    }
    return $out;
}

function product_section_style(array $p): string
{
    $dir = $p['reverse'] ? 'row-reverse' : 'row';
    return "position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:$dir;align-items:center;gap:clamp(34px,5vw,70px);padding:clamp(96px,11vh,130px) clamp(22px,4vw,44px)";
}
function product_info_style(array $p): string
{
    $align = $p['reverse'] ? 'right' : 'left';
    return "flex:1;min-width:0;position:relative;text-align:$align";
}
function product_num_style(array $p): string
{
    $side = $p['reverse'] ? 'left:auto;right:-.5vw' : 'left:-.5vw;right:auto';
    return "position:absolute;top:-7.5vw;z-index:0;font-family:'Anton',sans-serif;font-size:15vw;line-height:.8;color:rgba(22,24,28,.055);pointer-events:none;user-select:none;$side";
}
function product_rule_style(array $p): string
{
    $ml = $p['reverse'] ? 'auto' : '0';
    return "height:1px;background:rgba(22,24,28,.16);width:88px;margin-bottom:22px;margin-left:$ml";
}
function product_desc_style(array $p): string
{
    $margin = $p['reverse'] ? '26px 0 20px auto' : '26px 0 20px';
    return "font-family:'Spectral',serif;font-weight:300;font-size:clamp(17px,1.9vw,20px);line-height:1.65;color:rgba(22,24,28,.68);max-width:400px;margin:$margin";
}
function product_name_style(array $p): string
{
    $face = $p['face'];
    $fontFamily = $face === 'anton' ? "'Anton',sans-serif" : ($face === 'mono' ? "'Space Mono',monospace" : "'Spectral',serif");
    $fontStyle = $face === 'italic' ? 'italic' : 'normal';
    $textTransform = ($face === 'anton' || $face === 'mono') ? 'uppercase' : 'none';
    $letterSpacing = $face === 'anton' ? '.005em' : ($face === 'mono' ? '-.045em' : '-.035em');
    $fontSize = $face === 'anton' ? 'clamp(38px,7.4vw,112px)' : ($face === 'mono' ? 'clamp(34px,6.6vw,100px)' : 'clamp(42px,8.4vw,130px)');
    return "font-weight:300;line-height:.92;color:#16181c;font-family:$fontFamily;font-style:$fontStyle;text-transform:$textTransform;letter-spacing:$letterSpacing;font-size:$fontSize";
}
function variant_name_style(array $c): string
{
    return "font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:{$c['ink']};display:inline-block";
}
function variant_dot_style(array $c): string
{
    return "width:9px;height:9px;border-radius:999px;background:{$c['dot']};border:1px solid rgba(22,24,28,.18);flex:none;display:inline-block";
}
function variant_card_style(array $c, ?string $photo = null): string
{
    $bg = $photo
        ? "background-image:url('{$photo}');background-size:cover;background-position:center;background-repeat:no-repeat"
        : "background-image:repeating-linear-gradient(45deg,{$c['tex']},{$c['tex']} 7px,transparent 7px,transparent 16px)";
    return "aspect-ratio:4/5;border-radius:10px;overflow:hidden;background-color:{$c['hex']};$bg;border:1px solid rgba(22,24,28,.12);box-shadow:0 26px 44px -30px rgba(48,36,24,.42), inset 0 1px 0 rgba(255,255,255,.28)";
}

// Composition, construction and care copy from the real spec sheets. Modal's care/drying are
// stated by the brand to match Básica's; Fit and the cap weren't given care instructions, so
// those sections are simply omitted rather than assumed.

$careHtml = [
    'ES' => [
        'cap' => care_html([
            'Composición' => '100 % algodón grueso lavado, estilo vintage.',
            'Detalles' => ['Diseño de perfil bajo con 6 paneles', 'Corona blanda y suave', 'Visera precurvada', 'Ojetes bordados para mayor transpirabilidad', 'Ajustador del mismo tejido con hebilla de efecto latón'],
        ]),
        'recto' => care_html([
            'Composición' => 'Punto de jersey sencillo, 100 % algodón orgánico. Tejido lavado.',
            'Cuidado' => 'Lavar juntos los colores similares. No planchar la parte estampada. Lavar y planchar del revés.',
            'Secado' => 'No secar en secadora.',
        ]),
        'modal' => care_html([
            'Detalles' => ['Canalé 1x1 en el cuello', 'Cinta de refuerzo en el cuello del mismo tejido', 'Manga montada', 'Bajo curvo (más largo por detrás)', 'Pespunte de doble aguja en puños y bajo'],
            'Composición' => 'Punto de jersey sencillo, 60 % algodón orgánico Ring Spun combinado, 40 % modal. Desgastado.',
            'Cuidado' => 'Lavar juntos los colores similares. No planchar la parte estampada. Lavar y planchar del revés.',
            'Secado' => 'No secar en secadora.',
        ]),
        'fit' => care_html([
            'Composición' => 'Punto de jersey sencillo, 100 % algodón orgánico. Combinado Ring Spun orgánico / Jaspeado: 70 % algodón orgánico, 30 % algodón reciclado, Combed Ring Spun. Tejido lavado.',
        ]),
    ],
    'CA' => [
        'cap' => care_html([
            'Composició' => '100 % cotó gruixut rentat, estil vintage.',
            'Detalls' => ['Disseny de perfil baix amb 6 panells', 'Corona tova i suau', 'Visera precorbada', 'Ullets brodats per a més transpirabilitat', 'Ajustador del mateix teixit amb sivella efecte llautó'],
        ]),
        'recto' => care_html([
            'Composició' => 'Punt de jersei senzill, 100 % cotó orgànic. Teixit rentat.',
            'Cura' => 'Rentar junts els colors similars. No planxar la part estampada. Rentar i planxar del revés.',
            'Assecat' => 'No assecar a l’assecadora.',
        ]),
        'modal' => care_html([
            'Detalls' => ['Canalé 1x1 al coll', 'Cinta de reforç al coll del mateix teixit', 'Màniga muntada', 'Baix corbat (més llarg per darrere)', 'Pespunt de doble agulla als punys i baix'],
            'Composició' => 'Punt de jersei senzill, 60 % cotó orgànic Ring Spun combinat, 40 % modal. Envellit.',
            'Cura' => 'Rentar junts els colors similars. No planxar la part estampada. Rentar i planxar del revés.',
            'Assecat' => 'No assecar a l’assecadora.',
        ]),
        'fit' => care_html([
            'Composició' => 'Punt de jersei senzill, 100 % cotó orgànic. Combinat Ring Spun orgànic / Jaspejat: 70 % cotó orgànic, 30 % cotó reciclat, Combed Ring Spun. Teixit rentat.',
        ]),
    ],
    'EN' => [
        'cap' => care_html([
            'Composition' => '100% heavy washed cotton, vintage style.',
            'Details' => ['Low-profile 6-panel design', 'Soft, unstructured crown', 'Pre-curved brim', 'Embroidered eyelets for extra breathability', 'Self-fabric strap with brass-effect buckle'],
        ]),
        'recto' => care_html([
            'Composition' => 'Single jersey knit, 100% organic cotton. Garment-washed.',
            'Care' => 'Wash similar colours together. Do not iron the printed area. Wash and iron inside out.',
            'Drying' => 'Do not tumble dry.',
        ]),
        'modal' => care_html([
            'Details' => ['1x1 rib collar', 'Self-fabric collar reinforcement tape', 'Set-in sleeve', 'Curved hem (longer at the back)', 'Double-needle stitching at cuffs and hem'],
            'Composition' => 'Single jersey knit, 60% organic Ring Spun cotton blend, 40% modal. Garment-washed.',
            'Care' => 'Wash similar colours together. Do not iron the printed area. Wash and iron inside out.',
            'Drying' => 'Do not tumble dry.',
        ]),
        'fit' => care_html([
            'Composition' => 'Single jersey knit, 100% organic cotton. Organic Ring Spun blend / Heathered: 70% organic cotton, 30% recycled cotton, Combed Ring Spun. Garment-washed.',
        ]),
    ],
];
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>RSL Barcelona — Immersive</title>
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Spectral:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/style.css">
</head>
<body>
<div id="rsl-root" style="position:relative;background:#f4f1ea;overflow:hidden">

  <div data-prog style="position:fixed;top:0;left:0;height:2px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,#d8431f,#a800d8 52%,#2247c4);z-index:90"></div>

  <!-- paper aurora -->
  <div style="position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden">
    <div data-par data-depth="40" style="position:absolute;inset:-30%"><div style="position:absolute;top:2%;left:4%;width:52vw;height:52vw;border-radius:50%;background:radial-gradient(circle,rgba(255,146,96,.34),transparent 64%);filter:blur(100px);animation:drift1 22s ease-in-out infinite"></div></div>
    <div data-par data-depth="86" style="position:absolute;inset:-30%"><div style="position:absolute;top:32%;right:2%;width:54vw;height:54vw;border-radius:50%;background:radial-gradient(circle,rgba(196,140,255,.3),transparent 64%);filter:blur(110px);animation:drift2 26s ease-in-out infinite"></div></div>
    <div data-par data-depth="118" style="position:absolute;inset:-30%"><div style="position:absolute;bottom:0%;left:24%;width:50vw;height:50vw;border-radius:50%;background:radial-gradient(circle,rgba(126,172,255,.32),transparent 64%);filter:blur(104px);animation:drift3 24s ease-in-out infinite"></div></div>
    <div data-par data-depth="66" style="position:absolute;inset:-30%"><div style="position:absolute;top:58%;left:0%;width:42vw;height:42vw;border-radius:50%;background:radial-gradient(circle,rgba(150,214,176,.3),transparent 64%);filter:blur(108px);animation:drift4 28s ease-in-out infinite"></div></div>
    <div style="position:absolute;inset:0;background:radial-gradient(120% 80% at 50% -10%,rgba(255,255,255,.9),rgba(255,255,255,0) 60%)"></div>
  </div>

  <!-- paper tooth -->
  <div style="position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.06;mix-blend-mode:multiply;background-image:url(&quot;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E&quot;)"></div>

  <header class="hdr" style="position:fixed;top:0;left:0;right:0;z-index:70;display:flex;align-items:center;justify-content:space-between;padding:16px clamp(14px,3vw,40px);background:rgba(244,241,234,.72);backdrop-filter:blur(14px);border-bottom:1px solid rgba(22,24,28,.1);color:#16181c">
    <div class="hdr-brand" style="display:flex;align-items:center;gap:12px">
      <img src="assets/rsl-logo.png" alt="RSL" style="width:30px;height:30px;border-radius:999px;display:block">
      <span style="font:11px/1 'Space Mono',monospace;letter-spacing:.34em;text-transform:uppercase">RSL Barcelona</span>
    </div>
    <div style="display:flex;align-items:center;gap:14px">
      <div style="display:flex;align-items:center;gap:2px;padding:2px;border:1px solid rgba(22,24,28,.16);border-radius:8px">
        <?php foreach ($langsMeta as $l): $active = $l['code'] === $defaultLang; ?>
        <button type="button" class="lang-btn" data-lang="<?= esc($l['code']) ?>" title="<?= esc($l['label']) ?>"
          style="font:11px/1 'Space Mono',monospace;letter-spacing:.06em;padding:6px 9px;border-radius:6px;cursor:pointer;border:none;background:<?= $active ? '#16181c' : 'transparent' ?>;color:<?= $active ? '#f4f1ea' : 'rgba(22,24,28,.55)' ?>"><?= esc($l['code']) ?></button>
        <?php endforeach; ?>
      </div>
      <button type="button" id="bag-btn" class="btn-bag" style="display:inline-flex;align-items:center;gap:7px;padding:9px 17px;border-radius:999px;border:1px solid #16181c;background:transparent;color:#16181c;font:11px/1 'Space Mono',monospace;letter-spacing:.1em;text-transform:uppercase;cursor:pointer"><span class="bag-label"><span data-t="bag"><?= esc($t['bag']) ?></span> · </span><span id="bag-count">0</span></button>
    </div>
  </header>

  <!-- HERO -->
  <section style="position:relative;z-index:1;min-height:100svh;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:68px 24px 0">
    <div data-par data-depth="24" style="position:absolute;inset:0;pointer-events:none"><img class="ghost" src="assets/LAYOUT.png" alt="" style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(126%,1500px);height:auto;opacity:.1;user-select:none"></div>
    <div style="position:relative;z-index:2;flex:0 0 auto;margin:auto 0;text-align:center;max-width:900px">
      <div style="font:12px/1 'Space Mono',monospace;letter-spacing:.4em;text-transform:uppercase;color:rgba(22,24,28,.5);margin-bottom:clamp(12px,2.6vh,30px);animation:shimmer 5s ease-in-out infinite" data-t="heroEyebrow"><?= esc($t['heroEyebrow']) ?></div>
      <h1 class="hero-h" style="font-family:'Spectral',serif;font-weight:300;font-size:clamp(34px,min(7.4vw,9vh),86px);line-height:1.03;letter-spacing:-.025em;margin:0;color:#16181c;text-wrap:balance"><span data-t="heroH1a"><?= esc($t['heroH1a']) ?></span><br><em style="font-style:italic;background:linear-gradient(90deg,#d8431f,#a800d8 55%,#2247c4);-webkit-background-clip:text;background-clip:text;color:transparent" data-t="heroH1b"><?= esc($t['heroH1b']) ?></em></h1>
      <p style="font-size:clamp(15px,1.5vw,17px);line-height:1.75;color:rgba(22,24,28,.66);max-width:640px;margin:clamp(12px,2.6vh,26px) auto 0;font-weight:300;white-space:pre-line;text-align:center" data-t="heroP"><?= esc($t['heroP']) ?></p>
    </div>
    <div data-par data-depth="14" style="position:relative;width:100%;margin-top:auto;z-index:1;pointer-events:none">
      <div style="display:flex;align-items:baseline;justify-content:space-between;gap:16px;max-width:1000px;margin:0 auto 34px;padding:0 clamp(22px,4vw,32px)">
        <span style="font:11px/1 'Space Mono',monospace;letter-spacing:.32em;text-transform:uppercase;color:rgba(22,24,28,.5)">Barcelona</span>
        <span style="font:10px/1 'Space Mono',monospace;letter-spacing:.24em;color:rgba(22,24,28,.34)">41°23′N&nbsp;&nbsp;2°09′E</span>
      </div>
    </div>
  </section>

  <!-- MANIFESTO -->
  <section style="position:relative;z-index:1;max-width:1000px;margin:0 auto;padding:14vh clamp(22px,4vw,32px)">
    <div class="rv" style="height:1px;background:rgba(22,24,28,.14);margin-bottom:44px"></div>
    <p class="rv" style="font-family:'Spectral',serif;font-weight:300;font-size:clamp(22px,3.6vw,38px);line-height:1.35;letter-spacing:-.015em;color:#16181c;text-wrap:balance;margin:0"><span data-t="man1"><?= esc($t['man1']) ?></span> <span style="font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.01em;font-size:.85em">Básica</span> <span data-t="shout"><?= esc($t['shout']) ?></span>, <span style="font-style:italic">Modal</span> <span data-t="whisper"><?= esc($t['whisper']) ?></span>, <span style="font-family:'Space Mono',monospace;font-size:.78em;letter-spacing:-.03em;text-transform:uppercase">Fit</span> <span data-t="calc"><?= esc($t['calc']) ?></span>.</p>
    <p class="rv" style="font-family:'Spectral',serif;font-style:italic;font-weight:300;font-size:clamp(16px,1.8vw,19px);line-height:1.55;color:rgba(22,24,28,.55);margin:28px 0 0" data-t="founder"><?= esc($t['founder']) ?></p>
  </section>

  <!-- PRODUCTS -->
  <?php foreach ($baseProducts as $pIdx => $p): $tp = $t['prod'][$p['key']]; ?>
  <section class="chap"<?= $pIdx === 0 ? ' id="collection"' : '' ?> style="<?= product_section_style($p) ?>">
    <div class="rv" style="<?= product_info_style($p) ?>">
      <div class="num" style="<?= product_num_style($p) ?>"><?= esc($p['idx']) ?></div>
      <div style="position:relative;z-index:1">
        <div style="<?= product_rule_style($p) ?>"></div>
        <div style="font:11px/1 'Space Mono',monospace;letter-spacing:.32em;text-transform:uppercase;color:rgba(22,24,28,.5);margin-bottom:18px"><?= esc($p['idx']) ?> — <span data-t="prod.<?= $p['key'] ?>.name"><?= esc($tp['name']) ?></span></div>
        <div class="chap-name" style="<?= product_name_style($p) ?>"><span data-t="prod.<?= $p['key'] ?>.name"><?= esc($tp['name']) ?></span></div>
        <p style="<?= product_desc_style($p) ?>" data-t="prod.<?= $p['key'] ?>.desc"><?= esc($tp['desc']) ?></p>
        <div class="price-line" data-price-for="<?= esc($p['key']) ?>" style="font:12px/1 'Space Mono',monospace;letter-spacing:.06em;color:rgba(22,24,28,.5)"><?= price_fragment_html($p, $discountActive, 'big', $t['priceBefore']) ?> · <?= esc($t['threeColours']) ?></div>
        <details class="care-toggle" style="margin-top:18px;max-width:400px<?= $p['reverse'] ? ';margin-left:auto' : '' ?>">
          <summary style="cursor:pointer;font:11px/1 'Space Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:rgba(22,24,28,.5)" data-t="careLabel"><?= esc($t['careLabel']) ?></summary>
          <div class="care-block" data-care-for="<?= esc($p['key']) ?>" style="font-size:13px;line-height:1.55;color:rgba(22,24,28,.68)"><?= $careHtml[$defaultLang][$p['key']] ?? '' ?></div>
        </details>
      </div>
    </div>
    <div class="side rv" data-tilt style="width:clamp(380px,62vw,800px);max-width:64vw;flex:none;transform-style:preserve-3d">
      <div class="vrow" style="display:flex;gap:18px;animation:floaty 8.4s ease-in-out infinite">
        <?php foreach ($p['cols'] as $ck): $c = $colors[$ck]; $vid = $p['key'] . '-' . $ck; $photo = product_photo($productPhotos, $p['key'], $ck, 'big'); $sizeRangeLabel = $p['one'] ? $t['sizes'] : ($p['sizes'][0] . '–' . end($p['sizes'])); ?>
        <div class="vcard" style="flex:1;min-width:0;display:flex;flex-direction:column">
          <div class="variant-photo" data-id="<?= esc($vid) ?>" style="<?= variant_card_style($c, $photo) ?>"></div>
          <div style="display:flex;align-items:center;gap:7px;margin-top:14px">
            <span style="<?= variant_dot_style($c) ?>"></span>
            <span style="<?= variant_name_style($c) ?>" data-t="col.<?= esc($ck) ?>"><?= esc($t['col'][$ck]) ?></span>
          </div>
          <div style="display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:7px;padding-bottom:9px;border-bottom:1px solid rgba(22,24,28,.14)">
            <span style="font:11px/1 'Space Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:rgba(22,24,28,.42);white-space:nowrap"<?= $p['one'] ? ' data-t="sizes"' : '' ?>><?= esc($sizeRangeLabel) ?></span>
            <span class="unit-price" data-price-for="<?= esc($p['key']) ?>" style="font:12px/1 'Space Mono',monospace;color:#16181c;white-space:nowrap"><?= price_fragment_html($p, $discountActive, 'big', $t['priceBefore']) ?></span>
          </div>
          <?php if (!$p['one']): ?>
          <div style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px">
            <span style="font:10px/1 'Space Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:rgba(22,24,28,.42)" data-t="size"><?= esc($t['size']) ?></span>
            <select class="size-select grid-size-select" data-id="<?= esc($vid) ?>" aria-label="<?= esc($t['size']) ?>">
              <?php foreach ($p['sizes'] as $s): ?>
              <option value="<?= esc($s) ?>"<?= $s === $defaultSize ? ' selected' : '' ?>><?= esc($s) ?></option>
              <?php endforeach; ?>
            </select>
          </div>
          <?php endif; ?>
          <?php if ($p['hasPrint']): ?>
          <div class="print-toggle" data-product="<?= esc($p['key']) ?>" style="display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px">
            <span style="font:10px/1 'Space Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:rgba(22,24,28,.42)" data-t="printLabel"><?= esc($t['printLabel']) ?></span>
            <div style="display:flex;align-items:center;gap:2px;padding:2px;border:1px solid rgba(22,24,28,.16);border-radius:8px">
              <button type="button" class="print-btn is-active" data-product="<?= esc($p['key']) ?>" data-print="big" data-t="printBig" style="font:11px/1 'Space Mono',monospace;letter-spacing:.06em;padding:6px 12px;border-radius:6px;cursor:pointer;border:none;background:#16181c;color:#f4f1ea"><?= esc($t['printBig']) ?></button>
              <button type="button" class="print-btn" data-product="<?= esc($p['key']) ?>" data-print="small" data-t="printSmall" style="font:11px/1 'Space Mono',monospace;letter-spacing:.06em;padding:6px 12px;border-radius:6px;cursor:pointer;border:none;background:transparent;color:rgba(22,24,28,.55)"><?= esc($t['printSmall']) ?></button>
            </div>
          </div>
          <?php endif; ?>
          <button type="button" class="btn-add" data-id="<?= esc($vid) ?>" data-one="<?= $p['one'] ? '1' : '0' ?>" style="margin-top:12px;width:100%;padding:11px 0;border-radius:999px;border:1px solid rgba(22,24,28,.28);background:transparent;color:#16181c;font:10px/1 'Space Mono',monospace;letter-spacing:.16em;text-transform:uppercase;cursor:pointer" data-t="add"><?= esc($t['add']) ?></button>
        </div>
        <?php endforeach; ?>
      </div>
    </div>
  </section>
  <?php endforeach; ?>

  <!-- CLOSE -->
  <section style="position:relative;z-index:1;min-height:92vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px">
    <div class="rv" style="position:relative;z-index:2;max-width:900px">
      <div style="height:1px;background:rgba(22,24,28,.14);margin-bottom:40px"></div>
      <div style="font:12px/1 'Space Mono',monospace;letter-spacing:.4em;text-transform:uppercase;color:rgba(22,24,28,.5);margin-bottom:26px" data-t="closeEyebrow"><?= esc($t['closeEyebrow']) ?></div>
      <h2 class="close-h" style="font-family:'Spectral',serif;font-weight:300;font-size:clamp(34px,5.8vw,74px);line-height:1.05;letter-spacing:-.025em;margin:0;color:#16181c;text-wrap:balance"><span data-t="closeH1"><?= esc($t['closeH1']) ?></span><br><em style="font-style:italic;background:linear-gradient(90deg,#d8431f,#a800d8 55%,#2247c4);-webkit-background-clip:text;background-clip:text;color:transparent" data-t="closeH2"><?= esc($t['closeH2']) ?></em></h2>
      <button type="button" id="close-cta" class="btn-cta" style="display:inline-block;margin-top:40px;padding:17px 40px;border-radius:999px;border:1px solid #16181c;background:#16181c;color:#f4f1ea;font:12px/1 'Space Mono',monospace;letter-spacing:.22em;text-transform:uppercase;cursor:pointer" data-t="cta"><?= esc($t['cta']) ?></button>
      <div style="margin-top:30px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;font:10px/1 'Space Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:rgba(22,24,28,.55)">
        <span style="padding:8px 14px;border:1px solid rgba(22,24,28,.18);border-radius:999px" data-t="badge1"><?= esc($t['badge1']) ?></span>
        <span style="padding:8px 14px;border:1px solid rgba(22,24,28,.18);border-radius:999px" data-t="badge2"><?= esc($t['badge2']) ?></span>
        <span style="padding:8px 14px;border:1px solid rgba(22,24,28,.18);border-radius:999px" data-t="badge3"><?= esc($t['badge3']) ?></span>
      </div>
    </div>
    <div style="position:absolute;bottom:26px;left:0;right:0;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:0 clamp(20px,4vw,40px);font:11px/1 'Space Mono',monospace;letter-spacing:.2em;text-transform:uppercase;color:rgba(22,24,28,.38)"><span>© RSL Barcelona 2026</span><span>Básica · Modal · Fit</span></div>
  </section>

  <!-- CART -->
  <div id="cart-backdrop" class="cart-backdrop"></div>
  <aside id="cart-panel" class="cart-panel" aria-label="Cart">
    <div style="display:flex;align-items:center;justify-content:space-between;padding:26px 26px 20px;border-bottom:1px solid rgba(22,24,28,.14)">
      <span style="font:12px/1 'Space Mono',monospace;letter-spacing:.24em;text-transform:uppercase;color:#16181c"><span data-t="cartTitle"><?= esc($t['cartTitle']) ?></span> · <span id="cart-count">0</span></span>
      <button type="button" id="cart-close-btn" class="btn-cart-close" style="width:30px;height:30px;border-radius:999px;border:1px solid rgba(22,24,28,.22);background:transparent;color:#16181c;font-size:15px;line-height:1;cursor:pointer">×</button>
    </div>
    <div id="cart-items" style="flex:1;overflow-y:auto;padding:8px 26px">
      <div id="cart-empty" style="padding:64px 0;text-align:center;font-family:'Spectral',serif;font-style:italic;font-weight:300;font-size:18px;color:rgba(22,24,28,.5)" data-t="cartEmpty"><?= esc($t['cartEmpty']) ?></div>
    </div>
    <div style="padding:20px 26px 26px;border-top:1px solid rgba(22,24,28,.14)">
      <div style="display:flex;align-items:baseline;justify-content:space-between;margin-bottom:16px">
        <span style="font:11px/1 'Space Mono',monospace;letter-spacing:.2em;text-transform:uppercase;color:rgba(22,24,28,.55)" data-t="subtotal"><?= esc($t['subtotal']) ?></span>
        <span id="cart-subtotal" style="font-family:'Spectral',serif;font-size:24px;color:#16181c">0,00&nbsp;€</span>
      </div>
      <button type="button" id="checkout-btn" class="btn-cta" style="width:100%;padding:16px 0;border-radius:999px;border:1px solid #16181c;background:#16181c;color:#f4f1ea;font:11px/1 'Space Mono',monospace;letter-spacing:.2em;text-transform:uppercase;cursor:pointer" data-t="checkout"><?= esc($t['checkout']) ?></button>
      <div id="checkout-error" style="display:none;margin-top:10px;font-size:12px;line-height:1.5;color:#b3261e;text-align:center"></div>
    </div>
  </aside>

</div>

<script>
  window.__COLORS__ = <?= json_encode($colors, JSON_UNESCAPED_UNICODE) ?>;
  window.__PRODUCTS__ = <?= json_encode($baseProducts, JSON_UNESCAPED_UNICODE) ?>;
  window.__PRODUCT_PHOTOS__ = <?= json_encode($productPhotos, JSON_UNESCAPED_UNICODE) ?>;
  window.__TRANSLATIONS__ = <?= json_encode($translations, JSON_UNESCAPED_UNICODE) ?>;
  window.__DEFAULT_SIZE__ = <?= json_encode($defaultSize) ?>;
  window.__DEFAULT_LANG__ = <?= json_encode($defaultLang) ?>;
  window.__DISCOUNT_ACTIVE__ = <?= json_encode($discountActive) ?>;
  window.__CARE_HTML__ = <?= json_encode($careHtml, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) ?>;
</script>
<script src="assets/app.js"></script>
</body>
</html>