/* Black Friday 2026 (block 88, inc/black-friday-look.php). Black for the sale (Francis, 30 Oct: the strip "should be
   black"), the sale orange, and confetti in DESIGN.md's orange, star gold, orange tint, cream and white.
   Loaded only while the sale shows (live and in the dates, a tester, or ?look=blackfriday). */

.shym-bf-wrap,.shym-bf-page,.shym-bfpop,.shym-bf-line,.shym-bf-home,.shym-hd a.shym-hd__bf{
  --bf-black:#000;--bf-ink:#26222F;--bf-body:#4A4451;--bf-muted:#645D6A;--bf-cream:#EEE9E5;--bf-white:#FFFFFF;--bf-orange:#B5412A;
  --bf-font:"Albert Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* The sale pill, DESIGN.md badge-sale */
.shym-bf-pill{display:inline-flex;align-items:center;flex:none;height:26px;padding:0 10px;border-radius:999px;background:#B5412A;color:#fff;font:600 12.5px/1 "Albert Sans",system-ui,sans-serif;white-space:nowrap}

/* Confetti: three groups that twinkle slowly, still for reduced motion */
.shym-bf-confetti{display:block;pointer-events:none}
.shym-bf-confetti g:nth-child(2){animation:shymBfTwinkle 3.4s ease-in-out infinite}
.shym-bf-confetti g:nth-child(3){animation:shymBfTwinkle 4.6s ease-in-out .9s infinite}
@keyframes shymBfTwinkle{0%,100%{opacity:1}50%{opacity:.3}}

/* Buttons, DESIGN.md primary as on a photo (its hover rises in Cream with black words) and a white outline */
a.shym-bf-btn,a.shym-bf-btn:visited{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:999px;background:#B5412A;color:#fff;font:600 15px/1 "Albert Sans",system-ui,sans-serif;text-decoration:none;transition:color .3s,transform .15s}
a.shym-bf-btn:before{content:"";position:absolute;z-index:-1;left:-10%;bottom:0;width:120%;height:175%;border-radius:50% 50% 0 0/32% 32% 0 0;background:#EEE9E5;transform:translateY(101%);transition:transform .65s cubic-bezier(.6,.05,.2,1);pointer-events:none}
a.shym-bf-btn:hover,a.shym-bf-btn:focus-visible{color:#000}
a.shym-bf-btn:hover:before,a.shym-bf-btn:focus-visible:before{transform:translateY(0)}
a.shym-bf-btn:active{transform:scale(.97)}
a.shym-bf-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
a.shym-bf-btn svg{width:18px;height:18px;flex:none}
a.shym-bf-btn--ghost,a.shym-bf-btn--ghost:visited{background:transparent;box-shadow:inset 0 0 0 1.5px #fff}
a.shym-bf-btn--ghost:before{background:#fff}

/* 1. The top strip. The header's bar turns black and thicker, the promo sits on the left with faint confetti close
      around it (Francis, 30 Oct: "more subtle", "only in close proximity", "aligned to the left"). Visitors on New
      Zealand time keep the plain plum bar with the NZ store link. */
html:not(.shym-nz) body.shym-look.shym-bf-strip{--shym-bar-h:52px}
.shym-hd .shym-hd__bar:has(.shym-hd__bf){position:relative;overflow:hidden}
html:not(.shym-nz) .shym-hd .shym-hd__bar:has(.shym-hd__bf){background:#000}
.shym-hd .shym-hd__bar-in:has(.shym-hd__bf) .shym-hd__facts{display:none}

.shym-hd a.shym-hd__bf,.shym-hd a.shym-hd__bf:visited{flex:1 1 auto;display:flex;justify-content:flex-start;min-width:0;height:100%;align-items:center;color:#fff;text-decoration:none}
html.shym-nz .shym-hd a.shym-hd__bf{display:none}
.shym-hd .shym-hd__bf-zone{position:relative;display:inline-flex;align-items:center;height:100%;min-width:0;padding:0 64px 0 0}
.shym-hd .shym-bf-confetti--bar{position:absolute;top:0;bottom:0;left:-40px;right:0;width:calc(100% + 40px);height:100%;z-index:0;opacity:.6}
.shym-hd .shym-hd__bf-in{position:relative;z-index:1;display:inline-flex;align-items:center;gap:12px;min-width:0;height:40px;padding:0 6px 0 0;border-radius:999px;background:#000;box-shadow:0 0 0 6px #000;font:500 13px/1 var(--bf-font);white-space:nowrap}
.shym-hd .shym-hd__bf-name{font:700 15px/1 var(--bf-font);letter-spacing:-.01em;color:#fff}
.shym-hd .shym-hd__bf-count{display:inline-flex;align-items:center;gap:4px}
.shym-hd .shym-hd__bf-count i{margin-right:4px;font-style:normal;color:rgba(255,255,255,.72)}
.shym-hd .shym-hd__bf-chip{display:inline-flex;align-items:center;height:28px;padding:0 8px;border-radius:12px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);font:600 13px/1 var(--bf-font);color:rgba(255,255,255,.72);font-variant-numeric:tabular-nums}
.shym-hd .shym-hd__bf-chip b{font-weight:700;color:#fff}
.shym-hd .shym-hd__bf-go{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;border-radius:999px;background:#fff;color:#000;font:600 13px/1 var(--bf-font);transition:background-color .2s}
.shym-hd .shym-hd__bf-go svg{width:14px;height:14px;transition:transform .2s}
.shym-hd a.shym-hd__bf:hover .shym-hd__bf-go,.shym-hd a.shym-hd__bf:focus-visible .shym-hd__bf-go{background:#EEE9E5}
.shym-hd a.shym-hd__bf:hover .shym-hd__bf-go svg{transform:translateX(3px)}
.shym-hd a.shym-hd__bf:focus-visible{outline:none}
.shym-hd a.shym-hd__bf:focus-visible .shym-hd__bf-in{outline:2px solid #fff;outline-offset:4px}
.shym-hd a.shym-hd__bf .is-short{display:none}
@media (max-width:1140px){
  .shym-hd .shym-hd__bf-count i{display:none}
}
@media (max-width:1024px){
  html:not(.shym-nz) body.shym-look.shym-bf-strip{--shym-bar-h:46px}
  .shym-hd .shym-hd__bf-go{display:none}
}
@media (max-width:767px){
  .shym-hd .shym-hd__bf-zone{padding-right:36px}
  .shym-hd .shym-hd__bf-in{gap:8px;height:32px;box-shadow:0 0 0 4px #000}
  .shym-hd .shym-hd__bf-name{font-size:14px}
  .shym-hd a.shym-hd__bf .is-long{display:none}
  .shym-hd a.shym-hd__bf .is-short{display:inline}
  .shym-hd .shym-hd__bf-time{color:rgba(255,255,255,.88);font-variant-numeric:tabular-nums}
}

/* 2. The card badge: black, "Black Friday", with the orange "6% Off" inside. On a phone card, the orange alone. */
.shym-card__badge.shym-card__badge--bf{gap:6px;padding:0 3px 0 10px;background:#000;color:#fff;box-shadow:none}
.shym-card__bf-off{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;background:#B5412A;color:#fff}
@media (max-width:767px){
  .shym-card__badge.shym-card__badge--bf{padding:0 8px;background:#B5412A}
  .shym-card__bf-name{display:none}
  .shym-card__bf-off{height:auto;padding:0;background:none}
}

/* 3. The line under the price on the product page */
.shym-bf-line{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;flex:none;align-self:stretch;width:100%;max-width:100%;margin:12px 0 4px;font:400 14px/1.5 var(--bf-font);color:var(--bf-body)}
.shym-bf-line b{color:var(--bf-orange);font-weight:700}

/* The countdown boxes, on black (a box on a dark sheet is white at 6 to 8% with a white edge at 16%) */
.shym-bf-count{display:flex;gap:10px;margin:24px 0 0}
.shym-bf-count__cell{flex:1 1 0;min-width:0;max-width:96px;padding:12px 6px 11px;border-radius:14px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);text-align:center}
.shym-bf-count__cell b{display:block;font:700 30px/1 var(--bf-font,"Albert Sans",sans-serif);letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
.shym-bf-count__cell i{display:block;margin-top:7px;font:600 12.5px/1 var(--bf-font,"Albert Sans",sans-serif);font-style:normal;color:rgba(255,255,255,.72)}

/* 4. The pop-up */
.shym-bfpop{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.62);font-family:var(--bf-font)}
.shym-bfpop[hidden]{display:none !important}
.shym-bfpop__card{position:relative;width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto;padding:52px 44px 34px;border-radius:28px;background:#000;color:#fff;animation:shymBfRise .6s cubic-bezier(.16,1,.3,1) both}
.shym-bfpop__card:focus{outline:none}
.shym-bfpop .shym-bf-confetti--pop{position:absolute;top:0;left:0;width:100%;height:44px;z-index:0}
.shym-bfpop__main,.shym-bfpop__join,.shym-bfpop__done{position:relative;z-index:1}
.shym-bfpop__x{position:absolute;top:16px;right:16px;z-index:2;display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;transition:background-color .2s,color .2s}
.shym-bfpop .shym-bfpop__x,.shym-bfpop .shym-bfpop__x:focus{outline:none;border:0;box-shadow:none}
.shym-bfpop .shym-bfpop__x:hover,.shym-bfpop .shym-bfpop__x:focus-visible{background:#fff;color:#000}
.shym-bfpop .shym-bfpop__x:focus-visible{outline:2px solid #fff;outline-offset:3px}
.shym-bfpop .shym-bfpop__kick{margin:0;font:700 clamp(26px,2.8vw,30px)/1.12 var(--bf-font);letter-spacing:-.02em;color:#fff}
/* the 6% is the hero of the pop-up (Francis, 30 Oct: "emphasize the 6% Off a bit more"), solid 6% and outline "off"
   as on the home page's moving words */
.shym-bfpop .shym-bfpop__h{display:flex;align-items:baseline;gap:.18em;margin:6px 0 16px;padding:0;font:600 clamp(84px,15vw,132px)/.9 var(--bf-font);letter-spacing:-.05em;color:#fff}
.shym-bfpop .shym-bfpop__h .is-off{color:transparent;-webkit-text-stroke:2px #fff}
.shym-bfpop .shym-bfpop__lede{margin:0;font:400 16px/1.65 var(--bf-font);color:rgba(255,255,255,.85)}
.shym-bfpop a.shym-bf-btn{margin-top:26px}
.shym-bfpop__join,.shym-bfpop__done{margin-top:28px;padding-top:24px;border-top:1px solid rgba(255,255,255,.16)}
.shym-bfpop .shym-bfpop__join-h{margin:0 0 12px;font:600 17px/1.3 var(--bf-font);letter-spacing:-.01em;color:#fff}
.shym-bfpop .shym-bfpop__fine{margin:10px 0 0;font:400 14px/1.5 var(--bf-font);color:rgba(255,255,255,.72)}
.shym-bfpop__form{min-height:46px}
.shym-bfpop[data-state="done"] .shym-bfpop__join{display:none}
@keyframes shymBfRise{from{opacity:0;transform:translateY(22px)}}
@media (max-width:640px){
  .shym-bfpop{align-items:flex-end;padding:12px}
  .shym-bfpop__card{padding:46px 22px 24px}
  .shym-bfpop .shym-bfpop__h{font-size:clamp(72px,24vw,104px)}
  .shym-bfpop__x{top:12px;right:12px}
  .shym-bfpop a.shym-bf-btn{display:flex;width:100%}
  .shym-bf-count{gap:8px}
  .shym-bf-count__cell b{font-size:26px}
}

/* 5. The Black Friday page. A landing page, so the story sizes are allowed (DESIGN.md section 7). The top runs the
      full width of the screen (Francis, 30 Oct, "lets try"), with a giant 6% off on the right. */
.shym-bf-wrap{font-family:var(--bf-font)}
.shym-bf-page{max-width:1365px;margin:0 auto;padding:0 24px 96px;font-family:var(--bf-font);color:var(--bf-body)}
.shym-bf-page__hero{position:relative;overflow:hidden;border-radius:0 0 28px 28px;background:#000;color:#fff}
.shym-bf-page__hero .shym-bf-confetti--page{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.shym-bf-page__hero-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:48px;max-width:1365px;margin:0 auto;padding:clamp(56px,7vw,104px) 24px clamp(56px,7vw,96px)}
.shym-bf-page__say{max-width:640px}
.shym-bf-page__hero .shym-bf-page__h1{margin:0 0 18px;padding:0;font:600 clamp(46px,7.6vw,128px)/.94 var(--bf-font);letter-spacing:-.045em;color:#fff}
.shym-bf-page__hero .shym-bf-page__lead{max-width:540px;margin:0;font:400 17px/1.6 var(--bf-font);color:rgba(255,255,255,.85)}
.shym-bf-page__hero .shym-bf-page__quote{max-width:540px;margin:10px 0 0;font:500 17px/1.6 var(--bf-font);color:#fff}
.shym-bf-page__hero .shym-bf-page__quote a,.shym-bf-page__hero .shym-bf-page__quote a:visited{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.shym-bf-page__hero .shym-bf-page__quote a:hover,.shym-bf-page__hero .shym-bf-page__quote a:focus-visible{text-decoration-thickness:2px}
.shym-bf-page__hero .shym-bf-count{max-width:420px;margin-top:32px}
.shym-bf-page__hero .shym-bf-page__big{display:flex;flex-direction:column;align-items:flex-end;margin:0;padding:0;font:600 clamp(84px,15vw,260px)/.84 var(--bf-font);letter-spacing:-.05em;color:#fff}
.shym-bf-page__big .is-off{color:transparent;-webkit-text-stroke:2px #fff}
.shym-bf-page__chips{display:flex;flex-wrap:wrap;gap:8px;margin:32px 0 0}
.shym-bf-page a.shym-bf-page__chip,.shym-bf-page a.shym-bf-page__chip:visited{display:inline-flex;align-items:center;height:32px;padding:0 13px;border-radius:999px;background:var(--bf-cream);color:var(--bf-ink);font:500 13px/1 var(--bf-font);text-decoration:none;transition:background-color .2s,color .2s}
.shym-bf-page a.shym-bf-page__chip:hover,.shym-bf-page a.shym-bf-page__chip:focus-visible{background:#000;color:#fff}
.shym-bf-page__group{margin-top:64px;scroll-margin-top:140px}
.shym-bf-page .shym-bf-page__h2{margin:0 0 24px;padding:0;font:700 clamp(26px,2.8vw,30px)/1.12 var(--bf-font);letter-spacing:-.02em;color:var(--bf-ink)}
.shym-bf-page .shym-bf-page__fine{max-width:760px;margin:64px 0 0;font:400 14px/1.5 var(--bf-font);color:var(--bf-muted)}
@media (max-width:767px){
  .shym-bf-page{padding:0 12px 56px}
  .shym-bf-page__hero{border-radius:0 0 28px 28px}
  .shym-bf-page__hero-in{grid-template-columns:minmax(0,1fr);gap:20px;padding:40px 16px 36px}
  .shym-bf-page__hero .shym-bf-confetti--page{opacity:.4}
  .shym-bf-page__hero .shym-bf-page__h1{font-size:clamp(42px,12vw,64px)}
  .shym-bf-page__hero .shym-bf-page__big{flex-direction:row;align-items:baseline;gap:.16em;font-size:clamp(72px,24vw,120px);order:-1}
  .shym-bf-page__group{margin-top:44px}
  .shym-bf-page__chips{margin-top:24px}
}

/* 7. The home page's Black Friday section: a black sheet with 28px top corners that slides up over the opening film
      (DESIGN.md section 7, dark sheet), a band of big moving words, then the offer, the countdown and four deals. */
.shym-bf-home{position:relative;z-index:1;overflow:hidden;border-radius:28px 28px 0 0;background:#000;color:#fff;padding:clamp(48px,6vw,96px) 0 calc(clamp(56px,6vw,96px) + 28px);font-family:var(--bf-font)}
.shym-bf-home + .shym-story__sheet{margin-top:-28px}
/* only in the band of moving words, never over the heading */
.shym-bf-home__near{position:absolute;top:0;left:0;width:100%;height:calc(clamp(48px,6vw,96px) + clamp(84px,15vw,260px) + 24px);z-index:0;pointer-events:none}
.shym-bf-home .shym-bf-confetti--home{width:100%;height:100%}
/* depth: soft glows, a giant faint 6%, and a far layer of blurred confetti (Francis, 30 Oct: "add depth") */
.shym-bf-home__glow{position:absolute;z-index:0;width:min(70vw,1100px);aspect-ratio:1;border-radius:50%;pointer-events:none}
.shym-bf-home__glow.is-a{top:-30%;right:-18%;background:radial-gradient(closest-side,rgba(181,65,42,.42),rgba(181,65,42,0))}
.shym-bf-home__glow.is-b{bottom:-35%;left:-22%;background:radial-gradient(closest-side,rgba(246,187,6,.16),rgba(246,187,6,0))}
.shym-bf-home__ghost{position:absolute;z-index:0;right:-2vw;top:clamp(280px,30vw,520px);font:600 clamp(260px,38vw,640px)/.8 var(--bf-font);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.09);pointer-events:none;user-select:none}
.shym-bf-home__far{position:absolute;inset:0 0 auto 0;height:min(1100px,90%);z-index:0;pointer-events:none}
.shym-bf-home .shym-bf-confetti--far{width:100%;height:100%;filter:blur(3px);opacity:.38}
.shym-bf-home [data-bf-depth]{will-change:transform}
.shym-bf-home__run{position:relative;z-index:1;overflow:hidden}
.shym-bf-home__track{display:flex;width:max-content;animation:shymBfRun 48s linear infinite;will-change:transform}
.shym-bf-home__set{display:flex;align-items:center;flex:none;gap:.28em;padding-right:.28em;font:600 clamp(84px,15vw,260px)/1 var(--bf-font);letter-spacing:-.05em;white-space:nowrap;color:#fff}
.shym-bf-home__set span:nth-of-type(2n){color:transparent;-webkit-text-stroke:2px #fff}
.shym-bf-home__star{flex:none;width:.14em;height:.14em;border-radius:999px;background:#B5412A}
.shym-bf-home__star.is-gold{background:#F6BB06}
@keyframes shymBfRun{to{transform:translateX(-50%)}}
.shym-bf-home__wrap{position:relative;z-index:1;max-width:1365px;margin:clamp(40px,5vw,72px) auto 0;padding:0 24px}
.shym-bf-home__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:48px;align-items:end}
.shym-bf-home .shym-bf-home__eyebrow{margin:0;font:600 12.5px/1.2 var(--bf-font);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.shym-bf-home .shym-bf-home__h2{margin:14px 0 18px;padding:0;max-width:12ch;font:600 clamp(40px,6.2vw,88px)/.96 var(--bf-font);letter-spacing:-.04em;color:#fff}
.shym-bf-home .shym-bf-home__lead{max-width:460px;margin:0;font:400 17px/1.6 var(--bf-font);color:rgba(255,255,255,.85)}
.shym-bf-home__btns{margin-top:28px}
.shym-bf-home .shym-bf-count{margin:0}
.shym-bf-home .shym-bf-count__cell{max-width:none;padding:18px 6px 16px;border-radius:18px}
.shym-bf-home .shym-bf-count__cell b{font-size:clamp(30px,3.6vw,40px)}
.shym-bf-home__cards{margin-top:clamp(40px,5vw,64px)}
/* the switch: the best sellers' switch, on black (a box on a dark sheet: white at 8% with a white edge at 16%) */
.shym-bf-home__switch-row{display:flex;justify-content:flex-start;margin:0 0 28px}
.shym-bf-switch{position:relative;display:inline-flex;gap:4px;padding:6px;border-radius:999px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.shym-bf-switch__plate{position:absolute;top:6px;left:0;height:calc(100% - 12px);width:var(--w,0);border-radius:999px;background:#fff;transform:translateX(var(--x,0));opacity:0}
.shym-bf-switch.has-plate .shym-bf-switch__plate{opacity:1}
.shym-bf-switch.is-ready .shym-bf-switch__plate{transition:transform .45s cubic-bezier(.2,.8,.2,1),width .45s cubic-bezier(.2,.8,.2,1)}
.shym-bf-home button.shym-bf-tab,.shym-bf-home button.shym-bf-tab:hover,.shym-bf-home button.shym-bf-tab:focus{position:relative;z-index:1;height:44px;margin:0;padding:0 22px;border:0;border-radius:999px;background:transparent;box-shadow:none;font:500 15px/1 var(--bf-font);letter-spacing:normal;text-transform:none;color:rgba(255,255,255,.78);white-space:nowrap;cursor:pointer;transition:color .25s}
.shym-bf-home button.shym-bf-tab:hover{color:#fff}
.shym-bf-home button.shym-bf-tab.is-on{font-weight:600;color:#000}
.shym-bf-switch:not(.has-plate) button.shym-bf-tab.is-on{background:#fff}
.shym-bf-home button.shym-bf-tab:focus-visible{outline:2px solid #fff;outline-offset:2px}
.shym-bf-home__deals{animation:shymBfFade .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes shymBfFade{from{opacity:0;transform:translateY(8px)}}
.shym-bf-home__more{display:flex;justify-content:center;margin-top:32px}
@media (max-width:767px){
  .shym-bf-home{padding:40px 0 calc(48px + 28px)}
  .shym-bf-home__set{font-size:clamp(72px,24vw,120px)}
  .shym-bf-home__near{height:calc(40px + clamp(72px,24vw,120px) + 16px)}
  .shym-bf-home__far{display:none}
  .shym-bf-home__ghost{top:auto;bottom:40%;font-size:clamp(200px,70vw,340px)}
  .shym-bf-home__switch-row{margin-bottom:20px}
  .shym-bf-switch{display:flex;width:100%}
  .shym-bf-home button.shym-bf-tab,.shym-bf-home button.shym-bf-tab:hover,.shym-bf-home button.shym-bf-tab:focus{flex:1 1 auto;padding:0 8px;font-size:14px}
  .shym-bf-home__wrap{padding:0 12px;margin-top:32px}
  .shym-bf-home__head{grid-template-columns:minmax(0,1fr);gap:28px}
  .shym-bf-home .shym-bf-home__h2{font-size:clamp(38px,11vw,56px)}
  .shym-bf-home a.shym-bf-btn{display:flex;width:100%}
}

@media (prefers-reduced-motion:reduce){
  .shym-bfpop__card,.shym-bf-confetti g,.shym-bf-home__track,.shym-bf-home__deals{animation:none !important}
  .shym-bf-home [data-bf-depth]{transform:none !important}
}