/* ───────────────────────────────────────────────
   GLOBAL RESET TO KILL HORIZONTAL SCROLL
──────────────────────────────────────────────── */
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}


@media (max-width: 414px) {
    .hero-section {
      background-position: center center !important; /* override the desktop value */
      height: 65vh;
      min-height: 400px;
      background-size: cover;
      background-repeat: no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: white;
    }
  }
  
/*House Plans*/
@media (max-width: 414px) {
    html {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
    }
  
    .plan-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      padding: 0 12px;
    }
  
    .plan-image {
      flex: 1 1 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #ffffff;
      padding: 8px;
      overflow: hidden;
    }
  
    .plan-image img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      object-position: center center;
      display: block;
    }
  
    .plan-info {
      flex: 0 0 auto;
      min-height: 48px; /* ⬅️ reduced from 60px */
      background: #5e3d29;
      color: white;
      text-align: center;
      padding: 4px 4px;  /* tighter padding */
      font-size: 0.75rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  
    .plan-info h3 {
      font-size: 0.68rem;
      font-weight: 600;
      margin: 0;
      line-height: 1.2;
      text-align: center;
      white-space: normal;
      word-break: break-word;
      letter-spacing: 0.3px;
      min-height: 1.8em; /* smaller height for single/multi-line support */
    }
  
    .plan-info p {
      font-size: 0.62rem;
      margin: 0;
      line-height: 1.1;
    }
  
    body {
      overflow-x: hidden;
      font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
    }
  }


/*Journey Steps*/
@media (max-width: 414px) {
    .journey-steps {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px; /* Slightly more spacing between cards */
      padding: 20px 10px; /* ✅ Adds space above/below the whole block */
      /* center the whole grid in its container */
      justify-content: center;

      /* center each item in its own column */
      justify-items: center;

      /* optional: give the grid a max width so it never spans edge-to-edge */
      max-width: 360px;
      margin: 0 auto;
    }

    .journey-step .icon {
      font-size: 2.5rem;
      margin-bottom: 0rem;

    }
    .journey-step {
      width: 98%;
      padding-top: 80%; /* ✅ Makes it a square */
      background-color: #f5e9d7;
      border-radius: 12px;
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 12px;
    }

    .journey-step p {
      font-size: 0.7rem;
      margin: 0;
      color: #3a2a1e;
    }
  }
  

/*House Styles*/
@media (max-width: 414px) {
    .featured-styles-overlay .style-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      padding: 20px 0;
      justify-content: center;
    }

    .style-card-link {
      display: block;
      width: 100%;
      max-width: 160px; /* ✅ Makes each card smaller */
      aspect-ratio: 1 / 1;
      margin: 0; /* ✅ Center the cards */
    }

    .style-card {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: 5px;
      overflow: hidden;
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
      font-family: 'Inter', sans-serif;
      background-color: transparent;
    }

    .featured-styles-overlay .style-card img {
      position: absolute; /* ✅ corrected from `display: absolute` */
      inset: 0;
      height: 100%;
      object-fit: cover;
      z-index: 0;
      display: block;
      gap: 50px;
    }

    .style-card p {
      position: absolute;
      bottom: 0;
      width: 100%;
      font-size: 0.75rem;
      font-weight: 600;
      background: #5e3d29;
      color: white;
      text-align: center;
      padding: 6px 0;
      margin: 0;
      z-index: 1;
      border-radius: 0 0 12px 12px;
    }

    .featured-styles-overlay .style-card {
      width: 158px;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease;
      background: #fff;
      font-family: 'Inter', sans-serif;
    }
  }

  


  
/*Footer*/
/* Footer – mobile layout cleanup */
@media (max-width: 480px) {
  .footer-container {
    display: inline;
  }

  .footer-column {
    width: 100%;
    max-width: 320px;
    margin: 0 !important;
    padding: 0 !important;
    display: inline;
  }

  .footer-column h4 {
    margin: 0;
    padding: 0;
    font-size: 1.0rem;
    font-weight: bold;
    color: #fff;
    line-height: 3;
    text-align: left;
  }

  .footer-column p,
  .footer-column a,
  .footer-column li {
    margin: 0; /* smaller spacing between lines */
    padding: 0;
    font-size: 0.85rem;
    line-height: 1.0;
    color: #fff;
  }

  .footer-column ul {
    margin: 0;
    padding: 0;
    list-style: disc;
  }
}


@media (max-width: 768px) {
  .blueprints-grid {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .blueprint-card {
    width: 100%;
    max-width: 420px;
  }
}

/* ───────────────────────────────────────────────
   MOBILE SWIPER TWEAK: let Swiper size slides &
   give a small left padding for the “peek”
───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .featured-plans-swiper {
    padding: 1.5rem 0;      /* vertical breathing room */
    overflow-x: hidden;    /* just in case */
  }


  /* style the arrows */
  .featured-plans-swiper .swiper-button-prev,
  .featured-plans-swiper .swiper-button-next {
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    background: rgba(0,0,0,0.3);
    border-radius: 50%;
    color: #fff;
  }
  .featured-plans-swiper .swiper-button-prev { left: 8px;  }
  .featured-plans-swiper .swiper-button-next { right: 8px; }
}

/* only on the All Blueprints page */
@media (max-width: 414px) {
  .all-blueprints-page .plan-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 0 12px;
  }

  /* .all-blueprints-page .plan-card {
    position: relative;
    width: 100%;
    padding-top: 125%;
  } */

  /* your .plan-info, .plan-image, etc… */
}

@media (max-width: 768px) {
  .featured-plans-swiper .plan-card {
    width: 260px !important;
    padding-top: initial !important;
  }
}


/* ───────────────────────────────────────────────
   HOME SLIDER: plan-info BELOW the image
──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .featured-plans-swiper .plan-card {
    /* stack image + info vertically, auto height */
    display: flex;
    flex-direction: column;
    height: auto !important;
    padding: 0 !important;
  }
  .featured-plans-swiper .plan-image {
    /* let the image size itself */
    position: relative;
    width: 100%;
    padding-top: 0 !important;
    overflow: hidden;
  }
  .featured-plans-swiper .plan-image img {
    /* full width, auto height */
    width: 100%;
    height: auto;
    object-fit: contain;
  }
  .featured-plans-swiper .plan-info {
    /* now sits under the image, full width */
    position: static !important;
    margin: 0.75rem auto 0; /* a little breathing room */
    width: 90%;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  }
}

/* ───────────────────────────────────────────────
   HOME SLIDER: arrows OUTSIDE the cards
──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .featured-plans-swiper .swiper-button-prev,
  .featured-plans-swiper .swiper-button-next {
    /* shrink them and give a bit of bleed past the card */
    width: 2rem;
    height: 2rem;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.3);
  }
  .featured-plans-swiper .swiper-button-prev {
    left: -1.5rem;   /* pulls the left arrow outside the card */
  }
  .featured-plans-swiper .swiper-button-next {
    right: -1.5rem;  /* pulls the right arrow outside the card */
  }
}

@media (max-width: 414px) {
  .featured-plans-swiper .plan-card {
    /* undo the “square” hack */
    padding-top: 0 !important;
    height: auto !important;
  }
}

/* only on the All Blueprints listing page */
@media (max-width: 414px) {
     .all-blueprints-page .plan-card {
       position: relative;
       width: 100%;
       padding-top: 125%;
       border-radius: 12px;
       overflow: hidden;
       background: #5e3d29;
       box-shadow: 0 6px 12px rgba(0,0,0,1);
     }
}

/* ──────────────────────────────────────────────────
   SLIDER CARD: split into white image panel + brown info
─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .featured-plans-swiper .plan-card {
    /* make the card just a wrapper for the two panels */
    display: flex;
    flex-direction: column;
    background: transparent !important;
    border-radius: 12px !important;        /* outer rounding */
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
    width: 260px !important;               /* or whatever you prefer */
    height: auto !important;
    padding: 0 !important;
  }

  /* ditch the old absolute link hack */
  .featured-plans-swiper .plan-card > a {
    position: static !important;
    inset: auto !important;
    display: block !important;
  }

  .featured-plans-swiper .plan-image {
    background: #fff !important;
    border-radius: 12px 12px 0 0 !important;  /* only top corners */
    overflow: hidden;
    padding: 0 !important;
    margin: 0; 
  }
  .featured-plans-swiper .plan-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .featured-plans-swiper .plan-info {
    background: #5e3d29 !important;
    color: #fff !important;
    border-radius: 0 0 12px 12px !important; /* only bottom corners */
    margin: 0 !important;
    width: 100% !important;
    box-shadow: none !important;
    padding: 12px 8px !important;
  }

  /* move arrows outside again if needed */
  .featured-plans-swiper .swiper-button-prev {
    left: 0.5rem !important;
  }
  .featured-plans-swiper .swiper-button-next {
    right: 0.5rem !important;
  }
}

@media (max-width: 768px) {
  
  .featured-plans-swiper .plan-card {
    width: 100%;               /* fill that 280px */
  }

  /* 2) lock the two panels to consistent heights */
  .featured-plans-swiper .plan-image {
    height: 170px;             /* same image area on every card */
    border-radius: 12px 12px 0 0 !important;
  }
  .featured-plans-swiper .plan-info {
    height: 60px;              /* same info‐panel height */
    line-height: 1.2;
    border-radius: 0 0 12px 12px !important;
    padding: 0px 0px !important;
  }

  /* 3) nudge arrows outside and above the cards */
  .featured-plans-swiper .swiper-button-prev,
  .featured-plans-swiper .swiper-button-next {
    z-index: 20;
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(0,0,0,0.35);
    top: 50%;
    transform: translateY(-50%);
  }
  .featured-plans-swiper .swiper-button-prev { left: -32px; }
  .featured-plans-swiper .swiper-button-next { right: -32px; }

  .about-section {
    position: relative;
    background-size: cover;
    background-position: 0px 0px;
    height: 363px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

}


/* only on mobile */
@media (max-width: 768px) {
  /* hide the desktop nav & show our hamburger */
  .site-header .site-nav { display: none; }
  .mobile-nav-toggle {
    position: fixed;
    top: 0.5rem; right: 1rem;
    z-index: 1100;
    background: transparent;
    border: none;
    font-size: 1.8rem;
    color: #fff;
  }

  /* off-canvas panel */
  .mobile-nav-panel {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 80%;
    max-width: 300px;
    background: #f5e0c7;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    z-index: 1050;
    padding: 2rem 1rem;
  }
  .mobile-nav-panel.open {
    transform: translateX(0);
  }

  .mobile-nav-menu {
    list-style: none;
    margin: 0; padding: 0;
  }
  .mobile-nav-menu li {
    margin-bottom: 1rem;
  }
  .mobile-nav-menu a {
    color: #3a2a1e;
    font-size: 1.1rem;
    text-decoration: none;
  }
}


/*   Desktop: hide mobile toggle & panel, show regular nav   */
@media (min-width: 769px) {
  .mobile-nav-toggle,
  .mobile-nav-panel {
    display: none !important;
  }
  .site-header .site-nav {
    display: flex;  /* or whatever you use */
  }
}

/*   Mobile: hide regular nav, show toggle & panel   */
@media (max-width: 768px) {
  .site-header .site-nav {
    display: none;
  }
  .mobile-nav-toggle {
    display: block;
  }
  .mobile-nav-panel {
    display: block;
  }
}

/* only mobile */
@media (max-width: 768px) {

  /* off-canvas panel (you may already have this) */
  .mobile-nav-panel {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 80%;
    max-width: 280px;
    background: #f5e0c7;
    transform: translateX(-100%);
    transition: transform .3s ease;
    padding: 2rem 1rem;
    overflow-y: auto;
    z-index: 1000;
  }
  .mobile-nav-panel.open {
    transform: translateX(0);
  }

  /* your mobile menu list */
  .mobile-nav-menu,
  .mobile-nav-menu ul {
    list-style: none;
    margin: 0; padding: 0;
  }
  .mobile-nav-menu > li {
    margin-bottom: 1rem;
  }
  .mobile-nav-menu a {
    color: #3a2a1e;
    text-decoration: none;
    font-size: 1.1rem;
  }

  /* collapse all sub-menus by default */
  .mobile-nav-menu .sub-menu {
    display: none;
    margin-left: 1.5rem;
  }

  /* toggle-button for Styles */
  .menu-item-has-children > a {
    display: inline-block;
    width: calc(100% - 1.5rem);
  }
  .menu-item-has-children > .submenu-toggle {
    background: none;
    border: none;
    font-size: 1.1rem;
    padding: 0;
    margin-left: .5rem;
    cursor: pointer;
  }
  .menu-item-has-children.open > .sub-menu {
    display: block;
  }
}

@media (max-width: 768px) {
  /* hide the desktop “mega-menu” panel on mobile */
  .site-nav .has-mega-menu > .mega-menu {
    display: none !important;
  }
}
@media (min-width: 769px) {
  .site-nav .has-mega-menu > .mega-menu {
    display: flex !important;   /* or whatever your default is */
  }
}

/* off-canvas panel (mobile) */
@media (max-width: 768px) {
  .mobile-nav-panel {
    position: fixed; top:0; left:0; bottom:0;
    width: 80%; max-width: 300px;
    background: #f5e0c7;
    transform: translateX(-100%);
    transition: transform .3s ease;
    padding: 2rem 1rem;
    overflow-y: auto;
    z-index: 1000;
  }
  .mobile-nav-panel.open {
    transform: translateX(0);
  }

  .mobile-nav-menu,
  .mobile-nav-menu ul {
    list-style: none;
    margin: 0; padding: 0;
  }
  .mobile-nav-menu > li {
    margin-bottom: 1.2rem;
  }
  .mobile-nav-menu a {
    color: #3a2a1e;
    font-size: 1.1rem;
    text-decoration: none;
  }

  /* hide any WP “mega-menu” markup in this panel */
  .mobile-nav-menu .has-mega-menu > .mega-menu {
    display: none !important;
  }

  /* collapse all real submenus */
  .mobile-nav-menu .sub-menu {
    display: none;
    margin-left: 1.5rem;
  }

  /* a little toggle button after "Styles" */
  .mobile-nav-menu .menu-item-has-children {
    position: relative;
  }
  .mobile-nav-menu .menu-item-has-children > .submenu-toggle {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
  }
  /* show it when open */
  .mobile-nav-menu .menu-item-has-children.open > .sub-menu {
    display: block;
  }
}

/* desktop only → show .site-nav, hide hamburger/panel */
@media (min-width: 769px) {
  .site-nav              { display: flex; }
  .mobile-nav-toggle,
  .mobile-nav-panel      { display: none !important; }
}

/* mobile only → hide .site-nav, show hamburger/panel */
@media (max-width: 768px) {
  .site-nav              { display: none !important; }
  .mobile-nav-toggle     { display: block; }
  .mobile-nav-panel      { display: block; }
}

@media (max-width: 768px) {
  /* hide desktop mega panel in mobile menu */
  .mobile-nav-menu .has-mega-menu > .mega-menu {
    display: none !important;
  }

  /* when we toggle that <li> open, reveal it */
  .mobile-nav-menu .has-mega-menu.open > .mega-menu {
    display: flex !important;
    flex-wrap: wrap;
    gap: 1rem;
  }
}

/* Hide desktop mega on mobile */
@media (max-width: 768px) {
  .mobile-nav-menu .has-mega-menu > .mega-menu {
    display: none !important;
  }
  .mobile-nav-menu .has-mega-menu.open > .mega-menu {
    display: flex !important;
    flex-wrap: wrap;
    gap: 1rem;
  }
}
/* Ensure desktop mega is visible again on wide */
@media (min-width: 769px) {
  .site-nav .has-mega-menu > .mega-menu {
    display: flex !important;
  }
}

@media (max-width: 768px) {
  /* 1) hide every mega‐menu by default in the off-canvas nav */
  .mobile-nav-menu .has-mega-menu > .mega-menu {
    display: none !important;
  }

  /* 2) when this <li> has .open, show its mega‐menu */
  .mobile-nav-menu .has-mega-menu.open > .mega-menu {
    display: flex !important;
    /* you can adjust direction/wrapping to taste */
    flex-direction: column;
    gap: 1rem;
    pointer-events: auto;
    opacity: 1;
  }
}

@media (max-width: 768px) {
  /* 1) Make sure the mega‐menu is hidden, and no longer absolute */
  .mobile-nav-menu .menu-item-has-children > .mega-menu {
    display: none !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    margin: 0;
    padding: 0;
  }

  /* 2) When the LI has .open, show it inline and push the rest down */
  .mobile-nav-menu .menu-item-has-children.open > .mega-menu {
    display: flex !important;
    flex-direction: row;    /* stack your cards vertically */
    gap: 1rem;                 /* space between cards */
    margin: 0.5rem 0;          /* breathing room above/below */
    background-color: transparent;
    box-shadow: none;
  }

  /* Center every .style-card-link in its grid cell */
  .featured-styles-overlay .style-grid,
  .mobile-nav-menu .has-mega-menu .style-grid {
    /* make sure each column is full-width but children are centered */
    display: grid;              
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 20px 0;
    /* ↓ center items in their 1fr columns ↓ */
    justify-items: center;
  }

  /* if you want to be extra safe you can also */
  .featured-styles-overlay .style-card-link,
  .mobile-nav-menu .has-mega-menu .style-card-link {
    justify-self: center;
  }

  /* make the toggle sit next to the link text */
  .menu-item-has-children {
    display: inline-flex;      /* treat the menu item as an inline flex container */
    align-items: center;       /* vertically center its contents */
    gap: 0.25em;               /* little space between text and arrow */
  }

  /* normalize the button itself */
  .mega-toggle {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.9em;          /* match your link size */
    line-height: 1;
    cursor: pointer;
    /* no need for display:block—inline-flex parent handles alignment */
  }


}


/* ───────────────────────────────────────────────
   MOBILE: TWO-COLUMN STYLES GRID + “ALL STYLES” BUTTON
──────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* 1) Two‐column grid, tighter gap */
  .mobile-nav-menu .has-mega-menu .style-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem  /* vertical gap */;
    padding: 0.5rem 0;
  }

  /* 2) Shrink cards to fill each column */
  .mobile-nav-menu .has-mega-menu .style-card-link {
    max-width: 140px;
    margin: 0 auto;
  }

  /* 3) Remove any border on each card */
  .mobile-nav-menu .has-mega-menu .style-card {
    border: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  }

  /* 4) Let the “All Styles” button span full width under the grid */
  /* Assuming WP outputs it as the last .style-card-link in that grid */
  .mobile-nav-menu .has-mega-menu .style-grid .style-card-link:last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
    max-width: none;
    margin-top: 1rem;
  }
}


/* ───────────────────────────────────────────────
   MOBILE: Two-column Styles grid + full-width “All Styles” button
   (only when the Styles menu is open)
───────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Target when the “Styles” li has .open and its mega-menu is visible */
  .mobile-nav-menu .menu-item-has-children.open > .mega-menu {

    /* 1) Turn the inner style-grid into 2 columns */
    .style-grid {
      display: grid !important;
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 0.75rem !important;
      padding: 0.5rem 0 !important;
    }

    /* 2) Shrink each card so two side-by-side */
    .style-card-link {
      max-width: 140px !important;
      margin: 0 auto !important;
    }

    /* 3) Remove default border, leave a soft shadow */
    .style-card {
      border: none !important;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
    }

    /* 4) Make the last card (your “All Styles” link) span both columns */
    .style-grid .style-card-link:last-child {
      grid-column: 1 / -1 !important;
      justify-self: center !important;
      width: 100% !important;
      max-width: none !important;
      margin-top: 1rem !important;
    }
  }

  /* ───────────────────────────────────────────────
   MOBILE: HIDE BY DEFAULT, SHOW ON .open, STACK VERTICALLY
──────────────────────────────────────────────── */
.mobile-nav-menu .menu-item-has-children {
  /* turn the LI into a vertical container */
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important; /* left-align link + toggle */
}

/* hide the mega-menu until the parent LI gets .open */
.mobile-nav-menu .menu-item-has-children > .mega-menu {
  display: none !important;
}

/* when the LI is open, reveal it as a 2-col grid under the toggle */
.mobile-nav-menu .menu-item-has-children.open > .mega-menu {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 12px !important;
  width: 100% !important;
  margin-top: 0.5rem !important;
  padding: 0 !important;
}

/* make each card fill its column */
.mobile-nav-menu .menu-item-has-children.open .mega-menu .style-card {
  width: 100% !important;
}


}


@media only screen and (max-width: 430px) {
  
  
  /* ─── MOBILE CARD BASE ───────────────────────────────────────────────────── */

.profile-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #fff;
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  width: 100%;
  margin-bottom: 2rem;
}

.profile-card img,
.profile-card .avatar {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid #5e3d29;
  object-fit: cover;
}

.profile-card .details {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.profile-card .details h2 {
  margin: 0;
  font-size: 1.25rem;
  color: #3a2a1e;
  line-height: 1.2;
}

.profile-card .details p {
  margin: .25rem 0 0;
  color: #666;
  font-size: .9rem;
}

.profile-card .logout-wrapper {
  margin-left: auto;
}

.profile-card .logout-button {
  display: inline-block;
  background: #5e3d29;
  color: #fff;
  padding: .5rem 1rem;
  border-radius: 6px;
  font-size: .9rem;
  text-decoration: none;
  font-weight: 500;
  transition: background .25s ease;
}
.profile-card .logout-button:hover {
  background: #4a2f1f;
}

}

@media only screen and (max-width: 431px) {
  /* (You can tweak these a hair if you want slightly smaller 
     fonts or padding on those very smallest screens.) */

  .profile-card {
    padding: .75rem;
    gap: .75rem;
  }

  .profile-card img,
  .profile-card .avatar {
    width: 64px;
    height: 64px;
    border-width: 2px;
  }

  .profile-card .details h2 {
    font-size: 1.1rem;
  }

  .profile-card .details p {
    font-size: .8rem;
  }

  .profile-card .logout-button {
    padding: .4rem .8rem;
    font-size: .85rem;
  }

  /* 1) Stack avatar / details / logout vertically */
  .profile-card {
    flex-direction: column;
    align-items: flex-start; /* left-align everything */
    text-align: left;        /* keep text flush left */
  }

  /* 2) Push the logout button down under the email */
  .profile-card .logout-wrapper {
    margin-left: 0;      /* cancel the old auto-margin */
    margin-top: -0.5rem;    /* give it a little breathing room */
  }

  /* in your mobile media-query */
  .preview-grid {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;        /* horizontal scroll */
    padding: 0.5rem 1rem;
  }

  .preview-grid .plan-card {
    flex: 0 0 200px;         /* fixed thumbnail width */
    padding: 0.5rem;
    box-shadow: none;         /* lighter touch */
  }

  .preview-grid .plan-image img {
    height: 120px;            /* small thumbnail */
    object-fit: cover;
  }

  .preview-grid .plan-info {
    display: none;            /* hide the long spec grid completely */
  }

  .saved-list .saved-details { display: none; }
  .saved-list .saved-summary { cursor: pointer; }
  .saved-list li.open .saved-details { display: block; }
  .spec-grid > div:nth-child(n+3) { display: none; }  /* show only first two stats */
  .plan-card { padding-bottom: 0.5rem; }               /* tighten up the bottom */

}

@media (max-width: 431px) {

  .blueprint-card {
    height: auto !important;
  }

  .preview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0 12px;
  }
  .preview-grid .blueprint-card {
    width: 100%;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
  }

  /* 2) only show first two stats */
  .preview-grid .blueprint-card .special-grid > div:nth-child(n+3) {
    display: none;
  }

  /* 1) Remove the bottom padding on the content block */
  .preview-grid .blueprint-card .card-body {
    padding-bottom: 0 !important;
  }

  /* 2) Kill the “space-between” flex alignment so nothing is forced apart */
  .preview-grid .blueprint-card .card-body {
    justify-content: flex-start !important;
  }

  /* 3) And collapse any top-margin / padding on your footer row */
  .preview-grid .blueprint-card-footer {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* 1. Collapse the spacing algorithm on the card itself */
  .preview-grid .blueprint-card {
    justify-content: flex-start !important;
    max-height: fit-content;
    min-height: 390px;
  }

  /* 2. Remove that auto-margined gutter on the footer */
  .preview-grid .blueprint-card-footer {
    margin-top: 0 !important;
  }

  .blueprint-card img {
      height: 162px;
      object-fit: cover;
      width: 100%;
  }

  .blueprint-card .card-body h4 {
    margin-top: 0.5rem;
  }

  .special-grid {
    margin-top: 0rem;
  }
  
}


/* collapse flex.split and kill any auto‐margins */
@media (max-width: 480px) {
  .preview-grid .blueprint-card {
    /* no more space‐between pushing the footer down */
    justify-content: flex-start !important;
  }
  .preview-grid .blueprint-card-footer {
    /* kill that margin‐top:auto */
    margin-top:      0 !important;
    padding-top:     0 !important;
  }

  /* let the cards size themselves & stack top-to-bottom */
  .preview-grid .blueprint-card,
  .blueprints-grid    .blueprint-card {
    height: auto !important;
    min-height: 0    !important;
    justify-content: flex-start !important;
    max-height: none !important;
  }

  /* only show the first two specs in every grid */
  .preview-grid .blueprint-card .special-grid > div:nth-child(n+3),
  .blueprints-grid    .blueprint-card .special-grid > div:nth-child(n+3) {
    display: none !important;
  }

  /* kill any auto-margin on the footer row so it hugs the specs */
  .preview-grid .blueprint-card-footer,
  .blueprints-grid    .blueprint-card-footer {
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-right: 1.5rem;
    padding-left: 0.5rem;
  }

  .favorite-wrapper {
      margin-bottom: 0rem;
      margin-top: .5rem;

  }
  

}

/* ───────────────────────────────────────────────
   ACCOUNT INFO TAB — desktop two-column card
──────────────────────────────────────────────── */
@media (min-width: 769px) {
  /* wrap the entire form in a card */
  #account-info .account-form {
    background: #fff;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    margin: 2rem 0;
  }

  /* lay out your two halves side-by-side */
  #account-info .account-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
    row-gap: 1.5rem;
  }

  /* vertical divider on the left column */
  #account-info .profile-section {
    border-right: 1px solid #e2d8cc;
    padding-right: 1.5rem;
  }

  /* breathing room on the right column */
  #account-info .password-section {
    padding-left: 1.5rem;
  }

  /* headings & labels */
  #account-info .password-section h3 {
    margin-top: 0;
    color: #3a2a1e;
    font-size: 1.2rem;
  }
  #account-info .account-form label strong {
    display: block;
    margin-bottom: 0.25rem;
    color: #5e3d29;
  }

  /* inputs full width */
  #account-info .account-form input[type=text],
  #account-info .account-form input[type=email],
  #account-info .account-form input[type=password] {
    width: 100%;
    padding: 0.5rem;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 1rem;
  }

  /* buttons */
  #account-info .account-form .button {
    display: inline-block;
    background: #d2691e;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s ease;
  }
  #account-info .account-form .button:hover {
    background: #b55a1c;
  }
}

/* ───────────────────────────────────────────────
   STACK on tablets & phones
──────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* remove divider and grid on mobile */
  #account-info .profile-section {
    border-right: none;
    padding-right: 0;
  }
  #account-info .password-section {
    padding-left: 0;
    margin-top: 2rem;
  }
  #account-info .account-form-grid {
    display: block;
  }
  .account-form .account-form-grid::before {
      content: none;
      position: absolute;
      top: 1.5rem;
      bottom: 1.5rem;
      left: 50%;
      width: 1px;
      background-color: #ddd;
      transform: translateX(-50%);
  }

}

/* on mobile, only show the first two saved‐plan cards */
@media (max-width: 768px) {
  /* Profile overview (preview) */
  #profile-overview .preview-grid .blueprint-card:nth-child(n+3) {
    display: none !important;
  }

  /* ───────────────────────────────────────────────
    Mobile Off-Canvas Menu Styling
  ──────────────────────────────────────────────── */
  .mobile-nav-panel {
    /* semi-transparent warm background with a slight blur */
    background: rgba(245, 224, 199, 0.95);
    backdrop-filter: blur(6px);
    /* push it above everything and give a soft shadow */
    z-index: 2000;
    box-shadow: 4px 0 16px rgba(0,0,0,0.12);
    /* slide animation */
    transition: transform 0.3s ease-out;
    transform: translateX(-100%);
  }

  .mobile-nav-panel.open {
    transform: translateX(0);
  }

  /* space & shape */
  .mobile-nav-panel {
    width: 80%;
    max-width: 350px;
    padding: 2.5rem 1.5rem;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  /* style the list */
  .mobile-nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
  }


  /* links—big, bold, and interactive */
  .mobile-nav-menu a {
    display: block;
    font-size: 1.25rem;
    font-weight: 500;
    color: #3a2a1e;
    text-decoration: none;
    letter-spacing: 0.5px;
    padding: 0rem 0;
    transition: color 0.2s ease, transform 0.2s ease;
  }

  .mobile-nav-menu a:hover {
    color: #d2691e;
    transform: translateX(4px);
  }

  /* optional: a little close “×” in the corner */
  .mobile-nav-panel .close-panel {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 1.5rem;
    color: #3a2a1e;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s ease;
  }

  .mobile-nav-panel .close-panel:hover {
    color: #d2691e;
  }

  /* ───────────────────────────────────────────────
    Mobile Menu “active” indicator
  ───────────────────────────────────────────────── */
  .mobile-nav-menu li.current-menu-item > a,
  .mobile-nav-menu li.current_page_item > a,
  .mobile-nav-menu li.active > a {
    color: #d2691e;          /* highlight text */
    font-weight: 600;
  }

  /* make room for the bar */
  .mobile-nav-menu a {
    display: block;
    padding-left: 0rem;      /* shift text right so it never overlaps the bar */
    position: relative;
  }

  /* the bar itself */
  /* .mobile-nav-menu li.current-menu-item::before,
  .mobile-nav-menu li.current_page_item::before,
  .mobile-nav-menu li.active::before {
    content: "";
    position: absolute;
    left: 0; top: 0;
    width: 4px;
    height: 100%;
    background: #d2691e;
  } */

  /* ───────────────────────────────────────────────
    Mobile Menu “active” indicator
  ───────────────────────────────────────────────── */
  .mobile-nav-menu li > a {
    position: relative;
    padding-left: 1rem;
  }

  .mobile-nav-menu li.active > a {
    color: #d2691e;
    font-weight: 600;
  }

  .mobile-nav-menu li.active::before {
    content: "";
    position: absolute;
    left: 0; top: 0;
    width: 4px;
    height: 100%;
    background: #d2691e;
  }

  /* style “My Account” as a header, not a real link */
  .mobile-nav-menu .menu-header {
    display: block;
    cursor: default;
    font-weight: 600;
    color: #3a2a1e;
    padding: 0.75rem 0;
    margin-top: 1rem;
    /* border-top: 1px solid rgba(58,42,30,0.1); */
  }

  /* indent the three child links underneath */
  .mobile-nav-menu .menu-item-has-children .sub-menu {
    display: none;             /* hidden until toggle adds .open */
    padding-left: 1rem;
    margin: 0.5rem 0 1rem;
  }
  .mobile-nav-menu .menu-item-has-children.open > .sub-menu {
    display: block;
  }
  .mobile-nav-menu .sub-menu .menu-item a {
    display: block;
    padding: 0.5rem 0;
    font-weight: 500;
    color: #d2691e;            /* your “active” color */
  }
  .mobile-nav-menu .sub-menu .menu-item a:hover {
    color: #b55a1c;
  }

  .mobile-nav-menu .menu-header {
    position: relative;
  }
  .mobile-nav-menu .menu-header::after {
    content: '▾';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    line-height: 1;
  }

  /* style your header */
  .mobile-nav-menu .menu-header {
    position: relative;
    cursor: default;
    font-weight: 600;
    color: #3a2a1e;
    padding: 0.75rem 0;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    /* little arrow you already added: */
  }
  .mobile-nav-menu .menu-header::after {
    content: '▾';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  /* sub-menu group separator (one faint line above them) */
  .mobile-nav-menu .sub-menu {
    border-top: 1px solid rgba(58,42,30,0.1);
    padding-top: 0.75rem;
    margin-bottom: 1rem;
  }

  .site-branding .site-title {
      font-family: 'Merriweather', serif;
      font-size: 1.2rem;
      font-weight: 700;
      color: #3c2f27;
      text-decoration: none;
      text-transform: none;
      letter-spacing: 1px;
  }

  /* 1) Only top-level siblings get the big divider */
  .mobile-nav-menu > li + li {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(58, 42, 30, 0.1);
  }

  /* 2) Remove any divider between sub-menu items */
  .mobile-nav-menu .sub-menu li + li {
    border: none !important;
    margin: 0.5rem 0;
    padding: 0;
  }

  /* 3) Add exactly one faint separator above the whole sub-menu */
  .mobile-nav-menu .menu-item-has-children.open > .sub-menu {
    border-top: 1px solid rgba(58,42,30,0.1);
    padding-top: 0.75rem;
    margin-bottom: 1rem;
  }

  /* 4) Tweak My Account header spacing & arrow */
  .mobile-nav-menu .menu-header {
    position: relative;
    display: block;
    cursor: default;
    font-weight: 500;
    color: #3a2a1e;
    padding: 0.75rem 0;
    margin: 0rem; /* top/bottom */
  }
  .mobile-nav-menu .menu-header::after {
    content: '▾';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  /* align “My Account” label with the other items */
  .mobile-nav-menu .menu-header {
    /* match the left padding you use on your links */
    padding-left: 1rem !important;
    /* if you want the same vertical padding too: */
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  /* nudge the arrow back in */
  .mobile-nav-menu .menu-header::after {
    right: 1rem !important;
  }

  .mobile-nav-menu .company-home {
    display: block;
    white-space: nowrap;       /* no wrapping */
    overflow: hidden;          /* hide any overflow */
    text-overflow: ellipsis;   /* add “…” if it really can’t fit */
    display: block;            /* ensure text-overflow works */
    font-size: 1rem;           /* reduce slightly if needed */
    letter-spacing: 0;         /* tighten up if you still see a break */
  }

  /* Make the header a flex row, title on the left, toggle on the right */
  .site-header {
    position: relative;               /* so z-index does its job */
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;                  /* tweak your left/right gutter */
    background: #c69c6d;              /* same as your top bar, if you like */
    z-index: 2000;                    /* float above everything */
    height: 3.5rem;                   /* match your top-bar height */
  }

  /* Your site title */
  .site-header .site-branding {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.2rem;                /* or whatever you use */
  }

  /* Always show the mobile-nav toggle */
  .site-header .mobile-nav-toggle {
    display: block !important;
    z-index: 2100;                    /* above even the header */
    position: relative;               /* respect the header’s flex layout */
    margin: 0;                        /* ditch any auto-margins */
    font-size: 1.8rem;                /* your “hamburger” size */
    color: #fff;                      /* or your icon color */
  }

  /* 1) Turn your header into a positioned flex‐row */
  .site-header {
    position: relative;           /* for the absolute toggle */
    display: flex !important;
    align-items: center;
    padding: 0 1rem;              /* gutter either side */
    height: 3.5rem;               /* match your top‐bar height */
    z-index: 2000;                /* float above content */
  }

  /* 2) Ensure branding (title) sits on the left */
  .site-header .site-branding {
    flex: 1;                      /* take up all the remaining space */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.2rem;            /* whatever your size is */
  }

  /* 3) Yank the toggle out of the flow, pin to right */
  .site-header .mobile-nav-toggle {
    position: absolute;
    top: 50%;
    right: 1rem;                  /* align to your gutter */
    transform: translateY(-50%);
    display: block !important;    /* override any “display:none” */
    font-size: 1.8rem;            /* your hamburger size */
    z-index: 2100;                /* above everything else */
  }
  
}

@media (max-width: 768px) {
  /* 1) Let the wrapper overflow so arrows sit outside the slide */
  .featured-plans-swiper {
    overflow: visible !important;
    padding: 0 !important;
  }

  /* 5) Position prev/next arrows right at the edges */
  .featured-plans-swiper .swiper-button-prev,
  .featured-plans-swiper .swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(0,0,0,0.3);
    border-radius: 50%;
    z-index: 10;
  }
  .featured-plans-swiper .swiper-button-prev {
    left: 0.5rem;
  }
  .featured-plans-swiper .swiper-button-next {
    right: 0.5rem;
  }
}

@media (max-width: 768px) {
  /* 3) shift the nav buttons fully outside the wrapper padding */
  .featured-plans-swiper .swiper-button-prev {
    left: 0 !important;
  }
  .featured-plans-swiper .swiper-button-next {
    right: 0 !important;
  }
}

@media (max-width: 768px) {
  /* 1) Kill any extra wrapper padding & let slides overflow so arrows can sit outside */
  .featured-plans-swiper {
    overflow: visible !important;
    padding: 0 !important;
  }
  /* 4) Nudge nav buttons out to the very edges */
  .featured-plans-swiper .swiper-button-prev,
  .featured-plans-swiper .swiper-button-next {
    top: 50%;
    transform: translateY(-50%);
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(0,0,0,0.3);
    border-radius: 50%;
    z-index: 10;
  }
  .featured-plans-swiper .swiper-button-prev { left: 0; }
  .featured-plans-swiper .swiper-button-next { right: 0; }

  

  /* prev arrow stuck to left */
  .featured-plans-swiper .swiper-button-prev {
    left: 0        !important;
    right: auto   !important;
    top: 50%      !important;
    transform: translateY(-50%) !important;
  }

  /* next arrow stuck to right */
  .featured-plans-swiper .swiper-button-next {
    right: 0      !important;
    left: auto    !important;
    top: 50%      !important;
    transform: translateY(-50%) !important;
  }

  /* nuke any “peek” gutter from earlier rules */
  .featured-plans-swiper .swiper-wrapper {
    padding-left: 0 !important;
  }
  

  /* pin arrows to the very edges */
  .featured-plans-swiper .swiper-button-prev {
    left: 0   !important;
    right: auto !important;
  }
  .featured-plans-swiper .swiper-button-next {
    right: 0  !important;
    left: auto  !important;
  }


   /* make sure nothing else is pushing slides around */
  .featured-plans-swiper {
    padding: 0 !important;
    overflow: hidden !important;
  }
  .featured-plans-swiper .swiper-wrapper {
    padding: 0 !important;
    /* no justify-content here! */
  }
  .featured-plans-swiper .swiper-slide {
    /* fill 100% of the container and use your JS spaceBetween */
    flex: 0 0 100% !important;
    margin-right: 16px !important;
  }
  .featured-plans-swiper .swiper-slide:last-child {
    margin-right: 0 !important;
  }
  /* pin arrows to the edges */
  .featured-plans-swiper .swiper-button-prev {
    left:  0 !important;
    right: auto !important;
  }
  .featured-plans-swiper .swiper-button-next {
    right: 0 !important;
    left:  auto !important;
  }
}

@media (max-width: 768px) {
  #mobile-nav-panel .search-wrapper {
    margin-bottom: 1.5rem;
  }
  #search-input-mobile {
    width: 100%;
    padding: .5rem 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
  }

  .hero-section {
      position: relative;
      height: 65vh;
      min-height: 400px;
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: white;
      /* background-position: 0px -363px; */
  }

  .featured-styles-overlay .style-card {
      width: 10.5rem;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease;
      background: #fff;
      font-family: 'Inter', sans-serif;
    }

}

/* 1) Make the two-column layout stack */
@media (max-width: 768px) {
  .container.two-column-layout {
    display: flex;
    flex-direction: column;
    padding: 1rem;
  }
  .left-column, .right-column {
    flex: none;
    width: 100%;
  }
  /* 2) Tighten the summary grids to two columns */
  .summary-grid {
    display: grid;
    gap: 0.5rem;
  }

  /* 3) Hide extras by default, show on toggle */
  .extra-specs {
    display: none;
    margin-top: 0.75rem;
  }
  .toggle-extras {
    background: none;
    border: none;
    color: #5f3d2d;
    font-weight: 600;
    margin: 1rem 0 0;
    cursor: pointer;
    text-align: left;
  }
  .toggle-extras.open + .extra-specs {
    display: grid;
  }

  /* 4) Style the <details> accordion */
  .plan-about {
    border: 1px solid #e2d5c1;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    margin-bottom: 1.5rem;
  }
  .plan-about summary {
    font-weight: 700;
    cursor: pointer;
  }
  .plan-about p {
    margin: 0.75rem 0 0;
    line-height: 1.4;
  }

  /* 5) Make the “Back to All Blueprints” button full-width on mobile */
  .blueprint-actions .button.ghost {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.75rem 0;
    margin-top: 1.5rem;
  }

  /* hide by default with a collapsing max-height */
  .filters-sidebar {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
  }

  /* open state expands it */
  .filters-sidebar.active {
    max-height: 100%; /* or whatever space you want */
  }

  /* give the scrolling area inside */
  .filters-sidebar > * {
    padding: 1rem;
  }

  /* ensure the toggle sits above the panel */
  .filter-toggle-btn {
    position: relative;
    z-index: 2;
    margin-bottom: 0.5rem;
  }

  /* Make sure the filter container sits above everything */
  .filters-sidebar {
    position: static;   /* create a new stacking context */
    z-index: 10;          /* higher than your cards */
    background: #f5e0c7;   /* match your page bg so you don’t see thru */
  }

  /* Pin the toggle button above it, too */
  .filter-toggle-btn {
    position: relative;
    z-index: 11;
  }

  .checkbox-label input[type="checkbox"] {
      width: 10% !important;
  }
}

@media (max-width: 480px) {
  .summary-grid.main-specs {
    grid-template-columns: repeat(2, 1fr);
  }
  .summary-grid.extra-specs {
    grid-template-columns: repeat(1, 1fr);
  }
}


@media (max-width: 768px) {
  /* panel off-canvas by default */
  .filters-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 100%;
    max-width: 100%;
    background: #ddc8aa;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 0;
  }
  /* when you add .active it slides in */
  .filters-sidebar.active {
    transform: translateX(0);
  }

  /* header with count + close button */
  .filters-header {
    display: flex;
    justify-content: end;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid #eee;
    font-weight: 600;
  }
  .filters-header .results-count { font-size: 1rem; }
  .filters-close {
    background: none;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
  }

  /* make your label/control pairs stack neatly */
  #blueprint-filters label,
  #blueprint-filters input,
  #blueprint-filters select {
    width: 90%;
    box-sizing: border-box;
    margin: 0.5rem 1rem;
  }
  #blueprint-filters label {
    font-weight: 600;
  }
  #blueprint-filters input,
  #blueprint-filters select {
    padding: 0.6rem;
    border-radius: 6px;
    border: 1px solid #ddd;
  }

  /* collapse/expand sections styling */
  .filter-section {
    border-top: 1px solid #eee;
    padding: 1rem;
  }
  .filter-section h4 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 0.5rem;
    cursor: pointer;
  }
  .filter-section h4::after {
    content: '+';
    font-size: 1.2rem;
    line-height: 1;
  }
  .filter-section.open h4::after {
    content: '−';
  }
  .filter-section .checkbox-label {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
  }
  .filter-section .checkbox-label input {
    margin-right: 0.5rem;
  }

  /* sticky footer for clear & apply */
  .filters-footer {
    margin-top: auto;
    padding: 1rem;
    background: #ddc8aa;
    border-top: 1px solid #eee;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
  }
  .clear-filters,
  .apply-filters {
    flex: 1;
    padding: 0.75rem;
    font-size: 1rem;
    border-radius: 6px;
    border: none;
  }
  .clear-filters {
    background: #f0f0f0;
    color: #333;
  }
  .apply-filters {
    background: #005a9c;
    color: #fff;
  }

  .filters-close {
      display: flex;
  }
}