/*
Theme Name: topflor.ua
Theme URI: https://www.topflor.ua/
Description: Дочірня тема Storefront для topflor.ua — підлогові покриття. Синьо-білий мінімалізм. Каталог на WooCommerce.
Author: topflor.ua
Version: 1.0.0
Template: storefront
Text Domain: topflor
*/

:root{
  --tf-ink:#2d2d2d; --tf-blue:#bf9c61; --tf-blue-600:#a9863f;
  --tf-sand:#bf9c61; --tf-sand-dark:#a9863f;
  --tf-bg:#faf8f4; --tf-surface:#fff; --tf-line:#e8e4dc; --tf-line-strong:#d6cfc0;
  --tf-text:#2d2d2d; --tf-soft:#5a5750; --tf-mute:#928d82;
  --tf-radius:12px; --tf-radius-sm:8px;
  --tf-shadow:0 1px 2px rgba(45,45,45,.05),0 8px 24px rgba(45,45,45,.08);
  --tf-display:'Manrope',system-ui,sans-serif; --tf-body:'Inter',system-ui,sans-serif; --tf-mono:'JetBrains Mono',monospace;
}

/* fonts */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

body,button,input,select,textarea{font-family:var(--tf-body);color:var(--tf-text);}
body{background:var(--tf-bg);}
h1,h2,h3,h4,.storefront-primary-navigation{font-family:var(--tf-display);}
h1,h2,h3,h4{color:var(--tf-ink);letter-spacing:-.02em;}

/* ---------- header ---------- */
.site-header{background:#fff!important;border-bottom:1px solid var(--tf-line);}
.site-branding .site-title a,.site-title a{font-family:var(--tf-display);font-weight:800;color:var(--tf-ink)!important;letter-spacing:-.03em;}
.storefront-primary-navigation{background:#fff!important;}
.main-navigation ul li a{font-family:var(--tf-display);font-weight:600;color:var(--tf-text)!important;}
.main-navigation ul li a:hover{color:var(--tf-ink)!important;}
.main-navigation ul.menu>li.current-menu-item>a{box-shadow:inset 0 -2px 0 var(--tf-sand);}

/* topbar (added via hook) */
.tf-topbar{background:var(--tf-ink);color:#cfe0f2;font-size:.82rem;}
.tf-topbar .col-full{display:flex;justify-content:space-between;align-items:center;height:38px;gap:16px;flex-wrap:wrap;}
.tf-topbar a{color:#fff;}

/* ---------- buttons ---------- */
.button,button,input[type=submit],.added_to_cart,.wc-block-components-button{
  background:var(--tf-ink)!important;color:#fff!important;font-family:var(--tf-display)!important;font-weight:600!important;
  border-radius:var(--tf-radius-sm)!important;border:0!important;transition:.18s;
}
.button:hover,button:hover,input[type=submit]:hover{background:var(--tf-blue-600)!important;}
.button.alt,.single_add_to_cart_button{background:var(--tf-sand)!important;color:#3a2c12!important;}
.button.alt:hover{background:var(--tf-sand-dark)!important;color:#fff!important;}

/* ---------- product grid / cards ---------- */
ul.products li.product{
  background:var(--tf-surface);border:1px solid var(--tf-line);border-radius:var(--tf-radius);
  padding:14px!important;transition:.18s;overflow:hidden;
}
ul.products li.product:hover{border-color:var(--tf-blue);box-shadow:var(--tf-shadow);transform:translateY(-3px);}
ul.products li.product img{border-radius:var(--tf-radius-sm);margin-bottom:12px!important;}
ul.products li.product .woocommerce-loop-product__title{font-family:var(--tf-display);font-weight:600;font-size:1rem!important;color:var(--tf-text);padding:0!important;}
ul.products li.product .price{color:var(--tf-sand-dark)!important;font-family:var(--tf-display);font-weight:700;}
.star-rating span:before{color:var(--tf-sand);}

/* price "on request" replacement handled by functions.php filter */
.tf-price-ask{color:var(--tf-sand-dark);font-family:var(--tf-display);font-weight:700;}

/* ---------- single product ---------- */
.single-product div.product .product_title{font-size:clamp(1.6rem,3vw,2.2rem);}
.woocommerce-tabs .panel{background:#fff;border:1px solid var(--tf-line);border-radius:var(--tf-radius);padding:22px;}
table.shop_attributes{font-family:var(--tf-mono);font-size:.85rem;}
table.shop_attributes th{font-family:var(--tf-body);color:var(--tf-soft);}

/* ---------- category cards on shop ---------- */
ul.products li.product-category h2{font-family:var(--tf-display);font-weight:700;color:var(--tf-ink);}

/* ---------- widgets / filters ---------- */
.widget{background:#fff;border:1px solid var(--tf-line);border-radius:var(--tf-radius);padding:18px;}
.widget-title{font-family:var(--tf-display);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tf-mute);}

/* ---------- footer ---------- */
.site-footer{background:var(--tf-ink)!important;color:#b9cde3!important;}
.site-footer a{color:#b9cde3!important;}
.site-footer a:hover{color:#fff!important;}
.site-footer .widget-title{color:#fff!important;}

/* ---------- hero (front page, via block or hook) ---------- */
.tf-hero{background:linear-gradient(180deg,#eaf1fa,var(--tf-bg));padding:60px 0;}
.tf-hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;max-width:1200px;margin:0 auto;padding:0 24px;}
.tf-hero h1{font-size:clamp(2rem,4vw,3rem);margin:0 0 14px;}
.tf-hero h1 span{color:var(--tf-blue);}
.tf-hero p{color:var(--tf-soft);font-size:1.1rem;max-width:60ch;}
.tf-hero-cta{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap;}
.tf-eyebrow{font-family:var(--tf-display);font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tf-blue);}
.tf-hero-art{border-radius:18px;overflow:hidden;aspect-ratio:4/3;background:#dce7f3;box-shadow:var(--tf-shadow);}
.tf-hero-art img{width:100%;height:100%;object-fit:cover;}
.tf-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--tf-display);font-weight:600;padding:12px 22px;border-radius:var(--tf-radius-sm);}
.tf-btn-primary{background:var(--tf-ink);color:#fff;}
.tf-btn-ghost{background:#fff;border:1.5px solid var(--tf-line-strong);color:var(--tf-ink);}

/* ---------- request/callback form ---------- */
.tf-form{background:#fff;border:1px solid var(--tf-line);border-radius:var(--tf-radius);padding:26px;max-width:520px;}
.tf-form label{display:block;font-family:var(--tf-display);font-weight:600;font-size:.88rem;margin-bottom:6px;color:var(--tf-ink);}
.tf-form input,.tf-form textarea{width:100%;padding:12px 14px;border:1.5px solid var(--tf-line-strong);border-radius:var(--tf-radius-sm);margin-bottom:16px;font-size:.95rem;}
.tf-form .tf-hp{position:absolute;left:-9999px;}
.tf-form-ok{background:#e8f6ee;border:1px solid #b6e0c8;color:#1D7A4D;padding:12px 16px;border-radius:8px;margin-bottom:14px;display:none;}

@media(max-width:860px){.tf-hero-inner{grid-template-columns:1fr;}.tf-hero-art{order:-1;}}

/* ==========================================================================
   ОБ'ЄКТИ (портфоліо) + плитки головної
   ========================================================================== */
.tf-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:0; min-height:440px; }
.tf-tile { position:relative; overflow:hidden; display:flex; align-items:flex-end; min-height:440px; text-decoration:none; }
.tf-tile-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1); transition:transform .6s cubic-bezier(.2,.7,.2,1), filter .4s ease; }
.tf-tile-ov { position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,18,15,.15),rgba(20,18,15,.78)); transition:background .4s ease; }
.tf-tile-in { position:relative; z-index:2; padding:32px 28px; color:#fff; transition:transform .4s ease; }
.tf-tile-label { display:block; font-family:var(--tf-display); font-weight:800; font-size:1.6rem; text-shadow:0 2px 16px rgba(0,0,0,.4); }
.tf-tile-sub { display:block; color:#dbe7f5; margin-top:4px; font-size:.95rem; }
.tf-tile:hover .tf-tile-img { transform:scale(1.12); filter:brightness(.72) saturate(1.05); }
.tf-tile:hover .tf-tile-ov { background:linear-gradient(180deg,rgba(20,18,15,.5),rgba(20,18,15,.92)); }
.tf-tile:hover .tf-tile-in { transform:translateY(-6px); }
@media(max-width:860px){ .tf-tiles{grid-template-columns:1fr;} }

.tf-proj-filters { display:flex; gap:8px; flex-wrap:wrap; margin:20px 0 22px; }
.tf-proj-filter { font-family:var(--tf-display); font-weight:600; font-size:.88rem; padding:8px 16px; border-radius:999px; border:1.5px solid var(--tf-line-strong); background:#fff; color:var(--tf-soft); cursor:pointer; }
.tf-proj-filter.is-active { background:var(--tf-ink); border-color:var(--tf-ink); color:#fff; }
/* (old conflicting card rules removed — see wider-card rules below) */

/* ==========================================================================
   4-tile layout + top nav submenu + language switcher
   ========================================================================== */
.tf-tiles-4 { grid-template-columns: repeat(4,1fr); }
@media(max-width:1024px){ .tf-tiles-4{grid-template-columns:1fr 1fr;} }
@media(max-width:600px){ .tf-tiles-4{grid-template-columns:1fr;} }

/* top nav bar */
.tf-topnav { background:#fff; border-bottom:1px solid var(--tf-line); }
.tf-topnav-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:10px 0; }
.tf-mainmenu { display:flex; align-items:center; gap:26px; }
.tf-mainmenu > a, .tf-sub-trigger { font-family:var(--tf-display); font-weight:600; font-size:.95rem; color:var(--tf-text); padding:6px 0; border-bottom:2px solid transparent; transition:.15s; }
.tf-mainmenu > a:hover, .tf-sub-trigger:hover { color:var(--tf-ink); border-color:var(--tf-sand); }

/* submenu (Товар) */
.tf-has-sub { position:relative; }
.tf-submenu {
  position:absolute; top:100%; left:-16px; min-width:230px;
  background:#fff; border:1px solid var(--tf-line); border-radius:var(--tf-radius);
  box-shadow:var(--tf-shadow); padding:8px; opacity:0; visibility:hidden;
  transform:translateY(8px); transition:.2s ease; z-index:60;
}
.tf-has-sub:hover .tf-submenu { opacity:1; visibility:visible; transform:translateY(0); }
.tf-submenu a {
  display:block; padding:10px 14px; border-radius:var(--tf-radius-sm);
  font-family:var(--tf-display); font-weight:600; font-size:.92rem; color:var(--tf-soft);
  transition:.15s;
}
.tf-submenu a:hover { background:#eaf1fa; color:var(--tf-ink); }

/* language switcher */
.tf-lang { display:flex; align-items:center; gap:8px; }
.tf-lang-btn {
  background:none; border:0; font-family:var(--tf-display); font-weight:700; font-size:.9rem;
  color:var(--tf-mute); cursor:pointer; padding:4px 6px; border-radius:6px; transition:.15s;
}
.tf-lang-btn:hover { color:var(--tf-ink); }
.tf-lang-btn.is-active { background:var(--tf-ink); color:#fff; }

@media(max-width:860px){
  .tf-mainmenu { gap:14px; font-size:.85rem; overflow-x:auto; }
  .tf-submenu { position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; padding:4px 0 4px 16px; }
}

/* ==========================================================================
   Головна 1-в-1 зі скріном 2: чисте одне меню + плитки одразу вгорі
   ========================================================================== */
/* Прибрати дубльоване рідне меню Storefront */
.storefront-primary-navigation,
.main-navigation,
.secondary-navigation { display: none !important; }

/* Шапка: логотип + горизонтальне меню в один ряд */
.site-header { padding: 10px 0 !important; }
.tf-topnav { border-bottom: 1px solid var(--tf-line); }
.tf-topnav-inner { padding: 8px 0; }
.tf-mainmenu { justify-content: center; flex: 1; }

/* центрувати меню між логотипом і мовою — як на скріні 2 */
.site-branding { display: flex; align-items: center; }
.site-header .col-full { display: flex; align-items: center; }

/* Плитки одразу під шапкою — прибрати зайві відступи зверху на головній */
.home .tf-tiles, .page-template-front .tf-tiles { margin-top: 0; }
.home .site-content, .home #content { padding-top: 0 !important; }
.home .tf-hero { display: none; } /* прибрати старий hero-блок, щоб плитки були вгорі */

/* Заголовок секції об'єктів як "Продукти" на скріні */
.tf-projects-heading { text-align: center; font-family: var(--tf-display); font-weight: 800; font-size: 2rem; color: #555; margin: 40px 0 6px; }
.tf-projects-sub { text-align: center; color: var(--tf-blue); margin-bottom: 26px; }

/* ==========================================================================
   Шапка: логотип зліва, меню в центрі, мова/пошук справа — усе в один рядок
   ========================================================================== */
.site-header .col-full,
.tf-topnav .col-full {
  max-width: 1360px !important;
  width: 94% !important;
  margin: 0 auto !important;
  box-sizing: border-box;
}
.tf-topnav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: nowrap;
}
.tf-mainmenu {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: nowrap;      /* меню в один ряд */
  flex: 1 1 auto;
  justify-content: center;
}
.tf-mainmenu > a,
.tf-sub-trigger {
  white-space: nowrap;    /* слова не переносяться під себе */
}
.tf-lang { flex: 0 0 auto; }
.site-branding { flex: 0 0 auto; }

@media (max-width: 1200px) {
  .tf-mainmenu { gap: 14px; font-size: .9rem; }
}
@media (max-width: 980px) {
  .tf-topnav-inner { flex-wrap: wrap; justify-content: center; }
  .tf-mainmenu { gap: 12px; font-size: .85rem; }
}

/* ==========================================================================
   FIX (working): tf-topnav власним рядком на всю ширину під логотипом
   ========================================================================== */
.site-header > .col-full { flex-wrap: wrap !important; }
.tf-topnav {
  flex: 1 0 100% !important;
  width: 100% !important;
  order: 9 !important;
  position: static !important;
  margin: 8px 0 0 !important;
}
.tf-topnav-inner {
  max-width: 1500px !important;
  width: 96% !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap !important;
  gap: 20px;
}
.tf-mainmenu {
  flex: 1 1 auto;
  justify-content: center;
  gap: 18px;
  min-width: 0;
  flex-wrap: nowrap !important;
}
.tf-mainmenu > a,
.tf-sub-trigger { white-space: nowrap; font-size: .95rem; }
.tf-lang { flex: 0 0 auto; }

@media (max-width: 1300px) { .tf-mainmenu { gap: 12px; font-size: .86rem; } }
@media (max-width: 900px)  { .tf-topnav-inner { flex-wrap: wrap !important; justify-content: center; } }

/* ==========================================================================
   Ширші картки об'єктів (як prime-service): фото + дата + назва
   ========================================================================== */
.tf-proj-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.tf-proj-card {
  display: block; text-decoration: none; background: #fff;
  border-radius: 4px; overflow: hidden; transition: transform .2s, box-shadow .2s;
}
.tf-proj-card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(45,45,45,.14); }
.tf-proj-thumb { display: block; aspect-ratio: 4/3; overflow: hidden; background: #dce7f3; }
.tf-proj-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.tf-proj-card:hover .tf-proj-thumb img { transform: scale(1.06); }
.tf-proj-meta { display: block; padding: 12px 4px 4px; }
.tf-proj-date { display: block; color: #9aa7b5; font-size: .82rem; margin-bottom: 4px; }
.tf-proj-name { display: block; color: var(--tf-ink); font-family: var(--tf-display); font-weight: 600; font-size: 1rem; line-height: 1.3; }
.tf-proj-card:hover .tf-proj-name { text-decoration: underline; }
.tf-proj-type { /* remove old overlay badge look on new cards */ }
@media(max-width:1024px){ .tf-proj-grid{grid-template-columns:repeat(3,1fr);} }
@media(max-width:700px){ .tf-proj-grid{grid-template-columns:1fr 1fr; gap:16px;} }

/* ==========================================================================
   Сторінка окремого об'єкта: галерея + опис
   ========================================================================== */
.tf-single { max-width: 1100px; margin: 30px auto; padding: 0 20px; }
.tf-single-crumbs { color: #9aa7b5; font-size: .9rem; margin-bottom: 14px; }
.tf-single-crumbs a { color: var(--tf-blue); text-decoration: none; }
.tf-single-title { font-family: var(--tf-display); font-weight: 800; font-size: 2.2rem; color: var(--tf-ink); margin: 0 0 6px; }
.tf-single-date { color: #9aa7b5; margin-bottom: 20px; }
.tf-single-info { background: #f5f8fc; border-radius: 8px; padding: 18px 22px; margin-bottom: 26px; }
.tf-single-info p { margin: 4px 0; color: var(--tf-text); }
.tf-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.tf-gallery-item { display: block; border-radius: 8px; overflow: hidden; background: #dce7f3; }
.tf-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.tf-gallery-item:hover img { transform: scale(1.04); }
.tf-single-back { margin: 30px 0; }
.tf-single-back a { color: var(--tf-blue); text-decoration: none; font-weight: 600; }
@media(max-width:600px){ .tf-gallery{grid-template-columns:1fr;} }

/* ==========================================================================
   Блок "Глобальна Мережа" з картою світу
   ========================================================================== */
.tf-global { padding: 50px 0 20px; text-align: center; }
.tf-global-title { font-family: var(--tf-display); font-weight: 800; font-size: 2rem; color: var(--tf-ink); margin-bottom: 10px; }
.tf-global-sub { max-width: 820px; margin: 0 auto 24px; color: var(--tf-soft); }
.tf-global-map img { max-width: 1100px; width: 100%; height: auto; opacity: .9;
  filter: sepia(1) saturate(3) hue-rotate(5deg) brightness(1.05); } /* золотистий відтінок як на скріні */

/* прибрати сайдбар — контент на всю ширину */
.tf-no-sidebar #primary, .tf-no-sidebar .content-area { width: 100% !important; float: none !important; margin: 0 !important; }
.tf-no-sidebar #secondary, .tf-no-sidebar .widget-area { display: none !important; }

/* ==========================================================================
   Логотип-зображення TOPFLOR замість текстової назви
   ========================================================================== */
.site-branding .site-title,
.site-branding .site-title a {
  display: inline-block;
  font-size: 0 !important;         /* сховати текст */
  line-height: 0;
  width: 260px;
  height: 74px;
  background-image: url('assets/logo-header.png');
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}
.site-branding .site-description { display: none !important; }
@media(max-width:600px){
  .site-branding .site-title, .site-branding .site-title a { width: 180px; height: 52px; }
}

/* ==========================================================================
   Кнопка "Каталог" з мега-меню (як prime-service)
   ========================================================================== */
.tf-has-mega { position: relative; }
.tf-cat-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--tf-display); font-weight: 700; font-size: .95rem;
  color: var(--tf-ink); white-space: nowrap;
  background: var(--tf-sand); padding: 8px 16px; border-radius: 8px;
  transition: .18s;
}
.tf-cat-trigger:hover { background: var(--tf-sand-dark); color: #fff; }
/* іконка-сітка 2×2 */
.tf-cat-grid-ico {
  width: 16px; height: 16px; display: inline-block;
  background:
    linear-gradient(currentColor,currentColor) 0 0 / 6px 6px no-repeat,
    linear-gradient(currentColor,currentColor) 10px 0 / 6px 6px no-repeat,
    linear-gradient(currentColor,currentColor) 0 10px / 6px 6px no-repeat,
    linear-gradient(currentColor,currentColor) 10px 10px / 6px 6px no-repeat;
}

/* випадна панель */
.tf-catalog-mega {
  position: absolute; top: 100%; left: 0; margin-top: 8px;
  display: flex; min-width: 620px;
  background: #fff; border: 1px solid var(--tf-line); border-radius: 12px;
  box-shadow: 0 12px 40px rgba(45,45,45,.16);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: .2s ease; z-index: 200; overflow: hidden;
}
.tf-has-mega:hover .tf-catalog-mega { opacity: 1; visibility: visible; transform: translateY(0); }

.tf-cat-col-left {
  background: #faf8f4; padding: 16px 0; min-width: 240px; border-right: 1px solid var(--tf-line);
}
.tf-cat-cat {
  display: block; padding: 12px 22px; font-family: var(--tf-display); font-weight: 600;
  font-size: .95rem; color: var(--tf-text); transition: .15s;
}
.tf-cat-cat:hover { background: #fff; color: var(--tf-sand-dark); box-shadow: inset 3px 0 0 var(--tf-sand); }

.tf-cat-col-right { padding: 16px; display: grid; grid-template-columns: 1fr; gap: 4px; flex: 1; }
.tf-cat-type {
  display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 8px;
  color: var(--tf-text); font-family: var(--tf-display); font-weight: 600; font-size: .92rem; transition: .15s;
}
.tf-cat-type:hover { background: #faf8f4; color: var(--tf-sand-dark); }
.tf-cat-ico {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 7px;
  background: var(--tf-sand); opacity: .9;
  -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: 60%;
}
/* прості гліфи-іконки для типів (емодзі-фон як плейсхолдер стилю) */
.tf-ico-linoleum { background: linear-gradient(135deg,#c9a878,#a9863f); }
.tf-ico-sport    { background: linear-gradient(135deg,#8fae7a,#5f7d4a); }
.tf-ico-tile     { background: linear-gradient(135deg,#7a95ae,#4a6a7d); }
.tf-ico-carpet   { background: linear-gradient(135deg,#ae7a95,#7d4a6a); }
.tf-ico-roll     { background: linear-gradient(135deg,#c9b878,#a99a3f); }
.tf-ico-plinth   { background: linear-gradient(135deg,#9a9a9a,#666); }

@media(max-width:900px){
  .tf-catalog-mega { position: static; min-width: 0; flex-direction: column; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; }
  .tf-cat-col-left { border-right: 0; border-bottom: 1px solid var(--tf-line); }
}

/* Прибрати заголовок "Головна" на головній сторінці */
.home .entry-header,
.page-id-1073 .entry-header,
.home .entry-title { display: none !important; }

/* ==========================================================================
   Міні-каталог популярних товарів на головній
   ========================================================================== */
.tf-popular { padding: 20px 0 50px; }
.tf-popular-heading { text-align: center; font-family: var(--tf-display); font-weight: 800; font-size: 2rem; color: var(--tf-ink); margin: 20px 0 6px; }
.tf-popular-sub { text-align: center; color: var(--tf-sand-dark); margin-bottom: 30px; }
.tf-popular-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.tf-prod-card {
  display: block; background: #fff; border: 1px solid var(--tf-line); border-radius: 12px;
  overflow: hidden; text-decoration: none; transition: transform .2s, box-shadow .2s;
}
.tf-prod-card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(45,45,45,.12); }
.tf-prod-thumb { display: block; aspect-ratio: 1/1; overflow: hidden; background: #f5f2ec; }
.tf-prod-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.tf-prod-card:hover .tf-prod-thumb img { transform: scale(1.05); }
.tf-prod-body { padding: 14px 16px 18px; }
.tf-prod-cat { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tf-mute); font-family: var(--tf-display); font-weight: 700; }
.tf-prod-name { display: block; color: var(--tf-ink); font-family: var(--tf-display); font-weight: 600; font-size: 1rem; line-height: 1.3; margin: 6px 0 8px; }
.tf-prod-price { color: var(--tf-sand-dark); font-family: var(--tf-display); font-weight: 700; }
.tf-popular-more { text-align: center; margin-top: 34px; }
.tf-popular-more a {
  display: inline-block; background: var(--tf-ink); color: #fff; font-family: var(--tf-display);
  font-weight: 600; padding: 12px 30px; border-radius: 8px; text-decoration: none; transition: .18s;
}
.tf-popular-more a:hover { background: var(--tf-sand-dark); }
@media(max-width:1024px){ .tf-popular-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:560px){ .tf-popular-grid{grid-template-columns:1fr 1fr; gap:14px;} }