/* MoonRoe Home
   Palette sampled from the logo mark and the Blue Jay Tree artwork, not invented.
   Logo blues measured off logo-icon.png: #6495CF and #B0D3E9. */
:root{
  --cream:#FAF7F1; --paper:#FFFFFF; --greige:#E9E2D4; --greige-deep:#DDD4C3;
  --ink:#24344b; --ink-soft:#5A6577; --ink-faint:#8D95A3;
  /* the brand blue, straight off the logo */
  --jay:#6495CF; --jay-pale:#B0D3E9; --jay-ink:#3E6BA3; --jay-deep:#2F5788; --jay-soft:#E3EEF8;
  --lemon:#E8B33C; --lemon-ink:#946A11; --lemon-soft:#FBF0D6;
  --leaf:#5E7355; --olive:#8E9A55; --leaf-soft:#E8EDE1;
  --branch:#6B5344; --blush:#FBEDE9;
  --night:#1B2436;
  --display:"Playfair Display",Georgia,serif;
  --body:"Outfit",system-ui,-apple-system,sans-serif;
  /* Anything containing digits uses this, never --display: Playfair sets its
     figures old-style, so 400 and 4,990 ride up and down the line, and its rupee
     sign sits off the baseline. Outfit is already loaded and has lining figures
     and a proper Rs glyph. Swap the first name here for "Calibri" if preferred. */
  --num:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mark:"Playfair Display",Georgia,serif;
  /* the hand on the branding card that goes in the box, matched as closely as a
     web font allows — the card is a flattened image, so it carries no font name */
  --script:"Allura","Snell Roundhand",cursive;
  --ease:cubic-bezier(.22,1,.36,1); --ease-soft:cubic-bezier(.4,0,.2,1);
  --tshadow:0 1px 2px rgba(20,16,10,.75),0 3px 14px rgba(20,16,10,.55),0 12px 44px rgba(20,16,10,.5);
  --pad:clamp(1.25rem,5vw,4rem);
}
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--body);
  font-size:clamp(1rem,.95rem + .2vw,1.125rem);line-height:1.65;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.06;letter-spacing:-.01em;margin:0}
p{margin:0}
a{color:inherit}
.b-kicker,.kicker,.type .tag,.proof dt,.ctrl label,.field label,.cue,.bignum,.swatch b,.crumb{font-weight:500}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--jay-deep);color:#fff;padding:.7rem 1.1rem;z-index:999}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--jay-ink);outline-offset:3px;border-radius:2px}

/* ---------- nav ---------- */
.nav{position:absolute;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;padding:clamp(1rem,2.2vw,1.7rem) var(--pad);color:#fff}
.nav.solid{position:relative;color:var(--ink);border-bottom:1px solid rgba(36,52,75,.1);background:var(--paper)}
.wordmark{font-family:var(--mark);font-weight:700;font-size:clamp(1.05rem,1.6vw,1.3rem);
  letter-spacing:-.015em;text-decoration:none;display:inline-flex;align-items:center;gap:.6rem;white-space:nowrap}
.nav:not(.solid) .wordmark,.nav:not(.solid) .nav-links{text-shadow:0 1px 10px rgba(20,16,10,.55)}
.wordmark img{width:2.1em;height:2.1em;flex:none}
.navright{display:flex;flex-direction:column;align-items:flex-end;gap:.35rem}
/* the utility row sits above and quieter than the real navigation */
.nav-util{display:flex;gap:clamp(.9rem,1.6vw,1.5rem);font-size:.78rem;letter-spacing:.04em;opacity:.75}
.nav-util a{text-decoration:none;transition:opacity .3s var(--ease-soft)}
.nav-util a:hover{opacity:1;text-decoration:underline}
.nav-links{display:flex;gap:clamp(1.1rem,2.6vw,2.6rem);font-size:1.02rem;letter-spacing:.01em}
.nav-links a{text-decoration:none;opacity:.94;transition:opacity .3s var(--ease-soft)}
.nav-links a:hover{opacity:1}
.nav.solid .nav-links a[aria-current]{color:var(--jay-ink)}
@media (max-width:560px){
  .nav{flex-direction:column;align-items:flex-start;gap:.5rem}
  .navright{align-items:flex-start;width:100%}
  .nav-links{gap:1.2rem;font-size:.95rem}
  .nav-util{gap:1.1rem;font-size:.74rem}
}

/* ---------- search ---------- */
.searchbtn{background:none;border:0;padding:0;margin:0;color:inherit;cursor:pointer;font:inherit;
  display:inline-flex;align-items:center;gap:.35rem;opacity:.85;transition:opacity .3s var(--ease-soft)}
.searchbtn:hover{opacity:1}
.searchbtn svg{width:15px;height:15px}
#searchOverlay{position:fixed;inset:0;z-index:200;background:rgba(20,26,38,.55);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;align-items:start;justify-items:center;
  padding:clamp(3rem,12vh,8rem) var(--pad)}
#searchOverlay[hidden]{display:none}
.searchbox{width:min(40rem,100%);background:var(--paper);border-radius:18px;overflow:hidden;
  box-shadow:0 30px 80px rgba(15,20,32,.35)}
.searchtop{display:flex;align-items:center;gap:.8rem;padding:1rem 1.2rem;border-bottom:1px solid rgba(36,52,75,.1)}
.searchtop svg{width:18px;height:18px;color:var(--ink-faint);flex:none}
#searchInput{flex:1;border:0;outline:0;font-family:var(--body);font-size:1.05rem;color:var(--ink);background:transparent}
#searchClose{background:none;border:0;cursor:pointer;color:var(--ink-faint);font-size:1.4rem;line-height:1;padding:.2rem .4rem}
#searchClose:hover{color:var(--ink)}
#searchResults{max-height:min(52vh,26rem);overflow-y:auto}
.sr-item{display:flex;flex-direction:column;gap:.15rem;padding:.85rem 1.2rem;text-decoration:none;
  border-bottom:1px solid rgba(36,52,75,.07);transition:background .2s var(--ease-soft)}
.sr-item:hover{background:var(--jay-soft)}
.sr-item b{font-weight:500;font-size:1rem}
.sr-item span{font-size:.85rem;color:var(--ink-soft)}
.sr-empty{padding:1.4rem 1.2rem;color:var(--ink-soft);font-size:.95rem}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 1.6rem;border-radius:100px;
  font-size:.88rem;letter-spacing:.03em;text-decoration:none;border:1px solid transparent;
  background:var(--lemon);color:var(--ink);text-shadow:none;font-weight:500;
  transition:background .35s var(--ease-soft),transform .35s var(--ease),box-shadow .35s var(--ease-soft)}
.btn:hover{background:#D9A227;transform:translateY(-2px);box-shadow:0 12px 32px rgba(232,179,60,.35)}
.btn.blue{background:var(--jay-deep);color:#fff}
.btn.blue:hover{background:#26466F;box-shadow:0 12px 32px rgba(47,87,136,.3)}
.btn.ghost{background:transparent;border-color:currentColor;color:inherit}
.btn.ghost:hover{background:rgba(36,52,75,.07);box-shadow:none}
@media (pointer:coarse){.btn{min-height:44px;justify-content:center}}

/* ---------- sections ---------- */
main{position:relative;z-index:1}
section{padding:clamp(3.4rem,8vh,6.4rem) var(--pad);position:relative}
.wrap{max-width:76rem;margin:0 auto}
.kicker{font-size:.84rem;letter-spacing:.2em;color:var(--lemon-ink);margin-bottom:1rem;text-transform:uppercase}
.lede{font-size:clamp(1.02rem,1.35vw,1.18rem);max-width:52ch;margin-top:1.25rem;color:var(--ink-soft)}
.bg-cream{background:var(--cream)} .bg-paper{background:var(--paper)}
.bg-greige{background:var(--greige)} .bg-leaf{background:var(--leaf-soft)}
.bg-lemon{background:var(--lemon-soft)} .bg-blush{background:var(--blush)}
.bg-night{background:var(--night);color:#fff}
.bg-night .kicker{color:var(--lemon)} .bg-night .lede{color:#CBD3DF}

.rev{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease-soft),transform .9s var(--ease)}
.in.rev,.in .rev{opacity:1;transform:none}
.in .rev:nth-child(2){transition-delay:.09s}
.in .rev:nth-child(3){transition-delay:.18s}
.in .rev:nth-child(4){transition-delay:.27s}
.in.done .rev,.in.done .rev:nth-child(2),.in.done .rev:nth-child(3),.in.done .rev:nth-child(4){transition-delay:0s!important}

.split{display:grid;gap:clamp(2rem,5vw,4.5rem);align-items:center;grid-template-columns:1fr}
@media (min-width:900px){.split{grid-template-columns:1.05fr .95fr}.split.flip>.media{order:-1}}
.media{position:relative;overflow:hidden;border-radius:16px;aspect-ratio:1/1;background:var(--greige)}
.media img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.4s var(--ease)}
.split:hover .media img{transform:scale(1)}
.media.wide{aspect-ratio:16/10}

/* ---------- the three ways to buy ---------- */
.types{display:grid;gap:clamp(1rem,2vw,1.6rem);grid-template-columns:1fr;margin-top:clamp(2.2rem,5vh,3.4rem)}
@media (min-width:760px){.types{grid-template-columns:repeat(3,1fr)}}
.type{display:block;text-decoration:none;color:inherit;background:var(--paper);border-radius:16px;overflow:hidden;
  border:1px solid rgba(36,52,75,.08);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.type:hover{transform:translateY(-7px);box-shadow:0 22px 48px rgba(36,52,75,.16)}
.type .pic{aspect-ratio:3/4;overflow:hidden;background:var(--greige)}
.type .pic img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.type:hover .pic img{transform:scale(1.06)}
.type .body{padding:1.3rem 1.4rem 1.6rem}
.type h3{font-size:1.6rem;margin-bottom:.4rem}
.type p{font-size:.94rem;color:var(--ink-soft)}
/* was 10px with .18em tracking, which is smaller than every other label
   on the site and too tight to read a word like "Percale" in */
.type .tag{font-size:.95rem;letter-spacing:.05em;color:var(--lemon-ink);display:block;margin-bottom:.5rem}
.type .go{margin-top:.9rem;display:inline-flex;align-items:center;gap:.45rem;font-size:.85rem;
  color:var(--jay-ink);transition:gap .35s var(--ease)}
.type:hover .go{gap:.85rem}

.artband{height:clamp(140px,22vh,240px);background-size:cover;background-position:center;
  background-image:url('art-band.jpg')}

.proof{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:3rem}
.proof div{background:var(--paper);border-radius:12px;padding:1.5rem 1.4rem;border:1px solid rgba(36,52,75,.08)}
.proof dt{font-size:10px;letter-spacing:.2em;color:var(--lemon-ink);margin-bottom:.5rem}
.proof dd{margin:0;font-size:.95rem;color:var(--ink-soft)}

.draw{width:100%;height:56px;overflow:visible;margin:2.2rem 0 0}
.draw path{fill:none;stroke:var(--lemon);stroke-width:1.6;opacity:.9;
  stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);transition:stroke-dashoffset 2.2s var(--ease)}
.in .draw path{stroke-dashoffset:0}

/* ---------- the saved list ----------
   The two states are the supplied artwork, used whole: "MoonRoe Home- Logo icon
   2/3.png" from art-direction, resized and nothing else — no crop, no recolour,
   no redraw. Icon 2 ships on an opaque white square, so it wears icon 3's own
   alpha as its mask; the two files are pixel-registered, so that makes the white
   circle exactly the aqua disc and the toggle cannot jump. `contain` keeps the
   artwork's framing and aspect, and a drop-shadow traces the alpha so the white
   circle still reads against a pale bedding photo.
   The white ring is the button's own round background showing past the artwork,
   set by background-size — the files are not padded, so the ring can be retuned
   here in one number without touching them. */
.save{position:absolute;top:.6rem;right:.6rem;z-index:3;width:42px;height:42px;border-radius:50%;
  border:0;padding:0;cursor:pointer;
  background:#fff url("mark-line.png") center/93% 93% no-repeat;
  filter:drop-shadow(0 2px 5px rgba(36,52,75,.30));
  transition:transform .3s var(--ease),filter .3s var(--ease-soft)}
.save:hover{transform:scale(1.06);filter:drop-shadow(0 4px 10px rgba(36,52,75,.40))}
.save:focus-visible{outline:2px solid var(--jay-deep);outline-offset:3px}
.save.on{background-image:url("mark-aqua.png")}

/* The spiral is not the heart everyone else uses, so it says its own name on
   hover. Pointer only: a phone has no hover, which is why the nav carries the
   word "Shortlist" too and the aria-label spells it out in full. It opens to
   the left because the card clips its overflow and the button sits top-right. */
@media (hover:hover) and (pointer:fine){
  .save::after{content:"Shortlist";position:absolute;right:calc(100% + 8px);top:50%;
    transform:translateY(-50%) translateX(4px);
    background:var(--night);color:#fff;font-family:var(--body);font-size:10.5px;
    letter-spacing:.09em;text-transform:uppercase;font-weight:500;
    padding:.32em .62em;border-radius:5px;white-space:nowrap;pointer-events:none;
    opacity:0;transition:opacity .22s var(--ease-soft),transform .22s var(--ease)}
  .save.on::after{content:"Shortlisted"}
  .save:hover::after,.save:focus-visible::after{opacity:1;transform:translateY(-50%) translateX(0)}
  /* beside the product name there is room below, and the h1 is to its left */
  .save-lg::after{right:auto;left:50%;top:calc(100% + 8px);
    transform:translateX(-50%) translateY(4px)}
  .save-lg:hover::after,.save-lg:focus-visible::after{transform:translateX(-50%) translateY(0)}
}
/* a thumb needs a finger, not a cursor */
@media (max-width:620px){.save{width:46px;height:46px}}
@keyframes savepop{0%{transform:scale(1)}45%{transform:scale(1.28)}100%{transform:scale(1)}}
.save.pop{animation:savepop .42s var(--ease)}
/* on a product page it sits beside the name, on cream rather than over a photo */
.save-lg{position:relative;flex:none;width:48px;height:48px;
  filter:drop-shadow(0 1px 3px rgba(36,52,75,.18))}
.save-lg:hover{filter:drop-shadow(0 3px 7px rgba(36,52,75,.26))}
/* ---------- the bag ---------- */
.baglink{position:relative}
[data-bag-count]{font-size:.72em;min-width:1.35em;text-align:center}
[data-bag-count].has{background:var(--night);color:#fff;border-radius:99px;padding:.05em .45em;font-weight:500}
#bagList{margin-top:clamp(2rem,5vh,3rem)}
.bagrow{display:grid;grid-template-columns:74px minmax(0,1fr) auto auto;gap:1rem 1.4rem;
  align-items:center;padding:1.1rem 0;border-bottom:1px solid rgba(36,52,75,.12)}
@media (max-width:640px){.bagrow{grid-template-columns:64px minmax(0,1fr);gap:.7rem 1rem}
  .bagrow .bagqty{grid-column:2;justify-self:start}
  .bagrow .bagsum{grid-column:2;text-align:left;display:flex;align-items:baseline;gap:1.2rem}
  .bagrow .bagx{margin-top:0}}
.bagpic{display:block;width:74px;height:90px;border-radius:9px;overflow:hidden;background:var(--greige)}
.bagpic img{width:100%;height:100%;object-fit:cover}
.bagmeta h3{font-size:1.2rem;margin-bottom:.2rem}
.bagmeta h3 a{text-decoration:none}
.bagmeta h3 a:hover{text-decoration:underline}
.bagmeta .meta{font-size:.82rem;color:var(--ink-faint);text-transform:none;letter-spacing:0}
.bagqty{display:inline-flex;align-items:center;gap:.2rem;border:1px solid rgba(36,52,75,.2);
  border-radius:100px;padding:.15rem}
.bagqty button{width:30px;height:30px;border:0;border-radius:50%;background:transparent;cursor:pointer;
  font-size:1.05rem;line-height:1;color:var(--ink)}
.bagqty button:hover{background:var(--greige)}
.bagqty span{min-width:2ch;text-align:center;font-size:.95rem}
.bagsum{text-align:right;min-width:6.5rem;font-size:1rem;color:var(--ink)}
.bagx{display:block;margin-top:.3rem;background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--body);font-size:.78rem;color:var(--ink-faint);text-decoration:underline}
.bagx:hover{color:var(--ink)}
.bagtotal{display:flex;flex-direction:column;align-items:flex-end;gap:.2rem;margin-top:1.4rem}
.bagtotal > div{display:flex;align-items:baseline;gap:1rem;font-family:var(--display);font-size:1.5rem}
.bagtotal > div span{font-family:var(--body);font-size:.85rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-faint)}
.bagtotal p{font-size:.84rem;color:var(--ink-faint)}
.bagsend{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem;justify-content:flex-end}
.bagsend .btn{flex:0 1 auto}

.savedlink{position:relative;display:inline-flex;align-items:center;gap:.35rem}
.savedlink img{width:16px;height:16px}
[data-saved-count]{font-size:.72em;min-width:1.35em;text-align:center}
[data-saved-count].has{background:var(--jay);color:#fff;border-radius:99px;padding:.05em .45em;font-weight:500}

/* ---------- product page ---------- */
.pdp{display:grid;gap:clamp(1.6rem,4vw,3.4rem);grid-template-columns:1fr;align-items:start}
@media (min-width:900px){.pdp{grid-template-columns:1.05fr .95fr}}
.pdp-media{display:grid;gap:.8rem;grid-template-columns:1fr}
@media (min-width:620px){.pdp-media{grid-template-columns:78px 1fr}}
/* the buying column is the longer of the two; let the photograph ride along,
   but only where the window is tall enough to show the whole of it */
@media (min-width:900px) and (min-height:820px){.pdp-media{position:sticky;top:7rem}}
.thumbs{display:flex;gap:.6rem;overflow-x:auto;order:2}
@media (min-width:620px){.thumbs{flex-direction:column;order:0;overflow:visible}}
.thumb{flex:0 0 68px;width:68px;height:82px;padding:0;border-radius:9px;overflow:hidden;cursor:pointer;
  border:1px solid rgba(36,52,75,.14);background:var(--greige);transition:border-color .3s var(--ease-soft),opacity .3s}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb:hover{opacity:.85}
.thumb.on{border-color:var(--jay-ink);border-width:2px}
.mainshot{position:relative;border-radius:16px;overflow:hidden;background:var(--greige);aspect-ratio:4/5}
.mainshot img{width:100%;height:100%;object-fit:cover}
.pdp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.pdp-info h1{font-size:clamp(2.3rem,4.9vw,3.3rem);margin-bottom:0}
.pdp-price{margin-top:.5rem;font-family:var(--num);font-size:1.7rem;font-weight:500;
  letter-spacing:-.005em;color:var(--jay-deep);line-height:1.2;
  font-variant-numeric:lining-nums tabular-nums}
.pdp-price-sub{display:block;font-family:var(--body);font-size:.82rem;font-weight:400;
  letter-spacing:0;color:var(--ink-faint);margin-top:.2rem}

/* The cloth, said as two facts rather than one grey line. The thread count is
   the number people comparison-shop on, so it leads and is set as a numeral;
   the cotton is what actually distinguishes the goods, so it is the lit panel. */
/* One line, not chips: chips read as things you can press, and there are real
   pressable chips six lines below. The cotton is lifted by weight and a deeper
   gold rather than by a box, so it stays the brightest thing here without
   competing with the size buttons. */
.pdp-spec{margin-top:.75rem;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:500;color:#B98A2E;display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem}
.pdp-spec .num{font-family:var(--num);font-variant-numeric:lining-nums tabular-nums;letter-spacing:.06em}
/* No bold: the whole line stays one weight, and the cotton is lifted only by
   a deeper gold. Bold here fought the size buttons for attention. */
.pdp-spec b{font-weight:inherit;color:var(--lemon-ink);letter-spacing:inherit}
.pdp-spec i{font-style:normal;opacity:.5}

.pdp-lab{font-size:1rem;font-weight:500;color:var(--ink);margin-top:1.9rem;margin-bottom:.7rem}
.pdp-lab b{font-weight:400;color:var(--ink-soft);margin-left:.45rem}
.colours{display:flex;flex-wrap:wrap;gap:.6rem}
.colour{display:inline-flex;flex-direction:column;align-items:center;gap:.35rem;text-decoration:none;
  padding:.35rem;border-radius:10px;border:1px solid transparent;transition:border-color .3s var(--ease-soft)}
.colour .dot{width:40px;height:40px;border-radius:50%;border:1px solid rgba(36,52,75,.16)}
.colour img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.colour .cname{font-size:.74rem;color:var(--ink-soft)}
.colour:hover{border-color:rgba(36,52,75,.2)}
.colour.on{border-color:var(--jay-ink)}
.sizes{display:flex;flex-wrap:wrap;gap:.6rem}
.size{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.15rem;min-width:6.2rem;cursor:pointer;
  padding:.7rem 1rem;border-radius:10px;border:1px solid rgba(36,52,75,.18);background:var(--paper);
  font-family:var(--body);font-size:.95rem;color:var(--ink);text-align:left;
  transition:border-color .3s var(--ease-soft),background .3s var(--ease-soft)}
.size small{font-size:.72rem;color:var(--ink-faint)}
.size:hover{border-color:var(--jay)}
.size.on{border-color:var(--jay-ink);border-width:2px;background:var(--jay-soft)}
.sizenote{margin-top:.8rem;font-size:.9rem;color:var(--ink-soft)}

/* the dimensions are printed on the chip already; the hover adds what comes
   with the set, which there is no room to print four times over */
@media (hover:hover) and (pointer:fine){
  .size::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);
    transform:translateX(-50%) translateY(4px);
    background:var(--night);color:#fff;font-size:11px;letter-spacing:.02em;
    padding:.4em .7em;border-radius:6px;white-space:nowrap;pointer-events:none;z-index:5;
    opacity:0;transition:opacity .2s var(--ease-soft),transform .2s var(--ease)}
  .size:hover::after,.size:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0)}
}

/* Cutting to a bed nobody else will cut to is the reason the brand exists, so
   Custom does not stand in line as a fourth chip — its own row, its own colour. */
.size.custom{min-width:7.6rem;border-color:var(--lemon);color:var(--lemon-ink);
  background:linear-gradient(100deg,var(--lemon-soft),rgba(251,240,214,.4))}
.size.custom:hover{border-color:var(--lemon-ink)}
.size.custom.on{border-color:var(--lemon-ink);border-width:2px;color:var(--ink)}
/* the claim the banner used to carry, on one line */
.custom-claim{margin-top:.55rem;font-size:.8rem;color:var(--lemon-ink)}

/* ---------- flat or fitted ----------
   Two different garments, so they are chosen, not merely listed. Each carries
   the measurement that belongs to it: a flat sheet is cut larger than the bed,
   a fitted one is the mattress and its depth. */
.sheets{display:flex;flex-wrap:wrap;gap:.6rem}
.sheet{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;
  cursor:pointer;padding:.55rem .9rem;border-radius:10px;border:1px solid rgba(36,52,75,.18);
  background:var(--paper);font-family:var(--body);color:var(--ink);text-align:left;
  transition:border-color .3s var(--ease-soft),background .3s var(--ease-soft)}
.sheet b{font-weight:500;font-size:.95rem}
.sheet small{font-size:.72rem;color:var(--ink-faint);font-family:var(--num);
  font-variant-numeric:lining-nums tabular-nums}
.sheet:hover{border-color:var(--jay)}
.sheet.on{border-color:var(--jay-ink);border-width:2px;background:var(--jay-soft)}

/* delivery: no courier feed exists yet, so the PIN goes into the enquiry
   instead of a date being guessed at */
.deliver{display:block;margin-top:1.9rem;padding-top:1.5rem;
  border-top:1px solid rgba(36,52,75,.12)}
/* inline with the sentence, so nothing below it is indented past an icon */
.deliver p svg{display:inline-block;width:21px;height:21px;color:var(--ink-soft);
  vertical-align:-4px;margin-right:.5rem}
.deliver p{font-size:.95rem;color:var(--ink);margin:0}
.pin{margin-top:.6rem;display:flex;flex-direction:column;gap:.45rem;align-items:flex-start}
.pin label{font-size:.86rem;color:var(--ink-soft)}
.pin span{display:inline-flex;gap:.45rem}
.pin input{font-family:var(--body);font-size:.9rem;padding:.55rem .75rem;width:9rem;color:var(--ink);
  border:1px solid rgba(36,52,75,.22);border-radius:8px;background:var(--paper)}
.pin input:focus-visible{outline:2px solid var(--jay);outline-offset:1px}
.pin button{font-family:var(--body);font-size:.86rem;padding:.55rem 1rem;cursor:pointer;color:var(--ink);
  border:1px solid var(--ink);border-radius:8px;background:transparent;
  transition:background .3s var(--ease-soft),color .3s var(--ease-soft)}
.pin button:hover{background:var(--ink);color:var(--cream)}
.pin em{font-style:normal;font-size:.85rem;color:var(--leaf)}

/* the buy row: quantity, then one wide primary action */
.pdp-buy{display:flex;align-items:center;gap:.9rem;margin-top:1.7rem;flex-wrap:wrap}
.qty{display:inline-flex;align-items:center;border:1px solid rgba(36,52,75,.22);border-radius:100px;padding:.2rem}
.qty button{width:38px;height:38px;border:0;border-radius:50%;background:transparent;cursor:pointer;
  font-family:var(--body);font-size:1.2rem;line-height:1;color:var(--ink);
  transition:background .25s var(--ease-soft)}
.qty button:hover{background:var(--greige)}
.qty output{min-width:2.2ch;text-align:center;font-size:1rem;color:var(--ink)}
.btn.buy{flex:1 1 15rem;justify-content:center;background:var(--night);color:var(--cream);
  letter-spacing:.08em;text-transform:uppercase;padding:1.05rem 1.6rem}
.btn.buy:hover{background:#2C3A54;box-shadow:0 12px 32px rgba(27,36,54,.28)}
.pdp-alt{margin-top:.9rem;font-size:.9rem;color:var(--ink-soft)}
.pdp-alt a{color:var(--jay-ink)}
.bagnote{margin-top:.8rem;font-size:.92rem;color:var(--leaf)}
.bagnote:empty{margin:0}
.bagnote a{color:var(--jay-ink)}
/* the story sits under the buying, so the buying never gets pushed off screen */
.pdp-tell{margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid rgba(36,52,75,.14)}
.pdp-tell .lede{margin-top:0}
.pdp-notes{margin:1.8rem 0 0;padding:1.3rem 0 0;border-top:1px solid rgba(36,52,75,.14);list-style:none}
.pdp-notes li{font-size:.92rem;color:var(--ink-soft);padding-left:1.1rem;position:relative;margin-bottom:.5rem}
.pdp-notes li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--lemon)}

/* ---------- category pages ---------- */
.crumb{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:1rem}
.crumb a{color:var(--jay-ink);text-decoration:none}
.crumb a:hover{text-decoration:underline}
/* auto-fill, not auto-fit: a page with two designs keeps card-sized cards and
   leaves the rest of the row empty, rather than blowing them up to half the
   screen. Stripes has two; Saved often has one. */
.grid{display:grid;gap:clamp(1rem,2.2vw,1.8rem);grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  margin-top:clamp(2rem,5vh,3rem)}
.card{position:relative;background:var(--paper);border-radius:16px;overflow:hidden;border:1px solid rgba(36,52,75,.08);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.card:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(36,52,75,.14)}
/* 4/5 made a card ~570px tall, so a section of three could not be seen in one
   view. Landscape keeps the whole row on screen; the product page is where the
   big pictures belong. */
.card .pic{aspect-ratio:4/3;overflow:hidden;background:var(--greige)}
.card .pic img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.card:hover .pic img{transform:scale(1.05)}
.card .body{padding:1.1rem 1.2rem 1.4rem}
.card h3{font-size:1.35rem;margin-bottom:.25rem}
.card-link{text-decoration:none;color:inherit;display:block}
.card .go{margin-top:.8rem;display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;
  color:var(--jay-ink);transition:gap .35s var(--ease)}
.card:hover .go{gap:.8rem}
.card .meta{font-size:.82rem;letter-spacing:.06em;color:var(--ink-faint);text-transform:uppercase}
.card p{font-size:.92rem;color:var(--ink-soft);margin-top:.5rem}

.swatches{display:grid;gap:clamp(.9rem,2vw,1.5rem);grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  margin-top:clamp(2rem,5vh,3rem)}
.swatch{border-radius:14px;overflow:hidden;background:var(--paper);border:1px solid rgba(36,52,75,.08)}
/* 1/1 suits the folded-sheet product shots; 3/2 was cropping them badly */
.swatch .chip{aspect-ratio:1/1;overflow:hidden}
.swatch .chip img{width:100%;height:100%;object-fit:cover}
.swatch .lab{padding:.75rem .9rem 1rem}
.swatch b{display:block;font-size:.95rem;font-weight:500}
.swatch span{font-size:.78rem;color:var(--ink-faint)}

.pagehead{padding-top:clamp(2.6rem,6vh,4rem)}
.pagehead h1{font-size:clamp(2.2rem,5.6vw,4rem)}

footer{padding:clamp(3rem,7vh,4.5rem) var(--pad) 3rem;background:var(--night);color:#B4BECD;font-size:1rem}
.frow{max-width:76rem;margin:0 auto;display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:flex-start}
.flines{font-family:var(--display);font-size:clamp(1.35rem,2.2vw,1.55rem);color:#F4EFE6;line-height:1.35}
footer a{color:inherit}
footer a:hover{color:var(--lemon)}

body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  .rev{opacity:1;transform:none}
  .draw path{stroke-dashoffset:0}
}

/* ---------- product page: keeping the buy row on the first screen ----------
   The right-hand column has to end with "Add to bag" while the page is still
   unscrolled on a 1366x768 laptop, so every block above it is on a tighter
   rhythm than the rest of the site and the colour swatches drop their captions
   (the name of the one you are on is printed beside the label instead). */
.pdp-page{padding-top:clamp(1.6rem,3.4vh,2.6rem)}
.pdp-info h1{font-size:clamp(2.05rem,3.7vw,2.7rem)}
.pdp-price{margin-top:.35rem;font-size:1.55rem}
.pdp-price-sub{margin-top:.15rem}
.pdp-spec{margin-top:.6rem;gap:.45rem}
.pdp-lab{margin-top:1.05rem;margin-bottom:.5rem}
.lab-count{font-size:.78rem;color:var(--ink-faint);margin-left:.45rem}
.size{padding:.55rem .85rem}
.size.custom{padding:.65rem .95rem}
.sizenote{margin-top:.5rem;font-size:.84rem}
.colours{gap:.45rem}
.colour{padding:.25rem}
.colour .dot,.colour img{width:34px;height:34px}
.deliver{margin-top:1.15rem;padding-top:1.05rem}
.deliver p{font-size:.9rem}
.pdp-buy{margin-top:1.1rem}
.pdp-alt{margin-top:.6rem;font-size:.86rem}
@media (min-width:900px){
  /* on a phone the column is one long scroll anyway, so this only applies where
     there is a second column beside the photographs */
  .pdp-media{position:sticky;top:1.5rem}
}

/* the swatch says its own name on hover, since the caption is gone */
@media (hover:hover) and (pointer:fine){
  .colour{position:relative}
  .colour::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 6px);
    transform:translateX(-50%) translateY(4px);background:var(--night);color:#fff;font-size:11px;
    padding:.35em .6em;border-radius:6px;white-space:nowrap;pointer-events:none;z-index:5;
    opacity:0;transition:opacity .2s var(--ease-soft),transform .2s var(--ease)}
  .colour:hover::after,.colour:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0)}
}
/* last of the trimming: the PIN sits on one line with its label, and the
   size note moves under the button where it costs the fold nothing */
.pdp-page .pin{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:.35rem}
.pdp-page .pin label{order:2;font-size:.8rem;color:var(--ink-faint);margin:0}
.pdp-page .pin span{order:1;margin:0}
.pdp-page #pinNote{display:block;font-size:.8rem;color:var(--leaf);font-style:normal}
.pdp-page #pinNote:empty{display:none}
.pdp-page .deliver{margin-top:1rem;padding-top:.95rem}
.pdp-page .pdp-lab{margin-top:.85rem}
.pdp-page .pdp-buy{margin-top:1rem}
.pdp-page .pdp-spec{line-height:1.5}
.pdp-page .size.custom{padding:.55rem .95rem}
.pdp-page .size.custom small{font-size:.7rem}

/* A 1366x768 laptop is the shortest screen this column has to finish on, so on
   short viewports only, the rhythm tightens one more notch. Taller screens keep
   the roomier spacing. */
@media (min-width:900px) and (max-height:820px){
  .pdp-page{padding-top:1.1rem}
  .pdp-page .pdp-info h1{font-size:2.3rem}
  .pdp-page .pdp-lab{margin-top:.7rem}
  .pdp-page .deliver{margin-top:.8rem;padding-top:.8rem}
  .pdp-page .pdp-buy{margin-top:.85rem}
  .pdp-page .colour .dot,.pdp-page .colour img{width:30px;height:30px}
}
@media (min-width:900px) and (max-height:745px){
  .pdp-page{padding-top:.8rem}
  .pdp-page .pdp-info h1{font-size:2.15rem}
  .pdp-page .pdp-price{font-size:1.4rem;margin-top:.25rem}
  .pdp-page .pdp-spec{margin-top:.5rem}
  .pdp-page .size{padding:.45rem .8rem}
  .pdp-page .size.custom{padding:.45rem .85rem}
  .pdp-page .pdp-lab{margin-top:.55rem;margin-bottom:.4rem}
  .pdp-page .deliver{margin-top:.6rem;padding-top:.6rem}
  .pdp-page .deliver p{font-size:.85rem}
  .pdp-page .pdp-buy{margin-top:.7rem}
}
/* On short laptops the size chips read across instead of stacking, which buys
   back a line without losing either the name or the inches. */
@media (min-width:900px) and (max-height:820px){
  .pdp-page .deliver p svg{width:18px;height:18px;vertical-align:-3px}
}
@media (min-width:900px) and (max-height:745px){
  /* the shipping line is the one thing here that is not a decision, so on the
     shortest screens it steps aside and the PIN field carries the block */
  .pdp-page .deliver > p:first-child{display:none}
  .pdp-page .pin{margin-top:0}
}

/* ---------- PIN code delivery estimator ----------
   Namespaced under .pin-est so the widget can be lifted into any page without
   dragging the rest of this stylesheet with it. */
.pin-est{margin-top:.5rem}
.pin-est-form{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem}
.pin-est-label{order:2;font-size:.8rem;color:var(--ink-faint);margin:0}
.pin-est-row{order:1;display:inline-flex;align-items:center;gap:.45rem}
.pin-est-input{width:9.5rem;padding:.5rem .8rem;border:1px solid rgba(36,52,75,.24);border-radius:8px;
  font-family:var(--num);font-size:.95rem;letter-spacing:.08em;color:var(--ink);background:var(--paper);
  font-variant-numeric:lining-nums tabular-nums}
.pin-est-input::placeholder{letter-spacing:.02em;color:var(--ink-faint)}
.pin-est-input:focus{outline:2px solid var(--jay-ink);outline-offset:1px;border-color:transparent}
.pin-est-go{padding:.5rem 1rem;border:1px solid rgba(36,52,75,.24);border-radius:8px;cursor:pointer;
  font-family:var(--body);font-size:.88rem;font-weight:500;color:var(--ink);background:var(--paper);
  transition:background .25s var(--ease-soft),border-color .25s var(--ease-soft)}
.pin-est-go:hover{background:var(--greige);border-color:rgba(36,52,75,.4)}
.pin-est-out{margin-top:.5rem;font-size:.9rem;line-height:1.45}
.pin-est-out:empty{display:none}
.pin-est-out b{display:block;font-weight:500}
.pin-est-out span{display:block;font-size:.8rem;color:var(--ink-faint);margin-top:.1rem}
.pin-est-out.is-good b{color:var(--leaf)}
.pin-est-out.is-bad{color:var(--branch)}
@media (min-width:900px) and (max-height:745px){
  .pin-est-label{display:none}
  .pin-est-out span{display:none}
}
/* not an error, just somewhere we do not go yet */
.pin-est-out.is-away{color:var(--ink-soft)}

@media (hover:hover) and (pointer:fine){
  .sheet::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);
    transform:translateX(-50%) translateY(4px);background:var(--night);color:#fff;font-size:11px;
    padding:.4em .7em;border-radius:6px;white-space:nowrap;pointer-events:none;z-index:5;
    opacity:0;transition:opacity .2s var(--ease-soft),transform .2s var(--ease)}
  .sheet:hover::after,.sheet:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0)}
}
@media (min-width:900px) and (max-height:745px){
  .custom-claim{margin-top:.4rem;font-size:.76rem}
  .sheet{padding:.45rem .8rem}
}
@media (min-width:900px) and (max-height:820px){
  .pdp-page .custom-claim{margin-top:.3rem;font-size:.76rem}
  .pdp-page .sheet{padding:.42rem .8rem}
  .pdp-page .sheet b{font-size:.9rem}
  .pdp-page .sheet small{font-size:.68rem}
  .pdp-page .pdp-lab{margin-bottom:.4rem}
}
@media (min-width:900px) and (max-height:745px){
  /* the gold chip already says Custom is the speciality; on the shortest
     screens the sentence under the row gives way to the buy button */
  .pdp-page .custom-claim{display:none}
}

/* ---------- product detail tabs ----------
   Below the buy row, full width under both columns. The reference this follows
   repeats the same facts panel on every tab, which is what made it feel
   cluttered; here each panel holds only what belongs to it. */
.pdp-detail{margin-top:clamp(2.6rem,6vh,4.4rem)}
.dtabs{display:flex;gap:clamp(1.2rem,3vw,2.6rem);border-bottom:1px solid rgba(36,52,75,.16);
  overflow-x:auto;scrollbar-width:none}
.dtabs::-webkit-scrollbar{display:none}
.dtab{position:relative;background:none;border:0;padding:0 0 .85rem;cursor:pointer;white-space:nowrap;
  font-family:var(--display);font-size:clamp(1.05rem,1.9vw,1.35rem);color:var(--ink-faint);
  transition:color .25s var(--ease-soft)}
.dtab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--jay-deep);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.dtab:hover{color:var(--ink-soft)}
.dtab.on{color:var(--ink)}
.dtab.on::after{transform:scaleX(1)}

.dpanel{padding-top:clamp(1.6rem,3.4vh,2.4rem)}
.dpanel[hidden]{display:none}
.dsplit{display:grid;gap:clamp(1.8rem,4vw,3.6rem);grid-template-columns:1fr}
@media (min-width:820px){.dsplit{grid-template-columns:1.1fr .9fr}}
.dlede{font-size:clamp(1.02rem,1.3vw,1.15rem);color:var(--ink-soft);max-width:56ch}
.dhead{font-size:1.1rem;margin-bottom:.6rem}
.dhead + .dnote,.dhead + .dintro{margin-bottom:1.5rem}
.dnote,.dintro{font-size:.95rem;color:var(--ink-soft);max-width:56ch}
/* set in the script from the printed card, so the sentence reads the same in
   the box and on the page. Script faces run small for their point size, so this
   is set larger than the body copy around it. */
.dintro{font-family:var(--script);font-style:normal;font-size:clamp(1.35rem,2.1vw,1.62rem);
  line-height:1.4;color:var(--lemon-ink);margin-bottom:1.3rem;max-width:30ch}
.dnote a{color:var(--jay-ink)}

/* the facts, as a list rather than a boxed table */
.dfacts{margin:0;display:grid;gap:0;align-self:start}
.dfacts > div{display:grid;grid-template-columns:8.5rem 1fr;gap:1rem;padding:.7rem 0;
  border-bottom:1px solid rgba(36,52,75,.1)}
.dfacts > div:first-child{border-top:1px solid rgba(36,52,75,.1)}
.dfacts dt{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);
  font-weight:500;padding-top:.15rem}
.dfacts dd{margin:0;font-size:.95rem;color:var(--ink)}

/* every size, both sheets */
.tablewrap{overflow-x:auto}
.sizetable{width:100%;border-collapse:collapse;font-size:.92rem}
.sizetable th,.sizetable td{text-align:left;padding:.6rem .9rem .6rem 0;
  border-bottom:1px solid rgba(36,52,75,.1);white-space:nowrap}
.sizetable thead th{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:500}
.sizetable tbody th{font-weight:500;color:var(--ink)}
.sizetable td{color:var(--ink-soft);font-family:var(--num);
  font-variant-numeric:lining-nums tabular-nums}
.sizetable tbody tr:last-child th,.sizetable tbody tr:last-child td{border-bottom:0}

/* wash care, straight off the branding card that ships in the box */
.carelist{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.carelist li{display:grid;grid-template-columns:26px 1fr;gap:.8rem;align-items:start;
  font-size:.93rem;color:var(--ink-soft)}
.carelist svg{width:22px;height:22px;color:var(--jay-ink);margin-top:.05rem}
/* five columns now, so the gutter between them does the separating rather
   than a change of type size */
.sizetable th,.sizetable td{padding-right:1.6rem}
.sizetable th:last-child,.sizetable td:last-child{padding-right:0}
/* a panel can run to two paragraphs before the next heading, so the gap has to
   come off the paragraph as well as off the heading */
.dnote + .dnote{margin-top:1rem}
.dnote + .dhead,.dintro + .dhead{margin-top:1.7rem}
/* A grid item defaults to min-width:auto, so the table was sizing the column to
   its own 650px rather than the other way round — on a phone that pushed the
   last two columns off the edge, where overflow-x:clip hid them for good.
   With this the wrapper is bounded and its own overflow-x:auto can scroll. */
.dsplit > *{min-width:0}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* The measurements must never break mid-figure, but the Custom row is prose and
   can wrap freely — it was the widest thing in the table and the reason the
   whole thing needed scrolling on screens that could otherwise hold it. */
.sizetable th,.sizetable td{padding-right:1.25rem}
.sizetable tbody tr:last-child td{white-space:normal}

/* ---- Search: browse by design, colour, weave ----
   Shown while the box is empty. A plain text field gives no clue that the
   search knows a weave from a colour, so the three ways in are on screen as
   something to tap rather than something to guess. */
.sr-browse{padding:.2rem 1.2rem 1.2rem}
.sr-group{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:500;margin:1.1rem 0 .55rem}
.sr-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.sr-chip{font:inherit;font-size:.85rem;line-height:1.2;padding:.4rem .75rem;
  border-radius:999px;cursor:pointer;color:var(--ink);background:var(--cream);
  border:1px solid rgba(36,52,75,.14);
  transition:background .15s var(--ease-soft),border-color .15s var(--ease-soft)}
.sr-chip:hover{background:var(--jay-soft);border-color:rgba(36,52,75,.3)}

/* The pillow columns are a pair, so they get one heading above both and a rule
   that spans exactly them. The rule is what does the work: it draws the eye
   from "Pillow covers" down onto the two columns it governs, which is what
   "Cover size" on its own could never say. */
.sizetable .grouprow td{border-bottom:0;padding:0}
.sizetable .grouphead{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:500;padding:0 0 .3rem;
  border-bottom:1px solid rgba(36,52,75,.22)}

/* ---- Product heading, in two parts ----
   The design name keeps the display size it was given; the fabric-and-format
   words beneath it are the small print of a title, not part of the name you
   read across a room. One <h1> still, so the page has one heading. */
.pdp-info h1 .h-design{display:block}
.pdp-info h1 .h-kind{display:block;font-family:var(--body);font-weight:300;
  font-size:.3em;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);margin-top:.5em;line-height:1.3}

/* At around 1024 the info column is only ~418px, which is just too narrow for
   the four size chips: they wrap to a second row and cost 44px — the exact
   margin that pushes Add to bag off a 768px-tall screen. Trimming the chip
   padding on narrow columns only buys that row back; wider columns keep the
   roomier chips. */
@media (min-width:900px) and (max-width:1120px){
  /* the min-width is what forces the wrap, not the padding: four chips at
     6.2rem/7.6rem plus gaps need 448px and the column has 418 */
  .pdp-page .size{min-width:5.4rem;padding:.45rem .7rem}
  .pdp-page .size.custom{min-width:6.9rem;padding:.45rem .75rem}
  .pdp-page .sizes{gap:.5rem}
  .pdp-page .pdp-lab{margin-top:.55rem}
}

/* ---- Playfair: weight follows size ----
   Playfair is a high-contrast face. The hairlines that make a 43px heading
   look refined are the same hairlines that thin out at 20px — and worse on
   the night-blue footer, where light type on dark optically loses weight.
   So 400 stays on the large headings, where the elegance lives, and 500
   carries everything small: card and bag titles, the detail-panel headings,
   the tab labels, the footer lines and the bag total. The 500 cut is already
   in the font being loaded, so none of this costs another download. */
h3{font-weight:500}
.flines,.bagtotal > div,.dtab{font-weight:500}

/* ---- Returns table ----
   Three columns answer what for, how long and what happens. Cells wrap rather
   than hold one line, since the reason column carries a phrase, not a
   measurement — the opposite of the size table above it. */
.retlead{font-weight:500;color:var(--ink);margin-bottom:.6rem}
.rettable{width:100%;border-collapse:collapse;font-size:.92rem;margin-bottom:1.1rem}
.rettable th,.rettable td{text-align:left;vertical-align:top;
  padding:.65rem 1.2rem .65rem 0;border-bottom:1px solid rgba(36,52,75,.1)}
.rettable th:last-child,.rettable td:last-child{padding-right:0}
.rettable thead th{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:500}
.rettable tbody th{font-weight:400;color:var(--ink)}
.rettable tbody td{color:var(--ink-soft)}
.rettable tbody tr:last-child th,.rettable tbody tr:last-child td{border-bottom:0}

/* Three tab labels need 365px, and a 390px phone gives the strip 350 — so the
   active one sat half off the edge, which reads as broken rather than as a hint
   to scroll. Trimming the type and the gutters below 430px fits all three on
   one line down to a 360px screen; narrower than that the row still scrolls. */
@media (max-width:430px){
  .dtabs{gap:.7rem}
  .dtab{font-size:.92rem;padding-bottom:.7rem}
}

/* ---- Product fact strip ----
   Materials, origin and promise hold true whichever tab is open, so they live
   below the tabs rather than inside them. Banded rows, label left and value
   right, so the eye can drop straight down the labels. */
.pstrip{margin:2.4rem 0 0;padding:0;border-top:1px solid rgba(36,52,75,.12)}
.pstrip > div{display:grid;grid-template-columns:9.5rem 1fr;gap:1.2rem;
  padding:.95rem 1.1rem;border-bottom:1px solid rgba(36,52,75,.08)}
.pstrip > div:nth-child(odd){background:rgba(36,52,75,.032)}
.pstrip dt{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);font-weight:500;margin:0;padding-top:.15rem}
.pstrip dd{margin:0;color:var(--ink-soft);font-size:.95rem}
@media (max-width:560px){
  .pstrip > div{grid-template-columns:1fr;gap:.25rem;padding:.85rem .9rem}
}

/* ---- Weave sections on a category page ----
   A family lives on one page, but each weave gets its own heading and its own
   grid, so nothing ever sits in a row beside a different fabric. The weave is
   set beside the collection name rather than above it, because the pair is one
   fact: Sion is the percale, Capri is the satin. */
/* Name and note on one line, with a rule under the pair: the heading sat 6px
   from its own note and 48px from the grid it described, which read as the note
   belonging to the heading rather than to the cards. One bar, one section. */
.linebar{display:flex;align-items:baseline;column-gap:1.5rem;row-gap:.3rem;flex-wrap:wrap;
  margin:3.6rem 0 1.5rem;padding-bottom:.85rem;border-bottom:1px solid rgba(36,52,75,.13)}
.linebar:first-of-type{margin-top:2.4rem}
.linehead{font-size:clamp(1.45rem,2.4vw,1.9rem);margin:0;white-space:nowrap}
.linehead span{font-family:var(--body);font-size:.8rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--lemon-ink);margin-left:.15rem}
.linenote{color:var(--ink-soft);font-size:.95rem;margin:0;flex:1 1 20rem;min-width:0}

/* ---- Shop pages: the products are the hero ----
   The header was pushing the first picture 545px down, so a visitor met a
   sentence rather than a bedsheet. The heading stays — a page needs one, and it
   is what search results show — but at a size that introduces the page instead
   of filling it. Product pages keep their own larger treatment. */
.pagehead:not(.pdp-page){padding-top:clamp(1.6rem,3.5vh,2.6rem)}
.pagehead:not(.pdp-page) h1{font-size:clamp(1.65rem,3vw,2.3rem);max-width:24ch}
.pagehead:not(.pdp-page) .crumb{margin-bottom:.5rem}
.pagehead:not(.pdp-page) .lede{margin-top:.7rem;font-size:1rem;max-width:64ch}
.pagehead:not(.pdp-page) .linebar:first-of-type{margin-top:1.8rem}
.pagehead:not(.pdp-page) .grid{margin-top:1.1rem}


/* ================= the custom-size calculator =================
   Opens under the Custom chip and keeps its colour, so it reads as that chip
   unfolding rather than as a form that arrived from somewhere else. Everything
   inside is progressive: the corner question only exists for a fitted sheet,
   and the pillow fields only once somebody has said yes to pillow covers. */
.cust{margin-top:.9rem;padding:1.15rem 1.15rem .3rem;border-radius:14px;
  border:1px solid var(--lemon);background:linear-gradient(170deg,var(--lemon-soft),rgba(251,240,214,.35))}
.cust[hidden]{display:none}
.cust-lead{margin:0 0 .95rem;font-size:.88rem;font-weight:500;color:var(--lemon-ink)}

/* three numbers across, because they are one thought and belong on one line */
.cust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.cust-grid.two{grid-template-columns:repeat(2,1fr);margin-top:.6rem}
/* display:grid beats the browser's own [hidden]{display:none}, so a hidden grid
   has to be told twice. The pillow-size fields are the ones that showed through. */
.cust-grid[hidden]{display:none}
.cust-f{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.cust-k{font-size:.82rem;font-weight:500;color:var(--ink);line-height:1.25}
.cust-k i{display:block;font-style:normal;font-size:.7rem;font-weight:400;color:var(--ink-faint)}
.cust-in{position:relative;display:block}
.cust-in input{width:100%;box-sizing:border-box;padding:.6rem 2.1rem .6rem .7rem;
  border:1px solid rgba(36,52,75,.2);border-radius:9px;background:var(--paper);
  font-family:var(--num);font-variant-numeric:lining-nums tabular-nums;
  font-size:1rem;color:var(--ink);-moz-appearance:textfield}
.cust-in input::-webkit-outer-spin-button,.cust-in input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
.cust-in input:focus{outline:none;border-color:var(--lemon-ink);box-shadow:0 0 0 3px rgba(232,179,60,.28)}
.cust-in em{position:absolute;right:.65rem;top:50%;transform:translateY(-50%);
  font-style:normal;font-size:.8rem;color:var(--ink-faint);pointer-events:none}

/* measuring wrongly is the one mistake that cannot be washed out, so the help
   is here rather than on a page nobody will leave for */
.cust-help{margin-top:.8rem;font-size:.82rem;color:var(--ink-soft)}
.cust-help summary{cursor:pointer;color:var(--lemon-ink);font-weight:500;
  text-underline-offset:3px;text-decoration:underline}
.cust-help ul{margin:.6rem 0 0;padding-left:1.1rem;line-height:1.55}
.cust-help li{margin-bottom:.3rem}
.cust-help p{margin:.55rem 0 0}
.cust-help a{color:var(--lemon-ink)}

.cust-row{margin-top:1.25rem}
.cust-row[hidden]{display:none}
.cust-lab{margin:0 0 .55rem;font-size:.88rem;font-weight:500;color:var(--ink)}
.cust-opts{display:flex;flex-wrap:wrap;gap:.55rem}
/* A question that is not this customer's to answer, left where they can see it
   was asked. Faded rather than removed, and unreachable by mouse or keyboard. */
.cust-row.off .cust-opts{opacity:.4}
.cust-row.off .cust-opt{cursor:default}
.cust-why{margin:.5rem 0 0;font-size:.78rem;color:var(--ink-faint)}
.cust-why[hidden]{display:none}

.cust-opt{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;cursor:pointer;
  padding:.6rem .8rem;border-radius:10px;border:1px solid rgba(36,52,75,.18);background:var(--paper);
  font-family:var(--body);color:var(--ink);text-align:left;
  transition:border-color .3s var(--ease-soft),background .3s var(--ease-soft)}
.cust-opt b{font-weight:500;font-size:.9rem}
.cust-opt small{font-size:.7rem;color:var(--ink-faint)}
.cust-opt:hover{border-color:var(--lemon)}
.cust-opt.on{border-color:var(--lemon-ink);border-width:2px;padding:calc(.6rem - 1px) calc(.8rem - 1px)}
/* a corner drawn rather than described: the difference is a shape, not a word */
.cust-opt.art svg{width:46px;height:32px;margin-bottom:.25rem;
  fill:var(--jay-soft);stroke:var(--jay-ink);stroke-width:1.6;stroke-linejoin:round}
.cust-opt.sm{flex-direction:row;align-items:center;min-width:4.2rem;justify-content:center;
  padding:.5rem 1.1rem;font-size:.9rem}
.cust-opt.sm.on{padding:calc(.5rem - 1px) calc(1.1rem - 1px)}

.cust-sub{margin-top:.75rem}
.cust-sub[hidden]{display:none}
.cust-sel{display:inline-flex;flex-direction:column;gap:.3rem;margin-right:.7rem;margin-bottom:.5rem}
.cust-sel span{font-size:.78rem;color:var(--ink-soft)}
.cust-sel select{padding:.5rem .7rem;border:1px solid rgba(36,52,75,.2);border-radius:9px;
  background:var(--paper);font-family:var(--body);font-size:.92rem;color:var(--ink)}
.cust-sel select:focus{outline:none;border-color:var(--lemon-ink);box-shadow:0 0 0 3px rgba(232,179,60,.28)}

/* The answer to the whole panel. Full-bleed inside the card so it reads as the
   floor of it, the way a total does at the foot of a bill. */
.cust-bar{margin:1.25rem -1.15rem 0;padding:.85rem 1.15rem .95rem;
  background:var(--night);border-radius:0 0 13px 13px}
.cust-bar-main{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.cust-bar-main span{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.cust-bar-main b{font-family:var(--num);font-variant-numeric:lining-nums tabular-nums;
  font-weight:500;font-size:1.5rem;color:#fff;line-height:1}
.cust-bar-note{margin:.4rem 0 0;font-size:.78rem;line-height:1.45;color:rgba(255,255,255,.72)}

/* the measurements on a bagged custom line, which is the only thing telling it
   apart from another custom line of the same design */
.bagmeta .spec{color:var(--lemon-ink)}

/* One column below the point where three number fields stop being readable.
   Width and length pair up; depth takes the full row rather than being orphaned
   at half width beside nothing. */
@media (max-width:560px){
  .cust{padding:1rem 1rem .3rem}
  .cust-grid{grid-template-columns:repeat(2,1fr)}
  .cust-grid .cust-f:last-child{grid-column:1 / -1}
  .cust-grid.two .cust-f:last-child{grid-column:auto}
  .cust-bar{margin:1.15rem -1rem 0;padding:.8rem 1rem .9rem}
  .cust-bar-main b{font-size:1.35rem}
  /* The two corners are a comparison, so they stay beside each other rather
     than stacking into two cards nobody sees at the same time. */
  #custCorner .cust-opts{display:grid;grid-template-columns:1fr 1fr}
  .cust-opt.art{min-width:0}
  .cust-sel{display:flex;margin-right:0}
  .cust-sel select{width:100%}
}