/* Deck & Dazzle UI shell. Geometry and colour measured from the Mobbin "Urban Outfitters web" capture
   (see reference/TOKENS.md). All px values are CSS px at a 1440 viewport (Mobbin image px x 0.75). */
:root{
  --lime:#cfff00; --green:#3a8702; --green-text:#396d1b; --black:#222; --ink:#000; --muted:#5f5f5f;
  --grey-bg:#f5f5f5; --line:#ddd; --line-2:#e0e0e0; --input-line:#707070; --sale:#d93502; --stock-blue:#17548f;
  --tile-bg:#364446; --tile-ink:#dbe38a; --studio:#dadada; --overlay:rgba(245,245,245,.8);
  --pad:56px; --gap:19px;
  --fs-xs:9.4px; --fs-sm:10.3px; --fs:11.25px; --fs-md:13.1px; --fs-lg:15px; --fs-h:16.9px; --fs-xl:20.6px; --fs-xxl:24px;
  --ls:.47px;
  --sans:'Arimo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --logo:'Oswald','Arial Narrow',sans-serif;
  --mono:'Space Mono','Courier New',monospace;
  --ann-h:33px; --util-h:37.5px; --main-h:58px; --nav-h:58px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--ink);font:400 var(--fs)/1.45 var(--sans);letter-spacing:var(--ls)}
a{color:inherit;text-decoration:none}
button{font:inherit;letter-spacing:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,p{margin:0}
img,svg{display:block}
.wrap{padding-left:var(--pad);padding-right:var(--pad)}
.u{text-decoration:underline}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- placeholders (every image is a labelled slot) ---------- */
.ph{position:relative;background:var(--studio);background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.35) 0 1px,transparent 1px 14px);
  color:#555;overflow:hidden;display:block;width:100%}
.ph--white{background-color:#f1f1f1}
.ph--dark{background-color:#6d7778;color:#eee}
.ph--lilac{background-color:#d6b5d9}
.ph__t{position:absolute;left:8px;top:8px;right:8px;font:400 10px/1.35 var(--mono);letter-spacing:0;color:inherit;background:rgba(255,255,255,.72);padding:3px 5px;width:max-content;max-width:calc(100% - 16px);pointer-events:none}
.ph--dark .ph__t{background:rgba(0,0,0,.45);color:#fff}
.ph--c .ph__t{left:50%;top:50%;transform:translate(-50%,-50%);text-align:center}

/* ---------- announcement ---------- */
.ann{height:var(--ann-h);background:var(--lime);position:relative;display:flex;align-items:center;justify-content:center;font-size:var(--fs);text-transform:uppercase;gap:19px;padding:0 56px}
.ann b{font-weight:700}
.ann a{text-decoration:underline}
.ann--green{background:var(--green);color:#fff;text-transform:none;font-weight:700}
.ann__arrow{position:absolute;top:50%;transform:translateY(-50%);width:20px;height:20px;display:grid;place-items:center}
.ann__arrow--l{left:24px}.ann__arrow--r{right:24px}
.ann__arrow svg{width:7px;height:12px}

/* ---------- utility row ---------- */
.util{height:var(--util-h);background:var(--grey-bg);display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);font-size:var(--fs)}
.util__l{color:var(--muted)}
.util__l a{text-decoration:underline}
.util__r{display:flex;align-items:center;gap:19px}
.util__r a,.util__r button{display:flex;align-items:center;gap:5px;font-size:var(--fs)}
.ico{width:15px;height:15px;stroke:#000;fill:none;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- main bar ---------- */
.hdr{position:sticky;top:0;z-index:50;background:#fff}
.mainbar{height:var(--main-h);display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);border-bottom:1px solid var(--line-2);background:#fff}
.mainbar__l{display:none}
.logo{font:600 30px/1 var(--logo);letter-spacing:1.6px;text-transform:uppercase;white-space:nowrap;color:#111;transform:scaleY(1.04);transform-origin:left center}
.mainbar__r{display:flex;align-items:center;gap:19px}
.search{position:relative;width:195px;height:42px;border:1px solid var(--input-line);background:#fff;display:flex;align-items:center}
.search input{border:0;outline:0;background:none;width:100%;height:100%;padding:0 34px 0 15px;font:400 var(--fs) var(--sans);letter-spacing:var(--ls);color:#000}
.search input::placeholder{color:#000;opacity:1}
.search__btn{position:absolute;right:0;top:0;width:34px;height:100%;display:grid;place-items:center}
.search__btn .ico{width:13px;height:13px}
.search.is-open{width:355px;border-color:#222}
.search.is-open .search__btn{background:var(--black)}
.search.is-open .search__btn .ico{stroke:#fff}
.search__clear{position:absolute;right:42px;font-size:var(--fs-sm);text-decoration:underline;display:none;color:var(--ink)}
.search.is-open.has-text .search__clear{display:block}
.iconbtn{position:relative;width:19px;height:19px;display:grid;place-items:center}
.iconbtn .ico{width:17px;height:17px;stroke-width:1.1}
.badge{position:absolute;right:-7px;top:-6px;min-width:11px;height:11px;border-radius:6px;background:#000;color:#fff;font:700 7px/11px var(--sans);text-align:center;padding:0 2px;display:none}
.badge.on{display:block}
.burger{display:none}

/* ---------- nav ---------- */
.nav{height:var(--nav-h);border-bottom:1px solid var(--line-2);background:#fff;padding:0 var(--pad);position:relative}
.nav>ul{display:flex;gap:26px;height:100%}
.nav>ul>li{display:flex}
.nav>ul>li>a{display:flex;align-items:center;height:100%;font-size:var(--fs);position:relative;white-space:nowrap}
.nav>ul>li>a.sale{color:var(--sale)}
.nav>ul>li:hover>a,.nav>ul>li.is-active>a{color:var(--ink)}
.nav>ul>li>a::after{content:"";position:absolute;left:0;right:0;bottom:12px;height:1px;background:transparent}
.nav>ul>li:hover>a::after,.nav>ul>li.is-active>a::after{background:#707070}
.nav>ul>li.is-active>a::after{background:#000}

.mega{position:absolute;left:var(--pad);top:100%;width:750px;background:#fff;border:1px solid var(--line);border-top:0;z-index:60;display:none;box-shadow:0 6px 14px rgba(0,0,0,.06)}
.nav li:hover>.mega,.nav li.mega-open>.mega{display:block}
.mega__body{display:flex}
.mega__lists{display:flex;gap:0;padding:19px 21px 22px;width:490px;border-right:1px solid var(--line)}
.mega__col{width:50%}
.mega__col h3{font-size:var(--fs);font-weight:700;margin-bottom:16px;letter-spacing:.2px}
.mega__col li{height:30px;font-size:var(--fs);display:flex;align-items:flex-start}
.mega__col li a:hover{text-decoration:underline}
.mega__col li.sale a{color:var(--sale)}
.mega__promo{padding:12px 18px 0 18px;width:260px}
.mega__promo .ph{aspect-ratio:1/1}
.mega__promo a.shop{display:inline-block;margin-top:14px;font-size:var(--fs-md);text-decoration:underline}
.mega__strip{background:#000;color:#fff;text-align:center;height:34px;line-height:34px;font-size:var(--fs-sm)}
.mega__strip a{text-decoration:underline;margin-left:4px}

/* ---------- search dropdown ---------- */
.overlay{position:fixed;inset:0;background:var(--overlay);z-index:40;display:none}
.overlay.on{display:block}
.sdrop{position:absolute;right:calc(var(--pad) + 76px);top:calc(var(--main-h) - 4px);width:355px;background:#fff;border:1px solid var(--line);box-shadow:0 6px 16px rgba(0,0,0,.1);z-index:70;padding:14px 0 14px;display:none}
.sdrop.on{display:block}
.sdrop h4{margin:0 0 10px;font-size:var(--fs-sm);font-weight:700;padding:0 14px}
.sdrop ul.sug li a{display:block;padding:9px 14px;font-size:var(--fs-sm)}
.sdrop ul.sug li a:hover{background:var(--grey-bg)}
.sdrop .chips{display:flex;flex-wrap:wrap;gap:9px;padding:0 14px 13px}
.sdrop .chips a{display:flex;align-items:center;gap:6px;background:var(--grey-bg);padding:5px 10px;font-size:var(--fs-sm);height:22px}
.sdrop .chips .ico{width:9px;height:9px}
.sdrop .res{display:flex;gap:7px;padding:0 14px}
.sdrop .res a{width:102px;font-size:var(--fs-sm);line-height:1.3}
.sdrop .res .ph{aspect-ratio:2/3;margin-bottom:6px}

/* ---------- mini bag popover ---------- */
.minibag{position:absolute;right:var(--pad);top:calc(var(--main-h) - 18px);width:300px;background:#fff;border:1px solid var(--line);box-shadow:0 6px 16px rgba(0,0,0,.12);z-index:75;display:none;padding:12px 14px 14px}
.minibag.on{display:block}
.minibag h4{font-size:var(--fs-sm);font-weight:400;margin-bottom:8px}
.minibag__row{display:flex;gap:12px;margin-bottom:11px;font-size:var(--fs-sm);line-height:1.5}
.minibag__row .ph{width:96px;aspect-ratio:2/3;flex:none}
.minibag .btn-green{width:100%;height:45px;font-size:var(--fs-md)}

/* ---------- buttons ---------- */
.btn{display:flex;align-items:center;justify-content:center;height:40px;padding:0 20px;font-weight:700;font-size:var(--fs-md);letter-spacing:.5px;text-align:center;border:1px solid transparent;width:100%}
.btn-black{background:var(--black);color:#fff;border-color:var(--black)}
.btn-green{background:var(--green);color:#fff;border-color:var(--green)}
.btn-outline{background:#fff;color:#000;border:1px solid #222}
.btn-sm{height:32px;font-size:var(--fs-sm);width:auto;padding:0 22px}

/* ---------- listing ---------- */
.crumbs{text-align:center;padding:33px 0 0;font-size:var(--fs-sm);color:var(--muted)}
.crumbs a:hover{text-decoration:underline}
.crumbs span.sep{margin:0 8px;color:#999}
.crumbs b{font-weight:700;color:#000}
.lhead{display:flex;align-items:center;justify-content:space-between;padding-top:38px;padding-bottom:21px;border-bottom:1px solid var(--line-2);min-height:80px}
.lhead--search{flex-direction:column;align-items:center;gap:22px;padding-top:31px;border-bottom:0}
.lhead__l{display:flex;align-items:center;gap:12px}
.lhead h1{font:400 var(--fs-h)/1.2 var(--sans);letter-spacing:.5px}
.lhead .count{font-size:var(--fs-sm);color:var(--muted)}
.lhead .cat{display:flex;align-items:center;gap:6px;font-size:var(--fs);padding-left:12px;border-left:1px solid var(--line);position:relative}
.cat__menu{position:absolute;left:0;top:26px;width:170px;background:#fff;border:1px solid var(--line);z-index:30;padding:9px 12px;display:none;box-shadow:0 4px 12px rgba(0,0,0,.08)}
.cat__menu.on{display:block}
.cat__menu a{display:block;font-size:var(--fs-sm);padding:6px 0}
.chev{width:9px;height:6px;stroke:#000;fill:none;stroke-width:1.2}
.lhead__r{display:flex;align-items:center;gap:16px}
.sort{display:flex;align-items:center;gap:12px;font-size:var(--fs-sm)}
.sort select{height:41px;width:190px;border:1px solid #636363;border-radius:2px;background:#fff;padding:0 10px;font:400 var(--fs-md) var(--sans);letter-spacing:var(--ls);color:#000}
.pager{display:flex;align-items:center;gap:14px;font-size:var(--fs-sm);color:var(--muted)}
.pager .ico{width:8px;height:12px;stroke:#999}
.pager .on .ico{stroke:#000}
.frow{display:flex;align-items:center;gap:36px;height:56px;font-size:var(--fs);position:relative}
.frow button{display:flex;align-items:center;gap:7px;font-size:var(--fs)}
.fdd{position:absolute;top:52px;background:#fff;border:1px solid var(--line);width:206px;z-index:30;padding:11px;display:none;box-shadow:0 4px 12px rgba(0,0,0,.08)}
.fdd.on{display:block}
.fdd a,.fdd button{width:100%;text-align:left;display:flex;align-items:center;gap:8px;border:1px solid var(--line);padding:6px 9px;margin-bottom:6px;font-size:var(--fs-sm)}
.fdd .sw{width:8px;height:8px;border-radius:50%;border:1px solid #bbb}
.chips2{display:flex;gap:11px;align-items:center;padding-bottom:20px}
.chip{display:flex;align-items:center;gap:7px;height:38px;padding:0 11px;border:1px solid #181818;font-size:var(--fs-sm)}
.chip .x{width:7px;height:7px;stroke:#000;stroke-width:1.2}
.clearall{font-size:var(--fs-sm);text-decoration:underline;color:var(--muted)}
.catbars{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);padding-bottom:var(--gap)}
.catbars a{display:flex;align-items:center;justify-content:center;height:36px;background:var(--black);color:#fff;font-size:var(--fs-sm)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 var(--gap)}
.card{position:relative;padding-bottom:24px}
.card__img{position:relative;display:block}
.card__img .ph{aspect-ratio:2/3}
.card .tag{position:absolute;left:0;top:0;background:#fff;height:28px;padding:0 10px;display:flex;align-items:center;font-size:var(--fs-xs);color:#000;z-index:2}
.card .heart{position:absolute;right:11px;top:11px;width:20px;height:20px;border-radius:50%;background:#fff;display:none;place-items:center;z-index:2}
.card .heart .ico{width:11px;height:11px}
.card:hover .heart{display:grid}
.card .quick{position:absolute;left:0;right:0;bottom:0;height:34px;background:rgba(245,245,245,.92);display:none;align-items:center;justify-content:center;font-size:var(--fs-sm);color:#555;z-index:2}
.card:hover .quick{display:flex}
.card__t{margin-top:15px;font-size:var(--fs-sm);line-height:1.4}
.card__p{margin-top:2px;font-size:var(--fs-sm)}
.card__p .sale{color:var(--sale)}
.card__p s{color:#000;margin-left:3px}
.card__sw{display:flex;align-items:center;gap:7px;margin-top:6px;font-size:var(--fs-xs);color:var(--muted)}
.card__sw i{width:19px;height:19px;border-radius:50%;border:1px solid #fff;box-shadow:0 0 0 1px #d6d6d6;display:block}
.card__sw i.on{box-shadow:0 0 0 1px #222}
.card__sw span{margin-left:3px}
.tray{padding:36px 0 40px}
.tray h2{font:400 var(--fs) var(--sans);padding-bottom:9px;border-bottom:1px solid var(--line-2);margin-bottom:12px}
.tray__row{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gap)}
.tray__row .ph{aspect-ratio:2/3}
.tray__row p{font-size:var(--fs-xs);margin-top:7px}

/* ---------- slide-in panel + modal ---------- */
.panel{position:fixed;top:0;right:0;bottom:0;width:538px;max-width:100%;background:#fff;z-index:90;transform:translateX(100%);transition:transform .25s;display:flex;flex-direction:column}
.panel.on{transform:none}
.panel__h{height:62px;font-size:17px;display:flex;align-items:center;justify-content:space-between;padding:0 21px;font-size:var(--fs-lg)}
.panel__h .x{width:15px;height:15px;stroke:#000;stroke-width:1.3}
.panel__list{flex:1;overflow:auto;border-top:1px solid var(--line-2)}
.panel__list li{display:flex;align-items:center;justify-content:space-between;height:49px;padding:0 21px;border-bottom:1px solid var(--line-2);font-size:var(--fs-md)}
.panel__list li em{font-style:normal;font-size:8px;background:var(--grey-bg);border-radius:8px;min-width:14px;text-align:center;margin-right:14px;line-height:14px}
.panel__f{display:flex;gap:19px;padding:19px 19px;border-top:1px solid var(--line-2)}
.panel__f .btn{height:45px;font-size:var(--fs)}
.modal{position:fixed;inset:0;display:none;place-items:center;background:var(--overlay);z-index:95}
.modal.on{display:grid}
.modal__box{background:#fff;width:min(630px,94vw);padding:30px 30px 34px;position:relative}
.modal__box .close{position:absolute;right:14px;top:14px;width:26px;height:26px;border:1px solid #222;border-radius:50%;display:grid;place-items:center}
.modal__box .close .ico{width:9px;height:9px}
.qs{display:flex;gap:30px}
.qs .ph{width:240px;flex:none;aspect-ratio:2/3}

/* ---------- product page ---------- */
.pdp{display:grid;grid-template-columns:731px 1fr;column-gap:75px;padding-top:41px;padding-bottom:70px}
.pdp__crumbs{display:flex;align-items:center;justify-content:center;position:relative;padding:33px 0 0;font-size:var(--fs-sm);color:var(--muted)}
.pdp__crumbs .back{position:absolute;left:var(--pad);display:flex;align-items:center;gap:7px}
.pdp__crumbs .back .ico{width:6px;height:9px}
.gal{display:grid;grid-template-columns:1fr 1fr;gap:9px;align-content:start;position:relative}
.gal .ph{aspect-ratio:2/3}
.gal .fav{position:absolute;right:11px;top:11px;z-index:3;background:#fff;border-radius:12px;height:23px;padding:0 10px;font-size:var(--fs-xs);display:flex;align-items:center;gap:5px}
.gal .fav .ico{width:10px;height:10px}
.buy h1{font:400 22.5px/1.3 var(--sans);letter-spacing:.5px}
.stars{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);margin-top:5px;color:var(--muted)}
.stars .st{letter-spacing:1px;color:#000;font-size:9px}
.stars a{text-decoration:underline}
.buy .price{margin-top:12px;font-size:var(--fs-xl);color:var(--sale)}
.buy .price s{color:#000;font-size:var(--fs);margin-left:5px}
.buy .toprated{margin-top:7px;font-size:var(--fs-sm);color:var(--muted);padding-bottom:12px;border-bottom:1px solid var(--line-2)}
.buy .toprated+.lbl{margin-top:14px}
.buy .lbl{margin-top:20px;font-size:var(--fs-sm)}
.buy .lbl b{font-weight:700}
.swr{display:flex;gap:8px;margin-top:8px}
.swr i{width:20px;height:20px;border-radius:50%;border:1px solid #fff;box-shadow:0 0 0 1px #d6d6d6;display:block;cursor:pointer}
.swr i.on{box-shadow:0 0 0 1px #222}
.sizes{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.sizes button{border:1px solid #cfcfcf;height:33px;padding:0 11px;font-size:var(--fs-sm)}
.sizes button.on{border-color:#222;box-shadow:inset 0 0 0 1px #222}
.buy .stock{margin-top:15px;font-size:var(--fs-sm);color:var(--stock-blue)}
.buy .btn{margin-top:20px;height:45px;font-size:var(--fs-lg)}
.buy .pay{margin-top:11px;font-size:var(--fs-xs);color:var(--muted)}
.buy .pay b{color:#000}
.buy .wish{margin-top:9px;font-size:var(--fs-xs);color:var(--muted);text-decoration:underline;display:block}
.info{margin-top:22px}
.info__row{display:flex;gap:11px;margin-bottom:13px;font-size:var(--fs-xs);line-height:1.6;color:var(--muted)}
.info__row .ico{width:13px;height:13px;margin-top:2px}
.info__row b{color:#000}
.info__row a{color:var(--stock-blue)}
.acc{border-top:1px solid var(--line-2);margin-top:14px}
.acc button{display:flex;justify-content:space-between;align-items:center;width:100%;height:40px;font-size:var(--fs-sm);border-bottom:1px solid var(--line-2)}
.acc .pl{width:8px;height:8px;stroke:#444}

/* ---------- home ---------- */
.tiles4{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin:0}
.tiles4 a{height:41px;background:var(--tile-bg);color:var(--tile-ink);display:flex;align-items:center;justify-content:center;font:400 12px/1 var(--mono);letter-spacing:1.8px;text-transform:uppercase;background-image:linear-gradient(115deg,transparent 60%,rgba(255,255,255,.07) 61%,transparent 62%)}
.home-hero{margin:50px 15px 0;position:relative}
.home-hero .ph{aspect-ratio:2.53/1}
.shopbtn{position:absolute;left:50%;bottom:11px;transform:translateX(-50%);background:#fff;color:#000;height:30px;padding:0 21px;display:flex;align-items:center;font-size:var(--fs-xs);letter-spacing:.5px;text-transform:uppercase;white-space:nowrap}
.hsec{position:relative;margin-top:7px}
.hsec2{display:grid;grid-template-columns:1fr 1fr;gap:17px;margin:0}
.hbig{display:grid;grid-template-columns:953px 1fr;gap:0;margin-top:20px}
.hsec .ph,.hbig .ph,.hsec2 .ph{width:100%}
.hbox{position:relative}
.sech{font:400 var(--fs-h) var(--sans);margin:48px 0 14px;letter-spacing:.5px}
.cats5{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.cats5 .ph{aspect-ratio:4/5}
.cats5 p{margin-top:9px;text-align:center;font-size:var(--fs-sm);text-decoration:underline}
.seo{padding:26px 0;border-top:1px solid var(--line-2);margin-top:40px;font-size:var(--fs-xs);color:var(--muted);line-height:1.7}
.seo h3{font-size:var(--fs-sm);font-weight:400;color:#000;margin-bottom:6px}

/* ---------- footer ---------- */
.signup{background:var(--grey-bg);padding:26px var(--pad) 0}
.signup__in{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:1031px;margin-left:0}
.signup h3{font-size:var(--fs-md);font-weight:400;margin-bottom:12px}
.signup p{font-size:var(--fs-xs);color:var(--muted);line-height:1.7;max-width:260px}
.signup label{display:block;font-size:var(--fs-sm);font-weight:700;margin-bottom:5px}
.signup .row{display:flex;gap:11px}
.signup input{height:41px;border:1px solid var(--input-line);background:#fff;flex:1;padding:0 12px;font:inherit}
.signup .row .btn{width:90px;height:41px;flex:none}
.signup small{display:block;margin:28px 0 0;padding-bottom:22px;font-size:var(--fs-xs);color:var(--muted)}
.fcols{background:var(--grey-bg);border-top:1px solid var(--line-2);padding:24px var(--pad) 0;display:grid;grid-template-columns:repeat(4,200px);gap:19px;justify-content:start;padding-left:calc(var(--pad) + 98px)}
.fcols h4{font-size:var(--fs-sm);font-weight:700;margin-bottom:11px;letter-spacing:.5px}
.fcols li{font-size:var(--fs-sm);margin-bottom:8px}
.fcols li a:hover{text-decoration:underline}
.fcols .ic li{display:flex;align-items:center;gap:7px;font-weight:700;margin-bottom:14px}
.fcols .ic .ico{width:14px;height:14px}
.fapp{background:var(--grey-bg);padding:30px var(--pad) 8px;display:flex;justify-content:space-between;align-items:center}
.fapp .stores{display:flex;gap:11px}
.fapp .sbtn{border:1px solid #222;border-radius:5px;height:35px;padding:0 13px;display:flex;align-items:center;font-size:var(--fs-xs);font-weight:700;background:#fff}
.fapp .soc{display:flex;gap:17px}
.fapp .soc span{width:15px;height:15px;border:1.5px solid #000;border-radius:4px;display:block}
.legal{background:var(--grey-bg);padding:14px var(--pad) 20px;display:flex;justify-content:space-between;font-size:var(--fs-xs)}
.legal ul{display:flex;gap:0}
.legal li{padding:0 8px;border-left:1px solid #bbb;line-height:1}
.legal li:first-child{padding-left:0;border:0}
.legal span{color:var(--muted)}

/* ---------- bag / account ---------- */
.bag{display:grid;grid-template-columns:1fr 378px;gap:77px;padding-top:40px;padding-bottom:70px}
.bag h1,.acct h1,.pageh{font:400 var(--fs-h) var(--sans);letter-spacing:.5px;padding-bottom:17px;border-bottom:1px solid var(--line-2)}
.bag__th{display:grid;grid-template-columns:1fr 110px 150px 120px;padding:27px 0 16px;font-size:var(--fs-sm);font-weight:700;text-align:right}
.bag__th span:first-child{text-align:left;padding-left:159px}.bag__th span:nth-child(3){text-align:center}
.bag__row{display:grid;grid-template-columns:141px 1fr 110px 150px 120px;gap:0;padding:14px 0 28px;border-top:1px solid var(--line-2);font-size:var(--fs-sm);line-height:1.7;align-items:start}
.bag__row .ph{aspect-ratio:2/3}
.bag__row .meta{padding-left:18px}
.bag__row .meta b{font-weight:700}
.bag__row .meta u{color:var(--muted)}
.bag__row .num{text-align:right}
.bag__row .num .sale{color:var(--sale)}
.bag__row .num s{display:block;font-weight:700;color:#000}
.bag__row .qty{display:flex;justify-content:center}
.bag__row .qty select{height:44px;width:58px;border:1px solid #636363;border-radius:2px;font:inherit;background:#fff;padding:0 4px}
.bag__row .ph{grid-row:1/span 3}
.bag__row .acts{grid-column:3/6;grid-row:2;align-self:end;text-align:right;color:var(--muted);margin-top:0;font-size:var(--fs-sm)}
.bag__row .acts a{text-decoration:underline;margin:0 3px}
.bag__row .note{grid-column:2/3;grid-row:2;align-self:end;font-size:var(--fs-sm);margin:0 0 0 18px}
.bag__row .note .blue{color:var(--stock-blue);display:block;margin-bottom:6px}
.bag__row .note .red{color:var(--sale);display:block}
.bag__row .note .green{color:var(--green-text);display:block}
.sum{border:1px solid var(--line-2);padding:0;font-size:var(--fs-xs);align-self:start}
.sum__h{display:flex;justify-content:space-between;font-size:var(--fs-md);padding:0 0 12px;margin-top:0}
.sum__box{padding:16px 19px 0;border:1px solid var(--line-2)}
.sum dl{margin:0;display:grid;grid-template-columns:1fr auto;row-gap:8px;font-size:var(--fs)}
.sum dt,.sum dd{margin:0}.sum dd{text-align:right}
.sum .tot dt,.sum .tot dd{font-weight:700}
.sum .btn{margin-top:14px;height:45px;font-size:var(--fs-lg)}
.sum .pp{margin-top:7px;border-color:#222;font-style:italic;font-weight:700;color:#003087}
.sum .promo{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line-2);margin-top:20px;padding:17px 0 19px;font-size:var(--fs)}
.sum .sum__pay{margin-top:14px;font-size:var(--fs-xs);color:var(--muted)}
.acct{display:grid;grid-template-columns:225px 1fr;gap:0;padding-top:20px;padding-bottom:80px}
.acct nav{font-size:var(--fs)}
.acct nav b{display:block;font-weight:700;margin:6px 0 4px;font-size:var(--fs-sm)}
.acct nav a{display:block;padding:7px 0 8px}
.acct nav a.on{text-decoration:underline}
.acct nav a.sub{padding-left:15px}
.acct nav a.sub.on{font-weight:700;text-decoration:none}
.acct h1{margin-top:2px}
.orow{display:grid;grid-template-columns:467px 112px;gap:0;padding:20px 0 26px;border-bottom:1px solid var(--line-2);align-items:start}
.orow h3{font:400 var(--fs-lg) var(--sans);margin-bottom:12px}
.orow .m{font-size:var(--fs-sm);margin-bottom:6px}
.orow .m b{font-weight:700}
.orow .btn{width:354px;height:43px;font-size:var(--fs);margin-top:16px}
.orow .ph{aspect-ratio:2/3;width:112px;justify-self:start}
.otab{border:1px solid var(--line-2);font-size:var(--fs-sm)}
.otab__a{padding:24px 20px;color:var(--muted);line-height:1.5}
.otab__s{background:var(--grey-bg);padding:12px 20px;font-weight:700;color:#444;border-top:1px solid var(--line-2)}
.otab__r{display:grid;grid-template-columns:100px 1fr 130px 130px 130px;padding:11px 20px;align-items:start;border-top:1px solid var(--line-2);gap:0}
.otab__r .ph{aspect-ratio:2/3}
.track{border:1px solid var(--line-2);margin-top:17px;display:grid;grid-template-columns:1fr 380px;font-size:var(--fs-sm)}
.track__l{padding:34px 38px}
.track__r{padding:34px 38px 30px;border-left:1px solid var(--line-2)}
.track h2{font:400 var(--fs-lg) var(--sans);margin-bottom:11px}
.track .date{font:700 28px var(--sans);margin:18px 0 14px}
.prog{display:flex;justify-content:space-between;position:relative;margin:36px 38px 0;font-size:var(--fs-sm)}
.prog::after{content:"";position:absolute;left:45px;right:45px;bottom:7px;height:1px;background:#000}
.prog div{display:flex;flex-direction:column;align-items:center;gap:12px;width:90px;position:relative;z-index:1}
.prog i{width:15px;height:15px;border-radius:50%;border:1px solid #000;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath d='M4 7.5l2.3 2.3L11 5' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") center/cover;display:block}
.upd{padding:7px 0;border-bottom:1px dotted #ccc;line-height:1.55}
.upd b{font-weight:400;display:block}
.upd span{color:#555}
.wl{display:grid;grid-template-columns:repeat(4,1fr);gap:19px;margin-top:10px}
.wl .card{padding-bottom:12px}
.wl .btn{height:35px;font-size:var(--fs-sm);margin-top:12px}

/* ---------- mobile drawer ---------- */
.drawer{position:fixed;top:0;left:0;bottom:0;width:86%;max-width:360px;background:#fff;z-index:100;transform:translateX(-100%);transition:transform .25s;overflow:auto}
.drawer.on{transform:none}
.drawer__h{height:50px;display:flex;align-items:center;justify-content:space-between;padding:0 15px;border-bottom:1px solid var(--line-2)}
.drawer ul li a,.drawer ul li button{display:flex;justify-content:space-between;align-items:center;width:100%;height:48px;padding:0 15px;border-bottom:1px solid var(--line-2);font-size:var(--fs-md);text-align:left}
.drawer ul ul{display:none;background:var(--grey-bg)}
.drawer li.open>ul{display:block}
.drawer ul ul a{padding-left:28px;font-size:var(--fs)}
.drawer .sale{color:var(--sale)}
.drawer .u2{padding:15px;font-size:var(--fs);display:grid;gap:12px;background:var(--grey-bg)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  :root{--pad:15px;--gap:9px;--ann-h:30px;--util-h:0px;--main-h:50px;--fs:12px;--fs-sm:11.5px;--fs-xs:10.5px;--fs-md:14px;--fs-h:18px}
  .util,.nav{display:none}
  .burger{display:grid;place-items:center;width:26px;height:26px}
  .burger .ico{width:20px;height:20px}
  .mainbar{display:grid;grid-template-columns:1fr auto 1fr;padding:0 var(--pad);gap:0;border-bottom:1px solid var(--line-2)}
  .logo{font-size:26px;grid-column:2;transform:none;text-align:center}
  .mainbar__r{justify-content:flex-end;gap:15px;grid-column:3}
  .mainbar__r .search{display:none}
  .mainbar__l{grid-column:1;display:block}
  .ann{font-size:10px;padding:0 30px;gap:10px;text-align:center;line-height:1.2}
  .ann__arrow--l{left:6px}.ann__arrow--r{right:6px}
  .mobsearch{display:block;padding:9px var(--pad);border-bottom:1px solid var(--line-2)}
  .mobsearch .search{width:100%;display:flex}
  .lhead{flex-direction:column;align-items:stretch;gap:12px;padding-top:18px;padding-bottom:13px}
  .lhead__r{justify-content:space-between}
  .sort select{width:160px}
  .frow{gap:22px;overflow-x:auto;white-space:nowrap}
  .chips2{flex-wrap:wrap}
  .catbars{grid-template-columns:repeat(2,1fr)}
  .grid{grid-template-columns:repeat(2,1fr);column-gap:9px}
  .tray__row{grid-template-columns:repeat(2,1fr)}
  .card__sw i{width:16px;height:16px}
  .pdp{display:block;padding-top:15px}
  .gal{grid-template-columns:1fr;gap:9px;margin:0 calc(var(--pad) * -1)}
  .buy{padding-top:18px}
  .pdp__crumbs .back{left:var(--pad)}
  .tiles4{grid-template-columns:repeat(2,1fr);gap:9px;padding:0 var(--pad)}
  .home-hero{margin:15px 0 0}
  .home-hero .ph{aspect-ratio:3/4!important}
  .hsec2,.hbig{grid-template-columns:1fr}
  .hbig .ph{aspect-ratio:auto}
  .cats5{grid-template-columns:repeat(2,1fr)}
  .signup__in{grid-template-columns:1fr}
  .fcols{grid-template-columns:1fr 1fr;padding-left:var(--pad);gap:6px}
  .fapp{flex-direction:column;gap:18px;align-items:flex-start}
  .legal{flex-direction:column;gap:8px}
  .legal ul{flex-wrap:wrap;row-gap:6px}
  .bag{grid-template-columns:1fr;gap:20px}
  .bag__th{display:none}
  .bag__row{grid-template-columns:90px 1fr}
  .bag__row .ph{width:90px;grid-row:1/span 4}
  .bag__row .qty,.bag__row .num{grid-column:2;text-align:left;justify-content:flex-start}
  .bag__row .acts{grid-column:1/3;text-align:left}
  .acct{grid-template-columns:1fr}
  .acct nav{display:flex;gap:14px;overflow-x:auto;border-bottom:1px solid var(--line-2)}
  .acct nav b{display:none}
  .acct nav a{white-space:nowrap}
  .acct nav a.sub{padding-left:0}
  .orow{grid-template-columns:1fr 60px}.orow .btn{width:100%}
  .track{grid-template-columns:1fr}.track__r{border-left:0;border-top:1px solid var(--line-2)}
  .otab__r{grid-template-columns:60px 1fr 60px}
  .otab__r span:nth-child(n+4){display:none}
  .wl{grid-template-columns:repeat(2,1fr)}
  .sdrop{right:0;left:0;width:auto;top:calc(var(--ann-h) + var(--main-h) + 52px)}
  .minibag{right:0;left:0;width:auto;top:var(--main-h)}
  .panel{width:100%}
  .qs{flex-direction:column}.qs .ph{width:100%}
  .mega{display:none!important}
}
@media (min-width:901px){.mobsearch{display:none}}

/* ===== Christmas palette (Kenneth 2026-10-03: "change the colors into a more Christmasy color and vibe").
   Layout untouched; only colour tokens and a few literal colours are overridden here. ===== */
:root{
  --xmas-red:#c41e3a; --xmas-red-dk:#9e1830; --pine:#14382c; --pine-2:#1f5c3a; --gold:#e3c26f; --cream:#fbf7f0; --cream-2:#f4ede2;
  --lime:var(--xmas-red); --green:var(--pine-2); --green-text:var(--pine-2); --black:var(--pine); --ink:#1c1c1a;
  --grey-bg:var(--cream-2); --line:#e6ddd0; --line-2:#ebe3d6; --sale:var(--xmas-red); --stock-blue:var(--pine-2);
  --tile-bg:var(--pine); --tile-ink:var(--gold); --studio:#e9e2d6; --overlay:rgba(251,247,240,.85);
}
body{background:var(--cream)}
.ann{color:#fff}
.ann a{color:#fff}
.hdr,.mainbar,.nav,.search,.mega,.sdrop,.minibag,.cat__menu{background:var(--cream)}
.logo{color:var(--xmas-red)}
.nav>ul>li:hover>a::after{background:var(--gold)}
.nav>ul>li.is-active>a::after{background:var(--xmas-red)}
.mega__strip{background:var(--pine);color:var(--gold)}
.badge{background:var(--xmas-red)}
.btn-outline{background:transparent;color:var(--pine);border-color:var(--pine)}
.ico{stroke:var(--pine)}
.crumbs b{color:var(--pine)}

/* mega-menu hover previews */
.mega__col--wide{width:100%}
.mega__item{height:auto!important;margin-bottom:10px}
.mega__item a{display:flex;flex-direction:column;gap:2px}
.mega__item b{font-weight:700;font-size:var(--fs-md)}
.mega__item span{color:var(--muted);font-size:var(--fs-sm)}
.mega__item.is-on b,.mega__item a:hover b{color:var(--xmas-red);text-decoration:none}
.mega__item a:hover{text-decoration:none!important}
.mega__all{margin-top:6px}
.mega__all a{text-decoration:underline}
.mega__media{aspect-ratio:2/3;background:#efefef;overflow:hidden}
.mega__media .ph{aspect-ratio:2/3!important;height:100%}
.mega__pic{width:100%;height:100%;object-fit:cover;display:block}
.mega__cap{margin:10px 0 0;font-size:var(--fs)}
.mega__cap b{font-size:var(--fs-md)}
.mega__cap span{color:var(--muted)}
.card__pic{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;background:#efefef}
.lights-note{font-size:var(--fs);margin:6px 0 14px;color:var(--pine)}
.pair{margin:10px 0;font-size:var(--fs);padding:10px;background:var(--cream-2)}
.pair a{color:var(--xmas-red)}
.card__img{position:relative}
/* lit/unlit: card shows the tree unlit; hover switches its lights on */
.card__alt{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.card__img:hover .card__alt{opacity:1}
/* PDP hero: slow lit/unlit loop */
.pdp-fade{position:relative}
.pdp-fade img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover}
.pdp-fade img+img{position:absolute;inset:0;animation:litfade 6s ease-in-out infinite}
@keyframes litfade{0%,35%{opacity:0}50%,85%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.pdp-fade img+img{animation:none;opacity:1}}

/* ready-now images (2026-10-03): real images in the home slots + social strip */
.slotimg{display:block;width:100%;object-fit:cover;background:#efefef}
.social{padding:30px 0 6px}
.social h2{font:400 var(--fs) var(--sans);padding-bottom:9px;border-bottom:1px solid var(--line-2);margin-bottom:12px}
.social__row{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--gap)}
.social__row img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;background:#efefef}
@media (max-width:900px){
  .home-hero .slotimg{aspect-ratio:auto!important}
  .hbig .slotimg{aspect-ratio:auto!important}
  .social__row{grid-template-columns:repeat(3,1fr)}
}

/* ===== Christmas hero, Build Your Tree flow (2026-10-03). UO type, buttons and checkout step bar; Christmas tokens. ===== */
.btn-red{background:var(--xmas-red);color:#fff;border-color:var(--xmas-red)}
.btn-red:hover{background:var(--xmas-red-dk)}
.btn:disabled{opacity:.45;cursor:default}
:focus-visible{outline:2px solid var(--pine);outline-offset:2px}
/* header wordmark: Santa hat (pure SVG, absolute so the layout and baseline never move) */
.logo{position:relative;display:inline-block}
.logo__hatwrap{position:absolute;left:-.3em;top:-.66em;width:.95em;height:.87em;pointer-events:none;transform:rotate(-15deg);transform-origin:70% 90%}
.logo__hat{display:block;width:100%;height:100%;overflow:visible}
/* nav highlight */
.nav>ul>li.nav__build{align-self:center}
.nav>ul>li.nav__build>a.build{height:auto;line-height:1.2;background:var(--xmas-red);color:#fff;padding:6px 12px;border-radius:2px;font-weight:700}
.nav>ul>li.nav__build>a.build::after{display:none}
.nav>ul>li.nav__build:hover>a.build{background:var(--xmas-red-dk)}
.drawer__build a{display:block;background:var(--xmas-red);color:#fff;font-weight:700;padding:12px 16px}
/* hero */
.xhero{display:grid;grid-template-columns:5fr 7fr;margin:0;background:var(--cream-2)}
.xhero__img{height:560px;overflow:hidden;order:2}
.xhero__img img{width:100%;height:100%;object-fit:cover;object-position:50% 28%}
.xhero__txt{order:1;display:flex;flex-direction:column;justify-content:center;padding:48px var(--pad)}
.xhero__eyebrow{font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:1.4px;color:var(--pine-2);font-weight:700;margin-bottom:14px}
.xhero h1{font:600 64px/1 var(--logo);text-transform:uppercase;letter-spacing:1px;color:var(--xmas-red)}
.xhero__p{font-size:var(--fs-lg);line-height:1.5;margin-top:16px;max-width:380px}
.xhero__btns{display:flex;gap:12px;margin-top:24px}
.xhero__btns .btn{width:auto;min-width:170px;height:46px;font-size:var(--fs-md)}
.xhero__val{margin-top:16px;font-size:var(--fs-sm);color:var(--pine);font-weight:700}
.sech__sub{font-size:var(--fs);color:var(--muted);margin:-8px 0 16px}
/* tree / bundle / kit cards */
.tgrid,.bundles{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.bundles{grid-template-columns:repeat(3,1fr)}
.tcard,.kcard,.bcard{position:relative;display:block;cursor:pointer;padding:0 0 14px;border:2px solid transparent}
.tcard input,.kcard input,.chip2 input,.ex input[type=checkbox]{position:absolute;opacity:0;width:1px;height:1px}
.tcard:focus-within,.kcard:focus-within,.chip2:focus-within,.ex__main:focus-within{outline:2px solid var(--pine);outline-offset:2px}
.tcard.is-on,.kcard.is-on{border-color:var(--pine)}
.tcard__img,.kcard__img,.bcard__img{position:relative;display:block;overflow:hidden;aspect-ratio:2/3;background:#efefef}
.bcard__img{aspect-ratio:4/5}
.bcard__img img{object-fit:contain;background:#efefef}
.tcard__img img,.kcard__img img,.bcard__img img{width:100%;height:100%;object-fit:cover}
.tcard__img .card__alt{position:absolute;inset:0}
.tcard:hover .card__alt{opacity:1}
.tcard__t{display:block;margin:12px 8px 0;font-weight:700;font-size:var(--fs-md)}
.tcard__d{display:block;margin:3px 8px 0;font-size:var(--fs-sm);color:var(--muted);line-height:1.4}
.tcard__p{display:block;margin:6px 8px 0;font-size:var(--fs-md);color:var(--xmas-red);font-weight:700}
.kgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);max-width:720px}
.kcard__img{aspect-ratio:1/1}
.guides{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.guides a{display:block;border:1px solid var(--line);background:#fff;padding:18px 20px}
.guides b{display:block;font-size:var(--fs-md);margin-bottom:4px}
.guides span{font-size:var(--fs-sm);color:var(--muted)}
.guides a:hover{border-color:var(--pine)}
/* build page */
.build{padding-top:28px;padding-bottom:90px}
.build__h{font:400 var(--fs-xl) var(--sans);letter-spacing:.5px;text-align:center}
.bsteps{list-style:none;margin:22px auto 34px;padding:0;display:grid;grid-template-columns:repeat(5,1fr);max-width:900px}
.bsteps li{position:relative}
.bsteps li::before{content:"";position:absolute;top:35px;left:0;right:0;height:2px;background:#d9d2c5}
.bsteps li:first-child::before{left:50%}.bsteps li:last-child::before{right:50%}
.bsteps li.is-done::before,.bsteps li.is-cur::before{background:var(--pine)}
.bsteps button{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:10px;padding:2px 0;font-size:var(--fs);color:#8a8579}
.bsteps button:disabled{cursor:default}
.bsteps .bstep__dot{width:24px;height:24px;border-radius:50%;background:#d9d2c5;position:relative;z-index:1}
.bsteps li.is-done .bstep__dot{background:var(--pine)}
.bsteps li.is-cur .bstep__dot{background:var(--pine);box-shadow:0 0 0 2px #fff,0 0 0 4px var(--pine)}
.bsteps li.is-cur button,.bsteps li.is-done button{color:var(--ink)}
.bsteps li.is-cur .bstep__lab{font-weight:700}
.build__grid{display:grid;grid-template-columns:1fr 378px;gap:60px;align-items:start}
.sumbox{position:sticky;top:20px;border:1px solid var(--line-2);background:#fff}
.sumbox__in{padding:20px}
.sumbox h2{font:400 var(--fs-md) var(--sans);margin-bottom:12px}
.sl{border-top:1px solid var(--line-2)}
.sl li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line-2);font-size:var(--fs)}
.sl small{display:block;color:var(--muted);font-size:var(--fs-xs)}
.sl .empty{color:var(--muted)}
.sumbox dl,.rsum{margin:14px 0 0;display:grid;grid-template-columns:1fr auto;row-gap:8px;font-size:var(--fs)}
.sumbox dt,.sumbox dd,.rsum dt,.rsum dd{margin:0}.sumbox dd,.rsum dd{text-align:right}
.tot{font-weight:700;font-size:var(--fs-md)}
.sv{color:var(--xmas-red);font-weight:700}
.ship{margin-top:16px;font-size:var(--fs-sm)}
.ship p{margin-bottom:6px}
.ship__bar{height:8px;background:#e6ddd0;border-radius:4px;overflow:hidden}
.ship__bar i{display:block;height:100%;background:var(--pine-2);transition:width .3s}
.bstep__h{font:400 var(--fs-xxl) var(--sans);letter-spacing:.3px;outline:0}
.bstep__h3{font:700 var(--fs-md) var(--sans);margin:24px 0 10px}
.bstep__p{font-size:var(--fs);color:var(--muted);margin:6px 0 20px}
.chips3{display:flex;flex-wrap:wrap;gap:10px}
.chip2{position:relative;display:flex;flex-direction:column;align-items:center;min-width:96px;padding:12px 18px;border:1px solid var(--input-line);background:#fff;cursor:pointer;font-size:var(--fs-md)}
.chip2 small{color:var(--muted);font-size:var(--fs-xs);margin-top:2px}
.chip2.is-on{border-color:var(--pine);box-shadow:inset 0 0 0 1px var(--pine);background:var(--cream-2);font-weight:700}
.picked{display:flex;gap:14px;align-items:center;margin-top:26px;padding:12px;border:1px solid var(--line-2);background:#fff;max-width:420px}
.picked img{width:72px;height:96px;object-fit:cover}
.note{margin:16px 0 0;font-size:var(--fs);color:var(--pine)}
.note--warn{color:var(--xmas-red)}
.qtyrow{display:flex;align-items:center;gap:20px;margin-top:22px;font-size:var(--fs)}
.stepper{display:flex;align-items:center;border:1px solid var(--input-line);background:#fff}
.stepper button{width:44px;height:44px;font-size:20px}
.stepper button:disabled{opacity:.35;cursor:default}
.stepper output{min-width:44px;text-align:center;font-weight:700;font-size:var(--fs-md)}
.linkbtn{display:block;margin-top:14px;font-size:var(--fs);text-decoration:underline;color:var(--muted)}
.exlist{border-top:1px solid var(--line-2)}
.ex{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line-2)}
.ex__main{display:flex;align-items:center;gap:14px;flex:1;cursor:pointer;position:relative;padding-left:32px}
.ex__main::before{content:"";position:absolute;left:0;top:50%;width:20px;height:20px;margin-top:-10px;border:1px solid var(--input-line);background:#fff}
.ex.is-on .ex__main::before{background:var(--pine) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 6.5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center/16px no-repeat;border-color:var(--pine)}
.ex__img img{width:56px;height:56px;object-fit:cover}
.ex__t b{display:block;font-size:var(--fs-md)}.ex__t small{color:var(--muted);font-size:var(--fs-sm)}
.ex__side{display:flex;align-items:center;gap:14px}
.ex__p{min-width:48px;text-align:right;font-weight:700;font-size:var(--fs-md)}
.exv{font-size:var(--fs-sm);color:var(--muted)}
.sel select{height:40px;border:1px solid var(--input-line);background:#fff;font:inherit;font-size:var(--fs-sm);padding:0 8px;max-width:210px}
.rlist{border-top:1px solid var(--line-2);margin-top:16px}
.rl{display:grid;grid-template-columns:56px 1fr auto;gap:14px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line-2);font-size:var(--fs-md)}
.rl img{width:56px;height:56px;object-fit:cover}
.rl small{display:block;color:var(--muted);font-size:var(--fs-sm)}
.unlock{margin-top:16px;display:flex;justify-content:space-between;gap:10px;padding:12px 14px;background:var(--pine);color:var(--gold);font-size:var(--fs-md)}
.rbtns{display:flex;gap:12px;margin-top:22px}
.rbtns .btn{height:48px;font-size:var(--fs-lg)}
.bnav{display:flex;gap:12px;margin-top:34px}
.bnav .btn{width:auto;min-width:130px;height:46px;font-size:var(--fs-md)}
.bnav.is-last #bnext{display:none}
.sumbar{display:none}
.bag__img{width:141px;aspect-ratio:2/3;object-fit:cover;grid-row:1/span 3}
.bag__row .qty__n{display:inline-block;padding-top:12px}
.minibag__img{width:48px;height:72px;object-fit:cover}
.minibag__tot{display:flex;justify-content:space-between;padding:10px 0;font-size:var(--fs-md)}
@media (max-width:900px){
  .xhero{grid-template-columns:1fr}
  .xhero__img{order:1;height:min(30vh,250px)}
  .xhero__img img{object-position:50% 30%}
  .xhero__txt{order:2;padding:16px 16px 18px}
  .xhero__eyebrow{margin-bottom:6px}
  .xhero h1{font-size:38px}
  .xhero__p{font-size:var(--fs-md);margin-top:8px;max-width:none}
  .xhero__btns{margin-top:12px;gap:8px}
  .xhero__btns .btn{flex:1;min-width:0;padding:0 8px;height:44px}
  .xhero__val{margin-top:10px;font-size:var(--fs-xs)}
  .tgrid{grid-template-columns:repeat(2,1fr)}
  .bundles,.guides{grid-template-columns:1fr}
  .kgrid{grid-template-columns:repeat(2,1fr)}
  .build{padding-top:18px}
  .bsteps{margin:14px 0 22px}
  .bsteps li::before{top:30px}
  .bsteps button{font-size:var(--fs-xs);gap:8px}
  .bsteps .bstep__dot{width:18px;height:18px}
  .bsteps .bstep__lab{white-space:normal;text-align:center;line-height:1.2;min-height:22px;display:flex;align-items:flex-end}
  .build__grid{grid-template-columns:1fr;gap:0}
  .bstep__h{font-size:20px}
  .sumbox{display:none;position:fixed;left:0;right:0;bottom:64px;z-index:40;max-height:60vh;overflow:auto;border-width:1px 0 0}
  body.sum-open .sumbox{display:block}
  .sumbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:41;background:#fff;border-top:1px solid var(--line);padding:10px 16px;align-items:center;justify-content:space-between;height:64px}
  .sumbar span{display:block;font-size:var(--fs-xs);color:var(--muted)}.sumbar b{font-size:var(--fs-lg)}
  .sumbar .btn{width:auto;height:40px}
  .ex{flex-direction:column;align-items:stretch}.ex__side{justify-content:space-between;padding-left:32px}
  .sel select{max-width:62vw}
  .rbtns{flex-direction:column}
  .bnav{justify-content:space-between}.bnav .btn{flex:1}
  .bag__img{width:90px}
}

/* ===== Finish pass (2026-10-03): data-driven listing, PDP, bag, wish list and the utility-page template.
   Same UO geometry and type scale; only new states (filters on, empty states, forms, help copy) are added. ===== */
.ann__msg{display:flex;align-items:center;gap:19px}
.ann__msg span{opacity:.7}
.util__r a .ico{width:14px;height:14px}
/* listing */
.lhead .cat button{display:flex;align-items:center;gap:6px}
.fdd button.is-on{border-color:var(--pine);box-shadow:inset 0 0 0 1px var(--pine);font-weight:700}
.chips2[hidden]{display:none}
.chips2 .chip{background:transparent;cursor:pointer}
.clearall{text-decoration:underline;font-size:var(--fs-sm)}
.catbars:empty{display:none}
.panel__list .pf{border-bottom:1px solid var(--line-2)}
.panel__list .pf summary{display:flex;align-items:center;justify-content:space-between;height:49px;padding:0 21px;font-size:var(--fs-md);cursor:pointer;list-style:none}
.panel__list .pf summary::-webkit-details-marker{display:none}
.panel__list .pf summary em{font-style:normal;font-size:8px;background:var(--grey-bg);border-radius:8px;min-width:14px;text-align:center;margin-right:14px;line-height:14px;display:inline-block}
.panel__list .pf label{display:flex;align-items:center;gap:9px;padding:9px 21px;font-size:var(--fs);cursor:pointer}
.panel__list .pf label small{color:var(--muted)}
.panel__list .pf label:last-child{padding-bottom:16px}
.card .heart.is-on{display:grid}
.card .heart.is-on .ico{fill:var(--xmas-red);stroke:var(--xmas-red)}
.empty{text-align:center;padding:60px 16px 70px;max-width:560px;margin:0 auto}
.empty h2{font:400 var(--fs-xl) var(--sans);letter-spacing:.5px;margin-bottom:10px}
.empty p{font-size:var(--fs-md);color:var(--muted);line-height:1.6}
.empty__btns{display:flex;gap:12px;justify-content:center;margin-top:22px;flex-wrap:wrap}
.empty__btns .btn{height:42px;min-width:170px}
.empty__chips{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-top:18px}
.empty__chips .chip{height:32px}
.tray__row p a:hover{text-decoration:underline}
.tray__row .card__pic{aspect-ratio:2/3}
/* quick shop + search thumbs */
.qs__img{width:240px;flex:none;aspect-ratio:2/3}
.sdrop .res img{aspect-ratio:2/3;object-fit:cover;width:100%}
.minibag__more{font-size:var(--fs-sm);color:var(--muted);margin:-4px 0 6px}
/* PDP */
.buy .wish{background:none;text-align:left;padding:0;cursor:pointer}
.buy .wish.is-on{color:var(--xmas-red)}
.acc__p{padding:12px 0;font-size:var(--fs-sm);color:#555;line-height:1.65}
.acc__p p+p{margin-top:8px}
.spec{display:grid;grid-template-columns:110px 1fr;gap:6px 12px;margin:0}
.spec dt{color:#000;font-weight:700}.spec dd{margin:0}
/* bag */
.bag h1 small{font-size:var(--fs-sm);color:var(--muted);margin-left:6px}
.bag__row .acts button{text-decoration:underline;margin:0 3px;font-size:var(--fs-sm);color:var(--muted)}
.sum__ship{font-size:var(--fs-xs);color:var(--muted);margin-top:12px;line-height:1.6}
.co ol{margin:16px 0 0;padding-left:18px;font-size:var(--fs-md);line-height:1.7}
.co p{font-size:var(--fs-md);line-height:1.6;color:#444;margin-top:10px}
.co .btn{margin-top:20px;height:46px}
.co small{display:block;margin-top:10px;color:var(--muted);font-size:var(--fs-sm);text-align:center}
.co h2{font:400 var(--fs-xl) var(--sans);letter-spacing:.5px;padding-right:30px}
/* wish list */
.wl .btn,.doc .wl .btn,.doc .empty .btn{width:100%;min-width:0;padding:0 8px;display:flex}
.doc .empty__btns .btn{width:auto;min-width:170px}
.wl__rm{display:block;margin:10px auto 0;font-size:var(--fs-sm);color:var(--muted);text-decoration:underline}
/* footer */
.signup__msg{font-size:var(--fs-sm);margin-top:8px;color:var(--pine);min-height:1em}
.legal a:hover{text-decoration:underline}
/* utility-page template: help sidebar + content column */
.help{padding-top:28px}
.help nav b{margin-top:18px}
.help nav b:first-child{margin-top:6px}
.help nav a{padding:5px 0 6px}
.doc{max-width:760px;font-size:var(--fs-md);line-height:1.65;color:#2a2a28}
.doc h1{margin-bottom:22px}
.doc .lede{font-size:var(--fs-lg);line-height:1.55;color:var(--ink);margin-bottom:6px}
.doc h2{font:700 var(--fs-lg) var(--sans);letter-spacing:.3px;margin:30px 0 10px;color:var(--ink)}
.doc h3{font:700 var(--fs-md) var(--sans);margin:18px 0 6px}
.doc p{margin:0 0 12px}
.doc ul,.doc ol{margin:0 0 14px;padding-left:20px}
.doc ul{list-style:disc}
.doc li{margin-bottom:6px}
.doc a.u,.doc p a,.doc li a,.doc td a{text-decoration:underline}
.doc table{width:100%;border-collapse:collapse;margin:8px 0 16px;font-size:var(--fs-md)}
.doc th,.doc td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line-2);vertical-align:top}
.doc th{background:var(--grey-bg);font-weight:700}
.doc .box{background:#fff;border:1px solid var(--line);padding:16px 18px;margin:14px 0 18px}
.doc .box ul{margin-bottom:0}
.doc .acc{margin-top:6px}
.doc .acc button{height:auto;min-height:46px;padding:12px 0;font-size:var(--fs-md);text-align:left;gap:16px}
.doc .acc__p{font-size:var(--fs-md);color:#444}
.doc .faqnav{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 6px}
.doc .faqnav a{border:1px solid var(--line);background:#fff;padding:7px 12px;font-size:var(--fs-sm);text-decoration:none}
.doc .faqnav a:hover{border-color:var(--pine)}
.doc .btn{width:auto;display:inline-flex;min-width:200px;height:44px;margin-top:6px}
.doc .figure{margin:4px 0 22px}
.doc .figure img{width:100%;aspect-ratio:16/9;object-fit:cover}
.form{display:grid;gap:14px;max-width:520px;margin-top:8px}
.form label{display:block;font-size:var(--fs-sm);font-weight:700;margin-bottom:5px}
.form input,.form select,.form textarea{width:100%;height:41px;border:1px solid var(--input-line);background:#fff;padding:0 12px;font:inherit;font-size:var(--fs-md);border-radius:0}
.form textarea{height:140px;padding:10px 12px;resize:vertical}
.form [aria-invalid="true"]{border-color:var(--xmas-red);box-shadow:inset 0 0 0 1px var(--xmas-red)}
.form .btn{width:auto;min-width:200px}
.form__err{color:var(--xmas-red);font-size:var(--fs-sm);min-height:1em}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.done{background:#fff;border:1px solid var(--line);padding:22px 22px 10px;max-width:520px;outline:none}
.done h2{margin-top:0}
.doc .track h2{margin-top:0}
.doc .track .form{margin-top:0}
@media (max-width:900px){
  .ann__msg{gap:8px;flex-wrap:wrap;justify-content:center}
  .ann__msg>span,.ann .ann__x{display:none}
  .ann:not(.ann--green){height:auto;min-height:var(--ann-h);padding-top:6px;padding-bottom:6px}
  .acct{grid-template-columns:minmax(0,1fr)}
  .wl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .help{padding-top:6px}
  .help nav b{display:none}
  .help nav{margin-bottom:18px}
  .doc h1{margin-bottom:14px}
  .doc .btn{width:100%}
  .form__row{grid-template-columns:1fr}
  .form .btn{width:100%}
  .qs__img{width:100%}
  .spec{grid-template-columns:90px 1fr}
  .empty{padding:40px 8px 50px}
}

/* ================= fix3 (2026-10-03): ship-from, product content, parcels, build pricing, Bar Cart coming soon ================= */
.card__ship{margin-top:4px;font-size:var(--fs-xs);color:var(--muted)}
.badge-soon{display:inline-block;padding:3px 7px;background:var(--gold);color:var(--pine);font:700 var(--fs-xs)/1.2 var(--sans);letter-spacing:.6px;text-transform:uppercase;vertical-align:middle}
.badge-soon--card{position:absolute;left:8px;top:8px;z-index:2}
.pdp-list{margin:6px 0 10px 16px;list-style:disc}
.pdp-list li{margin:3px 0;line-height:1.55}
.pdp-h{margin:12px 0 2px;font-weight:700;font-size:var(--fs-sm)}
.acc__p .spec{display:grid;grid-template-columns:minmax(110px,38%) 1fr;gap:0;font-size:var(--fs-sm)}
.acc__p .spec dt,.acc__p .spec dd{padding:6px 0;border-bottom:1px solid var(--line-2);line-height:1.45}
.acc__p .spec dt{font-weight:700;padding-right:10px}
.acc__p p+p{margin-top:8px}
.sizes button.alt{color:var(--muted);border-style:dashed}
.soon{margin-top:18px;padding:14px;background:var(--cream-2)}
.soon p{margin:8px 0 10px;font-size:var(--fs-sm)}
.notify label{display:block;font-size:var(--fs-sm);font-weight:700;margin-bottom:6px}
.notify .row{display:flex;gap:8px}.notify input{flex:1;min-width:0;height:40px;border:1px solid var(--input-line);padding:0 10px;font:inherit}
.notify .btn{margin-top:0;height:40px;width:auto;padding:0 16px;font-size:var(--fs)}
.notify__msg{margin-top:6px;font-size:var(--fs-sm)}
.parcels-note{margin:14px 0 4px;padding:10px 12px;background:var(--cream-2);font-size:var(--fs-sm)}
.parcel__h{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 0 8px;font-size:var(--fs-sm)}
.parcel__h span{color:var(--muted)}
.sl__ship,.rl__ship{color:var(--muted)}
.sum__hint{margin-top:10px;font-size:var(--fs-sm);color:var(--muted)}
.rec{display:inline-flex;align-items:center;gap:5px;margin-top:6px;padding:3px 9px 3px 4px;border:1px solid var(--pine-2);border-radius:999px;background:#fff;color:var(--pine-2);font-size:var(--fs-xs);font-weight:700;cursor:pointer}
.rec__dot{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;background:var(--pine-2);color:#fff;font-size:11px;line-height:1}
.rec:hover{background:var(--cream-2)}
.kcard{cursor:default}.kcard .btn{margin-top:8px;width:auto}
.kcard .stepper{margin-top:8px}
.kitsch{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gap);margin-top:10px}
.kitsch__i{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:0 0 8px;border:2px solid transparent;background:none;text-align:left;font-size:var(--fs-sm);cursor:pointer}
.kitsch__i img{width:100%;aspect-ratio:1/1;object-fit:cover;background:#efefef}
.kitsch__i small{color:var(--muted);font-size:var(--fs-xs)}
.kitsch__i.is-on{border-color:var(--gold)}
.sl-kitsch{margin-top:12px;padding:10px;border:1px dashed var(--gold);font-size:var(--fs-sm)}
.sl-kitsch div{display:flex;gap:6px;margin:6px 0}.sl-kitsch img{width:44px;height:44px;object-fit:cover}
.sl-kitsch small{color:var(--muted)}
.bcard__kitsch{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:var(--fs-xs);color:var(--muted)}
.bcard__kitsch img{width:28px;height:28px;object-fit:cover}
.pdp-kitsch{margin-top:14px;padding:12px;border:1px dashed var(--gold);font-size:var(--fs-sm)}
.pdp-kitsch .kitsch{grid-template-columns:repeat(5,1fr)}
@media (max-width:760px){
  .kitsch{grid-template-columns:repeat(3,1fr)}
  .acc__p .spec{grid-template-columns:42% 1fr}
}
.bnav [hidden]{display:none}
.unlock{flex-direction:column;gap:2px}

/* No-crop rule (Kenneth 2026-10-03): product images are never cut; lifestyle images keep their own ratio. */
.card__pic,.card__alt{object-fit:contain!important;background:#efefef}
.doc .figure img{aspect-ratio:auto;height:auto;object-fit:contain}
@media (max-width:760px){.xhero__img{height:auto!important}.xhero__img img{height:auto!important;object-fit:contain}}
.xhero__img{height:auto!important;aspect-ratio:1856/2304;max-height:none}
.xhero__img img{height:100%;object-fit:contain}

/* Symmetry pass (Kenneth 2026-10-03: padding/margin not symmetrical) */
.catbars,.catbars[data-catbars]{display:flex!important;flex-wrap:wrap;gap:8px;grid-template-columns:none!important;padding:0 0 24px}
.catbars a{height:34px;padding:0 16px;background:transparent!important;color:var(--ink,#111)!important;border:1px solid rgba(20,56,44,.35);font-size:var(--fs-sm);justify-content:flex-start;transition:border-color .2s,background .2s}
.catbars a:hover{border-color:var(--pine);background:#fff!important}
.mega__lists{padding:20px!important}
.mega__promo{padding:20px!important;width:260px;box-sizing:border-box;display:flex;flex-direction:column}
.mega__promo a.shop{margin-top:12px}
.mega__body{align-items:stretch}