/* Storefront performans CSS — tek yükleme (header.php) */

.product-card-badge {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    border-radius: 9999px;
    padding: 0.35rem 0.65rem;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}

.product-card-badge--audience {
    background: rgba(255, 255, 255, 0.94);
    color: var(--brand-ink, #1a1514);
    border: 1px solid var(--brand-border, rgba(0, 0, 0, 0.08));
}

.dark .product-card-badge--audience {
    background: rgba(24, 24, 27, 0.92);
    color: #e4e4e7;
    border-color: rgba(255, 255, 255, 0.12);
}

.product-card-badge--stock {
    background: rgba(0, 0, 0, 0.78);
    color: #fff;
}

.product-card-badge--new {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 12;
    background: rgba(17, 24, 39, 0.88);
    color: #fff;
    border-radius: 9999px;
    padding: 0.35rem 0.6rem;
    font-size: 9px;
    letter-spacing: 0.1em;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.22);
    pointer-events: none;
}

.dark .product-card-badge--new {
    background: rgba(250, 250, 250, 0.92);
    color: #18181b;
}

.product-card-fav {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.94);
    color: #374151;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
    transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
    cursor: pointer;
    text-decoration: none;
}

.dark .product-card-fav {
    border-color: rgba(63, 63, 70, 0.85);
    background: rgba(24, 24, 27, 0.94);
    color: #e4e4e7;
}

.product-card-fav:hover {
    border-color: rgba(244, 63, 94, 0.55);
    color: #e11d48;
}

.product-card-fav--active {
    color: #e11d48;
    border-color: rgba(244, 63, 94, 0.45);
}

.product-card-fav--active .product-card-fav__icon svg {
    fill: currentColor;
}

.product-card-fav--pop .product-card-fav__icon svg {
    animation: product-card-fav-pop 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes product-card-fav-pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.28); }
    100% { transform: scale(1); }
}

.product-card-fav__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.product-card-fav__icon svg {
    width: 1rem;
    height: 1rem;
}

.product-card-discount-badge {
    top: 0.5rem;
    right: 2.65rem;
}

.product-card-color-palette,
.product-card-color-dots {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    z-index: 13;
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0.28rem 0.45rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(229, 231, 235, 0.95);
    pointer-events: none;
    max-width: calc(100% - 1rem);
}

.dark .product-card-color-palette,
.dark .product-card-color-dots {
    background: rgba(24, 24, 27, 0.92);
    border-color: rgba(63, 63, 70, 0.85);
}

.product-card-color-more {
    display: inline-flex;
    align-items: center;
    padding-left: 0.15rem;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #4b5563;
    white-space: nowrap;
    line-height: 1;
}

.dark .product-card-color-more {
    color: #d4d4d8;
}

.product-card-color-dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.product-card-color-dot.is-active {
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px #4f46e5;
}

.dark .product-card-color-dot.is-active {
    box-shadow: 0 0 0 2px #18181b, 0 0 0 3px #818cf8;
}

.product-card-prices .product-card-price-current {
    text-decoration: none !important;
}

.product-card-prices .product-card-price-old {
    text-decoration: line-through;
}

[data-product-card-image] {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 2;
    aspect-ratio: 1 / 1;
    background: var(--brand-nude, #f0e4dc);
}

.dark [data-product-card-image] {
    background: #27272a;
}

[data-product-card-image] .product-card-img-ph {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(145deg, rgb(226 232 240 / 0.96), rgb(241 245 249), rgb(212 212 216 / 0.88));
    transition: opacity 0.25s ease;
}

.dark [data-product-card-image] .product-card-img-ph {
    background: linear-gradient(145deg, rgb(39 39 42), rgb(24 24 27), rgb(63 63 70 / 0.92));
}

[data-product-card-image] .product-card-img-ph.is-hidden {
    opacity: 0;
}

[data-product-card-image] .product-card-img-el {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    transform: translateZ(0);
}

[data-product-card-image] .product-card-img-el.is-loaded {
    opacity: 1;
}

[data-product-card-image] .product-card-img-el--hover {
    position: absolute;
    inset: 0;
    z-index: 3;
    opacity: 0;
}

[data-product-card-image][data-product-card-image-hover="1"] .product-card-img-el--primary.is-loaded {
    transition: opacity 0.28s ease, transform 0.28s ease;
}

@media (hover: hover) and (pointer: fine) {
    .group:hover [data-product-card-image][data-product-card-image-hover="1"] .product-card-img-el--primary.is-loaded {
        opacity: 0;
        transform: none;
    }

    .group:hover [data-product-card-image][data-product-card-image-hover="1"] .product-card-img-el--hover.is-loaded {
        opacity: 1;
        transform: none;
    }

    .group:hover [data-product-card-image]:not([data-product-card-image-hover="1"]) .product-card-img-el--primary.is-loaded {
        transform: scale(1.045);
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-product-card-image] .product-card-img-el {
        opacity: 1 !important;
        transition: none !important;
        transform: none !important;
    }

    [data-product-card-image] .product-card-img-el--hover {
        display: none !important;
    }

    .group:hover [data-product-card-image] .product-card-img-el.is-loaded {
        transform: none !important;
    }

    [data-product-card-image] .product-card-img-ph {
        opacity: 0 !important;
        transition: none !important;
    }
}

.home-section {
    content-visibility: auto;
    contain-intrinsic-size: 1000px;
}

.home-section--categories {
    content-visibility: visible;
    contain-intrinsic-size: auto;
}

/* Lucide createIcons <i> öğesini <svg class="lucide ui-icon"> ile değiştirir */
.ui-icon,
i[data-lucide].ui-icon,
svg.lucide.ui-icon,
.lucide.ui-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    vertical-align: middle;
    stroke: currentColor;
}

i[data-lucide].ui-icon svg,
.ui-icon[data-lucide] svg {
    width: 100%;
    height: 100%;
}

svg.lucide.ui-icon {
    overflow: visible;
}

.ui-icon-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    vertical-align: middle;
}

.ui-icon-brand svg {
    display: block;
    width: 100%;
    height: 100%;
}

.ui-icon--trust {
    width: 1.75rem;
    height: 1.75rem;
    max-width: 1.75rem;
    max-height: 1.75rem;
}

.ui-icon--social {
    width: 1.125rem;
    height: 1.125rem;
    max-width: 1.125rem;
    max-height: 1.125rem;
}

.ui-icon--payment {
    width: 2.5rem;
    height: 1rem;
    max-width: 2.5rem;
    max-height: 1rem;
}

.ui-icon-brand.ui-icon--payment svg {
    object-fit: contain;
}

/* Footer alt: ödeme logoları — sabit hücre, ortalı */
.footer-trust-strip {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    max-width: 100%;
}

@media (min-width: 640px) {
    .footer-trust-strip {
        justify-content: flex-end;
        width: auto;
        flex-shrink: 0;
    }
}

.footer-trust-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 0.5rem;
    border: 1px solid rgb(63 63 70 / 0.55);
    background: rgb(24 24 27 / 0.65);
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.footer-trust-slot:hover {
    border-color: rgb(82 82 91 / 0.9);
    background: rgb(39 39 42 / 0.85);
}

.footer-trust-slot--payment {
    width: 3.25rem;
    height: 2rem;
}

.footer-trust-slot--payment.footer-trust-slot--wide {
    width: 4.25rem;
}

.footer-trust-slot__img {
    display: block;
    width: auto;
    height: auto;
    max-width: 85%;
    max-height: 85%;
    object-fit: contain;
    object-position: center;
    opacity: 0.88;
    filter: brightness(1.05);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.footer-trust-slot:hover .footer-trust-slot__img {
    opacity: 1;
    transform: scale(1.03);
}

/* —— Güven şeridi (footer üstü) —— */
.storefront-trust-band {
    border-top: 1px solid rgb(228 228 231 / 0.9);
    border-bottom: 1px solid rgb(228 228 231 / 0.9);
    background: rgb(250 250 250);
}

.dark .storefront-trust-band {
    border-color: rgb(39 39 42 / 0.9);
    background: rgb(9 9 11);
}

.storefront-trust-band__inner {
    max-width: 80rem;
    margin-inline: auto;
    padding-inline: 1.25rem;
}

@media (min-width: 768px) {
    .storefront-trust-band__inner {
        padding-inline: 2rem;
    }
}

.storefront-trust-band__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    padding-block: 1rem;
}

@media (min-width: 1024px) {
    .storefront-trust-band__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.85rem;
        padding-block: 1.15rem;
    }
}

.storefront-trust-band__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.45rem;
    padding: 0.85rem 0.65rem;
    border-radius: 0.85rem;
    border: 1px solid rgb(228 228 231 / 0.85);
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.dark .storefront-trust-band__item {
    border-color: rgb(39 39 42);
    background: rgb(24 24 27 / 0.55);
}

.storefront-trust-band__item:hover {
    border-color: rgb(212 212 216);
    box-shadow: 0 4px 14px rgb(15 23 42 / 0.04);
}

.dark .storefront-trust-band__item:hover {
    border-color: rgb(63 63 70);
    box-shadow: 0 4px 14px rgb(0 0 0 / 0.18);
}

.storefront-trust-band__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.65rem;
}

.storefront-trust-band__icon .ui-icon {
    width: 1.1rem;
    height: 1.1rem;
}

.storefront-trust-band__icon--indigo {
    background: rgb(238 242 255);
    color: rgb(79 70 229);
}

.dark .storefront-trust-band__icon--indigo {
    background: rgb(49 46 129 / 0.35);
    color: rgb(165 180 252);
}

.storefront-trust-band__icon--emerald {
    background: rgb(236 253 245);
    color: rgb(5 150 105);
}

.dark .storefront-trust-band__icon--emerald {
    background: rgb(6 78 59 / 0.35);
    color: rgb(110 231 183);
}

.storefront-trust-band__icon--amber {
    background: rgb(255 251 235);
    color: rgb(217 119 6);
}

.dark .storefront-trust-band__icon--amber {
    background: rgb(120 53 15 / 0.35);
    color: rgb(252 211 77);
}

.storefront-trust-band__icon--sky {
    background: rgb(240 249 255);
    color: rgb(2 132 199);
}

.dark .storefront-trust-band__icon--sky {
    background: rgb(12 74 110 / 0.35);
    color: rgb(125 211 252);
}

.storefront-trust-band__title {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: rgb(24 24 27);
}

.dark .storefront-trust-band__title {
    color: rgb(250 250 250);
}

.storefront-trust-band__text {
    margin: 0;
    font-size: 0.6875rem;
    line-height: 1.45;
    color: rgb(113 113 122);
}

.dark .storefront-trust-band__text {
    color: rgb(161 161 170);
}

/* —— Footer —— */
.storefront-footer {
    padding-top: 2.75rem;
    padding-bottom: 1.85rem;
    color: #fafafa;
    background: linear-gradient(180deg, #1c1c1f 0%, #111113 100%);
}

.storefront-footer__top {
    gap: 2rem;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgb(63 63 70 / 0.45);
}

@media (min-width: 1024px) {
    .storefront-footer__top {
        gap: 2.5rem;
        margin-bottom: 2.25rem;
        padding-bottom: 2.25rem;
    }
}

.storefront-footer__logo {
    margin: 0 0 0.65rem;
    font-size: clamp(1.375rem, 2.8vw, 2rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #fff;
}

.storefront-footer__tagline {
    margin: 0;
    max-width: 22rem;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: #a1a1aa;
}

.storefront-footer__newsletter-title {
    margin: 0 0 0.55rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #f4f4f5;
}

.storefront-footer__newsletter-form {
    gap: 0.5rem;
}

.storefront-footer__newsletter-row {
    gap: 0.5rem;
}

.storefront-footer__newsletter-input {
    min-height: 2.5rem;
    width: 100%;
    flex: 1 1 auto;
    padding: 0.55rem 0.85rem;
    border: 1px solid rgb(63 63 70 / 0.55);
    border-radius: 0.5rem;
    background: rgb(24 24 27 / 0.4);
    font-size: 0.875rem;
    color: #fff;
    outline: none;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.storefront-footer__newsletter-input::placeholder {
    color: #71717a;
}

.storefront-footer__newsletter-input:focus {
    border-color: #e4e4e7;
    background: rgb(24 24 27 / 0.85);
    box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08);
}

.storefront-footer__newsletter-btn {
    display: inline-flex;
    min-height: 2.5rem;
    width: 100%;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1.1rem;
    border: 1px solid rgb(250 250 250 / 0.9);
    border-radius: 0.5rem;
    background: rgb(250 250 250 / 0.95);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #18181b;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.storefront-footer__newsletter-btn:hover {
    background: #e4e4e7;
    border-color: #e4e4e7;
}

@media (min-width: 640px) {
    .storefront-footer__newsletter-btn {
        width: auto;
    }
}

.storefront-footer__newsletter-note--ok {
    color: #6ee7b7;
}

.storefront-footer__newsletter-note--error {
    color: #fca5a5;
}

.storefront-footer__newsletter-note {
    margin: 0.45rem 0 0;
    font-size: 0.6875rem;
    line-height: 1.45;
    color: #71717a;
}

.storefront-footer__nav {
    margin-bottom: 2rem;
}

.storefront-footer__columns {
    column-gap: 2rem;
    row-gap: 1.75rem;
    border: 1px solid rgb(63 63 70 / 0.35);
    border-radius: 0.75rem;
    overflow: hidden;
}

@media (min-width: 768px) {
    .storefront-footer__columns {
        border: none;
        border-radius: 0;
        overflow: visible;
    }
}

.storefront-footer__columns > div + div {
    border-top: 1px solid rgb(63 63 70 / 0.35);
}

@media (min-width: 768px) {
    .storefront-footer__columns > div + div {
        border-top: none;
    }
}

@media (min-width: 1024px) {
    .storefront-footer__columns {
        column-gap: 2.5rem;
        row-gap: 2rem;
    }
}

.storefront-footer__col-title {
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #f4f4f5;
}

.storefront-footer__col-title--mobile {
    display: inline-block;
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #e4e4e7;
}

.storefront-footer__contact-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .storefront-footer__contact-list {
        gap: 0.55rem;
    }
}

.storefront-footer__contact-list li {
    padding: 0.15rem 0;
}

.storefront-footer__contact-list .group span,
.storefront-footer__contact-list .group a {
    font-size: 0.875rem;
    line-height: 1.45;
}

.storefront-footer__link-list {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .storefront-footer__link-list {
        gap: 0.35rem;
    }
}

.storefront-footer__link {
    display: flex;
    min-height: 2.125rem;
    align-items: center;
    padding: 0.35rem 0.5rem;
    border-radius: 0.35rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.35;
    color: #d4d4d8;
    text-decoration: none;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.storefront-footer__link:hover {
    background: rgb(39 39 42 / 0.65);
    color: #fff;
}

.storefront-footer__social-row {
    gap: 0.5rem;
}

@media (min-width: 768px) {
    .storefront-footer__social-row {
        gap: 0.6rem;
    }
}

.storefront-footer__social-link {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(82 82 91 / 0.85);
    border-radius: 0.4rem;
    background: rgb(24 24 27 / 0.45);
    color: #e4e4e7;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.storefront-footer__social-link:hover {
    border-color: rgb(161 161 170 / 0.65);
    background: rgb(39 39 42 / 0.75);
    color: #fafafa;
    transform: none;
}

.storefront-footer__social-link .ui-icon--social {
    width: 1.05rem;
    height: 1.05rem;
}

.storefront-footer__whatsapp {
    margin-top: 1rem;
    padding: 0.5rem 0.95rem;
    border: 1px solid rgb(22 163 74 / 0.35);
    border-radius: 0.5rem;
    background: rgb(22 163 74 / 0.1);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: #86efac;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

@media (min-width: 768px) {
    .storefront-footer__whatsapp {
        margin-top: 1.15rem;
    }
}

.storefront-footer__whatsapp:hover {
    border-color: #22c55e;
    background: #16a34a;
    color: #fff;
}

.storefront-footer__legal {
    padding-top: 1.25rem;
    gap: 1rem;
    border-top: 1px solid rgb(63 63 70 / 0.4);
}

@media (min-width: 768px) {
    .storefront-footer__legal {
        gap: 1.25rem;
    }
}

.storefront-footer__copyright {
    margin: 0;
    font-size: 0.6875rem;
    line-height: 1.45;
    letter-spacing: 0.01em;
}

.storefront-footer__copyright span {
    color: #71717a;
}

.storefront-footer .footer-trust-strip {
    gap: 0.45rem;
}

.storefront-footer .footer-trust-slot {
    border-radius: 0.4rem;
    border: 1px solid rgb(63 63 70 / 0.75);
    background: rgb(255 255 255 / 0.04);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05);
}

.storefront-footer .footer-trust-slot--payment {
    width: 3.4rem;
    height: 2.1rem;
}

.storefront-footer .footer-trust-slot--payment.footer-trust-slot--wide {
    width: 4.35rem;
}

.storefront-footer .footer-trust-slot__img {
    max-width: 78%;
    max-height: 72%;
    opacity: 0.92;
}

/* Yatay taşma: hidden sticky'yi kırar; clip kullan */
html {
    overflow-x: clip;
    max-width: 100%;
}

body {
    overflow-x: clip;
    max-width: 100%;
}

/* Katalog: sabit header + sol filtre */
:root {
    --storefront-nav-row-h: 4.75rem;
    --storefront-trust-bar-h: 0rem;
    --storefront-header-main-h: 0rem;
    --storefront-header-nav-h: 0rem;
    --storefront-announcement-h: 0rem;
    --storefront-header-h: var(--storefront-nav-row-h);
    --storefront-sticky-gap: 0.75rem;
    --storefront-sticky-top: calc(var(--storefront-header-h) + var(--storefront-sticky-gap));
}

@media (min-width: 1024px) {
    :root {
        --storefront-trust-bar-h: 2rem;
        --storefront-header-main-h: 4.75rem;
        --storefront-header-nav-h: 2.75rem;
        --storefront-header-sub-h: 2.75rem;
        --storefront-nav-row-h: 0rem;
        --storefront-header-h: calc(
            var(--storefront-trust-bar-h)
            + var(--storefront-header-main-h)
            + var(--storefront-header-nav-h)
            + var(--storefront-announcement-h)
        );
    }
}

.storefront-site-header--with-announcement {
    --storefront-announcement-h: 0rem;
}

@media (max-width: 1023px) {
    .storefront-site-header--with-announcement {
        --storefront-announcement-h: 2rem;
    }
}

@media (min-width: 1024px) {
    .storefront-site-header--tiered.storefront-site-header--with-announcement {
        --storefront-announcement-h: 2rem;
    }
}

.storefront-site-header--desktop-tiered {
    --storefront-announcement-h: 0rem;
}

html {
    scroll-padding-top: var(--storefront-sticky-top);
}

@media (min-width: 1024px) {
    html:has(.storefront-site-header__search-field.is-open) {
        overflow-anchor: none;
    }
}

.storefront-site-header {
    position: sticky;
    top: 0;
    z-index: 600;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    box-shadow: 0 1px 0 rgb(228 228 231 / 0.9);
    transition: box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease, backdrop-filter 0.2s ease;
}

.brand-theme .storefront-site-header {
    background: color-mix(in srgb, var(--brand-surface) 95%, transparent);
    backdrop-filter: blur(10px);
    box-shadow: none;
    border-bottom: 1px solid var(--brand-line, #ece6e8);
}

.storefront-site-header__bar {
    flex-shrink: 0;
    width: 100%;
    min-height: var(--storefront-nav-row-h);
}

.storefront-header-spacer {
    display: none !important;
}

.dark .storefront-site-header {
    background: #000000;
    box-shadow: 0 1px 0 rgb(39 39 42 / 0.95);
}

.storefront-site-header[data-scrolled="true"] {
    box-shadow: 0 4px 24px rgb(15 23 42 / 0.1);
}

.dark .storefront-site-header[data-scrolled="true"] {
    box-shadow: 0 4px 24px rgb(0 0 0 / 0.45);
}

/* PC 3-tier header — unified top bar */
.storefront-header-top-bar-shell {
    display: none;
}

@media (min-width: 1024px) {
    .storefront-header-top-bar-shell {
        display: block;
    }
}

.storefront-header-top-bar-shell > .storefront-header-top-bar {
    background: #18181b;
    color: #fafafa;
}

.storefront-header-top-bar {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #18181b;
    color: #fafafa;
    font-size: 0.6875rem;
    font-weight: 500;
    border-bottom: 1px solid #27272a;
    box-shadow: 0 1px 0 rgb(0 0 0 / 0.06);
}

.storefront-header-top-bar__inner {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    min-height: var(--storefront-trust-bar-h);
    height: var(--storefront-trust-bar-h);
    padding-top: 0;
    padding-bottom: 0;
}

@media (min-width: 1024px) {
    .storefront-header-top-bar__inner {
        grid-template-columns: minmax(0, 1fr) auto;
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .storefront-header-top-bar__center {
        display: none;
    }

    .storefront-header-main,
    .storefront-header-nav {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

.storefront-header-top-bar__left,
.storefront-header-top-bar__right {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: nowrap;
    white-space: nowrap;
    position: relative;
    z-index: 3;
}

.storefront-header-top-bar__right {
    justify-self: end;
    flex-shrink: 0;
    padding-left: 0.5rem;
}

.storefront-header-top-bar__center {
    min-width: 0;
    overflow: hidden;
    justify-self: stretch;
    max-width: 100%;
    position: relative;
}

.storefront-header-top-bar__center::before,
.storefront-header-top-bar__center::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1.5rem;
    z-index: 2;
    pointer-events: none;
}

.storefront-header-top-bar__center::before {
    left: 0;
    background: linear-gradient(90deg, #18181b 0%, transparent 100%);
}

.storefront-header-top-bar__center::after {
    right: 0;
    background: linear-gradient(270deg, #18181b 0%, transparent 100%);
}

.storefront-header-top-bar__center--empty {
    visibility: hidden;
}

.storefront-header-top-bar__item,
.storefront-header-top-bar__link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: #f4f4f5;
    font-weight: 600;
    font-size: 0.6875rem;
    line-height: 1;
    text-decoration: none;
    transition: color 0.15s ease, opacity 0.15s ease;
}

.storefront-header-top-bar__link:hover {
    color: #ffffff;
}

.storefront-header-top-bar__sep {
    width: 1px;
    height: 0.75rem;
    background: rgb(250 250 250 / 0.28);
    flex-shrink: 0;
}

.storefront-header-top-bar__icon {
    opacity: 0.95;
    font-size: 0.7rem;
    color: #e4e4e7;
}

.storefront-header-top-bar__icon .ui-icon {
    color: inherit;
}

.storefront-header-top-bar .hero-promo-marquee-item {
    color: #fafafa;
    font-weight: 500;
}

.storefront-header-top-bar .hero-promo-marquee-item strong,
.storefront-header-top-bar .hero-promo-marquee-item a {
    color: #ffffff;
    font-weight: 700;
}

.storefront-header-top-bar .hero-promo-marquee-item .ui-icon {
    color: #e4e4e7;
}

.storefront-header-top-bar__marquee-dot,
.storefront-header-top-bar .hero-promo-marquee-dot {
    background: rgb(250 250 250 / 0.45);
}

.storefront-header-top-bar .hero-promo-marquee-runner {
    animation-duration: 42s;
}

.storefront-header-top-bar__ticker-fallback {
    display: none !important;
}

.dark .storefront-header-top-bar {
    background: #09090b;
    border-bottom-color: #27272a;
}

/* Legacy trust bar (unused on desktop; kept for compatibility) */
.storefront-header-trust-bar {
    background: #f4f4f5;
    border-bottom: 1px solid rgb(228 228 231 / 0.9);
    font-size: 0.6875rem;
    color: #52525b;
}

.dark .storefront-header-trust-bar {
    background: #18181b;
    border-bottom-color: rgb(39 39 42 / 0.95);
    color: #a1a1aa;
}

.storefront-header-trust-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: var(--storefront-trust-bar-h);
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

.storefront-header-trust-bar__left,
.storefront-header-trust-bar__right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex-wrap: wrap;
}

.storefront-header-trust-bar__item,
.storefront-header-trust-bar__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.storefront-header-trust-bar__link {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
}

.storefront-header-trust-bar__link:hover {
    color: #18181b;
}

.dark .storefront-header-trust-bar__link:hover {
    color: #fafafa;
}

.storefront-header-trust-bar__sep {
    width: 1px;
    height: 0.85rem;
    background: rgb(161 161 170 / 0.45);
    flex-shrink: 0;
}

.storefront-header-trust-bar__icon {
    opacity: 0.75;
    font-size: 0.75rem;
}

.storefront-header-main {
    min-height: var(--storefront-header-main-h);
    display: flex;
    align-items: center;
    gap: 1.75rem;
    width: 100%;
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

@media (min-width: 1024px) {
    .storefront-header-main {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 1rem;
        padding-top: 0.65rem;
        padding-bottom: 0.65rem;
    }

    .storefront-header-logo {
        grid-column: 1;
        justify-self: start;
        min-width: auto;
    }

    .storefront-header-search-wrap {
        grid-column: 2;
        justify-self: end;
        width: min(100%, 28rem);
        max-width: 28rem;
        min-width: 0;
        margin: 0;
    }

    .storefront-header-main > .storefront-header-actions {
        grid-column: 3;
        justify-self: start;
        align-self: center;
        margin-left: 0;
        padding-left: 0.85rem;
    }
}

.storefront-header-logo {
    flex-shrink: 0;
    min-width: 8rem;
}

.storefront-header-search__wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 2.85rem;
    border: 1.5px solid #c4c4cc;
    border-radius: 9999px;
    background: #ffffff;
    padding: 0.35rem 0.4rem 0.35rem 1rem;
    box-shadow: 0 1px 3px rgb(15 23 42 / 0.06);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.storefront-header-search__wrap.is-open,
.storefront-header-search__wrap:focus-within {
    border-color: #18181b;
    box-shadow: 0 0 0 3px rgb(24 24 27 / 0.08), 0 4px 14px rgb(15 23 42 / 0.08);
}

.dark .storefront-header-search__wrap {
    border-color: rgb(63 63 70 / 0.95);
    background: #09090b;
    box-shadow: none;
}

.dark .storefront-header-search__wrap.is-open,
.dark .storefront-header-search__wrap:focus-within {
    border-color: #a1a1aa;
    box-shadow: 0 0 0 3px rgb(255 255 255 / 0.06);
}

.storefront-header-search__icon {
    color: #71717a;
    flex-shrink: 0;
}

.storefront-header-search__input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font-size: 0.9375rem;
    color: #18181b;
    outline: none;
    appearance: none;
    padding: 0.15rem 0;
}

.storefront-header-search__input::-webkit-search-cancel-button,
.storefront-header-search__input::-webkit-search-decoration,
.storefront-header-search__input::-ms-clear {
    display: none;
    appearance: none;
}

.dark .storefront-header-search__input {
    color: #fafafa;
}

.storefront-header-search__input::placeholder {
    color: #a1a1aa;
}

.storefront-header-search__btn {
    flex-shrink: 0;
    border: 0;
    border-radius: 9999px;
    background: #18181b;
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 700;
    padding: 0.65rem 1.25rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.storefront-header-search__btn:hover {
    background: #27272a;
}

.dark .storefront-header-search__btn {
    background: #fafafa;
    color: #18181b;
}

.dark .storefront-header-search__btn:hover {
    background: #e4e4e7;
}

.storefront-header-search__clear {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 0;
    border-radius: 9999px;
    background: rgb(244 244 245);
    color: #71717a;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.storefront-header-search__clear:hover {
    background: rgb(228 228 231);
    color: #18181b;
}

.dark .storefront-header-search__clear {
    background: rgb(39 39 42);
    color: #a1a1aa;
}

.storefront-header-search-wrap {
    z-index: 620;
    flex: 1 1 0%;
    min-width: 12rem;
    max-width: 48rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

@media (min-width: 1024px) {
    .storefront-header-search-wrap {
        margin-left: 0;
        margin-right: 0;
    }
}

.storefront-header-search-core {
    position: relative;
    width: 100%;
}

.storefront-header-search-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 0.75rem);
    z-index: 650;
    background: #ffffff;
    border: 1px solid #e4e4e7;
    border-radius: 1.125rem;
    box-shadow: 0 28px 56px rgb(15 23 42 / 0.16), 0 8px 20px rgb(15 23 42 / 0.06);
    padding: 1.35rem 1.5rem 1.25rem;
    max-height: min(78vh, 38rem);
    overflow-y: auto;
}

.dark .storefront-header-search-panel {
    background: #09090b;
    border-color: rgb(63 63 70 / 0.95);
    box-shadow: 0 24px 48px rgb(0 0 0 / 0.45);
}

.storefront-header-search-panel__loading,
.storefront-header-search-panel__hint,
.storefront-header-search-panel__empty {
    padding: 1.25rem 0.5rem;
    text-align: center;
    font-size: 0.875rem;
    color: #71717a;
}

.storefront-header-search-panel__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
}

.storefront-header-search-panel__columns {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 2rem;
}

.storefront-header-search-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.storefront-header-search-panel__title {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #71717a;
}

.storefront-header-search-panel__all {
    font-size: 0.75rem;
    font-weight: 600;
    color: #4f46e5;
    text-decoration: none;
}

.storefront-header-search-panel__all:hover {
    text-decoration: underline;
}

.storefront-header-search-panel__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.storefront-header-search-panel__product {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.65rem 0.6rem;
    border-radius: 0.75rem;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
}

.storefront-header-search-panel__product:hover {
    background: rgb(244 244 245);
}

.dark .storefront-header-search-panel__product:hover {
    background: rgb(39 39 42);
}

.storefront-header-search-panel__thumb {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.65rem;
    overflow: hidden;
    background: #f4f4f5;
    flex-shrink: 0;
}

.storefront-header-search-panel__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.storefront-header-search-panel__info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.storefront-header-search-panel__name {
    font-size: 0.875rem;
    font-weight: 600;
    color: #18181b;
    line-height: 1.3;
}

.dark .storefront-header-search-panel__name {
    color: #fafafa;
}

.storefront-header-search-panel__price-row {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
}

.storefront-header-search-panel__price {
    font-size: 0.875rem;
    font-weight: 800;
    color: #18181b;
}

.dark .storefront-header-search-panel__price {
    color: #fafafa;
}

.storefront-header-search-panel__old {
    font-size: 0.75rem;
    color: #a1a1aa;
    text-decoration: line-through;
}

.storefront-header-search-panel__rating {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
}

.storefront-header-search-panel__stars {
    color: #f59e0b;
    letter-spacing: 0.02em;
}

.storefront-header-search-panel__reviews {
    color: #a1a1aa;
}

.storefront-header-search-panel__footer-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 0.85rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    background: rgb(244 244 245);
    color: #3f3f46;
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s ease;
}

.storefront-header-search-panel__footer-btn:hover {
    background: rgb(228 228 231);
}

.storefront-header-search-panel__block + .storefront-header-search-panel__block {
    margin-top: 1.25rem;
}

.storefront-header-search-panel__block-title {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #71717a;
    margin: 0 0 0.65rem;
}

.storefront-header-search-panel__side-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.storefront-header-search-panel__side-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.45rem 0.35rem;
    border: 0;
    background: transparent;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #3f3f46;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.storefront-header-search-panel__side-link:hover {
    background: rgb(244 244 245);
    color: #18181b;
}

.dark .storefront-header-search-panel__side-link {
    color: #d4d4d8;
}

.dark .storefront-header-search-panel__side-link:hover {
    background: rgb(39 39 42);
    color: #fafafa;
}

.storefront-header-search-panel__side-more {
    display: inline-block;
    margin-top: 0.55rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #4f46e5;
    text-decoration: none;
}

.storefront-header-search-panel__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.35rem;
    padding-top: 1.25rem;
    border-top: 1px solid #f4f4f5;
}

.dark .storefront-header-search-panel__cards {
    border-top-color: rgb(39 39 42);
}

.storefront-header-search-panel__card {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.85rem;
    border-radius: 0.85rem;
    background: rgb(250 250 250);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
}

.storefront-header-search-panel__card:hover {
    background: rgb(244 244 245);
}

.dark .storefront-header-search-panel__card {
    background: rgb(24 24 27);
}

.dark .storefront-header-search-panel__card:hover {
    background: rgb(39 39 42);
}

.storefront-header-search-panel__card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.55rem;
    background: #18181b;
    color: #ffffff;
    flex-shrink: 0;
}

.dark .storefront-header-search-panel__card-icon {
    background: #fafafa;
    color: #18181b;
}

.storefront-header-search-panel__card-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.storefront-header-search-panel__card-text strong {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #18181b;
}

.dark .storefront-header-search-panel__card-text strong {
    color: #fafafa;
}

.storefront-header-search-panel__card-text span {
    font-size: 0.6875rem;
    color: #71717a;
    line-height: 1.35;
}

@media (max-width: 1279px) {
    .storefront-header-search-panel__columns {
        grid-template-columns: 1fr;
    }

    .storefront-header-search-panel__cards {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 1280px) {
    .storefront-header-top-bar__inner {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

.storefront-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-shrink: 0;
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
}

.storefront-header-action {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: 3.75rem;
    padding: 0.15rem 0.35rem;
    border: 0;
    background: transparent;
    color: #18181b;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s ease;
}

.storefront-header-action__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    line-height: 1;
}

.storefront-header-action__icon .ui-icon {
    width: 1.375rem;
    height: 1.375rem;
}

.dark .storefront-header-action {
    color: #d4d4d8;
}

.storefront-header-action:hover {
    color: #4f46e5;
}

.dark .storefront-header-action:hover {
    color: #818cf8;
}

.storefront-header-action__label {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.15;
    white-space: nowrap;
    color: #27272a;
}

.dark .storefront-header-action__label {
    color: #a1a1aa;
}

.storefront-header-action:hover .storefront-header-action__label {
    color: #4f46e5;
}

.dark .storefront-header-action:hover .storefront-header-action__label {
    color: #818cf8;
}

.storefront-header-action__badge {
    position: absolute;
    top: -0.35rem;
    right: -0.45rem;
    min-width: 1rem;
    height: 1rem;
    padding: 0 0.2rem;
    border-radius: 9999px;
    background: #18181b;
    color: #ffffff;
    font-size: 0.5625rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.dark .storefront-header-action__badge {
    background: #fafafa;
    color: #18181b;
}

.storefront-header-nav {
    align-items: center;
    min-height: var(--storefront-header-nav-h);
}

.storefront-header-nav__menu {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
    min-width: 0;
    padding: 0.3rem 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.storefront-header-nav__menu::-webkit-scrollbar {
    display: none;
}

.storefront-header-nav__sep {
    flex-shrink: 0;
    color: #d4d4d8;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1;
    user-select: none;
}

@media (min-width: 1024px) {
    .storefront-header-nav {
        display: flex;
        justify-content: flex-start;
    }

    .storefront-header-nav__menu {
        width: 100%;
        max-width: 100%;
        margin-inline: 0;
        justify-content: flex-start;
        gap: 1rem;
        padding: 0.5rem 0;
    }

    .storefront-header-nav__sep {
        margin-inline: 0;
    }
}

.dark .storefront-header-nav__sep {
    color: rgb(82 82 91);
}

.storefront-header-nav__link {
    display: inline-block;
    flex-shrink: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    color: #18181b;
    transition: color 0.15s ease;
}

.storefront-header-nav__link:hover {
    color: #4f46e5;
}

.dark .storefront-header-nav__link {
    color: #fafafa;
}

.dark .storefront-header-nav__link:hover {
    color: #818cf8;
}

.storefront-header-nav__link--sale {
    color: #dc2626;
}

.storefront-header-nav__link--cta {
    font-weight: 700;
}

.storefront-header-nav__link--cta-kampanya {
    color: #b91c1c;
}

.storefront-header-nav__link--cta-yeni {
    color: #6d28d9;
}

.storefront-header-nav__link--cta-cok-satan {
    color: #c2410c;
}

.storefront-header-nav__link--cta:hover,
.storefront-header-nav__link--cta.is-active {
    opacity: 0.85;
}

.dark .storefront-header-nav__link--cta-kampanya {
    color: #f87171;
}

.dark .storefront-header-nav__link--cta-yeni {
    color: #a78bfa;
}

.dark .storefront-header-nav__link--cta-cok-satan {
    color: #fb923c;
}

.dark .storefront-header-nav__link--sale {
    color: #f87171;
}

.storefront-catalog {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    overflow: visible;
}

@media (min-width: 768px) and (max-width: 1023px) {
    .storefront-catalog {
        flex-direction: row;
        align-items: flex-start;
        gap: 2rem;
    }
}

@media (min-width: 1024px) {
    .storefront-catalog {
        display: grid;
        grid-template-columns: minmax(16rem, 18rem) minmax(0, 1fr);
        align-items: start;
        gap: 3rem;
    }

    .storefront-catalog--home {
        grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr);
    }
}

.storefront-catalog-main {
    min-width: 0;
    flex: 1 1 auto;
    width: 100%;
}

.storefront-filter-aside {
    align-self: flex-start;
}

@media (min-width: 768px) {
    .storefront-filter-aside {
        position: sticky;
        position: -webkit-sticky;
        top: var(--storefront-sticky-top);
        max-height: calc(100dvh - var(--storefront-sticky-top) - 1rem);
        overflow-x: visible;
        overflow-y: auto;
        overscroll-behavior: contain;
        z-index: 30;
    }

    .storefront-filter-aside.storefront-filter-aside--compact {
        max-height: none;
        overflow: visible;
        overscroll-behavior: auto;
        padding: 1rem 1.125rem;
        border-radius: 1rem;
    }
}

/* Sırala çubuğu: ürünlerle birlikte kayar (üstte yüzen görünüm yok) */
.storefront-catalog-toolbar {
    margin-bottom: 2rem;
}

@media (min-width: 1024px) {
    .storefront-filter-aside {
        width: 100%;
        max-width: none;
    }

    .storefront-filter-aside.storefront-filter-aside--compact {
        padding: 1.125rem 1.25rem;
    }
}

/* Katalog filtre kartı — kompakt, tam yükseklik, iç scroll yok */
.storefront-filter-aside--compact .storefront-filter-form {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

@media (min-width: 768px) {
    .storefront-filter-aside--compact .storefront-filter-form {
        gap: 1rem;
    }
}

.storefront-filter-aside--compact .storefront-filter-section {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-height: 0;
}

.storefront-filter-aside--compact .storefront-filter-section__head {
    padding-bottom: 0.4rem;
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
}

.storefront-filter-aside--compact .storefront-filter-options {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding-top: 0.15rem;
}

.storefront-filter-aside--compact .storefront-filter-options:not(.storefront-filter-options--colors):not(.storefront-filter-options--sizes) {
    max-height: none;
    overflow: visible;
}

.storefront-filter-aside--compact .storefront-filter-options--sizes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem 0.45rem;
}

/* Ayakkabı renkleri — kendi içinde kaydır (PC + mobil) */
.storefront-filter-options--colors {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-height: 0;
    max-height: 10rem;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0.35rem 0.3rem 0.35rem 0.4rem;
    padding-right: 0.35rem;
    border: 1px solid rgb(228 228 231);
    border-radius: 0.5rem;
    background: rgb(250 250 250 / 0.9);
    scrollbar-width: thin;
    scrollbar-color: rgb(167 139 250 / 0.5) transparent;
}

.dark .storefront-filter-options--colors {
    border-color: rgb(63 63 70);
    background: rgb(24 24 27 / 0.65);
    scrollbar-color: rgb(129 140 248 / 0.45) transparent;
}

.storefront-filter-options--colors::-webkit-scrollbar {
    width: 4px;
}

.storefront-filter-options--colors::-webkit-scrollbar-thumb {
    border-radius: 9999px;
    background: rgb(167 139 250 / 0.5);
}

.dark .storefront-filter-options--colors::-webkit-scrollbar-thumb {
    background: rgb(129 140 248 / 0.45);
}

@media (max-width: 767px) {
    .storefront-filter-options--colors {
        max-height: clamp(9rem, 28vh, 11.5rem);
    }
}

.storefront-filter-options--colors label {
    flex-shrink: 0;
}

.storefront-filter-aside--compact .storefront-filter-options label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
    width: 100%;
    min-height: 1.75rem;
}

.storefront-filter-aside--compact .storefront-filter-options--sizes label {
    padding: 0.12rem 0.2rem;
}

.storefront-filter-aside--compact .storefront-filter-options label > span:last-child {
    font-size: 0.8125rem;
    line-height: 1.25;
}

.storefront-filter-aside--compact input[type="text"],
.storefront-filter-aside--compact input[type="number"] {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}

.storefront-filter-aside--compact .storefront-filter-section--search label {
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
}

@media (max-width: 767px) {
    .storefront-filter-aside.storefront-filter-aside--compact {
        padding: 1.25rem 1rem;
    }

    .storefront-filter-aside--compact .storefront-filter-options--sizes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Filtre sütunu + duyuru bandı (bitişik oval üst) */
.storefront-filter-column {
    display: flex;
    flex-direction: column;
    align-self: flex-start;
    width: 100%;
    min-width: 0;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .storefront-filter-column {
        position: sticky;
        position: -webkit-sticky;
        top: var(--storefront-sticky-top);
        max-height: calc(100dvh - var(--storefront-sticky-top) - 1rem);
        z-index: 30;
    }

    .storefront-filter-column .storefront-filter-aside {
        position: static;
        top: auto;
        max-height: none;
        flex: 1 1 auto;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* Mobil filtre çekmecesi (body teleport) — sabit başlık + kaydırılabilir form */
html.storefront-page-scroll-locked,
html.storefront-page-scroll-locked body {
    overflow: hidden !important;
    overscroll-behavior: none;
}

html.storefront-filter-drawer-open,
html.storefront-filter-drawer-open body {
    overscroll-behavior: none;
}

@media (max-width: 767.98px) {
    html.storefront-filter-drawer-open .mobile-bottom-nav {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

.storefront-filter-drawer {
    position: fixed;
    inset: 0;
    z-index: 6100;
    display: flex;
    flex-direction: column;
    max-height: 100dvh;
    max-height: 100vh;
    overscroll-behavior: contain;
    isolation: isolate;
    touch-action: manipulation;
}

.storefront-filter-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 0.5);
    -webkit-tap-highlight-color: transparent;
}

.storefront-filter-drawer__panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100dvh;
    max-height: 100vh;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.35);
}

.dark .storefront-filter-drawer__panel {
    background: #09090b;
}

.storefront-filter-drawer__header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    z-index: 2;
    margin: 0;
    padding: max(0.75rem, env(safe-area-inset-top, 0px)) 1rem 0.75rem;
    border-bottom: 1px solid rgb(228 228 231 / 0.95);
    background-color: #ffffff;
}

.dark .storefront-filter-drawer__header {
    border-bottom-color: rgb(39 39 42 / 0.95);
    background-color: #09090b;
}

.storefront-filter-drawer__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0.75rem 1rem
        calc(1rem + var(--storefront-mobile-nav-h, 3.65rem) + env(safe-area-inset-bottom, 0px));
}

.storefront-filter-drawer .storefront-filter-aside {
    position: static;
    top: auto;
    width: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    overflow: visible;
}

.storefront-filter-drawer .storefront-filter-form {
    gap: 0.875rem;
}

.storefront-filter-drawer .storefront-filter-options--colors {
    max-height: clamp(9rem, 28vh, 11.5rem);
}

.storefront-filter-actions {
    margin-top: 0.35rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgb(228 228 231);
}

.dark .storefront-filter-actions {
    border-top-color: rgb(63 63 70);
}

.storefront-filter-drawer .storefront-filter-drawer__scroll .storefront-filter-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    padding-bottom: 0.15rem;
    background: linear-gradient(180deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / 0.92) 28%, rgb(255 255 255) 55%);
}

.dark .storefront-filter-drawer .storefront-filter-drawer__scroll .storefront-filter-actions {
    background: linear-gradient(180deg, rgb(9 9 11 / 0) 0%, rgb(9 9 11 / 0.92) 28%, rgb(9 9 11) 55%);
}

.storefront-filter-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    min-height: 2.65rem;
    padding: 0.55rem 0.85rem;
    border: 1px solid rgb(228 228 231);
    border-radius: 0.65rem;
    background: rgb(250 250 250);
    color: rgb(63 63 70);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.storefront-filter-clear .ui-icon svg {
    width: 0.95rem;
    height: 0.95rem;
}

.dark .storefront-filter-clear {
    border-color: rgb(63 63 70);
    background: rgb(24 24 27);
    color: rgb(212 212 216);
}

.storefront-filter-clear:hover {
    border-color: rgb(239 68 68);
    color: rgb(220 38 38);
    background: rgb(254 242 242);
}

.dark .storefront-filter-clear:hover {
    border-color: rgb(239 68 68);
    color: rgb(252 165 165);
    background: rgb(69 10 10);
}

.storefront-filter-clear--muted {
    opacity: 0.45;
    pointer-events: none;
    cursor: default;
}

/* ——— Kampanyalar sayfası ——— */
.storefront-page--kampanyalar .storefront-page-hero {
    margin-bottom: 1rem;
}

.storefront-page--kampanyalar .storefront-page-hero .home-card-sheen {
    padding: 1.15rem 1.25rem;
}

@media (min-width: 768px) {
    .storefront-page--kampanyalar .storefront-page-hero {
        margin-bottom: 1.35rem;
    }

    .storefront-page--kampanyalar .storefront-page-hero .home-card-sheen {
        padding: 1.35rem 2rem;
    }
}

.storefront-page--kampanyalar .storefront-page-hero h1 {
    font-size: clamp(1.65rem, 5.5vw, 2.35rem);
    line-height: 1.05;
}

.storefront-page--kampanyalar .storefront-page-hero p {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
}

@media (min-width: 768px) {
    .storefront-page--kampanyalar .storefront-page-hero p {
        font-size: 0.875rem;
    }
}

.storefront-page--kampanyalar .storefront-page-hero .home-card-sheen > .absolute {
    opacity: 0.45;
}

.storefront-kampanyalar-shell {
    width: 100%;
    max-width: 96rem;
    margin-inline: auto;
    padding-inline: clamp(0.65rem, 2.5vw, 3rem);
}

.storefront-kampanyalar-shell--aligned {
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
}

.storefront-kampanyalar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 768px) {
    .storefront-kampanyalar {
        gap: 1.35rem;
    }
}

.storefront-kampanyalar__stack {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

@media (min-width: 768px) {
    .storefront-kampanyalar__stack {
        gap: 1.15rem;
    }
}

.storefront-kampanyalar-banner {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    min-height: clamp(17.5rem, 58vw, 22rem);
    border-radius: 1.15rem;
    border: 1px solid rgb(255 255 255 / 0.1);
    background: #0a0812;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 16px 40px -24px rgb(15 23 42 / 0.5);
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}

@media (min-width: 640px) {
    .storefront-kampanyalar-banner {
        min-height: clamp(19rem, 42vw, 26rem);
        border-radius: 1.35rem;
    }
}

@media (min-width: 1024px) {
    .storefront-kampanyalar-banner {
        min-height: clamp(21rem, 34vw, 28rem);
        border-radius: 1.5rem;
    }
}

.storefront-kampanyalar-banner--lead {
    min-height: clamp(21rem, 72vw, 28rem);
}

@media (min-width: 640px) {
    .storefront-kampanyalar-banner--lead {
        min-height: clamp(24rem, 48vw, 32rem);
    }
}

@media (min-width: 1024px) {
    .storefront-kampanyalar-banner--lead {
        min-height: clamp(28rem, 52vh, 38rem);
    }
}

.storefront-kampanyalar--solo .storefront-kampanyalar-banner--lead {
    min-height: clamp(24rem, 78vh, 34rem);
}

@media (min-width: 768px) {
    .storefront-kampanyalar--solo .storefront-kampanyalar-banner--lead {
        min-height: clamp(30rem, 62vh, 42rem);
    }
}

.storefront-kampanyalar-banner:hover {
    transform: translateY(-2px);
    box-shadow: 0 24px 52px -22px rgb(109 40 217 / 0.38);
}

.storefront-kampanyalar-banner__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.storefront-kampanyalar-banner__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transition: transform 0.5s ease;
}

.storefront-kampanyalar-banner:hover .storefront-kampanyalar-banner__media img {
    transform: scale(1.05);
}

.storefront-kampanyalar-banner__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgb(8 6 16 / 0.08) 0%, rgb(8 6 16 / 0.5) 50%, rgb(8 6 16 / 0.94) 100%),
        linear-gradient(90deg, rgb(8 6 16 / 0.78) 0%, rgb(8 6 16 / 0.35) 42%, rgb(8 6 16 / 0.08) 68%, transparent 100%);
}

@media (min-width: 768px) {
    .storefront-kampanyalar-banner__overlay {
        background:
            linear-gradient(180deg, rgb(8 6 16 / 0.05) 0%, rgb(8 6 16 / 0.35) 45%, rgb(8 6 16 / 0.88) 100%),
            linear-gradient(90deg, rgb(8 6 16 / 0.82) 0%, rgb(8 6 16 / 0.42) 36%, rgb(8 6 16 / 0.1) 58%, transparent 100%);
    }
}

.storefront-kampanyalar-banner__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 0.65rem;
    min-height: inherit;
    padding: 1.25rem 1.15rem 1.35rem;
}

@media (min-width: 640px) {
    .storefront-kampanyalar-banner__content {
        padding: 1.5rem 1.5rem 1.65rem;
        max-width: 38rem;
    }
}

@media (min-width: 1024px) {
    .storefront-kampanyalar-banner__content {
        padding: 2rem 2.25rem;
        max-width: 42rem;
        gap: 0.75rem;
    }

    .storefront-kampanyalar-banner--lead .storefront-kampanyalar-banner__content {
        max-width: 46rem;
        padding: 2.25rem 2.5rem;
    }
}

.storefront-kampanyalar-banner__badge {
    display: inline-flex;
    padding: 0.35rem 0.75rem;
    border-radius: 9999px;
    background: rgb(109 40 217 / 0.92);
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.storefront-kampanyalar-banner__title {
    margin: 0;
    font-size: clamp(1.5rem, 5.5vw, 2.15rem);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.storefront-kampanyalar-banner--lead .storefront-kampanyalar-banner__title {
    font-size: clamp(1.75rem, 6.5vw, 3rem);
}

@media (min-width: 1024px) {
    .storefront-kampanyalar-banner--lead .storefront-kampanyalar-banner__title {
        font-size: clamp(2.25rem, 3.8vw, 3.35rem);
    }
}

.storefront-kampanyalar-banner__desc {
    margin: 0;
    font-size: clamp(0.875rem, 2.8vw, 1rem);
    line-height: 1.55;
    color: rgb(255 255 255 / 0.86);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.storefront-kampanyalar-banner--lead .storefront-kampanyalar-banner__desc {
    -webkit-line-clamp: 4;
    font-size: clamp(0.9375rem, 2.5vw, 1.125rem);
}

.storefront-kampanyalar-banner__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.35rem;
    padding: 0.7rem 1.15rem;
    border-radius: 9999px;
    background: #fff;
    color: rgb(24 24 27);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.storefront-kampanyalar-banner--lead .storefront-kampanyalar-banner__cta {
    padding: 0.8rem 1.35rem;
    font-size: 0.8125rem;
}

.storefront-kampanyalar-banner__cta .ui-icon svg {
    width: 0.8rem;
    height: 0.8rem;
}

.storefront-kampanyalar-banner:hover .storefront-kampanyalar-banner__cta {
    background: rgb(237 233 254);
    color: rgb(109 40 217);
    transform: translateX(2px);
}

.storefront-kampanyalar-promo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    margin-top: 0.15rem;
    padding: 1.15rem 1.15rem;
    border-radius: 1.1rem;
    border: 1px solid rgb(228 228 231);
    background: linear-gradient(135deg, rgb(250 250 250) 0%, rgb(237 233 254 / 0.55) 100%);
}

@media (min-width: 768px) {
    .storefront-kampanyalar-promo {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 1.25rem 1.5rem;
    }
}

.dark .storefront-kampanyalar-promo {
    border-color: rgb(63 63 70);
    background: linear-gradient(135deg, rgb(24 24 27) 0%, rgb(46 16 101 / 0.45) 100%);
}

.storefront-kampanyalar-promo__eyebrow {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgb(109 40 217);
}

.storefront-kampanyalar-promo__title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 800;
    color: rgb(24 24 27);
}

.dark .storefront-kampanyalar-promo__title {
    color: rgb(250 250 250);
}

.storefront-kampanyalar-promo__sub {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    color: rgb(113 113 122);
}

.storefront-kampanyalar-promo__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    flex-shrink: 0;
    padding: 0.65rem 1.1rem;
    border-radius: 9999px;
    background: rgb(109 40 217);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

.storefront-kampanyalar-promo__btn .ui-icon svg {
    width: 0.75rem;
    height: 0.75rem;
}

.storefront-kampanyalar-promo__btn:hover {
    background: rgb(91 33 182);
    transform: translateY(-1px);
}

.storefront-kampanyalar-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.65rem;
    padding: 2.5rem 1.5rem;
    border-radius: 1.25rem;
    border: 1px dashed rgb(228 228 231);
    background: rgb(250 250 250 / 0.8);
}

.dark .storefront-kampanyalar-empty {
    border-color: rgb(63 63 70);
    background: rgb(24 24 27 / 0.55);
}

.storefront-kampanyalar-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    background: rgb(237 233 254);
    color: rgb(109 40 217);
}

.storefront-kampanyalar-empty__icon .ui-icon svg {
    width: 1.35rem;
    height: 1.35rem;
}

.dark .storefront-kampanyalar-empty__icon {
    background: rgb(46 16 101);
    color: rgb(167 139 250);
}

.storefront-kampanyalar-empty__title {
    margin: 0.25rem 0 0;
    font-size: 1.125rem;
    font-weight: 800;
    color: rgb(24 24 27);
}

.dark .storefront-kampanyalar-empty__title {
    color: rgb(250 250 250);
}

.storefront-kampanyalar-empty__text {
    margin: 0;
    max-width: 22rem;
    font-size: 0.875rem;
    color: rgb(113 113 122);
}

.storefront-kampanyalar-empty__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    padding: 0.65rem 1.15rem;
    border-radius: 9999px;
    background: rgb(109 40 217);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    text-decoration: none;
    transition: background 0.2s ease;
}

.storefront-kampanyalar-empty__btn:hover {
    background: rgb(91 33 182);
}

/* ——— Duyuru bandı ——— */
.hero-promo-strip {
    --hero-promo-fade: #f8fafc;
    position: relative;
    width: 100%;
    overflow: hidden;
    border: 1px solid rgb(228 228 231 / 0.9);
    background: linear-gradient(180deg, rgb(248 250 252 / 0.98) 0%, #fff 100%);
    box-shadow: 0 1px 0 rgb(255 255 255 / 0.85) inset;
}

.hero-promo-strip::before,
.hero-promo-strip::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1.75rem;
    z-index: 2;
    pointer-events: none;
}

.hero-promo-strip::before {
    left: 0;
    background: linear-gradient(90deg, var(--hero-promo-fade) 0%, transparent 100%);
}

.hero-promo-strip::after {
    right: 0;
    background: linear-gradient(270deg, var(--hero-promo-fade) 0%, transparent 100%);
}

.dark .hero-promo-strip {
    --hero-promo-fade: #09090b;
    border-color: rgb(63 63 70 / 0.9);
    background: linear-gradient(180deg, rgb(24 24 27 / 0.98) 0%, rgb(9 9 11) 100%);
    box-shadow: 0 1px 0 rgb(255 255 255 / 0.04) inset;
}

/* Navbar üstü — duyuru bandı */
.storefront-announcement-band--header.hero-promo-strip {
    flex-shrink: 0;
    --hero-promo-fade: #eef2ff;
    border: none;
    border-bottom: 1px solid rgba(99, 102, 241, 0.14);
    border-radius: 0;
    background: linear-gradient(90deg, #eef2ff 0%, #f8f7ff 48%, #eef2ff 100%) !important;
    color: #312e81;
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.65);
}

.storefront-announcement-band--header.hero-promo-strip::before,
.storefront-announcement-band--header.hero-promo-strip::after {
    width: 2.5rem;
}

.storefront-announcement-band--header .hero-promo-marquee-item strong,
.storefront-announcement-band--header .hero-promo-marquee-item a,
.storefront-announcement-band--header .announcement-rotate__text strong,
.storefront-announcement-band--header .announcement-rotate__text a {
    color: #4f46e5;
}

.dark .storefront-announcement-band--header.hero-promo-strip {
    --hero-promo-fade: #18181b;
    background: linear-gradient(
        90deg,
        rgba(24, 24, 27, 0.98) 0%,
        rgba(39, 39, 42, 0.94) 48%,
        rgba(24, 24, 27, 0.98) 100%
    ) !important;
    color: #a1a1aa;
    border-bottom-color: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.dark .storefront-announcement-band--header .hero-promo-marquee-item {
    color: #a1a1aa;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.dark .storefront-announcement-band--header .hero-promo-marquee-item strong,
.dark .storefront-announcement-band--header .hero-promo-marquee-item a,
.dark .storefront-announcement-band--header .announcement-rotate__text strong,
.dark .storefront-announcement-band--header .announcement-rotate__text a {
    color: #d4d4d8;
    font-weight: 600;
}

.dark .storefront-announcement-band--header .hero-promo-marquee-item .ui-icon {
    opacity: 0.55;
    color: #a1a1aa;
}

.dark .storefront-announcement-band--header .hero-promo-marquee-dot {
    background: rgba(161, 161, 170, 0.32);
}

/* Navbar üstü — mesajlar sırayla değişir (kayar değil) */
.storefront-announcement-band--rotate.storefront-announcement-band--header .announcement-rotate__line {
    text-transform: none;
    letter-spacing: 0.02em;
    font-weight: 500;
}

.storefront-announcement-band--header .announcement-rotate {
    padding: 0.35rem 0.75rem;
    text-align: center;
}

@media (min-width: 640px) {
    .storefront-announcement-band--header .announcement-rotate {
        padding: 0.4rem 1rem;
    }
}

.storefront-announcement-band--header .announcement-rotate__stage {
    position: relative;
    min-height: 1.15rem;
    height: 1.15rem;
    overflow: hidden;
}

.storefront-announcement-band--header .announcement-rotate__line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin: 0;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 100%, 0);
    transition:
        transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

@media (min-width: 640px) {
    .storefront-announcement-band--header .announcement-rotate__line {
        font-size: 0.6875rem;
    }
}

.storefront-announcement-band--header .announcement-rotate__line.is-active {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
    z-index: 2;
}

.storefront-announcement-band--header .announcement-rotate__line.is-leaving,
.storefront-announcement-band--header .announcement-rotate__line.is-entering {
    opacity: 0;
    visibility: hidden;
    transform: none;
    z-index: 1;
}

.storefront-announcement-band--header .announcement-rotate__text {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.storefront-announcement-band--header .announcement-rotate__sep {
    opacity: 0.35;
    font-weight: 400;
    user-select: none;
    color: #6366f1;
}

.dark .storefront-announcement-band--header .announcement-rotate__sep {
    color: #52525b;
    opacity: 0.55;
}

.dark .storefront-announcement-band--header .announcement-rotate__line {
    font-weight: 500;
    letter-spacing: 0.1em;
    color: #a1a1aa;
}

.storefront-announcement-band--header .announcement-rotate__text strong,
.storefront-announcement-band--header .announcement-rotate__text a {
    font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
    .storefront-announcement-band--header .announcement-rotate__line {
        transition: opacity 0.2s ease;
        transform: none !important;
    }

    .storefront-announcement-band--header .announcement-rotate__line.is-leaving,
    .storefront-announcement-band--header .announcement-rotate__line.is-entering {
        transform: none !important;
    }
}

.storefront-announcement-band--header .hero-promo-ticker__card {
    border-color: rgba(99, 102, 241, 0.18);
    background: rgba(238, 242, 255, 0.96);
    box-shadow: none;
}

.storefront-announcement-band--header .hero-promo-ticker__text {
    color: #312e81;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dark .storefront-announcement-band--header .hero-promo-ticker__card {
    border-color: rgba(255, 255, 255, 0.07);
    background: rgba(39, 39, 42, 0.9);
}

.dark .storefront-announcement-band--header .hero-promo-ticker__text {
    color: #d4d4d8;
    font-weight: 500;
    letter-spacing: 0.06em;
}

.storefront-announcement-band--stack {
    flex-shrink: 0;
    border-bottom: none;
    border-radius: 1.25rem 1.25rem 0 0;
    box-shadow:
        0 12px 28px -18px rgb(0 0 0 / 0.22),
        0 0 0 1px rgb(15 23 42 / 0.05);
}

.dark .storefront-announcement-band--stack {
    box-shadow:
        0 12px 28px -18px rgb(0 0 0 / 0.45),
        0 0 0 1px rgb(255 255 255 / 0.06);
}

.storefront-filter-column .storefront-filter-aside--stacked {
    margin-top: -1px;
    border-top: none;
    border-radius: 0 0 1.25rem 1.25rem;
}

.storefront-announcement-band--mobile-bar {
    border-radius: 9999px;
    box-shadow:
        0 8px 20px -12px rgb(0 0 0 / 0.2),
        0 0 0 1px rgb(15 23 42 / 0.05);
}

.storefront-announcement-band--menu {
    flex-shrink: 0;
    margin: 0 0.75rem 0.75rem;
    border-radius: 9999px;
    box-shadow:
        0 10px 24px -14px rgb(0 0 0 / 0.28),
        0 0 0 1px rgb(15 23 42 / 0.06);
}

.dark .storefront-announcement-band--menu {
    box-shadow:
        0 10px 24px -14px rgb(0 0 0 / 0.5),
        0 0 0 1px rgb(255 255 255 / 0.07);
}

@media (prefers-reduced-motion: reduce) {
    .hero-promo-marquee-runner {
        animation: none !important;
        -webkit-animation: none !important;
    }
}

.hero-promo-marquee {
    padding: 0.6rem 0;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
}

@media (min-width: 640px) {
    .hero-promo-marquee {
        padding: 0.65rem 0;
    }
}

@-webkit-keyframes hero-promo-ticker {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
    }
}

@keyframes hero-promo-ticker {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

.hero-promo-marquee-track {
    display: block;
    overflow: visible;
}

.hero-promo-marquee-runner {
    display: inline-flex;
    flex-wrap: nowrap;
    flex-shrink: 0;
    width: -webkit-max-content;
    width: max-content;
    align-items: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-animation: hero-promo-ticker 36s linear infinite;
    animation: hero-promo-ticker 36s linear infinite;
}

@media (max-width: 639px) {
    .hero-promo-marquee-runner {
        -webkit-animation-duration: 32s;
        animation-duration: 32s;
    }
}

html.is-ios .hero-promo-marquee--scroll {
    display: none !important;
}

.hero-promo-ticker {
    display: none;
    padding: 0.55rem 0.75rem;
    justify-content: center;
    align-items: center;
}

html.is-ios .hero-promo-ticker {
    display: flex !important;
}

.hero-promo-ticker[hidden] {
    display: none !important;
}

html.is-ios .hero-promo-ticker[hidden] {
    display: flex !important;
}

.hero-promo-ticker__card {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: min(100%, 22rem);
    margin: 0 auto;
    padding: 0.55rem 0.75rem;
    border-radius: 0.65rem;
    border: 1px solid rgb(228 228 231);
    background: rgb(255 255 255 / 0.97);
    box-shadow: 0 2px 14px rgb(0 0 0 / 0.06);
    opacity: 0;
    transform: translate3d(0, 4px, 0);
    transition: opacity 0.28s ease, transform 0.28s ease;
}

html.is-ios .hero-promo-ticker__card {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.hero-promo-ticker--visible .hero-promo-ticker__card {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.dark .hero-promo-ticker__card {
    border-color: rgb(63 63 70);
    background: rgb(24 24 27 / 0.97);
    box-shadow: 0 2px 16px rgb(0 0 0 / 0.35);
}

.hero-promo-ticker__icon {
    flex-shrink: 0;
    display: inline-flex;
}

.hero-promo-ticker__icon .ui-icon {
    width: 0.85rem;
    height: 0.85rem;
}

.hero-promo-ticker__text {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-size: 0.6875rem;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: rgb(82 82 91);
    text-align: left;
}

.dark .hero-promo-ticker__text {
    color: rgb(212 212 216);
}

.hero-promo-marquee-group {
    display: flex;
    flex-shrink: 0;
    align-items: center;
}

.hero-promo-marquee-item {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.45rem;
    padding: 0 1.25rem;
    white-space: nowrap;
    font-size: 0.6875rem;
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: rgb(100 116 139);
}

@media (min-width: 640px) {
    .hero-promo-marquee-item {
        padding: 0 1.75rem;
        font-size: 0.75rem;
    }
}

.hero-promo-marquee-item strong {
    font-weight: 600;
    color: rgb(51 65 85);
    letter-spacing: 0.05em;
}

.dark .hero-promo-marquee-item strong {
    color: rgb(228 228 231);
}

.hero-promo-marquee-item .ui-icon {
    width: 0.85rem;
    height: 0.85rem;
    flex-shrink: 0;
    opacity: 0.9;
}

.hero-promo-marquee-dot {
    width: 3px;
    height: 3px;
    border-radius: 9999px;
    background: rgb(203 213 225);
    flex-shrink: 0;
    margin-left: 0.15rem;
}

.dark .hero-promo-marquee-dot {
    background: rgb(63 63 70);
}

/* ——— Ana sayfa hero (mockup) ——— */
.storefront-hero-wrap {
    background: var(--brand-bg, #faf8f6);
    padding-bottom: 2rem;
}

.dark .storefront-hero-wrap {
    background: #09090b;
}

.storefront-hero-container {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
}

@media (max-width: 639px) {
    .storefront-hero-wrap {
        padding-bottom: 1rem;
    }
}

.storefront-hero-card {
    display: flex;
    flex-direction: column;
    overflow: visible;
    background: transparent;
    border: none;
    box-shadow: none;
}

.dark .storefront-hero-card {
    background: transparent;
    box-shadow: none;
}

.storefront-hero-slider {
    position: relative;
    min-height: min(76vh, 780px);
    overflow: hidden;
    isolation: isolate;
    background: #0a0a0a;
}

@media (min-width: 640px) {
    .storefront-hero-slider {
        min-height: min(70vh, 760px);
    }
}

@media (min-width: 768px) {
    .storefront-hero-slider {
        aspect-ratio: 2.15 / 1;
        min-height: 0;
        height: auto;
        max-height: min(88vh, 920px);
    }
}

@media (min-width: 1280px) {
    .storefront-hero-slider {
        aspect-ratio: 2.35 / 1;
        max-height: min(84vh, 960px);
    }
}

.storefront-hero-slide {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.storefront-hero-slide__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.storefront-hero-slide__bg picture {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.storefront-hero-slide__bg .storefront-hero-bg-img,
.storefront-hero-slide__bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* UI ölçeği aktifken slider sağ boşluk / aspect-ratio kayması */
html[data-ui-scale] .storefront-hero-card,
html[data-ui-scale] .storefront-hero-slider,
html[data-ui-scale] .storefront-hero-slide,
html[data-ui-scale] .storefront-hero-slide__bg {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

html[data-ui-scale] .storefront-hero-slide__bg picture {
    width: 100%;
    height: 100%;
}

html[data-ui-scale] .storefront-hero-slide__bg .storefront-hero-bg-img,
html[data-ui-scale] .storefront-hero-slide__bg img {
    width: 100%;
    min-width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.02);
    transform-origin: center center;
}

html[data-ui-scale] .storefront-hero-slider {
    overflow: hidden;
}

.storefront-hero-slide__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        to top,
        rgb(0 0 0 / 0.88) 0%,
        rgb(0 0 0 / 0.45) 38%,
        rgb(0 0 0 / 0.15) 68%,
        rgb(0 0 0 / 0.08) 100%
    );
}

@media (min-width: 768px) {
    .storefront-hero-slide__overlay {
        background: linear-gradient(
            to right,
            rgb(0 0 0 / 0.82) 0%,
            rgb(0 0 0 / 0.5) 42%,
            rgb(0 0 0 / 0.12) 72%,
            transparent 100%
        );
    }
}

.storefront-hero-slide__content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    height: 100%;
    min-height: inherit;
    /* Alt kontrol şeridi (ilerleme + oklar) için boşluk */
    padding: 1.5rem 1.15rem 5.25rem;
    pointer-events: none;
    box-sizing: border-box;
}

@media (max-width: 639px) {
    .storefront-hero-slide__content {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
        padding-bottom: 5.5rem;
    }

    .storefront-hero-slide__copy {
        width: 100%;
        max-width: none;
        min-width: 0;
    }

    .storefront-hero-title {
        font-size: clamp(1.75rem, 9vw, 2.75rem);
        line-height: 1;
        overflow-wrap: break-word;
        word-break: normal;
    }

    .storefront-hero-eyebrow {
        letter-spacing: 0.14em;
    }

    .storefront-hero-actions {
        gap: 0.5rem;
    }

    .storefront-hero-btn--secondary {
        display: none;
    }
}

@media (min-width: 640px) {
    .storefront-hero-slide__content {
        align-items: center;
        padding: 2rem 2.5rem 5.25rem;
    }
}

@media (min-width: 768px) {
    .storefront-hero-slide__content {
        align-items: center;
        padding: 2.5rem 3.5rem 7.5rem 5.5rem;
    }
}

@media (min-width: 1024px) {
    .storefront-hero-slide__content {
        padding: 2.75rem 4rem 7.75rem 7rem;
    }
}

.storefront-hero-slide__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    max-width: 36rem;
    pointer-events: auto;
}

.storefront-hero-eyebrow {
    margin: 0 0 0.75rem;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgb(255 255 255 / 0.75);
}

.storefront-hero-title {
    margin: 0 0 0.75rem;
    font-size: clamp(2.25rem, 8vw, 4.5rem);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow: 0 2px 16px rgb(0 0 0 / 0.45);
}

.storefront-hero-lead {
    margin: 0 0 0.5rem;
    font-size: clamp(0.875rem, 2.5vw, 1.125rem);
    font-weight: 700;
    line-height: 1.35;
    color: rgb(255 255 255 / 0.92);
    max-width: 28rem;
    text-shadow: 0 1px 10px rgb(0 0 0 / 0.5);
}

.storefront-hero-desc {
    margin: 0 0 1.5rem;
    font-size: 0.875rem;
    line-height: 1.55;
    color: rgb(255 255 255 / 0.85);
    max-width: 26rem;
    text-shadow: 0 1px 8px rgb(0 0 0 / 0.45);
}

.storefront-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.storefront-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.35rem;
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.storefront-hero-btn:hover {
    transform: translateY(-1px);
}

.storefront-hero-btn--primary {
    background: #ffffff;
    color: #09090b;
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.35);
}

.storefront-hero-btn--primary:hover {
    background: rgb(255 255 255 / 0.92);
}

.storefront-hero-btn--secondary {
    background: transparent;
    color: #ffffff;
    border: 1.5px solid rgb(255 255 255 / 0.85);
}

.storefront-hero-btn--secondary:hover {
    background: rgb(255 255 255 / 0.1);
    border-color: #ffffff;
}

.storefront-hero-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1.35rem;
}

.storefront-hero-proof__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    padding: 0.6rem 0.85rem;
    border-radius: 0.5rem;
    border: 1px solid rgb(255 255 255 / 0.14);
    background: rgb(0 0 0 / 0.42);
    backdrop-filter: blur(6px);
}

.storefront-hero-proof__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    color: #d4a853;
}

.storefront-hero-proof__icon .ui-icon svg {
    width: 1.1rem;
    height: 1.1rem;
}

.storefront-hero-proof__text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.storefront-hero-proof__text strong {
    font-size: 0.8125rem;
    font-weight: 800;
    line-height: 1.2;
    color: #ffffff;
}

.storefront-hero-proof__text span {
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.25;
    color: rgb(255 255 255 / 0.72);
}

@media (max-width: 639px) {
    .storefront-hero-proof {
        display: none;
    }
}

/* Oklar — yan kenar, koyu cam */
.storefront-hero-nav {
    position: absolute;
    top: auto;
    bottom: 1.1rem;
    transform: none;
    z-index: 25;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    border: 1px solid rgb(255 255 255 / 0.22);
    background: rgb(0 0 0 / 0.38);
    color: #ffffff;
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.35);
    transition: transform 0.15s ease, background-color 0.15s ease;
    pointer-events: auto;
}

.storefront-hero-nav:hover {
    transform: scale(1.05);
    background: rgb(0 0 0 / 0.52);
    border-color: rgb(255 255 255 / 0.35);
}

.storefront-hero-nav--prev {
    right: 4.35rem;
    left: auto;
}

.storefront-hero-nav--next {
    right: 1.15rem;
}

@media (min-width: 768px) {
    .storefront-hero-nav {
        top: 50%;
        bottom: auto;
        width: 2.75rem;
        height: 2.75rem;
        transform: translateY(-50%);
    }

    .storefront-hero-nav:hover {
        transform: translateY(-50%) scale(1.05);
    }

    .storefront-hero-nav--prev {
        left: 1.25rem;
        right: auto;
    }

    .storefront-hero-nav--next {
        right: 1.25rem;
        left: auto;
    }
}

@media (min-width: 1024px) {
    .storefront-hero-nav--prev {
        left: 1.75rem;
    }

    .storefront-hero-nav--next {
        right: 1.75rem;
    }
}

.storefront-hero-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2.85rem;
    z-index: 22;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 1.15rem;
    pointer-events: none;
}

@media (min-width: 768px) {
    .storefront-hero-controls {
        bottom: 3.35rem;
        padding-left: 5.5rem;
        padding-right: 5.5rem;
    }
}

@media (min-width: 1024px) {
    .storefront-hero-controls {
        padding-left: 7rem;
        padding-right: 7rem;
    }
}

.storefront-hero-pagination {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    pointer-events: auto;
}

.storefront-hero-pagination__btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: 0.2rem 0.35rem 0.45rem;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
    color: rgb(255 255 255 / 0.45);
    transition: color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.storefront-hero-pagination__btn:hover {
    color: rgb(255 255 255 / 0.85);
}

.storefront-hero-pagination__btn[aria-current="true"] {
    color: #ffffff;
}

.storefront-hero-pagination__btn[aria-current="true"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: -0.15rem;
    bottom: 0;
    height: 2px;
    border-radius: 9999px;
    background: linear-gradient(90deg, #7c3aed 0%, #a78bfa 100%);
    box-shadow: 0 0 12px rgb(124 58 237 / 0.65);
}

.storefront-hero-thumbs {
    display: none;
    align-items: center;
    gap: 0.5rem;
    pointer-events: auto;
}

@media (min-width: 768px) {
    .storefront-hero-thumbs {
        display: flex;
    }
}

.storefront-hero-thumbs__btn {
    flex-shrink: 0;
    width: 3.25rem;
    height: 3.25rem;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 0.5rem;
    background: rgb(0 0 0 / 0.35);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

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

.storefront-hero-thumbs__btn:hover {
    transform: translateY(-1px);
}

.storefront-hero-thumbs__btn.is-active {
    border-color: #8b5cf6;
    box-shadow:
        0 0 0 1px rgb(139 92 246 / 0.45),
        0 0 18px rgb(124 58 237 / 0.55);
}

/* Güven şeridi — grid genişliği, slider altına hafif bindirme (mockup) */
.storefront-hero-trust-wrap {
    position: relative;
    z-index: 12;
    width: 100%;
    max-width: 1536px;
    margin-top: -0.35rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.5rem;
    flex-shrink: 0;
    pointer-events: none;
}

.storefront-hero-trust-wrap .storefront-hero-trust {
    pointer-events: auto;
}

@media (max-width: 767px) {
    .storefront-hero-nav {
        z-index: 30;
    }
}

@media (min-width: 768px) {
    .storefront-hero-trust-wrap {
        margin-top: -2.65rem;
        padding-top: 0;
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

.storefront-hero-trust {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    margin-top: 0;
    padding: 0.55rem;
    border: 1px solid rgb(255 255 255 / 0.65);
    border-radius: 1.125rem;
    background: linear-gradient(165deg, rgb(255 255 255 / 0.98) 0%, rgb(250 250 252 / 0.96) 100%);
    box-shadow:
        0 0 0 1px rgb(124 58 237 / 0.06),
        0 1px 2px rgb(15 23 42 / 0.04),
        0 16px 40px -12px rgb(79 70 229 / 0.18),
        0 28px 56px -24px rgb(15 23 42 / 0.14);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    flex-shrink: 0;
    overflow: hidden;
}

.storefront-hero-trust::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(
        120deg,
        rgb(255 255 255 / 0.55) 0%,
        transparent 42%,
        rgb(139 92 246 / 0.04) 100%
    );
}

@media (min-width: 768px) {
    .storefront-hero-trust {
        gap: 0.35rem;
        padding: 0.65rem;
        border-radius: 1.35rem;
    }
}

.dark .storefront-hero-trust {
    border-color: rgb(63 63 70 / 0.75);
    background: linear-gradient(165deg, rgb(24 24 27 / 0.96) 0%, rgb(15 15 18 / 0.94) 100%);
    box-shadow:
        0 0 0 1px rgb(167 139 250 / 0.1),
        0 16px 40px -12px rgb(0 0 0 / 0.45),
        0 28px 56px -24px rgb(0 0 0 / 0.35);
}

.dark .storefront-hero-trust::before {
    background: linear-gradient(
        120deg,
        rgb(255 255 255 / 0.06) 0%,
        transparent 45%,
        rgb(139 92 246 / 0.08) 100%
    );
}

@media (min-width: 1024px) {
    .storefront-hero-trust {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.4rem;
        padding: 0.7rem;
    }
}

.storefront-hero-trust__item {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
    padding: 0.85rem 0.9rem;
    border: 0;
    border-radius: 0.85rem;
    transition: background-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

.storefront-hero-trust__copy {
    flex: 1;
    min-width: 0;
}

@media (min-width: 640px) {
    .storefront-hero-trust__item {
        gap: 0.95rem;
        padding: 1rem 1.1rem;
    }
}

@media (min-width: 1024px) {
    .storefront-hero-trust__item {
        padding: 1.05rem 1.15rem;
    }

    .storefront-hero-trust__item:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 18%;
        right: -0.2rem;
        width: 1px;
        height: 64%;
        background: linear-gradient(
            180deg,
            transparent 0%,
            rgb(228 228 231 / 0.95) 18%,
            rgb(228 228 231 / 0.95) 82%,
            transparent 100%
        );
        pointer-events: none;
    }

    .dark .storefront-hero-trust__item:not(:last-child)::after {
        background: linear-gradient(
            180deg,
            transparent 0%,
            rgb(63 63 70 / 0.95) 18%,
            rgb(63 63 70 / 0.95) 82%,
            transparent 100%
        );
    }
}

@media (hover: hover) and (pointer: fine) {
    .storefront-hero-trust__item:hover {
        background: rgb(124 58 237 / 0.05);
        transform: translateY(-1px);
        box-shadow: 0 10px 24px -16px rgb(79 70 229 / 0.35);
    }

    .dark .storefront-hero-trust__item:hover {
        background: rgb(139 92 246 / 0.1);
    }
}

.storefront-hero-trust__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.8rem;
    color: #6d28d9;
    background: linear-gradient(145deg, #ede9fe 0%, #f5f3ff 55%, #ffffff 100%);
    border: 1px solid rgb(167 139 250 / 0.35);
    box-shadow:
        0 1px 2px rgb(124 58 237 / 0.08),
        inset 0 1px 0 rgb(255 255 255 / 0.85);
}

.storefront-hero-trust__icon .ui-icon svg {
    width: 1.2rem;
    height: 1.2rem;
}

.dark .storefront-hero-trust__icon {
    color: #c4b5fd;
    background: linear-gradient(145deg, rgb(76 29 149 / 0.45) 0%, rgb(39 39 42 / 0.9) 100%);
    border-color: rgb(139 92 246 / 0.35);
    box-shadow:
        0 1px 2px rgb(0 0 0 / 0.25),
        inset 0 1px 0 rgb(255 255 255 / 0.06);
}

.storefront-hero-trust__title {
    margin: 0;
    font-size: 0.71875rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #111827;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dark .storefront-hero-trust__title {
    color: #f4f4f5;
}

.storefront-hero-trust__sub {
    margin: 0.2rem 0 0;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
    color: #64748b;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.dark .storefront-hero-trust__sub {
    color: #a1a1aa;
}

/* Güven şeridi + story hub (max 4, karta bağlı) */
.storefront-hero-trust-stories {
    position: relative;
    z-index: 12;
    width: 100%;
    max-width: 1536px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1rem 1.35rem;
    pointer-events: none;
}

.storefront-hero-trust-stories .storefront-hero-trust-wrap,
.storefront-hero-trust-stories .storefront-hero-stories-hub {
    pointer-events: auto;
}

@media (min-width: 768px) {
    .storefront-hero-trust-stories {
        padding-left: 2rem;
        padding-right: 2rem;
        padding-bottom: 1.65rem;
    }

    .storefront-hero-trust-stories .storefront-hero-trust-wrap {
        padding-left: 0;
        padding-right: 0;
    }
}

.storefront-hero-stories-hub {
    margin-top: -0.65rem;
    padding-top: 0.15rem;
}

.storefront-hero-stories-hub__track {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    width: 100%;
}

.storefront-hero-stories-hub__slot {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

.storefront-hero-stories-hub__vine {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 3.5rem;
    margin-bottom: 0.45rem;
    pointer-events: none;
}

.storefront-hero-stories-hub__vine-line {
    flex: 1 1 auto;
    width: 2px;
    min-height: 1.35rem;
    border-radius: 9999px;
    background: linear-gradient(
        180deg,
        rgb(167 139 250 / 0.35) 0%,
        #7c3aed 35%,
        #a78bfa 55%,
        #7c3aed 75%,
        rgb(167 139 250 / 0.3) 100%
    );
    box-shadow: 0 0 16px rgb(124 58 237 / 0.42);
    animation: storefront-hero-vine-glow 2.4s ease-in-out infinite;
}

.storefront-hero-stories-hub__vine-dot {
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: #8b5cf6;
    box-shadow:
        0 0 0 3px rgb(139 92 246 / 0.18),
        0 0 14px rgb(124 58 237 / 0.55);
}

.storefront-hero-stories-hub__vine-dot--end {
    animation: storefront-hero-vine-dot-pulse 2s ease-in-out infinite;
}

@keyframes storefront-hero-vine-glow {
    0%,
    100% {
        opacity: 0.75;
    }
    50% {
        opacity: 1;
    }
}

@keyframes storefront-hero-vine-dot-pulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.85;
    }
    50% {
        transform: scale(1.25);
        opacity: 1;
    }
}

.home-round-tiles-connector--hub-h {
    display: flex;
    flex-direction: row;
    align-items: center;
    align-self: flex-start;
    flex-shrink: 0;
    width: auto;
    height: auto;
    margin-top: 4.85rem;
    padding: 0 0.2rem;
    gap: 0;
    pointer-events: none;
}

.home-round-tiles-connector--hub-h .home-round-tiles-connector__line {
    width: clamp(0.75rem, 2.5vw, 1.85rem);
    height: 2px;
    background: linear-gradient(90deg, rgb(167 139 250 / 0.2), #7c3aed 50%, rgb(167 139 250 / 0.2));
    animation: home-round-tiles-connector-shimmer 2.4s ease-in-out infinite;
}

.home-round-tiles-connector--hub-h .home-round-tiles-connector__dot {
    background: #8b5cf6;
    box-shadow: 0 0 0 3px rgb(139 92 246 / 0.15), 0 0 12px rgb(124 58 237 / 0.5);
}

.storefront-hero-story-tile {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    font: inherit;
    text-align: center;
    color: inherit;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.storefront-hero-story-tile__ring {
    position: relative;
    display: block;
    flex-shrink: 0;
    padding: 5px;
    border-radius: 9999px;
    background: linear-gradient(155deg, #ffffff 0%, #f4f4f5 45%, #d4d4d8 100%);
    box-shadow:
        0 1px 0 rgb(255 255 255 / 0.95) inset,
        0 4px 0 #d4d4d8,
        0 16px 36px -12px rgb(15 23 42 / 0.38),
        0 0 0 1px rgb(0 0 0 / 0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.dark .storefront-hero-story-tile__ring {
    background: linear-gradient(155deg, #3f3f46 0%, #27272a 50%, #18181b 100%);
    box-shadow:
        0 1px 0 rgb(255 255 255 / 0.08) inset,
        0 4px 0 #09090b,
        0 16px 36px -12px rgb(0 0 0 / 0.55),
        0 0 0 1px rgb(255 255 255 / 0.06);
}

.storefront-hero-story-tile:hover .storefront-hero-story-tile__ring,
.storefront-hero-story-tile:focus-visible .storefront-hero-story-tile__ring {
    transform: translateY(-3px) scale(1.04);
    box-shadow:
        0 1px 0 rgb(255 255 255 / 0.95) inset,
        0 6px 0 #d4d4d8,
        0 20px 44px -10px rgb(79 70 229 / 0.35),
        0 0 0 2px rgb(139 92 246 / 0.35);
}

.storefront-hero-story-tile__disc {
    position: relative;
    display: block;
    width: 4.75rem;
    height: 4.75rem;
    border-radius: 9999px;
    overflow: hidden;
    background: #18181b;
}

@media (min-width: 640px) {
    .storefront-hero-story-tile__disc {
        width: 5.5rem;
        height: 5.5rem;
    }

    .home-round-tiles-connector--hub-h {
        margin-top: 5.35rem;
    }

    .storefront-hero-stories-hub__vine {
        height: 3.85rem;
    }
}

@media (min-width: 1024px) {
    .storefront-hero-story-tile__disc {
        width: 6rem;
        height: 6rem;
    }

    .home-round-tiles-connector--hub-h {
        margin-top: 5.85rem;
    }
}

.storefront-hero-story-tile__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.storefront-hero-story-tile__badge {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(0 0 0 / 0.32);
    color: #fff;
    pointer-events: none;
}

.storefront-hero-story-tile__badge .ui-icon {
    width: 1.25rem;
    height: 1.25rem;
}

.storefront-hero-story-tile__name {
    margin-top: 0.45rem;
    max-width: 6.75rem;
    padding: 0 0.15rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.3;
    color: #374151;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
}

.dark .storefront-hero-story-tile__name {
    color: #e4e4e7;
}

/* Güven + story hub — mobil kompakt */
@media (max-width: 767px) {
    .storefront-hero-trust-stories {
        padding: 0 0.65rem 0.7rem;
    }

    .storefront-hero-trust-stories .storefront-hero-trust-wrap {
        padding-left: 0;
        padding-right: 0;
        padding-top: 0.2rem;
    }

    .storefront-hero-trust {
        gap: 0.3rem;
        padding: 0.38rem;
        border-radius: 0.875rem;
    }

    .storefront-hero-trust__item {
        gap: 0.4rem;
        padding: 0.45rem 0.38rem;
        border-radius: 0.5rem;
        align-items: flex-start;
    }

    .storefront-hero-trust__icon {
        width: 1.85rem;
        height: 1.85rem;
        border-radius: 0.5rem;
    }

    .storefront-hero-trust__icon .ui-icon svg {
        width: 0.95rem;
        height: 0.95rem;
    }

    .storefront-hero-trust__title {
        font-size: 0.5625rem;
        letter-spacing: 0.04em;
        line-height: 1.2;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: unset;
    }

    .storefront-hero-trust__sub {
        margin-top: 0.08rem;
        font-size: 0.5625rem;
        line-height: 1.2;
        -webkit-line-clamp: 2;
    }

    .storefront-hero-stories-hub {
        margin-top: -0.4rem;
        padding-top: 0;
    }

    .storefront-hero-stories-hub__vine {
        height: 1.35rem;
        margin-bottom: 0.15rem;
    }

    .storefront-hero-stories-hub__vine-line {
        min-height: 0.35rem;
        width: 1.5px;
    }

    .storefront-hero-stories-hub__vine-dot {
        width: 0.32rem;
        height: 0.32rem;
        box-shadow:
            0 0 0 2px rgb(139 92 246 / 0.15),
            0 0 8px rgb(124 58 237 / 0.45);
    }

    .home-round-tiles-connector--hub-h {
        margin-top: 2.95rem;
        padding: 0 0.04rem;
    }

    .home-round-tiles-connector--hub-h .home-round-tiles-connector__line {
        width: 0.28rem;
    }

    .home-round-tiles-connector--hub-h .home-round-tiles-connector__dot {
        width: 0.32rem;
        height: 0.32rem;
    }

    .storefront-hero-story-tile__ring {
        padding: 3px;
        box-shadow:
            0 1px 0 rgb(255 255 255 / 0.95) inset,
            0 2px 0 #d4d4d8,
            0 8px 20px -10px rgb(15 23 42 / 0.28),
            0 0 0 1px rgb(0 0 0 / 0.05);
    }

    .storefront-hero-story-tile__disc {
        width: 3.35rem;
        height: 3.35rem;
    }

    .storefront-hero-story-tile__badge .ui-icon {
        width: 1rem;
        height: 1rem;
    }

    .storefront-hero-story-tile__name {
        margin-top: 0.18rem;
        max-width: 4.1rem;
        font-size: 0.5625rem;
        line-height: 1.15;
        -webkit-line-clamp: 1;
    }

    .storefront-hero-controls {
        bottom: 2.4rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .storefront-hero-stories-hub__vine-line,
    .storefront-hero-stories-hub__vine-dot--end,
    .home-round-tiles-connector--hub-h .home-round-tiles-connector__line {
        animation: none;
    }
}

/* Kategori / koleksiyon: navbar altı boşluk */
.storefront-page-top {
    padding-top: 1.25rem;
}

@media (min-width: 768px) {
    .storefront-page-top {
        padding-top: 2rem;
    }
}

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #e5e7eb;
    border-radius: 10px;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background: #3f3f46;
}

/* Mobil alt tab bar — iOS floating dock (kompakt) */
:root {
    --storefront-mobile-nav-h: clamp(3.65rem, 11.5vw, 4.15rem);
    --storefront-mobile-nav-safe: env(safe-area-inset-bottom, 0px);
    --mobile-nav-cart-size: clamp(2.85rem, 8.8vw, 3.25rem);
    --mobile-nav-cart-lift: calc(var(--mobile-nav-cart-size) * -0.42);
}

@supports (padding-bottom: constant(safe-area-inset-bottom)) {
    :root {
        --storefront-mobile-nav-safe: constant(safe-area-inset-bottom);
    }
}

/* iOS: odaklanınca otomatik yakınlaştırmayı azaltır */
html.is-ios input,
html.is-ios select,
html.is-ios textarea {
    font-size: 16px !important;
}

@media (max-width: 767.98px) {
    html {
        height: -webkit-fill-available;
        touch-action: manipulation;
    }

    html.is-ios,
    html.is-ios body {
        touch-action: pan-x pan-y;
    }

    body.storefront-has-mobile-nav {
        min-height: 100dvh;
        min-height: -webkit-fill-available;
        padding-bottom: calc(var(--storefront-mobile-nav-h) + var(--storefront-mobile-nav-safe));
        overscroll-behavior-y: none;
    }

    .mobile-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 520;
        padding: 0 clamp(0.45rem, 2.2vw, 0.75rem) calc(0.38rem + var(--storefront-mobile-nav-safe));
        box-sizing: border-box;
        pointer-events: none;
        background: transparent;
        border: 0;
        box-shadow: none;
        -webkit-overflow-scrolling: touch;
        touch-action: manipulation;
        isolation: isolate;
    }

    .mobile-bottom-nav__dock {
        pointer-events: auto;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: end;
        min-height: clamp(2.75rem, 8.5vw, 3.15rem);
        padding: 0.22rem clamp(0.2rem, 1.2vw, 0.38rem) 0.28rem;
        border-radius: 9999px;
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid rgba(15, 23, 42, 0.07);
        box-shadow:
            0 8px 24px rgba(15, 23, 42, 0.1),
            0 2px 6px rgba(15, 23, 42, 0.05);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .dark .mobile-bottom-nav__dock {
        background: rgba(24, 24, 27, 0.96);
        border-color: rgba(255, 255, 255, 0.08);
        box-shadow:
            0 10px 32px rgba(0, 0, 0, 0.42),
            0 2px 8px rgba(0, 0, 0, 0.28);
    }

    .mobile-bottom-nav__item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        gap: 0.1rem;
        min-height: 2.35rem;
        min-width: 0;
        padding: 0.06rem 0.02rem 0;
        border: 0;
        background: transparent;
        color: rgb(107 114 128);
        text-decoration: none;
        cursor: pointer;
        transition: color 0.2s ease, transform 0.15s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-bottom-nav__item:active {
        transform: scale(0.96);
    }

    .dark .mobile-bottom-nav__item {
        color: rgb(161 161 170);
    }

    .mobile-bottom-nav__icon {
        width: clamp(1.05rem, 3.1vw, 1.2rem);
        height: clamp(1.05rem, 3.1vw, 1.2rem);
        stroke-width: 1.85;
        flex-shrink: 0;
    }

    .mobile-bottom-nav__label {
        display: block;
        max-width: 100%;
        font-size: clamp(0.46875rem, 2.15vw, 0.53125rem);
        font-weight: 700;
        line-height: 1.05;
        letter-spacing: 0.01em;
        text-transform: uppercase;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-bottom-nav__cart-slot {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        min-height: 2.35rem;
        min-width: 0;
    }

    .mobile-bottom-nav__cart {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
        width: var(--mobile-nav-cart-size);
        height: var(--mobile-nav-cart-size);
        margin-top: var(--mobile-nav-cart-lift);
        padding: 0;
        border: 2px solid rgba(255, 255, 255, 0.98);
        border-radius: 9999px;
        background: linear-gradient(145deg, rgb(109 40 217) 0%, rgb(124 58 237) 55%, rgb(139 92 246) 100%);
        color: #fff;
        box-shadow: 0 6px 18px rgba(109, 40, 217, 0.32);
        cursor: pointer;
        transition: transform 0.15s ease, box-shadow 0.2s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .dark .mobile-bottom-nav__cart {
        border-color: rgba(24, 24, 27, 0.98);
    }

    .mobile-bottom-nav__cart:active {
        transform: scale(0.96);
    }

    .mobile-bottom-nav__cart-icon {
        width: clamp(1rem, 3vw, 1.15rem);
        height: clamp(1rem, 3vw, 1.15rem);
        stroke-width: 2;
        color: #fff;
        flex-shrink: 0;
    }

    .mobile-bottom-nav__cart-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .mobile-bottom-nav__cart-badge {
        position: absolute;
        top: 0.05rem;
        right: 0.12rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 0.9375rem;
        height: 0.9375rem;
        padding: 0 0.15rem;
        border-radius: 9999px;
        background: #fff;
        color: rgb(109 40 217);
        font-size: 0.5625rem;
        font-weight: 800;
        line-height: 1;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
    }

    .mobile-bottom-nav__cart-badge.hidden {
        display: none !important;
    }

    @media (max-width: 359.98px) {
        :root {
            --mobile-nav-cart-size: 2.75rem;
        }

        .mobile-bottom-nav__label {
            letter-spacing: 0;
        }
    }

    /* iOS Chrome/Safari: alt tarayıcı çubuğu — JS --ios-vv-bottom ile hizalar */
    html.is-ios .mobile-bottom-nav {
        bottom: var(--ios-vv-bottom, 0px);
    }

    html.storefront-overlay-open .mobile-bottom-nav {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate3d(0, 100%, 0);
    }

    body.mobile-menu-open {
        touch-action: none;
    }

    .cart-empty-state svg.lucide.ui-icon {
        width: 2.5rem;
        height: 2.5rem;
    }
}

/* Mini sepet çekmecesi — tam ekran yüksekliği (zoom / dvh uyumu) */
.storefront-mini-cart-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(100vw, 28rem);
    max-width: 28rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1003;
}

.storefront-mini-cart-panel__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.storefront-mini-cart-panel [x-ref="cartScroll"] {
    flex: 1 1 auto;
    min-height: 0;
}

/* Mobil yan menü */
.mobile-menu-root {
    touch-action: none;
}

.mobile-menu-backdrop {
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 0.55);
    -webkit-tap-highlight-color: transparent;
}

.mobile-menu-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: min(88vw, 19.5rem);
    max-width: 19.5rem;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.45);
}

.dark .mobile-menu-panel {
    background: #09090b;
}

.mobile-menu-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-shrink: 0;
    padding: 0.85rem 1rem 0.65rem;
    border-bottom: 1px solid rgb(244 244 245);
}

.dark .mobile-menu-panel__head {
    border-bottom-color: rgb(39 39 42);
}

.mobile-menu-panel__title {
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgb(24 24 27);
}

.dark .mobile-menu-panel__title {
    color: rgb(250 250 250);
}

.mobile-menu-panel__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: rgb(244 244 245);
    color: rgb(113 113 122);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.mobile-menu-panel__close .ui-icon svg {
    width: 1rem;
    height: 1rem;
}

.dark .mobile-menu-panel__close {
    background: rgb(39 39 42);
    color: rgb(161 161 170);
}

.mobile-menu-panel__close:hover {
    color: rgb(220 38 38);
}

.mobile-menu-panel__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0.65rem 0.85rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
}

.mobile-menu-profile {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.55rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid rgb(228 228 231);
    border-radius: 0.75rem;
    background: rgb(250 250 250);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.dark .mobile-menu-profile {
    border-color: rgb(63 63 70);
    background: rgb(24 24 27);
}

.mobile-menu-profile__avatar {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 9999px;
    background: rgb(237 233 254);
    color: rgb(109 40 217);
}

.mobile-menu-profile__avatar .ui-icon svg {
    width: 1.1rem;
    height: 1.1rem;
}

.dark .mobile-menu-profile__avatar {
    background: rgb(46 16 101);
    color: rgb(167 139 250);
}

.mobile-menu-profile__text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.mobile-menu-profile__name {
    font-size: 0.875rem;
    font-weight: 800;
    line-height: 1.2;
    color: rgb(24 24 27);
}

.dark .mobile-menu-profile__name {
    color: rgb(250 250 250);
}

.mobile-menu-profile__link {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: rgb(109 40 217);
}

.mobile-menu-profile__chevron svg {
    width: 0.75rem;
    height: 0.75rem;
}

.mobile-menu-more[hidden] {
    display: none !important;
}

.mobile-menu-nav {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}

.mobile-menu-divider {
    height: 1px;
    margin: 0.35rem 0;
    background: rgb(228 228 231);
}

.dark .mobile-menu-divider {
    background: rgb(63 63 70);
}

.mobile-menu-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    min-width: 0;
    padding: 0.52rem 0.35rem;
    border: 0;
    border-radius: 0.55rem;
    background: transparent;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: rgb(39 39 42);
    text-decoration: none;
    text-align: left;
    transition: color 0.15s ease, background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.dark .mobile-menu-link {
    color: rgb(244 244 245);
}

.mobile-menu-link:hover,
.mobile-menu-link:focus-visible {
    background: rgb(244 244 245);
    color: rgb(79 70 229);
}

.dark .mobile-menu-link:hover,
.dark .mobile-menu-link:focus-visible {
    background: rgb(39 39 42);
}

.mobile-menu-link__icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    color: rgb(113 113 122);
}

.mobile-menu-link__icon .ui-icon svg {
    width: 1.1rem;
    height: 1.1rem;
}

.dark .mobile-menu-link__icon {
    color: rgb(161 161 170);
}

.mobile-menu-link:hover .mobile-menu-link__icon,
.mobile-menu-link:focus-visible .mobile-menu-link__icon {
    color: rgb(79 70 229);
}

.mobile-menu-link__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-menu-link__badge {
    flex: 0 0 auto;
    max-width: 5.25rem;
    padding: 0.12rem 0.38rem;
    border-radius: 9999px;
    font-size: 0.5625rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-menu-link__badge--new {
    background: rgb(237 233 254);
    color: rgb(109 40 217);
}

.mobile-menu-link__badge--hot {
    background: rgb(255 237 213);
    color: rgb(234 88 12);
}

.mobile-menu-link__badge--sale {
    background: rgb(254 226 226);
    color: rgb(220 38 38);
}

.mobile-menu-link__count {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.28rem;
    border-radius: 9999px;
    background: rgb(109 40 217);
    color: #fff;
    font-size: 0.625rem;
    font-weight: 800;
    line-height: 1;
}

.mobile-menu-link__count.hidden {
    display: none !important;
}

.mobile-menu-link__chevron {
    display: inline-flex;
    flex-shrink: 0;
    margin-left: auto;
    color: rgb(161 161 170);
    transition: transform 0.2s ease;
}

.mobile-menu-link__chevron .ui-icon svg {
    width: 0.85rem;
    height: 0.85rem;
}

.mobile-menu-link__chevron.is-open {
    transform: rotate(180deg);
}

.mobile-menu-link--toggle {
    color: rgb(79 70 229);
}

.mobile-menu-more-block {
    margin-bottom: 0.1rem;
}

.mobile-menu-more {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    margin: 0.05rem 0 0.15rem 1.85rem;
    padding: 0.15rem 0 0.25rem;
    border-left: 2px solid rgb(199 210 254);
}

.dark .mobile-menu-more {
    border-left-color: rgb(67 56 202);
}

.mobile-menu-more__link {
    display: block;
    padding: 0.38rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgb(63 63 70);
    text-decoration: none;
    transition: color 0.15s ease;
}

.dark .mobile-menu-more__link {
    color: rgb(212 212 216);
}

.mobile-menu-more__link:hover {
    color: rgb(79 70 229);
}

.mobile-menu-more__link--all {
    margin-top: 0.1rem;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgb(79 70 229);
}

.mobile-menu-account {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}

.mobile-menu-link--favorites:hover,
.mobile-menu-link--favorites:focus-visible {
    color: rgb(225 29 72);
}

.mobile-menu-link--favorites:hover .mobile-menu-link__icon,
.mobile-menu-link--favorites:focus-visible .mobile-menu-link__icon {
    color: rgb(225 29 72);
}

.mobile-menu-link--account {
    color: rgb(39 39 42);
}

.mobile-menu-link--account .mobile-menu-link__icon {
    color: rgb(99 102 241);
}

.mobile-menu-link--cart {
    cursor: pointer;
}

.mobile-menu-link--logout {
    color: rgb(220 38 38);
}

.mobile-menu-link--logout .mobile-menu-link__icon {
    color: rgb(239 68 68);
}

.mobile-menu-link--logout:hover,
.mobile-menu-link--logout:focus-visible {
    color: rgb(185 28 28);
    background: rgb(254 242 242);
}

.dark .mobile-menu-link--logout:hover,
.dark .mobile-menu-link--logout:focus-visible {
    background: rgb(69 10 10);
}

.mobile-menu-link--cta {
    justify-content: center;
    margin-top: 0.25rem;
    padding: 0.7rem 0.85rem;
    border-radius: 0.75rem;
    background: rgb(24 24 27);
    color: rgb(255 255 255);
}

.dark .mobile-menu-link--cta {
    background: rgb(250 250 250);
    color: rgb(24 24 27);
}

.mobile-menu-link--cta .mobile-menu-link__icon {
    color: inherit;
}

@media (max-width: 359.98px) {
    .mobile-menu-panel {
        width: min(92vw, 18rem);
    }

    .mobile-menu-link__badge {
        max-width: 4.25rem;
        font-size: 0.5rem;
        padding-inline: 0.3rem;
    }
}

/* Çerez bilgilendirme — sağ alt, minimalist */
.cookie-consent {
    position: fixed;
    z-index: 530;
    right: max(0.75rem, env(safe-area-inset-right, 0px));
    bottom: max(1rem, env(safe-area-inset-bottom, 0px));
    width: min(20rem, calc(100vw - 1.5rem));
    max-width: 20rem;
    padding: 0.85rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid rgb(228 228 231);
    background: rgb(255 255 255 / 0.97);
    color: rgb(63 63 70);
    box-shadow:
        0 4px 24px rgb(0 0 0 / 0.08),
        0 0 0 1px rgb(0 0 0 / 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: 0.6875rem;
    line-height: 1.45;
    opacity: 0;
    transform: translate3d(0, 0.5rem, 0);
    transition:
        opacity 0.28s ease,
        transform 0.28s ease;
    pointer-events: none;
}

.cookie-consent--visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
}

.dark .cookie-consent {
    border-color: rgb(63 63 70);
    background: rgb(24 24 27 / 0.97);
    color: rgb(212 212 216);
    box-shadow:
        0 4px 28px rgb(0 0 0 / 0.45),
        0 0 0 1px rgb(255 255 255 / 0.06);
}

.cookie-consent__text {
    margin: 0 0 0.65rem;
}

.cookie-consent__link {
    font-weight: 600;
    color: rgb(79 70 229);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cookie-consent__link:hover {
    color: rgb(67 56 202);
}

.dark .cookie-consent__link {
    color: rgb(129 140 248);
}

.dark .cookie-consent__link:hover {
    color: rgb(165 180 252);
}

.cookie-consent__btn {
    display: block;
    width: 100%;
    min-height: 2.25rem;
    padding: 0.4rem 0.75rem;
    border: none;
    border-radius: 0.5rem;
    background: rgb(79 70 229);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color 0.15s ease;
}

.cookie-consent__btn:hover {
    background: rgb(67 56 202);
}

.cookie-consent__btn:focus-visible {
    outline: 2px solid rgb(79 70 229);
    outline-offset: 2px;
}

@media (max-width: 767.98px) {
    .cookie-consent {
        bottom: calc(var(--storefront-mobile-nav-h) + var(--storefront-mobile-nav-safe) + var(--ios-vv-bottom, 0px) + 0.65rem);
        right: 0.65rem;
        left: auto;
        width: min(18.5rem, calc(100vw - 1.3rem));
    }
}

@media (min-width: 768px) {
    .cookie-consent {
        bottom: 1.25rem;
        right: 1.25rem;
    }
}

/* —— Arama overlay —— */
.storefront-search-overlay {
    --search-accent: #6366f1;
    --search-accent-soft: rgba(99, 102, 241, 0.12);
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    min-height: 0;
    max-width: 100vw;
    overflow-x: hidden;
    isolation: isolate;
    contain: layout style;
}

@media (max-width: 767.98px) {
    html.is-ios .storefront-search-overlay {
        contain: none;
        top: var(--ios-vv-top, 0px);
        height: var(--ios-vv-height, 100dvh);
        bottom: auto;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .storefront-search-overlay__panel {
        animation: storefront-search-panel-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
}

@keyframes storefront-search-panel-in {
    from {
        opacity: 0;
        transform: translate3d(0, -10px, 0) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .storefront-search-overlay__panel {
        animation: none;
    }
}

.storefront-search-overlay__inner {
    width: 100%;
    max-width: 48rem;
    margin-inline: auto;
    padding-inline: 1rem;
}

@media (min-width: 640px) {
    .storefront-search-overlay__inner {
        padding-inline: 1.5rem;
    }
}

.storefront-search-overlay__backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(15, 23, 42, 0.28);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transform: translateZ(0);
}

.dark .storefront-search-overlay__backdrop {
    background: rgba(0, 0, 0, 0.62);
}

.storefront-search-overlay__panel {
    position: relative;
    z-index: 1;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.96) 42%, rgba(248, 250, 252, 0.92) 100%);
    box-shadow: 0 24px 64px -32px rgba(15, 23, 42, 0.22);
}

.dark .storefront-search-overlay__panel {
    background: linear-gradient(180deg, rgba(9, 9, 11, 0.98) 0%, rgba(9, 9, 11, 0.94) 45%, rgba(9, 9, 11, 0.88) 100%);
    box-shadow: 0 24px 64px -32px rgba(0, 0, 0, 0.55);
}

@media (max-width: 767.98px) {
    .storefront-search-overlay__panel {
        width: 100%;
        max-height: none;
        flex: 1 1 auto;
        border-radius: 0;
        background: linear-gradient(180deg, #ffffff 0%, #f8fafc 42%, #f8fafc 100%);
    }

    .dark .storefront-search-overlay__panel {
        background: linear-gradient(180deg, #09090b 0%, #09090b 45%, #09090b 100%);
    }
}

.storefront-search-overlay__panel {
    max-width: 100%;
    overflow-x: hidden;
}

.storefront-search-overlay__card {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
    max-width: 100%;
    overflow-x: hidden;
}

.storefront-search-overlay__dock {
    position: relative;
    z-index: 4;
    flex-shrink: 0;
    background: #fff;
    border-bottom: 1px solid #f1f5f9;
    box-shadow: 0 10px 18px -14px rgba(15, 23, 42, 0.35);
}

.dark .storefront-search-overlay__dock {
    background: #09090b;
    border-bottom-color: #27272a;
    box-shadow: 0 10px 18px -14px rgba(0, 0, 0, 0.55);
}

.storefront-search-overlay__dock .storefront-search-section {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
}

.storefront-search-overlay__dock .storefront-search-section:first-child {
    margin-top: 0;
    padding-top: 0.35rem;
    border-top: none;
}

.storefront-search-mobile-products--dock {
    padding-bottom: 0.35rem;
}

.storefront-search-mobile-products--dock .storefront-search-mobile-products__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.storefront-search-mobile-products--dock .storefront-search-mobile-products__track {
    flex-wrap: nowrap;
    width: max-content;
    max-width: none;
}

.storefront-search-overlay__head {
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    padding-top: 0.75rem;
    padding-bottom: 0.65rem;
}

@media (min-width: 640px) {
    .storefront-search-overlay__head {
        padding-top: 1rem;
        padding-bottom: 0.75rem;
    }
}

.dark .storefront-search-overlay__head {
    border-bottom-color: rgba(63, 63, 70, 0.65);
}

.storefront-search-bar {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.storefront-search-bar__close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.12);
    color: #64748b;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.storefront-search-bar__close:hover {
    background: rgba(148, 163, 184, 0.22);
    color: #334155;
    transform: scale(1.04);
}

.dark .storefront-search-bar__close {
    background: rgba(63, 63, 70, 0.55);
    color: #a1a1aa;
}

.dark .storefront-search-bar__close:hover {
    background: rgba(82, 82, 91, 0.75);
    color: #fafafa;
}

.storefront-search-bar__form {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.375rem 0.375rem 0.375rem 0.875rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, 0.28);
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 8px 28px -12px rgba(99, 102, 241, 0.28);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.storefront-search-bar__form:focus-within {
    border-color: rgba(99, 102, 241, 0.45);
    box-shadow:
        0 0 0 4px var(--search-accent-soft),
        0 12px 32px -14px rgba(99, 102, 241, 0.45);
}

.dark .storefront-search-bar__form {
    background: rgba(24, 24, 27, 0.92);
    border-color: rgba(63, 63, 70, 0.85);
    box-shadow: 0 8px 28px -12px rgba(0, 0, 0, 0.45);
}

.dark .storefront-search-bar__form:focus-within {
    border-color: rgba(129, 140, 248, 0.55);
    box-shadow:
        0 0 0 4px rgba(99, 102, 241, 0.18),
        0 12px 32px -14px rgba(0, 0, 0, 0.55);
}

.storefront-search-bar__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: var(--search-accent-soft);
    color: var(--search-accent);
}

.storefront-search-bar__spinner,
.storefront-search-spinner,
.storefront-search-bar__submit-spin {
    display: inline-block;
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    border: 2px solid rgba(99, 102, 241, 0.22);
    border-top-color: var(--search-accent);
    border-radius: 50%;
    animation: storefront-search-spin 0.65s linear infinite;
    transform: translateZ(0);
}

.storefront-search-bar__spinner {
    width: 1.25rem;
    height: 1.25rem;
}

.storefront-search-spinner--lg {
    width: 2rem;
    height: 2rem;
    border-width: 2.5px;
}

.storefront-search-bar__submit-spin {
    width: 1rem;
    height: 1rem;
    border-color: rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
}

@keyframes storefront-search-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .storefront-search-bar__spinner,
    .storefront-search-spinner,
    .storefront-search-bar__submit-spin {
        animation: none;
        border-top-color: var(--search-accent);
    }

    .storefront-search-bar__submit-spin {
        border-top-color: #fff;
    }
}

.storefront-search-bar__input::-webkit-search-cancel-button,
.storefront-search-bar__input::-webkit-search-decoration {
    display: none;
    -webkit-appearance: none;
}

.storefront-search-bar__input {
    flex: 1;
    min-width: 0;
    width: 0;
    border: none;
    background: transparent;
    padding: 0.5rem 0;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: #0f172a;
    outline: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.storefront-search-bar__input::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

.dark .storefront-search-bar__input {
    color: #f8fafc;
}

.dark .storefront-search-bar__input::placeholder {
    color: #71717a;
}

.storefront-search-bar__submit {
    flex-shrink: 0;
    border: none;
    border-radius: 999px;
    padding: 0.625rem 1.125rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
    background: linear-gradient(135deg, #6366f1 0%, #7c3aed 100%);
    box-shadow: 0 6px 18px -8px rgba(99, 102, 241, 0.85);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.storefront-search-bar__submit:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -10px rgba(99, 102, 241, 0.9);
}

.storefront-search-bar__submit:active {
    transform: translateY(0);
}

.storefront-search-bar__submit:disabled {
    cursor: wait;
    opacity: 0.92;
    transform: none;
    filter: none;
}

.storefront-search-bar__submit:disabled:hover {
    transform: none;
    filter: none;
    box-shadow: 0 6px 18px -8px rgba(99, 102, 241, 0.85);
}

.storefront-search-bar__hint {
    margin: 0.75rem 0 0 3.125rem;
    font-size: 0.75rem;
    line-height: 1.45;
    color: #94a3b8;
}

.storefront-search-bar__esc {
    display: none;
}

.dark .storefront-search-bar__hint {
    color: #71717a;
}

@media (max-width: 479.98px) {
    .storefront-search-bar__hint {
        margin-left: 0;
        text-align: center;
    }

    .storefront-search-bar__submit {
        padding: 0.625rem 0.875rem;
        font-size: 0.75rem;
    }
}

.storefront-search-mobile-recent {
    margin-top: 0.5rem;
}

.storefront-search-mobile-recent__title {
    margin: 0 0 0.5rem;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #71717a;
}

.storefront-search-mobile-recent__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.storefront-search-mobile-recent__btn {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0.55rem 0.75rem;
    border: 1px solid #e4e4e7;
    border-radius: 0.5rem;
    background: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    color: #3f3f46;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.dark .storefront-search-mobile-recent__btn {
    border-color: #3f3f46;
    background: #27272a;
    color: #e4e4e7;
}

.storefront-search-overlay__corrected {
    margin: 0.5rem 0 0.75rem;
    font-size: 0.8125rem;
    color: #64748b;
}

.storefront-search-overlay__corrected strong {
    color: #4f46e5;
    font-weight: 700;
}

/* Mobil arama — mockup uyumlu */
.storefront-search-bar--mockup .storefront-search-bar__submit {
    display: none;
}

.storefront-search-bar__cancel {
    flex-shrink: 0;
    border: none;
    background: transparent;
    padding: 0.35rem 0.15rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #4f46e5;
    cursor: pointer;
    white-space: nowrap;
}

.dark .storefront-search-bar__cancel {
    color: #a5b4fc;
}

.storefront-search-section {
    margin-top: 0.65rem;
    padding-top: 0.65rem;
    border-top: 1px solid #f1f5f9;
}

.storefront-search-section:first-child,
.storefront-search-overlay__body > .storefront-search-overlay__inner > .storefront-search-section:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.storefront-search-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
}

.storefront-search-section__title {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

.dark .storefront-search-section__title {
    color: #a1a1aa;
}

.storefront-search-section__action,
.storefront-search-section__link {
    border: none;
    background: transparent;
    padding: 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: #4f46e5;
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
}

.storefront-search-recent-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.storefront-search-recent-chips__item {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    background: #fff;
    overflow: hidden;
}

.dark .storefront-search-recent-chips__item {
    border-color: #3f3f46;
    background: #27272a;
}

.storefront-search-recent-chips__btn {
    border: none;
    background: transparent;
    padding: 0.4rem 0.35rem 0.4rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dark .storefront-search-recent-chips__btn {
    color: #e4e4e7;
}

.storefront-search-recent-chips__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    border: none;
    border-left: 1px solid #e2e8f0;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
}

.dark .storefront-search-recent-chips__remove {
    border-left-color: #3f3f46;
    color: #71717a;
}

.storefront-search-mobile-rows {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.storefront-search-mobile-rows__item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.5rem 0.35rem;
    border-radius: 0.5rem;
    text-decoration: none;
    color: inherit;
}

.storefront-search-mobile-rows__item:active {
    background: #f8fafc;
}

.dark .storefront-search-mobile-rows__item:active {
    background: #27272a;
}

.storefront-search-mobile-rows__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    overflow: hidden;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

.storefront-search-mobile-rows__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.storefront-search-mobile-rows__icon--cat {
    border-radius: 0.5rem;
}

.storefront-search-mobile-rows__body {
    flex: 1;
    min-width: 0;
}

.storefront-search-mobile-rows__name {
    display: block;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.25;
}

.dark .storefront-search-mobile-rows__name {
    color: #fafafa;
}

.storefront-search-mobile-rows__count {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.75rem;
    color: #64748b;
}

.storefront-search-mobile-rows__arrow {
    flex-shrink: 0;
    color: #cbd5e1;
}

.storefront-search-mobile-products__prices {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
}

.storefront-search-mobile-products__old {
    font-size: 0.625rem;
    font-weight: 500;
    color: #94a3b8;
    text-decoration: line-through;
}

/* Mobil arama — kompakt bloklar */
.storefront-search-bar--compact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
}

.storefront-search-bar--compact .storefront-search-bar__form {
    min-width: 0;
}

.storefront-search-bar__clear {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    margin-right: 0.15rem;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
}

.storefront-search-bar__close--end {
    flex-shrink: 0;
}

@media (max-width: 767.98px) {
    .storefront-search-overlay__head .storefront-search-bar--compact {
        position: static;
        padding-right: 0;
    }

    .storefront-search-bar--compact .storefront-search-bar__close--end {
        width: 2.5rem;
        height: 2.5rem;
    }

    .storefront-search-bar__hint {
        margin: 0.35rem 0 0;
        font-size: 0.6875rem;
        text-align: center;
    }

    .storefront-search-overlay__inner {
        padding-inline: 0.75rem;
    }

}

.storefront-search-popular__chips--row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.35rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.1rem 0 0.25rem;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.storefront-search-popular__chips--row::-webkit-scrollbar {
    display: none;
    height: 0;
}

.storefront-search-popular__chips--row .storefront-search-popular__chip {
    flex: 0 0 auto;
    margin: 0;
    max-width: none;
    white-space: nowrap;
}

.storefront-search-popular--empty {
    margin-top: 0.75rem;
    text-align: left;
}

.storefront-search-popular--empty .storefront-search-popular__label {
    display: block;
    margin-bottom: 0.4rem;
}

.storefront-search-mobile-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.storefront-search-mobile-list--loading {
    opacity: 0.55;
    pointer-events: none;
}

.storefront-search-mobile-list__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.55rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.65rem;
    background: #fff;
    text-decoration: none;
    color: inherit;
}

.dark .storefront-search-mobile-list__item {
    border-color: #3f3f46;
    background: #18181b;
}

.storefront-search-mobile-list__thumb {
    position: relative;
    flex-shrink: 0;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 0.5rem;
    overflow: hidden;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
}

.storefront-search-mobile-list__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.storefront-search-mobile-list__badge {
    position: absolute;
    left: 0.15rem;
    top: 0.15rem;
    padding: 0.1rem 0.28rem;
    border-radius: 0.2rem;
    background: #6366f1;
    color: #fff;
    font-size: 0.5625rem;
    font-weight: 800;
    line-height: 1.1;
}

.storefront-search-mobile-list__body {
    flex: 1;
    min-width: 0;
}

.storefront-search-mobile-list__title {
    display: block;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.3;
    color: #0f172a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dark .storefront-search-mobile-list__title {
    color: #f4f4f5;
}

.storefront-search-mobile-list__subtitle {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.6875rem;
    color: #64748b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.storefront-search-mobile-list__prices {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.25rem 0.4rem;
    margin-top: 0.2rem;
}

.storefront-search-mobile-list__price {
    font-size: 0.8125rem;
    font-weight: 800;
    color: #4f46e5;
}

.storefront-search-mobile-list__old {
    font-size: 0.6875rem;
    color: #94a3b8;
    text-decoration: line-through;
}

.storefront-search-mobile-list__arrow {
    flex-shrink: 0;
    color: #cbd5e1;
}

.storefront-search-mobile-block {
    margin-top: 0.55rem;
    padding-top: 0.55rem;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.storefront-search-mobile-block:first-child,
.storefront-search-overlay__body > .storefront-search-overlay__inner > :first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.storefront-search-mobile-block__title {
    margin: 0 0 0.5rem;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #64748b;
}

.dark .storefront-search-mobile-block__title {
    color: #a1a1aa;
}

.storefront-search-popular__label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #64748b;
}

.storefront-search-popular__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.storefront-search-popular__chip {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.8rem;
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    background: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}

.storefront-search-popular__chip:hover {
    border-color: #c7d2fe;
    color: #4f46e5;
    background: #eef2ff;
}

.dark .storefront-search-popular__chip {
    border-color: #3f3f46;
    background: #27272a;
    color: #e4e4e7;
}

.storefront-search-mobile-dym {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    margin-top: 0.75rem;
    padding: 0.55rem 0.65rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    color: #52525b;
    background: #fef9c3;
    border: 1px solid #fde047;
}

.storefront-search-mobile-dym button {
    border: 0;
    border-radius: 0.35rem;
    padding: 0.15rem 0.45rem;
    font-weight: 700;
    color: #4338ca;
    background: #fff;
    cursor: pointer;
}

.storefront-search-mobile-quick {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.75rem;
}

.storefront-search-mobile-quick__link {
    display: inline-flex;
    padding: 0.35rem 0.65rem;
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
    text-decoration: none;
    background: #fff;
}

.storefront-search-mobile-cats {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.storefront-search-mobile-cats__title {
    margin: 0 0 0.5rem;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #64748b;
}

.storefront-search-mobile-cats__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.storefront-search-mobile-cats__item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.45rem 0.5rem;
    border-radius: 0.5rem;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border: 1px solid #e2e8f0;
}

.storefront-search-mobile-cats__item img {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    object-fit: contain;
    background: #f8fafc;
}

.storefront-search-mobile-cats__name {
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    color: #0f172a;
}

.storefront-search-mobile-cats__count {
    display: block;
    font-size: 0.75rem;
    color: #64748b;
}

.storefront-search-empty-state {
    margin-top: 0.65rem;
    padding: 1rem 0.75rem;
    text-align: center;
    border-radius: 0.75rem;
    border: 1px dashed #e2e8f0;
    background: #f8fafc;
}

.dark .storefront-search-empty-state {
    border-color: #3f3f46;
    background: #18181b;
}

.storefront-search-empty-state__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin: 0 auto 0.75rem;
    border-radius: 9999px;
    color: #6366f1;
    background: rgb(99 102 241 / 0.12);
}

.storefront-search-empty-state__title {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    font-weight: 800;
    color: #0f172a;
}

.storefront-search-empty-state__desc {
    margin: 0 0 0.35rem;
    font-size: 0.8125rem;
    color: #64748b;
}

.storefront-search-empty-state__hint {
    margin: 0 0 1rem;
    font-size: 0.75rem;
    color: #94a3b8;
}

.storefront-search-empty-state__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.storefront-search-empty-state__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    padding: 0.45rem 1rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #334155;
}

.storefront-search-empty-state__btn--primary {
    border-color: transparent;
    background: #4f46e5;
    color: #fff;
}

.storefront-search-mobile-products__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.storefront-search-mobile-products__nav {
    display: inline-flex;
    gap: 0.25rem;
}

.storefront-search-mobile-products__nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    background: #fff;
    color: #475569;
    cursor: pointer;
}

.storefront-search-mobile-products__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    margin: 0 -0.25rem;
    padding: 0 0.25rem 0.35rem;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.storefront-search-mobile-products__track {
    display: flex;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.storefront-search-mobile-products__track--loading {
    opacity: 0.55;
    pointer-events: none;
}

.storefront-search-mobile-products__card {
    flex: 0 0 5.25rem;
    width: 5.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    text-decoration: none;
    color: inherit;
    scroll-snap-align: start;
}

.storefront-search-mobile-products__img {
    position: relative;
    display: block;
    width: 5.25rem;
    height: 5.25rem;
    border-radius: 0.5rem;
    overflow: hidden;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
}

.storefront-search-mobile-products__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.storefront-search-mobile-products__badge {
    position: absolute;
    left: 0.2rem;
    top: 0.2rem;
    padding: 0.1rem 0.3rem;
    border-radius: 0.25rem;
    background: #6366f1;
    color: #fff;
    font-size: 0.5625rem;
    font-weight: 800;
}

.storefront-search-mobile-products__title {
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1.25;
    color: #334155;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-break: break-word;
}

.storefront-search-mobile-products--dock .storefront-search-mobile-products__title {
    -webkit-line-clamp: 2;
    min-height: 2.4em;
}

.storefront-search-mobile-products__price {
    font-size: 0.6875rem;
    font-weight: 800;
    color: #4f46e5;
}

.storefront-search-mobile-footer {
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.storefront-search-mobile-footer__link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    padding: 0.65rem 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #475569;
    text-decoration: none;
    background: #f1f5f9;
    border-radius: 0.5rem;
}

.storefront-search-mobile-footer__link:hover {
    color: #4f46e5;
}

.storefront-search-overlay__foot {
    flex-shrink: 0;
    border-top: 1px solid rgba(148, 163, 184, 0.22);
    background: #fff;
    padding: 0.5rem 1rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
}

.dark .storefront-search-overlay__foot {
    border-top-color: rgba(63, 63, 70, 0.65);
    background: #09090b;
}

.storefront-search-overlay__foot-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    padding: 0.7rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 700;
    color: #4338ca;
    text-decoration: none;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 0.65rem;
}

.storefront-search-overlay__foot-link:hover {
    background: rgba(99, 102, 241, 0.14);
}

.dark .storefront-search-overlay__foot-link {
    color: #a5b4fc;
    background: rgba(99, 102, 241, 0.16);
}

.storefront-search-overlay__body {
    scrollbar-width: thin;
    padding-bottom: 0.75rem;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

html.storefront-overlay-open {
    overflow-x: hidden;
    max-width: 100%;
}

.storefront-search-overlay__body--loading {
    scroll-behavior: auto;
}

.storefront-search-results--loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.storefront-search-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 3rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748b;
}

.storefront-search-state--muted {
    text-align: center;
    padding: 2.5rem 1rem;
}

.dark .storefront-search-state {
    color: #a1a1aa;
}

.storefront-search-results {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
}

.storefront-search-result {
    display: flex;
    gap: 0.875rem;
    padding: 0.625rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(226, 232, 240, 0.9);
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
    content-visibility: auto;
    contain-intrinsic-size: auto 4.5rem;
}

.storefront-search-result:hover {
    background: #fff;
    border-color: rgba(99, 102, 241, 0.28);
    box-shadow: 0 4px 16px -12px rgba(99, 102, 241, 0.35);
}

.dark .storefront-search-result {
    background: rgba(24, 24, 27, 0.55);
    border-color: rgba(63, 63, 70, 0.75);
}

.dark .storefront-search-result:hover {
    background: rgba(39, 39, 42, 0.85);
    border-color: rgba(129, 140, 248, 0.35);
}

.storefront-search-result__thumb {
    position: relative;
    flex-shrink: 0;
    width: 4.25rem;
    height: 4.25rem;
    overflow: hidden;
    border-radius: 0.75rem;
    background: #f1f5f9;
}

.dark .storefront-search-result__thumb {
    background: #27272a;
}

.storefront-search-result__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.storefront-search-result__badge {
    position: absolute;
    left: 0.25rem;
    top: 0.25rem;
    padding: 0.125rem 0.375rem;
    border-radius: 0.375rem;
    background: #6366f1;
    color: #fff;
    font-size: 0.625rem;
    font-weight: 800;
}

.storefront-search-result__body {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.2rem;
}

.storefront-search-result__title {
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
    color: #0f172a;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dark .storefront-search-result__title {
    color: #fafafa;
}

.storefront-search-result__subtitle {
    font-size: 0.75rem;
    line-height: 1.35;
    color: #64748b;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dark .storefront-search-result__subtitle {
    color: #a1a1aa;
}

.storefront-search-result__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.375rem 0.5rem;
    margin-top: 0.125rem;
}

.storefront-search-result__price {
    font-size: 0.8125rem;
    font-weight: 800;
    color: #6366f1;
    font-variant-numeric: tabular-nums;
}

.dark .storefront-search-result__price {
    color: #a5b4fc;
}

.storefront-search-result__old {
    font-size: 0.6875rem;
    color: #94a3b8;
    text-decoration: line-through;
    font-variant-numeric: tabular-nums;
}

.storefront-search-result__oos {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #ef4444;
}

.storefront-search-more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(255, 255, 255, 0.8);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #334155;
    text-decoration: none;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.storefront-search-more:hover {
    background: #fff;
    border-color: rgba(99, 102, 241, 0.35);
    color: #4f46e5;
}

.dark .storefront-search-more {
    background: rgba(39, 39, 42, 0.65);
    border-color: rgba(82, 82, 91, 0.75);
    color: #e4e4e7;
}

.dark .storefront-search-more:hover {
    background: rgba(39, 39, 42, 0.95);
    border-color: rgba(129, 140, 248, 0.4);
    color: #c7d2fe;
}

.storefront-search-overlay--loading .storefront-search-overlay__backdrop {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Masaüstü — en üst ortada yüzen kart */
@media (min-width: 768px) {
    .storefront-search-overlay {
        align-items: center;
        justify-content: flex-start;
        padding: max(0.625rem, env(safe-area-inset-top, 0px)) 1.5rem 2rem;
    }

    .storefront-search-overlay__backdrop {
        background: rgba(15, 23, 42, 0.42);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    .dark .storefront-search-overlay__backdrop {
        background: rgba(0, 0, 0, 0.72);
    }

    .storefront-search-overlay__panel {
        position: relative;
        z-index: 1;
        flex: 0 1 auto !important;
        width: min(100%, 44rem);
        max-height: min(40rem, calc(100dvh - 1.5rem));
        margin-inline: auto;
        border-radius: 1.25rem;
        border: 1px solid rgba(148, 163, 184, 0.22);
        overflow: hidden;
        transform-origin: center top;
        box-shadow:
            0 24px 64px -24px rgba(15, 23, 42, 0.35),
            0 0 0 1px rgba(255, 255, 255, 0.65) inset;
    }

    .dark .storefront-search-overlay__panel {
        border-color: rgba(63, 63, 70, 0.75);
        box-shadow:
            0 28px 72px -24px rgba(0, 0, 0, 0.65),
            0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    }

    .storefront-search-overlay__inner {
        max-width: none;
    }

    .storefront-search-overlay__head {
        position: relative;
        padding-top: 1rem;
        padding-bottom: 0.75rem;
    }

    .storefront-search-bar {
        position: relative;
        padding-right: 2.75rem;
    }

    .storefront-search-bar__close {
        position: absolute;
        top: 0;
        right: 0;
        width: 2.25rem;
        height: 2.25rem;
    }

    .storefront-search-bar__form {
        padding: 0.4375rem 0.4375rem 0.4375rem 1rem;
    }

    .storefront-search-bar__input {
        font-size: 1.0625rem;
        padding: 0.625rem 0;
    }

    .storefront-search-bar__submit {
        padding: 0.6875rem 1.375rem;
        font-size: 0.875rem;
    }

    .storefront-search-bar__hint {
        margin-left: 0;
        text-align: center;
    }

    .storefront-search-bar__esc {
        display: inline;
        opacity: 0.85;
    }

    .storefront-search-overlay__body {
        padding-bottom: 1.25rem;
    }

    .storefront-search-state {
        padding: 2rem 1rem;
    }

    .storefront-search-state--muted {
        padding: 1.75rem 1rem;
    }

    .storefront-search-results {
        gap: 0.375rem;
        margin-top: 0.25rem;
    }

    .storefront-search-result {
        padding: 0.5rem 0.625rem;
        border-radius: 0.875rem;
    }

    .storefront-search-result__thumb {
        width: 3.75rem;
        height: 3.75rem;
    }
}

@media (min-width: 1024px) {
    .storefront-search-overlay__panel {
        width: min(100%, 48rem);
        max-height: min(42rem, calc(100dvh - 1.75rem));
    }

    .storefront-search-results {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .storefront-search-result {
        height: 100%;
    }
}

/* -- 404 page (storefront, static, centered) -- */
.storefront-not-found {
    padding-bottom: clamp(2.5rem, 6vw, 4rem);
    background:
        linear-gradient(180deg, rgb(250 250 250 / 1) 0%, rgb(255 255 255 / 1) 42%, rgb(255 255 255 / 1) 100%);
}

.dark .storefront-not-found {
    background:
        linear-gradient(180deg, #09090b 0%, #18181b 38%, #18181b 100%);
}

.storefront-not-found__panel {
    padding: clamp(2rem, 6vw, 3.5rem) 0 clamp(1.5rem, 4vw, 2.5rem);
}

.storefront-not-found__panel-inner,
.storefront-not-found__picks-inner {
    width: 100%;
    max-width: 40rem;
    margin-inline: auto;
    padding-inline: clamp(1rem, 3vw, 1.5rem);
    text-align: center;
}

.storefront-not-found__picks-inner {
    max-width: 96rem;
    text-align: left;
}

.storefront-not-found__panel-inner {
    padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.25rem, 3vw, 2rem);
    border: 1px solid rgb(228 228 231 / 0.95);
    border-radius: 1.25rem;
    background: rgb(255 255 255 / 0.92);
    box-shadow:
        0 1px 2px rgb(15 23 42 / 0.04),
        0 24px 48px rgb(15 23 42 / 0.06);
}

.dark .storefront-not-found__panel-inner {
    border-color: #3f3f46;
    background: rgb(24 24 27 / 0.72);
    box-shadow: 0 24px 48px rgb(0 0 0 / 0.28);
}

.storefront-not-found__eyebrow {
    margin: 0 0 0.65rem;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #6366f1;
}

.storefront-not-found__headline {
    margin: 0 0 0.75rem;
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -0.04em;
    color: #18181b;
}

.dark .storefront-not-found__headline {
    color: #fafafa;
}

.storefront-not-found__headline-accent {
    display: inline;
    background: linear-gradient(120deg, #4f46e5 0%, #6366f1 55%, #818cf8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .storefront-not-found__headline-accent {
        color: #4f46e5;
        background: none;
    }
}

.storefront-not-found__lead {
    margin: 0 auto 1.35rem;
    max-width: 28rem;
    font-size: clamp(0.875rem, 2.1vw, 1rem);
    line-height: 1.65;
    color: #52525b;
}

.dark .storefront-not-found__lead {
    color: #a1a1aa;
}

.storefront-not-found__actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1.1rem;
}

@media (min-width: 420px) {
    .storefront-not-found__actions {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }
}

.storefront-not-found__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.75rem;
    padding: 0.65rem 1.25rem;
    border-radius: 0.65rem;
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

@media (min-width: 420px) {
    .storefront-not-found__btn {
        min-width: 10.5rem;
    }
}

.storefront-not-found__btn:focus-visible {
    outline: 2px solid #4f46e5;
    outline-offset: 3px;
}

.storefront-not-found__btn--primary {
    background: #18181b;
    color: #fff;
    box-shadow: 0 10px 24px rgb(24 24 27 / 0.18);
}

.storefront-not-found__btn--primary:hover {
    background: #27272a;
    box-shadow: 0 12px 28px rgb(24 24 27 / 0.22);
}

.dark .storefront-not-found__btn--primary {
    background: #fafafa;
    color: #18181b;
}

.dark .storefront-not-found__btn--primary:hover {
    background: #e4e4e7;
}

.storefront-not-found__btn--secondary {
    border: 1.5px solid #d4d4d8;
    background: #fff;
    color: #18181b;
}

.storefront-not-found__btn--secondary:hover {
    border-color: #a1a1aa;
}

.dark .storefront-not-found__btn--secondary {
    border-color: #52525b;
    background: transparent;
    color: #fafafa;
}

.storefront-not-found__quick {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.storefront-not-found__quick-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.7rem;
    border-radius: 9999px;
    border: 1px solid #e4e4e7;
    background: #fafafa;
    font-size: 0.75rem;
    font-weight: 700;
    color: #3f3f46;
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.storefront-not-found__quick-chip:hover {
    color: #4f46e5;
    border-color: #c7d2fe;
    background: #fff;
}

.dark .storefront-not-found__quick-chip {
    border-color: #3f3f46;
    background: rgb(39 39 42 / 0.5);
    color: #e4e4e7;
}

.storefront-not-found__quick-icon {
    width: 0.85rem;
    height: 0.85rem;
    color: #f97316;
    flex-shrink: 0;
}

.storefront-not-found__quick-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.65rem;
    height: 1rem;
    padding: 0 0.3rem;
    border-radius: 9999px;
    background: #4f46e5;
    color: #fff;
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1;
}

.storefront-not-found__picks {
    margin-top: clamp(1.5rem, 4vw, 2.5rem);
    padding-top: clamp(1.25rem, 3vw, 2rem);
    border-top: 1px solid rgb(228 228 231 / 0.9);
}

.dark .storefront-not-found__picks {
    border-top-color: #3f3f46;
}

.storefront-not-found__picks-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.storefront-not-found__picks-title {
    margin: 0;
    font-size: clamp(1.0625rem, 2.4vw, 1.3rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    color: #18181b;
}

.dark .storefront-not-found__picks-title {
    color: #fafafa;
}

.storefront-not-found__picks-all {
    font-size: 0.8125rem;
    font-weight: 800;
    color: #4f46e5;
    text-decoration: none;
    white-space: nowrap;
}

.storefront-not-found__picks-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

@media (min-width: 640px) {
    .storefront-not-found__picks-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
    }
}

@media (min-width: 1024px) {
    .storefront-not-found__picks-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.storefront-not-found__pick-card {
    border: 1px solid #e4e4e7;
    border-radius: 0.75rem;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.04);
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.storefront-not-found__pick-card:hover {
    border-color: rgb(161 161 170 / 0.9);
    box-shadow: 0 8px 20px rgb(15 23 42 / 0.08);
}

.dark .storefront-not-found__pick-card {
    border-color: #3f3f46;
    background: rgb(24 24 27 / 0.55);
}

.storefront-not-found__pick-media {
    display: block;
    aspect-ratio: 1 / 1;
    background: #f4f4f5;
    overflow: hidden;
}

.storefront-not-found__pick-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.storefront-not-found__pick-body {
    padding: 0.6rem 0.7rem 0.75rem;
}

.storefront-not-found__pick-brand {
    margin: 0 0 0.15rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6366f1;
}

.storefront-not-found__pick-name {
    margin: 0 0 0.2rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.3;
}

.storefront-not-found__pick-name a {
    color: inherit;
    text-decoration: none;
}

.storefront-not-found__pick-name a:hover {
    color: #4f46e5;
}

.storefront-not-found__pick-price {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #18181b;
}

.dark .storefront-not-found__pick-price {
    color: #fafafa;
}

.storefront-not-found__support {
    max-width: 96rem;
    margin: 2rem auto 0;
    padding: 0 clamp(1rem, 3vw, 3rem);
    text-align: center;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: #71717a;
}

.dark .storefront-not-found__support {
    color: #a1a1aa;
}

.storefront-not-found__support-link {
    font-weight: 700;
    color: #4f46e5;
    text-decoration: underline;
}

@media (max-width: 419px) {
    .storefront-not-found__actions .storefront-not-found__btn {
        width: 100%;
    }
}

/* —— Favoriler —— */
.storefront-favorites__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 1.5rem;
    margin-bottom: 1.75rem;
}

.storefront-favorites__title {
    margin: 0;
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    color: #18181b;
}

.dark .storefront-favorites__title {
    color: #fafafa;
}

.storefront-favorites__count {
    margin: 0.35rem 0 0;
    font-size: 0.875rem;
    color: #71717a;
}

.storefront-favorites__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
}

.storefront-favorites__bulk-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid #e4e4e7;
    border-radius: 0.65rem;
    background: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #3f3f46;
    cursor: pointer;
    transition: opacity 0.15s ease, border-color 0.15s ease;
}

.storefront-favorites__bulk-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.storefront-favorites__view-toggle {
    display: inline-flex;
    border: 1px solid #e4e4e7;
    border-radius: 0.65rem;
    overflow: hidden;
    background: #fff;
}

.storefront-favorites__view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    background: transparent;
    color: #71717a;
    cursor: pointer;
}

.storefront-favorites__view-btn.is-active {
    background: #4f46e5;
    color: #fff;
}

.storefront-favorites__empty {
    width: 100%;
    border: 1px solid #e4e4e7;
    border-radius: 1rem;
    background: #fafafa;
    padding: 3rem 2rem;
    margin-bottom: 0.25rem;
}

.storefront-favorites__empty-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    min-height: 10rem;
}

.storefront-favorites__empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.75rem;
    height: 3.75rem;
    margin-bottom: 1rem;
    border-radius: 9999px;
    background: rgb(79 70 229 / 0.1);
    color: #4f46e5;
}

.storefront-favorites__empty-title {
    margin: 0 0 0.4rem;
    font-size: 1.125rem;
    font-weight: 800;
    color: #18181b;
}

.storefront-favorites__empty-lead {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #71717a;
    max-width: 26rem;
}

.storefront-favorites__empty-cta {
    display: inline-flex;
    margin-top: 1.25rem;
    padding: 0.75rem 1.35rem;
    border-radius: 0.65rem;
    background: #4f46e5;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s ease;
}

.storefront-favorites__empty-cta:hover {
    background: #4338ca;
}

.storefront-favorites__list--grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

@media (min-width: 640px) {
    .storefront-favorites__list--grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.1rem;
    }
}

@media (min-width: 1024px) {
    .storefront-favorites__list--grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1rem;
    }
}

.storefront-favorites__list--list {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.storefront-favorites__card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgb(228 228 231 / 0.75);
    border-radius: 1.15rem;
    background: #fff;
    box-shadow: 0 2px 8px rgb(15 23 42 / 0.04), 0 16px 40px -12px rgb(79 70 229 / 0.12);
    transition: opacity 0.28s ease, transform 0.28s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.storefront-favorites__card:hover {
    border-color: #c7d2fe;
    box-shadow: 0 4px 12px rgb(15 23 42 / 0.06), 0 22px 48px -10px rgb(79 70 229 / 0.18);
    transform: translateY(-2px);
}

.storefront-favorites__card-media-wrap {
    position: relative;
    flex-shrink: 0;
    width: 100%;
}

.storefront-favorites__card.fav-card--new {
    animation: storefront-fav-card-in 0.35s ease both;
}

@keyframes storefront-fav-card-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dark .storefront-favorites__card {
    border-color: rgb(63 63 70 / 0.85);
    background: rgb(24 24 27 / 0.55);
    box-shadow: 0 8px 24px -8px rgb(0 0 0 / 0.35);
}

.dark .storefront-favorites__card:hover {
    border-color: rgb(99 102 241 / 0.45);
}

.storefront-favorites__card.is-removing {
    opacity: 0;
    transform: scale(0.98);
    pointer-events: none;
}

.storefront-favorites__select {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    z-index: 14;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    border-radius: 0.45rem;
    border: 1px solid rgb(228 228 231 / 0.95);
    background: rgb(255 255 255 / 0.97);
    box-shadow: 0 2px 10px rgb(15 23 42 / 0.1);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.storefront-favorites__select:has(input:checked) {
    border-color: #4f46e5;
    background: #eef2ff;
    box-shadow: 0 0 0 2px rgb(79 70 229 / 0.2);
}

.storefront-favorites__select input {
    width: 0.9rem;
    height: 0.9rem;
    margin: 0;
    accent-color: #4f46e5;
    cursor: pointer;
}

.storefront-favorites__list--grid .storefront-favorites__card {
    border: 1px solid #e4e4e7;
    border-radius: 0.85rem;
    box-shadow: none;
}

.storefront-favorites__list--grid .storefront-favorites__card:hover {
    border-color: #c7d2fe;
    box-shadow: 0 10px 28px rgb(79 70 229 / 0.08);
    transform: none;
}

.storefront-favorites__list--grid .storefront-favorites__card-media {
    aspect-ratio: 1 / 1;
    min-height: 0;
    background: #f4f4f5;
}

.storefront-favorites__card-media {
    position: relative;
    display: block;
    width: 100%;
    max-width: none;
    overflow: hidden;
    background: linear-gradient(160deg, #f4f4f5 0%, #fafafa 55%, #eef2ff 100%);
}

.storefront-favorites__card-media [data-product-card-image] {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    max-width: none;
    aspect-ratio: auto;
}

.storefront-favorites__card-media [data-product-card-image] .product-card-img-ph,
.storefront-favorites__card-media [data-product-card-image] .product-card-img-el {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center center;
}

.storefront-favorites__heart {
    position: absolute;
    top: 0.55rem;
    left: 0.55rem;
    right: auto;
    z-index: 13;
    width: 2.15rem;
    height: 2.15rem;
    border: 0;
    border-radius: 9999px;
    background: rgb(255 255 255 / 0.96);
    color: #ef4444;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.1);
    cursor: pointer;
    pointer-events: auto;
    transition: transform 0.15s ease, background 0.15s ease;
}

.storefront-favorites__heart:hover {
    transform: scale(1.06);
    background: #fff;
}

.storefront-favorites__heart svg,
.storefront-favorites__heart .lucide {
    fill: currentColor;
}

.storefront-favorites__card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 1rem 1.1rem 1.15rem;
    border-top: 1px solid rgb(244 244 245 / 0.9);
}

.storefront-favorites__brand {
    margin: 0 0 0.2rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #a1a1aa;
}

.storefront-favorites__name {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.3;
}

.storefront-favorites__name a {
    color: inherit;
    text-decoration: none;
}

.storefront-favorites__name a:hover {
    color: #4f46e5;
}

.storefront-favorites__size {
    margin: 0 0 0.2rem;
    font-size: 0.75rem;
    color: #71717a;
}

.storefront-favorites__price {
    margin: 0 0 0.85rem;
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: #18181b;
}

.storefront-favorites__price--muted {
    color: #a1a1aa;
}

.storefront-favorites__card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.storefront-favorites__cart-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    flex: 1 1 auto;
    min-height: 2.4rem;
    padding: 0.5rem 1rem;
    border: 0;
    border-radius: 0.6rem;
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgb(79 70 229 / 0.28);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.storefront-favorites__cart-btn--link {
    background: transparent;
    border: 1.5px solid #4f46e5;
    color: #4f46e5;
    box-shadow: none;
}

.storefront-favorites__cart-btn:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgb(79 70 229 / 0.32);
}

.storefront-favorites__cart-btn--link:hover {
    background: #4f46e5;
    color: #fff;
    filter: none;
    transform: translateY(-1px);
}

.storefront-favorites__remove-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border: 1px solid #e4e4e7;
    border-radius: 0.55rem;
    background: #fff;
    color: #71717a;
    cursor: pointer;
}

.storefront-favorites__remove-mini:hover {
    color: #ef4444;
    border-color: #fecaca;
}

.storefront-favorites__list--list .storefront-favorites__card {
    flex-direction: row;
    align-items: stretch;
}

.storefront-favorites__list--list .storefront-favorites__card-media-wrap {
    flex: 0 0 clamp(10.5rem, 34vw, 14.5rem);
    width: clamp(10.5rem, 34vw, 14.5rem);
    max-width: 14.5rem;
    align-self: stretch;
}

.storefront-favorites__list--list .storefront-favorites__card-media {
    width: 100%;
    height: 100%;
    min-height: 12.5rem;
    aspect-ratio: 4 / 5;
}

.storefront-favorites__list--list .storefront-favorites__card-body {
    flex: 1 1 auto;
    padding: 1rem 1.15rem;
    justify-content: center;
    border-top: 0;
    border-left: 1px solid rgb(244 244 245 / 0.9);
}

.storefront-favorites__card-media:hover img,
.storefront-favorites__card:hover .storefront-favorites__card-media img {
    transform: scale(1.04);
}

.storefront-favorites__card-media img {
    transition: transform 0.28s ease;
}

@media (max-width: 480px) {
    .storefront-favorites__list--list .storefront-favorites__card-media-wrap {
        flex: 0 0 9.75rem;
        width: 9.75rem;
    }

    .storefront-favorites__list--list .storefront-favorites__card-media {
        min-height: 11.5rem;
    }

    .storefront-favorites__list--list .storefront-favorites__name {
        font-size: 0.875rem;
    }
}

.storefront-favorites__suggest-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.storefront-favorites__suggest-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 900;
    color: #18181b;
}

.storefront-favorites__suggest-lead {
    margin: 0.35rem 0 0;
    font-size: 0.875rem;
    color: #71717a;
}

.storefront-favorites__suggest-all {
    font-size: 0.8125rem;
    font-weight: 800;
    color: #4f46e5;
    text-decoration: none;
    white-space: nowrap;
}

.storefront-favorites__suggest-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

@media (min-width: 640px) {
    .storefront-favorites__suggest-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.1rem;
    }
}

@media (min-width: 1024px) {
    .storefront-favorites__suggest-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1rem;
    }
}

.storefront-favorites__suggest-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid #e4e4e7;
    border-radius: 0.85rem;
    background: #fff;
    overflow: hidden;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.storefront-favorites__suggest-card:hover {
    border-color: #c7d2fe;
    box-shadow: 0 10px 28px rgb(79 70 229 / 0.08);
}

.storefront-favorites__suggest-media-wrap {
    position: relative;
    flex-shrink: 0;
}

.storefront-favorites__suggest-media {
    display: block;
    aspect-ratio: 1 / 1;
    background: #f4f4f5;
    overflow: hidden;
}

.storefront-favorites__suggest-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease;
}

.storefront-favorites__suggest-card:hover .storefront-favorites__suggest-media img {
    transform: scale(1.04);
}

.storefront-favorites__suggest-fav {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 12;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 9999px;
    background: rgb(255 255 255 / 0.96);
    color: #a1a1aa;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.08);
    cursor: pointer;
    pointer-events: auto;
    transition: color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}

.storefront-favorites__suggest-fav:hover {
    color: #ef4444;
    transform: scale(1.06);
}

.storefront-favorites__suggest-fav.is-active,
.storefront-favorites__suggest-fav.is-active:hover {
    color: #ef4444;
}

.storefront-favorites__suggest-fav.is-active svg,
.storefront-favorites__suggest-fav.is-active .lucide {
    fill: currentColor;
}

.storefront-favorites__suggest-fav.is-busy {
    opacity: 0.55;
    cursor: wait;
}

.storefront-favorites__suggest-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.7rem 0.75rem 0.85rem;
}

.storefront-favorites__suggest-brand {
    margin: 0 0 0.15rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #6366f1;
}

.storefront-favorites__suggest-name {
    margin: 0 0 0.2rem;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.3;
}

.storefront-favorites__suggest-name a {
    color: inherit;
    text-decoration: none;
}

.storefront-favorites__suggest-price {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 800;
}

.storefront-favorites__stock-note {
    font-size: 0.75rem;
    font-weight: 700;
    color: #a1a1aa;
}

.storefront-favorites__cart-btn--link {
    text-align: center;
}

.dark .storefront-favorites__empty {
    border-color: #3f3f46;
    background: rgb(24 24 27 / 0.45);
}

.dark .storefront-favorites__bulk-btn,
.dark .storefront-favorites__view-toggle {
    border-color: #3f3f46;
    background: #18181b;
    color: #e4e4e7;
}

.dark .storefront-favorites__view-btn {
    color: #a1a1aa;
}

.dark .storefront-favorites__suggest-card {
    border-color: #3f3f46;
    background: rgb(24 24 27 / 0.45);
}

.dark .storefront-favorites__suggest-title {
    color: #fafafa;
}

.storefront-favorites__list--grid .storefront-favorites__card-media-wrap {
    width: 100%;
}

.storefront-favorites__list--grid .storefront-favorites__card-media {
    width: 100%;
    max-width: none;
}

.storefront-favorites__list--grid .storefront-favorites__card-body {
    padding: 0.7rem 0.75rem 0.85rem;
    border-top: 0;
}

.storefront-favorites__list--grid .storefront-favorites__brand {
    margin: 0 0 0.15rem;
    letter-spacing: 0.08em;
    color: #6366f1;
}

.storefront-favorites__list--grid .storefront-favorites__name {
    margin: 0 0 0.2rem;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.3;
}

.storefront-favorites__list--grid .storefront-favorites__size {
    margin: 0 0 0.15rem;
    font-size: 0.6875rem;
}

.storefront-favorites__list--grid .storefront-favorites__price {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: normal;
}

.storefront-favorites__list--grid .storefront-favorites__card-actions {
    gap: 0.4rem;
}

.storefront-favorites__list--grid .storefront-favorites__cart-btn {
    min-height: 2rem;
    padding: 0.35rem 0.65rem;
    font-size: 0.625rem;
    font-weight: 700;
    border-radius: 0.5rem;
    box-shadow: none;
}

.storefront-favorites__list--grid .storefront-favorites__cart-btn:hover {
    transform: none;
    filter: none;
    box-shadow: none;
}

.storefront-favorites__list--grid .storefront-favorites__cart-btn--link {
    border-width: 1.5px;
}

.storefront-favorites__list--grid .storefront-favorites__remove-mini {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
}

.storefront-favorites__list--grid .storefront-favorites__card-actions .fav-add-cart-btn,
.storefront-favorites__list--grid .storefront-favorites__card-actions .storefront-favorites__cart-btn--link {
    flex: 1 1 auto;
    min-width: 0;
}

.storefront-favorites__list--grid .storefront-favorites__card-actions .storefront-favorites__stock-note {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.6875rem;
}

.storefront-favorites__suggest-panel {
    margin-top: 2.75rem;
    padding: 1.5rem 1.25rem 1.65rem;
    border: 1px solid #e4e4e7;
    border-radius: 1rem;
    background: #fff;
}

@media (min-width: 768px) {
    .storefront-favorites__suggest-panel {
        margin-top: 3rem;
        padding: 1.75rem 1.5rem 1.85rem;
    }
}

.storefront-favorites__suggest-panel .storefront-favorites__suggest-head {
    margin-bottom: 1.35rem;
}

.storefront-favorites__suggest-card.is-added {
    opacity: 0;
    transform: scale(0.98);
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
}

.dark .storefront-favorites__suggest-panel {
    border-color: #3f3f46;
    background: rgb(24 24 27 / 0.45);
}

.dark .storefront-favorites__empty {
    border-color: #3f3f46;
    background: rgb(24 24 27 / 0.45);
}

.dark .storefront-favorites__empty-title {
    color: #fafafa;
}

/* —— Ana sayfa duyuru popup —— */
.site-announcement-popup {
    position: fixed;
    inset: 0;
    z-index: 6500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(0.75rem, 3vw, 1.5rem);
    isolation: isolate;
    touch-action: none;
}

.site-announcement-popup__backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgb(15 23 42 / 0.42);
    backdrop-filter: blur(22px) saturate(1.12);
    -webkit-backdrop-filter: blur(22px) saturate(1.12);
    transform: translateZ(0);
}

.dark .site-announcement-popup__backdrop {
    background: rgb(0 0 0 / 0.68);
    backdrop-filter: blur(26px) saturate(1.08);
    -webkit-backdrop-filter: blur(26px) saturate(1.08);
}

@media (prefers-reduced-motion: reduce) {
    .site-announcement-popup__backdrop {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgb(15 23 42 / 0.78);
    }

    .dark .site-announcement-popup__backdrop {
        background: rgb(0 0 0 / 0.82);
    }
}

.site-announcement-popup__panel {
    position: relative;
    z-index: 1;
    width: min(100%, 28rem);
    max-height: min(90dvh, 36rem);
    overflow: hidden;
    border-radius: 1.35rem;
    border: 1px solid rgb(255 255 255 / 0.72);
    background: linear-gradient(168deg, rgb(255 255 255 / 0.99) 0%, rgb(248 250 252 / 0.98) 100%);
    box-shadow:
        0 0 0 1px rgb(124 58 237 / 0.06),
        0 24px 48px -12px rgb(15 23 42 / 0.22),
        0 48px 96px -24px rgb(79 70 229 / 0.18);
}

.dark .site-announcement-popup__panel {
    border-color: rgb(63 63 70 / 0.8);
    background: linear-gradient(168deg, rgb(24 24 27 / 0.98) 0%, rgb(15 15 18 / 0.96) 100%);
    box-shadow:
        0 0 0 1px rgb(167 139 250 / 0.1),
        0 24px 48px -12px rgb(0 0 0 / 0.55),
        0 48px 96px -24px rgb(0 0 0 / 0.4);
}

.site-announcement-popup__close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    border: 1px solid rgb(255 255 255 / 0.55);
    background: rgb(255 255 255 / 0.88);
    color: rgb(100 116 139);
    box-shadow: 0 4px 14px rgb(15 23 42 / 0.12);
    transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.site-announcement-popup__close:hover {
    color: rgb(15 23 42);
    background: rgb(255 255 255 / 0.98);
    transform: scale(1.04);
}

.dark .site-announcement-popup__close {
    border-color: rgb(63 63 70 / 0.75);
    background: rgb(39 39 42 / 0.92);
    color: rgb(161 161 170);
}

.dark .site-announcement-popup__close:hover {
    color: rgb(250 250 250);
    background: rgb(63 63 70 / 0.95);
}

.site-announcement-popup__media {
    position: relative;
    width: 100%;
    max-height: min(52dvh, 22rem);
    overflow: hidden;
    background: rgb(241 245 249);
}

.dark .site-announcement-popup__media {
    background: rgb(24 24 27);
}

.site-announcement-popup__media-link {
    display: block;
    width: 100%;
    height: 100%;
}

.site-announcement-popup__media-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: min(52dvh, 22rem);
    object-fit: contain;
}

.site-announcement-popup__body {
    padding: 1.25rem 1.5rem 1.5rem;
    text-align: center;
}

@media (min-width: 640px) {
    .site-announcement-popup__body {
        padding: 1.5rem 1.75rem 1.75rem;
    }
}

.site-announcement-popup__title {
    margin: 0 0 0.65rem;
    font-size: clamp(1.25rem, 4vw, 1.5rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: rgb(15 23 42);
}

.dark .site-announcement-popup__title {
    color: rgb(250 250 250);
}

.site-announcement-popup__content {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: rgb(71 85 105);
}

.dark .site-announcement-popup__content {
    color: rgb(161 161 170);
}

.site-announcement-popup__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 1.1rem;
    min-height: 2.75rem;
    padding: 0.55rem 1.35rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    box-shadow: 0 10px 24px -8px rgb(79 70 229 / 0.55);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.site-announcement-popup__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px -8px rgb(79 70 229 / 0.62);
}