/*
Mixins
==================================================
The `mixins.less` file contains the imports to all mixin documents that simplify the work with Shopware.

Mixin specific documentation can be found inside each mixin file.

Mixins can be used by adding the mixin class onto an element inside Shopware.

**Example:**<br/>
`.border-radius(3px);`
*/
/*
Appearance mixin
============================================
The mixins provides you a cross-browser compatible method to set the appearance of the element.

Please refer to <http://caniuse.com/appearance> to see the browser support table of the feature.

######Example:
`.appearance([value]);`

`@param {String} type The type you want to use`
*/
/*
Backface visibility mixin
============================================
The mixins provides you a cross-browser compatible method to set the backface-visibility of the element.

Please refer to <http://caniuse.com/transforms3d> to see the browser support table of the feature.

######Example:
`.backface-visibility([value]);`

`@param {String} visibility The visibility you want to use`
*/
/*
Border-radius mixin
=============================================
The mixins provides you a cross-browser compatible method to set a border-radius.

Please refer to <http://caniuse.com/border-radius> to see the browser support table of the feature.

######Syntax:
`@param {String} radius The radius you want to set`<br/>

######Example:
Same border-radius for all edges: <br/>
`.border-radius([pixel-value]);`<br/>

Different border-radius:<br/>
`.border-radius-multi([pixel-value-leftTop], [pixel-value-rightTop], [pixel-value-rightBottom], [pixel-value-leftBottom]);`<br/>

Resetting border radius:<br/>
`.reset-border-radius();`
*/
/*
Box shadow mixin
==============================================
The mixins provides you a cross-browser compatible method to set a box-shadow.

Please refer to <http://caniuse.com/css-boxshadow> to see the browser support table of the feature.

######Example:
`.box-shadow([h-shadow-value], [v-shadow-value], [blur-amount], [spread-amount], [shadow-color]);`

`@param: {Number} x: Offset to the x axis (Default: 0)`<br/>
`@param: {Number} y: Offset to the y axis (Default: 0)`<br/>
`@param: {Number} blur: Bluring radius (Default: 1px)`<br/>
`@param: {String} color: Color of the shadow (Default: #000)`<br/>
*/
/*
Box-sizing mixin
========================================
The mixins provides you a cross-browser compatible method to set the box-sizing which supports IE starting from
version 8 to the newest one.

Please refer to <http://caniuse.com/css3-boxsizing> to see the browser support table of the feature.

######Example:
`.box-sizing:([value]);`

`@param: {String} box-sizing: Box model, which should be used (Default: border-box)`
*/
/*
Clearfix mixin
================================
The clearfix mixin allows the easy integration of the floating-solution method.

The clearfix resolves the problem that occurs when two floating elements are nested inside a parent element, then sometimes the parent elements height disappears.

Add the `.clearfix` class to the parent element.

######Example:
`.clearfix();`

*/
/*
Gradient mixin
====================================================
The mixins provides you a cross-browser compatible method to set a linear gradient which goes from top to bottom.

Please refer to <http://caniuse.com/css-gradients> to see the browser support table of the feature.

Shopware 5 also provides gradient mixins based on the basic color variables that can be changed in the backend theme configuration tool.
######Basic gradients:
`.primary-gradient();`<br/>
`.secondary-gradient();`<br/>
`.white-gradient();`<br/>

######Linear Gradient Example:
`.linear-gradient([startcolor-value], [endcolor-value]);`

`@param {String} start The start color of the gradient`<br/>
`@param {String} end The end color of the gradient`
*/
/*
Opacity
===============================================
The mixins provides you a cross-browser compatible opacity which supports IE starting from version 8 to the
newest one. Safari, Chrome and Firefox are supported in all versions.

Please refer to <http://caniuse.com/css-opacity> to see the browser support table of the feature.

######Example:
`.opacity([value]);`

`@param: {Number} opacity: Value of the opacity, starting from 0 to 1`
*/
/*
Rotate mixin
===============================================
The mixins provides you a cross-browser compatible method to set a transformation which rotates the element. Keep in
mind that you can not mix different transformations.

Please refer to <http://caniuse.com/transforms2d> to see the browser support table of the feature.

######Example:
`.rotate([value]);`

`@param {String} degree The degree value you want to set. Please keep in mind that you need to suffix the unit.`
*/
/*
Scale mixin
===============================
The mixins provides you a cross-browser compatible method to set a transformation which scales the element.
Keep in mind that you can not mix different transformations.

Please refer to <http://caniuse.com/transforms2d> to see the browser support table of the feature.

######Example:
`.scale([value]);`

`@param {String} scale-value The scale value, you want to set`
*/
/*
Touch callout mixin
===========================================
Disables the default callout shown when you touch and hold a touch target.

######Support:
- iOS 2.0<br/>

######Example:
`.touch-callout([value]);`

`@param: {String} type: The type you want to set (Default: none)`
*/
/*
Transform style mixin
======================================
The mixins provides you a cross-browser compatible method to set a transformation style.

Please refer to <http://caniuse.com/transforms3d> to see the browser support table of the feature.

######Example:
`.transform-style([value]);`

`@param {String} Style The style you want for your transformation (Default: preserve-3d)`
*/
/*
Transform origin mixin
======================================
The mixins provides you a cross-browser compatible method to set the transform origin position.

Please refer to <http://caniuse.com/transforms2d> to see the browser support table of the feature.

######Example:
`.transform-origin([x-value],[y-value],[z-value]);`

`@param: x: Sets the origin position on the x axis (Default: 50%)`<br/>
`@param: y: Sets the origin position on the y axis (Default: 50%)`<br/>
`@param: z: Sets the origin position on the z axis (Default: 0)`
*/
/*
Transition mixin
=========================================
The mixins provides you a cross-browser compatible method to set a transition.

Please refer to <http://caniuse.com/css-transitions> to see the browser support table of the feature.

######Example:
`.transition([property], [duration-value], [easing]);`

`@param: {String} properties: The properites which should be animated (Default: all)`<br/>
`@param: {String} duration: Duration of the transition including the unit (Default: 0.3s)`<br/>
`@param: {String} easing: The easing which should be used for the transition (Default: ease-out)`
*/
/*
Translate mixin
============================================
The mixins provides you a cross-browser compatible method to set a transition.

Please refer to <http://caniuse.com/css-transitions> to see the browser support table of the feature.

Keep in mind, that 3d translations are needing an perspective, otherwise the translated elements get skewed up.

######Example:
`.translate([x-value],[y-value],[z-value]);`

`@param: {String} rotateX: The rotation on the x-axis`<br/>
`@param: {String} rotateY: The rotation on the y-axis`<br/>
`@param: {String} rotateZ: The rotation on the z-axis`<br/>
*/
/*
Unitize mixin
================================================
The unitize mixins converts values from px-units to the relative rem-units, providing all the benefits of units like em and rem, without you having to do any calculations yourself.

######Syntax:
`@property` = the property that should be unitized.<br/>
`@value` = pixel-value<br/>
`@baseValue` (optional) = default browser font-size (@remScaleFactor in most cases)<br/>

######Example Unitize mixin with custom property
`.unitize(@property, @value);`<br/>
`.unitize(font-size, 16);`

######Specific built-in functions
In addition to the general `.unitize()` mixin, Shopware contains specific mixins to quickly calculate values which (for example) have more than one property.<br/>
<br/>

`.unitize-height(@value)`<br/>
`.unitize-width(@value)`<br/>
`.unitize-max-height(@value)`<br/>
`.unitize-max-width(@value)`<br/>
`.unitize-min-width(@value)`<br/>
`.unitize-padding(@topValue, @rightValue: @topValue, @bottomValue: @topValue, @leftValue: @rightValue)`<br/>
`.unitize-margin(@topValue, @rightValue: @topValue, @bottomValue: @topValue, @leftValue: @rightValue)`<br/>
`.unitize-variable(@value)`<br/>
*/
/*
User-select mixin
===============================
The mixins provides you a cross-browser compatible method to set a user selection mode.

Please refer to <http://caniuse.com/user-select-none> to see the browser support table of the feature.

######Example:
`.user-select([value]);`

`@param: {String} type: The type you want to set (Default: none)`
*/
/*
Transform mixin
==============================================
The mixins provides you a cross-browser compatible method to set a transformation.

Please refer to <http://caniuse.com/transforms2d> to see the browser support table of the feature.

######Example:
`.transform([value]);`

`@param: {String} properties: The transformation(s) that should be applied`
*/
/*
Tab highlighting mixin
===========================
Sets the color of the highlighting when a link was clicked / tapped.

Please refer to <http://www.browsersupport.net/CSS/-webkit-tap-highlight-color> to see the browser support table of the feature.

######Example:
`.tap-highlight-color([color-value]);`

`@param: {String} color: The color you want to set (Default: rgba(0, 0, 0, 0))`
*/
/*
Keyframe mixin
=============================================
The mixins provides you a cross-browser compatible method to set a keyframe.

Please refer to <http://caniuse.com/#search=keyframe> to see the browser support table of the feature.

######Example:
`.keyframes([name-value], [frames-value]);`

`@param: {String} name: The keyframe animation name`<br/>
`@param: {String} roules: the animation frames`
*/
@-webkit-keyframes keyframe--spin {
  from {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes keyframe--spin {
  from {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes keyframe--spin-reverse {
  from {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  to {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
}
@keyframes keyframe--spin-reverse {
  from {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
  to {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
}
/*
Animations mixin
============================================
The mixins provides you a cross-browser compatible method to set animation values.

Please refer to <http://caniuse.com/css-animation> to see the browser support table of the feature.

######Example:
`.animation([value]);`

`@param: {String} value: All animation values`
*/
/*
Column count mixin
=============================================
This mixin provides you a cross-browser compatible method to set the column count property.

Please refer to <http://caniuse.com/multicolumn> to see the browser support table of the feature.

######Example:
`.column-count([value]);`

`@param: {Number} count: The amount of columns you want to set (Default: auto)`
*/
/*
Hypheration mixin
======================================
The mixins provides you a cross-browser compatible method to set the hyphenation.

Please refer to <http://caniuse.com/css-hyphens> to see the browser support table of the feature.

######Example:
`.hyphens([value]);`

`@param: {String} hyphenation: The hyphenation that should be used (Default: auto)`
*/
/*
Grabbing cursor
==================================
This mixin provides you a cross-browser compatible method to set the cursor grabbing behavior.

######Example:
`.cursorGrab();`<br/>
`.cursorGrabbing();`<br/>

*/
/*
Clear form button mixin
========================
This mixin removes styles from the button element and makes it look like a text link.
*/
/*
 * KK Karton Konfigurator v5.0
 * Premium single-viewport configurator
 * Brand: @brand-primary (#16497C), @brand-primary-light (#ffc139)
 */
/* ========================================
   Page Layout: Hide sidebar, full-width content
   ======================================== */
body.is--ctl-kartonkonfigurator .sidebar-main:not(.is--active):not(.is--open) {
  display: none;
}
body.is--ctl-kartonkonfigurator .content-main {
  margin-left: 0;
  width: 100%;
}
/* Fix: Desktop "Unsere Kategorien" sub-level panels remain visible after close.
   Scoped to configurator page only to avoid side effects on other pages. */
@media screen and (min-width: 64em) {
  body.is--ctl-kartonkonfigurator .navigation-main {
    overflow: hidden;
  }
  body.is--ctl-kartonkonfigurator .navigation-main.show {
    overflow: visible;
  }
}
/* ========================================
   Container
   ======================================== */
.kk-konfigurator {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0rem 1.25rem 0.9375rem 1.25rem;
  overflow-x: hidden;
}
/* ========================================
   Hero Header
   ======================================== */
.kk-hero {
  background: #16497c;
  margin: 0rem -1.25rem 0.625rem -1.25rem;
  padding: 0.625rem 1.5rem 0.625rem 1.5rem;
}
.kk-hero--text h1 {
  color: #fff;
  font-size: 1.375rem;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.5px;
}
.kk-hero--text h1::after {
  content: '';
  display: block;
  width: 2.5rem;
  height: 2px;
  background: #ffc139;
  margin: 0.25rem 0rem 0rem 0rem;
}
.kk-hero--text p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.75rem;
  margin: 0;
  margin: 0.1875rem 0rem 0rem 0rem;
  letter-spacing: 0.5px;
}
/* ========================================
   3-Column Grid
   ======================================== */
.kk-grid {
  display: flex;
  gap: 20px;
  align-items: stretch;
  min-height: 0;
}
.kk-col-config {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kk-col-preview {
  width: 17.5rem;
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.kk-col-summary {
  width: 17.5rem;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* ========================================
   Fields
   ======================================== */
.kk-field {
  /* gap handles spacing */
}
.kk-field-row {
  display: flex;
  gap: 16px;
}
.kk-field--half {
  flex: 1;
  min-width: 0;
}
.kk-field-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: #16497c;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin: 0rem 0rem 0.375rem 0rem;
  position: relative;
}
.kk-match-tag {
  position: absolute;
  left: 100px;
  top: 50%;
  transform: translateY(-50%);
  background: #e8f5e9;
  color: #2e7d32;
  padding: 0.125rem 0.5rem 0.125rem 0.5rem;
  border-radius: 10px;
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.2px;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid #c8e6c9;
  cursor: pointer;
  transition: all 0.2s ease;
}
.kk-match-tag:hover {
  background: #c8e6c9;
  color: #1b5e20;
}
/* ========================================
   FEFCO Dropdown
   ======================================== */
.kk-fefco-select {
  position: relative;
}
.kk-fefco-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.875rem 0.625rem 0.875rem;
  border: 2px solid #e0e0e8;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
}
.kk-fefco-trigger:hover,
.kk-fefco-trigger.is--open {
  border-color: #16497c;
  box-shadow: 0 0 0 3px rgba(22, 73, 124, 0.08);
}
.kk-fefco-trigger.is--selected {
  border-color: #ffc139;
  background: rgba(255, 193, 57, 0.05);
}
.kk-fefco-trigger.is--open {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.kk-fefco-trigger--text {
  font-size: 0.9375rem;
  color: #999;
}
.is--selected .kk-fefco-trigger--text {
  color: #16497c;
  font-weight: 700;
}
.kk-fefco-trigger--arrow {
  color: #16497c;
  font-size: 0.875rem;
  transition: transform 0.2s;
}
.is--open .kk-fefco-trigger--arrow {
  transform: rotate(180deg);
}
.kk-fefco-dropdown {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #fff;
  border: 2px solid #16497c;
  border-top: 1px solid #eee;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  max-height: 360px;
  overflow-y: auto;
  z-index: 200;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  /* Scrollbar inside dropdown */
}
.kk-fefco-dropdown.is--open {
  display: block;
}
.kk-fefco-dropdown::-webkit-scrollbar {
  width: 8px;
}
.kk-fefco-dropdown::-webkit-scrollbar-track {
  background: #f5f5f5;
}
.kk-fefco-dropdown::-webkit-scrollbar-thumb {
  background: rgba(22, 73, 124, 0.4);
  border-radius: 4px;
}
.kk-fefco-dropdown::-webkit-scrollbar-thumb:hover {
  background: rgba(22, 73, 124, 0.6);
}
/* Backdrop: hidden by default, only shown on mobile via JS */
.kk-fefco-backdrop {
  display: none;
}
.kk-fefco-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0.5rem 0.75rem 0.5rem 0.75rem;
  cursor: pointer;
  transition: background 0.12s;
  border-bottom: 1px solid #f0f0f0;
}
.kk-fefco-option:last-child {
  border-bottom: none;
}
.kk-fefco-option:hover {
  background: rgba(22, 73, 124, 0.05);
}
.kk-fefco-option.is--selected {
  background: rgba(255, 193, 57, 0.15);
}
.kk-fefco-option--img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: 6px;
  background: #f8f9fb;
  padding: 2px;
}
.kk-fefco-option--text {
  min-width: 0;
  flex: 1;
}
.kk-fefco-option--text strong {
  display: block;
  font-size: 0.875rem;
  color: #16497c;
  font-weight: 700;
}
.kk-fefco-option--text small {
  display: block;
  font-size: 0.75rem;
  color: #777;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* FEFCO "Beliebt" Badge */
.kk-fefco-badge {
  display: inline-block;
  padding: 0.125rem 0.5rem 0.125rem 0.5rem;
  background: #ffc139;
  color: #16497c;
  font-size: 0.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}
/* FEFCO "Werkzeug" Badge */
.kk-fefco-badge--tool {
  background: #fff3e0;
  color: #e65100;
}
/* ========================================
   Dimension Inputs
   ======================================== */
.kk-dims {
  display: flex;
  align-items: center;
  gap: 6px;
}
.kk-dim-input {
  flex: 1;
  min-width: 0;
  padding: 0.625rem 0.625rem 0.625rem 0.625rem;
  border: 2px solid #e0e0e8;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #111;
  transition: border-color 0.2s;
  box-sizing: border-box;
  -moz-appearance: textfield;
}
.kk-dim-input::-webkit-inner-spin-button,
.kk-dim-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.kk-dim-input:focus {
  border-color: #16497c;
  outline: none;
  box-shadow: 0 0 0 3px rgba(22, 73, 124, 0.1);
}
.kk-dim-input::placeholder {
  font-weight: 400;
  color: #bbb;
  font-size: 0.75rem;
}
.kk-dim-x {
  font-size: 1.125rem;
  color: #ccc;
  font-weight: 300;
  flex-shrink: 0;
}
/* ========================================
   Chips (quality, color, print)
   ======================================== */
.kk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.kk-chip-label {
  font-size: 0.625rem;
  color: #aaa;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0rem 0.375rem 0rem 0rem;
  white-space: nowrap;
  min-width: 3.4375rem;
}
.kk-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0.375rem 0.75rem 0.375rem 0.75rem;
  border: 2px solid #e0e0e8;
  border-radius: 20px;
  background: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  line-height: 1.2;
}
.kk-chip:hover {
  border-color: #16497c;
  color: #16497c;
  transform: translateY(-1px);
}
.kk-chip.is--selected {
  border-color: #16497c;
  background: #16497c;
  color: #fff;
  box-shadow: 0 2px 10px rgba(22, 73, 124, 0.25);
}
.kk-dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  border: 1.5px solid #ddd;
  flex-shrink: 0;
}
.is--selected .kk-dot {
  border-color: #fff;
}
.kk-dot--braun {
  background: #a0724a;
}
.kk-dot--weiss {
  background: #fff;
}
/* Die-only chip (E-Welle) - only visible for Stanzverpackungen */
.kk-chip--die-only {
  border-style: dashed;
}
/* Print chip with tooltip */
.kk-chip--print {
  position: relative;
}
.kk-chip-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  padding: 0.375rem 0.625rem 0.375rem 0.625rem;
  border-radius: 6px;
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
  z-index: 100;
  pointer-events: none;
}
.kk-chip-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #333;
}
.kk-chip--print:hover .kk-chip-tooltip {
  display: block;
}
/* ========================================
   Quantity
   ======================================== */
.kk-qty-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.kk-qty-input {
  width: 8.75rem;
  padding: 0.625rem 0.625rem 0.625rem 0.625rem;
  border: 2px solid #e0e0e8;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #111;
  text-align: center;
  box-sizing: border-box;
  -moz-appearance: textfield;
}
.kk-qty-input::-webkit-inner-spin-button,
.kk-qty-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
}
.kk-qty-input:focus {
  border-color: #16497c;
  outline: none;
  box-shadow: 0 0 0 3px rgba(22, 73, 124, 0.1);
}
.kk-qty-input::placeholder {
  font-weight: 400;
  color: #bbb;
  font-size: 0.75rem;
}
.kk-qty-unit {
  font-size: 0.875rem;
  color: #777;
  font-weight: 600;
}
/* ========================================
   Pallet Advisor
   ======================================== */
.kk-advisor {
  background: #f8f9fb;
  border: 1.5px solid #e0e5ec;
  border-radius: 10px;
  overflow: hidden;
}
.kk-advisor--head {
  background: #16497c;
  color: #fff;
  padding: 0.3125rem 0.875rem 0.3125rem 0.875rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.kk-advisor--body {
  padding: 0.375rem 0.875rem 0.5rem 0.875rem;
}
.kk-advisor--flat {
  font-size: 0.6875rem;
  color: #666;
  margin: 0rem 0rem 0.125rem 0rem;
}
.kk-advisor--perpal {
  font-size: 0.75rem;
  color: #16497c;
  margin: 0rem 0rem 0.375rem 0rem;
}
.kk-advisor--perpal strong {
  font-weight: 800;
}
.kk-advisor--tiers {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kk-tier {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.6875rem;
  color: #777;
  padding: 0.125rem 0.5rem 0.125rem 0.5rem;
  border-radius: 4px;
  transition: all 0.15s;
}
.kk-tier--dot {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  border: 2px solid #ccc;
  flex-shrink: 0;
  transition: all 0.15s;
}
.is--active .kk-tier--dot {
  background: #16497c;
  border-color: #16497c;
}
.kk-tier--label {
  font-weight: 700;
  white-space: nowrap;
}
.kk-tier--value {
  white-space: nowrap;
}
.kk-tier.is--active {
  background: rgba(22, 73, 124, 0.08);
  color: #16497c;
  font-weight: 600;
}
.kk-advisor--tool {
  padding: 0.3125rem 0.875rem 0.3125rem 0.875rem;
  background: #fff3e0;
  color: #e65100;
  font-size: 0.6875rem;
  font-weight: 600;
  border-top: 1px solid #ffe0b2;
}
.kk-advisor--hint {
  padding: 0.25rem 0.875rem 0.25rem 0.875rem;
  font-size: 0.5625rem;
  color: #aaa;
  text-align: center;
  border-top: 1px solid #eee;
}
/* ========================================
   Preview: Tablet Device Mockup
   ======================================== */
.kk-preview-device {
  width: 100%;
  background: linear-gradient(135deg, #2c2c2e 0%, #1a1a1c 100%);
  border-radius: 18px;
  padding: 0.625rem 0.625rem 0.875rem 0.625rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  position: relative;
}
.kk-device-camera {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #555;
  margin: 0 auto;
  margin: 0rem 0rem 0.5rem 0rem;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.15);
}
.kk-device-screen {
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 0.9;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0rem 0rem 2.125rem 0rem;
}
.kk-device-screen img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.kk-preview-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.5rem 0.75rem 0.5rem 0.75rem;
  background: rgba(22, 73, 124, 0.85);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 1px;
  border-radius: 0 0 6px 6px;
}
/* ========================================
   Summary Card
   ======================================== */
.kk-summary-card {
  border: 2px solid #16497c;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.kk-summary-card--head {
  background: #16497c;
  color: #fff;
  padding: 0.625rem 0.875rem 0.625rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.kk-summary-card--body {
  padding: 0.25rem 0rem 0.25rem 0rem;
}
.kk-s-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.375rem 0.875rem 0.375rem 0.875rem;
  border-bottom: 1px solid #f0f0f0;
  font-size: 0.8125rem;
}
.kk-s-row:last-child {
  border-bottom: none;
}
.kk-s-row--highlight {
  background: rgba(255, 193, 57, 0.1);
}
.kk-s-label {
  color: #888;
  font-weight: 600;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.kk-s-val {
  color: #16497c;
  font-weight: 700;
  text-align: right;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ========================================
   CTA + Secondary Buttons
   ======================================== */
.kk-btn-cta {
  display: block;
  width: 100%;
  padding: 0.875rem 1rem 0.875rem 1rem;
  background: #ffc139;
  color: #16497c;
  border: none;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.3px;
}
.kk-btn-cta:hover {
  background: #ffb71a;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 193, 57, 0.45);
}
.kk-btn-cta:active {
  transform: translateY(0);
}
.kk-btn-cta:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.kk-btn-secondary {
  display: block;
  width: 100%;
  padding: 0.625rem 0.875rem 0.625rem 0.875rem;
  background: transparent;
  color: #16497c;
  border: 2px solid #16497c;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.kk-btn-secondary i {
  margin: 0rem 0.3125rem 0rem 0rem;
}
.kk-btn-secondary:hover {
  background: rgba(22, 73, 124, 0.05);
  transform: translateY(-1px);
}
.kk-btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
/* ========================================
   Modal Popup (Kontaktformular)
   ======================================== */
.kk-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(3px);
}
.kk-modal {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: kkModalIn 0.25s ease-out;
}
@keyframes kkModalIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.kk-modal--close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  font-size: 1.75rem;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.15s;
  z-index: 1;
}
.kk-modal--close:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}
.kk-modal--header {
  background: #16497c;
  color: #fff;
  padding: 1.5rem 1.75rem 1.125rem 1.75rem;
  border-radius: 16px 16px 0 0;
}
.kk-modal--header h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
}
.kk-modal--header p {
  margin: 0;
  margin: 0.375rem 0rem 0rem 0rem;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.75);
}
.kk-modal--body {
  padding: 1.25rem 1.75rem 1.25rem 1.75rem;
}
/* Mini-Zusammenfassung im Modal */
.kk-modal--summary {
  background: #f8f9fb;
  border: 1.5px solid #e8eaef;
  border-radius: 8px;
  padding: 0.75rem 1rem 0.75rem 1rem;
  margin: 0rem 0rem 1.125rem 0rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 20px;
  font-size: 0.75rem;
}
.kk-modal--summary .kk-ms-item {
  display: flex;
  gap: 4px;
}
.kk-modal--summary .kk-ms-label {
  color: #888;
  font-weight: 600;
  white-space: nowrap;
}
.kk-modal--summary .kk-ms-val {
  color: #16497c;
  font-weight: 700;
}
/* 2-Spalten Form Grid */
.kk-modal--form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.kk-form-row {
  display: flex;
  gap: 14px;
}
.kk-form-field {
  flex: 1;
  min-width: 0;
}
.kk-form-field--full {
  width: 100%;
}
.kk-form-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: #333;
  margin: 0rem 0rem 0.3125rem 0rem;
}
.kk-form-input {
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  padding: 0.6875rem 0.875rem 0.6875rem 0.875rem;
  border: 2px solid #e0e0e8;
  border-radius: 8px;
  font-size: 0.875rem;
  color: #111;
  box-sizing: border-box !important;
  transition: all 0.2s;
}
.kk-form-input:focus {
  border-color: #16497c;
  outline: none;
  box-shadow: 0 0 0 3px rgba(22, 73, 124, 0.1);
}
.kk-form-input::placeholder {
  color: #bbb;
}
.kk-form-textarea {
  resize: none;
  min-height: 70px;
}
/* Modal Footer */
.kk-modal--footer {
  padding: 0rem 1.75rem 1.5rem 1.75rem;
}
.kk-modal--errors {
  background: #fff5f5;
  border: 1.5px solid #e74c3c;
  border-radius: 6px;
  padding: 0.5rem 0.75rem 0.5rem 0.75rem;
  color: #c0392b;
  font-size: 0.8125rem;
  margin: 0rem 0rem 0.75rem 0rem;
}
.kk-modal--errors ul {
  margin: 0;
  padding: 0rem 0rem 0rem 1rem;
}
.kk-modal--errors li {
  margin: 0.125rem 0rem 0.125rem 0rem;
}
.kk-modal--loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0.75rem 0rem 0.75rem 0rem;
  color: #16497c;
  font-weight: 600;
  font-size: 0.875rem;
}
.kk-modal--submit {
  display: block;
  width: 100%;
  padding: 0.875rem 1.25rem 0.875rem 1.25rem;
  background: #ffc139;
  color: #16497c;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
}
.kk-modal--submit:hover {
  background: #ffb71a;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(255, 193, 57, 0.4);
}
.kk-modal--submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.kk-modal--hint {
  text-align: center;
  font-size: 0.6875rem;
  color: #999;
  margin: 0.5rem 0rem 0rem 0rem;
}
/* ========================================
   Errors + Loading
   ======================================== */
.kk-errors {
  background: #fff5f5;
  border: 1.5px solid #e74c3c;
  border-radius: 6px;
  padding: 0.5rem 0.75rem 0.5rem 0.75rem;
  color: #c0392b;
  font-size: 0.8125rem;
}
.kk-errors ul {
  margin: 0;
  padding: 0rem 0rem 0rem 1rem;
}
.kk-errors li {
  margin: 0.125rem 0rem 0.125rem 0rem;
}
.kk-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0.625rem 0rem 0.625rem 0rem;
  color: #16497c;
  font-weight: 600;
  font-size: 0.875rem;
}
.kk-spinner {
  width: 1.25rem;
  height: 1.25rem;
  border: 2.5px solid #e0e0e8;
  border-top-color: #16497c;
  border-radius: 50%;
  animation: kkSpin 0.7s linear infinite;
}
@keyframes kkSpin {
  to {
    transform: rotate(360deg);
  }
}
/* ========================================
   Products
   ======================================== */
.kk-products {
  margin: 1rem 0rem 0rem 0rem;
  border-top: 2px solid #eee;
  padding: 0.75rem 0rem 0rem 0rem;
}
.kk-products--banner {
  background: #e8f5e9;
  color: #2e7d32;
  padding: 0.5rem 0.875rem 0.5rem 0.875rem;
  border-radius: 8px 8px 0 0;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.kk-products--hint {
  background: #f1f8e9;
  padding: 0.375rem 0.875rem 0.375rem 0.875rem;
  font-size: 0.6875rem;
  color: #558b2f;
  border-bottom: 1.5px solid #c8e6c9;
  border-radius: 0 0 8px 8px;
  margin: 0rem 0rem 0.75rem 0rem;
}
.kk-products--grid {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 0rem 0rem 0.625rem 0rem;
  scrollbar-width: auto;
  scrollbar-color: #16497c #f0f0f0;
}
.kk-products--grid::-webkit-scrollbar {
  height: 10px;
}
.kk-products--grid::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 5px;
}
.kk-products--grid::-webkit-scrollbar-thumb {
  background: #16497c;
  border-radius: 5px;
}
.kk-products--grid::-webkit-scrollbar-thumb:hover {
  background: #103559;
}
.kk-product-card {
  flex: 0 0 180px;
  border: 1.5px solid #e8eaef;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  transition: all 0.2s ease;
}
.kk-product-card:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}
.kk-product-card--image {
  height: 6.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f9f9f9;
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
}
.kk-product-card--image img {
  max-width: 100%;
  max-height: 90px;
  object-fit: contain;
}
.kk-product-card--info {
  padding: 0.5rem 0.625rem 0.5rem 0.625rem;
}
.kk-product-card--name {
  font-size: 0.75rem;
  color: #16497c;
  font-weight: 600;
  display: block;
  margin: 0rem 0rem 0.1875rem 0rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kk-product-card--dims {
  font-size: 0.6875rem;
  color: #888;
  display: block;
  margin: 0rem 0rem 0.3125rem 0rem;
}
.kk-product-card--link {
  font-size: 0.75rem;
  color: #ffc139;
  font-weight: 700;
}
.kk-product-card--link:hover {
  color: #ffb106;
}
/* ========================================
   Thank You Page
   ======================================== */
.kk-thankyou {
  text-align: center;
  padding: 2.5rem 1.25rem 2.5rem 1.25rem;
  max-width: 520px;
  margin: 0 auto;
}
.kk-thankyou--icon {
  width: 4.375rem;
  height: 4.375rem;
  line-height: 4.375rem;
  border-radius: 50%;
  background: #16497c;
  color: #fff;
  font-size: 2.125rem;
  margin: 0 auto;
  margin: 0rem 0rem 1.25rem 0rem;
}
.kk-thankyou h1 {
  color: #16497c;
  font-size: 1.5rem;
  margin: 0rem 0rem 0.75rem 0rem;
}
.kk-thankyou--text {
  font-size: 0.9375rem;
  margin: 0rem 0rem 0.75rem 0rem;
}
.kk-thankyou--actions {
  margin: 1.5rem 0rem 0rem 0rem;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
/* ========================================
   Responsive
   ======================================== */
@media screen and (max-width: 1100px) {
  .kk-col-preview {
    display: none;
  }
  .kk-grid {
    gap: 16px;
  }
  .kk-col-config {
    flex: 1;
  }
  .kk-col-summary {
    width: 16.25rem;
  }
}
/* Mobile preview: compact image card without device frame */
@media screen and (max-width: 48em) {
  .kk-col-preview {
    display: block !important;
    width: 100%;
    order: -2;
  }
  .kk-preview-device {
    background: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    width: 100%;
    margin: 0;
  }
  .kk-device-camera {
    display: none;
  }
  .kk-device-screen {
    flex-direction: column;
    overflow: visible;
    aspect-ratio: auto;
    border: 2px solid #e0e5ec;
    border-radius: 10px;
    padding-bottom: 0;
  }
  .kk-device-screen img {
    width: 75%;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    padding: 0;
    border-radius: 0;
  }
  .kk-preview-label {
    position: static;
    display: block;
    background: #16497c;
    border-radius: 0 0 8px 8px;
    padding: 0.4375rem 0.75rem 0.4375rem 0.75rem;
    font-size: 0.8125rem;
    letter-spacing: 0.5px;
  }
}
@media screen and (max-width: 48em) {
  .kk-konfigurator {
    padding: 0rem 0.75rem 0.625rem 0.75rem;
  }
  .kk-hero {
    margin: 0rem -0.75rem 0.75rem -0.75rem;
    padding: 0.875rem 1rem 0.875rem 1rem;
  }
  .kk-grid {
    flex-direction: column;
    gap: 12px;
  }
  .kk-col-summary {
    width: 100%;
    order: 1;
  }
  .kk-field-row {
    flex-direction: column;
    gap: 10px;
  }
  .kk-fefco-trigger {
    padding: 0.75rem 0.875rem 0.75rem 0.875rem;
  }
  .kk-fefco-trigger--text {
    font-size: 0.875rem;
  }
  .kk-fefco-dropdown {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    width: 100%;
    max-height: 70vh;
    border: 2px solid #16497c;
    border-bottom: none;
    border-radius: 16px 16px 0 0;
    border-top: 2px solid #16497c;
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.25);
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    z-index: 9999;
  }
  .kk-fefco-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9998;
  }
  .kk-fefco-backdrop.is--visible {
    display: block;
  }
  .kk-btn-cta {
    padding: 1rem 1rem 1rem 1rem;
    font-size: 1rem;
  }
  .kk-btn-secondary {
    padding: 0.75rem 0.875rem 0.75rem 0.875rem;
    font-size: 0.875rem;
  }
  .kk-chip-label {
    width: 100%;
    min-width: 0;
    margin: 0rem 0rem 0.125rem 0rem;
  }
  .kk-chips .kk-chip {
    padding: 0.5rem 0.875rem 0.5rem 0.875rem;
    font-size: 0.875rem;
    flex: 0 0 calc((100% - 12px) / 3);
    justify-content: center;
    text-align: center;
  }
  .kk-dim-input {
    padding: 0.75rem 0.625rem 0.75rem 0.625rem;
    font-size: 1rem;
    text-align: center;
  }
  .kk-qty-input {
    padding: 0.75rem 0.625rem 0.75rem 0.625rem;
    font-size: 1rem;
    width: 10rem;
  }
  /* Modal responsive tablet */
  .kk-modal {
    max-width: 90vw;
  }
  .kk-modal--header {
    padding: 1.25rem 1.375rem 0.875rem 1.375rem;
  }
  .kk-modal--body {
    padding: 1rem 1.375rem 1rem 1.375rem;
  }
  .kk-modal--footer {
    padding: 0rem 1.375rem 1.25rem 1.375rem;
  }
}
/* ========================================
   Instant Price Box
   ======================================== */
.kk-price-box {
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  border: 2px solid #4caf50;
  border-radius: 10px;
  padding: 1rem 1.125rem 1rem 1.125rem;
  text-align: center;
  margin: 0rem 0rem 0.625rem 0rem;
}
.kk-price-box--head {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #2e7d32;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0rem 0rem 0.25rem 0rem;
}
.kk-price-box--total {
  font-size: 1.75rem;
  font-weight: 900;
  color: #1b5e20;
  margin: 0rem 0rem 0.125rem 0rem;
}
.kk-price-box--piece {
  font-size: 0.8125rem;
  color: #388e3c;
  font-weight: 600;
  margin: 0rem 0rem 0.375rem 0rem;
}
.kk-price-box--shipping {
  font-size: 0.75rem;
  color: #2e7d32;
  font-weight: 600;
  margin: 0rem 0rem 0.125rem 0rem;
}
.kk-price-box--hint {
  font-size: 0.625rem;
  color: #66bb6a;
  font-style: italic;
  margin: 0rem 0rem 0.625rem 0rem;
}
/* ========================================
   Add to Cart Button
   ======================================== */
.kk-btn-cart {
  display: block;
  width: 100%;
  padding: 0.875rem 1rem 0.875rem 1rem;
  background: #4caf50;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}
.kk-btn-cart i {
  margin: 0rem 0.375rem 0rem 0rem;
}
.kk-btn-cart:hover {
  background: #43a047;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(76, 175, 80, 0.35);
  color: #fff;
  text-decoration: none;
}
.kk-btn-cart:active {
  transform: translateY(0);
}
.kk-btn-cart:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
/* ========================================
   Quality Alternatives Modal
   ======================================== */
.kk-modal--sm {
  max-width: 480px;
}
.kk-quality-alternatives {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kk-quality-alt-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem 0.75rem 1rem;
  background: #f8f9fb;
  border: 2px solid #e0e5ec;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  font-size: 0.875rem;
}
.kk-quality-alt-btn strong {
  color: #16497c;
  font-weight: 700;
}
.kk-quality-alt-btn span {
  color: #2e7d32;
  font-weight: 600;
  font-size: 0.8125rem;
}
.kk-quality-alt-btn:hover {
  border-color: #16497c;
  background: rgba(22, 73, 124, 0.05);
  transform: translateY(-1px);
}
.kk-link-subtle {
  display: block;
  text-align: center;
  font-size: 0.8125rem;
  color: #999;
  text-decoration: underline;
  margin: 0.625rem 0rem 0rem 0rem;
}
.kk-link-subtle:hover {
  color: #16497c;
}
/* ========================================
   Post-Cart Modal
   ======================================== */
.kk-postcart-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 1rem 0rem 0rem 0rem;
}
.kk-postcart-actions .kk-btn-cta,
.kk-postcart-actions .kk-btn-cart {
  font-size: 0.9375rem;
}
@media screen and (max-width: 30em) {
  .kk-hero--text h1 {
    font-size: 1.25rem;
  }
  .kk-hero--text p {
    font-size: 0.75rem;
  }
  .kk-field-label {
    font-size: 0.6875rem;
  }
  .kk-fefco-option {
    padding: 0.625rem 0.625rem 0.625rem 0.625rem;
  }
  .kk-fefco-option--img {
    width: 40px;
    height: 40px;
  }
  .kk-fefco-option--text strong {
    font-size: 0.8125rem;
  }
  .kk-fefco-option--text small {
    font-size: 0.6875rem;
  }
  .kk-s-row {
    font-size: 0.75rem;
  }
  .kk-modal--summary {
    grid-template-columns: 1fr;
  }
  /* Modal responsive phone */
  .kk-modal-overlay {
    padding: 10px;
    align-items: flex-end;
  }
  .kk-modal {
    max-width: 100%;
    max-height: 85vh;
    border-radius: 16px 16px 0 0;
  }
  .kk-modal--header {
    padding: 1rem 1rem 0.75rem 1rem;
    border-radius: 16px 16px 0 0;
  }
  .kk-modal--header h2 {
    font-size: 1.0625rem;
  }
  .kk-modal--body {
    padding: 0.875rem 1rem 0.875rem 1rem;
  }
  .kk-modal--footer {
    padding: 0rem 1rem 1rem 1rem;
  }
  .kk-modal--form {
    display: block;
  }
  .kk-form-row {
    display: block;
  }
  .kk-form-field,
  .kk-form-field[style] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    margin: 0rem 0rem 0.125rem 0rem;
  }
  .kk-form-label {
    margin: 0.5rem 0rem 0.1875rem 0rem;
  }
  .kk-form-input {
    padding: 0.75rem 0.875rem 0.75rem 0.875rem;
    font-size: 1rem;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .kk-modal--submit {
    padding: 1rem 1.25rem 1rem 1.25rem;
    font-size: 1rem;
  }
}