/* ---------------------------------------------------------------------------
   Marlden Cycles — brand layer.

   Register: workshop. Sturdy, cheerful, a bit of enamel-sign character. Not
   precious and not corporate — the visual equivalent of a shop where someone
   will happily explain a bottom bracket to you.

   WHY THIS CONCEPT EXISTS. The other seven cover services, food, wellness,
   hospitality, professional services and seasonal activity. **None of them sell
   a thing off a shelf.** A shop asking for a website is one of the most common
   briefs there is, and the set had no answer to "what would my products look
   like". This one adds the missing shape: a product grid with prices and real
   stock states, and a service menu beside it.

   It is deliberately a shop AND a workshop, because that is what small bike
   shops actually are, and because it lets one page demonstrate retail and
   booking without pretending to be an e-commerce build.
   --------------------------------------------------------------------------- */

:root {
  --bg:          #fbf9f4;
  --bg-alt:      #f2eee3;
  --surface:     #ffffff;
  --ink:         #14261f;
  --ink-soft:    #40564d;
  --ink-mute:    #7b8b83;
  --line:        #ded8c9;
  --accent:      #d8541f;
  --accent-ink:  #ffffff;
  --accent-soft: #fbe6d9;
  --focus:       #d8541f;

  --pine:        #0f2a22;
  --pine-soft:   #1c3d33;

  --font-display: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --display-weight: 700;
  --display-tracking: -0.03em;
  --display-leading: 1.02;

  --btn-radius: 8px;
  --card-radius: 12px;
  --input-radius: 8px;

  --header-h: 76px;
  --container: 1200px;
}

.eyebrow { color: var(--accent); font-weight: 700; letter-spacing: 0.16em; }

/* --- Dark pine band ------------------------------------------------------- */

.on-pine {
  background: var(--pine);
  color: #eef4f0;
  --ink: #eef4f0;
  --ink-soft: #b6c8c0;
  --ink-mute: #8aa096;
  --line: var(--pine-soft);
  --surface: #17352c;
  --card-line: var(--pine-soft);
}

.on-pine .eyebrow { color: #f0a878; }

/* --- Header --------------------------------------------------------------- */

.site-header { --header-bg: var(--bg); }

.brandmark { font-size: var(--step-2); letter-spacing: -0.035em; }
.brandmark small { letter-spacing: 0.2em; color: var(--accent); opacity: 1; }

/* --- Hero ----------------------------------------------------------------- */

.hero {
  --hero-size: clamp(2.4rem, 6.4vw, 4.4rem);
  --hero-py: clamp(2.5rem, 6vw, 4.5rem);
}

.hero__grid {
  display: grid;
  gap: var(--s-xl);
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
}

.hero h1 em { font-style: normal; color: var(--accent); }

/* Open/closed strip — a shop's most-asked question, answered before it is asked. */
.open-strip {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.5em 1em 0.55em 0.75em;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: var(--step--1);
  font-weight: 500;
}

.open-strip .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #2fa860; flex: none;
  box-shadow: 0 0 0 4px rgb(47 168 96 / 0.18);
}

/* --- Product grid --------------------------------------------------------- */
/* The component this concept exists for. Worth promoting into shared/ the
   moment a second retail build wants it. */

.product {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.product:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }

.product .media { border-block-end: 1px solid var(--line); background: var(--bg-alt); }

.product__body { display: flex; flex-direction: column; gap: var(--s-2xs); padding: var(--s-s) var(--s-m) var(--s-m); flex: 1; }

.product__cat {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-mute);
}

.product h3 { font-size: var(--step-1); }

.product p { font-size: var(--step--1); color: var(--ink-soft); }

.product__foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-xs);
  margin-block-start: auto; padding-block-start: var(--s-xs);
}

.product__price { font-family: var(--font-display); font-size: var(--step-2); font-weight: 700; letter-spacing: -0.03em; }
.product__price small { font-family: var(--font-body); font-size: 0.72rem; font-weight: 500; color: var(--ink-mute); letter-spacing: 0; }

/* Stock states. A shop site that does not say what is in the shop wastes a
   phone call for every visitor, which is the actual cost being designed out. */
.stock {
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.28em 0.65em; border-radius: var(--radius-pill);
  font-size: 0.72rem; font-weight: 600; white-space: nowrap;
}
.stock::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.stock--in    { background: #e6f4ec; color: #1d6b41; }
.stock--last  { background: #fdf0dd; color: #8a5a12; }
.stock--order { background: var(--bg-alt); color: var(--ink-mute); }

/* --- Service menu --------------------------------------------------------- */

.service {
  display: grid;
  gap: var(--s-2xs);
  padding-block: var(--s-m);
  border-block-end: 1px solid var(--line);
  grid-template-columns: 1fr auto;
  align-items: baseline;
}

.service:last-child { border-block-end: 0; }

.service h3 { font-size: var(--step-1); grid-column: 1; }
.service p { grid-column: 1; font-size: var(--step--1); color: var(--ink-soft); max-width: 54ch; }

.service__meta { grid-column: 2; grid-row: 1 / span 2; text-align: end; }
.service__price { font-family: var(--font-display); font-size: var(--step-2); font-weight: 700; letter-spacing: -0.03em; display: block; }
.service__turn { font-size: 0.74rem; color: var(--ink-mute); white-space: nowrap; }

@media (max-width: 560px) {
  .service { grid-template-columns: 1fr; }
  .service__meta { grid-column: 1; grid-row: auto; text-align: start; display: flex; align-items: baseline; gap: 0.6em; }
}

/* --- Booking week --------------------------------------------------------- */

.week {
  display: grid;
  gap: var(--s-2xs);
  grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
  list-style: none;
  padding: 0;
}

.day {
  display: grid; gap: 2px; padding: var(--s-s) var(--s-xs);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; text-align: center;
}

.day b { font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }
.day span { font-family: var(--font-display); font-size: var(--step-1); font-weight: 700; }
.day small { font-size: 0.72rem; color: var(--ink-mute); }

.day--none { opacity: 0.5; }
.day--none span { color: var(--ink-mute); }
.day--free { border-color: var(--accent); }
.day--free span { color: var(--accent); }

/* --- Numbered points ------------------------------------------------------ */

.points { counter-reset: pt; display: grid; gap: var(--s-m); list-style: none; padding: 0; }
.points > li { counter-increment: pt; display: grid; grid-template-columns: auto 1fr; gap: var(--s-s); align-items: start; }
.points > li::before {
  content: counter(pt);
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent); color: #fff;
  font-family: var(--font-display); font-size: 0.9rem; font-weight: 700;
}
.points h3 { font-size: var(--step-1); margin-block-end: 0.2rem; }
.points p { color: var(--ink-soft); font-size: var(--step--1); }

/* --- Panels --------------------------------------------------------------- */

.panel {
  padding: clamp(1.4rem, 3.5vw, 2.5rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
}

.on-pine .panel { border-color: var(--pine-soft); }

/* --- Footer --------------------------------------------------------------- */

.site-footer { --footer-bg: var(--pine); --footer-ink: #dce8e2; }
.site-footer .brandmark small { color: #f0a878; }