/* The blocks Squarespace's scripts used to draw, in plain HTML: the contact form, the
   accordion, audio and video. The fields and the send button already wear the refresh's
   own styles (written against .react-form-contents); this file is only their layout. */

/* The numbers are the old form's own, measured in the browser on 2026-09-19 (About, 1920 wide):
   labels 16px/28px regular, sub-labels 12px/27px semibold, inputs 53px, the message box 100px,
   the button 51px, a 10px gutter between first and last name. Its gaps between fields were
   36, 29, 21 and 20; ours are one even 30, and the whole form lands within 6px of its height. */
/* THE HEADER OVERLAYS THE PAGE, and the first section clears it with padding. Their stylesheet does
   that for a section inside a .region; their script did it for any other by writing the header's
   height inline (measured: padding-top: 438.172px at 1920). The two pages the builder makes itself,
   the Vibe High Club and the Studio's product page, put a bare section straight into the article, so
   off their engine the title slid under the logo. --header-height is already kept current on every page. */
article.page-regions > .page-section:first-child, #page-regions > .page-section:first-child { padding-top: var(--header-height, 100px) !important; }

.bd-form { display: block; width: 100%; margin: 0; }
.bd-form fieldset, .bd-form .bd-field { border: 0; padding: 0; margin: 0 0 30px !important; min-width: 0; }
.bd-form legend, .bd-form .bd-field > label { display: block; padding: 0; margin: 0 0 6px !important; font-size: 1rem; font-weight: 400 !important; letter-spacing: normal !important; line-height: 28px; }
.bd-form fieldset > legend { margin-bottom: 0 !important; }
.bd-form .bd-field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bd-form .bd-field-pair label { display: block; margin: 0 !important; }
.bd-form .bd-field-pair label > span { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; line-height: 27px; margin-bottom: 6px; }
.bd-form .bd-req { font-weight: 400; font-size: 0.856em; letter-spacing: normal; margin-left: 6px; }
.bd-form input[type="text"], .bd-form input[type="email"], .bd-form input[type="tel"], .bd-form textarea { display: block; width: 100%; box-sizing: border-box; font-family: inherit; color: inherit; line-height: 1.5 !important; margin: 0; }
.bd-form textarea { resize: vertical; height: 100px; min-height: 100px !important; }
.bd-form ::placeholder { color: inherit; opacity: 0.5; }
.bd-form .bd-check { display: flex !important; align-items: center; gap: 10px; margin: 6px 0 0 !important; font-size: 0.856rem !important; font-weight: 600 !important; letter-spacing: 0.04em !important; line-height: 21px; cursor: pointer; }
.bd-form .bd-check input { width: 20px; height: 20px; flex: none; accent-color: hsl(9 46% 40%); margin: 0; }
.bd-form .bd-field-send { margin: -10px 0 0 !important; }
.bd-form.react-form-contents button.bd-form-send[type="submit"] { cursor: pointer; font-family: inherit; font-size: 0.95rem !important; line-height: 1.2; min-height: 51px; }
/* the spam trap: off the page for people, present for whatever fills in every box it finds */
.bd-form .bd-hp { position: absolute !important; left: -5000px; width: 1px; height: 1px; overflow: hidden; margin: 0 !important; }
.bd-form .bd-form-send:disabled { opacity: 0.6; cursor: progress; }
/* On a phone the old form kept first and last name side by side (two 167px boxes at 390) and its
   button stood 42px with 14.08px type. Same here. */
@media (max-width: 767px) { .bd-form.react-form-contents button.bd-form-send[type="submit"] { min-height: 42px; font-size: 0.88rem !important; padding-block: 0.7rem !important; } }

/* the accordion is the browser's own <details> */
.bd-acc-list { border-top: 1px solid hsl(33 22% 76% / 0.9); }
.bd-acc { border-bottom: 1px solid hsl(33 22% 76% / 0.9); }
.bd-acc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 0; font-size: 1.05rem; line-height: 1.35; }
.bd-acc > summary::-webkit-details-marker { display: none; }
.bd-acc > summary::after { content: ''; flex: none; width: 11px; height: 11px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform 220ms ease; opacity: 0.7; }
.bd-acc[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.bd-acc > summary:focus-visible { outline: 2px solid hsl(9 46% 40%); outline-offset: 3px; }
.bd-acc-body { padding: 0 0 1.3rem; }
.bd-acc-body > :first-child { margin-top: 0; }
.bd-acc-body > :last-child { margin-bottom: 0; }

/* audio: the browser's own player, under its title */
.bd-audio { margin: 0; padding: 1rem 1.1rem; background: #fff; border: 1px solid hsl(33 22% 76%); border-radius: 12px; }
.bd-audio figcaption { font-weight: 600; letter-spacing: 0.02em; margin-bottom: 0.7rem; }
.bd-audio audio { display: block; width: 100%; }

/* video: the frame fills the 16:9 box their markup already reserves */
.bd-video-wrap { position: relative; }
.bd-video-wrap > .bd-video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: inherit; }
.intrinsic > .embed-block-wrapper:has(> .bd-video-wrap) { position: relative; padding-bottom: 56.25%; height: 0; }
.intrinsic > .embed-block-wrapper > .bd-video-wrap { position: absolute; inset: 0; }

@media (prefers-reduced-motion: reduce) { .bd-acc > summary::after { transition: none; } }

/* THE PRODUCT PAGE ON A PHONE (found 2026-09-19 while making the site easy to use: the picture was
   blank and the words ran to the very edge of the screen). Their script did two more quiet jobs at
   phone width: it made the chosen slide visible (their sheet hides every slide until then), and it
   gave the words their gutter. bd-runtime.js already marks the chosen slide .selected. */
@media (max-width: 767px) {
  .pdp-gallery-slides.selected { visibility: visible !important; opacity: 1 !important; }
  .product-detail .pdp-form-wrapper { padding-left: var(--sqs-mobile-site-gutter, 6vw) !important; padding-right: var(--sqs-mobile-site-gutter, 6vw) !important; box-sizing: border-box; }
}