/*
 * QAVEX storefront traits: finishing touches a theme variant switches on in
 * theme.json ("traits"). They sit on top of the base design so five themes in
 * one category can share good bones and still look clearly different.
 */

/* ---------------------------------------------------------------- header */
.qs.trait-header-dark .qs-header { background: var(--qs-dark); color: var(--qs-on-dark); border-bottom-color: transparent; }
.qs.trait-header-dark .qs-header .qs-nav > ul > li > a { color: color-mix(in srgb, var(--qs-on-dark) 80%, transparent); }
.qs.trait-header-dark .qs-header .qs-nav > ul > li > a:hover,
.qs.trait-header-dark .qs-header .qs-nav > ul > li > a.is-active { color: var(--qs-on-dark); }
.qs.trait-header-dark .qs-header .qs-logo-text { color: var(--qs-on-dark); }
.qs.trait-header-dark .qs-header .qs-sub a { color: var(--qs-ink); }
.qs.trait-header-dark .qs-header .qs-icon,
.qs.trait-header-dark .qs-header .qs-burger,
.qs.trait-header-dark .qs-header .qs-search-pill { background: var(--qs-dark-line); color: var(--qs-on-dark); box-shadow: none; }
.qs.trait-header-dark .qs-header .qs-icon--wa { background: var(--qs-wa); color: #fff; }
.qs.trait-header-dark .qs-header .qs-logo img { background: #fff; padding: 4px 8px; border-radius: 6px; }

.qs.trait-header-accent .qs-header { background: var(--qs-accent); color: var(--qs-on-accent); border-bottom-color: transparent; }
.qs.trait-header-accent .qs-header .qs-nav > ul > li > a,
.qs.trait-header-accent .qs-header .qs-logo-text { color: var(--qs-on-accent); }
.qs.trait-header-accent .qs-header .qs-nav > ul > li > a.is-active { box-shadow: inset 0 -3px 0 currentColor; }
.qs.trait-header-accent .qs-header .qs-sub a { color: var(--qs-ink); }
.qs.trait-header-accent .qs-header .qs-icon,
.qs.trait-header-accent .qs-header .qs-burger,
.qs.trait-header-accent .qs-header .qs-search-pill { background: color-mix(in srgb, var(--qs-on-accent) 14%, transparent); color: var(--qs-on-accent); box-shadow: none; }
.qs.trait-header-accent .qs-header .qs-icon--wa { background: var(--qs-wa); color: #fff; }
.qs.trait-header-accent .qs-header .qs-logo img { background: #fff; padding: 4px 8px; border-radius: 6px; }

.qs.trait-header-line .qs-header { border-bottom: 3px solid var(--qs-accent); }

.qs.trait-nav-upper .qs-nav > ul > li > a { text-transform: uppercase; letter-spacing: .12em; font-size: 12.5px; }
.qs.trait-nav-pill .qs-nav > ul > li > a { padding: 8px 14px; border-radius: 999px; }
.qs.trait-nav-pill .qs-nav > ul > li > a.is-active { box-shadow: none; background: var(--qs-accent); color: var(--qs-on-accent); }

/* ---------------------------------------------------------------- hero */
.qs.trait-hero-center .qs-hero { justify-content: center; text-align: center; }
.qs.trait-hero-center .qs-hero-content { display: grid; justify-items: center; margin: 0 auto; }
.qs.trait-hero-center .qs-hero .qs-slides::after { background: rgba(0, 0, 0, .42); }
.qs.trait-hero-rounded .qs-hero { border-radius: 28px; }
.qs.trait-hero-rounded .qs-split-frame { border-radius: 28px; overflow: hidden; }
.qs.trait-hero-square .qs-hero, .qs.trait-hero-square .qs-split-frame { border-radius: 0; }
.qs.trait-hero-tint .qs-hero .qs-slides::after { background: linear-gradient(110deg, color-mix(in srgb, var(--qs-accent) 72%, #000) 0%, color-mix(in srgb, var(--qs-accent) 25%, transparent) 65%); }
.qs.trait-hero-tall .qs-hero { min-height: clamp(520px, 56vw, 760px); }

/* ---------------------------------------------------------------- type */
.qs.trait-type-upper h1, .qs.trait-type-upper h2, .qs.trait-type-upper .qs-card h3 { text-transform: uppercase; }
.qs.trait-type-italic h1, .qs.trait-type-italic .qs-sec-head h2 { font-style: italic; }
.qs.trait-type-tight h1, .qs.trait-type-tight h2 { letter-spacing: -0.045em; line-height: .98; }

/* ---------------------------------------------------------------- sections */
.qs.trait-sec-center .qs-sec-head { flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.qs.trait-sec-line .qs-sec-head h2::after, .qs.trait-sec-line .qs-sec-head h1::after { content: ""; display: block; width: 48px; height: 4px; margin-top: 10px; border-radius: 2px; background: var(--qs-accent); }
.qs.trait-sec-center.trait-sec-line .qs-sec-head h2::after { margin-left: auto; margin-right: auto; }
.qs.trait-eyebrow-pill .qs-eyebrow { display: inline-block; padding: 4px 12px; border-radius: 999px; background: color-mix(in srgb, var(--qs-accent) 16%, var(--qs-bg)); color: var(--qs-accent-text); letter-spacing: .06em; }
.qs.trait-latest-band-accent .qs-section--latest { background: color-mix(in srgb, var(--qs-accent) 10%, var(--qs-bg)); }
.qs.trait-latest-band-dark .qs-section--latest { background: var(--qs-dark); color: var(--qs-on-dark); }
.qs.trait-latest-band-dark .qs-section--latest .qs-card { background: color-mix(in srgb, var(--qs-on-dark) 7%, var(--qs-dark)); color: var(--qs-on-dark); border-color: var(--qs-dark-line); }
.qs.trait-latest-band-dark .qs-section--latest .qs-muted, .qs.trait-latest-band-dark .qs-section--latest .qs-desc { color: var(--qs-dark-muted); }
/* Keep every text on the dark band readable, whatever colour the theme gives it elsewhere. */
.qs.trait-latest-band-dark .qs-section--latest .qs-eyebrow,
.qs.trait-latest-band-dark .qs-section--latest .qs-kind { color: color-mix(in srgb, var(--qs-accent) 55%, #fff); }
.qs.trait-latest-band-dark .qs-section--latest .qs-price,
.qs.trait-latest-band-dark .qs-section--latest .qs-sec-head h2,
.qs.trait-latest-band-dark .qs-section--latest .qs-link,
.qs.trait-latest-band-dark .qs-section--latest .qs-card h3,
.qs.trait-latest-band-dark .qs-section--latest .qs-card h3 a { color: var(--qs-on-dark); }
.qs.trait-latest-band-dark .qs-section--latest .qs-card-body > *:not(.qs-card-btns):not(.qs-kind):not(.qs-price) { color: inherit; }

/* ---------------------------------------------------------------- cards */
.qs.trait-cards-shadow .qs-card { border: 0; background: var(--qs-surface, #fff); box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 10px 28px rgba(0, 0, 0, .08); }
.qs.trait-cards-outline .qs-card { background: transparent; box-shadow: none; border: 1.5px solid color-mix(in srgb, var(--qs-ink) 22%, var(--qs-bg)); }
.qs.trait-cards-flat .qs-card { border: 0; box-shadow: none; background: var(--qs-band); }
.qs.trait-cards-inset .qs-card-img { margin: 8px 8px 0; border-radius: calc(var(--qs-radius) * .75); overflow: hidden; }
.qs.trait-cards-center .qs-card { text-align: center; }
.qs.trait-cards-center .qs-card-btns { justify-content: center; }
.qs.trait-cards-tall { --qs-card-ratio: 3 / 4; }
.qs.trait-cards-wide { --qs-card-ratio: 4 / 3; }
.qs.trait-cards-square .qs-card, .qs.trait-cards-square .qs-card-img, .qs.trait-cards-square .qs-badge { border-radius: 0; }
.qs.trait-price-accent .qs-price { color: var(--qs-accent-text); }
.qs.trait-price-big .qs-price { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }

/* ---------------------------------------------------------------- buttons */
.qs.trait-btn-pill { --qs-btn-radius: 999px; }
.qs.trait-btn-square { --qs-btn-radius: 0; }
.qs.trait-btn-pill .qs-btn, .qs.trait-btn-pill .qs-chip { border-radius: 999px; }
.qs.trait-btn-square .qs-btn, .qs.trait-btn-square .qs-chip { border-radius: 0; }
.qs.trait-btn-outline .qs-card-btns .qs-btn--dark { background: transparent; color: var(--qs-ink) !important; box-shadow: inset 0 0 0 1.5px currentColor; clip-path: none; }
.qs.trait-btn-upper .qs-btn { text-transform: uppercase; letter-spacing: .08em; font-size: 12.5px; }

/* ---------------------------------------------------------------- footer */
.qs.trait-footer-accent .qs-footer { background: var(--qs-accent); color: var(--qs-on-accent); }
.qs.trait-footer-accent .qs-footer h4, .qs.trait-footer-accent .qs-footer p, .qs.trait-footer-accent .qs-footer a { color: var(--qs-on-accent); }
.qs.trait-footer-light .qs-footer { background: var(--qs-band); color: var(--qs-ink); border-top: 1px solid var(--qs-line); }
.qs.trait-footer-light .qs-foot h4, .qs.trait-footer-light .qs-foot p, .qs.trait-footer-light .qs-foot a { color: var(--qs-ink); }

/* ---------------------------------------------------------------- tiles */
.qs.trait-tiles-round .qs-tile-img { border-radius: 50%; aspect-ratio: 1; }
.qs.trait-tiles-square .qs-tile-img { border-radius: 0; }

@container qs (max-width: 640px) {
	.qs.trait-hero-rounded .qs-hero { border-radius: 20px; }
	.qs.trait-price-big .qs-price { font-size: 17px; }
}

/* ---------------------------------------------------------------- profile hero (creator themes) */
.qs.trait-profile-left .qs-profile-in { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.qs.trait-profile-left .qs-profile-media { order: -1; }
.qs.trait-profile-left .qs-profile-photo { border-radius: 24px; aspect-ratio: 1; }
.qs.trait-profile-center .qs-profile-in { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 28px; }
.qs.trait-profile-center .qs-profile-media { order: -1; width: min(100%, 220px); }
.qs.trait-profile-center .qs-profile-photo { border-radius: 50%; aspect-ratio: 1; }
.qs.trait-profile-center .qs-profile-ring { inset: -12px; width: auto; border-style: solid; }
.qs.trait-profile-center .qs-profile-text > p { margin-left: auto; margin-right: auto; }
.qs.trait-profile-center .qs-profile-btns, .qs.trait-profile-center .qs-profile-stats { justify-content: center; }
.qs.trait-profile-band .qs-profile { background: var(--qs-dark); color: var(--qs-on-dark); }
.qs.trait-profile-band .qs-profile-text > p { color: var(--qs-dark-muted); }
.qs.trait-profile-band .qs-profile-stats a { background: color-mix(in srgb, var(--qs-on-dark) 8%, var(--qs-dark)); border-color: var(--qs-dark-line); color: var(--qs-on-dark); }
.qs.trait-profile-band .qs-profile-stats span { color: var(--qs-dark-muted); }
.qs.trait-profile-square .qs-profile-photo { border-radius: 0; box-shadow: 18px 18px 0 var(--qs-accent); }
.qs.trait-profile-square .qs-profile-ring { display: none; }
.qs.trait-profile-frame .qs-profile-photo { border-radius: 28px; aspect-ratio: 3 / 4; transform: rotate(2deg); box-shadow: 0 0 0 10px var(--qs-surface), 0 30px 60px -20px rgba(0, 0, 0, .35); }
.qs.trait-profile-frame .qs-profile-ring { display: none; }
@container qs (max-width: 900px) {
	.qs.trait-profile-left .qs-profile-in { grid-template-columns: 1fr; }
}