/* ==========================================================================
   Ripley Turnkeys — store
   A parts catalog, not a marketplace. Specs in fixed slots, no sales pitch.
   ========================================================================== */

:root {
    --paper:     #F5F4F1;
    --paper-2:   #EBEAE5;
    --ink:       #1B1D1F;
    --ink-2:     #5A5E60;
    --ink-3:     #8A8D8C;
    --rule:      #C9C7C0;
    --rule-2:    #DAD8D2;

    /* Chert and flint — what the ground is made of here. */
    --chert:     #6B7259;
    --chert-dim: #8B9179;
    --rust:      #8C4A2F;
    --live:      #2E6B3E;

    --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
    --body:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    --mono:    'IBM Plex Mono', ui-monospace, Menlo, monospace;

    --gutter: 1.5rem;
    --max:    62rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.6;
}

a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px;
    text-underline-offset: 2px; }
a:hover { color: var(--chert); }

:focus-visible { outline: 2px solid var(--chert); outline-offset: 2px; }

img { max-width: 100%; display: block; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

.skip {
    position: absolute; left: -9999px;
}
.skip:focus {
    left: var(--gutter); top: .5rem; z-index: 10;
    background: var(--ink); color: var(--paper); padding: .5rem .75rem;
}

/* --- Labels ------------------------------------------------------------- */
/* Small condensed caps used for field names and section markers. These carry
   the catalog feel; nothing else needs decoration. */
.label {
    font-family: var(--display);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ink-3);
}

/* --- Masthead ----------------------------------------------------------- */
.masthead {
    border-bottom: 2px solid var(--ink);
    background: var(--paper);
}
.masthead__inner {
    display: flex; flex-wrap: wrap; align-items: baseline;
    gap: .75rem 1.5rem; padding: 1rem var(--gutter);
    max-width: var(--max); margin: 0 auto;
}
.masthead__name {
    font-family: var(--display);
    font-size: 1.0625rem; font-weight: 700;
    letter-spacing: .02em; text-transform: uppercase;
    margin: 0; text-decoration: none;
}
.masthead__name a { text-decoration: none; }
.masthead__place {
    font-family: var(--mono); font-size: .75rem; color: var(--ink-3);
}
.masthead__nav {
    margin-left: auto; display: flex; flex-wrap: wrap; gap: 1.125rem;
    font-family: var(--display); font-size: .8125rem; font-weight: 500;
}
.masthead__nav a { text-decoration: none; }
.masthead__nav a[aria-current] { color: var(--chert); }

/* --- Counter (the intro block) ------------------------------------------ */
.counter {
    border-bottom: 1px solid var(--rule);
    padding: 2.25rem 0 1.75rem;
}
.counter__stock {
    font-family: var(--mono); font-size: .8125rem;
    color: var(--live); margin: 0 0 .625rem;
}
.counter__stock--empty { color: var(--rust); }
.counter h1 {
    font-family: var(--display);
    font-size: clamp(1.5rem, 4.5vw, 2.125rem);
    font-weight: 700; line-height: 1.15; letter-spacing: -.015em;
    margin: 0 0 .625rem; max-width: 30ch;
}
.counter p {
    margin: 0; max-width: 58ch; color: var(--ink-2); font-size: .9375rem;
}

/* --- Filter bar --------------------------------------------------------- */
.filters {
    display: flex; flex-wrap: wrap; gap: .5rem .375rem;
    padding: 1rem 0; border-bottom: 1px solid var(--rule);
    align-items: center;
}
.filters__group { display: flex; flex-wrap: wrap; gap: .375rem; }
.chip {
    font-family: var(--display); font-size: .75rem; font-weight: 500;
    padding: .3125rem .625rem; border: 1px solid var(--rule);
    background: transparent; color: var(--ink-2);
    text-decoration: none; white-space: nowrap;
}
.chip:hover { border-color: var(--chert); color: var(--chert); }
.chip[aria-current] {
    background: var(--ink); border-color: var(--ink); color: var(--paper);
}
.chip__count { font-family: var(--mono); opacity: .6; margin-left: .25rem; }
.filters__sort { margin-left: auto; display: flex; gap: .375rem; align-items: center; }

/* --- Listing rows ------------------------------------------------------- */
/* Rows rather than a card grid, so specs line up in a column and can be
   scanned down the page. */
.stock { list-style: none; margin: 0; padding: 0; }

.row {
    display: grid;
    grid-template-columns: 13.5rem 1fr;
    gap: 1.5rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--rule);
}

.row__shot {
    border: 1px solid var(--rule);
    background: var(--paper-2);
    aspect-ratio: 16 / 10;
    overflow: hidden;
    position: relative;
}
.row__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.row__shot--empty {
    display: grid; place-items: center;
    font-family: var(--mono); font-size: .75rem; color: var(--ink-3);
}

.row__head {
    display: flex; flex-wrap: wrap; align-items: baseline;
    gap: .5rem .75rem; margin-bottom: .375rem;
}
.row__ref { font-family: var(--mono); font-size: .75rem; color: var(--ink-3); }
.row__title {
    font-family: var(--display); font-size: 1.125rem; font-weight: 700;
    letter-spacing: -.01em; margin: 0;
}
.row__title a { text-decoration: none; }
.row__title a:hover { text-decoration: underline; }
.row__domain {
    font-family: var(--mono); font-size: .8125rem; color: var(--chert);
    margin: 0 0 .5rem;
}
.row__summary {
    margin: 0 0 .875rem; font-size: .9375rem; color: var(--ink-2);
    max-width: 60ch;
}

/* --- Spec strip --------------------------------------------------------- */
/* The signature element. Same fields, same order, every listing, so a buyer
   compares by reading straight down. */
.specs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: .875rem 1.25rem;
    border-top: 1px solid var(--rule-2);
    padding-top: .75rem;
    margin: 0;
}
.specs > div { min-width: 0; }
.specs dt { margin-bottom: .1875rem; }
.specs dd {
    margin: 0; font-family: var(--mono); font-size: .875rem;
    color: var(--ink); overflow-wrap: break-word;
}
.specs dd.is-empty { color: var(--ink-3); }
.specs dd.is-price { font-weight: 600; font-size: 1rem; }

.badge {
    display: inline-block; font-family: var(--display); font-size: .6875rem;
    font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    padding: .1875rem .4375rem; border: 1px solid currentColor;
}
.badge--reserved { color: var(--rust); }
.badge--sold { color: var(--ink-3); }

/* --- Traffic bars ------------------------------------------------------- */
/* Deliberately small and plain. Its job is to be checkable, not impressive. */
.traffic {
    display: flex; align-items: flex-end; gap: 2px;
    height: 2.75rem; margin: 0;
}
.traffic__bar {
    flex: 1 1 0; min-width: 3px; background: var(--chert-dim);
    position: relative;
}
.traffic__bar:last-child { background: var(--chert); }
.traffic__scale {
    display: flex; justify-content: space-between;
    font-family: var(--mono); font-size: .6875rem; color: var(--ink-3);
    margin-top: .3125rem;
}

/* --- Listing page ------------------------------------------------------- */
.detail { padding: 2rem 0 0; }
.detail__head { border-bottom: 1px solid var(--rule); padding-bottom: 1.25rem; }
.detail h1 {
    font-family: var(--display);
    font-size: clamp(1.625rem, 5vw, 2.25rem);
    font-weight: 700; letter-spacing: -.02em; line-height: 1.1;
    margin: .375rem 0 .5rem;
}
.detail__domain {
    font-family: var(--mono); font-size: 1rem; color: var(--chert); margin: 0;
}

.detail__grid {
    display: grid; grid-template-columns: 1fr 17rem;
    gap: 2.5rem; padding: 1.75rem 0 0;
    align-items: start;
}

.prose { font-size: 1rem; }
.prose h2 {
    font-family: var(--display); font-size: 1.0625rem; font-weight: 700;
    letter-spacing: -.005em; margin: 1.75rem 0 .5rem;
}
.prose p { margin: 0 0 .875rem; max-width: 66ch; }
.prose ul, .prose ol { max-width: 66ch; padding-left: 1.25rem; }
.prose li { margin-bottom: .3125rem; }
.prose :first-child { margin-top: 0; }

.panel {
    border: 1px solid var(--ink); padding: 1.125rem;
    position: sticky; top: 1.5rem;
}
.panel__price {
    font-family: var(--mono); font-size: 1.75rem; font-weight: 600;
    margin: .25rem 0 .875rem; letter-spacing: -.02em;
}
.panel__list {
    list-style: none; margin: 0 0 1.125rem; padding: 0;
    font-size: .875rem; color: var(--ink-2);
}
.panel__list li {
    padding: .4375rem 0; border-top: 1px solid var(--rule-2);
    display: flex; justify-content: space-between; gap: .75rem;
}
.panel__list li span:last-child { font-family: var(--mono); color: var(--ink); }

.btn {
    display: block; width: 100%; text-align: center;
    font-family: var(--display); font-size: .9375rem; font-weight: 600;
    padding: .75rem 1rem; border: 1px solid var(--ink);
    background: var(--ink); color: var(--paper); text-decoration: none;
    cursor: pointer;
}
.btn:hover { background: var(--chert); border-color: var(--chert); color: var(--paper); }
.btn--quiet {
    background: transparent; color: var(--ink); margin-top: .5rem;
}
.btn--quiet:hover { background: transparent; color: var(--chert); }
.btn[aria-disabled='true'] {
    background: var(--paper-2); border-color: var(--rule);
    color: var(--ink-3); cursor: default;
}

.shots { display: grid; gap: .75rem; margin: 1.75rem 0; }
.shots figure { margin: 0; border: 1px solid var(--rule); }
.shots figcaption {
    font-family: var(--mono); font-size: .75rem; color: var(--ink-3);
    padding: .4375rem .625rem; border-top: 1px solid var(--rule);
}

/* --- Empty states ------------------------------------------------------- */
.empty {
    padding: 3rem 0; border-bottom: 1px solid var(--rule);
    font-size: .9375rem; color: var(--ink-2); max-width: 52ch;
}
.empty p { margin: 0 0 .75rem; }

/* --- Footer ------------------------------------------------------------- */
.foot {
    border-top: 2px solid var(--ink); margin-top: 3rem;
    padding: 1.75rem 0 3rem; font-size: .875rem; color: var(--ink-2);
}
.foot__grid {
    display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem;
    justify-content: space-between;
}
.foot a { color: var(--ink-2); }
.foot__nav { display: flex; flex-wrap: wrap; gap: 1rem; }
.foot__who { max-width: 34ch; }
.foot__who strong { color: var(--ink); font-weight: 600; }

/* --- Narrow ------------------------------------------------------------- */
@media (max-width: 46rem) {
    .row { grid-template-columns: 1fr; gap: .875rem; }
    .row__shot { max-width: 22rem; }
    .detail__grid { grid-template-columns: 1fr; gap: 1.75rem; }
    .panel { position: static; }
    .filters__sort { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* --- Forms -------------------------------------------------------------- */
.field { margin-bottom: 1.125rem; }
.field label { display: block; margin-bottom: .3125rem; }
.field__req { color: var(--rust); letter-spacing: .04em; }

input[type="text"], input[type="email"], select, textarea {
    width: 100%; font-family: var(--body); font-size: .9375rem;
    padding: .5rem .625rem; border: 1px solid var(--rule);
    background: #FFFDF9; color: var(--ink); border-radius: 0;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--chert); outline: 2px solid var(--chert); outline-offset: -2px;
}
textarea { resize: vertical; }

.field__row { display: flex; gap: .5rem; }
.field__row select { width: auto; flex: none; }

.field__hint { font-size: .8125rem; color: var(--ink-3); margin: .3125rem 0 0; }
.field__error { font-size: .8125rem; color: var(--rust); margin: .3125rem 0 0; }

.field-set { border: 0; padding: 0; margin: 0 0 1.25rem; }
.field-set legend { padding: 0; margin-bottom: .5rem; }

.coins { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .5rem; }
.coin {
    display: flex; align-items: baseline; gap: .5rem;
    border: 1px solid var(--rule); padding: .625rem .75rem; cursor: pointer;
}
.coin:hover { border-color: var(--chert); }
.coin:has(input:checked) { border-color: var(--ink); background: var(--paper-2); }
.coin input { margin: 0; flex: none; accent-color: var(--chert); }
.coin__code { font-family: var(--mono); font-size: .875rem; font-weight: 600; }
.coin__name { font-size: .75rem; color: var(--ink-3); }

.alert {
    border-left: 3px solid var(--rust); background: var(--paper-2);
    padding: .75rem .875rem; margin: 0 0 1.25rem; font-size: .9375rem;
}
.alert--quiet { border-left-color: var(--chert); }

/* --- Payment block ----------------------------------------------------- */
.pay {
    border: 1px solid var(--ink); padding: 1.25rem;
    display: grid; grid-template-columns: 1fr auto; gap: 1.25rem 1.75rem;
    margin-bottom: 1.25rem;
}
.pay__amount { grid-column: 1; }
.pay__address { grid-column: 1; }
.pay__qr { grid-column: 2; grid-row: 1 / span 2; text-align: center; }
.pay__qr #qr { display: inline-block; line-height: 0; }
.pay__qr img, .pay__qr canvas { display: block; }
.pay__qrnote {
    font-size: .75rem; color: var(--ink-3); margin: .5rem 0 0; max-width: 12rem;
}
.pay__figure {
    font-family: var(--mono); font-size: 1.375rem; font-weight: 600;
    margin: .1875rem 0 .1875rem; letter-spacing: -.01em; overflow-wrap: anywhere;
}
.pay__usd { font-size: .8125rem; color: var(--ink-3); margin: 0; }
.pay__addr {
    font-family: var(--mono); font-size: .875rem; margin: .1875rem 0 .5rem;
    overflow-wrap: anywhere; padding: .5rem .625rem; background: var(--paper-2);
    border: 1px solid var(--rule-2);
}
.pay__address .chip { cursor: pointer; margin-right: .25rem; }

@media (max-width: 46rem) {
    .pay { grid-template-columns: 1fr; }
    .pay__qr { grid-column: 1; grid-row: auto; text-align: left; }
    .pay__qrnote { max-width: none; }
}