/* =========================================================================
   CCAPP Conferences — design system
   =========================================================================
   Layer 1: brand tokens (source of truth, mirrored as Divi 5 variables)
   Layer 2: per-conference skin (--conf-*) — printed by conference-skin.php
   Layer 3: components (heroes, marquee, badges, cards, countdown, store)

   Motion honors prefers-reduced-motion throughout.
   ========================================================================= */

/* ---- Layer 1: brand tokens ------------------------------------------- */

:root {
	/* CCAPP brand sheet */
	--ccapp-education:     #2AD2C9; /* bright turquoise */
	--ccapp-membership:    #008C95; /* deep teal */
	--ccapp-credentialing: #5F249F; /* purple */
	--ccapp-charcoal:      #2D2926; /* near-black */

	/* Complementary support colors (approved direction) */
	--ccapp-coral:         #D85A30; /* urgency only: deadlines, low stock */
	--ccapp-sand:          #F4F1EA; /* warm section background */
	--ccapp-ink-soft:      #5F5E5A;
	--ccapp-paper:         #FFFFFF;

	/* Tints for badges/labels (text pairs in comments) */
	--ccapp-teal-tint:     #E1F5EE; /* text #085041 */
	--ccapp-purple-tint:   #EEEDFE; /* text #3C3489 */
	--ccapp-amber-tint:    #FAEEDA; /* text #854F0B */
	--ccapp-coral-tint:    #FAECE7; /* text #712B13 */

	/* Type */
	--ccapp-font-display: 'Fraunces', Georgia, serif;
	--ccapp-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* Fluid type scale — clamp(min, preferred, max) */
	--ccapp-fs-hero:    clamp(2.4rem, 5.5vw + 1rem, 4.5rem);
	--ccapp-fs-h2:      clamp(1.8rem, 3vw + 0.8rem, 2.8rem);
	--ccapp-fs-h3:      clamp(1.3rem, 1.6vw + 0.7rem, 1.75rem);
	--ccapp-fs-body:    clamp(1rem, 0.3vw + 0.9rem, 1.125rem);
	--ccapp-fs-small:   0.875rem;
	--ccapp-fs-label:   0.75rem;

	/* Fluid spacing */
	--ccapp-space-section: clamp(3.5rem, 8vw, 7rem);
	--ccapp-space-lg:      clamp(2rem, 4vw, 3.5rem);
	--ccapp-space-md:      1.5rem;
	--ccapp-space-sm:      0.75rem;

	--ccapp-radius:      12px;
	--ccapp-radius-pill: 999px;
	--ccapp-ease:        cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Layer 2: skin fallback ------------------------------------------
   conference-skin.php prints the real values per page; this is only the
   safety net if that inline style is ever missing. */

:root {
	--conf-accent:   var(--ccapp-membership);
	--conf-accent-2: var(--ccapp-credentialing);
	--conf-bright:   var(--ccapp-education);
}

/* ---- Base ------------------------------------------------------------ */

.ccapp-display,
.ccapp-hero__title {
	font-family: var(--ccapp-font-display);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

/* ---- Hero (dark base for all three variants) ------------------------- */

.ccapp-hero {
	position: relative;
	overflow: hidden;
	background-color: var(--ccapp-charcoal);
	color: #fff;
}

.ccapp-hero__title { font-size: var(--ccapp-fs-hero); color: #fff; }
.ccapp-hero__title--accent { color: var(--conf-bright); }

.ccapp-hero__meta {
	color: #D3D1C7;
	font-size: var(--ccapp-fs-body);
}

/* Drifting brand orbs. Add 2–3 divs with these classes inside the hero
   (or an SVG module) — pure decoration, aria-hidden them in the builder. */
.ccapp-orb {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	will-change: transform;
}
.ccapp-orb--teal {
	width: clamp(180px, 26vw, 380px);
	height: clamp(180px, 26vw, 380px);
	background: var(--conf-accent);
	opacity: 0.26;
	top: -8%;
	left: -6%;
	animation: ccapp-drift-a 10s var(--ccapp-ease) infinite;
}
.ccapp-orb--purple {
	width: clamp(150px, 22vw, 320px);
	height: clamp(150px, 22vw, 320px);
	background: var(--conf-accent-2);
	opacity: 0.3;
	bottom: -10%;
	right: -5%;
	animation: ccapp-drift-b 12s var(--ccapp-ease) infinite;
}
.ccapp-orb--ring {
	width: clamp(50px, 7vw, 90px);
	height: clamp(50px, 7vw, 90px);
	background: transparent;
	border: 2px solid var(--conf-bright);
	opacity: 0.35;
	top: 12%;
	right: 16%;
	animation: ccapp-drift-b 8s var(--ccapp-ease) infinite;
}

@keyframes ccapp-drift-a {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50%      { transform: translate(3rem, -2rem) scale(1.12); }
}
@keyframes ccapp-drift-b {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50%      { transform: translate(-2.5rem, 1.5rem) scale(0.92); }
}

/* Staggered entrance — pure CSS so content is NEVER dependent on JS to
   become visible (the Divi Visual Builder loads theme CSS but not theme
   JS). Plays once on load. Delay steps via .ccapp-rise--2 … --5.
   For scroll-triggered reveals below the fold, use .ccapp-rise-scroll
   instead (theme.js adds .is-inview). */
.ccapp-rise {
	opacity: 0;
	transform: translateY(32px);
	animation: ccapp-rise-in 1s var(--ccapp-ease) forwards;
}
.ccapp-rise--2 { animation-delay: 0.25s; }
.ccapp-rise--3 { animation-delay: 0.5s; }
.ccapp-rise--4 { animation-delay: 0.75s; }
.ccapp-rise--5 { animation-delay: 1s; }

@keyframes ccapp-rise-in {
	to { opacity: 1; transform: translateY(0); }
}

.ccapp-rise-scroll {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.7s var(--ccapp-ease), transform 0.7s var(--ccapp-ease);
}
.ccapp-rise-scroll.is-inview { opacity: 1; transform: translateY(0); }

/* ---- Marquee strip ---------------------------------------------------- */

.ccapp-marquee {
	overflow: hidden;
	background: var(--conf-accent);
	padding: 0.55rem 0;
}
.ccapp-marquee__track {
	display: flex;
	width: max-content;
	white-space: nowrap;
	animation: ccapp-marquee 22s linear infinite;
}
.ccapp-marquee__item {
	font-family: var(--ccapp-font-body);
	font-size: var(--ccapp-fs-label);
	font-weight: 600;
	letter-spacing: 0.14em;
	color: rgba(255, 255, 255, 0.92);
	padding-right: 2.5rem;
}
.ccapp-marquee:hover .ccapp-marquee__track { animation-play-state: paused; }

@keyframes ccapp-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ---- Buttons ----------------------------------------------------------
   Use as Divi element classes, or mirror these values into Button
   presets. Both routes stay in sync because both read --conf-*. */

.ccapp-btn {
	display: inline-block;
	font-family: var(--ccapp-font-body);
	font-weight: 600;
	font-size: var(--ccapp-fs-small);
	line-height: 1;
	padding: 0.9em 1.7em;
	border-radius: var(--ccapp-radius-pill);
	text-decoration: none;
	transition: transform 0.2s var(--ccapp-ease), background-color 0.2s, color 0.2s, border-color 0.2s;
	cursor: pointer;
}
.ccapp-btn:hover { transform: scale(1.05); }
.ccapp-btn:focus-visible {
	outline: 3px solid var(--conf-bright);
	outline-offset: 2px;
}

.ccapp-btn--primary { background: var(--conf-bright); color: var(--ccapp-charcoal); border: 0; }
.ccapp-btn--dark    { background: var(--ccapp-charcoal); color: #fff; border: 0; }
.ccapp-btn--ghost   {
	background: transparent;
	color: #fff;
	border: 1.5px solid rgba(255, 255, 255, 0.55);
}
.ccapp-btn--ghost:hover { border-color: var(--conf-bright); color: var(--conf-bright); }
.ccapp-btn--ghost-dark {
	background: transparent;
	color: var(--conf-accent);
	border: 1.5px solid var(--conf-accent);
}

/* ---- Badges ------------------------------------------------------------ */

.ccapp-badge {
	display: inline-block;
	font-size: var(--ccapp-fs-label);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding: 0.3em 0.9em;
	border-radius: var(--ccapp-radius-pill);
	line-height: 1.4;
}
.ccapp-badge--open      { background: var(--ccapp-teal-tint);   color: #085041; }
.ccapp-badge--early     { background: var(--ccapp-amber-tint);  color: #854F0B; }
.ccapp-badge--soon      { background: var(--ccapp-purple-tint); color: #3C3489; }
.ccapp-badge--save      { background: #F1EFE8;                  color: #5F5E5A; }
.ccapp-badge--urgent    { background: var(--ccapp-coral-tint);  color: #712B13; }
.ccapp-badge--keynote   { background: var(--conf-accent-2);     color: #fff; }
.ccapp-badge--live {
	background: var(--conf-accent-2);
	color: #fff;
}
.ccapp-badge--live::before {
	content: '';
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--conf-bright);
	margin-right: 0.45em;
	animation: ccapp-pulse 1.6s ease-in-out infinite;
}
@keyframes ccapp-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.35; }
}

/* ---- Countdown --------------------------------------------------------- */

.ccapp-countdown { display: inline-flex; gap: 0.5rem; }
.ccapp-countdown__cell {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 10px;
	padding: 0.6rem 0.8rem;
	min-width: 3.6rem;
	text-align: center;
}
.ccapp-countdown__num {
	display: block;
	font-family: var(--ccapp-font-display);
	font-size: clamp(1.25rem, 2.2vw, 1.75rem);
	font-weight: 500;
	color: var(--conf-bright);
	font-variant-numeric: tabular-nums;
}
.ccapp-countdown__label {
	font-size: 0.65rem;
	letter-spacing: 0.12em;
	color: rgba(255, 255, 255, 0.65);
	text-transform: uppercase;
}
/* Light-background variant (e.g., pricing sections) */
.ccapp-countdown--light .ccapp-countdown__cell { background: #fff; border-color: #D3D1C7; }
.ccapp-countdown--light .ccapp-countdown__num { color: var(--conf-accent); }
.ccapp-countdown--light .ccapp-countdown__label { color: var(--ccapp-ink-soft); }

/* ---- Cards: speakers, agenda, conferences, products -------------------- */

.ccapp-card {
	background: var(--ccapp-paper);
	border: 1.5px solid #E5E2D9;
	border-radius: var(--ccapp-radius);
	box-shadow: 0 4px 16px rgba(45, 41, 38, 0.12);
	transition: transform 0.25s var(--ccapp-ease), border-color 0.25s, box-shadow 0.25s;
}
.ccapp-card:hover {
	transform: translateY(-5px);
	border-color: var(--conf-accent);
	box-shadow: 0 18px 38px rgba(45, 41, 38, 0.22);
}
.ccapp-card--speaker:hover { border-color: var(--conf-accent-2); }

.ccapp-agenda-row {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.8rem 0.9rem;
	border-radius: 8px;
	transition: background-color 0.2s;
}
.ccapp-agenda-row:hover { background: var(--ccapp-teal-tint); }
.ccapp-agenda-row__time {
	font-weight: 600;
	color: var(--conf-accent-2);
	font-size: var(--ccapp-fs-small);
	min-width: 5.2em;
	font-variant-numeric: tabular-nums;
}

/* ---- Sticky register bar -----------------------------------------------
   Markup: <div class="ccapp-sticky-register"> … </div> placed once in the
   Theme Builder body template. theme.js toggles .is-visible after the
   visitor scrolls past [data-ccapp-hero]. */

.ccapp-sticky-register {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9990;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: 0.7rem 1rem;
	background: var(--ccapp-charcoal);
	color: #fff;
	transform: translateY(110%);
	transition: transform 0.35s var(--ccapp-ease);
}
.ccapp-sticky-register.is-visible { transform: translateY(0); }
.ccapp-sticky-register__text { font-size: var(--ccapp-fs-small); color: #D3D1C7; }

/* ---- Store -------------------------------------------------------------- */

.ccapp-price { color: var(--conf-accent); font-weight: 600; }

/* Distraction-free checkout: hide global chrome, keep a quiet page. */
body.ccapp-focused-checkout #main-header,
body.ccapp-focused-checkout #top-header,
body.ccapp-focused-checkout #main-footer,
body.ccapp-focused-checkout .ccapp-sticky-register {
	display: none !important;
}
body.ccapp-focused-checkout { background: var(--ccapp-sand); }

/* ---- Accessibility & motion --------------------------------------------- */

:focus-visible { outline-color: var(--conf-bright); }

@media (prefers-reduced-motion: reduce) {
	.ccapp-orb,
	.ccapp-marquee__track,
	.ccapp-badge--live::before {
		animation: none !important;
	}
	.ccapp-rise,
	.ccapp-rise-scroll {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
		animation: none !important;
	}
	.ccapp-btn,
	.ccapp-card,
	.ccapp-sticky-register {
		transition: none !important;
	}
	.ccapp-btn:hover,
	.ccapp-card:hover { transform: none; }
}

/* ---- Small screens -------------------------------------------------------- */

@media (max-width: 767px) {
	.ccapp-countdown { flex-wrap: wrap; justify-content: center; }
	.ccapp-sticky-register__text { display: none; } /* keep just the button */
}

/* ---- Sponsor wall (tiered) ---------------------------------------------
   Rendered by [ccapp_sponsors]. Hosts largest, Sponsors large,
   Exhibitors small. All tiles uniform within their tier. */

.ccapp-sponsor-wall { display: flex; flex-direction: column; gap: 2.6rem; }

.ccapp-sponsor-tier__label {
	font-family: var(--ccapp-font-body);
	font-size: var(--ccapp-fs-label);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--conf-accent);
	text-align: center;
	margin-bottom: 1.1rem;
}

.ccapp-sponsor-tier__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
	align-items: stretch;
}

.ccapp-sponsor-tile {
	background: #fff;
	border: 1.5px solid #E5E2D9;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
	box-shadow: 0 4px 14px rgba(45, 41, 38, 0.11);
	transition: transform 0.25s var(--ccapp-ease), border-color 0.25s, box-shadow 0.25s;
	text-decoration: none;
}
a.ccapp-sponsor-tile:hover {
	transform: translateY(-4px);
	border-color: var(--conf-accent);
	box-shadow: 0 16px 32px rgba(45, 41, 38, 0.2);
}

.ccapp-sponsor-tile__logo { width: auto; height: auto; object-fit: contain; display: block; }
.ccapp-sponsor-tile__name {
	font-family: var(--ccapp-font-body);
	font-weight: 600;
	color: var(--ccapp-charcoal);
	text-align: center;
	font-size: 0.95rem;
}

/* Tier sizing: host > sponsor > exhibitor */
/* Hosts: large standout tiles, max 3 per row (grid width cap), partial
   rows center automatically via the grid's justify-content. */
.ccapp-sponsor-tier--host .ccapp-sponsor-tier__grid {
	max-width: 1220px;
	margin-left: auto;
	margin-right: auto;
}
.ccapp-sponsor-tier--host .ccapp-sponsor-tile { width: 380px; height: 190px; }
.ccapp-sponsor-tier--host .ccapp-sponsor-tile__logo { max-height: 120px; max-width: 300px; }

.ccapp-sponsor-tier--sponsor .ccapp-sponsor-tile { width: 230px; height: 115px; }
.ccapp-sponsor-tier--sponsor .ccapp-sponsor-tile__logo { max-height: 62px; max-width: 175px; }

.ccapp-sponsor-tier--exhibitor .ccapp-sponsor-tile { width: 160px; height: 82px; padding: 12px; }
.ccapp-sponsor-tier--exhibitor .ccapp-sponsor-tile__logo { max-height: 44px; max-width: 125px; }

@media (max-width: 767px) {
	.ccapp-sponsor-tier--host .ccapp-sponsor-tile { width: 100%; max-width: 380px; height: 150px; }
	.ccapp-sponsor-tier--host .ccapp-sponsor-tile__logo { max-height: 92px; max-width: 80%; }
	.ccapp-sponsor-tier--sponsor .ccapp-sponsor-tile { width: 46%; height: 96px; }
	.ccapp-sponsor-tier--sponsor .ccapp-sponsor-tile__logo { max-height: 52px; max-width: 80%; }
	.ccapp-sponsor-tier--exhibitor .ccapp-sponsor-tile { width: 30%; height: 72px; }
}

@media (prefers-reduced-motion: reduce) {
	a.ccapp-sponsor-tile:hover { transform: none; }
}

/* ---- Pinned site header (fixed-on-scroll) --------------------------------
   position:sticky breaks inside Divi's layout wrappers, so theme.js pins
   the menu bar with position:fixed once it reaches the top of the
   viewport, and inserts a spacer so content doesn't jump. */

.ccapp-menu-bar.is-fixed {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 9995;
}
body.admin-bar .ccapp-menu-bar.is-fixed { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .ccapp-menu-bar.is-fixed { top: 46px; }
}

.ccapp-footer-link,
.ccapp-footer-link:visited {
	color: #D3D1C7;
	text-decoration: none;
	transition: color 0.2s;
}
.ccapp-footer-link:hover { color: var(--conf-bright); }

/* ---- Register button states & sizes ------------------------------------- */

.ccapp-btn--sm { font-size: 0.8rem; padding: 0.65em 1.4em; }

.ccapp-btn--disabled {
	background: rgba(255, 255, 255, 0.1);
	color: #B4B2A9;
	border: 1.5px solid rgba(255, 255, 255, 0.22);
	cursor: default;
}
.ccapp-btn--disabled:hover { transform: none; }

/* Light-background variant of the disabled state */
.ccapp-btn--disabled.ccapp-on-light {
	background: #F1EFE8;
	color: #5F5E5A;
	border-color: #D3D1C7;
}

/* Menu bar separation: thin teal rule between header and page content. */
.ccapp-menu-bar { border-bottom: 2px solid rgba(42, 210, 201, 0.45); }
.ccapp-menu-bar .et_pb_menu, .ccapp-menu-bar .et_pb_module { margin-bottom: 0; }

/* ---- Condensing menu bar ------------------------------------------------ */

.ccapp-menu-bar {
	transition: padding 0.25s var(--ccapp-ease);
}
.ccapp-menu-bar img {
	transition: max-width 0.25s var(--ccapp-ease);
}
.ccapp-menu-bar.is-condensed {
	padding-top: 4px !important;
	padding-bottom: 4px !important;
}
.ccapp-menu-bar.is-condensed img {
	max-width: 100px !important;
}
@media (prefers-reduced-motion: reduce) {
	.ccapp-menu-bar, .ccapp-menu-bar img { transition: none; }
}

/* ---- Site footer distinction --------------------------------------------
   Darker shade + teal top rule: bookends the header's bottom rule. */
.ccapp-site-footer { border-top: 2px solid rgba(42, 210, 201, 0.45); }

/* ---- Hero orbs, bulletproof edition --------------------------------------
   The HTML-orb approach gets clipped by Divi's zero-height module
   wrappers, so the two main orbs are pseudo-elements on the hero
   section itself. HTML .ccapp-orb elements inside a hero are hidden to
   avoid double rendering. */

.ccapp-hero .ccapp-orb { display: none; }

.ccapp-hero::before,
.ccapp-hero::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	will-change: transform;
	z-index: 0;
}
.ccapp-hero::before {
	width: clamp(200px, 28vw, 420px);
	height: clamp(200px, 28vw, 420px);
	background: var(--conf-accent);
	opacity: 0.24;
	top: -9%;
	left: -6%;
	animation: ccapp-drift-a 10s var(--ccapp-ease) infinite;
}
.ccapp-hero::after {
	width: clamp(160px, 23vw, 340px);
	height: clamp(160px, 23vw, 340px);
	background: var(--conf-accent-2);
	opacity: 0.3;
	bottom: -12%;
	right: -5%;
	animation: ccapp-drift-b 12s var(--ccapp-ease) infinite;
}
.ccapp-hero > * { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
	.ccapp-hero::before, .ccapp-hero::after { animation: none; }
}

/* ---- Menu: one line, spread left, tighter items ---------------------------
   Class-independent: matches whatever markup Divi renders for the menu,
   scoped to the menu bar (only the logo and menu live there). */

.ccapp-menu-bar ul {
	display: flex !important;
	flex-wrap: nowrap !important;
	justify-content: flex-end;
	align-items: center;
	gap: 0;
}
.ccapp-menu-bar ul ul { display: block !important; } /* dropdowns keep their own layout */
.ccapp-menu-bar li { white-space: nowrap; }
.ccapp-menu-bar li a { padding-left: 10px; padding-right: 10px; }
.ccapp-menu-bar li:last-child a { padding-right: 0; }

/* Countdown fallback text (no date announced yet) */
.ccapp-countdown-fallback {
	font-family: var(--ccapp-font-body);
	font-size: 0.9rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #B4B2A9;
}

/* ---- Conference flip cards ------------------------------------------------
   Photo-backed brand cards: front = featured image under the brand's
   accent scrim; back = same photo under charcoal with dates, status,
   and CTA. Hover flips (desktop) / tap flips (touch); photo zooms
   slowly while flipping. Falls back to flat brand color without a
   photo. */

.ccapp-flip {
	flex: 1 1 320px;
	max-width: 400px;
	height: 380px;
	perspective: 1300px;
	cursor: pointer;
	outline: none;
}
.ccapp-flip__inner {
	position: relative;
	width: 100%;
	height: 100%;
	transition: transform 0.7s var(--ccapp-ease);
	transform-style: preserve-3d;
}
.ccapp-flip:hover .ccapp-flip__inner,
.ccapp-flip:focus-visible .ccapp-flip__inner,
.ccapp-flip.is-flipped .ccapp-flip__inner {
	transform: rotateY(180deg);
}

/* The face turned away from the viewer must not intercept clicks —
   without this, the invisible front eats the back's CTA tap. */
.ccapp-flip .ccapp-flip__back { pointer-events: none; }
.ccapp-flip:hover .ccapp-flip__front,
.ccapp-flip:focus-visible .ccapp-flip__front,
.ccapp-flip.is-flipped .ccapp-flip__front { pointer-events: none; }
.ccapp-flip:hover .ccapp-flip__back,
.ccapp-flip:focus-visible .ccapp-flip__back,
.ccapp-flip.is-flipped .ccapp-flip__back { pointer-events: auto; }
.ccapp-flip__face {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 6px 22px rgba(45, 41, 38, 0.18);
}
.ccapp-flip__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	transition: transform 6s ease-out;
}
.ccapp-flip:hover .ccapp-flip__bg,
.ccapp-flip.is-flipped .ccapp-flip__bg {
	transform: scale(1.12);
}
.ccapp-flip__scrim { position: absolute; inset: 0; }
.ccapp-flip__content {
	position: relative;
	z-index: 1;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 34px 30px;
	gap: 8px;
}
.ccapp-flip__front .ccapp-flip__content { color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35); }
.ccapp-flip__brand {
	font-family: var(--ccapp-font-body);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	opacity: 0.85;
}
.ccapp-flip__name {
	font-family: var(--ccapp-font-display);
	font-weight: 500;
	font-size: clamp(2.4rem, 3.4vw, 3.2rem);
	line-height: 1.02;
}
.ccapp-flip__full {
	font-family: var(--ccapp-font-body);
	font-size: 0.95rem;
	font-weight: 600;
	opacity: 0.92;
}
.ccapp-flip__hint {
	position: absolute;
	right: 20px;
	bottom: 16px;
	font-size: 1.1rem;
	opacity: 0.65;
}
.ccapp-flip__back { transform: rotateY(180deg); }
.ccapp-flip__back .ccapp-flip__content { color: #fff; }
.ccapp-flip__when {
	font-family: var(--ccapp-font-display);
	font-size: clamp(1.4rem, 2vw, 1.8rem);
	font-weight: 500;
	line-height: 1.15;
}
.ccapp-flip__edition {
	font-family: var(--ccapp-font-body);
	font-size: 0.95rem;
	color: #F1EFE8;
	font-weight: 600;
}
.ccapp-flip__where {
	font-family: var(--ccapp-font-body);
	color: #C9C6BD;
	font-size: 0.9rem;
}
.ccapp-flip__cta {
	font-family: var(--ccapp-font-body);
	display: inline-block;
	margin-top: 14px;
	padding: 10px 26px;
	border: 2px solid;
	border-radius: 100px;
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: transform 0.2s var(--ccapp-ease);
}
.ccapp-flip__cta:hover { transform: scale(1.05); }

@media (prefers-reduced-motion: reduce) {
	.ccapp-flip__inner, .ccapp-flip__bg, .ccapp-flip__cta { transition: none; }
	.ccapp-flip:hover .ccapp-flip__bg { transform: none; }
}

/* ---- Photo hero (MCC-style) -----------------------------------------------
   Full-bleed featured image with a slow Ken Burns drift under a
   charcoal scrim. The page sets the image via a tiny inline <style>
   using [ccapp_conference_image_url]. Falls back to charcoal. */

.ccapp-hero-photo {
	position: relative;
	overflow: hidden;
	background: #221E1B;
	min-height: min(86vh, 920px);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.ccapp-hero-photo::before {
	content: '';
	position: absolute;
	inset: -4%;
	background-size: cover;
	background-position: center;
	animation: ccapp-kenburns 22s ease-in-out infinite alternate;
}
.ccapp-hero-photo::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(24, 21, 19, 0.92) 10%, rgba(24, 21, 19, 0.5) 55%, rgba(24, 21, 19, 0.28) 100%);
}
.ccapp-hero-photo > * { position: relative; z-index: 1; }

@keyframes ccapp-kenburns {
	from { transform: scale(1) translateX(0); }
	to   { transform: scale(1.1) translateX(1.5%); }
}
@media (prefers-reduced-motion: reduce) {
	.ccapp-hero-photo::before { animation: none; }
}

/* ---- Cultural stripe band --------------------------------------------------
   MCC's signature: hard-stop stripes in the full brand palette. */

.ccapp-stripe-band {
	height: 12px;
	background: linear-gradient(90deg,
		#2AD2C9 0 25%, #5F249F 25% 50%, #D85A30 50% 75%, #008C95 75% 100%);
}

/* ---- Drifting photo sections (parallax, evolved) ---------------------------
   Full-bleed background photo with the same slow Ken Burns drift as
   the photo hero — unlike fixed-attachment parallax, this works on
   iOS. The page supplies each section's image by targeting its extra
   class (e.g. .ccapp-bg-etiquette::before) in a small <style>. */

.ccapp-photo-bg {
	position: relative;
	overflow: hidden;
	background: #221E1B;
}
.ccapp-photo-bg::before {
	content: '';
	position: absolute;
	inset: -5%;
	background-size: cover;
	background-position: center;
	animation: ccapp-kenburns 26s ease-in-out infinite alternate;
}
.ccapp-photo-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(24, 21, 19, 0.62);
}
.ccapp-photo-bg > * { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
	.ccapp-photo-bg::before { animation: none; }
}

/* ---- Native event cards -----------------------------------------------------
   Styling for card COLUMNS built as real Divi structure (Image module
   + Text module inside a column carrying this class), so photos swap
   via the media picker and text edits visually. The class provides the
   card chrome; equal heights come from the row's flex stretch. */

.ccapp-event-card {
	background: #fff;
	border: 1.5px solid #E5E2D9;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(45, 41, 38, 0.12);
	transition: transform 0.25s var(--ccapp-ease), box-shadow 0.25s, border-color 0.25s;
	display: flex;
	flex-direction: column;
}
.ccapp-event-card:hover {
	transform: translateY(-5px);
	border-color: var(--conf-accent);
	box-shadow: 0 18px 38px rgba(45, 41, 38, 0.22);
}
.ccapp-event-card img {
	width: 100% !important;
	max-width: 100% !important;
	height: 200px !important;
	object-fit: cover;
	display: block;
	border-radius: 16px 16px 0 0;
}
/* Divi's image module wraps the img — the wrappers must span the card
   too, or the photo floats at natural width inside the box. */
.ccapp-event-card figure,
.ccapp-event-card .et_pb_image_wrap,
.ccapp-event-card .et_pb_image,
.ccapp-event-card [class*="image"] {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	display: block;
}
.ccapp-event-card .ccapp-card-copy { padding: 4px 26px 30px; }

@media (prefers-reduced-motion: reduce) {
	.ccapp-event-card:hover { transform: none; }
}

/* ---- Agenda row alignment ---------------------------------------------------
   The time column has a fixed basis so every topic starts at the same
   edge. On narrow screens the row stacks: time above, topic below,
   pills wrapping underneath. */

@media (max-width: 640px) {
	.ccapp-agenda-row { flex-wrap: wrap; row-gap: 4px; }
	.ccapp-agenda-row .ccapp-ag-time { flex: 0 0 100%; }
}

/* ---- Conference store -------------------------------------------------------
   Brand styling for the shop browse page. The page hooks classes on
   its native Woo modules (.ccapp-shop-grid, .ccapp-shop-side inside
   .ccapp-shop-page); everything else is standard WooCommerce markup. */

.ccapp-shop-page .woocommerce-breadcrumb {
	font-family: var(--ccapp-font-body);
	font-size: 0.8rem;
	color: #8a877f;
}
.ccapp-shop-page .woocommerce-breadcrumb a { color: #008C95; text-decoration: none; }

/* Product cards — selectors resilient to Divi 5's shop markup:
   match Woo product items whether or not they sit in ul.products. */
.ccapp-shop-grid li.product,
.ccapp-shop-grid ul.products > li,
.ccapp-shop-grid [class*="type-product"] {
	background: #fff;
	border: 1.5px solid #E5E2D9;
	border-radius: 18px;
	overflow: hidden;
	padding-bottom: 22px !important;
	box-shadow: 0 4px 14px rgba(45, 41, 38, 0.08);
	transition: transform 0.25s var(--ccapp-ease), box-shadow 0.25s, border-color 0.25s;
	text-align: left;
}
.ccapp-shop-grid li.product:hover,
.ccapp-shop-grid ul.products > li:hover,
.ccapp-shop-grid [class*="type-product"]:hover {
	transform: translateY(-5px);
	border-color: #008C95;
	box-shadow: 0 18px 38px rgba(45, 41, 38, 0.2);
}

/* Uniform square imagery with a slow zoom on hover */
.ccapp-shop-grid li.product a img,
.ccapp-shop-grid ul.products > li a img,
.ccapp-shop-grid [class*="type-product"] img {
	width: 100% !important;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	margin-bottom: 16px;
	transition: transform 0.6s var(--ccapp-ease);
}
.ccapp-shop-grid li.product:hover a img,
.ccapp-shop-grid ul.products > li:hover a img,
.ccapp-shop-grid [class*="type-product"]:hover img {
	transform: scale(1.06);
}

.ccapp-shop-grid .woocommerce-loop-product__title,
.ccapp-shop-grid li.product h2,
.ccapp-shop-grid li.product h3 {
	font-family: var(--ccapp-font-display) !important;
	font-weight: 500 !important;
	color: #2D2926 !important;
	font-size: 1.1rem !important;
	line-height: 1.3;
	padding: 6px 22px 0 !important;
	margin: 0 0 6px !important;
}
.ccapp-shop-grid .price {
	font-family: var(--ccapp-font-body);
	color: #008C95 !important;
	font-weight: 700 !important;
	font-size: 0.98rem;
	padding: 0 22px !important;
	margin: 0 0 4px !important;
	display: block;
}
.ccapp-shop-grid .button,
.ccapp-shop-grid .add_to_cart_button {
	font-family: var(--ccapp-font-body);
	background: #2AD2C9 !important;
	color: #04342C !important;
	border: none !important;
	border-radius: 100px !important;
	font-weight: 700 !important;
	font-size: 0.85rem;
	padding: 10px 22px !important;
	margin: 12px 20px 0 !important;
	display: inline-block;
	transition: transform 0.2s var(--ccapp-ease);
}
.ccapp-shop-grid .button:hover,
.ccapp-shop-grid .add_to_cart_button:hover { transform: scale(1.05); }
.ccapp-shop-grid .onsale {
	background: #D85A30 !important;
	color: #fff !important;
	font-weight: 700 !important;
	border-radius: 0 !important;
	z-index: 2;
}

/* Sort dropdown + result count, quietly on-brand */
.ccapp-shop-grid .woocommerce-result-count { font-family: var(--ccapp-font-body); color: #8a877f; font-size: 0.85rem; }
.ccapp-shop-grid .woocommerce-ordering select {
	font-family: var(--ccapp-font-body);
	border: 1.5px solid #E5E2D9;
	border-radius: 100px;
	padding: 8px 16px;
	color: #2D2926;
}

/* Pagination */
.ccapp-shop-grid nav.woocommerce-pagination .page-numbers li .page-numbers {
	font-family: var(--ccapp-font-body);
	border: 1.5px solid #E5E2D9;
	border-radius: 100px;
	margin: 0 3px;
	padding: 8px 15px;
	color: #2D2926;
	font-weight: 600;
}
.ccapp-shop-grid nav.woocommerce-pagination .page-numbers li .page-numbers.current,
.ccapp-shop-grid nav.woocommerce-pagination .page-numbers li .page-numbers:hover {
	background: #008C95;
	border-color: #008C95;
	color: #fff;
}

/* Category sidebar */
.ccapp-shop-side .widgettitle,
.ccapp-shop-side .widget-title {
	font-family: var(--ccapp-font-display);
	font-weight: 500;
	color: #2D2926;
	font-size: 1.2rem;
	margin-bottom: 12px;
}
.ccapp-shop-side a {
	font-family: var(--ccapp-font-body);
	color: #3a3733;
	text-decoration: none;
	transition: color 0.15s;
}
.ccapp-shop-side a:hover { color: #008C95; }
.ccapp-shop-side ul li { margin-bottom: 6px; }

@media (prefers-reduced-motion: reduce) {
	.ccapp-shop-grid ul.products li.product:hover,
	.ccapp-shop-grid ul.products li.product .button:hover { transform: none; }
}

/* ---- Store grid: true CSS grid = equal cards per row ------------------------
   Overrides WooCommerce's float layout; every card stretches to its
   row's tallest sibling. */

.ccapp-shop-grid ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 26px;
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
}
.ccapp-shop-grid ul.products > li {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	display: flex;
	flex-direction: column;
}
.ccapp-shop-grid ul.products > li::before,
.ccapp-shop-grid ul.products > li::after { display: none; }
/* Woo's clearfix pseudo-elements become phantom grid items and steal
   the first cell — remove them from the list itself too. */
.ccapp-shop-grid ul.products::before,
.ccapp-shop-grid ul.products::after {
	display: none !important;
	content: none !important;
}

@media (max-width: 1180px) { .ccapp-shop-grid ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .ccapp-shop-grid ul.products { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .ccapp-shop-grid ul.products { grid-template-columns: 1fr; } }

/* ---- Product search ---------------------------------------------------------
   Pill search form in the store hero; results use Woo's product
   search and render in this same grid. */

.ccapp-product-search {
	display: flex;
	justify-content: center;
	gap: 10px;
	max-width: 560px;
	margin: 30px auto 0;
}
.ccapp-product-search input[type="search"] {
	font-family: var(--ccapp-font-body);
	flex: 1;
	border: 1.5px solid #DDD9CE;
	border-radius: 100px;
	padding: 13px 24px;
	font-size: 0.95rem;
	color: #2D2926;
	background: #fff;
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.ccapp-product-search input[type="search"]:focus {
	border-color: #008C95;
	box-shadow: 0 0 0 3px rgba(0, 140, 149, 0.15);
}
.ccapp-product-search button {
	font-family: var(--ccapp-font-body);
	background: #2AD2C9;
	color: #04342C;
	border: none;
	border-radius: 100px;
	font-weight: 700;
	font-size: 0.9rem;
	padding: 13px 28px;
	cursor: pointer;
	transition: transform 0.2s var(--ccapp-ease);
}
.ccapp-product-search button:hover { transform: scale(1.05); }

@media (max-width: 540px) {
	.ccapp-product-search { flex-direction: column; }
	.ccapp-product-search button { width: 100%; }
}

/* Divi's shop module paints a square hover overlay (veil + icon) over
   product images — it clashes with the rounded cards and duplicates
   our hover language (lift + zoom). Gone. */
.ccapp-shop-grid .et_overlay,
.ccapp-shop-grid [class*="et_overlay"],
.ccapp-shop-grid .et_pb_extra_overlay {
	display: none !important;
}

/* ---- Cart ------------------------------------------------------------------
   Brand styling for WooCommerce's cart markup, scoped to the cart
   page. Cross-sells carry .ccapp-shop-grid and inherit the store's
   card system (narrowed to 2-up inside the half-width column). */

.ccapp-cart-page table.shop_table {
	background: #fff;
	border: 1.5px solid #E5E2D9 !important;
	border-radius: 16px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}
.ccapp-cart-page table.shop_table th {
	font-family: var(--ccapp-font-body);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #8a877f;
	background: #FAF8F2;
	border: none !important;
	border-bottom: 1.5px solid #E5E2D9 !important;
	padding: 14px 16px;
}
.ccapp-cart-page table.shop_table td {
	font-family: var(--ccapp-font-body);
	color: #2D2926;
	border: none !important;
	border-bottom: 1px solid #EFEDE6 !important;
	padding: 16px;
	vertical-align: middle;
}
.ccapp-cart-page table.shop_table tr:last-child td { border-bottom: none !important; }
.ccapp-cart-page .product-name a {
	font-weight: 600;
	color: #008C95;
	text-decoration: none;
}
.ccapp-cart-page .product-thumbnail img {
	border-radius: 10px;
	width: 64px;
	height: 64px;
	object-fit: cover;
}
.ccapp-cart-page .product-remove a {
	color: #8a877f !important;
	font-size: 1.2rem;
	text-decoration: none;
	transition: color 0.15s;
}
.ccapp-cart-page .product-remove a:hover { color: #D85A30 !important; }
.ccapp-cart-page .quantity .qty {
	font-family: var(--ccapp-font-body);
	border: 1.5px solid #DDD9CE;
	border-radius: 10px;
	padding: 8px 6px;
	width: 70px;
	text-align: center;
}

/* Coupon + action buttons */
.ccapp-cart-page .coupon .input-text {
	font-family: var(--ccapp-font-body);
	border: 1.5px solid #DDD9CE;
	border-radius: 100px;
	padding: 10px 20px;
	margin-right: 8px;
}
.ccapp-cart-page .button {
	font-family: var(--ccapp-font-body);
	background: #008C95 !important;
	color: #fff !important;
	border: none !important;
	border-radius: 100px !important;
	font-weight: 700 !important;
	font-size: 0.85rem;
	padding: 11px 24px !important;
	transition: transform 0.2s var(--ccapp-ease);
	cursor: pointer;
}
.ccapp-cart-page .button:hover { transform: scale(1.04); }
.ccapp-cart-page .button:disabled {
	background: #E5E2D9 !important;
	color: #8a877f !important;
	transform: none;
}

/* Totals card + primary checkout action */
.ccapp-cart-page .cart_totals {
	background: #fff;
	border: 1.5px solid #E5E2D9;
	border-radius: 16px;
	padding: 26px 28px;
	width: 100%;
	max-width: 560px;
	margin-left: auto;
}
.ccapp-cart-page .cart_totals h2 {
	font-family: var(--ccapp-font-display);
	font-weight: 500;
	color: #2D2926;
	font-size: 1.5rem;
	margin: 0 0 14px;
}
.ccapp-cart-page .cart_totals table.shop_table { border: none !important; }
.ccapp-cart-page .cart_totals th {
	background: transparent;
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.95rem;
	color: #5F5E5A;
}
.ccapp-cart-page .wc-proceed-to-checkout .checkout-button {
	display: block;
	text-align: center;
	background: #2AD2C9 !important;
	color: #04342C !important;
	font-size: 1rem !important;
	padding: 15px 30px !important;
}

/* Cross-sells: heading + 2-up inside the half column */
.ccapp-cart-page .cross-sells > h2,
.ccapp-cart-page .ccapp-shop-grid h2:first-child {
	font-family: var(--ccapp-font-display);
	font-weight: 500;
	color: #2D2926;
	font-size: 1.5rem;
}
.ccapp-cart-page .ccapp-shop-grid ul.products { grid-template-columns: repeat(2, 1fr); }

/* Notices */
.ccapp-cart-page .woocommerce-message,
.ccapp-cart-page .woocommerce-info {
	font-family: var(--ccapp-font-body);
	background: #E1F5EE;
	color: #085041;
	border: none;
	border-radius: 12px;
	padding: 14px 20px;
}
.ccapp-cart-page .woocommerce-error {
	font-family: var(--ccapp-font-body);
	background: #FDEBE3;
	color: #9C3A16;
	border: none;
	border-radius: 12px;
	padding: 14px 20px;
}

/* Empty cart */
.ccapp-cart-page .cart-empty {
	font-family: var(--ccapp-font-body);
	text-align: center;
	color: #5F5E5A;
	font-size: 1.05rem;
}
.ccapp-cart-page .return-to-shop { text-align: center; }

@media (prefers-reduced-motion: reduce) {
	.ccapp-cart-page .button:hover { transform: none; }
}

/* Cart suggestions: full-width row under checkout — four compact
   cards across, inheriting the store card system. */
.ccapp-suggest ul.products {
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 18px;
}
.ccapp-suggest .woocommerce-loop-product__title { font-size: 0.98rem !important; padding: 4px 16px 0 !important; }
.ccapp-suggest .price { padding: 0 16px !important; font-size: 0.9rem; }
.ccapp-suggest .button { margin: 10px 16px 0 !important; font-size: 0.8rem; padding: 9px 18px !important; }
.ccapp-suggest li.product { padding-bottom: 18px !important; }

@media (max-width: 980px) { .ccapp-suggest ul.products { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 540px) { .ccapp-suggest ul.products { grid-template-columns: 1fr !important; } }

/* Featured products beside the cart totals: one or two cards sized to
   sit level with the totals card. */
.ccapp-featured--2 ul.products { grid-template-columns: repeat(2, 1fr) !important; gap: 18px; }
.ccapp-featured--1 ul.products { grid-template-columns: 1fr !important; max-width: 420px; }
.ccapp-featured .woocommerce-loop-product__title { font-size: 1rem !important; padding: 4px 18px 0 !important; }
.ccapp-featured .price { padding: 0 18px !important; font-size: 0.92rem; }
.ccapp-featured .button { margin: 10px 18px 0 !important; font-size: 0.82rem; padding: 9px 20px !important; }
.ccapp-featured li.product { padding-bottom: 18px !important; }

@media (max-width: 980px) {
	.ccapp-featured--2 ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 540px) {
	.ccapp-featured--2 ul.products { grid-template-columns: 1fr !important; }
}

/* ---- Checkout ---------------------------------------------------------------
   Brand styling for WooCommerce checkout markup, scoped to the
   checkout page (the order-received receipt lives on the same page
   and inherits this automatically). */

/* Section headings from the Woo modules */
.ccapp-checkout-page h2,
.ccapp-checkout-page h3,
.ccapp-checkout-page #order_review_heading {
	font-family: var(--ccapp-font-display) !important;
	font-weight: 500 !important;
	color: #2D2926 !important;
}

/* Form panels as cards */
.ccapp-checkout-page .woocommerce-billing-fields,
.ccapp-checkout-page .woocommerce-shipping-fields,
.ccapp-checkout-page .woocommerce-additional-fields {
	background: #fff;
	border: 1.5px solid #E5E2D9;
	border-radius: 16px;
	padding: 26px 28px;
	margin-bottom: 22px;
}

/* Fields */
.ccapp-checkout-page label {
	font-family: var(--ccapp-font-body);
	font-weight: 600;
	font-size: 0.85rem;
	color: #5F5E5A;
	margin-bottom: 4px;
}
.ccapp-checkout-page label .required { color: #D85A30; text-decoration: none; }
.ccapp-checkout-page .input-text,
.ccapp-checkout-page select,
.ccapp-checkout-page textarea {
	font-family: var(--ccapp-font-body);
	border: 1.5px solid #DDD9CE !important;
	border-radius: 10px !important;
	padding: 12px 16px !important;
	background: #fff;
	color: #2D2926;
	width: 100%;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.ccapp-checkout-page .input-text:focus,
.ccapp-checkout-page select:focus,
.ccapp-checkout-page textarea:focus {
	border-color: #008C95 !important;
	box-shadow: 0 0 0 3px rgba(0, 140, 149, 0.15);
	outline: none;
}
.ccapp-checkout-page .form-row { margin-bottom: 14px; }

/* Woo's country/state dropdown (select2) */
.ccapp-checkout-page .select2-container--default .select2-selection--single {
	border: 1.5px solid #DDD9CE;
	border-radius: 10px;
	height: 46px;
	padding: 8px 10px;
	font-family: var(--ccapp-font-body);
}
.ccapp-checkout-page .select2-container--default .select2-selection--single .select2-selection__arrow { height: 44px; }

/* Order review table */
.ccapp-checkout-page table.shop_table {
	background: #fff;
	border: 1.5px solid #E5E2D9 !important;
	border-radius: 16px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}
.ccapp-checkout-page table.shop_table th {
	font-family: var(--ccapp-font-body);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #8a877f;
	background: #FAF8F2;
	border: none !important;
	border-bottom: 1.5px solid #E5E2D9 !important;
	padding: 14px 16px;
}
.ccapp-checkout-page table.shop_table td {
	font-family: var(--ccapp-font-body);
	color: #2D2926;
	border: none !important;
	border-bottom: 1px solid #EFEDE6 !important;
	padding: 14px 16px;
}
.ccapp-checkout-page table.shop_table tfoot th {
	background: transparent;
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.95rem;
	color: #5F5E5A;
}
.ccapp-checkout-page table.shop_table .order-total td,
.ccapp-checkout-page table.shop_table .order-total th { font-weight: 700; color: #2D2926; }

/* Payment box */
.ccapp-checkout-page #payment {
	background: #FAF8F2;
	border: 1.5px solid #E5E2D9;
	border-radius: 16px;
	margin-top: 22px;
}
.ccapp-checkout-page #payment ul.payment_methods {
	border-bottom: 1.5px solid #E5E2D9 !important;
	padding: 20px 24px;
}
.ccapp-checkout-page #payment ul.payment_methods li {
	font-family: var(--ccapp-font-body);
	color: #2D2926;
}
.ccapp-checkout-page #payment div.payment_box {
	background: #fff;
	border-radius: 10px;
	font-family: var(--ccapp-font-body);
	color: #5F5E5A;
}
.ccapp-checkout-page #payment div.payment_box::before { border-bottom-color: #fff; }
.ccapp-checkout-page .woocommerce-terms-and-conditions-wrapper {
	font-family: var(--ccapp-font-body);
	font-size: 0.85rem;
	color: #5F5E5A;
	padding: 0 24px;
}

/* The money button */
.ccapp-checkout-page #place_order {
	font-family: var(--ccapp-font-body);
	display: block;
	width: calc(100% - 48px);
	margin: 8px 24px 24px;
	background: #2AD2C9 !important;
	color: #04342C !important;
	border: none !important;
	border-radius: 100px !important;
	font-weight: 700 !important;
	font-size: 1.05rem !important;
	padding: 16px 30px !important;
	transition: transform 0.2s var(--ccapp-ease);
	cursor: pointer;
}
.ccapp-checkout-page #place_order:hover { transform: scale(1.02); }

/* Notices + coupon toggle */
.ccapp-checkout-page .woocommerce-message,
.ccapp-checkout-page .woocommerce-info {
	font-family: var(--ccapp-font-body);
	background: #E1F5EE;
	color: #085041;
	border: none;
	border-radius: 12px;
	padding: 14px 20px;
}
.ccapp-checkout-page .woocommerce-info a { color: #008C95; font-weight: 600; }
.ccapp-checkout-page .woocommerce-error {
	font-family: var(--ccapp-font-body);
	background: #FDEBE3;
	color: #9C3A16;
	border: none;
	border-radius: 12px;
	padding: 14px 20px;
}

/* Order-received receipt (same page, free styling) */
.ccapp-checkout-page .woocommerce-order-overview {
	font-family: var(--ccapp-font-body);
	background: #fff;
	border: 1.5px solid #E5E2D9;
	border-radius: 16px;
	padding: 22px 26px;
}
.ccapp-checkout-page .woocommerce-thankyou-order-received {
	font-family: var(--ccapp-font-display);
	font-size: 1.6rem;
	color: #085041;
}

@media (prefers-reduced-motion: reduce) {
	.ccapp-checkout-page #place_order:hover { transform: none; }
}

/* ---- Product detail pages ---------------------------------------------------
   Scoped to WooCommerce's single-product template — applies to every
   product automatically. */

.single-product .woocommerce-breadcrumb {
	font-family: var(--ccapp-font-body);
	font-size: 0.8rem;
	color: #8a877f;
	margin-bottom: 24px;
}
.single-product .woocommerce-breadcrumb a { color: #008C95; text-decoration: none; }

/* Gallery */
.single-product div.product div.images img {
	border-radius: 18px;
	border: 1.5px solid #E5E2D9;
}
.single-product div.product .onsale {
	background: #D85A30 !important;
	color: #fff !important;
	font-weight: 700 !important;
	border-radius: 0 !important;
	z-index: 2;
}

/* Summary */
.single-product div.product .product_title {
	font-family: var(--ccapp-font-display) !important;
	font-weight: 500 !important;
	color: #2D2926 !important;
	font-size: clamp(1.8rem, 2.6vw, 2.4rem) !important;
	line-height: 1.1;
	margin-bottom: 8px;
}
.single-product div.product .summary .price {
	font-family: var(--ccapp-font-body);
	color: #008C95 !important;
	font-weight: 700 !important;
	font-size: 1.25rem !important;
}
.single-product div.product .summary {
	font-family: var(--ccapp-font-body);
	color: #3a3733;
	line-height: 1.65;
}
.single-product div.product .summary h2,
.single-product div.product .summary h3 {
	font-family: var(--ccapp-font-display) !important;
	font-weight: 500 !important;
	color: #2D2926 !important;
	font-size: 1.35rem !important;
}

/* Variations */
.single-product table.variations th.label {
	font-family: var(--ccapp-font-body);
	font-weight: 600;
	font-size: 0.85rem;
	color: #5F5E5A;
	padding-right: 14px;
}
.single-product table.variations select {
	font-family: var(--ccapp-font-body);
	border: 1.5px solid #DDD9CE;
	border-radius: 10px;
	padding: 10px 14px;
	color: #2D2926;
	background: #fff;
}
.single-product table.variations select:focus {
	border-color: #008C95;
	box-shadow: 0 0 0 3px rgba(0, 140, 149, 0.15);
	outline: none;
}
.single-product .reset_variations { font-size: 0.8rem; color: #8a877f; }
.single-product .woocommerce-variation-price .price { font-size: 1.35rem !important; }

/* Quantity + add to cart */
.single-product .quantity .qty {
	font-family: var(--ccapp-font-body);
	border: 1.5px solid #DDD9CE;
	border-radius: 10px;
	padding: 12px 6px;
	width: 76px;
	text-align: center;
	margin-right: 10px;
}
.single-product div.product form.cart .button,
.single-product div.product .single_add_to_cart_button {
	font-family: var(--ccapp-font-body);
	background: #2AD2C9 !important;
	color: #04342C !important;
	border: none !important;
	border-radius: 100px !important;
	font-weight: 700 !important;
	font-size: 0.95rem !important;
	padding: 14px 32px !important;
	transition: transform 0.2s var(--ccapp-ease);
}
.single-product div.product form.cart .button:hover { transform: scale(1.04); }

/* SKU / category meta */
.single-product div.product .product_meta {
	font-family: var(--ccapp-font-body);
	font-size: 0.82rem;
	color: #8a877f;
	border-top: 1px solid #EFEDE6;
	padding-top: 14px;
	margin-top: 18px;
}
.single-product div.product .product_meta a { color: #008C95; text-decoration: none; }

/* Tabs -> pills + card panel */
.single-product .woocommerce-tabs ul.tabs {
	padding: 0 !important;
	margin: 0 0 -1px !important;
	display: flex;
	gap: 8px;
}
.single-product .woocommerce-tabs ul.tabs::before { border: none !important; }
.single-product .woocommerce-tabs ul.tabs li {
	background: #F4F1EA !important;
	border: 1.5px solid #E5E2D9 !important;
	border-radius: 100px !important;
	margin: 0 !important;
	padding: 0 !important;
}
.single-product .woocommerce-tabs ul.tabs li::before,
.single-product .woocommerce-tabs ul.tabs li::after { display: none !important; }
.single-product .woocommerce-tabs ul.tabs li a {
	font-family: var(--ccapp-font-body);
	font-weight: 600 !important;
	font-size: 0.85rem;
	color: #5F5E5A !important;
	padding: 10px 22px !important;
}
.single-product .woocommerce-tabs ul.tabs li.active {
	background: #008C95 !important;
	border-color: #008C95 !important;
}
.single-product .woocommerce-tabs ul.tabs li.active a { color: #fff !important; }
.single-product .woocommerce-tabs .panel {
	font-family: var(--ccapp-font-body);
	background: #fff;
	border: 1.5px solid #E5E2D9;
	border-radius: 16px;
	padding: 30px 32px !important;
	margin-top: 16px;
	color: #3a3733;
	line-height: 1.7;
}
.single-product .woocommerce-tabs .panel h2,
.single-product .woocommerce-tabs .panel h3 {
	font-family: var(--ccapp-font-display) !important;
	font-weight: 500 !important;
	color: #2D2926 !important;
}
.single-product .woocommerce-tabs .panel table.shop_attributes td,
.single-product .woocommerce-tabs .panel table.shop_attributes th {
	font-family: var(--ccapp-font-body);
	border-color: #EFEDE6;
}

/* Related + upsell products: the store card system, condensed copy */
.single-product .related > h2,
.single-product .upsells > h2 {
	font-family: var(--ccapp-font-display) !important;
	font-weight: 500 !important;
	color: #2D2926 !important;
	font-size: 1.6rem !important;
	margin: 40px 0 18px;
}
.single-product .related ul.products,
.single-product .upsells ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
}
.single-product .related ul.products::before,
.single-product .related ul.products::after,
.single-product .upsells ul.products::before,
.single-product .upsells ul.products::after { display: none !important; content: none !important; }
.single-product .related ul.products > li,
.single-product .upsells ul.products > li {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	background: #fff;
	border: 1.5px solid #E5E2D9;
	border-radius: 16px;
	overflow: hidden;
	padding-bottom: 18px !important;
	box-shadow: 0 4px 14px rgba(45, 41, 38, 0.08);
	transition: transform 0.25s var(--ccapp-ease), box-shadow 0.25s, border-color 0.25s;
}
.single-product .related ul.products > li:hover,
.single-product .upsells ul.products > li:hover {
	transform: translateY(-4px);
	border-color: #008C95;
	box-shadow: 0 16px 34px rgba(45, 41, 38, 0.18);
}
.single-product .related ul.products img,
.single-product .upsells ul.products img {
	width: 100% !important;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	margin-bottom: 12px;
	border-radius: 0;
	border: none;
}
.single-product .related .woocommerce-loop-product__title,
.single-product .upsells .woocommerce-loop-product__title {
	font-family: var(--ccapp-font-display) !important;
	font-weight: 500 !important;
	color: #2D2926 !important;
	font-size: 1rem !important;
	padding: 0 16px !important;
}
.single-product .related ul.products .price,
.single-product .upsells ul.products .price {
	font-family: var(--ccapp-font-body);
	color: #008C95 !important;
	font-weight: 700;
	font-size: 0.9rem;
	padding: 0 16px;
	display: block;
}
.single-product .related ul.products .button,
.single-product .upsells ul.products .button {
	margin: 10px 16px 0 !important;
	font-size: 0.8rem !important;
	padding: 9px 18px !important;
}

@media (max-width: 980px) {
	.single-product .related ul.products,
	.single-product .upsells ul.products { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
	.single-product .related ul.products,
	.single-product .upsells ul.products { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.single-product div.product form.cart .button:hover,
	.single-product .related ul.products > li:hover,
	.single-product .upsells ul.products > li:hover { transform: none; }
}