/*
 Theme Name: Sweet Prints Child
 Theme URI: https://sweetprintsaustralia.com
 Description: Custom child theme for Sweet Prints Australia, built on GeneratePress
 Author: Sweet Prints Australia
 Author URI: https://sweetprintsaustralia.com
 Template: generatepress
 Version: 1.7.34
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain: sweetprints
*/

/* ══════════════════════════════════════════════════════════════════════════
   1. CSS CUSTOM PROPERTIES
══════════════════════════════════════════════════════════════════════════ */

:root {
	/* ── Definitive palette (Phase 3.7 — pastel) ── */
	--sp-primary:       #A8DADC;   /* pastel teal */
	--sp-primary-dark:  #7BBFC2;   /* medium teal */
	--sp-secondary:     #F7B7C3;   /* pastel pink */
	--sp-accent:        #FF9AA2;   /* coral pink — CTA buttons */
	--sp-accent-dark:   #e0717a;   /* darker coral — hover */
	--sp-bg-main:       #FFFFFF;   /* white */
	--sp-bg-alt-1:      #EAF6FF;   /* pale blue */
	--sp-bg-alt-2:      #FADADD;   /* pale pink */
	--sp-bg-highlight:  #FFF8DC;   /* pale yellow */
	--sp-text-main:     #4A4A4A;   /* dark gray */
	--sp-text-soft:     #8E8E8E;   /* muted gray */
	--sp-white:         #FFFFFF;
	--sp-blue-soft:     #BDE0FE;
	--sp-yellow-soft:   #FFF1B6;

	/* ── Backwards-compat aliases ── */
	--sp-primary-soft:  var(--sp-primary);
	--sp-primary-light: var(--sp-bg-alt-1);
	--sp-accent-pink:   var(--sp-secondary);
	--sp-accent-aqua:   var(--sp-primary);
	--sp-bg-soft:       var(--sp-bg-alt-1);
	--sp-secondary-dk:  var(--sp-accent-dark);
	--sp-text:          var(--sp-text-main);
	--sp-text-muted:    var(--sp-text-soft);
	--sp-light-bg:      var(--sp-bg-main);
	--sp-border:        var(--sp-primary);

	/* ── Typography ── */
	--sp-font-heading: 'Poppins', sans-serif;
	--sp-font-body:    'Inter', sans-serif;

	/* ── Spacing / shape ── */
	--sp-radius:       8px;
	--sp-radius-lg:    12px;
	--sp-shadow-sm:    0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
	--sp-shadow:       0 4px 12px rgba(168,218,220,.30);
	--sp-shadow-md:    0 8px 24px rgba(168,218,220,.40);

	--sp-header-h:     72px;
	--sp-max-w:        1200px;
}

/* ══════════════════════════════════════════════════════════════════════════
   2. BASE TYPOGRAPHY
══════════════════════════════════════════════════════════════════════════ */

body {
	font-family: var(--sp-font-body);
	color: var(--sp-text);
	background-color: var(--sp-bg-main);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--sp-font-heading);
	font-weight: 700;
	color: var(--sp-text);
	line-height: 1.25;
}

h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.4rem,  3vw, 2rem);   }
h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); }
h4 { font-size: 1.15rem; }

p { line-height: 1.7; }

a {
	color: var(--sp-primary);
	text-decoration: none;
	transition: color .15s;
}
a:hover { color: var(--sp-primary-dark); }

/* ══════════════════════════════════════════════════════════════════════════
   3. LAYOUT HELPERS
══════════════════════════════════════════════════════════════════════════ */

.sp-container {
	max-width: var(--sp-max-w);
	margin-inline: auto;
	padding-inline: 1.25rem;
}

img { max-width: 100%; height: auto; }

/* GeneratePress container override */
.grid-container {
	max-width: var(--sp-max-w);
}

/* ══════════════════════════════════════════════════════════════════════════
   4. HEADER
══════════════════════════════════════════════════════════════════════════ */

.site-header {
	background: var(--sp-white);
	box-shadow: var(--sp-shadow-sm);
	position: sticky;
	top: 0;
	z-index: 999;
	transition: box-shadow .2s;
}

.site-header.sp-header--scrolled {
	box-shadow: 0 2px 16px rgba(168,218,220,.20);
}

.inside-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: var(--sp-header-h);
	padding: .75rem 1.25rem;
	gap: 1rem;
}

/* Logo */
.site-logo img,
.custom-logo {
	max-height: 52px;
	width: auto;
	display: block;
}

.site-title {
	font-family: var(--sp-font-heading);
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--sp-primary);
	letter-spacing: -.02em;
}

.site-title a { color: inherit; }
.site-title a:hover { color: var(--sp-primary-dark); }

.site-description {
	font-size: .8rem;
	color: var(--sp-text-muted);
	margin: 0;
}

/* Hide site title text — logo is sufficient; hero has brand name */
.site-title,
.main-title {
	display: none !important;
}

/* Mobile: compact header — smaller logo */
@media ( max-width: 767px ) {
	.site-logo img,
	.custom-logo {
		max-height: 36px;
	}

	.inside-header {
		min-height: auto;
		padding: 6px 12px !important;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   5. PRIMARY NAVIGATION
══════════════════════════════════════════════════════════════════════════ */

.main-navigation {
	display: flex;
	align-items: center;
}

.nav-primary .menu {
	display: flex;
	align-items: center;
	gap: .25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-primary .menu li a {
	display: block;
	padding: .45rem .85rem;
	font-family: var(--sp-font-body);
	font-size: .9rem;
	font-weight: 500;
	color: var(--sp-text);
	border-radius: var(--sp-radius);
	transition: color .15s, background .15s;
	white-space: nowrap;
}

.nav-primary .menu li a:hover,
.nav-primary .menu li.current-menu-item > a {
	color: var(--sp-accent);
	background: var(--sp-bg-alt-2);
}

/* Dropdown */
.nav-primary .menu .sub-menu {
	position: absolute;
	background: var(--sp-white);
	border: 1px solid var(--sp-border);
	border-radius: var(--sp-radius);
	box-shadow: var(--sp-shadow-md);
	min-width: 200px;
	padding: .4rem 0;
	z-index: 100;
}

.nav-primary .menu .sub-menu li a {
	padding: .45rem 1rem;
	border-radius: 0;
	font-size: .875rem;
}

/* Cart icon in nav — larger + higher contrast for visibility on mobile + desktop */
.sp-nav-cart a {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .5rem .9rem;
	min-height: 44px;            /* touch target ≥44px */
	background: var(--sp-primary);
	border-radius: 999px;
	color: var(--sp-text-main);  /* dark text on mint, AA contrast */
	font-size: .9rem;
	font-weight: 700;
	transition: background .15s, color .15s, transform .15s;
}

.sp-nav-cart a:hover {
	background: var(--sp-accent);
	color: var(--sp-white);
	transform: translateY(-1px);
}

.sp-cart-icon {
	font-size: 1.4rem;            /* was inherited .875rem — now ~22px */
	line-height: 1;
}

.sp-cart-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--sp-accent);
	color: var(--sp-white);
	font-size: .75rem;
	font-weight: 700;
	min-width: 22px;
	height: 22px;
	border-radius: 999px;
	padding: 0 .35rem;
	line-height: 1;
	border: 2px solid var(--sp-white);
	box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.sp-cart-badge--empty {
	display: none;
}

@media (max-width: 768px) {
	.sp-nav-cart a {
		padding: .55rem .75rem;
	}
	.sp-cart-icon {
		font-size: 1.5rem;
	}
}

/* Mobile toggle — GeneratePress native button */
.menu-toggle {
	background: none;
	border: 2px solid var(--sp-border);
	border-radius: var(--sp-radius);
	padding: .45rem .6rem;
	cursor: pointer;
	color: var(--sp-text);
	transition: border-color .15s, color .15s;
}

.menu-toggle:hover {
	border-color: var(--sp-primary);
	color: var(--sp-primary);
}

/* ══════════════════════════════════════════════════════════════════════════
   6. BUTTONS
══════════════════════════════════════════════════════════════════════════ */

.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.wp-block-button__link {
	font-family: var(--sp-font-body);
	font-weight: 600;
	border-radius: var(--sp-radius);
	cursor: pointer;
	transition: background .15s, transform .12s, box-shadow .15s;
}

/* Primary button */
.sp-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	background: var(--sp-accent) !important;
	color: var(--sp-white) !important;
	border: none;
	padding: .6rem 1.35rem;
	font-size: .95rem;
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	text-decoration: none;
	box-shadow: 0 2px 8px rgba(255,154,162,.30);
}

.sp-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
	background: var(--sp-accent-dark) !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(255,154,162,.40);
	color: var(--sp-white) !important;
}

/* Outline / secondary button */
.sp-btn--outline {
	background: transparent !important;
	color: var(--sp-accent) !important;
	border: 2px solid var(--sp-accent) !important;
	box-shadow: none !important;
}

.sp-btn--outline:hover {
	background: var(--sp-accent) !important;
	color: var(--sp-white) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   7. BREADCRUMBS
══════════════════════════════════════════════════════════════════════════ */

.breadcrumb-trail,
.woocommerce .woocommerce-breadcrumb {
	font-size: .825rem;
	color: var(--sp-text-muted);
	margin-bottom: 1rem;
	padding: .5rem 0;
}

.breadcrumb-trail a,
.woocommerce .woocommerce-breadcrumb a {
	color: var(--sp-text-muted);
}

.breadcrumb-trail a:hover,
.woocommerce .woocommerce-breadcrumb a:hover {
	color: var(--sp-primary);
}

.woocommerce .woocommerce-breadcrumb .breadcrumb-separator {
	margin: 0 .35rem;
	opacity: .6;
}

/* ══════════════════════════════════════════════════════════════════════════
   8. FOOTER
══════════════════════════════════════════════════════════════════════════ */

.sp-footer-widgets {
	background: #4A4A4A;
	color: rgba(255,255,255,.85);
	padding: 3rem 1.25rem;
}

.sp-footer-widgets__inner {
	max-width: var(--sp-max-w);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

/* 2×2 from 768px */
@media (min-width: 768px) {
	.sp-footer-widgets__inner {
		grid-template-columns: 1fr 1fr;
	}
}

/* 4 columns from 1024px */
@media (min-width: 1024px) {
	.sp-footer-widgets__inner {
		grid-template-columns: repeat(4, 1fr);
	}
}

.sp-footer-col__title {
	font-family: var(--sp-font-heading);
	font-size: 1rem;
	font-weight: 700;
	color: var(--sp-white);
	margin: 0 0 1rem;
	text-transform: uppercase;
	letter-spacing: .06em;
}

.sp-footer-col p,
.sp-footer-col .textwidget p {
	font-size: .875rem;
	color: rgba(255,255,255,.75);
	margin: 0 0 .5rem;
	line-height: 1.65;
}

.sp-footer-col a {
	color: rgba(255,255,255,.75);
	font-size: .875rem;
	transition: color .15s;
}

.sp-footer-col a:hover {
	color: var(--sp-secondary);
}

/* Footer quick links widget */
.sp-footer-col .widget_nav_menu ul,
.sp-footer-links {
	list-style: none;
	padding: 0;
	margin: 0;
}

.sp-footer-col .widget_nav_menu ul li,
.sp-footer-links li {
	margin-bottom: .4rem;
}

/* Social links */
/* HF6.1.2.6 — Footer social icons restyled with official brand SVG glyphs.
   Larger circles (40px), white SVG fill, brand-color background on hover
   (FB blue / IG gradient) with a subtle scale-up. */
/* HF6.1.2.2.3 — branded PNG icons replace SVG. The PNGs already include
   the brand colour fill + Sweet Prints overlay, so no background circle
   is needed on the <a> wrapper — the PNG itself is the badge. */
.sp-social-links {
	display: flex;
	gap: .75rem;
	margin-top: .5rem;
	align-items: center;
}

.sp-social-links a {
	display: inline-block;
	transition: transform .2s ease;
	text-decoration: none;
	line-height: 0;
}

.sp-social-links a img {
	display: block;
	width: 48px;
	height: 48px;
	border-radius: 12px;
	object-fit: contain;
}

.sp-social-links a:hover {
	transform: scale( 1.08 );
}

@media ( max-width: 768px ) {
	.sp-social-links {
		justify-content: center;
	}
	.sp-social-links a img {
		width: 44px;
		height: 44px;
	}
}

/* Info bar (copyright) */
.site-footer .inside-site-info,
.sp-footer-bar {
	background: #333333;
	color: rgba(255,255,255,.55);
	font-size: .8rem;
	padding: 1rem 1.25rem;
	text-align: center;
}

.site-footer .inside-site-info a,
.sp-footer-bar a {
	color: rgba(255,255,255,.65);
}

.site-footer .inside-site-info a:hover,
.sp-footer-bar a:hover {
	color: var(--sp-secondary);
}

/* GeneratePress default footer override */
.site-footer {
	background: #4A4A4A;
}

/* ══════════════════════════════════════════════════════════════════════════
   9. WOOCOMMERCE — GLOBAL
══════════════════════════════════════════════════════════════════════════ */

/* Remove WooCommerce default blue focus ring */
.woocommerce *:focus {
	outline-color: var(--sp-primary);
}

/* Sale badge */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
	background: var(--sp-secondary);
	color: var(--sp-white);
	border-radius: 999px;
	font-size: .75rem;
	font-weight: 700;
	padding: .2rem .65rem;
	min-height: auto;
	line-height: 1.6;
}

/* Price */
.woocommerce .price {
	color: var(--sp-primary);
	font-family: var(--sp-font-heading);
	font-weight: 700;
}

.woocommerce .price ins {
	text-decoration: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   10. WOOCOMMERCE — PRODUCT GRID
══════════════════════════════════════════════════════════════════════════ */

/*
 * Strongest possible selectors to override GeneratePress and WooCommerce
 * default styles. Use !important everywhere for layout-critical rules.
 */

/* ── Grid container ──────────────────────────────────────────────────────── */

.woocommerce ul.products,
.woocommerce-page ul.products,
ul.products {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 20px !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 0 2rem !important;
	float: none !important;
	clear: both !important;
}

@media (min-width: 640px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products,
	ul.products {
		grid-template-columns: repeat(3, 1fr) !important;
	}
}

@media (min-width: 1024px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products,
	ul.products {
		grid-template-columns: repeat(4, 1fr) !important;
	}
}

/* columns-N class overrides (WooCommerce adds these) */
@media (min-width: 1024px) {
	.woocommerce ul.products.columns-1 { grid-template-columns: 1fr !important; }
	.woocommerce ul.products.columns-2 { grid-template-columns: repeat(2, 1fr) !important; }
	.woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, 1fr) !important; }
	.woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, 1fr) !important; }
	.woocommerce ul.products.columns-5 { grid-template-columns: repeat(4, 1fr) !important; }
}

/* ── FIX: suppress float-era clearfix pseudo-elements that break CSS grid ── */

.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	content: none !important;
	display: none !important;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	clear: none !important;
}

/* ── Product card ────────────────────────────────────────────────────────── */

.woocommerce ul.products li.product,
ul.products li.product {
	position: relative !important;
	background: var(--sp-white) !important;
	border: 1px solid var(--sp-border) !important;
	border-radius: var(--sp-radius-lg) !important;
	overflow: hidden !important;
	transition: box-shadow .2s, transform .18s, border-color .2s !important;
	display: flex !important;
	flex-direction: column !important;
	width: auto !important;    /* override any GP width */
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	min-width: 0 !important;
}

.woocommerce ul.products li.product:hover,
ul.products li.product:hover {
	box-shadow: var(--sp-shadow-md) !important;
	transform: translateY(-3px) !important;
	border-color: var(--sp-primary-dark) !important;
}

/* ── Product image — full-width square ───────────────────────────────────── */

.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product img,
ul.products li.product a img,
ul.products li.product img {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1 !important;
	object-fit: cover !important;
	border-radius: 0 !important;
	transition: transform .3s ease !important;
}

.woocommerce ul.products li.product:hover a img,
.woocommerce ul.products li.product:hover img {
	transform: scale(1.04) !important;
}

/* Image link wrapper — clips zoom overflow */
.woocommerce ul.products li.product .woocommerce-loop-product__link {
	display: block !important;
	position: relative !important;
	overflow: hidden !important;
	line-height: 0 !important;   /* eliminate inline-block gap under image */
}

/* ── Product image slideshow (gallery auto-cycle) ──────────────────────── */

.sp-slide-img {
	position:   absolute !important;
	inset:      0 !important;
	width:      100% !important;
	height:     100% !important;
	object-fit: cover !important;
	opacity:    0;
	transition: opacity .5s ease;
	z-index:    1;
}

.sp-slide-img.sp-slide--active {
	opacity: 1;
}

/* Main thumbnail also fades for smooth transition */
.woocommerce ul.products li.product .attachment-woocommerce_thumbnail,
.woocommerce ul.products li.product > a > img:first-child {
	transition: opacity .5s ease;
}

.woocommerce ul.products li.product .attachment-woocommerce_thumbnail.sp-thumb--hidden,
.woocommerce ul.products li.product > a > img:first-child.sp-thumb--hidden {
	opacity: 0;
}

/* Dot indicators */
.sp-slide-dots {
	position: absolute;
	bottom:   6px;
	left:     50%;
	transform: translateX(-50%);
	z-index:  2;
	display:  flex;
	gap:      5px;
	pointer-events: none;
}

.sp-dot {
	width:        7px;
	height:       7px;
	border-radius: 50%;
	background:   rgba(255,255,255,.55);
	border:       1px solid rgba(0,0,0,.15);
	transition:   background .3s;
}

.sp-dot--active {
	background: var(--sp-primary-dark, #7BBFC2);
	border-color: var(--sp-primary-dark, #7BBFC2);
}

/* Quick-view overlay must sit above the hover image */
.sp-quick-view { z-index: 2; }

/* ── Quick-view hover overlay ────────────────────────────────────────────── */

.sp-quick-view {
	position: absolute;
	inset: 0;
	background: rgba(168,218,220,.65);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity .2s;
	pointer-events: none;
}

.woocommerce ul.products li.product:hover .sp-quick-view {
	opacity: 1;
	pointer-events: auto;
}

.sp-quick-view__label {
	background: var(--sp-white);
	color: var(--sp-primary);
	font-family: var(--sp-font-heading);
	font-size: .8rem;
	font-weight: 700;
	padding: .4rem .9rem;
	border-radius: 999px;
	letter-spacing: .02em;
	box-shadow: var(--sp-shadow-sm);
}

/* ── Product name ────────────────────────────────────────────────────────── */

.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2 {
	font-family: var(--sp-font-body) !important;
	font-size: .9rem !important;
	font-weight: 600 !important;
	color: var(--sp-text) !important;
	padding: .65rem .85rem .25rem !important;
	line-height: 1.4 !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
	overflow: hidden !important;
	margin: 0 !important;
}

/* ── Price ───────────────────────────────────────────────────────────────── */

.woocommerce ul.products li.product .price,
ul.products li.product .price {
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.5 !important;
	padding: .15rem .85rem .55rem !important;
	padding-bottom: 4px !important;
	margin: 0 !important;
	margin-bottom: 8px !important;
	display: block !important;
	overflow: visible !important;
	height: auto !important;
	max-height: none !important;
	clip: unset !important;
	-webkit-line-clamp: unset !important;
	white-space: normal !important;
	text-overflow: unset !important;
	color: var(--sp-primary) !important;
}

.woocommerce ul.products li.product .price .woocommerce-Price-amount,
.woocommerce ul.products li.product .price .woocommerce-Price-currencySymbol,
.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price ins {
	overflow: visible !important;
	display: inline !important;
	height: auto !important;
	line-height: 1.5 !important;
}

/* ── Add-to-cart button ──────────────────────────────────────────────────── */

.woocommerce ul.products li.product .button,
ul.products li.product .button,
.woocommerce ul.products li.product a.button {
	display: block !important;
	width: calc(100% - 1.5rem) !important;
	box-sizing: border-box !important;
	margin: auto .75rem .75rem !important;
	padding: .55rem .75rem !important;
	text-align: center !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	writing-mode: horizontal-tb !important;
	direction: ltr !important;
	font-size: .85rem !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	border-radius: var(--sp-radius) !important;
	background: var(--sp-accent) !important;
	color: var(--sp-white) !important;
	border: none !important;
	box-shadow: none !important;
	text-decoration: none !important;
	cursor: pointer !important;
}

.woocommerce ul.products li.product .button:hover,
ul.products li.product .button:hover {
	background: var(--sp-accent-dark) !important;
	transform: none !important;
	box-shadow: none !important;
	color: var(--sp-white) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   11. WOOCOMMERCE — SINGLE PRODUCT
══════════════════════════════════════════════════════════════════════════ */

.woocommerce div.product {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

@media (min-width: 768px) {
	.woocommerce div.product {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}
}

.woocommerce div.product .woocommerce-product-gallery {
	width: 100% !important;
	float: none !important;
}

.woocommerce div.product .summary {
	width: 100% !important;
	float: none !important;
}

/* Product title */
.woocommerce div.product .product_title {
	font-family: var(--sp-font-heading);
	font-size: clamp(1.4rem, 3vw, 2rem);
	margin-bottom: .5rem;
}

/* Product price */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--sp-primary);
}

/* Reviews stars */
.woocommerce .star-rating span::before,
.woocommerce p.stars a {
	color: var(--sp-secondary);
}

/* Add to cart button */
.woocommerce div.product form.cart .single_add_to_cart_button {
	background: var(--sp-accent) !important;
	color: var(--sp-white) !important;
	font-size: 1rem;
	padding: .75rem 2rem;
	border-radius: var(--sp-radius);
	font-weight: 700;
	width: auto;
}

.woocommerce div.product form.cart .single_add_to_cart_button:hover {
	background: var(--sp-accent-dark) !important;
}

/* Gallery images */
.woocommerce div.product div.images img {
	border-radius: var(--sp-radius-lg);
}

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-family: var(--sp-font-body);
	font-size: .9rem;
	font-weight: 600;
	color: var(--sp-text-muted);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--sp-primary);
}

/* ══════════════════════════════════════════════════════════════════════════
   12. WOOCOMMERCE — CART & CHECKOUT
══════════════════════════════════════════════════════════════════════════ */

/* Cart table */
.woocommerce-cart table.cart td,
.woocommerce-cart table.cart th {
	border-color: var(--sp-border);
	vertical-align: middle;
}

.woocommerce-cart .cart_item .product-name a {
	font-weight: 600;
	color: var(--sp-text);
}

.woocommerce-cart .cart_item .product-name a:hover {
	color: var(--sp-primary);
}

/* Cart totals */
.woocommerce-cart .cart_totals {
	background: var(--sp-bg-alt-1);
	border: 1px solid var(--sp-primary);
	border-radius: var(--sp-radius-lg);
	padding: 1.5rem;
}

.woocommerce-cart .cart_totals h2 {
	font-size: 1.2rem;
	margin-bottom: 1rem;
}

/* Checkout form */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields {
	background: var(--sp-light-bg);
	border: 1px solid var(--sp-border);
	border-radius: var(--sp-radius-lg);
	padding: 1.5rem;
	margin-bottom: 1.5rem;
}

.woocommerce form .form-row label {
	font-weight: 500;
	font-size: .9rem;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
	border: 1px solid var(--sp-border);
	border-radius: var(--sp-radius);
	padding: .55rem .75rem;
	font-family: var(--sp-font-body);
	transition: border-color .15s, box-shadow .15s;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
	border-color: var(--sp-accent);
	box-shadow: 0 0 0 3px rgba(255,154,162,.20);
	outline: none;
}

/* Order pay button */
.woocommerce #payment #place_order,
.woocommerce-checkout #payment #place_order {
	background: var(--sp-accent) !important;
	font-size: 1.05rem;
	padding: .8rem 2rem;
	width: 100%;
	border-radius: var(--sp-radius);
	font-weight: 700;
}

/* Notices */
.woocommerce-message,
.woocommerce-info {
	border-top-color: var(--sp-primary);
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--sp-primary);
}

.woocommerce-error {
	border-top-color: #dc2626;
}

/* ══════════════════════════════════════════════════════════════════════════
   13. FORMS (global)
══════════════════════════════════════════════════════════════════════════ */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="url"],
textarea,
select {
	font-family: var(--sp-font-body);
	border: 1px solid var(--sp-border);
	border-radius: var(--sp-radius);
	padding: .55rem .75rem;
	font-size: .95rem;
	color: var(--sp-text);
	transition: border-color .15s, box-shadow .15s;
	width: 100%;
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--sp-accent);
	box-shadow: 0 0 0 3px rgba(255,154,162,.20);
	outline: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   14. GENERAL PAGE CONTENT
══════════════════════════════════════════════════════════════════════════ */

.entry-content {
	font-size: 1rem;
	line-height: 1.75;
}

/* Force full-width on ALL pages — sidebar hidden site-wide */
.sidebar,
.widget-area,
#secondary {
	display: none !important;
}

.content-area,
#primary {
	width: 100% !important;
	float: none !important;
	margin-inline: 0 !important;
}

/* GeneratePress: disable left/right content padding caused by sidebar grid */
.sp-site .site-content .grid-container {
	display: block;
}

/* WooCommerce-specific redundant safety */
.woocommerce .sidebar,
.woocommerce-page .sidebar {
	display: none !important;
}

.woocommerce .content-area,
.woocommerce-page .content-area {
	width: 100% !important;
	float: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   15. RESPONSIVE OVERRIDES
══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
	.inside-header {
		padding: .5rem 1rem;
		min-height: 60px;
	}

	.site-logo img,
	.custom-logo {
		max-height: 40px;
	}

	/* Stack single product on mobile */
	.woocommerce div.product {
		grid-template-columns: 1fr;
	}

	/* Cart/checkout full width table */
	.woocommerce-cart table.cart {
		font-size: .85rem;
	}
}

/* Tablet/small-mobile: tighten product cards so more fit per screen.
   HF1.2 — pushed harder to hit 6+ visible cards on Samsung S25 Ultra (412×915).
   HF1.3 — extended to .sp-subcat-card (subcategory archive grid rendered on
   top-level category pages like /edible-toppers/ and /cookie-cutters/). */
@media (max-width: 768px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products,
	ul.products {
		gap: .5rem !important;
	}

	/* Cap image height even at tablet width — square aspect was producing
	   ~190px tall thumbnails which dominated the viewport. */
	.woocommerce ul.products li.product img,
	ul.products li.product img {
		aspect-ratio: auto !important;
		height: 140px !important;
		max-height: 140px !important;
		object-fit: cover !important;
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__title,
	ul.products li.product h2 {
		font-size: .75rem !important;
		padding: .3rem .5rem .1rem !important;
		line-height: 1.25 !important;
		-webkit-line-clamp: 2 !important;
	}

	.woocommerce ul.products li.product .price,
	ul.products li.product .price {
		font-size: .75rem !important;
		padding: .1rem .5rem .3rem !important;
		margin-bottom: 3px !important;
	}

	/* HF1.3 — subcategory cards (top-level category landings). */
	.sp-subcategory-grid {
		gap: .5rem !important;
	}
	.sp-subcat-card__img-wrap {
		aspect-ratio: auto !important;
		height: 140px !important;
	}
	.sp-subcat-card__placeholder {
		aspect-ratio: auto !important;
		height: 140px !important;
		font-size: 1.8rem !important;
	}
	.sp-subcat-card__body {
		padding: .4rem .5rem .55rem !important;
	}
	.sp-subcat-card__name {
		font-size: .9rem !important;
		margin-bottom: .15rem !important;
		line-height: 1.25 !important;
	}
	.sp-subcat-card__count {
		font-size: .75rem !important;
		margin-bottom: .15rem !important;
	}
	.sp-subcat-card__label {
		font-size: .72rem !important;
	}
}

@media (max-width: 480px) {
	h1 { font-size: 1.6rem; }
	h2 { font-size: 1.3rem; }

	.woocommerce ul.products,
	.woocommerce-page ul.products,
	ul.products {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: .4rem !important;
	}

	/* Aggressive image cap — fits 6+ cards per phone viewport. */
	.woocommerce ul.products li.product img,
	ul.products li.product img {
		aspect-ratio: auto !important;
		height: 120px !important;
		max-height: 120px !important;
		object-fit: cover !important;
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__title,
	ul.products li.product h2 {
		font-size: .65rem !important;
		padding: .2rem .35rem .05rem !important;
		line-height: 1.2 !important;
		-webkit-line-clamp: 2 !important;
	}

	.woocommerce ul.products li.product .price,
	ul.products li.product .price {
		font-size: .7rem !important;
		padding: .05rem .35rem .25rem !important;
		margin-bottom: 1px !important;
	}

	/* Hide quick-view + wishlist overlays on phone — entire card is tappable
	   and the saved real-estate buys an extra row of products. */
	.woocommerce ul.products li.product .sp-quick-view,
	.woocommerce ul.products li.product .sp-wishlist-heart {
		display: none !important;
	}

	/* HF1.3 — subcategory cards on phone. Aggressive: 120px image, tight body,
	   redundant "View Category →" label hidden (the whole card is tappable). */
	.sp-subcategory-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: .4rem !important;
	}
	.sp-subcat-card__img-wrap,
	.sp-subcat-card__placeholder {
		aspect-ratio: auto !important;
		height: 120px !important;
	}
	.sp-subcat-card__placeholder {
		font-size: 1.5rem !important;
	}
	.sp-subcat-card__body {
		padding: .25rem .4rem .4rem !important;
	}
	.sp-subcat-card__name {
		font-size: .75rem !important;
		margin-bottom: .1rem !important;
		line-height: 1.2 !important;
	}
	.sp-subcat-card__count {
		font-size: .65rem !important;
		margin-bottom: 0 !important;
	}
	.sp-subcat-card__label {
		display: none !important;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   16. UTILITY CLASSES
══════════════════════════════════════════════════════════════════════════ */

.sp-visually-hidden {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.sp-text-center { text-align: center; }
.sp-mt-1  { margin-top: .5rem; }
.sp-mt-2  { margin-top: 1rem; }
.sp-mb-2  { margin-bottom: 1rem; }

/* ══════════════════════════════════════════════════════════════════════════
   16B. HEADER SEARCH (live dropdown)
══════════════════════════════════════════════════════════════════════════ */

.sp-nav-search {
	position: relative;
	list-style: none;
}

.sp-search-wrap {
	position: relative;
	display: flex;
	align-items: center;
}

.sp-search-input {
	width: 0;
	max-width: 0;
	padding: .38rem .6rem;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: .875rem;
	background: transparent;
	transition: width .25s ease, max-width .25s ease, border-color .2s, background .2s;
	outline: none;
}

.sp-search-input:focus,
.sp-search--open .sp-search-input {
	width: 200px;
	max-width: 200px;
	border-color: var(--sp-accent-aqua);
	background: var(--sp-bg-main);
}

.sp-search-btn {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 1rem;
	color: var(--sp-text-soft);
	padding: .35rem;
	line-height: 1;
	display: flex;
	align-items: center;
	transition: color .15s;
}

.sp-search-btn:hover { color: var(--sp-primary); }

/* Dropdown */
.sp-search-drop {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	min-width: 280px;
	max-width: 340px;
	background: var(--sp-white);
	border: 1px solid var(--sp-accent-aqua);
	border-radius: var(--sp-radius-lg);
	box-shadow: var(--sp-shadow-md);
	z-index: 500;
	overflow: hidden;
}

.sp-search-drop__loading,
.sp-search-drop__none {
	padding: .85rem 1rem;
	font-size: .875rem;
	color: var(--sp-text-soft);
}

.sp-search-drop__list {
	list-style: none;
	margin: 0;
	padding: .35rem 0;
}

.sp-search-drop__item { margin: 0; }

.sp-search-drop__link {
	display: flex;
	align-items: center;
	gap: .65rem;
	padding: .5rem .85rem;
	text-decoration: none;
	transition: background .12s;
}

.sp-search-drop__link:hover { background: var(--sp-bg-soft); }

.sp-search-drop__img {
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: 5px;
	flex-shrink: 0;
	background: var(--sp-bg-soft);
}

.sp-search-drop__img--empty {
	display: inline-block;
}

.sp-search-drop__info {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	min-width: 0;
}

.sp-search-drop__title {
	font-size: .875rem;
	font-weight: 600;
	color: var(--sp-text-main);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sp-search-drop__price {
	font-size: .8rem;
	color: var(--sp-primary);
	font-weight: 700;
}

.sp-search-drop__all {
	display: block;
	padding: .6rem .85rem;
	border-top: 1px solid var(--sp-bg-soft);
	font-size: .825rem;
	font-weight: 600;
	color: var(--sp-primary);
	text-decoration: none;
	transition: background .12s;
}

.sp-search-drop__all:hover { background: var(--sp-bg-soft); }

@media (max-width: 767px) {
	.sp-search-input:focus,
	.sp-search--open .sp-search-input {
		width: 140px;
		max-width: 140px;
	}
	.sp-search-drop {
		right: auto;
		left: 0;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   17. HOMEPAGE (front-page.php)
══════════════════════════════════════════════════════════════════════════ */

/* Remove default GP page padding on front page */
.home .entry-content,
.home .entry-header,
.sp-front-page .entry-header {
	padding: 0;
	margin: 0;
}

/* ── Section wrapper ─────────────────────────────────────────────────────── */

.sp-section {
	padding: 3rem 1.25rem;
}

.sp-section--light {
	background: var(--sp-bg-soft);
}

.sp-section--dark {
	background: var(--sp-primary-dark);
	color: var(--sp-white);
}

.sp-section__inner {
	max-width: var(--sp-max-w);
	margin-inline: auto;
}

.sp-section__header {
	text-align: center;
	margin-bottom: 2rem;
}

.sp-section__title {
	font-family: var(--sp-font-heading);
	font-size: clamp(1.4rem, 3vw, 2rem);
	font-weight: 700;
	color: var(--sp-text);
	margin: 0 0 .5rem;
}

.sp-section--dark .sp-section__title {
	color: var(--sp-white);
}

.sp-section__subtitle {
	font-size: 1rem;
	color: var(--sp-text-muted);
	margin: 0 auto;
	max-width: 560px;
	line-height: 1.6;
}

.sp-section--dark .sp-section__subtitle {
	color: rgba(255,255,255,.75);
}

.sp-section__footer {
	text-align: center;
	margin-top: 2rem;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.sp-hero {
	background: var(--sp-primary);
	color: var(--sp-white);
	padding: 4rem 1.25rem;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.sp-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient( ellipse at 70% 50%, rgba(245,165,161,.15) 0%, transparent 60% );
	pointer-events: none;
}

.sp-hero__inner {
	max-width: 740px;
	margin-inline: auto;
	position: relative;
	z-index: 1;
}

.sp-hero__title {
	font-size: clamp(2rem, 6vw, 3.5rem);
	font-weight: 800;
	color: var(--sp-white);
	margin: 0 0 .75rem;
	line-height: 1.1;
	/* Layered shadow — sharp dark halo + soft glow — keeps white legible
	   on the lighter mint hero now that the dark overlay is removed. */
	text-shadow:
		0 1px 2px rgba(0,0,0,.55),
		0 2px 14px rgba(0,0,0,.45);
}

.sp-hero__subtitle {
	font-size: clamp(1rem, 2.5vw, 1.2rem);
	color: var(--sp-white);
	margin: 0 0 2rem;
	line-height: 1.55;
	text-shadow:
		0 1px 2px rgba(0,0,0,.45),
		0 2px 10px rgba(0,0,0,.35);
}

.sp-hero__cta-group {
	display: flex;
	gap: .75rem;
	justify-content: center;
	flex-wrap: wrap;
}

.sp-btn--light {
	background: var(--sp-white) !important;
	color: var(--sp-primary) !important;
	box-shadow: 0 2px 10px rgba(0,0,0,.15) !important;
}

.sp-btn--light:hover {
	background: var(--sp-primary-light) !important;
	color: var(--sp-primary-dark) !important;
}

.sp-btn--outline-light {
	background: transparent !important;
	color: var(--sp-white) !important;
	border: 2px solid rgba(255,255,255,.7) !important;
	box-shadow: none !important;
}

.sp-btn--outline-light:hover {
	background: rgba(255,255,255,.15) !important;
	border-color: var(--sp-white) !important;
}

.sp-btn--rounded {
	border-radius: 999px !important;
	padding: .7rem 1.75rem;
	font-size: 1rem;
}

/* ── Category showcase ───────────────────────────────────────────────────── */

.sp-cat-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

@media (min-width: 480px) {
	.sp-cat-grid {
		grid-template-columns: 1fr 1fr;
	}
}

.sp-cat-card {
	position: relative;
	border-radius: var(--sp-radius-lg);
	overflow: hidden;
	background: var(--sp-light-bg);
	border: 1px solid var(--sp-border);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	padding: 1.75rem 1.25rem 1.5rem;
	text-align: center;
	text-decoration: none;
	min-height: 200px;
	transition: box-shadow .2s, transform .18s;
}

.sp-cat-card:hover {
	box-shadow: var(--sp-shadow-md);
	transform: translateY(-3px);
}

.sp-cat-card--large { min-height: 220px; }
.sp-cat-card--small { min-height: 160px; }

.sp-cat-card__emoji {
	font-size: 2.5rem;
	display: block;
	margin-bottom: .6rem;
}

.sp-cat-card__title {
	font-family: var(--sp-font-heading);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--sp-text);
	margin: 0 0 .75rem;
}

.sp-cat-card__btn {
	display: inline-block;
	background: var(--sp-primary);
	color: var(--sp-white) !important;
	font-size: .85rem;
	font-weight: 700;
	padding: .4rem 1rem;
	border-radius: 999px;
	text-decoration: none;
	transition: background .15s;
}

.sp-cat-card:hover .sp-cat-card__btn {
	background: var(--sp-primary-dark);
}

.sp-cat-grid--small {
	margin-top: 1.25rem;
}

/* ── How it works ────────────────────────────────────────────────────────── */

.sp-steps {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.75rem;
	text-align: center;
}

@media (min-width: 640px) {
	.sp-steps {
		grid-template-columns: repeat(3, 1fr);
	}
}

.sp-step {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.sp-step__icon {
	font-size: 2.5rem;
	margin-bottom: .75rem;
	width: 72px;
	height: 72px;
	background: var(--sp-primary-light);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sp-step__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: var(--sp-primary);
	color: var(--sp-white);
	font-family: var(--sp-font-heading);
	font-size: .85rem;
	font-weight: 700;
	border-radius: 50%;
	margin-bottom: .75rem;
	flex-shrink: 0;
}

.sp-step__title {
	font-family: var(--sp-font-heading);
	font-size: 1rem;
	font-weight: 700;
	color: var(--sp-text);
	margin: 0 0 .4rem;
}

.sp-step__desc {
	font-size: .9rem;
	color: var(--sp-text-muted);
	margin: 0;
	line-height: 1.6;
	max-width: 260px;
}

/* ── Trust / reviews ─────────────────────────────────────────────────────── */

.sp-trust {
	text-align: center;
}

.sp-trust__stars {
	color: var(--sp-secondary);
	font-size: 1.75rem;
	letter-spacing: .1rem;
	margin-bottom: .75rem;
}

.sp-trust__placeholder {
	background: var(--sp-border);
	border-radius: var(--sp-radius-lg);
	padding: 2rem;
	color: var(--sp-text-muted);
	font-size: .9rem;
	font-style: italic;
	max-width: 600px;
	margin-inline: auto;
}

/* ── CTA banner ──────────────────────────────────────────────────────────── */

.sp-cta-banner {
	text-align: center;
}

.sp-cta-banner__title {
	font-family: var(--sp-font-heading);
	font-size: clamp(1.3rem, 3vw, 1.9rem);
	font-weight: 800;
	color: var(--sp-white);
	margin: 0 0 .5rem;
}

.sp-cta-banner__text {
	font-size: 1rem;
	color: rgba(255,255,255,.8);
	margin: 0 auto 1.75rem;
	max-width: 520px;
	line-height: 1.6;
}

.sp-cta-banner__buttons {
	display: flex;
	gap: .75rem;
	justify-content: center;
	flex-wrap: wrap;
}

.sp-btn--fb {
	background: #1877f2 !important;
	color: var(--sp-white) !important;
}

.sp-btn--ig {
	background: linear-gradient( 45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100% ) !important;
	color: var(--sp-white) !important;
}

/* ── Popular products section adjustments ────────────────────────────────── */

.sp-popular-products .woocommerce {
	width: 100%;
}

@media (min-width: 640px) {
	.sp-hero {
		padding: 5.5rem 1.25rem;
	}

	.sp-section {
		padding: 4rem 1.25rem;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   18. SUBCATEGORY GRID  (archive-product.php override)
══════════════════════════════════════════════════════════════════════════ */

/* ── Browse-by-category banner ───────────────────────────────────────────── */

.sp-browse-banner {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin-bottom: 1.25rem;
	padding: .65rem 1rem;
	background: var(--sp-bg-soft);
	border: 1px solid var(--sp-accent-aqua);
	border-radius: var(--sp-radius);
	font-size: .95rem;
	font-weight: 700;
	color: var(--sp-primary-dark);
}

/* ── FIX 4: prevent result-count/ordering from occupying a product grid column */

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering,
.woocommerce-result-count,
.woocommerce-ordering {
	grid-column: 1 / -1 !important;
	width: 100% !important;
}

/* ── Pagination ─────────────────────────────────────────────────────────── */

.woocommerce nav.woocommerce-pagination,
.woocommerce-pagination {
	margin: 2.5rem 0 1rem;
	text-align: center;
}

.woocommerce nav.woocommerce-pagination ul,
.woocommerce-pagination ul {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.4rem;
	height: 2.4rem;
	padding: 0 0.75rem;
	border-radius: var(--sp-radius);
	border: 1px solid var(--sp-primary);
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--sp-text-main);
	background: var(--sp-white);
	text-decoration: none;
	transition: background .15s, color .15s;
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce-pagination ul li a:hover {
	background: var(--sp-bg-alt-2);
	border-color: var(--sp-accent);
	color: var(--sp-accent-dark);
}

.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce-pagination ul li span.current {
	background: var(--sp-accent);
	border-color: var(--sp-accent);
	color: var(--sp-white);
}

/* ── Archive header ──────────────────────────────────────────────────────── */

.sp-archive-header {
	margin-bottom: 1.5rem;
}

.sp-archive-header h1 {
	font-size: clamp(1.4rem, 3vw, 2rem);
	margin-bottom: .35rem;
}

.sp-archive-desc {
	font-size: .95rem;
	color: var(--sp-text-muted);
	margin: 0 0 1.5rem;
}

/* HF6.1.2.2.6 — Category search + sub-category dropdown bar.
   Sits at the bottom of .sp-archive-header (injected via
   woocommerce_archive_description filter). Same pattern as the Mix
   Sheet Builder Step 2 search UX. */
.sp-category-search-bar {
	display: flex;
	gap: .75rem;
	margin: 1rem 0 1.5rem;
	flex-wrap: wrap;
}

/* HF6.1.2.4.2 — wrap input in <form> for mobile submit-on-Enter. The
   form must behave as a flex item the same way the bare input did. */
.sp-category-search-form {
	flex: 1 1 240px;
	min-width: 180px;
	margin: 0;
	padding: 0;
}

.sp-category-search-form .sp-category-search-input {
	width: 100%;
}

/* HF6.1.2.5.2b — search-button affordance. Wraps input + magnifying-glass
   button so the click target sits at the right edge of the input. */
.sp-category-search-wrapper {
	position: relative;
	display: flex;
	align-items: stretch;
	width: 100%;
}

.sp-category-search-wrapper .sp-category-search-input {
	flex: 1 1 auto;
	padding-right: 44px !important;
}

.sp-category-search-btn {
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY( -50% );
	background: transparent;
	border: none;
	cursor: pointer;
	color: var( --sp-accent, #FF9AA2 );
	padding: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color .2s ease;
	line-height: 0;
}

.sp-category-search-btn:hover,
.sp-category-search-btn:focus {
	color: var( --sp-secondary, #F7B7C3 );
	outline: none;
}

.sp-category-search-btn svg {
	width: 18px;
	height: 18px;
}

.sp-category-search-input,
.sp-category-dropdown {
	padding: .65rem 1rem;
	border: 1px solid #ddd;
	border-radius: 6px;
	font-size: 1rem;
	background: var(--sp-white);
	color: var(--sp-text-main);
	font-family: inherit;
}

.sp-category-search-input {
	flex: 1 1 240px;
	min-width: 180px;
}

.sp-category-search-input:focus,
.sp-category-dropdown:focus {
	outline: none;
	border-color: var(--sp-primary);
	box-shadow: 0 0 0 3px rgba(168,218,220,.25);
}

.sp-category-dropdown {
	flex: 1 1 220px;
	min-width: 180px;
	cursor: pointer;
}

/* HF6.1.2.3.4 — Back link on sub-category pages. */
.sp-category-back-link {
	margin: .5rem 0 .75rem;
}

.sp-category-back-link a {
	display: inline-block;
	color: var(--sp-accent, #FF9AA2);
	text-decoration: none;
	font-size: .9rem;
	font-weight: 500;
	padding: 4px 0;
	transition: color .2s ease;
}

.sp-category-back-link a:hover {
	color: var(--sp-secondary, #F7B7C3);
	text-decoration: underline;
}

/* HF6.1.2.3.5 — Mobile compaction. The default flex 1 1 240px + 1rem
   padding ballooned the inputs to ~300px tall on Samsung S25 Ultra; the
   !important is necessary because GeneratePress + Hostinger admin styles
   can override our base styles on form controls. */
@media ( max-width: 768px ) {
	.sp-category-search-bar {
		flex-direction: column;
		gap: 8px;
		margin: .5rem 0 1rem;
	}
	.sp-category-search-form {
		width: 100%;
		flex: 1 1 100%;
	}
	.sp-category-search-input,
	.sp-category-dropdown {
		width: 100% !important;
		font-size: 14px !important;
		padding: 10px 12px !important;
		height: auto !important;
		min-height: 44px !important;
		max-height: 48px !important;
		line-height: 1.4 !important;
		box-sizing: border-box !important;
	}
	/* Preserve room for the search button at the right edge. */
	.sp-category-search-wrapper .sp-category-search-input {
		padding-right: 40px !important;
	}
	.sp-category-search-input::placeholder {
		font-size: 14px;
	}
	.sp-category-back-link a {
		font-size: 13px;
		padding: 2px 0;
	}
}

@media ( max-width: 480px ) {
	.sp-category-search-input,
	.sp-category-dropdown {
		font-size: 13px !important;
		padding: 8px 10px !important;
		min-height: 40px !important;
		max-height: 44px !important;
	}
}

/* HF6.1.2.5.2 — `.sp-search-hint` block REMOVED. The "No matches on this
   page" hint was tied to the live-filter UX which is now gone (typing
   no longer hides products; search fires only on Enter). Removing the
   CSS keeps the stylesheet aligned with the new behaviour. */

.sp-subcategory-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.25rem;
	margin: 0 0 2.5rem;
}

@media (min-width: 640px) {
	.sp-subcategory-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1024px) {
	.sp-subcategory-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.sp-subcat-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	border: 2px solid var(--sp-accent-aqua);
	border-radius: var(--sp-radius-lg);
	overflow: hidden;
	background: var(--sp-bg-soft);
	transition: box-shadow .2s, transform .18s, border-color .2s;
}

.sp-subcat-card:hover {
	box-shadow: var(--sp-shadow-md);
	transform: translateY(-3px);
	border-color: var(--sp-primary);
}

.sp-subcat-card__img-wrap {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--sp-light-bg);
}

.sp-subcat-card__img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .3s;
}

.sp-subcat-card:hover .sp-subcat-card__img-wrap img {
	transform: scale(1.04);
}

.sp-subcat-card__placeholder {
	width: 100%;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.5rem;
	background: var(--sp-light-bg);
	color: var(--sp-primary);
}

.sp-subcat-card__body {
	padding: .85rem .85rem 1rem;
	text-align: center;
}

.sp-subcat-card__name {
	font-family: var(--sp-font-body);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--sp-text-main);
	margin: 0 0 .3rem;
	line-height: 1.35;
}

.sp-subcat-card__count {
	font-size: .875rem;
	color: var(--sp-text-soft);
	margin-bottom: .4rem;
}

.sp-subcat-card__label {
	display: inline-block;
	font-size: .8rem;
	font-weight: 700;
	color: var(--sp-primary);
	margin-top: .25rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   19. HOMEPAGE PHASE 3.3 — Image hero, category rows, reviews, CTA overlay
══════════════════════════════════════════════════════════════════════════ */

/* ── Hero with real background image ────────────────────────────────────── */

.sp-hero--has-img {
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
}

.sp-hero__overlay {
	position: absolute;
	inset: 0;
	/* Soft white veil — preserves the mint background brightness so the hero
	   matches the "View all 500+ categories" pill button tone. The previous
	   rgba(74,74,74,.35-.50) made the hero look washed-out grey. */
	background: linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0.08) 0%,
		rgba(255, 255, 255, 0.00) 100%
	);
	pointer-events: none;
}

.sp-hero__logo {
	display: block;
	max-width: 100px;
	width: auto;
	height: auto;
	margin: 0 auto 1rem;
	filter: drop-shadow( 0 2px 6px rgba(0,0,0,.30) );
}

@media (max-width: 768px) {
	.sp-hero__logo {
		max-width: 80px;
		margin-bottom: .75rem;
	}
}

/* ── Category row layout ─────────────────────────────────────────────────── */

.sp-cat-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	margin-bottom: 1.25rem;
}

@media (min-width: 520px) {
	.sp-cat-row {
		grid-template-columns: 1fr 1fr;
	}
}

.sp-cat-row--large .sp-cat-card { min-height: 280px; }
.sp-cat-row--small .sp-cat-card { min-height: 190px; }

/* ── Category card with background image ─────────────────────────────────── */

.sp-cat-card--has-img {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: var(--sp-primary);
	padding: 0;
	border: none;
}

.sp-cat-card__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(74, 74, 74, 0.65) 0%,
		rgba(74, 74, 74, 0.10) 65%,
		transparent 100%
	);
	border-radius: inherit;
	pointer-events: none;
}

.sp-cat-card__content {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: 1.5rem 1.25rem;
	box-sizing: border-box;
}

/* White text on image cards */
.sp-cat-card--has-img .sp-cat-card__title {
	color: var(--sp-white);
	text-shadow: 0 1px 6px rgba(0,0,0,.45);
	margin-bottom: .6rem;
}

/* ── Reviews grid ────────────────────────────────────────────────────────── */

.sp-reviews-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	margin-bottom: 1rem;
}

@media (min-width: 640px) {
	.sp-reviews-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.sp-review-card {
	background: var(--sp-white);
	border: 1px solid var(--sp-border);
	border-radius: var(--sp-radius-lg);
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: .65rem;
	box-shadow: var(--sp-shadow-sm);
	transition: box-shadow .2s, transform .18s;
}

.sp-review-card:hover {
	box-shadow: var(--sp-shadow);
	transform: translateY(-2px);
}

.sp-review-card__stars {
	color: var(--sp-secondary);
	font-size: 1.1rem;
	letter-spacing: .1em;
}

.sp-review-card__text {
	font-size: .925rem;
	color: var(--sp-text);
	line-height: 1.65;
	font-style: italic;
	flex: 1;
	margin: 0;
}

.sp-review-card__name {
	font-size: .825rem;
	font-weight: 600;
	color: var(--sp-text-muted);
}

/* ── CTA section — full-width with background image ─────────────────────── */

.sp-cta-section {
	position: relative;
	/* Break out of any GP container padding */
	width: 100vw;
	margin-left: calc(-50vw + 50%);
	padding-top: 5rem;
	padding-bottom: 5rem;
}

.sp-cta-section:not(.sp-cta-section--has-img) {
	background: linear-gradient( 135deg, #F7B7C3 0%, #A8DADC 100% );
}

.sp-cta-section--has-img {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.sp-cta-section__overlay {
	position: absolute;
	inset: 0;
	background: rgba(74, 74, 74, 0.45);
	pointer-events: none;
}

.sp-cta-section .sp-section__inner,
.sp-cta-section .sp-cta-banner {
	position: relative;
	z-index: 1;
}

/* ── Muted link ──────────────────────────────────────────────────────────── */

.sp-link-muted {
	color: var(--sp-text-muted);
	font-size: .9rem;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color .15s;
}

.sp-link-muted:hover {
	color: var(--sp-primary);
}

/* ── Generous section padding (Phase 3.3 polish) ────────────────────────── */

@media (min-width: 640px) {
	.sp-section { padding: 5rem 1.25rem; }
	.sp-hero    { padding: 6rem 1.25rem; }
}

@media (min-width: 1024px) {
	.sp-section { padding: 6.5rem 1.25rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PHASE 3.8 — Back to top, Wishlist, Recently Viewed, Priority Printing
══════════════════════════════════════════════════════════════════════════ */

/* ── Back to top ─────────────────────────────────────────────────────────── */

.sp-back-to-top {
	position: fixed;
	bottom: 1.5rem;
	right: 1.5rem;
	z-index: 9999;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--sp-accent);
	color: var(--sp-white);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s, transform .25s, background .15s;
	box-shadow: 0 4px 12px rgba(255,154,162,.40);
}

.sp-back-to-top--visible {
	opacity: .85;
	pointer-events: auto;
}

.sp-back-to-top:hover {
	opacity: 1;
	background: var(--sp-accent-dark);
	transform: translateY(-3px);
}

/* ── Wishlist heart button (on product cards + single) ───────────────────── */

.sp-wishlist-btn {
	position: absolute;
	top: .6rem;
	right: .6rem;
	z-index: 10;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255,255,255,.88);
	border: 1px solid var(--sp-primary);
	cursor: pointer;
	font-size: 1.2rem;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--sp-text-soft);
	transition: color .15s, transform .15s, border-color .15s;
	padding: 0;
}

.sp-wishlist-btn--active {
	color: #e0717a;
	border-color: #e0717a;
}

.sp-wishlist-btn:hover {
	border-color: var(--sp-accent);
	color: var(--sp-accent);
	transform: scale(1.15);
}

.sp-wishlist-btn--pop {
	animation: sp-pop .3s ease;
}

@keyframes sp-pop {
	0%   { transform: scale(1); }
	50%  { transform: scale(1.35); }
	100% { transform: scale(1); }
}

/* Single product page heart — inline next to title */
.sp-wishlist-btn--single {
	position: static;
	display: inline-flex;
	vertical-align: middle;
	margin-left: .75rem;
}

/* Nav wishlist icon */
.sp-nav-wishlist a {
	display: flex;
	align-items: center;
	gap: .2rem;
	font-size: 1.25rem;
	line-height: 1;
	color: var(--sp-text-main);
	text-decoration: none;
}

.sp-wishlist-count--nav {
	font-size: .7rem;
	font-weight: 700;
	background: var(--sp-accent);
	color: var(--sp-white);
	border-radius: 99px;
	padding: .05rem .35rem;
	min-width: 1.1rem;
	text-align: center;
}

/* Wishlist page grid */
.sp-wishlist-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.25rem;
}

@media (min-width: 640px)  { .sp-wishlist-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .sp-wishlist-grid { grid-template-columns: repeat(4, 1fr); } }

.sp-wishlist-remove {
	display: block;
	width: 100%;
	margin-top: .5rem;
	padding: .3rem;
	background: none;
	border: 1px solid var(--sp-primary);
	border-radius: var(--sp-radius);
	color: var(--sp-text-soft);
	font-size: .8rem;
	cursor: pointer;
	transition: color .15s, border-color .15s;
}

.sp-wishlist-remove:hover {
	color: var(--sp-accent-dark);
	border-color: var(--sp-accent-dark);
}

/* ── Recently Viewed ─────────────────────────────────────────────────────── */

.sp-recently-viewed {
	margin: 3rem 0 2rem;
	padding-top: 2rem;
	border-top: 1px solid var(--sp-primary);
}

.sp-recently-viewed__title {
	font-size: 1.25rem;
	font-weight: 700;
	margin-bottom: 1.25rem;
	color: var(--sp-text-main);
}

.sp-recently-viewed__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}

@media (min-width: 640px)  { .sp-recently-viewed__grid { grid-template-columns: repeat(4, 1fr); } }

.sp-rv-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	border: 1px solid var(--sp-primary);
	border-radius: var(--sp-radius-lg);
	overflow: hidden;
	transition: box-shadow .2s, transform .18s;
}

.sp-rv-card:hover {
	box-shadow: var(--sp-shadow-md);
	transform: translateY(-3px);
}

.sp-rv-card__img-wrap {
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--sp-bg-alt-1);
}

.sp-rv-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .25s;
}

.sp-rv-card:hover .sp-rv-card__img {
	transform: scale(1.05);
}

.sp-rv-card__img-placeholder {
	width: 100%;
	height: 100%;
	background: var(--sp-bg-alt-1);
}

.sp-rv-card__info {
	padding: .6rem .75rem .75rem;
	display: flex;
	flex-direction: column;
	gap: .25rem;
}

.sp-rv-card__title {
	font-size: .85rem;
	font-weight: 600;
	color: var(--sp-text-main);
	line-height: 1.3;
}

.sp-rv-card__price {
	font-size: .85rem;
	font-weight: 700;
	color: var(--sp-primary);
}

/* ── Priority printing info box ─────────────────────────────────────────── */

.spv-priority-info {
	margin-top: .6rem;
	padding: .75rem 1rem;
	background: var(--sp-bg-highlight);
	border-left: 3px solid var(--sp-accent);
	border-radius: 0 var(--sp-radius) var(--sp-radius) 0;
	font-size: .88rem;
}

.spv-priority-info p {
	margin: 0 0 .5rem;
}

.spv-priority-info p:last-of-type {
	margin-bottom: .75rem;
}

/* ── Priority Printing: ensure visibility + responsive on narrow mobile ── */

#spv-priority-wrap {
	width:      100% !important;
	max-width:  100% !important;
	overflow:   visible !important;
	box-sizing: border-box !important;
}

#spv-priority-info {
	width:      100% !important;
	max-width:  100% !important;
	overflow:   visible !important;
	box-sizing: border-box !important;
	word-wrap:  break-word !important;
	overflow-wrap: break-word !important;
}

@media ( max-width: 600px ) {
	#spv-priority-wrap {
		padding: 8px 0 !important;
	}

	#spv-priority-wrap label {
		font-size: 14px !important;
		gap: 6px !important;
		flex-wrap: wrap !important;
	}

	#spv-priority-info {
		padding:   10px 12px !important;
		font-size: 12px !important;
		line-height: 1.5 !important;
	}

	/* Stack Facebook/Instagram buttons vertically on narrow screens */
	#spv-priority-info p:last-child a {
		display:      block !important;
		width:        100% !important;
		margin:       0 0 6px 0 !important;
		text-align:   center !important;
		box-sizing:   border-box !important;
	}
}

/* ── Single product: hide category and tags, keep SKU ──────────────────── */
.single-product .product_meta .posted_in,
.single-product .product_meta .tagged_as {
	display: none !important;
}

/* ── Single product: kill duplicate top featured-image (defensive) ─────────
   PHP filter `generate_show_post_thumbnail` already disables GP's output, but
   on some setups a second image still bleeds in via legacy GP wrappers or
   plugin hooks. Hide every known wrapper that is NOT inside .summary or the
   WC gallery. The WC gallery uses .woocommerce-product-gallery which is
   explicitly preserved. */
body.single-product .featured-image,
body.single-product .post-image,
body.single-product .generate-featured-page-header,
body.single-product .page-header-image,
body.single-product .page-header-image-single,
body.single-product article > .post-thumbnail,
body.single-product .entry-header > .post-thumbnail {
	display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   SEARCH RESULTS PAGE — responsive product grid (3.10m)

   History:
   - 3.10k applied `display:grid` to .site-main itself.
   - 3.10l tried to patch by whitelisting ul.products with `grid-column:1/-1`.
   - Both failed: console showed ul.products width 152px + cols "13px 13px
     13px 13px". Real cause: ul.products is wrapped inside other containers
     (.woocommerce, .content-area) that may themselves be flex/grid, AND
     GeneratePress may run a sidebar layout compressing .site-main.

   Fix: nuke any grid/flex/sidebar constraint on search-page containers
   and apply grid ONLY to ul.products (the natural WC archive container).
   Target three body classes — .search (always present), .search-results
   (when matches found), .search-no-results (when empty).
══════════════════════════════════════════════════════════════════════════ */

/* Strip flex/grid from every possible wrapper so ul.products can breathe. */
body.search .site-content,
body.search-results .site-content,
body.search-no-results .site-content {
	display: block !important;
}

body.search .content-area,
body.search-results .content-area,
body.search-no-results .content-area {
	display:   block !important;
	float:     none !important;
	width:     100% !important;
	max-width: 100% !important;
	padding:   0 !important;
}

body.search .site-main,
body.search-results .site-main,
body.search-no-results .site-main {
	display:   block !important;
	width:     100% !important;
	max-width: 100% !important;
}

/* Hide any sidebar on search pages (search UI already in header). */
body.search .widget-area,
body.search-results .widget-area,
body.search-no-results .widget-area {
	display: none !important;
}

/* THE grid that matters: ul.products (WC archive list). */
body.search ul.products,
body.search-results ul.products,
body.search-no-results ul.products {
	display:               grid !important;
	grid-template-columns: repeat( 2, 1fr ) !important;
	gap:                   20px !important;
	list-style:            none !important;
	padding:               20px !important;
	margin:                0 auto !important;
	width:                 100% !important;
	max-width:             1400px !important;
	box-sizing:            border-box !important;
}

body.search ul.products li.product,
body.search-results ul.products li.product,
body.search-no-results ul.products li.product {
	width:       100% !important;
	margin:      0 !important;
	float:       none !important;
	clear:       none !important;
	grid-column: auto !important;
}

@media ( min-width: 768px ) {
	body.search ul.products,
	body.search-results ul.products,
	body.search-no-results ul.products {
		grid-template-columns: repeat( 3, 1fr ) !important;
	}
}

@media ( min-width: 1024px ) {
	body.search ul.products,
	body.search-results ul.products,
	body.search-no-results ul.products {
		grid-template-columns: repeat( 4, 1fr ) !important;
	}
}

/* Force image sizing: 1:1 square covering thumbnail area. */
body.search ul.products li.product img,
body.search ul.products li.product .sp-slide-img,
body.search-results ul.products li.product img,
body.search-results ul.products li.product .sp-slide-img,
body.search-no-results ul.products li.product img,
body.search-no-results ul.products li.product .sp-slide-img {
	width:        100% !important;
	height:       auto !important;
	aspect-ratio: 1 / 1 !important;
	object-fit:   cover !important;
	display:      block !important;
}

/* WP article fallback (when URL has no post_type=product): simple stacked cards. */
body.search-results .site-main > article {
	background:     var( --sp-white, #fff );
	border-radius:  10px;
	overflow:       hidden;
	box-shadow:     0 1px 4px rgba( 0,0,0,0.06 );
	display:        block;
	margin:         0 20px 20px;
	padding:        16px;
	max-width:      900px;
}

body.search-results .site-main > article img {
	width:     100% !important;
	max-width: 400px;
	height:    auto !important;
	display:   block;
	margin:    0 auto 12px;
}

body.search-results .site-main > article .entry-summary,
body.search-results .site-main > article .entry-content p,
body.search-results .site-main > article .entry-content .woocommerce-product-details__short-description {
	display: none;
}

body.search-results .site-main > article .entry-title,
body.search-results .site-main > article h2 {
	font-size:   1rem !important;
	font-weight: 500 !important;
	padding:     10px 0;
	margin:      0;
	line-height: 1.3;
}

body.search-results .site-main > article .entry-title a {
	color:           var( --sp-text-main, #4A4A4A );
	text-decoration: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   19. LEGAL / POLICY PAGES (generated by sweetprints-legal-pages plugin)
══════════════════════════════════════════════════════════════════════════ */

.spl-legal-page {
	max-width: 820px;
	margin: 0 auto;
	padding: 1rem 0 3rem;
	font-size: 1rem;
	line-height: 1.7;
	color: var( --sp-text-main, #4A4A4A );
}

.spl-legal-page h2 {
	font-family: var(--sp-font-heading);
	font-size: 1.6rem;
	font-weight: 700;
	color: var( --sp-text-heading, #05606B );
	margin: 2.25rem 0 1rem;
	padding-bottom: .4rem;
	border-bottom: 2px solid var(--sp-primary);
}

.spl-legal-page h3 {
	font-family: var(--sp-font-heading);
	font-size: 1.2rem;
	font-weight: 600;
	color: var( --sp-text-heading, #05606B );
	margin: 1.75rem 0 .6rem;
}

.spl-legal-page p {
	margin: 0 0 1rem;
}

.spl-legal-page ul,
.spl-legal-page ol {
	margin: 0 0 1.25rem 1.25rem;
	padding: 0;
}

.spl-legal-page li {
	margin-bottom: .35rem;
}

.spl-legal-page a {
	color: var( --sp-primary-dark, #05606B );
	text-decoration: underline;
}

.spl-legal-page a:hover {
	color: var( --sp-secondary, #F7B7C3 );
}

.spl-legal-page hr {
	border: 0;
	border-top: 1px solid #e5e5e5;
	margin: 2rem 0;
}

.spl-legal-page table.spl-table {
	width: 100%;
	border-collapse: collapse;
	margin: 1rem 0 1.5rem;
	font-size: .95rem;
	background: #fff;
}

.spl-legal-page table.spl-table th,
.spl-legal-page table.spl-table td {
	border: 1px solid #e5e5e5;
	padding: .6rem .8rem;
	text-align: left;
	vertical-align: top;
}

.spl-legal-page table.spl-table th {
	background: var( --sp-primary, #A8DADC );
	color: var( --sp-text-heading, #05606B );
	font-weight: 700;
}

.spl-legal-page table.spl-table tr:nth-child(even) td {
	background: #fafafa;
}

@media (max-width: 600px) {
	.spl-legal-page {
		font-size: .95rem;
	}
	.spl-legal-page h2 { font-size: 1.35rem; }
	.spl-legal-page h3 { font-size: 1.1rem;  }
	.spl-legal-page table.spl-table {
		display: block;
		overflow-x: auto;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   HF4.1.11 — Hide WooCommerce product reviews sitewide (belt-and-suspenders).
   PHP filters already remove the Reviews tab and close comments — these CSS
   rules catch any leftover UI from third-party plugins or future themes.
   Star ratings on shop loop ARE preserved via :not(.products) scoping below.
══════════════════════════════════════════════════════════════════════════ */

.woocommerce-Reviews,
.woocommerce-Tabs-panel--reviews,
#reviews,
#review_form,
#review_form_wrapper,
.commentlist,
.comment-form-rating,
.woocommerce-product-rating,
.woocommerce-noreviews,
.woocommerce-review-link,
.product .star-rating {
	display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   HF5.2.1 — Live Google Reviews via Trustindex "Widgets for Google Reviews".
   The plugin ships its own complete styling (layout / colours / fonts chosen
   by owner via the 5-step wizard). We only style the section wrapper and
   ensure the widget container fits the Sweet Prints page width. Avoid deep
   overrides — the wizard config wins.
══════════════════════════════════════════════════════════════════════════ */

.sp-reviews-section {
	background: rgba( 168, 218, 220, 0.08 );  /* very subtle mint section bg */
	padding: 4rem 0;
}

.sp-reviews-grid {
	margin: 2.5rem 0;
}

/* Center and width-cap the Trustindex widget so it doesn't bleed past our
   page max-width on wide screens. */
.sp-reviews-grid .trustindex,
.sp-reviews-grid .ti-widget {
	max-width: 1200px;
	margin: 0 auto;
}

/* Fallback when the plugin is deactivated or not yet installed. */
.sp-reviews-fallback {
	text-align: center;
	color: #888;
	font-style: italic;
	margin: 2rem 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   HF6.1.3 — My Account link in primary navigation.
══════════════════════════════════════════════════════════════════════════ */

.sp-my-account-menu a {
	font-weight: 600;
	color: var( --sp-accent, #FF9AA2 ) !important;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.sp-my-account-menu a:hover {
	color: var( --sp-secondary, #F7B7C3 ) !important;
	text-decoration: underline;
}

@media ( max-width: 768px ) {
	.sp-my-account-menu a {
		font-size: 1rem;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   HF6.1.2.6.2 — WC Blocks Cart / Checkout primary CTA color override.
══════════════════════════════════════════════════════════════════════════
   Owner reported the WC Blocks cart "Proceed to Checkout" button rendered
   in low-contrast mint, sometimes invisible on white bg → conversion risk.
   Classic checkout `.checkout-button` + `#place_order` were already coral
   (lines 326-358 + 1010-1019), but WC Blocks uses a completely different
   markup (`.wc-block-cart__submit-button`, `.wc-block-components-checkout-place-order-button`)
   that didn't match those selectors. Adding the missing selectors here
   forces coral on the Blocks-rendered buttons too. Decorative mint
   (`--sp-primary`) usage elsewhere — borders, hover, badges, email
   header banner — is intentionally LEFT untouched. */
.wc-block-cart__submit-button,
.wp-block-woocommerce-proceed-to-checkout-block button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-button.contained,
.wc-block-mini-cart__footer button,
.wc-block-mini-cart__footer .wp-block-button__link {
	background: var( --sp-accent ) !important;
	background-color: var( --sp-accent ) !important;
	color: var( --sp-white ) !important;
	border: none !important;
	box-shadow: 0 2px 8px rgba( 255, 154, 162, .30 ) !important;
	transition: background .2s ease, transform .2s ease !important;
}

.wc-block-cart__submit-button:hover,
.wp-block-woocommerce-proceed-to-checkout-block button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-button.contained:hover,
.wc-block-mini-cart__footer button:hover,
.wc-block-mini-cart__footer .wp-block-button__link:hover {
	background: var( --sp-accent-dark ) !important;
	background-color: var( --sp-accent-dark ) !important;
	transform: translateY( -1px ) !important;
	box-shadow: 0 4px 12px rgba( 255, 154, 162, .40 ) !important;
}

/* HF6.1.2.12.1 — "View Product" button on category list pages for
   edible-topper products (variation selection happens on the product
   page so silent loop ATC was failing). Same coral CTA styling as
   "Add to Cart" so the visual prominence is preserved. */
.woocommerce ul.products li.product .sp-view-product-btn,
ul.products li.product .sp-view-product-btn {
	background: var( --sp-accent ) !important;
	background-color: var( --sp-accent ) !important;
	color: var( --sp-white ) !important;
	border: none !important;
	padding: .6rem 1.2rem !important;
	border-radius: 6px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	display: inline-block !important;
	box-shadow: 0 2px 8px rgba( 255, 154, 162, .30 ) !important;
	transition: background .2s ease, transform .2s ease !important;
}

.woocommerce ul.products li.product .sp-view-product-btn:hover,
ul.products li.product .sp-view-product-btn:hover {
	background: var( --sp-accent-dark ) !important;
	background-color: var( --sp-accent-dark ) !important;
	transform: translateY( -1px ) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   HF6.1.2.6.4 — Feedback popup styling
══════════════════════════════════════════════════════════════════════════ */
.sp-feedback-popup {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba( 0, 0, 0, 0.5 );
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity .3s ease;
	padding: 16px;
	box-sizing: border-box;
}

.sp-feedback-popup[hidden] {
	display: none !important;
}

.sp-feedback-popup.is-visible {
	opacity: 1;
}

.sp-feedback-popup-content {
	background: #FFFFFF;
	max-width: 480px;
	width: 100%;
	border-radius: 16px;
	padding: 40px 32px 28px;
	text-align: center;
	position: relative;
	box-shadow: 0 16px 48px rgba( 0, 0, 0, .2 );
	transform: translateY( 20px ) scale( .96 );
	transition: transform .3s ease;
}

.sp-feedback-popup.is-visible .sp-feedback-popup-content {
	transform: translateY( 0 ) scale( 1 );
}

.sp-feedback-close {
	position: absolute;
	top: 8px;
	right: 8px;
	background: transparent;
	border: none;
	font-size: 26px;
	color: #999;
	cursor: pointer;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	transition: background .2s ease, color .2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.sp-feedback-close:hover,
.sp-feedback-close:focus {
	background: rgba( 0, 0, 0, .05 );
	color: #333;
	outline: none;
}

.sp-feedback-icon {
	font-size: 44px;
	margin-bottom: 12px;
	line-height: 1;
}

.sp-feedback-popup-content h3 {
	font-size: 20px;
	color: #333;
	margin: 0 0 12px;
	line-height: 1.3;
}

.sp-feedback-popup-content p {
	font-size: 14px;
	color: #666;
	line-height: 1.6;
	margin: 0 0 20px;
}

.sp-feedback-buttons {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.sp-feedback-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border-radius: 6px;
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	color: #FFFFFF !important;
	transition: transform .2s ease;
	flex: 1 1 100px;
	justify-content: center;
}

.sp-feedback-btn:hover {
	transform: translateY( -2px );
	color: #FFFFFF !important;
}

.sp-feedback-btn img {
	width: 24px;
	height: 24px;
	border-radius: 4px;
	display: block;
}

.sp-feedback-btn span {
	color: #FFFFFF;
}

.sp-feedback-btn-fb {
	background: #1877F2;
}

.sp-feedback-btn-ig {
	background: linear-gradient( 45deg, #F58529 0%, #DD2A7B 50%, #8134AF 100% );
}

.sp-feedback-btn-email {
	background: var( --sp-accent, #FF9AA2 );
}

.sp-feedback-btn-email .sp-feedback-btn-icon {
	font-size: 18px;
	line-height: 1;
}

.sp-feedback-fineprint {
	color: #999;
	margin: 8px 0 0 !important;
	font-size: 12px;
}

@media ( max-width: 600px ) {
	.sp-feedback-popup-content {
		padding: 32px 20px 22px;
	}
	.sp-feedback-popup-content h3 {
		font-size: 17px;
	}
	.sp-feedback-popup-content p {
		font-size: 13px;
	}
	.sp-feedback-btn {
		flex: 1 1 100%;
		max-width: 100%;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   HF6.1.2.16 — Google Places `.pac-container` post-selection suppression.
══════════════════════════════════════════════════════════════════════════
   When the customer picks an address from the Google Places dropdown, the
   `setReactValue` write back into the address-1 input fires an `input`
   event. Google's library hears that event and starts a NEW async
   autocomplete query, which completes ~100-300ms later and re-shows the
   panel — so a plain `display:none` from sp-checkout-autocomplete.js gets
   overwritten before the customer can do anything.

   This rule wins via `!important`. The body class is added by
   `onPlaceChanged()` in sp-checkout-autocomplete.js and removed on the
   next real keydown the customer types into the address input — so
   they CAN search again whenever they want, but our React-driven writes
   never re-open the panel uninvited. */
body.sp-pac-suppressed .pac-container {
	display: none !important;
}