/* ===== UNIFIED RESPONSIVE SPACING ===== */

/* ===== GLOBAL TYPOGRAPHY SCALE DOWN (ALL PAGES) ===== */
html, body { font-size: 15px !important; line-height: 1.5; }

/* Reduce common Tailwind text utilities site-wide */
.text-4xl { font-size: 1.9rem !important; line-height: 2.25rem !important; }
.text-3xl { font-size: 1.6rem !important; line-height: 2rem !important; }
.text-2xl { font-size: 1.35rem !important; line-height: 1.875rem !important; }
.text-xl  { font-size: 1.15rem !important; line-height: 1.6rem !important; }
.text-lg  { font-size: 1rem !important; line-height: 1.5rem !important; }
.text-base{ font-size: 0.95rem !important; line-height: 1.5rem !important; }
.text-sm  { font-size: 0.875rem !important; line-height: 1.35rem !important; }

/* Headings fallback (in case utilities are not used) */
h1 { font-size: 1.9rem !important; line-height: 1.2 !important; }
h2 { font-size: 1.6rem !important; line-height: 1.25 !important; }
h3 { font-size: 1.35rem !important; line-height: 1.3 !important; }
h4 { font-size: 1.15rem !important; line-height: 1.35 !important; }

/* Extra reductions for small phones */
@media (max-width: 480px) {
  html, body { font-size: 14px !important; }
  .text-4xl { font-size: 1.75rem !important; }
  .text-3xl { font-size: 1.45rem !important; }
  .text-2xl { font-size: 1.25rem !important; }
  .text-xl  { font-size: 1.075rem !important; }
  .text-lg  { font-size: 0.975rem !important; }
  .text-base{ font-size: 0.925rem !important; }
}

@media (max-width: 360px) {
  html, body { font-size: 13.5px !important; }
}

/* Footer alignment safeguard */
footer { text-align: center !important; }
footer .container > * { margin-left: auto !important; margin-right: auto !important; }
footer .flex { justify-content: center !important; }
/* Remove footer top border line and add horizontal padding */
footer .border-t { border-top: none !important; }
footer .pt-8 { padding-top: 1rem !important; }
footer .px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
@media (min-width: 640px) { footer .sm\:px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } }
@media (min-width: 768px) { footer .md\:px-8 { padding-left: 2rem !important; padding-right: 2rem !important; } }

/* ===== Category section horizontal gutters (all sizes) ===== */
.category-section .container { padding-left: 1rem !important; padding-right: 1rem !important; }
@media (min-width: 640px) { .category-section .container { padding-left: 1.25rem !important; padding-right: 1.25rem !important; } }
@media (min-width: 1024px) { .category-section .container { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } }

/* ===== Collections page horizontal gutters (all sizes) ===== */
.collections-page .container { padding-left: 1rem !important; padding-right: 1rem !important; }
@media (min-width: 640px) { .collections-page .container { padding-left: 1.25rem !important; padding-right: 1.25rem !important; } }
@media (min-width: 1024px) { .collections-page .container { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } }

/* Extra-tight spacing for very small phones in category section */
@media (max-width: 360px) {
  .category-section { padding-top: 0.4rem !important; padding-bottom: 0.4rem !important; }
  .category-section .mb-8 { margin-bottom: 0.4rem !important; }
  .category-section .grid { gap: 0.4rem !important; }
  .category-section .rounded-2xl { padding: 0.4rem !important; }
  .category-section .container { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
}

/* Mobile - Remove enforced spacing between sections */
@media (max-width: 767px) {
  /* Category section spacing tightening */
  .category-section { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
  .category-section .mb-8 { margin-bottom: 0.5rem !important; }
  .category-section h2 { font-size: 1.5rem !important; line-height: 1.3 !important; margin-bottom: 0.5rem !important; }
  .category-section p { font-size: 0.95rem !important; line-height: 1.5 !important; margin: 0 !important; }
  .category-section .grid { gap: 0.5rem !important; }
  .category-section .rounded-2xl { padding: 0.5rem !important; }
  /* Force safe gutters even if container overrides elsewhere */
  body .category-section .container,
  .category-section .container { padding-left: 1rem !important; padding-right: 1rem !important; }
  .category-section .w-24.h-24 { width: 4.5rem !important; height: 4.5rem !important; }
  /* ===== Typography scale down (Mobile) ===== */
  h1 { font-size: 1.5rem !important; line-height: 1.25 !important; }
  h2 { font-size: 1.25rem !important; line-height: 1.3 !important; }
  h3 { font-size: 1.125rem !important; line-height: 1.35 !important; }
  h4 { font-size: 1rem !important; line-height: 1.4 !important; }
  p, .text-base { font-size: 0.95rem !important; }

  /* Hero & Banner titles/subtitles */
  .hero-section .hero-title,
  .banner-section .hero-title { font-size: 1.5rem !important; }
  .hero-section .hero-subtitle,
  .banner-section .hero-subtitle { font-size: 0.95rem !important; }
  .hero-section .hero-button,
  .banner-section .hero-button { font-size: 0.9rem !important; padding: 0.5rem 0.9rem !important; }

  /* Ensure hero/banner follow global spacing only */
  .hero-section, .banner-section { margin-bottom: 0 !important; padding-bottom: 0 !important; }

  /* Section headers common containers */
  .mb-16 > h2 { font-size: 1.5rem !important; }
  .mb-16 > p { font-size: 0.95rem !important; }

  /* removed announcement bar text sizing */
  /* Unified gaps between sections within main */
  main section { padding-top: 0 !important; padding-bottom: 0 !important; }
  main section + section { margin-top: 0.75rem !important; }

  /* Remove outer page gaps */
  html, body { margin: 0 !important; padding: 0 !important; }
  main { margin: 0 !important; padding-top: 0 !important; }
  header { margin: 0 !important; }
  

  /* removed announcement bar internal padding */
  /* header .container > .grid { padding-top: 1rem !important; padding-bottom: 1rem !important; } */

  /* Restore internal padding for the new products section only */
  .new-products-section { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
  .new-products-section .container { padding-left: 1rem !important; padding-right: 1rem !important; }
  /* Add tiny top spacing for titles to avoid sticking */
  .new-products-section .flex.justify-between.items-center { margin-top: 4px !important; }
  .collections-section .flex.justify-between.items-center { margin-top: 4px !important; }

  /* Reviews section tuning on mobile */
  .reviews-section { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
  .reviews-section .reviews-header { margin-bottom: 0rem !important; }
  .reviews-section .swiper-slide { padding-top: 0rem !important; padding-bottom: 1rem !important; }
  .reviews-section .swiper-pagination { margin-top: 0.5rem !important; }

  /* Category cards normalization */
  .category-card { height: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: space-between !important; }
  .category-title { display: -webkit-box !important; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; min-height: 2.5rem; line-height: 1.25 !important; }
  .category-section .grid > a { display: block !important; }

  /* Force single line for special offers title on mobile */
  .special-offers-title { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }

  /* Align side-aligned section headers to mobile gutter (1rem) */
  .special-offers-section .container,
  .new-products-section .container { padding-left: 1rem !important; padding-right: 1rem !important; }
  .special-offers-section .container > .flex.justify-between.items-center,
  .new-products-section .container > .flex.justify-between.items-center,
  section .container > .flex.justify-between.items-center {
    padding-left: 0 !important; padding-right: 0 !important;
    margin-left: 0 !important; margin-right: 0 !important;
  }
  .special-offers-section .container > .flex.justify-between.items-center > h2,
  .special-offers-section .container > .flex.justify-between.items-center > a,
  .new-products-section .container > .flex.justify-between.items-center > h2,
  .new-products-section .container > .flex.justify-between.items-center > a,
  section .container > .flex.justify-between.items-center > h2,
  section .container > .flex.justify-between.items-center > a {
    padding-left: 0 !important; padding-right: 0 !important;
    margin-left: 0 !important; margin-right: 0 !important;
  }
}

/* Compact top bar (announcement/marquee) between 650px and 320px */
@media (max-width: 650px) {
  /* header .container > .grid { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } */
  .marquee-section { font-size: 0.85rem !important; line-height: 1.2 !important; }
  .marquee-section .swiper-slide { padding: 0 !important; }
}

/* Fine-tune size specifically between 360px and 650px */
@media (min-width: 360px) and (max-width: 650px) {
  /* header .container > .grid { padding-top: 0.4rem !important; padding-bottom: 0.4rem !important; } */
  .marquee-section { font-size: 0.8rem !important; line-height: 1.15 !important; }
  /* shrink inner text inside the top bar */
  .marquee-section *,
  .marquee-section a,
  .marquee-section span {
    font-size: 0.8rem !important;
    line-height: 1.15 !important;
  }
}

/* Extra compact on very small phones */
@media (max-width: 360px) {
  /* header .container > .grid { padding-top: 0.35rem !important; padding-bottom: 0.35rem !important; } */
  .marquee-section { font-size: 0.75rem !important; line-height: 1.15 !important; }
  .marquee-section *,
  .marquee-section a,
  .marquee-section span { font-size: 0.75rem !important; line-height: 1.15 !important; }
}

/* Tablet - Unified spacing */
@media (min-width: 768px) and (max-width: 1023px) {
  /* ===== Typography scale down (Tablet) ===== */
  h1 { font-size: 1.75rem !important; line-height: 1.25 !important; }
  h2 { font-size: 1.5rem !important; line-height: 1.3 !important; }
  h3 { font-size: 1.25rem !important; line-height: 1.35 !important; }
  p, .text-base { font-size: 1rem !important; }

  .hero-section .hero-title,
  .banner-section .hero-title { font-size: 1.75rem !important; }
  .hero-section .hero-subtitle,
  .banner-section .hero-subtitle { font-size: 1rem !important; }
  .marquee-section { font-size: 0.95rem !important; }
  main section { padding-top: 0 !important; padding-bottom: 0 !important; }
  main section + section { margin-top: 0.75rem !important; }
  .hero-section, .banner-section { padding-bottom: 0 !important; margin-bottom: 0 !important; }
  
  .container {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  /* Align side-aligned section headers to tablet gutter (1.5rem) */
  .special-offers-section .container,
  .new-products-section .container { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
  .special-offers-section .container > .flex.justify-between.items-center,
  .new-products-section .container > .flex.justify-between.items-center,
  section .container > .flex.justify-between.items-center {
    padding-left: 0 !important; padding-right: 0 !important;
    margin-left: 0 !important; margin-right: 0 !important;
  }
  .special-offers-section .container > .flex.justify-between.items-center > h2,
  .special-offers-section .container > .flex.justify-between.items-center > a,
  .new-products-section .container > .flex.justify-between.items-center > h2,
  .new-products-section .container > .flex.justify-between.items-center > a,
  section .container > .flex.justify-between.items-center > h2,
  section .container > .flex.justify-between.items-center > a {
    padding-left: 0 !important; padding-right: 0 !important;
    margin-left: 0 !important; margin-right: 0 !important;
  }
}

/* Desktop - Unified spacing */
@media (min-width: 1024px) {
  main section { padding-top: 0 !important; padding-bottom: 0 !important; }
  main section + section { margin-top: 0.75rem !important; }
  .hero-section, .banner-section { padding-bottom: 0 !important; margin-bottom: 0 !important; }

  /* Category desktop normalization */
  .category-card { height: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: space-between !important; }
  .category-title { display: -webkit-box !important; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; min-height: 2.75rem; line-height: 1.25 !important; font-size: 1.125rem; }
}

/* Ensure one-line heading for special offers across all sizes without ellipsis */
.special-offers-title { 
  white-space: nowrap !important; 
  overflow: visible !important; 
  text-overflow: clip !important; 
  /* Fluid typography: scales with viewport to keep in one line */
  font-size: clamp(1.1rem, 4.5vw, 1.875rem) !important; /* up to ~text-3xl */
  line-height: 1.2 !important;
}

@media (max-width: 359px) {
  .special-offers-title { font-size: 1rem !important; }
}

/* Extra-small devices: below 360px */
@media (max-width: 359px) {
  html, body { font-size: 14px !important; }
  h1 { font-size: 1.25rem !important; line-height: 1.2 !important; }
  h2 { font-size: 1.125rem !important; line-height: 1.25 !important; }
  h3 { font-size: 1rem !important; line-height: 1.3 !important; }
  p, .text-base { font-size: 0.9rem !important; }

  /* Hero/Banner text */
  .hero-section .hero-title, .banner-section .hero-title { font-size: 1.25rem !important; }
  .hero-section .hero-subtitle, .banner-section .hero-subtitle { font-size: 0.9rem !important; }
  .hero-section .hero-button, .banner-section .hero-button { font-size: 0.85rem !important; padding: 0.45rem 0.8rem !important; }

  /* Category section */
  .category-section h2 { font-size: 1.25rem !important; }
  .category-section p { font-size: 0.9rem !important; }
  .category-title { min-height: 2.25rem !important; }
}

/* Ultra-small devices: up to 320px - make side titles flush */
@media (max-width: 320px) {
  /* Special offers header row and container */
  .special-offers-section .container { padding-left: 1rem !important; padding-right: 1rem !important; }
  .special-offers-section .flex.justify-between.items-center { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
  .special-offers-section h2.special-offers-title { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }

  /* New products (القادمون الجدد) header row and container */
  .new-products-section .container { padding-left: 1rem !important; padding-right: 1rem !important; }
  .new-products-section .flex.justify-between.items-center { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
  .new-products-section h2 { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }

  /* Generic safeguard for sections with side titles */
  section .flex.justify-between.items-center > h2 { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
}

/* Small phones: up to 360px inclusive - force side titles flush, include link */
@media (max-width: 360px) {
  /* Special offers */
  body .special-offers-section .container { padding-left: 1rem !important; padding-right: 1rem !important; }
  body .special-offers-section .container > .flex.justify-between.items-center { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
  body .special-offers-section .container > .flex.justify-between.items-center > h2.special-offers-title { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
  body .special-offers-section .container > .flex.justify-between.items-center > a { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }

  /* New products (القادمون الجدد) */
  body .new-products-section .container { padding-left: 1rem !important; padding-right: 1rem !important; }
  body .new-products-section .container > .flex.justify-between.items-center { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
  body .new-products-section .container > .flex.justify-between.items-center > h2 { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
  body .new-products-section .container > .flex.justify-between.items-center > a { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
}