@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import url('icity-theme.css');
@import url('icity-page-bg.css');

body {
  font-family: 'Inter', sans-serif;
}

.smart-chairs-hero {
  background-color: #1a2e42;
  background-image: url("../asset/Hero chair.png");
  background-position: center 72%;
  background-repeat: no-repeat;
  background-size: cover;
  color: #ffffff;
  min-height: 440px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.smart-chairs-hero__overlay {
  background:
    linear-gradient(
      to right,
      rgba(255, 255, 255, 0.97) 0%,
      rgba(255, 255, 255, 0.88) 28%,
      rgba(255, 255, 255, 0.4) 48%,
      transparent 62%
    ),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%, transparent 40%);
  inset: 0;
  position: absolute;
  z-index: 1;
}

.smart-chairs-hero__content {
  align-items: center;
  display: flex;
  min-height: inherit;
  padding-top: 2.75rem;
  position: relative;
  z-index: 2;
}

.smart-chairs-hero__text {
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--icity-border-strong);
  border-radius: var(--icity-radius-lg);
  box-shadow: var(--icity-shadow-lg);
  color: var(--icity-text);
  padding: 1.75rem 1.5rem;
}

.smart-chairs-hero__title {
  color: var(--icity-primary-dark);
  text-shadow: none;
}

.smart-chairs-hero__subtitle {
  color: var(--icity-text-secondary);
  opacity: 1;
  text-shadow: none;
}

.smart-chairs-hero__cta {
  background: var(--icity-primary) !important;
  color: #fff !important;
  border-radius: var(--icity-radius-pill);
  box-shadow: 0 4px 18px rgba(26, 74, 140, 0.35);
}

.smart-chairs-hero__cta:hover {
  background: var(--icity-primary-dark) !important;
}

@media (min-width: 640px) {
  .smart-chairs-hero {
    min-height: 500px;
  }

  .smart-chairs-hero__text {
    padding: 2rem 2.25rem;
  }
}

@media (min-width: 768px) {
  .smart-chairs-hero {
    background-position: 55% 68%;
    min-height: 540px;
  }

  .smart-chairs-hero__content {
    padding-top: 3.25rem;
  }

  .smart-chairs-hero__text {
    max-width: 36rem;
    padding: 2.25rem 2.5rem;
  }
}

@media (min-width: 1024px) {
  .smart-chairs-hero {
    background-position: 50% 65%;
    min-height: 580px;
  }
}

@media (max-width: 639px) {
  .smart-chairs-hero {
    background-position: center 78%;
    min-height: 460px;
  }

  .smart-chairs-hero__overlay {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.97) 0%,
      rgba(255, 255, 255, 0.92) 38%,
      rgba(255, 255, 255, 0.45) 65%,
      transparent 100%
    );
  }

  .smart-chairs-hero__text {
    margin-inline: auto;
    width: 100%;
  }
}

.navy-bg {
  background-color: #0d2a54;
}

.orange-text {
  color: #f37021;
}

.orange-bg {
  background-color: #f37021;
}

.navy-button {
  background-color: var(--icity-primary);
}

.products-page section.max-w-5xl,
.products-page .product-listing-section {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--icity-container);
  padding-left: var(--icity-px);
  padding-right: var(--icity-px);
}

.products-page section.max-w-5xl:first-of-type {
  margin-top: 1.5rem;
  padding: clamp(2rem, 4vw, 3rem);
  background: var(--icity-surface-band);
  border: 1px solid var(--icity-border);
  border-radius: var(--icity-radius-xl);
  box-shadow: var(--icity-shadow);
}

.products-page article[data-purpose="product-card"],
.products-page .flex.flex-col.md\:flex-row {
  background: var(--icity-surface);
  border: 1px solid var(--icity-border);
  border-radius: var(--icity-radius-xl);
  box-shadow: var(--icity-shadow-sm);
  padding: clamp(1.25rem, 3vw, 2rem);
  margin-bottom: 1.5rem;
}