/* #484: new Lotte pages only. Standard DX Best paired-photo card anatomy;
   no existing page, photo, contributor binding or shared runtime is changed. */
body.ht-lotte-wafer { --bg:#0a1416; --ink:#d6e2e0; --ink-dim:#8a9896; --ink-faint:#6f8585; --teal-bright:#8ed4cf; --bronze-bright:#c9a968; --line:#244346; margin:0; background:#0a1416; color:var(--ink); font-family:Arial,sans-serif; line-height:1.6; }
.ht-lotte-wafer * { box-sizing:border-box; }
.ht-lotte-wafer .page-head { padding:24px 16px 8px; margin:auto; }
.ht-lotte-wafer .page-title { font-family:Cinzel,serif; font-size:clamp(24px,4vw,40px); line-height:1.25; margin:8px 0 14px; }
.ht-lotte-wafer .page-title em { font-family:'Cormorant Garamond',serif; color:#a1c6cb; }
.ht-lotte-wafer .lotte-edition { display:block; font-size:.72em; margin-top:8px; }
.ht-lotte-wafer .page-meta { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; }
.ht-lotte-wafer .meta-badge { border:1px solid var(--line); padding:5px 9px; }
.ht-lotte-wafer .relics-back { display:inline-flex; align-items:center; min-height:44px; color:#a1c6cb; text-decoration:none; }
.ht-lotte-wafer .set-desc { margin:12px auto; padding:0 16px; }
.ht-lotte-wafer .set-desc-head { text-align:center; color:var(--bronze-bright); letter-spacing:.15em; }
.ht-lotte-wafer .sticker-head { margin:20px auto 10px; padding:0 16px; }
.ht-lotte-wafer .sticker-head h2 { font-family:Cinzel,serif; color:var(--bronze-bright); border-bottom:1px solid var(--line); padding-bottom:8px; }
.ht-lotte-wafer .sets-wrap { padding:0 16px 70px; margin:auto; }
.ht-lotte-wafer .lotte-hub-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:12px; padding:16px; }
.ht-lotte-wafer .lotte-hub-card { display:flex; flex-direction:column; gap:10px; padding:20px; color:var(--ink); text-decoration:none; border:1px solid var(--line); background:rgba(10,25,28,.8); }
.ht-lotte-wafer .lotte-hub-card strong { font-family:Cinzel,serif; color:var(--bronze-bright); }
@layer ht-catalog-mobile-targets {
  html body.ht-lotte-wafer { --lotte-ui-scale:1; }
  html body.ht-lotte-wafer .page-head { text-align:center!important; max-width:none!important; }
  html body.ht-lotte-wafer :is(.banner-wrap,.banner-img,.banner-nav) { width:100%!important; max-width:100%!important; }
  html body.ht-lotte-wafer .page-head .eyebrow { display:block!important; text-align:center!important; }
  html body.ht-lotte-wafer .page-head .eyebrow::before, html body.ht-lotte-wafer .page-head .eyebrow::after { display:none!important; }
  html body.ht-lotte-wafer :is(.sn,.jp,.meta-badge,.eyebrow,.sh-sub) { font-family:Arial,sans-serif!important; font-size:calc(13px * var(--lotte-ui-scale))!important; white-space:normal!important; }
  html body.ht-lotte-wafer :is(.snm,.set-desc .b,.set-desc p,.lotte-hub-card) { font-size:calc(16px * var(--lotte-ui-scale))!important; line-height:1.5!important; }
  html body.ht-lotte-wafer .sets-wrap > .sets-grid { display:grid!important; grid-template-columns:minmax(0,1fr)!important; gap:16px!important; align-items:start!important; }
  html body.ht-lotte-wafer .sets-grid > .set-tile { display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; grid-auto-rows:min-content!important; gap:12px!important; width:100%!important; min-width:0!important; max-width:none!important; height:auto!important; padding:14px 14px 58px!important; border:1px solid #35565a!important; background:linear-gradient(145deg,#112529,#071114)!important; overflow:visible!important; }
  html body.ht-lotte-wafer .set-tile > :is(.ph-f,.ph-b) { position:relative!important; grid-row:1!important; width:100%!important; min-width:0!important; max-width:none!important; height:auto!important; aspect-ratio:1!important; margin:0!important; border:1px solid #35565a!important; background:#050d10!important; background-size:contain!important; background-repeat:no-repeat!important; background-position:center!important; display:flex!important; align-items:center!important; justify-content:center!important; }
  html body.ht-lotte-wafer .set-tile > .ph-f { grid-column:1!important; }
  html body.ht-lotte-wafer .set-tile > .ph-b { grid-column:2!important; }
  html body.ht-lotte-wafer .set-tile > :is(.sn,.snm) { grid-column:1/-1!important; width:100%!important; margin:0!important; text-align:left!important; white-space:normal!important; overflow-wrap:anywhere!important; }
  html body.ht-lotte-wafer .set-tile .snm { color:#edf8f6!important; }
  html body.ht-lotte-wafer .set-tile :is(.ph-f,.ph-b).has-img:has(>.ht-credit) { overflow:visible!important; margin-bottom:calc(52px * var(--lotte-ui-scale))!important; }
  html body.ht-lotte-wafer .set-tile .ht-credit { top:calc(100% + 4px)!important; bottom:auto!important; display:flex!important; align-items:center!important; justify-content:center!important; min-height:calc(44px * var(--lotte-ui-scale))!important; height:auto!important; max-height:none!important; width:100%!important; font-family:Arial,sans-serif!important; font-size:calc(13px * var(--lotte-ui-scale))!important; line-height:1.3!important; white-space:normal!important; overflow:visible!important; overflow-wrap:anywhere!important; text-overflow:clip!important; background:transparent!important; }
  html body.ht-lotte-wafer :is(.ht-addphoto,.htc-orow button,.ht-set-search,.set-desc button,.relics-back) { font-family:Arial,sans-serif!important; min-height:calc(44px * var(--lotte-ui-scale))!important; min-width:44px!important; font-size:calc(16px * var(--lotte-ui-scale))!important; line-height:1.3!important; }
  html body.ht-lotte-wafer .ht-addphoto { position:static!important; transform:none!important; width:auto!important; max-width:100%!important; padding:5px!important; white-space:normal!important; }
  @media(min-width:600px) { html body.ht-lotte-wafer { --lotte-ui-scale:1.176471; } html body.ht-lotte-wafer .sets-wrap>.sets-grid { grid-template-columns:repeat(2,minmax(0,1fr))!important; } }
  @media(min-width:1000px) { html body.ht-lotte-wafer .sets-wrap>.sets-grid { grid-template-columns:repeat(4,minmax(0,1fr))!important; } }
  @media(min-width:1300px) { html body.ht-lotte-wafer { --lotte-ui-scale:1.25; } }
  @media(min-width:1600px) { html body.ht-lotte-wafer .sets-wrap>.sets-grid { grid-template-columns:repeat(6,minmax(0,1fr))!important; } }
}