/* ==========================================================================
   demo-retail.css — "Maple & Thread"
   Warm editorial neutrals. A soft Fraunces serif over clean Work Sans.
   Calm and considered — an independent boutique, not a mall chain.
   ========================================================================== */

:root {
  --d-bg:         #F5F2EC;
  --d-ink:        #1B1A18;
  --d-muted:      #6E675E;
  --d-accent:     #9A6A45;
  --d-accent-ink: #FFFFFF;
  --d-surface:    #ECE7DD;
  --d-line:       rgba(27, 26, 24, .12);
  --d-line-strong:rgba(27, 26, 24, .26);

  --d-sans:    "Work Sans", system-ui, sans-serif;
  --d-display: "Fraunces", Georgia, serif;
  --d-radius:  8px;
  --d-max:     1120px;
}

body { letter-spacing: .002em; }

/* Fraunces is loaded at 500/600 only — keep headings off a synthetic 700. */
.dnav__brand { font-weight: 600; letter-spacing: -.02em; }
.dh2, .dh3, .dhero__title { font-weight: 600; }
.dhero__title { line-height: 1.04; letter-spacing: -.025em; }
.dh2 { letter-spacing: -.018em; }
.dlede { font-size: 18px; line-height: 1.62; }

/* Editorial kicker with a little more tracking. */
.dkicker { letter-spacing: .24em; }

.dcard { box-shadow: 0 1px 0 rgba(27, 26, 24, .03); }

/* Product tile — photo, then a name / price line. The collection's star. */
.dprod__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dprod__name { font-family: var(--d-display); font-size: 19px; font-weight: 600; letter-spacing: -.01em; margin: 0; }
.dprod__price { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--d-accent); white-space: nowrap; }
.dprod__meta { margin-top: 6px; font-size: 14px; color: var(--d-muted); }

/* Price list: names in the serif, prices in ink (accent reads too warm at
   price size against the cream ground). */
.dmenu__name { font-family: var(--d-display); font-size: 18px; font-weight: 600; }
.dmenu__price { color: var(--d-ink); }

/* Category heading that sits above each price list. */
.dcat {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--d-accent);
  padding-bottom: 12px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--d-line);
}
.dcat + .dmenu { margin-bottom: 40px; }

/* Opening-hours block, shared by Home and Visit. */
.dhours { display: grid; gap: 9px; font-size: 15.5px; font-variant-numeric: tabular-nums; }
.dhours__row { display: flex; justify-content: space-between; gap: 18px; padding-bottom: 8px; border-bottom: 1px dotted var(--d-line-strong); }
.dhours__row:last-child { border-bottom: 0; padding-bottom: 0; }
.dhours__d { color: var(--d-muted); }

/* Small pill — the one decorative flourish. */
.dtag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--d-accent);
  border: 1.5px solid var(--d-accent);
  border-radius: 999px;
  padding: 7px 15px;
}

/* Hairline rule between sections. */
.drule { height: 1px; background: var(--d-line); border: 0; margin: 0; }

/* Dark CTA band reads best on the cream ground. */
.dband { background: var(--d-ink); color: var(--d-bg); }
.dband .dbtn { background: var(--d-accent); color: var(--d-accent-ink); }
