/* ===== TrueFarma Shop Layout ===== */
.tf-app {
	--tf-blue: #1a8fd1;
	--tf-cyan: #12c5ee;
	--tf-green: #1fb866;
	--tf-orange: #ff9500;
	--tf-red: #e02424;
	--tf-ink: #111827;
	--tf-text: #374151;
	--tf-muted: #9aa3ad;
	--tf-line: #e3e8ee;
	--tf-bg: #eef7fc;
	--tf-head-h: 80px;
	background: var(--tf-bg);
	color: var(--tf-text);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.4;
}
.tf-app *, .tf-app *::before, .tf-app *::after { box-sizing: border-box; }
.tf-app h1, .tf-app h2, .tf-app h3, .tf-app h4, .tf-app button, .tf-app input { font-family: Arial, Helvetica, sans-serif; }
.tf-app h1, .tf-app h2, .tf-app h3, .tf-app h4 { line-height: 1.2; }
.tf-app a { text-decoration: none; }
.tf-app ul { list-style: none; margin: 0; padding: 0; }
.tf-app svg { width: 18px; height: 18px; flex: none; }
.tf-shop {
	display: grid;
	grid-template-columns: 224px 1fr;
	min-height: 100vh;
}
.tf-shop { background: linear-gradient(90deg, #fff 223px, var(--tf-line) 223px, var(--tf-line) 224px, transparent 224px); }
.tf-shop.has-header { min-height: calc(100vh - var(--tf-head-h)); }
.tf-main { display: flex; flex-direction: column; }
.tf-main > .tf-footer { margin-top: auto; }

/* ---------- Logo (traced from the official logo) ---------- */
.tf-logo { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.tf-logo-img { display: block; width: auto !important; height: 46px !important; aspect-ratio: 865 / 178; }
.tf-logo-tag { font-family: Georgia, "Times New Roman", serif; font-size: 11px; font-style: italic; color: #1f3a52; line-height: 1; }
.tf-logo-sm .tf-logo-img { height: 30px !important; }
.tf-logo-sm .tf-logo-tag { font-size: 9px; }

/* ---------- Top bar (moving announcement + contact) ---------- */
.tf-topbar { position: relative; z-index: 51; }
.tf-marquee { overflow: hidden; background: #00c8f5; color: #fff; height: 40px; display: flex; align-items: center; }
.tf-marquee-track { display: flex; flex: none; width: max-content; animation: tf-marquee 40s linear infinite; will-change: transform; }
.tf-marquee:hover .tf-marquee-track { animation-play-state: paused; }
.tf-mq-item { display: inline-flex; align-items: center; gap: 8px; padding: 0 22px; white-space: nowrap; font-size: 14px; font-weight: 700; }
.tf-mq-item::after { content: "."; margin-left: 22px; font-weight: 900; opacity: .9; }
.tf-mq-item i { display: inline-grid; place-items: center; }
.tf-mq-item svg { width: 15px; height: 15px; stroke-width: 2.2; }
@keyframes tf-marquee { from { transform: translateX(0); } to { transform: translateX(-25%); } }
@media (prefers-reduced-motion: reduce) { .tf-marquee-track { animation: none; } }
.tf-contactbar { background: #6b6e6f; color: #fff; }
.tf-contactbar-in { display: flex; align-items: center; gap: 24px; min-height: 40px; padding: 0 28px; font-size: 14px; }
.tf-contactbar a { display: inline-flex; align-items: center; gap: 8px; color: #fff !important; }
.tf-contactbar a:hover { text-decoration: underline; }
.tf-contactbar svg { width: 18px; height: 18px; }
.tf-contactbar-lang { margin-left: auto; }
.tf-contactbar .tf-lang .gls-toggle { font-size: 14px; padding: 4px 6px; color: #fff; }
.tf-contactbar .tf-lang .gls-icon svg { width: 17px; height: 17px; }
@media (max-width: 820px) { .tf-contactbar-in { padding: 0 14px; gap: 14px; font-size: 12px; } .tf-contactbar-in a:nth-child(2) { display: none; } }

/* ---------- Header ---------- */
.tf-header {
	position: sticky; top: 0; z-index: 50;
	height: var(--tf-head-h);
	display: flex; align-items: center; gap: 40px;
	padding: 0 28px;
	background: #11c3ee;
	box-shadow: 0 2px 10px rgba(0, 90, 130, .12);
}
.admin-bar .tf-header { top: 32px; }
.tf-search {
	position: relative; flex: 0 1 432px;
	margin: 0;
}
.tf-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: #fff; pointer-events: none; }
.tf-search input[type=search] {
	width: 100%; height: 50px; margin: 0;
	padding: 0 16px 0 42px;
	border: 2px solid rgba(255,255,255,.85) !important;
	border-radius: 12px;
	background: rgba(255,255,255,.28) !important;
	color: #fff; font-size: 14px;
	box-shadow: none; outline: none;
	-webkit-appearance: none; appearance: none;
}
.tf-search input::placeholder { color: rgba(255,255,255,.9); }
.tf-search input:focus { background: rgba(255,255,255,.4) !important; border-color: #fff !important; }
.tf-search.is-loading::after {
	content: ""; position: absolute; right: 14px; top: 50%; width: 16px; height: 16px; margin-top: -8px;
	border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%;
	animation: tf-spin .7s linear infinite;
}
@keyframes tf-spin { to { transform: rotate(360deg); } }
.tf-shop.is-loading .tf-main { opacity: .55; transition: opacity .15s; }
.tf-head-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.tf-head-count { padding: 5px 8px; border-radius: 6px; background: rgba(255,255,255,.28); color: #fff; font-size: 11px; }
.tf-cart {
	position: relative;
	display: inline-flex; align-items: center; gap: 8px;
	height: 30px; padding: 0 14px;
	border-radius: 5px;
	background: #1a8fd1; color: #fff !important;
	font-size: 12px; font-weight: 700;
}
.tf-cart svg { width: 20px; height: 20px; }
.tf-cart-count {
	position: absolute; top: -7px; right: -6px;
	min-width: 15px; height: 15px; padding: 0 4px;
	display: grid; place-items: center;
	border-radius: 10px; background: #ef2b2b; color: #fff;
	font-size: 9px; font-weight: 700; line-height: 1;
}

/* ---------- Footer ---------- */
.tf-footer {
	display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
	padding: 18px 20px;
	background: #fff;
	border-top: 1px solid var(--tf-line);
}
.tf-footer-trust { display: flex; gap: 18px; flex-wrap: wrap; font-size: 11px; color: var(--tf-blue); }
.tf-footer-trust span { display: inline-flex; align-items: center; gap: 6px; }
.tf-footer-trust span.g { color: #1fa855; }
.tf-footer-trust i {
	width: 22px; height: 22px; border-radius: 6px;
	display: grid; place-items: center;
	background: #dcebfb;
}
.tf-footer-trust span.g i { background: #dcf3e6; }
.tf-footer-trust svg { width: 14px; height: 14px; }

/* ---------- Sidebar ---------- */
.tf-side {
	background: #fff;
	border-right: 1px solid var(--tf-line);
	padding: 28px 18px 0;
	display: flex;
	flex-direction: column;
	position: sticky;
	top: 0;
	height: 100vh;
	overflow-y: auto;
}
.has-header .tf-side { top: var(--tf-head-h); height: calc(100vh - var(--tf-head-h)); }
.tf-side-title { font-size: 14px; font-weight: 700; color: var(--tf-ink); margin: 0 0 12px; }
.tf-dept li { margin-bottom: 6px; }
.tf-dept a {
	display: flex; align-items: center; gap: 12px;
	padding: 11px 10px;
	border: 1px solid transparent;
	border-radius: 8px;
	color: var(--tf-blue);
	font-size: 13px;
	transition: background .15s, border-color .15s;
}
.tf-dept a:hover { background: #f3f9fd; }
.tf-dept a.is-active { background: #eaf6fd; border-color: #b9e2f7; }
.tf-dept-name { flex: 1; }
.tf-dept-arrow svg { width: 16px; height: 16px; }
.tf-side-block + .tf-side-block { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--tf-line); }
.tf-side-sub { font-size: 14px; font-weight: 600; color: var(--tf-muted); margin: 0 0 10px; }
.tf-sort a { display: block; padding: 10px 9px; color: #4b5563; font-size: 13px; border-radius: 6px; }
.tf-sort a:hover { background: #f3f9fd; }
.tf-sort a.is-active { color: var(--tf-cyan); font-weight: 600; }
.tf-trust {
	margin: auto -18px 0;
	padding: 18px;
	background: #f0f8fc;
	border-top: 1px solid var(--tf-line);
	font-size: 11.5px;
	color: #374151;
}
.tf-trust div { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.tf-trust span {
	width: 22px; height: 22px; border-radius: 6px;
	display: grid; place-items: center;
	background: #e0f2ea; color: #1f9d5a;
}
.tf-trust div:nth-child(2) span { background: #dcebfb; color: var(--tf-blue); }
.tf-trust div:nth-child(3) span { background: #e3eefb; color: var(--tf-blue); }
.tf-trust svg { width: 14px; height: 14px; }

/* ---------- Main ---------- */
.tf-main { min-width: 0; }

/* Hero */
.tf-hero {
	display: flex; align-items: center; justify-content: space-between; gap: 24px;
	padding: 30px 26px;
	background-color: #d2f0fb;
	background-image: radial-gradient(#9bd9ef 1.3px, transparent 1.5px);
	background-size: 22px 22px;
	border-bottom: 1px solid #b8e3f3;
}
.tf-live {
	display: flex; align-items: center; gap: 10px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 11.5px; color: #1b8a9e;
}
.tf-live i { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.18); }
.tf-hero-title { margin: 8px 0 6px; font-size: 36px; line-height: 1.1; font-weight: 800; color: #0b0f19; }
.tf-hero-title span { color: var(--tf-cyan); }
.tf-hero-sub { margin: 0; max-width: 300px; color: #7b8691; font-size: 13px; }
.tf-stats { display: flex; gap: 12px; }
.tf-stat {
	min-width: 98px; padding: 12px 10px;
	display: flex; flex-direction: column; align-items: center; gap: 4px;
	background: rgba(255,255,255,.55);
	border: 1px solid rgba(255,255,255,.8);
	border-radius: 10px;
	text-align: center;
}
.tf-stat svg { color: var(--tf-blue); width: 16px; height: 16px; }
.tf-stat strong { color: var(--tf-blue); font-size: 14px; }
.tf-stat small { color: #8a949e; font-size: 12px; }

/* Filter bar */
.tf-bar { display: flex; align-items: center; gap: 10px; padding: 26px 14px 16px; font-size: 11px; color: var(--tf-muted); }
.tf-bar-ic svg { color: #b5bec8; width: 17px; height: 17px; }
.tf-chip {
	display: inline-flex; align-items: center; gap: 4px;
	padding: 3px 8px; border-radius: 5px;
	background: #dff1fb; color: var(--tf-blue); font-size: 11px;
}
.tf-chip svg { width: 11px; height: 11px; stroke-width: 3; }

/* Grid */
.tf-grid {
	display: grid;
	grid-template-columns: repeat(var(--tf-cols, 4), minmax(0, 1fr));
	gap: 12px;
	padding: 0 14px 30px;
}
.tf-card {
	background: #fff;
	border: 1px solid var(--tf-line);
	border-radius: 12px;
	overflow: hidden;
	display: flex; flex-direction: column;
	transition: box-shadow .2s, transform .2s;
}
.tf-card:hover { box-shadow: 0 10px 28px rgba(15, 60, 90, .10); transform: translateY(-2px); }
.tf-media {
	position: relative; display: block;
	aspect-ratio: 16 / 11.2;
	background: #ffffff;
	overflow: hidden;
}
.tf-media img { width: 100%; height: 100%; object-fit: contain; padding: 0; transition: transform .3s; }
.tf-card:hover .tf-media img { transform: scale(1.04); }
.tf-badge {
	position: absolute; top: 12px;
	padding: 3px 8px; border-radius: 20px;
	font-size: 11px; font-weight: 700; color: #fff; letter-spacing: .3px;
}
.tf-badge-new { left: 10px; background: var(--tf-blue); }
.tf-badge-top { left: 10px; background: var(--tf-orange); }
.tf-badge-off { right: 10px; background: var(--tf-green); }

.tf-body { padding: 18px 16px 20px; display: flex; flex-direction: column; flex: 1; }
.tf-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.tf-pill {
	padding: 3px 8px; border: 1.5px solid var(--tf-blue); border-radius: 20px;
	color: var(--tf-blue); font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
}
.tf-rating { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--tf-ink); }
.tf-rating svg { width: 13px; height: 13px; color: #fbbf24; }
.tf-rating em { font-style: normal; color: var(--tf-muted); }
.tf-name { margin: 0 0 6px; font-size: 14px; line-height: 1.6; font-weight: 700; }
.tf-name a { color: var(--tf-ink); }
.tf-name a:hover { color: var(--tf-blue); }
.tf-desc { margin: 0 0 16px; font-size: 10px; color: #b3bac2; }
.tf-foot {
	margin-top: auto; padding-top: 12px;
	border-top: 1px solid #d6dce2;
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.tf-price strong { color: var(--tf-blue); font-size: 17px; font-weight: 600; }
.tf-price del { margin-left: 6px; font-size: 10px; color: #9aa3ad; }
.tf-price small { display: block; font-size: 9px; color: var(--tf-green); }
.tf-add {
	display: inline-flex; align-items: center; gap: 4px;
	padding: 7px 10px;
	border-radius: 20px;
	background: var(--tf-blue); color: #fff !important;
	font-size: 11px; font-weight: 700; letter-spacing: 1px; white-space: nowrap;
	transition: background .15s;
}
.tf-add b { font-size: 14px; line-height: 1; }
.tf-add:hover { background: #127bb8; }
.tf-add.loading { opacity: .6; }
.tf-add.added::after { content: " ✓"; }
.tf-foot .added_to_cart { display: none; }
.tf-oos { color: var(--tf-red); font-size: 11px; }
.tf-empty { padding: 30px 14px; color: var(--tf-muted); }

/* Pagination */
.tf-pages { display: flex; gap: 6px; justify-content: center; padding: 0 14px 40px; }
.tf-pages a {
	min-width: 34px; height: 34px; display: grid; place-items: center;
	border-radius: 8px; background: #fff; border: 1px solid var(--tf-line); color: var(--tf-text);
}
.tf-pages a.is-active { background: var(--tf-blue); border-color: var(--tf-blue); color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 1280px) { .tf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1024px) {
	.tf-hero { flex-direction: column; align-items: flex-start; }
	.tf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
	.tf-header { gap: 12px; padding: 0 14px; }
	.tf-header .tf-logo-tag { display: none; }
	.tf-header .tf-logo-img { height: 28px !important; }
	.tf-marquee { height: 34px; } .tf-mq-item { font-size: 12px; }
	.tf-head-count { display: none; }
	.tf-cart span:not(.tf-cart-count) { display: none; }
	.tf-shop { grid-template-columns: 1fr; background: none; }
	.has-header .tf-side, .tf-side { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--tf-line); padding: 18px 16px 0; }
	.tf-dept { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
	.tf-dept li { margin: 0; flex: none; }
	.tf-dept-arrow { display: none; }
	.tf-side-block + .tf-side-block { margin-top: 14px; padding-top: 12px; }
	.tf-sort { display: flex; gap: 4px; overflow-x: auto; }
	.tf-sort a { white-space: nowrap; }
	.tf-trust { display: none; }
	.tf-hero { padding: 22px 16px; }
	.tf-hero-title { font-size: 28px; }
	.tf-stats { width: 100%; }
	.tf-stat { flex: 1; min-width: 0; }
	.tf-bar, .tf-grid { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 520px) {
	.tf-grid { grid-template-columns: 1fr; }
}

/* =====================================================
   Single product page
   ===================================================== */
body.tf-single-page { margin: 0; background: #eef6fc; }
.tf-single { min-height: 100vh; display: flex; flex-direction: column; background: #eef6fc; }
.tf-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* header */
.tf-single-head { background: #fff; border-bottom: 1px solid #e6edf3; position: sticky; top: 0; z-index: 50; }
.admin-bar .tf-single-head { top: 32px; }
.tf-single-head-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; }
.tf-single-head-left { display: flex; align-items: center; gap: 18px; }
.tf-single-head-left .tf-logo-img { height: 34px !important; }
.tf-back { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #9aa3ad !important; }
.tf-back svg { width: 15px; height: 15px; }
.tf-back:hover { color: var(--tf-blue) !important; }
.tf-sep { width: 1px; height: 16px; background: #d5dce3; }
.tf-single-tag { font-size: 12px; color: #3e5b74; }
.tf-single-head-right { display: flex; gap: 24px; }
.tf-single-head-right > div { display: flex; align-items: center; gap: 8px; }
.tf-single-head-right i {
	width: 30px; height: 30px; border-radius: 50%;
	display: grid; place-items: center;
	background: #e2f1fb; color: var(--tf-blue);
}
.tf-single-head-right svg { width: 16px; height: 16px; }
.tf-single-head-right span { display: flex; flex-direction: column; line-height: 1.3; }
.tf-single-head-right b { font-size: 12px; color: #1f2937; }
.tf-single-head-right small { font-size: 11px; color: #9aa3ad; }

/* layout */
.tf-single-main { flex: 1; padding: 48px 0 56px; }
.tf-notices { margin-bottom: 20px; }
.tf-single-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.tf-single-image {
	aspect-ratio: 356 / 255;
	border: 1.5px solid #b9dcef;
	border-radius: 12px;
	overflow: hidden;
	background: linear-gradient(180deg, #f4f6f8, #e6eaee);
}
.tf-single-image img { width: 100%; height: 100%; object-fit: contain; display: block; }

.tf-included { margin-top: 26px !important; display: flex; flex-direction: column; gap: 14px; }
.tf-included li {
	display: flex; align-items: center; gap: 14px;
	padding: 6px 8px;
	background: #fff; border-radius: 8px;
	cursor: pointer; border: 1px solid transparent;
	transition: border-color .15s;
}
.tf-included li:hover, .tf-included li.is-active { border-color: #b9dcef; }
.tf-included img { width: 64px; height: 54px; object-fit: cover; border-radius: 6px; background: #eef2f5; }
.tf-included span { display: flex; flex-direction: column; }
.tf-included b { font-size: 13px; color: var(--tf-blue); letter-spacing: .4px; }
.tf-included small { font-size: 11px; color: #a0a9b2; margin-top: 3px; }

.tf-single-info { padding-left: 8px; }
.tf-single-badge {
	display: inline-block; padding: 4px 9px;
	border-radius: 6px; background: var(--tf-blue);
	color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .6px;
}
.tf-single-title { margin: 10px 0 4px; font-size: 38px; line-height: 1.15; font-weight: 700; color: #0b0f19; }
.tf-single-sub { margin: 0 0 14px; font-size: 13px; color: #8a949e; }
.tf-single-rating { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.tf-single-rating small { font-size: 11px; color: #4b5563; }
.tf-stars { display: inline-flex; gap: 4px; }
.tf-stars i { display: inline-flex; color: #fbbf24; }
.tf-stars i svg { width: 24px; height: 24px; }
.tf-stars i.off { color: #d9dee4; }
.tf-stars i.half { color: #fbbf24; opacity: .55; }

.tf-features { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px !important; }
.tf-features li { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: #1f2937; }
.tf-features i {
	width: 28px; height: 28px; border-radius: 50%;
	display: grid; place-items: center; flex: none;
	background: #e2f1fb; color: var(--tf-blue);
}
.tf-features svg { width: 15px; height: 15px; }

/* price */
.tf-price-box {
	padding: 20px 22px 16px;
	border: 1.5px solid #111827;
	border-radius: 14px;
	background: #fff;
	margin-bottom: 14px;
}
.tf-price-top { display: flex; align-items: center; gap: 10px; }
.tf-off { padding: 3px 8px; border-radius: 6px; background: var(--tf-blue); color: #fff; font-size: 12px; font-weight: 700; }
.tf-price-top b { font-size: 10px; color: #111827; letter-spacing: .4px; }
.tf-price-now { margin: 6px 0 4px; font-size: 36px; line-height: 1.1; font-weight: 700; color: var(--tf-blue); }
.tf-price-reg { font-size: 10.5px; color: #9aa3ad; letter-spacing: 1.4px; }
.tf-price-old { display: flex; gap: 16px; margin-top: 10px; font-size: 9px; }
.tf-price-old del { color: #9aa3ad; }
.tf-price-old span { color: #1fa855; font-weight: 700; }

/* buttons */
.tf-btn-cart, .tf-cart-form .single_add_to_cart_button {
	display: flex !important; align-items: center; justify-content: center; gap: 10px;
	width: 100%; height: 56px;
	border: 0; border-radius: 7px;
	background: var(--tf-blue) !important; color: #fff !important;
	font-size: 12.5px; font-weight: 700; letter-spacing: 2.2px;
	cursor: pointer; transition: background .15s;
}
.tf-btn-cart svg { width: 20px; height: 20px; }
.tf-btn-cart:hover { background: #127bb8 !important; }
.tf-btn-cart.loading { opacity: .6; }
.tf-btn-cart.added::after { content: "✓"; margin-left: 4px; }
.tf-btn-cart.is-disabled { background: #b5bec8 !important; cursor: not-allowed; }
.tf-single-info .added_to_cart { display: none !important; }
.tf-cart-form form.cart { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.tf-btn-fav {
	margin-top: 26px;
	display: flex; align-items: center; justify-content: center; gap: 6px;
	width: 100%; height: 50px;
	border: 0; border-radius: 7px;
	background: #fff; color: var(--tf-blue);
	font-size: 11px; font-weight: 700; letter-spacing: 2px;
	cursor: pointer;
}
.tf-btn-fav svg { width: 24px; height: 24px; }
.tf-btn-fav.is-on svg { fill: #ef4444; stroke: #ef4444; }

/* benefits */
.tf-benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 28px; }
.tf-benefit {
	padding: 24px 24px 28px;
	background: #fff; border-radius: 6px;
	text-align: center;
}
.tf-benefit i {
	width: 44px; height: 44px; border-radius: 50%;
	margin: 0 auto 14px;
	display: grid; place-items: center;
	background: #d7ecf8; color: var(--tf-blue);
}
.tf-benefit i svg { width: 22px; height: 22px; }
.tf-benefit h3 { margin: 0 0 12px; font-size: 12px; font-weight: 700; color: var(--tf-blue); letter-spacing: .5px; }
.tf-benefit p { margin: 0; font-size: 11px; color: #6b7280; line-height: 1.6; }

/* bottom bar + floating cart */
.tf-bottom-bar { background: #1e8ccf; color: #fff; }
.tf-bottom-bar .tf-wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 68px; flex-wrap: wrap; }
.tf-bottom-bar span { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .4px; }
.tf-bottom-bar svg { width: 22px; height: 22px; }
.tf-cart-float {
	position: fixed !important; right: 16px; bottom: 16px; z-index: 60;
	height: 36px !important;
	box-shadow: 0 4px 14px rgba(0,0,0,.2);
}

/* responsive */
@media (max-width: 1000px) {
	.tf-single-head-right { display: none; }
	.tf-single-grid { grid-template-columns: 1fr; gap: 28px; }
	.tf-single-info { padding-left: 0; }
	.tf-single-left { display: contents; }
	.tf-single-image { order: 1; }
	.tf-single-info { order: 2; }
	.tf-included { order: 3; margin-top: 0 !important; }
	.tf-single-title { font-size: 30px; }
	.tf-benefits { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
	.tf-wrap { padding: 0 16px; }
	.tf-single-main { padding: 24px 0 40px; }
	.tf-single-head-left { gap: 10px; }
	.tf-single-head-left .tf-sep, .tf-single-head-left .tf-single-tag { display: none; }
	.tf-single-title { font-size: 26px; }
	.tf-benefits { grid-template-columns: 1fr; }
	.tf-bottom-bar .tf-wrap { flex-direction: column; justify-content: center; padding-top: 16px; padding-bottom: 16px; }
	.tf-cart-float span:not(.tf-cart-count) { display: none; }
}

/* =====================================================
   Brand / category product list  [tf_brand_products]
   ===================================================== */
.tf-brand { background: #fff; padding-bottom: 60px; }
.tf-brand-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.tf-brand-bar { background: #00cdf2; margin-bottom: 26px; }
.tf-brand-bar-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.tf-brand-bar-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tf-brand-back { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #3b6b7d !important; }
.tf-brand-back svg { width: 20px; height: 20px; }
.tf-brand-back:hover { color: #083344 !important; }
.tf-brand-sep { color: #3b6b7d; }
.tf-brand-title { margin: 0 0 0 30px; font-size: 20px; font-weight: 700; color: #2f5d6f; }
.tf-brand-count { font-size: 12px; color: #3b6b7d; }

.tf-brand-grid {
	display: grid;
	grid-template-columns: repeat(var(--tf-cols, 3), minmax(0, 1fr));
	gap: 20px;
}
.tf-bcard {
	display: flex; flex-direction: column;
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
	color: inherit !important;
	transition: transform .2s, box-shadow .2s;
}
.tf-bcard:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0, 0, 0, .14); }
.tf-bcard-media {
	position: relative;
	aspect-ratio: 16 / 11.5;
	background: #dedede;
	border-bottom: 2px solid #d5ecf6;
}
.tf-bcard-media img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.tf-bcard-badge {
	position: absolute; top: 8px; left: 8px;
	padding: 3px 8px; border-radius: 6px;
	background: #10b981; color: #fff;
	font-size: 11px; font-weight: 700;
}
.tf-bcard-body { padding: 18px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.tf-bcard-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; }
.tf-bcard-type { padding: 4px 8px; border-radius: 20px; background: #dbeafe; color: #1e3a5f; font-size: 11px; }
.tf-bcard-brand { font-size: 11px; color: #374151; }
.tf-bcard-name { margin: 0 0 14px; font-size: 20px; line-height: 1.25; font-weight: 700; color: #111827; }
.tf-bcard-desc { margin: 0 0 14px; max-width: 250px; font-size: 13px; line-height: 1.55; color: #4b5563; }
.tf-bcard-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.tf-bcard-chips span { padding: 4px 8px; border-radius: 20px; background: #f3f4f6; color: #374151; font-size: 10.5px; }
.tf-bcard-rating { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #111827; padding-bottom: 12px; border-bottom: 1px solid #d1d5db; margin-top: auto; }
.tf-bcard-rating .tf-stars i svg { width: 15px; height: 15px; }
.tf-bcard-rating .tf-stars i.on, .tf-bcard-rating .tf-stars i.half { color: #f5b041; }
.tf-bcard-rating small { color: #374151; font-size: 12px; }
.tf-bcard-fda { display: flex; align-items: center; gap: 8px; padding-top: 12px; font-size: 12px; color: #374151; }
.tf-bcard-fda svg { width: 17px; height: 17px; color: #4b5563; }

.tf-cta {
	margin-top: 70px;
	padding: 36px 24px 40px;
	border-radius: 14px;
	background: #00cdf2;
	text-align: center;
}
.tf-cta h2 { margin: 0 0 18px; font-size: 38px; font-weight: 800; color: #0b1220; }
.tf-cta p { margin: 0 auto 22px; max-width: 540px; font-size: 14px; line-height: 1.7; color: #fff; }
.tf-cta-btn {
	display: inline-block; padding: 12px 26px;
	border: 3px solid #111827; border-radius: 10px;
	background: #fff; color: #0068e8 !important;
	font-size: 12px; font-weight: 700;
	box-shadow: 0 4px 10px rgba(0,0,0,.25);
	transition: transform .15s;
}
.tf-cta-btn:hover { transform: translateY(-2px); }

@media (max-width: 1000px) { .tf-brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
	.tf-search input[type=search] { font-size: 16px; } /* 16px+ stops iOS auto-zoom on focus */
	.tf-brand-wrap { padding: 0 16px; }
	.tf-brand-bar-in { flex-direction: column; align-items: flex-start; justify-content: center; padding: 14px 20px; gap: 6px; }
	.tf-brand-title { margin: 0; font-size: 17px; }
	.tf-brand-sep { display: none; }
	.tf-brand-grid { grid-template-columns: 1fr; }
	.tf-cta h2 { font-size: 26px; }
}

/* ---------- Canvas pages + header language switcher ---------- */
body.tf-canvas-page { margin: 0; background: #eef7fc; }
.tf-header .tf-lang .gls-toggle { font-size: 12px; padding: 4px 6px; color: #fff; }
.tf-header .tf-lang .gls-icon svg { width: 16px; height: 16px; }
.tf-header .tf-lang .gls-menu { min-width: 100px; }
@media (max-width: 820px) { .tf-header .tf-lang .gls-current { display: none; } }

/* Keep product images fully visible (WooCommerce sets img{height:auto}) */
.tf-app .tf-media img,
.tf-app .tf-single-image img,
.tf-app .tf-bcard-media img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: contain !important;
}
.tf-app .tf-included img { width: 64px !important; height: 54px !important; object-fit: cover !important; }