/* ===============================
   MEGA MENU - CORRECT BASED ON REAL HTML
   =============================== */

/* MODULE TITLE (Parents Area, Educators Area, etc.) */
.sp-megamenu-wrapper .sp-module-title {
    font-family: 'Fredoka One', cursive;
    font-size: 17px;
    letter-spacing: 1px;
    font-weight: normal;
    text-transform: uppercase;
    color: #093a65;
    margin-bottom: 10px;
    padding: 10px 12px 0 10px;
}
.hikashop_category_description {
  display: block !important;
}
#sp-main-body {
  padding: 20px 0;
}

/* NORMAL LINKS inside module */
.sp-megamenu-wrapper .sp-module-content ul.menu > li > a {
    font-family: 'Fredoka', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #fe3a33; /* RED normal */
    padding: 1px 10px;
    text-decoration: none;
    display: block;
    transition: all 0.3s ease;
    position: relative;
}

/* HOVER LINKS inside module */
.sp-megamenu-wrapper .sp-module-content ul.menu > li > a:hover {
    color: #093a65; /* Dark Blue hover */
}

/* ADD RIGHT ARROW to links */
.sp-megamenu-wrapper .sp-module-content ul.menu > li > a::after {
    content: "›";
    font-weight: bold;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: inherit;
}

/* REMOVE BULLETS */
.sp-megamenu-wrapper .sp-module-content ul.menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ===============================
   MOBILE CLEANUP
   =============================== */

/* No bullets in mobile dropdown too */
.offcanvas-menu .sp-module-content ul.menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Mobile Links */
.offcanvas-menu .sp-module-content ul.menu > li > a {
    font-family: 'Fredoka', sans-serif;
    font-weight: 300;
    font-size: 16px;
    letter-spacing: 1px;
    color: #fe3a33;
    padding: 4px 6px;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* Mobile hover */
.offcanvas-menu .sp-module-content ul.menu > li > a:hover {
    color: #093a65;
}

.footer-cta-links {
    display: flex;
    align-items: center; /* Vertical center */
    justify-content: center; /* Horizontal center */
    height: 100%; /* Make sure it stretches */
    padding: 10px 10px; /* Optional adjust */
    font-family: 'Fredoka', sans-serif;
    font-size: 16px;
margin: 16px 0 0;
font-weight: 300;
}

.footer-cta-links a {
    color: #fe3a33;
    margin: 0 8px;
    text-decoration: none;
}

.footer-cta-links a:hover {
    color: #ffffff;
}
/* ===== MOBILE TWEAK ===== */
@media (max-width: 768px) {
    .footer-cta-links {
        flex-direction: column; /* Stack links vertically on tablet/mobile */
        gap: 6px;
    }
}

/* Legal Section */
.footer-legal {
  color: #ffffff;
  font-family: 'Fredoka', sans-serif;
  font-size: 16px;
  padding: 5px 5px;
}

.footer-legal a {
  color: #fe3a33;
  text-decoration: none;
  margin: 0 5px;
}

.footer-legal a:hover {
  text-decoration: underline;
}


/* Phones (portrait + landscape) */
@media (max-width: 767px) {
  .sp-top-bar {
    padding: 5px 0 !important;
  }
  .sp-contact-info, .sp-contact-info li {
    font-size: 13px !important;
  }
  .sp-megamenu-parent {
    margin-top: 10px;
  }
  img.logo-image-phone {
    height: auto !important;
    width: auto !important;
    max-height: 80px !important;
    max-width: 200px !important;
    margin: 0 auto;
    display: block;
  }
  #sp-header {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    min-height: 90px;
  }
}

/* Phones & small devices landscape mode */
@media (max-width: 991px) and (orientation: landscape) {
  #sp-header {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    min-height: 75px !important;
  }
  img.logo-image-phone {
    height: 70px !important;
    width: auto !important;
    max-width: 180px !important;
    display: block;
    margin: 0 auto;
  }
  #sp-header .row {
    align-items: center !important;
  }
  #sp-logo {
    display: flex !important;
    align-items: center !important;
  }
  #sp-logo a {
    display: flex !important;
    align-items: center !important;
  }
}

/* Logo size for all phones (landscape + portrait) */
@media (max-width: 991px) {
  #sp-header .logo {
    height: 60px !important;
    display: flex;
    align-items: center;
  }
}

/* Tablets - portrait mode (FIXED: now also img and header padding!) */
@media (min-width: 768px) and (max-width: 1199px) and (orientation: portrait) {
  #sp-header .logo {
    height: 80px !important;
    display: flex;
    align-items: center;
  }
  img.logo-image-phone {
    height: auto !important;
    width: auto !important;
    max-height: 100px !important; /* <<--- Bigger max height for tablet portrait */
    max-width: 240px !important;
    margin: 0 auto;
    display: block;
  }
  #sp-header {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
    min-height: 110px !important;
  }
}

/* Tablets - landscape mode (iPads etc.) */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
  #sp-header .logo {
    height: 80px !important;
    display: flex;
    align-items: center;
  }
}

/* Desktop and big screens - RESTORE defaults */
@media (min-width: 992px) {
  #sp-header .logo {
    height: auto !important;
    max-height: none !important;
    display: block !important;
    align-items: unset !important;
  }
}

.hikashop_product_image img {
  width: 100% !important;
  height: auto !important;
  object-fit: cover;
}

.hikashop_products .hikashop_product {
  width: 25%; /* 4 columns on desktop */
  float: left;
  box-sizing: border-box;
  padding: 10px;
}

@media (max-width: 1024px) {
  .hikashop_products .hikashop_product {
    width: 33.333%; /* 3 columns on tablet */
  }
}

@media (max-width: 768px) {
  .hikashop_products .hikashop_product {
    width: 50%; /* 2 columns on portrait tablets/small devices */
  }
}

@media (max-width: 480px) {
  .hikashop_products .hikashop_product {
    width: 100%; /* 1 column on phones */
  }
}

#sp-header,
#sp-header.header-sticky {
  height: var(--header_height);
}

#sp-header .logo {
  height: auto;
  max-height: 140px;
}

@media (max-width: 768px) {
  a, button {
    min-width: 48px;
    min-height: 48px;
    padding: 10px;
    margin: 8px;
    display: inline-block;
  }

  .footer a,
  .header a,
  .menu a {
    padding: 12px;
    margin: 8px;
  }
}