/* Kazio Mobile Responsive Base v1
   Safe mobile-only fixes. Desktop remains untouched.
*/
@media (max-width: 768px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  img,
  svg,
  video,
  canvas,
  iframe {
    max-width: 100% !important;
    height: auto;
  }

  table {
    max-width: 100%;
  }

  /* General wrappers */
  .container,
  .container-fluid,
  main,
  #content,
  .content,
  .main-content,
  .page-content,
  .kazio-container,
  .kazio-main,
  .kazio-page,
  .kazio-wrapper,
  .checkout-wrapper,
  .checkout-card,
  .account-wrapper,
  .product-wrapper,
  .product-info,
  .product-page,
  .product-detail,
  .search-wrapper,
  .search-page {
    width: 100% !important;
    max-width: calc(100vw - 20px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Prevent fixed desktop widths from leaking into mobile */
  [style*="width:"],
  [style*="min-width:"] {
    max-width: 100% !important;
  }

  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  [class^="col-"],
  [class*=" col-"] {
    max-width: 100% !important;
  }

  /* Header */
  header,
  .site-header,
  .kazio-header,
  .header,
  .top-bar,
  .kazio-topbar,
  .header-top {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .site-header .container,
  .kazio-header .container,
  header .container,
  .header .container {
    width: 100% !important;
    max-width: calc(100vw - 20px) !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .logo,
  .site-logo,
  .kazio-logo,
  #logo {
    max-width: 160px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  .search,
  .search-box,
  .kazio-search,
  #search {
    width: 100% !important;
    max-width: 100% !important;
  }

  .search input,
  .search-box input,
  .kazio-search input,
  #search input,
  input[type="search"] {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Green category menu: keep usable with horizontal scroll instead of overflow */
  nav,
  .navbar,
  .main-menu,
  .kazio-menu,
  .category-menu,
  .menu {
    max-width: calc(100vw - 20px) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    scrollbar-width: thin;
  }

  nav ul,
  .navbar ul,
  .main-menu ul,
  .kazio-menu ul,
  .category-menu ul,
  .menu ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px;
    padding: 0 8px !important;
    margin: 0 !important;
  }

  nav li,
  .navbar li,
  .main-menu li,
  .kazio-menu li,
  .category-menu li,
  .menu li {
    flex: 0 0 auto !important;
  }

  nav a,
  .navbar a,
  .main-menu a,
  .kazio-menu a,
  .category-menu a,
  .menu a {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Product page */
  .product-info,
  .product-detail,
  .product-page,
  .product-layout,
  .product-card-main,
  .product-main,
  #product {
    display: block !important;
  }

  .product-info > *,
  .product-detail > *,
  .product-page > *,
  .product-main > *,
  #product > * {
    width: 100% !important;
    max-width: 100% !important;
  }

  .product-thumb,
  .product-image,
  .product-gallery,
  .image,
  .thumbnails {
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .product-thumb img,
  .product-image img,
  .product-gallery img,
  .image img {
    object-fit: contain;
  }

  .button-group,
  .product-actions,
  .cart-actions,
  .kz-club-v1-product-nudge,
  .kz-club-v1f-account-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  .button-group,
  .product-actions,
  .cart-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px;
  }

  .button-group button,
  .button-group a,
  .product-actions button,
  .product-actions a,
  .cart-actions button,
  .cart-actions a,
  #button-cart {
    width: 100% !important;
    min-height: 46px;
  }

  /* Product/search grids */
  .product-grid,
  .product-list,
  .products,
  .product-layout,
  .search-results,
  .category-products {
    max-width: 100% !important;
  }

  .product-grid,
  .products,
  .search-results {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .product-layout,
  .product-layout .product-thumb,
  .product-card,
  .card-product {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Forms: login, register, checkout, search */
  form,
  fieldset,
  .form-group,
  .form-row,
  .input-group,
  .login-box,
  .register-box,
  .account-card,
  .checkout-card,
  .checkout-section,
  .payment-section,
  .shipping-section,
  .cart-section,
  .summary-section {
    max-width: 100% !important;
  }

  input,
  select,
  textarea,
  button,
  .btn {
    max-width: 100% !important;
  }

  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px;
  }

  button,
  .btn,
  input[type="button"],
  input[type="submit"],
  a.btn {
    min-height: 42px;
    touch-action: manipulation;
  }

  /* Login/register two-column cards -> single column */
  .login-register,
  .account-login,
  .account-register,
  .register-login,
  .auth-grid,
  .auth-wrapper {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .login-register > *,
  .account-login > *,
  .account-register > *,
  .register-login > *,
  .auth-grid > *,
  .auth-wrapper > * {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Cart and checkout */
  .cart-info,
  .cart-table,
  .table-responsive,
  .checkout-summary,
  .order-summary {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .checkout,
  .checkout-page,
  .checkout-layout,
  .checkout-wrapper,
  .cart-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Footer */
  footer,
  .footer,
  .site-footer,
  .kazio-footer {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  footer .container,
  .footer .container,
  .site-footer .container,
  .kazio-footer .container {
    width: 100% !important;
    max-width: calc(100vw - 20px) !important;
  }

  footer .row,
  .footer .row,
  .site-footer .row,
  .kazio-footer .row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Audit helper should not create layout shift */
  #kz-mobile-audit-panel {
    max-width: calc(100vw - 24px) !important;
  }
}

@media (max-width: 480px) {
  .container,
  .container-fluid,
  main,
  #content,
  .kazio-container,
  .kazio-main,
  .kazio-page,
  .kazio-wrapper {
    max-width: calc(100vw - 14px) !important;
  }

  h1 {
    font-size: 24px !important;
    line-height: 1.8 !important;
  }

  h2 {
    font-size: 20px !important;
    line-height: 1.8 !important;
  }

  .logo,
  .site-logo,
  .kazio-logo,
  #logo {
    max-width: 138px !important;
  }

  nav,
  .navbar,
  .main-menu,
  .kazio-menu,
  .category-menu,
  .menu {
    max-width: calc(100vw - 14px) !important;
  }
}