@import url('./pixel/01-base.css');
@import url('./pixel/02-collection.css');
@import url('./pixel/03-size-a.css');
@import url('./pixel/04-sections.css');
@import url('./pixel/05-story-footer.css');

.cs-demo-size-form button{grid-column:1;grid-row:2;width:121px;height:30px;min-height:30px;padding:0;background:#090909;color:#fff;border:0;font-size:9px}
.cs-demo-size-result{grid-column:4;grid-row:1/3;min-height:0;padding:8px 12px;display:flex;gap:10px;align-items:center;justify-content:center;border:0;border-left:1px solid #cbc6bf;background:transparent;text-align:left}
.cs-demo-size-result small{display:none}.cs-demo-size-result strong{font-size:18px}.cs-demo-size-result span{margin:0;font-size:10px}

/* Desktop canvas: the 935 px reference is scaled to the full browser width. */
@media (min-width:761px){
  html{width:100%;min-width:0;overflow-x:hidden;background:#fff}
  body.home{width:935px;min-width:935px;max-width:935px;margin:0;overflow-x:hidden;background:#fff;zoom:var(--cs-page-scale,1)}
  body.home:before{width:935px;max-width:935px}
  body.home .cs-site-header{left:0;right:auto;width:935px;max-width:935px}
  body.home .cs-header-inner{width:935px;max-width:935px;padding:0 36px;grid-template-columns:230px 170px minmax(0,1fr) 88px;grid-template-rows:61px;column-gap:18px}
  body.home .cs-nav{grid-row:1;align-self:center;height:auto;line-height:1.2}
  body.home .cs-nav:not(.cs-nav-info){grid-column:1;justify-self:start;gap:30px}
  body.home .cs-nav-info{grid-column:3;display:flex!important;justify-self:end;justify-content:flex-end;gap:25px;width:auto}
  body.home .cs-nav-info a{display:block!important}
  body.home .cs-logo{grid-column:2;grid-row:1;align-self:center;justify-self:center}
  body.home .cs-header-actions{grid-column:4;grid-row:1;align-self:center;justify-self:end;gap:16px}
  .cs-demo-home{width:935px;max-width:935px;margin:0}
  .cs-site-footer{width:935px;max-width:935px}
  .cs-site-footer .cs-wrap{width:935px;max-width:935px;margin:0}
  .cs-demo-editorial-overlay{left:22px;top:10px;right:auto;bottom:auto;max-width:340px}
  .cs-demo-editorial-overlay strong{font-size:29px;line-height:1;white-space:nowrap}
  .cs-demo-product-card{overflow:hidden}
  .cs-demo-product-meta{overflow:hidden}
  .cs-demo-product-meta h3{max-height:28px;line-height:1.25;overflow:hidden}
  .cs-demo-product-row{min-height:18px}
  .cs-demo-size-list{white-space:nowrap;overflow:hidden}
}

@media (max-width:760px){
  body.home{zoom:1!important;width:auto;min-width:0;max-width:none}
  body.home:before{height:24px;font-size:7px}
  .cs-site-header{display:none!important}
  .cs-demo-home{max-width:none}
  .cs-demo-hero{height:62vw;min-height:240px}
  .cs-demo-hero-copy{padding-top:20vw}
  .cs-demo-hero-copy h1:before{font-size:11vw}
  .cs-demo-section.cs-demo-categories{height:116px;padding:3px 5px}
  .cs-demo-category-grid{height:113px;overflow-x:auto;display:flex}
  .cs-demo-category-card{flex:0 0 92px;height:113px}
  .cs-demo-category-image{height:113px}
  .cs-demo-section.cs-demo-collection{height:auto;padding:5px}
  .cs-demo-collection-layout{height:auto;display:block}
  .cs-demo-editorial-card{height:75vw;min-height:280px}
  .cs-demo-product-grid{height:auto;grid-template-columns:1fr 1fr;grid-auto-rows:160px;margin-top:5px}
  .cs-demo-size-section{height:auto;min-height:260px;padding:20px 16px;grid-template-columns:1fr;gap:14px}
  .cs-demo-size-form{grid-template-columns:repeat(3,1fr);grid-template-rows:55px 40px 70px;gap:8px}
  .cs-demo-size-result{grid-column:1/4;grid-row:3;border-left:0;border-top:1px solid #ccc}
  .cs-demo-section.cs-demo-capsules{height:auto;padding:12px 5px}
  .cs-demo-capsule-grid{height:auto;grid-template-columns:1fr 1fr}
  .cs-demo-capsule-card{height:42vw}
  .cs-demo-benefits{height:auto;padding:18px 16px}
  .cs-demo-benefit-grid{height:auto;grid-template-columns:1fr 1fr}
  .cs-demo-story{height:auto;min-height:0;grid-template-columns:1fr}
  .cs-demo-story-media{height:52vw}
  .cs-demo-story-copy{padding:24px 20px}
  .cs-demo-manifesto{height:auto;min-height:250px;padding:30px 20px;grid-template-columns:1fr}
  .cs-demo-manifesto p{grid-column:1;padding:20px 0}
  .cs-demo-newsletter{height:auto;padding:24px 20px;grid-template-columns:1fr;gap:15px}
  .cs-site-footer,.cs-site-footer .cs-wrap{height:auto}
  .cs-footer-grid{grid-template-columns:1fr 1fr}
}