/* Tanakoora design system, written in the VibeFarsi token schema (https://vibefarsi.ir/docs, «سیستم‌های طراحی»).
   Owner 2026-11-05: VibeFarsi rules for the whole theme; system = «Tanakoora brand» = the store's own colours
   (white page, Tanakoora red for actions and prices, navy brand accent) in VibeFarsi's design language.
   Components read ONLY these variables: no hex, px font size, radius, shadow or duration inside components.
   Vazirmatn is self-hosted (Iran-first: no Google Fonts request), two weights to keep the font budget at 2 files. */

@font-face { font-family: "Vazirmatn"; src: url("../fonts/vazirmatn-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("../fonts/vazirmatn-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
	color-scheme: light;

	/* رنگ */
	--background: #ffffff;
	--foreground: #333333;
	--card: #ffffff;
	--card-foreground: #333333;
	--popover: #ffffff;
	--popover-foreground: #333333;
	--primary: #e4262a;            /* Tanakoora red; white text on it passes WCAG AA (4.6:1) */
	--primary-foreground: #ffffff;
	--secondary: #f4f4f4;
	--secondary-foreground: #333333;
	--muted: #f4f4f4;
	--muted-foreground: #696969;   /* meta text only; 5.4:1 on white */
	--accent: #f4f4f4;
	--accent-foreground: #333333;
	--destructive: #a3161c;
	--success: #1b7a37;
	--warning: #8a5a00;
	--border: #e8e8e8;
	--input: #d6d6d6;
	--ring: #e4262a;
	--brand: #1b2845;              /* navy of the live site */
	--brand-foreground: #ffffff;

	/* زبان طراحی: فونت، فرم، خط، عمق، حرکت و تراکم */
	--radius: 0.75rem;
	--type-body: "Vazirmatn", system-ui, sans-serif;
	--type-display: "Vazirmatn", system-ui, sans-serif;
	--type-display-weight: 700;
	--shape-control: 0.5rem;
	--shape-field: 0.5rem;
	--shape-surface: 1rem;
	--shape-overlay: 1rem;
	--line: 1px;
	--line-field: 1px;
	--line-style: solid;
	--field: var(--card);
	--depth-control: inset 0 -2px 0 0 rgb(0 0 0 / 15%);
	--depth-press: inset 0 2px 4px 0 rgb(0 0 0 / 18%);
	--depth-field: 0 0 #0000;
	--depth-surface: 0 0 20px 0 rgb(0 0 0 / 7%);
	--depth-overlay: 0 20px 48px -20px rgb(0 0 0 / 35%);
	--surface-filter: none;
	--press: scale(0.98);
	--motion: 200ms;
	--motion-ease: cubic-bezier(0.2, 0, 0, 1);
	--backdrop: none;
	--spacing: 0.25rem;

	/* Tanakoora extensions, same rules (tokens only). Six type sizes, line-height by role, 4px grid. */
	--text-xs: 0.75rem;    /* 12: meta, badges */
	--text-sm: 0.875rem;   /* 14: cards, labels, buttons */
	--text-base: 1rem;     /* 16: body */
	--text-lg: 1.125rem;   /* 18: card group titles */
	--text-xl: 1.375rem;   /* 22: section titles */
	--text-2xl: clamp(1.5rem, 1.25rem + 1vw, 2rem); /* 24–32: display (hero, page titles) */
	--leading-body: 1.8;
	--leading-reading: 1.9;
	--leading-heading: 1.4;   /* Persian titles wrap often on phones; VibeFarsi floor is 1.15 */
	--leading-control: 1.5;
	--shape-pill: 999px;      /* chips and count badges */
	--price: var(--primary);
	--rating: #f5a623;       /* review stars only */
	--touch: 44px;
	--container: 1320px;
	--layer-sticky: 50;
	--layer-tabbar: 60;
	--layer-overlay: 100;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--background);
	background-image: var(--backdrop);
	color: var(--foreground);
	font-family: var(--type-body);
	font-size: var(--text-base);
	line-height: var(--leading-body);
	letter-spacing: 0;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
	font-family: var(--type-display);
	font-weight: var(--type-display-weight);
	font-synthesis-weight: none;
	line-height: var(--leading-heading);
	letter-spacing: 0;
}
/* iOS Safari zooms into any focused field under 16px; only iOS matches this query. */
@supports (-webkit-touch-callout: none) {
	input, textarea, select { font-size: max(1rem, 1em); }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* ——— Components (tokens only) ——— */
body { font-feature-settings: "ss01"; padding-block-end: calc(64px + env(safe-area-inset-bottom)); } /* room for the phone tab bar */
@media (min-width: 900px) { body { padding-block-end: 0; } }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--primary); }
h1, h2, h3 { text-wrap: balance; margin: 0 0 .5em; color: var(--foreground); }
/* Default heading sizes on the scale (components set their own); content headings never fall back to browser em sizes. */
h1 { font-size: var(--text-2xl); } h2 { font-size: var(--text-xl); } h3 { font-size: var(--text-lg); } h4, h5, h6 { font-size: var(--text-base); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
[dir="ltr"], bdi { unicode-bidi: isolate; }
.tk-sr, .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.tk-skip { position: absolute; inset-inline-start: 8px; inset-block-start: -60px; background: var(--primary); color: var(--primary-foreground); padding: 8px 16px; border-radius: var(--shape-control); z-index: 100; }
.tk-skip:focus { inset-block-start: 8px; }
.tk-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 16px; }
.tk-main { padding-block: 16px 40px; min-height: 50vh; }
.tk-title { font-size: var(--text-xl); font-weight: 700; margin: 0 0 4px; }
.tk-icon { flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tk-btn .tk-icon, .button .tk-icon, .tk-cartpill .tk-icon, .tk-catmenu__btn .tk-icon { stroke-width: 2; } /* bold text next to it */

/* Buttons and chips */
.tk-btn, .button, button.button, .single_add_to_cart_button {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-block-size: var(--touch); padding: 0 24px; line-height: var(--leading-control);
	border: 0; border-radius: var(--shape-control); background: var(--primary); color: var(--primary-foreground); box-shadow: var(--depth-control);
	font-weight: 700; font-size: var(--text-sm); cursor: pointer; transition: transform var(--motion) var(--motion-ease), filter var(--motion) var(--motion-ease);
}
.tk-btn:hover, .button:hover, .single_add_to_cart_button:hover { filter: brightness(1.08); color: var(--primary-foreground); }
.tk-btn:active, .button:active, .single_add_to_cart_button:active { transform: var(--press); box-shadow: var(--depth-press); }
.tk-btn--ghost { background: var(--card); color: var(--foreground); box-shadow: inset 0 0 0 1px #d6d6d6; }
.tk-btn--ghost:hover { color: var(--foreground); background: var(--muted); filter: none; }
.tk-chip { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: var(--shape-control); font-size: var(--text-xs); font-weight: 700; line-height: var(--leading-reading); background: var(--muted); color: var(--foreground); }
.tk-chip--fresh { background: var(--success); color: var(--primary-foreground); }
.tk-chip--used { background: color-mix(in srgb, var(--warning) 14%, var(--card)); color: var(--warning); }
.tk-chip--new { background: var(--muted); }
.tk-chip--sold { background: color-mix(in srgb, var(--primary) 12%, var(--card)); color: var(--destructive); }
.tk-iconbtn { display: inline-grid; place-items: center; inline-size: 44px; block-size: 44px; border: 0; background: transparent; border-radius: var(--shape-surface); cursor: pointer; color: inherit; position: relative; }
.tk-iconbtn:hover { background: var(--muted); }

.tk-hp { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); } /* off-screen offsets overflow the page in RTL */


/* Header (R33: the live WoodMart header) */
.tk-header { position: relative; z-index: 40; background: var(--card); }
.tk-header__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; min-block-size: 64px; }
.tk-header__menu { justify-self: start; display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 0; min-block-size: var(--touch); min-inline-size: var(--touch); cursor: pointer; color: var(--foreground); font-size: var(--text-sm); }
.tk-logo { display: inline-flex; align-items: center; justify-self: center; }
.tk-logo__img { inline-size: auto; block-size: 48px; }
.tk-logo__text { font-weight: 700; font-size: var(--text-xl); }
.tk-search { position: relative; display: flex; align-items: stretch; }
.tk-header__bar .tk-search { grid-column: 1 / -1; grid-row: 2; margin-block-end: 8px; } /* header placement only */
.tk-search input { flex: 1; min-inline-size: 0; block-size: 44px; border: 1px solid var(--border); border-inline-end: 0; border-start-start-radius: var(--shape-control); border-end-start-radius: var(--shape-control); background: var(--muted); padding-inline: 16px; outline: 0; color: var(--foreground); }
.tk-search input::placeholder { color: var(--muted-foreground); }
.tk-search input:focus { border-color: var(--input); background: var(--card); }
.tk-search__btn { flex: none; inline-size: var(--touch); border: 0; border-start-end-radius: var(--shape-control); border-end-end-radius: var(--shape-control); background: var(--primary); color: var(--primary-foreground); display: grid; place-items: center; cursor: pointer; }
.tk-header__actions { justify-self: end; display: flex; align-items: center; gap: 12px; }
.tk-cart-count { position: absolute; inset-block-start: -2px; inset-inline-start: -4px; min-inline-size: 18px; block-size: 18px; border-radius: var(--shape-control); background: var(--card); color: var(--primary); box-shadow: var(--depth-surface); font-size: var(--text-xs); display: grid; place-items: center; padding-inline: 4px; line-height: 1; }
.tk-cartpill { position: relative; display: inline-flex; align-items: center; justify-content: center; min-inline-size: var(--touch); min-block-size: var(--touch); color: var(--foreground); }
.tk-cart-total { display: none; }
.tk-cartpill__icon { position: relative; display: grid; place-items: center; inline-size: 36px; block-size: 36px; }
.tk-cart-count { inset-inline-start: -6px; background: var(--primary); color: var(--primary-foreground); box-shadow: none; } /* towards the page, never off the screen edge */
.tk-header__bottom, .tk-header__account { display: none; }
.tk-sugg { position: absolute; inset-block-start: calc(100% + 6px); inset-inline: 0; z-index: 70; background: var(--card); border: 1px solid var(--border); border-radius: var(--shape-surface); box-shadow: var(--depth-surface); padding: 8px; max-block-size: 70vh; overflow-y: auto; }
.tk-sugg a { display: flex; gap: 8px; align-items: center; padding: 8px 8px; border-radius: var(--shape-control); color: var(--foreground); }
.tk-sugg a:hover, .tk-sugg a.is-active { background: var(--muted); color: var(--foreground); }
.tk-sugg__term small { margin-inline-start: auto; color: var(--muted-foreground); }
.tk-sugg__type { font-size: var(--text-xs); background: var(--muted); border-radius: var(--shape-pill); padding: 0 8px; color: var(--muted-foreground); }
.tk-sugg__item img { inline-size: 48px; block-size: 48px; object-fit: contain; background: var(--card); border-radius: var(--shape-control); flex: none; }
.tk-sugg__text { display: grid; min-inline-size: 0; }
.tk-sugg__title { font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-sugg__price { font-size: var(--text-xs); font-weight: 700; color: var(--price); }
.tk-sugg__item.is-sold .tk-sugg__price { color: var(--muted-foreground); }
.tk-sugg__all { justify-content: center; font-weight: 700; font-size: var(--text-sm); color: var(--primary) !important; border-block-start: 1px solid var(--border); border-radius: 0 0 var(--shape-control) var(--shape-control) !important; margin-block-start: 4px; }
.tk-sugg__empty { margin: 8px 8px; color: var(--muted-foreground); font-size: var(--text-sm); }
/* Phones: room above the logo (it touched the top edge) and the notch/status bar (viewport-fit=cover). */
@media (max-width: 899px) {
	.tk-header { box-shadow: var(--depth-surface); padding-block-start: env(safe-area-inset-top); }
	.tk-header__bar { padding-block: 12px 12px; }
}
@media (min-width: 900px) {
	.tk-header__bar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 40px; min-block-size: 112px; }
	.tk-header__menu { display: none; }
	.tk-logo { justify-self: start; }
	.tk-logo__img { block-size: 74px; }
	.tk-header__bar .tk-search { grid-column: auto; grid-row: auto; margin: 0; max-inline-size: 870px; }
	.tk-search input { block-size: 48px; }
	.tk-cartpill { min-block-size: var(--touch); background: var(--primary); color: var(--primary-foreground); border-radius: var(--shape-pill); padding-block: 4px; padding-inline: 16px 4px; gap: 8px; min-block-size: 40px; flex-direction: row-reverse; }
	.tk-cartpill:hover { color: var(--primary-foreground); filter: brightness(1.05); }
	.tk-cart-total { display: inline; font-size: var(--text-sm); font-weight: 700; white-space: nowrap; }
	.tk-cartpill__icon { border-radius: 50%; background: var(--card); color: var(--primary); }
	.tk-cartpill .tk-cart-count { inset-block-start: -6px; inset-inline-end: -6px; background: var(--card); color: var(--primary); box-shadow: var(--depth-surface); }
	.tk-header__bottom { display: block; background: var(--muted); border-block: 1px solid var(--border); box-shadow: var(--depth-surface); }
	.tk-header__row { display: flex; align-items: stretch; gap: 20px; min-block-size: 52px; }
	.tk-header__account { display: inline-grid; place-items: center; align-self: center; margin-inline-start: auto; inline-size: var(--touch); block-size: var(--touch); border-radius: var(--shape-control); background: var(--card); border: 1px solid var(--input); box-shadow: var(--depth-surface); color: var(--foreground); }
}

/* «دسته بندی محصولات»: red button with a drop-down list (desktop) */
.tk-catmenu { position: relative; inline-size: 270px; flex: none; }
.tk-catmenu__btn { display: flex; align-items: center; gap: 8px; inline-size: 100%; block-size: 100%; padding: 8px 16px; border: 0; border-radius: var(--shape-surface) var(--shape-surface) 0 0; background: var(--primary); color: var(--primary-foreground); font-size: var(--text-sm); font-weight: 700; cursor: pointer; }
.tk-catmenu__btn span { flex: 1; text-align: start; }
.tk-catmenu__panel { display: none; position: absolute; inset-block-start: 100%; inset-inline: 0; z-index: 50; background: var(--card); border: 1px solid var(--border); border-block-start: 0; box-shadow: var(--depth-surface); }
.tk-catmenu:hover .tk-catmenu__panel, .tk-catmenu:focus-within .tk-catmenu__panel, .tk-catmenu.is-open .tk-catmenu__panel { display: block; }
.tk-catmenu .tk-menu { list-style: none; margin: 0; padding: 0; }
.tk-catmenu .tk-menu > li { position: relative; border-block-end: 1px solid var(--border); }
.tk-catmenu .tk-menu > li > a { display: flex; justify-content: space-between; padding: 12px 16px; color: var(--foreground); font-size: var(--text-sm); }
.tk-catmenu .menu-item-has-children > a::after { content: "‹"; color: var(--muted-foreground); }
[dir="ltr"] .tk-catmenu .menu-item-has-children > a::after { content: "›"; }
.tk-catmenu .sub-menu { display: none; position: absolute; inset-block-start: -1px; inset-inline-start: 100%; min-inline-size: 220px; list-style: none; margin: 0; padding: 8px 0; background: var(--card); border: 1px solid var(--border); box-shadow: var(--depth-surface); }
.tk-catmenu li:hover > .sub-menu, .tk-catmenu li:focus-within > .sub-menu { display: block; }
.tk-catmenu .sub-menu a { display: block; padding: 8px 16px; color: var(--foreground); }
.tk-catmenu a:hover { color: var(--primary); }

/* Main links */
.tk-links { display: flex; align-items: center; }
.tk-links .tk-menu { display: flex; list-style: none; margin: 0; padding: 0; }
.tk-links .tk-menu > li + li { border-inline-start: 1px solid var(--border); }
.tk-links .tk-menu a { display: block; padding: 4px 16px; font-size: var(--text-base); color: var(--muted-foreground); }
.tk-links .tk-menu a:hover, .tk-links .current-menu-item > a { color: var(--foreground); }
.tk-links .sub-menu { display: none; }

/* Drawer (phones) */
.tk-nav { position: fixed; inset-block: 0; inset-inline-start: 0; inline-size: min(86vw, 340px); background: var(--card); z-index: var(--layer-overlay); overflow-y: auto;
	transform: translateX(var(--tk-drawer-off, 100%)); transition: transform var(--motion) var(--motion-ease); box-shadow: var(--depth-surface); visibility: hidden; }
[dir="ltr"] .tk-nav { --tk-drawer-off: -100%; }
.tk-nav.is-open { transform: none; visibility: visible; }
.tk-nav__head { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; background: var(--primary); color: var(--primary-foreground); }
.tk-nav__body { padding: 4px 16px 24px; }
.tk-nav__title { margin: 16px 0 4px; font-size: var(--text-xs); color: var(--muted-foreground); }
.tk-nav .tk-menu { list-style: none; margin: 0; padding: 0; }
.tk-nav .tk-menu > li { border-block-end: 1px solid var(--border); }
.tk-nav .tk-menu a { display: block; padding: 12px 4px; color: var(--foreground); }
.tk-nav .sub-menu { list-style: none; margin: 0 0 8px; padding: 0 12px; }
.tk-nav .sub-menu a { padding: 8px 4px; color: var(--muted-foreground); font-size: var(--text-sm); }
.tk-scrim { position: fixed; inset: 0; background: color-mix(in srgb, var(--foreground) 35%, transparent); z-index: calc(var(--layer-overlay) - 1); }
/* Floating chat (plugin «همقدم», z-index 9990) stays out of the way while the drawer is open. */
body.tk-drawer-open #tk-hq-root { display: none; }
@media (min-width: 900px) { .tk-nav { display: none; } }

/* Breadcrumbs */
.tk-crumbs { font-size: var(--text-sm); color: var(--muted-foreground); margin-block-end: 8px; display: flex; flex-wrap: wrap; gap: 4px; }
.tk-crumbs__sep { opacity: .6; }

/* Footer (R33: the live footer) */
.tk-services { background: var(--muted); margin-block-start: 48px; padding-block: 24px; }
.tk-services__list { list-style: none; margin: 0 auto; padding-block: 0; display: grid; gap: 16px; }
.tk-services__list li { display: flex; gap: 16px; align-items: center; justify-content: center; font-size: var(--text-xs); color: var(--muted-foreground); }
.tk-services__list strong { display: block; color: var(--foreground); font-size: var(--text-sm); font-weight: 400; }
.tk-services__list .tk-icon { color: var(--foreground); }
@media (min-width: 700px) { .tk-services__list { grid-template-columns: repeat(3, 1fr); } }
.tk-footer { background: var(--card); color: var(--muted-foreground); padding-block: 28px 16px; font-size: var(--text-sm); }
.tk-footer__grid { display: grid; gap: 28px; }
.tk-footer__grid > * { min-inline-size: 0; } /* the scrolling brand row must not widen the column past a phone screen */
.tk-footer h2 { font-size: var(--text-xl); color: var(--foreground); text-align: center; margin: 0 0 16px; }
.tk-footer h2 a { color: inherit; }
.tk-footer__about h2 { color: var(--primary); font-size: var(--text-xl); font-weight: 400; text-align: start; }
.tk-footer__about p { font-size: var(--text-sm); line-height: var(--leading-reading); color: var(--foreground); margin: 0 0 16px; }
.tk-footer__motto { text-align: center; font-weight: 700; color: var(--foreground) !important; }
.tk-footer__brands { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-block: 8px 16px; margin-block-end: 16px; }
.tk-footer__brands::-webkit-scrollbar { display: none; }
.tk-footer__brands a { flex: 0 0 calc((100% - 44px) / 3); scroll-snap-align: start; display: grid; place-items: center; min-block-size: 52px; }
.tk-footer__brands img { inline-size: 100%; block-size: 52px; object-fit: contain; }
.tk-badges { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--border); max-inline-size: 340px; margin-inline: auto; }
.tk-badges span { display: grid; justify-items: center; gap: 4px; padding: 8px 8px; font-size: var(--text-sm); color: var(--foreground); }
.tk-badges span + span { border-inline-start: 1px solid var(--border); }
.tk-badges img { inline-size: 80px; block-size: 80px; object-fit: contain; }
.tk-footer__contact { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 0; margin-block-start: 28px; padding-block: 16px; border-block-start: 1px solid var(--border); }
.tk-footer__contact p { margin: 0; padding-inline: 16px; font-size: var(--text-sm); }
.tk-footer__contact p + p { border-inline-start: 1px solid var(--border); }
.tk-footer__contact a, .tk-footer__contact strong { color: var(--primary); font-weight: 700; }
.tk-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; font-size: var(--text-sm); color: var(--muted-foreground); }
.tk-footer__legal p { margin: 0; }
.tk-footer__heart { color: var(--primary); }
@media (min-width: 900px) { .tk-footer__grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; } }
@media (max-width: 699px) { .tk-footer__contact p + p { border: 0; } .tk-footer__legal { justify-content: center; text-align: center; } }

/* Mobile tab bar (W29): the live four — shop, Alireza's shoes, cart, account */
.tk-tabbar { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 45; display: grid; grid-template-columns: repeat(4, 1fr);
	background: var(--card); box-shadow: var(--depth-surface); padding-block-end: env(safe-area-inset-bottom); }
.tk-tabbar a { position: relative; display: grid; justify-items: center; gap: 4px; padding: 8px 0 8px; font-size: var(--text-xs); color: var(--foreground); }
.tk-tabbar .tk-icon { inline-size: 22px; block-size: 22px; }
.tk-tabbar .tk-cart-count { inset-block-start: 3px; inset-inline-start: auto; inset-inline-end: calc(50% - 22px); }
@media (min-width: 900px) { .tk-tabbar { display: none; } }

/* Text pages and posts (converted from Elementor: plain HTML) */
.tk-prose { max-inline-size: 860px; }
.tk-prose img { border-radius: var(--shape-surface); margin-block: 12px; }
.tk-prose h2 { font-size: var(--text-xl); margin-block-start: 1.6em; }
.tk-prose h3 { font-size: var(--text-lg); margin-block-start: 1.3em; }
.tk-prose table { inline-size: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.tk-prose th, .tk-prose td { border: 1px solid var(--border); padding: 8px; text-align: start; }
.tk-prose details { background: var(--card); border-radius: var(--shape-surface); padding: 8px 16px; margin-block: 8px; box-shadow: var(--depth-surface); }
.tk-prose summary { font-weight: 700; cursor: pointer; }
.tk-prose blockquote { margin: 1em 0; padding: 8px 16px; border-inline-start: 4px solid var(--primary); background: var(--card); border-start-end-radius: var(--shape-surface); border-end-end-radius: var(--shape-surface); }
.tk-vendor-grid { margin-block-start: 32px; max-inline-size: none; }
.tk-prose p, .tk-prose li { line-height: var(--leading-reading); }
.tk-posts { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.tk-post-card { background: var(--card); border: 0; border-radius: var(--shape-surface); overflow: hidden; box-shadow: var(--depth-surface); }
.tk-post-card h2 { font-size: var(--text-lg); padding: 12px 16px 0; }
.tk-post-card p { padding: 0 16px 16px; color: var(--muted-foreground); font-size: var(--text-sm); }


/* Articles (R30): meta line, table of contents, more articles */
.tk-postmeta { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0 0 16px; font-size: var(--text-sm); color: var(--muted-foreground); }
.tk-postmeta > * { padding-inline: 8px; }
.tk-postmeta > :first-child { padding-inline-start: 0; }
.tk-postmeta > * + * { border-inline-start: 1px solid var(--border); }
.tk-postmeta a { color: var(--primary); }
.tk-toc { background: var(--muted); border-radius: var(--shape-control); padding: 12px 16px; margin-block: 0 24px; box-shadow: none !important; }
.tk-toc summary { font-weight: 700; color: var(--foreground); }
.tk-toc ol { margin: 8px 0 0; padding-inline-start: 20px; }
.tk-toc li { line-height: var(--leading-reading); }
.tk-toc a { color: var(--foreground); }
.tk-toc a:hover { color: var(--primary); }
.tk-prose h2[id] { scroll-margin-block-start: 16px; }
.tk-more { margin-block-start: 40px; max-inline-size: none; }
.tk-more h3 { font-size: var(--text-base); padding: 8px 16px 16px; margin: 0; }

/* Content and plugin blocks onto the scale (visual only; content and plugin untouched). Article HTML ships its own
   heading sizes, so these win with the prose scope. */
.tk-prose h2 { font-size: var(--text-xl) !important; line-height: var(--leading-heading) !important; }
.tk-prose h3 { font-size: var(--text-lg) !important; line-height: var(--leading-heading) !important; }
.tk-prose h4, .tk-prose strong[class], .tk-prose summary strong { font-size: var(--text-base) !important; }
.tk-rs-name, .tk-rs-price, .tk-rs-price .woocommerce-Price-amount, .tk-rs-price .woocommerce-Price-currencySymbol { font-size: var(--text-sm); }
summary { min-block-size: var(--touch); padding-block: 8px; cursor: pointer; }

/* ——— Shared sections (home, 404, …) ——— */
/* Section title with rules on both sides */
.tk-sec { margin-block-start: 44px; }
.tk-sec__title { display: flex; align-items: center; gap: 24px; margin: 0 0 24px; font-size: var(--text-xl); color: var(--muted-foreground); text-align: center; }
.tk-sec__title::before, .tk-sec__title::after { content: ""; flex: 1; border-block-start: 1px solid var(--border); }
.tk-sec__more { text-align: center; margin: 16px 0 0; }
.tk-sec__more a { color: var(--primary); font-weight: 700; font-size: var(--text-sm); }
/* Plugin sections (tanakoora-admin home-sections.php: size finder, collections, category chips, brands) print their own
   inline CSS; only spacing and the type scale are set here, so the plugin stays untouched. */
.tk-home__plugin > * + * { margin-block-start: 28px; }
.tk-home__plugin { margin-block-start: 36px; }
.tk-home__plugin .tk-hs-h { font-size: var(--text-xl); line-height: var(--leading-heading); }
.tk-home__plugin .tk-hs-size b { font-size: var(--text-lg); }
.tk-home__plugin .tk-hs-size small, .tk-home__plugin .tk-hs-cat small, .tk-home__plugin .tk-hs-brand span { font-size: var(--text-xs); }
.tk-home__plugin .tk-col-title { font-size: var(--text-xl); line-height: var(--leading-heading); }

/* ——— 404 ——— */
.tk-404 { display: grid; gap: 32px; }
.tk-404__hero { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 24px 16px; background: var(--card); border: var(--line) solid var(--border); border-radius: var(--shape-surface); box-shadow: var(--depth-surface); }
.tk-404__code { margin: 0; font-size: var(--text-2xl); font-weight: 700; line-height: var(--leading-heading); color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--card)); padding: 4px 16px; border-radius: var(--shape-pill); }
.tk-404__title { margin: 0; font-size: var(--text-xl); }
.tk-404__lead { margin: 0; max-inline-size: 36rem; color: var(--muted-foreground); font-size: var(--text-sm); line-height: var(--leading-body); }
.tk-404__search { inline-size: min(100%, 36rem); margin-block-start: 8px; }
.tk-404__search input { flex: 1; }
.tk-404__ways { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-block-start: 4px; }
.tk-404__way { display: inline-flex; align-items: center; min-block-size: var(--touch); padding-inline: 16px; border-radius: var(--shape-pill); border: var(--line) solid var(--border); background: var(--card); font-size: var(--text-sm); font-weight: 700; color: var(--foreground); transition: background var(--motion) var(--motion-ease), border-color var(--motion) var(--motion-ease); }
.tk-404__way:hover { border-color: var(--primary); color: var(--primary); }
.tk-404__way.is-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); }
.tk-404__way.is-primary:hover { color: var(--primary-foreground); filter: brightness(1.08); }
.tk-404 .tk-home__plugin { margin-block-start: 0; }
@media (min-width: 900px) { .tk-404__hero { padding: 40px 24px; } .tk-404__title { font-size: var(--text-2xl); } }
.tk-cart-empty { margin-block: 32px; }
.return-to-shop { text-align: center; }

/* ——— Phone drawer menu: one accordion, nothing twice ——— */
.tk-dnav__title { margin: 16px 0 4px; font-size: var(--text-xs); font-weight: 700; color: var(--muted-foreground); }
.tk-dnav, .tk-dnav ul { list-style: none; margin: 0; padding: 0; }
.tk-dnav > li { border-block-end: var(--line) solid var(--border); }
.tk-dnav__link { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-block-size: 48px; padding-inline: 4px; font-size: var(--text-base); font-weight: 700; color: var(--foreground); cursor: pointer; list-style: none; }
.tk-dnav__link::-webkit-details-marker { display: none; }
.tk-dnav__link .tk-icon { color: var(--muted-foreground); transition: transform var(--motion) var(--motion-ease); }
.tk-dnav__group[open] > summary .tk-icon { transform: rotate(180deg); }
.tk-dnav__group[open] > summary { color: var(--primary); }
.tk-dnav__group ul { padding-block-end: 8px; padding-inline-start: 12px; border-inline-start: 2px solid color-mix(in srgb, var(--primary) 25%, var(--card)); margin-inline-start: 4px; }
.tk-dnav__group ul .tk-dnav__link { min-block-size: 44px; font-size: var(--text-sm); font-weight: 400; }
.tk-dnav__group ul li:first-child .tk-dnav__link { font-weight: 700; color: var(--primary); }