/* ==========================================================================
   CrazySneak — Shared styles for FAQ / Shipping / Contact info pages.
   Loaded only when body.csn-info-page is present (see csn_enqueue_assets).
   Mobile-first; desktop overrides at >=768px.
   ========================================================================== */

/* --- Page shell ----------------------------------------------------------- */
.csn-info-shell {
	position: relative;
	background: var(--bg);
	min-height: 100%;
	display: flex;
	flex-direction: column;
	color: var(--fg);
	font-family: var(--cs-font-sans);
}

/* --- Announcement bar ----------------------------------------------------- */
.csn-announcement {
	background: #1A1412;
	color: #fff;
	text-align: center;
	padding: 8px 16px;
	font-family: var(--cs-font-sans);
	font-size: 11.5px;
	letter-spacing: .02em;
}
.csn-announcement__sep { opacity: .5; margin: 0 4px; }
.csn-announcement__dot {
	/* MIUI Chrome workaround: drop border-radius:50% (no SVG child but the corner-clipping path
	   still creates a compositor layer that can interact with sticky/repeated patterns). */
	display: inline-block;
	width: 6px; height: 6px;
	background: var(--cs-urgent);
	-webkit-mask-image: radial-gradient(circle, #000 50%, transparent 51%);
	mask-image: radial-gradient(circle, #000 50%, transparent 51%);
	margin-right: 6px;
	vertical-align: middle;
}
@media (min-width: 768px) {
	.csn-announcement { padding: 9px 16px; font-size: 12px; }
}

/* --- Info header ---------------------------------------------------------- */
.csn-info-header__bar {
	display: grid;
	grid-template-columns: 60px 1fr 90px;
	align-items: center;
	padding: 14px 16px;
	background: var(--card);
	border-bottom: 1px solid rgba(26,20,18,.09);
	position: sticky;
	top: 0;
	z-index: 10;
}
@media (min-width: 768px) {
	.csn-info-header__bar {
		grid-template-columns: 1fr auto 1fr;
		padding: 18px 40px;
	}
}
.csn-info-header__menu {
	background: none; border: none; padding: 0;
	cursor: pointer;
	justify-self: start;
	display: inline-flex;
	color: var(--fg);
}
@media (min-width: 768px) {
	.csn-info-header__menu { display: none; }
}
.csn-info-header__nav {
	display: none;
}
@media (min-width: 768px) {
	.csn-info-header__nav {
		display: flex;
		gap: 26px;
		font-size: 13px;
		font-weight: 500;
		color: var(--fg);
	}
	.csn-info-header__nav a { color: inherit; text-decoration: none; }
}
.csn-info-header__logo {
	text-align: center;
	font-family: var(--cs-font-serif);
	font-size: 24px;
	letter-spacing: -0.01em;
	color: var(--fg);
	font-weight: 500;
	text-decoration: none;
}
.csn-info-header__logo em { font-style: italic; font-weight: 400; }
@media (min-width: 768px) {
	.csn-info-header__logo { font-size: 28px; }
}
.csn-info-header__icons {
	display: flex;
	gap: 14px;
	justify-self: end;
	align-items: center;
	color: var(--fg);
}
@media (min-width: 768px) {
	.csn-info-header__icons { gap: 18px; }
}

/* --- Info footer ---------------------------------------------------------- */
.csn-info-footer {
	background: #1A1412;
	color: #F6F1EA;
	padding: 36px 20px 32px;
}
@media (min-width: 768px) {
	.csn-info-footer { padding: 56px 40px 40px; }
}
.csn-info-footer__top {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	padding-bottom: 28px;
	border-bottom: 1px solid rgba(246,241,234,.12);
}
@media (min-width: 768px) {
	.csn-info-footer__top {
		grid-template-columns: 1.2fr 1fr 1fr 1fr;
		gap: 32px;
		padding-bottom: 40px;
	}
}
.csn-info-footer__brand-logo {
	font-family: var(--cs-font-serif);
	font-size: 28px;
	margin-bottom: 10px;
	font-weight: 500;
}
.csn-info-footer__brand-logo em { font-style: italic; font-weight: 400; }
.csn-info-footer__tagline {
	font-size: 12.5px;
	color: rgba(246,241,234,.6);
	line-height: 1.6;
	max-width: 260px;
}
.csn-info-footer__contact {
	margin-top: 16px;
	font-size: 12px;
	color: rgba(246,241,234,.55);
	line-height: 1.6;
}
.csn-info-footer__contact a { color: var(--accent); text-decoration: none; }
.csn-info-footer__col-heading {
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--accent);
	margin-bottom: 14px;
}
.csn-info-footer__col-links {
	display: flex;
	flex-direction: column;
	gap: 10px;
	list-style: none;
	padding: 0;
	margin: 0;
}
.csn-info-footer__col-links a {
	font-size: 13px;
	color: rgba(246,241,234,.75);
	text-decoration: none;
}
.csn-info-footer__bottom {
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 10px;
	font-size: 10.5px;
	color: rgba(246,241,234,.45);
}
@media (min-width: 768px) {
	.csn-info-footer__bottom { flex-direction: row; }
}
.csn-info-footer__legal {
	display: flex;
	gap: 14px;
}
.csn-info-footer__legal a { color: inherit; text-decoration: none; }

/* --- Hero (shared by all 3 pages) ----------------------------------------- */
.csn-hero {
	text-align: center;
	background: var(--bg);
	position: relative;
	overflow: hidden;
	padding: 44px 20px 36px;
}
@media (min-width: 768px) {
	.csn-hero { padding: 72px 40px 56px; }
}
.csn-hero__pattern {
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(
		135deg,
		rgba(26,20,18,.035) 0,
		rgba(26,20,18,.035) 1px,
		transparent 1px,
		transparent 14px
	);
	pointer-events: none;
}
.csn-hero__inner {
	position: relative;
	max-width: 720px;
	margin: 0 auto;
}

/* --- Section eyebrow / heading utilities ---------------------------------- */
.csn-eyebrow {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--accent);
	margin-bottom: 14px;
}
.csn-h1 {
	font-family: var(--cs-font-serif);
	font-size: 36px;
	line-height: 1.05;
	letter-spacing: -.01em;
	color: var(--fg);
	margin: 0;
	font-weight: 500;
}
@media (min-width: 768px) {
	.csn-h1 { font-size: 56px; }
}
.csn-h2 {
	font-family: var(--cs-font-serif);
	font-size: 28px;
	line-height: 1.1;
	letter-spacing: -.01em;
	color: var(--fg);
	margin: 0;
	font-weight: 500;
}
@media (min-width: 768px) {
	.csn-h2 { font-size: 38px; }
}
.csn-h3 {
	font-family: var(--cs-font-serif);
	font-size: 22px;
	line-height: 1.25;
	letter-spacing: -.01em;
	color: var(--fg);
	margin: 0;
	font-weight: 500;
}
@media (min-width: 768px) {
	.csn-h3 { font-size: 28px; }
}
.csn-italic-accent {
	font-family: var(--cs-font-serif);
	font-style: italic;
	color: var(--accent);
	font-weight: 500;
}
.csn-sub {
	font-family: var(--cs-font-serif);
	font-style: italic;
	font-size: 16px;
	color: rgba(26,20,18,.65);
	line-height: 1.45;
	max-width: 520px;
	margin: 14px auto 0;
}
@media (min-width: 768px) {
	.csn-sub { font-size: 20px; margin-top: 18px; }
}

/* --- Pill button (used everywhere) ---------------------------------------- */
.csn-btn {
	font-family: var(--cs-font-sans);
	font-weight: 600;
	letter-spacing: .01em;
	border-radius: 100px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 22px;
	font-size: 14px;
	transition: opacity 220ms var(--cs-ease), transform 140ms var(--cs-ease);
	border: 1.5px solid transparent;
	text-decoration: none;
	line-height: 1;
}
.csn-btn:hover { opacity: .92; }
.csn-btn:active { transform: scale(.98); }
.csn-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.csn-btn--full { width: 100%; }
.csn-btn--sm { padding: 10px 16px; font-size: 12px; }
.csn-btn--lg { padding: 16px 24px; font-size: 15px; }
.csn-btn--primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.csn-btn--dark { background: #1A1412; color: #fff; border-color: #1A1412; }
.csn-btn--secondary { background: transparent; color: var(--fg); border-color: var(--fg); }
.csn-btn--ghost { background: transparent; color: var(--fg); border-color: rgba(26,20,18,.18); }
.csn-btn--gold-on-dark { background: var(--accent); color: #fff; border-color: var(--accent); }
.csn-btn--secondary-on-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }

/* --- Inline pill (link-style chip used in StillQuestions) ----------------- */
.csn-inline-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 16px;
	background: var(--card);
	border: 1px solid rgba(26,20,18,.09);
	border-radius: 100px;
	font-size: 13px;
	font-weight: 600;
	color: var(--fg);
	text-decoration: none;
}

/* --- Cross-link bar ------------------------------------------------------- */
.csn-cross-links {
	padding: 36px 20px 40px;
	background: var(--bg);
}
@media (min-width: 768px) {
	.csn-cross-links { padding: 48px 40px 56px; }
}
.csn-cross-links__eyebrow-wrap {
	text-align: center;
	margin-bottom: 18px;
}
@media (min-width: 768px) {
	.csn-cross-links__eyebrow-wrap { margin-bottom: 24px; }
}
.csn-cross-links__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	max-width: 780px;
	margin: 0 auto;
}
@media (min-width: 768px) {
	.csn-cross-links__grid { grid-template-columns: 1fr 1fr; }
}
.csn-cross-card {
	background: var(--card);
	border-radius: 16px;
	padding: 18px;
	border: 1px solid rgba(26,20,18,.08);
	display: flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 220ms var(--cs-ease), transform 220ms var(--cs-ease);
}
.csn-cross-card:hover {
	box-shadow: 0 6px 20px rgba(26,20,18,.08);
	transform: translateY(-2px);
}
.csn-cross-card__icon {
	width: 44px; height: 44px;
	border-radius: 12px;
	flex-shrink: 0;
	background: var(--accent-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--accent);
}
.csn-cross-card__body { flex: 1; min-width: 0; }
.csn-cross-card__title {
	font-family: var(--cs-font-serif);
	font-size: 18px;
	font-weight: 600;
	color: var(--fg);
	line-height: 1.2;
}
.csn-cross-card__teaser {
	font-size: 12.5px;
	color: rgba(26,20,18,.6);
	line-height: 1.4;
	margin-top: 2px;
}
.csn-cross-card__arrow { color: var(--accent); flex-shrink: 0; }

/* --- Still have questions block ------------------------------------------ */
.csn-still {
	padding: 36px 20px 48px;
	background: var(--bg-alt);
}
@media (min-width: 768px) {
	.csn-still { padding: 56px 40px 72px; }
}
.csn-still__inner {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
}
.csn-still__sub {
	font-size: 14px;
	color: rgba(26,20,18,.65);
	line-height: 1.55;
	margin: 14px 0 22px;
}
@media (min-width: 768px) {
	.csn-still__sub { font-size: 15px; }
}
.csn-still__links {
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}
@media (min-width: 768px) {
	.csn-still__links { gap: 12px; }
}

/* --- FAQ accordion (consumed by FAQ groups; CSS lives here so drawer can also use it) --- */
.csn-accordion {
	/* MIUI Chrome workaround: rounded frame on ::before, children stay on top */
	position: relative;
}
.csn-accordion::before {
	content: ""; position: absolute; inset: 0;
	border-radius: 16px; background: var(--card); border: 1px solid rgba(26,20,18,.08); z-index: 0;
}
.csn-accordion > * { position: relative; z-index: 1; }
.csn-accordion__row {
	border-bottom: 1px solid rgba(26,20,18,.07);
}
.csn-accordion__row:last-child { border-bottom: none; }
.csn-accordion__btn {
	width: 100%;
	background: none;
	border: none;
	cursor: pointer;
	padding: 18px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-align: left;
	gap: 16px;
	font-family: var(--cs-font-sans);
	color: var(--fg);
}
.csn-accordion__q {
	font-family: var(--cs-font-serif);
	font-size: 18px;
	font-weight: 500;
	color: var(--fg);
	line-height: 1.25;
}
.csn-accordion__toggle {
	/* MIUI Chrome bug workaround */
	position: relative;
	width: 28px; height: 28px;
	color: var(--accent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: color var(--cs-dur-fast) var(--cs-ease);
}
.csn-accordion__toggle::before {
	content: ""; position: absolute; inset: 0;
	border-radius: 50%; background: var(--accent-soft); z-index: 0;
	transition: background var(--cs-dur-fast) var(--cs-ease);
}
.csn-accordion__toggle > * { position: relative; z-index: 1; }
.csn-accordion__row[data-open="1"] .csn-accordion__toggle {
	background: var(--accent);
	color: #fff;
}
.csn-accordion__answer {
	display: none;
	max-width: 900px;
	padding: 0 18px 20px;
	font-size: 13.5px;
	line-height: 1.65;
	color: var(--body-text);
}
.csn-accordion__answer p { margin: 0 0 .75em; }
.csn-accordion__answer p:last-child { margin-bottom: 0; }
.csn-accordion__answer a { color: var(--accent); font-weight: 600; }
.csn-accordion__row[data-open="1"] .csn-accordion__answer { display: block; }

/* --- Helpers -------------------------------------------------------------- */
.csn-no-scrollbar::-webkit-scrollbar { display: none; }
.csn-no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.csn-sr-only {
	position: absolute !important; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}
/* --- Announcement bar viewport variants --- */
.csn-announcement--desktop { display: none; }
@media (min-width: 768px) {
	.csn-announcement--mobile { display: none; }
	.csn-announcement--desktop { display: flex; align-items: center; justify-content: center; gap: 8px; }
}


/* --- Focus + hover interaction states --------------------------------- */
/* Accessibility: suppress browser default focus outline (usually blue) on mouse click,
   but preserve keyboard-only focus via :focus-visible with brand-colored ring. */
body.csn-info-page a:focus, body.csn-product-page a:focus,
body.csn-info-page button:focus, body.csn-product-page button:focus,
body.csn-info-page input:focus, body.csn-product-page input:focus,
body.csn-info-page select:focus, body.csn-product-page select:focus,
body.csn-info-page textarea:focus, body.csn-product-page textarea:focus,
body.csn-info-page [role="button"]:focus, body.csn-product-page [role="button"]:focus,
body.csn-info-page [role="tab"]:focus , body.csn-product-page [role="tab"]:focus { outline: none; }

body.csn-info-page a:focus-visible, body.csn-product-page a:focus-visible,
body.csn-info-page button:focus-visible, body.csn-product-page button:focus-visible,
body.csn-info-page [role="button"]:focus-visible, body.csn-product-page [role="button"]:focus-visible,
body.csn-info-page [role="tab"]:focus-visible , body.csn-product-page [role="tab"]:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* Form inputs already have a custom focus state (accent border + box-shadow) — don't layer an outline on top */
body.csn-info-page input:focus-visible, body.csn-product-page input:focus-visible,
body.csn-info-page select:focus-visible, body.csn-product-page select:focus-visible,
body.csn-info-page textarea:focus-visible , body.csn-product-page textarea:focus-visible { outline: none; }

/* Hover polish on elements without explicit hover */
body.csn-info-page .csn-accordion__btn:hover .csn-accordion__toggle , body.csn-product-page .csn-accordion__btn:hover .csn-accordion__toggle { background: rgba(181,139,91,.4); }
body.csn-info-page .csn-method-card__cta:hover , body.csn-product-page .csn-method-card__cta:hover { text-decoration: underline; }
body.csn-info-page .csn-faq-chip:hover:not(.is-active) , body.csn-product-page .csn-faq-chip:hover:not(.is-active) { border-color: rgba(26,20,18,.3); }

/* Reading-width caps — narrow ONLY where typographic line-length matters.
   Everything else extends full-bleed to match home-page pattern. */
.csn-hero__inner { max-width: none; }
.csn-sub { max-width: 640px; }
.csn-info-footer__tagline { max-width: 260px; }
/* Override Block D original caps on shared wrappers to extend full-bleed */
.csn-cross-links__grid { max-width: none; }
.csn-still__inner { max-width: none; }

/* =========================================================================
   ROUND 2 — Kill blue interaction states (Fix B)
   Astra parent theme sets --ast-global-color-0 to blue and applies it via
   low-specificity selectors. We force our brand palette with higher
   specificity + !important where Astra wins the cascade otherwise.
   ========================================================================= */

body.csn-info-page, body.csn-product-page,
body.csn-info-page * , body.csn-product-page * {
	-webkit-tap-highlight-color: transparent;
}

/* FAQ chips — base / hover / active */
body.csn-info-page .csn-faq-chip, body.csn-product-page .csn-faq-chip,
body.csn-info-page .csn-faq-chip:link, body.csn-product-page .csn-faq-chip:link,
body.csn-info-page .csn-faq-chip:visited , body.csn-product-page .csn-faq-chip:visited {
	color: var(--fg) !important;
	border-color: rgba(26,20,18,0.15) !important;
	background: transparent !important;
}
body.csn-info-page .csn-faq-chip:hover , body.csn-product-page .csn-faq-chip:hover {
	color: var(--fg) !important;
	border-color: rgba(26,20,18,0.35) !important;
	background: rgba(26,20,18,0.03) !important;
}
body.csn-info-page .csn-faq-chip.is-active , body.csn-product-page .csn-faq-chip.is-active {
	color: var(--bg) !important;
	background: var(--fg) !important;
	border-color: var(--fg) !important;
}

/* Accordion buttons — explicit hover / aria-expanded / active */
body.csn-info-page .csn-accordion__btn , body.csn-product-page .csn-accordion__btn {
	color: var(--fg) !important;
	background: transparent !important;
}
body.csn-info-page .csn-accordion__btn:hover , body.csn-product-page .csn-accordion__btn:hover {
	background: rgba(181,139,91,0.04) !important;
}
body.csn-info-page .csn-accordion__btn[aria-expanded="true"] , body.csn-product-page .csn-accordion__btn[aria-expanded="true"] {
	background: transparent !important;
	color: var(--fg) !important;
}
body.csn-info-page .csn-accordion__btn:active , body.csn-product-page .csn-accordion__btn:active {
	background: rgba(181,139,91,0.08) !important;
}

/* Drawer close / drawer tabs / method card CTAs */
body.csn-info-page .csn-drawer__close, body.csn-product-page .csn-drawer__close,
body.csn-info-page .csn-drawer__tab, body.csn-product-page .csn-drawer__tab,
body.csn-info-page .csn-method-card__cta , body.csn-product-page .csn-method-card__cta {
	color: var(--fg) !important;
	background: transparent !important;
}
body.csn-info-page .csn-drawer__tab.is-active , body.csn-product-page .csn-drawer__tab.is-active {
	background: var(--fg) !important;
	color: var(--bg) !important;
}

/* CF7 submit — Astra tries to restyle this too */
body.csn-info-page .wpcf7 input[type="submit"] , body.csn-product-page .wpcf7 input[type="submit"] {
	background: var(--fg) !important;
	color: var(--bg) !important;
	border: none !important;
}
body.csn-info-page .wpcf7 input[type="submit"]:hover , body.csn-product-page .wpcf7 input[type="submit"]:hover {
	opacity: 0.92 !important;
}

/* Generic links INSIDE content shell — brand accent. Scoped to .csn-info-shell
   so Astra header/footer nav (inside same .csn-info-shell) gets an explicit override below. */
body.csn-info-page .csn-info-shell a:not(.csn-btn):not(.csn-faq-chip):not(.csn-method-card__cta):not(.csn-accordion__btn):not(.csn-drawer__close):not(.csn-drawer__tab) , body.csn-product-page .csn-info-shell a:not(.csn-btn):not(.csn-faq-chip):not(.csn-method-card__cta):not(.csn-accordion__btn):not(.csn-drawer__close):not(.csn-drawer__tab) {
	color: var(--accent);
}
body.csn-info-page .csn-info-shell a:not(.csn-btn):not(.csn-faq-chip):not(.csn-method-card__cta):not(.csn-accordion__btn):not(.csn-drawer__close):not(.csn-drawer__tab):hover , body.csn-product-page .csn-info-shell a:not(.csn-btn):not(.csn-faq-chip):not(.csn-method-card__cta):not(.csn-accordion__btn):not(.csn-drawer__close):not(.csn-drawer__tab):hover {
	color: var(--fg);
}

/* =========================================================================
   ROUND 4 — Header + footer link colors per design (Shared.jsx)
   Header (light bg): dark links, gold on hover.
   Footer (dark bg): per-design cream variants — col heading gold,
   col links 75%, brand-contact 55%, insta handle gold, legal 45%, hover gold.
   ========================================================================= */

/* Header — light bg */
body.csn-info-page .csn-info-header a, body.csn-product-page .csn-info-header a,
body.csn-info-page .csn-info-header a:link, body.csn-product-page .csn-info-header a:link,
body.csn-info-page .csn-info-header a:visited , body.csn-product-page .csn-info-header a:visited {
	color: var(--fg) !important;
}
body.csn-info-page .csn-info-header a:hover , body.csn-product-page .csn-info-header a:hover {
	color: var(--accent) !important;
}

/* Footer — dark bg, design values from Shared.jsx */
/* Column heading = gold (Shared.jsx:109) */
body.csn-info-page .csn-info-footer__col-heading , body.csn-product-page .csn-info-footer__col-heading {
	color: var(--accent) !important;
}
/* Column links = cream 75% (Shared.jsx:112) */
body.csn-info-page .csn-info-footer__top a, body.csn-product-page .csn-info-footer__top a,
body.csn-info-page .csn-info-footer__top a:link, body.csn-product-page .csn-info-footer__top a:link,
body.csn-info-page .csn-info-footer__top a:visited , body.csn-product-page .csn-info-footer__top a:visited {
	color: rgba(246,241,234,0.75) !important;
}
/* Brand contact block = cream 55% (Shared.jsx:102) */
body.csn-info-page .csn-info-footer__contact , body.csn-product-page .csn-info-footer__contact {
	color: rgba(246,241,234,0.55) !important;
}
body.csn-info-page .csn-info-footer__contact a , body.csn-product-page .csn-info-footer__contact a {
	color: inherit !important;
}
/* Insta @handle inside contact block = gold (Shared.jsx:104) */
body.csn-info-page .csn-info-footer__contact a[href*="instagram"] , body.csn-product-page .csn-info-footer__contact a[href*="instagram"] {
	color: var(--accent) !important;
}
/* Bottom row (imprint + legal) = cream 45% (Shared.jsx:124) */
body.csn-info-page .csn-info-footer__bottom, body.csn-product-page .csn-info-footer__bottom,
body.csn-info-page .csn-info-footer__bottom a, body.csn-product-page .csn-info-footer__bottom a,
body.csn-info-page .csn-info-footer__bottom a:link, body.csn-product-page .csn-info-footer__bottom a:link,
body.csn-info-page .csn-info-footer__bottom a:visited , body.csn-product-page .csn-info-footer__bottom a:visited {
	color: rgba(246,241,234,0.45) !important;
}
/* Hover = gold (our conservative addition; design was silent on hover) */
body.csn-info-page .csn-info-footer a:hover , body.csn-product-page .csn-info-footer a:hover {
	color: var(--accent) !important;
}

/* =========================================================================
   ROUND 3 — Accordion divider restore (Fix C)
   Line between closed rows; no line around an open row.
   DOM: .csn-accordion > .csn-accordion__row[data-open="0|1"] > .csn-accordion__btn
   Uses :has() for the "row immediately before an open row" case (91%+ browser
   support as of 2026; older browsers silently see all borders — harmless).
   ========================================================================= */
body.csn-info-page .csn-accordion__row , body.csn-product-page .csn-accordion__row {
	border-bottom: 1px solid rgba(26,20,18,0.08);
}
body.csn-info-page .csn-accordion__row:last-child , body.csn-product-page .csn-accordion__row:last-child {
	border-bottom: none;
}
body.csn-info-page .csn-accordion__row[data-open="1"] , body.csn-product-page .csn-accordion__row[data-open="1"] {
	border-bottom: none;
}
body.csn-info-page .csn-accordion__row:has(+ .csn-accordion__row[data-open="1"]) , body.csn-product-page .csn-accordion__row:has(+ .csn-accordion__row[data-open="1"]) {
	border-bottom: none;
}

/* =========================================================================
   ROUND 7 — Protect .csn-btn variants from Astra parent cascade (Fix 1)
   Same pattern as Round 2 Fix B, extended to .csn-btn since anchors styled
   as .csn-btn inherit Astra's a:hover blue color without !important locks.
   Covers: "Start shopping" / "Message about rush order" / "Message us about
   sizing" / "Open Sizing Guide" / FAQ group footer-link / etc.
   ========================================================================= */
body.csn-info-page .csn-btn, body.csn-product-page .csn-btn,
body.csn-info-page .csn-btn:link, body.csn-product-page .csn-btn:link,
body.csn-info-page .csn-btn:visited, body.csn-product-page .csn-btn:visited,
body.csn-info-page .csn-btn:hover, body.csn-product-page .csn-btn:hover,
body.csn-info-page .csn-btn:active, body.csn-product-page .csn-btn:active,
body.csn-info-page .csn-btn:focus , body.csn-product-page .csn-btn:focus {
	text-decoration: none !important;
}

/* Primary (gold pill) */
body.csn-info-page .csn-btn--primary, body.csn-product-page .csn-btn--primary,
body.csn-info-page .csn-btn--primary:link, body.csn-product-page .csn-btn--primary:link,
body.csn-info-page .csn-btn--primary:visited, body.csn-product-page .csn-btn--primary:visited,
body.csn-info-page .csn-btn--primary:hover, body.csn-product-page .csn-btn--primary:hover,
body.csn-info-page .csn-btn--primary:focus , body.csn-product-page .csn-btn--primary:focus {
	background: var(--accent) !important;
	color: #fff !important;
	border-color: var(--accent) !important;
}

/* Dark (black pill, e.g. "Start shopping", "Send message") */
body.csn-info-page .csn-btn--dark, body.csn-product-page .csn-btn--dark,
body.csn-info-page .csn-btn--dark:link, body.csn-product-page .csn-btn--dark:link,
body.csn-info-page .csn-btn--dark:visited, body.csn-product-page .csn-btn--dark:visited,
body.csn-info-page .csn-btn--dark:hover, body.csn-product-page .csn-btn--dark:hover,
body.csn-info-page .csn-btn--dark:focus , body.csn-product-page .csn-btn--dark:focus {
	background: #1A1412 !important;
	color: #fff !important;
	border-color: #1A1412 !important;
}

/* Secondary (outline on light bg) */
body.csn-info-page .csn-btn--secondary, body.csn-product-page .csn-btn--secondary,
body.csn-info-page .csn-btn--secondary:link, body.csn-product-page .csn-btn--secondary:link,
body.csn-info-page .csn-btn--secondary:visited, body.csn-product-page .csn-btn--secondary:visited,
body.csn-info-page .csn-btn--secondary:hover, body.csn-product-page .csn-btn--secondary:hover,
body.csn-info-page .csn-btn--secondary:focus , body.csn-product-page .csn-btn--secondary:focus {
	background: transparent !important;
	color: var(--fg) !important;
	border-color: var(--fg) !important;
}

/* Ghost (subtle outline, drawer Close button) */
body.csn-info-page .csn-btn--ghost, body.csn-product-page .csn-btn--ghost,
body.csn-info-page .csn-btn--ghost:link, body.csn-product-page .csn-btn--ghost:link,
body.csn-info-page .csn-btn--ghost:visited, body.csn-product-page .csn-btn--ghost:visited,
body.csn-info-page .csn-btn--ghost:hover, body.csn-product-page .csn-btn--ghost:hover,
body.csn-info-page .csn-btn--ghost:focus , body.csn-product-page .csn-btn--ghost:focus {
	background: transparent !important;
	color: var(--fg) !important;
	border-color: rgba(26,20,18,0.18) !important;
}

/* Gold on dark (e.g. "Message about rush order" inside dark rush callout) */
body.csn-info-page .csn-btn--gold-on-dark, body.csn-product-page .csn-btn--gold-on-dark,
body.csn-info-page .csn-btn--gold-on-dark:link, body.csn-product-page .csn-btn--gold-on-dark:link,
body.csn-info-page .csn-btn--gold-on-dark:visited, body.csn-product-page .csn-btn--gold-on-dark:visited,
body.csn-info-page .csn-btn--gold-on-dark:hover, body.csn-product-page .csn-btn--gold-on-dark:hover,
body.csn-info-page .csn-btn--gold-on-dark:focus , body.csn-product-page .csn-btn--gold-on-dark:focus {
	background: var(--accent) !important;
	color: #fff !important;
	border-color: var(--accent) !important;
}

/* Secondary on dark (outline on dark bg) */
body.csn-info-page .csn-btn--secondary-on-dark, body.csn-product-page .csn-btn--secondary-on-dark,
body.csn-info-page .csn-btn--secondary-on-dark:link, body.csn-product-page .csn-btn--secondary-on-dark:link,
body.csn-info-page .csn-btn--secondary-on-dark:visited, body.csn-product-page .csn-btn--secondary-on-dark:visited,
body.csn-info-page .csn-btn--secondary-on-dark:hover, body.csn-product-page .csn-btn--secondary-on-dark:hover,
body.csn-info-page .csn-btn--secondary-on-dark:focus , body.csn-product-page .csn-btn--secondary-on-dark:focus {
	background: transparent !important;
	color: #fff !important;
	border-color: rgba(255,255,255,0.5) !important;
}

/* ============================================================
   Universal site header (.csn-site-header / .csn-site-nav)
   Used on About, FAQ, Shipping, Contact, Shop, Cart, My Account, PDP.
   ============================================================ */

.csn-site-header { background: var(--bg, #f6f1ea); }

.csn-site-nav {
	display: grid;
	align-items: center;
	padding: 14px 16px;
	background: rgba(246, 241, 234, 0.92);
	border-bottom: 1px solid rgba(26, 20, 18, .09);
	position: sticky; top: 0; z-index: 20;
}

.csn-site-nav.has-back,
.csn-site-nav.no-back { grid-template-columns: 60px 1fr 90px; }

.csn-site-nav__back {
	grid-column: 1;
	justify-self: start;
	display: inline-flex; align-items: center;
	color: var(--fg, #1a1412); text-decoration: none;
	padding: 4px;
}

.csn-site-nav__logo {
	grid-column: 2;
	justify-self: center;
	text-align: center;
	font-family: var(--cs-font-serif, Georgia, serif);
	font-size: 22px;
	letter-spacing: -0.01em;
	color: var(--fg, #1a1412);
	font-weight: 500;
	text-decoration: none;
}
.csn-site-nav__logo em { font-style: italic; font-weight: 400; }

.csn-site-nav__icons {
	grid-column: 3;
	display: flex; gap: 14px; justify-self: end; align-items: center;
	color: var(--fg, #1a1412);
}

.csn-site-nav__icon {
	display: inline-flex; align-items: center;
	color: inherit; text-decoration: none;
}

.csn-site-nav__cart { position: relative; }
.csn-site-nav__cart-badge {
	/* MIUI Chrome workaround: circle on ::before; number text stays in parent. */
	position: absolute; top: -4px; right: -6px;
	color: #fff;
	width: 16px; height: 16px;
	font-family: var(--cs-font-sans, system-ui, sans-serif);
	font-size: 10px; font-weight: 700;
	display: flex; align-items: center; justify-content: center;
}
.csn-site-nav__cart-badge::before {
	content: ""; position: absolute; inset: 0;
	border-radius: 50%; background: var(--accent, #B58B5B); z-index: 0;
}
.csn-site-nav__cart-badge > *,
.csn-site-nav__cart-badge { z-index: 1; }

@media (min-width: 768px) {
	.csn-site-nav { padding: 14px 40px; }
	.csn-site-nav__logo { font-size: 24px; }
}
@media (min-width: 1280px) {
	.csn-site-nav { padding: 16px 48px; }
	.csn-site-nav__logo { font-size: 26px; }
}
@media (min-width: 1920px) {
	.csn-site-nav__logo { font-size: 28px; }
}

/* Astra accent overrides for site-nav links (info + product contexts). */
body.csn-info-page .csn-site-nav a,
body.csn-info-page .csn-site-nav a:link,
body.csn-info-page .csn-site-nav a:visited,
body.csn-info-page .csn-site-nav a:hover,
body.csn-info-page .csn-site-nav a:focus,
body.csn-info-page .csn-site-nav a:active,
body.csn-product-page .csn-site-nav a,
body.csn-product-page .csn-site-nav a:link,
body.csn-product-page .csn-site-nav a:visited,
body.csn-product-page .csn-site-nav a:hover,
body.csn-product-page .csn-site-nav a:focus,
body.csn-product-page .csn-site-nav a:active {
	color: var(--fg, #1a1412) !important;
	text-decoration: none !important;
}
body.csn-info-page .csn-site-nav a:hover,
body.csn-product-page .csn-site-nav a:hover { color: var(--accent, #B58B5B) !important; }

body.csn-info-page .csn-site-nav__cart-badge,
body.csn-product-page .csn-site-nav__cart-badge { color: #fff !important; }

/* Shop / Cart / My-Account shells: keep WC content centered with breathing room. */
.csn-shop-shell,
.csn-cart-shell,
.csn-account-shell {
	background: var(--bg, #f6f1ea);
	color: var(--fg, #1a1412);
	min-height: 50vh;
}
.csn-shop-shell__main,
.csn-cart-shell__main,
.csn-account-shell__main {
	max-width: 1200px;
	margin: 0 auto;
	padding: 32px 16px 64px;
	/* The shell wrapper is display:flex (column) so <main> is a flex item.
	 * Without an explicit width, the item's min-width:auto plus stretch
	 * alignment can let it grow past the viewport on narrow phones (intrinsic
	 * content size wins over container width). Forcing width:100% + min-width:0
	 * pins the cross-axis size to the container regardless of intrinsic content,
	 * which keeps the cart layout centered on mobile. Desktop stays unchanged
	 * because max-width:1200px and the wider container were already constraining. */
	width: 100%;
	min-width: 0;
}
@media (min-width: 768px) {
	.csn-shop-shell__main,
	.csn-cart-shell__main,
	.csn-account-shell__main { padding: 48px 40px 80px; }
}
@media (min-width: 1280px) {
	.csn-shop-shell__main,
	.csn-cart-shell__main,
	.csn-account-shell__main { padding: 56px 48px 96px; }
}

/* ============================================================
   Wedding-date pill (.csn-wd-pill)
   Compact 1-line picker placed next to delivery blocks.
   Loaded with assets/js/wedding-date-shared.js.
   ============================================================ */

.csn-wd-pill {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border: 1px solid rgba(26, 20, 18, 0.10);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.7);
	cursor: pointer;
	font-family: var(--cs-font-sans, system-ui, sans-serif);
	font-size: 13px;
	color: var(--fg, #1a1412);
	position: relative;
	line-height: 1.3;
	transition: border-color .15s ease, background .15s ease;
}
.csn-wd-pill:hover { border-color: rgba(26, 20, 18, 0.22); background: #fff; }
.csn-wd-pill.is-set { background: rgba(181, 139, 91, 0.06); border-color: rgba(181, 139, 91, 0.28); }

.csn-wd-pill__icon {
	display: inline-flex;
	flex-shrink: 0;
	width: 14px; height: 14px;
	align-items: center; justify-content: center;
}

.csn-wd-pill__copy {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--fg, #1a1412);
}
.csn-wd-pill__title { font-weight: 500; }
.csn-wd-pill__title .csn-italic-accent { font-weight: 400; }
.csn-wd-pill__saved {
	display: inline;
	font-weight: 400;
	color: rgba(26, 20, 18, 0.7);
}
.csn-wd-pill__saved strong {
	color: var(--fg, #1a1412);
	font-weight: 600;
}

.csn-wd-pill__input {
	position: absolute; left: 0; top: 0;
	inset: 0;
	width: 100%; height: 100%;
	opacity: 0;
	z-index: 1;
	cursor: pointer;
	border: 0;
}

.csn-wd-pill__btn {
	flex-shrink: 0;
	appearance: none;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--accent, #B58B5B);
	padding: 4px 8px;
	border-radius: 999px;
	cursor: pointer;
	transition: background .15s ease;
}
.csn-wd-pill__btn:hover { background: rgba(181, 139, 91, 0.12); }
.csn-wd-pill__btn:focus-visible { outline: 2px solid var(--accent, #B58B5B); outline-offset: 2px; }

@media (max-width: 480px) {
	.csn-wd-pill { padding: 8px 12px; font-size: 12.5px; }
	.csn-wd-pill__btn { font-size: 11.5px; padding: 4px 6px; }
}

/* Astra accent neutralization — prevent blue link color leaking into pill text */
body.csn-info-page .csn-wd-pill,
body.csn-info-page .csn-wd-pill *,
body.csn-product-page .csn-wd-pill,
body.csn-product-page .csn-wd-pill * {
	color: inherit;
}
body.csn-info-page .csn-wd-pill__btn,
body.csn-product-page .csn-wd-pill__btn { color: var(--accent, #B58B5B) !important; }

/* ============================================================
   Legal document pages (Privacy, Terms, Refund — Template: Legal Document)
   Renders WP the_content() in serif-headings + sans body inside chrome.
   ============================================================ */
.csn-legal-shell .csn-legal {
	padding: 48px 20px 80px;
	background: var(--bg, #f6f1ea);
}
.csn-legal__hero {
	max-width: 720px;
	margin: 0 auto 40px;
	text-align: center;
}
.csn-legal__eyebrow {
	font-family: var(--cs-font-sans, system-ui, sans-serif);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--accent, #B58B5B);
	margin-bottom: 10px;
}
.csn-legal__title {
	font-family: var(--cs-font-serif, Georgia, serif);
	font-size: 36px;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--fg, #1a1412);
	margin: 0 0 10px;
	line-height: 1.1;
}
.csn-legal__meta {
	font-family: var(--cs-font-sans, system-ui, sans-serif);
	font-size: 13px;
	color: #6f6760;
	font-style: italic;
}
.csn-legal__prose {
	max-width: 720px;
	margin: 0 auto;
	font-family: var(--cs-font-sans, system-ui, sans-serif);
	font-size: 16px;
	line-height: 1.7;
	color: var(--fg, #1a1412);
}
.csn-legal__prose h2 {
	font-family: var(--cs-font-serif, Georgia, serif);
	font-size: 24px;
	font-weight: 500;
	margin: 48px 0 14px;
	line-height: 1.2;
	color: var(--fg, #1a1412);
}
.csn-legal__prose h3 {
	font-family: var(--cs-font-sans, system-ui, sans-serif);
	font-size: 17px;
	font-weight: 600;
	margin: 32px 0 10px;
	color: var(--fg, #1a1412);
}
.csn-legal__prose h4 {
	font-family: var(--cs-font-sans, system-ui, sans-serif);
	font-size: 15px;
	font-weight: 600;
	margin: 24px 0 8px;
}
.csn-legal__prose p { margin: 0 0 16px; }
.csn-legal__prose ul,
.csn-legal__prose ol { margin: 0 0 16px; padding-left: 26px; }
.csn-legal__prose ul li,
.csn-legal__prose ol li { margin-bottom: 6px; }
.csn-legal__prose a {
	color: var(--accent, #B58B5B);
	text-decoration: underline;
	text-underline-offset: 2px;
}
body.csn-info-page .csn-legal__prose a,
body.csn-info-page .csn-legal__prose a:link,
body.csn-info-page .csn-legal__prose a:visited { color: var(--accent, #B58B5B) !important; text-decoration: underline !important; }
body.csn-info-page .csn-legal__prose a:hover,
body.csn-info-page .csn-legal__prose a:focus { color: var(--fg, #1a1412) !important; }
.csn-legal__prose strong { font-weight: 600; color: var(--fg, #1a1412); }
.csn-legal__prose blockquote {
	border-left: 3px solid var(--accent, #B58B5B);
	padding: 6px 0 6px 18px;
	margin: 20px 0;
	color: #6f6760;
	font-style: italic;
}
.csn-legal__prose code {
	background: #efe8da;
	padding: 1px 6px;
	border-radius: 3px;
	font-family: monospace;
	font-size: 14px;
}
@media (min-width: 768px) {
	.csn-legal-shell .csn-legal { padding: 80px 40px 120px; }
	.csn-legal__title { font-size: 48px; }
	.csn-legal__prose { font-size: 17px; }
	.csn-legal__prose h2 { font-size: 28px; }
}

/* ============================================================
   Mobile hero full-bleed + transparent header overlay (wcoll + CYO).
   Pattern: photo extends edge-to-edge, site-header floats absolutely
   on top with logo/cart-icon in white. Desktop layout untouched.
   ============================================================ */
@media (max-width: 767.98px) {
	/* --- Wcoll: remove hero side padding + photo border-radius --- */
	body.csn-wcoll-page .csn-wcoll-hero {
		padding: 0 0 28px;
	}
	body.csn-wcoll-page .csn-wcoll-hero__photo {
		border-radius: 0;
		margin-bottom: 0;
		box-shadow: none;
	}
	body.csn-wcoll-page .csn-wcoll-hero__text,
	body.csn-wcoll-page .csn-wcoll-hero__cta-wrap {
		padding-left: 22px;
		padding-right: 22px;
	}
	body.csn-wcoll-page .csn-wcoll-hero__text {
		padding-top: 22px;
	}

	/* --- Transparent site-header overlay on photo (wcoll + CYO) --- */
	body.csn-wcoll-page .csn-site-header,
	body.page-template-page-create-your-own .csn-site-header {
		position: absolute;
		top: 0; left: 0; right: 0;
		z-index: 10;
	}
	body.csn-wcoll-page .csn-site-nav,
	body.page-template-page-create-your-own .csn-site-nav {
		background: transparent !important;
		border-bottom: none !important;
		position: relative !important;
	}

	/* Subtle top-fade for legibility on bright photos */
	body.csn-wcoll-page .csn-site-nav::after,
	body.page-template-page-create-your-own .csn-site-nav::after {
		content: '';
		position: absolute;
		top: 0; left: 0; right: 0;
		height: 110px;
		background: linear-gradient(180deg, rgba(26,20,18,0.32) 0%, rgba(26,20,18,0) 100%);
		pointer-events: none;
		z-index: -1;
	}

	/* Logo + cart white on photo */
	body.csn-wcoll-page .csn-site-nav__logo,
	body.csn-wcoll-page .csn-site-nav__logo:link,
	body.csn-wcoll-page .csn-site-nav__logo:visited,
	body.csn-wcoll-page .csn-site-nav__logo:hover,
	body.csn-wcoll-page .csn-site-nav__logo em,
	body.csn-wcoll-page .csn-site-nav__cart,
	body.csn-wcoll-page .csn-site-nav__cart:link,
	body.csn-wcoll-page .csn-site-nav__cart:visited,
	body.csn-wcoll-page .csn-site-nav__cart:hover,
	body.csn-wcoll-page .csn-site-nav__icon,
	body.csn-wcoll-page .csn-site-nav__back,
	body.page-template-page-create-your-own .csn-site-nav__logo,
	body.page-template-page-create-your-own .csn-site-nav__logo:link,
	body.page-template-page-create-your-own .csn-site-nav__logo:visited,
	body.page-template-page-create-your-own .csn-site-nav__logo:hover,
	body.page-template-page-create-your-own .csn-site-nav__logo em,
	body.page-template-page-create-your-own .csn-site-nav__cart,
	body.page-template-page-create-your-own .csn-site-nav__cart:link,
	body.page-template-page-create-your-own .csn-site-nav__cart:visited,
	body.page-template-page-create-your-own .csn-site-nav__cart:hover,
	body.page-template-page-create-your-own .csn-site-nav__icon,
	body.page-template-page-create-your-own .csn-site-nav__back {
		color: #fff !important;
		text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
	}
}

/* ============================================================
   Mobile: use info-header-cyo (transparent overlay) on wcoll + CYO.
   Desktop: keep site-header as standard chrome.
   Matches the dual-header pattern of the Home page.
   ============================================================ */
/* Mobile (<=767.98px) — hide the standard nav but keep the announcement bar.
   Same dual-header pattern as home: cyo-header is a transparent overlay; the
   announcement strip lives inside site-header and must stay visible on mobile. */
@media (max-width: 767.98px) {
	body.csn-wcoll-page .csn-site-header .csn-site-nav,
	body.page-template-page-create-your-own .csn-site-header .csn-site-nav {
		display: none !important;
	}
	body.csn-wcoll-page .csn-cyo-header,
	body.page-template-page-create-your-own .csn-cyo-header {
		display: block !important;
	}
}
/* Desktop (>=768px) */
@media (min-width: 768px) {
	body.csn-wcoll-page .csn-cyo-header,
	body.page-template-page-create-your-own .csn-cyo-header {
		display: none !important;
	}
}

/* Center brand in cyo-header bar when no hamburger (wcoll + CYO).
   Original grid is 60px 1fr 60px (assumes 3 elements). With only 2 (logo + cart)
   the brand collapses left. Use 1fr auto 1fr and explicit grid-column placement. */
@media (max-width: 767.98px) {
	body.csn-wcoll-page .csn-cyo-header__bar,
	body.page-template-page-create-your-own .csn-cyo-header__bar {
		grid-template-columns: 1fr auto 1fr !important;
	}
	body.csn-wcoll-page .csn-cyo-header__logo,
	body.page-template-page-create-your-own .csn-cyo-header__logo {
		grid-column: 2 !important;
		justify-self: center !important;
	}
	body.csn-wcoll-page .csn-cyo-header__cart,
	body.page-template-page-create-your-own .csn-cyo-header__cart {
		grid-column: 3 !important;
		justify-self: end !important;
	}
}

/* Move brand to LEFT on mobile cyo-header (wcoll + CYO). Cart stays right. */
@media (max-width: 767.98px) {
	body.csn-wcoll-page .csn-cyo-header__bar,
	body.page-template-page-create-your-own .csn-cyo-header__bar {
		grid-template-columns: auto 1fr auto !important;
	}
	body.csn-wcoll-page .csn-cyo-header__logo,
	body.page-template-page-create-your-own .csn-cyo-header__logo {
		grid-column: 1 !important;
		justify-self: start !important;
	}
	body.csn-wcoll-page .csn-cyo-header__cart,
	body.page-template-page-create-your-own .csn-cyo-header__cart {
		grid-column: 3 !important;
		justify-self: end !important;
	}
}


/* GLOBAL: CYO overlay header below announcement bar */
/* On every info-page (CYO, Home, Shop, Wedding-collection, PDP) the cyo-header
   is position:absolute top:0 anchored to its shell. On mobile the announcement
   bar sits in normal flow at top:0 of the shell, so the overlay covers it.
   Offset by CSS var --csn-ann-h (set by JS to the live ann-bar height). */
@media (max-width: 767.98px) {
	body.csn-info-page .csn-cyo-header {
		top: var(--csn-ann-h, 36px);
	}
}