/* ---------- Compact HPL page (template-parts/compact-extras.php) ---------- */

/* six properties */
.cx-props { background: var(--ls-ink, #0a1527); color: #fff; position: relative; overflow: hidden; }
.cx-props::before { content: ""; position: absolute; inset: 0; background: radial-gradient(40% 120% at 100% 0, rgba(237, 41, 38, .25), transparent 70%); pointer-events: none; }
.cx-props__list { list-style: none; margin: 0 auto; padding: 26px 16px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 0; position: relative; }
.cx-props__list li { display: grid; justify-items: center; gap: 10px; padding: 18px 8px; text-align: center; font-size: 14px; position: relative; }
.cx-props__list svg { color: var(--ls-accent); transition: transform .5s cubic-bezier(.3, 1.6, .5, 1), color .3s; }
.cx-props__list li:hover svg { transform: translateY(-5px) scale(1.12); color: #fff; }
.cx-props__list b { font-weight: 700; }
@media (min-width: 760px) {
	.cx-props__list { grid-template-columns: repeat(6, 1fr); padding-block: 34px; }
	.cx-props__list li + li::before { content: ""; position: absolute; inset-inline-start: 0; top: 18%; bottom: 18%; width: 1px; background: rgba(255, 255, 255, .14); }
}

/* brands */
.cx-brands { background: var(--ls-bg-soft, #f4f6f9); }
.cx-brands__grid { margin-top: 36px; display: grid; gap: 22px; }
.cx-brand { display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: center; padding: 18px; border-radius: 22px; background: #fff; box-shadow: 0 1px 0 rgba(10, 21, 39, .06), 0 30px 50px -36px rgba(10, 21, 39, .45); transition: transform .35s, box-shadow .35s; }
.cx-brand:hover { transform: translateY(-6px); box-shadow: 0 1px 0 rgba(10, 21, 39, .06), 0 40px 60px -34px rgba(10, 21, 39, .55); }
.cx-brand__sheet { all: unset; cursor: pointer; position: relative; display: block; aspect-ratio: 3 / 4; perspective: 600px; }
.cx-brand__sheet img { position: relative; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; box-shadow: 0 14px 24px -14px rgba(0, 0, 0, .6); transform: rotateY(-14deg) rotateX(3deg); transition: transform .5s cubic-bezier(.2, .8, .2, 1); z-index: 1; background: #e9edf3; }
.cx-brand__edge { position: absolute; inset: 4px -5px -5px 4px; border-radius: 6px; background: repeating-linear-gradient(90deg, #fff 0 2px, #cfd6e0 2px 3px); box-shadow: 0 8px 14px -8px rgba(0, 0, 0, .5); transform: rotateY(-14deg) rotateX(3deg); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.cx-brand__sheet:hover img, .cx-brand__sheet:hover .cx-brand__edge { transform: rotateY(0) rotateX(0) translateY(-4px); }
.cx-brand__open { position: absolute; z-index: 2; inset-inline: 6px; bottom: 6px; display: inline-flex; justify-content: center; gap: 6px; padding: 6px 4px; border-radius: 99px; font-size: 11px; font-weight: 700; color: #fff; background: rgba(10, 21, 39, .78); opacity: 0; transform: translateY(6px); transition: .3s; }
.cx-brand__sheet:hover .cx-brand__open, .cx-brand__sheet:focus-visible .cx-brand__open { opacity: 1; transform: none; }
.cx-brand__tag { display: inline-block; padding: 3px 12px; border-radius: 99px; font-size: 12px; font-weight: 700; color: var(--ls-accent); background: rgba(237, 41, 38, .1); }
.cx-brand h3 { margin: 8px 0 6px; font: 400 clamp(22px, 2.6vw, 28px)/1.15 var(--ls-font-display); color: var(--ls-ink, #0a1527); display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.cx-brand h3 small { font: 600 14px var(--ls-font-body); color: #5b6677; }
.cx-brand p { margin: 0 0 8px; color: #4a5568; line-height: 1.7; font-size: 14.5px; }
.cx-brand .cx-brand__n { font-size: 13px; color: #6b7686; }
.cx-brand__n b { font-size: 18px; color: var(--ls-ink, #0a1527); }
.cx-brand__btns { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.cx-brand__btns .btn { padding-inline: 16px; min-height: 42px; font-size: 14px; }
@media (min-width: 760px) {
	.cx-brands__grid { grid-template-columns: repeat(3, 1fr); }
	.cx-brand { grid-template-columns: 1fr; text-align: start; padding: 22px; gap: 20px; }
	.cx-brand__sheet { width: 62%; margin-inline: auto; }
}

/* applications: tabs on the side, one big stage, thumbnails under it */
.cx-apps__box { margin-top: 34px; display: grid; gap: 22px; }
.cx-apps__tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.cx-apps__tabs::-webkit-scrollbar { display: none; }
.cx-tab { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .04); color: rgba(255, 255, 255, .8); font: 600 15px var(--ls-font-body); cursor: pointer; text-align: start; transition: background .25s, color .25s, border-color .25s, transform .25s; }
.cx-tab i { font: 400 14px/1 var(--ls-font-display); font-style: normal; color: rgba(255, 255, 255, .45); transition: color .25s; }
.cx-tab:hover { border-color: rgba(255, 255, 255, .5); }
.cx-tab.is-on { background: var(--ls-accent); border-color: var(--ls-accent); color: #fff; box-shadow: 0 16px 28px -16px rgba(237, 41, 38, .9); }
.cx-tab.is-on i { color: rgba(255, 255, 255, .8); }
.cx-apps__view { min-width: 0; }
.cx-panel { display: none; }
.cx-panel.is-on { display: block; animation: cxin .6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes cxin { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.cx-stage { position: relative; aspect-ratio: 4 / 5; border-radius: 24px; overflow: hidden; background: #13213a; box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .1); isolation: isolate; }
.cx-stage__shot { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; z-index: 0; }
.cx-stage__shot.is-on { opacity: 1; z-index: 1; }
.cx-stage__shot img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.04); transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.cx-stage__shot.is-on img { transform: scale(1); }
.cx-stage:hover .cx-stage__shot.is-on img { transform: scale(1.04); }
.cx-stage::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(0deg, rgba(8, 16, 30, .92) 0%, rgba(8, 16, 30, .5) 38%, transparent 62%); }
.cx-stage__copy { position: absolute; z-index: 3; inset-inline: 0; bottom: 0; padding: clamp(18px, 3vw, 34px); max-width: 620px; pointer-events: none; }
.cx-stage__copy .btn { pointer-events: auto; }
.cx-stage__copy h3 { margin: 0 0 8px; font: 400 clamp(24px, 3vw, 36px)/1.15 var(--ls-font-display); color: #fff; }
.cx-stage__copy p { margin: 0 0 16px; color: rgba(255, 255, 255, .85); line-height: 1.8; font-size: 15px; }
.cx-thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; }
.cx-thumbs button { all: unset; cursor: pointer; flex: none; width: 72px; height: 72px; border-radius: 12px; overflow: hidden; opacity: .55; outline: 2px solid transparent; outline-offset: 2px; transition: opacity .25s, outline-color .25s, transform .25s; }
.cx-thumbs button:hover { opacity: .9; transform: translateY(-2px); }
.cx-thumbs button.is-on { opacity: 1; outline-color: var(--ls-accent); }
.cx-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 900px) {
	.cx-apps__box { grid-template-columns: 250px minmax(0, 1fr); gap: 30px; align-items: start; }
	.cx-apps__tabs { flex-direction: column; overflow: visible; }
	.cx-tab { padding: 14px 18px; font-size: 16px; }
	.cx-tab:hover { transform: translateX(-4px); }
	.cx-stage { aspect-ratio: 16 / 10; max-height: 600px; }
}

/* certificates */
.cx-certs__grid { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 16px; }
.cx-certs__grid li { display: grid; gap: 4px; align-content: start; }
.cx-cert { display: block; border-radius: 14px; overflow: hidden; background: #fff; aspect-ratio: 4 / 3; box-shadow: 0 1px 0 rgba(10, 21, 39, .08), 0 24px 40px -30px rgba(10, 21, 39, .5); transition: transform .35s, box-shadow .35s; margin-bottom: 10px; }
.cx-cert:hover { transform: translateY(-6px); box-shadow: 0 1px 0 rgba(10, 21, 39, .08), 0 34px 50px -28px rgba(10, 21, 39, .6); }
.cx-cert img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .6s; }
.cx-cert:hover img { transform: scale(1.05); }
.cx-certs__grid b { color: var(--ls-ink, #0a1527); font-size: 16px; }
.cx-certs__grid span { font-size: 13.5px; color: #5b6677; }
.cx-cert__pdf { justify-self: start; margin-top: 4px; display: inline-flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 700; color: var(--ls-accent); }
@media (min-width: 760px) { .cx-certs__grid { grid-template-columns: repeat(3, 1fr); gap: 28px 24px; } }

/* catalogue viewer */
.cxv { border: 0; padding: 0; width: min(960px, 100vw); max-width: 100vw; height: min(94vh, 960px); max-height: 100vh; border-radius: 22px; background: #0a1527; color: #fff; overflow: hidden; margin: auto; }
.cxv[open] { display: grid; grid-template-rows: auto 1fr auto; animation: cxin .4s ease both; }
.cxv::backdrop { background: rgba(5, 10, 20, .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cxv.is-fallback { position: fixed; inset: 0; z-index: 9999; display: grid; grid-template-rows: auto 1fr auto; }
.cxv__bar { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.cxv__bar b { flex: 1; font-size: 16px; }
.cxv__count { font-size: 14px; opacity: .8; direction: ltr; }
.cxv__count i { font-style: normal; }
.cxv__x { all: unset; cursor: pointer; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .1); }
.cxv__x:hover { background: var(--ls-accent); }
.cxv__stage { position: relative; min-height: 0; overflow: hidden; display: block; padding: 10px 56px; background: #0e1b32; }
.cxv__img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 6px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8); transition: opacity .25s; }
.cxv__img.is-loading { opacity: .25; }
.cxv__nav { all: unset; cursor: pointer; position: absolute; top: 50%; translate: 0 -50%; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .14); transition: background .2s, transform .2s; }
.cxv__nav:hover { background: var(--ls-accent); }
.cxv__nav--prev { inset-inline-start: 8px; }
.cxv__nav--next { inset-inline-end: 8px; }
.cxv__nav--prev svg { transform: scaleX(-1); }
[dir="ltr"] .cxv__nav--prev svg { transform: none; }
[dir="ltr"] .cxv__nav--next svg { transform: scaleX(-1); }
.cxv__thumbs { display: flex; gap: 6px; overflow-x: auto; padding: 10px 14px; border-top: 1px solid rgba(255, 255, 255, .12); scrollbar-width: thin; }
.cxv__thumbs button { all: unset; cursor: pointer; flex: none; width: 46px; height: 64px; border-radius: 4px; overflow: hidden; opacity: .55; outline: 2px solid transparent; transition: opacity .2s, outline-color .2s; }
.cxv__thumbs button.is-on { opacity: 1; outline-color: var(--ls-accent); }
.cxv__thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 600px) { .cxv { border-radius: 0; height: 100dvh; } .cxv__stage { padding: 6px 4px; } .cxv__nav { width: 38px; height: 38px; } }
@media (prefers-reduced-motion: reduce) {
	.cx-panel.is-on, .cxv[open] { animation: none; }
	.cx-stage__shot, .cx-stage__shot img { transition: none; }
	.cx-brand, .cx-brand__sheet img, .cx-brand__edge, .cx-cert, .cx-shot img { transition: none; }
}

/* ---------- «تشريح الكومباكت» (template-parts/compact-anatomy.php): a technical exploded drawing + the layer list ---------- */
.ana { --gap: 62; position: relative; overflow: clip; background: radial-gradient(60% 55% at 28% 42%, rgba(237, 41, 38, .16), transparent 70%), #0a1527; }
.ana::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(80% 70% at 50% 50%, #000, transparent); mask-image: radial-gradient(80% 70% at 50% 50%, #000, transparent); pointer-events: none; }
.ana.is-pressed { --gap: 0; }
.ana > .container { position: relative; }
.ana__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(26px, 4vw, 60px); align-items: center; margin-top: clamp(30px, 4vw, 50px); }
.ana__visual { position: relative; display: grid; place-items: center; min-height: 540px; padding: 22px; border-radius: 30px; border: 1px solid rgba(255, 255, 255, .12); background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .015)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ana__visual::before, .ana__visual::after { content: ""; position: absolute; width: 26px; height: 26px; border: 2px solid var(--ls-accent); }
.ana__visual::before { top: 14px; inset-inline-start: 14px; border-width: 2px 0 0 2px; }
.ana__visual::after { bottom: 14px; inset-inline-end: 14px; border-width: 0 2px 2px 0; }
.ana__svg { width: 100%; max-width: 580px; height: auto; overflow: visible; }
.ana__hint { position: absolute; bottom: 16px; inset-inline-start: 22px; font-size: 12.5px; letter-spacing: .04em; color: rgba(255, 255, 255, .55); }
.ana__p { transform: translateY(calc((var(--c) + var(--i) * var(--gap)) * 1px)); transition: transform 1s cubic-bezier(.22, .8, .24, 1), opacity .5s, filter .5s; }
.ana.has-hot .ana__p:not(.is-hot) { opacity: .26; }
.ana__p.is-hot { filter: drop-shadow(0 0 14px rgba(237, 41, 38, .65)); }
.ana__p.is-hot .ana__top { stroke: var(--ls-accent); stroke-width: 2.2; }
.ana__top { stroke-linejoin: round; transition: stroke .4s; }
.ana__side { stroke: rgba(0, 0, 0, .25); stroke-width: .8; }
.ana__p--overlay .ana__top { fill: url(#ana-glass); stroke: rgba(255, 255, 255, .9); stroke-width: 1.4; }
.ana__p--overlay .ana__side { fill: rgba(255, 255, 255, .3); stroke: rgba(255, 255, 255, .7); }
.ana__p--decor .ana__top { fill: url(#ana-wood); stroke: rgba(255, 255, 255, .35); stroke-width: 1; }
.ana__p--decor .ana__side--l { fill: #8a5b34; }
.ana__p--decor .ana__side--r { fill: #6b4326; }
.ana__p--kraft .ana__top { fill: url(#ana-kraft); stroke: rgba(255, 255, 255, .25); stroke-width: 1; }
.ana__p--kraft .ana__side--l { fill: url(#ana-edge); }
.ana__p--kraft .ana__side--r { fill: url(#ana-edge); filter: brightness(.78); }
.ana__lead { stroke: rgba(255, 255, 255, .5); stroke-width: 1; fill: none; stroke-dasharray: 3 3; }
.ana__dot { fill: #0a1527; stroke: #fff; stroke-width: 1.6; transition: fill .4s, stroke .4s; }
.ana__p.is-hot .ana__dot { fill: var(--ls-accent); stroke: #fff; }
.ana__num { fill: #fff; font: 700 12px/1 sans-serif; }
.ana__tag { transition: opacity .4s; }
.ana.is-pressed .ana__tag { opacity: 0; }
.ana__dim { opacity: 0; transition: opacity .6s .5s; }
.ana.is-pressed .ana__dim { opacity: 1; }
.ana__dim path { stroke: var(--ls-accent); stroke-width: 2; fill: none; stroke-linecap: round; }
.ana__dim text { fill: #fff; font: 700 15px/1 var(--ls-font-body, sans-serif); }
.ana__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ana__it { position: relative; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .035); overflow: hidden; transition: background .3s, border-color .3s; }
.ana__it.is-on { background: rgba(255, 255, 255, .09); border-color: rgba(237, 41, 38, .55); }
.ana__btn { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; width: 100%; padding: 16px 18px; border: 0; background: none; color: #fff; text-align: start; cursor: pointer; font: inherit; }
.ana__n { font: 400 15px/1 "Cal Sans", var(--ls-font-display), sans-serif; color: rgba(255, 255, 255, .45); transition: color .3s; }
.ana__it.is-on .ana__n { color: var(--ls-accent); }
.ana__t { font: 800 18px/1.3 var(--ls-font-display); }
.ana__tagc { font: 600 11.5px/1 "Golos Text", var(--ls-font-body), sans-serif; letter-spacing: .03em; padding: 6px 11px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .72); font-style: normal; white-space: nowrap; }
.ana__it.is-on .ana__tagc { border-color: rgba(237, 41, 38, .6); color: #fff; background: rgba(237, 41, 38, .18); }
.ana__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s ease; }
.ana__more p { overflow: hidden; margin: 0; padding: 0 18px; font-size: 15.5px; line-height: 1.9; color: rgba(255, 255, 255, .78); }
.ana__it.is-on .ana__more { grid-template-rows: 1fr; }
.ana__it.is-on .ana__more p { padding-bottom: 20px; }
.ana__bar { position: absolute; bottom: 0; inset-inline-start: 0; height: 2px; width: 0; background: var(--ls-accent); }
.ana__it.is-run.is-on .ana__bar { animation: ana-run 5.6s linear forwards; }
.ana__it.is-paused .ana__bar { animation-play-state: paused; }
@keyframes ana-run { to { width: 100%; } }
.ana__facts { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ana__facts li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 99px; background: rgba(255, 255, 255, .07); color: #fff; font-weight: 700; font-size: 14px; }
.ana__facts svg { color: #4ade80; }
@media (max-width: 991px) {
	.ana__grid { grid-template-columns: 1fr; }
	.ana__visual { min-height: 400px; }
	.ana__btn { grid-template-columns: auto 1fr; }
	.ana__tagc { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ana__p, .ana__more { transition: none; } .ana__it.is-run.is-on .ana__bar { animation: none; width: 100%; } }

/* catalogue viewer v2: almost the whole screen, a zoom that shows the page at full width */
.cxv { width: min(1400px, 100vw); height: min(100dvh - 12px, 1300px); border-radius: 18px; }
.cxv__bar { padding: 8px 16px; }
.cxv__stage { padding: 6px 60px; overflow: hidden; }
.cxv__img { cursor: zoom-in; }
.cxv__thumbs { padding: 6px 12px; }
.cxv__thumbs button { width: 38px; height: 52px; }
.cxv__z { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 99px; background: rgba(255, 255, 255, .1); font-size: 14px; font-weight: 700; }
.cxv__z:hover { background: var(--ls-accent); }
.cxv.is-zoom .cxv__z { background: var(--ls-accent); }
.cxv.is-zoom .cxv__stage { overflow: auto; display: block; -webkit-overflow-scrolling: touch; }
.cxv.is-zoom .cxv__img { width: 100%; height: auto; max-width: none; object-fit: fill; cursor: zoom-out; }
.cxv.is-zoom .cxv__nav { display: none; }
@media (max-width: 600px) { .cxv { height: 100dvh; border-radius: 0; } .cxv__stage { padding: 4px 2px; } .cxv__z span { display: none; } .cxv__z { padding: 0 11px; } }
.cxv__stage { scrollbar-color: rgba(255, 255, 255, .35) #0e1b32; scrollbar-width: thin; }

/* the brand logo on its catalogue cover */
.cx-brand__logo { position: absolute; z-index: 2; top: 14px; inset-inline: 0; margin-inline: auto; width: max-content; padding: 9px 14px 8px; border-radius: 14px; background: rgba(255, 255, 255, .96); box-shadow: 0 12px 26px -10px rgba(0, 0, 0, .55); }
.cx-brand__logo img { display: block; height: 84px; width: auto; }

/* reports and certificates: small cards in ONE row (six across on desktop, a swipe row below that) */
.cx-certs__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
.cx-certs__grid b { font-size: 14px; line-height: 1.4; }
.cx-certs__grid span { font-size: 12.5px; line-height: 1.5; }
.cx-cert { border-radius: 12px; }
.cx-cert__pdf { font-size: 12px; }
@media (max-width: 1099px) {
	.cx-certs__grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; padding-bottom: 10px; scrollbar-width: thin; }
	.cx-certs__grid li { flex: 0 0 168px; scroll-snap-align: start; }
}