.section-hero-accessories {
  padding: var(--space-64) 0 var(--space-48);
  background: radial-gradient(circle at top left, var(--color-primary-soft) 0, #f9fafb 55%);
}

.hero-accessories__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--space-32);
  align-items: center;
}

.hero-accessories__breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-bottom: var(--space-16);
  padding: 0;
  list-style: none;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.hero-accessories__breadcrumbs a {
  color: var(--color-neutral-600);
}

.hero-accessories__breadcrumbs li+li::before {
  content: "/";
  margin: 0 var(--space-4);
  color: var(--color-neutral-300);
}

.hero-accessories__content h1 {
  margin-bottom: var(--space-16);
}

.hero-accessories__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin-top: var(--space-20);
}

.hero-accessories__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-20);
  margin-top: var(--space-24);
}

.hero-accessories__meta-text {
  margin-top: var(--space-8);
  font-size: var(--font-size-sm);
}

.hero-accessories__media {
  position: relative;
}

.hero-accessories__image {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.section-accessories-overview {
  padding: var(--space-48) 0;
}

.section-accessories-overview__header {
  max-width: 720px;
  margin: 0 auto var(--space-32);
  text-align: center;
}

.accessories-overview__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-20);
}

.accessories-overview__media-wrapper {
  margin-bottom: var(--space-16);
}

.accessories-overview__image {
  width: 100%;
  border-radius: var(--radius-md);
}

.accessories-overview__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-top: var(--space-12);
}

.accessories-overview__cta {
  margin-top: var(--space-16);
}

.section-storage-care {
  padding: var(--space-48) 0;
}

.storage-care__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-24);
  align-items: stretch;
}

.storage-care__media {
  margin-bottom: var(--space-16);
}

.storage-care__image {
  border-radius: var(--radius-md);
}

.storage-care__cta {
  margin-top: var(--space-16);
}

.storage-care__hint {
  margin-top: var(--space-12);
  font-size: var(--font-size-sm);
}

.section-tools {
  padding: var(--space-48) 0;
}

.section-tools__header {
  max-width: 720px;
  margin: 0 auto var(--space-32);
  text-align: center;
}

.tools__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-20);
}

.section-guides {
  padding: var(--space-48) 0 var(--space-64);
}

.guides__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-24);
}

.guides__list-wrapper {
  margin-bottom: var(--space-16);
}

.guides__note {
  font-size: var(--font-size-sm);
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.faq-list__item dt {
  font-weight: 600;
  margin-bottom: var(--space-4);
}

.faq-list__item dd {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.guides__cta {
  margin-top: var(--space-20);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  align-items: center;
}

.section-accessories-final {
  padding: var(--space-32) 0;
}

.section-accessories-final__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr);
  gap: var(--space-24);
  align-items: center;
}

.section-accessories-final__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  justify-content: flex-end;
}

.accessories-list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.accessories-list li+li {
  margin-top: var(--space-4);
}

@media (max-width: 1024px) {
  .hero-accessories__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero-accessories__media {
    max-width: 440px;
    margin: 0 auto;
  }
  .accessories-overview__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tools__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .storage-care__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .section-accessories-final__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .section-accessories-final__actions {
    justify-content: flex-start;
  }
}

@media (max-width: 768px) {
  .section-hero-accessories {
    padding: var(--space-40) 0 var(--space-32);
  }
  .hero-accessories__meta {
    grid-template-columns: minmax(0, 1fr);
  }
  .section-accessories-overview {
    padding: var(--space-40) 0;
  }
  .accessories-overview__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .section-tools {
    padding: var(--space-40) 0;
  }
  .tools__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .section-guides {
    padding: var(--space-40) 0 var(--space-48);
  }
  .guides__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
