/* Mobile identity layout; desktop keeps the storefront's original styling. */
@media (max-width: 639px) {
  body > section { width: 100%; min-width: 0; }
  body > section > div,
  body > section > div > div,
  body > section > div > div > div { min-width: 0; }
  .seller-profile-details { flex-wrap: wrap; }
  body > section .min-w-\[85px\] {
    min-width: 0;
    flex: 1 1 0;
    padding-left: 6px;
    padding-right: 6px;
  }
  #seller-store-header > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    padding: 12px;
    align-items: center;
  }
  #seller-store-header > div > div:first-child {
    min-width: 0;
    gap: 10px;
  }
  #seller-store-header > div > div:first-child > div:first-child {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
  }
  #seller-store-header > div > div:first-child > div:last-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  #seller-store-header > div > div:first-child > div:last-child > div:first-child {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  #seller-store-header h1 {
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0;
    overflow-wrap: anywhere;
  }
  #seller-store-header h1 + span {
    flex: none;
    white-space: nowrap;
    font-size: 9px;
    line-height: 14px;
  }
  #seller-store-header h1 + span svg { flex-shrink: 0; }
  #seller-store-header .cursive-signature {
    line-height: 19px;
    overflow-wrap: anywhere;
  }
  #seller-store-header > div > div:last-child {
    flex: none;
    gap: 6px;
  }
  #seller-store-header #shareBtn,
  #seller-store-header #themeToggle {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Hero: height follows the screen width (about 16:9 on phones), images always cover without distortion. */
.rma-hero-box { height: clamp(200px, 56vw, 480px) !important; }
.rma-hero-box img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* Product photos on beauty / grooming cards: fixed 4:3 frame, any photo shape fits. */
.rma-card-media { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #111827; }
.rma-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; }
.rma-card-media img.is-active { opacity: 1; }
.slot-card p { overflow-wrap: anywhere; }
@media (max-width: 639px) {
  .rma-card-media { aspect-ratio: 16 / 10; }
  #slotsGrid { gap: 16px; }
}

/* Phones: compact list view - photo on the left, details on the right, short description. */
@media (max-width: 639px) {
  #slotsGrid { gap: 12px; }
  .slot-card > .h-2 { height: 4px; grid-column: 1 / -1; }
  .slot-card:has(.rma-card-media) { display: grid; grid-template-columns: 116px minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .slot-card:has(.rma-card-media) > .rma-card-media { grid-column: 1; grid-row: 2; aspect-ratio: auto; height: 100%; min-height: 128px; }
  .slot-card:has(.rma-card-media) > .p-6 { grid-column: 2; grid-row: 2; }
  .slot-card > .p-6 { padding: 12px; }
  .slot-card h3 { font-size: 16px; line-height: 20px; }
  .slot-card .mb-3 { margin-bottom: 6px; }
  .slot-card .mt-6 { margin-top: 8px; }
  .slot-card .pt-4 { padding-top: 8px; }
  .slot-card p.text-xs {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
    overflow: hidden; margin-top: 6px;
  }
  .slot-card .text-xl.font-black { font-size: 16px; }
  .slot-card button { padding: 8px 12px; }
}

@media (max-width: 639px) {
  .slot-card .mb-3.flex { flex-wrap: wrap; gap: 4px; justify-content: flex-start; }
  .slot-card .mb-3.flex > span { white-space: nowrap; font-size: 10px; padding: 3px 8px; }
  .slot-card .mt-6 .text-\[10px\] { display: none; }
  .slot-card .text-xl.font-black span { display: block; }
  .slot-card .mt-6 button { white-space: nowrap; }
}

/* Photo cards: no payment/availability tag row. */
.slot-card:has(.rma-card-media) .mb-3.flex { display: none; }
.rma-hero-box { height: clamp(220px, 56vw, 560px) !important; border-radius: 0; }

/* Arrows and dots are hidden by the script when there is only one hero image. */
#prevSlideBtn[hidden], #nextSlideBtn[hidden], .slide-indicator[hidden] { display: none !important; }

/* Phones: products are full-width rows (like the seller band), not floating cards. */
@media (max-width: 639px) {
  #slotsGrid { gap: 0; margin-left: -16px; margin-right: -16px; }
  #slotsGrid > .slot-card {
    border-radius: 0; border-width: 0 0 1px 0; border-color: rgba(156, 163, 175, .3);
    box-shadow: none;
  }
  #slotsGrid > .slot-card > .h-2 { display: none; }
  #slotsGrid > .slot-card:has(.rma-card-media) > .rma-card-media { grid-row: 1 / -1; }
  #slotsGrid > .slot-card:has(.rma-card-media) > .p-6 { grid-row: 1 / -1; }
}

/* Phones: leave a 2px gap on each side of the product rows. */
@media (max-width: 639px) { #slotsGrid { margin-left: -14px; margin-right: -14px; } }

/* Product video on a storefront card fills the same frame as the photo would. */
.rma-card-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Video sits over the photos and fades in only while it is playing; otherwise the photos show. */
.rma-card-media--video video { z-index: 1; opacity: 0; transition: opacity .3s ease; }
.rma-card-media--video.is-playing video,
.rma-card-media--video-only video { opacity: 1; }

/* Hero slider: no arrows, and each slide glides in over 0.5 seconds. */
#prevSlideBtn, #nextSlideBtn { display: none !important; }
#sliderTrack { transition-duration: .5s !important; }

/* No text selection or copying (search box still works). */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; }