:root {
  --tc-orange: #ff6112;
  --tc-orange-hot: #ff7a35;
  --tc-dark: #161616;
  --tc-grey: #ebebeb;
  --tc-cream: #fdf1e9;
}

/*
 * Terra Cars — brand skin for the ShopBase storefront (parts catalog).
 *
 * Hand-written, plain CSS — deliberately NOT part of the Tailwind build
 * (tailwind.config.js `content` globs only scan *.html, not the PHP view
 * overrides in views/shop/, see module-authoring.md §17 + this project's
 * CLAUDE.md). Loaded once from views/shop/partials/_brand-head.php,
 * included at the top of catalog.php / product.php.
 *
 * Reuses the Tektur/Manrope @font-face rules already shipped in
 * tailwind.min.css (loaded on every page via views/assets.json) — no need
 * to redeclare them here, just reference the family names.
 *
 * Layers ON TOP of shop-front.css / shop-product.css / the ThemeService
 * --shop-* CSS variables (data/shop/theme.json): sharpens corners (brand is
 * squared-off with a cut corner), swaps the accent to tc-orange, and brings
 * in the display/body font pairing.
 */

.shop-container,
.shop-catalog,
.shop-product {
  --tc-orange: #ff6112;
  --tc-orange-hot: #ff7a35;
  --tc-dark: #161616;
  --tc-grey: #ebebeb;
  --tc-cream: #fdf1e9;
  /* Match container-tc (mockup): max-width 1360px, same page gutters. */
  --shop-container-max: 1360px;
  --shop-container-px: 20px;
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  color: var(--tc-dark);
}

.shop-catalog__heading,
.shop-card__name,
.shop-product__name,
.shop-filter__group-title,
.shop-filter__title,
.shop-catalog__heading-row .catalog-toolbar,
.shop-specs__title,
.shop-related__title,
.discount-info__title {
  font-family: 'Tektur', 'Manrope', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Terra Cars hero band (see partials/_hero.php) — dark, promo-strip style,
   background photo + dark gradient overlay (mockup: parts.html hero). */
.tc-shop-hero {
  position: relative;
  background: var(--tc-dark);
  color: #fff;
  padding: 140px 0 44px;
  overflow: hidden;
}
.tc-shop-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.tc-shop-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to right, rgba(22,22,22,.95), rgba(22,22,22,.85) 55%, rgba(22,22,22,.45));
}
.tc-shop-hero__inner {
  /* = .container-tc шаблона: max-w 1360, px-5 sm:px-8 xl:px-10 */
  position: relative;
  z-index: 2;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 640px)  { .tc-shop-hero__inner { padding: 0 32px; } }
@media (min-width: 1280px) { .tc-shop-hero__inner { padding: 0 40px; } }
.tc-shop-hero__crumbs {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.7;
}
.tc-shop-hero__crumbs a { color: #fff; text-decoration: none; }
.tc-shop-hero__crumbs a:hover { color: var(--tc-orange); }
.tc-shop-hero__crumbs .sep { margin: 0 6px; opacity: 0.5; }
.tc-shop-hero__eyebrow {
  display: block;
  margin-top: 18px;
  font-family: 'Tektur', sans-serif;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--tc-orange);
}
.tc-shop-hero__title {
  margin: 10px 0 0;
  font-family: 'Tektur', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: clamp(28px, 4vw, 44px);
  color: #fff;
}
.tc-shop-hero__lead {
  margin: 14px 0 0;
  max-width: 640px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.6;
}

/* ---- Cards (catalog grid + related) ------------------------------------ */
.shop-card {
  border-radius: 0 !important;
  border: 1px solid rgba(22, 22, 22, 0.08);
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
  background: #fff;
  box-shadow: none;
}
.shop-card__img-wrap { background: var(--tc-grey); border-radius: 0 !important; }
.shop-card__heart { display: none !important; } /* no wishlist in this build */
.tc-card-stock {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--tc-dark);
  font-family: 'Manrope', sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* Mockup (parts.html): card grid gap-4, body p-4/p-5, name→category mt-1.5,
   category→price mt-3, price→button mb-4. Canon .shop-card__body applies a
   uniform flex gap (--shop-s-2 = 8px) between every child instead — override
   to zero and set the mockup's per-pair margins explicitly. */
.shop-card__body { display: flex; gap: 0 !important; }
.shop-card__name {
  font-size: 14px !important; /* mockup: text-sm, not --shop-pc-title-size (16px) */
  line-height: 1.375;
}
.shop-card__brand {
  display: block;
  margin-top: 6px; /* mockup: mt-1.5 */
  font-family: 'Manrope', sans-serif;
  font-size: 12px; /* mockup: text-xs */
  text-transform: none; /* mockup category label is normal case, not uppercase */
  letter-spacing: normal;
  color: rgba(22, 22, 22, 0.68);
}
.shop-card__price {
  margin-top: 12px !important; /* mockup: mt-3 */
  margin-bottom: 16px; /* mockup: mb-4 */
}
.shop-card__price strong,
.shop-card__price ins {
  color: var(--tc-orange-ink, #ba3d00);
  font-family: 'Tektur', sans-serif;
  font-weight: 700;
}
.shop-card__price del { color: rgba(22, 22, 22, 0.62); }
.tc-card-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: auto;
  padding: 14px 24px;
  min-height: 48px;
  background: var(--tc-orange);
  color: var(--tc-dark) !important; /* was losing to .shop-page a:not(...) reset (specificity 0,3,1) */
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none !important;
  transition: background-color .2s ease;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.tc-card-cta:hover { background: var(--tc-orange-hot); }

/* ---- No-image placeholder (cards + PDP main image) ---------------------- */
.tc-no-img {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  background: var(--tc-grey);
}
.tc-no-img img { width: 40px; height: 40px; opacity: 0.55; }
.tc-no-img span {
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(22, 22, 22, 0.68);
  text-align: center;
  padding: 0 10px;
}
.shop-product__main-img--empty .tc-no-img img { width: 56px; height: 56px; }

/* ---- Sidebar help box (mockup: parts.html "Потрібна допомога?") ---------
   Desktop-only (sidebar column, ≥1024px) — on mobile the sidebar collapses
   into the off-canvas filter drawer (.shop-filter) and this box lives
   outside that drawer's fixed/flex layout, so it would otherwise render as
   stray full-width content above the toolbar. Mobile already has the sticky
   call/consultation bar covering the same "need help" job. */
.tc-help-box { display: none; }
@media (min-width: 1024px) {
.tc-help-box {
  display: block;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(22, 22, 22, 0.1);
}
}
.tc-help-box__panel {
  padding: 16px;
  border: 1px solid rgba(22, 22, 22, 0.15);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
.tc-help-box__title {
  font-family: 'Tektur', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 13px;
  margin: 0;
}
.tc-help-box__text {
  margin: 8px 0 0;
  font-size: 13px;
  color: rgba(22, 22, 22, 0.6);
}
.tc-help-box__cta {
  display: block;
  margin: 16px 0 0;
  padding: 10px 16px;
  border: 1px solid rgba(22, 22, 22, 0.2);
  text-align: center;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tc-dark);
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease;
}
.tc-help-box__cta:hover { border-color: var(--tc-orange); color: var(--tc-orange); }

/* ---- Catalog shell ------------------------------------------------------ */
.shop-catalog__heading { color: var(--tc-dark); }
.tc-shop-count {
  margin: 0;
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(22, 22, 22, 0.68);
}
.tc-shop-count__num {
  font-family: 'Tektur', sans-serif;
  font-weight: 700;
  color: var(--tc-dark);
}
.shop-filter,
.shop-filter__group { border-radius: 0 !important; }
.shop-filter__check input[type="checkbox"] { accent-color: var(--tc-orange); width: 16px; height: 16px; }

/* Sort control: match /catalog's bordered box style (data-dd-btn there). */
.sort-dropdown__toggle {
  border: 1px solid rgba(22, 22, 22, 0.25) !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 10px 16px !important;
  min-height: 44px !important;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: border-color .2s ease;
}
.sort-dropdown__toggle:hover { border-color: var(--tc-orange) !important; }
.sort-dropdown__menu {
  border-radius: 0 !important;
  border-color: rgba(22, 22, 22, 0.25) !important;
}
.shop-filter__reset-badge,
.catalog-toolbar__filters-badge { background: var(--tc-orange) !important; }
.sort-dropdown__item.is-active,
.shop-filter__group-title:hover { color: var(--tc-orange); }
.shop-chip { border-radius: 0 !important; border-color: rgba(22,22,22,.15); }
.shop-chip:hover { border-color: var(--tc-orange); color: var(--tc-orange); }

/* ---- Product detail ------------------------------------------------------ */
/* Availability pill above the H1 (mockup: part.html "В наявності" chip). */
.tc-stock-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: rgba(22, 22, 22, 0.06);
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tc-stock-pill.shop-product__stock--in { background: rgba(26, 125, 58, 0.1); }
.tc-stock-pill.shop-product__stock--out { background: rgba(179, 38, 30, 0.1); }
.tc-stock-pill.shop-product__stock--preorder { background: var(--tc-dark); color: #fff; }

/* Trust/delivery checklist under the CTA (mockup: part.html panel). */
.tc-trust-panel {
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px solid rgba(22, 22, 22, 0.15);
  display: grid;
  gap: 8px;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}
.tc-trust-panel p {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: 13px;
  color: rgba(22, 22, 22, 0.7);
}
.tc-trust-panel__tick { color: var(--tc-orange-ink, #ba3d00); flex-shrink: 0; font-weight: 700; }
.shop-product__heart { display: none !important; }
.shop-product__price,
.shop-product__current {
  font-family: 'Tektur', sans-serif;
  color: var(--tc-orange-ink, #ba3d00) !important;
  font-weight: 700;
}
.shop-product__stock--in { color: #1a7d3a; }
.shop-product__stock--out { color: #b3261e; }
.shop-product__main-img,
.shop-card__img-wrap,
.shop-product__thumbs img {
  border-radius: 0 !important;
}
.shop-product__thumbs img {
  border: 2px solid transparent;
  cursor: pointer;
}
.shop-product__thumbs img:hover { border-color: var(--tc-orange); }

.shop-btn-gradient,
.shop-quick-order-trigger,
.shop-btn-outline {
  border-radius: 0 !important;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.shop-btn-gradient,
.shop-quick-order-trigger.shop-btn-gradient,
button.shop-quick-order-trigger {
  background: var(--tc-orange) !important;
  background-image: none !important;
  border: none;
  color: var(--tc-dark) !important;
}
.shop-btn-gradient:hover,
.shop-quick-order-trigger:hover { background: var(--tc-orange-hot) !important; }
.shop-quick-order-trigger { width: 100%; }

/* Мокап (part.html) не має вкладки-навигації розділів у крихтах — прибираємо
   декоративну панель якорів, канон-якорі (#specs/#desc/…) лишаються робочими
   через прямі посилання зі сторінки, просто без цієї візуальної панелі. */
.shop-product-nav { display: none !important; }

/* Схожі товари: full-width секція під галереєю/інфо (мокап), не акордеон
   у колонці товару. */
.tc-pdp-cta { position: relative; overflow: hidden; }

.shop-specs__row { border-color: rgba(22,22,22,.1); }
.shop-specs__key { color: rgba(22,22,22,.6); }
.shop-specs__val { font-family: 'Tektur', sans-serif; font-weight: 600; }

.shop-quick-modal__panel { border-radius: 0 !important; }
.shop-quick-modal .shop-quick-modal__title { font-family: 'Tektur', sans-serif; font-weight: 700; text-transform: uppercase; }
.shop-quick-order__submit { background: var(--tc-orange) !important; }

/* Отступ под fixed-хедер шаблона (промо-строка + шапка ≈ 112px)
   на всех shop-страницах без собственной тёмной hero-полосы. */
.shop-product.shop-container,
.shop-cart, .shop-checkout, .shop-success { padding-top: 156px; }
@media (min-width: 640px) {
  .shop-product.shop-container,
  .shop-cart, .shop-checkout, .shop-success { padding-top: 128px; }
}

/* Страницы шопа без тёмной hero-полосы (картка товару): фиксируем тёмный фон
   шапки, иначе белое меню невидимо на белом фоне до первого скролла. */
body:has(.shop-product) [data-header],
body:has(.shop-cart) [data-header],
body:has(.shop-checkout) [data-header] {
  background: rgba(22, 22, 22, 0.97);
}


/* Гуттеры контейнера шопа = container-tc (px-5 sm:px-8 xl:px-10). */
@media (min-width: 640px)  { .shop-container, .shop-catalog, .shop-product { --shop-container-px: 32px; } }
@media (min-width: 1280px) { .shop-container, .shop-catalog, .shop-product { --shop-container-px: 40px; } }

/* Стрелки на главном фото PDP (макет part.html) */
.shop-product__main-img { position: relative; }
.tc-pdp-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; display: grid; place-items: center;
  background: rgba(255,255,255,.85); color: var(--tc-dark);
  border: 1px solid rgba(22,22,22,.2); cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition: color .2s, border-color .2s; z-index: 2;
}
.tc-pdp-arrow:hover { color: var(--tc-orange); border-color: var(--tc-orange); }
.tc-pdp-arrow--prev { left: 12px; }
.tc-pdp-arrow--next { right: 12px; }

/* ══════════════════════════════════════════════════════════════════════════
   Канонный резет shop-front.css (.shop-page h1/p{margin:0}, a{color:inherit})
   специфичнее tailwind-утилит и убивал макетную вёрстку PDP: отступы mt-*,
   mx-auto у CTA-текста и цвет хлебных крошек. Восстанавливаем в scope.
   ══════════════════════════════════════════════════════════════════════════ */
.shop-product .mt-2  { margin-top: .5rem  !important; }
.shop-product .mt-2\.5{ margin-top: .625rem !important; }
.shop-product .mt-3  { margin-top: .75rem !important; }
.shop-product .mt-4  { margin-top: 1rem   !important; }
.shop-product .mt-6  { margin-top: 1.5rem !important; }
.shop-product .mt-7  { margin-top: 1.75rem!important; }
.shop-product .mt-8  { margin-top: 2rem   !important; }
.shop-product .mb-8  { margin-bottom: 2rem!important; }
.shop-page .tc-textured .mt-3 { margin-top: .75rem !important; }
.shop-page .tc-textured .mt-4 { margin-top: 1rem   !important; }
.shop-page .tc-textured .mt-8 { margin-top: 2rem   !important; }
.shop-page .tc-textured .max-w-2xl { max-width: 42rem !important; }
.shop-page .tc-textured .mx-auto   { margin-left: auto !important; margin-right: auto !important; }
/* Хлебные крошки по макету: приглушённые ссылки, оранжевый ховер */
.shop-product > nav a { color: rgba(22,22,22,.68) !important; }
.shop-product > nav a:hover { color: var(--tc-orange) !important; }
.shop-product > nav .text-tc-dark { color: var(--tc-dark) !important; }

/* Ховер карточки по макету: НИКАКИХ теней/зумов на фото — цвет меняет только
   название. Перекрываем канонные hover-эффекты shop-front.css. */
@media (hover: hover) and (pointer: fine) {
  .shop-card:hover .shop-card__img-wrap { box-shadow: none !important; }
  .shop-card:hover .shop-card__img-link img,
  .shop-card:hover .shop-card__img-link > img:first-child { transform: none !important; }
  .shop-card:hover .shop-card__img-alt { transform: translateX(100%) !important; }
}
.shop-card__name { transition: color .2s ease; }
.shop-card:hover .shop-card__name,
.shop-page a.shop-card__name:hover { color: var(--tc-orange) !important; }

/* «Переглянуті товари» — макетный вид: кнопки в шапке справа, card-light
   карточки в горизонтальном flex-треке (канонный JS populate/scroll остаётся). */
.tc-hs-btn {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid rgba(22,22,22,.2); background: rgba(255,255,255,.9);
  color: var(--tc-dark); cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition: color .2s, border-color .2s;
}
.tc-hs-btn:hover:not([disabled]) { color: var(--tc-orange); border-color: var(--tc-orange); }
.tc-hs-btn[disabled] { opacity: .35; cursor: default; }
/* Канон прячет кнопки без переполнения — в макете они видимы всегда */
.shop-viewed .tc-hs-btn[hidden] { display: grid; opacity: .35; pointer-events: none; }

/* py-12 секции-обёртки не трогаем — канонные margin/padding стрипа
   нейтрализуются самим wrapper'ом */
.shop-viewed__grid {
  display: flex !important; gap: 12px !important;
  overflow-x: auto; padding-bottom: 8px; scroll-behavior: smooth;
  scrollbar-width: none;
}
.shop-viewed__grid::-webkit-scrollbar { display: none; }
.shop-viewed__card {
  width: 9rem; flex: 0 0 auto;
  background: #fff; border: 1px solid rgba(22,22,22,.08);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  padding: 0 0 12px; text-decoration: none; color: var(--tc-dark);
}
@media (min-width: 640px) { .shop-viewed__card { width: 11rem; } }
.shop-viewed__img { aspect-ratio: 1/1; background: var(--tc-grey); overflow: hidden; }
.shop-viewed__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shop-viewed__card .shop-viewed__name {
  display: block; padding: 10px 12px 0; font-size: 13px; line-height: 1.35;
  color: var(--tc-dark); transition: color .2s;
}
.shop-viewed__card:hover .shop-viewed__name { color: var(--tc-orange); }
.shop-viewed__card .shop-viewed__price {
  display: block; padding: 6px 12px 0;
  font-family: 'Tektur', sans-serif; font-weight: 700; font-size: 14px;
}

/* Заголовок «Переглянуті товари»: canon .shop-viewed__title (Inter/400)
   специфичнее .h-display — возвращаем макетный Tektur Bold. */
.shop-viewed .shop-viewed__title {
  font-family: 'Tektur', 'Manrope', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tc-dark);
  margin: 0;
}

@media (max-width: 639px) {
  .product-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1023px) {
  .shop-catalog--filters .shop-filter {
    inset: 0 auto 0 0;
    transform: translateX(-100%);
  }
}

.tc-quick-success { display: none; padding: 24px 0 8px; text-align: center; }
.tc-quick-success__mark { display: block; color: var(--tc-orange-ink, #ba3d00); font-size: 2.25rem; line-height: 1; }
.tc-quick-success__title { margin-top: 16px; font-family: 'Tektur', sans-serif; font-weight: 700; font-size: 1.5rem; text-transform: uppercase; color: var(--tc-dark); }
.tc-quick-success__text { margin-top: 12px; color: rgba(22,22,22,.6); }
.shop-quick-order__form:has(.tc-quick-success):has([data-quick-result]:not([hidden])) > :not(.tc-quick-success) { display: none !important; }
.shop-quick-order__form:has([data-quick-result]:not([hidden])) > .tc-quick-success { display: block; }
.shop-quick-modal:has(.tc-quick-success):has([data-quick-result]:not([hidden])) .shop-quick-modal__hint { display: none; }
.tc-quick-success.is-editing { display: block; border-top: 1px dashed rgba(22,22,22,.2); margin-top: 16px; }