/* ============================================================
   Sweet Prints — Navigation Styles
   Mobile: Hamburger slide-in drawer
   Desktop (≥ 1024px): Mega-menu for Edible Toppers & Cookie Cutters
   ============================================================ */

/* ── CSS Variables ───────────────────────────────────────────────────────── */
:root {
	--sp-menu-speed:       0.3s;
	--sp-menu-ease:        ease;
	--sp-menu-overlay:     rgba( 0, 0, 0, 0.55 );
	--sp-menu-bg:          #ffffff;
	--sp-menu-border:      #eeeeee;
	--sp-menu-shadow:      0 4px 24px rgba( 0, 0, 0, 0.13 );
	--sp-menu-teal:        #05606B;
	--sp-menu-mint:        #A8DADC;
	--sp-menu-text:        #4A4A4A;
	--sp-touch:            44px;   /* minimum touch target */
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE HEADER — logo left | cart + hamburger right
═══════════════════════════════════════════════════════════════════════════ */

/*
 * Container output via wp_footer, then relocated into .inside-header by JS.
 * Fallback: if JS hasn't moved it, show as fixed in the header area.
 * Hidden on desktop.
 */
.sp-header-right {
	display:     flex;
	align-items: center;
	gap:         0;
	flex-shrink: 0;
	/* Fallback fixed positioning (overridden once JS moves it into .inside-header) */
	position:    fixed;
	top:         8px;
	right:       8px;
	z-index:     9997;
	background:  rgba( 255, 255, 255, 0.92 );
	border-radius: 24px;
	padding:     2px 4px;
	box-shadow:  0 1px 6px rgba( 0,0,0,0.1 );
}

/* Once JS moves hamburger into .inside-header, remove fixed positioning */
.inside-header > .sp-header-right,
.site-header .sp-header-right {
	position:      static;
	background:    transparent;
	border-radius: 0;
	padding:       0;
	box-shadow:    none;
	z-index:       auto;
}

@media ( min-width: 1024px ) {
	.sp-header-right { display: none !important; }
}

/* Mobile cart link */
.sp-header-cart {
	display:         flex;
	align-items:     center;
	justify-content: center;
	position:        relative;
	width:           var( --sp-touch );
	height:          var( --sp-touch );
	text-decoration: none;
	color:           var( --sp-menu-text );
	font-size:       20px;
	-webkit-tap-highlight-color: transparent;
}

.sp-header-cart-badge {
	position:        absolute;
	top:             4px;
	right:           2px;
	min-width:       17px;
	height:          17px;
	background:      #FF9AA2;
	color:           #fff;
	font-size:       10px;
	font-weight:     700;
	border-radius:   9px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         0 4px;
	line-height:     1;
}

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

/* Hamburger button */
.sp-hamburger {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           var( --sp-touch );
	height:          var( --sp-touch );
	background:      none;
	border:          none;
	cursor:          pointer;
	font-size:       22px;
	color:           var( --sp-menu-text );
	padding:         0;
	-webkit-tap-highlight-color: transparent;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE — hide GP desktop nav, show mobile header layout
═══════════════════════════════════════════════════════════════════════════ */

@media ( max-width: 1023px ) {

	/* Hide GP navigation bar completely on mobile */
	.navigation-wrapper,
	#site-navigation,
	.main-navigation,
	.navigation-toggle,
	.nav-toggle,
	.menu-toggle {
		display: none !important;
	}

	/* Hide desktop-only nav icons (cart, wishlist, search) */
	.sp-nav-cart,
	.sp-nav-wishlist,
	.sp-nav-search {
		display: none !important;
	}

	/* Make .inside-header flex so logo and right controls sit side by side */
	.inside-header {
		display:         flex !important;
		align-items:     center !important;
		justify-content: space-between !important;
		padding:         10px 16px !important;
		gap:             8px;
	}

	/* Logo fills remaining space */
	.site-branding,
	.site-logo,
	.site-title,
	.custom-logo-link {
		flex: 1;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   OVERLAY
═══════════════════════════════════════════════════════════════════════════ */

.sp-menu-overlay {
	position:       fixed;
	inset:          0;
	background:     var( --sp-menu-overlay );
	z-index:        99998;
	opacity:        0;
	pointer-events: none;
	transition:     opacity var( --sp-menu-speed ) var( --sp-menu-ease );
}

body.sp-menu-open .sp-menu-overlay {
	opacity:        1;
	pointer-events: all;
}

body.sp-menu-open {
	overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE SLIDE PANEL
═══════════════════════════════════════════════════════════════════════════ */

.sp-mobile-menu {
	position:   fixed;
	top:        0;
	right:      0;
	bottom:     0;
	width:      85%;
	max-width:  380px;
	background: var( --sp-menu-bg );
	z-index:    99999;
	transform:  translateX( 100% );
	transition: transform var( --sp-menu-speed ) var( --sp-menu-ease );
	display:    flex;
	flex-direction: column;
	overflow:   hidden;
	box-shadow: -4px 0 24px rgba( 0, 0, 0, 0.18 );
}

.sp-mobile-menu.sp-panel-open {
	transform: translateX( 0 );
}

/* ── Panel header bar ────────────────────────────────────────────────────── */
.sp-mobile-menu__header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         0 8px 0 16px;
	height:          52px;
	border-bottom:   1px solid var( --sp-menu-border );
	flex-shrink:     0;
	background:      #fafafa;
}

.sp-mobile-menu__brand {
	font-size:   13px;
	font-weight: 600;
	color:       var( --sp-menu-teal );
	letter-spacing: 0.02em;
}

.sp-mobile-menu__close {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           var( --sp-touch );
	height:          var( --sp-touch );
	background:      none;
	border:          none;
	font-size:       20px;
	cursor:          pointer;
	color:           var( --sp-menu-text );
	padding:         0;
	-webkit-tap-highlight-color: transparent;
}

/* ── Panel search ────────────────────────────────────────────────────────── */
.sp-mobile-menu__search {
	display:       flex;
	align-items:   center;
	padding:       12px 14px;
	gap:           8px;
	border-bottom: 1px solid var( --sp-menu-border );
	flex-shrink:   0;
}

.sp-mobile-menu__search-input {
	flex:          1;
	height:        40px;
	padding:       0 14px;
	font-size:     16px;   /* 16px prevents iOS zoom on focus */
	border:        1.5px solid var( --sp-menu-mint );
	border-radius: 20px;
	outline:       none;
	font-family:   inherit;
	color:         var( --sp-menu-text );
	background:    #fff;
	min-width:     0;
}

.sp-mobile-menu__search-input:focus {
	border-color: var( --sp-menu-teal );
	box-shadow:   0 0 0 3px rgba( 168, 218, 220, 0.3 );
}

.sp-mobile-menu__search-btn {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           40px;
	height:          40px;
	flex-shrink:     0;
	background:      var( --sp-menu-mint );
	border:          none;
	border-radius:   50%;
	font-size:       17px;
	cursor:          pointer;
	-webkit-tap-highlight-color: transparent;
}

/* ── Scrollable body ─────────────────────────────────────────────────────── */
.sp-mobile-menu__body {
	flex:                    1;
	overflow-y:              auto;
	-webkit-overflow-scrolling: touch;
}

/* ── Nav list ────────────────────────────────────────────────────────────── */
.sp-mobile-nav {
	list-style: none;
	margin:     0;
	padding:    6px 0;
}

.sp-mobile-nav > li {
	margin:  0;
	padding: 0;
}

/* Direct link items */
.sp-mobile-nav__link {
	display:     flex;
	align-items: center;
	gap:         10px;
	padding:     0 20px;
	height:      50px;
	font-size:   16px;
	font-weight: 500;
	color:       var( --sp-menu-text );
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	transition:  background 0.15s, color 0.15s;
}

.sp-mobile-nav__link:hover,
.sp-mobile-nav__link:focus {
	background: #f0fafb;
	color:      var( --sp-menu-teal );
}

.sp-mobile-nav__icon {
	font-size:  18px;
	flex-shrink: 0;
}

/* Accordion trigger button */
.sp-mobile-acc-btn {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	width:           100%;
	height:          50px;
	padding:         0 20px;
	font-size:       16px;
	font-weight:     500;
	color:           var( --sp-menu-text );
	background:      none;
	border:          none;
	cursor:          pointer;
	text-align:      left;
	font-family:     inherit;
	-webkit-tap-highlight-color: transparent;
	transition:      background 0.15s, color 0.15s;
}

.sp-mobile-acc-btn:hover,
.sp-mobile-acc-btn:focus {
	background: #f0fafb;
	color:      var( --sp-menu-teal );
}

/* Chevron: rotates when open */
.sp-mobile-acc-chevron {
	font-style: normal;
	font-size:  11px;
	color:      #999;
	transition: transform var( --sp-menu-speed ) var( --sp-menu-ease );
	flex-shrink: 0;
}

.sp-mobile-acc-btn[aria-expanded="true"] .sp-mobile-acc-chevron {
	transform: rotate( 180deg );
}

/* Accordion panel: slide open/close */
.sp-mobile-acc-panel {
	max-height: 0;
	overflow:   hidden;
	background: #f8f9f9;
	transition: max-height 0.35s ease;
}

.sp-mobile-acc-panel.sp-acc-open {
	max-height: 700px;
}

/* Scoped search inside accordion */
.sp-mobile-acc__search {
	display:       flex;
	align-items:   center;
	gap:           8px;
	padding:       10px 14px;
	border-bottom: 1px solid var( --sp-menu-border );
}

.sp-mobile-acc__search-input {
	flex:          1;
	height:        36px;
	padding:       0 12px;
	font-size:     15px;
	border:        1.5px solid var( --sp-menu-mint );
	border-radius: 18px;
	outline:       none;
	font-family:   inherit;
	background:    #fff;
	min-width:     0;
}

.sp-mobile-acc__search-input:focus {
	border-color: var( --sp-menu-teal );
}

.sp-mobile-acc__search-btn {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           36px;
	height:          36px;
	flex-shrink:     0;
	background:      var( --sp-menu-mint );
	border:          none;
	border-radius:   50%;
	font-size:       15px;
	cursor:          pointer;
}

/* Category list inside accordion */
.sp-mobile-acc__list {
	list-style: none;
	margin:     0;
	padding:    6px 0;
}

.sp-mobile-acc__list li {
	margin: 0;
}

.sp-mobile-acc__cat-link {
	display:     block;
	padding:     9px 20px 9px 36px;
	font-size:   14px;
	color:       var( --sp-menu-text );
	text-decoration: none;
	transition:  background 0.12s, color 0.12s;
}

.sp-mobile-acc__cat-link:hover,
.sp-mobile-acc__cat-link:focus {
	background: #edf6f7;
	color:      var( --sp-menu-teal );
}

.sp-mobile-acc__view-all {
	display:       block;
	padding:       11px 20px 11px 36px;
	font-size:     13px;
	font-weight:   600;
	color:         var( --sp-menu-teal );
	text-decoration: none;
	border-top:    1px solid var( --sp-menu-border );
}

.sp-mobile-acc__view-all:hover {
	text-decoration: underline;
}

/* Separator line */
.sp-mobile-nav__sep {
	height:     1px;
	background: var( --sp-menu-border );
	margin:     6px 20px;
}

/* ── Panel footer: social links ──────────────────────────────────────────── */
.sp-mobile-menu__footer {
	flex-shrink:   0;
	padding:       14px 16px;
	border-top:    1px solid var( --sp-menu-border );
	display:       flex;
	flex-wrap:     wrap;
	gap:           10px;
	background:    #fafafa;
}

.sp-mobile-social-link {
	display:         inline-flex;
	align-items:     center;
	gap:             6px;
	padding:         8px 14px;
	border-radius:   20px;
	font-size:       13px;
	font-weight:     500;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	transition:      opacity 0.15s;
}

.sp-mobile-social-link:hover { opacity: 0.8; }

.sp-mobile-social-link--fb {
	background: #e8f4fd;
	color:      #1877f2;
}

.sp-mobile-social-link--ig {
	background: #fce8f3;
	color:      #c13584;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DESKTOP MEGA-MENU  (≥ 1024px)
═══════════════════════════════════════════════════════════════════════════ */

@media ( min-width: 1024px ) {

	/* Hide mobile-only elements on desktop */
	.sp-mobile-menu,
	.sp-menu-overlay,
	.sp-header-right {
		display: none !important;
	}

	/* Give the nav container a stacking context so panels position relative to it */
	.inside-navigation {
		position: relative;
	}

	/* Mark nav items that own a mega-menu */
	.sp-has-megamenu {
		position: static !important;  /* override any GP relative pos */
	}

	.sp-has-megamenu > a {
		transition: color 0.2s;
	}

	.sp-has-megamenu.sp-mm-active > a {
		color: var( --sp-menu-teal ) !important;
	}

	/* Suppress GP's sub-menu and dropdown arrow for mega-menu items */
	.sp-has-megamenu > ul.sub-menu {
		display: none !important;
	}

	.sp-has-megamenu > .dropdown-menu-toggle,
	.sp-has-megamenu > a > .dropdown-menu-toggle,
	.sp-has-megamenu .dropdown-menu-toggle,
	.sp-has-megamenu > a::after {
		display: none !important;
	}

	/* ── Mega-menu panel ─────────────────────────────────────────────────── */
	.sp-megamenu {
		position:       absolute;
		top:            100%;
		left:           0;
		right:          0;
		background:     #ffffff;
		border-top:     3px solid var( --sp-menu-mint );
		box-shadow:     var( --sp-menu-shadow );
		z-index:        9999;
		opacity:        0;
		transform:      translateY( -8px );
		pointer-events: none;
		transition:     opacity 0.2s ease, transform 0.2s ease;
		border-radius:  0 0 12px 12px;
	}

	.sp-megamenu.sp-mm-visible {
		opacity:        1;
		transform:      translateY( 0 );
		pointer-events: all;
	}

	/* ── Inner layout: 3 columns ─────────────────────────────────────────── */
	.sp-megamenu__inner {
		display:               grid;
		grid-template-columns: 40% 30% 30%;
		max-width:             1200px;
		margin:                0 auto;
	}

	.sp-megamenu__col {
		padding: 22px 24px;
	}

	.sp-megamenu__col + .sp-megamenu__col {
		border-left: 1px solid #f0f0f0;
	}

	.sp-megamenu__col-title {
		margin:          0 0 12px;
		font-size:       11px;
		font-weight:     700;
		text-transform:  uppercase;
		letter-spacing:  0.08em;
		color:           var( --sp-menu-teal );
		padding-bottom:  8px;
		border-bottom:   2px solid var( --sp-menu-mint );
	}

	/* Featured product links (above category grid) */
	.sp-megamenu__featured {
		margin-bottom:  12px;
	}

	.sp-megamenu__featured-link {
		display:         inline-block;
		padding:         8px 16px;
		background:      var( --sp-menu-mint );
		color:           var( --sp-menu-teal );
		font-weight:     600;
		font-size:       13px;
		border-radius:   6px;
		text-decoration: none;
		transition:      background 0.15s, color 0.15s;
		margin-right:    8px;
		margin-bottom:   6px;
	}

	.sp-megamenu__featured-link:hover,
	.sp-megamenu__featured-link:focus {
		background: var( --sp-menu-teal );
		color:      #fff;
	}

	/* Category grid (2 cols) */
	.sp-megamenu__cat-list {
		list-style:            none;
		margin:                0;
		padding:               0;
		display:               grid;
		grid-template-columns: 1fr 1fr;
		gap:                   1px 12px;
	}

	.sp-megamenu__cat-list li { margin: 0; }

	.sp-megamenu__cat-link {
		display:         block;
		padding:         5px 2px;
		font-size:       13px;
		color:           var( --sp-menu-text );
		text-decoration: none;
		white-space:     nowrap;
		overflow:        hidden;
		text-overflow:   ellipsis;
		transition:      color 0.12s;
	}

	.sp-megamenu__cat-link:hover,
	.sp-megamenu__cat-link:focus {
		color: var( --sp-menu-teal );
	}

	/* Search col */
	.sp-megamenu__search-label {
		display:     block;
		font-size:   12px;
		color:       #888;
		margin-bottom: 10px;
	}

	.sp-megamenu__search-wrap {
		position: relative;
		margin-bottom: 12px;
	}

	.sp-megamenu__search-input {
		width:         100%;
		height:        42px;
		padding:       0 42px 0 14px;
		font-size:     14px;
		border:        1.5px solid var( --sp-menu-mint );
		border-radius: 21px;
		outline:       none;
		font-family:   inherit;
		color:         var( --sp-menu-text );
		box-sizing:    border-box;
		transition:    border-color 0.2s, box-shadow 0.2s;
	}

	.sp-megamenu__search-input:focus {
		border-color: var( --sp-menu-teal );
		box-shadow:   0 0 0 3px rgba( 168, 218, 220, 0.3 );
	}

	.sp-megamenu__search-btn {
		position:   absolute;
		right:      8px;
		top:        50%;
		transform:  translateY( -50% );
		background: none;
		border:     none;
		font-size:  16px;
		cursor:     pointer;
		padding:    4px 6px;
		color:      var( --sp-menu-teal );
	}

	/* Promo cards */
	.sp-megamenu__promo-cards {
		display:        flex;
		flex-direction: column;
		gap:            10px;
	}

	.sp-megamenu__promo-card {
		display:         flex;
		align-items:     center;
		gap:             12px;
		padding:         10px;
		border-radius:   8px;
		background:      #f8f9fa;
		border:          1px solid #eee;
		text-decoration: none;
		transition:      background 0.15s, box-shadow 0.15s;
	}

	.sp-megamenu__promo-card:hover {
		background:  #edf6f7;
		box-shadow:  0 2px 8px rgba( 0,0,0,0.08 );
	}

	.sp-megamenu__promo-thumb {
		width:         54px;
		height:        54px;
		border-radius: 6px;
		background:    #e2f2f3;
		flex-shrink:   0;
		display:       flex;
		align-items:   center;
		justify-content: center;
		font-size:     24px;
		overflow:      hidden;
	}

	.sp-megamenu__promo-thumb img {
		width:      100%;
		height:     100%;
		object-fit: cover;
	}

	.sp-megamenu__promo-body {}

	.sp-megamenu__promo-title {
		display:     block;
		font-size:   13px;
		font-weight: 600;
		color:       var( --sp-menu-text );
		margin-bottom: 2px;
	}

	.sp-megamenu__promo-sub {
		display:   block;
		font-size: 11px;
		color:     #999;
	}

	/* Footer bar — centered pill button, generous spacing */
	.sp-megamenu__footer {
		background:    #f6fbfb;
		border-top:    1px solid #f0f0f0;
		padding:       22px 24px 26px;
		border-radius: 0 0 12px 12px;
		text-align:    center;
	}

	.sp-megamenu__view-all {
		display:         inline-block;
		padding:         12px 28px;
		background:      var( --sp-menu-mint );
		color:           var( --sp-menu-teal );
		font-size:       15px;
		font-weight:     700;
		text-decoration: none;
		border-radius:   24px;
		transition:      transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
		box-shadow:      0 1px 4px rgba( 0, 0, 0, 0.06 );
	}

	.sp-megamenu__view-all:hover,
	.sp-megamenu__view-all:focus {
		transform:     scale( 1.03 );
		box-shadow:    0 4px 14px rgba( 168, 218, 220, 0.45 );
		background:    var( --sp-menu-teal );
		color:         #fff;
	}

} /* end @media ≥ 1024px */

/* ═══════════════════════════════════════════════════════════════════════════
   ADMIN: Top Categories settings page
═══════════════════════════════════════════════════════════════════════════ */

.sp-menu-admin-wrap { max-width: 800px; }
.sp-menu-admin-wrap h2 { font-size: 1.1em; margin: 1.4em 0 .4em; }
.sp-menu-admin-wrap textarea {
	width: 100%;
	font-family: monospace;
	font-size: 13px;
	line-height: 1.6;
}
.sp-menu-admin-wrap .description { font-size: 12px; color: #666; margin-top: 4px; }