/* ============================================================
   ALIAS — short token names mapped onto theme.json presets.
   Change a value in theme.json, not here. The fallback after the
   comma keeps this sheet alive in contexts where Global Styles
   aren't emitted (e.g. a raw preview).
   ============================================================ */
:root{
  --blue:var(--wp--preset--color--blue,#6F92B5);
  --blue-dark:var(--wp--preset--color--blue-dark,#5A7C9E);
  --blue-light:var(--wp--preset--color--blue-light,#9DB8D2);
  --ink:var(--wp--preset--color--ink,#20262B);
  --slate:var(--wp--preset--color--slate,#39454D);
  --slate-deep:var(--wp--preset--color--slate-deep,#2E3A40);
  --body-c:var(--wp--preset--color--body-c,#525C62);
  --muted:var(--wp--preset--color--muted,#5F686D);
  --line:var(--wp--preset--color--line,#DCE2E5);
  --line-2:var(--wp--preset--color--line-2,#C7CED2);
  --sand:var(--wp--preset--color--sand,#F4F5F6);
  --sand-2:var(--wp--preset--color--sand-2,#E7E8E9);
  --white:var(--wp--preset--color--white,#fff);

  --pad:var(--wp--preset--spacing--pad,clamp(20px,5vw,80px));
  --gap:var(--wp--preset--spacing--gap,clamp(24px,4vw,64px));
  --sec:var(--wp--preset--spacing--sec,clamp(72px,10vw,150px));
  --max:var(--wp--custom--max,1360px);
  --hdr:var(--wp--custom--hdr,76px);
  --bar:var(--wp--custom--bar,40px);
  --ease:var(--wp--custom--ease,cubic-bezier(.22,1,.36,1));
  --r-btn:var(--wp--custom--r-btn,.617em);
  --r-sq:var(--wp--custom--r-sq,7px);
}

/* ============================================================
   BASE — only the resets the wireframe actually relies on.
   No universal margin/padding reset: it would strip the admin
   bar and editor chrome along with the page.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;overflow-x:hidden}
img{max-width:100%;display:block}
/* author-origin "display" beats the UA's [hidden] rule no matter the
   specificity, so "img{display:block}" above was un-hiding every hidden image
   — which is how the mini-cart drawer ended up showing its item thumbnail
   twice (Woo ships a linked and an unlinked copy and hides one). */
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul{margin:0;padding:0;list-style:none}
/* same specificity as wp-block-library's ".wp-block-list": relies on this
   sheet loading after it, which is the normal WordPress enqueue order */
ul.wp-block-list{margin:0;padding:0;list-style:none}
.wp-block-quote{border:0;margin:0;padding:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--blue);color:#fff}

.st-wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.st-sec{padding-block:var(--sec)}

/* ---------- type scale (fluid 380px → 1440px, hand-picked coefficients) ---------- */
.st-eyebrow{
  font-size:clamp(11px,calc(10.64px + .094vw),12px);font-weight:500;letter-spacing:.28em;
  text-transform:uppercase;color:var(--muted);margin-bottom:1.4em;
}
.st-h1{font-size:clamp(40px,calc(23.5px + 4.34vw),86px);font-weight:300;line-height:1.05;letter-spacing:-.025em}
.st-h2{font-size:clamp(30px,calc(21.4px + 2.264vw),54px);font-weight:300;line-height:1.16;letter-spacing:-.02em}
.st-h3{font-size:clamp(22px,calc(19.85px + .566vw),28px);font-weight:400;line-height:1.3;letter-spacing:-.01em}
.st-lead{font-size:16px;font-weight:400;color:var(--body-c);line-height:1.8;max-width:62ch}
.st-body{font-size:16px;color:var(--body-c);font-weight:400}
.st-blue{color:var(--blue)}

/* ---------- buttons (core/button puts visual classes on the wrapper div;
   the rule needs to reach the inner .wp-block-button__link too) ---------- */
.st-btn,
.wp-block-button.st-btn > .wp-block-button__link{
  --bg:var(--slate);--fg:#fff;--bd:var(--slate);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  padding:1.15em 2.4em;font-size:clamp(11.5px,calc(11.14px + .094vw),12.5px);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fg);
  border:1px solid var(--bd);background:var(--bg);overflow:hidden;isolation:isolate;
  border-radius:var(--r-btn);
  transition:color .45s var(--ease),border-color .45s var(--ease);
}
.st-btn::after,
.wp-block-button.st-btn > .wp-block-button__link::after{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--blue);
  border-radius:var(--r-btn); /* explicit, not "inherit" — don't depend on inheritance rules for a fill that must always match the button's own shape */
  transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--ease);
}
.st-btn:hover::after,.st-btn:focus-visible::after,
.wp-block-button.st-btn > .wp-block-button__link:hover::after,
.wp-block-button.st-btn > .wp-block-button__link:focus-visible::after{transform:scaleY(1)}
.st-btn:hover,.st-btn:focus-visible,
.wp-block-button.st-btn > .wp-block-button__link:hover,
.wp-block-button.st-btn > .wp-block-button__link:focus-visible{color:#fff;border-color:var(--blue)}
/* variant colors: --bg/--fg/--bd must be re-declared directly on the LINK too
   (".wp-block-button.st-btn--x > .wp-block-button__link"), not just the class
   that also happens to sit on the wrapper div. A custom property that's
   already given a value directly on an element (the base rule above sets one
   on the link unconditionally) always wins over one merely inherited from an
   ancestor, regardless of the ancestor rule's specificity — so setting these
   only on the wrapper silently did nothing and every button rendered as the
   default slate fill. */
.st-btn--ghost,
.wp-block-button.st-btn--ghost > .wp-block-button__link{--bg:transparent;--fg:var(--ink);--bd:var(--line-2)}
.st-btn--light,
.wp-block-button.st-btn--light > .wp-block-button__link{--bg:transparent;--fg:#fff;--bd:rgba(255,255,255,.45)}
.st-btn--blue,
.wp-block-button.st-btn--blue > .wp-block-button__link{--bg:var(--blue-dark);--bd:var(--blue-dark)}
.st-btn--blue::after,.wp-block-button.st-btn--blue > .wp-block-button__link::after{background:var(--slate-deep)}
.st-btn--blue:hover,.st-btn--blue:focus-visible,
.wp-block-button.st-btn--blue > .wp-block-button__link:hover,
.wp-block-button.st-btn--blue > .wp-block-button__link:focus-visible{border-color:var(--slate-deep)}
/* the wrapper div itself carries no visuals of its own */
.wp-block-button.st-btn{background:transparent;border:0;padding:0;border-radius:0}

/* arrow link — CSS-drawn chevron instead of a hand-placed inline SVG,
   so the text stays a plain editable link */
.st-alink{
  display:inline-flex;align-items:center;gap:.6em;font-size:clamp(14px,calc(13.64px + .094vw),15px);
  font-weight:500;color:var(--blue-dark);
}
.st-alink::after{
  content:"";width:18px;height:8px;flex:none;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='8' viewBox='0 0 20 8'%3E%3Cpath d='M0 4h18M15 1l3 3-3 3' stroke='%23000' stroke-width='1' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='8' viewBox='0 0 20 8'%3E%3Cpath d='M0 4h18M15 1l3 3-3 3' stroke='%23000' stroke-width='1' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .45s var(--ease);
}
.st-alink:hover::after{transform:translateX(7px)}

/* ============================================================
   ANNOUNCEMENT BAR + HEADER
   ============================================================ */
.st-topbar{
  position:fixed;top:0;left:0;right:0;z-index:91;height:var(--bar);
  display:flex;align-items:center;justify-content:center;
  background:var(--slate-deep);color:#fff;
  transition:transform .45s var(--ease);
}
body.st-is-scrolled .st-topbar{transform:translateY(-100%)}
.st-topbar__in{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%}
.st-topbar a{display:inline-flex;align-items:center;gap:.75em;
  font-size:clamp(11.5px,1.5vw,13px);font-weight:400;letter-spacing:.04em;
  color:rgba(255,255,255,.82);transition:color .35s var(--ease);white-space:nowrap}
.st-topbar a:hover{color:#fff}
.st-topbar b{font-weight:500;color:#fff}
.st-topbar u{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:1px;
  transition:border-color .35s var(--ease)}
.st-topbar a:hover u{border-color:#fff}
.st-topbar__tel b{letter-spacing:.02em}

/* z-index 90 keeps the nav toggle above the overlay (85 below). .st-hdr creates
   the stacking context, so a high z-index on the toggle alone would not be enough. */
.st-hdr{
  position:fixed;top:var(--bar);left:0;right:0;z-index:90;height:var(--hdr);
  display:flex;align-items:center;
  border-bottom:1px solid transparent;
  transition:border-color .45s var(--ease),height .45s var(--ease),top .45s var(--ease);
}
/* the frosted-glass fill lives on a ::before, not on .st-hdr itself:
   filter/backdrop-filter on an element creates a new containing block for
   any position:fixed descendant, so with it on .st-hdr the mobile nav
   overlay (also position:fixed, wanting the whole viewport) was being
   confined to the header's own 76px box instead of covering the screen. */
.st-hdr::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(255,255,255,0);backdrop-filter:blur(0px);
  transition:background .45s var(--ease),backdrop-filter .45s var(--ease);
}
body.st-is-scrolled .st-hdr{top:0}
.st-hdr.st-is-stuck{border-bottom-color:var(--line);height:64px}
.st-hdr.st-is-stuck::before{background:rgba(255,255,255,.88);backdrop-filter:blur(14px) saturate(1.4)}
.st-hdr__in{display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start;gap:clamp(16px,2.4vw,40px);width:100%}

/* LOGO — core Site Logo block, so the client swaps the file from Site Identity */
.st-logo{display:block;width:clamp(34px,2.8vw,42px);flex:none}
.st-logo img{width:100%;height:auto;display:block}
.st-logo--light img{filter:brightness(0) invert(1)}
.wp-block-site-logo.st-logo{margin:0}
.wp-block-site-logo.st-logo img{width:100%;height:auto}

/* ---------- core/navigation, restyled to the wireframe's own breakpoint (1024px)
   instead of the block's built-in one. UNVERIFIED against a live install — see
   LEGGIMI.md, "first thing to check". ---------- */
.st-nav{margin-left:auto}
/* core ships flex-wrap:wrap on this container, which dropped the last nav
   item onto a second row inside the fixed-height header — hence nowrap. */
.st-nav .wp-block-navigation__container{display:flex;flex-wrap:nowrap;align-items:center;gap:clamp(14px,1.9vw,30px);
  list-style:none;margin:0;padding:0}
.st-nav .wp-block-navigation-item__content{position:relative;display:inline-block;
  font-size:clamp(13px,calc(12.64px + .094vw),14px);font-weight:400;color:var(--ink);
  padding-block:6px;white-space:nowrap}
.st-nav .wp-block-navigation-item__content::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--blue);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.st-nav .wp-block-navigation-item__content:hover::after,
.st-nav .current-menu-item .wp-block-navigation-item__content::after{transform:scaleX(1);transform-origin:left}
.st-nav .current-menu-item .wp-block-navigation-item__content{color:var(--blue-dark)}
.st-nav .wp-block-navigation__responsive-container-open{display:none;width:44px;height:44px}
/* above 600px core sets width:100% on this wrapper, which makes the menu claim
   a whole header row of its own — the nav should be exactly as wide as its
   links. Excluded when open, where the overlay does want the full viewport. */
.st-nav,
.st-nav .wp-block-navigation__responsive-container:not(.is-menu-open){width:auto;flex:0 1 auto}
.st-nav svg{width:22px;height:22px}

/* core/navigation's own breakpoint is 600px and it is expressed as
   `@media (min-width:600px)` rules that beat a bare class override — so the
   burger has to be reclaimed by out-specifying those two exact selectors,
   not by hiding the <ul>. (Hiding the <ul> is what left tablet with no menu
   at all: the list was gone and core still had the toggle at display:none.) */
@media (max-width:1024px){
  .st-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open){display:none}
  .st-nav .wp-block-navigation__responsive-container-open:not(.always-shown){
    display:flex;align-items:center;justify-content:center}
}

/* the open overlay: full-screen white panel, big links — the platform's own
   modal, restyled rather than reimplemented */
.st-nav .wp-block-navigation__responsive-container.is-menu-open{background:var(--white)}
/* this padding clears the fixed bar + header INSIDE the open overlay. It was
   unscoped, so at desktop it added 116px above the links and made the nav
   193px tall inside a 76px header — that is what pushed the menu onto its own
   line under the logo. .is-menu-open keeps it where it belongs. */
.st-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{
  padding:calc(var(--bar) + var(--hdr)) var(--pad) 40px;box-sizing:border-box}
.st-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{
  display:flex;flex-direction:column;justify-content:center;gap:4px;height:100%;
  padding:0;margin:0;list-style:none}
.st-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
  font-size:clamp(26px,7vw,44px);font-weight:300;letter-spacing:-.02em;padding-block:.14em;color:var(--ink)}
.st-nav .wp-block-navigation__responsive-container-close,
.st-nav .wp-block-navigation__responsive-container-open{color:var(--ink);padding:10px}
.st-nav .wp-block-navigation__responsive-container-close{position:absolute;top:var(--pad);right:var(--pad)}

.st-hdr .wp-block-button.st-btn > .wp-block-button__link{padding:.95em 1.9em;white-space:nowrap}
/* the button and the language switcher keep their natural width; only the nav
   gives ground when the header runs out of room */
.st-hdr .wp-block-buttons,.st-hdr .st-gt{flex:none}
.st-nav{min-width:0}

/* GTranslate widget slot — placeholder until the real shortcode/widget lands here */
.st-gt{display:flex;align-items:center;gap:10px;padding-left:clamp(10px,1.4vw,22px);border-left:1px solid var(--line)}
.st-gt .gtranslate_wrapper{display:flex;align-items:center;gap:10px}
.st-gt .glink{
  font-size:12.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  transition:color .3s var(--ease);
}
.st-gt .glink:hover{color:var(--ink)}
.st-gt .glink.gt-current-lang{color:var(--blue-dark)}
/* the plugin also renders Google's own dropdown/attribution — hidden, we
   only show the .glink language links styled above */
.st-gt [id^="google_translate_element"]{display:none}
@media (max-width:1024px){ .st-gt{display:none} }

/* ============================================================
   HERO
   ============================================================ */
.st-hero{
  padding-top:calc(var(--bar) + var(--hdr) + clamp(48px,8vw,110px));
  padding-bottom:clamp(40px,6vw,80px);text-align:center;
}
.st-hero .st-eyebrow{margin-bottom:2em}
.st-hero .st-h1 span{display:block}
.st-hero__sub{margin:clamp(22px,2.6vw,34px) auto 0;max-width:60ch}
.st-hero__cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:clamp(30px,3.4vw,46px)}

.st-band{
  display:grid;grid-template-columns:1.15fr 1fr 1fr 1.15fr;gap:clamp(10px,1.4vw,22px);
  align-items:start;padding-inline:var(--pad);max-width:1560px;margin:clamp(40px,6vw,84px) auto 0;
}
.st-band .st-b1{aspect-ratio:3/4.1}
.st-band .st-b2{aspect-ratio:4/4.2;margin-top:clamp(20px,3vw,52px)}
.st-band .st-b3{aspect-ratio:4/4.2;margin-top:clamp(20px,3vw,52px)}
.st-band .st-b4{aspect-ratio:3/4.1}

/* framed background image: the frame carries size/position, a plain (and
   otherwise empty) Image block fills it — see LEGGIMI.md for why */
.st-ph{position:relative;overflow:hidden;background:var(--sand)}
.st-ph > .wp-block-image{position:absolute;inset:0;margin:0;height:100%}
.st-ph > .wp-block-image img{width:100%;height:100%;object-fit:cover;transform:scale(1.14)}
.st-ph__link{position:absolute;inset:0;z-index:2}

/* ============================================================
   SETE — the opening announcement, directly under the hero
   ============================================================ */
.st-sete{position:relative;overflow:hidden;background:var(--slate-deep);color:#fff;text-align:center;
  padding-block:clamp(84px,11vw,170px)}
.st-sete__bg{position:absolute;inset:-14% 0;z-index:0}
.st-sete__bg.st-ph{background:none}
/* this frame gets its parallax headroom from inset:-14% on the frame itself,
   not from scale(1.14) on the image — so the usual .st-ph scale is cancelled
   here (specificity bumped to actually beat the .st-ph rule it overrides) */
.st-sete__bg.st-ph > .wp-block-image img{opacity:.32;transform:none}
.st-sete::after{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(ellipse at center,rgba(46,58,64,.5) 0%,rgba(46,58,64,.93) 72%)}
.st-sete .st-wrap{position:relative;z-index:2}
.st-sete .st-logo{width:clamp(52px,5vw,72px);margin:0 auto clamp(20px,2.4vw,32px)}
.st-sete .st-lead{color:rgba(255,255,255,.86);margin-inline:auto;text-align:center}

.st-badge{
  display:inline-flex;align-items:center;gap:.7em;margin-bottom:clamp(20px,2.4vw,32px);
  padding:.55em 1.3em;border:1px solid rgba(255,255,255,.28);border-radius:var(--r-btn);
  font-size:clamp(11px,calc(10.64px + .094vw),12px);font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:#fff;
}
.st-badge .st-comb{color:var(--blue-light);flex:none}

.st-sete h2{margin-bottom:.5em}
.st-sete__name{display:block;font-size:clamp(13px,calc(12.28px + .189vw),15px);font-weight:500;
  letter-spacing:.34em;text-transform:uppercase;color:var(--blue-light);margin-bottom:1.1em}
.st-sete__meta{display:flex;flex-wrap:wrap;gap:.6em clamp(18px,2.4vw,40px);justify-content:center;
  margin-top:clamp(26px,3vw,40px);font-size:clamp(14px,calc(13.28px + .189vw),16px);
  color:rgba(255,255,255,.7)}
.st-sete__cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:clamp(28px,3.2vw,44px)}

/* ============================================================
   CHI SIAMO
   ============================================================ */
.st-salone{display:grid;grid-template-columns:1fr 1.05fr;gap:var(--gap);align-items:start}
.st-salone__txt{position:sticky;top:calc(var(--hdr) + 40px)}
.st-salone__txt p+p{margin-top:1.3em}
.st-salone__txt .wp-block-buttons{margin-top:clamp(26px,3vw,40px)}
.st-salone__imgs{display:grid;gap:clamp(14px,2vw,28px)}
.st-salone__imgs .st-simg1{aspect-ratio:4/3}
.st-salone__imgs .st-simg2{aspect-ratio:1/1;width:78%;margin-left:auto}

/* ============================================================
   DUE ANIME
   ============================================================ */
.st-duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,34px);margin-top:clamp(64px,8vw,110px)}
.st-card{display:flex;flex-direction:column;border:1px solid var(--line);background:var(--white);
  transition:border-color .5s var(--ease),transform .6s var(--ease),box-shadow .6s var(--ease)}
.st-card:hover{border-color:var(--blue);transform:translateY(-6px);box-shadow:0 26px 60px -34px rgba(32,38,43,.4)}
.st-card__img{aspect-ratio:16/10}
/* higher specificity than ".st-ph > .wp-block-image img" on purpose: this frame
   has no parallax headroom to cancel, only a hover zoom */
.st-card__img.st-ph > .wp-block-image img{transform:none;transition:transform 1.1s var(--ease)}
.st-card:hover .st-card__img.st-ph > .wp-block-image img{transform:scale(1.06)}
.st-card__body{padding:clamp(22px,2.6vw,40px);display:flex;flex-direction:column;flex:1}
.st-card__body h3{margin-bottom:1em}
.st-card ul li{padding-block:.85em;border-top:1px solid var(--line);
  font-size:16px;font-weight:400;color:var(--body-c)}
.st-card ul li:last-child{border-bottom:1px solid var(--line)}
.st-card .st-alink{margin-top:auto;padding-top:clamp(20px,2.2vw,30px)}

/* ============================================================
   BRAND RIBBON
   ============================================================ */
.st-marquee{overflow:hidden;padding-block:clamp(10px,2vw,26px);user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.st-marquee__row{display:flex;gap:clamp(28px,5vw,90px);width:max-content;will-change:transform}
.st-marquee span{
  font-size:clamp(48px,9vw,140px);font-weight:300;line-height:1;letter-spacing:-.03em;
  color:transparent;-webkit-text-stroke:1px var(--line-2);white-space:nowrap;
}
.st-marquee span:nth-child(even){-webkit-text-stroke-color:var(--blue);opacity:.55}

/* ============================================================
   GIFT CARDS
   ============================================================ */
.st-gift{background:var(--sand)}
.st-gift__head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:24px}
.st-gift__head .st-body{max-width:38ch}
.st-gift__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,26px);margin-top:clamp(34px,4vw,58px)}
.st-gcard{background:var(--white);padding:clamp(24px,2.6vw,40px);display:flex;flex-direction:column;
  border:1px solid transparent;transition:border-color .5s var(--ease),transform .6s var(--ease)}
.st-gcard:hover{border-color:var(--blue);transform:translateY(-5px)}
.st-gcard__meta{font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.st-gcard h3{margin:.55em 0 .35em}
.st-gcard p.st-gcard__price{font-size:clamp(30px,calc(22.4px + 2vw),52px);font-weight:300;
  color:var(--blue-dark);letter-spacing:-.025em;line-height:1;margin-top:.15em}
.st-gcard p{margin-top:1.1em;font-size:16px;font-weight:400;color:var(--body-c)}
/* donna/uomo: two price rows in one card — well below the single-price scale,
   two big prices stacked would dominate the card */
.st-gcard p.st-gcard__price--duo{font-size:24px;line-height:1.2}
.st-gcard p.st-gcard__price--duo + p.st-gcard__price--duo{margin-top:0}
.st-gcard .st-alink{margin-top:auto;padding-top:clamp(20px,2.2vw,32px)}

/* ============================================================
   PRICE LIST — Hair Salon and SETE, shared component
   ============================================================ */
.st-price{margin-top:clamp(28px,3vw,44px);max-width:640px}
.st-price__label{font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted)}
.st-price__label:not(:first-child){margin-top:clamp(28px,3vw,44px)}
.st-price__row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 16px;
  padding-block:.9em;border-top:1px solid var(--line);font-size:16px;color:var(--body-c)}
.st-price__label + .st-price__row{margin-top:.8em}
.st-price__row:last-child{border-bottom:1px solid var(--line)}
.st-price__row p:last-child{color:var(--blue-dark);white-space:nowrap}

/* ============================================================
   INNER PAGES — single full-width photo band, centred intro/CTA helpers
   ============================================================ */
.st-shot{aspect-ratio:21/9;margin-top:clamp(34px,4vw,56px)}
.st-center .st-lead{margin-inline:auto}
.st-center .wp-block-buttons{justify-content:center}

/* SETE gallery — 4 cols x 2 rows desktop, 2 cols x 4 rows tablet, a native
   scroll-snap slider on mobile (no JS: the same trick as the reviews
   carousel's track, minus the dot nav — this doesn't need one). */
.st-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,20px)}
.st-gallery .st-ph{aspect-ratio:3/4}
@media (max-width:1024px){
  .st-gallery{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .st-gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:12px;scrollbar-width:none;
    margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad)}
  .st-gallery::-webkit-scrollbar{display:none}
  .st-gallery .st-ph{flex:0 0 78%;scroll-snap-align:start}
}

/* .st-sete's own padding-block (clamp 84–170px) is tuned for its homepage role,
   a mid-page teaser that always comes after .st-hero has already cleared the
   fixed bar+header. Used as a page's OWN first section (SETE Hair Clinic SPA)
   its dark background sits right under the still-transparent unscrolled
   header instead of below it. This modifier (added only on that page's hero,
   not the shared class) guarantees real clearance without touching the
   homepage's teaser spacing. */
.st-sete.st-sete--hero{margin-top:130px;padding-top:calc(var(--bar) + var(--hdr) + clamp(40px,5vw,80px))}

/* WooCommerce's My Account page has no block template of its own — it falls
   back to index.html's bare <main> (deliberately unpadded so patterned pages
   like Hair Salon/Contatti aren't double-padded, see index.html) — but the
   account shortcode output supplies no header-clearing section either, so
   its content rendered flush under the fixed bar+header. Scoped to the body
   class WooCommerce adds only on that page. */
body.woocommerce-account main{padding-top:calc(var(--bar) + var(--hdr) + clamp(24px,3vw,40px))}

/* ============================================================
   TESTIMONIAL / REVIEWS CAROUSEL
   ============================================================ */
.st-quote{text-align:center}
.st-center{text-align:center}
/* the review body is core/post-content (a plain div, not a <blockquote>) —
   this is the Query Loop's own DOM, see LEGGIMI.md. 24ch/19-28px was sized
   for the wireframe's short one-line pull-quotes; the real reviews are full
   paragraphs, so this needs a normal reading column, not a narrow quote. */
.st-rev__track .wp-block-post-content{font-size:16px;font-weight:400;
  line-height:1.7;letter-spacing:-.01em;margin:0 auto;max-width:68ch}
.st-rev__cite{display:block;margin-top:clamp(22px,2.4vw,34px);font-style:normal;font-size:12.5px;
  font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

.st-rev{margin-top:clamp(26px,3.4vw,44px)}
/* core/post-template renders a <ul> with one <li> per queried post — that
   <li> plays the part of the wireframe's .rev__item, no custom class needed */
/* height is set in JS from the slide currently in view, so the carousel box is
   never taller than the review being read (a flex row is otherwise as tall as
   its tallest child, which is what left all that empty space under the short
   reviews). */
/* overflow-y:hidden — with only overflow-x set, the browser makes the Y axis
   scrollable too, so a wheel over a slide nudged the review up and down. */
.st-rev__track{display:flex;align-items:flex-start;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;outline:none;list-style:none;margin:0;padding:0;
  transition:height .45s var(--ease)}
.st-rev__track::-webkit-scrollbar{display:none}
/* align-items:flex-start (not the flex default, stretch) so each slide keeps
   its own natural height instead of all of them inheriting the tallest
   review's height. The min-height below is a fixed floor: short reviews all
   get the same baseline height, a long one simply grows past it. It is NOT
   measured from the tallest slide — that made every slide as tall as the
   longest review. */
.st-rev__track > li{flex:0 0 100%;scroll-snap-align:start;padding-inline:clamp(0px,4vw,70px);
  min-height:clamp(240px,24vw,320px)}
.st-rev__stars{font-size:15px;letter-spacing:.32em;color:var(--blue);margin-bottom:clamp(18px,2vw,28px)}
.st-rev__nav{display:flex;align-items:center;justify-content:center;gap:clamp(16px,2vw,26px);
  margin-top:clamp(28px,3.4vw,46px)}
.st-rev__btn{width:48px;height:48px;display:grid;place-items:center;color:var(--ink);
  border:1px solid var(--line-2);border-radius:var(--r-sq);
  transition:border-color .4s var(--ease),color .4s var(--ease)}
.st-rev__btn:hover{border-color:var(--blue);color:var(--blue-dark)}
.st-rev__btn svg{width:18px;height:8px}
.st-rev__dots{display:flex;align-items:center;gap:9px}
.st-rev__dot{width:8px;height:8px;border-radius:50%;background:var(--line-2);border:0;padding:0;
  transition:background .4s var(--ease),width .4s var(--ease),border-radius .4s var(--ease)}
.st-rev__dot[aria-current="true"]{background:var(--blue-dark);width:24px;border-radius:4px}

/* ============================================================
   CONTATTI STRIP
   ============================================================ */
.st-loc{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,50px);margin-top:clamp(34px,4vw,56px)}
.st-loc__item{padding-top:clamp(20px,2.2vw,30px);border-top:1px solid var(--line)}
.st-loc__map{width:100%;aspect-ratio:4/3;border:1px solid var(--line);border-radius:var(--r-sq);
  margin-top:1.4em;display:block}
.st-loc__item h3{margin-bottom:.5em}
.st-loc__item p{color:var(--body-c);font-size:16px;font-weight:400}
.st-loc__foot{display:flex;flex-wrap:wrap;gap:clamp(16px,2.4vw,40px);align-items:center;
  margin-top:clamp(34px,4vw,56px);padding-top:clamp(24px,2.6vw,36px);border-top:1px solid var(--line)}
/* :not(.st-btn) — without it this rule out-specifies the button link, so the
   button label would turn the same blue as its own hover fill and vanish */
.st-loc__foot a:not(.st-btn):not(.wp-block-button__link){font-size:16px;
  font-weight:400;transition:color .35s var(--ease)}
.st-loc__foot a:not(.st-btn):not(.wp-block-button__link):hover{color:var(--blue-dark)}
.st-loc__foot .wp-block-button{margin-left:auto}

/* ============================================================
   FOOTER
   ============================================================ */
.st-ftr{background:var(--slate-deep);color:rgba(255,255,255,.8);
  padding-block:clamp(64px,8vw,110px) 28px;font-size:16px;font-weight:400}
.st-ftr__grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr;gap:clamp(30px,4vw,60px)}
.st-ftr__brand p{margin-top:1.2em;max-width:26ch;color:rgba(255,255,255,.62);line-height:1.8}
.st-ftr h4{font-size:12px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.45);margin-bottom:1.6em}
.st-ftr__col ul li+li{margin-top:.7em}
.st-ftr__col a{position:relative;display:inline-block;line-height:1.6;
  color:rgba(255,255,255,.8);transition:color .35s var(--ease)}
.st-ftr__col a::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:100%;
  background:var(--blue-light);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease)}
.st-ftr__col a:hover{color:#fff}
.st-ftr__col a:hover::after{transform:scaleX(1);transform-origin:left}
.st-ftr address{font-style:normal;line-height:1.9;color:rgba(255,255,255,.72)}
.st-ftr address b{display:block;font-weight:500;color:#fff;margin-bottom:.35em}
.st-ftr address .st-blue{color:var(--blue-light)}
.st-ftr__soc{display:flex;align-items:center;gap:20px;margin-top:1.6em}
.st-ftr__soc > p{margin-block-start:0}
.st-ftr__bot{display:flex;flex-wrap:wrap;gap:14px 28px;justify-content:space-between;align-items:center;
  margin-top:clamp(48px,6vw,84px);padding-top:26px;border-top:1px solid rgba(255,255,255,.14);
  font-size:13.5px;color:rgba(255,255,255,.5)}
.st-ftr__bot a{transition:color .35s var(--ease)}
.st-ftr__bot a:hover{color:#fff}

/* ============================================================
   REVEAL — .st-rv / .st-rv-line / .st-rv-img drive the animation script
   in assets/js. Classes, not data-* attributes: a data attribute hand-written
   into a block's saved HTML isn't part of that block's known schema, so
   WordPress flags the block "invalid content" the next time it's opened in
   the editor. A custom class is the block's own supported extension point
   and survives that check.
   ============================================================ */
.st-js .st-rv{opacity:0}
@media (prefers-reduced-motion:reduce){
  .st-js .st-rv{opacity:1!important;transform:none!important}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .st-rev__track{scroll-behavior:auto}
}

/* ============================================================
   WOOCOMMERCE — header icons, shop grid, single product, cart, checkout.
   Woo Blocks and the classic templates ship their own stable class names
   (wc-block-*, woocommerce-*); we style those directly rather than
   re-theming with new classes, same reasoning as the "ADATTAMENTI" block
   below for core WordPress markup.
   ============================================================ */
.st-wc{display:flex;align-items:center;gap:16px}
.st-hdr .st-wc{flex:none}
.st-wc a{display:flex;color:var(--ink);transition:color .35s var(--ease)}
.st-wc a:hover{color:var(--blue-dark)}
.st-wc svg{width:20px;height:20px}
.st-wc__acct .wc-block-customer-account__account-label{display:none}
.st-wc__cart .wc-block-mini-cart__amount{display:none}
.st-wc__cart .wc-block-mini-cart__badge{background:var(--blue-dark);color:#fff;font-size:10px}

/* shop archive — custom query-loop grid (archive-product.html). Same card as
   .st-gcard on the home/SETE pages; the li comes from core/post-template so
   the card class has to be reached through the child selector. */
.st-shop .st-wrap + .st-wrap{margin-top:clamp(34px,4vw,58px)}
.st-shop__cat{margin-bottom:clamp(20px,2.4vw,32px)}
.st-shop__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,26px);
  list-style:none;margin:0;padding:0}
.st-shop__grid > li{background:var(--white);padding:clamp(24px,2.6vw,40px);
  display:flex;flex-direction:column;border:1px solid transparent;
  transition:border-color .5s var(--ease),transform .6s var(--ease)}
.st-shop__grid > li:hover{border-color:var(--blue);transform:translateY(-5px)}
.st-shop__img{margin:0 0 1.4em}
.st-shop__img img{width:100%;aspect-ratio:1/1;object-fit:cover}
/* same three type steps as .st-gcard: tiny uppercase meta, h3, big light price */
.st-shop__meta,.st-shop__meta .wp-block-post-excerpt__excerpt{
  font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);line-height:1.4;margin:0}
/* card type is a step down from the shared .st-h3 / .st-gcard__price scale —
   the product names are long enough that the homepage's display sizes shout */
.st-shop__grid .st-h3{font-size:clamp(18px,calc(16.57px + .377vw),22px);margin:.55em 0 .35em}
.st-shop__price,.st-shop__price .woocommerce-Price-amount{
  font-size:clamp(20px,calc(18.57px + .377vw),24px);font-weight:300;line-height:1;
  color:var(--blue-dark);letter-spacing:-.025em}
.st-shop__price{margin:.15em 0 0}
.st-shop__grid .wp-block-post-excerpt__more-text{display:none}
.st-shop__btn{margin-top:auto;padding-top:clamp(20px,2.2vw,32px)}
.st-shop__pag{margin-top:clamp(34px,4vw,56px);font-size:14px;color:var(--body-c)}

/* shop archive grid — legacy Woo loop, still used by woocommerce.html */
:is(.st-shop,.st-product) ul.products{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,26px);
  list-style:none;margin:0;padding:0}
/* Woo's clearfix (".woocommerce ul.products::before/::after{content:' ';display:table}")
   becomes two real grid items on a grid container: la prima cella della prima riga
   e una in coda restavano vuote e le card partivano dalla seconda colonna. */
:is(.st-shop,.st-product) ul.products::before,:is(.st-shop,.st-product) ul.products::after{content:none}
:is(.st-shop,.st-product) ul.products li.product{background:var(--white);border:1px solid transparent;padding:clamp(20px,2.2vw,32px);
  transition:border-color .5s var(--ease),transform .6s var(--ease);
  /* WooCommerce's own woocommerce-layout.css floats + percentage-widths this
     li (".columns-N li.product{float:left;width:N%}") — that stylesheet is
     still enqueued, and since we never set these properties ourselves there
     was nothing to win the cascade with. !important neutralises it without
     dequeuing Woo's CSS wholesale (single-product/cart still lean on it). */
  float:none!important;width:auto!important;margin:0!important;
  display:flex!important;flex-direction:column}
:is(.st-shop,.st-product) ul.products li.product:hover{border-color:var(--blue);transform:translateY(-5px)}
:is(.st-shop,.st-product) ul.products li.product img{width:100%;aspect-ratio:1/1;object-fit:cover;margin-bottom:1.2em}
:is(.st-shop,.st-product) ul.products li.product .woocommerce-LoopProduct-link{display:block;margin-bottom:1.4em}
:is(.st-shop,.st-product) ul.products li.product .woocommerce-loop-product__title{font-size:22px;font-weight:400;
  color:var(--ink);margin:0 0 .35em}
:is(.st-shop,.st-product) ul.products li.product .price{display:block;font-size:clamp(24px,calc(19.4px + 1.4vw),34px);
  font-weight:300;color:var(--blue-dark);letter-spacing:-.02em;margin:0}
/* margin-top:auto = bottoni allineati sulla stessa linea anche se i titoli
   vanno a capo su un numero diverso di righe */
:is(.st-shop,.st-product) ul.products li.product .button{margin-top:auto;align-self:flex-start}
.st-shop .woocommerce-notices-wrapper,.st-shop .woocommerce-result-count,.st-shop .woocommerce-ordering{
  font-size:14px;color:var(--body-c)}
.st-shop .woocommerce-pagination{margin-top:clamp(34px,4vw,56px)}

/* single product — immagine stretta a sinistra (33%), a destra titolo, prezzo,
   carrello e descrizione (la descrizione arriva dai tab, spostata in
   functions.php). woocommerce.css floata .images/.summary con width:48% da un
   selettore piu' specifico del nostro: da qui gli !important. Il ::after di
   clearfix di Woo, su un container grid, diventerebbe un grid item vuoto. */
/* questo template non usa .st-wrap: senza gutter il contenuto tocca i bordi
   sotto i 1360px (il max-width del layout constrained) */
.st-product{padding-inline:var(--pad)}
.st-product div.product{display:grid;grid-template-columns:minmax(0,33%) minmax(0,1fr);
  gap:clamp(28px,3.4vw,60px);align-items:start}
.st-product div.product::after{content:none}
.st-product div.product > *{float:none!important;width:auto!important;
  margin-left:0!important;margin-right:0!important}
.st-product div.product > .related{grid-column:1/-1;margin-top:clamp(56px,6vw,96px)!important;
  padding-top:clamp(32px,3.6vw,52px);border-top:1px solid var(--line)}
.st-product div.product .woocommerce-product-gallery{background:var(--sand)}
.st-product div.product .product_title{font-size:clamp(26px,calc(22.42px + .943vw),36px);font-weight:300;
  line-height:1.16;letter-spacing:-.02em;margin:0 0 .5em}
.st-product div.product p.price{font-size:clamp(22px,calc(19.85px + .566vw),28px);font-weight:300;
  color:var(--blue-dark);letter-spacing:-.025em;margin-bottom:0}
.st-product div.product form.cart{margin-top:1.8em}
.st-product div.product form.cart .quantity{display:none}
.st-product__desc{margin-top:clamp(26px,2.8vw,40px);font-size:16px;color:var(--body-c);line-height:1.8}
.st-product__desc p{margin:0 0 1.1em}
.st-product__desc p:last-child{margin-bottom:0}
.st-product__desc strong{color:var(--ink);font-weight:500}
.st-product .related > h2{font-size:clamp(20px,calc(18.57px + .377vw),24px);font-weight:400;
  color:var(--ink);letter-spacing:-.01em;margin:0 0 clamp(20px,2.2vw,30px)}

/* cart/checkout come from WooCommerce's own page-cart/page-checkout block
   templates, so hook the styling onto Woo's block wrappers, not an .st- class */
.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout{padding-block:var(--sec)}

/* shared button + form styling for cart/checkout/product-add-to-cart */
.st-shop .button,.st-shop .wp-block-button__link,.st-product .button,.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.wp-block-woocommerce-cart .wc-block-components-button,.wp-block-woocommerce-checkout .wc-block-components-button{
  font-family:inherit;font-size:clamp(11.5px,calc(11.14px + .094vw),12.5px);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--slate);
  border:0;border-radius:var(--r-btn);padding:1em 2em;cursor:pointer;
  transition:background .4s var(--ease)}
.st-shop .button:hover,.st-shop .wp-block-button__link:hover,.st-product .button:hover,.wp-block-woocommerce-cart .wc-block-cart__submit-button:hover,
.wp-block-woocommerce-cart .wc-block-components-button:hover,.wp-block-woocommerce-checkout .wc-block-components-button:hover{background:var(--blue-dark)}

.wp-block-woocommerce-cart .wc-block-components-product-price__value,
.wp-block-woocommerce-cart .wc-block-components-totals-item__value,
.wp-block-woocommerce-checkout .wc-block-components-product-price__value,
.wp-block-woocommerce-checkout .wc-block-components-totals-item__value{color:var(--blue-dark);font-weight:500}

.wp-block-woocommerce-cart input,.wp-block-woocommerce-checkout input,.wp-block-woocommerce-cart select,.wp-block-woocommerce-checkout select{
  border:1px solid var(--line-2)!important;border-radius:var(--r-sq)!important;
  font-family:inherit;font-size:16px}
.wp-block-woocommerce-checkout .wc-block-components-panel,.wp-block-woocommerce-cart .wc-block-cart-items{border-color:var(--line)}

/* ============================================================
   PAGINE SEMPLICI (templates/index.html) — recesso, privacy, cookie.
   Il template stampa solo il contenuto: senza questo respiro il testo
   partirebbe attaccato all'header fisso e toccherebbe i bordi.
   130px di respiro come da richiesta (ridotti sotto ai 1440px per non spaccare
   il mobile); in cima si sommano topbar e header, che sono position:fixed e
   non occupano spazio nel flusso — nel tema ogni hero se ne fa carico da sé.
   ============================================================ */
.st-page{padding-top:calc(var(--bar) + var(--hdr) + clamp(70px,9vw,130px));
  padding-bottom:clamp(70px,9vw,130px);padding-inline:var(--pad)}
/* il blocco checkout di Woo si porta dietro 144px di padding sopra e sotto,
   che si sommavano al respiro della pagina: 274px di vuoto prima del primo
   campo. Il ritmo verticale lo decide .st-page, uno solo per tutte le pagine. */
.st-page .wp-block-woocommerce-checkout{padding-block:0}

/* pagine legali — misura di lettura stretta, non i 1360px del layout */
.st-legal{font-size:16px;color:var(--body-c);line-height:1.8}
.st-legal .st-h2{color:var(--ink);margin-bottom:.7em}
.st-legal h2{font-size:clamp(20px,calc(18.57px + .377vw),24px);font-weight:400;color:var(--ink);
  letter-spacing:-.01em;margin:clamp(40px,4vw,62px) 0 .7em}
.st-legal p{margin:0 0 1.1em}
.st-legal strong{color:var(--ink);font-weight:500}
.st-legal a{color:var(--blue-dark);text-decoration:underline;text-underline-offset:3px}
.st-legal ul.wp-block-list{list-style:disc;padding-left:1.25em;margin:0 0 1.4em}
.st-legal ul.wp-block-list li{margin-bottom:.5em}
.st-legal .wp-block-table{margin:0 0 1.6em;overflow-x:auto}
.st-legal table{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.6}
.st-legal th,.st-legal td{border:1px solid var(--line);padding:11px 13px;text-align:left;vertical-align:top}
.st-legal th{background:var(--sand);color:var(--ink);font-weight:500}
.st-legal code{font-size:13px;background:var(--sand);padding:1px 5px;border-radius:3px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1180px){ .st-nav .wp-block-navigation-item__content{font-size:12.5px} }
@media (max-width:900px){
  .st-topbar__tel{display:none}
  .st-topbar__in{justify-content:center}
}
@media (max-width:1024px){
  .st-hdr .wp-block-buttons{display:none}
  .st-salone{grid-template-columns:1fr}
  .st-salone__txt{position:static}
  .st-salone__imgs .st-simg2{width:100%}
  .st-duo{grid-template-columns:1fr}
  .st-gift__grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
  .st-shop__grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
  .st-product div.product{grid-template-columns:minmax(0,40%) minmax(0,1fr);gap:28px}
  :is(.st-shop,.st-product) ul.products{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  .st-ftr__grid{grid-template-columns:1fr 1fr}
  .st-band{grid-template-columns:1fr 1fr}
  .st-band .st-b2,.st-band .st-b3{margin-top:0}
}
@media (max-width:720px){
  /* the SETE opening announcement bar — off on small screens, per request.
     --bar goes to 0 too, so .st-hero's padding-top (which reserves room for
     bar+header) doesn't leave a gap for a bar that no longer renders. */
  :root{--bar:0px}
  .st-topbar{display:none}
  .st-hdr{top:0}
  body.admin-bar .st-hdr{top:32px}
  .st-band{grid-template-columns:1fr;gap:10px}
  .st-loc{grid-template-columns:1fr}
  .st-product div.product{grid-template-columns:1fr;gap:24px}
  .st-product div.product .woocommerce-product-gallery{max-width:320px}
  .st-loc__foot .wp-block-button{margin-left:0;width:100%}
  .st-loc__foot .wp-block-button .wp-block-button__link{width:100%}
  .st-hero__cta .wp-block-button,.st-sete__cta .wp-block-button{flex:1 1 100%}
  .st-rev__track .wp-block-post-content{max-width:none}
  .st-ftr__grid{grid-template-columns:1fr;gap:38px}
}

/* ============================================================
   ADATTAMENTI AL DOM DI WORDPRESS
   Tutto quello che riconcilia il markup dei blocchi con il design
   sta qui, in un punto solo.
   ============================================================ */

/* template-part wrapper: the fixed/positioned element is the inner group,
   not the part itself, so the wrapper must not generate its own box */
.wp-block-template-part{display:contents}

/* admin bar pushes the fixed header down */
body.admin-bar .st-topbar{top:32px}
body.admin-bar .st-hdr{top:calc(32px + var(--bar))}
body.admin-bar.st-is-scrolled .st-hdr{top:32px}
@media (max-width:782px){
  body.admin-bar .st-topbar{top:46px}
  body.admin-bar .st-hdr{top:calc(46px + var(--bar))}
  body.admin-bar.st-is-scrolled .st-hdr{top:46px}
}

/* editor: a fixed header would sit on top of the canvas and could never be selected */
.editor-styles-wrapper .st-topbar,
.editor-styles-wrapper .st-hdr{position:relative;top:0}