/* DianaParts mobile responsive layer */
/* Desktop styles remain untouched */

@media (max-width: 900px) {
  html, body {
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    font-size: 15px;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  .container,
  .wrap,
  .page,
  .main,
  main,
  section {
    max-width: 100% !important;
  }

  /* HEADER */
  header,
  .header,
  .site-header,
  .topbar,
  .navbar {
    position: relative;
    z-index: 20;
  }

  header .container,
  .header .container,
  .site-header .container,
  .nav-wrap,
  .navbar .container {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .brand,
  .logo {
    flex: 0 0 auto !important;
    max-width: 190px !important;
  }

  .brand img,
  .logo img {
    max-width: 180px !important;
    height: 52px !important;
    object-fit: contain !important;
  }

  nav,
  .nav,
  .menu,
  .main-nav {
    order: 3;
    width: 100% !important;
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    padding: 8px 0 2px !important;
    scrollbar-width: thin;
  }

  nav a,
  .nav a,
  .menu a,
  .main-nav a {
    flex: 0 0 auto !important;
    padding: 9px 12px !important;
    border-radius: 12px !important;
    background: rgba(9, 28, 52, 0.06) !important;
    font-size: 14px !important;
    line-height: 1.1 !important;
  }

  .cart-link,
  .phone-link,
  .header-phone,
  .top-phone {
    font-size: 14px !important;
    padding: 9px 12px !important;
    border-radius: 12px !important;
  }

  /* HERO */
  .hero {
    min-height: auto !important;
    padding: 34px 14px 28px !important;
    background-position: center right !important;
  }

  .hero .container,
  .hero-inner,
  .hero-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  .hero h1,
  h1 {
    font-size: clamp(30px, 9vw, 46px) !important;
    line-height: 1.05 !important;
    letter-spacing: -1px !important;
  }

  .hero p,
  .hero .lead,
  .hero .subtitle {
    font-size: 16px !important;
    line-height: 1.45 !important;
    max-width: 100% !important;
  }

  .search,
  .search-form,
  .hero-search,
  form[action="/catalog"] {
    width: 100% !important;
    display: flex !important;
    gap: 8px !important;
  }

  .search input,
  .search-form input,
  .hero-search input,
  form[action="/catalog"] input[type="text"],
  input[type="search"] {
    min-width: 0 !important;
    width: 100% !important;
    font-size: 15px !important;
    padding: 14px 14px !important;
  }

  .search button,
  .search-form button,
  .hero-search button,
  form[action="/catalog"] button {
    flex: 0 0 auto !important;
    padding: 14px 18px !important;
    font-size: 14px !important;
  }

  .hero .badges,
  .hero-stats,
  .stats,
  .contact-pills {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .hero .badge,
  .stat-card,
  .contact-pill {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* CATEGORY CARDS */
  .categories,
  .category-grid,
  .cats-grid,
  .popular-categories,
  .cards-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .category-card,
  .cat-card {
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  .category-card h3,
  .cat-card h3,
  .category-card span,
  .cat-card span {
    font-size: 18px !important;
    line-height: 1.15 !important;
  }

  /* CATALOG */
  .catalog-layout,
  .catalog-wrap,
  .shop-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  aside,
  .sidebar,
  .filters,
  .filter-panel {
    width: 100% !important;
    max-width: 100% !important;
    position: static !important;
    margin: 0 !important;
  }

  .products,
  .product-grid,
  .catalog-grid,
  .grid-products {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .product-card,
  .card.product,
  .product {
    width: 100% !important;
    min-width: 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  .product-card img,
  .product img,
  .card.product img {
    width: 100% !important;
    height: 150px !important;
    object-fit: contain !important;
  }

  .product-card h3,
  .product h3,
  .card.product h3 {
    font-size: 15px !important;
    line-height: 1.15 !important;
    word-break: break-word !important;
  }

  .product-card .price,
  .product .price {
    font-size: 16px !important;
  }

  .btn,
  button,
  input[type="submit"] {
    min-height: 42px !important;
    border-radius: 12px !important;
  }

  .product-card .btn,
  .product button,
  .card.product button {
    width: 100% !important;
    font-size: 14px !important;
  }

  /* PRODUCT PAGE */
  .product-detail,
  .product-page,
  .product-view {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    padding: 14px !important;
  }

  .product-detail img,
  .product-page img,
  .product-view img {
    max-height: 340px !important;
    object-fit: contain !important;
  }

  /* CART / CHECKOUT */
  .cart,
  .checkout,
  .order-form,
  form {
    max-width: 100% !important;
  }

  table {
    width: 100% !important;
    display: block !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
  }

  input,
  textarea,
  select {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
  }

  textarea {
    min-height: 110px !important;
  }

  /* ADMIN */
  .admin-wrap,
  .admin-layout,
  .admin-content {
    padding: 14px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .admin-wrap .card,
  .card {
    max-width: 100% !important;
  }
}

@media (max-width: 520px) {
  .brand img,
  .logo img {
    max-width: 160px !important;
    height: 46px !important;
  }

  .cart-link,
  .phone-link,
  .header-phone,
  .top-phone {
    font-size: 13px !important;
    padding: 8px 10px !important;
  }

  .hero {
    padding-top: 28px !important;
  }

  .hero h1,
  h1 {
    font-size: clamp(28px, 11vw, 40px) !important;
  }

  .search,
  .search-form,
  .hero-search,
  form[action="/catalog"] {
    flex-direction: column !important;
  }

  .search button,
  .search-form button,
  .hero-search button,
  form[action="/catalog"] button {
    width: 100% !important;
  }

  .categories,
  .category-grid,
  .cats-grid,
  .popular-categories,
  .cards-grid {
    grid-template-columns: 1fr !important;
  }

  .products,
  .product-grid,
  .catalog-grid,
  .grid-products {
    grid-template-columns: 1fr !important;
  }

  .product-card img,
  .product img,
  .card.product img {
    height: 190px !important;
  }

  nav a,
  .nav a,
  .menu a,
  .main-nav a {
    font-size: 13px !important;
  }
}