/*
 * AREXMODS PRODUCT REFERENCE POLISH v1.5.7-r1
 * Target: approved reference screenshot.
 * Replaces v1.5.5 in layout. v1.5.0-r2 remains as the visual base.
 * Robust viewport sizing uses BODY flex; no hardcoded header subtraction.
 */

@media (min-width: 1280px) and (min-height: 680px) {
  html,
  body.am1417-resource-page {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  body.am1417-resource-page {
    display: flex !important;
    flex-direction: column !important;
  }

  body.am1417-resource-page > header {
    flex: 0 0 auto !important;
  }

  body.am1417-resource-page main {
    flex: 1 1 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 7px 0 8px !important;
    overflow: hidden !important;
  }

  body.am1417-resource-page footer {
    display: none !important;
  }

  body.am1417-resource-page .resource-pro-v071 {
    display: grid !important;
    grid-template-rows: 26px clamp(292px, 35vh, 330px) clamp(64px, 7.8vh, 76px) minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    align-content: stretch !important;
    gap: 8px !important;
    width: min(88vw, 1500px) !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body.am1417-resource-page .resource-breadcrumbs-v071 {
    grid-row: 1 !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    margin: 0 !important;
    padding: 4px 10px !important;
    border-radius: 9px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  /* ========================= HERO ========================= */
  body.am1417-resource-page .resource-hero-v071,
  body.am1417-resource-page .resource-hero-v071.section-block {
    grid-row: 2 !important;
    display: grid !important;
    grid-template-columns: minmax(410px, 1.08fr) minmax(490px, 1.18fr) minmax(300px, .72fr) !important;
    grid-auto-rows: 100% !important;
    gap: 12px !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  body.am1417-resource-page .resource-hero-media-v071,
  body.am1417-resource-page .resource-hero-copy-v071,
  body.am1417-resource-page .resource-action-top-v140 {
    width: auto !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  body.am1417-resource-page .resource-hero-media-v071 {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) clamp(60px, 19%, 68px) !important;
    gap: 7px !important;
    padding: 9px !important;
  }

  body.am1417-resource-page .resource-hero-media-v071 > img {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 11px !important;
  }

  body.am1417-resource-page .resource-hero-overlay-v071 {
    left: 14px !important;
    right: 14px !important;
    bottom: clamp(70px, 22%, 82px) !important;
  }

  body.am1417-resource-page :is(.resource-hero-thumbs-v143,.resource-hero-thumbs-v144) {
    height: 100% !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) 58px !important;
    gap: 7px !important;
  }

  body.am1417-resource-page :is(.resource-hero-thumb-v143,.resource-hero-thumb-v144,.resource-hero-more-v143,.resource-hero-more-v144) {
    height: 100% !important;
    border-radius: 9px !important;
  }

  /* Center card: typography and proportions closer to reference. */
  body.am1417-resource-page .resource-hero-copy-v071 {
    padding: 16px 18px !important;
  }

  body.am1417-resource-page .resource-kicker-v071 {
    margin: 0 0 8px !important;
    font-size: 11px !important;
  }

  body.am1417-resource-page .resource-hero-copy-v071 h1 {
    margin: 0 0 10px !important;
    font-size: clamp(27px, 1.7vw, 34px) !important;
    line-height: 1.04 !important;
  }

  body.am1417-resource-page .resource-lead-v071 {
    margin: 0 0 10px !important;
    font-size: 12px !important;
    line-height: 1.34 !important;
    -webkit-line-clamp: 3 !important;
  }

  body.am1417-resource-page .resource-author-v071 {
    width: max-content !important;
    max-width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 0 10px !important;
    padding: 5px 8px !important;
    border-radius: 10px !important;
  }

  body.am1417-resource-page .resource-author-avatar-v071 {
    width: 33px !important;
    height: 33px !important;
    min-width: 33px !important;
  }

  body.am1417-resource-page .resource-author-v071 small { font-size: 8px !important; }
  body.am1417-resource-page .resource-author-v071 b { font-size: 10px !important; }

  body.am1417-resource-page .resource-metrics-v071 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: auto !important;
    padding-top: 8px !important;
  }

  body.am1417-resource-page .resource-metrics-v071 > div {
    height: clamp(66px, 21%, 78px) !important;
    min-height: 66px !important;
    padding: 9px 6px !important;
    border-radius: 10px !important;
  }

  body.am1417-resource-page .resource-metrics-v071 strong { font-size: 19px !important; }
  body.am1417-resource-page .resource-metrics-v071 span { margin-top: 5px !important; font-size: 8px !important; }

  /* Right action panel */
  body.am1417-resource-page .resource-action-top-v140 {
    padding: 17px 15px !important;
  }

  body.am1417-resource-page .resource-price-line-v071 {
    margin: 0 0 13px !important;
    padding: 0 0 12px !important;
  }

  body.am1417-resource-page .resource-price-line-v071 span { font-size: 10px !important; }
  body.am1417-resource-page .resource-price-line-v071 strong {
    font-size: clamp(34px, 2.2vw, 42px) !important;
  }

  body.am1417-resource-page .resource-primary-actions-v071 {
    gap: 9px !important;
  }

  body.am1417-resource-page .resource-primary-actions-v071 :is(a,button,.btn) {
    min-height: 44px !important;
    height: 44px !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
  }

  body.am1417-resource-page .resource-safe-v071,
  body.am1417-resource-page .commerce-license-note-v080,
  body.am1417-resource-page .unified-balance-v082 {
    max-height: 42px !important;
    margin-top: 8px !important;
    padding: 7px 8px !important;
    border-radius: 9px !important;
    font-size: 7.8px !important;
    line-height: 1.15 !important;
    overflow: hidden !important;
  }


  /*
   * Reference cleanup:
   * current product markup has one extra desktop action ("Уведомлять об обновлениях")
   * and the Marketplace verification strip. They are not present in the approved
   * reference and together exceed the available CTA height. Hide them visually
   * on desktop only; no backend/JS/data is removed.
   */
  body.am1417-resource-page .resource-primary-actions-v071 > :nth-child(4) {
    display: none !important;
  }

  body.am1417-resource-page .resource-safe-v071 {
    display: none !important;
  }

  /* Keep the three reference CTA buttons comfortably inside the card. */
  body.am1417-resource-page .resource-primary-actions-v071 {
    gap: 8px !important;
  }

  body.am1417-resource-page .resource-primary-actions-v071 :is(a,button,.btn) {
    min-height: 42px !important;
    height: 42px !important;
  }

  /* ========================= STATUS CARDS ========================= */
  body.am1417-resource-page .resource-hero-v071 + :not(.resource-layout-v071) {
    grid-row: 3 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body.am1417-resource-page .resource-hero-v071 + :not(.resource-layout-v071) > * {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    grid-template-rows: auto 1fr !important;
    column-gap: 10px !important;
    align-items: center !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 10px 13px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  body.am1417-resource-page .resource-hero-v071 + :not(.resource-layout-v071) > *::before {
    grid-row: 1 / span 2 !important;
    content: "◆" !important;
    display: grid !important;
    place-items: center !important;
    width: 40px !important;
    height: 40px !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 11px !important;
    background: rgba(255,255,255,.035) !important;
    font-size: 16px !important;
    font-weight: 900 !important;
  }

  body.am1417-resource-page .resource-hero-v071 + :not(.resource-layout-v071) > *:nth-child(1)::before { content: "◆" !important; color: #ff7a00 !important; }
  body.am1417-resource-page .resource-hero-v071 + :not(.resource-layout-v071) > *:nth-child(2)::before { content: "◷" !important; color: #27b9ff !important; }
  body.am1417-resource-page .resource-hero-v071 + :not(.resource-layout-v071) > *:nth-child(3)::before { content: "✓" !important; color: #60edb1 !important; }
  body.am1417-resource-page .resource-hero-v071 + :not(.resource-layout-v071) > *:nth-child(4)::before { content: "●" !important; color: #27b9ff !important; }

  body.am1417-resource-page .resource-hero-v071 + :not(.resource-layout-v071) :is(h2,h3,h4,strong,b) {
    margin: 0 !important;
    font-size: 15px !important;
    line-height: 1.05 !important;
  }

  body.am1417-resource-page .resource-hero-v071 + :not(.resource-layout-v071) :is(p,span,small) {
    font-size: 9px !important;
    line-height: 1.13 !important;
  }

  /* ========================= LOWER AREA ========================= */
  body.am1417-resource-page .resource-layout-v071 {
    grid-row: 4 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 1fr) clamp(90px, 10.5vh, 108px) !important;
    align-content: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body.am1417-resource-page .resource-main-v071 {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  body.am1417-resource-page .resource-tabs-shell-v071 {
    display: grid !important;
    grid-template-rows: 38px minmax(0, 1fr) !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  body.am1417-resource-page .resource-tabs-v071 {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 5px 9px !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  body.am1417-resource-page .resource-tabs-v071 button {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 11px 0 28px !important;
    border-radius: 9px !important;
    font-size: 9px !important;
  }

  body.am1417-resource-page .resource-tab-panel-v071,
  body.am1417-resource-page [data-resource-panel]:not([data-resource-panel="description"]) {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    padding: 10px 12px !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-width: thin !important;
  }

  body.am1417-resource-page .resource-description-wide-v1417 {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    padding: 10px 12px !important;
    overflow: hidden !important;
  }

  body.am1417-resource-page .resource-summary-grid-wide-v1417,
  body.am1417-resource-page .resource-summary-about-wide-v1417 {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
  }

  body.am1417-resource-page .resource-summary-about-wide-v1417 {
    padding: 10px 12px !important;
    border-radius: 11px !important;
  }

  body.am1417-resource-page .resource-summary-title-v144 {
    min-height: 31px !important;
    margin-bottom: 7px !important;
  }

  body.am1417-resource-page .resource-summary-title-v144 h3 { font-size: 16px !important; }
  body.am1417-resource-page .resource-summary-title-v144 small { font-size: 7.5px !important; }

  body.am1417-resource-page .resource-about-wide-layout-v1417 {
    display: grid !important;
    grid-template-columns: minmax(0, 1.68fr) minmax(330px, .78fr) !important;
    gap: 11px !important;
    min-height: 0 !important;
  }

  body.am1417-resource-page .resource-about-wide-copy-v1417 {
    padding: 9px 11px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }

  body.am1417-resource-page .resource-about-wide-label-v1417 {
    margin-bottom: 6px !important;
    font-size: 8px !important;
  }

  body.am1417-resource-page .resource-about-wide-text-v1417 {
    font-size: 10.5px !important;
    line-height: 1.34 !important;
    -webkit-line-clamp: 3 !important;
  }

  body.am1417-resource-page .resource-about-facts-wide-v1417,
  body.am1417-resource-page .resource-about-facts-v149 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  body.am1417-resource-page .resource-about-facts-wide-v1417 > div,
  body.am1417-resource-page .resource-about-facts-v149 > div {
    padding: 6px 7px !important;
    border-radius: 9px !important;
  }

  body.am1417-resource-page .resource-about-facts-wide-v1417 b,
  body.am1417-resource-page .resource-about-facts-v149 b { font-size: 9px !important; }

  body.am1417-resource-page .resource-about-facts-wide-v1417 small,
  body.am1417-resource-page .resource-about-facts-v149 small { margin-top: 2px !important; font-size: 6.4px !important; }


  body.am1417-resource-page .resource-source-row-v144,
  body.am1417-resource-page .resource-source-row-wide-v1417 {
    margin-top: 2px !important;
    padding-top: 2px !important;
  }

  body.am1417-resource-page .resource-video-inline-v144,
  body.am1417-resource-page .resource-related-v071 {
    display: none !important;
  }

  body.am1417-resource-page .resource-sidebar-v071 {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    grid-auto-rows: 100% !important;
    gap: 9px !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  body.am1417-resource-page .resource-sidebar-v071 > .side-card {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 11px 13px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  body.am1417-resource-page .resource-sidebar-v071 h3 {
    min-height: 20px !important;
    margin: 0 0 6px !important;
    font-size: 11px !important;
  }

  body.am1417-resource-page .resource-facts-v071 > div,
  body.am1417-resource-page .resource-access-v071 > div {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 12px !important;
  }

  body.am1417-resource-page .resource-facts-v071 p,
  body.am1417-resource-page .resource-access-v071 p {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 2px 0 !important;
    font-size: 8.5px !important;
    line-height: 1.1 !important;
  }

  body.am1417-resource-page .resource-facts-v071 p b,
  body.am1417-resource-page .resource-access-v071 p b { font-size: 8.5px !important; }

  body.am1417-resource-page .resource-access-v071 :is(a,button,.btn) {
    height: 23px !important;
    min-height: 23px !important;
    margin-top: 4px !important;
    padding: 3px 7px !important;
    font-size: 7.5px !important;
  }

  body.am1417-resource-page .resource-compat-game-v071 {
    height: 40px !important;
    min-height: 40px !important;
    padding: 5px 7px !important;
    border-radius: 9px !important;
  }

  body.am1417-resource-page .resource-egg-list-v071 { margin-top: 4px !important; }
  body.am1417-resource-page .resource-egg-list-v071 span { padding: 2px 5px !important; font-size: 7px !important; }
}

/* Short desktop viewport: same composition, slightly reduced hero/status/bottom. */
@media (min-width: 1280px) and (min-height: 680px) and (max-height: 819px) {
  body.am1417-resource-page .resource-pro-v071 {
    grid-template-rows: 22px 262px 56px minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  body.am1417-resource-page .resource-hero-copy-v071 h1 { font-size: 24px !important; }
  body.am1417-resource-page .resource-lead-v071 { font-size: 10px !important; }

  body.am1417-resource-page .resource-action-top-v140 { padding: 11px !important; }
  body.am1417-resource-page .resource-primary-actions-v071 :is(a,button,.btn) {
    height: 34px !important;
    min-height: 34px !important;
    font-size: 9px !important;
  }

  body.am1417-resource-page .resource-layout-v071 {
    grid-template-rows: minmax(0, 1fr) 84px !important;
    gap: 6px !important;
  }

  body.am1417-resource-page .resource-tabs-shell-v071 {
    grid-template-rows: 34px minmax(0, 1fr) !important;
  }

  body.am1417-resource-page .resource-tabs-v071 {
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
  }
}

/* Tablet/mobile: normal vertical flow. */
@media (max-width: 1279px), (max-height: 679px) {
  html,
  body.am1417-resource-page {
    height: auto !important;
    min-height: 100vh !important;
    max-height: none !important;
    overflow-y: auto !important;
  }

  body.am1417-resource-page {
    display: block !important;
  }

  body.am1417-resource-page main {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding-top: 8px !important;
    overflow: visible !important;
  }

  body.am1417-resource-page footer {
    display: block !important;
  }

  body.am1417-resource-page .resource-pro-v071 {
    display: block !important;
    width: calc(100% - 20px) !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}
