:root{
  --muted:#6e6e6e;

  --smc-bg:#f6f7f9;
  --smc-card:#fff;
  --smc-line:#e9edf2;
  --smc-line-2:#eef0f3;
  --smc-text:#101828;
  --smc-muted:#667085;
  --smc-soft:#f6f8fb;

  --smc-shadow:0 8px 26px rgba(16,24,40,.06);
  --smc-shadow-2:0 6px 18px rgba(16,24,40,.06);
  --smc-radius:14px;
  --smc-radius-sm:12px;
  --smc-gap:14px;

  --smc-focus:rgba(16,24,40,.18);
  --smc-accent:#111;

  /* Poster sizing */
  --poster-w:336px;
  --poster-ar:5/7;
  --poster-radius:14px;

  /* Poster visuals */
  --smc-poster-outer-shadow: 0 18px 42px rgba(16,24,40,.18);
  --smc-poster-stroke: #ffffff;
  --hole-size:calc(var(--poster-w)*.8);

  /* Generic spacing */
  --radius:10px;
  --space-2:6px;
  --space-3:10px;
  --space-4:12px;
  --space-5:14px;
  --space-6:18px;
  --space-8:24px;

  --clr-dark:#111;
  --clr-light:#fff;

  /* Controls sizing */
  --smc-ctl-size:42px;
  --smc-ctl-radius:14px;

  /* Selector columns (desktop defaults) */
  --smc-shape-cols:11;
  --smc-style-cols:12;
  --smc-feature-cols:4;
}

/* ----------------------------------------------------------------------
   Base
---------------------------------------------------------------------- */
*,
*::before,
*::after{ box-sizing:border-box; }

html,body{ height:100%; }

.smc-root,
.smc-root *{ box-sizing:border-box; }

.smc-root{ color:var(--smc-text); }

.smc-root img,
.smc-root svg{
  max-width:100%;
  height:auto;
  display:block;
}

.smc-root button{ font:inherit; }
.smc-root a{ color:inherit; }

/* ======================================================================
   PRODUCT MEDIA
   ====================================================================== */
#smc-product-media{
  position:relative;
  cursor:default;
  --poster-w:min(92vw,353px);
  --hole-size:calc(var(--poster-w)*.78);
}

/* mouse click */
.smc-root input[type="date"]:focus:not(:focus-visible),
.smc-root input[type="time"]:focus:not(:focus-visible){
  box-shadow:0 10px 18px rgba(16,24,40,.06);
  border: 1px solid rgba(17, 17, 17, 1);
}

.smc-root input[type="date"],
.smc-root input[type="time"]{
  border: 1px solid var(--smc-line);
}

.smc-aspect{ position:relative; width:100%; height:auto; }

.poster-frame{
    /* width: var(--poster-w); */
    max-width: 100%;
    aspect-ratio: var(--poster-ar);
    border-radius: var(--poster-radius);
    display: flex;
    /* align-items: center; */
    justify-content: center;
    /* box-shadow: var(--smc-poster-outer-shadow); */

}

.poster{
  width:100%;
  height:100%;
  border-radius:inherit;
  background-image:var(--smc-bg-img);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  position:relative;
  padding:clamp(14px,3vw,24px);
  display:grid;
  grid-template-areas:"hole" "title" "meta";
  place-items:center;
  row-gap:clamp(10px,3cqw,22px);
  container-type:inline-size;
  color:var(--clr-light);
}

/* Poster inner stroke */
.poster::after{
  content:"";
  position:absolute;
  inset:clamp(10px,2.6cqw,18px);
  border:1px solid var(--smc-poster-stroke, #ffffff);
  border-radius:calc(var(--poster-radius) - 6px);
  pointer-events:none;
  opacity:.95;
}

.map-hole{
  grid-area:hole;
  width:clamp(220px,72cqw,var(--hole-size));
  max-width:95%;
  aspect-ratio:1/1;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  background-color:var(--smc-hole-bg-color, transparent);
  background-image:var(--smc-hole-bg-img);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  place-self:center;
  margin-block:clamp(6px,2cqw,14px);
}

/* FIX: thumbnails pre tvary a pozadia (span s inline background-image) */
#shapeSelector button,
#styleSelector button{
  position: relative;
  overflow: hidden;         /* aby sa obrázok orezal do pill tvaru */
}

#shapeSelector .shape-thumb,
#styleSelector .style-thumb{
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;   /* zdedí pill radius z buttonu */
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;   /* pozadia = cover */
}

/* SVG tvary často vyzerajú lepšie s contain (neoreže ich) */
#shapeSelector .shape-thumb{
  background-size: contain;
}

/* poistka ak má button pevný rozmer cez padding a span nemá height */
#shapeSelector button,
#styleSelector button{
  min-height: 26px;         /* uprav podľa tvojho UI */
}

/* ===== FIX: Circle thumbnail (circle nemá background-image) ===== */
#shapeSelector button[data-shape="circle"] .shape-thumb{
  background-image: none !important;
  background-color: transparent;
  position: relative;
}
#shapeSelector button[data-shape="circle"] .shape-thumb::before{
  content:"";
  position:absolute;
  inset: 18%;
  border-radius: 999px;
  border: 2px solid var(--smc-text, #111);
  background: transparent;
}
/* ===== /FIX ===== */

#celestial-container{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  visibility:hidden;
  pointer-events:none;
  background:var(--smc-bg-inner) center/cover no-repeat transparent;
}

#celestial-container canvas,
#maskedCanvas{
  display:block;
  width:100%!important;
  height:100%!important;
}

.title1,
.poster-text{ text-align:center; }

.title1{
  grid-area:title;
  font-size:clamp(16px,6cqw,28px);
  font-weight:600;
  letter-spacing:.04em;
  line-height:1.15;
  margin:0;
  align-self:center;
}

.poster-text{
  grid-area:meta;
  letter-spacing:.06em;
  max-width:92%;
}

.subtitle{
  font-size:clamp(10px,3.2cqw,15px);
  letter-spacing:.08em;
  line-height:1.45;
  white-space:pre-line;
  word-break:break-word;
}

/* ======================================================================
   CONFIGURATOR ROOT
   ====================================================================== */
.smc-root{
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 10px 10px 24px;
}

.smc-root .smc-shell{
  display: grid;
  gap: var(--smc-gap);
}

/* Summary (optional) — NO sticky */
.smc-root .smc-summary{
  position:relative;
  top:auto;
}

.smc-root .smc-summary-card{
  background:var(--smc-card);
  border:1px solid var(--smc-line);
  border-radius:var(--smc-radius);
  box-shadow:var(--smc-shadow);
  padding:14px;
}

.smc-root .smc-summary-head{ display:flex; flex-direction:column; gap:10px; }

.smc-root .smc-summary-title strong{
  display:block;
  font-size:14px;
  font-weight:900;
  letter-spacing:-.01em;
}

.smc-root .smc-summary-sub{
  display:block;
  margin-top:2px;
  font-size:12px;
  color:var(--smc-muted);
}

.smc-root .smc-summary-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}

.smc-root .smc-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 10px;
  border:1px solid var(--smc-line);
  border-radius:999px;
  background:#fafbfc;
  font-size:12px;
}

.smc-root .smc-pill span{ color:var(--smc-muted); }
.smc-root .smc-pill b{ color:var(--smc-text); font-weight:900; }

.smc-root .smc-summary-hint{
  margin-top:12px;
  padding:10px 12px;
  border-radius:12px;
  background:var(--smc-soft);
  color:var(--smc-muted);
  font-size:12px;
  line-height:1.35;
}

/* Panel */
.smc-root .smc-panel{
  background: var(--smc-card);
  border: 1px solid var(--smc-line);
  border-radius: var(--smc-radius);
  box-shadow: var(--smc-shadow);
  overflow: hidden;
  padding: 0 10px;
}

.smc-root .smc-panel-head{ display:none; }

.smc-root .smc-h{
  margin:0;
  font-size:14px;
  font-weight:900;
  letter-spacing:-.02em;
}

.smc-root .smc-muted{
  margin:2px 0 0;
  font-size:12px;
  color:var(--smc-muted);
}

.smc-root .smc-panel-head-right{
  display:flex;
  gap:8px;
  align-items:center;
}

/* Buttons (generic .smc-btn remains as-is) */
.smc-root .smc-btn{
  border:1px solid var(--smc-line);
  background:#fff;
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  font-weight:900;
  font-size:13px;
  transition:border-color .12s ease, box-shadow .12s ease, transform .08s ease;
}

.smc-root .smc-btn:hover{
  border-color:rgba(16,24,40,.24);
  box-shadow:0 12px 22px rgba(16,24,40,.06);
}

.smc-root .smc-btn:active{ transform:translateY(1px); }
.smc-root .smc-btn.small{ padding:8px 10px; font-size:12px; border-radius:10px; }
.smc-root .smc-btn.ghost{ background:transparent; }

/* Steps */
.smc-root .smc-step{ display:none; }
.smc-root .smc-step.is-active{ display:block; }

.smc-root .smc-block{ padding: 5px; }

.smc-root .smc-block-title{
  margin:0 0 10px;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#444;
  text-align:start;
}

.smc-root .smc-divider{ height:1px; background:var(--smc-line); margin:14px 0; }

/* ======================================================================
   Controls
   ====================================================================== */
.smc-root .fields-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

.smc-root .field label{
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: var(--smc-muted);
  margin-bottom: 6px;
  text-align: start;
}

.smc-root input[type="text"],
.smc-root input[type="time"],
.smc-root input[type="date"],
.smc-root input[type="email"],
.smc-root input[type="tel"],
.smc-root input:not([type]),
.smc-root textarea{
  width: 100%;
  border: 1px solid var(--smc-line);
  border-radius: 12px;
  padding: 10px 5px;
  background: #fff;
  color: var(--smc-text);
  outline: none;
  transition: box-shadow .12s ease, border-color .12s ease;
  max-height: 42px;
  font-size: 12px;
}

.smc-root input:focus,
.smc-root textarea:focus{
  border-color:rgba(16,24,40,.28);
  box-shadow:0 0 0 4px var(--smc-focus);
}

/* ----------------------------------------------------------------------
   Consolidated control button styling (seg/shape/style/font)
---------------------------------------------------------------------- */
.smc-root :where(.seg button, .shape-selector button, #styleSelector button, .font-selector button){
  border: 1px solid var(--smc-line);
  background: #fff;
  border-radius: var(--smc-ctl-radius);
  cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease, transform .08s ease;
}

.smc-root :where(.seg button:hover, .shape-selector button:hover, #styleSelector button:hover, .font-selector button:hover){
  border-color:rgba(16,24,40,.24);
  box-shadow:0 12px 22px rgba(16,24,40,.06);
}

.smc-root :where(.seg button:active, .shape-selector button:active, #styleSelector button:active, .font-selector button:active){
  transform:translateY(1px);
}

.smc-root :where(.seg button.active, .seg button[aria-selected="true"],
                 .shape-selector button.active,
                 #styleSelector button.active,
                 .font-selector button.active){
  border-color: var(--smc-accent);
  box-shadow: 0 10px 18px rgba(16,24,40,.06);
}

/* Segmented controls */
.smc-root .seg{
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3,minmax(0,1fr));
}

.smc-root .seg button{
    border: 1px solid var(--smc-line);
    background: #fff;
    border-radius: 12px;
    /* padding: 10px 12px; */
    cursor: pointer;
    font-weight: 900;
    font-size: 12px;
    transition: border-color .12s ease, box-shadow .12s ease, transform .08s ease;
    min-height: 30px;

}

/* Shape selector */
.smc-root .shape-selector{
  display:grid;
  grid-template-columns:repeat(var(--smc-shape-cols), minmax(0, 1fr));
  gap:5px;
}

.smc-root .shape-selector button{
  border: 1px solid var(--smc-line);
  background: #fff;
  border-radius: 14px;
  padding: 5px;
  cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease, transform .08s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 42px;
  max-width: 42px;
}
.smc-root .shape-selector button:hover{
  border-color:rgba(16,24,40,.24);
  box-shadow:0 12px 22px rgba(16,24,40,.06);
}
.smc-root .shape-selector button:active{ transform:translateY(1px); }
.smc-root .shape-selector button.active{
  border-color:var(--smc-accent);
  box-shadow:0 10px 18px rgba(16,24,40,.06);
}
.smc-root .shape-chip{
  width: 100%;
  height: 100%;
  border-radius: 10px;
  display: block;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  color: #111;
  max-height: var(--smc-ctl-size);
  max-width: var(--smc-ctl-size);
}

/* Style selector thumbnails */
.smc-root #styleSelector .style-chip{
  aspect-ratio: 1/1;
  border-radius: 12px;
  border: 1px solid #e7e7e7;
  background-size: cover!important;
  background-position: center!important;
  background-repeat: no-repeat!important;
  display: block;
  width: 40PX;
  height: 40PX;
}

.smc-root #styleSelector{
  display: grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: 5PX;
}

.smc-root #styleSelector button{
    border: 1px solid var(--smc-line);
    background: #fff;
    border-radius: 10PX;
    padding: 3px;
    cursor: pointer;
    transition: border-color .12s ease, box-shadow .12s ease, transform .08s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    /* gap: 5PX; */
    max-width: 42px;
    max-height: 42px;
    min-height: 42PX;

}

/* Font selector */
.smc-root .font-selector{
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3,minmax(0,1fr));
}

.smc-root .font-selector button{
  display:flex;
  align-items:center;
  justify-content:center;
}

.smc-root .font-chip{
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 14px;
}

/* Switches */
.smc-root .features-selector{
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(var(--smc-feature-cols), minmax(0, 1fr));
}
.smc-root .switch{
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--smc-line);
  border-radius: 14px;
  padding: 8px;
  background-color: #fff;
  cursor: pointer;
  user-select: none;
  max-height: 42px;
}
.smc-root .switch input{ display:none; }
.smc-root .switch .switch-text{
  font-size: 12px;
  font-weight: 900;
  color: var(--smc-text);
}
.smc-root .switch .slider{
  width:42px;
  height:26px;
  border-radius:999px;
  background:#edf0f4;
  border:1px solid var(--smc-line);
  position:relative;
  flex:0 0 auto;
  transition:background .12s ease, border-color .12s ease;
}
.smc-root .switch .slider::after{
  content:"";
  position:absolute;
  top:50%;
  left:3px;
  transform:translateY(-50%);
  width:20px;
  height:20px;
  border-radius:999px;
  background:#fff;
  box-shadow:0 6px 14px rgba(16,24,40,.12);
  transition:left .12s ease;
  border:1px solid rgba(16,24,40,.08);
}
.smc-root .switch input:checked + .slider{
  background:rgb(0, 0, 0);
  border-color:rgba(17,17,17,.22);
}
.smc-root .switch input:checked + .slider::after{ left:19px; }

/* ======================================================================
   Add to cart
   ====================================================================== */
.smc-root .smc-cart{ margin:0; }

.smc-root .single_add_to_cart_button.button.alt{
  width:100%;
  border-radius:14px;
  padding:14px 14px;
  font-weight:900;
  font-size:14px;
  border:1px solid rgba(16,24,40,.14);
  background:var(--smc-accent);
  color:#fff;
  cursor:pointer;
  transition:transform .08s ease, filter .12s ease, box-shadow .12s ease;
}

.smc-root .single_add_to_cart_button.button.alt:hover{
  filter:brightness(1.02);
  box-shadow:0 18px 34px rgba(16,24,40,.16);
}

.smc-root .single_add_to_cart_button.button.alt:active{ transform:translateY(1px); }

.smc-root .smc-cta-sub{
  margin-top:8px;
  font-size:12px;
  color:var(--smc-muted);
  text-align:center;
}

/* mouse click */
.smc-root input:focus:not(:focus-visible),
.smc-root textarea:focus:not(:focus-visible){
  box-shadow:none;
  outline:none;
}

/* keyboard focus */
.smc-root input:focus-visible,
.smc-root textarea:focus-visible{
  border-color:var(--smc-accent);
  box-shadow:0 10px 18px rgba(16,24,40,.06);
}

/* ======================================================================
   Accessibility
   ====================================================================== */
.smc-root button:focus-visible,
.smc-root a:focus-visible{
  outline:1px solid rgba(17,17,17,.22);
  outline-offset:1px;
}

/* Rozmer + Typ písma vedľa seba */
.smc-root .smc-two-cols{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  align-items:start;
}

/* nech selector nepôsobí "rozťahnutý" (grid-appropriate fix) */
.smc-root .smc-two-cols .font-selector{
  justify-content:start;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.smc-root #sizeSelector button:active{ transform:translateY(1px); }
.smc-root #sizeSelector button.active{
  border-color:var(--smc-accent);
  box-shadow:0 10px 18px rgba(16,24,40,.06);
}
.smc-root #styleSelector button:active{ transform:translateY(1px); }
.smc-root #styleSelector button.active{
  border-color:var(--smc-accent);
  box-shadow:0 10px 18px rgba(16,24,40,.06);
}
.smc-root .font-selector button:active{ transform:translateY(1px); }
.smc-root .font-selector button.active{
  border-color: var(--smc-accent);
  box-shadow: 0 10px 18px rgba(16,24,40,.06);
}

/* ======================================================================
   Responsive (Unified)
   ====================================================================== */
@media (max-width: 1100px){
  .smc-root{ --smc-shape-cols:5; }
}

@media (max-width: 920px){
  #smc-product-media{ padding:6px 0 14px; }

  .smc-root{
    padding: 0;
    --smc-style-cols:5;
    --smc-shape-cols:7;
    --smc-feature-cols:2;
  }

  .smc-root .smc-two-cols{ grid-template-columns: 1fr; }
  .smc-root .smc-shell{ grid-template-columns: 1fr; }

  .smc-root .smc-panel-head{
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 12px;
    padding: 5px 3px;
    border-bottom: 1px solid var(--smc-line);
  }
}

/* Mobile: reorder columns so summary (title + configurator) is above canvas */
@media (max-width: 768px){
  .smc-root .smc-step[data-step="1"] .fields-row{
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px;
  }

  .smc-root #styleSelector{
    display: grid;
    grid-template-columns: repeat(9, minmax(0,1fr));
    gap: 5PX;
  }

  /* jemná optimalizácia inputov */
  .smc-root input[type="date"],
  .smc-root input[type="time"]{
    width: 100%;
    border: 1px solid var(--smc-line);
    border-radius: 12px;
    background: #fff;
    color: var(--smc-text);
    outline: none;
    transition: box-shadow .12s ease, border-color .12s ease;
    max-height: 42px;
    font-size: 12px;
    max-width: 170px; /* keep your intent; adjust if you want full width */
  }

  .product-image-summary-inner{
    display: grid;
  }

  .product-image-summary-inner > .summary.entry-summary{
    order: 2;
    width: 100%;
  }

  .product-image-summary-inner > .product-images{
    order: 1;
    width: 100% !important;
  }

  .product-image-summary-inner .product_title{ margin-bottom:12px; }

  /* tighten poster */
  .product-images .poster-frame.smc-poster-frame{
    --poster-w: min(92vw,320px);
    --hole-size: calc(var(--poster-w)*.78);
    width: 100%;
    height: 470px;
  }
}

/* Small mobile refinements */
@media (max-width: 640px){
  .smc-root{
    --smc-style-cols:7;
    --smc-shape-cols:7;
    /* max-height:500px; */ /* consider removing to avoid clipping */
  }

  .smc-root #styleSelector .style-chip{ width:30px; height:30px; }
  .smc-root .shape-chip{ width:30px; height:30px; }

  .smc-root .shape-selector button{ max-width:40px; }

  .smc-root .single_add_to_cart_button.button.alt{
    padding:7px 7px;
    font-size:12px;
  }

  .smc-root .smc-add-to-cart{
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }
}

/* Desktop full-mode: show all steps regardless of step JS/CSS defaults */
@media (min-width: 769px){
  .smc-root[data-mode="full"] .smc-step{ display:block !important; }
  .smc-root[data-mode="full"] [data-step-prev],
  .smc-root[data-mode="full"] [data-step-next]{ display:none !important; }
}