/* =====================================================================
   INGREDIENTS — Каталог / категорії · напрям B+ (Фаза 8)
   ===================================================================== */

/* Банер категорії */
.cat-banner{ position:relative; overflow:hidden; border-bottom:1px solid var(--line); background:var(--bg-2);
  padding-block:clamp(30px,5vw,52px); }
.cat-banner .container{ position:relative; z-index:1; }
.cat-crumbs, .cat-banner .woocommerce-breadcrumb{ font-size:13px; color:var(--tx-dim); margin-bottom:14px; }
.cat-crumbs a, .cat-banner .woocommerce-breadcrumb a{ color:var(--tx-mut); }
.cat-crumbs a:hover{ color:var(--acc); }
.cat-banner__title{ font-size:clamp(28px,4.5vw,46px); margin:0; }
.cat-banner__intro{ color:var(--tx-mut); max-width:70ch; margin-top:14px; }
.cat-banner__intro p{ margin:0 0 .6em; }

/* Розкладка каталогу */
.catalog-layout{ display:grid; grid-template-columns:264px minmax(0,1fr); gap:32px; align-items:start;
  padding-block:clamp(28px,4vw,44px); }

/* Панель фільтрів (Фаза 9) */
.catalog-filters{ position:sticky; top:88px; max-height:calc(100vh - 104px); overflow-y:auto; overscroll-behavior:contain; }
.catalog-filters::-webkit-scrollbar{ width:8px; }
.catalog-filters::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:8px; }
.catalog-filters::-webkit-scrollbar-track{ background:transparent; }
.catalog-filters__toggle{ display:none; }
.cf{ background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:16px 16px 18px; }
.cf__head{ display:flex; align-items:center; justify-content:space-between; font-family:var(--font-display); font-weight:700; font-size:15px; padding-bottom:8px; }
.cf__reset{ font-family:var(--font-body); font-size:12.5px; font-weight:500; color:var(--acc); }
.cf__grp{ border-top:1px solid var(--line); padding:13px 0 5px; }
.cf__grp--first{ border-top:0; padding-top:2px; }
.cf__lbl{ display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--tx-dim); font-weight:700; margin-bottom:10px; }
.cf__search{ width:100%; background:var(--bg-2); border:1px solid var(--line-2); border-radius:9px; color:var(--tx); padding:9px 12px; font:inherit; font-size:14px; }
.cf__search:focus{ outline:none; border-color:var(--acc); }
.cf__search::placeholder{ color:var(--tx-dim); }

.cf__row{ display:flex; align-items:center; gap:9px; font-size:14px; color:var(--tx-mut); padding:5px 0; cursor:pointer; }
.cf__row:hover{ color:var(--tx); }
.cf__row input{ position:absolute; opacity:0; width:0; height:0; }
.cf__box{ width:16px; height:16px; border:1px solid var(--line-2); border-radius:4px; flex:0 0 auto; position:relative; transition:.15s; }
.cf__row input:checked + .cf__box{ background:var(--acc); border-color:var(--acc); }
.cf__row input:checked + .cf__box::after{ content:""; position:absolute; inset:0; margin:auto; width:9px; height:9px; background:var(--on-acc);
  clip-path:polygon(14% 44%,0 60%,43% 100%,100% 20%,84% 8%,40% 62%); }
.cf__row input:checked ~ *{ color:var(--tx); }
.cf-cnt{ margin-left:auto; font-family:var(--font-mono); font-size:12px; color:var(--tx-dim); }

.cf-tree{ list-style:none; margin:0; padding:0; display:grid; gap:1px; }
.cf-tree--sub{ margin:1px 0 3px 9px; border-left:1px solid var(--line); padding-left:5px; }
.cf-node__row{ display:flex; align-items:center; gap:2px; }
.cf-node__tw{ width:18px; height:24px; flex:0 0 auto; background:none; border:0; color:var(--tx-dim); font-size:10px; cursor:pointer; padding:0; display:grid; place-items:center; }
.cf-node__tw:hover{ color:var(--acc); }
.cf-node__tw--leaf{ cursor:default; }
.cf-node__row > a{ flex:1; display:flex; align-items:center; gap:8px; color:var(--tx-mut); font-size:14px; padding:5px 6px; border-radius:7px; }
.cf-node__row > a:hover{ color:var(--tx); background:var(--surface-2); text-decoration:none; }
.cf-node__row > a[aria-current]{ color:var(--acc); font-weight:600; }
.cf-node .cf-cnt{ color:var(--tx-dim); }
.cf-node > .cf-tree--sub{ display:none; }
.cf-node.is-open > .cf-tree--sub{ display:block; }

.cf__toggle{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--tx); padding:2px 0 10px; cursor:pointer; }
.cf__toggle input{ position:absolute; opacity:0; }
.cf__sw{ width:34px; height:19px; border-radius:999px; background:var(--line-2); position:relative; flex:0 0 auto; transition:.2s; }
.cf__sw::after{ content:""; position:absolute; width:15px; height:15px; border-radius:50%; background:#fff; top:2px; left:2px; transition:.2s; }
.cf__toggle input:checked + .cf__sw{ background:var(--acc); }
.cf__toggle input:checked + .cf__sw::after{ left:17px; background:var(--on-acc); }
.cf__pills{ display:flex; flex-wrap:wrap; margin-top:2px; }
.cf__pill{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; padding:6px 10px; border-radius:8px; border:1px solid var(--line-2); color:var(--tx-mut); cursor:pointer; margin:0 6px 6px 0; transition:.15s; }
.cf__pill:hover{ color:var(--tx); }
.cf__pill.is-on, .cf__pill:has(input:checked){ border-color:var(--acc); color:var(--acc); background:color-mix(in srgb,var(--acc) 8%,transparent); }
.cf__pill b{ font-family:var(--font-mono); color:var(--tx); }
.cf__pill.is-on b, .cf__pill:has(input:checked) b{ color:var(--acc); }
.cf__pill .cf-cnt{ margin-left:2px; }

.cf__scroll{ display:grid; }
.cf__apply{ display:flex; gap:8px; margin-top:14px; }
.cf__apply .btn{ flex:1; justify-content:center; }

.cf-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.cf-chip{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; padding:6px 11px; border-radius:999px;
  background:color-mix(in srgb,var(--acc) 12%,transparent); border:1px solid color-mix(in srgb,var(--acc) 40%,var(--line)); color:var(--acc); }
.cf-chip:hover{ text-decoration:none; border-color:var(--acc); }
.cf-chip i{ font-style:normal; opacity:.7; }
.cf-chip--reset{ background:transparent; border-color:var(--line-2); color:var(--tx-mut); }

/* Тулбар (кількість + сортування) */
.catalog-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.woocommerce-result-count{ color:var(--tx-dim); font-size:14px; margin:0; }
.woocommerce-ordering select, .catalog-toolbar select{ background:var(--surface); color:var(--tx); border:1px solid var(--line-2); border-radius:9px; padding:9px 12px; font:inherit; font-size:14px; }

/* Сітка товарів (перевизначення дефолту Woo) */
.woocommerce ul.products{ display:grid !important; grid-template-columns:repeat(3,1fr); gap:18px; margin:0 !important; padding:0; list-style:none; }
.woocommerce ul.products::before, .woocommerce ul.products::after{ display:none !important; }

/* Картка «спец» (Варіант A) */
.prodcard{ position:relative; width:auto !important; margin:0 !important; float:none !important; padding:0 !important;
  background:linear-gradient(180deg,rgba(255,255,255,.02),transparent 55%),var(--surface);
  border:1px solid var(--line); border-radius:18px; overflow:hidden; text-align:left;
  display:flex; flex-direction:column; transition:transform .2s, border-color .2s; }
.prodcard:hover{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--acc) 45%, var(--line)); }
.prodcard .onsale{ display:none; }

.prodcard__media{ position:relative; display:block; aspect-ratio:3/4; background:var(--bg); border-bottom:1px solid var(--line); overflow:hidden; }
.prodcard__media img{ display:block; width:100% !important; height:100% !important; object-fit:contain;
  margin:0 !important; padding:0 !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; max-width:none !important; }
.prodcard__media--img{ background:var(--bg); }
.prodcard__media--img img{ object-fit:contain !important; padding:9% !important; }
.prodcard__media--ph{ background:var(--bg); }
.prodcard__badge{ position:absolute; top:12px; left:12px; z-index:2; display:inline-flex; align-items:center;
  font-family:var(--font-display); font-weight:700; font-size:11.5px; padding:5px 10px; border-radius:999px; }
.prodcard__badge.is-in{ color:#0b1a05; background:var(--ok); }
.prodcard__badge.is-order{ color:#2a1602; background:var(--neon-orange); }
.prodcard__ecode{ position:absolute; top:12px; right:12px; z-index:2; font-family:var(--font-mono); font-size:11px; letter-spacing:.06em;
  color:var(--acc); border:1px solid color-mix(in srgb, var(--acc) 40%, var(--line));
  background:color-mix(in srgb, var(--acc) 8%, transparent); padding:4px 8px; border-radius:7px; }

.prodcard__body{ padding:15px 16px 4px; }
.prodcard__cat{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--tx-dim); }
.prodcard__title{ font-family:var(--font-display); font-size:16px; font-weight:700; line-height:1.25; margin:8px 0 10px; }
.prodcard__title a{ color:#fff; }
.prodcard__title a:hover{ color:var(--acc); text-decoration:none; }
.prodcard__meta{ font-family:var(--font-mono); font-size:12px; color:var(--tx-mut); }
.prodcard__foot{ display:grid; grid-template-columns:1fr auto; gap:8px; padding:14px 16px 16px; margin-top:auto; }
.prodcard__foot .btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; text-align:center; }

/* Фірмовий плейсхолдер (товар без фото) */
.prodph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.prodph__glow{ position:absolute; width:180px; height:180px; border-radius:50%; filter:blur(50px); opacity:.18; top:-40px; right:-30px; background:var(--pc); }
.prodph__motif{ position:absolute; inset:0; width:100%; height:100%; opacity:.13; color:var(--tx-mut);
  fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.prodph__wm{ position:relative; font-family:var(--font-display); font-weight:800; font-size:15px; letter-spacing:.06em; color:#20232b; }

/* Пагінація */
.woocommerce-pagination{ margin-top:30px; }
.woocommerce-pagination ul{ display:flex; gap:6px; list-style:none; padding:0; border:0 !important; }
.woocommerce-pagination a, .woocommerce-pagination span{ display:grid; place-items:center; min-width:40px; height:40px; padding:0 10px;
  background:var(--surface); border:1px solid var(--line) !important; border-radius:9px; color:var(--tx-mut); }
.woocommerce-pagination .current{ background:var(--acc); color:var(--on-acc); border-color:var(--acc) !important; }
.woocommerce-pagination a:hover{ border-color:var(--acc) !important; color:var(--acc); }

/* Порожньо */
.catalog-empty{ position:relative; overflow:hidden; text-align:center; padding:60px 20px; border:1px solid var(--line); border-radius:16px; background:var(--surface); }
.catalog-empty p{ color:var(--tx-mut); position:relative; z-index:1; }

/* Адаптив */
@media (max-width:1100px){
  .woocommerce ul.products{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  .catalog-layout{ grid-template-columns:1fr; gap:18px; }
  .catalog-filters{ position:static; max-height:none; overflow:visible; }
  .catalog-filters__toggle{ display:inline-flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line-2); color:var(--tx); padding:11px 16px; border-radius:10px; font-weight:600; cursor:pointer; }
  .catalog-filters__panel{ display:none; margin-top:12px; }
  .catalog-filters.is-open .catalog-filters__panel{ display:block; }
}
@media (max-width:520px){
  .woocommerce ul.products{ grid-template-columns:1fr 1fr; gap:12px; }
  .prodcard__title{ font-size:14px; }
  .prodcard__foot{ grid-template-columns:1fr; }
}