/* ========================================================= MOBTECH — Catalog Styles (Layout + Grid + Cards) ========================================================= */ @import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Cairo:wght@400;500;600;700;800&display=swap"); /* ========================================================= 1) TOKENS / BASE ========================================================= */ :root{ --pad:12px; --radius:14px; --shadow:0 6px 18px rgba(0,0,0,.06); --gray:#f5f6f8; --text:#17253a; --line:#ebecef; --brand-red:#dd3b34; --brand-red-deep:#b72f2a; --brand-dark:#17253a; --brand-soft:#f7eceb; /* Grid defaults */ --cols:8; --card-min:240px; --gap:12px; /* Sidebar spacing */ --sidebar-top: 26px; --sidebar-lift: 16px; --sidebar-stick-top: calc(var(--sidebar-top) + var(--sidebar-lift)); /* Toolbar spacing */ --toolbar-top: 30px; --toolbar-lift: 20px; --toolbar-stick-top: calc(var(--toolbar-top) + var(--toolbar-lift)); /* ?????? ????? ?????? ???????? */ --ctb-h: 30px; /* Source of truth for sidebar position */ --layout-sidebar-width: 240px; --layout-columns: var(--layout-sidebar-width) minmax(0, 1fr); --layout-areas: "sidebar content"; --layout-ui-dir: ltr; } html[dir="rtl"], body[dir="rtl"], body.lang-ar{ --layout-columns: minmax(0, 1fr) var(--layout-sidebar-width); --layout-areas: "content sidebar"; --layout-ui-dir: rtl; } *{ box-sizing:border-box; } body{ margin:0; color:var(--text); font-family:"Manrope","Cairo",system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Noto Sans",Arial,sans-serif; background:#fff; } html[dir="rtl"] body{ direction: rtl; } a{ color:var(--brand-red-deep); text-decoration:none; } img{ display:block; } [hidden]{ display:none !important; } /* Prevent first-paint flicker between cards/rows. View preference is injected early on . */ html[data-catalog-initial-view="rows"] .catalog-cards-view{ display:none !important; } html[data-catalog-initial-view="rows"] .catalog-rows-view{ display:block !important; } html[data-catalog-initial-view="cards"] .catalog-cards-view{ display:block !important; } html[data-catalog-initial-view="cards"] .catalog-rows-view{ display:none !important; } /* ========================================================= 2) HEADER ========================================================= */ .header{ position:sticky; top:0; z-index:100; background:#fff; border-bottom:1px solid var(--line); padding:8px 16px; display:flex; gap:12px; align-items:center; } .header__title{ font-weight:700; } .header__search{ margin-left:auto; display:flex; gap:8px; } .header__search input{ padding:8px 10px; border:1px solid #ddd; border-radius:10px; min-width:280px; } .header__search button{ padding:8px 12px; border:1px solid #ddd; background:var(--brand-soft); border-radius:10px; cursor:pointer; color:var(--brand-dark); } /* ========================================================= 3) LAYOUT (SIDEBAR + CONTENT) ========================================================= */ .layout, .layout.grid{ padding:0 16px 12px; display:grid; grid-template-columns:var(--layout-columns); grid-template-areas:var(--layout-areas); gap:14px; align-items:start; direction:ltr; } /* Sidebar: sticky + independent scroll + lift */ .layout > .sidebar, .layout.grid > .sidebar{ grid-area:sidebar; position: sticky; top: var(--sidebar-stick-top); margin-top: calc(var(--sidebar-lift) * -1); max-height: calc(100vh - var(--sidebar-stick-top) - 12px + var(--sidebar-lift)); overflow:auto; display:grid; gap:10px; align-content:start; z-index:20; direction:var(--layout-ui-dir); } .layout > .content, .layout.grid > .content{ grid-area:content; min-width:0; direction:var(--layout-ui-dir); } #catalog-sidebar{ direction:inherit; text-align:start; } html[dir="rtl"] #catalog-sidebar{ direction:rtl; text-align:right; } body[dir="rtl"] #catalog-sidebar{ direction:rtl; text-align:right; } html[lang="ar"] #catalog-sidebar, body.lang-ar #catalog-sidebar{ direction:rtl; text-align:right; } /* Sidebar cards */ .sidebar .card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); } .card__title{ font-weight:700; padding:10px var(--pad); border-bottom:1px solid var(--line); } .card__body{ padding:8px var(--pad); /* ??? ?????? ??????: ?? flex ????? */ display:flex; flex-direction:column; gap:8px; } .list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; } /* ========================================================= 4) CATALOG TOOLBAR (STICKY) ========================================================= */ .catalog-toolbar{ position: sticky; top: var(--toolbar-stick-top); z-index: 90; background: linear-gradient(180deg,#fff 72%,rgba(255,255,255,.94) 100%); margin-top: calc(var(--toolbar-lift) * -1); padding: calc(8px + var(--toolbar-lift)) 0 10px; } /* ?? ???????? */ .ctb-form{ display:flex; flex-wrap:wrap; align-items:stretch; gap:10px; padding:12px; border:1px solid #e4e9f1; border-radius:18px; background:#fff; box-shadow:0 10px 24px rgba(23,37,58,.06); } /* ?????? ?????? */ .ctb-group{ height: var(--ctb-h); display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; background:#fff; border:1px solid #e5e7eb; border-radius:9999px; box-sizing:border-box; } .ctb-button, .ctb-view-btn{ height:100%; border:1px solid #d8e0ea; border-radius:999px; background:#fff; color:#0f172a; font-size:12px; font-weight:800; cursor:pointer; transition:background .15s ease, box-shadow .15s ease, transform .1s ease, border-color .15s ease, color .15s ease; } .ctb-button:hover, .ctb-view-btn:hover{ background:#f8fafc; border-color:#cbd5e1; transform:translateY(-1px); } .ctb-button:active, .ctb-view-btn:active{ transform:translateY(0); } .ctb-button[aria-expanded="true"], .ctb-view-btn.is-active{ background:#0f172a; border-color:#0f172a; color:#fff; box-shadow:0 10px 24px rgba(15,23,42,.12); } /* ????? */ .ctb-group.ctb-search{ flex:1 1 280px; min-width:220px; } .ctb-search svg{ opacity:.7; } .ctb-search input{ border:0; outline:0; background:transparent; width:100%; height:100%; font-size:14px; } /* ??????? */ .ctb-group.ctb-count{ padding:0 14px; } .ctb-count-num{ min-width:60px; font-weight:700; color:#0f172a; border:0; padding:0; background:transparent; line-height:1; } .ctb-label{ font-size:13px; color:#475467; } .ctb-group.ctb-view{ gap:4px; padding:3px; } .ctb-view-btn{ min-width:64px; padding:0 14px; box-shadow:none; } .ctb-button{ display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:0 12px; box-shadow:none; } .ctb-btn-icon, .ctb-btn-caret{ line-height:1; } .ctb-btn-caret{ font-size:11px; opacity:.7; } .ctb-group.ctb-platform, .ctb-group.ctb-filters, .ctb-group.ctb-export{ position:relative; } .ctb-platform-menu, .ctb-filters-menu{ position:absolute; top:calc(100% + 8px); left:0; min-width:220px; padding:10px; border:1px solid #dbe4ef; border-radius:18px; background:#fff; box-shadow:0 18px 40px rgba(15,23,42,.16); display:none; z-index:120; } .ctb-platform-menu.is-open, .ctb-filters-menu.is-open{ display:grid; gap:6px; } .ctb-platform-item{ border:none; border-radius:12px; background:#fff; color:#0f172a; font:inherit; font-size:13px; font-weight:700; text-align:left; padding:10px 12px; cursor:pointer; } .ctb-platform-item:hover, .ctb-filters-option:hover{ background:#f8fafc; } .ctb-filters-section{ display:grid; gap:8px; padding-bottom:8px; border-bottom:1px solid #eef2f7; } .ctb-filters-section:last-of-type{ border-bottom:none; padding-bottom:0; } .ctb-filters-title{ font-size:11px; font-weight:900; letter-spacing:.04em; text-transform:uppercase; color:#64748b; } .ctb-filters-option{ display:flex; align-items:center; gap:8px; margin:0; padding:8px 10px; border-radius:12px; cursor:pointer; font-size:13px; } .ctb-filters-option input{ margin:0; } .ctb-filters-actions{ display:flex; gap:8px; padding-top:8px; } .ctb-filters-btn{ flex:1 1 0; min-height:36px; border:1px solid #d1d5db; border-radius:12px; background:#fff; color:#0f172a; font-size:12px; font-weight:800; cursor:pointer; } .ctb-filters-btn--primary{ background:#0f172a; border-color:#0f172a; color:#fff; } .ctb-filters-dot{ width:8px; height:8px; border-radius:50%; background:#dd3b34; } .ctb-group:has(#ctb-sort), .ctb-group:has(#ctb-cols), .ctb-group:has(#ctb-page){ min-width:0; } .ctb-group:has(#ctb-sort){ flex:1 1 280px; } .ctb-group:has(#ctb-cols), .ctb-group:has(#ctb-page){ flex:0 1 auto; } .ctb-group:has(#ctb-sort) .ctb-select{ max-width:140px; } .ctb-group:has(#ctb-cols) .ctb-select, .ctb-group:has(#ctb-page) .ctb-select{ max-width:88px; } html[dir="rtl"] .catalog-toolbar .ctb-form{ direction: rtl; } body[dir="rtl"] .catalog-toolbar .ctb-form{ direction:rtl; } html[dir="rtl"] .catalog-toolbar .ctb-group:has(#ctb-sort){ margin-left: 0; margin-right: auto; } body[dir="rtl"] .catalog-toolbar .ctb-group:has(#ctb-sort){ margin-left:0; margin-right:auto; } html[dir="rtl"] .catalog-toolbar .ctb-platform-menu, html[dir="rtl"] .catalog-toolbar .ctb-filters-menu{ left: auto; right: 0; } body[dir="rtl"] .catalog-toolbar .ctb-platform-menu, body[dir="rtl"] .catalog-toolbar .ctb-filters-menu{ left:auto; right:0; } html[dir="rtl"] .catalog-toolbar .ctb-platform-item{ text-align: right; } body[dir="rtl"] .catalog-toolbar .ctb-platform-item{ text-align:right; } html[dir="rtl"] .catalog-toolbar .ctb-filters-option input{ margin-right: 0; margin-left: 6px; } body[dir="rtl"] .catalog-toolbar .ctb-filters-option input{ margin-right:0; margin-left:6px; } html[dir="rtl"] .catalog-toolbar .ctb-group:has(#ctb-sort) .ctb-label, html[dir="rtl"] .catalog-toolbar .ctb-group:has(#ctb-cols) .ctb-label, html[dir="rtl"] .catalog-toolbar .ctb-group:has(#ctb-page) .ctb-label, html[dir="rtl"] .catalog-toolbar .ctb-group:has(#ctb-metric) .ctb-label, html[dir="rtl"] .catalog-toolbar .ctb-group:has(#ctb-range) .ctb-label, html[dir="rtl"] .catalog-toolbar .ctb-group:has(#ctb-from) .ctb-label, html[dir="rtl"] .catalog-toolbar .ctb-group:has(#ctb-to) .ctb-label{ border-right:0; border-left:1px solid #e5e7eb; } html[dir="rtl"] .catalog-toolbar .ctb-group{ text-align:right; } html[lang="ar"] .catalog-toolbar .ctb-form, body.lang-ar .catalog-toolbar .ctb-form{ direction:rtl; } html[lang="ar"] .catalog-toolbar .ctb-platform-menu, html[lang="ar"] .catalog-toolbar .ctb-filters-menu, body.lang-ar .catalog-toolbar .ctb-platform-menu, body.lang-ar .catalog-toolbar .ctb-filters-menu{ left:auto; right:0; } html[lang="ar"] .catalog-toolbar .ctb-platform-item, body.lang-ar .catalog-toolbar .ctb-platform-item{ text-align:right; } /* select */ .ctb-select{ height:100%; border:0; background:transparent; padding:0 34px 0 8px; font-size:14px; line-height:normal; cursor:pointer; appearance:none; -webkit-appearance:none; -moz-appearance:none; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:right 8px center; } .ctb-select:focus{ outline:none; box-shadow:0 0 0 3px rgba(221,59,52,.15); } /* ========================================================= 5) GRID SYSTEM ========================================================= */ .grid{ --cols:8; --card-min:240px; --gap:12px; } /* Desktop: ????? ??? ??????? ?? ??? backend */ .grid.cols-mode{ display:grid; grid-template-columns:repeat(var(--cols), minmax(0,1fr)); gap:var(--gap); } /* ??? auto-fit (?? ???? ??????? ??????) */ .grid.fit-mode{ display:grid; grid-template-columns:repeat(auto-fit, minmax(var(--card-min), 1fr)); gap:var(--gap); } /* ========================================================= Responsive override for cols-mode (?????) - ??? ??????? ???????: ????? repeat(--cols) ???? ??????? ????? ??? ??? ?????? ========================================================= */ /* Tablet & smaller */ @media (max-width: 1024px){ .grid{ --card-min: 260px; } .grid.cols-mode{ grid-template-columns:repeat(auto-fit, minmax(var(--card-min), 1fr)); } } /* Mobile */ @media (max-width: 768px){ .grid{ --card-min: 280px; --gap:10px; } .grid.cols-mode{ grid-template-columns:repeat(auto-fit, minmax(var(--card-min), 1fr)); } } /* Very small phones */ @media (max-width: 480px){ .grid{ --card-min: 320px; } .grid.cols-mode{ grid-template-columns:repeat(auto-fit, minmax(var(--card-min), 1fr)); } } /* Masonry mode (??? ?????? ?????? ??? ??????? ?? ???? ????) */ .grid.masonry-mode{ column-count:var(--cols); column-gap:var(--gap); } .grid.masonry-mode .card{ display:inline-block; width:100%; margin:0 0 var(--gap); break-inside:avoid; } /* ?? ???? ???? ?????? ?????? ??????? */ .card-wrapper{ height:100%; } .catalog-cards-view, .catalog-rows-view{ min-width:0; } .catalog-table-wrap{ overflow:auto; border:1px solid #e7ecf3; border-radius:18px; background:#fff; box-shadow:0 6px 18px rgba(15,23,42,.04); } .catalog-table{ width:100%; min-width:1040px; border-collapse:separate; border-spacing:0; table-layout:fixed; } .catalog-table th, .catalog-table td{ padding:14px 12px; border-bottom:1px solid #e5e7eb; text-align:start; vertical-align:middle; background:#fff; font-size:13px; color:#0f172a; } .catalog-table thead th{ position:sticky; top:0; z-index:2; font-size:11px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:#64748b; background:#f8fafc; text-align:center; } .catalog-table-sort{ display:inline-flex; align-items:center; justify-content:center; gap:6px; width:100%; padding:0; border:0; background:transparent; color:inherit; font:inherit; font-weight:inherit; letter-spacing:inherit; text-transform:inherit; cursor:pointer; } .catalog-table-sort:hover{ color:#0f172a; } .catalog-table-sort-icon{ display:inline-flex; align-items:center; justify-content:center; width:14px; color:#94a3b8; font-size:10px; line-height:1; } .catalog-table-sort-icon::before{ content:"?"; } .catalog-table-sort.is-sorted{ color:#0f172a; } .catalog-table-sort.is-sorted .catalog-table-sort-icon{ color:#0f172a; } .catalog-table-sort[data-sort-dir="asc"] .catalog-table-sort-icon::before{ content:"?"; } .catalog-table-sort[data-sort-dir="desc"] .catalog-table-sort-icon::before{ content:"?"; } .catalog-table-actions-head{ text-align:center !important; } .catalog-table tbody tr:hover td{ background:#f8fbff; } .catalog-table-row.is-selected td{ background:#f8fbff; } .catalog-table-check-col{ width:42px; text-align:center !important; } .catalog-table-check-all, .catalog-table-row-check{ width:16px; height:16px; cursor:pointer; } .catalog-table-thumb{ width:78px; height:78px; border-radius:14px; border:1px solid #e5e7eb; background:linear-gradient(135deg,#f8fafc,#fff); overflow:hidden; display:flex; align-items:center; justify-content:center; padding:6px; } .catalog-table-thumb, .catalog-table-thumb img{ transition:transform .18s ease, box-shadow .18s ease; } .catalog-table-thumb:hover{ transform:scale(2.7); box-shadow:0 18px 40px rgba(15,23,42,.18); z-index:8; position:relative; } .catalog-table-thumb img{ width:100%; height:100%; object-fit:contain; } .catalog-table-thumb-empty{ font-size:11px; color:#64748b; text-align:center; padding:6px; } .catalog-table-product{ display:grid; gap:4px; min-width:0; max-width:100%; } .catalog-table-title{ font-size:13px; line-height:1.4; font-weight:800; color:#0f172a; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; max-width:100%; } .catalog-table-title-link{ display:-webkit-box; padding:0; border:0; background:transparent; color:#0f172a; text-align:start; cursor:pointer; } .catalog-table-title-link:hover{ color:var(--brand-red-deep); } .catalog-table-subline{ display:flex; flex-wrap:wrap; gap:6px; font-size:12px; color:#64748b; } .catalog-table-code{ font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:12px; color:#475569; } .catalog-table-pill{ display:inline-flex; align-items:center; border-radius:999px; padding:4px 10px; border:1px solid #e2e8f0; font-size:11px; font-weight:800; } .catalog-table-pill.is-amazon{ background:#fff7ed; border-color:#fdba74; color:#9a3412; } .catalog-table-pill.is-noon{ background:#fefce8; border-color:#fde047; color:#854d0e; } .catalog-table-prep{ display:none !important; align-items:center; justify-content:flex-start; min-width:84px; } body.prep-mode-active .catalog-table-prep{ display:flex !important; } .catalog-table-prep .prep-qty-input{ width:72px; height:32px; padding:0 10px; border-radius:10px; border:1px solid #d1d5db; background:#fff; font-size:13px; line-height:32px; text-align:center; } .catalog-table-actions{ display:flex; align-items:center; gap:6px; flex-wrap:nowrap; white-space:nowrap; } .catalog-table-btn{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border:1px solid #d1d5db; border-radius:10px; background:#fff; color:#0f172a; cursor:pointer; text-decoration:none; transition:background .15s ease, border-color .15s ease, transform .1s ease; } .catalog-table-btn:hover{ background:#f8fafc; border-color:#94a3b8; transform:translateY(-1px); } .catalog-table-print-copies{ width:auto; min-width:48px; height:34px; padding:0 6px; border-radius:10px; border:1px solid #d1d5db; background:#fff; font-size:12px; line-height:34px; text-align:center; } .catalog-table-empty{ text-align:center !important; color:#64748b; padding:24px 12px !important; } .catalog-table-row.prep-has-qty td{ box-shadow:inset 0 0 0 9999px rgba(22,163,74,.04); } .catalog-table-row.prep-has-qty{ outline:1px solid rgba(22,163,74,.4); outline-offset:-1px; } .catalog-table td:nth-child(4), .catalog-table td:nth-child(5), .catalog-table td:nth-child(6), .catalog-table td:nth-child(7), .catalog-table td:nth-child(8), .catalog-table td:nth-child(9){ font-size:12px; } .catalog-table td:last-child, .catalog-table th:last-child{ width:240px; } /* ========================================================= 6) CARD BASE ========================================================= */ .card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column; transition:transform .12s, box-shadow .12s; } .cols-mode .card, .fit-mode .card{ height:100%; } .card:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.08); } .card__link{ display:flex; flex-direction:column; color:inherit; height:100%; } /* media area */ .card__media{ position:relative; background:var(--gray); height:220px; display:flex; align-items:center; justify-content:center; } .card__media img{ width:100%; height:100%; object-fit:contain; } /* badges */ .badge{ position:absolute; left:10px; top:10px; font-size:12px; padding:4px 8px; border-radius:999px; background:#111; color:#fff; } .badge--amazon{ background:#ff9900; color:#111; } .badge--noon{ background:#ffe500; color:#111; } /* body (?????? ???????/amazon/noon) */ .card__body{ padding:10px var(--pad); display:flex; flex-direction:column; gap:8px; } /* title (??? ??? ??????) */ .title{ font-size:12px; line-height:1.3; font-weight:700; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; min-height:calc(1.3em * 3); } /* ????? ???? Noon – ??? ????? ???? ??????? ????? ??? */ .card--noon .title{ -webkit-line-clamp:4; min-height:calc(1.3em * 4); } /* ????? ??????? ?????? ?? ?????? – ????? ?????? */ .cls-title{ font-weight:700; font-size:12px; line-height:1.35; color:#111827; margin:2px 0 4px; display:-webkit-box; /* ?? ??????? ?????? */ -webkit-line-clamp:3; /* ?? ???? ? ???? */ -webkit-box-orient:vertical; overflow:hidden; } /* ???? Noon ?????? ??? ????? */ .card--noon .cls-title{ -webkit-line-clamp:4; } /* meta */ .meta{ display:flex; flex-wrap:wrap; /* ???? ????? ??? ?? ???? */ gap:4px 8px; font-size:12px; color:#475467; align-items:flex-start; min-height:18px; } .meta__key{ opacity:.75; flex:0 0 auto; /* ?????? ???? */ } .meta__val{ font-weight:600; color:#344054; flex:1 1 100%; /* ?????? ???? ??? ??? ???? */ word-break:break-all; /* ??? ?? SKU ?????? */ } /* ========================================================= 7) AMAZON CARD EXTRAS (BRAND / COLOR / PRICE / QTY) ========================================================= */ /* ?? ???? ?????? (?????/???) */ .attrs{ display:flex; flex-wrap:wrap; gap:6px 8px; min-height:0; } .attr-chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border:1px solid #e5e7eb; border-radius:9999px; font-size:12px; color:#334155; background:#fff; } .attr-chip .chip-ico{ display:inline-block; opacity:.75; } .attr-chip .swatch{ width:12px; height:12px; border-radius:50%; border:1px solid #e5e7eb; background:#ddd; } /* ?? ??????/??? ???? ????? ??????? */ .kv-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:2px; flex-wrap:wrap; /* ??? ?? ??????? ?????? */ } .kv{ display:flex; align-items:center; gap:6px; } .kv-key{ font-size:12px; color:#64748b; } .kv-val{ font-weight:700; font-size:12.5px; color:#0f172a; } .kv-val.is-ok{ color:#137333; } .kv-val.is-warn{ color:#7a4b00; } .kv-val.is-bad{ color:#b91c1c; } /* ????? ?????? — ??????? ??? */ .actions{ display:flex; gap:8px; align-items:center; } .actions--compact{ margin-top:4px; } /* ??? ????? ?????? ?????? ?? ???? ?????? */ .card__body .actions{ margin-top:auto; } .action-btn{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:10px; background:#f8fafc; border:1px solid #e5e7eb; transition:all .15s ease-in-out; } .action-btn:hover{ background:var(--brand-red); border-color:var(--brand-red); color:#fff; } /* ???? ???? ??? ?????? ???? ????? */ .card.card--amazon .card__body{ gap:8px; } /* ========================================================= 8) SALES BUTTON (???? ?????? ??????? ???????) ========================================================= */ .sales-btn{ display:inline-block; margin-top:4px; padding:6px 10px; font-size:12.5px; font-weight:600; border-radius:8px; background:var(--brand-soft); color:var(--brand-red-deep); border:1px solid rgba(221,59,52,.18); transition:all .15s ease-in-out; } .sales-btn:hover{ background:var(--brand-red); color:#fff; border-color:var(--brand-red); text-decoration:none; } /* ========================================================= 9) CARD SELECTION BADGE ========================================================= */ /* ???? ??????? ???? ???? ?????? */ .sel-badge{ position:absolute; top:8px; right:8px; width:28px; height:28px; border-radius:50%; border:1px solid #cbd5e1; background:#ffffffcc; display:none; /* ???? ??? ?? ??? ??????? */ align-items:center; justify-content:center; font-weight:700; line-height:1; cursor:pointer; backdrop-filter: blur(2px); z-index:5; } .sel-badge:hover{ background:var(--brand-red); color:#fff; border-color:var(--brand-red); } .sel-badge.is-on{ background:var(--brand-red); color:#fff; border-color:var(--brand-red); } /* ????? ?????? ??????? */ .card.sel-on{ outline:2px solid var(--brand-red); outline-offset:-2px; box-shadow:0 0 0 2px rgba(221,59,52,0.15) inset; } /* ????? ???? ??? ???????? ?????? ???? ?????? ??? ???? ?????? ??? */ .catalog-select-mode .card--amazon .sel-badge{ display:flex; } /* ========================================================= 10) PAGINATION ========================================================= */ .pagination{ display:flex; gap:8px; align-items:center; justify-content:center; margin:16px 0; flex-wrap:wrap; } .pagination .page, .pagination .ellipsis{ padding:8px 12px; border:1px solid #e5e7eb; border-radius:10px; background:#fff; min-width:40px; text-align:center; } .pagination .current{ background:var(--brand-red); color:#fff; border-color:var(--brand-red); } .pagination .disabled{ opacity:.4; pointer-events:none; } html[dir="rtl"] .pagination{ direction: rtl; } /* ========================================================= 11) BULK UPDATE WIDGET ========================================================= */ form[data-widget="bulk-update"] #bulk-log{ border:1px solid #ddd; border-radius:8px; background:#f8fbf9; padding-top:10px; padding-bottom:10px; padding-inline:14px; margin-top:.5rem; box-sizing:border-box; } form[data-widget="bulk-update"] #bulk-log .bu-ready, form[data-widget="bulk-update"] #bulk-log .bu-banner{ display:block; width:max-content; margin:0 auto .6rem; text-align:center; } .bu-chip{ display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:6px; font-weight:600; font-size:12px; } .bu-ok{ background:#e8f6ee; border:1px solid #b7ebc6; color:#137333; } .bu-warn{ background:#fff4e5; border:1px solid #ffd9a8; color:#7a4b00; } .bu-alert{ padding:8px; border-radius:6px; text-align:center; } .bu-error{ background:#fff2f2; border:1px solid #ffd6d6; color:#932323; } .bu-neutral{ background:#fafafa; border:1px solid #eee; color:#333; } .bu-pending{ background:#f3faf6; border:1px dashed #c7e0d2; color:#137333; } /* ========================================================= 12) SIDEBAR SWITCHES & FILTERS (SCOPED) ========================================================= */ #catalog-sidebar .sbar-header{ display:flex; align-items:center; justify-content:space-between; padding:10px var(--pad); border-bottom:1px solid #e5e7eb; background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%); } /* ========================================================= 12) SIDEBAR SWITCHES & FILTERS (SCOPED) ========================================================= */ #catalog-sidebar .sbar-header{ display:flex; align-items:center; justify-content:space-between; padding:10px var(--pad); border-bottom:1px solid #e5e7eb; } #catalog-sidebar .sbar-card .card__body{ padding:8px var(--pad); } #catalog-sidebar .sbar-card{ border:1px solid #dfe5ef; border-radius:16px; box-shadow:0 10px 24px rgba(23,37,58,.06); overflow:hidden; } /* ------- SWITCH BASE (OFF) ------- */ #catalog-sidebar .sbar-switch{ position:relative; width:44px; height:24px; border-radius:9999px; border:1px solid #cbd5e1; background:#e5e7eb; /* OFF = ????? */ cursor:pointer; padding:0; outline:none; transition:background-color .15s ease, border-color .15s ease; } #catalog-sidebar .sbar-switch::after{ content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.12); transition:transform .15s ease; } /* ------- ON STATE (???? aria-expanded) ------- */ #catalog-sidebar .sbar-switch[aria-expanded="true"]{ background:var(--brand-red); /* ???? ??? ????? */ border-color:var(--brand-red); } #catalog-sidebar .sbar-switch[aria-expanded="true"]::after{ transform:translateX(20px); } /* Sidebar filters */ #catalog-sidebar .filters-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:12px 16px; } html[dir="rtl"] #catalog-sidebar .filters-grid{ direction:rtl; } #catalog-sidebar .filter-fieldset{ margin:0; padding:6px 8px; border:1px solid #e5e7eb; border-radius:10px; background:#fff; } #catalog-sidebar .filter-fieldset .filter-title{ font-weight:700; font-size:13px; color:#334155; margin-bottom:6px; } #catalog-sidebar .filter-fieldset .sbar-radio{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; margin:0 12px 6px 0; vertical-align:middle; } /* ------- SIDEBAR FILTERS ------- */ #catalog-sidebar .filters-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:12px 16px; } #catalog-sidebar .filter-fieldset{ margin:0; padding:6px 8px; border:1px solid #e5e7eb; border-radius:10px; background:#fff; } #catalog-sidebar .filter-fieldset .filter-title{ font-weight:700; font-size:13px; color:#334155; margin-bottom:6px; } #catalog-sidebar .filter-fieldset .sbar-radio{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; margin:0 12px 6px 0; vertical-align:middle; } /* ========================================================= 13) RESPONSIVE (Tablet + Mobile) ========================================================= */ /* Tablet / small laptop */ @media (max-width: 1024px){ :root{ --pad:10px; --gap:10px; --card-min:220px; --toolbar-top: 12px; --toolbar-lift: 10px; --toolbar-stick-top: calc(var(--toolbar-top) + var(--toolbar-lift)); --sidebar-top: 12px; --sidebar-lift: 10px; --layout-sidebar-width: 220px; } .layout, .layout.grid{ gap:12px; padding:0 12px 12px; } } /* Mobile / tablet portrait */ @media (max-width: 768px){ :root{ --pad:10px; --gap:10px; --card-min:200px; --toolbar-top: 10px; --toolbar-lift: 8px; --toolbar-stick-top: calc(var(--toolbar-top) + var(--toolbar-lift)); } .layout, .layout.grid{ grid-template-columns:1fr; grid-template-areas: "sidebar" "content"; padding:0 10px 12px; } .layout > .sidebar, .layout.grid > .sidebar{ position:static; max-height:none; overflow:visible; top:auto; margin-top:0; margin-bottom:12px; } .catalog-toolbar{ top: var(--toolbar-stick-top); } /* grid: Auto-fit ??? cols ???? */ .grid.cols-mode{ display:grid; grid-template-columns:repeat(auto-fit, minmax(var(--card-min), 1fr)); gap:var(--gap); } .card__media{ height:190px; } } /* Very small phones */ @media (max-width: 480px){ :root{ --card-min:170px; } .card__media{ height:170px; } } /* ========================================================= Prep Qty Indicator (Green = Ready / Prepared) ========================================================= */ /* ????? ???? ?????? */ .card.prep-has-qty{ border-color: rgba(22,163,74,0.65); /* green-600 */ box-shadow: 0 12px 26px rgba(0,0,0,.10), 0 0 0 2px rgba(22,163,74,0.28); } /* ???? ?????? */ .card.prep-has-qty .prep-ctrl{ position: relative; } /* ?????? ?????? ??????? */ .card.prep-has-qty .prep-ctrl::after{ content:""; position:absolute; right:2px; top:50%; transform:translateY(-50%); width:12px; height:12px; border-radius:50%; background:#16a34a; /* Green 600 */ border:2px solid #ffffff; /* ??? ?? ??????? */ box-shadow: 0 0 0 4px rgba(22,163,74,0.30), 0 0 10px rgba(22,163,74,0.85); } /* Hover: ???? */ .card.prep-has-qty:hover .prep-ctrl::after{ box-shadow: 0 0 0 5px rgba(22,163,74,0.38), 0 0 12px rgba(22,163,74,0.95); } /* ========================================================= FINAL OVERRIDES (MUST BE AT END OF FILE) Fix: mobile/split grid + toolbar overflow ========================================================= */ @media (max-width: 1024px){ /* ???? ??? ?? split: ??? ??????? ????? ?????? */ .grid.cols-mode{ grid-template-columns: repeat(auto-fit, minmax(220px, 420px)) !important; justify-content: center; } } @media (max-width: 768px){ /* Mobile: ??????? cols ???? */ .grid.cols-mode{ grid-template-columns: repeat(auto-fit, minmax(170px, 420px)) !important; gap: var(--gap); justify-content: center; } /* ??? ???????? ????/??? ?????? ???? min-width */ .ctb-group.ctb-search{ min-width: 0 !important; flex: 1 1 100% !important; } .ctb-form{ gap: 8px; } .ctb-group{ max-width: 100%; } .ctb-group.ctb-view{ width:auto; justify-content:stretch; } .ctb-view-btn{ flex:0 1 auto; } .ctb-group:has(#ctb-sort){ flex:1 1 100%; } .ctb-group:has(#ctb-sort) .ctb-select{ max-width:none; } .catalog-table{ min-width:940px; } } /* Very small phones */ @media (max-width: 480px){ .grid.cols-mode{ grid-template-columns: repeat(auto-fit, minmax(160px, 420px)) !important; } } /* ========================================================= LAPTOP / SPLIT VIEW SMART GRID (END OF FILE) - Fix: split window + laptop mid widths - Goal: auto columns + cap card width so 1 card doesn't stretch ========================================================= */ /* Split & laptop ranges */ @media (min-width: 769px) and (max-width: 1366px){ /* sidebar + content on one line but ???? */ .layout, .layout.grid{ gap: 14px; padding: 0 14px 14px; } /* ? ??? ???: ????? cols ?????? ?? ????? ??????? */ .grid.cols-mode{ grid-template-columns: repeat(auto-fit, minmax(240px, 380px)) !important; justify-content: start; /* ???? ????? ????? */ } } /* ???? ???? (split ???) */ @media (min-width: 769px) and (max-width: 1100px){ :root{ --layout-sidebar-width: 220px; } .layout, .layout.grid{ gap: 12px; padding: 0 12px 12px; } .grid.cols-mode{ grid-template-columns: repeat(auto-fit, minmax(220px, 340px)) !important; justify-content: start; } /* ??? ???????? ???? ????/??? ???? */ .ctb-group.ctb-search{ min-width: 240px !important; } } /* ???? ?????/??? ???? ???? ????: ??????? ?????? */ @media (min-width: 769px){ .grid.cols-mode > .card-wrapper, .grid.cols-mode > .card{ max-width: 380px; } } /* ========================================================= Internal responsive shell (mobile + tablet) ========================================================= */ .catalog-mobile-controls { display: none; } .catalog-mobile-btn { min-height: 36px; padding: 0 12px; border: 1px solid #d1d9e6; border-radius: 999px; background: #fff; color: #0f172a; font-size: 12px; font-weight: 800; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; } .catalog-mobile-btn--ghost { background: #f8fafc; } .catalog-sidebar-backdrop { display: none; } @media (max-width: 1024px) { .catalog-mobile-controls { display: flex; align-items: center; gap: 8px; grid-column: 1 / -1; margin-top: 8px; } .layout, .layout.grid { grid-template-columns: 1fr; grid-template-areas: "content"; } .layout > .content, .layout.grid > .content { grid-area: content; } .layout > .sidebar, .layout.grid > .sidebar { position: fixed !important; inset: 0 auto 0 0; width: min(88vw, 360px); max-height: 100vh; height: 100vh; margin: 0; padding: 10px 10px 14px; background: #f8fafc; border-right: 1px solid #e2e8f0; box-shadow: 0 20px 44px rgba(15, 23, 42, .18); transform: translateX(-104%); transition: transform .2s ease; z-index: 240; overflow: auto; } body[dir="rtl"] .layout > .sidebar, body[dir="rtl"] .layout.grid > .sidebar, html[dir="rtl"] .layout > .sidebar, html[dir="rtl"] .layout.grid > .sidebar { inset: 0 0 0 auto; border-right: 0; border-left: 1px solid #e2e8f0; transform: translateX(104%); } .catalog-sidebar-open .layout > .sidebar, .catalog-sidebar-open .layout.grid > .sidebar { transform: translateX(0); } .catalog-sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(15, 23, 42, .38); z-index: 220; opacity: 0; pointer-events: none; transition: opacity .2s ease; } .catalog-sidebar-open .catalog-sidebar-backdrop { opacity: 1; pointer-events: auto; } .catalog-toolbar { top: 8px; margin-top: 0; padding-top: 8px; } } @media (max-width: 768px) { .catalog-mobile-controls { margin-top: 4px; } .catalog-mobile-btn { flex: 1 1 auto; } .layout, .layout.grid { padding: 0 8px 10px; } .header { padding: 8px 10px; } .header__search input { min-width: 0; width: 100%; } } /* ========================================================= FINAL SYSTEM SHELL CLEANUP Source of truth for internal responsive behavior ========================================================= */ .layout, .layout.grid, .layout > .content, .layout.grid > .content, .catalog-toolbar, .ctb-form, .ctb-group, .card-wrapper, .card, .catalog-table-wrap { min-width: 0; } .catalog-toolbar { border: 1px solid rgba(226, 232, 240, 0.95); border-radius: 24px; padding: 12px; box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06); } .ctb-form { width: 100%; align-items: stretch; } .ctb-group { max-width: 100%; } .ctb-select, .ctb-button, .ctb-view-btn, .ctb-search input, .catalog-mobile-btn { max-width: 100%; } .catalog-mobile-controls { flex-wrap: wrap; } .catalog-mobile-btn { box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05); } .catalog-toolbar--sales .cls-toolbar-frame, .catalog-toolbar--cls .cls-toolbar-frame { border-radius: 22px; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05); } .catalog-toolbar--sales .cls-dd-wrap, .catalog-toolbar--cls .cls-dd-wrap { min-width: 0; } @media (min-width: 1025px) { .layout, .layout.grid { gap: 18px; } .catalog-toolbar { padding: 14px; } } @media (max-width: 1024px) { .layout, .layout.grid { padding: 0 10px 12px; gap: 12px; } .catalog-toolbar { top: 8px; padding: 10px; border-radius: 22px; } .ctb-form { gap: 8px; } .ctb-group { flex: 1 1 calc(50% - 4px); } .ctb-group.ctb-search, .ctb-group:has(#ctb-sort), .ctb-group:has(#ctb-cols), .ctb-group:has(#ctb-page), .catalog-toolbar--sales, .catalog-toolbar--cls { flex: 1 1 100%; width: 100%; } .grid.cols-mode { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; justify-content: stretch !important; } .catalog-toolbar--sales .cls-dd-wrap, .catalog-toolbar--cls .cls-dd-wrap { flex-wrap: wrap; } .catalog-toolbar--sales .cls-dd-field, .catalog-toolbar--cls .cls-dd-field { flex: 1 1 calc(50% - 6px); } } @media (max-width: 768px) { .layout, .layout.grid { padding: 0 6px 10px; gap: 10px; } .catalog-mobile-controls { position: sticky; top: 6px; z-index: 110; margin-top: 2px; padding: 2px 0 4px; background: linear-gradient(180deg, rgba(247, 249, 252, 0.96) 0%, rgba(247, 249, 252, 0.82) 100%); backdrop-filter: blur(10px); } .catalog-mobile-btn { flex: 1 1 calc(50% - 4px); min-height: 38px; } .catalog-toolbar { padding: 8px; border-radius: 20px; } .ctb-form { gap: 7px; } .ctb-group, .ctb-group.ctb-view, .ctb-group:has(#ctb-sort), .ctb-group:has(#ctb-cols), .ctb-group:has(#ctb-page) { flex: 1 1 100%; width: 100%; } .ctb-group.ctb-search { min-width: 0 !important; } .ctb-search input, .ctb-select, .ctb-button { width: 100%; } .ctb-group:has(#ctb-sort), .ctb-group:has(#ctb-cols), .ctb-group:has(#ctb-page), .ctb-group:has(#ctb-metric), .ctb-group:has(#ctb-range), .ctb-group:has(#ctb-from), .ctb-group:has(#ctb-to) { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: stretch; } .ctb-group:has(#ctb-sort) .ctb-label, .ctb-group:has(#ctb-cols) .ctb-label, .ctb-group:has(#ctb-page) .ctb-label, .ctb-group:has(#ctb-metric) .ctb-label, .ctb-group:has(#ctb-range) .ctb-label, .ctb-group:has(#ctb-from) .ctb-label, .ctb-group:has(#ctb-to) .ctb-label { min-width: 82px; justify-content: center; } .catalog-toolbar--sales .cls-toolbar-frame, .catalog-toolbar--cls .cls-toolbar-frame { padding: 10px; border-radius: 20px; } .catalog-toolbar--sales .cls-dd-field, .catalog-toolbar--cls .cls-dd-field, .catalog-toolbar--cls .cls-dd-actions { flex: 1 1 100%; } .grid.cols-mode { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; justify-content: stretch !important; } .card-wrapper, .grid.cols-mode > .card-wrapper, .grid.cols-mode > .card { max-width: none; } } @media (max-width: 560px) { .catalog-mobile-btn { flex-basis: 100%; } .grid.cols-mode { grid-template-columns: minmax(0, 1fr) !important; } .ctb-group:has(#ctb-sort), .ctb-group:has(#ctb-cols), .ctb-group:has(#ctb-page), .ctb-group:has(#ctb-metric), .ctb-group:has(#ctb-range), .ctb-group:has(#ctb-from), .ctb-group:has(#ctb-to) { grid-template-columns: minmax(0, 1fr); } .ctb-group:has(#ctb-sort) .ctb-label, .ctb-group:has(#ctb-cols) .ctb-label, .ctb-group:has(#ctb-page) .ctb-label, .ctb-group:has(#ctb-metric) .ctb-label, .ctb-group:has(#ctb-range) .ctb-label, .ctb-group:has(#ctb-from) .ctb-label, .ctb-group:has(#ctb-to) .ctb-label { min-height: 38px; border-inline-end: 0; border-bottom: 1px solid #e5e7eb; } html[dir="rtl"] .ctb-group:has(#ctb-sort) .ctb-label, html[dir="rtl"] .ctb-group:has(#ctb-cols) .ctb-label, html[dir="rtl"] .ctb-group:has(#ctb-page) .ctb-label, html[dir="rtl"] .ctb-group:has(#ctb-metric) .ctb-label, html[dir="rtl"] .ctb-group:has(#ctb-range) .ctb-label, html[dir="rtl"] .ctb-group:has(#ctb-from) .ctb-label, html[dir="rtl"] .ctb-group:has(#ctb-to) .ctb-label, body[dir="rtl"] .ctb-group:has(#ctb-sort) .ctb-label, body[dir="rtl"] .ctb-group:has(#ctb-cols) .ctb-label, body[dir="rtl"] .ctb-group:has(#ctb-page) .ctb-label, body[dir="rtl"] .ctb-group:has(#ctb-metric) .ctb-label, body[dir="rtl"] .ctb-group:has(#ctb-range) .ctb-label, body[dir="rtl"] .ctb-group:has(#ctb-from) .ctb-label, body[dir="rtl"] .ctb-group:has(#ctb-to) .ctb-label { border-left: 0; } } /* ========================================================= Catalog Final Shell Override ========================================================= */ body.catalog-page{ --layout-sidebar-width: 244px; --catalog-header-gap: 10px; --catalog-sidebar-offset: -12px; --catalog-sticky-top: calc(146px + var(--catalog-header-gap)); --toolbar-top: var(--catalog-sticky-top); --sidebar-top: var(--catalog-sticky-top); --toolbar-lift: 0px; --sidebar-lift: 0px; --toolbar-stick-top: calc(var(--toolbar-top) + var(--toolbar-lift)); --sidebar-stick-top: calc(var(--sidebar-top) + var(--sidebar-lift)); background: radial-gradient(circle at top left, color-mix(in srgb, var(--site-theme-surface-warm, #fffaf3) 70%, transparent) 0%, transparent 24%), radial-gradient(circle at top right, color-mix(in srgb, var(--site-theme-nav-start, #3f8d95) 14%, transparent) 0%, transparent 26%), var(--wm-gradient-page, linear-gradient(180deg, color-mix(in srgb, var(--site-theme-surface-cool, #edf4ff) 24%, white) 0%, color-mix(in srgb, var(--site-theme-surface-cool, #edf4ff) 12%, white) 100%)); } body.catalog-page .catalog-layout-shell{ width: 100%; max-width: none; margin: var(--catalog-header-gap) 0 0; padding: 14px 16px 24px; gap: 14px; } body.catalog-page .layout, body.catalog-page .layout.grid{ grid-template-columns: var(--layout-sidebar-width) minmax(0, 1fr); grid-template-areas: "sidebar content"; gap: 14px; padding: 0; align-items: start; } html[dir="rtl"] body.catalog-page .layout, html[dir="rtl"] body.catalog-page .layout.grid, body[dir="rtl"].catalog-page .layout, body[dir="rtl"].catalog-page .layout.grid{ grid-template-columns: minmax(0, 1fr) 220px; grid-template-areas: "content sidebar"; } body.catalog-page .layout > .sidebar, body.catalog-page .layout.grid > .sidebar{ top: calc(var(--catalog-sticky-top) + var(--catalog-sidebar-offset)) !important; margin-top: var(--catalog-sidebar-offset) !important; max-height: calc(100vh - (var(--sidebar-stick-top) + var(--catalog-sidebar-offset)) - 12px); padding-top: 0; } body.catalog-page .sidebar .card, body.catalog-page #catalog-sidebar .sbar-card{ border: 1px solid color-mix(in srgb, var(--site-theme-primary, #3f8d95) 14%, #dbe1ea); border-radius: 20px; background: var(--wm-gradient-panel, linear-gradient(180deg, #ffffff 0%, #fbfcff 100%)); box-shadow: 0 10px 24px rgba(15,23,42,.05); } body.catalog-page #catalog-sidebar .sbar-header{ padding: 12px 14px; } body.catalog-page #catalog-sidebar .card__body{ padding: 10px 12px 12px; } body.catalog-page .catalog-toolbar{ position: sticky; top: var(--catalog-sticky-top) !important; z-index: 90; margin-top: 0 !important; padding: 0; border: 1px solid color-mix(in srgb, var(--site-theme-primary, #3f8d95) 16%, #dbe1ea); border-radius: 24px; background: var(--wm-gradient-panel, linear-gradient(180deg, #ffffff 0%, #fbfcff 100%)); box-shadow: 0 14px 30px rgba(15,23,42,.06); } body.catalog-page .catalog-content-shell{ display: grid; align-content: start; gap: 12px; } body.catalog-page #catalog-results{ margin-top: 0; } body.catalog-page #catalog-sidebar{ margin-top: 0; margin-inline-start: 2px; padding-top: 0; } body.catalog-page #catalog-sidebar > .sbar-card:first-child, body.catalog-page .catalog-content-shell > .catalog-toolbar:first-child{ margin-top: 0; } body.catalog-page .ctb-form{ align-items: center; gap: 10px; padding: 12px; border: 0; border-radius: 24px; background: transparent; box-shadow: none; } body.catalog-page .ctb-group{ min-height: 40px; height: 40px; padding: 0 10px; border-radius: 15px; border: 1px solid color-mix(in srgb, var(--site-theme-primary, #3f8d95) 14%, #dbe1ea); background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); box-shadow: 0 4px 12px rgba(15,23,42,.035); } body.catalog-page .ctb-group.ctb-search{ flex: 999 1 420px; min-width: 340px; } body.catalog-page .ctb-group.ctb-view{ flex: 0 0 auto; padding: 3px; gap: 4px; } body.catalog-page .ctb-group.ctb-count, body.catalog-page .ctb-group.ctb-export, body.catalog-page .ctb-group.ctb-platform, body.catalog-page .ctb-group.ctb-filters{ flex: 0 0 auto; } body.catalog-page .ctb-group:has(#ctb-sort){ flex: 1 1 320px; } body.catalog-page .ctb-group:has(#ctb-cols), body.catalog-page .ctb-group:has(#ctb-page){ flex: 0 0 auto; } body.catalog-page .ctb-search input, body.catalog-page .ctb-select{ font-size: 12px; font-weight: 700; } body.catalog-page .ctb-view-btn, body.catalog-page .ctb-button{ min-height: 32px; padding-inline: 12px; border-radius: 12px; font-size: 11px; font-weight: 800; letter-spacing: .04em; } body.catalog-page .ctb-count-label{ font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: #64748b; } body.catalog-page .ctb-count-num{ font-size: 1rem; font-weight: 800; } body.catalog-page #ctb-sort-preset{ width: 110px !important; max-width: 110px !important; } body.catalog-page #ctb-sort{ width: 172px !important; max-width: 172px !important; } body.catalog-page .catalog-toolbar--sales, body.catalog-page .catalog-toolbar--cls{ padding: 0 12px 12px; } body.catalog-page .catalog-toolbar--sales .cls-toolbar-frame, body.catalog-page .catalog-toolbar--cls .cls-toolbar-frame{ border-radius: 18px; border: 1px solid color-mix(in srgb, var(--site-theme-primary, #3f8d95) 14%, #dbe1ea); background: linear-gradient(180deg, #fbfdff 0%, #f7faff 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 8px 18px rgba(15,23,42,.04); } body.catalog-page .catalog-content-shell, body.catalog-page #catalog-results, body.catalog-page .catalog-cards-view, body.catalog-page .catalog-rows-view, body.catalog-page .catalog-table-wrap{ width: 100%; max-width: none; min-width: 0; } body.catalog-page .grid.cols-mode{ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important; gap: 12px !important; justify-content: stretch !important; } body.catalog-page .card-wrapper, body.catalog-page .grid.cols-mode > .card-wrapper, body.catalog-page .grid.cols-mode > .card{ width: 100%; max-width: none; } body.catalog-page .card{ border-radius: 18px; border-color: color-mix(in srgb, var(--site-theme-primary, #3f8d95) 10%, #e2e8f0); box-shadow: 0 10px 24px rgba(15,23,42,.05); } @media (max-width: 1200px){ body.catalog-page{ --catalog-sticky-top: calc(178px + var(--catalog-header-gap)); } } @media (max-width: 1024px){ body.catalog-page{ --catalog-sidebar-offset: 0px; --catalog-sticky-top: calc(112px + var(--catalog-header-gap)); } body.catalog-page .layout, body.catalog-page .layout.grid{ grid-template-columns: 1fr; grid-template-areas: "content"; } body.catalog-page .layout > .sidebar, body.catalog-page .layout.grid > .sidebar{ position: fixed; inset: auto auto 0 0; top: 0; width: min(360px, 88vw); max-height: 100vh; height: 100vh; margin-top: 0; padding: 92px 12px 16px; background: rgba(245,248,252,.98); transform: translateX(-104%); transition: transform .22s ease; box-shadow: 24px 0 40px rgba(15,23,42,.16); } html[dir="rtl"] body.catalog-page .layout > .sidebar, html[dir="rtl"] body.catalog-page .layout.grid > .sidebar, body[dir="rtl"].catalog-page .layout > .sidebar, body[dir="rtl"].catalog-page .layout.grid > .sidebar{ inset: auto 0 0 auto; transform: translateX(104%); box-shadow: -24px 0 40px rgba(15,23,42,.16); } body.catalog-page.catalog-sidebar-open .layout > .sidebar, body.catalog-page.catalog-sidebar-open .layout.grid > .sidebar{ transform: translateX(0); } body.catalog-page .catalog-mobile-controls{ display: flex; align-items: center; justify-content: space-between; gap: 10px; grid-column: 1 / -1; padding: 0; } body.catalog-page .catalog-mobile-btn{ display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--site-theme-primary, #3f8d95) 14%, #dbe1ea); background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); color: #17253a; font-weight: 800; box-shadow: 0 8px 18px rgba(15,23,42,.05); } body.catalog-page .catalog-sidebar-backdrop{ position: fixed; inset: 0; background: rgba(15,23,42,.36); opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 70; } body.catalog-page.catalog-sidebar-open .catalog-sidebar-backdrop{ opacity: 1; pointer-events: auto; } body.catalog-page .ctb-group{ flex: 1 1 calc(50% - 5px); } body.catalog-page .ctb-group.ctb-search, body.catalog-page .ctb-group:has(#ctb-sort){ flex-basis: 100%; min-width: 0; } } @media (max-width: 768px){ body.catalog-page{ --catalog-sticky-top: calc(86px + var(--catalog-header-gap)); } body.catalog-page .catalog-layout-shell{ padding: 10px 8px 18px; } body.catalog-page .ctb-form{ padding: 10px; } body.catalog-page .ctb-group, body.catalog-page .ctb-group.ctb-view, body.catalog-page .ctb-group.ctb-count, body.catalog-page .ctb-group.ctb-export, body.catalog-page .ctb-group.ctb-platform, body.catalog-page .ctb-group.ctb-filters{ flex-basis: 100%; } body.catalog-page .grid.cols-mode{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 560px){ body.catalog-page .grid.cols-mode{ grid-template-columns: minmax(0, 1fr) !important; } } /* ========================================================= Header Unification Lock Catalog must follow shared global header visuals exactly ========================================================= */ body.catalog-page .gh{ padding: 10px 12px 12px !important; background: radial-gradient(circle at top left, rgba(255, 232, 184, .18) 0%, rgba(255,255,255,0) 24%), linear-gradient(180deg, #f8fbff 0%, #f1f6fd 100%) !important; border-bottom: 1px solid #dbe1ea !important; box-shadow: 0 10px 24px rgba(15,23,42,.05) !important; } body.catalog-page .gh__top{ display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; min-width: 0 !important; } body.catalog-page .gh__brand{ flex: 0 0 auto !important; } body.catalog-page .gh__brand__logo{ height: 58px !important; width: auto !important; filter: none !important; } body.catalog-page .gh__actions{ display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 8px !important; flex-wrap: wrap !important; width: auto !important; margin-inline-start: 0 !important; } body.catalog-page .gh__systembar{ display: grid !important; grid-template-columns: minmax(0, auto) minmax(0, 1fr) !important; align-items: stretch !important; gap: 10px !important; width: 100% !important; min-width: 0 !important; padding: 10px 12px !important; border: 1px solid #cfd8e3 !important; border-radius: 26px !important; background: linear-gradient(135deg, #2f4f73 0%, #17253a 100%) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 14px 30px rgba(31,61,70,.14) !important; } body.catalog-page .gh__nav{ display: flex !important; align-items: center !important; gap: 8px !important; min-width: 0 !important; width: auto !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } body.catalog-page .gh__quicktabs{ display: flex !important; align-items: center !important; min-width: 0 !important; width: auto !important; margin: 0 !important; padding: 0 !important; position: static !important; } body.catalog-page .gh__quicktabs__list{ display: flex !important; align-items: stretch !important; gap: 8px !important; width: 100% !important; min-width: 0 !important; overflow: auto hidden !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } body.catalog-page .gh__quicktab{ display: inline-flex !important; align-items: center !important; justify-content: space-between !important; flex: 1 1 180px !important; min-width: 170px !important; min-height: 44px !important; padding: .62rem .92rem !important; border-radius: 16px !important; border: 1px solid rgba(255,255,255,.08) !important; background: rgba(16,42,53,.24) !important; color: #f8fbfd !important; box-shadow: none !important; } body.catalog-page .gh__quicktab__group{ color: rgba(255,218,135,.92) !important; } body.catalog-page .gh__groupbtn, body.catalog-page .gh__quickaction, body.catalog-page .gh .lang-switcher__group, body.catalog-page .gh__iconbtn, body.catalog-page .gh__avatar{ border: 1px solid #cfd8e3 !important; background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%) !important; box-shadow: 0 6px 16px rgba(15,23,42,.04) !important; } body.catalog-page .gh__groupbtn{ min-width: 136px !important; min-height: 44px !important; padding: .52rem .92rem !important; border-radius: 16px !important; color: var(--site-theme-text-strong, #12203b) !important; font-weight: 800 !important; } body.catalog-page .gh__quickaction{ min-height: 42px !important; padding: .5rem .92rem !important; border-radius: 16px !important; } body.catalog-page .gh__iconbtn, body.catalog-page .gh__avatar{ width: 42px !important; height: 42px !important; border-radius: 14px !important; padding: 0 !important; } @media (max-width: 1180px){ body.catalog-page .gh__top{ flex-wrap: wrap !important; justify-content: flex-start !important; } body.catalog-page .gh__actions{ width: 100% !important; justify-content: flex-start !important; } body.catalog-page .gh__systembar{ grid-template-columns: 1fr !important; } } @media (max-width: 768px){ body.catalog-page .gh__nav{ display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } body.catalog-page .gh__groupbtn{ min-width: 0 !important; width: 100% !important; } body.catalog-page .gh__quicktabs__list{ display: grid !important; grid-template-columns: minmax(0, 1fr) !important; overflow: visible !important; } } @media (max-width: 560px){ body.catalog-page .gh__nav{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* ========================================================= Toolbar Rebuild Lock Unified desktop toolbar line + clean controls ========================================================= */ body.catalog-page .catalog-toolbar{ overflow: visible !important; } body.catalog-page .ctb-form{ display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; padding: 10px !important; overflow: visible !important; } body.catalog-page .ctb-group{ flex: 0 0 auto !important; min-height: 0 !important; height: auto !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } body.catalog-page .ctb-group.ctb-search{ order: 1; flex: 1 1 360px !important; min-width: 260px !important; max-width: none !important; min-height: 38px !important; height: 38px !important; padding: 0 12px !important; border: 1px solid color-mix(in srgb, var(--site-theme-primary, #3f8d95) 18%, #cfdae8) !important; border-radius: 14px !important; background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%) !important; box-shadow: 0 6px 14px rgba(15, 23, 42, .04) !important; } body.catalog-page .ctb-group.ctb-view{ order: 2; min-height: 38px !important; height: 38px !important; padding: 3px !important; border: 1px solid color-mix(in srgb, var(--site-theme-primary, #3f8d95) 18%, #cfdae8) !important; border-radius: 14px !important; background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%) !important; box-shadow: 0 6px 14px rgba(15, 23, 42, .04) !important; } body.catalog-page .ctb-group:has(#ctb-sort), body.catalog-page .ctb-group:has(#ctb-cols), body.catalog-page .ctb-group:has(#ctb-page), body.catalog-page .ctb-group.ctb-count{ display: inline-flex !important; align-items: center !important; gap: 8px !important; min-height: 38px !important; height: 38px !important; padding: 0 12px !important; border: 1px solid color-mix(in srgb, var(--site-theme-primary, #3f8d95) 18%, #cfdae8) !important; border-radius: 14px !important; background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%) !important; box-shadow: 0 6px 14px rgba(15, 23, 42, .04) !important; } body.catalog-page .ctb-group:has(#ctb-sort){ order: 20; flex: 0 0 auto !important; min-width: 0 !important; } body.catalog-page .ctb-sort-group{ cursor: pointer; } body.catalog-page .ctb-sort-group:not(.ctb-sort-open){ min-width: 128px !important; } body.catalog-page .ctb-sort-group:not(.ctb-sort-open) #ctb-sort-preset, body.catalog-page .ctb-sort-group:not(.ctb-sort-open) #ctb-sort{ display: none !important; } body.catalog-page .ctb-sort-group:not(.ctb-sort-open)::after{ content: attr(data-sort-summary); font-size: 12px; font-weight: 700; color: #1c2f49; white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; } body.catalog-page .ctb-sort-group.ctb-sort-open{ flex: 1 1 100% !important; width: 100%; min-height: 46px !important; height: auto !important; padding: 6px 10px !important; cursor: default; } body.catalog-page .ctb-sort-group.ctb-sort-open #ctb-sort-preset, body.catalog-page .ctb-sort-group.ctb-sort-open #ctb-sort{ display: inline-block !important; } body.catalog-page .ctb-group:has(#ctb-cols){ order: 21; } body.catalog-page .ctb-group:has(#ctb-page){ order: 22; } body.catalog-page .ctb-group:has(#ctb-sort) .ctb-label, body.catalog-page .ctb-group:has(#ctb-cols) .ctb-label, body.catalog-page .ctb-group:has(#ctb-page) .ctb-label{ margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #667790; } body.catalog-page .ctb-button, body.catalog-page .ctb-view-btn{ min-height: 38px !important; height: 38px !important; padding: 0 12px !important; border: 1px solid color-mix(in srgb, var(--site-theme-primary, #3f8d95) 18%, #cfdae8) !important; border-radius: 14px !important; background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%) !important; color: #132640 !important; box-shadow: 0 6px 14px rgba(15, 23, 42, .04) !important; } body.catalog-page .ctb-view-btn{ min-height: 30px !important; height: 30px !important; border-radius: 11px !important; padding: 0 14px !important; } body.catalog-page .ctb-button[aria-expanded="true"], body.catalog-page .ctb-view-btn.is-active{ background: linear-gradient(180deg, #17253a 0%, #0f1d32 100%) !important; border-color: #17253a !important; color: #f8fbff !important; box-shadow: 0 10px 18px rgba(15, 23, 42, .18) !important; } body.catalog-page .ctb-select{ height: 100% !important; border: 0 !important; background-color: transparent !important; color: #15263f !important; font-size: 13px !important; font-weight: 700 !important; padding: 0 28px 0 2px !important; } body.catalog-page .ctb-count-label{ font-size: 10px !important; font-weight: 800 !important; } body.catalog-page .ctb-count-num{ min-width: 0 !important; font-size: 18px !important; line-height: 1 !important; } body.catalog-page #ctb-sort-preset{ width: 86px !important; max-width: 86px !important; } body.catalog-page #ctb-sort{ width: 126px !important; max-width: 126px !important; } body.catalog-page #ctb-cols, body.catalog-page #ctb-page{ width: 56px !important; max-width: 56px !important; } body.catalog-page .ctb-group.ctb-platform{ order: 3; } body.catalog-page .ctb-group.ctb-filters{ order: 4; } body.catalog-page .ctb-group.ctb-export{ order: 5; } body.catalog-page .ctb-group.ctb-count{ order: 6; } body.catalog-page .ctb-group:has(label[for="ctb-sales-toggle"]){ order: 23; } body.catalog-page .ctb-group:has(#ctb-cls-toggle){ order: 24; } body.catalog-page .ctb-group:has(label[for="ctb-sales-toggle"]), body.catalog-page .ctb-group:has(#ctb-cls-toggle){ min-height: 38px !important; height: 38px !important; display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 0 !important; } body.catalog-page .ctb-btn-caret{ font-size: 0 !important; width: 12px; display: inline-flex; align-items: center; justify-content: center; } body.catalog-page .ctb-btn-caret::before{ content: "\25be"; font-size: 11px; line-height: 1; } body.catalog-page .ctb-button[aria-expanded="true"] .ctb-btn-caret::before{ content: "\25b4"; } body.catalog-page .catalog-toolbar--sales, body.catalog-page .catalog-toolbar--cls{ position: relative; inset: auto; top: auto; width: 100%; max-width: 100%; padding: 0 !important; margin: 8px 0 0 !important; z-index: 20; display: block; } body.catalog-page .catalog-toolbar--sales .classification-dropdown-wrapper, body.catalog-page .catalog-toolbar--cls .classification-dropdown-wrapper{ width: 100%; } body.catalog-page .catalog-toolbar--sales .cls-toolbar-frame, body.catalog-page .catalog-toolbar--cls .cls-toolbar-frame{ display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; justify-content: stretch; overflow-x: hidden; overflow-y: hidden; border-radius: 16px !important; border: 1px solid color-mix(in srgb, var(--site-theme-primary, #3f8d95) 18%, #cfdae8) !important; background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important; box-shadow: 0 18px 40px rgba(15, 23, 42, .14) !important; padding: 12px !important; } body.catalog-page .catalog-toolbar--sales .cls-dd-wrap{ display: flex; align-items: center; flex-wrap: nowrap; flex: 1 1 auto; min-width: 0; overflow-x: hidden; overflow-y: hidden; gap: 8px; } body.catalog-page .catalog-toolbar--sales .cls-dd-field{ flex: 1 1 0; min-width: 0; } body.catalog-page .catalog-toolbar--cls .cls-dd-wrap{ display: flex; align-items: center; flex-wrap: nowrap; flex: 1 1 auto; min-width: 0; overflow-x: hidden; overflow-y: hidden; gap: 8px; } body.catalog-page .catalog-toolbar--cls .cls-toolbar-head{ flex: 0 0 auto; } body.catalog-page .catalog-toolbar--cls .cls-dd-field{ display: inline-flex; align-items: center; gap: 6px; flex: 1 1 0; min-width: 0; } body.catalog-page .catalog-toolbar--cls .cls-dd-label{ margin: 0; font-size: 11px; font-weight: 800; white-space: nowrap; color: #5e7089; flex: 0 0 auto; } body.catalog-page .catalog-toolbar--cls .cls-dd-select, body.catalog-page .catalog-toolbar--sales .ctb-select{ min-height: 34px; width: 100%; min-width: 0; } body.catalog-page .catalog-toolbar--cls .cls-dd-actions{ display: flex !important; align-items: center; flex-wrap: nowrap; gap: 8px; margin-bottom: 0; white-space: nowrap; } body.catalog-page .catalog-toolbar--cls .cls-dd-actions .btn{ border-radius: 10px; border: 1px solid color-mix(in srgb, var(--site-theme-primary, #3f8d95) 18%, #cfdae8); background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%); min-height: 32px; padding: 0 12px; font-size: 12px; font-weight: 800; color: #15263f; box-shadow: 0 5px 12px rgba(15, 23, 42, .05); } body.catalog-page .catalog-toolbar--cls .cls-dd-actions .btn:hover{ border-color: #8fb2cf; background: #fff; } @media (max-width: 1024px){ body.catalog-page .ctb-form{ flex-wrap: wrap !important; overflow: visible !important; } body.catalog-page .ctb-group, body.catalog-page .ctb-group.ctb-search, body.catalog-page .ctb-group.ctb-view, body.catalog-page .ctb-group:has(#ctb-sort), body.catalog-page .ctb-group:has(#ctb-cols), body.catalog-page .ctb-group:has(#ctb-page), body.catalog-page .ctb-group.ctb-count{ flex: 1 1 calc(50% - 4px) !important; min-width: 0 !important; max-width: none !important; } body.catalog-page .catalog-toolbar--sales, body.catalog-page .catalog-toolbar--cls{ position: static; width: 100%; max-width: 100%; margin-top: 8px !important; } body.catalog-page .catalog-toolbar--sales .cls-toolbar-frame, body.catalog-page .catalog-toolbar--cls .cls-toolbar-frame{ overflow-x: auto; } body.catalog-page .catalog-toolbar--sales .cls-dd-wrap, body.catalog-page .catalog-toolbar--cls .cls-dd-wrap{ overflow-x: auto; } body.catalog-page .catalog-toolbar--sales .cls-dd-field{ flex: 0 0 180px; min-width: 180px; } body.catalog-page .catalog-toolbar--cls .cls-dd-field{ flex: 0 0 240px; min-width: 240px; } } @media (max-width: 768px){ body.catalog-page .ctb-group, body.catalog-page .ctb-group.ctb-search, body.catalog-page .ctb-group.ctb-view, body.catalog-page .ctb-group:has(#ctb-sort), body.catalog-page .ctb-group:has(#ctb-cols), body.catalog-page .ctb-group:has(#ctb-page), body.catalog-page .ctb-group.ctb-count{ flex-basis: 100% !important; } body.catalog-page .ctb-sort-group:not(.ctb-sort-open)::after{ max-width: none; } }