/* Texnikalar səhifəsi: yığcam başlıq, kateqoriya düymələri (aşağıda nazik keçid sətri), hər texnika geniş kart (foto solda, göstəricilər sağda).
   Kart məntiqi ana səhifə ilə eynidir (src/Site/MachineCard.php): iri rəqəm + sarı xətt. */
.cx { --cx-w: min(1280px, calc(100% - 64px)); --cx-top: 119px; padding-bottom: 96px; color: var(--sm-ink, #1D1F1E); font-family: "Plus Jakarta Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
html:has(.cx) { scroll-padding-top: calc(119px + 72px); }
.cx-head, .cx-cat { width: var(--cx-w); margin-inline: auto; }
.cx-head { display: grid; gap: 12px; padding-block: 32px 22px; }
.cx-h1 { margin: 0; font-family: inherit; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.02; font-weight: 800; letter-spacing: -0.04em; color: var(--sm-ink, #1D1F1E); }
.cx-sub { margin: 0; max-width: 62ch; font: 400 16px/1.6 "Poppins", "Segoe UI", sans-serif; color: var(--sm-text, #4B524E); }

/* kateqoriya düymələri: səhifənin başında, yerində qalır (yapışmır) */
.cx-chips { border-bottom: 1px solid var(--sm-line, #E3E5E1); }
.cx-chips-in { width: var(--cx-w); margin-inline: auto; display: flex; flex-wrap: wrap; gap: 8px; padding-block: 12px; }
/* telefonda 16 düymə bir sətirdə yana sürüşür; sağdakı solma davamın olduğunu göstərir */
@media (max-width: 720px) {
  .cx-chips-in { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-right: 32px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
  .cx-chips-in::-webkit-scrollbar { display: none; }
}
.cx-chips a { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border: 1px solid var(--sm-line, #E3E5E1); border-radius: 999px; background: #FFFFFF; font: 500 14px "Poppins", "Segoe UI", sans-serif; color: var(--sm-ink, #1D1F1E); text-decoration: none; white-space: nowrap; transition: border-color .15s, background-color .15s; }
.cx-chips a b { font-size: 12px; font-weight: 600; color: #7A807C; }
.cx-chips a:hover { border-color: #BFC3BD; }
.cx-chips a[aria-current="true"] { background: var(--sm-ink, #1D1F1E); border-color: var(--sm-ink, #1D1F1E); color: #FFFFFF; }
.cx-chips a[aria-current="true"] b { color: var(--sm-sari, #FFC20E); }

.cx-cat { padding-block: 48px 8px; }
.cx-cat.sm-sand { padding-block: 56px 48px; margin-block: 32px; }
.cx-cat.sm-sand .cx-chead { border-bottom-color: #E2DACB; }
.cx-chead { display: flex; align-items: baseline; gap: 12px; padding-bottom: 14px; margin-bottom: 20px; border-bottom: 1px solid var(--sm-line, #E3E5E1); }
.cx-chead h2 { margin: 0; font-family: inherit; font-size: clamp(24px, 2.4vw, 30px); font-weight: 800; letter-spacing: -0.025em; color: var(--sm-ink, #1D1F1E); }
.cx-chead span { font: 500 14px "Poppins", "Segoe UI", sans-serif; color: #7A807C; }
.cx-list { display: grid; gap: 18px; }

/* geniş kart */
.cx-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: #FFFFFF; border: 1px solid var(--sm-line, #E3E5E1); border-radius: 20px; overflow: hidden; box-shadow: 0 1px 2px rgb(60 45 10 / .04); transition: border-color .18s; }
.cx-card:hover { border-color: #BFC3BD; }
.cx-img { position: relative; display: block; min-height: 320px; padding: 0; border: 0; background: radial-gradient(80% 80% at 50% 70%, #FFFFFF, #ECEDE8); cursor: zoom-in; overflow: hidden; }
.cx-img img { position: absolute; inset: 24px; width: calc(100% - 48px); height: calc(100% - 48px); object-fit: contain; filter: drop-shadow(0 16px 14px rgb(30 30 20 / .2)); }
.cx-img img.photo { inset: 0; width: 100%; height: 100%; object-fit: cover; filter: none; }
.cx-info { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 26px 28px 26px; }
.cx-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 14px; border-bottom: 2px solid var(--sm-sari, #FFC20E); }
.cx-id { display: grid; gap: 5px; min-width: 0; }
.cx-kind { font: 500 14px "Poppins", "Segoe UI", sans-serif; color: #7A807C; }
.cx-id h3 { margin: 0; font-family: inherit; font-size: clamp(22px, 2vw, 27px); line-height: 1.2; font-weight: 800; letter-spacing: -0.025em; color: var(--sm-ink, #1D1F1E); }
.cx-name { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.cx-name:hover { text-decoration: underline; text-underline-offset: 4px; }
.cx-big { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 3px; margin: 0; text-align: right; color: var(--sm-ink, #1D1F1E); }
.cx-big b { font-size: 46px; font-weight: 800; line-height: .95; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.cx-big span { font-size: 17px; font-weight: 700; }
.cx-big small { grid-column: 1 / -1; justify-self: end; max-width: 14ch; margin-top: 4px; font: 400 12.5px/1.25 "Poppins", "Segoe UI", sans-serif; color: #7A807C; }
.cx-rows { display: grid; margin: 0; }
.cx-rows div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--sm-line, #E3E5E1); font: 400 15px "Poppins", "Segoe UI", sans-serif; }
.cx-rows div:last-child { border-bottom: 0; }
.cx-rows dt { color: var(--sm-text, #4B524E); }
.cx-rows dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; color: var(--sm-ink, #1D1F1E); }
.cx-act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 6px; }
.cx-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border: 1px solid transparent; border-radius: 10px; font: 600 15px "Poppins", "Segoe UI", sans-serif; color: var(--sm-ink, #1D1F1E); cursor: pointer; white-space: nowrap; transition: background-color .15s, border-color .15s; }
.cx-rent { background: var(--sm-sari, #FFC20E); }
.cx-rent:hover { background: #F2B300; }
.cx-more { background: #FFFFFF; border-color: #D4D7D1; }
.cx-more:hover { border-color: var(--sm-ink, #1D1F1E); }
.cx :focus-visible { outline: 2px solid var(--sm-ink, #1D1F1E); outline-offset: 2px; }

@media (max-width: 900px) {
  .cx { --cx-w: calc(100% - 40px); }
  .cx-card { grid-template-columns: 1fr; }
  .cx-img { min-height: 0; aspect-ratio: 4 / 3; }
  .cx-info { padding: 20px 20px 22px; }
}
@media (max-width: 520px) {
  .cx-head { padding-block: 36px 20px; }
  .cx-big b { font-size: 38px; }
  .cx-act { display: grid; grid-template-columns: 1fr auto; }
  .cx-btn { padding: 0 16px; }
}
@media (prefers-reduced-motion: reduce) { .cx-card, .cx-chips a, .cx-btn { transition: none; } }

/* Keçid sətri: kateqoriya düymələri ekrandan çıxanda header-in altından nazik sətir çıxır.
   Hazırkı kateqoriyanın adını göstərir, basanda bütün kateqoriyaların siyahısı açılır. */
.cx-jump { position: fixed; top: var(--cx-top); left: 0; right: 0; z-index: 25; background: rgb(255 255 255 / .97); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--sm-line, #E3E5E1); transform: translateY(-100%); opacity: 0; visibility: hidden; transition: transform .22s ease, opacity .22s ease, visibility 0s .22s; }
.cx-jump.is-on { transform: none; opacity: 1; visibility: visible; transition: transform .22s ease, opacity .22s ease; }
.cx-jump-in { position: relative; width: var(--cx-w); margin-inline: auto; display: flex; align-items: center; min-height: 52px; }
.cx-jump-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px 0 0; border: 0; background: none; font: 400 14px "Poppins", "Segoe UI", sans-serif; color: #7A807C; cursor: pointer; }
.cx-jump-btn b { font-weight: 600; color: var(--sm-ink, #1D1F1E); }
.cx-jump-btn svg { width: 16px; height: 16px; fill: none; stroke: var(--sm-ink, #1D1F1E); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s; }
.cx-jump-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.cx-jump-list { position: absolute; top: calc(100% + 6px); left: 0; display: grid; grid-template-columns: repeat(2, minmax(200px, 1fr)); gap: 2px; width: min(520px, 100%); max-height: min(70vh, 520px); overflow-y: auto; padding: 8px; background: #FFFFFF; border: 1px solid var(--sm-line, #E3E5E1); border-radius: 14px; box-shadow: 0 18px 40px rgb(30 30 20 / .12); }
.cx-jump-list[hidden] { display: none; }
.cx-jump-list a { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 8px; font: 500 14px "Poppins", "Segoe UI", sans-serif; color: var(--sm-ink, #1D1F1E); text-decoration: none; }
.cx-jump-list a b { font-weight: 500; font-size: 13px; color: #7A807C; }
.cx-jump-list a:hover { background: #FBFAF6; }
.cx-jump-list a[aria-current="true"] { background: var(--sm-sari-soft, #FFF5D4); font-weight: 600; }
@media (max-width: 520px) { .cx-jump-list { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .cx-jump, .cx-jump.is-on, .cx-jump-btn svg { transition: none; } }


/* Kart: göstəricilər ikonlu sətirlərdə (ana səhifə ilə eyni) */
.cx-rows div { align-items: center; gap: 12px; }
.cx-rows dt { flex: 1; min-width: 0; }
.cx-rows .mc-ic + dd { flex: 1; text-align: left; font-weight: 500; }
.cx .mc-ic { flex: none; width: 19px; height: 19px; fill: none; stroke: #B98500; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Uzun dəyər (mühərrik modeli, ölçülər) adın üstünə çıxmasın: ad solda, dəyər sağda öz sahəsində bir neçə sətrə bölünür */
.sm-mc .sm-mc-top + dl.sm-mc-rows div, .cx .cx-rows div { align-items: flex-start; }
.sm-mc-rows .mc-ic, .cx-rows .mc-ic { margin-top: 1px; }
.sm-mc .sm-mc-rows dt, .cx .cx-rows dt { flex: 1 1 0; min-width: 0; overflow-wrap: break-word; }
.sm-mc .sm-mc-rows dd, .cx .cx-rows dd { flex: 0 1 auto; min-width: 0; max-width: 58%; overflow-wrap: anywhere; line-height: 1.4; }
.sm-mc .sm-mc-rows .mc-ic + dd, .cx .cx-rows .mc-ic + dd { flex: 1 1 0; max-width: none; }


/* Texnika növü səhifəsi: səhifə yolu, başlıq linkləri, digər növlər; kartda WhatsApp düyməsi */
.cx-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 500 13.5px "Poppins", "Segoe UI", sans-serif; color: #9A9F9A; }
.cx-crumbs a { color: var(--sm-text, #4B524E); text-decoration: none; }
.cx-crumbs a:hover { color: var(--sm-ink, #1D1F1E); text-decoration: underline; text-underline-offset: 3px; }
.cx-crumbs [aria-current] { color: var(--sm-ink, #1D1F1E); font-weight: 600; }
.cx-chead h2 a { color: inherit; text-decoration: none; }
.cx-chead h2 a:hover { text-decoration: underline; text-decoration-color: var(--sm-sari, #FFC20E); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.cx-others { padding-top: 56px; }
.cx-other-list { width: auto; padding: 0; }
.cx-other-list a { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 15px; border: 1px solid var(--sm-line, #E3E5E1); border-radius: 999px; background: #FFFFFF; font: 500 14px "Poppins", "Segoe UI", sans-serif; color: var(--sm-ink, #1D1F1E); text-decoration: none; transition: border-color .15s, background-color .15s; }
.cx-other-list a b { font-size: 12px; font-weight: 600; color: #7A807C; }
.cx-other-list a:hover { border-color: var(--sm-ink, #1D1F1E); background: var(--sm-sari-soft, #FFF5D4); }
.cx-act .mc-wa { min-height: 48px; }
@media (max-width: 520px) { .cx-act { grid-template-columns: 1fr auto auto; } }

.mc-wa { flex: none; display: inline-grid; place-items: center; width: 48px; min-height: 48px; border-radius: 10px; background: #25D366; color: #FFFFFF; transition: background-color .15s, transform .15s; }
.mc-wa:hover { background: #1EBE5A; }
.mc-wa:active { transform: scale(.95); }
.mc-wa svg { width: 22px; height: 22px; fill: currentColor; }

/* WhatsApp: düymələrin yanında kiçik dairəvi ikon */
.cx-act .mc-wa { align-self: center; width: 36px; min-height: 36px; height: 36px; border-radius: 50%; }
.cx-act .mc-wa svg { width: 18px; height: 18px; }

/* WhatsApp: "Ətraflı" kimi ağ kvadrat düymə, içində yaşıl loqo */
.cx-act .mc-wa { align-self: stretch; width: 48px; min-height: 48px; height: auto; border: 1px solid #D4D7D1; border-radius: 10px; background: #FFFFFF; color: #25D366; }
.cx-act .mc-wa:hover { border-color: var(--sm-ink, #1D1F1E); background: #FFFFFF; }
.cx-act .mc-wa svg { width: 22px; height: 22px; }
/* köhnə saytdan gələn link (/az/product/<texnika>/ -> #t-<texnika>): kart yapışqan header-in altında qalmasın */
.cx-card { scroll-margin-top: 140px; }