/* Angela Green Skin Care components. Requires tokens.css. */

/* ---------- Type ---------- */
.agsc-display { font: var(--agsc-weight-regular) clamp(34px, 3.4vw + 12px, var(--agsc-text-display)) / var(--agsc-leading-display) var(--agsc-font-head); text-transform: uppercase; margin: 0; }
.agsc-h1 { font: var(--agsc-weight-regular) clamp(34px, 3vw + 14px, var(--agsc-text-h1)) / var(--agsc-leading-head) var(--agsc-font-head); margin: 0; }
.agsc-h2 { font: var(--agsc-weight-regular) clamp(24px, 1.2vw + 16px, var(--agsc-text-h2)) / var(--agsc-leading-head) var(--agsc-font-head); margin: 0; }
.agsc-lead { font: var(--agsc-weight-regular) clamp(20px, 0.6vw + 16px, var(--agsc-text-lead)) / var(--agsc-leading-lead) var(--agsc-font-head); margin: 0; }
.agsc-body { font: var(--agsc-weight-regular) clamp(17px, 0.4vw + 14px, var(--agsc-text-body)) / var(--agsc-leading-body) var(--agsc-font-head); margin: 0; }
.agsc-title { font: var(--agsc-weight-bold) var(--agsc-text-title) / var(--agsc-leading-title) var(--agsc-font-head); margin: 0; }
.agsc-label { font: var(--agsc-weight-regular) var(--agsc-text-title) / var(--agsc-leading-title) var(--agsc-font-head); margin: 0; }
.agsc-small { font: var(--agsc-weight-regular) var(--agsc-text-sm) / var(--agsc-leading-card) var(--agsc-font-head); margin: 0; }
.agsc-price { font: var(--agsc-weight-bold) var(--agsc-text-sm) / 1.8 var(--agsc-font-head); text-transform: uppercase; margin: 0; }
.agsc-ui { font: var(--agsc-weight-light) var(--agsc-text-ui) / var(--agsc-leading-ui) var(--agsc-font-ui); }
.agsc-fine { font: var(--agsc-weight-light) var(--agsc-text-fine) / 1.5 var(--agsc-font-ui); color: var(--agsc-ink); }
.agsc-tracked { font: var(--agsc-weight-regular) var(--agsc-text-tracked) / 1.2 var(--agsc-font-head); letter-spacing: var(--agsc-track-label); }

/* A service name that links to its page: display caps, underlined, as on the homepage. */
.agsc-head-link { color: var(--agsc-ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
.agsc-head-link:hover { text-decoration-thickness: 3px; }
.agsc-head-link:focus-visible { outline: 2px solid var(--agsc-ink); outline-offset: 4px; }

/* ---------- Logo ---------- */
.agsc-logo { display: block; height: auto; }
.agsc-logo--script { width: 220px; }
.agsc-logo--club { width: 200px; }
.agsc-logo--adot { width: 44px; }

/* ---------- Buttons ---------- */
/* Primary: warm black, white UI type, soft corners (v1.1; v1.0 was black and square). One per view. */
.agsc-btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--agsc-button-height); padding: 0 var(--agsc-space-6);
  background: var(--agsc-warm-black); color: var(--agsc-on-dark); border: var(--agsc-rule) solid var(--agsc-warm-black); border-radius: var(--agsc-radius-soft);
  font: var(--agsc-weight-light) var(--agsc-text-ui) / var(--agsc-leading-ui) var(--agsc-font-ui); text-decoration: none; cursor: pointer;
  transition: background-color var(--agsc-fade) var(--agsc-ease), color var(--agsc-fade) var(--agsc-ease); }
.agsc-btn:hover { background: var(--agsc-white); color: var(--agsc-ink); }
.agsc-btn:focus-visible { outline: 2px solid var(--agsc-ink); outline-offset: 3px; }
/* Warm: the feature action (Subscribe, Book Now). Tracked Quicksand on warm black; hover inverts. */
.agsc-btn--warm { min-height: 49px; padding: 0 var(--agsc-space-5); background: var(--agsc-warm-black); border-color: var(--agsc-warm-black);
  font: var(--agsc-weight-regular) var(--agsc-text-tracked) / 1.2 var(--agsc-font-head); letter-spacing: var(--agsc-track-label); }
.agsc-btn--warm:hover { background: var(--agsc-white); color: var(--agsc-ink); border-color: var(--agsc-ink); }
/* Outline: a second action beside a primary, or a button on a photo. */
.agsc-btn--outline { background: var(--agsc-white); color: var(--agsc-ink); border-color: var(--agsc-line); }
.agsc-btn--outline:hover { background: var(--agsc-warm-black); color: var(--agsc-on-dark); border-color: var(--agsc-warm-black); }
.agsc-btn--sm { min-height: var(--agsc-field-height); padding: 0 var(--agsc-space-5); }

/* ---------- Email signup: field with an attached button ---------- */
.agsc-signup { display: grid; gap: var(--agsc-space-1); max-width: 620px; width: 100%; }
.agsc-signup label { font: var(--agsc-weight-light) var(--agsc-text-ui) / 1.4 var(--agsc-font-ui); }
.agsc-signup__row { display: grid; grid-template-columns: 1fr minmax(120px, 34%); }
.agsc-signup input { min-height: var(--agsc-field-height); padding: 0 var(--agsc-space-3); border: var(--agsc-rule) solid var(--agsc-line-field); border-right: 0; border-radius: var(--agsc-radius-soft) 0 0 var(--agsc-radius-soft);
  background: var(--agsc-white); color: var(--agsc-ink); font: var(--agsc-weight-regular) var(--agsc-text-sm) var(--agsc-font-head); transition: border-color var(--agsc-fade-slow); }
.agsc-signup input:focus { outline: 2px solid var(--agsc-ink); outline-offset: -2px; }
.agsc-signup .agsc-btn { min-height: var(--agsc-field-height); padding: 0 var(--agsc-space-3); border-radius: 0 var(--agsc-radius-soft) var(--agsc-radius-soft) 0; transition-duration: var(--agsc-fade-slow); }

/* ---------- Service block: title, description, price, warm Book Now ---------- */
.agsc-service { display: grid; gap: var(--agsc-space-2); justify-items: start; max-width: 460px; }
.agsc-service .agsc-small { margin-bottom: var(--agsc-space-2); }
.agsc-service .agsc-btn { margin-top: var(--agsc-space-2); }

/* ---------- Product card ---------- */
.agsc-product { display: grid; grid-template-rows: auto 1fr; border: var(--agsc-rule) solid var(--agsc-line-soft); border-radius: var(--agsc-radius-soft); overflow: hidden; background: var(--agsc-white); color: var(--agsc-ink); text-decoration: none; }
.agsc-product img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--agsc-white); }
.agsc-product__meta { display: grid; gap: var(--agsc-space-1); padding: var(--agsc-space-3) var(--agsc-space-3) var(--agsc-space-4); }
.agsc-product__name { font: var(--agsc-weight-light) var(--agsc-text-sm) / 1.25 var(--agsc-font-ui); }
.agsc-product__price { font: var(--agsc-weight-light) var(--agsc-text-ui) / 1.4 var(--agsc-font-ui); color: var(--agsc-ink-muted); }
.agsc-product__price s { margin-right: 6px; }
.agsc-product:hover .agsc-product__name { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Contact grid: four cells, 1px black lines ---------- */
.agsc-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); border-top: var(--agsc-rule) solid var(--agsc-line-soft); border-left: var(--agsc-rule) solid var(--agsc-line-soft); }
.agsc-contact > div { display: grid; gap: var(--agsc-space-2); justify-items: center; align-content: start; text-align: center; padding: var(--agsc-space-6) var(--agsc-space-3);
  border-right: var(--agsc-rule) solid var(--agsc-line-soft); border-bottom: var(--agsc-rule) solid var(--agsc-line-soft); }
.agsc-contact img { width: 24px; height: 24px; }
.agsc-contact .agsc-small { font-family: var(--agsc-font-head); }

/* ---------- Social icons: black circles ---------- */
.agsc-social { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0; }
.agsc-social img { display: block; width: 24px; height: 24px; border-radius: var(--agsc-radius-round); }

/* ---------- Vertical tab: "The Year of The Facial" ---------- */
.agsc-tab { display: inline-block; writing-mode: vertical-rl; padding: var(--agsc-space-4) var(--agsc-space-2); background: var(--agsc-warm-black); color: var(--agsc-on-dark);
  font: var(--agsc-weight-regular) var(--agsc-text-tracked) / 1 var(--agsc-font-head); letter-spacing: var(--agsc-track-label); }

/* ---------- Panels and bands ---------- */
.agsc-panel--blush { background: var(--agsc-blush); color: var(--agsc-ink); border-radius: var(--agsc-radius-soft); padding: var(--agsc-space-6) var(--agsc-space-5); display: grid; gap: var(--agsc-space-4); justify-items: center; text-align: center; }
.agsc-band--dark { background: var(--agsc-warm-black); color: var(--agsc-on-dark); padding: var(--agsc-space-7) var(--agsc-space-4); display: grid; gap: var(--agsc-space-4); justify-items: center; text-align: center; }
.agsc-band--dark .agsc-body { max-width: 640px; font-size: var(--agsc-text-sm); line-height: var(--agsc-leading-card); }

/* ---------- Photo hero with glass panels (services) ---------- */
.agsc-photo-hero { position: relative; display: grid; gap: var(--agsc-space-5); justify-items: center; padding: var(--agsc-space-7) var(--agsc-space-4); color: var(--agsc-on-dark); background: var(--agsc-black) center / cover no-repeat; }
.agsc-photo-hero > * { position: relative; }
.agsc-photo-hero::before { content: ""; position: absolute; inset: 0; background: var(--agsc-scrim); }
.agsc-photo-hero__panels { display: grid; gap: var(--agsc-space-2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); width: min(100%, 840px); }
.agsc-photo-hero__panels a { display: grid; place-items: center; min-height: 140px; background: var(--agsc-glass); color: var(--agsc-on-dark); text-transform: uppercase;
  font: var(--agsc-weight-light) var(--agsc-text-ui) / 1.4 var(--agsc-font-ui); letter-spacing: 0.04em; text-decoration: underline; text-underline-offset: 3px; }
.agsc-photo-hero__panels a:hover { background: rgba(255, 255, 255, 0.4); } /* hover only: glass one step brighter */

/* ---------- Path cards: photo, underlined link title, copy ---------- */
.agsc-path { display: grid; gap: var(--agsc-space-3); align-content: start; }
.agsc-path img { display: block; width: 100%; aspect-ratio: 270 / 199; object-fit: cover; border-radius: var(--agsc-radius-soft); }
.agsc-path a { font: var(--agsc-weight-regular) var(--agsc-text-title) / 1.25 var(--agsc-font-head); color: var(--agsc-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Video vocabulary [ext] ---------- */
/* Name tag: lower third for Angela on camera. */
.agsc-nametag { display: inline-grid; gap: 2px; padding: var(--agsc-space-3) var(--agsc-space-4); background: var(--agsc-white); color: var(--agsc-ink); }
.agsc-nametag strong { font: var(--agsc-weight-regular) 28px / 1.2 var(--agsc-font-head); }
.agsc-nametag span { font: var(--agsc-weight-light) var(--agsc-text-ui) / 1.3 var(--agsc-font-ui); letter-spacing: var(--agsc-track-label); text-transform: uppercase; }
/* Price chip: service and price, for promos. */
.agsc-chip { display: inline-flex; gap: var(--agsc-space-2); align-items: baseline; padding: var(--agsc-space-2) var(--agsc-space-3); background: var(--agsc-warm-black); color: var(--agsc-on-dark);
  font: var(--agsc-weight-bold) var(--agsc-text-sm) / 1 var(--agsc-font-head); text-transform: uppercase; }
/* Review card: a client's words on blush, attributed. */
.agsc-quote { display: grid; gap: var(--agsc-space-3); padding: var(--agsc-space-5); background: var(--agsc-blush); color: var(--agsc-ink); max-width: 520px; border-radius: var(--agsc-radius-soft); }
.agsc-quote p { font: var(--agsc-weight-regular) var(--agsc-text-lead) / 1.5 var(--agsc-font-head); margin: 0; }
.agsc-quote cite { font: var(--agsc-weight-light) var(--agsc-text-ui) / 1.3 var(--agsc-font-ui); font-style: normal; letter-spacing: var(--agsc-track-label); text-transform: uppercase; }

/* ---------- v1.1 components (from the assessment page, October 12, 2026) ---------- */
/* Card: tone instead of an outline. White on blush, surface on white. */
.agsc-card { display: grid; align-content: start; gap: var(--agsc-space-2); padding: clamp(24px, 3.5vw, 44px); background: var(--agsc-surface); border-radius: var(--agsc-radius-soft); }
.agsc-panel--blush .agsc-card { background: var(--agsc-white); }
.agsc-card__label { margin: 0; font: var(--agsc-weight-light) 13px / 1.4 var(--agsc-font-ui); letter-spacing: var(--agsc-track-label); text-transform: uppercase; color: var(--agsc-ink-muted); }
.agsc-card__title { margin: 0; font: 300 clamp(30px, 2vw + 14px, 40px) / 1.1 var(--agsc-font-head); }

/* Check list: short scannable lines instead of a paragraph. */
.agsc-checks { list-style: none; margin: 0; padding: var(--agsc-space-3) 0 0; display: grid; gap: 10px; border-top: 1px solid var(--agsc-line-soft); }
.agsc-checks li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; font: var(--agsc-weight-regular) var(--agsc-text-sm) / 1.45 var(--agsc-font-head); }
.agsc-checks li::before { content: ""; width: 18px; height: 18px; margin-top: 2px; background: var(--agsc-ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }

/* a.dot note: Angela's stamp. The mark beside a short rule or tip, in a tinted pill whose dotted border echoes the mark's ring.
   Use it for anything in Angela's own voice: a rule, a tip, a quote. One or two per page. */
.agsc-note { --note-ground: rgba(246, 235, 228, 0.6); display: grid; grid-template-columns: 40px auto; gap: 14px; align-items: center; width: fit-content; max-width: 100%; margin-inline: auto;
  padding: 10px 26px 10px 10px; background: var(--note-ground); border: 1.5px dotted #B9A698; border-radius: var(--agsc-radius-pill); text-align: left; }
.agsc-panel--blush .agsc-note { --note-ground: rgba(255, 255, 255, 0.75); }
.agsc-note img { width: 40px; height: 40px; padding: 3px; background: var(--agsc-white); border-radius: 50%; transition: transform 0.8s var(--agsc-ease); }
.agsc-note:hover img { transform: rotate(-12deg); }
.agsc-note p { margin: 0; }
.agsc-note__label { font: 600 11px / 1.4 var(--agsc-font-ui); letter-spacing: var(--agsc-track-label); text-transform: uppercase; color: #8A7668; }
.agsc-note__text { font: var(--agsc-weight-regular) 17px / 1.45 var(--agsc-font-head); color: var(--agsc-ink); }
@media (max-width: 640px) { .agsc-note { border-radius: 24px; padding-right: 20px; } }

/* Review: one short pull quote per card, name and a context tag. Keep quotes verbatim; trim with an ellipsis. */
.agsc-review { margin: 0; display: grid; grid-template-rows: 1fr auto; gap: var(--agsc-space-4); padding: clamp(28px, 3vw, 40px); background: var(--agsc-blush); border-radius: var(--agsc-radius-soft); }
.agsc-review blockquote { margin: 0; font: 300 clamp(21px, 0.8vw + 15px, 25px) / 1.45 var(--agsc-font-head); }
.agsc-review blockquote::before { content: "\201C"; display: block; height: 36px; font: 400 64px / 1 Georgia, serif; color: var(--agsc-ink-muted); opacity: 0.5; }
.agsc-review figcaption { display: grid; gap: 2px; padding-top: var(--agsc-space-3); border-top: 1px solid rgba(0, 0, 0, 0.1); }
.agsc-review figcaption b { font: var(--agsc-weight-bold) 15px / 1.3 var(--agsc-font-head); }
.agsc-review figcaption span { font: var(--agsc-weight-light) 13px / 1.3 var(--agsc-font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--agsc-ink-soft); }

/* Rating: the review summary above a reviews block. */
.agsc-rating { display: inline-flex; align-items: center; gap: var(--agsc-space-3); }
.agsc-rating__score { font: 300 48px / 1 var(--agsc-font-head); }
.agsc-rating__meta { display: grid; gap: 2px; text-align: left; font: var(--agsc-weight-light) var(--agsc-text-ui) / 1.3 var(--agsc-font-ui); color: var(--agsc-ink-soft); }
.agsc-rating__stars { letter-spacing: 3px; font-size: 14px; color: var(--agsc-ink); }

/* Facts: a short list of who/what in two columns, a bold term over a light line. Replaces a bio paragraph. */
.agsc-facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--agsc-space-3) var(--agsc-space-5); width: 100%; padding-block: var(--agsc-space-4); border-block: 1px solid var(--agsc-line-soft); }
.agsc-facts > div { display: grid; align-content: start; gap: 2px; padding-left: var(--agsc-space-3); border-left: 2px solid #E3D2C6; }
.agsc-facts dt { font: var(--agsc-weight-bold) 17px / 1.3 var(--agsc-font-head); }
.agsc-facts dd { margin: 0; font: var(--agsc-weight-regular) 15px / 1.45 var(--agsc-font-head); color: var(--agsc-ink-soft); }
@media (max-width: 520px) { .agsc-facts { grid-template-columns: 1fr; } }

/* Perks: what a signup gets, on the dark band. Each item sits under a dotted ring with a check, echoing the a.dot mark. */
.agsc-perks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 190px)); justify-content: center; gap: var(--agsc-space-4); }
.agsc-perks li { display: grid; justify-items: center; gap: 4px; text-align: center; }
.agsc-perks li::before { content: ""; width: 44px; height: 44px; margin-bottom: var(--agsc-space-2); border: 1.5px dotted rgba(255, 255, 255, 0.6); border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.agsc-perks b { font: var(--agsc-weight-regular) 18px / 1.3 var(--agsc-font-head); color: var(--agsc-on-dark); }
.agsc-perks span { font: var(--agsc-weight-light) 13px / 1.4 var(--agsc-font-ui); letter-spacing: 0.04em; color: #bdb6b2; }
@media (max-width: 560px) {
  .agsc-perks { grid-template-columns: minmax(0, 300px); gap: var(--agsc-space-3); }
  .agsc-perks li { grid-template-columns: 44px 1fr; justify-items: start; column-gap: var(--agsc-space-3); row-gap: 0; text-align: left; align-items: center; }
  .agsc-perks li::before { grid-row: span 2; margin: 0; }
}

/* ---------- v1.2 components (from the services page, October 12, 2026) ---------- */
/* Price ring: the price and time inside a dotted circle that echoes the a.dot mark. Ink on light grounds; --light on warm black. */
.agsc-ring { display: grid; place-content: center; flex: none; width: 92px; height: 92px; border: 1.5px dotted #B9A698; border-radius: var(--agsc-radius-round); text-align: center; color: var(--agsc-ink); }
.agsc-ring b { font: var(--agsc-weight-bold) 22px / 1 var(--agsc-font-head); }
.agsc-ring small { margin-top: 4px; font: var(--agsc-weight-light) 12px / 1 var(--agsc-font-ui); letter-spacing: 0.06em; color: var(--agsc-ink-soft); }
.agsc-ring small:first-child { margin: 0 0 4px; }
.agsc-ring--light { border-color: rgba(255, 255, 255, 0.7); color: var(--agsc-on-dark); }
.agsc-ring--light small { color: #cfcaca; }
@media (max-width: 420px) { .agsc-ring { width: 76px; height: 76px; } .agsc-ring b { font-size: 19px; } }

/* Banner card: a warm-black head (label, title, price ring) over a soft body. For two or three featured services in a section, on white or blush. */
.agsc-card.agsc-card--banner { padding: 0; gap: 0; grid-template-rows: auto 1fr auto; overflow: hidden; }
.agsc-card__head { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--agsc-space-4); padding: var(--agsc-space-5); background: var(--agsc-warm-black); color: var(--agsc-on-dark); }
.agsc-card__head .agsc-card__label { margin-bottom: 6px; color: #cfcaca; }
.agsc-card__head .agsc-card__title { font-size: clamp(24px, 1.2vw + 16px, 32px); line-height: 1.15; }
.agsc-card__body { display: grid; gap: var(--agsc-space-3); align-content: start; padding: var(--agsc-space-5) var(--agsc-space-5) 0; }
.agsc-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--agsc-space-3); padding: var(--agsc-space-4) var(--agsc-space-5) var(--agsc-space-5); }
.agsc-card__foot > :last-child { margin-left: auto; }
@media (max-width: 420px) { .agsc-card__head { padding: var(--agsc-space-4); } .agsc-card__body { padding: var(--agsc-space-4) var(--agsc-space-4) 0; } .agsc-card__foot { padding: var(--agsc-space-4); } }

/* Menu: services as a price list. Name, a dotted leader and the price on one line; time and who it's for below; tags; then actions. */
.agsc-menu { list-style: none; margin: 0; padding: 0; }
.agsc-menu__item { display: grid; gap: var(--agsc-space-3); padding: var(--agsc-space-5) 0; border-top: 1px solid var(--agsc-line-soft); }
.agsc-menu__top { display: flex; align-items: baseline; gap: var(--agsc-space-3); }
.agsc-menu__num { font: var(--agsc-weight-light) 13px / 1 var(--agsc-font-ui); letter-spacing: 0.1em; color: var(--agsc-ink-muted); }
.agsc-menu__name { margin: 0; font: var(--agsc-weight-regular) clamp(22px, 1vw + 16px, 28px) / 1.2 var(--agsc-font-head); }
.agsc-menu__leader { flex: 1; min-width: 24px; border-bottom: 1.5px dotted #B9A698; transform: translateY(-6px); }
.agsc-menu__price { font: var(--agsc-weight-bold) 20px / 1 var(--agsc-font-head); white-space: nowrap; }
.agsc-menu__meta { margin: 0; font: var(--agsc-weight-light) 15px / 1.5 var(--agsc-font-ui); color: var(--agsc-ink-soft); }
.agsc-menu__meta b { font-weight: 600; color: var(--agsc-ink); }
.agsc-menu__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--agsc-space-3); }
.agsc-menu__foot > :last-child { margin-left: auto; }
@media (max-width: 520px) { .agsc-menu__leader { visibility: hidden; } }

/* Tags: two- or three-word pills for what's included, where a check list would run long. */
.agsc-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.agsc-tags li { padding: 6px 12px; background: var(--agsc-surface); border-radius: var(--agsc-radius-pill); font: var(--agsc-weight-regular) 14px / 1.3 var(--agsc-font-head); }
.agsc-panel--blush .agsc-tags li { background: var(--agsc-white); }

/* Pill: a small blush label for an extra, such as a membership price. Can be a link. */
.agsc-pill { display: inline-block; padding: 5px 12px; background: var(--agsc-blush); border-radius: var(--agsc-radius-pill); font: var(--agsc-weight-light) 13px / 1.3 var(--agsc-font-ui); color: var(--agsc-ink); text-decoration: none; }
a.agsc-pill:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Motion (v1.2): calm fades and small moves. Never on the first screen, never looping. ---------- */
/* Reveal: the site's script adds .reveal to content below the first screen and .is-in as it scrolls into view. Without the script, nothing hides. */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--agsc-reveal) var(--agsc-ease-settle), transform var(--agsc-reveal) var(--agsc-ease-settle); }
.reveal.is-in { opacity: 1; transform: none; }
@media print { .reveal { opacity: 1; transform: none; } }
/* Product card: the photo eases in a touch and the outline warms. */
.agsc-product { transition: border-color var(--agsc-fade-slow) var(--agsc-ease); }
.agsc-product img { transition: transform 0.6s var(--agsc-ease-settle); }
.agsc-product:hover { border-color: #B9A698; }
.agsc-product:hover img { transform: scale(1.04); }
.agsc-product.reveal { transition: opacity var(--agsc-reveal) var(--agsc-ease-settle), transform var(--agsc-reveal) var(--agsc-ease-settle), border-color var(--agsc-fade-slow) var(--agsc-ease); }
/* Menu: the dotted leader draws out to the price as the item is revealed. */
.agsc-menu__item.reveal .agsc-menu__leader { transform: translateY(-6px) scaleX(0); transform-origin: left center; transition: transform 0.9s var(--agsc-ease-settle) 0.25s; }
.agsc-menu__item.reveal.is-in .agsc-menu__leader { transform: translateY(-6px) scaleX(1); }

/* ---------- v1.3 components (from the FAQ page, October 13, 2026) ---------- */
/* Accordion: questions as native <details>, so they open without a script. The + turns to an x when open. */
.agsc-accordion details + details { border-top: 1px solid var(--agsc-line-soft); }
.agsc-accordion summary { display: grid; grid-template-columns: 1fr 24px; gap: var(--agsc-space-3); align-items: baseline; padding: var(--agsc-space-4) 0; list-style: none; cursor: pointer; font: var(--agsc-weight-regular) clamp(19px, 0.6vw + 15px, 22px) / 1.35 var(--agsc-font-head); }
.agsc-accordion summary::-webkit-details-marker { display: none; }
.agsc-accordion summary::after { content: "+"; justify-self: end; font: var(--agsc-weight-light) 24px / 1 var(--agsc-font-ui); transition: transform var(--agsc-fade-slow) var(--agsc-ease-settle); }
.agsc-accordion details[open] > summary::after { transform: rotate(45deg); }
.agsc-accordion summary:focus-visible { outline: 2px solid var(--agsc-ink); outline-offset: 4px; }
.agsc-accordion__answer { padding: 0 var(--agsc-space-5) var(--agsc-space-4) 0; }
.agsc-accordion__answer p { margin: 0 0 var(--agsc-space-3); font: var(--agsc-weight-regular) clamp(16px, 0.3vw + 14px, 18px) / 1.8 var(--agsc-font-head); color: var(--agsc-ink-soft); }
.agsc-accordion__answer a { font: var(--agsc-weight-regular) 15px / 1.4 var(--agsc-font-head); color: var(--agsc-ink); text-underline-offset: 3px; }
details[open] > .agsc-accordion__answer { animation: agsc-fade-up var(--agsc-reveal) var(--agsc-ease-settle); }
/* --numbered: a tan Q1, Q2 before each question. */
.agsc-accordion--numbered { counter-reset: agsc-q; }
.agsc-accordion--numbered summary { grid-template-columns: 44px 1fr 24px; }
.agsc-accordion--numbered summary::before { counter-increment: agsc-q; content: "Q" counter(agsc-q); font: var(--agsc-weight-light) 13px / 1 var(--agsc-font-ui); letter-spacing: 0.1em; color: #8A7668; }
.agsc-accordion--numbered .agsc-accordion__answer { padding-left: calc(44px + var(--agsc-space-3)); }
@media (max-width: 640px) {
  .agsc-accordion--numbered summary { grid-template-columns: 1fr 24px; }
  .agsc-accordion--numbered summary::before { display: none; }
  .agsc-accordion__answer, .agsc-accordion--numbered .agsc-accordion__answer { padding-inline: 0; }
}
@keyframes agsc-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Side tabs: numbered tabs beside a panel, with a count. On phones they become a swipeable row of pills. Use role="tablist" / "tab". */
.agsc-sidetabs { display: grid; align-content: start; border-top: 1px solid rgba(0, 0, 0, 0.12); }
.agsc-sidetabs [role="tab"] { display: grid; grid-template-columns: 36px 1fr auto; align-items: baseline; gap: 10px; padding: 16px 14px; border: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.12); background: none; color: var(--agsc-ink); text-align: left; cursor: pointer; font: var(--agsc-weight-regular) 20px / 1.2 var(--agsc-font-head); transition: background-color var(--agsc-fade) var(--agsc-ease); }
.agsc-sidetabs [role="tab"] span { font: var(--agsc-weight-light) 12px / 1 var(--agsc-font-ui); letter-spacing: 0.1em; color: #8A7668; }
.agsc-sidetabs [role="tab"] small { font: var(--agsc-weight-light) 13px / 1 var(--agsc-font-ui); color: var(--agsc-ink-muted); }
.agsc-sidetabs [role="tab"]:hover { background: rgba(255, 255, 255, 0.5); }
.agsc-sidetabs [role="tab"][aria-selected="true"] { background: var(--agsc-white); border-radius: var(--agsc-radius-soft); }
.agsc-sidetabs [role="tab"]:focus-visible { outline: 2px solid var(--agsc-ink); outline-offset: -2px; }
@media (max-width: 860px) {
  .agsc-sidetabs { grid-auto-flow: column; grid-auto-columns: max-content; gap: 6px; overflow-x: auto; border: 0; scrollbar-width: none; }
  .agsc-sidetabs [role="tab"] { grid-template-columns: auto auto auto; padding: 10px 16px; border: 0; border-radius: var(--agsc-radius-pill); font-size: 16px; }
}

/* ---------- v1.4 components (from the services page facials, October 13, 2026) ---------- */
/* Ring card: a service as a defined card. A warm-black top rule, a bold name with who it's for beside a price ring,
   tags, then an optional pill and a solid book button. Sits two across in a grid; for a section of three to six services. */
.agsc-card.agsc-card--ring { display: flex; flex-direction: column; gap: var(--agsc-space-4); padding: clamp(22px, 2.6vw, 34px); border-top: 3px solid var(--agsc-warm-black); }
.agsc-card__top { display: grid; grid-template-columns: 1fr auto; gap: var(--agsc-space-3); align-items: start; }
.agsc-card__num { display: block; margin-bottom: 6px; font: var(--agsc-weight-light) 12px / 1 var(--agsc-font-ui); letter-spacing: 0.1em; color: var(--agsc-ink-muted); }
.agsc-card__name { margin: 0; font: var(--agsc-weight-bold) clamp(20px, 0.6vw + 16px, 24px) / 1.2 var(--agsc-font-head); }
.agsc-card__for { margin: 8px 0 0; font: var(--agsc-weight-light) 15px / 1.5 var(--agsc-font-ui); color: var(--agsc-ink-soft); }
.agsc-card__for b { font-weight: 600; color: var(--agsc-ink); }
.agsc-card--ring .agsc-tags li { background: var(--agsc-white); }
.agsc-card__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--agsc-space-3); margin-top: auto; }
.agsc-card__actions .agsc-btn { min-height: 44px; margin-left: auto; padding-inline: var(--agsc-space-5); }
@media (max-width: 520px) { .agsc-card__actions .agsc-btn { width: 100%; } }
/* Check list extra: a footnote line at the end of a check list for an add-on, such as a membership price.
   A small dotted ring instead of a check, and soft italic text, so it reads as an aside rather than one more item. */
.agsc-checks li.agsc-checks__extra { font-style: italic; font-size: 15px; color: var(--agsc-ink-soft); }
.agsc-checks li.agsc-checks__extra::before { width: 12px; height: 12px; margin: 4px 3px 0; background: none; -webkit-mask: none; mask: none; border: 1.5px dotted #B9A698; border-radius: 50%; }
.agsc-checks__extra a { color: inherit; text-decoration: underline; text-decoration-color: #B9A698; text-underline-offset: 3px; }
.agsc-checks__extra a:hover { color: var(--agsc-ink); text-decoration-color: currentColor; }

/* ---------- v1.5 components (from the memberships page, October 13, 2026) ---------- */
/* Member card: a plan as a wallet-sized warm-black card (Club lockup top left, the a.dot mark cropped into the
   bottom-right corner, plan name and price bottom left), with what's included below and a foot that holds the
   saving and the join button. The foot sits at the bottom, so buttons line up across a row of plans. */
/* v1.6.1: in a row of plans (a grid with grid-auto-rows: auto), each card spans four shared rows (subgrid): the card,
   "Best for", the check list and the foot. A "Best for" that wraps in one card keeps the others level. */
.agsc-member { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: var(--agsc-space-4); min-width: 0; }
.agsc-member__card { position: relative; isolation: isolate; aspect-ratio: 1.586; display: grid; grid-template-rows: auto 1fr auto; padding: 22px; overflow: hidden; border-radius: 14px; background: var(--agsc-warm-black); color: var(--agsc-on-dark); }
.agsc-member__logo { width: 92px; height: auto; }
.agsc-member__mark { position: absolute; z-index: -1; right: -24px; bottom: -24px; width: 104px; height: 104px; opacity: 0.22; }
.agsc-member__name { grid-row: 3; margin: 0; font: var(--agsc-weight-regular) 22px / 1.15 var(--agsc-font-head); }
.agsc-member__price { grid-row: 4; display: grid; gap: 4px; margin: 10px 0 0; font: var(--agsc-weight-light) 13px / 1 var(--agsc-font-ui); letter-spacing: 0.08em; color: #cfcaca; }
.agsc-member__price b { font: var(--agsc-weight-bold) 21px / 1 var(--agsc-font-head); letter-spacing: 0; color: var(--agsc-on-dark); }
.agsc-member__body { grid-row: 2 / span 3; display: grid; grid-template-rows: subgrid; row-gap: var(--agsc-space-3); padding-inline: 4px; }
.agsc-member__body > .agsc-checks { align-self: start; }
.agsc-member__foot { display: grid; gap: var(--agsc-space-3); align-self: end; padding-top: var(--agsc-space-2); }
.agsc-member__save { margin: 0; font: var(--agsc-weight-regular) 15px / 1.4 var(--agsc-font-head); }
.agsc-member__save s { color: var(--agsc-ink-muted); }
/* v1.6.1: the join button is an outline that fills warm black on hover, quieter than the feature button. */
.agsc-member__join { display: grid; place-items: center; min-height: 42px; border: 1px solid var(--agsc-warm-black); border-radius: var(--agsc-radius-soft); background: var(--agsc-white); font: var(--agsc-weight-regular) 14px / 1 var(--agsc-font-ui); color: var(--agsc-ink); text-decoration: none; transition: background-color var(--agsc-fade) var(--agsc-ease), color var(--agsc-fade) var(--agsc-ease); }
.agsc-member__join:hover { background: var(--agsc-warm-black); color: var(--agsc-on-dark); }
.agsc-member__join:focus-visible { outline: 2px solid var(--agsc-ink); outline-offset: 2px; }
@media (max-width: 640px) { .agsc-member__name { font-size: 26px; } .agsc-member__price b { font-size: 24px; } .agsc-member__mark { width: 128px; height: 128px; right: -28px; bottom: -28px; } }

/* ---------- v1.6 components (from the shop, October 13, 2026) ---------- */
/* Product card: a shop product as a square photo (a second photo eases in on hover), a Sale or Sold out badge,
   brand, name, price (sale price with the original struck through, or "from" with sizes) and an add button.
   The add button sits at the bottom, so buttons line up across a row. Three or four across; two on phones. */
.agsc-product-card { display: grid; grid-template-rows: auto 1fr auto; gap: 6px; }
.agsc-product-card__price { align-self: start; }
.agsc-product-card[hidden] { display: none; }
.agsc-product-card__link { display: grid; gap: 6px; color: inherit; text-decoration: none; }
.agsc-product-card__img { position: relative; aspect-ratio: 1; margin-bottom: 6px; overflow: hidden; border-radius: var(--agsc-radius-soft); background: var(--agsc-surface); }
.agsc-product-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.4s var(--agsc-ease-settle), transform 0.6s var(--agsc-ease-settle); }
.agsc-product-card__alt { opacity: 0; }
.agsc-product-card__link:hover .agsc-product-card__img img { transform: scale(1.04); }
.agsc-product-card__link:hover .agsc-product-card__alt { opacity: 1; }
.agsc-product-card__link:focus-visible { outline: 2px solid var(--agsc-ink); outline-offset: 4px; border-radius: var(--agsc-radius-soft); }
.agsc-product-card__badge { position: absolute; top: 10px; left: 10px; z-index: 1; padding: 4px 10px; border-radius: 40px; background: var(--agsc-white); font: var(--agsc-weight-regular) 12px / 1.2 var(--agsc-font-ui); color: var(--agsc-ink); }
.agsc-product-card__badge--sale { background: var(--agsc-warm-black); color: var(--agsc-on-dark); }
.agsc-product-card__brand { margin: 0; font: var(--agsc-weight-light) 11px / 1.2 var(--agsc-font-ui); letter-spacing: 0.1em; text-transform: uppercase; color: var(--agsc-ink-muted); }
.agsc-product-card__name { margin: 0; font: var(--agsc-weight-regular) 17px / 1.3 var(--agsc-font-head); }
.agsc-product-card__link:hover .agsc-product-card__name { text-decoration: underline; text-underline-offset: 3px; }
.agsc-product-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0; font: var(--agsc-weight-bold) 15px / 1.3 var(--agsc-font-head); }
.agsc-product-card__price s { font-weight: var(--agsc-weight-regular); color: var(--agsc-ink-muted); }
.agsc-product-card__sizes { width: 100%; font: var(--agsc-weight-light) 13px / 1.3 var(--agsc-font-ui); color: var(--agsc-ink-soft); }
.agsc-product-card__add { display: grid; place-items: center; min-height: 42px; margin-top: 8px; border: 1px solid var(--agsc-warm-black); border-radius: var(--agsc-radius-soft); background: var(--agsc-white); font: var(--agsc-weight-regular) 14px / 1 var(--agsc-font-ui); color: var(--agsc-ink); text-decoration: none; cursor: pointer; transition: background-color var(--agsc-fade) var(--agsc-ease), color var(--agsc-fade) var(--agsc-ease); }
.agsc-product-card__add:hover { background: var(--agsc-warm-black); color: var(--agsc-on-dark); }
.agsc-product-card__add.is-disabled { border-color: var(--agsc-line-soft); color: var(--agsc-ink-muted); cursor: default; }
.agsc-product-card__add.is-disabled:hover { background: var(--agsc-white); color: var(--agsc-ink-muted); }
@media (max-width: 640px) { .agsc-product-card__name { font-size: 15px; } .agsc-product-card__add { min-height: 38px; font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .agsc-product-card__img img { transition: none; } .agsc-product-card__link:hover .agsc-product-card__img img { transform: none; } }

/* ---------- Booking (v1.7) ----------
   The pieces of a booking flow: numbered step labels, category toggles, choice tiles for services, a scrolling row of
   day cards, time slots grouped by part of day, and a warm-black ticket that sums up the visit. Selection is
   aria-pressed="true" on the button. */
.agsc-step { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--agsc-space-3); font: var(--agsc-weight-light) 13px / 1.4 var(--agsc-font-ui); letter-spacing: var(--agsc-track-label); text-transform: uppercase; color: var(--agsc-ink-muted); }
.agsc-step b { display: inline-grid; place-content: center; flex: none; width: 26px; height: 26px; border: 1.5px dotted #B9A698; border-radius: var(--agsc-radius-round); font: 600 12px / 1 var(--agsc-font-ui); letter-spacing: 0; color: var(--agsc-ink); }
.agsc-toggles { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.agsc-toggle { flex: none; min-height: 38px; padding: 0 16px; border: 1px solid var(--agsc-line-soft); border-radius: var(--agsc-radius-pill); background: var(--agsc-white); font: var(--agsc-weight-light) 14px / 1 var(--agsc-font-ui); color: var(--agsc-ink); cursor: pointer; transition: background var(--agsc-fade) var(--agsc-ease), border-color var(--agsc-fade) var(--agsc-ease); }
.agsc-toggle:hover { border-color: #B9A698; }
.agsc-toggle[aria-pressed="true"] { background: var(--agsc-blush); border-color: var(--agsc-blush); font-weight: 600; }
.agsc-choice { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; width: 100%; padding: 16px 18px; border: 1px solid var(--agsc-line-soft); border-radius: var(--agsc-radius-soft); background: var(--agsc-white); text-align: left; color: var(--agsc-ink); cursor: pointer; transition: border-color var(--agsc-fade) var(--agsc-ease), background var(--agsc-fade) var(--agsc-ease); }
.agsc-choice:hover { border-color: #B9A698; }
.agsc-choice__name, .agsc-choice__price { font: var(--agsc-weight-bold) 17px / 1.25 var(--agsc-font-head); }
.agsc-choice__price { white-space: nowrap; }
.agsc-choice__meta { grid-column: 1 / -1; font: var(--agsc-weight-light) 13px / 1.3 var(--agsc-font-ui); color: var(--agsc-ink-soft); }
.agsc-choice[aria-pressed="true"] { border-color: var(--agsc-warm-black); outline: 1px solid var(--agsc-warm-black); outline-offset: -2px; background: var(--agsc-surface); }
.agsc-days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.agsc-day { flex: none; display: grid; justify-items: start; gap: 4px; width: 104px; padding: 12px 14px; border: 1px solid var(--agsc-line-soft); border-radius: var(--agsc-radius-soft); background: var(--agsc-white); text-align: left; white-space: nowrap; color: var(--agsc-ink); cursor: pointer; scroll-snap-align: start; transition: border-color var(--agsc-fade) var(--agsc-ease); }
.agsc-day:hover { border-color: #B9A698; }
.agsc-day small { font: var(--agsc-weight-light) 12px / 1 var(--agsc-font-ui); letter-spacing: 0.06em; text-transform: uppercase; color: var(--agsc-ink-soft); }
.agsc-day b { font: var(--agsc-weight-regular) 22px / 1.1 var(--agsc-font-head); }
.agsc-day em { font: normal var(--agsc-weight-light) 12px / 1 var(--agsc-font-ui); color: var(--agsc-ink-muted); }
.agsc-day[aria-pressed="true"] { background: var(--agsc-warm-black); border-color: var(--agsc-warm-black); color: var(--agsc-on-dark); }
.agsc-day[aria-pressed="true"] small, .agsc-day[aria-pressed="true"] em { color: #cfcaca; }
.agsc-day--more { place-content: center; justify-items: center; border-style: dashed; color: var(--agsc-ink-soft); font: var(--agsc-weight-light) 14px / 1.3 var(--agsc-font-ui); white-space: normal; text-align: center; }
.agsc-slots { display: grid; gap: 18px; }
.agsc-slots h4 { margin: 0 0 8px; font: var(--agsc-weight-light) 13px / 1.4 var(--agsc-font-ui); color: var(--agsc-ink-soft); }
.agsc-slots ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.agsc-slot { width: 100%; min-height: 44px; padding: 0 10px; border: 1px solid var(--agsc-line-soft); border-radius: var(--agsc-radius-soft); background: var(--agsc-white); font: var(--agsc-weight-regular) 16px / 1 var(--agsc-font-head); white-space: nowrap; color: var(--agsc-ink); cursor: pointer; transition: border-color var(--agsc-fade) var(--agsc-ease); }
.agsc-slot:hover { border-color: var(--agsc-ink); }
.agsc-slot[aria-pressed="true"] { background: var(--agsc-warm-black); border-color: var(--agsc-warm-black); color: var(--agsc-on-dark); }
.agsc-toggle:focus-visible, .agsc-choice:focus-visible, .agsc-day:focus-visible, .agsc-slot:focus-visible { outline: 2px solid var(--agsc-ink); outline-offset: 2px; }
.agsc-ticket { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--agsc-radius-soft); background: var(--agsc-warm-black); color: var(--agsc-on-dark); }
.agsc-ticket__mark { position: absolute; z-index: -1; right: -40px; top: -20px; width: 190px; height: 190px; opacity: 0.08; }
.agsc-ticket__top { padding: 24px 24px 20px; }
.agsc-ticket__label { margin: 0 0 10px; font: var(--agsc-weight-light) 13px / 1.4 var(--agsc-font-ui); letter-spacing: var(--agsc-track-label); text-transform: uppercase; color: #cfcaca; }
.agsc-ticket__name { margin: 0; font: var(--agsc-weight-regular) 26px / 1.15 var(--agsc-font-head); }
.agsc-ticket__when { margin: 10px 0 0; font: var(--agsc-weight-light) 16px / 1.45 var(--agsc-font-ui); }
.agsc-ticket__rows { display: grid; gap: 8px; margin: 0; padding: 18px 24px; border-top: 1.5px dotted rgba(255, 255, 255, 0.35); }
.agsc-ticket__rows div { display: flex; justify-content: space-between; gap: 16px; font: var(--agsc-weight-light) 15px / 1.3 var(--agsc-font-ui); color: #cfcaca; }
.agsc-ticket__rows dd { margin: 0; font-weight: 600; text-align: right; color: var(--agsc-on-dark); }
.agsc-ticket__go { display: grid; gap: 12px; padding: 0 24px 24px; }
.agsc-ticket__go .agsc-btn { width: 100%; background: var(--agsc-white); color: var(--agsc-ink); border-color: var(--agsc-white); }
.agsc-ticket__go .agsc-btn:hover { background: var(--agsc-blush); border-color: var(--agsc-blush); }
.agsc-ticket__go .agsc-btn:disabled { opacity: 0.45; cursor: default; background: var(--agsc-white); }
.agsc-ticket__go p { margin: 0; font: var(--agsc-weight-light) 13px / 1.45 var(--agsc-font-ui); color: #cfcaca; }
@media (prefers-reduced-motion: reduce) { .agsc-toggle, .agsc-choice, .agsc-day, .agsc-slot { transition: none; } }

/* ---------- Action bar (v1.8, softened in v1.8.1) ----------
   A card that floats above the bottom of the screen and repeats the page's main action once it has scrolled away:
   Add to cart on a product page, Continue when booking. Warm black with rounded corners, a short summary on the left
   and a soft blush button on the right; at most 640px wide, centered. It slides up when shown and down when [hidden].
   Give the page bottom padding (about 92px) so it never covers the footer. */
.agsc-actionbar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40; max-width: 640px; margin-inline: auto; padding: 10px 10px 10px 12px; border-radius: 14px; background: var(--agsc-warm-black); color: var(--agsc-on-dark); transition: transform 0.3s var(--agsc-ease-settle), visibility 0.3s; }
.agsc-actionbar[hidden] { display: block; visibility: hidden; transform: translateY(calc(100% + 24px)); }
.agsc-actionbar__inner { display: flex; align-items: center; gap: 12px; }
.agsc-actionbar__img { flex: none; width: 44px; height: 44px; border-radius: 8px; background: var(--agsc-white); object-fit: cover; }
.agsc-actionbar__text { flex: 1; min-width: 0; margin: 0; display: grid; font: var(--agsc-weight-light) 13px / 1.35 var(--agsc-font-ui); color: #cfcaca; }
.agsc-actionbar__text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--agsc-weight-regular) 16px / 1.3 var(--agsc-font-head); color: var(--agsc-on-dark); }
.agsc-actionbar .agsc-btn { flex: none; min-height: 44px; padding: 0 20px; border-radius: 10px; background: var(--agsc-blush); border-color: var(--agsc-blush); font: 600 15px / 1 var(--agsc-font-ui); letter-spacing: 0.02em; color: var(--agsc-ink); }
.agsc-actionbar .agsc-btn:hover { background: var(--agsc-white); border-color: var(--agsc-white); color: var(--agsc-ink); }
.agsc-actionbar .agsc-btn:disabled { opacity: 0.6; cursor: default; }
@media (prefers-reduced-motion: reduce) { .agsc-actionbar { transition: none; } }

/* ---------- Seal (v1.9) ----------
   A round stamp for a credential: a line of tracked caps around the top (Licensed Esthetician), a dotted a.dot ring
   inside, a short figure in the middle (20+ over YEARS) and an optional place along the bottom (Carson · LA, about
   11 characters at most). White with a warm hairline; 156px by default. Facts only,
   no ribbons, stars or "certified" language. Markup is an inline SVG (viewBox 0 0 200 200) so the text follows the arc. */
.agsc-seal { display: block; width: 156px; aspect-ratio: 1; border-radius: var(--agsc-radius-round); background: var(--agsc-white); color: var(--agsc-ink); box-shadow: inset 0 0 0 1px var(--agsc-line-soft); }
.agsc-seal svg { display: block; width: 100%; height: 100%; }
.agsc-seal text { fill: currentColor; }
.agsc-seal__arc { font: var(--agsc-weight-regular) 15.5px var(--agsc-font-ui); letter-spacing: 3.4px; text-transform: uppercase; }
.agsc-seal__big { font: var(--agsc-weight-regular) 50px var(--agsc-font-head); }
.agsc-seal__small { font: var(--agsc-weight-light) 12px var(--agsc-font-ui); letter-spacing: 3px; text-transform: uppercase; }
.agsc-seal__dots circle { fill: currentColor; opacity: 0.7; }

@media (prefers-reduced-motion: reduce) {
  .agsc-btn, .agsc-signup input { transition: none; }
  .agsc-note img { transition: none; }
  .agsc-product, .agsc-product img { transition: none; }
  .agsc-product:hover img { transform: none; }
  .agsc-accordion summary::after, .agsc-sidetabs [role="tab"] { transition: none; }
  details[open] > .agsc-accordion__answer { animation: none; }
}