/* ==========================================================================
   TEEMCW — LAYOUT
   Announcement bar, header, panels, footer, and the page shell.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Announcement bar
   -------------------------------------------------------------------------- */

.tw-ann {
	position: relative;
	z-index: var(--z-ann);
	min-height: var(--ann-h);
	background: var(--ink);
	color: #fff;
	font-size: var(--fs-xs);
	letter-spacing: .03em;
}

.tw-ann__in {
	position: relative;
	display: grid;
	place-items: center;
	min-height: var(--ann-h);
}

.tw-ann__item {
	grid-area: 1 / 1;
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin: 0;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
	pointer-events: none;
	text-align: center;
}

.tw-ann__item.is-on { opacity: 1; transform: none; }
.tw-ann__item svg { opacity: .8; }

/* Without JavaScript the rotation never starts, so show the first message. */
html.no-js .tw-ann__item:first-child { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.tw-hd {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	background: rgba(255, 255, 255, .92);
	backdrop-filter: saturate(160%) blur(14px);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color var(--dur) var(--ease),
	            box-shadow var(--dur) var(--ease),
	            transform var(--dur) var(--ease);
}

.tw-hd.is-stuck {
	border-bottom-color: var(--line);
	box-shadow: var(--shadow-sm);
}

/* Hidden while scrolling down, so the content gets the screen. */
.tw-hd.is-away { transform: translateY(-100%); }

.tw-hd__in {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--sp-4);
	min-height: var(--header-h);
}

.tw-hd__burger { display: none; }

.tw-hd__brand { justify-self: start; }

.tw-logo-link {
	display: inline-flex;
	align-items: center;
	/* The whole wordmark is the click target back to the home page, and it
	   gets the same hover treatment as the rest of the header. */
	padding: .25rem;
	margin: -.25rem;
	border-radius: var(--r-sm);
	transition: opacity var(--dur-fast) var(--ease);
}
.tw-logo-link:hover { opacity: .78; }

/* The source lockup is 183x88. Height is fixed to the header and the width
   follows, so the aspect ratio never distorts and no reflow happens while the
   image loads (the width/height attributes reserve the box). */
.tw-logo__img,
.custom-logo {
	display: block;
	width: auto;
	height: 2.25rem;
	max-height: 60%;
	object-fit: contain;
}

/* In the mobile drawer and the footer it can breathe a little more. */
.tw-mob__top .tw-logo__img,
.tw-mob__top .custom-logo { height: 2rem; }

.tw-ft__brand .tw-logo__img,
.tw-ft__brand .custom-logo { height: 2.5rem; margin-bottom: var(--sp-3); }

.tw-logo {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	color: var(--ink);
	font-family: var(--font-display);
	font-size: 1.3rem;
	font-weight: 600;
	letter-spacing: -.01em;
}

.tw-logo__mark { color: var(--rose-500); font-size: 1.1em; line-height: 1; }
.tw-logo__text { white-space: nowrap; }


/* Primary navigation */
.tw-hd__nav { justify-self: center; }

.tw-nav {
	display: flex;
	align-items: center;
	gap: var(--sp-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tw-nav li { margin: 0; position: relative; }

.tw-nav > li > a {
	display: block;
	padding: .5rem 0;
	color: var(--ink-2);
	font-size: var(--fs-base);
	font-weight: 500;
	white-space: nowrap;
}

.tw-nav > li > a::after {
	content: "";
	display: block;
	height: 1.5px;
	margin-top: 3px;
	background: var(--rose-500);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur) var(--ease);
}

.tw-nav > li > a:hover,
.tw-nav > li.current-menu-item > a { color: var(--rose-600); }

.tw-nav > li > a:hover::after,
.tw-nav > li.current-menu-item > a::after { transform: scaleX(1); }

/* Second level */
.tw-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	min-width: 13rem;
	margin: 0;
	padding: var(--sp-2);
	list-style: none;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 6px);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}

.tw-nav li:hover > .sub-menu,
.tw-nav li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.tw-nav .sub-menu a {
	display: block;
	padding: .5rem .75rem;
	border-radius: var(--r-sm);
	color: var(--ink-2);
	font-size: var(--fs-sm);
}
.tw-nav .sub-menu a:hover { background: var(--blush-2); color: var(--rose-700); }

/* Tools */
.tw-hd__tools {
	justify-self: end;
	display: flex;
	align-items: center;
	gap: var(--sp-1);
}

.tw-icon-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: var(--r-pill);
	background: transparent;
	color: var(--ink-2);
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.tw-icon-btn:hover { background: var(--blush-2); color: var(--rose-600); }

.tw-icon-btn__n,
.tw-bag__count {
	position: absolute;
	top: .25rem;
	right: .2rem;
	min-width: 1.05rem;
	height: 1.05rem;
	padding: 0 .25rem;
	border-radius: var(--r-pill);
	background: var(--rose-500);
	color: #fff;
	font-size: .625rem;
	font-weight: 700;
	line-height: 1.05rem;
	text-align: center;
}

.tw-icon-btn__n.is-empty,
.tw-bag__count.is-empty { display: none; }

/* --------------------------------------------------------------------------
   Search panel
   -------------------------------------------------------------------------- */

.tw-search {
	position: fixed;
	inset: 0 0 auto;
	z-index: var(--z-drawer);
	padding-block: var(--sp-5) var(--sp-6);
	background: var(--white);
	border-bottom: 1px solid var(--line);
	box-shadow: var(--shadow-lg);
	opacity: 0;
	transform: translateY(-12px);
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
	max-height: 100dvh;
	overflow-y: auto;
}

.tw-search.is-on { opacity: 1; transform: none; }

.tw-search__form {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding-bottom: var(--sp-4);
	border-bottom: 1px solid var(--line);
}

.tw-search__form > svg { color: var(--ink-4); flex: none; }

.tw-search__form input[type="search"] {
	flex: 1;
	padding: .5rem 0;
	border: 0;
	font-size: var(--fs-xl);
	font-family: var(--font-display);
}
.tw-search__form input[type="search"]:focus { box-shadow: none; }

.tw-search__out { padding-top: var(--sp-4); }

.tw-search__list { margin: 0; padding: 0; list-style: none; }

.tw-search__list a {
	display: grid;
	grid-template-columns: 56px 1fr auto;
	align-items: center;
	gap: var(--sp-4);
	padding: var(--sp-3);
	border-radius: var(--r-md);
	color: var(--ink);
}
.tw-search__list a:hover { background: var(--blush-1); }

.tw-search__list img {
	width: 56px; height: 56px;
	object-fit: cover;
	border-radius: var(--r-sm);
	background: var(--blush-2);
}

.tw-search__name { font-weight: 500; }
.tw-search__price { color: var(--rose-600); font-weight: 600; white-space: nowrap; }
.tw-search__hint { color: var(--ink-4); padding: var(--sp-3); margin: 0; }
.tw-search__all { margin: var(--sp-3) 0 0; padding-left: var(--sp-3); }

/* --------------------------------------------------------------------------
   Mobile menu
   -------------------------------------------------------------------------- */

.tw-mob { position: fixed; inset: 0; z-index: var(--z-drawer); }

.tw-mob__scrim {
	position: absolute;
	inset: 0;
	border: 0;
	padding: 0;
	background: rgba(35, 25, 29, .38);
	opacity: 0;
	transition: opacity var(--dur) var(--ease);
	cursor: pointer;
}
.tw-mob.is-on .tw-mob__scrim { opacity: 1; }

.tw-mob__panel {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: min(88vw, 22rem);
	height: 100%;
	padding: var(--sp-5);
	background: var(--white);
	box-shadow: var(--shadow-lg);
	transform: translateX(-100%);
	transition: transform var(--dur-slow) var(--ease-out);
	overflow-y: auto;
}
.tw-mob.is-on .tw-mob__panel { transform: none; }

.tw-mob__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: var(--sp-5);
	border-bottom: 1px solid var(--line);
}

.tw-mob__nav { flex: 1; padding-block: var(--sp-4); }

.tw-mob__list { margin: 0; padding: 0; list-style: none; }
.tw-mob__list li { margin: 0; }

.tw-mob__list a {
	display: block;
	padding: var(--sp-3) 0;
	border-bottom: 1px solid var(--line);
	color: var(--ink);
	font-size: var(--fs-lg);
	font-family: var(--font-display);
}
.tw-mob__list a:hover { color: var(--rose-600); }

.tw-mob__list .sub-menu {
	margin: 0 0 var(--sp-2) var(--sp-4);
	padding: 0;
	list-style: none;
}
.tw-mob__list .sub-menu a {
	font-family: var(--font-body);
	font-size: var(--fs-base);
	padding: var(--sp-2) 0;
	border-bottom: 0;
	color: var(--ink-3);
}

.tw-mob__foot { padding-top: var(--sp-4); border-top: 1px solid var(--line); }

.tw-mob__note {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin: var(--sp-4) 0 0;
	color: var(--ink-3);
	font-size: var(--fs-xs);
}

body.tw-locked { overflow: hidden; }

/* --------------------------------------------------------------------------
   Breadcrumbs
   -------------------------------------------------------------------------- */

.tw-crumbs {
	padding-block: var(--sp-4);
	border-bottom: 1px solid var(--line);
	font-size: var(--fs-sm);
}

.tw-crumbs__in,
.woocommerce-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2);
	color: var(--ink-4);
	margin: 0;
}

.tw-crumbs a,
.woocommerce-breadcrumb a { color: var(--ink-3); }
.tw-crumbs a:hover,
.woocommerce-breadcrumb a:hover { color: var(--rose-600); }

.tw-crumbs__sep { color: var(--line-strong); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.tw-ft { background: var(--white); border-top: 1px solid var(--line); }

.tw-ft__main { padding-block: var(--sp-9) var(--sp-8); }

.tw-ft__cols {
	display: grid;
	grid-template-columns: 1.6fr repeat(4, 1fr);
	gap: var(--sp-7) var(--sp-5);
}

.tw-ft__tag {
	margin: var(--sp-3) 0 var(--sp-4);
	color: var(--ink-3);
	font-size: var(--fs-sm);
	max-width: 22rem;
}

.tw-ft__promise { margin: 0; padding: 0; list-style: none; }

.tw-ft__promise li {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin-bottom: var(--sp-2);
	color: var(--ink-3);
	font-size: var(--fs-sm);
}
.tw-ft__promise svg { color: var(--rose-400); flex: none; }

.tw-ft__h {
	margin-bottom: var(--sp-4);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
}

.tw-ft__list { margin: 0; padding: 0; list-style: none; }
.tw-ft__list li { margin-bottom: var(--sp-2); }

.tw-ft__list a {
	color: var(--ink-3);
	font-size: var(--fs-sm);
}
.tw-ft__list a:hover { color: var(--rose-600); }

.tw-ft__hours { color: var(--ink-4); font-size: var(--fs-sm); }

.tw-ft__trust {
	padding-block: var(--sp-5);
	background: var(--blush-1);
	border-top: 1px solid var(--line);
}

.tw-ft__trust-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--sp-4);
}

.tw-ft__pay { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }

.tw-ft__pay-label {
	color: var(--ink-4);
	font-size: var(--fs-xs);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
}

.tw-ft__pay-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tw-ft__pay-list li {
	margin: 0;
	padding: .3rem .625rem;
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	color: var(--ink-3);
	font-size: var(--fs-xs);
	font-weight: 500;
}

.tw-ft__secure {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin: 0;
	color: var(--ink-3);
	font-size: var(--fs-xs);
}
.tw-ft__secure svg { color: var(--ok); flex: none; }

.tw-ft__legal { padding-block: var(--sp-4); border-top: 1px solid var(--line); }

.tw-ft__legal-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--sp-3);
	color: var(--ink-4);
	font-size: var(--fs-xs);
}

.tw-ft__legal p { margin: 0; }

/* --------------------------------------------------------------------------
   Toast
   -------------------------------------------------------------------------- */

.tw-toast {
	position: fixed;
	left: 50%;
	bottom: var(--sp-6);
	z-index: var(--z-toast);
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	padding: .75rem 1.25rem;
	border-radius: var(--r-pill);
	background: var(--ink);
	color: #fff;
	font-size: var(--fs-sm);
	font-weight: 500;
	box-shadow: var(--shadow-lg);
	opacity: 0;
	transform: translate(-50%, 12px);
	pointer-events: none;
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.tw-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.tw-toast svg { color: var(--rose-300); flex: none; }