/* Mayur — full responsive pass
   Breakpoints: 1100 (tablet), 900 (nav), 640 (phone), 400 (small phone)
*/

/* Base safety */
.mayur-page,
.mayur-page img,
.mayur-page video,
.mayur-page iframe {
  max-width: 100%;
}
.mayur-page {
  overflow-x: hidden;
}
.mayur-page .my-wrap {
  width: 100%;
  box-sizing: border-box;
}

/* ── Tablet / small laptop ───────────────────────────────────────── */
@media (max-width: 1100px) {
  .my-wrap { padding-left: 16px; padding-right: 16px; }

  .my-promise-inner,
  .my-showroom-inner,
  .my-diamond-inner { grid-template-columns: 1fr; gap: 28px; }
  .my-promise-left { text-align: center; }
  .my-promise-logo { margin-left: auto; margin-right: auto; }
  .my-diamond-copy { text-align: center; }
  .my-diamond-media img { max-height: 360px; }

  .my-foot-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .my-prod-grid:not(.my-list-grid) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .my-masonry { grid-template-columns: repeat(3, 1fr); }
  .my-trust-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .my-t-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .my-pdp-grid { grid-template-columns: 1fr; gap: 28px; }
  .my-pdp-gallery { position: static; }
  .my-pdp-promise-grid { grid-template-columns: repeat(2, 1fr); }
  .my-pdp-trust { grid-template-columns: repeat(2, 1fr); }

  /* Listing */
  .my-list-body { display: block; padding: 16px 16px 40px; }
  .my-list-cats-bar { padding: 16px 16px 4px; }
  .my-list-sidebar {
    position: fixed;
    top: 0;
    left: -340px;
    width: min(320px, 90vw);
    height: 100%;
    max-height: none;
    z-index: 1200;
    border-radius: 0;
    transition: left .28s ease;
    flex: none;
    box-shadow: 8px 0 28px rgba(0,0,0,.12);
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }
  .my-list-sidebar.is-open { left: 0; }
  .my-list-side-close { display: block; }
  .my-list-filter-btn { display: inline-flex; }
  .my-list-toolbar { top: 0; }
  .my-list-toolbar-inner { gap: 10px; }
  .my-list-toolbar-actions { flex: 1 1 100%; }
  .my-list-count { order: 3; flex: 1 1 100%; text-align: left; }
  .my-list-crumb { flex: 1 1 auto; font-size: 11px; }
  .my-list-trust { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .my-list-grid.my-prod-grid,
  .my-prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .my-list-promo { min-height: 160px; }
  .my-list-about { padding: 24px 8px; }
  .my-list-about h2 { font-size: 26px; }

  /* Cart / checkout theme pages */
  .checkout-content,
  .cart-layout { grid-template-columns: 1fr !important; }
}

/* ── Nav collapses ───────────────────────────────────────────────── */
@media (max-width: 900px) {
  .my-topphone { display: none; }
  .my-ham { display: flex; }
  .my-nav { display: none; }
  .my-search-tools { display: none; }
  .my-bar { padding: 10px 12px; gap: 8px; }
  .my-logo img { height: 42px; }
  .my-logo-name { font-size: 14px; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .my-logo-tag { display: none; }
  .my-search {
    flex: 1 1 auto;
    max-width: none;
    margin-left: 0;
    padding: 10px 12px;
    order: 0;
  }
  .my-search input { font-size: 13px; }
  .my-actions { gap: 12px; }
  .my-act { font-size: 18px; }

  .my-hero { padding: 0 8px; margin-top: 8px; }
  .my-hero-slide { min-height: 0; border-radius: 14px; }
  .my-hero-bg { height: min(36vh, 300px); min-height: 160px; max-height: 320px; }
  .my-hero-slide.is-baked .my-hero-bg {
    height: clamp(200px, 42vw, 320px);
    min-height: 200px;
    max-height: 320px;
    object-position: center 20%;
  }
  .my-hero-copy {
    left: 5%;
    right: 5%;
    bottom: 12%;
    max-width: none;
    text-align: left;
  }
  .my-hero-copy h1 { font-size: clamp(28px, 8vw, 40px); margin-bottom: 12px; }
  .my-hero-title-img { width: min(280px, 72vw); margin-bottom: 12px; }
  .my-hero-dots { padding: 10px 0 4px; }

  .my-t-grid { grid-template-columns: 1fr; }
  .my-prod-grid:not(.my-list-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .my-masonry { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; }
  .my-arrow { width: 40px; height: 40px; font-size: 13px; }
  .my-cat { flex-basis: 140px; }
  .my-cat span { font-size: 12px; }
  .my-cats-wrap { gap: 8px; }
  .my-reel { flex-basis: 160px; height: 280px; }
  .my-reel.is-center { flex-basis: 180px; height: 320px; }

  .my-pdp { padding: 8px 14px 36px; }
  .my-pdp-trust { grid-template-columns: repeat(2, 1fr); }
  .my-pdp-specs dl { grid-template-columns: 1fr; }
  .my-pdp-actions { flex-direction: column; }
  .my-pdp-cart,
  .my-pdp-wish { flex: 1 1 auto; width: 100%; }
  .my-pdp-wa { width: 100%; height: 48px; border-radius: 10px; }

  .my-drop-mega { display: none !important; }
  .my-mega-grid { grid-template-columns: 1fr; }
  .my-sec-h { flex-wrap: wrap; gap: 10px; }

  .my-list-hero { min-height: 200px; }
  .my-list-hero-inner { padding: 36px 16px; }
  .my-list-cat { flex: 0 0 80px; }
  .my-list-cat img { width: 64px; height: 64px; }

  /* Cart table → stacked cards */
  .cart-item,
  .cart-header {
    grid-template-columns: 80px 1fr !important;
  }
  .cart-header { display: none !important; }
}

/* ── Phone ───────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .my-wrap { padding-left: 12px; padding-right: 12px; }

  .my-bar { padding: 8px 10px; gap: 8px; }
  .my-logo-wrap { flex-shrink: 0; }
  .my-logo img { height: 38px; }
  .my-logo-name { max-width: 88px; font-size: 13px; }
  .my-search { padding: 8px 10px; gap: 8px; }
  .my-search i { font-size: 14px; }
  .my-search input { font-size: 12px; }
  .my-search input::placeholder { letter-spacing: 0; }
  .my-actions { gap: 10px; }
  .my-actions .my-act { font-size: 17px; }
  .my-badge { min-width: 16px; height: 16px; font-size: 10px; top: -6px; right: -8px; }

  .my-hero { padding: 0 6px; margin-top: 6px; }
  .my-hero-bg { height: min(32vh, 240px); min-height: 140px; }
  .my-hero-slide.is-baked .my-hero-bg {
    height: clamp(170px, 48vw, 260px);
    min-height: 170px;
    max-height: 260px;
    object-position: center 18%;
  }
  .my-hero-copy { bottom: 10%; }
  .my-btn { padding: 12px 18px; font-size: 11px; }

  .my-sec { padding: 32px 0; }
  .my-sec-title { margin-bottom: 18px; font-size: clamp(24px, 7vw, 34px); }
  .my-script { font-size: 26px; }

  .my-promise-grid { grid-template-columns: repeat(2, 1fr); gap: 16px 10px; padding: 18px 12px; }
  .my-promise-icon { width: 64px; height: 64px; font-size: 20px; }
  .my-promise-left h2 { font-size: clamp(56px, 18vw, 72px); }
  .my-collection-bar { left: 10px; right: 10px; bottom: 10px; padding: 10px 12px; }
  .my-collection img { max-height: 420px; }
  .my-showroom-media img { min-height: 220px; }
  .my-showroom-copy h2 { font-size: 26px; }
  .my-diamond-copy h2 { font-size: 26px; }
  .my-news-inner { flex-direction: column; align-items: stretch; gap: 12px; }
  .my-news-form { min-width: 0; width: 100%; }
  .my-foot-grid { grid-template-columns: 1fr; gap: 22px; }
  .my-foot-bottom-inner { flex-direction: column; text-align: center; }
  .my-trust-grid { grid-template-columns: 1fr 1fr; font-size: 11px; gap: 14px; }
  .my-masonry-item { font-size: 20px; }

  .my-card-body { padding: 10px 10px 12px; }
  .my-card-body .my-brand { font-size: 10px; }
  .my-card-body .my-name { font-size: 12px; min-height: 2.5em; }
  .my-price b { font-size: 13px; }
  .my-price s,
  .my-price em { font-size: 10px; }
  .my-wish { width: 30px; height: 30px; top: 8px; right: 8px; font-size: 13px; }
  .my-off { font-size: 10px; padding: 3px 6px; }

  .my-list-grid.my-prod-grid,
  .my-prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .my-list-grid .my-card-body .my-name { font-size: 12px; min-height: 2.4em; }
  .my-list-grid .my-price b { font-size: 13px; }
  .mayur-page .my-list-grid .global-card-share-btn {
    width: 28px !important;
    height: 28px !important;
    right: 42px !important;
    font-size: 12px !important;
  }

  .my-list-hero { min-height: 180px; }
  .my-list-hero-inner { padding: 28px 14px; }
  .my-list-hero h1 { font-size: clamp(28px, 9vw, 36px); }
  .my-list-hero-sub { font-size: 13px; margin-bottom: 14px; }
  .my-list-hero-badges { gap: 8px 12px; font-size: 9px; }
  .my-list-cats-bar { padding: 12px 12px 0; }
  .my-list-cat { flex: 0 0 72px; }
  .my-list-cat img { width: 56px; height: 56px; margin-bottom: 6px; }
  .my-list-cat span { font-size: 9px; letter-spacing: .08em; }
  .my-list-toolbar { padding: 10px 0; }
  .my-list-toolbar-inner { padding-left: 12px; padding-right: 12px; }
  .my-list-sort { width: 100%; }
  .my-list-sort span { display: none; }
  .my-list-sort select { width: 100%; font-size: 11px; padding: 10px 12px; }
  .my-list-filter-btn { padding: 10px 12px; }
  .my-list-promo-copy { padding: 18px 14px; max-width: none; }
  .my-list-promo-copy h3 { font-size: 20px; }
  .my-list-promo-copy .my-script { font-size: 26px; }
  .my-list-trust { grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; }
  .my-list-trust div { font-size: 11px; }
  .my-list-empty { padding: 48px 16px; }
  .mayur-page .active-filter-tags-bar {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 10px 12px !important;
    font-size: 12px !important;
  }

  .my-pdp-title { font-size: 26px; }
  .my-pdp-price strong { font-size: 24px; }
  .my-pdp-promise-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .my-pdp-main { border-radius: 14px; }
  .my-pdp-thumb { flex: 0 0 60px; width: 60px; height: 60px; }
  .my-crumb { padding: 12px 14px 4px; font-size: 12px; }
  .my-crumb em { max-width: 60%; }

  .my-mobile-panel {
    width: min(300px, 88vw);
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  }

  .my-mega-shell { padding: 0 16px; }
  .my-mega-inner { grid-template-columns: 1fr; gap: 16px; }
  .my-mega-grid { grid-template-columns: 1fr; }
  .my-mega-extra { grid-template-columns: 1fr; }
  .my-mega-visual { max-width: 100%; height: 180px; margin: 0 auto; }
  .my-mega-visual-label { font-size: 15px; }

  /* Wishlist / forms */
  .wishlist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  .contact-grid { grid-template-columns: 1fr !important; }
  .form-row { grid-template-columns: 1fr !important; }
}

/* ── Small phone ─────────────────────────────────────────────────── */
@media (max-width: 400px) {
  .my-bar {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .my-logo-wrap { order: 1; }
  .my-actions { order: 2; margin-left: auto; }
  .my-search {
    order: 3;
    flex: 1 1 100%;
    max-width: none;
  }
  .my-logo-name { display: none; }
  .my-list-hero-badges span { flex: 1 1 40%; }
  .my-promise-grid { gap: 12px 8px; }
  .my-promise-icon { width: 56px; height: 56px; font-size: 18px; }
  .my-list-trust { grid-template-columns: 1fr; }
  .my-pdp-promise-grid { grid-template-columns: 1fr; }
}

/* Landscape phones */
@media (max-height: 480px) and (orientation: landscape) {
  .my-hero-bg { height: min(55vh, 220px); min-height: 140px; max-height: none; }
  .my-hero-slide.is-baked .my-hero-bg { height: clamp(150px, 48vh, 240px); max-height: 240px; object-position: center 20%; }
  .my-hero-copy { bottom: 8%; }
  .my-list-sidebar { width: min(280px, 70vw); }
}

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .my-list-sidebar,
  .my-list-overlay,
  .my-hero-slide,
  .my-card,
  .my-btn { transition: none !important; }
}