.kcem-configurator,
.kcem-configurator * {
box-sizing: border-box;
}
.kcem-configurator {
--kcem-green: #2f8f5b;
--kcem-green-dark: #226f45;
--kcem-ink: #183025;
--kcem-muted: #68766f;
--kcem-line: #dfe8e3;
--kcem-soft: #f4f8f6;
width: min(100%, 1180px);
min-width: 0;
max-width: 1180px;
margin: 24px auto;
overflow-x: hidden;
overflow-x: clip;
container-type: inline-size;
color: var(--kcem-ink);
font-family: inherit;
}
body.kcem-configurator-page {
max-width: 100vw;
overflow-x: hidden;
overflow-x: clip;
}
.kcem-configurator__layout {
display: grid;
width: 100%;
min-width: 0;
grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
overflow: visible;
background: #fff;
border: 1px solid var(--kcem-line);
border-radius: 24px;
box-shadow: 0 18px 55px rgba(24, 48, 37, .09);
}
.kcem-preview-panel,
.kcem-options {
width: 100%;
min-width: 0;
max-width: 100%;
padding: clamp(24px, 4vw, 46px);
}
.kcem-configurator fieldset,
.kcem-configurator form,
.kcem-configurator input,
.kcem-configurator select,
.kcem-configurator button,
.kcem-configurator img,
.kcem-configurator svg {
max-width: 100%;
}
.kcem-preview-panel {
position: relative;
background: linear-gradient(145deg, #f7faf8, #eef6f1);
border-right: 1px solid var(--kcem-line);
border-radius: 24px 0 0 24px;
}
.kcem-options {
border-radius: 0 24px 24px 0;
}
@container (max-width: 760px) {
.kcem-configurator__layout {
grid-template-columns: 1fr;
}
.kcem-preview-panel {
border-right: 0;
border-bottom: 1px solid var(--kcem-line);
border-radius: 24px 24px 0 0;
}
.kcem-options {
border-radius: 0 0 24px 24px;
}
}
.kcem-preview-panel__heading,
.kcem-realizations__heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
}
.kcem-configurator h2,
.kcem-configurator h3,
.kcem-configurator p {
margin-top: 0;
}
.kcem-configurator h2 {
margin-bottom: 0;
font-size: clamp(1.35rem, 2vw, 1.75rem);
line-height: 1.2;
}
.kcem-eyebrow {
margin-bottom: 6px;
color: var(--kcem-green);
font-size: .73rem;
font-weight: 800;
letter-spacing: .13em;
text-transform: uppercase;
}
.kcem-preview-panel__mode {
flex: 0 0 auto;
padding: 7px 11px;
color: var(--kcem-green-dark);
background: #fff;
border: 1px solid #cde2d5;
border-radius: 999px;
font-size: .78rem;
font-weight: 700;
}
.kcem-hat-preview {
display: grid;
min-height: 430px;
place-items: center;
}
.kcem-hat-svg {
display: block;
width: min(100%, 400px);
height: auto;
overflow: visible;
}
.kcem-svg-zone {
fill: #c7ab88;
cursor: pointer;
transition: fill .25s ease;
}
.kcem-svg-zone:hover,
.kcem-svg-zone:focus {
filter: brightness(1.06);
outline: none;
}
.kcem-svg-shade,
.kcem-svg-texture,
.kcem-svg-pompom-shade,
.kcem-svg-outline,
.kcem-svg-seam,
.kcem-svg-rib {
pointer-events: none;
}
.kcem-svg-pompom {
stroke: rgba(23, 48, 36, .72);
stroke-width: 3;
stroke-linejoin: round;
transition: fill .25s ease, transform .25s ease;
}
.kcem-svg-outline {
fill: none;
stroke: rgba(23, 48, 36, .72);
stroke-width: 3;
stroke-linejoin: round;
}
.kcem-svg-pompom-shade {
pointer-events: none;
transition: transform .25s ease;
}
.kcem-svg-pompom-texture {
pointer-events: none;
transition: transform .25s ease;
}
.kcem-svg-seam {
fill: none;
stroke: rgba(24, 48, 37, .45);
stroke-dasharray: 4 5;
stroke-width: 2;
transition: opacity .2s ease;
}
.kcem-svg-rib {
fill: none;
stroke: rgba(255, 255, 255, .28);
stroke-width: 3;
}
.kcem-preview-note {
margin-bottom: 0;
padding: 14px 16px;
color: var(--kcem-muted);
background: rgba(255, 255, 255, .7);
border-left: 3px solid var(--kcem-green);
border-radius: 8px;
font-size: .82rem;
line-height: 1.55;
}
.kcem-options {
display: flex;
flex-direction: column;
gap: 20px;
}
.kcem-fieldset {
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
.kcem-fieldset legend,
.kcem-color-field__title {
display: block;
width: 100%;
margin: 0 0 8px;
color: var(--kcem-ink);
font-size: .94rem;
font-weight: 750;
}
.kcem-configurator button.kcem-help {
appearance: none;
display: inline-grid;
position: relative;
z-index: 30;
width: 17px;
height: 17px;
margin: 0 0 0 4px;
padding: 0;
vertical-align: text-bottom;
place-items: center;
color: #fff;
background: var(--kcem-green);
border: 1px solid var(--kcem-green);
border-radius: 50%;
cursor: help;
font-family: inherit;
font-size: .65rem;
font-weight: 800;
line-height: 1;
}
.kcem-help::before {
position: absolute;
z-index: 61;
bottom: calc(100% + 4px);
left: 50%;
border-top: 6px solid var(--kcem-green);
border-right: 6px solid transparent;
border-left: 6px solid transparent;
content: "";
opacity: 0;
pointer-events: none;
transform: translateX(-50%);
}
.kcem-help::after {
position: absolute;
z-index: 60;
bottom: calc(100% + 10px);
left: 50%;
width: min(320px, calc(100vw - 40px));
padding: 12px 14px;
color: var(--kcem-ink);
background: #fff;
border: 1px solid #b9dac7;
border-radius: 10px;
box-shadow: 0 12px 30px rgba(24, 48, 37, .18);
content: attr(data-kcem-tooltip);
font-size: .76rem;
font-weight: 500;
line-height: 1.45;
opacity: 0;
pointer-events: none;
text-align: left;
white-space: normal;
overflow-wrap: anywhere;
transform: translate(-50%, 4px);
transition: opacity .15s ease, transform .15s ease;
}
.kcem-help:hover::before,
.kcem-help:hover::after,
.kcem-help:focus-visible::before,
.kcem-help:focus-visible::after,
.kcem-help.is-open::before,
.kcem-help.is-open::after {
opacity: 1;
}
.kcem-help:hover::after,
.kcem-help:focus-visible::after,
.kcem-help.is-open::after {
transform: translate(-50%, 0);
}
.kcem-help:focus-visible {
outline: 3px solid rgba(47, 143, 91, .24);
outline-offset: 2px;
}
.kcem-configurator button.kcem-help:hover,
.kcem-configurator button.kcem-help.is-open {
color: #fff;
background: var(--kcem-green-dark);
border-color: var(--kcem-green-dark);
}
.kcem-segmented-control {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5px;
padding: 5px;
background: var(--kcem-soft);
border: 1px solid var(--kcem-line);
border-radius: 13px;
}
.kcem-dynamic-segments {
grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
}
.kcem-segmented-control.is-single-option {
grid-template-columns: 1fr;
}
.kcem-segmented-control label {
cursor: pointer;
}
.kcem-segmented-control label.is-disabled {
cursor: not-allowed;
opacity: .42;
}
.kcem-segmented-control input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.kcem-segmented-control span {
display: block;
padding: 11px 9px;
border-radius: 9px;
color: var(--kcem-muted);
font-size: .86rem;
font-weight: 700;
text-align: center;
transition: .2s ease;
}
.kcem-segmented-control input:checked + span {
color: #fff;
background: var(--kcem-green);
box-shadow: 0 5px 13px rgba(47, 143, 91, .22);
}
.kcem-segmented-control input:focus-visible + span,
.kcem-color-card input:focus-visible + .kcem-color-card__visual,
.kcem-check input:focus-visible + .kcem-check__box {
outline: 3px solid rgba(47, 143, 91, .28);
outline-offset: 2px;
}
[data-color-fields] {
display: grid;
gap: 16px;
}
.kcem-color-choice__button {
display: flex;
width: 100%;
align-items: center;
gap: 11px;
padding: 7px;
color: var(--kcem-ink);
background: var(--kcem-soft);
border: 1px solid var(--kcem-line);
border-radius: 11px;
cursor: pointer;
font: inherit;
text-align: left;
transition: border-color .2s ease, box-shadow .2s ease;
}
.kcem-color-choice__button:hover,
.kcem-color-choice__button:focus-visible {
border-color: var(--kcem-green);
box-shadow: 0 0 0 2px rgba(47, 143, 91, .13);
outline: none;
}
.kcem-color-choice__swatch {
width: 38px;
height: 38px;
flex: 0 0 auto;
background-color: var(--swatch);
background-position: center;
background-size: cover;
border: 1px solid rgba(0, 0, 0, .1);
border-radius: 7px;
}
.kcem-color-choice__details {
display: grid;
min-width: 0;
gap: 2px;
}
.kcem-color-choice__details strong,
.kcem-color-choice__details small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.kcem-color-choice__details strong {
font-size: .8rem;
}
.kcem-color-choice__details small {
color: var(--kcem-muted);
font-size: .66rem;
}
.kcem-color-choice__action {
margin-left: auto;
padding-right: 5px;
color: var(--kcem-green-dark);
font-size: .72rem;
font-weight: 750;
}
.kcem-model-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 7px;
}
.kcem-model-card {
position: relative;
cursor: pointer;
}
.kcem-model-card input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.kcem-model-card > span {
display: grid;
min-height: 58px;
align-content: center;
gap: 3px;
padding: 10px 12px;
background: var(--kcem-soft);
border: 1px solid var(--kcem-line);
border-radius: 10px;
transition: border-color .2s ease, box-shadow .2s ease;
}
.kcem-model-card img {
width: 42px;
height: 42px;
margin-bottom: 4px;
object-fit: cover;
border-radius: 7px;
}
.kcem-model-card strong {
font-size: .76rem;
}
.kcem-model-card em {
display: -webkit-box;
overflow: hidden;
color: var(--kcem-muted);
font-size: .62rem;
font-style: normal;
line-height: 1.35;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.kcem-model-card small {
color: var(--kcem-muted);
font-size: .66rem;
}
.kcem-model-card input:checked + span {
border-color: var(--kcem-green);
box-shadow: 0 0 0 2px rgba(47, 143, 91, .15);
}
.kcem-model-card input:focus-visible + span {
outline: 3px solid rgba(47, 143, 91, .25);
outline-offset: 2px;
}
.kcem-color-grid {
display: grid;
grid-template-columns: repeat(10, minmax(0, 1fr));
gap: 5px;
}
.kcem-color-card {
position: relative;
min-width: 0;
margin: 0;
cursor: pointer;
}
.kcem-color-card input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.kcem-color-card__visual {
display: block;
padding: 2px;
background: #fff;
border: 1px solid var(--kcem-line);
border-radius: 7px;
transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.kcem-color-card:hover .kcem-color-card__visual {
transform: translateY(-2px);
}
.kcem-color-card input:checked + .kcem-color-card__visual {
border-color: var(--kcem-green);
box-shadow: 0 0 0 2px rgba(47, 143, 91, .25);
}
.kcem-color-card__swatch {
display: block;
position: relative;
aspect-ratio: 1;
overflow: hidden;
background-color: var(--swatch);
background-position: center;
background-size: cover;
border: 1px solid rgba(0, 0, 0, .08);
border-radius: 5px;
}
.kcem-color-card__swatch::after {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, .22), transparent 52%, rgba(0, 0, 0, .08));
content: "";
}
.kcem-color-card__name,
.kcem-color-card__code {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
.kcem-color-card__short-code {
display: none;
}
.kcem-color-card::after {
position: absolute;
z-index: 20;
bottom: calc(100% + 9px);
left: 50%;
width: max-content;
max-width: 190px;
padding: 7px 9px;
color: var(--kcem-ink);
background: #fff;
border: 1px solid #b9dac7;
border-radius: 7px;
box-shadow: 0 7px 20px rgba(24, 48, 37, .2);
content: attr(data-tooltip);
font-size: .68rem;
font-weight: 650;
line-height: 1.3;
opacity: 0;
pointer-events: none;
text-align: center;
transform: translate(-50%, 5px);
transition: opacity .15s ease, transform .15s ease;
}
.kcem-color-card::before {
position: absolute;
z-index: 21;
bottom: calc(100% + 4px);
left: 50%;
border-top: 6px solid var(--kcem-green);
border-right: 6px solid transparent;
border-left: 6px solid transparent;
content: "";
opacity: 0;
pointer-events: none;
transform: translateX(-50%);
transition: opacity .15s ease;
}
.kcem-color-card:hover::after,
.kcem-color-card:hover::before,
.kcem-color-card:focus-within::after,
.kcem-color-card:focus-within::before {
opacity: 1;
}
.kcem-color-card:hover::after,
.kcem-color-card:focus-within::after {
transform: translate(-50%, 0);
}
.kcem-color-card.is-unavailable {
cursor: not-allowed;
opacity: .42;
}
.kcem-color-popover[hidden] {
display: none;
}
.kcem-color-popover {
position: absolute;
z-index: 50;
inset: 0;
display: grid;
padding: clamp(18px, 4vw, 38px);
place-items: center;
}
.kcem-configurator .kcem-color-popover__backdrop {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
padding: 0;
background: rgba(24, 48, 37, .22) !important;
border: 0;
cursor: pointer;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
}
.kcem-color-popover__dialog {
position: relative;
z-index: 1;
width: min(100%, 430px);
max-height: min(580px, calc(100% - 20px));
overflow-x: hidden;
overflow-y: auto;
padding: 20px;
background: #fff;
border: 1px solid var(--kcem-line);
border-radius: 17px;
box-shadow: 0 20px 60px rgba(19, 46, 33, .24);
scrollbar-width: none;
-ms-overflow-style: none;
}
.kcem-color-popover__dialog::-webkit-scrollbar {
display: none;
}
.kcem-color-popover__heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 15px;
margin-bottom: 16px;
}
.kcem-color-popover__heading h3 {
margin-bottom: 0;
font-size: 1.05rem;
}
.kcem-configurator button.kcem-color-popover__close {
appearance: none;
display: grid;
width: 34px;
height: 34px;
flex: 0 0 auto;
padding: 0;
place-items: center;
color: #fff !important;
background: var(--kcem-green) !important;
border: 1px solid var(--kcem-green) !important;
border-radius: 50%;
cursor: pointer;
font: 500 1.35rem/1 inherit;
}
.kcem-configurator button.kcem-color-popover__close:hover,
.kcem-configurator button.kcem-color-popover__close:focus-visible {
color: #fff !important;
background: var(--kcem-green-dark) !important;
border-color: var(--kcem-green-dark) !important;
}
.kcem-color-popover__dialog .kcem-color-grid {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 9px;
}
.kcem-color-popover .kcem-color-card {
width: 35px;
height: 35px;
flex: 0 0 35px;
}
.kcem-color-popover .kcem-color-card__visual {
width: 35px;
height: 35px;
padding: 2px;
background: #fff;
border: 1px solid transparent;
border-radius: 50%;
}
.kcem-color-popover .kcem-color-card__swatch {
width: 29px;
height: 29px;
aspect-ratio: auto;
border: 0;
border-radius: 50%;
}
.kcem-color-popover .kcem-color-card__short-code {
display: grid;
position: absolute;
z-index: 2;
inset: 0;
place-items: center;
color: #fff;
font-size: .61rem;
font-weight: 800;
line-height: 1;
pointer-events: none;
text-shadow: 0 1px 3px rgba(0, 0, 0, .85), 0 0 2px rgba(0, 0, 0, .65);
}
.kcem-color-popover .kcem-color-card input:checked + .kcem-color-card__visual {
border-color: var(--kcem-green);
box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--kcem-green);
}
.kcem-color-popover .kcem-color-card:hover .kcem-color-card__visual {
transform: scale(1.07);
}
.kcem-pompom-options {
padding-top: 18px;
border-top: 1px solid var(--kcem-line);
}
.kcem-included-option {
display: flex;
align-items: center;
gap: 9px;
padding: 10px 12px;
border: 1px solid #cfe4d8;
border-radius: 10px;
color: #315443;
background: #f2faf6;
font-size: 13px;
line-height: 1.4;
}
.kcem-included-option__icon {
display: inline-grid;
flex: 0 0 20px;
width: 20px;
height: 20px;
place-items: center;
border-radius: 50%;
color: #fff;
background: var(--kcem-green);
font-size: 12px;
font-weight: 800;
}
.kcem-dependent-options:not([hidden]) {
display: grid;
gap: 15px;
margin-top: 16px;
padding-left: 31px;
}
.kcem-mini-field > span {
display: block;
margin-bottom: 7px;
color: var(--kcem-muted);
font-size: .75rem;
font-weight: 700;
}
.kcem-measurements {
display: grid;
gap: 8px;
}
.kcem-measurements label {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
color: var(--kcem-muted);
font-size: .8rem;
}
.kcem-measurements label > span {
display: flex;
align-items: center;
gap: 5px;
}
.kcem-measurements__label {
display: inline-flex !important;
align-items: center;
justify-content: flex-start;
gap: 2px !important;
}
.kcem-measurements input {
width: 92px;
padding: 8px 9px;
color: var(--kcem-ink);
background: #fff;
border: 1px solid var(--kcem-line);
border-radius: 8px;
font: inherit;
}
.kcem-measurements input:focus {
border-color: var(--kcem-green);
box-shadow: 0 0 0 2px rgba(47, 143, 91, .13);
outline: none;
}
.kcem-field-help {
margin: 9px 0 0;
color: var(--kcem-muted);
font-size: .7rem;
line-height: 1.45;
}
.kcem-custom-size-note {
display: flex;
align-items: flex-start;
gap: 10px;
margin-top: 14px;
padding: 12px 14px;
color: #315443;
background: #f2faf6;
border: 1px solid #cfe4d8;
border-radius: 11px;
}
.kcem-custom-size-note__icon {
display: inline-grid;
width: 20px;
height: 20px;
flex: 0 0 20px;
place-items: center;
color: #fff;
background: var(--kcem-green);
border-radius: 50%;
font-size: .7rem;
font-weight: 800;
}
.kcem-custom-size-note strong {
display: block;
margin-bottom: 3px;
font-size: .8rem;
}
.kcem-custom-size-note p {
margin: 0;
color: var(--kcem-muted);
font-size: .72rem;
line-height: 1.45;
}
.kcem-order-summary {
display: grid;
gap: 12px;
padding-top: 20px;
border-top: 1px solid var(--kcem-line);
}
.kcem-order-summary__price {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
}
.kcem-order-summary__price > span {
color: var(--kcem-muted);
font-size: .8rem;
font-weight: 650;
}
.kcem-order-summary__price strong {
color: var(--kcem-ink);
font-size: 1.05rem;
text-align: right;
}
.kcem-price-unavailable {
color: #a33b32;
font-size: .82rem;
}
.kcem-order-summary__price del {
margin-right: 5px;
color: var(--kcem-muted);
font-size: .82em;
font-weight: 500;
}
.kcem-order-summary__price ins {
color: var(--kcem-green-dark);
text-decoration: none;
}
.kcem-made-to-order {
display: flex;
gap: 11px;
padding: 13px;
color: var(--kcem-green-dark);
background: #eef8f2;
border: 1px solid #cce5d6;
border-radius: 11px;
}
.kcem-made-to-order__icon {
display: grid;
width: 25px;
height: 25px;
flex: 0 0 auto;
place-items: center;
color: #fff;
background: var(--kcem-green);
border-radius: 50%;
font-size: .7rem;
}
.kcem-made-to-order strong {
display: block;
margin-bottom: 3px;
font-size: .78rem;
}
.kcem-made-to-order p {
margin: 0;
color: #52705f;
font-size: .7rem;
line-height: 1.5;
}
.kcem-cart-actions {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: end;
gap: 10px;
}
.kcem-quantity {
display: grid;
gap: 6px;
color: var(--kcem-muted);
font-size: .74rem;
font-weight: 700;
}
.kcem-quantity input {
width: 72px;
height: 44px;
padding: 8px;
color: var(--kcem-ink);
background: #fff;
border: 1px solid var(--kcem-line);
border-radius: 9px;
font: inherit;
text-align: center;
}
.kcem-add-to-cart {
min-height: 44px;
padding: 10px 18px;
color: #fff;
background: var(--kcem-green);
border: 0;
border-radius: 9px;
box-shadow: 0 6px 16px rgba(47, 143, 91, .22);
cursor: pointer;
font: inherit;
font-size: .86rem;
font-weight: 800;
transition: background .2s ease, transform .2s ease;
}
.kcem-add-to-cart:hover {
background: var(--kcem-green-dark);
transform: translateY(-1px);
}
.kcem-add-to-cart:focus-visible,
.kcem-quantity input:focus-visible {
outline: 3px solid rgba(47, 143, 91, .25);
outline-offset: 2px;
}
.kcem-check {
display: inline-flex;
align-items: center;
gap: 10px;
cursor: pointer;
font-size: .88rem;
}
.kcem-check.is-disabled {
cursor: not-allowed;
opacity: .5;
}
.kcem-check input {
position: absolute;
opacity: 0;
}
.kcem-check__box {
display: grid;
width: 21px;
height: 21px;
flex: 0 0 auto;
place-items: center;
background: #fff;
border: 1.5px solid #a9b9b0;
border-radius: 6px;
}
.kcem-check input:checked + .kcem-check__box {
background: var(--kcem-green);
border-color: var(--kcem-green);
}
.kcem-check input:checked + .kcem-check__box::after {
width: 9px;
height: 5px;
border-bottom: 2px solid #fff;
border-left: 2px solid #fff;
content: "";
transform: translateY(-1px) rotate(-45deg);
}
[data-pompom-color-field]:not([hidden]) {
display: block;
margin-top: 14px;
}
.kcem-realizations {
margin-top: 28px;
padding: clamp(24px, 4vw, 38px);
background: #fff;
border: 1px solid var(--kcem-line);
border-radius: 22px;
}
.kcem-realizations__heading > p {
max-width: 350px;
margin-bottom: 0;
color: var(--kcem-muted);
font-size: .86rem;
}
.kcem-realizations__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: 25px;
}
.kcem-preview-realizations {
width: 100%;
margin-top: 24px;
padding: 18px;
border-radius: 16px;
}
.kcem-preview-realizations .kcem-realizations__heading {
display: block;
}
.kcem-preview-realizations .kcem-realizations__heading h2 {
margin-top: 3px;
font-size: clamp(1.05rem, 2vw, 1.3rem);
}
.kcem-preview-realizations .kcem-realizations__heading > p {
max-width: none;
margin-top: 8px;
}
.kcem-preview-realizations .kcem-realizations__grid {
grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
gap: 10px;
margin-top: 14px;
}
.kcem-preview-realizations .kcem-realizations__empty {
padding: 18px 12px;
}
.kcem-realization-card {
overflow: hidden;
background: var(--kcem-soft);
border: 1px solid var(--kcem-line);
border-radius: 15px;
}
.kcem-realization-card > a {
display: block;
}
.kcem-realization-card__placeholder {
display: grid;
min-height: 150px;
place-items: center;
background: linear-gradient(135deg, #e8f1eb, #f6f8f7);
}
.kcem-realization-card__image {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
object-fit: contain;
object-position: center;
background: var(--kcem-soft);
}
.kcem-realizations__empty {
grid-column: 1 / -1;
margin: 0;
padding: 24px;
color: var(--kcem-muted);
background: var(--kcem-soft);
border-radius: 12px;
text-align: center;
}
.kcem-product-cta {
margin: 14px 0;
}
.kcem-product-cta__button {
display: inline-flex !important;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 11px 20px !important;
color: #fff !important;
background: #2f8f5b !important;
border-radius: 10px !important;
font-weight: 800 !important;
}
.kcem-product-cta__button:hover {
background: #226f45 !important;
}
.kcem-product-palette {
width: 100%;
margin-top: 10px;
color: #183025;
font-family: inherit;
}
.kcem-product-palette > summary {
display: inline-flex;
min-height: 42px;
align-items: center;
padding: 9px 16px;
color: #2f8f5b;
background: #fff;
border: 1px solid #2f8f5b;
border-radius: 10px;
cursor: pointer;
font-size: .86rem;
font-weight: 750;
list-style: none;
}
.kcem-product-palette > summary::-webkit-details-marker {
display: none;
}
.kcem-product-palette > summary::after {
margin-left: 9px;
content: "+";
font-size: 1rem;
font-weight: 800;
}
.kcem-product-palette[open] > summary::after {
content: "−";
}
.kcem-product-palette__content {
margin-top: 12px;
padding: 18px;
background: #fff;
border: 1px solid #dfe8e3;
border-radius: 14px;
box-shadow: 0 12px 30px rgba(24, 48, 37, .08);
}
.kcem-product-palette__group + .kcem-product-palette__group {
margin-top: 20px;
padding-top: 18px;
border-top: 1px solid #dfe8e3;
}
.kcem-configurator button.kcem-full-palette-trigger {
width: 100%;
margin-top: 9px;
min-height: 38px;
padding: 7px 12px;
color: #2f8f5b !important;
background: #fff !important;
border: 1px solid #2f8f5b !important;
border-radius: 9px;
cursor: pointer;
font-size: .75rem;
font-weight: 750;
}
.kcem-configurator button.kcem-full-palette-trigger:hover,
.kcem-configurator button.kcem-full-palette-trigger:focus-visible {
color: #fff !important;
background: #2f8f5b !important;
}
.kcem-full-palette-modal[hidden] {
display: none;
}
.kcem-full-palette-modal {
position: fixed;
z-index: 999999;
inset: 0;
display: grid;
padding: 20px;
place-items: center;
}
.kcem-full-palette-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(16, 34, 25, .56);
cursor: pointer;
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
}
.kcem-full-palette-modal__dialog {
display: flex;
position: relative;
z-index: 1;
width: min(760px, 100%);
max-height: min(84vh, 780px);
flex-direction: column;
padding: clamp(18px, 3vw, 28px);
color: #183025;
background: #fff;
border: 1px solid #dfe8e3;
border-radius: 20px;
box-shadow: 0 28px 80px rgba(9, 28, 18, .3);
}
.kcem-full-palette-modal__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 18px;
margin-bottom: 16px;
}
.kcem-full-palette-modal__header h2 {
margin: 0;
font-size: 1.35rem;
}
.kcem-configurator button.kcem-full-palette-modal__close {
display: grid;
width: 36px;
height: 36px;
flex: 0 0 36px;
padding: 0;
place-items: center;
color: #fff !important;
background: #2f8f5b !important;
border: 0 !important;
border-radius: 50%;
cursor: pointer;
font: 500 1.35rem/1 inherit;
}
.kcem-full-palette-modal__tabs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 6px;
margin-bottom: 16px;
padding: 5px;
background: #f4f8f6;
border: 1px solid #dfe8e3;
border-radius: 12px;
}
.kcem-configurator .kcem-full-palette-modal__tabs button {
min-height: 40px;
padding: 8px 12px;
color: #53665c !important;
background: transparent !important;
border: 0 !important;
border-radius: 9px;
cursor: pointer;
font-size: .78rem;
font-weight: 750;
}
.kcem-configurator .kcem-full-palette-modal__tabs button.is-active {
color: #fff !important;
background: #2f8f5b !important;
box-shadow: 0 5px 14px rgba(47, 143, 91, .22);
}
.kcem-full-palette-modal__colors {
min-height: 150px;
overflow-y: auto;
padding: 2px 4px 4px 2px;
scrollbar-color: #b8d5c4 transparent;
scrollbar-width: thin;
}
.kcem-full-palette-modal__colors .kcem-product-palette__grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
body.kcem-palette-modal-open {
overflow: hidden;
}
.kcem-product-palette__group h3 {
margin: 0 0 11px;
color: #183025;
font-size: .92rem;
}
.kcem-product-palette__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
gap: 10px;
}
.kcem-product-color-card {
display: block;
width: 100%;
min-width: 0;
padding: 7px;
color: #183025 !important;
background: #f7faf8;
border: 1px solid #dfe8e3;
border-radius: 10px;
cursor: zoom-in;
font: inherit;
text-align: center;
}
.kcem-product-color-card:hover,
.kcem-product-color-card:focus-visible {
border-color: #2f8f5b;
box-shadow: 0 0 0 2px rgba(47, 143, 91, .14);
transform: translateY(-1px);
}
.kcem-product-color-card img,
.kcem-product-color-card__fallback {
display: block;
width: 100%;
aspect-ratio: 1;
margin-bottom: 7px;
background: var(--kcem-product-color, #ccc);
border: 1px solid rgba(24, 48, 37, .1);
border-radius: 7px;
object-fit: cover;
}
.kcem-product-color-card strong,
.kcem-product-color-card small {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.kcem-product-color-card strong {
font-size: .7rem;
}
.kcem-product-color-card small {
margin-top: 2px;
color: #68766f;
font-size: .6rem;
}
.kcem-product-palette__notice {
margin: 16px 0 0;
color: #68766f;
font-size: .7rem;
line-height: 1.45;
}
.kcem-color-detail[hidden] {
display: none;
}
.kcem-color-detail {
position: absolute;
z-index: 4;
inset: 0;
display: grid;
padding: clamp(18px, 4vw, 44px);
place-items: center;
}
.kcem-color-detail__backdrop {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
padding: 0;
background: rgba(16, 34, 25, .68) !important;
border: 0 !important;
border-radius: 20px;
cursor: zoom-out;
}
.kcem-color-detail__card {
position: relative;
z-index: 1;
width: min(500px, 100%);
overflow: hidden;
background: #fff;
border-radius: 18px;
box-shadow: 0 22px 60px rgba(0, 0, 0, .3);
}
.kcem-configurator button.kcem-color-detail__close {
position: absolute;
z-index: 2;
top: 12px;
right: 12px;
display: grid;
width: 38px;
height: 38px;
padding: 0;
place-items: center;
color: #fff !important;
background: #2f8f5b !important;
border: 2px solid #fff !important;
border-radius: 50%;
cursor: pointer;
font-size: 1.35rem;
}
.kcem-color-detail__visual img,
.kcem-color-detail__fallback {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
background: var(--kcem-product-color, #ccc);
object-fit: cover;
}
.kcem-color-detail__info {
padding: 18px 22px 21px;
}
.kcem-color-detail__info h3 {
margin: 3px 0 10px;
font-size: 1.35rem;
}
.kcem-color-detail__info p:not(.kcem-eyebrow) {
margin: 4px 0 0;
color: #68766f;
font-size: .84rem;
}
.kcem-product-realizations {
--kcem-ink: #183025;
--kcem-muted: #68766f;
--kcem-line: #dfe8e3;
--kcem-soft: #f4f8f6;
clear: both;
margin: 30px auto;
padding: clamp(22px, 4vw, 36px);
color: var(--kcem-ink);
background: #fff;
border: 1px solid var(--kcem-line);
border-radius: 18px;
}
.kcem-product-realizations > p {
color: var(--kcem-muted);
}
.kcem-realization-card__placeholder svg {
width: 100px;
fill: #bfd2c6;
}
.kcem-realization-card__caption {
padding: 15px;
}
.kcem-realization-card h3 {
margin-bottom: 3px;
font-size: .9rem;
}
.kcem-realization-card p {
margin-bottom: 0;
color: var(--kcem-muted);
font-size: .75rem;
}
@media (max-width: 860px) {
.kcem-configurator__layout {
grid-template-columns: 1fr;
}
.kcem-preview-panel {
border-right: 0;
border-bottom: 1px solid var(--kcem-line);
border-radius: 24px 24px 0 0;
}
.kcem-options {
border-radius: 0 0 24px 24px;
}
.kcem-hat-preview {
min-height: 360px;
}
}
@media (max-width: 560px) {
.kcem-configurator {
margin: 12px auto;
}
.kcem-configurator__layout,
.kcem-realizations {
border-radius: 16px;
}
.kcem-preview-panel,
.kcem-options {
padding: 22px 18px;
}
.kcem-preview-panel {
border-radius: 16px 16px 0 0;
}
.kcem-options {
border-radius: 0 0 16px 16px;
}
.kcem-help::after {
left: -8px;
width: min(300px, calc(100vw - 36px));
transform: translate(0, 4px);
}
.kcem-help:hover::after,
.kcem-help:focus-visible::after,
.kcem-help.is-open::after {
transform: translate(0, 0);
}
.kcem-help::before {
left: 7px;
}
.kcem-hat-preview {
min-height: 310px;
}
.kcem-hat-svg {
width: min(100%, 310px);
}
.kcem-color-grid {
grid-template-columns: repeat(8, minmax(0, 1fr));
gap: 5px;
}
.kcem-color-popover {
position: fixed;
padding: 14px;
}
.kcem-color-popover__dialog {
max-height: min(78vh, 560px);
padding: 16px;
}
.kcem-full-palette-modal {
padding: 10px;
}
.kcem-full-palette-modal__dialog {
max-height: 90vh;
padding: 16px;
border-radius: 16px;
}
.kcem-full-palette-modal__colors .kcem-product-palette__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.kcem-realizations__heading {
display: block;
}
.kcem-realizations__heading > p {
margin-top: 12px;
}
.kcem-realizations__grid {
grid-template-columns: 1fr;
}
}
@media (prefers-reduced-motion: reduce) {
.kcem-configurator *,
.kcem-configurator *::before,
.kcem-configurator *::after {
scroll-behavior: auto !important;
transition-duration: .01ms !important;
}
}