/* /style/components.css */ 

/* ════════════════════════════════════════════════════════════════════════════
   TCH component layer v2 — shared UI primitives on the --tch-* design tokens
   (tokens live inline in headerStyle.php — the single canonical :root).
   UI v2 "Warm Modern" (2026-07-23): loaded GLOBALLY via headTag.php on every
   storefront page — do NOT also push this file into per-page bundles.
   Interactive behavior (modal/drawer/tabs/accordion/toast) lives in
   javascript/tch-components.js — vanilla JS, no jQuery dependency.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.tch-btn{
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	font-family:var(--tch-font-body); font-size:15px; font-weight:600; line-height:1;
	padding:12px 24px; border-radius:var(--tch-radius-pill); border:1px solid transparent;
	cursor:pointer; text-decoration:none; white-space:nowrap; user-select:none;
	transition:background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.tch-btn:focus-visible{ outline:3px solid var(--tch-focus-ring); outline-offset:2px; }
.tch-btn--primary{ background:var(--tch-brand); color:#fff; box-shadow:0 8px 20px color-mix(in srgb, var(--tch-brand) 25%, transparent); }
.tch-btn--primary:hover{ background:var(--tch-brand-dark); color:#fff; }
.tch-btn--secondary{ background:var(--tch-surface); color:var(--tch-ink); border-color:var(--tch-line); box-shadow:var(--tch-shadow-sm); }
.tch-btn--secondary:hover{ background:var(--tch-hover-bg); border-color:var(--tch-brand); color:var(--tch-brand-dark); }
.tch-btn--ghost{ background:transparent; color:var(--tch-brand-dark); }
.tch-btn--ghost:hover{ background:var(--tch-hover-bg); }
.tch-btn--danger{ background:#b3261e; color:#fff; }
.tch-btn--danger:hover{ background:#8c1d17; color:#fff; }
.tch-btn--sm{ font-size:13px; padding:8px 16px; }
.tch-btn--lg{ font-size:17px; padding:15px 32px; }
.tch-btn--block{ display:flex; width:100%; }
.tch-btn[disabled], .tch-btn--loading{ opacity:.55; pointer-events:none; }
.tch-btn--loading::before{
	content:""; width:15px; height:15px; border-radius:50%;
	border:2px solid currentColor; border-top-color:transparent;
	animation:tchSpin .7s linear infinite;
}
@keyframes tchSpin{ to{ transform:rotate(360deg); } }

/* ── Section headers (display serif) ─────────────────────────────────────── */
.tch-eyebrow{
	display:block; font-size:var(--tch-text-xs); font-weight:600; letter-spacing:.14em;
	text-transform:uppercase; color:var(--tch-brand); margin-bottom:var(--tch-space-2);
}
.tch-display{ font-family:var(--tch-font-display); font-weight:500; color:var(--tch-ink); margin:0; }
.tch-display--xl{ font-size:clamp(var(--tch-text-2xl), 4.2vw, 52px); line-height:1.12; }
.tch-display--lg{ font-size:var(--tch-text-xl); line-height:1.2; }
.tch-display--md{ font-size:var(--tch-text-lg); line-height:1.3; }
.tch-section-head{ margin-bottom:var(--tch-space-5); }
.tch-section-head p{ color:var(--tch-muted); margin:var(--tch-space-2) 0 0; max-width:64ch; }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.tch-card{
	background:var(--tch-surface); border:1px solid var(--tch-line);
	border-radius:var(--tch-radius-lg); box-shadow:var(--tch-shadow-sm);
	padding:var(--tch-space-5);
}
.tch-card--hover{ transition:box-shadow .18s ease, transform .18s ease; }
.tch-card--hover:hover{ box-shadow:var(--tch-shadow); transform:translateY(-2px); }
.tch-card__title{
	font-family:var(--tch-font-display); font-size:20px; font-weight:600;
	color:var(--tch-ink); margin:0 0 var(--tch-space-3);
}

/* ── Product card ────────────────────────────────────────────────────────── */
.tch-product{
	display:flex; flex-direction:column; overflow:hidden; position:relative;
	background:var(--tch-surface); border:1px solid var(--tch-line);
	border-radius:var(--tch-radius-lg); text-decoration:none;
	transition:box-shadow .2s ease, transform .2s ease;
}
.tch-product:hover{ box-shadow:var(--tch-shadow-lg); transform:translateY(-2px); }
.tch-product__media{ position:relative; aspect-ratio:1; background:var(--tch-surface-sand); overflow:hidden; }
.tch-product__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.tch-product__flag{
	position:absolute; top:12px; left:12px; z-index:1;
	background:var(--tch-brand); color:#fff; font-size:11px; font-weight:700;
	padding:5px 10px; border-radius:var(--tch-radius-pill);
}
.tch-product__flag--new{ background:var(--tch-ink); }
.tch-product__body{ padding:var(--tch-space-4); display:flex; flex-direction:column; gap:6px; flex:1; }
.tch-product__name{ font-size:14px; font-weight:600; line-height:1.4; color:var(--tch-ink); }
.tch-product__meta{ font-size:12.5px; color:var(--tch-muted); }

/* ── Price block ─────────────────────────────────────────────────────────── */
.tch-price{ display:inline-flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.tch-price__now{ font-size:17px; font-weight:700; color:var(--tch-ink); }
.tch-price__now--sale{ color:var(--tch-brand-dark); }
.tch-price__was{ font-size:13.5px; color:var(--tch-muted); text-decoration:line-through; font-weight:400; }
.tch-price__save{ font-size:12px; font-weight:600; color:#1e6b2d; }
.tch-price--lg .tch-price__now{ font-size:26px; }
.tch-price--lg .tch-price__was{ font-size:16px; }

/* ── Rating stars (FA6) ──────────────────────────────────────────────────── */
.tch-rating{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--tch-muted); }
.tch-rating__stars{ color:var(--tch-star); font-size:12px; letter-spacing:1px; white-space:nowrap; }

/* ── Badges & chips ──────────────────────────────────────────────────────── */
.tch-badge{
	display:inline-block; font-size:12px; font-weight:600; line-height:1;
	padding:5px 10px; border-radius:var(--tch-radius-pill);
	background:var(--tch-hover-bg); color:var(--tch-brand-dark);
}
.tch-badge--brand{ background:var(--tch-brand); color:#fff; }
.tch-badge--ok{ background:#e7f4e8; color:#1e6b2d; }
.tch-badge--warn{ background:#fdf3e0; color:#8a5a00; }
.tch-badge--err{ background:#fdeaea; color:#b3261e; }
.tch-chip{
	display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:500;
	padding:7px 14px; border-radius:var(--tch-radius-pill); cursor:pointer;
	background:var(--tch-surface); color:var(--tch-ink); border:1px solid var(--tch-line);
	transition:background .15s ease, border-color .15s ease;
}
.tch-chip:hover, .tch-chip--active{ background:var(--tch-hover-bg); border-color:var(--tch-brand); color:var(--tch-brand-dark); }

/* ── Breadcrumbs ─────────────────────────────────────────────────────────── */
.tch-crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:13px; color:var(--tch-muted); padding:0; margin:0 0 var(--tch-space-4); list-style:none; }
.tch-crumbs li{ display:inline-flex; align-items:center; gap:6px; }
.tch-crumbs li + li::before{ content:"/"; color:var(--tch-line); }
.tch-crumbs a{ color:var(--tch-muted); }
.tch-crumbs a:hover{ color:var(--tch-brand-dark); }
.tch-crumbs [aria-current]{ color:var(--tch-ink); font-weight:500; }

/* ── Pagination ──────────────────────────────────────────────────────────── */
.tch-pages{ display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap; margin:var(--tch-space-6) 0; }
.tch-pages a, .tch-pages span{
	display:inline-flex; align-items:center; justify-content:center;
	min-width:38px; height:38px; padding:0 10px; font-size:14px; font-weight:500;
	border-radius:var(--tch-radius); border:1px solid var(--tch-line);
	background:var(--tch-surface); color:var(--tch-ink);
}
.tch-pages a:hover{ border-color:var(--tch-brand); color:var(--tch-brand-dark); background:var(--tch-hover-bg); }
.tch-pages .tch-pages--current{ background:var(--tch-ink); color:#fff; border-color:var(--tch-ink); }
.tch-pages .tch-pages--gap{ border:none; background:none; color:var(--tch-muted); min-width:auto; }

/* ── Forms ───────────────────────────────────────────────────────────────── */
.tch-field{ display:block; margin-bottom:var(--tch-space-4); }
.tch-field__label{
	display:block; font-size:13px; font-weight:600; color:var(--tch-ink-2);
	margin-bottom:var(--tch-space-1);
}
.tch-field__hint{ font-size:12px; color:var(--tch-muted); margin-top:var(--tch-space-1); }
.tch-field__error{ font-size:12px; color:#b3261e; margin-top:var(--tch-space-1); }
.tch-input, .tch-select, .tch-textarea{
	display:block; width:100%; box-sizing:border-box;
	font-family:var(--tch-font-body); font-size:15px; color:var(--tch-ink);
	background:var(--tch-surface); border:1px solid var(--tch-line);
	border-radius:var(--tch-radius); padding:11px 14px;
	transition:border-color .15s ease, box-shadow .15s ease;
}
.tch-input:focus, .tch-select:focus, .tch-textarea:focus{
	border-color:var(--tch-brand); outline:none;
	box-shadow:0 0 0 3px color-mix(in srgb, var(--tch-brand) 20%, transparent);
}
.tch-input[aria-invalid="true"]{ border-color:#b3261e; }
.tch-textarea{ min-height:110px; resize:vertical; }

/* ── Tables (responsive) ─────────────────────────────────────────────────── */
.tch-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--tch-line); border-radius:var(--tch-radius); }
.tch-table{ width:100%; border-collapse:collapse; font-size:14px; background:var(--tch-surface); }
.tch-table th{
	text-align:left; font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.04em;
	color:var(--tch-muted); background:var(--tch-surface-warm);
	padding:12px 16px; border-bottom:1px solid var(--tch-line);
}
.tch-table td{ padding:14px 16px; border-bottom:1px solid var(--tch-line); color:var(--tch-ink); }
.tch-table tr:last-child td{ border-bottom:none; }
.tch-table tr:hover td{ background:var(--tch-hover-bg); }

/* ── Alerts / notices ────────────────────────────────────────────────────── */
.tch-alert{
	display:flex; gap:10px; align-items:flex-start;
	border-radius:var(--tch-radius); padding:14px 16px; font-size:14px; line-height:1.5;
	border:1px solid var(--tch-line); background:var(--tch-surface-warm); color:var(--tch-ink);
}
.tch-alert--info{ border-color:#bcd7ef; background:#eef6fd; color:#0b4a75; }
.tch-alert--ok{ border-color:#bfe3c4; background:#e7f4e8; color:#1e6b2d; }
.tch-alert--warn{ border-color:#f2ddb0; background:#fdf3e0; color:#8a5a00; }
.tch-alert--err{ border-color:#f3c1be; background:#fdeaea; color:#b3261e; }

/* ── Toasts (js: tchToast(msg, kind)) ────────────────────────────────────── */
.tch-toast-stack{
	position:fixed; bottom:20px; right:20px; z-index:var(--tch-z-toast);
	display:flex; flex-direction:column; gap:10px; max-width:min(360px, calc(100vw - 40px));
}
.tch-toast{
	display:flex; align-items:flex-start; gap:10px;
	background:var(--tch-ink); color:var(--tch-on-dark);
	border-radius:var(--tch-radius); box-shadow:var(--tch-shadow-lg);
	padding:13px 16px; font-size:14px; line-height:1.45;
	animation:tchToastIn .25s ease;
}
.tch-toast--ok{ background:#1e6b2d; color:#fff; }
.tch-toast--err{ background:#8c1d17; color:#fff; }
@keyframes tchToastIn{ from{ opacity:0; transform:translateY(8px); } }

/* ── Modal (js: data-tch-modal-open="#id" / .tch-modal__close) ───────────── */
.tch-modal{ position:fixed; inset:0; z-index:var(--tch-z-modal); display:none; }
.tch-modal.tch-open{ display:block; }
.tch-modal__backdrop{ position:absolute; inset:0; background:rgba(44,33,26,.5); }
.tch-modal__panel{
	position:relative; margin:8vh auto 0; width:min(560px, calc(100vw - 32px));
	max-height:82vh; overflow:auto; background:var(--tch-surface);
	border-radius:var(--tch-radius-lg); box-shadow:var(--tch-shadow-lg);
	padding:var(--tch-space-6); animation:tchToastIn .22s ease;
}
.tch-modal__close{
	position:absolute; top:14px; right:14px; border:0; background:var(--tch-hover-bg);
	width:34px; height:34px; border-radius:50%; cursor:pointer; color:var(--tch-ink);
	font-size:15px; line-height:1;
}
.tch-modal__close:hover{ background:var(--tch-line); }

/* ── Drawer (js: data-tch-drawer-open="#id") ─────────────────────────────── */
.tch-drawer{ position:fixed; inset:0; z-index:var(--tch-z-drawer); display:none; }
.tch-drawer.tch-open{ display:block; }
.tch-drawer__backdrop{ position:absolute; inset:0; background:rgba(44,33,26,.5); }
.tch-drawer__panel{
	position:absolute; top:0; bottom:0; right:0; width:min(400px, 88vw);
	background:var(--tch-surface); box-shadow:var(--tch-shadow-lg);
	overflow:auto; padding:var(--tch-space-5);
	animation:tchDrawerIn .25s ease;
}
.tch-drawer--left .tch-drawer__panel{ right:auto; left:0; animation-name:tchDrawerInL; }
@keyframes tchDrawerIn{ from{ transform:translateX(30px); opacity:.4; } }
@keyframes tchDrawerInL{ from{ transform:translateX(-30px); opacity:.4; } }

/* ── Tabs (js: .tch-tabs [data-tch-tab="#panelId"]) ──────────────────────── */
.tch-tabs{ display:flex; gap:4px; border-bottom:1px solid var(--tch-line); margin-bottom:var(--tch-space-5); overflow-x:auto; }
.tch-tabs button{
	border:0; background:none; cursor:pointer; white-space:nowrap;
	font-family:var(--tch-font-body); font-size:14px; font-weight:600; color:var(--tch-muted);
	padding:12px 16px; border-bottom:2.5px solid transparent; margin-bottom:-1px;
}
.tch-tabs button:hover{ color:var(--tch-ink); }
.tch-tabs button.tch-open{ color:var(--tch-brand-dark); border-bottom-color:var(--tch-brand); }
.tch-tabpanel{ display:none; }
.tch-tabpanel.tch-open{ display:block; }

/* ── Accordion (js: .tch-acc__head toggles) ──────────────────────────────── */
.tch-acc{ border:1px solid var(--tch-line); border-radius:var(--tch-radius-lg); overflow:hidden; background:var(--tch-surface); }
.tch-acc__item + .tch-acc__item{ border-top:1px solid var(--tch-line); }
.tch-acc__head{
	display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%;
	border:0; background:none; cursor:pointer; text-align:left;
	font-family:var(--tch-font-body); font-size:15px; font-weight:600; color:var(--tch-ink);
	padding:16px 18px;
}
.tch-acc__head::after{ content:"\2304"; font-size:16px; color:var(--tch-muted); transition:transform .2s ease; }
.tch-acc__item.tch-open .tch-acc__head::after{ transform:rotate(180deg); }
.tch-acc__body{ display:none; padding:0 18px 16px; color:var(--tch-ink-2); line-height:1.6; }
.tch-acc__item.tch-open .tch-acc__body{ display:block; }

/* ── Empty states & skeletons ────────────────────────────────────────────── */
.tch-empty{ text-align:center; padding:64px 24px; color:var(--tch-muted); }
.tch-empty__icon{ font-size:44px; margin-bottom:var(--tch-space-3); color:var(--tch-line); }
.tch-empty__title{ font-family:var(--tch-font-display); font-size:22px; color:var(--tch-ink); margin:0 0 var(--tch-space-2); }
.tch-skeleton{
	background:linear-gradient(90deg, var(--tch-hover-bg) 25%, var(--tch-line) 50%, var(--tch-hover-bg) 75%);
	background-size:200% 100%; animation:tchShimmer 1.4s ease infinite; border-radius:var(--tch-radius-sm);
}
@keyframes tchShimmer{ to{ background-position:-200% 0; } }

/* Reduced motion: the global kill-switch in headerStyle.php already neutralizes
   these animations; nothing extra needed here. */

/* Body-scroll lock while a modal/drawer is open (js toggles on <html>) */
html.tch-scroll-lock, html.tch-scroll-lock body{ overflow:hidden; }