/*
  Ti Palet styles — loaded after app.css (this file belongs to the product, kit updates never modify it).
  Brand colors come from the promo video. The hero and the call-to-action stay dark in both themes, like the video;
  everything else follows the MudBlazor theme (Theme/BrandTheme.cs) through --mud-palette-* variables.
*/

/* ---------- Fonts (self-hosted: the CSP only allows fonts from the site itself) ---------- */

@font-face { font-family: Anton; font-weight: 400; font-display: swap; src: url(fonts/anton-latin-400.woff2) format("woff2"); }
@font-face { font-family: Inter; font-weight: 400; font-display: swap; src: url(fonts/inter-latin-400.woff2) format("woff2"); }
@font-face { font-family: Inter; font-weight: 700; font-display: swap; src: url(fonts/inter-latin-700.woff2) format("woff2"); }
@font-face { font-family: Inter; font-weight: 900; font-display: swap; src: url(fonts/inter-latin-900.woff2) format("woff2"); }

:root {
  --tp-ink: #0d1420;
  --tp-ink-2: #22324d;
  --tp-cream: #f5eee2;
  --tp-yellow: #f4cc17;
  --tp-red: #e3342f;
  --tp-muted: #9fb0c8;
  --tp-display: Anton, Impact, "Arial Narrow", sans-serif;
}

body { font-family: Inter, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* ---------- Kit overrides ---------- */

.brand-logo { gap: 8px; }
.brand-logo__name { font-family: var(--tp-display); font-weight: 400; font-size: 1.5rem; text-transform: uppercase; letter-spacing: .02em; }
.brand-logo__accent { color: var(--mud-palette-primary); }

.section__title, .section__title--large { font-family: var(--tp-display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; line-height: 1.05; }
.step-card__number { color: var(--mud-palette-primary-text); }

/* ---------- Shared pieces ---------- */

.tp-yellow { color: var(--tp-yellow); }
.tp-kicker { display: inline-block; font-weight: 900; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--mud-palette-primary); }

.tp-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 26px; border-radius: 999px; font-weight: 700; font-size: 1.05rem; text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.tp-button:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0, 0, 0, .25); }
.tp-button:focus-visible { outline: 3px solid var(--tp-yellow); outline-offset: 3px; }
.tp-button--yellow { background: var(--tp-yellow); color: var(--tp-ink); }
.tp-button--block { width: 100%; box-sizing: border-box; }

/* ---------- Hero (always dark, like the video) ---------- */

.tp-hero {
  padding: 72px 0 80px; color: var(--tp-cream);
  background: radial-gradient(1100px 700px at 75% 45%, var(--tp-ink-2) 0%, var(--tp-ink) 70%);
}
.tp-hero__inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; }
.tp-hero .tp-kicker { color: var(--tp-yellow); }
.tp-hero__title {
  font-family: var(--tp-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(2.8rem, 6.5vw, 5rem); line-height: .95; letter-spacing: .01em; margin: 16px 0 20px;
}
.tp-hero__title .tp-yellow { display: block; }
.tp-hero__subtitle { font-size: 1.15rem; line-height: 1.6; color: var(--tp-muted); margin: 0 0 32px; max-width: 520px; }
.tp-hero__price { color: var(--tp-muted); font-size: 1rem; }
.tp-hero__price strong { font-family: var(--tp-display); font-weight: 400; font-size: 2rem; color: var(--tp-yellow); margin: 0 4px; vertical-align: -2px; }
.tp-hero__price s { color: var(--tp-muted); }
.tp-hero__video video {
  display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 18px; background: #000;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}

/* ---------- Arguments ---------- */

.tp-arguments { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tp-argument { padding: 28px; border: var(--border); border-radius: var(--radius-lg); background: var(--mud-palette-surface); }
.tp-argument__icon {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 18px;
  color: var(--tp-ink); background: var(--tp-yellow);
}
.tp-argument h2 { font-family: var(--tp-display); font-weight: 400; text-transform: uppercase; font-size: 1.6rem; line-height: 1.1; margin: 0 0 10px; }
.tp-argument p { margin: 0; color: var(--mud-palette-text-secondary); line-height: 1.6; }

.tp-steps { grid-template-columns: repeat(4, 1fr); }

/* ---------- Photos ---------- */

.tp-photos { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; align-items: start; }
.tp-photos figure { margin: 0; }
.tp-photos img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); }
.tp-photos figcaption { margin-top: 10px; font-size: .95rem; color: var(--mud-palette-text-secondary); }

/* ---------- Kit and price ---------- */

.tp-kit { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center; }
.tp-kit .section__title { margin-top: 8px; }
.tp-checklist { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.tp-checklist li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.5; }
.tp-checklist .mud-icon-root { color: var(--mud-palette-success); flex: none; margin-top: 2px; }
.tp-kit__options-title { font-size: 1rem; text-transform: uppercase; letter-spacing: .12em; margin: 32px 0 12px; color: var(--mud-palette-text-secondary); }
.tp-options { list-style: none; padding: 0; margin: 0; border-top: var(--border); }
.tp-options li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: var(--border); }
.tp-options strong { white-space: nowrap; }

.tp-price-card {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  padding: 36px 28px; border-radius: 24px; color: var(--tp-cream);
  background: radial-gradient(500px 400px at 50% 20%, var(--tp-ink-2) 0%, var(--tp-ink) 75%);
  box-shadow: 0 24px 60px rgba(13, 20, 32, .35);
  border: 1px solid rgba(245, 238, 226, .14); /* keeps the card visible on the dark theme's ink background */
}
.tp-price-card__label { font-weight: 700; color: var(--tp-muted); }
.tp-price-card__badge { padding: 4px 12px; border-radius: 999px; background: var(--tp-red); color: #fff; font-weight: 700; font-size: .85rem; }
.tp-price-card__regular { color: var(--tp-muted); font-size: 1.25rem; }
.tp-price-card__price { font-family: var(--tp-display); font-size: 5.5rem; line-height: 1; color: var(--tp-yellow); }
.tp-price-card p { margin: 0 0 12px; color: var(--tp-muted); }
.tp-price-card .tp-price-card__fine { margin: 8px 0 0; font-size: .85rem; }

/* ---------- Final call to action ---------- */

.tp-cta {
  text-align: center; padding: 56px 28px; border-radius: 24px; color: var(--tp-cream);
  background: radial-gradient(900px 500px at 50% 0%, var(--tp-ink-2) 0%, var(--tp-ink) 70%);
  border: 1px solid rgba(245, 238, 226, .14);
}
.tp-cta h2 { font-family: var(--tp-display); font-weight: 400; text-transform: uppercase; font-size: clamp(2.2rem, 5vw, 3.4rem); margin: 16px 0 8px; }
.tp-cta p { margin: 0 0 28px; color: var(--tp-muted); font-size: 1.1rem; }

/* ---------- Palet previews (Components/Shop) ---------- */

.tp-svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.tp-palet { display: block; overflow: visible; }
/* The font of palet_breton.py, so the preview matches the printed digits. */
.tp-palet__text { font-family: "DejaVu Sans", Verdana, "Segoe UI", sans-serif; font-weight: 700; }

/* ---------- Configurator ---------- */

.tp-config__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.tp-config__preview { position: sticky; top: 88px; }
.tp-config__note { margin: 12px 4px 0; font-size: .85rem; color: var(--mud-palette-text-secondary); }

/* A plywood board, like the real one in the photos. */
.tp-board {
  padding: 28px 20px 24px; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #ead7b4 0%, #e2c99c 55%, #d9bd8b 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06), var(--shadow-soft);
}
.tp-board__hero { display: flex; justify-content: center; align-items: center; gap: 24px; min-height: 210px; }
/* The previews keep their pixel size on large screens and shrink with the viewport on small ones (the SVGs have a view box). */
.tp-board__hero .tp-palet { max-width: 46%; height: auto; }
.tp-board__hero .tp-palet + .tp-palet { max-width: 37%; } /* the petit keeps its 45/56 ratio */
.tp-board__set { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 20px; justify-items: center; }
.tp-board__palet { padding: 2px; border: 2px solid transparent; border-radius: 50%; background: none; cursor: pointer; line-height: 0; max-width: 100%; }
.tp-board__palet .tp-palet { max-width: 100%; height: auto; }
.tp-board__palet:hover { border-color: rgba(13, 20, 32, .25); }
.tp-board__palet--selected { border-color: var(--tp-ink); }
.tp-board__palet:focus-visible { outline: 3px solid var(--tp-red); outline-offset: 1px; }

.tp-config__steps { display: grid; gap: 16px; }
.tp-step { padding: 20px 22px 18px; }
.tp-step__title { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-family: var(--tp-display); font-weight: 400; font-size: 1.5rem; text-transform: uppercase; }
.tp-step__title span {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  font-family: Inter, sans-serif; font-size: .95rem; font-weight: 900; color: var(--tp-ink); background: var(--tp-yellow);
}
.tp-step__label { margin: 16px 0 8px; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mud-palette-text-secondary); }
.tp-step__help { margin: 6px 0 0; font-size: .85rem; color: var(--mud-palette-text-secondary); }

.tp-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.tp-swatch {
  width: 34px; height: 34px; padding: 0; border-radius: 50%; cursor: pointer;
  background: var(--swatch); border: 2px solid rgba(0, 0, 0, .18);
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, .18), inset 0 3px 5px rgba(255, 255, 255, .25);
  transition: transform .12s;
}
.tp-swatch:hover { transform: scale(1.08); }
.tp-swatch--selected { outline: 3px solid var(--mud-palette-primary); outline-offset: 2px; }
.tp-swatch:focus-visible { outline: 3px solid var(--tp-red); outline-offset: 2px; }
.tp-swatches__name { display: inline-block; margin-top: 6px; font-size: .85rem; color: var(--mud-palette-text-secondary); }

.tp-logos { display: flex; flex-wrap: wrap; gap: 8px; }
.tp-logo-choice {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 10px 6px; min-width: 76px;
  border: 2px solid var(--mud-palette-lines-default); border-radius: 12px; background: var(--mud-palette-surface);
  color: var(--mud-palette-text-primary); font: inherit; font-size: .8rem; cursor: pointer;
}
.tp-logo-choice--selected { border-color: var(--mud-palette-primary); }
.tp-logo-choice:focus-visible { outline: 3px solid var(--tp-red); outline-offset: 2px; }

.tp-texts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 10px; margin-bottom: 4px; }
.tp-step__choices .mud-radio { margin-right: 12px; }

.tp-summary { align-items: stretch; text-align: left; }
.tp-summary .tp-price-card__label, .tp-summary .tp-price-card__price { text-align: center; }
.tp-summary__lines { list-style: none; padding: 0; margin: 8px 0 4px; display: grid; gap: 8px; }
.tp-summary__lines li { display: flex; justify-content: space-between; gap: 12px; color: var(--tp-cream); }
.tp-summary__lines s { color: var(--tp-muted); margin-right: 6px; }
.tp-summary p { text-align: center; }
.tp-button[disabled] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- Cart, checkout, confirmation ---------- */

.tp-button--outline { border: 2px solid var(--mud-palette-text-primary); color: var(--mud-palette-text-primary); background: transparent; padding: 12px 24px; }
.tp-button[aria-disabled="true"] { opacity: .55; pointer-events: none; }

.tp-kit-thumb { display: flex; align-items: center; gap: 4px; flex: none; }

.tp-cart { list-style: none; padding: 0; margin: 24px 0; display: grid; gap: 12px; }
.tp-cart__item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: start;
  padding: 16px; border: var(--border); border-radius: var(--radius-lg); background: var(--mud-palette-surface);
}
.tp-cart__body p { margin: 4px 0 8px; font-size: .9rem; color: var(--mud-palette-text-secondary); line-height: 1.5; }
.tp-cart__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tp-cart__price { text-align: right; display: grid; gap: 2px; }
.tp-cart__price strong { font-size: 1.15rem; }
.tp-cart__price span { font-size: .8rem; color: var(--mud-palette-text-secondary); }
.tp-cart__summary { display: grid; gap: 12px; justify-items: end; text-align: right; }
.tp-cart__total { display: flex; gap: 16px; align-items: baseline; font-size: 1.1rem; }
.tp-cart__total strong { font-family: var(--tp-display); font-weight: 400; font-size: 2rem; }
.tp-cart__note { margin: 0; font-size: .9rem; color: var(--mud-palette-text-secondary); }

.tp-stepper { display: inline-flex; align-items: center; border: var(--border); border-radius: 999px; overflow: hidden; }
.tp-stepper button { width: 34px; height: 32px; border: 0; background: none; font-size: 1.1rem; cursor: pointer; color: var(--mud-palette-text-primary); }
.tp-stepper button:disabled { opacity: .35; cursor: default; }
.tp-stepper span { min-width: 28px; text-align: center; font-weight: 700; }

.tp-checkout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 24px; }
.tp-checkout__form { display: grid; gap: 16px; }
.tp-checkout__summary { position: sticky; top: 88px; }
.tp-terms { margin: 4px 0 0; color: var(--tp-cream); }
.tp-terms a { color: var(--tp-yellow); }
.tp-shipping .mud-radio { margin-bottom: 4px; }

.tp-confirmation { text-align: center; display: grid; justify-items: center; gap: 8px; }
.tp-confirmation > p { color: var(--mud-palette-text-secondary); max-width: 520px; }
.tp-confirmation__lines { text-align: left; color: var(--mud-palette-text-secondary); font-size: .9rem; line-height: 1.6; }

.tp-order-facts { display: grid; grid-template-columns: auto auto; gap: 6px 24px; margin: 16px 0 0; text-align: left; }
.tp-order-facts dt { color: var(--mud-palette-text-secondary); }
.tp-order-facts dd { margin: 0; font-weight: 700; }

.tp-status { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .8rem; font-weight: 700; background: var(--mud-palette-action-default-hover); }
.tp-status--paid { background: #fdf3c4; color: #6b5100; }
.tp-status--printing { background: #dbe8fb; color: #163f7f; }
.tp-status--shipped, .tp-status--delivered { background: #d9f2e1; color: #1d6b38; }
.tp-status--cancelled { background: #fbdcdb; color: #8f1d1a; }

/* ---------- Admin ---------- */

.tp-admin-order { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tp-admin-order p { margin: 0; line-height: 1.6; }
.tp-board--compact { padding: 16px; display: flex; align-items: center; gap: 16px; }
.tp-board--compact .tp-board__set { margin: 0; flex: 1; }
.tp-board__hero--small { min-height: 0; }
.tp-board__hero--small .tp-palet { max-width: none; }
.tp-workshop { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: .9rem; }
.tp-workshop th, .tp-workshop td { text-align: left; padding: 6px 8px; border-bottom: var(--border); }
.tp-workshop th { color: var(--mud-palette-text-secondary); font-weight: 600; }
.tp-workshop__petit td { font-weight: 700; }
.tp-workshop__notes { margin: 12px 0 0; padding-left: 18px; color: var(--mud-palette-text-secondary); font-size: .9rem; }

.tp-color-chip { display: inline-block; width: 22px; height: 22px; border-radius: 50%; background: var(--swatch); border: 1px solid rgba(0, 0, 0, .2); }
.tp-color-chip--large { width: 40px; height: 40px; flex: none; }
.tp-color-chip--small { width: 12px; height: 12px; vertical-align: -1px; margin-right: 4px; }
.tp-hex { color: var(--mud-palette-text-secondary); }

/* ---------- Small screens ---------- */

@media (max-width: 960px) {
  .tp-hero__inner, .tp-arguments, .tp-photos, .tp-kit { grid-template-columns: 1fr; }
  .tp-steps { grid-template-columns: repeat(2, 1fr); }
  .tp-hero { padding: 48px 0 56px; }
  .tp-config__layout { grid-template-columns: 1fr; }
  /* On phones the preview scrolls with the page; sticking it would hide the form. */
  .tp-config__preview { position: static; }
  .tp-checkout, .tp-admin-order { grid-template-columns: 1fr; }
  .tp-checkout__summary { position: static; }
}

@media (max-width: 600px) {
  .tp-steps { grid-template-columns: 1fr; }
  .tp-price-card__price { font-size: 4.5rem; }
  .tp-texts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tp-board { padding: 20px 10px 16px; }
  .tp-board__set { gap: 2px; }
  .tp-cart__item { grid-template-columns: auto minmax(0, 1fr); }
  .tp-cart__price { grid-column: 2; text-align: left; }
  .tp-board--compact { flex-direction: column; }
  .tp-hex { display: none; }
  .tp-workshop th, .tp-workshop td { padding: 6px 4px; }
  /* The kit hides the brand name on phones; Ti Palet keeps it, the name is short. */
  .brand-logo__name { display: inline; font-size: 1.3rem; }
}