@charset "UTF-8";
.kreator-woo {
--kreator-font-family: inherit;
--kreator-topbar-start: #0c7a7c;
--kreator-topbar-end: #14b8a6;
--kreator-topbar-text: #f8fafc;
--kreator-menu-bg: #0a1421;
--kreator-menu-button-bg: #182b3f;
--kreator-menu-button-text: #d7e5f7;
--kreator-menu-button-active-bg: #0f3448;
--kreator-menu-button-active-text: #ffffff;
width: 100%;
max-width: 1500px;
margin: 28px 0;
border: 1px solid #ced7e4;
background: #eef2f8;
font-family: var(--kreator-font-family, inherit);
box-sizing: border-box;
overflow-x: clip;
}
.kreator-woo.kreator-woo--breakout {
width: 100%;
max-width: 1500px;
margin-left: auto;
margin-right: auto;
}
.kreator-woo,
.kreator-woo * {
box-sizing: border-box;
}
.kreator-woo__mobile-backdrop {
display: none;
}
.kreator-woo__topbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
padding: 12px 16px;
background: linear-gradient(90deg, var(--kreator-topbar-start, #0c7a7c) 0%, var(--kreator-topbar-end, #14b8a6) 100%);
border-bottom: 1px solid rgba(0, 0, 0, 0.16);
}
.kreator-woo__brand {
color: var(--kreator-topbar-text, #f8fafc);
font-size: 18px;
font-weight: 700;
}
.kreator-woo__top-main {
display: flex;
align-items: center;
gap: 10px;
}
.kreator-woo__inline-field {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--kreator-topbar-text, #f8fafc);
font-size: 13px;
}
.kreator-woo__inline-field select {
min-width: 150px;
}
.kreator-woo__inline-field input[type="color"] {
width: 36px;
height: 30px;
padding: 0;
border: 1px solid #dbe5f2;
}
.kreator-woo__top-main .button {
min-height: 34px;
border-radius: 4px;
border-color: rgba(255, 255, 255, 0.9);
background: rgba(255, 255, 255, 0.94);
color: #0f172a;
}
.kreator-woo__layout {
display: grid;
grid-template-columns: 420px minmax(0, 1fr);
gap: 14px;
padding: 14px;
align-items: stretch;
}
.kreator-woo__controls-pane {
display: grid;
grid-template-columns: 64px minmax(0, 1fr);
min-height: 0;
height: clamp(520px, 76vh, 860px);
max-height: 860px;
border: 1px solid #0f2338;
background: var(--kreator-menu-bg, #0a1421);
overflow: hidden;
}
.kreator-woo__tab-rail {
display: flex;
flex-direction: column;
gap: 8px;
padding: 10px 8px;
border-right: 1px solid #24374d;
background: var(--kreator-menu-bg, #0a1421);
}
.kreator-woo__tab {
width: 100%;
min-height: 52px;
height: auto;
padding: 6px 4px;
border: 1px solid #33475f;
border-radius: 10px;
background: var(--kreator-menu-button-bg, #182b3f);
color: var(--kreator-menu-button-text, #d7e5f7);
font-size: 10px;
font-weight: 700;
line-height: 1.2;
cursor: pointer;
}
.kreator-woo__tab.is-active {
border-color: #36cfc9;
background: var(--kreator-menu-button-active-bg, #0f3448);
color: var(--kreator-menu-button-active-text, #ffffff);
}
.kreator-woo__tab-panels {
padding: 14px;
min-height: 0;
overflow: auto;
}
.kreator-woo__tab-panel {
display: none;
}
.kreator-woo__tab-panel.is-active {
display: block;
}
.kreator-woo__tab-panel[data-kreator-panel="elements"].is-active {
display: flex;
flex-direction: column;
min-height: 0;
height: 100%;
}
.kreator-woo__title {
margin: 0 0 10px;
font-size: 20px;
font-weight: 700;
color: #eaf2fb;
}
.kreator-woo__preview-pane .kreator-woo__title {
color: #0f172a;
font-size: 22px;
}
.kreator-woo__sub {
margin: 0 0 10px;
color: #9fb6d1;
font-size: 13px;
}
.kreator-woo__preset-grid,
.kreator-woo__clipart-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin-bottom: 12px;
}
.kreator-woo__clipart-grid {
min-height: 0;
flex: 1 1 auto;
overflow: auto;
align-content: start;
padding-right: 4px;
}
.kreator-woo__elements-tools {
display: grid;
gap: 8px;
margin-bottom: 10px;
}
.kreator-woo__elements-search,
.kreator-woo__elements-category {
width: 100%;
min-height: 38px;
border-radius: 6px;
border: 1px solid #4a617c;
background: #f8fafc;
color: #111827;
padding: 6px 10px;
}
.kreator-woo__preset,
.kreator-woo__clipart {
min-height: 40px;
border: 1px solid #4a617c;
border-radius: 6px;
background: #1a3047;
color: #ecf3fc;
font-size: 13px;
cursor: pointer;
}
.kreator-woo__preset {
min-height: 86px;
padding: 8px;
display: grid;
gap: 6px;
align-content: center;
justify-items: center;
outline: none;
-webkit-tap-highlight-color: transparent;
}
.kreator-woo__preset-preview {
color: #e5ecf6;
line-height: 1;
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.kreator-woo__preset-preview--headline {
font-size: 24px;
font-weight: 800;
transform: skewX(-8deg);
}
.kreator-woo__preset-preview--name {
font-size: 19px;
font-weight: 600;
font-style: italic;
}
.kreator-woo__preset-preview--slogan {
font-size: 24px;
font-weight: 700;
transform: scaleX(0.78);
}
.kreator-woo__preset-preview--arc {
font-size: 20px;
letter-spacing: 2px;
transform: rotate(-7deg);
}
.kreator-woo__preset-preview--arc-bottom {
font-size: 20px;
letter-spacing: 2px;
transform: rotate(7deg);
}
.kreator-woo__preset-preview--arcsvg {
width: 100%;
max-width: 220px;
height: 74px;
display: flex;
align-items: center;
justify-content: center;
overflow: visible !important;
white-space: normal !important;
text-overflow: clip !important;
}
.kreator-woo__preset-preview--arcsvg svg {
display: block;
width: 100%;
height: 100%;
overflow: visible;
}
.kreator-woo__preset-preview--arcsvg text {
fill: #e5ecf6;
font-size: 30px;
font-weight: 800;
letter-spacing: 0.2px;
font-family: "Oswald", "Segoe UI", sans-serif;
dominant-baseline: middle;
paint-order: stroke fill;
stroke: rgba(10, 20, 33, 0.55);
stroke-width: 1.1;
}
.kreator-woo__arc-text--top {
transform: translateY(3px);
}
.kreator-woo__arc-text--bottom {
transform: translateY(-3px);
}
.kreator-woo__zoom-hint {
position: absolute;
z-index: 90;
padding: 6px 9px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.97);
color: #0f172a;
border: 1px solid #cfd8e3;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
font-size: 12px;
font-weight: 700;
line-height: 1.1;
pointer-events: none;
}
.kreator-woo__zoom-hint::before {
content: "";
position: absolute;
right: 100%;
top: 50%;
transform: translateY(-50%);
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-right: 8px solid rgba(255, 255, 255, 0.97);
}
.kreator-woo__zoom-hint::after {
content: "";
position: absolute;
right: calc(100% + 1px);
top: 50%;
transform: translateY(-50%);
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 9px solid #cfd8e3;
z-index: -1;
}
.kreator-woo__preset-preview--badge {
font-size: 24px;
letter-spacing: 3px;
font-weight: 800;
}
.kreator-woo__preset-preview--script {
font-size: 30px;
font-weight: 700;
font-family: "Brush Script MT", "Segoe Script", cursive;
}
.kreator-woo__preset-preview--wide {
font-size: 18px;
letter-spacing: 2px;
font-weight: 500;
}
.kreator-woo__preset-label {
font-size: 11px;
color: #9fb6d1;
}
.kreator-woo__preset:hover,
.kreator-woo__clipart:hover {
border-color: #36cfc9;
}
.kreator-woo__preset.is-active {
border-color: #7af7f0;
background: #24507a;
box-shadow: 0 0 0 2px rgba(122, 247, 240, 0.55) inset, 0 0 0 1px rgba(122, 247, 240, 0.45);
}
.kreator-woo__preset.is-active .kreator-woo__preset-label {
color: #eaffff;
font-weight: 700;
}
.kreator-woo__preset.is-active .kreator-woo__preset-preview {
color: #ffffff;
}
.kreator-woo__preset.is-active .kreator-woo__preset-preview--arcsvg text {
fill: #ffffff;
stroke: rgba(10, 20, 33, 0.72);
}
.kreator-woo__preset:focus:not(.is-active),
.kreator-woo__preset:focus-visible:not(.is-active) {
border-color: #4a617c;
box-shadow: none;
outline: none;
}
.kreator-woo__clipart {
min-height: 84px;
display: grid;
place-items: center;
padding: 8px;
gap: 6px;
color: #ffffff;
}
.kreator-woo__clipart svg {
width: 44px;
height: 44px;
fill: currentColor;
stroke: currentColor;
}
.kreator-woo__clipart-name {
font-size: 11px;
color: #c9d9ee;
line-height: 1.1;
text-align: center;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.kreator-woo__clipart-empty {
grid-column: 1 / -1;
border: 1px dashed #4a617c;
border-radius: 8px;
padding: 12px;
text-align: center;
color: #c9d9ee;
font-size: 13px;
}
.kreator-woo__stack-field {
display: grid;
gap: 6px;
margin-bottom: 12px;
color: #d8e6f7;
font-size: 13px;
}
.kreator-woo__stack-field select {
width: 100%;
min-height: 38px;
border-radius: 6px;
border: 1px solid #4a617c;
background: #f8fafc;
color: #111827;
}
.kreator-woo__stack-field input[type="text"],
.kreator-woo__stack-field input[type="search"] {
width: 100%;
min-height: 38px;
border-radius: 6px;
border: 1px solid #4a617c;
background: #f8fafc;
color: #111827;
padding: 6px 10px;
}
.kreator-woo__font-picker {
position: relative;
}
.kreator-woo__font-toggle {
width: 100%;
min-height: 38px;
border-radius: 6px;
border: 1px solid #4a617c;
background: #f8fafc;
color: #111827;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 6px 10px;
cursor: pointer;
}
.kreator-woo__font-current {
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.kreator-woo__font-caret {
color: #475569;
font-size: 12px;
}
.kreator-woo__font-panel {
position: absolute;
left: 0;
right: 0;
top: calc(100% + 6px);
border: 1px solid #4a617c;
border-radius: 8px;
background: #f8fafc;
z-index: 20;
box-shadow: 0 12px 22px rgba(15, 23, 42, 0.2);
padding: 8px;
}
.kreator-woo__font-search {
width: 100%;
min-height: 36px;
border: 1px solid #c8d3e0;
border-radius: 6px;
padding: 6px 8px;
margin-bottom: 8px;
}
.kreator-woo__font-list {
max-height: 230px;
overflow: auto;
display: grid;
gap: 6px;
}
.kreator-woo__font-option {
width: 100%;
min-height: 34px;
border: 1px solid #d5deea;
border-radius: 6px;
background: #ffffff;
color: #111827;
text-align: left;
padding: 6px 9px;
cursor: pointer;
}
.kreator-woo__font-option.is-active,
.kreator-woo__font-option:hover {
border-color: #36cfc9;
background: #ecfeff;
}
.kreator-woo__controls-pane .button {
width: 100%;
min-height: 40px;
border-radius: 6px;
}
.kreator-woo__controls-pane .button.button-primary {
border-color: #14b8a6;
background: #14b8a6;
color: #ffffff;
}
.kreator-woo__upload {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
min-height: 110px;
padding: 12px;
border: 2px dashed #4a617c;
border-radius: 8px;
background: #14283f;
color: #e7f1fc;
cursor: pointer;
text-align: center;
}
.kreator-woo__upload small {
color: #9fb6d1;
font-size: 12px;
}
.kreator-woo__upload input[type="file"] {
display: none;
}
.kreator-woo__upload.is-disabled {
opacity: 0.55;
cursor: not-allowed;
}
.kreator-woo__upload.is-drag {
border-color: #36cfc9;
background: #17334f;
}
.kreator-woo__preview-pane {
position: relative;
background: #ffffff;
border: 1px solid #d6deea;
padding: 14px;
}
.kreator-woo__preview-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}
.kreator-woo__hint {
color: #475569;
font-size: 12px;
}
.kreator-woo__stage-wrap {
position: relative;
width: 100%;
min-height: 560px;
max-height: 78vh;
overflow: hidden;
background: #f9fbff;
border: 1px solid #d1d8e6;
padding: 10px;
}
.kreator-woo__color-popover {
position: absolute;
z-index: 52;
width: 42px;
height: 42px;
padding: 4px;
border: 1px solid #d5dce8;
border-radius: 10px;
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
}
.kreator-woo__color-popover input[type="color"] {
width: 100%;
height: 100%;
border: 0;
border-radius: 8px;
padding: 0;
cursor: pointer;
background: transparent;
}
.kreator-woo__color-panel {
display: none;
}
.kreator-woo__color-popover.is-desktop-panel {
width: 236px;
height: auto;
padding: 10px;
border-radius: 12px;
background: rgba(18, 22, 30, 0.98);
border: 1px solid #2e3b4d;
box-shadow: 0 12px 26px rgba(0, 0, 0, 0.36);
}
.kreator-woo__color-popover.is-desktop-panel > input[type="color"] {
display: none;
}
.kreator-woo__color-popover.is-desktop-panel .kreator-woo__color-panel {
display: block;
}
.kreator-woo__color-sv {
position: relative;
width: 100%;
height: 132px;
border-radius: 10px;
border: 1px solid #334155;
cursor: crosshair;
}
.kreator-woo__color-sv-thumb {
position: absolute;
width: 14px;
height: 14px;
border: 2px solid #ffffff;
border-radius: 50%;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
transform: translate(-50%, -50%);
pointer-events: none;
}
.kreator-woo__color-hue {
width: 100%;
margin: 10px 0 8px;
-webkit-appearance: none;
appearance: none;
height: 14px;
border-radius: 999px;
background: linear-gradient(
to right,
#ff0000 0%,
#ffff00 17%,
#00ff00 33%,
#00ffff 50%,
#0000ff 67%,
#ff00ff 83%,
#ff0000 100%
);
outline: none;
border: 1px solid #334155;
}
.kreator-woo__color-hue::-webkit-slider-runnable-track {
height: 12px;
border-radius: 999px;
background: transparent;
}
.kreator-woo__color-hue::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 14px;
height: 14px;
margin-top: -1px;
border-radius: 50%;
border: 2px solid #ffffff;
background: #111827;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
cursor: pointer;
}
.kreator-woo__color-hue::-moz-range-track {
height: 12px;
border-radius: 999px;
background: transparent;
}
.kreator-woo__color-hue::-moz-range-thumb {
width: 14px;
height: 14px;
border-radius: 50%;
border: 2px solid #ffffff;
background: #111827;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
cursor: pointer;
}
.kreator-woo__color-row {
display: grid;
grid-template-columns: 1fr 42px;
gap: 8px;
}
.kreator-woo__color-hex {
width: 100%;
min-height: 34px;
border-radius: 8px;
border: 1px solid #42526a;
background: #0f1724;
color: #e5edf8;
padding: 6px 10px;
font-weight: 600;
letter-spacing: 0.4px;
}
.kreator-woo__color-eye {
min-width: 42px;
min-height: 34px;
border-radius: 8px;
border: 1px solid #42526a;
background: #111827;
color: #f1f5f9;
cursor: pointer;
font-size: 18px;
line-height: 1;
}
.kreator-woo__color-eye:hover {
background: #1e293b;
}
@media (max-width: 768px) {
.kreator-woo__color-popover.is-desktop-panel {
width: min(220px, calc(100% - 10px));
padding: 8px;
border-radius: 10px;
}
.kreator-woo__color-sv {
height: 112px;
}
.kreator-woo__color-hue {
margin: 8px 0 6px;
}
.kreator-woo__color-row {
grid-template-columns: 1fr 40px;
gap: 6px;
}
.kreator-woo__color-hex {
min-height: 32px;
padding: 5px 8px;
font-size: 13px;
}
.kreator-woo__color-eye {
min-width: 40px;
min-height: 32px;
font-size: 16px;
}
}
.kreator-woo:not(.is-ready) .kreator-woo__stage-wrap {
visibility: hidden;
}
.kreator-woo__stage-image {
position: absolute;
top: 10px;
left: 10px;
display: none;
pointer-events: none;
user-select: none;
z-index: 1;
}
#kreator-woo-canvas {
border: 1px solid #d1d8e6;
max-width: none;
display: block;
position: relative;
z-index: 2;
pointer-events: auto !important;
}
.kreator-woo .canvas-container {
position: relative;
z-index: 5 !important;
}
.kreator-woo .canvas-container canvas {
pointer-events: auto !important;
touch-action: none;
}
.kreator-woo .canvas-container .upper-canvas {
z-index: 7 !important;
}
.kreator-woo__status {
margin: 0;
padding: 0 14px 12px;
font-size: 13px;
color: #334155;
}
@media (max-width: 1200px) {
.kreator-woo__layout {
grid-template-columns: 360px minmax(0, 1fr);
}
}
@media (max-width: 1024px) {
.kreator-woo.kreator-woo--breakout {
width: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0;
}
.kreator-woo__topbar {
flex-wrap: wrap;
align-items: flex-start;
}
.kreator-woo__top-main {
width: 100%;
flex-wrap: wrap;
}
.kreator-woo__layout {
grid-template-columns: 1fr;
}
.kreator-woo__controls-pane {
order: 2;
min-height: 0;
}
.kreator-woo__tab-rail {
flex-direction: row;
border-right: 0;
border-bottom: 1px solid #24374d;
}
.kreator-woo__tab {
width: auto;
min-width: 84px;
min-height: 40px;
padding: 6px 10px;
font-size: 11px;
} .kreator-woo.kreator-woo--modal:not(.is-mobile-ui) .kreator-woo__topbar {
flex-wrap: nowrap;
align-items: center;
}
.kreator-woo.kreator-woo--modal:not(.is-mobile-ui) .kreator-woo__top-main {
width: auto;
flex-wrap: nowrap;
}
.kreator-woo.kreator-woo--modal:not(.is-mobile-ui) .kreator-woo__layout {
grid-template-columns: 360px minmax(0, 1fr);
padding: 0;
}
.kreator-woo.kreator-woo--modal:not(.is-mobile-ui) .kreator-woo__controls-pane {
order: 0;
grid-template-columns: 64px minmax(0, 1fr);
height: 100%;
max-height: none;
}
.kreator-woo.kreator-woo--modal:not(.is-mobile-ui) .kreator-woo__tab-rail {
flex-direction: column;
border-right: 1px solid #24374d;
border-bottom: 0;
padding: 10px 8px;
}
.kreator-woo.kreator-woo--modal:not(.is-mobile-ui) .kreator-woo__tab {
width: 100%;
min-width: 0;
min-height: 52px;
padding: 6px 4px;
font-size: 10px;
}
.kreator-woo.kreator-woo--modal:not(.is-mobile-ui) .kreator-woo__tab-panels {
position: static;
opacity: 1;
visibility: visible;
pointer-events: auto;
border: 0;
border-radius: 0;
max-height: none;
height: 100%;
overflow: auto;
padding: 14px;
}
}
@media (max-width: 640px) {
.kreator-woo {
margin: 14px 0;
}
.kreator-woo.kreator-woo--breakout {
width: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0;
}
.kreator-woo__layout {
padding: 8px;
gap: 8px;
}
.kreator-woo__topbar {
padding: 10px;
gap: 8px;
}
.kreator-woo__brand {
font-size: 16px;
}
.kreator-woo__top-main {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.kreator-woo__inline-field {
min-width: 0;
display: grid;
grid-template-columns: auto 1fr;
gap: 6px;
align-items: center;
}
.kreator-woo__inline-field select {
min-width: 0;
width: 100%;
}
.kreator-woo__top-main .button {
grid-column: 1 / -1;
width: 100%;
}
.kreator-woo__controls-pane {
position: static;
width: 100%;
grid-template-columns: 1fr;
min-height: 0;
height: auto;
max-height: none;
border-radius: 8px;
box-shadow: none;
}
.kreator-woo__tab-panels {
padding: 10px;
max-height: 320px;
overflow: auto;
}
.kreator-woo__tab-rail {
order: 2;
justify-content: space-around;
flex-direction: row;
border-right: 0;
border-top: 1px solid #24374d;
border-bottom: 0;
padding: 8px 6px;
background: #0a1421;
position: sticky;
bottom: 0;
z-index: 4;
}
.kreator-woo__preset-grid,
.kreator-woo__clipart-grid {
grid-template-columns: 1fr;
}
.kreator-woo__preset {
min-height: 64px;
}
.kreator-woo__preview-head {
flex-direction: column;
align-items: flex-start;
}
.kreator-woo__stage-wrap {
min-height: 320px;
height: clamp(320px, 52svh, 520px);
max-height: none;
padding: 6px;
}
}
@media (max-width: 960px) and (orientation: landscape) and (max-height: 540px) {
.kreator-woo__topbar {
padding: 8px 10px;
}
.kreator-woo__layout {
padding: 8px;
gap: 8px;
grid-template-columns: 1fr;
}
.kreator-woo__preview-pane {
padding: 10px;
}
.kreator-woo__stage-wrap {
min-height: 280px;
height: clamp(280px, 78svh, 520px);
max-height: none;
padding: 6px;
}
.kreator-woo__controls-pane {
position: static;
width: 100%;
min-height: 0;
grid-template-columns: 1fr;
height: auto;
max-height: none;
}
.kreator-woo__tab-panels {
max-height: 150px;
overflow: auto;
padding: 8px;
}
.kreator-woo__tab-rail {
order: 2;
flex-direction: row;
justify-content: space-around;
padding: 6px;
border-top: 1px solid #24374d;
border-right: 0;
border-bottom: 0;
}
.kreator-woo__preset-grid,
.kreator-woo__clipart-grid {
grid-template-columns: 1fr 1fr;
gap: 6px;
}
.kreator-woo__preset {
min-height: 58px;
padding: 6px;
}
.kreator-woo__preset-preview--headline {
font-size: 20px;
}
.kreator-woo__preset-preview--script {
font-size: 24px;
}
}
@media (max-width: 768px) {
html,
body {
overflow-x: hidden;
}
.kreator-woo.is-mobile-ui {
margin: 0;
border: 0;
border-radius: 0;
min-height: 100dvh;
height: 100dvh;
max-width: 100%;
background: #eef2f8;
position: sticky;
top: 0;
z-index: 35;
overflow: hidden;
display: flex;
flex-direction: column;
width: 100%;
}
.kreator-woo.is-mobile-ui.kreator-woo--breakout {
width: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0;
}
.kreator-woo.is-mobile-ui .kreator-woo__topbar {
position: relative;
z-index: 42;
padding: 10px 12px;
gap: 8px;
flex: 0 0 auto;
}
.kreator-woo.is-mobile-ui .kreator-woo__brand {
font-size: 15px;
line-height: 1;
}
.kreator-woo.is-mobile-ui .kreator-woo__top-main {
display: grid;
grid-template-columns: minmax(120px, 1fr) auto auto;
gap: 6px;
width: 100%;
}
.kreator-woo.is-mobile-ui .kreator-woo__inline-field {
min-width: 0;
}
.kreator-woo.is-mobile-ui .kreator-woo__inline-field span {
display: none;
}
.kreator-woo.is-mobile-ui .kreator-woo__inline-field select {
min-width: 0;
width: 100%;
min-height: 34px;
}
.kreator-woo.is-mobile-ui .kreator-woo__inline-field input[type="color"] {
width: 34px;
height: 34px;
}
.kreator-woo.is-mobile-ui .kreator-woo__top-main .button {
grid-column: 1 / -1;
width: 100%;
min-height: 34px;
padding: 0 10px;
font-size: 12px;
}
.kreator-woo.is-mobile-ui .kreator-woo__layout {
grid-template-columns: 1fr;
gap: 0;
padding: 0 0 84px;
flex: 1 1 auto;
min-height: 0;
position: relative;
overflow-x: hidden;
}
.kreator-woo.is-mobile-ui .kreator-woo__preview-pane {
padding: 8px;
border: 0;
background: #eef2f8;
display: block;
min-height: 0;
overflow-x: hidden;
}
.kreator-woo.is-mobile-ui .kreator-woo__preview-head {
margin-bottom: 6px;
}
.kreator-woo.is-mobile-ui .kreator-woo__preview-pane .kreator-woo__title {
font-size: 17px;
margin-bottom: 2px;
}
.kreator-woo.is-mobile-ui .kreator-woo__hint {
display: none;
}
.kreator-woo.is-mobile-ui .kreator-woo__stage-wrap {
min-height: 220px;
height: auto;
max-height: calc(100dvh - 270px);
padding: 6px;
border-radius: 8px;
background: #f5f8fc;
}
.kreator-woo.is-mobile-ui .kreator-woo__controls-pane {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 65;
display: block;
height: auto;
min-height: 0;
max-height: none;
border: 0;
border-radius: 14px 14px 0 0;
background: transparent;
overflow: visible;
}
.kreator-woo.is-mobile-ui .kreator-woo__tab-rail {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
padding: 10px 10px 12px;
border-right: 0;
border-top: 1px solid #24374d;
border-bottom: 0;
background: var(--kreator-menu-bg, #0a1421);
border-radius: 14px 14px 0 0;
}
.kreator-woo.is-mobile-ui .kreator-woo__tab {
min-height: 52px;
border-radius: 12px;
font-size: 12px;
padding: 8px 4px;
}
.kreator-woo.is-mobile-ui .kreator-woo__tab-panels {
position: absolute;
left: 0;
right: 0;
bottom: 76px;
max-height: 54dvh;
overflow: auto;
padding: 12px;
border: 1px solid #24374d;
border-bottom: 0;
border-radius: 14px 14px 0 0;
background: var(--kreator-menu-bg, #0a1421);
opacity: 0;
visibility: hidden;
transition: opacity 180ms ease, visibility 180ms ease;
pointer-events: none;
}
.kreator-woo.is-mobile-ui.is-panel-open .kreator-woo__tab-panels {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.kreator-woo.is-mobile-ui .kreator-woo__preset-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.kreator-woo.is-mobile-ui .kreator-woo__clipart-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.kreator-woo.is-mobile-ui .kreator-woo__font-panel {
position: fixed;
left: 10px;
right: 10px;
top: calc(env(safe-area-inset-top, 0px) + 10px);
bottom: calc(env(safe-area-inset-bottom, 0px) + 84px);
max-height: none;
overflow: hidden;
z-index: 120;
border-radius: 12px;
box-shadow: 0 22px 36px rgba(2, 8, 20, 0.5);
pointer-events: auto;
touch-action: pan-y;
}
.kreator-woo.is-mobile-ui .kreator-woo__font-list {
max-height: calc(100% - 48px);
}
.kreator-woo.is-mobile-ui .kreator-woo__status {
display: none;
}
.kreator-woo.is-mobile-ui .kreator-woo__mobile-backdrop {
display: block;
position: absolute;
inset: 0;
z-index: 40;
background: rgba(5, 10, 20, 0.45);
opacity: 0;
pointer-events: none;
transition: opacity 180ms ease;
}
.kreator-woo.is-mobile-ui.is-font-open .kreator-woo__mobile-backdrop {
opacity: 1;
pointer-events: none;
z-index: 40;
}
.kreator-woo.is-mobile-ui.is-panel-open .kreator-woo__mobile-backdrop {
opacity: 1;
pointer-events: auto;
}
}
@media (max-width: 768px) and (orientation: landscape) {
.kreator-woo.is-mobile-ui .kreator-woo__topbar {
padding: 6px 8px;
gap: 6px;
}
.kreator-woo.is-mobile-ui .kreator-woo__brand {
display: none;
}
.kreator-woo.is-mobile-ui .kreator-woo__top-main {
grid-template-columns: minmax(150px, 1fr) 36px auto;
gap: 6px;
}
.kreator-woo.is-mobile-ui .kreator-woo__inline-field select {
min-height: 30px;
padding: 0 6px;
font-size: 12px;
}
.kreator-woo.is-mobile-ui .kreator-woo__inline-field input[type="color"] {
width: 30px;
height: 30px;
}
.kreator-woo.is-mobile-ui .kreator-woo__top-main .button {
grid-column: auto;
width: auto;
min-height: 30px;
padding: 0 9px;
font-size: 11px;
white-space: nowrap;
}
.kreator-woo.is-mobile-ui .kreator-woo__preview-head {
display: none;
}
.kreator-woo.is-mobile-ui .kreator-woo__stage-wrap {
height: auto;
min-height: 150px;
max-height: calc(100dvh - 118px);
}
.kreator-woo.is-mobile-ui .kreator-woo__controls-pane {
border-radius: 10px 10px 0 0;
}
.kreator-woo.is-mobile-ui .kreator-woo__tab-rail {
gap: 6px;
padding: 6px 8px 8px;
border-radius: 10px 10px 0 0;
}
.kreator-woo.is-mobile-ui .kreator-woo__tab {
min-height: 42px;
border-radius: 10px;
font-size: 11px;
padding: 6px 2px;
}
.kreator-woo.is-mobile-ui .kreator-woo__tab-panels {
bottom: 58px;
max-height: 58dvh;
padding: 9px;
border-radius: 10px 10px 0 0;
}
.kreator-woo.is-mobile-ui .kreator-woo__font-panel {
top: calc(env(safe-area-inset-top, 0px) + 8px);
bottom: calc(env(safe-area-inset-bottom, 0px) + 62px);
max-height: none;
}
}
form.cart.kreator-woo-has-creator .single_add_to_cart_button {
display: none !important;
}
body.kreator-woo-product-enabled form.cart .single_add_to_cart_button {
display: none !important;
}
html.kreator-woo-modal-active,
body.kreator-woo-modal-active {
overflow: hidden !important;
overscroll-behavior: none;
touch-action: none;
}
html.kreator-woo-modal-active .et-mobile-panel-wrapper:has(.et-mobile-panel),
body.kreator-woo-modal-active .et-mobile-panel-wrapper:has(.et-mobile-panel) {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
html.kreator-woo-modal-active .etheme-sticky-panel,
body.kreator-woo-modal-active .etheme-sticky-panel {
z-index: 1000001 !important;
pointer-events: auto !important;
}
html.kreator-woo-modal-active .wc-timeline-button-show-cart,
body.kreator-woo-modal-active .wc-timeline-button-show-cart {
z-index: 1000002 !important;
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
}
@media (max-width: 768px) {
html.kreator-woo-modal-active .wc-timeline-button-show-cart,
body.kreator-woo-modal-active .wc-timeline-button-show-cart {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
}
html.kreator-woo-modal-active .wc-timeline-modal-cover,
body.kreator-woo-modal-active .wc-timeline-modal-cover {
z-index: 1000005 !important;
}
html.kreator-woo-modal-active .wc-timeline-modal-cover-container,
body.kreator-woo-modal-active .wc-timeline-modal-cover-container {
z-index: 1000006 !important;
}
.kreator-woo-open-trigger.button.alt {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 52px !important;
width: 100% !important;
padding: 0 24px !important;
border-radius: 6px !important;
border: 1px solid #000000 !important;
background: #000000 !important;
color: #ffffff !important;
font-weight: 700 !important;
font-size: 24px !important;
line-height: 1.1 !important;
letter-spacing: 0.01em !important;
text-transform: none;
transition: none !important;
}
@media (max-width: 1200px) {
.kreator-woo-open-trigger.button.alt {
font-size: 22px !important;
}
}
@media (max-width: 768px) {
.kreator-woo-open-trigger.button.alt {
font-size: 20px !important;
}
}
.kreator-woo.kreator-woo--modal {
position: fixed;
inset: 0;
z-index: 999999;
width: 100vw;
max-width: 100vw;
height: 100dvh;
margin: 0;
border: 0;
background: #e5e5e5;
opacity: 0;
visibility: hidden;
pointer-events: none;
display: flex;
flex-direction: column;
overflow: hidden;
}
.kreator-woo.kreator-woo--modal.is-modal-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.kreator-woo.kreator-woo--modal .kreator-woo__topbar {
background: linear-gradient(90deg, #000000 0%, #101010 100%);
padding: 8px 12px;
gap: 10px;
}
.kreator-woo.kreator-woo--modal .kreator-woo__top-main {
width: auto;
margin-left: 4px;
}
.kreator-woo.kreator-woo--modal .kreator-woo__inline-field {
display: none;
}
.kreator-woo.kreator-woo--modal .kreator-woo__inline-field--color {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
pointer-events: none;
min-width: 0;
}
.kreator-woo.kreator-woo--modal .kreator-woo__inline-field--color span {
display: none;
}
.kreator-woo.kreator-woo--modal .kreator-woo__inline-field--color input[type="color"] {
width: 34px;
height: 34px;
border: 1px solid #3a3a3a;
border-radius: 6px;
background: #0f0f0f;
}
.kreator-woo__top-actions {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 8px;
}
.kreator-woo__top-tools {
display: inline-flex;
align-items: center;
gap: 6px;
}
.kreator-woo__tool-btn {
min-width: 34px;
height: 34px;
border: 1px solid #2f2f2f;
border-radius: 6px;
background: #0d0d0d;
color: #ffffff;
font-size: 16px;
line-height: 1;
cursor: pointer;
}
.kreator-woo__tool-btn[disabled] {
opacity: 0.45;
cursor: not-allowed;
}
.kreator-woo__tool-btn.is-active {
background: #ffffff;
color: #000000;
border-color: #ffffff;
}
.kreator-woo__modal-submit {
min-height: 40px;
padding: 0 12px;
border: 1px solid #2a2a2a;
border-radius: 6px;
background: #111111;
color: #ffffff;
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 700;
cursor: pointer;
}
.kreator-woo__modal-submit:hover {
background: #000000;
}
.kreator-woo__modal-submit-icon {
font-size: 15px;
line-height: 1;
}
.kreator-woo__modal-submit-price {
padding-left: 6px;
border-left: 1px solid #3f3f3f;
font-weight: 600;
}
.kreator-woo__modal-close {
min-width: 38px;
width: 38px;
height: 38px;
border: 1px solid #2f2f2f;
border-radius: 6px;
background: #0f0f0f;
color: #ffffff;
font-size: 18px;
line-height: 1;
cursor: pointer;
}
.kreator-woo.kreator-woo--modal .kreator-woo__layout {
grid-template-columns: 360px minmax(0, 1fr);
gap: 0;
padding: 0;
flex: 1 1 auto;
min-height: 0;
}
.kreator-woo.kreator-woo--modal .kreator-woo__controls-pane {
height: 100%;
max-height: none;
border: 0;
border-right: 1px solid #2d2d2d;
}
.kreator-woo.kreator-woo--modal .kreator-woo__preview-pane {
border: 0;
border-left: 1px solid #d0d0d0;
background: #ececec;
padding: 8px;
}
.kreator-woo.kreator-woo--modal .kreator-woo__preview-head {
display: none;
}
.kreator-woo.kreator-woo--modal .kreator-woo__stage-wrap {
min-height: 100%;
height: calc(100dvh - 66px);
max-height: none;
border: 0;
background: #ececec;
padding: 8px;
}
.kreator-woo__view-nav {
position: absolute;
right: 14px;
bottom: 14px;
z-index: 30;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border: 1px solid #dddddd;
border-radius: 10px;
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16);
}
.kreator-woo__view-nav-btn {
min-width: 30px;
height: 30px;
border: 1px solid #cdcdcd;
border-radius: 6px;
background: #ffffff;
color: #111111;
cursor: pointer;
font-size: 15px;
line-height: 1;
}
.kreator-woo__view-nav-count {
min-width: 50px;
text-align: center;
font-size: 15px;
font-weight: 600;
color: #111111;
}
.kreator-woo.kreator-woo--modal .kreator-woo__status {
display: none;
}
.kreator-woo.kreator-woo--modal.is-mobile-ui .kreator-woo__topbar {
padding: 6px 8px;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: space-between;
}
.kreator-woo.kreator-woo--modal.is-mobile-ui .kreator-woo__brand {
display: none;
}
.kreator-woo.kreator-woo--modal.is-mobile-ui .kreator-woo__top-main {
width: auto;
display: none;
}
.kreator-woo.kreator-woo--modal.is-mobile-ui .kreator-woo__inline-field:not(:first-child) {
display: none;
}
.kreator-woo.kreator-woo--modal.is-mobile-ui .kreator-woo__inline-field--color {
position: absolute;
}
.kreator-woo.kreator-woo--modal.is-mobile-ui .kreator-woo__inline-field select {
min-height: 34px;
}
.kreator-woo.kreator-woo--modal.is-mobile-ui .kreator-woo__top-main .button {
display: none;
}
.kreator-woo.kreator-woo--modal.is-mobile-ui .kreator-woo__layout {
grid-template-columns: 1fr;
padding: 0 0 84px;
display: block;
position: relative;
flex: 1 1 auto;
min-height: 0;
}
.kreator-woo.kreator-woo--modal.is-mobile-ui .kreator-woo__controls-pane {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 65;
display: block;
height: auto;
min-height: 0;
max-height: none;
border: 0;
background: transparent;
border-radius: 14px 14px 0 0;
overflow: visible;
}
.kreator-woo.kreator-woo--modal.is-mobile-ui .kreator-woo__tab-rail {
position: relative;
z-index: 72;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
padding: 10px 10px 12px;
border-right: 0;
border-top: 1px solid #24374d;
border-bottom: 0;
background: var(--kreator-menu-bg, #0a1421);
border-radius: 14px 14px 0 0;
}
.kreator-woo.kreator-woo--modal.is-mobile-ui .kreator-woo__tab {
min-height: 52px;
border-radius: 12px;
font-size: 12px;
padding: 8px 4px;
}
.kreator-woo.kreator-woo--modal.is-mobile-ui .kreator-woo__tab-panels {
position: absolute;
left: 0;
right: 0;
bottom: 74px;
max-height: 54dvh;
overflow: auto;
padding: 12px;
border: 1px solid #24374d;
border-bottom: 0;
border-radius: 14px 14px 0 0;
background: var(--kreator-menu-bg, #0a1421);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 180ms ease, visibility 180ms ease;
z-index: 71;
}
.kreator-woo.kreator-woo--modal.is-mobile-ui.is-panel-open .kreator-woo__tab-panels {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.kreator-woo.kreator-woo--modal.is-mobile-ui .kreator-woo__preview-pane {
padding: 6px;
padding-bottom: 84px;
height: 100%;
overflow: hidden;
}
.kreator-woo.kreator-woo--modal.is-mobile-ui .kreator-woo__stage-wrap {
height: auto;
aspect-ratio: 1 / 1;
min-height: 180px;
max-height: calc(100dvh - 188px);
padding: 4px;
}
.kreator-woo.kreator-woo--modal.is-mobile-ui .kreator-woo__tab-panels {
bottom: 74px;
max-height: 54dvh;
}
.kreator-woo.kreator-woo--modal.is-mobile-ui .kreator-woo__view-nav {
right: 8px;
bottom: 2px;
gap: 8px;
padding: 6px 8px;
}
.kreator-woo.kreator-woo--modal.is-mobile-ui.is-panel-open .kreator-woo__view-nav {
bottom: 88px;
}
.kreator-woo.kreator-woo--modal.is-mobile-ui .kreator-woo__mobile-backdrop {
display: block;
position: absolute;
inset: 0;
z-index: 40;
background: rgba(5, 10, 20, 0.45);
opacity: 0;
pointer-events: none;
transition: opacity 180ms ease;
}
.kreator-woo.kreator-woo--modal.is-mobile-ui.is-panel-open .kreator-woo__mobile-backdrop,
.kreator-woo.kreator-woo--modal.is-mobile-ui.is-font-open .kreator-woo__mobile-backdrop {
opacity: 1;
pointer-events: auto;
}
@media (min-width: 700px) and (max-width: 1024px) and (orientation: portrait) {
.kreator-woo.kreator-woo--modal.is-mobile-ui:not(.is-tablet-ui) .kreator-woo__topbar {
padding: 10px 12px;
gap: 10px;
}
.kreator-woo.kreator-woo--modal.is-mobile-ui:not(.is-tablet-ui) .kreator-woo__tool-btn {
min-width: 36px;
height: 36px;
font-size: 17px;
}
.kreator-woo.kreator-woo--modal.is-mobile-ui:not(.is-tablet-ui) .kreator-woo__modal-submit {
min-height: 38px;
padding: 0 10px;
}
.kreator-woo.kreator-woo--modal.is-mobile-ui:not(.is-tablet-ui) .kreator-woo__tab-rail {
padding: 10px 12px 12px;
gap: 10px;
}
.kreator-woo.kreator-woo--modal.is-mobile-ui:not(.is-tablet-ui) .kreator-woo__tab {
min-height: 54px;
font-size: 13px;
}
.kreator-woo.kreator-woo--modal.is-mobile-ui:not(.is-tablet-ui) .kreator-woo__tab-panels {
max-height: 48dvh;
}
} .kreator-woo.kreator-woo--modal.is-mobile-ui.is-tablet-ui .kreator-woo__layout {
display: grid !important;
grid-template-columns: clamp(250px, 29vw, 300px) minmax(0, 1fr) !important;
grid-template-rows: 1fr !important;
padding: 0 !important;
gap: 0 !important;
}
.kreator-woo.kreator-woo--modal.is-mobile-ui.is-tablet-ui .kreator-woo__controls-pane {
order: 0 !important;
position: static !important;
display: grid !important;
grid-template-columns: 64px minmax(0, 1fr) !important;
height: 100% !important;
max-height: none !important;
border: 0 !important;
border-right: 1px solid #2d2d2d !important;
border-radius: 0 !important;
background: var(--kreator-menu-bg, #0a1421) !important;
overflow: hidden !important;
z-index: 20 !important;
}
.kreator-woo.kreator-woo--modal.is-mobile-ui.is-tablet-ui .kreator-woo__tab-rail {
position: static !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
gap: 8px !important;
padding: 10px 8px !important;
border-top: 0 !important;
border-bottom: 0 !important;
border-right: 1px solid #24374d !important;
border-radius: 0 !important;
background: var(--kreator-menu-bg, #0a1421) !important;
}
.kreator-woo.kreator-woo--modal.is-mobile-ui.is-tablet-ui .kreator-woo__tab {
min-height: 52px !important;
font-size: 10px !important;
padding: 6px 4px !important;
}
.kreator-woo.kreator-woo--modal.is-mobile-ui.is-tablet-ui .kreator-woo__tab-panels {
position: static !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
max-height: none !important;
height: 100% !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
padding: 12px !important;
overflow: auto !important;
}
.kreator-woo.kreator-woo--modal.is-mobile-ui.is-tablet-ui .kreator-woo__preview-pane {
order: 0 !important;
padding: 8px !important;
padding-bottom: 8px !important;
border: 0 !important;
background: #ececec !important;
min-height: 0 !important;
overflow: hidden !important;
}
.kreator-woo.kreator-woo--modal.is-mobile-ui.is-tablet-ui .kreator-woo__stage-wrap {
height: calc(100dvh - 66px - 16px) !important;
min-height: 220px !important;
max-height: none !important;
padding: 6px !important;
}
.kreator-woo.kreator-woo--modal.is-mobile-ui.is-tablet-ui .kreator-woo__view-nav {
bottom: 12px !important;
right: 12px !important;
}
.kreator-woo.kreator-woo--modal.is-mobile-ui.is-tablet-ui .kreator-woo__mobile-backdrop {
display: none !important;
} @media (min-width: 960px) and (max-width: 1024px) and (orientation: landscape) {
.kreator-woo.kreator-woo--modal.is-mobile-ui .kreator-woo__layout {
display: grid !important;
grid-template-columns: 290px minmax(0, 1fr) !important;
grid-template-rows: 1fr !important;
padding: 0 !important;
gap: 0 !important;
}
.kreator-woo.kreator-woo--modal.is-mobile-ui .kreator-woo__controls-pane {
order: 1 !important;
grid-column: 1 !important;
position: static !important;
display: grid !important;
grid-template-columns: 62px minmax(0, 1fr) !important;
height: 100% !important;
max-height: none !important;
border: 0 !important;
border-right: 1px solid #2d2d2d !important;
border-radius: 0 !important;
background: var(--kreator-menu-bg, #0a1421) !important;
overflow: hidden !important;
z-index: 20 !important;
}
.kreator-woo.kreator-woo--modal.is-mobile-ui .kreator-woo__preview-pane {
order: 2 !important;
grid-column: 2 !important;
padding: 8px !important;
padding-bottom: 8px !important;
border: 0 !important;
background: #ececec !important;
min-height: 0 !important;
overflow: hidden !important;
}
.kreator-woo.kreator-woo--modal.is-mobile-ui .kreator-woo__tab-rail {
position: static !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
padding: 10px 8px !important;
border-top: 0 !important;
border-bottom: 0 !important;
border-right: 1px solid #24374d !important;
border-radius: 0 !important;
background: var(--kreator-menu-bg, #0a1421) !important;
z-index: auto !important;
}
.kreator-woo.kreator-woo--modal.is-mobile-ui .kreator-woo__tab {
min-height: 50px !important;
font-size: 10px !important;
padding: 6px 4px !important;
border-radius: 10px !important;
}
.kreator-woo.kreator-woo--modal.is-mobile-ui .kreator-woo__tab-panels {
position: static !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
max-height: none !important;
height: 100% !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
padding: 12px !important;
overflow: auto !important;
z-index: auto !important;
}
.kreator-woo.kreator-woo--modal.is-mobile-ui .kreator-woo__stage-wrap {
height: calc(100dvh - 82px) !important;
aspect-ratio: auto !important;
min-height: 260px !important;
max-height: none !important;
padding: 6px !important;
}
.kreator-woo.kreator-woo--modal.is-mobile-ui .kreator-woo__view-nav {
right: 12px !important;
bottom: 2px !important;
}
.kreator-woo.kreator-woo--modal.is-mobile-ui .kreator-woo__mobile-backdrop {
display: none !important;
}
} .kreator-woo.kreator-woo--modal.is-mobile-ui.is-landscape-mobile .kreator-woo__layout {
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-rows: minmax(0, 1fr) auto !important;
padding: 0 !important;
gap: 0 !important;
}
.kreator-woo.kreator-woo--modal.is-mobile-ui.is-landscape-mobile .kreator-woo__controls-pane {
position: static !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
z-index: 70 !important;
border-radius: 0 !important;
overflow: visible !important;
}
.kreator-woo.kreator-woo--modal.is-mobile-ui.is-landscape-mobile .kreator-woo__preview-pane {
padding: 4px 4px 0 !important;
min-height: 0 !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
}
.kreator-woo.kreator-woo--modal.is-mobile-ui.is-landscape-mobile .kreator-woo__stage-wrap {
height: 100% !important;
aspect-ratio: auto !important;
min-height: 0 !important;
max-height: none !important;
padding: 2px !important;
flex: 1 1 auto !important;
}
.kreator-woo.kreator-woo--modal.is-mobile-ui.is-landscape-mobile .kreator-woo__view-nav {
bottom: 2px !important;
}
.kreator-woo.kreator-woo--modal.is-mobile-ui.is-landscape-mobile .kreator-woo__tab-panels {
bottom: 56px !important;
max-height: 44dvh !important;
z-index: 75 !important;
}
.kreator-woo.kreator-woo--modal.is-mobile-ui.is-landscape-mobile .kreator-woo__mobile-backdrop {
display: none !important;
opacity: 0 !important;
pointer-events: none !important;
}
@media (max-width: 980px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
.kreator-woo.kreator-woo--modal.is-mobile-ui .kreator-woo__layout {
display: grid !important;
grid-template-columns: 1fr !important;
grid-template-rows: minmax(0, 1fr) auto !important;
padding: 0 !important;
gap: 0 !important;
}
.kreator-woo.kreator-woo--modal.is-mobile-ui .kreator-woo__controls-pane {
position: static !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
z-index: 10 !important;
border-radius: 0 !important;
overflow: visible !important;
}
.kreator-woo.kreator-woo--modal.is-mobile-ui .kreator-woo__preview-pane {
padding: 4px !important;
min-height: 0 !important;
overflow: hidden !important;
}
.kreator-woo.kreator-woo--modal.is-mobile-ui .kreator-woo__stage-wrap {
height: calc(100dvh - 120px) !important;
min-height: 120px !important;
max-height: none !important;
padding: 2px !important;
}
.kreator-woo.kreator-woo--modal.is-mobile-ui .kreator-woo__view-nav {
bottom: 2px !important;
}
.kreator-woo.kreator-woo--modal.is-mobile-ui .kreator-woo__tab-panels {
bottom: 56px !important;
max-height: 42dvh !important;
}
}
@media (max-width: 768px) {
.kreator-woo__tool-btn {
min-width: 38px;
height: 38px;
font-size: 18px;
}
.kreator-woo__modal-submit-label {
display: none;
}
.kreator-woo__modal-submit {
min-width: 86px;
justify-content: center;
padding: 0 8px;
gap: 6px;
}
.kreator-woo__top-actions {
gap: 6px;
}
.kreator-woo__modal-submit-price {
border-left: 0;
padding-left: 0;
}
.kreator-woo__zoom-hint {
font-size: 11px;
padding: 5px 8px;
}
}

@font-face {
font-family: 'fontello';
src: url(//giftway.pl/wp-content/plugins/wc-j-upsellator/assets/font/fontello.eot?80747879);
src: url(//giftway.pl/wp-content/plugins/wc-j-upsellator/assets/font/fontello.eot?80747879#iefix) format('embedded-opentype'),
url(//giftway.pl/wp-content/plugins/wc-j-upsellator/assets/font/fontello.woff2?80747879) format('woff2'),
url(//giftway.pl/wp-content/plugins/wc-j-upsellator/assets/font/fontello.woff?80747879) format('woff'),
url(//giftway.pl/wp-content/plugins/wc-j-upsellator/assets/font/fontello.ttf?80747879) format('truetype'),
url(//giftway.pl/wp-content/plugins/wc-j-upsellator/assets/font/fontello.svg?80747879#fontello) format('svg');
font-weight: normal;
font-style: normal;
}
[class^="wooj-icon-"]:before, [class*=" wooj-icon-"]:before 
{
font-family: "fontello";
font-style: normal;
font-weight: normal;
speak: never;    
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;
font-variant: normal;
text-transform: none;
line-height: 1em;
margin-left: .2em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} 
.wooj-icon-basket:before { content: '\e800'; } .wooj-icon-briefcase:before { content: '\e802'; } .wooj-icon-basket-1:before { content: '\e803'; } .wooj-icon-truck:before { content: '\e804'; } .wooj-icon-list-add:before { content: '\e805'; } .wooj-icon-flight:before { content: '\e806'; } .wooj-icon-basket-alt:before { content: '\e807'; } .wooj-icon-cog:before { content: '\e808'; } .wooj-icon-arrows-cw:before { content: '\e80a'; } .wooj-icon-info-circled:before { content: '\e80c'; } .wooj-icon-floppy:before { content: '\e80d'; } .wooj-icon-comment:before { content: '\e80e'; } .wooj-icon-attention:before { content: '\e80f'; } .wooj-icon-gift:before { content: '\e810'; } .wooj-icon-basket-2:before { content: '\e811'; } .wooj-icon-bag:before { content: '\e812'; } .wooj-icon-pencil:before { content: '\e813'; } .wooj-icon-pause:before { content: '\e816'; } .wooj-icon-calendar:before { content: '\e817'; } .wooj-icon-play:before { content: '\e81a'; } .wooj-icon-empty-cart:before { content: '\e81b'; } .wooj-icon-trash:before { content: '\e83d'; } .wooj-icon-sort:before { content: '\f0dc'; } .wooj-icon-newspaper:before { content: '\f1ea'; } .wooj-icon-bicycle:before { content: '\f206'; } .wooj-icon-opencart:before { content: '\f23d'; } .wooj-icon-shopping-bag:before { content: '\f290'; } .wooj-icon-linkedin-squared:before { content: '\f30c'; } .wooj-icon-camera:before { content: '\e814'; } .wooj-icon-fast-food:before { content: '\e815'; } .wooj-icon-videocam:before { content: '\e80b'; } .wooj-icon-tablet:before { content: '\e81c'; } .wooj-icon-thumbs-up:before { content: '\e81d'; } .wooj-icon-heart:before { content: '\e81e'; } .appear-animation 
{
opacity: 0;
transform: translateY(60px);
transition: transform 1s cubic-bezier(.165,.84,.44,1) .1s,opacity 1s cubic-bezier(.165,.84,.44,1) .2s;
}
.wc-timeline-modal-cover-container.opened .appear-animation 
{
opacity: 1; 
transform: translateY(0); 
}
.flex-row-center,
.flex-row-between,
.flex-row-end,
.flex-row-start,
.flex-column-center,
.flex-column-start,
.flex-column-end,
.flex-column-between
{
display:flex;
}
.flex-row-center,
.flex-row-between,
.flex-row-end,
.flex-row-start
{
flex-flow:row;
}
.flex-column-between,
.flex-column-center,
.flex-column-start,
.flex-column-end
{
flex-flow:column;
}
.flex-row-center
{	
justify-content:center;
align-items:center;
}
.flex-column-between,
.flex-row-between
{	
justify-content:space-between;
align-items:center;
}
.flex-row-start
{		
justify-content:flex-start;
align-items:center;
}
.flex-row-end
{		
justify-content:flex-end;
align-items:center;
}
.flex-column-center
{	
justify-content:center;
align-items:center;
}
.flex-column-start
{	
justify-content:center;
align-items:flex-start;
}
.flex-row-end.wrap,
.flex-row-start.wrap,
.flex-row-between.wrap,
.flex-row-center.wrap
{
flex-flow:row wrap;
}
.flex-row-end.start,
.flex-row-start.start,
.flex-row-between.start,
.flex-row-center.start
{
align-items:flex-start;
}
.flex-row-end.end,
.flex-row-start.end,
.flex-row-between.end,
.flex-row-center.end
{
align-items:flex-end;
}
.flex-column-start.wrap,
.flex-column-end.wrap,
.flex-column-center.wrap
{
flex-flow:column wrap;
}
.flex-column-start.start,
.flex-column-end.start,
.flex-column-center.start
{
justify-content:flex-start;
}
.wc-timeline-modal-cover,
.wc-timeline-button,
.wc-timeline-product,
.wc-timeline-remove-product,
.wc-timeline-product .qty-change,
.wcjfw-shipping-bar:after,
.wcjfw-shipping-bar .shipping-icon,
.shipping-bar-icon,
.shipping-bar-icon:after,
.wc-timeline-product-add a,
.wc-timeline-product .image,
.wc-j-bullet,
.wc-nav-prev,
.wc-nav-next
{	
transition:300ms ease all;
}
.wc-timeline-product .qty
{
transition:200ms ease all;
}
.wc-timeline-container-shop-header,
.wc-timeline-empty-modal,
.wc-timeline-container-close-icon,
.wc-timeline-container-header-text,
.wc-timeline-product,
.wc-timeline-product .heading,
.wc-timeline-checkout-button,
.wc-timeline-remove-product,
.wc-timeline-product.upsell,
.wc-timeline-empty-modal .wc-timeline-button,
.wc-timeline-footer
{
box-sizing:border-box;
}
.wc-timeline-empty-modal .heading,
.wc-timeline-empty-modal .fulltext,
.wc-timeline-empty-modal .sub-heading,
.wc-timeline-product .btn-qty,
.wc-timeline-remove-product,
.wc-timeline-product .qty-change,
.shipping-bar-text,
.wcjfw-shipping-bar .shipping-icon,
.wc-timeline-button-show-cart .wc-item-count,
.wc-timeline-container-close-icon
{
text-align: center;
}
.shipping-progress-bar, 
.wc-timeline-product,
.wc-timeline-inner-container .image,
.wc-timeline-checkout-upsell .image,
.shipping-bar-plugin,
.wcjfw-shipping-bar  
{
position:relative;
}
.wc-timeline-button-show-cart,
.wc-timeline-modal-cover-container,
.wcjfw-shipping-bar .shipping-icon
{   
background-color:var(--modal-bg-color);
}
.wc-timeline-product .discounted,
.wc-timeline-product-category,
.wc-timeline-product .upsell-heading,
.wc-timeline-container-shop-header,
.wc-timeline-checkout-button,
.wc-timeline-empty-modal .wc-timeline-button,
.wc-timeline-empty-modal .heading,
.footer-coupon .coupon_button
{
text-transform: uppercase; 
}
.wc-timeline-checkout-upsell .wc-j-items-carousel
{
padding: 5px 10px;
}
.wc-timeline-cart-notice:not(:empty)
{    
width: 100%;
border-bottom: 1px solid rgba(0,0,0,.03);
color: white;
padding: 10px 30px;
font-size:0.9em;
}
.wc-timeline-cart-notice.error
{
background:#e2401c;
border-left:.6180469716em solid rgba(0,0,0,.15);
}
.wc-timeline-checkout-upsell .wc-timeline-product.upsell
{
margin:0px 0px 15px 0px;
width:100%;
box-shadow: 0 0.4rem 1rem rgb(0 0 0 / 5%);
background-color: white;
}
.wc-timeline-cart-products
{
overflow:auto;
}
.wc-timeline-cart-upsell,
.wc-timeline-cart-products,
.wc-timeline-modal-upsell
{
width:100%;
}
.wc-timeline-cart-products::-webkit-scrollbar-thumb
{
background: var(--font-color);
height: 100px;
border-radius: 0;
}
.wc-timeline-cart-products::-webkit-scrollbar
{
width: 4px;
}
.wc-timeline-cart-products::-webkit-scrollbar-track
{
background: rgba(0,0,0,0.02);
border-left: 1px solid rgba(255,255,255,.1);
}
.wc-timeline-button:hover,
.wc-nav-prev:hover,
.wc-nav-next:hover,
.coupon-list .coupon:hover:before
{
transform:scale(1.03);
background:var(--wcj-button-color-hover);
color:var(--wcj-button-font-color-hover);
}
.wc-timeline-button-show-cart,
.wc-timeline-modal-cover-container,
.wc-timeline-product .btn-qty 
{
color: var(--font-color);
}
.wc-timeline-product .discounted.special,
.wc-timeline-product-add a,
.wc-timeline-product.upsell-product .qty
{
background-color: var(--upsell-color) !important;
color:var(--upsell-text-color) !important;
border:none !important;
}
.wc-timeline-product-add a
{
line-height:15px !important;
height:auto !important;
}
.wc-timeline-product .qty,
.wc-timeline-button-show-cart .wc-item-count,
.wc-timeline-product .discounted,
.woo-j-upsellator-label.label-offer
{
background-color: var(--item-count-background);
color:var(--item-count-color);
}
.wc-timeline-button,
.wc-nav-prev,
.wc-nav-next
{
background:var(--button-color);
color:var(--font-button-color);
}
.wcjfw-hidden,
.elementor-menu-cart__container,
.shipping-bar-plugin.empty,
.wc-timeline-product .out-of-stock,
.wc-timeline-modal-cover,
.wc-timeline-product .image .loader
{
display:none;
}
.wc-timeline-product .out-of-stock
{
margin-top: 2px;
margin-left:1px;
text-decoration: underline;
border-radius: 5px;
font-size: 9px;
}
.product-name .woo-j-cart-name 
{
font-weight: bold;
font-size: 12px;
} .woo-j-upsellator-labels .woo-j-upsellator-label
{   
padding: 5px 30px;
font-size: 11px;    
font-weight: bold;   
text-transform: uppercase; 
text-align:center;
margin-bottom:2px;
}
.woo-j-upsellator-labels.rotated
{
right: 0;
transform: rotate( 45deg) translate( 30%, -40% );
top: 0%;
position: absolute;
}
.woo-j-upsellator-labels.inline
{
position:relative;      
display: flex;
justify-content: center;
margin-bottom:10px;
}
.upsellator-before-short-description
{     
margin-bottom:10px;
}
.single .woo-j-upsellator-labels.inline
{
justify-content: flex-start;
}
.wc-timeline-product.free-gift-product .discounted,
.wc-timeline-product.free-gift-product .qty,
.woo-j-upsellator-label.label-gift
{
background-color:var(--free-gift-color) !important;
color:var(--gift-text-color) !important;
}
.wc-timeline-product.free-gift-product span.free,
.product-name .woo-j-cart-name.gift, 
.wc-timeline-product.free-gift-product .wc-timeline-product-category 
{
color:var(--free-gift-color);
opacity:1;
}
.wc-timeline-product-category,
.wc-timeline-product .upsell-heading
{
font-size: 0.7em;
font-weight:bold; 
text-align:left;
}
.wc-timeline-product-category
{  
opacity: 0.6;    
}
.wc-timeline-product-category.saved
{
opacity:1;
color:var(--item-count-background);
}
.wc-timeline-product-add a:hover
{
background:var(--wcj-button-color-hover) !important;
color:var(--wcj-button-font-color-hover) !important;
transform:scale(1.1);
-webkit-transform: scale(1.1);   
backface-visibility:hidden;
}
.wc-timeline-product-add a:hover:after
{
content:'' !important;
}
.wc-timeline-footer a
{
color:var(--font-button-color);
}
.wc-timeline-product-title,
.wc-timeline-footer a,
body .wc-timeline-product-add a
{
text-decoration: none !important;
}
.wc-timeline-button-show-cart.right
{
right: 20px;
}
.wc-timeline-button-show-cart.left
{
left: 20px;
}
.wc-timeline-button-show-cart.hidden
{
display:none;
}
.footer-buttons
{
width:100%;
flex-wrap: wrap;
}
.wc-timeline-modal-cover-container.small .footer-buttons a
{
width:100%;
max-width:100%;
margin:0px;
}
.coupon-list .coupon::before
{
content: '✕';
position: absolute;
right: 0px;
transition:300ms ease all;
height: 100%;
width: 19px;
top: 0px;
display: flex;
justify-content: center;
background: rgba(0,0,0,0.05);
align-items: center;
}
.coupon-list .coupon
{
cursor: pointer;
margin: 3px 3px 3px 0px;
background: rgba(0,0,0,0.05);
font-size: 12px;
border-radius: 5px;
padding: 2px 30px 2px 10px;
position: relative;
}
.footer-coupon-container
{
width: 100%;
padding-bottom: 15px;
border-bottom: 1px solid rgba(0,0,0,.03);
margin-bottom: 15px;  
}
.footer-coupon .loader
{
max-height:80%;
}
.footer-coupon input::placeholder,
.footer-coupon input
{
font-size:12px;
}
.wc-timeline-product.fake-product
{
padding-top:20px !important;
padding-bottom:30px !important;
margin-bottom:1px;   
}
.wjcfw-fake-product--text i
{
position: absolute;
right: 0%;
top: 50%;
font-size: 80px;
transform: translate( 0%, -50% );
opacity: 0.04;
}
.wjcfw-fake-product--overlay
{
position: absolute;
left: 0px;
top: 0px;   
padding: 20px;
height: 100%;
width:100%;
display: flex;  
background-color: rgba(0,0,0,0.02);
align-items: center;
z-index: 999;
backdrop-filter: blur( 5px );
-webkit-backdrop-filter: blur( 5px );   
}
.wc-timeline-product.fake-product .options
{
display:none;
}
.footer-coupon input,
.footer-coupon .coupon_button
{
height:35px !important;
}
.footer-coupon input
{    
flex-grow:1;
border: 1px solid #ededed;
box-shadow: none !important;
}
.footer-coupon .coupon_button
{
border-radius: 0px 5px 5px 0px;
font-size: 0.7em;
padding:0px 25px;
min-width:150px;
cursor:pointer;
}
.wc-timeline-notifications:empty
{
display:none;
}
.wc-timeline-notifications
{
position:absolute;   
width:100%;
color:white;
height:90px;    
line-height:90px;
padding:0px 30px;
text-align:center;
background-color:#6eb76e;
}
.wc-timeline-notifications[data-type="error"]
{
background-color: #e2401c;
}
.has-loader .loader
{
display:none;
}
.has-loader.loading .loader
{
display:block;
}
.has-loader.loading .text
{
display:none;
}
@media screen and (min-width: 621px)
{
.wc-timeline-modal-cover-container.small .wc-timeline-container-shop-header
{
width:100%;
left:0px;
}
.wc-timeline-modal-cover-container.small .wc-timeline-notifications
{
height:65px;
line-height: 65px;
}
.wc-timeline-modal-cover-container.small .wc-timeline-product
{
padding:10px;
}
.wc-timeline-modal-cover-container.small .wc-timeline-container-header-image img
{
height:35px;
}
.wc-timeline-modal-cover-container.small .wc-timeline-container-shop-header
{
height:65px;       
}
.wc-timeline-modal-cover-container.small .wc-timeline-container-close-icon
{
font-size: 22px;
width: 65px;
line-height: 65px;
height: 65px;
}
}
.wc-timeline-modal-cover-container.small .wc-timeline-checkout-button
{
height:50px;
}
.wc-timeline-modal-cover-container.small .footer-buttons a:not(:first-child)
{
margin-top:10px;
}
.wc-upsellator-footer-button
{
flex-grow:1;
}
.wc-upsellator-footer-button.cart
{
margin-right:10px;
max-width:35%;
}
.wc-timeline-button-show-cart 
{	
position: fixed;
height: 60px;
width: 60px;
border-radius: 50%;    
bottom: 20px;   
box-shadow: 0 0.4rem 3rem rgba(0,0,0,.1);
cursor: pointer;
z-index: 2222;	
font-size: 30px;	
}
.wc-timeline-product-add
{
position: absolute;
bottom: 10px;
display:flex;
}
.wc-timeline-button-show-cart .wc-item-count
{
height: 25px;
width: 25px;
position: absolute;
line-height: 26px;
font-size: 14px;
left: -3px;
bottom: -3px;
border-radius: 50%;
font-size: 12px;
font-weight: bold;
}
.wc-timeline-modal-cover
{
left: 0;  
z-index: 9998;
position: fixed; 
top: 0;
bottom: 0;
width: 100%;
opacity: 0;
background: rgba(95,92,92,.6);
}
.wc-timeline-product.upsell
{
margin: 15px;   
padding: 10px;
border-radius: 8px;
width: calc( 100% - 30px );
box-shadow: 0 0.4rem 3rem rgba(0,0,0,.1);
}
.wc-timeline-product-add a
{
padding: 8px 15px !important;
font-size: 0.7em !important;
border-radius: 5px !important;
white-space: initial !important;
}
.wc-timeline-product .upsell-heading,
.product-name .woo-j-cart-name.upsell, 
.wc-timeline-product.upsell-product .wc-timeline-product-category
{     
color:var(--upsell-color);
}
.wc-nav-prev,
.wc-nav-next,
.wc-j-bullet,
.wc-j-items-carousel .wc-timeline-product
{
cursor:pointer;
}
.wc-nav-prev,
.wc-nav-next
{
width: 25px;
height: 25px;
font-size: 21px;
font-family: Arial;
line-height: 22px;
text-align: center;
border-radius: 50%;
}
.wc-j-bullet
{
height:5px;
width:13px;    
border-radius:3px;
margin:0px 3px;
opacity:0.3;
background-color:var(--upsell-color);
}
.wc-j-items-carousel-nav 
{
height:40px;    
padding: 0px 35px;
}
.wc-j-items-carousel
{
margin: 0 auto;
overflow: hidden;
width: 100%;
padding: 0px 10px;
}
.wc-timeline-product.composite-child .qty
{
height:1.7em;
width:1.7em;
font-size:0.6em;
}
.wc-timeline-product.composite-child .wc-timeline-price-container:before
{
font-family: 'FontAwesomeCP';
font-size: 0.8rem;
display: inline-block;    
transform: rotate(90deg);
content: "\e811";
margin: 0 12px 0 3px;
opacity: .17;
}
.wc-timeline-product .product-meta-data
{
font-size:13px;
line-height:13px;
}
.wc-timeline-inner-container .wc-timeline-product.composite-child .image:after
{
height:70px;
background:#f7f5f580;
width:10px;
z-index:-1;
top:-100%;
content:'';
position:absolute;
left:50%;  
transform:translateX( -50% );
}
.wc-timeline-inner-container .wc-timeline-product.composite-child .image
{    
width:60px;
}
.wc-timeline-inner-container .wc-timeline-product.composite-child .wc-timeline-product-price  
{
opacity:0.5;
}
.wc-timeline-product.composite-child  .image, 
.wc-timeline-product.composite-child  .options, 
.wc-timeline-product.composite-child  .heading
{
height:70px;
}
.wc-timeline-item-composite-option
{
font-size:12px;
line-height:12px;
}
.wc-j-items-carousel-inner
{
position: relative;
white-space: nowrap;
width: 100%;
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
display: flex;
transition:400ms ease all;
}
.wc-j-items-carousel-inner.stacked .wc-timeline-product
{
margin-bottom:0px;
}
.wc-timeline-checkout-upsell .wc-timeline-product.upsell
{
margin-bottom:15px !important;
}
.wc-j-items-carousel-inner.stacked .wc-timeline-product:last-child
{
margin-bottom:15px;
}
.wc-j-items-carousel-inner.stacked
{
flex-flow:column;
}
.wc-j-items-carousel .wc-timeline-product
{
flex: 0 0 auto;
white-space: normal;
}
.wc-j-bullet.active 
{
opacity:1;
width:35px;
}
.wc-items-container
{
width: 100%;
overflow: hidden;
flex-grow: 1;
max-width: 100% !important;
margin: 0px !important;
}
.wc-timeline-inner-container
{    
flex-shrink:1;
flex-grow:1;
overflow: auto;
overflow-x: hidden;
}
.wc-timeline-product .upsell-text
{
font-size: 0.75em;
line-height: 1em;
margin-top: 5px;
max-width: 250px;
font-weight: 500;
width: 100%;
text-align:left;
}
.wc-timeline-product .currency,
.wc-timeline-footer .currency
{
font-size: 0.6em;   
margin-left: 2px;    
font-weight:bold;
}
.wc-timeline-product-price.striked
{
font-size: 0.6em;
text-decoration: line-through;
opacity: 0.5;
margin-right: 5px;
}
.wc-timeline-product-price
{
font-weight:bold;
}
.wc-footer-subtotal
{
font-weight: bold;
font-size: 1.2em;
padding-right:5px;
line-height: 1em;
}
.wc-timeline-product-title
{
color: inherit;   
font-weight: bold;
display: -webkit-box;
text-align:left;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;  
overflow: hidden;
}
.wc-timeline-product .btn-qty::-webkit-inner-spin-button, 
.wc-timeline-product .btn-qty::-webkit-outer-spin-button
{ 
-webkit-appearance: none !important;
margin: 0 !important;
display:none !important;   
}
.wc-timeline-modal-cover.opened
{	
display: block;
opacity: 1;	
}
.wc-timeline-modal-cover-container:not(.opened)
{
pointer-events:none;
}
.wc-timeline-checkout-upsell
{
font-size:var(--base_font_size);
}
.wc-timeline-modal-cover-container.small
{
width:550px;
}
.wc-timeline-modal-cover-container
{
height: 100%;  
width: 800px;
max-width: 100%;
transform: translate3D(100%,0,0);
-webkit-transform: translate3D(100%,0,0);   
top: 0;
font-size:var(--base_font_size);
position: fixed;
right: 0;
z-index: 19999;
display: flex;
flex-flow: column;
justify-content: flex-start;  
opacity:0;
transition:500ms ease all;
}
.wc-timeline-product-price.currency-before,
.shipping-bar-plugin.currency-before .wc-timeline-product-price
{
display:inline-flex;
flex-flow:row-reverse;
align-items: baseline;
}
.wc-timeline-product-price.currency-before .currency,
.shipping-bar-plugin.currency-before .wc-timeline-product-price .currency
{
margin-left:0px;
margin-right:2px;
}
.wc-timeline-modal-cover-container.opened
{
transform: translate3D(0,0,0);
-webkit-transform: translate3D(0,0,0);
opacity: 1;	
}
.wc-timeline-container-shop-header
{     
height:90px;   
width: calc( 100% + 90px );  
background-color: rgba(0,0,0,.015);    
border-bottom: 1px solid rgba(0,0,0,.03);
left: -90px;
position:relative;
}
.wc-timeline-modal-cover-container.logo .wc-timeline-container-shop-header
{   
background:transparent;
}
.wc-timeline-modal-cover-container.logo .wc-timeline-container-shop-header
{
border-bottom:none;
}
.wc-timeline-container-header-text
{
text-align:right;
padding: 25px 35px;
}
.wc-timeline-container-header-image img
{
height:45px;
padding-right: 35px;
}
.wc-timeline-container-close-icon
{	
font-size: 30px;
font-family: Arial;    
cursor: pointer;
width: 90px;
height: 100%;   
line-height: 90px;
color:var(--upsell-modal-close-text);
background-color: var(--upsell-modal-close);
}
.wc-timeline-empty-modal
{		
max-width: 500px;
width: 70%;
margin: 0 auto;
overflow: hidden;
padding: 0px 20px;
}
.wc-timeline-empty-modal .empty-icon
{
font-size:150px;   
opacity:0.2;
}
.wc-footer-subtotal .discounted-total
{
font-size: 12px;
opacity: 0.6;
margin-left: 5px;
display:flex;
margin-right:3px;
}
.wc-timeline-empty-modal a
{
margin-top:30px;
text-decoration:none;
}
.wc-timeline-empty-modal .wc-timeline-button,
.wc-timeline-checkout-button
{
width: 100%;      
height: 65px;
border-radius:5px;	
font-size:0.9em;
font-weight:700;
}
.wc-timeline-empty-modal .heading
{		
font-size: 0.8em;
font-weight: 900;
opacity: .5;
margin-bottom:20px;
}
.wc-timeline-empty-modal .fulltext
{
margin: 10px 0;
font-size: 1.7em;
font-weight: 900;
}
.wc-timeline-empty-modal .sub-heading
{
max-width: 300px;
}
.wc-timeline-product .image,
.wc-timeline-product .options
{
height: 90px;
}
.wc-timeline-product.upsell,
.wc-timeline-product.upsell .heading
{
height:auto;
}
.wc-timeline-product.upsell .heading,
.wc-timeline-product.upsell .options
{
align-self:stretch;
}
.wc-timeline-product.upsell .heading
{
padding:0px;   
}
.wc-timeline-product.upsell .image img:not(.loader)
{
max-height:90px;
}
.wc-timeline-product .options,
.wc-timeline-product .heading
{	
justify-content:space-between;	
}
.cart-collaterals .wc-timeline-cart-upsell
{
float:left;
width:46%;
}
.wc-timeline-cart-upsell > .wc-timeline-product.upsell
{
margin:0px 0px 15px 0px;
width:100%;
}
.cart-collaterals .wc-proceed-to-checkout .wc-timeline-cart-upsell
{
float:none;
width:100%;
}
.wc-timeline-product .image
{    
width: calc( 90px * var(--modal-cart-image-ratio ) );    
padding: 5px;
margin-right: 10px;
display:flex;
position:relative;
}
.wc-timeline-product .image .loader
{
position:absolute;
height:50%;
width:auto;
left:50%;
z-index:9;
top:50%;
transform:translate( -50%, -50% );    
}
.wc-timeline-product .image img:not(.loader)
{	
height:100%;
border-radius:5px;
width:100%;
object-fit:cover;
margin: 0 auto;
}
.wc-timeline-product
{	
width: 100%;  
padding: 10px 25px; 
}
.wc-timeline-product:not(.upsell):hover
{
background-color:rgba(0,0,0,0.02);
}
.wc-timeline-product .options
{	
padding: 10px 0;
align-items: flex-end;
justify-content: space-between;
flex-shrink:0;	
}
.magic {
display:inline-block;  
position:relative;
--r:18px;
}
.footer-shipping-row
{
font-size:0.8em;
}
.magic:before {
content:"";
position:absolute;
top:calc(50% - var(--r));
left:calc(50% - var(--r));
width:calc(2*var(--r));
height:calc(2*var(--r));
border-radius:50%;
border:solid var(--shipping_bar_success_background) var(--r);
transform:scale(0);
box-sizing:border-box;
}
.magic.activated::before {
border-width:0;
transform:scale(1);
transition:transform 0.5s, border-width 0.5s 0.5s;
}
.magic::after,
.magic i::after{
content:"";
position:absolute;
width: calc(4*var(--r));
height:calc(4*var(--r));
left:calc(50% - 2*var(--r));
top: calc(50% - 2*var(--r));
--c1:radial-gradient(circle,red 50%   ,transparent 60%);
--c2:radial-gradient(circle,var(--shipping_bar_success_background) 50%,transparent 60%);
background:   
var(--c1),var(--c1),var(--c1),var(--c1),   
var(--c2),var(--c2),var(--c2),var(--c2); 
background-size:calc(var(--r)/3) calc(var(--r)/3); 
background-position:
calc(50% - var(--r)) calc(50% - var(--r)),
calc(50% + var(--r)) calc(50% - var(--r)),
calc(50% - var(--r)) calc(50% + var(--r)),
calc(50% + var(--r)) calc(50% + var(--r)),
calc(50% +  0px) calc(50% + var(--r)*1.414),
calc(50% + var(--r)*1.414) calc(50% +  0px),
calc(50% - var(--r)*1.414) calc(50% +  0px),
calc(50% +  0px) calc(50% - var(--r)*1.414);
background-repeat:no-repeat;
transform:scale(0);
}
.magic i::after {
background-size:calc(var(--r)/5) calc(var(--r)/5);
transform:rotate(55deg) scale(0);
}
.magic.activated:after {
transform:scale(1);
opacity:0;
background-size:0 0;
transition:
transform 0.5s 0.5s,
opacity 0.4s 0.9s,
background-size 0.5s 0.9s;
}
.magic.activated i:after {
transform:rotate(55deg) scale(1);
opacity:0;
background-size:0 0;
transition:
transform 0.5s 0.5s,
opacity 0.4s 0.9s,
background-size 0.5s 0.9s;
}
.j-upsellator-discounted
{
font-size:0.7em;
text-decoration: line-through;
margin-top:-5px;
}
.wc-timeline-remove-product:hover,
.wc-timeline-product .qty-change:hover
{
background-color: var(--font-color);
color:var(--modal-bg-color);
}
.wc-timeline-remove-product
{
cursor: pointer;
font-size: 18px;
height: 25px;
width: 25px; 
border-radius:50%;
line-height: 25px;   
}
.wc-timeline-product-data
{
flex-grow:1;
flex-shrink:1;
}
.wc-timeline-product .discounted
{
position:absolute;
font-size: 0.55em;
font-weight:bold;
padding:2px 8px;
bottom:2px;
line-height: 12px;
}
.wc-timeline-product .heading
{  
width: calc(100% - 150px);
padding: 10px 0;
line-height:18px;  
min-height:90px;
}
.prodotto-carrello-info
{
flex-flow: row;
flex-grow: 1;
}
.wc-timeline-product .qty-change 
{
cursor: pointer;
width: 20px;
line-height: 20px;
font-family: serif;
font-weight: 100;
flex-shrink: 0;
font-size: 13px;
border-radius: 50%;
}    
.wc-timeline-product .btn-qty 
{
height: 100%;    
border: none !important;    
background: 0 0 !important;  
width:25px !important; 
font-size: 14px !important; 
font-weight: 700;
pointer-events: none;
padding:0px !important; 
box-shadow: none !important; 
margin:0 !important;
-moz-appearance:textfield;
}
.wc-timeline-remove-product,
.wc-timeline-product .qty,
.wc-timeline-product .qty-change
{
letter-spacing:0px;
}
.wc-timeline-product .qty
{
height: 1.8em;
width: 1.8em; 
position: absolute;    
font-weight: 700;
font-size: 0.7em;
right: 2px;
top: 2px;
border-radius: 50%;
z-index: 99;
}
.wc-timeline-footer
{	  
padding: 15px 30px;
width: 100%;   
border-top: 1px solid rgba(0,0,0,.03);
background-color: rgba(0,0,0,.015);
max-width: 100% !important;
margin: 0px !important;
}
.wc-timeline-footer .total
{
width:100%;
padding-bottom:10px;
}
.shipping-bar-plugin 
{   
border-bottom:1px solid rgba(0,0,0,.03);
padding: 30px 0 20px 0;
height:105px;
}
.wcjfw-shipping-bar 
{
width: 70%;
max-width:400px;  
left:-16px;
margin: 0 auto;      
border-radius: 10px;
background-color: var(--shipping_bar_bar_background_empty);
}
.shipping-progress-bar.active
{
background-color:var(--shipping_bar_bar_background);
}
.wcjfw-shipping-bar .shipping-icon
{
position:absolute;
top:50%; 
transform:translateY( -50% );
border-radius:50%;
background:var(--shipping_bar_bar_background_empty);    
}
.wcjfw-shipping-bar .shipping-icon
{
width:32px;
height:32px;
right:-32px;  
line-height:30px;
font-size:16px;
}
.wcjfw-shipping-bar.line .shipping-icon
{   
right:-15px; 
}
.wcjfw-shipping-bar.line2 .shipping-icon
{
background:transparent;
}
.wcjfw-shipping-bar.line2 .shipping-icon i
{
background:transparent;
opacity:0.2;
}
.shipping-bar-plugin.success .wcjfw-shipping-bar.line2 .shipping-icon i
{
color:var(--shipping_bar_success_background);
opacity:1;
background:transparent;  
}
.shipping-progress-bar.success,
.shipping-bar-plugin.success .wcjfw-shipping-bar:before,
.shipping-bar-plugin.success .wcjfw-shipping-bar.line .shipping-icon
{
background-color:var(--shipping_bar_success_background);
color:White;   
}
.shipping-bar-plugin.success .wcjfw-shipping-bar .shipping-icon
{
border:2px solid var(--modal-bg-color);
width:34px;
height:34px;
}
.shipping-bar-text
{   
margin-top: 15px;
max-width: 300px;
font-size: 0.95em;
line-height: 1.2em;   
}
.wc-timeline-footer-subtotal-text
{
margin-right:10px;
}
.wc-timeline-footer-items-count
{
font-size:1.45em;    
}
.items-count-text
{
font-size:10px;
line-height:10px;
padding-left:7px;
}
.shipping-bar-text .wc-timeline-product-price
{
display:inline-block;
}
.wcjfw-shipping-bar.line:before,
.wcjfw-shipping-bar.line .shipping-progress-bar:after
{
display:none;
}
.wcjfw-shipping-bar.line .shipping-progress-bar
{
height:18px;
border-radius:15px;
}
.shipping-progress-bar
{   
height: 2px;   
max-width: 100%;
}
.shipping-progress-bar.transition
{   
transition: width .6s ease,background-color .3s .3s ease-in;
} .wc-j-upsellator-cart-count-container
{
cursor:pointer;
position:relative;
width:auto;
display:inline-block;
padding:10px;
}
.icon-count-container
{
position:relative;
}
.wc-j-upsellator-cart-count-container.no-icon .wc-j-upsellator-cart-count
{
position:relative;
margin-left:5px;
right:unset;
top:unset;
}
.wc-j-upsellator-cart-count-container i
{
font-size:26px;
}
.wc-j-upsellator-cart-count:empty
{
display:none;
}
.wc-j-upsellator-cart-count
{
height: 15px;
width: 15px;
position: absolute;
line-height: 15px;
top: 0px;
text-align: center;
font-size: 11px;
right: -2px;
border-radius: 50%;  
background-color: var(--item-count-background);
color: var(--item-count-color);
}
@media screen and (max-width: 960px)
{
.cart-collaterals .wc-timeline-cart-upsell
{
width:100%;
margin-bottom:40px;
}
.wc-timeline-product .btn-qty,
.wc-timeline-remove-product
{
font-size:14px;
}    
.wc-timeline-modal-cover-container
{		
width:80vw;    
}
.wc-timeline-checkout-button,
.wc-timeline-empty-modal .wc-timeline-button
{		
height:60px;		
}   
.wc-nav-prev,
.wc-nav-next
{
opacity:0 !important;
}
.wc-j-items-carousel-nav
{
height:30px;
}
.wc-j-bullet
{
height:5px;
}
}
@media screen and (max-width: 620px)
{
.wc-timeline-notifications
{
height:60px;
line-height:60px;
}
.wc-timeline-container-header-image img
{
height: 40px;      
padding: 5px 20px 5px 5px;
}
.wc-timeline-checkout-button,
.wc-timeline-empty-modal .wc-timeline-button
{		
height:50px;        
margin:0 auto;		
}	
.wc-timeline-cart-notice
{
padding:10px 15px;
}
.wc-timeline-footer
{
padding:13px 20px 15px 20px;
}
.wc-timeline-inner-container .image, 
.wc-timeline-checkout-upsell .image
{
padding:2px;
}
.wc-timeline-product .out-of-stock,
.wc-timeline-product-title,
.wc-timeline-product .upsell-text,
.wc-timeline-product .upsell-heading,
.wc-timeline-product-category
{
margin-left:5px;       
}
.wc-timeline-product .upsell-text
{
max-width: calc( 100% - 40px );
}
.wc-timeline-product-category,
.wc-timeline-product .upsell-heading
{
line-height:12px;
margin-bottom:3px;
}
.wc-timeline-product.upsell
{
margin: 10px 5px;        
width: calc( 100% - 10px );
padding:10px 10px 10px 5px;
}    
.wc-timeline-product .upsell-text
{
line-height: 12px;
font-size: 11px;
}
.shipping-bar-icon,    
{
width:55px;
}   
.shipping-bar-text
{
font-size: 0.82em;
max-width: 250px;
line-height: 1em;
}
.wc-timeline-product .qty
{
top:-2px;
right:-2px;
}
.wc-timeline-product .discounted
{
font-size: 0.45em;
bottom:-2px;
}    
.wc-timeline-product-title
{
font-size: 0.9em; 
max-width: 250px;      
line-height: 0.9em;       
}
.wc-timeline-product
{		
padding: 10px 10px 10px 5px;
}
.wc-timeline-product .image
{		
margin-right:5px;
width: calc( 80px * var(--modal-cart-image-ratio ) );
height:80px;
}
.wc-timeline-container-shop-header
{
height:50px;
width:100%;
left:0;
}
.wc-timeline-container-close-icon
{
width: 50px;
line-height: 50px;
font-size: 20px;
}
.wc-timeline-product:not(.fake-product),
.wc-timeline-product .options
{
min-height:90px;
}
.wc-timeline-product .heading
{		
width:calc(100% - 100px);
min-height:80px;
padding:5px 0px;       
} 
.wc-timeline-modal-cover-container
{		
width:100vw;
}  
.wc-timeline-inner-container .wc-timeline-product.composite-child .image
{    
width:60px;
}
.wc-timeline-product.composite-child  .image, 
.wc-timeline-product.composite-child  .options, 
.wc-timeline-product.composite-child  .heading
{
height:55px;
}
.wc-timeline-product.composite-child, 
.wc-timeline-product.composite-child .options
{
height:65px;
}
}