/* foodtech.ee child template — all visual rules, ported from the client-approved mockup.
   Built task-by-task (Plan 2). This slice (Task 4): self-hosted Roboto, :root tokens,
   base element styles, .wrap, .rule-title, buttons. Chrome / hero / grid / responsive
   rules are appended by later tasks (5, 7, 8, 9, 11, 13). */

/* self-hosted Roboto (no external font fetch — tracker-free, spec D12) */
@font-face{font-family:"Roboto";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/roboto-300.woff2") format("woff2")}
@font-face{font-family:"Roboto";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/roboto-400.woff2") format("woff2")}
@font-face{font-family:"Roboto";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/roboto-500.woff2") format("woff2")}
@font-face{font-family:"Roboto";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/roboto-700.woff2") format("woff2")}

/* tokens (verbatim from mockup) */
:root{
  --red:#e20b1d;
  --red-dark:#c2091a;
  --blue:#00a2de;
  --ink:#333;
  --ink-dark:#1b2027;
  --ink-2:#666;
  --ink-3:#8a8a8a;
  --line:#e3e3e3;
  --grey:#f2f2f2;
  --grey-2:#e9e9e9;
  --font:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;
  --wrap:1400px;
}

/* base */
*{box-sizing:border-box}
body{margin:0;font-family:var(--font);font-size:15px;line-height:1.55;color:var(--ink);background:#fff}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--red)}
h1,h2,h3{margin:0;font-weight:400;line-height:1.2}
p,ul{margin:0;padding:0}
ul{list-style:none}
button{font:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}

/* section label on a line (existing "Partnerid" pattern) */
.rule-title{position:relative;text-align:center;margin:0 0 36px}
.rule-title::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px solid var(--line)}
.rule-title span{position:relative;display:inline-block;background:var(--grey);padding:12px 34px;font-size:15px;color:var(--ink-2)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 20px;border:0;border-radius:2px;font-size:15px;font-weight:500;cursor:pointer;white-space:nowrap}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-dark);color:#fff}
.btn-dark{background:#1d1d1b;color:#fff}
.btn-dark:hover{background:#000;color:#fff}
.btn-line{background:#fff;color:var(--ink);border:1px solid #cfcfcf}
.btn-line:hover{border-color:var(--ink);color:var(--ink)}
.btn-white{background:#fff;color:var(--ink)}
.btn-white:hover{background:var(--grey-2);color:var(--ink)}
.btn-glass{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.75)}
.btn-glass:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff}

/* ============================================================
   Chrome (Task 5): topbar, header, logo, search, nav, footer.
   Ported verbatim from the approved mockup. Responsive @media
   rules for these selectors are added in Task 13.
   ============================================================ */

/* row 1: utility bar */
.topbar{background:#fafafa;border-bottom:1px solid var(--line);font-size:13px}
.topbar .wrap{display:flex;align-items:center;gap:24px;min-height:40px}
.sister{display:flex;align-items:center;white-space:nowrap}
.sister a{color:var(--ink-2);padding:0 10px;line-height:40px}
.sister a:first-child{padding-left:0}
.sister a:hover{color:var(--red)}
.sister .sep{color:#d8d8d8}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:22px}
.top-phone{display:flex;align-items:center;gap:7px;color:var(--ink);font-weight:500;white-space:nowrap}
.top-phone svg{width:14px;height:14px;fill:var(--ink-3)}
.top-phone:hover{color:var(--red)}
.lang{display:flex;flex:none}
.lang a{display:block;position:relative;padding:0 10px;line-height:40px;color:var(--ink-3);font-size:12px;font-weight:500;letter-spacing:.04em}
.lang a:hover{color:var(--ink)}
.lang a[aria-current]{color:var(--ink)}
.lang a[aria-current]::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:2px;background:var(--red)}
.lang a:last-child{padding-right:0}
.lang a:last-child::after{right:0}

/* row 2: logo, search, one action */
.site-head{position:relative}
.header{background:#fff}
.header .wrap{display:flex;align-items:center;gap:40px;padding:16px 0}
.logo{display:block;flex:none}
.logo-svg{height:96px;width:auto;display:block}
.lg-red{fill:var(--red)}
.lg-blue{fill:var(--blue)}
.hsearch{display:flex;flex:1;max-width:580px;height:46px;margin:0 auto;background:#fff;border:1px solid #c9c9c9;border-radius:3px;overflow:hidden}
.hsearch:focus-within{border-color:var(--ink)}
.hsearch input{flex:1;min-width:0;border:0;height:100%;padding:0 16px;font:inherit;font-size:15px;color:var(--ink);background:transparent}
.hsearch input::placeholder{color:#9a9a9a}
.hsearch input:focus{outline:none}
.hsearch button{flex:none;height:100%;padding:0 20px;border:0;background:var(--ink-dark);color:#fff;font-size:15px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:8px}
.hsearch button:hover{background:#000}
.hsearch button svg{width:16px;height:16px}
.header-cta{flex:none}
.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:2px;padding:8px 10px;cursor:pointer;color:var(--ink)}
.menu-btn svg{width:22px;height:22px;display:block}

/* row 3: navigation */
.navbar{background:var(--grey);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:6px}
.nav a{display:block;position:relative;padding:0 16px;line-height:50px;font-size:15px;font-weight:500;color:var(--ink)}
.nav a:hover{color:var(--red)}
.nav a[aria-current]{color:var(--red)}
.nav a[aria-current]::after{content:"";position:absolute;left:16px;right:16px;bottom:0;height:3px;background:var(--red)}
.nav li:first-child a{padding-left:0}
.nav li:first-child a::after{left:0}

/* breadcrumbs (mod_breadcrumbs override) — quiet, light trail in main-top.
   More air below (24px) separates the trail from the page title beneath it. */
.crumbs{padding:18px 0 24px;font-size:13px;color:var(--ink-3)}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;margin:0;padding:0;list-style:none}
.crumbs li{display:flex;align-items:center}
.crumbs li+li::before{content:"/";margin:0 8px;color:var(--line)}
.crumbs a{color:var(--ink-3)}
.crumbs a:hover{color:var(--red)}
.crumbs li[aria-current] span{color:var(--ink)}
/* home icon on the first crumb — CSS mask so it inherits the link colour
   (ink-3 at rest, red on hover) alongside the "Pealeht" text */
.crumbs li:first-child a{display:inline-flex;align-items:center;gap:6px}
.crumbs li:first-child a::before{content:"";flex:none;width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E") center/contain no-repeat}

/* footer top: depot + sales contacts (lives inside the dark footer) */
.foot-contact{padding-bottom:48px;margin-bottom:40px;border-bottom:1px solid rgba(255,255,255,.14)}
.contact-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:start}
.foot-contact h2{font-size:28px;font-weight:300;color:#fff;margin-bottom:12px}
.foot-contact p{font-weight:300;font-size:16px;color:rgba(255,255,255,.78);max-width:46ch}
.addr{display:grid;grid-template-columns:auto 1fr;gap:8px 24px;margin:22px 0 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);font-size:15px}
.addr dt{color:rgba(255,255,255,.5);margin:0}
.addr dd{margin:0;color:#fff}
.addr a{color:#fff;border-bottom:1px solid rgba(255,255,255,.35)}
.addr a:hover{color:#fff;border-color:#fff}
.contact-actions{margin-top:24px;display:flex;gap:10px;flex-wrap:wrap}
.people li{display:grid;grid-template-columns:1fr auto;gap:6px 20px;align-items:center;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.people li:first-child{border-top:1px solid rgba(255,255,255,.14)}
.p-name{font-weight:500;color:#fff}
.p-role{font-size:13px;color:rgba(255,255,255,.6);margin-top:2px}
.p-tel{white-space:nowrap;font-size:16px;color:#fff}
.p-tel:hover{color:#fff;text-decoration:underline}
.people-note{margin-top:12px;font-size:13px;color:rgba(255,255,255,.55)}
.people-note a{color:#fff;text-decoration:underline}
.people-note a:hover{color:#fff}

/* partners: light strip between content and footer */
.partners{padding:8px 0 64px}
.partners .rule-title span{background:#fff}
.partner-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:30px 56px}
.partner-row a{display:block;opacity:.9}
.partner-row a:hover{opacity:1}
.partner-row img{height:40px;width:auto;max-width:160px;object-fit:contain}

/* footer: the page's dark floor */
.footer{background:var(--ink-dark);color:rgba(255,255,255,.72);padding:56px 0 24px;font-size:14px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
.foot-grid h3{font-size:14px;font-weight:500;color:#fff;margin-bottom:10px}
.foot-grid li{padding:2px 0}
.foot-grid a{color:rgba(255,255,255,.72)}
.foot-grid a:hover{color:#fff}
.foot-legal{line-height:1.7}
.foot-legal a{text-decoration:underline}
.foot-bottom{margin-top:40px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,.5)}
.foot-bottom .lang a{line-height:28px;padding:0 10px;color:rgba(255,255,255,.55)}
.foot-bottom .lang a:hover{color:#fff}
.foot-bottom .lang a[aria-current]{color:#fff}
.foot-bottom .lang a[aria-current]::after{left:10px;right:10px;height:2px}

/* ============================================================
   Home hero + icon cards + e-shop band (Task 7), home-only.
   The .hero background IMAGE comes from the hero_image template
   param via an inline style (index.php); this rule keeps only
   the colour fallback, position, size, repeat and the overlay.
   The .ik-st* / .ic2-st1 classes fill the pasted inline icon
   SVGs (dependency of the mockup icon markup). Responsive
   @media rules for these selectors are added in Task 13.
   ============================================================ */

/* hero: left-aligned red plate + one line + two actions */
/* min-height is the fixed-ratio box; every slide fills it with background-size:cover, so client
   uploads of any dimensions crop to the same aspect ratio instead of stretching. overflow:hidden
   clips the Ken Burns zoom. */
.hero{position:relative;display:flex;align-items:center;min-height:clamp(440px,33vw,660px);background:#a9bfae;color:#fff;overflow:hidden}
/* stacked background layers: all cover the same box; only .is-active is visible, crossfaded by JS */
.hero-media{position:absolute;inset:0;z-index:0}
.hero-slide{position:absolute;inset:0;background:center 62%/cover no-repeat;opacity:0;transition:opacity 1500ms ease-in-out}
.hero-slide.is-active{opacity:1}
/* Rotating hero. The incoming slide fades in ON TOP (z-index) while the outgoing one is HELD fully
   opaque beneath it, then dropped only after the fade completes (opacity 0ms + 1500ms delay). The
   box stays fully covered throughout, so there is no mid-crossfade dip. The subtle Ken Burns zoom is
   a transform TRANSITION (not a keyframe), so the outgoing slide EASES its zoom back instead of
   snapping to scale(1) when it loses .is-active — that snap was the visible jump. */
.hero--rotate .hero-slide{transform:scale(1);transition:opacity 0ms linear 1500ms,transform 8000ms ease-out}
.hero--rotate .hero-slide.is-active{z-index:1;transition:opacity 1500ms ease-in-out,transform 8000ms ease-out}
/* Ken Burns end-state is gated behind .is-animating (JS adds it one frame after load), so the
   initially-active first slide renders at scale(1) and THEN transitions to scale(1.06) — otherwise
   it is born at the end state and never zooms, sitting frozen until the first crossfade. */
.hero--rotate.is-animating .hero-slide.is-active{transform:scale(1.06)}
/* reduced motion: no crossfade, no zoom — the rotation JS also stands down, leaving slide 1 static */
@media (prefers-reduced-motion:reduce){
  .hero--rotate .hero-slide,
  .hero--rotate .hero-slide.is-active,
  .hero--rotate.is-animating .hero-slide.is-active{transition:none;transform:none}
}
/* scrim: solid enough on the left for WCAG text contrast, fades out so the image stays visible */
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(14,17,20,.86) 0%,rgba(14,17,20,.72) 38%,rgba(14,17,20,.28) 68%,rgba(14,17,20,0) 100%)}
.hero .wrap{position:relative;z-index:2;width:100%;padding:64px 20px 72px}
.hero-inner{max-width:720px}
.strip{display:block;margin:0;padding:0}
.strip h1{font-size:36px;font-weight:400;line-height:1.2;color:#fff}
.hero-lead{margin-top:20px;font-size:19px;font-weight:400;line-height:1.55;max-width:46ch;color:rgba(255,255,255,.92)}
.hero-actions{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap}

/* service strip under hero: three linked rows, icon + text */
.icons{position:relative;z-index:2;margin-top:0}
.icons-box{display:grid;grid-template-columns:repeat(3,1fr);background:#fff;border:0;border-bottom:1px solid var(--line)}
.icon-item{display:flex;align-items:center;gap:22px;padding:26px 32px;border-left:1px solid var(--line);color:var(--ink)}
.icon-item:first-child{border-left:0}
.icon-item:hover{color:var(--ink)}
.icon-item svg{width:72px;height:58px;flex:none;filter:grayscale(1);opacity:.72;transition:filter .2s,opacity .2s}
.icon-item:hover svg,.icon-item:focus-visible svg{filter:none;opacity:1}
.icon-item p{font-size:15px;line-height:1.4;margin:0}
.icon-item .go{display:block;margin-top:5px;font-size:13px;font-weight:500;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
.icon-item:hover .go{color:var(--red)}

/* saksavorst e-shop band */
.eshop-band{margin:64px 0 60px}
.eshop-box{background:var(--grey);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:40px;padding:34px 48px;border-radius:6px}
.eshop-box img{height:64px;width:auto}
.eshop-box p{font-size:17px;font-weight:300;color:var(--ink)}
.eshop-box p b{font-weight:500}

/* fills for the pasted inline icon SVGs (icon cards) */
.ik-st0{fill:#e20b1d}
.ik-st0,.ik-st1,.ik-st2,.ik-st3{fill-rule:evenodd}
.ik-st1{fill:#fff}
.ik-st2,.ik-st4{fill:#ccc}
.ik-st3{fill:#ed1c24}
.ic2-st1{fill-rule:evenodd;fill:#ccc}

/* --- category sidebar (Task 8): mod_djc2categories override → .catbox/.catlist --- */
/* overflow-x:clip contains the .djc_subcategory hover-popup (position:absolute,
   width:320px, centered via translate(-50%)) on the rightmost tile: it extends
   ~54px past the viewport and adds phantom horizontal scroll even while hidden.
   .main spans exactly the viewport width, so clip removes only the off-screen
   sliver with no visible loss; clip (not hidden) creates no scroll container and
   leaves overflow-y visible. */
.main{padding:40px 0 20px;overflow-x:clip}
.cols{display:grid;grid-template-columns:280px 1fr;gap:60px;align-items:start}
/* .catbox-head is a <button> (mobile toggle) styled as the mockup's red bar;
   button-reset props keep the desktop look identical. On desktop the list is
   always shown, so the toggle has no visible effect and the chevron is hidden. */
.catbox-head{display:flex;align-items:center;gap:11px;width:100%;border:0;text-align:left;font-family:inherit;background:var(--red);color:#fff;padding:0 20px;height:65px;font-size:22px;font-weight:300}
.catbox-head .catbox-burger{width:29px;height:21px;flex:none}
.catbox-head .catbox-title{flex:1 1 auto}
.catbox-chevron{display:none;width:16px;height:16px;flex:none;transition:transform .2s ease}
/* the module emits <ul class="menucategories nav mod_djc2categories_list"> — style it as the mockup .catlist, scoped under .catbox.
   display:block + line-height reset override the main-menu .nav rules (.nav{display:flex}, .nav a{line-height:50px})
   that leak in via the shared bare "nav" class token. The one leak this does NOT outrank is
   .nav li:first-child a{padding-left:0} (specificity 0,2,2 beats .catbox .menucategories a at 0,2,1), which stripped the
   left indent off the FIRST top-level category so it read as a heading the rest nest under — reset explicitly below. */
.catbox .menucategories{display:block;list-style:none;margin:0;padding:0}
.catbox .menucategories li{display:block}
/* Rows ported from the old site (styles.css .left-wrapper .categories): thin
   top separators, charcoal 300-weight text, light-grey hover/active band. */
/* top-level rows = main categories: 500-weight charcoal, the primary structure */
.catbox .menucategories a{display:block;padding:14px 16px 14px 20px;line-height:1.35;font-size:14px;font-weight:500;color:var(--ink);text-decoration:none;border-top:1px solid var(--line)}
/* All top-level categories are peers: re-assert the 20px indent on the first one,
   whose <a> the main-menu leak .nav li:first-child a{padding-left:0} would otherwise
   flatten to flush-left (only the direct first child of the top ul, not nested lists). */
.catbox .menucategories>li:first-child>a{padding-left:20px}
.catbox .menucategories a:hover{background:#f5f5f5;text-decoration:underline}
/* active = an ancestor on the current path; current = the category being viewed */
.catbox .menucategories li.active>a{background:#f5f5f5}
.catbox .menucategories li.current>a{background:#f5f5f5;color:var(--red);font-weight:600}
/* nested levels indent progressively (every <li> carries a levelN class) */
.catbox .menucategories .nav-child{list-style:none;margin:0;padding:0}
/* subcategory rows read as a subordinate cluster: lighter, smaller, tighter,
   faint separators — so the top-level main categories stay visually dominant */
.catbox .menucategories .nav-child a{font-size:13px;font-weight:300;color:#000;padding-top:9px;padding-bottom:9px;border-top-color:#efefef}
.catbox .menucategories .level1 a{padding-left:36px}
.catbox .menucategories .level2 a{padding-left:52px}
.catbox .menucategories .level3 a{padding-left:68px}

/* --- product cards (Task 9): mod_djc2items + com_djcatalog2 items → .featured/.prod-grid/.prod --- */
.featured-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin-bottom:18px}
.featured-head h2{font-size:26px;font-weight:300;color:var(--ink-dark)}
.featured-head a{color:var(--ink-2);text-decoration:underline;font-size:14px}
.featured-head a:hover{color:var(--red)}
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.prod{border:1px solid var(--line);background:#fff}
.prod-img{aspect-ratio:4/3;overflow:hidden;background:#fff;border-bottom:1px solid var(--line)}
.prod-img a{display:block;height:100%}
.prod-img img{width:100%;height:100%;object-fit:cover}
.prod-body{padding:16px 18px 18px}
.prod-cat{font-size:12px;color:var(--ink-3);margin-bottom:4px}
.prod h3{font-size:18px;font-weight:300;color:#000;line-height:1.3}
.prod h3 a{color:#000}
.prod h3 a:hover{text-decoration:underline}
.prod-link{display:inline-block;margin-top:12px;font-size:14px;color:var(--ink);text-decoration:underline}
.prod-link:hover{color:var(--red)}

/* --- product page (Task 10): com_djcatalog2/item override → .prod-page/.spec-table (no mockup; derived in-palette) --- */
.prod-page{padding:8px 0 20px}
.prod-page-head{margin-bottom:24px}
.prod-page-head h1{font-size:30px;font-weight:300;color:var(--red);line-height:1.2}
.prod-page-cat{font-size:13px;color:var(--ink-3);margin-top:6px;text-transform:uppercase;letter-spacing:.04em}
.prod-page-grid{display:grid;grid-template-columns:minmax(0,460px) 1fr;gap:44px;align-items:start}
.prod-gallery{min-width:0}
.prod-gallery img{max-width:100%}
/* Gallery redesign (Task A): the DJ-Catalog2 switcher gallery
   (.djc_images > .djc_mainimage + .djc_thumbnails) ships unstyled here — the
   theme's gallery rules are all #djcatalog-scoped and this override renders
   under .prod-page. Processed images are capped at 500px (large) / 200px
   (small) by the component (resize=0), so we frame + center rather than
   upscale. CSS-only; core markup untouched. */
.prod-gallery .djc_images{float:none;width:auto;max-width:100%}
.prod-gallery .djc_mainimage{position:relative;display:flex;align-items:center;justify-content:center;min-height:340px;padding:16px;background:#fff;border:1px solid var(--line);border-radius:6px}
.prod-gallery .djc_mainimage a{display:flex;width:100%;align-items:center;justify-content:center}
.prod-gallery .djc_mainimage img{width:auto;height:auto;max-width:100%;max-height:440px;object-fit:contain;cursor:zoom-in}
.prod-gallery .djc_thumbnails{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;padding:0}
.prod-gallery .djc_thumbnail{flex:none;width:72px;height:72px;margin:0}
.prod-gallery .djc_thumbnail a{display:block;width:100%;height:100%;border:1px solid var(--line);border-radius:4px;overflow:hidden;cursor:pointer;transition:border-color .15s}
.prod-gallery .djc_thumbnail a:hover{border-color:var(--red)}
.prod-gallery .djc_thumbnail img{width:100%;height:100%;object-fit:cover;display:block}
.prod-detail{min-width:0}
.prod-intro{font-size:16px;color:var(--ink);line-height:1.6;margin-bottom:14px}
.prod-desc{font-size:14px;color:var(--ink-2);line-height:1.65}
.prod-desc p{margin:0 0 10px}
.prod-producer{margin-top:16px;font-size:13px;color:var(--ink-3)}
.prod-producer span{color:var(--ink)}
/* extra-field spec: default_attributes.php emits <tr><td class="djc_label"><td class="djc_value"> — style as a clean 2-col table */
.spec-table{width:100%;border-collapse:collapse;margin:22px 0}
.spec-table tr{border-bottom:1px solid var(--line)}
.spec-table .djc_label{padding:10px 16px 10px 0;font-size:13px;color:var(--ink-3);width:42%;vertical-align:top}
.spec-table .djc_value{padding:10px 0;font-size:14px;color:var(--ink);vertical-align:top}
/* --- product-page inquiry form (Task B/C): the per-product item.contact form,
   rendered inline (item/default_contact.php override) as a full-width band below the
   product grid. Native DJ-Catalog2 inputs carry .form-control; normalise them to the
   site's field style and lay the four short fields in a 2-col grid, with message and
   reCAPTCHA full width. Company + phone enabled via contact_*_field component params;
   contact_subject is emitted hidden (= product name). --- */
/* framed panel with a red accent edge — gives the inquiry form presence as a
   distinct module instead of a bare band; white fields sit on the light ground */
.prod-inquiry{margin-top:44px;padding:34px 40px 38px;background:#f8f8f8;border:1px solid var(--line);border-top:3px solid var(--red)}
.prod-inquiry-title{font-size:23px;font-weight:400;color:var(--ink-dark);line-height:1.2;margin:0 0 24px}
/* success message ("Täname kirja eest") — Cassiopeia's alert CSS paints every type white;
   same selector, loaded later, so this wins. Yellowish so the confirmation is noticed. */
#system-message-container joomla-alert[type="success"],#system-message-container joomla-alert[type="message"]{--alert-accent-color:#c99a00;background-color:#fff3bf;color:#3d3300;font-size:17px}
.pi-error{margin:0 0 20px;padding:12px 16px;border:1px solid var(--red);border-radius:4px;background:#fdecec;color:var(--red-dark);font-size:14px}
.pi-form{display:flex;flex-direction:column;gap:24px}
.pi-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 26px}
.pi-field{display:flex;flex-direction:column;gap:8px}
.pi-field--full{grid-column:1/-1}
.pi-field label{font-size:13px;font-weight:600;color:var(--ink);letter-spacing:.01em}
.pi-field label .star{color:var(--red)}
.prod-inquiry input:not([type=hidden]),.prod-inquiry textarea{width:100%;box-sizing:border-box;font:inherit;font-size:15px;color:var(--ink);background:#fff;border:1px solid #d2d2d2;border-radius:4px;padding:11px 14px;transition:border-color .15s,box-shadow .15s}
.prod-inquiry input:not([type=hidden]):focus,.prod-inquiry textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(226,11,29,.12)}
.prod-inquiry textarea{min-height:140px;resize:vertical;line-height:1.55}
.pi-actions{margin-top:2px}
.pi-actions .btn{height:48px;padding:0 34px;font-size:15px}

/* ─── Responsive: ported verbatim from approved mockup (foodtech-avaleht-approved.html 202–252): 1240 / 1024 / 960 / 480 ─── */
@media (max-width:1240px){
  .header .wrap{gap:24px}
  .hsearch{max-width:440px}
  .prod-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1024px){
  .cols{grid-template-columns:240px 1fr;gap:32px}
  .prod-grid{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr;gap:40px}
  .eshop-box{grid-template-columns:auto 1fr;padding:24px}
  .eshop-box .btn{grid-column:1/-1;justify-self:start}
  .icon-item{padding:22px 18px;gap:14px}
  .icon-item p{font-size:14px}
}
@media (max-width:960px){
  /* Topbar collapses to ONE tidy row on mobile: phone (tap-to-call) on the left,
     language switch on the right, filling the row so there are no empty corners.
     Sister-site links (.lv/.lt) are dropped here — they remain in the footer — and
     the phone number is shown (not just the icon) with larger, tappable text.
     Client 2026-09-18. */
  .topbar .wrap{gap:0 12px;min-height:46px}
  .sister{display:none}
  /* flex-wrap is a zoom safety net: one row whenever it fits (the chosen look);
     at 175-200% browser zoom (~200-280px layout) the language links wrap under
     the phone instead of pushing the page into horizontal scroll. */
  .topbar-right{margin-left:0;flex:1 1 auto;flex-wrap:wrap;justify-content:space-between;gap:0 12px}
  .lang{flex:0 1 auto;flex-wrap:wrap;margin-left:auto}
  .top-phone{font-size:14px}
  .top-phone svg{width:16px;height:16px}
  .lang a{padding:0 8px;font-size:14px}
  .lang a[aria-current]::after{left:8px;right:8px}
  /* side padding matches the topbar's 20px: without it the logo, menu button
     and search field touch the screen edges on phones */
  .header .wrap{flex-wrap:wrap;gap:12px 16px;padding:10px 20px 12px}
  .logo-svg{height:64px}
  .header-cta{display:none}
  .menu-btn{display:block;margin-left:auto}
  .hsearch{order:3;flex:1 1 100%;max-width:none;height:44px}
  .navbar{display:none}
  .navbar.open{display:block;position:absolute;left:0;right:0;z-index:20;border-top:0}
  .nav{flex-direction:column;align-items:stretch;gap:0;padding:6px 0 8px}
  .nav a,.nav li:first-child a{padding:0 20px;line-height:46px}
  .nav a::after,.nav li:first-child a::after{display:none}
  .nav a[aria-current]{background:#fff}
  .hero{min-height:0;display:block}
  .hero-slide{background-position:center 70%}
  /* narrow: text spans the full width, so the scrim must be uniform, not left-weighted */
  .hero::before{background:linear-gradient(180deg,rgba(14,17,20,.8) 0%,rgba(14,17,20,.74) 70%,rgba(14,17,20,.55) 100%)}
  .hero .wrap{padding:48px 20px 52px}
  /* The strip is inline-block (shrink-to-fit): a single long compound word
     ("Toiduainetetööstuse") sets its min-content wider than a zoomed viewport
     and the red box overflows. Cap it and let the word break when it must. */
  .strip{padding:0;max-width:100%;box-sizing:border-box}
  .strip h1{font-size:26px;overflow-wrap:anywhere;hyphens:auto}
  .hero-lead{font-size:16px}
  .icons-box{grid-template-columns:1fr}
  .icons{margin-top:0}
  .icon-item{padding:16px 18px;border-left:0;border-top:1px solid var(--line);gap:16px}
  .icon-item:first-child{border-top:0}
  .icon-item svg{width:56px;height:44px}
  .cols{grid-template-columns:1fr;gap:36px}
  /* Grid items default to min-width:auto, so a wide inner grid (subcategory
     tiles) refuses to shrink and blows the 1fr column past the viewport (~6px
     of horizontal scroll). min-width:0 lets the column shrink to fit. */
  .cols>*{min-width:0}
  /* Category box collapses to a compact, button-like bar on mobile; the list is
     hidden until the bar is tapped (JS toggles .catbox.open). Smaller than the
     desktop 78px bar so it reads as a control, not a section header. */
  .catbox-head{height:52px;font-size:17px;gap:12px;cursor:pointer;border-radius:4px}
  .catbox-head .catbox-burger{width:24px;height:16px}
  .catbox-chevron{display:block}
  .catbox.open .catbox-head{border-radius:4px 4px 0 0}
  .catbox.open .catbox-chevron{transform:rotate(180deg)}
  .catbox-list{display:none}
  .catbox.open .catbox-list{display:block}
  .prod-grid{grid-template-columns:1fr 1fr;gap:12px}
  .foot-grid{grid-template-columns:1fr;gap:26px}
}
@media (max-width:480px){
  .prod-grid{grid-template-columns:1fr}
  .people li{grid-template-columns:1fr}
  /* buttons may wrap onto two lines instead of overflowing when zoomed */
  .hero-actions .btn{flex:1 1 100%;justify-content:center;white-space:normal;height:auto;min-height:44px;padding:10px 16px;text-align:center}
  /* long product names ("vaakumpakkemasin") must not widen the 1fr card */
  .prod{min-width:0}
  .prod h3,.prod-cat{overflow-wrap:anywhere}
}

/* Task 10 carry-forward (single-product page is not in the home mockup): stack the 2-col product grid on mobile, matching the .cols stacking convention above */
@media (max-width:960px){
  .prod-page-grid{grid-template-columns:1fr;gap:28px}
}
@media (max-width:620px){
  .pi-grid{grid-template-columns:1fr}
  .prod-inquiry{padding:26px 22px 30px}
}

/* Legacy content articles (e.g. Partnerid) carry fixed-width layout TABLES from
   the old site — a `<table style="width:1143px">` forces the whole page into
   horizontal scroll on a phone. On mobile, neutralise the fixed widths and stack
   the cells so each item (partner logo) sits on its own full-width row and the
   table can never exceed the viewport. */
@media (max-width:960px){
  .item-page table{width:100%!important;max-width:100%;height:auto!important;table-layout:auto}
  .item-page table tbody,
  .item-page table tr,
  .item-page table td,
  .item-page table th{display:block;width:100%!important;height:auto!important}
  .item-page table img{height:auto}
}

/* ==========================================================================
   Zoom / very-narrow reflow (≤340px CSS width).
   A visually impaired user on a ~400px phone at 175-200% browser zoom gets a
   200-230px layout viewport (WCAG 1.4.10 reflow target is 320px). Every rule
   here only REFLOWS — nothing is hidden and nothing is scaled down — so the
   zoomed text stays readable and the page never scrolls sideways. Ordinary
   360px+ phones at 100% zoom never match this query.
   ========================================================================== */
@media (max-width:340px){
  body{overflow-wrap:anywhere;hyphens:auto}
  .wrap{padding:0 14px}
  .hero .wrap{padding:36px 14px 40px}
  /* header: the logo shrinks to the space left beside the menu button so both
     share one row at any width (the inline SVG has a viewBox, so it scales) */
  .header .wrap{gap:10px 12px;padding:10px 14px 12px}
  /* flex-basis 0, not auto: with auto the logo's intrinsic width (141px at
     56px tall) is what flex-wrap measures, so the menu button wraps to its own
     row before the logo ever shrinks */
  .logo{flex:1 1 0;min-width:0;max-width:220px}
  .logo-svg{height:auto;width:100%;max-height:56px}
  .hsearch button{padding:0 14px}
  .lang a{padding:0 6px}
  .lang a[aria-current]::after{left:6px;right:6px}
  .btn{white-space:normal;height:auto;min-height:44px;padding:10px 16px;text-align:center}
  .strip{padding:0}
  .strip h1{font-size:22px}
  /* service cards: icon above the text so the text gets the full width */
  .icon-item{flex-direction:column;align-items:flex-start;gap:10px;padding:16px 14px}
  .icon-item>div{min-width:0}
  .featured-head{flex-wrap:wrap;gap:6px 16px}
  .eshop-box{grid-template-columns:1fr;gap:16px;padding:18px 16px}
  .eshop-box img{max-width:100%;height:auto;max-height:64px}
  /* category box: the title wraps instead of being clipped */
  .catbox-head{height:auto;min-height:48px;padding:10px 14px;font-size:16px;line-height:1.25;gap:10px}
  .catbox-head .catbox-title{min-width:0;white-space:normal}
  .catbox .menucategories a,.catbox .menucategories>li:first-child>a{padding-left:14px}
  .catbox .menucategories .level1 a{padding-left:26px}
  .catbox .menucategories .level2 a{padding-left:38px}
  .catbox .menucategories .level3 a{padding-left:50px}
  /* (subcategory tiles for this width: see the ≤340px block at the end of the
     file — it must follow the ≤600px tile rules to win on source order) */
  /* product cards and the spec table: label above value */
  .prod-body{padding:12px 14px 14px}
  .spec-table,.spec-table tbody,.spec-table tr,.spec-table .djc_label,.spec-table .djc_value{display:block;width:auto}
  .spec-table .djc_label{padding:10px 0 2px}
  .spec-table .djc_value{padding:0 0 10px}
  /* reCAPTCHA is a fixed 304px iframe: let it scroll inside its own field
     rather than shrinking it (a scaled-down checkbox would defeat the zoom) */
  .prod-inquiry{padding:22px 14px 26px}
  .prod-inquiry .g-recaptcha{max-width:100%;overflow-x:auto}
  .foot-bottom{flex-direction:column;align-items:flex-start}
}

/* Hide the Falang free-version credit line ("FaLang translation system by Faboba").
   Falang injects the anchor with an inline `style="...visibility: visible;..."`,
   so !important is required to override that inline declaration from this stylesheet. */
a[href*="faboba.com"]{visibility:hidden!important;position:absolute!important;z-index:-9999!important}

/* DJ-Catalog2 catalog sort bar (.djc_order*) removed per client — the render
   block in items/default.php is suppressed, so no matching DOM remains here. */

/* ── Catalog pagination bar (foodtech) ─────────────────────────────────────
   getPagesLinks() already emits Bootstrap-5 .pagination markup (Start/Prev/
   pages/Next/End) wrapped in .djc_pagination. Stock CSS left the <li> stacked
   and the arrow icon-font glyphs blank (Joomla icomoon font not loaded here).
   Render it as a modern horizontal pill bar; arrows use CSS content (« ‹ › »)
   in the inherited font so they show regardless of the icon font. ── */
.djc_pagination_set{margin-top:34px}
.djc_pagination{border:0;background:none;padding:0;margin:0}
.djc_pagination .pagination__wrapper{display:flex;justify-content:center}
.djc_pagination .pagination{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin:0;padding:0;list-style:none}
.djc_pagination .page-item{margin:0}
.djc_pagination .page-link{
	display:flex;align-items:center;justify-content:center;
	min-width:40px;height:40px;padding:0 13px;box-sizing:border-box;
	border:1px solid var(--line);border-radius:6px;background:#fff;
	color:var(--ink);font-size:15px;line-height:1;text-decoration:none;
	transition:background .15s,border-color .15s,color .15s}
.djc_pagination .page-link:hover{border-color:var(--red);color:var(--red);background:#fff}
.djc_pagination .active .page-link{background:var(--red);border-color:var(--red);color:#fff}
.djc_pagination .disabled .page-link{color:var(--ink-3);background:#f6f6f6;border-color:var(--line);cursor:default;opacity:.6}
/* Arrow glyphs: override the icomoon codepoints with plain characters in the
   inherited font, so Start/Prev/Next/End render even without the icon font. */
.djc_pagination .page-link [class^="icon-angle"]{display:inline-block;font-style:normal;line-height:1}
.djc_pagination .icon-angle-double-left::before{content:"\00AB";font-family:inherit}
.djc_pagination .icon-angle-left::before{content:"\2039";font-family:inherit}
.djc_pagination .icon-angle-right::before{content:"\203A";font-family:inherit}
.djc_pagination .icon-angle-double-right::before{content:"\00BB";font-family:inherit}

/* ── JoomGallery image grid (foodtech) ─────────────────────────────────────
   Image titles are disabled (jg_category_view_images_show_title=0, plus no
   description/date/author/tags), so grids/images.php still renders an empty
   .jg-image-caption band (~14px) under every thumbnail. Remove that leftover
   gap so nothing shows under the images. (.jg-image-caption-hover, which wraps
   the clickable lightGallery link, is a different class and is NOT affected.) */
.jg-category .jg-image-caption{display:none}

/* Uniform 4:3 landscape thumbnails (album tiles + image grid). Stock makes each
   cell a 1:1 box (a{padding-bottom:100%}) and centres the image object-fit:contain,
   capped at its 190px natural size — so the mostly-landscape event photos float
   letterboxed inside an oversized square, giving a loose, uneven grid. Instead
   fill a 4:3 box edge-to-edge (cover), which crops landscape photos minimally.
   The extra grid class (.jg-subcategories/.jg-category) out-specifies the stock
   columns-* rule regardless of stylesheet load order. */
.jg-images.jg-subcategories[class*=" columns-"] > .jg-image > .jg-image-thumbnail > a,
.jg-images.jg-category[class*=" columns-"] > .jg-image > .jg-image-thumbnail > .jg-image-caption-hover > a{
	padding-bottom:75%; /* 4:3 aspect box */
}
.jg-images.jg-subcategories[class*=" columns-"] > .jg-image > .jg-image-thumbnail > a > img,
.jg-images.jg-category[class*=" columns-"] > .jg-image > .jg-image-thumbnail > .jg-image-caption-hover > a > img{
	position:absolute;inset:0;
	width:100%;height:100%;
	max-width:none;max-height:none;
	transform:none;
	object-fit:cover;
}

/* --- product-list heading: air below the "Tooted" page heading before the
   grid / product list (client: "pealkirja all rohkem õhku"). The theme sets
   margin/padding to 0, so heading→content gap was 0. --- */
#djcatalog .djc_heading_set { margin-bottom: 32px; }

/* ==========================================================================
   Subcategory grid — round icons + name, responsive (foodtech)
   Restores the old site's circular category tiles, modernized:
   - CSS Grid (flattens the component's fixed rows-of-5 via display:contents)
     so tiles wrap uniformly and stay aligned at every width.
   - object-fit:cover guarantees a true circle (source images are 200x150 /
     150x200, so bare border-radius:50% would ellipse them).
   - Child categories (subcategory_showchildren=1) are hidden by default and
     revealed as a hover popup, as on the old site; hidden on touch widths.
   ========================================================================== */
#djcatalog .djc_subcategories { padding: 0 0 24px; }

#djcatalog .djc_subcategories_grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px 4px;
}
/* Flatten the component's per-row wrappers so all tiles share one grid. */
#djcatalog .djc_subcategories_grid .djc_subcategory_row { display: contents; }
/* Neutralize the theme's .djc_clearfix:after — with display:contents on the
   rows, each row's ::after (plus the grid's own) is hoisted into the grid as
   an empty phantom cell, producing a gap after every row-of-5. */
#djcatalog .djc_subcategories_grid::after,
#djcatalog .djc_subcategories_grid .djc_subcategory_row::after { content: none; }

#djcatalog .djc_subcategories_grid .djc_subcategory {
    --icon: 124px;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    box-sizing: border-box;
    padding: 16px 10px 20px;
    position: relative;
    text-align: center;
}
/* Lift the hovered tile so its scaled icon, shadow and children popup render
   above the neighbours instead of being covered by them. */
#djcatalog .djc_subcategories_grid .djc_subcategory:hover { z-index: 2; }

/* Round icon — overflow:visible undoes the theme's overflow:hidden on
   .djc_image, which would otherwise clip the hover zoom and the shadow. */
#djcatalog .djc_subcategories_grid .djc_subcategory .djc_image {
    display: inline-block;
    line-height: 0;
    margin: 0;
    overflow: visible;
}
#djcatalog .djc_subcategories_grid .djc_subcategory img {
    /* Square via aspect-ratio, not a fixed height: the global img{max-width:100%}
       reset caps the WIDTH when a grid column is narrower than --icon (narrow
       viewport + sidebar), and a fixed height would then stay put and ellipse
       the circle. aspect-ratio:1 + height:auto lets height follow the capped
       width so the icon shrinks as a true circle at every width. */
    width: var(--icon);
    max-width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
    border-radius: 50%;
    padding: 0;
    border: 1px solid var(--line);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    background: #fff;
    transition: transform .18s ease, box-shadow .18s ease;
}
#djcatalog .djc_subcategories_grid .djc_subcategory:hover img {
    transform: scale(1.06);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .16);
}

/* Name */
#djcatalog .djc_subcategories_grid .djc_subcategory .djc_title {
    margin: 12px 0 0;
    min-height: 2.7em;
}
#djcatalog .djc_subcategories_grid .djc_subcategory h3 {
    margin: 0;
    padding: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
}
#djcatalog .djc_subcategories_grid .djc_subcategory a {
    color: var(--ink-dark);
    text-decoration: none;
    display: block;
}
#djcatalog .djc_subcategories_grid .djc_subcategory:hover .djc_title a { color: var(--red); }

/* Child categories: hidden, shown as a popup on hover. Anchored just below the
   icon (overlaying the name, as the old site did) so it stays visually tied to
   the hovered tile instead of dropping into the row beneath it. */
#djcatalog .djc_subcategories_grid .djc_subcategory .djc_subcategory_children {
    position: absolute;
    /* Centered on the tile and wider than it, so more children fit per line
       (as on the old site) instead of wrapping two-across. */
    left: 50%;
    width: 320px;
    max-width: calc(100vw - 32px);
    top: calc(16px + var(--icon) + 2px);
    z-index: 5;
    margin: 0;
    padding: 12px 16px;
    text-align: left;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
    visibility: hidden;
    opacity: 0;
    transform: translate(-50%, 4px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}
#djcatalog .djc_subcategories_grid .djc_subcategory:hover .djc_subcategory_children {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, 0);
}
#djcatalog .djc_subcategories_grid .djc_subcategory .djc_subcategory_children a {
    display: inline;
    padding: 0 4px 0 0;
    font-size: 13px;
    line-height: 1.7;
    color: var(--ink-2);
}
#djcatalog .djc_subcategories_grid .djc_subcategory .djc_subcategory_children a:hover {
    color: var(--red);
    text-decoration: underline;
}

@media (max-width: 1200px) {
    #djcatalog .djc_subcategories_grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
    #djcatalog .djc_subcategories_grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
    #djcatalog .djc_subcategories_grid { grid-template-columns: repeat(2, 1fr); }
    #djcatalog .djc_subcategories_grid .djc_subcategory { padding: 14px 8px 16px; --icon: 108px; min-width: 0; }
    /* Long Estonian compound names (e.g. "Kondiitritööstuse") set a wide
       min-content that expands the 1fr track past the viewport; break them so
       the two columns fit within the phone width. */
    #djcatalog .djc_subcategories_grid .djc_subcategory .djc_title { min-height: 0; overflow-wrap: break-word; hyphens: auto; }
    /* Touch: no hover, so keep the popup out of the way entirely. */
    #djcatalog .djc_subcategories_grid .djc_subcategory .djc_subcategory_children { display: none; }
}
/* Zoom reflow (≤340px layout = phone at 175-200% browser zoom): one tile per
   row as icon + full-width name, so long compound names ("Kondiitritööstuse
   seadmed") read as whole words instead of one syllable per line in two ~80px
   columns. Placed after the ≤600px block on purpose: same specificity, and the
   later rule must win. */
@media (max-width: 340px) {
    #djcatalog .djc_subcategories_grid { grid-template-columns: 1fr; gap: 0; }
    #djcatalog .djc_subcategories_grid .djc_subcategory {
        --icon: 56px;
        padding: 10px 0;
        text-align: left;
        border-top: 1px solid var(--line);
    }
    #djcatalog .djc_subcategories_grid .djc_subcategory_row_first_0 .djc_subcategory_col_first { border-top: 0; }
    /* .djc_subcategory_in is the element that directly holds the image and the
       title (tile > _bg > _in), so the row layout goes there */
    #djcatalog .djc_subcategories_grid .djc_subcategory_in { display: flex; align-items: center; gap: 12px; padding: 0; }
    #djcatalog .djc_subcategories_grid .djc_subcategory .djc_image { flex: none; }
    /* the name takes all remaining width (the theme's 20px side padding and
       centered title would otherwise leave it a ~48px column) */
    #djcatalog .djc_subcategories_grid .djc_subcategory .djc_title { flex: 1 1 0; margin: 0; min-width: 0; text-align: left; }
}

/* ===== Contact page (prefix .ct-): hero, overlapping info+form card, team band, map band ===== */
.ct-hero{position:relative;background:#2a2f36 url("../images/hero-3-m.webp") center 45%/cover no-repeat;color:#fff}
/* same left-weighted scrim as the home hero, so all heroes read as one family */
.ct-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,17,20,.86) 0%,rgba(14,17,20,.72) 38%,rgba(14,17,20,.28) 68%,rgba(14,17,20,0) 100%)}
@media (max-width:960px){
  .ct-hero::before{background:linear-gradient(180deg,rgba(14,17,20,.8) 0%,rgba(14,17,20,.74) 70%,rgba(14,17,20,.55) 100%)}
}
.ct-hero .wrap{position:relative;padding:18px 20px 150px;text-align:left}
.ct-hero .crumbs{padding:0 0 36px;text-align:left;color:rgba(255,255,255,.75)}
.ct-hero .crumbs a{color:rgba(255,255,255,.75)}
.ct-hero .crumbs a:hover{color:#fff}
.ct-hero .crumbs li+li::before{color:rgba(255,255,255,.45)}
.ct-hero .crumbs li[aria-current] span{color:#fff}
.ct-strip{display:block;margin:0;padding:0;max-width:720px}
.ct-strip h1,.ct-strip .ct-kicker{font-size:36px;font-weight:400;line-height:1.2;color:#fff;margin:0}
.ct-lead{margin:16px 0 0;max-width:46ch;font-size:19px;font-weight:400;line-height:1.55;color:rgba(255,255,255,.92)}

/* --- signature: white card overlapping the hero --- */
.ct-card{position:relative;z-index:2;margin-top:-96px;display:grid;grid-template-columns:1fr 1fr;background:#fff;border:1px solid var(--line);box-shadow:0 10px 30px rgba(20,24,30,.08)}
.ct-info{padding:40px 44px 36px;background:#fbfbfb;border-right:1px solid var(--line)}
.ct-formwrap{padding:40px 44px 40px;display:flex;flex-direction:column}
.ct-card h2{font-size:24px;font-weight:400;color:var(--ink-dark);line-height:1.2}
.ct-sub{margin:8px 0 0;font-size:15px;color:var(--ink-2)}

.ct-orgs{margin-top:26px}
.ct-org+.ct-org{margin-top:30px;padding-top:26px;border-top:1px solid var(--line)}
@media (min-width:1241px){
  .ct-orgs{display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
  .ct-org+.ct-org{margin-top:0;padding-top:0;border-top:0}
}
.ct-org h3{font-size:17px;font-weight:500;color:var(--ink-dark)}
.ct-org__tag{margin:3px 0 6px;font-size:13px;color:var(--ink-2)}
.ct-rows{display:grid;gap:4px}
.ct-row{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start;padding:8px 0}
.ct-ico{width:40px;height:40px;border-radius:50%;background:#fdecee;display:flex;align-items:center;justify-content:center;flex:none}
.ct-ico svg{width:20px;height:20px;fill:var(--red)}
.ct-k{display:block;font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin:2px 0 3px}
.ct-v{display:block;font-size:15px;line-height:1.5;color:var(--ink)}
.ct-v a{color:var(--ink);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px}
.ct-v a:hover{color:var(--red);text-decoration-color:var(--red)}
.ct-v span{display:block}
.ct-legal{margin:14px 0 0 54px;font-size:13px;color:var(--ink-2)}

/* --- form --- */
.ct-form{margin-top:24px;flex:1;display:grid;gap:18px;grid-template-rows:auto auto 1fr auto auto}
.ct-form .ct-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ct-field{display:grid;gap:7px}
.ct-grow{grid-template-rows:auto 1fr}
.ct-grow textarea{height:100%}
.ct-field label{font-size:14px;font-weight:500;color:var(--ink-dark)}
.ct-field label .star{color:var(--red)}
.ct-field input,.ct-field textarea{width:100%;box-sizing:border-box;font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1px solid #c9c9c9;border-radius:3px;padding:12px 14px;min-height:48px}
.ct-field textarea{min-height:150px;resize:vertical}
.ct-field input:focus,.ct-field textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px rgba(226,11,29,.14)}
.ct-field altcha-widget{display:block}
/* form.validate client-side error message + invalid field styling (contact + product inquiry) */
.ct-field label .form-control-feedback,.pi-field label .form-control-feedback{display:block;margin-top:6px;font-size:13px;font-weight:400;line-height:1.35;color:var(--red)}
.ct-field input.invalid,.ct-field textarea.invalid,.pi-field input.invalid,.pi-field textarea.invalid{border-color:var(--red);box-shadow:0 0 0 3px rgba(226,11,29,.12)}
.ct-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;margin-top:4px}
.ct-actions .btn{height:auto;min-height:50px;padding:0 34px;font-size:16px}
.ct-req{font-size:13px;color:var(--ink-2)}
.ct-req .star{color:var(--red)}

/* --- team band --- */
.ct-team{background:var(--grey);margin-top:56px;padding:48px 0 56px}
.ct-team .rule-title{margin-bottom:32px}
.ct-team .rule-title h2{margin:0;font:inherit;color:inherit}
.ct-people{display:flex;flex-wrap:wrap;justify-content:center;gap:20px}
.ct-person{flex:1 1 220px;max-width:320px;background:#fff;border:1px solid var(--line);border-top:3px solid var(--red);padding:22px 18px 20px}
.ct-person h3{font-size:17px;font-weight:500;color:var(--ink-dark)}
.ct-person__role{margin:3px 0 14px;font-size:14px;color:var(--ink-2);line-height:1.4}
.ct-person a{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:14px;color:var(--ink);overflow-wrap:anywhere}
.ct-person a svg{width:16px;height:16px;fill:var(--ink-3);flex:none}
.ct-person a:hover{color:var(--red)}
.ct-person a:hover svg{fill:var(--red)}

/* --- map band --- */
.ct-map{position:relative;background:#e8ecef}
.ct-map #ft-map{height:460px}
.ct-map .leaflet-top.leaflet-left{left:auto;right:0}
.ct-map__card{position:absolute;z-index:500;top:36px;left:max(20px,calc((100% - var(--wrap))/2 + 20px));width:340px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 30px rgba(20,24,30,.12);padding:26px 28px 28px}
.ct-map__card h2{font-size:20px;font-weight:500;color:var(--ink-dark)}
.ct-map__card address{font-style:normal;margin:6px 0 0;font-size:15px;line-height:1.5;color:var(--ink)}
.ct-map__card p{margin:12px 0 0;font-size:14px;color:var(--ink-2);line-height:1.5}
.ct-map__card .btn{margin-top:18px}

/* --- focus (red: blue site default is 2.9:1 on white) --- */
.ct-card :focus-visible,.ct-team :focus-visible,.ct-map :focus-visible,.ct-hero :focus-visible{outline:3px solid var(--red);outline-offset:2px}
.ct-hero :focus-visible{outline-color:#fff}

/* --- reflow --- */
@media (max-width:1300px){
  .ct-person{flex-basis:calc(33.333% - 14px)}
}
@media (max-width:1024px){
  .ct-card{grid-template-columns:1fr}
  .ct-info{border-right:0;border-bottom:1px solid var(--line)}
  .ct-form{grid-template-rows:none}
}
@media (max-width:720px){
  .ct-hero .wrap{padding-bottom:110px}
  .ct-hero .crumbs{padding-bottom:28px}
  .ct-strip{padding:0}
  .ct-strip h1,.ct-strip .ct-kicker{font-size:26px;overflow-wrap:anywhere;hyphens:auto}
  .ct-lead{font-size:17px}
  .ct-card{margin-top:-72px}
  .ct-info,.ct-formwrap{padding:28px 24px}
  .ct-form .ct-2{grid-template-columns:1fr}
  .ct-actions .btn{width:100%;justify-content:center}
  .ct-team{margin-top:40px;padding:40px 0 44px}
  .ct-person{flex-basis:calc(50% - 10px)}
  .ct-map__card{position:static;width:auto;margin:0;border:0;border-bottom:1px solid var(--line);box-shadow:none;padding:24px 20px}
  .ct-map #ft-map{height:340px}
}
@media (max-width:480px){
  .ct-info,.ct-formwrap{padding:24px 18px}
  .ct-row{grid-template-columns:36px 1fr;gap:12px}
  .ct-ico{width:36px;height:36px}
  .ct-legal{margin-left:48px}
  .ct-person{flex-basis:100%;max-width:none}
}
@media (max-width:340px){
  .ct-hero .wrap{padding-left:14px;padding-right:14px}
  .ct-strip h1,.ct-strip .ct-kicker{font-size:22px}
  .ct-info,.ct-formwrap{padding:20px 14px}
  .ct-map__card{padding:20px 14px}
}

/* --- shared inner-page chrome (Task 13): hero band + overlapping content card + logo grid.
   Reuses the contact idiom (.ct-hero/.ct-strip/.ct-lead). index.php renders the hero and adds
   .main--hero + .ct-panel for any menu item that sets a Page Heading (menu-driven opt-in).
   The hero background comes from the .ct-hero rule above. --- */
.ct-hero--page .wrap{padding-bottom:140px}
.main.main--hero{padding:0 0 56px}
.main--hero .cols{margin-top:-96px;position:relative;z-index:2}
.main--hero aside .catbox{background:#fff;border:1px solid var(--line);box-shadow:0 10px 30px rgba(20,24,30,.08)}
.ct-panel{background:#fff;border:1px solid var(--line);box-shadow:0 10px 30px rgba(20,24,30,.08);padding:34px 40px 40px}
/* the hero already carries the breadcrumb; suppress the main-top mod_breadcrumbs copy inside the panel on hero pages (avoids a duplicate nav landmark for screen readers) */
.main--hero .ct-panel .crumbs{display:none}
.panel-head{margin:0 0 24px}
.panel-head h2{font-size:24px;font-weight:400;color:var(--ink-dark)}
.panel-sub{margin:6px 0 0;font-size:15px;color:var(--ink-2)}
.logo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.logo-grid a{display:flex;align-items:center;justify-content:center;height:96px;padding:16px;background:#fff;border:1px solid var(--line);border-radius:4px;transition:border-color .15s ease,box-shadow .15s ease}
.logo-grid a:hover{border-color:#cfd4d9;box-shadow:0 4px 14px rgba(20,24,30,.08)}
.logo-grid img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.main--hero :focus-visible{outline:3px solid var(--red);outline-offset:2px}
@media (max-width:1024px){.main--hero .cols{margin-top:-88px}}
@media (max-width:960px){
  .ct-hero--page .wrap{padding-bottom:112px}
  .main--hero .cols{margin-top:-56px;gap:22px}
  .main--hero aside .catbox{border:0;box-shadow:none;background:transparent}
}
@media (max-width:720px){
  .ct-hero--page .wrap{padding-bottom:96px}
  .main--hero .cols{margin-top:-48px}
  .ct-panel{padding:26px 22px 30px}
}
@media (max-width:480px){
  .ct-panel{padding:22px 16px 26px}
  .logo-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
  .logo-grid a{height:82px;padding:12px}
}
@media (max-width:340px){.logo-grid{grid-template-columns:1fr 1fr}}

/* DJ-Catalog2 default theme (themes/default/js/theme.js) appends an add-to-cart
   modal #djc_cart_popup to <body> with the Bootstrap 2/3 class .hide, which
   Bootstrap 5 (Joomla 6) does not recognise. The empty modal shell then renders
   in normal flow as a blank white strip at the page bottom. Restore BS5's
   hidden-until-opened behaviour — no component core edit; the popup still opens
   when its JS adds .show. */
#djc_cart_popup.modal:not(.show){display:none}
#djc_cart_popup_loader{display:none}

/* ============================================================
   Sticky chrome (desktop, >960px only)
   1) Minimal sticky bar on scroll: a dedicated one-line bar
      (.ministicky) with main nav + icon-only search + language +
      CTA that slides in once the user scrolls past the tall header.
      The logo is deliberately NOT included. nav.js clones the menu,
      search form and language switcher into it (modules stay the
      single source of truth), toggles body.has-stickyhead past a
      threshold, and writes the bar height into --sticky-head-h.
   2) Sticky category sidebar on long pages: the .catbox column
      pins below the sticky bar; a long list scrolls inside itself.
   Desktop-only by design: at ~200% browser zoom the layout is
   already at the <=960px mobile breakpoint, so this never crowds
   the zoom user. Motion is gated on prefers-reduced-motion and the
   bar stands down on very short viewports.
   ============================================================ */
:root{--sticky-head-h:0px}

.ministicky{display:none}

@media (min-width:961px){
  /* the bar is a fixed overlay that was never in flow, so there is no
     spacer and no content jump — it simply reveals once the real header
     (incl. the navbar) has scrolled away, overlaying a thin top strip. */
  .ministicky{position:fixed;top:0;left:0;right:0;z-index:120;background:#fff;box-shadow:0 2px 14px rgba(20,24,30,.12)}
  body.has-stickyhead .ministicky{display:block}
  .ministicky .wrap{display:flex;align-items:center;gap:24px;padding:6px 20px}

  /* main nav cloned in — flows inline, no grey band */
  .ms-nav{flex:1 1 auto;min-width:0}
  .ms-nav .nav{display:flex;flex-wrap:wrap;gap:2px;margin:0;padding:0;list-style:none;background:none}
  .ms-nav .nav a{display:block;line-height:40px;padding:0 14px;color:var(--ink);text-decoration:none;font-weight:500;border-radius:4px}
  .ms-nav .nav a:hover,.ms-nav .nav .current>a{color:var(--red)}

  .ms-tools{display:flex;align-items:center;gap:8px;flex:none}

  /* icon buttons (search, language) */
  .ms-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);cursor:pointer}
  .ms-icon svg{width:20px;height:20px}
  .ms-icon:hover,.ms-icon[aria-expanded="true"]{border-color:var(--red);color:var(--red)}

  /* search: icon-only, expands into a small panel on click */
  .ms-search{position:relative;display:flex;align-items:center}
  .ms-search-panel{position:absolute;top:calc(100% + 8px);right:0;width:320px;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(20,24,30,.14);padding:10px;z-index:5}
  .ms-search-panel .hsearch{display:flex;width:100%;max-width:none;height:42px;margin:0}

  /* language: icon-only, opens a dropdown on click */
  .ms-lang{position:relative}
  .ms-lang-panel{position:absolute;top:calc(100% + 8px);right:0;min-width:120px;background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(20,24,30,.14);padding:6px;z-index:5}
  .ms-lang-panel .lang{display:flex;flex-direction:column;gap:2px}
  .ms-lang-panel .lang .sep{display:none}
  .ms-lang-panel .lang a{display:block;padding:8px 12px;border-radius:4px;color:var(--ink);text-decoration:none;font-weight:500}
  .ms-lang-panel .lang a:hover,.ms-lang-panel .lang a[aria-current]{background:var(--grey);color:var(--red)}

  .ms-cta{flex:none}

  /* sticky category sidebar — .cols already sets align-items:start */
  .cols>aside{position:sticky;top:calc(var(--sticky-head-h) + 20px);align-self:start;max-height:calc(100vh - var(--sticky-head-h) - 40px);overflow:auto;scrollbar-width:thin}
}

@media (min-width:961px) and (prefers-reduced-motion:no-preference){
  body.has-stickyhead .ministicky{animation:ft-slidedown .22s ease-out}
  @keyframes ft-slidedown{from{transform:translateY(-100%)}to{transform:translateY(0)}}
}

/* short viewports: a fixed bar would eat too much of the screen */
@media (min-width:961px) and (max-height:520px){
  body.has-stickyhead .ministicky{display:none}
  .cols>aside{position:static;max-height:none;overflow:visible}
}