:root {
    --bg: #f5f7fb;
    --card: #ffffff;
    --text: #111827;
    --muted: #6b7280;
    --line: #e5e7eb;
    --primary: #1f2937;
    --primary-soft: #f3f4f6;
    --brand-red: #b91c1c;
    --brand-red-soft: #fee2e2;
    --brand-ink: #172033;
    --success-bg: #dcfce7;
    --success: #166534;
    --warn-bg: #fef3c7;
    --warn: #92400e;
    --danger-bg: #fee2e2;
    --danger: #b91c1c;
    --info-bg: #dbeafe;
    --info: #1d4ed8;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--bg);
    color: var(--text);
}
.b2b-app { min-height: 100vh; }
.b2b-main { width: 100%; }
.b2b-sidebar { background: var(--card); border-right: 1px solid var(--line); }
a { color: inherit; text-decoration: none; }
.topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 22px;
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 10px 24px rgba(15,23,42,.06);
    backdrop-filter: blur(12px);
}
.b2b-header { min-height: 72px; }
.brand { font-weight: 900; font-size: 20px; letter-spacing: -.02em; }
.brand-logo { display:flex; align-items:center; padding:0; }
.b2b-logo { flex:0 0 auto; }
.brand-logo img { width: 176px; height: 44px; object-fit: contain; display:block; }
.nav { display: flex; gap: 10px; flex-wrap: wrap; }
.nav a, .role-pill { padding: 9px 11px; border-radius: 10px; color: var(--muted); font-weight: 700; }
.nav a:hover { background: var(--primary-soft); color: var(--text); }
.role-pill { background: var(--brand-red-soft); color: var(--brand-red); }
.nav-toggle { display:none; width:auto; margin:0; padding:9px 12px; }
.container { max-width: 1180px; margin: 0 auto; padding: 24px; }
.hero, .card, .form-card, .empty-state, .search-box, .panel-card, .table-card, .b2b-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 22px; box-shadow: 0 12px 30px rgba(15,23,42,.04); }
.hero h1, h1 { margin: 0 0 8px; letter-spacing: -.03em; }
.hero p, .muted, .empty-state p, .card p { color: var(--muted); }
.dashboard-hero { display:flex; align-items:center; gap:18px; }
.dashboard-hero img { width:210px; max-width:36vw; height:auto; flex:0 0 auto; }
.grid { display: grid; gap: 16px; }
.cards { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 18px; }
.card { transition: transform .15s ease, box-shadow .15s ease; }
.card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.06); }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.page-actions { display:flex; gap:10px; flex-wrap:wrap; }
.btn, button, .btn-secondary, .btn-danger, .b2b-button { border: 0; background: var(--primary); color: #fff; padding: 12px 16px; border-radius: 10px; font-weight: 800; cursor: pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; }
.btn-secondary, .b2b-button-secondary { background: var(--primary-soft); color: var(--text); border:1px solid var(--line); }
.b2b-button-primary { background: var(--brand-red); color:#fff; }
.b2b-button-danger { background: var(--danger); color:#fff; }
.btn-danger { background: var(--danger); color:#fff; }
button { width: 100%; margin-top: 16px; }
.inline-button { width:auto; margin-top:0; }
input, select, textarea { width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; font: inherit; background: #fff; outline:none; }
input:focus, select:focus, textarea:focus { border-color:#9ca3af; box-shadow: 0 0 0 4px rgba(17,24,39,.06); }
label { display: block; font-weight: 800; margin: 14px 0 6px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 18px; }
.login-card { width: min(430px, 100%); background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 28px; box-shadow: 0 20px 50px rgba(15,23,42,.12); }
.login-logo { margin-bottom: 14px; }
.login-logo img { width: 210px; height: auto; display:block; }
.alert { padding: 12px 14px; border-radius: 12px; margin: 14px 0; font-weight:700; }
.alert.error { background: var(--danger-bg); color: var(--danger); }
.alert.success { background: var(--success-bg); color: var(--success); }
.alert.info { background: var(--info-bg); color: var(--info); }
.search-box { display: grid; grid-template-columns: 1fr 180px 120px; gap: 10px; margin: 16px 0; }
.search-box button { margin-top: 0; }
.empty-state { margin-top: 16px; text-align: center; padding: 38px 22px; }
.table-card { overflow:auto; padding:0; }
table { width:100%; border-collapse: collapse; min-width: 860px; }
th, td { padding:14px 16px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
th { font-size:13px; color:var(--muted); background:#fafafa; white-space:nowrap; }
tr:last-child td { border-bottom:0; }
.title-cell { font-weight:900; }
.subline { color:var(--muted); font-size:13px; margin-top:4px; }
.badge, .b2b-badge { display:inline-flex; align-items:center; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:900; white-space:nowrap; }
.badge.taslak { background:var(--warn-bg); color:var(--warn); }
.badge.onay { background:var(--info-bg); color:var(--info); }
.badge.cari { background:#ede9fe; color:#5b21b6; }
.badge.erp { background:var(--success-bg); color:var(--success); }
.badge.red { background:var(--danger-bg); color:var(--danger); }
.badge.default { background:var(--primary-soft); color:var(--muted); }
.b2b-badge-success { background:var(--success-bg); color:var(--success); }
.b2b-badge-warning { background:var(--warn-bg); color:var(--warn); }
.b2b-badge-danger { background:var(--danger-bg); color:var(--danger); }
.b2b-badge-info { background:var(--info-bg); color:var(--info); }
.page-head-logo { width:190px; height:auto; display:block; margin-bottom:10px; }
.admin-page-head, .order-detail-head { align-items:center; }
.detail-grid { display:grid; grid-template-columns: 1.25fr .75fr; gap:16px; align-items:start; }
.kv { display:grid; grid-template-columns: 170px 1fr; gap:10px; padding:11px 0; border-bottom:1px solid var(--line); }
.kv:last-child { border-bottom:0; }
.kv strong { color:var(--muted); }
.small-actions { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
@media (max-width: 800px) {
    .topbar { align-items: stretch; flex-direction: column; }
    .nav-toggle { display:inline-flex; align-self:flex-end; }
    .nav { display:none; width:100%; flex-direction:column; }
    .nav.open { display:flex; }
    .nav a { background: var(--primary-soft); }
    .container { padding: 16px; }
    .row, .row-3, .search-box, .detail-grid { grid-template-columns: 1fr; }
    .page-head { align-items: stretch; flex-direction: column; }
    .kv { grid-template-columns:1fr; gap:4px; }
    .dashboard-hero { align-items:flex-start; flex-direction:column; }
    .dashboard-hero img { max-width:230px; width:70%; }
}

.product-search-panel { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 18px; margin-bottom: 16px; }
.product-search-row { display:grid; grid-template-columns: 1fr 130px; gap:10px; }
.quick-hints { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.quick-hints button { width:auto; margin:0; padding:8px 12px; background:var(--primary-soft); color:var(--text); border:1px solid var(--line); border-radius:999px; }
.product-customer-strip, .b2b-customer-strip {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    margin-bottom:16px;
    border-left: 5px solid var(--brand-red);
}
.product-customer-strip h2 { margin:4px 0; letter-spacing:-.02em; }
.product-customer-actions { display:flex; gap:10px; flex-wrap:wrap; }
.product-filter-bar, .b2b-filter-bar {
    display:grid;
    grid-template-columns: repeat(5, minmax(140px, 1fr));
    gap:10px;
    margin-top:12px;
}
.product-filter-bar select:disabled {
    color:#9ca3af;
    background:#f9fafb;
}
@media (max-width:800px) {
    .product-search-row { grid-template-columns:1fr; }
    .product-customer-strip { flex-direction:column; align-items:stretch; }
    .product-customer-actions a { width:100%; }
    .product-filter-bar, .b2b-filter-bar { grid-template-columns:1fr; }
}

.product-results, .b2b-product-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap:14px; margin-top:16px; }
.loading-inline { display:inline-flex; align-items:center; gap:8px; }

/* Ürün kartı - sade */
.product-card, .b2b-product-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 14px;
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 14px;
    align-items: start;
    transition: box-shadow .15s ease, transform .15s ease;
}
.product-card:hover { box-shadow: 0 14px 34px rgba(15,23,42,.09); transform: translateY(-1px); }

.product-image-wrap, .b2b-product-image {
    width: 96px;
    height: 96px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #94a3b8;
    font-size: 11px;
    text-align: center;
    padding: 6px;
}
.product-image-wrap img { width: 100%; height: 100%; object-fit: contain; display: block; }
.product-image-wrap.no-image { background: linear-gradient(135deg, #f8fafc, #eef2f7); }

.product-card-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.product-card-heading { min-width: 0; }
.product-title {
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1.3;
    font-size: 14.5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.product-card .subline { margin-top: 2px; font-size: 12.5px; }
.product-meta-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }
.product-meta-tags span { background:var(--primary-soft); color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:4px 8px; font-size:11px; font-weight:800; }

.product-card-price-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.price-block { display: flex; flex-direction: column; line-height: 1.25; }
.price-block strong { font-size: 18px; font-weight: 900; color: #0f172a; }
.price-block small { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.price-block-empty strong { font-size: 13px; font-weight: 800; color: var(--muted); }

.stock-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 800; white-space: nowrap;
}
.stock-pill .stock-dot { width: 7px; height: 7px; border-radius: 50%; }
.stock-pill.stock-ok { background: var(--success-bg); color: var(--success); }
.stock-pill.stock-ok .stock-dot { background: var(--success); }
.stock-pill.stock-zero { background: #f1f5f9; color: var(--muted); }
.stock-pill.stock-zero .stock-dot { background: #94a3b8; }

.product-card-footer { display: flex; align-items: stretch; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 2px; min-width:0; }
.product-card-footer .badge { font-size: 11px; padding: 5px 9px; }
.product-card-footer .inline-button { flex: 1; min-width: 120px; }
.product-card .btn-disabled { opacity: .55; cursor: not-allowed; }

.alert.warn { background: var(--warn-bg); color: var(--warn); }
.alert.warn a { text-decoration: underline; font-weight: 900; margin-left: 6px; }

.cart-add-row { display: grid; grid-template-columns: 38px 64px 38px; gap: 8px; flex: 1 1 100%; min-width:0; width:100%; align-items:center; }
.cart-add-row .qty-input { width: 100%; min-width:0; padding: 10px; border-radius: 10px; border: 1px solid var(--line); text-align: center; }
.cart-add-row button { flex: 1; }
.cart-add-row .qty-mini { width:38px; height:38px; flex:0 0 38px; padding:0; margin:0; border-radius:10px; background:var(--primary-soft); color:var(--text); border:1px solid var(--line); font-size:18px; }
.cart-add-row [data-add-to-cart] { grid-column: 1 / -1; width:100%; min-height:38px; }
.empty-logo { width:180px; max-width:80%; height:auto; margin-bottom:14px; }
.b2b-empty-state { border-style:dashed; }
.b2b-sticky-cart, .b2b-mobile-cart-button {
    display:none;
    position:fixed;
    left:16px;
    right:16px;
    bottom:14px;
    z-index:90;
    text-align:center;
    background:var(--brand-red);
    color:#fff;
    border-radius:999px;
    padding:14px 18px;
    font-weight:900;
    box-shadow:0 16px 34px rgba(185,28,28,.28);
}

.cart-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 900; }

.active-customer-bar { max-width: 1180px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); }
.active-customer-bar a { font-weight: 800; color: var(--text); text-decoration: none; }
.active-customer-label { color: var(--brand-red); font-weight: 900; }
.active-customer-name { background:#fff; border:1px solid var(--line); border-radius:999px; padding:6px 10px; }
.active-cart-shortcut { margin-left:auto; background:var(--brand-red); color:#fff !important; border-radius:999px; padding:7px 11px; }
.inline-form { display: inline; margin: 0; }
.link-button { background: none; border: 0; padding: 0; color: var(--text); text-decoration: underline; font-weight: 800; cursor: pointer; }

.app-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); background: var(--text); color: #fff; padding: 12px 18px; border-radius: 12px; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 100; max-width: 90vw; text-align: center; }
.app-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.app-toast.error { background: var(--danger); }

@media (max-width: 800px) {
    .active-customer-bar { padding: 8px 16px; flex-wrap: wrap; }
    .active-cart-shortcut { margin-left:0; }
}

@media (max-width: 480px) {
    .product-card { grid-template-columns: 64px 1fr; }
    .product-image-wrap { width: 64px; height: 64px; }
    .product-card-footer { flex-direction: column; align-items: stretch; }
    .product-card-footer .inline-button { width: 100%; }
    .cart-add-row { min-width:0; width:100%; }
    .b2b-sticky-cart { display:block; }
    body { padding-bottom:70px; }
}

.cart-customer-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 18px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.cart-customer-card h2,
.cart-panel-head h2 {
    margin: 4px 0 0;
    letter-spacing: -.02em;
}
.cart-section-label {
    display: inline-flex;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.cart-customer-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
    color: var(--muted);
    font-size: 13px;
}
.cart-customer-meta span {
    background: var(--primary-soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 5px 9px;
}
.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 310px;
    gap: 16px;
    align-items: start;
}
.cart-items-panel,
.cart-summary {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
}
.cart-items-panel {
    overflow: hidden;
}
.cart-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px;
    border-bottom: 1px solid var(--line);
}
.cart-table-wrap {
    overflow: auto;
}
.cart-table {
    min-width: 900px;
}
.cart-table td {
    vertical-align: middle;
}
.cart-table tr.is-updating {
    opacity: .58;
}
.qty-control {
    display: grid;
    grid-template-columns: 36px 78px 36px;
    gap: 6px;
    align-items: center;
}
.qty-control input {
    padding: 9px 8px;
    text-align: center;
    border-radius: 10px;
}
.qty-step {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 10px;
    background: var(--primary-soft);
    color: var(--text);
    border: 1px solid var(--line);
    font-size: 18px;
    line-height: 1;
}
.row-total {
    font-weight: 900;
    white-space: nowrap;
}
.cart-summary {
    position: sticky;
    top: 86px;
    padding: 18px;
}
.summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}
.summary-row span {
    color: var(--muted);
    font-weight: 700;
}
.summary-row strong {
    white-space: nowrap;
}
.summary-row.grand {
    border-bottom: 0;
    margin-bottom: 10px;
}
.summary-row.grand span,
.summary-row.grand strong {
    color: var(--text);
    font-size: 18px;
    font-weight: 900;
}
.cart-summary .btn,
.cart-summary .btn-secondary {
    width: 100%;
    margin-top: 10px;
}
.cart-summary button:disabled {
    opacity: .62;
    cursor: not-allowed;
}
.admin-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0;
}
.admin-filter-bar .btn,
.admin-filter-bar .btn-secondary {
    width: auto;
    margin-top: 0;
    padding: 9px 12px;
    border-radius: 999px;
}
.admin-order-actions {
    margin-top: 16px;
}
.admin-action-grid {
    display: grid;
    grid-template-columns: 180px minmax(260px, 1fr);
    gap: 14px;
    align-items: start;
}
.reject-box {
    display: grid;
    gap: 8px;
}
.reject-box textarea {
    resize: vertical;
}

@media (max-width: 980px) {
    .cart-layout {
        grid-template-columns: 1fr;
    }
    .cart-summary {
        position: static;
    }
    .admin-action-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .cart-customer-card {
        align-items: stretch;
        flex-direction: column;
    }
    .cart-customer-card .inline-button {
        width: 100%;
    }
    .cart-table,
    .cart-table thead,
    .cart-table tbody,
    .cart-table tr,
    .cart-table th,
    .cart-table td {
        display: block;
        min-width: 0;
        width: 100%;
    }
    .cart-table thead {
        display: none;
    }
    .cart-table tr {
        border-bottom: 1px solid var(--line);
        padding: 14px;
    }
    .cart-table tr:last-child {
        border-bottom: 0;
    }
    .cart-table td {
        border-bottom: 0;
        padding: 8px 0;
        display: grid;
        grid-template-columns: 104px 1fr;
        gap: 10px;
        align-items: center;
    }
    .cart-table td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: 12px;
        font-weight: 900;
    }
    .qty-control {
        grid-template-columns: 40px minmax(80px, 1fr) 40px;
    }
    .cart-table [data-label="İşlem"] .inline-button {
        width: 100%;
    }
}

/* Premium tablet theme */
:root {
    --bg: #eef1f5;
    --surface: #ffffff;
    --surface-raised: rgba(255, 255, 255, .92);
    --text: #151922;
    --muted: #697281;
    --line: #d9dee7;
    --primary: #232832;
    --primary-soft: #f1f3f7;
    --brand-red: #b5121b;
    --brand-red-dark: #8f0f17;
    --brand-red-soft: #fff0f1;
    --brand-gold: #c9a45d;
    --brand-gold-soft: #fbf5e8;
    --brand-ink: #151922;
    --success-bg: #e7f6ee;
    --success: #12713f;
    --warn-bg: #fff6dc;
    --warn: #8a5a00;
    --danger-bg: #fff0f1;
    --danger: #b5121b;
    --info-bg: #edf4ff;
    --info: #245ca8;
    --shadow-soft: 0 18px 44px rgba(21, 25, 34, .08);
    --shadow-lift: 0 22px 58px rgba(21, 25, 34, .14);
    --radius: 8px;
}

html {
    min-height: 100%;
    background:
        radial-gradient(circle at 0 0, rgba(201, 164, 93, .16), transparent 34rem),
        linear-gradient(135deg, #f7f8fa 0%, #eef1f5 52%, #e9edf3 100%);
}

body {
    min-height: 100vh;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, 0) 18rem),
        transparent;
    color: var(--text);
    font-size: 15px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

.b2b-app::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(21, 25, 34, .028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(21, 25, 34, .025) 1px, transparent 1px);
    background-size: 38px 38px;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9), transparent 72%);
}

a {
    transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.topbar {
    min-height: 76px;
    padding: 12px clamp(16px, 3vw, 34px);
    background: rgba(255, 255, 255, .86);
    border-bottom: 1px solid rgba(217, 222, 231, .86);
    box-shadow: 0 12px 38px rgba(21, 25, 34, .08);
}

.brand-logo img {
    width: 188px;
    height: 46px;
}

.nav {
    align-items: center;
    gap: 6px;
}

.nav a,
.role-pill {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 10px 13px;
    font-size: 13px;
    font-weight: 850;
}

.nav a {
    color: #4b5563;
    border: 1px solid transparent;
}

.nav a:hover {
    color: var(--brand-ink);
    background: #fff;
    border-color: var(--line);
    box-shadow: 0 8px 20px rgba(21, 25, 34, .06);
}

.nav a[href$="logout.php"] {
    color: var(--brand-red);
}

.role-pill {
    color: var(--brand-red);
    background: linear-gradient(135deg, var(--brand-red-soft), #fff);
    border: 1px solid #ffd7da;
}

.nav-toggle {
    min-height: 44px;
    width: auto;
    margin: 0;
    border-radius: 999px;
    background: var(--primary);
    box-shadow: none;
}

.active-customer-bar {
    max-width: 1280px;
    margin: 12px auto 0;
    padding: 0 clamp(16px, 3vw, 34px);
    min-height: 44px;
}

.active-customer-bar::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-gold);
    box-shadow: 0 0 0 5px var(--brand-gold-soft);
}

.active-customer-name,
.active-cart-shortcut {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
}

.active-customer-name {
    background: var(--surface-raised);
    box-shadow: 0 8px 18px rgba(21, 25, 34, .06);
}

.active-cart-shortcut {
    background: linear-gradient(135deg, var(--brand-red), var(--brand-red-dark));
    box-shadow: 0 12px 24px rgba(181, 18, 27, .22);
}

.container {
    max-width: 1280px;
    padding: 26px clamp(16px, 3vw, 34px) 42px;
}

.hero,
.card,
.form-card,
.empty-state,
.search-box,
.panel-card,
.table-card,
.b2b-card,
.product-search-panel,
.cart-customer-card,
.cart-items-panel,
.cart-summary,
.login-card {
    border-radius: var(--radius);
    border: 1px solid rgba(217, 222, 231, .94);
    background: var(--surface-raised);
    box-shadow: var(--shadow-soft);
}

.hero,
.dashboard-hero {
    position: relative;
    overflow: hidden;
    min-height: 196px;
    padding: 28px;
    background:
        linear-gradient(135deg, rgba(21, 25, 34, .96), rgba(56, 45, 32, .92)),
        #151922;
    color: #fff;
}

.dashboard-hero::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 34%;
    background: linear-gradient(90deg, transparent, rgba(201, 164, 93, .2));
    pointer-events: none;
}

.dashboard-hero img {
    width: 220px;
    max-width: 34vw;
    background: #fff;
    border-radius: var(--radius);
    padding: 12px 16px;
    box-shadow: 0 20px 48px rgba(0, 0, 0, .22);
}

.hero h1,
h1 {
    letter-spacing: 0;
    font-weight: 900;
    line-height: 1.08;
}

.hero h1 {
    color: #fff;
    font-size: clamp(28px, 4vw, 46px);
}

.hero p {
    color: rgba(255, 255, 255, .78);
    max-width: 48rem;
}

.page-head {
    min-height: 64px;
    margin-bottom: 20px;
}

.page-head h1 {
    font-size: clamp(26px, 3.2vw, 38px);
}

.page-head p {
    max-width: 720px;
    margin: 8px 0 0;
}

.cards {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.card {
    min-height: 162px;
    position: relative;
    overflow: hidden;
    padding: 20px;
}

.card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--brand-red), var(--brand-gold));
    opacity: .9;
}

.card:hover,
.product-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lift);
    border-color: rgba(201, 164, 93, .55);
}

.card h2 {
    margin: 10px 0 8px;
    font-size: 21px;
    letter-spacing: 0;
}

.muted,
.empty-state p,
.card p {
    color: var(--muted);
}

.btn,
button,
.btn-secondary,
.btn-danger,
.b2b-button {
    min-height: 46px;
    border-radius: var(--radius);
    padding: 12px 16px;
    font-weight: 900;
    letter-spacing: 0;
    box-shadow: 0 10px 24px rgba(21, 25, 34, .09);
}

.btn,
.b2b-button-primary,
button[type="submit"]:not(.link-button),
#productSearchBtn {
    background: linear-gradient(135deg, var(--brand-red), var(--brand-red-dark));
}

.btn:hover,
button:hover,
.b2b-button:hover {
    transform: translateY(-1px);
}

.btn-secondary,
.b2b-button-secondary,
.qty-step,
.qty-mini {
    background: #fff;
    color: var(--brand-ink);
    border: 1px solid var(--line);
    box-shadow: 0 8px 18px rgba(21, 25, 34, .06);
}

.btn-danger,
.b2b-button-danger {
    background: linear-gradient(135deg, #c51f2b, #92111a);
}

.inline-form button,
.inline-button {
    width: auto;
}

.link-button {
    min-height: 0;
    margin: 0;
    box-shadow: none;
    color: var(--brand-red);
}

input,
select,
textarea {
    min-height: 48px;
    border-radius: var(--radius);
    border-color: #d3dae5;
    background: rgba(255, 255, 255, .98);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--brand-gold);
    box-shadow: 0 0 0 4px rgba(201, 164, 93, .16);
}

label,
.cart-section-label {
    letter-spacing: 0;
}

.search-box,
.product-search-panel {
    padding: 18px;
}

.search-box {
    grid-template-columns: minmax(0, 1fr) 210px 132px;
}

.product-search-row {
    grid-template-columns: minmax(0, 1fr) 132px;
}

#productSearch {
    min-height: 58px;
    font-size: 18px;
    font-weight: 750;
}

.quick-hints button {
    min-height: 36px;
    border-radius: 999px;
    box-shadow: none;
}

.product-filter-bar,
.b2b-filter-bar {
    grid-template-columns: repeat(5, minmax(132px, 1fr));
}

.product-customer-strip,
.b2b-customer-strip {
    border-left: 0;
    border-top: 4px solid var(--brand-red);
}

.product-results,
.b2b-product-grid {
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 16px;
}

.product-card,
.b2b-product-card {
    border-radius: var(--radius);
    padding: 14px;
    grid-template-columns: 112px minmax(0, 1fr);
    background: rgba(255, 255, 255, .95);
}

.product-image-wrap,
.b2b-product-image {
    width: 112px;
    height: 112px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, #f9fafb, #eef2f7);
}

.product-title {
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 0;
}

.product-meta-tags span,
.cart-customer-meta span {
    border-radius: 999px;
    background: #f7f8fb;
}

.price-block strong {
    color: var(--brand-red);
    font-size: 21px;
}

.stock-pill {
    min-height: 32px;
    border-radius: 999px;
}

.cart-add-row {
    grid-template-columns: 44px 76px 44px;
}

.cart-add-row .qty-mini,
.qty-step {
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
}

.cart-add-row .qty-input {
    min-height: 44px;
}

.badge,
.b2b-badge {
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .55);
}

.table-card {
    overflow: hidden;
}

table {
    min-width: 920px;
}

th {
    background: #f4f6fa;
    color: #586272;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .02em;
}

td {
    background: rgba(255, 255, 255, .74);
}

tbody tr:hover td {
    background: #fff;
}

.title-cell {
    font-weight: 900;
    letter-spacing: 0;
}

.cart-layout {
    grid-template-columns: minmax(0, 1fr) 340px;
}

.cart-summary {
    top: 96px;
}

.summary-row.grand {
    padding: 18px 0;
    border-top: 1px solid var(--line);
}

.summary-row.grand strong {
    color: var(--brand-red);
    font-size: 24px;
}

.qty-control {
    grid-template-columns: 44px 88px 44px;
}

.qty-control input {
    min-height: 44px;
}

.empty-state {
    padding: 42px 24px;
}

.empty-logo {
    width: 170px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px;
}

.alert {
    border-radius: var(--radius);
    border: 1px solid transparent;
}

.alert.success {
    border-color: #bde8cf;
}

.alert.info {
    border-color: #cfe0fa;
}

.alert.warn {
    border-color: #f2dda1;
}

.alert.error {
    border-color: #ffc8cd;
}

.login-page {
    background:
        radial-gradient(circle at 20% 12%, rgba(201, 164, 93, .22), transparent 28rem),
        linear-gradient(135deg, #181c24, #32333a 54%, #8f0f17);
}

.login-card {
    width: min(460px, 100%);
    padding: 30px;
}

.login-logo img {
    width: 220px;
}

.login-card h1 {
    font-size: 32px;
}

@media (hover: none) and (pointer: coarse) {
    .nav a,
    .role-pill,
    .btn,
    button,
    .btn-secondary,
    .btn-danger,
    input,
    select,
    textarea {
        min-height: 48px;
    }

    .card:hover,
    .product-card:hover,
    .btn:hover,
    button:hover {
        transform: none;
    }
}

@media (max-width: 1024px) {
    .topbar {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .nav-toggle {
        display: inline-flex;
        position: absolute;
        right: clamp(16px, 3vw, 34px);
        top: 16px;
    }

    .nav {
        display: none;
        width: 100%;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .nav.open {
        display: grid;
    }

    .nav a,
    .role-pill {
        width: 100%;
        background: #fff;
        border: 1px solid var(--line);
    }

    .search-box {
        grid-template-columns: minmax(0, 1fr) 180px 120px;
    }

    .product-filter-bar,
    .b2b-filter-bar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cart-layout {
        grid-template-columns: 1fr;
    }

    .cart-summary {
        position: static;
    }
}

@media (max-width: 800px) {
    .topbar {
        align-items: flex-start;
    }

    .container {
        padding-top: 18px;
    }

    .active-customer-bar {
        flex-wrap: wrap;
        align-items: center;
    }

    .active-cart-shortcut {
        margin-left: 0;
    }

    .dashboard-hero {
        min-height: 0;
        padding: 22px;
    }

    .dashboard-hero img {
        max-width: 260px;
        width: 70%;
    }

    .page-head {
        align-items: stretch;
    }

    .page-actions,
    .product-customer-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .page-actions .btn,
    .page-actions .btn-secondary,
    .product-customer-actions .btn,
    .product-customer-actions .btn-secondary {
        width: 100%;
    }

    .row,
    .row-3,
    .search-box,
    .product-search-row,
    .detail-grid {
        grid-template-columns: 1fr;
    }

    .product-filter-bar,
    .b2b-filter-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .product-results,
    .b2b-product-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .table-card {
        overflow: visible;
        background: transparent;
        border: 0;
        box-shadow: none;
        padding: 0;
    }

    .table-card table,
    .table-card thead,
    .table-card tbody,
    .table-card tr,
    .table-card th,
    .table-card td {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .table-card thead {
        display: none;
    }

    .table-card tr {
        margin-bottom: 12px;
        border: 1px solid var(--line);
        border-radius: var(--radius);
        overflow: hidden;
        box-shadow: var(--shadow-soft);
        background: #fff;
    }

    .table-card td {
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
        gap: 12px;
        border-bottom: 1px solid var(--line);
        padding: 12px 14px;
    }

    .table-card td:last-child {
        border-bottom: 0;
    }

    .table-card td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: 12px;
        font-weight: 900;
    }

}

@media (max-width: 560px) {
    .brand-logo img {
        width: 164px;
    }

    .nav {
        grid-template-columns: 1fr 1fr;
    }

    .page-actions,
    .product-customer-actions,
    .product-filter-bar,
    .b2b-filter-bar {
        grid-template-columns: 1fr;
    }

    .product-card {
        grid-template-columns: 88px minmax(0, 1fr);
    }

    .product-image-wrap {
        width: 88px;
        height: 88px;
    }

    .cart-add-row {
        grid-template-columns: 46px minmax(70px, 1fr) 46px;
    }

    .cart-add-row [data-add-to-cart] {
        min-height: 46px;
    }

    .b2b-sticky-cart,
    .b2b-mobile-cart-button {
        display: block;
        border-radius: var(--radius);
        background: linear-gradient(135deg, var(--brand-red), var(--brand-red-dark));
    }
}

/* v0-style corporate B2B console */
:root {
    --bg: #f8fafc;
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --card: #ffffff;
    --text: #0f172a;
    --muted: #64748b;
    --line: #e2e8f0;
    --primary: #0f172a;
    --primary-soft: #f1f5f9;
    --brand-red: #b91c1c;
    --brand-red-dark: #991b1b;
    --brand-red-soft: #fef2f2;
    --brand-green: #16a34a;
    --brand-green-soft: #f0fdf4;
    --brand-blue: #2563eb;
    --brand-blue-soft: #eff6ff;
    --brand-amber: #d97706;
    --brand-amber-soft: #fffbeb;
    --success-bg: #f0fdf4;
    --success: #15803d;
    --warn-bg: #fffbeb;
    --warn: #b45309;
    --danger-bg: #fef2f2;
    --danger: #b91c1c;
    --info-bg: #eff6ff;
    --info: #1d4ed8;
    --shadow-soft: 0 1px 2px rgba(15, 23, 42, .04);
    --shadow-lift: 0 12px 28px rgba(15, 23, 42, .08);
    --radius: 8px;
}

html,
body {
    background: var(--bg);
}

html {
    background-image: none;
}

body {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text);
    font-size: 14px;
}

.b2b-app::before {
    display: none;
}

.b2b-app {
    min-height: 100vh;
}

@media (min-width: 1025px) {
    .topbar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 30;
        width: 264px;
        min-height: 100vh;
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 18px;
        padding: 18px 14px;
        background: #fff;
        border-right: 1px solid var(--line);
        border-bottom: 0;
        box-shadow: none;
        backdrop-filter: none;
    }

    .brand-logo {
        min-height: 52px;
        padding: 0 10px 14px;
        border-bottom: 1px solid var(--line);
    }

    .brand-logo img {
        width: 178px;
        height: 44px;
    }

    .nav {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        width: 100%;
    }

    .nav a,
    .role-pill {
        width: 100%;
        min-height: 42px;
        justify-content: flex-start;
        border-radius: 8px;
        padding: 10px 12px;
        color: #475569;
        border: 1px solid transparent;
        background: transparent;
        box-shadow: none;
        font-size: 14px;
        font-weight: 650;
    }

    .nav a:hover {
        color: var(--text);
        background: var(--primary-soft);
        border-color: transparent;
        box-shadow: none;
        transform: none;
    }

    .nav a[href$="logout.php"] {
        margin-top: 8px;
        color: var(--danger);
    }

    .role-pill {
        margin-top: 8px;
        color: #166534;
        background: var(--brand-green-soft);
        border-color: #bbf7d0;
    }

    .active-customer-bar,
    .container {
        margin-left: 264px;
    }

    .active-customer-bar {
        position: sticky;
        top: 0;
        z-index: 20;
        max-width: none;
        min-height: 58px;
        padding: 10px 28px;
        background: rgba(248, 250, 252, .86);
        border-bottom: 1px solid var(--line);
        backdrop-filter: blur(10px);
    }

    .container {
        max-width: none;
        padding: 26px 28px 44px;
    }
}

.active-customer-bar::before {
    width: 8px;
    height: 8px;
    background: var(--brand-green);
    box-shadow: none;
}

.active-customer-label {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.active-customer-name {
    min-height: 34px;
    color: var(--text);
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: none;
}

.active-cart-shortcut {
    min-height: 34px;
    color: #fff !important;
    background: var(--primary);
    box-shadow: none;
}

.hero,
.dashboard-hero,
.card,
.form-card,
.empty-state,
.search-box,
.panel-card,
.table-card,
.b2b-card,
.product-search-panel,
.cart-customer-card,
.cart-items-panel,
.cart-summary,
.login-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-soft);
}

.hero,
.dashboard-hero {
    min-height: 0;
    padding: 0 0 16px;
    color: var(--text);
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
}

.dashboard-hero::after {
    display: none;
}

.dashboard-hero img {
    display: none;
}

.hero h1,
.page-head h1,
h1 {
    color: var(--text);
    font-size: 28px;
    line-height: 1.16;
    letter-spacing: 0;
    font-weight: 750;
}

.hero p,
.page-head p,
.muted {
    color: var(--muted);
}

.page-head {
    align-items: center;
    min-height: 52px;
    margin-bottom: 18px;
    padding-bottom: 0;
}

.page-head h1 {
    margin-bottom: 4px;
}

.cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.card {
    min-height: 136px;
    padding: 18px;
}

.card::before {
    display: none;
}

.card:hover,
.product-card:hover {
    border-color: #cbd5e1;
    box-shadow: var(--shadow-lift);
    transform: translateY(-1px);
}

.card h2 {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 700;
}

.card p {
    min-height: 38px;
    margin: 0 0 14px;
    font-size: 13px;
}

.badge,
.b2b-badge {
    min-height: 24px;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 700;
}

.badge.default {
    background: #f8fafc;
    color: #475569;
    border-color: var(--line);
}

.badge.onay,
.b2b-badge-info {
    background: var(--brand-blue-soft);
    color: var(--info);
    border-color: #bfdbfe;
}

.badge.cari {
    background: var(--brand-amber-soft);
    color: var(--warn);
    border-color: #fde68a;
}

.badge.erp,
.b2b-badge-success {
    background: var(--success-bg);
    color: var(--success);
    border-color: #bbf7d0;
}

.badge.red,
.b2b-badge-danger {
    background: var(--danger-bg);
    color: var(--danger);
    border-color: #fecaca;
}

.btn,
button,
.btn-secondary,
.btn-danger,
.b2b-button {
    min-height: 40px;
    border-radius: 8px;
    padding: 9px 13px;
    box-shadow: none;
    font-size: 14px;
    font-weight: 650;
}

.btn,
.b2b-button-primary,
button[type="submit"]:not(.link-button),
#productSearchBtn {
    color: #fff;
    background: var(--primary);
}

.btn:hover,
button:hover,
.b2b-button:hover {
    transform: none;
    box-shadow: none;
}

.btn-secondary,
.b2b-button-secondary,
.qty-step,
.qty-mini {
    color: var(--text);
    background: #fff;
    border: 1px solid var(--line);
}

.btn-danger,
.b2b-button-danger {
    color: #fff;
    background: var(--danger);
}

input,
select,
textarea {
    min-height: 40px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #fff;
    font-size: 14px;
}

input:focus,
select:focus,
textarea:focus {
    border-color: #94a3b8;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, .2);
}

label,
.cart-section-label {
    color: #334155;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
}

.search-box,
.product-search-panel {
    padding: 14px;
}

.search-box {
    grid-template-columns: minmax(0, 1fr) 190px 104px;
}

.product-search-row {
    grid-template-columns: minmax(0, 1fr) 104px;
}

#productSearch {
    min-height: 44px;
    font-size: 15px;
    font-weight: 500;
}

.quick-hints {
    margin-top: 12px;
}

.quick-hints button {
    min-height: 32px;
    border: 1px solid var(--line);
    background: #fff;
    color: #475569;
    font-weight: 600;
}

.product-filter-bar,
.b2b-filter-bar {
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    margin-top: 12px;
}

.product-customer-strip,
.b2b-customer-strip {
    border-top: 0;
    border-left: 4px solid var(--brand-green);
}

.product-customer-strip h2,
.cart-customer-card h2,
.cart-panel-head h2 {
    font-size: 18px;
    font-weight: 750;
}

.product-results,
.b2b-product-grid {
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 14px;
}

.product-card,
.b2b-product-card {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 14px;
    padding: 14px;
    border-radius: 8px;
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: var(--shadow-soft);
}

.product-image-wrap,
.b2b-product-image {
    width: 92px;
    height: 92px;
    border-radius: 8px;
    background: #f8fafc;
}

.product-title {
    font-size: 14px;
    line-height: 1.35;
    font-weight: 750;
}

.product-card .subline,
.subline {
    color: var(--muted);
    font-size: 12px;
}

.product-meta-tags span,
.cart-customer-meta span {
    border: 1px solid var(--line);
    background: #f8fafc;
    color: #475569;
    font-weight: 600;
}

.price-block strong {
    color: var(--text);
    font-size: 20px;
    font-weight: 800;
}

.price-block small {
    color: var(--muted);
}

.stock-pill {
    min-height: 28px;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 700;
}

.cart-add-row {
    grid-template-columns: 38px 70px 38px;
}

.cart-add-row .qty-mini,
.qty-step {
    width: 38px;
    height: 38px;
}

.cart-add-row .qty-input {
    min-height: 38px;
}

.table-card {
    overflow: auto;
}

table {
    min-width: 920px;
}

th,
td {
    padding: 12px 14px;
}

th {
    color: #64748b;
    background: #f8fafc;
    font-size: 12px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}

td {
    background: #fff;
}

tbody tr:hover td {
    background: #f8fafc;
}

.title-cell {
    font-weight: 700;
}

.cart-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 14px;
}

.cart-summary {
    top: 76px;
    padding: 16px;
}

.summary-row {
    padding: 10px 0;
}

.summary-row.grand {
    padding: 14px 0 10px;
    border-top: 1px solid var(--line);
}

.summary-row.grand strong {
    color: var(--text);
    font-size: 22px;
}

.qty-control {
    grid-template-columns: 38px 80px 38px;
}

.qty-control input {
    min-height: 38px;
}

.alert {
    border-radius: 8px;
    font-weight: 600;
}

.empty-state {
    padding: 34px 20px;
}

.empty-logo {
    display: none;
}

.login-page {
    background: #f8fafc;
}

.login-card {
    border: 1px solid var(--line);
    box-shadow: 0 20px 48px rgba(15, 23, 42, .08);
}

.login-logo img {
    width: 190px;
}

.login-card h1 {
    font-size: 26px;
}

.b2b-sticky-cart,
.b2b-mobile-cart-button {
    background: var(--primary);
    border-radius: 8px;
    box-shadow: 0 16px 28px rgba(15, 23, 42, .18);
}

@media (max-width: 1200px) and (min-width: 1025px) {
    .cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .product-results,
    .b2b-product-grid {
        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    }
}

@media (max-width: 1024px) {
    .topbar {
        position: sticky;
        top: 0;
        min-height: 68px;
        padding: 12px 16px;
        background: rgba(255, 255, 255, .94);
        border-bottom: 1px solid var(--line);
        box-shadow: none;
    }

    .brand-logo {
        border-bottom: 0;
        padding: 0;
    }

    .nav-toggle {
        background: var(--primary);
    }

    .nav.open {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .nav a,
    .role-pill {
        justify-content: center;
        border-radius: 8px;
        color: #475569;
        background: #fff;
        border: 1px solid var(--line);
        box-shadow: none;
    }

    .active-customer-bar {
        max-width: none;
        margin-top: 0;
        padding: 8px 16px;
        background: #f8fafc;
        border-bottom: 1px solid var(--line);
    }

    .container {
        max-width: none;
        padding: 18px 16px 34px;
    }

    .cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .product-filter-bar,
    .b2b-filter-bar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cart-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .hero h1,
    .page-head h1,
    h1 {
        font-size: 24px;
    }

    .cards,
    .page-actions,
    .product-customer-actions,
    .product-filter-bar,
    .b2b-filter-bar,
    .search-box,
    .product-search-row {
        grid-template-columns: 1fr;
    }

    .nav.open {
        grid-template-columns: 1fr 1fr;
    }

    .product-results,
    .b2b-product-grid {
        grid-template-columns: 1fr;
    }

    .table-card {
        overflow: visible;
    }

    .table-card tr {
        box-shadow: var(--shadow-soft);
    }

    .table-card td {
        grid-template-columns: 104px minmax(0, 1fr);
    }
}

@media (max-width: 520px) {
    .product-card {
        grid-template-columns: 72px minmax(0, 1fr);
    }

    .product-image-wrap {
        width: 72px;
        height: 72px;
    }

    .product-card-price-row {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* B2B flow and catalogue refinements */
.workflow-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 18px;
}

.workflow-step {
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: var(--shadow-soft);
}

.workflow-step strong,
.workflow-step span {
    display: block;
}

.workflow-step strong {
    margin-bottom: 4px;
    color: var(--text);
    font-weight: 750;
}

.workflow-step span {
    color: var(--muted);
    font-size: 13px;
}

.workflow-step.is-active {
    border-color: #bfdbfe;
    background: var(--brand-blue-soft);
}

.dashboard-workflow {
    margin-top: -2px;
}

.admin-commercial-grid {
    display: grid;
    grid-template-columns: 180px minmax(220px, 1fr) auto;
    gap: 12px;
    align-items: end;
    margin-bottom: 12px;
}

.admin-commercial-grid label {
    margin-top: 0;
}

.product-results,
.b2b-product-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(520px, 100%), 1fr));
}

.product-card,
.b2b-product-card {
    grid-template-columns: 168px minmax(0, 1fr);
    min-height: 212px;
    gap: 18px;
}

.product-image-wrap,
.b2b-product-image {
    width: 168px;
    height: 168px;
    align-self: stretch;
}

.product-image-wrap img {
    object-fit: contain;
    padding: 4px;
}

.product-card-body {
    justify-content: space-between;
}

.product-title {
    font-size: 16px;
    -webkit-line-clamp: 3;
}

.price-block strong {
    font-size: 23px;
}

.product-card-footer {
    gap: 10px;
}

.cart-add-row {
    grid-template-columns: 42px 82px 42px;
}

.cart-add-row .qty-mini,
.qty-step {
    width: 42px;
    height: 42px;
}

@media (max-width: 1024px) {
    .product-card,
    .b2b-product-card {
        grid-template-columns: 148px minmax(0, 1fr);
    }

    .product-image-wrap,
    .b2b-product-image {
        width: 148px;
        height: 148px;
    }

    .admin-commercial-grid {
        grid-template-columns: 1fr 1fr;
    }

    .admin-commercial-grid button {
        grid-column: 1 / -1;
        width: 100%;
    }
}

@media (max-width: 800px) {
    .workflow-strip {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .product-card,
    .b2b-product-card {
        grid-template-columns: 124px minmax(0, 1fr);
        min-height: 0;
    }

    .product-image-wrap,
    .b2b-product-image {
        width: 124px;
        height: 124px;
    }

    .product-title {
        font-size: 14px;
    }

    .admin-commercial-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 430px) {
    .product-card,
    .b2b-product-card {
        grid-template-columns: 1fr;
    }

    .product-image-wrap,
    .b2b-product-image {
        width: 100%;
        height: 210px;
    }
}

/* Stability pass: prevent horizontal drift and keep every page inside the viewport. */
html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.b2b-app,
.b2b-main,
.container,
.active-customer-bar,
.page-head,
.hero,
.card,
.form-card,
.empty-state,
.search-box,
.panel-card,
.table-card,
.b2b-card,
.product-search-panel,
.product-customer-strip,
.cart-customer-card,
.cart-layout,
.cart-items-panel,
.cart-summary,
.product-results,
.b2b-product-grid {
    min-width: 0;
    max-width: 100%;
}

.container {
    overflow: visible;
}

.page-head,
.page-actions,
.product-customer-strip,
.cart-customer-card,
.cart-panel-head,
.small-actions,
.nav,
.active-customer-bar {
    min-width: 0;
}

.page-head > *,
.product-customer-strip > *,
.cart-customer-card > *,
.cart-panel-head > *,
.active-customer-bar > * {
    min-width: 0;
}

h1,
h2,
p,
.muted,
.title-cell,
.subline,
.product-title,
.active-customer-name {
    overflow-wrap: anywhere;
}

.search-box,
.product-search-row,
.product-filter-bar,
.b2b-filter-bar,
.cart-layout,
.cards,
.row,
.row-3,
.detail-grid {
    width: 100%;
    min-width: 0;
}

.product-filter-bar,
.b2b-filter-bar {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.product-results,
.b2b-product-grid {
    width: 100%;
    grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
}

.product-card,
.b2b-product-card,
.product-card-body,
.product-card-heading,
.product-card-footer,
.cart-add-row,
.qty-control {
    min-width: 0;
}

.product-card {
    max-width: 100%;
}

.table-card {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.table-card table,
.cart-table {
    width: 100%;
    max-width: 100%;
}

img,
svg {
    max-width: 100%;
}

@media (min-width: 1025px) {
    .topbar {
        left: 0;
        right: auto;
        flex: 0 0 264px;
    }

    .active-customer-bar,
    .container {
        width: calc(100% - 264px);
        max-width: calc(100% - 264px);
        margin-left: 264px;
        margin-right: 0;
    }

    .active-customer-bar {
        box-sizing: border-box;
    }
}

@media (max-width: 1024px) {
    .active-customer-bar,
    .container {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .product-filter-bar,
    .b2b-filter-bar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .page-head,
    .product-customer-strip,
    .cart-customer-card,
    .cart-panel-head {
        align-items: stretch;
        flex-direction: column;
    }

    .page-actions,
    .product-customer-actions,
    .search-box,
    .product-search-row,
    .product-filter-bar,
    .b2b-filter-bar,
    .cart-layout,
    .row,
    .row-3,
    .detail-grid {
        grid-template-columns: 1fr;
    }

    .page-actions .btn,
    .page-actions .btn-secondary,
    .product-customer-actions .btn,
    .product-customer-actions .btn-secondary,
    .small-actions .btn,
    .small-actions .btn-secondary {
        width: 100%;
    }
}

@media (max-width: 760px) {
    .table-card {
        overflow: visible;
    }

    .table-card table,
    .table-card tbody,
    .table-card tr,
    .table-card td {
        max-width: 100%;
    }
}

@media (max-width: 520px) {
    .product-card,
    .b2b-product-card {
        grid-template-columns: 76px minmax(0, 1fr);
    }

    .product-image-wrap,
    .b2b-product-image {
        width: 76px;
        height: 76px;
    }

    .cart-add-row {
        grid-template-columns: 42px minmax(64px, 1fr) 42px;
    }
}

/* Final catalogue image sizing overrides after stability rules. */
.product-results,
.b2b-product-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(520px, 100%), 1fr));
}

.product-card,
.b2b-product-card {
    grid-template-columns: 168px minmax(0, 1fr);
    min-height: 212px;
}

.product-image-wrap,
.b2b-product-image {
    width: 168px;
    height: 168px;
}

@media (max-width: 1024px) {
    .product-card,
    .b2b-product-card {
        grid-template-columns: 148px minmax(0, 1fr);
    }

    .product-image-wrap,
    .b2b-product-image {
        width: 148px;
        height: 148px;
    }
}

@media (max-width: 620px) {
    .product-card,
    .b2b-product-card {
        grid-template-columns: 124px minmax(0, 1fr);
        min-height: 0;
    }

    .product-image-wrap,
    .b2b-product-image {
        width: 124px;
        height: 124px;
    }
}

@media (max-width: 430px) {
    .product-card,
    .b2b-product-card {
        grid-template-columns: 1fr;
    }

    .product-image-wrap,
    .b2b-product-image {
        width: 100%;
        height: 210px;
    }
}

/* B2B ürün kartı ve detay sayfası - 2026-07 */
.b2b-product-card{border:1px solid #ef3e36;border-radius:12px;background:#fff;overflow:hidden;min-height:0!important;display:block!important}
.b2b-product-card .product-card-shell{display:flex;flex-direction:column;height:100%}
.b2b-product-card .product-card-media{height:155px;display:flex;align-items:center;justify-content:center;position:relative;padding:12px}
.b2b-product-card .product-card-media img{max-width:100%;max-height:100%;object-fit:contain}
.b2b-product-card .product-card-body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:8px;flex:1}
.product-brand-line{font-size:12px;font-weight:800;color:#4b5563;text-align:center}
.product-title-link{font-size:13px;line-height:1.25;color:#0783ff;text-align:center;text-decoration:none;display:block;min-height:48px}
.product-code-line{font-size:11px;color:#64748b;text-align:center}
.product-stock-line{font-size:12px;font-weight:800;color:#eab308;text-align:center}
.product-price-stack{border-top:1px solid #eef2f7;padding-top:7px;display:grid;gap:5px}
.product-price-stack small{display:block;font-size:10px;color:#64748b;font-weight:700}
.product-price-stack strong{font-size:14px;color:#1f2937}
.pack-info{font-size:11px;font-weight:800;color:#ef3e36;text-align:right;min-height:16px}
.product-detail-page{max-width:1180px;margin:0 auto;padding:24px}.detail-back{display:inline-block;margin-bottom:16px}.product-detail-grid{display:grid;grid-template-columns:minmax(280px,42%) 1fr;gap:34px;background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:24px}.product-detail-image{min-height:360px;display:flex;align-items:center;justify-content:center;background:#f8fafc;border-radius:14px}.product-detail-image img{max-width:90%;max-height:340px;object-fit:contain}.detail-brand{font-weight:800;color:#ef3e36}.product-detail-copy h1{font-size:28px;line-height:1.2}.detail-code{color:#64748b}.detail-stock{margin:18px 0;font-weight:800}.detail-stock.in{color:#16a34a}.detail-stock.out{color:#dc2626}.detail-price-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}.detail-price-list>div{padding:14px;background:#f8fafc;border-radius:10px}.detail-price-list small,.detail-price-list strong{display:block}.detail-units{margin-top:18px}.detail-units span{display:inline-block;margin:0 8px 8px 0;padding:8px 12px;border:1px solid #dbe3ec;border-radius:999px}.detail-note{margin-top:18px;padding:12px;background:#fff7ed;border-radius:10px}
@media(max-width:720px){.product-detail-grid{grid-template-columns:1fr;padding:14px}.product-detail-image{min-height:260px}.detail-price-list{grid-template-columns:1fr}}


/* Teklif onay / revizyon akışı */
.revision-box{display:flex;flex-direction:column;gap:10px;min-width:260px}
.revision-box textarea{width:100%;min-height:84px;padding:12px;border:1px solid #d8e0ea;border-radius:10px;resize:vertical;font:inherit}
.revision-sales-alert{margin:16px 0;border-left:4px solid #f59e0b;background:#fff8e6}
.offer-history-card{overflow:hidden}
.offer-timeline{display:flex;flex-direction:column;gap:0;margin-top:10px}
.offer-timeline-item{position:relative;display:grid;grid-template-columns:18px 1fr;gap:10px;padding:0 0 20px}
.offer-timeline-item:not(:last-child)::before{content:"";position:absolute;left:6px;top:12px;bottom:0;width:2px;background:#dfe7f0}
.offer-timeline-dot{position:relative;z-index:1;width:14px;height:14px;margin-top:3px;border:3px solid #fff;border-radius:50%;background:#1d6fe8;box-shadow:0 0 0 1px #b9c9df}
.offer-timeline-item strong,.offer-timeline-item small{display:block}
.offer-timeline-item strong{color:#15233b;font-size:14px}
.offer-timeline-item small{margin-top:4px;color:#768399;font-size:12px}
@media(max-width:760px){.revision-box{min-width:0;width:100%}.admin-action-grid{grid-template-columns:1fr}}

/* Tüm ürünler katalog sayfası */
.all-products-entry{margin:34px 0 90px}.all-products-entry-card{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:28px 30px;border:1px solid var(--border,#dfe5ec);border-radius:22px;background:linear-gradient(135deg,#fff,#f7f9fc);box-shadow:0 14px 34px rgba(20,35,60,.07)}.all-products-entry-card h2{margin:4px 0 8px;font-size:clamp(22px,2.3vw,34px)}.all-products-entry-card p{margin:0;max-width:720px;color:var(--muted,#667085)}.all-products-entry-button{white-space:nowrap;min-height:48px;display:inline-flex;align-items:center;gap:10px}.all-products-page{padding-bottom:100px}.all-products-heading{margin-bottom:20px}.all-products-heading h1{margin:4px 0 6px;font-size:clamp(26px,3vw,42px)}.all-products-heading p{margin:0;color:var(--muted,#667085)}.all-products-toolbar{position:sticky;top:0;z-index:15;display:grid;grid-template-columns:minmax(280px,1fr) minmax(170px,230px) minmax(150px,190px);gap:12px;padding:14px;margin:0 0 22px;border:1px solid var(--border,#dfe5ec);border-radius:18px;background:rgba(255,255,255,.96);box-shadow:0 10px 25px rgba(20,35,60,.07);backdrop-filter:blur(12px)}.all-products-toolbar select{min-height:46px;border:1px solid var(--border,#dfe5ec);border-radius:12px;padding:0 12px;background:#fff}.all-products-groups{display:flex;flex-direction:column;gap:30px}.all-products-brand-section{scroll-margin-top:100px}.all-products-brand-title{display:flex;align-items:end;justify-content:space-between;gap:16px;margin:0 0 12px;padding-bottom:10px;border-bottom:2px solid #eef1f5}.all-products-brand-title h2{margin:0;font-size:24px}.all-products-brand-title span{color:var(--muted,#667085);font-size:13px}.all-products-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;overflow:visible!important}.all-products-grid .product-card{min-width:0!important;width:100%!important}.all-products-sentinel{height:2px}.all-products-topbar{margin-bottom:18px}
@media(max-width:760px){.all-products-entry-card{align-items:flex-start;flex-direction:column;padding:22px}.all-products-entry-button{width:100%;justify-content:center}.all-products-toolbar{position:relative;grid-template-columns:1fr}.all-products-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.all-products-brand-title h2{font-size:20px}}
@media(max-width:460px){.all-products-grid{grid-template-columns:1fr}}

/* Tüm ürünler kartlarını vitrin kartlarıyla görsel olarak eşleştir */
.all-products-page{background:#fff;}
.all-products-groups{gap:26px;}
.all-products-grid{gap:18px;}
.all-products-grid .product-card{background:#fff !important;border:1px solid #dfe5ec !important;border-radius:22px !important;padding:16px !important;box-shadow:0 12px 30px rgba(20,35,60,.06) !important;display:flex !important;flex-direction:column !important;gap:12px !important;align-items:stretch !important;}
.all-products-grid .product-card:hover{box-shadow:0 16px 34px rgba(20,35,60,.1) !important;transform:translateY(-2px);}
.all-products-grid .product-image-wrap{width:100% !important;height:178px !important;border-radius:16px !important;background:#fff !important;border:1px solid #dfe5ec !important;padding:14px !important;display:flex !important;align-items:center !important;justify-content:center !important;margin:0 !important;}
.all-products-grid .product-image-wrap img{max-width:100% !important;max-height:100% !important;object-fit:contain !important;}
.all-products-grid .product-card-body{gap:8px !important;align-items:stretch !important;text-align:center !important;}
.all-products-grid .product-card-heading,.all-products-grid .product-title,.all-products-grid .subline,.all-products-grid .product-meta-tags,.all-products-grid .product-card-price-row,.all-products-grid .product-card-footer{width:100%;}
.all-products-grid .product-title{font-size:13.5px !important;line-height:1.35 !important;min-height:36px;font-weight:700 !important;text-align:center !important;}
.all-products-grid .subline{text-align:center !important;}
.all-products-grid .product-meta-tags{justify-content:center !important;}
.all-products-grid .product-card-price-row{flex-direction:column !important;align-items:flex-start !important;gap:6px !important;padding-top:4px;border-top:1px solid #edf1f5;}
.all-products-grid .price-block{width:100%;text-align:left !important;}
.all-products-grid .price-block strong{font-size:15px !important;}
.all-products-grid .product-card-footer{margin-top:0 !important;justify-content:center !important;}
.all-products-grid .product-card-footer .inline-button,.all-products-grid .product-card-footer .btn-disabled{width:100% !important;min-width:0 !important;}
@media(max-width:760px){.all-products-grid .product-image-wrap{height:150px !important;}}

/* Tüm Ürünler: Öne Çıkanlar kartlarıyla birebir ölçü/hizalama */
.all-products-page .all-products-grid{
    display:grid !important;
    grid-template-columns:repeat(auto-fill,238px) !important;
    justify-content:start !important;
    align-items:stretch !important;
    gap:18px !important;
    width:100% !important;
    overflow:visible !important;
}
.all-products-page .all-products-grid .product-card,
.all-products-page .all-products-grid .b2b-product-card,
.all-products-page .all-products-grid .showcase-product-card{
    box-sizing:border-box !important;
    width:238px !important;
    min-width:238px !important;
    max-width:238px !important;
    min-height:512px !important;
    margin:0 !important;
    padding:0 !important;
    display:block !important;
    overflow:hidden !important;
    background:#fff !important;
    border:1px solid #d9e2ec !important;
    border-radius:18px !important;
    box-shadow:none !important;
}
.all-products-page .all-products-grid .product-card:hover{
    transform:translateY(-1px) !important;
    box-shadow:0 12px 28px rgba(15,35,65,.08) !important;
}
.all-products-page .all-products-grid .product-card-shell{
    display:flex !important;
    flex-direction:column !important;
    height:100% !important;
    min-height:510px !important;
    padding:0 !important;
}
.all-products-page .all-products-grid .product-card-media{
    box-sizing:border-box !important;
    width:auto !important;
    height:228px !important;
    min-height:228px !important;
    margin:28px 28px 0 !important;
    padding:14px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    background:#fff !important;
    border:1px solid #d9e2ec !important;
    border-radius:14px !important;
}
.all-products-page .all-products-grid .product-card-media img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
}
.all-products-page .all-products-grid .product-card-body{
    box-sizing:border-box !important;
    flex:1 1 auto !important;
    width:100% !important;
    padding:11px 30px 18px !important;
    display:flex !important;
    flex-direction:column !important;
    gap:7px !important;
    text-align:center !important;
}
.all-products-page .all-products-grid .product-brand-line{
    min-height:17px !important;
    font-size:12px !important;
    line-height:17px !important;
    font-weight:800 !important;
    color:#334155 !important;
    text-align:center !important;
}
.all-products-page .all-products-grid .product-title-link{
    min-height:44px !important;
    font-size:12.5px !important;
    line-height:1.35 !important;
    text-align:center !important;
    color:#087ff5 !important;
}
.all-products-page .all-products-grid .product-code-line{
    font-size:10.5px !important;
    line-height:1.35 !important;
    text-align:center !important;
}
.all-products-page .all-products-grid .product-stock-line{
    font-size:12px !important;
    line-height:17px !important;
    text-align:center !important;
}
.all-products-page .all-products-grid .product-price-stack{
    width:100% !important;
    margin-top:auto !important;
    padding-top:8px !important;
    border-top:1px solid #e7edf3 !important;
    text-align:left !important;
}
.all-products-page .all-products-grid .product-price-stack small{
    font-size:9.5px !important;
}
.all-products-page .all-products-grid .product-price-stack strong{
    font-size:14px !important;
    line-height:1.3 !important;
}
.all-products-page .all-products-grid .product-card-footer{
    width:100% !important;
    margin-top:0 !important;
}
.all-products-page .all-products-grid .product-card-footer > *,
.all-products-page .all-products-grid .product-card-footer .inline-button,
.all-products-page .all-products-grid .product-card-footer .btn-disabled{
    width:100% !important;
    min-width:0 !important;
}
@media (max-width:760px){
    .all-products-page .all-products-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:10px !important;
    }
    .all-products-page .all-products-grid .product-card,
    .all-products-page .all-products-grid .b2b-product-card,
    .all-products-page .all-products-grid .showcase-product-card{
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
    }
    .all-products-page .all-products-grid .product-card-media{
        height:180px !important;
        min-height:180px !important;
        margin:14px 14px 0 !important;
    }
    .all-products-page .all-products-grid .product-card-body{
        padding:10px 14px 14px !important;
    }
}
@media (max-width:460px){
    .all-products-page .all-products-grid{
        grid-template-columns:1fr !important;
    }
}


/* 2026-08-04: Tüm Ürünler kartlarını products.php kartlarıyla aynı görsel yapıda göster. */
.all-products-page .all-products-grid.showcase-product-shelf{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:18px !important;
    overflow:visible !important;
    scroll-snap-type:none !important;
    padding:0 !important;
}
.all-products-page .all-products-grid.showcase-product-shelf .product-card{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    flex:initial !important;
    scroll-snap-align:none !important;
}
/* Eski Tüm Ürünler kart özelleştirmelerini iptal et; products.php kart ölçüleri geçerli olsun. */
.all-products-page .all-products-grid .product-card{
    padding:0 !important;
}
.all-products-page .all-products-grid .product-card-media{
    width:auto !important;
}
.all-products-page .all-products-grid .product-card-body{
    text-align:initial !important;
}
.all-products-page .all-products-grid .product-price-stack{
    text-align:left !important;
}
.all-products-page .catalog-unit-qty-label{
    display:none !important;
}
@media (max-width:1280px){
    .all-products-page .all-products-grid.showcase-product-shelf{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    }
}
@media (max-width:820px){
    .all-products-page .all-products-grid.showcase-product-shelf{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:10px !important;
    }
}
@media (max-width:460px){
    .all-products-page .all-products-grid.showcase-product-shelf{
        grid-template-columns:1fr !important;
    }
}