/* =====================================================================
Típicos Juanita — Redesign · "Warm & Cultural"
One design system. Cream canvas; red / indigo / gold as deliberate
accents. No Tailwind. Every component maps to fields the API returns.
===================================================================== */
/* ---------- Tokens ---------- */
/* One token block. The stylesheet was built as three passes and each re-opened
:root, restating the same colours and quietly changing --radius, --shadow and
--header-h 400 lines apart — which is how a later rule silently overriding an
earlier one became easy to miss. Custom properties resolve to their final
cascaded value regardless of where they are declared, so merging these is a
no-op for rendering. */
:root {
--bg: #FBF6EE;
--surface: #FFFFFF;
--surface-alt: #F3EADC;
--ink: #1E1813;
--ink-soft: #6B6157;
--line: #E7DCCB;
--red: #B23A2E;
--red-deep:#8E2C22;
--indigo: #2C3A5A;
--indigo-deep:#212C46;
--gold: #C4922E;
--gold-soft:#E9C878;
/* Aliases of --indigo / --indigo-deep, not separate colours. Kept because a
lot of rules are written in terms of "jade"; anything that has to be
visible against an indigo ground needs a different token. */
--jade: #2C3A5A;
--jade-deep: #212C46;
--font-display: "Fraunces", Georgia, "Times New Roman", serif;
--font-body: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
--maxw: 1240px;
--gutter: clamp(1.15rem, 3.5vw, 2.25rem);
--radius: 5px;
--shadow: 0 22px 55px -38px rgba(32, 25, 20, .55);
--topbar-h: 40px;
--header-h: 78px;
--poster-border: 3px solid var(--ink);
--hard-shadow: none;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
.hidden { display: none !important; }
.opacity-40 { opacity: .4; }
.opacity-100 { opacity: 1; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--font-body);
font-size: 17px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
/* ---------- Type scale (bold, high-contrast) ---------- */
.display {
font-family: var(--font-display);
font-weight: 600; font-optical-sizing: auto;
line-height: 1.0; letter-spacing: -0.02em; margin: 0;
text-wrap: balance;
}
.mega { font-size: clamp(3rem, 7vw, 6rem); font-weight: 600; line-height: .95; }
h1.display { font-size: clamp(2.8rem, 5.6vw, 4.6rem); font-weight: 600; }
h2.display { font-size: clamp(2.2rem, 4.4vw, 3.6rem); font-weight: 600; }
h3.display { font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 600; }
.lede { color: var(--ink-soft); font-size: clamp(1.1rem, 1.6vw, 1.3rem); max-width: 56ch; line-height: 1.45; }
.muted { color: var(--ink-soft); }
/* Color utilities for headlines / text */
.t-red { color: var(--red); }
.t-indigo { color: var(--indigo); }
.t-gold { color: var(--gold); }
.t-cream { color: var(--bg); }
.t-white { color: #fff; }
/* Bold lead-in label (text, not a pill) */
.label {
display: inline-block; font-family: var(--font-body);
font-weight: 800; font-size: .82rem; letter-spacing: .16em;
text-transform: uppercase;
}
/* ---------- Layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); width: 100%; }
.section { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.section--tight { padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.section--alt { background: var(--surface-alt); }
.stack > * + * { margin-top: 1rem; }
/* Saturated full-bleed panels — light text, white cards pop against them */
.section--indigo { background: var(--indigo); color: #EFE7D8; }
.section--red { background: var(--red); color: #FBEDE9; }
.section--gold { background: var(--gold); color: #2A1E06; }
.section--ink { background: var(--ink); color: #EFE7D8; }
.section--indigo .lede, .section--red .lede { color: rgba(255,255,255,.82); }
.section--gold .lede { color: rgba(42,30,6,.8); }
.section--indigo .muted, .section--red .muted { color: rgba(255,255,255,.78); }
.on-dark { color: #fff; }
/* ---------- Woven divider (restrained textile motif) ---------- */
.weave {
height: 6px; border: 0; margin: 0;
background: repeating-linear-gradient(90deg,
var(--red) 0 13px, var(--gold) 13px 20px,
var(--indigo) 20px 33px, var(--gold-soft) 33px 40px,
var(--red-deep) 40px 47px);
}
.weave--soft { opacity: .5; }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
font-family: var(--font-body); font-weight: 700; font-size: .96rem;
padding: .8rem 1.5rem; border-radius: 10px; border: 1.5px solid transparent;
cursor: pointer; transition: transform .16s ease, background-color .2s, color .2s, border-color .2s;
white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--red); color: #fff; }
.btn--primary:hover { background: var(--red-deep); }
.btn--ghost { background: transparent; color: var(--ink); border-color: currentColor; }
.btn--ghost:hover { background: var(--ink); color: var(--bg); }
.btn--ondark { background: #fff; color: var(--ink); }
.btn--ondark:hover { background: var(--gold-soft); }
.btn--gold { background: var(--gold); color: #221a05; }
.btn--gold:hover { background: var(--gold-soft); }
.btn--block { width: 100%; }
.btn--lg { padding: .95rem 1.9rem; font-size: 1rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
/* ---------- Topbar + header ---------- */
.topbar {
background: var(--indigo); color: #EFE7D8; height: var(--topbar-h);
display: flex; align-items: center; justify-content: center;
text-align: center; font-size: .8rem; letter-spacing: .02em; padding-inline: 1rem;
}
.topbar b { color: var(--gold-soft); font-weight: 700; }
.site-header {
position: sticky; top: 0; z-index: 40; height: var(--header-h);
background: color-mix(in srgb, var(--bg) 85%, transparent);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; gap: 1.4rem; height: 100%; }
.brand { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; }
.brand img { height: 44px; width: 44px; object-fit: contain; flex: none; }
.brand-name { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; line-height: 1; letter-spacing: -.01em; }
/* The two lines stack on their own now that the
between them is gone. */
.brand-name, .brand-sub { display: block; }
.brand-sub { font-size: .7rem; color: var(--ink-soft); }
.nav-links { display: flex; gap: 1.4rem; margin-left: .6rem; }
.nav-links a { font-weight: 600; font-size: .94rem; padding-bottom: 3px; border-bottom: 2px solid transparent; transition: border-color .2s, color .2s; }
.nav-links a:hover, .nav-links a.on { color: var(--red); border-color: var(--red); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: .8rem; }
.search { display: flex; align-items: center; gap: .5rem; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: .5rem .85rem; min-width: 230px; color: var(--ink-soft); }
.search input { border: 0; background: transparent; outline: none; font: inherit; font-size: .9rem; width: 100%; color: var(--ink); }
.icon-btn { position: relative; display: grid; place-items: center; height: 42px; width: 42px; border-radius: 10px; color: var(--ink); transition: background .2s, color .2s; }
.icon-btn:hover { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); }
.icon-btn .badge { position: absolute; top: 2px; right: 2px; background: var(--red); color: #fff; font-size: .62rem; font-weight: 800; height: 17px; min-width: 17px; padding: 0 4px; border-radius: 999px; display: grid; place-items: center; }
.lang { display: flex; gap: 2px; border: 1px solid var(--line); border-radius: 10px; padding: 3px; background: var(--surface); }
.lang a { font-size: .72rem; font-weight: 800; padding: .26rem .55rem; border-radius: 7px; color: var(--ink-soft); }
.lang a.on { background: var(--red); color: #fff; }
/* ---------- Full-bleed hero (fills viewport, no overflow) ---------- */
.hero {
position: relative;
height: calc(100dvh - var(--topbar-h) - var(--header-h));
min-height: 460px;
overflow: hidden;
}
.hero img.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(90deg, rgba(20,15,12,.72) 0%, rgba(20,15,12,.38) 42%, rgba(20,15,12,.05) 72%);
}
.hero-inner {
position: relative; z-index: 2; height: 100%;
display: flex; flex-direction: column; justify-content: center; gap: 1.15rem;
max-width: 640px;
}
.hero h1 { color: #fff; font-size: clamp(3rem, 6.5vw, 5.6rem); text-shadow: 0 2px 30px rgba(0,0,0,.35); }
.hero h1 em { font-style: italic; color: var(--gold-soft); }
.hero .lede { color: #F5EEE2; max-width: 44ch; font-size: clamp(1.15rem, 1.7vw, 1.4rem); }
.hero-actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: .3rem; }
.hero-quicklinks { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid rgba(255,255,255,.22); }
.hero-quicklinks a { color: #F1E9DB; font-weight: 600; font-size: .95rem; border-bottom: 2px solid transparent; padding-bottom: 2px; }
.hero-quicklinks a:hover { border-color: var(--gold-soft); color: #fff; }
/* ---------- Section heading ---------- */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.2rem; margin-bottom: 1.8rem; flex-wrap: wrap; }
.sec-head .display { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
.sec-head .sub { color: var(--ink-soft); font-size: 1.05rem; margin-top: .5rem; max-width: 52ch; }
.section--indigo .sec-head .sub, .section--red .sec-head .sub { color: rgba(255,255,255,.8); }
.sec-head .link { font-weight: 800; color: var(--red); font-size: 1rem; border-bottom: 3px solid transparent; padding-bottom: 2px; white-space: nowrap; }
.sec-head .link:hover { border-color: currentColor; }
.section--indigo .sec-head .link, .section--red .sec-head .link { color: var(--gold-soft); }
.section--gold .sec-head .link { color: var(--indigo-deep); }
/* ---------- Product grid + card ---------- */
.grid { display: grid; gap: clamp(.8rem, 1.6vw, 1.4rem); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.card { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .22s, box-shadow .22s, border-color .22s; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--red) 40%, var(--line)); }
.card-media { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--surface-alt); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.card:hover .card-media img { transform: scale(1.04); }
.tag { position: absolute; top: .6rem; left: .6rem; font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: .28rem .5rem; border-radius: 6px; color: #fff; }
.tag--sale { background: var(--red); }
.tag--sold { background: #6B6157; }
.card-body { padding: .9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.card-title { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; line-height: 1.15; letter-spacing: -.01em; }
.card:hover .card-title { color: var(--red); }
.price { display: flex; align-items: baseline; gap: .5rem; margin-top: auto; padding-top: .4rem; }
.price .now { font-weight: 800; font-size: 1.05rem; }
.price .was { color: var(--ink-soft); text-decoration: line-through; font-size: .9rem; }
.price .now.sale { color: var(--red); }
/* One-of-a-kind stock signals — deliberately loud */
.stock-low { display: inline-flex; align-items: center; gap: .35rem; align-self: flex-start; background: var(--gold); color: #2A1E06; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: .22rem .5rem; border-radius: 6px; margin-top: .1rem; }
.stock-out { color: var(--red); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-top: auto; padding-top: .4rem; }
.card--past .card-media img { filter: saturate(.55) brightness(.96); }
.card--past:hover .card-media img { filter: none; }
/* ---------- Collection cards (collections list) ---------- */
.coll-card { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/3; display: block; box-shadow: var(--shadow); }
.coll-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.coll-card:hover img { transform: scale(1.05); }
.coll-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,15,12,.78) 0%, rgba(20,15,12,.05) 60%); }
.coll-card .cap { position: absolute; left: 1rem; right: 1rem; bottom: .9rem; z-index: 2; color: #fff; }
.coll-card .cap h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; margin: 0 0 .1rem; }
.coll-card .cap p { font-size: .85rem; color: #EADFCF; margin: 0; opacity: .9; }
/* ---------- Story ---------- */
/* ---------- Values ---------- */
.values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.value { padding: 1.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.value .ic { height: 40px; width: 40px; margin-bottom: .7rem; display: grid; place-items: center; border-radius: 9px; background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold); }
.value h4 { margin: 0 0 .2rem; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.value p { margin: 0; font-size: .88rem; color: var(--ink-soft); }
/* ---------- Newsletter ---------- */
/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #D9CFC2; padding-block: clamp(2.5rem,5vw,3.5rem) 1.5rem; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2rem; }
.site-footer h5 { font-family: var(--font-display); font-weight: 600; color: #fff; font-size: 1.05rem; margin: 0 0 .9rem; }
.site-footer a { color: #D9CFC2; font-size: .92rem; }
.site-footer a:hover { color: var(--gold-soft); }
.foot-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.foot-social { display: flex; gap: .7rem; margin-top: .9rem; }
.foot-social a { display: grid; place-items: center; height: 38px; width: 38px; border-radius: 9px; border: 1px solid rgba(255,255,255,.18); }
.foot-social a:hover { background: var(--red); border-color: var(--red); color: #fff; }
.foot-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 2rem; padding-top: 1.2rem; text-align: center; font-size: .82rem; color: #9c9085; }
/* ---------- Page header (collection / search / static) ---------- */
.page-head { padding-block: clamp(1.8rem, 3.5vw, 3rem); }
.page-head h1 { margin: .3rem 0 .5rem; font-size: clamp(2.6rem, 5.2vw, 4.4rem); }
.crumbs { font-size: .84rem; color: var(--ink-soft); display: flex; gap: .45rem; flex-wrap: wrap; }
.crumbs a:hover { color: var(--red); }
.crumbs .here { color: var(--ink); font-weight: 600; }
/* ---------- Toolbar (sort / count) ---------- */
.toolbar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.toolbar .count { color: var(--ink-soft); font-size: .92rem; }
.toolbar .spacer { margin-left: auto; }
.select { border: 1.5px solid var(--line); border-radius: 9px; padding: .55rem .8rem; font: inherit; font-size: .9rem; background: var(--surface); color: var(--ink); }
/* ---------- Pagination ---------- */
.pagination { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: 2.5rem; }
.page-btn { display: inline-flex; align-items: center; gap: .4rem; border: 1.5px solid var(--line); background: var(--surface); border-radius: 9px; padding: .55rem .9rem; font-weight: 600; font-size: .9rem; color: var(--ink); transition: border-color .2s, color .2s; }
.page-btn:hover { border-color: var(--red); color: var(--red); }
.page-btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.page-info { font-weight: 600; font-size: .9rem; color: var(--ink-soft); padding-inline: .6rem; }
/* ---------- Product detail (PDP) ---------- */
.pdp { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1.5rem,3.5vw,3rem); align-items: start; }
.pdp-gallery { display: flex; flex-direction: column; gap: .7rem; position: sticky; top: calc(var(--header-h) + 1rem); }
.pdp-main { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4/5; background: var(--surface-alt); }
.pdp-main img { width: 100%; height: 100%; object-fit: cover; }
.pdp-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: .6rem; }
.pdp-thumbs button { border: 1.5px solid var(--line); border-radius: 9px; overflow: hidden; padding: 0; aspect-ratio: 1; background: none; cursor: pointer; }
.pdp-thumbs button.on { border-color: var(--red); }
.pdp-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.pdp-title { margin: .5rem 0 .5rem; }
.pdp-price { font-size: 1.45rem; font-weight: 700; display: flex; align-items: baseline; gap: .6rem; }
.pdp-price .was { font-size: 1rem; color: var(--ink-soft); text-decoration: line-through; font-weight: 400; }
.pdp-price .now.sale { color: var(--red); }
.field { margin: 1.2rem 0; }
.field > label { display: block; font-weight: 700; font-size: .88rem; margin-bottom: .5rem; }
.qty input, .select.full { width: 100%; }
.qty input { width: 96px; text-align: center; border: 1.5px solid var(--line); border-radius: 9px; padding: .7rem; font: inherit; background: var(--surface); color: var(--ink); }
.assurances { list-style: none; margin: 1.2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.assurances li { display: flex; gap: .55rem; align-items: center; font-size: .9rem; color: var(--ink-soft); }
.assurances .ic { color: var(--gold); flex-shrink: 0; font-weight: 800; }
.pdp-meta { border-top: 1px solid var(--line); margin-top: 1.6rem; padding-top: 1.3rem; }
.pdp-meta h4 { font-family: var(--font-display); font-weight: 600; margin: 0 0 .5rem; font-size: 1.1rem; }
.pdp-meta p { color: var(--ink-soft); margin: 0 0 1rem; }
/* ---------- Cart ---------- */
.cart { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(1.5rem,3vw,2.5rem); align-items: start; }
.cart-list { display: flex; flex-direction: column; }
.cart-item { display: grid; grid-template-columns: 92px 1fr auto; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); align-items: center; }
.cart-item:first-child { padding-top: 0; }
.cart-item .thumb { width: 92px; aspect-ratio: 4/5; border-radius: 9px; overflow: hidden; background: var(--surface-alt); }
.cart-item .thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-item h4 { margin: 0 0 .2rem; font-size: 1rem; font-weight: 600; }
.cart-item .variant { font-size: .85rem; color: var(--ink-soft); }
.cart-item .li-price { font-weight: 700; text-align: right; }
.stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: 9px; overflow: hidden; margin-top: .5rem; }
.stepper button { border: 0; background: var(--surface); width: 32px; height: 32px; font-size: 1.1rem; cursor: pointer; color: var(--ink); }
.stepper span { min-width: 34px; text-align: center; font-weight: 600; font-size: .9rem; }
.link-remove { background: none; border: 0; color: var(--ink-soft); font-size: .82rem; cursor: pointer; margin-top: .4rem; padding: 0; }
.link-remove:hover { color: var(--red); }
.summary { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; position: sticky; top: calc(var(--header-h) + 1rem); }
.summary h3 { font-family: var(--font-display); font-weight: 600; margin: 0 0 1rem; }
.summary-row { display: flex; justify-content: space-between; padding: .5rem 0; font-size: .95rem; color: var(--ink-soft); }
.summary-row.total { border-top: 1px solid var(--line); margin-top: .5rem; padding-top: .9rem; font-size: 1.15rem; font-weight: 700; color: var(--ink); }
/* Fulfillment chooser — ship vs. free in-store pickup, chosen on the cart page. */
.fulfillment { margin-top: 1.6rem; }
.fulfillment h3 { font-family: var(--font-display); font-weight: 600; margin: 0 0 .8rem; font-size: 1.05rem; }
.fulfill-option { display: flex; gap: .8rem; align-items: flex-start; padding: 1rem; border: 1.5px solid var(--line); border-radius: var(--radius); cursor: pointer; background: var(--surface); }
.fulfill-option + .fulfill-option { margin-top: .7rem; }
.fulfill-option:hover { border-color: var(--red); }
.fulfill-option.is-selected { border-color: var(--red); box-shadow: 0 0 0 1px var(--red) inset; }
.fulfill-option input { margin-top: .25rem; accent-color: var(--red); flex-shrink: 0; }
.fulfill-option__body { display: block; }
.fulfill-option__label { display: block; font-weight: 700; font-size: .98rem; }
.fulfill-option__note { display: block; color: var(--ink-soft); font-size: .88rem; margin-top: .15rem; }
.fulfill-address { margin-top: .65rem; padding-top: .65rem; border-top: 1px solid var(--line); font-size: .9rem; line-height: 1.45; }
.fulfill-address__name { font-weight: 600; }
.fulfill-address__hours { color: var(--ink-soft); margin-top: .3rem; }
.fulfill-address__map { display: inline-block; margin-top: .35rem; color: var(--red); font-weight: 600; }
.fulfill-error { color: var(--red); font-size: .88rem; margin: .6rem 0 0; }
/* Fulfillment recap above the embedded Stripe form. */
.checkout-fulfillment { border: 1.5px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; margin-bottom: 1.2rem; font-size: .92rem; line-height: 1.5; }
.checkout-fulfillment strong { display: block; font-size: .98rem; margin-bottom: .25rem; }
.checkout-fulfillment .muted { color: var(--ink-soft); }
.checkout-fulfillment a { color: var(--red); font-weight: 600; }
/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(1.5rem,3vw,2.5rem); align-items: start; }
.info-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.info-card h3 { font-family: var(--font-display); font-weight: 600; margin: 0 0 .3rem; font-size: 1.05rem; }
.info-block + .info-block { margin-top: 1.3rem; padding-top: 1.3rem; border-top: 1px solid var(--line); }
.hours { list-style: none; margin: .4rem 0 0; padding: 0; }
.hours li { display: flex; justify-content: space-between; padding: .25rem 0; font-size: .92rem; }
.hours li span:first-child { color: var(--ink); font-weight: 600; }
.hours li span:last-child { color: var(--ink-soft); }
.map { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16/10; background: var(--surface-alt); }
.map iframe { width: 100%; height: 100%; border: 0; }
/* ---------- About ---------- */
.prose { max-width: 66ch; }
.prose p { color: var(--ink-soft); margin: 0 0 1.15rem; font-size: 1.12rem; line-height: 1.6; }
.prose.on-dark p { color: rgba(255,255,255,.9); }
/* Big pull quote for drama / contrast */
.pull {
font-family: var(--font-display); font-weight: 600;
font-size: clamp(1.7rem, 3.6vw, 3rem); line-height: 1.12;
letter-spacing: -.015em; margin: 0; text-wrap: balance;
}
.pull .mark { font-style: italic; }
/* Story card with thick colored spine (echoes the original about page) */
.storycard {
background: var(--surface); border-radius: var(--radius);
padding: clamp(1.6rem, 3vw, 2.8rem); border-left: 10px solid var(--red);
box-shadow: var(--shadow);
}
.about-panel { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,3.5vw,3.5rem); align-items: center; }
.about-panel .media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4/5; box-shadow: var(--shadow); }
.about-panel .media img { width: 100%; height: 100%; object-fit: cover; }
.about-hero { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 21/9; box-shadow: var(--shadow); }
.about-hero img { width: 100%; height: 100%; object-fit: cover; }
.about-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,3vw,2.5rem); }
.about-gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: .7rem; }
.about-gallery > div { border-radius: 10px; overflow: hidden; background: var(--surface-alt); }
.about-gallery img { width: 100%; height: 100%; object-fit: cover; }
.about-gallery .tall { grid-row: span 2; aspect-ratio: auto; }
.about-gallery .wide { grid-column: span 2; }
/* ---------- Empty / 404 ---------- */
.centered { min-height: 52vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1rem; }
/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
.grid--4 { grid-template-columns: repeat(3, 1fr); }
.pdp, .cart, .contact, .about-cols { grid-template-columns: 1fr; }
.pdp-gallery, .summary, .pdp-thumbs { position: static; }
.values { grid-template-columns: repeat(2, 1fr); }
.foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
:root { --header-h: 64px; }
.search { display: none; } /* .nav-links and .lang go earlier, at 900px */
.grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
.foot-grid { grid-template-columns: 1fr 1fr; }
.cart-item { grid-template-columns: 72px 1fr; }
.cart-item .thumb { width: 72px; }
.cart-item .li-price { grid-column: 2; text-align: left; }
}
@media (max-width: 480px) {
.grid--3, .grid--4, .grid--2 { grid-template-columns: repeat(2, 1fr); }
.foot-grid { grid-template-columns: 1fr; }
}
/* ==========================================================
Motion — one cohesive system, all one-time & reduced-motion safe
========================================================== */
.site-header { transition: box-shadow .3s ease; }
.site-header.scrolled { box-shadow: 0 8px 24px -16px rgba(30,24,19,.5); }
@media (prefers-reduced-motion: no-preference) {
/* Scroll reveal (fade + rise), staggered via --d on grid children */
.reveal {
opacity: 0; transform: translateY(26px);
transition: opacity .7s cubic-bezier(.22,.7,.2,1) var(--d,0ms),
transform .7s cubic-bezier(.22,.7,.2,1) var(--d,0ms);
will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }
/* Woven divider draws in left→right */
.reveal-x {
opacity: .001; transform: scaleX(0); transform-origin: left center;
transition: transform .85s cubic-bezier(.22,.7,.2,1), opacity .3s ease;
}
.reveal-x.in { opacity: 1; transform: none; }
/* Hero: slow settle-zoom + staggered content entrance */
.hero img.hero-bg { animation: heroZoom 20s ease-out both; }
@keyframes heroZoom { from { transform: scale(1.09); } to { transform: scale(1); } }
.hero-inner > * { opacity: 0; animation: heroUp .85s cubic-bezier(.22,.7,.2,1) both; }
.hero-inner > *:nth-child(1) { animation-delay: .15s; }
.hero-inner > *:nth-child(2) { animation-delay: .30s; }
.hero-inner > *:nth-child(3) { animation-delay: .45s; }
.hero-inner > *:nth-child(4) { animation-delay: .60s; }
@keyframes heroUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
}
/* ==========================================================
Mobile navigation + mobile optimization
========================================================== */
.tb-full { display: inline; }
.tb-short { display: none; }
.topbar b { white-space: nowrap; }
.nav-toggle { display: none; align-items: center; justify-content: center; height: 44px; width: 44px; border: 0; background: transparent; color: var(--ink); border-radius: 10px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.nav-toggle:hover { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); }
.nav-toggle .ic-close { display: none; }
.nav-toggle.is-open .ic-open { display: none; }
.nav-toggle.is-open .ic-close { display: block; }
.mobile-menu { display: none; }
/* The desktop row is at capacity between the 1120px breakpoint, where the links
hand over to the hamburger, and about 1235px: brand + six links + search +
language + cart do not fit. Because .brand does not shrink, the overflow used
to land on the right-hand controls and push them past the viewport edge —
which predates the address going into the lockup, since the tagline it
replaced was wider and overflowed further. Nothing in the band can be made to
fit by clipping: shortening the sub-line only moves the ellipsis onto the
shop's own name. So the address steps out here, exactly as it already does
below 720px, and for the same reason — the topbar is still carrying it. */
@media (max-width: 1235px) and (min-width: 1121px) {
.brand-sub { display: none; }
}
/* The header is either whole or collapsed — the nav, the language pair and the
search all leave together here, rather than the search going at 1120px and
the nav hanging on to 720px. In that old gap the row still wanted about
940px with the webfont loaded and 1040px while it was still loading, so the
cart on the end was laid out past the right edge and clipped away by the
body's overflow-x, with no burger menu to replace it. That was every iPad in
portrait. The rest of the phone layout still starts at 720px. */
@media (max-width: 1120px) {
.search, .nav-links, .lang { display: none; }
.site-header { height: auto; }
.nav { height: var(--header-h); }
.nav-toggle { display: inline-flex; }
.mobile-menu {
display: block; overflow: hidden; max-height: 0;
background: var(--bg); border-top: 1px solid var(--line);
transition: max-height .32s ease;
}
.mobile-menu.open { max-height: 78vh; overflow-y: auto; }
.mobile-menu .inner { padding: .5rem var(--gutter) 1.1rem; display: flex; flex-direction: column; }
.m-search { display: flex; gap: .5rem; margin: .5rem 0 .3rem; }
.m-search input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: .8rem .9rem; font: inherit; background: var(--surface); color: var(--ink); }
.m-search button { border: 0; background: var(--red); color: #fff; border-radius: 10px; padding: 0 1rem; display: grid; place-items: center; }
.m-link { display: block; padding: .95rem .3rem; font-weight: 700; font-size: 1.08rem; color: var(--ink); border-bottom: 1px solid var(--line); }
.m-link.on { color: var(--red); }
.m-lang { display: flex; gap: .6rem; margin-top: 1rem; }
.m-lang a { flex: 1; text-align: center; padding: .8rem; border: 1.5px solid var(--line); border-radius: 10px; font-weight: 800; color: var(--ink); }
.m-lang a.on { background: var(--red); color: #fff; border-color: var(--red); }
}
@media (max-width: 720px) {
/* Stronger bottom scrim + text lower so the hero copy is readable on phones */
.hero::after { background: linear-gradient(180deg, rgba(20,15,12,.28) 0%, rgba(20,15,12,.34) 40%, rgba(20,15,12,.72) 100%); }
.hero-inner { justify-content: flex-end; padding-bottom: 2.2rem; }
}
@media (max-width: 600px) {
.tb-full { display: none; }
.tb-short { display: inline; }
.topbar { font-size: .74rem; }
}
@media (max-width: 560px) {
.display { overflow-wrap: break-word; }
.hero h1 { font-size: clamp(1.95rem, 8.5vw, 2.7rem); }
.hero .lede { font-size: 1.05rem; }
.mega { font-size: clamp(2.6rem, 12vw, 3.4rem); }
.section { padding-block: clamp(2rem, 7vw, 2.75rem); }
.card-title { font-size: 1rem; }
.price .now { font-size: 1rem; }
.sec-head { margin-bottom: 1.2rem; }
/* Let long labels wrap on a phone. .btn's nowrap turned "Preguntar por
WhatsApp" and "WhatsApp (347) 984-9956" into an unbreakable minimum width
that a 1fr grid track had to honour, pushing the product and contact cards
off the right edge. Same treatment the offer cards already use. */
.btn {
padding: .8rem 1.25rem; /* keep tap targets comfortable */
white-space: normal;
overflow-wrap: anywhere;
text-align: center;
}
.stepper button { width: 40px; height: 40px; }
.pdp-thumbs { grid-template-columns: repeat(4, 1fr); }
/* Simplify the About inspiration gallery to a clean stack */
.about-gallery { aspect-ratio: auto !important; grid-template-columns: 1fr 1fr; }
.about-gallery .tall, .about-gallery .wide { grid-column: auto !important; grid-row: auto !important; }
.about-gallery > div { aspect-ratio: 1 / 1; }
}
@media (max-width: 380px) {
.grid--3, .grid--4, .grid--2 { grid-template-columns: 1fr; }
/* .values stopped at two columns and never reached one, so its 1fr tracks
floored at min-content and ran off the right edge of the narrowest phones.
It now finishes the same ladder as every other grid. */
.values { grid-template-columns: 1fr; }
.brand-sub { display: none; }
}
/* ==========================================================
Guatemala ↔ Brooklyn character pass
Uses the existing Juanita identity and verified family story.
========================================================== */
body {
background:
radial-gradient(circle at 20% 0%, rgba(211,154,36,.055), transparent 28rem),
var(--bg);
}
::selection { background: var(--gold-soft); color: var(--ink); }
:focus-visible { outline: 3px solid var(--jade); outline-offset: 3px; }
.weave {
height: 7px;
background:
linear-gradient(135deg, transparent 0 37%, rgba(255,255,255,.34) 37% 48%, transparent 48% 100%),
linear-gradient(90deg,
var(--red) 0 18%, var(--gold) 18% 31%, var(--jade) 31% 52%,
var(--indigo) 52% 69%, var(--gold-soft) 69% 82%, var(--red) 82%);
background-size: 20px 7px, 100% 100%;
}
.site-header {
background: color-mix(in srgb, var(--bg) 94%, transparent);
border-bottom-color: rgba(103,92,82,.2);
}
.nav { gap: clamp(.8rem, 1.5vw, 1.35rem); }
.brand { gap: .72rem; min-width: 0; }
.brand img {
height: 44px;
width: auto;
max-width: 150px;
object-fit: contain;
}
.brand-name { font-size: 1.25rem; }
.brand-sub { color: var(--jade-deep); font-weight: 700; letter-spacing: .01em; }
.nav-links { gap: clamp(.85rem, 1.5vw, 1.35rem); margin-left: 0; }
/* The row lays out inside .wrap's 1240px cap, so widening the window never gave
these more space and "Nuestra Historia" broke onto a second line at every
desktop size, dropping the row off its baseline. */
.nav-links a { font-size: .9rem; white-space: nowrap; }
/* The one control in the header row that can afford to shrink. It used to hold
a hard 190px floor, so when the row ran out of space the cart on the end had
nowhere to go and was pushed off the edge instead. The floor is now just wide
enough to keep the magnifier visible — it is only ever reached while the
webfonts are still loading and the wider fallback metrics are in play. */
.search { flex: 0 1 230px; min-width: 48px; max-width: 230px; border-radius: 3px; }
.search input { min-width: 0; }
.lang, .lang a, .icon-btn, .nav-toggle { border-radius: 3px; }
.lang a.on { background: var(--jade-deep); }
.btn {
border-radius: 3px;
box-shadow:none;
}
.btn:hover { transform: translate(-1px,-1px); box-shadow:none; }
.btn--gold { background: var(--gold); }
.btn--jade { background: var(--jade-deep); color: #fff; }
.btn--text {
padding-inline: .2rem;
color: #fff;
box-shadow: none;
border-bottom: 2px solid var(--gold-soft);
border-radius: 0;
}
.btn--text:hover { box-shadow: none; color: var(--gold-soft); }
/* Home hero: text sits away from the founders on wide screens. */
.hero { min-height: 560px; }
.hero img.hero-bg { object-position: center 50%; }
.hero::after {
background:
linear-gradient(90deg, rgba(20,15,12,.04) 0%, rgba(20,15,12,.18) 43%, rgba(20,15,12,.78) 100%),
linear-gradient(0deg, rgba(20,15,12,.25), transparent 45%);
}
.hero-inner {
margin-left: auto;
max-width: 610px;
padding-left: clamp(1rem, 3vw, 2rem);
}
.hero h1 {
font-size: clamp(3.2rem, 6.2vw, 5.9rem);
max-width: 10ch;
}
.hero .lede { max-width: 38ch; }
.hero-actions { align-items: center; }
.hero-caption {
position: absolute;
z-index: 3;
left: var(--gutter);
bottom: 1rem;
color: rgba(255,255,255,.86);
font-size: .72rem;
letter-spacing: .02em;
padding: .35rem .55rem;
background: rgba(20,15,12,.48);
backdrop-filter: blur(6px);
}
/* Editorial section headings and cards. */
.sec-head { border-bottom: 1px solid var(--line); padding-bottom: 1rem; }
.sec-head .link { color: var(--jade-deep); }
.card {
border: 0;
border-bottom: 2px solid var(--line);
border-radius: 0;
background: transparent;
}
.card:hover {
transform: translateY(-3px);
box-shadow: none;
border-bottom-color: var(--red);
}
.card-media { border-radius: var(--radius) var(--radius) 0 0; }
.card-body { padding: .85rem .1rem 1rem; }
.card-kicker {
color: var(--jade-deep);
font-size: .7rem;
font-weight: 800;
letter-spacing: .09em;
text-transform: uppercase;
}
.card-title { font-size: 1.12rem; }
.stock-low {
color: var(--red-deep);
background: transparent;
padding: .12rem 0;
letter-spacing: .025em;
}
.tag { border-radius: 2px; }
.tag--sold { background: var(--indigo); }
.card--past .card-media img { filter: none; }
.section--indigo .card { border-bottom-color: rgba(255,255,255,.25); }
.section--indigo .card:hover { border-bottom-color: var(--gold-soft); }
/* Shop by category: image-led and deliberately less card-like. */
/* Brand bridge and founder journey. */
.bridge-band {
position: relative;
overflow: hidden;
background: var(--jade-deep);
color: #fff;
}
.bridge-band::before {
content: "";
position: absolute; right: -6rem; top: 50%; width: 28rem; height: 28rem;
transform: translateY(-50%) rotate(6deg);
background: url("../images/logojuanita-512.webp") center/contain no-repeat;
opacity: .1; mix-blend-mode: screen;
}
.bridge {
position: relative;
display: grid;
grid-template-columns: minmax(0,1.2fr) minmax(240px,.8fr);
gap: 2rem;
align-items: end;
}
.bridge h2 { color: #fff; max-width: 12ch; }
.bridge p { color: rgba(255,255,255,.86); max-width: 46ch; margin: 0 0 1.3rem; }
.bridge .link { color: var(--gold-soft); font-weight: 800; border-bottom: 2px solid currentColor; }
.founder-story {
display: grid;
grid-template-columns: minmax(0,1.1fr) minmax(340px,.9fr);
gap: clamp(1.5rem,4vw,4rem);
align-items: center;
}
.founder-photo {
position: relative;
min-height: 500px;
border-radius: var(--radius);
overflow: hidden;
}
.founder-photo img { width:100%; height:100%; object-fit:cover; object-position: 24% center; position:absolute; inset:0; }
.founder-copy .label { color: var(--gold-soft); margin-bottom: .8rem; }
.founder-copy > p { color: rgba(255,255,255,.88); font-size: 1.08rem; }
.mini-timeline {
display: grid;
grid-template-columns: repeat(3,1fr);
gap: 1rem;
margin: 1.6rem 0 1.8rem;
padding-top: 1rem;
border-top: 1px solid rgba(255,255,255,.24);
}
.mini-timeline strong {
display: block;
color: var(--gold-soft);
font-family: var(--font-display);
font-size: 1.05rem;
}
.mini-timeline span { display:block; color:rgba(255,255,255,.75); font-size:.78rem; line-height:1.4; margin-top:.2rem; }
/* Collection tiles. */
.coll-card { border-radius: var(--radius); box-shadow: none; }
.coll-card::before {
content:""; position:absolute; inset:.55rem; z-index:2;
border:1px solid rgba(255,255,255,.45); pointer-events:none;
}
.coll-card .cap { left: 1.35rem; right: 1.35rem; bottom: 1.2rem; }
.coll-card .cap h3 { font-size: 1.55rem; }
/* Product detail. */
.pdp-main { border-radius: var(--radius); border: 0; }
.pdp-thumbs button { border-radius: 2px; }
.pdp-thumbs button.on { border-color: var(--jade-deep); box-shadow: 0 0 0 1px var(--jade-deep); }
.pdp-copy { padding-top: .25rem; }
.pdp-unique {
color: var(--jade-deep);
font-size: .76rem;
font-weight: 800;
letter-spacing: .11em;
text-transform: uppercase;
margin-bottom: .55rem;
}
.pdp-actions { display:flex; gap:.7rem; margin-top:1.4rem; }
.pdp-help {
margin-top: 1.5rem;
padding: 1.1rem 1.2rem;
border-left: 5px solid var(--gold);
background: var(--surface-alt);
}
.pdp-help h4 { margin:0 0 .25rem; font-family:var(--font-display); font-size:1.1rem; }
.pdp-help p { margin:0; color:var(--ink-soft); font-size:.9rem; }
.assurances .ic { color: var(--jade-deep); }
/* About page: make the verified journey the main visual. */
.about-hero {
aspect-ratio: 2.15/1;
border-radius: var(--radius);
box-shadow: none;
}
.about-hero img { object-position: center 45%; }
.photo-caption { color: var(--ink-soft); font-size:.78rem; margin:.55rem 0 0; }
.about-story-layout {
display:grid;
grid-template-columns: minmax(220px,.58fr) minmax(0,1.42fr);
gap:clamp(1.5rem,4vw,4rem);
align-items:start;
}
.about-seal {
position: sticky;
top: calc(var(--header-h) + 1.5rem);
padding: 1.4rem;
border: 1px solid var(--line);
background: rgba(255,255,255,.48);
}
/* height:auto matters here. The markup carries width="512" height="512", and
those attributes stay live as presentational hints for whichever dimension
CSS does not set — so a width-only rule left the seal rendering 180x512. */
.about-seal img { width:min(180px,100%); height:auto; margin:0 auto; }
.about-seal p { margin:1rem 0 0; text-align:center; color:var(--jade-deep); font-weight:800; }
.storycard { border-left-color: var(--jade-deep); border-radius: var(--radius); }
.journey-line {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:1px;
background:var(--line);
border:1px solid var(--line);
}
.journey-step { background:var(--bg); padding:1.2rem; }
.journey-step strong { display:block; font-family:var(--font-display); color:var(--red); font-size:1.25rem; }
.journey-step span { display:block; margin-top:.3rem; color:var(--ink-soft); font-size:.88rem; }
.value { border-radius: 0; border: 0; border-top: 5px solid var(--jade-deep); }
.value:nth-child(2) { border-top-color: var(--red); }
.value:nth-child(3) { border-top-color: var(--indigo); }
.value:nth-child(4) { border-top-color: var(--gold); }
/* Footer identity. */
.foot-brand-lockup { display:flex; gap:.8rem; align-items:center; margin-bottom:.9rem; }
.foot-brand-lockup img {
height:50px; width:auto; max-width:150px; object-fit:contain;
}
.foot-brand-lockup h5 { margin:0; line-height:1.15; font-size:1.14rem; }
.foot-brand > p { max-width:36ch; }
@media (max-width: 900px) {
.bridge, .founder-story, .about-story-layout { grid-template-columns:1fr; }
.bridge h2 { max-width:15ch; }
.founder-photo { min-height:420px; }
.about-seal { position:static; display:flex; align-items:center; gap:1rem; }
.about-seal img { width:100px; margin:0; }
.about-seal p { text-align:left; margin:0; }
}
@media (max-width: 720px) {
:root { --header-h: 64px; }
.nav { gap:.25rem; }
.brand { flex:1; gap:.48rem; overflow:hidden; }
.brand img { width:42px; height:42px; flex:0 0 42px; }
.brand-name { font-size:1.02rem; white-space:nowrap; }
.brand-sub { display:none; }
.nav-right { gap:.05rem; margin-left:.1rem; }
.icon-btn, .nav-toggle { width:38px; height:42px; flex:0 0 38px; }
.hero {
height: calc(100svh - var(--topbar-h) - var(--header-h) - 5px);
min-height:560px;
}
.hero img.hero-bg { object-position: 36% center; }
.hero::after {
background: linear-gradient(180deg, rgba(20,15,12,.12), rgba(20,15,12,.2) 42%, rgba(20,15,12,.86) 100%);
}
.hero-inner { margin:0; padding:0 0 2.8rem; max-width:100%; }
.hero h1 { max-width:10ch; font-size:clamp(2.45rem,11vw,3.45rem); }
.hero .lede { max-width:30ch; }
.hero-caption { left:var(--gutter); bottom:.55rem; font-size:.62rem; max-width:88%; }
.founder-photo { min-height:360px; }
.mini-timeline, .journey-line { grid-template-columns:1fr; }
.mini-timeline { gap:.7rem; }
.mini-timeline > div { display:grid; grid-template-columns:90px 1fr; gap:.6rem; }
.pdp-actions { flex-direction:column; }
.about-hero { aspect-ratio: 4/3; }
}
@media (max-width: 520px) {
.topbar { padding-inline:.5rem; }
.grid--4 .card-title, .grid--3 .card-title { font-size:.96rem; }
.card-kicker { font-size:.62rem; }
.founder-photo { min-height:310px; }
.about-seal { padding:.9rem; }
}
/* ==========================================================
BOLD POSTER DIRECTION
Brooklyn storefront energy + Juanita's woven-line identity.
Sharp, asymmetric, unmistakable, and still commerce-first.
========================================================== */
body {
background-color: var(--bg);
background-image:
linear-gradient(rgba(32,25,20,.028) 1px, transparent 1px),
linear-gradient(90deg, rgba(32,25,20,.028) 1px, transparent 1px);
background-size: 22px 22px;
}
.topbar {
font-size: .72rem;
font-weight: 800;
letter-spacing: .055em;
text-transform: uppercase;
}
.site-header {
border-bottom: 3px solid var(--ink);
backdrop-filter: none;
background: var(--bg);
}
.brand img { border:0; box-shadow:none; }
.brand-name { font-weight: 800; }
.nav-links a {
padding: .45rem .55rem;
border: 0;
font-weight: 800;
}
.nav-links a:hover,
.nav-links a.on {
color: #fff;
background: var(--red);
border: 0;
}
.search, .lang { border: 2px solid var(--ink); }
/* Header search results. Anchored under the field: with no rules at all the
panel laid itself out as a flex sibling of the input, stretching the field to
about 530px tall and spilling over the topbar and the hero. It borrows the
field's own border so the two read as one control. */
.search { position: relative; }
.predictive-results {
position: absolute;
top: calc(100% + .45rem);
right: 0;
z-index: 60;
width: max(100%, 22rem);
max-height: min(70vh, 26rem);
overflow-y: auto;
background: var(--surface);
border: 2px solid var(--ink);
color: var(--ink);
}
.ps-empty { margin: 0; padding: 1rem; text-align: center; color: var(--ink-soft); font-size: .9rem; }
.ps-list { display: flex; flex-direction: column; }
.ps-item {
display: flex; align-items: center; gap: .7rem;
padding: .6rem .7rem;
border-bottom: 1px solid var(--line);
}
.ps-item:last-child { border-bottom: 0; }
.ps-item:hover, .ps-item:focus-visible { background: var(--surface-alt); }
.ps-thumb {
flex: 0 0 auto; width: 48px; height: 48px;
overflow: hidden; background: var(--surface-alt); border: 1px solid var(--line);
}
.ps-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ps-text { min-width: 0; }
.ps-title, .ps-price { display: block; }
.ps-title { font-weight: 700; font-size: .88rem; line-height: 1.25; }
.ps-price { margin-top: .1rem; color: var(--ink-soft); font-size: .82rem; font-weight: 600; }
.lang a.on { background:var(--indigo); }
.icon-btn:hover, .nav-toggle:hover { background:var(--gold); color:var(--ink); }
.btn {
min-height: 48px;
border: 2px solid var(--ink);
box-shadow:none;
text-transform: uppercase;
letter-spacing: .035em;
font-size: .82rem;
font-weight: 800;
}
.btn:hover {
transform: translateY(-2px);
box-shadow:none;
}
.btn--text {
min-height: 0;
/* `border: 0 0 3px 0` is not a valid shorthand — the whole declaration was
dropped, so .btn's 2px box stayed and the text link rendered as a second
solid button beside the primary CTA. */
border: 0;
border-bottom: 3px solid var(--gold-soft);
box-shadow: none;
color:#fff;
}
.btn--text:hover { box-shadow:none; transform:translateY(-2px); }
.btn--ondark { color:var(--ink); }
.weave {
height: 12px;
border-block: 2px solid var(--ink);
background:
repeating-linear-gradient(135deg,
var(--red) 0 12px, var(--gold) 12px 24px,
var(--jade) 24px 36px, var(--indigo) 36px 48px,
var(--gold-soft) 48px 60px);
}
/* Poster hero: founders and shop on the left, message on a hard color field. */
.page-home .hero {
height: calc(100dvh - var(--topbar-h) - var(--header-h) - 8px);
/* A 650px floor outlasted the viewport on a laptop window shorter than about
780px and pushed "Ver piezas únicas" below the fold. 500px still holds the
composition together and clears the fold on a 1366x768 screen; on anything
taller the calc above wins and nothing changes. */
min-height: 500px;
max-height: 900px;
background: var(--indigo);
border-bottom: 0;
}
.page-home .hero img.hero-bg {
inset: 0 auto 0 0;
width: 64%;
height: 100%;
object-position: 35% center;
clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
filter: saturate(1.08) contrast(1.03);
}
.page-home .hero::after { display:none; }
.page-home .hero::before {
content:"";
position:absolute;
z-index:1;
top:-8%;
bottom:-8%;
left:59%;
width:42px;
background:var(--gold);
transform:rotate(7deg);
border-inline:3px solid var(--ink);
}
.page-home .hero-inner {
max-width: 520px;
width: 39%;
margin-left:64%;
padding:2.5rem 0 2.5rem 2rem;
}
.page-home .hero h1 {
max-width:7.4ch;
font-size:clamp(4.2rem,7vw,7.2rem);
line-height:.84;
letter-spacing:-.055em;
text-shadow:none;
}
.page-home .hero .lede {
font-size:clamp(1.05rem,1.5vw,1.3rem);
color:#fff;
border-left:8px solid var(--gold); /* --jade is this panel's own colour */
padding-left:1rem;
}
.page-home .hero-caption {
left:1rem;
bottom:1rem;
border:2px solid rgba(255,255,255,.65);
background:var(--ink);
font-weight:700;
}
/* Oversized editorial hierarchy. */
.page-home .sec-head {
align-items:end;
padding:0;
border:0;
margin-bottom:2rem;
}
.page-home .sec-head h2 {
max-width:11ch;
font-size:clamp(3.2rem,7vw,6.8rem);
line-height:.84;
letter-spacing:-.05em;
}
.page-home .sec-head .sub {
max-width:38ch;
margin-top:1rem;
font-size:1.1rem;
border-left:6px solid var(--gold);
padding-left:.8rem;
}
.sec-head .link {
color:var(--ink);
background:var(--gold);
border:2px solid var(--ink);
padding:.55rem .75rem;
box-shadow:none;
}
.sec-head .link:hover { border-color:var(--ink); transform:translateY(-2px); box-shadow:none; }
/* Category collage — intentionally irregular. */
/* Product cards become collectible poster objects. */
.card {
background:var(--surface);
border:var(--poster-border);
box-shadow:none;
border-radius:0;
}
.card:hover {
transform:translateY(-3px);
box-shadow:none;
border-color:var(--ink);
}
.card-media { border-radius:0; border-bottom:3px solid var(--ink); }
.card-body { padding:1rem; }
.card-kicker {
color:var(--red);
font-weight:900;
}
.card-title {
font-size:1.25rem;
line-height:1;
}
.tag {
top:.75rem;
left:-.25rem;
border:2px solid var(--ink);
box-shadow:none;
transform:rotate(-4deg);
}
/* No column rules of its own: declared after the .grid--4 breakpoints, it used
to win on source order and hold 4 columns where every other product grid was
at 3, and 2 where they were at 1. It now rides .grid--4's ladder and only
adds the wide lead card. */
.featured-grid {
align-items:start;
}
.featured-grid .card:first-child { grid-column:span 2; }
.featured-grid .card:first-child .card-media { aspect-ratio:8/5; }
.featured-grid .card:first-child .card-title { font-size:2rem; }
.featured-grid .card:nth-child(4n+2) { background:var(--gold-soft); }
.featured-grid .card:nth-child(4n) { background:#E7ECF3; }
@media (max-width: 380px) {
/* A single column cannot carry a two-column span — it would open an implicit
second track — so the lead card becomes an ordinary one here. */
.featured-grid .card:first-child { grid-column:auto; }
.featured-grid .card:first-child .card-media { aspect-ratio:4/5; }
}
.bridge-band {
background:var(--gold);
color:var(--ink);
border-block:3px solid var(--ink);
}
.bridge-band::before { opacity:.2; mix-blend-mode:multiply; }
.bridge h2 {
color:var(--ink);
font-size:clamp(4rem,8vw,8rem);
line-height:.78;
letter-spacing:-.06em;
text-transform:uppercase;
}
.bridge p { color:var(--ink); font-weight:700; font-size:1.12rem; }
.bridge .link {
display:inline-block;
color:#fff;
background:var(--red);
border:2px solid var(--ink);
padding:.65rem .8rem;
box-shadow:none;
}
.founder-story { gap:0; border:var(--poster-border); box-shadow:var(--hard-shadow); }
.founder-photo {
min-height:610px;
border-radius:0;
clip-path:polygon(0 0,100% 0,90% 100%,0 100%);
}
.founder-copy { padding:clamp(1.5rem,4vw,4rem); margin-left:-2rem; }
.founder-copy .label {
display:inline-block;
background:var(--red);
color:#fff;
border:2px solid var(--ink);
padding:.45rem .6rem;
transform:rotate(-2deg);
}
.founder-copy h2 { font-size:clamp(3rem,5.4vw,5.6rem); line-height:.84; }
/* Sits on .section--indigo, where a jade rule is invisible and the entries read
as arbitrarily indented text. Gold-soft already marks the dates alongside. */
.mini-timeline > div { border-left:4px solid var(--gold-soft); padding-left:.65rem; }
/* Bold page openers for all internal routes. */
.page-head {
max-width:var(--maxw);
margin-top:2rem;
margin-bottom:1rem;
padding:clamp(1.5rem,4vw,3.5rem);
background:var(--gold);
border:var(--poster-border);
box-shadow:var(--hard-shadow);
position:relative;
overflow:hidden;
}
.page-head::after {
content:"";
position:absolute;
width:180px;
height:180px;
right:-55px;
top:-70px;
background:url("../images/logojuanita-512.webp") center/cover;
mix-blend-mode:multiply;
opacity:.22;
transform:rotate(14deg);
}
.page-head h1,
.page-head h1.display {
position:relative;
z-index:1;
color:var(--ink);
font-size:clamp(4rem,9vw,8.5rem);
line-height:.78;
letter-spacing:-.055em;
text-transform:uppercase;
}
.page-head .lede { position:relative;z-index:1;color:var(--ink);font-weight:700; }
.page-head .crumbs { position:relative;z-index:1;color:var(--ink);font-weight:700; }
/* The two dark page openers. Everything above paints this block for the gold
ground it started on — --ink headings, --ink lede, --ink crumbs — so a head
that swaps in a dark background has to restate its text as well, or it keeps
near-black type on it. Contact was doing exactly that: --ink on --jade is
about 1.3:1. */
.page-about .page-head { background:var(--red); color:#fff; }
.page-contact .page-head { background:var(--jade); color:#fff; }
.page-about .page-head h1,
.page-about .page-head .lede,
.page-about .page-head .crumbs,
.page-about .page-head .crumbs .here,
.page-contact .page-head h1,
.page-contact .page-head .lede,
.page-contact .page-head .crumbs,
.page-contact .page-head .crumbs .here { color:#fff !important; }
/* The watermark is a multiply blend tuned for the gold ground; on a dark one it
only darkens, which is invisible. Screen lifts it back to a faint highlight.
The crumb hover is the same story: brand red does not read on either field. */
.page-about .page-head::after,
.page-contact .page-head::after { mix-blend-mode:screen; opacity:.14; }
.page-about .page-head .crumbs a:hover,
.page-contact .page-head .crumbs a:hover { color:var(--gold-soft); }
.page-search .page-head { background:var(--gold-soft); }
.toolbar {
padding:1rem;
border:var(--poster-border);
background:var(--surface);
box-shadow:none;
}
.select, .qty input { border:2px solid var(--ink); border-radius:0; }
.pagination { margin-bottom:1rem; }
.page-btn { border:2px solid var(--ink); border-radius:0; box-shadow:none; }
/* Collection gallery keeps product clarity but drops the template feel.
The drop is keyed to the column, not to the card's index. `5n+2` on a
four-column grid picked cards 2, 7, 12 — column 2, then 3, then 4 — so the
offset wandered across the grid and read as broken alignment rather than
rhythm. Alternate columns now drop, identically on every row, and each
breakpoint re-keys to the column count it actually has. */
.page-collection .grid--4,
.page-search .grid--4 { align-items:start; }
:is(.page-collection, .page-search) .grid--4 .card {
transform:translateY(var(--stagger, 0rem));
}
:is(.page-collection, .page-search) .grid--4 .card:hover {
transform:translateY(calc(var(--stagger, 0rem) - 3px));
}
/* Four columns: the second and the fourth sit low. */
:is(.page-collection, .page-search) .grid--4 .card:nth-child(4n+2),
:is(.page-collection, .page-search) .grid--4 .card:nth-child(4n) { --stagger:2rem; }
@media (max-width: 1000px) {
/* Three columns: the middle one. */
:is(.page-collection, .page-search) .grid--4 .card:nth-child(4n+2),
:is(.page-collection, .page-search) .grid--4 .card:nth-child(4n) { --stagger:0rem; }
:is(.page-collection, .page-search) .grid--4 .card:nth-child(3n+2) { --stagger:2rem; }
}
.coll-card {
border:var(--poster-border);
border-radius:0;
box-shadow:var(--hard-shadow);
}
.coll-card::before { border:2px solid rgba(255,255,255,.7); }
.coll-card .cap {
left:0;right:0;bottom:0;
padding:1rem 1.2rem;
background:var(--ink);
}
/* Homepage "Explore the collection" tiles: square media, and a single-line
banner in place of the two-line one still used on /collections. Declared
after the base rule so it wins on source order, not extra specificity.
Browsers without color-mix() fall back to the opaque band above. */
.coll-card--compact { aspect-ratio:1/1; }
.coll-card--compact .cap {
padding:.5rem 1.2rem;
background:color-mix(in srgb, var(--ink) 62%, transparent);
}
/* Scrapbook tilt, keyed to the two-column grid rather than to whichever card
happened to be 2nd, 3rd or 5th: the right-hand column sits low and leans one
way, the left leans the other. Repeats identically however many collections
she publishes. */
.page-collections .coll-card:nth-child(odd) { transform:rotate(-1deg); }
.page-collections .coll-card:nth-child(even) { transform:translateY(2rem) rotate(1.25deg); }
/* PDP becomes a two-color object instead of two floating columns. */
.page-product main.section { padding-top:2rem; }
.page-product .pdp {
gap:0;
border:var(--poster-border);
box-shadow:var(--hard-shadow);
background:var(--gold);
}
.page-product .pdp-gallery {
position:static;
top:auto;
padding:1.1rem;
background:var(--gold);
}
.page-product .pdp-main { border:3px solid var(--ink); }
.page-product .pdp-thumbs button { border:2px solid var(--ink); }
.page-product .pdp-copy {
padding:clamp(1.5rem,3.5vw,3.5rem);
background:var(--indigo);
color:#fff;
border-left:3px solid var(--ink);
}
.page-product .pdp-unique {
display:inline-block;
color:var(--ink);
background:var(--gold);
border:2px solid var(--ink);
padding:.35rem .55rem;
transform:rotate(-2deg);
}
.page-product .pdp-title { color:#fff; font-size:clamp(3rem,5vw,5.4rem); line-height:.84; }
.page-product .lede,
.page-product .muted,
.page-product .pdp-meta p { color:rgba(255,255,255,.82)!important; }
.page-product .pdp-price .was { color:rgba(255,255,255,.6); }
.page-product .pdp-price .now.sale { color:var(--gold-soft); }
.page-product .assurances { border-block:1px solid rgba(255,255,255,.24); padding-block:1rem; }
.page-product .assurances li { color:rgba(255,255,255,.9); }
.page-product .assurances .ic { color:var(--gold-soft); }
.page-product .pdp-meta { border-top:0; }
.page-product .pdp-help {
background:var(--jade-deep);
color:#fff;
border:2px solid var(--ink);
border-left:9px solid var(--gold);
}
.page-product .pdp-help p { color:rgba(255,255,255,.82); }
/* About page becomes a scrapbook of the verified family journey. */
.page-about .about-hero {
border:var(--poster-border);
border-radius:0;
box-shadow:var(--hard-shadow);
transform:rotate(-.65deg);
}
.page-about .photo-caption {
display:inline-block;
background:var(--ink);
color:#fff;
padding:.45rem .65rem;
border:2px solid var(--ink);
transform:rotate(-.65deg);
}
.page-about .about-seal {
border:var(--poster-border);
box-shadow:var(--hard-shadow);
transform:rotate(-3deg);
background:var(--gold-soft);
}
.page-about .storycard {
border:var(--poster-border);
border-left:14px solid var(--jade);
border-radius:0;
box-shadow:var(--hard-shadow);
transform:rotate(.6deg);
}
.journey-line { border:var(--poster-border); background:var(--ink); gap:3px; box-shadow:none; }
.journey-step { background:var(--gold-soft); }
.journey-step:nth-child(2) { background:#E7ECF3; }
.journey-step:nth-child(3) { background:#F0DBD6; }
.page-about .pull { font-size:clamp(3rem,6vw,6rem); line-height:.88; }
.page-about .about-panel { border:var(--poster-border); box-shadow:var(--hard-shadow); }
.page-about .about-panel > div:first-child { padding:clamp(1.5rem,4vw,3.5rem); }
.page-about .about-panel .media { border-radius:0; box-shadow:none; border-left:3px solid var(--ink); }
.value {
border:var(--poster-border);
border-top-width:12px;
box-shadow:none;
}
.about-gallery > div { border:var(--poster-border); border-radius:0; box-shadow:none; }
/* Utility pages retain clarity with poster-like containers. */
.page-cart .cart-list,
.page-cart .summary,
.page-contact .info-card,
.page-contact .map {
border:var(--poster-border);
border-radius:0;
box-shadow:var(--hard-shadow);
background:var(--surface);
}
.page-cart .cart-list { padding:1.2rem; }
.page-cart .summary { background:var(--gold-soft); }
.page-contact .info-card { border-left:14px solid var(--red); }
.page-contact .map { border-left:10px solid var(--gold); }
.page-checkout .page-head,
.page-checkout-success .page-head,
.page-static .page-head { background:var(--gold-soft); }
.checkout-shell { max-width:920px; }
.checkout-card,
.static-page-card {
border:var(--poster-border);
border-left:14px solid var(--jade);
background:var(--surface);
box-shadow:var(--hard-shadow);
padding:clamp(1.3rem,3.5vw,2.8rem);
}
.checkout-card { min-height:180px; }
.checkout-notice { display:grid; gap:1rem; text-align:center; justify-items:center; border-left-color:var(--gold); }
.checkout-notice h2 { font-size:clamp(2rem,5vw,3.5rem); margin:0; }
.checkout-loading,
.checkout-error,
.cart-error { padding:3rem 1rem; text-align:center; }
.checkout-error,
.cart-error { color:var(--red); font-weight:800; }
.checkout-success-wrap { min-height:55vh; display:grid; place-items:center; }
.checkout-success { max-width:720px; margin:auto; text-align:center; display:grid; justify-items:center; gap:1rem; border-left-color:var(--red); }
.checkout-success h1 { margin:0; font-size:clamp(2.6rem,7vw,5rem); }
.checkout-success .lede { margin:0; }
.checkout-success-mark { display:grid; place-items:center; width:72px; height:72px; border:3px solid var(--ink); border-radius:50%; background:var(--gold); color:var(--ink); font-size:2.25rem; font-weight:900; transform:rotate(-5deg); }
/* ---------- The order page ---------- */
/* A receipt, not a banner: the thanks is the size of an announcement, then the
order itself is laid out to be read line by line and found again later. */
.page-order .order-shell { max-width: 820px; }
.order-head {
display: grid;
justify-items: center;
gap: .7rem;
text-align: center;
margin-bottom: clamp(1.4rem, 4vw, 2.2rem);
}
.order-head h1 { margin: 0; font-size: clamp(2.2rem, 6vw, 4rem); }
.order-ref {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: baseline;
gap: .5rem 1rem;
margin: 0;
}
.order-ref__number {
padding: .3rem .6rem;
background: var(--gold-soft);
border: 2px solid var(--ink);
font-weight: 800;
letter-spacing: .04em;
}
.order-ref__date { color: var(--ink-soft); font-weight: 700; font-size: .9rem; }
.order-body { display: grid; gap: clamp(1rem, 2.5vw, 1.4rem); }
.order-block {
border: var(--poster-border);
border-left: 14px solid var(--jade);
background: var(--surface);
box-shadow: var(--hard-shadow);
padding: clamp(1.1rem, 3vw, 1.8rem);
}
/* Each block is marked by what it is for: where the order has got to, what is
in it, and how it reaches them. */
.order-block--track { border-left-color: var(--red); }
.order-block--how { border-left-color: var(--gold); }
.order-block--cancelled { border-left-color: var(--ink-soft); }
.order-block__title {
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 .9rem;
}
.order-block__lead { margin: 0 0 .5rem; font-weight: 800; display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; }
.order-block__note { color: var(--ink-soft); font-size: .9rem; margin-top: .5rem; }
.order-block .link { display: inline-block; margin-top: .6rem; font-weight: 800; color: var(--red); }
.order-lines { list-style: none; margin: 0; padding: 0; }
.order-line {
display: grid;
grid-template-columns: 64px minmax(0, 1fr) auto;
align-items: center;
gap: .9rem;
padding: .8rem 0;
border-top: 2px solid var(--line);
}
.order-line:first-child { border-top: 0; padding-top: 0; }
/* An order where nothing has a photograph is two columns, not three, so the
lines start at the card's edge instead of behind an empty gutter. */
.order-lines--nomedia .order-line { grid-template-columns: minmax(0, 1fr) auto; }
.order-line__thumb {
width: 64px;
aspect-ratio: 1;
overflow: hidden;
background: var(--surface-alt);
border: 2px solid var(--ink);
}
/* One item of several without a photo: the column stays, the grey square goes. */
.order-line__thumb:empty { border: 0; background: none; }
.order-line__thumb img { width: 100%; height: 100%; object-fit: cover; }
.order-line__what { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.order-line__name { font-weight: 800; overflow-wrap: anywhere; }
.order-line__variant,
.order-line__each { color: var(--ink-soft); font-size: .88rem; }
.order-line__total { font-weight: 800; white-space: nowrap; }
.order-totals { margin-top: .9rem; border-top: 3px solid var(--ink); padding-top: .8rem; }
.order-total-row {
display: flex;
justify-content: space-between;
gap: 1rem;
padding: .22rem 0;
color: var(--ink-soft);
font-weight: 700;
}
.order-total-row--sum { color: var(--ink); font-size: 1.15rem; font-weight: 800; }
/* Where the order has got to. Three steps across on a wide screen, with the
line into each reached step drawn in — the line leads *into* a step, so it
fills exactly when that step is reached and never runs ahead of the order. */
.order-steps {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.order-step {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: .45rem;
}
.order-step::before {
content: "";
position: absolute;
top: 15px;
right: 50%;
width: 100%;
height: 3px;
background: var(--line);
}
.order-step:first-child::before { display: none; }
.order-step.is-done::before { background: var(--red); }
.order-step__mark {
position: relative;
z-index: 1;
display: grid;
place-items: center;
width: 32px;
height: 32px;
border: 3px solid var(--line);
border-radius: 50%;
background: var(--surface);
color: transparent;
font-size: .95rem;
font-weight: 900;
line-height: 1;
}
.order-step.is-done .order-step__mark { border-color: var(--red); background: var(--red); color: #fff; }
/* The step it is on now, rather than merely past. */
.order-step.is-current .order-step__mark { box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 22%, transparent); }
.order-step__body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.order-step__label { font-weight: 800; font-size: .9rem; color: var(--ink-soft); }
.order-step.is-done .order-step__label { color: var(--ink); }
.order-step__when { font-size: .76rem; color: var(--ink-soft); }
.order-tracking {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: .3rem .7rem;
margin: 1.1rem 0 0;
padding-top: .9rem;
border-top: 2px solid var(--line);
}
.order-tracking__label { color: var(--ink-soft); font-size: .82rem; font-weight: 700; }
.order-tracking__number { font-weight: 800; overflow-wrap: anywhere; }
.order-tracking .link { margin: 0; }
/* Stacked once three across stops fitting, with the line running down the
marks instead of between them. */
@media (max-width: 560px) {
.order-steps { grid-template-columns: minmax(0, 1fr); }
.order-step {
flex-direction: row;
align-items: flex-start;
text-align: left;
gap: .8rem;
padding-top: 1.1rem;
}
.order-step:first-child { padding-top: 0; }
.order-step::before {
top: 0;
right: auto;
left: 14px;
width: 3px;
height: 1.1rem;
}
}
.order-actions {
display: flex;
flex-wrap: wrap;
gap: .7rem;
justify-content: center;
margin-top: clamp(1.4rem, 4vw, 2.2rem);
}
@media (max-width: 520px) {
.order-line { grid-template-columns: 56px minmax(0, 1fr); }
.order-lines--nomedia .order-line { grid-template-columns: minmax(0, 1fr); }
.order-line__thumb { width: 56px; }
.order-line__total { grid-column: 2; }
}
.static-page-card { max-width:860px; border-left-color:var(--indigo); }
.static-page-card > :first-child { margin-top:0; }
.static-page-card h2,
.static-page-card h3 { font-family:var(--font-display); color:var(--ink); }
.static-page-card ul,
.static-page-card ol { padding-left:1.3rem; color:var(--ink-soft); }
/* The wording lives in 404.php so it can be translated — as CSS content it was
hardcoded Spanish and shipped that way to English visitors too. */
.page-404 .lost-shout {
margin:0;
font-size:clamp(2rem,8vw,6rem);
font-weight:900;
color:var(--gold);
transform:rotate(-4deg);
}
/* Footer ends like a storefront sign. */
.site-footer {
border-top:3px solid var(--ink);
overflow:hidden;
}
.site-footer::before {
content:"TÍPICOS JUANITA";
display:block;
width:100%;
margin:-1.5rem 0 2rem;
color:var(--gold);
font-family:var(--font-display);
font-size:clamp(3.4rem,9.5vw,9rem);
font-weight:800;
line-height:.8;
letter-spacing:-.055em;
white-space:nowrap;
text-align:center;
}
.foot-brand-lockup img { border:0; }
/* Footer subscribe. The form carried no rules at all, so the field rendered as
a raw browser control — squat, rounded, and noticeably shorter than the gold
button beside it: the one unstyled input on the site. */
.newsletter { display:flex; flex-wrap:wrap; gap:.5rem; }
.newsletter input {
flex:1 1 11rem;
min-width:0;
min-height:48px;
padding:.6rem .8rem;
font:inherit;
font-size:.92rem;
color:var(--ink);
background:var(--surface);
border:0;
border-radius:0;
}
.newsletter input::placeholder { color:var(--ink-soft); }
.newsletter input:focus-visible {
outline:none;
box-shadow:0 0 0 3px var(--gold);
}
.newsletter .btn { flex:0 0 auto; }
.newsletter-msg { margin:.6rem 0 0; font-size:.85rem; font-weight:700; }
.newsletter-msg--ok { color:var(--gold-soft); }
.newsletter-msg--error { color:#E9908A; }
@media (min-width: 1101px) {
.page-home .hero .wrap { max-width:none; }
.page-home .hero-inner {
max-width:none;
width:36%;
margin-left:64%;
}
.page-home .hero h1 {
max-width:none;
font-size:clamp(4rem, min(6.1vw, 10dvh), 6.4rem);
}
}
@media (max-width: 1100px) {
.page-home .hero-inner { width:41%; margin-left:59%; padding-left:2rem; }
.page-home .hero img.hero-bg { width:60%; }
.page-home .hero::before { left:55%; }
.page-home .hero h1 { font-size:clamp(3.8rem,7vw,5.8rem); }
}
@media (max-width: 900px) {
.founder-copy { margin-left:0; }
.founder-photo { clip-path:none; border-bottom:3px solid var(--ink); }
.page-product .pdp { grid-template-columns:1fr; }
.page-product .pdp-copy { border-left:0; border-top:3px solid var(--ink); }
}
@media (max-width: 720px) {
.site-header { border-bottom-width:2px; }
.brand img { box-shadow:none; }
.page-home .hero {
height:calc(100svh - var(--topbar-h) - var(--header-h));
min-height:0;
max-height:none;
display:grid;
grid-template-rows:48% 52%;
}
.page-home .hero img.hero-bg {
position:absolute;
width:100%;
height:48%;
inset:0 0 auto;
clip-path:none;
object-position:36% center;
border-bottom:3px solid var(--ink);
}
.page-home .hero::before {
top:calc(48% - 18px);
bottom:auto;
left:-5%;
width:110%;
height:25px;
transform:rotate(-2deg);
border:2px solid var(--ink);
}
.page-home .hero .wrap { grid-row:1 / 3; }
.page-home .hero-inner {
position:absolute;
left:var(--gutter);
right:var(--gutter);
bottom:0;
width:auto;
max-width:none;
height:52%;
margin:0;
padding:1.1rem 0 .9rem;
justify-content:center;
gap:.45rem;
}
.page-home .hero h1 {
font-size:clamp(2.35rem, min(12vw, 6.4svh), 3.4rem);
line-height:.84;
max-width:8ch;
}
.page-home .hero .lede { font-size:.88rem; line-height:1.35; margin:.1rem 0; }
.page-home .hero-actions { gap:.45rem; margin-top:.1rem; }
.page-home .hero .btn { min-height:40px; padding:.58rem .85rem; font-size:.72rem; }
.page-home .hero-caption {
top:calc(48% - 50px);
bottom:auto;
max-width:calc(100% - 2rem);
}
.page-home .sec-head h2 { font-size:clamp(3rem,14vw,4.8rem); }
.bridge h2 { font-size:clamp(3.4rem,15vw,5.5rem); }
.founder-story { box-shadow:none; }
.founder-photo { min-height:360px; }
.founder-copy h2 { font-size:clamp(2.8rem,13vw,4.2rem); }
.page-head { margin-top:1rem; box-shadow:none; }
/* 16vw put "Preguntas frecuentes" and "Colecciones" wider than the panel, and
.display's break-word then split them mid-word into orphans like
"PREGUNTA / S". Measured against the longest title the page-head carries
("Envíos y devoluciones"), the ceiling is ~10.9vw at 320px; 10.8vw clears
every route from 320px up and still grows with the screen. */
.page-head h1,
.page-head h1.display { font-size:clamp(2rem,10.8vw,5.2rem); }
.page-collection .grid--4 .card:nth-child(5n+2),
.page-search .grid--4 .card:nth-child(3n+2) { transform:none; }
.page-collections .coll-card:nth-child(odd),
.page-collections .coll-card:nth-child(even) { transform:none; }
/* The caption — a two-line heading, a description and 1rem of padding — came
to about 130px, which on a small tile covered the photograph entirely and
clipped its own first line. Scaled to the tiles it actually sits on. */
.coll-card .cap { padding:.7rem 1rem; }
.coll-card .cap h3 { font-size:1.25rem; }
.coll-card .cap p { font-size:.8rem; }
.page-product .pdp { box-shadow:none; }
.page-product .pdp-title { font-size:clamp(3rem,15vw,4.3rem); }
.page-about .about-hero,
.page-about .photo-caption,
.page-about .about-seal,
.page-about .storycard { transform:none; }
.site-footer::before { margin-top:-.5rem; white-space:normal; }
}
@media (max-width: 560px) {
/* Below this two 4:3 tiles across are only ~135px tall — less height than the
caption needs — so the collection tiles take a row each and the photograph
gets its space back. */
.page-collections .grid--2 { grid-template-columns:minmax(0,1fr); }
}
@media (max-width: 520px) {
.featured-grid .card:first-child .card-title { font-size:1.45rem; }
.card { box-shadow:none; }
.card-body { padding:.8rem; }
.page-head::after { width:125px;height:125px;right:-40px;top:-35px; }
}
@media (max-width: 720px) and (max-height: 700px) {
.page-home .hero { grid-template-rows:42% 58%; }
.page-home .hero img.hero-bg { height:42%; }
.page-home .hero::before { top:calc(42% - 14px); }
.page-home .hero-inner { height:58%; padding:.7rem 0 .5rem; gap:.35rem; }
.page-home .hero h1 { font-size:clamp(2rem, min(11vw, 6.5svh), 3rem); }
.page-home .hero .lede { font-size:.84rem; line-height:1.35; }
.page-home .hero .btn { min-height:40px; padding:.6rem .85rem; font-size:.72rem; }
.page-home .hero-caption { top:calc(42% - 48px); font-size:.62rem; }
}
/* ---------------------------------------------------------------------------
Limited-time offers
The section takes the homepage slot the collection cards normally hold, and
renders identically on the offer's own page. It leans on the same tokens as
everything else — the drop should read as part of the shop, not a landing
page bolted onto it.
--------------------------------------------------------------------------- */
/* The section keeps the image-derived surface supplied by the offer. The
stronger edge and woven rule connect it to the site's poster styling without
replacing the fresh colour that belongs to this particular drop. */
.offer-section {
position: relative;
--offer-edge: var(--ink);
--offer-panel: var(--surface);
background: var(--surface-alt);
border-bottom: 3px solid var(--ink);
}
.offer-section--accent {
--offer-edge: var(--offer-ink);
--offer-panel: var(--offer-surface);
background: var(--offer-bg);
color: var(--offer-ink);
}
/* The title carries the offer's own colour — the one drawn from her photo,
taken to a lightness that can be read against the section it is painted on;
helpers.php does the measuring. The ended heading sits on a card rather than
on the tint, so it stays the body ink. */
.offer-section--accent .offer-title { color: var(--offer-title, var(--offer-ink)); }
.offer-section--accent .offer-ended h3 { color: var(--offer-ink); }
.offer-section--accent .offer-desc,
.offer-section--accent .offer-note,
.offer-section--accent .event-details,
.offer-section--accent .offer-fulfill__legend { color: var(--offer-muted); }
.offer-section--accent .offer-card,
.offer-section--accent .offer-cart,
.offer-section--accent .offer-ended,
.offer-section--accent .event-where,
.offer-section--accent .event-map,
.offer-section--accent .offer-fulfill__option {
background: var(--offer-surface);
border-color: var(--offer-ink);
color: var(--offer-ink);
}
.offer-section--accent .event-when__time,
.offer-section--accent .event-when__where,
.offer-section--accent .event-map__address { color: var(--offer-muted); }
/* The seams inside the card follow the accent's ink too, or they stay black
across a repainted surface. */
.offer-section--accent .event-when + .event-map,
.offer-section--accent .event-map__canvas + .event-map__foot { border-top-color: var(--offer-ink); }
.offer-section--accent .offer-card__variant,
.offer-section--accent .offer-card__price .per,
.offer-section--accent .offer-qty__label,
.offer-section--accent .offer-cart__detail,
.offer-section--accent .offer-cart__fulfill-label,
.offer-section--accent .offer-cart__fulfill-note,
.offer-section--accent .offer-qty__unit { color: var(--offer-muted); }
.offer-section--accent .offer-cart__title,
.offer-section--accent .offer-cart__change,
.offer-section--accent .offer-cart__remove { color: var(--offer-ink); }
.offer-section--accent .offer-cart__foot,
.offer-section--accent .offer-card__in-order { border-color: var(--offer-ink); }
/* The chosen option, painted from the offer's own surface rather than the
shop's. The shop-wide rule mixes into --surface, which is cream whatever the
section is: on a dark accent that put cream text on a near-white pill and
the chosen method could not be read at all. */
.offer-section--accent .offer-fulfill__option:has(input:checked) {
background: color-mix(in srgb, var(--red) 12%, var(--offer-surface));
border-color: var(--red);
color: var(--offer-ink);
}
.offer-section--accent .offer-qty__input,
.offer-section--accent .offer-qty__step {
background: var(--offer-bg);
border-color: var(--offer-ink);
color: var(--offer-ink);
}
.offer-section--accent .offer-card__media,
.offer-section--accent .offer-note::before,
.offer-section--accent .offer-card__stock,
.offer-section--accent .offer-card__actions .btn { border-color: var(--offer-ink); }
.offer-section--accent .offer-more .link { color: var(--offer-ink); }
.offer-section--page { padding-top: clamp(1.5rem, 3vw, 2.5rem); }
/* Flags the drop as time-limited before the title is even read. */
.offer-kicker {
display: inline-flex;
align-items: center;
gap: .4rem;
background: var(--red);
color: #fff;
font-size: .68rem;
font-weight: 800;
letter-spacing: .09em;
text-transform: uppercase;
padding: .32rem .7rem;
border-radius: 999px;
margin: 0 0 .7rem;
}
.offer-kicker::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: #fff;
}
.offer-title { max-width: 11ch; color: var(--red); margin: 0; }
/* Media, heading, and order controls form one compact poster composition.
display:contents keeps the established PHP and source order intact while
allowing the two body groups to occupy their own grid areas. */
.offer-layout {
display: grid;
grid-template-columns: minmax(260px, 42%) minmax(0, 1fr);
grid-template-areas:
"media head"
"media foot";
grid-template-rows: auto 1fr;
column-gap: clamp(1.5rem, 4vw, 3.5rem);
align-items: start;
}
.offer-layout--nomedia {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "head" "foot";
}
/* The body wrapper is layout-only; its children become the grid items. */
.offer-layout__body { display: contents; }
.offer-layout__media {
grid-area: media;
width: 100%;
min-width: 0;
max-height: 600px;
aspect-ratio: 4 / 5;
}
.offer-body__foot {
grid-area: foot;
min-width: 0;
margin-top: clamp(1.4rem, 3vw, 2rem);
}
.offer-head { grid-area: head; max-width: 62ch; }
.offer-head .display {
font-size: clamp(2.8rem, 5vw, 4.8rem);
line-height: .88;
letter-spacing: -.045em;
margin: 0;
}
.offer-desc {
max-width: 43ch;
color: var(--ink-soft);
font-size: 1.02rem;
font-weight: 700;
line-height: 1.45;
margin: 1.1rem 0 0;
padding-left: .85rem;
border-left: 7px solid var(--gold);
}
/* Says "pickup only" or "can be mailed" in plain words. It replaced a badge,
but the fact is worth stating whatever it is wrapped in. */
.offer-note {
display: flex;
align-items: center;
gap: .55rem;
color: var(--ink-soft);
font-size: .9rem;
font-weight: 800;
margin: 1rem 0 0;
}
.offer-note::before {
content: "";
flex: 0 0 auto;
width: 21px;
height: 21px;
background: var(--gold-soft);
border: 2px solid var(--offer-edge);
}
/* Where, when, and how to reserve — a travel event's whole point. */
.event-details {
list-style: none;
display: flex;
flex-direction: column;
gap: .5rem;
color: var(--ink-soft);
font-size: .95rem;
font-weight: 700;
margin: 1.1rem 0 0;
padding: 0;
}
.event-details__row {
display: flex;
align-items: flex-start;
gap: .55rem;
}
.event-details__icon {
flex: 0 0 auto;
font-size: 1.05em;
line-height: 1.4;
}
/* The date indicator
------------------------------------------------------------------
Where and when is the whole content of one of these announcements, so the
date is sized to be read across a room rather than set as another line of
small grey text. The day number carries it; everything else is context
arranged around it. */
/* The date and the map are one answer to one question, so they are grouped
and spaced tightly against each other rather than floating as two
unrelated cards. Deliberately stacked rather than the date overlaid on the
map: the pin carries its own label, and at the widths this column actually
gets, a card in the corner lands on top of it. */
/* The date and the map are one answer to one question, so they are one card:
the date across the top, the map below it, the address and the link along
the bottom, divided by rules rather than separated by a gap.
`isolation` is load-bearing, not decoration. Leaflet lays its panes and
controls out between z-index 400 and 1000, and this card sets no position
of its own, so without a stacking context here those numbers compete at
the root — against a sticky header sitting at 40. The map won, and slid
over the nav on the way down the page. Isolating the card keeps all of
Leaflet's layering inside it, where it belongs. */
.event-where {
margin: 1.35rem 0 0;
isolation: isolate;
border: 2px solid var(--ink);
border-radius: 18px;
overflow: hidden;
background: #fff;
box-shadow: 4px 4px 0 rgba(0, 0, 0, .08);
}
.event-when {
display: flex;
align-items: center;
gap: 1rem;
margin: 0;
padding: .85rem 1rem;
}
.event-when__mark {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 4.25rem;
padding: .45rem .6rem;
border-radius: 12px;
background: var(--red);
color: #fff;
line-height: 1;
}
.event-when__day {
font-family: var(--font-display);
font-size: clamp(1.7rem, 1.2rem + 2vw, 2.4rem);
font-weight: 800;
letter-spacing: -.02em;
}
.event-when__month {
margin-top: .2rem;
font-size: .75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
}
.event-when__detail {
display: flex;
flex-direction: column;
gap: .15rem;
min-width: 0;
}
.event-when__weekday {
font-size: 1.05rem;
font-weight: 800;
}
/* Spanish writes weekdays lowercase and English capitalises them; as the
first line of a card either wants one capital, and only the first. */
.event-when__weekday::first-letter { text-transform: uppercase; }
.event-when__time { font-size: .95rem; font-weight: 700; color: var(--ink-soft); }
.event-when__where { font-size: .9rem; color: var(--ink-soft); }
/* The map
------------------------------------------------------------------
The canvas is hidden until Leaflet is actually running (app.js reveals
it), so a blocked CDN or a script error leaves the address and the Google
Maps link rather than an empty grey box. */
/* A section of the card above, not a card of its own — the rule is what
separates it from the date, and there is no seam between them. */
.event-map {
margin: 0;
background: #fff;
}
/* The rule belongs to the seam, not to the map: an event with no date to show
has nothing above the map to be divided from, and would otherwise wear a
stray line across the top of the card. */
.event-when + .event-map { border-top: 2px solid var(--ink); }
.event-map__canvas {
height: clamp(230px, 36vw, 340px);
width: 100%;
background: #E8E6E1;
}
.event-map__foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: .5rem .9rem;
padding: .7rem .95rem;
font-size: .9rem;
}
/* Only when there is a canvas above it to be divided from. */
.event-map__canvas + .event-map__foot { border-top: 2px solid var(--ink); }
.event-map__address { color: var(--ink-soft); min-width: 0; }
/* An external-link mark rather than a pin: the pin says "a place", which the
reader already knows, where what this actually does is leave the site. */
.event-map__open {
display: inline-flex;
align-items: center;
gap: .4rem;
min-height: 44px;
font-weight: 800;
text-decoration: underline;
white-space: nowrap;
}
.event-map__open svg {
flex: 0 0 auto;
width: 1em;
height: 1em;
}
/* The pin, drawn rather than fetched as an image: it has to sit on the
section's own accent colour, and a sprite would not. */
.event-pin {
position: relative;
display: block;
width: 26px;
height: 26px;
border-radius: 50% 50% 50% 0;
transform: rotate(-45deg);
background: var(--red);
border: 2px solid var(--ink);
box-shadow: 2px 2px 0 rgba(0, 0, 0, .2);
}
.event-pin::after {
content: "";
position: absolute;
inset: 7px;
border-radius: 50%;
background: #fff;
}
/* The label riding above the pin: the address, and nothing else. Kept open
rather than behind a tap: on a page about one appearance there is nothing
else it could be hiding, and a closed bubble is one more thing to find.
It used to stack the title, the date and a Maps link too — all of which the
page already prints around the map — and at five or six wrapped lines it
covered most of a canvas that is only 230px tall on a phone. An address runs
to one or two lines and needs a narrower box and a tighter cap than that. */
.event-map .event-pin-label {
background: #fff;
border: 2px solid var(--ink);
border-radius: 10px;
box-shadow: 2px 2px 0 rgba(0, 0, 0, .12);
padding: .28rem .5rem;
font-family: inherit;
font-size: .76rem;
line-height: 1.25;
font-weight: 700;
color: var(--ink);
white-space: normal;
/* Narrow enough to clear the canvas edges at 320px, where the map is about
288px wide and the bubble is centred over the pin. */
max-width: min(11rem, 60vw);
}
.event-map .event-pin-label::before { display: none; }
/* Long addresses wrap to a second line; past that the street is enough to
recognise the place, and the foot under the canvas carries it in full. */
.event-pin-label__address {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
/* Leaflet paints its own attribution and controls; these only pull them into
the site's type so they do not read as a pasted-in widget. */
.event-map .leaflet-container { font: inherit; background: #E8E6E1; }
.event-map .leaflet-control-attribution { font-size: .68rem; }
@media (max-width: 480px) {
.event-when { gap: .75rem; padding: .7rem .8rem; }
.event-when__mark { min-width: 3.6rem; }
}
/* Media. The video is the thing she actually made, so it gets real space —
capped so a portrait clip from a phone cannot run the page off the screen. */
.offer-carousel {
position: relative;
width: 100%;
height: 100%;
border: 3px solid var(--offer-edge);
border-radius: 0;
overflow: hidden;
background: #000;
margin: 0;
box-shadow: none;
}
/* Until the script runs the slides just stack, which is why the track is only
a flex row once it can actually be moved. */
.offer-carousel.is-carousel .offer-carousel__track {
display: flex;
height: 100%;
transition: transform .35s ease;
}
.offer-carousel.is-carousel .offer-slide { flex: 0 0 100%; min-width: 0; height: 100%; }
.offer-carousel.is-single .offer-carousel__track,
.offer-carousel.is-single .offer-slide,
.offer-carousel.is-single .offer-player,
.offer-carousel.is-carousel .offer-player { height: 100%; }
.offer-carousel__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
display: grid;
place-items: center;
font-size: 1.6rem;
line-height: 1;
color: #fff;
background: rgba(0, 0, 0, .45);
border: 0;
border-radius: 0;
cursor: pointer;
z-index: 2;
}
.offer-carousel__nav:hover { background: rgba(0, 0, 0, .68); }
.offer-carousel__nav--prev { left: .6rem; }
.offer-carousel__nav--next { right: .6rem; }
.offer-carousel__dots {
position: absolute;
left: 0;
right: 0;
bottom: .6rem;
display: flex;
justify-content: center;
gap: .4rem;
z-index: 2;
}
.offer-carousel__dot {
width: 9px;
height: 9px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .5);
cursor: pointer;
}
.offer-carousel__dot.is-active { background: #fff; }
/* These start hidden and are revealed by the script that gives them something
to do. Setting `display` on them above beats the UA rule behind the `hidden`
attribute — author styles always win over the UA sheet — so the attribute
has to be honoured explicitly or they show up with no script to drive them. */
.offer-carousel__nav[hidden],
.offer-carousel__dots[hidden],
.offer-player__bar[hidden] { display: none; }
/* Our own player. The native bar is removed by the script that reveals this. */
.offer-player { position: relative; }
.offer-player__bar {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
gap: .6rem;
padding: .6rem .8rem;
background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
}
.offer-player__btn {
flex: 0 0 auto;
width: 36px;
height: 36px;
display: grid;
place-items: center;
padding: 0;
color: #fff;
background: transparent;
border: 0;
border-radius: 0;
cursor: pointer;
}
.offer-player__btn:hover { background: rgba(255, 255, 255, .16); }
.offer-player__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.offer-player__icon { width: 22px; height: 22px; fill: currentColor; }
/* The `hidden` attribute does nothing to an SVG: the UA rule implementing it
is scoped to the HTML namespace, so