/* === _base.css — Shared tema structural styles. Each tema imports this then overrides tokens. === */

body { background: var(--color-bg); color: var(--color-fg); font-family: var(--font-body); }
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.02em; }

/* Announcement bar */
.t-announce { background: var(--color-fg); color: var(--color-bg); text-align: center; padding: var(--space-2) var(--space-4); font-size: var(--fs-xs); letter-spacing: 0.04em; }

/* Header */
.t-header { background: var(--color-bg); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 50; backdrop-filter: blur(8px); background-color: color-mix(in srgb, var(--color-bg) 90%, transparent); }
.t-header__inner { display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-4); gap: var(--space-6); }
.t-header__brand { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 600; letter-spacing: -0.02em; text-decoration: none; color: var(--color-fg); }
.t-header__nav { display: none; gap: var(--space-5); }
.t-header__nav a { color: var(--color-fg); text-decoration: none; font-size: var(--fs-sm); }
.t-header__nav a:hover { color: var(--color-brand); }
.t-header__icons { display: flex; gap: var(--space-1); align-items: center; }
.t-header__icons button { padding: var(--space-2); border-radius: var(--radius-full); color: var(--color-fg); }
.t-header__icons button:hover { background: color-mix(in srgb, var(--color-fg) 6%, transparent); }
.cart-badge { background: var(--color-brand); color: white; font-size: 0.65rem; padding: 1px 6px; border-radius: 999px; margin-left: -10px; vertical-align: super; }
@media (min-width: 900px) { .t-header__nav { display: flex; } }
.header--logo-center .t-header__inner { justify-content: center; position: relative; }
.header--logo-center .t-header__nav { position: absolute; left: var(--space-4); }
.header--logo-center .t-header__icons { position: absolute; right: var(--space-4); }

/* Hero split */
.t-hero { padding-block: var(--space-12) var(--space-16); position: relative; overflow: hidden; }
.t-hero__grid { display: grid; gap: var(--space-10); align-items: center; }
@media (min-width: 900px) { .t-hero__grid { grid-template-columns: 1fr 1fr; } }
.t-hero__title { font-size: var(--fs-6xl); font-weight: 500; line-height: 0.96; letter-spacing: -0.04em; max-width: 14ch; }
.t-hero__title em { font-style: italic; color: var(--color-brand); }
.t-hero__sub { color: var(--color-fg-muted); margin-block: var(--space-5) var(--space-6); max-width: 50ch; font-size: var(--fs-lg); }
.t-hero__ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.t-hero__visual { position: relative; aspect-ratio: 5/6; border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0,0,0,0.25); }
.t-hero__visual img { width: 100%; height: 100%; object-fit: cover; }
.t-hero__tag { position: absolute; top: var(--space-4); left: var(--space-4); background: var(--color-bg); color: var(--color-fg); padding: var(--space-2) var(--space-3); font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.08em; }

/* Hero — full bleed variant */
.t-hero--full { padding: 0; aspect-ratio: 16/9; min-height: 540px; }
.t-hero--full .t-hero__bg { position: absolute; inset: 0; }
.t-hero--full .t-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.t-hero--full .t-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.45)); }
.t-hero--full .container { position: relative; z-index: 1; padding-top: var(--space-20); color: white; }
.t-hero--full .t-hero__title { color: white; max-width: 18ch; }
.t-hero--full .t-hero__sub { color: rgba(255,255,255,0.85); }

/* Section header */
.t-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); margin-bottom: var(--space-10); flex-wrap: wrap; }
.t-section-head h2 { font-size: var(--fs-4xl); max-width: 22ch; }

/* Sector / category tiles */
.t-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
@media (max-width: 800px) { .t-tiles { grid-template-columns: repeat(2, 1fr); } }
.t-tile { position: relative; aspect-ratio: 3/4; overflow: hidden; border-radius: var(--radius-md); text-decoration: none; color: white; display: block; }
.t-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.t-tile:hover img { transform: scale(1.06); }
.t-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.6)); }
.t-tile__label { position: absolute; bottom: var(--space-4); left: var(--space-4); right: var(--space-4); z-index: 1; }
.t-tile__label h3 { font-size: var(--fs-xl); margin-bottom: var(--space-1); }
.t-tile__label span { font-size: var(--fs-sm); opacity: 0.85; }

/* Product grid */
.t-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-6); }
.t-product { display: flex; flex-direction: column; gap: var(--space-2); text-decoration: none; color: inherit; }
.t-product__media { aspect-ratio: var(--card-ratio, 1/1); background: color-mix(in srgb, var(--color-fg) 4%, transparent); border-radius: var(--radius-md); overflow: hidden; position: relative; }
.t-product__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow); }
.t-product:hover .t-product__media img { transform: scale(1.04); }
.t-product__badge { position: absolute; top: var(--space-3); left: var(--space-3); }
.t-product__name { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-base); margin-top: var(--space-2); }
.t-product__price { color: var(--color-brand); font-weight: 600; font-variant-numeric: tabular-nums; }
.t-product__rating { font-size: var(--fs-xs); color: var(--color-fg-muted); }

/* Editorial story */
.t-story { display: grid; gap: var(--space-10); align-items: center; }
@media (min-width: 900px) { .t-story { grid-template-columns: 1fr 1fr; } .t-story--reverse { direction: rtl; } .t-story--reverse > * { direction: ltr; } }
.t-story__media { aspect-ratio: 4/5; overflow: hidden; border-radius: var(--radius-md); }
.t-story__media img { width: 100%; height: 100%; object-fit: cover; }
.t-story h2 { font-size: var(--fs-4xl); max-width: 16ch; }
.t-story p { color: var(--color-fg-muted); margin-top: var(--space-4); max-width: 50ch; }
.t-story a { color: var(--color-brand); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }

/* Trust strip */
.t-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); padding-block: var(--space-10); border-block: 1px solid var(--color-border); }
@media (max-width: 720px) { .t-trust { grid-template-columns: repeat(2, 1fr); } }
.t-trust > div { display: flex; flex-direction: column; gap: var(--space-2); }
.t-trust h4 { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; }
.t-trust p { color: var(--color-fg-muted); font-size: var(--fs-sm); }

/* Testimonials */
.t-testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
@media (max-width: 900px) { .t-testimonials { grid-template-columns: 1fr; } }
.t-quote { background: var(--color-bg-elevated); padding: var(--space-6); border-radius: var(--radius-md); border: 1px solid var(--color-border); }
.t-quote p { font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.5; font-style: italic; }
.t-quote footer { margin-top: var(--space-4); font-size: var(--fs-sm); color: var(--color-fg-muted); }
.t-quote__rating { color: var(--color-warning); margin-bottom: var(--space-2); font-size: var(--fs-sm); letter-spacing: 0.1em; }

/* Newsletter */
.t-newsletter { background: var(--color-fg); color: var(--color-bg); padding: var(--space-12) var(--space-6); border-radius: var(--radius-md); text-align: center; }
.t-newsletter h2 { color: var(--color-bg); font-size: var(--fs-3xl); max-width: 22ch; margin-inline: auto; }
.t-newsletter p { color: color-mix(in srgb, var(--color-bg) 70%, transparent); margin-top: var(--space-3); max-width: 50ch; margin-inline: auto; }
.t-newsletter form { display: flex; gap: var(--space-2); max-width: 460px; margin: var(--space-6) auto 0; }
.t-newsletter input { flex: 1; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); color: var(--color-bg); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); }
.t-newsletter button { background: var(--color-brand); color: white; padding: var(--space-3) var(--space-5); border-radius: var(--radius-md); font-weight: 600; }

/* USP strip */
.t-usp { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); padding-block: var(--space-8); border-block: 1px solid var(--color-border); }
@media (max-width: 720px) { .t-usp { grid-template-columns: repeat(2, 1fr); } }
.t-usp > div { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-sm); }
.t-usp svg { color: var(--color-brand); flex-shrink: 0; }

/* Footer */
.t-footer { padding-block: var(--space-12); background: var(--color-bg-elevated); border-top: 1px solid var(--color-border); }
.t-footer__cols { display: grid; grid-template-columns: repeat(var(--footer-cols, 4), 1fr); gap: var(--space-6); }
@media (max-width: 720px) { .t-footer__cols { grid-template-columns: 1fr 1fr; } }
.t-footer h4 { font-family: var(--font-body); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--space-3); }
.t-footer ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.t-footer a { color: var(--color-fg-muted); text-decoration: none; font-size: var(--fs-sm); }
.t-footer a:hover { color: var(--color-fg); }
.t-footer__bottom { margin-top: var(--space-8); padding-top: var(--space-4); border-top: 1px solid var(--color-border); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); font-size: var(--fs-xs); color: var(--color-fg-muted); }
.t-footer__payment { display: flex; gap: var(--space-2); align-items: center; }
.t-footer__payment span { display: inline-block; padding: 2px 6px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 0.7rem; }

/* Bento grid */
.t-bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(180px, auto); gap: var(--space-4); }
@media (max-width: 800px) { .t-bento { grid-template-columns: 1fr; } }
.t-bento__tile { background: var(--color-bg-elevated); border-radius: var(--radius-md); padding: var(--space-5); border: 1px solid var(--color-border); display: flex; flex-direction: column; gap: var(--space-2); transition: transform var(--dur-base), box-shadow var(--dur-base); }
.t-bento__tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.t-bento__tile--lg { grid-column: span 2; grid-row: span 2; }
.t-bento__tile h3 { font-family: var(--font-body); font-size: var(--fs-lg); font-weight: 600; }
.t-bento__tile p { color: var(--color-fg-muted); font-size: var(--fs-sm); }
@media (max-width: 800px) { .t-bento__tile--lg { grid-column: span 1; grid-row: auto; } }

/* Lookbook masonry */
.t-lookbook { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: var(--space-3); }
.t-lookbook a { overflow: hidden; border-radius: var(--radius-md); display: block; }
.t-lookbook a:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.t-lookbook a:nth-child(4) { grid-column: span 2; }
.t-lookbook img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow); }
.t-lookbook a:hover img { transform: scale(1.04); }
@media (max-width: 720px) { .t-lookbook { grid-template-columns: 1fr 1fr; } .t-lookbook a:nth-child(1) { grid-column: span 2; } }

/* Press / brand strip */
.t-press { padding-block: var(--space-8); border-block: 1px solid var(--color-border); }
.t-press__title { text-align: center; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-fg-muted); margin-bottom: var(--space-5); }
.t-press__row { display: flex; gap: var(--space-12); justify-content: space-around; align-items: center; flex-wrap: wrap; }
.t-press__row span { font-family: var(--font-display); font-size: var(--fs-lg); opacity: 0.55; transition: opacity var(--dur-base); }
.t-press__row span:hover { opacity: 1; }

/* Instagram strip */
.t-instagram { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-2); }
@media (max-width: 720px) { .t-instagram { grid-template-columns: repeat(3, 1fr); } }
.t-instagram a { aspect-ratio: 1/1; overflow: hidden; display: block; }
.t-instagram img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-base); }
.t-instagram a:hover img { transform: scale(1.05); }

/* Edit indicator */
.hide-rating .t-product__rating { display: none; }
.btn-uppercase .btn { text-transform: uppercase; letter-spacing: 0.05em; }