/* Sweet BakeArt — compact navbar and zero-box navigation interactions */

/* Desktop + non-drawer tablet navigation */
@media (min-width: 861px) {
  :root {
    --site-header-h: 84px;
    --site-logo-size: 76px;
    --final-header-height: 84px;
    --final-logo-size: 76px;
  }

  header.navbar,
  header.navbar.scrolled,
  header.navbar.polish-scrolled,
  body.page-index header.navbar,
  body.page-about header.navbar,
  body.page-shop header.navbar,
  body.page-gallery header.navbar,
  body.page-contact header.navbar,
  body.page-product header.navbar,
  body.page-cart header.navbar {
    height: 84px !important;
    min-height: 84px !important;
  }

  header.navbar .nav-container,
  header.navbar.scrolled .nav-container,
  header.navbar.polish-scrolled .nav-container,
  body.page-index header.navbar .nav-container,
  body.page-about header.navbar .nav-container,
  body.page-shop header.navbar .nav-container,
  body.page-gallery header.navbar .nav-container,
  body.page-contact header.navbar .nav-container,
  body.page-product header.navbar .nav-container,
  body.page-cart header.navbar .nav-container {
    height: 84px !important;
    min-height: 84px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  header.navbar .logo,
  header.navbar.scrolled .logo,
  header.navbar.polish-scrolled .logo,
  header.navbar .logo img,
  header.navbar.scrolled .logo img,
  header.navbar.polish-scrolled .logo img,
  body:is(.page-index,.page-about,.page-shop,.page-gallery,.page-contact,.page-product,.page-cart) header.navbar .logo,
  body:is(.page-index,.page-about,.page-shop,.page-gallery,.page-contact,.page-product,.page-cart) header.navbar .logo img {
    width: 76px !important;
    height: 76px !important;
    min-width: 76px !important;
    min-height: 76px !important;
    max-width: 76px !important;
    max-height: 76px !important;
    flex-basis: 76px !important;
  }

  header.navbar nav.nav-links {
    gap: clamp(.5rem, 1.2vw, 1rem) !important;
  }

  /* Text-only states: no white oval, card, rectangle, blur or shadow. */
  header.navbar .nav-links a,
  header.navbar .nav-links a:link,
  header.navbar .nav-links a:visited,
  header.navbar .nav-links a:hover,
  header.navbar .nav-links a:focus,
  header.navbar .nav-links a:focus-visible,
  header.navbar .nav-links a:active,
  header.navbar .nav-links a.active,
  body:is(.page-index,.page-about,.page-shop,.page-gallery,.page-contact,.page-product,.page-cart) header.navbar .nav-links a,
  body:is(.page-index,.page-about,.page-shop,.page-gallery,.page-contact,.page-product,.page-cart) header.navbar .nav-links a:hover {
    padding: .46rem .34rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
  }

  header.navbar .nav-links a::before,
  header.navbar .nav-links a:hover::before,
  header.navbar .nav-links a:focus::before,
  header.navbar .nav-links a:focus-visible::before,
  header.navbar .nav-links a:active::before,
  header.navbar .nav-links a.active::before {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

/* Slightly tighter for landscape tablets/smaller laptops where desktop links remain visible. */
@media (min-width: 861px) and (max-width: 1100px) {
  :root {
    --site-header-h: 78px;
    --site-logo-size: 68px;
    --final-header-height: 78px;
    --final-logo-size: 68px;
  }

  header.navbar,
  header.navbar.scrolled,
  header.navbar.polish-scrolled,
  body:is(.page-index,.page-about,.page-shop,.page-gallery,.page-contact,.page-product,.page-cart) header.navbar,
  header.navbar .nav-container,
  header.navbar.scrolled .nav-container,
  header.navbar.polish-scrolled .nav-container,
  body:is(.page-index,.page-about,.page-shop,.page-gallery,.page-contact,.page-product,.page-cart) header.navbar .nav-container {
    height: 78px !important;
    min-height: 78px !important;
  }

  header.navbar .logo,
  header.navbar.scrolled .logo,
  header.navbar.polish-scrolled .logo,
  header.navbar .logo img,
  header.navbar.scrolled .logo img,
  header.navbar.polish-scrolled .logo img,
  body:is(.page-index,.page-about,.page-shop,.page-gallery,.page-contact,.page-product,.page-cart) header.navbar .logo,
  body:is(.page-index,.page-about,.page-shop,.page-gallery,.page-contact,.page-product,.page-cart) header.navbar .logo img {
    width: 68px !important;
    height: 68px !important;
    min-width: 68px !important;
    min-height: 68px !important;
    max-width: 68px !important;
    max-height: 68px !important;
    flex-basis: 68px !important;
  }

  header.navbar nav.nav-links {
    gap: .34rem !important;
  }

  header.navbar .nav-links a {
    font-size: .94rem !important;
    padding-inline: .28rem !important;
  }
}

/* Remove the historical mobile tap delay and keep controls GPU-friendly. */
header.navbar a,
header.navbar button,
.mobile-drawer a,
.mobile-drawer button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

html.sba-navigating,
html.sba-navigating body {
  cursor: progress;
}

@media (prefers-reduced-motion: reduce) {
  header.navbar *,
  .mobile-drawer * {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* Mobile drawer performance and reliable finger-sized controls. */
@media (max-width: 860px) {
  body .mobile-drawer {
    background: rgba(28, 7, 14, .46) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: opacity .14s ease, visibility .14s ease !important;
  }

  body .drawer-panel {
    background: rgba(255, 249, 251, .985) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: -14px 0 42px rgba(61, 17, 29, .22) !important;
    transform: translate3d(22px, 0, 0) !important;
    transition: transform .18s cubic-bezier(.22,.8,.25,1), opacity .14s ease !important;
    will-change: transform, opacity;
    contain: layout paint style;
  }

  body .mobile-drawer.open .drawer-panel {
    transform: translate3d(0, 0, 0) !important;
  }

  body .drawer-links a {
    transition: transform .12s ease, background .12s ease, border-color .12s ease !important;
    transition-delay: 0ms !important;
  }

  html body header.navbar .nav-right .menu-toggle,
  body .drawer-close,
  body .filter-btn,
  body .lightbox button,
  body .qty-btn,
  body .remove-btn {
    min-width: 46px !important;
    min-height: 46px !important;
    touch-action: manipulation;
  }

  html body header.navbar .nav-right .menu-toggle {
    width: 46px !important;
    height: 46px !important;
    max-width: 46px !important;
    max-height: 46px !important;
  }

  body .reviews-dots .dot {
    position: relative;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  body .reviews-dots .dot::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(133, 45, 56, .34);
    transform: translate(-50%, -50%);
    transition: width .15s ease, background .15s ease;
  }

  body .reviews-dots .dot.active::before {
    width: 24px;
    background: #852d38;
  }

  html.sba-navigating body .mobile-drawer,
  html.sba-navigating body .drawer-panel {
    transition: none !important;
  }
}