@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Anton&family=Bebas+Neue&family=Caveat:wght@400;600&family=Cinzel:wght@400;600;700&family=Comfortaa:wght@400;600;700&family=Dancing+Script:wght@400;600;700&family=Great+Vibes&family=Lobster&family=Lora:wght@400;600;700&family=Merriweather:wght@400;700&family=Montserrat:wght@400;500;600;700&family=Nunito:wght@400;600;700&family=Oswald:wght@400;600;700&family=Pacifico&family=Playfair+Display:wght@400;600;700&family=Poppins:wght@400;500;600;700&family=Quicksand:wght@400;600;700&family=Raleway:wght@400;600;700&family=Roboto:wght@400;500;700&display=swap');

.s2y-studio,.s2y-studio *{box-sizing:border-box}
.s2y-studio{
 --primary:#BAA360;--secondary:#FCFBF8;--text:#4F4F4F;--accent:#B38B6D;
 display:grid;grid-template-columns:minmax(300px,390px) minmax(0,1fr);gap:28px;width:100%;
 padding:26px;border:1px solid rgba(186,163,96,.28);border-radius:24px;background:var(--secondary);
 color:var(--text);font-family:Roboto,Arial,sans-serif
}
.s2y-panel{padding:28px;border-radius:20px;background:#fff;box-shadow:0 12px 34px rgba(79,79,79,.08)}
.s2y-eyebrow{margin:0 0 7px;color:var(--accent);font:700 12px/1.3 Montserrat,Arial,sans-serif;letter-spacing:.13em;text-transform:uppercase}
.s2y-panel h2{margin:0 0 10px;font:700 clamp(27px,3vw,38px)/1.1 "Playfair Display",Georgia,serif;color:var(--text)}
.s2y-intro{margin:0 0 22px;line-height:1.6}
.s2y-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:20px}
.s2y-tab{padding:9px 5px;border:1px solid #e4dece;border-radius:9px;background:#fff;color:var(--text);font:600 12px Montserrat,Arial,sans-serif;cursor:pointer}
.s2y-tab.is-active{background:var(--primary);border-color:var(--primary);color:#fff}
.s2y-tabpanel{display:none}.s2y-tabpanel.is-active{display:block}
.s2y-field{margin:0 0 16px}.s2y-field label{display:block;margin:0 0 7px;font:700 13px Montserrat,Arial,sans-serif}
.s2y-field textarea,.s2y-field select,.s2y-field input[type=text],.s2y-field input[type=color]{
 width:100%;border:1px solid #ded9cc;border-radius:11px;background:#fff;color:var(--text)
}
.s2y-field textarea,.s2y-field select,.s2y-field input[type=text]{min-height:45px;padding:10px 12px;font-family:Roboto,Arial,sans-serif}
.s2y-field textarea{resize:vertical}.s2y-field input[type=color]{height:45px;padding:4px;cursor:pointer}
.s2y-field input[type=range]{width:100%;accent-color:var(--primary)}
.s2y-field small,.s2y-help,.s2y-save-status{display:block;color:#777;font-size:12px;line-height:1.5}
.s2y-color-row{display:grid;grid-template-columns:58px 1fr;gap:10px}
.s2y-grid-two{display:grid;grid-template-columns:1.3fr .7fr;gap:11px}
.s2y-button,.s2y-secondary,.s2y-danger,.s2y-upload{font-family:Montserrat,Arial,sans-serif;font-weight:700}
.s2y-button{width:100%;min-height:47px;margin:0 0 12px;padding:12px 17px;border:0;border-radius:999px;background:var(--primary);color:#fff;cursor:pointer}
.s2y-secondary{width:100%;min-height:42px;margin:0 0 8px;padding:9px 10px;border:1px solid rgba(179,139,109,.45);border-radius:10px;background:#fff;color:var(--text);cursor:pointer}
.s2y-danger{width:100%;min-height:42px;padding:9px 10px;border:1px solid #c99;border-radius:10px;background:#fff7f7;color:#8a3d3d;cursor:pointer}
.s2y-upload{display:flex!important;align-items:center;justify-content:center;min-height:48px;padding:12px 17px;border:1px dashed var(--accent);border-radius:11px;color:var(--accent);cursor:pointer}
.s2y-upload input{display:none}.s2y-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.s2y-check{display:flex;align-items:center;gap:9px;font:600 13px Montserrat,Arial,sans-serif}.s2y-check input{accent-color:var(--primary)}
.s2y-toolbar{display:flex;justify-content:space-between;gap:15px;margin:0 0 12px;color:#777;font-size:13px}
.s2y-size-label{color:var(--accent);font-family:Montserrat,Arial,sans-serif}
.s2y-ceramic-frame{padding:34px;border-radius:24px;background:linear-gradient(145deg,#eee9df,#f8f5ef);box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.s2y-canvas-shell{
 position:relative;width:min(720px,100%);aspect-ratio:1/1;margin:0 auto;border-radius:8px;background:#fff;overflow:hidden;
 box-shadow:0 18px 45px rgba(79,79,79,.22),inset 0 0 0 2px rgba(255,255,255,.8),inset 0 0 18px rgba(179,139,109,.12)
}
.s2y-canvas-shell:before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.35),transparent 38%,rgba(186,163,96,.05));mix-blend-mode:multiply}
.s2y-canvas-shell .canvas-container{
 width:100%!important;
 height:100%!important;
 position:absolute!important;
 inset:0;
}
.s2y-canvas-shell canvas{
 width:100%!important;
 height:100%!important;
 touch-action:none;
}
.s2y-safe-area{position:absolute;inset:10%;z-index:5;pointer-events:none;border:2px dashed rgba(179,139,109,.72)}
.s2y-margin-label{position:absolute;z-index:6;top:calc(10% - 10px);left:50%;transform:translateX(-50%);padding:2px 7px;border-radius:20px;background:rgba(252,251,248,.92);color:var(--accent);font:600 10px Montserrat,Arial,sans-serif;pointer-events:none}
.s2y-help{margin-top:12px;text-align:center}
.s2y-quality{padding:9px 11px;border-radius:9px;background:#fff7df;color:#735f22;font-size:12px}
.s2y-save-status{min-height:18px;margin-top:8px}.s2y-save-status.is-error{color:#9c3a3a}.s2y-save-status.is-success{color:#477447}
@media(max-width:900px){.s2y-studio{grid-template-columns:1fr;padding:16px}.s2y-workspace{order:-1}.s2y-ceramic-frame{padding:18px}}
@media(max-width:520px){.s2y-panel{padding:19px}.s2y-grid-two,.s2y-actions{grid-template-columns:1fr}.s2y-tabs{grid-template-columns:repeat(2,1fr)}.s2y-toolbar{flex-direction:column;gap:3px}}


.s2y-bg-hex,.s2y-text-hex{
 text-transform:uppercase;
 font-family:Montserrat,Arial,sans-serif!important;
 letter-spacing:.03em;
}
@media(max-width:520px){
 .s2y-color-row{
  grid-template-columns:68px minmax(0,1fr);
 }
 .s2y-color-row input[type=color]{
  min-width:68px;
  height:52px;
 }
 .s2y-color-row input[type=text]{
  min-width:0;
  height:52px;
  font-size:17px!important;
 }
}


/* Betrouwbare vierkante canvasweergave op desktop en mobiel */
.s2y-canvas-shell{
 height:auto!important;
 min-height:0!important;
}
.s2y-canvas-shell>.canvas-container{
 position:absolute!important;
 inset:0!important;
 width:100%!important;
 height:100%!important;
 max-width:none!important;
 max-height:none!important;
 margin:0!important;
}
.s2y-canvas-shell>.canvas-container>.lower-canvas,
.s2y-canvas-shell>.canvas-container>.upper-canvas{
 position:absolute!important;
 inset:0!important;
 width:100%!important;
 height:100%!important;
 max-width:none!important;
 max-height:none!important;
}
@media(max-width:520px){
 .s2y-workspace{width:100%;min-width:0}
 .s2y-ceramic-frame{width:100%;overflow:hidden}
 .s2y-canvas-shell{
  width:100%!important;
  max-width:none!important;
  aspect-ratio:1/1!important;
 }
}


/* Eigen kleurkiezer: dezelfde bediening op mobiel en desktop */
.s2y-color-button{
 width:58px;height:45px;padding:6px;border:2px solid #d8d1c1;border-radius:11px;background:#fff;cursor:pointer;
}
.s2y-color-button .s2y-swatch{
 display:block;width:100%;height:100%;border-radius:6px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
}
.s2y-color-modal{
 position:fixed;inset:0;z-index:999999;display:flex;align-items:center;justify-content:center;
 padding:18px;background:rgba(0,0,0,.44);
}
.s2y-color-modal[hidden]{display:none!important}
.s2y-color-dialog{
 width:min(520px,100%);max-height:calc(100vh - 28px);overflow:auto;padding:22px;border-radius:24px;background:#fff;
 box-shadow:0 24px 70px rgba(0,0,0,.3);color:#222;
}
.s2y-color-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:16px}
.s2y-color-dialog-head h3{margin:0;font:600 28px/1.2 Montserrat,Arial,sans-serif}
.s2y-color-close{width:42px;height:42px;border:0;border-radius:50%;background:#f2efe8;font-size:28px;line-height:1;cursor:pointer}
.s2y-sv-wrap{position:relative;width:100%;aspect-ratio:1.55/1;border:1px solid #bbb;overflow:hidden;touch-action:none}
.s2y-sv-canvas{display:block;width:100%;height:100%;touch-action:none}
.s2y-sv-handle{
 position:absolute;width:24px;height:24px;border:4px solid #fff;border-radius:50%;box-shadow:0 0 0 3px #111;
 transform:translate(-50%,-50%);pointer-events:none;
}
.s2y-picker-row{display:grid;grid-template-columns:46px 56px 1fr;align-items:center;gap:14px;margin:16px 0}
.s2y-eyedropper{height:46px;border:0;background:transparent;font-size:32px;cursor:pointer}
.s2y-current-color,.s2y-picker-preview{display:block;width:56px;height:56px;border:2px solid #ddd;border-radius:50%}
.s2y-hue{
 width:100%;height:28px;margin:0;appearance:none;border-radius:5px;
 background:linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);
}
.s2y-hue::-webkit-slider-thumb{appearance:none;width:28px;height:28px;border:4px solid #fff;border-radius:50%;background:transparent;box-shadow:0 0 0 3px #333}
.s2y-hue::-moz-range-thumb{width:22px;height:22px;border:4px solid #fff;border-radius:50%;background:transparent;box-shadow:0 0 0 3px #333}
.s2y-rgb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.s2y-rgb-grid label{text-align:center;font:600 16px Montserrat,Arial,sans-serif}
.s2y-rgb-grid input{
 width:100%;min-height:56px;padding:8px;border:1px solid #ccc;border-radius:8px;text-align:center;font-size:20px;
}
.s2y-rgb-grid span{display:block;margin-top:7px}
.s2y-picker-hex-row{display:grid;grid-template-columns:58px 1fr;align-items:center;gap:14px;margin-top:18px}
.s2y-picker-preview{border-radius:10px}
.s2y-picker-hex{
 width:100%;min-height:56px;padding:10px 16px;border:1px solid #d6d0c3;border-radius:12px;font:500 20px Montserrat,Arial,sans-serif;text-transform:uppercase;
}
.s2y-picker-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.s2y-picker-actions .s2y-button,.s2y-picker-actions .s2y-secondary{margin:0}
@media(max-width:520px){
 .s2y-color-dialog{padding:18px;border-radius:22px}
 .s2y-color-dialog-head h3{font-size:23px}
 .s2y-picker-row{grid-template-columns:38px 48px 1fr;gap:10px}
 .s2y-current-color,.s2y-picker-preview{width:48px;height:48px}
 .s2y-rgb-grid input{min-height:52px;font-size:18px}
}


.s2y-file-input{
 position:absolute!important;
 width:1px!important;
 height:1px!important;
 padding:0!important;
 margin:-1px!important;
 overflow:hidden!important;
 clip:rect(0,0,0,0)!important;
 white-space:nowrap!important;
 border:0!important;
 opacity:0!important;
 pointer-events:none!important;
}
.s2y-upload-trigger{
 width:100%;
 background:#fff;
}








/* Desktoplayout v2.2.3: binnen de productkolom, zonder overlap */
.s2y-size-label{
 white-space:nowrap;
 flex:0 0 auto;
 min-width:max-content;
}
.s2y-toolbar{
 align-items:center;
 gap:10px;
}
@media(min-width:1024px){
 .s2y-product-studio-wrap{
  position:relative;
  z-index:2;
  width:100%!important;
  max-width:860px!important;
  margin-right:0!important;
  overflow:visible;
 }
 .s2y-product-studio-wrap .s2y-studio{
  width:100%;
  grid-template-columns:minmax(360px,44%) minmax(0,1fr);
  gap:12px;
  padding:20px;
 }
 .s2y-product-studio-wrap .s2y-panel{
  padding:22px;
 }
 .s2y-product-studio-wrap .s2y-ceramic-frame{
  padding:14px;
 }
 .s2y-product-studio-wrap .s2y-canvas-shell{
  width:100%;
  max-width:470px;
 }
}
@media(min-width:1440px){
 .s2y-product-studio-wrap{
  max-width:900px!important;
 }
 .s2y-product-studio-wrap .s2y-studio{
  grid-template-columns:minmax(380px,43%) minmax(0,1fr);
 }
 .s2y-product-studio-wrap .s2y-canvas-shell{
  max-width:500px;
 }
}


/* Shape2you hoverkleuren */
.s2y-button,
.s2y-secondary,
.s2y-danger,
.s2y-tab,
.s2y-upload-trigger,
.s2y-color-button{
 transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease;
}
.s2y-button:hover,
.s2y-button:focus-visible,
.s2y-secondary:hover,
.s2y-secondary:focus-visible,
.s2y-upload-trigger:hover,
.s2y-upload-trigger:focus-visible,
.s2y-tab:hover,
.s2y-tab:focus-visible,
.s2y-color-button:hover,
.s2y-color-button:focus-visible{
 background:#B38B6D!important;
 border-color:#B38B6D!important;
 color:#fff!important;
 box-shadow:0 7px 18px rgba(179,139,109,.22);
}
.s2y-tab.is-active:hover,
.s2y-tab.is-active:focus-visible{
 background:#B38B6D!important;
}
.s2y-danger:hover,
.s2y-danger:focus-visible{
 background:#B38B6D!important;
 border-color:#B38B6D!important;
 color:#fff!important;
}