/* Christmas landing page: builds on ../shop/assets/shop.css */
h1,h2,h3,h4,blockquote,figcaption,.lead{text-wrap:balance}
p,li{text-wrap:pretty}

/* header: phone menu button (hidden on desktop) */
.hd-menu{display:none;flex:none;width:44px;height:44px;align-items:center;justify-content:center;border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:0;-webkit-tap-highlight-color:transparent}
.hd-menu svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round}
.hd-menu .mx,.hd-menu[aria-expanded="true"] .mo{display:none}
.hd-menu[aria-expanded="true"] .mx{display:inline}
.hd-nav a[aria-current]{border-color:var(--red)}

/* short family photo on top */
.xm-hero .hero-ph{aspect-ratio:auto;height:clamp(360px,34vw,480px);max-height:none}
.xm-hero .hero-ph img{object-position:50% 45%}
.xm-hero h1{font-size:clamp(34px,3.2vw,48px);max-width:none}
.xm-line{margin:18px 0 24px;max-width:44ch;font-size:16px;color:var(--ink)}
.xm-go{white-space:nowrap}

/* the sets */
.xm-sets{padding-top:clamp(28px,4vw,56px);scroll-margin-top:calc(var(--hd,62px) + 6px)}
.xm-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 18px;padding-bottom:14px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.xm-head .shop-t{white-space:normal}
.xm-head p{margin:0;color:var(--soft);font-size:14px}
.xm-head2{margin-top:64px}
.xm-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:36px 18px}
.xm .add{white-space:nowrap}
.xm .price,.xm .sz{white-space:nowrap}

/* the bag: one checkout for the whole family */
.bag{position:fixed;z-index:50;right:var(--pad);bottom:20px;display:flex;align-items:center;gap:12px;width:min(470px,calc(100vw - 2*var(--pad)));padding:10px 10px 10px 18px;background:#fff;border:1.5px solid var(--ink);border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.16)}
.bag.bump{animation:bagbump .45s ease}
@keyframes bagbump{40%{transform:translateY(-5px)}}
.bag-sum{flex:1;min-width:0;display:grid;grid-template-columns:auto 1fr;column-gap:10px;text-align:left;border:0;background:none;padding:4px 0;-webkit-tap-highlight-color:transparent}
.bag-sum b{font-size:14px;white-space:nowrap}
.bag-sum span{font-size:14px;font-weight:600;color:var(--red);white-space:nowrap}
.bag-sum small{grid-column:1/-1;font-size:12px;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bag-go{flex:none;white-space:nowrap}
body.has-bag .ft-wrap{padding-bottom:140px}

@media (max-width:1100px){
  .xm-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:860px){
  .hd{position:sticky}
  .hd-menu{display:inline-flex}
  .hd-cart{margin-left:auto}
  .hd.menu-on .hd-nav{display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;margin:0;padding:6px var(--pad) 14px;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 14px 24px rgba(0,0,0,.08);font-size:14px}
  .hd.menu-on .hd-nav a{padding:14px 0;border-bottom:1px solid var(--line)}
  .hd.menu-on .hd-nav a:last-child{border-bottom:0}
  .xm-hero .hero-ph{aspect-ratio:16/10;height:auto;max-height:none}
  .xm-hero .hero-ph img{object-position:50% 40%}
  .xm-hero h1{max-width:16ch;margin-bottom:0}
  .xm-line{margin:12px 0 18px;font-size:15px}
}

/* phone: one set per row, photo beside it, sizes big enough for a thumb */
@media (max-width:760px){
  .xm-head{margin-bottom:6px;padding-bottom:10px}
  .xm-head .shop-t{display:block;font-size:24px}
  .xm-head p{font-size:13px}
  .xm-head2{margin-top:40px}
  .xm-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .xm-grid .card{display:grid;grid-template-columns:minmax(0,40%) minmax(0,1fr);gap:14px;padding:16px 0;border-bottom:1px solid var(--line);align-items:start}
  .xm-grid .card:last-child{border-bottom:0}
  .xm-grid .info{padding-top:0;gap:5px}
  .xm-grid .nm{font-size:15px}
  .xm-grid .sz{min-width:44px;height:40px;font-size:12.5px}
  .xm-grid .add{min-height:46px;width:100%;margin-top:6px}
  .xm-go{width:100%}
  .bag{left:0;right:0;bottom:0;width:auto;border-radius:16px 16px 0 0;border-width:1.5px 0 0;padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom))}
  .bag-go{min-height:48px;padding:0 20px}
}
@media (max-width:420px){
  .xm-hero h1{font-size:32px}
  .xm-grid .card{grid-template-columns:minmax(0,36%) minmax(0,1fr);gap:12px}
  .xm-grid .sz{min-width:42px;padding:0 6px}
  .bag-sum{column-gap:8px}
}
@media (prefers-reduced-motion:reduce){
  .bag.bump{animation:none}
}
@media (max-width:699px){br.d{display:none}}