/* =========================================
   DTECH Header — Styles
   ========================================= */

/* Scoped reset */
.dth-fixed-wrapper *,.dth-fixed-wrapper *::before,.dth-fixed-wrapper *::after,
.dth-drawer *,.dth-bottom-bar *,.dth-search-ov *{margin:0;padding:0;box-sizing:border-box}
.dth-fixed-wrapper,.dth-drawer,.dth-bottom-bar,.dth-search-ov{
    font-family:var(--dtech-geo);-webkit-font-smoothing:antialiased;line-height:1.4}

/* iOS: prevent double-tap zoom on all interactive elements */
.dth-fixed-wrapper button,.dth-fixed-wrapper a,.dth-fixed-wrapper input,
.dth-bottom-bar button,.dth-bottom-bar a,
.dth-drawer button,.dth-drawer a,
.dth-search-ov button,.dth-search-ov input{touch-action:manipulation}

/* ===== FIXED WRAPPER — viewport-pinned, ignores Elementor containers ===== */
.dth-fixed-wrapper{
    position:fixed !important;
    top:0;left:0;right:0;
    z-index:99990;
    display:flex;flex-direction:column;
}

/* Spacer — sits in normal flow, pushes Elementor content down */
.dth-spacer{
    display:block;
    /* JS sets exact height; CSS fallback: */
    height:calc(var(--dtech-topbar-h) + var(--dtech-header-h) + var(--dtech-navbar-h));
    flex-shrink:0;
}

/* ===== TOPBAR ===== */
.dth-topbar{height:var(--dtech-topbar-h);background:var(--dtech-black);font-family:var(--dtech-latin);font-size:13px;flex-shrink:0;
    transition:margin-top .3s var(--dtech-ease);overflow:hidden}
.dth-topbar.dth-hidden{margin-top:calc(-1 * var(--dtech-topbar-h))}
.dth-topbar-in{padding:0 48px;height:100%;display:flex;align-items:center;justify-content:space-between;max-width:1600px;margin:0 auto}
.dth-topbar a{color:rgb(255 255 255 / 70%);text-decoration:none;font-weight:500;letter-spacing:.02em;transition:color .2s}
.dth-topbar a:hover{color:rgba(255,255,255,.85)}
.dth-tb-l,.dth-tb-r{display:flex;align-items:center;gap:20px}
.dth-tb-sep{width:1px;height:10px;background:rgba(255,255,255,.1)}
.dth-tb-lang{display:flex;gap:1px;background:rgba(255,255,255,.06);border-radius:4px;padding:2px}
.dth-lang-btn{padding:2px 9px;font-family:var(--dtech-latin);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border:none;background:transparent;color:rgba(255,255,255,.35);cursor:pointer;border-radius:3px;transition:all .2s;text-decoration:none;display:inline-flex;align-items:center;line-height:1}
.dth-lang-btn.active{background:var(--dtech-red);color:#fff}
.dth-lang-btn:not(.active):hover{color:#fff}

/* ===== HEADER ===== */
.dth-header{height:var(--dtech-header-h);background:var(--dtech-dark);flex-shrink:0;transition:box-shadow .3s;position:relative;z-index:2}
.dth-header.shadow{box-shadow:0 2px 24px rgba(0,0,0,.3)}
.dth-hdr-in{padding:0 48px;height:100%;display:flex;align-items:center;gap:36px;max-width:1600px;margin:0 auto}
.dth-logo{flex-shrink:0;display:flex;align-items:center;text-decoration:none;height:56px}
.dth-logo img{height:100% !important;width:auto !important;max-width:none !important;max-height:100% !important;object-fit:contain;display:block}
.dth-search{flex:1;position:relative}
.dth-search input{width:100%;height:44px;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.08);border-radius:8px;padding:0 48px 0 18px;font-family:var(--dtech-geo);font-size:13.5px;color:#fff;outline:none;transition:all .2s var(--dtech-ease)}
.dth-search input::placeholder{color:rgba(255,255,255,.28);font-size:12.5px}
.dth-search input:focus{border-color:var(--dtech-red);background:rgba(255,255,255,.12)}
.dth-search-btn{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:34px;height:34px;background:var(--dtech-red);border:none;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.dth-search-btn:hover{background:var(--dtech-red-h)}
.dth-search-btn svg{width:15px;height:15px;color:#fff}
.dth-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.dth-act{position:relative;width:42px;height:42px;background:transparent;border:1px solid rgba(255,255,255,.08);border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;color:rgba(255,255,255,.5);text-decoration:none}
.dth-act:hover{background:rgba(255,255,255,.08);color:#fff}
.dth-act svg{width:18px;height:18px}
.dth-badge{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;background:var(--dtech-red);border-radius:8px;border:2px solid var(--dtech-dark);font-family:var(--dtech-mono);font-size:9px;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center;padding:0 3px}
.dth-act-cart{width:auto;padding:0 14px;gap:7px;background:var(--dtech-red);border-color:var(--dtech-red);color:#fff}
.dth-act-cart:hover{background:var(--dtech-red-h);color:#fff}
.dth-act-cart span{font-family:var(--dtech-mono);font-size:12px;font-weight:600}

/* Mobile */
.dth-mob-act{display:none;align-items:center;gap:2px}
.dth-mob-btn{width:40px;height:40px;background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.55);border-radius:8px;transition:all .15s}
.dth-mob-btn:active{color:#fff;background:rgba(255,255,255,.06)}
.dth-mob-btn svg{width:20px;height:20px}
.dth-mob-lang{display:flex;gap:1px;background:rgba(255,255,255,.06);border-radius:4px;padding:2px;margin-right:4px}
.dth-mob-lang .dth-lang-btn{font-size:9px;padding:3px 7px}

/* Search overlay */
.dth-search-ov{position:fixed;top:0;left:0;right:0;height:56px;background:var(--dtech-dark);z-index:99994;display:flex;align-items:center;padding:0 12px;gap:8px;transform:translateY(-100%);transition:transform .25s var(--dtech-ease)}
.dth-search-ov.on{transform:translateY(0)}
.dth-search-ov input{flex:1;height:40px;background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.12);border-radius:8px;padding:0 14px;font-family:var(--dtech-geo);font-size:14px;color:#fff;outline:none}
.dth-search-ov input:focus{border-color:var(--dtech-red)}
.dth-search-ov input::placeholder{color:rgba(255,255,255,.3)}
.dth-search-ov-btn{width:40px;height:40px;background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.5);flex-shrink:0}
.dth-search-ov-btn svg{width:20px;height:20px}

/* ===== NAVBAR ===== */
.dth-navbar{background:var(--dtech-white);height:var(--dtech-navbar-h);box-shadow:0 1px 0 var(--dtech-g200);position:relative;z-index:1;flex-shrink:0;
    transition:margin-top .3s var(--dtech-ease);overflow:visible}
.dth-navbar.dth-nav-hidden{margin-top:calc(-1 * var(--dtech-navbar-h) - 2px)}
.dth-nav-in{padding:0 48px;height:100%;display:flex;align-items:stretch;max-width:1600px;margin:0 auto}
.dth-cat-btn{display:flex;align-items:center;gap:8px;padding:0 22px;background:var(--dtech-red);border:none;cursor:pointer;font-family:var(--dtech-latin);font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;transition:background .2s;flex-shrink:0}
.dth-cat-btn:hover{background:var(--dtech-red-h)}
.dth-cat-btn svg{width:15px;height:15px}
.dth-cat-btn .dth-chev{width:10px;height:10px;transition:transform .3s var(--dtech-ease)}
.dth-cat-btn.open .dth-chev{transform:rotate(180deg)}
.dth-navs{display:flex;align-items:stretch;flex:1;overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none}
.dth-navs::-webkit-scrollbar{display:none}
.dth-nav-a{display:flex;align-items:center;gap:4px;padding:0 16px;height:100%;font-family:var(--dtech-geo);font-size:13px;font-weight:500;color:var(--dtech-g600);text-decoration:none;transition:color .15s;white-space:nowrap;position:relative}
.dth-nav-a::after{content:'';position:absolute;bottom:0;left:16px;right:16px;height:2px;background:var(--dtech-red);transform:scaleX(0);transition:transform .2s var(--dtech-ease)}
.dth-nav-a:hover{color:var(--dtech-black)}.dth-nav-a:hover::after{transform:scaleX(1)}
.dth-nav-a svg{width:9px;height:9px;color:var(--dtech-g400)}

/* ===== MEGA ===== */
.dth-overlay{position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:99989;opacity:0;pointer-events:none;transition:opacity .3s}
.dth-overlay.on{opacity:1;pointer-events:auto}
.dth-mega{position:absolute;top:100%;left:0;right:0;background:var(--dtech-white);z-index:99999;opacity:0;pointer-events:none;transform:translateY(-4px);transition:all .25s var(--dtech-ease);box-shadow:0 20px 60px rgba(0,0,0,.1)}
.dth-mega.on{opacity:1;pointer-events:auto;transform:translateY(0)}
.dth-mega-wrap{display:flex;min-height:380px}
.dth-mega-side{width:280px;background:var(--dtech-g50);padding:6px 0;flex-shrink:0;overflow-y:auto;max-height:70vh}
.dth-mc{display:flex;align-items:center;gap:12px;padding:14px 20px;cursor:pointer;transition:all .15s;border-left:2px solid transparent;text-decoration:none}
.dth-mc:hover,.dth-mc.on{background:var(--dtech-white);border-left-color:var(--dtech-red)}
.dth-mc-ico{width:32px;height:32px;background:var(--dtech-white);border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dth-mc.on .dth-mc-ico,.dth-mc:hover .dth-mc-ico{background:rgba(185,30,35,.06)}
.dth-mc-ico svg{width:16px;height:16px;color:var(--dtech-g400)}.dth-mc.on .dth-mc-ico svg,.dth-mc:hover .dth-mc-ico svg{color:var(--dtech-red)}
.dth-mc-name{font-size:13px;font-weight:600;color:var(--dtech-g700)}.dth-mc:hover .dth-mc-name,.dth-mc.on .dth-mc-name{color:var(--dtech-black)}
.dth-mc-arr{margin-left:auto;width:12px;height:12px;color:var(--dtech-g300);opacity:0;transform:translateX(-3px);transition:all .15s}
.dth-mc:hover .dth-mc-arr,.dth-mc.on .dth-mc-arr{opacity:1;transform:translateX(0);color:var(--dtech-red)}
.dth-panel{flex:1;padding:32px 48px;display:none;animation:dthPIn .2s ease;overflow-y:auto;max-height:70vh}
.dth-panel.on{display:block}
@keyframes dthPIn{from{opacity:0}to{opacity:1}}
.dth-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.dth-panel-title{font-family:var(--dtech-latin);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dtech-red)}
.dth-panel-all{font-family:var(--dtech-latin);font-size:11px;font-weight:600;color:var(--dtech-g400);text-decoration:none;display:flex;align-items:center;gap:4px;transition:color .15s}
.dth-panel-all:hover{color:var(--dtech-red)}.dth-panel-all svg{width:11px;height:11px}
.dth-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.dth-col-title{font-family:var(--dtech-latin);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--dtech-black);margin-bottom:14px}
.dth-sub-list{list-style:none}
.dth-sub-a{display:block;padding:8px 0;font-family:var(--dtech-geo);font-size:13px;color:var(--dtech-g600);text-decoration:none;transition:color .15s}
.dth-sub-a:hover{color:var(--dtech-black)}

/* ===== DRAWER ===== */
.dth-dr-ov{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:99995;opacity:0;pointer-events:none;transition:opacity .3s}
.dth-dr-ov.on{opacity:1;pointer-events:auto}
.dth-drawer{position:fixed;top:0;right:0;bottom:0;width:320px;max-width:88vw;background:var(--dtech-white);z-index:99996;transform:translateX(100%);transition:transform .35s var(--dtech-ease);overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column}
.dth-drawer.on{transform:translateX(0)}
.dth-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:20px;background:var(--dtech-dark);flex-shrink:0}
.dth-drawer-head img{height:40px !important;width:auto !important;max-width:none !important;object-fit:contain}
.dth-dr-close{width:36px;height:36px;background:rgba(255,255,255,.06);border:none;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.5);transition:all .15s}
.dth-dr-close:hover{background:rgba(255,255,255,.1);color:#fff}
.dth-dr-close svg{width:18px;height:18px}
.dth-drawer-nav{flex:1;padding:8px 0;overflow-y:auto}
.dth-dr-sec{padding:12px 20px 6px;font-family:var(--dtech-latin);font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dtech-red)}
.dth-dr-link{display:flex;align-items:center;justify-content:space-between;padding:13px 20px;font-size:14px;font-weight:500;color:var(--dtech-g700);text-decoration:none;transition:background .1s}
.dth-dr-link:active{background:var(--dtech-g50)}
.dth-dr-link svg{width:14px;height:14px;color:var(--dtech-g300);transition:transform .2s}
.dth-dr-sub{padding-left:16px;display:none;background:var(--dtech-g50)}
.dth-dr-sub.open{display:block}
.dth-dr-sub .dth-dr-link{font-size:13px;font-weight:400;color:var(--dtech-g600);padding:11px 20px}
.dth-dr-div{height:1px;background:var(--dtech-g200);margin:4px 20px}
.dth-drawer-ft{padding:20px;border-top:1px solid var(--dtech-g200);flex-shrink:0}
.dth-drawer-ft a{display:block;font-size:12px;color:var(--dtech-g500);text-decoration:none;padding:5px 0}

/* ===== BOTTOM BAR ===== */
.dth-bottom-bar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:99980;background:var(--dtech-white);border-top:1px solid var(--dtech-g200);padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -2px 16px rgba(0,0,0,.06)}
.dth-bb-in{display:flex;align-items:stretch;height:56px}
.dth-bb-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;text-decoration:none;color:var(--dtech-g500);font-family:var(--dtech-geo);font-size:9px;font-weight:500;position:relative;background:none;border:none;cursor:pointer;transition:color .15s}
.dth-bb-item.active,.dth-bb-item:hover{color:var(--dtech-red)}
.dth-bb-item svg{width:20px;height:20px}
.dth-bb-badge{position:absolute;top:4px;right:calc(50% - 18px);min-width:14px;height:14px;background:var(--dtech-red);border-radius:7px;font-family:var(--dtech-mono);font-size:8px;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center;padding:0 3px}

/* ===== HIDE THEME / ELEMENTOR / DEFAULT HEADERS (plugin replaces them) ===== */
.elementor-location-header,
#masthead,
.site-header:not(.dth-fixed-wrapper),
header.wp-block-template-part,
.starter-templates-header,
.ast-header-wrap,
.ehf-header,
.hfe-header{display:none !important}

/* ===== ELEMENTOR CANVAS — hide DTECH header entirely ===== */
.elementor-template-canvas .dth-fixed-wrapper,
.elementor-template-canvas .dth-spacer,
.elementor-template-canvas .dth-bottom-bar,
.elementor-template-canvas .dth-overlay,
.elementor-template-canvas .dth-search-ov,
.elementor-template-canvas .dth-dr-ov,
.elementor-template-canvas .dth-drawer{display:none !important}

/* ===== WP ADMIN BAR OFFSET ===== */
.admin-bar .dth-fixed-wrapper{top:32px}
@media(max-width:782px){.admin-bar .dth-fixed-wrapper{top:46px}}

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
    :root{--dtech-header-h:64px}
    .dth-topbar{display:none}
    .dth-hdr-in{padding:0 24px;gap:16px}
    .dth-logo{height:42px}
    .dth-nav-in{padding:0 24px}
    .dth-nav-a{padding:0 12px;font-size:12px}
    .dth-cols{gap:24px}
    .dth-panel{padding:24px 28px}
    .dth-mega-side{width:240px}
    .dth-spacer{height:calc(var(--dtech-header-h) + var(--dtech-navbar-h))}
}
/* ---- Mobile controls take over here --------------------------------
   max-width:1024px is the exact complement of the desktop row's
   min-width:1025px. It has to be: before this, the burger appeared only at
   max-width:768px while the desktop menu needed min-width:1025px, so from
   769px to 1024px the page had NO navigation at all -- neither menu, on
   every tablet and small laptop. If the desktop breakpoint is ever moved,
   move this one in the same commit. */
@media(max-width:1024px){
    .dth-hdr-in{justify-content:space-between}
    .dth-logo{order:1}
    .dth-search{display:none}
    .dth-actions{display:none}
    .dth-mob-act{display:flex;order:2;gap:4px}
    .dth-mob-btn{width:44px;height:44px}
    .dth-mob-btn svg{width:22px;height:22px}
    .dth-mob-lang{display:flex;align-items:center;gap:2px;padding:3px;border-radius:6px;margin-right:6px}
    .dth-mob-lang .dth-lang-btn{font-size:10px;padding:4px 9px;border-radius:4px}
    .dth-navbar{display:none}
}
@media(max-width:768px){
    :root{--dtech-header-h:60px}
    .dth-topbar{display:none}
    .dth-hdr-in{padding:0 16px;gap:0}
    .dth-logo{height:40px}
    /* The sticky bottom bar is retired (client decision, 2026-10-13). Its
       base rule is already display:none, so dropping this one line hides it
       at every width. The markup stays in header.php on purpose: cart-widget.js
       and user-button.js look up #dthBottomCart / #dthBottomAccount, and
       deleting the nodes would leave those scripts dereferencing null. No
       body padding was ever tied to the bar, so nothing reflows. */
    .dth-bb-in{height:60px}
    .dth-bb-item{font-size:10px;gap:4px}
    .dth-bb-item svg{width:22px;height:22px}
    .dth-bb-badge{min-width:16px;height:16px;font-size:9px;border-radius:8px}
    .dth-spacer{height:var(--dtech-header-h)}
    .dth-search-ov{height:60px}
    /* iOS: prevent auto-zoom on input focus (requires ≥16px) */
    .dth-search-ov input{font-size:16px}
}
@media(max-width:400px){
    .dth-mob-act{gap:2px}
    .dth-mob-btn{width:40px;height:40px}
    .dth-mob-btn svg{width:20px;height:20px}
    .dth-mob-lang .dth-lang-btn{font-size:9px;padding:3px 7px}
    .dth-logo{height:34px}
}

/* =========================================
   CATALOG OFF — light bar, no search,
   logo left / menu centre / contact right
   ========================================= */
.dth-header--catalog-off .dth-topbar{display:none}
/* Sticky behaviour. The wrapper is already position:fixed, so what is left is
   the bar's reaction to scrolling: header.js toggles .shadow past 20px and that
   single hook drives height, logo size, blur and shadow together. The in-flow
   spacer keeps its full-height value (header.js sizes it once on load, never on
   scroll), so the bar shrinking never reflows the page behind it. */
.dth-header--catalog-off .dth-header{background:#fff;border-bottom:1px solid rgba(12,12,12,.08);
    transition:height .4s var(--dtech-ease),background-color .4s var(--dtech-ease),box-shadow .4s var(--dtech-ease),border-color .4s var(--dtech-ease)}
.dth-header--catalog-off .dth-header.shadow{height:62px;
    background:rgba(255,255,255,.9);
    -webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px);
    border-bottom-color:rgba(12,12,12,.05);
    box-shadow:0 10px 34px rgba(12,12,12,.10),0 2px 6px rgba(12,12,12,.04)}
.dth-header--catalog-off .dth-logo{transition:height .4s var(--dtech-ease)}
.dth-header--catalog-off .dth-header.shadow .dth-logo{height:44px}
@media(prefers-reduced-motion:reduce){
  .dth-header--catalog-off .dth-header,.dth-header--catalog-off .dth-logo,
  .dth-header--catalog-off .dth-hdr-cta{transition:none}
}

/* controls flip to a dark treatment on the light bar */
.dth-header--catalog-off .dth-act{border-color:rgba(12,12,12,.12);color:#0c0c0c}
.dth-header--catalog-off .dth-act:hover{background:rgba(12,12,12,.06);color:#0c0c0c}
.dth-header--catalog-off .dth-mob-btn{color:#0c0c0c}
/* Mobile language control, same segmented treatment as the desktop one
   (square corners, 4px/6px radii -- never a pill). */
.dth-header--catalog-off .dth-mob-lang{background:rgba(12,12,12,.045);border:1px solid rgba(12,12,12,.06)}
.dth-header--catalog-off .dth-mob-lang .dth-lang-btn{font-family:var(--dtech-latin);font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1;color:rgba(12,12,12,.45);background:transparent;transition:color .22s var(--dtech-ease),background-color .22s var(--dtech-ease),box-shadow .22s var(--dtech-ease)}
.dth-header--catalog-off .dth-mob-lang .dth-lang-btn.active{background:#fff;color:var(--dtech-black);box-shadow:0 1px 2px rgba(12,12,12,.10)}
.dth-header--catalog-off .dth-mob-lang .dth-lang-btn:not(.active):hover{color:var(--dtech-black);background:rgba(12,12,12,.05)}
.dth-header--catalog-off .dth-lang-btn{color:rgba(12,12,12,.45)}
.dth-header--catalog-off .dth-lang-btn.active{background:var(--dtech-red);color:#fff}
.dth-header--catalog-off .dth-lang-btn:not(.active):hover{color:#0c0c0c}

/* these exist only in the catalog-off markup; hidden until there is room */
.dth-hdr-menu,.dth-hdr-right{display:none}

@media(min-width:1025px){
  /* Three explicit columns. Both side tracks are minmax(max-content,1fr): equal
     whenever there is room, so the middle track sits on the row's centre line,
     and floored at their content so a tight viewport crowds the menu off-centre
     rather than clipping anything. DOM order is logo, menu, cluster -> columns
     1, 2, 3, no reordering. */
  .dth-header--catalog-off .dth-hdr-in{display:grid;grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr);align-items:center;gap:24px}
  .dth-header--catalog-off .dth-logo{justify-self:start}
  .dth-header--catalog-off .dth-hdr-menu{justify-self:center;display:flex;align-items:center;gap:22px}
  /* contact | language | CTA, weighted so the eye reads them as one cluster:
     the two text items sit closer to each other than the group does to the
     switcher and the button. */
  .dth-header--catalog-off .dth-hdr-right{justify-self:end;display:flex;align-items:center;gap:16px}
  /* One line (phone) since the email moved out of the header. Keep this a
     column: the cluster's width is what decides whether the menu can hold the
     row's centre line, so if a second contact line is ever added it stacks
     instead of widening the cluster by its full length. */
  .dth-header--catalog-off .dth-hdr-contact{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:5px}

  /* Menu: colour shift plus an underline that wipes in from the left and out
     to the right, the same gesture .dth-nav-a uses on the catalog navbar. */
  .dth-header--catalog-off .dth-hdr-menu a{position:relative;padding:7px 0;font-family:var(--dtech-geo);font-size:13.5px;font-weight:600;line-height:1;color:var(--dtech-black);text-decoration:none;white-space:nowrap;transition:color .25s var(--dtech-ease)}
  .dth-header--catalog-off .dth-hdr-menu a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--dtech-red);transform:scaleX(0);transform-origin:right center;transition:transform .3s var(--dtech-ease)}
  .dth-header--catalog-off .dth-hdr-menu a:hover{color:var(--dtech-red)}
  .dth-header--catalog-off .dth-hdr-menu a:hover::after{transform:scaleX(1);transform-origin:left center}

  /* Contact: icon + label pairs. line-height:1 and a block-level svg keep the
     glyph optically centred against the text instead of on its baseline. */
  .dth-header--catalog-off .dth-hdr-contact-item{display:inline-flex;align-items:center;gap:7px;font-family:var(--dtech-latin);font-size:12px;font-weight:500;letter-spacing:.01em;line-height:1;color:rgba(12,12,12,.72);text-decoration:none;white-space:nowrap;transition:color .25s var(--dtech-ease)}
  .dth-header--catalog-off .dth-hdr-contact-item:hover{color:var(--dtech-black)}
  .dth-header--catalog-off .dth-hdr-ico{display:block;width:14px;height:14px;flex-shrink:0;color:var(--dtech-red);transition:transform .3s var(--dtech-ease)}
  .dth-header--catalog-off .dth-hdr-contact-item:hover .dth-hdr-ico{transform:translateY(-2px) scale(1.06)}

  /* Language: a segmented control, square-cornered to stay inside the design
     system (4px/6px radii, never a pill). The more specific selector overrides
     the generic .dth-lang-btn treatment inherited from the dark topbar. */
  .dth-header--catalog-off .dth-hdr-lang{display:flex;align-items:center;gap:2px;padding:3px;background:rgba(12,12,12,.045);border:1px solid rgba(12,12,12,.06);border-radius:6px}
  .dth-header--catalog-off .dth-hdr-lang .dth-lang-btn{padding:4px 9px;border-radius:4px;font-family:var(--dtech-latin);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1;color:rgba(12,12,12,.45);background:transparent;transition:color .22s var(--dtech-ease),background-color .22s var(--dtech-ease),box-shadow .22s var(--dtech-ease)}
  .dth-header--catalog-off .dth-hdr-lang .dth-lang-btn.active{background:#fff;color:var(--dtech-black);box-shadow:0 1px 2px rgba(12,12,12,.10)}
  .dth-header--catalog-off .dth-hdr-lang .dth-lang-btn:not(.active):hover{color:var(--dtech-black);background:rgba(12,12,12,.05)}

  /* CTA: the hero's primary button language (brand red, 4px corners, a light
     sweep on hover) scaled down to sit in a 78px bar. */
  .dth-header--catalog-off .dth-hdr-cta{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:4px;background:var(--dtech-red);color:#fff;font-family:var(--dtech-geo);font-size:12.5px;font-weight:700;line-height:1;white-space:nowrap;text-decoration:none;transition:background-color .25s var(--dtech-ease),box-shadow .3s var(--dtech-ease),transform .3s var(--dtech-ease),height .4s var(--dtech-ease)}
  .dth-header--catalog-off .dth-hdr-cta::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);transform:translateX(-100%);transition:transform .6s var(--dtech-ease)}
  .dth-header--catalog-off .dth-hdr-cta>*{position:relative;z-index:1}
  .dth-header--catalog-off .dth-hdr-cta:hover{background:var(--dtech-red-h);box-shadow:0 8px 20px rgba(185,30,35,.26);transform:translateY(-1px)}
  .dth-header--catalog-off .dth-hdr-cta:hover::before{transform:translateX(100%)}
  .dth-header--catalog-off .dth-hdr-cta-ico{display:block;width:15px;height:15px;flex-shrink:0}
  .dth-header--catalog-off .dth-header.shadow .dth-hdr-cta{height:36px}

  /* Keyboard users get the same affordances the mouse does. */
  .dth-header--catalog-off .dth-hdr-menu a:focus-visible,
  .dth-header--catalog-off .dth-hdr-contact-item:focus-visible,
  .dth-header--catalog-off .dth-hdr-lang .dth-lang-btn:focus-visible,
  .dth-header--catalog-off .dth-hdr-cta:focus-visible{outline:2px solid var(--dtech-red);outline-offset:3px}
  .dth-header--catalog-off .dth-hdr-menu a:focus-visible::after{transform:scaleX(1);transform-origin:left center}
}

/* Tighten the row before it runs out of width, so the menu keeps its centre
   line further down the range instead of drifting as soon as space gets short. */
@media(min-width:1025px) and (max-width:1499px){
  .dth-header--catalog-off .dth-hdr-in{gap:18px}
  .dth-header--catalog-off .dth-hdr-menu{gap:17px}
  .dth-header--catalog-off .dth-hdr-menu a{font-size:13px}
  .dth-header--catalog-off .dth-hdr-right{gap:13px}
  .dth-header--catalog-off .dth-hdr-contact-item{font-size:11.5px}
  .dth-header--catalog-off .dth-hdr-cta{height:38px;padding:0 15px;font-size:12px}
}

/* The header carries phone and email only; the full address would be far too
   wide for a single row and already appears in the footer and the drawer. */

/* =========================================
   Site-wide responsive guard
   ========================================= */
/* The home Directions accordion lays its panels out in a row, so the three
   inactive ones sit at roughly x=1875..3707 with no clipping ancestor and the
   whole document becomes horizontally scrollable -- scrollWidth 3706 against a
   1280 viewport, and the page really does slide sideways on a touch screen.
   overflow-x:clip rather than hidden on purpose: clip does not create a scroll
   container and leaves overflow-y visible, so nothing inside starts scrolling
   and no vertical overhang is cut off. The rule lives here because this
   section's own CSS is inside the hashed Vite bundle, which must never be
   edited in place -- move it into the SCSS source at the next rebuild. */
.ddr .ddr-panels,
.ddr-panels{overflow-x:clip}