/* Onyx & Aurum — the booking page. Tokens only; no literal colors. This sheet also has to tame a stylesheet the shop does not own: the Booksy loader injects https://booksy.com/widget.css into , which sizes the iframe at a fixed 770x660 and knows nothing about this layout. Everything under "The Booksy frame" is an override of that, and it is deliberately the only place in the site where !important appears — a third-party sheet that loads after ours cannot be outranked by specificity alone. */ /* ---- The pre-open notice ---- */ .book-notice { border: 1px solid var(--line); border-left: 2px solid var(--accent); background: var(--surface-alt); padding: clamp(1rem, 3vw, 1.6rem) clamp(1.1rem, 3.5vw, 1.9rem); max-width: 62ch; } .book-notice-kick { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin: 0 0 0.4rem; } .book-notice p:last-child { margin: 0; color: var(--ink-soft); } /* ---- The Booksy frame ---- */ .book-frame { /* The widget's own container is inserted as a child of this element, before the script tag, so this is the box the iframe has to live inside. */ border: 1px solid var(--line); background: var(--surface-alt); padding: clamp(0.5rem, 2vw, 1rem); /* Booksy's calendar has its own internal scroll; this only catches the case where their minimum width beats a very narrow phone. */ overflow-x: auto; } .book-frame .booksy-widget-container { width: 100%; margin: 0; } .book-frame iframe { width: 100% !important; min-width: 0 !important; /* 🔴 min-height, NEVER height. The loader auto-sizes the frame: its onResize handler sets `iframe.style.height` inline from the height the Booksy app reports for its own content. An inline `height` beats a stylesheet rule, so a floor set with min-height coexists with it (the floor stops a collapse before the first resize message arrives, Booksy grows it after). Set `height` here instead and you either fight that inline value or freeze the frame at a size that clips the booking flow. 660px is the loader's own default; the viewport-based floor gives the calendar room on a phone without a second scrollbar on a laptop. Checked at 390px on 2026-09-12: the app reflows to a stacked layout and stays inside the box. */ min-height: clamp(660px, 78vh, 900px) !important; border: 0 !important; display: block; color-scheme: light; /* the Booksy flow is a light UI; stop a dark-mode UA repainting it */ } .book-fallback-note { color: var(--ink-soft); margin: 0 0 0.9rem; } .book-escape { margin: 1rem 0 0; font-size: 0.92rem; color: var(--ink-muted); } /* ---- What booking commits you to ---- */ .book-terms { list-style: none; margin: 0; padding: 0; max-width: 70ch; } .book-terms li { display: grid; grid-template-columns: minmax(9.5rem, 15rem) 1fr; gap: 0.4rem 1.6rem; padding: 0.95rem 0; border-bottom: 1px solid var(--line-soft); } .book-terms li:first-child { border-top: 1px solid var(--line-soft); } .book-terms .k { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); padding-top: 0.15rem; } .book-terms .v { color: var(--ink-soft); } @media (max-width: 34rem) { .book-terms li { grid-template-columns: 1fr; gap: 0.25rem; } }