/* =================== CSS VARIABLES =================== */
:root {
  --primary-blue: #1565c0;
  --primary-green: #2e7d32;
  --text-dark: #212121;
  --text-light: #f5f5f5;
  --nav-height-desktop: 65px;
  --nav-height-mobile: 56px;
}

/* =================== GLOBAL RESET & BASE =================== */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
  width: 100% !important;
  position: relative !important;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Roboto', sans-serif;
  background-color: #f7f9fa;
  color: var(--text-dark);
  padding-top: var(--nav-height-desktop);
}

body.loading {
  overflow: hidden !important;
}

/* =================== UTILITY =================== */
.font-bold { font-weight: 700 !important; }

/* Fix Materialize negative row margins globally */
.row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* All sections clipped */
section {
  overflow-x: hidden !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Container safe padding */
.container {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* =================== PRELOADER =================== */
#preloader {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 99999 !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

/* =================== NAVBAR =================== */
nav.white {
  border-bottom: 2px solid #e3eaf5;
}

nav .nav-wrapper ul li a {
  transition: color 0.2s ease;
}

nav .nav-wrapper ul li a:hover {
  color: #0d47a1 !important;
}

/* Sidenav fixes */
.sidenav {
  width: 280px !important;
}

.sidenav li > a {
  display: flex !important;
  align-items: center !important;
  gap: 12px;
  padding: 0 20px !important;
  height: 52px !important;
  line-height: 52px !important;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  color: #0d47a1 !important;
}

.sidenav li > a i.material-icons {
  margin: 0 !important;
  height: auto !important;
  line-height: inherit !important;
}

/* =================== HERO SECTION =================== */
.hero-sec {
  padding: 60px 0 80px 0;
  min-height: 80vh;
  display: flex;
  align-items: center;
}

/* =================== CARDS =================== */
.hover-scale {
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.hover-scale:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 35px rgba(0,0,0,0.15) !important;
}

/* =================== FORM =================== */
.browser-default.materialize-select-styled {
  border: 1px solid #ccc;
  border-radius: 4px;
  height: 3rem;
  outline: none;
  padding: 5px 10px;
  width: 100%;
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
  background-color: #fff;
  -webkit-appearance: auto;
}

/* =================== FOOTER =================== */
footer.page-footer {
  margin-top: 0;
}

footer.page-footer .container .row {
  display: flex;
  flex-wrap: wrap;
}

footer.page-footer ul {
  padding: 0;
  list-style: none;
}

/* =================== PRODUCT CARDS =================== */
#products-grid .col {
  margin-bottom: 8px;
}

/* =================== MODAL =================== */
.modal {
  max-height: 90% !important;
  overflow-y: auto !important;
}

.modal .modal-content {
  padding: 20px !important;
}

/* =================== DARK MODE (placeholder) =================== */
[data-theme="dark"] body {
  background-color: #121212;
  color: var(--text-light);
}

/* =======================================================
   RESPONSIVE BREAKPOINTS
   ======================================================= */

/* ---- TABLET & MOBILE (max 992px) ---- */
@media only screen and (max-width: 992px) {

  body {
    padding-top: var(--nav-height-mobile);
  }

  /* Nav height fixes */
  nav,
  nav .nav-wrapper i,
  nav a.sidenav-trigger,
  nav a.sidenav-trigger i {
    height: var(--nav-height-mobile) !important;
    line-height: var(--nav-height-mobile) !important;
  }

  nav .brand-logo {
    height: var(--nav-height-mobile) !important;
  }

  nav .brand-logo span:first-child {
    font-size: 1.05rem !important;
  }

  nav .brand-logo span:last-child {
    font-size: 0.58rem !important;
  }

  /* ---- HERO ---- */
  .hero-sec {
    padding: 24px 0 40px 0 !important;
    min-height: auto !important;
  }

  .hero-sec .row.valign-wrapper {
    display: flex !important;
    flex-direction: column-reverse !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* Hero text column */
  .hero-sec .col.l7 {
    width: 100% !important;
    text-align: center !important;
    padding: 0 12px !important;
    margin-top: 1rem !important;
  }

  /* Hero chip - wrap safely */
  .hero-sec .chip {
    white-space: normal !important;
    height: auto !important;
    line-height: 1.4 !important;
    padding: 6px 12px !important;
    font-size: 0.78rem !important;
  }

  .hero-sec h1 {
    font-size: 2.0rem !important;
    line-height: 1.25 !important;
    margin: 1rem 0 !important;
  }

  .hero-sec p.flow-text {
    font-size: 1rem !important;
  }

  /* Hero CTA buttons */
  .hero-sec > div > div > div:first-child > div[style*="display: flex"] {
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
  }

  .hero-sec a.btn-large {
    width: 100% !important;
    max-width: 300px !important;
    text-align: center !important;
  }

  /* Stats row */
  .hero-sec .row[style*="border-top"] {
    justify-content: center !important;
  }

  .hero-sec .col.s4 {
    text-align: center !important;
    padding: 0 8px !important;
  }

  /* Hero card column */
  .hero-sec .col.l5 {
    width: 100% !important;
    padding: 0 12px !important;
  }

  .hero-sec .col.l5 .card {
    padding: 1rem !important;
    margin: 0 auto 1.5rem auto !important;
    max-width: 340px !important;
    width: 100% !important;
  }

  .hero-sec .col.l5 .card img {
    max-height: 180px !important;
    object-fit: contain !important;
  }

  /* ---- ABOUT ---- */
  #about {
    padding: 40px 0 !important;
  }

  #about .row.valign-wrapper {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 !important;
  }

  #about .col.l6 {
    width: 100% !important;
    padding: 0 12px !important;
    margin-bottom: 1.5rem !important;
    text-align: center !important;
  }

  #about h2 {
    font-size: 1.9rem !important;
    line-height: 1.3 !important;
  }

  #about .card-panel {
    text-align: left !important;
    margin: 10px auto !important;
    max-width: 480px !important;
    width: 100% !important;
  }

  /* ---- PRODUCTS ---- */
  #products {
    padding: 40px 0 !important;
  }

  #products h2 {
    font-size: 1.9rem !important;
    text-align: center !important;
  }

  #products .row.valign-wrapper {
    flex-direction: column !important;
    align-items: center !important;
  }

  #products .col.m7,
  #products .col.m5 {
    width: 100% !important;
    padding: 0 12px !important;
  }

  #products .col.m5 {
    text-align: center !important;
    margin-top: 16px !important;
  }

  #products .col.m5 > div {
    justify-content: center !important;
  }

  /* Product filter buttons wrap nicely */
  #products .filter-btn {
    font-size: 0.8rem !important;
    padding: 0 12px !important;
    height: 32px !important;
    line-height: 32px !important;
  }

  /* Product grid - 2 per row on tablet */
  #products-grid .col.l4 {
    width: 50% !important;
  }

  /* ---- CALCULATOR ---- */
  #calculator {
    padding: 40px 0 !important;
  }

  #calculator h2 {
    font-size: 1.9rem !important;
    text-align: center !important;
  }

  #calculator .col.l6 {
    width: 100% !important;
    padding: 0 12px !important;
    margin-bottom: 1.5rem !important;
  }

  #calculator .row.valign-wrapper,
  #calculator .row {
    flex-wrap: wrap !important;
  }

  /* ---- CONTACT ---- */
  #contact {
    padding: 40px 0 !important;
  }

  #contact h2 {
    font-size: 1.9rem !important;
  }

  #contact .col.l5,
  #contact .col.l7 {
    width: 100% !important;
    padding: 0 12px !important;
    margin-bottom: 1.5rem !important;
  }

  /* ---- FOOTER ---- */
  footer .col.l6,
  footer .col.l3 {
    width: 100% !important;
    padding: 0 12px !important;
    margin-bottom: 1.5rem !important;
  }

  footer .col.l6 {
    text-align: center !important;
  }

  /* ---- MODAL ---- */
  #product-modal {
    width: 95% !important;
    max-width: 95% !important;
    max-height: 88vh !important;
  }

  #product-modal .modal-content .row {
    flex-direction: column !important;
  }

  #product-modal .col.m6 {
    width: 100% !important;
  }

  #modal-product-img {
    max-height: 200px !important;
    margin-bottom: 1rem !important;
  }
}

/* ---- SMALL MOBILE (max 600px) ---- */
@media only screen and (max-width: 600px) {

  .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Preloader */
  #preloader img {
    height: 160px !important;
  }

  #preloader h4 {
    font-size: 1.3rem !important;
  }

  /* Hero */
  .hero-sec {
    padding: 16px 0 32px 0 !important;
  }

  .hero-sec h1 {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
  }

  .hero-sec p.flow-text {
    font-size: 0.95rem !important;
  }

  /* Stats */
  .hero-sec .col.s4 h4 {
    font-size: 1.6rem !important;
  }

  .hero-sec .col.s4 p {
    font-size: 0.72rem !important;
  }

  /* About */
  #about h2 {
    font-size: 1.6rem !important;
  }

  #about .card-panel .valign-wrapper {
    flex-direction: column !important;
    text-align: center !important;
  }

  #about .card-panel .valign-wrapper i {
    margin-right: 0 !important;
    margin-bottom: 8px !important;
  }

  /* Products - 1 per row on phone */
  #products-grid .col.l4 {
    width: 100% !important;
  }

  /* Product card content */
  .card-content {
    padding: 16px !important;
  }

  /* Calculator */
  #calculator .card {
    padding: 1rem !important;
  }

  #calculator .input-field.col.m6 {
    width: 100% !important;
  }

  .calc-tab-btn {
    font-size: 0.8rem !important;
    padding: 0 8px !important;
  }

  /* Contact form */
  #contact .input-field.col.m6 {
    width: 100% !important;
  }

  #contact .card {
    padding: 1rem !important;
  }

  /* Footer copyright */
  .footer-copyright .col.m6 {
    width: 100% !important;
    text-align: center !important;
  }

  .footer-copyright .col.m6.right-align {
    text-align: center !important;
    margin-top: 6px !important;
  }

  /* Sections padding */
  #about,
  #products,
  #calculator,
  #contact {
    padding: 32px 0 !important;
  }

  /* Section headings */
  #products h2,
  #calculator h2,
  #contact h2 {
    font-size: 1.6rem !important;
  }

  /* Quote form button */
  #contact button[type="submit"] {
    font-size: 0.95rem !important;
  }

  /* Sidenav full width on tiny screens */
  .sidenav {
    width: 260px !important;
  }
}

/* =================== SHOP / STORE SPECIFIC STYLES =================== */
.shop-header {
  background: linear-gradient(135deg, #0d47a1 0%, #1565c0 100%);
  color: white;
  padding: 40px 0;
  text-align: center;
}

.shop-search-box {
  background: white;
  border-radius: 12px;
  padding: 8px 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 600px;
  margin: -25px auto 0 auto;
  position: relative;
  z-index: 10;
}

.shop-search-input {
  border: none !important;
  outline: none !important;
  margin: 0 !important;
  box-shadow: none !important;
  font-size: 1.1rem;
}

/* Badge count for cart button */
.badge-count {
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: #d32f2f;
  color: white;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  line-height: 22px;
  font-size: 0.75rem;
  text-align: center;
  font-weight: 700;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Cart Drawer Sliding Animation */
.cart-drawer {
  position: fixed;
  top: 0;
  right: -400px;
  width: 400px;
  max-width: 100%;
  height: 100vh;
  background-color: white;
  box-shadow: -5px 0 25px rgba(0,0,0,0.15);
  z-index: 1000;
  transition: right 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: flex;
  flex-direction: column;
}

.cart-drawer.open {
  right: 0;
}

.cart-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  z-index: 999;
  display: none;
}

.cart-drawer-header {
  padding: 20px;
  background-color: #0d47a1;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.cart-drawer-footer {
  padding: 20px;
  border-top: 1px solid #e0e0e0;
  background-color: #f7f9fa;
}

.cart-item {
  display: flex;
  gap: 15px;
  padding: 15px 0;
  border-bottom: 1px solid #eee;
  align-items: center;
}

.cart-item-info {
  flex: 1;
}

.cart-item-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: #0d47a1;
}

.cart-item-meta {
  font-size: 0.8rem;
  color: #666;
  margin-top: 4px;
}

/* MOQ Label style */
.moq-badge {
  font-size: 0.8rem;
  font-weight: 700;
  color: #d32f2f;
  background-color: #ffebee;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-block;
  margin-top: 4px;
}


/* ---- VERY SMALL (max 400px) ---- */
@media only screen and (max-width: 400px) {
  .hero-sec h1 {
    font-size: 1.5rem !important;
  }

  #preloader h4 {
    font-size: 1.1rem !important;
  }

  nav .brand-logo span:first-child {
    font-size: 0.95rem !important;
  }

  .hero-sec .col.l5 .card {
    max-width: 100% !important;
  }

  #products .filter-btn {
    font-size: 0.72rem !important;
    padding: 0 8px !important;
  }
}