/* v38: true desktop card-detail layout. Mobile keeps the existing image-first stack. */
.detail-header-desktop{display:none;}

@media (min-width:801px){
  .modal.card-details-modal{
    width:min(96vw,1180px) !important;
    max-width:1180px !important;
  }

  .modal.card-details-modal #detailsMount > .detail-header-mobile{
    display:none !important;
  }

  .modal.card-details-modal .detail-layout{
    display:grid !important;
    grid-template-columns:minmax(430px,1.18fr) minmax(360px,.92fr) !important;
    gap:28px !important;
    align-items:start !important;
  }

  .modal.card-details-modal .detail-info{
    min-width:0;
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;
  }

  .modal.card-details-modal .detail-header-desktop{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:space-between !important;
    gap:16px !important;
    margin:0 0 4px !important;
    padding:2px 0 12px !important;
    border-bottom:1px solid var(--border);
  }

  .modal.card-details-modal .detail-header-desktop .detail-title{
    flex:1 1 auto;
    min-width:0;
  }

  .modal.card-details-modal .detail-header-desktop .detail-title h2{
    margin:3px 0 5px !important;
    font-size:clamp(25px,2vw,34px) !important;
    line-height:1.02 !important;
    overflow-wrap:anywhere;
  }

  .modal.card-details-modal .detail-header-desktop .detail-meta{
    line-height:1.35;
  }

  .modal.card-details-modal .detail-header-desktop .detail-currency-control{
    flex:0 0 auto;
    margin-top:1px;
  }

  .modal.card-details-modal .detail-slider-stage{
    max-height:76vh !important;
  }

  .modal.card-details-modal .detail-summary-strip{
    margin-top:0 !important;
  }
}

@media (max-width:800px){
  .modal.card-details-modal .detail-header-mobile{display:flex !important;}
  .modal.card-details-modal .detail-header-desktop{display:none !important;}
}

/* =========================================================
   V101 — PREMIUM DESKTOP CARD DETAILS
   Visual-only refinement. Desktop only; existing mobile layout is untouched.
   ========================================================= */
@media (min-width:801px){
  #detailsOverlay{
    background:rgba(4,6,10,.78) !important;
    backdrop-filter:blur(10px) saturate(.9) !important;
  }

  .modal.card-details-modal{
    width:min(96vw,1240px) !important;
    max-width:1240px !important;
    max-height:94vh !important;
    padding:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    border:1px solid rgba(227,179,65,.20) !important;
    border-radius:20px !important;
    background:
      radial-gradient(circle at 18% 0%,rgba(227,179,65,.055),transparent 32%),
      linear-gradient(180deg,#191b21 0%,#15171c 100%) !important;
    box-shadow:
      0 30px 90px rgba(0,0,0,.62),
      0 0 0 1px rgba(255,255,255,.025) inset !important;
  }

  .modal.card-details-modal .details-top-actions{
    position:sticky !important;
    top:0 !important;
    z-index:45 !important;
    min-height:58px !important;
    padding:10px 16px !important;
    margin:0 !important;
    border-bottom:1px solid rgba(255,255,255,.06) !important;
    background:rgba(20,22,27,.91) !important;
    backdrop-filter:blur(18px) saturate(1.15) !important;
    box-shadow:0 8px 24px rgba(0,0,0,.16) !important;
  }

  .modal.card-details-modal .details-secondary-actions,
  .modal.card-details-modal .details-primary-actions{
    gap:7px !important;
  }

  .modal.card-details-modal .details-primary-actions{
    padding-left:12px !important;
    border-left:1px solid rgba(255,255,255,.07) !important;
  }

  .modal.card-details-modal .details-top-actions button{
    min-height:37px !important;
    padding:0 12px !important;
    border-color:rgba(255,255,255,.09) !important;
    border-radius:10px !important;
    background:rgba(255,255,255,.025) !important;
    color:#b5b7bf !important;
    font-size:10px !important;
    letter-spacing:.01em !important;
    transition:border-color .15s ease,background .15s ease,color .15s ease,transform .15s ease !important;
  }

  .modal.card-details-modal .details-top-actions button:hover,
  .modal.card-details-modal .details-top-actions button:focus-visible{
    border-color:rgba(227,179,65,.40) !important;
    background:rgba(227,179,65,.065) !important;
    color:#f6e4b3 !important;
    transform:translateY(-1px) !important;
  }

  .modal.card-details-modal #detailsShareBtn{
    border-color:rgba(95,212,196,.22) !important;
  }

  .modal.card-details-modal #detailsShareBtn:hover,
  .modal.card-details-modal #detailsShareBtn:focus-visible{
    border-color:rgba(95,212,196,.54) !important;
    background:rgba(95,212,196,.075) !important;
    color:#a9eee5 !important;
  }

  .modal.card-details-modal .details-primary-actions #detailsCloseBtn{
    border-color:rgba(255,255,255,.09) !important;
    background:rgba(255,255,255,.025) !important;
    color:#b5b7bf !important;
  }

  .modal.card-details-modal .details-primary-actions #detailsCloseBtn:hover,
  .modal.card-details-modal .details-primary-actions #detailsCloseBtn:focus-visible{
    border-color:rgba(248,113,113,.48) !important;
    background:rgba(248,113,113,.08) !important;
    color:#ffc0c0 !important;
  }

  .modal.card-details-modal #detailsMount{
    padding:24px 26px 28px !important;
  }

  .modal.card-details-modal .detail-layout{
    grid-template-columns:minmax(470px,1.22fr) minmax(370px,.88fr) !important;
    gap:34px !important;
  }

  /* Gallery side: a quieter museum-style stage. */
  .modal.card-details-modal .detail-layout > div:first-child{
    min-width:0;
    padding:14px !important;
    border:1px solid rgba(255,255,255,.055) !important;
    border-radius:17px !important;
    background:
      radial-gradient(circle at 50% 18%,rgba(255,255,255,.035),transparent 48%),
      rgba(5,7,10,.34) !important;
    box-shadow:0 18px 44px rgba(0,0,0,.20) inset !important;
  }

  .modal.card-details-modal .detail-slider-stage{
    max-height:74vh !important;
    border-color:rgba(255,255,255,.07) !important;
    border-radius:14px !important;
    background:#0c0e12 !important;
    box-shadow:0 14px 34px rgba(0,0,0,.34) !important;
  }

  .modal.card-details-modal .detail-slider-stage img{
    padding:10px !important;
  }

  .modal.card-details-modal .detail-thumb-strip-wrap{
    margin-top:12px !important;
    padding:10px 10px 5px !important;
    border-top:1px solid rgba(255,255,255,.045) !important;
  }

  .modal.card-details-modal .detail-thumb-strip-btn{
    border-radius:9px !important;
    border-color:rgba(255,255,255,.08) !important;
    background:#101217 !important;
  }

  .modal.card-details-modal .detail-thumb-strip-btn.active{
    border-color:rgba(227,179,65,.72) !important;
    box-shadow:0 0 0 1px rgba(227,179,65,.30),0 7px 16px rgba(0,0,0,.24) !important;
  }

  /* Information side: stronger hierarchy and less dashboard-like clutter. */
  .modal.card-details-modal .detail-info{
    gap:14px !important;
  }

  .modal.card-details-modal .detail-header-desktop{
    margin:0 !important;
    padding:2px 0 18px !important;
    border-bottom:1px solid rgba(227,179,65,.16) !important;
  }

  .modal.card-details-modal .detail-header-desktop .eyebrow{
    margin-bottom:7px !important;
    color:#c9a74c !important;
    font-size:9px !important;
    letter-spacing:1.6px !important;
  }

  .modal.card-details-modal .detail-header-desktop .detail-title h2{
    margin:0 0 8px !important;
    max-width:780px !important;
    color:#f5f3ee !important;
    font-size:clamp(30px,2.45vw,42px) !important;
    font-weight:800 !important;
    line-height:.98 !important;
    letter-spacing:.005em !important;
    text-transform:none !important;
    text-wrap:balance;
  }

  .modal.card-details-modal .detail-header-desktop .detail-meta{
    color:#92959f !important;
    font-size:11px !important;
  }

  .modal.card-details-modal .detail-summary-strip{
    grid-template-columns:1.38fr .92fr .92fr !important;
    gap:10px !important;
    margin:0 !important;
  }

  .modal.card-details-modal .detail-summary-card{
    position:relative;
    overflow:hidden;
    min-height:88px !important;
    padding:13px 14px !important;
    border:1px solid rgba(255,255,255,.065) !important;
    border-radius:13px !important;
    background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012)) !important;
    box-shadow:none !important;
  }

  .modal.card-details-modal .detail-summary-card::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:2px;
    background:rgba(255,255,255,.055);
  }

  .modal.card-details-modal .detail-summary-price{
    border-color:rgba(227,179,65,.23) !important;
    background:
      linear-gradient(135deg,rgba(227,179,65,.10),rgba(227,179,65,.018)),
      rgba(255,255,255,.012) !important;
  }

  .modal.card-details-modal .detail-summary-price::after{
    background:linear-gradient(90deg,#e3b341,rgba(227,179,65,.12)) !important;
  }

  .modal.card-details-modal .detail-summary-card > span{
    color:#747985 !important;
    font-size:8px !important;
    letter-spacing:.9px !important;
  }

  .modal.card-details-modal .detail-summary-card strong{
    margin-top:7px !important;
    font-size:14px !important;
  }

  .modal.card-details-modal .detail-summary-price .detail-price-primary,
  .modal.card-details-modal .detail-summary-price .detail-price-primary *{
    color:#f0c85b !important;
    font-size:clamp(19px,1.45vw,24px) !important;
    font-weight:800 !important;
    letter-spacing:-.02em !important;
  }

  .modal.card-details-modal .detail-buyer-confidence{
    gap:8px !important;
    margin:0 !important;
    padding:0 !important;
  }

  .modal.card-details-modal .detail-confidence-item{
    min-height:76px !important;
    padding:10px !important;
    border-color:rgba(255,255,255,.055) !important;
    border-radius:11px !important;
    background:rgba(255,255,255,.016) !important;
  }

  .modal.card-details-modal .detail-confidence-icon{
    width:24px !important;
    height:24px !important;
    border-color:rgba(95,212,196,.16) !important;
    background:rgba(95,212,196,.045) !important;
  }

  .modal.card-details-modal .detail-confidence-item strong{
    font-size:9.5px !important;
  }

  .modal.card-details-modal .detail-confidence-item small{
    color:#777b85 !important;
    font-size:8px !important;
  }

  .modal.card-details-modal .detail-info-section-title{
    margin:2px 0 -3px !important;
    padding-top:4px !important;
    color:#777b85 !important;
    font-size:8px !important;
    letter-spacing:1.25px !important;
  }

  .modal.card-details-modal .details-info-grid{
    gap:7px !important;
  }

  .modal.card-details-modal .details-info-grid .detail-item{
    padding:10px 11px !important;
    border-color:rgba(255,255,255,.05) !important;
    border-radius:10px !important;
    background:rgba(255,255,255,.014) !important;
  }

  .modal.card-details-modal .details-info-grid .detail-label{
    color:#6f737d !important;
    font-size:7.5px !important;
    letter-spacing:.65px !important;
  }

  .modal.card-details-modal .details-info-grid .detail-value{
    margin-top:4px !important;
    color:#d6d7db !important;
    font-size:11px !important;
    font-weight:650 !important;
  }

  .modal.card-details-modal .detail-section{
    padding:13px 14px !important;
    border-color:rgba(255,255,255,.055) !important;
    border-radius:11px !important;
    background:rgba(255,255,255,.014) !important;
  }

  .modal.card-details-modal .details-desktop-contact-socials{
    margin-top:1px !important;
    padding:15px 16px !important;
    border-color:rgba(227,179,65,.25) !important;
    border-radius:13px !important;
    background:
      linear-gradient(135deg,rgba(227,179,65,.075),rgba(227,179,65,.012)),
      rgba(255,255,255,.012) !important;
    box-shadow:none !important;
  }

  .modal.card-details-modal .details-contact-copy strong{
    color:#f3e1ab !important;
    font-size:13px !important;
  }

  /* Secondary navigation and recommendations read as separate gallery sections. */
  .modal.card-details-modal .same-series-nav,
  .modal.card-details-modal .related-cards-section{
    margin-top:28px !important;
    padding-top:22px !important;
    border-top:1px solid rgba(255,255,255,.065) !important;
  }

  .modal.card-details-modal .related-cards-section{
    padding-bottom:5px !important;
  }

  .modal.card-details-modal .related-cards-head{
    margin-bottom:13px !important;
  }

  .modal.card-details-modal .related-cards-head .eyebrow{
    margin-bottom:5px !important;
    color:#9f8545 !important;
    letter-spacing:1.35px !important;
  }

  .modal.card-details-modal .related-cards-head h3{
    color:#ececf0 !important;
    font-size:21px !important;
  }

  .modal.card-details-modal .related-cards-grid{
    gap:12px !important;
  }

  /* Owner-only information should remain present without dominating buyer UI. */
  body.owner-mode .modal.card-details-modal .owner-only:not(#detailsEditBtn){
    opacity:.86;
  }
}


/* =========================================================
   V103 — LONG TITLE + RETURN ACTION POLISH
   ========================================================= */
@media (min-width:801px){
  /* Preserve the premium scale for normal titles, but avoid oversized
     multi-line blocks for unusually long listing names. */
  .modal.card-details-modal .detail-header-desktop .detail-title h2.detail-title-long{
    font-size:clamp(24px,1.85vw,32px) !important;
    line-height:1.04 !important;
    letter-spacing:0 !important;
    text-wrap:pretty;
  }

  .modal.card-details-modal .detail-header-desktop .detail-title h2.detail-title-extra-long{
    font-size:clamp(21px,1.58vw,28px) !important;
    line-height:1.08 !important;
    letter-spacing:0 !important;
    text-wrap:pretty;
  }

  /* Back is navigation, not a destructive action. Keep its visual language
     neutral/gold and remove the conflicting teal/red focus treatment. */
  .modal.card-details-modal .details-primary-actions #detailsCloseBtn.is-return-action{
    border-color:rgba(227,179,65,.32) !important;
    background:rgba(227,179,65,.055) !important;
    color:#e8d39a !important;
    outline:none !important;
    box-shadow:none !important;
  }

  .modal.card-details-modal .details-primary-actions #detailsCloseBtn.is-return-action:hover,
  .modal.card-details-modal .details-primary-actions #detailsCloseBtn.is-return-action:focus-visible{
    border-color:rgba(227,179,65,.68) !important;
    background:rgba(227,179,65,.11) !important;
    color:#fff0bd !important;
    outline:2px solid rgba(227,179,65,.28) !important;
    outline-offset:2px !important;
    box-shadow:0 0 0 3px rgba(227,179,65,.06) !important;
  }

  /* Keep red semantics only when this control is actually Close. */
  .modal.card-details-modal .details-primary-actions #detailsCloseBtn.is-close-action:hover,
  .modal.card-details-modal .details-primary-actions #detailsCloseBtn.is-close-action:focus-visible{
    border-color:rgba(248,113,113,.48) !important;
    background:rgba(248,113,113,.08) !important;
    color:#ffc0c0 !important;
    outline:2px solid rgba(248,113,113,.20) !important;
    outline-offset:2px !important;
    box-shadow:none !important;
  }
}

/* =========================================================
   V104 — DESKTOP CARD DETAIL ACTION BAR REORGANIZATION
   Navigation left · buyer actions right · owner edit isolated
   ========================================================= */
@media (min-width:801px){
  .modal.card-details-modal .details-top-actions{
    display:grid !important;
    grid-template-columns:auto minmax(24px,1fr) auto auto !important;
    align-items:center !important;
    column-gap:10px !important;
    min-height:54px !important;
    padding:8px 14px !important;
  }

  /* Flatten the wrapper so Back/Close and Edit can occupy opposite sides. */
  .modal.card-details-modal .details-primary-actions{
    display:contents !important;
    padding:0 !important;
    border:0 !important;
  }

  /* Navigation belongs at the far left. */
  .modal.card-details-modal #detailsCloseBtn{
    grid-column:1 !important;
    grid-row:1 !important;
    justify-self:start !important;
    min-width:0 !important;
    padding-inline:13px !important;
  }

  /* Buyer utilities are a compact cluster on the right. */
  .modal.card-details-modal .details-secondary-actions{
    grid-column:3 !important;
    grid-row:1 !important;
    justify-self:end !important;
    display:flex !important;
    align-items:center !important;
    gap:5px !important;
    padding:3px !important;
    border:1px solid rgba(255,255,255,.055) !important;
    border-radius:12px !important;
    background:rgba(255,255,255,.018) !important;
  }

  .modal.card-details-modal .details-secondary-actions > button,
  .modal.card-details-modal .details-secondary-actions .details-more-wrap > button{
    min-height:34px !important;
    padding:0 10px !important;
    border:1px solid transparent !important;
    border-radius:8px !important;
    background:transparent !important;
    color:#aaaeb8 !important;
    box-shadow:none !important;
  }

  .modal.card-details-modal .details-secondary-actions > button:hover,
  .modal.card-details-modal .details-secondary-actions > button:focus-visible,
  .modal.card-details-modal .details-secondary-actions .details-more-wrap > button:hover,
  .modal.card-details-modal .details-secondary-actions .details-more-wrap > button:focus-visible{
    border-color:rgba(227,179,65,.28) !important;
    background:rgba(227,179,65,.07) !important;
    color:#f0ddb0 !important;
    outline:none !important;
    transform:none !important;
  }

  /* Remove the old teal-only Share treatment so the action group is cohesive. */
  .modal.card-details-modal #detailsShareBtn,
  .modal.card-details-modal #detailsShareBtn:hover,
  .modal.card-details-modal #detailsShareBtn:focus-visible{
    border-color:transparent !important;
  }

  .modal.card-details-modal #detailsShareBtn:hover,
  .modal.card-details-modal #detailsShareBtn:focus-visible{
    border-color:rgba(227,179,65,.28) !important;
    background:rgba(227,179,65,.07) !important;
    color:#f0ddb0 !important;
  }

  /* Owner action stays visually distinct without joining buyer utilities. */
  .modal.card-details-modal #detailsEditBtn{
    grid-column:4 !important;
    grid-row:1 !important;
    justify-self:end !important;
    min-height:38px !important;
    padding:0 15px !important;
    border:1px solid rgba(227,179,65,.58) !important;
    border-radius:10px !important;
    background:linear-gradient(135deg,#e3b341,#f3d488) !important;
    color:#171309 !important;
    font-weight:800 !important;
    box-shadow:0 5px 15px rgba(227,179,65,.10) !important;
  }

  .modal.card-details-modal #detailsEditBtn:hover,
  .modal.card-details-modal #detailsEditBtn:focus-visible{
    border-color:#f4d98e !important;
    background:linear-gradient(135deg,#edc25a,#f7dfa0) !important;
    color:#171309 !important;
    outline:2px solid rgba(227,179,65,.22) !important;
    outline-offset:2px !important;
    transform:translateY(-1px) !important;
  }

  /* When not in owner mode, no phantom space should remain after buyer actions. */
  body:not(.owner-mode) .modal.card-details-modal .details-top-actions{
    grid-template-columns:auto minmax(24px,1fr) auto !important;
  }

  body:not(.owner-mode) .modal.card-details-modal .details-secondary-actions{
    grid-column:3 !important;
  }
}

/* =========================================================
   V105 — PREMIUM DESKTOP INVENTORY GRID
   Visual-only refinement. Inventory/collection/reserved/sold
   desktop tiles only; compact mode and mobile remain untouched.
   ========================================================= */
@media (min-width:801px){
  #invGrid.grid:not(.compact-list){
    gap:20px !important;
  }

  #invGrid.grid:not(.compact-list) .card{
    position:relative !important;
    overflow:hidden !important;
    border:1px solid rgba(255,255,255,.065) !important;
    border-radius:16px !important;
    background:
      linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.008)),
      var(--surface) !important;
    box-shadow:0 10px 28px rgba(0,0,0,.16) !important;
    transform:translateY(0) !important;
    transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease !important;
  }

  #invGrid.grid:not(.compact-list) .card::before{
    width:3px !important;
    opacity:.72 !important;
  }

  #invGrid.grid:not(.compact-list) .card:hover,
  #invGrid.grid:not(.compact-list) .card:focus-visible{
    transform:translateY(-4px) !important;
    border-color:rgba(227,179,65,.24) !important;
    background:
      linear-gradient(180deg,rgba(227,179,65,.028),rgba(255,255,255,.008)),
      var(--surface) !important;
    box-shadow:0 18px 42px rgba(0,0,0,.28),0 0 0 1px rgba(227,179,65,.04) inset !important;
    outline:none !important;
  }

  /* Image remains dominant, but receives a cleaner storefront frame. */
  #invGrid.grid:not(.compact-list) .card > .thumb-wrap,
  #invGrid.grid:not(.compact-list) .card > .thumb-placeholder{
    overflow:hidden !important;
    border-bottom:1px solid rgba(255,255,255,.055) !important;
    background:#101217 !important;
  }

  #invGrid.grid:not(.compact-list) .card > .thumb-wrap .thumb{
    transform:scale(1) !important;
    transition:transform .28s cubic-bezier(.2,.7,.2,1),filter .2s ease !important;
    filter:saturate(.98) contrast(1.015) !important;
  }

  #invGrid.grid:not(.compact-list) .card:hover > .thumb-wrap .thumb,
  #invGrid.grid:not(.compact-list) .card:focus-visible > .thumb-wrap .thumb{
    transform:scale(1.018) !important;
    filter:saturate(1.02) contrast(1.025) !important;
  }

  /* More deliberate information hierarchy. */
  #invGrid.grid:not(.compact-list) .card .clean-card-body{
    padding:13px 14px 14px !important;
    gap:10px !important;
  }

  #invGrid.grid:not(.compact-list) .card .clean-card-main{
    gap:6px !important;
  }

  #invGrid.grid:not(.compact-list) .card .clean-card-title-row{
    align-items:flex-start !important;
    gap:8px !important;
  }

  #invGrid.grid:not(.compact-list) .card .clean-card-name{
    min-width:0 !important;
    min-height:39px !important;
    margin:0 !important;
    color:#f2f1ed !important;
    font-family:'Barlow Condensed',sans-serif !important;
    font-size:17px !important;
    font-weight:750 !important;
    line-height:1.14 !important;
    letter-spacing:.01em !important;
    white-space:normal !important;
    overflow:hidden !important;
    text-overflow:clip !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
    overflow-wrap:anywhere !important;
  }

  #invGrid.grid:not(.compact-list) .card .clean-card-reference-toggle-row{
    min-height:25px !important;
    gap:8px !important;
  }

  #invGrid.grid:not(.compact-list) .card .clean-card-reference{
    color:#777b86 !important;
    font-size:9.5px !important;
    letter-spacing:.035em !important;
  }

  #invGrid.grid:not(.compact-list) .card .card-overview-pill-toggle{
    min-height:24px !important;
    padding:3px 7px !important;
    border-color:rgba(255,255,255,.065) !important;
    border-radius:7px !important;
    background:rgba(255,255,255,.018) !important;
    color:#777b85 !important;
    font-size:8.5px !important;
  }

  #invGrid.grid:not(.compact-list) .card .card-overview-pill-toggle:hover,
  #invGrid.grid:not(.compact-list) .card .card-overview-pill-toggle[aria-expanded="true"]{
    border-color:rgba(227,179,65,.25) !important;
    background:rgba(227,179,65,.055) !important;
    color:#d9bd73 !important;
  }

  /* Price should be the second-strongest element after the card name. */
  #invGrid.grid:not(.compact-list) .card .clean-price-block{
    margin-top:1px !important;
    padding-top:10px !important;
    border-top:1px solid rgba(255,255,255,.055) !important;
  }

  #invGrid.grid:not(.compact-list) .card .clean-price-primary{
    color:#e9bd4f !important;
    font-size:18px !important;
    font-weight:800 !important;
    line-height:1.08 !important;
    letter-spacing:-.025em !important;
  }

  #invGrid.grid:not(.compact-list) .card .clean-price-secondary{
    margin-top:5px !important;
    color:#787c86 !important;
    font-size:9.5px !important;
    font-weight:550 !important;
    line-height:1.3 !important;
  }

  /* Metadata becomes quieter and more consistent. */
  #invGrid.grid:not(.compact-list) .card .clean-all-pills{
    gap:5px !important;
    margin-top:2px !important;
  }

  #invGrid.grid:not(.compact-list) .card .clean-all-pills .clean-meta-pill,
  #invGrid.grid:not(.compact-list) .card .clean-all-pills .clean-grade-badge{
    min-height:22px !important;
    padding:3px 7px !important;
    border-color:rgba(255,255,255,.07) !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.025) !important;
    color:#a2a6af !important;
    font-size:8.5px !important;
    font-weight:650 !important;
    letter-spacing:.02em !important;
  }

  #invGrid.grid:not(.compact-list) .card .clean-all-pills .clean-grade-badge{
    border-color:rgba(95,212,196,.18) !important;
    background:rgba(95,212,196,.045) !important;
    color:#87d9ce !important;
  }

  #invGrid.grid:not(.compact-list) .card .clean-all-pills .clean-availability-pill{
    border-color:rgba(227,179,65,.16) !important;
    background:rgba(227,179,65,.04) !important;
    color:#d3b66c !important;
  }

  #invGrid.grid:not(.compact-list) .card .clean-notes{
    margin-top:0 !important;
    color:#737781 !important;
    font-size:9.5px !important;
    line-height:1.35 !important;
    -webkit-line-clamp:2 !important;
  }

  /* Compare/favorite should support the title rather than compete with it. */
  #invGrid.grid:not(.compact-list) .card .card-title-actions{
    flex:0 0 auto !important;
    gap:4px !important;
  }

  #invGrid.grid:not(.compact-list) .card .compare-card-btn{
    min-height:25px !important;
    padding:3px 7px !important;
    border-color:rgba(255,255,255,.065) !important;
    background:rgba(255,255,255,.018) !important;
    color:#7d818b !important;
    font-size:8px !important;
  }

  #invGrid.grid:not(.compact-list) .card .compare-card-btn:hover,
  #invGrid.grid:not(.compact-list) .card .compare-card-btn.active{
    border-color:rgba(227,179,65,.30) !important;
    background:rgba(227,179,65,.06) !important;
    color:#dfc176 !important;
  }

  #invGrid.grid:not(.compact-list) .card .title-favorite-btn{
    width:27px !important;
    height:27px !important;
    border-color:rgba(255,255,255,.065) !important;
    background:rgba(255,255,255,.018) !important;
    color:#8c9099 !important;
  }

  #invGrid.grid:not(.compact-list) .card .title-favorite-btn:hover,
  #invGrid.grid:not(.compact-list) .card .title-favorite-btn.active{
    border-color:rgba(227,179,65,.32) !important;
    background:rgba(227,179,65,.065) !important;
    color:#edc85f !important;
  }

  /* Owner controls stay compact and visually separate from the storefront. */
  body.owner-mode #invGrid.grid:not(.compact-list) .card .quick-card-actions{
    top:8px !important;
    right:8px !important;
    padding:3px !important;
    border:1px solid rgba(255,255,255,.09) !important;
    border-radius:9px !important;
    background:rgba(9,11,15,.82) !important;
    backdrop-filter:blur(10px) !important;
    box-shadow:0 7px 18px rgba(0,0,0,.25) !important;
  }

  body.owner-mode #invGrid.grid:not(.compact-list) .card .quick-card-actions .quick-card-menu-toggle{
    width:27px !important;
    height:27px !important;
    border-color:rgba(227,179,65,.18) !important;
    color:#d7bc75 !important;
  }

  #invGrid.grid:not(.compact-list) .card .clean-owner-views{
    color:#666b75 !important;
    font-size:8.5px !important;
  }
}

/* =========================================================
   V107 — RELATED CARDS / SAME-SERIES GALLERY POLISH
   Desktop only. No recommendation logic changes.
   ========================================================= */
@media (min-width:801px){
  /* Same-series navigation reads as a compact secondary rail. */
  .modal.card-details-modal .same-series-nav{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:18px !important;
    margin-top:30px !important;
    padding:17px 18px !important;
    border:1px solid rgba(255,255,255,.065) !important;
    border-radius:14px !important;
    background:linear-gradient(135deg,rgba(255,255,255,.025),rgba(255,255,255,.008)) !important;
  }

  .modal.card-details-modal .same-series-nav .eyebrow{
    margin-bottom:3px !important;
    color:#a88a45 !important;
    font-size:8px !important;
    letter-spacing:1.25px !important;
  }

  .modal.card-details-modal .same-series-nav strong{
    max-width:360px !important;
    color:#e8e8eb !important;
    font-size:11px !important;
    letter-spacing:.15px !important;
  }

  .modal.card-details-modal .same-series-nav > div:first-child > span{
    margin-left:8px !important;
    color:#737680 !important;
    font-size:8px !important;
  }

  .modal.card-details-modal .same-series-actions{
    display:flex !important;
    gap:7px !important;
    flex:0 0 auto !important;
  }

  .modal.card-details-modal .same-series-actions .btn-ghost{
    min-height:34px !important;
    padding:7px 11px !important;
    border-color:rgba(255,255,255,.09) !important;
    border-radius:9px !important;
    background:rgba(255,255,255,.018) !important;
    color:#b7b9c0 !important;
    font-size:10px !important;
    font-weight:650 !important;
  }

  .modal.card-details-modal .same-series-actions .btn-ghost:hover:not(:disabled),
  .modal.card-details-modal .same-series-actions .btn-ghost:focus-visible:not(:disabled){
    border-color:rgba(227,179,65,.45) !important;
    background:rgba(227,179,65,.065) !important;
    color:#f0d991 !important;
  }

  .modal.card-details-modal .same-series-actions .btn-ghost:disabled{
    opacity:.32 !important;
  }

  /* Recommendation area becomes a proper storefront/gallery section. */
  .modal.card-details-modal .related-cards-section{
    position:relative !important;
    margin-top:30px !important;
    padding:22px 0 7px !important;
    border-top:1px solid rgba(255,255,255,.065) !important;
  }

  .modal.card-details-modal .related-cards-head{
    display:flex !important;
    align-items:flex-end !important;
    justify-content:space-between !important;
    gap:14px !important;
    margin-bottom:15px !important;
  }

  .modal.card-details-modal .related-cards-head .eyebrow{
    margin-bottom:4px !important;
    color:#9d8242 !important;
    font-size:8px !important;
    letter-spacing:1.45px !important;
  }

  .modal.card-details-modal .related-cards-head h3{
    margin:0 !important;
    color:#f0f0f2 !important;
    font-size:22px !important;
    line-height:1 !important;
    letter-spacing:.1px !important;
  }

  .modal.card-details-modal .related-cards-grid{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:13px !important;
  }

  .modal.card-details-modal .related-card{
    position:relative !important;
    min-width:0 !important;
    overflow:hidden !important;
    border:1px solid rgba(255,255,255,.07) !important;
    border-radius:13px !important;
    background:linear-gradient(180deg,rgba(255,255,255,.022),rgba(255,255,255,.010)) !important;
    box-shadow:0 10px 24px rgba(0,0,0,.14) !important;
    transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease !important;
  }

  .modal.card-details-modal .related-card:hover,
  .modal.card-details-modal .related-card:focus-visible{
    transform:translateY(-3px) !important;
    border-color:rgba(227,179,65,.40) !important;
    background:linear-gradient(180deg,rgba(227,179,65,.035),rgba(255,255,255,.012)) !important;
    box-shadow:0 15px 32px rgba(0,0,0,.22),0 0 0 1px rgba(227,179,65,.04) !important;
    outline:none !important;
  }

  .modal.card-details-modal .related-card-image-wrap{
    aspect-ratio:5/6.5 !important;
    overflow:hidden !important;
    border-bottom:1px solid rgba(255,255,255,.055) !important;
    background:#0c0e12 !important;
  }

  .modal.card-details-modal .related-card-image-wrap img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    transition:transform .20s ease,filter .20s ease !important;
  }

  .modal.card-details-modal .related-card:hover .related-card-image-wrap img,
  .modal.card-details-modal .related-card:focus-visible .related-card-image-wrap img{
    transform:scale(1.018) !important;
    filter:saturate(1.03) contrast(1.02) !important;
  }

  .modal.card-details-modal .related-card-info{
    padding:10px 11px 11px !important;
  }

  .modal.card-details-modal .related-card-name{
    min-height:30px !important;
    color:#e8e8eb !important;
    font-family:'Barlow Condensed','Inter',sans-serif !important;
    font-size:13px !important;
    font-weight:800 !important;
    line-height:1.12 !important;
    letter-spacing:.05px !important;
    text-transform:none !important;
  }

  .modal.card-details-modal .related-card-code{
    margin-top:5px !important;
    color:#d3af55 !important;
    font-size:8.5px !important;
    letter-spacing:.15px !important;
  }

  .modal.card-details-modal .related-card-meta{
    gap:4px !important;
    margin-top:7px !important;
  }

  .modal.card-details-modal .related-card-meta span{
    max-width:100% !important;
    padding:3px 6px !important;
    border:1px solid rgba(255,255,255,.075) !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.025) !important;
    color:#888c95 !important;
    font-size:7.5px !important;
    font-weight:650 !important;
  }

  /* Sold pages should make the replacement-shopping intent obvious without red. */
  .modal.card-details-modal .sold-alternatives-section{
    margin-top:32px !important;
    padding:20px 18px 16px !important;
    border:1px solid rgba(227,179,65,.15) !important;
    border-radius:15px !important;
    background:linear-gradient(135deg,rgba(227,179,65,.045),rgba(255,255,255,.008)) !important;
  }

  .modal.card-details-modal .sold-alternatives-section .related-cards-head .eyebrow{
    color:#d5ad4b !important;
  }

  .modal.card-details-modal .sold-alternatives-section .related-cards-head h3{
    color:#f3e3b1 !important;
  }
}


/* =========================================================
   V109 — COMPACT RELATED-CARD RECOMMENDATIONS
   Desktop only. Keep related cards secondary to the main listing.
   ========================================================= */
@media (min-width:981px){
  .modal.card-details-modal .related-cards-section{
    margin-top:24px !important;
    padding-top:18px !important;
  }

  .modal.card-details-modal .related-cards-head{
    margin-bottom:10px !important;
  }

  .modal.card-details-modal .related-cards-head h3{
    font-size:19px !important;
  }

  .modal.card-details-modal .related-cards-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:10px !important;
  }

  .modal.card-details-modal .related-card{
    border-radius:11px !important;
    box-shadow:0 7px 18px rgba(0,0,0,.12) !important;
  }

  .modal.card-details-modal .related-card:hover,
  .modal.card-details-modal .related-card:focus-visible{
    transform:translateY(-2px) !important;
    box-shadow:0 11px 24px rgba(0,0,0,.18),0 0 0 1px rgba(227,179,65,.035) !important;
  }

  .modal.card-details-modal .related-card-image-wrap{
    height:clamp(185px,16vw,245px) !important;
    aspect-ratio:auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:6px !important;
    background:#0b0d11 !important;
  }

  .modal.card-details-modal .related-card-image-wrap img{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
  }

  .modal.card-details-modal .related-card-info{
    padding:8px 9px 9px !important;
  }

  .modal.card-details-modal .related-card-name{
    min-height:27px !important;
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    overflow:hidden !important;
    font-size:12px !important;
    line-height:1.10 !important;
  }

  .modal.card-details-modal .related-card-code{
    margin-top:4px !important;
    font-size:8px !important;
  }

  .modal.card-details-modal .related-card-meta{
    margin-top:5px !important;
    gap:3px !important;
    max-height:22px !important;
    overflow:hidden !important;
  }

  .modal.card-details-modal .related-card-meta span{
    padding:2px 5px !important;
    font-size:7px !important;
  }

  .modal.card-details-modal .sold-alternatives-section{
    margin-top:26px !important;
    padding:16px 15px 14px !important;
  }
}

@media (min-width:981px) and (max-width:1180px){
  .modal.card-details-modal .related-cards-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}