#stk-mobile {
margin: 0;
padding: 0;
font-family: var(--stk-font);
color: var(--stk-text);
} .stkm-config {
padding: 0 0 40px;
margin: 0;
} #stkm-config-stage {
width: 100%;
aspect-ratio: 1/1;
background: #f5f6fa;
border-radius: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
margin: 0 0 36px 0;
padding: 0;
}
#stkm-config-placeholder {
color: var(--stk-text-muted);
font-size: 16px;
text-align: center;
padding: 20px;
} .stkm-heading {
padding: 0;
margin-bottom: 24px;
}
.stkm-heading p {
font-size: var(--stk-text-size) !important;
line-height: 1.6 !important;
font-weight: 500 !important;
} .stkm-config-section {
padding: 0;
margin-bottom: 44px;
} .stkm-config-shapes-list {
display: flex;
flex-direction: column;
border: 1px solid var(--stk-border);
border-radius: var(--stk-radius);
overflow: hidden;
}
.stkm-config-shape {
display: flex;
align-items: center;
gap: 10px;
padding: 16px;
background: var(--stk-bg);
border: none;
border-bottom: 1px solid var(--stk-border);
cursor: pointer;
}
.stkm-config-shape:last-child {
border-bottom: none;
}
.stkm-config-shape svg {
flex-shrink: 0;
color: var(--stk-heading);
}
.stkm-config-shape .stkm-badge {
margin-left: auto;
} .stkm-config-finishes {
display: flex;
gap: 10px;
}
.stkm-config-finish {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
padding: 16px;
background: var(--stk-bg);
border: 1px solid var(--stk-border);
border-radius: var(--stk-radius);
cursor: pointer;
}
.stkm-config-finish.active {
border-color: transparent;
} .stkm-config-sizes {
display: flex;
flex-direction: column;
border: 1px solid var(--stk-border);
border-radius: var(--stk-radius);
overflow: hidden;
}
.stkm-config-size {
padding: 16px;
background: var(--stk-bg);
border: none;
border-bottom: 1px solid var(--stk-border);
cursor: pointer;
text-align: left;
display: flex;
justify-content: space-between;
align-items: center;
}
.stkm-config-size:last-child {
border-bottom: none;
} .stkm-config-qty {
border: 1px solid var(--stk-border);
border-radius: var(--stk-radius);
overflow: hidden;
}
.stkm-config-qty-row {
display: grid;
grid-template-columns: 1fr 1fr auto;
align-items: center;
padding: 16px;
border-bottom: 1px solid var(--stk-border);
cursor: pointer;
}
.stkm-config-qty-row:last-child {
border-bottom: none;
} .stkm-config-price {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px;
margin: 0 16px;
background: var(--stk-bg-subtle);
border-radius: var(--stk-radius);
}
.stkm-config-price span {
font-size: var(--stk-text-size);
font-weight: 600;
color: var(--stk-text);
} .stkm-upload-main {
display: block;
width: 100%;
margin: 0;
padding: 18px;
background: var(--stk-accent);
color: var(--stk-text);
border: none;
border-radius: var(--stk-radius);
font-size: 18px;
font-weight: 900;
text-align: center;
cursor: pointer;
position: relative;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.stkm-upload-main:active {
background: var(--stk-accent-hover);
}
.stkm-upload-main input[type=file] {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}
.stkm-upload-name {
font-size: 12px;
color: var(--stk-text-muted);
text-align: center;
margin-top: 6px;
padding: 0;
}
.stkm-cart-status {
text-align: center;
margin-top: 8px;
font-size: 12px;
color: var(--stk-text-muted);
display: none;
padding: 0;
} .stkm-materials {
background: var(--stk-bg);
border: 1px solid var(--stk-border);
border-radius: var(--stk-radius);
padding: 16px;
overflow: hidden;
}
.stkm-config-section .stkm-materials {
margin: 0;
}
.stkm-materials-scroll {
display: flex;
gap: 16px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 4px;
}
.stkm-materials-scroll::-webkit-scrollbar {
height: 0;
display: none;
}
.stkm-mat {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
cursor: pointer;
min-width: 64px;
}
.stkm-mat-circle {
width: 54px;
height: 54px;
border-radius: 50%;
overflow: hidden;
border: 2px solid transparent;
transition: border-color .15s;
background: linear-gradient(135deg, #e8e8e8, #d0d0d0);
}
.stkm-mat.active .stkm-mat-circle {
border-color: var(--stk-text);
}
.stkm-mat-circle img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.stkm-mat-bar {
display: none;
}  .stkm-header {
position: sticky;
top: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 16px;
background: var(--stk-bg);
border-bottom: 1px solid #e8e8e8;
}
.stkm-header-cancel {
display: flex;
align-items: center;
gap: 4px;
font-size: 11px;
font-weight: 600;
color: var(--stk-text);
background: none;
border: none;
cursor: pointer;
padding: 0;
}
.stkm-header-cancel svg {
width: 14px;
height: 14px;
}
.stkm-header-cart svg {
width: 22px;
height: 22px;
} .stkm-editor-body {
padding: 10px 20px 80px;
} body.stkm-editor-open .site-header,
body.stkm-editor-open #masthead,
body.stkm-editor-open .site-footer,
body.stkm-editor-open .generate-back-to-top,
body.stkm-editor-open #wpadminbar {
display: none !important;
}
body.stkm-editor-open {
overflow-x: hidden;
margin: 0 !important;
padding: 0 !important;
}
body.stkm-editor-open .site-content,
body.stkm-editor-open .content-area,
body.stkm-editor-open #primary,
body.stkm-editor-open .site-main,
body.stkm-editor-open .inside-article,
body.stkm-editor-open .entry-content,
body.stkm-editor-open article,
body.stkm-editor-open .separate-containers .inside-article,
body.stkm-editor-open .site {
padding: 0 !important;
margin: 0 !important;
}
body.stkm-editor-open .separate-containers .inside-article {
padding: 0 !important;
}
.stkm-editor {
margin: 0;
padding: 0;
} .stkm-editor-body .stkm-preview {
width: calc(100% + 40px);
margin-left: -20px;
margin-right: -20px;
margin-top: -10px;
height: calc(100vw);
background: #e0e0e3;
border: none;
border-radius: 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
margin-bottom: 12px;
}
.stkm-editor-body .stkm-preview img {
width: 100%;
height: 100%;
object-fit: contain;
}
.stkm-preview-loading {
display: none;
position: absolute;
inset: 0;
background: rgba(245, 246, 250, 0.85);
align-items: center;
justify-content: center;
font-size: var(--stk-text-size);
color: #555;
font-weight: 600;
z-index: 2;
}
.stkm-preview-loading.active {
display: flex;
} .stkm-options {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 12px;
margin-bottom: 12px;
} .stkm-options .stkm-option-btn[data-drawer="shape"] {
display: none !important;
}
.stkm-option-btn {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 8px;
background: #ececef;
border: 1px solid var(--stk-border);
border-radius: var(--stk-radius);
cursor: pointer;
user-select: none;
}
.stkm-option-label {
font-size: 10px;
font-weight: 500;
color: #555;
}
.stkm-option-value {
font-size: 12px;
}
.stkm-option-arrow {
width: 14px;
height: 14px;
color: var(--stk-radio-border);
flex-shrink: 0;
} .stkm-editor-body .stkm-materials {
margin-top: 10px;
margin-bottom: 12px;
padding: 0;
border: none;
background: none;
border-radius: 0;
}
#stk-mobile #stkm-mats {
background: #fff;
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
width: calc(100% + 40px);
scrollbar-width: none;
-ms-overflow-style: none;
}
#stk-mobile #stkm-mats::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
} .stkm-editor-buttons {
display: flex;
flex-direction: row;
gap: 12px;
}
.stkm-btn-change,
.stkm-btn-message {
flex: 1;
height: 56px;
min-height: 56px;
padding: 0 16px;
margin: 0;
border-radius: 8px;
background: #ececef;
border: 1px solid transparent;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 600;
text-transform: none;
color: #111;
cursor: pointer;
line-height: 1;
position: relative;
}
.stkm-btn-change:active,
.stkm-btn-message:active {
background: #dcdce0;
}
.stkm-btn-change input[type=file] {
position: absolute;
width: 0;
height: 0;
opacity: 0;
pointer-events: none;
}
.stkm-btn-message.has-message {
border-color: var(--stk-success);
color: var(--stk-success);
}
.stkm-btn-cart {
flex: 1;
height: 56px;
min-height: 56px;
padding: 0 16px;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
background: var(--stk-success);
color: #fff;
border: none;
border-radius: 8px;
font-size: 12px;
font-weight: 800;
text-align: center;
text-transform: none;
letter-spacing: 0.2px;
line-height: 1;
cursor: pointer;
}
.stkm-btn-cart:active {
background: var(--stk-success-dark);
}
.stkm-btn-cart:disabled {
opacity: 0.4;
cursor: not-allowed;
background: #ccc;
} .stkm-msg-save {
width: 100%;
padding: 14px;
background: var(--stk-heading);
color: #fff;
border: none;
border-radius: var(--stk-radius);
font-size: var(--stk-text-size);
font-weight: 800;
cursor: pointer;
margin-top: 12px;
text-transform: uppercase;
}
.stkm-msg-save:active {
background: #000f44;
} .stkm-carousel {
position: absolute;
inset: 0;
z-index: 1;
background: var(--stk-bg-carousel);
display: none;
}
.stkm-carousel.active {
display: block;
}
.stkm-carousel-track {
position: relative;
width: 100%;
height: 100%;
}
.stkm-carousel-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 3;
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 16px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.stkm-carousel-arrow.prev { left: 8px; }
.stkm-carousel-arrow.next { right: 8px; }
.stkm-carousel-dots {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
z-index: 3;
display: flex;
gap: 6px;
}
.stkm-carousel-dot {
display: block;
min-width: 0;
min-height: 0;
-webkit-appearance: none;
appearance: none;
} .stkm-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 10000;
background: rgba(0, 0, 0, 0.4);
opacity: 0;
transition: opacity .25s;
}
.stkm-overlay.active {
display: block;
opacity: 1;
}
.stkm-drawer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 10001;
background: var(--stk-bg);
border-radius: 16px 16px 0 0;
max-height: 70vh;
overflow-y: auto;
transform: translateY(100%);
transition: transform .3s ease;
padding: 0;
}
.stkm-drawer.open {
transform: translateY(0);
}
.stkm-drawer-handle {
width: 40px;
height: 4px;
background: #ddd;
border-radius: 2px;
margin: 12px auto 0;
}
.stkm-drawer-title {
font-size: 18px;
font-weight: 800;
color: var(--stk-heading);
padding: 16px 20px 12px;
font-family: var(--stk-font-heading);
}
.stkm-drawer-content {
padding: 0 20px 24px;
}
.stkm-drawer-item {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 0;
border-bottom: 1px solid var(--stk-border-light);
cursor: pointer;
}
.stkm-drawer-item:last-child {
border-bottom: none;
}
.stkm-qty-row {
display: grid;
grid-template-columns: 1fr 1fr auto;
align-items: center;
padding: 16px 0;
border-bottom: 1px solid var(--stk-border-light);
cursor: pointer;
}
.stkm-qty-row:last-child {
border-bottom: none;
}
.stkm-custom-size {
display: none;
gap: 8px;
align-items: center;
padding: 12px 0;
}
.stkm-custom-size.visible {
display: flex;
}
.stkm-custom-size input {
width: 70px;
padding: 10px 8px;
border: 1px solid #ddd;
border-radius: var(--stk-radius);
font-size: 15px;
font-weight: 600;
text-align: center;
}
.stkm-custom-size input:focus {
outline: none;
border-color: var(--stk-text);
}
.stkm-custom-size span {
color: var(--stk-text-muted);
font-size: var(--stk-text-size);
} #stkm-drawer-message {
max-height: 50vh;
}
#stkm-drawer-message .stkm-comment-textarea {
font-size: 16px;
} .stkm-drawer-desc {
font-size: 13px;
color: #666;
line-height: 1.5;
margin: 0 0 14px;
}  #stk-mobile #stkm-size-list {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 8px !important;
padding: 0 20px 24px !important;
border: none !important;
}
#stk-mobile #stkm-size-list .stkm-drawer-item {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
height: 50px !important;
padding: 14px 8px !important;
border: none !important;
border-bottom: none !important;
border-radius: 10px !important;
background: rgba(0, 0, 0, 0.06) !important;
font-size: 13px !important;
font-weight: 500 !important;
color: #2a2a2c !important;
cursor: pointer !important;
gap: 0 !important;
position: relative !important;
overflow: hidden !important;
transition: all .18s cubic-bezier(.4, 0, .2, 1) !important;
}
#stk-mobile #stkm-size-list .stkm-drawer-item.active {
background: #2a2a2c !important;
color: #fff !important;
font-weight: 700 !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
} #stk-mobile #stkm-size-list .stkm-check {
display: none !important;
}
#stk-mobile #stkm-size-list .stkm-drawer-item-label {
color: inherit !important;
font-size: 13px !important;
font-weight: inherit !important;
white-space: nowrap !important;
} #stk-mobile #stkm-size-list .stkm-drawer-item.active .stkm-drawer-item-label {
color: #fff !important;
}
#stk-mobile #stkm-size-list .stkm-badge {
display: none !important;
} #stk-mobile #stkm-size-list .stkm-drawer-item:nth-child(2)::before {
content: "BEST" !important;
display: block !important;
position: absolute !important;
top: 6px !important;
left: -18px !important;
width: 70px !important;
padding: 2px 0 !important;
background: #16a34a !important;
color: #000 !important;
font-size: 8px !important;
font-weight: 900 !important;
letter-spacing: 1px !important;
text-align: center !important;
transform: rotate(-45deg) !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
z-index: 2 !important;
} #stk-mobile #stkm-qty-list {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
padding: 0 20px 24px !important;
border: none !important;
}
#stk-mobile #stkm-qty-list .stkm-drawer-item,
#stk-mobile #stkm-qty-list .stkm-qty-row {
display: grid !important; grid-template-columns: 65px 1fr 90px !important;
align-items: center !important;
padding: 0 12px 0 20px !important;
height: 50px !important;
border: none !important;
border-bottom: none !important;
border-radius: 10px !important;
background: rgba(0, 0, 0, 0.06) !important;
cursor: pointer !important;
transition: all .18s cubic-bezier(.4, 0, .2, 1) !important;
}
#stk-mobile #stkm-qty-list .stkm-drawer-item.active,
#stk-mobile #stkm-qty-list .stkm-qty-row.active {
background: #2a2a2c !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
} #stk-mobile #stkm-qty-list .stkm-qty-pcs {
font-size: 13px !important;
font-weight: 500 !important;
color: #2a2a2c !important;
white-space: nowrap !important;
} #stk-mobile #stkm-qty-list .stkm-qty-price {
font-size: 13px !important;
font-weight: 500 !important;
color: #2a2a2c !important;
text-align: center !important;
padding-left: 0 !important;
white-space: nowrap !important;
} #stk-mobile #stkm-qty-list .stkm-qty-row.active .stkm-qty-pcs,
#stk-mobile #stkm-qty-list .stkm-qty-row.active .stkm-qty-price,
#stk-mobile #stkm-qty-list .stkm-drawer-item.active .stkm-qty-pcs,
#stk-mobile #stkm-qty-list .stkm-drawer-item.active .stkm-qty-price {
color: #fff !important;
font-weight: 700 !important;
} #stk-mobile #stkm-qty-list .stkm-qty-disc {
justify-self: end !important;
white-space: nowrap !important;
font-size: 10px !important;
font-weight: 700 !important;
padding: 3px 8px !important;
border-radius: 6px !important;
background: #16a34a !important;
color: #fff !important;
}
#stk-mobile #stkm-qty-list .stkm-check {
display: none !important;
} #stk-mobile #stkm-finish-list {
display: flex !important;
flex-direction: row !important;
background: rgba(0, 0, 0, 0.06) !important;
border-radius: 10px !important;
padding: 0 !important;
gap: 0 !important;
margin: 0 20px 24px !important;
}
#stk-mobile #stkm-finish-list .stkm-drawer-item {
flex: 1 !important;
height: 50px !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
border: none !important;
border-bottom: none !important;
border-radius: 10px !important;
font-size: 13px !important;
font-weight: 500 !important;
cursor: pointer !important;
gap: 0 !important;
position: relative !important;
overflow: hidden !important;
background: transparent !important;
color: #2a2a2c !important;
transition: all .18s cubic-bezier(.4, 0, .2, 1) !important;
}
#stk-mobile #stkm-finish-list .stkm-drawer-item.active {
background: #2a2a2c !important;
color: #fff !important;
font-weight: 700 !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
}
#stk-mobile #stkm-finish-list .stkm-check {
display: none !important;
}
#stk-mobile #stkm-finish-list .stkm-drawer-item-label {
color: inherit !important;
font-size: 13px !important;
font-weight: inherit !important;
} #stk-mobile #stkm-finish-list .stkm-drawer-item.active .stkm-drawer-item-label {
color: #fff !important;
} #stk-mobile #stkm-finish-list .stkm-drawer-item:first-child::before {
content: "TOP" !important;
display: block !important;
position: absolute !important;
top: 6px !important;
left: -18px !important;
width: 70px !important;
padding: 2px 0 !important;
background: #f5c518 !important;
color: #000 !important;
font-size: 8px !important;
font-weight: 900 !important;
letter-spacing: 1px !important;
text-align: center !important;
transform: rotate(-45deg) !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
z-index: 2 !important;
}  #stk-mobile .stk-shapes:has(.stk-shape-card) {
display: flex !important;
background: rgba(0, 0, 0, 0.06) !important;
border-radius: 10px !important;
padding: 3px !important;
gap: 2px !important;
border: none !important;
overflow: visible !important;
flex-direction: row !important;
}
#stk-mobile .stk-shape-card {
flex: 1 !important;
border: none !important;
border-radius: 8px !important;
height: 50px !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 0 !important;
min-width: 0 !important;
cursor: pointer;
transition: all .18s cubic-bezier(.4, 0, .2, 1) !important;
background: transparent !important;
box-shadow: none !important;
}
#stk-mobile .stk-shape-card.active {
background: #2a2a2c !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
}
#stk-mobile .stk-shape-card svg {
fill: #999 !important;
color: #999 !important;
}
#stk-mobile .stk-shape-card.active svg {
fill: #fff !important;
color: #fff !important;
}
#stk-mobile .stk-shape-card-label {
display: none !important;
}
#stk-mobile .stk-shape-card-icon {
display: flex;
align-items: center;
justify-content: center;
}
#stk-mobile .stk-shape-card-icon svg {
width: 26px;
height: 26px;
}
#stk-mobile .stk-shape-card:nth-child(n+2) svg {
width: 25px !important;
height: 25px !important;
}
#stk-mobile .stk-shape-card:nth-child(3) svg,
#stk-mobile .stk-shape-card:nth-child(4) svg {
width: 22px !important;
height: 22px !important;
} #stk-mobile .stk-shape-card:first-child {
position: relative !important;
overflow: hidden !important;
}
#stk-mobile .stk-shape-card:first-child::before {
content: "TOP" !important;
display: block !important;
position: absolute !important;
top: 6px !important;
left: -18px !important;
width: 70px !important;
padding: 2px 0 !important;
background: #f5c518 !important;
color: #000 !important;
font-size: 8px !important;
font-weight: 900 !important;
letter-spacing: 1px !important;
text-align: center !important;
transform: rotate(-45deg) !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
z-index: 2 !important;
} #stk-mobile .stk-mats {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
gap: 6px !important;
padding: 4px 1px !important;
border: none !important;
background: none !important;
border-radius: 0 !important;
flex-direction: row !important;
}
#stk-mobile .stk-mat-card {
flex: 0 0 70px !important;
min-width: 70px !important;
width: 70px !important;
background: none !important;
border: none !important;
}
#stk-mobile .stk-mat-thumb {
height: auto !important;
width: auto !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border: none !important;
border-radius: 50% !important;
background: transparent !important;
}
#stk-mobile .stk-mat-thumb img {
width: 50px !important;
height: 50px !important;
min-width: 50px !important;
min-height: 50px !important;
border-radius: 50% !important;
border: 2px solid transparent !important;
transition: border-color .15s !important;
}
#stk-mobile .stk-mat-card.active .stk-mat-thumb img {
border-color: #1f1f21 !important;
}
#stk-mobile .stk-mat-card:first-child .stk-mat-thumb img {
border-color: #ccc !important;
}
#stk-mobile .stk-mat-card:first-child.active .stk-mat-thumb img {
border-color: #1f1f21 !important;
}
#stk-mobile .stk-mat-name {
padding: 12px 0 0 !important;
font-size: 11px !important;
font-weight: 700 !important;
}
#stk-mobile .stk-mat-bar,
#stk-mobile .stkm-mat-bar {
display: none !important;
} #stk-mobile .stk-mat-card[data-material="reflective"] .stk-mat-thumb::after {
width: 50px !important;
height: 50px !important;
}
#stk-mobile .stk-mat-card[data-material="reflective"] .stk-mat-thumb {
border: none !important;
border-radius: 50% !important;
width: 54px !important;
height: 54px !important;
margin: 0 auto !important;
}
#stk-mobile .stk-mat-card[data-material="reflective"].active .stk-mat-thumb {
box-shadow: 0 0 0 2px #1f1f21 !important;
} #stk-mobile .stk-finishes {
display: flex !important;
background: rgba(0, 0, 0, 0.06) !important;
border-radius: 10px !important;
padding: 0 !important;
gap: 0 !important;
}
#stk-mobile .stk-finish-btn {
flex: 1 !important;
height: 50px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border: none !important;
border-radius: 10px !important;
font-size: 13px !important;
font-weight: 500 !important;
cursor: pointer;
transition: all .18s cubic-bezier(.4, 0, .2, 1) !important;
background: transparent !important;
color: #2a2a2c !important;
}
#stk-mobile .stk-finish-btn.active {
background: #2a2a2c !important;
color: #fff !important;
font-weight: 700 !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
}
#stk-mobile .stk-finish-radio {
display: none !important;
}
#stk-mobile .stk-finish-btn:first-child {
position: relative !important;
overflow: hidden !important;
}
#stk-mobile .stk-finish-btn:first-child::before {
content: "TOP" !important;
display: block !important;
position: absolute !important;
top: 6px !important;
left: -18px !important;
width: 70px !important;
padding: 2px 0 !important;
background: #f5c518 !important;
color: #000 !important;
font-size: 8px !important;
font-weight: 900 !important;
letter-spacing: 1px !important;
text-align: center !important;
transform: rotate(-45deg) !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
z-index: 2 !important;
} #stk-mobile .stk-sizes {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 8px !important;
border: none !important;
overflow: visible !important;
flex-direction: unset !important;
}
#stk-mobile .stk-size-btn {
width: auto !important;
padding: 14px 8px !important;
background: rgba(0, 0, 0, 0.06) !important;
border: none !important;
border-radius: 10px !important;
cursor: pointer;
text-align: center !important;
transition: all .18s cubic-bezier(.4, 0, .2, 1) !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
font-size: 13px !important;
font-weight: 500 !important;
min-width: 0 !important;
white-space: nowrap !important;
overflow: hidden !important;
height: 50px !important;
position: relative !important;
}
#stk-mobile .stk-size-btn.active {
background: #2a2a2c !important;
color: #fff !important;
font-weight: 700 !important;
border: none !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
}
#stk-mobile .stk-size-btn:nth-child(2)::before {
content: "BEST" !important;
display: block !important;
position: absolute !important;
top: 6px !important;
left: -18px !important;
width: 70px !important;
padding: 2px 0 !important;
background: #16a34a !important;
color: #000 !important;
font-size: 8px !important;
font-weight: 900 !important;
letter-spacing: 1px !important;
text-align: center !important;
transform: rotate(-45deg) !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
z-index: 2 !important;
} #stk-mobile .stk-qty-table {
border: none !important;
overflow: visible !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
}
#stk-mobile .stk-qty-row {
display: grid !important;
grid-template-columns: 50px 1fr 100px !important;
align-items: center !important;
padding: 0 12px 0 20px !important;
height: 50px !important;
border-radius: 10px !important;
cursor: pointer !important;
transition: all .18s cubic-bezier(.4, 0, .2, 1) !important;
background: rgba(0, 0, 0, 0.06) !important;
border: none !important;
border-bottom: none !important;
}
#stk-mobile .stk-qty-row.active {
background: #2a2a2c !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
}
#stk-mobile .stk-qty-row.active .stk-qty-pcs,
#stk-mobile .stk-qty-row.active .stk-qty-price {
color: #fff !important;
font-weight: 700 !important;
}
#stk-mobile .stk-qty-pcs {
font-size: 13px !important;
font-weight: 500 !important;
white-space: nowrap !important;
}
#stk-mobile .stk-qty-price {
font-size: 13px !important;
font-weight: 500 !important;
text-align: center !important;
padding-left: 55px !important;
}
#stk-mobile .stk-qty-disc {
font-size: 10px !important;
font-weight: 700 !important;
padding: 3px 8px !important;
border-radius: 6px !important;
background: #16a34a !important;
color: #fff !important;
letter-spacing: 0.02em !important;
justify-self: end !important;
white-space: nowrap !important;
}
#stk-mobile .stk-qty-disc:empty {
display: none !important;
}
#stk-mobile .stk-qty-row.active .stk-qty-disc {
background: #16a34a !important;
color: #fff !important;
}
#stk-mobile .stk-qty-row[data-qty="50"] .stk-qty-disc {
background: #f5c518 !important;
color: #000 !important;
} @media (max-width: 768px) { #stk-mobile #stkm-config {
padding-top: 0;
padding-left: 20px;
padding-right: 20px;
} #stk-mobile #stkm-config-stage {
margin-left: -20px !important;
margin-right: -20px !important;
width: calc(100% + 40px) !important;
max-width: none !important;
} #stk-mobile #stkm-config-mats {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
width: calc(100% + 40px);
scrollbar-width: none;
-ms-overflow-style: none;
}
#stk-mobile #stkm-config-mats::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
} #stk-mobile #stkm-config-shapes {
display: none !important;
} #stk-mobile .stkm-header {
background: #000;
}
#stk-mobile #stkm-back.stkm-header-cancel {
color: transparent;
font-size: 0;
width: 120px;
height: 28px;
background: url(https://vulcansticker.es/wp-content/uploads/2026/05/icon-vulcansticker-c002-e2e778.svg) no-repeat left center / contain;
filter: brightness(0) invert(1);
}
#stk-mobile #stkm-back.stkm-header-cancel svg {
display: none;
}
#stk-mobile .stkm-header-price,
#stk-mobile #stkm-total {
color: #fff;
} #stk-mobile .stkm-editor-body {
background: #fff;
} body.stkm-editor-open #stk-mobile #stkm-config {
display: none !important;
}
body.stkm-editor-open #stk-mobile #stkm-editor {
display: block !important;
position: fixed;
inset: 0;
z-index: 9999;
background: #fff;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
}