/**
 * Product category / shop archive page.
 *
 * Styles the design's category layout (woocommerce/archive-product.php): breadcrumb,
 * category head, sidebar (dynamic category tree + widgetised filters + help card),
 * trust info band, toolbar, product grid, pagination and the category description.
 * The base `.cat-tree` recipe is shared with the header drawer (components/header.css);
 * only the sidebar deltas live here. The `.pcard` grid card is styled in
 * components/product-card.css.
 */

/* ---- Breadcrumb + headline ---- */
.breadcrumb { font-size: 12.5px; color: var(--muted); padding: 14px 0 2px; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--teal); }

.cat-head { display: flex; align-items: center; gap: 16px; margin: 6px 0 22px; }
.leaf-mark {
  width: 46px; height: 46px; flex: none; border-radius: 50%;
  background: var(--teal-50); color: var(--green-600);
  display: flex; align-items: center; justify-content: center;
}
.leaf-mark svg { width: 24px; height: 24px; }
.cat-head h1 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 0; color: var(--ink); }

/* ---- Two-column layout ---- */
.cat-layout {
  display: grid; grid-template-columns: 288px minmax(0, 1fr); gap: 28px;
  align-items: start; padding-bottom: 8px;
}

/* Shared card shell (same recipe as the product page card). */
.cat-layout .card,
.content .card {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px;
}
.cat-layout .card.flush { padding: 0; overflow: hidden; }

/* ---- Sidebar ---- */
.sidebar { position: sticky; top: var(--anchor-offset); display: flex; flex-direction: column; gap: 14px; }
.side-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 12px;
}
.side-title svg { width: 15px; height: 15px; color: var(--green-600); }

/* Sidebar category-tree deltas over the shared base (components/header.css). */
/* Rows and sub-rows lead with the term's own thumbnail (archive-product.php
   $bionela_cat_glyph). Scoped to .sidebar on purpose: the header drawer reuses
   .cat-tree and still renders the flat tag glyph. Terms without an image fall
   back to that glyph here too, so both shapes share the same framed box.
   The frame is an outline rather than the filled tint the .trust .ico badges
   use — product shots are already light, so a fill would wash them out. */
.sidebar .cat-tree .ic {
  flex: none;
  display: flex; align-items: center; justify-content: center;
  padding: 2px; background: none;
  border: 1px solid var(--line); border-radius: 7px;
  opacity: 1;
}
.sidebar .cat-tree .row .ic { width: 30px; height: 30px; }
.sidebar .cat-tree .sub .ic { width: 24px; height: 24px; border-radius: 6px; }
.sidebar .cat-tree .ic .ic-img {
  display: block; width: 100%; height: 100%;
  object-fit: contain; border-radius: 4px;
}
/* The glyph fallback keeps its own stroke colour but must not fill the frame. */
.sidebar .cat-tree .ic svg { width: 65%; height: 65%; }
/* The leaf bullet is replaced by the framed thumbnail on sub-rows. */
.sidebar .cat-tree .sub a::before { content: none; }
/* On the active (teal) sub-row a --line border disappears; lift it instead. */
.sidebar .cat-tree .sub a.active .ic { border-color: rgba(255, 255, 255, .5); }
.sidebar .cat-tree .row .label { color: var(--ink); font-weight: 500; }
.sidebar .cat-tree .row .label:hover { text-decoration: none; }
.sidebar .cat-tree li.open > .row .label { color: var(--teal); font-weight: 700; }
.sidebar .cat-tree .row.is-current { color: var(--teal); font-weight: 700; background: var(--teal-50); }
.sidebar .cat-tree .sub a.active { background: var(--teal); color: #fff; font-weight: 650; }
.sidebar .cat-tree .sub a.active::before { filter: brightness(0) invert(1); }

/* Filters widget area (FiboSearch etc.). */
.side-filters .widget { margin: 0 0 12px; }
.side-filters .widget:last-child { margin-bottom: 0; }
.side-filters .widgettitle { font-size: 13px; font-weight: 700; margin: 0 0 11px; color: var(--ink); }

/* Help card. */
.side-help { display: flex; align-items: center; gap: 13px; }
.side-help .avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: var(--teal); color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px;
}
.side-help .t1 { font-size: 14px; font-weight: 650; }
.side-help .t2 { font-size: 12.5px; color: var(--muted); }
.side-help .t2 a { font-weight: 600; }

/* ---- Content: trust band ---- */
.trust { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; }
.trust .group { display: flex; gap: 12px; align-items: center; padding: 14px 18px; }
.trust .group + .group { border-left: 1px solid var(--line-soft); }
.trust .ico {
  width: 36px; height: 36px; flex: none; border-radius: 9px;
  background: var(--teal-50); color: var(--teal);
  display: flex; align-items: center; justify-content: center;
}
.trust .ico svg { width: 19px; height: 19px; }
.trust .lbl { font-size: 12.5px; color: var(--muted); }
.trust .val { font-size: 14px; font-weight: 700; color: var(--ink); }
/* Let a widget in a trust cell fill the row cleanly. */
.trust .group > .widget { flex: 1; }

/* Full-width widget area under the trust band. */
.cat-info-below { margin-top: 14px; }
.cat-info-below .widget + .widget { margin-top: 14px; }

/* ---- Toolbar ---- */
.cat-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  margin: 24px 0 16px;
}
.result-count { font-size: 13.5px; color: var(--muted); margin: 0; }
.result-count strong { color: var(--ink); font-weight: 700; }

/* Catalog ordering rendered as design sort tabs (links) instead of a <select>. */
.sort-tabs { display: flex; gap: 2px; flex-wrap: wrap; }
.sort-btn {
  background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 600; color: var(--muted);
  padding: 8px 12px; border-radius: 8px; transition: .12s; text-decoration: none;
}
.sort-btn:hover { color: var(--ink); background: var(--teal-50); text-decoration: none; }
.sort-btn.active { color: #fff; background: var(--teal); }

.filter-toggle {
  display: none; align-items: center; gap: 8px;
  background: var(--bg); border: 1.5px solid var(--line); border-radius: 9px;
  font-family: inherit; font-size: 13.5px; font-weight: 650; color: var(--ink);
  padding: 9px 14px; cursor: pointer;
}
.filter-toggle svg { width: 17px; height: 17px; color: var(--teal); }

/* ---- Product grid: style WooCommerce's ul.products as the design grid ---- */
.content ul.products {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  list-style: none; margin: 0; padding: 0;
}
.content ul.products::before,
.content ul.products::after { content: none; display: none; }
.content ul.products li.product { width: auto; margin: 0; float: none; }

/* WooCommerce notices above the grid. */
.content .woocommerce-notices-wrapper:not(:empty) { margin-bottom: 16px; }
.content .woocommerce-info,
.content .woocommerce-message { border-radius: var(--radius); }

/* ---- Pagination (woocommerce_pagination) ---- */
.woocommerce-pagination { margin: 30px 0 14px; }
.woocommerce-pagination ul {
  display: flex; justify-content: center; align-items: center; gap: 8px;
  list-style: none; margin: 0; padding: 0; border: none;
}
.woocommerce-pagination ul li { border: none; margin: 0; }
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
  min-width: 40px; height: 40px; padding: 0 12px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 650; color: var(--ink);
  border: 1.5px solid var(--line); background: var(--bg);
}
.woocommerce-pagination ul li a:hover { border-color: var(--teal); background: var(--teal-50); text-decoration: none; }
.woocommerce-pagination ul li span.current {
  background: var(--teal); border-color: var(--teal); color: #fff;
}

/* ---- Category description (soup hero) ---- */
.cat-hero { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; align-items: center; padding: 18px; }
.cat-desc { margin-top: 28px; }
/* No tinted backdrop: this frame used to hold a flat mockup illustration, but it
   now holds real product photography shot on white, so any tint reads as bands
   down the sides of a square photo. */
.cat-hero .category-desc__media {
  aspect-ratio: 4/3; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
}
/* Term thumbnails are mostly tiny legacy icons (60×34px) — never upscale them;
   scale down only when the (rare) image is larger than the frame. */
.cat-hero .category-desc__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
/* Two classes deep on purpose: the responsive .cat-hero overrides below are the
   same specificity and come later in the file, so a single-class rule here would
   lose to them and a media-less card would get a phantom empty column at 681–980px. */
.cat-hero.cat-hero--no-media { grid-template-columns: 1fr; }
.cat-hero .copy p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.62; color: #33403d; }
.cat-hero .copy p:last-of-type { margin-bottom: 0; }
.cat-hero .copy .clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cat-hero .copy.expanded .clamp { -webkit-line-clamp: unset; }
.read-more { display: inline-block; margin-top: 10px; font-size: 13.5px; font-weight: 700; color: var(--teal); cursor: pointer; }
.read-more:hover { text-decoration: underline; }

/* ---- Feature strip (dark band, reused from the design) ---- */
.feature-strip { background: var(--dark-2); color: var(--dark-text); margin-top: 52px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; padding: 46px 0; }
.feature { display: flex; flex-direction: column; gap: 12px; }
.feature .f-ico { width: 40px; height: 40px; color: var(--green); }
.feature h3 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: .01em; color: #fff; text-transform: uppercase; }
.feature p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--dark-text-soft); max-width: 330px; }
.feature .more { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--green); }
.feature .more:hover { color: #fff; }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .content ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
  .cat-layout { grid-template-columns: 1fr; }
  .sidebar { position: static; display: none; }
  .sidebar.open { display: flex; }
  .filter-toggle { display: inline-flex; }
  .cat-hero { grid-template-columns: 200px minmax(0, 1fr); }
  .feature-grid { grid-template-columns: 1fr; gap: 30px; padding: 38px 0; }
}
@media (max-width: 680px) {
  .cat-head h1 { font-size: 23px; }
  .leaf-mark { width: 40px; height: 40px; }
  .trust { grid-template-columns: 1fr; }
  .trust .group + .group { border-left: none; border-top: 1px solid var(--line-soft); }
  .cat-hero { grid-template-columns: 1fr; }
  .cat-hero .category-desc__media { max-width: 260px; }
  .cat-toolbar { flex-direction: column; align-items: stretch; }
  .sort-tabs { order: 2; overflow-x: auto; }
  /* The global .wrap padding is 5px — too tight for the strip's bare text. */
  .feature-strip .wrap { padding: 0 16px; }
  .feature-grid { gap: 26px; padding: 32px 0; }
  .feature h3 { font-size: 16px; }
  .feature p { max-width: none; }
}
@media (max-width: 520px) {
  .content ul.products { gap: 10px; }
}
@media (max-width: 374px) {
  .content ul.products { grid-template-columns: 1fr; }
}