
.sp-card .sp-card-vis,
ul.products .sp-card .sp-card-vis {
	background: #fff !important;
	background-image: none !important;
}
.sp-card .sp-card-vis::before,
.sp-card .sp-card-vis::after {
	display: none !important;
}
/* Title text inside image area no longer needs to be white (image area is now white). */
.sp-card .sp-card-name {
	color: var(--ink, #0c1a36) !important;
	text-shadow: none !important;
}
.sp-card[data-tea-type="black"] .sp-card-body{background:radial-gradient(circle at 70% 10%, rgba(255,255,255,.40), transparent 60%), linear-gradient(180deg,#ffffff 0%,#c9a888 100%);position:relative;}.sp-card[data-tea-type="black"] .teas-pip::before{background:#c9a888;}.sp-card[data-tea-type="green"] .sp-card-body{background:radial-gradient(circle at 70% 10%, rgba(255,255,255,.40), transparent 60%), linear-gradient(180deg,#ffffff 0%,#b3cba1 100%);position:relative;}.sp-card[data-tea-type="green"] .teas-pip::before{background:#b3cba1;}.sp-card[data-tea-type="white"] .sp-card-body{background:radial-gradient(circle at 70% 10%, rgba(255,255,255,.40), transparent 60%), linear-gradient(180deg,#ffffff 0%,#ece6d8 100%);position:relative;}.sp-card[data-tea-type="white"] .teas-pip::before{background:#ece6d8;}.sp-card[data-tea-type="oolong"] .sp-card-body{background:radial-gradient(circle at 70% 10%, rgba(255,255,255,.40), transparent 60%), linear-gradient(180deg,#ffffff 0%,#d4a06a 100%);position:relative;}.sp-card[data-tea-type="oolong"] .teas-pip::before{background:#d4a06a;}.sp-card[data-tea-type="herbal"] .sp-card-body{background:radial-gradient(circle at 70% 10%, rgba(255,255,255,.40), transparent 60%), linear-gradient(180deg,#ffffff 0%,#e3a8c0 100%);position:relative;}.sp-card[data-tea-type="herbal"] .teas-pip::before{background:#e3a8c0;}.sp-card[data-tea-type="fruit"] .sp-card-body{background:radial-gradient(circle at 70% 10%, rgba(255,255,255,.40), transparent 60%), linear-gradient(180deg,#ffffff 0%,#ecabb6 100%);position:relative;}.sp-card[data-tea-type="fruit"] .teas-pip::before{background:#ecabb6;}.sp-card[data-tea-type="chai"] .sp-card-body{background:radial-gradient(circle at 70% 10%, rgba(255,255,255,.40), transparent 60%), linear-gradient(180deg,#ffffff 0%,#d8b96f 100%);position:relative;}.sp-card[data-tea-type="chai"] .teas-pip::before{background:#d8b96f;}.sp-card[data-tea-type="rooibos"] .sp-card-body{background:radial-gradient(circle at 70% 10%, rgba(255,255,255,.40), transparent 60%), linear-gradient(180deg,#ffffff 0%,#d6826f 100%);position:relative;}.sp-card[data-tea-type="rooibos"] .teas-pip::before{background:#d6826f;}.sp-card[data-tea-type="matcha"] .sp-card-body{background:radial-gradient(circle at 70% 10%, rgba(255,255,255,.40), transparent 60%), linear-gradient(180deg,#ffffff 0%,#9bc278 100%);position:relative;}.sp-card[data-tea-type="matcha"] .teas-pip::before{background:#9bc278;}.sp-card[data-tea-type="coffee"] .sp-card-body{background:radial-gradient(circle at 70% 10%, rgba(255,255,255,.40), transparent 60%), linear-gradient(180deg,#ffffff 0%,#c9a896 100%);position:relative;}.sp-card[data-tea-type="coffee"] .teas-pip::before{background:#c9a896;}.sp-card[data-tea-type="biscuits"] .sp-card-body{background:radial-gradient(circle at 70% 10%, rgba(255,255,255,.40), transparent 60%), linear-gradient(180deg,#ffffff 0%,#c9a673 100%);position:relative;}.sp-card[data-tea-type="biscuits"] .teas-pip::before{background:#c9a673;}.sp-card[data-tea-type="cocoa"] .sp-card-body{background:radial-gradient(circle at 70% 10%, rgba(255,255,255,.40), transparent 60%), linear-gradient(180deg,#ffffff 0%,#a07a5e 100%);position:relative;}.sp-card[data-tea-type="cocoa"] .teas-pip::before{background:#a07a5e;}.sp-card[data-tea-type="other"] .sp-card-body{background:radial-gradient(circle at 70% 10%, rgba(255,255,255,.40), transparent 60%), linear-gradient(180deg,#ffffff 0%,#d6c8b8 100%);position:relative;}.sp-card[data-tea-type="other"] .teas-pip::before{background:#d6c8b8;}
.sp-card-body { display: flex; flex-direction: column; gap: 7px; padding: 14px 16px 16px; flex: 1; }
.teas-pip-row { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; width: 100%; min-width: 0; }
.teas-pip-row > * { flex-shrink: 0; }
.teas-pip {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 2px 8px; border-radius: 999px;
	font-family: "JetBrains Mono", monospace; font-size: 8.5px;
	letter-spacing: 0.14em; font-weight: 700; text-transform: uppercase;
	background: rgba(255,255,255,.78); color: #131c30;
	border: 1px solid rgba(0,0,0,.10);
	box-shadow: 0 1px 2px rgba(31,44,71,.08), 0 1px 0 rgba(255,255,255,.85) inset;
	white-space: nowrap;
}
.teas-pip::before {
	content: ""; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
	box-shadow: 0 1px 1px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.30);
}
/* Caffeinated vs Caffeine-free — visually differentiated.
   Caffeinated = warm amber (energy / strong-brew association)
   Caffeine-free = cool navy (rest / calm association)
   Both have a clear glass-pill background so they read on any tea-tint. */
.sp-card-caf {
	font-size: 8px !important;
	padding: 2px 7px !important;
	letter-spacing: 0.10em !important;
	white-space: nowrap !important;
}
.sp-card-caf.sp-caf-caf {
	background: rgba(184,85,30,.12) !important;
	color: #8a4318 !important;
	border-color: rgba(184,85,30,.28) !important;
}
.sp-card-caf.sp-caf-caf-free {
	background: rgba(35,55,110,.10) !important;
	color: #2c3e7a !important;
	border-color: rgba(35,55,110,.26) !important;
}
/* 2026-05-21 Lee: subscribe link removed from shop tile — dilutes the clean design.
   Subscribe & save story is fully covered on the product detail page. */
body .sp-card a.sp-card-sub,
body ul.products .sp-card a.sp-card-sub { display: none !important; }

/* Polish: price-per-cup hierarchy (drunk-grandma rule v2).
   Per-cup is THE selling point — make it MASSIVE, deep dark, instantly readable from
   across the room. Total price becomes a tiny caption. No pill chrome — the number
   itself is the visual weight. */
.sp-card .sp-card-pp {
	flex: 1 !important;
	min-width: 0 !important;
}
.sp-card .sp-card-cup {
	display: flex !important;
	align-items: baseline !important;
	gap: 4px !important;
	font-family: "DM Sans", -apple-system, sans-serif !important;
	font-size: 28px !important;
	font-weight: 600 !important;
	letter-spacing: -0.02em !important;
	color: #0c1a36 !important;
	line-height: 1 !important;
	background: none !important;
	border: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
.sp-card .sp-card-cup > span {
	font-family: "JetBrains Mono", monospace !important;
	font-size: 12px !important;
	font-weight: 800 !important;
	letter-spacing: 0.10em !important;
	color: rgba(12,26,54,.70) !important;
	text-transform: uppercase !important;
}
.sp-card .sp-card-cups {
	font-family: "JetBrains Mono", monospace !important;
	font-size: 10px !important;
	color: rgba(12,26,54,.55) !important;
	font-weight: 700 !important;
	margin-top: 4px !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
}
.sp-card .sp-card-price {
	font-family: "JetBrains Mono", monospace !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: 0.06em !important;
	color: rgba(12,26,54,.55) !important;
	text-transform: uppercase !important;
	white-space: nowrap !important;
	align-self: flex-end !important;
}
.sp-card .sp-card-price::before {
	content: "TOTAL ";
	font-size: 9px;
	letter-spacing: 0.14em;
	color: rgba(12,26,54,.40);
}
.sp-card .sp-card-price .woocommerce-Price-amount {
	font-family: "DM Sans", -apple-system, sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: -0.01em !important;
	text-transform: none !important;
	color: rgba(12,26,54,.75) !important;
}
.sp-card .sp-card-foot {
	align-items: flex-end !important;
	padding-top: 10px !important;
	border-top-color: rgba(0,0,0,.10) !important;
	gap: 10px !important;
}

/* Product detail page main image — keep drop-shadow for edge definition. */
.tpp .main-img img {
	filter: drop-shadow(0 6px 14px rgba(0,0,0,.12)) drop-shadow(0 2px 4px rgba(0,0,0,.07)) !important;
}
/* Shop card images — no drop-shadow; white-background shots look cleaner without it. */
.sp-card .sp-card-vis img,
.sp-card .sp-card-img {
	filter: none !important;
}
/* Polish: card depth + lift */
.sp-card {
	box-shadow:
		0 1px 0 rgba(255,255,255,.90) inset,
		0 -1px 0 rgba(30,42,82,.04) inset,
		0 8px 20px -10px rgba(31,44,71,.18),
		0 2px 4px -2px rgba(31,44,71,.10);
}
.sp-card:hover {
	box-shadow:
		0 1px 0 rgba(255,255,255,.90) inset,
		0 -1px 0 rgba(30,42,82,.04) inset,
		0 18px 36px -14px rgba(31,44,71,.30),
		0 3px 6px -2px rgba(31,44,71,.12);
}
/* Image highlight */
.sp-card .sp-card-vis {
	position: relative;
}
.sp-card .sp-card-vis::after {
	content: ""; display: block !important; position: absolute; inset: 0;
	background: radial-gradient(circle at 30% 18%, rgba(255,255,255,.45), transparent 55%);
	pointer-events: none;
}
.sp-fam[href*="filter_cat=black-tea"] .sp-fam-dot,a.sp-fam[href*="/black-tea/"] .sp-fam-dot{background:#c9a888 !important;}.sp-fam.on[href*="filter_cat=black-tea"],a.sp-fam.on[href*="/black-tea/"]{background:linear-gradient(180deg,#fff 0%,#c9a888 100%) !important;color:#0c1a36 !important;border-color:rgba(0,0,0,.18) !important;}.sp-fam.on[href*="filter_cat=black-tea"] .sp-fam-ct,a.sp-fam.on[href*="/black-tea/"] .sp-fam-ct{color:#0c1a36 !important;opacity:.7 !important;}.sp-fam[href*="filter_cat=green-tea"] .sp-fam-dot,a.sp-fam[href*="/green-tea/"] .sp-fam-dot{background:#b3cba1 !important;}.sp-fam.on[href*="filter_cat=green-tea"],a.sp-fam.on[href*="/green-tea/"]{background:linear-gradient(180deg,#fff 0%,#b3cba1 100%) !important;color:#0c1a36 !important;border-color:rgba(0,0,0,.18) !important;}.sp-fam.on[href*="filter_cat=green-tea"] .sp-fam-ct,a.sp-fam.on[href*="/green-tea/"] .sp-fam-ct{color:#0c1a36 !important;opacity:.7 !important;}.sp-fam[href*="filter_cat=white-tea"] .sp-fam-dot,a.sp-fam[href*="/white-tea/"] .sp-fam-dot{background:#ece6d8 !important;}.sp-fam.on[href*="filter_cat=white-tea"],a.sp-fam.on[href*="/white-tea/"]{background:linear-gradient(180deg,#fff 0%,#ece6d8 100%) !important;color:#0c1a36 !important;border-color:rgba(0,0,0,.18) !important;}.sp-fam.on[href*="filter_cat=white-tea"] .sp-fam-ct,a.sp-fam.on[href*="/white-tea/"] .sp-fam-ct{color:#0c1a36 !important;opacity:.7 !important;}.sp-fam[href*="filter_cat=fruit-herbal-tea"] .sp-fam-dot,a.sp-fam[href*="/fruit-herbal-tea/"] .sp-fam-dot{background:#e3a8c0 !important;}.sp-fam.on[href*="filter_cat=fruit-herbal-tea"],a.sp-fam.on[href*="/fruit-herbal-tea/"]{background:linear-gradient(180deg,#fff 0%,#e3a8c0 100%) !important;color:#0c1a36 !important;border-color:rgba(0,0,0,.18) !important;}.sp-fam.on[href*="filter_cat=fruit-herbal-tea"] .sp-fam-ct,a.sp-fam.on[href*="/fruit-herbal-tea/"] .sp-fam-ct{color:#0c1a36 !important;opacity:.7 !important;}.sp-fam[href*="filter_cat=rooibos-tea"] .sp-fam-dot,a.sp-fam[href*="/rooibos-tea/"] .sp-fam-dot{background:#d6826f !important;}.sp-fam.on[href*="filter_cat=rooibos-tea"],a.sp-fam.on[href*="/rooibos-tea/"]{background:linear-gradient(180deg,#fff 0%,#d6826f 100%) !important;color:#0c1a36 !important;border-color:rgba(0,0,0,.18) !important;}.sp-fam.on[href*="filter_cat=rooibos-tea"] .sp-fam-ct,a.sp-fam.on[href*="/rooibos-tea/"] .sp-fam-ct{color:#0c1a36 !important;opacity:.7 !important;}.sp-fam[href*="filter_cat=chai-tea"] .sp-fam-dot,a.sp-fam[href*="/chai-tea/"] .sp-fam-dot{background:#d8b96f !important;}.sp-fam.on[href*="filter_cat=chai-tea"],a.sp-fam.on[href*="/chai-tea/"]{background:linear-gradient(180deg,#fff 0%,#d8b96f 100%) !important;color:#0c1a36 !important;border-color:rgba(0,0,0,.18) !important;}.sp-fam.on[href*="filter_cat=chai-tea"] .sp-fam-ct,a.sp-fam.on[href*="/chai-tea/"] .sp-fam-ct{color:#0c1a36 !important;opacity:.7 !important;}.sp-fam[href*="filter_cat=matcha-tea"] .sp-fam-dot,a.sp-fam[href*="/matcha-tea/"] .sp-fam-dot{background:#9bc278 !important;}.sp-fam.on[href*="filter_cat=matcha-tea"],a.sp-fam.on[href*="/matcha-tea/"]{background:linear-gradient(180deg,#fff 0%,#9bc278 100%) !important;color:#0c1a36 !important;border-color:rgba(0,0,0,.18) !important;}.sp-fam.on[href*="filter_cat=matcha-tea"] .sp-fam-ct,a.sp-fam.on[href*="/matcha-tea/"] .sp-fam-ct{color:#0c1a36 !important;opacity:.7 !important;}.sp-fam[href*="filter_cat=coffee"] .sp-fam-dot,a.sp-fam[href*="/coffee/"] .sp-fam-dot{background:#c9a896 !important;}.sp-fam.on[href*="filter_cat=coffee"],a.sp-fam.on[href*="/coffee/"]{background:linear-gradient(180deg,#fff 0%,#c9a896 100%) !important;color:#0c1a36 !important;border-color:rgba(0,0,0,.18) !important;}.sp-fam.on[href*="filter_cat=coffee"] .sp-fam-ct,a.sp-fam.on[href*="/coffee/"] .sp-fam-ct{color:#0c1a36 !important;opacity:.7 !important;}.sp-fam[href*="filter_cat=biscuits"] .sp-fam-dot,a.sp-fam[href*="/biscuits/"] .sp-fam-dot{background:#c9a673 !important;}.sp-fam.on[href*="filter_cat=biscuits"],a.sp-fam.on[href*="/biscuits/"]{background:linear-gradient(180deg,#fff 0%,#c9a673 100%) !important;color:#0c1a36 !important;border-color:rgba(0,0,0,.18) !important;}.sp-fam.on[href*="filter_cat=biscuits"] .sp-fam-ct,a.sp-fam.on[href*="/biscuits/"] .sp-fam-ct{color:#0c1a36 !important;opacity:.7 !important;}.sp-fam[href*="filter_cat=decaffeinated-speciality-teas"] .sp-fam-dot,a.sp-fam[href*="/decaffeinated-speciality-teas/"] .sp-fam-dot{background:#d6c8b8 !important;}.sp-fam.on[href*="filter_cat=decaffeinated-speciality-teas"],a.sp-fam.on[href*="/decaffeinated-speciality-teas/"]{background:linear-gradient(180deg,#fff 0%,#d6c8b8 100%) !important;color:#0c1a36 !important;border-color:rgba(0,0,0,.18) !important;}.sp-fam.on[href*="filter_cat=decaffeinated-speciality-teas"] .sp-fam-ct,a.sp-fam.on[href*="/decaffeinated-speciality-teas/"] .sp-fam-ct{color:#0c1a36 !important;opacity:.7 !important;}
.tpp .main-img { background: #ffffff !important; background-image: none !important; border: 1px solid rgba(0,0,0,.06); }
.tpp .gallery .main-img { position: relative; }
.teas-hero-pip {
	position: absolute; top: 16px; right: 16px; z-index: 5;
	display: inline-flex; align-items: center; gap: 7px;
	padding: 6px 14px; border-radius: 999px;
	font-family: "JetBrains Mono", monospace; font-size: 10px;
	letter-spacing: 0.18em; font-weight: 700; text-transform: uppercase;
	background: rgba(255,255,255,.92); color: #131c30;
	border: 1px solid rgba(0,0,0,.10);
	box-shadow: 0 4px 12px -4px rgba(31,44,71,.18), 0 1px 0 rgba(255,255,255,.85) inset;
	backdrop-filter: blur(6px);
}
.teas-hero-pip::before {
	content: ""; width: 9px; height: 9px; border-radius: 50%;
	background: var(--teas-pip-color, #d6c8b8);
	box-shadow: 0 1px 2px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.30);
}
