/* Online Store storefront, "Night" template. Copied from the approved No Bones
   site (Code/nobones-site/site/styles.css); store additions are at the end. */
:root{--ink:#0b0b0b;--ink2:#141414;--line:#242424;--paper:#efece6;--sand:#d8d1c4;--sand2:#cfc9bd;--hd:"Bebas Neue",Impact,sans-serif;--bd:"Arimo",system-ui,sans-serif;--ease:cubic-bezier(.2,.7,.1,1);--gut:28px;--bar:34px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--bd);font-size:16px;line-height:1.5;background:var(--ink);color:var(--paper);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
img{display:block}
.arrow{width:1em;height:1em;flex:none}
.ic{width:22px;height:22px}
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.lnk{display:inline-flex;align-items:center;gap:10px;font:24px var(--hd);border-bottom:2px solid currentColor;padding-bottom:2px;background:none;border-top:0;border-left:0;border-right:0;cursor:pointer}
.lnk .arrow{transition:transform .3s var(--ease)}.lnk:hover .arrow{transform:translateX(6px)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;height:54px;padding:0 26px;font:24px var(--hd);background:var(--paper);color:var(--ink);border:0;border-radius:2px;cursor:pointer}
.btn.dk{background:var(--ink);color:var(--paper)}
.btn:disabled{opacity:.35;cursor:not-allowed}
h2.big{font:400 clamp(32px,3.6vw,52px)/.9 var(--hd);margin:0}
.sec{padding:110px var(--gut)}
.head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:36px;flex-wrap:wrap}

/* ===== announcement bar + nav ===== */
.top{position:fixed;top:0;left:0;right:0;z-index:20}
.ann{height:var(--bar);display:flex;align-items:center;justify-content:center;background:var(--paper);color:var(--ink);font:600 13px var(--bd);padding:0 16px;text-align:center}
.nav{display:flex;align-items:center;gap:34px;padding:14px var(--gut);transition:background .4s,padding .4s}
.top.solid .nav{background:rgba(11,11,11,.9);backdrop-filter:blur(10px);padding:8px var(--gut)}
.nav .logo img{height:56px;transition:height .4s}.top.solid .nav .logo img{height:40px}
.menu{display:flex;gap:24px;font:21px var(--hd);letter-spacing:.02em}
.menu>*{position:relative;cursor:pointer;opacity:.92}
.menu>*:hover{opacity:1}
.menu .on>a,.menu a.on{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.right{margin-left:auto;display:flex;align-items:center;gap:20px}
.iconbtn{background:none;border:0;padding:4px;cursor:pointer;position:relative;display:flex}
.badge{position:absolute;top:-4px;right:-6px;min-width:18px;height:18px;border-radius:9px;background:var(--paper);color:var(--ink);font:700 11px/18px var(--bd);text-align:center;padding:0 4px}
.dd{position:absolute;top:100%;left:-18px;padding-top:14px;display:none}
.has-dd.open .dd{display:block}   /* opened by script (ddInit in storefront.js): one at a time, a short grace on the way down to it */
.dd div{background:var(--ink2);border:1px solid var(--line);padding:14px 18px;display:grid;gap:6px;min-width:220px;font:22px var(--hd)}
.dd a{opacity:.7}.dd a:hover{opacity:1}
.burger{display:none}

/* ===== hero ===== */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}   /* still: the slow 18s zoom-out was dropped (Todd, 2026-10-08) */
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,transparent 30%,transparent 48%,rgba(0,0,0,.86) 100%)}
.hero .cap{position:absolute;left:var(--gut);right:var(--gut);bottom:40px;z-index:2}
.hero h1{font:400 clamp(44px,7vw,108px)/.82 var(--hd);margin:0}
.hero .row{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-top:18px;flex-wrap:wrap}
.hero p{margin:0;max-width:440px;opacity:.85}

/* ===== home blocks ===== */
.cats{display:grid;grid-template-columns:repeat(var(--n,3),1fr);gap:2px}
.cat{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--sand)}
.cat>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.cat.prod>img{object-fit:contain;inset:10% 10% 22%;width:80%;height:68%}
.cat:hover>img{transform:scale(1.05)}
.cat:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.7))}
.cat .lb{position:absolute;left:22px;right:22px;bottom:18px;z-index:2;display:flex;justify-content:space-between;align-items:end;color:var(--paper)}
.cat .lb b{font:400 clamp(26px,2.4vw,36px)/.9 var(--hd)}
.cat .lb span{font:20px var(--hd);display:flex;align-items:center;gap:8px}
.cols{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.cols li{border-bottom:1px solid var(--line)}
.col-row{width:100%;display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:16px;padding:4px 0}
.col-row .t{font:400 clamp(30px,4vw,60px)/1 var(--hd);transition:transform .45s var(--ease),opacity .3s}
.col-row .p{font:22px var(--hd);opacity:.5}
.cols:hover .col-row .t{opacity:.22}
.cols .col-row:hover .t{opacity:1;transform:translateX(18px)}
.float{position:fixed;left:0;top:0;width:min(28vw,360px);aspect-ratio:4/5;pointer-events:none;z-index:30;background:#fff;box-shadow:0 18px 50px rgba(0,0,0,.45);opacity:0;transform:translate(-50%,-50%) scale(.85) rotate(-3deg);transition:opacity .25s,transform .45s var(--ease)}
.float.on{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}
.float img{width:100%;height:100%;object-fit:contain}
.next{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.next .art{background:#000;display:grid;place-items:center;padding:6%;overflow:hidden}
.next .art img{width:100%;max-width:620px;filter:blur(10px) brightness(.9);transform:scale(1.04);transition:filter 1.2s var(--ease)}
.next .art:hover img{filter:blur(4px) brightness(.95)}
.next .tx{display:flex;flex-direction:column;justify-content:center;gap:18px;padding:60px var(--gut)}
.next small{font:20px var(--hd);opacity:.55}
.next p{opacity:.8;margin:0;max-width:420px}
.strip{display:flex;gap:2px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip img{height:78vh;max-height:760px;width:auto;scroll-snap-align:start;flex:none}
.story{max-width:900px}
.story p{font-size:21px;line-height:1.5;opacity:.85;margin:0 0 18px}
.ig{display:grid;grid-template-columns:repeat(6,1fr);gap:2px}
.ig a{position:relative;aspect-ratio:1;overflow:hidden;display:block}
.ig img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease),opacity .3s}
.ig a:hover img{transform:scale(1.06);opacity:.75}
.join{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:end;padding:110px var(--gut);border-top:1px solid var(--line)}
.mail{display:flex;max-width:520px}
.mail input{flex:1;height:54px;background:transparent;border:1px solid #3a3a3a;border-right:0;color:var(--paper);padding:0 14px;border-radius:2px 0 0 2px}
.mail input::placeholder{color:#8a857d}
.mail button{height:54px;padding:0 22px;background:var(--paper);color:var(--ink);border:0;font:22px var(--hd);cursor:pointer;border-radius:0 2px 2px 0}

/* ===== product tiles ===== */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px 20px}
/* Simple cards (2026-10-07, option 1): the photo on white, name and price under it on the page. */
.tile{position:relative;display:block;width:100%;background:none;cursor:pointer;border:0;padding:0;text-align:left;color:var(--paper);font:inherit}
.tile .pic{position:relative;display:block;aspect-ratio:4/5;background:#fff;overflow:hidden}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .5s,transform .7s var(--ease)}
.tile .b{opacity:0;transform:scale(.96)}
.tile:hover .f{opacity:0;transform:scale(1.04)}.tile:hover .b{opacity:1;transform:none}
.tile .meta{display:block;margin-top:10px}
.tile .nm{display:block;font:22px/1 var(--hd)}
.tile .pr{display:block;margin-top:5px;font-size:14px;color:#bdb6aa;white-space:nowrap}
.tile .tag{position:absolute;top:12px;left:14px;font:17px var(--hd);background:var(--ink);color:var(--paper);padding:3px 8px 1px}
.tile .tag.lt{background:var(--paper);color:var(--ink);border:1px solid var(--ink)}
.tile.out img{filter:grayscale(1)}
/* only the front photo fades; the hover photo stays hidden until hover (it showed through, stacked) */
.tile.out .f{opacity:.5}.tile.out:hover .f{opacity:0}.tile.out:hover .b{opacity:.5}

/* ===== listing ===== */
.cp-top{padding:170px var(--gut) 30px;border-bottom:1px solid var(--line)}
.crumbs{font-size:13px;opacity:.55;display:flex;gap:8px;margin-bottom:14px}
.cp-top h1,.pg-top h1{font:400 clamp(40px,5.5vw,80px)/.85 var(--hd);margin:0}
.cp-top .cnt{opacity:.55;margin-top:10px;font-size:14px}
.cp-bar{position:sticky;top:calc(var(--bar) + 56px);z-index:10;background:rgba(11,11,11,.92);backdrop-filter:blur(8px);display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px var(--gut);border-bottom:1px solid var(--line);flex-wrap:wrap}
.subs{display:flex;gap:20px;font:22px var(--hd);flex-wrap:wrap}
.subs button{background:none;border:0;padding:0;cursor:pointer;opacity:.45}
.subs button[aria-pressed=true]{opacity:1;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.tools{display:flex;gap:18px;align-items:center;font-size:14px}
.tools label{display:flex;align-items:center;gap:8px;cursor:pointer;opacity:.8}
.tools input{accent-color:var(--paper);width:16px;height:16px}
.tools select{background:var(--ink2);color:var(--paper);border:1px solid var(--line);height:38px;border-radius:2px;padding:0 10px}
.cp-grid{padding:40px var(--gut) 110px}
.empty{padding:90px var(--gut);display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.empty b{font:400 54px/.9 var(--hd)}
.empty span{opacity:.6;max-width:420px}

/* ===== info pages ===== */
.pg-top{padding:170px var(--gut) 50px}
.pg{padding:0 var(--gut) 110px}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.about-grid .ph{min-height:80vh;background-size:cover;background-position:center}
.about-grid .tx{padding:60px 56px;display:flex;flex-direction:column;justify-content:center;gap:18px;background:var(--ink2)}
.about-grid .tx p{opacity:.85;margin:0;font-size:18px}
.lb-grid{columns:3;column-gap:2px}
.lb-grid img{width:100%;margin-bottom:2px}
.faq{max-width:860px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:20px 0;font:30px var(--hd)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";font:30px var(--bd);opacity:.6;transition:transform .3s}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq .a{padding:0 0 22px;opacity:.8;max-width:700px}
.sz{width:100%;border-collapse:collapse;font-size:14px;margin:8px 0 6px}
.sz th,.sz td{text-align:center;padding:8px 6px;border-bottom:1px solid currentColor;border-color:rgba(128,128,128,.25)}
.sz th:first-child,.sz td:first-child{text-align:left}
.sz caption{text-align:left;font:22px var(--hd);padding-bottom:4px}
.contact{display:grid;grid-template-columns:1fr 1.2fr;gap:56px}
.contact form{display:grid;gap:14px}
.fld{display:grid;gap:6px}
.fld label{font-size:13px;font-weight:700;opacity:.7}
.fld input,.fld textarea,.fld select{background:transparent;border:1px solid #3a3a3a;border-radius:2px;height:48px;padding:0 14px;color:var(--paper)}
.fld textarea{height:140px;padding:12px 14px;resize:vertical}

/* ===== footer ===== */
.foot{padding:70px var(--gut) 36px;border-top:1px solid var(--line)}
.foot .cols4{display:grid;grid-template-columns:2fr repeat(4,1fr);gap:30px;margin-bottom:60px}
.foot .cols4>div:empty{display:none}
.foot h4{font:22px var(--hd);margin:0 0 10px;opacity:.55;font-weight:400}
.foot .cols4 a{display:block;opacity:.8;font-size:14px;margin-bottom:6px}.foot .cols4 a:hover{opacity:1}
.foot .print{font-size:14px;opacity:.7;max-width:320px}
.foot .print a{text-decoration:underline;text-underline-offset:3px}
.foot .word{font:400 clamp(48px,8vw,120px)/.8 var(--hd);opacity:.08;margin:0}
.foot .legal{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;opacity:.5;margin-top:18px}

/* ===== product panel + bag ===== */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .35s;z-index:40}
.panel{position:fixed;top:0;right:0;bottom:0;width:min(560px,100%);background:var(--paper);color:var(--ink);z-index:41;transform:translateX(100%);transition:transform .55s var(--ease);display:flex;flex-direction:column}
body.sheet .scrim,body.bag .scrim{opacity:1;pointer-events:auto}
body.sheet #sheet,body.bag #bag{transform:none}
.px{position:absolute;top:14px;right:16px;z-index:2;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.85);box-shadow:0 0 0 1px rgba(0,0,0,.12);cursor:pointer;font-size:18px}
.pbody{flex:1;overflow:auto}
.gal{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;background:#fff;scrollbar-width:none}
.gal::-webkit-scrollbar{display:none}
.gal img{flex:none;width:100%;height:min(46vh,520px);object-fit:contain;padding:5%;scroll-snap-align:start}
.dots{display:flex;gap:6px;justify-content:center;padding:10px 0 0}
.dots button{width:6px;height:6px;border-radius:50%;background:#bdb6a8;border:0;padding:0;cursor:pointer;box-sizing:content-box;background-clip:content-box;padding:4px;margin:-4px}.dots button.on{background-color:var(--ink)}
.galw{position:relative}
.gnav{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;border:1px solid rgba(0,0,0,.12);background:rgba(255,255,255,.92);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;opacity:0;transition:opacity .2s}
.gnav svg{display:block;width:16px;height:16px;flex:none}
.gnav.prev{left:10px}.gnav.next{right:10px}
.galw:hover .gnav,.gnav:focus-visible{opacity:1}
.gnav[hidden]{display:none}
@media (hover:none){.gnav{display:none}}
.pin{padding:16px 28px 28px}
.pin small{font:18px var(--hd);opacity:.5}
.pin h3{font:400 46px/.95 var(--hd);margin:2px 0 4px}
.pin .price{font-size:20px;font-weight:700;margin-bottom:6px}
.pin .stock{font-size:13px;font-weight:700;margin-bottom:18px;min-height:20px}
.opt{margin-bottom:18px}
.opt .lb{font-size:13px;font-weight:700;margin-bottom:8px;opacity:.7;display:flex;justify-content:space-between}
.opt .lb button{background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-weight:600;opacity:.9}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips button{min-width:48px;height:40px;padding:0 12px;border:1px solid var(--sand2);background:transparent;border-radius:2px;cursor:pointer;font-weight:600;font-size:14px}
.chips button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chips button:disabled{opacity:.3;text-decoration:line-through;cursor:not-allowed}
.acc details{border-top:1px solid #d6d0c4}
.acc details:last-child{border-bottom:1px solid #d6d0c4}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:14px 0;font:22px var(--hd)}
.acc summary::-webkit-details-marker{display:none}
.acc summary:after{content:"+";font:22px var(--bd);opacity:.6;transition:transform .3s}
.acc details[open] summary:after{transform:rotate(45deg)}
.acc .a{padding:0 0 16px;font-size:14px;opacity:.85;white-space:pre-line}
.acc .a.tbl{white-space:normal}
.pfoot{padding:16px 28px 22px;border-top:1px solid #d6d0c4;background:var(--paper)}
.pfoot .btn{width:100%}
.secure{font-size:12px;opacity:.55;text-align:center;margin-top:8px}
.bag-h{padding:22px 28px 6px;font:400 42px var(--hd)}
.ship{margin:0 28px 6px;font-size:13px;font-weight:700}
.ship .bar{height:4px;background:var(--sand2);margin-top:8px;border-radius:2px;overflow:hidden}
.ship .bar i{display:block;height:100%;background:var(--ink);transition:width .5s var(--ease)}
.bag-l{list-style:none;margin:0;padding:0 28px}
.bag-l li{display:grid;grid-template-columns:76px 1fr auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid #d6d0c4}
.bag-l .th{width:76px;height:76px;background:#fff;border:1px solid #e3ded4}.bag-l .th img{width:100%;height:100%;object-fit:contain;padding:6px}
.bag-l b{font:22px/1 var(--hd);font-weight:400;display:block}
.bag-l small{opacity:.6;font-size:13px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--sand2);border-radius:2px;margin-top:6px}
.qty button{width:28px;height:28px;border:0;background:none;cursor:pointer;font-weight:700}
.qty span{min-width:22px;text-align:center;font-size:13px;font-weight:700}
.bag-empty{padding:20px 28px;opacity:.6}
.region{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;font-size:14px}
.region select{height:40px;border:1px solid var(--sand2);background:transparent;border-radius:2px;padding:0 10px;color:var(--ink)}
.err{font-size:13px;font-weight:700;color:#9b2c1f;margin:0 0 10px}
.thanks{min-height:70vh;display:flex;flex-direction:column;justify-content:center;gap:18px}
.thanks p{opacity:.8;max-width:520px;margin:0;font-size:18px}
.sum{display:grid;gap:4px;margin-bottom:12px;font-size:14px}
.sum div{display:flex;justify-content:space-between}
.sum .tot{font-weight:700;font-size:16px;padding-top:4px}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--paper);color:var(--ink);padding:12px 18px;border-radius:2px;font-weight:700;font-size:14px;opacity:0;transition:.3s;z-index:60;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* mobile menu */
.mm{position:fixed;inset:0;z-index:35;background:var(--ink);padding:120px var(--gut) 30px;display:none;flex-direction:column;gap:2px;overflow:auto}
body.menu-open .mm{display:flex}
.top{z-index:36}
.mm a{font:44px/1.08 var(--hd)}
.mm .sm{font:24px/1.4 var(--hd);opacity:.65}
.mm hr{border:0;border-top:1px solid var(--line);margin:14px 0;width:100%}

@media (max-width:980px){
  :root{--gut:16px}
  .menu{display:none}.burger{display:flex}
  .nav .logo img{height:42px}
  .hero .cap{bottom:28px}
  .sec{padding:72px var(--gut)}
  .cats{grid-template-columns:1fr}.cat{aspect-ratio:4/3}
  .cols .col-row .t{font-size:30px}.cols .col-row:hover .t{transform:none}.cols:hover .col-row .t{opacity:1}.float{display:none}
  .grid{grid-template-columns:repeat(2,1fr)}
  .grid{gap:24px 12px}.tile .nm{font-size:20px}
  .next{grid-template-columns:1fr}
  .strip img{height:62vh}
  .ig{grid-template-columns:repeat(3,1fr)}
  .join{grid-template-columns:1fr;padding:72px var(--gut);gap:20px}
  .cp-top,.pg-top{padding:130px var(--gut) 22px}
  .cp-bar{top:calc(var(--bar) + 56px);padding:10px var(--gut)}
  .about-grid{grid-template-columns:1fr}.about-grid .ph{min-height:60vh}.about-grid .tx{padding:40px var(--gut)}
  .lb-grid{columns:2}
  .contact{grid-template-columns:1fr;gap:30px}
  .foot .cols4{grid-template-columns:1fr 1fr}
  .pin{padding:16px}.pfoot{padding:12px 16px 18px}.bag-h{padding:22px 16px 6px}.ship{margin:0 16px 6px}.bag-l{padding:0 16px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}

/* ===== store additions ===== */
.logo .wm{font:30px/1 var(--hd);letter-spacing:.02em;display:block;max-width:220px}
.top.solid .logo .wm{font-size:24px}
.nav .logo img{height:56px;width:auto;max-width:180px;object-fit:contain}
.hero.plain{height:auto;min-height:0;padding:200px var(--gut) 70px;background:var(--ink)}
.hero.plain:after{display:none}
.hero.plain .cap{position:static}
.cat.blank{background:var(--sand)}
.tile .note{position:absolute;top:12px;right:14px;font:15px var(--hd);color:var(--ink);opacity:.7}
.swatch{display:inline-flex;align-items:center;gap:8px}
.swatch i{width:14px;height:14px;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.25);flex:none}
.pin .ship-note{font-size:13px;font-weight:700;margin:-12px 0 18px;opacity:.75}
.preview{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:50;background:#2bc5c0;color:#062b2a;font:700 13px var(--bd);padding:10px 16px;border-radius:2px;box-shadow:0 6px 24px rgba(0,0,0,.35);max-width:calc(100% - 32px);text-align:center}
.closed{min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:0 var(--gut)}
.closed h1{font:400 clamp(40px,5.5vw,80px)/.85 var(--hd);margin:0}
.closed p{opacity:.7;margin:0;max-width:460px}
.foot .made{font-size:12px;opacity:.45}
.foot .made a{text-decoration:underline;text-underline-offset:3px}

/* ===== checkout (own page; colors from Store Settings, Checkout page) ===== */
body.ck-on{background:var(--ink)}
.ck{font-family:var(--bd);color:var(--ink);background:var(--bg);min-height:100svh}
.ck .co-hd{display:flex;align-items:center;justify-content:var(--al);padding:14px var(--gut);border-bottom:1px solid var(--line)}
.ck .co-hd img{height:54px;width:auto}
.ck .co-name{font:24px/.9 var(--hd);letter-spacing:.02em}
.ck .co-wrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;max-width:920px;margin:0 auto;padding:26px var(--gut) 60px;align-items:start}
.ck .co-step{border:1px solid var(--line);border-radius:14px;margin-bottom:12px;padding:16px 18px}
.ck .co-step h3{display:flex;align-items:center;gap:10px;font:400 22px/1 var(--hd);letter-spacing:.02em;margin:0;color:var(--mute)}
.ck .co-step h3 i{font:600 11px var(--bd);font-style:normal;width:20px;height:20px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--mute);flex:none}
.ck .co-step.open{background:var(--panel)}
.ck .co-step.open h3{color:var(--ink);margin-bottom:12px}
.ck .co-step.open h3 i{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.ck .co-step.done{cursor:pointer}
.ck .co-step.done h3{color:var(--ink)}
.ck .co-step.done h3 i{border-color:var(--ink);color:var(--ink)}
.ck .co-edit{margin-left:auto;background:none;border:0;color:var(--ink);font:600 12px var(--bd);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:4px}
.ck .co-recap{font-size:13px;color:var(--mute);margin:8px 0 0 30px;line-height:1.45;overflow-wrap:anywhere}
.ck .co-f{display:block;margin-bottom:10px}
.ck .co-lbl{display:block;font:600 11px var(--bd);letter-spacing:.06em;color:var(--mute);margin:0 0 6px;text-transform:none}
.ck .co-lbl em{font-style:normal;font-weight:400;letter-spacing:0;opacity:.8;margin-left:4px}
.ck .co-in{display:block;width:100%;box-sizing:border-box;background:var(--field);border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--ink);font:13px var(--bd);outline:none;-webkit-appearance:none;appearance:none}
.ck select.co-in{background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:28px}
.ck .co-in::placeholder{color:var(--mute)}
.ck .co-in:focus{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.ck .co-in.bad{border-color:#d65454;box-shadow:0 0 0 1px #d65454}
.ck textarea.co-in{resize:vertical;min-height:60px}
.ck .co-row3{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:8px}
.ck .co-hint{font-size:12.5px;color:var(--mute);margin:-2px 0 10px}
.ck .co-chk{display:flex;gap:9px;align-items:center;font-size:13px;margin:6px 0 4px;cursor:pointer}
.ck .co-chk input{width:16px;height:16px;margin:0;accent-color:var(--ink)}
.ck .co-opt{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:13px;margin-bottom:8px;background:var(--field);cursor:pointer}
.ck .co-opt input{margin:2px 0 0;accent-color:var(--ink)}
.ck .co-opt b:first-of-type{flex:1}
.ck .co-opt.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.ck .co-opt span{display:block;font-size:12px;color:var(--mute);font-weight:400;margin-top:2px}
.ck .co-gap{height:6px}
.ck .co-note{display:flex;flex-direction:column;gap:4px;font-size:13px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:0 0 10px;color:var(--mute)}
.ck .co-note b{color:var(--ink);font-weight:600}
.ck .co-soon{font-size:13px;color:var(--mute);border:1px solid var(--line);border-radius:10px;padding:14px 12px}
.ck .co-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:44px;border:0;border-radius:12px;background:var(--btn);color:var(--btnt);font:19px var(--hd);letter-spacing:.02em;margin-top:14px;cursor:pointer}
.ck .co-btn .arrow{width:15px;height:15px}
.ck .co-btn:disabled{opacity:.4;cursor:not-allowed}
.ck .co-err{font-size:13px;color:#e07070;margin:10px 0 0}
.ck .co-sum{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:18px;position:sticky;top:20px}
.ck .co-sum h3{font:400 22px/1 var(--hd);letter-spacing:.02em;margin:0 0 14px}
.ck .co-item{display:flex;gap:10px;margin-bottom:12px;font-size:13px;align-items:center}
.ck .co-item .th{width:52px;height:52px;border-radius:10px;background:#2a2a2a center/cover;flex:none;position:relative}
.ck .co-item .th b{position:absolute;top:-7px;right:-7px;background:var(--ink);color:var(--bg);font:700 11px var(--bd);min-width:20px;height:20px;border-radius:10px;display:grid;place-items:center;padding:0 5px;box-sizing:border-box}
.ck .co-item .n{flex:1;min-width:0}.ck .co-item .n span{display:block;color:var(--mute);font-size:12px}
.ck .co-ln{display:flex;justify-content:space-between;font-size:13px;padding:6px 0;color:var(--mute)}
.ck .co-ln.tot{border-top:1px solid var(--line);padding-top:14px;margin-top:6px;color:var(--ink);font:400 22px/1 var(--hd);letter-spacing:.02em}
.ck .co-code{display:flex;gap:8px;margin:4px 0 10px}
.ck .co-code .co-in{flex:1;min-width:0;text-transform:uppercase;letter-spacing:.04em}
.ck .co-code-btn{flex:none;border:0;border-radius:10px;padding:0 16px;background:var(--btn);color:var(--btnt);font:700 13px var(--bd);cursor:pointer}
.ck .co-code-err{margin:-4px 0 10px}
.ck .co-code-on{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:4px 0 10px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--field);font:700 13px var(--bd);color:var(--ink);letter-spacing:.03em}
.ck .co-code-on button{border:0;background:none;color:var(--mute);font-size:18px;line-height:1;cursor:pointer;padding:0 2px}
.ck .co-ln.co-disc{color:var(--ink);font-weight:700}
.ck .co-back{display:inline-block;font-size:12.5px;color:var(--ink);text-decoration:underline;text-underline-offset:3px;margin-top:12px}
.ck .co-ssl{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mute);margin-top:14px}
.ck .co-ssl svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;flex:none}
@media (max-width:760px){
  .ck .co-wrap{grid-template-columns:1fr;gap:16px;padding:16px}
  .ck .co-sum{order:-1;position:static}
  .ck .co-row3{grid-template-columns:1fr 1fr}
  .ck .co-row3 .co-f:first-child{grid-column:1/-1}
  .ck .co-in{font-size:16px}   /* 16px stops iPhone zooming in on focus */
}

/* ===== layout choices (Website, Edit layout; theme.layout). Default = header A,
   list dropdowns, full main photo: none of these rules apply. ===== */
/* header B: logo centered on its own row, menu centered under it */
@media (min-width:981px){
  .hdr-B .nav{flex-wrap:wrap;justify-content:center;row-gap:6px;position:relative}
  .hdr-B .nav .logo{flex-basis:100%;display:flex;justify-content:center}
  .hdr-B .menu{flex-basis:100%;justify-content:center}
  .hdr-B .right{position:absolute;right:var(--gut);top:14px}
  .top.solid.hdr-B .right,.hdr-B .top.solid .right{top:8px}
  /* header C: menu left, logo dead center, icons right */
  .hdr-C .nav{position:relative}
  .hdr-C .nav .logo{position:absolute;left:50%;transform:translateX(-50%)}
  .hdr-C .right{margin-left:auto}
}
/* dropdown: mega (every department + one featured design), full width under the header */
.dd-mega .nav{position:relative}
.dd-mega .menu>.has-dd:not([data-m="design"]){position:static}
.dd.mega{left:0;right:0;padding-top:0}
.dd.mega>div{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr)) minmax(240px,1.3fr);gap:28px;padding:24px var(--gut);border-left:0;border-right:0}
.dd.mega h6{font:600 13px var(--bd);color:var(--sand);opacity:.8;margin:0 0 6px}
.dd.mega .mcol{display:flex;flex-direction:column;gap:2px}
.dd.mega .mfeat{display:flex;flex-direction:column;gap:8px;opacity:1}
.dd.mega .mfeat img{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--ink)}
.dd.mega .mfeat span{display:flex;align-items:center;gap:8px}
/* dropdown: list + preview */
.dd.two>div{display:grid;grid-template-columns:220px 480px;gap:0;padding:0}
.dd.two .tl{display:flex;flex-direction:column;gap:4px;padding:16px 20px;border-right:1px solid var(--line)}
.dd.two .tl a.on{opacity:1;text-decoration:underline;text-underline-offset:5px}
.dd.two .tr{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:16px 20px;align-content:start}
.dd.two .tr a{display:flex;flex-direction:column;gap:4px;font:18px var(--hd);opacity:.9}
.dd.two .tr .pic{aspect-ratio:1;background:var(--sand);display:block;overflow:hidden}
.dd.two .tr img{width:100%;height:100%;object-fit:contain}
.dd.two .tr em{font:13px var(--bd);font-style:normal;opacity:.7}
.dd.two .none{font:14px var(--bd);opacity:.6;grid-column:1/-1}
/* dropdown: design grid (pictures) */
.dd.dgrid{left:auto;right:-18px}
.dd.dgrid>div{grid-template-columns:repeat(4,130px);gap:14px;padding:18px 20px}
.dd.dgrid a{display:flex;flex-direction:column;gap:6px;font:19px var(--hd)}
.dd.dgrid .pic{aspect-ratio:1;background:var(--sand);display:block;overflow:hidden}
.dd.dgrid img{width:100%;height:100%;object-fit:contain}
/* main photo: words left, photo right */
.hero.split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:40px;padding:170px var(--gut) 60px}
.hero.split>img{position:static;width:100%;height:min(70vh,640px);object-fit:cover;animation:none}
.hero.split h1{font-size:clamp(40px,4.5vw,72px)}
/* main photo: words only, centered */
.hero.text{min-height:62vh;display:flex;align-items:center;justify-content:center;text-align:center}
.hero.text .row{justify-content:center;flex-direction:column;align-items:center}
/* our story */
.sec.story{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.sec.story img{width:100%;aspect-ratio:4/3;object-fit:cover}
.sec.story p{font-size:18px;line-height:1.6;opacity:.85;max-width:560px;white-space:pre-line}
@media (max-width:980px){
  .hero.split{grid-template-columns:1fr;padding-top:130px}.hero.split>img{height:56vh}
  .sec.story{grid-template-columns:1fr;gap:24px}
}
/* the generic `.dd div` box (bg, border, padding) is for the panel itself, not the blocks inside it */
.dd.mega .mcol,.dd.two .tl,.dd.two .tr{background:none;border-top:0;border-bottom:0;border-left:0;min-width:0}
.dd.mega .mcol{border-right:0;padding:0}
/* Edit layout preview (app): force a dropdown open, flash the section just picked */
.force-dept #menu>.has-dd:first-child .dd,.force-designs #menu [data-m="design"] .dd{display:block}
.lay-flash{animation:layfl 1.4s ease}
@keyframes layfl{0%{box-shadow:inset 0 0 0 3px rgba(43,197,192,.9)}100%{box-shadow:inset 0 0 0 3px rgba(43,197,192,0)}}

/* Designs section: one banner per design (2026-10-07, option C) */
.dbans{display:grid;gap:22px}
.dban{display:grid;grid-template-columns:1.6fr 1fr;border:1px solid var(--line);color:var(--paper);text-decoration:none;overflow:hidden}
.dban:not(:has(.dpics)){grid-template-columns:1fr}
.dpics{display:grid;grid-template-columns:repeat(2,1fr);background:#fff}
.dpics.n1{grid-template-columns:1fr}
.dpics img{display:block;width:100%;height:340px;object-fit:contain;transition:transform .7s var(--ease)}
.dban:hover .dpics img{transform:scale(1.03)}
.dtx{display:flex;flex-direction:column;justify-content:center;gap:14px;padding:32px 36px}
.dtx b{font:400 clamp(44px,5vw,76px)/.9 var(--hd)}
.dtx p{margin:0;color:#bdb6aa;line-height:1.6;max-width:40ch}
.dcount{font-size:13px;color:#8b857b}
.dtx .lnk{align-self:flex-start}
@media (max-width:760px){.dban{grid-template-columns:1fr}.dpics img{height:220px}.dtx{padding:22px}}

/* Help pages: contact + policies (2026-10-07) */
.hp{display:grid;grid-template-columns:220px minmax(0,680px);gap:60px;padding:10px var(--gut) 110px}
.hp-side a{display:block;padding:7px 0;font-size:14px;opacity:.55}.hp-side a.on{opacity:1;font-weight:700}.hp-side a:hover{opacity:1}
.hp-txt{font-size:15.5px;line-height:1.75;opacity:.88;white-space:pre-wrap}
.hp-facts{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}.hp-facts span{border:1px solid #3a3a3a;padding:8px 12px;font-size:13px;opacity:.85}
.hp-ct{display:grid;gap:24px}.hp-ct .k{font:20px var(--hd);opacity:.55}.hp-ct .v{font-size:18px;margin-top:4px}
.hp-ct .v a{border-bottom:1px solid currentColor;padding-bottom:1px}
.hp-soc{display:flex;gap:16px;flex-wrap:wrap;margin-top:6px}.hp-soc a{font:20px var(--hd);border-bottom:2px solid currentColor}
@media (max-width:760px){.hp{grid-template-columns:1fr;gap:22px}.hp-side{display:flex;gap:18px;overflow-x:auto;white-space:nowrap}}

/* size guide over the product panel */
.sg{position:absolute;inset:0;z-index:5;background:var(--paper);color:var(--ink);overflow:auto;padding:28px 26px 30px}
.sg[hidden]{display:none}
.sg h4{font:400 40px/1 var(--hd);margin:6px 0 4px}
.sg-sub{font-size:13px;opacity:.6;margin-bottom:16px}
.sg-unit{display:inline-flex;border:1px solid var(--sand2);margin-bottom:16px}
.sg-unit button{border:0;background:none;padding:7px 14px;font-weight:700;font-size:13px;cursor:pointer;color:var(--ink)}
.sg-unit button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.sg table{width:100%;border-collapse:collapse;font-size:14px}
.sg th,.sg td{padding:11px 8px;text-align:left;border-bottom:1px solid var(--sand2)}
.sg th{font:400 18px var(--hd);opacity:.6}
.sg tr.me td{background:#fff;font-weight:700}
.sg-how{font-size:12.5px;line-height:1.6;opacity:.75;margin-top:18px}

/* you may also like (product panel) */
.ym{border-top:1px solid var(--sand2);margin-top:22px;padding-top:18px}
.ym h5{font:400 26px var(--hd);margin:0 0 12px}
.ymr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ym-c{background:none;border:0;padding:0;text-align:left;cursor:pointer;color:var(--ink);font:inherit}
.ym-c .pic{display:block;aspect-ratio:4/5;background:#fff;border:1px solid #e3ded4;overflow:hidden}
.ym-c img{width:100%;height:100%;object-fit:contain;transition:transform .5s var(--ease)}.ym-c:hover img{transform:scale(1.04)}
.ym-c b{display:block;font:18px/1 var(--hd);margin-top:7px}.ym-c span:last-child{font-size:12.5px;opacity:.7}

/* search */
body.so-on{overflow:hidden}
.so{position:fixed;inset:0;z-index:45;background:var(--ink);overflow:auto;padding:24px var(--gut) 60px}
.so[hidden]{display:none}
.so-in{max-width:1240px;margin:0 auto}
.so-box{display:flex;align-items:center;gap:14px;border-bottom:2px solid var(--paper);padding-bottom:10px}
.so-box .ic{width:26px;height:26px;flex:none;opacity:.8}
.so-box input{flex:1;min-width:0;background:none;border:0;color:var(--paper);font:400 clamp(30px,5vw,48px)/1.1 var(--hd);outline:none;-webkit-appearance:none}
.so-box input::placeholder{color:var(--paper);opacity:.35}
.so-box input::-webkit-search-cancel-button{display:none}
.so-x{background:none;border:0;color:var(--paper);font-size:22px;cursor:pointer;opacity:.7;padding:6px}
.so-lab{font:20px var(--hd);opacity:.5;margin:24px 0 12px}
.so-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.so-p{background:none;border:0;padding:0;text-align:left;cursor:pointer;color:var(--paper);font:inherit}
.so-p .pic{display:block;aspect-ratio:4/5;background:#fff;overflow:hidden}.so-p img{width:100%;height:100%;object-fit:contain}
.so-p b{display:block;font:21px/1 var(--hd);margin-top:9px}.so-p span:last-child{font-size:13px;opacity:.7}
.so mark{background:none;color:inherit;text-decoration:underline;text-underline-offset:3px}
.so-ds{display:flex;gap:10px;flex-wrap:wrap}.so-ds a{border:1px solid #3a3a3a;padding:9px 15px;font-size:14px}
.so-none{opacity:.75;margin-top:26px}.so-none a{text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){.so-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}

/* sold-out sizes + notify me when it's back */
.chips button.out{color:#8f8a80;background:repeating-linear-gradient(135deg,transparent 0 6px,rgba(0,0,0,.06) 6px 7px)}
.chips button.out[aria-pressed="true"]{background:#fff;color:var(--ink);border:2px solid var(--ink)}
.nf{margin:0}
.nf b{display:block;font:400 22px var(--hd)}
.nf p{margin:4px 0 10px;font-size:13px;opacity:.75}
.nf-row{display:flex}
.nf-row input{flex:1;min-width:0;height:48px;border:1px solid var(--sand2);border-right:0;padding:0 12px;font-size:15px;background:#fff;color:var(--ink);border-radius:2px 0 0 2px}
.nf-row button{height:48px;padding:0 18px;background:var(--ink);color:var(--paper);border:0;font:400 22px var(--hd);cursor:pointer;border-radius:0 2px 2px 0}
.nf-row button:disabled{opacity:.6}
.nf-err{display:block;margin-top:8px;font-size:13px;color:#b42318}
.nf-ok{display:flex;gap:10px;align-items:center;font-size:14px;padding:14px;border:1px solid var(--sand2)}
.nf-ok svg{color:#2e8b57;flex:none}
/* Site editor part 5: collection page options */
.cp-grid.c3 .grid{grid-template-columns:repeat(3,1fr)}
.cp-grid.sq .tile .pic{aspect-ratio:1}
.cp-grid.nohov .tile:hover .f{opacity:1;transform:none}.cp-grid.nohov .tile:hover .b{opacity:0}
@media (max-width:980px){.cp-grid.c3 .grid{grid-template-columns:repeat(2,1fr)}}
/* Site editor part 6: the shop's own pages */
.pbs{padding:130px 0 40px}
.pb-head{padding:40px var(--gut) 30px}.pb-head h1{font:400 clamp(48px,7vw,100px)/.92 var(--hd);margin:0}.pb-head p{max-width:620px;font-size:18px;line-height:1.55;opacity:.8;margin:18px 0 0}
.pb-split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:50px var(--gut)}
.pb-split img,.pb-split .pb-noimg{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:rgba(255,255,255,.06)}
.pb-split.r img,.pb-split.r .pb-noimg{order:2}
.pb-split.solo{grid-template-columns:1fr;max-width:820px}
.pb-split h2{margin-bottom:16px}.pb-split p,.pb-text p{font-size:17px;line-height:1.65;opacity:.85;margin:0 0 14px}
.pb-photo img{width:100%;height:min(70vh,640px);object-fit:cover;display:block}
.pb-text{padding:40px var(--gut);max-width:820px}
.pb-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:20px var(--gut)}.pb-gal img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.pb-faq{padding:40px var(--gut);max-width:900px}.pb-faq h2{margin-bottom:18px}
.pb-faq details{border-top:1px solid var(--line)}.pb-faq details:last-child{border-bottom:1px solid var(--line)}
.pb-faq summary{list-style:none;cursor:pointer;padding:18px 0;font-weight:700;font-size:17px;display:flex;justify-content:space-between;gap:16px}
.pb-faq summary::-webkit-details-marker{display:none}.pb-faq summary::after{content:"+";font-weight:400}.pb-faq details[open] summary::after{content:"\2212"}
.pb-faq details div{padding:0 0 16px}.pb-faq details p{margin:0 0 10px;opacity:.8;line-height:1.6}
.pb-prods{padding:50px var(--gut)}.pb-prods h2{margin-bottom:24px}
.pb-btn{padding:30px var(--gut) 50px}
/* .pb.se-hl: the editor's selection box (#se-selbox) outlines the open section now */
@media (max-width:980px){.pb-split{grid-template-columns:1fr;gap:22px}.pb-split.r img,.pb-split.r .pb-noimg{order:0}.pb-gal{grid-template-columns:repeat(2,1fr)}.pbs{padding-top:100px}.pb-head{padding-top:20px}}
/* Email signup section (Site editor; preview only until emails are saved) */
.su .mail{width:100%}.su p{opacity:.8;font-size:17px;line-height:1.5;margin:14px 0 26px;max-width:520px}
.su-fine{font-size:12px;opacity:.5;margin-top:10px}
.su-ok{display:flex;align-items:center;gap:10px;font-size:16px;min-height:54px}.su-ok svg{color:#5cc28a;flex:none}
.su-a{padding:100px var(--gut);text-align:center;display:flex;flex-direction:column;align-items:center}
.su-a .su-f{width:100%;max-width:520px;display:flex;flex-direction:column;align-items:center}.su-a .su-ok{justify-content:center}
.su-b{display:grid;grid-template-columns:1fr 1fr;min-height:440px}
.su-b>img,.su-b .su-noimg{width:100%;height:100%;object-fit:cover;display:block;background:rgba(255,255,255,.06)}
.su-b .su-w{padding:60px 48px;display:flex;flex-direction:column;justify-content:center}.su-b .su-f{max-width:520px}
.su-c{display:flex;align-items:center;gap:32px;flex-wrap:wrap;padding:46px var(--gut);background:color-mix(in srgb,var(--fg,#efece6) 4%,transparent)}
.su-c .su-w{flex:1;min-width:240px}.su-c h2{font-size:clamp(28px,3vw,40px)}.su-c p{margin:6px 0 0;font-size:15px}
.su-c .su-f{flex:1;min-width:280px;max-width:520px;display:flex;flex-direction:column;align-items:flex-end}.su-c .su-fine{text-align:right}
@media (max-width:980px){.su-b{grid-template-columns:1fr}.su-b>img,.su-b .su-noimg{height:240px}.su-b .su-w{padding:34px var(--gut)}.su-c{flex-direction:column;align-items:stretch}.su-c .su-f{align-items:stretch}.su-c .su-fine{text-align:left}.su-a{padding:70px var(--gut)}}
/* header D: the search box in the header (menu left, search + bag right) */
.hs{display:none;position:relative}
.hdr-D .hs{display:block;margin-left:auto;flex:0 1 340px;min-width:200px}
.hdr-D .right{margin-left:0}.hdr-D #srch-btn{display:none}
.hs .ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:19px;height:19px;opacity:.6;pointer-events:none}
.hs input{width:100%;height:42px;border:1px solid color-mix(in srgb,var(--fg,#efece6) 25%,transparent);background:color-mix(in srgb,var(--bg,#0b0b0b) 80%,transparent);color:var(--fg,var(--paper));border-radius:var(--rad,2px);padding:0 14px 0 40px;font:15px var(--bd);outline:none}
.hs input::placeholder{color:currentColor;opacity:.5}.hs input:focus{border-color:color-mix(in srgb,var(--fg,#efece6) 55%,transparent)}
.hs input::-webkit-search-cancel-button{display:none}
.hs-d{position:absolute;left:0;right:0;top:calc(100% + 4px);background:var(--paper);color:var(--ink);box-shadow:0 18px 40px rgba(0,0,0,.45);padding:8px;z-index:40;min-width:300px}
.hs-lab,.hs-none{font-size:12px;font-weight:700;opacity:.6;padding:6px 8px;margin:0}
.hs-p{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:none;border:0;padding:7px 8px;cursor:pointer;color:inherit;font:inherit}
.hs-p:hover{background:rgba(0,0,0,.06)}
.hs-p .pic{width:46px;height:46px;background:#fff;border:1px solid #e1dbd0;flex:none;display:grid;place-items:center}.hs-p .pic img{max-width:100%;max-height:100%;object-fit:contain}
.hs-p b{display:block;font:400 19px/1.05 var(--hd)}.hs-p em{font-style:normal;font-size:13px;opacity:.65}
.hs-p mark{background:rgba(43,197,192,.3);color:inherit}
.hs-all{display:block;width:100%;border:0;border-top:1px solid #ddd6ca;background:none;padding:10px;margin-top:4px;font:700 13px var(--bd);color:inherit;cursor:pointer}
@media (max-width:980px){
  .hdr-D .nav{flex-wrap:wrap;row-gap:10px}
  .hdr-D .hs{order:5;flex:1 1 100%;margin-left:0}
  .hdr-D .right{margin-left:auto}
}
/* walk-through fixes (2026-10-08) */
.thanks .lnk{align-self:flex-start}
.acc details[open] summary:after{content:"\2212";transform:none}
@media (min-width:981px){.grid.n2{grid-template-columns:repeat(2,1fr)}.grid.n3{grid-template-columns:repeat(3,1fr)}}
/* Payment step: Stripe's card box (2026-10-12) */
.ck .co-card{min-height:120px;margin:2px 0 4px}
.thanks .ty-num{font:22px var(--hd);letter-spacing:.03em;margin:-4px 0 10px}

/* ── Art grid options (2026-10-18) ── */
.hero .pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.hero .pills a{border:1px solid currentColor;border-radius:999px;padding:6px 16px;font-size:14px;opacity:.9}
.hero .pills a:hover{opacity:1;background:rgba(255,255,255,.08)}
.seeall{text-align:center;margin-top:28px}
.seeall a{display:inline-block;border:1px solid currentColor;padding:13px 28px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:13px}
.dstrip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,22%);gap:14px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory}
.dstrip a{scroll-snap-align:start}
.dstrip .pic{display:block;aspect-ratio:1/1;background:#f2f0ea;overflow:hidden}
.dstrip .pic img{width:100%;height:100%;object-fit:contain;padding:14px;box-sizing:border-box}
.dstrip .nm{display:flex;justify-content:space-between;gap:8px;padding:10px 2px;font-size:14px}
.dstrip .nm em{font-style:normal;opacity:.55}
.sec.story.band{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;max-width:none;background:var(--ink,#111);color:#f2efe8}
.sec.story.band h2{margin:0;font-size:clamp(44px,6vw,84px);line-height:.9}
.sec.story.band p{opacity:.8;margin:0}
@media (max-width:760px){.dstrip{grid-auto-columns:62%}.sec.story.band{grid-template-columns:1fr;gap:16px}}
/* Site editor step 2 (2026-10-18): the section toolbar in the editor's preview only */
#se-tools,#se-selbox{position:fixed;z-index:2147483000;pointer-events:none;box-sizing:border-box}
#se-tools[hidden],#se-selbox[hidden],#se-tools [hidden]{display:none!important}
#se-tools{outline:2px solid rgba(43,197,192,.6);outline-offset:-2px}
#se-selbox{outline:2px solid #2bc5c0;outline-offset:-2px;z-index:2147482999}
#se-tools .se-tag{position:absolute;top:0;left:0;background:#2bc5c0;color:#fff;font:600 11px/1 'DM Sans',system-ui,sans-serif;padding:5px 8px;border-radius:0 0 6px 0}
#se-tools .se-mini{position:absolute;top:30px;left:8px;display:flex;gap:2px;background:#111;border-radius:8px;padding:3px;box-shadow:0 6px 16px rgba(0,0,0,.35);pointer-events:auto}
#se-tools .se-mini button{display:inline-flex;align-items:center;gap:4px;height:26px;border:0;background:none;color:#fff;border-radius:6px;padding:0 9px;font:600 11.5px 'DM Sans',system-ui,sans-serif;cursor:pointer}
#se-tools .se-mini button:hover{background:#333}
#se-tools .se-mini button.e{background:#2bc5c0}
#se-tools .se-plus{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);width:28px;height:28px;border:0;border-radius:50%;background:#2bc5c0;color:#fff;font:700 18px/1 'DM Sans',system-ui,sans-serif;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.3);pointer-events:auto}
/* Step 3: words you can type over, in the editor's preview only */
[data-se-txt]{outline:none;border-radius:3px;cursor:text}
[data-se-txt]:hover{box-shadow:0 0 0 1px rgba(43,197,192,.75)}
[data-se-txt]:focus{box-shadow:0 0 0 2px #2bc5c0;background:rgba(43,197,192,.07)}
[data-se-txt][data-se-empty]{position:relative;min-height:1.6em}
[data-se-txt][data-se-empty]::before{content:"Type your words here";position:absolute;left:0;top:0;opacity:.45;pointer-events:none}
/* fixes 2026-10-18: Change photo, in the editor's preview only */
#se-photo{position:fixed;z-index:2147483001;display:flex;gap:4px}
#se-photo button{height:30px;border:0;border-radius:8px;padding:0 12px;background:#2bc5c0;color:#fff;font:600 12px 'DM Sans',system-ui,sans-serif;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.35)}
#se-photo button+button{background:#111}
#se-photo [hidden]{display:none}
#se-photo[hidden]{display:none}

/* empty photo spots in the editor's preview: visible on light and dark themes */
.pb-split .pb-noimg,.pb-photo .pb-noimg{background:rgba(127,127,127,.16)!important}
.pb-photo .pb-noimg{display:block;height:min(50vh,420px)}
span[data-se-txt][data-se-empty]{display:inline-block;min-width:12em}

/* ===== order status page (2026-10-24, store_order_status.sql) ===== */
.os .os-hd small{opacity:.65;font-size:14px}
.os .os-hd h1{margin:8px 0 10px}
.os .os-hd p{opacity:.8;font-size:18px;margin:0;max-width:620px}
.os-wait{opacity:.7}
.os-body{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start;margin-top:32px}
.os-pkg,.os-box{border:1px solid var(--line);border-radius:14px;background:var(--ink2);padding:18px}
.os-main{display:flex;flex-direction:column;gap:16px}.os-side{display:flex;flex-direction:column;gap:14px}
.os-pkg-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.os-pkg-h b{font:400 24px/1 var(--hd);letter-spacing:.02em}.os-pkg-h span{opacity:.65;font-size:14px}
.os-steps{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));margin:18px 0 8px}
.os-st{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;position:relative;font-size:13px;opacity:.55}
.os-st::before{content:"";position:absolute;top:10px;left:-50%;right:50%;height:2px;background:var(--line)}
.os-st:first-child::before{display:none}
.os-st.done,.os-st.now{opacity:1}.os-st.done::before,.os-st.now::before{background:var(--paper)}
.os-st.now{font-weight:700}
.os-dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);background:var(--ink2);position:relative;z-index:1;display:grid;place-items:center}
.os-st.done .os-dot{background:var(--paper);border-color:var(--paper)}
.os-st.now .os-dot{border-color:var(--paper);box-shadow:0 0 0 4px color-mix(in srgb,var(--paper) 18%,transparent)}
.os-dot svg{width:12px;height:12px;fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.os-trk{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:14px;padding-top:14px}
.os-trk div{font-size:14px;line-height:1.45;min-width:0;overflow-wrap:anywhere}.os-trk div span{display:block;opacity:.65;font-size:13px}
.os-trk .btn{height:44px;font-size:20px;padding:0 20px}
.os-items{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.os-it{display:flex;gap:12px;align-items:center;font-size:14px}
.os-th{width:52px;height:52px;border-radius:10px;background:#2a2a2a center/cover;flex:none}
.os-nm{flex:1;min-width:0}.os-nm small{display:block;opacity:.65;font-size:12.5px}
.os-box h3{font:400 22px/1 var(--hd);letter-spacing:.02em;margin:0 0 10px}
.os-box p{margin:0;opacity:.85;font-size:14px;line-height:1.55}
.os-a{text-decoration:underline;text-underline-offset:3px}
.os-ln{display:flex;justify-content:space-between;font-size:14px;padding:5px 0;opacity:.85;font-variant-numeric:tabular-nums}
.os-ln.tot{border-top:1px solid var(--line);margin-top:6px;padding-top:12px;opacity:1;font:400 22px/1 var(--hd);letter-spacing:.02em}
.os-find{max-width:440px;display:flex;flex-direction:column;gap:14px}
.os-find p{margin:0;opacity:.8}
.os-find label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;opacity:.9}
.os-find input{height:48px;border-radius:10px;border:1px solid var(--line);background:var(--ink2);padding:0 14px;font-size:15px}
.os-find .btn{margin-top:4px}
.os-err{color:#e07070!important;opacity:1!important}
.os-small{font-size:13px}
@media (max-width:800px){.os-body{grid-template-columns:1fr}.os-st{font-size:11.5px}}
/* ===== canvas pages (Site editor 2026-10-24): sections are 12-column grids of blocks ===== */
.cv{background:var(--cvbg);color:var(--cvfg);padding:56px var(--gut);position:relative}
.cv.cv-sp-s{padding-top:28px;padding-bottom:28px}.cv.cv-sp-l{padding-top:100px;padding-bottom:100px}
#view > section.cv:first-of-type{padding-top:150px}#view > section.cv.cv-sp-s:first-of-type{padding-top:122px}#view > section.cv.cv-sp-l:first-of-type{padding-top:194px}
.cv-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));max-width:1240px;margin:0 auto;position:relative}
.cv-b{position:relative;min-width:0;margin:4px}
.cv-fill{display:block;width:100%;height:100%}
.cv-text{height:100%;display:flex;flex-direction:column}
.cv-text p{margin:0 0 .8em}.cv-text p:last-child{margin-bottom:0}
.cv-photo{position:relative;width:100%;height:100%;overflow:hidden;background:color-mix(in srgb,var(--cvfg) 8%,transparent)}
.cv-photo.shadow{box-shadow:0 14px 32px rgba(0,0,0,.45)}
.cv-photo img{position:absolute;inset:0;width:100%;height:100%;display:block}   /* the block sets the size; the photo never stretches the grid rows */
.cv-photo .cv-dark{position:absolute;inset:0;background:#000;pointer-events:none}
.cv-gal{height:100%;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:var(--gap);align-content:start;overflow:hidden}
.cv-gal img{width:100%;display:block;object-fit:cover}
.cv-gal.row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}.cv-gal.row img{flex:0 0 calc(100% / var(--cols) - var(--gap));height:100%;scroll-snap-align:start}
.cv-gal.collage{grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr}.cv-gal.collage img{height:100%}.cv-gal.collage img:first-child{grid-row:span 2}.cv-gal.collage img:nth-child(n+6){display:none}
.cv-bwrap{height:100%;display:flex;align-items:center}
.cv-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:20px var(--hd);height:46px;padding:0 22px;white-space:nowrap;transition:filter .15s}
.cv-btn.s{height:36px;padding:0 14px;font-size:17px}.cv-btn.l{height:58px;padding:0 30px;font-size:24px}
.cv-btn.solid{background:var(--cvfg);color:var(--cvbg)}.cv-btn.solid.acc{background:var(--cv-accent);color:var(--cvbg)}
.cv-btn.outline{border:2px solid currentColor}.cv-btn.outline.acc,.cv-btn.link.acc{color:var(--cv-accent)}
.cv-btn.link{border-bottom:2px solid currentColor;padding:0 2px;height:auto}
.cv-btn.fill{width:100%}
.cv-btn:hover{filter:brightness(.88)}
.cv-prods{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:24px 14px;align-content:start}
.cv-prods.sq .tile .pic{aspect-ratio:1/1}.cv-prods.noprice .tile .pr{display:none}.cv-prods.nohover .tile .pic .b{display:none}
.cv-prods .tile{color:inherit}
/* Ordering page block (2026-11-02): the shop's order.html in a frame that grows with it ("Fit content"),
   or keeps the block's size and scrolls inside ("Fixed"). In Edit mode clicks go to the block, not the page. */
.cv-order{height:100%;min-height:100%}
.cv-order iframe{display:block;width:100%;height:640px;border:0;background:transparent;color-scheme:normal}
.cv-order.fixed iframe{height:100%}
.cv-editing .cv-order iframe{pointer-events:none}
.cv-empty{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:40px;border-radius:4px;background:color-mix(in srgb,var(--cvfg) 8%,transparent);font:600 13px var(--bd);opacity:.7}
@media (max-width:760px){
  .cv{padding:36px var(--gut)}.cv.cv-sp-s{padding:20px var(--gut)}.cv.cv-sp-l{padding:64px var(--gut)}
  #view > section.cv:first-of-type{padding-top:110px}
  .cv-grid{display:flex;flex-direction:column;gap:14px}
  .cv-b{margin:0}
  .cv-photo,.cv-fill{height:auto}.cv-photo{aspect-ratio:var(--ar)}
  .cv-gal{height:auto}.cv-gal.collage{height:var(--ph)}
  .cv-space{height:var(--ph)}
  .cv-bwrap{height:auto}
  .cv-prods{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ----- canvas editing, Site editor preview only (body.cv-editing) ----- */
.cv-editing .cv:hover{outline:2px solid rgba(43,197,192,.45);outline-offset:-2px}
.cvx-tag{all:unset;cursor:pointer;position:absolute;top:0;left:0;display:flex;align-items:center;gap:5px;background:#2bc5c0;color:#fff;font:600 11.5px "DM Sans",system-ui,sans-serif;padding:4px 9px;border-radius:0 0 6px 0;opacity:0;z-index:520}
.cvx-tag svg{width:12px;height:12px}.cvx-tag:hover{background:#1fa8a4}
.cv:hover>.cvx-tag,.cv.cvx-secon>.cvx-tag{opacity:1}
.cvx-gl{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .15s;z-index:0;background-image:repeating-linear-gradient(90deg,rgba(43,197,192,.24) 0 1px,transparent 1px calc(100%/12)),repeating-linear-gradient(180deg,rgba(43,197,192,.12) 0 1px,transparent 1px 28px);border-right:1px solid rgba(43,197,192,.24)}
.cv:hover .cvx-gl,.cvx-dragging .cvx-gl,.cvx-resizing .cvx-gl{opacity:1}
.cv-editing .cv-b{cursor:grab;outline:1.5px solid transparent;outline-offset:2px;touch-action:none}
.cv-editing .cv-b:hover{outline-color:rgba(43,197,192,.75)}
.cv-editing .cv-b [contenteditable]{cursor:text;outline:none}
.cv-b.lift{opacity:.3}
.cvx-frame{position:relative;margin:4px;outline:2px solid #2bc5c0;outline-offset:2px;border-radius:2px;pointer-events:none;z-index:500}
.cvx-rz{position:absolute;right:-7px;bottom:-7px;width:12px;height:12px;border-radius:3px;background:#2bc5c0;border:2px solid #fff;cursor:nwse-resize;pointer-events:auto;touch-action:none}
.cvx-tb{position:absolute;left:-6px;bottom:calc(100% + 10px);display:flex;align-items:center;gap:2px;padding:4px;background:#fff;color:#1f2326;border-radius:10px;box-shadow:0 8px 22px rgba(0,0,0,.35);pointer-events:auto;white-space:nowrap;font-family:"DM Sans",system-ui,sans-serif}
.cvx-tb.low{bottom:auto;top:calc(100% + 10px)}
.cvx-tb button{all:unset;cursor:pointer;height:30px;min-width:30px;padding:0 8px;border-radius:7px;display:flex;align-items:center;justify-content:center;gap:6px;font:600 12.5px "DM Sans",system-ui,sans-serif;color:#5b6268}
.cvx-tb button:hover{background:#f2f3f4;color:#1f2326}
.cvx-tb button.ed{background:#2bc5c0;color:#fff;padding:0 12px}.cvx-tb button.ed:hover{background:#1fa8a4}
.cvx-tb button.rm:hover{color:#c4483a}
.cvx-tb button:disabled{opacity:.3;cursor:default;background:none}
.cvx-tb .sp{width:1px;height:20px;background:rgba(0,0,0,.1);margin:0 3px}
.cvx-ghost{position:relative;margin:4px;border-radius:4px;background:rgba(43,197,192,.28);outline:2px solid #2bc5c0;z-index:600;pointer-events:none}
.cvx-ghost span,.cvx-resizing .cvx-frame::after{position:absolute;right:0;top:-24px;background:#2bc5c0;color:#fff;font:600 11px "DM Sans",system-ui,sans-serif;padding:2px 6px;border-radius:4px}
.cvx-add{all:unset;cursor:pointer;position:absolute;top:10px;left:118px;z-index:9;height:32px;padding:0 12px;border-radius:8px;background:#fff;color:#1f2326;font:600 13px "DM Sans",system-ui,sans-serif;display:flex;align-items:center;gap:6px;box-shadow:0 4px 14px rgba(0,0,0,.3);opacity:0;transition:opacity .12s}
.cvx-add svg{color:#1a9e9a}
.cv:hover>.cvx-add,.cvx-add.mid{opacity:1}
.cvx-add.mid{top:50%;left:50%;right:auto;transform:translate(-50%,-50%);height:38px;padding:0 16px;background:#2bc5c0;color:#fff}.cvx-add.mid svg{color:#fff}
.cvx-sec{display:flex;justify-content:center;height:0;position:relative;z-index:20}
.cvx-sec button{all:unset;cursor:pointer;transform:translateY(-50%);height:30px;padding:0 13px;border-radius:15px;background:#2bc5c0;color:#fff;font:600 12.5px "DM Sans",system-ui,sans-serif;display:flex;align-items:center;gap:6px;box-shadow:0 4px 12px rgba(0,0,0,.3);opacity:0;transition:opacity .12s}
#view:hover .cvx-sec button,.cvx-sec.alone button{opacity:1}
.cvx-sec.top button{transform:translateY(0);margin-top:118px}
.cvx-sec.alone{height:auto;padding:170px 20px 110px;flex-direction:column;align-items:center;gap:6px;text-align:center;font-family:"DM Sans",system-ui,sans-serif}
.cvx-sec.alone b{font-size:18px}.cvx-sec.alone span{font-size:13.5px;opacity:.6;margin-bottom:12px}
.cvx-sec.alone button{transform:none;margin:0;height:38px;padding:0 18px;font-size:14px}
.cvx-panel{position:absolute;top:52px;left:14px;z-index:40;width:340px;background:#fff;color:#1f2326;border-radius:12px;box-shadow:0 18px 44px rgba(0,0,0,.45);font-family:"DM Sans",system-ui,sans-serif;overflow:hidden}
.cvx-panel.mid{top:50%;left:50%;transform:translate(-50%,-50%)}
.cvx-panel .h{display:flex;align-items:center;height:44px;padding:0 8px 0 16px;border-bottom:1px solid rgba(0,0,0,.1);font:700 14px "DM Sans",system-ui,sans-serif}
.cvx-panel .h button{all:unset;cursor:pointer;margin-left:auto;width:30px;height:30px;display:grid;place-items:center;border-radius:7px;color:#8a9196}
.cvx-panel .t{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:12px}
.cvx-tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border:1px solid rgba(0,0,0,.1);border-radius:8px;cursor:grab;user-select:none;touch-action:none;text-align:center}
.cvx-tile:hover{border-color:#2bc5c0}.cvx-tile svg{width:22px;height:22px;color:#5b6268}
.cvx-tile b{font:600 12.5px "DM Sans",system-ui,sans-serif}.cvx-tile small{font:500 11px "DM Sans",system-ui,sans-serif;color:#8a9196;margin-top:-3px}
.cvx-panel p{margin:0;padding:0 14px 12px;font:12px/1.45 "DM Sans",system-ui,sans-serif;color:#8a9196}
.cvx-dragging .cvx-panel{opacity:.35;pointer-events:none}
.cvx-dragging,.cvx-dragging *{cursor:grabbing!important;user-select:none}.cvx-resizing,.cvx-resizing *{cursor:nwse-resize!important;user-select:none}
.cvx-float{position:fixed;z-index:999;pointer-events:none;background:#fff;color:#1f2326;border:1px solid #2bc5c0;border-radius:8px;padding:8px 12px;font:600 13px "DM Sans",system-ui,sans-serif;display:flex;gap:8px;align-items:center;box-shadow:0 10px 24px rgba(0,0,0,.3);transform:translate(-50%,-50%)}
#view > section.cv:first-of-type > .cvx-add:not(.mid),#view > section.cv:first-of-type > .cvx-tag{top:104px}#view > section.cv:first-of-type > .cvx-tag{border-radius:0 6px 6px 0}
#view > section.cv:first-of-type > .cvx-panel:not(.mid){top:146px}
/* a store-made Home section kept whole inside a canvas block: its own side padding goes, the block places it */
.cv-store{width:100%}
.cv-store>section{padding-left:0!important;padding-right:0!important;padding-top:0!important;padding-bottom:0!important;border:0;background:transparent;color:inherit}
.cv-store>section.su,.cv-store>section.join{padding:24px 0!important}
/* a full-width section runs edge to edge: photos touch the sides, words and buttons keep the page margin */
.cv.full{padding-left:0;padding-right:0}.cv.full .cv-grid{max-width:none}
.cv.cv-sp-none{padding-top:0;padding-bottom:0}#view > section.cv.cv-sp-none:first-of-type{padding-top:0}
.cv.full .cv-b.cv-photo,.cv.full .cv-b.cv-gallery{margin:0}
.cv.full .cv-b.edge-l:not(.cv-photo):not(.cv-gallery){margin-left:var(--gut)}.cv.full .cv-b.edge-r:not(.cv-photo):not(.cv-gallery){margin-right:var(--gut)}
@media (max-width:760px){.cv.full .cv-b.edge-l:not(.cv-photo):not(.cv-gallery),.cv.full .cv-b.edge-r:not(.cv-photo):not(.cv-gallery){margin-left:var(--gut);margin-right:var(--gut)}}
body:not(.se-edit-on) .cv.bare{display:none}   /* browsing in the editor looks like the live store */
.cv.cvx-secon{outline:2px solid #2bc5c0!important;outline-offset:-2px}   /* the section whose card is open */
/* drag a section's bottom edge to make it taller or shorter (2026-10-25) */
.cvx-sz{position:absolute;right:14px;bottom:8px;z-index:530;width:64px;height:14px;border-radius:4px;background:#2bc5c0;cursor:ns-resize;display:grid;place-items:center;opacity:0;transition:opacity .12s;touch-action:none;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.cvx-sz i{width:26px;height:4px;border-top:1.5px solid #fff;border-bottom:1.5px solid #fff}
.cv:hover>.cvx-sz,.cv.cvx-sizing>.cvx-sz,.cv.cvx-secon>.cvx-sz{opacity:1}
.cv.cvx-sizing{outline:2px solid #2bc5c0!important;outline-offset:-2px}
.cv.cvx-sizing .cvx-gl{opacity:1}
.cv.cvx-sizing::after{content:attr(data-rows) " rows";position:absolute;right:12px;bottom:12px;background:#2bc5c0;color:#fff;font:600 11px "DM Sans",system-ui,sans-serif;padding:2px 7px;border-radius:4px;z-index:530}
/* a section's background image or video (Site editor Background tab, 2026-10-25) */
.cv-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.cv-bg img,.cv-bg video{width:100%;height:100%;object-fit:cover;display:block}
.cv-bg i{position:absolute;inset:0;background:#000}
.cv.has-bg .cv-grid{z-index:1}
/* What sits under the fixed header keeps clear of its real height (--toph, set by topH() in storefront.js,
   2026-10-25): never less than the usual spacing, more once a taller bar or a two-row header needs it. */
.cp-top,.pg-top,.hero.split{padding-top:max(170px,calc(var(--toph,0px) + 40px))}
.hero.plain{padding-top:max(200px,calc(var(--toph,0px) + 48px))}
.pbs{padding-top:max(130px,calc(var(--toph,0px) + 24px))}
.mm{padding-top:max(120px,calc(var(--toph,0px) + 16px))}
#view > section.cv:first-of-type{padding-top:max(150px,calc(var(--toph,0px) + 32px))}
#view > section.cv.cv-sp-s:first-of-type{padding-top:max(122px,calc(var(--toph,0px) + 8px))}
#view > section.cv.cv-sp-l:first-of-type{padding-top:max(194px,calc(var(--toph,0px) + 72px))}
#view > section.cv:first-of-type > .cvx-add:not(.mid),#view > section.cv:first-of-type > .cvx-tag{top:max(104px,calc(var(--toph,0px) + 12px))}
#view > section.cv:first-of-type > .cvx-panel:not(.mid){top:max(146px,calc(var(--toph,0px) + 54px))}
.cvx-sec.top button{margin-top:max(118px,calc(var(--toph,0px) + 24px))}
.cvx-sec.alone{padding-top:max(170px,calc(var(--toph,0px) + 40px))}
@media (max-width:980px){.cp-top,.pg-top,.hero.split{padding-top:max(130px,calc(var(--toph,0px) + 24px))}.pbs{padding-top:max(100px,calc(var(--toph,0px) + 12px))}}
@media (max-width:760px){#view > section.cv:first-of-type{padding-top:max(110px,calc(var(--toph,0px) + 16px))}}
/* a first section with no space starts where the header ends, not behind it (Todd 2026-10-25: a taller bar covered its words) */
#view > section.cv.cv-sp-none:first-of-type{padding-top:var(--toph,0px)}
#view > section.cv.cv-sp-none:first-of-type > .cvx-add:not(.mid),#view > section.cv.cv-sp-none:first-of-type > .cvx-tag{top:calc(var(--toph,0px) + 12px)}
/* Edit mode controls, one look (Todd 2026-10-25 mockup): a white bar with the part's name and a teal Edit.
   Section: name, Edit section, Add block. Picked block: name, Edit block, layer/copy/remove. Header: name, Edit header. */
.cvx-bar{position:absolute;top:12px;left:12px;z-index:30;display:flex;align-items:center;gap:2px;height:36px;box-sizing:border-box;padding:3px;background:#fff;border-radius:9px;box-shadow:0 4px 16px rgba(0,0,0,.28),0 0 0 1px rgba(0,0,0,.06);font-family:"DM Sans",system-ui,sans-serif;opacity:0;transition:opacity .12s;pointer-events:auto}
#view > section.cv:first-of-type > .cvx-bar{top:calc(var(--toph,0px) + 12px)}
.cv:hover>.cvx-bar,.cv.cvx-secon>.cvx-bar,.cv:has(> .cv-grid > .cv-b.on)>.cvx-bar{opacity:1}
.cvx-bar .nm,.cvx-tb .nm,#se-tools .se-mini .se-tag{font:600 12.5px "DM Sans",system-ui,sans-serif;color:#5b6268;padding:0 10px 0 9px;white-space:nowrap}
.cvx-bar button{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:7px;font:600 12.5px "DM Sans",system-ui,sans-serif;color:#1f2326;white-space:nowrap}
.cvx-bar button:hover{background:#f2f3f4}
.cvx-bar button svg{width:13px;height:13px}
.cvx-bar button.ed{background:#2bc5c0;color:#fff}.cvx-bar button.ed:hover{background:#1fa8a4}
.cv:has(> .cv-grid > .cv-b.on)>.cvx-bar button.ed{background:none;color:#1f2326}   /* a block is picked: its own bar has the teal Edit */
.cv:has(> .cv-grid > .cv-b.on)>.cvx-bar button.ed:hover{background:#f2f3f4}
.cvx-tb{bottom:auto;top:0;left:-6px;height:38px;box-sizing:border-box;padding:3px;border-radius:9px}
.cvx-tb .nm{padding:0 8px 0 7px}
#se-tools .se-mini{top:12px;left:12px;align-items:center;height:36px;box-sizing:border-box;background:#fff;border-radius:9px;padding:3px;box-shadow:0 4px 16px rgba(0,0,0,.28),0 0 0 1px rgba(0,0,0,.06)}
#se-tools.below .se-mini{top:calc(100% + 12px)}
#se-tools .se-mini .se-tag{position:static;background:none;border-radius:0}
#se-tools .se-mini button{height:30px;color:#1f2326;font-size:12.5px;padding:0 11px;border-radius:7px;gap:6px}
#se-tools .se-mini button:hover{background:#f2f3f4}
#se-tools .se-mini button.e{background:#2bc5c0;color:#fff}#se-tools .se-mini button.e:hover{background:#1fa8a4}
/* Add section sits on the line between sections; the first one on the line under the header */
.cvx-sec.top:not(.alone) button{margin-top:var(--toph,0px);transform:translateY(-50%)}
/* the bar sits top-right, like Squarespace's Edit section: headlines and a picked block's bar stay clear on the left */
.cvx-bar{left:auto;right:12px}
.cvx-sec.top:not(.alone){z-index:40}   /* its button sits on the header's bottom line: in front of the header, not under it */
body:has(#se-tools.below:not([hidden])) .cvx-tb{visibility:hidden}   /* pointing at the header: its bar, not a picked block's */
.cv-photo.empty{background:none;outline:1px solid color-mix(in srgb,var(--cvfg) 25%,transparent);outline-offset:-1px;display:flex;align-items:center;justify-content:center}
.cv-photo.empty .cv-empty{width:auto;height:auto;min-height:0;padding:6px 12px;border-radius:6px;background:rgba(0,0,0,.55);color:#fff}
/* Featured / New arrivals with the editor's options (2026-10-25) */
.cv-store .grid.cvo{grid-template-columns:repeat(var(--cols),minmax(0,1fr))}
.cv-store .grid.cvo.sq .tile .pic{aspect-ratio:1/1}.cv-store .grid.cvo.noprice .tile .pr{display:none}.cv-store .grid.cvo.nohover .tile .pic .b{display:none}
@media (max-width:980px){.cv-store .grid.cvo{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ann a{color:inherit;text-decoration:underline;text-underline-offset:3px}
/* ===== Phone controls (Todd 2026-10-26, gap list #2): show on computers only / phones only; phone text size.
   In the editor (body.cv-editing) a hidden one stays, faded, with a tag, so it can still be clicked. ===== */
@media (max-width:760px){
  .cvs-desk{display:none!important}
  body.cv-editing .cvs-desk{display:block!important;opacity:.35}
  body.cv-editing .cv-grid > .cvs-desk{display:block!important}
  .cvt-sm .cv-text{zoom:.8}.cvt-lg .cv-text{zoom:1.2}
}
@media (min-width:761px){
  .cvs-phone{display:none!important}
  body.cv-editing .cvs-phone{display:block!important;opacity:.35}
}
body.cv-editing .cvs-desk,body.cv-editing .cvs-phone{position:relative}
body.cv-editing .cv-b.cvs-desk::after,body.cv-editing .cv-b.cvs-phone::after,body.cv-editing section.cvs-desk::after,body.cv-editing section.cvs-phone::after{position:absolute;top:8px;right:8px;z-index:25;padding:3px 8px;border-radius:5px;background:rgba(0,0,0,.72);color:#fff;font:600 11px "DM Sans",system-ui,sans-serif;pointer-events:none}
body.cv-editing .cv-b.cvs-desk::after,body.cv-editing section.cvs-desk::after{content:"Computers only"}
body.cv-editing .cv-b.cvs-phone::after,body.cv-editing section.cvs-phone::after{content:"Phones only"}
@media (max-width:760px){body.cv-editing .cv-b.cvs-desk::after,body.cv-editing section.cvs-desk::after{content:"Hidden on phones"}}
@media (min-width:761px){body.cv-editing .cv-b.cvs-phone::after,body.cv-editing section.cvs-phone::after{content:"Hidden on computers"}}
body.cv-editing section.cvs-desk::after,body.cv-editing section.cvs-phone::after{top:auto;bottom:10px;left:12px;right:auto}
@media (max-width:760px){.cv:has(> .cv-grid > .cv-b.on)>.cvx-bar{opacity:0!important;pointer-events:none}}   /* phone preview: too narrow for both bars, the picked block's wins */
/* ===== Rich text bar and link box (Site editor preview, 2026-10-26) ===== */
.rt-ui{position:fixed;z-index:2147483600;font-family:"DM Sans",system-ui,sans-serif;color:#1f2326}
.rt-ui[hidden]{display:none!important}
.rt-bar{display:flex;align-items:center;gap:2px;flex-wrap:wrap;max-width:300px;background:#fff;border-radius:9px;padding:3px;box-shadow:0 6px 20px rgba(0,0,0,.45)}
.rt-bar button{all:unset;cursor:pointer;height:30px;min-width:30px;padding:0 8px;box-sizing:border-box;border-radius:7px;display:grid;place-items:center;font:700 14px "DM Sans",system-ui,sans-serif;color:#1f2326}
.rt-bar button i{font-family:Georgia,serif}
.rt-bar button:hover{background:#f2f3f4}.rt-bar button.on{background:rgba(43,197,192,.18);color:#127f7b}
.rt-bar button.tx{font:600 12px "DM Sans",system-ui,sans-serif;color:#5b6268}
.rt-bar .sp{width:1px;height:18px;background:#e2e2e2;margin:0 3px}
.rt-bar .dot{width:16px;height:16px;border-radius:50%;background:conic-gradient(#ff0000,#ffa500,#ffff00,#00c853,#00b0ff,#3d5afe,#d500f9,#ff0000)}
.rt-cols{flex-basis:100%;display:flex;gap:6px;padding:6px 4px 3px;border-top:1px solid #eee;margin-top:3px}
.rt-cols button{min-width:0;width:24px;height:24px;padding:0;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}
.rt-cols .cus{position:relative;width:24px;height:24px;border-radius:6px;background:conic-gradient(#ff0000,#ffa500,#ffff00,#00c853,#00b0ff,#3d5afe,#d500f9,#ff0000);cursor:pointer}
.rt-cols .cus input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;border:0;padding:0}
.rt-link{width:300px;background:#fff;border-radius:12px;padding:12px;box-shadow:0 12px 32px rgba(0,0,0,.5)}
.rt-link .seg{display:flex;gap:2px;height:38px;padding:3px;box-sizing:border-box;border-radius:10px;background:#f2f3f4;border:1px solid #e3e5e7;margin-bottom:10px}
.rt-link .seg button{all:unset;cursor:pointer;flex:1;text-align:center;border-radius:7px;font:600 13px "DM Sans",system-ui,sans-serif;color:#5b6268}
.rt-link .seg button.on{background:#fff;color:#1f2326;box-shadow:0 1px 3px rgba(0,0,0,.14)}
.rt-link .fld{display:block;width:100%;height:40px;box-sizing:border-box;border:1px solid #d6d9dc;border-radius:8px;padding:0 10px;font:500 13.5px "DM Sans",system-ui,sans-serif;color:#1f2326;background:#fff}
.rt-link .fld[hidden]{display:none}
.rt-link .row{display:flex;gap:8px;margin-top:10px}
.rt-link .row button{all:unset;cursor:pointer;flex:1;height:38px;border-radius:8px;text-align:center;font:600 13.5px "DM Sans",system-ui,sans-serif}
.rt-link .row .ok{background:#2bc5c0;color:#fff}.rt-link .row .rm{border:1px solid #d6d9dc;color:#c4483a;box-sizing:border-box}.rt-link .row .rm:disabled{opacity:.4;cursor:default}
.cv-text a{color:inherit;text-decoration:underline;text-underline-offset:3px}