/* ============================================================
   Claudify Products — Framer SectionProducts + ProductSwitcher
   ============================================================ */

/* ---- Section shell ----
   padding: 140px 96px 140px 96px — symmetric top and bottom
   ------------------------------------------------------------ */
.claudify-products {
  background-color: var(--bera-color-soft-neutral);
  padding: var(--sp-pt, 140px) var(--sp-pr, 96px) var(--sp-pb, 140px) var(--sp-pl, 96px);
}

.claudify-products__container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

/* ---- Inner grid area (tabs + product grid) ---- */
.claudify-products__grid-area {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ============================================================
   Tab navigation — LabelLink component
   Active:   bg rgb(11,38,21)  | text white
   Inactive: bg rgb(232,232,225) | text rgb(26,28,24)
   Spec: border-radius 4px, padding 8px 10px, Jost 14px
   ============================================================ */
.claudify-products__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
}

.claudify-products__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border-radius: 4px;
  font-family: var(--sp-tab-font, 'Jost', sans-serif);
  font-size: var(--sp-tab-size, 14px);
  font-weight: var(--sp-tab-weight, 400);
  font-style: var(--sp-tab-style, normal);
  line-height: 110%;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  background-color: rgb(232, 232, 225);
  color: rgb(26, 28, 24);
  border: none;
  cursor: pointer;
}

.claudify-products__tab--active {
  background-color: rgb(11, 38, 21);
  color: rgb(255, 255, 255);
}

.claudify-products__tab:not(.claudify-products__tab--active):hover {
  background-color: rgb(219, 219, 209);
}

/* ============================================================
   Product grid — 3 columns, gap 32px
   ============================================================ */
.claudify-products__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

/* ============================================================
   Product card — Framer ProductCard Desktop variant
   bg: rgb(232,232,225), border-radius: 20px
   ============================================================ */
.claudify-product-card {
  display: flex;
  flex-direction: column;
  background-color: rgb(232, 232, 225);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s;
}

.claudify-product-card:hover {
  opacity: 0.9;
}

/* ---- Image area: square, matches Framer aspectRatio="1" ---- */
/* padding-top: 100% is the iOS 14 fallback — creates a square via CSS padding trick.
   @supports block resets padding and uses aspect-ratio on all modern browsers (iOS 15+). */
.claudify-product-card__image-wrap {
  position: relative;
  width: 100%;
  padding-top: 100%; /* iOS 14 fallback: square via padding */
  overflow: hidden;
  flex-shrink: 0;
}

@supports (aspect-ratio: 1) {
  .claudify-product-card__image-wrap {
    padding-top: 0;
    aspect-ratio: 1;
  }
}

/* Absolute fill — works for both the padding-top and aspect-ratio approaches */
.claudify-product-card__image-wrap img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.claudify-product-card:hover .claudify-product-card__image-wrap img {
  transform: scale(1.03);
}

/* ---- Sale badge: top-right overlay ---- */
.claudify-product-card__badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background-color: rgb(60, 68, 51);
  color: rgb(255, 255, 255);
  font-family: var(--sp-badge-font, 'Jost', sans-serif);
  font-size: var(--sp-badge-size, 12px);
  font-weight: var(--sp-badge-weight, 400);
  line-height: 1;
  padding: 5px 8px;
  border-radius: 4px;
  z-index: 2;
  white-space: nowrap;
}

/* ---- Card content ---- */
.claudify-product-card__content {
  padding: 10px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}

/* Title + subtitle wrapper */
.claudify-product-card__header {
  display: flex;
  flex-direction: column;
}

/* Title: Cormorant Garamond Medium 20px */
.claudify-product-card__title {
  font-family: var(--sp-card-title-font, 'Cormorant Garamond', Georgia, serif);
  font-size: 20px;
  font-weight: var(--sp-card-title-weight, 600);
  line-height: 1.4;
  letter-spacing: 0;
  color: rgb(26, 28, 24);
  margin: 0;
  text-wrap: balance;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Subtitle: short descriptor beneath the title */
.claudify-product-card__subtitle {
  font-family: var(--sp-card-subtitle-font, 'Jost', sans-serif);
  font-size: 14px;
  font-weight: var(--sp-card-subtitle-weight, 400);
  line-height: 1.4;
  color: rgba(26, 28, 24, 0.72);
  margin: 0;
}

/* Price row */
.claudify-product-card__price {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* ============================================================
   "Shop All" button — ButtonText dark variant
   Jost 15px, -0.25px tracking, dark text + arrow + underline
   ============================================================ */
.claudify-products__btn-wrap {
  display: flex;
  justify-content: center;
}

.claudify-products__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sp-btn-font, 'Jost', sans-serif);
  font-size: var(--sp-btn-size, 15px);
  font-weight: var(--sp-btn-weight, 400);
  text-transform: none;
  font-style: var(--sp-btn-style, normal);
  letter-spacing: 0;
  line-height: 1;
  color: rgb(26, 28, 24);
  text-decoration: none;
  transition: opacity 0.2s;
}

.claudify-products__btn:hover {
  opacity: 0.65;
}

.claudify-products__btn-label {
  border-bottom: 1px solid rgba(26, 28, 24, 0.4);
  padding-bottom: 2px;
  transition: border-color 0.2s;
}

.claudify-products__btn:hover .claudify-products__btn-label {
  border-color: rgb(26, 28, 24);
}

.claudify-products__btn svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.claudify-products__btn:hover svg {
  transform: translateX(3px);
}

/* ============================================================
   Tablet (750px – 989px) — 2 columns, reduced padding
   ============================================================ */
@media screen and (min-width: 750px) and (max-width: 989px) {
  .claudify-products {
    padding: 96px 64px 0;
  }

  .claudify-products__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .claudify-products__container {
    gap: 48px;
  }

  .claudify-products__grid-area {
    gap: 20px;
  }

}

/* ============================================================
   Mobile (< 750px) — 1 column, full width cards — matches Framer phone
   ============================================================ */
@media screen and (max-width: 749px) {
  .claudify-products {
    padding: 64px 20px 0;
  }

  .claudify-products__container {
    gap: 32px;
  }

  .claudify-products__grid-area {
    gap: 16px;
  }

  /* ── Tabs: single scrollable row ── */
  .claudify-products__tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .claudify-products__tabs::-webkit-scrollbar {
    display: none;
  }

  .claudify-products__tab {
    flex-shrink: 0;
    padding: 10px 16px !important;
    min-height: 40px !important;
  }


  /* Single column — matches Framer phone layout */
  .claudify-products__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* Full-width card: gap tighter on mobile */
  .claudify-product-card__content {
    gap: 12px;
  }

  /* Title: full width, 2-line clamp */
  .claudify-product-card__title {
    -webkit-line-clamp: 2;
  }
}