/*
  Store.

  Native commerce only: pieces available now, and products made to order. Two grounds, two
  presentations, one category bar. There is no Academy surface and no archive here.
*/

/* ---- Opener --------------------------------------------------------------- */
.store-hero {
    padding-block: var(--space-2xl);
}

/* The reset zeroes every margin, so the opener is a grid with an explicit gap — margin collapsing
   would let the intro ride up into the headline's descenders. */
.store-hero__inner {
    display: grid;
    gap: var(--space-md);
    justify-items: start;
}

.store-hero__title {
    font-size: var(--text-3xl);
    letter-spacing: var(--tracking-display);
    color: var(--color-on-deep-strong);
    margin: 0;
}

.store-hero__intro {
    color: var(--color-on-deep);
    max-inline-size: var(--measure);
    margin: 0;
}

/* ---- Category navigation ---------------------------------------------------
   The bar spans the viewport (it is sticky and needs a full-width ground), but its CONTENT sits in
   the same centred container as the store headings and the product grid. That is what stops the
   first item sitting against the left edge. */
.store-nav {
    position: sticky;
    top: var(--header-height);
    z-index: calc(var(--z-header) - 1);
    background: color-mix(in srgb, var(--color-bg) 94%, transparent);
    backdrop-filter: blur(8px);
    border-block-end: 1px solid var(--color-border);
}

.store-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    padding-block: var(--space-sm);
}

/* `ul[class] { padding: 0 }` in the reset beats any inherited padding, so the list restates its own.
   The negative inline margin + matching padding lets an overflowing list scroll edge-to-edge while
   the FIRST and LAST items still clear the container gutter — no clipped item, ever. */
.store-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    list-style: none;
    margin: 0;
    margin-inline: calc(var(--container-pad) * -1);
    padding: 0;
    padding-inline: var(--container-pad);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: inline proximity;
}

.store-nav__list::-webkit-scrollbar { display: none; }

.store-nav__item { flex: none; scroll-snap-align: start; }

/* A pill rather than an underline: it gives the active state real presence at small sizes and keeps
   a comfortable touch target without inflating the bar. */
.store-nav__link {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.5rem;
    padding-inline: var(--space-md);
    border-radius: var(--radius-pill);
    white-space: nowrap;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-ink-muted);
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.store-nav__link:hover {
    color: var(--color-ink-strong);
    background: var(--color-surface-muted);
}

.store-nav__link.is-current {
    background: var(--cg-black);
    color: var(--cg-white);
}

/* The red maker's dot marks the active category — the brand's accent, not a generic highlight. */
.store-nav__link.is-current::before {
    content: "";
    inline-size: 0.4rem;
    block-size: 0.4rem;
    margin-inline-end: var(--space-2xs);
    border-radius: var(--radius-pill);
    background: var(--cg-red-on-dark);
}

.store-nav__currency { flex: none; }

.store-nav__currency .currency-selector {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin: 0;
}

.store-nav__currency .currency-selector__label {
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-ink-muted);
}

/* Below the breakpoint the currency control moves out of the scrolling row so the two never fight
   for the same horizontal space. */
@media (max-width: 47.9375rem) {
    .store-nav__inner {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    /* Categories first (they are the navigation), currency tucked under them on the trailing edge. */
    .store-nav__list { order: 1; flex: 1 1 100%; }
    .store-nav__currency { order: 2; margin-inline-start: auto; }
    .store-nav__currency .currency-selector__label { display: none; }
}

/* Anchor targets must clear the sticky header AND the sticky category bar. */
.store-section {
    scroll-margin-block-start: calc(var(--header-height) + 3.75rem);
}

/* ---- Grids -----------------------------------------------------------------
   The store uses the shared shelf from product-card.css and adds nothing.

   It used to redefine its own `auto-fill` tracks with a 4rem desktop gutter, which is what made the
   three categories read as three unrelated layouts: courses in one geometry, moulds in another, mugs
   in a third, each with products drifting apart as the row emptied. Canecas, Moldes and Cursos are one
   shop, so they are one grid — and the only way to keep that true is for this file to stop having an
   opinion about it. */

/* ---- The empty shelf -------------------------------------------------------
   A NOTE, NOT A PRODUCT.

   What used to stand here was a two-column editorial panel: a large heading, a body line, a buy-style
   link and a photograph at roughly product-card size. The owner filled its CMS fields with "Nome do
   personagem", "Valor" and "Botão de compre agora" to show exactly how it read — as one product laid
   out in a private geometry, beside two other groups that use the shared card grid. It is gone.

   Canecas has no layout of its own. When a mug is published it appears in the same `.product-grid`
   as the moulds and the courses, at the same width, with the same image area and the same call to
   action. When none is published the section says so in one sentence and offers the way to hear
   about the next one. No grid is faked, no stock is invented, and nothing here can be mistaken for
   something that is for sale. */
.store-empty {
    display: grid;
    gap: var(--space-sm);
    justify-items: start;
    padding-block-start: var(--space-md);
    border-block-start: 1px solid var(--color-border);
    max-inline-size: var(--measure);
}

.store-empty__text {
    color: var(--color-ink-muted);
    margin: 0;
}

/* A section-level aside, not a card: the made-to-order shelf uses it to explain why a mould may be
   showing the pending-photograph plate. It sits under the grid and must not compete with it. */
.store-section__note {
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
    max-inline-size: var(--measure);
    margin-block-start: var(--space-lg);
    margin-inline: 0;
    margin-block-end: 0;
}

/* =========================================================================
   REDESIGN LAYER — the shop as a kiln room
   The opening sits on the kiln floor (atelier-ui.css), the category bar is glass with a heat line
   under the current pill, and each shelf carries its number large and hollow at the edge, the way
   the Tha3D bands carry their layer. Nothing here changes the shared shelf geometry.
   ========================================================================= */
.store-hero {
    padding-block: clamp(4rem, 2.5rem + 6vw, 8rem) clamp(3.5rem, 2rem + 5vw, 6.5rem);
    overflow: hidden;
}

.store-hero__title {
    font-size: clamp(2.3rem, 1.2rem + 3.9vw, 4.4rem);
    font-stretch: 112%;
    font-weight: 900;
    line-height: 0.96;
    letter-spacing: -0.04em;
    max-inline-size: 22ch;
}

.store-hero__intro { font-size: var(--text-lg); line-height: var(--leading-normal); max-inline-size: 52ch; }

@media (prefers-reduced-motion: no-preference) {
    .store-hero__inner > * { animation: cg-hero-rise 1000ms var(--ease-entrance) both; }
    .store-hero__inner > :nth-child(2) { animation-delay: 90ms; }
    .store-hero__inner > :nth-child(3) { animation-delay: 220ms; }
}

@keyframes cg-hero-rise {
    from { opacity: 0; transform: translateY(28px); clip-path: inset(0 0 100% 0); }
    to { opacity: 1; transform: none; clip-path: inset(-0.3em -0.3em -0.3em -0.3em); }
}

.store-nav {
    background: var(--glass-paper);
    backdrop-filter: saturate(1.3) blur(14px);
    -webkit-backdrop-filter: saturate(1.3) blur(14px);
}

.store-nav__link { font-stretch: var(--stretch-label); font-weight: var(--weight-bold); position: relative; }

.store-nav__link.is-current { box-shadow: 0 10px 24px -14px rgb(16 14 14 / 0.6); }

.store-nav__link.is-current::after {
    content: "";
    position: absolute;
    inset-inline: 1rem;
    inset-block-end: 6px;
    block-size: 2px;
    border-radius: 2px;
    background: var(--heat-gradient);
    opacity: 0.9;
}

/* Each shelf's number, large and hollow, at the right of its heading. */
.store { counter-reset: shelf; }
.store-section { counter-increment: shelf; }
.store-section .section__head { position: relative; }

.store-section .section__head::after {
    content: counter(shelf, decimal-leading-zero);
    position: absolute;
    inset-block-start: -0.35em;
    inset-inline-end: 0;
    font-family: var(--font-display);
    font-size: clamp(4rem, 2rem + 8vw, 9rem);
    font-weight: 900;
    font-stretch: 125%;
    line-height: 1;
    letter-spacing: -0.06em;
    color: transparent;
    -webkit-text-stroke: 1.5px color-mix(in srgb, var(--color-ink) 16%, transparent);
    pointer-events: none;
    user-select: none;
}

@media (max-width: 47.99rem) {
    .store-section .section__head::after { font-size: 4.2rem; inset-block-start: -0.2em; }
}

.store-empty {
    padding: var(--space-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--color-surface) 60%, transparent);
}

/* Store bands (owner, 02/10/2026): no big outlined "01/02/03" in the corner, and the intro text
   runs the full width of the shelf below it instead of a narrow column pushed to one side. */
.store-section .section__head::after { content: none; }
.store-section .section__head > div { justify-items: stretch; }
.inner-heads .store-section .section__head .lead,
.store-section .section__head .lead { max-inline-size: none; max-width: none; }
/* A text with several paragraphs is rendered as <div class="lead"><p>…</p><p>…</p></div>, and every
   <p> carries the site-wide reading measure — which is what kept it squeezed on the left. Here the
   paragraphs run to the right edge; the owner breaks lines herself with Enter. */
.store-section .section__head .lead p { max-width: none; max-inline-size: none; }