/* Product pages and direct contact choices. */
.category-head{max-width:900px;margin-top:42px}
.category-head h1{margin-top:0}
.category-head p{max-width:640px;margin:20px auto 0;font-size:14px;line-height:1.8}
.category-lead{display:block;font-size:clamp(19px,2.1vw,27px);font-weight:500;letter-spacing:-.7px;color:var(--text);line-height:1.4}
.category-caption{display:block;margin-top:10px;font-size:13px;color:var(--muted)}
.systems-overview{gap:20px;margin-top:38px}
.systems-overview>article{padding:34px 28px;border:1px solid var(--line);border-radius:22px;background:var(--paper)}
.systems-overview>article h2{padding-top:23px;border-top:1px solid var(--line);margin-top:25px;font-size:19px}
.systems-overview>article p{margin-top:12px;line-height:1.8}
.system-size{font-size:66px;letter-spacing:-3.5px}
.category-actions{margin-top:32px}
.category-container{--screen-controls-width:200px;--screen-controls-gap:32px}
/* Match the quote button to the preview and colour column. */
.screen-studio:not([hidden])~.category-actions{width:min(880px,100%);margin-inline:auto;box-sizing:border-box;padding-left:calc(var(--screen-controls-width) + var(--screen-controls-gap))}

.product-studio{width:min(880px,100%);margin:36px auto 0;padding:0}
.shutter-studio{display:block;max-width:650px}
.screen-studio{display:grid;grid-template-columns:var(--screen-controls-width) minmax(0,1fr);gap:var(--screen-controls-gap);align-items:start}
.screen-controls{padding-top:24px}
.studio-label{display:block;font-size:10px;font-weight:600;letter-spacing:1px;color:var(--muted);margin-bottom:14px}
.screen-types{display:flex;flex-direction:column;gap:8px}
.screen-type{display:flex;align-items:center;gap:12px;min-height:52px;padding:11px 13px;text-align:left;border:1px solid transparent;border-radius:13px;background:transparent;font-size:13px;color:var(--muted);transition:background .2s,color .2s,border-color .2s}
.screen-type svg{width:23px;height:23px;flex-shrink:0}
.screen-type:hover{background:var(--paper);color:var(--text)}
.screen-type[aria-pressed=true]{color:var(--blue);background:var(--paper);border-color:var(--line)}
.type-dot{width:5px;height:5px;flex-shrink:0;border-radius:50%;background:currentColor;margin-left:auto;opacity:0}
.screen-type[aria-pressed=true] .type-dot{opacity:1}
.screen-description{font-size:12px;line-height:1.9;color:var(--muted);margin-top:22px}
.demo-column{min-width:0}
.demo-stage{--finish:#e6ebef;--finish-light:#fafcfd;--finish-edge:#b1bdc7;--finish-shadow:#7f909d;position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;width:100%;height:400px;padding:44px 28px;border:1px solid var(--line);border-radius:24px;background:radial-gradient(ellipse at 50% 45%,#e1eaf180,transparent 70%),var(--paper);perspective:1000px;overflow:hidden}
.demo-stage:after{content:'';position:absolute;bottom:28px;left:20%;right:20%;height:19px;border-radius:50%;background:radial-gradient(ellipse,#162e432c,transparent 70%);filter:blur(6px);z-index:-1;pointer-events:none}
[data-theme=dark] .demo-stage{background:radial-gradient(ellipse at 50% 45%,#293e4c70,transparent 72%),var(--paper)}
[data-theme=dark] .demo-stage:after{background:radial-gradient(ellipse,#96b2ca24,transparent 70%)}
.demo-toolbar{display:flex;align-items:center;flex-direction:column;gap:6px;margin-top:16px}
.demo-action{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 20px;border:1px solid var(--line);border-radius:25px;background:var(--paper);color:var(--blue);font-size:12px;line-height:1.5}
.demo-action:hover{border-color:var(--blue)}
.demo-status{font-size:10px;line-height:1.6;color:var(--muted);min-height:16px}
.finish-picker{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:16px;padding-top:17px;border-top:1px solid var(--line)}
.finish-caption{font-size:11px;color:var(--muted)}
.finish-options{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.finish-chip{position:relative;display:block;cursor:pointer}
.finish-chip input{position:absolute;width:1px;height:1px;min-height:0;padding:0;border:0;opacity:0;overflow:hidden;clip:rect(0,0,0,0)}
.finish-content{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:7px 12px;border:1px solid var(--line);border-radius:25px;color:var(--muted);font-size:11px}
.finish-swatch{width:23px;height:23px;border-radius:50%;box-shadow:inset 0 0 0 1px #0002,0 1px 2px #0002;flex-shrink:0}
.finish-chip input:checked+.finish-content{border-color:var(--blue);color:var(--text)}
.finish-chip input:focus-visible+.finish-content{outline:3px solid var(--blue);outline-offset:4px}

/* The shutter moves on its rails; the window itself remains stationary. */
.shutter-stage .window-model{display:block;width:220px;height:284px}
.shutter-stage .window-frame{border-color:var(--finish-light) var(--finish-edge) var(--finish-edge) var(--finish);box-shadow:0 0 0 1px var(--finish-shadow),inset 0 0 0 2px var(--finish-shadow),3px 12px 20px #16253228}
.shutter-stage .window-sash{border-color:var(--finish-light) var(--finish-edge) var(--finish-edge) var(--finish)}
.shutter-stage .roller-box{background:linear-gradient(var(--finish-light),var(--finish) 70%,var(--finish-edge));box-shadow:0 0 0 1px var(--finish-shadow),2px -1px 0 var(--finish-light)}
.shutter-stage .roller-curtain{background:repeating-linear-gradient(180deg,var(--finish-edge) 0px,var(--finish-light) 2px,var(--finish) 10px,var(--finish-shadow) 11px,var(--finish-edge) 13px);transition:transform 1.2s cubic-bezier(.45,0,.2,1)}
.shutter-stage .roller-last-slat,.shutter-stage .window-sill{background:linear-gradient(var(--finish-light),var(--finish-edge))}
.shutter-stage[data-open=true] .roller-curtain{transform:translateY(-100%)}

/* Four visibly different screen mechanisms share the same preview material. */
.screen-preview{display:block;position:relative;width:212px;height:292px;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.3,.1,.2,1)}
.screen-surround{position:absolute;inset:0;display:block;border:10px solid;border-color:var(--finish-light) var(--finish-edge) var(--finish-edge) var(--finish);box-shadow:0 0 0 1px var(--finish-shadow),3px 4px 0 var(--finish-edge),5px 10px 18px #1625322b;transform-style:preserve-3d}
.screen-surround:before{content:'';position:absolute;inset:-7px;border:1px solid #ffffff80;pointer-events:none}
.screen-opening{position:absolute;inset:0;background:linear-gradient(155deg,#dceaf2,#ecf3f7 45%,#bdceda);box-shadow:inset 0 0 12px #22394b22}
[data-theme=dark] .screen-opening{background:linear-gradient(155deg,#213d4d,#304a5c 45%,#142c3d)}
.screen-leaf{position:absolute;inset:3px;border:6px solid;border-color:var(--finish-light) var(--finish-edge) var(--finish-edge) var(--finish);background:transparent;box-shadow:0 0 0 1px var(--finish-shadow);transform-origin:0 50%;transform-style:preserve-3d;transition:transform 1.1s cubic-bezier(.3,0,.2,1)}
.insect-fabric{display:block;position:absolute;inset:0;background:repeating-linear-gradient(90deg,#12252d55 0 1px,transparent 1px 3px),repeating-linear-gradient(0deg,#24384560 0 1px,#70828e15 1px 3px);transform-origin:0 50%;transition:transform 1.1s cubic-bezier(.45,0,.2,1);box-shadow:inset 0 0 0 1px #1f303855}
.screen-pull{display:none;position:absolute;right:-5px;top:44%;width:5px;height:27px;border-radius:3px;background:linear-gradient(90deg,var(--finish-shadow),var(--finish-light));box-shadow:1px 0 2px #0003;transform:translateZ(4px)}
.screen-hinge{display:none;position:absolute;left:-9px;width:6px;height:20px;border:1px solid var(--finish-shadow);border-radius:2px;background:linear-gradient(90deg,var(--finish-edge),var(--finish-light));transform:translateZ(3px)}
.screen-hinge-top{top:15%}.screen-hinge-bottom{bottom:15%}
.screen-topbox{display:none;position:absolute;left:-13px;right:-13px;top:-28px;height:27px;background:linear-gradient(var(--finish-light),var(--finish) 70%,var(--finish-edge));border:1px solid var(--finish-shadow);border-radius:2px;box-shadow:0 3px 4px #1729372b;z-index:5}
.fabric-bottom-bar{display:none;position:absolute;bottom:0;left:0;right:0;height:9px;background:linear-gradient(var(--finish-light),var(--finish-edge));box-shadow:0 -1px 0 var(--finish-shadow)}
.fabric-bottom-bar:after{content:'';position:absolute;left:45%;top:1px;width:10%;height:6px;border:1px solid var(--finish-shadow);border-radius:2px}
.screen-stage[data-type=fixed][data-open=true] .screen-preview{transform:rotateY(-28deg) rotateX(3deg)}

.screen-stage[data-type=hinged] .screen-hinge,.screen-stage[data-type=hinged] .screen-pull{display:block}
.screen-stage[data-type=hinged][data-open=true] .screen-leaf{transform:rotateY(-105deg)}
.screen-stage[data-type=pleated] .screen-leaf,.screen-stage[data-type=roller] .screen-leaf{inset:0;border:0;box-shadow:none}
.screen-stage[data-type=pleated] .insect-fabric{background:repeating-linear-gradient(90deg,#172d386b 0px,#b8cbdc18 4px,#1526308c 7px,#cfdeeb32 11px),repeating-linear-gradient(0deg,#24384555 0 1px,transparent 1px 3px)}
.screen-stage[data-type=pleated] .screen-pull{display:block;top:0;bottom:0;right:auto;left:calc(100% - 8px);height:auto;width:8px;border-radius:0;background:linear-gradient(90deg,var(--finish-shadow),var(--finish),var(--finish-edge));transition:left 1.1s cubic-bezier(.45,0,.2,1)}
.screen-stage[data-type=pleated] .screen-pull:after{content:'';position:absolute;top:44%;left:2px;width:4px;height:26px;border:1px solid var(--finish-shadow);border-radius:2px}
.screen-stage[data-type=pleated][data-open=true] .insect-fabric{transform:scaleX(.055)}
.screen-stage[data-type=pleated][data-open=true] .screen-pull{left:4%}
.screen-stage[data-type=roller] .screen-leaf{overflow:hidden}
.screen-stage[data-type=roller] .screen-topbox,.screen-stage[data-type=roller] .fabric-bottom-bar{display:block}
.screen-stage[data-type=roller][data-open=true] .insect-fabric{transform:translateY(-96%)}
.changing-type .screen-preview,.changing-type .screen-leaf,.changing-type .insect-fabric,.changing-type .screen-pull{transition:none!important}

.footer-info{gap:0}
.footer-contacts{display:flex;align-items:center;flex-wrap:wrap;gap:14px 32px}
.footer-phones{display:flex;flex-direction:row;align-items:center;gap:20px;flex-wrap:nowrap}
.footer-contacts .contact-link{font-size:11px}
.phone-link svg{color:var(--blue)}
.social-maps{--social-color:var(--blue);--social-background:var(--blue)}
.social-whatsapp{--social-color:#168b4b;--social-background:#168b4b}
.social-viber{--social-color:#7360f2;--social-background:#7360f2}
.contact-dialog{width:min(610px,calc(100% - 32px));padding:35px}
.contact-dialog h2{margin-top:0;padding-right:32px}
.contact-dialog .dialog-intro{font-size:13px;max-width:420px}
.contact-selection{display:inline-block;margin-top:14px;color:var(--blue);font-size:11px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.contact-block{min-width:0;padding:17px 15px;border:1px solid var(--line);background:var(--bg);border-radius:16px}
.contact-dialog h3{font-size:10px;font-weight:500;letter-spacing:1px;color:var(--muted);margin:0 0 10px}
.contact-phones{display:flex;flex-direction:column;align-items:flex-start}
.contact-phones .phone-link{font-size:15px;letter-spacing:.1px}
.contact-dialog .email-link{font-size:11px;white-space:normal;overflow-wrap:anywhere}
.contact-dialog .email-link svg{color:var(--blue)}
.contact-social{margin-top:24px}
.contact-dialog .social-links{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.contact-dialog .social-link{grid-column:span 2}
.contact-location{display:flex;align-items:center;gap:13px;margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
.contact-location>svg{width:22px;height:22px;color:var(--blue);flex-shrink:0}
.contact-location-title{font-size:12px}
.contact-location p{font-size:11px;color:var(--muted);margin-top:2px}

@media(max-width:760px){
  .category-head{margin-top:30px}.category-head h1{font-size:clamp(34px,8vw,46px);letter-spacing:-1.5px}.category-head p{margin-top:18px;font-size:12px}
  .category-lead{font-size:20px;letter-spacing:-.4px}.category-caption{font-size:12px;max-width:32ch;margin:9px auto 0}
  .systems-overview{gap:14px;margin-top:28px}.systems-overview>article{padding:26px}.systems-overview>article h2{font-size:18px}.system-size{font-size:58px}
  .product-studio{margin-top:28px}.screen-studio{grid-template-columns:minmax(0,1fr);gap:20px}.screen-controls{padding-top:0}.screen-types{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .screen-type{min-height:48px;padding:10px 12px;font-size:12px}.screen-type svg{width:21px;height:21px}.screen-description{margin-top:13px;font-size:12px;line-height:1.7}
  .demo-stage{height:360px;padding:38px 20px;border-radius:20px}.demo-stage:after{bottom:24px}.shutter-stage .window-model{width:204px;height:268px}.screen-preview{width:190px;height:264px}
  .finish-picker{gap:8px 12px}.finish-caption{font-size:10px}.demo-action{font-size:11px}.category-actions{margin-top:27px}.screen-studio:not([hidden])~.category-actions{padding-left:0}
  .footer-contacts{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.footer-phones{gap:18px}.footer-info{justify-content:flex-start}
  .contact-dialog{padding:32px 22px 24px}.contact-grid{grid-template-columns:minmax(0,1fr)}.contact-block{padding:13px 15px}.contact-dialog h3{margin-bottom:6px}.contact-dialog .email-link{font-size:13px}.contact-dialog .social-links{gap:6px}.contact-social{margin-top:20px}.contact-location{margin-top:20px}
}
@media(max-width:380px){.demo-stage{height:340px}.screen-preview{width:178px;height:248px}.shutter-stage .window-model{width:190px;height:250px}.screen-type{gap:8px}.contact-dialog .social-link{padding-inline:4px;font-size:9px;gap:4px}}