/* =====================================================================
   About Equine — Responsive rules (mobile-first adjustments)
   Base styles target mobile; these rules adapt upward and down.
   ===================================================================== */

/* ---- Large desktop ---- */
@media (min-width: 1600px) {
  :root { --fs-body: 1.09rem; }
}

/* ---- Tablet / small desktop (<1024px): collapse desktop nav ---- */
@media (max-width: 1023px) {
  :root { --header-h: 118px; }
  .header-bar { grid-template-columns: auto 1fr auto; }
  .brand { justify-self: start; }
  .mega { display: none; }
  .feature-strip { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ---- Tablet (<=900px) ---- */
@media (max-width: 900px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .product-grid, .product-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .feature-split { grid-template-columns: 1fr; }
  .feature-split--reverse .feature-split__media { order: 0; }
  .feature-split__media .scene { min-height: 320px; }
  .pdp { grid-template-columns: 1fr; }
  .stat-row { gap: var(--sp-4); }

  /* Shop layout: filters move to an off-canvas dialog */
  .shop-layout { grid-template-columns: 1fr; }
  .shop-aside { display: none; }
  .filter-fab {
    display: inline-flex; align-items: center; gap: .5rem; position: fixed; bottom: 1.25rem; left: 50%;
    transform: translateX(-50%); z-index: 700; background: var(--forest); color: #fff;
    padding: .85rem 1.5rem; border-radius: var(--r-pill); box-shadow: var(--shadow-lg); font-weight: 650;
  }
  .filter-fab svg { width: 18px; height: 18px; }
  .filters-dialog {
    display: block; position: fixed; inset: 0; z-index: 1050; visibility: hidden;
  }
  .filters-dialog { position: fixed; top: 0; }
  .filters-dialog[data-open="true"] { visibility: visible; }
  .filters-dialog__scrim { display: block; position: absolute; inset: 0; background: rgba(21,39,31,.45); opacity: 0; transition: opacity var(--dur) var(--ease); }
  .filters-dialog__head { display: flex; }
  .filters-dialog__foot { display: grid; }
  .filters-dialog[data-open="true"] .filters-dialog__scrim { opacity: 1; }
  .filters-dialog__panel {
    position: absolute; left: 0; right: 0; bottom: 0; max-height: 86vh; background: var(--surface);
    border-radius: var(--r-lg) var(--r-lg) 0 0; transform: translateY(100%);
    transition: transform var(--dur) var(--ease); display: flex; flex-direction: column;
  }
  .filters-dialog[data-open="true"] .filters-dialog__panel { transform: none; }
  .filters-dialog__head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line); }
  .filters-dialog__body { overflow-y: auto; padding: var(--sp-4) var(--sp-5); }
  .filters-dialog .filters { border: none; padding: 0; }
  .filters-dialog__foot { border-top: 1px solid var(--line); padding: var(--sp-4) var(--sp-5); display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
}

/* ---- Mobile (<=640px) ---- */
@media (max-width: 640px) {
  :root { --gutter: 1.1rem; }
  .grid--4, .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .product-grid, .product-grid--4 { grid-template-columns: repeat(2, 1fr); gap: .9rem; }
  .feature-strip { grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .stat-row { grid-template-columns: 1fr; }
  .hero__inner { padding-block: 3rem; }
  .hero p { font-size: 1.08rem; }
  .pdp__actions .btn { min-width: 100%; }
  .dept-card { min-height: 300px; }
  .announce .wrap { gap: var(--sp-3); }
  .announce__item--hide-sm { display: none; }
  .product-card__body { padding: .8rem .85rem 1rem; }
  .product-card__name { font-size: 1rem; }
  .newsletter__form input { min-width: 100%; }
  .section { padding-block: 2.75rem; }
}

/* ---- Very small ---- */
@media (max-width: 380px) {
  .product-grid, .product-grid--4 { grid-template-columns: 1fr; }
  .brand__name { font-size: 1.3rem; }
}

/* ---- Print ---- */
@media print {
  .site-header, .site-footer, .announce, .newsletter, .filter-fab, .drawer, .mobile-nav { display: none !important; }
  body { color: #000; background: #fff; }
  a { text-decoration: underline; }
}