/* Vicera.fi, tarkistettu 3.10.2026: sivuston nykyinen tehosteväri #FFDB08. */
.vql-demo-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; max-width:100%; justify-content:var(--vql-align, flex-start); }
.vql-demo-actions.vql-demo-actions--category { flex-direction:column; flex-wrap:nowrap; align-items:var(--vql-align, flex-start); justify-content:flex-start; gap:16px; }
.vql-demo-search-actions { display:flex; flex-direction:column; align-items:flex-start; align-self:flex-start; box-sizing:border-box; width:max-content; max-width:100%; margin:0 0 var(--vql-search-end-gap,20px); padding:0; border:0; }
body button.vql-demo-add { display:inline-flex; align-items:center; justify-content:center; gap:8px; box-sizing:border-box; width:auto; max-width:100%; flex:0 0 auto; min-height:var(--vql-cta-height,50px); margin:0; padding:14px 30px; border:0; border-radius:0; background:#FFDB08; color:#000; box-shadow:none; font-family:"Raleway",sans-serif; font-size:16px; font-weight:700; font-style:normal; line-height:1em; letter-spacing:0; text-transform:uppercase; text-decoration:none; cursor:pointer; transition:filter .2s; }
body button.vql-demo-add:hover, body button.vql-demo-add:focus, body button.vql-demo-add:focus-visible, body button.vql-demo-add:active { background:#FFDB08; color:#000; border:0; box-shadow:none; text-decoration:none; }
body button.vql-demo-add.vql-demo-add--category { background:#fff; color:#000; padding:14px 30px; }
body button.vql-demo-add.vql-demo-add--category:hover, body button.vql-demo-add.vql-demo-add--category:focus, body button.vql-demo-add.vql-demo-add--category:focus-visible, body button.vql-demo-add.vql-demo-add--category:active { background:#fff; color:#000; border:0; box-shadow:none; text-decoration:none; }
body button.vql-demo-add.vql-demo-add--category.vql-demo-add--search { font-family:"Raleway",sans-serif; font-size:var(--vql-search-font-size,16px); font-weight:700; line-height:var(--vql-search-line-height,1.4); padding:var(--vql-search-padding,14px 30px); }
body button.vql-demo-add.vql-demo-add--search .vql-demo-add-label { min-width:0; overflow-wrap:anywhere; line-height:var(--vql-search-line-height,1.4); }
/* Only the added second action extends the native hover panel's height limit. */
body.search .vicera-search-card-hover:hover .vicera-search-card-button-wrap.vql-demo-search-native,
body.search-results .vicera-search-card-hover:hover .vicera-search-card-button-wrap.vql-demo-search-native,
body.search .vicera-search-card-hover.is-open .vicera-search-card-button-wrap.vql-demo-search-native,
body.search-results .vicera-search-card-hover.is-open .vicera-search-card-button-wrap.vql-demo-search-native { max-height:var(--vql-search-max-height,200px)!important; }
body button.vql-demo-add:focus-visible, #vql-demo-ui button:focus-visible, #vql-demo-ui a:focus-visible { outline:2px solid #000; outline-offset:3px; }
body button.vql-demo-add .vql-demo-plus { font-family:"Raleway",sans-serif; font-size:1.3em; font-weight:700; line-height:1; }
body button.vql-demo-add .vql-demo-add-label { font-family:"Raleway",sans-serif; font-size:1em; font-weight:700; line-height:1em; }
body button.vql-demo-add:disabled { opacity:.55; cursor:wait; }
#vql-demo-ui { --vql-bottom:20px; font-family:"Raleway",sans-serif; color:#000; }
#vql-demo-ui *, #vql-demo-ui *::before, #vql-demo-ui *::after { box-sizing:border-box; }
#vql-demo-ui [hidden] { display:none!important; }
#vql-demo-ui[hidden] { display:none!important; }
#vql-demo-ui .vql-demo-launcher { position:fixed; right:20px; bottom:calc(var(--vql-bottom) + env(safe-area-inset-bottom,0px)); z-index:9000; display:flex; align-items:center; justify-content:center; width:58px; height:58px; margin:0; padding:0; background:#000; color:#fff; border:0; border-radius:50%; box-shadow:none; cursor:pointer; font-family:"Raleway",sans-serif; }
#vql-demo-ui .vql-demo-launcher:hover, #vql-demo-ui .vql-demo-launcher:focus, #vql-demo-ui .vql-demo-launcher:active { background:#000; color:#fff; }
#vql-demo-ui .vql-demo-launcher svg { width:26px; height:26px; color:#fff; stroke:currentColor; }
#vql-demo-ui .vql-demo-count { position:absolute; top:-4px; right:-4px; min-width:24px; height:24px; padding:4px; border:0; border-radius:50%; background:#FFDB08; color:#000; text-align:center; font-family:"Raleway",sans-serif; font-size:13px; font-weight:800; line-height:16px; }
#vql-demo-ui .vql-demo-toast { position:fixed; right:20px; bottom:calc(var(--vql-bottom) + 72px + env(safe-area-inset-bottom,0px)); z-index:9001; max-width:min(340px,calc(100vw - 40px)); margin:0; padding:12px 16px; background:#000; color:#fff; font-family:"Raleway",sans-serif; font-size:14px; font-weight:600; line-height:1.4; }
#vql-demo-ui .vql-demo-dialog { position:fixed; inset:0; width:580px; max-width:calc(100vw - 32px); max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); margin:auto; padding:26px; overflow:auto; overscroll-behavior:contain; background:#fff; color:#000; border:0; border-radius:0; box-shadow:0 12px 48px #0003; font-family:"Raleway",sans-serif; font-size:16px; font-weight:600; line-height:1.4; }
#vql-demo-ui .vql-demo-dialog:not([open]) { display:none; }
#vql-demo-ui .vql-demo-dialog::backdrop { background:#0008; }
#vql-demo-ui .vql-demo-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 16px; }
#vql-demo-ui h2 { margin:0; padding:0; color:#000; font-family:"Raleway",sans-serif; font-size:30px; font-weight:900; line-height:1.1; letter-spacing:0; text-transform:uppercase; }
#vql-demo-ui p { margin:0 0 14px; padding:0; font-family:"Raleway",sans-serif; font-size:16px; font-weight:600; line-height:1.4; letter-spacing:0; }
#vql-demo-ui .vql-demo-close { display:flex; align-items:center; justify-content:center; flex:0 0 44px; width:44px; height:44px; margin:0; padding:0; border:0; border-radius:0; background:transparent; color:#000; box-shadow:none; font-family:"Raleway",sans-serif; font-size:32px; font-weight:700; line-height:1; cursor:pointer; }
#vql-demo-ui .vql-demo-close:hover, #vql-demo-ui .vql-demo-close:focus, #vql-demo-ui .vql-demo-close:active, #vql-demo-ui .vql-demo-remove:hover, #vql-demo-ui .vql-demo-remove:focus, #vql-demo-ui .vql-demo-remove:active { background:transparent; color:#000; }
#vql-demo-ui .vql-demo-products { display:flex; flex-direction:column; gap:12px; margin:0 0 18px; padding:0; list-style:none; }
#vql-demo-ui .vql-demo-products li { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px 12px; margin:0; padding:0; background:transparent; font-family:"Raleway",sans-serif; font-size:15px; font-weight:700; line-height:1.3; }
#vql-demo-ui .vql-demo-products a, #vql-demo-ui .vql-demo-products a:visited { min-width:0; overflow-wrap:anywhere; color:#000; font-family:"Raleway",sans-serif; font-size:15px; font-weight:700; line-height:1.3; text-decoration:underline; text-underline-offset:3px; }
#vql-demo-ui .vql-demo-remove { flex:0 0 auto; min-height:44px; margin:0; padding:10px 4px; border:0; border-radius:0; background:transparent; color:#000; font-family:"Raleway",sans-serif; font-size:13px; font-weight:700; line-height:1.3; cursor:pointer; }
#vql-demo-ui .vql-demo-quantity { grid-column:1 / -1; display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; padding-bottom:8px; }
#vql-demo-ui label.vql-demo-quantity-label { font-size:13px; font-weight:700; line-height:1.3; }
#vql-demo-ui .vql-demo-quantity-controls { display:inline-flex; align-items:center; gap:4px; }
#vql-demo-ui input.vql-demo-quantity-input { width:84px; min-height:44px; margin:0; padding:8px; text-align:center; font-family:"Raleway",sans-serif; font-size:16px; font-weight:700; line-height:1.2; -moz-appearance:textfield; appearance:textfield; }
#vql-demo-ui input.vql-demo-quantity-input::-webkit-inner-spin-button, #vql-demo-ui input.vql-demo-quantity-input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
#vql-demo-ui .vql-demo-quantity-button, #vql-demo-ui .vql-demo-quantity-button:hover, #vql-demo-ui .vql-demo-quantity-button:focus, #vql-demo-ui .vql-demo-quantity-button:active { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin:0; padding:0; border:0; border-radius:0; background:#000; color:#fff; box-shadow:none; font-family:"Raleway",sans-serif; font-size:23px; font-weight:700; line-height:1; cursor:pointer; }
#vql-demo-ui .vql-demo-quantity-button:disabled { opacity:.45; cursor:default; }
#vql-demo-ui .vql-demo-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:20px 0; }
#vql-demo-ui label { display:block; margin:0; padding:0; color:#000; font-family:"Raleway",sans-serif; font-size:16px; font-weight:800; line-height:1.2; letter-spacing:0; }
#vql-demo-ui label span { color:#000; font-family:"Raleway",sans-serif; }
#vql-demo-ui .vql-demo-wide { grid-column:1 / -1; }
#vql-demo-ui input, #vql-demo-ui textarea { display:block; width:100%; min-width:0; margin:8px 0 0; padding:10px 12px; border:2px solid #000; border-radius:0; background:#fff; color:#000; box-shadow:none; font-family:"Raleway",sans-serif; font-size:16px; font-weight:800; line-height:1.3; letter-spacing:0; }
#vql-demo-ui input:focus-visible, #vql-demo-ui textarea:focus-visible { outline:2px solid #000; outline-offset:2px; }
#vql-demo-ui textarea { resize:vertical; }
#vql-demo-ui input::placeholder, #vql-demo-ui textarea::placeholder { font-family:"Raleway",sans-serif; }
#vql-demo-ui .vql-demo-primary { display:inline-flex; align-items:center; justify-content:center; min-height:46px; max-width:100%; margin:0; padding:14px 22px; border:0; border-radius:0; background:#000; color:#fff; box-shadow:none; font-family:"Raleway",sans-serif; font-size:14px; font-weight:700; line-height:1.2; letter-spacing:0; text-transform:uppercase; cursor:pointer; }
#vql-demo-ui .vql-demo-primary:hover, #vql-demo-ui .vql-demo-primary:focus, #vql-demo-ui .vql-demo-primary:active { background:#000; color:#fff; }
#vql-demo-ui .vql-demo-primary:disabled { opacity:.55; cursor:default; }
#vql-demo-ui .vql-demo-form-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
#vql-demo-ui #vql-demo-send, #vql-demo-ui #vql-demo-send:hover, #vql-demo-ui #vql-demo-send:focus, #vql-demo-ui #vql-demo-send:active { background:#FFDB08; color:#000; }
#vql-demo-ui .vql-demo-trap { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
#vql-demo-ui #vql-demo-status { margin:14px 0 0; font-size:14px; }
#vql-demo-ui .vql-demo-screen-reader { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
body.vql-demo-modal-open { overflow:hidden; }
/* Samat viisi aktiivista näyttöluokkaa kuin Viceran Elementor-asetuksissa. */
@media (min-width:1201px) and (max-width:1366px) { body button.vql-demo-add { font-size:13px; } #vql-demo-ui h2 { font-size:28px; } #vql-demo-ui p { font-size:15px; } }
@media (min-width:1025px) and (max-width:1200px) { body button.vql-demo-add { font-size:13px; padding:14px 20px; } body button.vql-demo-add.vql-demo-add--category { font-size:12px; padding:14px 20px; } #vql-demo-ui h2 { font-size:26px; } #vql-demo-ui p { font-size:14px; } }
@media (min-width:768px) and (max-width:1024px) { body button.vql-demo-add { font-size:13px; padding:14px 20px; } body button.vql-demo-add.vql-demo-add--category { font-size:12px; padding:14px 20px; } #vql-demo-ui { --vql-bottom:90px; } #vql-demo-ui h2 { font-size:26px; } #vql-demo-ui p { font-size:15px; } }
@media (max-width:767px) { body button.vql-demo-add { font-size:3vw; padding:13px 20px; min-height:var(--vql-cta-height,44px); } body button.vql-demo-add.vql-demo-add--category { font-size:3vw; padding:13px 20px; } .vql-demo-actions:not(.vql-demo-actions--category) { gap:10px; } #vql-demo-ui { --vql-bottom:90px; } #vql-demo-ui .vql-demo-launcher { right:16px; width:54px; height:54px; } #vql-demo-ui .vql-demo-toast { right:16px; max-width:calc(100vw - 32px); } #vql-demo-ui .vql-demo-dialog { max-width:calc(100vw - 20px); padding:20px; } #vql-demo-ui h2 { font-size:25px; } #vql-demo-ui p { font-size:14px; } #vql-demo-ui .vql-demo-fields { grid-template-columns:1fr; gap:14px; } #vql-demo-ui .vql-demo-primary { width:100%; } #vql-demo-ui .vql-demo-products a { font-size:14px; } }
@media (prefers-reduced-motion:reduce) { body button.vql-demo-add { transition:none; } }