@media (max-width: 860px){

  .nav-toggle{ display:block; }



  /* Mobile nav container */

  .site-nav{

    display: none;

    width: 100%;

    margin-top: 10px;

    padding: 12px;

    border: 1px solid var(--border);

    background: rgba(255,255,255,.85);

    border-radius: 18px;



    /* ✅ force vertical */

    flex-direction: column;

    flex-wrap: nowrap;      /* ✅ prevents “3 lines” wrapping */

    align-items: stretch;

    gap: 8px;

  }



  .site-nav.open{ display:flex; }



  /* Links as full-width rows */

  .site-nav a{

    width: 100%;

    display: block;

    padding: 12px 14px;

    border-radius: 16px;

    text-align: center;

  }



  /* Make CTA buttons centered */

  .site-nav a.pill,

  .site-nav a.pill-2{

    text-align: center;

    font-weight: 700;

  }



  .header-inner{ flex-wrap: wrap; }

  .card{ grid-column: span 12; }

}

/* Mobile: stack content vertically */
@media (max-width: 860px) {
  .countdown-section {
    height: auto;
    grid-template-columns: 1fr; /* Stack sections vertically */
  }

  .countdown-left {
    width: 100%; /* Make the left section take full width */
    margin-right: 0;
    padding: 22px;
  }

  .countdown-right {
    grid-template-columns: 1fr;
    width: 100%; /* Ensure the right section takes full width */
  }

  .countdown-image {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    height: 220px;
    margin-bottom: 12px;
  }

  .timer {
    display: flex;
    gap: 10px;
    justify-content: center; /* Center the timer */
    flex-wrap: nowrap; /* Ensure all countdown boxes stay on the same line */
  }

  .tbox {
    margin-right: 10px; /* Space between countdown boxes */
  }
}

@media (max-width: 860px){
  .admin-sidebar{
    position:relative;
    width:100%;
    height:auto;
    border-right:none;
    margin-bottom:12px;
  }

  .admin-content{
    margin-left:0;
  }
}