/* The Sugar Room · Book.
   Concept: three doors. Each way in is drawn as an arched door frame with a gold keystone
   and a numeral plate, so the choice reads at a glance. Builds on styles.css tokens. */

/* ---------- Page-level touches ---------- */

body.page-book .site-header .btn[aria-current="page"] {
  box-shadow:
    0 0 0 2px var(--ink),
    0 0 0 3px var(--pink-soft),
    0 12px 30px -10px rgba(255, 79, 160, 0.7);
}

body.page-book h2 em {
  font-style: italic;
  color: var(--pink);
  text-shadow: 0 0 18px rgba(255, 79, 160, 0.35);
}

body.page-book #options,
body.page-book #compare,
body.page-book .bk-door { scroll-margin-top: 96px; }

.bk-num {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--gold);
}

/* ---------- Hero ---------- */

.bk-hero {
  background:
    radial-gradient(46% 62% at 80% 42%, rgba(255, 79, 160, 0.17), transparent 70%),
    radial-gradient(40% 50% at 6% 100%, rgba(217, 184, 122, 0.08), transparent 70%),
    var(--ink-2);
}

.bk-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

.bk-hero-copy {
  min-width: 0;
  animation: bk-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.bk-hero .lede { max-width: 44ch; }

.bk-hours {
  display: none;
  margin-top: 18px;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Numbered index: jump straight to a door. */
.bk-index { margin-top: clamp(32px, 4vw, 48px); max-width: 580px; }
.bk-index ol {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--line);
}
.bk-index a {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 16px;
  padding: 18px 6px;
  border-top: 1px solid var(--line);
  text-decoration: none;
  transition: padding 0.3s ease, background-color 0.3s ease;
}
.bk-index .bk-num { font-size: 20px; }
.bk-index-name {
  min-width: 0;
  font-family: var(--serif);
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.1;
  transition: color 0.3s ease;
}
.bk-index-note {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.bk-index-note::after {
  content: "\2193";
  content: "\2193" / "";
  font-size: 15px;
  letter-spacing: 0;
  color: var(--pink);
}
.bk-index a:hover,
.bk-index a:focus-visible {
  padding-left: 16px;
  background: linear-gradient(90deg, rgba(255, 79, 160, 0.09), transparent 75%);
}
.bk-index a:hover .bk-index-name,
.bk-index a:focus-visible .bk-index-name { color: var(--pink-soft); }

/* The arch: photo in a door-shaped frame, offset gold line behind it. */
.bk-hero-media {
  position: relative;
  isolation: isolate;
  justify-self: end;
  width: min(100%, 440px);
  animation: bk-rise 1.1s 0.12s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.bk-hero-media::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -18px;
  right: -18px;
  bottom: 18px;
  left: 18px;
  border: 1px solid rgba(217, 184, 122, 0.5);
  border-radius: 50% 50% 18px 18px / 40% 40% 18px 18px;
  pointer-events: none;
}
.bk-hero-media img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 45%;
  border: 1px solid rgba(255, 79, 160, 0.45);
  border-radius: 50% 50% 18px 18px / 40% 40% 18px 18px;
  background: linear-gradient(160deg, #2c1d22 0%, #120c0d 100%);
  box-shadow:
    0 0 0 6px rgba(255, 79, 160, 0.06),
    0 40px 90px -30px rgba(255, 79, 160, 0.55);
}

.bk-stamp {
  position: absolute;
  z-index: 2;
  left: -40px;
  bottom: 52px;
  width: 128px;
  height: 128px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 1px solid rgba(217, 184, 122, 0.6);
  border-radius: 50%;
  background: var(--ink);
  box-shadow:
    0 0 0 6px var(--ink-2),
    0 0 0 7px rgba(217, 184, 122, 0.22),
    0 22px 44px -14px rgba(0, 0, 0, 0.7);
  text-align: center;
  transform: rotate(-9deg);
}
.bk-stamp span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}
.bk-stamp span:last-child { color: var(--cream); opacity: 0.8; }
.bk-stamp b {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.05;
  color: var(--cream);
}

/* ---------- Options: three doors ---------- */

.bk-options {
  position: relative;
  background:
    radial-gradient(50% 40% at 50% 62%, rgba(255, 79, 160, 0.07), transparent 70%),
    var(--ink);
}

.bk-options-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: 20px 56px;
  align-items: end;
  margin-bottom: clamp(48px, 6vw, 80px);
}
.bk-options-head h2 {
  margin-top: 14px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(40px, 6.4vw, 84px);
  line-height: 1;
  letter-spacing: -0.015em;
}
.bk-options-head > p {
  justify-self: end;
  max-width: 46ch;
  color: var(--muted);
  font-size: 17px;
}

.bk-doors {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 30px);
}

/* Each door is a size container so the arch radius can match its width exactly. */
.bk-door {
  container-type: inline-size;
  display: flex;
  min-width: 0;
}

.bk-door-card {
  --frame: 14px;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  padding: var(--frame);
  border: 1px solid rgba(217, 184, 122, 0.3);
  border-radius: 999px 999px var(--radius) var(--radius);
  border-radius: 50cqw 50cqw var(--radius) var(--radius);
  background: linear-gradient(180deg, rgba(255, 79, 160, 0.08), var(--ink-2) 40%);
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
/* Keystone at the top of the arch. */
.bk-door-card::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 9px;
  height: 9px;
  background: var(--gold);
  box-shadow: 0 0 14px rgba(217, 184, 122, 0.6);
  transform: translateX(-50%) rotate(45deg);
}
.bk-door-card:hover,
.bk-door-card:focus-within {
  border-color: rgba(255, 79, 160, 0.55);
  box-shadow: 0 34px 80px -34px rgba(255, 79, 160, 0.5);
}

.bk-door-media {
  overflow: hidden;
  isolation: isolate;
  border-radius: 999px 999px 8px 8px;
  border-radius: calc(50cqw - var(--frame) - 1px) calc(50cqw - var(--frame) - 1px) 8px 8px;
  background: linear-gradient(160deg, #2c1d22 0%, #120c0d 100%);
  transform: translateZ(0);
}
.bk-door-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: saturate(0.92) brightness(0.9);
  transform: scale(var(--bk-zoom, 1));
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.5s ease;
}
/* Focal points: faces and coupes; sparklers and bottle; faces under the confetti (exit sign cropped out). */
.bk-img-guestlist { object-position: 50% 35%; }
/* The sparkler photo carries a thin black strip along its top edge; a slight zoom from the bottom hides it. */
.bk-img-tables {
  --bk-zoom: 1.05;
  object-position: 50% 82%;
  transform-origin: 50% 100%;
}
.bk-img-private { object-position: 50% 47%; }
.bk-door-card:hover .bk-door-img,
.bk-door-card:focus-within .bk-door-img {
  transform: scale(calc(var(--bk-zoom, 1) * 1.04));
  filter: saturate(1) brightness(1);
}

/* Numeral plate, pulled up over the bottom edge of the photo. */
.bk-plate {
  position: relative;
  z-index: 1;
  align-self: center;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-top: -28px;
  border: 1px solid rgba(217, 184, 122, 0.65);
  border-radius: 50%;
  background: var(--ink-2);
  box-shadow: 0 0 0 5px var(--ink-2);
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  line-height: 1;
  color: var(--gold);
}

.bk-door-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 16px clamp(6px, 1.4vw, 14px) 6px;
  text-align: center;
}
.bk-door-body h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(28px, 2.7vw, 38px);
  line-height: 1.05;
}
.bk-door-line {
  max-width: 28ch;
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.4;
  color: var(--cream);
  opacity: 0.85;
}

.bk-spec { width: 100%; margin: 6px 0 0; }
.bk-spec div { padding-block: 14px; border-top: 1px solid var(--line); }
.bk-spec dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.bk-spec dd {
  max-width: 34ch;
  margin: 6px auto 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}
.bk-spec .todo { margin-top: 10px; }

.bk-door-action {
  display: grid;
  gap: 12px;
  width: 100%;
  margin-top: auto;
  padding-top: 8px;
}
.bk-door-action .btn { width: 100%; }
.bk-via {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.bk-via a { color: var(--cream); text-underline-offset: 3px; }
.bk-via a:hover { color: var(--pink-soft); }

/* The other way to ask: a single line under the doors, set off by a keystone. */
.bk-doors-note {
  max-width: 60ch;
  margin: clamp(40px, 5vw, 60px) auto 0;
  text-align: center;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}
.bk-doors-note::before {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  margin: 0 auto 18px;
  background: var(--gold);
  box-shadow: 0 0 14px rgba(217, 184, 122, 0.6);
  transform: rotate(45deg);
}
.bk-doors-note a {
  color: var(--cream);
  font-weight: 700;
  text-decoration-color: var(--pink);
  text-underline-offset: 4px;
  white-space: nowrap;
}
.bk-doors-note a:hover { color: var(--pink-soft); }

/* ---------- Compare ---------- */

.bk-compare {
  border-block: 1px solid var(--line);
  background: var(--ink-2);
}

/* position: relative keeps the absolutely positioned .sr labels inside the scroller. */
.bk-table-wrap {
  position: relative;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink);
}

.bk-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}
.bk-table th,
.bk-table td {
  padding: 22px 24px;
  text-align: left;
  vertical-align: top;
}
.bk-table thead th {
  padding-block: 18px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--gold);
}
.bk-table tbody tr { transition: background-color 0.25s ease; }
.bk-table tbody tr:hover { background: rgba(255, 79, 160, 0.04); }
.bk-table tbody tr + tr > * { border-top: 1px solid var(--line); }
.bk-table tbody th {
  width: 24%;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.15;
  white-space: nowrap;
}
.bk-table tbody th .bk-num {
  display: inline-block;
  min-width: 2em;
  font-size: 18px;
}
.bk-table td {
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.55;
}
.bk-table td:nth-child(2) { width: 36%; }
.bk-table td a {
  color: var(--cream);
  font-weight: 700;
  text-decoration-color: var(--pink);
  text-underline-offset: 4px;
  white-space: nowrap;
}
.bk-table td a::after {
  content: " \2197";
  content: " \2197" / "";
  color: var(--pink);
}
.bk-table td a:hover { color: var(--pink-soft); }

.bk-row-walk { background: rgba(217, 184, 122, 0.04); }
.bk-row-walk th { font-style: italic; }
.bk-row-walk td:last-child { color: var(--cream); font-weight: 700; }

.bk-swipe { display: none; }

/* ---------- Good to know ---------- */

.bk-know { background: var(--ink); }

.bk-know-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(40px, 7vw, 110px);
  align-items: center;
}

.bk-know-media {
  position: relative;
  min-width: 0;
  padding: 0 15% 22% 34px;
}
.bk-know-a {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 30%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(160deg, #2c1d22 0%, #120c0d 100%);
}
.bk-know-b {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 50%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* Pour loop (9:16) cropped to 4:5: keeps the shaker and the coupe in frame. */
  object-position: 50% 30%;
  border: 6px solid var(--ink);
  border-radius: var(--radius);
  background: var(--ink-3);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 79, 160, 0.3);
}
/* The club's own line, set vertically along the frame. */
.bk-know-tag {
  position: absolute;
  top: 0;
  left: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--gold);
}

.bk-know-copy { min-width: 0; }
.bk-know-copy .section-head { margin-bottom: 28px; }

.bk-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 36px;
  margin: 0;
}
.bk-notes div {
  min-width: 0;
  padding-block: 20px;
  border-top: 1px solid var(--line);
}
.bk-notes dt {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.2;
}
.bk-notes dd {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 15px;
}
.bk-notes dd .todo { margin-top: 6px; }
.bk-notes dd a { color: var(--cream); text-underline-offset: 3px; }
.bk-notes dd a:hover { color: var(--pink-soft); }

/* ---------- Contact line ---------- */

.bk-contact {
  padding-block: clamp(52px, 7vw, 84px);
  border-top: 1px solid var(--line);
  background: var(--ink-2);
}
.bk-contact-inner {
  display: flex;
  align-items: center;
  gap: clamp(20px, 4vw, 48px);
}
.bk-contact-seal {
  flex: none;
  width: clamp(68px, 9vw, 108px);
  height: auto;
  animation: bk-spin 60s linear infinite;
}
.bk-contact-copy { min-width: 0; }
.bk-contact-line {
  margin-top: 10px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(26px, 3.6vw, 46px);
  line-height: 1.18;
  letter-spacing: -0.01em;
}
.bk-contact-line a {
  color: var(--pink-soft);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(255, 127, 184, 0.5);
  text-underline-offset: 0.18em;
  overflow-wrap: anywhere;
}
.bk-contact-line a:hover { color: var(--pink); text-decoration-color: currentColor; }

/* ---------- Slim band to Visit ---------- */

.bk-visit {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(56px, 7vw, 92px);
  border-top: 1px solid var(--line);
  background: var(--ink);
}
.bk-visit-media {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(60%, 780px);
}
/* The club's pink neon script; the band crops to the sign, the line runs in out of the dark.
   The script slopes down to the right, so the crop sits low enough in the photo (65%) to keep
   its tail above the buttons instead of running behind them. */
.bk-visit-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 65%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 45%);
}
.bk-visit-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--ink) 0%, rgba(11, 8, 8, 0.64) 40%, rgba(11, 8, 8, 0.28) 100%),
    linear-gradient(0deg, rgba(11, 8, 8, 0.6), transparent 45%);
}

.bk-visit-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px 48px;
}
.bk-visit-copy { min-width: 0; max-width: 560px; }
.bk-visit h2 {
  margin-top: 12px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(38px, 5vw, 62px);
  line-height: 1.02;
}
.bk-visit-copy > p:not(.eyebrow) {
  max-width: 44ch;
  margin-top: 12px;
  font-size: 17px;
  color: var(--cream);
  opacity: 0.88;
}
.bk-visit-actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* The ghost button sits over the photo here, so give its label a dark backing. */
.bk-visit .btn-ghost { background: rgba(11, 8, 8, 0.62); }

/* ---------- Motion ---------- */

/* Transform only: if animations never run, the content is still fully visible. */
@keyframes bk-rise {
  from { transform: translateY(14px); }
  to { transform: none; }
}
@keyframes bk-spin {
  to { transform: rotate(360deg); }
}

/* ---------- Responsive ---------- */

@media (max-width: 1020px) {
  .bk-hero-inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  /* Pull the gold arch line in so it doesn't graze the viewport edge. */
  .bk-hero-media::before { top: -12px; right: -12px; bottom: 12px; left: 12px; }
  .bk-door-card { --frame: 10px; }
  .bk-door-line { font-size: 17px; }
  .bk-know-grid { gap: 48px; }
  .bk-notes { column-gap: 28px; }
}

@media (max-width: 860px) {
  /* Hero: the photo moves behind the copy. */
  .bk-hero-inner { grid-template-columns: minmax(0, 1fr); }
  .bk-hero-media {
    position: absolute;
    z-index: -1;
    inset: 0;
    width: auto;
    justify-self: auto;
  }
  .bk-hero-media::before { display: none; }
  .bk-hero-media::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    background:
      linear-gradient(180deg, rgba(20, 15, 15, 0.84) 0%, rgba(20, 15, 15, 0.74) 50%, var(--ink-2) 100%),
      radial-gradient(70% 50% at 80% 20%, rgba(255, 79, 160, 0.16), transparent 70%);
  }
  .bk-hero-media img {
    height: 100%;
    aspect-ratio: auto;
    object-position: 50% 40%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .bk-stamp { display: none; }
  .bk-hours { display: block; }
  .bk-index { max-width: none; }

  .bk-options-head { grid-template-columns: minmax(0, 1fr); }
  .bk-options-head > p { justify-self: start; }

  .bk-doors {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 36px;
  }
  .bk-door { width: 100%; max-width: 480px; }
  .bk-door-card { --frame: 12px; }
  .bk-door-img { aspect-ratio: 1 / 1; }
  /* The square crop already drops the sparkler photo's top strip. */
  .bk-img-tables { --bk-zoom: 1; }
  .bk-door-body { padding-inline: 12px; }

  /* Stack the numeral over the name so the detail columns keep their room. */
  .bk-table tbody th {
    width: 150px;
    white-space: normal;
    font-size: 20px;
  }
  .bk-table tbody th .bk-num {
    display: block;
    margin-bottom: 4px;
    font-size: 16px;
  }

  .bk-know-grid { grid-template-columns: minmax(0, 1fr); }
  .bk-know-media { width: 100%; max-width: 540px; }
}

@media (max-width: 760px) {
  /* Narrow screens: the option name stays pinned while the details scroll. */
  .bk-table { min-width: 640px; }
  .bk-table th,
  .bk-table td { padding: 18px 16px; }
  .bk-table thead th:first-child,
  .bk-table tbody th {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 132px;
    min-width: 132px;
    background: var(--ink);
    box-shadow: inset -1px 0 0 var(--line);
  }
  .bk-swipe {
    display: block;
    margin-top: 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .bk-swipe::after {
    content: "  \2192";
    content: "  \2192" / "";
    color: var(--pink);
  }

  .bk-notes { grid-template-columns: minmax(0, 1fr); }

  .bk-contact-inner { align-items: flex-start; }

  .bk-visit-media { width: 100%; }
  .bk-visit-media img { object-position: 50% 50%; -webkit-mask-image: none; mask-image: none; }
  .bk-visit-media::after {
    background: linear-gradient(0deg, var(--ink) 6%, rgba(11, 8, 8, 0.82) 55%, rgba(11, 8, 8, 0.66) 100%);
  }
  .bk-visit-actions { width: 100%; }
  .bk-visit-actions .btn { flex: 1 1 200px; }
}

@media (max-width: 420px) {
  .bk-index a {
    grid-template-columns: 34px minmax(0, 1fr);
    row-gap: 4px;
  }
  .bk-index-note { grid-column: 2; }
  .bk-door-card { --frame: 9px; }
  .bk-door-body h3 { font-size: 28px; }
  .bk-know-media { padding: 0 12% 24% 26px; }
  .bk-contact-inner { flex-direction: column; gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .bk-hero-copy,
  .bk-hero-media,
  .bk-contact-seal { animation: none; }
  .bk-index a,
  .bk-index-name,
  .bk-door-card,
  .bk-door-img,
  .bk-table tbody tr { transition: none; }
  .bk-door-card:hover .bk-door-img,
  .bk-door-card:focus-within .bk-door-img { transform: scale(var(--bk-zoom, 1)); }
}