.sytec-market-selector-wrap {
display: flex;
justify-content: var(--sytec-market-justify, flex-start);
width: 100%;
max-width: 100%;
min-width: 0;
}
.sytec-market-selector {
display: inline-flex;
align-items: center;
box-sizing: border-box;
width: var(--sytec-market-selector-width, auto);
max-width: 100%;
min-width: 0;
gap: var(--sytec-market-gap-desktop, 4px);
padding: 4px;
border: 1px solid var(--sytec-market-border, #dbe3ec);
border-radius: var(--sytec-market-radius, 10px);
background: var(--sytec-market-background, #f8fafc);
}
.sytec-market-selector__option {
display: inline-flex;
flex: 1 1 auto;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-width: 0;
min-height: var(--sytec-market-min-height, 36px);
max-width: 100%;
padding-block: var(--sytec-market-padding-y-desktop, 8px);
padding-inline: var(--sytec-market-padding-x-desktop, 14px);
border: 0;
border-radius: max(0px, calc(var(--sytec-market-radius, 10px) - 3px));
background: var(--sytec-market-option-background, #f8fafc);
color: var(--sytec-market-text, #334155);
font-family: inherit;
font-size: var(--sytec-market-font-size-desktop, 14px);
font-weight: 600;
line-height: 1.2;
text-align: center;
white-space: nowrap;
text-decoration: none;
transition:
background-color 0.18s ease,
color 0.18s ease,
box-shadow 0.18s ease;
}
.sytec-market-selector__option:hover {
background: var(--sytec-market-hover, #eaf0ff);
color: var(--sytec-market-text, #334155);
text-decoration: none;
}
.sytec-market-selector__option.is-active {
background: var(--sytec-market-active-background, #1746ff);
color: var(--sytec-market-active-text, #ffffff);
box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}
.sytec-market-selector__option.is-active:hover {
background: var(--sytec-market-active-background, #1746ff);
color: var(--sytec-market-active-text, #ffffff);
}
.sytec-market-selector__option:focus-visible {
outline: 2px solid var(--sytec-market-active-background, #1746ff);
outline-offset: 2px;
}
@media (max-width: 1024px) {
.sytec-market-selector {
gap: var(--sytec-market-gap-tablet, 3px);
}
.sytec-market-selector__option {
padding-block: var(--sytec-market-padding-y-tablet, 7px);
padding-inline: var(--sytec-market-padding-x-tablet, 10px);
font-size: var(--sytec-market-font-size-tablet, 13px);
}
}
@media (max-width: 767px) {
.sytec-market-selector {
gap: var(--sytec-market-gap-mobile, 2px);
}
.sytec-market-selector__option {
padding-block: var(--sytec-market-padding-y-mobile, 6px);
padding-inline: var(--sytec-market-padding-x-mobile, 6px);
font-size: var(--sytec-market-font-size-mobile, 12px);
}
}
.sytec-market-table-card {
width: 100%;
margin-top: var(--sytec-market-table-vertical-gap, 8px);
overflow: hidden;
border: 1px solid var(--sytec-market-table-border, #dbe3ec);
border-radius: var(--sytec-market-table-radius, 8px);
background: var(--sytec-market-table-background, #fff);
container-type: inline-size;
}
.sytec-market-table-card table {
width: 100%;
margin: 0;
border-collapse: collapse;
table-layout: fixed;
}
.sytec-market-table-card th,
.sytec-market-table-card td {
width: 50%;
padding: var(--sytec-market-table-padding-y, 7px) var(--sytec-market-table-padding-x, 6px);
text-align: center;
vertical-align: middle;
border: 0;
border-right: 1px solid var(--sytec-market-table-separator, #e5e7eb);
border-bottom: 1px solid var(--sytec-market-table-separator, #e5e7eb);
line-height: 1.2;
}
.sytec-market-table-card th:last-child,
.sytec-market-table-card td:last-child {
border-right: 0;
}
.sytec-market-table-card tbody tr:last-child td {
border-bottom: 0;
}
.sytec-market-table-card th {
font-size: 10px;
font-weight: 700;
white-space: nowrap;
background: var(--sytec-market-table-header-background, #f8fafc);
color: var(--sytec-market-table-header-text, inherit);
}
.sytec-market-table-card td {
font-size: var(--sytec-market-table-quantity-size, 11px);
font-weight: 600;
color: var(--sytec-market-table-row-text, inherit);
}
.sytec-market-table-card tbody tr:nth-child(even) td {
background: var(--sytec-market-table-row-alt-background, #fff);
}
.sytec-market-table-card tbody tr.is-applicable td {
background: var(--sytec-market-table-active-background, #eef6ff);
}
.sytec-market-table-card__quantity,
.sytec-market-table-card__price {
white-space: nowrap;
}
.sytec-market-table-card__quantity {
font-size: var(--sytec-market-table-quantity-size, 11px);
}
.sytec-market-table-card__price {
font-size: var(--sytec-market-table-price-size, 11px);
color: var(--sytec-market-table-price-color, inherit);
}
.sytec-market-table-card .woocommerce-Price-amount {
white-space: nowrap;
}
.sytec-market-savings-badge {
display: inline-flex;
align-items: center;
margin-left: 6px;
padding: 2px 5px;
border-radius: 8px;
background: var(--sytec-market-table-savings-background, #eaf7ed);
color: var(--sytec-market-table-savings-text, #075211);
font-size: 10px;
font-weight: 700;
}
@container (max-width: 420px) {
.sytec-market-table-card th,
.sytec-market-table-card td {
white-space: normal;
}
.sytec-market-savings-badge {
display: flex;
width: max-content;
max-width: 100%;
margin: 4px auto 0;
}
}
.sytec-market-wholesale-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px;
border: 1px solid #dbe3ec;
border-radius: 10px;
background: #f8fafc;
color: #075211;
} .sytec-market-is-switching {
cursor: progress;
}
.sytec-market-is-switching .sytec-market-selector {
pointer-events: none;
}
.sytec-market-selector__option.is-loading {
position: relative;
} .sytec-market-loading {
position: fixed;
inset: 0;
z-index: 999999;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
background: rgba(248, 250, 252, 0.72);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity 0.16s ease,
visibility 0.16s ease;
}
.sytec-market-loading.is-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
} .sytec-market-loading__panel {
display: flex;
align-items: center;
gap: 12px;
min-width: 190px;
padding: 14px 18px;
border: 1px solid #dbe3ec;
border-radius: 12px;
background: #fff;
box-shadow:
0 8px 30px rgba(15, 23, 42, 0.12);
color: #0f172a;
} .sytec-market-loading__spinner {
flex: 0 0 auto;
width: 22px;
height: 22px;
border: 3px solid #dbe3ec;
border-top-color: #1746ff;
border-radius: 50%;
animation: sytec-market-spin 0.7s linear infinite;
} .sytec-market-loading__text {
font-size: 14px;
font-weight: 700;
line-height: 1.3;
}
@keyframes sytec-market-spin {
to {
transform: rotate(360deg);
}
} @media (prefers-reduced-motion: reduce) {
.sytec-market-loading__spinner {
animation-duration: 1.5s;
}
.sytec-market-loading {
transition: none;
}
} .sytec-minicart-item__bottom {
grid-template-columns: minmax(0, 1fr) auto;
column-gap: 12px;
align-items: start;
}
.sytec-minicart-item__quantity-wrap {
min-width: 0;
max-width: 100%;
}
.sytec-cart-market-badge {
display: table;
margin: 0 0 5px;
padding: 3px 8px;
border: 1px solid #cbd5e1;
border-radius: 999px;
background: #f8fafc;
color: #334155;
font-size: 11px;
font-weight: 700;
line-height: 1.2;
}
.sytec-cart-market-badge--mayorista {
border-color: #bfdbfe;
background: #eff6ff;
color: #1d4ed8;
}
.sytec-cart-quantity-readonly,
.sytec-cart-context-lock {
display: block;
}
.sytec-cart-quantity-readonly {
font-weight: 600;
}
.sytec-cart-context-lock {
min-width: 0;
max-width: 100%;
margin-top: 4px;
color: #64748b;
font-size: 12px;
line-height: 1.35;
white-space: normal;
overflow-wrap: anywhere;
} .sytec-minicart .sytec-minicart-item--context-locked > .sytec-cart-context-lock {
display: block;
width: 100%;
min-width: 0;
max-width: 100%;
margin: 10px 0 0;
padding: 8px 10px;
border-radius: 6px;
background: #f8fafc;
box-sizing: border-box;
white-space: normal;
overflow-wrap: anywhere;
}