.worn-color-trigger { display: flex; width: 100%; justify-content: space-between; align-items: center; margin: 14px 0 10px; padding: 14px 16px; border: 1px solid #adc6c6; color: var(--petrol); background: #edf5f3; font: 700 12px var(--font-body); text-align: left; cursor: pointer; }
.worn-color-trigger:hover { background: #e1efeb; }
.worn-color-trigger:focus-visible, .worn-color-preview__close:focus-visible { outline: 3px solid var(--petrol); outline-offset: 3px; }
/* Keep the colour preview below the sticky site header (z-index: 100). */
.worn-color-preview { position: fixed; z-index: 90; width: 350px; max-height: calc(100dvh - 24px); overflow: auto; border: 1px solid #c5d7d7; border-radius: 4px; color: var(--navy); background: #fff; box-shadow: 0 18px 65px #092e3840; text-align: left; }
.worn-color-preview__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 17px; background: #f0f6f4; }
.worn-color-preview__header span { display: block; margin-bottom: 4px; font: 800 9px var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--petrol); }
.worn-color-preview__header h3 { margin: 0; font: 700 18px/1.2 var(--font-display); }
.worn-color-preview__close { display: grid; flex-shrink: 0; width: 36px; height: 36px; place-items: center; border: 1px solid #c4d3d0; border-radius: 50%; background: white; color: var(--navy); cursor: pointer; }
.worn-color-preview__close svg { width: 17px; height: 17px; }
.worn-color-preview__photo { background: #eaf0ef; }
.worn-color-preview__photo :is(img, canvas) { display: block; width: 100%; height: min(348px, 44dvh); object-fit: contain; }
.worn-color-preview__navigation { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 12px 17px; border-bottom: 1px solid #e1eae7; background: #f7faf9; }
.worn-color-preview__navigation > div { display: grid; gap: 3px; min-width: 116px; text-align: center; }
.worn-color-preview__navigation strong { font: 700 12px/1.3 var(--font-body); }
.worn-color-preview__navigation [data-worn-color-counter] { color: var(--muted); font: 500 11px/1.3 var(--font-body); }
.worn-color-preview__navigation button { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; padding: 0; border: 1px solid #b9cfca; border-radius: 50%; color: var(--petrol); background: #fff; font: 700 21px/1 var(--font-body); cursor: pointer; }
.worn-color-preview__navigation button:hover { background: #e8f1ed; border-color: var(--petrol); }
.worn-color-preview__navigation button:focus-visible { outline: 3px solid var(--petrol); outline-offset: 3px; }
.worn-color-preview__navigation button:disabled { opacity: .4; cursor: default; }
.worn-color-preview__details { display: grid; gap: 7px; padding: 15px 17px 18px; }
.worn-color-preview__details strong { font: 700 13px/1.4 var(--font-body); }
.worn-color-preview__details span { color: var(--petrol); font: 600 11px/1.4 var(--font-body); }
.worn-color-preview__details p { margin: 0; color: var(--muted); font: 400 11px/1.55 var(--font-body); }
.worn-color-status { margin: 8px 0; color: var(--muted); font-size: 12px; }
.worn-color-preview[hidden], .worn-color-trigger[hidden], .worn-color-status[hidden] { display: none; }
@media (max-width: 999px) {
  .worn-color-preview { position: static; width: 100%; max-height: none; margin: 12px 0; box-shadow: 0 8px 25px #092e3817; }
  .worn-color-preview__photo :is(img, canvas) { height: min(285px, 35dvh); }
  .product-options__section:has(.worn-color-preview) { scroll-margin-top: 88px; }
}

.shade-comparison { min-width: 0; padding: 17px; border: 1px solid #c9d9d7; background: #fff; }
.shade-comparison[hidden], .shade-comparison__nav[hidden] { display: none; }
.shade-comparison__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.shade-comparison__header span { display: block; margin-bottom: 4px; color: var(--petrol); font: 800 9px var(--font-display); letter-spacing: .11em; text-transform: uppercase; }
.shade-comparison__header h3 { margin: 0; font: 700 22px/1.2 var(--font-display); }
.shade-comparison > p { margin: 7px 0 12px; color: var(--muted); font: 400 11px/1.5 var(--font-body); }
.shade-comparison__nav { display: flex; gap: 5px; flex-shrink: 0; }
.shade-comparison__nav button { display: grid; width: 32px; height: 32px; place-items: center; padding: 0; border: 1px solid #bdd2ce; border-radius: 50%; color: var(--petrol); background: #f0f6f4; font: 700 17px var(--font-body); cursor: pointer; }
.shade-comparison__nav button:disabled { opacity: .35; cursor: default; }
.shade-comparison__cards { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 16px) / 3); gap: 8px; min-width: 0; padding: 3px 0 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: #aac7c1 #f0f6f4; }
.shade-comparison__card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 5px 5px 11px; border: 1px solid #e0e8e6; border-radius: 3px; background: #f5f8f7; color: var(--navy); text-align: center; cursor: pointer; scroll-snap-align: start; }
.shade-comparison__card:hover { border-color: var(--petrol); }
.shade-comparison__card[aria-pressed="true"] { border: 2px solid var(--petrol); padding: 4px 4px 10px; background: #eaf4f0; }
.shade-comparison__card:focus-visible, .shade-comparison__nav button:focus-visible { outline: 3px solid var(--petrol); outline-offset: 2px; }
.shade-comparison__visual { display: grid; width: 100%; aspect-ratio: 1; place-items: center; overflow: hidden; }
.shade-comparison__visual canvas { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.shade-comparison__visual > span { color: var(--muted); font: 400 9px/1.4 var(--font-body); }
.shade-comparison__card strong { font: 800 14px/1.2 var(--font-display); }
.shade-comparison__card > span:last-child { font: 500 10px/1.35 var(--font-body); }
.shade-comparison__chosen { position: absolute; top: 5px; right: 5px; display: none; width: 20px; height: 20px; border-radius: 50%; color: white; background: var(--petrol); font: 800 12px/20px var(--font-body); }
.shade-comparison__card[aria-pressed="true"] .shade-comparison__chosen { display: block; }
.shade-comparison .shade-comparison__note { margin: 5px 0 0; font-size: 10px; }
.product-detail.has-shade-comparison .worn-color-preview { position: static; width: 100%; max-height: none; margin: 12px 0; box-shadow: 0 8px 25px #092e3817; }
.product-detail.has-shade-comparison .worn-color-preview__photo :is(img, canvas) { height: min(285px, 35dvh); }
@media (min-width: 861px) {
  .product-gallery.has-shade-comparison { grid-template-rows: auto auto auto; align-items: start; }
  .product-gallery.has-shade-comparison > .shade-comparison { grid-column: 2; grid-row: 1; }
  .product-gallery.has-shade-comparison > .product-gallery__main { grid-column: 2; grid-row: 2; }
  .product-gallery.has-shade-comparison > .product-gallery__thumbs { grid-column: 1; grid-row: 1 / span 2; }
  .product-gallery.has-shade-comparison > .product-gallery__footer { grid-column: 2; grid-row: 3; }
}
@media (max-width: 860px) {
  .shade-comparison { margin: 14px 0; padding: 12px; }
  .shade-comparison__header h3 { font-size: 18px; }
  .shade-comparison__cards { grid-auto-columns: calc((100% - 12px) / 3); gap: 6px; }
  .shade-comparison__card { padding-inline: 3px; }
  .shade-comparison__card[aria-pressed="true"] { padding-inline: 2px; }
  .shade-comparison__card > span:last-child { font-size: 9px; }
}