/*
Theme Name: Ford Cargo
Description: Shop theme for ford-cargo.com.ua - truck parts catalogue. Categories in a
             left sidebar, products in the centre. Classic PHP templates, no page builder.
Version: 1.0.0
Requires PHP: 8.0
Text Domain: fordcargo
*/

/* ---------------------------------------------------------------- tokens -- */
:root {
  --c-text:        #1c2024;
  --c-muted:       #6b7480;
  --c-line:        #e2e5e9;
  --c-bg:          #ffffff;
  --c-bg-soft:     #f6f7f9;
  --c-accent:      #0b5ed7;
  --c-accent-dark: #0a4fb5;
  --c-price:       #14181c;
  --c-instock:     #1a7f43;
  --c-outstock:    #b02a2a;

  --sidebar-w: 260px;
  --gap:       24px;
  --radius:    6px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ------------------------------------------------------------- baseline -- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--c-text);
  background: var(--c-bg);
}

img { max-width: 100%; height: auto; display: block; }
a   { color: var(--c-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

/* Visible only to screen readers, but focusable for keyboard users. */
.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ----------------------------------------------------------------- head -- */
.site-header {
  border-bottom: 1px solid var(--c-line);
  background: var(--c-bg);
}
.site-header__bar {
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: 14px 0;
}
.site-branding__name {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--c-text);
  margin: 0;
  white-space: nowrap;
}
.site-branding__name a { color: inherit; }
.site-branding__desc {
  font-size: .8rem;
  color: var(--c-muted);
  margin: 2px 0 0;
}

.header-search { flex: 1 1 auto; max-width: 520px; }
.header-search form { display: flex; }
.header-search input[type="search"] {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--c-line);
  border-right: 0;
  border-radius: var(--radius) 0 0 var(--radius);
  font: inherit;
}
.header-search button {
  padding: 9px 18px;
  border: 0;
  background: var(--c-accent);
  color: #fff;
  font: inherit;
  cursor: pointer;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.header-search button:hover { background: var(--c-accent-dark); }

/* --------------------------------------------------------- lang switch -- */
.lang-switch {
  margin-left: auto;
  display: flex;
  gap: 2px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
  flex: 0 0 auto;
}
.lang-switch__item {
  padding: 6px 11px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--c-muted);
  background: var(--c-bg);
}
.lang-switch__item:hover { background: var(--c-bg-soft); text-decoration: none; }
.lang-switch__item.is-current {
  background: var(--c-accent);
  color: #fff;
}

/* The switcher carries margin-left:auto, so it and everything after it sit as a
   group on the right. Whichever element comes first after the search box falls
   back to auto when the switcher is absent. */
.header-account {
  margin-left: 16px;
  white-space: nowrap;
  font-weight: 600;
  font-size: .92rem;
  color: var(--c-text);
}
.header-account:hover { color: var(--c-accent); text-decoration: none; }

.header-cart {
  margin-left: 16px;
  white-space: nowrap;
  font-weight: 600;
  color: var(--c-text);
}
.header-search + .header-account,
.header-search + .header-cart { margin-left: auto; }
.header-cart__count {
  display: inline-block;
  min-width: 20px;
  padding: 0 6px;
  margin-left: 6px;
  background: var(--c-accent);
  color: #fff;
  border-radius: 10px;
  font-size: .78rem;
  text-align: center;
  line-height: 20px;
}

/* ----------------------------------------------------------------- nav --- */
.site-nav { border-top: 1px solid var(--c-line); }
.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 10px 0;
  font-size: .92rem;
}
.site-nav a { color: var(--c-text); }

/* --------------------------------------------------------------- layout -- */
.layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  gap: var(--gap);
  align-items: start;
  padding: var(--gap) 0 48px;
}
.layout--full { grid-template-columns: 1fr; }

/* -------------------------------------------------------------- sidebar -- */
.sidebar { min-width: 0; }

.widget {
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  margin-bottom: 18px;
  overflow: hidden;
}
.widget__title {
  margin: 0;
  padding: 11px 14px;
  font-size: .95rem;
  font-weight: 700;
  background: var(--c-bg-soft);
  border-bottom: 1px solid var(--c-line);
}

.cat-list { list-style: none; margin: 0; padding: 0; }
.cat-list li + li { border-top: 1px solid var(--c-line); }
.cat-list a {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 14px;
  color: var(--c-text);
  font-size: .9rem;
}
.cat-list a:hover { background: var(--c-bg-soft); text-decoration: none; }
.cat-list .is-active > a { background: #eaf1fd; font-weight: 600; color: var(--c-accent-dark); }
.cat-list__count { color: var(--c-muted); font-size: .82rem; }
/* Categories with no products still show, but read as unavailable. */
.cat-list .is-empty > a { color: var(--c-muted); }

/* Sidebar toggle - only meaningful on small screens. */
.sidebar-toggle {
  display: none;
  width: 100%;
  padding: 11px 14px;
  margin-bottom: 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-bg-soft);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.sidebar-toggle::after { content: " ▾"; }
.sidebar-toggle[aria-expanded="true"]::after { content: " ▴"; }

/* --------------------------------------------------------------- content -- */
.content { min-width: 0; }

.page-title { margin-bottom: 4px; }
.term-description { color: var(--c-muted); margin-bottom: 16px; }

.woocommerce-breadcrumb {
  font-size: .85rem;
  color: var(--c-muted);
  margin-bottom: 12px;
}
.woocommerce-breadcrumb a { color: var(--c-muted); }

.shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 10px 0 16px;
  border-bottom: 1px solid var(--c-line);
  margin-bottom: 20px;
}
.woocommerce-result-count { margin: 0; color: var(--c-muted); font-size: .88rem; }
.woocommerce-ordering { margin-left: auto; }
.woocommerce-ordering select {
  padding: 7px 10px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  font: inherit;
}

/* ------------------------------------------------------------- products -- */
/* WooCommerce ships float-based grid CSS (.columns-4, li.product width/margin)
   that fights a grid layout. Override it rather than dequeue the stylesheet,
   which also carries the notice and form styling we do want. */
.woocommerce ul.products,
ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none !important; }

.woocommerce ul.products li.product,
ul.products li.product {
  /* Beat WooCommerce's `width: 22.05%; float: left; margin-right: 3.8%`. */
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  clear: none !important;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--c-bg);
  transition: box-shadow .15s ease, border-color .15s ease;
}
ul.products li.product:hover {
  border-color: #c9d3e0;
  box-shadow: 0 2px 10px rgba(16, 24, 40, .08);
}
ul.products li.product a.woocommerce-LoopProduct-link { color: inherit; }

.product__thumb {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 10px;
  background: var(--c-bg-soft);
  border-radius: 4px;
}
.product__thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.product__thumb--empty {
  color: var(--c-muted);
  font-size: .8rem;
  text-align: center;
  padding: 8px;
}

ul.products li.product .woocommerce-loop-product__title {
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.35;
  margin: 0 0 8px;
  /* Clamp to three lines so tiles stay level. -webkit-box needs an explicit
     height rather than min-height: with min-height the box can overflow its
     own line box and print over the SKU beneath it. */
  height: calc(3 * 1.35em);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product__sku {
  font-size: .76rem;
  color: var(--c-muted);
  margin-bottom: 6px;
}
ul.products li.product .price {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--c-price);
  margin: auto 0 8px;   /* pushes price to the bottom of the tile */
}
.stock-badge { font-size: .78rem; margin-bottom: 8px; }
.stock-badge--in  { color: var(--c-instock); }
.stock-badge--out { color: var(--c-outstock); }

/* --------------------------------------------------------------- buttons -- */
/* WooCommerce's block stylesheet themes .wc-block-components-button and
   .single_add_to_cart_button with its own accent, so these need to be at
   least as specific to win. */
.button,
.wp-element-button,
ul.products li.product .button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce .button.alt,
.woocommerce button.button.alt,
.woocommerce #respond input#submit,
.woocommerce form.cart button.single_add_to_cart_button,
button.single_add_to_cart_button {
  display: inline-block;
  padding: 9px 16px;
  border: 0;
  border-radius: var(--radius);
  background: var(--c-accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
}
.button:hover,
ul.products li.product .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button.alt:hover,
.woocommerce form.cart button.single_add_to_cart_button:hover,
button.single_add_to_cart_button:hover {
  background: var(--c-accent-dark);
  color: #fff;
  text-decoration: none;
}
ul.products li.product .button { width: 100%; }
.button--ghost {
  background: transparent;
  color: var(--c-accent);
  border: 1px solid var(--c-line);
}
.button--ghost:hover { background: var(--c-bg-soft); color: var(--c-accent-dark); }

/* -------------------------------------------------------- single product -- */
.product-single {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
  margin-bottom: 32px;
}
.product-single__gallery img { border: 1px solid var(--c-line); border-radius: var(--radius); }

/* The product title is long (part name + article + model). Keep it readable
   rather than letting the h1 size run away in a narrow column. */
.product-single__summary .page-title {
  font-size: 1.35rem;
  line-height: 1.3;
  margin-bottom: 10px;
}
.product-single__summary .price {
  font-size: 1.7rem;
  font-weight: 700;
  margin: 6px 0 12px;
}
/* Legacy stock counts are placeholders (999), so the exact figure is
   meaningless - the in/out badge above already says what matters. */
.product-single__summary .stock.in-stock,
.product-single__summary p.stock { display: none; }
.product-meta {
  list-style: none;
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--c-line);
  font-size: .9rem;
  color: var(--c-muted);
}
.product-meta li + li { margin-top: 5px; }

.quantity input[type="number"] {
  width: 72px;
  padding: 9px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  font: inherit;
}
form.cart { display: flex; gap: 10px; align-items: center; margin: 16px 0; }

.woocommerce-tabs { margin-top: 8px; }
.woocommerce-tabs ul.tabs {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0 0 -1px;
  padding: 0;
}
.woocommerce-tabs ul.tabs li {
  border: 1px solid var(--c-line);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--c-bg-soft);
}
.woocommerce-tabs ul.tabs li.active { background: var(--c-bg); }
.woocommerce-tabs ul.tabs a { display: block; padding: 9px 16px; color: var(--c-text); }
.woocommerce-tabs .panel {
  border: 1px solid var(--c-line);
  border-radius: 0 var(--radius) var(--radius) var(--radius);
  padding: 18px;
}

/* ----------------------------------------------------------- pagination -- */
.woocommerce-pagination ul {
  display: flex;
  gap: 6px;
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
}
.woocommerce-pagination a,
.woocommerce-pagination span {
  display: block;
  min-width: 38px;
  padding: 8px 10px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  text-align: center;
  color: var(--c-text);
}
.woocommerce-pagination .current {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
}

/* ------------------------------------------------------- account / cart -- */

/* WooCommerce ships tables and forms with almost no styling of its own once the
   block cart is replaced by the classic shortcodes, so give them the same
   borders, radii and accent as the rest of the shop. */
.woocommerce table.shop_table,
.woocommerce table.my_account_orders,
.woocommerce table.woocommerce-orders-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 20px;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--c-line);
  text-align: left;
  vertical-align: middle;
}
.woocommerce table.shop_table thead th {
  background: var(--c-bg-soft);
  font-size: .88rem;
  font-weight: 700;
}
.woocommerce table.shop_table tbody tr:last-child td { border-bottom: 0; }
.woocommerce table.shop_table img { width: 56px; border-radius: 4px; }

/* Wide tables must scroll inside themselves rather than the page. */
.woocommerce-orders-table-wrapper,
.woocommerce .cart-collaterals,
.woocommerce form.woocommerce-cart-form { overflow-x: auto; }

/* --- my-account navigation ------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
}
.woocommerce-account .woocommerce-MyAccount-navigation li + li {
  border-top: 1px solid var(--c-line);
}
.woocommerce-account .woocommerce-MyAccount-navigation a {
  display: block;
  padding: 10px 14px;
  color: var(--c-text);
  font-size: .92rem;
}
.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
  background: var(--c-bg-soft);
  text-decoration: none;
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background: #eaf1fd;
  color: var(--c-accent-dark);
  font-weight: 600;
}

/* Account screens use their own two-column layout: nav left, content right.
   Only when signed in - logged out there is no navigation, just the login and
   register forms, which must span the full width. `:has()` scopes the grid to
   the case where the navigation is actually present.

   WooCommerce floats the navigation left at 30% and the content right at 68%.
   Those floats have to be cleared for the grid to size the cells, and the
   columns pinned explicitly: clearing alone left them placed in reverse, with
   the navigation in the right-hand cell and the content crushed into the left. */
@media (min-width: 700px) {
  .woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: var(--gap);
    align-items: start;
  }
  .woocommerce-account .woocommerce-MyAccount-navigation { grid-column: 1; }
  .woocommerce-account .woocommerce-MyAccount-content    { grid-column: 2; }
  .woocommerce-account .woocommerce-MyAccount-navigation ul { margin-bottom: 0; }
}

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  min-width: 0;
}

/* Logged-out account page: login beside register.
   WooCommerce lays .u-column1/.u-column2 out with percentage widths and floats,
   which collapses to a narrow column here. Override with a grid. */
.woocommerce .u-columns.col2-set {
  display: grid;
  gap: var(--gap);
  width: 100%;
  float: none;
}
@media (min-width: 700px) {
  .woocommerce .u-columns.col2-set { grid-template-columns: 1fr 1fr; }
}
.woocommerce .u-columns .u-column1,
.woocommerce .u-columns .u-column2,
.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2 {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
}
/* WooCommerce floats col-1 left and col-2 right. Clearing the floats leaves the
   grid free to place them, but their computed order came out reversed, putting
   the login form in the right-hand cell. Pin the columns explicitly. */
.woocommerce .u-columns .u-column1,
.woocommerce .col2-set .col-1 { grid-column: 1; }
.woocommerce .u-columns .u-column2,
.woocommerce .col2-set .col-2 { grid-column: 2; }
@media (max-width: 699px) {
  .woocommerce .u-columns .u-column1,
  .woocommerce .u-columns .u-column2,
  .woocommerce .col2-set .col-1,
  .woocommerce .col2-set .col-2 { grid-column: 1; }
}
.woocommerce-account form.login,
.woocommerce-account form.register { max-width: 100%; margin: 0; }

/* --- forms ----------------------------------------------------------- */
.woocommerce form .form-row { margin-bottom: 14px; }
.woocommerce form .form-row label {
  display: block;
  margin-bottom: 5px;
  font-size: .9rem;
  font-weight: 600;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  font: inherit;
  background: var(--c-bg);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  outline: 2px solid var(--c-accent);
  outline-offset: -1px;
  border-color: var(--c-accent);
}
.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.checkout_coupon,
.woocommerce-EditAccountForm {
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
}
/* .col2-set is handled with .u-columns further down - a second grid definition
   here would fight it and push the columns out of alignment. */

/* --- cart totals ------------------------------------------------------ */
.cart_totals h2,
.woocommerce-checkout-review-order h3 { font-size: 1.05rem; }
.cart_totals {
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 16px;
  background: var(--c-bg-soft);
}
.cart_totals table.shop_table { border: 0; background: transparent; }
.cart_totals .order-total .amount { font-size: 1.2rem; }

@media (min-width: 900px) {
  .woocommerce .cart-collaterals { display: flex; justify-content: flex-end; }
  .woocommerce .cart-collaterals .cart_totals { min-width: 340px; }
}

/* Quantity steppers inside the cart table. */
.woocommerce table.shop_table td.product-quantity .quantity input { width: 68px; }

/* --------------------------------------------------------------- notices -- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  padding: 12px 16px;
  margin-bottom: 18px;
  border-radius: var(--radius);
  border-left: 4px solid var(--c-accent);
  background: var(--c-bg-soft);
  list-style: none;
}
.woocommerce-error { border-left-color: var(--c-outstock); }
.woocommerce-message { border-left-color: var(--c-instock); }

/* WooCommerce positions an icon via ::before on its notices, which lands on top
   of the text once the default padding is replaced. The border-left already
   signals the notice type. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before { content: none; }

/* ---------------------------------------------------------------- footer -- */
.site-footer {
  border-top: 1px solid var(--c-line);
  background: var(--c-bg-soft);
  padding: 28px 0;
  margin-top: 40px;
  font-size: .9rem;
  color: var(--c-muted);
}
.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--gap);
}
.site-footer a { color: var(--c-muted); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 5px; }
.site-footer__bottom {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--c-line);
  font-size: .85rem;
}

/* ------------------------------------------------------------ responsive -- */
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }

  .sidebar-toggle { display: block; }
  /* Hidden by default on mobile; the toggle reveals it. */
  .sidebar { display: none; }
  .sidebar.is-open { display: block; }

  .site-header__bar { flex-wrap: wrap; }
  .header-search { order: 3; flex-basis: 100%; max-width: none; }
  .product-single { grid-template-columns: 1fr; gap: 20px; }

  /* Keep the account and cart links on the same row as the switcher rather
     than letting one of them overflow the viewport. */
  .site-header__bar { row-gap: 10px; }
  .header-search + .header-account,
  .header-search + .header-cart { margin-left: auto; }
  .site-branding { flex: 1 1 auto; }
}

@media (max-width: 560px) {
  /* Branding alone on the first row, then the switcher + account + cart as
     their own row. Squeezing all four onto one line clipped the last item. */
  .site-branding { flex: 1 1 100%; }
  .site-branding__desc { display: none; }
  .site-branding__name { font-size: 1.15rem; }

  .lang-switch { margin-left: 0; }
  .lang-switch__item { padding: 5px 9px; font-size: .78rem; }

  .header-account, .header-cart { font-size: .85rem; margin-left: 14px; }
  /* Cart last, pushed to the right edge of its row. */
  .header-cart { margin-left: auto; }

  .header-search { order: 3; }
}

@media (max-width: 480px) {
  /* Two columns even on the narrowest phones - one column per screen means
     endless scrolling through a 101-product catalogue. minmax(0,1fr) rather
     than a min width so the tiles always fit. */
  .woocommerce ul.products,
  ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  ul.products li.product { padding: 8px; }
  ul.products li.product .woocommerce-loop-product__title { font-size: .82rem; }
  ul.products li.product .price { font-size: .95rem; }
  ul.products li.product .button { padding: 8px 10px; font-size: .85rem; }
  h1 { font-size: 1.3rem; }
}

/* =========================================================== home page === */

.home-section { margin: 0 0 36px; }
.home-section__title {
  font-size: 1.15rem;
  margin: 0 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--c-line);
}

/* ------------------------------------------------------------- slider --- */
.promo-slider {
  position: relative;
  margin-bottom: 32px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--c-bg-soft);
}
.promo-slider__track { position: relative; }

.promo-slide { display: none; }
.promo-slide.is-active { display: block; }

.promo-slide__media {
  aspect-ratio: 21 / 8;
  background: var(--c-bg-soft);
}
.promo-slide__media img { width: 100%; height: 100%; object-fit: cover; }

/* Leave room for the prev/next arrows so they never sit on top of the copy. */
.promo-slide__body { padding: 22px 64px; }
/* When there is an image, float the copy over it for a banner look. */
.promo-slide:has(.promo-slide__media) .promo-slide__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 20px 22px;
  color: #fff;
  background: linear-gradient(to top, rgba(12,16,22,.82), rgba(12,16,22,0));
}
.promo-slide__title { margin: 0 0 6px; font-size: 1.45rem; }
.promo-slide:has(.promo-slide__media) .promo-slide__title { color: #fff; }
.promo-slide__sub { margin: 0 0 12px; opacity: .92; }
.promo-slide__body .button { margin-top: 4px; }

.promo-slider__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  color: var(--c-text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.promo-slider__nav:hover { background: #fff; }
.promo-slider__nav--prev { left: 12px; }
.promo-slider__nav--next { right: 12px; }

.promo-slider__dots {
  position: absolute;
  left: 0; right: 0; bottom: 10px;
  display: flex;
  justify-content: center;
  gap: 7px;
}
.promo-slider__dot {
  width: 9px; height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  cursor: pointer;
}
.promo-slider__dot.is-active { background: #fff; }
/* No image means a light slide, so the dots need a dark tone to be visible. */
.promo-slider:not(:has(.promo-slide__media)) .promo-slider__dot { background: #c3c9d2; }
.promo-slider:not(:has(.promo-slide__media)) .promo-slider__dot.is-active { background: var(--c-accent); }

/* -------------------------------------------------------- category tiles */
.cat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cat-tile a {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 12px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  color: var(--c-text);
  text-align: center;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.cat-tile a:hover {
  border-color: #c9d3e0;
  box-shadow: 0 2px 10px rgba(16,24,40,.08);
  text-decoration: none;
}
.cat-tile__media {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1;
  margin-bottom: 8px;
  background: var(--c-bg-soft);
  border-radius: 4px;
  overflow: hidden;
}
.cat-tile__media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.cat-tile__placeholder { width: 100%; height: 100%; background: var(--c-bg-soft); }
/* Names wrap to two lines on some categories; reserve the space so every tile
   in the row ends at the same height and the counts line up. */
.cat-tile__name {
  display: block;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.3;
  min-height: calc(2 * 1.3em);
}
.cat-tile__count { display: block; margin-top: auto; font-size: .8rem; color: var(--c-muted); }

/* -------------------------------------------------------------- banners - */
.promo-banners {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.promo-banner__inner {
  position: relative;
  display: block;
  height: 100%;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--c-text);
  background: var(--c-bg-soft);
}
a.promo-banner__inner:hover { border-color: #c9d3e0; text-decoration: none; }
.promo-banner__inner img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.promo-banner__body { display: block; padding: 12px 14px; }
.promo-banner__title { display: block; font-size: .98rem; }
.promo-banner__sub { display: block; margin-top: 3px; font-size: .86rem; color: var(--c-muted); }

@media (max-width: 700px) {
  .promo-slide__media { aspect-ratio: 16 / 10; }
  .promo-slide__title { font-size: 1.15rem; }
  .promo-slider__nav { width: 32px; height: 32px; font-size: 1.25rem; }
}

/* ============================================== icons & promo graphics === */

.fc-icon { display: block; flex: 0 0 auto; }

/* --- sidebar category list ------------------------------------------- */
.cat-list a { align-items: center; }
.cat-list .fc-icon { color: var(--c-muted); margin-right: 9px; }
.cat-list__name { flex: 1 1 auto; min-width: 0; }
.cat-list .is-active > a .fc-icon { color: var(--c-accent-dark); }
.cat-list .is-empty > a .fc-icon { opacity: .5; }

/* --- category tiles --------------------------------------------------- */
.cat-tile__media--icon {
  color: var(--c-accent);
  background: linear-gradient(150deg, #eef3fc 0%, #e3ebf8 100%);
}
.cat-tile a:hover .cat-tile__media--icon { color: var(--c-accent-dark); }

/* --- gradient fallbacks ---------------------------------------------- */
/* Used until real artwork is uploaded; an uploaded image replaces them. */
.promo-slide--gradient { position: relative; min-height: 220px; }
.promo-slide--gradient .promo-slide__body {
  position: relative;
  color: #fff;
  background: none;
  padding: 34px 64px;
}
.promo-slide--gradient .promo-slide__title { color: #fff; }
.promo-slide--gradient .promo-slide__sub { color: rgba(255,255,255,.9); }

.promo-slide--v1 { background: linear-gradient(120deg, #0b3f8f 0%, #0b5ed7 55%, #2f80ed 100%); }
.promo-slide--v2 { background: linear-gradient(120deg, #143046 0%, #1f5673 55%, #2b7a9b 100%); }
.promo-slide--v3 { background: linear-gradient(120deg, #33231a 0%, #6b3f22 55%, #9a5a2b 100%); }

/* A faint diagonal texture so the gradient does not read as a flat block. */
.promo-slide--gradient::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 14px
  );
  pointer-events: none;
}
/* The button must stay readable on a dark gradient. */
.promo-slide--gradient .button { background: #fff; color: var(--c-accent-dark); }
.promo-slide--gradient .button:hover { background: #eaf1fd; color: var(--c-accent-dark); }

.promo-banner--gradient { color: #fff; border-color: transparent; }
.promo-banner--gradient .promo-banner__title { color: #fff; }
.promo-banner--gradient .promo-banner__sub { color: rgba(255,255,255,.88); }
.promo-banner--v1 { background: linear-gradient(135deg, #0b5ed7 0%, #2f80ed 100%); }
.promo-banner--v2 { background: linear-gradient(135deg, #1f5673 0%, #2b7a9b 100%); }
.promo-banner--v3 { background: linear-gradient(135deg, #5a4632 0%, #8a6a41 100%); }

.promo-banner__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 14px 0;
  color: rgba(255,255,255,.85);
}

@media (max-width: 700px) {
  .promo-slide--gradient { min-height: 180px; }
  .promo-slide--gradient .promo-slide__body { padding: 24px 52px; }
}