/* ============================================================
   Aster Aesthetics shared components. One class per element,
   usable on any page (site and store). Values come from tokens.css.
   Section shells (.ae-section, .ae-wrap, .ae-line, .ae-blush,
   .ae-center) and the header/footer live in aster-design.css.
   State helper classes (.is-hover, .is-focus, .is-active,
   .is-disabled) exist so the brand page can show every state.
   The "legacy aliases" block at the end maps older page-specific
   class names onto these components; remove an alias once its
   markup has been migrated to the ae-* class.
   ============================================================ */

/* ---------------------------------------------------- buttons */
.ae-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--ae-control-height); padding: var(--ae-button-pad);
  border: 1px solid var(--ae-ink); border-radius: var(--ae-radius); box-shadow: var(--ae-shadow);
  background: var(--ae-ink); color: #fff;
  font: 500 var(--ae-label)/1.5 var(--ae-sans); letter-spacing: var(--ae-label-tracking); text-transform: uppercase;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: background var(--ae-transition), color var(--ae-transition), border-color var(--ae-transition);
}
.ae-button:is(:hover, .is-hover, :focus-visible, .is-focus) { background: var(--ae-hover); border-color: var(--ae-hover); color: #fff; }
.ae-button:is(:focus-visible, .is-focus) { outline: 2px solid var(--ae-wine); outline-offset: 4px; }
.ae-button:is(:disabled, .is-disabled, [aria-disabled="true"]) { background: var(--ae-line); border-color: var(--ae-line); color: var(--ae-muted); cursor: not-allowed; }

.ae-button--outline { background: transparent; color: var(--ae-ink); }
.ae-button--outline:is(:hover, .is-hover, :focus-visible, .is-focus) { background: var(--ae-hover); border-color: var(--ae-hover); color: #fff; }

.ae-button--on-dark { background: #fff; border-color: #fff; color: var(--ae-ink); }
.ae-button--on-dark:is(:hover, .is-hover, :focus-visible, .is-focus) { background: var(--ae-hover); border-color: var(--ae-hover); color: #fff; }
.ae-button--ghost-on-dark { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
.ae-button--ghost-on-dark:is(:hover, .is-hover, :focus-visible, .is-focus) { background: var(--ae-hover); border-color: var(--ae-hover); color: #fff; }

.ae-button--block { display: flex; width: 100%; }

/* ------------------------------------------------------ links */
.ae-link {
  display: inline-flex; align-items: center; gap: 8px; padding: 2px 0 4px;
  border: 0; border-bottom: 1px solid var(--ae-wine); background: none;
  color: var(--ae-wine); font: 500 var(--ae-label)/1.6 var(--ae-sans); letter-spacing: .13em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; min-height: 0;
}
.ae-link:is(:hover, .is-hover, :focus-visible, .is-focus) { color: var(--ae-ink); border-bottom-color: var(--ae-ink); }
.ae-text-link { color: var(--ae-wine); text-decoration: underline; text-underline-offset: 4px; }
.ae-text-link:is(:hover, .is-hover) { color: var(--ae-ink); }

/* ---------------------------------------------------- labels */
.ae-eyebrow { font: 500 var(--ae-label)/1.6 var(--ae-sans); letter-spacing: var(--ae-eyebrow-tracking); text-transform: uppercase; color: var(--ae-wine); margin: 0 0 20px; }
.ae-eyebrow--on-dark { color: rgba(255,255,255,.8); }
/* .ae-eyebrow--rule: the leading dash was retired 2026-11-06; the modifier is kept so existing markup still parses. */
.ae-card-title { font: 500 15px/1.6 var(--ae-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ae-ink); margin: 20px 0 0; }
.ae-fine { font: 400 var(--ae-fine)/1.7 var(--ae-sans); color: var(--ae-muted); }

/* ------------------------------------------------------ cards */
.ae-card { display: block; background: #fff; border: 1px solid var(--ae-line); border-radius: var(--ae-radius); box-shadow: var(--ae-shadow); padding: var(--ae-card-pad); color: var(--ae-ink); text-decoration: none; transition: border-color var(--ae-transition); }
.ae-card:is(:hover, .is-hover, :focus-visible, .is-focus) { border-color: var(--ae-wine); }
.ae-card--blush { background: var(--ae-blush); }
.ae-card--fill:is(:hover, .is-hover, :focus-visible, .is-focus) { background: var(--ae-wine); border-color: var(--ae-wine); }
.ae-card--fill:is(:hover, .is-hover, :focus-visible, .is-focus) * { color: #fff !important; border-color: rgba(255,255,255,.55) !important; }
.ae-card--fill:is(:hover, .is-hover, :focus-visible, .is-focus) p { color: rgba(255,255,255,.85) !important; }
.ae-note { background: var(--ae-blush); border: 1px solid var(--ae-line); padding: 24px 28px; }

/* ------------------------------------------------------ tiles */
.ae-tile { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 84px; padding: 18px 22px; border: 1px solid var(--ae-card-border); border-radius: var(--ae-radius); background: transparent; color: var(--ae-ink); font: 400 13px/1.6 var(--ae-sans); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.ae-tile:is(:hover, .is-hover, :focus-visible, .is-focus) { border-color: var(--ae-wine); color: var(--ae-wine); }
.ae-tile:is(.is-active, [aria-pressed="true"], [aria-current]) { background: var(--ae-ink); border-color: var(--ae-ink); color: #fff; }
.ae-tile > span { flex-shrink: 0; font-size: 20px; color: var(--ae-wine); }
.ae-tile--compact { min-height: 44px; padding: 10px 18px; font-size: var(--ae-label); letter-spacing: var(--ae-label-tracking); }
.ae-chip { display: inline-block; padding: 7px 11px; border: 1px solid var(--ae-line); font: 500 10px/1.5 var(--ae-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ae-ink); }

/* ----------------------------------------------- image frames */
.ae-frame { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--ae-placeholder); border-radius: var(--ae-radius); }
.ae-frame--1x1 { aspect-ratio: 1 / 1; }
.ae-frame--16x9 { aspect-ratio: 16 / 9; }
.ae-frame--3x4 { aspect-ratio: 3 / 4; }
.ae-frame > img, .ae-frame > picture, .ae-frame > video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.ae-frame--contain > img { object-fit: contain; background: var(--ae-blush); }
.ae-image-tag { position: absolute; left: 14px; top: 14px; background: #fff; color: var(--ae-wine); padding: 7px 11px; font: 500 10px/1.5 var(--ae-sans); letter-spacing: .14em; text-transform: uppercase; }
.ae-image-tag--bottom { top: auto; bottom: 12px; left: 12px; background: rgba(255,255,255,.92); color: var(--ae-ink); }
.ae-caption { font: 400 var(--ae-small)/1.7 var(--ae-sans); color: var(--ae-muted); margin: 10px 0 0; }

/* ------------------------------------------------------ forms */
.ae-label { display: block; font: 500 var(--ae-label)/1.6 var(--ae-sans); letter-spacing: var(--ae-label-tracking); text-transform: uppercase; color: var(--ae-ink); margin: 0 0 8px; }
.ae-input, .ae-select, .ae-textarea { display: block; width: 100%; min-height: var(--ae-input-height); padding: 14px 16px; border: 1px solid var(--ae-ink); border-radius: var(--ae-radius); box-shadow: var(--ae-shadow); background: #fff; color: var(--ae-ink); font: 400 16px/1.5 var(--ae-sans); }
.ae-textarea { min-height: 140px; resize: vertical; }
.ae-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23241c1d' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
:is(.ae-input, .ae-select, .ae-textarea):is(:focus-visible, .is-focus) { outline: 2px solid var(--ae-wine); outline-offset: 3px; }
:is(.ae-input, .ae-select, .ae-textarea):is(:disabled, .is-disabled) { background: var(--ae-blush); color: var(--ae-muted); border-color: var(--ae-line); }
.ae-input.is-error, .ae-select.is-error, .ae-textarea.is-error { border-color: var(--ae-wine); }
.ae-field-error { font: 400 var(--ae-small)/1.6 var(--ae-sans); color: var(--ae-wine); margin: 6px 0 0; }
.ae-check { display: inline-flex; align-items: center; gap: 10px; font: 400 14px/1.5 var(--ae-sans); color: var(--ae-ink); cursor: pointer; }
.ae-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--ae-wine); border-radius: 0; }
.ae-inline-form { display: flex; align-items: stretch; max-width: 560px; }
.ae-inline-form .ae-input { flex: 1; min-width: 0; }
.ae-inline-form .ae-button { flex-shrink: 0; }
@media (max-width: 600px) { .ae-inline-form { flex-direction: column; gap: 10px; } }

/* ------------------------------------------------- pagination */
.ae-pagination { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; }
.ae-page, .ae-arrow { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 44px; padding: 0; border: 1px solid var(--ae-line); border-radius: var(--ae-radius); background: transparent; color: var(--ae-ink); font: 400 13px/1 var(--ae-sans); text-decoration: none; cursor: pointer; }
.ae-arrow { font: 400 25px/1 var(--ae-serif); }
.ae-page:is(.is-active, [aria-current="page"]) { background: var(--ae-wine); border-color: var(--ae-wine); color: #fff; }
:is(.ae-page:not(.is-active), .ae-arrow):is(:hover, .is-hover, :focus-visible, .is-focus) { border-color: var(--ae-wine); color: var(--ae-wine); }

/* ------------------------------------------------ list rows */
.ae-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ae-line); }
.ae-rows > li > a, .ae-rows > li > div { display: grid; grid-template-columns: 30px 1fr 24px; align-items: center; gap: 16px; padding: 26px 0; border-bottom: 1px solid var(--ae-line); color: var(--ae-ink); text-decoration: none; }
.ae-rows span:first-child { font-size: 12px; color: var(--ae-wine); }
.ae-rows h3 { font: 500 26px/1.2 var(--ae-serif); margin: 0; }
.ae-rows > li > a:is(:hover, .is-hover) h3 { color: var(--ae-wine); }

/* --------------------------------------------------- numbers */
.ae-number { font: 500 52px/1 var(--ae-serif); color: var(--ae-wine); }
.ae-number--box { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid var(--ae-ink); font-size: 18px; color: var(--ae-wine); }

/* ------------------------------------------------- circles */
.ae-circle { border-radius: var(--ae-radius-circle) !important; }
.ae-avatar { width: 36px; height: 36px; border-radius: var(--ae-radius-circle); background: var(--ae-line); color: var(--ae-ink); display: inline-flex; align-items: center; justify-content: center; font: 500 13px/1 var(--ae-sans); object-fit: cover; }

/* --------------------------------------------------- dividers */
.ae-divider { height: 1px; background: var(--ae-line); border: 0; margin: 24px 0; }
.ae-rule { width: 56px; height: 1px; background: var(--ae-line); margin: 28px auto; }

/* ====================================================================
   Legacy aliases. Older page stylesheets still use these names; map them
   onto the components above so there is one definition. !important is
   needed because the page sheets load earlier with higher specificity.
   ==================================================================== */
.service-refresh__button, .about-refresh__button, .home-refresh-button, .customer-button, .customer-page .btn, .book-now-btn, .tm2-write,
a.bg-black, button.bg-black, a.bg-gunpowder, button.bg-gunpowder, a.bg-gray-900, button.bg-gray-900 {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  min-height: var(--ae-control-height); padding: var(--ae-button-pad) !important;
  border: 1px solid var(--ae-ink) !important; border-radius: var(--ae-radius) !important; box-shadow: var(--ae-shadow) !important;
  background: var(--ae-ink) !important; color: #fff !important;
  font-family: var(--ae-sans) !important; font-size: var(--ae-label) !important; font-weight: 500 !important; line-height: 1.5 !important;
  letter-spacing: var(--ae-label-tracking) !important; text-transform: uppercase !important; text-decoration: none !important;
}
.service-refresh__button--secondary, .service-refresh__button--ghost, .about-refresh__button--secondary, .about-refresh__button--ghost,
.home-refresh-button--secondary, .home-refresh-button--ghost, .customer-page .btn-secondary {
  background: transparent !important; color: var(--ae-ink) !important;
}
.service-refresh__button--light, .about-refresh__button--light, .customer-page .btn-on-dark { background: #fff !important; border-color: #fff !important; color: var(--ae-ink) !important; }
.service-refresh__section--dark .service-refresh__button--ghost, .about-refresh__section--dark .about-refresh__button--ghost { border-color: rgba(255,255,255,.55) !important; color: #fff !important; }
:is(.service-refresh__button, .about-refresh__button, .home-refresh-button, .customer-button, .customer-page .btn, .book-now-btn, .tm2-write,
    a.bg-black, button.bg-black, a.bg-gunpowder, button.bg-gunpowder, a.bg-gray-900, button.bg-gray-900):is(:hover, :focus-visible) {
  background: var(--ae-hover) !important; border-color: var(--ae-hover) !important; color: #fff !important; filter: none !important;
}
.service-refresh__eyebrow, .about-refresh__eyebrow, .home-refresh-eyebrow, .customer-eyebrow, .tm2-eyebrow, .customer-page .eyebrow {
  font-family: var(--ae-sans) !important; font-size: var(--ae-label) !important; font-weight: 500 !important; letter-spacing: var(--ae-eyebrow-tracking) !important; text-transform: uppercase !important; color: var(--ae-wine) !important;
}
.service-refresh__eyebrow--light, .about-refresh__eyebrow--light { color: rgba(255,255,255,.8) !important; }