:root {
  --accent: #670000; --bg: #faf7f2; --surface: #ffffff; --ink: #2b2725;
  --muted: #6e645c; --line: #e9dfd3; --dept: #670000;
}
*, *::before, *::after { box-sizing: border-box; }
/* The browser hides `[hidden]` with `display:none` at the lowest possible
   priority, so ANY class here that sets a display wins and the attribute
   silently stops working. Found on the basket 2026-08-14: `.cart-promo-box`
   and `.cart-row` are both `display:flex`, so the discount line showed at
   −$0.00 on every basket and the code field stayed open after a code had
   been applied — the markup said hidden and the page disagreed.

   One rule rather than a `[hidden]` variant per class, because the next
   flex container somebody adds would have the same bug and no test would
   catch it. `!important` is the whole point: it has to outrank the classes. */
[hidden] { display: none !important; }
html, body { max-width: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink);
       font: 15px/1.6 Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; }
body.dept-christmas { --dept: #8c1c1c; }
body.dept-home-gifts { --dept: #8a5a2b; }
body.dept-wellness-apparel { --dept: #3e6b5c; }
body.brand-old-world-christmas, .brandtile.brand-old-world-christmas { --dept: #7a1220; }
body.brand-kurt-adler, .brandtile.brand-kurt-adler { --dept: #1f5140; }
body.brand-tommie-copper, .brandtile.brand-tommie-copper { --dept: #2f5d7c; }
body.brand-ginger-cottages, .brandtile.brand-ginger-cottages { --dept: #8a5a2b; }
body.brand-primitives-by-kathy, .brandtile.brand-primitives-by-kathy { --dept: #7a5c3a; }
body.brand-enesco, .brandtile.brand-enesco { --dept: #5b4a6b; }
a { color: inherit; }
h1, h2, h3, .word, .display, .price { font-family: Cormorant, Georgia, serif; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 22px; }
main.wrap { width:100%; min-width:0; }
.bar { background: var(--surface); border-bottom: 1px solid var(--line); }
.bar a { text-decoration: none; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 74px; }
.word { font-size: 26px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--accent); }
.top-actions { display:flex; gap:18px; align-items:center; font-size:12px; letter-spacing:.09em; text-transform:uppercase; color: var(--muted); }
.nav { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.nav .wrap { display: flex; align-items:center; justify-content:center; flex-wrap:wrap; gap: 0; padding: 0 22px; }
.nav a { color: var(--ink); text-decoration: none; letter-spacing: .12em;
          text-transform: uppercase; font-size: 12px; font-weight: 600; padding: 15px 15px; white-space:nowrap; }
.nav a:hover, .nav a:focus-visible { color: var(--dept); box-shadow: inset 0 -2px 0 var(--dept); }
.promo { background: var(--accent); color: #fff; text-align: center;
          padding: 11px 16px; font-size: 12.5px; font-weight:600; letter-spacing: .09em; text-transform: uppercase; }
.hero { position:relative; overflow:hidden; min-height:430px; display:grid; align-items:center; padding:70px 22px; background:var(--accent); color:#fff; }
.hero img.bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero::after { content:""; position:absolute; inset:0; background:linear-gradient(100deg, rgba(28,16,12,.82) 0%, rgba(28,16,12,.35) 55%, rgba(28,16,12,.08) 100%); z-index:1; }
.hero-inner { position:relative; z-index:2; width:min(100%,1136px); margin:0 auto; min-width:0; }
.eyebrow { margin:0 0 12px; color:#f3e2d3; font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; }
.hero h1 { max-width:15ch; margin:0 0 16px; font-size:clamp(42px,6.5vw,74px); font-weight:500; line-height:.95; letter-spacing:-.02em; }
.hero-copy { margin:0 0 26px; max-width:52ch; font-size:17px; line-height:1.6; color:#fbf3ec; }
.hero.quiet { background:#f2f4f1; color:var(--ink); min-height:300px; }
.hero.quiet::after { display:none; }
.hero.quiet .eyebrow { color:var(--dept); }
.hero.quiet .hero-copy { color:var(--muted); }
.button-row { display:flex; flex-wrap:wrap; gap:12px; }
.buy { display: inline-block; background: var(--accent); color: #fff;
        text-decoration: none; padding: 13px 30px; letter-spacing: .12em;
        text-transform: uppercase; font-size: 12.5px; font-weight:600; border-radius: 8px; border:0; cursor:pointer; }
.buy:hover { filter: brightness(1.12); }
.buy.alt { background:transparent; border:1px solid rgba(255,255,255,.8); }
.hero.quiet .buy.alt { border-color: var(--ink); color: var(--ink); }
.buy.off { background: #b9b3aa; pointer-events: none; }
.buy[disabled] { background: #b9b3aa; pointer-events: none; }
/* The basket. A count that is empty renders as nothing at all rather than a
   zero — an empty basket is not news. */
.bag-link { position:relative; }
.bag-count { display:inline-block; min-width:17px; padding:0 4px; margin-left:4px;
             background: var(--accent); color:#fff; border-radius:9px;
             font-size:10px; line-height:17px; text-align:center; }
.cart-wrap { padding: 26px 0 80px; }
.cart-h { margin: 0 0 22px; font-size: 34px; }
.cart-h .muted { font-size: 15px; font-family: Inter, sans-serif; }
.cart-blank { padding: 90px 0 120px; max-width: 460px; }
/* Goods left, summary right — and the summary stays put while you scroll,
   so the total and the one button that matters are never somewhere you have
   to go and find. */
.cart-cols { display: grid; grid-template-columns: 1fr 320px; gap: 46px;
             align-items: start; }
.cart-list { list-style: none; margin: 0; padding: 0; }
.cart-item { display: grid; grid-template-columns: 86px 1fr auto; gap: 18px;
             padding: 20px 0; border-bottom: 1px solid var(--line);
             align-items: start; }
.cart-item:first-child { padding-top: 0; }
.cart-pic { width: 86px; height: 86px; object-fit: cover; border-radius: 10px;
            background: var(--surface); display: block; }
.cart-pic-none { border: 1px solid var(--line); }
.cart-name { font-family: Cormorant, Georgia, serif; font-size: 19px;
             line-height: 1.25; color: var(--ink); text-decoration: none;
             display: block; }
.cart-name:hover { text-decoration: underline; }
.cart-opt { font-size: 12.5px; color: var(--muted); margin-top: 5px;
            letter-spacing: .04em; }
.cart-each { font-size: 13px; color: var(--muted); margin-top: 7px; }
.cart-warn { color: var(--accent); font-size: 12.5px; margin-top: 6px; }
.cart-right { text-align: right; display: flex; flex-direction: column;
              align-items: flex-end; gap: 9px; }
/* One control, three parts — not three loose buttons in a row. */
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line);
           border-radius: 999px; overflow: hidden; background: var(--surface); }
.step { width: 32px; height: 32px; border: 0; background: transparent;
        cursor: pointer; font-size: 16px; line-height: 1; color: var(--ink); }
.step:hover:not([disabled]) { background: rgba(0,0,0,.05); }
.step[disabled] { opacity: .3; cursor: default; }
.step-n { min-width: 26px; text-align: center; font-size: 14px;
          font-variant-numeric: tabular-nums; }
.cart-sum { font-size: 16px; font-variant-numeric: tabular-nums; }
.cart-x { border: 0; background: transparent; padding: 0; cursor: pointer;
          font-size: 12px; color: var(--muted); text-decoration: underline;
          letter-spacing: .04em; }
.cart-x:hover { color: var(--accent); }
.cart-gone .cart-name { color: var(--muted); }
.cart-card { position: sticky; top: 22px; background: var(--surface);
             border: 1px solid var(--line); border-radius: 14px; padding: 24px; }
.cart-card-h { margin: 0 0 16px; font-size: 21px; }
.cart-row { display: flex; justify-content: space-between; align-items: baseline;
            gap: 12px; margin-bottom: 11px; font-size: 14px; }
.cart-row b { font-size: 20px; font-family: Cormorant, Georgia, serif; }
/* The one button that matters. Taller than an ordinary `.buy` and given room
   above it, so it reads as the end of the summary rather than as another row
   in it. */
.buy.wide { display: block; width: 100%; margin-top: 18px; padding: 16px 20px;
            text-align: center; border-radius: 10px; }
.cart-err { color: #b3261e; margin: 12px 0 0; font-size: 13.5px; }
.cart-row span { display: flex; flex-direction: column; }
.cart-eta { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.cart-grand { border-top: 1px solid var(--line); padding-top: 12px;
              margin-top: 14px; font-size: 15px; }
/* A sale price. The struck-through original sits BEFORE the new price and in
   the muted colour, so the eye lands on what it costs today and can still see
   what it cost yesterday — the arrangement every shop uses, and the one
   Google mirrors in a Shopping result. */
.was { color: var(--muted); font-weight: 400; margin-right: 7px;
       text-decoration-thickness: 1px; }
.save { display:inline-block; margin-left:10px; padding:3px 9px;
        border-radius:999px; font-family: Inter, system-ui, sans-serif;
        font-size:11.5px; font-weight:700; letter-spacing:.04em;
        color:#1f6b3f; background: color-mix(in srgb, #1f6b3f 10%, transparent); }
.cart-was { color: var(--muted); text-decoration: line-through;
            margin-right: 6px; }
/* The discount code. Closed by default and opened by a plain text link,
   because a code field standing open is the first thing a shopper WITHOUT a
   code sees, and the well-known result is a trip to a coupon site and a
   basket that never comes back. */
.vis-hidden { position:absolute; width:1px; height:1px; overflow:hidden;
              clip:rect(0 0 0 0); white-space:nowrap; }
.cart-off b { color: #1f6b3f; }
/* The discount control. Closed it is one quiet line; open it is a SINGLE
   joined control — one border, one height, the button filled. It used to be
   a light-bordered input beside a heavy outlined button of a different height
   with a gap between them, which the owner correctly called a 1999 form. The
   rule that fixes it: an input and its action are one object, not two. */
.cart-promo { margin-top: 16px; border-top: 1px solid var(--line);
              padding-top: 16px; }
.cart-promo-open { display:flex; align-items:center; gap:7px; width:100%;
                   background:none; border:0; padding:0; cursor:pointer;
                   font:inherit; font-size:13.5px; font-weight:500;
                   color: var(--accent); text-align:left; }
.cart-promo-open span { display:grid; place-items:center; width:18px;
                        height:18px; border-radius:50%; font-size:14px;
                        line-height:1; font-weight:600; color:var(--accent);
                        background: color-mix(in srgb, var(--accent) 10%, transparent); }
.cart-promo-open:hover { color: var(--ink); }
.cart-promo-open:hover span { background: color-mix(in srgb, var(--ink) 10%, transparent);
                              color: var(--ink); }
/* One box: the border lives on the wrapper, the input and button sit inside
   it with none of their own, so they cannot disagree about height or radius. */
.cart-promo-box { display:flex; align-items:stretch; height:46px;
                  border:1px solid var(--line); border-radius:10px;
                  background:#fff; overflow:hidden;
                  transition: border-color .12s, box-shadow .12s; }
.cart-promo-box:focus-within { border-color: var(--accent);
                               box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.cart-promo-box input { flex:1; min-width:0; border:0; outline:0;
                        padding:0 14px; font:inherit; font-size:14.5px;
                        letter-spacing:.02em; background:transparent;
                        color:var(--ink); }
.cart-promo-box input::placeholder { color: var(--muted); opacity:.85;
                                     letter-spacing:0; }
.cart-promo-go { flex:none; padding:0 20px; font:inherit; font-size:13.5px;
                 font-weight:600; letter-spacing:.02em; cursor:pointer;
                 border:0; background:var(--ink); color:#fff; }
.cart-promo-go:hover { background:var(--accent); }
.cart-promo-msg { margin:10px 0 0; font-size:12.5px; line-height:1.45;
                  color:#b3261e; }
.cart-promo-msg.ok { color:#1f6b3f; }
.cart-promo-on { display:flex; align-items:center; gap:12px;
                 margin-top:2px; }
/* Applied, it is a chip you take off — not an input still waiting for you. */
.cart-chip { display:inline-flex; align-items:center; gap:8px;
             padding:7px 13px; border-radius:999px;
             font-size:13px; font-weight:700; letter-spacing:.08em;
             color: var(--accent);
             background: color-mix(in srgb, var(--accent) 8%, transparent);
             border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); }
.cart-chip.off { color: var(--muted);
                 background: color-mix(in srgb, var(--muted) 10%, transparent);
                 border-color: var(--line); }
.cart-chip-tick { width:14px; height:14px; flex:none; }
.cart-chip.off .cart-chip-tick { display:none; }
/* The same word, and the same styling, as the Remove on every basket line
   just above it. One action, one name. */
.cart-promo-x { background:none; border:0; padding:0; cursor:pointer;
                font:inherit; font-size:12px; color:var(--muted);
                text-decoration:underline; letter-spacing:.04em; }
.cart-promo-x:hover { color:var(--accent); }
/* The signup popup. Centred card over a dim veil — the pattern a shopper has
   met a hundred times, so nobody has to work out how to leave. It is fixed
   and scroll-locked to nothing: the page behind stays scrollable on purpose,
   because a modal that freezes a phone reads as a crash. */
.pop { position:fixed; inset:0; z-index:60; display:grid; place-items:center;
       padding:20px; }
.pop[hidden] { display:none; }
.pop-veil { position:absolute; inset:0; background:rgba(28,16,12,.55);
            backdrop-filter:blur(2px); }
.pop-card { position:relative; width:min(100%,430px); background:var(--surface);
            border-radius:18px; padding:34px 30px 26px; text-align:center;
            box-shadow:0 24px 60px rgba(28,16,12,.28);
            animation:pop-in .22s ease-out; }
@keyframes pop-in { from { opacity:0; transform:translateY(10px) scale(.98); }
                    to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .pop-card { animation:none; } }
.pop-x { position:absolute; top:10px; right:14px; background:none; border:0;
         font-size:26px; line-height:1; cursor:pointer; color:var(--muted);
         padding:4px 8px; }
.pop-x:hover { color:var(--accent); }
.pop-eyebrow { margin:0 0 8px; font-size:11px; font-weight:700;
               letter-spacing:.22em; text-transform:uppercase;
               color:var(--coral); }
.pop-card h2 { margin:0 0 10px; font-size:31px; font-weight:500;
               line-height:1.1; }
.pop-sub { margin:0 0 18px; font-size:14px; line-height:1.55;
           color:var(--muted); }
.pop-code { display:flex; align-items:center; justify-content:center; gap:10px;
            border:1px dashed var(--accent); border-radius:10px;
            padding:11px 14px; margin-bottom:18px; background:#fff; }
.pop-code code { font-size:19px; font-weight:700; letter-spacing:.16em;
                 color:var(--accent); }
.pop-copy { background:none; border:0; cursor:pointer; font:inherit;
            font-size:12px; letter-spacing:.08em; text-transform:uppercase;
            color:var(--muted); text-decoration:underline; }
.pop-form input { width:100%; padding:12px 14px; font:inherit; font-size:15px;
                  border:1px solid var(--line); border-radius:9px;
                  background:#fff; color:var(--ink); }
.pop-lab { display:block; text-align:left; font-size:11px; font-weight:700;
           letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
           margin-bottom:6px; }
.pop-done { margin:6px 0 0; font-size:14.5px; color:#1f6b3f; }
.pop-no { display:block; width:100%; margin:14px 0 0; background:none;
          border:0; cursor:pointer; font:inherit; font-size:13px;
          color:var(--muted); text-decoration:underline; }
.pop-fine { margin:14px 0 0; font-size:11px; line-height:1.5;
            color:var(--muted); }
/* The policy pages carry no styling of their own before this, which shows: a
   returns policy is read by a shopper deciding whether to trust us and by a
   Merchant Center reviewer deciding whether to show us at all. A measure of
   about 70 characters is the whole trick. */
.policy { padding: 56px 0 84px; max-width: 68ch; }
.policy h1 { font-size: clamp(32px, 4vw, 44px); margin: 0 0 8px; }
.policy h2 { font-size: 27px; margin: 40px 0 4px; }
.policy h3 { font-family: Inter, sans-serif; font-size: 15px; font-weight: 600;
             letter-spacing: .01em; margin: 26px 0 2px; }
.policy p { line-height: 1.65; margin: 10px 0; }
.policy .muted { margin-top: 40px; padding-top: 18px;
                 border-top: 1px solid var(--line); font-size: 13.5px; }
.policy .muted a { color: var(--dept); margin-right: 12px; }
.thanks { padding: 70px 0 90px; max-width: 560px; }
/* The order number, on the page where they first meet it. Big, because it is
   the one thing on this page they may need to write down. */
.orderref { margin: 26px 0; padding: 16px 18px; border:1px solid var(--line);
  border-radius:12px; background:var(--surface); }
.orderref p { margin:0; }
.orderref-n { margin-top:6px !important; }
.orderref-n code { font-size:24px; font-weight:600; letter-spacing:.06em;
  color:var(--ink); }
.orderref-track { margin-top:10px !important; font-size:14px; }
.orderref-track a { color:var(--dept); }
/* "Where is my order?" — one field, then the order itself. Held to the same
   width as the basket summary so the two transactional pages feel like one
   place rather than two. */
.orderpage { padding: 60px 0 90px; max-width: 620px; }
.orderpage h1 { font-size: clamp(30px,4vw,42px); margin: 0 0 22px; }
.order-find label { display:block; font-size:12px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  margin-bottom:8px; }
.order-row { display:flex; gap:10px; align-items:stretch; }
.order-row input { flex:1; min-width:0; padding:13px 14px; font-size:16px;
  font-family:inherit; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--line); border-radius:10px; background:#fff;
  color:var(--ink); }
.order-row input:focus { outline:2px solid var(--accent); outline-offset:1px; }
.order-row .buy { white-space:nowrap; }
.order-hint { color:var(--muted); font-size:13px; margin:9px 0 0; }
.order-err { color:var(--accent); margin:16px 0 0; font-size:14.5px; }
.order-help { color:var(--muted); font-size:13.5px; margin-top:26px; }
.order-card { margin-top:26px; border:1px solid var(--line); border-radius:12px;
  background:var(--surface); overflow:hidden; }
.order-head { display:flex; gap:14px; align-items:flex-start;
  justify-content:space-between; padding:18px 18px 14px;
  border-bottom:1px solid var(--line); }
.order-ref { font-size:20px; font-weight:600; letter-spacing:.04em; }
.order-when { color:var(--muted); font-size:13px; margin-top:3px; }
.order-stage { flex:none; font-size:12px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; padding:6px 11px; border-radius:999px;
  background:color-mix(in srgb, var(--ink) 8%, transparent); color:var(--ink); }
.order-stage.stage-shipped { background:color-mix(in srgb, #1c7b4d 14%, transparent);
  color:#1c7b4d; }
.order-stage.stage-canceled { color:var(--muted); }
/* The whole reason the page exists once a parcel is moving, so it is the
   loudest thing on it and it is a link — nobody copies 22 digits by hand. */
.order-track { padding:16px 18px; border-bottom:1px solid var(--line);
  background:#fff; }
.order-track-label { font-size:11.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin-bottom:5px; }
.order-track-n { font-size:18px; letter-spacing:.04em; color:var(--dept);
  text-decoration:none; word-break:break-all; }
.order-track-n:hover { text-decoration:underline; }
.order-items { list-style:none; margin:0; padding:0; }
.oi { display:flex; gap:13px; align-items:center; padding:13px 18px;
  border-bottom:1px solid var(--line); }
.oi:last-child { border-bottom:0; }
.oi-pic { width:56px; height:56px; flex:none; object-fit:cover;
  border-radius:8px; background:#f2ece3; display:block; }
.oi-mid { flex:1; min-width:0; }
.oi-name { font-size:14.5px; line-height:1.35; }
.oi-name a { color:var(--ink); text-decoration:none; }
.oi-name a:hover { text-decoration:underline; }
.oi-qty { color:var(--muted); font-size:12.5px; margin-top:3px; }
.oi-sum { font-size:14.5px; }
.order-total { display:flex; justify-content:space-between; padding:15px 18px;
  border-top:1px solid var(--line); font-size:15px; }
@media (max-width: 560px) {
  .order-row { flex-direction:column; }
  .order-head { flex-direction:column; }
}
h2 { font-weight: 500; color: var(--ink); font-size: 30px; margin: 44px 0 6px; letter-spacing:-.01em; }
.section { padding: 64px 0; }
.section-head { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:22px; }
.section-head h2, .collection-hero h1 { text-align:left; margin:0; font-size:clamp(30px,4vw,42px); line-height:1.02; }
.section-head p { margin:0; color:var(--muted); max-width:450px; }
.text-link { color:var(--dept); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; text-decoration:none; }
.text-link:hover { text-decoration:underline; }
.worlds { display:grid; min-width:0; grid-template-columns:repeat(3,1fr); gap:14px; }
.world { min-width:0; min-height:320px; padding:26px; position:relative; overflow:hidden; display:flex; align-items:end; color:#fff; text-decoration:none; background:var(--accent); isolation:isolate; border-radius:12px; }
.world img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.72; transition:transform .45s ease, opacity .45s ease; z-index:-1; }
.world::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(20,10,8,.8),rgba(20,10,8,.05) 70%); z-index:-1; }
.world:hover img { transform:scale(1.045); opacity:.88; }
.world h3 { margin:4px 0 0; font-size:32px; font-weight:500; line-height:.95; overflow-wrap:anywhere; }
.world .eyebrow { color:#f3e2d3; }
.featured { background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.grid { display:grid; gap:18px; padding:0 0 26px; grid-template-columns:repeat(4,minmax(0,1fr)); }
.search-page { padding:46px 0 76px; }
.search-head { max-width:720px; margin-bottom:24px; }
.search-head h1 { margin:0 0 7px; font-size:clamp(34px,4.5vw,48px);
                   font-weight:500; line-height:1.02; }
.search-head p { margin:0; color:var(--muted); font-size:16px; }
.search-form label { display:block; margin-bottom:7px; color:var(--muted);
                      font-size:11px; font-weight:700; letter-spacing:.14em;
                      text-transform:uppercase; }
.search-entry { display:flex; align-items:stretch; max-width:760px; }
.search-entry input { flex:1; min-width:0; border:1px solid var(--line);
                       border-right:0; border-radius:10px 0 0 10px;
                       padding:13px 15px; background:var(--surface);
                       color:var(--ink); font:inherit; font-size:16px; }
.search-entry input:focus { position:relative; outline:3px solid var(--dept);
                             outline-offset:1px; }
.search-entry .buy { border-radius:0 10px 10px 0; padding-left:24px;
                      padding-right:24px; }
.search-help { margin:7px 0 0; color:var(--muted); font-size:12.5px; }
.search-filters { display:flex; flex-wrap:wrap; align-items:end; gap:14px 18px;
                   margin:24px 0 17px; padding:17px 0;
                   border:solid var(--line); border-width:1px 0; }
.search-control { display:flex; flex-direction:column; gap:5px; min-width:190px;
                   color:var(--muted); font-size:11px; font-weight:700;
                   letter-spacing:.11em; text-transform:uppercase; }
.search-control select { min-height:43px; padding:8px 34px 8px 11px;
                          border:1px solid var(--line); border-radius:9px;
                          background:var(--surface); color:var(--ink);
                          font:500 14px Inter, ui-sans-serif, system-ui, sans-serif;
                          letter-spacing:0; text-transform:none; }
.search-check { min-height:43px; display:flex; align-items:center; gap:9px;
                 color:var(--ink); font-size:14px; cursor:pointer; }
.search-check input { width:19px; height:19px; margin:0; accent-color:var(--accent); }
.search-status { min-height:24px; margin:0 0 15px; color:var(--muted);
                  font-size:13.5px; }
.search-retry { margin:-5px 0 18px; padding:0; border:0; background:none;
                 cursor:pointer; }
.search-empty { grid-column:1/-1; padding:48px 20px; border:1px dashed var(--line);
                 border-radius:12px; text-align:center; color:var(--muted);
                 background:var(--surface); }
.search-more { display:block; margin:5px auto 0; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:0; overflow:hidden; text-decoration:none; display:flex; flex-direction:column; transition:transform .18s ease, box-shadow .18s ease; }
.card:hover { transform:translateY(-3px); box-shadow:0 10px 24px rgba(43,39,37,.09); }
.card img, .ph { width:100%; aspect-ratio:1; object-fit:cover; background:#f2ece3; display:block; border:0; }
.card h3 { font-family:Inter, sans-serif; font-size:13.5px; font-weight:600; line-height:1.4; margin:11px 12px 4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.8em; }
.product-meta { display:flex; justify-content:space-between; gap:6px; color:var(--muted); font-size:12px; margin:auto 12px 12px; padding-top:6px; }
.price { color: var(--accent); font-size: 20px; font-weight:600; }
/* On a card the price shares one narrow row with the maker's name, and a sale
   gives it three tokens instead of one — "$35.40 From $30.09" wrapped into
   "$35.40 From" over "$30.09", which reads as a different price. Stacked and
   right-aligned instead: the old price sits above the new one, each on its
   own line, and neither can break mid-figure. A card with no sale has one
   child here and is unchanged. */
.card .price { display:flex; flex-direction:column; align-items:flex-end;
               line-height:1.15; white-space:nowrap; }
.card .price .was { font-size:13px; margin-right:0; }
.gone { color: var(--muted); font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase; }
.card .gone { margin:0 12px 12px; }
.detail { display:grid; grid-template-columns:1fr 1fr; gap:44px; padding:40px 0 60px; }
/* A grid item refuses to shrink below its contents unless told to, and the
   thumbnail strip is two dozen 64px tiles in a row: without this the photo
   column grew to ~1700px, threw the two-column layout away and rendered the
   hero at full bleed. The strip scrolls instead. */
.detail > div { min-width:0; }
.detail img, .detail .ph { border:1px solid var(--line); border-radius:14px; width:100%; }
/* Makers shoot portrait; Amazon shoots landscape. Capping the hero keeps a
   tall photo from pushing the price and the picker below the fold, and
   `contain` letterboxes rather than crops — these are white-background
   product shots, so the bars are invisible. */
#vp-photo { max-height:72vh; object-fit:contain; background:var(--surface); }
.detail h1 { font-size:clamp(32px,4vw,48px); font-weight:500; margin:0 0 10px; line-height:1.02; letter-spacing:-.015em; }
.crumb-brand { color:var(--dept); font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; margin:0 0 8px; }
.vp-label { display:block; margin:18px 0 8px; color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.vp-colors { display:flex; gap:10px; flex-wrap:wrap; }
.vp-color { width:34px; height:34px; border-radius:50%; border:2px solid var(--surface); box-shadow:0 0 0 1.5px var(--line); cursor:pointer; padding:0; }
.vp-color[aria-pressed="true"] { box-shadow:0 0 0 2.5px var(--ink); }
.vp-color:focus-visible { outline:3px solid var(--dept); outline-offset:2px; }
.vp-sizes { display:flex; gap:8px; flex-wrap:wrap; }
.vp-size { border:1.5px solid var(--line); background:var(--surface); border-radius:9px; padding:9px 16px; font:600 13px Inter, sans-serif; cursor:pointer; color:var(--ink); }
.vp-size[aria-pressed="true"] { border-color:var(--ink); }
.vp-size[disabled] { opacity:.35; cursor:not-allowed; text-decoration:line-through; }
.vp-size:focus-visible { outline:3px solid var(--dept); outline-offset:2px; }
/* Packaging pills carry a phrase, not a code, so they wrap onto their own
   line and are sized for words rather than for "XL". Selected reads as a
   filled chip: it is the one axis where both options are always present, so
   an outline alone was too quiet to see which was chosen. */
.vp-packs { display:flex; gap:8px; flex-wrap:wrap; }
.vp-pack { border:1.5px solid var(--line); background:var(--surface); border-radius:9px; padding:9px 14px; font:600 13px Inter, sans-serif; cursor:pointer; color:var(--ink); text-align:left; }
.vp-pack[aria-pressed="true"] { border-color:var(--ink); background:var(--ink); color:var(--surface); }
.vp-pack[disabled] { opacity:.35; cursor:not-allowed; text-decoration:line-through; }
.vp-pack:focus-visible { outline:3px solid var(--dept); outline-offset:2px; }
.vp-state { color:var(--muted); font-size:13px; margin:14px 0 0; }
.vp-thumbs { display:flex; gap:8px; overflow-x:auto; margin-top:10px; padding-bottom:4px; scrollbar-width:thin; }
.vp-thumb { flex:0 0 64px; width:64px; height:64px; border:1px solid var(--line); border-radius:9px; background:var(--surface); cursor:pointer; padding:0; overflow:hidden; }
.vp-thumb img { width:100%; height:100%; object-fit:cover; display:block; border:0; border-radius:0; }
.vp-thumb[aria-current="true"] { outline:2.5px solid var(--dept); outline-offset:1px; }
.vp-thumb:focus-visible { outline:3px solid var(--dept); outline-offset:2px; }
footer { background: var(--ink); color: #f3eee6; margin-top: 40px; padding: 34px 0; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 20px; font-size: 13.5px; }
footer a { color:#f3eee6; }
.about { font-size: 15.5px; line-height: 1.7; color: #4d453f; margin: 22px 0 14px; max-width:62ch; }
.bul { padding-left: 20px; color: #4d453f; font-size: 14.5px; line-height: 1.65; }
.bul li { margin: 6px 0; }
.note { background: #fdf6e7; border: 1px solid #e5d3a1; padding: 12px 16px; text-align: center; font-size: 13.5px; }
.pager { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 0 0 60px; }
.pg { text-decoration: none; letter-spacing: .12em; text-transform: uppercase;
       font-size: 12px; font-weight:600; color: var(--accent); border: 1px solid var(--line);
       padding: 10px 20px; background: var(--surface); border-radius:8px; }
.pg:hover { border-color: var(--accent); }
.pg.off { color: #b9b3aa; border-color: transparent; background: none; }
.pg.count { border: 0; background: none; color: var(--muted); }
.story { display:grid; grid-template-columns:1.2fr .8fr; gap:40px; align-items:center; }
.story-card { background:var(--accent); color:#fff; padding:42px; border-radius:14px; }
.story-card h2 { color:#fff; margin:0 0 15px; font-size:40px; line-height:1; }
.story-card p { color:#f6e7e0; margin-bottom:25px; }
.story-card .buy { background:#fff; color:var(--accent); }
.story-note { border-left:2px solid var(--dept); padding:26px 30px; font-family:Cormorant, Georgia, serif; color:var(--accent); font-size:28px; line-height:1.15; }
.collection-hero { padding:50px 0 30px; max-width:720px; }
.collection-hero .eyebrow { color:var(--dept); }
.collection-hero p { color:var(--muted); font-size:17px; max-width:620px; }
.breadcrumbs { margin:26px 0 0; color:var(--muted); font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
.breadcrumbs a { color:var(--dept); }
.brand-list { display:flex; flex-wrap:wrap; gap:10px; padding:24px 0 0; }
.brand-list a { border:1px solid var(--line); background:var(--surface); border-radius:9px; padding:10px 14px; text-decoration:none; font-size:13px; }
.brand-list a:hover { border-color:var(--dept); color:var(--dept); }
/* A maker's own collections, as small photographed doors. Denser than the
   maker tiles above on purpose: there are nineteen of these for Old World
   Christmas, and at 240px they would be a page of scrolling before the first
   ornament. Square, because an ornament is round. */
.typetiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
             gap:14px; }
/* A short row is bounded by its own tile count instead of being auto-filled:
   three tiles in a seven-slot grid huddle at the left with half the page
   empty beside them, which reads as a row that failed to load. */
.typetiles.few { grid-template-columns:repeat(var(--n), minmax(0,1fr));
                 max-width:calc(var(--n) * 200px); }
@media (max-width: 700px) {
  .typetiles.few { grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
                   max-width:none; }
}
.typetile { display:block; text-decoration:none; background:var(--surface);
            border:1px solid var(--line); border-radius:12px; overflow:hidden;
            transition:transform .16s ease, border-color .16s ease; }
.typetile:hover { transform:translateY(-2px); border-color:var(--dept); }
.typetile img, .typetile .ph { display:block; width:100%; aspect-ratio:1/1;
                               object-fit:cover; background:#f1ece4; }
.typetile-body { display:flex; align-items:baseline; gap:7px;
                 padding:10px 12px 12px; }
.typetile-body b { font-family:Cormorant, Georgia, serif; font-size:17px;
                   line-height:1.1; color:var(--accent); }
.typetile-body .muted { font-size:11px; letter-spacing:.06em; color:var(--muted);
                        margin-left:auto; }
@media (prefers-reduced-motion: reduce) { .typetile:hover { transform:none; } }
/* The same doors on the department page, as a shelf that scrolls sideways.
   Nineteen tiles as a grid would put three screens of tiles before the first
   product; a shelf keeps them to one row, and the half tile cut off at the
   edge is what says there are more. The vertical padding is for the hover
   lift, which the overflow container would otherwise clip. */
.typeshelf { display:grid; grid-auto-flow:column; grid-auto-columns:148px;
             gap:14px; overflow-x:auto; padding:4px 2px 12px; margin:0 -2px;
             scroll-snap-type:x proximity; scrollbar-width:thin;
             scrollbar-color:var(--line) transparent; }
.typeshelf .typetile { scroll-snap-align:start; }

/* The makers, as tiles with their own photograph and their own colour. Four
   names in a row told a shopper nothing about what any of them make. */
.brand-tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
               gap:16px; }
.brandtile { display:block; text-decoration:none; background:var(--surface);
             border:1px solid var(--line); border-radius:14px; overflow:hidden;
             transition:transform .16s ease, box-shadow .16s ease,
                        border-color .16s ease; }
.brandtile:hover { transform:translateY(-3px); border-color:var(--dept);
                   box-shadow:0 14px 30px rgba(28,16,12,.12); }
.brandtile img, .brandtile .ph { display:block; width:100%; aspect-ratio:4/3;
                                 object-fit:cover; background:#f1ece4; }
.brandtile-body { display:flex; flex-direction:column; gap:3px; padding:14px 16px 16px;
                  border-top:3px solid var(--dept); }
.brandtile-body b { font-family:Cormorant, Georgia, serif; font-size:21px;
                    font-weight:500; color:var(--ink); }
.brandtile-body .muted { font-size:12px; letter-spacing:.06em;
                         text-transform:uppercase; }
@media (prefers-reduced-motion: reduce) { .brandtile:hover { transform:none; } }
.dept-hero { position:relative; overflow:hidden; border-radius:14px; margin-top:26px; min-height:330px; display:flex; align-items:end; padding:30px; color:#fff; background:var(--dept); }
.dept-hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.dept-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(15deg, rgba(16,10,8,.78), rgba(16,10,8,.06) 65%); z-index:1; }
.dept-hero > div { position:relative; z-index:2; max-width:56ch; }
.dept-hero h1 { margin:0 0 8px; font-size:clamp(34px,4.5vw,52px); font-weight:500; line-height:.98; }
.dept-hero p { margin:0; color:#f7ede4; font-size:16px; }
.dept-hero.quiet { background:#eef3f0; color:var(--ink); min-height:200px; }
.dept-hero.quiet::after { display:none; }
.dept-hero.quiet p { color:var(--muted); }
/* A maker's front door: the name beside one of their own photographs, not
   on top of it. Split on purpose — the makers' scene shots are 600px files,
   sharp in a card this size and soft stretched across the whole page. */
.brand-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,500px);
              gap:38px; align-items:center; padding:44px 0 6px; }
.brand-hero h1 { margin:6px 0 10px; font-size:clamp(34px,4.5vw,52px);
                 font-weight:500; line-height:.98; text-align:left; }
.brand-hero div p:last-child { margin:0; color:var(--muted); font-size:17px;
                               max-width:44ch; }
.brand-hero img { width:100%; aspect-ratio:8/5; object-fit:cover;
                  border-radius:14px; border:1px solid var(--line);
                  background:var(--surface); }
@media (max-width: 700px) {
  .brand-hero { grid-template-columns:1fr; gap:16px; padding-top:28px; }
}
.skip { position:absolute; left:12px; top:-50px; z-index:30; background:var(--surface); color:var(--accent); padding:10px 14px; font-weight:700; }
.skip:focus { top:12px; }
a:focus-visible, button:focus-visible { outline:3px solid var(--dept); outline-offset:3px; }
@media (max-width: 760px) {
  .top { min-height:62px; } .word { font-size:21px; }
  .top-actions { gap:8px; font-size:11px; }
  .top-actions a { min-height:44px; display:inline-flex; align-items:center; }
  .top-actions a:not(.bag-link):not(.search-link) { display:none; }
  .cart-cols { grid-template-columns: 1fr; gap: 26px; }
  .cart-card { position: static; }
  .cart-item { grid-template-columns: 66px 1fr; }
  .cart-pic { width:66px; height:66px; }
  .cart-right { grid-column: 2; flex-direction: row; align-items: center;
                justify-content: space-between; width: 100%; }
  .cart-h { font-size: 27px; }
  .nav .wrap { width:100%; min-width:0; justify-content:flex-start;
               flex-wrap:nowrap; overflow-x:auto; padding-left:6px;
               padding-right:6px; scrollbar-width:none; }
  .nav .wrap::-webkit-scrollbar { display:none; }
  .nav a { min-height:44px; display:inline-flex; align-items:center;
            flex:0 0 auto; padding:11px 9px; font-size:11.5px; }
  .hero { min-height:380px; padding:52px 18px; }
  .hero h1 { font-size:38px; overflow-wrap:anywhere; }
  .hero-copy { font-size:15.5px; overflow-wrap:anywhere; } .button-row { display:grid; width:100%; gap:10px; }
  .button-row .buy { width:100%; padding-left:12px; padding-right:12px; text-align:center; }
  .section-head p, .collection-hero p { overflow-wrap:anywhere; }
  .worlds, .grid, .story { grid-template-columns:repeat(2,minmax(0,1fr)); } .world { min-height:220px; padding:16px; }
  .world:last-child { grid-column:span 2; } .world h3 { font-size:27px; } .section { padding:44px 0; }
  .section-head { display:block; } .section-head p { margin-top:10px; } .text-link { display:inline-block; margin-top:13px; }
  .story { gap:14px; } .story-card { grid-column:span 2; padding:30px; } .story-note { grid-column:span 2; padding:24px 18px; }
  .collection-hero { padding-top:32px; } .detail { grid-template-columns:1fr; gap:22px; }
  .dept-hero { min-height:250px; padding:20px; }
  .search-page { padding-top:30px; }
  .search-filters { align-items:stretch; }
  .search-control { flex:1 1 180px; min-width:0; }
}
@media (max-width: 430px) {
  .grid { gap:13px; } .card h3 { font-size:12.5px; }
  .product-meta { display:block; }
  .search-entry { display:grid; gap:9px; }
  .search-entry input { border:1px solid var(--line); border-radius:10px; }
  .search-entry .buy { border-radius:10px; min-height:46px; }
  .search-control { flex-basis:100%; }
}
@media (max-width: 360px) { .promo { font-size:11px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; } }