/**
 * Size tabs.
 *
 * Shared by the Oud Al Haramain collection and the Inspired List. The tabs do
 * not render products themselves — clicking one broadcasts the chosen size so
 * the existing React product-card grid swaps every card to that size's
 * variation image and price (see assets/js/size-gallery.js).
 */

/* Oud Al Haramain: centered tab row above the product grid. */
.al-naramain-size-tabs {
  text-align: center;
  margin-bottom: clamp(28px, 4vw, 48px);
}

.al-naramain-size-tabs .al-naramain-eyebrow {
  margin-bottom: 4px;
}

.eman-sg-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 14px 0 clamp(28px, 4vw, 46px);
}

.eman-sg-tab {
  appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 30px;
  border: 1px solid #d8c7ad;
  border-radius: 999px;
  background: #ffffff;
  color: #4a3c2e;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.eman-sg-tab:hover {
  border-color: #7a5c22;
  background: #f2e9d9;
  color: #5b4218;
  transform: translateY(-1px);
}

.eman-sg-tab.is-active {
  background: linear-gradient(135deg, #8a6a24, #6b4f18);
  border-color: #6b4f18;
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(20, 14, 6, 0.18);
}

.eman-sg-tab:focus-visible {
  outline: 2px solid #6b4f18;
  outline-offset: 2px;
}

@media (max-width: 520px) {
  .eman-sg-tab {
    flex: 1 1 auto;
    padding: 11px 22px;
  }
}