/* Salon website — "design" template. The look is the imported design's own
   CSS (printed by site.templates.design.home); this sheet is the floor under
   it: what the shared chrome needs once base.css is not loaded (skip link,
   Glaura bar, reel tiles and viewer), the default page head and listing, and
   the data-glaura-* behaviours. Colours come from the design's tokens with
   the salon theme as fallback. Booking and boutique pages keep base.css and
   load this sheet too, so nothing here styles bare elements. */

[data-site-template="design"] {
  --gd-bg: var(--color-bg, #FAF7F3);
  --gd-text: var(--color-text, #121212);
  --gd-accent: var(--color-accent, var(--site-primary, #7A0C18));
  --gd-divider: var(--color-divider, rgba(0, 0, 0, .12));
  --gd-muted: var(--color-neutral-600, #6b6b6b);
  --gd-heading: var(--font-heading, var(--site-font-display, Georgia, serif));
  --gd-gutter: clamp(20px, 5vw, 64px);
}

.gd-site { min-height: 100vh; background: var(--gd-bg); color: var(--gd-text); }
.gd-site img { max-width: 100%; }
.gd-container { max-width: 1240px; margin: 0 auto; padding: 0 var(--gd-gutter); }

/* Default page head (a design without a `pageHead` section) */
.gd-page-head { padding: clamp(48px, 8vw, 104px) 0 clamp(24px, 4vw, 40px); }
.gd-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--gd-muted); }
.gd-crumbs a { color: inherit; text-decoration: none; }
.gd-page-head__title { font-family: var(--gd-heading); font-weight: 400; font-size: clamp(40px, 6vw, 84px); line-height: 1; margin: 22px 0 0; }
.gd-page-head__lead { margin: 16px 0 0; color: var(--gd-muted); }

/* Default listing of a family or a team member (no `category` section) */
.gd-listing { padding: 0 0 clamp(64px, 10vw, 120px); }
.gd-listing__list { list-style: none; margin: 0; padding: 0; }
.gd-listing__row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px 24px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--gd-divider); }
.gd-listing__name { margin: 0; font-weight: 500; }
.gd-listing__meta { margin: 4px 0 0; font-size: 14px; color: var(--gd-muted); }
.gd-listing__price { margin: 0; font-weight: 600; white-space: nowrap; }
.gd-listing__book { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--gd-accent); border: 1px solid currentColor; padding: 9px 14px; text-decoration: none; }
@media (max-width: 640px) {
  .gd-listing__row { grid-template-columns: 1fr auto; }
  .gd-listing__book { grid-column: 1 / -1; justify-self: start; }
}

/* An <image-slot> the designer left unbound */
.gd-image-slot { width: 100%; height: 100%; min-height: 120px; background: color-mix(in srgb, var(--gd-text) 8%, transparent); }
.gd-image-slot-img { width: 100%; height: 100%; object-fit: cover; }

/* Behaviours */
.gd-js [data-glaura-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.gd-js [data-glaura-reveal].is-revealed { opacity: 1; transform: none; }
[data-glaura-carousel] { scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.gd-menu-open body { overflow: hidden; }
.gd-search-more { display: block; width: 100%; margin: 0; padding: 14px 16px; border: 0; border-top: 1px solid var(--gd-divider); background: none; color: var(--gd-accent); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.gd-search-more[hidden] { display: none; }

/* Shared chrome base.css would otherwise style */
[data-site-template="design"] .site-skip { position: absolute; left: 12px; top: -48px; z-index: 200; padding: 10px 14px; background: #fff; color: #111; }
[data-site-template="design"] .site-skip:focus { top: 12px; }
[data-site-template="design"] .site-topbar { background: #fff; border-bottom: 1px solid var(--gd-divider); font-size: .8125rem; }
[data-site-template="design"] .site-topbar__brand { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 12px; color: #444; text-decoration: none; }

/* Reels: tiles built by site.js inside [data-glaura-reels-list] */
.site-reel { position: relative; list-style: none; }
.site-reel__btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
[data-site-reels-list] img, [data-site-reels-list] video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; display: block; }
.site-reel__preview { position: absolute; inset: 0; height: 100%; opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.site-reel__preview.is-playing { opacity: 1; }

/* The reel viewer and lightbox (site.js) */
[data-site-template="design"] [hidden] { display: none !important; }
[data-site-template="design"] .site-overlay { position: fixed; inset: 0; z-index: 100; display: grid; grid-template-rows: auto 1fr auto; background: rgba(10, 8, 6, .94); color: #fff; padding: 12px; }
[data-site-template="design"] .site-overlay__bar { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
[data-site-template="design"] .site-overlay__extra { display: flex; gap: 8px; margin-inline-end: auto; }
[data-site-template="design"] .site-overlay__stage { margin: 0; display: grid; place-items: center; min-height: 0; grid-template-areas: "stage"; }
[data-site-template="design"] .site-overlay__stage > * { grid-area: stage; max-height: 100%; max-width: 100%; }
[data-site-template="design"] .site-overlay__stage img, [data-site-template="design"] .site-overlay__stage video { max-height: calc(100dvh - 168px); width: auto; object-fit: contain; margin-inline: auto; }
[data-site-template="design"] .site-overlay__foot { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 8px 0; font-size: .875rem; }
[data-site-template="design"] .site-overlay__btn { min-width: 44px; min-height: 44px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .12); color: #fff; border: 0; border-radius: 999px; font: inherit; cursor: pointer; }
[data-site-template="design"] .site-overlay__count { margin: 0; opacity: .8; }
body.site-locked { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .gd-js [data-glaura-reveal] { opacity: 1; transform: none; transition: none; }
}