/* Responsive helper overrides for SEKAITECH
   Purpose: small, low-risk fixes to make layout adapt across devices.
   Put minimal rules here so they can be iterated safely. */

/* Make all images responsive by default */
img, .top-sales-img, .product-card img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Product card adjustments */
.product-card-specific, .bg-white.rounded-2xl {
  /* ensure cards don't enforce fixed heights on small screens */
  min-height: 0;
}

/* Header layout helpers */
.px-15 { padding-left: 15px; padding-right: 15px; }
.header-shell { align-items: center; }
.header-shell, .header-actions { flex-wrap: nowrap; }
.header-logo { max-width: 180px; }
.header-logo img { display: block; width: 100%; height: auto; }
.header-mobile-toggle { display: flex; align-items: center; justify-content: center; padding: 0.35rem; }
.header-search .search-box { width: 100%; max-width: 640px; margin: 0 auto; }
.search-box .search-fields {
  display: flex;
  align-items: center;
  width: 100%;
  border: 1.5px solid #2563eb;
  border-radius: 9999px;
  background: #ffffff;
  overflow: hidden;
  transition: border-color 0.2s ease;
}
.search-box .search-input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: none;
  font-size: 0.95rem;
  background: transparent;
}
.search-box .search-input:focus { outline: none; }
.search-box .search-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1.1rem;
  background: #2563eb;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
}
.search-box .search-submit:hover,
.search-box .search-submit:focus { background: #1d4ed8; }
.search-box .search-submit i {
  font-size: 1rem;
  color: inherit;
  line-height: 1;
  display: block;
}
.search-box .search-results { left: 0; right: 0; margin-top: 0.5rem; }
.header-actions > * { display: flex; align-items: center; }
.header-frame { width: 100%; }
.search-box { position: relative; }

/* Product grid and card responsive sizing */
.product-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 0.75rem;
}

.product-card-link {
  display: block;
}

.product-card-media { overflow: hidden; }
.product-card-img {
  width: 100%;
  height: 200px; /* desktop default */
  object-fit: contain;
  display: block;
}

/* Product detail view */
.product-detail-layout {
  gap: 1.5rem;
}

.product-gallery-pane .product-main-image img {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.product-gallery-thumbs {
  flex-wrap: wrap;
}

.product-gallery-thumbs img {
  flex: 0 1 100px;
}

.product-info-pane {
  border-color: #e5e7eb;
}

.product-info-inner {
  position: static;
}

/* Container padding adjustments (mobile-first) */
@media (max-width: 640px) {
  /* escape Tailwind-style class name */
  .max-w-\[1736px\] {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .px-15 { padding-left: 1rem; padding-right: 1rem; }
  .filters-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 85vw;
    max-width: 360px;
    background: #fff;
    z-index: 10000;
    overflow-y: auto;
    transform: translateX(-110%);
    transition: transform 220ms ease-in-out;
    box-shadow: 2px 0 12px rgba(0,0,0,0.08);
  }
  .filters-wrapper.show {
    transform: translateX(0);
  }
  .sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 9999;
    display: none;
  }
  .sidebar-overlay.active { display: block; }
  .sidebar-toggle { display: inline-flex; }
  .floating-buttons-container .floating-button { display: none; }
  /* product image smaller on phones */
  .product-card-img { height: 140px; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .product-detail-layout { gap: 1.25rem; }
  .product-main-image { padding: 1rem !important; }
  .product-gallery-thumbs img { flex: 0 1 calc(50% - 0.75rem); max-width: 180px; }
  .product-info-pane { border-top: 1px solid #e5e7eb; }
  .purchase-actions { flex-direction: column; align-items: stretch; }
  .purchase-actions > * { width: 100%; justify-content: center; }
  header .header-search { display: none !important; }
  .header-logo { max-width: 160px; }
}

/* Tablets and up */
@media (min-width: 641px) and (max-width: 1024px) {
  .max-w-\[1736px\] { padding-left: 2rem !important; padding-right: 2rem !important; }
  .px-15 { padding-left: 2rem; padding-right: 2rem; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .product-card-img { height: 160px; }
  .filters-wrapper { position: relative; transform: none; width: 100%; box-shadow: none; }
  .sidebar-toggle { display: none; }
  .floating-buttons-container .floating-button { display: inline-flex; }
  .product-detail-layout { flex-direction: column; }
  .product-gallery-thumbs img { flex: 0 1 120px; }
  .header-shell { flex-wrap: wrap; }
  header .header-mobile-toggle { order: 2; }
  header .header-search { order: 3; width: 100%; margin-top: 0.75rem; }
  .header-logo { max-width: 180px; }
}

/* Desktop */
@media (min-width: 1025px) {
  .max-w-\[1736px\] { padding-left: 3rem !important; padding-right: 3rem !important; }
  .px-15 { padding-left: 3rem; padding-right: 3rem; }
  .filters-wrapper { position: static; transform: none; box-shadow: none; }
  .product-grid { grid-template-columns: repeat(4, 1fr); }
  .product-card-img { height: 200px; }
  .product-detail-layout { flex-direction: row; }
  .product-gallery-thumbs { gap: 1rem; }
  .product-gallery-thumbs img { flex: 0 1 110px; }
  .product-info-inner { position: sticky; top: 120px; }
  .product-info-pane { border-left: 1px solid #e5e7eb; border-top: 0; }
  .header-logo { max-width: 200px; }
}

/* Filters menu visibility helpers (JS toggles .active) */
#filters-menu { display: none; }
#filters-menu.active { display: block; }

/* Mobile buy-now button helper */
.buy-now-btn { display: none; }
@media (max-width: 640px) {
  .buy-now-btn { display: inline-flex; align-items:center; justify-content:center; gap:8px; background:#ff6b00; color:#fff; padding:12px 16px; border-radius:9999px; font-weight:700; text-decoration:none; }
  .purchase-actions .buy-now-btn { display: inline-flex; }
}

/* Accessibility tweaks */
button.subfiltro-label { width: 100%; text-align: left; padding: 0.5rem; background: transparent; border: none; }
label.checkbox-label { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.35rem; }

.purchase-actions { align-items: center; }
.purchase-actions .cart-add-btn,
.purchase-actions .whatsapp-inquiry-btn { min-width: 160px; }

/* Ensure top header slider images don't stretch layout */
header .carousel-item img { width: 100%; height: auto; object-fit: cover; }