.elite-shelf{display:grid;grid-template-columns:240px 1fr;align-items:center;gap:28px;background:#f0eee6;border:1px solid #e1ddd0;border-radius:16px;padding:24px;margin-top:24px}.elite-shelf>img{width:100%;height:170px;object-fit:contain;mix-blend-mode:multiply}.elite-shelf .eyebrow{color:#8b8167;font-size:9px}.elite-shelf h2{font-size:23px}.elite-shelf p{font-size:13px;margin:10px 0 18px;color:#7c7d6e}.elite-shelf-bottom{display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap}.elite-shelf-bottom>span{font-size:9px;letter-spacing:.6px;color:#8a816b}.elite-shelf .primary{font-size:12px;padding:11px 15px}.elite-modal{width:920px;max-width:calc(100vw - 24px);text-align:center;background:#faf9f2;padding:32px}.elite-modal>.eyebrow{font-size:10px;padding:0 22px}.elite-modal h2{font-size:28px}.elite-modal>p{font-size:13px;margin-top:10px}.elite-product{display:block;width:370px;max-width:100%;height:245px;object-fit:contain;margin:18px auto;mix-blend-mode:multiply}.elite-contents{display:flex;gap:28px;justify-content:center;font-size:13px}.elite-modal .elite-note{font-size:11px;color:#8c897a;line-height:1.6;max-width:640px;margin:18px auto}.elite-promo{display:flex;gap:22px;align-items:center;justify-content:center;text-align:left;padding:20px;margin:22px 0;background:#eeecdf;border-radius:12px}.elite-promo>button{background:none;padding:0;flex:none}.elite-promo img{display:block;width:95px;height:auto;border-radius:5px;box-shadow:0 5px 12px #3a403922}.elite-promo h3{font-size:17px}.elite-promo p{font-size:12px;margin:7px 0}.elite-promo .text-btn{font-size:11px}.elite-promo .eyebrow{font-size:8px}.elite-booster-grid{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:10px}.elite-booster{background:none;padding:8px 0;border-radius:8px;border:1px solid transparent}.elite-booster:not(:disabled):hover{background:#eceedd;border-color:#ced2b9}.elite-booster img{display:block;width:100%;height:128px;object-fit:contain;filter:drop-shadow(0 5px 4px #1b33251c)}.elite-booster strong{display:block;font-size:11px;margin-top:10px}.elite-booster span{display:block;font-size:9px;color:#8d927c;margin-top:5px}.elite-booster:disabled{opacity:.6}.elite-booster.opened img{filter:grayscale(.65);opacity:.45}.elite-booster.opened strong{color:#859777}
@media(max-width:800px){.elite-shelf{grid-template-columns:165px 1fr;gap:20px;padding:20px}.elite-booster-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.elite-booster img{height:115px}.elite-modal{padding:30px 20px}}
@media(max-width:550px){.elite-shelf{grid-template-columns:1fr;gap:14px}.elite-shelf>img{height:150px}.elite-shelf h2{font-size:21px}.elite-shelf p{font-size:12px}.elite-modal h2{font-size:22px}.elite-modal>.eyebrow{font-size:8px}.elite-contents{gap:10px;font-size:11px;flex-wrap:wrap}.elite-booster-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.elite-promo{gap:14px;padding:14px}.elite-promo img{width:77px}.elite-promo h3{font-size:15px}.elite-promo p{font-size:11px}.elite-modal .dialog-actions{flex-wrap:wrap}}
.box-library{margin-top:32px}.box-library .section-heading p{font-size:12px;margin-top:6px}.box-library-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.box-product{padding:20px 16px;background:#f4f2e9;border:1px solid #e2e1d5;border-radius:13px;display:flex;flex-direction:column;align-items:flex-start}.box-product>img{width:100%;height:140px;object-fit:contain;mix-blend-mode:multiply;margin-bottom:18px}.box-product .eyebrow{font-size:8px;letter-spacing:1px;color:#9a8866}.box-product h3{font-size:15px;line-height:1.4;min-height:42px}.box-product p{font-size:11px;margin:9px 0 18px}.box-product .secondary{margin-top:auto;width:100%;font-size:11px;padding:10px 8px;justify-content:center}.open-ten-btn{margin-left:12px}.last-batch-btn{display:block;margin:15px auto 0;font-size:11px}.batch-modal{width:1100px;max-width:calc(100vw - 24px);padding:32px;background:#fafbf5;text-align:center}.batch-modal>.eyebrow{padding:0 24px}.batch-modal h2{font-size:28px}.batch-sealed{width:820px}.batch-sealed>p{margin:12px 0}.batch-modal .elite-note{font-size:11px;color:#8a927f;margin:20px 0 0}.ten-pack-line{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:5px;margin:40px 0}.ten-pack-line img{width:100%;height:175px;object-fit:contain;filter:drop-shadow(0 5px 5px #17352325);transform:translateY(calc(mod(var(--pack-index),2)*8px))}.batch-stats{display:flex;justify-content:center;gap:28px;margin:22px 0 15px}.batch-stats span{font-size:11px;color:#84917e}.batch-stats strong{display:block;font-size:24px;color:#365b42;margin-bottom:4px}.batch-hint{font-size:12px;margin-bottom:18px}.batch-results{max-height:52vh;overflow-y:auto;padding:0 12px 10px;text-align:left;overscroll-behavior:contain}.batch-pack{padding:18px 0 24px;border-top:1px solid #e3e8dc}.batch-pack-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}.batch-pack-heading h3{font-size:14px}.batch-pack-heading .text-btn{font-size:11px}.batch-card-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px 10px}.batch-card{background:none;padding:0;text-align:left;min-width:0}.batch-card img{width:100%;height:auto;display:block;border-radius:7px;box-shadow:0 3px 8px #14352815}.batch-card strong{display:block;font-size:11px;margin:8px 0 4px;line-height:1.3}.batch-card>span{font-size:9px;color:#85916c;display:block}.batch-card:hover img{outline:2px solid #85a47a;outline-offset:2px}
@media(max-width:1050px){.box-library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.box-product>img{height:150px}.box-product h3{min-height:0}.pack-stage:has(.pack-choice:nth-child(5)){flex-wrap:wrap}.pack-stage:has(.pack-choice:nth-child(5)) .pack-choice{flex-basis:26%}}
@media(max-width:550px){.box-library-grid{gap:10px}.box-product{padding:15px 11px}.box-product>img{height:95px}.box-product h3{font-size:13px;min-height:36px}.box-product p{font-size:10px}.box-product .eyebrow{font-size:7px}.box-product .secondary{font-size:10px}.open-ten-btn{display:block;margin:12px auto 0;min-width:235px;font-size:12px}.batch-modal{padding:30px 15px 22px}.batch-modal h2{font-size:22px}.batch-stats{gap:20px}.batch-stats span{font-size:10px}.batch-stats strong{font-size:21px}.batch-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.batch-results{padding:0 3px 8px;max-height:48vh}.batch-modal .dialog-actions{flex-wrap:wrap}.ten-pack-line{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin:24px 0}.ten-pack-line img{height:112px}.batch-hint{font-size:11px}}

.batch-modal:not(.batch-sealed) .batch-results{max-height:clamp(180px,calc(100dvh - 375px),52vh)}

/* An opened box: the dialog stops scrolling and becomes head / one scrolling body / foot, so there is exactly one scrollbar. */
.elite-modal.elite-open[open]{display:flex;flex-direction:column;padding:0;overflow:hidden;max-height:min(92dvh,860px)}
.elite-open .elite-head{flex:none;padding:26px 32px 18px;border-bottom:1px solid #e6e3d4;background:#faf9f2}
.elite-open .elite-head h2{font-size:24px;margin:8px 0 0}
.elite-open .elite-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:20px 32px 8px}
.elite-open .elite-foot{flex:none;padding:16px 32px calc(18px + env(safe-area-inset-bottom));border-top:1px solid #e6e3d4;background:#faf9f2}
.elite-open .elite-foot .dialog-actions{margin:0;justify-content:center}
.elite-open .elite-foot .cost-line{margin:0 0 10px}
.elite-open .elite-note{margin:16px auto 4px}
.elite-open .elite-promo{margin:0 0 18px}
.elite-progress{display:flex;flex-direction:column;align-items:center;gap:7px;margin-top:14px}
.elite-progress-track{width:min(360px,100%);height:6px;border-radius:99px;background:#e4e2d3;overflow:hidden}
.elite-progress-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#3f7d5a,#6aa77e);transition:width .35s ease}
.elite-progress span{font-size:11px;color:#8c897a;letter-spacing:.02em}
.elite-progress strong{color:var(--ink)}
/* Denser tiles so a 36-booster box reads as one board instead of an endless column. */
.elite-open .elite-booster-grid{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:6px}
.elite-open .elite-booster{padding:8px 4px 9px}
.elite-open .elite-booster img{height:88px}
.elite-open .elite-booster strong{font-size:10px;margin-top:7px}
.elite-open .elite-booster-state{font-size:8px;margin-top:3px}
.elite-booster-art{position:relative;display:block}
.elite-tick{position:absolute;right:50%;bottom:4px;translate:50% 0;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#3f7d5a;color:#fff;box-shadow:0 2px 6px #1b332533}
.elite-booster.next{background:#eef2e3;border-color:#c3d2b4}
.elite-booster.next .elite-booster-state{color:#3f7d5a;font-weight:600}
@media(max-width:550px){
 .elite-open .elite-head{padding:20px 16px 14px}
 .elite-open .elite-head h2{font-size:19px}
 .elite-open .elite-body{padding:16px 16px 4px}
 .elite-open .elite-foot{padding:12px 16px calc(14px + env(safe-area-inset-bottom))}
 .elite-open .elite-booster-grid{grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:5px}
 .elite-open .elite-booster img{height:70px}
 .elite-open .elite-foot .dialog-actions .primary{width:100%}
}