/* Desktop Header Fix - Align logo, links, and actions properly */
@media (min-width: 993px) {
  nav.navbar .nav-container {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    height: auto !important;
    padding: 12px 40px !important;
  }
  
  nav.navbar .nav-logo {
    grid-column: 1 !important;
    justify-self: start !important;
  }
  
  nav.navbar .nav-menu {
    grid-column: 2 !important;
    justify-self: center !important;
    display: flex !important;
    gap: 2rem !important;
    /* Ensure desktop nav links do NOT sit on a pill/background
       across all secondary pages. This must win over page themes. */
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
  
  nav.navbar .nav-menu a {
    /* Prevent per-link background chips on desktop */
    background: transparent !important;
  }
  
  nav.navbar .nav-actions {
    grid-column: 3 !important;
    justify-self: end !important;
    display: flex !important;
    gap: 1rem !important;
  }
  
  body {
    padding-top: var(--header-h, 80px) !important;
  }
}

/* Mobile overrides for giftbox detail thumbnails */
@media (max-width: 768px) {
  /* Keep only the compact thumbnail strip */
  /* Do not hide What's Inside; ensure it's visible on box detail pages */
  .box-detail-page .box-contents .contents-grid { display: grid !important; }
  /* Smaller thumbs with tighter spacing */
  .thumbs-rail { justify-content: center !important; align-items: center !important; gap: 6px !important; }
  .thumbs-rail img { width: 40px !important; height: 40px !important; border-radius: 8px !important; border-width: 1px !important; }
}

/* Mobile dropdown: make menu appear regardless of scroll */
@media (max-width: 992px){
  /* Use fixed to guarantee stickiness across pages (Safari-safe) */
  nav.navbar{ position: fixed !important; top:0; left:0; right:0; z-index:10010; transition: transform .22s ease; will-change: transform; }
  nav.navbar .nav-menu{
    position: fixed;
    top: var(--header-h, 80px);
    left: 0; right: 0;
    max-height: calc(100vh - var(--header-h, 80px));
    overflow: auto;
    background: #1b1411;
    transform: translateY(-8px) scale(.98);
    opacity: 0; pointer-events: none;
    z-index: 10005;
  }
  nav.navbar .nav-menu.active{ transform:none; opacity:1; pointer-events:auto; }
  nav.navbar .nav-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; z-index:10000; }
  nav.navbar .nav-backdrop.active{ display:block; }
  /* Reserve space for fixed header so content doesn't jump */
  body{ padding-top: var(--header-h, 80px) !important; }
  body.menu-open{ overflow:hidden; }
}

/* Auto-hide header on downward scroll; show on upward scroll (mobile only) */
@media (max-width: 992px){
  body.header-hidden nav.navbar{ transform: translateY(-100%); }
  /* Keep header visible while menu is open */
  body.menu-open nav.navbar{ transform:none !important; }
}

/* FINAL HEADER OVERRIDE (desktop): unified header sizing + centered nav */
@media (min-width: 993px) {
  /* Keep header height consistent across all pages */
  :root { --header-h: 80px; }
  body { padding-top: var(--header-h) !important; }
  /* Ensure fixed header height stays consistent even if logo / content overflows */
  nav.navbar { height: var(--header-h) !important; }
  nav.navbar { position: fixed !important; top: 0; left: 0; right: 0; }
  nav.navbar .nav-container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    height: var(--header-h) !important;
    padding: 0 24px !important;
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }
  nav.navbar .nav-logo { justify-self: start !important; align-self: center !important; }
  nav.navbar .nav-logo img {
    height: 94px !important; /* larger logo while keeping header height unchanged */
    width: auto !important;
    margin: -7px 0 0 !important; /* vertically center within fixed header */
    display: block !important;
  }
  nav.navbar .nav-menu {
    justify-self: center !important;
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
    gap: 1.6rem !important;
  }
  nav.navbar .nav-menu a {
    padding: 0.25rem 0.7rem !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  nav.navbar .nav-actions {
    justify-self: end !important;
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
  }
  /* Remove any extra space from conflicting rules */
  nav.navbar .nav-container,
  nav.navbar .nav-menu,
  nav.navbar .nav-logo,
  nav.navbar .nav-actions { margin: 0 !important; }
}

/* Giftboxes page: keep header fixed to top and avoid extra gap */
@media (min-width: 993px) {
  body.giftboxes { padding-top: 0 !important; }
  body.giftboxes nav.navbar .nav-container { height: var(--header-h) !important; }
  body.giftboxes nav.navbar .nav-logo img { height: 94px !important; margin-top: -7px !important; }
}

/* Flower detail pages: keep header proportions identical to full pages */
@media (min-width: 993px) {
  body.flower-detail-page { padding-top: 92px !important; }
  body.flower-detail-page nav.navbar { height: 92px !important; }
  body.flower-detail-page nav.navbar .nav-container {
    height: 92px !important;
    padding: 0 40px !important;
  }
  body.flower-detail-page nav.navbar .nav-logo img {
    height: 94px !important;
    margin: 0 !important;
  }
}