/* ==========================================================
   Seminol – Made in Germany · front-end styles
   Navy + German red, Archivo type. Colors come from Settings.
   ========================================================== */
:root {
  --brand: #0F2438;
  --accent: #D71920;
  --brand-2: color-mix(in srgb, var(--brand) 78%, #4a7fb5);
  --brand-dk: color-mix(in srgb, var(--brand) 82%, #000);
  --accent-dk: color-mix(in srgb, var(--accent) 82%, #000);
  --ink: #101828;
  --muted: #5B6676;
  --line: #E3E8EE;
  --mist: #EEF2F6;
  --paper: #FFFFFF;
  --bg: #F5F7FA;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
  --shadow: 0 1px 3px rgba(16, 24, 40, .06), 0 12px 32px -16px rgba(16, 24, 40, .22);
  --r-sm: 8px; --r: 12px; --r-lg: 18px;
  --f-display: "Archivo", "Arial Narrow", Arial, sans-serif;
  --f-body: "Archivo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --wrap: 1240px;
}
:root[data-theme="dark"] {
  --ink: #E8EDF3; --muted: #9DABBA; --line: #22374D; --mist: #16293D; --paper: #0F1E2E; --bg: #0A1622;
  --shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 14px 34px -16px rgba(0, 0, 0, .7);
}
.lang-ar { --f-display: "Cairo", Tahoma, sans-serif; --f-body: "Cairo", Tahoma, sans-serif; }
.lang-zh { --f-display: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; --f-body: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
@supports (overflow: clip) { html { overflow-x: clip; } }
body { margin: 0; font: 400 1rem/1.65 var(--f-body); color: var(--ink); background: var(--bg); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3 { font-family: var(--f-display); font-stretch: 112%; line-height: 1.1; margin: 0 0 .5em; font-weight: 750; letter-spacing: -.015em; }
.lang-ar h1, .lang-ar h2, .lang-ar h3, .lang-zh h1, .lang-zh h2, .lang-zh h3 { line-height: 1.35; letter-spacing: 0; font-weight: 700; }
h1 { font-size: clamp(2.2rem, 5vw, 3.9rem); }
h2 { font-size: clamp(1.7rem, 3.1vw, 2.5rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 16px; }
@media (min-width: 720px) { .wrap { padding-inline: 28px; } }
.skip { position: absolute; inset-inline-start: 8px; top: 8px; transform: translateY(-200%); background: var(--accent); color: #fff; padding: 8px 14px; z-index: 100; border-radius: var(--r-sm); }
.skip:focus { transform: none; }
.hp, .form .hp, .cta-form .hp { position: absolute !important; width: 1px !important; min-width: 0 !important; height: 1px !important; padding: 0 !important; border: 0 !important; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); opacity: 0; pointer-events: none; }
.ic { width: 20px; height: 20px; flex: none; }
.ic.sm { width: 16px; height: 16px; }
.ic.lg { width: 48px; height: 48px; color: var(--muted); }
.muted { color: var(--muted); }
[hidden] { display: none !important; }
@media (max-width: 719px) { .hide-sm { display: none !important; } }
@media (max-width: 1023px) { .hide-md { display: none !important; } }
.kicker { display: inline-flex; align-items: center; gap: 10px; color: var(--accent); font-weight: 650; font-size: .95rem; margin-bottom: 10px; }
.kicker::before { content: ""; width: 26px; height: 3px; background: var(--accent); border-radius: 2px; }
.caps { text-transform: uppercase; letter-spacing: .02em; }

/* ---------- buttons, chips ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border-radius: var(--r-sm);
  border: 2px solid transparent; font: 650 .98rem/1 var(--f-body); text-decoration: none; transition: background .15s, color .15s, border-color .15s, box-shadow .15s; white-space: nowrap; }
.btn-lg { min-height: 54px; padding: 0 28px; font-size: 1.04rem; }
.btn-sm { min-height: 38px; padding: 0 14px; font-size: .88rem; }
.btn-accent, .btn-amber { background: var(--accent); color: #fff; box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--accent) 80%, transparent); }
.btn-accent:hover, .btn-amber:hover { background: var(--accent-dk); }
.btn-outline { border-color: var(--line); background: var(--paper); color: var(--ink); }
.btn-outline:hover { border-color: var(--brand); color: var(--brand); }
[data-theme="dark"] .btn-outline:hover { border-color: #fff; color: #fff; }
.btn-ghost { border-color: rgba(255, 255, 255, .35); color: #fff; }
.btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.btn-light { background: #fff; color: var(--brand); }
.btn-light:hover { background: var(--mist); }
.btn-wa { background: #1FA855; color: #fff; }
.btn-wa:hover { background: #178A45; }
.link { background: none; border: 0; padding: 0; color: var(--accent); font-weight: 650; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.link:hover { text-decoration: underline; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.chips li { font: 600 .76rem/1 var(--f-body); padding: 6px 9px; border-radius: 6px; background: var(--mist); color: var(--ink); }
.chips .chip-pack { background: color-mix(in srgb, var(--accent) 10%, var(--paper)); color: var(--accent-dk); }
[data-theme="dark"] .chips .chip-pack { color: #fff; }
.chips-dark li { background: rgba(255, 255, 255, .1); color: #fff; }

/* ---------- topbar & header ---------- */
.topbar { background: var(--brand-dk); color: rgba(255, 255, 255, .82); font-size: .86rem; }
.topbar-in { display: flex; justify-content: space-between; align-items: center; min-height: 40px; gap: 12px; }
.tb-info, .tb-right { display: flex; align-items: center; gap: 18px; }
.tb-label { color: rgba(255, 255, 255, .55); }
.tb-info a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.tb-info a:hover { color: #fff; }
.tb-info .ic, .tb-social .ic { width: 15px; height: 15px; }
.tb-langs { display: flex; gap: 2px; }
.tb-langs a { padding: 4px 7px; border-radius: 4px; text-decoration: none; font-weight: 600; font-size: .8rem; letter-spacing: .02em; }
.tb-langs a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.tb-langs a.on { background: var(--accent); color: #fff; }
.tb-social { display: inline-flex; gap: 12px; padding-inline-start: 14px; border-inline-start: 1px solid rgba(255, 255, 255, .15); }
.tb-social a:hover { color: #fff; }

.hdr { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.hdr.scrolled { box-shadow: var(--shadow-sm); }
.hdr-in { display: flex; align-items: center; gap: 18px; min-height: 78px; }
.brand { display: flex; align-items: center; text-decoration: none; flex: none; }
.brand img { max-height: 54px; width: auto; }
.logo-d { display: none; } [data-theme="dark"] .logo-l { display: none; } [data-theme="dark"] .logo-d { display: block; }
.wordmark { display: flex; flex-direction: column; line-height: 1; }
.wordmark b { font: 800 1.8rem/1 "Archivo", sans-serif; font-stretch: 120%; letter-spacing: .06em; color: var(--brand); }
[data-theme="dark"] .wordmark b, .ftr .wordmark b { color: #fff; }
.wordmark small { font-size: .74rem; color: var(--muted); margin-top: 6px; display: flex; align-items: center; gap: 6px; }
.wordmark small::before { content: ""; width: 18px; height: 10px; background: linear-gradient(#000 0 33%, #DD0000 33% 66%, #FFCE00 66%); border-radius: 1px; }

.nav { display: flex; align-items: center; gap: 2px; margin-inline-start: auto; }
.nav > a, .nav .dd > a { padding: 10px 13px; text-decoration: none; font-weight: 600; border-radius: var(--r-sm); display: inline-flex; align-items: center; gap: 4px; color: var(--ink); }
.nav > a:hover, .nav .dd > a:hover { color: var(--accent); }
.nav a.on { color: var(--accent); }
.dd { position: relative; }
.dd-menu { position: absolute; top: calc(100% + 8px); inset-inline-start: 0; min-width: 260px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); padding: 8px; display: none; z-index: 60; }
.dd:hover > .dd-menu, .dd:focus-within > .dd-menu, .dd.open > .dd-menu { display: block; }
.dd-menu a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm); text-decoration: none; font-weight: 500; }
.dd-menu a .ic { color: var(--accent); }
.dd-menu a:hover, .dd-menu a.on { background: var(--mist); }
.dd-menu .dd-all { border-top: 1px solid var(--line); margin-top: 6px; color: var(--accent); font-weight: 650; }
.flag { font-size: 1.1rem; line-height: 1; }

.hdr-tools { display: flex; align-items: center; gap: 4px; }
.hdr-cta { margin-inline-start: 8px; }
.tool { width: 42px; height: 42px; border-radius: var(--r-sm); border: 0; background: transparent; display: inline-grid; place-items: center; position: relative; text-decoration: none; }
.tool:hover { background: var(--mist); }
.i-sun { display: none; } [data-theme="dark"] .i-sun { display: block; } [data-theme="dark"] .i-moon { display: none; }
.cmp-count { position: absolute; top: 3px; inset-inline-end: 2px; background: var(--accent); color: #fff; font-size: .68rem; min-width: 18px; height: 18px; border-radius: 9px; display: grid; place-items: center; }
.burger { display: none; }
.nav-close { display: none; }
.search-bar { border-top: 1px solid var(--line); background: var(--paper); }
.search-in { display: flex; align-items: center; gap: 10px; min-height: 66px; }
.search-in input { flex: 1; border: 0; background: transparent; font: 500 1.15rem var(--f-body); color: var(--ink); padding: 10px 0; }
.search-in input:focus { outline: none; }

@media (max-width: 1100px) {
  .hdr { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--paper); }
  .burger { display: inline-grid; }
  .hdr-cta { display: none; }
  .nav { position: fixed; inset: 0; inset-inline-start: auto; width: min(340px, 88vw); background: var(--paper); flex-direction: column; align-items: stretch;
    padding: 90px 18px 24px; gap: 2px; clip-path: inset(0 0 0 100%); visibility: hidden; transition: clip-path .25s ease, visibility 0s .25s; box-shadow: var(--shadow); overflow-y: auto; z-index: 55; margin: 0; }
  [dir="rtl"] .nav { clip-path: inset(0 100% 0 0); }
  .nav.open { clip-path: inset(0) !important; visibility: visible; transition: clip-path .25s ease; }
  .nav > a, .nav .dd > a { padding: 14px 12px; font-size: 1.05rem; border-bottom: 1px solid var(--line); border-radius: 0; justify-content: space-between; }
  .nav .dd-menu { position: static; display: block; box-shadow: none; border: 0; padding: 4px 0 8px; min-width: 0; background: transparent; }
  .nav .dd-menu a { padding: 9px 12px; font-size: .95rem; color: var(--muted); }
  .nav .dd { display: block; width: 100%; }
  .nav .dd > a { display: flex; }
  .nav .dd > a .ic { display: none; }
  .nav .dd-menu .dd-all { border-top: 0; margin-top: 0; color: var(--accent); }
  .nav { padding-top: 76px; }
  .nav-close { display: grid; position: absolute; top: 14px; inset-inline-end: 14px; }
  .hdr-tools { margin-inline-start: auto; }
  body.nav-open::after { content: ""; position: fixed; inset: 0; background: rgba(5, 15, 28, .5); z-index: 52; }
  .hdr { z-index: 56; }
}

/* ---------- floating, toasts, mobile bar ---------- */
.toast { position: fixed; top: 100px; inset-inline-end: 16px; z-index: 90; display: flex; gap: 10px; align-items: center; padding: 14px 18px; border-radius: var(--r);
  background: var(--paper); border: 1px solid var(--line); border-inline-start: 4px solid #1FA855; box-shadow: var(--shadow); max-width: 380px; animation: toast 5s forwards; }
.toast-err { border-inline-start-color: var(--accent); }
@keyframes toast { 0% { opacity: 0; transform: translateY(-8px); } 6%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; visibility: hidden; } }
.wa-float { position: fixed; bottom: 22px; inset-inline-end: 22px; width: 58px; height: 58px; border-radius: 50%; background: #25D366; color: #fff; display: grid; place-items: center; box-shadow: 0 10px 26px rgba(0, 0, 0, .25); z-index: 40; }
.wa-float .ic { width: 30px; height: 30px; }
.to-top { position: fixed; bottom: 92px; inset-inline-end: 29px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); box-shadow: var(--shadow);
  display: grid; place-items: center; z-index: 40; opacity: 0; pointer-events: none; transition: opacity .2s; }
.to-top.show { opacity: 1; pointer-events: auto; }
.cookie { position: fixed; bottom: 16px; inset-inline-start: 16px; max-width: 420px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow);
  padding: 16px 18px; z-index: 45; display: flex; gap: 14px; align-items: center; }
.cookie p { margin: 0; font-size: .9rem; color: var(--muted); }
.mbar { display: none; }
@media (max-width: 760px) {
  body { padding-bottom: 66px; }
  .mbar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; inset-inline: 0; bottom: 0; z-index: 48; background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px -12px rgba(0, 0, 0, .25); padding-bottom: env(safe-area-inset-bottom); }
  .mbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 62px; text-decoration: none; font-size: .7rem; font-weight: 600; color: var(--muted); }
  .mbar a.on { color: var(--accent); }
  .mbar-wa { color: #1FA855 !important; }
  .wa-float { display: none; }
  .to-top { display: none; }
  .cookie { bottom: 76px; inset-inline-end: 16px; }
}

/* ---------- HERO ---------- */
.hero { position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(70% 90% at 82% 30%, color-mix(in srgb, var(--brand-2) 70%, transparent), transparent 70%), linear-gradient(160deg, var(--brand) 0%, var(--brand-dk) 100%); }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 22px); mask-image: linear-gradient(90deg, transparent, #000 60%); }
.hero-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: var(--hb, .14); filter: grayscale(.35) blur(1px); transform: scale(1.04);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 30%, #000 65%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 30%, #000 65%); }
[dir="rtl"] .hero-bg img { mask-image: linear-gradient(-90deg, transparent 0%, rgba(0,0,0,.35) 30%, #000 65%); -webkit-mask-image: linear-gradient(-90deg, transparent 0%, rgba(0,0,0,.35) 30%, #000 65%); }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--brand-dk) 80%, transparent)); }
.hero-in { position: relative; z-index: 1; display: grid; gap: 30px; padding-block: 56px 30px; align-items: center; }
@media (min-width: 960px) { .hero-in { grid-template-columns: 1.05fr 1fr; padding-block: 84px 40px; } }
.hero-tag { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14);
  padding: 7px 14px; border-radius: 999px; font-size: .9rem; margin-bottom: 20px; }
.de-flag { width: 20px; height: 12px; border-radius: 2px; background: linear-gradient(#000 0 33%, #DD0000 33% 66%, #FFCE00 66%); }
.hero h1 { color: #fff; max-width: 15ch; }
.hero-lead { font-size: 1.15rem; color: rgba(255, 255, 255, .8); max-width: 52ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-cans { position: relative; height: 380px; display: flex; align-items: flex-end; justify-content: center; gap: 0; padding-bottom: 6px; }
.hero-cans .can { position: relative; flex: 0 0 auto; height: 290px; width: auto; max-width: 40%; object-fit: contain; object-position: bottom; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .5)); }
.hero-cans .can-1 { order: 1; z-index: 1; margin-inline-end: -2%; }
.hero-cans .can-0 { order: 2; z-index: 2; height: 360px; max-width: 46%; }
.hero-cans .can-2 { order: 3; z-index: 1; margin-inline-start: -2%; }
.hero-cans::after { content: ""; position: absolute; inset-inline: 8%; bottom: -10px; height: 40px; background: radial-gradient(closest-side, rgba(0, 0, 0, .45), transparent); z-index: 0; }
@media (max-width: 959px) { .hero-cans { height: 260px; } .hero-cans .can { height: 200px; } .hero-cans .can-0 { height: 250px; } }
.grade-strip { position: relative; z-index: 1; border-top: 1px solid rgba(255, 255, 255, .1); background: rgba(0, 0, 0, .18); }
.grade-in { display: flex; align-items: center; gap: 16px; min-height: 70px; flex-wrap: wrap; padding-block: 12px; }
.grade-in > span { font-weight: 600; color: rgba(255, 255, 255, .7); font-size: .92rem; }
.grade-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.grade-chips a { font-weight: 700; font-stretch: 110%; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); text-decoration: none; font-size: .92rem; }
.grade-chips a:hover { background: var(--accent); border-color: var(--accent); }

/* ---------- sections ---------- */
.sec { padding-block: 76px; }
section { scroll-margin-top: 96px; }
.sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 10px 24px; margin-bottom: 30px; }
.sec-head h2 { margin: 0; }
.sec-head p { margin: 8px 0 0; color: var(--muted); max-width: 60ch; }
.sec-head.center { flex-direction: column; align-items: center; text-align: center; }
.sec-head.center h2::after { content: ""; display: block; width: 54px; height: 4px; background: var(--accent); border-radius: 2px; margin: 16px auto 0; }

.banners { position: relative; background: var(--brand-dk); }
.banner { margin: 0; display: none; position: relative; }
.banner.on { display: block; }
.banner img { width: 100%; max-height: 560px; object-fit: cover; }
.banner figcaption { position: absolute; inset: auto 0 34px; color: #fff; }
.banner figcaption span { background: rgba(15, 36, 56, .85); padding: 8px 14px; border-radius: 6px; }
.banner-dots { position: absolute; bottom: 14px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; }
.banner-dots button { width: 30px; height: 5px; border: 0; background: rgba(255, 255, 255, .5); padding: 0; border-radius: 3px; }
.banner-dots button.on { background: var(--accent); }

.welcome { background: var(--paper); }
.welcome-in { display: grid; gap: 40px; }
@media (min-width: 900px) { .welcome-in { grid-template-columns: 1.08fr 1fr; gap: 64px; align-items: center; } }
.wvideo { margin: 0; position: relative; }
.wvideo::before { content: ""; position: absolute; inset: -18px 18px auto -18px; aspect-ratio: 16 / 9; border-radius: var(--r-lg); background: repeating-linear-gradient(115deg, color-mix(in srgb, var(--accent) 22%, transparent) 0 2px, transparent 2px 14px); z-index: 0; }
[dir="rtl"] .wvideo::before { inset: -18px -18px auto 18px; }
.wvideo-frame { position: relative; z-index: 1; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; padding: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--brand-dk); box-shadow: var(--shadow); cursor: pointer; color: #fff; text-decoration: none; }
.wvideo.is-vertical::before { display: none; }
.wvideo.is-vertical .wvideo-frame { aspect-ratio: 9 / 16; max-width: 360px; margin-inline: auto; }
.wvideo-frame video, .wvideo-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
video.wvideo-frame, .wvideo-frame video { object-fit: contain; background: #000; }
.wvideo-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 22, 34, .05) 30%, rgba(10, 22, 34, .7)); }
.wvideo-btn { position: absolute; top: 50%; left: 50%; width: 82px; height: 82px; margin: -41px 0 0 -41px; border-radius: 50%; background: var(--accent); display: grid; place-items: center;
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 25%, transparent), 0 16px 34px -10px rgba(0, 0, 0, .6); transition: transform .2s; }
.wvideo-btn .ic { width: 34px; height: 34px; margin-inline-start: 4px; }
.wvideo-frame:hover .wvideo-btn { transform: scale(1.07); }
.wvideo-label { position: absolute; inset-inline-start: 20px; bottom: 16px; font-weight: 650; font-size: .95rem; }
.wvideo-empty { background: radial-gradient(80% 90% at 50% 40%, var(--brand-2), var(--brand-dk)); }
.wvideo-cans { position: absolute; inset: 12% 8% 6%; display: flex; align-items: flex-end; justify-content: center; gap: 2%; }
.wvideo-cans img { position: static; width: auto; height: 78%; object-fit: contain; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .5)); opacity: .9; }
.wvideo-cans img:nth-child(2) { height: 92%; }
.wvideo figcaption { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; margin-top: 14px; font-weight: 600; color: var(--muted); font-size: .92rem; }
.catalog-cover { position: relative; display: block; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); text-decoration: none; max-width: 380px; margin-inline: auto; width: 100%; background: var(--mist); }
.catalog-cover img { width: 100%; aspect-ratio: 3/4; object-fit: cover; transition: transform .4s ease; }
.catalog-cover:hover img { transform: scale(1.03); }
.cover-ph { display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 3/4; padding: 30px; color: #fff;
  background: linear-gradient(160deg, var(--brand) 0 60%, var(--accent) 60% 62%, var(--brand-dk) 62%); }
.cover-ph b { font: 800 2.4rem/1 "Archivo", sans-serif; font-stretch: 120%; letter-spacing: .06em; }
.cover-ph span { font-weight: 700; font-size: 1.3rem; }
.cover-cta { position: absolute; inset-inline: 14px; bottom: 14px; display: flex; gap: 8px; align-items: center; justify-content: center; background: var(--paper); color: var(--ink);
  border-radius: var(--r-sm); padding: 13px; font-weight: 650; box-shadow: var(--shadow-sm); }
.catalog-cover:hover .cover-cta { background: var(--accent); color: #fff; }
.welcome-copy > p { color: var(--muted); font-size: 1.08rem; max-width: 62ch; }
.skills { list-style: none; margin: 26px 0 30px; padding: 0; display: grid; gap: 18px; max-width: 620px; }
.skill-top { display: flex; justify-content: space-between; font-weight: 650; margin-bottom: 8px; }
.skill-top b { color: var(--accent); }
.skill-bar { height: 8px; background: var(--mist); border-radius: 4px; overflow: hidden; }
.skill-bar i { display: block; height: 100%; width: var(--w); background: linear-gradient(90deg, var(--brand), var(--accent)); border-radius: 4px; transform-origin: left; }
[dir="rtl"] .skill-bar i { transform-origin: right; background: linear-gradient(-90deg, var(--brand), var(--accent)); }
.js .skills:not(.in) .skill-bar i { transform: scaleX(0); }
.skills.in .skill-bar i { transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }

.features { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.feat { display: flex; gap: 16px; padding: 30px 22px; border-inline-end: 1px solid var(--line); }
.feat:last-child { border-inline-end: 0; }
.feat-ic { width: 50px; height: 50px; border-radius: 12px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--accent) 10%, var(--paper)); color: var(--accent); }
.feat-ic .ic { width: 24px; height: 24px; }
.feat h3 { font-size: 1.08rem; margin-bottom: 4px; }
.feat p { margin: 0; color: var(--muted); font-size: .93rem; }
@media (max-width: 1023px) { .feat { border-inline-end: 0; border-bottom: 1px solid var(--line); } }

.grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow .2s, transform .2s, border-color .2s; }
.card:hover { box-shadow: var(--shadow); transform: translateY(-3px); border-color: transparent; }
.card-img { position: relative; display: grid; place-items: center; padding: 26px 22px 16px; background: radial-gradient(circle at 50% 35%, var(--paper), var(--mist)); }
.card-img img { height: 220px; width: auto; object-fit: contain; transition: transform .3s ease; }
.card:hover .card-img img { transform: scale(1.04); }
.grade { position: absolute; top: 14px; inset-inline-start: 14px; font-weight: 750; font-stretch: 110%; font-size: .88rem; padding: 6px 10px; background: var(--brand); color: #fff; border-radius: 6px; }
.card-body { padding: 16px 20px 14px; flex: 1; display: flex; flex-direction: column; }
.card-cat { font-size: .8rem; color: var(--accent); font-weight: 650; margin-bottom: 4px; }
.card-body h3 { font-size: 1.14rem; margin-bottom: 8px; }
.card-body h3 a { text-decoration: none; }
.card-body h3 a:hover { color: var(--accent); }
.card-body p { font-size: .92rem; color: var(--muted); margin-bottom: 14px; }
.clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-5 { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.card-body .chips { margin-top: auto; }
.card-foot { display: grid; gap: 10px; padding: 14px 20px 16px; border-top: 1px solid var(--line); }
.price { font-weight: 700; font-size: .92rem; color: var(--brand); }
[data-theme="dark"] .price { color: #fff; }
.card-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.card-acts .btn { flex: 1; }
.cmp-toggle { display: inline-flex; gap: 6px; align-items: center; font-size: .82rem; color: var(--muted); cursor: pointer; user-select: none; }
.cmp-toggle input { accent-color: var(--accent); width: 15px; height: 15px; }
.card.hide { display: none; }

.cats-sec { background: var(--bg); padding-top: 0; }
.best + .cats-sec { padding-top: 10px; }
.cat-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cat-card { position: relative; display: flex; align-items: center; gap: 16px; padding: 26px; min-height: 150px; border-radius: var(--r-lg); background: var(--brand); color: #fff; text-decoration: none; overflow: hidden; }
.cat-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 120% at 100% 100%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 60%); }
.cat-card > * { position: relative; }
.cat-ic { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .1); flex: none; }
.cat-txt { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.cat-txt b { font-size: 1.15rem; font-stretch: 108%; }
.cat-txt small { color: rgba(255, 255, 255, .7); }
.cat-card img { height: 120px; width: auto; margin-block: -10px; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .4)); transition: transform .3s; }
.cat-card:hover img { transform: translateY(-4px) rotate(-3deg); }

.stats { background: linear-gradient(120deg, var(--brand-dk), var(--brand)); color: #fff; }
.stats-in { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); text-align: center; padding-block: 44px; gap: 20px; }
.stats b { display: block; font: 800 3rem/1 var(--f-display); font-stretch: 115%; color: #fff; }
.stats span { color: rgba(255, 255, 255, .72); font-weight: 500; }
.marquee { background: var(--accent); color: #fff; overflow: hidden; white-space: nowrap; padding: 14px 0; font-weight: 750; font-stretch: 112%; font-size: 1.1rem; }
.marquee-track { display: inline-flex; gap: 48px; animation: marq 40s linear infinite; padding-inline-start: 48px; }
.marquee-track span::after { content: "✦"; margin-inline-start: 48px; opacity: .6; }
[dir="rtl"] .marquee-track { animation-direction: reverse; }
@keyframes marq { to { transform: translateX(-50%); } }

.services { background: var(--paper); }
.tabs { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 28px; justify-content: center; flex-wrap: wrap; }
.tabs button { background: var(--mist); border: 1px solid transparent; padding: 10px 16px; font-weight: 600; color: var(--muted); white-space: nowrap; border-radius: 999px; }
.tabs button small { font-weight: 500; opacity: .7; margin-inline-start: 4px; }
.tabs button:hover { color: var(--ink); }
.tabs button.on { background: var(--brand); color: #fff; }

.gal-row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.gal-row button { border: 0; padding: 0; border-radius: var(--r); overflow: hidden; cursor: zoom-in; background: var(--mist); }
.gal-row img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .3s; }
.gal-row button:hover img { transform: scale(1.05); }

.markets { padding-block: 48px; background: var(--paper); border-block: 1px solid var(--line); }
.markets-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; }
.markets h2 { font-size: 1.5rem; margin: 0; }
.markets ul { list-style: none; display: flex; flex-wrap: wrap; gap: 16px 40px; margin: 0; padding: 0; }
.markets li { display: flex; align-items: center; gap: 12px; font-weight: 650; }
.markets li img { height: 46px; width: auto; }
.flag-big { font-size: 2rem; line-height: 1; }

.dist-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.dist { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.dist-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.dist-body { padding: 22px 22px 8px; flex: 1; }
.dist-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; color: #1F7A45; background: #E7F6EC; padding: 5px 10px; border-radius: 999px; margin-bottom: 12px; }
.dist h3 { font-size: 1.2rem; margin-bottom: 4px; }
.dist-region { color: var(--accent); font-weight: 600; margin-bottom: 12px; }
.dist-line { display: flex; gap: 8px; align-items: flex-start; color: var(--muted); margin: 0 0 8px; font-size: .94rem; }
.dist-line .ic { margin-top: 4px; color: var(--accent); }
.dist-line a { color: var(--ink); text-decoration: none; font-weight: 600; }
.dist-acts { display: flex; gap: 8px; padding: 14px 22px 20px; }
.dist-join { margin-top: 44px; text-align: center; padding: 40px 20px; background: var(--paper); border: 1px dashed var(--line); border-radius: var(--r-lg); }
.dist-join h2 { font-size: 1.5rem; }

.cta { background: var(--accent); color: #fff; padding-block: 60px; position: relative; overflow: hidden; }
.cta::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 24px); }
.cta-in { position: relative; display: grid; gap: 24px; align-items: center; }
@media (min-width: 900px) { .cta-in { grid-template-columns: 1.4fr auto; } }
.cta h2 { color: #fff; margin: 0; }
.cta p { margin: 10px 0 0; color: rgba(255, 255, 255, .88); }
.cta-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.cta .btn-light { color: var(--accent-dk); }

.home-contact { background: var(--paper); }
.contact-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 16px; }
.contact-list li { display: flex; gap: 14px; }
.contact-list .ic { width: 42px; height: 42px; padding: 10px; border-radius: 10px; background: color-mix(in srgb, var(--accent) 10%, var(--paper)); color: var(--accent); }
.contact-list b { display: block; }
.contact-list span, .contact-list a { color: var(--muted); text-decoration: none; }

/* ---------- oil finder ---------- */
.ofind { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: end; }
.of-f { display: grid; gap: 6px; min-width: 0; }
.of-f > span { display: flex; align-items: center; gap: 6px; font-weight: 650; font-size: .88rem; color: var(--muted); }
.of-f select { width: 100%; min-height: 52px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); padding: 0 12px; font: 500 1rem var(--f-body); }
.of-f select:focus { outline: 2px solid var(--accent); border-color: transparent; }
.of-f select:disabled { opacity: .55; }
.of-go { min-height: 52px; padding: 0 26px; }
.of-home { position: relative; z-index: 2; margin-top: -1px; padding: 0 0 10px; background: linear-gradient(180deg, var(--brand-dk) 0 50%, var(--bg) 50%); }
.of-home-in { background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 26px 28px; display: grid; gap: 18px; border-top: 4px solid var(--accent); }
.of-home-copy h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: 4px; }
.of-home-copy p { margin: 0; color: var(--muted); }
.of-home-copy .kicker { margin-bottom: 4px; }
.of-sec { padding-block: 0 70px; }
.of-head { padding-bottom: 116px; }
.of-card { position: relative; z-index: 2; margin-top: -50px; background: var(--paper); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 24px; border-top: 4px solid var(--accent); }
.of-how { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 30px; }
.of-how div { display: flex; gap: 14px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; }
.of-how b { width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 12%, var(--paper)); color: var(--accent); display: grid; place-items: center; font-size: 1.1rem; flex: none; }
.of-result { margin-top: 30px; display: grid; gap: 20px; }
.of-car { display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); }
.of-car-ic { width: 46px; height: 46px; border-radius: 12px; background: var(--brand); color: #fff; display: grid; place-items: center; flex: none; }
.of-car div { flex: 1; display: grid; }
.of-car small { color: var(--muted); }
.of-car b { font-size: 1.15rem; }
.of-car span { color: var(--muted); font-size: .9rem; }
.of-best { position: relative; display: grid; gap: 24px; align-items: center; padding: 28px; border-radius: var(--r-lg); color: #fff; overflow: hidden;
  background: radial-gradient(70% 90% at 20% 40%, color-mix(in srgb, var(--brand-2) 75%, transparent), transparent 70%), linear-gradient(160deg, var(--brand), var(--brand-dk)); }
@media (min-width: 820px) { .of-best { grid-template-columns: 300px 1fr; padding: 34px 40px; } }
.of-badge { position: absolute; top: 16px; inset-inline-end: 16px; display: inline-flex; align-items: center; gap: 6px; background: var(--accent); color: #fff; padding: 7px 12px; border-radius: 999px; font-weight: 700; font-size: .84rem; }
.of-best-img { display: grid; place-items: center; }
.of-best-img img { max-height: 320px; width: auto; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .5)); }
.of-best h2 { color: #fff; margin-bottom: 8px; }
.of-best .muted { color: rgba(255, 255, 255, .78); }
.of-best .chips li { background: rgba(255, 255, 255, .1); color: #fff; }
.of-packs { margin: 14px 0 0; color: rgba(255, 255, 255, .8); }
.of-packs b { color: #fff; }
.of-acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.of-best .btn-outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.of-best .btn-outline:hover { border-color: #fff; color: #fff; }
.of-alt-title { margin: 10px 0 0; }
.of-result .note { display: flex; gap: 8px; align-items: flex-start; }
@media (max-width: 1023px) { .ofind { grid-template-columns: 1fr 1fr; } .of-go { grid-column: 1 / -1; } }

/* ---------- inner pages ---------- */
.page-head { position: relative; overflow: hidden; color: #fff; padding-block: 52px 46px; background: linear-gradient(160deg, var(--brand), var(--brand-dk)); }
.page-head::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 22px); }
.page-head .wrap { position: relative; }
.page-head h1 { color: #fff; font-size: clamp(2rem, 4.2vw, 3rem); margin-bottom: 8px; }
.page-head p { margin: 0; color: rgba(255, 255, 255, .78); max-width: 64ch; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: .86rem; margin-bottom: 14px; color: rgba(255, 255, 255, .6); }
.crumbs a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.pd .crumbs { color: var(--muted); } .pd .crumbs a { color: var(--muted); } .pd .crumbs span:last-child { color: var(--ink); }

.listing { padding-block: 36px 70px; }
.listing-in { display: grid; gap: 28px; }

.listing-in > *, .contact-in > *, .pd-top > *, .welcome-in > *, .page-grid > * { min-width: 0; }
@media (min-width: 960px) { .listing-in { grid-template-columns: 270px 1fr; align-items: start; } .filters { position: sticky; top: 100px; } }
.filters { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; }
.filters h3 { font-size: .95rem; margin: 22px 0 10px; color: var(--muted); font-family: var(--f-body); font-weight: 650; font-stretch: 100%; }
.f-search label { font-weight: 650; font-size: .9rem; display: block; margin-bottom: 6px; }
.search-field { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--paper); border-radius: var(--r-sm); padding: 0 12px; }
.search-field input { flex: 1; border: 0; background: transparent; min-height: 44px; font: inherit; color: var(--ink); }
.search-field input:focus { outline: none; }
.search-field:focus-within { border-color: var(--accent); }
.f-cats { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.f-cats a { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--r-sm); text-decoration: none; font-weight: 500; }
.f-cats a:hover { background: var(--mist); }
.f-cats a.on { background: var(--brand); color: #fff; }
.f-grades { display: flex; flex-wrap: wrap; gap: 6px; }
.f-grades a { font-weight: 700; font-size: .86rem; padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; background: var(--paper); }
.f-grades a.on, .f-grades a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.results-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; color: var(--muted); }
.sort { display: inline-flex; gap: 8px; align-items: center; font-size: .9rem; }
select, .form input, .form textarea { font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); min-height: 44px; padding: 0 12px; }
.pager { display: flex; gap: 6px; justify-content: center; margin-top: 34px; }
.pager a { min-width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--r-sm); text-decoration: none; background: var(--paper); font-weight: 650; }
.pager a.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.empty { text-align: center; padding: 60px 20px; background: var(--paper); border: 1px dashed var(--line); border-radius: var(--r-lg); }
.empty .ic { margin: 0 auto 14px; }
.empty p { color: var(--muted); max-width: 46ch; margin-inline: auto; }
.cover-only { max-width: 260px; margin: 0 auto 18px; border-radius: var(--r); }

.pd { padding-block: 28px 44px; }
.pd-top { display: grid; gap: 34px; margin-top: 10px; }
@media (min-width: 900px) { .pd-top { grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: start; } }
.pd-main { display: grid; place-items: center; width: 100%; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 34px; cursor: zoom-in;
  background: radial-gradient(circle at 50% 40%, var(--paper), var(--mist)); }
.pd-main img { max-height: 480px; width: auto; object-fit: contain; }
.pd-thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; }
.pd-thumbs button { width: 74px; height: 74px; border: 2px solid var(--line); border-radius: var(--r-sm); background: var(--paper); padding: 4px; flex: none; }
.pd-thumbs button.on { border-color: var(--accent); }
.pd-thumbs img { width: 100%; height: 100%; object-fit: contain; }
.finder-grade { display: inline-block; font-weight: 750; font-stretch: 110%; padding: 7px 12px; background: var(--accent); color: #fff; border-radius: 6px; margin-bottom: 14px; }
.pd-info h1 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); margin-bottom: 8px; }
.pd-cat { display: flex; gap: 6px; align-items: center; color: var(--muted); font-weight: 500; }
.pd-short { font-size: 1.08rem; color: var(--ink); max-width: 62ch; white-space: pre-line; }
.packs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 18px 0 4px; }
.packs span { color: var(--muted); font-size: .9rem; margin-inline-end: 4px; }
.packs b { font-weight: 650; font-size: .9rem; padding: 7px 11px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); }
.pd-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.pd-tools { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.pd-tools .link { color: var(--muted); }
.pd-tabs { display: flex; gap: 4px; margin-top: 46px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.pd-tabs button { background: none; border: 0; padding: 14px 16px; font: 650 1.02rem var(--f-body); color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.pd-tabs button.on { color: var(--ink); border-bottom-color: var(--accent); }
.pd-panel { display: none; padding: 28px 0 8px; }
.pd-panel.on { display: block; }
.feat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px 30px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); border: 0; }
.feat-list li { display: flex; gap: 10px; align-items: flex-start; }
.feat-list .ic { color: var(--accent); margin-top: 3px; }
.spec-cols { display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.spec-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.spec-list li { padding: 11px 2px; border-bottom: 1px solid var(--line); font-weight: 600; }
.props { width: 100%; max-width: 760px; border-collapse: collapse; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.props th, .props td { text-align: start; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.props thead th { background: var(--brand); color: #fff; font-weight: 650; }
.props tbody th { font-weight: 500; color: var(--muted); width: 55%; }
.props td { font-variant-numeric: tabular-nums; font-weight: 650; }
.props tbody tr:nth-child(even) { background: var(--bg); }
.props tbody tr:last-child > * { border-bottom: 0; }
.note { color: var(--muted); font-size: .86rem; margin-top: 10px; }
.quote { background: var(--paper); border-block: 1px solid var(--line); padding-block: 56px; }
.quote-in { display: grid; gap: 26px; }
@media (min-width: 900px) { .quote-in { grid-template-columns: 1fr 1.4fr; } }
.quote p { color: var(--muted); }
.related { padding-block: 56px; }

.form { display: grid; gap: 14px; }
.form label span { display: block; font-size: .9rem; font-weight: 650; margin-bottom: 6px; }
.form input, .form textarea, .form select { width: 100%; padding: 11px 13px; }
.form textarea { min-height: 120px; resize: vertical; }
.form input:focus, .form textarea:focus, .form select:focus { outline: 2px solid var(--accent); border-color: transparent; }
.form-row { display: grid; gap: 14px; }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }
.form .btn { justify-self: start; }
.form-err { background: #FDECEA; color: #8C1D13; border-radius: var(--r-sm); padding: 10px 14px; margin: 0; }
.hint { color: var(--muted); font-size: .86rem; margin: 0; }
.form-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--shadow-sm); }
@media (min-width: 720px) { .form-card { padding: 34px; } }

.contact { padding-block: 44px 70px; }
.contact-in { display: grid; gap: 32px; }
@media (min-width: 960px) { .contact-in { grid-template-columns: 1fr 1.3fr; align-items: start; } }
.contact-cards { display: grid; gap: 12px; }
.c-card { display: flex; gap: 14px; padding: 18px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); }
.c-card > .ic { color: var(--accent); width: 24px; height: 24px; margin-top: 2px; }
.c-card h3 { font-size: 1.02rem; margin-bottom: 4px; font-family: var(--f-body); font-weight: 650; font-stretch: 100%; }
.c-card p { margin: 0; color: var(--muted); }
.c-card a { color: var(--ink); font-weight: 650; text-decoration: none; }
.map { margin-top: 44px; }
.map iframe { width: 100%; height: 420px; border: 0; display: block; }
.dealer-perks h2 { font-size: 1.6rem; }
.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; }
.ticks .ic { color: #1FA855; margin-top: 3px; }
.dealer-perks .ticks li { padding: 14px 0; border-bottom: 1px solid var(--line); }

.page-body { padding-block: 48px 70px; }
.page-grid { display: grid; gap: 34px; }
@media (min-width: 960px) { .page-grid { grid-template-columns: 1fr 320px; align-items: start; } }
.prose { max-width: 72ch; font-size: 1.06rem; }
.prose h2 { font-size: 1.6rem; margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.prose ul { padding-inline-start: 1.2em; }
.prose li { margin-bottom: .4em; }
.prose img { border-radius: var(--r); margin: 1em 0; }
.prose a { color: var(--accent); }
.side-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; position: sticky; top: 100px; }
.side-card h2 { font-size: 1.3rem; }
.side-markets { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 10px; }
.side-markets li { display: flex; gap: 10px; align-items: center; font-weight: 600; }

.gallery { padding-block: 44px 70px; }
.masonry { columns: 3 260px; column-gap: 16px; }
.masonry figure { margin: 0 0 16px; break-inside: avoid; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.masonry button { border: 0; padding: 0; display: block; width: 100%; cursor: zoom-in; background: none; }
.masonry figcaption { padding: 10px 14px; font-size: .9rem; color: var(--muted); }
.catalog { padding-block: 36px 70px; }
.catalog-bar { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.pdf-view { width: 100%; height: 82vh; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); }

.cmp { padding-block: 36px 70px; }
.cmp-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); }
.cmp-table { border-collapse: collapse; width: 100%; min-width: 640px; }
.cmp-table th, .cmp-table td { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; font-size: .95rem; }
.cmp-table thead th { vertical-align: bottom; }
.cmp-table thead img { height: 140px; width: auto; margin-bottom: 8px; }
.cmp-table thead a { display: block; font-weight: 750; font-size: 1.08rem; text-decoration: none; margin-bottom: 4px; }
.cmp-table tbody th { color: var(--muted); font-weight: 500; width: 200px; background: var(--bg); }
.grade-pill { background: var(--accent); color: #fff; padding: 4px 8px; border-radius: 5px; font-weight: 700; }

.nf { padding-block: 100px; text-align: center; }
.nf-code { font: 800 7rem/1 var(--f-display); font-stretch: 120%; color: var(--accent); margin: 0; }
.nf p { color: var(--muted); }
.nf-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.lightbox { position: fixed; inset: 0; background: rgba(5, 15, 28, .92); z-index: 95; display: grid; place-items: center; padding: 30px; }
.lightbox img { max-height: 90vh; max-width: 92vw; object-fit: contain; background: #fff; border-radius: var(--r); }
.lb-close { position: absolute; top: 16px; inset-inline-end: 16px; color: #fff; }

/* footer */
.ftr { background: var(--brand-dk); color: rgba(255, 255, 255, .74); padding-top: 64px; font-size: .95rem; }
.ftr-grid { display: grid; gap: 36px; grid-template-columns: 1fr; padding-bottom: 44px; }
@media (min-width: 720px) { .ftr-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .ftr-grid { grid-template-columns: 1.3fr .9fr .9fr 1.3fr; } }
.ftr h3 { color: #fff; font-size: 1.08rem; margin-bottom: 16px; }
.ftr ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.ftr a { text-decoration: none; } .ftr a:hover { color: #fff; }
.ftr .brand img { max-height: 58px; margin-bottom: 16px; background: #fff; padding: 6px 10px; border-radius: 8px; }
.ftr .wordmark { margin-bottom: 16px; } .ftr .wordmark small { color: rgba(255, 255, 255, .6); }
.ftr-about p { max-width: 38ch; }
.ftr-social { display: flex; gap: 8px; }
.ftr-social a { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .16); border-radius: 50%; }
.ftr-social a:hover { background: var(--accent); border-color: var(--accent); }
.ftr-social .ic { width: 17px; height: 17px; }
.ftr-contact p { display: flex; gap: 10px; align-items: flex-start; }
.ftr-contact .ic { width: 17px; height: 17px; color: var(--accent); margin-top: 4px; }
.news { margin-top: 20px; }
.news label { display: block; color: #fff; font-weight: 650; margin-bottom: 8px; }
.news-row { display: flex; gap: 8px; }
.news input { flex: 1; min-width: 0; min-height: 46px; border-radius: var(--r-sm); border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .05); color: #fff; padding: 0 12px; font: inherit; }
.ftr-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-block: 20px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .86rem; color: rgba(255, 255, 255, .55); }
.made::before { content: ""; display: inline-block; width: 18px; height: 11px; margin-inline-end: 8px; vertical-align: -1px; border-radius: 1px; background: linear-gradient(#000 0 33%, #DD0000 33% 66%, #FFCE00 66%); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .skills:not(.in) .skill-bar i { transform: none; }
}
@media print {
  .topbar, .hdr, .ftr, .wa-float, .to-top, .cookie, .quote, .related, .pd-actions, .pd-tools, .pd-tabs, .mbar { display: none !important; }
  .pd-panel { display: block !important; }
  body { background: #fff; padding: 0; }
}


/* ==========================================================
   Phone layout (≤ 760px): compact, two-column, no sideways scroll
   ========================================================== */
@media (max-width: 760px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.55rem; }
  .wrap { padding-inline: 16px; }
  .sec { padding-block: 44px; }
  .sec-head { margin-bottom: 20px; align-items: center; }
  .sec-head.center h2::after { margin-top: 12px; }
  .kicker { font-size: .85rem; margin-bottom: 6px; }

  /* top bar: one tidy row – call icon + languages */
  .topbar-in { min-height: 40px; gap: 8px; }
  .tb-info { gap: 0; flex: none; }
  .tb-info a:first-of-type span { display: none; }
  .tb-info a:first-of-type { width: 34px; height: 34px; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.08); }
  .tb-right { flex: 1; min-width: 0; justify-content: flex-end; }
  .tb-langs { overflow-x: auto; scrollbar-width: none; gap: 0; }
  .tb-langs::-webkit-scrollbar { display: none; }
  .tb-langs a { padding: 6px 7px; font-size: .76rem; }

  .hdr-in { min-height: 64px; gap: 8px; }
  .brand img { max-height: 42px; }
  .wordmark b { font-size: 1.45rem; }
  .wordmark small { font-size: .68rem; margin-top: 4px; }

  /* hero */
  .hero-in { padding-block: 30px 8px; gap: 8px; }
  .hero-tag { font-size: .8rem; padding: 5px 11px; margin-bottom: 14px; }
  .hero h1 { font-size: 2.15rem; max-width: none; }
  .hero-lead { font-size: 1rem; margin-bottom: 0; }
  .hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
  .hero-actions .btn { min-height: 48px; padding: 0 10px; font-size: .9rem; white-space: normal; text-align: center; line-height: 1.2; }
  .hero-cans { height: 200px; margin-top: 6px; }
  .hero-cans .can { height: 150px; max-width: 36%; }
  .hero-cans .can-0 { height: 190px; max-width: 42%; }
  .grade-in { display: block; min-height: 0; padding-block: 12px 14px; }
  .grade-in > span { display: block; font-size: .82rem; margin-bottom: 8px; }
  .grade-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; }
  .grade-chips::-webkit-scrollbar { display: none; }
  .grade-chips a { flex: none; padding: 7px 12px; font-size: .84rem; scroll-snap-align: start; }

  .banner img { max-height: 220px; }

  /* welcome */
  .welcome-in { gap: 26px; }
  .catalog-cover { max-width: 230px; }
  .wvideo::before { inset: -10px 10px auto -8px; }
  [dir="rtl"] .wvideo::before { inset: -10px -8px auto 10px; }
  .wvideo-btn { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  .wvideo-btn .ic { width: 26px; height: 26px; }
  .welcome-copy > p { font-size: 1rem; }
  .skills { gap: 14px; margin: 20px 0 22px; }
  .skill-top { font-size: .92rem; }

  /* features: 2 × 2 */
  .feat-grid { grid-template-columns: 1fr 1fr; }
  .feat { flex-direction: column; gap: 10px; padding: 20px 12px; border-bottom: 1px solid var(--line); }
  .feat:nth-child(odd) { border-inline-end: 1px solid var(--line); }
  .feat:nth-child(n+3) { border-bottom: 0; }
  .feat-ic { width: 42px; height: 42px; }
  .feat h3 { font-size: .95rem; }
  .feat p { font-size: .82rem; line-height: 1.5; }

  /* product cards: two per row, compact */
  .grid, .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; gap: 12px; }
  .card:hover { transform: none; }
  .card-img { padding: 14px 10px 8px; }
  .card-img img { height: 128px; }
  .grade { top: 8px; inset-inline-start: 8px; font-size: .72rem; padding: 4px 7px; }
  .card-body { padding: 10px 12px 8px; }
  .card-cat { font-size: .7rem; line-height: 1.3; }
  .card-body h3 { font-size: .92rem; line-height: 1.25; margin-bottom: 6px; overflow-wrap: anywhere; }
  .card-body p, .card-body .chips { display: none; }
  .card-foot { padding: 10px 12px 12px; gap: 8px; }
  .price { font-size: .78rem; }
  .card-acts { display: grid; gap: 6px; }
  .card-acts .btn { min-height: 36px; padding: 0 8px; font-size: .78rem; }
  .cmp-toggle { display: none; }

  /* best sellers: swipe row */
  .best .grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; margin-inline: -16px; padding: 4px 16px 8px; gap: 12px; }
  .best .grid::-webkit-scrollbar { display: none; }
  .best .card { flex: 0 0 46%; scroll-snap-align: start; }

  /* categories */
  .cat-grid { gap: 12px; }
  .cat-card { min-height: 0; padding: 16px 18px; }
  .cat-card img { height: 86px; }
  .cat-txt b { font-size: 1rem; }

  /* counters 2 × 2 */
  .stats-in { grid-template-columns: 1fr 1fr; padding-block: 28px; gap: 18px 10px; }
  .stats b { font-size: 2.2rem; }
  .stats span { font-size: .85rem; }
  .marquee { font-size: .92rem; padding: 10px 0; }

  /* service tabs: swipe instead of wrapping */
  .tabs { flex-wrap: nowrap; justify-content: flex-start; margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; scrollbar-width: none; margin-bottom: 18px; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button { flex: none; padding: 8px 13px; font-size: .86rem; }

  .gal-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .markets { padding-block: 30px; }
  .markets-in { flex-direction: column; align-items: flex-start; gap: 14px; }
  .markets h2 { font-size: 1.2rem; }
  .markets ul { gap: 12px 24px; }
  .markets li img { height: 34px; }

  .dist-grid { grid-template-columns: 1fr; }
  .cta { padding-block: 40px; }
  .cta-btns { display: grid; grid-template-columns: 1fr 1fr; }
  .cta-btns .btn { min-height: 48px; padding: 0 10px; }
  .home-contact .contact-in { gap: 22px; }
  .form-card { padding: 18px; }
  .form .btn { justify-self: stretch; }

  /* inner pages */
  .page-head { padding-block: 26px 24px; }
  .page-head h1 { font-size: 1.75rem; }
  .crumbs { font-size: .78rem; margin-bottom: 8px; flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
  .crumbs span:last-child { overflow: hidden; text-overflow: ellipsis; }
  .listing { padding-block: 18px 44px; }
  .listing-in { gap: 16px; }
  .filters { padding: 14px; }
  .filters h3 { margin: 14px 0 8px; }
  .f-cats { display: flex; overflow-x: auto; gap: 6px; scrollbar-width: none; }
  .f-cats::-webkit-scrollbar { display: none; }
  .f-cats a { white-space: nowrap; padding: 8px 12px; border: 1px solid var(--line); }
  .f-grades { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .f-grades::-webkit-scrollbar { display: none; }
  .f-grades a { flex: none; }
  .results-bar { font-size: .86rem; margin-bottom: 12px; }

  .pd { padding-block: 16px 28px; }
  .pd-top { gap: 20px; }
  .pd-main { padding: 16px; }
  .pd-main img { max-height: 300px; }
  .pd-info h1 { font-size: 1.6rem; }
  .pd-short { font-size: 1rem; }
  .pd-actions { display: grid; grid-template-columns: 1fr; }
  .pd-tools { gap: 16px; font-size: .9rem; }
  .pd-tabs { margin-top: 28px; margin-inline: -16px; padding-inline: 16px; scrollbar-width: none; }
  .pd-tabs::-webkit-scrollbar { display: none; }
  .pd-tabs button { padding: 12px 12px; font-size: .92rem; }
  .feat-list { grid-template-columns: 1fr; }
  .props th, .props td { padding: 10px 12px; font-size: .88rem; }
  .props tbody th { width: 58%; }
  .quote { padding-block: 36px; }
  .related { padding-block: 36px; }

  .contact { padding-block: 24px 44px; }
  .c-card { padding: 14px; }
  .map iframe { height: 300px; }
  .masonry { columns: 2; column-gap: 10px; }
  .masonry figure { margin-bottom: 10px; }
  .cmp-table thead img { height: 90px; }

  /* footer: 2 columns for the link lists */
  .ftr { padding-top: 40px; }
  .ftr-grid { grid-template-columns: 1fr 1fr; gap: 28px 18px; padding-bottom: 28px; }
  .ftr-about, .ftr-contact { grid-column: 1 / -1; }
  .ftr h3 { font-size: 1rem; margin-bottom: 10px; }
  .ftr ul { gap: 7px; font-size: .9rem; }
  .ftr-bottom { flex-direction: column; gap: 6px; text-align: center; align-items: center; }

  .cookie { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px; inset-inline: 12px; max-width: none; }
  .cookie p { font-size: .84rem; }
  .cookie .btn { min-height: 40px; }
  .toast { inset-inline: 12px; max-width: none; top: 76px; }
}
@media (max-width: 760px) {
  .of-home { background: linear-gradient(180deg, var(--brand-dk) 0 40px, var(--bg) 40px); padding-bottom: 0; }
  .of-home-in, .of-card { padding: 18px 16px; }
  .ofind { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ofind .of-f:first-child, .ofind .of-f:nth-child(2) { grid-column: 1 / -1; }
  .of-f select { min-height: 48px; font-size: .95rem; }
  .of-head { padding-bottom: 78px; }
  .of-card { margin-top: -44px; }
  .of-best { padding: 48px 18px 22px; }
  .of-best-img img { max-height: 220px; }
  .of-acts { display: grid; }
  .of-car { padding: 12px 14px; flex-wrap: wrap; }
}
@media (max-width: 360px) {
  .hero h1 { font-size: 1.85rem; }
  .card-img img { height: 110px; }
  .tb-langs a { padding: 6px 5px; }
}

/* image fallbacks */
.brand .wordmark-fb { display: none; }
.brand.no-logo img { display: none !important; }
.brand.no-logo .wordmark-fb { display: flex; }

/* ---------- animated "oil" border around the video ---------- */
@property --oil-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.wvideo-frame {
  border: 5px solid transparent;
  background:
    linear-gradient(var(--brand-dk), var(--brand-dk)) padding-box,
    conic-gradient(from var(--oil-a),
      #2a1a00 0deg, #6b4300 40deg, #c97a00 70deg, #ffcf5a 86deg, #fff3c4 92deg, #ffb52e 100deg, #8a5200 135deg, #2a1a00 175deg,
      #3a0a0c 185deg, #8e1015 220deg, #D71920 250deg, #ff6a3d 268deg, #ffd08a 274deg, #e0461f 284deg, #6e0c10 320deg, #2a1a00 360deg) border-box;
  animation: oil-spin 6s linear infinite;
}
.wvideo { --oil-glow: rgba(243, 156, 18, .45); }
.wvideo::after {
  content: ""; position: absolute; z-index: 0; inset: 0 0 auto 0; aspect-ratio: 16 / 9; border-radius: var(--r-lg); pointer-events: none;
  background: conic-gradient(from var(--oil-a), transparent 0 60deg, rgba(255, 190, 60, .75) 88deg, transparent 130deg 230deg, rgba(215, 25, 32, .6) 270deg, transparent 310deg);
  filter: blur(18px); opacity: .8; animation: oil-spin 6s linear infinite;
}
.wvideo.is-vertical::after { display: none; }
.wvideo-frame video, .wvideo-frame > img { border-radius: calc(var(--r-lg) - 5px); }
@keyframes oil-spin { to { --oil-a: 360deg; } }
@media (prefers-reduced-motion: reduce) { .wvideo-frame, .wvideo::after { animation: none; } }

/* ---------- catalog page ---------- */
.cat-hero { display: grid; grid-template-columns: minmax(220px, 360px) 1fr; gap: clamp(24px, 5vw, 64px); align-items: center; margin-bottom: 48px; }
.cat-book { position: relative; display: block; border-radius: 6px 14px 14px 6px; overflow: hidden; box-shadow: 0 30px 60px -24px rgba(15, 36, 56, .55), 0 0 0 1px rgba(15, 36, 56, .08); transform: perspective(1200px) rotateY(-8deg); transition: transform .4s ease; background: var(--brand); aspect-ratio: 210 / 297; }
[dir="rtl"] .cat-book { transform: perspective(1200px) rotateY(8deg); border-radius: 14px 6px 6px 14px; }
.cat-book:hover { transform: perspective(1200px) rotateY(0); }
.cat-book::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 10px; background: linear-gradient(90deg, rgba(0, 0, 0, .35), transparent); z-index: 1; }
[dir="rtl"] .cat-book::before { inset: 0 0 0 auto; background: linear-gradient(270deg, rgba(0, 0, 0, .35), transparent); }
.cat-book img { width: 100%; height: 100%; object-fit: cover; }
.cat-book-fb { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: #fff; }
.cat-book-fb b { font: 800 2rem var(--f-display); letter-spacing: .12em; }
.cat-lang { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 2; background: var(--accent); color: #fff; font: 800 .75rem/1 var(--f-body); letter-spacing: .12em; padding: 7px 10px; border-radius: 99px; }
.cat-info .eyebrow { display: inline-block; font-weight: 750; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.cat-info h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
.cat-claim { color: var(--muted); font-size: 1.05rem; max-width: 56ch; }
.cat-points { list-style: none; padding: 0; margin: 18px 0 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.cat-points li { display: flex; gap: 10px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; font-weight: 600; font-size: .92rem; }
.cat-points .ic { color: var(--accent); flex: none; }
.cat-langs { margin-bottom: 44px; }
.cat-langs h3 { font-size: 1.3rem; margin-bottom: 16px; }
.cat-lang-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.cat-lang-card { display: block; text-decoration: none; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.cat-lang-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.cl-img { position: relative; display: block; aspect-ratio: 210 / 297; background: var(--brand); }
.cl-img img { width: 100%; height: 100%; object-fit: cover; }
.cl-img i { position: absolute; top: 8px; inset-inline-end: 8px; font: 800 .7rem/1 var(--f-body); font-style: normal; letter-spacing: .1em; color: #fff; background: rgba(15, 36, 56, .8); padding: 5px 8px; border-radius: 99px; }
.cl-txt { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; }
.cl-txt b { font-size: .95rem; }
.cl-txt small { display: inline-flex; gap: 4px; align-items: center; color: var(--accent); font-weight: 700; font-size: .78rem; }
.cat-view .pdf-view { height: 86vh; }
@media (max-width: 760px) {
  .cat-hero { grid-template-columns: 1fr; }
  .cat-book { max-width: 260px; margin-inline: auto; transform: none !important; }
  .cat-lang-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .cat-view { display: none; }
}