/* Кастом-Форт — «сталь на бумаге» (светлая). Refines the UniShop2 port: cool paper ground,
   graphite ink, one restrained ember accent. Loaded last so var() consumers recolor. */
:root {
  --cf-ground: #eceef0;
  --cf-surface: #ffffff;
  --cf-raised: #f3f5f6;
  --cf-line: #e1e4e7;
  --cf-ink: #1e2125;
  --cf-soft: #6b7178;
  --cf-acc: #1257A8;
  --cf-acc-hi: #0E4788;
  --cf-acc-ink: #ffffff;

  /* base */
  --body-c: var(--cf-ink);
  --body-bg: var(--cf-ground);
  --h1-c: var(--cf-ink); --h2-c: var(--cf-ink); --h3-c: var(--cf-ink); --h4-c: var(--cf-ink); --h5-c: var(--cf-ink);
  --heading-c: var(--cf-ink);

  --a-c: var(--cf-acc); --a-c-hover: var(--cf-acc-hi);

  /* buttons */
  --btn-default-c: var(--cf-ink); --btn-default-bg: var(--cf-raised);
  --btn-default-c-hover: var(--cf-ink); --btn-default-bg-hover: var(--cf-line);
  --btn-primary-c: var(--cf-acc-ink); --btn-primary-bg: var(--cf-acc);
  --btn-primary-c-hover: var(--cf-acc-ink); --btn-primary-bg-hover: var(--cf-acc-hi);
  --input-checked-bg: var(--cf-acc);
  --rating-star-c-active: var(--cf-acc);

  /* top menu */
  --top-menu-bg: #e6e8ea; --top-menu-btn-c: var(--cf-soft); --top-menu-btn-c-hover: var(--cf-acc);

  /* header */
  --header-bg: var(--cf-surface);
  --header-search-cat-btn-c: var(--cf-acc); --header-search-cat-btn-bg: var(--cf-raised);
  --header-search-input-c: var(--cf-soft); --header-search-input-bg: var(--cf-raised);
  --header-phones-m-c: var(--cf-soft); --header-phones-m-c-hover: var(--cf-acc); --header-phones-a-c: var(--cf-ink);
  --header-icon-c: var(--cf-acc); --header-icon-total-c: var(--cf-acc-ink); --header-icon-total-bg: var(--cf-soft);
  --header-block-caption-c: var(--cf-ink);

  /* main menu (dark catalog header bar) */
  --menu-main-c: var(--cf-acc); --menu-main-bg: var(--cf-raised);
  --menu-main-header-c: #eceef0; --menu-main-header-bg: var(--cf-ink);
  --menu-main-level-1-c: var(--cf-ink); --menu-main-level-1-c-hover: var(--cf-acc);
  --menu-main-level-2-c: var(--cf-soft); --menu-main-level-2-c-hover: var(--cf-acc); --menu-main-level-2-bg: #fafbfc;
  --menu-main-level-3-c: var(--cf-soft); --menu-main-level-3-c-hover: var(--cf-ink);
  --menu-main-before: var(--cf-line);

  /* right menu */
  --menu-right-bg: var(--cf-raised);
  --menu-right-level-1-c: var(--cf-soft); --menu-right-level-1-c-hover: var(--cf-acc);
  --menu-right-level-2-c: var(--cf-ink); --menu-right-level-2-c-hover: var(--cf-acc); --menu-right-level-2-bg: var(--cf-surface);
  --menu-right-level-3-c: var(--cf-soft); --menu-right-level-3-c-hover: var(--cf-ink);
  --menu-module-bg: var(--cf-raised); --menu-module-c1: var(--cf-soft); --menu-module-c1-hover: var(--cf-acc);
  --menu-module-c2: var(--cf-ink); --menu-module-c2-hover: var(--cf-acc); --menu-module-c3: var(--cf-ink); --menu-module-c3-hover: var(--cf-acc);

  /* slideshow */
  --slideshow-title-c: var(--cf-ink); --slideshow-text-c: var(--cf-soft);
  --slideshow-btn-c: var(--cf-acc-ink); --slideshow-btn-bg: var(--cf-acc); --slideshow-nav-btn-c: var(--cf-acc);
  --slideshow-dot-bg: var(--cf-line); --slideshow-dot-bg-active: var(--cf-acc);
  --swiper-pagination-bg: var(--cf-line); --swiper-pagination-bg-active: var(--cf-acc);

  /* home */
  --home-banner-bg: var(--cf-raised); --home-banner-icon-c: var(--cf-acc); --home-banner-text-c: var(--cf-soft);
  --timer-bg: var(--cf-raised); --timer-text-c: var(--cf-acc); --timer-digit-c: var(--cf-ink);

  /* product thumb + options */
  --prod-thumb-name: var(--cf-ink); --prod-thumb-name-hover: var(--cf-acc);
  --option-select-c: var(--cf-ink); --option-name-c: var(--cf-soft); --option-name-bg: var(--cf-raised);
  --option-name-c-hover: var(--cf-acc); --option-name-bg-hover: var(--cf-line);
  --option-name-c-checked: var(--cf-acc-ink); --option-name-bg-checked: var(--cf-acc); --option-img-hover: var(--cf-acc);

  /* price */
  --price-c: var(--cf-ink); --price-old-c: var(--cf-soft); --price-new-c: var(--cf-acc);

  /* CTA accent — the ONE "buy" colour. Change these three to retone every purchase control. */
  --cf-cta: #E8730C; --cf-cta-hi: #C55F08; --cf-cta-c: #fff;

  /* add to cart + actions */
  --add-to-cart-btn-c: var(--cf-cta-c); --add-to-cart-btn-bg: var(--cf-cta);
  --add-to-cart-btn-c-hover: var(--cf-cta-c); --add-to-cart-btn-bg-hover: var(--cf-cta-hi);
  --add-to-cart-btn-c-incart: var(--cf-acc-ink); --add-to-cart-btn-bg-incart: var(--cf-ink); --add-to-cart-btn-bg-incart-hover: #33383e;
  --add-to-cart-btn-c-disabled: var(--cf-soft); --add-to-cart-btn-bg-disabled: var(--cf-line); --add-to-cart-btn-c-disabled-hover: var(--cf-acc); --add-to-cart-btn-bg-disabled-hover: var(--cf-line);
  --quick-order-btn-c: var(--cf-ink); --quick-order-btn-bg: var(--cf-raised); --quick-order-btn-c-hover: var(--cf-acc-ink); --quick-order-btn-bg-hover: var(--cf-acc);
  --wishlist-btn-c: var(--cf-acc); --wishlist-btn-bg: var(--cf-raised); --wishlist-btn-c-hover: var(--cf-acc-ink); --wishlist-btn-bg-hover: var(--cf-acc);
  --compare-btn-c: var(--cf-acc); --compare-btn-bg: var(--cf-raised); --compare-btn-c-hover: var(--cf-acc-ink); --compare-btn-bg-hover: var(--cf-acc);

  /* stickers */
  --sticker-reward-b: var(--cf-soft); --sticker-special-b: var(--cf-acc); --sticker-new-b: var(--cf-soft);
  --sticker-bestseller-b: #8a3a1e; --sticker-ean-b: var(--cf-acc); --sticker-mpn-b: var(--cf-acc);

  /* product page */
  --product-share-btn-c: var(--cf-ink); --product-share-btn-bg: var(--cf-raised);
  --product-share-btn-c-hover: var(--cf-ink); --product-share-btn-bg-hover: var(--cf-line);
  --product-banner-bg: var(--cf-raised); --product-banner-icon: var(--cf-acc); --product-banner-text: var(--cf-soft);
  --nav-tabs-bg: #eef0f2; --nav-tabs-c: var(--cf-soft); --nav-tabs-c-active: var(--cf-acc);

  /* carousel + pagination */
  --carousel-dot-bg: var(--cf-line); --carousel-dot-bg-active: var(--cf-acc);
  --carousel-nav-btn-c: var(--cf-acc); --carousel-nav-btn-bg: var(--cf-surface);
  --pagination-c: var(--cf-acc); --pagination-bg: var(--cf-raised); --pagination-c-active: var(--cf-acc-ink); --pagination-bg-active: var(--cf-acc);

  /* footer */
  --footer-c: var(--cf-soft); --footer-bg: #e6e8ea; --footer-heading-c: var(--cf-ink);

  /* fly widgets */
  --fly-menu-bg: var(--cf-surface); --fly-menu-color: var(--cf-ink); --fly-menu-icon-c: var(--cf-acc);
  --fly-menu-icon-total-c: var(--cf-acc-ink); --fly-menu-icon-total-bg: var(--cf-soft);
  --fly-menu-search-cat-btn-bg: var(--cf-raised); --fly-menu-search-cat-btn-c: var(--cf-acc);
  --fly-menu-search-input-bg: var(--cf-raised); --fly-menu-search-input-c: var(--cf-soft);
  --fly-menu-phone-c: var(--cf-ink); --fly-menu-caption-c: var(--cf-ink); --fly-menu-level-1-bg-hover: var(--cf-raised);
  --fly-contacts-btn-c: var(--cf-acc-ink); --fly-contacts-btn-bg: var(--cf-acc); --fly-contacts-bg: var(--cf-surface);
  --fly-contacts-item-c: var(--cf-acc); --fly-contacts-item-bg: var(--cf-raised); --fly-callback-c: var(--cf-acc-ink); --fly-callback-bg: var(--cf-acc);

  /* misc */
  --pwa-c: var(--cf-ink); --pwa-install-c: var(--cf-acc-ink); --pwa-install-bg: var(--cf-acc); --pwa-close-c: var(--cf-acc);
  --preloader-border-c: var(--cf-acc) var(--cf-acc) var(--cf-acc) transparent;
}

/* card definition on the cool ground */
.uni-wrapper { background: var(--cf-surface); border: 1px solid var(--cf-line); box-shadow: 0 1px 2px rgba(20,25,30,.04), 0 10px 26px rgba(20,25,30,.05); }
.uni-item { border: 1px solid var(--cf-line); }
input, select, textarea, .form-control { border-color: var(--cf-line); }

/* refine the warm "selected/checked" wash to match the accent */
.cf-option__item.checked, .cf-method.checked, .list-group-item.active { background: #e8f1fa; border-color: var(--cf-acc); }

/* "Нашли дешевле?" — graphite secondary action instead of stock-green */
.cf-cheaper { background: var(--cf-ink); }
.cf-cheaper:hover { background: #33383e; }

/* equal-height product cards: card fills the slide, image box is fixed */
.cf-carousel__slide { display: flex; }
.cf-carousel__slide > .product-thumb { flex: 1 1 auto; height: 100%; }
.product-grid .product-thumb, .grid-view .product-thumb { height: 100%; }
/* Fixed height on every card placement (aspect-ratio didn't hold — a taller image grew the box, so the specs divider sat at different heights across cards). */
.product-thumb__image { height: 235px; display: flex; align-items: center; justify-content: center; }
.product-thumb__image > a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.product-thumb__image img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; margin: 0 auto; }
/* Fixed margin (override the ported `margin:0 0 auto`, which fed variable flex free-space below the name and shifted the image/specs divider across cards). Free space belongs to `.product-thumb__buy { margin-top:auto }`. */
.product-thumb__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-align: left; line-height: 20px; min-height: 40px; max-height: 40px; margin: 2px 0 6px; }

/* catalog card: name sits under the image, left-aligned. Scoped to the listing grid so the home carousel keeps its own look. */
.products-block .product-thumb__name { text-align: left; font-weight: 700; font-size: 14px; line-height: 18px; min-height: 36px; max-height: 36px; margin: 2px 0 6px; }

/* Ozon-style rating: gold star + score + review count, near the price */
.product-thumb__rating { display: flex; align-items: center; gap: 5px; margin: 8px 0 0; font-size: 12.5px; line-height: 1; }
.product-thumb__rating > i { color: #ffb020; font-size: 12px; }
.product-thumb__rating-val { font-weight: 700; color: var(--cf-ink, #1e2125); }
.product-thumb__rating-count { color: var(--cf-soft, #6b7178); }
.product-thumb__rating-count::before { content: "·"; margin-right: 5px; color: #c4c9ce; }
.products-block .product-thumb__image { margin: 0 0 14px; padding: 0; border: 0; }
/* image is the card's top element now; inset the badge so `.product-thumb__caption { overflow:hidden }` doesn't clip its top-left corner */
.products-block .sticker { top: 8px; left: 8px; }
@media (max-width: 767px) { .product-thumb__image { height: 185px; } }

/* card image gallery (ported .product-thumb__addit strips): active segment in brand accent */
.product-thumb__addit-item { align-items: flex-end; border-bottom-width: 2px; border-bottom-color: var(--cf-line, #e1e4e7); }
.product-thumb__addit-item.active { border-color: var(--cf-acc, #e0662f); opacity: 1; }

/* name + image + specs sit at the top; the buy cluster is pinned to the card bottom so footers align across the row */
.product-thumb__buy { display: flex; flex-direction: column; flex: 1 1 auto; margin-top: 0; }

/* brief specs (label: value rows), separated from the photo by a full-width hairline */
/* highlight chips: hard-clamped to 2 rows (chip 22px + 6px gap => 50px) so it can never grow taller */
.product-thumb__specs { display: flex; flex-wrap: nowrap; align-content: flex-start; gap: 6px; margin: 0 0 4px; max-height: 26px; overflow: hidden; }
.product-thumb__chip { font-size: 12px; line-height: 1; padding: 5px 9px; border-radius: 6px; background: var(--cf-wash, #f2f4f6); color: var(--cf-soft, #6b7178); white-space: nowrap; }

/* delivery estimate (green accent): the fast-delivery word pops like the in-stock state */
.product-thumb__delivery { display: flex; align-items: flex-start; gap: 7px; margin: 4px 0 0; font-size: 12.5px; color: var(--cf-soft, #6b7178); }
.product-thumb__delivery i { color: #58ae43; margin-top: 1px; }
.product-thumb__delivery-text { display: flex; flex-direction: column; line-height: 1.35; }
.product-thumb__delivery b { color: #58ae43; font-weight: 700; white-space: nowrap; }

/* footer: price left, buy button/stepper right, set off by the same soft centered divider */
.product-thumb__foot { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: auto 0 0; padding: 15px 0 0; }
.product-thumb__foot::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 44px; height: 1px; background: var(--cf-line, #e1e4e7); }
.product-thumb__foot .product-thumb__price { margin: 0; font-size: 1.2em; }
.product-thumb__price .price-old { font-size: 14px; margin-left: 8px; }
.product-thumb__foot .product-thumb__cart { margin: 0; }