/* Premium Equipment Showcase (JustNew) */
.hpe-wrap {
	--hpe-accent: #229F05; --hpe-navy: #0D2E5C; --hpe-gap: 60px; --hpe-ratio: 1 / 1; --hpe-fit: contain;
	--hpe-stage-bg: #EDF2F7; --hpe-cut: 30px; --hpe-listmax: 460px; --hpe-active: rgba(34,159,5,.07); --hpe-cols: 3;
	width: 100%; box-sizing: border-box;
}
.hpe-wrap *, .hpe-wrap *::before, .hpe-wrap *::after { box-sizing: border-box; }
.hpe-wrap button { font: inherit; }

.hpe-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--hpe-gap); align-items: center; }
.hpe-right .hpe-stage { order: 2; }
.hpe-layout-grid .hpe-main { grid-template-columns: minmax(0, 1fr); gap: 36px; }
.hpe-side { min-width: 0; }

/* ---------- heading ---------- */
.hpe-eyebrow { display: block; margin: 0 0 10px; font-size: 14px; font-style: italic; font-weight: 600; color: var(--hpe-accent); }
.hpe-heading { margin: 0 0 14px; font-size: 32px; line-height: 1.2; font-weight: 700; color: var(--hpe-navy); }
.hpe-intro { margin: 0 0 22px; font-size: 15px; line-height: 1.7; color: #4b5a70; }

/* ---------- filters ---------- */
.hpe-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.hpe-chip {
	appearance: none; cursor: pointer; padding: 7px 16px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .04em;
	background: #fff; color: var(--hpe-navy); border: 1px solid rgba(13,46,92,.18); transition: background .25s, color .25s, border-color .25s;
}
.hpe-chip:hover { border-color: var(--hpe-accent); color: var(--hpe-accent); }
.hpe-chip.is-on { background: var(--hpe-navy); border-color: var(--hpe-navy); color: #fff; }

/* ---------- list ---------- */
.hpe-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(13,46,92,.12); }
.hpe-layout-showcase .hpe-list {
	max-height: var(--hpe-listmax); overflow-y: auto; overscroll-behavior: contain;
	scrollbar-width: thin; scrollbar-color: var(--hpe-accent) transparent;
}
.hpe-layout-showcase .hpe-list::-webkit-scrollbar { width: 6px; }
.hpe-layout-showcase .hpe-list::-webkit-scrollbar-thumb { background: var(--hpe-accent); border-radius: 6px; }
.hpe-item { margin: 0; border-bottom: 1px solid rgba(13,46,92,.12); }
.hpe-item[hidden] { display: none; }
.hpe-btn {
	appearance: none; width: 100%; display: block; text-align: left; cursor: pointer; padding: 16px 16px 16px 18px;
	background: transparent; border: 0; border-left: 3px solid transparent; color: inherit;
	transition: background .3s ease, border-color .3s ease;
}
.hpe-info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 18px; align-items: baseline; }
.hpe-stacked .hpe-info { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.hpe-name { font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--hpe-navy); transition: color .3s ease; }
.hpe-desc { font-size: 13px; line-height: 1.5; color: #5b6b82; text-align: right; }
.hpe-stacked .hpe-desc { text-align: left; }
.hpe-layout-showcase .hpe-btn:hover { background: var(--hpe-active); }
.hpe-layout-showcase .hpe-item.is-active .hpe-btn { background: var(--hpe-active); border-left-color: var(--hpe-accent); }
.hpe-layout-showcase .hpe-item.is-active .hpe-name { color: var(--hpe-accent); }
.hpe-btn:focus-visible, .hpe-chip:focus-visible, .hpe-nav button:focus-visible { outline: 2px solid var(--hpe-accent); outline-offset: 2px; }

/* thumbnails: hidden in the showcase on desktop, used in cards */
.hpe-thumb { display: none; position: relative; aspect-ratio: 4 / 3; background: var(--hpe-stage-bg); overflow: hidden; align-items: center; justify-content: center; }
.hpe-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: var(--hpe-fit); padding: 10px; max-width: none; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.hpe-ph { width: 38%; max-width: 90px; color: rgba(13,46,92,.35); }
.hpe-tag { position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: 999px; background: var(--hpe-accent); color: #fff; font-size: 10px; font-weight: 700; font-style: normal; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- stage ---------- */
.hpe-stage { position: relative; filter: drop-shadow(0 18px 26px rgba(13,46,92,.22)); }
.hpe-stage-frame {
	position: relative; aspect-ratio: var(--hpe-ratio); overflow: hidden; background: var(--hpe-stage-bg);
	clip-path: polygon(0 0, calc(100% - var(--hpe-cut)) 0, 100% var(--hpe-cut), 100% 100%, var(--hpe-cut) 100%, 0 calc(100% - var(--hpe-cut)));
}
.hpe-slides { position: absolute; inset: 0 0 52px 0; }
.hpe-slide { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.97); transition: opacity .5s ease, transform .7s cubic-bezier(.2,.7,.2,1); pointer-events: none; }
.hpe-slide.is-active { opacity: 1; transform: none; pointer-events: auto; }
.hpe-slide img { width: 100%; height: 100%; object-fit: var(--hpe-fit); padding: 28px; display: block; max-width: none; }
.hpe-slide .hpe-ph { width: 30%; max-width: 160px; }
.hpe-stage-bar {
	position: absolute; left: 0; right: 0; bottom: 0; height: 52px; padding: 0 calc(var(--hpe-cut) * .9) 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
	background: var(--hpe-navy); color: #fff; border-bottom: 3px solid var(--hpe-accent);
}
.hpe-stage-name { font-size: 13px; font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hpe-nav { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.hpe-count { font-size: 12px; letter-spacing: .06em; opacity: .85; margin-right: 4px; }
.hpe-count b { color: #5AD636; font-weight: 700; }
.hpe-nav button {
	appearance: none; cursor: pointer; width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.35);
	background: transparent; color: #fff; display: inline-flex; align-items: center; justify-content: center; transition: background .25s, border-color .25s;
}
.hpe-nav button:hover { background: var(--hpe-accent); border-color: var(--hpe-accent); }
.hpe-nav svg { width: 14px; height: 14px; }

/* ---------- grid layout (and phones): cards ---------- */
.hpe-layout-grid .hpe-stage { display: none; }
.hpe-layout-grid .hpe-list { display: grid; grid-template-columns: repeat(var(--hpe-cols), minmax(0, 1fr)); gap: 22px; border-top: 0; }
.hpe-layout-grid .hpe-item, .hpe-cards-mode .hpe-item { border: 1px solid rgba(13,46,92,.1); border-radius: 10px; overflow: hidden; background: #fff; transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .3s; }
.hpe-layout-grid .hpe-item:hover { transform: translateY(-5px); border-color: var(--hpe-accent); box-shadow: 0 18px 32px -18px rgba(13,46,92,.4); }
.hpe-layout-grid .hpe-item:hover .hpe-thumb img { transform: scale(1.05); }
.hpe-layout-grid .hpe-btn { padding: 0; border-left: 0; cursor: default; }
.hpe-layout-grid .hpe-thumb { display: flex; }
.hpe-layout-grid .hpe-info { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 16px 18px 20px; }
.hpe-layout-grid .hpe-desc { text-align: left; }
.hpe-layout-grid .hpe-name { font-size: 15px; }

/* ---------- tablet ---------- */
@media (min-width: 768px) and (max-width: 1024px) {
	.hpe-main { gap: 36px; }
	.hpe-heading { font-size: 26px; }
	.hpe-layout-showcase .hpe-info { grid-template-columns: minmax(0, 1fr); gap: 4px; }
	.hpe-layout-showcase .hpe-desc { text-align: left; }
}
/* ---------- phone: showcase becomes cards ---------- */
@media (max-width: 767px) {
	.hpe-main { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.hpe-heading { font-size: 25px; }
	.hpe-layout-showcase .hpe-stage { display: none; }
	.hpe-layout-showcase .hpe-list { max-height: none; overflow: visible; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; border-top: 0; }
	.hpe-layout-showcase .hpe-item { border: 1px solid rgba(13,46,92,.1); border-radius: 10px; overflow: hidden; background: #fff; }
	.hpe-layout-showcase .hpe-btn { padding: 0; border-left: 0; cursor: default; }
	.hpe-layout-showcase .hpe-btn:hover, .hpe-layout-showcase .hpe-item.is-active .hpe-btn { background: transparent; }
	.hpe-layout-showcase .hpe-item.is-active .hpe-name { color: var(--hpe-navy); }
	.hpe-layout-showcase .hpe-thumb { display: flex; }
	.hpe-layout-showcase .hpe-info { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 14px 16px 18px; }
	.hpe-layout-showcase .hpe-desc { text-align: left; }
	.hpe-layout-grid .hpe-list { grid-template-columns: repeat(var(--hpe-cols), minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
	.hpe-slide, .hpe-thumb img, .hpe-item { transition: none !important; }
}

/* ---------- protect the buttons from theme button styles (pink hover, nowrap, borders...) ---------- */
.hpe-wrap button.hpe-chip, .hpe-wrap button.hpe-btn, .hpe-wrap .hpe-nav button {
	box-shadow: none; text-shadow: none; text-transform: none; white-space: normal; letter-spacing: normal;
	-webkit-appearance: none; appearance: none; min-width: 0; height: auto;
}
.hpe-wrap button.hpe-chip { background-color: #fff; color: var(--hpe-navy); border: 1px solid rgba(13,46,92,.18); border-radius: 999px; padding: 7px 16px; font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: .04em; white-space: nowrap; }
.hpe-wrap button.hpe-chip:hover, .hpe-wrap button.hpe-chip:focus, .hpe-wrap button.hpe-chip:active { background-color: #fff; color: var(--hpe-accent); border-color: var(--hpe-accent); }
.hpe-wrap button.hpe-chip.is-on, .hpe-wrap button.hpe-chip.is-on:hover, .hpe-wrap button.hpe-chip.is-on:focus, .hpe-wrap button.hpe-chip.is-on:active { background-color: var(--hpe-navy); color: #fff; border-color: var(--hpe-navy); }
.hpe-wrap button.hpe-chip:focus-visible { outline: 2px solid var(--hpe-accent); outline-offset: 2px; }

.hpe-wrap button.hpe-btn { background-color: transparent; color: inherit; border-radius: 0; font-weight: inherit; font-size: inherit; line-height: inherit; text-align: left; border-top: 0; border-right: 0; border-bottom: 0; border-left: 3px solid transparent; }
.hpe-wrap button.hpe-btn:focus, .hpe-wrap button.hpe-btn:active { color: inherit; background-color: transparent; }
.hpe-layout-showcase button.hpe-btn:hover, .hpe-layout-showcase .hpe-item.is-active button.hpe-btn, .hpe-layout-showcase .hpe-item.is-active button.hpe-btn:focus { background-color: var(--hpe-active); color: inherit; }
.hpe-layout-showcase .hpe-item.is-active button.hpe-btn { border-left-color: var(--hpe-accent); }
.hpe-layout-grid button.hpe-btn, .hpe-layout-grid button.hpe-btn:hover, .hpe-layout-grid button.hpe-btn:focus { background-color: transparent; border-left: 0; }

.hpe-wrap .hpe-nav button { background-color: transparent; color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; width: 30px; height: 30px; padding: 0; }
.hpe-wrap .hpe-nav button:hover, .hpe-wrap .hpe-nav button:focus { background-color: var(--hpe-accent); border-color: var(--hpe-accent); color: #fff; }

.hpe-wrap .hpe-info, .hpe-wrap .hpe-name, .hpe-wrap .hpe-desc { white-space: normal; overflow-wrap: anywhere; }
.hpe-wrap .hpe-info { column-gap: 22px; }

@media (max-width: 767px) {
	.hpe-layout-showcase button.hpe-btn, .hpe-layout-showcase button.hpe-btn:hover, .hpe-layout-showcase .hpe-item.is-active button.hpe-btn { background-color: transparent; border-left: 0; }
}