/* Basis-Styling für das Wizard-Container */
#wsk-fw-wizard {
  counter-reset: step;
  border: 1px solid #cfd8dc;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
  font-family: sans-serif;
}


/* Überschriften (Headings) */
#wsk-fw-wizard .ux-accordion-heading {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 3.5rem;
  background: #f5f5f5;
  border-bottom: 1px solid #cfd8dc;
  cursor: pointer;
  font-size: 1.125rem;
  color: #37474f;

}

h1>span, h2>span, h3>span, h4>span, h5>span, h6>span, p.headline>span {
	margin-left: 35px
	
}

/* Nummern-/Icon-Kreis links */
#wsk-fw-wizard .ux-accordion-heading::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  border: 2px solid #b0bec5;
  border-radius: 50%;
  background: #ffffff;
  text-align: center;
  font-weight: bold;
  color: #455a64;
  font-size: 1rem;
}

/* Pfeil auf der rechten Seite */
#wsk-fw-wizard .ux-accordion-heading::after {
  content: "\25BC";
  font-size: 0.75rem;
  color: #90a4ae;
}

/* Geöffnetes Panel hervorheben */
#wsk-fw-wizard .ux-accordion-heading.is-active {
  background: #e7530363;
}

/* Check-Icon statt Nummer bei aktivem Panel */
#wsk-fw-wizard .ux-accordion-heading.is-active::before {
  content: "\27A4";
  border-color: #e75303;
  background: #e75303;
  color: #ffffff;
}


/* Panel-Inhalt (collapsed by default) */
#wsk-fw-wizard .ux-accordion-panel {
  display: none;
  padding: 1rem 1.5rem 1.5rem;
  background: #fafafa;
  border-bottom: 1px solid #cfd8dc;
}

/* Offenes Panel */
#wsk-fw-wizard .ux-accordion-heading.is-active + .ux-accordion-panel {
  display: block;
}

/* Label für ausgewählte Option */
#wsk-fw-wizard .selected-label {
  font-size: 0.9rem;
  color: #607d8b;
}

/* Zusätzlicher Abschluss-Bottom-Border */
#wsk-fw-wizard .ux-accordion-panel:last-of-type {
  border-bottom: none;
}

/* Swatch-Größen im Wizard 
#wsk-fw-wizard .wsk-fw-colors img {
  width: 80px;
  height: 80px;
  object-fit: cover;
}
#wsk-fw-wizard .wsk-fw-areas img {
  width: 120px;
  height: 120px;
  object-fit: cover;
}
*/
/*NEU

/* › Calculation result box */
#wsk-fw-result {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 16px;
  font-size: 14px;
  color: #333;
}

/* › Breakdown list */
#wsk-fw-result ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#wsk-fw-result li {
  display: grid;
  grid-template-columns: 1fr 5fr;
  align-items: center;
  padding: 8px 0;
}

#wsk-fw-result li + li {
  border-top: 1px solid #f0f0f0;
}

/* › Separator before total */
#wsk-fw-result .wsk-fw-total-separator {
  border-top: 1px solid #ddd;
  margin: 16px 0 8px;
}

/* › Gesamtpreis (netto/brutto) */
#wsk-fw-result .wsk-fw-price-total {
  display: grid;
  grid-template-columns: 1fr auto;
  font-size: 16px;
  font-weight: bold;
  padding: 4px 0;
}

#wsk-fw-result .wsk-fw-price-brutto {
  display: grid;
  grid-template-columns: 1fr auto;
  font-size: 14px;
  color: #888;
  padding: 4px 0;
}

/* › Stückpreis */
#wsk-fw-result .wsk-fw-unit-price {
  font-size: 13px;
  color: #666;
  margin-top: 8px;
  text-align: left;
}

#wsk-fw-result li.wsk-fw-unit-price {
    grid-column: 1 / -1;
    font-size: 13px;
    color: #666;
    text-align: left;
    padding-top: 8px;
}

/* › Hinweis (vor dem Button) */
#wsk-fw-hint {
  font-size: 13px;
  color: #a00;
  margin: 0 0 8px;
}

/* › Buttons */
#wsk-fw-add-to-cart {
  width: 100%;
  padding: 12px;
  background-color: #e75303;
  border-color: #e75303;
  color: #fff;
  font-size: 16px;
  border-radius: 4px;
}
#wsk-fw-add-to-cart:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Kalkulations‑Breakdown inspiriert vom Screenshot */
#wsk-fw-result {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 16px;
  font-size: 14px;
  color: #333;
  margin-bottom: 0.75em;
}

#wsk-fw-result ul.wsk-fw-breakdown {
  list-style: none;
  margin: 0;
  padding: 0;
}

#wsk-fw-result li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  padding: 8px 0;
}

#wsk-fw-result li.wsk-fw-article-costs {
  font-weight: 500;
}

#wsk-fw-result li.wsk-fw-section-title {
  grid-column: 1 / -1;
  font-size: 15px;
  font-weight: bold;
  margin-top: 12px;
  padding-top: 12px;
}

#wsk-fw-result li.wsk-fw-note {
  grid-column: 1 / -1;
  font-size: 12px;
  color: #666;
  padding: 4px 0;
}

#wsk-fw-result li.wsk-fw-separator {
  grid-column: 1 / -1;
  border-bottom: 1px solid #ddd;
  margin: 12px 0;
  padding: 0;
}

#wsk-fw-result li.wsk-fw-total-netto,
#wsk-fw-result li.wsk-fw-total-brutto {
  font-size: 15px;
  font-weight: bold;
  text-align: left;
}

#wsk-fw-result li.wsk-fw-total-brutto {
  color: #666;
  font-weight: normal;
}

#wsk-fw-result li.wsk-fw-unit-price {
  grid-column: 1 / -1;
  font-size: 13px;
  color: #666;
  text-align: left;
  font-weight: bold;
  padding-top: 8px;
}

/* Hinweis über Button */
#wsk-fw-hint {
  color: #a00;
  margin: 0 0 12px;
  font-size: 13px;
}

/* Grüner Warenkorb‑Button */
#wsk-fw-add-to-cart {
  width: 100%;
  background-color: #e75303;
  border-color: #e75303;
  color: #fff;
  font-size: 16px;
  padding: 12px;
  border-radius: 4px;
}
#wsk-fw-add-to-cart:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

[type=reset], [type=submit], button, html [type=button] {
    -webkit-appearance: button;
    width: 100%;
}

/* Preis */

.price-wrapper .price {
    display: block;
    text-align: right;
}

/* Versand und Lieferzeit */

.product p.wc-gzd-additional-info {
    clear: left;
    font-size: .8em;
    margin-bottom: -4px !important;
    text-align: end;
}


.price-wrapper .price {
    display: block;
    margin-bottom: 0px;
}


#wsk-offer-btn {
    background: #d8d6db !important;
    color: #333333 !important;
    border-radius: 4px;
}


/* === WSK Wizard Swatch-Layout ========================================== */
/* Werte an deine Backend-Optionen anpassen */
:root{
  --wsk-swatch-color: 80px;  /* Farb-Swatch-Breite/Höhe */
  --wsk-swatch-area:  120px; /* Positions-Swatch-Breite/Höhe */
}

/* Listen ausrichten */
#wsk-fw-wizard .wsk-fw-colors,
#wsk-fw-wizard .wsk-fw-areas{
  align-items: flex-start; /* Bilder/Texte beginnen oben, wirkt geordnet */
}

/* Kacheln: exakt so breit wie die Swatches, Text sauber umbrechen */
#wsk-fw-wizard .wsk-fw-colors li,
#wsk-fw-wizard .wsk-fw-areas li{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  vertical-align: top;
  white-space: normal !important;
overflow-wrap: normal !important;
word-break: normal !important;
hyphens: auto !important;
}

/* Breite der LI-Kacheln fixieren */
#wsk-fw-wizard .wsk-fw-colors li{ width: var(--wsk-swatch-color); max-width: none; }
#wsk-fw-wizard .wsk-fw-areas  li{ width: var(--wsk-swatch-area);  max-width: none;  }

/* Bilder auf exakte Quadratgröße setzen (überschreibt HTML-Width/Height) */
#wsk-fw-wizard .wsk-fw-colors li img{
  display: block;
  width:  var(--wsk-swatch-color);
  height: var(--wsk-swatch-color);
  object-fit: cover;
  margin-bottom: .35rem;
}
#wsk-fw-wizard .wsk-fw-areas li img{
  display: block;
  width:  var(--wsk-swatch-area);
  height: var(--wsk-swatch-area);
  object-fit: cover;
  margin-bottom: .35rem;
}

/* Den <br> nach dem Bild ausblenden, damit nur der margin-bottom greift */
#wsk-fw-wizard .wsk-fw-colors li br,
#wsk-fw-wizard .wsk-fw-areas li br{
  display: none;
}

/* Platzhalter-Quadrat (bei „Keine Werbeanbringung“) ebenfalls passend zwingen */
#wsk-fw-wizard .wsk-fw-areas li > div{
  width:  var(--wsk-swatch-area) !important;
  height: var(--wsk-swatch-area) !important;
  max-width: none !important;
  margin-bottom: .35rem;
}

/* Optional: disabled-Optik konsistent (JS setzt Klasse bereits) */
#wsk-fw-wizard .wsk-fw-areas li.is-disabled{
  opacity: .5;
  pointer-events: none;
}


/* Swatch-Listen links bündig (kein Einzug) */
#wsk-fw-wizard .wsk-fw-colors,
#wsk-fw-wizard .wsk-fw-areas{
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Sicherheit: keine linken Offsets auf LI */
#wsk-fw-wizard .wsk-fw-colors li,
#wsk-fw-wizard .wsk-fw-areas li{
  margin-left: 0 !important;
}


/* =========================================================
   Zusätze: ersetzt Inline-Styles aus JS/PHP
   ========================================================= */

.wsk-fw-notice{
  margin-bottom:8px;
  padding:8px 10px;
  border:1px solid #e0b000;
  background:#fff7d6;
  border-radius:4px;
  font-size:14px;
}

.wsk-fw-minqty-adjust{
  margin:6px 0 0;
  padding:8px 10px;
  border:1px solid #e0b000;
  background:#fff7d6;
  border-radius:4px;
  font-size:13px;
  display:none;
}

.wsk-fw-tierlist{margin:10px 0 0;}
.wsk-fw-tierlist-title{margin:0 0 6px;font-size:0.95em;opacity:0.8;}
.wsk-fw-tier-radios{list-style:none;margin:0;padding:0;}
.wsk-fw-tier-radios li{margin:4px 0;}

#wsk-fw-addpos-wrap{margin:10px 0;}

.wsk-fw-flexlist{display:flex;gap:10px;flex-wrap:wrap;}
.wsk-fw-area-item{cursor:pointer;text-align:center;}
.wsk-fw-area-placeholder{
  border:1px solid #ccc;
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
}

#wsk-fw-reset-link-wrap{margin-top:6px;text-align:right;}
#wsk-fw-reset-link{font-size:12px;opacity:.8;text-decoration:underline;}

/* Offer-Lightbox */
#wsk-offer-overlay{
  position:fixed;
  inset:0;
  background:rgba(17,24,39,.58);
  backdrop-filter:blur(4px);
  display:none;
  z-index:99998;
}
#wsk-offer-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:99999;
}
#wsk-offer-dialog{
  --wsk-offer-accent:#e75303;
  --wsk-offer-accent-soft:rgba(231,83,3,.10);
  --wsk-offer-border:#e7e7e7;
  --wsk-offer-muted:#667085;
  --wsk-offer-text:#1f2937;
  --wsk-offer-card:#ffffff;
  background:#fff;
  color:var(--wsk-offer-text);
  max-width:1080px;
  width:min(96vw,1080px);
  max-height:92vh;
  overflow:hidden;
  border-radius:22px;
  box-shadow:0 24px 80px rgba(15,23,42,.28);
  padding:0;
}
.wsk-offer-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:24px 28px 20px;
  border-bottom:1px solid var(--wsk-offer-border);
  background:var(--wsk-offer-card);
}
.wsk-offer-heading{max-width:760px;}
.wsk-offer-kicker,
.wsk-offer-panel-label{
  display:block;
  margin:0 0 6px;
  color:var(--wsk-offer-accent);
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  line-height:1.2;
  text-transform:uppercase;
}
#wsk-offer-dialog h3{
  margin:0;
  font-size:26px;
  line-height:1.2;
  color:var(--wsk-offer-text);
}
#wsk-offer-subtitle,
.wsk-offer-form-head p{
  margin:8px 0 0;
  color:var(--wsk-offer-muted);
  font-size:14px;
  line-height:1.5;
}
#wsk-offer-close{
  flex:0 0 auto;
  width:40px;
  height:40px;
  border:1px solid var(--wsk-offer-border);
  border-radius:999px;
  background:#fff;
  color:#111827;
  font-size:26px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
#wsk-offer-close:hover,
#wsk-offer-close:focus{
  border-color:var(--wsk-offer-accent);
  box-shadow:0 8px 20px rgba(15,23,42,.12);
  outline:none;
  transform:translateY(-1px);
}
.wsk-offer-layout{
  display:grid;
  grid-template-columns:minmax(280px,.92fr) minmax(340px,1.08fr);
  max-height:calc(92vh - 112px);
  overflow:auto;
  background:#fff;
}
.wsk-offer-summary{
  padding:28px;
  border-right:1px solid var(--wsk-offer-border);
  background:linear-gradient(180deg,var(--wsk-offer-accent-soft),rgba(255,255,255,.92));
}
.wsk-offer-panel-head{
  margin-bottom:18px;
}
.wsk-offer-panel-head strong{
  display:block;
  font-size:22px;
  line-height:1.2;
  color:var(--wsk-offer-text);
}
.wsk-offer-summary-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.wsk-offer-summary-empty,
.wsk-offer-summary-item,
.wsk-offer-position{
  border:1px solid rgba(17,24,39,.08);
  border-radius:16px;
  background:rgba(255,255,255,.86);
  box-shadow:0 8px 24px rgba(15,23,42,.05);
}
.wsk-offer-summary-empty{
  padding:14px;
  color:var(--wsk-offer-muted);
  font-size:14px;
  line-height:1.45;
}
.wsk-offer-summary-item{
  padding:13px 14px;
}
.wsk-offer-summary-label{
  display:block;
  margin:0 0 4px;
  color:var(--wsk-offer-muted);
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.wsk-offer-summary-value{
  display:block;
  color:var(--wsk-offer-text);
  font-size:15px;
  font-weight:700;
  line-height:1.35;
}
.wsk-offer-summary-note{
  display:block;
  margin-top:3px;
  color:var(--wsk-offer-muted);
  font-size:13px;
  line-height:1.35;
}
.wsk-offer-positions{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.wsk-offer-position{
  padding:13px 14px;
}
.wsk-offer-position-title{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:6px;
  color:var(--wsk-offer-text);
  font-size:15px;
  font-weight:800;
}
.wsk-offer-position-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:26px;
  height:26px;
  padding:0 8px;
  border-radius:999px;
  background:var(--wsk-offer-accent);
  color:#fff;
  font-size:12px;
  font-weight:800;
  line-height:1;
}
.wsk-offer-position-meta{
  color:var(--wsk-offer-muted);
  font-size:13px;
  line-height:1.45;
}
.wsk-offer-form-card{
  padding:28px;
  background:#fff;
}
.wsk-offer-form-head{
  margin-bottom:18px;
}
.wsk-offer-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
#wsk-offer-form .field{
  margin-bottom:14px;
}
#wsk-offer-form label{
  display:block;
  margin-bottom:6px;
  color:var(--wsk-offer-text);
  font-size:13px;
  font-weight:800;
}
#wsk-offer-form input[type=text],
#wsk-offer-form input[type=email],
#wsk-offer-form input[type=tel],
#wsk-offer-form textarea{
  width:100%;
  min-height:46px;
  padding:11px 13px;
  border:1px solid #d0d5dd;
  border-radius:12px;
  background:#fff;
  color:#111827;
  box-shadow:0 1px 2px rgba(16,24,40,.04);
  font-size:15px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
#wsk-offer-form textarea{
  min-height:132px;
  resize:vertical;
}
#wsk-offer-form input:focus,
#wsk-offer-form textarea:focus{
  border-color:var(--wsk-offer-accent);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--wsk-offer-accent) 16%, transparent);
  outline:none;
}
.wsk-offer-privacy{
  margin-top:2px;
}
.wsk-offer-privacy label{
  display:flex!important;
  gap:10px;
  align-items:flex-start;
  margin:0!important;
  padding:12px 14px;
  border:1px solid var(--wsk-offer-border);
  border-radius:14px;
  background:#f9fafb;
  font-weight:600!important;
  line-height:1.45;
}
.wsk-offer-privacy input{
  flex:0 0 auto;
  margin-top:3px;
}
.wsk-offer-privacy a{
  color:var(--wsk-offer-accent);
  font-weight:800;
}
#wsk-offer-actions{
  display:flex;
  gap:12px;
  align-items:center;
  margin-top:18px;
  flex-wrap:wrap;
}
#wsk-of-send{
  min-height:46px;
  padding:0 22px;
  border-radius:999px;
  font-weight:800;
}
#wsk-offer-error,
#wsk-offer-success{
  margin:0;
  display:none;
  font-size:14px;
  font-weight:700;
  line-height:1.4;
}
#wsk-offer-error{color:#b00020;}
#wsk-offer-success{color:#207227;}
@media (max-width: 820px){
  #wsk-offer-modal{padding:10px;align-items:flex-start;overflow:auto;}
  #wsk-offer-dialog{width:100%;max-height:none;border-radius:18px;overflow:visible;}
  .wsk-offer-header{padding:20px;}
  #wsk-offer-dialog h3{font-size:22px;}
  .wsk-offer-layout{grid-template-columns:1fr;max-height:none;overflow:visible;}
  .wsk-offer-summary{border-right:none;border-bottom:1px solid var(--wsk-offer-border);padding:22px 20px;}
  .wsk-offer-form-card{padding:22px 20px;}
  .wsk-offer-form-grid{grid-template-columns:1fr;gap:0;}
}

.wsk-fw-minqty-note{margin:6px 0 0;font-size:0.95em;opacity:0.8;}



/* WK WAK: Lupe/Zoom nur bei Druckposition-Swatches (Step 2) */
/* Druckposition-Swatches (Step 2 + zusätzliche Druckpositionen): Zoom-Lupe */
.wsk-area-swatch{position:relative;display:inline-block;}

.wsk-area-swatch .wsk-swatch-zoom{
  position:absolute;
  top:4px;
  right:4px;
  width:18px;
  height:18px;
  border-radius:4px;
  background:rgba(255,255,255,0.85);
  border:1px solid rgba(0,0,0,0.15);
  box-shadow:0 1px 2px rgba(0,0,0,0.12);
  cursor:zoom-in;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0.0;
  transition:opacity .15s ease-in-out;
}
.wsk-area-swatch:hover .wsk-swatch-zoom{
  opacity:1.0;
}

.wsk-area-swatch .wsk-swatch-zoom svg{
  width:12px;
  height:12px;
  display:block;
  color:rgba(0,0,0,0.85);
}

#wsk-swatch-zoom-pop{
  position:fixed;
  z-index:999999;
  display:none;
  pointer-events:none;
  background:#fff;
  border:1px solid rgba(0,0,0,0.18);
  border-radius:10px;
  box-shadow:0 8px 28px rgba(0,0,0,0.22);
  padding:10px;
}
#wsk-swatch-zoom-pop img{
  max-width:var(--wsk-area-zoom-preview, 240px);
  max-height:var(--wsk-area-zoom-preview, 240px);
  display:block;
}



/* Roter Druckbereich-Rahmen direkt im Druckpositions-Swatch */
.wsk-area-swatch .wsk-area-print-border{
  position:absolute;
  box-sizing:border-box;
  border:2px solid #e00000;
  pointer-events:none;
  z-index:2;
  border-radius:2px;
  box-shadow:0 0 0 1px rgba(255,255,255,.65), 0 0 3px rgba(0,0,0,.25);
}
.wsk-area-swatch .wsk-swatch-zoom{
  z-index:3;
}

/* Zoom icon: ensure SVG is visible even if parent text color is light */
.wsk-area-swatch .wsk-swatch-zoom{
  color: #111;
}
.wsk-area-swatch .wsk-swatch-zoom svg{
  display: block;
}

/* Farb-Swatch-Fallback ohne Vorschaubild, inkl. zweifarbiger Darstellung */
#wsk-fw-wizard .wsk-fw-color-fallback-swatch{
  display:block;
  border:1px solid rgba(0,0,0,.18);
  border-radius:8px;
  box-sizing:border-box;
  margin-bottom:.35rem;
}

/* Axpol-Livebestand im Wizard */
#wsk-fw-stock-notice.wsk-fw-stock-notice{
  display:none;
  margin:8px 0 10px;
  padding:10px 12px;
  border-radius:6px;
  border:1px solid rgba(0,0,0,0.14);
  background:rgba(0,0,0,0.04);
  color:rgba(0,0,0,0.85);
  font-size:0.95em;
  line-height:1.35;
}
#wsk-fw-stock-notice.wsk-fw-stock-notice.is-error{
  border-color:#b00020;
  background:#fff4f4;
  color:#8a0018;
}
#wsk-fw-stock-notice.wsk-fw-stock-notice.is-info{
  border-color:rgba(0,0,0,0.18);
  background:#f7f7f7;
}
#wsk-fw-stock-notice .wsk-fw-stock-use{
  margin-left:8px;
  padding:4px 10px;
  line-height:1.4;
}

/* Mobile Wizard: geführter Vollbildmodus nur für Handy/Tablet */
.wsk-mobile-config-open{
  display:none!important;
}
#wsk-mobile-wizard-shell{
  --wsk-mobile-accent:#e75303;
  --wsk-mobile-accent-soft:rgba(231,83,3,.10);
  --wsk-mobile-border:#e7e7e7;
  --wsk-mobile-text:#1f2937;
  --wsk-mobile-muted:#667085;
  position:fixed;
  inset:0;
  z-index:99990;
  display:none;
  background:#f6f7f8;
  color:var(--wsk-mobile-text);
}
#wsk-mobile-wizard-shell.is-open{
  display:flex;
}
#wsk-mobile-wizard-shell *{
  box-sizing:border-box;
}
.wsk-mobile-wizard-card{
  width:100%;
  height:100vh;
  height:100dvh;
  display:flex;
  flex-direction:column;
  background:#fff;
  overflow:hidden;
}
.wsk-mobile-wizard-header{
  flex:0 0 auto;
  padding:12px 14px 10px;
  border-bottom:1px solid var(--wsk-mobile-border);
  background:linear-gradient(180deg,#fff 0%,#fafafa 100%);
  box-shadow:0 1px 12px rgba(16,24,40,.05);
}
.wsk-mobile-wizard-headrow{
  display:grid;
  grid-template-columns:40px 1fr auto;
  gap:10px;
  align-items:center;
}
.wsk-mobile-wizard-close{
  width:38px;
  height:38px;
  border:1px solid var(--wsk-mobile-border);
  border-radius:999px;
  background:#fff;
  color:#111827;
  font-size:26px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
.wsk-mobile-wizard-headtext{
  min-width:0;
}
.wsk-mobile-wizard-kicker{
  display:block;
  margin-bottom:1px;
  color:var(--wsk-mobile-accent);
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  line-height:1.1;
  text-transform:uppercase;
}
#wsk-mobile-wizard-title{
  display:block;
  overflow:hidden;
  color:#111827;
  font-size:18px;
  font-weight:900;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.wsk-mobile-wizard-stepcount{
  padding:6px 9px;
  border-radius:999px;
  background:var(--wsk-mobile-accent-soft);
  color:var(--wsk-mobile-accent);
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}
.wsk-mobile-wizard-progress{
  height:6px;
  margin-top:10px;
  overflow:hidden;
  border-radius:999px;
  background:#eceff3;
}
.wsk-mobile-wizard-progress span{
  display:block;
  width:0;
  height:100%;
  border-radius:999px;
  background:var(--wsk-mobile-accent);
  transition:width .22s ease;
}
.wsk-mobile-wizard-summary{
  display:flex;
  gap:6px;
  margin-top:8px;
  overflow-x:auto;
  padding-bottom:2px;
  -webkit-overflow-scrolling:touch;
}
.wsk-mobile-wizard-summary:empty{
  display:none;
}
.wsk-mobile-wizard-summary span{
  flex:0 0 auto;
  max-width:230px;
  overflow:hidden;
  padding:5px 8px;
  border:1px solid #eceff3;
  border-radius:999px;
  background:#fff;
  color:#374151;
  font-size:12px;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.wsk-mobile-wizard-stage{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px;
  overflow:hidden;
  background:#f6f7f8;
}
#wsk-mobile-wizard-slot{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
}
#wsk-mobile-wizard-slot #wsk-fw-wizard{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
  border:0;
  border-radius:18px;
  background:#fff;
  box-shadow:0 8px 28px rgba(16,24,40,.08);
  overflow:hidden;
  font-family:inherit;
}
#wsk-mobile-wizard-slot #wsk-fw-wizard .ux-accordion-heading{
  display:none!important;
}
#wsk-mobile-wizard-slot #wsk-fw-wizard .ux-accordion-panel{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  padding:16px;
  border:0;
  background:#fff;
  -webkit-overflow-scrolling:touch;
}
#wsk-mobile-wizard-slot #wsk-fw-wizard .ux-accordion-panel.wsk-mobile-needs-selection{
  animation:wskMobileShake .34s ease;
  box-shadow:inset 0 0 0 2px rgba(231,83,3,.28);
}
@keyframes wskMobileShake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-4px)}
  75%{transform:translateX(4px)}
}
#wsk-mobile-wizard-slot #wsk-fw-wizard .wsk-fw-colors,
#wsk-mobile-wizard-slot #wsk-fw-wizard .wsk-fw-areas,
#wsk-mobile-wizard-slot #wsk-fw-wizard .wsk-fw-flexlist{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(92px,1fr));
  gap:10px!important;
  align-items:stretch;
  width:100%;
  margin:0!important;
  padding:0!important;
}
#wsk-mobile-wizard-slot #wsk-fw-wizard .wsk-fw-colors li,
#wsk-mobile-wizard-slot #wsk-fw-wizard .wsk-fw-areas li{
  width:auto!important;
  min-height:112px;
  justify-content:flex-start;
  padding:10px 8px;
  border:1px solid #eceff3;
  border-radius:14px;
  background:#fff;
  color:#111827;
  font-size:12px;
  font-weight:750;
  line-height:1.2;
  box-shadow:0 1px 2px rgba(16,24,40,.04);
}
#wsk-mobile-wizard-slot #wsk-fw-wizard .wsk-fw-colors li.is-selected,
#wsk-mobile-wizard-slot #wsk-fw-wizard .wsk-fw-areas li.is-selected{
  border-color:var(--wsk-mobile-accent);
  background:var(--wsk-mobile-accent-soft);
  box-shadow:0 0 0 3px rgba(231,83,3,.10);
}
#wsk-mobile-wizard-slot #wsk-fw-wizard .wsk-fw-colors li img,
#wsk-mobile-wizard-slot #wsk-fw-wizard .wsk-fw-color-fallback-swatch{
  width:58px!important;
  height:58px!important;
  margin-left:auto;
  margin-right:auto;
  border-radius:12px;
}
#wsk-mobile-wizard-slot #wsk-fw-wizard .wsk-fw-areas li img,
#wsk-mobile-wizard-slot #wsk-fw-wizard .wsk-fw-areas li > div,
#wsk-mobile-wizard-slot #wsk-fw-wizard .wsk-area-swatch{
  width:74px!important;
  height:74px!important;
  margin-left:auto;
  margin-right:auto;
}
#wsk-mobile-wizard-slot #wsk-fw-wizard .wsk-area-swatch img{
  width:74px!important;
  height:74px!important;
}
#wsk-mobile-wizard-slot #wsk-fw-wizard .wsk-fw-options{
  display:grid!important;
  grid-template-columns:1fr;
  gap:10px!important;
}
#wsk-mobile-wizard-slot #wsk-fw-wizard .wsk-fw-opt,
#wsk-mobile-wizard-slot #wsk-fw-calc,
#wsk-mobile-wizard-slot #wsk-fw-wizard .wsk-fw-stock-use{
  width:100%;
  min-height:48px;
  border-radius:14px;
  font-weight:850;
  white-space:normal;
}
#wsk-mobile-wizard-slot #wsk-fw-wizard .wsk-fw-opt.is-selected{
  background:var(--wsk-mobile-accent)!important;
  border-color:var(--wsk-mobile-accent)!important;
  color:#fff!important;
}
#wsk-mobile-wizard-slot #wsk-fw-wizard input[type=number]{
  width:100%;
  min-height:50px;
  padding:10px 14px;
  border:1px solid #d0d5dd;
  border-radius:14px;
  font-size:18px;
}
#wsk-mobile-wizard-slot #wsk-fw-wizard .wsk-fw-fixedqty ul{
  display:grid!important;
  grid-template-columns:1fr;
  gap:8px;
}
#wsk-mobile-wizard-slot #wsk-fw-wizard .wsk-fw-fixedqty li{
  margin:0!important;
}
#wsk-mobile-wizard-slot #wsk-fw-wizard .wsk-fw-fixedqty label{
  min-height:48px;
  padding:10px 12px;
  border:1px solid #eceff3;
  border-radius:14px;
  background:#fff;
}
#wsk-mobile-action-slot{
  flex:0 0 auto;
  min-height:0;
}
#wsk-mobile-wizard-shell #wsk-fw-action-area{
  display:none;
}
#wsk-mobile-wizard-shell.wsk-mobile-result-visible #wsk-fw-action-area{
  display:block;
  max-height:38vh;
  overflow:auto;
  padding:12px;
  border:1px solid var(--wsk-mobile-border);
  border-radius:18px;
  background:#fff;
  box-shadow:0 8px 28px rgba(16,24,40,.08);
  -webkit-overflow-scrolling:touch;
}
#wsk-mobile-wizard-shell #wsk-fw-result{
  padding:12px;
  margin-bottom:10px!important;
  border-radius:14px;
  font-size:13px;
}
#wsk-mobile-wizard-shell #wsk-fw-result:empty{
  display:none;
}
#wsk-mobile-wizard-shell #wsk-fw-hint{
  display:none!important;
}
#wsk-mobile-wizard-shell #wsk-fw-action-area form.cart{
  margin:0;
}
#wsk-mobile-wizard-shell #wsk-fw-add-to-cart,
#wsk-mobile-wizard-shell #wsk-offer-btn{
  width:100%;
  min-height:48px;
  border-radius:999px;
  font-weight:900;
}
#wsk-mobile-wizard-shell #wsk-offer-btn{
  margin-top:8px;
}
.wsk-mobile-wizard-footer{
  flex:0 0 auto;
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:10px;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid var(--wsk-mobile-border);
  background:#fff;
  box-shadow:0 -1px 12px rgba(16,24,40,.05);
}
.wsk-mobile-wizard-footer .button{
  min-height:48px;
  border-radius:999px;
  font-weight:900;
}
.wsk-mobile-wizard-footer .button:disabled{
  opacity:.45;
}
@media (max-width:1024px){
  .wsk-mobile-config-open{
    display:block!important;
    width:100%;
    min-height:52px;
    margin:14px 0;
    border-radius:999px!important;
    background:#e75303!important;
    color:#fff!important;
    font-weight:900!important;
    letter-spacing:.01em;
  }
  body:not(.wsk-mobile-wizard-active) #wsk-fw-wizard,
  body:not(.wsk-mobile-wizard-active) #wsk-fw-action-area{
    display:none!important;
  }
}
@media (max-width:390px){
  .wsk-mobile-wizard-header{padding:10px 10px 8px;}
  .wsk-mobile-wizard-stage{padding:10px;}
  #wsk-mobile-wizard-title{font-size:16px;}
  .wsk-mobile-wizard-stepcount{font-size:11px;padding:5px 7px;}
  #wsk-mobile-wizard-slot #wsk-fw-wizard .wsk-fw-colors,
  #wsk-mobile-wizard-slot #wsk-fw-wizard .wsk-fw-areas,
  #wsk-mobile-wizard-slot #wsk-fw-wizard .wsk-fw-flexlist{
    grid-template-columns:repeat(auto-fit,minmax(84px,1fr));
  }
}