/* =====================================================================
   Baskod Etiket v0.16.14 — CLEAN MOBILE NAVIGATION ARCHITECTURE
   ---------------------------------------------------------------------
   The mobile menu is a dedicated viewport overlay outside .site-header.
   Legacy mobile .main-nav rules have been removed; .main-nav now serves
   desktop only and cannot move/scroll this overlay. The document is physically locked by JS while open.
   ===================================================================== */

.mobile-nav-overlay{display:none}
.mobile-contact-dock{display:none}

@media (max-width:980px){
  /* Desktop navigation is not reused on mobile. This is intentional: it
     prevents every historical .main-nav mobile override from participating. */
  .site-header .main-nav{display:none!important}

  html.nav-overlay-open,
  html.nav-overlay-open body{overscroll-behavior:none!important}

  .mobile-nav-overlay{
    --mobile-nav-bg:var(--premium-header,var(--theme-sidebar,#071d14));
    --mobile-nav-bg-2:var(--premium-header-2,var(--theme-dark-hover,#102b20));
    --mobile-nav-accent:var(--premium-on-dark,var(--theme-accent-2,#d4af37));
    --mobile-nav-muted:var(--premium-on-dark-muted,var(--theme-sidebar-muted,#baa66b));
    --mobile-nav-metal:var(--premium-metal,var(--theme-accent,#d4af37));
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    height:100vh!important;
    height:100dvh!important;
    z-index:1000!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:var(--mobile-nav-bg)!important;
    color:var(--mobile-nav-accent)!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
    isolation:isolate;
  }
  .mobile-nav-overlay.is-open{
    display:grid!important;
    grid-template-rows:82px minmax(0,1fr)!important;
  }

  .mobile-nav-overlay-head{
    min-width:0;
    height:82px;
    padding:0 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    background:linear-gradient(100deg,var(--mobile-nav-bg),var(--mobile-nav-bg-2));
    border-bottom:1px solid color-mix(in srgb,var(--mobile-nav-metal) 28%,transparent);
    box-sizing:border-box;
    flex:0 0 auto;
  }
  .mobile-nav-overlay-brand{
    min-width:0;
    display:inline-flex!important;
    align-items:center;
    gap:11px;
    color:var(--mobile-nav-accent)!important;
    text-decoration:none!important;
    font-size:18px;
    font-weight:800;
    letter-spacing:-.03em;
    white-space:nowrap;
  }
  .mobile-nav-overlay-brand img{width:38px;height:38px;flex:0 0 38px;display:block;opacity:1!important}
  .mobile-nav-overlay-brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* Premium logos and wordmarks pass through exactly the same filter, so the
     icon and text are visually one tone on every dark palette. */
  html[data-theme]:not([data-theme="classic-baskod"]) .mobile-nav-overlay-brand img,
  html[data-theme]:not([data-theme="classic-baskod"]) .mobile-nav-overlay-brand span{
    filter:var(--premium-logo-filter)!important;
  }
  html[data-theme]:not([data-theme="classic-baskod"]) .mobile-nav-overlay-brand span{color:#fff!important}
  html[data-theme="classic-baskod"] .mobile-nav-overlay-brand{color:#fff!important}
  html[data-theme="classic-baskod"] .mobile-nav-overlay-brand img{filter:brightness(0) invert(1)!important}

  .mobile-nav-overlay-close{
    position:relative;
    width:48px;
    height:48px;
    flex:0 0 48px;
    padding:0;
    border:0;
    border-radius:12px;
    background:transparent;
    color:var(--mobile-nav-accent);
    cursor:pointer;
  }
  .mobile-nav-overlay-close span{
    position:absolute;
    left:12px;
    top:23px;
    width:25px;
    height:2.5px;
    border-radius:999px;
    background:currentColor;
    transform-origin:center;
  }
  .mobile-nav-overlay-close span:first-child{transform:rotate(45deg)}
  .mobile-nav-overlay-close span:last-child{transform:rotate(-45deg)}
  .mobile-nav-overlay-close:focus-visible{outline:2px solid var(--mobile-nav-accent);outline-offset:2px}

  /* This is the ONLY scroll container. The overlay itself and the page behind
     it never scroll while the menu is open. */
  .mobile-nav-overlay-scroll{
    min-width:0;
    min-height:0;
    width:100%;
    height:100%;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:thin;
    scrollbar-color:color-mix(in srgb,var(--mobile-nav-accent) 24%,transparent) transparent;
  }
  .mobile-nav-overlay-scroll::-webkit-scrollbar{width:4px}
  .mobile-nav-overlay-scroll::-webkit-scrollbar-track{background:transparent}
  .mobile-nav-overlay-scroll::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--mobile-nav-accent) 24%,transparent);border-radius:999px}

  .mobile-nav-overlay-list{
    width:100%;
    min-height:100%;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:20px 44px 18px;
  }

  .mobile-nav-overlay-link,
  .mobile-nav-overlay-products>summary{
    min-height:56px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:0 16px;
    border:0;
    color:var(--mobile-nav-accent)!important;
    background:transparent!important;
    text-decoration:none!important;
    font-size:17px;
    line-height:1.25;
    font-weight:760;
    box-sizing:border-box;
  }
  .mobile-nav-overlay-products{margin:0;padding:0;border:0}
  .mobile-nav-overlay-products>summary{cursor:pointer;list-style:none}
  .mobile-nav-overlay-products>summary::-webkit-details-marker{display:none}
  .mobile-nav-overlay-products>summary small{font-size:14px;line-height:1;transition:transform .18s ease}
  .mobile-nav-overlay-products[open]>summary small{transform:rotate(180deg)}

  .mobile-nav-overlay-products-panel{
    margin:0 0 10px;
    padding:4px 16px 12px;
    border-bottom:1px solid color-mix(in srgb,var(--mobile-nav-metal) 24%,transparent);
  }
  .mobile-nav-overlay-products-panel a{
    min-height:48px;
    display:flex;
    align-items:center;
    padding:0 16px;
    color:color-mix(in srgb,var(--mobile-nav-accent) 90%,#fff 10%)!important;
    text-decoration:none!important;
    font-size:16px;
    line-height:1.25;
    font-weight:520;
  }
  .mobile-nav-overlay-products-panel .mobile-nav-overlay-all{
    min-height:60px;
    margin-top:4px;
    border-top:1px solid color-mix(in srgb,var(--mobile-nav-metal) 18%,transparent);
    color:var(--mobile-nav-accent)!important;
    font-weight:800;
  }

  .mobile-nav-overlay-link:hover,
  .mobile-nav-overlay-products>summary:hover,
  .mobile-nav-overlay-products-panel a:hover{
    background:color-mix(in srgb,var(--mobile-nav-metal) 8%,transparent)!important;
  }

  /* When content is short, CTAs rest at the bottom of the usable menu area.
     When content is long, margin-top:auto collapses naturally and they follow
     the menu content with no artificial second scroll page. */
  .mobile-nav-overlay-actions{
    margin-top:auto;
    padding-top:22px;
    display:grid;
    gap:10px;
  }
  .mobile-nav-overlay-tool,
  .mobile-nav-overlay-quote{
    width:100%;
    min-height:56px;
    display:flex!important;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:0 16px!important;
    box-sizing:border-box;
    border-radius:12px;
    text-decoration:none!important;
    font-size:16px;
    font-weight:850;
  }
  .mobile-nav-overlay-tool{
    color:var(--mobile-nav-accent)!important;
    background:color-mix(in srgb,var(--mobile-nav-metal) 7%,var(--mobile-nav-bg))!important;
    border:1px solid color-mix(in srgb,var(--mobile-nav-metal) 38%,transparent)!important;
  }
  .mobile-nav-overlay-quote{
    color:var(--mobile-nav-bg)!important;
    background:var(--mobile-nav-metal)!important;
    border:1px solid var(--mobile-nav-metal)!important;
  }

  /* v0.16.16: The quick-contact dock is viewport-fixed and independent of
     the menu. It remains visible while the page or menu scrolls. */
  .mobile-nav-overlay-scroll{
    padding-bottom:calc(92px + env(safe-area-inset-bottom,0px));
    box-sizing:border-box;
  }

  .mobile-contact-dock--fixed{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;
    z-index:1200!important;
    width:100%!important;
    height:64px!important;
    padding:0 max(18px,env(safe-area-inset-left,0px)) 0 max(18px,env(safe-area-inset-right,0px))!important;
    margin:0!important;
    display:grid!important;
    grid-template-columns:64px minmax(136px,176px) 64px;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    pointer-events:none;
    box-sizing:border-box;
    background:transparent!important;
  }
  .mobile-contact-dock--fixed .mobile-contact-action{
    position:static!important;
    inset:auto!important;
    transform:none!important;
    pointer-events:auto!important;
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    text-decoration:none!important;
    box-shadow:0 12px 30px rgba(18,88,49,.22);
    border:0;
    line-height:1;
  }
  .mobile-contact-instagram,.mobile-contact-whatsapp{
    width:56px;height:56px;border-radius:50%;padding:0!important;color:#fff!important;
  }
  .mobile-contact-instagram{
    grid-column:1!important;
    justify-self:start!important;
    background:radial-gradient(circle at 30% 107%,#fdf497 0 5%,#fdf497 5% 10%,#fd5949 45%,#d6249f 60%,#285AEB 90%)!important;
  }
  .mobile-contact-instagram svg{width:28px;height:28px;fill:none;stroke:#fff;stroke-width:1.8}
  .mobile-contact-instagram .social-dot{fill:#fff;stroke:none}
  .mobile-contact-whatsapp{grid-column:3!important;justify-self:end!important;background:#25D366!important}
  .mobile-contact-whatsapp svg{width:30px;height:30px;display:block;fill:#fff}
  .mobile-contact-call{
    grid-column:2!important;
    justify-self:center!important;
    width:100%!important;
    min-width:0!important;
    height:56px;
    padding:0 22px!important;
    border-radius:999px;
    gap:9px;
    background:#1677d2!important;
    color:#fff!important;
    font-weight:800;
    font-size:16px;
    white-space:nowrap;
  }
  .mobile-contact-call svg{width:22px;height:22px;display:block;fill:currentColor}

  /* Keep the bottom of public content reachable above the fixed dock. */
  body{padding-bottom:calc(80px + env(safe-area-inset-bottom,0px));}

}

@media (max-width:640px){
  .mobile-nav-overlay.is-open{grid-template-rows:70px minmax(0,1fr)!important}
  .mobile-nav-overlay-head{height:70px;padding:0 16px}
  .mobile-nav-overlay-brand{gap:9px;font-size:16px}
  .mobile-nav-overlay-brand img{width:36px;height:36px;flex-basis:36px}
  .mobile-nav-overlay-close{width:44px;height:44px;flex-basis:44px}
  .mobile-nav-overlay-close span{left:10px;top:21px;width:24px}
  .mobile-nav-overlay-list{padding:18px 44px 16px}
  .mobile-nav-overlay-link,.mobile-nav-overlay-products>summary{min-height:54px;padding-inline:8px;font-size:17px}
  .mobile-nav-overlay-products-panel{padding-left:8px;padding-right:8px}
  .mobile-nav-overlay-products-panel a{padding-inline:16px}
  .mobile-nav-overlay-tool,.mobile-nav-overlay-quote{min-height:54px}
}

@media (max-width:360px){
  .mobile-nav-overlay-list{padding-left:30px;padding-right:30px;padding-bottom:14px}
  .mobile-contact-dock--in-menu{grid-template-columns:48px minmax(116px,1fr) 48px;gap:12px;margin-top:28px;padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
  .mobile-contact-dock--in-menu .mobile-contact-instagram,.mobile-contact-dock--in-menu .mobile-contact-whatsapp{width:48px;height:48px}
  .mobile-contact-dock--in-menu .mobile-contact-call{height:48px;padding:0 16px!important;font-size:14px}
  .mobile-contact-dock--in-menu .mobile-contact-instagram svg{width:24px;height:24px}
  .mobile-contact-dock--in-menu .mobile-contact-whatsapp svg{width:26px;height:26px}
  .mobile-contact-dock--in-menu .mobile-contact-call svg{width:19px;height:19px}
}

@media (min-width:981px){
  .mobile-nav-overlay{display:none!important}
}