/* =============================================================
   lamporia.ae — Mobile Responsive Fixes
   Targets gaps not covered by existing breakpoints.
   Load order: after pages.css
============================================================= */

/* ═══════════════════════════════════════════════════════════
   NAV — small screen polish
═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .nav__logo-img { height: 28px; }
  .nav__inner    { gap: var(--s4); }
  .nav__action-btn { width: 34px; height: 34px; }
  .nav__action-btn svg { width: 16px; height: 16px; }
}

/* ═══════════════════════════════════════════════════════════
   PRODUCT GRID — single column on very small screens
═══════════════════════════════════════════════════════════ */
@media (max-width: 400px) {
  .product-grid  { grid-template-columns: 1fr; gap: var(--s4); }
  .category-grid { grid-template-columns: 1fr; gap: var(--s4); }
}

/* ═══════════════════════════════════════════════════════════
   PRODUCT CARD — touch-friendly on mobile
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Disable hover lift on touch devices */
  .product-card:hover  { transform: none; box-shadow: none; }
  .category-card:hover { transform: none; box-shadow: none; }
  .blog-card:hover     { transform: none; box-shadow: none; }

  /* Stack product card buttons vertically on narrow cards */
  .product-card__actions { flex-direction: column; gap: var(--s2); }
  .product-card__actions .btn { flex: none; width: 100%; }
}

@media (max-width: 480px) {
  .product-card__name { font-size: 0.95rem; }
  .product-card__price-current { font-size: 1.2rem; }
  .product-card__price-old     { font-size: 0.85rem; }
}

/* ═══════════════════════════════════════════════════════════
   HERO — mobile layout
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .hero {
    padding-top: calc(var(--nav-h) + var(--s8));
    padding-bottom: var(--s10);
    min-height: auto;
  }
  .hero__inner { grid-template-columns: 1fr; gap: var(--s8); }
  .hero__content {
    text-align: center;
    align-items: center;
    max-width: 100%;
    order: 2;
  }
  .hero__media { order: 1; }
  .hero__eyebrow { justify-content: center; }
  .hero__image-placeholder { max-width: 320px; margin: 0 auto; }
  .hero__desc { font-size: var(--t-base); }
}

@media (max-width: 480px) {
  .hero { padding-top: calc(var(--nav-h) + var(--s6)); padding-bottom: var(--s8); }
  .hero__title { font-size: 2.1rem; }
  .hero__image-placeholder { max-width: 100%; aspect-ratio: 4/3; }
  .hero__actions { flex-direction: column; width: 100%; }
  .hero__actions .btn { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════
   CATEGORY CARDS — portrait on mobile
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .category-card { aspect-ratio: 4/3; }
}
@media (max-width: 480px) {
  .category-card { aspect-ratio: 3/2; }
  .category-card__title { font-size: 1.1rem; }
}

/* ═══════════════════════════════════════════════════════════
   SECTION HEADERS — mobile alignment
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .section-header { margin-bottom: var(--s8); }
  .section-header--split .btn { align-self: flex-start; }
  .section-title { font-size: clamp(1.5rem, 6vw, 2.25rem); }
}

/* ═══════════════════════════════════════════════════════════
   PRODUCT DETAIL PAGE
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .product-detail { padding-top: calc(var(--nav-h) + var(--s4)); padding-bottom: var(--s12); }
  .product-detail__grid { grid-template-columns: 1fr; gap: 0; }

  /* Remove container padding so gallery goes edge to edge */
  .product-detail > .container { padding-inline: 0; }
  .product-detail .breadcrumb  { padding-inline: var(--cx); }
  .product-info                { padding-inline: var(--cx); padding-top: var(--s6); }
  .product-tabs                { padding-inline: var(--cx); }
  .product-gallery__thumbs     { padding-inline: var(--cx); margin-top: var(--s3); gap: var(--s2); }

  /* Gallery wrapper */
  .product-gallery { position: static; width: 100%; }

  /* Main image container — square, full width */
  .product-gallery__main {
    position: relative;
    width: 100%;
    height: 100vw;  /* explicit height = viewport width = perfect square */
    aspect-ratio: unset;
    min-height: unset;
    max-height: unset;
    margin: 0;
    border: none;
    border-radius: 0;
    overflow: hidden;
    display: block;
  }

  /* Inner div — absolute fill now works because parent has explicit height */
  #gallery-main-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block;
  }

  /* The actual img tag */
  #gallery-main-img img,
  #gallery-main-img-el {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
  }

  /* Thumbs */
  .product-gallery__thumb { border-radius: var(--r-sm); }

  /* Product info text */
  .product-info__title { font-size: 1.5rem; }
  .product-info__price { font-size: 1.75rem; }

  /* Add to cart */
  .product-info__add { flex-direction: row; flex-wrap: wrap; gap: var(--s3); }
  .product-info__add .btn--primary { flex: 1; min-width: 140px; }

  /* Buy Now + WhatsApp */
  [data-buy-now], .btn--wa { width: 100%; justify-content: center; }

  /* Trust strip */
  .product-trust-strip { gap: var(--s4); flex-wrap: wrap; }

  /* Tabs scroll */
  .product-tabs__nav { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .product-tabs__nav::-webkit-scrollbar { display: none; }
  .product-tab-btn { white-space: nowrap; flex-shrink: 0; }
}

@media (max-width: 480px) {
  .product-gallery__thumbs { grid-template-columns: repeat(4, 1fr); }
  .product-info__title { font-size: 1.35rem; }
  .product-info__price { font-size: 1.5rem; }
  .product-tab-btn { font-size: 0.6rem; padding: var(--s3); }
  .spec-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .spec-table td:first-child { width: auto; min-width: 120px; }
  #tab-full-desc { font-size: var(--t-sm); }
}

/* ═══════════════════════════════════════════════════════════
   SHOP / CATEGORY TOOLBAR
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .shop-toolbar { gap: var(--s3); }
  .shop-toolbar__right { width: 100%; }
  .sort-select { width: 100%; flex: 1; }

  /* Filter tags — horizontal scroll */
  .filter-tags,
  [data-filter-group] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }
  .filter-tags::-webkit-scrollbar,
  [data-filter-group]::-webkit-scrollbar { display: none; }
  .filter-tag { white-space: nowrap; flex-shrink: 0; }
}

/* ═══════════════════════════════════════════════════════════
   ABOUT PAGE
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .about-hero { padding-top: calc(var(--nav-h) + var(--s8)); padding-bottom: var(--s10); }
  .about-hero__img-wrap { aspect-ratio: 4/3; }
  .about-hero .split-layout { grid-template-columns: 1fr; gap: var(--s8); }
}

@media (max-width: 480px) {
  .about-hero { padding-top: calc(var(--nav-h) + var(--s6)); }
  .about-hero__img-wrap { aspect-ratio: 3/2; }
  .about-values { margin: var(--s6) 0; }
}

/* ═══════════════════════════════════════════════════════════
   BLOG PAGE
═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .blog-card__image { aspect-ratio: 4/3; }
  .blog-card__body  { padding: var(--s4); }
  .blog-card__title { font-size: 1rem; }
}

/* ═══════════════════════════════════════════════════════════
   FAQ PAGE
═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .faq-group { margin-bottom: var(--s6); }
  .accordion-trigger { font-size: var(--t-sm); line-height: 1.45; }
}

/* ═══════════════════════════════════════════════════════════
   CONTACT PAGE
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .contact-grid { grid-template-columns: 1fr; gap: var(--s8); }

  /* Stack the 2-column form rows into single column on all mobile */
  .contact-form > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  .contact-info-item { gap: var(--s3); }
  .contact-info-item__icon { width: 36px; height: 36px; flex-shrink: 0; }
}

/* ═══════════════════════════════════════════════════════════
   LIFESTYLE SECTION
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .lifestyle-image { aspect-ratio: 4/3; }
  .lifestyle-content h2 { font-size: 1.75rem; }
}

/* ═══════════════════════════════════════════════════════════
   CART DRAWER
═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .cart-drawer { width: 100vw; }
  .cart-drawer__header { padding: var(--s4) var(--s4); }
  .cart-drawer__body   { padding: var(--s4); }
  .cart-drawer__footer { padding: var(--s4); }
  .cart-subtotal__value { font-size: 1.25rem; }
}

/* ═══════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .footer__brand-desc { max-width: 100%; }
  .footer__link { display: inline-block; padding-block: var(--s1); }
}

@media (max-width: 480px) {
  .footer__social { justify-content: center; }
  .footer__bottom { gap: var(--s3); }
}

/* ═══════════════════════════════════════════════════════════
   PAGE HEADERS (shop, blog, about, legal etc.)
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .page-header {
    padding-top: calc(var(--nav-h) + var(--s8));
    padding-bottom: var(--s8);
  }
  .page-header h1 { font-size: clamp(1.75rem, 7vw, 2.5rem); }
}

/* ═══════════════════════════════════════════════════════════
   BREADCRUMB
═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .breadcrumb { font-size: 0.7rem; flex-wrap: wrap; gap: 4px; }
}

/* ═══════════════════════════════════════════════════════════
   NEWSLETTER
═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .newsletter-section h2 { font-size: clamp(1.5rem, 6vw, 2rem); }
  .newsletter-form { gap: var(--s3); }
  .newsletter-input { font-size: var(--t-sm); }
}

/* ═══════════════════════════════════════════════════════════
   QUANTITY SELECTOR — larger tap target on mobile
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .qty-selector { gap: var(--s3); }
  .qty-btn {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .qty-value { font-size: var(--t-base); min-width: 28px; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════
   SPLIT LAYOUT — about, lifestyle sections
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .split-layout { grid-template-columns: 1fr; gap: var(--s8); }
  .split-layout__media { order: -1; }
}

/* ═══════════════════════════════════════════════════════════
   FEATURES GRID
═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .features-grid { grid-template-columns: 1fr; gap: var(--s5); }
  .feature-item__icon { width: 40px; height: 40px; }
}

/* ═══════════════════════════════════════════════════════════
   STARS — prevent overflow
═══════════════════════════════════════════════════════════ */
.stars { display: inline-flex; align-items: center; flex-shrink: 0; }
.stars svg { width: 13px; height: 13px; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════
   GLOBAL MOBILE UTILITIES
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Ensure nothing bleeds horizontally */
  img, video, iframe { max-width: 100%; }

  /* Tables scroll rather than break layout */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

  /* Buttons always have decent tap target */
  .btn { min-height: 44px; }

  /* Sections tighter on mobile */
  .section    { padding-block: var(--sec-sm); }
  .section--sm { padding-block: clamp(1.5rem, 5vw, 3rem); }
}

@media (max-width: 480px) {
  /* Extra breathing room at very small sizes */
  .container { padding-inline: var(--s4); }

  /* Stack any remaining 2-col grids */
  .reviews-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   TOUCH DEVICE — remove hover states that feel broken
═══════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
  .product-card:hover,
  .category-card:hover,
  .blog-card:hover,
  .btn:hover,
  .feature-item:hover {
    transform: none;
    box-shadow: none;
  }
  .btn:hover { background: initial; }
  .btn--primary:hover { background: var(--color-primary); }
  .btn--gold:hover    { background: var(--color-gold); }
  .btn--secondary:hover { background: transparent; }
  .btn--wa:hover { background: #25D366; }
}