/* ==========================================================================
   WooCommerce Category Carousel
   ========================================================================== */

.wccc-wrapper {
	--wccc-accent: #B5623A;
	--wccc-ink: #1C1A17;
	--wccc-muted: #6B6660;
	--wccc-surface: #FFFFFF;
	--wccc-track-gap: 28px;
	--wccc-sticky-top: 0px;
	box-sizing: border-box;
	position: relative;
	width: 100%;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.wccc-wrapper *,
.wccc-wrapper *::before,
.wccc-wrapper *::after {
	box-sizing: border-box;
}

.wccc-title {
	margin: 0 0 22px;
	font-size: clamp(22px, 2.4vw, 30px);
	font-weight: 650;
	letter-spacing: -0.01em;
	color: var(--wccc-ink);
}

/* --------------------------------------------------------------------
   Carousel shell + arrows
   -------------------------------------------------------------------- */

.wccc-carousel-outer {
	position: relative;
	display: flex;
	align-items: center;
}

.wccc-track {
	display: flex;
	gap: var(--wccc-track-gap);
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-x;
	padding: 6px 4px 18px;
	margin: 0 -4px;
	list-style: none;
	scrollbar-width: none;
	cursor: grab;
	user-select: none;
}

.wccc-track:active {
	cursor: grabbing;
}

.wccc-track::-webkit-scrollbar {
	display: none;
}

.wccc-track.wccc-dragging {
	scroll-snap-type: none;
}

.wccc-slide {
	scroll-snap-align: start;
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	text-decoration: none;
	color: var(--wccc-ink);
	outline-offset: 6px;
}

.wccc-slide-image-frame {
	position: relative;
	display: block;
	border-radius: 999px;
	overflow: hidden;
	background: #F1EEE9;
	transition: transform 0.4s cubic-bezier(.22, 1, .36, 1), box-shadow 0.4s cubic-bezier(.22, 1, .36, 1);
}

.wccc-slide-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier(.22, 1, .36, 1);
}

.wccc-slide-name {
	position: relative;
	display: inline-block;
	margin-top: 14px;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--wccc-ink);
}

.wccc-slide-name::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -5px;
	width: 0%;
	height: 2px;
	background: var(--wccc-accent);
	transform: translateX(-50%);
	transition: width 0.35s cubic-bezier(.22, 1, .36, 1);
}

.wccc-slide:hover .wccc-slide-name::after,
.wccc-slide:focus-visible .wccc-slide-name::after {
	width: 60%;
}

.wccc-slide:hover .wccc-slide-image-frame,
.wccc-slide:focus-visible .wccc-slide-image-frame {
	box-shadow: 0 10px 26px -12px rgba(28, 26, 23, 0.35);
}

.wccc-slide:hover .wccc-slide-image,
.wccc-slide:focus-visible .wccc-slide-image {
	transform: scale(1.08);
}

.wccc-slide-count {
	margin-top: 4px;
	font-size: 12.5px;
	color: var(--wccc-muted);
}

/* Arrows */

.wccc-arrow {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 999px;
	border: 1px solid rgba(28, 26, 23, 0.12);
	background: var(--wccc-surface);
	color: var(--wccc-ink);
	cursor: pointer;
	transition: background 0.25s ease, transform 0.2s ease, border-color 0.25s ease, opacity 0.2s ease;
	z-index: 2;
}

.wccc-arrow:hover {
	background: var(--wccc-ink);
	border-color: var(--wccc-ink);
	color: #fff;
}

.wccc-arrow:active {
	transform: scale(0.94);
}

.wccc-arrow[disabled] {
	opacity: 0;
	pointer-events: none;
}

.wccc-arrow-prev {
	margin-right: 14px;
}

.wccc-arrow-next {
	margin-left: 14px;
}

@media (max-width: 640px) {
	.wccc-arrow {
		display: none;
	}
}

/* --------------------------------------------------------------------
   Large style — homepage. Bigger imagery, scrolls with the page.
   -------------------------------------------------------------------- */

.wccc-style-large {
	padding: 8px 0 4px;
	margin-top: clamp(40px, 6vw, 72px);
}

.wccc-style-large .wccc-slide {
	width: clamp(150px, 15vw, 210px);
}

.wccc-style-large .wccc-slide-image-frame {
	width: clamp(150px, 15vw, 210px);
	height: clamp(150px, 15vw, 210px);
	animation: wccc-float 3.6s ease-in-out infinite;
}

/* Stagger the float so items don't bob in unison */
.wccc-style-large .wccc-slide:nth-child(2n) .wccc-slide-image-frame { animation-delay: -0.6s; animation-duration: 4s; }
.wccc-style-large .wccc-slide:nth-child(3n) .wccc-slide-image-frame { animation-delay: -1.4s; animation-duration: 3.2s; }
.wccc-style-large .wccc-slide:nth-child(4n) .wccc-slide-image-frame { animation-delay: -2.1s; animation-duration: 4.3s; }
.wccc-style-large .wccc-slide:nth-child(5n) .wccc-slide-image-frame { animation-delay: -0.3s; animation-duration: 3.7s; }

@keyframes wccc-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-9px); }
}

/* Continuous auto-scroll mode: hand scroll position fully to JS, no
   native smoothing or snapping fighting the per-frame updates. iOS's
   momentum-scroll (-webkit-overflow-scrolling: touch) can otherwise
   conflict with programmatic scrollLeft updates, so it's turned off here. */
.wccc-wrapper[data-continuous="yes"] .wccc-track {
	scroll-behavior: auto;
	scroll-snap-type: none;
	-webkit-overflow-scrolling: auto;
	will-change: scroll-position;
}

.wccc-style-large .wccc-slide-name {
	font-size: 17px;
}

/* Exactly 5 columns on mobile, regardless of screen width — sizes are
   percentage-based against the carousel's own width, so they scale
   cleanly across phones instead of using a fixed pixel size. */
@media (max-width: 640px) {
	.wccc-style-large {
		--wccc-track-gap: 10px;
	}

	.wccc-style-large .wccc-slide {
		flex: 0 0 calc((100% - (4 * var(--wccc-track-gap))) / 5);
		width: calc((100% - (4 * var(--wccc-track-gap))) / 5);
	}

	.wccc-style-large .wccc-slide-image-frame {
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
		animation-name: wccc-sidebar-float; /* smaller-amplitude float suits the smaller size */
	}

	.wccc-style-large .wccc-slide-name {
		font-size: 11.5px;
		margin-top: 8px;
	}

	.wccc-style-large .wccc-slide-count {
		display: none;
	}
}

/* --------------------------------------------------------------------
   Compact style — shop page. Small imagery, sits in a slim sticky bar.
   -------------------------------------------------------------------- */

.wccc-style-compact {
	--wccc-track-gap: 20px;
}

.wccc-style-compact .wccc-slide {
	width: clamp(64px, 7vw, 84px);
}

.wccc-style-compact .wccc-slide-image-frame {
	width: clamp(64px, 7vw, 84px);
	height: clamp(64px, 7vw, 84px);
}

.wccc-style-compact .wccc-slide-name {
	margin-top: 8px;
	font-size: 12.5px;
	font-weight: 600;
}

.wccc-style-compact .wccc-track {
	padding: 12px 4px 12px;
}

.wccc-style-compact .wccc-arrow {
	width: 34px;
	height: 34px;
}

.wccc-style-compact .wccc-title {
	display: none;
}

/* --------------------------------------------------------------------
   Sticky behaviour — shop page only.
   The offset (--wccc-sticky-top) is calculated in JS from the real
   header height, so this bar sits just under the header, never over it.
   -------------------------------------------------------------------- */

.wccc-sticky-yes {
	position: sticky;
	top: var(--wccc-sticky-top);
	z-index: 490;
}

.wccc-sticky-yes .wccc-sticky-inner {
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid rgba(28, 26, 23, 0.08);
	padding: 0 20px;
}

@media (max-width: 640px) {
	.wccc-sticky-yes .wccc-sticky-inner {
		padding: 0 12px;
	}
}

/* --------------------------------------------------------------------
   Shop sidebar — fixed floating panel on the right edge of the screen.
   Shows briefly on load, then slides to a small arrow tab. Clicking the
   tab slides the panel back in/out. If left closed, the tab shakes
   periodically to draw attention.
   -------------------------------------------------------------------- */

.wccc-sidebar {
	--wccc-panel-width: 190px;
	position: fixed;
	top: 50%;
	right: 0;
	z-index: 9999;
	display: flex;
	align-items: stretch;
	transform: translateY(-50%) translateX(0);
	transition: transform 0.55s cubic-bezier(.22, 1, .36, 1);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.wccc-sidebar.wccc-sidebar-hidden {
	transform: translateY(-50%) translateX(var(--wccc-panel-width));
}

.wccc-sidebar-toggle {
	flex: 0 0 auto;
	width: 34px;
	align-self: center;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px 0;
	background: var(--wccc-surface, #fff);
	color: var(--wccc-ink, #1C1A17);
	border: 1px solid rgba(28, 26, 23, 0.1);
	border-right: none;
	border-radius: 12px 0 0 12px;
	box-shadow: -6px 4px 18px -10px rgba(28, 26, 23, 0.28);
	cursor: pointer;
	transition: background 0.25s ease, color 0.25s ease;
}

.wccc-sidebar-toggle:hover {
	background: var(--wccc-accent, #B5623A);
	color: #fff;
	border-color: var(--wccc-accent, #B5623A);
}

.wccc-sidebar-toggle-icon {
	transition: transform 0.4s cubic-bezier(.22, 1, .36, 1);
}

.wccc-sidebar.wccc-sidebar-hidden .wccc-sidebar-toggle-icon {
	transform: rotate(180deg);
}

.wccc-sidebar-panel {
	width: var(--wccc-panel-width);
	max-height: 72vh;
	overflow-y: auto;
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: saturate(180%) blur(10px);
	-webkit-backdrop-filter: saturate(180%) blur(10px);
	border: 1px solid rgba(28, 26, 23, 0.1);
	border-radius: 0 0 0 16px;
	box-shadow: -10px 8px 30px -14px rgba(28, 26, 23, 0.3);
	padding: 18px 14px;
	scrollbar-width: thin;
}

.wccc-sidebar-title {
	margin: 0 0 12px;
	font-size: 12.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wccc-muted, #6B6660);
}

.wccc-sidebar-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.wccc-sidebar-item {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--wccc-ink, #1C1A17);
}

.wccc-sidebar-item-image {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 999px;
	overflow: hidden;
	background: #F1EEE9;
	animation: wccc-sidebar-float 3.4s ease-in-out infinite;
}

/* Stagger so the little thumbnails don't all bob in unison */
.wccc-sidebar-item:nth-child(2n) .wccc-sidebar-item-image { animation-delay: -0.5s; animation-duration: 3.8s; }
.wccc-sidebar-item:nth-child(3n) .wccc-sidebar-item-image { animation-delay: -1.1s; animation-duration: 3s; }
.wccc-sidebar-item:nth-child(4n) .wccc-sidebar-item-image { animation-delay: -1.8s; animation-duration: 4.1s; }
.wccc-sidebar-item:nth-child(5n) .wccc-sidebar-item-image { animation-delay: -0.2s; animation-duration: 3.5s; }

@keyframes wccc-sidebar-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-5px); }
}

.wccc-sidebar-item-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s cubic-bezier(.22, 1, .36, 1);
}

.wccc-sidebar-item-name {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}

.wccc-sidebar-item:hover .wccc-sidebar-item-image img,
.wccc-sidebar-item:focus-visible .wccc-sidebar-item-image img {
	transform: scale(1.12);
}

.wccc-sidebar-item:hover .wccc-sidebar-item-name,
.wccc-sidebar-item:focus-visible .wccc-sidebar-item-name {
	color: var(--wccc-accent, #B5623A);
}

/* Attention-grabbing shake, triggered from JS by toggling this class */
@keyframes wccc-shake-kf {
	0%, 100% { transform: translateX(0) rotate(0deg); }
	15% { transform: translateX(-4px) rotate(-9deg); }
	30% { transform: translateX(4px) rotate(9deg); }
	45% { transform: translateX(-3px) rotate(-6deg); }
	60% { transform: translateX(3px) rotate(5deg); }
	75% { transform: translateX(-2px) rotate(-2deg); }
	90% { transform: translateX(1px) rotate(1deg); }
}

.wccc-sidebar-toggle.wccc-shake {
	animation: wccc-shake-kf 0.7s ease-in-out;
}

@media (max-width: 640px) {
	.wccc-sidebar {
		--wccc-panel-width: min(62vw, 190px);
	}
	.wccc-sidebar-panel {
		padding: 14px 10px;
	}
	.wccc-sidebar-item-image {
		width: 36px;
		height: 36px;
	}
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
	.wccc-track {
		scroll-behavior: auto;
	}
	.wccc-slide-image-frame,
	.wccc-slide-image,
	.wccc-slide-name::after,
	.wccc-arrow {
		transition: none;
	}
	.wccc-style-large .wccc-slide-image-frame {
		animation: none;
	}
	.wccc-sidebar,
	.wccc-sidebar-toggle-icon,
	.wccc-sidebar-item-image {
		transition: none;
		animation: none;
	}
	.wccc-sidebar-toggle.wccc-shake {
		animation: none;
	}
}