/* East Village Buyers — site-wide mobile & responsive media */

/* ── Foundation ── */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
  max-width: 100%;
}

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

main, section, article, header, footer, nav, aside, div {
  min-width: 0;
}

/* ── Default media: scale down, never overflow ── */
img, picture, video, canvas {
  max-width: 100%;
}

img, video {
  height: auto;
}

/* Logos: preserve aspect, don't crop */
.site-nav-logo img,
.cp-logo-img,
.evb-footer-logo img {
  width: auto;
  max-height: 48px;
  object-fit: contain;
}

/* Images inside media containers: cover, centered crop (no stretch) */
.bwb-media img,
.faq-card-media img,
.carousel-slide img,
.hero-card-media img,
.hero-storefront-card img,
.sidebar-post-thumb img,
.jw-card-media img,
.cp-page-hero-visual img,
.cp-band-photo img,
.cp-visual-banner img,
.cp-storefront-img,
.elec-card-img img,
.blog-featured-media img,
.blog-card-media img,
[class*="-media"] img,
[class*="card-img"] img,
[class*="card-media"] img,
[class*="thumb"] img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.blog-article-hero {
  width: 100%;
  object-fit: cover;
  object-position: center;
}

/* Embeds & tables */
iframe, embed, object {
  max-width: 100%;
}

table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Text: prevent overflow on narrow screens */
p, li, h1, h2, h3, h4, h5, h6, span, a, td, th {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

a, button, input, select, textarea, [role="button"] {
  touch-action: manipulation;
}

/* ── Full-bleed sections: prevent horizontal scroll on mobile ── */
@media (max-width: 1023px) {
  .cp-page-divider,
  .cp-metal-band,
  .cp-visit-band,
  .cp-faq-section,
  .evb-cta-band {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ── Carousels ── */
.carousel-track,
.brand-carousel-track,
.vid-carousel-track {
  min-width: 0;
}

.store-carousel,
.brand-carousel,
.vid-carousel-wrap {
  overflow: hidden;
  max-width: 100%;
}

@media (max-width: 768px) {
  .carousel-slide {
    height: min(280px, 55vw) !important;
    min-height: 200px;
  }

  .carousel-slide img {
    object-fit: cover !important;
    object-position: center !important;
  }

  .store-carousel .carousel-btn {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .vid-card {
    width: min(320px, 85vw) !important;
  }
}

/* ── Homepage: brands grid ── */
@media (max-width: 899px) {
  #what-we-buy,
  #what-we-buy .bwb-wrap,
  #bwbGrid.bwb-grid-v2 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #bwbGrid.bwb-grid-v2 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  #bwbGrid .bwb-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #bwbGrid .bwb-media {
    width: 100% !important;
    height: clamp(80px, 22vw, 130px) !important;
  }

  #bwbGrid .bwb-media img {
    object-fit: cover !important;
  }

  #bwbGrid .bwb-body {
    min-width: 0 !important;
  }

  #bwbGrid .bwb-subtitle {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
}

@media (max-width: 380px) {
  #bwbGrid.bwb-grid-v2 {
    grid-template-columns: 1fr !important;
  }
}

/* ── Homepage: hero ── */
@media (max-width: 700px) {
  .hero-storefront-card img {
    height: clamp(180px, 48vw, 260px) !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  .hero-logo-img {
    height: clamp(160px, 42vw, 220px) !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  .hero-cards {
    flex-wrap: wrap !important;
  }

  .hero-cards > * {
    flex: 1 1 calc(50% - 8px) !important;
    min-width: 0 !important;
  }
}

@media (max-width: 640px) {
  .hero-cta-pair {
    flex-direction: column;
  }

  .hero-btn-call,
  .hero-btn-text {
    width: 100%;
  }
}

/* ── Section padding ── */
@media (max-width: 540px) {
  section.px-6,
  section.lg\:px-20,
  .sec-pad {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .sh-inner {
    padding: 0 4px;
  }
}

/* ── Category pages ── */
@media (max-width: 640px) {
  .cp-page-hero-visual img,
  .cp-storefront-img {
    height: clamp(180px, 50vw, 260px) !important;
  }

  .cp-jump-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;
  }

  .cp-jump-nav::-webkit-scrollbar {
    display: none;
  }

  .cp-header-inner,
  .cp-topbar {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ── Blog ── */
@media (max-width: 640px) {
  .blog-article-hero {
    height: clamp(180px, 52vw, 260px) !important;
  }

  .blog-article-body img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
  }

  .blog-featured-media {
    height: clamp(180px, 50vw, 240px) !important;
  }

  .blog-card-media {
    height: clamp(140px, 38vw, 180px) !important;
  }

  .site-nav-inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ── Designer / watches / electronics cards ── */
@media (max-width: 768px) {
  .elec-card-img {
    height: clamp(90px, 26vw, 120px) !important;
  }

  .elec-card-img img {
    object-fit: cover !important;
  }
}

/* ── Sell hub (index) ── */
@media (max-width: 768px) {
  .sh-actions {
    grid-template-columns: 1fr !important;
  }

  .sh-info-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── FAQ (index) ── */
@media (max-width: 860px) {
  .faq-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px;
  }

  .faq-card-media {
    height: clamp(140px, 28vw, 180px) !important;
  }

  .faq-card-media img {
    object-fit: cover !important;
  }
}

@media (max-width: 540px) {
  .faq-card-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  .faq-card-button {
    min-height: unset !important;
  }

  .premium-faq-inner {
    padding: 48px 0 !important;
  }

  .premium-faq-footer,
  .premium-faq-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .premium-faq-actions a {
    text-align: center !important;
    justify-content: center !important;
  }
}

/* ── Footer ── */
@media (max-width: 600px) {
  .evb-footer-main {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .evb-footer-bottom {
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center !important;
  }
}

/* ── Fixed widgets: notched phones ── */
@supports (padding: max(0px)) {
  .evb-assistant-fab {
    right: max(16px, env(safe-area-inset-right)) !important;
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}