/* Autodoria — base stylesheet. Layout uses inline styles ported 1:1 from the design;
   this file only adds resets, responsive grid behaviour and interactive states
   that the original single-viewport design prototype didn't need. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
a { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; }
button { font-family: inherit; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid #d81f26;
  outline-offset: 2px;
}

.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

.btn-primary { transition: background-color .15s ease; }
.btn-primary:hover { background-color: #b8181e !important; }
.btn-dark { transition: background-color .15s ease; }
.btn-dark:hover { background-color: #33353a !important; }
.btn-outline { transition: border-color .15s ease, color .15s ease; }
.btn-outline:hover { border-color: #ffffff !important; }

.nav-link { transition: color .15s ease; }
.nav-link:hover { color: #d81f26 !important; }

.card-link { transition: box-shadow .15s ease, transform .15s ease; }
.card-link:hover { box-shadow: 0 8px 20px rgba(28,30,34,.08); transform: translateY(-2px); }

.product-photo, .cat-photo, .blog-photo, .hero-photo, .section-photo, .gallery-photo {
  display: block;
  width: 100%;
  object-fit: cover;
  background: #ececed;
}

.qty-btn { transition: background-color .15s ease; }
.qty-btn:hover { background-color: #e5e6e8 !important; }

.social-circle { transition: background-color .15s ease, border-color .15s ease; }
.social-circle:hover { background-color: #26282d; border-color: #4a4d52; }

.footer-link, .footer-bottom-link { transition: color .15s ease; }
.footer-link:hover, .footer-bottom-link:hover { color: #fff !important; }

.faq-item, .blog-item { transition: box-shadow .15s ease; }
.faq-q, .blog-q { user-select: none; }

.form-input, .form-textarea {
  transition: border-color .15s ease;
}
.form-input:focus, .form-textarea:focus { border-color: #1c1e22 !important; }

.skip-link {
  position: absolute; left: -999px; top: 0; background: #1c1e22; color: #fff;
  padding: 10px 16px; z-index: 1000; font-size: 14px; font-weight: 700;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- responsive grids ---------- */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.grid-autofill { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.cart-line { display: flex; align-items: center; gap: 20px; }

@media (max-width: 980px) {
  .grid-4, .grid-5 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .about-grid, .hero-grid, .product-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .site-header-row { padding: 14px 16px !important; }
  .hero-title { font-size: 34px !important; }
  .cart-line { flex-wrap: wrap; }
  .cart-line > div:first-child { width: 64px !important; height: 64px !important; }
}

@media (max-width: 900px) {
  .nav-links { display: none !important; }
  .nav-toggle { display: inline-flex !important; }
  .nav-links.nav-open {
    display: flex !important;
    position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; flex-direction: column; gap: 0 !important;
    border-top: 1px solid #eceeef; border-bottom: 1px solid #eceeef;
    padding: 8px 24px;
  }
  .nav-links.nav-open a { padding: 12px 0 !important; border-bottom: 1px solid #f0f0f1 !important; }
}
.nav-toggle { display: none; }