/* ============================================================
   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}
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:1fr 1.55fr 1fr;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:16/10;margin-top:clamp(20px,3vw,52px)}
.st-band .st-b3{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)}

/* ============================================================
   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__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)}
.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}

/* ============================================================
   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__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;gap:20px;margin-top:1.6em}
.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}
}

/* ============================================================
   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-ftr__grid{grid-template-columns:1fr 1fr}
}
@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 1fr;gap:10px}
  .st-band .st-b2{grid-column:1/-1;order:-1;margin-top:0;aspect-ratio:4/3}
  .st-loc{grid-template-columns:1fr}
  .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}