:root {
  --pi-radius: 26px;
  --pi-shadow: 0 22px 65px rgba(17,18,23,.12);
  --pi-shadow-dark: 0 22px 80px rgba(0,0,0,.30);
}
html { scroll-behavior: smooth; }
body { text-rendering: optimizeLegibility; }
::selection { background: #C9A35C; color: #111217; }
.wp-site-blocks { overflow: hidden; }
a { transition: opacity .2s ease, transform .2s ease, color .2s ease; }
a:hover { opacity: .78; }
.pi-eyebrow { text-transform: uppercase; letter-spacing: .15em; font-size: .76rem; font-weight: 800; }
.pi-glass { background: rgba(255,255,255,.065); border: 1px solid rgba(255,255,255,.13); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.pi-card { border-radius: var(--pi-radius); box-shadow: var(--pi-shadow); overflow: hidden; }
.pi-dark-card { border-radius: var(--pi-radius); box-shadow: var(--pi-shadow-dark); overflow: hidden; }
.pi-rule { height: 1px; background: linear-gradient(90deg, transparent, rgba(201,163,92,.8), transparent); }
.pi-keyboard { min-height: 330px; position: relative; border-radius: 32px; overflow: hidden; background: linear-gradient(145deg,#F6F0E5,#D9CCB5); box-shadow: 0 35px 90px rgba(0,0,0,.35); }
.pi-keyboard:before { content:""; position:absolute; inset:9% 7% 16%; border-radius:18px; background: repeating-linear-gradient(90deg,#fff 0,#fff 11%,#d7d2ca 11.2%,#fff 12.5%); box-shadow: inset 0 -16px 20px rgba(0,0,0,.11); transform: perspective(900px) rotateX(8deg) rotateZ(-4deg); }
.pi-keyboard:after { content:""; position:absolute; width:70%; height:31%; left:18%; top:15%; background: repeating-linear-gradient(90deg,transparent 0,transparent 7%,#101114 7.4%,#101114 11%,transparent 11.4%,transparent 14%); transform: perspective(900px) rotateX(8deg) rotateZ(-4deg); filter: drop-shadow(0 9px 4px rgba(0,0,0,.35)); }
.pi-note { position:absolute; color:#C9A35C; font-family:Georgia,serif; font-size:clamp(3rem,8vw,8rem); opacity:.22; line-height:1; user-select:none; }
.pi-sticky-header { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.pi-price { font-family: Georgia,serif; font-size:2.5rem; line-height:1; }
.pi-chip { display:inline-flex; align-items:center; gap:.4rem; padding:.42rem .7rem; border:1px solid currentColor; border-radius:999px; font-size:.78rem; font-weight:700; }
.pi-fade { animation: piFade .55s ease both; }
@keyframes piFade { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto; } * { animation:none!important; transition:none!important; } }
@media (max-width: 781px) {
  .pi-keyboard { min-height:260px; }
  .pi-hero { padding-top:3.5rem!important; padding-bottom:3.5rem!important; }
}
.woocommerce div.product div.images img, .woocommerce ul.products li.product a img { border-radius: 20px; }
.woocommerce button.button, .woocommerce a.button, .woocommerce input.button { border-radius:999px; }

/* v0.1.2: full-width builder landing pages, untouched navigation and regular article layout. */
body.scs-pb-builder-page:not(.scsm) .piano-illg-content-main,body.scs-pb-builder-page:not(.scsm) .wp-block-post-content{max-width:none;width:100%;margin-inline:auto}body.scs-pb-builder-page:not(.scsm) .wp-block-post-title{display:none}body.scs-pb-builder-page:not(.scsm) main.wp-block-group{padding-top:0!important;padding-bottom:0!important}body.scs-pb-builder-page:not(.scsm) .scs-pb__card{box-shadow:0 12px 28px #00000012}body.scs-pb-builder-page:not(.scsm) .scs-pb__hero .scs-pb__hero-text{min-width:0}body.scs-pb-builder-page:not(.scsm) .scs-pb__grid{width:100%}

/* Piano-Illg Studio 0.2.0 — premium desktop shell. Mobile is separate SCS template. */
:root{--pi-ink:#111521;--pi-paper:#fbfaf7;--pi-accent:#f4c970}
body:not(.scsm){font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;margin:0;background:var(--pi-paper);color:var(--pi-ink)}
body:not(.scsm) .wp-site-blocks{overflow:clip}
body:not(.scsm) .wp-site-blocks>header{position:sticky;top:0;z-index:999;background:#111521}
body:not(.scsm) .piano-illg-content-main{max-width:100vw!important;width:100%!important;margin:0!important;overflow:visible!important;padding:0!important}
body:not(.scsm) .piano-illg-content-main .wp-block-post-content{max-width:100%!important;width:100%!important;margin:0!important;padding:0!important}
body:not(.scsm) .piano-illg-content-main .wp-block-post-content>.wp-block-shortcode{max-width:none!important;width:100%!important;margin:0!important;padding:0!important}
body:not(.scsm) .piano-illg-content-main .wp-block-post-content>.wp-block-shortcode>.scs-pb{width:100vw!important;max-width:none!important;margin-left:0!important;margin-right:0!important}
body.scs-pb-builder-page:not(.scsm) .piano-illg-page-title{display:none}
body.scs-pb-builder-page:not(.scsm) .wp-block-post-title{display:none}
body:not(.scsm) .piano-illg-page-title{max-width:1200px;margin:60px auto 24px;padding:0 22px;font:600 clamp(40px,5vw,68px)/1.08 Georgia,serif}
.pi-site-header{background:#111521;border-bottom:1px solid #ffffff24;color:#fff;position:relative;z-index:999}
.pi-header-inner{height:92px;max-width:1360px;margin:auto;padding:0 28px;display:flex;align-items:center;gap:clamp(18px,3vw,48px)}
.pi-brand{display:flex;align-items:center;gap:13px;text-decoration:none!important;color:#fff!important;flex-shrink:0}
.pi-brand-mark{width:45px;height:45px;display:grid;place-items:center;background:#f4c970;border-radius:12px;color:#161924;font:700 27px Georgia,serif;transform:rotate(-5deg)}
.pi-site-logo{max-height:52px;width:auto;object-fit:contain}
.pi-brand-type{display:flex;flex-direction:column;gap:2px}
.pi-brand-type strong{font:700 28px/1 Georgia,serif;letter-spacing:-.05em;white-space:nowrap}
.pi-brand-type small{font:800 9px/1.5 system-ui,sans-serif;letter-spacing:.34em;color:#f4c970}
.pi-primary-nav{flex:1;min-width:0}
.pi-nav-list{list-style:none;display:flex;justify-content:flex-end;align-items:center;gap:clamp(14px,2.1vw,30px);margin:0!important;padding:0!important}
.pi-nav-list li{position:relative;list-style:none;margin:0}
.pi-nav-list a{display:inline-block;text-decoration:none!important;color:#e9e7ef!important;font:600 14px/1.4 system-ui,sans-serif;white-space:nowrap;padding:15px 0;border-bottom:2px solid transparent}
.pi-nav-list a:hover,.pi-nav-list a:focus-visible{color:#f4c970!important;border-bottom-color:#f4c970}
.pi-nav-list .sub-menu{display:none;position:absolute;top:100%;left:-20px;padding:10px 20px!important;background:#191f30;border-radius:12px;min-width:220px;box-shadow:0 20px 45px #0004;list-style:none}
.pi-nav-list .menu-item-has-children:hover>.sub-menu,.pi-nav-list .menu-item-has-children:focus-within>.sub-menu{display:block}
.pi-nav-list .sub-menu a{padding:10px 0;border:0}
.pi-header-cta{flex-shrink:0;text-decoration:none!important;background:#f4c970!important;color:#171923!important;border-radius:11px;padding:15px 20px;font:800 14px/1.3 system-ui,sans-serif;white-space:nowrap}
.pi-header-cta span{font-size:17px;padding-left:7px}
.pi-header-cta:hover{background:#ffdda0!important;color:#111!important}
.pi-site-footer{background:#111521;color:#f3f0ec}
.pi-footer-inner{max-width:1310px;margin:0 auto;padding:74px 28px 62px;display:grid;grid-template-columns:1.3fr .7fr .7fr 1fr;gap:clamp(30px,4vw,65px)}
.pi-footer-brand{display:block;color:#fff!important;font:700 29px/1 Georgia,serif;text-decoration:none!important;margin-bottom:22px}.pi-footer-brand small{display:block;font:800 9px/1.3 system-ui,sans-serif;letter-spacing:.25em;color:#f4c970;margin-top:6px}
.pi-footer-inner p{color:#b8bbc7;line-height:1.7;font-size:14px}
.pi-footer-nav{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.pi-footer-nav strong,.pi-footer-cta strong{font:800 13px system-ui,sans-serif;color:#fff;margin-bottom:6px}
.pi-footer-nav a{color:#b8bbc7!important;text-decoration:none!important;font-size:14px}.pi-footer-nav a:hover{color:#f4c970!important}
.pi-footer-cta a{display:inline-flex;padding:12px 17px;border:1px solid #f4c970;border-radius:8px;text-decoration:none!important;color:#f4c970!important;font-size:14px;font-weight:700;margin-top:12px}
.pi-footer-bottom{border-top:1px solid #ffffff20;max-width:1310px;margin:auto;padding:23px 28px 25px;display:flex;justify-content:space-between;gap:20px;color:#90949f;font-size:12px}
@media(max-width:1130px){.pi-header-inner{gap:22px}.pi-nav-list{gap:15px}.pi-header-cta{padding:13px}.pi-brand-type strong{font-size:23px}}
@media(max-width:1000px){.pi-primary-nav{overflow-x:auto}.pi-nav-list{justify-content:flex-start;min-width:max-content}.pi-header-inner{height:77px}.pi-footer-inner{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.pi-header-inner{height:auto;min-height:72px;flex-wrap:wrap;padding:14px 17px;gap:12px}.pi-primary-nav{order:3;width:100%;flex-basis:100%}.pi-header-cta{margin-left:auto}.pi-footer-inner{grid-template-columns:1fr 1fr;padding:48px 21px}.pi-footer-bottom{flex-direction:column;padding:22px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}

/* 0.2.1 Live fidelity: remove WordPress block theme gutters/gaps on SCS pages. */
body.scs-pb-builder-page:not(.scsm){padding:0!important;margin:0!important}
body.scs-pb-builder-page:not(.scsm) .wp-site-blocks{padding:0!important;margin:0!important;max-width:100%!important}
body.scs-pb-builder-page:not(.scsm) .wp-site-blocks>main,
body.scs-pb-builder-page:not(.scsm) .wp-site-blocks>footer,
body.scs-pb-builder-page:not(.scsm) .wp-site-blocks>header{margin-block-start:0!important;margin-block-end:0!important}
body.scs-pb-builder-page:not(.scsm) main.piano-illg-content-main,
body.scs-pb-builder-page:not(.scsm) main.piano-illg-content-main>.wp-block-post-content,
body.scs-pb-builder-page:not(.scsm) main.piano-illg-content-main>.wp-block-group,
body.scs-pb-builder-page:not(.scsm) .wp-block-post-content{width:100%!important;max-width:100%!important;margin:0!important;padding:0!important}
body.scs-pb-builder-page:not(.scsm) .wp-block-post-content>.wp-block-shortcode,
body.scs-pb-builder-page:not(.scsm) .wp-block-post-content>.wp-block-shortcode+.wp-block-shortcode{margin:0!important;padding:0!important;max-width:none!important}
body.scs-pb-builder-page:not(.scsm) .scs-pb{margin-block:0!important}
body:not(.scsm) .pi-site-header{width:100%;margin:0}
body:not(.scsm) .pi-header-inner{height:78px;max-width:1320px}
body:not(.scsm) .pi-header-cta{padding:12px 16px}
@media(max-width:1100px){body:not(.scsm) .pi-header-inner{max-width:100%;padding-inline:22px}}