/**
 * MEHARWAAN WEARS — global responsive system
 * Mobile-first; safe areas; no viewport overflow
 */

/* ---- Lock viewport (all devices) ---- */
html {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

body.mw-cart-drawer-open,
body.admin-nav-open {
  overflow: hidden;
  touch-action: none;
}

/* ---- Layout shell ---- */
.mw-site-root,
#mwCartDrawer,
header,
main,
footer,
section,
article {
  max-width: 100%;
}

.mx-auto.max-w-7xl,
.max-w-7xl {
  width: 100%;
  max-width: min(80rem, 100%);
  margin-left: auto;
  margin-right: auto;
}

/* Media never wider than parent */
img,
video,
iframe,
embed,
object,
svg,
canvas {
  max-width: 100%;
  height: auto;
}

picture,
figure {
  max-width: 100%;
}

/* Long words / URLs */
p,
h1,
h2,
h3,
h4,
h5,
h6,
li,
td,
th,
label,
span,
a {
  overflow-wrap: anywhere;
  word-wrap: break-word;
}

/* Grids shrink; icons/buttons can stay fixed */
.grid > *,
[class*="grid-cols"] > *,
.flex-1,
.min-w-0 {
  min-width: 0;
}

/* ---- Touch targets ---- */
button,
a.btn,
[role="button"],
input[type="submit"],
input[type="button"],
.tiny-btn,
.nav-link {
  touch-action: manipulation;
}

/* ---- Safe area (notched phones: iPhone, Pixel, etc.) ---- */
@supports (padding: max(0px, env(safe-area-inset-left))) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  header .mx-auto.max-w-7xl {
    padding-left: max(1rem, env(safe-area-inset-left)) !important;
    padding-right: max(1rem, env(safe-area-inset-right)) !important;
  }

  main.mx-auto.max-w-7xl {
    padding-left: max(0.75rem, env(safe-area-inset-left)) !important;
    padding-right: max(0.75rem, env(safe-area-inset-right)) !important;
  }

  #cookieBanner {
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* ---- Fixed UI: WhatsApp, back-to-top, cookie ---- */
a[aria-label="Chat on WhatsApp"] {
  bottom: max(5.5rem, calc(env(safe-area-inset-bottom, 0px) + 4.5rem)) !important;
  right: max(0.75rem, env(safe-area-inset-right, 0px)) !important;
}

#backToTop {
  bottom: max(1rem, env(safe-area-inset-bottom, 0px)) !important;
  left: max(0.75rem, env(safe-area-inset-left, 0px)) !important;
}

@media (min-width: 640px) {
  a[aria-label="Chat on WhatsApp"] {
    bottom: max(1.25rem, env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ---- Cart drawer ---- */
#mwCartDrawerPanel {
  width: 100%;
  max-width: min(28rem, 100vw);
}

/* ---- Marquees / sliders: clip only inside component ---- */
.partners-marquee,
.reviews-marquee,
.category-viewport,
.mw-product-carousel .mw-carousel-viewport,
[data-media-carousel] {
  max-width: 100%;
  overflow: hidden;
}

.partners-marquee-track,
.reviews-marquee-track,
.category-track {
  max-width: none;
}

/* ---- Checkout ---- */
.mw-checkout-form {
  width: 100%;
  max-width: min(72rem, 100%);
  min-width: 0;
}

.mw-checkout-form > * {
  min-width: 0;
}

@media (max-width: 1023px) {
  .mw-checkout-form.lg\:grid-cols-2 {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ---- Pemaish / size forms ---- */
.pemaish-doc,
.pemaish-wrap,
#mwSizeModal .pemaish-doc {
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

/* ---- Tables: scroll inside box only ---- */
.overflow-x-auto,
.mw-cart-table-wrap,
.mw-track-table-wrap,
.mw-table-scroll {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.mw-cart-table-wrap table,
.mw-track-table-wrap table,
.mw-table-scroll table {
  width: 100%;
}

/* ---- Modals (public) ---- */
#searchModal,
#quickViewModal,
#newsletterModal,
#mwSizeModal,
.fixed.inset-0.z-50:not(.hidden) {
  padding: max(0.5rem, env(safe-area-inset-top)) max(0.5rem, env(safe-area-inset-right)) max(0.5rem, env(safe-area-inset-bottom)) max(0.5rem, env(safe-area-inset-left));
}

#searchModal > div,
#quickViewModal > div,
#newsletterModal > div {
  max-height: min(92vh, 100dvh);
  overflow-y: auto;
}

/* ========== Tablet (≤1024px) ========== */
@media (max-width: 1024px) {
  .lg\:grid-cols-3,
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .lg\:col-span-2 {
    grid-column: span 1 / span 1 !important;
  }

  .category-slide {
    flex: 0 0 calc((100% - 1rem) / 2) !important;
  }

  .category-arrow.prev {
    left: 0.25rem !important;
  }

  .category-arrow.next {
    right: 0.25rem !important;
  }
}

/* ========== Mobile (≤768px) ========== */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea {
    font-size: max(16px, 1rem) !important;
  }

  main {
    padding-top: 1.5rem !important;
    padding-bottom: 2rem !important;
  }

  main h1,
  .text-4xl.font-bold,
  h1.text-4xl {
    font-size: clamp(1.35rem, 5vw, 1.75rem) !important;
    line-height: 1.2 !important;
  }

  main h2,
  .text-3xl.font-bold,
  h2.text-3xl {
    font-size: clamp(1.15rem, 4.5vw, 1.4rem) !important;
  }

  main h3 {
    font-size: clamp(1rem, 4vw, 1.2rem) !important;
  }

  /* Single column layouts */
  .grid,
  [class*="grid-cols-2"],
  [class*="grid-cols-3"],
  [class*="grid-cols-4"],
  .md\:grid-cols-2,
  .md\:grid-cols-3,
  .md\:grid-cols-4,
  .lg\:grid-cols-2,
  .lg\:grid-cols-3,
  .lg\:grid-cols-4,
  .sm\:grid-cols-2:not(.mw-mobile-product-grid):not(.mw-tailoring-steps-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Keep 2-col product grids */
  .mw-mobile-product-grid:not(.mw-carousel-track),
  .mw-tailoring-steps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Product detail stack */
  .mw-product-detail > .grid,
  .mw-product-detail .lg\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }

  .mw-product-detail .sticky {
    position: static !important;
    top: auto !important;
  }

  /* Header */
  header.sticky .h-16,
  header .h-16 {
    height: auto !important;
    min-height: 3.25rem;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
  }

  header .grid-cols-2 {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center;
  }

  header a.truncate {
    font-size: clamp(0.65rem, 2.8vw, 0.875rem) !important;
    letter-spacing: 0.08em !important;
  }

  header .flex.items-center.justify-end {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.35rem !important;
    max-width: 100%;
    min-width: 0;
  }

  header .flex.items-center.justify-end > a:not(#navCartBtn) {
    font-size: 0.7rem;
    white-space: nowrap;
  }

  /* Footer */
  footer .grid.md\:grid-cols-4,
  footer .grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  footer .grid > div:first-child {
    grid-column: auto;
  }

  /* Forms full width */
  form .grid,
  form .flex:not(.items-center):not(.inline-flex) {
    flex-direction: column;
    align-items: stretch;
  }

  form button,
  form .rounded-lg.bg-slate-900,
  form [type="submit"] {
    width: 100%;
    min-height: 44px;
  }

  /* Flex rows wrap */
  .flex.flex-wrap,
  .flex.items-center.gap-3,
  .flex.items-center.gap-4,
  .toolbar,
  .toolbar-actions {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  /* Max width utilities */
  .max-w-xl,
  .max-w-2xl,
  .max-w-3xl,
  .max-w-4xl,
  .max-w-5xl,
  .max-w-6xl,
  .w-full.max-w-xl {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Announcement / hero banners */
  section .flex.flex-col,
  section .flex.flex-col-reverse,
  section .flex.flex-wrap {
    align-items: stretch !important;
  }

  section .rounded-3xl .flex,
  .rounded-3xl.px-6 .flex {
    flex-direction: column !important;
    text-align: center;
  }

  [data-media-carousel="story"] {
    height: min(56vw, 300px) !important;
  }

  [data-media-carousel="story"] img,
  [data-media-carousel="story"] video {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover;
  }

  .reviews-marquee {
    min-height: 0 !important;
    max-height: 420px;
  }

  .review-card {
    flex: 0 0 min(88vw, 300px) !important;
  }

  /* Modals bottom sheet */
  #searchModal,
  #quickViewModal,
  #newsletterModal {
    align-items: flex-end !important;
  }

  #searchModal > div,
  #quickViewModal > div,
  #newsletterModal > div {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 1rem 1rem 0 0 !important;
  }

  #mwSizeModal .absolute.inset-0 {
    padding: 0.5rem !important;
  }

  #mwSizeModal .max-w-6xl {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* Product CTAs */
  .mw-product-detail .flex.flex-wrap.items-center.gap-3 > *,
  .mw-product-detail form.mt-6 button,
  .mw-product-detail form.mt-6 .flex > * {
    flex: 1 1 100%;
    width: 100% !important;
    min-height: 44px;
  }

  /* Breadcrumb scroll contained */
  main nav.text-sm {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    max-width: 100%;
    padding-bottom: 0.2rem;
  }

  /* Zoom disabled on touch */
  .zoom-container:hover .zoom-image {
    transform: none !important;
  }

  .mw-product-detail .zoom-image {
    max-height: min(70vw, 400px) !important;
    min-height: 200px;
    width: 100% !important;
    object-fit: contain;
  }
}

/* ========== Small phones (≤480px) ========== */
@media (max-width: 480px) {
  .mw-mobile-product-grid:not(.mw-carousel-track) {
    gap: 0.4rem !important;
  }

  .mw-tailoring-steps-grid {
    gap: 0.5rem !important;
  }

  .category-slide {
    flex: 0 0 calc((100% - 0.5rem) / 2) !important;
  }

  #cookieBanner .mx-auto {
    flex-direction: column;
    align-items: stretch !important;
    text-align: center;
  }

  #cookieBanner button {
    width: 100%;
    min-height: 44px;
  }

  /* Stack cart table on very small screens (no horizontal page scroll) */
  .mw-cart-table-wrap--stack {
    overflow-x: visible !important;
  }

  .mw-cart-table-wrap--stack table {
    min-width: 0 !important;
    font-size: 0.8125rem;
  }

  .mw-cart-table-wrap--stack table,
  .mw-cart-table-wrap--stack thead,
  .mw-cart-table-wrap--stack tbody,
  .mw-cart-table-wrap--stack tr,
  .mw-cart-table-wrap--stack th,
  .mw-cart-table-wrap--stack td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .mw-cart-table-wrap--stack thead {
    display: none;
  }

  .mw-cart-table-wrap--stack tr {
    margin-bottom: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 0.5rem;
  }

  .mw-cart-table-wrap--stack td {
    border: none;
    padding: 0.35rem 0.5rem;
  }

  .mw-cart-table-wrap--stack td::before {
    content: attr(data-label);
    font-weight: 600;
    display: block;
    font-size: 0.65rem;
    color: #64748b;
    margin-bottom: 0.15rem;
  }

  /* Account order rows */
  main .rounded-xl .flex.flex-col.sm\:flex-row {
    gap: 0.5rem;
  }

  main .rounded-xl .flex.flex-col.sm\:flex-row .flex.flex-wrap {
    width: 100%;
  }
}

/* ========== Extra narrow (≤360px) ========== */
@media (max-width: 360px) {
  .mw-mobile-product-grid:not(.mw-carousel-track) {
    grid-template-columns: 1fr !important;
  }

  .mw-product-carousel .mw-mobile-product-grid > article {
    flex: 0 0 100% !important;
  }

  header a.truncate {
    font-size: 0.6rem !important;
  }
}

/* ========== Admin panel (public CSS also loads on admin if linked) ========== */
@media (max-width: 768px) {
  .admin-layout .main {
    padding: 0.75rem;
  }

  .topbar {
    padding: 0.75rem !important;
  }

  .topbar-titles h2 {
    font-size: 1rem !important;
  }

  .pill {
    font-size: 0.65rem;
    padding: 6px 8px;
  }
}