/* =========================================================================
   Creative Category Showcase – base styles
   Layout / shape / template rules live in ccs-devices.css and are compiled
   per device (desktop / tablet / mobile) by PHP.
   ========================================================================= */

.ccs {
	--ccs-radius: 18px;
	--ccs-accent: #111;
	--ccs-speed: 30s;
	--ccs-arrow-size: 42px;
	--ccs-track-pad: 14px;
	position: relative;
	width: 100%;
	box-sizing: border-box;
	color: var(--ccs-ink, inherit);
	font-family: var(--ccs-font-body, inherit);
}
.ccs *,
.ccs *::before,
.ccs *::after { box-sizing: border-box; }

.ccs-viewport { position: relative; }

.ccs .ccs-track {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
}
.ccs .ccs-item {
	margin: 0;
	padding: 0;
	min-width: 0;
	list-style: none;
}
.ccs .ccs-item::before,
.ccs .ccs-item::marker { content: none; }

.ccs .ccs-clone { display: none !important; }

/* ---- Card -------------------------------------------------------------- */
.ccs .ccs-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none !important;
	outline-offset: 4px;
	transform: perspective(900px) rotateX(var(--ccs-rx, 0deg)) rotateY(var(--ccs-ry, 0deg)) translateY(var(--ccs-lift, 0px)) rotate(var(--ccs-rot, 0deg));
	transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s ease, background-color .3s ease;
}
.ccs .ccs-card:focus-visible { outline: 2px solid var(--ccs-accent); }

.ccs .ccs-media {
	position: relative;
	display: block;
	width: 100%;
	flex: 0 0 auto;
	aspect-ratio: var(--ccs-ratio, 1/1);
	overflow: hidden;
	isolation: isolate;
	background: var(--ccs-media-bg, #eef0f3);
	transition: border-radius .6s ease, box-shadow .35s ease;
}
.ccs .ccs-media .ccs-img,
.ccs .ccs-media img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	margin: 0;
	border-radius: 0;
	object-fit: cover;
	transition: transform .7s cubic-bezier(.2, .7, .2, 1), filter .5s ease;
}
.ccs .ccs-shade {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0;
	background: linear-gradient(to top, var(--ccs-shade-color, rgba(0, 0, 0, .72)) 0%, rgba(0, 0, 0, 0) 72%);
	transition: opacity .4s ease;
}

.ccs .ccs-content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 4px;
	padding: 14px 6px 2px;
}
.ccs .ccs-title {
	margin: 0;
	padding: 0;
	font-family: var(--ccs-font-head, inherit);
	font-size: var(--ccs-head-size, 1.05rem);
	font-weight: var(--ccs-head-weight, 600);
	font-style: var(--ccs-head-style, normal);
	letter-spacing: var(--ccs-head-spacing, normal);
	text-transform: var(--ccs-head-transform, none);
	line-height: 1.3;
	color: inherit;
	transition: color .3s ease, transform .3s ease, background-color .3s ease, background-size .4s ease;
}
.ccs .ccs-count { font-size: .85rem; opacity: .8; color: var(--ccs-muted, inherit); }
.ccs .ccs-desc {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--ccs-desc-lines, 3);
	overflow: hidden;
	font-size: .88rem;
	line-height: 1.5;
	opacity: .85;
}
.ccs .ccs-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	font-size: .85rem;
	font-weight: 600;
	transition: gap .3s ease, background-color .3s ease, color .3s ease;
}
.ccs .ccs-btn svg { width: 1em; height: 1em; }
.ccs .ccs-card:hover .ccs-btn { gap: 10px; }

.ccs .ccs-badge {
	position: absolute;
	top: 10px;
	inset-inline-start: 10px;
	z-index: 4;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--ccs-accent);
	color: var(--ccs-on-accent, #fff);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .04em;
	text-transform: uppercase;
	pointer-events: none;
}

.ccs-rtl .ccs-btn svg,
.ccs-rtl .ccs-arrow svg { transform: scaleX(-1); }

/* ---- Hover effects ----------------------------------------------------- */
.ccs-hover-zoom .ccs-card:hover .ccs-img { transform: scale(1.08); }

.ccs-hover-lift .ccs-card:hover { --ccs-lift: -8px; }
.ccs-hover-lift .ccs-card:hover .ccs-media { box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .35); }

.ccs-hover-tilt .ccs-card { transition: transform .18s ease-out, box-shadow .45s ease; }
.ccs-hover-tilt .ccs-card:hover .ccs-img { transform: scale(1.06); }

.ccs-hover-grayscale .ccs-img { filter: grayscale(1); }
.ccs-hover-grayscale .ccs-card:hover .ccs-img { filter: none; transform: scale(1.04); }

.ccs-hover-shine .ccs-media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%);
	transform: translateX(-120%);
	transition: transform .9s ease;
}
.ccs-hover-shine .ccs-card:hover .ccs-media::after { transform: translateX(120%); }

.ccs-hover-ring .ccs-card:hover .ccs-media { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--ccs-accent); }

/* ---- Carousel navigation ---------------------------------------------- */
.ccs .ccs-arrow {
	display: none;
	position: absolute;
	top: 50%;
	z-index: 6;
	width: var(--ccs-arrow-size);
	height: var(--ccs-arrow-size);
	min-height: 0;
	margin: calc(var(--ccs-arrow-size) / -2) 0 0;
	padding: 0;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: var(--ccs-arrow-bg, #fff);
	color: var(--ccs-arrow-color, #111);
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
	transition: opacity .3s ease, transform .3s ease, background-color .3s ease, color .3s ease;
}
.ccs .ccs-arrow svg { width: 45%; height: 45%; }
.ccs .ccs-arrow:hover { transform: scale(1.08); }
.ccs .ccs-arrow:disabled { opacity: .35; cursor: default; transform: none; }
.ccs .ccs-prev { inset-inline-start: 10px; }
.ccs .ccs-next { inset-inline-end: 10px; }
.ccs-arrows-outside .ccs-prev { inset-inline-start: calc(var(--ccs-arrow-size) * -1 - 12px); }
.ccs-arrows-outside .ccs-next { inset-inline-end: calc(var(--ccs-arrow-size) * -1 - 12px); }

.ccs .ccs-dots {
	display: none;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 18px;
}
.ccs .ccs-dot {
	width: 8px;
	height: 8px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--ccs-dot-color, rgba(0, 0, 0, .2));
	cursor: pointer;
	transition: width .3s ease, background-color .3s ease;
}
.ccs .ccs-dot.is-active { width: 24px; background: var(--ccs-dot-active, #111); }
.ccs.ccs-nav-static .ccs-arrow,
.ccs.ccs-nav-static .ccs-dots { display: none !important; }

/* ---- Marquee keyframes ------------------------------------------------- */
@keyframes ccs-marquee { to { transform: translateX(-50%); } }
@keyframes ccs-marquee-rtl { to { transform: translateX(50%); } }
@keyframes ccs-swing { 0% { transform: rotate(0); } 25% { transform: rotate(-7deg); } 55% { transform: rotate(4deg); } 80% { transform: rotate(-2deg); } 100% { transform: rotate(0); } }

/* ---- Entrance animations ---------------------------------------------
   Done in JS with the Web Animations API so items are NEVER hidden by CSS:
   if JS is delayed, blocked or CSS is "optimized", items stay visible. */


/* =========================================================================
   STORE STYLE PRESETS
   Only CSS variables – every Elementor Style control still overrides them.
   ========================================================================= */
.ccs-preset-abaya {
	--ccs-font-head: 'Cormorant Garamond', 'Amiri', Georgia, serif;
	--ccs-font-body: 'Cormorant Garamond', 'Amiri', Georgia, serif;
	--ccs-head-size: 1.4rem; --ccs-head-weight: 600; --ccs-head-spacing: .02em;
	--ccs-ink: #3b3128; --ccs-muted: #8a7b6b;
	--ccs-accent: #b08d57; --ccs-accent-2: #b08d57; --ccs-on-accent: #fff;
	--ccs-surface: #f7f2ea; --ccs-on-surface: #3b3128; --ccs-media-bg: #efe7db;
	--ccs-frame: rgba(255, 255, 255, .85); --ccs-shade-color: rgba(43, 32, 20, .65);
	--ccs-radius: 6px; --ccs-chip-bg: #f3ece2; --ccs-chip-bg-hover: #eadfcd;
	--ccs-pill-bg: #fffaf3; --ccs-pill-color: #3b3128; --ccs-list-bg: #f7f2ea;
}
.ccs-preset-fashion {
	--ccs-font-head: 'Playfair Display', 'Amiri', Georgia, serif;
	--ccs-font-body: 'Tajawal', 'Helvetica Neue', Arial, sans-serif;
	--ccs-head-size: 1.05rem; --ccs-head-weight: 700; --ccs-head-spacing: .1em; --ccs-head-transform: uppercase;
	--ccs-ink: #111; --ccs-muted: #707070;
	--ccs-accent: #111; --ccs-accent-2: #c8102e; --ccs-on-accent: #fff;
	--ccs-surface: #fff; --ccs-on-surface: #111; --ccs-media-bg: #f1f1f1;
	--ccs-frame: #111; --ccs-shade-color: rgba(0, 0, 0, .72);
	--ccs-radius: 0px; --ccs-chip-bg: #f1f1f1; --ccs-pill-bg: #111; --ccs-pill-color: #fff;
}
.ccs-preset-boutique {
	--ccs-font-head: 'Jost', 'Tajawal', sans-serif;
	--ccs-font-body: 'Jost', 'Tajawal', sans-serif;
	--ccs-head-size: 1rem; --ccs-head-weight: 500; --ccs-head-spacing: .08em; --ccs-head-transform: uppercase;
	--ccs-ink: #2b2b2b; --ccs-muted: #8b8178;
	--ccs-accent: #9c6b5a; --ccs-accent-2: #e9ddd3; --ccs-on-accent: #fff;
	--ccs-surface: #faf7f4; --ccs-on-surface: #2b2b2b; --ccs-media-bg: #f1ebe5;
	--ccs-frame: #d8c8bb; --ccs-shade-color: rgba(40, 28, 22, .6);
	--ccs-radius: 14px; --ccs-chip-bg: #f1ebe5;
}
.ccs-preset-luxury {
	--ccs-font-head: 'Cinzel', 'Amiri', Georgia, serif;
	--ccs-font-body: 'Tajawal', 'Helvetica Neue', Arial, sans-serif;
	--ccs-head-size: 1rem; --ccs-head-weight: 600; --ccs-head-spacing: .16em; --ccs-head-transform: uppercase;
	--ccs-ink: #1a1a1a; --ccs-muted: #8f8676;
	--ccs-accent: #c9a54c; --ccs-accent-2: #c9a54c; --ccs-on-accent: #111;
	--ccs-surface: #121212; --ccs-on-surface: #f3ead7; --ccs-media-bg: #1c1c1c;
	--ccs-frame: rgba(201, 165, 76, .75); --ccs-shade-color: rgba(0, 0, 0, .78);
	--ccs-radius: 4px; --ccs-chip-bg: #f4efe4; --ccs-chip-bg-hover: #ebe2cf; --ccs-pill-bg: #121212; --ccs-pill-color: #c9a54c;
}
.ccs-preset-beauty {
	--ccs-font-head: 'Jost', 'Tajawal', sans-serif;
	--ccs-font-body: 'Jost', 'Tajawal', sans-serif;
	--ccs-head-size: 1.05rem; --ccs-head-weight: 500; --ccs-head-spacing: .02em;
	--ccs-ink: #4a2c34; --ccs-muted: #9b7480;
	--ccs-accent: #d4778f; --ccs-accent-2: #f6dfe4; --ccs-on-accent: #fff;
	--ccs-surface: #fff5f7; --ccs-on-surface: #4a2c34; --ccs-media-bg: #fbe9ee;
	--ccs-frame: #f0c4cf; --ccs-shade-color: rgba(74, 44, 52, .6);
	--ccs-radius: 26px; --ccs-chip-bg: #fbe9ee; --ccs-chip-bg-hover: #f6d6df;
	--ccs-pill-bg: #fff; --ccs-pill-color: #4a2c34; --ccs-list-bg: #fff5f7;
}
.ccs-preset-kids {
	--ccs-font-head: 'Baloo Bhaijaan 2', 'Comic Sans MS', sans-serif;
	--ccs-font-body: 'Baloo Bhaijaan 2', sans-serif;
	--ccs-head-size: 1.15rem; --ccs-head-weight: 800;
	--ccs-ink: #2d2a5a; --ccs-muted: #6b68a0;
	--ccs-accent: #ff7a59; --ccs-on-accent: #fff;
	--ccs-surface: #fff; --ccs-on-surface: #2d2a5a; --ccs-media-bg: #fff4d6;
	--ccs-shade-color: rgba(45, 42, 90, .6);
	--ccs-radius: 28px; --ccs-chip-bg: #fff4d6;
}
.ccs-preset-kids .ccs-item:nth-child(6n+1) { --ccs-accent: #ff7a59; }
.ccs-preset-kids .ccs-item:nth-child(6n+2) { --ccs-accent: #4cc9f0; }
.ccs-preset-kids .ccs-item:nth-child(6n+3) { --ccs-accent: #ffb703; }
.ccs-preset-kids .ccs-item:nth-child(6n+4) { --ccs-accent: #52b788; }
.ccs-preset-kids .ccs-item:nth-child(6n+5) { --ccs-accent: #b185db; }
.ccs-preset-kids .ccs-item:nth-child(6n+6) { --ccs-accent: #ff8fab; }
.ccs-preset-accessories {
	--ccs-font-head: 'Montserrat', 'Tajawal', sans-serif;
	--ccs-font-body: 'Montserrat', 'Tajawal', sans-serif;
	--ccs-head-size: 1rem; --ccs-head-weight: 700;
	--ccs-ink: #14213d; --ccs-muted: #5b6475;
	--ccs-accent: #f5c843; --ccs-accent-2: #1b6fb3; --ccs-on-accent: #14213d;
	--ccs-surface: #fff; --ccs-on-surface: #14213d; --ccs-media-bg: #fff6d6;
	--ccs-frame: #1b6fb3; --ccs-shade-color: rgba(20, 33, 61, .7);
	--ccs-radius: 22px; --ccs-chip-bg: #fff6d6; --ccs-chip-bg-hover: #ffeaa0;
	--ccs-pill-bg: #f5c843; --ccs-pill-color: #14213d;
}
.ccs-preset-accessories .ccs-item:nth-child(even) { --ccs-media-bg: #e3f0fb; }
.ccs-preset-tech {
	--ccs-font-head: 'Rubik', 'Segoe UI', sans-serif;
	--ccs-font-body: 'Rubik', 'Segoe UI', sans-serif;
	--ccs-head-size: 1.05rem; --ccs-head-weight: 700; --ccs-head-spacing: -.01em;
	--ccs-ink: #0f172a; --ccs-muted: #64748b;
	--ccs-accent: #2563eb; --ccs-accent-2: #22d3ee; --ccs-on-accent: #fff;
	--ccs-surface: #0f172a; --ccs-on-surface: #e2e8f0; --ccs-media-bg: #e8eef7;
	--ccs-frame: #2563eb; --ccs-shade-color: rgba(15, 23, 42, .82);
	--ccs-radius: 14px; --ccs-chip-bg: #eef2f8;
}
.ccs-preset-sport {
	--ccs-font-head: 'Oswald', 'Cairo', 'Arial Narrow', sans-serif;
	--ccs-font-body: 'Cairo', 'Arial', sans-serif;
	--ccs-head-size: 1.2rem; --ccs-head-weight: 700; --ccs-head-spacing: .02em;
	--ccs-head-transform: uppercase; --ccs-head-style: italic;
	--ccs-ink: #111; --ccs-muted: #555;
	--ccs-accent: #c6ff00; --ccs-accent-2: #ff3d00; --ccs-on-accent: #111;
	--ccs-surface: #111; --ccs-on-surface: #fff; --ccs-media-bg: #e9e9e9;
	--ccs-frame: #111; --ccs-shade-color: rgba(0, 0, 0, .78);
	--ccs-radius: 0px; --ccs-chip-bg: #f0f0f0;
}
.ccs-preset-home {
	--ccs-font-head: 'DM Serif Display', 'Amiri', Georgia, serif;
	--ccs-font-body: 'Tajawal', 'Helvetica Neue', Arial, sans-serif;
	--ccs-head-size: 1.35rem; --ccs-head-weight: 400;
	--ccs-ink: #3d2f26; --ccs-muted: #8c7b6e;
	--ccs-accent: #b5653a; --ccs-accent-2: #7d8f69; --ccs-on-accent: #fff;
	--ccs-surface: #faf6f0; --ccs-on-surface: #3d2f26; --ccs-media-bg: #efe6da;
	--ccs-frame: #c9b8a6; --ccs-shade-color: rgba(61, 47, 38, .65);
	--ccs-radius: 8px; --ccs-chip-bg: #f2ebe2; --ccs-list-bg: #faf6f0;
}
.ccs-preset-grocery {
	--ccs-font-head: 'Nunito', 'Tajawal', sans-serif;
	--ccs-font-body: 'Nunito', 'Tajawal', sans-serif;
	--ccs-head-size: 1.05rem; --ccs-head-weight: 800;
	--ccs-ink: #1f3d2b; --ccs-muted: #5f7f69;
	--ccs-accent: #2e9e5b; --ccs-accent-2: #ffb703; --ccs-on-accent: #fff;
	--ccs-surface: #fff; --ccs-on-surface: #1f3d2b; --ccs-media-bg: #eaf6ee;
	--ccs-frame: #2e9e5b; --ccs-shade-color: rgba(31, 61, 43, .65);
	--ccs-radius: 20px; --ccs-chip-bg: #eaf6ee;
}
.ccs-preset-grocery .ccs-item:nth-child(3n+2) { --ccs-media-bg: #fff3d6; }
.ccs-preset-grocery .ccs-item:nth-child(3n+3) { --ccs-media-bg: #fde8e4; }

/* ---- Editor notice ----------------------------------------------------- */
.ccs-empty {
	padding: 18px;
	border: 2px dashed #c7cbd1;
	border-radius: 10px;
	color: #555;
	text-align: center;
	font-size: 14px;
}

/* ---- Accessibility: reduced motion ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.ccs *,
	.ccs *::before,
	.ccs *::after { animation: none !important; transition: none !important; }
	.ccs .ccs-track { scroll-behavior: auto !important; }
	.ccs[class*="-marquee"] .ccs-viewport { overflow-x: auto !important; }
}