/* Qi-inspired style layer: black & white, editorial serif, spaced caps — style only */
:root{--qi-ink:#111;--qi-black:#000;--qi-muted:#5d5d5d;--qi-mauve:#9b8a90;--qi-line:#e6e3e6;--qi-tile:#f1f0f3;--qi-serif:"GFS Didot","Noto Serif Display","Noto Serif",Georgia,serif;--qi-sans:Roboto,"Helvetica Neue",Arial,sans-serif;--accent:#111;--ink:#111;--muted:#5d5d5d;--line:#e6e3e6;--cream:#fff}
html body{background:#fff;color:var(--qi-ink);font-family:var(--qi-sans);font-weight:400;-webkit-font-smoothing:antialiased}
body p{color:var(--qi-muted);line-height:1.75}
/* top demo strip */
body .demo{background:#000;color:#bdb6b9;font:400 11px var(--qi-sans);letter-spacing:.14em;padding:10px 16px}
/* header */
body>header{height:104px;padding:0 4.5%;background:#fff;border-bottom:0;backdrop-filter:none;box-shadow:0 1px 0 var(--qi-line)}
body>header .brand{font:italic 400 36px/1 var(--qi-serif);letter-spacing:-.01em;color:#000}
body>header .brand:after{color:var(--qi-mauve)!important;font-family:var(--qi-sans)!important;letter-spacing:.32em!important}
body>header .nav{gap:46px}
body>header .nav a{font:400 13.5px var(--qi-sans);letter-spacing:.2em;text-transform:uppercase;color:#111;position:relative;padding:8px 0;border:0!important;border-radius:0!important;background:none!important}
body>header .nav a:last-child{padding:8px 0!important}
body>header .nav a:after{content:'';position:absolute;left:0;right:0;bottom:2px;height:1px;background:#111;transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
body>header .nav a:hover:after,body>header .nav a:focus-visible:after{transform:scaleX(1)}
/* eyebrow */
body .eyebrow{font:500 12.5px var(--qi-sans);letter-spacing:.32em;color:var(--qi-mauve);text-transform:uppercase}
/* headings */
body h1,body h2,body h3{font-family:var(--qi-serif);font-style:normal;font-weight:400;color:#111;letter-spacing:-.005em}
body h1 em,body h2 em{font-style:normal;color:inherit}
body h2{font-size:clamp(38px,4.6vw,72px);line-height:1.06;margin:14px 0 0}
/* buttons */
body .btn{border-radius:0;box-shadow:none;background:#000;border:1px solid #000;color:#fff;font:500 12.5px var(--qi-sans);letter-spacing:.24em;text-transform:uppercase;min-height:62px;padding:20px 44px;transition:background .3s,color .3s}
body .btn:hover{background:#fff;color:#000}
body .btn.secondary{background:transparent;border:0;border-bottom:1px solid currentColor;padding:10px 0;min-height:0;color:#111}
body .btn.secondary:hover{background:transparent;opacity:.7}
/* hero: black panel + image side */
body main .hero{padding:0;gap:0;grid-template-columns:minmax(420px,38%) 1fr;min-height:calc(100vh - 140px);align-items:stretch;background:#000}
body main .hero>div:first-child{padding:9vh 4.5vw;display:flex;flex-direction:column;justify-content:center;background:#000}
body main .hero .eyebrow{font-size:13px;color:#a39498}
body main .hero h1{color:#fff;font-size:clamp(46px,4.4vw,80px);line-height:1.08;overflow-wrap:break-word;letter-spacing:-.01em;margin:22px 0 30px;max-width:none}
body main .hero h1 em{color:#fff}
body main .hero p{color:#b9b4b6;font-size:16px}
body main .hero .note{color:#7c7679;font-size:12px;letter-spacing:.06em}
body main .hero .buttons{display:flex;flex-wrap:wrap;align-items:center;gap:26px;margin:34px 0 22px}
body main .hero .btn{background:#fff;color:#000;border-color:#fff}
body main .hero .btn:hover{background:transparent;color:#fff}
body main .hero .btn.secondary{background:transparent;color:#fff;border-bottom-color:#fff6}
body main .hero .hero-video-wrap{width:100%;max-width:none;height:auto;min-height:100%;aspect-ratio:auto;max-height:none;border:0;border-radius:0;margin:0;background:#f3f1f2}
body main .hero .hero-video{height:100%;max-height:calc(100vh - 140px);width:auto;max-width:100%;object-fit:contain}
body main .hero .video-pause{border-radius:50%!important;width:58px;height:58px;min-height:0;padding:0;background:#000!important;color:#fff!important;border:0!important;font:500 10px var(--qi-sans);letter-spacing:.06em;right:26px;top:26px}
body main .hero .video-caption{font:500 11px var(--qi-sans);letter-spacing:.32em;color:#8f8a8c;bottom:24px}
/* sections */
body main .section{padding:120px 5.5%;border-top:0;max-width:1600px}
body .section-top{align-items:flex-end;gap:60px}
body .section-top p{font-size:17px;max-width:560px;color:var(--qi-muted)}
/* filters */
body .filters{justify-content:flex-start;gap:0;margin:56px 0 56px;border-bottom:1px solid var(--qi-line)}
body .filter{border:0!important;border-radius:0!important;background:none!important;color:#8b8588!important;font:400 12.5px var(--qi-sans)!important;letter-spacing:.2em;text-transform:uppercase;padding:16px 22px!important;position:relative;min-height:0}
body .filter:hover{color:#111!important}
body .filter.active{color:#111!important}
body .filter.active:after{content:'';position:absolute;left:22px;right:22px;bottom:-1px;height:1px;background:#111}
/* catalog cards */
body .grid{gap:70px 34px}
body .template{background:transparent;border:0;border-radius:0}
body .thumb,body .thumb.has-tp{border-radius:0!important;border:0!important;background:var(--qi-tile)!important;height:440px!important;transform:none!important}
body .template:hover .thumb{transform:none!important}
body .thumb .tp{inset:7% 8%;width:84%;height:86%;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
body .template:hover .thumb .tp{transform:scale(1.04)}
body .template-info{padding:28px 0 0;text-align:left}
body .template-info small{font:500 11.5px var(--qi-sans);letter-spacing:.3em;text-transform:uppercase;color:var(--qi-mauve)}
body .template-info h3{font:400 34px/1.15 var(--qi-serif);color:#111;margin:10px 0 12px}
body .template-info p{font-size:15px;color:var(--qi-muted);margin:0 0 14px}
body .template-info .price{font:400 13px var(--qi-sans);letter-spacing:.06em;color:#8b8588;margin-bottom:22px}
body .template-info .btn{background:transparent;color:#111;border:1px solid #111;min-height:54px;padding:16px 30px;font-size:11.5px;width:auto}
body .template-info .btn:hover{background:#111;color:#fff}
/* how */
body main #how{max-width:none;background:var(--qi-tile);text-align:left;padding-left:8%;padding-right:8%}
body .steps{max-width:none;gap:56px;margin-top:70px}
body .steps b{font:400 88px/1 var(--qi-serif);color:#111;display:block;margin-bottom:24px}
body .steps h3{font:400 32px var(--qi-serif);color:#111;margin:0 0 12px}
body .steps p{font-size:15.5px}
/* custom (dark band) */
body main .custom{background:#000;color:#fff;padding:130px 8%;gap:90px}
body .custom h2{font:400 clamp(40px,4.4vw,66px)/1.1 var(--qi-serif);color:#fff}
body .custom .eyebrow{color:#a39498}
body .custom p{color:#b9b4b6}
body .custom strong{color:#fff;font-weight:500}
body .custom-form{background:#fff;border-radius:0;padding:44px;box-shadow:none}
body .custom-form label,body .checkout label{font:500 11.5px var(--qi-sans);letter-spacing:.2em;text-transform:uppercase;color:#8b8588}
body .custom-form input,body .custom-form select,body .custom-form textarea,body .checkout input{border:0;border-bottom:1px solid #cfcacd;border-radius:0;background:transparent;padding:12px 0;font:400 16px var(--qi-sans);color:#111;text-transform:none;letter-spacing:0}
body .custom-form input:focus,body .custom-form select:focus,body .custom-form textarea:focus,body .checkout input:focus{outline:0;border-bottom-color:#111}
body .custom-form .btn{width:100%}
/* faq */
body .faq{max-width:1100px!important}
body .faq details{border-color:var(--qi-line);padding:30px 0}
body .faq summary{font:400 28px var(--qi-serif);color:#111;list-style:none;display:flex;justify-content:space-between;gap:20px}
body .faq summary::-webkit-details-marker{display:none}
body .faq summary:after{content:'+';font:300 30px/1 var(--qi-sans);color:#111;transition:transform .3s}
body .faq details[open] summary:after{transform:rotate(45deg)}
body .faq details p{font-size:16px;max-width:760px;margin:16px 0 0}
/* footer */
body>footer{background:#000;color:#b9b4b6;padding:80px 5.5%;border:0;display:flex;justify-content:space-between;align-items:center;text-align:left}
body>footer .brand{font:italic 400 40px var(--qi-serif);color:#fff}
body>footer p{color:#b9b4b6;font:400 22px var(--qi-serif)}
body>footer a{color:#fff;font:500 12px var(--qi-sans);letter-spacing:.24em;text-transform:uppercase;border-bottom:1px solid #fff6;padding-bottom:6px}
/* dialogs */
body .dialogbar{background:#fff;border-bottom:1px solid var(--qi-line)}
body .dialogbar span{font:400 22px var(--qi-serif);color:#111}
body .dialogbar .btn{min-height:50px;padding:14px 28px}
body .close{border-radius:50%!important;background:#000!important;color:#fff!important;border:0!important;width:46px;height:46px}
body .checkout{border-radius:0;background:#fff;padding:44px}
body .checkout h2{font:400 44px/1.1 var(--qi-serif);color:#111}
body .checkout .btn{width:100%}
/* rsvp & gallery pages share the language */
body .rd,body .gl{background:#fff}
body .rd h2,body .gl-head h1{font-family:var(--qi-serif);font-style:normal;font-weight:400}
body .gl-card,body .rd-card,body .rd-kpis .k{border-radius:0}
body .gl-btn,body .rd-btn.p{border-radius:0;background:#000;letter-spacing:.24em}
body .gl-ic{background:#000}
@media (max-width:900px){
 body main .hero{grid-template-columns:1fr;min-height:0}
 body main .hero>div:first-child{padding:64px 7%}
 body main .hero .hero-video-wrap{min-height:0;aspect-ratio:512/920;max-height:80vh}
 body>header .nav{gap:22px}
 body main .section{padding:80px 6%}
 body .thumb,body .thumb.has-tp{height:360px!important}
 body .filters{overflow-x:auto;flex-wrap:nowrap}
 body .filter{white-space:nowrap;padding:14px 14px!important}
 body .filter.active:after{left:14px;right:14px}
 body>footer{flex-direction:column;gap:26px;text-align:center}
}
@media (max-width:560px){
 body>header{height:80px}
 body>header{padding:0 16px}
 body>header .brand{font-size:26px}
 body>header .nav{gap:14px}
 body>header .nav a{font-size:10.5px!important;letter-spacing:.12em!important;text-align:right}
 body>header .brand:after{display:none}
 body main .hero h1{font-size:50px}
 body h2{font-size:38px}
 body .template-info h3{font-size:28px}
 body .steps b{font-size:64px}
 body .custom-form{padding:28px}
 body .checkout{padding:26px}
}
/* responsive fixes (mobile & tablet) */
body .filters{scrollbar-width:none;-webkit-overflow-scrolling:touch}
body .filters::-webkit-scrollbar{display:none}
body .filter{flex:none!important;white-space:nowrap}
body .nav-toggle{display:none}
@media (max-width:900px){
 body main .hero h1{font-size:clamp(40px,7vw,64px)}
 body .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 22px}
 body .template-info h3{font-size:28px}
 body .section-top{flex-direction:column;align-items:flex-start;gap:18px}
 body main .custom{grid-template-columns:1fr;padding:90px 7%;gap:44px}
 body .steps{grid-template-columns:1fr 1fr;gap:40px}
}
@media (max-width:640px){
 body>header{height:72px;padding:0 16px;position:sticky}
 body>header .brand-logo img{height:38px!important}
 body>header .brand-logo .brand-tag{font-size:7.5px!important;letter-spacing:.26em!important;margin-top:4px!important}
 body .nav-toggle{display:flex;flex-direction:column;justify-content:center;gap:6px;width:44px;height:44px;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer}
 body .nav-toggle i{display:block;height:1.5px;background:#111;transition:transform .3s,opacity .3s}
 body.nav-open .nav-toggle i:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
 body.nav-open .nav-toggle i:nth-child(2){opacity:0}
 body.nav-open .nav-toggle i:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
 body>header .nav{display:none!important;position:absolute;left:0;right:0;top:100%;background:#fff;flex-direction:column;gap:0!important;padding:8px 16px 18px;box-shadow:0 12px 24px #0000001a;z-index:50}
 body.nav-open>header .nav{display:flex!important}
 body>header .nav a{display:block!important;width:100%;font-size:13px!important;letter-spacing:.2em!important;padding:16px 0!important;border-bottom:1px solid var(--qi-line)!important;text-align:left}
 body>header .nav a:after{display:none}
 body main .hero h1{font-size:40px;margin:16px 0 22px}
 body main .hero>div:first-child{padding:52px 22px}
 body main .hero .buttons{flex-direction:column;align-items:stretch;gap:16px}
 body main .hero .btn{width:100%}
 body main .hero .btn.secondary{align-self:center;width:auto}
 body .grid{grid-template-columns:1fr;gap:54px}
 body .thumb,body .thumb.has-tp{height:330px!important}
 body .steps{grid-template-columns:1fr}
 body main .section{padding:64px 18px}
 body h2{font-size:34px}
 body .faq summary{font-size:21px}
 body .custom-form{padding:22px}
 body .dialogbar{height:auto!important;min-height:56px;padding:8px 10px!important;gap:8px}
 body .dialogbar span{font-size:15px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
 body .dialogbar .btn{min-height:40px!important;padding:10px 12px!important;font-size:10px!important;letter-spacing:.12em!important;flex:none}
 body .close{width:40px!important;height:40px!important;flex:none}
 body>footer{padding:56px 22px}
 body>footer p{font-size:18px}
}
/* v2: μενού & μπάρα editor σε tablet/κινητό */
body>header .nav{gap:clamp(22px,2.4vw,40px)}
body>header .nav a{font-size:12.5px;letter-spacing:.18em;white-space:nowrap}
body .dialogbar{gap:14px}
body .dialogbar>span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body .dialogbar>div{display:flex;align-items:center;gap:12px;flex:none}
body .dialogbar .btn{white-space:nowrap}
body .dialogbar .btn:focus:not(:focus-visible),body .close:focus:not(:focus-visible){outline:0}
@media (max-width:1240px){
 body>header{position:sticky}
 body .nav-toggle{display:flex;flex-direction:column;justify-content:center;gap:6px;width:44px;height:44px;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer}
 body .nav-toggle i{display:block;height:1.5px;background:#111;transition:transform .3s,opacity .3s}
 body.nav-open .nav-toggle i:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
 body.nav-open .nav-toggle i:nth-child(2){opacity:0}
 body.nav-open .nav-toggle i:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
 body>header .nav{display:none!important;position:absolute;left:0;right:0;top:100%;background:#fff;flex-direction:column;gap:0!important;padding:8px 4.5% 18px;box-shadow:0 12px 24px #0000001a;z-index:50}
 body.nav-open>header .nav{display:flex!important}
 body>header .nav a{display:block!important;width:100%;font-size:13px!important;letter-spacing:.2em!important;padding:18px 0!important;border-bottom:1px solid var(--qi-line)!important;text-align:left}
 body>header .nav a:last-child{border-bottom:0!important}
 body>header .nav a:after{display:none}
}
@media (max-width:900px){
 body .dialogbar{min-height:60px;height:auto!important;padding:8px 14px!important}
 body .dialogbar>span{font-size:17px!important}
 body .dialogbar .btn{min-height:44px!important;padding:12px 18px!important;font-size:11px!important;letter-spacing:.14em!important}
 body .close{width:44px!important;height:44px!important;flex:none}
 body .editor-dialog iframe{height:calc(100% - 60px)!important}
}
@media (max-width:520px){
 body .dialogbar{display:grid!important;grid-template-columns:1fr auto;gap:8px 10px!important;padding:8px 10px!important}
 body .dialogbar>span{font-size:14px!important;grid-column:1/2}
 body .dialogbar>div{display:contents}
 body .dialogbar .btn{grid-column:1/-1;grid-row:2;width:100%;max-width:none!important}
 body .dialogbar .close{grid-column:2;grid-row:1;width:40px!important;height:40px!important}
 body .editor-dialog iframe{height:calc(100% - 108px)!important}
}
@media (max-width:1240px){body>header .nav a:last-child{padding:18px 0!important}}
body .dialogbar .btn{background:#000;color:#fff;border-color:#000}
@media (hover:hover){body .dialogbar .btn:hover{background:#fff;color:#000}}