/* The home's changing room (round 14, includes/home_changing_room.html).
   Plain CSS, no JavaScript: each hotspot is a real radio button; the checked
   one shows its card. Positions are percentages of the picture, --x/--y on
   the desktop picture and --px/--py on the phone picture (below 768 px).
   The dots follow the "pieces fly into the look" dots (ink, white ring;
   Signal when picked). */

.cr-room { position: relative; max-width: 1600px; margin: 0 auto; }
.cr-img { display: block; width: 100%; height: auto; background: #F2F2F2; }

.cr-spots { position: absolute; inset: 0; margin: 0; padding: 0; border: 0; min-width: 0; }
.cr-spot { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }

/* The radio stays in the accessibility tree and takes focus; the label is
   what the pointer hits. */
.cr-radio { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; opacity: 0; pointer-events: none; }
.cr-dot { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; }
.cr-dot::before { content: ''; display: block; width: 18px; height: 18px; border-radius: 50%; background: #121110; box-shadow: 0 0 0 4px #FFFFFF, 0 2px 8px rgba(18,17,16,.4); transition: transform .25s cubic-bezier(.2,0,0,1), background-color .2s; }
.cr-dot::after { content: ''; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 2px solid #FFFFFF; opacity: 0; animation: cr-pulse 2.8s cubic-bezier(.2,0,0,1) infinite; pointer-events: none; }
.cr-spot:nth-child(3n+2) .cr-dot::after { animation-delay: .9s; }
.cr-spot:nth-child(3n+3) .cr-dot::after { animation-delay: 1.8s; }
.cr-dot:hover::before { transform: scale(1.2); }
.cr-radio:checked + .cr-dot { z-index: 4; }
.cr-radio:checked + .cr-dot::before { background: #F5B82E; box-shadow: 0 0 0 4px #121110, 0 2px 8px rgba(18,17,16,.4); transform: scale(1.15); }
.cr-radio:checked + .cr-dot::after { animation: none; }
.cr-radio:focus-visible + .cr-dot { outline: 2px solid #121110; outline-offset: -4px; border-radius: 50%; box-shadow: 0 0 0 2px #FFFFFF inset; }

@keyframes cr-pulse {
  0% { transform: scale(.7); opacity: .9; }
  70%, 100% { transform: scale(1.6); opacity: 0; }
}

/* The card: the picked category's name with a small "Explore products"
   above it, one link that opens the category in a new tab. It opens to the
   right of its dot, or to the left for dots on the right of the picture. */
.cr-card { display: none; position: absolute; top: 0; left: 26px; transform: translateY(-50%); z-index: 5; flex-direction: column; gap: 3px; width: max-content; max-width: 240px; padding: 9px 14px 10px; background: #FFFFFF; border: 1px solid #121110; box-shadow: 0 6px 20px rgba(18,17,16,.18); color: #121110; text-decoration: none; }
.cr-flip .cr-card { left: auto; right: 26px; }
.cr-radio:checked ~ .cr-card { display: flex; animation: cr-card-in .28s cubic-bezier(.2,0,0,1) both; }
.cr-explore { display: inline-flex; align-items: center; gap: 5px; font-family: 'DM Mono', ui-monospace, monospace; font-size: 11px; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: #5E5B57; }
.cr-name { font-family: 'Anton', 'Anton Fallback', Impact, sans-serif; font-size: 22px; line-height: 1.08; text-transform: uppercase; letter-spacing: .005em; }
.cr-card:hover .cr-explore, .cr-card:focus-visible .cr-explore { color: #121110; text-decoration: underline; text-underline-offset: 3px; }
.cr-card:hover { border-color: #121110; box-shadow: 0 0 0 1px #121110, 0 6px 20px rgba(18,17,16,.18); }
.cr-card:focus-visible { outline: 2px solid #121110; outline-offset: 3px; }

@keyframes cr-card-in { from { opacity: 0; transform: translate(-6px, -50%); } to { opacity: 1; transform: translate(0, -50%); } }
.cr-flip .cr-radio:checked ~ .cr-card { animation-name: cr-card-in-left; }
@keyframes cr-card-in-left { from { opacity: 0; transform: translate(6px, -50%); } to { opacity: 1; transform: translate(0, -50%); } }

/* The search bar on the empty wall in the middle of the room. */
.cr-search { position: absolute; left: 50%; top: var(--sy); transform: translate(-50%, -50%); z-index: 6; width: min(var(--sw, 60%), 880px); display: flex; align-items: stretch; height: 64px; background: #FFFFFF; border: 1px solid #121110; box-shadow: 0 10px 30px rgba(18,17,16,.16); }
.cr-search-icon { flex: none; align-self: center; margin-left: 20px; }
.cr-field { position: relative; flex: 1; min-width: 0; display: flex; }
.cr-input { flex: 1; min-width: 0; padding: 0 16px; border: 0; background: transparent; font-size: 15px; color: #121110; }
/* The hint: the placeholder's text in a span that can wrap; the native
   placeholder stays for assistive tech but is not painted. */
.cr-input::placeholder { color: transparent; }
.cr-ph { position: absolute; inset: 0 16px; display: flex; align-items: center; font-size: 15px; line-height: 1.3; color: #5E5B57; pointer-events: none; overflow: hidden; }
.cr-input:not(:placeholder-shown) + .cr-ph { display: none; }
.cr-input:focus { outline: none; }
.cr-search:focus-within { outline: 2px solid #121110; outline-offset: 3px; }
.cr-submit { flex: none; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 28px; background: #121110; color: #FFFFFF; border: 0; font-size: 14px; font-weight: 500; cursor: pointer; }
.cr-submit:hover { background: #2A2826; }
.cr-submit:focus-visible { outline: 2px solid #F5B82E; outline-offset: -4px; }
.cr-submit svg { display: none; }

/* Every category as a plain link, below the room. */
.cr-list { display: flex; flex-wrap: wrap; gap: 6px 22px; list-style: none; margin: 0; padding: 0; }
.cr-list a { display: inline-block; padding: 6px 0; font-size: 14px; color: #121110; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .28s cubic-bezier(.2,0,0,1); }
.cr-list a:hover, .cr-list a:focus-visible { background-size: 100% 1px; }
/* Round 17: on touch screens each category link is 40 px tall (the row gap
   shrinks, so the list grows only a little). */
@media (pointer: coarse) { .cr-list { row-gap: 0; } .cr-list a { padding: 11px 0; min-width: 40px; } }

@media (max-width: 1023px) {
  .cr-name { font-size: 19px; }
  .cr-search { width: min(max(var(--sw, 60%), 64%), 640px); height: 56px; }
  .cr-input, .cr-ph { font-size: 14px; }
}

/* Phones: the tall picture and its own positions. */
@media (max-width: 767px) {
  .cr-spot { left: var(--px); top: var(--py); }
  .cr-card { left: 22px; right: auto; max-width: min(200px, 56vw); padding: 7px 11px 8px; }
  .cr-flip .cr-card { left: 22px; right: auto; }
  .cr-pflip .cr-card, .cr-flip.cr-pflip .cr-card { left: auto; right: 22px; }
  .cr-flip .cr-radio:checked ~ .cr-card { animation-name: cr-card-in; }
  .cr-pflip .cr-radio:checked ~ .cr-card { animation-name: cr-card-in-left; }
  .cr-name { font-size: 17px; }
  .cr-explore { font-size: 10px; }
  .cr-search { top: var(--psy); width: calc(100% - 32px); height: 60px; }
  .cr-search-icon { display: none; }
  .cr-input { padding: 0 12px; font-size: 16px; }
  .cr-ph { inset: 0 12px; font-size: 13px; line-height: 1.3; }
  .cr-submit { padding: 0 16px; }
  .cr-submit svg { display: block; }
  .cr-submit-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cr-list { gap: 2px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .cr-dot::after { animation: none; opacity: 0; }
  .cr-dot::before { transition: none; }
  .cr-radio:checked ~ .cr-card { animation: none; }
}