/**
 * Storefront egységes segédosztályok és tokenek – HQ Audio Parts
 * Szinkron: composer run sync-storefront-assets  →  public/css/storefront.css
 * Cache-bust: config/storefront_assets.php → version
 */

:root {
    --sf-bg-elevated: #1a1a1a;
    --sf-thumb-placeholder: #f8f9fa;
    --sf-map-placeholder: #f0f0f0;
    --sf-strip-bg-top: #252020;
    --sf-strip-bg-mid: #1e1b1b;
    --sf-strip-accent: #FFB300;
    --sf-strip-accent-hover: #ffc42e;
    --sf-strip-accent-muted: rgba(249, 172, 3, 0.22);
}

/* --- Sticky offset (sticky-top + távolság a fejléc alól, desktop) --- */
@media (min-width: 992px) {
    .sticky-top.static-sidebar-wrapper {
        top: 1rem;
    }
}

.sf-sticky-top-20 {
    top: 1.25rem;
}

.sf-sticky-top-1 {
    top: 1rem;
}

/* --- Irányítószám / város autocomplete --- */
.sf-autocomplete-dropdown {
    z-index: 1050;
    max-height: 200px;
    overflow-y: auto;
}

.sf-autocomplete-dropdown-lg {
    z-index: 1050;
    max-height: 280px;
    overflow-y: auto;
}

/* --- Kattintható listaelem (checkout, fizetési mód, wishlist) --- */
.sf-list-group-check {
    cursor: pointer;
}

/* --- Termék bélyegkép: fix keret + középre igazított kép --- */
.sf-thumb-wrap {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--sf-thumb-placeholder);
}

.sf-dim-40 {
    width: 40px;
    height: 40px;
}

.sf-thumb-wrap--40 {
    width: 40px;
    height: 40px;
}

.sf-thumb-wrap--50 {
    width: 50px;
    height: 50px;
}

.sf-thumb-wrap--60 {
    width: 60px;
    height: 60px;
}

.sf-thumb-wrap--80 {
    width: 80px;
    height: 80px;
}

.sf-thumb-wrap--120 {
    width: 120px;
    height: 120px;
}

/* Fix méret ikon „halóhoz” (üres állapot), háttér nélkül – használd bg-light / bg-opacity-* mellett */
.sf-dim-120 {
    width: 120px;
    height: 120px;
}

.sf-dim-100 {
    width: 100px;
    height: 100px;
}

.sf-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* <picture> + srcset: a szülő fix méretű legyen, különben a böngésző a nagy forrás méretére nyújthatja a sort */
.sf-thumb-wrap picture {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    display: block;
    overflow: hidden;
}

.sf-thumb-wrap picture img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    display: block;
}

/* Pénztár jobb összegző: flex + nagy intrinsic kép ne nyomja szét az oszlopot */
.checkout-order-summary .card-body {
    min-width: 0;
    overflow-x: hidden;
}

.checkout-summary-line {
    min-width: 0;
}

.checkout-summary-line .checkout-summary-thumb {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
    max-width: 60px;
    max-height: 60px;
}

.checkout-summary-line .checkout-summary-thumb img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    display: block;
}

/* --- MPL térkép / pontlista --- */
.sf-map-frame {
    height: 400px;
    border-radius: 8px;
    background: var(--sf-map-placeholder);
}

.sf-point-list {
    height: 400px;
}

/* --- Üres állapot ikonok --- */
.sf-empty-icon {
    font-size: 3rem;
    line-height: 1;
}

.sf-empty-icon-lg {
    font-size: 4rem;
    line-height: 1;
}

/* --- Főoldal hero --- */
.sf-hero-banner {
    height: 75vh;
    min-height: 500px;
}

.sf-hero-overlay {
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 0, 0, 0.4) 50%,
        rgba(0, 0, 0, 0.1) 100%
    );
}

/* --- Fejléc: nyelv / valuta dropdown (ne törjön szét; felülírja a globális .dropdown-item sortörését) --- */
a.dropdown-item.sf-dropdown-nowrap,
.dropdown-item.sf-dropdown-nowrap {
    white-space: nowrap;
    word-break: keep-all;
}

span.sf-dropdown-nowrap,
.fw-bold.sf-dropdown-nowrap {
    white-space: nowrap;
}

.badge.sf-dropdown-nowrap {
    white-space: nowrap;
}

.sf-dropdown-min-w-180 {
    min-width: 180px;
}

.sf-dropdown-min-w-200 {
    min-width: 200px;
}

.sf-dropdown-min-w-320 {
    min-width: 320px;
}

/* --- Kereső modal --- */
.sf-search-modal-content {
    background: var(--sf-bg-elevated);
}

/* --- Termék oldal / galéria --- */
.sf-cursor-pointer {
    cursor: pointer;
}

.sf-gallery-placeholder-h {
    height: 400px;
}

.sf-thumb-slot-72 {
    cursor: pointer;
    width: 72px;
    min-width: 72px;
}

.sf-thumbnail-img-72 {
    height: 72px;
    object-fit: cover;
}

.sf-stock-dot {
    width: 6px;
    height: 6px;
    flex-shrink: 0;
}

.sf-btn-add-to-cart-product {
    padding: 0.85rem 1.5rem;
    min-height: 48px;
}

.sf-pre-wrap {
    white-space: pre-wrap;
}

.sf-table-spec-label {
    width: 40%;
}

.sf-related-img-box {
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sf-img-contain-max-150 {
    max-height: 150px;
    object-fit: contain;
}

.sf-related-img-placeholder {
    height: 150px;
}

.sf-modal-gallery-body {
    min-height: 70vh;
}

.sf-gallery-zoom {
    overflow: auto;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-in;
}

.sf-gallery-modal-img {
    max-height: 90vh;
    object-fit: contain;
    transition: transform 0.2s ease;
}

.sf-carousel-control-icon-shadow {
    filter: drop-shadow(0 0 5px black);
}

/* --- Kártya képek (wishlist, összehasonlítás) --- */
.sf-dim-80 {
    width: 80px;
    height: 80px;
}

.sf-dim-150 {
    width: 150px;
    height: 150px;
}

.sf-card-img-h-120 {
    height: 120px;
    object-fit: cover;
}

.sf-card-img-placeholder-120 {
    height: 120px;
}

.sf-card-img-h-200 {
    height: 200px;
    object-fit: cover;
}

.sf-card-img-placeholder-200 {
    height: 200px;
}

.sf-card-img-contain-200 {
    height: 200px;
    width: 100%;
    object-fit: contain;
}

.sf-img-max-h-150-w-auto {
    max-height: 150px;
    width: auto;
}

.sf-compare-th-spec {
    width: 200px;
}

.sf-compare-th-product {
    width: 250px;
}

.sf-compare-cell-img {
    height: 120px;
    width: 100%;
    object-fit: cover;
}

.sf-compare-img-placeholder {
    height: 120px;
}

/* --- Rendelés státusz sáv --- */
.sf-order-track-line {
    height: 3px;
    background-color: #e9ecef;
}

.sf-order-step-circle {
    width: 40px;
    height: 40px;
}

/* --- Lemaradt termék blokk (rendelés) --- */
.sf-order-add-hint-card {
    background: #fef9e7;
    border-top: 3px dashed #e67e22 !important;
}

.sf-icon-2-5 {
    font-size: 2.5rem;
    line-height: 1;
}

/* --- Kis input / thumb (visszavonás, keresés JS) --- */
.sf-input-w-70 {
    width: 70px;
}

.sf-input-w-65 {
    width: 65px;
}

.sf-thumb-fixed-40 {
    width: 40px;
    height: 40px;
    object-fit: cover;
}

.sf-thumb-fixed-50 {
    width: 50px;
    height: 50px;
    object-fit: cover;
}

.sf-thumb-static-80 {
    width: 80px;
    height: 80px;
    object-fit: cover;
}

.sf-product-search-results {
    max-height: 280px;
    z-index: 1050;
}

/* --- Profil borítókép előnézet --- */
.sf-profile-cover-frame {
    height: 150px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.sf-profile-cover-frame img {
    width: 100%;
    height: 100%;
    max-width: 100%;
    display: block;
    object-fit: cover;
}

/* --- Statikus / egyéb UI --- */
.sf-warranty-step-badge {
    width: 60px;
    height: 60px;
    font-weight: 700;
    font-size: 1.5rem;
}

.sf-brand-tile-60 {
    width: 60px;
    height: 60px;
    background: rgba(240, 0, 41, 0.1);
}

.sf-chevron-muted-xs {
    font-size: 0.65rem;
}

.sf-z-fixed-ui {
    z-index: 1050;
}

.sf-progress-thin {
    height: 5px;
}

.sf-table-th-110 {
    width: 110px;
}

/* MPL / szerkesztő pontlista sor – dinamikus border-left maradhat inline */
.sf-mpl-row {
    cursor: pointer;
}

/* --- Narancs „feliratkozás” sáv (footer newsletter kinézet) – bárhol használható --- */
.sf-accent-strip {
    background:
        linear-gradient(165deg, rgba(249, 172, 3, 0.06) 0%, transparent 42%),
        linear-gradient(180deg, var(--sf-strip-bg-top) 0%, var(--sf-strip-bg-mid) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.9);
}

.sf-accent-strip::before {
    content: "";
    position: absolute;
    top: -40%;
    right: -8%;
    width: min(420px, 55vw);
    height: 180%;
    background: radial-gradient(ellipse at center, var(--sf-strip-accent-muted) 0%, transparent 70%);
    pointer-events: none;
}

.sf-accent-strip .container {
    position: relative;
    z-index: 1;
}

.sf-accent-strip-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    background: linear-gradient(145deg, var(--sf-strip-accent-hover) 0%, var(--sf-strip-accent) 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    color: #fff;
    box-shadow:
        0 4px 14px rgba(249, 172, 3, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.sf-accent-strip-title {
    font-size: clamp(1.05rem, 2.5vw, 1.25rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    letter-spacing: -0.02em;
    margin: 0 0 0.35rem;
}

.sf-accent-strip-lead {
    font-size: var(--font-size-2, 0.875rem);
    color: rgba(255, 255, 255, 0.58);
    line-height: 1.5;
    margin: 0;
    max-width: 36rem;
}

@media (max-width: 991.98px) {
    .sf-accent-strip-row {
        text-align: center;
    }

    .sf-accent-strip-copy {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .sf-accent-strip-lead {
        margin-left: auto;
        margin-right: auto;
    }
}