/* ==========================================================================
   Thelma's Treats — single product page
   Loads after tt-main.css (is_product() only). Tokens, .tt-section, .tt-cols,
   .tt-btn and .tt-email-form all come from tt-main.css — nothing is redefined
   here, only extended.
   ========================================================================== */

/* Custom header behavior */

body.single-product.tt-transparent-header.tt-scrolled .main-navigation .main-nav ul li a {
	color: white;
}
/* Scrolled/solid header: icons are white, so darken them to match the nav text */
body.tt-transparent-header.tt-scrolled .main-navigation .main-nav ul li.tt-icon-ig > a,
body.tt-transparent-header.tt-scrolled .main-navigation .main-nav ul li.tt-icon-fb > a {
	filter: none;
	transition: filter var(--tt-header-transition), transform 0.2s ease;
}

.tt-product-hero { position: relative; overflow: hidden; }

.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; }

@media (max-width: 1700px) {
  .tt-sparkles { display: none; }
}
.main-navigation .main-nav ul li.tt-icon-ig > a,
.main-navigation .main-nav ul li.tt-icon-fb > a {
	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;
}
.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);
}

/* Full-bleed, same escape hatch as .home */
.single-product .site-content,
.single-product .content-area,
.single-product .site-main {
	max-width: none;
	padding: 0;
	margin: 0;
}

#tt-product {
	width: 100vw;
	position: relative;
	margin-left: calc(50% - 50vw);
	font-family: var(--tt-font-display);
	overflow-x: clip;
}
#tt-product .tt-btn-light {
	margin-top: 8%;
}

/* Type scale mirrors #tt-home so the two templates can't drift */
#tt-product h1,
#tt-product h2 {
	font-family: var(--tt-font-display);
	font-weight: 700;
	line-height: 1.08;
	margin-bottom: 1.5rem;
}
#tt-product h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
#tt-product h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
#tt-product p  { font-size: 1.25rem; line-height: 1.65; margin-bottom: 1.25rem; }

/* --------------------------------------------------------------------------
   Color schemes — set per product in Product data → Thelma's Page.
   Default is red: white on the yellow/gold background fails WCAG AA.
   -------------------------------------------------------------------------- */

#tt-product .tt-scheme-red h1,
#tt-product .tt-scheme-red h2,
#tt-product .tt-scheme-red p { color: var(--tt-red); }

#tt-product .tt-scheme-light h1,
#tt-product .tt-scheme-light h2,
#tt-product .tt-scheme-light p { color: #fff; }

#tt-product .tt-scheme-violet h1,
#tt-product .tt-scheme-violet h2,
#tt-product .tt-scheme-violet p { color: #79569d; }

#tt-product .tt-scheme-blue h1,
#tt-product .tt-scheme-blue h2,
#tt-product .tt-scheme-blue p { color: #3b64c2; }

#tt-product .tt-scheme-bright-red h1,
#tt-product .tt-scheme-bright-red h2,
#tt-product .tt-scheme-bright-red p { color: #e03c3f; }

/* Email field borrows the front-page pill; recolor it for red sections */
#tt-product .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 2 auto; min-width: 0; background: none; border: none; outline: none;
	color: #fff; font-size: 0.95rem;
	padding: 3% 0;
}
#tt-product .tt-scheme-red .tt-email-form { border-color: var(--tt-red); }
#tt-product .tt-scheme-red .tt-email-form input { color: var(--tt-red); }
#tt-product .tt-scheme-red .tt-email-form input::placeholder { color: rgba(193, 60, 51, 0.75); }
#tt-product .tt-scheme-red .tt-email-form button img { filter: brightness(0) saturate(100%) invert(28%) sepia(69%) saturate(1560%) hue-rotate(337deg) brightness(92%) contrast(90%); }

/* --------------------------------------------------------------------------
   Hero — box left, copy right
   -------------------------------------------------------------------------- */

.tt-product-hero {
	/* clears the transparent header overlay before .tt-cols' own padding */
	padding-top: clamp(70px, 8vh, 110px);
}

.tt-product-hero-box {
	display: flex;
	justify-content: center;
	filter: drop-shadow(15px 15px 25px rgba(0, 0, 0, 0.22));
}
.tt-product-hero-box img {
	display: block;
	width: min(460px, 90%);
	height: auto;
}

#tt-product .tt-product-sub {
	font-size: 1.35rem;
	font-weight: 700;
	margin-bottom: 2rem;
}
#tt-product .tt-product-desc p:last-of-type { margin-bottom: 0; }
.tt-corner {
	display: none;
}
@media (min-width: 1580px) {
	.tt-corner {
		position: absolute;
		z-index: 1;
		pointer-events: none;
		filter: drop-shadow(15px 15px 15px rgba(0, 0, 0, 0.3));
	}
	.tt-corner-left {
		bottom: -40px;
		left: -60px;
		width: 340px;
		transform: rotate(-8deg);
	}
	.tt-corner-right {
		bottom: -80px;
		right: -90px;
		width: 420px;
	}
}
@media (max-width: 820px) {
	.tt-corner-left { width: 200px; }
	.tt-corner-right { width: 240px; }
	.tt-product-hero {
		padding-top: clamp(0px, 8vh, 110px);
	}
	.tt-product-hero .tt-wrap {
		padding: 5rem 2rem;
	}
	.tt-promo .tt-wrap {
		padding: 6rem 2rem 4rem;		
	}
}

/* --------------------------------------------------------------------------
   Promo — copy + email left, photo right
   -------------------------------------------------------------------------- */

/* Promo copy needs more left padding than .tt-wrap's shared 2rem to line up
   with the product packaging edge in the hero above it — scoped here rather
   than touching .tt-wrap itself, which many other sections share. Desktop
   only; the mobile override just below keeps its own 2rem. */
@media (min-width: 821px) {
	.tt-promo .tt-wrap {
		padding-left: 4rem;
	}
	.tt-promo-copy {
		padding-left: 4rem;
	}
}

.tt-promo-copy .tt-email-form {
	   margin: 2rem 0 2rem;
	   max-width: 420px;
   }
   
   .tt-promo-copy .tt-email-form input {
	   padding: 0.65rem 0;
   }

#tt-product .tt-promo-note { margin-bottom: 0; }

.tt-promo-photo img {
	display: block;
	width: min(560px, 100%);
	height: auto;
	margin: 0 auto;
	filter: drop-shadow(18px 22px 30px rgba(0, 0, 0, 0.22));
}

/* --------------------------------------------------------------------------
   Locator — full width, no wrap
   -------------------------------------------------------------------------- */

#tt-product .tt-locator { scroll-margin-top: 90px; }

@media (max-width: 820px) {
	.tt-product-hero-box { order: -1; }
	.tt-promo-photo { order: -1; }
	.tt-promo-copy .tt-email-form { margin-left: 0; }
}