/* Basic grid system without Bootstrap */
.container { width: 90%; margin: auto; }
.row { display: flex; flex-wrap: wrap; margin: -10px; }
.col { flex: 1 0 21%; margin: 10px; box-sizing: border-box; }
img { max-width: 100%; height: auto; display: block; vertical-align: middle; }

[class^="col-"] {
    padding: 10px;
    box-sizing: border-box;
}

.col-2 { flex: 0 0 16.666%; max-width: 16.666%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-8 { flex: 0 0 66.666%; max-width: 66.666%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }

.col-4 { flex: 0 0 33.3333%; max-width: 33.3333%; padding: 10px; }
.col-6 { flex: 0 0 50%; max-width: 50%; padding: 10px; }
.col-12 { flex: 0 0 100%; max-width: 100%; padding: 10px; }
.img-fluid { max-width: 100%; height: auto; }
.btn { display: inline-block; padding: 10px 20px; border: none; cursor: pointer; }
.btn-primary { background-color: #5E2244; color: white; }/*#DA251C*/
.btn-secondary { background-color: #29166F; color: white; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.h3, h3 {
    font-size: 1.75rem;
}

.fs-1 {font-size:calc(1.375rem + 1.5vw)!important} 
.fs-2 {font-size:calc(1.325rem + .9vw)!important}
.fs-3 {font-size:calc(1.3rem + .6vw)!important}
.fs-4 {font-size:calc(1.275rem + .3vw)!important}
.fs-5 {font-size:1.25rem!important}
.fs-6 {font-size:1rem!important}.fst-italic{font-style:italic!important}

.h4, h4 {font-size: 1.5rem;}
.h5, h5 {font-size: 1.25rem}
.h6, h6 {font-size: 1rem;}

.fw-bold {
    font-weight: bold;
}

.table-responsive {
    overflow-x:auto;
    -webkit-overflow-scrolling: touch;
}

.mt-10 {
    margin-top: 10px;
}

.my-15 {
    margin-top: 15px;
    margin-bottom: 15px;
}

.mb-30 {
    margin-bottom: 30px;
}

.btn-2 {
    float: right;
    margin: 0 7px 5px;
}

.pb-1 {padding-bottom:.25rem!important}
.pb-2 {padding-bottom:.5rem!important}
.pb-3 {padding-bottom:1rem!important}
.pb-4 {padding-bottom:1.5rem!important}
.pb-5 {padding-bottom:3rem!important}

.border-y-1 {
    border-top: 1px solid #e66161;
    border-bottom: 1px solid #e66161;
}

.border {
    border: 1px solid #ccc;
}

@media (max-width: 768px) {
    .col-4, .col-6 { flex: 0 0 100%; max-width: 100%; }
    .col-2, .col-3, .col-8, .col-9, .col-10 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 600px) {
    .btn-2 {
        margin: 7px 0 0 0;
    }
}

/* Branding */
.brand-logos { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 20px; }
.brand-logo { cursor: pointer; padding: 10px; background: #fff; border-radius: 5px; border: 1px solid #ddd; }
.brand-logo img { max-height: 50px; }

/* Search styles */
.search-container { position: relative; margin-bottom: 20px; }
.search-box { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; }

.search {
    width: auto;
    padding: 7px 2px 10px 0;
    float: right;
    position: relative;
}

#search span {
    width: 250px;
    display: block;
    margin: 0;
    padding: 0;
    float: left;
    border: 1px solid #eaeaea;
    background: #fff;
    height: 30px;
    position: relative;
    z-index: 2;
}

#search input#s {
    float: left;
    width: 150px;
    padding: 8px 0 5px 10px;
    margin: 0;
    border: none;
    background: none;
    color: #000000;
    text-transform: none;
    font-size: 12px;
    position: relative;
    z-index: 3;
}

#search .btn {
    float: right;
    padding: 4px 4px 0 0;
    margin: 0;
    border: 0;
    width: auto;
    position: relative;
    z-index: 3;
}

.search-results {
    position: absolute;
    top: 38px; /* directly below the input */
    left: 0;
    width: 250px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    max-height: 200px;
    overflow-y: auto;
    display: none; /* hidden until results show */
    z-index: 10;
}

.search-results div {
    padding: 8px 10px;
    cursor: pointer;
    font-size: 12px;
    border-bottom: 1px solid #f1f1f1;
}

.search-results div:hover {
    background: #f5f5f5;
}

/* Product display */
#product-list { display: none; margin-top: 20px; }
.product-card {
    background: #fff;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
}
.product-card h4 { margin: 10px 0; color: #DA251C; }

#product-list.show {
    opacity: 1;
}


#product-list {
    text-align: center; /* Center text inside */
}

#brand-title {
    margin-bottom: 20px;
}

#products-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.product-card {
    text-align: center;
}

.product-card img {
    display: block;
    margin: 0 auto 10px;
    max-width: 150px;
    height: auto;
}

/* form labels and controls (generic, reusable) */
.form-label {
  display: block;
  margin-bottom: 12px;
  font-size: 14px;
}

.form-control {
  width: 100%;
  padding: 8px 10px;
  margin-top: 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  box-sizing: border-box;
}

/* another zooming effect*/
.zoom-img{
	background-color: transparent;
	border-radius: 5px;
	cursor: pointer;
}

.zoom-img:hover{
	-ms-transform: scale(2.5); /* IE 9 */
	-webkit-transform: scale(2.5); /* Safari 3-8 */
	-moz-transform: scale(2.5);
	-o-transform: scale(2.5);
	transform: scale(2.5);
	border: 1px solid #ccc;
	z-index: 20000;
}

/* =============== Modal Overlay ===================== */
/* modal and Overlay */
.eh-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: rgba(0,0,0,0.6);
    z-index: 20000;
}

.eh-modal.eh-show { display: flex !important; }

/* Dialog */
.eh-modal__dialog {
    position: relative;
    width: min(520px, 92vw);       /* responsive width */
    max-height: calc(100vh - 32px);
    overflow-y: auto;              /* scroll inside modal if content is tall */
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    padding: 18px;
    opacity: 0;
    transform: scale(0.98);
    transition: opacity .2s ease, transform .2s ease;
}
.eh-modal.eh-animate-in .eh-modal__dialog {
    opacity: 1;
    transform: scale(1);
}

/* Title & close */
.eh-modal__title { margin: 0 0 10px; font-size: 20px; }
.eh-modal__close {
    position: absolute; top: 8px; right: 10px;
    border: 0; background: transparent; font-size: 1.6rem; line-height: 1;
    cursor: pointer; color: #333;
}

/* Actions */
.eh-modal__actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.eh-btn { padding: 9px 14px; border-radius: 6px; border: 1px solid #ddd; background: #f5f5f5; cursor: pointer; }
.eh-btn-2 { padding: 9px 14px; border-radius: 6px; border: 1px solid #ddd; background: #6C757D; cursor: pointer; color: white; }
.eh-btn--primary { background: #DA251C; color:#fff; border: 0; }
.eh-btn--primary-2 { background-color: #0D6EFD; color: white; }
/* Reusable form styling (usable anywhere, not modal-specific) */
.eh-form__label { display: block; margin-bottom: 12px; font-size: 14px; }
.eh-form__control {
    width: 100%; box-sizing: border-box;
    margin-top: 6px; padding: 8px 10px; font-size: 14px;
    border: 1px solid #ccc; border-radius: 4px;
}

/* Disable page scroll while modal is open */
body.eh-modal-open { overflow: hidden; height: 100%; }

/* Small-screen tweaks */
@media (max-width: 420px) {
    .eh-modal__dialog { padding: 12px; width: calc(100% - 24px); max-height: calc(100vh - 24px); }
    .eh-modal__title { font-size: 18px; }
    .eh-modal__actions { flex-direction: column-reverse; align-items: stretch; }
    .eh-modal__actions .eh-btn { width: 100%; }
}

.text-uppercase{
    text-transform: uppercase !important;
}

/* ====================== Mega Menu Container ======================== */

/* ====== TOP BAR ====== */
.megaNav {
  background: #fff;
  /*border-bottom: 1px solid #ddd;*/
  position: relative;
}

/* Header container */
.megaNav-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
}

.megaNav-brand {
  font-size: 20px;
  font-weight: bold !important;
  color: #000 !important;
}

/* Hamburger button */
.megaNav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
}
.megaNav-toggle span {
  width: 25px;
  height: 3px;
  background: #000;
  border-radius: 2px;
}

/* Menu */
.megaNav-menu {
  list-style: none;
  margin: 0;
  padding: 0 12px;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.megaNav-menu > li { position: static; }
.megaNav-menu > li > a {
  display: block;
  padding: 14px 18px;
  font-weight: bold !important;
  color: #000 !important;
  text-decoration: none;
  transition: background .2s ease;
}
.megaNav-menu > li > a:hover {
  background: #DCA0C2;
}

/* Mega dropdown */
.megaNav-megamenu {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 100%;
  width: clamp(960px, 90vw, 1400px);
  max-height: 72vh;
  overflow-y: auto;
  background: #fff;
  padding: 22px 24px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
  border-radius: 8px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, visibility .18s ease;
}
.megaNav-dropdown:hover .megaNav-megamenu,
.megaNav-megamenu:hover {
  opacity: 1;
  visibility: visible;
}

/* Inside grid */
.megaNav-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(200px, 1fr));
  gap: 24px;
}
.megaNav-col h4 {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
  color: #000;
}
.megaNav-col a {
  display: block;
  padding: 7px 8px;
  color: #000;
  text-decoration: none;
  border-radius: 4px;
  transition: background .15s ease, color .15s ease, padding-left .15s ease;
}
.megaNav-col a:hover {
  background: #5E2244;
  color: #fff !important;
  padding-left: 12px;
}

/* ====== RESPONSIVE ====== */
@media (max-width: 992px) {
  .megaNav-toggle { display: flex; }

  .megaNav-menu {
    display: none;
    flex-direction: column;
    width: 100%;
    background: #fff;
    border-top: 1px solid #ddd;
    position: relative;
    z-index: 999;
  }
  .megaNav-menu.active { display: flex; }

  /* Disable hover on mobile */
  .megaNav-dropdown:hover .megaNav-megamenu { opacity: 0; visibility: hidden; }

  /* Mobile dropdown fixes */
  .megaNav-dropdown.open .megaNav-megamenu {
    opacity: 1;
    visibility: visible;
    position: relative;   /* natural flow, not absolute */
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
    max-height: none;     /* let it expand fully */
    padding: 16px;
    box-shadow: none;
    border-radius: 0;
  }

  .megaNav-row {
    grid-template-columns: 1fr; /* single column */
    gap: 16px;
  }
}

.megaNav-col a.active-cat {
    background-color: #5E2244;
    color: #fff !important;
    padding: 7px 12px;
    border-radius: 4px;
    display: inline-block;
    width: 100%; 
}