.w3s-color-enhanced .w3s-color-overflow { display: none !important; }
.w3s-color-controls { clear: both; width: 100%; margin-top: 16px; }
.w3s-color-summary { margin: 4px 0 12px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
/* Match the shop's compact, dark pill buttons. */
.w3s-color-controls .w3s-color-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; width: 100%; max-width: 100%; min-height: 42px; padding: 10px 20px; border: 1px solid #373639; border-radius: 999px; background: #373639; color: #fff; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 20px; text-align: center; text-transform: none; letter-spacing: normal; white-space: normal; box-shadow: none; }
.w3s-color-controls .w3s-color-trigger:hover { border-color: #29282b; background: #29282b; color: #fff; }
.w3s-color-trigger-icon { display: block; flex: 0 0 18px; width: 18px; height: 18px; }
.w3s-color-trigger-text { min-width: 0; overflow-wrap: anywhere; }
html.w3s-color-modal-open { overflow: hidden; overflow-anchor: none; scrollbar-gutter: stable; }
.w3s-color-dialog { --w3s-accent: #00a99d; box-sizing: border-box; position: fixed; inset: 0; width: min(760px, calc(100vw - 40px)); max-width: none; max-height: calc(100dvh - 40px); margin: auto; padding: 28px; border: 0; border-radius: 14px; background: #fff; color: #252833; box-shadow: 0 24px 80px #0003; font-family: inherit; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.w3s-color-dialog::backdrop { background: rgb(20 24 30 / 45%); }
.w3s-color-dialog *, .w3s-color-dialog *::before, .w3s-color-dialog *::after { box-sizing: border-box; }
.w3s-color-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.w3s-color-dialog .w3s-color-title { margin: 0; color: inherit; font-size: 24px; font-weight: 600; line-height: 1.3; }
.w3s-color-dialog button { font-family: inherit; cursor: pointer; text-transform: none; letter-spacing: normal; }
.w3s-color-dialog .w3s-color-close { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #f5f5f5; color: inherit; font-size: 28px; line-height: 1; }
.w3s-color-dialog .w3s-color-search-label { display: block; font-size: 14px; margin-bottom: 8px; }
.w3s-color-dialog .w3s-color-search { display: block; width: 100%; height: 27px; min-height: 0; margin: 0 0 20px; padding: 2px 14px; border: 1px solid #d0d2d6; border-radius: 8px; background: #fff; color: inherit; font: inherit; font-size: 16px; line-height: 21px; }
.w3s-color-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.w3s-color-dialog .w3s-color-card { position: relative; display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: flex-start; width: 100%; min-width: 0; height: auto; padding: 7px; border: 2px solid transparent; border-radius: 8px; background: #f8f8f8; color: inherit; font-size: 13px; font-weight: 400; line-height: 1.4; text-align: center; white-space: normal; box-shadow: none; }
.w3s-color-dialog .w3s-color-card:hover { border-color: #b4bfbd; }
.w3s-color-dialog .w3s-color-card[aria-pressed="true"] { border-color: #373639; }
.w3s-color-card[aria-pressed="true"]::after { content: '✓'; position: absolute; top: -10px; right: -10px; display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: #373639; color: #fff; font-size: 15px; }
.w3s-color-image { display: block; width: 100%; height: auto; aspect-ratio: 1.25; border-radius: 4px; object-fit: cover; }
.w3s-color-name { overflow-wrap: anywhere; }
.w3s-color-price { font-size: 12px; }
.w3s-color-dialog .w3s-color-card:disabled { cursor: not-allowed; opacity: .45; }
.w3s-color-unavailable { font-size: 11px; }
.w3s-color-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 24px; padding-top: 18px; border-top: 1px solid #e7e7e7; }
.w3s-color-status { font-size: 14px; }
.w3s-color-dialog .w3s-color-done { padding: 10px 24px; min-height: 44px; border: 1px solid #a1a1aa; border-radius: 7px; background: #fff; color: inherit; font-size: 14px; }
.w3s-color-dialog [hidden] { display: none !important; }
.w3s-color-dialog :focus-visible, .w3s-color-trigger:focus-visible { outline: 3px solid var(--w3s-accent, #00a99d); outline-offset: 3px; }
@media (max-width: 600px) {
    .w3s-color-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); padding: 18px; border-radius: 10px; }
    .w3s-color-dialog .w3s-color-title { font-size: 20px; }
    .w3s-color-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
}
@media (max-width: 360px) {
    .w3s-color-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.yith-wapo-container.yith-wapo-form-style-custom .yith-wapo-block .yith-wapo-addon .yith-wapo-option div.label label {
    font-size: var(--yith-wapo-label-font-size);
    line-height: 1.1;
    margin-top: 5px;
}

#wapo-total-price-table table {
    width: 100%;
}

#wapo-total-price-table table td {
    text-align: right;
}

.w3s-color-summary-item { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; vertical-align: middle; }
.w3s-color-summary .w3s-color-summary-image { box-sizing: border-box; display: inline-block; flex: 0 0 24px; width: 24px; height: 24px; margin: 0; border: 1px solid #ddd; border-radius: 4px; object-fit: cover; }
.w3s-color-summary-name { min-width: 0; overflow-wrap: anywhere; }

/* Product-page previews: two columns on phones, independent of the popup grid. */
@media (max-width: 767px) {
    .yith-wapo-addon.yith-wapo-addon-type-label.show-popup .options-container > .options {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .yith-wapo-addon.yith-wapo-addon-type-label.show-popup .options-container > .options > .yith-wapo-option {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100%;
    }
}