/* Home page specific styles for PenMarkk */
.hero { padding: var(--space-20) 0 var(--space-16); }
.hero__inner { grid-template-columns: 1.1fr 0.9fr; align-items: center; }
.hero__content p { color: var(--gray-600); }
.hero__actions { display: flex; gap: var(--space-4); margin: var(--space-6) 0; flex-wrap: wrap; }
.hero__search { margin-top: var(--space-8); display: grid; gap: var(--space-4); }
.hero__filters .filter__row { display: grid; gap: var(--space-3); grid-template-columns: 1fr 1fr 1fr auto; }
.hero__media .hero__figure { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); }

.section { padding: var(--space-16) 0; }
.section__header { margin-bottom: var(--space-8); }
.section__header p { color: var(--gray-600); }

.product img { border-radius: var(--radius-lg); margin-bottom: var(--space-4); }
.product__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin: var(--space-3) 0; }
.product__price { font-weight: 700; color: var(--color-primary); }
.rating { letter-spacing: 2px; color: var(--color-accent); font-family: var(--font-serif); }
.product__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.badge { display: inline-block; background: var(--gray-100); border: 1px solid var(--gray-200); color: var(--color-primary); padding: 2px 8px; border-radius: var(--radius-full); font-size: var(--text-xs); margin-bottom: var(--space-3); }

.review blockquote { color: var(--gray-700); font-style: italic; margin-top: var(--space-3); }

.highlight { background: linear-gradient(180deg, var(--gray-50), transparent 70%); }
.highlight__grid { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--space-10); }
.highlight img { border-radius: var(--radius-xl); box-shadow: var(--shadow-md); }

.offers .offers__wrap { display: grid; gap: var(--space-4); }
.offers__list { margin: 0 0 var(--space-4) 1.25rem; color: var(--gray-700); }

.contact__grid { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-10); align-items: start; }
.contact__form .grid { gap: var(--space-4); }
.contact__form button { margin-top: var(--space-4); }

/* Responsive */
@media (max-width: 960px) {
  .hero__inner, .highlight__grid, .contact__grid { grid-template-columns: 1fr; }
  .hero { padding-top: var(--space-16); }
  .hero__filters .filter__row { grid-template-columns: 1fr; }
}