/* Finishing system: crisp surfaces, quiet feedback, one motion cadence. */
:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --ease: cubic-bezier(.22, .8, .24, 1);
  --motion-fast: 180ms;
  --motion-control: 320ms;
  --motion-scene: 600ms;
}
html { scrollbar-gutter: stable; }
button, a, select { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, select:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

/* Primary actions have a fine edge, a separate arrow and a shallow press. */
.primary-button {
  min-height: 56px;
  padding: 12px 15px 12px 21px;
  gap: 20px;
  border: 1px solid #29292c;
  border-radius: 2px;
  background: #1b1b1e;
  background-image: linear-gradient(165deg, #ffffff07, #ffffff00 65%);
  color: #f9f9fa;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1px;
  box-shadow: inset 0 1px 0 #ffffff12, 0 2px 3px #1515190b;
  isolation: isolate;
  transition: background-color var(--motion-control), border-color var(--motion-control),
    box-shadow var(--motion-control), transform var(--motion-fast) var(--ease-out);
}
.primary-button::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 15%, #ffffff10 45%, transparent 75%);
  transform: translateX(-125%);
  transition: transform 680ms var(--ease-out);
  pointer-events: none;
}
.primary-button > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border: 1px solid #ffffff35;
  border-radius: 50%;
  font-size: 19px;
  font-weight: 400;
  transition: transform 380ms var(--ease-out), color 300ms, background-color 300ms, border-color 300ms;
}
.primary-button:active {
  transform: translateY(1px) scale(.988);
  box-shadow: inset 0 1px 4px #0003;
  transition-duration: 100ms;
}
.reverse .hero-shop, .product-dark .add-button {
  background: #ededf0;
  color: #19191d;
  border-color: #f4f4f6;
  box-shadow: inset 0 1px 0 #fff, 0 2px 4px #0002;
}
.reverse .hero-shop > span, .product-dark .add-button > span { border-color: #19191d3b; }
.reverse .hero-shop::before, .product-dark .add-button::before {
  background: linear-gradient(110deg, transparent 15%, #fff9 45%, transparent 75%);
}
.hero-shop { min-width: 218px; }

/* Circular controls stay compact visually, with generous hit areas. */
.preview-color, .swatch {
  position: relative;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  outline: none;
  border-radius: 50%;
  transition: border-color var(--motion-control), transform var(--motion-fast) var(--ease-out);
}
.preview-color::before, .swatch::before {
  content: '';
  position: absolute;
  inset: 7px;
  background: var(--color);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px #11111112, 0 1px 2px #11111112;
  transition: transform var(--motion-control) var(--ease-out);
}
.preview-color.active, .swatch.active { outline: none; border-color: #6e6e77; }
.preview-color.active::before, .swatch.active::before { transform: scale(1.08); }
.preview-color:hover, .swatch:hover { transform: none; }
.preview-color:active, .swatch:active { transform: scale(.92); }
.hero-color-options, .swatches { gap: 3px; }
.hero-color-options { margin-left: -8px; margin-bottom: 8px; }
.swatches { margin-left: -8px; }
.reverse .preview-color, .product-dark .swatch { border-color: transparent; }
.reverse .preview-color.active, .product-dark .swatch.active { border-color: #dadade; }
#hero-color-name { font-size: 8px; }
.selected-color-name { font-size: 10px; margin-top: 8px; }
.selection-label { font-size: 9px; }
.selection-label button { font-size: 9px; min-height: 28px; border-bottom: 0; text-decoration: underline; text-underline-offset: 4px; }
.sizes button {
  position: relative;
  height: 40px;
  font-size: 10px;
  border-radius: 1px;
  border-color: #b9b9c1;
  color: #585862;
  box-shadow: inset 0 1px 0 #ffffff30;
  transition: background-color var(--motion-control), border-color var(--motion-control),
    color var(--motion-control), transform var(--motion-fast) var(--ease-out), box-shadow var(--motion-control);
}
.sizes button.active { border-color: #242428; background: #242428; box-shadow: inset 0 1px 0 #ffffff25; }
.sizes button:active { transform: scale(.95); transition-duration: 100ms; }
.sizes:has(button:only-child) { grid-template-columns: 1fr; max-width: 140px; }
.qty { gap: 5px; border-color: #b9b9c1; border-radius: 1px; }
.qty button, .bag-item-bottom .qty button { width: 32px; height: 34px; transition: background-color 220ms, color 220ms; }
.qty > span { min-width: 20px; font-variant-numeric: tabular-nums; }
.orbit-button, .zoom-button, .close {
  width: 40px;
  height: 40px;
  border: 1px solid #93939c66;
  border-radius: 50%;
  background: #ffffff16;
  transition: background-color var(--motion-control), color var(--motion-control), border-color var(--motion-control), transform var(--motion-fast) var(--ease-out);
}
.close { font-size: 25px; font-weight: 400; }
.orbit-button:active, .zoom-button:active, .close:active { transform: scale(.92); }
.orbit-button.active, .zoom-button[aria-pressed="true"] { background: #252529; border-color: #252529; color: #fff; }
.product-dark .orbit-button.active, .product-dark .zoom-button[aria-pressed="true"] { background: #ededf0; color: #19191d; border-color: #ededf0; }
.studio-switch { gap: 0; padding: 3px; border: 1px solid #17171a20; border-radius: 2px; }
.studio-switch button {
  min-width: 42px;
  min-height: 26px;
  padding: 5px 9px;
  border: none;
  font-size: 7px;
  letter-spacing: .5px;
  transition: background-color 300ms, box-shadow 300ms, color 300ms;
}
.studio-switch button.active { color: #303038; background: #f8f8fa; box-shadow: 0 1px 4px #17171a12; }
.product-dark .studio-switch { border-color: #ffffff22; }
.product-dark .studio-switch button.active { background: #3b3b42; color: #f5f5f7; box-shadow: none; }
.view-button, .hero-center-control button { min-width: 42px; min-height: 40px; font-size: 8px; position: relative; border-bottom: none; }
.view-button::after, .hero-center-control button::after {
  content: '';
  position: absolute;
  bottom: 5px;
  height: 1px;
  left: 7px;
  right: 7px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 350ms var(--ease-out);
}
.view-button.active::after, .hero-center-control button.active::after { transform: scaleX(1); }
.viewer-meta > span { font-size: 7px; }
.viewer-tools { gap: 14px; }

/* Links use a measured underline; only the directional glyph travels. */
.under-link, .closing-link, .continue-shopping { position: relative; }
.under-link::after, .closing-link::after, .continue-shopping::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 450ms var(--ease-out);
}
.under-link span, .closing-link span { transition: transform 400ms var(--ease-out); }
.site-header nav a::after { width: 100%; transform: scaleX(0); transform-origin: right; transition: transform 400ms var(--ease-out); }
.site-header nav a[aria-current]::after { transform: scaleX(1); }
.bag-trigger { position: relative; padding: 12px 0 12px 10px; }
.bag-trigger svg { transition: transform 350ms var(--ease-out); }
.bag-trigger .bag-count { display: grid; place-items: center; min-width: 21px; height: 21px; border: 1px solid #17171922; border-radius: 50%; font-variant-numeric: tabular-nums; }
.product-breadcrumbs button { min-height: 30px; padding: 4px 0 4px 12px; font-size: 8px; }
.product-breadcrumbs { padding-top: 14px; padding-bottom: 14px; align-items: center; }
.filters { gap: 27px; }
.filters button { min-height: 32px; transition: color 280ms; }
.filters button::after { content: ''; height: 1px; background: #151517; position: absolute; left: 0; right: 0; bottom: -20px; transform: scaleX(0); transform-origin: left; transition: transform 350ms var(--ease-out); }
.filters button.active::after { transform: scaleX(1); }
.collection-toolbar select { min-height: 32px; border-bottom: 1px solid transparent; transition: border-color 240ms; }
.story-tabs button { position: relative; }
.story-tabs button::before { content: ''; height: 1px; position: absolute; top: -1px; left: 0; right: 0; background: #e2e2e8; transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--ease-out); }
.story-tabs button.active { border-top-color: #48484e; }
.story-tabs button.active::before { transform: scaleX(1); }
.remove { min-height: 32px; text-underline-offset: 4px; }
.render-note-button { min-height: 28px; border-bottom: 0; text-decoration: underline; text-underline-offset: 5px; }

/* Scene changes share the same settling curve. */
.viewer-ghost-number {
  font-size: clamp(75px, 13.5vw, 218px);
  top: 16%;
  left: auto;
  right: -1%;
  text-align: right;
}
#product-page { transition: background-color 650ms var(--ease), color 500ms; }
.viewer-ghost-number, .product-description, .selected-color-name, .selection-label,
.options-rule, .design-signature img { transition: color 450ms, background-color 450ms, filter 450ms, border-color 450ms; }
.showroom { transition: background-color 1000ms var(--ease), color 750ms var(--ease); }
.page-arrive { animation: none; }
.route-exit { animation: routeExit 170ms var(--ease-in) both; pointer-events: none; }
.route-enter { animation: routeEnter 500ms var(--ease-out) both; }
#product-page.route-enter .product-information { animation: contentSettle 650ms var(--ease-out) both; }
#product-page.route-enter .product-options { animation: contentSettle 700ms 60ms var(--ease-out) both; }
.grid-enter > .product-card { animation: cardSettle 600ms calc(var(--card-order, 0) * 35ms) var(--ease-out) both; }
[data-thumb] > .garment-preview { opacity: 0; transition: opacity 400ms var(--ease); }
[data-thumb].ready > .garment-preview { opacity: 1; }
.product-image .image-inner, .card-reverse { transition: opacity 450ms var(--ease), transform 850ms var(--ease-out); }
.product-image:hover .image-inner { transform: none; }
.card-arrow { transition: background-color 320ms, color 320ms, border-color 320ms, transform 380ms var(--ease-out); }
.reveal { transform: translateY(18px); transition-duration: 800ms; }

/* Drawers and notes animate in both directions, including keyboard dismissal. */
#overlay { animation: none; opacity: 0; transition: opacity 360ms var(--ease); }
#overlay.is-open { opacity: 1; }
#bag { animation: none; transform: translateX(100%); transition: transform 360ms var(--ease-out); overscroll-behavior: contain; }
#bag.is-open { transform: translateX(0); }
#bag .drawer-heading, #bag #bag-content { opacity: 0; transform: translateY(8px); transition: opacity 220ms, transform 360ms var(--ease-out); }
#bag.is-open .drawer-heading, #bag.is-open #bag-content { opacity: 1; transform: none; transition-delay: 90ms; }
#info-dialog { opacity: 0; transform: translateY(12px) scale(.985); transition: opacity 220ms, transform 220ms var(--ease-out); box-shadow: 0 22px 80px #0002; }
#info-dialog.is-open { opacity: 1; transform: none; }
#info-dialog::backdrop { background: #13131b00; backdrop-filter: blur(0); transition: background-color 220ms, backdrop-filter 220ms; }
#info-dialog.is-open::backdrop { background: #13131b66; backdrop-filter: blur(6px); }
.toast { border: 1px solid #ffffff20; border-radius: 2px; box-shadow: 0 5px 20px #0002; transition: opacity 250ms, transform 380ms var(--ease-out); }
@keyframes routeExit { to { opacity: 0; } }
@keyframes routeEnter { from { opacity: 0; } to { opacity: 1; } }
@keyframes contentSettle { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes cardSettle { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (hover: hover) and (pointer: fine) {
  .primary-button:hover { background-color: #29292e; border-color: #47474e; box-shadow: inset 0 1px 0 #ffffff20, 0 5px 16px #17171915; }
  .primary-button:hover::before { transform: translateX(125%); }
  .primary-button:hover > span { background: #f1f1f3; border-color: #f1f1f3; color: #19191d; transform: translateX(2px); }
  .reverse .hero-shop:hover, .product-dark .add-button:hover { background: #fff; border-color: #fff; }
  .reverse .hero-shop:hover > span, .product-dark .add-button:hover > span { background: #26262a; color: #f5f5f6; border-color: #26262a; }
  .swatch:hover::before, .preview-color:hover::before { transform: scale(1.17); }
  .sizes button:hover:not(.active) { background: #ffffff40; border-color: #74747e; color: #22222a; }
  .product-dark .sizes button:hover:not(.active) { background: #ffffff10; color: #fff; }
  .qty button:hover:not(:disabled) { background: #77777718; }
  .orbit-button:hover, .zoom-button:hover, .close:hover { border-color: #777780; background: #252529; color: #fff; }
  .product-dark .orbit-button:hover, .product-dark .zoom-button:hover { background: #efeff2; color: #17171c; }
  .under-link:hover::after, .closing-link:hover::after, .continue-shopping:hover::after,
  .site-header nav a:hover::after { transform: scaleX(1); transform-origin: left; }
  .under-link:hover span, .closing-link:hover span { transform: translateX(4px); }
  .bag-trigger:hover svg { transform: translateY(-2px); }
  .filters button:hover { color: #171719; }
  .collection-toolbar select:hover { border-color: #95959f; }
  .story-tabs button:hover { color: #e2e2e8; }
  .product-image:hover .card-arrow { transform: translateX(2px); }
  .product-image:hover .card-reverse.ready { transform: scale(1.025); }
}
@media (hover: none) {
  .primary-button:hover { background: #1b1b1e; }
  .reverse .hero-shop:hover, .product-dark .add-button:hover { background: #ededf0; color: #19191d; }
  .primary-button:hover > span { transform: none; }
  .product-image:hover .card-reverse.ready { opacity: 0; }
  .product-image:has(.card-reverse.ready):hover .image-inner { opacity: 1; }
  .product-image:hover .card-arrow { background: transparent; color: #444448; border-color: #aaaab44d; }
}
@media (max-width: 1100px) {
  .hero-shop { min-width: 190px; font-size: 10px; }
}
@media (max-width: 760px) {
  .primary-button { min-height: 56px; padding: 11px 14px 11px 18px; font-size: 11px; }
  .hero-shop { min-width: 178px; gap: 12px; font-size: 10px; }
  .hero-shop > span { width: 28px; height: 28px; flex-basis: 28px; }
  .hero-detail { bottom: 110px; column-gap: 8px; }
  .hero-detail h2 { font-size: 19px; }
  .hero-color-options { gap: 0; margin: 0 -7px 0 0; }
  #hero-color-name { font-size: 7px; margin-top: 5px; }
  .showroom { min-height: 600px; }
  .showroom-scroll { min-height: 950px; }
  .hero-viewer { bottom: 24%; }
  .showroom-car { right: -39%; bottom: 24%; opacity: .5; }
  .hero-bottom { bottom: 24px; }
  .scroll-prompt { font-size: 6px; gap: 8px; letter-spacing: .3px; }
  .scroll-prompt b { font-size: 5px; }
  .hero-left > p:not(.kicker) { font-size: 9px; }
  .studio-switch button { font-size: 7px; min-width: 42px; }
  .viewer-meta > span { font-size: 6px; max-width: 155px; line-height: 1.7; }
  .viewer-tools { bottom: 25px; }
  .viewer-caption { font-size: 6px; }
  .viewer-canvas { inset: -8px 0 35px; }
  .viewer-ghost-number { font-size: 25vw; top: 15%; left: auto; right: 6%; }
  .sizes button { min-height: 44px; font-size: 11px; }
  .qty button { width: 36px; height: 36px; }
  .swatches { gap: 6px; }
  .swatch { width: 40px; height: 40px; flex-basis: 40px; }
  .swatch::before { inset: 8px; }
  .selection-label { font-size: 10px; }
  .quantity-row { font-size: 9px; }
  .filters { column-gap: 22px; row-gap: 6px; }
  .filters button { min-height: 34px; }
  .filters button::after, .filters button.active::after { bottom: -2px; }
  .product-info h3 { font-size: 10px; }
  .product-info > span { font-size: 9px; }
  .product-sub { font-size: 8px; }
  .product-breadcrumbs { padding-top: 13px; padding-bottom: 13px; font-size: 7px; }
  .product-breadcrumbs button { font-size: 7px; }
  .bag-drawer { padding: 26px 22px; }
}
@media (max-width: 370px) {
  .hero-shop { min-width: 164px; font-size: 9px; padding-left: 13px; }
  .hero-detail h2 { font-size: 17px; }
  .preview-color { width: 33px; height: 36px; flex-basis: 33px; }
  .scroll-prompt { font-size: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .route-exit, .route-enter, .grid-enter > .product-card, .reveal { opacity: 1; transform: none; }
  .primary-button::before { display: none; }
}