/*

	.theme-shop-wrapper.topline{}      
		matches:
		========
		<div class="theme-shop-wrapper topline">
	
	.theme-shop-wrapper .topline{}
		matches:
		========
		<div class="theme-shop-wrapper">
			<div class="topline">This is a child element inside the wrapper</div>
		</div>		




	@scope (.theme-shop-wrapper) {
		:scope.topline,
	}
		matches:
		========
		<div class="theme-shop-wrapper topline">		
		

	@scope (.theme-shop-wrapper) {
		.topline { 
		}
	}
		matches:
		========
		<div class="theme-shop-wrapper">
			<div class="topline">
				Free shipping on orders over $250...
			</div>
		</div>
		
		
	Styles apply to .card, but STOP when they hit any nested .sub-card
	@scope (.card) to (.sub-card) {
		p {
			
		}
	}		
		
		

	@scope (.theme-shop-wrapper) {
		// Style the wrapper when hovered 
		:scope:hover {
			box-shadow: 0 10px 25px rgba(0,0,0,0.1);
		}
		
		// Style children when hovered 
		.card:hover {
			border-color: var(--blue-hi);
		}
	}



	@scope (.theme-shop-wrapper) {
		// Automatically adjust variables if the PHP backend outputs a dark mode flag 
		:scope[data-mode="dark"] {
			--night: #ffffff;
			--ink: #f4f6f9;
			--white: #111b29;
		}
	}

		matches:
		========
		<div class="theme-shop-wrapper" data-mode="<?= htmlspecialchars($currentThemeMode ?? 'light') ?>">
			<div class="topline">Free shipping on orders over $250.</div>
			<!-- Header, cart drawer, and content go here -->
		</div>
		


		Additional examples:
		--------------------
		@scope (.theme-shop-wrapper) {
			// Default baseline variables
			:scope {
				--night: #0f172a;
				--ink: #334155;
				--white: #ffffff;
				--blue: #0284c7;
			}

			// Automatically switches variables when PHP outputs data-mode="dark" 
			:scope[data-mode="dark"] {
				--night: #ffffff;
				--ink: #f4f6f9;
				--white: #0f172a;
				--blue: #38bdf8;
			}

			// Child elements use the variables normally
			.topline {
				background: var(--blue);
				color: var(--white);
			}
			
			.site-header {
				background: var(--night);
				color: var(--ink);
			}
		}





 */



@scope (.theme-notification-wrapper) {
	
	.napa-hdr {
	  --napa-yellow: #fec52e;
	  --napa-navy: #001689;
	  --napa-navy-light: #1d2f96;
	  --napa-navy-border: #3a4aa8;
	  --napa-ink: #1e1e1e;
	  --napa-link: #0a5ba8;
	  --napa-focus: #2f6fed;
	  --napa-container: 1256px;

	  display: block;
	  width: 100%;
	  font-family: "Barlow", "Helvetica Neue", Arial, sans-serif;
	  font-size: 14px;
	  line-height: 1.2;
	  color: var(--napa-ink);
	  text-align: left;
	  -webkit-text-size-adjust: 100%;
	}	
	
	

/* ---- scoped reset ---- */
.napa-hdr, .napa-hdr *, .napa-hdr *::before, .napa-hdr *::after { box-sizing: border-box; }
.napa-hdr :where(div, nav, ul, li, a, span, p, button, input, h1, ol, svg) {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-decoration: none;
  list-style: none;
  letter-spacing: normal;
  text-transform: none;
  text-shadow: none;
  box-shadow: none;
}	
	
	
	
	.topline { background: var(--blue); color: var(--white); font-size: 13px; font-weight: 500; text-align: center; padding: 8px 16px; }
	.topline{
		margin: 0; 
		font-family: "Inter", system-ui, sans-serif; 
	}


	/* ---- promo bar ---- */
	.napa-hdr .napa-hdr__promo {
	  background: var(--napa-yellow);
	  height: 45px;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  gap: 10px;
	  padding: 0 12px;
	  color: var(--napa-navy);
	  white-space: nowrap;
	  overflow: hidden;
	}
	.napa-hdr .napa-hdr__promo-lead {
	  font-family: "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;
	  font-size: 24px;
	  font-weight: 700;
	  color: var(--napa-navy);
	}
	.napa-hdr .napa-hdr__promo-code {
	  font-family: "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;
	  font-size: 24px;
	  font-weight: 700;
	  line-height: 1;
	  color: var(--napa-navy);
	  background: #fff;
	  border: 2px solid var(--napa-navy);
	  border-radius: 4px;
	  padding: 4px 7px;
	}
	.napa-hdr .napa-hdr__promo-fine {
	  font-family: "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;
	  font-size: 12px;
	  font-weight: 600;
	  color: var(--napa-navy);
	  align-self: flex-end;
	  padding-bottom: 8px;
	}
	.napa-hdr .napa-hdr__promo-fine a { text-decoration: underline; color: var(--napa-navy); font-weight: 700; }




}