:root{--color-swatch-border-radius: 0;--color-swatch-shadow: var(--ext-shadow-precision);--color-swatch-shadow-hover: var(--ext-shadow-authority);--color-swatch-transition: var(--ext-transition-base);--color-swatch-width: 120px;--color-swatch-height: 80px;--color-swatch-gap: var(--ext-space-md);--color-display-size: 60px;--color-display-border-radius: 0;--color-modal-width: 420px;--color-modal-border-radius: 0;--color-modal-shadow: var(--ext-shadow-expertise);--color-modal-backdrop: rgba(34, 31, 31, .8);--color-swatch-font-size: 1.2rem;--color-swatch-font-weight: 500;--color-swatch-line-height: 1.4;--color-swatch-animation-duration: var(--ext-duration-normal);--color-swatch-animation-ease: var(--ext-ease-certainty)}.color-swatch-list{margin:var(--ext-space-xl) 0}.color-swatch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--color-swatch-width),1fr));gap:var(--color-swatch-gap);padding:var(--ext-space-lg);background:var(--ext-color-surface-subtle);border:var(--ext-border-width-default) solid var(--ext-color-border-default);border-radius:var(--color-swatch-border-radius);box-shadow:var(--color-swatch-shadow)}.color-swatch-item{display:block;width:100%;height:var(--color-swatch-height);background:var(--ext-color-white);border:var(--ext-border-width-default) solid var(--ext-color-border-default);border-radius:var(--color-swatch-border-radius);cursor:pointer;position:relative;overflow:hidden;transition:var(--color-swatch-transition);box-shadow:var(--color-swatch-shadow);text-decoration:none;color:inherit}.color-swatch-item:before{content:"";display:block;width:100%;height:50%;background-color:var(--color-swatch-hex, #f0f0f0);border-bottom:var(--ext-border-width-thin) solid var(--ext-color-border-default);transition:var(--color-swatch-transition)}.color-swatch-item:hover{transform:translateY(-2px);box-shadow:var(--color-swatch-shadow-hover);border-color:var(--ext-color-adheseal-red)}.color-swatch-item:hover:before{opacity:.9}.color-swatch-item:focus-visible{outline:2px solid var(--ext-color-adheseal-red);outline-offset:2px;box-shadow:0 0 0 4px #ea1f271a}.color-swatch-item.selected{border-color:var(--ext-color-adheseal-red);box-shadow:var(--color-swatch-shadow-hover);transform:translateY(-1px)}.color-swatch-item.selected:after{content:"";position:absolute;top:4px;right:4px;width:16px;height:16px;background:var(--ext-color-adheseal-red);border-radius:50%;z-index:2}.color-selection-indicator{position:absolute;top:4px;right:4px;width:16px;height:16px;border:2px solid var(--ext-color-white);border-radius:50%;background:transparent;z-index:1;transition:var(--color-swatch-transition)}.color-swatch-item.selected .color-selection-indicator{background:var(--ext-color-adheseal-red);box-shadow:0 0 0 2px var(--ext-color-white)}.color-finish-indicator{position:absolute;top:4px;left:4px;background:var(--ext-color-adheseal-black);color:var(--ext-color-white);font-size:.8rem;font-weight:600;padding:2px 6px;border-radius:0;text-transform:uppercase;letter-spacing:.05em;z-index:2}.color-finish-indicator.matte{background:var(--ext-color-neutral-600)}.color-finish-indicator.gloss{background:var(--ext-color-adheseal-red)}.color-finish-indicator.satin{background:var(--ext-color-industrial-blue)}.color-info-section{padding:var(--ext-space-xs) var(--ext-space-sm);height:50%;display:flex;flex-direction:column;justify-content:center;background:var(--ext-color-white)}.color-info-name{margin-bottom:2px}.color-swatch-name{font-size:var(--color-swatch-font-size);font-weight:var(--color-swatch-font-weight);line-height:var(--color-swatch-line-height);color:var(--ext-color-text-heading);display:block;text-transform:capitalize;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.color-info-details{display:flex;align-items:center;gap:var(--ext-space-xs)}.color-swatch-hex{font-size:1rem;font-weight:400;color:var(--ext-color-text-subtle);font-family:monospace}.color-modal{position:fixed;top:0;left:0;width:100%;height:100%;z-index:var(--ext-z-index-modal);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity var(--color-swatch-animation-duration) var(--color-swatch-animation-ease),visibility var(--color-swatch-animation-duration) var(--color-swatch-animation-ease)}.color-modal.active{opacity:1;visibility:visible}.color-modal,.color-modal-backdrop,.color-modal-content,.color-modal-close{pointer-events:auto!important}.color-modal-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--color-modal-backdrop);cursor:pointer}.color-modal-content{position:relative;width:90%;max-width:var(--color-modal-width);max-height:90vh;background:var(--ext-color-white);border-radius:var(--color-modal-border-radius);box-shadow:var(--color-modal-shadow);overflow:hidden;transform:translateY(20px);transition:transform var(--color-swatch-animation-duration) var(--color-swatch-animation-ease);z-index:2}.color-modal.active .color-modal-content{transform:translateY(0)}.color-modal-close{position:absolute;top:var(--ext-space-md);right:var(--ext-space-md);width:40px;height:40px;background:var(--ext-color-adheseal-black);color:var(--ext-color-white);border:none;border-radius:var(--color-swatch-border-radius);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:3;transition:var(--color-swatch-transition)}.color-modal-close:hover{background:var(--ext-color-adheseal-red);transform:scale(1.05)}.color-modal-close:focus-visible{outline:2px solid var(--ext-color-adheseal-red);outline-offset:2px}.color-modal-close svg{width:20px;height:20px;fill:currentColor}.color-modal-body{display:flex;flex-direction:column;gap:var(--ext-space-md);padding:var(--ext-space-lg);padding-top:calc(var(--ext-space-lg) + 50px)}.color-modal-image{display:flex;align-items:center;justify-content:center;width:100%;margin-bottom:var(--ext-space-sm)}.color-modal-image img{width:100%;max-width:100%;height:auto;max-height:200px;object-fit:contain;border-radius:var(--color-swatch-border-radius);box-shadow:var(--color-swatch-shadow);border:var(--ext-border-width-default) solid var(--ext-color-border-default);background-color:var(--color-modal-image-bg, transparent)}.color-modal-details{width:100%}.color-modal-name{font-size:2rem;font-weight:700;color:var(--ext-color-text-heading);margin-bottom:var(--ext-space-md);text-transform:capitalize}.color-modal-info{display:flex;flex-direction:column;gap:var(--ext-space-sm)}.color-info-table{width:100%;border-collapse:collapse;margin-bottom:var(--ext-space-sm)}.color-info-table tr{border-bottom:var(--ext-border-width-thin) solid var(--ext-color-border-default)}.color-info-table tr:last-child{border-bottom:none}.color-info-label{font-weight:600;color:var(--ext-color-text-heading);padding:var(--ext-space-xs) 0;width:100px;vertical-align:top;font-size:1.3rem}.color-info-value{padding:var(--ext-space-xs) 0;color:var(--ext-color-text-body);font-size:1.3rem}.color-modal-colour-display{display:flex;align-items:center;gap:var(--ext-space-md);margin-bottom:var(--ext-space-md)}.color-display{width:var(--color-display-size);height:var(--color-display-size);border-radius:var(--color-display-border-radius);border:var(--ext-border-width-default) solid var(--ext-color-border-default);box-shadow:var(--color-swatch-shadow);flex-shrink:0}.color-hex-copy{display:flex;flex-direction:column;gap:var(--ext-space-xs)}.color-hex{font-family:monospace;font-size:1.4rem;font-weight:600;color:var(--ext-color-text-heading)}.color-hex-copy-btn{background:var(--ext-color-adheseal-red);color:var(--ext-color-white);border:none;border-radius:var(--color-swatch-border-radius);padding:var(--ext-space-xs) var(--ext-space-md);font-size:1.2rem;font-weight:500;cursor:pointer;transition:var(--color-swatch-transition);text-transform:uppercase;letter-spacing:.05em}.color-hex-copy-btn:hover{background:var(--ext-color-adheseal-black);transform:translateY(-1px)}.color-hex-copy-btn:focus-visible{outline:2px solid var(--ext-color-adheseal-red);outline-offset:2px}.color-hex-copy-btn.copied{background:var(--ext-color-success)}.color-modal-ral,.color-modal-finish{font-size:1.4rem;color:var(--ext-color-text-body);padding:var(--ext-space-xs) 0;border-bottom:var(--ext-border-width-thin) solid var(--ext-color-border-default)}.color-modal-ral strong,.color-modal-finish strong{color:var(--ext-color-text-heading);font-weight:600;display:inline-block;min-width:80px}.color-modal-description{margin-top:var(--ext-space-md);padding:var(--ext-space-md);background:var(--ext-color-surface-subtle);border-radius:var(--color-swatch-border-radius);border:var(--ext-border-width-thin) solid var(--ext-color-border-default)}.description-title{font-size:1.4rem;font-weight:600;color:var(--ext-color-text-heading);margin-bottom:var(--ext-space-xs);text-transform:uppercase;letter-spacing:.05em}.color-modal-description p{font-size:1.4rem;line-height:1.6;color:var(--ext-color-text-body);margin:0;font-weight:400}@media (max-width: 768px){.color-swatch-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:var(--ext-space-sm);padding:var(--ext-space-md)}.color-swatch-item{height:70px}.color-swatch-name{font-size:1rem}.color-swatch-hex{font-size:.9rem}.color-modal-content{width:95%;max-width:none}.color-modal-body{padding:var(--ext-space-md);padding-top:calc(var(--ext-space-md) + 50px);gap:var(--ext-space-sm)}.color-modal-image{margin-bottom:var(--ext-space-xs)}.color-modal-image img{max-height:180px}.color-modal-name{font-size:1.8rem;text-align:center;margin-bottom:var(--ext-space-sm)}.color-info-label{width:90px;font-size:1.2rem}.color-info-value,.color-hex{font-size:1.2rem}.description-title{font-size:1.3rem}.color-modal-description{padding:var(--ext-space-sm);margin-top:var(--ext-space-sm)}.color-modal-description p{font-size:1.3rem}}@media (max-width: 480px){.color-swatch-grid{grid-template-columns:repeat(2,1fr);gap:var(--ext-space-xs);padding:var(--ext-space-sm)}.color-swatch-item{height:60px}.color-info-section{padding:var(--ext-space-xs)}.color-swatch-name{font-size:.9rem}.color-swatch-hex{font-size:.8rem}.color-finish-indicator{font-size:.7rem;padding:1px 4px}.color-modal-body{padding:var(--ext-space-lg);padding-top:calc(var(--ext-space-lg) + 50px);gap:var(--ext-space-md)}.color-modal-image{margin-bottom:var(--ext-space-sm)}.color-modal-image img{max-height:200px}.color-modal-name{font-size:1.8rem;text-align:center}.color-info-label{width:80px;font-size:1.2rem}.color-hex,.color-modal-ral,.color-modal-finish{font-size:1.2rem}.description-title{font-size:1.3rem}.color-modal-description{padding:var(--ext-space-md)}.color-modal-description p{font-size:1.3rem}}@media (prefers-reduced-motion: reduce){.color-swatch-item,.color-modal-content,.color-modal-close,.color-hex-copy-btn{transition:none}.color-swatch-item:hover,.color-modal-close:hover{transform:none}}@media (prefers-contrast: high){.color-swatch-item{border-width:2px}.color-modal-content{border:2px solid var(--ext-color-adheseal-black)}.color-display{border-width:2px}}@media print{.color-modal{display:none}.color-swatch-item{break-inside:avoid;box-shadow:none;border:1px solid #000}.color-swatch-item:before{height:40px}}.color-swatch-loading{opacity:.6;pointer-events:none}.color-swatch-error{border-color:var(--ext-color-danger)}.color-swatch-error:before{background:repeating-linear-gradient(45deg,var(--ext-color-danger),var(--ext-color-danger) 10px,transparent 10px,transparent 20px)}.color-swatch-fade-in{animation:colorSwatchFadeIn var(--color-swatch-animation-duration) var(--color-swatch-animation-ease)}@keyframes colorSwatchFadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
/*# sourceMappingURL=/cdn/shop/t/25/assets/component-color-swatch.css.map */