/* ==========================================================================
   Thelma's Treats — main stylesheet
   Design tokens get filled in once typography/palette are chosen.
   ========================================================================== */

:root {
	--tt-header-bg-solid: #ffffff;   /* placeholder — swap for brand color */
	--tt-header-text-transparent: #ffffff;
	--tt-header-text-solid: #222222;
	--tt-header-transition: 1.35s ease;
	--tt-link-color: var(--tt-red);   /* site default when no accent is set */
	--tt-header-height: 100px; /* replace with your actual measured header height */
}
html {
  scroll-behavior: smooth;
}
html, body {
	overflow-x: clip;
}
a {
	color: white;
}
[id] {
	scroll-margin-top: var(--tt-header-height);
}
.grid-container {
	max-width: 100%;
}
.tt-sparkles {
  position: absolute;
  top: 14%;
  width: clamp(180px, 16vw, 360px);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
}
.tt-sparkles-left  { left: 0; }
.tt-sparkles-right { right: 0; }
.vignette-bg {
  background-image: radial-gradient(
	ellipse 75% 140% at 44% 38%,
	var(--vignette-highlight) 0%,
	var(--vignette-base) 100%
  );
}
.vignette-white              { --vignette-base: #e1e1e1; --vignette-highlight: #ededed; }
.vignette-smores-brown-yellow{ --vignette-base: #ba7013; --vignette-highlight: #e2a232; }
.vignette-red                { --vignette-base: #c35a5a; --vignette-highlight: #ce7877; }
.vignette-pink-purple        { --vignette-base: #cf60bc; --vignette-highlight: #f3afe5; }
.vignette-pink-purple-bright { --vignette-base: #dd97d3; --vignette-highlight: #e9bbe1; }
.vignette-pink               { --vignette-base: #d37591; --vignette-highlight: #f89cb6; }
.vignette-peach               { --vignette-base: #d25d5d; --vignette-highlight: #e59394; }
.vignette-orange              { --vignette-base: #de4b4b; --vignette-highlight: #e67137; }
.vignette-lime-green          { --vignette-base: #75af2b; --vignette-highlight: #a1ca54; }
.vignette-dark-yellow          { --vignette-base: #edca0a; --vignette-highlight: #e0c000; }
.vignette-light-yellow         { --vignette-base: #d2b100; --vignette-highlight: #e1bb02; }
.vignette-dark-red             { --vignette-base: #b42f2f; --vignette-highlight: #d24f4e; }
.vignette-dark-mint-green      { --vignette-base: #218b41; --vignette-highlight: #50b16b; }
.vignette-chocolate            { --vignette-base: #423a38; --vignette-highlight: #7a594e; }
.vignette-blue                 { --vignette-base: #2a4295; --vignette-highlight: #2b50d2; }
.vignette-baby-blue { --vignette-base: #56b3cc; --vignette-highlight: #89cee0; }
body.vignette-baby-blue .tt-footer { --vignette-base: #4997ac; --vignette-highlight: #7ac0d2; }

.vignette-footer-dark-lavender { --vignette-base: #4b3b61; --vignette-highlight: #52416c; }
.vignette-footer-dark-blue     { --vignette-base: #282656; --vignette-highlight: #2c2c60; }
.vignette-footer-brand-orange, .tt-footer  { --vignette-base: #bb3e33; --vignette-highlight: #c64336; }
body.vignette-footer-light-lavender .tt-footer { --vignette-base: #675187; --vignette-highlight: #8269ac; }
body.vignette-peach .tt-footer  { --vignette-base: #d25d5d; --vignette-highlight: #e59394; }
.page-template-page-find-thelmas .tt-story-copy a {
	color: white;
}

@media (max-width: 1700px) {
  .tt-sparkles { display: none; }
}

/* Falling cookies — products hero. JS owns position/size/opacity. */
.tt-fall-cookie {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
}
@media (max-width: 820px) {
  .tt-fall-cookie { display: none; }
}


/* Social icons in the main nav */
.main-navigation .main-nav ul li.tt-icon-ig > a,
.main-navigation .main-nav ul li.tt-icon-fb > a,
.main-navigation .main-nav ul li.tt-icon-tt > a {
	font-size: 0;
	width: 44px;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 20px 20px;
	mask-size: 20px 20px;
	padding-left: 0;
	padding-right: 0;
}
.main-navigation .main-nav ul li.tt-icon-ig > a {
	-webkit-mask-image: url(../img/instagram-white.webp);
	mask-image: url(../img/instagram-white.webp);
}
.main-navigation .main-nav ul li.tt-icon-fb > a {
	-webkit-mask-image: url(../img/facebook-white.webp);
	mask-image: url(../img/facebook-white.webp);
}
.main-navigation .main-nav ul li.tt-icon-tt > a {
	-webkit-mask-image: url(../img/tiktok-white.webp);
	mask-image: url(../img/tiktok-white.webp);
}

/* Nav hover: scale instead of color (backgrounds vary per section) */
.main-navigation .main-nav ul li a {
	transition: transform 0.2s ease;
	will-change: transform;
}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li a:focus-visible {
	transform: scale(1.12);
}

@media (prefers-reduced-motion: reduce) {
	  html {
		scroll-behavior: auto;
	  }
	.main-navigation .main-nav ul li a {
		transition: none;
	}
	.main-navigation .main-nav ul li a:hover,
	.main-navigation .main-nav ul li a:focus-visible {
		transform: none;
	}
}



.single-product #tt-product a:not(.tt-btn) {
	color: var(--tt-link-color);
	text-decoration-color: var(--tt-link-color);
}

.single-product input::placeholder {
  font-size: 1.3em;
}

/* --------------------------------------------------------------------------
   Transparent header
   body.tt-transparent-header  → header overlays the hero (set in functions.php)
   body.tt-scrolled            → past scroll threshold (set in tt-header.js)
   -------------------------------------------------------------------------- */
.home .site-content,
   .home .content-area,
   .home .site-main {
	   max-width: none;
	   padding: 0;
	   margin: 0;
   }
   
   #tt-home {
	   width: 100vw;
	   position: relative;
	   margin-left: calc(50% - 50vw);
   }
.tt-transparent-header .site-header {
	height: 100px;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: transparent;
	transition: background var(--tt-header-transition);
}

.tt-transparent-header .site-header a,
.tt-transparent-header .main-navigation a {
	color: var(--tt-header-text-transparent);
	transition: color var(--tt-header-transition);
}

/* Solid state after scrolling: header becomes fixed and opaque */
.tt-transparent-header.tt-scrolled .site-header {
	position: fixed;
}

/* Transparent state (top of page) */
body.tt-transparent-header:not(.tt-scrolled) .site-header,
body.tt-transparent-header:not(.tt-scrolled) .inside-header,
body.tt-transparent-header:not(.tt-scrolled) .main-navigation {
	background-color: transparent;
	filter: none;
	transition: filter var(--tt-header-transition);
}
body.tt-transparent-header:not(.tt-scrolled) .main-navigation .main-nav ul li a,
body.tt-transparent-header:not(.tt-scrolled) .site-header a {
	color: var(--tt-header-text-transparent);
}

/* Scrolled state */
body.tt-transparent-header.tt-scrolled .site-header,
body.tt-transparent-header.tt-scrolled .inside-header,
body.tt-transparent-header.tt-scrolled .main-navigation {
	background-color: transparent;
}
body.tt-transparent-header.tt-scrolled .main-navigation .main-nav ul li a {
	color: white;
}
.main-navigation .main-nav ul li {
	filter: none;
	transition: filter var(--tt-header-transition);
}
body.tt-transparent-header.tt-scrolled .main-navigation .main-nav ul li {
	color: white;
	filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5));
}

/* Nav typography */
.main-navigation .main-nav ul li a {
	font-family: var(--tt-font-display);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 1.35rem;
}

/* Custom hamburger icon — sized to match the logo height (44px) */
.menu-toggle .icon-menu-bars svg:first-child {
	display: none !important;
}
.menu-toggle .icon-menu-bars svg:nth-child(2) {
	display: none !important;
}
.menu-toggle .icon-menu-bars {
	width: 20px;
	height: 44px;
}
.menu-toggle .icon-menu-bars::before {
	content: "";
	display: block;
	width: 20px;
	height: 44px;
	background-image: url(../img/thelmas-hamburger-color.webp);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.toggled .menu-toggle .icon-menu-bars::before {
	display: none;
}
.menu-toggle .icon-menu-bars::after {
	content: "";
	display: none;
	width: 20px;
	height: 44px;
	background-image: url(../img/thelmas-close.webp);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.toggled .menu-toggle .icon-menu-bars::after {
	display: block;
}

.tt-transparent-header.tt-scrolled .inside-header,
.tt-transparent-header.tt-scrolled .main-navigation {
	background: var(--tt-header-bg-solid);
}

/* ---- Mobile menu overlay: solid full-height panel; the row with the
   logo + hamburger (.site-header, 100px) stays transparent at all times —
   only the dropdown panel itself gets a background, and only while open. ---- */
:root {
	--tt-mobile-menu-bg: #6ab1c5;
}
@media (max-width: 768px) {
	#site-navigation.toggled {
		position: fixed;
		top: var(--tt-header-height);
		left: 0;
		right: 0;
		bottom: 0;
		margin: 0;
		background: var(--tt-mobile-menu-bg);
		overflow-y: auto;
		z-index: 99;
	}
	.has-inline-mobile-toggle #site-navigation.toggled {
		margin-top: 0;
	}
	.inside-navigation {
		margin-left: 2.5vw;
	}
	/* Header row matches the open menu panel; transparent the rest of the time */
	.tt-transparent-header .site-header:has(#site-navigation.toggled),
	.tt-transparent-header .inside-header:has(#site-navigation.toggled) {
		background-color: var(--tt-mobile-menu-bg);
	}
}

/* --------------------------------------------------------------------------
   Hero video section (full-bleed)
   -------------------------------------------------------------------------- */

.tt-hero {
	position: relative;
	width: 100%;
	height: 100svh; /* small viewport height — stable on mobile */
	overflow: hidden;
	padding-bottom: 3%;
}
.tt-hero-copy h1 {
	font-size: clamp(2.4rem, 5vw, 3rem) !important;	
}
.tt-hero video,
.tt-hero img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   Scroll reveal base state (GSAP animates from this)
   -------------------------------------------------------------------------- */

.tt-reveal {
	opacity: 0;
}

/* No-JS / reduced-motion safety net */
@media (prefers-reduced-motion: reduce) {
	.tt-reveal {
		opacity: 1;
	}
}

/* ==========================================================================
   HOMEPAGE
   Placeholder display font: Quicksand (loaded in functions.php) until the
   real typeface is chosen with the client.
   ========================================================================== */

:root {
	--tt-red: #C13C33;          /* sampled from logo */
	--tt-berry: #8E2565;        /* marquee strip */
	--tt-cream: #FFF9F2;
	--tt-font-display: 'Quicksand', 'Avenir', sans-serif;
}

#tt-home { font-family: var(--tt-font-display); overflow-x: clip; }

.tt-section {
	position: relative;
	width: 100%;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.tt-wrap { max-width: 1400px; margin: 0 auto; padding: 10rem 2rem; position: relative; }

.tt-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
@media (max-width: 820px) { .tt-cols { grid-template-columns: 1fr; gap: 2.5rem; } }

#tt-home h1, #tt-home h2 {
	font-family: var(--tt-font-display);
	font-weight: 700;
	color: #fff;
	line-height: 1.08;
}
#tt-home h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
#tt-home h2 { font-size: clamp(2rem, 4vw, 3.2rem); margin-bottom: 1.5rem; }
#tt-home p  { color: #fff; font-size: 1.25rem; line-height: 1.65; margin-bottom: 1.25rem; }

/* Buttons */
.tt-btn {
	display: inline-block;
	padding: 0.85em 2em;
	border-radius: 999px;
	border: 2px solid currentColor;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 0.85rem;
	text-decoration: none;
	transition: background 0.25s ease, color 0.25s ease;
	margin-top: 3%;
}
.tt-btn-light { color: #fff; }
.tt-btn-light:hover { background: #fff; color: var(--tt-berry); }
.tt-btn-red { color: var(--tt-red); }
.tt-btn-red:hover { background: var(--tt-red); color: #fff; }

/* ---- Hero ---- */
.tt-hero-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}
.tt-hero img {
	position: absolute;
	inset: 0;
	width: 30%;
	height: auto;
	margin: 0 auto;
	object-fit: cover;
}
.tt-hero { height: 100svh; display: flex; flex-direction: column; justify-content: end; align-items: center; text-align: center; }
.tt-hero-media { flex: 0 1 auto; display: flex; justify-content: center; }
.tt-hero-cookie { width: min(560px, 70vw); height: auto; }
.tt-hero-media video { width: min(560px, 70vw); height: auto; }
.tt-hero-copy { position: relative; z-index: 1; padding-bottom: 20px; }
.tt-hero-copy p { font-size: 1.1rem; }
.tt-hero-copy a {
	display: inline-block;
	color: white;
	text-decoration: none;
	transition: transform 0.2s ease;
	will-change: transform;
}
.tt-hero-copy a:hover,
.tt-hero-copy a:focus-visible {
	transform: scale(1.12);
}



/* ---- Marquee ---- */
:root {
	--tt-marquee-h: 64px; /* ribbon strip height — tune once it's live */
}
.tt-marquee {
	position: relative;
	z-index: 2;
	height: var(--tt-marquee-h);
	overflow: hidden;
	filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.4));
}
.tt-marquee.ribbon {
	margin-top: calc(var(--tt-marquee-h) * -0.5);
}
.tt-marquee-track {
	display: flex;
	align-items: center;
	height: 100%;
	width: max-content;
	animation: tt-marquee-scroll 78s linear infinite;
}
.tt-marquee:hover .tt-marquee-track { animation-play-state: paused; }
.tt-marquee-group { display: flex; align-items: center; height: 100%; }
.tt-marquee-ribbon-fill {
	display: flex;
	align-items: center;
	height: 100%;
	background: url('../img/ribbon-loop.webp') repeat-x left center / auto 100%;
	padding: 0 22px;
}
.tt-marquee-group span {
	color: #fff; font-weight: 700; letter-spacing: 0.12em; font-size: 0.85rem;
	padding: 0 1.2rem; white-space: nowrap;
}
.tt-marquee-icon { height: 1.1rem; width: auto; }

.tt-marquee-ribbon-fill:first-of-type {
	clip-path: polygon(0 0, 100% 0, calc(100% - 24px) 50%, 100% 100%, 0 100%);
}
.tt-marquee-ribbon-fill:last-of-type {
	margin-left: -24px;
	clip-path: polygon(24px 0, 100% 0, 100% 100%, 24px 100%, 0 50%);
}
.tt-marquee-cut {
	display: inline-block;
	height: 100%;
	width: 16px; /* the guaranteed-transparent sliver at the seam — pair with the 24px notch depth above */
}
.tt-product {
	  margin-top: calc(var(--tt-marquee-h) * -0.5);
}
@keyframes tt-marquee-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .tt-marquee-track { animation: none; } }

/* ---- Story (pink) ---- */
.tt-story-photo img { width: min(420px, 100%); display: block; margin: 0 auto; position: relative; z-index: 4;
	width: 620px; padding: 0 5%; filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5)); }

/* ---- Product (yellow) ----
   Text set in brand red pending the client's contrast fix — white fails WCAG here. */
   .tt-product {  padding: 5% 0;}
.tt-product-copy h2, .tt-product-copy p { color: var(--tt-red); }
/* #tt-home .tt-product-copy p { color: black; } */
.tt-product-box-wrap { position: relative; display: flex; justify-content: center; 
	filter: drop-shadow(15px 15px 15px rgba(0, 0, 0, 0.2)); }
.tt-box-stack {
		position: relative;
		width: min(420px, 85%);
		z-index: 2;
		transform: rotate(4deg);
	}
	.tt-box-lid-down { display: block; width: 100%; }
	.tt-box-lid-up {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		visibility: hidden;
		opacity: 0;
	}
.tt-launch-cookie {
	position: absolute;
	z-index: 1;              /* behind the box (z-index: 2) */
	width: 150px;
	top: 12%;
	left: 58%;
	transform: translateX(-50%);
	opacity: 0;
	pointer-events: none;
}
.tt-product-plated { position: absolute; top: -60px; right: -70px; width: 320px; transform: rotate(12deg); filter: drop-shadow(15px 15px 15px rgba(0, 0, 0, 0.3)); }
.tt-product-doily { position: absolute;
	bottom: -140px;
	left: -140px;
	width: 360px;
	filter: drop-shadow(15px 15px 15px rgba(0, 0, 0, 0.1)); 
}
.tt-product-napkins { position: absolute;
	bottom: -40px;
	right: -40px;
	width: 360px;
	filter: drop-shadow(15px 15px 15px rgba(0, 0, 0, 0.3)); 
}
@media (max-width: 1300px) { 
	.tt-product-plated {
		top: -160px; 
		right: -70px; 
		width: 300px; 
	}
	.tt-product-doily { 
		bottom: -240px;
		left: -140px;
		width: 360px;
	}
	.tt-product-napkins { position: absolute;
		bottom: -140px;
		right: -40px;
		width: 360px;
	}
}
@media (max-width: 820px) { 
	.tt-product-plated {
		top: -60px; 
	}
	
	.tt-product-plated, .tt-product-napkins { width: 180px; } }

/* ---- Email (blue) ---- */
.tt-email { min-height: 90svh; display: flex; align-items: center; }
.tt-email-copy { text-align: center; max-width: 640px; z-index: 2; }
.tt-hand { position: absolute; z-index: 1; }
.tt-hand-mom {
	left: 0;
	top: 0;
	width: min(450px, 42vw);
	margin-top: -1vh;
	filter: drop-shadow(35px 35px 35px rgba(0, 0, 0, 0.1));
}
.tt-hand-kid img { display: block; width: 100%; height: auto; }
.tt-hand-kid .tt-hand-kid-upper { position: absolute; inset: 0; filter: drop-shadow(35px 35px 35px rgba(0, 0, 0, 0.1)); }
.tt-hand-kid { right: 0; top: 28%; width: min(400px, 40vw); margin-bottom: -2vh; filter: drop-shadow(35px 35px 35px rgba(0, 0, 0, 0.1)); }
.tt-email-form {
	display: flex; align-items: center; background: transparent;
	border: 2px solid #fff; border-radius: 999px; padding: 0.35rem 0.5rem 0.35rem 1.4rem;
	width: fit-content; max-width: min(380px, 100%); margin: 0 auto;
}
.tt-email-form input {
	/* grow:0 so it doesn't stretch to fill the pill; shrink:1 so a long
	   placeholder on a narrow screen degrades to scrolling text instead of
	   overflowing. JS sets the actual width to match the placeholder. */
	flex: 0 1 auto; min-width: 0; background: none; border: none; outline: none;
	color: #fff; font-size: 0.95rem;
	padding: 3% 0;
}
.tt-email-form input::placeholder { color: rgba(255,255,255,0.85); }
.tt-email-form button { background: none; border: none; cursor: pointer; padding: 0.4rem; }
.tt-email-form button img { height: 1.2rem; display: block; }
.tt-hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.tt-email-msg { margin-top: 0.5rem; font-size: 0.9rem; }
.tt-email-msg-success { color: #2e7d32; }
.tt-email-msg-info    { color: inherit; opacity: 0.8; }
.tt-email-msg-error   { color: #c62828; }
.tt-email-msg-pending { opacity: 0.6; }

/* ---- Retail (peach) ---- */
.tt-retail-cart-wrap { display: flex; justify-content: center; }
.tt-retail-cart { width: min(440px, 90%); }
.tt-cart-wrap {
	position: relative;
	width: min(1000px, 505%);
	margin-bottom: -90%;
	margin-left: 10%;
}
.tt-cart-wrap img { display: block; width: 100%; }
.tt-retail-cart { position: absolute; inset: 0; }
.tt-cart-shadow { opacity: 0.5 !important; }
.tt-retail .tt-wrap {
	padding: 7rem 8rem;	
}
.tt-product a:hover {
	color: #c52323;	
}
.tt-retail a:hover {
	color: #981313;
}

/* ---- Locator ---- */
.tt-locator-embed {
	min-height: 480px; /* match Pear's typical rendered height to kill the layout jump */
	background: #f4ede1; /* match the section bg, not white */
	display: flex;
	align-items: center;
	justify-content: center;
}
.tt-locator-embed.tt-locator-loading::before {
	content: '';
	width: 40px; height: 40px;
	border: 3px solid rgba(0,0,0,.1);
	border-top-color: #333;
	border-radius: 50%;
	animation: tt-spin .8s linear infinite;
}
@keyframes tt-spin { to { transform: rotate(360deg); } }
.tt-locator-placeholder { color: #999; font-style: italic; }
.pear-iframe-container {
	width: 100%;
}

/* ---- Social (baby blue) ---- */
.tt-social { padding-bottom: 5rem; }
.tt-social-copy {
	text-align: center;
	max-width: 760px;
	padding-bottom: 2rem;
}
.tt-social-copy a:hover {
	color: #db3736;
}
.tt-btn-white:hover {
	color: #db3736;
	background: white;
}
.tt-social-feed {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 2rem;
	min-height: 400px;   /* reserves space so the lazy-loaded feed doesn't jolt the page */
}

.eapps-instagram-feed-posts-grid-load-more-container.eapps-instagram-feed-posts-grid-load-more-enabled {
	width: 100%;
	text-align: center;
	margin-top: 4%;
}

/* the clickable button itself */
.eapps-instagram-feed-posts-grid-load-more {
	background: transparent !important;
	border: 2px solid #fff !important;
	border-radius: 999px !important;
	height: auto !important;
	min-height: 0 !important;
	padding: 0.85em 2em !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	overflow: visible !important;
	transition: background 0.25s ease !important;
	margin: 0 auto !important;
}

/* the label inside it */
.eapps-instagram-feed-posts-grid-load-more-text,
.eapps-instagram-feed-posts-grid-load-more * {
	color: #fff !important;
	font-family: 'Quicksand', sans-serif !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	font-size: 0.85rem !important;
	line-height: 1 !important;
	text-decoration: none !important;
	position: static !important;
	transition: color 0.25s ease !important;
}

.eapps-instagram-feed-posts-grid-load-more:hover {
	background: #fff !important;
}
.eapps-instagram-feed-posts-grid-load-more:hover * {
	color: #6E96A5 !important;
}

/* ---- Footer ---- */
.tt-footer {
	text-align: center;
	padding: 3.5rem 2rem 2.5rem;
	font-family: var(--tt-font-display);
	background-size: 100%;
}

.tt-footer-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 2rem;
}
.tt-footer-nav a {
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 0.9rem;
}
.tt-footer-nav a {
	transition: transform 0.2s ease;
	will-change: transform;
}
.tt-footer-nav a:hover,
.tt-footer-nav a:focus-visible {
	transform: scale(1.12);
}

@media (prefers-reduced-motion: reduce) {
	.tt-footer-nav a { transition: none; }
	.tt-footer-nav a:hover,
	.tt-footer-nav a:focus-visible { transform: none; }
}
/* Forces the social icons onto their own centered row, regardless of
   viewport width or how many text links precede them. */
.tt-footer-social-row {
	flex-basis: 100%;
	display: flex;
	justify-content: center;
	gap: 2rem;
}
.tt-footer-social img { display: block; }
.tt-footer-legal {
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.8rem;
	margin: 2.5rem 0 0;
}
.tt-footer-legal a {
	text-decoration: none;
}
.postid-124 .tt-footer.vignette-bg .tt-footer-legal a:hover,
.postid-127 .tt-footer.vignette-bg .tt-footer-legal a:hover {
	color: #c22d0e;
}
.postid-71 .tt-footer.vignette-bg .tt-footer-legal a:hover {
	color: #e64220;
}
.tt-footer.vignette-bg .tt-footer-legal a:hover {
	color: #8fdbe3;
}
body.vignette-footer-light-lavender .tt-footer .tt-footer-legal a:hover {
	color: #ffd617;
}

/* ==========================================================================
   OUR STORY PAGE — append to tt-main.css
   ========================================================================== */

/* Full-bleed breakout (same trick as home; .tt-story-page shares #tt-home id) */
.page-template-page-our-story .site-content,
.page-template-page-our-story .content-area,
.page-template-page-our-story .site-main {
	max-width: none;
	padding: 0;
	margin: 0;
}

/* ---- Flipped columns: image left, text right ---- */
.tt-cols-flip .tt-story-photo { order: -1; }
@media (max-width: 820px) {
	/* stack: image above text on mobile regardless of flip */
	.tt-cols-flip .tt-story-photo { order: -1; }
}

/* ---- Video section ---- */
.tt-story-video {
	position: relative;
	padding: 8rem 2rem 6rem;
	overflow: hidden;
	background-size: cover;
}

/* Background cookie columns */
.tt-cookie-columns {
	position: absolute;
	inset: -12% 0;                    /* extend past top/bottom so drift never shows edges */
	display: flex;
	justify-content: space-around;
	z-index: 0;
	pointer-events: none;
	opacity: 0.9;
}
.tt-cookie-col {
	width: 9%;
	min-width: 90px;
	overflow: hidden;          /* clips the looping track */
	filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.35));
}
.tt-cookie-track { will-change: transform; }
.tt-cookie-set { display: flex; flex-direction: column; }
.tt-cookie-set img {
	width: 100%;
	height: auto;
	margin-bottom: 2.5rem;     /* spacing INSIDE the set so both halves are identical */
}
.tt-col-choc { margin-top: -14%; }   /* stagger vs. snickerdoodle columns */

.eapps-instagram-feed-posts-grid-load-more {
	margin-top: 20px !important;
}
@media (max-width: 980px) {
	.tt-icon-ig,
	.tt-icon-fb,
	.tt-icon-tt {
		display: none;
	}
	.main-navigation .main-nav ul li a {
		font-size: 1.1rem;
	}
}
@media (max-width: 820px) {
	.main-navigation .main-nav ul li a:hover, .main-navigation .main-nav ul li a:focus-visible {
		transform: scale(1.02);
	}
	.tt-product .tt-wrap {
		padding: 7rem 2rem;
	} 
	.tt-story .tt-wrap {
		padding: 5rem 2rem;
	}
	.tt-product-copy h2 {
		width: 80%;
	}
	.tt-email {
		align-items: start;
		min-height: 85svh;
		max-height: 800px;
	}
	.tt-wrap.tt-email-copy {
		padding: 3rem 2rem;		
	}
	.tt-hand-kid {
		right: -6%;
		top: 50%;
		width: min(400px, 50vw);
		margin-bottom: -2vh;
		filter: drop-shadow(35px 35px 35px rgba(0, 0, 0, 0.1));
	}
	.tt-hand-mom {
		left: -10.5%;
		width: min(350px, 50vw);
		margin-top: 16vh;
		margin-bottom: -10vh;
		filter: drop-shadow(35px 35px 35px rgba(0, 0, 0, 0.1));
	}
	.tt-retail .tt-wrap {
		padding: 2rem 3rem;
	}
	.tt-cart-wrap {
		position: relative;
		width: min(700px, 505%);
		margin-bottom: -70%;
		margin-left: 5%;
	}
	.tt-social .tt-wrap {
		padding: 4rem 2rem 2rem;
	}
	.vignette-pink-purple {
		--vignette-base: #cf60bc;
		--vignette-highlight: #d477c1;
	}
	.inside-header,
	.main-navigation {
		background-color: color(display-p3 0.481 0.689 0.762);
	}
	.tt-cookie-col:nth-child(n+6) { display: none; }  /* fewer columns on mobile */
	.tt-launch-cookie {
		position: absolute;
		z-index: 1;              /* behind the box (z-index: 2) */
		width: 135px;
		top: 12%;
		left: 58%;
		transform: translateX(-50%);
	}
	.tt-product-doily { position: absolute;
		bottom: -130px;
		left: -130px;
		width: 240px;
		filter: drop-shadow(15px 15px 15px rgba(0, 0, 0, 0.1)); 
	}
	.tt-product-napkins { position: absolute;
		bottom: -60px;
		right: -60px;
		width: 230px;
		filter: drop-shadow(15px 15px 15px rgba(0, 0, 0, 0.3)); 
	}
	.main-navigation.toggled .main-nav li.tt-icon-ig {
		margin-left: 1.5%;
	}
	.main-navigation.toggled .main-nav li.tt-icon-ig,
	.main-navigation.toggled .main-nav li.tt-icon-fb,
	.main-navigation.toggled .main-nav li.tt-icon-tt {
		width: max-content;
		display: inline-block;
	}
	body.tt-transparent-header.tt-scrolled .main-navigation .main-nav ul li {
		filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.1));
	}
	.page-template-page-find-thelmas .tt-wrap {
		padding: 7.5rem 2rem;
	}
	.tt-phero {
		flex-direction: column-reverse;
	}
	.tt-phand {
		margin: 0 -10rem 0 0;
		padding-top: 5rem;
	}
	.tt-products-page .bag-hand .tt-wrap {
		padding: 2rem 2rem;
	}
	.tt-story-block .tt-cols {
		display: flex;
		flex-direction: column-reverse;
	}
	.page-template-page-find-thelmas .tt-story-block .tt-cols.tt-cols-flip {
		padding: 7rem 2rem 3rem;	
	}
	.page-template-page-find-thelmas .tt-story-block .tt-cols.tt-cols-flip .tt-story-copy {
		padding-top: 1rem;	
	}		
	.tt-story-block .tt-cols.tt-cols-flip {
		display: flex;
		flex-direction: column;
		padding: 3rem 2rem;		
	}
	.tt-story-photo img {
		padding: 0;
	}
	.tt-story-block .tt-wrap {
		padding: 6rem 2rem;		
	}
	.tt-family-thing .tt-wrap {
		padding: 3rem 2rem;		
	}
	.tt-story-arrow {
		left: 50%;
		bottom: -70px !important;
		width: clamp(90px, 12vw, 180px) !important;
	}
	#tt-home p.tt-video-caption {
		font-size: 1.1rem !important;
	}
}
@media (min-width: 821px) and (max-width:900px) {
	.tt-hand-mom {
		margin-top: 14vh;
		margin-left: -8vw;
		width: 34vw;
	}
	.tt-hand-kid {
		width: 270px;
		right: -6%;
		top: 48%;
	}
	section.tt-email {
		max-height: 600px !important;
		overflow: hidden;
	}
}
@media (min-width: 901px) and (max-width:1200px) {
	.tt-hand-mom {
		margin-top: 14vh;
		margin-left: -8vw;
		width: 32vw;
	}
	.tt-hand-kid {
		width: 270px;
		right: -6%;
		top: 48%;
	}
	section.tt-email {
		max-height: 600px !important;
		overflow: hidden;
	}
}
/* Framed video */
.tt-video-frame {
	position: relative;
	width: min(920px, 94%);
	margin: 10vw auto;
	z-index: 2;
	cursor: pointer;
	filter: drop-shadow(0 20px 20px rgba(0, 0, 0, 0.35));
}
.tt-video-frame .tt-frame-img {
	position: relative;
	display: block;
	width: 100%;
	z-index: 2;
	pointer-events: none;             /* clicks fall through to the video */
}
/* Opening measured from the frame art:
   top 17.9% / right 12.8% / bottom 18.2% / left 12.3% */
.tt-video-frame video {
	   position: absolute;
	   top: 17.8%;
	   left: 12%;
	   width: 76%;
	   height: 64.2%;
	   object-fit: cover;
	   background: #000;
	   z-index: 1;
   }
#tt-home p.tt-video-caption {
	   position: absolute;
	   left: 12.3%;                /* align to the frame opening, not the frame art */
	   width: 74.9%;
	   bottom: 24%;                /* sits in the bottom third of the opening */
	   margin: 0;
	   text-align: center;
	   color: #fff;
	   font-weight: 700;
	   font-size: clamp(1.2rem, 2.2vw, 1.9rem);
	   text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
	   z-index: 3;                 /* above preview, below nothing that matters */
	   cursor: pointer;
	   transition: opacity 0.4s ease;
	   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
   }
#tt-home p.tt-video-caption.tt-preview-hidden { opacity: 0; pointer-events: none; }


/* ---- Squiggle arrow: intro → video section ---- */
.tt-story-intro { overflow: visible; }   /* lets the arrow tip cross into the next section */
.tt-story-arrow {
	position: absolute;
	align-content: center;
	left: 40%;
	transform: translate(-50%, 0%);
	bottom: -70px;
	width: clamp(70px, 9vw, 180px);
	z-index: 3;
	pointer-events: none;
	filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.2));
}
/* ---- Intro portrait: rotating doily under static portrait ---- */
.tt-doily-stack {
	position: relative;
	width: min(620px, 100%);
	margin: 0 auto;
	/* shadow lives on the WRAPPER, not the rotating layer — see note */
	filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.2));
}
.tt-story-photo .tt-doily-stack img {
	filter: none;
}
.tt-doily {
	display: block;
	width: 100%;
	animation: tt-doily-spin 90s linear infinite;
}
.tt-story-photo .tt-doily-portrait {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 63%;                       /* portrait circle vs doily — tune to taste */
	transform: translate(-50%, -50%);
	border-radius: 50%;       
	z-index: 2;        /* crops the jpg's white corners */
}
.tt-story-photo .tt-doily-portrait.smaller {
	width: 57%;  	
}
#tt-home .blue-on-white p,
#tt-home .blue-on-white h2,
.blue-on-white {
	color: #409ac2 !important;
}
@keyframes tt-doily-spin {
	to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.tt-doily { animation: none; }
}

.tt-story-preview {
	z-index: 2;                 /* above the main video, below the frame art (frame img is z-index: 2 but later in DOM) */
	pointer-events: none;       /* clicks pass through to wrapper / native controls */
	transition: opacity 0.4s ease;
}
.grandma-stack { width: 75%; 
	filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.2)); }
.tt-story-preview.tt-preview-hidden { opacity: 0; }

/* ---- Footer cookie strip ---- */
.tt-footer { padding-bottom: 0; }        /* strip becomes the bottom edge */
.tt-footer-cookies {
	height: clamp(80px, 10vw, 140px);
	margin: 3rem -2rem 0;
	overflow: hidden;              /* clips the crop + the looping track */
	pointer-events: none;
}
.tt-footer-cookies-track {
	display: flex;
	align-items: flex-start;       /* pins cookies to the top edge, crops the bottom */
	width: max-content;
	height: 100%;
	will-change: transform;
}
.tt-footer-cookies-track img {
	height: 145%;                  /* same bottom-crop ratio as before */
	width: auto;
	max-width: none;
	flex: none;
	display: block;
}
@keyframes tt-cookies-scroll {
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.tt-footer-cookies-track { animation: none; }
}

/* ==========================================================================
   FIND THELMA'S PAGE — append to tt-main.css
   ========================================================================== */

/* Full-bleed breakout (same trick as home/our-story; shares #tt-home id) */
.page-template-page-find-thelmas .site-content,
.page-template-page-find-thelmas .content-area,
.page-template-page-find-thelmas .site-main {
	max-width: none;
	padding: 0;
	margin: 0;
}
.page-template-page-find-thelmas .tt-story-block a:hover {
	color: #fff87c;;
}

/* ---- Banner ---- */
.tt-finder-banner {
	height: 80svh;
	background-size: cover;
	background-repeat: no-repeat;
	min-height: 420px;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	text-align: right;
}

#tt-home .tt-finder-banner-copy h1 {
	font-size: clamp(2.4rem, 5vw, 3rem);
	
}
#tt-home .tt-finder-banner-copy p {
	font-size: 2rem;
}
.tt-finder-banner-copy {
	padding: 3rem 4vw !important;
	position: absolute;
}
.tt-finder-banner-copy h1,
.tt-finder-banner-copy p {
	text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.35);
}
.tt-finder-banner-copy p { margin-bottom: 0; }

@media (max-height: 900px) {
	#tt-home .tt-finder-banner-copy h1 {
		font-size: clamp(2.4rem, 2vw, 3rem) !important;
	}
	#tt-home .tt-finder-banner-copy p {
		font-size: 1.5rem !important;
	}
}
@media (max-width: 1000px) {
	#tt-home .tt-finder-banner-copy h1 {
		font-size: clamp(2.4rem, 3vw, 3rem);
	}
	#tt-home .tt-finder-banner-copy p {
		font-size: 1.5rem;
	}
	.tt-finder-banner-copy {
		font-size: 1vw;
		right: 0vw;
	}
}
@media (max-width: 1500px) {
	.tt-finder-banner {
		background-position: bottom right;
	}
	#tt-home .tt-finder-banner-copy h1 {
		font-size: clamp(2.4rem, 4vw, 3rem);
	}
	#tt-home .tt-finder-banner-copy p {
		font-size: 1.8rem;
	}
	.tt-finder-banner-copy {
		font-size: 1vw;
		right: 2vw;
	}
}
@media (min-width: 1501px) {
	.tt-finder-banner-copy {
		padding: 3rem 4vw !important;
		position: absolute;
		right: 11vw;
	}
	.tt-finder-banner {
		background-position: top left;
	}
}
@media (min-width: 1700px) {
	.tt-finder-banner-copy {
		right: 14vw;
	}
}
@media (min-width: 821px) {
	.tt-finder-banner {
		background-image:url('../img/desk-mess-banner-space-cordless.jpg');
	}
	.press-snickerdoodle,
	.press-mint-hand {
		display: none;
	}
}
@media (max-width: 820px) {
	.press-mint-hand {
		position: absolute;
		width: 80%;
		top: 100px;
		left: -10%;
		filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5)); 
	}
	.tt-finder-banner {
		background-image:url('../img/green-cellophane-bg.jpg');
		 height: 50svh; min-height: 320px; 
	 }
	#tt-home .tt-finder-banner-copy h1 {
		filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.4));
		
	}
}

/* ---- Retailer logo ticker ----
   Same duplicated-track technique as .tt-marquee, reversed direction
   (starts shifted left, animates back to 0 → visually moves left→right). */
.tt-ticker { background: var(--tt-cream); overflow: hidden; padding: 2.5rem 0; }
.tt-ticker-track {
	display: flex;
	width: max-content;
	animation: tt-ticker-scroll 62s linear infinite;
	background-size: 100%;
}
.events .tt-ticker-track {
	display: flex;
	width: max-content;
	animation: tt-ticker-scroll 92s linear infinite;
	background-size: 100%;
	animation-direction: reverse;
}
.tt-ticker:hover .tt-ticker-track { animation-play-state: paused; }
.tt-ticker-group { display: flex; align-items: center; }
.tt-ticker-logo {
	height: 2.4rem;
	display: flex;
	align-items: center;
	padding: 0 2.5rem;
	white-space: nowrap;
	transition: transform 0.25s ease;
}
.tt-ticker-logo:hover {
	transform: scale(1.08);
	position: relative;
	z-index: 2;
}
.tt-ticker-logo img { height: 100%; width: auto; display: block; }
/* Placeholder styling only — remove once real logo <img> tags replace .tt-ticker-placeholder spans */
.tt-ticker-placeholder {
	color: var(--tt-red);
	font-family: var(--tt-font-display);
	font-weight: 700;
	letter-spacing: 0.04em;
	font-size: 1.1rem;
	opacity: 0.5;
}
@keyframes tt-ticker-scroll {
	from { transform: translateX(-50%); }
	to   { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) { .tt-ticker-track { animation: none; } }

/* ---- Products page ---- */
.tt-products-page .site-content { max-width: none; padding: 0; margin: 0; }
.tt-products-page .tt-wrap { padding: 6rem 2rem; }
.tt-phero { min-height: 98svh; display: flex; align-items: center;  }
.tt-phero .tt-wrap { width: 100%; }
.tt-phero-copy { max-width: 560px; }

.tt-phand {
	position: absolute;
	top: 8%;
	right: -18.5%;     
	width: min(68vw, 1000px);
	z-index: 1;
	pointer-events: none;
	filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.1)); }
}
.bag-hand {
	height: 100vh;
}
@media (max-height: 600px) {
	.tt-hero-copy h1 {
		font-size: clamp(1.4rem, 3vw, 3rem) !important;
		padding: 0 1%;
	}
}
@media (max-height: 400px) {
	.tt-hero-copy {
		display: none;
	}
}
@media (max-height: 300px) {
	.tt-hero-bg {
		display: none;
	}
}
@media (max-width: 820px) {
	.tt-phand { position: relative; right: auto; top: auto; width: 100%; margin-top: 2rem; }
	#tt-home h1 {
		font-size: clamp(2.4rem, 5vw, 4rem);
		padding: 0 1%;
	}
}
@media (min-width: 1400px) {
	.tt-phand {
		right: -8.5%;  
	}
}
@media (min-width: 1600px) {
	.tt-phand {
		right: -5.5%; 
		width: min(68vw, 1000px); 
	}
}
@media (min-width: 1750px) {
	.tt-phand {
		width: min(68vw, 1100px); 
	}
}
@media (min-width: 1800px) {
	.tt-phand {
		right: -2.5%;  
	}
}
.tt-pformat { text-align: center; }
.tt-pformat-sub { max-width: 620px; margin: 0 auto 3rem; }

.tt-product-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2.5rem 3rem;
	max-width: 1100px;
	margin: 0 auto;
}
#tt-home .tt-pformat .tt-pformat-sub {
	margin-bottom: 4.25rem;
}
.tt-product-card {
	flex: 0 0 clamp(130px, 18vw, 220px);
	transition: transform 0.25s ease;
}
.tt-product-card img { width: 100%; height: auto; display: block;
	filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.3)); }
.tt-product-card:hover,
.tt-product-card:focus-visible { transform: scale(1.06) rotate(-1.5deg); }
@media (prefers-reduced-motion: reduce) {
	.tt-product-card { transition: none; }
	.tt-product-card:hover { transform: none; }
}

.error404 .site-content,
.error404 .content-area,
.error404 .site-main {
	max-width: none;
	padding: 0;
	margin: 0;
}

.tt-404-hero {
	min-height: 100svh;
	display: flex;
	align-items: center;
}
.tt-404-wrap {
	text-align: center;
	max-width: 640px;
	margin: 0 auto;
}

.tt-404-cookie-wrap {
	width: min(260px, 55vw);
	margin: 0 auto 3rem;
	filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.25));
}
.tt-404-cookie {
	display: block;
	width: 100%;
	animation: tt-404-wobble 3.2s ease-in-out infinite;
	transform-origin: 50% 65%;
}
@keyframes tt-404-wobble {
	0%, 100% { transform: rotate(-6deg); }
	50%      { transform: rotate(6deg); }
}

.tt-404-headline {
	font-family: var(--tt-font-display);
	font-weight: 700;
	color: #fff;
	line-height: 1;
	font-size: clamp(3rem, 9vw, 6rem);
	margin: 0 0 1rem;
}
.tt-404-sub {
	color: #fff;
	font-weight: 700;
	font-size: clamp(1.1rem, 2.4vw, 1.4rem);
	margin: 0 0 1.5rem;
}
.tt-404-body {
	color: #fff;
	font-size: 1.05rem;
	line-height: 1.65;
	margin: 0 0 2.5rem;
}

.tt-404-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
}
.tt-404-actions .tt-btn-red { color: #fff; border-color: #fff; }
.tt-404-actions .tt-btn-red:hover { background: #fff; color: var(--tt-red); }

@media (prefers-reduced-motion: reduce) {
	.tt-404-cookie { animation: none; }
}

/* ==========================================================================
   FAQ PAGE — append to tt-main.css
   ========================================================================== */

.page-template-page-faq .site-content,
.page-template-page-faq .content-area,
.page-template-page-faq .site-main {
	max-width: none;
	padding: 0;
	margin: 0;
}

.tt-faq-hero { padding: 9rem 2rem 6rem; text-align: center; }
.tt-faq-hero-wrap { max-width: 700px; margin: 0 auto; }

/* Cream, readable section — overrides the sitewide white-text default
   (#tt-home p is white for the colorful sections; this content needs
   dark text on a light background). */
.tt-faq-section {
	padding: 5rem 2rem 6rem;
}
.tt-faq-wrap { max-width: 820px; margin: 0 auto; }

#tt-home .tt-faq-section p {
	color: #3A2A20;
	font-size: 1.05rem;
}
#tt-home .tt-faq-section a {
	color: var(--tt-red);
	text-decoration: underline;
}
#tt-home .tt-faq-section .tt-btn-red {
	text-decoration: none;
}

.tt-faq-item {
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
	padding: 1.5rem 0;
}
.tt-faq-item:first-child { padding-top: 0; }

.tt-faq-q {
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1.5rem;
	font-family: var(--tt-font-display);
	font-weight: 700;
	font-size: clamp(1.05rem, 2.2vw, 1.3rem);
	color: var(--tt-red);
}
.tt-faq-q::-webkit-details-marker { display: none; }
.tt-faq-q::after {
	content: '+';
	flex-shrink: 0;
	font-size: 1.6rem;
	line-height: 1;
	transition: transform 0.25s ease;
}
.tt-faq-item[open] > .tt-faq-q::after { transform: rotate(45deg); }

.tt-faq-a { padding-top: 0.9rem; }
.tt-faq-a p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
	.tt-faq-q::after { transition: none; }
}