/**
 * COSSELIE — Πλοήγηση: mega menu (desktop) και συρτάρι (κινητό). Χρώματα/γραμματοσειρές από τα tokens.css.
 * Μαύρο, συνέχεια του header· lime μόνο στο 1+1. Οι φωτογραφίες (στυλ, μοντέλα) κουβαλούν το ύφος.
 */

.csl-mega,
.csl-drawer__panel {
	--n-bg: var(--csl-black, #000);
	--n-fg: var(--csl-white, #fff);
	--n-mute: #9a9a9a;
	--n-soft: rgba(255, 255, 255, .74);
	--n-line: rgba(255, 255, 255, .14);
	--n-hover: rgba(255, 255, 255, .08);
	--n-ph: #1d1d1d;
}

/* Το dropdown του Blocksy δεν χρειάζεται όταν υπάρχει το δικό μας πάνελ. */
body.csl-nav #header [data-id="menu"] .sub-menu { display: none !important; }
body.csl-nav #header [data-id="menu"] [data-csl-mega] .ct-toggle-dropdown-desktop,
body.csl-nav #header [data-id="menu"] [data-csl-mega] .ct-toggle-dropdown-desktop-ghost { display: none; }
body.csl-nav #header [data-id="menu"] a[aria-expanded="true"] .ct-menu-link,
body.csl-nav #header [data-id="menu"] a[aria-expanded="true"].ct-menu-link { text-decoration-color: currentColor; }

.csl-nav-badge {
	display: inline-flex; align-items: center; height: 20px; margin-left: 8px; padding: 0 7px; border-radius: 6px;
	background: var(--csl-nav-offer-bg, var(--csl-lime, #e2ff00)); color: var(--csl-nav-offer-fg, var(--csl-black, #000)); font-size: 12px; font-weight: 800; letter-spacing: 0; line-height: 1;
	vertical-align: middle; white-space: nowrap;
}
.csl-nav-ph { display: block; overflow: hidden; background: var(--n-ph, #1d1d1d); }
.csl-nav-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------------ Desktop */

.csl-mega {
	position: fixed; left: 0; right: 0; top: var(--csl-mega-top, 72px); z-index: 61;
	max-height: calc(100vh - var(--csl-mega-top, 72px)); overflow: auto; overscroll-behavior: contain;
	background: var(--n-bg); color: var(--n-fg);
	box-shadow: 0 24px 48px rgba(0, 0, 0, .3); /* χωρίς γραμμή στην κορυφή: συνεχίζει το header, όπως η αναζήτηση */
}
.csl-mega[hidden], .csl-mega__panel[hidden], .csl-mega-scrim[hidden] { display: none !important; }
.csl-mega__in { max-width: 1320px; margin: 0 auto; padding: 32px 40px 0; box-sizing: border-box; }
.csl-mega.is-anim .csl-mega__panel { animation: csl-mega-in .18s ease-out; }
@keyframes csl-mega-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.csl-mega-scrim { position: fixed; inset: 0; z-index: 58; background: rgba(0, 0, 0, .4); }

.csl-mega__grid { display: grid; grid-template-columns: 230px 280px minmax(260px, 1fr) auto; gap: 32px; align-items: start; padding-bottom: 28px; }
.csl-mega__h { margin: 0 0 12px; font-size: 13px; font-weight: 700; color: var(--n-mute); }
.csl-mega__col .csl-mega__h ~ .csl-mega__h { margin-top: 24px; }
.csl-mega a, .csl-mega a:hover, .csl-mega a:focus { color: inherit; text-decoration: none; }
.csl-mega a:focus-visible { outline: 2px solid var(--csl-lime, #e2ff00); outline-offset: 2px; border-radius: 6px; }

.csl-mega__scope { display: inline-flex; gap: 2px; margin: -4px 0 14px; padding: 3px; border-radius: 10px; background: var(--n-hover); }
.csl-mega__scope button { min-height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--n-soft); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.csl-mega__scope button:hover { color: var(--n-fg); }
.csl-mega__scope button[aria-pressed="true"] { background: var(--n-fg); color: var(--n-bg); }
.csl-mega__scope button:focus-visible { outline: 2px solid var(--csl-lime, #e2ff00); outline-offset: 2px; }
.csl-mega__links { margin: 0; padding: 0; list-style: none; }
.csl-mega__links a { display: flex; align-items: center; padding: 7px 0; font-size: 16px; font-weight: 500; }
.csl-mega__links a.is-all { font-size: 18px; font-weight: 700; }
/* Όπως στο footer: γκρι κείμενο, στο hover λευκό με υπογράμμιση (χωρίς φόντο, χωρίς σκούρο χρώμα του θέματος). */
.csl-mega__links a, .csl-mega__shapes a { color: #cfcfcf; transition: color .12s; }
.csl-mega__links a.is-all { color: var(--n-fg); }
.csl-mega__links a:hover, .csl-mega__links a:focus-visible,
.csl-mega__shapes a:hover, .csl-mega__shapes a:focus-visible { color: var(--n-fg); }
.csl-mega .csl-mega__links a:hover, .csl-mega .csl-mega__links a:focus-visible { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.csl-mega__shapes a:hover > span, .csl-mega__shapes a:focus-visible > span { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.csl-mega__shapes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 0; padding: 0; list-style: none; }
.csl-mega__shapes a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: var(--csl-radius-s, 10px); font-size: 14px; }
.csl-mega__shapes .csl-shape { width: 30px; height: 16px; color: var(--n-soft); }

.csl-mega__styles { display: flex; flex-wrap: wrap; gap: 12px 10px; margin: 0; padding: 0; list-style: none; }
.csl-mega__styles a { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 70px; font-size: 13px; font-weight: 600; text-align: center; }
.csl-mega__styles .csl-nav-ph { width: 56px; height: 56px; border-radius: 50%; box-shadow: 0 0 0 1px var(--n-line); transition: box-shadow .15s; }
.csl-mega__styles img { object-position: 50% 30%; }
.csl-mega__styles a:hover .csl-nav-ph { box-shadow: 0 0 0 2px var(--n-fg); }

.csl-mega__colors { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.csl-mega__colors a { display: block; }
.csl-mega__colors i { display: block; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); transition: transform .15s, box-shadow .15s; }
.csl-mega__colors a:hover i { transform: scale(1.12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 0 0 2px var(--n-bg), 0 0 0 3px var(--n-fg); }
.csl-mega__colors span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.csl-mega__tiles { display: flex; gap: 16px; }
.csl-mega__tile { position: relative; display: block; width: 180px; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--csl-radius, 12px); background: var(--n-ph); }
.csl-mega__tile img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; transition: transform .4s ease; }
.csl-mega__tile:hover img { transform: scale(1.04); }
.csl-mega__tile span {
	position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px;
	border-radius: 999px; background: var(--csl-white, #fff); color: var(--csl-black, #000); font-size: 14px; font-weight: 700;
}

.csl-mega__foot {
	display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
	padding: 16px 0 20px; border-top: 1px solid var(--n-line);
}
.csl-mega__guides { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; padding: 0; list-style: none; font-size: 13px; font-weight: 600; }
.csl-mega__guides a { text-decoration: underline !important; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.csl-mega__cards { display: flex; flex-wrap: wrap; gap: 20px; margin: 0; padding: 0 0 32px; list-style: none; }
.csl-mega__cards a { display: flex; flex-direction: column; gap: 10px; width: 200px; font-size: 15px; font-weight: 700; }
.csl-mega__cards .csl-nav-ph { aspect-ratio: 1; border-radius: var(--csl-radius, 12px); }
.csl-mega__cards .csl-nav-ph img { transition: transform .4s ease; }
.csl-mega__cards a:hover .csl-nav-ph img { transform: scale(1.04); }
.csl-mega__cards a:hover span:last-child { text-decoration: underline; text-underline-offset: 3px; }

/* Πάνελ με κάρτες προϊόντων (κατηγορίες με λίγα προϊόντα, π.χ. έξυπνα γυαλιά). */
.csl-mega__prods { padding-bottom: 28px; }
.csl-mega__prodhead { display: flex; align-items: baseline; gap: 20px; margin-bottom: 18px; }
.csl-mega__title { margin: 0; font-size: 20px; font-weight: 700; }
.csl-mega__all { display: inline-flex; align-items: center; font-size: 14px; font-weight: 600; text-decoration: underline !important; text-underline-offset: 3px; }
.csl-mega__cards--prod { padding-bottom: 0; }
.csl-mega__cards--prod a { width: 220px; gap: 6px; }
.csl-nav-ph--light { background: #f2f0ec; }
.csl-mega__cards--prod .csl-nav-ph img { object-fit: contain; mix-blend-mode: multiply; }
.csl-mega__pname { margin-top: 4px; font-size: 15px; font-weight: 700; }
.csl-mega__psub { font-size: 13px; color: var(--n-mute); }
.csl-mega__pprice { font-size: 14px; font-weight: 600; color: var(--n-fg); }
.csl-mega__pprice .amount, .csl-mega__pprice bdi { color: inherit !important; }
.csl-mega__pprice del { opacity: .6; margin-right: 6px; }
.csl-mega__pprice ins { text-decoration: none; color: var(--n-fg); }

@media (max-width: 1279px) {
	.csl-mega__in { padding: 28px 24px 0; }
	.csl-mega__grid { grid-template-columns: 220px 260px minmax(240px, 1fr) auto; gap: 24px; }
	.csl-mega__tile:nth-child(2) { display: none; }
}
@media (max-width: 999px) {
	.csl-mega, .csl-mega-scrim { display: none !important; }
}

/* ------------------------------------------------------------------ Κινητό: συρτάρι */

.csl-drawer { position: fixed; inset: 0; z-index: 100050; }
.csl-drawer[hidden] { display: none; }
.csl-drawer__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .4); opacity: 0; transition: opacity .25s; }
.csl-drawer__panel {
	position: absolute; top: 0; bottom: 0; left: 0; display: flex; flex-direction: column;
	width: min(440px, 100%); background: var(--n-bg); color: var(--n-fg);
	transform: translateX(-100%); transition: transform .28s cubic-bezier(.2, .8, .2, 1);
}
.csl-drawer.is-open .csl-drawer__scrim { opacity: 1; }
.csl-drawer.is-open .csl-drawer__panel { transform: none; }
.csl-drawer__panel:focus { outline: none; }
.csl-drawer a { color: inherit; text-decoration: none; }
.csl-drawer a:focus-visible, .csl-drawer button:focus-visible { outline: 2px solid var(--csl-lime, #e2ff00); outline-offset: 2px; }

.csl-drawer__top { flex: none; display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 8px 0 20px; border-bottom: 1px solid var(--n-line); background: var(--n-bg); color: var(--n-fg); }
.csl-drawer__logo { display: inline-flex; color: var(--csl-white, #fff) !important; }
.csl-drawer__logo svg { width: auto; height: 20px; }
.csl-drawer__close { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.csl-drawer__close:focus-visible { outline-color: var(--csl-lime, #e2ff00) !important; }

.csl-drawer__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 16px 20px calc(32px + env(safe-area-inset-bottom)); }

.csl-drawer__tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 12px; background: var(--n-hover); }
.csl-drawer__tabs button { min-height: 40px; padding: 0 8px; border: 0; border-radius: 9px; background: none; color: var(--n-soft); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.csl-drawer__tabs button[aria-pressed="true"] { background: var(--n-fg); color: var(--n-bg); }

.csl-drawer__rows { margin: 12px 0 0; padding: 0; list-style: none; }
.csl-drawer__rows li + li { border-top: 1px solid var(--n-line); }
.csl-drawer__rows a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 72px; padding: 8px 0; }
.csl-drawer__label { display: flex; align-items: center; font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
/* Οι φωτογραφίες προϊόντων είναι σε ανοιχτό φόντο: ανοιχτό κουτί, για να μη «κόβονται» πάνω στο μαύρο. */
.csl-drawer__rows .csl-nav-ph { flex: none; width: 64px; height: 56px; border-radius: 10px; background: #f2f0ec; }
.csl-drawer__rows .csl-nav-ph img { object-fit: contain; mix-blend-mode: multiply; padding: 4px; box-sizing: border-box; }
.csl-drawer__rows--sub .csl-nav-ph img { object-fit: cover; mix-blend-mode: normal; padding: 0; }

.csl-drawer__h { margin: 26px 0 10px; font-size: 13px; font-weight: 700; color: var(--n-mute); }

.csl-drawer__styles { display: flex; gap: 10px; margin: 0 -20px; padding: 2px 20px 4px; list-style: none; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.csl-drawer__styles::-webkit-scrollbar { display: none; }
.csl-drawer__styles li, .csl-drawer__shapes li, .csl-drawer__colors li { flex: none; scroll-snap-align: start; }
/* Σχήματα και χρώματα: όλα με τη μία, σε δεύτερη σειρά (χωρίς οριζόντια κύλιση). */
.csl-drawer__shapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 2px 0 4px; list-style: none; }
.csl-drawer__colors { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0; padding: 2px 0 4px; list-style: none; }
.csl-drawer__styles a { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 72px; font-size: 13px; font-weight: 600; }
.csl-drawer__styles .csl-nav-ph { width: 68px; height: 68px; border-radius: 50%; box-shadow: 0 0 0 1px var(--n-line); }
.csl-drawer__styles img { object-position: 50% 30%; }
.csl-drawer__shapes a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 64px; padding: 8px 4px; border: 1px solid var(--n-line); border-radius: 12px; background: var(--n-hover); font-size: 12px; font-weight: 600; letter-spacing: -.01em; text-align: center; white-space: nowrap; }
.csl-drawer__shapes .csl-shape { width: 32px; height: 17px; }
.csl-drawer__colors a { display: grid; place-items: center; width: 44px; height: 44px; }
.csl-drawer__colors i { display: block; width: 32px; height: 32px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.csl-drawer__colors span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.csl-drawer__promo {
	display: flex; align-items: center; gap: 16px; margin-top: 28px; padding: 16px 18px; border-radius: 14px;
	background: var(--csl-offer-bg, var(--csl-lime, #e2ff00)); color: var(--csl-offer-fg, var(--csl-black, #000)) !important;
}
.csl-drawer__promo b { flex: none; font-family: var(--csl-font-display, inherit); font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
/* Μεγάλο σήμα (π.χ. «ScaryStyle −30%»): από πάνω, σε μέγεθος που χωρά η μεγαλύτερη λέξη. */
.csl-drawer__promo.is-stack { flex-direction: column; align-items: flex-start; gap: 10px; container-type: inline-size; }
.csl-drawer__promo.is-stack b { flex: initial; max-width: 100%; font-size: min(40px, calc(100cqi / (var(--csl-fit, 6) * .85))); overflow-wrap: normal; }
.csl-drawer__promo span { font-size: 14px; line-height: 1.35; }
.csl-drawer__promo strong { display: block; font-size: 16px; }

.csl-drawer__help { margin: 0; padding: 0; list-style: none; }
.csl-drawer__help a { display: flex; align-items: center; gap: 12px; min-height: 48px; font-size: 16px; font-weight: 500; }
.csl-drawer__help svg { flex: none; color: var(--n-mute); }

.csl-drawer__account { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; margin-top: 20px; border-radius: var(--csl-radius, 12px); background: var(--n-fg); color: var(--n-bg) !important; font-size: 16px; font-weight: 700; }

.csl-drawer__trust { display: grid; gap: 12px; margin: 24px 0 0; padding: 18px 0 0; border-top: 1px solid var(--n-line); list-style: none; font-size: 14px; color: var(--n-soft); }
.csl-drawer__trust li { display: flex; align-items: center; gap: 12px; }
.csl-drawer__trust strong { color: var(--n-fg); }
.csl-drawer__trust svg { flex: none; }

/* Μπάρα φόρτωσης μετά από κλικ σε σύνδεσμο του μενού (μέχρι να έρθει η επόμενη σελίδα). */
html.csl-navigating::after {
	content: ""; position: fixed; top: 0; left: 0; z-index: 100100; width: 100%; height: 3px;
	background: var(--csl-lime, #e2ff00); transform-origin: 0 50%; animation: csl-nav-load 2.4s cubic-bezier(.1, .7, .2, 1) forwards;
}
@keyframes csl-nav-load { from { transform: scaleX(0); } to { transform: scaleX(.92); } }

@media (prefers-reduced-motion: reduce) {
	.csl-drawer__panel, .csl-drawer__scrim, .csl-mega__tile img, .csl-mega__cards .csl-nav-ph img { transition: none; }
	.csl-mega.is-anim .csl-mega__panel { animation: none; }
}