/* Approved mobile VM treatment adapted to the web shell and desktop grid. */
body.vm-web-host .vm-abovefold{min-height:0;padding:24px 0 18px;gap:0;background:var(--vm-color)}
body.vm-web-host .vm-intro{width:100%;max-width:1240px;padding:0 24px 16px}
body.vm-web-host .vm-intro h1{font-size:38px!important;line-height:42px!important}
body.vm-web-host .vm-intro .eyebrow{font-size:10px!important}
body.vm-web-host .vm-machine-carousel{width:min(1240px,100%);padding:24px 44px 0;margin:0 auto}
body.vm-web-host .vm-machines{width:100%;max-width:none;overflow:hidden}
body.vm-web-host .vm-machine{flex-basis:29%;width:29%;padding:0 8px}
body.vm-web-host .vm .vm-machine-art{--machine-art-height:clamp(190px,27vh,260px);max-width:100%;margin-bottom:8px}
body.vm-web-host .vm-machine:not([aria-pressed=true]) .vm-machine-label{opacity:.65}
body.vm-web-host .vm-machine.is-edge{opacity:.35}
body.vm-web-host .vm-machine-indicators{display:flex;position:absolute;left:50%;transform:translateX(-50%);top:0;z-index:2}
body.vm-web-host .vm-machine-indicators button{width:26px;height:24px;padding:0;display:grid;place-items:center}
body.vm-web-host .vm-machine-indicators span{width:6px;height:6px;border-radius:50%;background:var(--vm-ink);opacity:.3}
body.vm-web-host .vm-machine-indicators [aria-pressed=true] span{width:18px;border-radius:4px;opacity:1}
body.vm-web-host .vm-machine-carousel .vm-carousel-controls{display:flex;padding:0 8px}
body.vm-web-host .vm .vm-carousel-controls button{width:44px;height:44px;border:1px solid #1a1a1a30;border-radius:50%;background:#ffffff99;color:#1a1a1a}
body.vm-web-host .vm-entry{width:min(1140px,100%);max-width:none;margin:0 auto;padding:16px 24px 0;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:center;justify-items:center;text-align:center}
body.vm-web-host .vm-preview{width:100%;min-width:0;margin:0}
body.vm-web-host .vm-preview-heading h2{font-size:16px!important;line-height:22px!important}
body.vm-web-host .vm-ticker .vm-preview-card{width:230px;min-width:230px;flex-basis:230px;height:100px}
body.vm-web-host .app-pull-purchase{width:min(460px,100%);padding:14px;align-self:center}
body.vm-web-host .app-pull-purchase .vm-start{width:100%;font:700 16px/22px DM,sans-serif}
body.vm-web-host .vm-learn{grid-column:1/-1;justify-self:center;margin-top:-8px;min-height:38px}
body.vm-web-host .vm-lineup{padding:0 max(24px,calc((100% - 1240px)/2)) 72px;background:var(--palette-white);scroll-margin-top:76px}
body.vm-web-host .vm-info-tabs{position:sticky;top:var(--vm-nav-offset,72px);z-index:25;width:100%;max-width:none;justify-content:flex-start;gap:28px;margin:0;padding:0;background:var(--palette-white)}
body.vm-web-host .vm-info-tabs button{font:600 14px/20px DM,sans-serif;min-height:52px;padding:16px 0;border-radius:0}
body.vm-web-host #vm-info-panel{padding:0;max-width:none}
body.vm-web-host .vm-detail-section{padding:32px 0 40px;border-bottom:1px solid var(--palette-line);scroll-margin-top:calc(var(--vm-nav-offset,72px) + 68px)}
body.vm-web-host .section-title{margin-bottom:16px}
body.vm-web-host .section-title h2{font:700 24px/30px DM,sans-serif;text-transform:none;letter-spacing:0}
body.vm-web-host .app-inventory-tools{width:520px;max-width:100%;margin:0 0 12px}
body.vm-web-host .app-inventory-select select{font-size:13px!important}
body.vm-web-host .vm .app-inventory-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
body.vm-web-host .vm .app-inventory-grid .bc-art{height:210px!important;min-height:210px!important}
body.vm-web-host .vm .app-inventory-grid .bc-image{height:178px!important;max-height:178px!important}
body.vm-web-host .vm .app-inventory-grid .bc-name{font-size:20px!important;line-height:22px!important}
body.vm-web-host .vm .app-inventory-grid .bc-sub{font-size:14px!important;line-height:18px!important;height:36px;min-height:36px}
body.vm-web-host .vm .app-inventory-grid .app-bottle-identity{height:93px}
body.vm-web-host .vm .app-inventory-grid .bc-meta{font-size:10px!important}
body.vm-web-host .vm .app-inventory-grid .bc-price{font-size:24px!important;line-height:28px!important}
body.vm-web-host .vm .app-inventory-grid .wishlist-price-label{font-size:11px!important;line-height:15px!important}
body.vm-web-host .vm-inventory-rarity.bc-badge{font-size:10px!important}
@media(max-width:1000px) and (min-width:701px){
 body.vm-web-host .vm .vm-machine-art{--machine-art-height:220px}
 body.vm-web-host .vm .app-inventory-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Keep the stacked purchase controls in reach on shorter laptop screens. */
@media(min-width:701px) and (max-height:800px){
 body.vm-web-host .vm-abovefold{padding-top:12px;padding-bottom:10px}
 body.vm-web-host .vm-machine-carousel{padding-top:20px}
 body.vm-web-host .vm .vm-machine-art{--machine-art-height:160px}
 body.vm-web-host .vm-entry{padding-top:8px;gap:8px}
 body.vm-web-host .vm-ticker .vm-preview-card{height:88px;min-height:88px}
 body.vm-web-host .app-pull-purchase{padding:10px}
}
@media(max-width:700px){
 body.vm-web-host .vm-abovefold{min-height:calc(100svh - var(--vm-nav-offset,116px) - 64px);padding:10px 0 8px}
 body.vm-web-host .vm-intro{padding:0 16px 4px}
 body.vm-web-host .vm-intro h1{font-size:24px!important;line-height:26px!important}
 body.vm-web-host .vm-machine-carousel{padding:24px 0 0}
 body.vm-web-host .vm-machine{flex-basis:50%;width:50%;padding:0 4px}
 body.vm-web-host .vm .vm-machine-art{--machine-art-height:clamp(115px,calc(100svh - 632px),240px);max-width:none;margin-bottom:4px}
 body.vm-web-host .vm-machine:not([aria-pressed=true]) .vm-machine-label{opacity:0}
 body.vm-web-host .vm-machine-carousel .vm-carousel-controls{display:none}
 body.vm-web-host .vm-entry{display:flex;flex-direction:column;gap:0;padding:8px 16px 0;width:100%;flex:1;justify-content:flex-end}
 body.vm-web-host .vm-preview,body.vm-web-host .app-pull-purchase{width:100%}
 body.vm-web-host .vm-preview{margin-bottom:8px}
 body.vm-web-host .vm-preview-heading h2{font-size:14px!important}
 body.vm-web-host .vm-ticker .vm-preview-card{width:218px;min-width:218px;flex-basis:218px;height:88px;min-height:88px}
 body.vm-web-host .vm-ticker .vm-preview-card>img{height:80px!important;max-height:80px!important}
 body.vm-web-host .app-pull-purchase{padding:10px}
 body.vm-web-host .app-pull-values dd{font-size:19px}
 body.vm-web-host .vm-learn{margin-top:4px;min-height:38px}
 body.vm-web-host .vm-lineup{padding:0 20px 100px}
 body.vm-web-host .vm-info-tabs{gap:20px}
 body.vm-web-host .vm-info-tabs button{font-size:13px;padding:12px 0;min-height:44px}
 body.vm-web-host #vm-info-panel{padding:20px 0}
 body.vm-web-host .section-title h2{font-size:20px;line-height:25px}
 body.vm-web-host .app-inventory-tools{width:100%;margin:16px 0 12px}
 body.vm-web-host .app-inventory-select select{font-size:12px!important}
 body.vm-web-host .vm .app-inventory-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 body.vm-web-host .vm .app-inventory-grid .bc-art{height:164px!important;min-height:164px!important}
 body.vm-web-host .vm .app-inventory-grid .bc-image{height:132px!important;max-height:132px!important}
 body.vm-web-host .vm .app-inventory-grid .bc-name{font-size:17px!important;line-height:19px!important}
 body.vm-web-host .vm .app-inventory-grid .bc-sub{font-size:12px!important;line-height:16px!important;height:32px;min-height:32px}
 body.vm-web-host .vm .app-inventory-grid .app-bottle-identity{height:83px}
 body.vm-web-host .vm .app-inventory-grid .bc-meta{font-size:9px!important}
 body.vm-web-host .vm .app-inventory-grid .bc-price{font-size:20px!important;line-height:24px!important}
 body.vm-web-host .vm .app-inventory-grid .wishlist-price-label{font-size:10px!important;line-height:14px!important}
 body.vm-web-host .vm-inventory-rarity.bc-badge{font-size:9px!important}
}

body.vm-web-host .vm-machine-label b{text-transform:none!important}
/* Override legacy web type roles without changing the app's approved sizes. */
body.vm-web-host .vm .vm-intro h1{font:900 38px/42px 'HN Cond Black',sans-serif!important;letter-spacing:0!important}
body.vm-web-host .vm .vm-intro .eyebrow{font:400 10px/14px PT,monospace!important;letter-spacing:1px!important}
body.vm-web-host .vm .vm-ticker .vm-preview-copy h3{font:600 14px/17px DM,sans-serif!important;text-transform:none!important;max-height:34px;letter-spacing:0!important}
body.vm-web-host .vm .vm-ticker .vm-preview-card>img{width:72px!important;height:92px!important;max-height:92px!important;object-fit:cover}
body.vm-web-host .vm .vm-ticker .vm-preview-card>img:is([src$=".png"],[src$=".webp"]){object-fit:contain}
@media(max-width:700px){
 body.vm-web-host .vm .vm-intro h1{font-size:24px!important;line-height:26px!important}
 body.vm-web-host .vm .vm-intro .eyebrow{font-size:9px!important}
 body.vm-web-host .vm .vm-ticker .vm-preview-card>img{height:80px!important;max-height:80px!important}
}
@media(min-width:701px) and (max-height:800px){
 body.vm-web-host .vm .vm-ticker .vm-preview-card>img{height:80px!important;max-height:80px!important}
}

/* Desktop review: match the app's 350ms theme fade; mobile remains unchanged. */
@media(min-width:701px){
 body.vm-web-host .vm-abovefold{transition:background-color .35s ease}
 body.vm-web-host .vm-intro{margin-inline:auto;text-align:center;align-self:center}
 body.vm-web-host .vm-intro .eyebrow,body.vm-web-host .vm-intro h1{width:100%;text-align:center}
 body.vm-web-host .vm .vm-intro .vm-tagline{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;max-width:620px;margin:10px auto 0;font:400 14px/20px DM,sans-serif;color:var(--vm-muted);text-align:center;text-transform:none;letter-spacing:0}
 body.vm-web-host .vm .vm-preview .vm-inventory-rarity,
 body.vm-web-host .vm .vm-activity .hist-type,
 body.vm-web-host .vm .vm-pull-history .hist-type{border-radius:4px!important}
 body.vm-web-host .vm-pull-history .hist-type{margin-top:4px}
}
@media(min-width:701px) and (max-height:800px){
 body.vm-web-host .vm .vm-machine-art{--machine-art-height:125px}
 body.vm-web-host .vm-intro{padding-bottom:8px}
 body.vm-web-host .vm .vm-intro .vm-tagline{margin-top:6px;font-size:13px;line-height:18px}
}
@media(prefers-reduced-motion:reduce){
 body.vm-web-host .vm-abovefold{transition:none}
}