/**
 * CARTELL Responsive Layout & Breakpoints
 * Mobile-first architecture: 375px, 390px, 768px, 1024px, 1440px
 */

/* ==========================================================================
   MOBILE DEFAULT (< 768px)
   Matches the supplied design-reference.png screenshot exactly
   ========================================================================== */

@media (max-width: 767px) {
  .site-header {
    padding: var(--space-1) 0;
  }

  .header-inner {
    height: 52px;
  }

  /* Centered logo on mobile */
  .header-brand {
    flex: 1;
  }

  .header-wishlist-btn {
    display: none; /* In mobile reference, wishlist is in bottom nav */
  }

  /* Full-width rounded search bar below the header line */
  .header-search-wrap {
    padding: 0 0 var(--space-2);
  }

  /* Show mobile bottom nav */
  .mobile-bottom-nav {
    display: flex;
  }

  .desktop-nav-wrap {
    display: none !important;
  }
}

/* ==========================================================================
   TABLET ADAPTATION (768px - 1023px)
   ========================================================================== */

@media (min-width: 768px) {
  /* Hide bottom nav on tablet and desktop */
  .mobile-bottom-nav {
    display: none !important;
  }

  .site-header {
    padding: var(--space-2) 0 0;
  }

  .header-inner {
    height: 64px;
    gap: var(--space-4);
  }

  /* Logo aligns left */
  .header-brand {
    justify-content: flex-start;
    flex-shrink: 0;
  }

  .cartell-wordmark {
    font-size: 28px;
  }

  /* Search bar moves into header row */
  .header-search-wrap {
    flex: 1;
    max-width: 480px;
    margin: 0 auto;
    padding-bottom: 0;
  }

  /* Show Wishlist icon in header */
  .header-wishlist-btn {
    display: inline-flex;
  }

  /* Desktop category navigation bar is displayed */
  .desktop-nav-wrap,
  .desktop-category-nav {
    display: block;
    margin-top: var(--space-1);
  }

  .desktop-nav-list {
    gap: var(--space-4);
  }
}

/* ==========================================================================
   DESKTOP ADAPTATION (1024px+)
   ========================================================================== */

@media (min-width: 1024px) {
  .header-inner {
    height: 70px;
    gap: var(--space-6);
  }

  .header-search-wrap {
    max-width: 560px;
  }

  .search-input-box {
    padding: 4px 6px 4px 20px;
  }

  .search-input {
    font-size: 15px;
    height: 42px;
  }

  .search-submit-btn {
    width: 38px;
    height: 38px;
  }

  /* Desktop action buttons with text labels for premium feel */
  .header-action-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-pill);
    transition: background-color var(--transition-fast), color var(--transition-fast);
  }

  .header-action-item:hover {
    background-color: var(--color-surface-hover);
    color: var(--color-primary);
  }

  .header-action-label {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
  }

  .desktop-nav-list {
    gap: var(--space-6);
  }

  .desktop-nav-link {
    font-size: 15px;
    padding: var(--space-2) var(--space-4);
  }
}

/* ==========================================================================
   LARGE DESKTOP (1440px+)
   ========================================================================== */

@media (min-width: 1440px) {
  .cartell-container {
    max-width: 1280px;
  }

  .header-search-wrap {
    max-width: 620px;
  }
}