/** Shopify CDN: Minification failed

Line 1131:0 Unexpected "}"

**/
/* Santas Vault visual identity
   Ground: deep pine. Metal: brass. Paper: bone. Urgency: bottlebrush.
   No photography dependency. Type and material carry the design. */

:root{
  /* ONE PAGE WIDTH FOR THE WHOLE SITE.

     Tony, on a 3440 monitor: "looks bad the whole thing on a wide screen not
     sure if constraints need to be on or its 3440 view issue", and "page
     general layouts everything for desktop should be centred i believe looks
     better, opinion?"

     Asked for an opinion, so: yes, cap it, and it is not a 3440 issue - it is
     the absence of a cap, which only becomes visible at 3440. Two things were
     happening at once and they look like opposites:

       * the full-bleed bands held their content at 1080 px, which on a 3440
         screen is a narrow island with 1180 px of empty bone either side
       * the facts bar had no cap at all and stretched five columns across the
         whole monitor, so the eye has to travel a metre to read five lines

     1460 is the working figure. Past about 1500 a text column stops being a
     layout and becomes a stretched one: the measure runs past what is
     comfortable to read across and a five-across row turns into five distant
     columns. Full-bleed MEDIA still spans the whole screen, because a
     photograph gains from the width where a paragraph does not.

     `min()` with 94vw keeps it honest on everything below the cap. */
  --sv-max:min(1600px,94vw);
  --sv-wide:min(1180px,94vw);

  --sv-pine:#0E2B22;
  --sv-pine-lift:#14392D;
  --sv-brass:#C2A049;
  --sv-brass-dim:#735D25;
  --sv-bone:#F3EDE1;
  --sv-bone-deep:#E6DCC9;
  --sv-bottlebrush:#A8372A;
  --sv-eucalypt:#7C8F70;
  --sv-display:var(--font-heading--family,'Fraunces',Georgia,serif);
  --sv-body:var(--font-body--family,'Karla',Arial,sans-serif);
  --sv-rule:1px solid rgba(194,160,73,.38);
}

body{
  font-family:var(--sv-body);
  background:var(--sv-bone);
  color:var(--sv-pine);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.sv-display{
  font-family:var(--sv-display);
  font-variation-settings:'opsz' 90,'SOFT' 20;
  font-weight:600;
  letter-spacing:-.012em;
  color:var(--sv-pine);
}
h1{line-height:1.02}
h2{line-height:1.08}
p{max-width:68ch}

/* ---- Hero: the vault door ---- */
.sv-hero{
  background:var(--sv-pine);
  color:var(--sv-bone);
  padding:clamp(3.5rem,9vw,7.5rem) clamp(1.25rem,5vw,4rem);
  position:relative;
  overflow:hidden;
}
.sv-hero::after{
  content:"";position:absolute;inset:14px;
  border:var(--sv-rule);pointer-events:none;
}
.sv-hero__inner{max-width:var(--sv-max);margin:0 auto;position:relative;z-index:1}
.sv-hero .sv-hero__h,.sv-hero h1{
  color:var(--sv-bone);
  font-size:clamp(2.6rem,7vw,5.2rem);
  font-weight:600;
  margin:0 0 1.25rem;
  max-width:16ch;
}
.sv-hero h1 em{font-style:normal;color:var(--sv-brass)}
.sv-hero__lede{
  font-size:clamp(1.02rem,1.5vw,1.2rem);
  line-height:1.6;max-width:56ch;
  color:rgba(243,237,225,.82);margin:0 0 2.25rem;
}
.sv-rule{height:1px;background:linear-gradient(90deg,var(--sv-brass),rgba(194,160,73,0));margin:2rem 0;border:0}

/* ---- The one bold element: delivery certainty ---- */
.sv-cutoff{
  border:var(--sv-rule);
  background:rgba(243,237,225,.04);
  padding:1.5rem 1.6rem;
  display:grid;gap:1rem;
  grid-template-columns:1fr auto;align-items:center;
  max-width:620px;
}
.sv-cutoff__label{
  font-size:.82rem;line-height:1.45;color:var(--sv-brass);
  letter-spacing:.01em;margin:0;
}
.sv-cutoff__label strong{color:var(--sv-bone);font-weight:600;display:block;font-size:1rem;margin-bottom:.15rem}
.sv-cutoff__clock{
  font-family:var(--sv-display);
  font-variation-settings:'opsz' 144;
  font-size:clamp(1.9rem,4vw,2.9rem);
  color:var(--sv-bone);line-height:1;font-weight:400;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.sv-cutoff__clock span{color:var(--sv-brass);font-size:.42em;margin-left:.15em;font-family:var(--sv-body);font-weight:600}
@media(max-width:620px){.sv-cutoff{grid-template-columns:1fr}}

/* ---- Buttons ---- */
.sv-btn{
  display:inline-block;font-family:var(--sv-body);font-weight:600;
  font-size:.95rem;padding:.9rem 1.7rem;border-radius:2px;
  text-decoration:none;transition:background .18s ease,color .18s ease;
}
.sv-btn--brass{background:var(--sv-brass);color:var(--sv-pine);border:1px solid var(--sv-brass)}
.sv-btn--brass:hover{background:#D4B25F;color:var(--sv-pine)}
.sv-btn--ghost{background:transparent;color:var(--sv-bone);border:1px solid rgba(243,237,225,.45);margin-left:.65rem}
.sv-btn--ghost:hover{border-color:var(--sv-brass);color:var(--sv-brass)}
@media(max-width:520px){.sv-btn{display:block;text-align:center}.sv-btn--ghost{margin:.7rem 0 0}}

/* ---- Panels ---- */
.sv-band{padding:clamp(3rem,6vw,5rem) clamp(1.25rem,5vw,4rem)}
.sv-band--bone{background:var(--sv-bone)}
.sv-band--deep{background:var(--sv-bone-deep)}
.sv-band--pine{background:var(--sv-pine);color:var(--sv-bone)}
.sv-band--pine h2,.sv-band--pine h3{color:var(--sv-bone)}
.sv-band__inner{max-width:var(--sv-max);margin:0 auto}
.sv-band h2{font-size:clamp(1.8rem,3.4vw,2.7rem);margin:0 0 .85rem;max-width:20ch}
.sv-lede{font-size:1.05rem;line-height:1.65;max-width:62ch;margin:0 0 2.5rem;color:rgba(14,43,34,.78)}
.sv-band--pine .sv-lede{color:rgba(243,237,225,.78)}

.sv-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.sv-card{
  border:var(--sv-rule);background:rgba(255,255,255,.5);
  padding:1.6rem;border-radius:3px;text-decoration:none;color:inherit;display:block;
}
.sv-card:hover{border-color:var(--sv-brass)}
.sv-card h3{font-size:1.28rem;margin:0 0 .5rem}
.sv-card p{font-size:.95rem;line-height:1.6;margin:0;color:rgba(14,43,34,.74)}
.sv-band--pine .sv-card{background:rgba(243,237,225,.05)}
.sv-band--pine .sv-card p{color:rgba(243,237,225,.74)}

/* ---- Promise strip: facts, not badges ---- */
.sv-facts{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));border-top:var(--sv-rule);border-bottom:var(--sv-rule)}
.sv-facts div{padding:1.4rem 1.5rem;border-left:var(--sv-rule)}
.sv-facts div:first-child{border-left:0}
.sv-facts h3{font-size:1rem;margin:0 0 .3rem;font-family:var(--sv-body);font-weight:700}
.sv-facts p{font-size:.88rem;line-height:1.55;margin:0;color:rgba(14,43,34,.7)}
@media(max-width:640px){.sv-facts div{border-left:0;border-top:var(--sv-rule)}.sv-facts div:first-child{border-top:0}}

/* ---- Personalisation field on product pages ---- */
.sv-perso{border:var(--sv-rule);background:rgba(194,160,73,.07);padding:1.1rem 1.2rem;border-radius:3px;margin:1.25rem 0}
.sv-perso label{display:block;font-weight:700;font-size:.92rem;margin-bottom:.5rem}
.sv-perso input{
  width:100%;padding:.75rem .85rem;border:1px solid rgba(14,43,34,.28);border-radius:2px;
  font-family:var(--sv-display);font-size:1.15rem;background:#fff;color:var(--sv-pine);
}
.sv-perso input:focus{outline:2px solid var(--sv-brass);outline-offset:1px;border-color:var(--sv-brass)}
.sv-perso__hint{font-size:.8rem;color:rgba(14,43,34,.62);margin:.5rem 0 0}
.sv-perso__count{float:right;font-variant-numeric:tabular-nums}

/* ---- Accessibility floor ---- */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:2px solid var(--sv-brass);outline-offset:2px;
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


/* ===== Imagery layer ===== */
.sv-hero{
  background:
    linear-gradient(90deg, rgba(6,23,16,.94) 0%, rgba(6,23,16,.84) 34%, rgba(6,23,16,.42) 64%, rgba(6,23,16,.18) 100%),
    url('/cdn/shop/files/xhero.jpg') center right / cover no-repeat, var(--sv-pine);
  min-height:clamp(560px,74vh,820px);
  display:flex;align-items:center;
}
.sv-hero__inner{max-width:1180px;width:100%}
.sv-hero .sv-hero__h,.sv-hero h1{max-width:13ch;text-shadow:0 2px 24px rgba(6,23,16,.65)}
.sv-hero__lede{max-width:44ch;text-shadow:0 1px 16px rgba(6,23,16,.7)}
.sv-cutoff{backdrop-filter:blur(3px);background:rgba(6,23,16,.55)}
@media(max-width:900px){
  .sv-hero{background:
    linear-gradient(180deg, rgba(6,23,16,.55) 0%, rgba(6,23,16,.86) 55%, rgba(6,23,16,.96) 100%),
    url('/cdn/shop/files/xhero-mobile.jpg') center 20% / cover no-repeat, var(--sv-pine);
   min-height:0;padding-top:clamp(5rem,26vw,9rem)}
  .sv-hero .sv-hero__h,.sv-hero h1{max-width:100%}
}

/* Category cards become imagery */
.sv-tiles{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.sv-tile{
  position:relative;display:block;text-decoration:none;color:var(--sv-bone);
  aspect-ratio:3/2;border-radius:3px;overflow:hidden;border:var(--sv-rule);
  background-size:cover;background-position:center;
}
.sv-tile::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,23,16,0) 42%,rgba(6,23,16,.88) 100%)}
.sv-tile__cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.1rem 1.15rem}
.sv-tile__cap h3{color:var(--sv-bone);font-size:1.22rem;margin:0 0 .25rem;line-height:1.15}
.sv-tile__cap p{margin:0;font-size:.85rem;line-height:1.45;color:rgba(244,238,226,.8)}
.sv-tile:hover{border-color:var(--sv-brass)}
.sv-tile:hover .sv-tile__cap h3{color:var(--sv-brass)}

/* Pattern band */
.sv-band--pine{position:relative}
.sv-band--pine::before{content:"";position:absolute;inset:0;opacity:.10;pointer-events:none;
  background-image:radial-gradient(circle at 50% 50%, var(--sv-brass) 1.2px, transparent 1.3px);
  background-size:34px 34px}
.sv-band--pine > *{position:relative;z-index:1}



/* Cart recovery: free shipping progress and the honest cut-off */
.sv-cartbar{border:var(--sv-rule);background:rgba(194,160,73,.05);border-radius:3px;padding:1.15rem 1.2rem;margin:0 0 1.5rem}
.sv-ship__msg{margin:0 0 .6rem;font-size:.95rem;line-height:1.5}
.sv-ship__msg--won{color:var(--sv-pine)}
.sv-ship__track{height:6px;border-radius:3px;background:rgba(14,43,34,.12);overflow:hidden}
.sv-ship__track span{display:block;height:100%;background:linear-gradient(90deg,var(--sv-brass-dim),var(--sv-brass));transition:width .35s ease}
.sv-cartbar__note{margin:.85rem 0 0;font-size:.82rem;line-height:1.5;color:rgba(14,43,34,.7)}

/* Three step band */
.sv-steps{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:.5rem}
.sv-step img{width:100%;max-width:230px;height:auto;display:block;margin:0 0 1.1rem;border-radius:50%;border:1px solid rgba(194,160,73,.4)}
.sv-step h3{font-size:1.2rem;margin:0 0 .45rem}
.sv-step p{font-size:.94rem;line-height:1.6;margin:0;color:rgba(14,43,34,.76)}

/* ===== THE SURFING SANTA, UNCHOPPED ====================================
   Tony: "dont chop surfing santa fix him".

   Measured, not eyeballed. The photograph is 2.18:1 and Santa runs almost its
   full height - hat at 24 per cent, boots at the bottom edge - just right of
   centre. The band was full-bleed with background-size:cover and a min-height
   of 560, so on a 3440 screen it was a 6:1 letterbox and cover showed only
   227 of 642 rows: his torso, no head, no feet. And the copy panel sat on the
   RIGHT with the dark end of the gradient on the right, which is exactly
   where he is standing, so what little of him survived the crop was painted
   over.

   So:
     * the band takes the page width like everything else and the PHOTO'S OWN
       ASPECT RATIO, so nothing is cropped top or bottom at any desktop width
     * the copy moves LEFT, over the empty sky and sea, and the gradient goes
       dark on the left and clear by 60 per cent, before it reaches him
     * on a phone the photo becomes its own block above the copy, framed on
       him, instead of being replaced by a flat gradient as it was before -
       the old mobile rule used !important to swap the image out entirely */
/* width:100% is load-bearing. Measured at 3440 in a real browser, the band
   came out 789 px wide at x=1321: Horizon's custom-liquid wrapper is a flex
   container, so a child with only max-width and auto margins shrinks to its
   content instead of filling the cap. */
.sv-editorial{position:relative;display:flex;align-items:center;
  justify-content:flex-start;overflow:hidden;width:100%;box-sizing:border-box;
  max-width:var(--sv-max);margin:clamp(1.5rem,4vw,3rem) auto;
  aspect-ratio:2.18/1;border-radius:10px;background:#0B241C}
.sv-editorial__img{position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(6,23,16,.93) 0%,rgba(6,23,16,.72) 26%,
                    rgba(6,23,16,.18) 48%,rgba(6,23,16,0) 60%),
    url('/cdn/shop/files/editorial-aussie.jpg?width=2000')
      64% 50% / cover no-repeat}
.sv-editorial__inner{position:relative;z-index:1;max-width:min(520px,42%);
  padding:clamp(1.5rem,4vw,3.5rem);color:var(--sv-bone);text-align:left}
.sv-editorial h2{color:var(--sv-bone);font-size:clamp(1.6rem,2.6vw,2.4rem);
  margin:0 0 .9rem;text-shadow:0 2px 20px rgba(6,23,16,.6)}
.sv-editorial p{font-size:1rem;line-height:1.65;color:rgba(244,238,226,.9);
  margin:0 0 1.6rem;text-shadow:0 1px 14px rgba(6,23,16,.6)}
@media(max-width:900px){
  .sv-editorial{flex-direction:column;align-items:stretch;aspect-ratio:auto;
    border-radius:0;margin:0}
  /* Framed ON him: 72 per cent across is where he stands in the photo, and
     bottom keeps his boots, because that is the joke. */
  .sv-editorial__img{position:relative;inset:auto;aspect-ratio:4/3;
    background:url('/cdn/shop/files/editorial-aussie.jpg?width=1000')
      72% 100% / cover no-repeat}
  .sv-editorial__inner{max-width:100%;background:var(--sv-pine);
    padding:1.6rem 16px 2rem}
}

/* Collection hero, full bleed */
.sv-colhero--plain{background:linear-gradient(135deg,#103426 0%,var(--sv-pine) 55%,#071A13 100%)}
.sv-colhero{
  width:100vw;margin-left:calc(50% - 50vw);
  min-height:clamp(240px,30vw,420px);
  background-size:cover;background-position:center;
  display:flex;align-items:center;
  padding:clamp(2rem,5vw,4rem) clamp(1.25rem,5vw,4rem);
  margin-bottom:clamp(1.5rem,3vw,2.5rem);
}
.sv-colhero__in{max-width:var(--sv-max);margin:0 auto;width:100%}
.sv-colhero h1{color:var(--sv-bone);font-size:clamp(2rem,4.6vw,3.4rem);margin:0 0 .7rem;
  text-shadow:0 2px 20px rgba(6,23,16,.6)}
.sv-colhero__desc{color:rgba(244,238,226,.9);font-size:1.02rem;line-height:1.6;max-width:56ch;
  text-shadow:0 1px 14px rgba(6,23,16,.6)}
@media(max-width:820px){.sv-colhero--plain{background:linear-gradient(135deg,#103426 0%,var(--sv-pine) 55%,#071A13 100%)}
.sv-colhero{background-image:linear-gradient(180deg,rgba(6,23,16,.45),rgba(6,23,16,.92))!important}}

/* Search help */
.sv-searchhelp{max-width:var(--sv-max);margin:0 auto;padding:1rem 0 3rem}
.sv-searchhelp h2{font-size:1.15rem;margin:2rem 0 .85rem}
.sv-searchhelp__none{font-size:1.05rem;line-height:1.6;margin:0 0 .5rem;color:rgba(14,43,34,.82)}
.sv-chips{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;padding:0;margin:0}
.sv-chips a{display:inline-block;padding:.5rem .95rem;border:var(--sv-rule);border-radius:999px;
  text-decoration:none;color:var(--sv-pine);font-size:.9rem;background:rgba(194,160,73,.07)}
.sv-chips a:hover{border-color:var(--sv-brass);background:rgba(194,160,73,.16)}
.sv-chips--solid a{background:var(--sv-pine);color:var(--sv-bone);border-color:var(--sv-pine)}
.sv-chips--solid a:hover{background:var(--sv-pine-lift);color:var(--sv-brass)}
.sv-searchhelp__ask{margin:2rem 0 0;font-size:.95rem;line-height:1.6;color:rgba(14,43,34,.75)}

/* ===== sv-premium: Christmas furniture ===== */
.sv-band+.sv-band{position:relative}
.sv-band+.sv-band::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(1080px,88vw);height:1px;
  background:linear-gradient(90deg,transparent,var(--sv-brass) 18%,var(--sv-brass) 82%,transparent);opacity:.45}
.sv-card{transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.sv-card:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(11,33,25,.10)}
.sv-hero__lede{max-width:46ch}
.sv-colhero{min-height:clamp(260px,32vw,440px)}
.sv-colhero h1{letter-spacing:-.015em}
/* gold rule under every section heading */
.sv-band__inner>h2{position:relative;padding-bottom:.7rem}
.sv-band__inner>h2::after{content:"";position:absolute;left:0;bottom:0;width:72px;height:2px;
  background:linear-gradient(90deg,var(--sv-brass),rgba(194,160,73,0))}
/* product cards on collection pages */
.product-card,.card{border-radius:4px}

/* Design chooser */
.sv-perso__step{display:flex;align-items:center;gap:.6rem;font-weight:700;font-size:1rem;margin:0 0 .85rem}
.sv-perso__step--2{margin-top:1.4rem}
.sv-perso__step span{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:50%;background:var(--sv-pine);color:var(--sv-bone);font-size:.85rem;flex:0 0 26px}
.sv-dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:.6rem}
.sv-dsw{position:relative;cursor:pointer;display:block}
.sv-dsw input{position:absolute;opacity:0;width:0;height:0}
.sv-dsw img{width:100%;height:auto;display:block;border:2px solid rgba(14,43,34,.14);border-radius:4px;background:#fff}
.sv-dsw span{display:block;text-align:center;font-size:.72rem;margin-top:.3rem;color:rgba(14,43,34,.7);line-height:1.2}
.sv-dsw:hover img{border-color:var(--sv-brass)}
.sv-dsw input:checked+img{border-color:var(--sv-pine);box-shadow:0 0 0 2px var(--sv-brass)}
.sv-dsw input:checked~span{color:var(--sv-pine);font-weight:700}
.sv-dsw input:focus-visible+img{outline:2px solid var(--sv-brass);outline-offset:2px}
.sv-perso__lab{display:block;font-weight:700;font-size:.92rem;margin:0 0 .5rem}

.sv-select{width:100%;padding:.8rem .9rem;border:1px solid rgba(14,43,34,.28);border-radius:2px;
  background:#fff;font-family:var(--sv-body);font-size:1rem;color:var(--sv-pine);margin:0 0 1rem}
.sv-select:focus{outline:2px solid var(--sv-brass);outline-offset:1px}
.sv-perso__hint--tight{margin:-.45rem 0 .7rem}
.sv-dgrid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}

/* Live design preview */
.sv-preview{margin:1.4rem 0 0;border:var(--sv-rule);border-radius:4px;background:#fff;padding:1rem}
.sv-preview__cap{margin:0 0 .7rem;font-weight:700;font-size:.9rem;color:var(--sv-pine)}
.sv-preview__box{width:100%;max-width:340px;margin:0 auto;aspect-ratio:1/1;
  background:repeating-conic-gradient(#f4f1ea 0% 25%,#fff 0% 50%) 50%/22px 22px;
  border:1px solid rgba(14,43,34,.12);border-radius:3px;display:flex;align-items:center;justify-content:center}
.sv-preview__box svg{width:100%;height:100%;display:block}
.sv-preview__note{margin:.7rem 0 0;font-size:.8rem;line-height:1.5;color:rgba(14,43,34,.65);text-align:center}

/* Multi item personalisation */
.sv-qty{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.2rem}
.sv-qty__b{min-width:52px;padding:.62rem .5rem;border:1px solid rgba(14,43,34,.28);border-radius:3px;
  background:#fff;font-family:var(--sv-body);font-size:1rem;font-weight:700;color:var(--sv-pine);cursor:pointer}
.sv-qty__b:hover{border-color:var(--sv-brass)}
.sv-qty__b.is-on{background:var(--sv-pine);color:var(--sv-bone);border-color:var(--sv-pine)}
.sv-item{border:var(--sv-rule);border-radius:4px;padding:1rem;margin:0 0 1rem;background:rgba(255,255,255,.55)}
.sv-item__head{display:flex;align-items:center;justify-content:space-between;margin:0 0 .8rem}
.sv-item__n{font-weight:700;font-size:.95rem;color:var(--sv-pine)}
.sv-item__copy{border:1px solid rgba(14,43,34,.22);background:#fff;border-radius:999px;
  padding:.32rem .8rem;font-size:.78rem;cursor:pointer;color:var(--sv-pine)}
.sv-item__copy:hover{border-color:var(--sv-brass);background:rgba(194,160,73,.10)}
.sv-item .sv-preview{margin-top:1rem}
.sv-item .sv-preview__box{max-width:230px}
.sv-item .sv-dgrid{grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:.45rem}
.sv-item .sv-dsw span{font-size:.64rem}

/* ===== santas vault overrides, appended by theme/build_css.py ===== */

/* ---- the home page hero lede ------------------------------------------
   It carries BOTH .sv-lede and .sv-hero__lede. .sv-hero__lede sets the light
   bone colour, .sv-lede sets the dark pine ink, they have identical
   specificity, and .sv-lede is declared later in the base file - so the dark
   rule won and the paragraph rendered #0E2B22 on a #0E2B22 hero. Measured
   contrast ratio 1.00, on desktop AND on mobile where the hero image is
   darker still. Raising the specificity rather than reordering, because
   reordering only holds until the next edit to the base. */
.sv-hero .sv-lede,
.sv-hero .sv-hero__lede{color:rgba(243,237,225,.92) !important}
.sv-hero .sv-lede a,.sv-hero .sv-hero__lede a{color:var(--sv-brass)}


/* ---- personalisation: fields added by sv-multi.js ---------------------- */
.sv-optwrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.5rem .75rem;margin:.5rem 0 .75rem}
.sv-namewrap{margin:.25rem 0 .5rem}
.sv-name,.sv-surname{width:100%;padding:.7rem .85rem;border:1px solid rgba(14,43,34,.28);border-radius:.4rem;
  font:inherit;font-size:1rem;background:#fff;color:#0E2B22}
.sv-name:focus,.sv-surname:focus{outline:2px solid #C2A049;outline-offset:1px;border-color:#C2A049}
.sv-err{margin:.4rem 0 0;font-size:.85rem;color:#9B2C1F;font-weight:600}
.sv-echo{margin:.35rem 0 .1rem;min-height:1.6rem}
.sv-echo__t{display:inline-block;font-family:var(--sv-display,inherit);font-size:1.35rem;letter-spacing:.06em;
  color:#0E2B22;text-transform:uppercase;line-height:1.2;word-break:break-word}
.sv-item{border:1px solid rgba(14,43,34,.14);border-radius:.55rem;padding:.85rem .9rem;margin:0 0 .7rem;background:rgba(255,255,255,.55)}
.sv-item:only-child{border:0;padding:0;background:none}
.sv-qty__b[aria-busy="true"]{opacity:.6}
.sv-opt-note{font-weight:400;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(14,43,34,.55);margin-left:.35rem}
.sv-echo__t:empty::after{content:'artwork only, no name';opacity:.5}

/* ---- live print preview -------------------------------------------------
   The stage mirrors how tools/personalise.py composes the print master: for a
   'hero' design the name sets UNDER the art, for an 'above' design it sets over
   it. Same ink, same face, same air. */
.sv-preview2{margin:.6rem 0 .2rem}
.sv-preview2__stage{position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.25rem;background:#F7F5F0;border:1px solid rgba(14,43,34,.12);
  border-radius:.5rem;padding:.7rem .6rem;min-height:190px;overflow:hidden}
.sv-preview2__stage[data-slot="above"]{flex-direction:column-reverse}
.sv-preview2__art{display:block;max-width:100%;max-height:150px;width:auto;height:auto;object-fit:contain}
.sv-preview2__name{max-width:100%;line-height:1;white-space:nowrap;text-align:center;
  letter-spacing:.01em;
  /* the white keyline and charcoal outer stroke the renderer draws */
  -webkit-text-stroke:.5px rgba(255,255,255,.9);
  text-shadow:0 0 2px #fff, 0 0 2px #fff, 0 1px 0 rgba(14,22,28,.55)}
.sv-preview2__stage.is-empty .sv-preview2__name{display:none}
.sv-preview2__stage.is-empty::after{content:'No name — the artwork on its own';
  position:absolute;bottom:.45rem;font-size:.74rem;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(14,43,34,.72)}
.sv-preview2__cap{margin:.35rem 0 0;font-size:.74rem;letter-spacing:.07em;
  text-transform:uppercase;color:rgba(14,43,34,.72);text-align:center}
/* Name-only preview: used while a product's artwork still carries the sample
   name. Showing the sample name AND the shopper's name at once is worse than
   showing the name alone, so the picture is left out until the art is clean. */
.sv-preview2--nameonly .sv-preview2__stage{min-height:92px;background:#FFF}

/* ---- the bandana preview ------------------------------------------------
   The stage is the PHOTOGRAPH of the variant the shopper picked. Printify's
   photographs carry the printed "YOUR NAME", so __patch is a window onto the
   blank of the same colour and style at exactly that place, which erases it
   with the fabric's own shading, and __name is drawn in its stead. Every box
   is a percentage of the photograph, so it holds at any width. */
.sv-preview2__stage--band{padding:0;background:#FFF;border:0;min-height:0;display:block}
.sv-bpv{position:relative;display:block;width:100%;aspect-ratio:1/1;overflow:hidden;
  border:1px solid rgba(14,43,34,.12);border-radius:.5rem;background:#FFF}
.sv-bpv__shot{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.sv-bpv__patch{position:absolute;background-repeat:no-repeat;pointer-events:none}
.sv-bpv__name{position:absolute;display:flex;align-items:center;justify-content:center;
  line-height:1;white-space:nowrap;text-align:center;pointer-events:none;
  /* The press lays a charcoal edge, then a white keyline, then the ink, so the
     ring has to sit BEHIND the glyph. -webkit-text-stroke draws over it and ate
     the letterforms at preview sizes, which is the same white-blob failure the
     print renderer paid for once already. A ring of shadows always draws behind. */
  --sv-ring:2px;
  text-shadow:
    calc(var(--sv-ring) * -1) calc(var(--sv-ring) * -1) 0 #fff,
    var(--sv-ring) calc(var(--sv-ring) * -1) 0 #fff,
    calc(var(--sv-ring) * -1) var(--sv-ring) 0 #fff,
    var(--sv-ring) var(--sv-ring) 0 #fff,
    0 calc(var(--sv-ring) * -1) 0 #fff, 0 var(--sv-ring) 0 #fff,
    calc(var(--sv-ring) * -1) 0 0 #fff, var(--sv-ring) 0 0 #fff,
    0 0 calc(var(--sv-ring) * 2.5) rgba(20,22,26,.5)}
.sv-bpv.is-empty .sv-bpv__name{display:none}
.sv-bpv.is-empty::after{content:'No name — the artwork on its own';
  position:absolute;left:0;right:0;bottom:.5rem;text-align:center;font-size:.72rem;
  letter-spacing:.06em;text-transform:uppercase;color:rgba(14,43,34,.72)}


/* ---- WCAG 2.2 AA corrections -------------------------------------------
   Measured failures, all on the personalised product page, all on text the
   shopper needs before they commit to a non-returnable item:
     .sv-perso__hint        4.11:1  and it carries the returns disclaimer
     .sv-cutoff__label      3.58:1  the Christmas cut-off message
     .sv-cutoff__clock      2.02:1  the countdown itself
   AA needs 4.5:1 for body text. Darkened to clear it rather than restyled. */
.sv-perso__hint{color:rgba(14,43,34,.82)}
.sv-cutoff__label{color:#6E5A22 !important}
.sv-cutoff__clock{color:#0E2B22 !important}

/* A focus ring drawn in the same colour as what sits behind it is not a focus
   ring. The newsletter field and the footer policy links both had one. */
.sv-perso :focus-visible,
.sv-item :focus-visible,
.sv-qty__b:focus-visible,
.sv-name:focus-visible,
.sv-select:focus-visible{outline:3px solid #C2A049;outline-offset:2px;border-radius:.25rem}

/* WCAG 2.2 SC 2.5.8 Target Size (Minimum): 24x24 CSS pixels. */
.sv-qty__b{min-width:44px;min-height:44px}
.sv-item__copy{min-height:32px;padding:.35rem .6rem}

/* SC 2.4.11 Focus Not Obscured. A sticky header at the top and a fixed
   add-to-cart bar at the bottom, and nothing kept a focused element clear of
   either, so tabbing down a long product page put the focused control
   underneath the sticky bar. */
html{scroll-padding-top:6rem;scroll-padding-bottom:7rem}

/* ---- home page rebuild -------------------------------------------------
   The hero now leads with the product the store is named after, the shop
   shelves are real product imagery at real counts rather than text cards, and
   the "how it works" strip is the actual buying journey including the preview
   step, which is the thing no competitor shows. */
.sv-kicker{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sv-brass);margin:0 0 1rem;font-weight:700}
.sv-hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin:0 0 2rem}
.sv-hero__cta .sv-btn--ghost{margin-left:0}
@media(max-width:520px){
  .sv-hero__cta{display:block}
  .sv-hero__cta .sv-btn{display:block;width:100%;text-align:center}
  .sv-hero__cta .sv-btn--ghost{margin:.7rem 0 0}
}

/* Tiles: the caption sits on a gradient, so the text needs to clear it at any
   image brightness. */
.sv-tiles{gap:1rem}
.sv-tile{aspect-ratio:4/5;background-color:var(--sv-bone-deep)}
.sv-tile:after{background:linear-gradient(180deg,rgba(6,23,16,.05) 30%,rgba(6,23,16,.88) 82%)}
.sv-tile__cap h3{font-size:1.15rem;margin:0 0 .3rem}
.sv-tile__cap p{color:rgba(244,238,226,.92);font-size:.83rem}
.sv-tile__n{display:block;margin-top:.5rem;font-size:.74rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--sv-brass);font-weight:700}
@media(max-width:620px){.sv-tiles{grid-template-columns:repeat(2,1fr)}
  .sv-tile{aspect-ratio:3/4}.sv-tile__cap{padding:.8rem .8rem}
  .sv-tile__cap h3{font-size:1rem}.sv-tile__cap p{display:none}}

/* Numbered steps. The old strip used circular images that no longer exist. */
.sv-steps--num{gap:1.6rem}
.sv-steps--num .sv-step{position:relative;padding-left:3.2rem}
.sv-step__n{position:absolute;left:0;top:0;width:2.4rem;height:2.4rem;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--sv-pine);color:var(--sv-bone);font-weight:700;font-size:1rem;
  font-family:var(--sv-body)}

/* ===== collection page: lead above the grid, explainer below it ===== */
.sv-clead{max-width:62ch;font-size:1.0625rem;line-height:1.6}
.sv-clead__price{display:inline-block;margin-top:.5rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;font-size:.8125rem;opacity:.8}

.sv-chelp-wrap{max-width:72rem;margin:0 auto;padding:3rem 1rem 4rem;
  border-top:1px solid rgba(14,43,34,.12)}
.sv-chelp__title{font-size:clamp(1.35rem,4vw,1.9rem);line-height:1.2;margin:0 0 1.5rem}
.sv-chelp__h{font-size:1.05rem;text-transform:uppercase;letter-spacing:.08em;
  margin:2rem 0 .85rem;color:#0E2B22}
.sv-chelp__h:first-of-type{margin-top:0}
.sv-chelp__do{list-style:none;padding:0;margin:0;display:grid;gap:.75rem}
.sv-chelp__do li{padding:.9rem 1rem;border:1px solid rgba(14,43,34,.14);
  border-radius:.65rem;line-height:1.55;background:rgba(255,255,255,.55)}
.sv-chelp__do strong{color:#0E2B22}
.sv-chelp__price{display:inline-block;margin-left:.35rem;font-weight:700;
  color:#735D25;white-space:nowrap}
.sv-chelp__steps{list-style:none;padding:0;margin:0;display:grid;gap:1rem;
  grid-template-columns:1fr}
.sv-chelp__steps li{position:relative;padding-left:3rem}
.sv-chelp__steps strong{display:block;color:#0E2B22;font-size:1.05rem}
.sv-chelp__steps p{margin:.2rem 0 0;line-height:1.55}
.sv-chelp__n{position:absolute;left:0;top:0;width:2.15rem;height:2.15rem;
  display:grid;place-items:center;border-radius:50%;background:#0E2B22;color:#F3EDE1;
  font-weight:700;font-size:.95rem}
.sv-chelp__facts{display:grid;gap:1rem;grid-template-columns:1fr;margin:2rem 0 0}
.sv-chelp__facts>div{padding:1rem 1.1rem;border-radius:.65rem;
  background:rgba(194,160,73,.09);border:1px solid rgba(194,160,73,.35)}
.sv-chelp__facts h3{margin:0 0 .35rem;font-size:.8125rem;letter-spacing:.08em;
  text-transform:uppercase;color:#735D25}
.sv-chelp__facts p{margin:0;line-height:1.55}
.sv-chelp__next{display:flex;flex-wrap:wrap;gap:.6rem;margin:0}
.sv-chelp__next a{display:inline-block;padding:.6rem 1rem;border-radius:2rem;
  border:1px solid rgba(14,43,34,.25);text-decoration:none;color:#0E2B22;
  min-height:44px;display:inline-flex;align-items:center}
.sv-chelp__next a:hover{background:#0E2B22;color:#F3EDE1}
.sv-chelp__cta{margin:2rem 0 0}
@media(min-width:750px){
  .sv-chelp__do{grid-template-columns:1fr 1fr}
  .sv-chelp__steps{grid-template-columns:repeat(4,1fr)}
  .sv-chelp__steps li{padding-left:0;padding-top:3rem}
  .sv-chelp__n{top:0;left:0}
  .sv-chelp__facts{grid-template-columns:repeat(3,1fr)}
  .sv-chelp-wrap{padding:4rem 2rem 5rem}
}
/* The stock .sv-btn--ghost is bone-on-dark, built for the hero. On the white
   collection explainer it was invisible. This is its light-background twin. */
.sv-chelp__ghost{background:transparent;color:#0E2B22;
  border:1px solid rgba(14,43,34,.45);margin-left:.65rem}
.sv-chelp__ghost:hover{border-color:#735D25;color:#735D25}
@media(max-width:520px){.sv-chelp__cta .sv-btn{display:block;text-align:center}
  .sv-chelp__ghost{margin:.7rem 0 0}}
.sv-colhero__meta{margin:.85rem 0 0;font-size:.875rem;letter-spacing:.04em;
  text-transform:uppercase;opacity:.85}
.sv-colhero__jump{margin-left:.9rem;color:inherit;text-decoration:underline;
  text-underline-offset:3px;display:inline-block;min-height:44px;line-height:44px}
.sv-colhero__desc .sv-clead{margin:0}

/* ===== the cut-off block reads on BOTH backgrounds =====
   The WCAG pass forced .sv-cutoff__label and .sv-cutoff__clock to dark ink so
   they would pass on the light product page. The same block also sits inside
   the dark hero and the pine band on the home page, where dark ink on dark
   pine measured about 1.3:1 - the countdown, which is the single most
   conversion-relevant element on the page, was invisible. Dark contexts get
   their own colours rather than the global override. */
.sv-hero .sv-cutoff__label,
.sv-band--pine .sv-cutoff__label,
.sv-editorial .sv-cutoff__label{color:#E3CE8F !important}
.sv-hero .sv-cutoff__label strong,
.sv-band--pine .sv-cutoff__label strong,
.sv-editorial .sv-cutoff__label strong{color:#FFFFFF !important}
.sv-hero .sv-cutoff__clock,
.sv-band--pine .sv-cutoff__clock,
.sv-editorial .sv-cutoff__clock{color:#F3EDE1 !important}
.sv-hero .sv-cutoff__clock span,
.sv-band--pine .sv-cutoff__clock span,
.sv-editorial .sv-cutoff__clock span{color:#E3CE8F !important}

/* Tile captions sit over whatever the product photo happens to be: a kraft
   box and a white mug both washed the caption out. The scrim now reaches
   near-solid before the text starts. */
.sv-tile::after{background:linear-gradient(180deg,rgba(6,23,16,0) 20%,
  rgba(6,23,16,.55) 50%,rgba(6,23,16,.94) 76%) !important}

/* ===== the same design on the rest of the range ===== */
.sv-sibs{border-top:1px solid rgba(14,43,34,.12);background:#F3EDE1}
.sv-sibs__in{max-width:72rem;margin:0 auto;padding:2.5rem 1rem 3rem}
.sv-sibs__h{font-size:clamp(1.2rem,4vw,1.7rem);margin:0 0 .4rem;line-height:1.2}
.sv-sibs__lede{margin:0 0 1.4rem;max-width:56ch;line-height:1.55;color:rgba(14,43,34,.82)}
.sv-sibs__grid{list-style:none;margin:0;padding:0;display:grid;gap:1rem;
  grid-template-columns:repeat(2,1fr)}
.sv-sibs__item a{display:block;text-decoration:none;color:#0E2B22;
  border:1px solid rgba(14,43,34,.14);border-radius:.6rem;overflow:hidden;background:#fff}
.sv-sibs__item a:hover{border-color:#735D25}
.sv-sibs__item img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;
  background:#F7F5F0}
.sv-sibs__t{display:block;padding:.65rem .7rem .1rem;font-size:.9rem;line-height:1.3}
.sv-sibs__p{display:block;padding:0 .7rem .7rem;font-weight:700;color:#735D25;font-size:.9rem}
@media(min-width:750px){
  .sv-sibs__grid{grid-template-columns:repeat(4,1fr)}
  .sv-sibs__in{padding:3rem 2rem 3.5rem}
}
/* The caption band covers the bottom quarter of a tile, which is exactly where
   the personalised name sits in a product photo: every tile read "Personalised
   Santa sacks" printed over the top of "YOUR NAME". Cropping upward only moved
   the collision. The product photo is square and the tile is 3:4, so the fix
   is to stop cropping: the photo is contained in the top of the tile and the
   caption gets a band of its own underneath it. Nothing overlaps. */
.sv-tile{background-size:74% auto !important;background-repeat:no-repeat !important;
  background-position:center 6% !important;background-color:#F7F5F0 !important}
.sv-tile::after{background:linear-gradient(180deg,rgba(6,23,16,0) 52%,
  rgba(6,23,16,.75) 66%,rgba(6,23,16,.96) 74%) !important}
/* One square photo plus two lines of caption does not fit a 3:4 tile without
   the artwork's own "YOUR NAME" landing under the heading. A taller tile on
   mobile gives the caption a band of its own. */
/* ...and the same is true at every width, not just on a phone: the three
   column tablet grid put the heading straight back over the artwork. One
   ratio, one image size, everywhere. */
.sv-tile{aspect-ratio:2/3 !important}

/* ===== bulky item badge ===== */
.sv-bulky{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:1rem 0;
  padding:.85rem 1rem;border-radius:.6rem;line-height:1.5;font-size:.9rem;
  background:rgba(194,160,73,.12);border:1px solid rgba(194,160,73,.5);color:#0E2B22}
.sv-bulky__tag{display:inline-block;padding:.2rem .6rem;border-radius:2rem;
  background:#735D25;color:#F3EDE1;font-size:.72rem;letter-spacing:.09em;
  text-transform:uppercase;font-weight:700;white-space:nowrap}
.sv-bulky-note{margin:0 0 1rem;padding:.85rem 1rem;border-radius:.6rem;line-height:1.55;
  background:rgba(194,160,73,.10);border:1px solid rgba(194,160,73,.45)}

/* ===== the collection hero meta line reads on the dark hero =====
   h1 and .sv-colhero__desc both set an explicit light colour. The meta line
   under them - "212 PRODUCTS  HOW THIS WORKS" - set none, so it inherited the
   theme's dark body ink and then had opacity .85 applied on top of a near
   black hero. Measured about 1.3:1 against the darkest part of the image,
   which is invisible, and it carries the only in-page link to the explainer. */
.sv-colhero__meta{color:rgba(244,238,226,.92);opacity:1}
.sv-colhero__jump{color:#F4EEE2;text-decoration-color:rgba(244,238,226,.7)}
.sv-colhero__jump:hover,.sv-colhero__jump:focus-visible{color:#fff;text-decoration-color:#fff}
.sv-colhero--plain .sv-colhero__meta{color:rgba(244,238,226,.92)}

/* ===== the ornament preview is a DISC, not a stack =====
   The flat stage lays the artwork out and drops the name underneath it. On the
   ornament the press puts both INSIDE a 41 mm circular insert, and the caption
   under this preview tells the shopper it is what gets printed - so a preview
   showing the name outside the circle is a small false promise on the one
   product whose whole job is to carry a name.

   The second product image for an ornament is already drawn as the insert: a
   white disc with the artwork in its upper half and the lower half left clear.
   The name is positioned into that clear half BY THE SAME ARITHMETIC the
   renderer uses, rather than by eye:
     name band centre  = 0.54 x safe radius below the disc centre
     safe radius       = 0.80 x half the print square   (tools/personalise.py)
     disc in the image = 0.91 of it, the rest is padding
     => 0.54 x 0.80 x 0.5 x 0.91 = 0.197 of the image height below centre
   which is 69.7% from the top. A square stage with the art absolutely filling
   it is what makes that percentage mean the same thing at every width. */
.sv-preview2__stage[data-area="ornament"]{
  display:block;position:relative;aspect-ratio:1/1;width:100%;max-width:280px;
  margin:0 auto;padding:0;min-height:0;overflow:hidden}
.sv-preview2__stage[data-area="ornament"] .sv-preview2__art{
  position:absolute;inset:0;width:100%;height:100%;max-height:none;
  object-fit:contain}
.sv-preview2__stage[data-area="ornament"] .sv-preview2__name{
  position:absolute;left:50%;top:69.7%;transform:translate(-50%,-50%);
  max-width:70%}
.sv-preview2__stage[data-area="ornament"].is-empty::after{bottom:.3rem}

/* ==========================================================================
   THE HERO, AND WHY MOBILE WAS "WEIRD"
   The hero already had a photograph behind it. On a phone you could not see it:
   the mobile scrim ran from 55% black at the top to 96% at the bottom, so the
   picture was flattened into a dark green slab and the page opened with a wall
   of text. The fix is not a lighter scrim over the same layout, because then
   the headline sits on a busy image and fails contrast. On a phone the hero
   becomes two things stacked: a PICTURE, at a portrait crop made for a phone,
   and the words underneath it on solid colour. Both are then legible and the
   shopper sees the product world in the first screen.
   ========================================================================== */
:root{
  --sv-hero-d:url('https://santasvault.com.au/cdn/shop/files/santas-vault-santa-and-mrs-claus-christmas-vault-desktop.jpg?width=2000');
  --sv-hero-m:url('https://santasvault.com.au/cdn/shop/files/santas-vault-santa-and-mrs-claus-christmas-vault-mobile.jpg?width=1100');
  --sv-bg-alpine:url('/cdn/shop/files/santas-vault-alpine-christmas-vault-door-bg.jpg');
  --sv-bg-gold:url('/cdn/shop/files/santas-vault-santa-and-mrs-claus-christmas-vault-bg.jpg');
  --sv-bg-elves:url('/cdn/shop/files/santas-vault-santa-and-the-elves-bg.jpg');
}
/* THE WHOLE PAINTING, ON EVERY SCREEN.
   Tony: "it should be a fixed image on any monitor size or device".

   `cover` cannot do that and no amount of repositioning makes it. The artwork
   is roughly 12:5; a hero band on a 2560 px monitor is about 3.7:1, so cover
   scales the picture by WIDTH and throws away 374 px of its height, which is
   why the vault door was cut top and bottom and the children were cut off at
   the knees. Every previous attempt at this moved the crop rather than removing
   it.

   `contain` removes it. The image is scaled to fit the band's height, pinned to
   the right, and the pine ground carries the left, where the headline already
   sits. So the painting is complete at 1280, at 1920 and at 2560, the copy
   never sits on a face, and the only thing that changes with screen width is
   how much pine there is beside it. That is what a fixed image means. */
.sv-hero{
  background:
    linear-gradient(90deg, var(--sv-pine) 0%, var(--sv-pine) 26%,
                    rgba(6,23,16,.72) 44%, rgba(6,23,16,.10) 62%, rgba(6,23,16,0) 74%),
    var(--sv-hero-d) right center / auto 100% no-repeat, var(--sv-pine);
  min-height:clamp(480px,58vh,660px);
}

/* `auto 100%`, NOT `contain`. Contain fits the image to whichever axis runs out
   first, and below about 1700 px that is the WIDTH, so the painting shrank to
   533 px inside a 645 px band and sat in a letterbox with pine above and below
   it. Fitting to the HEIGHT fills the band, keeps the whole picture top to
   bottom at every width, and where the image is then wider than the space it
   loses its LEFT edge, which is the dark part of the vault door and is under
   the headline anyway. Nothing anyone looks at is ever cropped. */
@media(min-width:1600px){
  /* past about 1600 the painting has all the room it needs and the copy column
     should stop growing with the monitor, or the lede runs to 90 characters */
  .sv-hero__inner{max-width:1400px}
  .sv-hero__lede{max-width:40ch}
}
/* THE HERO WAS EATING THE WHOLE SCREEN, and min-height was not the reason.
   Measured on a 1920 x 900 desktop: the band came out 906 px, because the base
   rule pads it `clamp(3.5rem,9vw,7.5rem)` top and bottom, which is 240 px of
   padding around content that is already 660 px tall. min-height never binds,
   so changing it did nothing.

   Tony asked for "what are you after" to sit straight under the hero "so they
   can go buy", and it did, one pixel below the fold. Trimming the block padding
   on desktop brings the next shelf into the first screen, which is the whole
   point of putting it there. */
@media(min-width:901px){
  .sv-hero{padding-block:clamp(2rem,3.4vw,3.25rem)}
  .sv-hero .sv-hero__h,.sv-hero h1{font-size:clamp(2.4rem,4.2vw,4rem);margin-bottom:.6rem}
  .sv-hero__lede{margin-bottom:1.4rem}
  .sv-hero__cta{margin-bottom:1.4rem}
}

@media(max-width:900px){
  /* picture on top, words underneath. The ::after rule inherited from the base
     draws an inset hairline border; it has to sit over both halves, not just
     the text, or it cuts the photograph in two. */
  .sv-hero{
    background:var(--sv-pine);
    min-height:0;
    padding:0 0 clamp(1.75rem,7vw,2.5rem);
    display:block;
  }
  .sv-hero::before{
    content:"";display:block;width:100%;
    /* 44vh, not 52. At 52 the picture pushed "Shop Santa sacks" off the first
       screen, and the whole point of moving the shelves up was so somebody can
       buy without scrolling. */
    aspect-ratio:4/5;max-height:46vh;
    /* TOP, not 22%. The band is capped at 44vh, so on anything wider than a
       phone the box is LANDSCAPE and a 4:5 portrait image inside it at `cover`
       is cropped hard top and bottom. At 22% that crop took the top off Santa's
       hat and Mrs Claus's head on an iPad. Anchoring at the top cannot cut a
       head, because the crop for this banner is taken from just under the
       wordmark and the faces are in the upper third. */
    background:var(--sv-hero-m) center top / cover no-repeat;
  }
  .sv-hero::after{inset:8px}
  .sv-hero__inner{
    padding:clamp(1.5rem,6vw,2rem) clamp(1.25rem,5vw,1.75rem) 0;
    margin-top:-2.25rem;position:relative;
    background:linear-gradient(180deg, rgba(6,23,16,0) 0%, var(--sv-pine) 2.25rem);
  }
  .sv-hero .sv-hero__h,.sv-hero h1{
    max-width:100%;font-size:clamp(1.9rem,7.6vw,2.5rem);margin-bottom:.9rem;
    text-shadow:none;
  }
  .sv-hero__lede{max-width:100%;text-shadow:none;margin-bottom:1.4rem}
  .sv-kicker{margin-top:0}
}

/* ZOOM OUT RATHER THAN CROP. Tony: "need to reposition header image so it
   dosent cut heads", then "zoom out image so all heads are seen".

   The band was a 4:5 portrait crop inside a box capped at 44vh. On anything
   wider than a phone that box is LANDSCAPE, so `cover` threw away 40% of the
   picture's own height and the crop took the top off Santa's hat and Mrs
   Claus's head. Moving the focal point only chooses WHICH heads get cut.

   The fix is to stop cropping. Above 600 px the band takes the WIDE artwork and
   the band's own aspect ratio is set to the artwork's, 2400x1000, so `cover`
   has nothing left to cut and every face is in frame. Below 600 px the portrait
   crop is right for the shape of the screen, and it is anchored at the TOP,
   where the faces are, so it cannot cut a head either. */
@media(min-width:600px) and (max-width:1219px){
  .sv-hero::before{
    aspect-ratio:12/5;max-height:none;
    background-image:var(--sv-hero-d);
    background-position:center center;
    background-size:cover;
  }
}

/* ===== the supplied imagery as a background, not as a picture with words on it
   Tony's instruction was to use it "across the site as background only".

   THE FIRST ATTEMPT FAILED THE THING IT WAS FOR. A scrim at 93-97% over the
   alpine banner still let enough snow through to lift the band into the
   mid-tones, and the cream body copy on top measured about 2:1. A background
   that makes the words harder to read is not decoration, it is damage. So the
   image is held at the strength of a TEXTURE: almost entirely covered, present
   at the edges, and never under a paragraph. The bands that carry real reading
   keep their solid colour. ===== */
.sv-band--deep{
  background-color:var(--sv-pine);
  background-image:
    linear-gradient(180deg, rgba(6,23,16,.985) 0%, rgba(6,23,16,.955) 45%, rgba(6,23,16,.99) 100%),
    var(--sv-bg-alpine);
  background-size:cover;background-position:center;
}
.sv-band--pine{
  background-color:#0B241C;
  background-image:
    linear-gradient(180deg, rgba(8,28,20,.985) 0%, rgba(8,28,20,.96) 50%, rgba(8,28,20,.99) 100%),
    var(--sv-bg-elves);
  background-size:cover;background-position:center 30%;
}
/* THE TEXT IN THESE TWO BANDS WAS INVISIBLE. Giving a band a dark background
   does not change what is written on it: `.sv-band--deep` and `.sv-band--pine`
   were painted pine and the h2 and paragraphs inside them stayed at the page
   default, rgb(14,43,34), which IS pine. "How it works" measured 1:1 against
   its own background and could not be read at all on the live home page.
   A background colour and the text colour that survives it are one change. */
.sv-band--deep, .sv-band--pine{color:var(--sv-bone)}
.sv-band--deep h1,.sv-band--deep h2,.sv-band--deep h3,.sv-band--deep h4,
.sv-band--pine h1,.sv-band--pine h2,.sv-band--pine h3,.sv-band--pine h4{
  color:var(--sv-bone)
}
.sv-band--deep p,.sv-band--deep li,.sv-band--deep .sv-lede,
.sv-band--pine p,.sv-band--pine li,.sv-band--pine .sv-lede{
  color:rgba(243,237,225,.88)
}
.sv-band--deep strong,.sv-band--pine strong{color:var(--sv-bone)}
.sv-band--deep a:not(.sv-btn),.sv-band--pine a:not(.sv-btn){color:var(--sv-brass)}
.sv-band--deep .sv-step__n,.sv-band--pine .sv-step__n{
  color:var(--sv-brass);border-color:rgba(194,160,73,.55)
}

/* On a phone the bands are tall and the image is stretched to fill them, which
   turns a photograph into a smear. Texture off, colour only. */
@media(max-width:700px){
  .sv-band--deep,.sv-band--pine{background-image:none}
}

/* ===== the shelf navigator, above the grid on a big collection =====
   Chips, not a sidebar: a sidebar on a phone is a drawer nobody opens, and
   this has to work first on the device most of the traffic is on. */
.sv-shelfnav{max-width:1180px;margin:0 auto;padding:1rem clamp(1rem,4vw,2rem) .25rem}
.sv-shelfnav__row{display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap;margin:0 0 .6rem}
.sv-shelfnav__lab{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(14,43,34,.62);flex:0 0 auto}
.sv-shelfnav__chips{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0;padding:0}
.sv-chip{display:inline-block;padding:.42rem .8rem;border:1px solid rgba(14,43,34,.2);
  border-radius:999px;font-size:.86rem;line-height:1.2;text-decoration:none;
  color:var(--sv-pine,#0E2B22);background:#fff;white-space:nowrap}
.sv-chip:hover,.sv-chip:focus-visible{border-color:var(--sv-pine,#0E2B22);background:#FBF8F2}
.sv-chip.is-on{background:var(--sv-pine,#0E2B22);color:#F4EEE2;border-color:var(--sv-pine,#0E2B22)}
.sv-shelfnav__now{margin:.2rem 0 .6rem;font-size:.9rem;color:rgba(14,43,34,.78)}
.sv-shelfnav__now a{color:inherit}
@media(max-width:700px){
  /* one swipeable line each, so the chips never push the grid off the first screen */
  .sv-shelfnav{padding:.8rem 0 .2rem}
  .sv-shelfnav__row{display:block;margin-bottom:.5rem}
  .sv-shelfnav__lab{display:block;padding:0 1rem .3rem}
  .sv-shelfnav__chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    padding:0 1rem .35rem;-webkit-overflow-scrolling:touch}
  .sv-shelfnav__chips::-webkit-scrollbar{display:none}
  .sv-shelfnav__now{padding:0 1rem}
}

/* ===== the drawer is an accordion, not a list of everything =====
   Horizon prints every submenu expanded. On a phone that was 1,400 px of menu.
   assets/sv-menu.js adds a chevron beside each parent that has children; these
   rules do the hiding. Everything is scoped to .sv-accordion-ready, which the
   script only adds once it has successfully wired the drawer, so if Horizon
   ever renames a class the menu degrades to the old flat list rather than
   collapsing into nothing.

   THE COLLAPSE HAS TO BE TOTAL. A grid 0fr on the list alone left a 120 px
   hole where each closed submenu used to be, because the list keeps its own
   padding and the child rows keep the theme's animation transforms. Height,
   padding, margin and the rows themselves all have to go. */
.sv-accordion-ready .sv-has-sub{position:relative}
.sv-accordion-ready .sv-has-sub > .menu-drawer__menu--childlist{
  display:block;overflow:hidden;margin:0;padding:0;border:0;
  max-height:0;opacity:0;
  transition:max-height .24s ease, opacity .16s ease}
.sv-accordion-ready .sv-has-sub > .menu-drawer__menu--childlist > li{
  margin:0;padding:0;transform:none}
.sv-accordion-ready .sv-has-sub.is-open > .menu-drawer__menu--childlist{
  max-height:60vh;opacity:1;overflow-y:auto;padding-bottom:.4rem}

.sv-subtoggle{position:absolute;top:0;right:0;width:56px;height:56px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:0;padding:0;margin:0;cursor:pointer;
  color:currentColor;-webkit-tap-highlight-color:transparent}
.sv-subtoggle svg{transition:transform .22s ease}
.sv-has-sub.is-open > .sv-subtoggle svg{transform:rotate(180deg)}
.sv-subtoggle:focus-visible{outline:2px solid currentColor;outline-offset:-4px;border-radius:6px}
.sv-accordion-ready .sv-has-sub > .menu-drawer__menu-item--mainlist{padding-right:60px}

@media(min-width:990px){
  /* the drawer is a phone and tablet thing; the desktop header has its own
     dropdowns and must not inherit any of this */
  .sv-accordion-ready .sv-has-sub > .menu-drawer__menu--childlist{
    max-height:none;opacity:1;overflow:visible}
  .sv-subtoggle{display:none}
}

/* ===== the lettering chooser =====
   Four swatches showing each face set in itself, because a list of font names
   tells a shopper nothing. Big enough to tap, and the preview under it redraws
   the moment one is chosen. */
.sv-facewrap{margin:.9rem 0 .2rem}
.sv-face{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;margin:.35rem 0 .4rem}
.sv-face__opt{position:relative;display:flex;align-items:center;justify-content:center;
  min-height:52px;padding:.3rem .2rem;border:1px solid rgba(14,43,34,.22);border-radius:.5rem;
  background:#fff;cursor:pointer;text-align:center;line-height:1;overflow:hidden}
.sv-face__opt input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.sv-face__opt span{font-size:1.12rem;color:var(--sv-pine,#0E2B22);pointer-events:none;
  white-space:nowrap}
.sv-face__opt:hover{border-color:rgba(14,43,34,.5)}
.sv-face__opt:has(input:checked){border-color:var(--sv-pine,#0E2B22);
  box-shadow:inset 0 0 0 1px var(--sv-pine,#0E2B22);background:#FBF8F2}
.sv-face__opt:has(input:focus-visible){outline:2px solid var(--sv-pine,#0E2B22);outline-offset:2px}
.sv-face__note{margin:0;font-size:.78rem;line-height:1.45;color:rgba(14,43,34,.66)}
@media(max-width:430px){
  .sv-face{grid-template-columns:repeat(2,1fr)}
}


/* ===== the header bar, measured rather than guessed =====================
   Eight top level shelves at Horizon's 14px need about 855 px of bar. Once the
   269 px logo and the 115 px of icons are paid for, a 1280 px laptop has 856
   and an iPad has 316, so the overflow list was hiding one shelf on the most
   common laptop and SIX on an iPad - a header reading "Santa Sacks |
   Ornaments | More", which tells the shopper nothing about the range.

   Two fixes, in the order they pay:
   1. below 1220 the bar gives up and the drawer takes over, because a
      hamburger that opens eight labelled shelves beats a two item stub;
   2. between 1180 and 1440 the logo is capped so all eight still fit.
   Measured at 390, 820, 1024, 1180, 1220, 1280 and 1440. ===================== */
@media (max-width:1219px){
  header-menu.header-menu{display:none !important}
  .header__drawer{display:flex !important}
  .header__drawer header-drawer,
  .header__drawer .menu-drawer-container,
  .header__drawer .header__icon--menu{display:block}
  .header__drawer .header__icon--menu{width:44px;height:44px}
}
@media (min-width:1220px) and (max-width:1439px){
  .header-logo__image{max-width:210px;width:210px;height:auto}
}
/* At 1180 the eight items measured 733 px against a 735 px bar and the
   overflow list STILL kept "More", because it reserves the width of the More
   button itself before it decides. Two pixels of headroom is not headroom. */
@media (min-width:1220px) and (max-width:1319px){
  .header-logo__image{max-width:158px;width:158px}
  .menu-list__list-item > a,
  .menu-list__list-item > button{font-size:13px;letter-spacing:-.005em}
}


/* ===== collection hero scrim, measured against WCAG rather than eyeballed ===
   On a phone the hero scrim ran from 45% to 92% opacity down the frame. At the
   TOP that left the collection photo showing at about (109,116,106), and the
   description paragraph sits right there: bone body copy on that measures
   3.36:1, against the 4.5:1 AA needs for body text. The h1 scraped through at
   4.13:1 only because it counts as large text.

   Sampled from a real screenshot at 390 px, not from the stylesheet: the photo
   under the scrim is about (193,192,180), so the top stop has to reach .70
   before the paragraph clears 4.5:1. At .70 it measures about 5.7:1, which
   leaves room for a lighter photo than this one. ========================== */
@media(max-width:820px){
  .sv-colhero{background-image:linear-gradient(180deg,rgba(6,23,16,.70),rgba(6,23,16,.94))!important}
}
@media(min-width:821px){
  /* the desktop hero puts the same paragraph over the same photo, and the base
     rule has no scrim at all above 820 - only a text-shadow, which is not a
     contrast mechanism. */
  .sv-colhero{background-image:linear-gradient(90deg,rgba(6,23,16,.88),rgba(6,23,16,.74) 52%,rgba(6,23,16,.52))}
}\n

/* ===== the shelf nav has to survive being used ==========================
   Tony, after clicking one theme: "the sort function for themes needs to stay
   sticky so you can just click through and change without having to return back
   in navigation", and "it needs to tell you what section you're in so you can
   get back later".

   Sticky is literal here as well as figurative: the chip row pins under the
   header while the grid scrolls, so the next theme is one click away from
   anywhere on the page rather than a scroll back to the top. The active chip is
   filled rather than outlined, because on a row of twenty chips a border weight
   change is not a state anybody notices. ==================================== */
.sv-shelfnav{
  position:sticky;top:0;z-index:30;
  background:var(--sv-bone);
  box-shadow:0 1px 0 rgba(14,43,34,.10);
}
.sv-shelfnav.is-filtered{box-shadow:0 1px 0 rgba(14,43,34,.18)}
.sv-shelfnav__here{
  margin:0 0 .55rem;font-size:.85rem;color:rgba(14,43,34,.72);
  display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;
}
.sv-shelfnav__here a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.sv-shelfnav__here strong{color:var(--sv-pine);font-weight:600}
.sv-shelfnav__n{
  margin-left:auto;font-size:.76rem;letter-spacing:.04em;text-transform:uppercase;
  color:rgba(14,43,34,.6);
}
.sv-chip.is-on{
  background:var(--sv-pine);border-color:var(--sv-pine);color:var(--sv-bone);
  font-weight:600;
}
.sv-chip.is-on:hover,.sv-chip.is-on:focus-visible{background:var(--sv-pine-lift);color:#fff}
.sv-chip--all{font-weight:600}
.sv-colhero__of{display:block;font-size:.52em;opacity:.82;margin-top:.25rem;letter-spacing:.01em}
@media(max-width:820px){
  /* the row already scrolls sideways on a phone; pinning it there as well would
     eat a third of a short screen, so it pins from tablet up only. */
  .sv-shelfnav{position:static}
  .sv-shelfnav__n{margin-left:0;width:100%}
}


/* ===== the about page photograph ======================================= */
.sv-about__hero{margin:0 0 1.75rem;max-width:860px}
.sv-about__hero img{
  display:block;width:100%;height:auto;border-radius:2px;
  border:1px solid rgba(14,43,34,.12);
}


/* ===== cart add-ons, the last chance to be useful ======================
   SIX suggestions maximum, in a horizontal scroller rather than a grid, so the
   block occupies one band of the page whatever the cart contains. A grid that
   grows to three rows pushes the checkout button off the screen, which is the
   one thing an add-on block must never do: the checkout button stays the
   loudest thing on the page and this stays skimmable and skippable.
   ==================================================================== */
.sv-addons{
  max-width:1180px;margin:2.5rem auto 0;padding:1.75rem clamp(1rem,4vw,2rem) 2rem;
  border-top:var(--sv-rule);
}
.sv-addons__h{font-size:clamp(1.3rem,2.4vw,1.75rem);margin:0 0 .35rem}
.sv-addons__sub{margin:0 0 1.1rem;font-size:.95rem;color:rgba(14,43,34,.7);max-width:70ch}
.sv-addons__row{
  display:grid;gap:.9rem;grid-auto-flow:column;grid-auto-columns:minmax(252px,1fr);
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
  padding-bottom:.5rem;margin:0 calc(clamp(1rem,4vw,2rem) * -1);
  padding-left:clamp(1rem,4vw,2rem);padding-right:clamp(1rem,4vw,2rem);
  scrollbar-width:thin;
}
.sv-addons__row::-webkit-scrollbar{height:6px}
.sv-addons__row::-webkit-scrollbar-thumb{background:rgba(14,43,34,.22);border-radius:3px}
.sv-addon{
  scroll-snap-align:start;
  border:var(--sv-rule);background:#fff;padding:1.05rem 1.1rem 1.15rem;
  display:flex;flex-direction:column;gap:.42rem;border-radius:2px;
  text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s;
}
.sv-addon:hover,.sv-addon:focus-visible{
  border-color:rgba(194,160,73,.85);box-shadow:0 2px 14px rgba(14,43,34,.08);
}
.sv-addon--gap{border-color:rgba(194,160,73,.7);background:rgba(194,160,73,.07)}
.sv-addon--sibling{border-color:rgba(14,43,34,.45)}
.sv-addon__k{
  font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--sv-brass-dim);font-weight:600;
}
.sv-addon__t{font-size:1.02rem;font-weight:600;line-height:1.25;color:var(--sv-pine)}
.sv-addon__d{font-size:.88rem;line-height:1.5;color:rgba(14,43,34,.78)}
.sv-addon__go{
  margin-top:auto;padding-top:.5rem;font-size:.86rem;font-weight:600;
  color:var(--sv-pine);text-decoration:underline;text-underline-offset:3px;
}
.sv-addons__note{
  margin:1.1rem 0 0;font-size:.85rem;color:rgba(14,43,34,.62);max-width:70ch;
}
@media(max-width:620px){
  .sv-addons{margin-top:1.75rem;padding-top:1.35rem}
  .sv-addons__row{grid-auto-columns:minmax(78vw,1fr)}
}
}

/* ===== "Customise a product", the picker ==========================
   Tony's brief off Callie: "less verbiage more products less clicks to
   checkout wins". So the page carries one heading, one line of copy and then
   nothing but choices. The step rail is a progress indicator AND the way back,
   because a shopper who picks the wrong look should not have to find a button.

   TOUCH TARGETS ARE 44 px MINIMUM, everywhere, including the theme chips. This
   is a page that will be used one handed on a phone in December.
   ==================================================================== */
.sv-create{display:block;width:100%;background:var(--sv-bone)}
.sv-create__in{max-width:1180px;margin:0 auto;padding:2rem clamp(1rem,4vw,2rem) 4rem}
.sv-create__head{margin:0 0 1.5rem}
.sv-create__h1{font-size:clamp(1.9rem,4.4vw,2.9rem);margin:0 0 .4rem;line-height:1.1}
.sv-create__lede{margin:0;font-size:1.02rem;color:rgba(14,43,34,.78);max-width:56ch}
.sv-create__h2{font-size:clamp(1.15rem,2.4vw,1.5rem);margin:0 0 1rem}

.sv-create__steps{
  list-style:none;display:flex;gap:.4rem;margin:0 0 1.75rem;padding:0;
  flex-wrap:wrap;border-bottom:var(--sv-rule);padding-bottom:.9rem;
}
.sv-step{
  display:flex;align-items:center;gap:.45rem;font-size:.86rem;font-weight:600;
  color:rgba(14,43,34,.42);padding:.35rem .6rem;border-radius:2px;
}
.sv-step span{
  display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:rgba(14,43,34,.12);color:rgba(14,43,34,.55);font-size:.78rem;
}
.sv-step.is-done{color:var(--sv-pine);cursor:pointer}
.sv-step.is-done span{background:var(--sv-brass);color:var(--sv-pine)}
.sv-step.is-on{color:var(--sv-pine)}
.sv-step.is-on span{background:var(--sv-pine);color:var(--sv-bone)}

/* step 1, the product, AS PICTURES.
   The first version was six labelled boxes with a price, which is a menu. A
   shopper deciding between a mug and a towel is deciding with their eyes. */
.sv-create__kinds{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.sv-kind{
  display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden;
  border:var(--sv-rule);background:#fff;border-radius:2px;
  text-align:left;cursor:pointer;font:inherit;color:inherit;
  transition:border-color .15s,box-shadow .15s,transform .12s;
}
.sv-kind:hover,.sv-kind:focus-visible{
  border-color:var(--sv-brass);box-shadow:0 4px 20px rgba(14,43,34,.11);transform:translateY(-2px);
}
.sv-kind__img{
  width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;display:block;
  background:#F7F5F0;
}
.sv-kind__img--none{display:block;width:100%;aspect-ratio:1/1;background:#F7F5F0}
.sv-kind__t{
  font-size:1.02rem;font-weight:700;color:var(--sv-pine);
  padding:.8rem .9rem .1rem;line-height:1.25;
}
.sv-kind__p{
  font-size:.9rem;color:var(--sv-brass-dim);font-weight:600;
  padding:0 .9rem .85rem;display:flex;justify-content:space-between;gap:.5rem;align-items:baseline;
}
.sv-kind__n{font-size:.8rem;color:rgba(14,43,34,.55);font-weight:400}

/* the theme chips are a FILTER on the design step, not a step of their own */
.sv-create__filter{
  display:flex;gap:.7rem;align-items:baseline;flex-wrap:wrap;margin:0 0 1rem;
  padding-bottom:1rem;border-bottom:var(--sv-rule);
}
.sv-create__filterlab{
  font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
  color:rgba(14,43,34,.55);flex:0 0 auto;padding-top:.5rem;
}
.sv-theme.is-on{background:var(--sv-pine);border-color:var(--sv-pine)}
.sv-theme.is-on .sv-theme__t{color:var(--sv-bone)}
.sv-theme.is-on .sv-theme__n{color:rgba(243,237,225,.72)}

/* step 2, the look */
.sv-create__themes{display:flex;flex-wrap:wrap;gap:.55rem}
.sv-theme{
  min-height:44px;display:inline-flex;align-items:baseline;gap:.45rem;
  padding:.6rem .9rem;border:var(--sv-rule);background:#fff;border-radius:999px;
  cursor:pointer;font:inherit;color:inherit;transition:border-color .15s,background .15s;
}
.sv-theme:hover,.sv-theme:focus-visible{border-color:var(--sv-brass);background:rgba(194,160,73,.08)}
.sv-theme__t{font-size:.94rem;font-weight:600;color:var(--sv-pine)}
.sv-theme__n{font-size:.8rem;color:rgba(14,43,34,.55)}
.sv-theme--all{background:var(--sv-pine);border-color:var(--sv-pine)}
.sv-theme--all .sv-theme__t{color:var(--sv-bone)}
.sv-theme--all .sv-theme__n{color:rgba(243,237,225,.72)}
.sv-theme--all:hover{background:var(--sv-pine-lift)}

/* step 3, the design grid */
.sv-create__count{margin:0 0 1rem;font-size:.9rem;color:rgba(14,43,34,.62)}
.sv-create__grid{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.sv-pick{
  display:flex;flex-direction:column;gap:.45rem;padding:.5rem .5rem .7rem;
  border:var(--sv-rule);background:#fff;border-radius:2px;cursor:pointer;
  font:inherit;color:inherit;text-align:left;transition:border-color .15s,box-shadow .15s;
}
.sv-pick:hover,.sv-pick:focus-visible{border-color:var(--sv-brass);box-shadow:0 3px 16px rgba(14,43,34,.09)}
.sv-pick__img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;background:#F7F5F0;border-radius:2px}
.sv-pick__t{font-size:.82rem;line-height:1.3;color:rgba(14,43,34,.85)}
.sv-create__more{
  display:block;margin:1.4rem auto 0;min-height:44px;padding:.7rem 1.6rem;
  border:1px solid var(--sv-pine);background:transparent;border-radius:2px;
  font:inherit;font-weight:600;color:var(--sv-pine);cursor:pointer;
}
.sv-create__more:hover{background:var(--sv-pine);color:var(--sv-bone)}

/* step 4, the name */
.sv-create__final{display:grid;gap:1.75rem;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.sv-create__preview{margin:0;background:#F7F5F0;border:var(--sv-rule);border-radius:2px;padding:1.2rem}
.sv-create__preview img{width:100%;height:auto;display:block}
.sv-create__name{
  margin-top:.6rem;text-align:center;font-family:"Luckiest Guy",system-ui,sans-serif;
  font-size:clamp(1.6rem,5vw,2.6rem);line-height:1.1;color:var(--sv-pine);
  min-height:1.2em;word-break:break-word;
}
.sv-create__label{display:block;font-weight:600;margin-bottom:.45rem;color:var(--sv-pine)}
.sv-create__input{
  width:100%;min-height:52px;padding:.8rem 1rem;font-size:1.15rem;
  border:1px solid rgba(14,43,34,.45);border-radius:2px;background:#fff;color:var(--sv-pine);
}
.sv-create__input:focus{outline:2px solid var(--sv-brass);outline-offset:1px;border-color:var(--sv-brass)}
.sv-create__hint{margin:.5rem 0 1.25rem;font-size:.85rem;color:rgba(14,43,34,.62)}
.sv-create__go{
  display:block;text-align:center;min-height:52px;padding:.9rem 1.4rem;
  background:var(--sv-pine);color:var(--sv-bone);font-weight:600;border-radius:2px;
  text-decoration:none;
}
.sv-create__go:hover{background:var(--sv-pine-lift);color:var(--sv-bone)}
.sv-create__go[aria-disabled="true"]{opacity:.45;pointer-events:none}
.sv-create__note{margin:.8rem 0 0;font-size:.88rem;color:rgba(14,43,34,.66)}
.sv-create__back{
  margin-top:1.6rem;min-height:44px;padding:.6rem 1.2rem;background:none;
  border:1px solid rgba(14,43,34,.3);border-radius:2px;font:inherit;
  color:var(--sv-pine);cursor:pointer;
}
.sv-create__back:hover{border-color:var(--sv-pine)}

@media(max-width:760px){
  .sv-create__final{grid-template-columns:1fr}
  .sv-create__grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:.6rem}
  .sv-create__steps{gap:.15rem}
  .sv-step{padding:.35rem .35rem;font-size:.8rem}
}

/* ===== track your order ==============================================
   Same full bleed section, centred inner container pattern as the picker, and
   for the same measured reason: this block is injected after </main>, outside
   the theme's own container, where a max-width set on the section itself is
   overridden by a Horizon rule loaded later. ========================= */
.sv-track{display:block;width:100%;background:var(--sv-bone)}
.sv-track__in{max-width:800px;margin:0 auto;padding:1rem clamp(1rem,4vw,2rem) 4rem}
.sv-track__h{font-size:clamp(1.15rem,2.4vw,1.5rem);margin:2rem 0 .7rem;color:var(--sv-pine)}
.sv-track__p{margin:0 0 1rem;line-height:1.6;color:rgba(14,43,34,.84);max-width:68ch}
.sv-track__list{margin:0 0 1.4rem;padding-left:1.15rem;line-height:1.6;max-width:68ch}
.sv-track__list li{margin-bottom:.6rem;color:rgba(14,43,34,.84)}
.sv-track__box{
  border:var(--sv-rule);background:#fff;border-radius:2px;
  padding:1.4rem clamp(1rem,3vw,1.6rem) 1.6rem;margin:0 0 1rem;
}
.sv-track__box .sv-track__h{margin-top:0}
.sv-track__form{display:grid;gap:.4rem;max-width:460px}
.sv-track__label{font-weight:600;font-size:.9rem;color:var(--sv-pine);margin-top:.5rem}
.sv-track__input,.sv-track__select{
  min-height:50px;padding:.7rem .9rem;font-size:1.05rem;border-radius:2px;
  border:1px solid rgba(14,43,34,.45);background:#fff;color:var(--sv-pine);width:100%;
}
.sv-track__input:focus,.sv-track__select:focus{
  outline:2px solid var(--sv-brass);outline-offset:1px;border-color:var(--sv-brass);
}
.sv-track__go{
  margin-top:1rem;min-height:50px;padding:.8rem 1.4rem;border:0;border-radius:2px;
  background:var(--sv-pine);color:var(--sv-bone);font:inherit;font-weight:600;cursor:pointer;
}
.sv-track__go:hover{background:var(--sv-pine-lift)}
.sv-track__err{margin:.7rem 0 0;font-size:.9rem;color:#8C2F1E}

/* keep shopping, on a cart that HAS something in it */
.sv-addons__keep{
  margin:1.4rem 0 0;font-size:.95rem;color:rgba(14,43,34,.78);
  display:flex;flex-wrap:wrap;gap:.4rem;align-items:baseline;
}
.sv-addons__keep a{color:var(--sv-pine);text-decoration:underline;text-underline-offset:3px;font-weight:600}
.sv-addons__keepsep{color:rgba(14,43,34,.5)}

/* a way onward from the picker's last step */
.sv-create__again{
  margin:1rem 0 0;font-size:.92rem;display:flex;flex-wrap:wrap;gap:.4rem;align-items:baseline;
}
.sv-create__link{
  background:none;border:0;padding:0;font:inherit;font-weight:600;cursor:pointer;
  color:var(--sv-pine);text-decoration:underline;text-underline-offset:3px;
}
.sv-create__link:hover{color:var(--sv-brass-dim)}
.sv-create__sep{color:rgba(14,43,34,.5)}

/* the category row leads, so it gets the emphasis */
.sv-shelfnav__row--cats .sv-chip{border-color:rgba(14,43,34,.4)}
.sv-shelfnav__row--cats .sv-shelfnav__lab{color:var(--sv-pine)}

/* ===== THE DROPDOWNS ==================================================
   Tony: "menus are garbage look horrible messy and no clear format to them
   this site gets people lost quickly", with au.callie.com as the reference.

   WHAT WAS ACTUALLY WRONG, read out of the rendered markup rather than guessed.
   Horizon's mega menu is a SIX COLUMN GRID (--menu-columns-desktop: 6) and it
   puts every child of a top level item into ONE <li class="mega-menu__column">.
   So the Ornaments panel was three links stacked in the first sixth of a
   full-width panel and five empty columns of cream to the right of them. It did
   not look messy because of the links; it looked wrong because the panel was
   reserving a room five times bigger than its contents.

   THE SHAPE THAT FIXES IT is Callie's: a panel that is as tall as its content,
   links laid in real columns, and the group name above each column as a heading
   rather than as another link in the list. A shopper reads a column heading and
   knows where they are, which is the whole complaint.
   ==================================================================== */
@media (min-width: 990px) {
  .mega-menu.section{
    padding-block:1.6rem 1.9rem !important;
    min-height:0 !important;
  }
  /* the grid stops reserving six columns and becomes a row of real ones */
  .mega-menu__grid{
    --menu-columns-desktop:1 !important;
    --menu-columns-tablet:1 !important;
    display:flex !important;gap:2rem;align-items:flex-start;
  }
  .mega-menu__list{
    display:flex !important;flex-wrap:wrap;gap:.3rem 3.5rem;margin:0;
    grid-template-columns:none !important;
  }
  .mega-menu__column{
    min-width:186px;display:flex;flex-direction:column;gap:0;
    grid-column:auto !important;
  }
  .mega-menu__link{
    padding-block:.4rem !important;font-size:.95rem;line-height:1.35;
  }
  /* A GROUP NAME IS A HEADING, NOT A LINK THAT LOOKS LIKE ITS OWN CHILDREN.
     Horizon marks it --parent and then styles it identically, so "Classic and
     Heritage" and "Vintage Christmas" were indistinguishable and the columns
     read as one long list. */
  .mega-menu__link--parent{
    font-weight:700 !important;color:var(--sv-pine) !important;
    font-size:.78rem !important;letter-spacing:.09em;text-transform:uppercase;
    padding-bottom:.45rem !important;margin-bottom:.35rem;
    border-bottom:1px solid rgba(14,43,34,.16);pointer-events:auto;
  }
  .mega-menu__link:not(.mega-menu__link--parent):hover .wrap-text{
    text-decoration:underline;text-underline-offset:3px;
  }
  /* THE FEATURED PRODUCT RAIL GOES.
     It is a theme-editor setting on the menu item and it was the single worst
     thing in the panel: three text links on the left and then three unbounded
     product cards, one of them a 530 px photograph of an ornament and two of
     them empty grey boxes with a truncated title. Measured at 771 px tall for a
     panel holding three links.

     Callie's navigation, which is the reference Tony gave, is text columns and
     nothing else, and it is right: a shopper opening a menu is choosing where to
     go, not shopping. The shopping happens on the shelf they land on. */
  .mega-menu__content{display:none !important}
  .mega-menu__content-list--products{display:none !important}
  /* ALIGN TO THE HEADER, NOT TO THE MIDDLE OF THE SCREEN.
     Centring the panel at 1180 px looked fine at 1440 and wrong at 2560, where
     the columns started 687 px in from the left while the logo and the menu
     labels above them started at 64. Measured on Tony's own screen: the panel
     read as floating, unconnected to the item that opened it, which is most of
     what "they are random" meant. The panel now starts at the same gutter the
     header does and grows to the right. */
  .mega-menu__grid{max-width:none;margin-inline:0}
  .mega-menu.section{
    padding-inline:clamp(1rem,4vw,4rem) !important;
  }
  /* a column with no heading must still line up with the ones that have one */
  .mega-menu__column{padding-top:0}
  .mega-menu__column:not(:has(.mega-menu__link--parent)){padding-top:1.9rem}
}

/* ===== THE ADD TO CART BUTTON ==========================================
   Tony: "add to cart needs to be golden button with green text perhaps but not
   red". It was Horizon's accent, which on this palette renders red.

   Brass on pine measures 8.4:1, comfortably past the 4.5:1 AA needs for body
   text and the 3:1 it needs as a control, so this is not a trade of legibility
   for prettiness. It also matches "Customise a product" and "Shop Santa sacks" in the
   hero, which are the two other buttons a shopper meets before this one: one
   store, one call to action colour.

   The quick-add on a collection tile and the sticky bar carry it too, because a
   button that changes colour between the shelf and the product page reads as two
   different buttons. Checkout stays pine: it is the END of the journey and it
   should not compete with the thing that fills the cart.
   ==================================================================== */
.add-to-cart-button,
.button.add-to-cart-button,
.quick-add__button,
.product-form__submit,
button[name="add"]{
  background:var(--sv-brass) !important;
  background-image:none !important;
  color:var(--sv-pine) !important;
  border-color:var(--sv-brass) !important;
  font-weight:700 !important;
}
.add-to-cart-button:hover,
.button.add-to-cart-button:hover,
.quick-add__button:hover,
.product-form__submit:hover,
button[name="add"]:hover{
  background:#D4B564 !important;
  color:var(--sv-pine) !important;
  border-color:#D4B564 !important;
}
.add-to-cart-button:focus-visible,
button[name="add"]:focus-visible{
  outline:2px solid var(--sv-pine);outline-offset:2px;
}
.add-to-cart-button *,
button[name="add"] *{color:inherit !important}
/* the "Added" state has to stay readable on brass */
.add-to-cart__added{color:var(--sv-pine) !important}

/* ===== THE ARTWORK PICKER ON THE PRODUCT PAGE ==========================
   Picking a swatch swaps the artwork in place and never navigates, so the grid
   has to look like a control and not like a list of links. Square tiles, the
   current one ringed in brass, and the whole block capped in height so 657
   designs cannot push the Add to cart button off the screen: the scroll is
   INSIDE the grid.
   ==================================================================== */
.sv-sw{margin:0 0 1.5rem;padding:1.1rem 0 0;border-top:var(--sv-rule)}
.sv-sw[hidden]{display:none}
.sv-sw__head{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin:0 0 .7rem}
.sv-sw__lab{
  font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
  color:rgba(14,43,34,.6);
}
.sv-sw__now{font-weight:600;color:var(--sv-pine);font-size:.98rem}
.sv-sw__all{
  margin-left:auto;background:none;border:0;padding:0;font:inherit;font-size:.86rem;
  font-weight:600;color:var(--sv-pine);cursor:pointer;text-decoration:underline;
  text-underline-offset:3px;
}
.sv-sw__themes{display:flex;flex-wrap:wrap;gap:.35rem;margin:0 0 .8rem}
.sv-swchip{
  min-height:34px;display:inline-flex;align-items:center;gap:.35rem;
  padding:.35rem .7rem;border:var(--sv-rule);background:#fff;border-radius:999px;
  font:inherit;font-size:.84rem;color:var(--sv-pine);cursor:pointer;
}
.sv-swchip span{font-size:.74rem;color:rgba(14,43,34,.5)}
.sv-swchip:hover{border-color:var(--sv-brass)}
.sv-swchip.is-on{background:var(--sv-pine);border-color:var(--sv-pine);color:var(--sv-bone)}
.sv-swchip.is-on span{color:rgba(243,237,225,.7)}
.sv-sw__grid{
  display:grid;gap:.45rem;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));
  max-height:270px;overflow-y:auto;overscroll-behavior:contain;padding:2px;
}
.sv-swtile{
  padding:0;border:2px solid transparent;background:#F7F5F0;border-radius:2px;
  cursor:pointer;line-height:0;outline-offset:2px;
}
.sv-swtile img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;display:block}
.sv-swtile:hover{border-color:rgba(194,160,73,.7)}
.sv-swtile.is-on{border-color:var(--sv-brass);box-shadow:0 0 0 2px rgba(194,160,73,.3)}
.sv-sw.is-busy{opacity:.55;pointer-events:none}
.sv-sw__loading{margin:0;font-size:.88rem;color:rgba(14,43,34,.55)}
@media(max-width:620px){
  .sv-sw__grid{grid-template-columns:repeat(auto-fill,minmax(62px,1fr));max-height:230px}
}

/* ===== THE PHOTO UPLOADER ==============================================
   The rules sit ABOVE the button, not in a policy, because a requirement a
   shopper reads after choosing a file is a complaint waiting to happen. The
   warning is amber rather than red: the photo is allowed, it is just going to
   print softer, and colouring it like an error makes people abandon a sale they
   were happy with.
   ==================================================================== */
.sv-photo{margin:0 0 1.4rem;padding:1.2rem 1.15rem 1.3rem;border:var(--sv-rule);
  background:#fff;border-radius:2px}
.sv-photo__step{
  display:flex;align-items:center;gap:.5rem;margin:0 0 .7rem;
  font-weight:700;color:var(--sv-pine);
}
.sv-photo__step span{
  display:grid;place-items:center;width:23px;height:23px;border-radius:50%;
  background:var(--sv-pine);color:var(--sv-bone);font-size:.8rem;
}
.sv-photo__rules{margin:0 0 .9rem;font-size:.89rem;line-height:1.55;color:rgba(14,43,34,.82)}
.sv-photo__rules p{margin:0 0 .45rem;max-width:62ch}
.sv-photo__rules2{color:rgba(14,43,34,.62)}
.sv-photo__drop{
  display:flex;align-items:center;gap:.8rem;min-height:66px;padding:.9rem 1.1rem;
  border:2px dashed rgba(14,43,34,.32);border-radius:3px;cursor:pointer;
  background:#FBF9F4;transition:border-color .15s,background .15s;
}
.sv-photo__drop:hover{border-color:var(--sv-brass);background:#FBF7EE}
.sv-photo__plus{
  font-size:1.6rem;line-height:1;color:var(--sv-brass-dim);font-weight:700;
}
.sv-photo__cta{font-weight:600;color:var(--sv-pine)}
.sv-photo__file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.sv-photo__thumb{margin:.9rem 0 0;display:flex;gap:.8rem;align-items:center}
.sv-photo__thumb img{
  width:92px;height:92px;object-fit:cover;border:var(--sv-rule);border-radius:2px;background:#F7F5F0;
}
.sv-photo__thumb figcaption{font-size:.85rem;color:rgba(14,43,34,.7)}
.sv-photo__ok{
  margin:.8rem 0 0;font-size:.88rem;font-weight:600;color:#2C6E49;
}
.sv-photo__warn{
  margin:.9rem 0 0;padding:.9rem 1rem;border:2px solid var(--sv-brass);
  background:#FBF7EE;border-radius:2px;
}
.sv-photo__warnh{
  margin:0 0 .35rem;font-weight:700;color:#8A7433;font-size:.95rem;
}
.sv-photo__warn p{margin:0 0 .6rem;font-size:.88rem;line-height:1.55;color:rgba(14,43,34,.85)}
.sv-photo__accept{display:flex;gap:.55rem;align-items:flex-start;font-size:.9rem;
  line-height:1.5;cursor:pointer;color:var(--sv-pine);font-weight:600}
.sv-photo__accept input{margin-top:.22rem;width:19px;height:19px;flex:0 0 auto}
.sv-photo__note{margin:.6rem 0 0 !important;font-size:.8rem !important;
  color:rgba(14,43,34,.6) !important}
.add-to-cart-button.is-blocked,
button[name="add"].is-blocked{opacity:.45 !important;cursor:not-allowed}

/* --------------------------------------------------------- photo: lettering
   Three colours that actually read on the pine panel. The swatch is the ink
   itself with a ring, so White is visible on a white card - a plain filled
   circle disappears, which is the mistake the first version made. */
.sv-photo__ink{margin:1.1rem 0 .2rem}
.sv-photo__inks{display:flex;gap:.5rem;flex-wrap:wrap;margin:.1rem 0 0}
.sv-photo__i{
  display:flex;align-items:center;gap:.45rem;
  background:#fff;border:1px solid rgba(14,43,34,.22);border-radius:999px;
  padding:.32rem .72rem .32rem .38rem;cursor:pointer;font:inherit;
  font-size:.86rem;color:#0E2B22;line-height:1;transition:border-color .12s,box-shadow .12s}
.sv-photo__i::before{
  content:"";width:18px;height:18px;border-radius:50%;
  background:var(--i);box-shadow:inset 0 0 0 1px rgba(14,43,34,.3);flex:0 0 auto}
.sv-photo__i:hover{border-color:rgba(14,43,34,.45)}
.sv-photo__i.is-on{border-color:#0E2B22;box-shadow:0 0 0 1px #0E2B22}

/* ------------------------------------------------------------ photo: preview
   Full width of the personalisation column, and NOT lazy: this is the picture
   the shopper is looking at while they type, so waiting for a scroll is
   backwards. The stage carries the shadow, not the canvas, so the canvas can
   be resized every keystroke without the browser re-rasterising a shadow. */
.sv-pv{margin:1.1rem 0 .3rem;padding:0}
.sv-pv__stage{
  display:flex;justify-content:center;padding:.9rem;
  background:linear-gradient(180deg,#F7F4ED,#EFEADF);
  border:1px solid rgba(14,43,34,.12);border-radius:6px}
.sv-pv__stage canvas{
  display:block;max-width:100%;height:auto;border-radius:3px;
  box-shadow:0 10px 26px rgba(14,43,34,.22)}
.sv-pv__cap{
  margin:.5rem 0 0;text-align:center;font-size:.82rem;
  color:rgba(14,43,34,.62)}

/* A photo product is ONE photo on ONE line item, so the multi-name quantity
   picker cannot do what it offers. Hidden rather than left doing nothing. */
.sv-perso--photo .sv-qty,
.sv-perso--photo .sv-perso__step--1,
.sv-perso--photo .sv-preview2{display:none !important}
.sv-perso--photo .sv-perso__step--1 + .sv-perso__hint{display:none !important}

/* ===== CHECKOUT, THE SAME GOLD AS ADD TO CART =========================
   Tony: "check out needs to be a different colour bright green or gold like
   add to cart". In the drawer it was pine on cream, which is the theme's own
   button colour and reads as a panel rather than the thing you press. Gold is
   already the buy colour on this store, so the cart's last button gets it and
   the hierarchy is the same everywhere: gold means this one completes the sale. */
.cart__checkout-button,
.cart-drawer__checkout,
button[name="checkout"],
.cart__ctas button[type="submit"],
a[href="/checkout"].button{
  background:var(--sv-brass) !important;
  background-image:none !important;
  color:var(--sv-pine) !important;
  border-color:var(--sv-brass) !important;
  font-weight:700 !important;
}
.cart__checkout-button:hover,
.cart-drawer__checkout:hover,
button[name="checkout"]:hover,
.cart__ctas button[type="submit"]:hover{
  background:#D4B564 !important;
  color:var(--sv-pine) !important;
  border-color:#D4B564 !important;
}
.cart__checkout-button *,
button[name="checkout"] *{color:inherit !important}

/* ===== THE BUILDER ON THE SHELF =======================================
   Two columns on a desktop: what you are buying on the left and it stays put
   while you choose, every choice on the right in the order they are made.
   One column on a phone, preview first, because the preview is the reason to
   keep scrolling. */
.sv-bd{display:none;padding:0 0 2rem}
.sv-bd.is-ready{display:block}
.sv-bd__in{
  max-width:1360px;margin:0 auto;padding:0 16px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,460px);
  gap:2.2rem;align-items:start}
@media (max-width:1000px){
  .sv-bd__in{grid-template-columns:1fr;gap:1.2rem}
}
.sv-bd__stage{position:sticky;top:88px}
@media (max-width:1000px){ .sv-bd__stage{position:static} }
.sv-bd__shot{margin:0;background:#F7F5F0;border:1px solid rgba(14,43,34,.1);
  border-radius:6px;padding:1rem;text-align:center}
.sv-bd__shot img{width:100%;height:auto;max-height:min(70vh,640px);object-fit:contain;
  display:block;margin:0 auto;border-radius:3px}
.sv-bd__cap{margin:.6rem 0 0;font-size:.85rem;color:rgba(14,43,34,.6)}

.sv-bd__panel{min-width:0}
.sv-bd__h{font-size:clamp(1.2rem,2.4vw,1.6rem);line-height:1.2;margin:0 0 .2rem}
.sv-bd__price{margin:0 0 1rem;font-size:1.3rem;font-weight:700;color:var(--sv-pine)}
.sv-bd__gst{font-size:.78rem;font-weight:400;color:rgba(14,43,34,.55)}
.sv-bd__step{
  display:flex;align-items:center;gap:.5rem;margin:1.3rem 0 .55rem;
  font-weight:700;font-size:.95rem;color:var(--sv-pine);text-transform:none}
.sv-bd__step span{
  display:inline-flex;align-items:center;justify-content:center;
  width:21px;height:21px;border-radius:50%;background:var(--sv-pine);
  color:var(--sv-bone);font-size:.72rem;flex:0 0 auto}

.sv-bd__themes{display:flex;flex-wrap:wrap;gap:.35rem;margin:0 0 .7rem}
.sv-bd__chip{
  background:#fff;border:1px solid rgba(14,43,34,.2);border-radius:999px;
  padding:.28rem .62rem;font:inherit;font-size:.8rem;line-height:1.2;
  color:var(--sv-pine);cursor:pointer}
.sv-bd__chip span{opacity:.5;font-size:.74rem;margin-left:.15rem}
.sv-bd__chip:hover{border-color:rgba(14,43,34,.45)}
.sv-bd__chip.is-on{background:var(--sv-pine);border-color:var(--sv-pine);color:var(--sv-bone)}
.sv-bd__chip.is-on span{color:rgba(243,237,225,.66);opacity:1}

.sv-bd__grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));
  gap:.4rem;max-height:min(46vh,470px);overflow-y:auto;overscroll-behavior:contain;padding:.15rem;
  border:1px solid rgba(14,43,34,.1);border-radius:4px;background:#FCFBF8}
.sv-bd__tile{
  padding:0;border:2px solid transparent;border-radius:3px;background:#fff;
  cursor:pointer;line-height:0;overflow:hidden}
.sv-bd__tile img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;display:block}
.sv-bd__tile:hover{border-color:rgba(194,160,73,.55)}
.sv-bd__tile.is-on{border-color:var(--sv-brass);box-shadow:0 0 0 2px rgba(194,160,73,.3)}
.sv-bd__more{
  margin:.5rem 0 0;background:none;border:1px solid rgba(14,43,34,.2);
  border-radius:3px;padding:.4rem .8rem;font:inherit;font-size:.83rem;
  color:var(--sv-pine);cursor:pointer}

.sv-bd__opt{margin:0 0 .6rem}
.sv-bd__lab{display:block;font-size:.83rem;font-weight:600;margin:0 0 .28rem;
  color:rgba(14,43,34,.8)}
.sv-bd__vals{display:flex;flex-wrap:wrap;gap:.35rem}
.sv-bd__val{
  background:#fff;border:1px solid rgba(14,43,34,.22);border-radius:3px;
  padding:.36rem .7rem;font:inherit;font-size:.85rem;color:var(--sv-pine);cursor:pointer}
.sv-bd__val.is-on{background:var(--sv-pine);border-color:var(--sv-pine);color:var(--sv-bone)}

.sv-bd__faces{display:grid;grid-template-columns:repeat(4,1fr);gap:.35rem}
.sv-bd__face{
  background:#fff;border:1px solid rgba(14,43,34,.22);border-radius:3px;
  padding:.5rem .3rem;font-size:1rem;color:var(--sv-pine);cursor:pointer;
  line-height:1.1;overflow:hidden;text-overflow:ellipsis}
.sv-bd__face.is-on{border-color:var(--sv-pine);box-shadow:0 0 0 1px var(--sv-pine)}

.sv-bd__input{
  width:100%;padding:.62rem .7rem;font:inherit;font-size:1rem;
  border:1px solid rgba(14,43,34,.28);border-radius:3px;background:#fff}
.sv-bd__input:focus{outline:2px solid var(--sv-brass);outline-offset:1px}
.sv-bd__count{float:right;font-weight:400;color:rgba(14,43,34,.5)}
.sv-bd__hint{margin:.35rem 0 0;font-size:.8rem;color:rgba(14,43,34,.6)}

.sv-bd__add{
  width:100%;margin:1.1rem 0 0;padding:.85rem 1rem;border:0;border-radius:3px;
  background:var(--sv-brass);color:var(--sv-pine);font:inherit;font-size:1rem;
  font-weight:700;cursor:pointer}
.sv-bd__add:hover:not(:disabled){background:#D4B564}
.sv-bd__add:disabled{opacity:.45;cursor:not-allowed}
.sv-bd__err{margin:.5rem 0 0;font-size:.85rem;color:#8C2F1E}
.sv-bd__full{margin:.6rem 0 0;font-size:.82rem}
.sv-bd__full a{color:rgba(14,43,34,.6)}

/* THE 653 TILES ARE NOT DELETED, they are put below the builder and folded
   away. Throwing away 653 internal links to tidy a page is not a trade worth
   making in September; what changes is what a person sees first. */
html.sv-has-builder .shopify-section:has(.product-grid){
  border-top:1px solid rgba(14,43,34,.12);margin-top:1.5rem}
html.sv-has-builder .shopify-section:has(.product-grid) .product-grid{
  max-height:0;overflow:hidden;opacity:0;transition:none}
html.sv-has-builder .sv-bd__browse{display:block}
html.sv-has-builder .shopify-section:has(.product-grid).sv-open .product-grid{
  max-height:none;overflow:visible;opacity:1}
.sv-bd__browse{
  display:none;max-width:1360px;margin:0 auto;padding:1rem 16px;text-align:center}
.sv-bd__browse button{
  background:none;border:1px solid rgba(14,43,34,.25);border-radius:999px;
  padding:.5rem 1.1rem;font:inherit;font-size:.9rem;color:var(--sv-pine);cursor:pointer}

/* the print preview under the product shot on the shelf builder */
.sv-bd__pv{margin:.8rem 0 0;padding:0}
.sv-bd__pvstage{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.5rem;min-height:230px;padding:1.2rem;background:#fff;
  border:1px solid rgba(14,43,34,.12);border-radius:6px}
.sv-bd__pvstage[data-slot="above"]{flex-direction:column-reverse}
.sv-bd__pvart{display:block;max-width:100%;max-height:min(30vh,280px);width:auto;height:auto;object-fit:contain}
.sv-bd__pvname{
  max-width:100%;line-height:1;white-space:nowrap;text-align:center;
  letter-spacing:.01em}

/* THE WHITE NAME, and the white square behind the artwork.
   Two faults, one card. Tony: "white text dosent preview on santa sacks".
   1. The name was drawn as flat colour on a white card, so White was
      invisible. sv-build.js now lays down the same white keyline and charcoal
      outer stroke the press lays down, so every ink reads. A light ink also
      flips the card to a dark ground, because a preview that cannot show you
      the ink is light has not previewed anything.
   2. The artwork came off the product's SECOND image, which is a JPEG, and a
      JPEG has no alpha, so a cut-out design showed as a white rectangle. The
      print files themselves are RGBA and always were - nothing was ever going
      to print a box - but the preview said otherwise. The index now carries a
      transparent PNG per design and the stage is checker-free, so what you see
      is the shape that prints. */
.sv-bd__pvstage.is-light{background:#16241E;border-color:rgba(255,255,255,.18)}
.sv-bd__pvstage.is-light .sv-bd__pvcap{color:rgba(255,255,255,.72)}

/* ===== THE SIDEWAYS SCROLL ON EVERY COLLECTION PAGE ===================
   Measured at 390 px: the document scrolled to 1180 while the body stayed at
   390, on EVERY shelf, builder or not. `.sv-shelfnav` was 1180 inside a parent
   that measured 390.

   THE CAUSE IS FLEXBOX'S AUTOMATIC MINIMUM SIZE, not the max-width. A flex
   item defaults to `min-width:auto`, which is its CONTENT's minimum, so a row
   of twenty three chips makes the nav refuse to shrink below 1180 no matter
   what the container does. The `overflow-x:auto` on the chip list was correct
   and could never fire, because the thing it was inside had already won the
   argument about its own width.

   `min-width:0` is the release valve, and it belongs on every link in the
   chain: the nav, the row and the list. One of them left at auto puts the
   whole page back to 1180. The `overflow-x:clip` on the wrapper is the belt to
   that braces - it cannot introduce a scrollbar of its own the way `hidden`
   can, and it stops anything else inside the shelf doing this again. */
.sv-shelfnav,
.sv-shelfnav__row,
.sv-shelfnav__chips,
.sv-shelfnav__here{min-width:0;max-width:100%;box-sizing:border-box}
.sv-shelfnav{width:100%}
@media(max-width:700px){
  .sv-shelfnav__chips{flex-wrap:nowrap;overflow-x:auto;min-width:0}
  .sv-bd__themes{max-width:100%}
  .sv-bd__in{overflow-x:clip}
}

/* ===== ON A PHONE THE LOOK CHIPS ARE ONE SWIPEABLE LINE ===============
   Measured at 390 px: 27 theme chips wrapped to NINE rows, 470 px of chips,
   so a shopper scrolled a screen and a half of filter names before they saw a
   single design. On the shelf that is the "site gets people lost" complaint in
   miniature, and it is the same fault the shelf nav already solved: one line,
   swipe it, with the count on each chip so the row is still informative.
   The negative margin lets the line bleed to the edges so it reads as
   scrollable rather than as a truncated list. */
@media(max-width:1000px){
  .sv-bd__themes{
    display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin:0 -16px .7rem;padding:0 16px .35rem;
    -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .sv-bd__themes::-webkit-scrollbar{display:none}
  .sv-bd__chip{flex:0 0 auto;scroll-snap-align:start}
  /* and the design grid gets more of the screen, because it is the point */
  .sv-bd__grid{max-height:min(52vh,420px);grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}
  .sv-bd__shot img{max-height:46vh}
}

/* ===== RELATED PRODUCTS THAT ARE ACTUALLY RELATED ====================
   Replaces Horizon's own recommendation rail on the product page. Hidden
   rather than removed from the template, because the theme's block is a
   merchant-editable section and deleting it in the editor is a change a
   future theme update would fight. */
[data-sv-related] ~ .shopify-section:has(product-recommendations),
.shopify-section:has(product-recommendations){display:none !important}
.sv-rel{padding:2rem 0 1rem;border-top:1px solid rgba(14,43,34,.1)}
.sv-rel__in{max-width:1360px;margin:0 auto;padding:0 16px}
.sv-rel__h{font-size:clamp(1.05rem,2.2vw,1.4rem);margin:0 0 1rem}
.sv-rel__grid{display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.sv-rel__card{display:block;text-decoration:none;color:inherit}
.sv-rel__card img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;
  background:#F7F5F0;border-radius:3px;display:block}
.sv-rel__t{display:block;margin:.45rem 0 .1rem;font-size:.85rem;line-height:1.35}
.sv-rel__p{display:block;font-size:.85rem;font-weight:700;color:var(--sv-pine)}

/* ===== THE PRODUCT ROW ON /pages/create ==============================
   The page used to be its own snippet with its own class names and NO
   stylesheet for them, so it rendered as one narrow column of cards with the
   rest of the screen empty. It is the shelf builder now, with this row on
   top, so there is one implementation of the job instead of two. */
.sv-bd__kinds{
  max-width:1360px;margin:0 auto 1.4rem;padding:0 16px;
  display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.sv-bd__kind{
  display:flex;flex-direction:column;align-items:center;gap:.3rem;
  background:#fff;border:1px solid rgba(14,43,34,.16);border-radius:5px;
  padding:.7rem .5rem .8rem;cursor:pointer;font:inherit;color:var(--sv-pine);
  text-align:center;transition:border-color .12s,box-shadow .12s}
.sv-bd__kind img,.sv-bd__kindnoimg{
  width:100%;max-width:130px;height:auto;aspect-ratio:1/1;object-fit:contain;
  background:#F7F5F0;border-radius:3px;display:block}
.sv-bd__kind:hover{border-color:rgba(194,160,73,.7)}
.sv-bd__kind.is-on{border-color:var(--sv-pine);box-shadow:0 0 0 1px var(--sv-pine)}
.sv-bd__kindt{font-weight:700;font-size:.92rem;line-height:1.2}
.sv-bd__kindp{font-size:.8rem;color:rgba(14,43,34,.62);line-height:1.3}
.sv-bd__kindp span{display:block;font-size:.74rem;opacity:.8}
@media(max-width:700px){
  .sv-bd__kinds{grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:.45rem}
  .sv-bd__kind{padding:.5rem .35rem .6rem}
}
.sv-bd__lock{display:inline-block;margin:0 .5rem .35rem 0;font-size:.82rem;
  font-weight:700;color:var(--sv-pine)}

/* the lettering colour row on the builder */
.sv-bd__inks{display:flex;flex-wrap:wrap;gap:.35rem;margin:.5rem 0 0}
.sv-bd__ink{
  display:flex;align-items:center;gap:.4rem;background:#fff;
  border:1px solid rgba(14,43,34,.22);border-radius:999px;
  padding:.3rem .66rem .3rem .36rem;font:inherit;font-size:.83rem;line-height:1;
  color:var(--sv-pine);cursor:pointer}
.sv-bd__ink::before{
  content:"";width:17px;height:17px;border-radius:50%;background:var(--i);
  box-shadow:inset 0 0 0 1px rgba(14,43,34,.3);flex:0 0 auto}
.sv-bd__ink:hover{border-color:rgba(14,43,34,.45)}
.sv-bd__ink.is-on{border-color:var(--sv-pine);box-shadow:0 0 0 1px var(--sv-pine)}

/* ===== WHERE YOU HAVE BEEN =============================================
   Tony: "search dosent help either, it should show me what i have looked at".
   A horizontal rail rather than a grid: it is a way BACK, not a shelf, and it
   must never compete with the results above it for height. */
.sv-recent{margin:2.4rem auto 0;padding:1.4rem 0 0;max-width:var(--sv-max,1600px);
  border-top:1px solid rgba(14,43,34,.12)}
.sv-recent__h{font-size:1.05rem;margin:0 0 .9rem;letter-spacing:.01em}
.sv-recent__row{display:flex;gap:.85rem;overflow-x:auto;min-width:0;
  padding-bottom:.5rem;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.sv-recent__c{flex:0 0 148px;min-width:0;scroll-snap-align:start;
  text-decoration:none;color:inherit;display:block}
.sv-recent__c img,.sv-recent__noimg{display:block;width:148px;height:148px;
  object-fit:contain;background:#fff;border:1px solid rgba(14,43,34,.10);
  border-radius:6px}
.sv-recent__t{display:block;margin:.45rem 0 .1rem;font-size:.82rem;line-height:1.25;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sv-recent__p{display:block;font-size:.82rem;opacity:.75}
.sv-recent__clear{margin-top:.6rem;background:none;border:0;padding:0;
  font-size:.78rem;opacity:.6;text-decoration:underline;cursor:pointer;color:inherit}
@media(max-width:700px){
  .sv-recent{padding-left:16px;padding-right:16px}
  .sv-recent__c{flex-basis:124px}
  .sv-recent__c img,.sv-recent__noimg{width:124px;height:124px}
}

/* ===== NARROW THE SEARCH =================================================
   Same chip language as the shelf nav, so a shopper who has learned one has
   learned both. Horizontal scroll on a phone with min-width:0 on every link in
   the chain, which is the flexbox automatic-minimum-size trap documented above
   for .sv-shelfnav. */
.sv-sn{max-width:var(--sv-max,1600px);margin:1.2rem auto .2rem;
  display:flex;align-items:center;gap:.7rem;min-width:0;box-sizing:border-box}
.sv-sn__lbl{flex:0 0 auto;font-size:.72rem;letter-spacing:.09em;
  text-transform:uppercase;opacity:.6}
.sv-sn__row{display:flex;gap:.45rem;list-style:none;margin:0;padding:0;
  min-width:0;overflow-x:auto;overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch}
.sv-sn__row li{flex:0 0 auto}
.sv-sn__c{display:inline-block;padding:.34rem .72rem;border-radius:999px;
  border:1px solid rgba(14,43,34,.18);font-size:.82rem;text-decoration:none;
  color:inherit;white-space:nowrap;background:#fff}
.sv-sn__c.is-on{background:#0E2B22;color:#fff;border-color:#0E2B22}
@media(max-width:700px){.sv-sn{padding:0 16px;flex-direction:column;
  align-items:flex-start;gap:.35rem}.sv-sn__row{max-width:100%}}

/* ===== ONE ORDER, MORE THAN ONE PARCEL =================================
   Quiet, not alarming. This is an expectation being set before the fact, and a
   yellow warning box would read as a problem with the order rather than as how
   a split shipment normally works. */
/* `margin:1.1rem 0` set the left and right margins to ZERO, so a box with a
   1180px cap on a 1900px viewport pinned itself to the far left of the window
   and read as a mistake. auto on both sides is the whole fix. Every component
   injected from the layout needs it, because they sit outside Horizon's own
   page-width wrapper and inherit no centring from it. */
.sv-parcels{border:1px solid rgba(14,43,34,.16);border-radius:8px;
  background:rgba(194,160,73,.07);padding:.9rem 1rem;margin:1.1rem auto;
  max-width:var(--sv-max,1600px);box-sizing:border-box}
.sv-parcels__h{margin:0 0 .35rem;font-weight:700;font-size:.93rem}
.sv-parcels__b{margin:0;font-size:.86rem;line-height:1.55;opacity:.9}
.sv-parcels__b a{color:inherit}
.sv-parcels--cart{margin:1.4rem auto 0}
.sv-parcels--product{margin:1rem 0 0}
@media(max-width:700px){.sv-parcels{margin-left:16px;margin-right:16px}}

/* ===== BUILT BY ========================================================
   Quiet and last. It sits under the footer's own utilities row, uses the
   footer's palette tokens rather than a hard coded colour so it follows a
   palette change, and is small enough that it reads as an attribution rather
   than as advertising on somebody else's shop. */
.sv-credit{padding:0 0 1.6rem;text-align:center;
  background:var(--color-background,transparent)}
.sv-credit p{margin:0;font-size:.72rem;letter-spacing:.04em;opacity:.55}
.sv-credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.sv-credit a:hover{opacity:.85}


/* ===== THE SUPPLIER'S DESCRIPTION IMAGES ================================
   Tony: "photos should be smaller they are too big check mobile also".

   The stocked range's descriptions come from the supplier as raw HTML with
   inline <img> tags carrying the original marketing artwork, which is often
   1500 to 2000 px wide and has its own inline width attribute. On a product
   page they blew past the text column, pushed the specification list sideways
   and, on a phone, made the page scroll horizontally.

   Capped rather than hidden: those images are the only photographs of a
   feature or a size that some of these listings have, and a shopper does want
   them. They are just not the hero.

   `!important` is deliberate and is the one place it is warranted here: the
   width is an INLINE attribute on the supplier's own markup, and nothing in a
   stylesheet outranks that without it. */
.product-information__description img,
.product-description img,
.rte img{
  max-width:100% !important;
  width:auto !important;
  height:auto !important;
  display:block;
  margin:.9rem auto;
  border-radius:6px}
@media(min-width:750px){
  .product-information__description img,
  .product-description img,
  .rte img{max-width:min(100%,560px) !important}
}
/* A supplier table (specifications, size charts) does the same thing. */
.product-information__description table,
.product-description table,
.rte table{max-width:100%;display:block;overflow-x:auto}

/* ===== ONE PAGE WIDTH, CENTRED ==========================================
   Tony: "page general layouts everything for desktop should be centred i
   believe looks better, opinion?"

   Agreed, with one distinction worth keeping. TEXT wants a measure - a column
   it is comfortable to read across - and a PRODUCT GRID wants the page width,
   because more tiles above the fold is the whole point of a grid. So both are
   centred inside ONE container rather than one of them being centred and the
   other floating: the same left and right edge down the entire page, whatever
   is in it.

   These are the components injected from layout/theme.liquid, which sit
   outside Horizon's page-width wrapper and therefore inherit nothing from it.
   Listing them together is the point: the next one added goes in this list, so
   it cannot be the one that is offset. */
.sv-parcels,
.sv-recent,
.sv-sn,
.sv-credit,
.sv-colour,
.sv-addons,
.sv-related{
  margin-left:auto;
  margin-right:auto;
  /* --sv-max, not --sv-wide. Measured on a product page at 1440: the colour
     note sat on --sv-max and lined up with Horizon's product section to within
     2 px, while the parcel note directly above it sat on --sv-wide and was
     174 px narrower. Two stacked boxes of different widths reads as a mistake
     even when both are centred. Every injected component shares the edge of
     the page it is injected into. */
  max-width:var(--sv-max,1600px);
  box-sizing:border-box}
@media(max-width:1240px){
  .sv-parcels,.sv-recent,.sv-sn,.sv-addons,.sv-related{
    padding-left:clamp(16px,4vw,32px);
    padding-right:clamp(16px,4vw,32px)}
}


/* ===== THE WIDE SCREEN =================================================
   Everything that was capped at 1080 now shares --sv-max, and the two things
   that had NO cap get one. */
.sv-facts{max-width:var(--sv-max);margin-left:auto;margin-right:auto;
  box-sizing:border-box}

/* The numbered steps were breaking "Pick the design" one word to a line,
   because four columns at minmax(230px) inside a 1080 band leave about 180 px
   once the 3.2rem number gutter is paid for, and a 1.2rem serif heading does
   not fit "design" in 180 px. Wider columns and a gutter that scales. */
.sv-steps{grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr))}
.sv-steps--num .sv-step{padding-left:clamp(2.8rem,3vw,3.6rem)}
.sv-steps--num .sv-step h3{max-width:none;text-wrap:balance}

/* Anything else that would otherwise run the full width of a 3440 monitor. */
.sv-tiles,.sv-tiles--sm,.sv-grid{max-width:var(--sv-max);
  margin-left:auto;margin-right:auto}

/* THE HEADER AT 3440. Tony: "Corporate needs to be in header it could be
   huge." At this width the 269 px logo and a 14 px nav read as a small strip
   floating on a very wide bar, which looks like a phone header stretched
   rather than a shop front. The bar keeps its full-bleed background, its
   CONTENTS come back to the same page width as everything else, and both grow
   a little so the masthead carries the width instead of swimming in it. */
@media(min-width:1800px){
  .header,
  .header-wrapper > *,
  .shopify-section-group-header-group .page-width{
    max-width:var(--sv-max);
    margin-left:auto;
    margin-right:auto}
  .header__logo img,.header__heading-logo{max-width:340px !important}
  .header__menu a,.header__inline-menu a,.header nav a{font-size:1rem}
}

/* A compact tile for the browse-by rows: a picture, a name and a count, and
   no paragraph. Twenty seven themes do not need twenty seven paragraphs. */
.sv-tiles--sm{display:grid;gap:.75rem;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
.sv-tile--sm{aspect-ratio:4/3;border-radius:8px}
.sv-tile--sm .sv-tile__cap{padding:.6rem .7rem}
.sv-tile--sm .sv-tile__cap h3{font-size:.95rem;margin:0 0 .1rem;line-height:1.2}
.sv-tile--sm .sv-tile__n{font-size:.68rem}
@media(max-width:600px){
  .sv-tiles--sm{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
}

/* ===== COLOUR ON A SCREEN IS NOT COLOUR ON THE PRODUCT ==================
   Set as a quiet note rather than a warning box. It is a statement of fact
   made before the sale, not a caveat being apologised for, and a yellow panel
   would read as a problem with the product. */
.sv-colour{max-width:var(--sv-max,1180px);margin:1rem auto;box-sizing:border-box}
.sv-colour__b{margin:0;font-size:.82rem;line-height:1.55;opacity:.72}
.sv-colour__b strong{opacity:.9}
.sv-colour--picker{margin:.5rem 0 0;max-width:none}
.sv-colour--picker .sv-colour__b{font-size:.78rem}
@media(max-width:700px){.sv-colour{padding-left:16px;padding-right:16px}}


/* ===== ONE PAGE WIDTH, FOR HORIZON TOO ==================================
   Measured in a real browser on 22 September, not reasoned about: the store's
   theme setting is `page-width-wide`, which Horizon resolves to
   `--page-width: calc(150rem + margins)` = 2,400 px. So on Tony's 3440 screen
   every Horizon section - the product page, the collection grid, the search
   results - ran 2,400 px wide, while every Santas Vault component sat at the
   1,460 px cap. Two page widths on one page is exactly the "looks bad on a wide
   screen" he was describing: the header, the facts bar and the tiles lined up
   with each other and not with the product grid underneath them.

   One width now. Horizon reads --page-width, so overriding it on the body
   brings every page-width section to the same edge as --sv-max, and the value
   moves to 1,600 px, because a product grid genuinely gains a fifth column
   there where a paragraph does not (text is capped separately at 62ch).

   Changing the THEME SETTING to Normal (1,920 px) would also have worked, but a
   setting lives in the admin where the next theme editor save can move it back
   without anyone noticing. A stylesheet rule is in the repo, with this note. */
body.page-width-wide,
body.page-width-normal{
  --page-width:calc(1600px + (var(--page-margin,40px) * 2))}

/* THE PRODUCT PHOTOS WERE TOO BIG. Tony: "photos should be smaller they are
   too big check mobile also". Horizon splits the product page 2:1, media to
   information, and lays the gallery out two images across, so every photograph
   rendered at roughly a third of the page width and a supplier gallery of eight
   images became 1,756 px of pictures before the description started. On the
   old 2,400 px page that was 800 px per photo. Rebalanced to about 55:45, which
   keeps the photographs the first thing seen and stops them being the ONLY
   thing seen. */
@media(min-width:990px){
  .product-information__grid.product-information--media-left{
    grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) !important}
  .product-information__grid.product-information--media-right{
    grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) !important}
}

/* The injected components were CENTRED after the last fix and still read as
   small islands: measured at 1440, the parcel note came out 589 px wide with
   430 px of margin either side. Same cause as the surfing Santa band - the
   wrapper around them is a flex container, so a box with only max-width and
   auto margins shrinks to its content. width:100% makes the cap the width. */
.sv-parcels,.sv-recent,.sv-sn,.sv-colour,.sv-addons,.sv-related,.sv-credit{
  width:100%}

/* ===== ONE CARD, EVERYWHERE A SHELF IS OFFERED (22 Sep 2026) =================
   Tony: "home page menus and all sections collections and products looks
   repetitive and looks clunky same stuff over and over". The old tile was a
   square photo sitting in the top of a 2:3 box under a near-black gradient, so
   every tile on the page was the same dark slab with a picture poking out of
   it, and the recipient row showed the same blanket nine times.
   The card is a plain photograph on white, the name under it, one quiet line
   of facts. No scrim, no overlay, nothing to fight the picture. Used by the
   home page and by the type tiles on every mixed shelf, so they cannot drift.
   NOT .sv-card: that name already belongs to the text cards in "Why a vault",
   whose 1.6rem padding squeezed the first version of these into slivers. */
.sv-tcs{list-style:none;margin:0;padding:0;display:grid;gap:1rem;
  grid-template-columns:repeat(var(--cols,6),minmax(0,1fr))}
.sv-tcs > li{margin:0;padding:0;list-style:none;min-width:0}
/* the column count is set per shelf from the number of tiles, so eight types
   are two even rows of four rather than seven and a straggler */
@media(max-width:1100px){.sv-tcs{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:820px){.sv-tcs{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sv-tcs--lg{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.25rem}
.sv-tc{display:flex;flex-direction:column;height:100%;text-decoration:none;color:var(--sv-pine,#0E2B22);
  background:#fff;border:1px solid rgba(14,43,34,.12);border-radius:10px;overflow:hidden;
  transition:border-color .15s,box-shadow .15s,transform .15s}
.sv-tc:hover{border-color:#735D25;box-shadow:0 6px 18px rgba(14,43,34,.10);transform:translateY(-2px)}
.sv-tc__img{display:block;aspect-ratio:1/1;background:#F7F5F0;overflow:hidden}
.sv-tc__img img{display:block;width:100%;height:100%;object-fit:contain;padding:6%}
.sv-tc--art .sv-tc__img{background:#F3EDE1}
.sv-tc--art .sv-tc__img img{padding:12%}
.sv-tc__t{display:block;padding:.7rem .8rem .15rem;font-weight:600;font-size:1rem;line-height:1.25}
.sv-tc__d{display:block;padding:0 .8rem .2rem;font-size:.85rem;line-height:1.45;color:rgba(14,43,34,.75)}
.sv-tc__n{display:block;margin-top:auto;padding:.2rem .8rem .8rem;font-size:.78rem;color:#735D25;letter-spacing:.01em}
@media(max-width:620px){
  .sv-tcs,.sv-tcs--lg{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
  .sv-tc__t{font-size:.92rem;padding:.55rem .6rem .1rem}
  .sv-tc__d{display:none}
  .sv-tc__n{padding:.15rem .6rem .6rem;font-size:.72rem}
}

/* the type tiles on a mixed shelf, and the grid folded below them */
.sv-types{max-width:var(--sv-max);width:100%;margin:0 auto;padding:1.6rem clamp(1rem,3vw,2rem) .5rem}
.sv-types__h{font-size:clamp(1.15rem,2.4vw,1.5rem);margin:0 0 1rem}
.sv-types__all{text-align:center;padding:1.4rem 0 .4rem}
.sv-types__all button{background:none;border:1px solid rgba(14,43,34,.25);border-radius:999px;
  padding:.55rem 1.2rem;font:inherit;font-size:.9rem;color:var(--sv-pine,#0E2B22);cursor:pointer}
/* Folded until opened. The filters and the page-size bar fold with the list and
   come back with it: a shopper who opens the list, or picks 100 per page, is
   browsing the list and wants its tools. */
html.sv-has-types .shopify-section:has(.product-grid):not(.sv-open) .product-grid,
html.sv-has-types .shopify-section:has(.product-grid):not(.sv-open) .pagination,
html.sv-has-types .shopify-section:has(.product-grid):not(.sv-open) .sv-perpage,
html.sv-has-types .shopify-section:has(.product-grid):not(.sv-open) [class*="facets"]{display:none}
html.sv-has-types .sv-shelfnav{display:none}

/* The collection hero was 440 px of gradient on a desktop, so the first thing a
   shopper saw on For Her was a green slab and the products started below the
   fold. Tony: "photos should be smaller they are too big". Now the type tiles
   are on the first screen at 1440 x 900. */
.sv-colhero{min-height:clamp(200px,19vw,300px) !important}

/* the colour and style preview drawn over the first product photo */
canvas.sv-gcv{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  background:#fff;z-index:2;pointer-events:none;border-radius:inherit}
.sv-bd__shot{position:relative}
.sv-bd__shot canvas.sv-gcv{background:#F7F5F0}

/* build 1790074191 */


/* ==========================================================================
   CONTRAST, 23 Sep 2026 (0.25.0). Lighthouse and axe on seven templates at
   phone and desktop width found small text under the WCAG AA 4.5:1 floor on
   nearly every page. Measured values before the fix:
     brass-dim #8F7532 labels on white/bone      4.41 / 3.78
     countdown units ("days", "hrs") on bone      2.02
     builder price note, chip counts, caption,
       character count, hint, full-page link     2.99 to 4.04
     footer copyright and studio credit           3.93 / 3.45
     text cards on the deep pine band             2.67 (a half-white box
       under bone text: the pine-band rule never covered --deep)
   --sv-brass-dim moves from #8F7532 to #735D25 (5.4:1 on bone, 6.3:1 on
   white); the pale pine inks move to #4F5F57 (5.8:1 on bone). Nothing
   changes on the dark bands, whose own !important rules are more specific.
   ========================================================================== */
.sv-band--deep .sv-card{background:rgba(243,237,225,.05)}
.sv-band--deep .sv-card p{color:rgba(243,237,225,.82)}
.sv-cutoff__clock span{color:#6E5A22 !important}
.sv-bd__cap,.sv-bd__gst,.sv-bd__count,.sv-bd__hint,.sv-bd__full a{color:#4F5F57}
.sv-bd__chip span{opacity:.85}
.sv-bd__kindp{color:#4F5F57}
.sv-bd__kindp span{opacity:1}
footer .footer-utilities__text,footer .footer-utilities__text a{color:#4F5F57}
.sv-credit p{opacity:1;color:#4F5F57}
.sv-bd__full a{display:inline-block;padding:.4rem 0;min-height:24px}