/* =========================================================================
 * Site navigation
 * ====================================================================== */
.tt-nav {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--50);
	flex: 1 1 auto;
	justify-content: flex-end;
}

.tt-nav__list {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--50);
	list-style: none;
	margin: 0;
	padding: 0;
}
.tt-nav__item { position: static; margin: 0; }
.tt-nav__item > a,
.tt-nav__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}
.tt-nav__toggle::after {
	content: "";
	inline-size: 12px;
	block-size: 12px;
	background: currentColor;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="black" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / contain no-repeat;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="black" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / contain no-repeat;
	transition: transform .18s ease;
}
.tt-nav__toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
.tt-nav__item > a:hover,
.tt-nav__toggle:hover { color: var(--wp--preset--color--brand-blue); }

/* --- Mega panels ---------------------------------------------------------- */
.tt-mega {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 100%;
	z-index: 120;
	background: var(--wp--preset--color--surface-1);
	border-block-start: 1px solid var(--wp--preset--color--border);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .12);
}
/*
 * The panel hangs off the header, but the trigger it belongs to ends ~31px
 * higher, so a pointer travelling from the trigger into the panel crossed a band
 * that belonged to neither and the menu closed under it. This bridges the band.
 * It is a child of the same <li>, so hovering it never fires the item's
 * mouseleave, and it only exists while the panel is open - the panel carries
 * `hidden` the rest of the time.
 */
.tt-mega::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 100%;
	block-size: 40px;
}
.tt-mega__inner {
	max-inline-size: var(--wp--style--global--content-size, 1200px);
	margin-inline: auto;
	padding-block: var(--wp--preset--spacing--60);
	padding-inline: var(--wp--preset--spacing--50);
	display: grid;
	gap: var(--wp--preset--spacing--40);
}
.tt-mega__inner--tiles { display: block; }   /* two rows of tiles since 29 Sep 2026; the old 320px cap was one row */
.tt-mega__inner--apps  { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* One row of four tiles, then the remaining categories as links. */
.tt-mega__row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--40);
}
.tt-mega__tile {
	display: grid;
	grid-template-columns: 96px 1fr;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	border-radius: var(--wp--custom--radius--md);
	padding: 8px;
	transition: background .15s ease, transform .15s ease;
}
.tt-mega__tile:hover { background: var(--wp--preset--color--surface-2); transform: translateY(-2px); }
/*
 * Square (29 Sep 2026): every menu photograph is a square file, and a 110x82
 * frame gave "fit" side bands with the grey tile showing through as a box
 * against the menu. 96x96 is the same area. No background: behind a fitted
 * photograph there is only the menu. The radius sits on the image too, so a
 * photograph that fills the frame and one that does not round the same way.
 */
.tt-mega__thumb {
	display: block;
	inline-size: 96px;
	block-size: 96px;
	border-radius: var(--wp--custom--radius--sm);
	overflow: hidden;
	background: transparent;
}
.tt-mega__thumb img { inline-size: 100%; block-size: 100%; object-fit: contain; object-position: 50% 50%; border-radius: var(--wp--custom--radius--sm); display: block; }
/* an empty menu-cat slot: the frame, quietly, the same size as a photograph */
.tt-mega__thumb--empty {
	background:
		linear-gradient(135deg, transparent 47%, var(--wp--preset--color--border) 47%, var(--wp--preset--color--border) 53%, transparent 53%),
		var(--wp--preset--color--surface-2);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--border);
}
.tt-mega__label { font-weight: 700; line-height: 1.35; }
.tt-mega__count { color: var(--wp--preset--color--muted); font-size: var(--wp--preset--font-size--small); font-weight: 400; }

.tt-mega__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--50);
	margin-block-start: var(--wp--preset--spacing--40);
	padding-block-start: var(--wp--preset--spacing--40);
	border-block-start: 1px solid var(--wp--preset--color--border);
}
.tt-mega__all {
	flex: 0 0 auto;
	margin-inline-start: auto;   /* alone in the foot since the text row went (29 Sep 2026); stays right */
	color: var(--wp--preset--color--brand-blue);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.tt-mega__all:hover { text-decoration: underline; }

.tt-mega__app {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--md);
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
	transition: background .15s ease;
}
.tt-mega__app:hover { background: var(--wp--preset--color--surface-2); }
.tt-mega__icon {
	inline-size: 44px;
	block-size: 44px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--wp--preset--color--brand-blue);
	position: relative;
}
/* an application's own line icon, drawn inline: white in the navy circle, no mask */
.tt-mega__icon--svg { display: grid; place-items: center; color: #fff; }
.tt-mega__icon.tt-mega__icon--svg::after { content: none; }   /* two classes: .tt-mega__icon::after comes later with one (gotcha 19) */
.tt-mega__icon--svg .tt-ico { inline-size: 24px; block-size: 24px; }
.tt-mega__icon::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	inline-size: 24px;
	block-size: 24px;
	background: #fff;
	-webkit-mask: var(--tt-nav-icon) center / contain no-repeat;
	mask: var(--tt-nav-icon) center / contain no-repeat;
}

/* --- Search --------------------------------------------------------------- */
.tt-nav__actions { display: flex; align-items: center; gap: var(--wp--preset--spacing--30); }
.tt-nav__search-toggle {
	inline-size: 40px;
	block-size: 40px;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	position: relative;
}
.tt-nav__search-toggle::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	inline-size: 22px;
	block-size: 22px;
	background: var(--wp--preset--color--contrast);
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke="black" stroke-width="2" fill="none"/><path d="M16.5 16.5L21 21" stroke="black" stroke-width="2" stroke-linecap="round"/></svg>') center / contain no-repeat;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" stroke="black" stroke-width="2" fill="none"/><path d="M16.5 16.5L21 21" stroke="black" stroke-width="2" stroke-linecap="round"/></svg>') center / contain no-repeat;
}
.tt-nav__search-toggle:hover::after { background: var(--wp--preset--color--brand-blue); }
.tt-nav__search input[type="search"] {
	inline-size: 220px;
	min-block-size: 40px;
	padding-inline: 14px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	font: inherit;
	background: var(--wp--preset--color--surface-2);
	color: var(--wp--preset--color--contrast);
}

.tt-nav .tt-nav__line {
	/* theme.json's .wp-element-button rule loads later at equal specificity */
	background-color: var(--wp--preset--color--line-green);
	color: #fff;
	font-weight: 700;
	border-radius: var(--wp--custom--radius--sm);
	padding: 10px 20px;
	min-block-size: 43px;
	display: inline-flex;
	align-items: center;
	gap: 13px;
	text-decoration: none;
	white-space: nowrap;
}
.tt-nav .tt-nav__line::before {
	content: "";
	inline-size: 26px;
	block-size: 26px;
	background: currentColor;
	-webkit-mask: var(--tt-line-icon) center / contain no-repeat;
	mask: var(--tt-line-icon) center / contain no-repeat;
}

/* --- Burger and bottom sheet ---------------------------------------------- */
.tt-nav__burger { display: none; }

@media (max-width: 1080px) {
	.tt-nav__list,
	.tt-nav__search,
	.tt-nav__search-toggle { display: none; }
	.tt-nav { justify-content: space-between; }
	.tt-nav__burger {
		display: block;
		order: -1;
		inline-size: 44px;
		block-size: 44px;
		border: 0;
		background: transparent;
		cursor: pointer;
		position: relative;
	}
	.tt-nav__burger::after {
		content: "";
		position: absolute;
		inset: 0;
		margin: auto;
		inline-size: 24px;
		block-size: 24px;
		background: var(--wp--preset--color--contrast);
		-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 7h16M4 12h16M4 17h16" stroke="black" stroke-width="2" stroke-linecap="round"/></svg>') center / contain no-repeat;
		mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 7h16M4 12h16M4 17h16" stroke="black" stroke-width="2" stroke-linecap="round"/></svg>') center / contain no-repeat;
	}
	.tt-mega { display: none; }
}

/* display:flex would beat the UA [hidden] rule, so scope it. */
.tt-sheet[hidden] { display: none; }
.tt-sheet {
	position: fixed;
	inset: 0;
	z-index: 400;
	background: rgba(0, 0, 0, .45);
	display: flex;
	align-items: flex-end;
}
.tt-sheet__panel {
	inline-size: 100%;
	max-block-size: 86vh;
	overflow-y: auto;
	background: var(--wp--preset--color--surface-1);
	border-start-start-radius: var(--wp--custom--radius--lg);
	border-start-end-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50)
		calc(var(--wp--preset--spacing--50) + env(safe-area-inset-bottom));
	animation: tt-sheet-in .22s ease;
}
@keyframes tt-sheet-in { from { transform: translateY(14%); } to { transform: none; } }
.tt-sheet__grip {
	display: block;
	inline-size: 44px;
	block-size: 4px;
	border-radius: 999px;
	background: var(--wp--preset--color--border);
	margin: 0 auto var(--wp--preset--spacing--40);
}
.tt-sheet__group { border-block-end: 1px solid var(--wp--preset--color--border); }
.tt-sheet__group > summary {
	list-style: none;
	padding-block: var(--wp--preset--spacing--40);
	font-weight: 700;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.tt-sheet__group > summary::-webkit-details-marker { display: none; }
.tt-sheet__group > summary::after {
	content: "";
	inline-size: 18px;
	block-size: 18px;
	background: currentColor;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="black" stroke-width="2.5" fill="none" stroke-linecap="round"/></svg>') center / contain no-repeat;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 9l6 6 6-6" stroke="black" stroke-width="2.5" fill="none" stroke-linecap="round"/></svg>') center / contain no-repeat;
	transition: transform .2s ease;
}
.tt-sheet__group[open] > summary::after { transform: rotate(180deg); }
.tt-sheet ul { list-style: none; margin: 0; padding: 0 0 var(--wp--preset--spacing--40); }
.tt-sheet li a {
	display: flex;
	justify-content: space-between;
	padding-block: 10px;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.tt-sheet li a span { color: var(--wp--preset--color--muted); }

/* --- A row with a picture ------------------------------------------------
 * Thumbnail, title, optional hint, chevron. The thumbnail is a fixed 56px
 * square that never shrinks, so every row lines up whether or not its slot is
 * filled - an empty one is a neutral tile, not a borrowed photograph.
 */
.tt-sheet li a.tt-sheet__item {
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	padding-block: 8px;
}
.tt-sheet__thumb {
	flex: 0 0 56px;
	inline-size: 56px;
	block-size: 56px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--wp--preset--color--surface-2);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--border);
}
.tt-sheet__thumb img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
/* The neutral tile: a picture frame with nothing in it, which is honest about
   an empty slot and keeps the row the same height as its neighbours. */
.tt-sheet__thumb--empty {
	background:
		linear-gradient(135deg, transparent 46%, var(--wp--preset--color--border) 46%, var(--wp--preset--color--border) 54%, transparent 54%),
		var(--wp--preset--color--surface-2);
}
.tt-sheet__text {
	flex: 1 1 auto;
	min-inline-size: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.tt-sheet__title {
	color: var(--wp--preset--color--contrast) !important;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tt-sheet__row-hint {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tt-sheet__chevron {
	flex: 0 0 20px;
	inline-size: 20px;
	block-size: 20px;
	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" stroke="%2300366F" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / 12px no-repeat;
	opacity: .55;
}

/* --- Two columns in the picture lists (owner, 21 Sep 2026) ---------------
 * Measured at 390 x 844 with "สินค้า" open: nine categories as 72px rows put
 * "การใช้งาน" at 834 and "กลางแจ้ง / ในร่ม" at 889 - both off the bottom of a
 * sheet that ends at 844. The list was pushing every other section out of a
 * menu whose job is to show what the site has.
 *
 * Two across, thumbnail 40 instead of 56, no chevron (a tile that is entirely
 * a link does not need an arrow saying so, and 20px of it was a third of the
 * text width at this size). The order is untouched: a two-column grid flows in
 * source order, so the sheet still reads like the desktop menu.
 */
.tt-sheet__group--tiles ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px 10px;
}
.tt-sheet__group--tiles li a.tt-sheet__item {
	gap: 8px;
	padding-block: 4px;
	/* the tap target, stated rather than inherited from whatever is inside */
	min-block-size: 44px;
}
.tt-sheet__group--tiles .tt-sheet__thumb {
	flex: 0 0 40px;
	inline-size: 40px;
	block-size: 40px;
	border-radius: 9px;
}
.tt-sheet__group--tiles .tt-sheet__chevron { display: none; }
/*
 * Two lines, not an ellipsis. A column is 165px wide at 390 and the longest
 * category ("ฉากหลังและแบนเนอร์") does not fit on one line at any readable
 * size - truncated it becomes a different word. Note the clamp: never measure
 * this with scrollWidth, which reports the clipped box (gotcha 25).
 */
.tt-sheet__group--tiles .tt-sheet__title {
	white-space: normal;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.35;
}
.tt-sheet__group--tiles .tt-sheet__row-hint { font-size: 12px; }

/* "ดูสินค้าทั้งหมด": one plain link across both columns, with an arrow. */
.tt-sheet__group--tiles .tt-sheet__all-li { grid-column: 1 / -1; }
.tt-sheet li a.tt-sheet__all {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-block-size: 44px;
	padding-block: 8px;
	font-weight: 700;
}
.tt-sheet li a.tt-sheet__all span { color: var(--wp--preset--color--contrast); }
.tt-sheet__all-arrow {
	flex: 0 0 18px;
	inline-size: 18px;
	block-size: 18px;
	background: currentColor;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6" stroke="black" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / contain no-repeat;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 12h14M13 6l6 6-6 6" stroke="black" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / contain no-repeat;
}

.tt-sheet__flat { padding-block: var(--wp--preset--spacing--40); }
.tt-sheet__flat li a { font-weight: 700; }
.tt-sheet__cta { display: flex; gap: var(--wp--preset--spacing--30); }
.tt-sheet .tt-sheet__line {
	flex: 1 1 auto;
	background-color: var(--wp--preset--color--line-green);
	color: #fff;
	font-weight: 700;
	border-radius: var(--wp--custom--radius--sm);
	min-block-size: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 13px;
	text-decoration: none;
}
.tt-sheet .tt-sheet__line::before {
	content: "";
	inline-size: 26px;
	block-size: 26px;
	background: currentColor;
	-webkit-mask: var(--tt-line-icon) center / contain no-repeat;
	mask: var(--tt-line-icon) center / contain no-repeat;
}
.tt-sheet__phone {
	flex: 0 0 auto;
	inline-size: 48px;
	block-size: 48px;
	border-radius: var(--wp--custom--radius--sm);
	border: 1px solid var(--wp--preset--color--brand-blue);
	position: relative;
}
.tt-sheet__phone::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	inline-size: 22px;
	block-size: 22px;
	background: var(--wp--preset--color--brand-blue);
	-webkit-mask: var(--tt-phone-icon) center / contain no-repeat;
	mask: var(--tt-phone-icon) center / contain no-repeat;
}
html.tt-sheet-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.tt-sheet__panel { animation: none; }
	.tt-mega__tile, .tt-nav__toggle::after { transition: none; }
}

/* --- Mobile header: burger left, logo dead centre, no LINE ----------------
 * The LINE button used to sit in the header *and* in the sticky bar at the
 * bottom of the same screen. One of them had to go, and the sticky bar is the
 * one that follows the reader down the page.
 *
 * The logo is centred by taking it out of the flex row rather than by letting
 * `space-between` balance it: with a 44px burger on one side and nothing on the
 * other, flow centring would put the logo in the middle of the *remaining*
 * space, which is 22px off true centre and reads as a mistake.
 *
 * The row keeps its height from `min-block-size` on .tt-header > .wp-block-group,
 * so taking the brand out of flow does not collapse the bar, and the
 * shrink-on-scroll class keeps working untouched.
 */
@media (max-width: 1080px) {
	.tt-header__row { position: relative; }

	.tt-header__row > .tt-brand {
		position: absolute;
		inset-inline-start: 50%;
		transform: translateX(-50%);
		margin: 0;
		text-align: center;
		pointer-events: auto;
	}
	.tt-header__row > .tt-brand .wp-block-site-logo { margin-inline: auto; }

	/* the nav is now just the burger, pinned to the start of the bar */
	.tt-header__row > .wp-block-tightent-site-nav,
	.tt-header__row > .tt-nav {
		inline-size: 100%;
		justify-content: flex-start;
	}

	/* The sticky bar at the bottom is the mobile LINE CTA.
	   Two classes, not one: the rule that shows this button is
	   `.tt-nav .tt-nav__line`, and a single class loses to it however late it
	   appears in the file. */
	.tt-nav .tt-nav__line { display: none; }

	/* 44px is the floor for a tap target, and the burger is the only one here */
	.tt-nav__burger {
		min-inline-size: 44px;
		min-block-size: 44px;
		z-index: 1;
	}
}