/* Additions on top of Colin's page CSS. build.py bumps every selector with :not(#_) like the page CSS. */
/* Stand-in photos fill the design's image slots, which keep their own size and frame. */
.has-photo:not(#_){position:relative;overflow:hidden}
.has-photo .slot-photo:not(#_){position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.map-block .map-embed:not(#_){width:100%;height:100%;border:0;display:block}
.skip-link:not(#_){position:fixed;left:1rem;top:-100px;z-index:3000;padding:12px 20px;background:var(--accent);color:#0e0c08;font-size:12px}
.skip-link:focus:not(#_){top:1rem}
[hidden]:not(#_){display:none!important}
a:focus-visible:not(#_),button:focus-visible:not(#_),input:focus-visible:not(#_),select:focus-visible:not(#_),textarea:focus-visible:not(#_){outline:2px solid var(--accent);outline-offset:3px}
.honeypot:not(#_){position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.preview-form-note:not(#_){font-size:12px;line-height:1.7;color:var(--text-muted);margin-top:14px}
.form-feedback:not(:empty):not(#_){margin-top:16px;padding:14px 16px;border:1px solid var(--accent);background:var(--accent-pale);font-size:13px;line-height:1.7;color:var(--text)}
.field-error:not(#_){color:#9b3620;font-size:12px;line-height:1.5;margin-top:6px}
[aria-invalid="true"]:not(#_){border-color:#9b3620}
/* Skin Boosters: the five-column comparison table is wider than a phone, so the whole page scrolled sideways and the
   header stretched past the screen. On phones the table scrolls inside its own box instead. */
@media(max-width:760px){.compare-inner:not(#_){overflow-x:auto}}
/* Phones: a menu button, because the design hides its menu links below 760px and offers nothing
   instead (findings 29). A <details>, so it works without script. */
.mn:not(#_){display:none}
@media(max-width:760px){.mn:not(#_){display:block;margin-left:18px}.na:not(#_){margin-left:auto}.mn summary:not(#_){list-style:none;cursor:pointer;width:26px;height:22px;display:flex;flex-direction:column;justify-content:space-between;padding:5px 0}.mn summary:not(#_)::-webkit-details-marker{display:none}.mn summary span:not(#_){display:block;height:1px;background:#f0ece4;transition:opacity .2s}.mn[open] summary span:nth-child(2):not(#_){opacity:0}.mn-p:not(#_){position:fixed;top:var(--nav-h);left:0;right:0;max-height:calc(100vh - var(--nav-h));overflow:auto;background:#0a0806;border-bottom:1px solid rgba(168,126,56,.2);padding:8px 24px 28px;display:flex;flex-direction:column}.mn-p .nav-link:not(#_),.mn-p .nav-tel:not(#_){display:block;padding:16px 0;border-bottom:1px solid rgba(168,126,56,.12);font-size:11px}.mn-p .nav-tel:not(#_){font-size:17px;border-bottom:0}}
/* Phones: "Book Now" broke onto two lines and the logo's small second line crowded it (findings 29). */
.bn:not(#_){white-space:nowrap}
@media(max-width:420px){.nl-top:not(#_){font-size:17px;letter-spacing:2px}.nl-top span:not(#_){display:none}.bn:not(#_){padding:10px 14px}}
/* The footer lists showed the browser's default bullets outside the text column (findings 29). */
.sf ul:not(#_){list-style:none}
/* Phones: the gift voucher card keeps the design's 16:9 shape with its footer pinned to the bottom, so at phone width
   "£250" sat on the small print (findings 30). Up to 760px the card is as tall as its content. */
@media(max-width:760px){.vcard:not(#_){aspect-ratio:auto;padding:28px 24px}.vc-footer:not(#_){position:static;margin-top:24px;flex-wrap:wrap;gap:12px}}