/* Yeni bir mağazanın ilk günü nasıl görünür.
   Bu dosya da temanın parçası: veritabanında durur, sürümlenir ve
   /_theme/<surum>/asset/assets/style.css adresinden servis edilir. */

:root {
    /* ⚠ **The store's roles, with this sheet's old names kept** (ADAY-B #6):
       every rule below still reads `--accent`, `--ink`, `--paper` and `--muted`,
       and each of them is now the store's own colour. The hex after the comma
       is what an unframed page with no tokens falls back to.

       ⚠ **And no dark variant any more**: a `prefers-color-scheme` block wrote
       its own three colours over the store's palette, so a merchant's choice
       was invisible to every visitor in dark mode. The packaged designs have
       none either. */
    --accent: var(--color-accent, #3b82f6);
    --ink: var(--color-text, #16181d);
    --paper: var(--color-bg, #ffffff);
    --muted: var(--color-muted, #6b7280);
    /* A hairline in the store's own text colour, not a black nobody chose. */
    --line: color-mix(in srgb, var(--ink) 12%, transparent);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font: 16px/1.65 ui-sans-serif, system-ui, "Segoe UI", sans-serif;
    color: var(--ink);
    background: var(--paper);
}

.preview-bar {
    margin: 0;
    padding: 10px 20px;
    text-align: center;
    font-size: 13px;
    /* The packaged designs' colours for the same strip: it is the store's
       own accent, not a yellow nobody chose. */
    background: var(--accent);
    color: var(--color-accent-contrast, #ffffff);
}

.site-header {
    padding: 56px 24px 8px;
    text-align: center;
}

.brand {
    font-size: 30px;
    font-weight: 650;
    letter-spacing: -.02em;
    color: inherit;
    text-decoration: none;
}

.tagline {
    margin: 6px 0 0;
    color: var(--muted);
}

.site-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 16px;
}

/* The top bar's box and Catalog's search page share one look: the field, then
   the button, on one line until the line runs out. */
.site-search,
.search-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.search-form { margin: 0 0 24px; max-width: 640px; }
.search-form__label { flex: 1 0 100%; color: var(--muted); }

.site-search input,
.search-form input {
    flex: 1 1 12em;
    min-height: 44px;
    padding: 8px 12px;
    font: inherit;
    color: inherit;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 8px;
}

/* Only the two search boxes: `.button` elsewhere is drawn by pages this
   slice does not touch. */
.site-search .button,
.search-form .button {
    padding: 8px 16px;
    font: inherit;
    font-weight: 600;
    color: var(--color-accent-contrast, #ffffff);
    background: var(--accent);
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}

/* Read by a screen reader, drawn for nobody: the top bar's field says what it
   is in its placeholder. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.site-main {
    width: min(880px, 92vw);
    margin: 0 auto;
    padding: 40px 0 64px;
}

.hero h1 {
    margin: 0 0 12px;
    font-size: clamp(28px, 5vw, 42px);
    line-height: 1.15;
    letter-spacing: -.03em;
}

.hero p { margin: 0 0 8px; color: var(--muted); }

.cards {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-top: 40px;
}

/* Scoped to the two grids this theme actually draws cards in (B78, ADR-0237).

   `.card` is a name the platform's own `feature_grid` and `testimonials`
   sections chose independently, and a bare `.card h2` here is (0,1,1) against
   the platform's `.h4` at (0,1,0) -- so these three rules were painting sections
   this theme never meant to style, in this file's own hand-written `--accent`
   and `--muted` rather than in the store's palette. Nothing under
   `resources/sections/` emits `.cards` or `.grid--3`, so naming them is what
   hands those sections back to the merchant's tokens.

   The two ancestors are what this theme's own templates put above a card:
   `.cards` on `home.twig` and `collection.twig`, `.grid--3` on `search.twig`.
   The price is that a merchant who writes a card of their own outside both
   grids gets no frame -- which is the cost B78 weighed and accepted. */
.cards .card,
.grid--3 .card {
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: 14px;
}

.cards .card h2,
.grid--3 .card h2 {
    margin: 0 0 6px;
    font-size: 15px;
    color: var(--accent);
}

.cards .card p,
.grid--3 .card p { margin: 0; font-size: 14px; color: var(--muted); }

.site-footer {
    padding: 24px;
    border-top: 1px solid var(--line);
    text-align: center;
    font-size: 13px;
    color: var(--muted);
}

.site-footer p { margin: 2px 0; }

/* `<picture>` is inline by default, which leaves a text baseline gap under every
   image and makes the element ignore the block layout its `<img>` is sitting in.
   Every picture on this storefront is wrapped in one now (F7D K4), so the wrapper
   has to behave like the image it wraps. */
/* And the image itself, for the same reason it is in Atlas: a picture wider
   than the screen makes the whole page scroll sideways, and a phone is where
   that happens. */
img { max-width: 100%; height: auto; }
/* A picture linked from another site (I-943): the box keeps its size and shows this tint if that site fails to answer. */
img[data-external] { background: rgba(127, 127, 127, .12); }
img[data-unsized] { aspect-ratio: 1 / 1; width: 100%; height: auto; object-fit: contain; }
img[data-broken] { color: transparent; }
picture { display: block; }
picture > img { max-width: 100%; height: auto; display: block; }

/* The keyboard's first stop, and invisible until it is reached. Off screen
   rather than `display: none`: a hidden element is not focusable at all, which
   would make this a link nobody can reach (F7D K8). */
.skip-link {
    position: absolute;
    left: 8px;
    top: 8px;
    z-index: 100;
    padding: .6em 1.2em;
    border-radius: var(--radius, 4px);
    background: var(--color-accent, #2563eb);
    color: var(--color-accent-contrast, #fff);
    text-decoration: none;
    transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }

/* Roughly a fingertip, on the things a finger actually aims at. Not on every
   link: a word inside a paragraph is not a target, and padding it to 44 pixels
   would tear the paragraph apart (WCAG 2.2, K8). */
.button, .top__nav a, .brand, .site-header a {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Not a preference about taste. Everything this stylesheet animates is switched
   off for a reader who asked. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Where the keyboard is. `:focus-visible` rather than `:focus` so a mouse click
   leaves no ring behind -- rings on every click are rings people learn to
   ignore. Drawn with an offset so it is never the same colour as what it
   surrounds (WCAG 1.4.11 asks 3:1). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--color-accent, #2563eb);
    outline-offset: 2px;
    border-radius: 2px;
}

/* What a reduced price looks like (F7E J4).

   Three parts, and none of them is a colour typed by hand: the badge takes the
   store's accent and the contrast colour that was measured against it (F7D K7),
   so a merchant who changes their palette gets a readable badge without anybody
   editing this file.

   The old price is struck through *and* says "was ..." in words. The line is
   for the eye; the words are for everything else, because a screen reader does
   not reliably announce `<s>` and two numbers side by side with nothing between
   them is a page that lies to a listener. */
.price__was { color: var(--color-muted); font-size: var(--text-small); margin-right: .4em; }
.price__unit { display: block; color: var(--color-muted); font-size: var(--text-small); font-weight: 400; }
.price__now { font-weight: 650; }
.badge {
    display: inline-block;
    margin-left: .4em;
    padding: .1em .5em;
    border-radius: var(--radius);
    font-size: var(--text-small);
    font-weight: 650;
    /* Not a word wrapped away from its number. */
    white-space: nowrap;
}
.badge--sale { background: var(--color-accent); color: var(--color-accent-contrast); }

/* -- the filter panel (vitrin D3/E1) --------------------------------------- */

/* ⚠ **Structure only.** What the panel looks like is this theme's job and the
   §8.2 round's subject; what is here is the part without which the markup would
   be dishonest -- a listing that is one column on a phone and two on a desk, and
   a `<details>` that is a button on the small screen and a heading on the wide
   one. Mobile first, like every rule above it (T12).

   ⚠ **No colour and no font value**: both come from the store's design tokens,
   so a merchant's palette restyles the panel and a test can keep looking for the
   words that must not be here. ⚠ **And no font FAMILY either, not even a
   token:** Loft pins how many times `var(--theme-font, …)` appears in its sheet
   (`ThemeFontTest`), so a seventh would have meant editing a pinned number for
   a declaration the panel does not need -- the summary inherits the page's
   voice, which is the voice E1 drew it in. */

.listing { display: grid; gap: var(--space-normal); align-items: start; }

.filters {
    border: 1px solid var(--theme-line);
    border-radius: var(--radius);
    padding: var(--space-tight);
    background: var(--color-surface);
}

/* ⚠ **44 pixels, because on a phone this is the one thing a thumb aims at.**
   `display: flex` is what puts the count beside the word -- and it is also what
   takes the browser's triangle away, which is why one is drawn below. */
.filters > summary {
    display: flex;
    align-items: center;
    gap: var(--space-tight);
    min-height: 44px;
    cursor: pointer;
    font-size: var(--text-base);
    list-style: none;
}

.filters > summary::-webkit-details-marker { display: none; }

/* ⚠ **A marker drawn from borders, not written as a character** -- the lesson
   `sections/page.twig` already paid for: a glyph in `content:` is a word nobody
   can translate and a font nobody is promised (ADR-0234). Without it an open row
   and a plain heading look identical and nothing says this can be opened. */
.filters > summary::after {
    content: "";
    margin-inline-start: auto;
    width: .5em;
    height: .5em;
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: rotate(45deg);
}

.filters[open] > summary::after { transform: rotate(-135deg); }

.filters__badge {
    min-width: 1.5em;
    padding: 0 .35em;
    border-radius: 999px;
    text-align: center;
    background: var(--color-accent);
    color: var(--color-accent-contrast);
    font-size: var(--text-small);
}

.filters__body { padding-block-start: var(--space-tight); }

.filters__clear { font-size: var(--text-small); }

.filters__group + .filters__group {
    margin-block-start: var(--space-tight);
    padding-block-start: var(--space-tight);
    border-block-start: 1px solid var(--theme-line);
}

.filters__group-title {
    margin: 0 0 var(--space-tight);
    font-size: var(--text-small);
    text-transform: uppercase;
}

.filters__options { margin: 0; padding: 0; list-style: none; }

/* 44 pixels again: these are the rows a thumb aims at. */
.filters__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-tight);
    min-height: 44px;
    text-decoration: none;
    color: inherit;
}

.filters__option--on { font-weight: 600; }

/* ⚠ **A mark, not only a weight.** A selected row whose only difference is how
   bold it is, is a selection nobody reading at a distance can see -- and the
   `aria-current` beside it is what a listener gets. */
.filters__option--on .filters__option-label::before {
    content: "";
    display: inline-block;
    width: .45em;
    height: .25em;
    margin-inline-end: .5em;
    border-inline-start: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: rotate(-45deg);
}

.filters__count { color: var(--color-muted); font-size: var(--text-small); }

/* ⚠ **On a wide screen the panel is a box beside the list and the `<summary>`
   is its heading.** Two overrides rather than one, because browsers hide a
   closed `<details>`' body in two different ways: the old rule sets `display:
   none` on the children (an author rule beats the UA sheet whatever its
   specificity), and the current spec hides `::details-content` with
   `content-visibility`. ⚠ **Opening it with the `open` attribute instead was
   eliminated:** then the phone would start open, and E1 asks for a panel that
   starts closed there. */
@media (min-width: 60em) {
    .listing { grid-template-columns: 16rem 1fr; gap: var(--space-loose); }

    .filters > summary { cursor: default; }
    .filters > summary::after { display: none; }

    .filters > .filters__body { display: block; }

    .filters::details-content {
        content-visibility: visible;
        block-size: auto;
        overflow: visible;
    }
}

/* ⚠ **The one control in the panel that is a form**, and the only one a shopper
   has to confirm: two numbers have no moment at which they are finished. Laid out
   as a two column grid so the labels sit above their fields on a phone and the
   button spans both. */
.filters__price {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-tight);
    align-items: end;
}

.filters__price-label { font-size: var(--text-small); }

/* `min-width: 0` because a grid item's default `auto` lets a number field push
   the column wider than the panel and take a horizontal scrollbar with it. */
.filters__price-field {
    min-width: 0;
    width: 100%;
    min-height: 44px;
    padding: 0 .5em;
    border: 1px solid var(--theme-line);
    border-radius: var(--radius);
    background: var(--color-bg);
    color: inherit;
    font: inherit;
}

.filters__price-basis {
    grid-column: 1 / -1;
    color: var(--color-muted);
    font-size: var(--text-small);
}

.filters__price-apply {
    grid-column: 1 / -1;
    min-height: 44px;
    border: 0;
    border-radius: var(--radius);
    background: var(--color-accent);
    color: var(--color-accent-contrast);
    font: inherit;
    cursor: pointer;
}

/* ⚠ **The labels keep their own row and the fields theirs**, rather than each
   label sitting beside its field: *Van* and *Tot* are two words of different
   lengths, and a shared row would put the two boxes at two different widths. */
.filters__price-label:nth-of-type(2) { grid-column: 2; }

/* The order, and the filters a shopper has on (vitrin D3-3 / E1)
   ------------------------------------------------------------------------
   ⚠ **No colour and no font value here either**: both come from the store's
   design tokens, so a merchant's palette restyles both controls -- and Loft
   pins how many times `var(--theme-font, …)` appears in its sheet, so a
   declaration neither control needs would have meant editing a pinned number.

   ⚠ **The sort is a sibling of the panel, not a child of it**: a control inside
   the `<details>` is a control a phone hides behind the word *"Filters"*. On a
   phone it therefore sits directly under the panel's own button, and on a wide
   screen it moves to the top of the results column -- which is the heading row
   E1 drew it on. */

.filters__sort {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-tight);
}

.filters__sort-label { font-size: var(--text-small); }

/* `min-width: 0` and a flexible basis, because a `<select>` sized by its longest
   option is a control that pushes a phone sideways: *"Prijs: hoog naar laag"* is
   wider than the screen it has to fit on. */
.filters__sort-select {
    min-width: 0;
    flex: 1 1 8rem;
    min-height: 44px;
    padding: 0 .5em;
    border: 1px solid var(--theme-line);
    border-radius: var(--radius);
    background: var(--color-bg);
    color: inherit;
    font: inherit;
}

/* ⚠ **44 pixels, like the price form's button**: with no script at all this is
   what applies the order, so it is a thumb target rather than a hint. */
.filters__sort-apply {
    min-height: 44px;
    padding: 0 .9em;
    border: 0;
    border-radius: var(--radius);
    background: var(--color-accent);
    color: var(--color-accent-contrast);
    font: inherit;
    cursor: pointer;
}

/* ⚠ **A row that wraps, because the number of chips is the shopper's**: four
   categories and a range is five, and a row that scrolled sideways would hide
   the one a shopper is looking for. */
.filters__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-tight);
    margin: 0 0 var(--space-tight);
    padding: 0;
    list-style: none;
}

/* ⚠ **32 pixels and not 44.** These are not the panel: a chip is a shortcut
   beside the rows, and a row of 44 pixel pills on a phone is a second panel
   nobody asked for. The panel's own options stay the thumb targets. */
.filters__chip {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    min-height: 32px;
    padding: 0 .7em;
    border: 1px solid var(--theme-line);
    border-radius: 999px;
    font-size: var(--text-small);
}

.filters__chip-remove { color: var(--color-muted); }

/* ⚠ **The wide screen puts the order on the heading row** (E1), and it takes
   three lines rather than one because the listing is a two column grid: the
   panel keeps the left column over both rows, the order takes the top of the
   right one, and the rows follow underneath it.

   ⚠ **A second `@media` block rather than an edit to the one above**, so the
   panel's own disclosure rules and this placement stay readable apart -- and a
   merchant reading their copy sees one block per decision. */
@media (min-width: 60em) {
    .filters { grid-row: 1 / span 2; }

    .filters__sort {
        grid-column: 2;
        grid-row: 1;
        justify-content: flex-end;
    }

    .listing__results { grid-column: 2; grid-row: 2; }
}

/* ⚠ **`.pagination` BESIDE `.pager` and not instead of it** (vitrin D3-4b).
   ADR-1384 pinned `pagination` as the listing pager's permanent name and the
   listing templates write it now -- but ⚠ **`.pager` is also the product grid
   band's own nav** (`Catalog/resources/sections/product-grid.twig` writes
   `class="pager product-grid__pager"`), so a rename that *deleted* the rule
   above would have unstyled a control on the home page in order to restyle one
   on the listing. Two controls were sharing one class name; each has its own
   now, and the band's is untouched.

   ⚠ **It wraps, because the number of pages is the catalogue's.** The window's
   ceiling is eleven entries whatever the shop does (`PageWindow::AROUND`), and a
   row that scrolled sideways would hide the number a shopper is reaching for. */
.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4em;
    margin-top: var(--space-normal);
    font-size: var(--text-small);
}

/* ⚠ **44 pixels, like the panel's own controls and the price form's button**: a
   page number on a phone is a thumb target, and a bare digit is the smallest one
   a listing has. */
.pagination__step,
.pagination__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 .5em;
    border-radius: var(--radius);
}

/* ⚠ **Selected through the attribute rather than a second class** (vitrin
   D3-4b): the markup already carries `aria-current="page"` because E1 asks for
   it, and a `.pagination__current` beside it would be a second answer to one
   question -- the kind that goes out of step the day one of the two is
   forgotten. */
.pagination__number[aria-current="page"] {
    background: var(--color-accent);
    color: var(--color-accent-contrast);
}

/* The gap stands in for pages and leads nowhere, so it is not a target. */
.pagination__gap { padding: 0 .2em; color: var(--color-muted); }

/* The row count, under the heading (E1). ⚠ **Pulled up against the title**,
   because it is part of the heading rather than the first line of the listing. */
.listing__count { margin: calc(0px - var(--space-tight)) 0 var(--space-normal); font-size: var(--text-small); }

/* I-1345: the card's own add form takes no room of its own. */
.product-card__add { margin: 0; }

/* Product "Specificaties" (I-1522): label beside value. */
.product-specs__list { display: grid; gap: .25rem; margin: 0; }
.product-specs__row { display: grid; grid-template-columns: minmax(8rem, 1fr) 2fr; gap: 1rem; }
.product-specs__row dt { font-weight: 600; }
.product-specs__row dd { margin: 0; }

/* I-1513: delivery promise -- the line text quiet, the mixed-basket notice a calm box (information, never an error colour). */
.delivery-text { display: block; color: var(--color-muted); font-size: var(--text-small); }
.delivery-box { border: 1px solid var(--color-muted); border-radius: var(--radius, 4px); padding: .75rem 1rem; margin: 1rem 0; color: var(--color-text); }