/** Shopify CDN: Minification failed

Line 443:81 Unexpected "{"
Line 443:82 Expected identifier but found "%"
Line 443:98 Expected identifier but found "*"

**/
#SchoolSearchBannerWrap{
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
  }

  /* Remove theme container restriction inside injected section */
  #SchoolSearchBannerWrap .page-width,
  #SchoolSearchBannerWrap .collection-hero__inner{
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Ensure banner image fills width */
  #SchoolSearchBannerWrap img{
    width: 100%;
    height: auto;
    display: block;
  }

  .school-search__collection-title{
    text-align: center;
    padding-top: 30px !important;
    padding-bottom: 30px !important;
    margin: clamp(12px, 3vw, 2.5rem) 0;
    font-size: clamp(28px, 6vw, 40px);
    font-weight: 300;
    text-transform: uppercase;
    line-height: 1.1;
  }

  .school-search--results-only #SchoolSearchInfoBlock{
    display: none !important;
  }

  #colors{
    color: #094E18 !important;
  }

  .dropdown-size{
    font-size: 18px !important;
  }

  #text-size{
    font-size: 20px;
  }

  .school-search{
    padding-top: 0 !important;
    padding-bottom: 50px;
  }

  .school-search__header{
    text-align: center;
    margin-bottom: 0 !important;
  }

  .school-search__title{
    font-size: clamp(32px, 7vw, 100px) !important;
    padding-top: clamp(36px, 6vw, 100px) !important;
    padding-bottom: clamp(18px, 4vw, 50px) !important;
    max-width: 3080px !important;
    word-break: normal;
  }

  @media (max-width: 520px){
    .school-search__title{
      letter-spacing: .02em !important;
      line-height: 1.08 !important;
      margin-bottom: 16px !important;
    }
  }

  .school-search__info{
    margin: 60px auto 40px;
    text-align: center;
    max-width: 900px;
    padding: 0 20px;
  }

  .school-search__info-inner{
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: 0.01em;
    color: #222;
  }

  .school-search__info-inner p{
    margin-bottom: 18px;
  }

  .school-search__info-inner strong{
    font-weight: 600;
  }

  /* ===== DROPDOWNS ===== */



.school-search__field{
  display: flex !important;
  flex-direction: column !important;
  width: 360px !important;
  max-width: 360px !important;
  min-width: 360px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  min-width: 0;
  padding-bottom: 0 !important;
}

  .school-search__field label{
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    height: auto !important;
    line-height: 1.2 !important;
    text-align: left !important;
    display: block;
    font-size: 12px;
    letter-spacing: .02em;
    opacity: .75;
  }

  .school-search__field select,
#SchoolSelect,
#GradeSelect{
  width: 100% !important;
  max-width: 100% !important;
  min-height: 48px !important;
  height: 48px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  border-radius: 2px;
  padding: 10px 42px 10px 14px !important;
  font: inherit;
  font-size: 16px !important;
  cursor: pointer;
  color: white !important;
}

 /* .school-search__field{
  display: flex !important;
  flex-direction: column !important;
  width: 150px;
  margin-left: 50px;
  margin-right: 50px;
  min-width: 0;
  padding-bottom: 0 !important;
  align-self: stretch;
}  */



  .school-search__hint{
    margin: 0 !important;
    padding: 0 !important;
    height: 18px;
    line-height: 18px;
    text-align: center;
    display: block;
    font-size: 11px;
    opacity: .55;
  }

  .school-search__field:not(:has(.school-search__hint))::after{
    content: "";
    height: 18px;
  }

  .school-search__status{
    margin: 12px 0 0;
    text-align: center;
    font-size: 12px;
    opacity: .7;
  }

  .school-search__banner{
    margin-top: 0 !important;
    margin-bottom: 18px;
  }

  .school-search__products{
    margin-top: 8px;
  }

  /* Ensure injected collection/banner area is centered */
  #SchoolSearchBannerWrap .shopify-section,
  #SchoolSearchBannerWrap .section,
  #SchoolSearchBannerWrap .collection-hero,
  #SchoolSearchBannerWrap .banner{
    margin-left: auto;
    margin-right: auto;
  }

  /* Remove extra unwanted titles visually */
  #SchoolSearchBannerWrap h1,
  #SchoolSearchBannerWrap h2.collection-hero__title,
  #SchoolSearchBannerWrap .collection-hero__title,
  #SchoolSearchProductsWrap h1,
  #SchoolSearchProductsWrap h2.collection-hero__title,
  #SchoolSearchProductsWrap .collection-hero__title,
  #SchoolSearchProductsWrap .collection__title,
  #SchoolSearchProductsWrap .title--primary,
  #SchoolSearchProductsWrap .main-page-title{
    display: none !important;
  }

  /* ===== Custom Dropdown Arrow ===== */

  

  /* ===== SCHOOL SEARCH PRODUCTS: Shopify card styling ===== */

  #SchoolSearchProductsWrap .product-grid{
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  #SchoolSearchProductsWrap .grid__item{
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  #SchoolSearchProductsWrap .card-wrapper{
    width: 100%;
  }

  #SchoolSearchProductsWrap .card{
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  #SchoolSearchProductsWrap .card__inner{
    width: 100%;
  }

  #SchoolSearchProductsWrap .card__media{
    background: #f3f3f3;
    overflow: hidden;
  }

  #SchoolSearchProductsWrap .card__media .media{
    background: #f3f3f3;
  }

  #SchoolSearchProductsWrap .card__media img{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: transform .35s ease;
    transform: translateZ(0);
  }

  #SchoolSearchProductsWrap .card-wrapper:hover .card__media img{
    transform: scale(1.08);
  }

  #SchoolSearchProductsWrap .card__content{
    padding-top: 10px;
  }

  /* ===== HARD RESET TITLE ===== */
  #SchoolSearchProductsWrap .card__heading,
  #SchoolSearchProductsWrap .card__heading a{
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    color: inherit !important;
    font-family: 'Texta-regular' !important;
    letter-spacing: normal !important;
    text-transform: none !important;
  }

  /* ===== HARD RESET PRICE ===== */
  #SchoolSearchProductsWrap .price,
  #SchoolSearchProductsWrap .price *{
    font-size: 16px !important;
    font-weight: 300 !important;
    line-height: 1.2 !important;
    color: inherit !important;
  }

  #SchoolSearchProductsWrap a,
  #SchoolSearchProductsWrap a:visited{
    color: inherit !important;
  }

  #SchoolSearchProductsWrap a:hover,
  #SchoolSearchProductsWrap a:focus,
  #SchoolSearchProductsWrap a:active{
    color: inherit !important;
    text-decoration: none !important;
  }

  /* ===== Responsive ===== */

  @media (max-width: 990px){
    #SchoolSearchProductsWrap .product-grid{
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }
  }

  @media (max-width: 768px){
  .school-search__controls{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .school-search__field{
    width: 100% !important;
    max-width: 420px !important;
    min-width: 0 !important;
  }

  #SchoolSearchProductsWrap .product-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}

  @media (max-width: 520px){
  .school-search__controls{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .school-search__field{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .school-search__field select,
  #SchoolSelect,
  #GradeSelect{
    width: 100% !important;
    min-height: 44px !important;
    height: 44px !important;
    font-size: 14px !important;
    padding: 10px 34px 10px 10px !important;
  }

  .school-search__field label{
    font-size: 12px;
  }

  #SchoolSearchProductsWrap .product-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}

.school-search__status{
  margin: 12px 0 0;
  text-align: center;
  min-height: 28px;
  font-size: 12px;
  opacity: 1;
}

.school-search__loader{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
}

.school-search__spinner{
  width: 22px;
  height: 22px;
  border: 2.5px solid rgba(9, 78, 24, 0.18);
  border-top-color: #094E18;
  border-radius: 50%;
  display: inline-block;
  animation: schoolSearchSpin 0.7s linear infinite;
}

.school-search__status-text{
  display: inline-block;
  font-size: 12px;
  color: #333;
}

@keyframes schoolSearchSpin{
  to { transform: rotate(360deg); }
}

.school-search__products{
  position: relative;
  transition: opacity 0.25s ease;
}

.school-search__products--loading{
  opacity: 0.45;
  pointer-events: none;
}

.school-search__products--loading::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  cursor: wait;
}

/* Center the school dropdown initially */
.school-search__controls {
  display: flex !important;
  justify-content: center !important; /* Center the dropdowns */
  align-items: center !important; /* Align dropdowns vertically */
  gap: 20px !important;
  width: 100%;
  margin: 0 auto 20px !important;
  flex-wrap: nowrap !important;
  /* {% comment %} transition: all 0.5s ease !important; /* Smooth transition */ {% endcomment %} */
}

/* School dropdown style */
#SchoolSelect {
  display: block;
  width: 360px !important; /* Fixed width for the SchoolSelect dropdown */
  margin: 0;
  padding: 10px 42px 10px 14px !important;
  font: inherit;
  font-size: 16px !important;
  cursor: pointer;
  color: white !important;
  transition: transform 0.5s ease; /* Smooth transition for moving */
}

/* Initially hide the Grade dropdown */
/* Hide entire grade field initially */
.school-search__controls:not(.show-grade) .school-search__field:nth-child(2) {
  display: none !important;
}

/* When a school is selected, show the Grade dropdown and move the School dropdown */
.school-search__controls.show-grade {
  justify-content: center !important;  /* Keep both dropdowns centered */
  gap: 20px !important;  /* Adjust space between dropdowns */
}

/* When the grade dropdown is visible, show it next to the school dropdown */


/* Responsive adjustments for small screens */
@media (max-width: 520px) {
  .school-search__controls {
    flex-direction: column !important; /* Stack dropdowns vertically on smaller screens */
    align-items: center !important;
    gap: 12px !important;
  }

  .school-search__field {
    width: 100% !important;
    max-width: 420px !important;
  }
}

/* ===== Skeleton Loader ===== */

.school-search-skeleton {
  display: none;
  width: 100%;
}

.school-search-skeleton--banner {
  display: none;
  width: 100%;
}

.school-search-skeleton__banner-box {
  width: 100%;
  height: clamp(220px, 38vw, 520px);
  border-radius: 0;
  background: #ececec;
}

.school-search-skeleton--products {
  display: none;
  width: 100%;
  margin-top: 10px;
}

.school-search-skeleton-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.school-search-skeleton-card {
  display: flex;
  flex-direction: column;
}

.school-search-skeleton-card__image {
  width: 100%;
  aspect-ratio: 1 / 1.2;
  background: #ececec;
  border-radius: 4px;
}

.school-search-skeleton-card__line {
  height: 14px;
  background: #ececec;
  border-radius: 4px;
  margin-top: 12px;
}

.school-search-skeleton-card__line--title {
  width: 78%;
  height: 16px;
}

.school-search-skeleton-card__line--price {
  width: 36%;
  height: 14px;
}

.shimmer {
  position: relative;
  overflow: hidden;
}

.shimmer::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 150%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.55) 50%,
    rgba(255,255,255,0) 100%
  );
  animation: schoolSearchShimmer 1.25s infinite;
}

@keyframes schoolSearchShimmer {
  100% {
    left: 100%;
  }
}

@media (max-width: 990px) {
  .school-search-skeleton-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
}

@media (max-width: 520px) {
  .school-search-skeleton-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .school-search-skeleton__banner-box {
    height: 180px;
  }
}

/* #SchoolSearchBannerSkeleton,
#SchoolSearchProductsSkeleton {
  border: 2px solid red !important;
  display: block;
} */

#SchoolSearchBannerSkeleton .school-search-skeleton__banner-box {
  display: block !important;
  width: 100% !important;
  min-height: 220px !important;
  height: 220px !important;
  background: #e5e5e5 !important;
}

#SchoolSearchProductsSkeleton .school-search-skeleton-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

#SchoolSearchProductsSkeleton .school-search-skeleton-card__image {
  display: block !important;
  width: 100% !important;
  min-height: 220px !important;
  background: #e5e5e5 !important;
}

#SchoolSearchProductsSkeleton .school-search-skeleton-card__line {
  display: block !important;
  height: 14px !important;
  background: #e5e5e5 !important;
  margin-top: 12px !important;
}

#SchoolSearchProductsSkeleton .school-search-skeleton-card__line--title {
  width: 78% !important;
}

#SchoolSearchProductsSkeleton .school-search-skeleton-card__line--price {
  width: 36% !important;
}