/* AG StoreBuilder: per-section and per-banner looks (box colors, borders, text styles).
   Shared by the storefront and the admin preview. Classes come from AGThemes.lookBits(). */
:root { --ink0: var(--ink, #111111); --muted0: var(--muted, #4A4A47); --faint0: var(--faint, #6B6B67); --line0: var(--line, #E6E6E3); }

/* ---- Box ---- */
.sx-bgset { background: var(--sx-bg) !important; }
.sx-bd { border: var(--sx-border) !important; }
.sx-rad { border-radius: var(--sx-radius) !important; }
.sx-shadow { box-shadow: 0 18px 48px -18px rgba(0, 0, 0, .32), 0 2px 6px rgba(0, 0, 0, .05) !important; }
.sx-glass {
  background: rgba(255, 255, 255, .62) !important;
  background: color-mix(in srgb, var(--bg, #fff) 62%, transparent) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
}
.sx-sec.sx-box { border-radius: 20px; padding: clamp(22px, 4vw, 44px); }
.sx-sec.sx-box > .section-head:last-child, .sx-sec.sx-box .wrap > .section-head:last-child { margin-bottom: 0; }
/* Full-width strips (scrolling best sellers / reviews) become a framed card */
.sx-sec.sx-box.sx-full { padding-left: 0; padding-right: 0; overflow: hidden; margin: 0 max(24px, calc((100% - 1232px) / 2)); }
@media (max-width: 600px) {
  .sx-sec.sx-box.sx-full { margin: 0 16px; }
  .sx-sec.sx-box { padding: 20px; }
  .sx-sec.sx-box.sx-full { padding: 20px 0; }
}
/* Classic banner: frame the whole slide */
.hero-grid.sx-box { padding: clamp(18px, 3vw, 36px); border-radius: 24px; }
.hero-grid.sx-box .hero-copy { padding: 0; }
.hero-full.sx-box { border-radius: 0; }
.hero-full.sx-rad { margin: 0 auto; max-width: calc(100% - 32px); }

/* Transparent: drop the background of the section's cards too */
.sx-clear, .sx-clear :is(.step, .review, .tier, .branch, .quick-book, .hero-media) { background: transparent !important; box-shadow: none !important; }
.has-wall .sx-clear :is(.branch, .tier, .quick-book) { background: transparent !important; }
.promo.sx-clear { color: var(--ink); border: 1px solid var(--line); }
.promo.sx-clear p, .promo.sx-on-light p { color: var(--muted); }
.promo.sx-clear .eyebrow, .promo.sx-on-light .eyebrow { color: var(--accent); opacity: 1; }
.promo.sx-clear .btn.light, .promo.sx-on-light .btn.light { background: var(--accent); color: var(--accent-ink); }
.promo.sx-on-light { color: var(--ink); }
.lay-boutique .promo.sx-clear, .lay-boutique .promo.sx-on-light { color: var(--ink); }

/* Dark or colored boxes: light text, cards inside keep normal colors */
.sx-on-dark { color: #fff; --ink: #fff; --muted: rgba(255, 255, 255, .8); --faint: rgba(255, 255, 255, .62); --line: rgba(255, 255, 255, .24); }
.sx-on-dark .eyebrow { color: inherit !important; opacity: .82; }
.sx-on-dark :is(.lead, .sh-sub, p) { color: rgba(255, 255, 255, .86); }
.sx-on-dark :is(.review, .step, .tier, .branch, .quick-book, .svc-row, .package, .card .ph) {
  --ink: var(--ink0); --muted: var(--muted0); --faint: var(--faint0); --line: var(--line0);
  color: var(--ink0); background: var(--bg, #fff);
}
.sx-on-dark :is(.step, .tier, .branch) p { color: var(--muted0); }
.sx-on-dark .btn.light { color: #111; }
.sx-on-dark .btn.outline { border-color: #fff; color: #fff; }
.sx-on-accent .btn:not(.light):not(.outline) { background: var(--accent-ink); color: var(--accent); }
.has-wall .sx-box :is(.section-head h2, .lead, .sh-sub, h1, h2) { text-shadow: none; }
.hero-svc .hero-copy.sx-on-dark > img ~ .hero-text { color: var(--ink0); }

/* ---- Text ---- */
.sx-tfont :is(h1, h2, .h1like) { font-family: var(--sx-tf) !important; }
.sx-bfont { font-family: var(--sx-bf); }
.sx-bfont :is(.lead, .sh-sub, p, .eyebrow) { font-family: var(--sx-bf); }

/* Title sizes: sections */
.sx-sec.ts-s :is(h1, h2), .promo.ts-s h2 { font-size: 22px !important; }
.sx-sec.ts-l :is(h1, h2), .promo.ts-l h2 { font-size: clamp(34px, 5vw, 50px) !important; }
.sx-sec.ts-xl :is(h1, h2), .promo.ts-xl h2 { font-size: clamp(40px, 7.4vw, 72px) !important; line-height: 1.02; }
/* Title sizes: banners */
.sx-hero.ts-s :is(h1, h2, .h1like) { font-size: clamp(26px, 3.6vw, 38px) !important; }
.sx-hero.ts-l :is(h1, h2, .h1like) { font-size: clamp(48px, 8.5vw, 96px) !important; }
.sx-hero.ts-xl :is(h1, h2, .h1like) { font-size: clamp(54px, 11vw, 128px) !important; line-height: 1; }
/* Text sizes */
.bs-s :is(.lead, .sh-sub), .promo.bs-s p { font-size: 14px !important; }
.bs-l :is(.lead, .sh-sub), .promo.bs-l p { font-size: 20px !important; }
.bs-xl :is(.lead, .sh-sub), .promo.bs-xl p { font-size: 24px !important; line-height: 1.5; }

.tw-light :is(h1, h2, .h1like) { font-weight: 300 !important; }
.tw-normal :is(h1, h2, .h1like) { font-weight: 400 !important; }
.tw-bold :is(h1, h2, .h1like) { font-weight: 800 !important; }
.t-italic :is(h1, h2, .h1like) { font-style: italic; }
.t-upper :is(h1, h2, .h1like) { text-transform: uppercase; letter-spacing: .03em; }
.t-underline :is(h1, h2, .h1like) { text-decoration: underline; text-decoration-thickness: .07em; text-underline-offset: .14em; }
.t-spaced :is(h1, h2, .h1like) { letter-spacing: .12em !important; }

.sx-tc :is(h1, h2, .h1like, .eyebrow) { color: var(--sx-tc) !important; }
.sx-tc .eyebrow { opacity: .85; }
.sx-bc :is(.lead, .sh-sub), .promo.sx-bc p { color: var(--sx-bc) !important; }

/* Alignment */
.ta-left :is(.section-head, .sh-text, .hero-text, .hero-copy, .hero-in, .two-col > div:first-child),
.promo.ta-left > div { text-align: left !important; align-items: flex-start !important; }
.ta-center :is(.section-head, .sh-text, .hero-text, .hero-copy, .hero-in, .two-col > div:first-child),
.promo.ta-center > div { text-align: center !important; align-items: center !important; }
.ta-right :is(.section-head, .sh-text, .hero-text, .hero-copy, .hero-in, .two-col > div:first-child),
.promo.ta-right > div { text-align: right !important; align-items: flex-end !important; }
.ta-center .section-head, .ta-right .section-head { flex-direction: column; gap: 8px; }
.ta-left .btn-row { justify-content: flex-start !important; }
.ta-center .btn-row { justify-content: center !important; }
.ta-right .btn-row { justify-content: flex-end !important; }
.ta-left .hero-in { margin-right: auto; }
.hero-strip.ta-center .hero-in { flex-direction: column; justify-content: center; }
.hero-strip.ta-right .hero-in { flex-direction: row-reverse; }
.promo.ta-center { flex-direction: column; text-align: center; }
.promo.ta-right { flex-direction: row-reverse; text-align: right; }
/* Accent-colored small text stays readable on dark boxes */
.sx-on-dark :is(.ws-note, .svc-row .ws-note) { color: rgba(255, 255, 255, .85); }
.sx-on-dark a:hover { color: inherit; opacity: .8; }