.products .product .plfcqa-quick-add {
position: relative;
z-index: 12;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
margin: 5px 0;
}
.products .product .plfcqa-attribute {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
margin-top: 5px;
}
.products .product .plfcqa-attribute:first-child {
margin-top: 0;
}
.products .product .plfcqa-attribute__label {
margin-bottom: 4px;
color: #777;
font-size: 9px;
font-weight: 700;
line-height: 1.2;
letter-spacing: .06em;
text-transform: uppercase;
}
.products .product .plfcqa-colours__list,
.products .product .plfcqa-options__list {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 5px;
width: 100%;
}
.products .product .plfcqa-choice {
position: relative;
box-sizing: border-box;
margin: 0;
box-shadow: none;
font-family: inherit;
cursor: pointer;
transition: border-color .15s ease, background-color .15s ease, color .15s ease, opacity .15s ease, box-shadow .15s ease;
}
.products .product .plfcqa-colour {
display: flex;
flex: 0 0 50px;
flex-direction: column;
align-items: center;
justify-content: flex-start;
min-width: 0;
padding: 3px 3px 4px;
overflow: hidden;
border: 1px solid rgba(19, 22, 11, .18);
border-radius: 4px;
background: #fff;
color: rgba(19, 22, 11, .78);
}
.products .product .plfcqa-colour__image {
display: block;
width: 42px;
height: 42px;
overflow: hidden;
border-radius: 2px;
background: #f7f7f7;
}
.products .product .plfcqa-colour__thumb {
display: block;
width: 100%;
height: 100%;
margin: 0;
object-fit: contain;
}
.products .product .plfcqa-colour__placeholder {
display: block;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #f4f4f4 0 48%, #ddd 49% 51%, #f4f4f4 52% 100%);
}
.products .product .plfcqa-colour__label {
display: block;
width: 100%;
margin-top: 3px;
overflow: hidden;
font-size: 8.5px;
font-weight: 600;
line-height: 1.15;
text-overflow: ellipsis;
white-space: nowrap;
}
.products .product .plfcqa-option {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 34px;
min-height: 24px;
padding: 2px 7px;
border: 1px solid rgba(19, 22, 11, .18);
border-radius: 4px;
background: #fff;
color: rgba(19, 22, 11, .78);
font-size: 10.5px;
font-weight: 500;
line-height: 1;
}
@media (hover: hover) {
.products .product .plfcqa-choice:not(:disabled):hover {
border-color: var(--site-accent-color, #ff7300);
color: var(--site-accent-color, #d85f00);
}
}
.products .product .plfcqa-choice:focus-visible,
.products .product .plfcqa-add:focus-visible {
outline: 2px solid var(--site-accent-color, #ff7300);
outline-offset: 2px;
}
.products .product .plfcqa-choice.is-selected {
border-color: var(--site-heading-color, #13160b);
box-shadow: 0 0 0 1px var(--site-heading-color, #13160b);
}
.products .product .plfcqa-option.is-selected {
background: var(--site-heading-color, #13160b);
color: #fff;
}
.products .product .plfcqa-choice:disabled,
.products .product .plfcqa-choice.is-unavailable {
cursor: not-allowed;
opacity: .28;
}
.products .product .plfcqa-quick-add.is-loading .plfcqa-choice:disabled {
cursor: wait;
opacity: .55;
}
.products .product .plfcqa-add {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 136px;
min-height: 34px;
margin: 8px auto 0;
padding: 7px 16px;
border: 0;
border-radius: 5px;
background: var(--site-accent-color, #ff7300);
box-shadow: none;
color: var(--site-heading-color, #13160b);
font-family: inherit;
font-size: 12px;
font-weight: 600;
line-height: 1.1;
cursor: pointer;
transition: background-color .15s ease, color .15s ease, opacity .15s ease;
}
.products .product .plfcqa-add:disabled {
background: #eee;
color: #999;
cursor: not-allowed;
}
.products .product .plfcqa-add.is-loading {
cursor: progress;
opacity: .62;
}
.products .product .plfcqa-add.is-added {
background: var(--site-heading-color, #13160b);
color: #fff;
}
.products .product .plfcqa-quick-add .added_to_cart {
display: none !important;
}
.products .product .plfcqa-feedback:not(.is-error) {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.products .product .plfcqa-feedback.is-error {
margin-top: 3px;
color: #a32920;
font-size: 10.5px;
line-height: 1.35;
text-align: center;
}
@media (max-width: 575px) {
.products .product .plfcqa-colours__list,
.products .product .plfcqa-options__list {
gap: 4px;
}
.products .product .plfcqa-colour {
flex-basis: 45px;
padding: 2px 2px 3px;
}
.products .product .plfcqa-colour__image {
width: 39px;
height: 39px;
}
.products .product .plfcqa-colour__label {
font-size: 8px;
}
.products .product .plfcqa-option {
min-width: 32px;
min-height: 23px;
padding-right: 6px;
padding-left: 6px;
font-size: 10px;
}
.products .product .plfcqa-add {
min-height: 32px;
margin-top: 7px;
font-size: 11px;
}
}
@media (prefers-reduced-motion: reduce) {
.products .product .plfcqa-choice,
.products .product .plfcqa-add {
transition: none;
}
}