/* ============================================
   MiniTiendAI — Public Store Styles
   Imports flattened into direct <link> tags
   in store.html for parallel loading.
   ============================================ */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.store-container {
  width: 100%;
  box-sizing: border-box;
  overflow-x: clip;
}

.categories-nav {
  width: 100%;
  max-width: 100%;
  margin-inline: 0;
  box-sizing: border-box;
}

.featured-section {
  max-width: 100%;
  overflow: hidden;
}

.featured-carousel {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  contain: layout paint;
}

.featured-card {
  max-width: calc(100vw - 48px);
}

.store-header,
.store-info,
.product-card,
.product-info,
.cart-item,
.modal-content,
.payment-option,
.confirm-order-item {
  min-width: 0;
}

.store-name,
.store-description,
.business-info,
.integration-badge,
.product-name,
.product-description,
.cart-item-info h4,
.payment-option-info,
.confirm-order-item span {
  overflow-wrap: anywhere;
}

.store-contact,
.business-details,
.integration-badges,
.product-actions,
.cart-actions,
.modal-footer {
  max-width: 100%;
}

.product-actions .btn,
.payment-actions .btn,
.cart-actions .btn {
  min-width: 0;
}

.product-actions .add-to-cart-btn span {
  white-space: normal;
  text-align: center;
}

.category-btn:focus-visible,
.mobile-nav-item:focus-visible,
.sticky-cart-bar:focus-visible {
  outline: 3px solid var(--primary-light);
  outline-offset: 3px;
}

@media (max-width: 768px) {
  .categories-nav {
    margin-inline: 0;
    width: 100%;
    padding-inline: var(--space-3);
  }

  .store-container .featured-carousel {
    padding-inline: var(--space-2);
  }

  .modal {
    padding: var(--space-3);
  }

  .modal-content {
    width: min(100%, calc(100vw - 24px));
    max-height: min(92vh, 720px);
  }
}

@media (max-width: 400px) {
  .store-container {
    padding-inline: var(--space-3);
  }

  .store-header {
    margin-inline: 0;
  }

  .store-container .featured-card {
    max-width: calc(100vw - 40px);
  }

  .store-contact {
    align-items: stretch;
  }

  .contact-link {
    justify-content: center;
    width: 100%;
  }

  .product-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    gap: var(--space-2);
  }

  .product-actions .whatsapp-order-btn {
    width: 48px;
    min-width: 48px;
    padding-inline: 0;
  }

  .payment-option {
    align-items: flex-start;
  }

  .payment-option-info {
    padding-right: var(--space-6);
  }

  .sticky-cart-bar {
    left: var(--space-3);
    right: var(--space-3);
    width: auto;
  }
}