/*
 * MTS Technik / ChassiPro — CSS που ΔΕΝ υπάρχει στη μακέτα.
 *
 * Το mts.css είναι byte-identical με το MTS-home.html και δεν γράφεται ποτέ.
 * Εδώ ζει μόνο ό,τι είναι νέο: το mega menu 3 πάνελ (§4.2), το μαύρο κουμπί
 * αναζήτησης (§4.3), και τα ελάχιστα στυλ για markup τρίτων που παραμένει
 * στη σελίδα μας.
 *
 * Απόφαση 12/09/2026 (πύλη αποδοχής): στις σελίδες body.mts-page δεν
 * τυπώνεται κανένα stylesheet Woodmart / WooCommerce / Elementor / WP core.
 * Γι' αυτό ΔΕΝ υπάρχουν πια εδώ overrides font-family και focus-visible —
 * έγιναν περιττά, δεν υπάρχει τίποτα να υπερκαλυφθεί.
 *
 * Μεταβλητές της μακέτας:
 * --yellow #fec608 · --ink #1a1a1a · --white #fff · --line #dde1e5
 * --wash #f5f6f7 · --input #747b84 · --muted #5b616a · --drawer-shadow
 */

/* ---------------------------------------------------------------------------
   BRIEF-09 §7.2 (απάντηση ΣΤΟΠ 6 #1) — Roboto ΤΟΠΙΚΑ (όχι Google Fonts: ταχύτητα + GDPR). Ένα woff2 ανά βάρος που
   χρησιμοποιείται (στατικό instance του Roboto[wdth,wght] της google/fonts, OFL — assets/fonts/Roboto-OFL.txt),
   Latin + Latin Ext-A + Greek. Ο browser κατεβάζει μόνο τα βάρη που εμφανίζονται στη σελίδα (το 900 μόνο στην αρχική).
   --------------------------------------------------------------------------- */
@font-face { font-family: Roboto; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/roboto-400.woff2") format("woff2"); }
@font-face { font-family: Roboto; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/roboto-500.woff2") format("woff2"); }
@font-face { font-family: Roboto; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/roboto-700.woff2") format("woff2"); }
/* 900: μόνο το marquee της αρχικής (κάτω από την πρώτη οθόνη) — φορτώνει μετά το «load» με FontFace (functions.php, mts_loaded_class) */

/* ---------------------------------------------------------------------------
   §4.2 — Mega menu 3 πάνελ (desktop)

   BRIEF-01c Ε1 (13/09/2026): το πάνελ κεντράρεται ως προς τον container του
   header (.head .wrap — max 1440 px, gutter μακέτας 56 px ≥ 1280 / 32 px
   768–1279) και δεν βγαίνει ποτέ από το viewport. Ως τώρα αγκυρωνόταν στην
   αριστερή άκρη του «Προϊόντα» και σε μη μεγιστοποιημένο παράθυρο ξέφευγε
   δεξιά.

   Πλάτος min(960px, 100%): το 100% είναι το πλάτος του container, δηλαδή
   viewport − scrollbar − 2 × gutter. Όχι 100vw, που μετράει και τη scrollbar.
   Ύψος container 96 px, άρα το top:100% πέφτει όπου και πριν.
   --------------------------------------------------------------------------- */

body.mts-page .head .nav {
	align-self: stretch;
}

/* Σημείο αναφοράς του πάνελ. Κανένα άλλο στοιχείο μέσα στο .head .wrap δεν
   είναι absolute/fixed, οπότε τίποτα άλλο δεν μετακινείται. */
body.mts-page .head .wrap {
	position: relative;
}

body.mts-page .mts-mega-wrap {
	display: flex;
	align-items: center;
	align-self: stretch;
}

body.mts-page #mts-mega {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 35;
	width: min(960px, 100%);
	margin-inline: auto;
	background: var(--white);
	color: var(--ink);
	border: 1px solid var(--line);
	overflow: hidden;
}

/* Reset: τίποτα να μην κληρονομείται μέσα στο πάνελ — ούτε bullets, ούτε
   margins, ούτε φόντα συνδέσμων. */
body.mts-page #mts-mega ul,
body.mts-page #mts-mega ol,
body.mts-page #mts-mega li {
	margin: 0;
	padding: 0;
	list-style: none;
	background: none;
	border: 0;
}

body.mts-page #mts-mega a {
	background: none;
	border: 0;
	box-shadow: none;
	text-decoration: none;
	color: var(--ink);
	font-style: normal;
}

body.mts-page #mts-mega a:hover,
body.mts-page #mts-mega a:focus {
	text-decoration: none;
}

body.mts-page #mts-mega img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Ύψος από το περιεχόμενο. Η αριστερή λίστα, ως ψηλότερη στήλη, ορίζει το
   ελάχιστο ύψος του πάνελ· καμία στήλη δεν ξεχειλίζει.
   Στήλες 280 : 280 : 400 (= 7 : 7 : 10): στα 960 px ~280/280/400, σε
   στενότερο container συρρικνώνονται αναλογικά, χωρίς κόψιμο. */
body.mts-page #mts-mega .mts-mega-inner {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 7fr) minmax(0, 10fr);
	align-items: stretch;
	padding: 0;
}

/* Αριστερά — οι 7 κύριες κατηγορίες */

body.mts-page #mts-mega .mts-mega-cats {
	padding: 16px 0;
	border-right: 1px solid var(--line);
}

body.mts-page #mts-mega .mts-mega-cat {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 48px;
	padding: 12px 24px;
	font-size: 15px;
	line-height: 22px;
	font-weight: 500;
}

body.mts-page #mts-mega .mts-mega-cat:hover,
body.mts-page #mts-mega .mts-mega-cat:focus-visible,
body.mts-page #mts-mega .mts-mega-cat.is-active {
	background: var(--yellow);
	color: var(--ink);
}

body.mts-page #mts-mega .mts-mega-chevron {
	opacity: .45;
	font-size: 18px;
}

/* Κέντρο — υποκατηγορίες, ή οι σειρές coilover για κατηγορίες χωρίς */

body.mts-page #mts-mega .mts-mega-subs {
	padding: 24px;
	border-right: 1px solid var(--line);
}

body.mts-page #mts-mega .mts-mega-sublist {
	display: grid;
	gap: 4px;
	align-content: start;
}

body.mts-page #mts-mega .mts-mega-sublist a {
	display: block;
	min-height: 44px;
	padding: 11px 12px;
	border-radius: 8px;
	font-size: 15px;
	line-height: 22px;
}

body.mts-page #mts-mega .mts-mega-sublist a:hover,
body.mts-page #mts-mega .mts-mega-sublist a:focus-visible {
	background: var(--wash);
}

/* Δεξιά — η εικόνα της κατηγορίας ή υποκατηγορίας με hover */

body.mts-page #mts-mega .mts-mega-media {
	display: flex;
	align-items: center;
	padding: 24px;
}

body.mts-page #mts-mega .mts-mega-photo {
	width: 100%;
}

body.mts-page #mts-mega .mts-mega-photo img {
	border-radius: 8px;
}

body.mts-page #mts-mega .mts-mega-photo .cat-photo {
	border-radius: 8px;
}

/* ---------------------------------------------------------------------------
   §4.2 — Accordion κάτω από 768 px, μέσα στο μενού κινητού της μακέτας

   BRIEF-01c Ε2/Ε3 (13/09/2026): κάθε κύρια κατηγορία είναι ένα .mts-acc-item
   με μία γραμμή .mts-acc-head. Μέσα στη γραμμή το όνομα (.mts-acc-link) είναι
   σύνδεσμος προς τη σελίδα της κατηγορίας και το +/− (.mts-acc-toggle) είναι
   ξεχωριστό <button aria-expanded> που μόνο ανοιγοκλείνει (mts-mega.js).
   Κατηγορία χωρίς υποκατηγορίες = η ίδια γραμμή, χωρίς κουμπί και χωρίς
   πάνελ. Γενικός κανόνας για κάθε όρο — καμία ειδική περίπτωση.
   --------------------------------------------------------------------------- */

/* Απόσταση 21 px + ανοιχτή διαχωριστική γραμμή #cfd5d9.

   ΠΡΟΕΛΕΥΣΗ: ο γενικός κανόνας του FAQ της μακέτας (mts.css γρ. 28)
       details { border-top:1px solid #cfd5d9; padding:21px 0 }
       details:last-child { border-bottom:1px solid #cfd5d9 }
   που ως τώρα «περνούσε» στα <details> του accordion. Ο ιδιοκτήτης ενέκρινε
   οπτικά αυτή την εμφάνιση — ΚΡΑΤΗΘΗΚΕ ΣΥΝΕΙΔΗΤΑ (BRIEF-01c, 13/09/2026) και
   δηλώνεται εδώ ρητά, ώστε να ισχύει και για κατηγορίες χωρίς παιδιά.
   Αρχική / Η ChassiPro / Επικοινωνία / Καλάθι μένουν με τη σκούρα γραμμή
   #353a3d του .mega a της μακέτας. */
body.mts-page .mts-acc-item {
	padding: 21px 0;
	border-top: 1px solid #cfd5d9;
}

body.mts-page .mts-acc-item:last-child {
	border-bottom: 1px solid #cfd5d9;
}

body.mts-page .mts-acc-head {
	display: flex;
	align-items: stretch;
	border-bottom: 1px solid #353a3d;
}

/* Το όνομα. Ελάχιστο ύψος = όσο έδινε ως τώρα στη γραμμή το +/− (γλύφος
   20 px × line-height 1.55 + padding 13 + 13), ώστε γραμμή χωρίς +/− να έχει
   το ίδιο ύψος. Τα border:0 και font-weight:500 ακυρώνουν το .mega a της
   μακέτας (border-bottom, 700) — ίδια εμφάνιση με το παλιό <summary>. */
body.mts-page .mts-acc-link {
	flex: 1;
	display: flex;
	align-items: center;
	min-width: 0;
	min-height: calc(20px * 1.55 + 26px);
	padding: 13px 12px;
	border: 0;
	font-size: 15px;
	font-weight: 500;
	color: var(--white);
}

body.mts-page .mts-acc-link:hover {
	color: var(--yellow);
}

/* Το +/−. Ίδια θέση, μέγεθος και χρώμα με το παλιό summary::after (το χρώμα
   var(--muted) ερχόταν από το summary:after της μακέτας). Στόχος αφής ≥ 48 px. */
body.mts-page .mts-acc-toggle {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-width: 48px;
	min-height: 48px;
	padding: 13px 12px;
	border: 0;
	background: transparent;
	font-size: 15px;
	line-height: inherit;
	cursor: pointer;
}

body.mts-page .mts-acc-toggle::after {
	content: '+';
	font-size: 20px;
	font-weight: 400;
	color: var(--muted);
	opacity: .7;
}

body.mts-page .mts-acc-toggle[aria-expanded="true"]::after {
	content: '−';
}

/* Υποκατηγορίες — ως έχουν. */
body.mts-page .mts-acc-panel a {
	padding-left: 26px;
	font-size: 14px;
}

@media (max-width: 767px) {
	body.mts-page #mts-mega {
		display: none !important;
	}
}

@media (min-width: 768px) {
	body.mts-page .mts-acc {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
   §4.3 — Φόρμα αναζήτησης κωδικού MTS στην κίτρινη μπάρα
   Γεωμετρία ίδια με το .button της μακέτας (min-height 56, padding 15/24,
   radius 8, 15px/700) — αλλά μαύρο αντί για κόκκινο, όπως ορίζει το brief.
   --------------------------------------------------------------------------- */

body.mts-page .mts-search {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

body.mts-page .mts-search input[type="search"] {
	flex: 1;
	min-width: 260px;
	min-height: 56px;
	padding: 12px 16px;
	border: 1px solid var(--input);
	border-radius: 8px;
	background: var(--white);
	color: var(--ink);
	font-size: 16px;
	line-height: 22px;
}

body.mts-page .mts-search input[type="search"]::placeholder {
	color: var(--muted);
	opacity: 1;
}

body.mts-page .mts-search button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 56px;
	padding: 15px 24px;
	border: 0;
	border-radius: 8px;
	background: var(--ink);
	color: var(--white);
	font-size: 15px;
	font-weight: 700;
}

body.mts-page .mts-search button:hover {
	background: #000;
}

/* ---------------------------------------------------------------------------
   Markup τρίτων που παραμένει στη σελίδα μας

   Το Woodmart εγχέει skip-links μέσω wp_body_open(). Τα κρατάμε — είναι
   προσβασιμότητα — αλλά το CSS που τα έκρυβε ζούσε στο base-deferred.css του
   Woodmart, που δεν φορτώνεται πλέον. Χωρίς αυτούς τους κανόνες θα έβγαιναν
   ως δύο ορατά λευκά κουμπιά στην κορυφή (κληρονομούν το .btn της μακέτας).
   --------------------------------------------------------------------------- */

body.mts-page .wd-skip-links {
	position: fixed;
	top: 10px;
	inset-inline-start: -1000em;
	z-index: 999999;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

body.mts-page .wd-skip-links:focus-within {
	inset-inline-start: 10px;
}

/* ---------------------------------------------------------------------------
   Πραγματική εικόνα κατηγορίας μέσα στη θέση φωτογραφίας της μακέτας —
   ισχύει και για τις κάρτες της αρχικής και για το δεξί πάνελ του mega.
   --------------------------------------------------------------------------- */

body.mts-page .cat-photo > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------------------------------------------------------------------------
   ΠΡΟΤΥΠΟ ΚΟΥΤΙΟΥ — απόφαση ιδιοκτήτη 12/09/2026

   Κάθε «κουτί» στις σελίδες MTS ανασηκώνεται όπως το κίτρινο κουτί του
   επιλογέα. Οι τιμές διαβάστηκαν από το mts.css, από τους ΤΕΛΕΥΤΑΙΟΥΣ
   κανόνες που ισχύουν για το .selector (το αρχείο ξαναορίζει τον ίδιο
   επιλογέα — μετράει ο τελευταίος):

       .selector { background:var(--yellow); border-radius:12px;
                   box-shadow:0 16px 36px #1a1a1a29; padding:24px 30px 28px }
       .selector { padding:22px 20px 24px; border-radius:12px }

   Άρα το κουτί = border-radius 12px + box-shadow 0 16px 36px #1a1a1a29.
   Το .selector ΔΕΝ έχει transform ούτε :hover — άρα ούτε το πρότυπο έχει.
   (#1a1a1a29 = rgba(26,26,26,.161), πρακτικά το --selector-shadow.)

   Ενότητες πλήρους πλάτους — hero, .contact, .footer, .top — ΔΕΝ παίρνουν
   σκιά, εξ ορισμού δεν είναι κουτιά.

   ΚΟΥΤΙ-ΣΥΝΔΕΣΜΟΣ (απόφαση 12/09/2026): όταν ολόκληρο το κουτί είναι <a>,
   κανένας τίτλος ή κείμενο μέσα του δεν υπογραμμίζεται σε καμία κατάσταση.
   Η μακέτα έχει a:not(.btn):hover { text-decoration:underline }, που περνούσε
   και στα h3 των καρτών — γι' αυτό ο κανόνας απαριθμεί ρητά :hover, :focus,
   :focus-visible και :active. Το σήμα του hover είναι ΜΟΝΟ η ανασήκωση και
   η σκιά.

   ΕΠΟΜΕΝΕΣ ΣΕΛΙΔΕΣ: λίστα οχήματος και σελίδα προϊόντος προσθέτουν τους
   επιλογείς τους ΣΕ ΑΥΤΟΝ τον κανόνα — και κάθε νέο κουτί-σύνδεσμος μπαίνει
   με τις τέσσερις καταστάσεις του. Δεν γράφεται δεύτερος κανόνας κουτιού
   και δεν αντιγράφονται οι τιμές αλλού.
   --------------------------------------------------------------------------- */

body.mts-page .category,
body.mts-page .category:hover,
body.mts-page .category:focus,
body.mts-page .category:focus-visible,
body.mts-page .category:active,
body.mts-page .x-choice,
body.mts-page .x-choice:hover,
body.mts-page .x-choice:focus,
body.mts-page .x-choice:focus-visible,
body.mts-page .x-choice:active,
body.mts-page .x-feature,
body.mts-page #series .series-card,
body.mts-page #brand .brand-photo,
body.mts-page #brand .brand-emblem,
body.mts-page .mts-photo-band-box,
body.mts-page .c-option,
body.mts-page .c-option:hover,
body.mts-page .c-option:focus,
body.mts-page .c-option:focus-visible,
body.mts-page .c-option:active,
body.mts-page .c-card,
body.mts-page .c-card:hover,
body.mts-page .c-card:focus,
body.mts-page .c-card:focus-visible,
body.mts-page .c-card:active,
body.mts-page .c-feature,
body.mts-page .c-row-media img,
body.mts-page .v-card,
body.mts-page .v-card:hover,
body.mts-page .v-card:focus,
body.mts-page .v-card:focus-visible,
body.mts-page .v-card:active,
body.mts-page .v-cat,
body.mts-page .v-cat:hover,
body.mts-page .v-cat:focus,
body.mts-page .v-cat:focus-visible,
body.mts-page .v-cat:active,
body.mts-page #mts-mega,
body.mts-page dialog {
	border-radius: 12px;
	box-shadow: 0 16px 36px #1a1a1a29;
	text-decoration: none;
}

/* Η ανασήκωση του hover — το δεύτερο μισό του σήματος, μαζί με τη σκιά.
   Η .category της αρχικής το έχει ήδη από τη μακέτα (mts.css γρ. 26:
   transition:transform .25s,box-shadow .25s · :hover{transform:translateY(-4px)}).
   Οι κάρτες .x-choice των σελίδων κατηγορίας έγιναν κουτιά-σύνδεσμοι
   (BRIEF-04-2c §21.3) και παίρνουν εδώ τις ΙΔΙΕΣ τιμές — δεν ορίζεται δεύτερο
   πρότυπο. Η .x-feature δεν είναι σύνδεσμος, άρα δεν ανασηκώνεται. */
body.mts-page .x-choice {
	color: inherit;
	transition: transform .25s, box-shadow .25s;
}

body.mts-page .x-choice:hover {
	transform: translateY(-4px);
}

/* Οι κάρτες σειρών είναι διάφανες πάνω σε .series { background:#151617 }, οπότε
   η σκιά του προτύπου ήταν αόρατη. Τους δίνουμε επιφάνεια — το ίδιο #1e2022 που
   ήδη χρησιμοποιεί το .series-photo μέσα τους. */
body.mts-page #series .series-card {
	background: #1e2022;
}

/* ---------------------------------------------------------------------------
   ΣΥΝΔΕΣΜΟΙ — καμία γραμμή από κάτω, σε καμία κατάσταση, πουθενά (§21.5)

   ΡΗΤΗ ΑΠΟΚΛΙΣΗ ΑΠΟ ΤΗ ΜΑΚΕΤΑ (B.2), απόφαση ιδιοκτήτη 12/09/2026.

   Το mts.css περιέχει δύο γενιές κανόνων. Η 2η δηλώνει καθαρά
   a { text-decoration:none } (γρ. 23), αλλά ο ξεχασμένος κανόνας της 1ης
   γενιάς a:not(.btn):hover { text-decoration:underline; text-underline-offset:4px }
   (γρ. 3) κερδίζει στο hover με ειδικότητα (0,2,1) > (0,0,1). Αποτέλεσμα στη
   ΜΑΚΕΤΑ και στο site: υπογράμμιση στο hover — στο logo lockup και, ως δεύτερη
   γραμμή πάνω από το σχεδιασμένο border-bottom, στα CTA με βέλος.

   Εδώ την ακυρώνουμε. Αφαιρείται ΜΟΝΟ η text-decoration· το
   .line-link { border-bottom:1px solid currentColor } είναι άλλη ιδιότητα και
   μένει ανέπαφο — η σχεδιασμένη γραμμή παραμένει, η επιπλέον φεύγει.

   Το καλάθι στοχεύεται μέσω του παιδιού του .cart-count, ώστε να πιάνει και τον
   σύνδεσμο του header και αυτόν του μενού κινητού χωρίς να αγγίζει nav ή footer.

   ΕΠΕΚΤΑΣΗ BRIEF-04-2c §21.5 / §2.E (απόφαση ιδιοκτήτη 15/09/2026, βράδυ):
   «καμία γραμμή από κάτω, σε καμία κατάσταση, πουθενά — και αρχική, nav,
   footer». Αντικαθιστά το «nav και footer δεν αγγίζονται» του 18.11α.

   Γι' αυτό η απαρίθμηση των συνδέσμων (.identity, a:has(.cart-count)) έγινε
   περιττή και αντικαταστάθηκε από το γενικό body.mts-page a με τις πέντε
   καταστάσεις του. Το .line-link μένει ρητά: στην αρχική είναι και <button>
   (κάρτες σειρών), που δεν το πιάνει ο επιλογέας a. Ίδιος λόγος για το
   .text-btn και το .footer-links button — κουμπιά με εμφάνιση συνδέσμου.

   ΔΥΟ ΔΗΛΩΣΕΙΣ, ΟΧΙ ΜΙΑ: η text-decoration πάει σε ΚΑΘΕ a· το border-bottom:0
   ΜΟΝΟ στους selector της απογραφής §2.A.3 που είναι γραμμή συνδέσμου. Αν
   έμπαινε και το border-bottom στο γενικό «a», θα έσβηνε τον δείκτη ενεργής
   καρτέλας .x-jump a:first-child, που ρητά ΜΕΝΕΙ.

   ΜΕΝΟΥΝ (δεν είναι σύνδεσμοι):
     · κίτρινη γραμμή hero — .x-hero / .x-info-hero { border-bottom:4px #fec608 }
     · δείκτης ενεργής καρτέλας — .x-jump a:first-child { border-bottom:3px #fec608 }
     · γραμμή kicker — .kicker:before / .x-eyebrow:before (background, όχι border)
     · γραμμές-διαχωριστές ΠΑΝΩ από σειρά — .mts-acc-item { border-top }
   --------------------------------------------------------------------------- */

body.mts-page a,
body.mts-page a:hover,
body.mts-page a:focus,
body.mts-page a:focus-visible,
body.mts-page a:active,
body.mts-page .line-link,
body.mts-page .line-link:hover,
body.mts-page .line-link:focus,
body.mts-page .line-link:focus-visible,
body.mts-page .line-link:active,
body.mts-page .text-btn,
body.mts-page .text-btn:hover,
body.mts-page .text-btn:focus,
body.mts-page .text-btn:focus-visible,
body.mts-page .text-btn:active,
body.mts-page .footer-links button,
body.mts-page .footer-links button:hover {
	text-decoration: none;
}

/* Η σχεδιασμένη γραμμή του συνδέσμου — μέχρι τις 15/09 έμενε ανέπαφη, τώρα
   φεύγει κι αυτή (§21.5). Πηγές από την απογραφή §2.A.3:
     mts.css γρ. 23  .line-link   { border-bottom:1px solid currentColor }
     mts.css γρ. 33  .mega a      { border-bottom:1px solid #353a3d }   (nav κινητού)
     mts-extra γρ. 214 .mts-acc-head            { border-bottom:1px solid #353a3d }
     mts-extra γρ. 210 .mts-acc-item:last-child { border-bottom:1px solid #cfd5d9 }
   Τα δύο τελευταία ζωγραφίζονται στο περιτύλιγμα της σειράς, όχι στο ίδιο το
   <a>, αλλά υπάρχουν ΜΟΝΟ για να αναπαράγουν τη γραμμή του .mega a στις σειρές
   του accordion (βλ. σχόλιο §4.2 παραπάνω) — άρα είναι η ίδια γραμμή. */
body.mts-page .line-link,
body.mts-page .line-link:hover,
body.mts-page .line-link:focus,
body.mts-page .line-link:focus-visible,
body.mts-page .line-link:active,
body.mts-page .mega a,
body.mts-page .mega a:hover,
body.mts-page .mega a:focus,
body.mts-page .mega a:focus-visible,
body.mts-page .mega a:active,
body.mts-page .mts-acc-head,
body.mts-page .mts-acc-item:last-child {
	border-bottom: 0;
}

/* ===========================================================================
   BRIEF-05 (24/09/2026) — πραγματικό υλικό στην αρχική, header και footer.

   Το mts.css παραμένει byte-identical με τη μακέτα· κάθε αλλαγή αυτού του
   brief ζει εδώ. Τα μεγέθη διαβάστηκαν από το mts.css και σημειώνονται δίπλα
   σε κάθε κανόνα, ώστε να φαίνεται τι υπερκαλύπτεται και γιατί.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   §2.1 — Πάνω μπάρα: κείμενο και τηλέφωνο τέρμα δεξιά

   mts.css: .top .wrap { justify-content:space-between } — το κείμενο έμενε
   αριστερά. Τώρα η ομάδα πάει δεξιά, με « · » ανάμεσα. Στο κινητό η μακέτα
   ήδη κεντράρει και κρύβει το τηλέφωνο (.top .wrap>a), οπότε κρύβεται και ο
   διαχωριστής.
   --------------------------------------------------------------------------- */

body.mts-page .top .wrap {
	justify-content: flex-end;
	gap: 8px;
}

@media (max-width: 767px) {
	body.mts-page .top .wrap > .top-sep {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
   §2.2 — Λογότυπο ChassiPro στη θέση της λέξης

   Το ύψος του header ΔΕΝ αλλάζει: το .head .wrap του mts.css έχει σταθερό
   height (96 px ≥ 768, 76 px κινητό). Το λογότυπο μπαίνει στο ύψος που είχε
   το block «ChassiPro / Αναρτήσεις & εξαρτήματα» μαζί:

     ≥1280   strong 24px × 1.2 = 28.8 + span line-box 25 = 53.8 → 54 px
     768–1279 strong 21px × 1.2 = 25.2 + 25              = 50.2 → 50 px
     ≤767    strong 19px × 1.2 = 22.8 + 25 = 47.8 → 34 px (βλ. παρακάτω)

   Στο κινητό το 47.8 θα άφηνε 3 px αέρα μέσα στα 76 px μαζί με τη γραμμή
   «Αναρτήσεις & εξαρτήματα» (47.8 + 25 = 72.8). Κρατιέται στα 34 px ώστε το
   σύνολο 34 + 25 = 59 px να αναπνέει μέσα στα 76 px.
   --------------------------------------------------------------------------- */

body.mts-page .head .dealer .cp-logo {
	display: block;
	width: auto;
	height: 54px;
}

@media (min-width: 768px) and (max-width: 1279px) {
	body.mts-page .head .dealer .cp-logo {
		height: 50px;
	}
}

@media (max-width: 767px) {
	body.mts-page .head .dealer .cp-logo {
		height: 34px;
	}
}

/* ---------------------------------------------------------------------------
   §2.3 — Η ομάδα του nav κεντραρισμένη ανάμεσα σε identity και εικονίδια

   Το .head .wrap είναι flex με justify-content:space-between και τρία παιδιά.
   Τα auto margins απορροφούν τον ελεύθερο χώρο ΠΡΙΝ μοιράσει το
   space-between, οπότε το margin-inline:auto κεντράρει το <nav> στο κενό
   ανάμεσα στα δύο άκρα — και μένει κεντραρισμένο με 3, 4 ή 5 στοιχεία, γιατί
   δεν εξαρτάται από το πλήθος τους.

   ΠΑΓΙΔΑ: το mts.css (1η γενιά, για τη .nav-shell του γύρου 02) κρύβει το 3ο
   και το 4ο <a> κάθε .nav στα 768–1023 px. Ως τώρα δεν έπιανε τίποτα, γιατί
   ο header είχε μόνο δύο <a>. Με το «Γίνε Συνεργάτης» θα εξαφάνιζε στοιχεία
   του μενού σε tablet — γι' αυτό ακυρώνεται ρητά εδώ.
   --------------------------------------------------------------------------- */

body.mts-page .head .nav {
	margin-inline: auto;
}

@media (min-width: 768px) and (max-width: 1023px) {
	body.mts-page .head .nav a:nth-of-type(3),
	body.mts-page .head .nav a:nth-of-type(4) {
		display: flex;
	}
}

/* ---------------------------------------------------------------------------
   §4.4 / §4.6 — Βίντεο hero κάτω από το «φιλμ» της μακέτας

   Σειρά ζωγραφίσματος μέσα στο .hero: το ::before είναι το πρώτο παιδί, οπότε
   χωρίς z-index θα ζωγραφιζόταν ΚΑΤΩ από το βίντεο. Δηλώνονται ρητά:
     0  .hero-media (poster + video)
     1  .hero:before  — το βαθμωτό φίλτρο
     2  .hero:after   — το διακοσμητικό πλαίσιο της μακέτας
     3  .hero .wrap   — το κείμενο (mts.css: z-index 1)

   ΕΝΤΑΣΗ ΤΟΥ ΦΙΛΜ: η μακέτα είχε opacity .95 πάνω σε σκέτο χρώμα φόντου.
   Πάνω από βίντεο αυτό αφήνει να φανεί μόλις το 5% της εικόνας. Μετρήθηκαν 9
   καρέ σε όλο το κλιπ, στην περιοχή όπου κάθεται το slogan (video px
   x280–1130, y270–450): μέση φωτεινότητα L=0.0298, p99=0.4166. Στο .55 το
   λευκό κείμενο κρατά αντίθεση 6.53:1 στο p99 και 10.56:1 στο p95 — πολύ πάνω
   από το 4.5:1, ενώ το βίντεο φαίνεται. Το §4.6 ζητά «όχι ασθενέστερο από
   rgba(0,0,0,.45)»: το .55 μένει πάνω από αυτό το κατώφλι.
   --------------------------------------------------------------------------- */

body.mts-page .hero-media {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

body.mts-page picture.hero-media {
	display: block;
}

body.mts-page picture.hero-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

body.mts-page .hero:before {
	z-index: 1;
	opacity: .55;
}

body.mts-page .hero:after {
	z-index: 2;
}

body.mts-page .hero .wrap {
	z-index: 3;
}

/* Κινητό: ούτε ένα byte βίντεο. Desktop: μόνο όταν ο χρήστης δεν έχει ζητήσει
   λιγότερη κίνηση — τότε μένει το poster, που είναι ήδη εκεί. */
body.mts-page .hero-video {
	display: none;
}

@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
	body.mts-page .hero-video {
		display: block;
	}
}

/* ---------------------------------------------------------------------------
   §5.1 — Το slogan κατακόρυφα στο κέντρο του hero

   Έφυγαν το .hero-top (kicker + «Ακρίβεια – Χαρακτήρας») και το .hero-bottom
   (εισαγωγή + σύνδεσμος), οπότε το padding-top:52px και το margin-top:34px του
   h1 δεν έχουν πια νόημα. Το ύψος του hero μένει ως έχει: 620 / 540 px.
   --------------------------------------------------------------------------- */

body.mts-page .hero .wrap {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-top: 0;
}

body.mts-page .hero h1 {
	margin-top: 0;
}

@media (max-width: 767px) {
	body.mts-page .hero .wrap {
		padding-top: 0;
	}

	body.mts-page .hero h1 {
		margin-top: 0;
	}
}

/* ---------------------------------------------------------------------------
   §3 — Πραγματικές φωτογραφίες στις κάρτες κατηγοριών και στις σειρές

   Το .cat-photo>img ορίστηκε ήδη παραπάνω (θέση φωτογραφίας της μακέτας).
   Εδώ φεύγουν τα διακοσμητικά της ΚΕΝΗΣ θέσης — ο κύκλος και η λοξή γραμμή —
   που με πραγματική φωτογραφία ζωγραφίζονταν από πάνω της.

   Οι εικόνες σειρών Σ1–Σ3 παραδόθηκαν ΧΩΡΙΣ alpha (PNG colour type 2), οπότε
   ισχύει η εναλλακτική του §3: object-fit:cover αντί για contain με padding.
   Το φόντο τους είναι ήδη σκούρο (#0c0c0c–#8b8b8f στις γωνίες) και δένει με
   το #1e2022 του κουτιού. Τα «+» της κενής θέσης φεύγουν.
   --------------------------------------------------------------------------- */

body.mts-page .cat-photo:before,
body.mts-page .cat-photo:after {
	content: none;
}

body.mts-page #series .series-photo > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
}

body.mts-page #series .series-photo:before,
body.mts-page #series .series-photo:after {
	content: none;
}

/* ---------------------------------------------------------------------------
   §5.2 — Κόκκινο κουμπί επιλογέα: κείμενο κεντραρισμένο, χωρίς βέλος

   Το <span class="arrow">→</span> αφαιρέθηκε από το markup. Το .button έχει
   ήδη justify-content:center, αλλά στο κινητό η μακέτα το γυρίζει σε
   space-between για να σπρώξει το βέλος δεξιά — χωρίς βέλος αυτό θα άφηνε το
   κείμενο αριστερά. Το gap μηδενίζεται: δεν υπάρχει δεύτερο παιδί.
   --------------------------------------------------------------------------- */

body.mts-page .selector .button {
	justify-content: center;
	gap: 0;
}

@media (max-width: 767px) {
	body.mts-page .selector-fields .button {
		justify-content: center;
	}
}

/* ---------------------------------------------------------------------------
   §5.4 — Επικεφαλίδα καταλόγου χωρίς δεξιά εισαγωγή

   Το .section-heading της μακέτας είναι flex με δύο παιδιά και
   justify-content:space-between. Με ένα παιδί ο h2 πρέπει να πάρει όλο το
   πλάτος, αλλιώς μένει στοιβαγμένος αριστερά στο μισό.
   --------------------------------------------------------------------------- */

body.mts-page .section-heading-solo {
	display: block;
}

body.mts-page .section-heading-solo h2 {
	max-width: none;
}

/* ---------------------------------------------------------------------------
   §5.6 — Ένας χρωματικός τόνος στο section ChassiPro

   Το πορτοκαλί δειγματολήφθηκε από το assets/img/chassipro-logo.png:
   #f76101 (4.6% των pixel· το #f89709 είναι η φωτεινή βαθμίδα του ίδιου
   γλύφου). Χρησιμοποιείται ΜΟΝΟ εδώ, σε μία φράση — «με τη ChassiPro.».
   --------------------------------------------------------------------------- */

body.mts-page .brand-copy .cp-accent {
	color: #f76101;
}

/* ---------------------------------------------------------------------------
   §6 — Footer τεσσάρων στηλών με φωτογραφία φόντου

   Η εικόνα έρχεται ως attachment της Media Library, οπότε το URL δίνεται από
   το footer-mts.php ως custom property --mts-footer-bg. Έτσι το CSS δεν
   κουβαλά hardcoded μονοπάτι uploads και η εικόνα μπορεί να αντικατασταθεί
   από το dashboard.

   ΑΝΤΙΘΕΣΗ (μετρημένη πάνω στην ίδια την εικόνα, με το φίλτρο rgba(10,11,12,.78)):
     σκουρότερο pixel (0,0,0)       → σύνθεση (8,9,9)    L=0.0026
     ανοιχτότερο pixel (255,255,255) → σύνθεση (64,65,65) L=0.0522

     #b4bac0 παράγραφος 13px   10.20:1 σκούρο · 5.25:1 ανοιχτό  ✓ AA
     #c7cbce σύνδεσμοι 13px    12.23:1 · 6.29:1                 ✓ AA
     #f5f6f7 τίτλοι h3         18.46:1 · 9.50:1                 ✓ AA
     #a6aeb4 κάτω γραμμή 12px   8.86:1 · 4.55:1                 ✓ AA

   Το #9aa2a8 που πρότεινε το §6.2 για την κάτω γραμμή έβγαζε 3.97:1 στο
   ανοιχτότερο pixel — κάτω από το 4.5:1 που ζητά το ίδιο το §6.2. Ανέβηκε στο
   ελάχιστο χρώμα της ίδιας απόχρωσης που περνά, #a6aeb4.
   (Τα παλιά της μακέτας: #959da3 → 3.73:1 και #737c83 → 2.42:1.)
   --------------------------------------------------------------------------- */

body.mts-page .footer {
	position: relative;
	background-color: #0a0b0c;
	background-image: var(--mts-footer-bg, none);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

body.mts-page .footer:before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(10, 11, 12, .78);
	pointer-events: none;
}

body.mts-page .footer > .wrap {
	position: relative;
	z-index: 1;
}

body.mts-page .footer-grid {
	grid-template-columns: 1.4fr 1fr 1fr .8fr;
	gap: 60px;
}

/* Στήλη 1: το κείμενο κεντράρεται ως προς ΤΟ ΛΟΓΟΤΥΠΟ, όχι ως προς τη στήλη —
   γι' αυτό παίρνει το ίδιο πλάτος με αυτό (215 px, mts.css .footer-logo). */
body.mts-page .footer-brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

body.mts-page .footer-brand .footer-logo {
	width: 215px;
	height: auto;
}

body.mts-page .footer-brand p {
	width: 215px;
	text-align: center;
}

body.mts-page .footer p {
	color: #b4bac0;
}

/* Μόνο το copyright, κεντραρισμένο. Η γραμμή border-top του §21.5 μένει. */
body.mts-page .footer-bottom {
	justify-content: center;
	color: #a6aeb4;
}

@media (min-width: 768px) and (max-width: 1023px) {
	body.mts-page .footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: 32px 40px;
	}
}

@media (max-width: 767px) {
	body.mts-page .footer-grid {
		grid-template-columns: 1fr;
	}

	body.mts-page .footer-brand {
		align-items: center;
	}

	body.mts-page .footer-brand .footer-logo {
		width: 205px;
	}

	body.mts-page .footer-brand p {
		width: 205px;
	}
}

/* ===========================================================================
   BRIEF-05b (24/09/2026) — διορθώσεις πύλης πριν την παρουσίαση
   =========================================================================== */

/* ---------------------------------------------------------------------------
   §2 — Συμμετρία container

   Μέτρηση με headless Chromium στα 1920: .head .wrap, .hero .wrap, .catalog,
   .footer .wrap και #vehicle δίνουν left = right = 240.00 px, Δ = 0.00.
   Η ασυμμετρία ΔΕΝ είναι στο CSS του container.

   Η πηγή είναι η κλασική scrollbar του πραγματικού browser: παίρνει ~15 px από
   το document.documentElement.clientWidth, οπότε το margin:auto κεντράρει μέσα
   σε 1905 px και όχι σε 1920 — αριστερό κενό 232.5, δεξί κενό 232.5 + 15 = 247.5
   ως προς το viewport. Το headless δεν το δείχνει γιατί χρησιμοποιεί overlay
   scrollbar (μετρήθηκε window.innerWidth − clientWidth = 0).

   Το scrollbar-gutter:stable both-edges κρατά ίσο κενό και στις δύο πλευρές,
   ανεξάρτητα από το αν η σελίδα κυλάει ή όχι.
   --------------------------------------------------------------------------- */

html {
	scrollbar-gutter: stable both-edges;
}

/* ---------------------------------------------------------------------------
   §3 — Hero: gradient αντί για επίπεδο φιλμ

   Το επίπεδο .55 σκοτείνιαζε ομοιόμορφα και το αυτοκίνητο δεξιά. Τώρα το
   σκοτάδι είναι μόνο εκεί που κάθεται το κείμενο και σβήνει στο 70% του
   πλάτους — το δεξί 30% του βίντεο μένει καθαρό. Το δεύτερο, λεπτό gradient
   από πάνω δίνει βάση στο header.

   ΠΡΟΣΟΧΗ στη σειρά: το πρώτο layer της λίστας ζωγραφίζεται ΠΑΝΩ, γι' αυτό το
   180deg γράφεται πρώτο. Το opacity επιστρέφει σε 1 — οι τιμές alpha είναι
   πλέον μέσα στα ίδια τα gradient.
   --------------------------------------------------------------------------- */

body.mts-page .hero:before {
	opacity: 1;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, transparent 25%),
		linear-gradient(90deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .55) 30%, rgba(0, 0, 0, .15) 55%, rgba(0, 0, 0, 0) 70%);
}

/* ---------------------------------------------------------------------------
   §4 — Header: wordmark αντί για ολόκληρο το lockup

   Το chassipro-logo.png είναι οριζόντιο lockup με εσωτερική tagline
   «PERFORMANCE · PRECISION · PASSION» στις γραμμές y 704–725 του πρωτοτύπου.
   Στα 54 px συνολικού ύψους το wordmark έπεφτε στα ~8 px και ήταν αδιάβαστο
   δίπλα στο λογότυπο MTS.

   Το chassipro-wordmark.webp κόβει τη γραμμή της tagline (bbox μελανιού
   x 83–1558, y 241–699, + 4% περιθώριο, με το κάτω όριο κλειδωμένο στο y 700
   ώστε να μην ξαναμπεί η tagline) → 1512×477, αναλογία 3.170.

   Ύψη: 62 / 56 / 38 px. Η γραμμή «Αναρτήσεις & εξαρτήματα» 11 px με 4 px κενό.
   Σύνολο 77 / 71 / 53 px μέσα σε header 96 / 96 / 76 px.
   --------------------------------------------------------------------------- */

body.mts-page .head .dealer .cp-logo {
	height: 62px;
}

body.mts-page .head .dealer > span {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	line-height: 1;
}

@media (min-width: 768px) and (max-width: 1279px) {
	body.mts-page .head .dealer .cp-logo {
		height: 56px;
	}
}

@media (max-width: 767px) {
	body.mts-page .head .dealer .cp-logo {
		height: 38px;
	}

	body.mts-page .head .dealer > span {
		font-size: 11px;
	}
}

/* ---------------------------------------------------------------------------
   §5 — Κάρτες κατηγοριών: περιθώριο, contain, ευθυγραμμισμένοι τίτλοι

   ΠΡΙΝ: το .cat-photo είχε aspect-ratio:800/420, οπότε το ύψος του άλλαζε με
   το πλάτος της κάρτας. Κάρτα 1 (856 px) → φωτογραφία 449 px· κάρτα 2 (564 px)
   → 296 px. Οι δύο κάρτες είχαν ίδιο ύψος (534 px), άρα οι λεζάντες έπεφταν σε
   διαφορετικό y — μετρήθηκε διαφορά 153 px. Η κάρτα 2 άφηνε κενό από κάτω.

   ΜΕΤΑ: το .cat-photo παίρνει το ύψος από το grid (flex:1) και η λεζάντα είναι
   flex:none — άρα οι λεζάντες ξεκινούν στο ίδιο y σε κάθε γραμμή, ό,τι
   αναλογία κι αν έχει η πηγή. Η τετράγωνη Κ2 μένει τετράγωνη με contain,
   χωρίς περικοπή.

   Το aspect-ratio ΔΕΝ αφαιρείται καθολικά: στο mega menu το .cat-photo δεν
   έχει flex γονέα και χωρίς αναλογία θα κατέρρεε σε μηδενικό ύψος. Γι' αυτό
   ο κανόνας είναι .category .cat-photo.
   --------------------------------------------------------------------------- */

/* Περιθώριο γύρω από κάθε φωτογραφία — ισχύει και στο mega menu (ίδιος renderer). */
body.mts-page .cat-photo {
	padding: 24px;
	background: #fff;
}

body.mts-page .category:nth-child(2) .cat-photo {
	background: #202224;
}

body.mts-page .cat-photo > img {
	inset: 24px;
	width: calc(100% - 48px);
	height: calc(100% - 48px);
	object-fit: contain;
}

/* Ίδιο y λεζάντας σε κάθε γραμμή του grid.

   ΠΟΙΟΣ ΟΡΙΖΕΙ ΤΟ ΥΨΟΣ: το grid δίνει ίσο ύψος στα κελιά μιας γραμμής, αλλά το
   ύψος της ΓΡΑΜΜΗΣ βγαίνει από το περιεχόμενο. Αν αφαιρεθεί το aspect-ratio
   από όλες τις φωτογραφίες, καμία δεν έχει εγγενές ύψος και η γραμμή
   καταρρέει στο ύψος της λεζάντας (μετρήθηκε: .cat-photo 48 px = μόνο τα δύο
   padding). Γι' αυτό:

     · κάρτα 1 και κάρτες 3–7 ΚΡΑΤΟΥΝ το aspect-ratio 800/420 της μακέτας και
       ορίζουν το ύψος της γραμμής τους (οι 3–7 έχουν ίσο πλάτος, άρα ίσο ύψος
       και ευθυγραμμισμένους τίτλους εξ ορισμού)·
     · μόνο η κάρτα 2, που έχει διαφορετικό πλάτος (564 έναντι 856), χάνει τη
       δική της αναλογία και τεντώνεται στο ύψος που ορίζει η κάρτα 1.

   Έτσι οι τίτλοι «Coilovers» και «Κιτ χαμηλώματος» πέφτουν στο ίδιο y, και η
   τετράγωνη πηγή της Κ2 μένει τετράγωνη μέσα σε ψηλότερο πλαίσιο χάρη στο
   object-fit:contain — καμία περικοπή. */

@media (min-width: 768px) {
	body.mts-page .category {
		display: flex;
		flex-direction: column;
	}

	body.mts-page .category .cat-caption {
		flex: none;
	}

	body.mts-page .category:nth-child(2) .cat-photo {
		aspect-ratio: auto;
		flex: 1;
		min-height: 0;
	}
}

@media (max-width: 767px) {
	body.mts-page .cat-photo {
		padding: 16px;
	}

	body.mts-page .cat-photo > img {
		inset: 16px;
		width: calc(100% - 32px);
		height: calc(100% - 32px);
	}
}

/* ===========================================================================
   BRIEF-06 tokens (26/09/2026) — στάδιο 1, αρχική + header/footer

   Οι ΤΙΜΕΣ ζουν στο mts-tokens.css (παράγεται από intake/BRIEF-06-tokens.json)·
   εδώ μόνο η ΕΦΑΡΜΟΓΗ τους στους selectors. Ένας ρόλος = ένα token σε όλο το site.
   Κανόνας τυπογραφίας (Ioannis 26/09): font-size = max(v3, site), βάρος /
   διάστιχο / letter-spacing = v3. Ύψη block = v3, βήματα στα breakpoints του
   site (1279 / 767). Μένουν δικά μας: επιλογέας (ύψος + ανασήκωμα), 2 μεγάλες
   κάρτες, container, πρότυπο κουτιού, χρώματα.
   =========================================================================== */

/* ---- header / nav (§1.8) — .head έχει border-bottom 1px, το token είναι το συνολικό ύψος ---- */
body.mts-page .head .wrap {
	height: calc(var(--b-header) - 1px);
}

body.mts-page .head .nav > a,
body.mts-page .head .nav .mts-mega-trigger {
	font-size: var(--t-nav-link);
	font-weight: var(--t-nav-link-fw);
	line-height: var(--t-nav-link-lh);
}

/* ---- hero (§1.2) ---- */
body.mts-page .hero {
	height: var(--b-hero-home);
}

body.mts-page .hero h1 {
	font-size: var(--t-hero-h1);
	font-weight: var(--t-hero-h1-fw);
	line-height: var(--t-hero-h1-lh);
	letter-spacing: var(--t-hero-h1-ls);
}

/* ---- επιλογέας: μόνο τυπογραφία — ύψος και ανασήκωμα μένουν όπως η αρχική ----
   .selector-wrap στον selector: στις σελίδες κατηγορίας το mts-pages.css (φορτώνει μετά)
   έχει body.mts-page .x-page h2 με ίδια ειδικότητα — ο επιλογέας είναι κοινό στοιχείο. */
body.mts-page .selector-wrap .selector-head h2,
body.mts-page .selector.vehicle-form .selector-head h2 {
	font-size: var(--t-selector-h2);
	font-weight: var(--t-selector-h2-fw);
	line-height: var(--t-selector-h2-lh);
	letter-spacing: var(--t-selector-h2-ls);
}

/* Το διάστιχο του v3 (1.1 αντί 1.3) και οι ετικέτες 13/1.6 άλλαζαν το ύψος του κουτιού
   κατά −2.8 px (desktop) / −2.4 px (κινητό). Ο επιλογέας μένει ΟΠΩΣ ΣΗΜΕΡΑ (181 / 201 στα
   768 / 458 κινητό, μετρημένα με τα CSS του backup), οπότε η κεφαλή κρατά το ύψος της. */
body.mts-page .selector-wrap .selector-head {
	min-height: 29.2px;
}

@media (max-width: 767px) {
	body.mts-page .selector-wrap .selector-head {
		min-height: 50.8px;
	}
}

body.mts-page .selector .field label {
	font-size: var(--t-form-label);
	font-weight: var(--t-form-label-fw);
	line-height: var(--t-form-label-lh);
}

body.mts-page .selector select {
	font-size: var(--t-input);
	font-weight: var(--t-input-fw);
}

body.mts-page .selector .button,
body.mts-page .mts-search button {
	font-size: var(--t-btn);
	font-weight: var(--t-btn-fw);
}

/* ---- ενότητες: padding-block και απόσταση h2 → περιεχόμενο ---- */
body.mts-page .catalog {
	padding: var(--b-section-pad-first) 0 var(--b-section-pad);
}

body.mts-page .brand {
	padding: var(--b-section-pad) 0;
}

body.mts-page .faq-section {
	padding-bottom: var(--b-section-pad);
}

body.mts-page .section-heading,
body.mts-page .series .section-heading {
	margin-bottom: var(--b-section-head-gap);
}

/* h2 ενότητας — ίδιος ρόλος σε κατάλογο, σειρές, ChassiPro, FAQ */
body.mts-page .section-heading h2,
body.mts-page .series .section-heading h2,
body.mts-page .brand-copy h2,
body.mts-page .faq-section h2 {
	font-size: var(--t-h2-section);
	font-weight: var(--t-h2-section-fw);
	line-height: var(--t-h2-section-lh);
	letter-spacing: var(--t-h2-section-ls);
}

body.mts-page .section-heading > p {
	font-size: var(--t-section-intro);
	line-height: var(--t-section-intro-lh);
}

body.mts-page .brand-copy p,
body.mts-page .faq-section details p {
	font-size: var(--t-body);
	line-height: var(--t-body-lh);
}

/* ---- κάρτες κατηγοριών (§1.3): 2 μεγάλες + 3 + 2 ----
   ≥768: flex με ρητά πλάτη. Η κάρτα 1 κρατά ΑΚΡΙΒΩΣ το πλάτος του πλέγματος 20
   στηλών / gap 20 (12 στήλες = 60% − 8 px), άρα και το ύψος εικόνας της (δικό
   μας, 800:420)· η κάρτα 2 παίρνει ό,τι μένει. Οι 5 μικρές: σειρά 3 (αναλογία
   1.904) + σειρά 2 (2.7), όπως μετρήθηκαν στο v3. Κινητό: 2 στήλες (1.15), η
   τελευταία πλήρους πλάτους (2.25), οι 2 μεγάλες όπως σήμερα. */
/* Πρώτα η αναλογία των μικρών (κινητό + σειρά 3)· η σειρά 2 την υπερκαλύπτει παρακάτω. */
body.mts-page .category-grid {
	gap: var(--b-grid-gap);
}

body.mts-page .category:nth-child(n+3) .cat-photo {
	aspect-ratio: var(--b-card-ratio-small);
}

@media (min-width: 768px) {
	body.mts-page .category-grid {
		display: flex;
		flex-wrap: wrap;
		gap: var(--b-grid-gap);
	}

	body.mts-page .category {
		flex: none;
		min-width: 0;
	}

	body.mts-page .category:nth-child(1) {
		width: calc(60% - 8px);
	}

	body.mts-page .category:nth-child(2) {
		width: calc(40% + 8px - var(--b-grid-gap));
	}

	body.mts-page .category:nth-child(n+3):nth-child(-n+5) {
		width: calc((100% - 2 * var(--b-grid-gap)) / 3);
	}

	body.mts-page .category:nth-child(n+6) {
		width: calc((100% - var(--b-grid-gap)) / 2);
	}

	body.mts-page .category:nth-child(n+6) .cat-photo {
		aspect-ratio: var(--b-card-ratio-wide);
	}
}

@media (max-width: 767px) {
	body.mts-page .category:nth-child(7) {
		display: flex;
		flex-direction: column;
	}

	body.mts-page .category:nth-child(7) .cat-photo {
		height: auto;
		min-height: 0;
		aspect-ratio: var(--b-card-ratio-wide);
	}
}

/* Εικόνα ως τις άκρες, cover, και μαλακό σβήσιμο προς το μπλοκ του τίτλου —
   καμία σκληρή γραμμή. Το σβήσιμο πάει στο χρώμα της λεζάντας: λευκό, και
   #202224 στη σκούρα κάρτα 2 (Κιτ), όπου λευκό θα άφηνε λωρίδα πάνω από τη
   σκούρα λεζάντα. */
body.mts-page .category .cat-photo {
	padding: 0;
}

body.mts-page .category .cat-photo > img {
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

body.mts-page .category .cat-photo:after {
	content: '';
	position: absolute;
	inset: 0;
	left: 0;
	width: auto;
	transform: none;
	background: linear-gradient(to bottom, transparent 55%, #fff 100%);
	pointer-events: none;
}

body.mts-page .category:nth-child(2) .cat-photo:after {
	background: linear-gradient(to bottom, transparent 55%, #202224 100%);
}

body.mts-page .category:nth-child(-n+2) .cat-caption h3 {
	font-size: var(--t-h3-card);
	font-weight: var(--t-h3-card-fw);
	line-height: var(--t-h3-card-lh);
	letter-spacing: var(--t-h3-card-ls);
}

body.mts-page .category:nth-child(n+3) .cat-caption h3 {
	font-size: var(--t-h3-card-small);
	font-weight: var(--t-h3-card-small-fw);
	line-height: var(--t-h3-card-small-lh);
	letter-spacing: var(--t-h3-card-small-ls);
}

/* ---- ζώνη φωτογραφίας (§1.4): πρότυπο κουτιού χωρίς hover (δεν είναι σύνδεσμος) ---- */
body.mts-page .mts-photo-band {
	padding-bottom: var(--b-section-pad);
}

body.mts-page .mts-photo-band-box {
	aspect-ratio: 2128 / 739;
	overflow: hidden;
	background: #1e2022;
}

body.mts-page .mts-photo-band-box img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---- σκούρα ενότητα σειρών (§1.5): μόνο padding-block και μεγέθη κειμένου ---- */
body.mts-page .series {
	padding: var(--b-series-pad) 0;
}

body.mts-page #series .series-card h3 {
	font-size: var(--t-h3-series);
	font-weight: var(--t-h3-series-fw);
	line-height: var(--t-h3-series-lh);
	letter-spacing: var(--t-h3-series-ls);
}

/* ---- MTS Technik στην Ελλάδα (§1.6): σκούρο κουτί με το λογότυπο ChassiPro ---- */
body.mts-page #brand .brand-emblem {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--b-brand-box-h);
	padding: 24px;
	background: #1e2022;
}

body.mts-page #brand .brand-emblem img {
	display: block;
	width: var(--b-brand-logo-w);
	max-width: 100%;
	height: auto;
}

@media (max-width: 767px) {
	body.mts-page #brand .brand-emblem {
		order: 2;
	}
}

/* ---- κίτρινη μπάντα (§1.7) ---- */
body.mts-page .contact .wrap {
	padding: var(--b-band-pad) 0;
}

body.mts-page .contact .wrap h2 {
	font-size: var(--t-band-h2);
	font-weight: var(--t-band-h2-fw);
	line-height: var(--t-band-h2-lh);
	letter-spacing: var(--t-band-h2-ls);
}

body.mts-page .mts-search input[type="search"],
body.mts-page .mts-search button {
	min-height: var(--b-band-control-h);
}

body.mts-page .mts-search input[type="search"] {
	font-size: var(--t-band-input);
	line-height: var(--t-band-input-lh);
}

/* ---- footer (§1.8): padding-block και μεγέθη κειμένου· δομή, λογότυπα, στήλες ως έχουν.
   Οι σύνδεσμοι παίρνουν το διάστιχο του v3 (1.6) μαζί με το margin 9px του v3, αλλιώς
   η λίστα θα μαζευόταν (13×2.1 → 13×1.6). ---- */
body.mts-page .footer {
	padding: var(--b-footer-pad-top) 0 var(--b-footer-pad-bottom);
}

body.mts-page .footer h3 {
	font-size: var(--t-footer-heading);
	font-weight: var(--t-footer-heading-fw);
	line-height: var(--t-footer-heading-lh);
}

body.mts-page .footer-grid a {
	font-size: var(--t-footer-link);
	line-height: var(--t-footer-link-lh);
	margin: 9px 0;
}

body.mts-page .footer-brand p {
	font-size: var(--t-footer-text);
	line-height: var(--t-footer-text-lh);
}

body.mts-page .footer-bottom {
	font-size: var(--t-footer-small);
	line-height: var(--t-footer-small-lh);
}

/* ---- header στα 768–1023: συμπύκνωση ----
   Ήδη πριν το BRIEF-06 (μετρήθηκε με τα CSS του backup): στα 768 px τα εικονίδια
   έφταναν στα 808 px — οριζόντιο scroll 25 px, γιατί το nav δείχνει και τα 4 στοιχεία
   (BRIEF-05 §2.3). Το μέγεθος γραμμάτων του nav ΔΕΝ μειώνεται (token nav-link)·
   μικραίνουν τα κενά και τα δύο λογότυπα, το ύψος του header μένει. */
@media (min-width: 768px) and (max-width: 1023px) {
	body.mts-page .head .wrap {
		gap: 12px;
	}

	body.mts-page .head .identity {
		gap: 10px;
	}

	body.mts-page .head .mts {
		width: 72px;
	}

	body.mts-page .head .dealer {
		padding-left: 10px;
	}

	body.mts-page .head .dealer .cp-logo {
		height: 46px;
	}

	body.mts-page .head .nav {
		gap: 12px;
	}

	body.mts-page .head .actions {
		gap: 8px;
	}
}

/* ---- ζώνη φωτογραφίας: λοξές ετικέτες (πύλη 1, 26/09) ----
   Παραλληλόγραμμα με κοπή ≈20° στην πλευρά προς το κέντρο· η ανοιχτή πλευρά κολλά στην άκρη
   της εικόνας. Λοξή κοπή = ύψος × tan20° ≈ 0.364 × (1.1em + 2×.3em) ≈ .62em, που προστίθεται στο
   padding της λοξής πλευράς. Κίνηση: mts.js βάζει .is-armed (θέση εκκίνησης, χωρίς transition)
   και .is-in όταν η ζώνη είναι ≥35% ορατή. Χωρίς JS / με reduced motion: στη θέση τους. */
body.mts-page .mts-photo-band-box {
	position: relative;
}

body.mts-page .mts-tag {
	--tag-cut: .62em;
	position: absolute;
	display: block;
	max-width: 88%;
	padding: .3em 1.4em;
	background: #fec608;
	color: #1a1a1a;
	font-size: var(--t-photo-tag);
	font-weight: 700;
	line-height: var(--t-h3-series-lh);
	letter-spacing: var(--t-h3-series-ls);
}

body.mts-page .mts-tag.is-left {
	top: 8%;
	left: 0;
	padding-right: calc(1.4em + var(--tag-cut));
	clip-path: polygon(0 0, 100% 0, calc(100% - var(--tag-cut)) 100%, 0 100%);
}

body.mts-page .mts-tag.is-right {
	right: 0;
	bottom: 8%;
	padding-left: calc(1.4em + var(--tag-cut));
	clip-path: polygon(var(--tag-cut) 0, 100% 0, 100% 100%, 0 100%);
	text-align: right;
}

body.mts-page .mts-photo-band.is-armed .mts-tag {
	transition: none;
}

body.mts-page .mts-photo-band.is-armed .mts-tag.is-left {
	transform: translateX(-110%);
}

body.mts-page .mts-photo-band.is-armed .mts-tag.is-right {
	transform: translateX(110%);
}

body.mts-page .mts-photo-band.is-armed.is-in .mts-tag {
	transform: none;
	transition: transform .6s cubic-bezier(.22, .61, .36, 1);
}

body.mts-page .mts-photo-band.is-armed.is-in .mts-tag.is-right {
	transition-delay: .15s;
}

@media (prefers-reduced-motion: reduce) {
	body.mts-page .mts-photo-band.is-armed .mts-tag {
		transform: none;
		transition: none;
	}
}

/* Κάτω από 768: οι ετικέτες βγαίνουν κάτω από την εικόνα ως chips (ίδιο στυλ, ίδιο γλίστρημα).
   Το πρότυπο κουτιού περνά από το κουτί στην ίδια την εικόνα· η σειρά των chips κόβει ό,τι
   βρίσκεται εκτός (overflow hidden) για το γλίστρημα. */
@media (max-width: 767px) {
	body.mts-page .mts-photo-band-box {
		aspect-ratio: auto;
		overflow: visible;
		border-radius: 0;
		box-shadow: none;
		background: none;
	}

	body.mts-page .mts-photo-band-box img {
		height: auto;
		aspect-ratio: 2128 / 739;
		border-radius: 12px;
		box-shadow: 0 16px 36px #1a1a1a29;
	}

	body.mts-page .mts-photo-tags {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 10px;
		margin-top: 18px;
		overflow: hidden;
	}

	body.mts-page .mts-tag {
		position: static;
		max-width: 100%;
	}

	body.mts-page .mts-tag.is-right {
		margin-left: auto;
	}
}

/* ---- BRIEF-08 §3.1: chevron στο «Προϊόντα» (SVG 12 px, χρώμα κειμένου)· περιστροφή 180° όταν το mega menu είναι ανοιχτό.
   Στο accordion κινητού ο υπάρχων μηχανισμός (+/−). ---- */
body.mts-page .head .nav .mts-mega-trigger {
	gap: 6px;
}
body.mts-page .mts-chevron {
	flex: none;
	width: 12px;
	height: 12px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .2s;
}
body.mts-page .mts-mega-trigger[aria-expanded="true"] .mts-chevron {
	transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
	body.mts-page .mts-chevron {
		transition: none;
	}
}

/* ---- 29/09/2026 Γ: το header πάνω από τη μπάρα οχήματος και κάθε sticky στοιχείο. Το mts.css δίνει στο .head
   position:relative + z-index:15 → νέο stacking context, οπότε το mega menu (#mts-mega, 35) δεν μπορεί να ανέβει πάνω από
   ό,τι είναι > 15 έξω από το header: .v-bar 20, .v-change-panel 30, .sticky-buy 30 — το dropdown έβγαινε ΠΙΣΩ από την
   κίτρινη μπάρα. 50 = πάνω από αυτά· κάτω από τα modal (φίλτρα 55/60, toast 80). Η αναζήτηση είναι <dialog> με showModal()
   (top layer), πάνω από όλα ούτως ή άλλως. ---- */
body.mts-page .head {
	z-index: 50;
}

/* ---- 29/09/2026 Δ: «Σύγκριση» στη λίστα αποτελεσμάτων οχήματος (assets/js/mts-compare.js) — λειτουργικό checkbox,
   μπάρα «Σύγκριση (N)» κάτω, πίνακας σε <dialog>. Το .v-compare του mts-pages.css ήταν «ανενεργό» (γκρι, not-allowed). ---- */
body.mts-page .v-compare {
	color: var(--muted);
	cursor: pointer;
}
body.mts-page .v-compare input {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--ink);
	cursor: pointer;
}
body.mts-page .mts-cmp-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	background: var(--ink);
	color: var(--white);
	box-shadow: 0 -8px 24px #1a1a1a29;
}
body.mts-page .mts-cmp-bar[hidden] {
	display: none;
}
body.mts-page .mts-cmp-bar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 64px;
	padding-block: 10px;
}
body.mts-page .mts-cmp-count {
	font-size: 14px;
	line-height: 20px;
}
body.mts-page .mts-cmp-actions {
	display: flex;
	gap: 12px;
}
body.mts-page .mts-cmp-open,
body.mts-page .mts-cmp-clear,
body.mts-page .mts-cmp-remove {
	min-height: 44px;
	padding: 10px 18px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	cursor: pointer;
}
body.mts-page .mts-cmp-open {
	border: 0;
	background: var(--yellow);
	color: var(--ink);
}
body.mts-page .mts-cmp-clear {
	border: 1px solid #ffffff59;
	background: transparent;
	color: var(--white);
}
body.mts-page .mts-cmp-dialog {
	width: min(1100px, calc(100% - 32px));
	max-width: none;
}
body.mts-page .mts-cmp-scroll {
	overflow-x: auto;
}
body.mts-page .mts-cmp-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	font-size: 14px;
	line-height: 20px;
}
body.mts-page .mts-cmp-table th,
body.mts-page .mts-cmp-table td {
	min-width: 160px;
	padding: 12px;
	border-bottom: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}
body.mts-page .mts-cmp-table tr > :first-child {
	width: 150px;
	min-width: 0;
}
body.mts-page .mts-cmp-table tbody th {
	color: var(--muted);
	font-weight: 500;
}
/* η μπάρα δεν σκεπάζει το τέλος της σελίδας */
body.mts-page.mts-cmp-on {
	padding-bottom: 72px;
}
body.mts-page .mts-cmp-table thead th {
	color: var(--ink);
	font-weight: 700;
}
body.mts-page .mts-cmp-table img {
	display: block;
	width: 100%;
	max-width: 160px;
	height: auto;
	border-radius: 8px;
}
body.mts-page .mts-cmp-title {
	color: var(--ink);
	font-weight: 500;
}
body.mts-page .mts-cmp-link {
	color: var(--ink);
	font-weight: 500;
	text-decoration: underline;
}
body.mts-page .mts-cmp-remove {
	border: 1px solid var(--line);
	background: var(--white);
	color: var(--ink);
}
@media (max-width: 767px) {
	body.mts-page .mts-cmp-bar-inner {
		flex-wrap: wrap;
	}
	body.mts-page .mts-cmp-table th,
	body.mts-page .mts-cmp-table td {
		min-width: 0;
		padding: 10px 6px;
		overflow-wrap: anywhere;
	}
	body.mts-page .mts-cmp-table tr > :first-child {
		width: 84px;
	}
	body.mts-page.mts-cmp-on {
		padding-bottom: 124px;
	}
}

/* =========================================================================
   BRIEF-09 Στάδιο 1 (04/10/2026)
   ========================================================================= */

/* §3.2.5 — αρχική με 6 κάρτες κατηγοριών (απάντηση ΣΤΟΠ 1 §10): desktop 3+3, tablet 2+2+2, κινητό 1 στήλη (όπως σήμερα).
   Όλες ίδιο πλάτος και ίδια αναλογία εικόνας· υπερισχύει της διάταξης 2+3+2 (ίδια εξειδίκευση, αργότερα στο αρχείο). */
@media (min-width: 768px) {
	body.mts-page .category-grid > .category:nth-child(n) {
		width: calc((100% - var(--b-grid-gap)) / 2);
	}

	body.mts-page .category-grid > .category:nth-child(n) .cat-photo {
		aspect-ratio: var(--b-card-ratio-small);
	}

	body.mts-page .category-grid > .category:nth-child(2) .cat-photo {
		flex: none;
	}

	/* ίδια λεζάντα σε όλες (η μεγάλη των παλιών καρτών 1–2 — κανένα κείμενο δεν μικραίνει) */
	body.mts-page .category-grid > .category:nth-child(n) .cat-caption {
		padding: 20px 24px;
		min-height: 96px;
	}

	body.mts-page .category-grid > .category:nth-child(n) .cat-caption h3 {
		font-size: var(--t-h3-card);
		font-weight: var(--t-h3-card-fw);
		line-height: var(--t-h3-card-lh);
		letter-spacing: var(--t-h3-card-ls);
	}
}

@media (min-width: 1280px) {
	body.mts-page .category-grid > .category:nth-child(n) {
		width: calc((100% - 2 * var(--b-grid-gap)) / 3);
	}
}

/* §3.2.4 — Top Mounts / Camber Plates: δύο εικόνες δίπλα δίπλα στο ίδιο row (animated WebP / ζεύγος υλικών). */
body.mts-page .c-row-media.is-pair {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 16px;
	align-items: center;
}

body.mts-page .c-row-copy .c-eyebrow {
	margin: 0 0 8px;
}

/* §3.2.4 — πίνακας «Λειτουργίες» (στυλ του τεχνικού πίνακα προϊόντος· στο κινητό κάθε γραμμή = κάρτα). */
body.mts-page .c-text.c-table-block {
	width: 100%;
}

body.mts-page .c-table-block > h2,
body.mts-page .c-table-block > p {
	max-width: 66.667%;
	margin-inline: auto;
}

body.mts-page .c-table-block .c-table-wrap {
	margin-top: 32px;
	text-align: left;
	box-shadow: 0 16px 36px rgba(26, 26, 26, .16);
}

body.mts-page .c-table th[scope="row"] {
	color: #1a1a1a;
	font-weight: 700;
	white-space: nowrap;
}

@media (max-width: 1023px) {
	body.mts-page .c-table-block > h2,
	body.mts-page .c-table-block > p {
		max-width: none;
	}
}

@media (max-width: 767px) {
	body.mts-page .c-table-block .c-table-wrap {
		overflow: visible;
		background: transparent;
		border: 0;
		box-shadow: none;
	}

	body.mts-page .c-table-block .c-table,
	body.mts-page .c-table-block .c-table tbody,
	body.mts-page .c-table-block .c-table tr,
	body.mts-page .c-table-block .c-table th,
	body.mts-page .c-table-block .c-table td {
		display: block;
		width: 100%;
	}

	body.mts-page .c-table-block .c-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	body.mts-page .c-table-block .c-table tr {
		margin-bottom: 16px;
		padding: 16px;
		background: #fff;
		border: 1px solid #dde1e5;
		border-radius: 12px;
		box-shadow: 0 16px 36px rgba(26, 26, 26, .16);
	}

	body.mts-page .c-table-block .c-table th[scope="row"] {
		padding: 0 0 8px;
		border-top: 0;
		white-space: normal;
	}

	body.mts-page .c-table-block .c-table td {
		padding: 8px 0 0;
		border-top: 0;
	}

	body.mts-page .c-table-block .c-table td::before {
		content: attr(data-label);
		display: block;
		color: var(--muted);
		font-weight: 600;
	}
}

/* ===========================================================================
   BRIEF-09 Στάδιο 2 (05/10/2026) — Desktop ≥1280 (1366/1440/1920)
   Μεγέθη = στήλη «πρόταση desktop» του πίνακα ΣΤΟΠ 1 (B09-STOP1-pinakes.xlsx, «0.2 Μεγέθη»), με τις αλλαγές του
   Ioannis: μενού header 16/500, footer links 16. Τα tokens (mts-tokens.css = παράγωγο, δεν γράφεται με το χέρι)
   ξαναορίζονται εδώ ΜΟΝΟ για ≥1280· tablet/κινητό = Στάδιο 3. Κανένα κείμενο δεν μικραίνει.
   «html body.mts-page …» = εξειδίκευση πάνω από το mts-pages.css, που φορτώνει μετά το mts-extra.css.
   =========================================================================== */

/* §4.3 — κίτρινο μπλοκ SKU ανάμεσα σε header και hero (template-parts/mts-band-search.php, pos=top).
   Ζώνη στο χρώμα του header· κουτί = πλάτος επιλογέα (.wrap), radius/σκιά = κουτί επιλογέα. Τίτλος 32 px όπως η
   παλιά μπάντα (κανόνας «κανένα κείμενο δεν μικραίνει»), πεδίο/κουμπί ≥ 44 px. */
body.mts-page .mts-sku-top {
	position: relative;
	z-index: 2;
	padding: 14px 0 18px;
	background: #121314;
}

body.mts-page .mts-sku-box {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 14px 28px;
	background: var(--yellow);
	color: var(--ink);
	border-radius: var(--box-radius);
	box-shadow: var(--box-shadow);
}

body.mts-page .mts-sku-title {
	margin: 0;
	color: var(--ink);
	font-size: var(--t-band-h2);
	font-weight: var(--t-band-h2-fw);
	line-height: var(--t-band-h2-lh);
	letter-spacing: var(--t-band-h2-ls);
}

body.mts-page .mts-sku-sub {
	margin: 4px 0 0;
	color: var(--ink);
	font-size: 14px;
	line-height: 1.55;
}

body.mts-page .mts-sku-box .mts-search {
	flex: 0 1 480px;
	flex-wrap: nowrap;
	min-width: 0;
}

body.mts-page .mts-sku-box .mts-search input[type="search"] {
	width: 100%;
	min-width: 0;
	min-height: 48px;
	padding: 10px 16px;
}

body.mts-page .mts-sku-box .mts-search button {
	flex: none;
	min-height: 48px;
	padding: 12px 24px;
}

@media (max-width: 1023px) {
	body.mts-page .mts-sku-box {
		flex-wrap: wrap;
	}

	body.mts-page .mts-sku-box .mts-search {
		flex: 1 1 100%;
	}
}

@media (max-width: 767px) {
	body.mts-page .mts-sku-top {
		padding: 10px 0 14px;
	}

	body.mts-page .mts-sku-box {
		gap: 12px;
		padding: 14px 16px;
	}
}

/* §4.2 — mega menu: κατηγορία χωρίς υποκατηγορίες (is-flat) → μεσαία + δεξιά στήλη χωρίς διαχωριστικό. Η διάταξη
   (στήλες, πλάτη) δεν αλλάζει, άρα η εικόνα μένει στο ίδιο σημείο· σταθερό πλαίσιο 351×184 (λόγος των εικόνων των
   άλλων κατηγοριών) ώστε μια εικόνα με άλλον λόγο να μη «πηδάει». */
body.mts-page #mts-mega.is-flat .mts-mega-subs {
	border-right-color: transparent;
}

body.mts-page #mts-mega .mts-mega-photo.is-fixed img {
	width: 100%;
	height: auto;
	aspect-ratio: 351 / 184;
	object-fit: contain;
	background: #fff;
}

@media (min-width: 1280px) {
	:root {
		--t-nav-link: 16px;
		--t-nav-link-fw: 500;
		--t-input: 16px;
		--t-btn: 16px;
		--t-band-input: 17px;
		--t-footer-heading: 16px;
		--t-footer-link: 16px;
		--t-footer-text: 14px;
		--t-footer-small: 13px;
		--t-product-title: clamp(17px, 16.24px + 0.196vw, 20px);
		--t-product-sku: 14px;
		--t-price: clamp(25px, 24.75px + 0.065vw, 26px);
		--t-price-row: 22px;
		--t-table-th: 13px;
		--t-table-td: 13px;
		--t-table-td-strong: 16px;
		--t-spec-th: 14px;
		--t-spec-td: 14px;
		--b-footer-pad-top: 88px;
		--b-footer-pad-bottom: 32px;
	}

	/* §4.1 — λογότυπο MTS 95×55 → 118×68 (ίδιο ύψος header 96)· ChassiPro όπως είναι. Top bar 12 → 13. */
	body.mts-page .head .mts {
		width: 118px;
		height: auto;
	}

	body.mts-page .top {
		font-size: 13px;
	}

	/* §4.2 — mega menu επίπεδο 1 / 2: 15 → 16 */
	body.mts-page #mts-mega .mts-mega-cat,
	body.mts-page #mts-mega .mts-mega-sublist a {
		font-size: 16px;
		line-height: 24px;
	}

	/* §4.5 — footer: πιο ψηλό, μεγαλύτεροι τίτλοι/links, άνετες αποστάσεις, στήλες */
	body.mts-page .footer h3 {
		margin-bottom: 22px;
	}

	body.mts-page .footer-grid a {
		margin: 12px 0;
	}

	body.mts-page .footer-bottom {
		margin-top: 52px;
		padding-top: 28px;
	}

	/* §4.6 — λίστα κατηγορίας: 4 → 3 κάρτες ανά σειρά = μεγαλύτερη εικόνα (≈215 → 297 px στα 1366)· κείμενα από τα tokens */
	html body.mts-page .c-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	body.mts-page .c-card .c-card-low {
		font-size: 14px;
	}

	/* §4.6 — λίστα οχήματος: πιο ψηλές γραμμές, thumbnail 74×56 → 104×78, «Δες προϊόν» 16 με στόχο 44, «Σύγκριση» 13 σκουρότερο */
	html body.mts-page .v-row {
		padding: 22px 24px;
	}

	html body.mts-page .v-row-head {
		padding-top: 14px;
		padding-bottom: 14px;
	}

	html body.mts-page .v-thumb {
		width: 104px;
		height: 78px;
	}

	body.mts-page .v-row .v-view {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		font-size: 16px;
	}

	body.mts-page .v-row .v-compare {
		min-height: 32px;
		color: var(--muted);
		cursor: pointer;
	}

	body.mts-page .v-row .v-compare input {
		width: 18px;
		height: 18px;
	}
}

/* §4.7 — PhotoSwipe (CSS του WooCommerce, μόνο στη σελίδα προϊόντος): κύρια εικόνα = σύνδεσμος μεγέθυνσης */
body.mts-page .p-zoom {
	display: block;
	align-self: stretch;
	width: 100%;
	height: 100%;
	cursor: zoom-in;
}

body.mts-page .pswp {
	z-index: 100000;
}

/* Διόρθωση Ioannis 05/10: λεζάντα «Ενδεικτική εικόνα» μέσα στο lightbox — ευανάγνωστη (λευκό, 14 px, κέντρο) */
body.mts-page .pswp__caption__center {
	max-width: 720px;
	padding: 12px 16px;
	font-size: 14px;
	line-height: 1.45;
	color: #fff;
	text-align: center;
}


/* ===========================================================================
   BRIEF-09 — απαντήσεις ΣΤΟΠ 3 (05/10/2026)
   =========================================================================== */

/* 1 — τίτλος κίτρινου κουτιού: «Βρες τη δική σου εφαρμογή» (επιλογέας) = «Αναζήτηση με κωδικό MTS» (μπλοκ SKU), ίδιος
   ρόλος, ίδιο μέγεθος: ≥768 28 px, <768 24 px· υπότιτλοι 14 px. Εξαίρεση του Ioannis από το «κανένα κείμενο δεν μικραίνει»
   μόνο για αυτόν τον ρόλο. Βάρος/line-height/letter-spacing = του επιλογέα και για τα δύο. */
:root {
	--t-selector-h2: 28px;
	--t-band-h2: 28px;
	--t-band-h2-lh: var(--t-selector-h2-lh);
	--t-band-h2-ls: var(--t-selector-h2-ls);
}

@media (max-width: 767px) {
	:root {
		--t-selector-h2: 24px;
		--t-band-h2: 24px;
	}
}

body.mts-page .selector-wrap .selector-head p,
body.mts-page .selector.vehicle-form .selector-head p,
body.mts-page .mts-sku-sub {
	font-size: 14px;
}

/* «Νέο» overlay κάτω από το ανοιχτό mega menu (mts-mega.js). Κάτω από τον header (z-index 50), πάνω από τη σελίδα. */
body.mts-page .mts-mega-scrim {
	position: fixed;
	inset: 0;
	z-index: 45;
	background: rgba(26, 26, 26, .45);
}

body.mts-page .mts-mega-scrim[hidden] {
	display: none;
}

/* η γραμμή «ChassiPro · Επίσημος αντιπρόσωπος…» μένει φωτεινή όπως ο header */
body.mts-page .top {
	position: relative;
	z-index: 46;
}

/* 3 — footer: 5η στήλη «Επικοινωνία» (διεύθυνση, τηλέφωνο, email). Desktop: 5 στήλες, το λογότυπο (215) δίνει χώρο ώστε
   οι κατηγορίες να μένουν σε μία γραμμή στα 1366· tablet/κινητό = Στάδιο 3. */
@media (min-width: 1280px) {
	body.mts-page .footer-grid {
		grid-template-columns: minmax(215px, 1fr) 1.3fr 1.2fr .8fr 1.2fr;
		gap: 40px;
	}
}

body.mts-page .footer .footer-address {
	margin: 9px 0;
	color: inherit;
	font-size: var(--t-footer-link);
	line-height: var(--t-footer-link-lh);
}

@media (min-width: 1280px) {
	body.mts-page .footer .footer-address {
		margin: 12px 0;
	}
}

body.mts-page .footer-reach a {
	overflow-wrap: anywhere;
}

/* ===========================================================================
   BRIEF-09 Στάδιο 3 (05/10/2026) — Mobile 360/390/430 · Tablet 768/1024
   Μεγέθη = στήλες «πρόταση tablet» / «πρόταση mobile» του πίνακα ΣΤΟΠ 1 (μενού 16/500 και footer links 16: Ioannis).
   Desktop (≥ 1280) = Στάδιο 2, δεν αγγίζεται. «html body.mts-page …» όπου ο κανόνας ζει στο mts-pages.css (φορτώνει μετά).
   =========================================================================== */

@media (min-width: 768px) and (max-width: 1279px) {
	:root {
		--t-nav-link: 16px;
		--t-nav-link-fw: 500;
		--t-input: 16px;
		--t-btn: 16px;
		--t-band-input: 17px;
		--t-footer-heading: 16px;
		--t-footer-link: 16px;
		--t-footer-text: 14px;
		--t-footer-small: 13px;
		--t-product-title: 18px;
		--t-product-sku: 14px;
		--t-price: 24px;
		--t-price-row: 20px;
		--t-table-th: 13px;
		--t-table-td: 13px;
		--t-table-td-strong: 16px;
		--t-spec-th: 14px;
		--t-spec-td: 14px;
	}

	body.mts-page .top {
		font-size: 13px;
	}

	body.mts-page .c-card .c-card-low {
		font-size: 14px;
	}

	body.mts-page #mts-mega .mts-mega-cat,
	body.mts-page #mts-mega .mts-mega-sublist a {
		font-size: 16px;
		line-height: 24px;
	}
}

@media (max-width: 767px) {
	:root {
		--t-body: 16px;
		--t-input: 17px;
		--t-btn: 16px;
		--t-band-input: 17px;
		--t-footer-heading: 16px;
		--t-footer-link: 16px;
		--t-footer-text: 15px;
		--t-footer-small: 13px;
		--t-product-title: 17px;
		--t-product-sku: 14px;
		--t-price: 24px;
		--t-chip: 13px;
		--t-table-th: 13px;
		--t-table-td-strong: 18px;
		--t-price-row: 28px;
		--t-tabs: 13px;
		--t-spec-th: 13px;
		--t-spec-td: 13px;
	}

	body.mts-page .c-card .c-card-low {
		font-size: 13px;
	}

	html body.mts-page .v-tuv {
		font-size: 14px;
	}
}

/* §4.9 — κάτω από 1024 px: συρτάρι αντί για το desktop μενού (στα 768 σπάει σε 2 γραμμές· στα 1024 χωράει σε μία).
   Εικονίδια header ≥ 44×44, ☰ 48×48· το καλάθι μένει ως εικονίδιο και στο κινητό (§4.8: «Καλάθι» φεύγει από το μενού). */
@media (max-width: 1023px) {
	body.mts-page .head .nav {
		display: none;
	}

	body.mts-page .head .mobile-menu {
		display: flex;
		min-width: 48px;
		min-height: 48px;
	}

	body.mts-page .head .icon-button {
		min-width: 44px;
		min-height: 44px;
	}

	body.mts-page .head .cart {
		display: flex;
	}

	body.mts-page #mts-mega,
	body.mts-page .mts-mega-scrim {
		display: none !important;
	}
}

/* §4.8 — συρτάρι: πλήρες ύψος, σκούρο, από δεξιά (όπου το ☰)· πλάτος ≤ 400 και πάντα μια λωρίδα έξω για πάτημα-κλείσιμο.
   Χρώματα: #1a1a1a / αποχρώσεις του μαύρου για τα επίπεδα, κίτρινο για «Όλη η κατηγορία» και την τρέχουσα σελίδα. */
body.mts-page .mts-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 70;
	display: flex;
	flex-direction: column;
	width: min(400px, calc(100% - 56px));
	overflow-y: auto;
	overscroll-behavior: contain;
	background: #1a1a1a;
	color: var(--white);
	box-shadow: -16px 0 36px rgba(0, 0, 0, .4);
}

body.mts-page .mts-drawer-backdrop {
	position: fixed;
	inset: 0;
	z-index: 69;
	background: rgba(26, 26, 26, .6);
}

body.mts-page .mts-drawer[hidden],
body.mts-page .mts-drawer-backdrop[hidden] {
	display: none;
}

html.mts-drawer-open,
html.mts-drawer-open body {
	overflow: hidden;
}

body.mts-page .mts-drawer-top {
	display: flex;
	justify-content: flex-end;
	padding: 8px 8px 8px 20px;
	border-bottom: 1px solid #333;
}

body.mts-page .mts-drawer-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--white);
	cursor: pointer;
}

body.mts-page .mts-drawer-close svg {
	width: 28px;
	height: 28px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
}

body.mts-page .mts-drawer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.mts-page .mts-drawer-l1 > li {
	border-bottom: 1px solid #333;
}

body.mts-page .mts-drawer .mts-drawer-toggle,
body.mts-page .mts-drawer .mts-drawer-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 56px;
	padding: 14px 20px;
	border: 0;
	border-left: 3px solid transparent;
	border-radius: 0;
	background: transparent;
	color: var(--white);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	text-align: left;
	cursor: pointer;
}

body.mts-page .mts-drawer-chev {
	flex: none;
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	transition: transform .2s ease;
}

body.mts-page .mts-drawer-toggle[aria-expanded="true"] .mts-drawer-chev {
	transform: rotate(180deg);
}

body.mts-page .mts-drawer-panel {
	padding: 4px 0 8px;
	background: #2b2b2b;
	border-top: 1px solid #333;
}

body.mts-page .mts-drawer-panel a {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 12px 20px 12px 36px;
	border-left: 3px solid transparent;
	color: var(--white);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
}

body.mts-page .mts-drawer-panel a.mts-drawer-all {
	color: var(--yellow);
}

body.mts-page .mts-drawer [aria-current="page"] {
	border-left-color: var(--yellow);
}

body.mts-page .mts-drawer-extra {
	display: flex;
	flex-direction: column;
	margin: 28px 20px 36px;
	border-top: 1px solid #333;
}

body.mts-page .mts-drawer-extra a {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 10px 0;
	border-bottom: 1px solid #333;
	color: #d6d6d6;
	font-size: 15px;
	font-weight: 400;
}

body.mts-page .mts-drawer-extra svg {
	flex: none;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: var(--yellow);
	stroke-width: 1.8;
}

body.mts-page .mts-drawer a:hover,
body.mts-page .mts-drawer button:hover {
	color: var(--yellow);
}

body.mts-page .mts-drawer a:focus-visible,
body.mts-page .mts-drawer button:focus-visible {
	outline: 2px solid var(--yellow);
	outline-offset: -2px;
}

/* §4.10 — top bar: κρυφή στο κινητό (το τηλέφωνο είναι στο συρτάρι)· στο tablet μένει (13 px, μία γραμμή στα 768) και
   το τηλέφωνο παίρνει στόχο αφής 44 px. */
@media (max-width: 767px) {
	body.mts-page .top {
		display: none;
	}
}

@media (min-width: 768px) and (max-width: 1279px) {
	body.mts-page .top {
		height: auto;
	}

	body.mts-page .top a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	body.mts-page .head .nav > a,
	body.mts-page .head .nav .mts-mega-trigger {
		min-height: 44px;
	}
}

/* §4.10 — κίτρινο μπλοκ SKU στο κινητό, συμπαγές: τίτλος σε μία γραμμή, πεδίο + κουμπί σε μία σειρά πλήρους πλάτους. */
@media (max-width: 767px) {
	body.mts-page .mts-sku-top {
		padding: 10px 0 12px;
	}

	body.mts-page .mts-sku-box {
		gap: 10px;
		padding: 14px 16px 16px;
	}

	body.mts-page .mts-sku-text {
		min-width: 0;
	}

	body.mts-page .mts-sku-title {
		white-space: nowrap;
	}

	body.mts-page .mts-sku-box .mts-search button {
		padding: 10px 18px;
	}
}

/* §3.1 / §4.10 — στόχοι αφής ≥ 44 px σε κινητό και tablet. */
@media (max-width: 1279px) {
	html body.mts-page .c-chip {
		min-height: 44px;
	}

	body.mts-page .line-link,
	body.mts-page details > summary {
		min-height: 44px;
	}

	html body.mts-page .c-filter-clear {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	html body.mts-page .v-row .v-sku {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	html body.mts-page .v-row .v-view {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		font-size: 16px;
	}

	html body.mts-page .v-row .v-compare {
		min-height: 44px;
		color: var(--muted);
		cursor: pointer;
	}

	html body.mts-page .v-row .v-compare input {
		width: 20px;
		height: 20px;
	}

	body.mts-page .footer-grid a {
		display: flex;
		align-items: center;
		min-height: 44px;
		margin: 0;
	}
}

/* §4.10 — footer. 1024–1279: 3 στήλες (5 ομάδες). Κινητό: όλα κεντραρισμένα, κάθε link 44 px, η εικόνα
   footer-mobile.png κάτω σε πλάτος 100 % με συμπαγές σκούρο από πάνω (απόφαση 9 ΣΤΟΠ 1), πίσω από το σκούρο overlay. */
@media (min-width: 1024px) and (max-width: 1279px) {
	body.mts-page .footer-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 36px 40px;
	}
}

@media (max-width: 767px) {
	body.mts-page .footer {
		background-color: #0a0b0c;
		background-position: center bottom;
		background-size: 100% auto;
	}

	/* BRIEF-09 LCP: η εικόνα (κάτω άκρη της σελίδας) κατεβαίνει μετά το «load» — δεν μοιράζεται το δίκτυο με την εικόνα LCP */
	html.mts-loaded body.mts-page .footer {
		background-image: url("../img/chassipro-footer-mobile-860.webp");
	}

	body.mts-page .footer-grid {
		gap: 32px;
		text-align: center;
	}

	body.mts-page .footer-grid > div {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	body.mts-page .footer h3 {
		margin-bottom: 6px;
	}

	body.mts-page .footer-grid a {
		justify-content: center;
		padding: 0 12px;
	}

	body.mts-page .footer .footer-address {
		margin: 6px 0 8px;
	}

	body.mts-page .footer-bottom {
		justify-content: center;
		text-align: center;
	}
}

/* §4.10 — πίνακες εφαρμογών (#p-fit) → κάρτες στο κινητό (μία γραμμή = μία κάρτα, ετικέτα από data-label)· σκιά box
   standard. Ο πίνακας «Λειτουργίες» (.c-table.p-table) έχει δικές του κάρτες από το Στάδιο 1. */
@media (max-width: 767px) {
	html body.mts-page #p-fit .p-table-wrap {
		overflow: visible;
		border: 0;
		background: none;
		box-shadow: none;
	}

	html body.mts-page #p-fit .p-table,
	html body.mts-page #p-fit .p-table tbody,
	html body.mts-page #p-fit .p-table tr,
	html body.mts-page #p-fit .p-table td {
		display: block;
		width: auto;
	}

	html body.mts-page #p-fit .p-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	html body.mts-page #p-fit .p-table tr {
		margin: 0 0 12px;
		padding: 10px 16px;
		border: 1px solid var(--line);
		border-radius: var(--box-radius);
		background: var(--white);
		box-shadow: var(--box-shadow);
	}

	html body.mts-page #p-fit .p-table td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		min-height: 36px;
		padding: 4px 0;
		border: 0;
		text-align: right;
	}

	html body.mts-page #p-fit .p-table td + td {
		border-top: 1px solid var(--line);
	}

	html body.mts-page #p-fit .p-table td::before {
		content: attr(data-label);
		flex: none;
		color: #5f6c75;
		font-weight: 500;
		text-align: left;
	}

	html body.mts-page #p-fit .p-table td a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}

/* Σύγκριση: κανένα link με υπογράμμιση (κανόνας 9). */
body.mts-page .mts-cmp-dialog a {
	text-decoration: none;
}

/* §4.11 — hero αρχικής < 1024: στατική εικόνα (το βίντεο μόνο ≥ 1024). Το αυτοκίνητο πιάνει το πάνω μισό της εικόνας,
   οπότε ο τίτλος κάθεται κάτω, στο σκοτεινό βρεγμένο έδαφος, με σκίαση από κάτω (στο σκοτεινό πάνω μέρος δεν χωρά). */
@media (max-width: 1023px) {
	body.mts-page .hero-video {
		display: none;
	}

	body.mts-page .hero .wrap {
		justify-content: flex-end;
		padding-bottom: 56px;
	}

	body.mts-page .hero:before {
		background: linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, transparent 20%, transparent 46%, rgba(0, 0, 0, .8) 100%);
	}
}

@media (max-width: 767px) {
	body.mts-page picture.hero-media img {
		object-position: 80% center;
	}

	/* hero Κιτ χαμηλώματος: η μπροστινή 3/4 πλευρά (κοπή στο πίσω μέρος) */
	html body.mts-page .c-hero.has-hero-photo .c-hero-media {
		object-position: var(--c-hero-pos-m, var(--c-hero-pos, right center));
	}
}

/* §4.10 — Scroll Cinema (Audi) στο κινητό: στατικό, εικόνα + τίτλος (chassipro-cinema.js: reduced και < 768). */
@media (max-width: 767px) {
	body.mts-page #chassipro-cinema.cp-ready .cp-track {
		height: var(--cp-height);
	}

	body.mts-page #chassipro-cinema .cp-stage {
		position: relative;
		top: 0;
	}

	body.mts-page #chassipro-cinema .cp-words {
		transform: none !important;
		opacity: 1 !important;
	}

	body.mts-page #chassipro-cinema .cp-car {
		transform: translateX(-50%) !important;
		filter: none !important;
	}

	body.mts-page #chassipro-cinema .cp-progress,
	body.mts-page #chassipro-cinema .cp-marker {
		display: none !important;
	}
}

/* Header κινητού: λογότυπα + 3 στόχοι αφής (αναζήτηση 44, καλάθι 44, ☰ 44) δεν χωρούσαν στα 360 (ξεχείλιζε 37 px).
   ≤ 400: μικρότερα διαστήματα και περιθώρια· ≤ 374: λογότυπο ChassiPro 38 → 34 px ύψος (μόνο εκεί δεν αρκούν τα διαστήματα). */
@media (max-width: 400px) {
	body.mts-page .head > .wrap {
		width: calc(100% - 24px);
		gap: 4px;
	}

	body.mts-page .head .actions {
		gap: 0;
	}

	body.mts-page .head .identity {
		gap: 8px;
	}

	body.mts-page .head .dealer {
		padding-left: 8px;
	}

	body.mts-page .head .mobile-menu {
		min-width: 44px;
		min-height: 44px;
	}
}

@media (max-width: 374px) {
	body.mts-page .head .dealer .cp-logo {
		height: 34px;
	}
}

@media (min-width: 1024px) and (max-width: 1279px) {
	body.mts-page .head .icon-button {
		min-width: 44px;
		min-height: 44px;
	}
}

/* breadcrumb: περιοχή αφής 44 px χωρίς να αλλάξει η διάταξη· checkbox φίλτρων: γραμμή 44 px */
@media (max-width: 1279px) {
	html body.mts-page .c-crumb a {
		padding: 13px 10px;
		margin: -13px -10px;
	}

	html body.mts-page .c-filter-choice {
		min-height: 44px;
	}
}

/* §4.10 — σύγκριση στο κινητό: στήλες προϊόντων ≥ 128 px (ο κωδικός δεν σπάει στη μέση)· με 3–4 προϊόντα ο πίνακας
   κυλά οριζόντια ΜΕΣΑ στο παράθυρο (η σελίδα όχι), με σταθερή τη στήλη των ετικετών. */
@media (max-width: 767px) {
	body.mts-page .mts-cmp-table {
		width: max-content;
		min-width: 100%;
		table-layout: auto;
	}

	body.mts-page .mts-cmp-table th,
	body.mts-page .mts-cmp-table td {
		min-width: 128px;
		max-width: 168px;
		padding: 10px 8px;
		overflow-wrap: break-word;
	}

	body.mts-page .mts-cmp-table tr > :first-child {
		position: sticky;
		left: 0;
		z-index: 1;
		width: 88px;
		min-width: 88px;
		background: var(--white);
	}
}

/* scrollbar-gutter: stable both-edges (παραπάνω) μετατοπίζει τα fixed στοιχεία κατά τη λωρίδα των 15 px σε browser με
   κανονική μπάρα κύλισης → το συρτάρι έβγαινε 15 px εκτός οθόνης. Κάτω από 1024 (όπου ζει το συρτάρι) χωρίς λωρίδες·
   σε κινητά/tablet η μπάρα είναι overlay, οπότε εκεί δεν αλλάζει τίποτα. */
@media (max-width: 1023px) {
	html {
		scrollbar-gutter: auto;
	}
}

/* ===========================================================================
   BRIEF-09 — απαντήσεις ΣΤΟΠ 4 (05/10/2026)
   Τυπογραφία: ΟΛΕΣ οι προτάσεις του πίνακα Γ (desktop ≥ 1280 / tablet 768–1279 / κινητό < 768), μόνο στα στοιχεία του
   πίνακα (scripts/b09/typo09.py). Οι κύριοι τίτλοι 52/48/35, το σώμα 16 και οι κάρτες-εικόνες αρχικής δεν αλλάζουν.
   =========================================================================== */

/* τίτλος κουτιού «Φίλτρα» = κίτρινα κουτιά 28 / 28 / 24 · δευτερεύων τίτλος ενότητας (πάνελ προϊόντος) 28 / 28 / 24 */
html body.mts-page .c-filters-head h2,
html body.mts-page .p-panel-title {
	font-size: 28px;
	line-height: 1.15;
}

/* τίτλος κάρτας (επιλογής / χαρακτηριστικού) 22 / 20 / 18 */
html body.mts-page .c-option h3,
html body.mts-page .x-choice h3,
html body.mts-page .c-feature h3,
html body.mts-page .x-feature h3 {
	font-size: 22px;
	line-height: 1.15;
}

/* τίτλος μπάρας οχήματος 16 παντού */
html body.mts-page .v-bar-title strong {
	font-size: 16px;
}

/* υπότιτλος σελίδας / ενότητας 17 / 16 / 14 */
html body.mts-page .section-heading p,
html body.mts-page .c-hero-intro,
html body.mts-page .c-flow-intro,
html body.mts-page .c-head-intro {
	font-size: 17px;
}

/* κουμπιά 16 / έντονα παντού: «Φίλτρα» (13), «Αλλαγή οχήματος» (12 / 11) */
html body.mts-page [data-filters-open],
html body.mts-page .v-change summary {
	font-size: 16px;
	font-weight: 700;
}

/* πεδία 17 παντού, ένα βάρος 500 */
html body.mts-page .selector select,
html body.mts-page .mts-sku-box input[type=search],
html body.mts-page #c-orderby,
html body.mts-page select[name=orderby],
html body.mts-page .v-bar-engine select,
html body.mts-page #c-kodikos,
html body.mts-page input.qty,
html body.mts-page .p-cart .quantity input.qty {
	font-size: 17px;
	font-weight: 500;
}

/* label 14 / 14 / 13, ένα βάρος 500 */
html body.mts-page .selector .field label,
html body.mts-page .c-filter-choice,
html body.mts-page .v-label,
html body.mts-page .v-row-head,
html body.mts-page .p-specs th,
html body.mts-page #p-fit th {
	font-size: 14px;
	font-weight: 500;
}

/* eyebrow (ΚΕΦΑΛΑΙΑ) 13 παντού — η ετικέτα «Evolution 2 top mounts» (όνομα προϊόντος, 16) μένει */
html body.mts-page .c-eyebrow:not(.c-row-copy .c-eyebrow) {
	font-size: 13px;
}

/* links: line-link («Γνώρισε τη…») 16 / 500 · breadcrumb 13 παντού */
html body.mts-page .line-link {
	font-size: 16px;
	font-weight: 500;
}

html body.mts-page .c-crumb,
html body.mts-page .c-crumb a {
	font-size: 13px;
}

@media (min-width: 768px) and (max-width: 1279px) {
	html body.mts-page .c-option h3,
	html body.mts-page .x-choice h3,
	html body.mts-page .c-feature h3,
	html body.mts-page .x-feature h3 {
		font-size: 20px;
	}

	html body.mts-page .section-heading p,
	html body.mts-page .c-hero-intro,
	html body.mts-page .c-flow-intro,
	html body.mts-page .c-head-intro {
		font-size: 16px;
	}
}

@media (max-width: 767px) {
	html body.mts-page .c-filters-head h2,
	html body.mts-page .p-panel-title {
		font-size: 24px;
	}

	html body.mts-page .c-option h3,
	html body.mts-page .x-choice h3,
	html body.mts-page .c-feature h3,
	html body.mts-page .x-feature h3 {
		font-size: 18px;
	}

	html body.mts-page .section-heading p,
	html body.mts-page .c-hero-intro,
	html body.mts-page .c-flow-intro,
	html body.mts-page .c-head-intro {
		font-size: 14px;
	}

	html body.mts-page .selector .field label,
	html body.mts-page .c-filter-choice,
	html body.mts-page .v-label,
	html body.mts-page .v-row-head,
	html body.mts-page .p-specs th,
	html body.mts-page #p-fit th {
		font-size: 13px;
	}

	/* απάντηση 4: ο υπότιτλος του μπλοκ SKU κρύβεται στο κινητό, όπως ο υπότιτλος του επιλογέα */
	body.mts-page .mts-sku-top .mts-sku-sub {
		display: none;
	}
}

/* Νέα Α — σκοτεινή ενότητα Audi στο κινητό: θέσεις σε px (όχι % ενός ύψους που στο κινητό εξαρτάται από τις μπάρες του
   browser): τίτλος πάνω (40 px), γραμμή λέξεων με περίγραμμα στο κενό ανάμεσα, αυτοκίνητο κάτω χωρίς επικάλυψη. Οι λέξεις
   στατικές (§4.10), μέγεθος ανάλογο του πλάτους ώστε το «MTS TECHNIK» να χωρά ολόκληρο, περίγραμμα πιο φωτεινό (18 → 50 %). */
@media (max-width: 767px) {
	body.mts-page #chassipro-cinema {
		--cp-height: 580px;
	}

	body.mts-page #chassipro-cinema .cp-type {
		top: 40px;
	}

	body.mts-page #chassipro-cinema .cp-marquee {
		top: 166px;
		opacity: .5;
	}

	body.mts-page #chassipro-cinema .cp-mq-track {
		animation: none;
		transform: translateX(20px);
	}

	body.mts-page #chassipro-cinema .cp-mq-track span {
		font-size: calc((100vw - 40px) / 7.2);
		-webkit-text-stroke: 1.5px #fff;
	}
}

/* Νέα Β — hero Κιτ χαμηλώματος ≥ 1280: εικόνα με το κάδρο του Golf (attachment mts_hero_image_desktop) και το layout των
   Coilovers (κουτί 62 %, object-position 45 %) → η Mercedes στη θέση και στο μέγεθος του Golf. Κινητό/tablet όπως πριν. */
@media (min-width: 1280px) {
	body.mts-page .c-hero.has-hero-desk {
		--c-hero-w: var(--c-hero-w-d) !important;
		--c-hero-pos: var(--c-hero-pos-d) !important;
	}
}

/* ---------------------------------------------------------------------------
   BRIEF-09 §7.2 — σελίδα ανά μοντέλο: γραμμή-σύνοψη εφαρμογής του μοντέλου πάνω από τον πίνακα κινητήρων
   (πλαίσιο · παραγωγή · χαμήλωμα · εκδόσεις κινητήρα), ίδιο μέγεθος με το σώμα.
   --------------------------------------------------------------------------- */
body.mts-page .p-fit-sum {
	margin: -8px 0 16px;
	font-size: var(--t-body);
	line-height: var(--t-body-lh);
	color: var(--muted);
}

/* ==========================================================================
   BRIEF-09 — ΣΤΟΠ «Σημειώσεις» (06/10/2026): στήλη «Σημείωση» (λίστα οχήματος + πίνακας κινητήρων), φίλτρο «Πίσω άξονας»
   με τη γραμμή για το VIN. Η στήλη/το φίλτρο υπάρχουν μόνο όπου υπάρχει σημείωση / κωδικοί και για τους δύο άξονες.
   ========================================================================== */
@media (min-width: 1024px) {
	html body.mts-page .v-results.has-notes .v-row {
		grid-template-columns: 2.1fr 1.3fr 1.5fr 1.1fr .8fr 1.3fr;
	}
	html body.mts-page .v-results.has-notes.has-loads .v-row {
		grid-template-columns: 2.1fr 1.3fr 1.5fr 1.1fr 1.1fr .8fr 1.2fr;
	}
}
html body.mts-page .v-note-item {
	display: block;
	color: #20292f;
}
html body.mts-page .v-note-item + .v-note-item {
	margin-top: 4px;
}
@media (max-width: 1023px) {
	html body.mts-page .v-row .v-note {
		grid-column: 1 / -1;
	}
	html body.mts-page .v-row .v-note.is-empty {
		display: none;
	}
}
html body.mts-page #p-fit .p-table.has-notes .p-fit-note {
	min-width: 200px;
}
@media (max-width: 767px) {
	html body.mts-page #p-fit .p-table.has-notes .p-fit-note {
		min-width: 0;
	}
}
html body.mts-page .c-filter-vin {
	margin: 12px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--muted);
}
html body.mts-page .c-filter-vin a {
	display: flex;
	align-items: center;
	min-height: 44px;
	color: #1a1a1a;
	font-weight: 500;
	text-decoration: none;
}
html body.mts-page .c-filter-vin a:first-of-type {
	margin-top: 4px;
}
html body.mts-page .c-filter-vin a:hover {
	color: #b8001a;
}

/* ==========================================================================
   BRIEF-09 — σελίδα 404 (06/10/2026): μόνο στοιχεία του site (c-flow-head, button, c-section-head, c-chip).
   Τίτλος ενότητας στο εγκεκριμένο μέγεθος «τίτλος κουτιού» (--t-band-h2: 28 ≥768 / 24 <768) — όχι μεγαλύτερος από το h1.
   ========================================================================== */
html body.mts-page .c-flow-head .e404-home {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	margin-top: 24px;
	font-size: var(--t-btn);
}
html body.mts-page .e404-main .c-section-head h2 {
	font-size: var(--t-band-h2);
	line-height: 1.2;
}


/* ===========================================================================
   BRIEF-KEIMENA (10/10/2026) — σελίδες πληροφοριών, υπαναχώρηση, footer
   Μόνο υπάρχοντα tokens/χρώματα. Το mts-pages.css φορτώνει μετά → «html body.mts-page» για τα .i-content.
   Σύνδεσμοι χωρίς υπογράμμιση (κανόνας του site).
   =========================================================================== */

/* Ενδείξεις [ΣΥΜΠΛΗΡΩΣΗ n: …] — το κίτρινο φόντο ορίζεται ΜΟΝΟ εδώ (§2.7). */
mark.mts-todo {
	padding: 0 .2em;
	background: var(--yellow);
	color: var(--ink);
}

/* Λίστες: ίδιο μέγεθος με το κείμενο. */
html body.mts-page .i-content ul,
html body.mts-page .i-content ol {
	padding-left: 1.4em;
}

html body.mts-page .i-content ul {
	list-style: disc;
}

html body.mts-page .i-content ol {
	list-style: decimal;
}

html body.mts-page .i-content li + li,
html body.mts-page .i-content li > ul,
html body.mts-page .i-content li > ol {
	margin-top: .4em;
}

/* Πίνακες: ύφος του πίνακα προδιαγραφών (.p-table)· στο κινητό κύλιση μέσα στο πλαίσιο, όχι έξω από την οθόνη. */
html body.mts-page .i-content .wp-block-table {
	margin-left: 0;
	margin-right: 0;
	overflow-x: auto;
	background: #fff;
	border: 1px solid #dde1e5;
	border-radius: 12px;
}

html body.mts-page .i-content .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	table-layout: auto;
}

html body.mts-page .i-content .wp-block-table th,
html body.mts-page .i-content .wp-block-table td {
	padding: 12px 16px;
	border: 0;
	border-top: 1px solid #eceef0;
	text-align: left;
	vertical-align: top;
	font-size: var(--t-spec-td);
	line-height: var(--t-spec-td-lh);
	font-weight: var(--t-spec-td-fw);
}

html body.mts-page .i-content .wp-block-table thead th {
	border-top: 0;
	background: #eef1f3;
	color: var(--muted);
	font-size: var(--t-spec-th);
	line-height: var(--t-spec-th-lh);
	font-weight: var(--t-spec-th-fw);
}

html body.mts-page .i-content .wp-block-table thead {
	border-bottom: 0;
}

/* Υπόδειγμα εντύπου υπαναχώρησης (§2.8): πλαίσιο. */
html body.mts-page .i-content .mts-form-sample {
	padding: 24px;
	background: #fff;
	border: 1px solid #dde1e5;
	border-radius: 12px;
	overflow-wrap: anywhere;
}

html body.mts-page .i-content .mts-form-sample > * + * {
	margin-top: 1em;
}

/* Χάρτης (§3). */
html body.mts-page .i-content .mts-map {
	display: block;
	width: 100%;
	height: 420px;
	border: 0;
	border-radius: 12px;
	background: #eef1f3;
}

@media (max-width: 767px) {
	html body.mts-page .i-content .mts-map {
		height: 320px;
	}

	html body.mts-page .i-content .mts-form-sample {
		padding: 16px;
	}
}

/* Φόρμα υπαναχώρησης (plugin mts-withdrawal, §4): πεδία όπως η αναζήτηση κωδικού, κουμπί .btn.primary. */
html body.mts-page .mts-wd > * + * {
	margin-top: 24px;
}

html body.mts-page .mts-wd-form {
	display: grid;
	gap: 16px;
	max-width: 520px;
}

html body.mts-page .mts-wd-form label {
	display: block;
	margin-bottom: 6px;
	font-size: var(--t-form-label);
	line-height: var(--t-form-label-lh);
	font-weight: var(--t-form-label-fw);
}

html body.mts-page .mts-wd-form input[type="text"],
html body.mts-page .mts-wd-form input[type="email"] {
	width: 100%;
	min-height: 48px;
	padding: 10px 16px;
	border: 1px solid var(--input);
	border-radius: 8px;
	background: var(--white);
	color: var(--ink);
	font-size: 16px;
	line-height: 22px;
}

html body.mts-page .mts-wd-form .btn {
	justify-self: start;
}

html body.mts-page .mts-wd-hp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

html body.mts-page .mts-wd-summary {
	max-width: 520px;
	padding: 16px 24px;
	background: #fff;
	border: 1px solid #dde1e5;
	border-radius: 12px;
}

html body.mts-page .mts-wd-summary dt {
	color: var(--muted);
}

html body.mts-page .mts-wd-summary dd {
	margin: 0 0 .6em;
	font-weight: 700;
	overflow-wrap: anywhere;
}

html body.mts-page .mts-wd-error {
	padding: 12px 16px;
	border-radius: 8px;
	background: var(--amber-bg);
	color: var(--amber);
}

/* Footer: «Πατήστε εδώ για υπαναχώρηση» — δική του γραμμή, έντονα, μέγεθος των συνδέσμων του footer. */
body.mts-page .footer .footer-withdrawal {
	margin: 32px 0 0;
	text-align: center;
}

body.mts-page .footer .footer-withdrawal a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin: 0;
	font-size: var(--t-footer-link);
	line-height: var(--t-footer-link-lh);
	font-weight: 700;
	text-decoration: none;
}

body.mts-page .footer .footer-withdrawal + .footer-bottom {
	margin-top: 16px;
}

/* ===== BRIEF-10 §3 (13/10/2026): Complianz ===== */
/* Το <style>.cmplz-hidden{…}</style> του Complianz (wp_head) το κόβει το mts_head_buffer_end() στις σελίδες MTS → εδώ. */
.cmplz-hidden{display:none!important}
/* §3.6 «Ρυθμίσεις cookies» στη στήλη «Χρήσιμα»: <button class="cmplz-manage-consent"> (το Complianz δέχεται μόνο button) — όπως οι σύνδεσμοι */
footer button.footer-cookie-settings{-webkit-appearance:none;appearance:none;display:block;width:auto;margin:0 0 12px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:inherit;font:inherit;font-size:inherit;line-height:inherit;letter-spacing:inherit;text-align:left;text-transform:none;cursor:pointer}
footer button.footer-cookie-settings:hover{color:var(--yellow)}
footer button.footer-cookie-settings:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
/* §3.5 χάρτης «Επικοινωνία»: placeholder του Complianz. Το cookieblocker.css του Complianz ΔΕΝ φορτώνει στις σελίδες MTS (απόφαση
   12/09: κανένα stylesheet τρίτου — mts_filter_styles) → οι κανόνες που χρειάζονται εδώ. Ύψος = ύψος του χάρτη (όχι της εικόνας). */
.cmplz-blocked-content-notice{display:none}
.cmplz-blocked-content-container{position:relative;display:flex;justify-content:center;align-items:center;background-repeat:no-repeat!important;background-size:cover!important;background-position:center!important;border-radius:var(--box-radius,12px);overflow:hidden}
.cmplz-blocked-content-container:has(>iframe.mts-map){height:auto!important}
.cmplz-blocked-content-container iframe{visibility:hidden}
.cmplz-optin .cmplz-blocked-content-container .cmplz-blocked-content-notice{display:block}
.cmplz-blocked-content-container .cmplz-blocked-content-notice{position:absolute!important;top:50%;left:50%;z-index:98;transform:translate(-50%,-50%);width:calc(100% - 32px);max-width:460px;margin:0;padding:14px 18px;border:1px solid #1a1a1a;border-radius:6px;background:#fff;color:#1a1a1a;font:500 15px/1.45 Roboto,Arial,sans-serif;text-align:center;text-transform:none;white-space:normal;cursor:pointer;box-shadow:0 4px 14px rgba(26,26,26,.16)}
.cmplz-blocked-content-container .cmplz-blocked-content-notice:hover{background:#1a1a1a;color:#fff}
.cmplz-blocked-content-container .cmplz-blocked-content-notice:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
/* banner: γραμματοσειρά του site */
.cmplz-cookiebanner{font-family:Roboto,Arial,sans-serif}

/* ===========================================================================
   BRIEF-11 §3 (14/10/2026) — tooltips εικονιδίων χαρακτηριστικών (ΜΟΝΟ η λωρίδα .p-icons δίπλα στην αγορά).
   Κείμενα: inc/mts-icon-tips.php · θέση/άνοιγμα: assets/js/mts-icon-tips.js. Τιμές από το υπάρχον site:
   - κουτί: --box-radius / --box-shadow (= το κίτρινο .selector, «ΠΡΟΤΥΠΟ ΚΟΥΤΙΟΥ»), λευκό, κείμενο --ink, τίτλος έντονος·
   - γραμματοσειρά = το μικρό κείμενο σώματος δίπλα στα εικονίδια (.p-desc-features, --t-card-text: 13px/19,5 στα 1920 · 12px/18 στα 390)·
   - πλάτος / padding = το λευκό αναδυόμενο κουτί .toast του mts.css (420 · 20px 24px· κινητό calc(100% - 36px) · 16px)·
   - fade .14s (= μεταβάσεις κουμπιών/συνδέσμων του mts.css, απόφαση Δ)· focus = το :focus-visible του mts.css.
   Το εικονίδιο (48×48, θέση) δεν αλλάζει· το wrapper είναι block στο ίδιο μέγεθος. Χωρίς βελάκι, υπογράμμιση, διακόσμηση.
   =========================================================================== */
body.mts-page .p-icon-tip-btn {
	display: block;
	cursor: default;
}

body.mts-page .p-icon-tip-btn:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px white;
}

body.mts-page .p-tip {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 49; /* κάτω από τον header (50) και το συρτάρι, πάνω από τη σελίδα */
	box-sizing: border-box;
	width: max-content;
	max-width: min(420px, calc(100% - 32px));
	padding: 20px 24px;
	background: #fff;
	color: var(--ink);
	border-radius: var(--box-radius);
	box-shadow: var(--box-shadow);
	font-size: var(--t-card-text);
	line-height: var(--t-card-text-lh);
	font-weight: 400;
	text-align: left;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity .14s, visibility .14s;
}

body.mts-page .p-tip.is-open {
	opacity: 1;
	visibility: visible;
}

body.mts-page .p-tip strong {
	display: block;
	font-weight: 700;
}

body.mts-page .p-tip span {
	display: block;
}

@media (max-width: 767px) {
	body.mts-page .p-tip {
		max-width: calc(100% - 36px);
		padding: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.mts-page .p-tip {
		transition: none;
	}
}

/* ==========================================================================
   BRIEF-12 §2.6 / §2.13 (18/10/2026) — social (inc/mts-social.php).
   Footer, στήλη «Επικοινωνία», κάτω από το email: μόνο εικονίδια, λευκά, hover = κίτρινο όπως κάθε link
   του footer (mts.css .footer a:hover), χωρίς underline. Μέγεθος εικονιδίου = ύψος γραμμής των στοιχείων
   επικοινωνίας = --t-footer-link × --t-footer-link-lh (16 × 1.6 = 25,6 px). Απόσταση = το κάθετο διάστημα
   των links της στήλης (9 px· 12 px ≥ 1280, §4.5). < 1280 κάθε link του footer έχει ήδη στόχο αφής 44 px
   (§4.10) → τετράγωνο 44 × 44 χωρίς επιπλέον κενό. Μενού κινητού: ίδιο στυλ με τηλέφωνο/email (.mts-drawer-extra).
   ========================================================================== */
body.mts-page .footer-social {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 9px;
}

body.mts-page .footer-grid .footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-decoration: none;
}

body.mts-page .footer-grid .footer-social a:hover,
body.mts-page .footer-grid .footer-social a:focus-visible {
	color: var(--yellow);
}

body.mts-page .footer-social svg {
	display: block;
	width: calc(var(--t-footer-link) * var(--t-footer-link-lh));
	height: calc(var(--t-footer-link) * var(--t-footer-link-lh));
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

body.mts-page .mts-drawer-social svg {
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (min-width: 1280px) {
	body.mts-page .footer-social {
		gap: 12px;
	}
}

@media (max-width: 1279px) {
	body.mts-page .footer-social {
		gap: 0;
	}

	body.mts-page .footer-grid .footer-social a {
		min-width: 44px;
	}
}

@media (max-width: 767px) {
	body.mts-page .footer-social {
		justify-content: center;
	}

	body.mts-page .footer-grid .footer-social a {
		padding: 0;
	}
}

/* ==========================================================================
   BRIEF-12 §2.11 (18/10/2026) — 404: πάνω μπλοκ σε ΛΕΥΚΟ φόντο, κείμενο #1a1a1a, κουμπί κόκκινο ως έχει,
   κίτρινη γραμμή από κάτω ως έχει (mts-pages.css .c-flow-head border-bottom). Διαδρομή: ίδια θέση/σήμανση, με το χρώμα
   των φωτεινών hero του site (.c-hero.is-light .c-crumb #33383c), γιατί το #a9b0b6 δεν διαβάζεται σε λευκό.
   ≥ 1024: δύο στήλες — κείμενο αριστερά, γραφικό δεξιά = 55 % του container (wrap), ύψος από το 3:1 του SVG.
   < 1024: διαδρομή, μετά το γραφικό (mobile SVG 4:5, πλήρες πλάτος container), μετά h1 / κείμενο / κουμπί.
   Η mts-pages.css φορτώνει μετά → html body.mts-page …
   ========================================================================== */
html body.mts-page .e404-page .c-flow-head {
	background: #fff;
	color: #1a1a1a;
}

html body.mts-page .e404-page .c-flow-head .c-crumb {
	color: #33383c;
}

html body.mts-page .e404-page .c-flow-head h1,
html body.mts-page .e404-page .c-flow-head .c-flow-intro {
	color: #1a1a1a;
}

html body.mts-page .e404-page .e404-art img {
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 1024px) {
	html body.mts-page .e404-page .c-flow-head .wrap {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 55%;
		column-gap: 40px;
		align-items: start;
	}

	html body.mts-page .e404-page .c-flow-head .wrap > * {
		grid-column: 1;
	}

	html body.mts-page .e404-page .c-flow-head .e404-home {
		justify-self: start;
	}

	html body.mts-page .e404-page .c-flow-head .wrap > .e404-art {
		grid-column: 2;
		grid-row: 1 / span 4;
		align-self: center;
	}
}

@media (max-width: 1023px) {
	html body.mts-page .e404-page .c-flow-head .wrap {
		display: flex;
		flex-direction: column;
	}

	html body.mts-page .e404-page .c-flow-head .wrap > * {
		order: 2;
	}

	html body.mts-page .e404-page .c-flow-head .c-crumb {
		order: 0;
	}

	html body.mts-page .e404-page .c-flow-head .wrap > .e404-art {
		order: 1;
		margin-top: 20px;
	}

	html body.mts-page .e404-page .c-flow-head .e404-home {
		align-self: flex-start;
	}
}

/* BRIEF-12 STOP 2 (Δ, 18/10/2026) — 404 στα 768–1023: γραφικό κεντραρισμένο, μέγιστο ύψος 400 px.
   Μέτρηση σε 768 × 1024: το γραφικό ξεκινά στα 397 px και h1 + κείμενο + κουμπί χρειάζονται 209 px κάτω από αυτό
   → όριο 1024 − 397 − 209 = 418 px· 400 px αφήνουν 18 px ως το κάτω άκρο (κουμπί ορατό χωρίς scroll).
   < 768 μένει πλήρες πλάτος. */
@media (min-width: 768px) and (max-width: 1023px) {
	html body.mts-page .e404-page .c-flow-head .wrap > .e404-art {
		align-self: center;
	}

	html body.mts-page .e404-page .e404-art img {
		width: auto;
		max-width: 100%;
		height: auto;
		max-height: 400px;
	}
}