/* ==========================================================================
   Atelier — editorial fashion
   --------------------------------------------------------------------------
   A lookbook, not a catalogue. The masthead is the loudest thing on the page
   and everything else steps back: no card borders, no hover buttons, portrait
   images in a wide-gutter grid, prices set small underneath in the body face.
   Nothing is added to the basket from a grid — a piece is opened first, which
   is how this kind of shop is browsed.

   Colours and fonts come from the CSS custom properties the layout emits from
   the store's theme settings; this file only composes them.
   ========================================================================== */

.theme-atelier {
    --gutter: 26px;
    --header-h: 76px;
}

.theme-atelier h1,
.theme-atelier h2 {
    font-weight: 400;
    letter-spacing: -0.015em;
    line-height: 1.08;
}

/* --------------------------------------------------------------- header */
.theme-atelier .site-header {
    border-block-end: 0;
    background: transparent;
}
/* Tracked capitals eat width fast, and a long shop name was being clipped
   mid-word. Scale the size with the viewport and let it wrap rather than
   truncate — a masthead that says "NABA WOMEN'S WOR…" is worse than two
   lines. */
.theme-atelier .brand {
    font-size: clamp(.95rem, .72rem + .7vw, 1.4rem);
    font-weight: 400;
    letter-spacing: .16em;
    text-transform: uppercase;
    white-space: normal;
    line-height: 1.15;
}
.theme-atelier .nav__link {
    font-size: .74rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--color-muted);
}
.theme-atelier .nav__link:hover { color: var(--color-text); }
.theme-atelier .announce {
    font-size: .7rem;
    letter-spacing: .2em;
    text-transform: uppercase;
}

/* ----------------------------------------------------------------- hero */
.theme-atelier .hero { padding-block: 0; }
.theme-atelier .hero__inner { gap: 0; }
.theme-atelier .hero__media { aspect-ratio: 16 / 9; }
.theme-atelier .hero__copy h1 {
    font-size: clamp(2.6rem, 1.4rem + 5.2vw, 5.5rem);
}
.theme-atelier .hero__sub {
    font-size: .95rem;
    max-width: 46ch;
    color: var(--color-muted);
}
.theme-atelier .hero__actions .btn {
    background: transparent;
    color: var(--color-text);
    border: 0;
    border-block-end: 1px solid currentColor;
    border-radius: 0;
    padding-inline: 0;
    padding-block: 4px;
    font-size: .78rem;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.theme-atelier .hero__actions .btn:hover { filter: none; color: var(--color-accent); }

/* -------------------------------------------------------------- sections */
.theme-atelier .section { padding-block: clamp(52px, 7vw, 96px); }
.theme-atelier .section__head {
    display: block;
    text-align: center;
    margin-block-end: 34px;
}
.theme-atelier .section__head h2 {
    font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem);
}
.theme-atelier .section__head > span:first-child {
    display: block;
    margin-block-end: 8px;
    font-family: var(--font-body);
    font-size: .68rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--color-muted);
}

/* ----------------------------------------------------------------- cards */
.theme-atelier .grid { gap: 26px 22px; }
.theme-atelier .product-card {
    border: 0;
    background: transparent;
    border-radius: 0;
}
.theme-atelier .product-card__media { border-radius: 0; background: var(--color-surface); }
.theme-atelier .product-card__body { padding: 14px 2px 0; text-align: center; }
.theme-atelier .product-card__title {
    font-family: var(--font-body);
    font-size: .82rem;
    font-weight: 400;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.theme-atelier .product-card__price {
    justify-content: center;
    font-size: .85rem;
    color: var(--color-muted);
}
/* A grid is for looking. Adding happens on the piece itself. */
.theme-atelier .product-card__actions { display: none; }
.theme-atelier .badges { inset-inline-start: 10px; inset-block-start: 10px; }
.theme-atelier .badge {
    background: transparent;
    color: var(--color-text);
    border-block-end: 1px solid currentColor;
    border-radius: 0;
    padding: 0 0 2px;
    font-size: .62rem;
    letter-spacing: .16em;
}
.theme-atelier .badge--sale { color: var(--color-accent); }

/* --------------------------------------------------------------- product */
.theme-atelier .product__layout { gap: 60px; }
.theme-atelier .product__info h1 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); }
.theme-atelier .product__price-now { font-family: var(--font-body); font-size: 1.05rem; font-weight: 400; }
.theme-atelier .product__stage { border-radius: 0; }
.theme-atelier .product__thumb { border-radius: 0; }
.theme-atelier .opt {
    border-radius: 0;
    font-size: .74rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.theme-atelier .product__add {
    border-radius: 0;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-size: .82rem;
}

/* ---------------------------------------------------------------- footer */
.theme-atelier .site-footer { background: var(--color-bg); border-block-start: 1px solid var(--color-border); }
.theme-atelier .footer-col h3 {
    font-family: var(--font-body);
    font-size: .68rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--color-muted);
}