/* =======================================================================
   shop-modern.css  v2.0 - PREMIUM REDESIGN
   Dijital Onarim Shop - Gercek premium e-ticaret hissi.
   Mobil-once, iki-sutun mobil grid, gradient buttons, mesh heroes.
   ======================================================================= */

/* ================ 1) DESIGN TOKENS ================ */
:root {
    /* Brand gradient stack */
    --dj-primary:        #e53e29;
    --dj-primary-600:    #c9301c;
    --dj-primary-700:    #a82915;
    --dj-primary-50:     #fff3f1;
    --dj-primary-100:    #ffe0da;
    --dj-primary-gradient: linear-gradient(135deg, #ff5c3e 0%, #e53e29 50%, #c9301c 100%);
    --dj-primary-gradient-hover: linear-gradient(135deg, #ff6b4d 0%, #ef4a32 50%, #d0311f 100%);

    --dj-ink:            #0a0f14;
    --dj-ink-2:          #161b22;
    --dj-accent:         #0b67cd;
    --dj-success:        #16a34a;
    --dj-success-bg:     #ecfdf5;
    --dj-warning:        #d97706;
    --dj-warning-bg:     #fef3c7;
    --dj-danger:         #dc2626;
    --dj-danger-bg:      #fee2e2;

    --dj-g-900: #0f1419;
    --dj-g-800: #1f2937;
    --dj-g-700: #374151;
    --dj-g-600: #4b5563;
    --dj-g-500: #6b7280;
    --dj-g-400: #9ca3af;
    --dj-g-300: #d1d5db;
    --dj-g-200: #e5e7eb;
    --dj-g-100: #f3f4f6;
    --dj-g-50:  #f8fafc;

    --dj-bg:      #f5f6fa;
    --dj-surface: #ffffff;
    --dj-border:  #eaecef;

    /* Shadows - layered for premium feel */
    --dj-sh-xs:  0 1px 2px rgba(15,20,25,.05);
    --dj-sh-sm:  0 2px 8px rgba(15,20,25,.06), 0 1px 2px rgba(15,20,25,.04);
    --dj-sh-md:  0 4px 14px rgba(15,20,25,.08), 0 2px 4px rgba(15,20,25,.04);
    --dj-sh-lg:  0 12px 32px rgba(15,20,25,.10), 0 4px 8px rgba(15,20,25,.05);
    --dj-sh-xl:  0 24px 60px rgba(15,20,25,.14), 0 8px 16px rgba(15,20,25,.06);
    --dj-sh-primary: 0 6px 20px rgba(229,62,41,.32), 0 2px 6px rgba(229,62,41,.18);
    --dj-sh-primary-hover: 0 12px 32px rgba(229,62,41,.42), 0 4px 10px rgba(229,62,41,.22);

    --dj-r-xs:   8px;
    --dj-r-sm:   12px;
    --dj-r-md:   16px;
    --dj-r-lg:   22px;
    --dj-r-xl:   28px;
    --dj-r-pill: 999px;

    --dj-font: 'Jost', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    --dj-t-fast: 180ms cubic-bezier(.2,.8,.2,1);
    --dj-t-base: 280ms cubic-bezier(.2,.8,.2,1);
    --dj-t-slow: 460ms cubic-bezier(.2,.8,.2,1);
}

/* ================ 2) BASE ================ */
body:is(.main-site,.shop-page) {
    background: var(--dj-bg) !important;
    color: var(--dj-g-800);
    font-family: var(--dj-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
body:is(.main-site,.shop-page) img { max-width: 100%; }
::selection { background: var(--dj-primary); color: #fff; }

/* ================ 3) TYPOGRAPHY ================ */
:is(.main-site,.shop-page) h1,
:is(.main-site,.shop-page) h2,
:is(.main-site,.shop-page) h3,
:is(.main-site,.shop-page) h4 {
    font-family: var(--dj-font);
    color: var(--dj-g-900);
    letter-spacing: -.015em;
    line-height: 1.22;
    font-weight: 800;
}
:is(.main-site,.shop-page) h1 { font-weight: 900; }
:is(.main-site,.shop-page) p { line-height: 1.65; color: var(--dj-g-700); }

/* ================ 4) MOBIL 2-COLUMN GRID (kritik fix) ================ */
/* shop-index.php'de urun kartlari: col-xl-3 col-lg-4 col-md-6 col-sm-6 col-12
   Mobilde (<576px) col-12 aktif = tek sutun = cirkin
   Zorla 2 sutun yapiyoruz. Pagination/empty-state col-12'yi BOZMAMAK icin
   col-sm-6 ILE birlikte olan col-12'yi hedefliyoruz. */
@media (max-width: 575.98px) {
    .col-12.col-sm-6,
    [class*="col-sm-6"].col-12,
    .row > [class*="col-sm-6"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    .row.g-2, .row.g-3, .row.g-4 {
        margin-left: -5px !important;
        margin-right: -5px !important;
    }
    .row.g-2 > *, .row.g-3 > *, .row.g-4 > * {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
}

/* ================ 5) UNIFIED BUTTON SYSTEM ================ */
:is(.main-site,.shop-page) .theme-btn,
:is(.main-site,.shop-page) .theme-btn.btn-style-one {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px !important;
    border-radius: var(--dj-r-sm) !important;
    font-weight: 700;
    font-size: .95rem;
    line-height: 1;
    cursor: pointer;
    background: var(--dj-primary-gradient) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: var(--dj-sh-primary) !important;
    transition: transform var(--dj-t-base), box-shadow var(--dj-t-base), filter var(--dj-t-base) !important;
    overflow: hidden;
    text-transform: none !important;
    letter-spacing: .3px;
}
:is(.main-site,.shop-page) .theme-btn::before {
    content: "";
    position: absolute;
    top: 0; left: -80%;
    width: 60%; height: 100%;
    background: linear-gradient(110deg, transparent, rgba(255,255,255,.25), transparent);
    transform: skewX(-20deg);
    transition: left .6s;
    pointer-events: none;
}
:is(.main-site,.shop-page) .theme-btn:hover { transform: translateY(-2px); box-shadow: var(--dj-sh-primary-hover) !important; filter: brightness(1.05); }
:is(.main-site,.shop-page) .theme-btn:hover::before { left: 120%; }
:is(.main-site,.shop-page) .theme-btn:active { transform: translateY(0); }
:is(.main-site,.shop-page) .theme-btn .btn-wrap .text-one,
:is(.main-site,.shop-page) .theme-btn .btn-wrap .text-two,
:is(.main-site,.shop-page) .theme-btn .btn-title {
    position: relative !important;
    color: #fff !important;
    background: transparent !important;
    padding: 0 !important;
    transform: none !important;
    letter-spacing: inherit !important;
}
:is(.main-site,.shop-page) .theme-btn .btn-wrap .text-two { display: none !important; }

/* New .dj-btn system */
.dj-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 22px;
    border-radius: var(--dj-r-sm);
    font-family: var(--dj-font);
    font-weight: 700;
    font-size: .92rem;
    line-height: 1;
    border: 1.5px solid transparent;
    cursor: pointer;
    text-decoration: none !important;
    transition: all var(--dj-t-base);
    user-select: none;
    letter-spacing: .2px;
    position: relative;
    overflow: hidden;
}
.dj-btn--primary { background: var(--dj-primary-gradient); color: #fff !important; box-shadow: var(--dj-sh-primary); }
.dj-btn--primary:hover { transform: translateY(-2px); box-shadow: var(--dj-sh-primary-hover); filter: brightness(1.05); }
.dj-btn--outline { background: #fff; color: var(--dj-g-800) !important; border-color: var(--dj-g-200); }
.dj-btn--outline:hover { border-color: var(--dj-primary); color: var(--dj-primary) !important; background: var(--dj-primary-50); }
.dj-btn--dark    { background: var(--dj-ink); color: #fff !important; }
.dj-btn--dark:hover { background: var(--dj-ink-2); }
.dj-btn--lg { padding: 16px 32px; font-size: 1rem; }
.dj-btn--block { width: 100%; }

/* ================ 6) PAGE TITLE / HERO - MESH GRADIENT ================ */
:is(.main-site,.shop-page) .page-title {
    position: relative;
    padding: 72px 0 80px !important;
    background: 
        radial-gradient(circle at 20% 30%, rgba(229,62,41,.38) 0%, transparent 45%),
        radial-gradient(circle at 85% 75%, rgba(80,30,200,.22) 0%, transparent 50%),
        radial-gradient(circle at 50% 100%, rgba(11,103,205,.16) 0%, transparent 45%),
        linear-gradient(135deg, #0a0f14 0%, #1a1224 40%, #2d1318 100%) !important;
    overflow: hidden;
    isolation: isolate;
}
:is(.main-site,.shop-page) .page-title::before {
    content: "";
    position: absolute; inset: 0;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(255,255,255,.08) 1px, transparent 0);
    background-size: 24px 24px;
    opacity: .5;
    pointer-events: none;
    z-index: 0;
}
:is(.main-site,.shop-page) .page-title::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 80px;
    background: linear-gradient(180deg, transparent, var(--dj-bg));
    pointer-events: none;
    z-index: 0;
}
:is(.main-site,.shop-page) .page-title > * { position: relative; z-index: 1; }
:is(.main-site,.shop-page) .page-title h1,
:is(.main-site,.shop-page) .page-title h2 {
    color: #fff !important;
    font-weight: 900 !important;
    font-size: clamp(1.8rem, 5vw, 3rem) !important;
    margin: 0 0 12px !important;
    text-shadow: 0 4px 20px rgba(0,0,0,.4);
    letter-spacing: -.02em;
}
:is(.main-site,.shop-page) .page-title .bread-crumb {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 8px 18px;
    margin: 10px 0 0;
    list-style: none;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--dj-r-pill);
    backdrop-filter: blur(10px);
}
:is(.main-site,.shop-page) .page-title .bread-crumb li {
    color: rgba(255,255,255,.82);
    font-size: .86rem;
    font-weight: 500;
    padding: 0;
}
:is(.main-site,.shop-page) .page-title .bread-crumb li:not(:last-child)::after {
    content: "›";
    margin-left: 14px;
    color: rgba(255,255,255,.4);
}
:is(.main-site,.shop-page) .page-title .bread-crumb li a { color: rgba(255,255,255,.95); transition: color var(--dj-t-fast); }
:is(.main-site,.shop-page) .page-title .bread-crumb li a:hover { color: #ff9677; }

/* shop-page-hero inherits */
.shop-page-hero { background-color: #0a0f14 !important; }
.shop-page-hero::before { opacity: .4 !important; }

@media (max-width: 575.98px) {
    :is(.main-site,.shop-page) .page-title { padding: 48px 0 54px !important; }
}

/* ================ 7) FILTER BAR - GLASS PREMIUM ================ */
.shop-filter-bar {
    background: rgba(255,255,255,.88);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--dj-border);
    padding: 14px 0;
    position: sticky;
    top: 70px;
    z-index: 20;
    box-shadow: var(--dj-sh-xs);
}
.shop-filter-bar .sfb-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
}
.shop-filter-bar .sfb-count {
    font-size: .9rem; color: var(--dj-g-600);
    display: inline-flex; align-items: center; gap: 6px;
}
.shop-filter-bar .sfb-count strong { color: var(--dj-primary); font-weight: 800; }
.shop-filter-bar .sfb-right { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.shop-filter-bar .sfb-search-form {
    display: flex; align-items: center;
    background: #fff; border: 2px solid var(--dj-g-200);
    border-radius: var(--dj-r-pill); padding: 3px 4px 3px 18px;
    transition: all var(--dj-t-fast);
    min-width: 240px;
    box-shadow: var(--dj-sh-xs);
}
.shop-filter-bar .sfb-search-form:focus-within {
    border-color: var(--dj-primary);
    box-shadow: 0 0 0 4px rgba(229,62,41,.12), var(--dj-sh-sm);
}
.shop-filter-bar .sfb-search-form input {
    flex: 1; background: transparent; border: 0; outline: 0;
    padding: 9px 6px; font-size: .92rem; color: var(--dj-g-900);
    font-family: var(--dj-font);
}
.shop-filter-bar .sfb-search-form button {
    background: var(--dj-primary-gradient); color: #fff;
    border: 0; width: 36px; height: 36px;
    border-radius: 50%; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: var(--dj-sh-primary);
    transition: transform var(--dj-t-fast);
}
.shop-filter-bar .sfb-search-form button:hover { transform: scale(1.06); }
.shop-filter-bar .sfb-sort-form select {
    height: 44px;
    background: #fff;
    border: 2px solid var(--dj-g-200);
    border-radius: var(--dj-r-pill);
    padding: 0 40px 0 18px;
    font-size: .9rem; font-weight: 600; color: var(--dj-g-800);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23374151' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center;
    transition: all var(--dj-t-fast);
    box-shadow: var(--dj-sh-xs);
    font-family: var(--dj-font);
}
.shop-filter-bar .sfb-sort-form select:hover { border-color: var(--dj-primary); color: var(--dj-primary); }

@media (max-width: 767.98px) {
    .shop-filter-bar { position: static; padding: 10px 0; }
    .shop-filter-bar .sfb-inner { flex-direction: column; align-items: stretch; gap: 8px; }
    .shop-filter-bar .sfb-right { width: 100%; }
    .shop-filter-bar .sfb-search-form { flex: 1 1 100%; min-width: 0; }
    .shop-filter-bar .sfb-sort-form { flex: 1 1 100%; }
    .shop-filter-bar .sfb-sort-form select { width: 100%; }
}

/* ================ 8) PRODUCT CARD - PREMIUM REDESIGN ================ */
.sp-card {
    background: #fff !important;
    border: 0 !important;
    border-radius: var(--dj-r-md) !important;
    box-shadow: var(--dj-sh-sm) !important;
    display: flex; flex-direction: column; height: 100%;
    overflow: hidden;
    transition: transform var(--dj-t-base), box-shadow var(--dj-t-base) !important;
    position: relative;
    isolation: isolate;
}
/* Top accent line - premium touch */
.sp-card::before {
    content: "";
    position: absolute;
    top: 0; left: 50%;
    width: 0; height: 3px;
    background: var(--dj-primary-gradient);
    transform: translateX(-50%);
    transition: width var(--dj-t-slow);
    z-index: 3;
    border-radius: 0 0 3px 3px;
}
.sp-card:hover::before { width: 100%; }
.sp-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: 
        0 2px 6px rgba(0,0,0,.04),
        0 24px 48px rgba(229,62,41,.14),
        0 4px 12px rgba(15,20,25,.08) !important;
}
.sp-card--out { opacity: .72; }
.sp-card--out:hover { transform: translateY(-3px) !important; }

/* Image wrap - radial pattern background */
.sp-img-wrap {
    position: relative;
    aspect-ratio: 1 / 1;
    background: 
        radial-gradient(circle at 30% 30%, rgba(229,62,41,.04) 0%, transparent 55%),
        radial-gradient(circle at 70% 70%, rgba(11,103,205,.03) 0%, transparent 55%),
        linear-gradient(180deg, #fcfcff 0%, #f1f3f8 100%) !important;
    display: flex; align-items: center; justify-content: center;
    padding: 20px !important;
    overflow: hidden;
    border-bottom: 1px solid rgba(0,0,0,.04);
}
.sp-img-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, transparent 0%, rgba(0,0,0,.03) 100%);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--dj-t-base);
}
.sp-card:hover .sp-img-wrap::after { opacity: 1; }
.sp-img-wrap img {
    max-width: 100%; max-height: 100%;
    object-fit: contain;
    transition: transform var(--dj-t-slow) !important;
    filter: drop-shadow(0 8px 20px rgba(0,0,0,.10));
}
.sp-card:hover .sp-img-wrap img { transform: scale(1.08) rotate(-1.5deg); }

/* Badges - premium pill */
.sp-badge {
    position: absolute; top: 12px; left: 12px;
    z-index: 4;
    font-size: .66rem; font-weight: 800;
    letter-spacing: .8px; text-transform: uppercase;
    padding: 6px 12px; border-radius: var(--dj-r-pill);
    color: #fff;
    box-shadow: var(--dj-sh-sm);
    backdrop-filter: saturate(180%);
    display: inline-flex; align-items: center; gap: 4px;
}
.sp-badge--new  { background: linear-gradient(135deg, #22c55e, #16a34a); }
.sp-badge--sale { background: var(--dj-primary-gradient); }
.sp-badge--out  { background: linear-gradient(135deg, #6b7280, #4b5563); }

/* Body */
.sp-body {
    padding: 16px 16px 18px;
    display: flex; flex-direction: column; gap: 10px;
    flex: 1;
    background: #fff;
}
.sp-title {
    display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--dj-g-900) !important;
    font-size: .94rem;
    font-weight: 700;
    line-height: 1.38;
    min-height: 2.6em;
    text-decoration: none !important;
    transition: color var(--dj-t-fast);
    letter-spacing: -.01em;
}
.sp-card:hover .sp-title { color: var(--dj-primary) !important; }

.sp-stars {
    color: #f59e0b; font-size: .8rem; letter-spacing: 1.5px;
    display: inline-flex; align-items: center; gap: 2px;
}

.sp-price-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.sp-price {
    font-weight: 900 !important;
    font-size: 1.35rem !important;
    letter-spacing: -.025em;
    color: var(--dj-g-900);
    background: linear-gradient(135deg, #0a0f14 0%, #2d1318 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}
.sp-old-price {
    font-size: .85rem; color: var(--dj-g-400);
    text-decoration: line-through;
    font-weight: 500;
}

.sp-stock {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .76rem; color: var(--dj-success);
    font-weight: 700;
    padding: 4px 10px;
    background: var(--dj-success-bg);
    border-radius: var(--dj-r-pill);
    align-self: flex-start;
}
.sp-stock i { font-size: .48rem; }
.sp-stock--low {
    color: #92400e;
    background: var(--dj-warning-bg);
    animation: dj-pulse 2s ease-in-out infinite;
}
@keyframes dj-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .72; }
}

/* Action buttons */
.sp-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 8px; }
.sp-btn {
    flex: 1; height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px;
    font-size: .84rem; font-weight: 700;
    border-radius: var(--dj-r-xs);
    cursor: pointer;
    text-decoration: none !important;
    transition: all var(--dj-t-base);
    border: 1.5px solid transparent;
    line-height: 1;
    letter-spacing: .2px;
    position: relative;
    overflow: hidden;
    font-family: var(--dj-font);
}
.sp-btn--primary {
    background: var(--dj-primary-gradient) !important;
    color: #fff !important;
    box-shadow: var(--dj-sh-primary);
}
.sp-btn--primary::before {
    content: "";
    position: absolute;
    top: 0; left: -80%;
    width: 60%; height: 100%;
    background: linear-gradient(110deg, transparent, rgba(255,255,255,.3), transparent);
    transform: skewX(-20deg);
    transition: left .6s;
}
.sp-btn--primary:hover { transform: translateY(-2px); box-shadow: var(--dj-sh-primary-hover); filter: brightness(1.05); }
.sp-btn--primary:hover::before { left: 120%; }
.sp-btn--outline {
    background: #fff;
    color: var(--dj-g-800) !important;
    border-color: var(--dj-g-200);
}
.sp-btn--outline:hover {
    border-color: var(--dj-primary);
    color: var(--dj-primary) !important;
    background: var(--dj-primary-50);
}
.sp-btn--disabled {
    background: var(--dj-g-100);
    color: var(--dj-g-500) !important;
    cursor: not-allowed;
}

/* Mobile card adjustments - 2 columns at small */
@media (max-width: 575.98px) {
    .sp-card { border-radius: var(--dj-r-sm) !important; }
    .sp-img-wrap { padding: 12px !important; }
    .sp-body { padding: 12px 12px 14px; gap: 7px; }
    .sp-title { font-size: .82rem; min-height: 2.4em; }
    .sp-price { font-size: 1.05rem !important; }
    .sp-old-price { font-size: .72rem; }
    .sp-stock { font-size: .66rem; padding: 3px 8px; }
    .sp-stars { font-size: .7rem; }
    .sp-badge { font-size: .58rem; padding: 4px 9px; top: 8px; left: 8px; }
    .sp-actions { flex-direction: column; gap: 6px; padding-top: 4px; }
    .sp-btn { height: 38px; font-size: .76rem; }
    /* Hide "Incele" on mobile - only Sepete Ekle */
    .sp-btn--outline { display: none !important; }
}

/* ================ 9) EMPTY STATE ================ */
.sp-empty {
    background: #fff;
    border: 2px dashed var(--dj-g-300);
    border-radius: var(--dj-r-lg);
    padding: 64px 24px;
    text-align: center;
    box-shadow: var(--dj-sh-xs);
}
.sp-empty i { color: var(--dj-g-300); margin-bottom: 16px; font-size: 3rem !important; }
.sp-empty h4 { color: var(--dj-g-900); margin-bottom: 8px; font-weight: 800; }
.sp-empty p  { color: var(--dj-g-500); }

/* ================ 10) PAGINATION ================ */
.pagination { gap: 6px; }
.pagination .page-link {
    border-radius: var(--dj-r-xs) !important;
    border: 1.5px solid var(--dj-g-200) !important;
    color: var(--dj-g-700) !important;
    font-weight: 700;
    min-width: 42px; height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all var(--dj-t-base);
    background: #fff;
    font-family: var(--dj-font);
}
.pagination .page-link:hover {
    border-color: var(--dj-primary) !important;
    color: var(--dj-primary) !important;
    background: var(--dj-primary-50) !important;
    transform: translateY(-2px);
}
.pagination .page-item.active .page-link {
    background: var(--dj-primary-gradient) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: var(--dj-sh-primary);
}

/* ================ 11) PRODUCT DETAIL - PREMIUM ================ */
.sp-breadcrumb-bar {
    background: #fff;
    border-bottom: 1px solid var(--dj-border);
    padding: 14px 0;
    box-shadow: var(--dj-sh-xs);
}
.sp-breadcrumb {
    display: flex; flex-wrap: wrap; gap: 6px 14px;
    padding: 0; margin: 0; list-style: none;
    font-size: .86rem; color: var(--dj-g-500);
}
.sp-breadcrumb li:not(:last-child)::after {
    content: "›"; margin-left: 14px; color: var(--dj-g-300);
}
.sp-breadcrumb li a { color: var(--dj-g-600); font-weight: 500; transition: color var(--dj-t-fast); }
.sp-breadcrumb li a:hover { color: var(--dj-primary); }
.sp-breadcrumb li:last-child { color: var(--dj-g-900); font-weight: 700; }

.spd-section { padding: 36px 0 64px; }

.spd-gallery { position: sticky; top: 100px; }
.spd-main-img {
    background: 
        radial-gradient(circle at 30% 30%, rgba(229,62,41,.05) 0%, transparent 50%),
        linear-gradient(180deg, #fcfcff 0%, #f1f3f8 100%);
    border: 0;
    border-radius: var(--dj-r-lg);
    overflow: hidden;
    aspect-ratio: 1 / 1;
    display: flex; align-items: center; justify-content: center;
    padding: 28px;
    position: relative;
    box-shadow: var(--dj-sh-md);
}
.spd-main-img img {
    max-width: 100%; max-height: 100%; object-fit: contain;
    filter: drop-shadow(0 16px 40px rgba(0,0,0,.14));
    transition: transform var(--dj-t-slow);
}
.spd-main-img:hover img { transform: scale(1.04); }
.spd-out-overlay {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: rgba(15,20,25,.92); color: #fff;
    padding: 12px 26px; border-radius: var(--dj-r-pill);
    font-weight: 800; font-size: .92rem;
    backdrop-filter: blur(6px);
}
.spd-thumbs {
    display: flex; gap: 10px;
    margin-top: 14px;
    overflow-x: auto;
    padding: 4px 2px;
    scrollbar-width: thin;
}
.spd-thumb {
    width: 72px; height: 72px;
    border-radius: var(--dj-r-xs);
    border: 2px solid transparent;
    background: #fff;
    object-fit: contain;
    padding: 6px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all var(--dj-t-fast);
    box-shadow: var(--dj-sh-xs);
}
.spd-thumb:hover, .spd-thumb.active {
    border-color: var(--dj-primary);
    transform: translateY(-2px);
    box-shadow: var(--dj-sh-sm);
}

.spd-info {
    background: #fff;
    border: 0;
    border-radius: var(--dj-r-lg);
    padding: 32px;
    box-shadow: var(--dj-sh-md);
    position: relative;
    overflow: hidden;
}
.spd-info::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 4px; height: 100%;
    background: var(--dj-primary-gradient);
}
.spd-cat-tag {
    display: inline-block;
    background: var(--dj-primary-gradient);
    color: #fff !important;
    padding: 6px 14px;
    border-radius: var(--dj-r-pill);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    margin-bottom: 14px;
    box-shadow: var(--dj-sh-primary);
}
.spd-cat-tag:hover { filter: brightness(1.08); transform: translateY(-1px); }
.spd-title {
    font-size: clamp(1.3rem, 3.2vw, 1.9rem);
    font-weight: 900;
    color: var(--dj-g-900);
    line-height: 1.25;
    margin: 0 0 16px;
    letter-spacing: -.02em;
}
.spd-meta {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding-bottom: 18px; border-bottom: 1px solid var(--dj-border);
    margin-bottom: 18px;
}
.spd-stars { color: #f59e0b; font-size: .95rem; letter-spacing: 1.5px; }
.spd-stars span { color: var(--dj-g-500); font-size: .82rem; margin-left: 6px; font-weight: 500; }
.spd-stock-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: var(--dj-r-pill);
    font-size: .8rem; font-weight: 800;
}
.spd-stock-badge.in  { background: var(--dj-success-bg); color: var(--dj-success); border: 1.5px solid #bbf7d0; }
.spd-stock-badge.out { background: var(--dj-danger-bg); color: var(--dj-danger); border: 1.5px solid #fecaca; }

.spd-price-wrap {
    display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
    margin: 12px 0 20px;
    padding: 16px;
    background: linear-gradient(135deg, #fff3f1 0%, #ffe8e3 100%);
    border-radius: var(--dj-r-sm);
    border: 1px solid #ffd5cc;
}
.spd-price {
    font-size: clamp(1.8rem, 4.5vw, 2.4rem) !important;
    font-weight: 900 !important;
    color: var(--dj-g-900) !important;
    letter-spacing: -.025em;
    line-height: 1;
    background: linear-gradient(135deg, #0a0f14 0%, #2d1318 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.spd-old-price {
    font-size: 1.1rem; color: var(--dj-g-400);
    text-decoration: line-through;
    font-weight: 500;
}
.spd-disc-badge {
    background: var(--dj-primary-gradient);
    color: #fff;
    font-size: .82rem; font-weight: 800;
    padding: 6px 14px;
    border-radius: var(--dj-r-pill);
    box-shadow: var(--dj-sh-primary);
    letter-spacing: .3px;
}

.spd-specs {
    list-style: none; margin: 0 0 20px; padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}
.spd-specs li {
    padding: 10px 14px;
    background: var(--dj-g-50);
    border-radius: var(--dj-r-xs);
    border: 1px solid var(--dj-border);
    display: flex; flex-direction: column; gap: 2px;
}
.spd-specs li span {
    font-size: .68rem; color: var(--dj-g-500);
    text-transform: uppercase; letter-spacing: .6px; font-weight: 700;
}
.spd-specs li strong {
    font-size: .9rem; color: var(--dj-g-900); font-weight: 800;
}

.spd-add-form {
    display: flex; gap: 10px; align-items: center;
    flex-wrap: wrap;
    margin: 18px 0;
}
.spd-add-form input[type="number"],
.spd-qty input {
    width: 80px; height: 52px;
    border: 2px solid var(--dj-g-200); border-radius: var(--dj-r-sm);
    text-align: center;
    font-weight: 800; font-size: 1.05rem;
    background: #fff;
    font-family: var(--dj-font);
    transition: border-color var(--dj-t-fast);
}
.spd-add-form input[type="number"]:focus {
    border-color: var(--dj-primary);
    outline: none;
    box-shadow: 0 0 0 4px rgba(229,62,41,.12);
}
.spd-add-form .dj-btn,
.spd-add-form button[type="submit"],
.spd-add-form .theme-btn { flex: 1; min-width: 180px; height: 52px; }

.spd-mc-disclaimer { font-family: var(--dj-font); }

@media (max-width: 991px) {
    .spd-gallery { position: static; margin-bottom: 20px; }
    .spd-info { padding: 22px; border-radius: var(--dj-r-md); }
    .spd-main-img { padding: 18px; border-radius: var(--dj-r-md); }
}

/* ================ 12) MOBILE STICKY BUY BAR ================ */
.dj-mobile-buybar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 999;
    background: rgba(255,255,255,.98);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--dj-border);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 28px rgba(0,0,0,.10);
    display: none;
    transform: translateY(100%);
    transition: transform var(--dj-t-base);
}
.dj-mobile-buybar.is-visible {
    display: flex;
    transform: translateY(0);
    align-items: center;
    gap: 10px;
}
.dj-mobile-buybar .dmb-img {
    width: 52px; height: 52px; flex-shrink: 0;
    border-radius: var(--dj-r-xs);
    background: var(--dj-g-50);
    padding: 4px;
    object-fit: contain;
    border: 1px solid var(--dj-border);
}
.dj-mobile-buybar .dmb-info {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 3px;
}
.dj-mobile-buybar .dmb-name {
    font-size: .82rem; font-weight: 600; color: var(--dj-g-900);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.2;
}
.dj-mobile-buybar .dmb-price {
    font-size: 1.05rem; font-weight: 900;
    background: linear-gradient(135deg, #0a0f14 0%, #2d1318 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}
.dj-mobile-buybar .dmb-cta {
    flex-shrink: 0;
    height: 46px; padding: 0 20px;
    border-radius: var(--dj-r-sm);
    background: var(--dj-primary-gradient);
    color: #fff !important;
    font-weight: 800; font-size: .9rem;
    display: inline-flex; align-items: center; gap: 6px;
    box-shadow: var(--dj-sh-primary);
    text-decoration: none !important;
    border: 0;
    cursor: pointer;
    font-family: var(--dj-font);
    letter-spacing: .3px;
}
.dj-mobile-buybar .dmb-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }

body.dj-has-buybar .main-footer,
body.dj-has-buybar .spd-section { padding-bottom: 90px; }

/* ================ 13) CART - MOBILE CARDS ================ */
.cart-section { background: var(--dj-bg) !important; padding: 30px 0 60px !important; }
.cart-section .card {
    border-radius: var(--dj-r-md) !important;
    border: 0 !important;
    box-shadow: var(--dj-sh-md) !important;
    overflow: hidden;
}
.cart-section .table thead th {
    background: var(--dj-g-50) !important;
    color: var(--dj-g-700);
    font-size: .74rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .8px;
    border: 0 !important;
    padding: 16px 12px !important;
}
.cart-section .table tbody tr { border-bottom: 1px solid var(--dj-border); transition: background var(--dj-t-fast); }
.cart-section .table tbody tr:hover { background: var(--dj-g-50); }
.cart-section .table tbody tr:last-child { border-bottom: 0; }

@media (max-width: 767.98px) {
    .cart-section .table thead { display: none; }
    .cart-section .table, .cart-section .table-responsive { border: 0; }
    .cart-section .table tbody tr {
        display: block;
        padding: 16px;
        background: #fff;
        margin-bottom: 12px;
        border: 1px solid var(--dj-border) !important;
        border-radius: var(--dj-r-md);
        box-shadow: var(--dj-sh-xs);
        position: relative;
    }
    .cart-section .table tbody tr:last-child { margin-bottom: 0; }
    .cart-section .table tbody td {
        display: block !important;
        padding: 4px 0 !important;
        text-align: left !important;
        border: 0 !important;
    }
    .cart-section .table tbody td:nth-child(1) {
        padding-bottom: 12px !important;
        border-bottom: 1px solid var(--dj-border) !important;
        margin-bottom: 10px !important;
    }
    .cart-section .table tbody td:nth-child(2)::before { content: "Fiyat"; }
    .cart-section .table tbody td:nth-child(3)::before { content: "Adet"; }
    .cart-section .table tbody td:nth-child(4)::before { content: "Toplam"; }
    .cart-section .table tbody td:nth-child(2)::before,
    .cart-section .table tbody td:nth-child(3)::before,
    .cart-section .table tbody td:nth-child(4)::before {
        color: var(--dj-g-500); font-size: .78rem; font-weight: 600;
    }
    .cart-section .table tbody td:nth-child(2),
    .cart-section .table tbody td:nth-child(3),
    .cart-section .table tbody td:nth-child(4) {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 7px 0 !important;
    }
    .cart-section .table tbody td:nth-child(5) {
        padding-top: 10px !important;
        margin-top: 10px !important;
        border-top: 1px solid var(--dj-border) !important;
        text-align: right !important;
    }
    .cart-section .table tbody td .badge { font-size: .92rem !important; }
}

/* Free-shipping progress bar */
.cart-free-ship-bar {
    background: #fff;
    padding: 18px 20px;
    border-radius: var(--dj-r-md);
    border: 0;
    box-shadow: var(--dj-sh-sm);
    margin-bottom: 16px;
}
.cart-free-ship-bar .cfsb-text { margin: 0 0 12px; font-size: .95rem; color: var(--dj-g-700); font-weight: 600; }
.cart-free-ship-bar .cfsb-text strong { color: var(--dj-primary); }
.cart-free-ship-bar .cfsb-text--done { color: var(--dj-success); font-weight: 800; }
.cart-free-ship-bar .cfsb-track { position: relative; height: 10px; background: var(--dj-g-100); border-radius: var(--dj-r-pill); overflow: hidden; }
.cart-free-ship-bar .cfsb-fill  { position: absolute; left: 0; top: 0; bottom: 0; background: var(--dj-primary-gradient); border-radius: var(--dj-r-pill); transition: width var(--dj-t-slow); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.cart-free-ship-bar .cfsb-truck { position: absolute; top: -4px; color: var(--dj-primary); font-size: 16px; transition: left var(--dj-t-slow); filter: drop-shadow(0 2px 4px rgba(229,62,41,.3)); }
.cart-free-ship-bar .cfsb-labels { display: flex; justify-content: space-between; font-size: .74rem; color: var(--dj-g-500); margin-top: 8px; font-weight: 600; }

/* ================ 14) FORMS ================ */
:is(.main-site,.shop-page) .form-control,
:is(.main-site,.shop-page) .form-select {
    height: 48px;
    border: 2px solid var(--dj-g-200) !important;
    border-radius: var(--dj-r-sm) !important;
    font-size: .94rem;
    color: var(--dj-g-900);
    background: #fff;
    transition: all var(--dj-t-fast);
    font-family: var(--dj-font);
    padding: 0 16px;
}
:is(.main-site,.shop-page) .form-control:focus,
:is(.main-site,.shop-page) .form-select:focus {
    border-color: var(--dj-primary) !important;
    box-shadow: 0 0 0 4px rgba(229,62,41,.12) !important;
    outline: none;
}
:is(.main-site,.shop-page) textarea.form-control { min-height: 120px; height: auto; padding: 12px 16px; }

/* ================ 15) HEADER / MOBILE NAV ================ */
:is(.main-site,.shop-page) .main-header { background: #fff; }
:is(.main-site,.shop-page) .main-header.fixed-header .sticky-header {
    background: rgba(255,255,255,.97) !important;
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    box-shadow: var(--dj-sh-sm);
    border-bottom: 1px solid var(--dj-border);
}
:is(.main-site,.shop-page) .main-menu .navigation > li > a {
    color: var(--dj-g-800) !important;
    font-weight: 600;
    font-size: .92rem;
    transition: color var(--dj-t-fast);
}
:is(.main-site,.shop-page) .main-menu .navigation > li:hover > a,
:is(.main-site,.shop-page) .main-menu .navigation > li.current > a { color: var(--dj-primary) !important; }
:is(.main-site,.shop-page) .main-menu .navigation > li > ul {
    border-radius: var(--dj-r-md) !important;
    border: 0 !important;
    box-shadow: var(--dj-sh-xl) !important;
    padding: 8px !important;
    background: #fff;
}
:is(.main-site,.shop-page) .main-menu .navigation > li > ul > li > a {
    border-radius: var(--dj-r-xs);
    padding: 10px 14px !important;
    font-size: .88rem;
    color: var(--dj-g-700) !important;
}
:is(.main-site,.shop-page) .main-menu .navigation > li > ul > li > a:hover {
    background: var(--dj-primary-50);
    color: var(--dj-primary) !important;
}

/* Mobile hamburger / nav polish */
@media (max-width: 991.98px) {
    :is(.main-site,.shop-page) .mobile-nav-toggler {
        width: 44px !important; height: 44px !important;
        border-radius: var(--dj-r-xs) !important;
        background: var(--dj-g-100) !important;
        border: 1.5px solid var(--dj-g-200) !important;
        display: inline-flex !important;
        align-items: center !important; justify-content: center !important;
        transition: all var(--dj-t-fast);
    }
    :is(.main-site,.shop-page) .mobile-nav-toggler:active { transform: scale(.94); }
    :is(.main-site,.shop-page) .mobile-nav-toggler .icon {
        font-size: 18px !important; color: var(--dj-g-800) !important; line-height: 1 !important;
    }
    :is(.main-site,.shop-page) .main-header .logo-box .logo img { max-height: 48px !important; width: auto; }
    :is(.main-site,.shop-page) .main-header .header-lower { padding: 10px 0 !important; }
    :is(.main-site,.shop-page) .main-header .header-lower .inner-container {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 8px;
    }
}

/* Mobile menu drawer */
.mobile-menu .menu-box {
    background: #fff !important;
    padding: 24px 20px !important;
    border-radius: 0 !important;
}
.mobile-menu .nav-logo { padding: 6px 0 18px; border-bottom: 1px solid var(--dj-border); }
.mobile-menu .navigation > li { border-bottom: 1px solid var(--dj-border) !important; }
.mobile-menu .navigation > li > a {
    padding: 15px 10px !important;
    color: var(--dj-g-800) !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    transition: all var(--dj-t-fast);
}
.mobile-menu .navigation > li > a:hover {
    color: var(--dj-primary) !important;
    padding-left: 14px !important;
}
.mobile-menu .close-btn {
    background: var(--dj-ink);
    width: 40px; height: 40px; border-radius: var(--dj-r-xs);
    display: flex; align-items: center; justify-content: center;
}
.mobile-menu .close-btn .icon { color: #fff !important; font-size: 14px !important; }

/* ================ 16) FOOTER ================ */
:is(.main-site,.shop-page) .main-footer {
    background: var(--dj-ink) !important;
    color: rgba(255,255,255,.72);
}
:is(.main-site,.shop-page) .main-footer a { color: rgba(255,255,255,.78) !important; transition: color var(--dj-t-fast); }
:is(.main-site,.shop-page) .main-footer a:hover { color: var(--dj-primary) !important; }
:is(.main-site,.shop-page) .main-footer .footer-widget h3,
:is(.main-site,.shop-page) .main-footer .footer-widget h4,
:is(.main-site,.shop-page) .main-footer .footer-widget .widget-title {
    color: #fff !important;
    font-weight: 800 !important;
    font-size: 1rem !important;
    letter-spacing: .2px;
    margin-bottom: 18px !important;
    position: relative;
    padding-bottom: 10px;
}
:is(.main-site,.shop-page) .main-footer .footer-widget h3::after,
:is(.main-site,.shop-page) .main-footer .footer-widget h4::after,
:is(.main-site,.shop-page) .main-footer .footer-widget .widget-title::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 28px; height: 3px;
    background: var(--dj-primary);
    border-radius: var(--dj-r-pill);
}

/* ================ 17) TRUST STRIP ================ */
.shop-trust-strip {
    background: #fff;
    border-top: 1px solid var(--dj-border);
    border-bottom: 1px solid var(--dj-border);
    padding: 28px 0;
    box-shadow: var(--dj-sh-xs);
}
.shop-trust-strip .sts-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}
.shop-trust-strip .sts-item {
    display: flex; align-items: center; gap: 14px;
    padding: 12px;
    border-radius: var(--dj-r-sm);
    transition: all var(--dj-t-fast);
    background: var(--dj-g-50);
    border: 1px solid transparent;
}
.shop-trust-strip .sts-item:hover {
    background: var(--dj-primary-50);
    border-color: var(--dj-primary-100);
    transform: translateY(-2px);
}
.shop-trust-strip .sts-item i {
    width: 46px; height: 46px;
    background: #fff;
    color: var(--dj-primary);
    border-radius: var(--dj-r-sm);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    box-shadow: var(--dj-sh-xs);
}
.shop-trust-strip .sts-item:hover i {
    background: var(--dj-primary-gradient);
    color: #fff;
}
.shop-trust-strip .sts-item strong { display: block; font-size: .9rem; color: var(--dj-g-900); font-weight: 800; }
.shop-trust-strip .sts-item span   { display: block; font-size: .76rem; color: var(--dj-g-500); margin-top: 2px; }

@media (max-width: 991.98px) {
    .shop-trust-strip .sts-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .shop-trust-strip .sts-grid { grid-template-columns: 1fr; gap: 8px; }
    .shop-trust-strip .sts-item i { width: 38px; height: 38px; font-size: 16px; }
    .shop-trust-strip .sts-item strong { font-size: .82rem; }
    .shop-trust-strip .sts-item span { font-size: .7rem; }
}

/* ================ 18) SIDEBAR (shop-index ss-*) ================ */
.shop-sidebar .ss-block {
    background: #fff !important;
    border-radius: var(--dj-r-md) !important;
    border: 0 !important;
    box-shadow: var(--dj-sh-sm) !important;
    overflow: hidden;
}
.ss-block .ss-title {
    background: var(--dj-g-50);
    color: var(--dj-g-700) !important;
    font-size: .68rem !important;
    font-weight: 800 !important;
    letter-spacing: 1.2px !important;
    padding: 16px 18px !important;
    border-bottom: 1px solid var(--dj-border);
    margin: 0 !important;
}
.ss-cat-list li a {
    padding: 11px 13px !important;
    border-radius: var(--dj-r-xs) !important;
    font-weight: 600 !important;
    color: var(--dj-g-700) !important;
    transition: all var(--dj-t-fast);
}
.ss-cat-list li a:hover {
    background: var(--dj-primary-50) !important;
    color: var(--dj-primary) !important;
    transform: translateX(2px);
}
.ss-cat-list li a.active {
    background: var(--dj-primary-gradient) !important;
    color: #fff !important;
    box-shadow: var(--dj-sh-primary) !important;
    border-color: transparent !important;
}

/* Mobil/tablet: sol kategori sütunu gizli — üstte yatay şerit (shop-index.php) */
@media (max-width: 991.98px) {
    .shop-sidebar-col { display: none !important; }
}

/* ================ 19) UTILS + MISC ================ */
.preloader, .handle-preloader, .loader-wrap, #handle-preloader {
    display: none !important; visibility: hidden !important;
}

:is(.main-site,.shop-page) .text-primary { color: var(--dj-primary) !important; }
:is(.main-site,.shop-page) .bg-primary { background: var(--dj-primary-gradient) !important; }

/* Focus visible */
:is(.main-site,.shop-page) a:focus-visible,
:is(.main-site,.shop-page) button:focus-visible,
:is(.main-site,.shop-page) input:focus-visible,
:is(.main-site,.shop-page) select:focus-visible,
:is(.main-site,.shop-page) .dj-btn:focus-visible {
    outline: 3px solid rgba(229,62,41,.45);
    outline-offset: 2px;
}

/* ================ 20) SECTION PADDINGS ================ */
.shop-section { background: transparent !important; padding: 30px 0 50px !important; }

@media (max-width: 767.98px) {
    .shop-section { padding: 20px 0 40px !important; }
}

/* ================ 21) SHOP INDEX: kompakt hero + HB/n11 kategori şeridi ================ */
.shop-compact-hero {
    background: #fff;
    border-bottom: 1px solid var(--dj-border);
    padding: 10px 0 12px;
    box-shadow: var(--dj-sh-xs);
}
.shop-compact-hero__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 20px;
}
.shop-compact-hero__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--dj-g-900);
    letter-spacing: -0.02em;
    line-height: 1.2;
}
@media (min-width: 768px) {
    .shop-compact-hero__title { font-size: 1.22rem; }
}
.shop-compact-hero__bc {
    font-size: .8rem;
    color: var(--dj-g-500);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 6px;
    font-weight: 500;
}
.shop-compact-hero__bc a {
    color: var(--dj-g-600);
    font-weight: 600;
    text-decoration: none;
}
.shop-compact-hero__bc a:hover { color: var(--dj-primary); }
.shop-compact-hero__sep { color: var(--dj-g-300); margin: 0 2px; user-select: none; }

/* Yatay kategori şeridi (Hepsiburada / n11 benzeri) */
.shop-cat-rail-wrap {
    background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
    border-bottom: 1px solid var(--dj-border);
    padding: 8px 0 10px;
    position: relative;
    z-index: 2;
    box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.shop-cat-rail {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    padding: 4px 14px 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.shop-cat-rail::-webkit-scrollbar { display: none; height: 0; width: 0; }

.shop-cat-chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    min-width: 76px;
    max-width: 100px;
    padding: 10px 8px 8px;
    border-radius: 14px;
    background: #fff;
    border: 1.5px solid var(--dj-g-200);
    text-decoration: none !important;
    color: var(--dj-g-800);
    transition: transform var(--dj-t-fast), box-shadow var(--dj-t-fast), border-color var(--dj-t-fast);
    box-shadow: var(--dj-sh-xs);
}
.shop-cat-chip:active { transform: scale(.97); }
.shop-cat-chip:hover {
    border-color: rgba(229,62,41,.45);
    box-shadow: var(--dj-sh-sm);
}
.shop-cat-chip.active {
    border-color: transparent;
    background: var(--dj-primary-gradient);
    color: #fff;
    box-shadow: var(--dj-sh-primary);
}
.shop-cat-chip__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.shop-cat-chip__icon--all {
    background: var(--dj-g-100);
    color: var(--dj-g-700);
}
.shop-cat-chip.active .shop-cat-chip__icon--all {
    background: rgba(255,255,255,.28);
    color: #fff;
}
.shop-cat-chip.active .shop-cat-chip__icon {
    background: rgba(255,255,255,.22) !important;
    color: #fff !important;
}
.shop-cat-chip__text {
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 2.4em;
    color: inherit;
}
.shop-cat-chip.active .shop-cat-chip__text { color: #fff; }
.shop-cat-chip__count {
    font-size: 0.62rem;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: var(--dj-r-pill);
    background: var(--dj-g-100);
    color: var(--dj-g-600);
}
.shop-cat-chip.active .shop-cat-chip__count {
    background: rgba(255,255,255,.25);
    color: #fff;
}

/* Masaüstü: sol kategori sütunu ürünlerle birlikte kayar (sticky) */
@media (min-width: 992px) {
    .shop-sidebar-col .shop-sidebar {
        position: sticky;
        top: 92px;
        align-self: flex-start;
        max-height: calc(100vh - 110px);
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 4px;
    }
    .shop-sidebar-col .shop-sidebar::-webkit-scrollbar { width: 4px; }
    .shop-sidebar-col .shop-sidebar::-webkit-scrollbar-thumb {
        background: var(--dj-g-300);
        border-radius: var(--dj-r-pill);
    }
    /* Şerit sadece mobilde */
    .shop-cat-rail-wrap { display: none !important; }
}

/* Katalog bölümü: üst boşluk (hero küçüldü) */
.shop-section--catalog {
    padding-top: 20px !important;
}
@media (min-width: 992px) {
    .shop-section--catalog { padding-top: 28px !important; }
}