:root { --ink:#181818; --grey:#7b7b7b; --mint:#f4d7d5; --mint-soft:#fceeed; --mint-deep:#8a4a42; --sand:#ece9e4; --blush:#fa929f; --plum:#b3122a; }
* { box-sizing:border-box; }
body { margin:0; background:#fff; color:var(--ink); font:400 14px/1.5 Montserrat, system-ui, sans-serif; -webkit-font-smoothing:antialiased; cursor:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2032%2032%27%20width%3D%2732%27%20height%3D%2732%27%3E%3Cpath%20d%3D%27M20%2030%20V12%20A6%206%200%200%200%208%2012%20V15%27%20fill%3D%27none%27%20stroke%3D%27%235a0e18%27%20stroke-opacity%3D%270.55%27%20stroke-width%3D%277.5%27%20stroke-linecap%3D%27round%27%2F%3E%3Cpath%20d%3D%27M20%2030%20V12%20A6%206%200%200%200%208%2012%20V15%27%20fill%3D%27none%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%275.5%27%20stroke-linecap%3D%27round%27%2F%3E%3Cpath%20d%3D%27M20%2030%20V12%20A6%206%200%200%200%208%2012%20V15%27%20fill%3D%27none%27%20stroke%3D%27%23c41e3a%27%20stroke-width%3D%275.5%27%20stroke-dasharray%3D%273.2%203.2%27%20stroke-dashoffset%3D%271%27%2F%3E%3C%2Fsvg%3E") 8 16, auto; }
a { color:var(--plum); }
a:hover { color:var(--ink); }
:focus-visible { outline:2px solid var(--mint-deep); outline-offset:2px; }
.eyebrow { margin:0; font-size:11px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--grey); }

.strip { background:#1f5c3a; color:#f4c46e; text-align:center; padding:9px 16px; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
header { position:sticky; top:0; z-index:5; background:rgba(255,255,255,.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--sand); }
.bar { max-width:1240px; margin:0 auto; padding:10px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { font-family:'Montserrat', sans-serif; font-weight:500; letter-spacing:.08em; text-transform:uppercase; font-size:22px; line-height:1; color:var(--ink); text-decoration:none; white-space:nowrap; }
.brand:hover { color:var(--ink); }
.tools { display:flex; align-items:center; gap:10px; }
.search { display:none; position:relative; }
.search svg { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--grey); pointer-events:none; }
.search input { height:40px; width:220px; border:1px solid var(--sand); border-radius:999px; padding:0 16px 0 38px; font:400 13px Montserrat, sans-serif; color:var(--ink); background:#fff; }
.search input::placeholder { color:var(--grey); }
.search input:focus { border-color:var(--mint-deep); outline:none; }
.cart { display:flex; align-items:center; gap:10px; height:50px; padding:0 8px 0 16px; background:#862a27; color:#fff; border-radius:999px; text-decoration:none; font-size:14px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; transition:background .25s ease; }
.cart .sleigh { flex:0 0 auto; }
@media (max-width:420px) { .brand { font-size:18px; } .cart { height:44px; gap:7px; padding:0 6px 0 12px; font-size:12px; } .cart .sleigh { width:22px; height:22px; } .count { min-width:30px; height:30px; font-size:13px; } }
@media (max-width:340px) { .brand { font-size:15px; letter-spacing:.06em; } }
.cart:hover { color:#fff; background:#6b1f1d; }
.count { display:grid; place-items:center; min-width:34px; height:34px; padding:0 9px; border-radius:999px; background:#fff; color:#862a27; font-size:14px; font-weight:500; letter-spacing:0; transition:transform .25s ease; }
.count.bump { transform:scale(1.18); }


.page-head { max-width:1240px; margin:0 auto; padding:28px 16px 4px; }
.page-head h1 { margin:0; font-weight:400; font-size:26px; letter-spacing:.01em; }
.page-head p { margin:6px 0 0; color:var(--grey); font-size:13px; }

.grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; max-width:1240px; margin:0 auto; padding:16px 16px 64px; }
.loading { grid-column:1/-1; margin:0; color:var(--grey); font-size:13px; }
.card { display:flex; flex-direction:column; background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 1px 2px rgba(24,24,24,.04), 0 6px 20px rgba(24,24,24,.05); transition:transform .35s ease, box-shadow .35s ease; }
.card-link { text-decoration:none; color:inherit; display:block; }
.photo { aspect-ratio:1/1; overflow:hidden; background:var(--mint-soft); }
.photo img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.body { flex:1; display:flex; flex-direction:column; gap:4px; padding:12px 12px 14px; }
.cat { font-size:10px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--grey); }
.body h3 { margin:0; font-size:14px; font-weight:500; line-height:1.3; text-wrap:pretty; }
.row { display:flex; flex-direction:column; gap:10px; margin-top:auto; padding-top:8px; }
.price { color:var(--plum); font-weight:500; font-size:13px; }
.add { cursor:pointer; min-height:44px; padding:0 16px; border:1px solid var(--ink); border-radius:999px; background:transparent; color:var(--ink); font:500 11px/1 Montserrat, sans-serif; letter-spacing:.12em; text-transform:uppercase; transition:background .25s ease, color .25s ease, border-color .25s ease; }
.add:hover { background:var(--plum); border-color:var(--plum); color:#fff; }
.add.done, .add.done:hover { background:var(--mint); border-color:var(--mint); color:var(--ink); }
/* Footer (the live site's, restyled). Extra bottom padding so the snow drifts and trees
   in the bottom corners sit below the content instead of over it. */
.site-footer { margin-top:24px; padding:48px 20px 170px; background:var(--mint-soft); border-top:1px solid var(--sand); font-size:13px; color:var(--ink); }
.foot-inner { max-width:1240px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:34px 24px; }
.foot-brand { grid-column:1 / -1; }
.foot-brand img { display:block; width:153px; height:auto; }
.site-footer h3 { margin:0 0 14px; font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; }
.foot-links { list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.site-footer a { color:var(--ink); text-decoration:none; }
.site-footer a:hover { color:var(--plum); }
.foot-contact { grid-column:1 / -1; }
.pay { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 20px; }
.pay span { padding:4px 9px; border:1px solid var(--sand); border-radius:6px; background:#fff; font-size:10px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; }
.foot-contact dl { margin:0; }
.foot-contact dt { font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--grey); }
.foot-contact dd { margin:3px 0 14px; }
.social { display:flex; gap:14px; margin:6px 0 0; }
.foot-base { max-width:1240px; margin:36px auto 0; padding-top:18px; border-top:1px solid var(--sand); text-align:center; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--grey); }
@media (min-width:900px) {
  .foot-inner { grid-template-columns:1.1fr 1fr 1fr 1.2fr; }
  .foot-brand, .foot-contact { grid-column:auto; }
}

/* category nav (replicates the live site menu) */
.catnav { border-top:1px solid var(--sand); background:#fff; }
.catnav-inner { max-width:1240px; margin:0 auto; padding:0 8px; display:flex; flex-wrap:wrap; gap:0 2px; align-items:center; }
/* Below 1000px the menu row is replaced by a hamburger button (.menu-btn) that opens
   #mnav: a full-width panel under the header with search, the groups as tap-to-open
   sections, and the plain links. */
.menu-btn { display:none; flex:0 0 auto; width:40px; height:40px; margin-left:-8px; padding:0; border:0; border-radius:999px; background:transparent; color:var(--ink); cursor:pointer; place-items:center; }
.menu-btn:hover { background:var(--mint-soft); }
.mnav { position:absolute; top:100%; left:0; right:0; z-index:30; max-height:calc(100vh - 120px); overflow-y:auto; background:#fff; border-top:1px solid var(--sand); box-shadow:0 18px 40px rgba(24,24,24,.14); padding:8px 16px 20px; }
.mnav[hidden] { display:none; }
.mnav-search { position:relative; margin:8px 0 10px; }
.mnav-search svg { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--grey); pointer-events:none; }
.mnav-search input { width:100%; height:44px; border:1px solid var(--sand); border-radius:999px; padding:0 16px 0 38px; font:400 14px Montserrat, sans-serif; color:var(--ink); background:#fff; }
.mnav-search input:focus { border-color:var(--mint-deep); outline:none; }
.mnav > a, .mnav summary { display:flex; align-items:center; justify-content:space-between; min-height:48px; padding:0 4px; border-bottom:1px solid var(--sand); font-size:13px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); text-decoration:none; cursor:pointer; list-style:none; }
.mnav summary::-webkit-details-marker { display:none; }
.mnav summary::after { content:"+"; font-size:18px; font-weight:400; letter-spacing:0; color:var(--grey); }
.mnav details[open] > summary::after { content:"\2212"; }
.mnav-items { display:grid; padding:4px 0 10px 12px; border-bottom:1px solid var(--sand); }
.mnav-items a { padding:10px 4px; font-size:14px; color:var(--ink); text-decoration:none; }
.mnav a:hover { color:var(--plum); }
@media (max-width:999px) {
  .menu-btn { display:grid; }
  .catnav { display:none; }
  .bar { gap:8px; }
  .brand { margin-right:auto; }
}
@media (min-width:1000px) { .mnav { display:none !important; } }
@media (max-width:420px) {
  .bar { padding:10px 14px; }
  .cart-label { display:none; } /* sleigh + count is enough on small phones; the link keeps aria-label="Cart" */
  .cart { gap:6px; padding:0 6px 0 10px; }
}
.navgroup { position:relative; flex:0 0 auto; }
.navgroup > summary { list-style:none; cursor:pointer; padding:12px 11px; font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); white-space:nowrap; user-select:none; }
.navgroup > summary::-webkit-details-marker { display:none; }
.navgroup[open] > summary, .navgroup > summary:hover { color:var(--plum); }
.navlink { padding:12px 11px; font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); text-decoration:none; white-space:nowrap; }
.navlink:hover { color:var(--plum); }
.navmenu { position:absolute; top:100%; left:8px; z-index:20; min-width:210px; max-height:64vh; overflow:auto; background:#fff; border:1px solid var(--sand); border-radius:12px; box-shadow:0 12px 34px rgba(24,24,24,.12); padding:8px; display:grid; gap:2px; }
.navmenu a { display:block; text-align:left; text-decoration:none; border-radius:8px; padding:9px 12px; font:400 13px Montserrat,sans-serif; color:var(--ink); }
.navmenu a:hover { background:var(--mint-soft); color:var(--plum); }

/* curated homepage */
.home-sec { max-width:1240px; margin:0 auto; padding:0 16px; }
/* "Shop now" in the banner scrolls here; clear the sticky header (just the bar below
   1000px, where the menu row becomes the hamburger) */
#christmas-trees { scroll-margin-top:80px; }
@media (min-width:1000px) { #christmas-trees { scroll-margin-top:136px; } }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

/* Christmas campaign banner: the client's 1920x1080 artwork (tree photo | red panel |
   tree photo), rebuilt in HTML so it stays sharp, readable on phones and the button is a
   real link. Full width; its height --h is 72% of the artwork's height at this width,
   capped so "Shop now" stays above the fold. The photo panels keep the photos' own
   616x1080 shape (so the trees are never cropped) and the red panel takes the rest of the
   width. Text sizes are the artwork's pixel sizes / 1080, times --h. Phones stack. */
.xmas-hero { --xh-red:#862a27; --xh-cream:#f8f5ee;
  --h:max(440px, min(calc(.72 * min(56.25vw, 1080px)), calc(100vh - 150px)));
  --photo:calc(var(--h) * 616 / 1080);
  display:grid; grid-template-columns:var(--photo) 1fr var(--photo); height:var(--h); background:var(--xh-red); }
.xh-photo { display:block; width:100%; height:100%; object-fit:cover; min-height:0; }
.xh-text { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 calc(var(--h) * .052); background:var(--xh-red); color:var(--xh-cream); }
.xh-brand { margin:0; font-size:calc(var(--h) * .0231); font-weight:500; letter-spacing:.3em; text-transform:uppercase; }
.xh-title { margin:calc(var(--h) * .128) 0 0; font-family:'EB Garamond', Georgia, serif; font-size:calc(var(--h) * .1185); font-weight:500; line-height:.98; letter-spacing:-.005em; }
.xh-title span { display:block; } /* one word per line, as in the artwork */
.xh-lede { margin:calc(var(--h) * .064) 0 0; font-family:'EB Garamond', Georgia, serif; font-style:italic; font-size:calc(var(--h) * .0352); }
.xh-btn { display:inline-block; margin-top:calc(var(--h) * .1); padding:calc(var(--h) * .0296) calc(var(--h) * .0556); background:var(--xh-cream); color:var(--xh-red); font-size:calc(var(--h) * .025); font-weight:700; letter-spacing:.2em; text-transform:uppercase; text-decoration:none; transition:background .2s ease; }
.xh-btn:hover { background:#fff; color:var(--xh-red); }
.xh-note { margin:calc(var(--h) * .039) 0 0; font-size:calc(var(--h) * .0185); font-weight:500; letter-spacing:.2em; text-transform:uppercase; }
@media (max-width:899px) {
  .xmas-hero { height:auto; grid-template-columns:1fr 1fr; grid-template-areas:"text text" "left right"; }
  .xh-text { grid-area:text; padding:34px 24px 32px; }
  .xh-left { grid-area:left; } .xh-right { grid-area:right; }
  .xh-photo { aspect-ratio:616 / 1080; height:auto; } /* the photos' own shape: no cropping */
  .xh-brand { font-size:11px; }
  .xh-title { margin-top:20px; font-size:clamp(44px, 13vw, 72px); }
  .xh-title span { display:inline; }
  .xh-lede { margin-top:14px; font-size:20px; }
  .xh-btn { margin-top:22px; padding:13px 26px; font-size:12px; }
  .xh-note { margin-top:14px; font-size:10px; }
}
.home-sec h2 { font-size:16px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); margin:38px 0 16px; }
@media (min-width:720px) { .home-sec h2 { font-size:20px; } }

/* product detail */
.crumbs { max-width:1100px; margin:0 auto; padding:16px 16px 0; font-size:12px; color:var(--grey); }
.crumbs a { color:var(--grey); text-decoration:none; }
.crumbs a:hover { color:var(--plum); }
.product { max-width:1100px; margin:0 auto; padding:16px 16px 64px; display:grid; gap:22px; }
.product .gallery img { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:16px; background:var(--mint-soft); }
.product .info h1 { margin:4px 0; font-weight:400; font-size:28px; }
.product .price-lg { color:var(--plum); font-size:20px; font-weight:500; margin:10px 0 4px; }
.sizes { display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 22px; }
.sizebtn { border:1px solid #d9d4cd; background:#fff; border-radius:999px; padding:10px 16px; font:500 13px Montserrat,sans-serif; color:var(--ink); cursor:pointer; }
.sizebtn.sel { border-color:var(--plum); background:var(--plum); color:#fff; }
.buy { width:100%; min-height:54px; border:0; border-radius:999px; background:var(--plum); color:#fff; font:500 15px Montserrat,sans-serif; cursor:pointer; transition:background .25s ease; }
.buy:hover { background:#7d0d1e; }
.buy.done { background:var(--mint-deep); color:var(--plum); }
.viewcart { display:inline-block; margin-top:14px; font-size:13px; }

@media (min-width:720px) {
  .search { display:block; }
  .brand { font-size:25px; }
  .page-head { padding:36px 24px 6px; }
  .grid { grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px; padding:20px 24px 80px; }
  .body { padding:16px 16px 18px; gap:5px; }
  .body h3 { font-size:15px; }
  .row { flex-direction:row; align-items:center; justify-content:space-between; }
  .add { min-height:36px; }
  .price { font-size:14px; }
  .catnav-inner { padding:0 24px; gap:6px; }
  .home-sec { padding:0 24px; }
  .product { grid-template-columns:1fr 1fr; gap:48px; align-items:start; padding:32px 24px 80px; }
  .crumbs { padding:20px 24px 0; }
}
@media (min-width:1100px) {
  .grid { grid-template-columns:repeat(4, minmax(0,1fr)); gap:28px; }
}
@media (hover:hover) {
  .card:hover { transform:translateY(-4px); box-shadow:0 2px 4px rgba(24,24,24,.04), 0 18px 40px rgba(24,24,24,.10); }
  .card:hover .photo img { transform:scale(1.04); }
}

/* Santa hat on the C of "Co" in the wordmark: a floppy hat (santa-hat.svg) whose
   fluffy brim sits across the top of the C, with the tail and pompom draping down its
   left side. Placed from Montserrat 400's real glyph box (canvas measureText): the C's
   top is 0.134em below the span top, it starts 0.052em in and is 0.624em wide. */
.santa-c { position:relative; display:inline-block; margin-left:.1em; } /* room for the pompom after the R */
.santa-c .hat {
  position:absolute; top:-0.29em; left:-0.33em;
  width:1.05em; height:1.092em;
  background:url("/santa-hat.svg") no-repeat center / contain;
  transform:rotate(-20deg); transform-origin:22% 60%; /* lift the right side so the top end of the C shows */
  pointer-events:none; z-index:3;
}


/* Size filter above the Christmas range */
.size-filter { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 6px; }
.chip { min-height:38px; padding:0 16px; border:1px solid var(--sand); border-radius:999px; background:#fff; color:var(--ink); font:500 12px Montserrat, sans-serif; letter-spacing:.08em; cursor:pointer; transition:background .2s ease, border-color .2s ease, color .2s ease; }
.chip:hover { border-color:#862a27; color:#862a27; }
.chip.sel, .chip.sel:hover { background:#862a27; border-color:#862a27; color:#fff; }
@media (max-width:719px) {
  .size-filter { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 -16px 6px; padding:0 16px 4px; }
  .size-filter::-webkit-scrollbar { display:none; }
  .chip { flex:0 0 auto; }
}

/* Add-to-cart present that flies into the sleigh; the sleigh hops when it lands */
.gift-fly { position:fixed; z-index:10001; width:28px; height:28px; pointer-events:none; will-change:transform, opacity; }
.cart.got .sleigh { animation:sleigh-hop .5s ease; }
@keyframes sleigh-hop { 0%, 100% { transform:none; } 35% { transform:translateY(-5px) rotate(-8deg); } 70% { transform:translateY(1px) rotate(3deg); } }

/* FAQ: the live Christmas trees page's questions, as tap-to-open bars */
.faq { padding-bottom:56px; }
.faq-item { border:1px solid var(--sand); border-radius:12px; background:#fff; margin-bottom:10px; overflow:hidden; }
.faq-item summary { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:56px; padding:14px 20px; font-size:15px; font-weight:500; color:var(--ink); cursor:pointer; list-style:none; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; flex:0 0 auto; display:grid; place-items:center; width:28px; height:28px; border-radius:999px; background:var(--mint-soft); color:#862a27; font-size:18px; font-weight:400; transition:transform .2s ease; }
.faq-item[open] summary::after { content:"\2212"; background:#862a27; color:#fff; }
.faq-item summary:hover { color:#862a27; }
.faq-a { padding:0 20px 18px; font-size:14px; line-height:1.65; color:#3d3d3d; }
.faq-a p { margin:0 0 10px; }
.faq-a ul { margin:0 0 10px; padding-left:20px; }
.faq-a li { margin:3px 0; }
.faq-a a { color:#862a27; }
@media (min-width:720px) { .faq-item { max-width:880px; } .faq-item summary { font-size:16px; padding:16px 24px; } .faq-a { padding:0 24px 20px; font-size:15px; } }