/*
  Mobile portrait layout for Soul Casket Records.
  Desktop (min-width: 761px) is untouched — all rules here are scoped to max-width.
  Visual identity preserved: #310606 panels, #8a000c rules, IM Fell / Times,
  uppercase tracking, black catalog cards, hairline dividers.
*/

/* ── Structural mobile shell (tablets / large phones) ── */
@media (max-width: 760px) {
  html {
    overflow-x: hidden;
  }

  body {
    background-attachment: scroll;
    overflow-x: hidden;
  }

  #wrapper,
  #container,
  #content,
  .row,
  #main {
    max-width: 100%;
    min-height: 0;
  }

  #container {
    padding: 0 0 max(24px, env(safe-area-inset-bottom));
  }

  #header {
    padding: 0;
  }

  .site-banner {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-bottom: 2px solid #8a000c;
  }

  #content {
    padding: 14px 12px 22px;
  }

  .row {
    overflow: visible;
  }

  /* Same sidebar content, stacked above main */
  #sidebar {
    float: none;
    width: 100%;
    padding: 0 0 12px;
    margin: 0 0 14px;
    border-bottom: 1px solid #fff;
  }

  #main {
    margin-left: 0;
    width: 100%;
    padding-bottom: 28px;
  }

  #footer_info li {
    float: none;
    width: 100%;
    padding-right: 0;
    margin-bottom: 14px;
  }

  .product-detail-image {
    float: none;
    width: 100%;
    max-width: 280px;
    margin: 0 0 16px;
  }

  .product-detail-info {
    clear: both;
    overflow: visible;
  }

  .bandimg {
    float: none;
    display: block;
    width: 140px;
    margin: 0 0 12px;
  }

  #mobile-nav-bar,
  #mobile-menu-backdrop,
  #mobile-menu-btn {
    display: none !important;
  }
}

/*
  iPhone portrait — intentional craft for 375–430px.
  Tuned at 390px (iPhone 14 / 15).
*/
@media (max-width: 430px) {
  body {
    font-size: 12px;
    line-height: 1.45;
    letter-spacing: 0.07em;
  }

  #container {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }

  /* Banner: full bleed, restrained height — still the brand mark */
  .site-banner {
    max-height: 88px;
    object-fit: cover;
    object-position: center top;
  }

  #content {
    padding: 12px 10px 20px;
  }

  /* ── Sidebar as compact catalog index (desktop voice, portrait scale) ── */
  #sidebar {
    padding-bottom: 10px;
    margin-bottom: 12px;
  }

  #sidebar_store_name {
    font-size: 13px;
    letter-spacing: 0.18em;
    margin: 0 0 2px;
  }

  .sidebar-wrapper hr {
    margin: 8px 0;
  }

  #sidebar ul li {
    margin: 0;
    line-height: 1.3;
  }

  #sidebar #nav a,
  #sidebar #site-nav a,
  #sidebar #buttons a,
  #sidebar #places a {
    display: block;
    font-size: 11px;
    letter-spacing: 0.09em;
    padding: 5px 0;
    line-height: 1.35;
    /* usable without app-button bulk */
    min-height: 0;
  }

  paypal-cart-button {
    max-width: 140px;
    margin: 2px 0 0;
  }

  .lang-switcher {
    margin: 6px 0 2px;
    font-size: 10px;
  }

  .lang-switcher label {
    margin-bottom: 3px;
  }

  .lang-switcher select {
    max-width: 100%;
    width: 100%;
    padding: 5px 6px;
    font-size: 11px;
    border-color: #8b0000;
    background: #000;
  }

  .lang-detect-hint {
    font-size: 8px;
    margin-top: 4px;
  }

  .lang-intl-warning {
    margin-top: 6px;
    padding: 7px 8px;
    font-size: 8px;
    line-height: 1.45;
  }

  /* ── Main column ── */
  #main {
    padding-bottom: 24px;
  }

  .page-title,
  #main h2.collection-title,
  .section-label {
    font-size: 15px;
    letter-spacing: 0.16em;
    margin: 0 0 12px;
    line-height: 1.3;
  }

  .page-intro,
  .store-note {
    font-size: 10px;
    letter-spacing: 0.08em;
    line-height: 1.55;
    margin: 0 0 14px;
  }

  /* ── Store: 2-up catalog (desktop is 3-up) ── */
  ul.products {
    margin: 0 -4px;
  }

  .product {
    width: 50%;
    padding: 0 4px 14px;
  }

  .product-card {
    padding: 6px;
  }

  .product-photo-wrap {
    margin-bottom: 5px;
    border-color: #310606;
  }

  .product_name {
    font-size: 10px;
    letter-spacing: 0.05em;
    line-height: 1.3;
    margin: 0 0 2px;
  }

  .product_price {
    font-size: 10px;
    letter-spacing: 0.07em;
  }

  .sale-tag {
    font-size: 8px;
    padding: 3px 5px;
    top: 4px;
    left: 4px;
  }

  .store-disclaimer,
  .store-promo,
  .order-intl-warning {
    padding: 10px 10px;
    margin: 0 0 12px;
  }

  .store-disclaimer-title,
  .order-intl-warning-title {
    font-size: 11px;
    letter-spacing: 0.16em;
    margin: 0 0 6px;
  }

  .store-disclaimer-text,
  .order-intl-warning-text {
    font-size: 9px;
    line-height: 1.55;
    letter-spacing: 0.05em;
  }

  /* ── Product detail ── */
  .product-detail {
    padding: 12px;
  }

  .product-detail-image {
    max-width: 100%;
    margin: 0 0 14px;
  }

  .product-detail-image img {
    width: 100%;
    height: auto;
    border: 1px solid #8a000c;
  }

  #product_title {
    font-size: 15px;
    letter-spacing: 0.14em;
    line-height: 1.3;
    margin: 0 0 8px;
  }

  .product-detail-cat,
  .product-detail-meta,
  .product-detail-stock {
    font-size: 10px;
    letter-spacing: 0.08em;
  }

  .product-detail-desc {
    font-size: 11px;
    line-height: 1.55;
    letter-spacing: 0.05em;
    margin: 0 0 10px;
  }

  .product-detail-price {
    font-size: 12px;
    letter-spacing: 0.08em;
  }

  .product-detail-buy {
    margin-top: 12px;
  }

  .product-detail-buy paypal-add-to-cart-button {
    display: block;
    max-width: 100%;
  }

  .product-detail-buy .buy-btn {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 12px;
    font-size: 11px;
    letter-spacing: 0.1em;
    border: 1px solid #fff;
    background: transparent;
    color: #dbdbdb;
    text-decoration: none;
    text-transform: uppercase;
  }

  .product-back {
    display: inline-block;
    margin-top: 14px;
    font-size: 11px;
    padding: 4px 0;
  }

  /* ── Home ── */
  .void-block {
    padding-top: 12px;
  }

  .void-line {
    font-size: 11px;
    letter-spacing: 0.1em;
    margin-bottom: 14px;
  }

  .void-credits p {
    font-size: 10px;
    line-height: 1.55;
    margin: 10px 0;
  }

  .announcements-section {
    margin-top: 22px;
    padding-top: 14px;
  }

  .announcement-item {
    padding: 10px 11px;
    margin-bottom: 10px;
  }

  .announcement-title {
    font-size: 12px;
    letter-spacing: 0.14em;
  }

  .announcement-date {
    font-size: 9px;
  }

  .announcement-text {
    font-size: 10px;
    line-height: 1.55;
    letter-spacing: 0.05em;
  }

  /* ── Bands: stacked but left-aligned like the desktop column ── */
  .band {
    padding: 14px 0;
  }

  .bandimg {
    width: 120px;
    max-width: 40%;
    margin: 0 0 10px;
    border: 1px solid #fff;
  }

  .bandname {
    font-size: 13px;
    letter-spacing: 0.14em;
    text-align: left;
    margin: 0 0 6px;
  }

  .banddesc {
    font-size: 10px;
    line-height: 1.55;
    letter-spacing: 0.05em;
    text-align: left;
  }

  .bandlinks {
    text-align: left;
  }

  .bandlinks a {
    font-size: 10px;
    margin-right: 12px;
    padding: 4px 0;
  }

  /* ── Formats / scene / rarities / contact / upcoming ── */
  .format-block,
  .rarity-item {
    padding: 11px 12px;
    margin-bottom: 12px;
  }

  .format-title,
  .scene-title {
    font-size: 12px;
    letter-spacing: 0.16em;
    margin: 0 0 8px;
  }

  .venue-name {
    font-size: 11px;
    letter-spacing: 0.14em;
  }

  .format-text,
  .scene-text,
  .format-list,
  .rarity-text,
  .rarity-format,
  .rarity-source,
  .rarity-date,
  .contact-details,
  .upcoming-desc,
  .intro-text {
    font-size: 10px;
    line-height: 1.55;
    letter-spacing: 0.05em;
  }

  .format-list {
    padding-left: 16px;
  }

  .rarity-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .rarity-title {
    font-size: 12px;
    letter-spacing: 0.12em;
  }

  .rarity-status {
    font-size: 8px;
  }

  .rarity-release {
    font-size: 11px;
  }

  .contact-label,
  .upcoming-title {
    font-size: 12px;
    letter-spacing: 0.16em;
  }

  .contact-info-block,
  .upcoming-item,
  .scene-block {
    padding: 12px 0;
  }

  .format-link a,
  .scene-link a,
  .rarity-link,
  .contact-email a,
  .contact-links a {
    font-size: 10px;
    margin-right: 10px;
    padding: 3px 0;
  }

  /* ── Autopsy ── */
  .booklet-section {
    margin: 14px 0 18px;
    padding-top: 12px;
  }

  .booklet-toggle {
    width: 100%;
    max-width: none;
    padding: 8px 12px;
    font-size: 11px;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
  }

  .booklet-viewport {
    max-width: 100%;
  }

  .booklet-viewport .panel img {
    width: 100%;
    max-height: 280px;
    height: auto;
    object-fit: contain;
  }

  .booklet-nav {
    margin-top: 8px;
  }

  .booklet-nav .arrow {
    padding: 6px 14px;
    font-size: 12px;
    margin-right: 6px;
  }

  .panel-counter {
    font-size: 10px;
  }

  .video-miniplayer {
    padding-top: 12px;
    margin-top: 12px;
  }

  .video-title {
    font-size: 13px;
    letter-spacing: 0.14em;
  }

  .video-subtitle,
  .video-hint {
    font-size: 10px;
    line-height: 1.5;
    letter-spacing: 0.05em;
  }

  .player-frame,
  .autopsy-video,
  .youtube-iframe {
    width: 100%;
    max-width: 100%;
  }

  .fallback-btn {
    width: 100%;
    padding: 8px;
    font-size: 10px;
  }

  .support-text,
  .coming-soon {
    font-size: 10px;
    line-height: 1.5;
  }

  /* ── Footer ── */
  #footer {
    padding: 14px 10px max(18px, env(safe-area-inset-bottom));
  }

  .footer-large {
    font-size: 12px;
    letter-spacing: 0.18em;
  }

  .footer-small,
  #footer p {
    font-size: 10px;
  }

  #footer a {
    font-size: 10px;
    letter-spacing: 0.08em;
  }
}

/* Fine pass at ~390px (most common modern iPhone portrait) */
@media (min-width: 375px) and (max-width: 430px) {
  #content {
    padding: 13px 11px 20px;
  }

  .site-banner {
    max-height: 92px;
  }

  .page-title,
  #main h2.collection-title {
    font-size: 16px;
    letter-spacing: 0.18em;
  }

  .product {
    padding: 0 5px 15px;
  }

  .product-card {
    padding: 7px;
  }
}

/* Very narrow (SE / older) */
@media (max-width: 374px) {
  .site-banner {
    max-height: 76px;
  }

  #content {
    padding: 10px 8px 18px;
  }

  .page-title,
  #main h2.collection-title {
    font-size: 14px;
    letter-spacing: 0.12em;
  }

  .product_name,
  .product_price {
    font-size: 9px;
  }
}

/* Landscape phones — compact, still identity-matched */
@media (max-width: 760px) and (orientation: landscape) {
  .site-banner {
    max-height: 56px;
    object-fit: cover;
  }

  #content {
    padding: 10px 12px 14px;
  }

  #sidebar {
    margin-bottom: 10px;
    padding-bottom: 8px;
  }

  #sidebar #nav a,
  #sidebar #site-nav a,
  #sidebar #places a {
    padding: 3px 0;
    font-size: 10px;
  }

  .product {
    width: 33.333%;
    padding: 0 4px 10px;
  }

  .booklet-viewport .panel img {
    max-height: 180px;
  }
}