/**
 * Storefront base — Bootstrap 5.3.8 + Font Awesome Free 6.7.2.
 * Mobile-safe additives only; desktop layouts stay intact.
 * Load AFTER theme CSS so these overrides win.
 */

/* Hızlı bannerlar (kategori şeridi): mobilde 2’li */
@media (max-width: 767.98px) {
    .theme-quick-banners__list,
    .agora-quick-banners__list {
        gap: 1rem 0.75rem !important;
        justify-content: space-between !important;
    }

    .theme-quick-banners__item,
    .agora-quick-banners__item {
        width: calc(50% - 0.4rem) !important;
        flex: 0 0 calc(50% - 0.4rem) !important;
        max-width: calc(50% - 0.4rem) !important;
    }

    .theme-quick-banners__thumb,
    .agora-quick-banners__thumb {
        width: 72px;
        height: 72px;
    }

    /* Kategori vitrinleri: 2 kolon */
    .showcase-categories-grid .row,
    .showcase-categories-slider .row {
        flex-wrap: wrap !important;
        overflow-x: visible !important;
    }

    .showcase-categories-grid .row > [class*="col-"],
    .showcase-categories-slider .row > [class*="col-"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }
}

/* Ürün vitrinleri: mobil 1 kolon — şerit kaydırmayı kapat */
@media (max-width: 767.98px) {
    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body {
        overflow-x: clip;
    }

    .agora-pdp img,
    .product-detail img,
    .product-card img,
    .product-gallery img,
    .main-image,
    .thumbnail-image,
    .showcase-section img,
    .features-content img {
        max-width: 100%;
        height: auto;
    }

    .table-responsive,
    .product-tabs .table-responsive,
    .features-content .table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .btn.add-to-cart-btn,
    .btn.buy-now-btn,
    .agora-pdp__btn-cart,
    .agora-pdp__btn-buy {
        min-height: 44px;
    }

    .form-control,
    .form-select {
        max-width: 100%;
    }

    .modal-dialog {
        margin: 0.75rem;
    }

    .agora-pdp__aside {
        margin-top: 1rem;
    }

    .showcase-products-grid .row,
    .showcase-products-shelf .row,
    .showcase-bestsellers-grid .row,
    .showcase-bestsellers-shelf .row,
    .showcase-section:not(.showcase-categories-grid):not(.showcase-categories-slider):not(.showcase-brands-grid):not(.showcase-brands-slider) .row.flex-nowrap,
    .showcase-section:not(.showcase-categories-grid):not(.showcase-categories-slider):not(.showcase-brands-grid):not(.showcase-brands-slider) .row.overflow-auto,
    .theme-flash__track,
    .showcase-flash-products .row,
    .theme-flash .row {
        flex-wrap: wrap !important;
        overflow-x: visible !important;
    }

    .showcase-products-grid .row > [class*="col-"],
    .showcase-products-shelf .row > [class*="col-"],
    .showcase-bestsellers-grid .row > [class*="col-"],
    .showcase-bestsellers-shelf .row > [class*="col-"],
    .showcase-section:not(.showcase-categories-grid):not(.showcase-categories-slider):not(.showcase-brands-grid):not(.showcase-brands-slider) .row.flex-nowrap > [class*="col-"],
    .showcase-section:not(.showcase-categories-grid):not(.showcase-categories-slider):not(.showcase-brands-grid):not(.showcase-brands-slider) .row.overflow-auto > [class*="col-"],
    .theme-flash__track > [class*="col-"],
    .showcase-flash-products .row > [class*="col-"],
    .theme-flash .row > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .agora-shelf__track {
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        scroll-snap-type: none !important;
    }

    .agora-shelf__item {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Tablet: ürün vitrin 2 kolon */
@media (min-width: 768px) and (max-width: 991.98px) {
    .showcase-products-grid .row,
    .showcase-products-shelf .row,
    .showcase-bestsellers-grid .row,
    .showcase-bestsellers-shelf .row,
    .showcase-section:not(.showcase-categories-grid):not(.showcase-categories-slider):not(.showcase-brands-grid):not(.showcase-brands-slider) .row.flex-nowrap,
    .showcase-section:not(.showcase-categories-grid):not(.showcase-categories-slider):not(.showcase-brands-grid):not(.showcase-brands-slider) .row.overflow-auto,
    .theme-flash__track,
    .showcase-flash-products .row,
    .theme-flash .row {
        flex-wrap: wrap !important;
        overflow-x: visible !important;
    }

    .showcase-products-grid .row > [class*="col-"],
    .showcase-products-shelf .row > [class*="col-"],
    .showcase-bestsellers-grid .row > [class*="col-"],
    .showcase-bestsellers-shelf .row > [class*="col-"],
    .showcase-section:not(.showcase-categories-grid):not(.showcase-categories-slider):not(.showcase-brands-grid):not(.showcase-brands-slider) .row.flex-nowrap > [class*="col-"],
    .showcase-section:not(.showcase-categories-grid):not(.showcase-categories-slider):not(.showcase-brands-grid):not(.showcase-brands-slider) .row.overflow-auto > [class*="col-"],
    .theme-flash__track > [class*="col-"],
    .showcase-flash-products .row > [class*="col-"],
    .theme-flash .row > [class*="col-"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }

    .agora-shelf__track {
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        scroll-snap-type: none !important;
    }

    .agora-shelf__item {
        flex: 0 0 calc(50% - 0.4rem) !important;
        width: calc(50% - 0.4rem) !important;
        max-width: calc(50% - 0.4rem) !important;
    }
}

/* Masaüstü kaydırmalı şerit: sabit 4 yan yana */
@media (min-width: 992px) {
    .theme-flash__track.flex-nowrap > [class*="col-"],
    .showcase-section .row.flex-nowrap > [class*="col-"] {
        flex: 0 0 calc((100% - 2.25rem) / 4);
        width: calc((100% - 2.25rem) / 4);
        max-width: none;
    }
}

@media (min-width: 768px) {
    .pdp-purchase__primary .add-to-cart-btn,
    .agora-pdp__purchase-primary .add-to-cart-btn,
    .agora-pdp__purchase-primary .agora-pdp__btn-cart {
        min-height: 48px;
    }
}

/* Varyant seçimi — partials/product-variant-picker.blade.php (davranış: storefront-core.js) */
.sf-variants {
    display: grid;
    gap: 1rem;
    margin: 0 0 1.25rem;
}
.sf-variants__label {
    font-size: 0.9rem;
    color: var(--sf-text-muted, #6c757d);
    margin-bottom: 0.5rem;
}
.sf-variants__current {
    color: var(--sf-text, #212529);
    font-weight: 600;
}
.sf-variants__options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.sf-variants__option {
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--sf-border, #dee2e6);
    border-radius: var(--sf-radius-sm, 6px);
    background: var(--sf-surface, #fff);
    color: var(--sf-text, #212529);
    font-size: 0.9rem;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.sf-variants__option:hover {
    border-color: var(--sf-primary, #0d6efd);
}
.sf-variants__option:focus-visible {
    outline: 2px solid var(--sf-primary, #0d6efd);
    outline-offset: 2px;
}
.sf-variants__option.is-selected {
    border-color: var(--sf-primary, #0d6efd);
    box-shadow: inset 0 0 0 1px var(--sf-primary, #0d6efd);
    font-weight: 600;
}
.sf-variants__option.is-unavailable {
    color: var(--sf-text-muted, #6c757d);
    background-image: linear-gradient(to top right, transparent calc(50% - 1px), var(--sf-border, #dee2e6) 50%, transparent calc(50% + 1px));
}
.sf-variants__option--color {
    min-width: 2.75rem;
    padding: 0.3rem;
    border-radius: var(--sf-radius-pill, 999px);
}
.sf-variants__swatch {
    display: block;
    width: 2rem;
    height: 2rem;
    border-radius: var(--sf-radius-pill, 999px);
    border: 1px solid rgba(0, 0, 0, 0.12);
}
.sf-variants__select {
    max-width: 20rem;
}
.sf-variants__notice:empty {
    display: none;
}
.sf-variants__notice {
    font-size: 0.875rem;
    color: var(--sf-danger, #dc3545);
}