/*
Theme Name:   Cat Corner Child
Description:  Custom child theme for catcorner.id
Author:       Your Name
Template:     hello-elementor
Version:      1.3.87
*/

/* =========================================================
   Cat Corner — supplemental CSS
   Most styling is handled by Tailwind (loaded via CDN).
   Design system: Electric Cyan #00B4D8 (primary), Goldenrod
   #FFC300 (CTA-only), Oatmeal #F8FAFC (base), Pitch Black
   #000000 (text). See cat-corner-design-system/readme.md.
   ========================================================= */

/* ================================================================
   PAGE LOADER
   ================================================================ */

#cc-loader {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: #F8FAFC;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
	transition: opacity 0.5s ease, visibility 0.5s ease;
}
#cc-loader.cc-loader--out {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.cc-loader__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}

/* Mascot bounce */
@keyframes cc-bounce {
	0%, 100% { transform: translateY(0); }
	45%       { transform: translateY(-22px); }
	60%       { transform: translateY(-14px); }
	75%       { transform: translateY(-22px); }
}
/* Shadow pulse in sync */
@keyframes cc-shadow {
	0%, 100% { transform: scaleX(1);   opacity: 0.25; }
	45%       { transform: scaleX(0.5); opacity: 0.1;  }
	75%       { transform: scaleX(0.6); opacity: 0.12; }
}

.cc-loader__mascot {
	width: 110px;
	height: 110px;
	object-fit: contain;
	mix-blend-mode: multiply;
	animation: cc-bounce 1s ease-in-out infinite;
	filter: drop-shadow(0 6px 10px rgba(0,0,0,0.12));
}

/* Ellipse shadow under mascot */
.cc-loader__inner::after {
	content: '';
	display: block;
	width: 70px;
	height: 10px;
	border-radius: 50%;
	background: rgba(0,0,0,0.18);
	margin-top: -12px;
	animation: cc-shadow 1s ease-in-out infinite;
}

.cc-loader__brand {
	font-family: 'Outfit', system-ui, sans-serif;
	font-weight: 800;
	font-size: 22px;
	letter-spacing: -0.02em;
	color: #000;
	margin-top: 4px;
}

/* Three-dot loading indicator */
.cc-loader__dots {
	display: flex;
	gap: 7px;
	align-items: center;
}
@keyframes cc-dot {
	0%, 80%, 100% { transform: scale(0.6); opacity: 0.35; }
	40%            { transform: scale(1);   opacity: 1;    }
}
.cc-loader__dots span {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #00B4D8;
	animation: cc-dot 1.2s ease-in-out infinite;
}
.cc-loader__dots span:nth-child(1) { animation-delay: 0s;    }
.cc-loader__dots span:nth-child(2) { animation-delay: 0.2s;  background: #FFC300; }
.cc-loader__dots span:nth-child(3) { animation-delay: 0.4s;  }

/* ---- Header logo — size cap + sticker drop-shadow ---- */
.custom-logo-link img,
.custom-logo-link .custom-logo {
	max-height: 48px;
	width: auto;
	display: block;
	filter: drop-shadow(3px 5px 4px rgba(0, 0, 0, 0.15));
}

/* ---- Accessibility: skip link / screen-reader text ---- */
.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px;
	height: 1px;
	overflow: hidden;
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -1px;
}
.skip-link:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 1000;
	clip: auto;
	width: auto;
	height: auto;
	padding: 10px 16px;
	background: #1e1b18;
	color: #fff;
	border-radius: 6px;
}

/* ---- Neutralise Elementor's global link colour inside the header nav ----
   The active kit sets a global `a:hover { color: … }`; the header nav manages
   its own hover (a black underline on the cyan bar), so keep nav ink black.
   Child spans inside the mega panel set their own colours and are unaffected. */
.catcorner-nav a,
.catcorner-nav a:hover {
	color: #000000 !important; /* Pitch Black */
}

/* ---- Mobile menu (toggled by js/navigation.js) ---- */
.cc-mobile-menu {
	list-style: none;
	margin: 0;
	padding: 8px 0;
}
.cc-mobile-menu li {
	border-bottom: 1px solid #E4E9EE;
}
.cc-mobile-menu li:last-child {
	border-bottom: 0;
}
.cc-mobile-menu a {
	display: block;
	padding: 12px 4px;
	text-decoration: none;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-weight: 600;
	color: #1e1c12;
}
.cc-mobile-menu a:hover,
.cc-mobile-menu .current-menu-item > a {
	color: #00B4D8; /* Electric Cyan */
}
/* Sub-menu items get indented in the mobile list */
.cc-mobile-menu .sub-menu {
	list-style: none;
	margin: 0;
	padding-left: 16px;
}
.cc-mobile-menu .sub-menu a {
	font-weight: 500;
	color: #2A2A2A;
}

/* ---- Footer menu link colors ---- */
.cc-footer-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}
.cc-footer-menu a {
	color: #000000 !important; /* DS Pitch Black */
	text-decoration: none;
}
.cc-footer-menu a:hover {
	color: #00B4D8 !important; /* DS Electric Cyan */
}

/* ================================================================
   HEADER COMPONENTS
   ================================================================ */

/* ---- Search bar ---- */
.cc-search-input {
	width: 100%;
	padding: 9px 14px 9px 40px !important; /* !important overrides Tailwind forms plugin reset */
	border: 1.5px solid #E4E9EE !important;
	border-radius: 24px !important;
	font-family: "Plus Jakarta Sans", system-ui, sans-serif;
	font-size: 13.5px;
	color: #000;
	background: #fff !important;
	outline: none;
	transition: border-color 0.2s, box-shadow 0.2s;
	box-shadow: none !important;
}
.cc-search-input:focus {
	border-color: #00B4D8;
	box-shadow: 0 0 0 3px rgba(0, 180, 216, 0.15);
}
.cc-search-icon {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: #6B7280;
	pointer-events: none;
	display: flex;
	align-items: center;
}

/* ---- Icon buttons (account / cart / hamburger) ---- */
.cc-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: transparent;
	border: none;
	cursor: pointer;
	color: #000;
	text-decoration: none;
	transition: background 0.15s;
}
.cc-icon-btn:hover {
	background: #D6F2F8; /* cc-cyan-100 */
}
/* Tailwind Preflight sets svg{display:block}, which lets these inline icon SVGs
   get flex-shrunk to a sliver inside the 36px flex button. Pin them so they
   always render at their intrinsic 21px. */
.cc-icon-btn svg { flex-shrink: 0; }

.cc-cart-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	background: #00B4D8;
	color: #fff;
	border-radius: 100px;
	font-size: 10px;
	font-weight: 700;
	min-width: 18px;
	height: 18px;
	line-height: 18px;
	text-align: center;
	padding: 0 4px;
}

/* ---- Neutralize Elementor global-kit (#74) orange button background ----
   The active Elementor kit ships `.elementor-kit-74 button { background: var(--e-global-color-…) }`
   (orange #FF7A00, specificity 0,1,1) which overrides our transparent/white component
   buttons. Re-assert the intended styles with matching specificity. The product-card
   "Add to cart" is an <a>, so it is unaffected and stays Goldenrod. */
.elementor-kit-74 .cc-icon-btn { background: transparent; }
.elementor-kit-74 .cc-icon-btn:hover { background: #D6F2F8; }
/* The kit's bare `button { color: …; border-width: 0 }` rule hides the +/-
   glyph and the outline; re-assert ink color + border so they stay visible. */
.elementor-kit-74 .cc-qty-btn { background: #fff; color: #000; border: 1.5px solid #000; }
.elementor-kit-74 .cc-qty-btn:hover:not(:disabled) { background: #F1F5F8; }

/* ================================================================
   HEADER — full-bleed cyan bar (Absolute Collagen layout)
   nav (left) · centred logo · icon actions (right, pinned to edge)
   ================================================================ */

.cc-header {
	background: #fff;
	border-bottom: 2px solid #000;     /* sticker-style ink keyline */
	font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}

/* Full-bleed bar: no max-width centring, so actions hug the page edge */
.cc-header__bar {
	position: relative;                /* positioning context for the mega panels */
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 24px;
}
@media (min-width: 1024px) {
	.cc-header__bar { padding: 14px 40px; }
}

/* Three balanced zones keep the logo optically centred */
.cc-header__left  { flex: 1 1 0; display: flex; align-items: center; justify-content: flex-start; min-width: 0; }
.cc-header__right { flex: 1 1 0; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.cc-header__logo  { flex: 0 0 auto; display: inline-flex; align-items: center; text-decoration: none; }
.cc-header__logo-text {
	font-family: "Outfit", system-ui, sans-serif;
	font-weight: 800;
	font-size: 22px;
	color: #000;
	white-space: nowrap;
}

.cc-header .cc-icon-btn { color: #000; }

/* ---- Primary nav links ---- */
.cc-nav-links {
	display: flex;
	align-items: center;
	gap: 26px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.cc-nav-item { position: static; }     /* so mega panels resolve against .cc-header__bar */

.cc-nav-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 0;
	color: #000;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.01em;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: border-color 0.15s;
	white-space: nowrap;
	background: transparent;
	cursor: pointer;
}
.cc-nav-link:hover,
.cc-nav-item:hover .cc-nav-link,
.cc-nav-link.is-current {
	border-bottom-color: #000;
}
.cc-nav-caret { transition: transform 0.2s ease; }
.cc-nav-item.is-open .cc-nav-caret { transform: rotate(180deg); }

/* ---- Mega panel (image-rich dropdown) ---- */
.cc-mega {
	position: absolute;
	top: 100%;
	left: 0;         /* overridden by JS to align below the parent link */
	transform: translateY(8px);
	width: min(860px, calc(100vw - 48px));
	background: #fff;
	border: 2px solid #000;
	border-radius: 18px;
	box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.12);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	z-index: 40;
}
/* Invisible bridge so the cursor can cross the bar→panel gap without closing */
.cc-mega::before {
	content: "";
	position: absolute;
	top: -12px;
	left: 0;
	right: 0;
	height: 12px;
}
.cc-nav-item.is-open .cc-mega,
.cc-nav-item:focus-within .cc-mega {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}
.cc-mega__inner {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 28px;
	padding: 26px 28px;
}
.cc-mega__links {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px 24px;
	align-content: start;
	list-style: none;
	margin: 0;
	padding: 0;
}
.cc-mega__link {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 12px;
	border-radius: 10px;
	text-decoration: none;
	transition: background 0.15s;
}
.cc-mega__link:hover { background: #D6F2F8; }   /* cc-cyan-100 */
.cc-mega__link-title {
	font-family: "Outfit", system-ui, sans-serif;
	font-weight: 700;
	font-size: 15px;
	color: #000;
	line-height: 1.25;
}
.cc-mega__link-desc {
	font-size: 12.5px;
	color: #6B7280;
	line-height: 1.35;
}

/* Promo card on the right of the panel */
.cc-mega__promo {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 230px;
	padding: 18px;
	border-radius: 14px;
	background: #F8FAFC;
	border: 2px solid #000;
	overflow: hidden;
	text-decoration: none;
	transition: box-shadow 0.18s, transform 0.18s;
}
.cc-mega__promo:hover {
	box-shadow: 4px 4px 0 #00B4D8;
	transform: translate(-1px, -1px);
}
.cc-mega__promo-media {
	position: absolute;
	inset: -10% -10% 28% -10%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cc-mega__promo-media img {
	max-width: 78%;
	max-height: 78%;
	object-fit: contain;
	filter: drop-shadow(3px 5px 6px rgba(0, 0, 0, 0.18));
}
.cc-mega__promo-body {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.cc-mega__promo-eyebrow {
	font-family: "Chewy", cursive;
	font-size: 13px;
	color: #00B4D8;
}
.cc-mega__promo-heading {
	font-family: "Outfit", system-ui, sans-serif;
	font-weight: 800;
	font-size: 16px;
	line-height: 1.2;
	color: #000;
}
.cc-mega__promo-cta {
	margin-top: 4px;
	font-weight: 700;
	font-size: 13px;
	color: #000;
}

/* ---- Search panel (toggled by the search icon) ---- */
.cc-search-panel {
	border-top: 2px solid #000;
	background: #fff;
	padding: 16px 24px;
}
.cc-search-panel[hidden] { display: none; }
.cc-search-panel__form {
	position: relative;
	max-width: 720px;
	margin: 0 auto;
}
@media (min-width: 1024px) {
	.cc-search-panel { padding: 16px 40px; }
}

/* ================================================================
   FOOTER COMPONENTS
   ================================================================ */

.cc-footer {
	/* Footer-scoped neutral ramp for the dark (Pitch Black) surface.
	   The DS muted token (#6B7280) is tuned for LIGHT backgrounds, so on
	   black we use lighter neutrals that clear WCAG AA. Accent stays brand cyan. */
	--footer-bg:        #000000;            /* DS Pitch Black */
	--footer-fg:        #CBD2DA;            /* body + links — ~10:1 on black */
	--footer-fg-strong: #FFFFFF;            /* headings + brand name */
	--footer-fg-muted:  #9CA3AF;            /* bottom bar — ~8:1, passes AA */
	--footer-accent:    #00B4D8;            /* DS Electric Cyan (hover) */
	--footer-divider:   rgba(255, 255, 255, 0.1);

	background: var(--footer-bg);
	color: var(--footer-fg);
	font-family: "Plus Jakarta Sans", system-ui, sans-serif;
	font-size: 14px;
	margin-top: 48px;
}

.cc-footer__top {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr 1fr;
	gap: 32px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 60px 20px 40px;
	border-bottom: 1px solid var(--footer-divider);
}

/* Responsive: stack on mobile */
@media (max-width: 767px) {
	.cc-footer__top {
		grid-template-columns: 1fr 1fr;
		gap: 24px;
		padding: 40px 20px 32px;
	}
	.cc-footer__brand {
		grid-column: 1 / -1;
	}
}
@media (max-width: 479px) {
	.cc-footer__top {
		grid-template-columns: 1fr;
	}
}

.cc-footer__brand a {
	display: block;
}
.cc-footer-logo {
	max-height: 240px;
	width: auto;
	display: block;
	filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.12)) drop-shadow(3px 4px 6px rgba(0, 0, 0, 0.6));
}
.cc-footer__name {
	font-family: "Outfit", system-ui, sans-serif;
	font-size: 20px;
	font-weight: 800;
	color: var(--footer-fg-strong);
}
.cc-footer__brand p {
	margin-top: 8px;
	line-height: 1.6;
	/* inherits --footer-fg from .cc-footer */
}

/* Footer column headings. Rendered as <h2> (styled small) so the document
   outline goes H1 -> H2 without skipping levels. */
.cc-footer .cc-footer__col h2 {
	color: var(--footer-fg-strong);
	font-family: "Outfit", system-ui, sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.2;
	margin: 0 0 16px;
}
.cc-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.cc-footer__col ul li {
	margin-bottom: 10px;
}
.cc-footer__col ul li a {
	color: var(--footer-fg);
	text-decoration: none;
	transition: color 0.2s;
}
.cc-footer__col ul li a:hover,
.cc-footer__col ul li a:focus-visible {
	color: var(--footer-accent);
}

.cc-footer__bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
	color: var(--footer-fg-muted);
	font-size: 12px;
	gap: 16px;
}
.cc-footer__bottom p {
	margin: 0;
}
.cc-footer__pay {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	flex-shrink: 0;
}

/* ================================================================
   HEADER — Cart dropdown panel
   ================================================================ */

.cc-cart-panel {
	position: absolute;
	top: calc(100% + 10px);
	right: -8px;
	width: 320px;
	background: #fff;
	border: 2px solid #000;
	border-radius: 16px;
	box-shadow: 4px 4px 0 #000;
	z-index: 200;
	display: none;
	flex-direction: column;
	overflow: hidden;
}
.cc-cart-panel.is-open { display: flex; }

/* Arrow pointer toward the cart button */
.cc-cart-panel::before {
	content: '';
	position: absolute;
	top: -9px;
	right: 18px;
	width: 14px;
	height: 14px;
	background: #fff;
	border-top: 2px solid #000;
	border-left: 2px solid #000;
	transform: rotate(45deg);
	z-index: 1;
}

.cc-cart-panel__head {
	padding: 14px 16px 12px;
	border-bottom: 1.5px solid #E4E9EE;
}
.cc-cart-panel__title {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 15px;
	color: #000;
}
.cc-cart-panel__count {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 500;
	font-size: 13px;
	color: #6B7280;
}

/* Items scroll area */
.cc-cart-panel__items {
	overflow-y: auto;
	max-height: 260px;
}
.cc-cart-panel__items::-webkit-scrollbar { width: 4px; }
.cc-cart-panel__items::-webkit-scrollbar-track { background: transparent; }
.cc-cart-panel__items::-webkit-scrollbar-thumb { background: #E4E9EE; border-radius: 2px; }

.cc-cart-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	border-bottom: 1px solid #F1F5F8;
}
.cc-cart-item:last-child { border-bottom: none; }

.cc-cart-item__img {
	width: 52px;
	height: 52px;
	object-fit: cover;
	border-radius: 8px;
	border: 1.5px solid #E4E9EE;
	flex-shrink: 0;
}
.cc-cart-item__info {
	flex: 1;
	min-width: 0;
}
.cc-cart-item__name {
	font-family: 'Outfit', sans-serif;
	font-weight: 700;
	font-size: 13px;
	color: #000;
	line-height: 1.3;
	margin: 0 0 3px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cc-cart-item__price {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 600;
	font-size: 12px;
	color: #FFC300;
	margin: 0;
}

/* Qty +/- controls */
.cc-cart-item__qty {
	display: flex;
	align-items: center;
	gap: 5px;
	flex-shrink: 0;
}
.cc-qty-btn {
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1.5px solid #000;
	border-radius: 6px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background 0.15s;
	padding: 0;
}
.cc-qty-btn:hover:not(:disabled) { background: #F1F5F8; }
.cc-qty-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.cc-qty-num {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 700;
	font-size: 13px;
	min-width: 18px;
	text-align: center;
	color: #000;
}

/* Footer: total + action buttons */
.cc-cart-panel__footer {
	padding: 12px 16px 14px;
	border-top: 1.5px solid #E4E9EE;
	background: #F8FAFC;
}
.cc-cart-panel__total-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: #6B7280;
}
.cc-cart-panel__total-amount {
	font-family: 'Outfit', sans-serif;
	font-weight: 800;
	font-size: 16px;
	color: #000;
}
.cc-cart-panel__actions { display: flex; gap: 8px; }
.cc-cart-panel__btn {
	display: block;
	flex: 1;
	text-align: center;
	padding: 9px 10px;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 12px;
	font-weight: 700;
	border-radius: 100px;
	text-decoration: none;
	white-space: nowrap;
	transition: box-shadow 0.15s, transform 0.15s, background 0.15s;
}
.cc-cart-panel__btn--outline {
	background: #fff;
	border: 2px solid #000;
	color: #000;
}
.cc-cart-panel__btn--outline:hover { background: #F1F5F8; }
.cc-cart-panel__btn--primary {
	background: #FFC300;
	border: 2px solid #000;
	color: #000;
	box-shadow: 2px 2px 0 #000;
}
.cc-cart-panel__btn--primary:hover {
	box-shadow: 3px 3px 0 #000;
	transform: translate(-1px, -1px);
}

/* Empty cart state */
.cc-cart-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 32px 20px;
	gap: 10px;
	text-align: center;
}
.cc-cart-empty__label {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 14px;
	color: #6B7280;
	margin: 0;
}
.cc-cart-panel__shop-btn {
	display: inline-block;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: 13px;
	font-weight: 700;
	color: #000;
	background: #FFC300;
	padding: 9px 20px;
	border-radius: 100px;
	border: 2px solid #000;
	box-shadow: 2px 2px 0 #000;
	text-decoration: none;
	transition: box-shadow 0.15s, transform 0.15s;
}
.cc-cart-panel__shop-btn:hover {
	box-shadow: 3px 3px 0 #000;
	transform: translate(-1px, -1px);
}

/* ================================================================
   HOMEPAGE — Hero Slider
   3-slide carousel: 2 WC products + seasonal promo.
   Dithering Bayer-matrix canvas animation via hero-slider.js.
   ================================================================ */

.cc-hero-slider {
  padding: 48px 16px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  background: #F8FAFC;
}

.cc-hero-slider__card {
  position: relative;
  width: 100%;
  max-width: 1200px;
  overflow: hidden;
  border-radius: 48px;
  border: 2px solid #000;
  background: #F8FAFC;
  box-shadow: 6px 6px 0 #000;
  min-height: 600px;
  transition: box-shadow 0.5s ease;
}

/* Dithering canvas overlay: JS appends <canvas> inside */
.cc-hero-dither-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.42;
  mix-blend-mode: multiply;
}
.cc-hero-dither-overlay canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Low-res field bilinearly upscaled + a touch of blur → soft, gas-like flow
     (no image-rendering:pixelated, which is what made it look like squares). */
  filter: blur(4px);
}

/* ── Slide track ──────────────────────────────────────── */
.cc-hero-slider__track {
  display: flex;
  width: 100%;
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.cc-hero-slide {
  min-width: 100%;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 600px;
  box-sizing: border-box;
}

.cc-hero-slide__inner {
  width: 100%;
  max-width: 1100px;
  padding: 64px 80px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Centered layout for promo slide */
.cc-hero-slide__inner--centered {
  align-items: center;
  text-align: center;
  min-height: 600px;
  justify-content: center;
  padding: 80px 52px;
}

/* ── Badge pill ───────────────────────────────────────── */
.cc-hero-slide__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 18px;
  border-radius: 9999px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  width: fit-content;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1.5px solid rgba(0, 0, 0, 0.08);
}
.cc-hero-slide__badge--cyan {
  background: rgba(0, 180, 216, 0.08);
  color: #0090AD;
}
.cc-hero-slide__badge--gold {
  background: rgba(255, 195, 0, 0.14);
  color: #7A5800;
}

/* Animated ping dot inside the badge */
.cc-ping-dot {
  position: relative;
  display: inline-flex;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00B4D8;
  flex-shrink: 0;
}
.cc-ping-dot::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #00B4D8;
  opacity: 0.75;
  animation: cc-ping 1.4s ease-in-out infinite;
}
.cc-ping-dot--gold { background: #FFC300; }
.cc-ping-dot--gold::before { background: #FFC300; }

@keyframes cc-ping {
  0%        { transform: scale(1);   opacity: 0.75; }
  75%, 100% { transform: scale(2.4); opacity: 0;    }
}

/* ── Product slide two-column layout ─────────────────── */
.cc-hero-slide__layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

/* Copy */
.cc-hero-slide__copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Ancestor-qualified to outrank the Elementor kit's `.elementor-kit-74 h1`
   (specificity 0,1,1), which otherwise forces its display font onto our H1. */
.cc-hero-slider .cc-hero-slide__title {
  font-family: 'Outfit', system-ui, sans-serif !important;
  font-weight: 800;
  font-size: clamp(2rem, 4.2vw, 3.6rem);
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: #000;
  margin: 0;
}

.cc-hero-slider .cc-hero-slide__title--promo {
  font-size: clamp(2.6rem, 5.5vw, 4.8rem);
  line-height: 0.95;
}

.cc-hero-promo-accent { color: #00B4D8; }

.cc-hero-slide__desc {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: #6B7280;
  margin: 0;
  max-width: 44ch;
}
.cc-hero-slide__desc--centered {
  max-width: 52ch;
  text-align: center;
}

.cc-hero-slide__price {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  color: #000;
  line-height: 1.1;
}
.cc-hero-slide__price .woocommerce-Price-amount { color: #000; }
.cc-hero-slide__price ins { text-decoration: none; }
.cc-hero-slide__price del {
  color: #9CA3AF;
  font-size: 0.85em;
  margin-right: 6px;
}

.cc-hero-slide__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* ── Reusable hero buttons ────────────────────────────── */
.cc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 9999px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  border: 2px solid #000;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s, color 0.15s;
  white-space: nowrap;
  line-height: 1;
}
.cc-btn:hover { transform: translate(-2px, -2px); }

/* AJAX add-to-cart in-flight state (any [data-cc-add] button) */
[data-cc-add].is-adding {
  opacity: 0.65;
  pointer-events: none;
  cursor: progress;
}

.cc-btn--gold {
  background: #FFC300;
  color: #000;
  box-shadow: 3px 3px 0 #000;
}
.cc-btn--gold:hover {
  box-shadow: 5px 5px 0 #000;
  color: #000;
}

.cc-btn--outline {
  background: transparent;
  color: #000;
  box-shadow: none;
}
.cc-btn--outline:hover {
  background: #000;
  color: #fff;
  transform: translate(-2px, -2px);
}

/* ── Art column ───────────────────────────────────────── */
.cc-hero-slide__art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}

/* Product floats free on a transparent background — no card, uncropped.
   Soft drop-shadow gives depth; gentle bob animation adds life. */
.cc-hero-slide__img {
  position: relative;
  width: 100%;
  max-width: 440px;
  height: auto;
  max-height: 480px;
  object-fit: contain;
  filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.22));
  animation: cc-hero-float-img 5s ease-in-out infinite;
}

@keyframes cc-hero-float-img {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

@media (prefers-reduced-motion: reduce) {
  .cc-hero-slide__img { animation: none; }
}

/* Floating sticker badges on the art */
.cc-hero-float-sticker {
  position: absolute;
  font-family: 'Chewy', cursive;
  font-size: 13px;
  letter-spacing: 0.03em;
  padding: 7px 16px;
  border-radius: 9999px;
  border: 2px solid #000;
  white-space: nowrap;
  pointer-events: none;
}
.cc-hero-float-sticker--a {
  top: 10%;
  right: 2%;
  background: #00B4D8;
  color: #fff;
  box-shadow: 2px 2px 0 #000;
}
.cc-hero-float-sticker--b {
  bottom: 12%;
  left: -4%;
  background: #FFC300;
  color: #000;
  box-shadow: 2px 2px 0 #000;
}

/* ── Navigation dots ──────────────────────────────────── */
.cc-hero-slider__dots {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 8px;
  align-items: center;
}

.cc-hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
  border: 2px solid rgba(0, 0, 0, 0.3);
  cursor: pointer;
  padding: 0;
  transition: background 0.3s, width 0.3s, border-color 0.3s;
}
.cc-hero-dot--active {
  background: #000;
  border-color: #000;
  width: 28px;
}

/* ── Prev/Next arrows ─────────────────────────────────── */
.cc-hero-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #000;
  box-shadow: 2px 2px 0 #000;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
  padding: 0;
}
.cc-hero-nav:hover {
  background: #FFC300;
  box-shadow: 3px 3px 0 #000;
  transform: translateY(-50%) scale(1.08);
}
.cc-hero-nav--prev { left: 20px; }
.cc-hero-nav--next { right: 20px; }

/* ── Hero slider responsive ───────────────────────────── */
@media (max-width: 900px) {
  .cc-hero-nav { display: none; }
  .cc-hero-slider { padding: 24px 12px; }
  .cc-hero-slider__card {
    border-radius: 28px;
    min-height: 520px;
  }
  .cc-hero-slide { min-height: 520px; }
  .cc-hero-slide__inner { padding: 52px 28px 60px; }
  .cc-hero-slide__inner--centered {
    padding: 72px 28px;
    min-height: 520px;
  }
  .cc-hero-slide__layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  /* Lead with the product image on mobile, copy below — more engaging
     above the fold. `order` flips the visual order without touching markup. */
  .cc-hero-slide__art {
    order: -1;
    min-height: 0;
    max-width: 300px;
    margin: 0 auto;
  }
  .cc-hero-slide__img { max-height: 320px; }
  /* Keep the floating badges on mobile (image now leads) — smaller, and
     anchored inside the art bounds so they don't clip against the card edge. */
  .cc-hero-float-sticker {
    font-size: 11px;
    padding: 5px 12px;
  }
  .cc-hero-float-sticker--a { top: 4%;    right: 0; }
  .cc-hero-float-sticker--b { bottom: 6%; left: 0; }
}

@media (max-width: 480px) {
  .cc-hero-slider__card {
    border-radius: 20px;
    min-height: 480px;
  }
  .cc-hero-slide { min-height: 480px; }
  .cc-hero-slide__inner {
    padding: 44px 20px 56px;
    gap: 16px;
  }
  .cc-hero-slide__inner--centered {
    padding: 64px 20px;
    min-height: 480px;
  }
  .cc-hero-slide__art { max-width: 260px; }
  .cc-hero-slide__img { max-height: 280px; }
  .cc-hero-float-sticker { font-size: 10px; padding: 4px 10px; }
  .cc-hero-nav { width: 36px; height: 36px; }
  .cc-hero-nav--prev { left: 10px; }
  .cc-hero-nav--next { right: 10px; }
  .cc-hero-slider__dots { bottom: 18px; }
}

/* ================================================================
   ARTICLE HERO — blog index & post archives reuse the hero slider
   but feature posts (framed photo, category eyebrow, read time).
   ================================================================ */
.cc-hero-slide__copy--article { gap: 14px; }

.cc-hero-article-eyebrow {
  display: inline-flex;
  align-items: center;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0090AD;
}

.cc-hero-article-meta {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #6B7280;
}

/* Editorial headlines can run long — clamp so they never blow out the card. */
.cc-hero-slider .cc-hero-slide__title--article {
  font-size: clamp(1.8rem, 3.4vw, 3rem);
  line-height: 1.08;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cc-hero-slide__desc--article {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Photos get a bordered, rounded frame (brand neo-brutalist card) instead of
   the transparent free-float used for product PNGs. Keeps the gentle bob. */
.cc-hero-article-frame {
  position: relative;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 4 / 3;
  border-radius: 28px;
  border: 2px solid #000;
  box-shadow: 6px 6px 0 #000;
  overflow: hidden;
  background: #D6F2F8;
  animation: cc-hero-float-img 5s ease-in-out infinite;
}
.cc-hero-article-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cc-hero-article-frame__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cc-hero-article-frame__placeholder img {
  width: 88px;
  height: 88px;
  object-fit: contain;
  opacity: 0.45;
}

@media (prefers-reduced-motion: reduce) {
  .cc-hero-article-frame { animation: none; }
}

@media (max-width: 900px) {
  .cc-hero-article-frame { max-width: 320px; margin: 0 auto; }
}
@media (max-width: 480px) {
  .cc-hero-article-frame { max-width: 280px; }
}

/* ================================================================
   HOMEPAGE — Floating badge animations
   ================================================================ */

@keyframes cc-float-a {
	0%, 100% { transform: rotate(3deg) translateY(0px); }
	50%       { transform: rotate(3deg) translateY(-14px); }
}
@keyframes cc-float-b {
	0%, 100% { transform: rotate(-2deg) translateY(-10px); }
	50%       { transform: rotate(-2deg) translateY(4px); }
}
@keyframes cc-float-c {
	0%, 100% { transform: rotate(5deg) translateY(-6px); }
	50%       { transform: rotate(5deg) translateY(8px); }
}

.cc-hero-badge-a { animation: cc-float-a 3.2s ease-in-out infinite; }
.cc-hero-badge-b { animation: cc-float-b 3.8s ease-in-out infinite; }
.cc-hero-badge-c { animation: cc-float-c 4.1s ease-in-out infinite; }

/* ================================================================
   HOMEPAGE — Running-text ticker (sits below the hero)
   Black band, white display type, cyan "/" separators.
   ================================================================ */

.cc-marquee {
	background: #FFC300;
	overflow: hidden;
	padding: 16px 0;
	width: 100%;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.cc-marquee__track {
	display: inline-flex;
	flex-wrap: nowrap;
	white-space: nowrap;
	will-change: transform;
	animation: cc-marquee-scroll 32s linear infinite;
}
.cc-marquee:hover .cc-marquee__track {
	animation-play-state: paused;
}
.cc-marquee__group {
	display: inline-flex;
	align-items: center;
	gap: 2.5rem;
	padding-right: 2.5rem;
}
.cc-marquee__item,
.cc-marquee__sep {
	font-family: 'Outfit', sans-serif;
	font-weight: 800;
	font-size: 20px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1;
}
.cc-marquee__item { color: #000; }
.cc-marquee__sep  { color: #000; }

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

@media (prefers-reduced-motion: reduce) {
	.cc-marquee__track { animation: none; }
}

@media (max-width: 480px) {
	.cc-marquee { padding: 12px 0; }
	.cc-marquee__item,
	.cc-marquee__sep { font-size: 16px; }
	.cc-marquee__group { gap: 1.5rem; padding-right: 1.5rem; }
}

/* ================================================================
   HOMEPAGE — 3D circular category gallery
   ================================================================ */

.cc-gallery {
	position: relative;
	width: 460px;
	height: 460px;
	margin: 0 auto;
	perspective: 1400px;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
	touch-action: pan-y;
}
.cc-gallery:active { cursor: grabbing; }

/* The rotating cylinder — JS sets rotateY() each frame */
.cc-gallery__stage {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	will-change: transform;
}

/* Each card — JS sets rotateY(i*angle) translateZ(radius) once */
.cc-gallery__card {
	--cw: 190px;
	--ch: 250px;
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--cw);
	height: var(--ch);
	margin-left: calc(var(--cw) / -2);
	margin-top: calc(var(--ch) / -2);
	border: 2px solid #000;
	border-radius: 18px;
	overflow: hidden;
	background: linear-gradient(160deg, #EAF8FB 0%, #FFF7DC 100%);
	box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.85);
	text-decoration: none;
	color: #fff;
	backface-visibility: hidden;
	scale: 1;
	transition: opacity 0.25s linear, scale 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.cc-gallery__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	padding: 10px 10px 56px;
	box-sizing: border-box;
	pointer-events: none;
}
/* Full-bleed lifestyle photos: no padding, cover the whole card */
.cc-gallery__img--cover {
	object-fit: cover;
	padding: 0;
}

.cc-gallery__label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 30px 14px 12px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.cc-gallery__name {
	font-family: "Outfit", system-ui, sans-serif;
	font-weight: 800;
	font-size: 15px;
	line-height: 1.15;
	color: #fff;
}
.cc-gallery__cta {
	font-family: "Plus Jakarta Sans", system-ui, sans-serif;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.03em;
	color: #FFC300;
}

/* Mascot above the gallery wheel */
@keyframes cc-mascot-float {
	0%, 100% { transform: translateY(0); }
	50%       { transform: translateY(-8px); }
}
.cc-gallery__mascot-top {
	width: 80px;
	height: 80px;
	object-fit: contain;
	mix-blend-mode: multiply;
	filter: drop-shadow(0 4px 10px rgba(0,0,0,0.15));
	animation: cc-mascot-float 2.8s ease-in-out infinite;
	margin-bottom: -68px;
	position: relative;
	z-index: 10;
	pointer-events: none;
}

/* ================================================================
   FLOATING WHATSAPP BUTTON — site-wide persistent contact entry point
   ================================================================ */
.cc-wa-float {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 40;
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #25D366;
	border: 2px solid #000;
	border-radius: 50%;
	box-shadow: 3px 3px 0 #000;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.cc-wa-float:hover {
	transform: translateY(-3px) scale(1.05);
	box-shadow: 5px 5px 0 #000;
}
.cc-wa-float svg {
	width: 28px;
	height: 28px;
	fill: #fff;
}
@media (max-width: 640px) {
	.cc-wa-float {
		right: 14px;
		bottom: 14px;
		width: 50px;
		height: 50px;
	}
	.cc-wa-float svg {
		width: 25px;
		height: 25px;
	}
}

/* ── Card hover animations ──────────────────────────────── */
/* CSS `scale` composes with the JS-controlled `transform` (rotateY translateZ) without conflict */
.cc-gallery__card:hover {
	scale: 1.07;
}
.cc-gallery__label {
	transition: background 0.3s ease;
}
.cc-gallery__card:hover .cc-gallery__label {
	background: linear-gradient(to top, rgba(0,0,0,0.92), rgba(0,0,0,0.15));
}
.cc-gallery__cta {
	transition: color 0.2s ease, letter-spacing 0.2s ease;
}
.cc-gallery__card:hover .cc-gallery__cta {
	color: #fff;
	letter-spacing: 0.06em;
}

/* ================================================================
   HOMEPAGE — overflow & responsive layout
   ================================================================ */

/* Prevent horizontal scroll from decorative absolute elements.
   Use `clip`, not `hidden`: `overflow-x: hidden` forces overflow-y to `auto`,
   making <body> a scroll container and breaking `position: sticky` site-wide
   (e.g. the sticky product gallery). `clip` clips without that side effect. */
body {
	overflow-x: clip;
}

/* 3D gallery: shrink on tablet/phone */
@media (max-width: 900px) {
	.cc-gallery {
		width: min(360px, 86vw);
		height: min(360px, 86vw);
	}
	.cc-gallery__card {
		--cw: 150px;
		--ch: 200px;
	}
}
@media (max-width: 480px) {
	.cc-gallery {
		width: min(310px, 88vw);
		height: min(310px, 88vw);
	}
	.cc-gallery__card {
		--cw: 132px;
		--ch: 176px;
	}
}

/* ================================================================
   HOMEPAGE — responsive layout overrides
   Overrides inline styles on front-page.php elements.
   Must live here (in <head> stylesheet) so the cascade applies
   before the browser paints — not in a body <style> block.
   ================================================================ */

@media (max-width: 900px) {

	/* Hero: collapse to single column */
	.cc-fp-hero-grid {
		grid-template-columns: 1fr !important;
		padding: 96px 20px 48px !important;
		gap: 32px !important;
	}
	.cc-fp-h1 {
		font-size: clamp(2.4rem, 10vw, 3.5rem) !important;
		line-height: 1.05 !important;
	}
	.cc-fp-hero-right {
		min-height: 280px !important;
		max-width: 420px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* Trust strip: 2 columns */
	.cc-fp-trust-grid {
		grid-template-columns: 1fr 1fr !important;
	}

	/* Catalog section: single column, tighter padding */
	.cc-fp-catalog-outer {
		padding: 56px 20px !important;
	}
	.cc-fp-catalog-grid {
		grid-template-columns: 1fr !important;
		gap: 40px !important;
	}

	/* Statement section: clamp large headline */
	.cc-fp-statement-text {
		font-size: clamp(2rem, 10vw, 4rem) !important;
	}

	/* Newsletter card: reduce heavy padding */
	.cc-fp-newsletter-card {
		padding: 40px 24px !important;
	}
}

@media (max-width: 480px) {
	/* Trust strip: single column on small phones */
	.cc-fp-trust-grid {
		grid-template-columns: 1fr !important;
	}
}