/* Frame the original catalogue photographs without redrawing product artwork. */
.product-photo.hat-photo{position:relative;background-image:none;background-color:var(--product-bg);overflow:hidden;isolation:isolate}
.hat-image-window{position:absolute;inset:9%;overflow:hidden;background:#fff;mix-blend-mode:multiply}
.hat-image-window>img{position:absolute;display:block;max-width:none;object-fit:initial;aspect-ratio:auto}
.hat-source-frontal>img{width:133.3333%;height:auto;left:-16.6667%;top:-18.3333%}
.hat-source-pink>img{width:100%;height:auto;left:0;top:-12.6582%}
.category-card>.hat-photo{mix-blend-mode:normal;background-color:var(--product-bg)}
.hat-style-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 0 22px}
.hat-style-option{min-width:0;padding:3px;border:1px solid var(--line);background:transparent;border-radius:3px}
.hat-style-option>span{display:block;font-size:12px;padding:7px 2px;line-height:1.3}
.hat-style-option.selected{border:2px solid var(--rose);padding:2px;background:var(--blush)}
.hat-style-option:hover{border-color:var(--rose)}
.hat-colour-options{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 9px}
.hat-colour-option{display:flex;align-items:center;gap:7px;min-height:42px;padding:8px 10px;border:1px solid var(--line);border-radius:3px;background:transparent;font-size:12px}
.hat-colour-option i{width:15px;height:15px;flex-shrink:0;border-radius:50%;background:var(--swatch);box-shadow:inset 0 0 0 1px #0000001a}
.hat-colour-option.selected{border-color:var(--rose);background:var(--blush);box-shadow:inset 0 0 0 1px var(--rose)}
.hat-colour-option:not(:disabled):hover{border-color:var(--rose)}
.hat-colour-option:disabled{opacity:.4;cursor:not-allowed}
.hat-colour-note{font-size:12px;color:var(--muted);line-height:1.6;margin-bottom:19px}
.hat-fit-line{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:13px;margin-bottom:16px}
.hat-fit-line strong{font-weight:400;color:var(--muted)}
.hat-fit-line button{margin-left:auto;background:transparent;padding:0;font-size:12px}
.hat-selection-summary{font-size:12px;color:var(--muted);margin:0 0 15px}
.hat-quick-specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:19px 0;gap:12px}
.hat-quick-specs span{font-size:11px;color:var(--muted)}
.hat-quick-specs strong{display:block;font-weight:500;font-size:17px;color:var(--brown);margin-bottom:4px}
.hat-story{border-top:1px solid var(--line);background:var(--paper)}
.hat-details-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-bottom:45px}
.hat-details-grid h3{font-family:var(--serif);font-size:26px;font-weight:400;line-height:1.3;margin-bottom:13px;color:var(--brown)}
.hat-details-grid p{font-size:14px;line-height:1.9;color:var(--muted)}
.hat-measurements{display:grid;grid-template-columns:1.1fr 1fr;gap:8%;align-items:center;background:var(--blush);padding:36px}
.hat-measurements h3{font-family:var(--serif);font-size:32px;font-weight:400;color:var(--brown)}
.hat-measurements dl{margin:18px 0 0;font-size:13px;line-height:1.7}
.hat-measurements dl>div{display:grid;grid-template-columns:105px 1fr;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.hat-measurements dd{margin:0;color:var(--muted)}
.hat-measurements figure{margin:0;min-width:0}
.hat-detail-crop{position:relative;overflow:hidden;aspect-ratio:750/505;background:white}
.hat-detail-crop img{position:absolute;left:0;top:0;width:100%;height:auto;max-width:none}
.hat-measurements figcaption{font-size:11px;color:var(--muted);margin-top:10px}
.new-arrivals-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:760px){.hat-style-option>span{font-size:11px;min-height:42px;display:flex;align-items:center;justify-content:center}.hat-colour-options{gap:7px}.hat-colour-option{min-height:44px;font-size:12px}.hat-quick-specs{gap:8px}.hat-quick-specs strong{font-size:15px}.hat-quick-specs span{font-size:10px}.hat-details-grid{grid-template-columns:1fr;gap:15px;margin-bottom:25px}.hat-details-grid h3{font-size:25px;margin-bottom:9px}.hat-measurements{grid-template-columns:1fr;padding:24px;gap:25px}.hat-measurements h3{font-size:29px}.hat-measurements dl>div{grid-template-columns:82px 1fr;gap:8px}.new-arrivals-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
