/* ==========================================================================
   WASE Industrial Luxury - global layer
   Borders do the separation work. No shadows, no gradients, no radius above 6px.
   ========================================================================== */

/* --- 1. Re-point the parent theme's own variables at WASE tokens ---------- */
html:root{
  --theme-palette-color-1:#D4581A;
  --theme-palette-color-2:#B84813;
  --theme-palette-color-3:#1A1A18;
  --theme-palette-color-4:#3D3D38;
  --theme-palette-color-5:#C4B49A;
  --theme-palette-color-6:#EDE8DF;
  --theme-palette-color-7:#F5F2EC;
  --theme-palette-color-8:#F5F2EC;

  --theme-text-color:var(--text-body);
  --theme-headings-color:var(--text-strong);
  --theme-link-initial-color:var(--text-strong);
  --theme-link-hover-color:var(--text-accent);
  --theme-border-color:var(--line-standard);
  --theme-content-background-color:var(--surface-page);
  --theme-content-spacing:var(--space-5);

  --theme-button-background-initial-color:var(--action-fill);
  --theme-button-background-hover-color:var(--action-fill-hover);
  --theme-button-text-initial-color:var(--action-fill-text);
  --theme-button-text-hover-color:var(--action-fill-text);
  --theme-button-border-radius:var(--radius-sm);
  --theme-button-min-height:var(--control-h);
  --theme-button-padding:0 var(--space-5);

  --theme-form-field-border-color:var(--line-standard);
  --theme-form-field-border-initial-color:var(--line-standard);
  --theme-form-field-border-focus-color:var(--line-accent);
  --theme-form-field-background-color:var(--surface-card);
  --theme-form-field-border-radius:var(--radius-sm);
  --theme-form-field-height:var(--control-h);

  --theme-normal-container-max-width:var(--max-width);
  /* Blocksy derives the container WIDTH from this, not the side padding:
     --theme-container-width-base: calc(edge-spacing - frame*2). Feeding it
     --page-pad (40px) collapsed every non-canvas page to a 40px column. */
  --theme-container-edge-spacing:min(calc(100vw - (var(--page-pad) * 2)), var(--max-width));
  --theme-content-vertical-spacing:var(--section-y);

  --theme-font-family:var(--font-sans);
  --theme-font-weight:var(--weight-body);
  --theme-font-size:var(--size-body);
  --theme-line-height:var(--leading-body);
  --theme-headings-font-family:var(--font-slab);

  --wp--preset--color--primary:#D4581A;
  --e-global-color-primary:#1A1A18;
  --e-global-color-secondary:#3D3D38;
  --e-global-color-accent:#D4581A;
  --e-global-color-text:#3D3D38;
}

/* --- 2. Base ------------------------------------------------------------- */
body.wase-design{
  background:var(--surface-page);
  color:var(--text-body);
  font:var(--text-p);
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
}
body.wase-design :where(h1,h2,h3,h4,h5,h6){
  color:var(--text-strong);
  font-family:var(--font-slab);
  font-weight:var(--weight-bold);
  letter-spacing:var(--tracking-heading);
  line-height:var(--leading-heading);
  margin:0 0 var(--space-4);
}
body.wase-design :where(h1){font-size:var(--size-h1)}
body.wase-design :where(h2){font-size:var(--size-h2)}
body.wase-design :where(h3){font-size:var(--size-h3);font-weight:var(--weight-semibold)}
body.wase-design :where(h4){font-size:var(--size-h4);font-weight:var(--weight-semibold)}
body.wase-design :where(h5,h6){font-size:var(--size-body);font-weight:var(--weight-semibold)}
body.wase-design :where(p){margin:0 0 var(--space-4)}
body.wase-design :where(a){color:var(--text-strong);text-decoration:none;transition:var(--transition-color)}
body.wase-design :where(a:hover){color:var(--text-accent)}
body.wase-design :where(img){max-width:100%;height:auto}
body.wase-design :where(strong,b){font-weight:var(--weight-semibold)}
body.wase-design :focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
body.wase-design ::selection{background:var(--wase-iron);color:var(--wase-warm-white)}

/* Chinese headings ride the Noto Serif TC display face; Latin stays on the slab. */
body.wase-design :where(.wase-zh,.wase-title-zh){font-family:var(--font-serif-tc);font-weight:var(--weight-black);letter-spacing:.02em}

/* Numbers, prices, codes are always mono. */
body.wase-design :where(.wase-num,.price,.amount,.woocommerce-Price-amount,.sku,.woocommerce-review__published-date){
  font-family:var(--font-mono);font-weight:var(--weight-medium);letter-spacing:.01em
}

/* --- 3. Shared layout frame --------------------------------------------- */
.wase-wrap{max-width:var(--max-width);margin-inline:auto;padding-inline:var(--page-pad)}
.wase-section{padding-block:var(--section-y)}
.wase-section--sunken{background:var(--surface-sunken)}
.wase-section--dark{background:var(--surface-dark);color:var(--text-on-dark)}
.wase-section--dark :where(h1,h2,h3,h4){color:var(--text-on-dark)}
.wase-section--graphite{background:var(--surface-dark-2);color:var(--text-on-dark)}

.wase-eyebrow{
  font:var(--text-label);text-transform:uppercase;letter-spacing:var(--tracking-label);
  color:var(--text-muted);display:block
}
.wase-section--dark .wase-eyebrow{color:var(--wase-silver)}
.wase-rule{height:1px;width:100%;background:var(--line-standard);margin:var(--space-5) 0;padding:0;border:0}
.wase-rule--hero{width:100%;margin:var(--space-6) 0}

.wase-head{margin-bottom:var(--space-7);max-width:720px}
.wase-head h2{font-family:var(--font-serif-tc);font-weight:var(--weight-bold);line-height:1.2;margin:var(--space-4) 0 0}
.wase-head .wase-en{
  margin-top:6px;font:var(--weight-semibold) var(--size-body-sm)/1.2 var(--font-slab);
  letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)
}
.wase-section--dark .wase-head .wase-en{color:var(--wase-silver)}

.wase-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gutter)}
.wase-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8)}
@media (max-width:960px){.wase-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}.wase-grid-2{grid-template-columns:1fr;gap:var(--space-7)}}
@media (max-width:600px){.wase-grid-3{grid-template-columns:1fr}}

/* --- 4. Buttons ---------------------------------------------------------- */
body.wase-design .wase-btn,
body.wase-design .ct-button,
body.wase-design .wp-block-button__link,
body.wase-design button.button,
body.wase-design a.button,
body.wase-design input[type=submit],
body.wase-design button[type=submit],
body.wase-design .woocommerce a.button,
body.wase-design .woocommerce button.button,
body.wase-design .woocommerce input.button,
body.wase-design .woocommerce #respond input#submit{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  min-height:var(--control-h);padding:0 var(--space-5);
  background:var(--action-fill);color:var(--action-fill-text);
  border:1px solid var(--action-fill);border-radius:var(--radius-sm);
  font:var(--weight-semibold) var(--size-body-sm)/1 var(--font-sans);
  letter-spacing:.04em;text-transform:uppercase;text-decoration:none;
  box-shadow:none;cursor:pointer;
  transition:var(--transition-color),transform var(--duration-fast) var(--ease-standard)
}
body.wase-design .wase-btn:hover,
body.wase-design .ct-button:hover,
body.wase-design .wp-block-button__link:hover,
body.wase-design button.button:hover,
body.wase-design a.button:hover,
body.wase-design input[type=submit]:hover,
body.wase-design button[type=submit]:hover,
body.wase-design .woocommerce a.button:hover,
body.wase-design .woocommerce button.button:hover,
body.wase-design .woocommerce input.button:hover,
body.wase-design .woocommerce #respond input#submit:hover{
  background:var(--action-fill-hover);border-color:var(--action-fill-hover);color:var(--action-fill-text)
}
body.wase-design .wase-btn:active,
body.wase-design .ct-button:active,
body.wase-design button.button:active,
body.wase-design a.button:active{transform:var(--press-translate)}

body.wase-design .wase-btn--secondary,
body.wase-design .woocommerce a.button.alt.wase-secondary{
  background:transparent;color:var(--text-strong);border-color:var(--action-outline)
}
body.wase-design .wase-btn--secondary:hover{background:transparent;color:var(--text-accent);border-color:var(--line-accent)}
body.wase-design .wase-btn--on-dark{background:transparent;color:var(--text-on-dark);border-color:var(--line-on-dark)}
body.wase-design .wase-btn--on-dark:hover{background:transparent;color:var(--text-accent);border-color:var(--line-accent)}
body.wase-design .wase-btn--lg{min-height:56px;padding:0 var(--space-6);font-size:var(--size-body)}
body.wase-design .wase-btn--sm{min-height:var(--control-h-sm);padding:0 var(--space-4);font-size:var(--size-caption)}
body.wase-design .wase-btn[disabled],body.wase-design .button:disabled,body.wase-design button:disabled{
  background:var(--state-disabled-line);border-color:var(--state-disabled-line);
  color:var(--state-disabled-text);cursor:not-allowed;transform:none
}

/* --- 5. Forms ------------------------------------------------------------ */
body.wase-design :where(input[type=text],input[type=email],input[type=tel],input[type=url],input[type=password],input[type=search],input[type=number],input[type=date],select,textarea){
  width:100%;min-height:var(--control-h);padding:0 var(--space-4);
  background:var(--surface-card);color:var(--text-strong);
  border:1px solid var(--line-standard);border-radius:var(--radius-sm);
  font:var(--text-p);box-shadow:none;
  transition:border-color var(--duration-base) var(--ease-standard)
}
body.wase-design :where(textarea){padding:var(--space-3) var(--space-4);min-height:140px;line-height:var(--leading-body)}
body.wase-design :where(input,select,textarea):focus{border-color:var(--line-accent);outline:2px solid var(--focus-ring);outline-offset:2px;box-shadow:none}
body.wase-design :where(input::placeholder,textarea::placeholder){color:var(--state-disabled-text)}
body.wase-design :where(label){font:var(--text-label);text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--text-muted)}
body.wase-design :where(select){appearance:none;background-image:none;padding-right:var(--space-6)}
body.wase-design .wase-field{display:block;margin-bottom:var(--space-5)}
body.wase-design .wase-field > label{display:block;margin-bottom:var(--space-2)}
body.wase-design .wase-req{color:var(--text-accent)}

/* --- 6. Cards, tags, badges --------------------------------------------- */
.wase-card{background:var(--surface-card);border:1px solid var(--line-standard);border-radius:var(--radius-md);padding:var(--card-pad);box-shadow:none}
.wase-card--sunken{background:var(--surface-sunken);border-color:var(--line-hairline)}
.wase-card--dark{background:var(--surface-dark);border-color:var(--line-on-dark);color:var(--text-on-dark)}
.wase-tag{
  display:inline-flex;align-items:center;height:24px;padding:0 var(--space-3);
  background:var(--surface-tag);color:var(--wase-graphite);
  border:1px solid var(--line-standard);border-radius:var(--radius-sm);
  font:var(--text-label);text-transform:uppercase;letter-spacing:var(--tracking-label);white-space:nowrap
}
.wase-tag--outline{background:transparent;color:var(--text-muted);border-color:var(--line-hairline)}
.wase-tag--on-dark{background:transparent;color:var(--wase-silver);border-color:var(--line-on-dark)}
.wase-badge{
  display:inline-flex;align-items:center;gap:var(--space-2);height:22px;padding:0 var(--space-2);
  border:1px solid var(--line-hairline);border-radius:var(--radius-sm);background:transparent;
  color:var(--text-muted);font:var(--weight-medium) var(--size-caption)/1 var(--font-mono);letter-spacing:.06em
}
.wase-badge::before{content:"";width:5px;height:5px;background:currentColor}
.wase-badge--ok{color:var(--state-ok);border-color:var(--state-ok)}
.wase-badge--warn{color:var(--state-warn);border-color:var(--state-warn)}

/* Labelled placeholder plate - used wherever real photography is not in yet. */
.wase-plate{
  position:relative;background:var(--surface-sunken);border:1px solid var(--line-hairline);
  overflow:hidden;aspect-ratio:4/3;display:block
}
.wase-plate--hero{aspect-ratio:4/5}
.wase-plate--square{aspect-ratio:1/1}
.wase-plate span{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font:400 var(--size-caption)/1.6 var(--font-mono);letter-spacing:.12em;color:var(--text-muted);text-align:center;padding:var(--space-4)
}
.wase-plate img{width:100%;height:100%;object-fit:cover;display:block}

/* --- 7. Site header (72px iron bar) -------------------------------------- */
.wase-header{background:var(--surface-dark);border-bottom:1px solid var(--line-on-dark);position:relative;z-index:50}
.wase-header__inner{
  max-width:var(--max-width);margin-inline:auto;min-height:var(--nav-h);
  padding-inline:var(--page-pad);display:flex;align-items:center;justify-content:space-between;gap:var(--space-6)
}
.wase-logo{display:inline-flex;flex-direction:column;gap:5px;text-decoration:none}
.wase-logo__row{display:flex;align-items:baseline;gap:10px}
.wase-logo__mark{font:var(--weight-bold) 26px/1 var(--font-slab);letter-spacing:.01em;color:var(--text-on-dark)}
.wase-logo__mark i{font-style:normal;color:var(--wase-silver)}
.wase-logo__zh{font:var(--weight-bold) 13px/1 var(--font-serif-tc);letter-spacing:var(--tracking-label-tc);color:var(--text-on-dark-muted)}
.wase-logo img{max-height:34px;width:auto}

.wase-nav{display:flex;align-items:center;gap:var(--space-7)}
.wase-nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:var(--space-7)}
.wase-nav li{position:relative}
.wase-nav a{
  position:relative;display:block;padding:var(--space-2) 0;color:var(--text-on-dark-muted);
  font:var(--weight-medium) var(--size-body-sm)/1 var(--font-sans);letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none;transition:var(--transition-color);white-space:nowrap
}
.wase-nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--wase-orange);
  opacity:0;transition:opacity var(--duration-base) var(--ease-standard)
}
.wase-nav a:hover,.wase-nav .current-menu-item > a,.wase-nav .current_page_item > a,
.wase-nav .current-menu-parent > a,.wase-nav .current-menu-ancestor > a{color:var(--text-on-dark)}
.wase-nav a:hover::after,.wase-nav .current-menu-item > a::after,.wase-nav .current_page_item > a::after,
.wase-nav .current-menu-parent > a::after,.wase-nav .current-menu-ancestor > a::after{opacity:1}

.wase-nav .sub-menu{
  position:absolute;top:calc(100% + 14px);left:-16px;min-width:220px;flex-direction:column;
  align-items:stretch;gap:0;background:var(--wase-iron);border:1px solid var(--line-on-dark);
  border-top:3px solid var(--wase-orange);padding:var(--space-2) 0;
  opacity:0;visibility:hidden;transition:opacity var(--duration-fast) var(--ease-standard)
}
.wase-nav li:hover > .sub-menu,.wase-nav li:focus-within > .sub-menu{opacity:1;visibility:visible}
.wase-nav .sub-menu a{padding:var(--space-3) var(--space-4);letter-spacing:.04em;text-transform:none;font-size:var(--size-body-sm)}
.wase-nav .sub-menu a::after{display:none}
.wase-nav .sub-menu a:hover{color:var(--text-accent)}

.wase-header__actions{display:flex;align-items:center;gap:var(--space-3);margin-left:var(--space-4)}
.wase-iconbtn{
  display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  border:1px solid var(--line-on-dark);border-radius:var(--radius-sm);background:transparent;
  color:var(--text-on-dark);cursor:pointer;transition:var(--transition-color);position:relative;text-decoration:none;flex:0 0 auto
}
.wase-iconbtn:hover{border-color:var(--line-accent);color:var(--text-accent)}
.wase-count{
  position:absolute;top:-7px;right:-7px;min-width:18px;height:18px;padding:0 4px;
  display:inline-flex;align-items:center;justify-content:center;background:var(--wase-orange);
  color:var(--wase-warm-white);font:var(--weight-semibold) 11px/1 var(--font-mono)
}
.wase-burger{display:none}

@media (max-width:960px){
  .wase-burger{display:inline-flex}
  .wase-nav{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--wase-iron);border-top:1px solid var(--line-on-dark);
    padding:var(--space-4) var(--page-pad) var(--space-6);display:none
  }
  .wase-nav.is-open{display:flex}
  .wase-nav ul{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .wase-nav li{border-bottom:1px solid var(--line-on-dark)}
  .wase-nav a{padding:var(--space-4) 0}
  .wase-nav a::after{display:none}
  .wase-nav .sub-menu{
    position:static;opacity:1;visibility:visible;border:0;padding:0 0 var(--space-3) var(--space-4);
    min-width:0;background:transparent
  }
  .wase-nav .sub-menu li{border:0}
  .wase-nav .sub-menu a{padding:var(--space-2) 0;color:var(--wase-silver)}
  .wase-header__actions{margin-left:0;margin-top:var(--space-4)}
}

/* --- 8. Site footer (graphite, 3px orange top rule) ---------------------- */
.wase-footer{background:var(--surface-dark-2);border-top:var(--rule-accent);color:var(--text-on-dark)}
.wase-footer__inner{max-width:var(--max-width);margin-inline:auto;padding:var(--space-8) var(--page-pad) var(--space-6)}
.wase-footer__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-8)}
.wase-footer__contact{
  margin-top:var(--space-5);display:flex;flex-direction:column;gap:var(--space-2);
  font:var(--weight-body) var(--size-body-sm)/1.7 var(--font-sans);color:var(--text-on-dark-muted)
}
.wase-footer__contact a{color:var(--text-on-dark-muted)}
.wase-footer__contact a:hover{color:var(--text-accent)}
.wase-footer__title{
  font:var(--text-label);text-transform:uppercase;letter-spacing:var(--tracking-label);
  color:var(--wase-silver);padding-bottom:var(--space-3);border-bottom:1px solid var(--line-on-dark);display:block
}
.wase-footer ul{list-style:none;margin:var(--space-4) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--space-3)}
.wase-footer li a{color:var(--text-on-dark);font:var(--weight-body) var(--size-body-sm)/1 var(--font-sans);text-decoration:none}
.wase-footer li a:hover{color:var(--text-accent)}
.wase-footer__legal{
  margin-top:var(--space-8);padding-top:var(--space-4);border-top:1px solid var(--line-on-dark);
  display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;
  font:var(--weight-body) var(--size-caption)/1.6 var(--font-mono);color:var(--text-on-dark-muted);letter-spacing:.04em
}
@media (max-width:781px){.wase-footer__cols{grid-template-columns:1fr;gap:var(--space-7)}}

/* --- 9. Hero ------------------------------------------------------------- */
.wase-hero{background:var(--surface-page)}
.wase-hero__inner{
  max-width:var(--max-width);margin-inline:auto;padding:var(--space-8) var(--page-pad);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);gap:var(--space-8);align-items:center
}
.wase-hero__copy{max-width:720px}
.wase-hero__zh{
  font:var(--weight-black) var(--size-display-2)/1.14 var(--font-serif-tc);
  letter-spacing:.02em;color:var(--text-strong);margin:0 0 var(--space-3)
}
.wase-hero__en{
  font:var(--weight-bold) var(--size-h2)/1.1 var(--font-slab);
  letter-spacing:var(--tracking-display);color:var(--text-strong);text-transform:uppercase
}
.wase-hero__tagline{
  font:var(--weight-body) var(--size-body-lg)/var(--leading-body) var(--font-sans);
  color:var(--text-body);max-width:520px
}
.wase-hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-6)}
@media (max-width:960px){.wase-hero__inner{grid-template-columns:1fr;gap:var(--space-7);padding-block:var(--space-8)}}

/* --- 10. Product card (shared by the kit and the shop loop) -------------- */
.wase-product{
  display:flex;flex-direction:column;background:var(--surface-card);
  border:1px solid var(--line-standard);border-radius:var(--radius-md);
  transition:border-color var(--duration-base) var(--ease-standard);box-shadow:none;height:100%;overflow:hidden
}
.wase-product:hover{border-color:var(--line-accent)}
.wase-product__media{position:relative;aspect-ratio:4/3;background:var(--surface-sunken);border-bottom:1px solid var(--line-hairline);overflow:hidden;display:block}
.wase-product__media img{width:100%;height:100%;object-fit:cover;display:block}
.wase-product__media .wase-plate{border:0;height:100%}
.wase-product__body{padding:var(--card-pad);display:flex;flex-direction:column;gap:var(--space-3);flex:1}
.wase-product__name{font:var(--weight-bold) var(--size-h4)/1.35 var(--font-serif-tc);color:var(--text-strong);margin:0}
.wase-product__name a{color:inherit}
.wase-product__en{font:var(--weight-medium) var(--size-body-sm)/1.4 var(--font-slab);color:var(--text-muted);margin-top:2px}
.wase-product__foot{
  margin-top:auto;padding-top:var(--space-3);border-top:1px solid var(--line-hairline);
  display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-3)
}
.wase-product__price{font:var(--weight-medium) var(--size-body-lg)/1 var(--font-mono);color:var(--text-strong)}
.wase-product__unit{font:var(--weight-body) var(--size-caption)/1 var(--font-sans);color:var(--text-muted);margin-left:6px}

/* --- 11. Tabs, breadcrumbs, dividers ------------------------------------ */
.wase-tabs{display:flex;gap:var(--space-6);border-bottom:1px solid var(--line-standard);flex-wrap:wrap}
.wase-tabs a,.wase-tabs button{
  position:relative;background:transparent;border:0;padding:var(--space-3) 0;cursor:pointer;
  color:var(--text-muted);font:var(--weight-medium) var(--size-body-sm)/1 var(--font-sans);
  letter-spacing:.06em;text-transform:uppercase;transition:var(--transition-color);text-decoration:none
}
.wase-tabs a::after,.wase-tabs button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--wase-orange);opacity:0}
.wase-tabs .is-active,.wase-tabs a:hover,.wase-tabs button:hover{color:var(--text-strong);font-weight:var(--weight-semibold)}
.wase-tabs .is-active::after{opacity:1}

.wase-crumbs{
  display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;
  font:var(--weight-medium) var(--size-caption)/1 var(--font-sans);letter-spacing:.08em;text-transform:uppercase
}
.wase-crumbs a{color:var(--text-muted);text-decoration:none}
.wase-crumbs a:hover{color:var(--text-accent)}
.wase-crumbs .sep{color:var(--wase-silver)}

.wase-divider{display:flex;align-items:center;gap:var(--space-4)}
.wase-divider span{font:var(--text-label);text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--text-muted);white-space:nowrap}
.wase-divider::after{content:"";height:1px;flex:1;background:var(--line-standard)}

/* --- 12. Spec table ------------------------------------------------------ */
.wase-spec{width:100%;border-collapse:collapse}
.wase-spec th{
  text-align:left;width:200px;padding:var(--space-4) 0;border-bottom:1px solid var(--line-hairline);
  font:var(--text-label);text-transform:uppercase;letter-spacing:var(--tracking-label);color:var(--text-muted)
}
.wase-spec td{padding:var(--space-4) 0;border-bottom:1px solid var(--line-hairline);font:400 var(--size-body-sm)/1.5 var(--font-mono);color:var(--text-strong)}
@media (max-width:600px){.wase-spec th{width:120px}}

/* --- 13. Kill inherited decoration the brand does not allow -------------- */
body.wase-design :where(.wase-section,.wase-card,.wase-product,.entry-card,.ct-container,article,aside,section){box-shadow:none}
body.wase-design [class*="shadow"]{box-shadow:none}

/* --- 14. Motion discipline ---------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  body.wase-design *,body.wase-design *::before,body.wase-design *::after{
    transition-duration:.01ms;animation-duration:.01ms;animation-iteration-count:1
  }
}

/* --- 15. Utility --------------------------------------------------------- */
.wase-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wase-stack-5 > * + *{margin-top:var(--space-5)}
.wase-prose{max-width:var(--max-width-prose)}
.wase-prose p{font:var(--weight-body) var(--size-body)/var(--leading-body) var(--font-sans);color:var(--text-body)}
.wase-mono{font-family:var(--font-mono)}
.wase-icon{flex:0 0 auto;vertical-align:middle}

/* --- 16. Page-template responsive collapses ------------------------------ */
@media (max-width:960px){
  .wase-contact-grid{grid-template-columns:1fr}
  .wase-service-row{grid-template-columns:1fr;gap:var(--space-4)}
}

/* --- 17. Parent-theme blocks the WASE page templates do not use ---------- */
body.wase-page .ct-trending-block,
body.wase-page .ct-related-posts,
body.wase-page .entry-header,
body.wase-page .hero-section{display:none}
body.wase-page main > .ct-container:empty{display:none}

/* --- 18. Legibility: orange is a graphic colour, never a text colour ------
   Inside every dark surface the accent swaps to its lightened variant, so any
   rule written as color:var(--text-accent) stays readable without being
   restated. Orange fills carry ink labels, never warm white. */
.wase-header,
.wase-footer,
.wase-section--dark,
.wase-card--dark,
.wase-btn--on-dark,
body.wase-design .woocommerce-message,
.wase-tag--on-dark{
  --text-accent:var(--text-accent-on-dark);
  --icon-accent:var(--text-accent-on-dark);
}

.wase-count,
body.wase-design span.onsale{color:var(--wase-warm-white)}
.wase-count{background:var(--wase-orange);color:var(--wase-iron)}

body.wase-design .wase-btn--accent{
  background:var(--wase-orange);border-color:var(--wase-orange);color:var(--wase-iron)
}
body.wase-design .wase-btn--accent:hover{
  background:var(--wase-orange-hover);border-color:var(--wase-orange-hover);color:var(--wase-iron)
}

/* Small print that used to sit on the silver: readable ink instead. */
.wase-plate span{color:var(--text-muted)}
.wase-crumbs .sep{color:var(--text-muted)}
/* --- 19. Wordmark (supplied artwork) ------------------------------------- */
.wase-logo{display:inline-flex;align-items:center;line-height:0}
.wase-logo img{height:34px;width:auto;max-width:none;display:block}
.wase-footer .wase-logo img{height:30px}
@media (max-width:600px){.wase-logo img{height:28px}}

/* --- 20. Icon buttons ---------------------------------------------------- */
.wase-iconbtn{line-height:0;padding:0;gap:var(--space-2)}
.wase-iconbtn svg{display:block;width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5;flex:0 0 auto}
.wase-iconbtn__text{
  font:var(--weight-medium) var(--size-caption)/1 var(--font-sans);
  letter-spacing:.08em;text-transform:uppercase;white-space:nowrap
}
/* The account button carries its label, so it is a pill-less rectangle, not a square. */
.wase-iconbtn:has(.wase-iconbtn__text){width:auto;padding-inline:var(--space-3)}
@media (max-width:1100px){
  .wase-iconbtn__text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .wase-iconbtn:has(.wase-iconbtn__text){width:36px;padding-inline:0}
}

/* --- 21. The WASE rule: ONE primitive, used everywhere -------------------
   Every hairline on the site is drawn the same way:
     - the line itself is a 1px border
     - the orange lead is a single solid bar in ::after, sitting on the border
   Nothing here uses layered background-images. Those were rendering
   inconsistently from row to row, which is why some rules showed the orange
   lead and some did not. Tune with the three custom properties. */

body.wase-design .wase-rule,
body.wase-design .s-hero-rule,
body.wase-design .s-supply-rule,
body.wase-design .s-process-rule,
body.wase-design .s-recent-rule,
body.wase-design .s-about-rule,
body.wase-design .s-ct-rule,
body.wase-design .s-ab-rule,
body.wase-design .s-ab-cta-rule,
body.wase-design .s-sv-rule,
body.wase-design .s-sv-bulk-rule,
body.wase-design .s-sv-row,
body.wase-design .s-process-col-1,
body.wase-design .s-process-col-2,
body.wase-design .s-process-col-3,
body.wase-design .wase-ruled{
  --rule-line:var(--line-standard);
  --rule-lead:var(--wase-orange);
  --rule-lead-w:56px;
  --rule-lead-h:2px;
  position:relative;
  border-block-start:1px solid var(--rule-line);
  background-image:none
}
body.wase-design .wase-rule::after,
body.wase-design .s-hero-rule::after,
body.wase-design .s-supply-rule::after,
body.wase-design .s-process-rule::after,
body.wase-design .s-recent-rule::after,
body.wase-design .s-about-rule::after,
body.wase-design .s-ct-rule::after,
body.wase-design .s-ab-rule::after,
body.wase-design .s-ab-cta-rule::after,
body.wase-design .s-sv-rule::after,
body.wase-design .s-sv-bulk-rule::after,
body.wase-design .s-sv-row::after,
body.wase-design .s-process-col-1::after,
body.wase-design .s-process-col-2::after,
body.wase-design .s-process-col-3::after,
body.wase-design .wase-ruled::after{
  content:"";position:absolute;
  inset-block-start:calc(var(--rule-lead-h) * -0.5 - 0.5px);
  inset-inline-start:0;
  width:var(--rule-lead-w);height:var(--rule-lead-h);
  background-color:var(--rule-lead);background-image:none;
  pointer-events:none
}

/* A standalone rule element is nothing but the line: no box, no fill. */
body.wase-design .wase-rule,
body.wase-design .s-hero-rule,
body.wase-design .s-supply-rule,
body.wase-design .s-process-rule,
body.wase-design .s-recent-rule,
body.wase-design .s-about-rule,
body.wase-design .s-ct-rule,
body.wase-design .s-ab-rule,
body.wase-design .s-ab-cta-rule,
body.wase-design .s-sv-rule,
body.wase-design .s-sv-bulk-rule{
  height:0;min-height:0;width:100%;padding:0;flex:0 0 auto;
  background-color:transparent
}

/* On iron and graphite the line steps down so it does not glare. */
body.wase-design .s-about-rule,
body.wase-design .s-ab-cta-rule{--rule-line:var(--line-on-dark)}

/* --- 22. Process columns: number, cap rule, orange line icon ------------- */
body.wase-design .s-process-col-1::before,
body.wase-design .s-process-col-2::before,
body.wase-design .s-process-col-3::before{
  font:var(--weight-medium) var(--size-caption)/1 var(--font-mono);
  letter-spacing:.14em;color:var(--text-accent-ink);
  display:block;margin-block-end:var(--space-4)
}
body.wase-design .s-process-col-1::before{content:"01"}
body.wase-design .s-process-col-2::before{content:"02"}
body.wase-design .s-process-col-3::before{content:"03"}
body.wase-design .s-process-c1-icon svg,
body.wase-design .s-process-c2-icon svg,
body.wase-design .s-process-c3-icon svg{display:block;width:30px;height:30px}

/* --- 23. Atomic buttons carry the arrow glyph ---------------------------- */
body.wase-design .elementor .e-button-base::after{
  content:"\2192";display:inline-block;margin-inline-start:10px;
  font-family:var(--font-sans);
  transition:transform var(--duration-fast) var(--ease-standard)
}
body.wase-design .elementor .e-button-base:hover::after{transform:translateX(3px)}

/* --- 24. Footer on warm white, two-colour wordmark, hairline cap --------- */
.wase-footer--light{background:var(--surface-page);border-top:1px solid var(--line-strong);color:var(--text-body)}
.wase-footer--light .wase-footer__contact,
.wase-footer--light .wase-footer__contact a{color:var(--text-muted)}
.wase-footer--light .wase-footer__contact a:hover{color:var(--text-accent-ink)}
.wase-footer--light .wase-footer__title{color:var(--text-strong);border-bottom-color:var(--line-standard)}
.wase-footer--light li a{color:var(--text-body)}
.wase-footer--light li a:hover{color:var(--text-accent-ink)}
.wase-footer--light .wase-footer__legal{border-top-color:var(--line-standard);color:var(--text-muted)}
body.wase-design .s-about-tags{align-items:center}

/* --- 25. Header: taller bar, smaller wordmark, real action buttons -------
   The buttons sit inside .wase-nav, whose link rule (.wase-nav a, 0-1-1) was
   beating .wase-iconbtn (0-1-0) and forcing display:block. */
body.wase-design .wase-header__inner{min-height:96px;gap:var(--space-7)}
body.wase-design .wase-logo img{max-height:28px}
body.wase-design .wase-header__actions{gap:var(--space-2);margin-left:var(--space-5)}
body.wase-design .wase-header__actions .wase-iconbtn,
body.wase-design .wase-iconbtn{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;padding:0;line-height:0;
  border:1px solid #4A4A44;border-radius:var(--radius-sm);
  text-transform:none;letter-spacing:normal;white-space:nowrap
}
body.wase-design .wase-header__actions .wase-iconbtn::after{display:none}
body.wase-design .wase-iconbtn svg{display:block;flex:0 0 auto}
body.wase-design .wase-header__actions .wase-iconbtn:hover{
  border-color:var(--wase-orange);color:var(--text-accent-on-dark);background:transparent
}
body.wase-design .wase-header__actions .wase-iconbtn--label{
  width:auto;min-width:0;padding:0 14px;gap:8px;line-height:1
}
body.wase-design .wase-iconbtn__text{
  display:inline-block;
  font:var(--weight-medium) var(--size-caption)/1 var(--font-sans);
  letter-spacing:.06em;color:inherit
}
body.wase-design .wase-count{top:-6px;right:-6px;border-radius:var(--radius-sm)}
body.wase-design .wase-burger{display:none}

/* --- 26. Frame centred, sections given their padding back ----------------
   Elementor's .elementor .e-flexbox-base{padding:10px} (0-2-0) was beating the
   wase-section global class (0-1-0). */
body.wase-design .wase-section{padding:88px 40px;justify-content:center}
body.wase-design .wase-inner,
body.wase-design .wase-inner-row{margin-inline:auto}
body.wase-design .wase-card{padding:32px}
body.wase-design .wase-inner-row{gap:64px}
body.wase-design .s-supply-in > *,
body.wase-design .s-recent-in > *,
body.wase-design .s-process-in > *,
body.wase-design .s-ab-scope-in > *,
body.wase-design .s-sv-intro-in > *,
body.wase-design .s-ct-intro-in > *,
body.wase-design .s-ab-intro-in > *{align-self:stretch;width:100%}

/* --- 27. Service steps: numbered rows ------------------------------------ */
body.wase-design .s-sv-row{
  padding-inline-start:104px;
  transition:background var(--duration-base) var(--ease-standard)
}
body.wase-design .s-sv-row::before{
  position:absolute;inset-block-start:44px;inset-inline-start:0;
  font:var(--weight-medium) 40px/1 var(--font-mono);
  letter-spacing:.02em;color:var(--line-standard);
  transition:color var(--duration-base) var(--ease-standard)
}
body.wase-design .elementor-element-sv-row-1::before{content:"01"}
body.wase-design .elementor-element-sv-row-2::before{content:"02"}
body.wase-design .elementor-element-sv-row-3::before{content:"03"}
body.wase-design .elementor-element-sv-row-4::before{content:"04"}
body.wase-design .s-sv-row:hover{background-color:var(--surface-sunken)}
body.wase-design .s-sv-row:hover::before{color:var(--wase-orange)}
body.wase-design .s-sv-row:last-child{border-block-end:1px solid var(--rule-line)}
body.wase-design .s-sv-head{gap:6px}
body.wase-design .s-sv-list{padding-block-start:0}

/* --- 28. Archive header carries the same rule, at the bottom ------------- */
body.wase-design .hero-section .entry-header{
  position:relative;padding-bottom:0;
  --rule-lead-w:56px;--rule-lead-h:2px
}
body.wase-design .hero-section .entry-header::after{
  content:"";display:block;height:1px;width:100%;margin-top:var(--space-5);
  background-color:var(--line-standard);background-image:none
}
body.wase-design .hero-section .entry-header::before{
  content:"";display:block;position:absolute;
  inset-inline-start:0;inset-block-end:-0.5px;
  width:var(--rule-lead-w);height:var(--rule-lead-h);
  background-color:var(--wase-orange);z-index:1
}

@media (max-width:960px){
  body.wase-design .wase-header__inner{min-height:72px}
  body.wase-design .wase-header__actions{margin-left:0}
  body.wase-design .wase-burger{display:inline-flex}
}
@media (max-width:781px){
  body.wase-design .wase-section{padding:56px 20px}
  body.wase-design .wase-card{padding:24px}
  body.wase-design .s-sv-row{padding-inline-start:0}
  body.wase-design .s-sv-row::before{position:static;display:block;margin-bottom:12px;font-size:28px}
}

/* --- 29. Layout floor ----------------------------------------------------
   A safety net. If an element ever loses its Elementor style object again,
   the page still holds its shape instead of collapsing to one character per
   line. These are the same values the builder carries, expressed in CSS. */
body.wase-design .s-hero-in,
body.wase-design .s-about-in,
body.wase-design .s-supply-in,
body.wase-design .s-process-in,
body.wase-design .s-recent-in{width:100%;max-width:var(--max-width)}
body.wase-design .s-supply-in,
body.wase-design .s-process-in,
body.wase-design .s-recent-in{display:flex;flex-direction:column}
body.wase-design .s-process-row{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--gutter)}
body.wase-design .s-process-col-1,
body.wase-design .s-process-col-2,
body.wase-design .s-process-col-3{flex:1 1 30%;min-width:220px;display:flex;flex-direction:column}
