/* ============================================================================ RARA · components.css — cross-page reusable components: buttons, badges (incl. the gold Colección tier badge), product card, skeletons, filter chips, the ONE ficha bar, PDP accord rows. Loaded globally after base.css. Motion/keyframes live in motion.css. ============================================================================ */ /* ---------- buttons ---------- */ /* Micro-physics (hover lift / active press) is layered in motion.css on .btn. */ .btn{display:inline-flex;align-items:center;gap:12px;background:var(--burgundy);color:var(--cream);font-size:14px;letter-spacing:.04em;padding:16px 30px;border:0;cursor:pointer;min-height:48px;transition:background var(--dur-fast,.2s) var(--ease-out,ease)} .btn:hover{background:var(--burgundy-deep)} .btn-ghost{background:var(--cream-2);color:var(--ink)} .btn-ghost:hover{background:var(--line)} .btn-sm{padding:8px 12px;font-size:12px;min-height:38px;border:0;cursor:pointer} /* ---------- badges ---------- */ .badge{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:6px 11px;border:1px solid var(--line-2)} /* Colección tier chip — gold RETIRED (owner warmth escalation, 4th): the semantic tier chip is now ink text + a var(--line) hairline, no decorative gold on the light card/PDP ground. Gold survives only in the acta guilloché + header seal + footer gold-light on burgundy (dark, blessed). */ .badge-tier{border-color:var(--line);color:var(--ink)} /* Provenance / trust badges demoted off gold onto the single accent + success. */ .badge-prov{border-color:var(--burgundy);color:var(--burgundy)} .badge-preorder{border-color:var(--burgundy);background:var(--burgundy);color:var(--cream)} /* ---------- product grid (shared: home featured, catalog results, PDP related) ---------- */ .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 24px} @media(max-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:600px){.grid{grid-template-columns:repeat(2,1fr)}} /* Wide-screen tiers (Slice · widescreen pass): the grid GAINS columns as --wrap grows in tokens.css, rather than the 4 base cards stretching to fill the extra width. Card width is held ~310-320px at every tier (same math as the 4-col desktop card: (wrap - (cols-1)*gap)/cols), so density feels consistent, not cramped or bloated. Guarded to min-width:1920px so the <=1600px grid is untouched. */ @media(min-width:1920px){.grid{grid-template-columns:repeat(5,1fr)}} @media(min-width:2560px){.grid{grid-template-columns:repeat(6,1fr)}} @media(min-width:3200px){.grid{grid-template-columns:repeat(7,1fr)}} /* ---------- product card ---------- */ .card{display:block;background:transparent} .card .ph{position:relative;aspect-ratio:3/4;background:linear-gradient(150deg,var(--cream-2),var(--ph-1));overflow:hidden} .card .ph img{width:100%;height:100%;object-fit:contain;background:#FFFFFF} /* Designed no-image plate (NO-IMAGELESS LAW, owner 2026-07-13): the fallback SVG paints its own #F5F5F5 (--cream) ground, so the img background must match it — contain-fit letterbox bars then read as one seamless plate in every box ratio (3/4 cards, 4/5 mats/thumbs, 16/10 mobile soon rows). Lives here because the fallback renders on home/catalog/PDP/cart alike (same rule as .note-chip). Doubled class beats the page-sheet `.x img` (0,1,1) rules regardless of sheet order; `.card .ph img` above ties at (0,2,1) and loses by source order. */ img.is-fallback.is-fallback{object-fit:contain;background:var(--cream,#F5F5F5)} .card .sku{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--cream);background:rgba(89,28,42,.92);padding:4px 8px} /* ---------- card top chips: stacking layout (sku left, badges right) ---------- sku + badges share ONE absolutely-positioned top row (justify-between) so they never overlap, even on narrow PDP cross-sell cards, which previously collided because .card-badge's positioning lived in catalog.css (not loaded on the PDP). This lives in components.css so it holds on home, catalog and PDP alike. Extra badges (Próximamente + Colección) stack downward on the right. */ .card .ph .card-tags{position:absolute;top:12px;left:12px;right:12px;z-index:1; display:flex;justify-content:space-between;align-items:flex-start;gap:8px;pointer-events:none} .card .ph .card-tags .sku{align-self:flex-start} .card .card-badges{display:flex;flex-direction:column;align-items:flex-end;gap:6px} .card .card-badge{background:var(--surface)} /* Próximamente chip: the single accent (burgundy), cream text (AA ~10:1). */ .chip-soon{display:inline-flex;align-items:center;font-family:var(--mono);font-size:10px; letter-spacing:.12em;text-transform:uppercase;padding:4px 9px;color:var(--cream);background:var(--burgundy)} .card-soon-date{font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--burgundy);font-weight:500} .card .house{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--warm-grey);margin:12px 0 6px} .card .name{font-family:var(--serif);font-size:21px;line-height:1.1;margin-bottom:8px} /* card note chips + family fallback — shared: home featured, catalog, casas, origen, search (base.html loads components.css everywhere; catalog.css is page-scoped, which hid the dots on home). Dot = accord-family hue data-mark; text stays muted ink. Cap is 2 chips on cards at all widths: narrow facet-rail cards wrap 3 -> ragged; PDP keeps the full accord meter set. nth-of-type is intentional because the catalog Alpine grid's first child is a