/* =============================================================
   Baby Age Bestsellers v1.3.0 — bab-style.css
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&family=DM+Sans:wght@300;400;500&display=swap');

/* ---- Section wrapper ---- */
.bab-section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 56px 24px 72px;
}

/* ---- Header ---- */
.bab-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 28px;
}
.bab-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #5a6e79;
  margin-bottom: 6px;
}
.bab-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 600;
  line-height: 1.1;
  color: #1e2d35;
  margin: 0;
}
.bab-view-all {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 14px;
  font-weight: 500;
  color: #1e2d35;
  text-decoration: none;
  gap: 4px;
  white-space: nowrap;
}
.bab-view-all:hover { color: #c96442; }
.bab-view-all__line {
  display: block;
  width: 100%;
  height: 2px;
  background: #c96442;
  border-radius: 2px;
  transition: transform .25s ease;
  transform-origin: right;
}
.bab-view-all:hover .bab-view-all__line { transform: scaleX(1.2); }

/* ---- Tabs ---- */
.bab-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 32px;
}
.bab-tab {
  font-size: 13px;
  font-weight: 500;
  color: #5a6e79;
  background: transparent;
  border: 1.5px solid #d6dde1;
  border-radius: 50px;
  padding: 8px 18px;
  cursor: pointer;
  transition: all .2s ease;
  white-space: nowrap;
  font-family: inherit;
}
.bab-tab:hover { border-color: #3d4f5c; color: #1e2d35; }
.bab-tab--active { background: #1e2d35; border-color: #1e2d35; color: #fff; }

/* ---- Panels ---- */
.bab-panel         { display: none; }
.bab-panel--active { display: block; animation: babFadeIn .3s ease; }
@keyframes babFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Empty state ---- */
.bab-empty { font-size: 14px; color: #9aacb5; padding: 40px 0; text-align: center; }

/* =============================================================
   OUR OWN GRID — wraps each product card directly
   This is completely independent of the theme's ul.products
   ============================================================= */
.bab-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  width: 100% !important;
}

/* Each wrapper cell */
.bab-grid__item {
  width: 100% !important;
  min-width: 0 !important;        /* prevent overflow inside grid cell */
}

/* Make sure whatever the theme puts inside fills the cell */
.bab-grid__item > * {
  width: 100% !important;
  float: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Kill any theme float/width on ul.products that might still render */
.bab-section ul.products {
  display: contents !important;  /* dissolve the ul so our grid is the layout parent */
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* Each li.product must also dissolve into the grid */
.bab-section ul.products li.product {
  width: 100% !important;
  float: none !important;
  clear: none !important;
  margin: 0 !important;
}

/* ---- Tablet — 2 columns ---- */
@media (max-width: 900px) {
  .bab-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
}

/* ---- Mobile ---- */
@media (max-width: 600px) {
  .bab-section { padding: 36px 16px 48px; }
  .bab-tab     { font-size: 12px; padding: 7px 13px; }
  .bab-grid    { gap: 10px !important; }
}