/*!
 * BrightEyes · brighteyes.com.au
 * Theme brighteyes-2026-rz · v1.0.0
 * © 2026 Bright Eyes Retail Pty Ltd (ABN 48 094 942 533). All rights reserved.
 * Designed and developed by Rez for BrightEyes.
 * Unauthorised copying, modification or distribution is prohibited.
 */
.tryon-mark{position:absolute;z-index:2;top:8px;right:8px;display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 7px 0 6px;border:1px solid var(--ink);border-radius:var(--radius);background:#fff;color:var(--ink);font:600 12px/1 var(--body);text-decoration:none;transition:background-color var(--fast) var(--ease),color var(--fast) var(--ease),transform var(--fast) var(--ease)}
.tryon-mark[hidden],.bc-mark[hidden]{display:none}
.tryon-mark::after{content:"";position:absolute;inset:-9px -6px}   
.tryon-mark svg{flex:none}
@media (hover:hover){.tryon-mark:hover{background:var(--ink);color:#fff}}
.cards-wrap,.row-wrap{width:0;min-width:100%}
.cards{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;padding:0 16px 4px;scroll-padding:0 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cards::-webkit-scrollbar{display:none}
.card{position:relative;flex:0 0 62%;display:flex;flex-direction:column;min-width:0;scroll-snap-align:start}
.card.thumbnail{margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;line-height:inherit}
.card-stage{--ar:1.5;position:relative;display:block;aspect-ratio:3/2;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:border-color var(--fast) var(--ease)}
.card-stage img{position:absolute;left:calc(var(--l,2) * 1%);top:calc(50% - var(--cy,.5) * var(--w,96) * var(--ar) * 1%);width:calc(var(--w,96) * 1%);max-width:none;height:auto;transition:transform var(--slow) var(--ease)}
.card-tag{position:absolute;left:8px;top:8px;z-index:1;display:inline-flex;align-items:center;height:26px;font:600 12px/1 var(--body);padding:0 7px;border-radius:var(--radius);background:var(--quiet);color:var(--ink)}
.card-title{display:flex;flex-direction:column;gap:1px;padding-top:var(--sp-2);color:var(--ink);text-decoration:none}
.card-brand{font:400 var(--t-cap)/1.3 var(--body);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-name{margin:0;font:600 var(--t-body)/1.3 var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-price{display:flex;align-items:baseline;gap:4px;margin-top:2px;font:700 var(--t-lead)/1.3 var(--body);font-variant-numeric:tabular-nums;white-space:nowrap}
.card-price .from{font:500 var(--t-cap)/1.3 var(--body)}
.card-colour-line{margin-top:2px;font:400 var(--t-cap)/1.35 var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-n{color:var(--muted)}
.card-stage:focus-visible,.card-title:focus-visible,.card-n:focus-visible,.tryon-mark:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.card-stage:focus:not(:focus-visible),.card-title:focus:not(:focus-visible),.card-n:focus:not(:focus-visible),.tryon-mark:focus:not(:focus-visible){outline:none}
@media (hover:hover){
  .card:hover .card-stage{border-color:#cfcfcf}
  .card:hover .card-stage img{transform:scale(1.03)}
  .card:hover .card-name{text-decoration:underline;text-underline-offset:3px}
}
@media (min-width:761px){
  .cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 20px;overflow:visible;margin:0;padding:0}
  .card{flex:none}
  .tryon-mark{top:10px;right:10px}
  .card-tag{left:10px;top:10px}
}


.card-stage:has(img:not([style])){aspect-ratio:4/3;background:var(--white)}
.card-stage img:not([style]){left:0;top:0;width:100%;height:100%;padding:10% 7%;object-fit:contain;mix-blend-mode:multiply}
.card-tag{height:22px;padding:0 8px;border-radius:999px;background:#fff;color:var(--ink);font:600 11px/22px var(--body);letter-spacing:.02em;box-shadow:0 0 0 1px rgba(14,19,17,.08)}
.tryon-mark{height:28px;padding:0 10px 0 8px;border:0;border-radius:999px;background:#fff;color:var(--ink);font:600 12px/1 var(--body);gap:6px;box-shadow:0 1px 2px rgba(14,19,17,.10),0 2px 10px rgba(14,19,17,.08)}
@media (hover:hover){.tryon-mark:hover{background:var(--ink);color:#fff}}
.card-title{padding-top:12px}
.card-brand{color:#5b5f5a}
@media (hover:hover){.card:hover .card-stage:has(img:not([style])){border-color:#cfcfcf}}