/* ============================================================
   Jeulia Jewelry — Responsive Styles
   Mobile-first adjustments
   ============================================================ */

/* ── Tablet (≤1024px) ───────────────────── */
@media (max-width: 1024px) {
  .site-header__inner {
    height: var(--header-height-mobile);
    gap: 16px;
  }

  .site-header__nav {
    display: none;
  }

  .mobile-menu-toggle {
    display: flex;
  }

  .site-header__actions .header-action--search,
  .site-header__actions .header-action--account {
    display: none;
  }

  .container {
    padding: 0 20px;
  }

  /* Product grid */
  .product-grid--4,
  .product-grid--5 {
    grid-template-columns: repeat(3, 1fr);
  }

  .product-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Category grid */
  .category-grid--4,
  .category-grid--5 {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Hero */
  .hero-banner__title {
    font-size: 2.5rem;
  }

  .hero-banner__subtitle {
    font-size: 1rem;
  }

  .hero-banner__content {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    padding: 48px 20px;
    background: var(--color-white);
  }

  .hero-banner__image {
    max-height: 50vh;
  }

  /* Shop */
  .shop-layout--left,
  .shop-layout--right {
    grid-template-columns: 1fr;
  }

  .shop-sidebar {
    order: -1;
    position: static;
  }

  /* Footer */
  .site-footer__grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 32px;
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }

  /* Single product */
  .single-product__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  /* Trust badges */
  .trust-badges {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Testimonials */
  .testimonials-grid {
    grid-template-columns: 1fr;
  }

  /* Homepage sections */
  .homepage-section {
    padding: 60px 0;
  }

  .section-title {
    font-size: 1.75rem;
    margin-bottom: 2rem;
  }

  /* Post grid */
  .post-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }

  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.75rem; }
}

/* ── Mobile (≤768px) ────────────────────── */
@media (max-width: 768px) {
  .container {
    padding: 0 16px;
  }

  :root {
    --header-height-mobile: 60px;
  }

  /* Announcement bar */
  .announcement-bar {
    font-size: 0.7rem;
    padding: 6px 0;
  }

  /* Header */
  .site-header__logo img {
    max-height: 36px;
  }

  .site-header__logo-text {
    font-size: 1.25rem;
  }

  .site-header__actions {
    gap: 8px;
  }

  .header-action {
    width: 36px;
    height: 36px;
  }

  .header-action svg {
    width: 18px;
    height: 18px;
  }

  /* Hero */
  .hero-banner__image {
    max-height: 40vh;
  }

  .hero-banner__content {
    padding: 32px 16px;
  }

  .hero-banner__title {
    font-size: 2rem;
  }

  .hero-banner__subtitle {
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
  }

  .hero-banner__btn {
    padding: 14px 28px;
    font-size: 0.85rem;
  }

  /* Product grid */
  .product-grid {
    gap: 12px;
  }

  .product-grid--4,
  .product-grid--5 {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-grid--2,
  .product-grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Category grid */
  .category-grid--4,
  .category-grid--5,
  .category-grid--3 {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  /* Product card */
  .product-card__title {
    font-size: 0.8rem;
  }

  .product-card__price {
    font-size: 0.85rem;
  }

  .product-card__add-to-cart {
    position: static;
    opacity: 1;
    transform: none;
    margin-top: 8px;
    width: 100%;
    padding: 10px;
    font-size: 0.75rem;
  }

  .product-card__actions {
    opacity: 1;
    transform: none;
    top: 8px;
    right: 8px;
    gap: 4px;
  }

  .product-card__action {
    width: 32px;
    height: 32px;
  }

  .product-card__action svg {
    width: 14px;
    height: 14px;
  }

  .product-card:hover .product-card__image--primary {
    opacity: 1;
  }

  .product-card:hover .product-card__image--hover {
    opacity: 0;
  }

  .product-card:hover .product-card__image--primary,
  .product-card:hover .product-card__image--hover {
    transform: none;
  }

  /* Homepage sections */
  .homepage-section {
    padding: 48px 0;
  }

  .section-title {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
  }

  /* Trust badges */
  .trust-badges {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .trust-badges__text {
    font-size: 0.75rem;
  }

  /* Newsletter */
  .newsletter-cta {
    padding: 40px 16px;
  }

  .newsletter-cta__title {
    font-size: 1.5rem;
  }

  .newsletter-form--inline {
    flex-direction: column;
    gap: 8px;
  }

  .newsletter-form__input {
    border-right: 1px solid var(--color-gray-300);
    border-radius: var(--radius-sm);
  }

  .newsletter-form__submit {
    border-radius: var(--radius-sm) !important;
  }

  /* Shop */
  .shop-title {
    font-size: 1.5rem;
  }

  .shop-layout {
    padding-top: 24px;
    padding-bottom: 60px;
  }

  /* Single product */
  .single-product {
    padding: 24px 0 60px;
  }

  .single-product__grid {
    gap: 24px;
  }

  .single-product__title {
    font-size: 1.5rem;
  }

  .single-product__price {
    font-size: 1.25rem;
  }

  .product-gallery__thumb {
    width: 56px;
    height: 56px;
  }

  /* Tabs */
  .woocommerce div.product .woocommerce-tabs ul.tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .woocommerce div.product .woocommerce-tabs ul.tabs li a {
    white-space: nowrap;
    padding: 14px 16px;
  }

  /* Footer */
  .site-footer {
    padding: 60px 0 0;
  }

  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding-bottom: 40px;
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }

  .site-footer__newsletter {
    grid-column: 1 / -1;
  }

  .site-footer__bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  .site-footer__tagline {
    max-width: none;
  }

  /* Mini cart */
  .mini-cart {
    max-width: 100%;
  }

  /* Back to top */
  .back-to-top {
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
  }

  /* 404 */
  .error-404 {
    padding: 80px 16px;
  }

  .error-404__code {
    font-size: 5rem;
  }

  .error-404__actions {
    flex-direction: column;
    align-items: center;
  }

  /* Blog */
  .post-grid--3 {
    grid-template-columns: 1fr;
  }

  /* Typography */
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }

  /* Search overlay */
  .search-overlay__form {
    max-width: 90%;
  }

  .search-overlay__input {
    font-size: 1.1rem;
  }

  /* Breadcrumb */
  .woocommerce-breadcrumb {
    font-size: 0.7rem;
  }
}

/* ── Small Mobile (≤480px) ──────────────── */
@media (max-width: 480px) {
  .product-grid--2,
  .product-grid--3,
  .product-grid--4,
  .product-grid--5 {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .category-grid--3,
  .category-grid--4,
  .category-grid--5 {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .trust-badges {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .hero-banner__title {
    font-size: 1.5rem;
  }

  .hero-banner__image {
    max-height: 35vh;
  }

  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .btn--lg {
    padding: 14px 24px;
    font-size: 0.85rem;
  }

  .woocommerce .single_add_to_cart_button {
    width: 100%;
  }

  .site-header__actions .header-action--wishlist {
    display: none;
  }
}

/* ── Large Desktop (≥1600px) ────────────── */
@media (min-width: 1600px) {
  .container {
    padding: 0 40px;
  }

  .hero-banner__title {
    font-size: 4rem;
  }

  .product-grid--4 {
    grid-template-columns: repeat(5, 1fr);
  }
}