/* Type scale measured on the DaryanPet reference product page.
   Keep Pashmal's open-source Vazirmatn face and existing visual identity. */
:root {
  --type-body: 14px;
  --type-ui: 15px;
  --type-small: 12px;
  --type-heading: 18px;
  --type-section: 22px;
}

body { font-size: var(--type-body); font-weight: 500; line-height: 2; }
.announcement { font-size: var(--type-small); }
.search { min-width: 0; }
.search input { min-width: 0; font-size: var(--type-body); line-height: 2; }
.search kbd { font-size: var(--type-small); }
.cartbutton { font-size: var(--type-body); }
.site-nav { font-size: var(--type-ui); gap: 30px; }
.eyebrow, .herofoot { font-size: var(--type-small); }
.herotext h1 { font-size: clamp(36px, 4vw, 48px); line-height: 1.6; }
.herotext p { font-size: var(--type-body); line-height: 2; }
.primary { font-size: 13px; font-weight: 600; line-height: 1.6; min-height: 44px; }
.herofoot { flex-wrap: wrap; gap: 8px 22px; }
.floating span { font-size: var(--type-small); }
.benefits b { font-size: var(--type-body); }
.benefits small { font-size: var(--type-small); line-height: 1.8; }
.sectionhead { gap: 20px; }
.sectionhead h2 { font-size: var(--type-section); font-weight: 600; line-height: 1.4; }
.sectionhead p, .sectionhead > a { font-size: var(--type-body); }
.category { gap: 10px; min-width: 0; }
.category strong { font-size: var(--type-ui); }
.category small { font-size: var(--type-small); line-height: 1.8; }
.filterbar { align-items: center; }
#tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.filterbar button { font-size: var(--type-body); min-height: 40px; }
.filterbar select { font-size: var(--type-body); padding: 8px; }
.productmeta { font-size: var(--type-small); line-height: 1.8; }
.badge { font-size: var(--type-small); line-height: 1.6; }
.product h3 { font-size: var(--type-body); font-weight: 700; line-height: 1.4; min-height: 60px; }
.product h3 button { padding: 0; text-align: right; line-height: inherit; }
.rating { font-size: var(--type-small); line-height: 1.8; }
.pricebar { flex-wrap: wrap; gap: 10px; }
.price { font-size: var(--type-body); font-weight: 600; white-space: nowrap; }
.price small { font-size: var(--type-small); }
.add { width: 40px; height: 40px; flex-shrink: 0; line-height: 1; }
.banner > div > span { font-size: var(--type-body); }
.banner h2 { font-size: 28px; }
.guides article span { font-size: var(--type-small); }
.guides h3 { font-size: var(--type-heading); font-weight: 600; line-height: 2; }
.guides p { font-size: var(--type-body); line-height: 2; }
.newsletter h2 { font-size: var(--type-section); line-height: 1.4; }
.newsletter p, .newsletter input { font-size: var(--type-body); }
.newsletter button { font-size: 13px; }
.site-footer .logo span { font-size: var(--type-small); line-height: 2; }
.site-footer b { font-size: var(--type-heading); line-height: 2; }
.site-footer a, .site-footer button, .site-footer p { font-size: var(--type-body); }
.copyright { font-size: var(--type-small); }
.dialoghead { gap: 16px; align-items: flex-start; }
.dialoghead h2 { font-size: var(--type-heading); font-weight: 600; line-height: 2; margin-top: 0; }
.close { flex-shrink: 0; min-width: 36px; min-height: 36px; line-height: 1; }
.cartrow h4 { font-size: var(--type-body); line-height: 1.6; }
.cartrow small { font-size: var(--type-small); }
.qty { white-space: nowrap; }
#cartTotal, #checkoutSummary { font-size: var(--type-body); line-height: 2; }
label { font-size: var(--type-body); }
label input, label select, textarea { font-size: 16px; line-height: 1.6; }
.demo { font-size: var(--type-small); }
#toast { font-size: var(--type-body); max-width: calc(100vw - 30px); }
#info p, #detail p { font-size: var(--type-body); line-height: 2; }
#detail > b { font-size: 17px; font-weight: 500; line-height: 2; }

@media (max-width: 1000px) {
  .site-nav { justify-content: flex-start; overflow-x: auto; white-space: nowrap; gap: 25px; }
  .special { margin-right: 0; }
  .category { flex-direction: column; text-align: center; }
}
@media (max-width: 800px) {
  .benefits > div { min-width: 0; }
  .sectionhead > a { flex-shrink: 0; }
  .filterbar { flex-wrap: wrap; }
  .category small { font-size: var(--type-small); }
}
@media (max-width: 520px) {
  .announcement { font-size: var(--type-small); }
  .herotext h1 { font-size: 36px; }
  .herofoot { margin-top: 20px; }
  .floating { font-size: var(--type-body); }
  .floating span { font-size: var(--type-small); }
  .benefits b { font-size: var(--type-body); }
  .benefits small { font-size: var(--type-small); }
  .sectionhead { flex-wrap: wrap; gap: 10px; }
  .sectionhead h2 { font-size: var(--type-section); }
  .sectionhead > a { font-size: var(--type-body); }
  .categorygrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .category strong { font-size: var(--type-ui); }
  .filterbar button { padding: 7px 12px; }
  .filterbar select { max-width: 100%; }
  .product h3 { font-size: var(--type-body); min-height: 80px; }
  .price { font-size: var(--type-body); }
  .pricebar { gap: 7px; }
  .banner h2 { font-size: var(--type-section); }
  .newsletter h2 { font-size: var(--type-section); }
  .newsletter input { font-size: 16px; min-width: 0; }
  .newsletter form { min-width: 0; }
  dialog { padding: 20px; }
}
@media (max-width: 359px) {
  .products { grid-template-columns: 1fr; }
  .product h3 { min-height: 0; }
  .benefits { grid-template-columns: 1fr; }
  .banner { padding: 22px; }
  .bannerart { display: none; }
  .newsletter form { flex-wrap: wrap; gap: 5px; }
  .newsletter button { width: 100%; }
}