/* Commerce Studio X storefront — structural compatibility layer.
 * The active theme owns typography, palette, buttons, fields and card styling.
 */
.qasf-section-shell,
.qasf-section-shell *,
.qasf-page,
.qasf-page * {
    box-sizing: border-box;
}

.qasf-section-shell,
.qasf-section,
.qasf-container,
.qasf-page {
    width: 100%;
    max-width: 100%;
}

.qasf-section {
    margin-block: var(--global-md-spacing, 2rem);
}

.qasf-section-heading {
    margin-block-end: var(--global-md-spacing, 1.5rem);
}

.qasf-section-heading h2,
.qasf-section-heading p,
.qasf-page-header h1,
.qasf-page-header p {
    margin-block-start: 0;
}

.qasf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
    gap: var(--global-md-spacing, 1.5rem);
}

.qasf-actions,
.qasf-section-action,
.qasf-city-prompt,
.qasf-current-city,
.qasf-selected-city {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--global-sm-spacing, 0.75rem);
}

.qasf-section-action {
    justify-content: center;
    margin-block-start: var(--global-md-spacing, 1.5rem);
}

.qasf-button,
.qasf-card-button {
    text-align: center;
}

.qasf-city-prompt,
.qasf-current-city,
.qasf-empty-products,
.qasf-admin-hint {
    padding: var(--global-sm-spacing, 1rem);
    margin-block-end: var(--global-md-spacing, 1.5rem);
    background: color-mix(in srgb, currentColor 5%, transparent);
}

.qasf-empty-products {
    display: grid;
    place-items: center;
    min-height: 10rem;
    text-align: center;
}

.qasf-product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.qasf-product-card__media {
    position: relative;
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
}

.qasf-product-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.qasf-product-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--global-xs-spacing, 0.5rem);
    min-width: 0;
    padding-block: var(--global-sm-spacing, 1rem);
}

.qasf-product-card h3,
.qasf-product-card__excerpt {
    margin-block: 0;
}

.qasf-product-card__price {
    margin-block-start: auto;
}

.qasf-product-card__rating {
    display: flex;
    align-items: center;
    gap: 0.4em;
}

.qasf-card-button {
    width: 100%;
    margin-block-start: auto;
}

.qasf-sale-badge {
    position: absolute;
    z-index: 2;
    inset-block-start: 0.75rem;
    inset-inline-start: 0.75rem;
    padding: 0.3em 0.55em;
    color: var(--global-palette9, var(--wp--preset--color--base, Canvas));
    background: var(--global-palette1, var(--wp--preset--color--primary, LinkText));
}

.qasf-term-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    padding: var(--global-sm-spacing, 1rem);
    text-align: center;
    text-decoration: none;
}

.qasf-term-card__media {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.qasf-term-card__media img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.qasf-term-card__content {
    display: grid;
    gap: 0.35em;
    min-width: 0;
}

.qasf-term-card__description {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.qasf-term-fallback {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    min-width: 3em;
    background: color-mix(in srgb, currentColor 8%, transparent);
}

.qasf-feature-card {
    display: flex;
    align-items: flex-start;
    gap: var(--global-sm-spacing, 1rem);
    min-width: 0;
}

.qasf-feature-icon {
    flex: 0 0 auto;
}

.qasf-feature-card h3,
.qasf-feature-card p {
    margin-block-start: 0;
}

.qasf-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--global-md-spacing, 1.5rem);
    padding: var(--global-lg-spacing, 2rem);
    background: color-mix(in srgb, currentColor 5%, transparent);
}

.qasf-cta h2,
.qasf-cta p {
    margin-block-start: 0;
}

.qasf-html-section img {
    max-width: 100%;
    height: auto;
}

/* Hero slider. Only layout and viewport safety live here. */
.qasf-hero-slider,
.qasf-hero-shell,
.qasf-hero-slider__viewport {
    width: 100%;
    max-width: 100%;
}

.qasf-hero-slider__viewport {
    position: relative;
    overflow: hidden;
}

.qasf-hero-slider__track {
    position: relative;
    min-height: clamp(22rem, 48vw, 38rem);
}

.qasf-hero-slide {
    position: absolute;
    inset: 0;
    visibility: hidden;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.qasf-hero-slide.is-active {
    z-index: 2;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.qasf-hero-slide__inner {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(14rem, 0.9fr);
    align-items: center;
    gap: var(--global-lg-spacing, 2rem);
    min-height: clamp(22rem, 48vw, 38rem);
    padding: var(--global-lg-spacing, 2rem);
}

.qasf-hero-slide__content {
    min-width: 0;
    padding: var(--global-sm-spacing, 1rem);
}

.qasf-hero-slide--background .qasf-hero-slide__inner,
.qasf-hero-slide--minimal .qasf-hero-slide__inner,
.qasf-hero-slide--position-center .qasf-hero-slide__inner {
    grid-template-columns: minmax(0, 1fr);
}

.qasf-hero-slide--background .qasf-hero-slide__content {
    width: min(42rem, 100%);
    color: var(--global-palette3, var(--wp--preset--color--contrast, CanvasText));
    background: color-mix(in srgb, var(--global-palette9, Canvas) 88%, transparent);
}

.qasf-hero-slide--position-left .qasf-hero-slide__content {
    grid-column: 2;
}

.qasf-hero-slide--position-left .qasf-hero-slide__media {
    grid-column: 1;
    grid-row: 1;
}

.qasf-hero-slide--align-center .qasf-hero-slide__content {
    margin-inline: auto;
    text-align: center;
}

.qasf-hero-slide--align-center .qasf-actions {
    justify-content: center;
}

.qasf-hero-slide--align-left .qasf-hero-slide__content {
    text-align: left;
}

.qasf-hero-slide--vertical-start .qasf-hero-slide__inner {
    align-items: start;
}

.qasf-hero-slide--vertical-end .qasf-hero-slide__inner {
    align-items: end;
}

.qasf-hero-slide h1,
.qasf-hero-slide h2,
.qasf-hero-slide p {
    margin-block-start: 0;
}

.qasf-eyebrow {
    display: inline-block;
    margin-block-end: var(--global-xs-spacing, 0.5rem);
}

.qasf-hero-slide__media {
    display: grid;
    place-items: center;
    min-width: 0;
}

.qasf-hero-slide__media img {
    display: block;
    width: 100%;
    max-height: 28rem;
    object-fit: contain;
}

.qasf-hero-slide__background,
.qasf-hero-slide__overlay {
    position: absolute;
    inset: 0;
}

.qasf-hero-slide__background {
    z-index: 0;
}

.qasf-hero-slide__background img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.qasf-hero-slide__overlay {
    z-index: 1;
    background: color-mix(in srgb, currentColor 20%, transparent);
}

.qasf-slider-arrow {
    position: absolute;
    z-index: 5;
    inset-block-start: 50%;
    transform: translateY(-50%);
}

.qasf-slider-arrow--prev {
    inset-inline-start: 1rem;
}

.qasf-slider-arrow--next {
    inset-inline-end: 1rem;
}

.qasf-slider-dots {
    position: absolute;
    z-index: 6;
    inset-inline-start: 50%;
    inset-block-end: 1rem;
    display: flex;
    gap: 0.5rem;
    transform: translateX(-50%);
}

.qasf-slider-dot {
    width: 0.65rem;
    height: 0.65rem;
    padding: 0;
    border: 0;
    opacity: 0.45;
    background: currentColor;
}

.qasf-slider-dot.is-active {
    opacity: 1;
}

.qasf-hide-desktop {
    display: none !important;
}

@media (max-width: 62rem) and (min-width: 43.125rem) {
    .qasf-hide-desktop {
        display: block !important;
    }

    .qasf-hide-tablet {
        display: none !important;
    }
}

@media (max-width: 43.125rem) {
    .qasf-hide-desktop {
        display: block !important;
    }

    .qasf-hide-mobile,
    .qasf-hero-slide--show-desktop {
        display: none !important;
    }

    .qasf-hero-slider__track,
    .qasf-hero-slide__inner {
        min-height: clamp(24rem, 115vw, 36rem);
    }

    .qasf-hero-slide__inner {
        grid-template-columns: minmax(0, 1fr);
        align-content: center;
        gap: var(--global-sm-spacing, 1rem);
        padding: var(--global-md-spacing, 1.5rem);
    }

    .qasf-hero-slide__content {
        order: 2;
    }

    .qasf-hero-slide__media {
        order: 1;
        max-height: 14rem;
    }

    .qasf-hero-slide__media img {
        max-height: 14rem;
    }

    .qasf-hero-slide--position-left .qasf-hero-slide__content,
    .qasf-hero-slide--position-left .qasf-hero-slide__media {
        grid-column: auto;
        grid-row: auto;
    }

    .qasf-hero-slide--mobile-align-center .qasf-hero-slide__content {
        text-align: center;
    }

    .qasf-hero-slide--mobile-align-left .qasf-hero-slide__content {
        text-align: left;
    }

    .qasf-cta__inner,
    .qasf-city-prompt,
    .qasf-current-city {
        align-items: stretch;
        flex-direction: column;
    }

    .qasf-actions .button,
    .qasf-cta .button {
        width: 100%;
    }
}

@media (min-width: 43.126rem) {
    .qasf-hero-slide--show-mobile {
        display: none !important;
    }
}