/* Sunlight Cloth Store — public storefront. Plain CSS, no build step (ADR-0022).
   Read by customers on a phone: one column, large type, one obvious action.

   The palette is warm Indian retail rather than the dashboard's grey-white: deep
   ikat maroon carries the shop's name, the amber that was already in the code
   carries every action, and the page itself is cream. Maroon is never an action
   and amber is never a surface — that split is what keeps a customer's eye going
   to the one thing they can press.

   Money is set in IBM Plex Sans with tabular numerals, so a column of prices
   lines up digit under digit instead of drifting.

   /shop and /item are server-rendered (src/site/grid-page.ts, item-page.ts) and
   share this file, so the tokens below are the one place the storefront's colour
   and type are decided. */

* { box-sizing: border-box; }

:root {
  --maroon: #6b1f24;         /* the shop's name and its section rules — never a button */
  --maroon-deep: #241611;    /* ink, and the sold-out pill */
  --accent: #b45309;         /* the one action colour, dark enough for contrast on cream */
  --accent-soft: #fef3c7;
  --accent-line: #f0dfa8;
  --ink: #241611;
  --body: #3b2a20;
  --muted: #8a7a66;
  --line: #e3d8c6;
  --bg: #fbf6ec;             /* cream page */
  --bg-warm: #f2e9da;        /* the one panel that is not white */
  --cream: #f7ecdc;          /* type on maroon */
  --rose: #e4bfb6;           /* secondary type on maroon */
  --rose-dim: #d9a9a0;
  --in-stock: #15803d;
}

body {
  margin: 0;
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--bg);
  font-size: 17px;
  line-height: 1.55;
}

[hidden] { display: none !important; }

/* The small mono label above a heading. Used for the town on the landing page
   and for the attribute labels on an item. */
.eyebrow {
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hero {
  background: var(--maroon);
  color: var(--cream);
  padding: 34px 20px 0;
  text-align: center;
}
.hero .eyebrow { color: var(--rose-dim); }
.hero h1 {
  margin: 12px 0 0;
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.tagline {
  margin: 12px auto 22px;
  max-width: 26ch;
  color: var(--rose);
  font-size: 0.95rem;
}

.cta {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 16px 26px;
  border-radius: 999px;
  min-height: 48px;          /* thumb-sized, per the dashboard's touch rule */
}
.cta:active { transform: translateY(1px); }

/* A woven border, in CSS rather than an image: it is the one decorative thing on
   the page and it should not cost a request. */
.weave {
  height: 10px;
  margin-top: 22px;
  background: repeating-linear-gradient(
    90deg,
    var(--accent) 0 3px,
    transparent 3px 9px,
    var(--rose) 9px 11px,
    transparent 11px 18px
  );
}

main {
  max-width: 560px;
  margin: 0 auto;
  padding: 22px 16px 6px;
}

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 14px;
}
.card h2 { margin: 0 0 10px; font-size: 1.1rem; font-weight: 700; }
.card p { color: var(--body); }

/* The shop-window card leads with a photograph, because "see what is in store"
   is a promise the picture keeps better than the sentence does. */
.card-photo {
  padding: 0;
  overflow: hidden;
}
.card-photo img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
  object-position: 50% 22%;
}
.card-photo .card-body { padding: 16px 18px 18px; }
.card-photo h2 { margin-bottom: 6px; }

.card-warm {
  background: var(--bg-warm);
  border-color: var(--line);
}

/* Coins, as four numbered rules rather than bullets: each one is a separate
   promise and reads better counted than listed. */
.rules { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.rules li { display: flex; gap: 12px; align-items: baseline; }
.rules li::before {
  counter-increment: rule;
  content: "0" counter(rule);
  flex: none;
  width: 26px;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--accent);
}
.rules { counter-reset: rule; }

.address { margin: 0 0 3px; }
.hours { margin: 0 0 12px; color: var(--muted); }

.link {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}
.link:hover { text-decoration: underline; }

footer {
  max-width: 560px;
  margin: 0 auto;
  padding: 6px 16px 32px;
  text-align: center;
  color: var(--muted);
}
.muted { color: var(--muted); margin: 4px 0; }
.small { font-size: 0.85rem; }

/* The bar that carries the shop's name on /shop and /item. Server-rendered, so
   these classes are written in src/site/*.ts rather than in any HTML file. */
.item-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: var(--maroon);
  color: var(--cream);
}
.item-back {
  color: var(--rose);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.95rem;
}
.item-back:hover { text-decoration: underline; }

.item {
  max-width: 560px;
  margin: 0 auto;
  padding: 20px 16px 40px;
}
.item-photo {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.item-title {
  margin: 20px 0 6px;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.item-price {
  margin: 0 0 10px;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--maroon);
}
.item-stock {
  margin: 0 0 16px;
  font-weight: 600;
  color: var(--in-stock);
}
.item-stock-out { color: var(--muted); font-weight: 500; }
.item-description { margin: 0 0 20px; color: var(--body); }
.item-note {
  margin: 0;
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  font-size: 0.92rem;
}

/* The shop-window grid (Phase 15; ADR-0024), server-rendered at /shop by
   src/site/grid-page.ts. Two columns on a phone, more as the screen allows —
   the point of this page is that a customer scans photographs rather than
   reading a list of titles. */

.grid-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 22px 16px 40px;
}
.grid-heading {
  margin: 0 0 4px;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
/* Women / Men / Kids sections (Phase 16; ADR-0028). Headings are derived from
   the items themselves, so a section only exists when it holds stock. */
.grid-section {
  margin: 0 0 28px;
}
.grid-section-heading {
  margin: 0 0 14px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--maroon);
}
.grid {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}
.grid-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.grid-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.grid-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: var(--bg-warm);
}
.grid-title,
.grid-price,
.grid-stock {
  display: block;
  padding: 0 13px;
}
.grid-title {
  padding-top: 12px;
  font-weight: 600;
  line-height: 1.35;
}
.grid-price {
  padding-top: 5px;
  padding-bottom: 14px;
  color: var(--maroon);
  font-weight: 700;
}
.grid-stock {
  padding-bottom: 12px;
  color: var(--muted);
  font-size: 0.85rem;
}
/* Sold out is dimmed, not hidden: the customer who came for it should hear it
   from the shop rather than from silence. */
.grid-item-out .grid-photo { opacity: 0.55; }
.grid-item-out .grid-title { color: var(--muted); }
.grid-item-out .grid-price { color: var(--muted); }