/* ==========================================================================
   moonson — COMPONENTS
   --------------------------------------------------------------------------
   Everything Theme Options cannot express. Ported from the EPK stylesheet
   (site/assets/css/epk.css) and re-pointed at Impreza's markup.

   Rule for this file: it styles, it never writes copy. Every string on the
   site stays in the editor.

   Impreza class names used here — .w-btn / .w-btn-label / .w-nav-anchor /
   .w-nav-title / .l-section — come from US Core. Each rule also carries a
   plain-HTML selector, so if a class ever changes the styling degrades to
   "less complete", not "broken".
   ========================================================================== */

/* ==========================================================================
   1 — Base
   ========================================================================== */
body{
  background:var(--m-bg);
  color:var(--m-fg);
  font-family:var(--m-sans);
  font-weight:200;
  -webkit-font-smoothing:antialiased;
}

::selection{background:var(--m-red);color:#fff}

:focus-visible{outline:2px solid var(--m-red-hot);outline-offset:3px}

/* Impreza rounds images, cards and thumbnails off --site-border-radius, which
   tokens.css already zeroes. These are the few places it hardcodes a radius. */
img,.w-image img,.w-grid-item img,.wp-post-image{border-radius:0}

hr,.w-separator{border-color:var(--m-line)}

/* ==========================================================================
   2 — Signature type
   --------------------------------------------------------------------------
   Add these in WPBakery under Extra class name / Design Options → CSS class.
   ========================================================================== */

/* [ bracket ] — the EPK's signature title. The brackets are generated, so you
   type the words alone in the editor and they stay a heading for SEO and for
   the outline. Where you would rather type them yourself (the home page title
   "[the future is hybrid]" already does), use .m-red instead. */
.m-bracket{
  font-family:var(--m-mono);
  font-weight:400;
  color:var(--m-red);
  letter-spacing:-.01em;
  line-height:1;
  display:inline-flex;
  align-items:baseline;
  gap:.06em;
  text-transform:lowercase;
  white-space:nowrap;
}
.m-bracket::before{content:'['}
.m-bracket::after{content:']'}
.m-bracket::before,.m-bracket::after{
  color:var(--m-red);
  opacity:.9;
  display:inline-block;
  transition:transform .5s var(--m-ease),opacity .5s var(--m-ease);
}
/* The brackets spread on hover — the one piece of motion the EPK repeats
   everywhere, and the cheapest way to make a static heading feel alive. */
.m-bracket:hover::before{transform:translateX(-.14em)}
.m-bracket:hover::after{transform:translateX(.14em)}

/* Small mono label above a block: TRACKS, VERSAND, AUSVERKAUFT. */
.m-eyebrow{
  font-family:var(--m-mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--m-fg-3);
  line-height:1.4;
}
.m-eyebrow b,.m-eyebrow strong{color:var(--m-red);font-weight:400}

.m-mono{font-family:var(--m-mono);font-weight:400}
.m-red{color:var(--m-red)}
.m-faded{color:var(--m-fg-3)}

/* Section head: red mono title left, grey mono label right, hairline under.
   Put .m-sec-h on a row holding a heading and one text block. */
.m-sec-h{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:22px;
  flex-wrap:wrap;
  border-bottom:1px solid var(--m-line);
  padding-bottom:16px;
  margin-bottom:clamp(34px,5vw,60px);
}
.m-sec-h h1,.m-sec-h h2,.m-sec-h h3{
  font-family:var(--m-mono);
  font-weight:400;
  font-size:clamp(20px,2.4vw,32px);
  color:var(--m-red);
  text-transform:lowercase;
  letter-spacing:-.01em;
  margin:0;
}
.m-sec-h p{
  color:var(--m-fg-3);
  font-family:var(--m-mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin:0;
}

/* ==========================================================================
   3 — Buttons
   --------------------------------------------------------------------------
   The EPK button is a hairline box that fills red from the bottom on hover
   (.btn / .btn::before). Two different mechanisms are needed to reproduce it,
   because the markup is not uniform:

     a) <a> and <button> — a ::before holds the fill. The host needs
        isolation:isolate: without a stacking context of its own, a ::before
        at z-index:-1 escapes and paints behind the PAGE background, so the
        fill is simply invisible. Impreza's .w-btn wraps its text in
        .w-btn-label, which gets lifted instead; a bare <button> has no such
        wrapper, so there the fill goes behind the text at z-index:-1.

     b) <input type=submit> — replaced elements render no pseudo-elements at
        all. WooCommerce uses exactly this for #place_order and input.button,
        i.e. the single most important button in the shop. Those get the same
        motion from a background-image whose size animates instead.
   ========================================================================== */

/* --- shared shell --------------------------------------------------------
   .w-btn is doubled and prefixed with the body class: Impreza prints
   .us-btn-style_N{border-radius;font;text-transform;…} in an inline <style>
   that lands AFTER this file, so at equal specificity it wins. */
.moonson .w-btn.w-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce #place_order,
input[type=submit],
button[type=submit]{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  font-family:var(--m-mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:.2em;
  text-transform:uppercase;
  line-height:1;
  padding:15px 26px;
  border:1px solid var(--m-line);
  border-radius:0;
  background-color:transparent;
  color:var(--m-fg);
  transition:color .3s var(--m-ease),border-color .3s var(--m-ease);
}

.moonson .w-btn.w-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #place_order:hover,
input[type=submit]:hover,
button[type=submit]:hover{border-color:var(--m-red);color:#000}

/* --- a) pseudo-element fill: <a> and <button> ---------------------------- */
.w-btn::before,
.woocommerce a.button::before,
.woocommerce button.button::before,
button[type=submit]::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;                 /* contained by isolation:isolate on the host */
  background:var(--m-red);
  transform:translateY(101%);
  transition:transform .4s var(--m-ease);
}
.w-btn:hover::before,
.woocommerce a.button:hover::before,
.woocommerce button.button:hover::before,
button[type=submit]:hover::before{transform:translateY(0)}

.w-btn-label{position:relative;z-index:1}

/* Impreza draws a button's border on the very ::before we use for the fill:
   2px, colour inherited from the host, and on hover the host switches to the
   style's own hover border (#F1EFDD on style_1). Left alone, that pale frame
   rides up with the red fill and sits around it as a white rim.

   So: the ::before carries no border at all — the hairline lives on the host
   — and the style's variables are pointed at our tokens, which is quieter
   than out-specifying  .no-touch .us-btn-style_N:hover  rule by rule. The
   doubled class is only there to beat the inline <style> Impreza prints for
   each button style, whatever order the two end up in. */
.w-btn.w-btn{
  --btn-border-width:0px;
  --btn-border-color:var(--m-line);
  --btn-hover-border-color:var(--m-red);
  --btn-hover-background:transparent;
}
.w-btn.w-btn::before{border:0;border-image:none}
/* Impreza forces the hover text to #fff with !important; on the red fill the
   EPK button reads black. */
.moonson .w-btn.w-btn:hover{color:#000!important;border-color:var(--m-red)}
.moonson .w-btn.w-btn.us-btn-style_2:hover,
.moonson .w-btn.w-btn.m-btn-fill:hover{color:#000!important}

/* --- b) background fill: <input type=submit> ----------------------------- */
input[type=submit],
.woocommerce input.button,
.woocommerce #respond input#submit{
  background-image:linear-gradient(var(--m-red),var(--m-red));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:100% 0;
  transition:background-size .4s var(--m-ease),color .3s var(--m-ease),border-color .3s var(--m-ease);
}
input[type=submit]:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover{background-size:100% 100%}

/* --- Primary call to action ---------------------------------------------
   Solid red, fills white. Impreza's style_2, plus .m-btn-fill for anything
   you want to promote by hand. */
.moonson .w-btn.w-btn.us-btn-style_2,.moonson .w-btn.w-btn.m-btn-fill,.m-btn-fill,
.woocommerce a.button.alt,.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce #place_order{
  border-color:var(--m-red);
  background-color:var(--m-red);
  color:#fff;
}
.w-btn.us-btn-style_2::before,.m-btn-fill::before,
.woocommerce a.button.alt::before,.woocommerce button.button.alt::before,
.woocommerce .single_add_to_cart_button::before{background:#fff}
/* the input-flavoured ones swap the gradient, not a pseudo-element */
.woocommerce input.button.alt,
.woocommerce #place_order{background-image:linear-gradient(#fff,#fff)}
.w-btn.us-btn-style_2:hover,.m-btn-fill:hover,
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce #place_order:hover{color:#000;border-color:var(--m-red)}

/* Disabled buttons must not animate — a checkout button that still lights up
   while it is refusing clicks reads as a broken page. */
.w-btn[disabled],button[disabled],input[type=submit][disabled],
.woocommerce button.button:disabled,.woocommerce button.button.disabled{
  opacity:.4;
  cursor:not-allowed;
}
.w-btn[disabled]:hover::before,button[disabled]:hover::before{transform:translateY(101%)}
input[type=submit][disabled]:hover{background-size:100% 0}

/* Touch screens: a tap must act, not animate. Without this the fill stays
   stuck on the button that was just tapped (and iOS can swallow the first
   tap altogether). The fills are held down and the text keeps its resting
   colour; :active still gives a brief press state. */
@media (hover:none){
  .moonson .w-btn.w-btn:hover::before,
  .woocommerce a.button:hover::before,
  .woocommerce button.button:hover::before,
  button[type=submit]:hover::before{transform:translateY(101%)}
  .moonson .w-btn.w-btn:not(.us-btn-style_2):hover{color:var(--m-fg)!important;border-color:var(--m-line)}
  .moonson .l-header.bg_transparent:not(.sticky) .w-btn.w-btn:hover{border-color:rgba(255,255,255,.55)}
  .moonson .button.button.button.alt:hover,
  .moonson .single_add_to_cart_button.button.button.button:hover{color:#fff!important}
  .moonson .button.button.button.button:not(.alt):not(.single_add_to_cart_button):hover{color:var(--m-fg)!important;border-color:var(--m-line)}
  .moonson .w-btn.w-btn:active,.moonson .button.button:active,
  .moonson .w-iconbox.iconpos_top.no_text:active{opacity:.7}
}

/* ==========================================================================
   4 — Header + navigation
   ========================================================================== */
.w-nav-anchor .w-nav-title,
.w-nav-list .menu-item > a{
  font-family:var(--m-mono);
  font-size:10.5px;
  font-weight:400;
  letter-spacing:.18em;
  text-transform:uppercase;
  transition:color .25s;
}
/* Impreza draws an underline bar under the active item; the EPK marks state
   with colour alone. */
.w-nav-anchor:before,.w-nav-anchor:after{display:none}

.w-nav-anchor.act .w-nav-title,
.w-nav-anchor:hover .w-nav-title{color:var(--m-red)}

/* Dropdowns sit on the raised surface, not on pure black, so their edge is
   visible against the page behind them. */
.w-nav-list.level_2,.w-nav-list.level_3{
  background:var(--m-bg-2);
  border:1px solid var(--m-line);
  border-radius:0;
}

/* The sticky state. Impreza applies its "middle" colours; the blur is ours. */
.l-header.shadow_thin .l-subheader,
.l-header .l-subheader.at_middle{backdrop-filter:blur(14px)}

/* Site title — the EPK lockup: the m mark, then "moonson" in Supply Mono.

   The live header (Impreza header id 35) has no logo element, only a Text
   element that says "moonson" and links home. Rather than rebuild the header
   in the builder, the mark is drawn in front of that text as a mask, so it
   takes its colour from the tokens (white at rest, red on hover) and needs
   no image element. The wordmark
   stays real, selectable text.

   .ush_text_1 is the builder's id for that element. If the header is ever
   rebuilt and the id changes, either update it here or give the new element
   the extra class  m-logo  — both are matched. .w-logo-title covers the case
   of a proper Logo element set to "text". */
.l-header .w-text.ush_text_1,
.l-header .w-text.m-logo,
.w-logo-title{
  font-family:var(--m-mono);
  font-size:13px;
  line-height:1;
  letter-spacing:.16em;
  text-transform:lowercase;
  font-weight:400;
  margin:0;padding:0;
}
.l-header .w-text.ush_text_1 .w-text-h,
.l-header .w-text.m-logo .w-text-h{
  display:inline-flex;align-items:center;gap:12px;
  color:var(--m-fg);
}
.l-header .w-text.ush_text_1 .w-text-h::before,
.l-header .w-text.m-logo .w-text-h::before{
  content:'';flex:none;
  width:20px;height:20px;              /* the mark is square: 804 × 804 */
  background:var(--m-logo-mark,var(--m-fg));   /* white, on trial — red: set --m-logo-mark:var(--m-red) */
  -webkit-mask:url('../img/logo-mark.svg') center/contain no-repeat;
          mask:url('../img/logo-mark.svg') center/contain no-repeat;
  transition:background-color .25s;
}
.l-header .w-text.ush_text_1 .w-text-h:hover::before,
.l-header .w-text.m-logo .w-text-h:hover::before{background:var(--m-red)}

/* Header button while the bar is still see-through.

   Over the hero the header has no background of its own (Impreza:
   .bg_transparent, until .sticky arrives on scroll). The hero is red, so the
   red fill all but disappears into it. There the button fills white instead;
   once the bar turns solid it goes back to the red fill like every other
   button on the site. */
.l-header.bg_transparent:not(.sticky) .w-btn.w-btn{
  --btn-hover-border-color:#fff;
  border-color:rgba(255,255,255,.55);   /* the .10 hairline is lost on a photo */
}
.l-header.bg_transparent:not(.sticky) .w-btn.w-btn::before{background:#fff}
.moonson .l-header.bg_transparent:not(.sticky) .w-btn.w-btn:hover{border-color:#fff}

/* Video rows. The home hero is set to the "Primary" colour scheme in the
   builder, so until the video has buffered its first frame the section shows
   a flat #C1071A — a red flash on every page load. Black instead, and the
   video fades in over it rather than popping. */
.l-section.with_video,
.l-section.with_video.color_primary{background-color:#000!important}
.l-section.with_video .l-section-video{background:#000}
/* Home hero: the video's own first frame sits behind it (28 KB, loads at
   once), so there is a picture from the first paint and the video fades in
   over the identical image instead of over black. Re-export the frame if the
   video is ever replaced:  ffmpeg -ss 0 -i video.mp4 -frames:v 1 -vf scale=1600:-2 -q:v 5 hero-poster.jpg */
.home .l-section.with_video .l-section-video{background:#000 url('../img/hero-poster.jpg') center/cover no-repeat}
.l-section.with_video .l-section-video video{animation:m-video-in 1.1s .15s var(--m-ease) both}
@keyframes m-video-in{from{opacity:0}to{opacity:1}}

/* SHOP NOT OPEN YET — the default header carries a "Boutique" button to
   /shop on every page except home. Hidden until the store opens; delete this
   rule on opening day. The logo already leads back to the start page. */
.l-header .w-btn[href$="/shop"],.l-header .w-btn[href$="/shop/"]{display:none!important}

/* Hero call-to-action ("[to the feed]" on the home page).

   In the builder this is an Impreza IconBox: a 34px Font Awesome glyph with a
   line of text under it, floating unframed in the middle of the video. Here
   it becomes the same object as the header button next to it — hairline box,
   small icon, mono caps, arrow, white fill from below while it sits on the
   hero. Scoped to icon-on-top boxes without body text, which is exactly this
   pattern; an IconBox with a description keeps Impreza's layout.

   The box has two separate links in its markup (icon, title). The title
   link's ::before is stretched over the whole box so the padding is
   clickable too. */
.moonson .w-iconbox.iconpos_top.no_text{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:row;align-items:center;gap:14px;
  width:fit-content;margin-inline:auto;
  padding:17px 26px;
  border:1px solid rgba(255,255,255,.55);
  background:rgba(0,0,0,.28);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:#fff;
  transition:color .3s var(--m-ease),border-color .3s var(--m-ease);
}
.moonson .w-iconbox.iconpos_top.no_text::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:#fff;transform:translateY(101%);
  transition:transform .4s var(--m-ease);
}
/* Hover only where there is a pointer that can hover. On a phone :hover is
   applied on the FIRST tap and sticks — the box filled white and the tap that
   should have opened Instagram was spent on the animation. */
@media (hover:hover) and (pointer:fine){
  .moonson .w-iconbox.iconpos_top.no_text:hover::before{transform:translateY(0)}
  .moonson .w-iconbox.iconpos_top.no_text:hover{color:#000;border-color:#fff}
  .moonson .w-iconbox.iconpos_top.no_text:hover .w-iconbox-title a::after{transform:translate(3px,-3px)}
}
.moonson .w-iconbox.iconpos_top.no_text .w-iconbox-icon{
  font-size:15px!important;          /* the builder sets 2rem inline */
  width:auto;height:auto;line-height:1;margin:0;color:inherit!important;
}
.moonson .w-iconbox.iconpos_top.no_text .w-iconbox-icon i{color:inherit;line-height:1;vertical-align:top}
.moonson .w-iconbox.iconpos_top.no_text .w-iconbox-meta{margin:0;padding:0}
.moonson .w-iconbox.iconpos_top.no_text .w-iconbox-title{
  margin:0;padding:0;
  font-family:var(--m-mono);font-size:11px;font-weight:400;line-height:1;
  letter-spacing:.2em;text-transform:uppercase;color:inherit;
}
.moonson .w-iconbox.iconpos_top.no_text .w-iconbox-title a{
  color:inherit;display:inline-flex;align-items:center;gap:14px;
}
.moonson .w-iconbox.iconpos_top.no_text .w-iconbox-title a::before{content:'';position:absolute;inset:0;z-index:2}
.moonson .w-iconbox.iconpos_top.no_text .w-iconbox-title a::after{
  content:'\2197';font-size:12px;letter-spacing:0;opacity:.7;
  transition:transform .4s var(--m-ease);
}

/* ==========================================================================
   4c — Shop header: "moonson / boutique" and the cart
   --------------------------------------------------------------------------
   Printed by inc/shop.php, moved into the header cells by moonson.js.

   Two targets where there was one: "moonson" still leads to the start page,
   "boutique" to the top of the shop — so the logo no longer throws you out
   of the store. The cart sits at the right edge on every shop page, and
   elsewhere once it holds something.
   ========================================================================== */
#m-shopnav[hidden]{display:none}

/* Impreza's header script re-appends its own elements to the cells whenever
   the breakpoint changes (seen at 820px: the logo moved behind "/ boutique").
   The cells are flex, so order pins ours to the end however often it
   reshuffles — DOM order stops mattering. */
.l-header .l-subheader-cell > .m-shoplink,
.l-header .l-subheader-cell > .m-cart{order:99}

.l-header .m-shoplink{
  display:inline-flex;align-items:center;
  margin-left:.85em;
  font-family:var(--m-mono);font-size:13px;font-weight:400;line-height:1;
  letter-spacing:.16em;text-transform:lowercase;white-space:nowrap;
  color:var(--m-fg-2);
  transition:color .25s;
}
.l-header .m-shoplink::before{
  content:'/';margin-right:.85em;
  color:var(--m-fg-3);
}
.l-header .m-shoplink[aria-current]{color:var(--m-fg)}
.l-header .m-shoplink:hover{color:var(--m-red)}

/* The cart: bag outline, then the number in a square — the same hairline
   square as every other box on the site, filled red once there is something
   in it. At 0 it stays quiet but present: you see where the cart is before
   you need it. */
.m-cart{
  display:inline-flex;align-items:center;gap:9px;
  margin-left:18px;padding:8px 0 8px 4px;
  font-family:var(--m-mono);font-size:11px;font-weight:400;line-height:1;
  color:var(--m-fg);
  transition:color .25s;
}
.m-cart svg{
  width:19px;height:19px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.3;stroke-linejoin:miter;
}
.m-cart-n{
  display:inline-grid;place-items:center;
  min-width:21px;height:21px;padding:0 5px;
  border:1px solid var(--m-line-field);
  color:var(--m-fg-2);
  font-variant-numeric:tabular-nums;letter-spacing:0;
  transition:color .25s,border-color .25s,background-color .25s;
}
/* White on red, not black on red: #C1071A against black is 3.3:1, too little
   for a number you glance at; against white it is 6.3:1. */
.m-cart-n.is-full{background:var(--m-red);border-color:var(--m-red);color:#fff}
.m-cart:hover{color:var(--m-red)}
.m-cart:hover .m-cart-n:not(.is-full){border-color:var(--m-red);color:var(--m-red)}

/* Over the red hero (see-through header, not yet sticky) a red badge sinks
   into the video — the same problem the header button solves above by
   filling white. Same answer: white square, black number, until the bar
   turns solid. Only where there IS a video hero: the shop's header is
   see-through at the top too, but over black, and a badge that turned from
   white to red on the first scroll would look like a state change. */
body:has(.l-section.with_video) .l-header.bg_transparent:not(.sticky) .m-cart-n.is-full{background:#fff;border-color:#fff;color:#000}
body:has(.l-section.with_video) .l-header.bg_transparent:not(.sticky) .m-cart-n:not(.is-full){border-color:rgba(255,255,255,.55)}
body:has(.l-section.with_video) .l-header.bg_transparent:not(.sticky) .m-cart:hover{color:#fff}

/* "Permanent" on a phone too. On desktop the header is fixed already; on a
   phone Impreza sets it to .pos_static, which it renders as position:absolute
   — so it scrolled away and took the cart with it. absolute → fixed is the
   same box, equally out of the flow: nothing below moves (measured: 0px),
   the bar just stays. Shop pages only; the rest of the site keeps its
   scrolling header. It needs a ground of its own once tiles pass under it. */
body.woocommerce-page .l-header.pos_static{
  position:fixed;top:0;left:0;right:0;
  background:rgba(0,0,0,.86);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
/* Logged in: from 601px the WordPress toolbar is fixed too; sit below it.
   (Under 600px it scrolls away, so 0 is right there.) */
@media (min-width:601px){
  body.admin-bar.woocommerce-page .l-header.pos_static{top:var(--wp-admin--admin-bar--height,32px)}
}

/* Main navigation (inc/nav.php): text links at the front of the right cell,
   in the EPK's nav style — mono capitals, quiet grey, red on hover, full
   colour on the current page. order:-1 keeps them first however Impreza
   reshuffles the cell. */
.l-header .l-subheader-cell > .m-hdrnav{order:-1;display:flex;align-items:center;gap:4px;margin-right:14px}
.m-navlink{
  font-family:var(--m-mono);font-size:11px;font-weight:400;line-height:1;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--m-fg-2);padding:10px 8px;
  transition:color .25s;
}
/* Every entry in brackets, like the site's [to the feed] button (band,
   2026-10-08: "[gallery]", and later "[boutique]" the same way). Drawn
   here, so a new entry gets them by itself; the empty alt text keeps screen
   readers from saying "left bracket". */
.m-navlink::before{content:'[';content:'[' / ''}
.m-navlink::after{content:']';content:']' / ''}
.m-navlink:hover{color:var(--m-red)}
.m-navlink[aria-current]{color:var(--m-fg)}
/* Over the red video hero (see-through header, start page) grey on red is
   too weak, and a red hover would vanish: white there, like the button. */
body:has(.l-section.with_video) .l-header.bg_transparent:not(.sticky) .m-navlink{color:rgba(255,255,255,.88)}
body:has(.l-section.with_video) .l-header.bg_transparent:not(.sticky) .m-navlink:hover{color:#fff;text-decoration:underline;text-underline-offset:6px}
#m-hdrnav.is-floating{position:fixed;top:14px;left:20px;z-index:9998;display:flex;background:rgba(0,0,0,.86);border:1px solid var(--m-line)}
@media (hover:hover) and (pointer:fine){
  .m-navlink{font-size:12px;letter-spacing:.14em}
}
@media (max-width:420px){
  .l-header .l-subheader-cell > .m-hdrnav{margin-right:6px}
  .m-navlink{padding:10px 4px}
}

/* Coming-soon mode: the page says "not yet" — a way into the shop and an
   empty cart next to it would contradict it. */
body:has(.m-soon) .m-shoplink,
body:has(.m-soon) .m-cart{display:none}

/* Fallback if the header is rebuilt and moonson.js cannot find its cells:
   still reachable, top right, instead of silently missing. */
#m-shopnav.is-floating{
  position:fixed;top:14px;right:20px;z-index:9998;
  display:flex;align-items:center;gap:0;
  padding:4px 12px;background:rgba(0,0,0,.86);border:1px solid var(--m-line);
}
#m-shopnav.is-floating .m-shoplink{margin-left:0}
#m-shopnav.is-floating .m-shoplink::before{content:none}

/* Phones: the lockup has to share ~340px with the cart. The wordmark
   "moonson" gives way to its mark (it is still the link home, and still
   labelled for screen readers); "/ boutique" and the cart stay. */
@media (max-width:420px){
  .l-header .l-subheader-cell.at_left:has(.m-shoplink) .w-text.ush_text_1 .w-text-value,
  .l-header .l-subheader-cell.at_left:has(.m-shoplink) .w-text.m-logo .w-text-value{
    position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
  }
  .l-header .m-shoplink{margin-left:.7em}
  .l-header .m-shoplink::before{margin-right:.7em}
  .m-cart{margin-left:12px}
}

/* ==========================================================================
   4b — WooCommerce "coming soon" page
   --------------------------------------------------------------------------
   While the store is in coming-soon mode every shop URL renders this block
   instead of the catalogue. It is a block template, not an Impreza page, so
   it arrives without the canvas padding and with WooCommerce's own serif
   (Cardo) and Inter — flush left against the screen edge, in the wrong type.
   Here it becomes what the EPK would do with one line: a centred bracket
   title under the fixed header.
   ========================================================================== */
.wp-block-woocommerce-coming-soon{
  min-height:calc(100vh - 120px);min-height:calc(100svh - 120px);
  display:grid;place-items:center;
  padding:140px var(--m-pad,24px) 80px;
  text-align:center;
}
.wp-block-woocommerce-coming-soon .wp-block-group{
  display:flex;flex-direction:column;align-items:center;width:100%;
}
.wp-block-woocommerce-coming-soon .wp-block-spacer{display:none}
.wp-block-woocommerce-coming-soon h1{
  font-family:var(--m-mono)!important;
  font-weight:400;
  font-size:clamp(22px,4.2vw,46px);
  line-height:1.1;letter-spacing:-.01em;
  text-transform:lowercase;
  color:var(--m-red);
  margin:0 0 22px;
}
.wp-block-woocommerce-coming-soon h1::before{content:'[';margin-right:.18em}
.wp-block-woocommerce-coming-soon h1::after{content:']';margin-left:.18em}
.wp-block-woocommerce-coming-soon p.m-soon-k{
  font-family:var(--m-mono)!important;
  font-size:11px;font-weight:400;line-height:1.4;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--m-fg-3);
  margin:0 0 26px;max-width:none;
}
.wp-block-woocommerce-coming-soon .m-soon-btn{margin-top:36px}
.wp-block-woocommerce-coming-soon p{
  font-family:var(--m-sans)!important;
  font-weight:200;font-size:17px;line-height:1.62;
  color:var(--m-fg-2);
  max-width:46ch;margin:0 auto;
}

/* ==========================================================================
   5 — Footer
   ========================================================================== */
.l-footer .widget-title,.l-footer h5,.l-footer h6{
  font-family:var(--m-mono);
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--m-fg-3);
}
.l-footer a{transition:color .25s}
.l-footer,.l-subfooter{
  font-family:var(--m-mono);
  font-size:10.5px;
  letter-spacing:.14em;
}
.l-subfooter{border-top:1px solid var(--m-line)}

/* The footer bar: "imprint | privacy policy" in the middle column, the
   Instagram / YouTube icons on the right. The builder row is top-aligned and
   its columns have no padding, so the 17px text line sat at the top edge of
   a 27px strip while the 27px icons filled it. Centre every column on the
   row's axis and give the bar some height so its contents float in it. */
.l-footer .l-section{padding-block:14px}
.l-footer .g-cols{align-items:center}   /* Impreza's row is a 3-column grid; keep it, only centre the axis */
.l-footer .wpb_text_column{text-align:center}
.l-footer .wpb_text_column p{line-height:27px;margin:0;color:var(--m-fg-3)}
.l-footer .wpb_text_column a{color:var(--m-fg-2)}
.l-footer .wpb_text_column a:hover{color:var(--m-red)}
@media (max-width:600px){
  .l-footer .g-cols{row-gap:6px}
}

/* ==========================================================================
   6 — Form fields
   --------------------------------------------------------------------------
   Applies site-wide, not only to WooCommerce: contact forms, search, comments
   and the newsletter box all render through the same elements.

   Fields use --m-line-field (.18) rather than --m-line (.10). On a black page
   a 10% border is invisible at arm's length, and an input you cannot find is
   the fastest way to lose a checkout.
   ========================================================================== */
input[type=text],input[type=email],input[type=tel],input[type=url],
input[type=number],input[type=password],input[type=search],input[type=date],
textarea,select,
.w-form-row-field input,.w-form-row-field textarea,.w-form-row-field select{
  background:var(--m-bg-2);
  border:1px solid var(--m-line-field);
  border-radius:0;
  color:var(--m-fg);
  font-family:var(--m-sans);
  font-weight:200;
  padding:13px 15px;
  box-shadow:none;
  transition:border-color .25s;
}
input:focus,textarea:focus,select:focus{
  border-color:var(--m-red);
  outline:none;
  box-shadow:none;
}
::placeholder{color:var(--m-fg-3);opacity:1}

label,.w-form-row-label{
  font-family:var(--m-mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  /* deliberately --m-fg-2, not --m-fg-3: at 34% opacity a label on black
     falls under the 4.5:1 contrast floor and stops being readable. */
  color:var(--m-fg-2);
}
.required,.woocommerce .required{color:var(--m-red)}

/* Native pickers render a light widget on a dark field otherwise. */
input[type=date],input[type=time]{color-scheme:dark}

/* Checkboxes, everywhere: a 16px hairline square that fills with an X when
   ticked — no tick glyph. Impreza draws its own Font Awesome check into
   ::before (17px, off-centre on a small box); that is switched off here and
   the X is a background SVG, so it is always centred and scales with the box. */
.moonson input[type=checkbox]{
  appearance:none;-webkit-appearance:none;
  width:16px;height:16px;min-width:16px;margin:0;padding:0;
  border:1px solid var(--m-line-field);border-radius:0;background:var(--m-bg-2);
  box-shadow:none;cursor:pointer;vertical-align:middle;
  transition:border-color .2s;
}
.moonson input[type=checkbox]::before,.moonson input[type=checkbox]::after{content:none!important;display:none!important}
.moonson input[type=checkbox]:checked{
  border-color:var(--m-red);
  background-color:var(--m-bg-2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3l10 10M13 3L3 13' fill='none' stroke='%23FF1425' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:100% 100%;
}
.moonson input[type=checkbox]:focus-visible{outline:2px solid var(--m-red-hot);outline-offset:2px}
/* Impreza's agreement row centres the box against a four-line label and
   glues it to the text; top-aligned with a gap it reads as one line. */
.moonson .w-form-row.for_agreement label,
.moonson .w-form-row.for_checkboxes label{align-items:flex-start;gap:12px}
.moonson .w-form-row.for_agreement input[type=checkbox],
.moonson .w-form-row.for_checkboxes input[type=checkbox]{margin-top:2px}

/* ==========================================================================
   6b — Newsletter (inc/newsletter.php)
   --------------------------------------------------------------------------
   Two variants of one block: .m-nl--inline sits under the home page's last
   section; .m-nl--page is the full-height centred layout of /newsletter/ and
   /unsubscribe/, the same stage as the coming-soon block. The field and the
   button share one row, like the EPK's request form.
   ========================================================================== */
.m-nl-sec{border-top:1px solid var(--m-line)}
.m-nl-sec .l-section-h{padding-top:clamp(56px,8vw,104px);padding-bottom:clamp(56px,8vw,104px)}

.m-nl{width:100%}
.m-nl-in{max-width:560px}
.m-nl--inline .m-nl-in{margin:0 auto;text-align:center}
.m-nl--inline .m-nl-c{justify-content:center;text-align:left}

.m-nl--page{
  min-height:calc(100vh - 120px);min-height:calc(100svh - 120px);
  display:grid;place-items:center;text-align:center;
  padding:60px 0 40px;
}
.m-nl--page .m-nl-in{margin:0 auto}
.m-nl--page .m-nl-c{justify-content:center;text-align:left}

.m-nl-k{
  font-family:var(--m-mono);font-weight:400;
  font-size:11px;line-height:1.4;letter-spacing:.24em;text-transform:uppercase;
  color:var(--m-fg-3);margin:0 0 22px;
}
.m-nl-t{
  font-family:var(--m-mono);font-weight:400;
  font-size:clamp(22px,3.6vw,40px);line-height:1.1;letter-spacing:-.01em;
  text-transform:lowercase;color:var(--m-red);margin:0 0 18px;
}
.m-nl-t::before{content:'[';margin-right:.18em}
.m-nl-t::after{content:']';margin-left:.18em}
.m-nl-p{
  font-family:var(--m-sans);font-weight:200;
  font-size:16px;line-height:1.62;color:var(--m-fg-2);
  max-width:46ch;margin:0 auto 30px;
}
.m-nl--inline .m-nl-t{font-size:clamp(20px,2.6vw,30px)}

/* Field + button on one line; the button is the EPK hairline box with the
   red rise. Under 480px the two stack. */
.m-nl-row{display:flex;gap:0;align-items:stretch}
.m-nl-i.m-nl-i{
  flex:1;min-width:0;
  background:var(--m-bg-2);border:1px solid var(--m-line-field);border-right:0;
  color:var(--m-fg);font-family:var(--m-mono);font-weight:400;font-size:13px;letter-spacing:.04em;
  padding:0 16px;height:50px;line-height:50px;border-radius:0;box-shadow:none;
}
.m-nl-i.m-nl-i:focus{border-color:var(--m-red);outline:none}
.m-nl-i.m-nl-i::placeholder{color:var(--m-fg-3);opacity:1}
.m-nl-b{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;
  height:50px;padding:0 24px;margin:0;
  background:transparent;border:1px solid var(--m-red);border-radius:0;
  color:var(--m-fg);cursor:pointer;
  font-family:var(--m-mono);font-weight:400;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  transition:color .3s var(--m-ease);
}
.m-nl-b span{position:relative;z-index:1}
.m-nl-b::before{
  content:'';position:absolute;inset:0;background:var(--m-red);
  transform:translateY(101%);transition:transform .4s var(--m-ease);
}
@media (hover:hover){
  .m-nl-b:hover::before{transform:translateY(0)}
  .m-nl-b:hover{color:#000}
}
.m-nl-b:active::before{transform:translateY(0)}
.m-nl-b:active{color:#000}
.m-nl-b[disabled]{cursor:default;color:var(--m-fg-3);border-color:var(--m-red-dim)}
.m-nl-b[disabled]::before{transform:translateY(101%)}
@media (max-width:480px){
  .m-nl-row{flex-direction:column}
  .m-nl-i.m-nl-i{border-right:1px solid var(--m-line-field);border-bottom:0}
}

/* Consent line: square box, red when ticked. */
.m-nl-c{
  display:flex;gap:12px;align-items:flex-start;
  margin:18px 0 0;cursor:pointer;
  font-family:var(--m-mono);font-size:10.5px;line-height:1.6;letter-spacing:.06em;
  color:var(--m-fg-3);text-transform:none;
}
.m-nl-c input{flex:none;margin:2px 0 0}   /* box itself: section 6 */
.m-nl-c a{color:var(--m-fg-2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--m-line-field)}
.m-nl-c a:hover{color:var(--m-red)}

.m-nl-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Answer line. Empty it takes no space; on success the form fades out and
   the sentence stays. */
.m-nl-msg{
  font-family:var(--m-mono);font-size:12px;line-height:1.6;letter-spacing:.04em;
  margin:16px 0 0;min-height:0;color:var(--m-fg-2);
}
.m-nl-msg:empty{display:none}
.m-nl-msg.is-err{color:var(--m-red-hot)}
.m-nl-msg.is-ok{color:var(--m-fg)}
.m-nl-msg.is-ok::before{content:'// ';color:var(--m-red)}
.m-nl-f{position:relative}
.m-nl-f.is-busy .m-nl-b span{opacity:.4}
.m-nl-f.is-done .m-nl-row,.m-nl-f.is-done .m-nl-c{display:none}
.m-nl-f.is-done .m-nl-msg{margin-top:0;font-size:14px}

/* Landing states (confirmed / unsubscribed). */
.m-nl--state .m-nl-t{font-size:clamp(22px,4.2vw,46px)}
.m-nl-back{margin-top:36px}

/* ==========================================================================
   7 — WooCommerce
   ========================================================================== */

/* Cart, checkout and account are read carefully rather than looked at. They
   sit one step off pure black so the fields and table rules have something to
   separate from. This is a deliberate departure from the EPK. */
body.woocommerce-cart,
body.woocommerce-checkout,
body.woocommerce-account{--color-content-bg:var(--m-bg-2)}
body.woocommerce-cart .l-section,
body.woocommerce-checkout .l-section,
body.woocommerce-account .l-section{background:var(--m-bg-2)}

.woocommerce .price,.woocommerce-Price-amount{
  font-family:var(--m-mono);
  font-weight:400;
  font-variant-numeric:tabular-nums;
  color:var(--m-fg);
}
.woocommerce del,.woocommerce del .woocommerce-Price-amount{color:var(--m-fg-3)}
.woocommerce ins{text-decoration:none;color:var(--m-red)}

.woocommerce span.onsale,.woocommerce .out-of-stock{
  background:var(--m-red);
  color:#fff;
  border-radius:0;
  font-family:var(--m-mono);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  padding:6px 12px;
  min-height:0;
  min-width:0;
  line-height:1;
}

.woocommerce table.shop_table,
.woocommerce table.shop_table td,
.woocommerce table.shop_table th,
.woocommerce-cart .cart_totals table{
  border-color:var(--m-line);
  border-radius:0;
  background:transparent;
}
.woocommerce table.shop_table th{
  font-family:var(--m-mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--m-fg-3);
}

/* Notices. Woo ships them light-on-light with a coloured top border; on black
   that reads as a white slab. Rebuilt as a dark bar with a red spine — the
   same shape as the EPK's toast. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.wc-block-components-notice-banner{
  background:var(--m-bg-2);
  border:1px solid var(--m-line);
  border-left:2px solid var(--m-red);
  border-radius:0;
  color:var(--m-fg);
  font-family:var(--m-mono);
  font-size:12px;
  letter-spacing:.06em;
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before{color:var(--m-red)}

/* Product tiles: hairline box, red on hover — the EPK download-row behaviour. */
.woocommerce ul.products li.product,.w-grid-item{transition:border-color .3s var(--m-ease)}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.w-grid-item .post_title{
  font-family:var(--m-mono);
  font-weight:400;
  font-size:14px;
  letter-spacing:.04em;
  text-transform:lowercase;
}

/* --- Catalogue ------------------------------------------------------------
   Checked against the real shop (fetched through the private share link while
   the store is in coming-soon mode), not against a guess at Woo's markup. */

/* Most of the merch is black and its photos are transparent PNGs: on the page
   ground a black hoodie is a hole with a logo floating in it. Each image gets
   a raised plate with a faint light from above, enough to give the garment an
   outline without turning the tile into a grey box. */
.woocommerce ul.products li.product a img,
.woocommerce div.product div.images img,
.woocommerce-product-gallery__image img{
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.09),rgba(255,255,255,0) 70%),
    #111112;
  border:1px solid var(--m-line);
  transition:border-color .3s var(--m-ease);
}
.woocommerce ul.products li.product a:hover img{border-color:var(--m-red)}
.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title{color:var(--m-red)}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  line-height:1.45;padding-top:14px;transition:color .25s;
}
.woocommerce ul.products li.product .price{font-size:14px;color:var(--m-fg-2)}
.woocommerce ul.products li.product .price .woocommerce-Price-amount{color:inherit}

/* --- 7b · Catalogue layout --------------------------------------------------
   Ten 300px tiles a page made 85 products a nine-page click-through. The grid
   now fills the row with as many ~190px tiles as fit (2 on a phone, 4–6 on a
   desktop) and functions.php raises the page size to 48.
   !important on the grid itself: Impreza and Woo both size li.product with
   float + width:% per columns-N class, and those must not leak through. */
.moonson.woocommerce ul.products,
.moonson .woocommerce ul.products{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:34px 18px;
  margin:0;padding:0;clear:both;
}
.moonson.woocommerce ul.products::before,.moonson.woocommerce ul.products::after,
.moonson .woocommerce ul.products::before,.moonson .woocommerce ul.products::after{display:none!important}
.moonson.woocommerce ul.products li.product,
.moonson .woocommerce ul.products li.product{
  float:none!important;width:auto!important;margin:0!important;padding:0;
}
@media (max-width:520px){
  .moonson.woocommerce ul.products,.moonson .woocommerce ul.products{
    grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 12px;
  }
}
.woocommerce ul.products li.product a img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;margin:0}
.woocommerce ul.products li.product .m-tile-col{
  display:block;padding-top:12px;
  font-family:var(--m-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--m-fg-3);
}
.woocommerce ul.products li.product .m-tile-col + .woocommerce-loop-product__title{padding-top:4px}
.woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:12.5px;margin:0}
.woocommerce ul.products li.product .price{font-size:12px;margin:5px 0 0;display:block}
/* fallback if another plugin re-adds the loop button */
.moonson.woocommerce ul.products li.product .button{display:none}

/* Category bar */
.m-cats{
  display:flex;flex-wrap:wrap;gap:8px;
  margin:26px 0 22px;padding:0 0 22px;
  border-bottom:1px solid var(--m-line);
  clear:both;width:100%;
}
.m-cat{
  font-family:var(--m-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  line-height:1;padding:11px 14px;
  border:1px solid var(--m-line);color:var(--m-fg-2);
  transition:color .25s,border-color .25s,background-color .25s;
}
.m-cat i{font-style:normal;color:var(--m-fg-3);margin-left:6px;font-size:9.5px;transition:color .25s}
.m-cat:hover{border-color:var(--m-red);color:var(--m-fg)}
.m-cat.is-active{background:var(--m-red);border-color:var(--m-red);color:#000}
.m-cat.is-active i{color:rgba(0,0,0,.6)}
@media (max-width:520px){
  /* one swipeable row instead of three wrapped ones */
  .m-cats{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .m-cats::-webkit-scrollbar{display:none}
  .m-cat{flex:none}
}
/* Count left, sorting right, on one quiet line under the bar. */
.woocommerce .woocommerce-result-count{float:left;margin:0 0 26px;line-height:44px}
.woocommerce .woocommerce-ordering{float:right;margin:0 0 26px}
.woocommerce .woocommerce-ordering select{min-width:210px}
@media (max-width:520px){
  .woocommerce .woocommerce-result-count{float:none;line-height:1.4;margin:0 0 14px}
  .moonson.woocommerce .woocommerce-ordering,.moonson .woocommerce .woocommerce-ordering{float:none;margin:0 0 24px!important;display:block}
  .woocommerce .woocommerce-ordering select{width:100%}
}

/* "Show all 84" / "48 per page" — sits on the count's line, reads as part of
   it, and is a link rather than a control so it can be shared and bookmarked. */
.m-perpage{
  float:left;margin:0 0 26px 22px;line-height:44px;
  font-family:var(--m-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--m-fg-2);
  text-decoration:underline;text-decoration-color:var(--m-line-field);
  text-underline-offset:5px;text-decoration-thickness:1px;
  transition:color .25s,text-decoration-color .25s;
}
.m-perpage:hover{color:var(--m-red);text-decoration-color:var(--m-red)}
@media (max-width:520px){
  /* Its own line: the count is inline-block here (Impreza), and "SHOWING
     1–48 OF 84 RESULTS" already fills a phone's width. */
  .m-perpage{float:none;display:block;width:fit-content;margin:-4px 0 20px;line-height:1.4}
}

/* "← Continue shopping" above the cart, "← Back to cart" above checkout.
   WooCommerce only offers a way back on an EMPTY cart. */
.m-back-row{margin:0 0 26px}
.m-back{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--m-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--m-fg-2);
  transition:color .25s;
}
.m-back::before{content:'\2190';letter-spacing:0;transition:transform .4s var(--m-ease)}
.m-back:hover{color:var(--m-red)}
.m-back:hover::before{transform:translateX(-3px)}

/* Impreza styles Woo's buttons through  .woocommerce .button  with its own
   radius, 16px sans and a pale border, and out-specifies section 3. Same
   shell, restated with the body class in front. In the grid the button is a
   quiet secondary action under the price, so it runs smaller than a CTA. */
.moonson.woocommerce a.button,
.moonson.woocommerce button.button,
.moonson .woocommerce a.button,
.moonson .woocommerce button.button{
  font-family:var(--m-mono);font-size:11px;font-weight:400;line-height:1;
  letter-spacing:.2em;text-transform:uppercase;
  padding:15px 26px;border:1px solid var(--m-line);border-radius:0;
  background-color:transparent;color:var(--m-fg);
}
.moonson.woocommerce a.button:hover,
.moonson.woocommerce button.button:hover,
.moonson .woocommerce a.button:hover,
.moonson .woocommerce button.button:hover{border-color:var(--m-red);color:#000}
.moonson.woocommerce ul.products li.product .button{
  margin-top:14px;padding:12px 18px;font-size:10px;letter-spacing:.18em;
}
.moonson.woocommerce a.button.alt,
.moonson.woocommerce button.button.alt,
.moonson .woocommerce a.button.alt,
.moonson .woocommerce button.button.alt,
.moonson.woocommerce .single_add_to_cart_button{
  border-color:var(--m-red);background-color:var(--m-red);color:#fff;
}

/* Hover text. Impreza's inline sheet ends with
     .no-touch .woocommerce .button:is(.alt,.checkout,.add_to_cart_button):hover{color:#fff!important}
   — white text, forced. Our primary buttons fill WHITE on hover, so that
   rule made "Add to cart" vanish into its own background. Black, with
   !important and one class more than theirs (0,6,0 against 0,5,0). */
.moonson .button.button.button.button:hover,
.moonson .button.button.button.alt:hover,
.moonson .single_add_to_cart_button.button.button.button:hover,
.moonson #place_order#place_order:hover{color:#000!important}

/* Result count and sorting. The select inherits a 47px line-height from
   Impreza on top of our 13px padding, which pushes its label out of the box. */
.woocommerce .woocommerce-result-count{
  font-family:var(--m-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--m-fg-3);
}
.woocommerce .woocommerce-ordering select{
  font-family:var(--m-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  line-height:1.2;height:auto;padding:14px 40px 14px 15px;color:var(--m-fg-2);
}

/* --- Single product -------------------------------------------------------- */
/* Variation selects: same clipped-label problem as the sorting select. */
.woocommerce div.product form.cart .variations select{
  line-height:1.2;height:auto;padding:14px 40px 14px 15px;
  font-family:var(--m-mono);font-size:12px;letter-spacing:.08em;color:var(--m-fg);
}
.woocommerce div.product form.cart .variations label,
.woocommerce div.product form.cart .variations th{
  font-family:var(--m-mono);font-size:10px;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;color:var(--m-fg-3);
}
.woocommerce div.product form.cart .reset_variations{
  font-family:var(--m-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--m-fg-3);
}
.woocommerce div.product form.cart .reset_variations:hover{color:var(--m-red)}
.woocommerce .woocommerce-breadcrumb,
.woocommerce div.product .product_meta{
  font-family:var(--m-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--m-fg-3);
}
.woocommerce .woocommerce-breadcrumb a,
.woocommerce div.product .product_meta a{color:var(--m-fg-2)}
.woocommerce .woocommerce-breadcrumb a:hover,
.woocommerce div.product .product_meta a:hover{color:var(--m-red)}
.woocommerce div.product .woocommerce-variation-description,
.woocommerce div.product .woocommerce-product-details__short-description{color:var(--m-fg-2)}

/* The three-line spec in the short description: material / weight / fit. */
.woocommerce div.product .m-specs{
  list-style:none;margin:0 0 26px;padding:0;
  border-top:1px solid var(--m-line);
}
.woocommerce div.product .m-specs li{
  margin:0;padding:11px 0;border-bottom:1px solid var(--m-line);
  font-family:var(--m-mono);font-size:11.5px;letter-spacing:.08em;line-height:1.5;
  color:var(--m-fg-2);
}
.woocommerce div.product .m-specs li::before{display:none}

/* Tabs: the EPK's section-head voice — mono labels on a hairline, the active
   one in red. Woo's default is a row of 22px sans words with no state. */
.woocommerce div.product .woocommerce-tabs ul.tabs{
  display:flex;flex-wrap:wrap;gap:0 34px;
  margin:0 0 30px;padding:0;
  border:0;border-bottom:1px solid var(--m-line);
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  margin:0 0 -1px;padding:0;border:0;border-radius:0;background:none;
  border-bottom:1px solid transparent;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  display:block;padding:14px 0;
  font-family:var(--m-mono);font-size:11px;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;color:var(--m-fg-3);
  transition:color .25s;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover{color:var(--m-fg)}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{border-bottom-color:var(--m-red)}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--m-red)}
.woocommerce div.product .woocommerce-tabs .panel{color:var(--m-fg-2)}
.woocommerce div.product .woocommerce-tabs .panel h2{
  font-family:var(--m-mono);font-size:11px;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;color:var(--m-fg-3);margin-bottom:18px;
}

/* --- Block-based cart: empty state + block product grid -------------------
   The cart page is WooCommerce's block cart, so its markup shares nothing
   with ul.products. Same tile treatment, restated for the block classes. */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before{display:none}  /* the crying emoji */
.wp-block-woocommerce-empty-cart-block h2{
  font-family:var(--m-mono);font-size:11px;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;color:var(--m-fg-3);
}
.wp-block-woocommerce-empty-cart-block h2.wc-block-cart__empty-cart__title{
  font-size:clamp(20px,3vw,30px);letter-spacing:-.01em;text-transform:lowercase;
  color:var(--m-red);padding:40px 0 10px;
}
.wp-block-woocommerce-empty-cart-block h2.wc-block-cart__empty-cart__title::after{content:' ]'}
.wp-block-woocommerce-empty-cart-block h2.wc-block-cart__empty-cart__title::before{
  content:'[ ';display:inline!important;background:none;-webkit-mask:none;mask:none;
  width:auto;height:auto;margin:0;position:static;
}
.wp-block-woocommerce-empty-cart-block .wp-block-separator{
  border:0;border-top:1px solid var(--m-line);max-width:none;margin:30px 0 40px;
}
.wp-block-woocommerce-empty-cart-block .wp-block-separator::before{display:none}

.wc-block-grid__product .wc-block-grid__product-image img{
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.09),rgba(255,255,255,0) 70%),
    #111112;
  border:1px solid var(--m-line);
  transition:border-color .3s var(--m-ease);
}
.wc-block-grid__product-link:hover img{border-color:var(--m-red)}
.wc-block-grid__product{text-align:left}
.wc-block-grid__product .wc-block-grid__product-title{
  font-family:var(--m-mono);font-size:13px;font-weight:400;line-height:1.45;
  letter-spacing:.04em;text-transform:lowercase;color:var(--m-fg);
  padding-top:12px;transition:color .25s;
}
.wc-block-grid__product-link:hover .wc-block-grid__product-title{color:var(--m-red)}
.wc-block-grid__product .wc-block-grid__product-price{font-size:13px;color:var(--m-fg-2);margin:6px 0 0}
.wc-block-grid__product .wc-block-grid__product-price .woocommerce-Price-amount{color:inherit}
.wc-block-grid__product .wc-block-grid__product-add-to-cart{margin:14px 0 0;text-align:left}
.moonson .wc-block-grid__product-add-to-cart .wp-block-button__link{
  display:inline-block;position:relative;isolation:isolate;overflow:hidden;
  font-family:var(--m-mono);font-size:10px;font-weight:400;line-height:1;
  letter-spacing:.18em;text-transform:uppercase;
  padding:12px 18px;border:1px solid var(--m-line);border-radius:0;
  background:transparent;color:var(--m-fg);
  transition:color .3s var(--m-ease),border-color .3s var(--m-ease),background-color .3s var(--m-ease);
}
.moonson .wc-block-grid__product-add-to-cart .wp-block-button__link:hover{
  background:var(--m-red);border-color:var(--m-red);color:#000;
}

/* --- Block cart + checkout: the filled state -------------------------------
   WooCommerce's cart/checkout blocks render client-side with their own
   component classes; Impreza strips the primary button down to bare text,
   which left "Proceed to Checkout" looking like a caption. It is the one
   action on the page, so it gets the primary treatment: solid red, full
   width, fills white on hover. */
.moonson .wc-block-cart__submit-button,
.moonson .wc-block-components-checkout-place-order-button,
.moonson .wc-block-components-button.contained{
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:0;height:auto;padding:21px 26px!important;box-sizing:border-box;
  font-family:var(--m-mono);font-size:12px;font-weight:400;line-height:1;
  letter-spacing:.2em;text-transform:uppercase;text-decoration:none;
  background:var(--m-red);color:#fff;
  border:1px solid var(--m-red);
  transition:background-color .3s var(--m-ease),color .3s var(--m-ease),border-color .3s var(--m-ease);
}
.moonson .wc-block-cart__submit-button:hover,
.moonson .wc-block-components-checkout-place-order-button:hover,
.moonson .wc-block-components-button.contained:hover{background:#fff;border-color:#fff;color:#000}
.moonson .wc-block-components-button.contained:focus-visible{outline:2px solid var(--m-red-hot);outline-offset:3px}
.wc-block-cart__submit-container{margin-top:22px}

/* Column heads, totals and line items in the system's voice. */
.wc-block-cart-items th,
.wc-block-cart .wc-block-cart__totals-title,
.wc-block-components-totals-item__label,
.wc-block-components-panel__button{
  font-family:var(--m-mono)!important;font-size:11px!important;font-weight:400!important;
  letter-spacing:.18em;text-transform:uppercase;color:var(--m-fg-3);
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label{color:var(--m-fg-2)}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  font-family:var(--m-mono);font-weight:400;font-size:18px;color:var(--m-fg);
}
.wc-block-cart-items,.wc-block-cart-items td,.wc-block-cart-items th,
.wc-block-components-totals-wrapper,.wc-block-components-panel{border-color:var(--m-line)!important}
.wc-block-components-product-name{
  font-family:var(--m-mono);font-size:13px;font-weight:400;letter-spacing:.04em;
  text-transform:lowercase;color:var(--m-fg);text-decoration:none;
}
.wc-block-components-product-name:hover{color:var(--m-red)}
.wc-block-components-product-metadata,.wc-block-components-product-details{color:var(--m-fg-3);font-size:12px}
.wc-block-cart-item__image img{
  background:radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.09),rgba(255,255,255,0) 70%),#111112;
  border:1px solid var(--m-line);
}
/* Quantity stepper: hairline box, square. */
.moonson .wc-block-components-quantity-selector{
  border:1px solid var(--m-line-field);border-radius:0!important;background:var(--m-bg-2);
}
.moonson .wc-block-components-quantity-selector::after{display:none}
.moonson .wc-block-components-quantity-selector input{font-family:var(--m-mono);font-size:12px;color:var(--m-fg);background:transparent}
.moonson .wc-block-components-quantity-selector button{color:var(--m-fg-2);opacity:1}
.moonson .wc-block-components-quantity-selector button:hover{color:var(--m-red)}
.wc-block-cart-item__remove-link{color:var(--m-fg-3)!important}
.wc-block-cart-item__remove-link:hover{color:var(--m-red)!important}

/* Pagination as hairline squares. */
.woocommerce nav.woocommerce-pagination ul,
.woocommerce nav.woocommerce-pagination ul li{border:0}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  font-family:var(--m-mono);font-size:11px;letter-spacing:.1em;
  min-width:40px;line-height:38px;padding:0 8px;margin:0 3px;
  border:1px solid var(--m-line);border-radius:0;
  background:transparent;color:var(--m-fg-2);
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a:hover{
  background:var(--m-red);border-color:var(--m-red);color:#000;
}

/* Quantity stepper and Woo's own select replacement. */
.woocommerce .quantity .qty{background:var(--m-bg-2);border:1px solid var(--m-line-field);color:var(--m-fg)}
.select2-container--default .select2-selection--single,
.select2-dropdown,
.select2-container--default .select2-search--dropdown .select2-search__field{
  background:var(--m-bg-2);
  border:1px solid var(--m-line-field);
  border-radius:0;
  color:var(--m-fg);
}
.select2-container--default .select2-selection--single .select2-selection__rendered{color:var(--m-fg)}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--m-red);color:#fff}

/* ==========================================================================
   7c — No rounded corners, anywhere
   --------------------------------------------------------------------------
   The system is hard-edged. Impreza rounds things in a dozen separate places
   (button styles, pagination circles, fields, notices, select2, cart
   thumbnails), each through its own inline rule after this file. Rather than
   chase them one by one, one rule with !important. Radio buttons stay round —
   a square radio reads as a checkbox.
   ========================================================================== */
.moonson :is(a,button,input:not([type=radio]),select,textarea,img,label,
  .w-btn,.button,.page-numbers,.w-iconbox-icon,.select2-selection,.select2-dropdown,
  .woocommerce-message,.woocommerce-info,.woocommerce-error,
  .wc-block-components-button,.wc-block-components-text-input input,
  .wc-block-components-notice-banner,.wc-block-components-totals-coupon__input input),
.moonson :is(.w-btn,.button)::before,
.moonson :is(.w-btn,.button)::after{
  border-radius:0!important;
}
.woocommerce nav.woocommerce-pagination ul li .page-numbers{
  width:auto;height:auto;min-width:40px;line-height:38px;
}

/* ==========================================================================
   7d — Desktop legibility
   --------------------------------------------------------------------------
   Band feedback, 2026-09-23: the small grey type is "super" on a phone and
   smears on a PC. Both are true, and it is not the grey. #8A8A8A on black is
   6.1:1. It is the size: a 10px mono at .2em tracking is drawn with one-pixel
   strokes on a 1x monitor, and anti-aliasing turns those into grey fuzz
   with gaps between the letters. On a phone the same 10px is 30 device
   pixels and every stroke is crisp.

   So this layer only runs where there is a mouse — (hover:hover) and
   (pointer:fine) — and leaves the phone exactly as it is. The palette is not
   touched. On a PC:
     - informative small text is at least 12px
     - tracking comes down to ~.1em (wide tracking at small sizes stops
       letters reading as words)
     - informative labels move one step up the EXISTING palette,
       --m-fg-3 → --m-fg-2; nothing new is introduced
   Selectors repeat the originals exactly: same specificity, later in the
   file, so they win without !important — except font-size on the block
   cart's table heads, where the original is !important itself.
   ========================================================================== */
@media (hover:hover) and (pointer:fine){

  /* Footer and subfooter: Impreza colours them through its variables. */
  :root:root{
    --color-footer-text:var(--m-fg-2);
    --color-footer-link:var(--m-fg-2);
    --color-subfooter-text:var(--m-fg-2);
    --color-subfooter-link:var(--m-fg-2);
  }
  .l-footer,.l-subfooter{font-size:12px;letter-spacing:.08em}
  .l-footer .widget-title,.l-footer h5,.l-footer h6{font-size:12px;letter-spacing:.14em;color:var(--m-fg-2)}

  /* Labels and eyebrows across the site */
  .m-eyebrow{font-size:12px;letter-spacing:.16em;color:var(--m-fg-2)}
  .m-sec-h p{font-size:12px;letter-spacing:.12em;color:var(--m-fg-2)}
  .w-nav-anchor .w-nav-title,
  .w-nav-list .menu-item > a{font-size:12px;letter-spacing:.14em}
  label,.w-form-row-label{font-size:12px;letter-spacing:.12em}
  .m-nl-k{font-size:12px;letter-spacing:.16em;color:var(--m-fg-2)}
  .m-nl-c{font-size:12px;letter-spacing:.04em;color:var(--m-fg-2)}

  /* Catalogue */
  .m-cat{font-size:12px;letter-spacing:.12em;color:var(--m-fg)}
  .m-cat i{font-size:11px;color:var(--m-fg-2)}
  /* The active category was black on red, 3.3:1 — the "strenuous" one. */
  .m-cat.is-active{color:#fff}
  .m-cat.is-active i{color:rgba(255,255,255,.78)}

  .woocommerce .woocommerce-result-count{font-size:12px;letter-spacing:.1em;color:var(--m-fg-2)}
  .m-perpage{font-size:12px;letter-spacing:.1em}
  .woocommerce .woocommerce-ordering select{font-size:12px;letter-spacing:.1em}

  /* Tiles: "001 SPORTS" over the garment name */
  .woocommerce ul.products li.product .m-tile-col{font-size:12px;letter-spacing:.12em;color:var(--m-fg-2)}
  .woocommerce ul.products li.product .woocommerce-loop-product__title{font-size:14px}
  .woocommerce ul.products li.product .price{font-size:13px}

  .woocommerce nav.woocommerce-pagination ul li a,
  .woocommerce nav.woocommerce-pagination ul li span{font-size:12px}

  /* Product page */
  .woocommerce .woocommerce-breadcrumb,
  .woocommerce div.product .product_meta{font-size:12px;letter-spacing:.08em;color:var(--m-fg-2)}
  .woocommerce .woocommerce-breadcrumb a,
  .woocommerce div.product .product_meta a{color:var(--m-fg)}
  .woocommerce div.product form.cart .variations label,
  .woocommerce div.product form.cart .variations th{font-size:12px;letter-spacing:.14em;color:var(--m-fg-2)}
  .woocommerce div.product form.cart .reset_variations{font-size:12px;letter-spacing:.12em;color:var(--m-fg-2)}
  .woocommerce div.product .m-specs li{font-size:13px;letter-spacing:.04em}
  .woocommerce span.onsale,.woocommerce .out-of-stock{font-size:11px;letter-spacing:.14em}

  /* Cart and checkout */
  .m-back{font-size:12px;letter-spacing:.1em}
  .woocommerce table.shop_table th{font-size:12px;letter-spacing:.12em;color:var(--m-fg-2)}
  .wc-block-cart-items th,
  .wc-block-cart .wc-block-cart__totals-title,
  .wc-block-components-totals-item__label,
  .wc-block-components-panel__button{font-size:12px!important;letter-spacing:.12em;color:var(--m-fg-2)}
  .wc-block-components-product-metadata,
  .wc-block-components-product-details{color:var(--m-fg-2)}
  .wp-block-woocommerce-empty-cart-block h2{font-size:12px;letter-spacing:.14em;color:var(--m-fg-2)}
}

/* ==========================================================================
   8 — Reveal on scroll
   --------------------------------------------------------------------------
   Add .m-rv to a row or column. The hidden state is scoped to html.m-js,
   which moonson.js sets on itself — so if the script fails to load, or the
   browser blocks it, the content is simply visible instead of permanently
   invisible. That guard is the whole reason this is not a one-liner.
   ========================================================================== */
.m-rv{transition:opacity .8s var(--m-ease),transform .8s var(--m-ease)}
html.m-js .m-rv{opacity:0;transform:translateY(28px)}
html.m-js .m-rv.in{opacity:1;transform:none}

/* ==========================================================================
   9 — Overlays
   --------------------------------------------------------------------------
   Injected by functions.php on wp_footer.

   The grain layer is deliberately larger than the viewport. It shifts by ±3%
   four times a second; sized exactly, each step pulled an edge inward and
   left a 3% strip uncovered, and because the layer lightens what is under it
   (mix-blend-mode:screen) that strip read as a dark bar snapping in and out
   at the screen edge. Overhanging by 6% means the shift never reaches an
   edge: the grain still moves, the frame stays still.
   ========================================================================== */
.m-grain,.m-scan{position:fixed;inset:0;pointer-events:none;z-index:9999}
.m-grain{
  inset:-6%;
  opacity:var(--m-grain-opacity);
  mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:m-grain 700ms steps(3) infinite;
}
@keyframes m-grain{
  0%{transform:translate(0,0)}
  33%{transform:translate(-3%,2%)}
  66%{transform:translate(2%,-3%)}
  100%{transform:translate(0,0)}
}
/* Off by default — see MOONSON_SCANLINES in functions.php. Scanlines over
   body copy and a checkout form cost more legibility than they buy mood. */
.m-scan{
  opacity:.30;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.45) 2px 3px);
}

/* Screens under ~900px are usually phones, where the grain animation runs a
   full-viewport composite 1.4 times a second for no visual gain at that
   pixel density, and eats battery. Held still instead of removed. */
@media (max-width:900px){.m-grain{animation:none}}

/* ==========================================================================
   10 — Reduced motion + print
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .m-grain{animation:none}
  html.m-js .m-rv{opacity:1;transform:none}
  .m-bracket::before,.m-bracket::after{transition:none}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

@media print{
  .m-grain,.m-scan,.l-header{display:none!important}
  body{background:#fff;color:#000}
}