/**
 * Page layer: front page (HomePage.js), category page (CategoryPage.js) and
 * product detail page (design 2 from tmp/product-page-designs.html, which
 * departs from ProductDetailPage.js; image expand is components/Image).
 * Breakpoints are the React theme's: sm 489px, md 768px, lg 1024px, xl 1536px.
 */

/* ---------- Shared: back button (MUI IconButton, 40x40) ---------- */
.back-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: 4px;
  background-color: #32beb9;
  color: #fff;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}
.back-button:hover { background-color: #2aa8a4; }

/* ---------- Shared: "Sort By" outlined select (MUI FormControl + Select) ---------- */
.sort {
  position: relative;
  display: flex;
  min-width: 200px;
  margin: 0;
}
.sort--home { margin-right: 15px; }
.sort__select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 41.125px;
  margin: 0;
  padding: 9.5px 31px 9.5px 11px; /* MUI 10.5px 32px 10.5px 12px minus the 1px border MUI draws on an absolute fieldset */
  border: 1px solid #32beb9;
  border-radius: 4px;
  background: transparent;
  color: #fff;
  font-family: var(--mui-font);
  font-size: 0.875rem;
  line-height: 1.4375em;
  cursor: pointer;
}
.sort__select:hover { border-color: #1976d2; }
.sort.is-open .sort__select { border-color: #32beb9; box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.2); } /* MUI keeps Mui-focused while the menu is open */
.sort__select:focus { outline: none; border-color: #32beb9; box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.2); } /* overrides/OutlinedInput.js focus ring */
.sort__select option { color: #262626; background: #fff; }
/* Shrunk label chip (overrides/InputLabel.js). */
.sort__label {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  max-width: calc(133% - 32px);
  margin-left: -6px;
  padding: 0 8px;
  background: #fff;
  color: #000;
  font-family: var(--mui-font);
  font-size: 0.875rem;
  line-height: 1.4375em;
  white-space: nowrap;
  transform: translate(14px, -9px) scale(0.75);
  transform-origin: top left;
  pointer-events: none;
  transition: color 200ms cubic-bezier(0, 0, 0.2, 1);
}
/* Mui-focused label: primary.main. */
.sort:focus-within .sort__label, .sort.is-open .sort__label { color: #1677ff; }
.sort__arrow {
  position: absolute;
  top: calc(50% - 0.5em);
  right: 7px;
  color: #32beb9;
  pointer-events: none;
}
.sort__submit { margin-left: 8px; }
.sort.is-open .sort__arrow { transform: rotate(180deg); }

/* Open "Sort By" menu: MUI Menu (Popover + Paper elevation 8 + MenuList), built by js/shell.js. */
.sort-menu { position: fixed; inset: 0; z-index: 1300; }
.sort-menu__paper {
  position: absolute;
  min-width: 16px;
  min-height: 16px;
  max-width: calc(100% - 32px);
  max-height: calc(100% - 96px);
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 4px;
  background: #fff;
  color: #262626;
  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  outline: 0;
  opacity: 0;
  transform: scale(0.75, 0.5625);
}
.sort-menu__list { margin: 0; padding: 8px 0; list-style: none; outline: 0; }
.sort-menu__item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 48px;
  padding: 6px 16px;
  box-sizing: border-box;
  font-family: var(--mui-font);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.57;
  white-space: nowrap;
  cursor: pointer;
  outline: 0;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 489px) { .sort-menu__item { min-height: auto; } }
.sort-menu__item:hover { background-color: rgba(0, 0, 0, 0.04); }
.sort-menu__item.is-selected { background-color: rgba(22, 119, 255, 0.08); }
.sort-menu__item.is-selected:hover { background-color: rgba(22, 119, 255, 0.12); }
.sort-menu__item.is-focus-visible { background-color: rgba(0, 0, 0, 0.12); }
.sort-menu__item.is-selected.is-focus-visible { background-color: rgba(22, 119, 255, 0.2); }

/* ---------- Front page ---------- */
.home {
  max-width: 1804px;
  margin: 0 auto;
  padding: 0 15px;
}
.sort-bar {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.5em;
  margin-bottom: 1em;
}
.section { margin: 2rem 0; }
.section__head {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.wrapper .section__title {
  flex-grow: 1;
  margin-left: 15px;
  text-align: left;
}
.section__nav {
  position: relative;
  display: flex;
  align-items: center;
  margin-right: 1.5em;
}
.section__arrow {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: none;
  color: #32beb9;
  cursor: pointer;
  transition: color 0.3s ease;
}
.section__arrow .icon { font-size: 2.5rem; }
.section__arrow:hover { color: #2a9d8f; }
.section__arrow:active { color: #9a462b; }
.section__all { margin-left: 10px; text-decoration: none; }
.view-all {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid #57c4c1;
  border-radius: 5px;
  background-color: #57c4c1;
  color: #fff;
  font-size: 0.875rem;
  line-height: 1.75;
  text-align: center;
}
.view-all:hover { background-color: transparent; color: #57c4c1; cursor: pointer; }
/* Not in React: on phones the title, arrows and View All shrink so a long
   label (Promotions) keeps the row on one line. */
@media (max-width: 488px) {
  .wrapper .section__title { font-size: 1.375rem; }
  .section__nav { margin-right: 0; }
  .section__arrow .icon { font-size: 2rem; }
  .section__all { margin-left: 6px; }
  .view-all { padding: 2px 8px; font-size: 0.75rem; white-space: nowrap; }
}

/* react-slick carousel: slides per view set by --per-view. */
.carousel { width: 100%; padding: 0 15px; --per-view: 6; }
@media (max-width: 1400px) { .carousel { --per-view: 5; } }
@media (max-width: 1200px) { .carousel { --per-view: 4; } }
@media (max-width: 1024px) { .carousel { --per-view: 3; } }
@media (max-width: 600px) { .carousel { --per-view: 2; } }
@media (max-width: 480px) { .carousel { --per-view: 1; } }
/* pan-y: vertical drags scroll the page, horizontal ones go to js/carousel.js. */
.carousel__list { position: relative; overflow: hidden; touch-action: pan-y; }
.carousel__track {
  display: flex;
  transform: translate3d(0, 0, 0);
  transition: transform 500ms ease;
}
/* react-slick rounds the slide width up to a whole pixel (Math.ceil). */
.carousel__slide { flex: 0 0 round(up, calc(100% / var(--per-view)), 1px); min-width: 0; }
/* Phones: one card at 84% so the next card peeks in at the right edge. */
@media (max-width: 480px) { .carousel__slide { flex-basis: 84%; } }
.carousel__slot { display: inline-block; width: 100%; }
.carousel__pad { padding: 0 10px; }

/* ---------- Category page ---------- */
@media (min-width: 1024px) { .category { max-width: 1804px; margin: 0 auto; } }
/* 24px below the header, as the front page's sort bar has: the design 18 header has no
   built-in space under it. */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 24px 1rem 1rem;
}
.category__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.5em;
  margin-bottom: 1em;
}
.category__title-box { margin-left: 15px; }
.wrapper .category__title {
  flex-grow: 1;
  margin-left: 15px;
  text-align: left;
}
.grid {
  display: flex;
  flex-wrap: wrap;
  row-gap: 20px;
}
.grid__item { flex: 0 0 100%; max-width: 100%; padding: 0 16px; }
@media (min-width: 489px) { .grid__item { flex-basis: 50%; max-width: 50%; } }
@media (min-width: 1024px) { .grid__item { flex-basis: 25%; max-width: 25%; } }
/* Infinite-scroll loader under the category grid (js/category.js; not in React). */
.grid-loader { display: flex; justify-content: center; padding: 32px 0 48px; color: #f7f7f7; }
.grid-loader .spinner { width: 32px; height: 32px; border-width: 3px; margin: 0; }

/* ---------- "You are offline" page (js/offline-render.js renderOffline): design 5
   "Signal illustration" (tmp/offline-design-05.png), not in React ---------- */
.offline {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 220px);
  max-width: 420px;
  margin: 0 auto;
  padding: 32px 28px 48px;
  font-family: var(--mui-font);
  text-align: center;
}
/* Wifi-off mark inside three rings. */
.offline__signal {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 180px;
  margin-bottom: 20px;
  border: 1px solid rgba(50, 190, 185, 0.18);
  border-radius: 50%;
}
.offline__signal::before,
.offline__signal::after {
  content: '';
  position: absolute;
  border-radius: 50%;
}
.offline__signal::before { inset: 26px; border: 1px solid rgba(50, 190, 185, 0.3); }
.offline__signal::after { inset: 52px; border: 1px solid rgba(50, 190, 185, 0.5); background: rgba(50, 190, 185, 0.12); }
.offline__signal .icon { position: relative; z-index: 1; width: 40px; height: 40px; fill: #32beb9; }
.wrapper .offline__title { margin-bottom: 10px; font-size: 1.5rem; font-weight: 700; line-height: 1.25; color: #f7f7f7; }
.wrapper .offline__text { margin-bottom: 28px; font-size: 0.9375rem; line-height: 1.5; color: #bfbfbf; }
.offline__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  border: 1px solid #32beb9;
  border-radius: 999px;
  background: #32beb9;
  color: #0d0d0d;
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
}
.offline__button + .offline__button { margin-top: 10px; }
.offline__button .icon { width: 20px; height: 20px; fill: currentColor; }
.offline__button--ghost { border-color: #3a3a3a; background: none; color: #f7f7f7; }
.offline__button--ghost .icon { fill: #32beb9; }
.offline__button .spinner { width: 18px; height: 18px; margin: 0; }
.offline__button[aria-busy="true"] .spinner + .icon { display: none; }
.offline[data-busy] .offline__button:not([aria-busy]) { opacity: 0.5; pointer-events: none; }

/* ---------- Product detail page: design 2 "Hero with sticky buy bar" (tmp/product-design-02.png),
   which departs from React's ProductDetailPage.js ---------- */
.product {
  --product-panel: #1c1c1c;
  --product-line: #2a2a2a;
  --product-muted: #a3a3a3;
  font-family: var(--mui-font);
}
/* .wrapper's overflow-x: hidden makes it a scroll container, so the buy bar's
   position: sticky would never stick; clip hides the same overflow without that. */
.wrapper:has(.product) { overflow-x: clip; }
.product__grid { display: flex; flex-direction: column; }
.product__media,
.product__info { min-width: 0; }
.product__info { display: flex; flex-direction: column; padding: 0 16px; }

/* Hero: the photo full width, with back, ⋮ (js/shell.js) and the title on a gradient over it. */
.product__image-box {
  position: relative;
  width: 100%;
  height: min(100vw, 70vh);
  overflow: hidden;
  /* Placeholder until the photo paints over it; shows through when it cannot load (js/sw.js). */
  background: #000 url('../images/kure_lm_default_product_image_product.jpg') center / contain no-repeat;
}
.product__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
}
.product__image--empty { object-fit: contain; cursor: default; }
.product__back {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 11;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.7);
}
.product__back:hover { background-color: rgba(0, 0, 0, 0.9); }
.product__hero {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 72px 16px 16px;
  background: linear-gradient(rgba(18, 18, 18, 0), #121212 85%);
  pointer-events: none;
}
.product__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.product__tag {
  padding: 3px 8px;
  border-radius: 999px;
  background-color: rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
}
.product .product__title { font-size: 1.5rem; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }

.product .product__label {
  margin: 24px 0 10px;
  color: var(--product-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* Packages: radio rows, teal outline when selected. */
.packages { display: flex; flex-direction: column; gap: 8px; }
.package {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  outline: 1px solid transparent;
  background-color: var(--product-panel);
  color: #f7f7f7;
  text-decoration: none;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.package:hover { background-color: #242424; }
.package.is-selected { outline-color: #32beb9; }
.package__radio {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 2px solid #6b6b6b;
  border-radius: 50%;
}
.package.is-selected .package__radio { border-color: #32beb9; background-color: #32beb9; box-shadow: inset 0 0 0 3px var(--product-panel); }
.package__text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.package__uid { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8125rem; letter-spacing: 0.02em; overflow-wrap: anywhere; }
.package__meta { color: var(--product-muted); font-size: 0.75rem; }
.package__price { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; }
.package__now { font-size: 1.0625rem; font-weight: 700; }
.package__now--sale { color: #f87171; }
.package__was { color: var(--product-muted); font-size: 0.75rem; text-decoration: line-through; }
.package.is-out .package__uid,
.package.is-out .package__now { color: var(--product-muted); }

/* Apparel: color chips with a swatch dot, sizes as a grid of equal buttons. */
.choice-row { display: flex; flex-wrap: wrap; gap: 8px; }
.choice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 12px;
  border-radius: 999px;
  outline: 1.5px solid transparent;
  outline-offset: -1.5px;
  background-color: var(--product-panel);
  color: #f7f7f7;
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.choice:hover { background-color: #262626; }
.choice.is-selected { outline-color: #32beb9; }
.choice.is-disabled { color: #8c8c8c; text-decoration: line-through; cursor: default; }
.choice.is-disabled:hover { background-color: var(--product-panel); }
.choice__swatch {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
}
.choice-row--sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 6px; }
.choice--size { padding: 10px 0; border-radius: 8px; font-size: 0.875rem; font-weight: 600; }
.choice--size.is-selected { background-color: #32beb9; color: #0d0d0d; }

/* Details: two-column tiles. */
.product__description { margin-bottom: 12px; color: #e5e5e5; font-size: 0.9375rem; line-height: 1.5; }
.product__details { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.detail {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 10px;
  border-radius: 10px;
  background-color: var(--product-panel);
}
.detail dt { color: var(--product-muted); font-size: 0.75rem; }
.detail dd { margin: 0; font-size: 0.875rem; overflow-wrap: anywhere; }
.product .product__cash {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 16px 0;
  color: var(--product-muted);
  font-size: 0.8125rem;
}

/* Buy bar: sticks to the bottom of the screen until the end of the page content. */
.buy {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  gap: 10px;
  margin: auto -16px 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--product-line);
  background-color: rgba(18, 18, 18, 0.96);
}
.qty {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  height: 48px;
  border: 1px solid #3a3a3a;
  border-radius: 10px;
}
.qty__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: #cfcfcf;
  font-size: 20px;
  cursor: pointer;
}
.product .qty__input {
  width: 28px;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-family: var(--mui-font);
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
}
.buy__button {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  background-color: #32beb9;
  color: #0d0d0d;
  font-family: var(--mui-font);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.buy__button:hover { background-color: #2aa8a4; }
.buy__button:disabled { cursor: default; }
.buy__button:disabled:not([aria-busy="true"]) { background-color: #2a2a2a; color: var(--product-muted); }
.buy__label { display: inline-flex; align-items: center; }

@media (min-width: 768px) {
  .product { max-width: 1200px; margin: 24px auto 0; padding: 0 24px; }
  .product__grid { flex-direction: row; align-items: flex-start; gap: 32px; }
  .product__media { flex: 0 0 50%; }
  .product__image-box { height: auto; aspect-ratio: 1 / 1; border-radius: 16px; }
  .product__hero { padding: 96px 24px 24px; }
  .product .product__title { font-size: 2rem; }
  .product__info { flex: 1 1 0; padding: 0; }
  .product .product__label:first-child { margin-top: 0; }
  .buy { margin: auto 0 0; padding: 16px 0 calc(16px + env(safe-area-inset-bottom)); }
}

/* Photo viewer (js/product.js): Kure bar, teal-lit stage with zoom and pan, price and Add to cart.
   The root fades with .motion-fade; the photo eases up from 96 %. */
.viewer {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(ellipse 70% 55% at 50% 48%, rgba(50, 190, 185, 0.16), rgba(50, 190, 185, 0) 70%),
    linear-gradient(180deg, #0b0f0f 0%, #121212 45%, #0b0f0f 100%);
  color: var(--text-color);
  font-family: var(--mui-font);
  outline: none;
}
.viewer__bar {
  display: flex;
  flex: none;
  align-items: center;
  gap: 14px;
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
  border-bottom: 1px solid rgba(50, 190, 185, 0.22);
  background-color: rgba(10, 14, 14, 0.85);
}
.viewer__logo { flex: none; width: 72px; height: auto; }
.viewer__heading { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.viewer__tags {
  overflow: hidden;
  color: #32beb9;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.viewer__title {
  overflow: hidden;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.viewer__stage {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 20px;
  overflow: hidden;
  touch-action: none;
  cursor: zoom-in;
}
.viewer__stage.is-zoomed { cursor: grab; }
.viewer__stage.is-zoomed:active { cursor: grabbing; }
.viewer__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 60px rgba(0, 0, 0, 0.6);
  object-fit: contain;
  user-select: none;
  -webkit-user-select: none;
  transition: transform var(--motion-in) var(--motion-ease-out), scale var(--motion-in) var(--motion-ease-out), opacity var(--motion-in) var(--motion-ease-out);
}
.viewer__img.is-moving { transition: none; }
@starting-style {
  .viewer__img { scale: 0.96; opacity: 0; }
}
.viewer__stage.is-zoomed .viewer__img { border-radius: 0; }
.viewer__foot {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(50, 190, 185, 0.22);
  background-color: rgba(10, 14, 14, 0.85);
}
.viewer__hint { min-width: 0; color: #a3a3a3; font-size: 0.8125rem; line-height: 1.4; }
.viewer__buy {
  display: flex;
  flex: none;
  align-items: center;
  gap: 14px;
  height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  background-color: #32beb9;
  color: #0d0d0d;
  font-family: var(--mui-font);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background-color 150ms var(--motion-ease-out);
}
.viewer__buy:hover { background-color: #59e7e3; }
.viewer__buy:focus-visible { outline: 2px solid #f7f7f7; outline-offset: 2px; }
.viewer__buy:disabled { background-color: #3a4040; color: #8c9494; cursor: default; }
.viewer__price { padding-left: 14px; border-left: 1px solid rgba(13, 13, 13, 0.25); }
@media (min-width: 768px) {
  .viewer__bar { padding-inline: 28px; }
  .viewer__logo { width: 96px; }
  .viewer__title { font-size: 1.25rem; }
  .viewer__stage { padding: 32px; }
  .viewer__foot { padding-inline: 28px; }
}

/* Staff-only secondary action, in React's minimal link style (coupon toggle). */
.buy__pos {
  display: block;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
  background: none;
  color: #32beb9;
  font-family: var(--mui-font);
  font-size: 0.9rem;
  text-decoration: underline;
  cursor: pointer;
}
.buy__pos:disabled { opacity: 0.6; cursor: default; }
