/* =========================================
   FAQ ACCORDION SECTION — .fe-product-faq
   ========================================= */

/* Section wrapper */
.fe-product-faq {
  background: var(--fe-cream);
  padding: var(--fe-section-py) var(--fe-container-px);
}

/* Inner container — centered, max-width matches site */
.fe-product-faq__container {
  max-width: var(--fe-container-max);
  margin: 0 auto;
}

/* Header */
.fe-product-faq__header {
  text-align: center;
  margin-bottom: var(--fe-space-12);
}

/* Section label — matches "THE STORY BEHIND" eyebrow style */
.fe-product-faq__label {
  display: block;
  font-family: var(--fe-font-body);
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--fe-gold-dark);
  margin-bottom: var(--fe-space-4);
}

/* Section title — matches "What They're Saying" style */
.fe-product-faq__title {
  font-family: var(--fe-font-display);
  font-size: var(--fe-size-xl);
  font-weight: var(--fe-weight-light);
  font-style: italic;
  line-height: 1.05;
  color: var(--fe-black);
  margin: 0;
}

/* Accordion wrapper */
.fe-product-faq__accordion {
  max-width: 760px;
  margin: 0 auto;
}

/* Individual FAQ item */
.fe-product-faq__item {
  border-bottom: 1px solid var(--fe-border);
}

.fe-product-faq__item:first-child {
  border-top: 1px solid var(--fe-border);
}

/* Question button */
.fe-product-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--fe-space-6) 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  gap: var(--fe-space-8);
  font-family: var(--fe-font-body);
  font-size: var(--fe-size-base);
  font-weight: var(--fe-weight-medium);
  color: var(--fe-black);
  line-height: var(--fe-leading-normal);
  transition: color var(--fe-transition-fast);
}

.fe-product-faq__question:hover {
  color: var(--fe-gold-dark);
}

/* Toggle icon */
.fe-product-faq__icon {
  flex-shrink: 0;
  font-size: var(--fe-size-lg);
  font-weight: var(--fe-weight-light);
  color: var(--fe-warm-gray);
  line-height: 1;
  transition: transform var(--fe-transition), color var(--fe-transition);
  user-select: none;
}

.fe-product-faq__question[aria-expanded="true"] .fe-product-faq__icon {
  transform: rotate(45deg);
  color: var(--fe-gold-dark);
}

/* Answer panel — animated height */
.fe-product-faq__answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--fe-transition-slow) cubic-bezier(0.25, 0.1, 0.25, 1);
}

.fe-product-faq__answer[hidden] {
  display: block !important; /* override hidden for animation */
  visibility: hidden;
}

.fe-product-faq__answer:not([hidden]) {
  visibility: visible;
}

/* Answer inner content */
.fe-product-faq__answer-inner {
  padding: 0 0 var(--fe-space-6);
  font-family: var(--fe-font-body);
  font-size: var(--fe-size-sm);
  font-weight: var(--fe-weight-regular);
  color: var(--fe-charcoal);
  line-height: var(--fe-leading-loose);
}

.fe-product-faq__answer-inner p {
  margin: 0 0 var(--fe-space-4);
}

.fe-product-faq__answer-inner p:last-child {
  margin-bottom: 0;
}

/* Mobile */
@media (max-width: 768px) {
  .fe-product-faq {
    padding: var(--fe-space-16) var(--fe-space-6);
  }

  .fe-product-faq__title {
    font-size: var(--fe-size-lg);
  }

  .fe-product-faq__question {
    font-size: var(--fe-size-sm);
    padding: var(--fe-space-4) 0;
  }
}

/* =========================================
   STACCIOLLA PROMISE SECTION — .fe-product-promise
   ========================================= */

.fe-product-promise {
  background: var(--fe-cream-dark);
  padding: var(--fe-section-py) var(--fe-container-px);
}

.fe-product-promise__container {
  max-width: var(--fe-container-max);
  margin: 0 auto;
}

/* Header */
.fe-product-promise__header {
  text-align: center;
  margin-bottom: var(--fe-space-12);
}

.fe-product-promise__label {
  display: block;
  font-family: var(--fe-font-body);
  font-size: 0.65rem;
  font-weight: var(--fe-weight-medium);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--fe-gold-dark);
  margin-bottom: var(--fe-space-4);
}

.fe-product-promise__subtitle {
  font-family: var(--fe-font-display);
  font-size: var(--fe-size-xl);
  font-weight: var(--fe-weight-light);
  font-style: italic;
  line-height: 1.05;
  color: var(--fe-black);
  margin: 0;
}

/* Grid — 4 columns on desktop */
.fe-product-promise__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--fe-space-6);
}

/* Card */
.fe-product-promise__card {
  background: var(--fe-white);
  border: 1px solid var(--fe-border);
  padding: var(--fe-space-8) var(--fe-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--fe-space-4);
}

/* Icon wrapper */
.fe-product-promise__icon {
  color: var(--fe-gold-dark);
  flex-shrink: 0;
}

.fe-product-promise__icon svg {
  width: 28px;
  height: 28px;
  display: block;
}

/* Card title */
.fe-product-promise__card-title {
  font-family: var(--fe-font-body);
  font-size: var(--fe-size-sm);
  font-weight: var(--fe-weight-medium);
  letter-spacing: 0.04em;
  color: var(--fe-black);
  margin: 0;
  line-height: var(--fe-leading-normal);
}

/* Card description */
.fe-product-promise__card-desc {
  font-family: var(--fe-font-body);
  font-size: var(--fe-size-sm);
  font-weight: var(--fe-weight-regular);
  color: var(--fe-warm-gray);
  line-height: var(--fe-leading-loose);
  margin: 0;
}

/* Tablet — 2×2 grid */
@media (max-width: 1024px) {
  .fe-product-promise__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile — single column */
@media (max-width: 600px) {
  .fe-product-promise {
    padding: var(--fe-space-16) var(--fe-space-6);
  }

  .fe-product-promise__grid {
    grid-template-columns: 1fr;
    gap: var(--fe-space-4);
  }

  .fe-product-promise__subtitle {
    font-size: var(--fe-size-lg);
  }
}

/* =========================================
   DIMENSIONS & WHAT FITS — .fe-product-dimensions
   ========================================= */

/* Section wrapper — white background for visual separation */
.fe-product-dimensions {
  background: var(--fe-white);
  padding: var(--fe-section-py) var(--fe-container-px);
  border-top: 1px solid var(--fe-border);
  border-bottom: 1px solid var(--fe-border);
}

.fe-product-dimensions__container {
  max-width: var(--fe-container-max);
  margin: 0 auto;
}

/* ── Header ── */
.fe-product-dimensions__header {
  text-align: center;
  margin-bottom: var(--fe-space-12);
}

.fe-product-dimensions__label {
  display: block;
  font-family: var(--fe-font-body);
  font-size: 0.65rem;
  font-weight: var(--fe-weight-medium);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--fe-gold-dark);
  margin-bottom: var(--fe-space-4);
}

.fe-product-dimensions__title {
  font-family: var(--fe-font-display);
  font-size: var(--fe-size-xl);
  font-weight: var(--fe-weight-light);
  font-style: italic;
  line-height: 1.05;
  color: var(--fe-black);
  margin: 0;
}

/* ── Size selector buttons ── */
.fe-product-dimensions__sizes {
  display: flex;
  justify-content: center;
  gap: var(--fe-space-3);
  margin-bottom: var(--fe-space-12);
}

.fe-product-dimensions__size-btn {
  font-family: var(--fe-font-body);
  font-size: var(--fe-size-sm);
  font-weight: var(--fe-weight-medium);
  letter-spacing: 0.06em;
  color: var(--fe-black);
  background: transparent;
  border: 1px solid var(--fe-border-dark);
  padding: var(--fe-space-2) var(--fe-space-6);
  cursor: pointer;
  transition: background var(--fe-transition-fast), color var(--fe-transition-fast), border-color var(--fe-transition-fast);
}

.fe-product-dimensions__size-btn:hover {
  border-color: var(--fe-black);
}

.fe-product-dimensions__size-btn.is-active {
  background: var(--fe-black);
  color: var(--fe-white);
  border-color: var(--fe-black);
}

/* ── Main two-column layout ── */
.fe-product-dimensions__main {
  display: grid;
  grid-template-columns: 36fr 64fr;
  gap: var(--fe-space-16);
  align-items: center;
  margin-bottom: var(--fe-space-12);
}

/* ── Bag silhouette (left column) ── */
.fe-product-dimensions__silhouette {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--fe-space-4);
}

.fe-product-dimensions__bag-wrap {
  transform-origin: center center;
  transition: transform var(--fe-transition-slow);
  color: var(--fe-charcoal);
  width: 100%;
  max-width: 300px;
}

.fe-product-dimensions__bag-svg {
  width: 100%;
  height: auto;
  display: block;
}

.fe-product-dimensions__descriptor {
  font-family: var(--fe-font-body);
  font-size: var(--fe-size-sm);
  font-weight: var(--fe-weight-regular);
  color: var(--fe-warm-gray);
  letter-spacing: 0.06em;
  text-align: center;
}

/* ── Items grid (right column) ── */
.fe-product-dimensions__items {
  display: flex;
  flex-direction: column;
  gap: var(--fe-space-4);
}

.fe-product-dimensions__items-heading {
  font-family: var(--fe-font-body);
  font-size: 0.65rem;
  font-weight: var(--fe-weight-medium);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fe-warm-gray);
}

.fe-product-dimensions__items-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--fe-border);
}

/* Individual item row */
.fe-product-dimensions__item {
  display: flex;
  align-items: center;
  gap: var(--fe-space-3);
  padding: var(--fe-space-3) var(--fe-space-4) var(--fe-space-3) 0;
  border-bottom: 1px solid var(--fe-border);
  transition: opacity var(--fe-transition);
}

.fe-product-dimensions__item.fits {
  opacity: 1;
}

.fe-product-dimensions__item.no-fit {
  opacity: 0.28;
}

.fe-product-dimensions__item-icon {
  flex-shrink: 0;
  color: var(--fe-charcoal);
  display: flex;
  align-items: center;
}

.fe-product-dimensions__item-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

.fe-product-dimensions__item-name {
  flex: 1;
  font-family: var(--fe-font-body);
  font-size: var(--fe-size-sm);
  font-weight: var(--fe-weight-regular);
  color: var(--fe-black);
}

.fe-product-dimensions__item-status {
  font-family: var(--fe-font-body);
  font-size: var(--fe-size-sm);
  font-weight: var(--fe-weight-medium);
  color: var(--fe-warm-gray);
  min-width: 16px;
  text-align: right;
}

.fe-product-dimensions__item.fits .fe-product-dimensions__item-status {
  color: var(--fe-gold-dark);
}

/* ── Specs bar (4 columns) ── */
.fe-product-dimensions__specs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--fe-border);
  border-left: 1px solid var(--fe-border);
}

.fe-product-dimensions__spec {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--fe-space-6) var(--fe-space-4);
  border-right: 1px solid var(--fe-border);
  border-bottom: 1px solid var(--fe-border);
  gap: var(--fe-space-2);
}

.fe-product-dimensions__spec-value {
  font-family: var(--fe-font-display);
  font-size: var(--fe-size-lg);
  font-weight: var(--fe-weight-light);
  color: var(--fe-black);
  line-height: 1;
  transition: opacity var(--fe-transition-fast);
}

.fe-product-dimensions__spec-label {
  font-family: var(--fe-font-body);
  font-size: var(--fe-size-xs);
  font-weight: var(--fe-weight-regular);
  color: var(--fe-warm-gray);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}

/* ── Tablet ── */
@media (max-width: 1024px) {
  .fe-product-dimensions__main {
    grid-template-columns: 1fr 1fr;
    gap: var(--fe-space-8);
  }
}

/* ── Mobile ── */
@media (max-width: 640px) {
  .fe-product-dimensions {
    padding: var(--fe-space-16) var(--fe-space-6);
  }

  .fe-product-dimensions__title {
    font-size: var(--fe-size-lg);
  }

  .fe-product-dimensions__main {
    grid-template-columns: 1fr;
    gap: var(--fe-space-8);
  }

  .fe-product-dimensions__bag-wrap {
    max-width: 140px;
    margin: 0 auto;
  }

  .fe-product-dimensions__silhouette {
    order: 1;
  }

  .fe-product-dimensions__items {
    order: 2;
  }

  .fe-product-dimensions__specs {
    grid-template-columns: repeat(2, 1fr);
  }
}