.sytec-pack-selector {
display: grid;
gap: var(--sytec-pack-group-gap);
box-sizing: border-box;
width: 100%;
margin: 1.5rem 0;
padding: var(--sytec-pack-padding);
border-width: var(--sytec-pack-border-width);
border-style: var(--sytec-pack-border-style);
border-color: var(--sytec-pack-border-color);
border-radius: var(--sytec-pack-radius);
background: var(--sytec-pack-bg);
color: var(--sytec-pack-counter-color);
font-family: var(--sytec-pack-font-family, inherit);
container-type: inline-size;
container-name: sytec-pack;
}
.sytec-pack-selector *,
.sytec-pack-selector *::before,
.sytec-pack-selector *::after {
box-sizing: border-box;
}
.sytec-pack-selector [hidden] {
display: none !important;
}
.sytec-pack-selector__header,
.sytec-pack-selector__group-header,
.sytec-pack-selector__item-content,
.sytec-pack-selector__group-summary {
min-width: 0;
}
.sytec-pack-selector__title,
.sytec-pack-selector__group-title,
.sytec-pack-selector__item-name,
.sytec-pack-selector p {
margin-top: 0;
}
.sytec-pack-selector__title {
margin-bottom: 0;
font-size: var(--sytec-pack-group-title-size);
font-weight: var(--sytec-pack-group-title-weight);
}
.sytec-pack-selector__groups {
display: grid;
gap: var(--sytec-pack-group-gap);
}
.sytec-pack-selector__group {
display: grid;
gap: var(--sytec-pack-group-inner-gap, 1rem);
padding: var(--sytec-pack-group-padding, 0);
border-width: var(--sytec-pack-group-border-width, 0);
border-style: solid;
border-color: var(--sytec-pack-group-border-color, transparent);
border-radius: var(--sytec-pack-group-radius, 0);
}
.sytec-pack-selector__group-title {
margin-bottom: 0.35rem;
font-size: var(--sytec-pack-group-title-size);
font-weight: var(--sytec-pack-group-title-weight);
}
.sytec-pack-selector__group-description,
.sytec-pack-selector__required,
.sytec-pack-selector__maximum,
.sytec-pack-selector__variation,
.sytec-pack-selector__technical {
font-size: var(--sytec-pack-help-size);
}
.sytec-pack-selector__group-description > :last-child,
.sytec-pack-selector__required,
.sytec-pack-selector__maximum,
.sytec-pack-selector__variation,
.sytec-pack-selector__technical {
margin-bottom: 0;
}
.sytec-pack-selector__items {
display: grid;
grid-template-columns: var(--sytec-pack-items-template-mobile, repeat(var(--sytec-pack-columns-mobile, 1), minmax(0, 1fr)));
gap: var(--sytec-pack-layout-gap-mobile, var(--sytec-pack-item-gap));
}
.sytec-pack-selector__item {
display: grid;
grid-template-columns: var(--sytec-pack-item-template-mobile, auto minmax(0, 1fr) auto);
grid-template-areas: var(--sytec-pack-item-areas-mobile, "image content quantity");
gap: var(--sytec-pack-item-gap);
align-items: var(--sytec-pack-item-alignment-mobile, stretch);
min-width: 0;
padding: var(--sytec-pack-item-padding);
border: 1px solid var(--sytec-pack-item-border);
border-radius: var(--sytec-pack-item-radius);
background: var(--sytec-pack-item-bg);
}
.sytec-pack-selector__item.is-selected {
border-color: var(--sytec-pack-item-selected-border);
background: var(--sytec-pack-item-selected-bg);
}
.sytec-pack-selector__item.is-unavailable,
.sytec-pack-selector__item.is-disabled {
opacity: 0.65;
}
.sytec-pack-selector__item.has-error {
border-color: var(--sytec-pack-error-color);
}
.sytec-pack-selector__item-image {
grid-area: image;
flex-shrink: 0;
border-radius: var(--sytec-pack-image-radius, var(--sytec-pack-item-radius));
background: var(--sytec-pack-image-bg, transparent);
}
.sytec-pack-selector__item-image img {
display: block;
width: min(var(--sytec-pack-item-image-size), 96px);
max-width: 96px;
height: auto;
margin: 0;
object-fit: var(--sytec-pack-image-fit, contain);
border-radius: var(--sytec-pack-image-radius, var(--sytec-pack-item-radius));
}
.sytec-pack-selector__item-subtitle,
.sytec-pack-selector__item-short-description,
.sytec-pack-selector__item-detail {
min-width: 0;
margin: 0.35rem 0 0;
overflow-wrap: anywhere;
}
.sytec-pack-selector__item-subtitle {
margin-bottom: var(--sytec-pack-presentation-subtitle-margin-bottom, 0);
color: var(--sytec-pack-presentation-subtitle-color, var(--sytec-pack-counter-color, inherit));
font-family: var(--sytec-pack-presentation-subtitle-font-family, inherit);
font-size: var(--sytec-pack-presentation-subtitle-font-size, inherit);
font-weight: var(--sytec-pack-presentation-subtitle-font-weight, inherit);
line-height: var(--sytec-pack-presentation-subtitle-line-height, inherit);
letter-spacing: var(--sytec-pack-presentation-subtitle-letter-spacing, normal);
text-align: var(--sytec-pack-presentation-subtitle-text-align, inherit);
}
.sytec-pack-selector__item-detail {
margin-bottom: var(--sytec-pack-presentation-detail-margin-bottom, 0);
color: var(--sytec-pack-presentation-detail-color, var(--sytec-pack-counter-color, inherit));
font-family: var(--sytec-pack-presentation-detail-font-family, inherit);
font-size: var(--sytec-pack-presentation-detail-font-size, inherit);
font-weight: var(--sytec-pack-presentation-detail-font-weight, inherit);
line-height: var(--sytec-pack-presentation-detail-line-height, inherit);
letter-spacing: var(--sytec-pack-presentation-detail-letter-spacing, normal);
text-align: var(--sytec-pack-presentation-detail-text-align, inherit);
}
.sytec-pack-selector__item-short-description {
margin-bottom: var(--sytec-pack-presentation-short-description-margin-bottom, 0);
color: var(--sytec-pack-presentation-short-description-color, var(--sytec-pack-counter-color, inherit));
font-family: var(--sytec-pack-presentation-short-description-font-family, inherit);
font-size: var(--sytec-pack-presentation-short-description-font-size, inherit);
font-weight: var(--sytec-pack-presentation-short-description-font-weight, inherit);
line-height: var(--sytec-pack-presentation-short-description-line-height, inherit);
letter-spacing: var(--sytec-pack-presentation-short-description-letter-spacing, normal);
text-align: var(--sytec-pack-presentation-short-description-text-align, inherit);
}
.sytec-pack-selector__item-detail > :last-child,
.sytec-pack-selector__item-short-description > :last-child {
margin-bottom: 0;
}
.sytec-pack-selector__item-labels {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin-top: 0.5rem;
}
.sytec-pack-selector__item-label {
display: inline-flex;
max-width: 100%;
padding: 0.2em 0.55em;
border-radius: 999px;
background: var(--sytec-pack-item-selected-bg);
color: var(--sytec-pack-counter-color);
font-size: var(--sytec-pack-help-size);
overflow-wrap: anywhere;
}
.sytec-pack-selector__item-label--primary {
order: var(--sytec-pack-presentation-primary-order, 0);
margin: var(--sytec-pack-presentation-primary-spacing, 0);
padding: var(--sytec-pack-presentation-primary-padding-y, 0.2em) var(--sytec-pack-presentation-primary-padding-x, 0.55em);
border-width: var(--sytec-pack-presentation-primary-border-width, 0);
border-style: var(--sytec-pack-presentation-primary-border-style, solid);
border-color: var(--sytec-pack-presentation-primary-border-color, transparent);
border-radius: var(--sytec-pack-presentation-primary-border-radius, 999px);
background: var(--sytec-pack-presentation-primary-background, var(--sytec-pack-item-selected-bg));
color: var(--sytec-pack-presentation-primary-color, var(--sytec-pack-counter-color));
font-family: var(--sytec-pack-presentation-primary-font-family, inherit);
font-size: var(--sytec-pack-presentation-primary-font-size, var(--sytec-pack-help-size));
font-weight: var(--sytec-pack-presentation-primary-font-weight, inherit);
line-height: var(--sytec-pack-presentation-primary-line-height, inherit);
text-align: var(--sytec-pack-presentation-primary-text-align, inherit);
}
.sytec-pack-selector__item-label--secondary {
order: var(--sytec-pack-presentation-secondary-order, 0);
margin: var(--sytec-pack-presentation-secondary-spacing, 0);
padding: var(--sytec-pack-presentation-secondary-padding-y, 0.2em) var(--sytec-pack-presentation-secondary-padding-x, 0.55em);
border-width: var(--sytec-pack-presentation-secondary-border-width, 0);
border-style: var(--sytec-pack-presentation-secondary-border-style, solid);
border-color: var(--sytec-pack-presentation-secondary-border-color, transparent);
border-radius: var(--sytec-pack-presentation-secondary-border-radius, 999px);
background: var(--sytec-pack-presentation-secondary-background, var(--sytec-pack-item-selected-bg));
color: var(--sytec-pack-presentation-secondary-color, var(--sytec-pack-counter-color));
font-family: var(--sytec-pack-presentation-secondary-font-family, inherit);
font-size: var(--sytec-pack-presentation-secondary-font-size, var(--sytec-pack-help-size));
font-weight: var(--sytec-pack-presentation-secondary-font-weight, inherit);
line-height: var(--sytec-pack-presentation-secondary-line-height, inherit);
text-align: var(--sytec-pack-presentation-secondary-text-align, inherit);
}
.sytec-pack-selector__item-label--auxiliary {
order: var(--sytec-pack-presentation-auxiliary-order, 0);
margin: var(--sytec-pack-presentation-auxiliary-spacing, 0);
padding: var(--sytec-pack-presentation-auxiliary-padding-y, 0.2em) var(--sytec-pack-presentation-auxiliary-padding-x, 0.55em);
border-width: var(--sytec-pack-presentation-auxiliary-border-width, 0);
border-style: var(--sytec-pack-presentation-auxiliary-border-style, solid);
border-color: var(--sytec-pack-presentation-auxiliary-border-color, transparent);
border-radius: var(--sytec-pack-presentation-auxiliary-border-radius, 999px);
background: var(--sytec-pack-presentation-auxiliary-background, var(--sytec-pack-item-selected-bg));
color: var(--sytec-pack-presentation-auxiliary-color, var(--sytec-pack-counter-color));
font-family: var(--sytec-pack-presentation-auxiliary-font-family, inherit);
font-size: var(--sytec-pack-presentation-auxiliary-font-size, var(--sytec-pack-help-size));
font-weight: var(--sytec-pack-presentation-auxiliary-font-weight, inherit);
line-height: var(--sytec-pack-presentation-auxiliary-line-height, inherit);
text-align: var(--sytec-pack-presentation-auxiliary-text-align, inherit);
}
.sytec-pack-selector__item-content {
grid-area: content;
}
.sytec-pack-selector__item-name {
min-width: 0;
margin-bottom: 0.35rem;
white-space: normal;
word-break: normal;
overflow-wrap: break-word;
margin-bottom: var(--sytec-pack-presentation-name-margin-bottom, 0.35rem);
color: var(--sytec-pack-presentation-name-color, var(--sytec-pack-counter-color, inherit));
font-family: var(--sytec-pack-presentation-name-font-family, inherit);
font-size: var(--sytec-pack-presentation-name-font-size, var(--sytec-pack-product-name-size));
font-weight: var(--sytec-pack-presentation-name-font-weight, inherit);
line-height: var(--sytec-pack-presentation-name-line-height, inherit);
letter-spacing: var(--sytec-pack-presentation-name-letter-spacing, normal);
text-align: var(--sytec-pack-presentation-name-text-align, inherit);
}
.sytec-pack-selector__variation-select-label {
display: grid;
gap: 0.35rem;
font-size: var(--sytec-pack-help-size);
}
.sytec-pack-selector__variation-select {
width: 100%;
max-width: 100%;
font: inherit;
}
.sytec-pack-selector__variation-error {
display: block;
margin-top: 0.35rem;
color: var(--sytec-pack-error-color);
font-size: var(--sytec-pack-help-size);
font-weight: 600;
}
.sytec-pack-selector__availability {
display: inline-block;
margin-top: 0.5rem;
color: var(--sytec-pack-error-color);
font-size: var(--sytec-pack-help-size);
font-weight: 600;
}
.sytec-pack-selector__stock {
margin-top: 0.5rem;
font-size: var(--sytec-pack-help-size);
}
.sytec-pack-selector__stock > :last-child {
margin-bottom: 0;
}
.sytec-pack-selector__quantity {
display: inline-flex;
grid-area: quantity;
align-items: center;
justify-content: flex-end;
justify-self: end;
gap: 6px;
flex-shrink: 0;
white-space: nowrap;
}
.sytec-pack-selector__quantity button {
display: inline-grid;
place-items: center;
width: var(--sytec-pack-qty-size);
height: var(--sytec-pack-qty-size);
padding: 0;
border: 0;
border-radius: var(--sytec-pack-qty-radius);
background: var(--sytec-pack-button-bg);
color: var(--sytec-pack-button-text);
font: inherit;
}
.sytec-pack-selector__quantity button:disabled {
background: var(--sytec-pack-button-disabled);
cursor: not-allowed;
}
.sytec-pack-selector__quantity button:not(:disabled):hover,
.sytec-pack-selector__quantity button:not(:disabled):focus-visible {
background: var(--sytec-pack-button-hover);
}
.sytec-pack-selector__quantity output {
min-width: 24px;
text-align: center;
font-size: var(--sytec-pack-quantity-value-size);
font-weight: 600;
}
.sytec-pack-selector__summary {
display: grid;
gap: 1rem;
}
.sytec-pack-selector__free-summary {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px 20px;
min-width: 0;
padding: 14px;
border: 1px solid var(--sytec-pack-progress-bg, #dcdcde);
border-radius: var(--sytec-pack-progress-radius, 6px);
}
.sytec-pack-selector__validation-message {
grid-column: 1 / -1;
min-height: 1.4em;
margin: 0;
color: var(--sytec-pack-error-color, #b32d2e);
}
.sytec-pack-selector__validation-message.is-valid {
color: var(--sytec-pack-complete-color, #008a20);
}
@media (max-width: 600px) {
.sytec-pack-selector__free-summary {
grid-template-columns: minmax(0, 1fr);
}
}
.sytec-pack-selector__group-summary {
display: grid;
gap: 0.5rem;
font-size: var(--sytec-pack-counter-size);
}
.sytec-pack-selector__summary-values {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 0.5rem 1rem;
}
.sytec-pack-selector__progress {
width: 100%;
height: var(--sytec-pack-progress-height);
overflow: hidden;
border: 0;
border-radius: var(--sytec-pack-progress-radius);
background: var(--sytec-pack-progress-bg);
color: var(--sytec-pack-progress-value);
}
.sytec-pack-selector__progress::-webkit-progress-bar {
background: var(--sytec-pack-progress-bg);
}
.sytec-pack-selector__progress::-webkit-progress-value {
background: var(--sytec-pack-progress-value);
}
.sytec-pack-selector__progress::-moz-progress-bar {
background: var(--sytec-pack-progress-value);
}
.sytec-pack-selector__status {
font-weight: 600;
}
.sytec-pack-selector__group-summary.is-complete .sytec-pack-selector__status {
color: var(--sytec-pack-complete-color);
}
.sytec-pack-selector__group-summary.is-incomplete .sytec-pack-selector__status {
color: var(--sytec-pack-error-color);
}
.sytec-pack-selector__group.has-error .sytec-pack-selector__group-title {
color: var(--sytec-pack-error-color);
}
.sytec-pack-selector__actions {
display: flex;
gap: var(--sytec-pack-button-gap);
justify-content: flex-start;
}
.sytec-pack-selector [data-pack-element="image"] { display: var(--sytec-pack-display-image-mobile, block); }
.sytec-pack-selector [data-pack-element="title"] { display: var(--sytec-pack-display-title-mobile, block); }
.sytec-pack-selector [data-pack-element="subtitle"] { display: var(--sytec-pack-display-subtitle-mobile, block); }
.sytec-pack-selector [data-pack-element="quantity"] { display: var(--sytec-pack-display-quantity-mobile, inline-flex); }
.sytec-pack-selector [data-pack-element="progress"] { display: var(--sytec-pack-display-progress-mobile, grid); }
.sytec-pack-selector [data-pack-element="actions"] { display: var(--sytec-pack-display-actions-mobile, flex); }
.sytec-pack-selector__group.is-visually-hidden {
display: none !important;
}
.sytec-pack-selector__group[style*="--sytec-pack-group-accent"] {
border-inline-start-color: var(--sytec-pack-group-accent);
}
.sytec-pack-button {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--sytec-pack-button-height);
padding: var(--sytec-pack-button-padding-y) var(--sytec-pack-button-padding-x);
border: 1px solid transparent;
border-radius: var(--sytec-pack-button-radius);
font-family: inherit;
font-size: var(--sytec-pack-button-font-size);
font-weight: var(--sytec-pack-button-font-weight);
line-height: 1.2;
cursor: pointer;
}
.sytec-pack-button--primary {
border-color: var(--sytec-pack-button-primary-border);
background: var(--sytec-pack-button-primary-bg);
color: var(--sytec-pack-button-primary-color);
}
.sytec-pack-button--primary:not(:disabled):hover,
.sytec-pack-button--primary:not(:disabled):focus-visible {
border-color: var(--sytec-pack-button-primary-hover-border);
background: var(--sytec-pack-button-primary-hover-bg);
color: var(--sytec-pack-button-primary-hover-color);
}
.sytec-pack-button--secondary {
border-color: var(--sytec-pack-button-secondary-border);
background: var(--sytec-pack-button-secondary-bg);
color: var(--sytec-pack-button-secondary-color);
}
.sytec-pack-button--secondary:not(:disabled):hover,
.sytec-pack-button--secondary:not(:disabled):focus-visible {
border-color: var(--sytec-pack-button-secondary-hover-border);
background: var(--sytec-pack-button-secondary-hover-bg);
color: var(--sytec-pack-button-secondary-hover-color);
}
.sytec-pack-button--ghost {
box-shadow: none;
}
.sytec-pack-button:disabled {
border-color: var(--sytec-pack-button-disabled-border);
background: var(--sytec-pack-button-disabled-bg);
color: var(--sytec-pack-button-disabled-color);
opacity: var(--sytec-pack-button-disabled-opacity);
cursor: not-allowed;
}
.sytec-pack-button--icon {
width: var(--sytec-pack-button-close-size);
height: var(--sytec-pack-button-close-size);
min-height: var(--sytec-pack-button-close-size);
padding: 0;
border: 0;
border-radius: var(--sytec-pack-button-close-radius);
background: var(--sytec-pack-button-close-bg);
color: var(--sytec-pack-button-close-color);
font-size: calc(var(--sytec-pack-button-close-size) * 0.6);
}
.sytec-pack-button--icon:not(:disabled):hover,
.sytec-pack-button--icon:not(:disabled):focus-visible {
background: var(--sytec-pack-button-close-hover-bg);
color: var(--sytec-pack-button-close-hover-color);
}
.sytec-pack-add-another--item {
display: block;
margin-top: 0.65rem;
}
.sytec-pack-add-another--mini-item {
display: inline-block;
margin-inline-start: 0.35rem;
vertical-align: middle;
}
.sytec-pack-button.sytec-pack-add-another-button,
a.sytec-pack-add-another-button:link,
a.sytec-pack-add-another-button:visited {
display: inline-flex;
gap: 0.45em;
width: auto;
max-width: 100%;
height: auto;
min-height: var(--sytec-pack-add-another-height);
margin: 0;
padding-block: var(--sytec-pack-add-another-padding-y);
padding-inline: var(--sytec-pack-add-another-padding-x);
border-width: var(--sytec-pack-add-another-border-width);
border-style: solid;
border-color: var(--sytec-pack-add-another-border);
border-radius: var(--sytec-pack-add-another-radius);
background: var(--sytec-pack-add-another-bg);
color: var(--sytec-pack-add-another-color);
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: var(--sytec-pack-add-another-font-size);
font-style: normal;
font-weight: var(--sytec-pack-add-another-font-weight);
line-height: 1.2;
letter-spacing: normal;
text-align: center;
text-decoration: none;
text-transform: none;
}
.sytec-pack-button.sytec-pack-add-another-button:not(:disabled):hover,
.sytec-pack-button.sytec-pack-add-another-button:not(:disabled):focus,
.sytec-pack-button.sytec-pack-add-another-button:not(:disabled):focus-visible,
a.sytec-pack-add-another-button:active {
border-color: var(--sytec-pack-add-another-hover-border);
background: var(--sytec-pack-add-another-hover-bg);
color: var(--sytec-pack-add-another-hover-color);
text-decoration: none;
}
.sytec-pack-button.sytec-pack-add-another-button:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
.sytec-pack-loop-button.sytec-pack-button.sytec-pack-button--primary,
.sytec-pack-loop-button.sytec-pack-button.sytec-pack-button--secondary,
.woocommerce .sytec-pack-loop-button.sytec-pack-button.sytec-pack-button--primary,
.woocommerce .sytec-pack-loop-button.sytec-pack-button.sytec-pack-button--secondary,
body ul.products li.product.sytec-product-card .sytec-card-button.sytec-pack-loop-button.sytec-pack-button.sytec-pack-button--primary,
body ul.products li.product.sytec-product-card .sytec-card-button.sytec-pack-loop-button.sytec-pack-button.sytec-pack-button--secondary {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--sytec-pack-button-height);
padding: var(--sytec-pack-button-padding-y) var(--sytec-pack-button-padding-x);
border-style: solid;
border-width: 1px;
border-radius: var(--sytec-pack-button-radius);
font-family: inherit;
font-size: var(--sytec-pack-button-font-size);
font-weight: var(--sytec-pack-button-font-weight);
line-height: 1.2;
text-decoration: none;
box-shadow: none;
}
.sytec-pack-loop-button.sytec-pack-button.sytec-pack-button--primary,
.woocommerce .sytec-pack-loop-button.sytec-pack-button.sytec-pack-button--primary,
body ul.products li.product.sytec-product-card .sytec-card-button.sytec-pack-loop-button.sytec-pack-button.sytec-pack-button--primary {
border-color: var(--sytec-pack-button-primary-border);
background: var(--sytec-pack-button-primary-bg);
background-color: var(--sytec-pack-button-primary-bg);
color: var(--sytec-pack-button-primary-color);
}
.sytec-pack-loop-button.sytec-pack-button.sytec-pack-button--primary:hover,
.sytec-pack-loop-button.sytec-pack-button.sytec-pack-button--primary:focus-visible,
.woocommerce .sytec-pack-loop-button.sytec-pack-button.sytec-pack-button--primary:hover,
.woocommerce .sytec-pack-loop-button.sytec-pack-button.sytec-pack-button--primary:focus-visible,
body ul.products li.product.sytec-product-card .sytec-card-button.sytec-pack-loop-button.sytec-pack-button.sytec-pack-button--primary:hover,
body ul.products li.product.sytec-product-card .sytec-card-button.sytec-pack-loop-button.sytec-pack-button.sytec-pack-button--primary:focus-visible {
border-color: var(--sytec-pack-button-primary-hover-border);
background: var(--sytec-pack-button-primary-hover-bg);
background-color: var(--sytec-pack-button-primary-hover-bg);
color: var(--sytec-pack-button-primary-hover-color);
}
.sytec-pack-loop-button.sytec-pack-button.sytec-pack-button--secondary,
.woocommerce .sytec-pack-loop-button.sytec-pack-button.sytec-pack-button--secondary,
body ul.products li.product.sytec-product-card .sytec-card-button.sytec-pack-loop-button.sytec-pack-button.sytec-pack-button--secondary {
border-color: var(--sytec-pack-button-secondary-border);
background: var(--sytec-pack-button-secondary-bg);
background-color: var(--sytec-pack-button-secondary-bg);
color: var(--sytec-pack-button-secondary-color);
}
.sytec-pack-loop-button.sytec-pack-button.sytec-pack-button--secondary:hover,
.sytec-pack-loop-button.sytec-pack-button.sytec-pack-button--secondary:focus-visible,
.woocommerce .sytec-pack-loop-button.sytec-pack-button.sytec-pack-button--secondary:hover,
.woocommerce .sytec-pack-loop-button.sytec-pack-button.sytec-pack-button--secondary:focus-visible,
body ul.products li.product.sytec-product-card .sytec-card-button.sytec-pack-loop-button.sytec-pack-button.sytec-pack-button--secondary:hover,
body ul.products li.product.sytec-product-card .sytec-card-button.sytec-pack-loop-button.sytec-pack-button.sytec-pack-button--secondary:focus-visible {
border-color: var(--sytec-pack-button-secondary-hover-border);
background: var(--sytec-pack-button-secondary-hover-bg);
background-color: var(--sytec-pack-button-secondary-hover-bg);
color: var(--sytec-pack-button-secondary-hover-color);
}
.sytec-pack-selector__submit.is-processing {
opacity: 0.75;
cursor: wait;
}
.sytec-pack-composition ul {
margin: 0.35rem 0 0.75rem 1.25rem;
}
.sytec-pack-composition__group:last-child ul {
margin-bottom: 0;
}
.sytec-pack-selector--unavailable {
border-color: var(--sytec-pack-error-color);
}
.sytec-pack-selector__notice {
margin-bottom: 0;
color: var(--sytec-pack-error-color);
font-weight: 600;
}
.sytec-pack-popup-launcher {
display: grid;
gap: var(--sytec-pack-button-gap);
width: 100%;
}
.sytec-pack-popup-launcher [hidden] {
display: none !important;
}
.sytec-pack-popup-launcher[data-has-confirmed-selection="0"] .sytec-pack-popup-summary,
.sytec-pack-popup-launcher[data-has-confirmed-selection="0"] .sytec-pack-popup-launcher__edit,
.sytec-pack-popup-launcher[data-has-confirmed-selection="0"] [data-pack-popup-add],
.sytec-pack-popup-launcher[data-has-confirmed-selection="1"] .sytec-pack-popup-launcher__requirement,
.sytec-pack-popup-launcher[data-has-confirmed-selection="1"] .sytec-pack-popup-launcher__open {
display: none !important;
}
.sytec-pack-popup-launcher__requirement {
margin: 0;
}
.sytec-pack-popup-launcher__open,
.sytec-pack-popup-launcher__edit,
.sytec-pack-modal__confirm,
.sytec-pack-modal__cancel {
justify-self: start;
width: fit-content;
max-width: 100%;
}
.sytec-pack-popup-launcher__summary {
padding: var(--sytec-pack-item-padding);
border: 1px solid var(--sytec-pack-item-border);
border-radius: var(--sytec-pack-item-radius);
background: var(--sytec-pack-item-bg);
}
.sytec-pack-popup-summary__title {
margin-bottom: 0.75rem;
font-weight: 600;
}
.sytec-pack-popup-summary__group-title {
margin-bottom: 0.35rem;
font-weight: 600;
}
.sytec-pack-popup-summary__group ul {
margin-top: 0;
margin-bottom: 0.75rem;
padding-left: 1.25rem;
}
.sytec-pack-popup-summary__group li {
display: flex;
justify-content: space-between;
gap: 1rem;
}
.sytec-pack-popup-summary__group:last-child ul {
margin-bottom: 0;
}
body.sytec-pack-modal-open {
overflow: hidden;
}
.sytec-pack-modal[hidden],
.sytec-pack-loop-modal[hidden] {
display: none !important;
}
.sytec-pack-modal,
.sytec-pack-loop-modal {
position: fixed;
inset: 0;
z-index: 99999;
display: grid;
place-items: center;
padding: 12px;
}
.sytec-pack-modal__backdrop,
.sytec-pack-loop-modal__backdrop {
position: absolute;
inset: 0;
background: var(--sytec-pack-modal-backdrop, rgba(0, 0, 0, 0.58));
}
.sytec-pack-modal__dialog,
.sytec-pack-loop-modal__dialog {
position: relative;
z-index: 1;
container-type: inline-size;
container-name: sytec-pack-modal;
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
width: min(100%, var(--sytec-pack-modal-max-width, 1000px));
max-height: 90vh;
overflow: hidden;
border-width: var(--sytec-pack-border-width);
border-style: var(--sytec-pack-border-style);
border-color: var(--sytec-pack-border-color);
border-radius: var(--sytec-pack-modal-radius, var(--sytec-pack-radius));
background: var(--sytec-pack-modal-bg, var(--sytec-pack-bg));
color: var(--sytec-pack-counter-color);
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
}
.sytec-pack-modal__header,
.sytec-pack-modal__footer,
.sytec-pack-loop-modal__header,
.sytec-pack-loop-modal__footer {
display: flex;
align-items: center;
gap: var(--sytec-pack-button-gap);
padding: var(--sytec-pack-modal-chrome-padding-y, 16px) var(--sytec-pack-modal-padding-x, 20px);
}
.sytec-pack-modal__header,
.sytec-pack-loop-modal__header {
justify-content: space-between;
border-bottom: 1px solid var(--sytec-pack-item-border);
}
.sytec-pack-modal__header h2,
.sytec-pack-loop-modal__header h2 {
margin: 0;
font-size: var(--sytec-pack-group-title-size);
}
.sytec-pack-modal__close,
.sytec-pack-loop-modal__close {
flex: 0 0 auto;
}
.sytec-pack-modal__body,
.sytec-pack-loop-modal__body {
min-width: 0;
overflow-x: hidden;
overflow-y: auto;
padding: var(--sytec-pack-modal-body-padding, 20px);
}
.sytec-pack-modal__body .sytec-pack-selector,
.sytec-pack-loop-modal__body .sytec-pack-selector {
margin: 0;
}
.sytec-pack-modal__footer,
.sytec-pack-loop-modal__footer {
justify-content: flex-end;
border-top: 1px solid var(--sytec-pack-item-border);
}
.sytec-pack-loop-modal__notice {
margin-bottom: var(--sytec-pack-button-gap);
font-weight: var(--sytec-pack-button-font-weight);
}
.sytec-pack-loop-modal__notice.is-error {
color: var(--sytec-pack-error-color);
}
.sytec-pack-loop-modal__notice.is-success {
color: var(--sytec-pack-complete-color);
}
.sytec-pack-modal__footer,
.sytec-pack-loop-modal__footer {
display: var(--sytec-pack-display-actions-mobile, flex);
}
@container sytec-pack-modal (min-width: 600px) {
.sytec-pack-modal__footer,
.sytec-pack-loop-modal__footer {
display: var(--sytec-pack-display-actions-tablet, flex);
}
}
@media (min-width: 900px) {
@container sytec-pack-modal (min-width: 600px) {
.sytec-pack-modal__footer,
.sytec-pack-loop-modal__footer {
display: var(--sytec-pack-display-actions-desktop, flex);
}
}
}
@container sytec-pack (min-width: 600px) {
.sytec-pack-selector__items {
grid-template-columns: var(--sytec-pack-items-template-tablet, repeat(var(--sytec-pack-columns-tablet, 1), minmax(0, 1fr)));
gap: var(--sytec-pack-layout-gap-tablet, var(--sytec-pack-item-gap));
}
.sytec-pack-selector__item { grid-template-columns: var(--sytec-pack-item-template-tablet, auto minmax(0, 1fr) auto); grid-template-areas: var(--sytec-pack-item-areas-tablet, "image content quantity"); align-items: var(--sytec-pack-item-alignment-tablet, stretch); }
.sytec-pack-selector [data-pack-element="image"] { display: var(--sytec-pack-display-image-tablet, block); }
.sytec-pack-selector [data-pack-element="title"] { display: var(--sytec-pack-display-title-tablet, block); }
.sytec-pack-selector [data-pack-element="subtitle"] { display: var(--sytec-pack-display-subtitle-tablet, block); }
.sytec-pack-selector [data-pack-element="quantity"] { display: var(--sytec-pack-display-quantity-tablet, inline-flex); }
.sytec-pack-selector [data-pack-element="progress"] { display: var(--sytec-pack-display-progress-tablet, grid); }
.sytec-pack-selector [data-pack-element="actions"] { display: var(--sytec-pack-display-actions-tablet, flex); }
}
@media (min-width: 900px) {
@container sytec-pack (min-width: 600px) {
.sytec-pack-selector__items { grid-template-columns: var(--sytec-pack-items-template-desktop, repeat(var(--sytec-pack-columns-desktop, 2), minmax(0, 1fr))); gap: var(--sytec-pack-layout-gap-desktop, var(--sytec-pack-item-gap)); }
.sytec-pack-selector__item { grid-template-columns: var(--sytec-pack-item-template-desktop, auto minmax(0, 1fr) auto); grid-template-areas: var(--sytec-pack-item-areas-desktop, "image content quantity"); align-items: var(--sytec-pack-item-alignment-desktop, stretch); }
.sytec-pack-selector [data-pack-element="image"] { display: var(--sytec-pack-display-image-desktop, block); }
.sytec-pack-selector [data-pack-element="title"] { display: var(--sytec-pack-display-title-desktop, block); }
.sytec-pack-selector [data-pack-element="subtitle"] { display: var(--sytec-pack-display-subtitle-desktop, block); }
.sytec-pack-selector [data-pack-element="quantity"] { display: var(--sytec-pack-display-quantity-desktop, inline-flex); }
.sytec-pack-selector [data-pack-element="progress"] { display: var(--sytec-pack-display-progress-desktop, grid); }
.sytec-pack-selector [data-pack-element="actions"] { display: var(--sytec-pack-display-actions-desktop, flex); }
}
}
.sytec-pack-selector__group[data-pack-group-distribution="stacked"] .sytec-pack-selector__item {
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "image" "content" "quantity";
}
.sytec-pack-selector__group[data-pack-group-distribution="inline"] .sytec-pack-selector__item {
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-areas: "image content quantity";
}
@container sytec-pack (max-width: 380px) {
.sytec-pack-selector__item-image img { width: min(var(--sytec-pack-item-image-size), 72px); max-width: 72px; }
.sytec-pack-selector__item { gap: min(var(--sytec-pack-item-gap), 0.65rem); }
.sytec-pack-selector:not([data-pack-mode-mobile="vertical"]):not([data-pack-distribution-mobile="stacked"]) .sytec-pack-selector__group:not([data-pack-group-distribution="stacked"]) .sytec-pack-selector__item {
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas: "image content" "quantity quantity";
}
.sytec-pack-selector__quantity { justify-self: end; }
}
@media (max-width: 640px) {
.sytec-pack-selector {
padding: min(var(--sytec-pack-padding), 1rem);
}
.sytec-pack-modal__dialog,
.sytec-pack-loop-modal__dialog {
width: calc(100vw - 24px);
max-height: calc(100vh - 24px);
}
.sytec-pack-modal__header,
.sytec-pack-modal__body,
.sytec-pack-modal__footer,
.sytec-pack-loop-modal__header,
.sytec-pack-loop-modal__body,
.sytec-pack-loop-modal__footer {
padding: 0.85rem;
}
.sytec-pack-modal__footer,
.sytec-pack-loop-modal__footer {
flex-wrap: wrap;
}
}