/* Booking-only look "stripe" (Frizerie): barbershop pole. Navy, brick red and cream; diagonal pole stripes under the header, on
   picked items and at the ends of the main button; tickets with punch notches and dashed tear lines; Alfa Slab One titles,
   Oswald capitals for labels. Colors come from the palette look.js sets on <html> (--paper, --card, --foreground, --muted,
   --accent, --accent-contrast); the fonts from --font-display / --font-body (fonts: stripe.css).
   Only CSS: no markup or script. Every rule is keyed on html[data-style="stripe"] so it outranks the base in booking-only.css.
   Notches are masks: they only cut corners/sides (padding keeps text clear of them) and simply don't show where masks aren't supported. */

html[data-style="stripe"] {
  --st-ink: var(--foreground, #14213d);
  --st-muted: var(--muted, #4b5570);
  --st-accent: var(--accent, #a8322a);
  --st-card: var(--card, #fbf6ea);
  --st-paper: var(--paper, #f2ead8);
  --st-on: var(--accent-contrast, #fbf6ea);
  --st-faint: color-mix(in srgb, var(--st-ink) 30%, transparent);
  --st-pole: repeating-linear-gradient(-45deg, var(--st-accent) 0 6px, var(--st-card) 6px 12px, var(--st-ink) 12px 18px, var(--st-card) 18px 24px);
  --st-pole-fine: repeating-linear-gradient(-45deg, var(--st-card) 0 4px, var(--st-ink) 4px 8px);
  --st-notch-sides: radial-gradient(circle 7px at 0 50%, #0000 6.5px, #000 7px) left / 51% 100% no-repeat, radial-gradient(circle 7px at 100% 50%, #0000 6.5px, #000 7px) right / 51% 100% no-repeat;
  --st-notch-corners: radial-gradient(circle 8px at 0 0, #0000 7.5px, #000 8px) top left / 51% 51% no-repeat, radial-gradient(circle 8px at 100% 0, #0000 7.5px, #000 8px) top right / 51% 51% no-repeat, radial-gradient(circle 8px at 0 100%, #0000 7.5px, #000 8px) bottom left / 51% 51% no-repeat, radial-gradient(circle 8px at 100% 100%, #0000 7.5px, #000 8px) bottom right / 51% 51% no-repeat;
}

/* ---------- Page: pole stripe along the top edge ---------- */
html[data-style="stripe"] .booking {
  padding-top: max(1.75rem, env(safe-area-inset-top));
  background: var(--st-pole) top / 100% 8px no-repeat, var(--st-paper);
  font-family: var(--font-body);
}
@media (min-width: 64em) { html[data-style="stripe"] .booking { padding-top: 3.5rem; } }

html[data-style="stripe"] .booking :is(button, a, input, textarea):focus-visible { outline: 2px solid var(--st-accent); outline-offset: 2px; }

/* ---------- Header: name, red tagline, double-ring round button, pole stripe over a double rule ---------- */
html[data-style="stripe"] .app__bar { padding-bottom: 1.15rem; border-bottom: 3px double var(--st-ink); }
html[data-style="stripe"] .app__bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 6px; background: var(--st-pole); }
html[data-style="stripe"] .brand__name { font: 600 clamp(1rem, 0.9rem + 0.5vw, 1.2rem) / 1.1 var(--font-body); letter-spacing: 0.2em; text-indent: 0.2em; color: var(--st-ink); }
html[data-style="stripe"] .brand__tag { margin-top: 0.4rem; font-size: 0.65rem; font-weight: 500; letter-spacing: 0.34em; text-indent: 0.34em; color: var(--st-accent); overflow-wrap: anywhere; }
html[data-style="stripe"] .app__btn { color: var(--st-ink); }
html[data-style="stripe"] .app__more { background: var(--st-card); border: 4px double var(--st-ink); }
html[data-style="stripe"] .app__more .icon { width: 1.25rem; height: 1.25rem; }
html[data-style="stripe"] .app__back:hover { background: transparent; }
html[data-style="stripe"] .app__more:hover { background: var(--st-card); }
@media (hover: hover) {
  html[data-style="stripe"] .app__back:hover { background: color-mix(in srgb, var(--st-ink) 8%, transparent); }
  html[data-style="stripe"] .app__more:hover { border-color: var(--st-accent); color: var(--st-accent); }
}

/* ---------- Step tracker: square tickets joined by double rules ---------- */
html[data-style="stripe"] .booking .steps { margin-top: 1.5rem; }
html[data-style="stripe"] .booking .step + .step::before { top: calc(0.95rem - 2.5px); box-sizing: border-box; height: 5px; background: none; border-top: 1px solid var(--st-muted); border-bottom: 1px solid var(--st-muted); }
html[data-style="stripe"] .booking .step.is-done + .step::before,
html[data-style="stripe"] .booking .step.is-done + .step.is-current::before { background: none; border-color: var(--st-accent); }
html[data-style="stripe"] .booking .step__num { border: 1.5px solid var(--st-ink); border-radius: 4px; background: var(--st-card); color: var(--st-muted); font: 600 0.8rem / 1 var(--font-body); }
html[data-style="stripe"] .booking .step__check { stroke-width: 2.2; }
html[data-style="stripe"] .booking .step.is-current .step__num { border-color: var(--st-accent); background: var(--st-accent); color: var(--st-on); box-shadow: 0 0 0 3px var(--st-paper), 0 0 0 4.5px var(--st-accent); }
html[data-style="stripe"] .booking .step.is-done .step__num,
html[data-style="stripe"] .booking .steps:has(.step:last-child:is(.is-current, .is-done)) .step.is-done .step__num { border-color: var(--st-ink); background: var(--st-ink); color: var(--st-card); }
html[data-style="stripe"] .booking .step__label { font-size: 0.625rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--st-muted); }
html[data-style="stripe"] .booking .step.is-current .step__label,
html[data-style="stripe"] .booking .step.is-done .step__label { color: var(--st-ink); }

/* ---------- Titles: slab face with a short pole stripe underneath ---------- */
html[data-style="stripe"] .booking .panel__title { font: 400 clamp(1.7rem, 1.3rem + 2.6vw, 2.4rem) / 1.08 var(--font-display); letter-spacing: 0; color: var(--st-ink); overflow-wrap: break-word; }
html[data-style="stripe"] .booking .panel__title::after { content: ""; display: block; width: 3.5rem; height: 6px; margin-top: 0.75rem; background: var(--st-pole); }
html[data-style="stripe"] .panel__titlebar { flex-wrap: wrap; align-items: flex-end; }
html[data-style="stripe"] .panel__date { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--st-accent); }

/* ---------- Step 1: service tickets with side notches and a dashed tear stub for the price ---------- */
html[data-style="stripe"] .booking .service {
  grid-template-columns: 1.6rem minmax(0, 1fr) auto auto; gap: 0.7rem; padding: 1rem 0.85rem 1rem 1.25rem;
  border: 2px solid var(--st-ink); border-radius: 4px; background: var(--st-card);
  -webkit-mask: var(--st-notch-sides); mask: var(--st-notch-sides);
}
html[data-style="stripe"] .booking .service__icon { color: var(--st-accent); stroke-width: 1.75; }
html[data-style="stripe"] .booking .service__name { font: 500 1rem / 1.25 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; overflow-wrap: anywhere; }
html[data-style="stripe"] .booking .service__duration { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--st-muted); }
html[data-style="stripe"] .booking .service__price { align-self: stretch; display: flex; align-items: center; margin-block: -1rem; padding-left: 0.85rem; border-left: 1.5px dashed var(--st-muted); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.04em; color: var(--st-ink); }
html[data-style="stripe"] .booking .service__arrow { color: var(--st-accent); }
html[data-style="stripe"] .booking .service.is-selected { border-color: var(--st-accent); background: var(--st-pole) top / 100% 6px no-repeat, var(--st-card); }
html[data-style="stripe"] .booking .service.is-selected .service__price { border-left-color: var(--st-accent); color: var(--st-accent); }
html[data-style="stripe"] .booking .service:focus-visible { outline-offset: -6px; }
@media (hover: hover) {
  html[data-style="stripe"] .booking .service:hover { border-color: var(--st-accent); }
  html[data-style="stripe"] .booking .service:hover .service__price { color: var(--st-accent); border-left-color: var(--st-accent); }
}
/* Loading: dashed empty tickets */
html[data-style="stripe"] .service--skeleton { border: 1.5px dashed var(--st-faint); border-radius: 4px; background: linear-gradient(100deg, var(--st-card) 30%, color-mix(in srgb, var(--st-card) 92%, var(--st-ink)) 50%, var(--st-card) 70%) 0 0 / 300% 100%; }
html[data-style="stripe"] .panel__error { padding: 0.65rem 0.85rem; border: 1.5px dashed var(--st-accent); border-radius: 4px; background: color-mix(in srgb, var(--st-accent) 7%, var(--st-card)); font-size: 0.85rem; letter-spacing: 0.02em; color: var(--st-accent); }

/* ---------- "Cu cine?" and extras: small tickets ---------- */
html[data-style="stripe"] .booking .addons__title { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--st-muted); }
html[data-style="stripe"] .booking .addons__title span { opacity: 1; }
html[data-style="stripe"] .booking .addon { border: 1.5px solid var(--st-ink); border-radius: 4px; background: var(--st-card); color: var(--st-ink); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
html[data-style="stripe"] .booking .addon__meta { opacity: 1; color: var(--st-muted); letter-spacing: 0.04em; }
html[data-style="stripe"] .booking .addon[aria-pressed="true"] { padding-bottom: 0.7rem; border-color: var(--st-accent); background: var(--st-pole-fine) bottom / 100% 4px no-repeat, var(--st-accent); color: var(--st-on); }
html[data-style="stripe"] .booking .addon[aria-pressed="true"] .addon__meta { color: var(--st-on); }
@media (hover: hover) {
  html[data-style="stripe"] .booking .addon:not([aria-pressed="true"]):hover { border-color: var(--st-accent); color: var(--st-accent); }
}
html[data-style="stripe"] .booking .model-chip { border: 1.5px dashed var(--st-accent); border-radius: 4px; background: var(--st-card); font-size: 0.8rem; letter-spacing: 0.04em; }
html[data-style="stripe"] .booking .model-chip__text { color: var(--st-muted); text-transform: uppercase; }
html[data-style="stripe"] .booking .model-chip__text strong { font-weight: 600; color: var(--st-ink); }
html[data-style="stripe"] .booking .model-chip__thumb .media { border-radius: 2px; }
html[data-style="stripe"] .booking .model-chip__clear { color: var(--st-accent); }

/* ---------- Step 2: calendar ---------- */
html[data-style="stripe"] .cal__month { font-size: 0.95rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--st-accent); }
html[data-style="stripe"] .cal__step { border: 1.5px solid var(--st-ink); border-radius: 4px; background: var(--st-card); color: var(--st-ink); }
html[data-style="stripe"] .cal__step:hover:not(:disabled) { background: var(--st-card); }
html[data-style="stripe"] .cal__step:disabled { opacity: 0.4; }
@media (hover: hover) {
  html[data-style="stripe"] .cal__step:hover:not(:disabled) { background: var(--st-ink); color: var(--st-card); }
}
html[data-style="stripe"] .cal__dow { font-size: 0.66rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--st-muted); }
html[data-style="stripe"] .day { border: 1px solid var(--st-faint); border-radius: 4px; background: var(--st-card); font: 500 0.95rem / 1 var(--font-body); color: var(--st-ink); }
html[data-style="stripe"] .day:disabled { border-color: transparent; background: none; color: var(--st-muted); text-decoration: line-through 1.5px; cursor: default; }
html[data-style="stripe"] .day[data-state="outside"] { text-decoration: none; }
html[data-style="stripe"] .day--blank { visibility: hidden; }
html[data-style="stripe"] .day--today:not([aria-pressed="true"]) { box-shadow: inset 0 0 0 1.5px var(--st-accent); }
html[data-style="stripe"] .day[aria-pressed="true"] { border-color: var(--st-accent); background: var(--st-accent); color: var(--st-on); font-weight: 600; box-shadow: 0 0 0 2px var(--st-paper), 0 0 0 3.5px var(--st-accent); }
@media (hover: hover) {
  html[data-style="stripe"] .day:hover:not(:disabled):not([aria-pressed="true"]) { border-color: var(--st-accent); background: var(--st-card); box-shadow: inset 0 0 0 1px var(--st-accent); }
}
html[data-style="stripe"] .day--skeleton { border: 1px dashed var(--st-faint); background: var(--st-card); }
/* Busy dots: the shape tells the load too (circle free, diamond partly busy, square almost full) */
html[data-style="stripe"] [data-load="low"] { --load: #2f6b4a; }
html[data-style="stripe"] [data-load="mid"] { --load: #9a5f0c; }
html[data-style="stripe"] [data-load="high"] { --load: var(--st-accent); }
html[data-style="stripe"] .day[data-load]::after { bottom: 0.4rem; border-radius: 50%; }
html[data-style="stripe"] .day[data-load="mid"]::after,
html[data-style="stripe"] .cal__legend span[data-load="mid"]::before { border-radius: 0; transform: rotate(45deg); }
html[data-style="stripe"] .day[data-load="high"]::after,
html[data-style="stripe"] .cal__legend span[data-load="high"]::before { border-radius: 0; }
html[data-style="stripe"] .day[aria-pressed="true"]::after { background: var(--st-on); }
html[data-style="stripe"] .cal__legend { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--st-muted); }
html[data-style="stripe"] .cal__legend span::before { border-radius: 50%; }

/* ---------- Step 3: times ---------- */
html[data-style="stripe"] .booking .time:not(:disabled) { border: 1.5px solid var(--st-ink); border-radius: 4px; background: var(--st-card); font-size: 1rem; font-weight: 500; letter-spacing: 0.04em; color: var(--st-ink); }
html[data-style="stripe"] .booking .time:disabled { border: 1.5px dashed var(--st-faint); border-radius: 4px; background: none; font-size: 1rem; letter-spacing: 0.04em; color: var(--st-muted); text-decoration: line-through 2px var(--st-accent); }
html[data-style="stripe"] .booking .time[aria-pressed="true"],
html[data-style="stripe"] .booking .time[aria-selected="true"] { border-color: var(--st-accent); background: var(--st-pole-fine) bottom / 100% 6px no-repeat, var(--st-accent); font-weight: 600; color: var(--st-on); }
@media (hover: hover) {
  html[data-style="stripe"] .booking .time:hover:not(:disabled):not([aria-pressed="true"]) { border-color: var(--st-accent); box-shadow: inset 0 -3px 0 var(--st-accent); }
}

/* ---------- Main button: navy ticket, notched corners, pole stripes at both ends ---------- */
html[data-style="stripe"] .booking .cta,
html[data-style="stripe"] .booking .confirm-done__actions .btn {
  min-height: 3.5rem; padding: 0.6rem 1.9rem; gap: 0.6rem; border: 0; border-radius: 4px;
  background: var(--st-pole) left / 20px 100% no-repeat, var(--st-pole) right / 20px 100% no-repeat, var(--st-ink);
  color: var(--st-card); font: 600 1rem / 1.25 var(--font-body); letter-spacing: 0.16em; text-align: center; text-transform: uppercase;
  white-space: normal; filter: none;
  -webkit-mask: var(--st-notch-corners); mask: var(--st-notch-corners);
}
html[data-style="stripe"] .booking .cta:not(:disabled):hover { filter: none; }
html[data-style="stripe"] .booking .cta:disabled { opacity: 0.4; }
html[data-style="stripe"] .booking .cta.is-busy { opacity: 0.7; }
html[data-style="stripe"] .booking .cta:focus-visible,
html[data-style="stripe"] .booking .confirm-done__actions .btn:focus-visible { outline: 2px solid var(--st-card); outline-offset: -6px; }
@media (hover: hover) {
  html[data-style="stripe"] .booking .cta:not(:disabled):hover,
  html[data-style="stripe"] .booking .confirm-done__actions .btn:hover { background: var(--st-pole) left / 20px 100% no-repeat, var(--st-pole) right / 20px 100% no-repeat, var(--st-accent); }
}

/* ---------- Step 4: ticket summary, form ---------- */
html[data-style="stripe"] .booking .confirm__summary { gap: 0; padding: 0; border: 1.5px solid var(--st-ink); border-radius: 4px; background: var(--st-card); -webkit-mask: var(--st-notch-corners); mask: var(--st-notch-corners); }
html[data-style="stripe"] .booking .confirm__row { gap: 0.9rem; padding: 0.85rem 1.1rem; }
html[data-style="stripe"] .booking .confirm__row + .confirm__row { border-top: 1.5px dashed var(--st-muted); }
html[data-style="stripe"] .booking .confirm__row > .icon { width: 1.5rem; height: 1.5rem; flex: none; color: var(--st-accent); stroke-width: 1.5; }
html[data-style="stripe"] .booking .confirm__value { font: 500 0.95rem / 1.3 var(--font-body); letter-spacing: 0.03em; overflow-wrap: anywhere; color: var(--st-ink); }
html[data-style="stripe"] .booking .confirm__value small { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--st-muted); }
html[data-style="stripe"] .booking .confirm__price { flex: none; font-size: 1rem; font-weight: 600; letter-spacing: 0.04em; color: var(--st-accent); }
html[data-style="stripe"] .booking .confirm__avatar { width: 2.5rem; height: 2.5rem; border: 1.5px solid var(--st-ink); border-radius: 4px; background: var(--st-paper); color: var(--st-ink); font-family: var(--font-display); }

html[data-style="stripe"] .booking .field label { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--st-muted); }
html[data-style="stripe"] .booking .field__optional { opacity: 1; }
html[data-style="stripe"] .booking .field input,
html[data-style="stripe"] .booking .field textarea { border: 1.5px solid var(--st-ink); border-radius: 4px; background: var(--st-card); font-family: var(--font-body); font-size: 1.05rem; letter-spacing: 0.02em; color: var(--st-ink); }
html[data-style="stripe"] .booking .field input { min-height: 3.1rem; }
html[data-style="stripe"] .booking .field input::placeholder,
html[data-style="stripe"] .booking .field textarea::placeholder { color: var(--st-muted); opacity: 1; }
html[data-style="stripe"] .booking .field input:required:valid,
html[data-style="stripe"] .booking .field textarea:not(:placeholder-shown) { box-shadow: inset 0 -3px 0 var(--st-accent); }
html[data-style="stripe"] .booking .field input:focus,
html[data-style="stripe"] .booking .field textarea:focus { border-color: var(--st-accent); outline: 2px solid var(--st-accent); outline-offset: 2px; box-shadow: inset 0 -3px 0 var(--st-accent); }
html[data-style="stripe"] .booking .field.is-invalid input,
html[data-style="stripe"] .booking .field.is-invalid textarea { border-color: var(--st-accent); background: color-mix(in srgb, var(--st-accent) 7%, var(--st-card)); box-shadow: inset 0 0 0 1px var(--st-accent); }
html[data-style="stripe"] .booking .field__error { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.03em; color: var(--st-accent); }
html[data-style="stripe"] .booking .field__error::before { content: "! "; font-weight: 700; }
html[data-style="stripe"] .form-error { padding: 0.65rem 0.85rem; border: 1.5px dashed var(--st-accent); border-radius: 4px; background: color-mix(in srgb, var(--st-accent) 7%, var(--st-card)); font-size: 0.85rem; letter-spacing: 0.02em; color: var(--st-accent); }
html[data-style="stripe"] .remember { font-size: 0.75rem; letter-spacing: 0.04em; color: var(--st-muted); }
html[data-style="stripe"] .booking .link-btn { text-decoration-color: var(--st-accent); text-decoration-thickness: 1.5px; font-weight: 500; letter-spacing: 0.06em; color: var(--st-ink); }
html[data-style="stripe"] .panel__error .link-btn,
html[data-style="stripe"] .form-error .link-btn { color: inherit; }
@media (hover: hover) { html[data-style="stripe"] .booking .link-btn:hover { color: var(--st-accent); } }
html[data-style="stripe"] .booking .confirm__note { font-size: 0.78rem; letter-spacing: 0.02em; color: var(--st-muted); }
html[data-style="stripe"] .booking .confirm__note a { text-decoration: underline; text-decoration-color: var(--st-accent); text-underline-offset: 3px; color: var(--st-ink); }
html[data-style="stripe"] .salon-card { padding-top: 0.8rem; border-top: 3px double var(--st-ink); }
html[data-style="stripe"] .salon-card__name { font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--st-ink); }
html[data-style="stripe"] .salon-card__row .icon { color: var(--st-accent); }
html[data-style="stripe"] .salon-card__row a { text-decoration-color: var(--st-accent); color: var(--st-ink); }

/* ---------- After booking: a stamped ticket ---------- */
html[data-style="stripe"] .booking .confirm-done { padding: 2.25rem 1.25rem 1.5rem; border: 1.5px solid var(--st-ink); border-radius: 4px; background: var(--st-pole) top / 100% 8px no-repeat, var(--st-card); -webkit-mask: var(--st-notch-corners); mask: var(--st-notch-corners); }
html[data-style="stripe"] .booking .confirm-done__icon { width: 2.6rem; height: 2.6rem; padding: 0.5rem; border: 2px solid var(--st-accent); border-radius: 50%; color: var(--st-accent); stroke-width: 2.2; }
html[data-style="stripe"] .booking .confirm-done__title { font: 400 clamp(1.6rem, 1.2rem + 2.2vw, 2.1rem) / 1.1 var(--font-display); color: var(--st-ink); overflow-wrap: break-word; }
html[data-style="stripe"] .booking .confirm-done__text { color: var(--st-muted); font-size: 1rem; letter-spacing: 0.02em; }
html[data-style="stripe"] .booking .confirm-done__actions { flex-direction: column; align-items: center; gap: 0.35rem; }
html[data-style="stripe"] .booking .confirm-done__actions .btn { width: 100%; margin-bottom: 0.5rem; }
html[data-style="stripe"] .booking .confirm-done__actions .link-btn { justify-content: center; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; }

/* ---------- "Programarea ta" (/programare/): same title face, kept inside 320px ---------- */
html[data-style="stripe"] .manage h1 { font-size: clamp(1.7rem, 1.3rem + 2.6vw, 2.4rem); letter-spacing: 0; overflow-wrap: break-word; }
html[data-style="stripe"] .manage__box,
html[data-style="stripe"] .manage .confirm__summary { border-radius: 4px; }

/* ---------- Footer / #contact: pole stripe on top, hours as a dashed price list ---------- */
html[data-style="stripe"] .footer.theme-dark { padding-top: calc(1.5rem + 8px); border-top: 0; background: var(--st-pole) top / 100% 8px no-repeat, var(--st-card); font-family: var(--font-body); color: var(--st-ink); }
html[data-style="stripe"] .footer__heading { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.24em; color: var(--st-accent); }
html[data-style="stripe"] .footer__hours dl > div { padding-block: 0.3rem; border-bottom: 1px dashed var(--st-faint); }
html[data-style="stripe"] .footer__hours dl > div:last-child { border-bottom: 0; }
html[data-style="stripe"] .footer__hours dt { text-transform: uppercase; letter-spacing: 0.08em; color: var(--st-muted); }
html[data-style="stripe"] .footer__hours dd { font-weight: 500; color: var(--st-ink); }
html[data-style="stripe"] .footer__address { color: var(--st-ink); }
html[data-style="stripe"] .footer__links a { font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--st-ink); }
html[data-style="stripe"] .footer__links .icon { color: var(--st-accent); }
html[data-style="stripe"] .footer__anpc { border-top: 3px double var(--st-ink); }
html[data-style="stripe"] .footer__legal { font-size: 0.75rem; letter-spacing: 0.03em; color: var(--st-muted); }
html[data-style="stripe"] .footer__legal a { text-decoration-color: var(--st-accent); color: var(--st-ink); }
html[data-style="stripe"] .footer a:focus-visible { outline: 2px solid var(--st-accent); outline-offset: 2px; }
@media (hover: hover) { html[data-style="stripe"] .footer__links a:hover { color: var(--st-accent); } }

/* ---------- Motion + narrow phones ---------- */
@media (prefers-reduced-motion: reduce) {
  html[data-style="stripe"] .service--skeleton, html[data-style="stripe"] .day--skeleton { animation: none; }
}
@media (max-width: 22.5em) {
  html[data-style="stripe"] .brand__name { letter-spacing: 0.12em; text-indent: 0.12em; }
  html[data-style="stripe"] .brand__tag { letter-spacing: 0.2em; text-indent: 0.2em; }
  html[data-style="stripe"] .booking .step__label { letter-spacing: 0.04em; }
  html[data-style="stripe"] .cal__dow { letter-spacing: 0.04em; }
  html[data-style="stripe"] .booking .cta, html[data-style="stripe"] .booking .confirm-done__actions .btn { padding-inline: 1.7rem; letter-spacing: 0.1em; }
  html[data-style="stripe"] .booking .service { gap: 0.55rem; padding-left: 1.1rem; }
  html[data-style="stripe"] .booking .service__name { letter-spacing: 0.03em; }
}