/* ToyPlus page CSS: only what the kit lacks (Taste: page CSS inside visuals, the enquiry form and card groups) */
.nav__logo img { height: 44px; width: auto; display: block; }
.wa-i { width: 18px; height: 18px; flex: none; }
.crumbs { font-size: var(--t-small); color: var(--muted); margin-bottom: var(--s-4); }
.crumbs a { color: inherit; text-underline-offset: 3px; }

/* the hero's enquiry: two choices and the WhatsApp button (Impeccable roll: the action in its working form) */
.ask { display: grid; gap: var(--s-4); margin-top: var(--s-6); }
.ask__row { display: grid; gap: 6px; max-width: 420px; }
.ask select { appearance: none; -webkit-appearance: none; height: 48px; padding: 0 44px 0 16px; border-radius: 12px; font: 500 16px/1 var(--font-text); color: var(--ink);
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%2313224a' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 16px center / 14px;
  border: 1px solid color-mix(in oklab, var(--ink) 24%, transparent); cursor: pointer; transition: border-color 150ms cubic-bezier(.2, .7, .2, 1); }
.ask select:hover { border-color: var(--ink); }
.ask select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ask .btn-row { margin-top: var(--s-2); }
.ask__note { color: var(--muted); margin: 0; }
/* below 1024px, and on short screens, the hero keeps the button and drops the two choices so it ends at the fold */
@media (max-height: 800px) and (min-width: 1024px) { .ask__row, .ask__note { display: none; } }
/* a phone keeps the two choices: the lead and the second button give way, the photo is shorter */
@media (max-width: 1023px) { .ask__note, .ask .btn--secondary { display: none; } .ask { gap: 12px; margin-top: var(--s-4); } .ask select { height: 44px; } .ask__row { max-width: none; } }
@media (max-width: 639px) { .hero--photo { --photo: 30svh; } }

/* product cards: the code and the three figures buyers compare */
.card--product .specs { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.card--product .specs span:first-child { font-weight: 600; }
.panel > .frame__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.panel--top > .frame__img { position: absolute; }

/* the dealer band's photograph: one frame, the page radius */
.dealer__photo { height: min(600px, calc(100svh - 300px)); border-radius: var(--r-lg); overflow: hidden; }
.dealer__photo > img { width: 100%; height: 100%; object-fit: cover; }

/* product page rows */
dl.rows { display: grid; margin: 0; }
dl.rows > div { display: flex; justify-content: space-between; gap: var(--s-5); padding: var(--s-5) 0; border-top: 1px solid var(--line); }
dl.rows dt { color: var(--muted); }
dl.rows dd { margin: 0; font-weight: 600; text-align: right; }

/* browser surfaces in the palette (Impeccable craft floor) */
::selection { background: color-mix(in oklab, var(--p-accent) 22%, transparent); color: var(--p-ink); }
html { accent-color: var(--p-accent); caret-color: var(--p-accent); }

/* the hero h1 holds three lines in the 628 box: the kit's 80px sets this category's words on four */
.hero--photo h1 { font-size: clamp(42px, 4.6vw, 66px); max-width: none; }
/* four-up product rows hold two lines of specs */
.card--product h3 { font-size: 17px; }
.card--product .specs { font-size: 14px; line-height: 20px; }

/* products: 16:10 photos; two up below 1024px so the eight fit one screen (two on a tablet) */
#products .panel--wide { aspect-ratio: 16 / 9; }
@media (max-width: 1023px) {
  #products .grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
  #products .grid > .card { grid-column: auto / span 6; }
}
@media (min-width: 640px) and (max-width: 1023px) { #products { --h: 2; } }
@media (max-width: 639px) { #products .card { --c-pad: 14px; } #products .card h3 { font-size: 15px; line-height: 20px; } #products .specs { font-size: 13px; line-height: 18px; gap: 0 8px; } }

/* the one brand band: brand blue deepened so body text reads 7.5:1 */
#dealers.ground-brand { --bg: #ffc83d; background: #ffc83d; --ink: #13224a; --muted: #3b4566; --line: rgb(19 34 74 / .2); --surface: #ffd466; color: #13224a; }

/* pinned places at rest: one screen on a tablet (shorter visuals), two on a phone with the steps centred */
@media (min-width: 640px) and (max-width: 1023px) { main > section#places[data-moment]:not(.is-live) .mo-pc__visual > img { max-height: 19svh; } #places .mo-pc__steps { gap: var(--s-5); } }
@media (max-width: 639px) { main > section#places[data-moment]:not(.is-live) { min-height: 0; } [data-moment="pinned-chapters"]:not(.is-live) .mo-pc__visual > img { aspect-ratio: 4 / 3; max-height: none; } }

/* the close on a phone: one screen (the products column is the nav's, the logo is in the bar) */
@media (max-width: 639px) {
  footer.closing .closing__links .span-4, footer.closing .footer__col:nth-of-type(2) { display: none; }
  footer.closing .closing__links .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 16px; }
}

/* tablets: a section keeps whole screens (two for the products and the pinned places) */
@media (min-width: 640px) and (max-width: 1279px) { main > section#products { min-height: calc(2 * 100svh); } }
/* the phone hero ends at the fold */
@media (max-width: 639px) { .hero--photo h1 { font-size: 40px; } .hero--photo .hero__lead { font-size: 16px; line-height: 1.4; } }
/* the band's second action as a plain link: one pair of button styles on the page */
.text-link { display: inline-block; padding-block: 10px; color: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; align-self: center; }
.text-link:hover { text-decoration-thickness: 2px; }
.dealer__more { margin-top: var(--s-5); }
@media (max-width: 1023px) { .dealer__photo { height: auto; aspect-ratio: 4 / 3; } }
/* a missing product photo: the code on the panel's ground */
.panel.is-missing { display: grid; place-items: center; }
.panel.is-missing::before { content: attr(data-code); font: 600 15px/1 var(--font-text); color: var(--muted); letter-spacing: .02em; }

/* weight and colour from moulded plastic: bolder titles and figures, a plastic colour per place step */
.card > h3, .card__title { font-weight: 700; }
.card--product .specs { font-weight: 500; font-variant-numeric: tabular-nums; }
#products .section-head--split { margin-bottom: 24px; }
.mo-wh__text { font-size: clamp(32px, 4.2vw, 60px); max-width: 1100px; }
#places .mo-pc__step:nth-child(1) { --accent: #1a66db; }
#places .mo-pc__step:nth-child(2) { --accent: #22b05b; }
#places .mo-pc__step:nth-child(3) { --accent: #f2513b; }
#places .mo-pc__step h3 { font-weight: 700; }

/* live WordPress: undo Elementor kit heading styles (.elementor-kit-23 h1) */
body.elementor-kit-23 h1 { color: inherit; font-family: var(--font-display); font-weight: var(--display-weight); text-transform: none; }