@font-face {
      font-family: "TrebuchetMS";
      src: url("../fonts/TrebuchetMS.ttf") format("truetype");
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }

    :root {
      --page-bg: #fff6cf;
      --ink: #111;
      --blue: #75a8ee;
      --viewport-height: 100vh;
      --layout-width: clamp(1325px, 100vw, 1400px);
      --stage-width: 1325px;
      --page-min-height: 900px;
      --bg-offset-y: -15px;
      --bg-extra-height: 15px;
      --content-left: 14%;
      --content-top: 240px;
      --content-width: 72%;
      --content-height: 618px;
      --content-frame-border: 2px solid #111;
      --content-frame-gap: clamp(5px, calc(var(--layout-width) * 0.0045), 8px);
      --content-frame-padding: clamp(4px, calc(var(--layout-width) * 0.0038), 7px);
      --content-frame-bg: #f2f2f2;
      --page-menu-text: clamp(10px, calc(var(--layout-width) * 0.0092), 18px);
      --page-title-text: clamp(20px, calc(var(--layout-width) * 0.0178), 33px);
      --page-desc-text: clamp(12px, calc(var(--layout-width) * 0.0122), 20px);
      --page-micro-text: clamp(10px, calc(var(--layout-width) * 0.0092), 15px);
      --page-footer-text: clamp(15px, calc(var(--layout-width) * 0.0138), 26px);
      --page-copyline-text: clamp(13px, calc(var(--layout-width) * 0.0118), 22px);
      --panel-menu-text: clamp(13px, calc(var(--layout-width) * 0.0118), 22px);
      --panel-copyline-text: clamp(12px, calc(var(--layout-width) * 0.0108), 20px);
      --panel-body-text: calc(var(--panel-menu-text) * 1.15);
      --page-footer-height: 30px;
      --page-map-title-height: 30px;
      --page-map-height: 180px;
      --page-left-map-width: 18%;
      --watch-left-map-width: 18%;
      --watch-filter-width: calc(10.5% + 28px);
      --ontime-footer-height: 30px;
      --ontime-map-title-height: 30px;
      --ontime-map-height: 180px;
      --ontime-left-map-width: 14.4%;
      --ontime-article-text: clamp(18px, calc(var(--layout-width) * 0.0158), 29px);
      --livechat-trigger-width: 13.2%;
    }

    @supports (height: 100dvh) {
      :root {
        --viewport-height: 100dvh;
      }
    }

    * {
      box-sizing: border-box;
    }

    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      overflow-x: auto;
      overflow-y: auto;
    }

    /* Shell only: keep outer page from shrinking */
    html:has(.page),
    html:has(.page) body {
      min-width: 1325px;
      min-height: var(--page-min-height);
    }

    /* iframe content pages: never exceed the frame */
    html:has(.content-page) {
      --layout-width: min(100vw, 1400px);
      --stage-width: 100vw;
      min-width: 0;
      max-width: 100%;
      overflow: hidden;
    }

    html:has(.content-page) body {
      min-width: 0;
      min-height: 0;
      max-width: 100%;
      overflow: hidden;
    }

    body {
      color: var(--ink);
      background: var(--page-bg);
      font-family: "TrebuchetMS", sans-serif;
    }

    button,
    a {
      font: inherit;
    }

    .page {
      position: relative;
      width: 100%;
      min-width: 1325px;
      min-height: var(--page-min-height);
      height: max(var(--page-min-height), 100vh);
      height: max(var(--page-min-height), 100dvh);
      overflow: hidden;
      background-color: #fff3cb;
      isolation: isolate;
    }

    /* Wakayama-style layers: natural image size, no stretch */
    .page-bg-sky,
    .page-bg-castle,
    .page-bg-main,
    .page-bg-gnavi {
      position: absolute;
      left: 0;
      right: 0;
      pointer-events: none;
      z-index: 0;
    }

    .page-bg-sky {
      top: 0;
      /* extend past .wood-menu bottom */
      height: 251px;
      background-color: #fff;
      background-image: url("../../images/header_bg.jpg");
      background-repeat: repeat-x;
      background-position: center top;
    }

    .page-bg-castle {
      top: 0;
      height: 336px;
      background: url("../../images/topcastle.png") no-repeat center top;
    }

    .page-bg-main {
      top: 214px;
      height: 340px;
      background: #fff3cb url("../../images/main_bg.png") no-repeat center top;
    }

    .page-bg-gnavi {
      /* bottom-align with .wood-menu */
      top: 110px;
      height: 130px;
      background: url("../../images/topgnavi_bg.png") no-repeat center bottom;
      z-index: 1;
    }

    .top-products {
      position: absolute;
      left: 30%;
      top: 16px;
      z-index: 4;
      width: 27.2%;
      height: 122px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      align-items: start;
      justify-items: center;
      gap: 5.5%;
      pointer-events: none;
    }

    .product-slot {
      width: min(82%, calc(var(--layout-width) * 0.128));
      height: 100%;
      overflow: hidden;
      border: 0;
      background: transparent;
    }

    .product-slot img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .brand-tools {
      position: absolute;
      right: 15%;
      top: 16px;
      z-index: 5;
      height: 122px;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: space-between;
      width: max-content;
    }

    .brand-line {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: clamp(6px, calc(var(--layout-width) * 0.006), 10px);
      width: max-content;
      margin-top: 20px;
    }

    .brand-mark {
      display: inline-flex;
      align-items: center;
      min-height: clamp(18px, calc(var(--layout-width) * 0.02), 28px);
      padding: 0 clamp(4px, calc(var(--layout-width) * 0.0045), 8px);
      border: 1px solid #8d8d8d;
      color: #555;
      background: rgba(255, 255, 255, 0.68);
      font-family: "TrebuchetMS", sans-serif;
      font-size: clamp(12px, calc(var(--layout-width) * 0.011), 18px);
      font-weight: 700;
      line-height: 1;
      white-space: nowrap;
    }

    .since {
      color: #555;
      font-family: "TrebuchetMS", sans-serif;
      font-size: clamp(10px, calc(var(--layout-width) * 0.0085), 14px);
      white-space: nowrap;
    }

    .tool-bar {
      display: flex;
      gap: clamp(8px, calc(var(--layout-width) * 0.009), 16px);
    }

    .tool-button {
      position: relative;
      display: grid;
      place-items: center;
      width: clamp(31px, calc(var(--layout-width) * 0.0325), 52px);
      aspect-ratio: 1;
      padding: 0;
      border: 0;
      border-radius: clamp(7px, calc(var(--layout-width) * 0.0075), 12px);
      color: #fff;
      background: var(--blue);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
    }

    .tool-badge {
      position: absolute;
      top: -5px;
      right: -5px;
      z-index: 2;
      min-width: 16px;
      height: 16px;
      padding: 0 4px;
      display: none;
      place-items: center;
      border-radius: 999px;
      background: #e12626;
      color: #fff;
      font-family: "TrebuchetMS", sans-serif;
      font-size: 10px;
      font-weight: 800;
      line-height: 1;
      pointer-events: none;
    }

    .tool-button.has-badge .tool-badge {
      display: grid;
    }

    .tool-button svg {
      width: 64%;
      height: 64%;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.25;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .wood-menu {
      position: absolute;
      left: 14.1%;
      top: 180px;
      z-index: 6;
      width: 71.1%;
      height: 63px;
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      align-items: center;
    }

    .wood-menu a {
      display: grid;
      place-items: center;
      height: 100%;
      min-width: 0;
      color: #090909;
      text-align: center;
      text-decoration: none;
      font-size: clamp(18px, calc(var(--layout-width) * 0.02), 39px);
      font-weight: 900;
      line-height: 1;
      letter-spacing: 0;
      text-shadow:
        -1.6px -1.6px 0 #fff,
        1.6px -1.6px 0 #fff,
        -1.6px 1.6px 0 #fff,
        1.6px 1.6px 0 #fff,
        3px 3px 0 rgba(0, 0, 0, 0.42);
      white-space: nowrap;
    }

    .content-space {
      position: absolute;
      left: var(--content-left);
      top: var(--content-top);
      z-index: 2;
      width: var(--content-width);
      height: var(--content-height);
      overflow: hidden;
      pointer-events: auto;
    }

    .home-content {
      display: grid;
      grid-template-rows: 69.5% 24.7% 5.8%;
    }

    .home-main {
      display: grid;
      grid-template-columns: 70% 30%;
      min-height: 0;
      border-bottom: 2px solid #111;
    }

    .promo {
      position: relative;
      overflow: hidden;
      border-right: 2px solid #111;
      background: #fff;
    }

    .promo-stage {
      position: absolute;
      left: 22%;
      top: 8%;
      width: 56%;
      height: 78%;
    }

    .date-pill {
      position: absolute;
      left: 13%;
      top: 18%;
      min-width: 15%;
      padding: 0.55% 2.6%;
      border: 3px solid #555;
      border-radius: 999px;
      background: #fff;
      color: #111;
      text-align: center;
      font-size: clamp(12px, calc(var(--layout-width) * 0.015), 28px);
      font-weight: 900;
      line-height: 1.08;
      white-space: nowrap;
    }

    .sale-text {
      position: absolute;
      left: 54%;
      top: 11%;
      color: #f00;
      font-size: clamp(21px, calc(var(--layout-width) * 0.0255), 48px);
      font-weight: 900;
      line-height: 1;
      transform: rotate(-2deg);
      white-space: nowrap;
    }

    .sale-arrow {
      position: absolute;
      left: 29%;
      top: 3%;
      width: 35%;
      height: 24%;
      border-top: clamp(3px, calc(var(--layout-width) * 0.0035), 7px) dashed #f00;
      border-radius: 90% 0 0 0;
      transform: rotate(-13deg);
    }

    .sale-arrow::after {
      position: absolute;
      right: -2%;
      top: -13%;
      width: 9%;
      aspect-ratio: 1;
      content: "";
      border-top: clamp(3px, calc(var(--layout-width) * 0.0035), 7px) solid #f00;
      border-right: clamp(3px, calc(var(--layout-width) * 0.0035), 7px) solid #f00;
      transform: rotate(42deg);
    }

    .tea-card {
      position: absolute;
      left: 25%;
      top: 40%;
      width: 27%;
      height: 36%;
      display: grid;
      place-items: end center;
      padding-bottom: 2%;
      color: #161616;
      background:
        radial-gradient(circle at 58% 45%, rgba(110, 166, 142, 0.8) 0 15%, transparent 16%),
        radial-gradient(circle at 42% 52%, rgba(236, 157, 167, 0.8) 0 14%, transparent 15%),
        linear-gradient(135deg, #f3f0e6, #e3e0d7);
      border-radius: 50%;
      font-size: clamp(8px, calc(var(--layout-width) * 0.0048), 9px);
      font-weight: 900;
      text-align: center;
    }

    .tea-card::before {
      position: absolute;
      left: -10%;
      top: 17%;
      content: "茶";
      width: 22%;
      height: 34%;
      display: grid;
      place-items: center;
      color: #fff;
      background: #8d9687;
      font-size: clamp(9px, calc(var(--layout-width) * 0.01), 18px);
      font-weight: 800;
      writing-mode: vertical-rl;
    }

    .promo-watch {
      position: absolute;
      left: 52%;
      top: 31%;
      width: 40%;
      height: 55%;
      object-fit: contain;
      filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.22));
    }

    .casio-label {
      position: absolute;
      left: 59%;
      top: 83%;
      color: #164098;
      font-size: clamp(14px, calc(var(--layout-width) * 0.017), 32px);
      font-weight: 900;
      letter-spacing: 0;
    }

    .pager {
      display: flex;
      align-items: center;
      gap: clamp(4px, calc(var(--layout-width) * 0.004), 8px);
    }

    .promo-pager {
      position: absolute;
      left: 3.2%;
      bottom: 5.4%;
    }

    .pager button {
      min-width: clamp(17px, calc(var(--layout-width) * 0.0135), 27px);
      height: clamp(16px, calc(var(--layout-width) * 0.0135), 26px);
      padding: 0 4px;
      border: 1px solid #4774bb;
      color: #24539f;
      background: #fff;
      font-family: "TrebuchetMS", sans-serif;
      font-size: clamp(10px, calc(var(--layout-width) * 0.01), 18px);
      font-weight: 800;
      line-height: 1;
    }

    .pager .active {
      color: #fff;
      background: #4774bb;
    }

    .pager .stop {
      color: #111;
      background: #fff;
    }

    .timeline {
      position: relative;
      min-width: 0;
      display: grid;
      grid-template-rows: auto auto minmax(0, 1fr);
      overflow: hidden;
      padding: 4.7% 4% 2.4%;
      color: #111;
      font-family: "TrebuchetMS", sans-serif;
      font-size: clamp(8px, calc(var(--layout-width) * 0.006), 12px);
      line-height: 1.22;
      background: #fff;
    }

    .timeline-codes {
      display: flex;
      justify-content: center;
      gap: clamp(6px, calc(var(--layout-width) * 0.0065), 12px);
      margin-bottom: 4%;
    }

    .timeline-codes button {
      width: clamp(26px, calc(var(--layout-width) * 0.021), 40px);
      height: clamp(26px, calc(var(--layout-width) * 0.021), 40px);
      display: grid;
      place-items: center;
      padding: 0;
      border: 2px solid #4774bb;
      border-radius: 3px;
      color: #4774bb;
      background: #fff;
      box-shadow: 0 0 0 1px rgba(71, 116, 187, 0.22), inset 0 0 0 1px rgba(255, 255, 255, 0.55);
      font-family: "TrebuchetMS", sans-serif;
      font-size: clamp(14px, calc(var(--layout-width) * 0.013), 24px);
      font-weight: 900;
      line-height: 1;
      cursor: pointer;
    }

    .timeline-codes button[aria-checked="true"],
    .timeline-codes button.active {
      color: #fff;
      background: #4774bb;
    }

    .timeline-codes button:focus-visible {
      outline: 2px solid #164098;
      outline-offset: 2px;
    }

    .timeline h2 {
      display: flex;
      align-items: center;
      min-height: 50px;
      margin: 0 0 2.8%;
      color: #164098;
      font-size: clamp(11px, calc(var(--layout-width) * 0.01), 18px);
      line-height: 1;
      font-weight: 900;
    }

    .timeline-brand-logo {
      display: block;
      width: auto;
      max-width: 92%;
      height: 30px;
      object-fit: contain;
    }

    .timeline-brand-logo[alt="ORIENT"] {
      height: 50px;
    }

    .timeline-body {
      position: relative;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    .timeline-body::-webkit-scrollbar {
      display: none;
    }

    .timeline-body > img {
      float: right;
      width: 32%;
      max-height: 58%;
      margin: 0 0 3% 5%;
      object-fit: contain;
      cursor: default;
    }

    .timeline-body > img[hidden] {
      display: none;
    }

    .timeline-list {
      min-height: 0;
      overflow: visible;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .timeline-list li {
      display: flex;
      align-items: baseline;
      gap: clamp(4px, calc(var(--layout-width) * 0.004), 8px);
      margin: 0 0 2.6%;
      overflow-wrap: anywhere;
      font-size: var(--page-footer-text);
      line-height: 1.35;
    }

    .timeline-list time {
      display: block;
      color: #164098;
      font-weight: 900;
      line-height: 1.35;
      white-space: nowrap;
      font-size: 1em;
    }

    .timeline-list span {
      display: block;
      min-width: 0;
      line-height: 1.35;
    }

    .info-grid {
      display: grid;
      grid-template-columns: 14.5% 16.6% 15.8% 1fr;
      min-height: 0;
      overflow: hidden;
      border-bottom: 2px solid #111;
      background: #bdbdbd;
    }

    .info-cell {
      position: relative;
      min-width: 0;
      overflow: hidden;
      border-right: 2px solid #111;
      color: #fff;
      text-align: center;
    }

    .info-cell:last-child {
      border-right: 0;
    }

    .info-title {
      height: 21%;
      display: grid;
      place-items: center;
      border-bottom: 2px solid #111;
      color: #111;
      background: #bdbdbd;
      font-size: var(--page-copyline-text);
      line-height: 1;
      white-space: nowrap;
    }

    .map-small {
      width: 100%;
      height: 79%;
      object-fit: fill;
      filter: grayscale(0.15) contrast(0.88);
    }

    .weather-icon {
      position: relative;
      display: block;
      width: clamp(34px, calc(var(--layout-width) * 0.04), 76px);
      height: clamp(34px, calc(var(--layout-width) * 0.04), 76px);
      margin: 9% auto 2%;
    }

    .weather-forecast-image {
      display: block;
      width: 92%;
      height: 78%;
      margin: auto;
      object-fit: contain;
    }

    .weather-compact-slot,
    .ontime-weather-cell {
      --weather-card-width: clamp(88px, calc(var(--layout-width) * 0.0655), 126px);
      --weather-card-pad-y: clamp(4px, calc(var(--layout-width) * 0.004), 7px);
      --weather-card-inset: clamp(7px, calc(var(--layout-width) * 0.008), 12px);
      display: grid;
      place-items: center;
      padding: 0;
      background: transparent;
    }

    .weather-compact-slot {
      height: var(--page-map-height);
    }

    .weather-card {
      position: relative;
      width: min(100%, var(--weather-card-width));
      height: calc(100% - var(--weather-card-inset));
      max-height: 152px;
      display: grid;
      grid-template-rows: minmax(0, 1fr) auto;
      row-gap: clamp(2px, calc(var(--layout-width) * 0.0028), 5px);
      align-items: center;
      justify-items: center;
      padding: var(--weather-card-pad-y) 0;
      overflow: hidden;
      border: 0;
      background: transparent;
      color: #153245;
      text-align: center;
      text-decoration: none;
      box-shadow: none;
    }

    .weather-card::before {
      display: none;
      position: absolute;
      inset: 0;
      content: "";
      background:
        radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.95) 0 10%, transparent 11%),
        radial-gradient(circle at 52% 18%, rgba(255, 255, 255, 0.75) 0 14%, transparent 15%),
        radial-gradient(circle at 84% 30%, rgba(255, 255, 255, 0.65) 0 9%, transparent 10%);
      opacity: 0.68;
      pointer-events: none;
    }

    .weather-card > * {
      position: relative;
      z-index: 1;
    }

    .weather-card.is-loading {
      opacity: 0.72;
      pointer-events: none;
      color: #777;
      background: transparent;
    }

    .weather-card-visual {
      display: grid;
      width: 100%;
      height: 100%;
      min-width: 0;
      min-height: 0;
      place-items: center;
    }

    .weather-dynamic-image {
      display: block;
      width: auto;
      max-width: 84%;
      height: 100%;
      max-height: 100%;
      background: transparent;
      object-fit: contain;
      transform: scale(1.16);
      transform-origin: center;
    }

    .weather-live-stack {
      display: grid;
      align-content: center;
      gap: 1px;
      width: 100%;
      height: auto;
      min-width: 0;
      color: #153245;
      overflow: hidden;
    }

    .weather-temp-live {
      display: block;
      font-size: clamp(18px, calc(var(--layout-width) * 0.019), 31px);
      font-weight: 400;
      line-height: 1;
      white-space: nowrap;
    }

    .weather-condition-live,
    .weather-source-live {
      display: block;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: clamp(8px, calc(var(--layout-width) * 0.0072), 11px);
      line-height: 1;
      white-space: nowrap;
    }

    .weather-source-live {
      color: inherit;
      opacity: 0.72;
    }

    .sun {
      border-radius: 50%;
      background: #f7c52f;
      box-shadow:
        0 -17px 0 -12px #f7c52f,
        0 17px 0 -12px #f7c52f,
        17px 0 0 -12px #f7c52f,
        -17px 0 0 -12px #f7c52f,
        12px 12px 0 -12px #f7c52f,
        -12px -12px 0 -12px #f7c52f,
        12px -12px 0 -12px #f7c52f,
        -12px 12px 0 -12px #f7c52f;
    }

    .cloud {
      margin-top: 13%;
      height: clamp(24px, calc(var(--layout-width) * 0.031), 58px);
      border-radius: 999px;
      background:
        radial-gradient(circle at 28% 42%, #b7d6ef 0 27%, transparent 28%),
        radial-gradient(circle at 50% 34%, #9cc7e7 0 32%, transparent 33%),
        radial-gradient(circle at 72% 50%, #8fb9dc 0 25%, transparent 26%),
        linear-gradient(#a8cee9, #8ebada);
    }

    .weather-temp {
      display: block;
      font-size: clamp(10px, calc(var(--layout-width) * 0.01), 20px);
      font-weight: 700;
      line-height: 1;
    }

    .doraemon-cell {
      color: #111;
    }

    .doraemon {
      position: absolute;
      left: 50%;
      top: 58%;
      width: clamp(48px, calc(var(--layout-width) * 0.05), 96px);
      aspect-ratio: 0.78;
      transform: translate(-50%, -50%);
    }

    .doraemon::before {
      position: absolute;
      left: 8%;
      top: 0;
      width: 84%;
      height: 72%;
      content: "";
      border-radius: 50%;
      background:
        radial-gradient(circle at 36% 38%, #111 0 5%, transparent 5.5%),
        radial-gradient(circle at 64% 38%, #111 0 5%, transparent 5.5%),
        radial-gradient(circle at 50% 55%, #f0a033 0 6%, transparent 6.5%),
        radial-gradient(circle at 50% 50%, #fff 0 47%, transparent 48%),
        #f1a433;
      border: 2px solid #ca8a2a;
    }

    .doraemon::after {
      position: absolute;
      left: 29%;
      bottom: 0;
      width: 42%;
      height: 42%;
      content: "";
      border-radius: 50% 50% 38% 38%;
      background: #f1a433;
      box-shadow:
        -22px -8px 0 -12px #f1a433,
        22px -8px 0 -12px #f1a433,
        -18px 20px 0 -13px #f1a433,
        18px 20px 0 -13px #f1a433;
      border: 2px solid #ca8a2a;
    }

    .footer-pager {
      position: absolute;
      right: 2%;
      bottom: 7%;
    }

    .copyright {
      display: flex;
      align-items: center;
      padding-left: 1%;
      overflow: hidden;
      color: #111;
      background: #d0d0d0;
      font-size: clamp(10px, calc(var(--layout-width) * 0.01), 18px);
      white-space: nowrap;
    }

    .content-page {
      width: 100%;
      height: 100%;
    }

    .content-page[hidden] {
      display: none;
    }

    .frame {
      width: 100%;
      height: 100%;
      overflow: hidden;
      border: var(--content-frame-border);
      background: #fff;
      font-family: "TrebuchetMS", sans-serif;
    }

    .watch-catalog-frame,
    .detail-frame,
    .new-detail-frame,
    .offer-account-frame {
      gap: var(--content-frame-gap);
      padding: var(--content-frame-padding);
      overflow: hidden;
      border: 0;
      background: var(--content-frame-bg);
    }

    .watch-catalog-frame.frame,
    .detail-frame.frame,
    .new-detail-frame.frame,
    .offer-account-frame.frame {
      border: 0;
      background: var(--content-frame-bg);
    }

    .watch-catalog-frame > *,
    .detail-frame > *,
    .new-detail-frame > *,
    .offer-account-frame > * {
      box-sizing: border-box;
      min-width: 0;
      min-height: 0;
    }

    .article-page {
      --article-left-width: 47%;
      --article-pad-top: 5.2%;
      --article-pad-right: 10%;
      --article-pad-bottom: 4.2%;
      --article-pad-left: 4.5%;
      display: grid;
      grid-template-columns: var(--article-left-width) minmax(0, calc(100% - var(--article-left-width)));
      grid-template-rows: minmax(0, 1fr) calc(var(--page-map-title-height) + var(--page-map-height)) var(--page-footer-height);
    }

    .article-page > * {
      box-sizing: border-box;
      min-width: 0;
      min-height: 0;
    }

    .movement-board {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(2, 32%) 36%;
      overflow: hidden;
      border-right: 2px solid #111;
      border-bottom: 2px solid #111;
      background: #fff;
    }

    .japanese-image-board {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      grid-template-rows: repeat(3, minmax(0, 1fr));
    }

    .movement-tile {
      position: relative;
      display: grid;
      place-items: end center;
      padding: 4% 4% 8%;
      border-right: 1px solid #bbb;
      border-bottom: 1px solid #bbb;
      color: #333;
      font-size: clamp(8px, calc(var(--layout-width) * 0.0055), 11px);
      font-weight: 800;
      line-height: 1.05;
      text-align: center;
    }

    .movement-image-tile {
      display: flex;
      align-items: stretch;
      min-width: 0;
      min-height: 0;
      margin: 0;
      overflow: hidden;
      padding: 0;
      border: 0;
      background: #f1f3f7;
    }

    .movement-image-box {
      align-self: stretch;
      min-width: 0;
      min-height: 0;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: stretch;
      justify-content: center;
      overflow: hidden;
    }

    .movement-image-tile img {
      display: block;
      width: 100%;
      max-width: 100%;
      height: 100%;
      max-height: 100%;
      object-fit: fill;
    }

    .movement-tile:nth-child(4n) {
      border-right: 0;
    }

    .movement-tile::before {
      position: absolute;
      top: 9%;
      width: 48%;
      aspect-ratio: 1;
      content: "";
      border-radius: 50%;
      background:
        radial-gradient(circle at 50% 50%, #fff 0 18%, transparent 19%),
        conic-gradient(from 0deg, #d99b3b, #f5d389, #93551d, #d99b3b);
      border: 2px solid #ddd;
      box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.45);
    }

    .movement-tile:nth-child(1)::before,
    .movement-tile:nth-child(5)::before,
    .movement-tile:nth-child(9)::before {
      background:
        radial-gradient(circle at 50% 50%, #fff 0 23%, transparent 24%),
        conic-gradient(#ececec, #cfcfcf, #fff, #b8b8b8, #ececec);
    }

    .movement-title {
      grid-column: span 2;
      display: grid;
      place-items: start;
      padding: 5%;
      border-bottom: 0;
      color: #111;
      font-size: clamp(19px, calc(var(--layout-width) * 0.017), 34px);
      font-weight: 500;
      line-height: 1.15;
      text-align: left;
    }

    .movement-image-title {
      grid-column: span 2;
      display: grid;
      place-items: center start;
      min-width: 0;
      min-height: 0;
      padding: 7%;
      color: #111;
      font-size: clamp(19px, calc(var(--layout-width) * 0.017), 34px);
      font-weight: 500;
      line-height: 1.15;
      text-align: left;
    }

    .article-scroll {
      position: relative;
      grid-column: 2;
      grid-row: 1 / 3;
      overflow-x: hidden;
      overflow-y: scroll;
      padding: var(--article-pad-top) var(--article-pad-right) var(--article-pad-bottom) var(--article-pad-left);
      border-bottom: 2px solid #111;
      color: #202020;
      font-size: 15px;
      line-height: 1.18;
      scrollbar-color: #777 #eee;
      scrollbar-width: thin;
    }

    .article-scroll::-webkit-scrollbar {
      width: clamp(12px, calc(var(--layout-width) * 0.012), 22px);
    }

    .article-scroll::-webkit-scrollbar-track {
      background: #eee;
      border-left: 2px solid #777;
    }

    .article-scroll::-webkit-scrollbar-thumb {
      background: #777;
    }

    .article-scroll h2,
    .article-scroll p {
      margin: 0 0 2.2%;
      font-size: 1em;
      font-weight: 500;
      line-height: inherit;
    }

    .article-scroll h2 {
      font-weight: 700;
    }

    .article-scroll h1 {
      margin: 0 0 2.8%;
      color: #111;
      font-size: clamp(22px, calc(var(--layout-width) * 0.02), 40px);
      line-height: 1.05;
      letter-spacing: 0;
    }

    /* 首段与后文同字号，避免被当成更大的 lead */
    .article-scroll h1 + p {
      font-size: 1em;
      font-weight: 500;
      line-height: inherit;
    }

    .article-eyebrow {
      color: #8b5a22;
      font-weight: 900;
      text-transform: uppercase;
    }

    .japanese-doc-image {
      display: block;
      width: 100%;
      max-height: 39%;
      margin: 3.2% 0;
      object-fit: contain;
      background: #f4f4f4;
    }

    .japanese-doc-image[src*="doc-comparison"] {
      background: #fff;
    }

    .movement-photo {
      width: 100%;
      height: 31%;
      overflow: hidden;
      margin: 3.2% 0 0;
      background:
        radial-gradient(circle at 70% 44%, #dadada 0 9%, transparent 10%),
        radial-gradient(circle at 62% 46%, #f3d27d 0 4%, transparent 5%),
        radial-gradient(circle at 80% 40%, #bfc3c7 0 8%, transparent 9%),
        linear-gradient(135deg, #17171b 0 30%, #56545f 30% 62%, #efefef 62% 100%);
    }

    .fake-scroll {
      position: absolute;
      top: 0;
      right: 0;
      width: 3.5%;
      height: 100%;
      border-left: 2px solid #777;
      background: #eee;
    }

    .fake-scroll::before,
    .fake-scroll::after {
      position: absolute;
      left: 0;
      width: 100%;
      height: 6%;
      display: grid;
      place-items: center;
      color: #555;
      font-size: clamp(10px, calc(var(--layout-width) * 0.01), 18px);
      line-height: 1;
    }

    .fake-scroll::before {
      top: 0;
      content: "^";
    }

    .fake-scroll::after {
      bottom: 0;
      content: "v";
    }

    .fake-scroll span {
      position: absolute;
      left: 20%;
      top: 9%;
      width: 60%;
      height: 70%;
      background: #777;
    }

    .compact-info {
      grid-column: 1;
      grid-row: 2;
      display: grid;
      grid-template-columns: 30% 35% 35%;
      min-height: 0;
      overflow: hidden;
      border-right: 2px solid #111;
      background: #bdbdbd;
    }

    .compact-info .info-title {
      height: var(--page-map-title-height);
    }

    .compact-info .map-small {
      height: var(--page-map-height);
    }

    .compact-info .info-cell:last-child {
      border-right: 0;
    }

    .japanese-copyline {
      grid-column: 1 / -1;
      grid-row: 3;
    }

    .ontime-article::-webkit-scrollbar {
      width: clamp(10px, calc(var(--layout-width) * 0.009), 16px);
    }

    .ontime-article::-webkit-scrollbar-track {
      background: #eee;
      border-left: 2px solid #777;
    }

    .ontime-article::-webkit-scrollbar-thumb {
      background: #777;
    }

    .new-detail-frame.ontime-frame {
      display: grid;
      gap: 0;
      grid-template-columns: minmax(0, 69%) minmax(0, 31%);
      grid-template-rows: minmax(0, 69.7fr) minmax(0, 30.3fr);
    }

    .ontime-article {
      position: relative;
      min-width: 0;
      overflow-x: hidden;
      overflow-y: scroll;
      border: 2px solid #111;
      border-right: 0;
      border-bottom: 0;
      background: #fff;
      scrollbar-gutter: stable;
      scrollbar-color: #777 #eee;
      scrollbar-width: thin;
    }

    .ontime-article-hero {
      margin: 0;
      overflow: hidden;
      border-bottom: 2px solid #111;
      background: #fff;
    }

    .ontime-article-hero img {
      display: block;
      width: 100%;
      height: auto;
      object-fit: contain;
    }

    .ontime-article-art {
      height: 51%;
      border-bottom: 2px solid #111;
      background:
        linear-gradient(128deg, transparent 0 25%, #26313a 25% 31%, transparent 31%),
        linear-gradient(18deg, #f4df9f 0 10%, #111 10% 12%, transparent 12%),
        linear-gradient(150deg, #d14237 0 34%, transparent 34%),
        radial-gradient(circle at 64% 42%, #d5443a 0 9%, transparent 9.5%),
        repeating-linear-gradient(8deg, #111 0 4px, transparent 4px 10px),
        #e9d795;
      background-size: cover;
    }

    .ontime-article-copy {
      padding: 1.4% 3.1% 2%;
      color: #222;
      font-size: var(--page-footer-text);
      line-height: 1.35;
    }

    .ontime-article-copy p,
    .ontime-article-copy h2,
    .ontime-article-inline-image {
      margin: 0 0 2.1%;
      font-size: 1em;
    }

    .ontime-article-copy > p:first-child {
      font-size: 1em;
      font-weight: 400;
      line-height: inherit;
    }

    .ontime-article-copy h2 {
      color: #111;
      font-size: 1em;
      font-weight: 700;
      line-height: 1.08;
    }

    .ontime-timeline {
      min-width: 0;
      border: 2px solid #111;
      border-bottom: 0;
      font-size: var(--page-footer-text);
      line-height: 1.35;
    }

    .ontime-timeline .timeline-list,
    .ontime-timeline .timeline-list li,
    .ontime-timeline .timeline-list time,
    .ontime-timeline .timeline-list span {
      font-size: var(--page-footer-text);
      line-height: 1.35;
    }

    .ontime-article-inline-image {
      width: 100%;
    }

    .ontime-article-inline-image img {
      display: block;
      width: 100%;
      height: auto;
      object-fit: contain;
    }

    .ontime-timeline h2 {
      font-size: var(--page-title-text);
    }

    .new-info-table.ontime-info-table {
      grid-column: 1 / -1;
      grid-row: 2;
      grid-template-rows: minmax(0, 15fr) minmax(0, 70fr) minmax(0, 15fr);
    }

    .new-tabs.ontime-info-tabs {
      grid-template-columns: var(--ontime-left-map-width) 16.6% 15.8% 1fr;
    }

    .ontime-info-tabs button {
      display: grid;
      place-items: center;
      padding: 0;
      text-align: center;
    }

    .new-bottom.ontime-bottom {
      grid-template-columns: var(--ontime-left-map-width) 16.6% 15.8% 1fr;
    }

    .ontime-bottom > div {
      min-width: 0;
      overflow: hidden;
      border-right: 2px solid #111;
    }

    .ontime-bottom > div:last-child {
      border-right: 0;
    }

    .ontime-weather-cell,
    .ontime-doraemon-cell {
      position: relative;
      display: grid;
      place-items: center;
      color: #fff;
      background: #bdbdbd;
      text-align: center;
    }

    .ontime-weather-cell .weather-icon {
      margin: 0 auto 5%;
    }

    .ontime-doraemon-cell {
      position: relative;
      overflow: hidden;
      color: #111;
    }

    .ontime-doraemon-carousel {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
    }

    .ontime-doraemon-slide {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff;
      pointer-events: none;
    }

    .ontime-doraemon-slide[hidden] {
      display: none;
    }

    .ontime-doraemon-slide img {
      display: block;
      width: auto;
      height: 100%;
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }

    .ontime-pager {
      right: 2.2%;
      bottom: 8%;
      z-index: 3;
      pointer-events: auto;
    }

    .home-carousel {
      display: grid;
      grid-template-rows: minmax(0, 1fr) clamp(34px, 5.5vh, 58px);
      overflow: hidden;
      background: #fff;
    }

    .home-slides {
      position: relative;
      min-width: 0;
      min-height: 0;
      overflow: hidden;
    }

    .home-slide {
      position: absolute;
      inset: 0;
      margin: 0;
      background: #fff;
    }

    .home-slide-media {
      --home-slide-gap: clamp(4px, calc(var(--layout-width) * 0.0075), 12px);
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;
      padding: var(--home-slide-gap);
      box-sizing: border-box;
      background: #fff;
      cursor: pointer;
    }

    .home-slide-media img,
    .home-slide-media video {
      position: absolute;
      inset: var(--home-slide-gap);
      display: block;
      width: calc(100% - var(--home-slide-gap) * 2);
      height: calc(100% - var(--home-slide-gap) * 2);
      max-width: calc(100% - var(--home-slide-gap) * 2);
      max-height: calc(100% - var(--home-slide-gap) * 2);
      object-fit: contain !important;
      background: #fff;
    }

    .home-video-play {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 4;
      display: grid;
      place-items: center;
      width: clamp(48px, calc(var(--layout-width) * 0.058), 76px);
      height: clamp(48px, calc(var(--layout-width) * 0.058), 76px);
      padding: 0;
      border: 2px solid #111;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.9);
      box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.28);
      transform: translate(-50%, -50%);
      cursor: pointer;
    }

    .home-video-play span {
      display: block;
      width: 0;
      height: 0;
      margin-left: 8%;
      border-top: clamp(10px, calc(var(--layout-width) * 0.012), 16px) solid transparent;
      border-bottom: clamp(10px, calc(var(--layout-width) * 0.012), 16px) solid transparent;
      border-left: clamp(16px, calc(var(--layout-width) * 0.019), 26px) solid #111;
    }

    .home-slide.is-video-playing .home-video-play {
      display: none;
    }

    .home-carousel-controls {
      display: flex;
      align-items: center;
      gap: clamp(5px, calc(var(--layout-width) * 0.0048), 9px);
      min-width: 0;
      padding: 0 3.4%;
      background: #fff;
    }

    .home-carousel-controls button {
      min-width: clamp(17px, calc(var(--layout-width) * 0.015), 27px);
      height: clamp(16px, calc(var(--layout-width) * 0.0147), 26px);
      border: 2px solid #3a86cb;
      background: #fff;
      color: #111;
      font-size: clamp(10px, calc(var(--layout-width) * 0.0103), 19px);
      font-weight: 500;
      line-height: 1;
    }

    .home-carousel-controls [data-carousel-stop] {
      min-width: clamp(29px, calc(var(--layout-width) * 0.0267), 48px);
    }

    .home-carousel-controls button.active {
      background: #4b78c2;
      color: #fff;
    }

    .home-timeline .timeline-body {
      overflow-y: auto;
      overflow-x: hidden;
    }

    .home-timeline h2 {
      color: #3d73bd;
      margin-left: 0;
    }

    .home-timeline .timeline-list {
      grid-column: 1;
    }

    .home-timeline .timeline-body > img {
      float: right;
      width: 32%;
      max-height: 58%;
      margin: 0 0 3% 5%;
      object-fit: contain;
    }

    .listing-frame {
      display: grid;
      grid-template-columns: 15% 73.7% 11.3%;
      grid-template-rows: minmax(0, 1fr) var(--page-footer-height);
      color: #222;
    }

    .category-side {
      grid-row: 1;
      overflow: hidden;
      border-right: 2px solid #111;
      background: #edc89a;
    }

    .category-side h2,
    .category-side a {
      height: 9.3%;
      display: flex;
      align-items: center;
      margin: 0;
      padding-left: 6%;
      border-bottom: 2px solid #bd854b;
      color: #4b2a13;
      font-size: var(--page-menu-text);
      font-weight: 900;
      text-decoration: none;
    }

    .category-side .side-map-title {
      height: var(--page-map-title-height);
      display: grid;
      place-items: center;
      color: #222;
      background: #fff;
      font-size: var(--page-menu-text);
    }

    .category-side .side-map {
      width: calc(100% - 4%);
      height: var(--page-map-height);
      margin: 0 2%;
      object-fit: fill;
      border: 3px solid #111;
      filter: grayscale(0.15) contrast(0.88);
    }

    .product-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      overflow: hidden;
    }

    .product-card {
      position: relative;
      display: block;
      padding: 3% 7% 1.5% 23%;
      overflow: hidden;
      border-right: 2px solid #333;
      border-bottom: 2px solid #333;
      color: #111;
      text-decoration: none;
      font-size: var(--page-desc-text);
      line-height: 1.05;
    }

    .product-card:nth-child(3n) {
      border-right: 0;
    }

    .product-card img {
      display: block;
      width: 52%;
      height: 51%;
      margin: 0 auto 1.5%;
      object-fit: contain;
    }

    .product-card h3 {
      margin: 0;
      font-size: inherit;
      font-weight: 500;
    }

    .product-card strong {
      display: block;
      font-weight: 500;
    }

    .ribbon {
      position: absolute;
      left: 0;
      top: 0;
      padding: 1.8% 4%;
      border-radius: 0 0 9px 0;
      background: #ead0ad;
      color: #3f2916;
      font-size: var(--page-micro-text);
    }

    .badge {
      display: inline-grid;
      place-items: center;
      min-width: clamp(14px, calc(var(--layout-width) * 0.01), 20px);
      min-height: clamp(13px, calc(var(--layout-width) * 0.009), 18px);
      padding: 0 4px;
      color: #fff;
      background: #168450;
      font-size: var(--page-micro-text);
      font-weight: 800;
      line-height: 1;
    }

    .badge.red { background: #b71621; }
    .badge.black { background: #252525; }
    .badge.tan { background: #9b735f; }
    .badge.blue { background: #22b9d1; }
    .badge.gold { background: #ddb33d; }
    .badge.white { background: #e8e8e8; color: #bbb; }

    .filter-side {
      overflow: hidden;
      padding: 3% 5%;
      border-left: 2px solid #111;
      color: #222;
      font-size: var(--page-desc-text);
      line-height: 1.05;
    }

    .filter-side h3 {
      margin: 0;
      font-size: var(--page-menu-text);
      line-height: 1;
    }

    .filter-side input {
      width: 100%;
      height: clamp(15px, calc(var(--layout-width) * 0.011), 22px);
      border: 1px solid #aaa;
      color: #aaa;
    }

    .filter-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 4px;
      margin: 2% 0;
    }

    .filter-box {
      width: clamp(11px, calc(var(--layout-width) * 0.009), 17px);
      aspect-ratio: 1;
      border: 2px solid #aaa;
      background: #fff;
    }

    .filter-colors {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 4px;
      margin: 4% 0;
    }

    .filter-pages {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 5px;
      margin-top: 4%;
    }

    .filter-pages span,
    .filter-colors span {
      display: grid;
      place-items: center;
      min-height: clamp(14px, calc(var(--layout-width) * 0.01), 20px);
      border: 1px solid #aaa;
      font-size: var(--page-menu-text);
      line-height: 1;
    }

    .filter-pages .active {
      color: #fff;
      background: #111;
    }

    .listing-copy,
    .detail-copyline {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      padding-left: 1%;
      border-top: 2px solid #111;
      background: #d0d0d0;
      height: var(--page-footer-height);
      font-size: var(--page-footer-text);
      white-space: nowrap;
    }

    .listing-copy {
      grid-row: 2;
    }

    .watch-catalog-frame {
      display: grid;
      grid-template-rows: minmax(0, 1fr) var(--page-footer-height);
      color: #111;
      font-family: "TrebuchetMS", sans-serif;
    }

    .watch-catalog-body {
      grid-row: 1;
      display: grid;
      grid-template-columns: var(--watch-left-map-width) minmax(0, calc(100% - var(--watch-left-map-width) - var(--watch-filter-width))) var(--watch-filter-width);
      min-height: 0;
      overflow: hidden;
      border: 2px solid #111;
      background: #fff;
    }

    .watch-category-panel {
      display: grid;
      grid-template-rows: minmax(0, 1fr) var(--page-map-title-height) var(--page-map-height);
      min-width: 0;
      overflow: hidden;
      border-right: 2px solid #111;
      background: #edc89a;
    }

    .watch-cats {
      grid-column: 1;
      grid-row: 1;
      display: grid;
      grid-template-rows: repeat(8, minmax(0, 1fr));
      width: 100%;
      height: 100%;
      min-width: 0;
      min-height: 0;
      overflow: hidden;
    }

    .watch-category-panel a {
      display: flex;
      align-items: center;
      min-width: 0;
      padding-left: 6.5%;
      border-bottom: 2px solid #bd854b;
      color: #4b2a13;
      text-decoration: none;
      font-size: calc(var(--panel-menu-text) * 1.25);
      line-height: 1;
      white-space: nowrap;
    }

    .watch-cats a:last-child {
      border-bottom: 0;
    }

    .watch-category-panel a:hover,
    .watch-category-panel a:focus-visible,
    .watch-category-panel a.active {
      outline: 0;
      background: rgba(255, 255, 255, 0.28);
    }

    .watch-map-title {
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border-bottom: 2px solid #111;
      background: #fff;
      color: #222;
      font-size: calc(var(--panel-menu-text) * 1.08);
      line-height: 1;
      white-space: nowrap;
    }

    .watch-map-slot {
      min-height: 0;
      overflow: hidden;
      background: #d0d0d0;
    }

    .watch-map-slot img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: fill;
      object-position: center;
      filter: grayscale(0.15) contrast(0.88);
    }

    .watch-products-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      min-width: 0;
      overflow: hidden;
      background: #fff;
    }

    .watch-product-card {
      position: relative;
      display: block;
      min-width: 0;
      overflow: hidden;
      border-right: 2px solid #333;
      border-bottom: 2px solid #333;
      color: #111;
      text-decoration: none;
      background: #fff;
    }

    .watch-product-card:nth-child(3n) {
      border-right: 0;
    }

    .watch-product-card:nth-child(n+7) {
      border-bottom: 0;
    }

    .watch-product-image {
      position: absolute;
      left: 0;
      top: 7.2%;
      width: 100%;
      height: 57%;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 0;
      overflow: hidden;
      cursor: none;
    }

    .watch-product-image .watch-magnifier-lens {
      position: absolute;
      width: clamp(72px, 38%, 110px);
      aspect-ratio: 1;
      border: 2px solid #333;
      border-radius: 50%;
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85), 0 6px 16px rgba(0, 0, 0, 0.28);
      pointer-events: none;
      z-index: 4;
      display: none;
      background-repeat: no-repeat;
      background-color: #fff;
    }

    .watch-product-image.is-magnifying .watch-magnifier-lens {
      display: block;
    }

    .watch-product-card img {
      display: block;
      width: auto;
      height: 100%;
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      pointer-events: none;
    }

    .watch-product-copy {
      position: absolute;
      left: 18%;
      top: 64%;
      width: 62%;
      min-width: 0;
      overflow: hidden;
      font-size: var(--panel-body-text);
      line-height: 1.08;
    }

    .watch-product-copy span,
    .watch-product-copy strong {
      font-weight: 500;
    }

    .watch-product-copy strong {
      display: block;
      margin-top: 1px;
      white-space: nowrap;
    }

    .watch-product-line {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 5px;
      min-width: 0;
      white-space: nowrap;
    }

    .watch-product-name {
      display: block;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .watch-product-status {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 4px;
      margin-top: 1px;
      white-space: nowrap;
    }

    .watch-product-card .watch-product-status .badge {
      padding: 0 6px;
    }

    .watch-product-card .badge {
      min-width: clamp(12px, calc(var(--layout-width) * 0.0082), 16px);
      min-height: clamp(11px, calc(var(--layout-width) * 0.0078), 15px);
      padding: 0 3px;
      font-size: var(--page-micro-text);
    }

    .badge.pink {
      background: #f7d7e9;
      color: #fff;
    }

    .badge.grey {
      background: #ddd;
      color: #fff;
    }

    .badge.orange {
      background: #e68b2e;
    }

    .badge.green,
    .watch-color-grid button.badge.green,
    .watch-color-grid .badge.green {
      background: #168450;
      color: #fff;
    }

    .badge.darkgrey,
    .watch-color-grid button.badge.darkgrey,
    .watch-color-grid .badge.darkgrey,
    .content-page[data-page="watch"] .watch-color-grid button.badge.darkgrey {
      background: #8a8a8a !important;
      color: #fff !important;
    }

    .badge.out {
      border: 1px solid #444;
      background: #fff;
      color: #222;
    }

    .watch-ribbon {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1;
      padding: 2.2% 4.5%;
      border-radius: 0 0 9px 0;
      background: #ead0ad;
      color: #3f2916;
      font-size: var(--page-micro-text);
      line-height: 1;
      white-space: nowrap;
    }

    .watch-filter-panel {
      min-width: 0;
      overflow-x: hidden;
      overflow-y: auto;
      min-height: 0;
      -webkit-overflow-scrolling: touch;
      padding: 10px;
      border-left: 2px solid #111;
      background: #fff;
      color: #222;
      font-size: clamp(11px, calc(var(--layout-width) * 0.0112), 21px);
      font-weight: 500;
      line-height: 1.05;
      display: flex;
      flex-direction: column;
    }

    .watch-filter-panel h3 {
      margin: 12px 0 6px;
      color: #222;
      font-size: clamp(12px, calc(var(--layout-width) * 0.0125), 24px);
      line-height: 1;
    }

    .watch-filter-panel h3:first-child {
      margin-top: 0;
    }

    .watch-filter-panel input[type="text"] {
      width: 100%;
      height: clamp(13px, calc(var(--layout-width) * 0.0105), 22px);
      min-width: 0;
      padding: 0 6px;
      border: 1px solid #9c9c9c;
      border-radius: 2px;
      color: #222;
      font-size: clamp(11px, calc(var(--layout-width) * 0.0112), 21px);
      line-height: 1;
      box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.55);
      box-sizing: border-box;
    }

    .watch-filter-panel input[type="text"]::placeholder {
      color: #cfcfcf;
      font-size: clamp(10px, calc(var(--layout-width) * 0.01), 19px);
      opacity: 1;
    }

    .watch-filter-panel input[type="text"]:focus {
      outline: 0;
      color: #111;
      font-size: clamp(11px, calc(var(--layout-width) * 0.0112), 21px);
    }

    .watch-filter-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 5px;
      min-width: 0;
      margin: 0 0 4px;
      font-size: clamp(11px, calc(var(--layout-width) * 0.0112), 21px);
      line-height: 1.05;
      white-space: nowrap;
    }

    .watch-filter-row input[type="checkbox"] {
      appearance: none;
      width: clamp(9px, calc(var(--layout-width) * 0.0078), 15px);
      aspect-ratio: 1;
      margin: 0;
      border: 1px solid #9a9a9a;
      border-radius: 3px;
      background: #fff;
      box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.55);
      flex: 0 0 auto;
    }

    .watch-filter-row input[type="checkbox"]:checked {
      background: #111;
      box-shadow: inset 0 0 0 2px #fff;
    }

    .watch-filter-range {
      display: grid;
      grid-template-columns: clamp(28px, calc(var(--layout-width) * 0.0265), 50px) minmax(0, 1fr);
      align-items: center;
      column-gap: 5px;
      margin: 0 0 4px;
      font-size: clamp(11px, calc(var(--layout-width) * 0.0112), 21px);
      line-height: 1.05;
      white-space: nowrap;
    }

    .watch-color-grid {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: clamp(2px, calc(var(--layout-width) * 0.0055), 10px);
      align-content: space-between;
      justify-content: stretch;
      margin: 6px 0 10px;
    }

    .watch-color-grid span,
    .watch-color-grid button,
    .watch-page-grid span,
    .watch-page-grid button {
      display: grid;
      place-items: center;
      min-width: 0;
      width: 50%;
      justify-self: center;
      min-height: 0;
      padding: 0;
      aspect-ratio: 1 / 1;
      border: 1px solid #9a9a9a;
      border-radius: 2px;
      color: #fff;
      font-size: clamp(8px, calc(var(--layout-width) * 0.0085), 16px);
      font-weight: 900;
      line-height: 1;
      box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.45);
      cursor: pointer;
      appearance: none;
      background: inherit;
      font-family: inherit;
    }

    .watch-page-group {
      margin-top: auto;
      display: flex;
      min-height: 0;
      flex-direction: column;
    }

    .watch-page-grid {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: clamp(2px, calc(var(--layout-width) * 0.0065), 12px);
      align-content: space-between;
      justify-content: stretch;
      margin-top: clamp(7px, calc(var(--layout-width) * 0.0072), 14px);
    }

    .watch-page-grid span,
    .watch-page-grid button {
      color: #333;
      background: #fff;
    }

    .watch-page-grid span.active,
    .watch-page-grid button.active {
      color: #fff;
      background: #111;
    }

    .watch-color-grid span.active,
    .watch-color-grid span[aria-pressed="true"],
    .watch-color-grid button.active,
    .watch-color-grid button[aria-pressed="true"] {
      outline: 2px solid #111;
      outline-offset: 1px;
    }

    .watch-page-grid span.is-disabled,
    .watch-page-grid button.is-disabled {
      opacity: 0.28;
      pointer-events: none;
    }

    .watch-page-current {
      width: 100%;
      margin-top: clamp(7px, calc(var(--layout-width) * 0.0072), 14px);
      text-align: right;
      font-size: clamp(10px, calc(var(--layout-width) * 0.0095), 18px);
    }

    .page-copyline {
      display: flex;
      align-items: center;
      height: var(--page-footer-height);
      min-height: var(--page-footer-height);
      max-height: var(--page-footer-height);
      min-width: 0;
      overflow: hidden;
      padding-left: 1%;
      background: #d0d0d0;
      color: #111;
      font-family: "TrebuchetMS", sans-serif;
      font-size: var(--page-footer-text);
      line-height: 1;
      white-space: nowrap;
    }

    .watch-copyline {
      grid-row: 2;
      border: 2px solid #111;
    }

    .page-copyline {
      border-top: 2px solid #111;
    }

    .page-map-cell {
      height: var(--page-map-height);
      min-height: var(--page-map-height);
      max-height: var(--page-map-height);
    }

    .page-map {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: fill;
      filter: grayscale(0.15) contrast(0.88);
    }

    .compact-info .map-small.page-map {
      height: var(--page-map-height);
    }

    .detail-copyline {
      grid-row: 4;
    }

    .detail-frame {
      display: grid;
      grid-template-columns: 9% 42% 29% 20%;
      grid-template-rows: 66% 5% 23% 6%;
      color: #111;
    }

    .detail-frame > * {
      border: 2px solid #111;
    }

    .detail-cats {
      grid-row: 1;
      overflow: hidden;
      background: #edc89a;
    }

    .detail-cats button {
      width: 100%;
      height: 12.5%;
      border: 0;
      border-bottom: 2px solid #b77f45;
      background: transparent;
      text-align: left;
      padding-left: 8%;
      color: #4b2a13;
      font-size: clamp(10px, calc(var(--layout-width) * 0.0095), 19px);
      font-weight: 900;
    }

    .detail-hero {
      position: relative;
      overflow: hidden;
    }

    .detail-hero img {
      display: block;
      width: 77%;
      height: 82%;
      margin: 4% auto 0;
      object-fit: contain;
    }

    .detail-pages {
      position: absolute;
      right: 4%;
      bottom: 3%;
      display: flex;
      gap: clamp(7px, calc(var(--layout-width) * 0.007), 13px);
    }

    .detail-pages button {
      min-width: clamp(17px, calc(var(--layout-width) * 0.013), 25px);
      height: clamp(17px, calc(var(--layout-width) * 0.013), 25px);
      border: 1px solid #c8945f;
      background: #fff;
      color: #b47a38;
      font-weight: 900;
    }

    .detail-pages .active {
      color: #fff;
      background: #b47a38;
    }

    .detail-text {
      overflow: hidden;
      padding: 3% 5%;
      border-right: 2px solid #c8945f;
      font-family: "TrebuchetMS", sans-serif;
      font-size: clamp(8px, calc(var(--layout-width) * 0.0085), 16px);
      line-height: 1.12;
    }

    .detail-text h2 {
      margin: 0 0 5%;
      font-size: clamp(18px, calc(var(--layout-width) * 0.0175), 34px);
      line-height: 1;
    }

    .detail-text strong {
      display: inline-block;
      margin-bottom: 3%;
      font-size: clamp(13px, calc(var(--layout-width) * 0.01), 20px);
    }

    .detail-text .stock {
      margin-left: 8%;
      padding: 1% 5%;
      border: 2px solid #999;
      font-weight: 900;
    }

    .calendar {
      width: clamp(44px, calc(var(--layout-width) * 0.043), 82px);
      aspect-ratio: 1;
      margin-top: 3%;
      background:
        linear-gradient(#319b9b 0 18%, transparent 18%),
        repeating-linear-gradient(0deg, transparent 0 17%, #319b9b 17% 19%),
        repeating-linear-gradient(90deg, transparent 0 17%, #319b9b 17% 19%),
        #e7ffff;
      border: 3px solid #319b9b;
    }

    .checkout-panel {
      display: grid;
      grid-template-columns: 47% 53%;
      grid-template-rows: 12% repeat(6, 12.4%) 13.6%;
      overflow: hidden;
      background: #edc89a;
      font-size: clamp(9px, calc(var(--layout-width) * 0.0085), 16px);
      font-weight: 900;
    }

    .checkout-panel .title {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      padding-left: 8%;
      border-bottom: 2px solid #b77f45;
      font-size: clamp(14px, calc(var(--layout-width) * 0.011), 22px);
    }

    .checkout-panel div {
      display: flex;
      align-items: center;
      padding-left: 8%;
      border-bottom: 2px solid #b77f45;
    }

    .checkout-panel .box {
      background: #fff;
      border-left: 2px solid #c8945f;
    }

    .checkout-panel button {
      border: 2px solid #c8945f;
      background: #fff;
      font-weight: 900;
    }

    .checkout-panel .cart {
      background: #edc89a;
    }

    .detail-tabs {
      grid-column: 1 / -1;
      grid-row: 2;
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      border-top: 2px solid #111;
      border-bottom: 2px solid #111;
      background: #d0d0d0;
    }

    .detail-tabs button {
      border: 0;
      border-right: 2px solid #111;
      background: transparent;
      font-size: clamp(11px, calc(var(--layout-width) * 0.01), 20px);
    }

    .detail-tabs button:last-child {
      border-right: 0;
    }

    .detail-bottom {
      grid-column: 1 / -1;
      grid-row: 3;
      display: grid;
      grid-template-columns: 14% 1fr;
      overflow: hidden;
      background: #bdbdbd;
    }

    .detail-bottom img {
      width: 100%;
      height: 100%;
      object-fit: fill;
      border-right: 2px solid #111;
      filter: grayscale(0.15) contrast(0.88);
    }

    .new-detail-frame {
      display: grid;
      grid-template-columns: 15% 37.65fr 25.95fr 9.82fr 8.58fr;
      grid-template-rows: minmax(0, 1fr) calc(var(--page-map-title-height) + var(--page-map-height) + var(--page-footer-height));
      color: #111;
      font-family: "TrebuchetMS", sans-serif;
      line-height: 1.05;
    }

    .new-detail-frame:not(.ontime-frame):not(.article-page) {
      gap: 0;
      /* Match homepage ontime-frame bottom proportion (≈30.3%) */
      grid-template-rows: minmax(0, 69.7fr) minmax(0, 30.3fr);
      /* Left brand nav wide enough for horizontal labels (CITIZEN / Co-Branded) */
      grid-template-columns: 15% 37% 25% 13% 10%;
      grid-template-areas:
        "cats hero text values labels"
        "info info info info info";
    }

    .new-detail-frame.article-page {
      gap: 0;
      grid-template-columns: var(--article-left-width) minmax(0, calc(100% - var(--article-left-width)));
      grid-template-rows: minmax(0, 1fr) calc(var(--page-map-title-height) + var(--page-map-height)) var(--page-footer-height);
    }

    .new-detail-frame.article-page.japanese-page {
      grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
      grid-template-rows: minmax(0, 69.7fr) minmax(0, 25.5fr) minmax(0, 4.8fr);
    }

    .japanese-page .compact-info .info-cell {
      display: grid;
      grid-template-rows: 15% minmax(0, 1fr);
    }

    .japanese-page .compact-info .info-title,
    .japanese-page .compact-info .map-small,
    .japanese-page .compact-info .weather-compact-slot {
      height: 100%;
      min-height: 0;
    }

    .japanese-page .japanese-copyline {
      height: auto;
      min-height: 0;
      max-height: none;
    }

    .new-detail-frame.article-page .movement-board,
    .new-detail-frame.article-page .article-scroll,
    .new-detail-frame.article-page .compact-info,
    .new-detail-frame.article-page .japanese-copyline {
      border: 2px solid #111;
    }

    .new-detail-frame.article-page .movement-board,
    .new-detail-frame.article-page .compact-info {
      border-right: 0;
    }

    .new-detail-frame.article-page .movement-board,
    .new-detail-frame.article-page .article-scroll,
    .new-detail-frame.article-page .compact-info {
      border-bottom: 0;
    }

    .new-cats {
      grid-column: 1;
      grid-row: 1;
      grid-area: cats;
      display: flex;
      flex-direction: column;
      align-self: stretch;
      justify-self: stretch;
      overflow: hidden;
      border: 2px solid #c8945f;
      background: #edc89a;
    }

    .new-detail-frame:not(.ontime-frame):not(.article-page) .new-cats {
      border-right: 0;
      border-bottom: 0;
    }

    .new-cats button {
      width: 100%;
      min-width: 0;
      flex: 1 1 0;
      height: auto;
      min-height: 0;
      display: flex;
      align-items: center;
      padding: 0 8%;
      border: 0;
      border-bottom: 2px solid #b77f45;
      color: #4b2a13;
      background: transparent;
      text-align: left;
      font-size: calc(var(--panel-menu-text) * 1.15);
      line-height: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .new-cats button,
    .new-pages button,
    .new-tabs button,
    .new-checkout-values button,
    .new-checkout-labels [data-new-action] {
      cursor: pointer;
    }

    .new-cats button.active,
    .new-cats button:focus-visible {
      outline: 0;
      background: rgba(255, 255, 255, 0.3);
    }

    .new-cats button:last-child {
      border-bottom: 0;
    }

    .new-hero {
      position: relative;
      grid-column: 2;
      grid-row: 1;
      grid-area: hero;
      overflow: hidden;
      border: 2px solid #c8945f;
      background: #fff;
    }

    .new-detail-frame:not(.ontime-frame):not(.article-page) .new-hero {
      /* Independent box: full border + tiny inset from neighbors */
      border: 2px solid #c8945f;
      margin: clamp(3px, calc(var(--layout-width) * 0.0032), 5px);
      z-index: 1;
    }

    .new-hero img {
      display: block;
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
      margin: 0 auto;
      object-fit: contain;
      transform: none;
    }

    .new-pages {
      position: absolute;
      right: 2.5%;
      bottom: clamp(4px, calc(var(--layout-width) * 0.004), 7px);
      display: flex;
      gap: clamp(5px, calc(var(--layout-width) * 0.0045), 8px);
    }

    .new-pages button {
      min-width: clamp(17px, calc(var(--layout-width) * 0.0135), 27px);
      height: clamp(17px, calc(var(--layout-width) * 0.0135), 27px);
      padding: 0;
      border: 1px solid #c8945f;
      color: #b47a38;
      background: #fff;
      font-size: var(--panel-menu-text);
      font-weight: 900;
      line-height: 1;
    }

    .new-pages .active {
      color: #fff;
      background: #b47a38;
    }

    .new-pages .active,
    .detail-pages .active,
    .home-carousel-controls button.active,
    .pager button.active:not(.stop) {
      position: relative;
      display: inline-grid;
      place-items: center;
      color: transparent;
      background: #fff;
      font-size: 0;
    }

    .new-pages .active,
    .detail-pages .active {
      --active-play-color: #b47a38;
      border-color: #c8945f;
    }

    .home-carousel-controls button.active {
      --active-play-color: #3a86cb;
      border-color: #3a86cb;
    }

    .pager button.active:not(.stop) {
      --active-play-color: #4774bb;
      border-color: #4774bb;
    }

    .new-pages .active::before,
    .detail-pages .active::before,
    .home-carousel-controls button.active::before,
    .pager button.active:not(.stop)::before {
      content: "";
      width: 0;
      height: 0;
      border-top: clamp(4px, calc(var(--layout-width) * 0.0038), 7px) solid transparent;
      border-bottom: clamp(4px, calc(var(--layout-width) * 0.0038), 7px) solid transparent;
      border-left: clamp(6px, calc(var(--layout-width) * 0.0052), 10px) solid var(--active-play-color);
      transform: translateX(8%);
    }

    .new-product-text {
      grid-column: 3;
      grid-row: 1;
      grid-area: text;
      display: flex;
      flex-direction: column;
      min-height: 0;
      overflow: auto;
      padding: 3.2% 3.2% 2%;
      border: 0;
      border-right: 2px solid #c8945f;
      background: #fff;
      font-size: var(--panel-body-text);
    }

    .new-category-label {
      margin: 0 0 2%;
      color: #666;
      font-size: 0.92em;
      font-weight: 700;
      line-height: 1.2;
    }

    .new-product-text h2 {
      margin: 0 0 4%;
      font-size: clamp(16px, calc(var(--layout-width) * 0.0145), 28px);
      font-weight: 800;
      line-height: 1.15;
      letter-spacing: 0;
    }

    .new-price-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      column-gap: clamp(8px, calc(var(--layout-width) * 0.0085), 16px);
      margin-bottom: 3%;
      font-size: var(--panel-body-text);
      font-weight: 900;
      white-space: nowrap;
    }

    .new-stock {
      min-width: clamp(47px, calc(var(--layout-width) * 0.048), 91px);
      padding: 1px 6px;
      border: 2px solid #111;
      background: #fff;
      color: #111;
      line-height: 1;
      text-align: center;
      box-sizing: border-box;
    }

    .new-stock.is-in {
      background: #111;
      color: #fff;
    }

    .new-stock.is-out {
      background: #fff;
      color: #111;
    }

    .new-product-text p {
      margin: 0 0 2.3%;
      font-weight: 700;
      line-height: 1.08;
    }

    .new-product-text .new-description {
      flex: 0 1 auto;
      max-height: 30%;
      overflow: auto;
      font-weight: 500;
      line-height: 1.25;
    }

    .new-product-text .new-description p,
    .new-product-text .new-description ul,
    .new-product-text .new-description ol {
      margin: 0 0 2.3%;
    }

    .new-product-text .new-description ul,
    .new-product-text .new-description ol {
      padding-left: 1.15em;
    }

    .new-product-text .new-description a {
      color: #7a4a1f;
      font-weight: 800;
    }

    .new-product-text .new-description.expanded {
      max-height: 58%;
    }

    .new-product-text .more {
      font-weight: 900;
    }

    .new-calendar { display: none !important; }

    .new-hero-media {
      width: 100%;
      height: 100%;
      display: grid;
      place-items: center;
      overflow: hidden;
      box-sizing: border-box;
      padding: 2% 2% 8%;
    }

    .new-hero-media img,
    .new-hero-media video,
    .new-hero img[data-new-hero-image],
    .new-hero video[data-new-hero-image] {
      display: block;
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      transform: none;
      background: #fff;
    }

    .new-spec-table { display: none !important; }

    .new-spec-icon-btn {
      flex: 0 0 auto;
      align-self: flex-start;
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: auto;
      min-height: 0;
      margin-top: 3%;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: zoom-in;
      line-height: 0;
      overflow: visible;
    }

    .new-spec-icon-btn:focus-visible {
      outline: 2px solid #3a6ea5;
      outline-offset: 2px;
    }

    .new-spec-icon {
      display: block;
      position: static;
      width: clamp(70px, calc(var(--layout-width) * 0.072), 110px);
      height: auto;
      max-width: none;
      object-fit: contain;
      image-rendering: auto;
    }

    .new-product-text .new-spec-grid {
      display: none !important;
    }

    .new-spec-grid {
      flex: 0 0 auto;
      width: 100%;
      max-width: 100%;
      margin-top: 3%;
      display: grid;
      grid-template-columns: 1.15fr 0.85fr 1.15fr 0.85fr;
      grid-auto-rows: minmax(32px, auto);
      border: 1px solid #222;
      background: #faf8f4;
      box-sizing: border-box;
      font-size: clamp(11px, calc(var(--layout-width) * 0.01), 15px);
      line-height: 1.35;
      cursor: zoom-in;
    }

    .new-spec-grid > div {
      box-sizing: border-box;
      min-width: 0;
      min-height: 32px;
      padding: 8px 9px;
      color: #111;
      background: #faf8f4;
      box-shadow: inset -1px -1px 0 #222;
      overflow-wrap: anywhere;
      word-break: break-word;
      display: flex;
      align-items: center;
    }

    .new-spec-grid .spec-label {
      font-weight: 700;
      white-space: nowrap;
    }

    .new-spec-grid .spec-value {
      font-weight: 500;
    }

    .new-spec-grid .spec-features-label {
      grid-column: 3;
      grid-row: 1 / span 2;
      align-items: flex-start;
      padding-top: 8px;
    }

    .new-spec-grid .spec-features-value {
      grid-column: 4;
      grid-row: 1 / span 2;
      align-items: flex-start;
      padding-top: 8px;
    }

    .new-checkout-values {
      grid-column: 4;
      grid-row: 1;
      grid-area: values;
      overflow: visible;
      padding: 0 8%;
      border: 0;
      background: #fff;
      font-size: var(--panel-body-text);
      font-weight: 900;
      display: grid;
      grid-template-rows: 13% repeat(6, 12.4%) 12.6%;
      align-items: center;
      justify-items: stretch;
    }

    .new-checkout-values strong {
      display: block;
      grid-row: 2;
      width: 100%;
      margin: 0;
      font-size: var(--panel-body-text);
      font-weight: 900;
      text-shadow: 0 0 0 #111;
      white-space: nowrap;
      text-align: center;
      justify-self: stretch;
      align-self: center;
    }

    .new-checkout-values > input,
    .new-checkout-values > select {
      display: block;
      width: 100%;
      height: 94%;
      margin: 0;
      border: 2px solid #d7a06e;
      background: #fff;
      color: #111;
      font: inherit;
      text-align: center;
      box-sizing: border-box;
      justify-self: stretch;
    }

    .new-qty-stock {
      grid-row: 3;
      display: grid;
      grid-template-columns: 20px minmax(0, 1fr);
      width: 100%;
      height: 94%;
      min-width: 0;
      min-height: 0;
      justify-self: stretch;
      align-self: center;
      z-index: 2;
      box-sizing: border-box;
      border: 2px solid #d7a06e;
      background: #fff;
      overflow: visible;
    }

    .new-qty-stock-input {
      display: block !important;
      width: 100% !important;
      height: 100% !important;
      min-width: 0 !important;
      margin: 0 !important;
      border: 0 !important;
      border-right: 2px solid #d7a06e !important;
      border-radius: 0 !important;
      background: #fff !important;
      color: #111 !important;
      font: inherit !important;
      font-size: var(--panel-body-text) !important;
      font-weight: 900 !important;
      text-align: center !important;
      box-shadow: none !important;
      outline: none !important;
      -moz-appearance: textfield;
    }

    .new-qty-stock-input::-webkit-outer-spin-button,
    .new-qty-stock-input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    .new-qty-stock-meta {
      display: grid;
      grid-template-rows: 1fr 1fr;
      min-width: 0;
      min-height: 0;
      background: #fff;
    }

    .new-qty-stock-sold,
    .new-qty-stock-available {
      display: flex;
      align-items: center;
      min-width: 0;
      padding: 0 2px 0 4px;
      color: #1a3a8f;
      font-family: "TrebuchetMS", sans-serif;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0;
      line-height: 1.05;
      white-space: nowrap;
      overflow: visible;
    }

    .new-qty-stock-sold {
      border-bottom: 2px solid #d7a06e;
    }

    .new-checkout-values > input[data-new-input="offer"] {
      grid-row: 4;
    }

    .new-checkout-values > select {
      grid-row: 5;
      text-align-last: center;
    }

    .new-checkout-values > input[data-new-input="tax"] {
      grid-row: 6;
    }

    .new-checkout-values > input[data-new-input="total"] {
      grid-row: 7;
    }

    .new-checkout-values input[readonly] {
      color: #111;
    }

    .new-checkout-values > button {
      grid-row: 8;
      width: 100%;
      height: 58%;
      border: 2px solid #d7a06e;
      background: #fff;
      font-size: var(--panel-body-text);
      font-weight: 900;
      white-space: nowrap;
      box-sizing: border-box;
      align-self: center;
      justify-self: stretch;
    }

    .new-checkout-labels {
      grid-column: 5;
      grid-row: 1;
      grid-area: labels;
      display: grid;
      grid-template-rows: 13% repeat(6, 12.4%) 12.6%;
      overflow: hidden;
      border: 2px solid #c8945f;
      background: #edc89a;
      color: #4b2a13;
      font-size: calc(var(--panel-menu-text) * 1.15);
    }

    .new-detail-frame:not(.ontime-frame):not(.article-page) .new-checkout-labels {
      border-bottom: 0;
    }

    .new-checkout-labels div {
      display: flex;
      align-items: center;
      padding-left: 10%;
      border-bottom: 2px solid #b77f45;
      white-space: nowrap;
      font-size: calc(var(--panel-menu-text) * 1.15);
      line-height: 1;
    }

    .new-checkout-labels div:last-child {
      border-bottom: 0;
    }

    .new-checkout-labels [data-new-action] {
      user-select: none;
      white-space: nowrap;
      padding-left: 4%;
      font-size: calc(var(--panel-menu-text) * 1.15);
      line-height: 1;
    }

    .new-checkout-labels [data-new-action].active,
    .new-checkout-labels [data-new-action]:focus-visible {
      outline: 0;
      background: #d8a36a;
      color: #fff;
    }

    .new-info-table {
      grid-column: 1 / -1;
      grid-row: 2;
      grid-area: info;
      display: grid;
      grid-template-rows: var(--page-map-title-height) var(--page-map-height) var(--page-footer-height);
      overflow: hidden;
      border: 2px solid #111;
      background: #d0d0d0;
    }

    .new-tabs {
      grid-row: 1;
      display: grid;
      grid-template-columns: var(--page-left-map-width) repeat(6, 1fr);
      overflow: hidden;
      border-bottom: 2px solid #111;
      background: #d0d0d0;
    }

    .new-tabs button {
      border: 0;
      border-right: 2px solid #111;
      color: #111;
      background: transparent;
      font-size: var(--page-copyline-text);
      font-weight: 400;
      line-height: 1;
      white-space: nowrap;
    }

    .new-tabs button.active,
    .new-tabs button:focus-visible {
      outline: 0;
      background: #e2e2e2;
      font-weight: 400;
    }

    .new-tabs button:last-child {
      border-right: 0;
    }

    .new-tabs .new-tab-label {
      border-right: 2px solid #111;
      background: transparent;
      color: #111;
      cursor: default;
    }

    .new-bottom {
      grid-row: 2;
      display: grid;
      grid-template-columns: var(--page-left-map-width) 1fr;
      overflow: hidden;
      background: #bdbdbd;
    }

    .new-map-cell {
      min-width: 0;
      overflow: hidden;
      padding: 0;
      border-right: 2px solid #111;
      background: #d0d0d0;
    }

    .new-map-cell img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: fill;
      filter: grayscale(0.15) contrast(0.88);
    }

    .new-bottom-fill {
      background: #bdbdbd;
      padding: clamp(7px, calc(var(--layout-width) * 0.007), 13px) clamp(11px, calc(var(--layout-width) * 0.01), 19px);
      overflow: hidden;
      color: #111;
      font-size: var(--panel-body-text);
      font-weight: 400;
      line-height: 1.15;
    }

    .new-bottom-fill:empty {
      padding: 0;
    }

    .new-bottom-fill strong {
      display: block;
      margin-bottom: clamp(5px, calc(var(--layout-width) * 0.0045), 9px);
      font-weight: 900;
    }

    .new-bottom-fill p {
      max-width: 72ch;
      margin: 0;
    }

    .new-bottom.is-contact-form {
      /* columns come from parent subgrid on offer/listing */
    }

    .new-bottom.is-contact-form .new-map-cell {
      grid-column: 1;
      grid-row: 1;
    }

    .new-bottom.is-contact-form .new-bottom-fill,
    .new-bottom.is-contact-form .new-contact-form {
      display: contents;
    }

    .new-contact-form {
      font-family: "TrebuchetMS", "Arial Narrow", Arial, sans-serif;
    }

    /* Shipping→Payment (cols 2–5); border-right matches Payment tab divider side */
    .new-contact-panel {
      grid-column: 2 / span 4;
      grid-row: 1;
      position: relative;
      display: flex;
      flex-direction: column;
      min-width: 0;
      min-height: 0;
      height: 100%;
      box-sizing: border-box;
      padding: 8px;
      border-right: 2px solid #111;
      background: #bdbdbd;
    }

    .new-contact-text {
      flex: 1 1 auto;
      width: 100%;
      height: 100%;
      min-height: 0;
      min-width: 0;
      resize: none;
      box-sizing: border-box;
      margin: 0;
      border: 1px solid #777;
      border-radius: 2px;
      padding: 10px 12px 32px;
      background: #f3f3f3;
      color: #222;
      font: inherit;
      font-size: clamp(12px, calc(var(--layout-width) * 0.011), 14px);
      line-height: 1.35;
      outline: none;
    }

    /* Feedback + Contact (cols 6–7) */
    .new-contact-note {
      grid-column: 6 / span 2;
      grid-row: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      gap: 4px;
      min-width: 0;
      min-height: 0;
      height: 100%;
      overflow: auto;
      margin: 0;
      padding: 6px 10px;
      border-left: 0;
      background: #d0d0d0;
      color: #111;
      font-size: 13px;
      line-height: 1.25;
      font-weight: 400;
    }

    .new-contact-note p {
      margin: 0;
      min-width: 0;
    }

    .new-contact-line {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      min-width: 0;
      font-size: 13px;
    }

    .new-contact-line span {
      min-width: 0;
    }

    .new-contact-line img {
      width: 18px;
      height: 18px;
      margin-top: 1px;
      object-fit: contain;
      flex: 0 0 auto;
    }

    .new-contact-text:focus {
      border-color: #555;
      background: #fff;
    }

    .new-contact-footer {
      position: absolute;
      right: 11px;
      bottom: 11px;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      pointer-events: none;
    }

    .new-contact-footer .new-contact-status,
    .new-contact-footer .new-contact-submit {
      pointer-events: auto;
    }

    .new-contact-status {
      margin-right: auto;
      color: #555;
      font-size: clamp(11px, calc(var(--layout-width) * 0.01), 13px);
      line-height: 1.2;
    }

    .new-contact-status.is-ok {
      color: #1a5f2a;
      font-weight: 700;
    }

    .new-contact-status.is-error {
      color: #8a2f1f;
      font-weight: 700;
    }

    .new-contact-submit {
      border: 1px solid #111 !important;
      background: #e8e8e8 !important;
      color: #111 !important;
      padding: 3px 10px !important;
      min-width: 68px !important;
      min-height: 0 !important;
      border-radius: 2px !important;
      box-shadow: none !important;
      font: inherit !important;
      font-size: var(--panel-body-text) !important;
      font-weight: 400 !important;
      line-height: 1.2 !important;
      cursor: pointer;
    }

    .new-contact-submit:hover {
      background: #ddd !important;
    }

    .new-contact-submit:disabled {
      opacity: 0.6;
      cursor: wait;
    }

    .new-info-image {
      display: block;
      width: auto;
      max-width: min(280px, 46%);
      height: auto;
      max-height: clamp(32px, calc(var(--layout-width) * 0.032), 44px);
      object-fit: contain;
      object-position: left center;
    }

    .new-info-stack {
      display: grid;
      grid-template-rows: auto auto;
      align-content: start;
      gap: clamp(8px, calc(var(--layout-width) * 0.008), 12px);
      height: 100%;
      min-height: 0;
    }

    .new-info-stack p {
      margin: 0;
      max-width: none;
    }

    .new-info-list {
      display: grid;
      gap: clamp(3px, calc(var(--layout-width) * 0.0035), 7px);
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .new-info-list li {
      margin: 0;
      padding-left: 1.35em;
      background: url("../info-bullet.png") no-repeat left 0.18em;
      background-size: 0.82em 0.82em;
    }

    .new-copyline {
      grid-row: 3;
    }

    .ontime-info-table .new-copyline {
      display: flex;
      align-items: center;
      height: 100%;
      min-height: 0;
      max-height: none;
      min-width: 0;
      overflow: hidden;
      padding-left: 1%;
      border-top: 2px solid #111;
      background: #d0d0d0;
      color: #111;
      font-family: "TrebuchetMS", sans-serif;
      font-size: var(--page-footer-text);
      line-height: 1;
      white-space: nowrap;
    }

    .offer-copyline {
      grid-column: 1 / -1;
      grid-row: 4;
    }

    .cart-frame {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 28%;
      grid-template-rows: 12% minmax(0, 1fr) 22% var(--page-footer-height);
      overflow: hidden;
      border: 4px solid #111;
      background: #d0d0d0;
      color: #111;
      font-family: "TrebuchetMS", sans-serif;
    }

    .cart-frame > * {
      box-sizing: border-box;
    }

    .cart-head {
      grid-column: 1 / -1;
      grid-row: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-width: 0;
      padding: 0 2%;
      border-bottom: 4px solid #111;
      background: #fff;
    }

    .cart-title {
      display: flex;
      align-items: baseline;
      gap: clamp(10px, calc(var(--layout-width) * 0.01), 18px);
      min-width: 0;
      white-space: nowrap;
    }

    .cart-title b {
      font-size: var(--page-title-text);
      line-height: 1;
    }

    .cart-title span,
    .cart-status {
      font-size: var(--panel-copyline-text);
      line-height: 1;
    }

    .cart-status {
      display: flex;
      gap: clamp(8px, calc(var(--layout-width) * 0.009), 16px);
      white-space: nowrap;
    }

    .cart-status span {
      padding: 4px 8px;
      border: 2px solid #111;
      background: #d0d0d0;
    }

    .cart-table {
      grid-column: 1;
      grid-row: 2 / 4;
      display: grid;
      grid-template-rows: 13% repeat(3, minmax(0, 1fr));
      min-width: 0;
      overflow: hidden;
      border-right: 4px solid #111;
      background: #fff;
    }

    .cart-row {
      display: grid;
      grid-template-columns: minmax(0, 38%) 18% 10% 16% 18%;
      min-height: 0;
      border-bottom: 2px solid #d0d0d0;
      color: #222;
      font-size: var(--page-desc-text);
      line-height: 1.05;
    }

    .cart-row:last-child {
      border-bottom: 0;
    }

    .cart-row > div {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 0;
      overflow: hidden;
      padding: 0 5%;
      border-right: 2px solid #d0d0d0;
      text-align: center;
    }

    .cart-row > div:last-child {
      border-right: 0;
    }

    .cart-row-head {
      background: #edc89a;
      color: #4b2a13;
      font-size: var(--panel-menu-text);
      font-weight: 900;
    }

    .cart-product {
      justify-content: flex-start !important;
      gap: 5%;
      text-align: left !important;
    }

    .cart-product img {
      width: clamp(44px, calc(var(--layout-width) * 0.052), 98px);
      height: 78%;
      object-fit: contain;
      flex: 0 0 auto;
    }

    .cart-product span {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .cart-summary {
      grid-column: 2;
      grid-row: 2;
      display: grid;
      grid-template-rows: 16% repeat(4, 13%) 15% 15%;
      min-width: 0;
      overflow: hidden;
      background: #fff;
      font-size: var(--page-desc-text);
      line-height: 1;
    }

    .cart-summary h2,
    .cart-summary div,
    .cart-summary button {
      margin: 0;
      border-bottom: 2px solid #d0d0d0;
    }

    .cart-summary h2 {
      display: flex;
      align-items: center;
      padding-left: 7%;
      background: #edc89a;
      color: #4b2a13;
      font-size: var(--page-title-text);
      line-height: 1;
    }

    .cart-summary div {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 7%;
    }

    .cart-total {
      background: #d0d0d0;
    }

    .cart-summary button {
      border-left: 0;
      border-right: 0;
      border-top: 0;
      background: #fff;
      color: #111;
      font-family: "TrebuchetMS", sans-serif;
      font-size: var(--panel-menu-text);
      font-weight: 900;
      cursor: pointer;
    }

    .cart-summary button:last-of-type {
      border-bottom: 2px solid #d0d0d0;
    }

    .cart-summary button:hover,
    .cart-summary button:focus-visible {
      outline: 0;
      background: #edc89a;
    }

    .cart-note {
      grid-column: 2;
      grid-row: 3;
      display: grid;
      grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
      align-items: center;
      column-gap: 3%;
      min-width: 0;
      overflow: hidden;
      padding: 2% 3%;
      border-top: 0;
      background: #fff;
      color: #111;
      font-size: var(--page-desc-text);
      line-height: 1.2;
    }

    .cart-note-sticky {
      display: block;
      width: 100%;
      height: auto;
      max-height: 92%;
      object-fit: contain;
      object-position: center left;
    }

    .cart-note-copy {
      margin: 0;
      min-width: 0;
      color: #222;
      font-family: "TrebuchetMS", sans-serif;
      font-size: var(--page-desc-text);
      font-weight: 500;
      line-height: 1.28;
    }

    .cart-copyline {
      grid-column: 1 / -1;
      grid-row: 4;
    }

    .account-frame {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: repeat(3, 1fr);
      gap: 0;
      border: 4px solid #111;
      color: #666;
      font-family: "TrebuchetMS", sans-serif;
    }

    .account-panel {
      overflow: hidden;
      border-right: 4px solid #111;
      border-bottom: 4px solid #111;
      background: #fff;
      font-size: clamp(10px, calc(var(--layout-width) * 0.0095), 18px);
      line-height: 1.22;
    }

    .account-panel:nth-child(2n) {
      border-right: 0;
    }

    .account-panel:nth-child(n+5) {
      border-bottom: 0;
    }

    .account-title {
      display: flex;
      align-items: center;
      gap: 2%;
      height: 31%;
      border-bottom: 1px solid #ddd;
      color: #666;
      font-size: clamp(24px, calc(var(--layout-width) * 0.024), 46px);
      line-height: 1;
    }

    .account-title b {
      display: grid;
      place-items: center;
      width: 8.5%;
      height: 86%;
      margin-left: 1%;
      color: #fff;
      background: #555;
      font-size: clamp(20px, calc(var(--layout-width) * 0.02), 38px);
    }

    .mini-table {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      margin: 1%;
      border-top: 1px solid #ddd;
      border-left: 1px solid #ddd;
      color: #777;
      text-align: center;
    }

    .mini-table div {
      min-height: clamp(18px, calc(var(--layout-width) * 0.015), 28px);
      border-right: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
    }

    .account-line {
      display: flex;
      align-items: center;
      gap: 2%;
      margin: 1.2% 1.5%;
    }

    .account-panel input,
    .account-panel button {
      height: clamp(18px, calc(var(--layout-width) * 0.016), 30px);
      border: 2px solid #d0d0d0;
      background: #fff;
      color: #777;
      font-size: inherit;
    }

    .account-panel .gray {
      background: #777;
      color: #fff;
      padding: 0 5%;
      border: 0;
    }

    .offer-account-frame {
      width: 100%;
      height: 100%;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: repeat(3, minmax(0, 1fr));
      gap: 4px;
      padding: 4px;
      overflow: hidden;
      color: #686868;
      font-family: "TrebuchetMS", sans-serif;
      --offer-content-inset-x: clamp(6px, calc(var(--layout-width) * 0.0065), 12px);
      --offer-content-inset-y: clamp(5px, calc(var(--layout-width) * 0.0045), 9px);
    }

    .content-page[data-page="account"] .offer-account-frame.frame {
      border: 0;
      background: #000;
    }

    .offer-panel {
      position: relative;
      min-width: 0;
      overflow: hidden;
      padding: 0;
      border: 0;
      background: #fff;
      font-size: var(--page-desc-text);
      line-height: 1.05;
    }

    .offer-heading {
      height: 17%;
      display: flex;
      align-items: center;
      gap: 1.8%;
      margin: 0;
      padding: 0 1.15%;
      border-bottom: 1px solid #e5e5e5;
      color: #666;
      line-height: 1;
    }

    .offer-number {
      width: clamp(31px, calc(var(--layout-width) * 0.027), 50px);
      aspect-ratio: 1;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      color: #fff;
      background: #545454;
      font-size: clamp(21px, calc(var(--layout-width) * 0.0195), 36px);
      font-weight: 800;
      line-height: 1;
      text-align: center;
    }

    .offer-icon {
      position: relative;
      width: clamp(19px, calc(var(--layout-width) * 0.0172), 32px);
      aspect-ratio: 1;
      flex: 0 0 auto;
      color: #666;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .offer-icon::before,
    .offer-icon::after {
      position: absolute;
      content: "";
      display: none;
      box-sizing: border-box;
    }

    .offer-icon.receipt::before,
    .offer-icon.profile::before {
      left: 21%;
      top: 8%;
      width: 56%;
      height: 74%;
      border: 3px solid currentColor;
      border-radius: 3px;
    }

    .offer-icon.receipt::after,
    .offer-icon.profile::after {
      right: 16%;
      top: 8%;
      width: 24%;
      height: 24%;
      border-left: 3px solid currentColor;
      border-bottom: 3px solid currentColor;
      background: #fff;
    }

    .offer-icon.pin::before {
      left: 23%;
      top: 7%;
      width: 54%;
      height: 54%;
      border: 3px solid currentColor;
      border-radius: 50% 50% 50% 0;
      transform: rotate(-45deg);
    }

    .offer-icon.pin::after {
      left: 43%;
      top: 25%;
      width: 14%;
      height: 14%;
      border-radius: 50%;
      background: currentColor;
    }

    .offer-icon.pay::before {
      left: 16%;
      top: 18%;
      width: 68%;
      height: 54%;
      border: 3px solid currentColor;
      border-radius: 3px;
    }

    .offer-icon.pay::after {
      left: 16%;
      top: 32%;
      width: 68%;
      height: 3px;
      background: currentColor;
    }

    .offer-icon.mail::before {
      left: 10%;
      top: 18%;
      width: 80%;
      height: 58%;
      border: 3px solid currentColor;
      border-radius: 3px;
    }

    .offer-icon.mail::after {
      left: 17%;
      top: 26%;
      width: 66%;
      height: 34%;
      border-left: 3px solid currentColor;
      border-bottom: 3px solid currentColor;
      transform: rotate(-45deg);
    }

    .offer-icon.logout::before {
      left: 10%;
      top: 18%;
      width: 44%;
      height: 58%;
      border: 3px solid currentColor;
      border-right: 0;
    }

    .offer-icon.logout::after {
      right: 7%;
      top: 39%;
      width: 58%;
      height: 22%;
      border-top: 3px solid currentColor;
      border-right: 3px solid currentColor;
      transform: skewX(0deg);
    }

    .offer-heading h2 {
      min-width: 0;
      margin: 0;
      overflow: hidden;
      color: #666;
      font-size: var(--page-title-text);
      font-weight: 800;
      line-height: 1;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .offer-account-frame input,
    .offer-account-frame button {
      height: clamp(16px, calc(var(--layout-width) * 0.0132), 25px);
      border: 2px solid #d6d6d6;
      border-radius: 3px;
      background: #fff;
      color: #777;
      font: inherit;
      line-height: 1;
    }

    .offer-account-frame button {
      display: inline-grid;
      place-items: center;
      padding: 0 4%;
      white-space: nowrap;
    }

    .offer-table {
      display: grid;
      grid-template-columns: 15% 17% 15% 28% 25%;
      margin-top: 0.8%;
      border-top: 1px solid #dedede;
      border-left: 1px solid #dedede;
      color: #777;
      text-align: center;
    }

    .offer-table div {
      min-width: 0;
      min-height: clamp(16px, calc(var(--layout-width) * 0.013), 24px);
      display: grid;
      place-items: center;
      overflow: hidden;
      border-right: 1px solid #dedede;
      border-bottom: 1px solid #dedede;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .offer-purchase-actions {
      position: absolute;
      left: 1.15%;
      right: 1.15%;
      bottom: 3.8%;
      display: grid;
      grid-template-columns: auto 30% 1fr 18% 18%;
      align-items: center;
      gap: 1.4%;
    }

    .offer-purchase-actions input {
      width: 100%;
    }

    .offer-purchases-panel {
      font-size: var(--page-desc-text);
      line-height: 1.05;
    }

    .offer-purchases-panel .offer-heading {
      height: 19.7%;
      margin: 0;
      padding: 0 0.85%;
      gap: 1.75%;
      border-bottom-color: #e3e3e3;
    }

    .offer-purchases-panel .offer-number {
      width: clamp(25px, calc(var(--layout-width) * 0.022), 42px);
      font-size: clamp(18px, calc(var(--layout-width) * 0.017), 32px);
    }

    .offer-purchases-panel .offer-icon {
      width: clamp(17px, calc(var(--layout-width) * 0.0145), 28px);
    }

    .offer-purchases-panel .offer-icon.receipt::before {
      left: 24%;
      top: 6%;
      width: 48%;
      height: 76%;
      border-width: 2px;
      border-radius: 2px;
    }

    .offer-purchases-panel .offer-icon.receipt::after {
      left: 35%;
      top: 22%;
      width: auto;
      height: auto;
      border: 0;
      background: transparent;
      color: currentColor;
      content: "$";
      font-size: 0.72em;
      font-weight: 900;
      line-height: 1;
    }

    .offer-purchases-panel .offer-heading h2 {
      font-size: var(--page-title-text);
      font-weight: 800;
    }

    .offer-purchases-panel .offer-table {
      grid-template-columns: 14.4% 17.7% 15.2% 29.3% 23.4%;
      margin: var(--offer-content-inset-y) var(--offer-content-inset-x) 0;
      border-color: #dedede;
      font-size: var(--page-menu-text);
    }

    .offer-purchases-panel .offer-table div {
      min-height: clamp(17px, calc(var(--layout-width) * 0.0142), 27px);
      border-color: #dedede;
    }

    .offer-purchases-panel .offer-table div:nth-child(-n+5) {
      color: #777;
      font-weight: 700;
    }

    .offer-feedback-radio {
      width: clamp(13px, calc(var(--layout-width) * 0.012), 22px);
      aspect-ratio: 1;
      display: inline-block;
      border: 2px solid #aaa;
      border-radius: 50%;
      background: #fff;
    }

    .offer-purchases-panel .offer-purchase-actions {
      left: var(--offer-content-inset-x);
      right: var(--offer-content-inset-x);
      bottom: 3.9%;
      grid-template-columns: auto 29.5% 1fr 18.7% 18.7%;
      gap: 1.35%;
    }

    .offer-purchases-panel .offer-purchase-actions input,
    .offer-purchases-panel .offer-purchase-actions button {
      height: clamp(18px, calc(var(--layout-width) * 0.0146), 27px);
    }

    .offer-purchases-panel .offer-purchase-actions button {
      border-radius: 2px;
    }

    .offer-reference-panel {
      padding: 0;
      border-color: #d3d3d3;
      color: #666;
      font-size: var(--page-desc-text);
      line-height: 1.05;
    }

    .offer-reference-panel .offer-heading {
      height: 19.7%;
      margin: 0;
      padding: 0 0.85%;
      gap: 1.75%;
      border-bottom-color: #e3e3e3;
    }

    .offer-reference-panel .offer-number {
      width: clamp(25px, calc(var(--layout-width) * 0.022), 42px);
      font-size: clamp(18px, calc(var(--layout-width) * 0.017), 32px);
    }

    .offer-reference-panel .offer-icon {
      width: clamp(17px, calc(var(--layout-width) * 0.0145), 28px);
    }

    .offer-reference-panel .offer-icon::before,
    .offer-reference-panel .offer-icon::after {
      border-width: 2px;
    }

    .offer-reference-panel .offer-heading h2 {
      font-size: var(--page-title-text);
      font-weight: 800;
    }

    .offer-reference-panel input,
    .offer-reference-panel button {
      height: clamp(18px, calc(var(--layout-width) * 0.0146), 27px);
      border-width: 2px;
      border-radius: 2px;
      font-size: var(--page-menu-text);
    }

    .offer-account-panel .offer-icon.profile::before {
      left: 23%;
      top: 6%;
      width: 50%;
      height: 76%;
      border-radius: 2px;
    }

    .offer-account-panel .offer-icon.profile::after {
      left: 35%;
      top: 22%;
      width: auto;
      height: auto;
      border: 0;
      background: transparent;
      content: "";
      box-shadow:
        0 0 0 3px currentColor,
        0 10px 0 4px currentColor;
      transform: scale(0.55);
    }

    .offer-account-panel .offer-form-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0 8%;
      margin: 0.9% var(--offer-content-inset-x) 0;
      padding: 0;
    }

    .offer-account-panel .offer-field {
      min-width: 0;
      box-sizing: border-box;
    }

    .offer-account-panel .offer-field span {
      color: #777;
      font-size: clamp(8px, calc(var(--layout-width) * 0.0078), 15px);
      line-height: 1.05;
    }

    .offer-account-panel .offer-field input {
      height: clamp(17px, calc(var(--layout-width) * 0.0128), 24px);
      margin-top: 0.2%;
      color: #8c8c8c;
      font-size: clamp(8px, calc(var(--layout-width) * 0.0078), 15px);
      box-sizing: border-box;
    }

    .offer-account-panel .offer-inline {
      margin: 0.55% var(--offer-content-inset-x) 0;
      gap: 2.1%;
      color: #777;
      font-size: clamp(8px, calc(var(--layout-width) * 0.0078), 15px);
      line-height: 1.05;
    }

    .offer-account-panel .offer-inline button {
      min-width: 22%;
      height: clamp(17px, calc(var(--layout-width) * 0.0128), 24px);
      padding: 0 1.8%;
      color: #777;
      font-size: clamp(8px, calc(var(--layout-width) * 0.0078), 15px);
    }

    .offer-account-panel .offer-small {
      margin: 0.45% var(--offer-content-inset-x) 0;
      color: #999;
      font-size: clamp(8px, calc(var(--layout-width) * 0.0078), 15px);
      line-height: 1.05;
      letter-spacing: -0.02em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: clip;
    }

    .offer-account-panel .offer-password {
      color: #111;
      letter-spacing: 0.12em;
    }

    .offer-recover {
      min-width: 24%;
      display: inline-grid;
      grid-template-columns: auto 1fr;
      gap: 5%;
      align-items: center;
      justify-items: start;
    }

    .offer-account-panel .offer-recover {
      min-width: 24%;
      margin-left: 0;
    }

    .offer-key {
      width: clamp(11px, calc(var(--layout-width) * 0.0095), 18px);
      aspect-ratio: 1;
      display: inline-block;
      fill: none;
      stroke: #333;
      stroke-width: 3;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .offer-address-panel .offer-icon.pin::before {
      left: 23%;
      top: 8%;
      width: 50%;
      height: 50%;
      border-radius: 50% 50% 50% 0;
    }

    .offer-address-panel .offer-icon.pin::after {
      left: 43%;
      top: 26%;
      width: 13%;
      height: 13%;
    }

    .offer-address-panel {
      font-size: var(--page-desc-text);
      line-height: 1.04;
    }

    .offer-address-panel .offer-heading {
      height: 19.7%;
      margin: 0;
      padding: 0 0.85%;
      gap: 1.75%;
      border-bottom-color: #e3e3e3;
    }

    .offer-address-panel .offer-number {
      width: clamp(25px, calc(var(--layout-width) * 0.022), 42px);
      font-size: clamp(18px, calc(var(--layout-width) * 0.017), 32px);
    }

    .offer-address-panel .offer-icon {
      width: clamp(17px, calc(var(--layout-width) * 0.0145), 28px);
    }

    .offer-address-panel .offer-address {
      grid-template-columns: 1fr 21.2%;
      gap: 2%;
      height: 69%;
      padding: 0.9% var(--offer-content-inset-x) 0;
    }

    .offer-address-panel .offer-address > div:first-child {
      display: grid;
      grid-template-rows: repeat(4, minmax(0, 1fr));
      align-items: center;
      min-height: 0;
      height: 100%;
    }

    .offer-address-panel p {
      margin: 0;
      font-size: clamp(8px, calc(var(--layout-width) * 0.0078), 15px);
      line-height: 1.05;
    }

    .offer-address-panel .offer-address-actions {
      padding-top: 0;
      display: grid;
      grid-template-rows: repeat(4, minmax(0, 1fr));
      align-items: center;
      height: 100%;
    }

    .offer-address-panel .offer-address-actions button {
      height: clamp(14px, calc(var(--layout-width) * 0.0108), 21px);
      margin: 0;
    }

    .offer-address-panel .offer-address-actions button:nth-child(1) {
      grid-row: 3;
    }

    .offer-address-panel .offer-address-actions button:nth-child(2) {
      grid-row: 4;
    }

    .offer-address-panel .offer-add {
      left: 1.15%;
      bottom: 4%;
      display: flex;
      align-items: center;
      gap: 1%;
      font-weight: 700;
      white-space: nowrap;
    }

    .offer-add-dot {
      width: clamp(10px, calc(var(--layout-width) * 0.0095), 17px);
      aspect-ratio: 1;
      position: relative;
      display: inline-block;
      border-radius: 50%;
      background: #333;
      flex: 0 0 auto;
    }

    .offer-add-dot::before,
    .offer-add-dot::after {
      position: absolute;
      content: "";
      left: 50%;
      top: 50%;
      background: #fff;
      transform: translate(-50%, -50%);
    }

    .offer-add-dot::before {
      width: 52%;
      height: 2px;
    }

    .offer-add-dot::after {
      width: 2px;
      height: 52%;
    }

    .offer-payments-panel .offer-icon.pay::before {
      left: 16%;
      top: 24%;
      width: 62%;
      height: 42%;
      border-radius: 3px;
    }

    .offer-payments-panel .offer-icon.pay::after {
      left: 20%;
      top: 34%;
      width: 33%;
      height: 0;
      border: 0;
      border-top: 2px solid currentColor;
      background: transparent;
    }

    .offer-payments-panel p {
      margin: 0;
      color: #8c8c8c;
      font-size: clamp(8px, calc(var(--layout-width) * 0.0078), 15px);
      line-height: 1.05;
    }

    .offer-payment-body {
      height: calc(100% - 19.7%);
      display: grid;
      grid-template-rows: minmax(0, 1fr) clamp(10px, calc(var(--layout-width) * 0.009), 17px) minmax(0, 1fr);
      padding: 0.9% var(--offer-content-inset-x) 0;
      min-height: 0;
      box-sizing: border-box;
    }

    .offer-payment-block {
      display: flex;
      min-height: 0;
      flex-direction: column;
      justify-content: start;
      padding-top: clamp(2px, calc(var(--layout-width) * 0.0025), 5px);
    }

    .offer-payment-block:first-child {
      padding-top: 0;
    }

    .offer-payment-block:last-child {
      padding-top: 0;
    }

    .offer-payments-panel .dark {
      width: 52%;
      min-width: 0;
      height: clamp(14px, calc(var(--layout-width) * 0.0108), 21px);
      display: inline-flex;
      align-items: center;
      justify-content: start;
      padding: 0 2.2%;
      margin-top: clamp(2px, calc(var(--layout-width) * 0.002), 4px);
      border-radius: 1px;
      text-align: left;
      font-size: clamp(8px, calc(var(--layout-width) * 0.0078), 15px);
    }

    .offer-payments-panel .dark svg {
      width: 0.72em;
      height: 0.72em;
      margin-left: 4%;
    }

    .offer-link-out {
      margin-left: 4%;
      width: 0.82em;
      height: 0.82em;
      display: inline-block;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.4;
      stroke-linecap: round;
      stroke-linejoin: round;
      line-height: 1;
      vertical-align: -0.08em;
    }

    .offer-link-out::before {
      position: absolute;
      inset: 18% 0 0 18%;
      content: "";
      display: none;
      border: 2px solid currentColor;
    }

    .offer-link-out::after {
      position: absolute;
      right: 0;
      top: 0;
      width: 56%;
      height: 56%;
      content: "";
      display: none;
      border-top: 2px solid currentColor;
      border-right: 2px solid currentColor;
    }

    .offer-payments-panel .offer-or {
      grid-template-columns: 1fr auto 1fr;
      gap: 4.5%;
      margin: 0.1% 0 0;
      color: #d8d8d8;
      font-size: clamp(8px, calc(var(--layout-width) * 0.0072), 14px);
    }

    .offer-payments-panel .offer-or::before {
      margin-right: 0.5%;
    }

    .offer-payments-panel .offer-or::after {
      margin-left: 0.5%;
    }

    .offer-messages-panel .offer-icon.mail::before {
      left: 8%;
      top: 18%;
      width: 80%;
      height: 57%;
      border-radius: 1px;
    }

    .offer-messages-panel .offer-icon.mail::after {
      left: 19%;
      top: 26%;
      width: 58%;
      height: 30%;
    }

    .offer-message-body {
      height: calc(100% - 19.7%);
      padding: 0.9% var(--offer-content-inset-x) 1.2%;
      min-height: 0;
      box-sizing: border-box;
    }

    .offer-messages-panel .offer-message-grid {
      height: 100%;
      display: grid;
      grid-template-columns: 13.6% 30.7% minmax(0, 1fr);
      grid-template-rows: 18.7% minmax(0, 1fr) clamp(17px, calc(var(--layout-width) * 0.0135), 25px);
      margin: 0;
      font-size: clamp(8px, calc(var(--layout-width) * 0.0078), 15px);
      color: #777;
      box-sizing: border-box;
    }

    .offer-message-scroll {
      position: relative;
      grid-column: 2 / 4;
      grid-row: 2;
      display: grid;
      grid-template-columns: 35.6% minmax(0, 1fr);
      grid-template-rows: minmax(100%, auto) auto;
      min-height: 0;
      padding-right: clamp(9px, calc(var(--layout-width) * 0.0078), 14px);
      overflow-y: scroll;
      overflow-x: hidden;
      border-top: 1px solid #e4e4e4;
      border-left: 1px solid #e0e0e0;
      border-right: 1px solid #e0e0e0;
      background:
        linear-gradient(#8b8b8b, #8b8b8b) right clamp(3px, calc(var(--layout-width) * 0.0022), 5px) top clamp(3px, calc(var(--layout-width) * 0.0022), 5px) / clamp(5px, calc(var(--layout-width) * 0.0042), 8px) 42% no-repeat,
        linear-gradient(#f4f4f4, #f4f4f4) right top / clamp(9px, calc(var(--layout-width) * 0.0078), 14px) 100% no-repeat;
      scrollbar-color: #8b8b8b #f5f5f5;
      scrollbar-width: thin;
    }

    .offer-message-scroll::-webkit-scrollbar {
      width: clamp(10px, calc(var(--layout-width) * 0.009), 16px);
    }

    .offer-message-scroll::-webkit-scrollbar-track {
      background: #f5f5f5;
    }

    .offer-message-scroll::-webkit-scrollbar-thumb {
      background: #8b8b8b;
      border: 2px solid #f5f5f5;
      border-radius: 999px;
    }

    .offer-messages-panel .offer-message-tools {
      grid-column: 2 / 4;
      grid-row: 1;
      gap: 4.3%;
      padding: 0 1%;
      border-bottom-color: #dfdfdf;
    }

    .offer-messages-panel .offer-message-tools img {
      width: clamp(13px, calc(var(--layout-width) * 0.0105), 20px);
      height: clamp(13px, calc(var(--layout-width) * 0.0105), 20px);
    }

    .offer-messages-panel .offer-message-folders {
      grid-column: 1;
      grid-row: 1 / 4;
    }

    .offer-messages-panel .offer-message-folders div {
      gap: 5%;
      border-bottom-color: #e6e6e6;
      font-size: clamp(8px, calc(var(--layout-width) * 0.0078), 15px);
    }

    .offer-messages-panel .offer-dot {
      width: clamp(11px, calc(var(--layout-width) * 0.0095), 18px);
    }

    .offer-messages-panel .offer-message-list {
      grid-column: 1;
      grid-row: 1;
      border-right: 1px solid #e0e0e0;
    }

    .offer-messages-panel .offer-message-list div {
      min-height: 25%;
      border-bottom-color: #e6e6e6;
      font-size: clamp(8px, calc(var(--layout-width) * 0.0078), 15px);
    }

    .offer-messages-panel .offer-tag {
      min-width: 25%;
      padding: 0 3%;
      border-radius: 2px;
    }

    .offer-messages-panel .offer-message-preview {
      grid-column: 2;
      grid-row: 1;
      padding-left: 1.3%;
      overflow: hidden;
    }

    .offer-messages-panel .offer-message-preview > div:not(.message-bubble) {
      min-height: 25%;
      border-bottom-color: #e6e6e6;
      font-size: clamp(8px, calc(var(--layout-width) * 0.0078), 15px);
    }

    .offer-messages-panel .offer-message-search {
      grid-column: 2 / 4;
      grid-row: 3;
      grid-template-columns: 41% 53% 5%;
      margin: 0;
      padding: 0 1%;
      border-top: 1px solid #eeeeee;
      background: #fff;
    }

    .offer-messages-panel .offer-message-search input {
      height: clamp(17px, calc(var(--layout-width) * 0.0135), 25px);
      border-width: 2px;
      font-size: clamp(8px, calc(var(--layout-width) * 0.0078), 15px);
    }

    .offer-message-spacer {
      grid-column: 1 / 3;
      grid-row: 2;
      height: clamp(34px, calc(var(--layout-width) * 0.026), 52px);
    }

    .offer-signout-panel .offer-icon.logout::before {
      left: 10%;
      top: 18%;
      width: 44%;
      height: 58%;
    }

    .offer-signout-panel .offer-icon.logout::after {
      right: 7%;
      top: 39%;
      width: 58%;
      height: 22%;
    }

    .offer-signout-panel .offer-signout-body {
      height: calc(70.5% - var(--offer-content-inset-y));
      margin: var(--offer-content-inset-y) var(--offer-content-inset-x) 0;
      place-items: center;
    }

    .offer-signout-panel .offer-signout-body button {
      min-width: 20.8%;
      height: clamp(19px, calc(var(--layout-width) * 0.015), 28px);
      border-radius: 1px;
      font-size: var(--page-menu-text);
    }

    .offer-form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.8% 18%;
      margin-bottom: 0.6%;
    }

    .offer-field span {
      display: block;
      line-height: 1;
    }

    .offer-field input {
      width: 100%;
    }

    .offer-inline {
      display: flex;
      align-items: center;
      gap: 2%;
      min-width: 0;
      margin: 0.4% 0;
      white-space: nowrap;
    }

    .offer-inline .grow {
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .offer-small {
      color: #9a9a9a;
      font-size: var(--page-desc-text);
      line-height: 1.05;
    }

    .offer-password {
      color: #111;
      letter-spacing: 0;
    }

    .offer-address {
      display: grid;
      grid-template-columns: 1fr 21%;
      gap: 1.4%;
      height: 71%;
      align-items: start;
    }

    .offer-address p,
    .offer-payments p {
      margin: 0 0 0.7%;
    }

    .offer-address-actions {
      padding-top: 26%;
    }

    .offer-address-actions button {
      width: 100%;
      margin-bottom: 6%;
    }

    .offer-add {
      position: absolute;
      left: 1.15%;
      bottom: 4%;
      font-weight: 700;
    }

    .offer-payments {
      position: relative;
    }

    .offer-payments .dark {
      min-width: 42%;
      height: clamp(16px, calc(var(--layout-width) * 0.0116), 22px);
      border: 0;
      border-radius: 2px;
      background: #777;
      color: #fff;
    }

    .offer-or {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 5%;
      margin: 0.5% 0;
      color: #d5d5d5;
      font-size: var(--page-desc-text);
    }

    .offer-or::before,
    .offer-or::after {
      height: 1px;
      content: "";
      background: #ececec;
    }

    .offer-message-grid {
      height: calc(100% - 19.7%);
      display: grid;
      grid-template-columns: 13.5% 30.8% 55.7%;
      grid-template-rows: 19% 62% 19%;
      border-top: 1px solid #eee;
      font-size: clamp(8px, calc(var(--layout-width) * 0.0078), 15px);
      color: #777;
    }

    .offer-message-tools {
      grid-column: 2 / 4;
      display: flex;
      align-items: center;
      gap: 3.2%;
      min-width: 0;
      padding: 0 1%;
      border-bottom: 1px solid #e3e3e3;
      white-space: nowrap;
    }

    .offer-message-tools span {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      font-weight: 900;
    }

    .offer-message-tools .tool-icon {
      width: clamp(14px, calc(var(--layout-width) * 0.013), 24px);
      aspect-ratio: 1;
      display: inline-grid;
      place-items: center;
      flex: 0 0 auto;
      color: #777;
      font-size: clamp(12px, calc(var(--layout-width) * 0.0115), 22px);
      line-height: 1;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.6;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .offer-message-tools .icon-check {
      border: 2px solid #aaa;
      border-radius: 3px;
      background: #fff;
      box-sizing: border-box;
    }

    .offer-message-tools img {
      width: clamp(12px, calc(var(--layout-width) * 0.01), 19px);
      height: clamp(12px, calc(var(--layout-width) * 0.01), 19px);
      object-fit: contain;
    }

    .offer-message-folders {
      grid-row: 1 / 4;
      border-right: 1px solid #e0e0e0;
      color: #777;
    }

    .offer-message-folders div {
      height: 33.333%;
      display: flex;
      align-items: center;
      gap: 5%;
      padding-left: 0;
      border-bottom: 1px solid #eeeeee;
      white-space: nowrap;
    }

    .offer-dot {
      width: clamp(12px, calc(var(--layout-width) * 0.011), 20px);
      aspect-ratio: 1;
      display: inline-grid;
      place-items: center;
      border-radius: 50%;
      background: #777;
      color: #fff;
      font-size: 0.78em;
    }

    .offer-message-list {
      grid-column: 2;
      grid-row: 2;
      overflow: hidden;
      border-right: 1px solid #e0e0e0;
    }

    .offer-message-list div {
      height: 25%;
      display: grid;
      align-items: center;
      min-width: 0;
      overflow: hidden;
      border-bottom: 1px solid #eeeeee;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .offer-message-preview > div:not(.message-bubble) {
      height: 25%;
      display: grid;
      align-items: center;
      min-width: 0;
      overflow: hidden;
      border-bottom: 1px solid #eeeeee;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding-right: 1%;
    }

    .offer-tag {
      display: inline-grid;
      place-items: center;
      width: max-content;
      min-width: 22%;
      padding: 0 3%;
      border-radius: 3px;
      background: #777;
      color: #fff;
      font-weight: 700;
    }

    .offer-message-list .message-head {
      grid-template-columns: auto auto 1fr;
      gap: 3.2%;
      padding: 0 2.5%;
    }

    .offer-message-list .message-check {
      width: clamp(13px, calc(var(--layout-width) * 0.0108), 20px);
      aspect-ratio: 1;
      display: inline-block;
      border: 2px solid #aaa;
      border-radius: 3px;
      background: #fff;
    }

    .offer-message-preview {
      grid-column: 3;
      grid-row: 2;
      overflow: hidden;
      padding-left: 1.2%;
    }

    .offer-message-preview b {
      min-width: clamp(28px, calc(var(--layout-width) * 0.0255), 48px);
      display: inline-grid;
      place-items: center;
      margin-right: 2%;
      border: 2px solid #ddd;
      border-radius: 2px;
      color: #777;
      line-height: 1;
    }

    .offer-message-search {
      grid-column: 2 / 4;
      grid-row: 3;
      display: grid;
      grid-template-columns: 41% 52% 6%;
      align-items: center;
      gap: 0.8%;
      padding: 0 0.8%;
      border-top: 1px solid #eeeeee;
    }

    .message-search-field,
    .message-send-field {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
      min-width: 0;
      height: clamp(17px, calc(var(--layout-width) * 0.0135), 25px);
      padding: 0 3.5%;
      border: 2px solid #d8d8d8;
      border-radius: 999px;
      background: #fff;
      color: #aaa;
      box-sizing: border-box;
    }

    .message-search-field {
      gap: 2.5%;
    }

    .message-send-field {
      gap: 2.5%;
    }

    .message-search-field svg,
    .message-send-field svg {
      width: clamp(9px, calc(var(--layout-width) * 0.0082), 15px);
      aspect-ratio: 1;
      fill: none;
      stroke: currentColor;
      stroke-width: 2.3;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .offer-message-search input {
      width: 100%;
      height: auto;
      min-width: 0;
      border: 0;
      border-radius: 999px;
      color: #aaa;
      background: transparent;
    }

    .offer-message-search input:focus,
    .offer-message-search input:focus-visible {
      outline: 0;
      box-shadow: none;
      background: transparent;
    }

    .offer-send-arrow {
      width: clamp(16px, calc(var(--layout-width) * 0.0145), 28px);
      height: clamp(16px, calc(var(--layout-width) * 0.0145), 28px);
      fill: none;
      stroke: #777;
      stroke-width: 2.4;
      stroke-linejoin: round;
    }

    .offer-signout-body {
      height: 73%;
      display: grid;
      place-items: center;
    }

    .offer-signout-body button {
      min-width: 21%;
      border: 0;
      border-radius: 2px;
      background: #777;
      color: #fff;
      font-weight: 700;
    }

    .content-page[data-page="account"] .offer-copyline {
      display: none;
    }

    .offer-account-frame,
    .new-detail-frame,
    .watch-catalog-frame {
      font-family: "TrebuchetMS", sans-serif;
    }

    .offer-table div,
    .offer-purchase-actions,
    .offer-message-folders div,
    .offer-message-tools span,
    .offer-message-list div,
    .offer-message-preview > div:not(.message-bubble),
    .offer-message-search input,
    .offer-signout-body button,
    .new-pages button {
      font-size: var(--page-menu-text);
      line-height: 1;
    }

    .offer-heading h2,
    .offer-purchases-panel .offer-heading h2,
    .offer-reference-panel .offer-heading h2,
    .new-product-text h2 {
      font-size: var(--page-title-text);
      font-weight: 800;
      line-height: 1;
      letter-spacing: 0;
    }

    .offer-account-frame .offer-panel button,
    .offer-account-frame .offer-reference-panel button,
    .offer-account-frame .offer-purchases-panel button {
      font-size: var(--page-menu-text);
      line-height: 1;
    }

    .offer-panel,
    .offer-reference-panel,
    .offer-purchases-panel,
    .offer-account-frame input,
    .offer-address-panel p {
      font-size: var(--page-desc-text);
      line-height: 1.05;
    }

    .new-product-text,
    .new-product-text p,
    .new-product-text .new-description,
    .new-price-row,
    .new-checkout-values,
    .new-checkout-values strong,
    .new-checkout-values > button,
    .new-bottom-fill {
      font-size: var(--panel-body-text);
    }

    .offer-payments-panel p,
    .offer-payments-panel .dark {
      font-size: var(--page-desc-text);
      line-height: 1;
    }

    .offer-account-panel .offer-field span,
    .offer-account-panel .offer-field input,
    .offer-account-panel .offer-inline,
    .offer-account-panel .offer-inline button,
    .offer-account-panel .offer-small {
      font-size: var(--page-desc-text);
      line-height: 1.05;
    }

    .offer-account-panel .offer-inline button {
      height: clamp(17px, calc(var(--layout-width) * 0.0128), 24px);
      line-height: 1;
    }

    .offer-account-panel .offer-inline:last-child button {
      min-width: 14%;
      margin-left: auto;
    }

    .content-page[data-page="account"] .offer-account-frame input,
    .content-page[data-page="account"] .offer-account-frame .offer-panel:not(.offer-signout-panel) button {
      height: clamp(18px, calc(var(--layout-width) * 0.0146), 27px);
      min-height: clamp(18px, calc(var(--layout-width) * 0.0146), 27px);
      font-size: var(--page-menu-text);
      line-height: 1;
      box-sizing: border-box;
    }

    .content-page[data-page="account"] .offer-signout-panel .offer-signout-body button {
      height: clamp(36px, calc(var(--layout-width) * 0.0292), 54px);
      min-height: clamp(36px, calc(var(--layout-width) * 0.0292), 54px);
      min-width: 42%;
      font-size: calc(var(--page-menu-text) * 2);
      line-height: 1;
    }

    .content-page[data-page="account"] .offer-payments-panel .dark {
      height: clamp(24px, calc(var(--layout-width) * 0.0195), 36px);
      min-height: clamp(24px, calc(var(--layout-width) * 0.0195), 36px);
    }

    .content-page[data-page="account"] button {
      cursor: pointer;
    }

    .register-frame {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 10px;
      padding: 0;
      border: 0;
      background: #fff;
      color: #111;
      font-family: "TrebuchetMS", sans-serif;
    }

    .register-frame * {
      letter-spacing: 0;
    }

    .register-panel {
      position: relative;
      min-width: 0;
      min-height: 0;
      overflow: hidden;
      border: 2px solid #111;
      background: #fff;
    }

    .register-left {
      display: grid;
      grid-template-rows: 43% 57%;
      justify-items: center;
    }

    .register-new-user {
      align-self: end;
      width: 52%;
      margin-bottom: 5.5%;
      text-align: center;
    }

    .register-new-user h1,
    .register-current-user h2 {
      margin: 0;
      color: #080808;
      font-size: clamp(33px, calc(var(--layout-width) * 0.0315), 60px);
      font-weight: 700;
      line-height: 1;
      letter-spacing: 0;
    }

    .register-new-user p {
      margin: 5.8% 0 5%;
      font-size: clamp(20px, calc(var(--layout-width) * 0.019), 36px);
      line-height: 1;
    }

    .register-orange-button,
    .register-primary-button {
      height: clamp(32px, calc(var(--layout-width) * 0.0305), 58px);
      border: 3px solid #111;
      border-radius: 2px;
      background: linear-gradient(180deg, #ff6526 0%, #ff581d 48%, #e44400 100%);
      color: #fff;
      font-size: clamp(17px, calc(var(--layout-width) * 0.0154), 30px);
      font-weight: 700;
      line-height: 1;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
      cursor: pointer;
    }

    .register-orange-button {
      width: 76%;
    }

    .register-current-user {
      align-self: start;
      width: 41%;
      margin-top: 4.5%;
      text-align: center;
    }

    .register-current-user h2 {
      margin-bottom: 7%;
      white-space: nowrap;
    }

    .register-auth-message {
      width: 156%;
      margin: -3.5% 0 5% -28%;
      padding: clamp(4px, calc(var(--layout-width) * 0.0045), 8px) 6%;
      border: 2px solid #111;
      background: #fff3d7;
      color: #111;
      font-size: clamp(9px, calc(var(--layout-width) * 0.0095), 16px);
      line-height: 1.15;
      text-align: center;
    }

    .register-auth-message.is-error {
      background: #ffe6e6;
      color: #a00000;
    }

    .register-auth-message.is-success {
      background: #e8f7df;
      color: #1f6b24;
    }

    .register-icon-field {
      width: 100%;
      height: clamp(28px, calc(var(--layout-width) * 0.0258), 50px);
      display: grid;
      grid-template-columns: 17% minmax(0, 1fr) 14%;
      align-items: center;
      margin-bottom: 3.2%;
      border: 3px solid #171717;
      background: #fff;
    }

    .register-email-field {
      grid-template-columns: 17% minmax(0, 1fr);
    }

    .register-icon-field input {
      width: 100%;
      min-width: 0;
      height: 100%;
      border: 0;
      border-left: 2px solid #444;
      background: transparent;
      color: #777;
      font-size: clamp(17px, calc(var(--layout-width) * 0.0155), 29px);
      line-height: 1;
      padding: 0 8%;
      outline: 0;
    }

    .register-icon-field input::placeholder {
      color: #777;
      opacity: 1;
    }

    .register-field-icon,
    .register-eye {
      display: grid;
      place-items: center;
      color: #333;
    }

    .register-eye {
      width: 100%;
      height: 100%;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: pointer;
    }

    .register-field-icon svg,
    .register-eye svg {
      width: clamp(16px, calc(var(--layout-width) * 0.0125), 24px);
      height: clamp(16px, calc(var(--layout-width) * 0.0125), 24px);
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .register-password-toggle[aria-pressed="true"] svg {
      stroke-width: 2.8;
    }

    .register-password-toggle[aria-pressed="true"] svg circle {
      fill: currentColor;
    }

    .register-login-button {
      position: relative;
      width: 100%;
      height: clamp(30px, calc(var(--layout-width) * 0.0288), 55px);
      overflow: hidden;
      border: 3px solid #111;
      border-radius: 0;
      background: #009a4d;
      color: #fff;
      font-size: clamp(16px, calc(var(--layout-width) * 0.0142), 27px);
      font-weight: 700;
      line-height: 1;
      cursor: pointer;
    }

    .register-login-button span {
      display: none;
    }

    .register-right {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .register-signup-form {
      width: 52%;
      margin-top: 0;
    }

    .register-signup-form h2 {
      margin: 0 0 9.6%;
      color: #111;
      text-align: center;
      font-size: clamp(26px, calc(var(--layout-width) * 0.022), 42px);
      font-weight: 700;
      line-height: 1;
      text-transform: none;
      white-space: nowrap;
    }

    .register-signup-form label {
      display: block;
      margin-bottom: 4.4%;
      color: #333;
      font-size: clamp(13px, calc(var(--layout-width) * 0.011), 20px);
      line-height: 1.2;
      white-space: nowrap;
    }

    .register-signup-form label span {
      color: #111;
    }

    .register-signup-form input,
    .register-password-wrap {
      width: 100%;
      height: clamp(26px, calc(var(--layout-width) * 0.0235), 45px);
      display: block;
      margin-top: 2.4%;
      border: 3px solid #1b1b1b;
      border-radius: 3px;
      background: #fff;
      color: #111;
      font-size: clamp(15px, calc(var(--layout-width) * 0.0125), 24px);
      line-height: 1;
      box-sizing: border-box;
    }

    .register-signup-form input {
      padding: 0 3%;
      outline: 0;
    }

    .register-password-label {
      margin-bottom: 1.4%;
    }

    .register-password-wrap {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 12%;
      align-items: center;
    }

    .register-password-wrap input {
      height: 100%;
      margin: 0;
      border: 0;
    }

    .register-help {
      margin: 0.6% 0 4.9%;
      color: #9ca4a6;
      font-size: clamp(11px, calc(var(--layout-width) * 0.0092), 18px);
      line-height: 1.28;
      letter-spacing: 0.01em;
    }

    .register-help .register-symbols {
      letter-spacing: 0.15em;
    }

    .register-password-wrap.is-invalid {
      border-color: #cf2500;
      box-shadow: 0 0 0 1px rgba(207, 37, 0, 0.25);
    }

    .register-password-wrap.is-valid {
      border-color: #148a45;
      box-shadow: 0 0 0 1px rgba(20, 138, 69, 0.2);
    }

    .register-signup-row {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 9.5%;
    }

    .register-primary-button {
      width: 76%;
      height: clamp(32px, calc(var(--layout-width) * 0.0305), 58px);
      background: linear-gradient(180deg, #ff6526 0%, #ff581d 48%, #e44400 100%);
    }

    .register-seal {
      width: clamp(30px, calc(var(--layout-width) * 0.0245), 47px);
      height: auto;
      display: block;
    }

    .register-or {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      align-items: center;
      column-gap: 8%;
      margin: 0 0 20%;
      color: #a6acad;
      font-size: clamp(12px, calc(var(--layout-width) * 0.01), 19px);
      line-height: 1;
      text-align: center;
    }

    .register-or span {
      height: 2px;
      background: #e1e1e1;
    }

    .register-or b {
      font-weight: 400;
    }

    .register-switch {
      display: block;
      margin: 0;
      color: #333;
      font-size: clamp(10px, calc(var(--layout-width) * 0.0082), 16px);
      line-height: 1;
    }

    .register-switch button {
      border: 0;
      background: transparent;
      color: #111;
      font-size: clamp(19px, calc(var(--layout-width) * 0.0148), 29px);
      line-height: 1;
      cursor: pointer;
    }

    .offer-messages-panel .offer-message-folders div,
    .offer-messages-panel .offer-message-tools span,
    .offer-messages-panel .offer-message-list div,
    .offer-messages-panel .offer-message-preview > div:not(.message-bubble),
    .offer-messages-panel .offer-message-search input {
      font-size: clamp(8px, calc(var(--layout-width) * 0.0078), 15px);
      line-height: 1.05;
    }

    .watch-product-card .badge,
    .watch-ribbon,
    .badge {
      font-size: var(--page-micro-text);
      line-height: 1;
    }

    .offer-panel .button {
      display: inline-grid;
      place-items: center;
      min-height: clamp(16px, calc(var(--layout-width) * 0.0132), 25px);
      padding: 0 clamp(8px, calc(var(--layout-width) * 0.0085), 14px);
      border: 1px solid #999;
      color: #111;
      background: #fff;
      font: inherit;
      line-height: 1;
      text-decoration: none;
    }

    .watch-map-title,
    .compact-info .info-title,
    .new-tabs button,
    .new-tabs .new-tab-label,
    .new-tabs button.active,
    .new-tabs button:focus-visible,
    .ontime-info-tabs button {
      font-family: "TrebuchetMS", sans-serif;
      font-size: var(--page-copyline-text) !important;
      font-weight: 400;
      line-height: 1;
    }

    .compact-info .info-title,
    .new-tabs button,
    .new-tabs .new-tab-label,
    .ontime-info-tabs button,
    .watch-map-title {
      display: grid !important;
      place-items: center !important;
      box-sizing: border-box;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
    }

    .page-copyline,
    .new-copyline,
    .watch-copyline,
    .japanese-copyline,
    .cart-copyline,
    .listing-copy,
    .detail-copyline,
    .ontime-info-table .new-copyline {
      display: flex !important;
      align-items: center !important;
      align-self: stretch;
      box-sizing: border-box;
      height: 100% !important;
      min-height: 0 !important;
      max-height: none !important;
      font-size: var(--page-copyline-text) !important;
      line-height: 1 !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
    }

    /* 内容区右侧，底边与内容底对齐：LiveChat + 相扑 */
    .side-mascot-stack {
      position: absolute;
      left: calc(var(--content-left) + var(--content-width) + 0.35%);
      right: auto;
      bottom: auto;
      top: calc(var(--content-top) + var(--content-height) - 131px);
      z-index: 20;
      width: 13.2%;
      max-width: 200px;
      display: flex;
      flex-direction: row;
      align-items: flex-end;
      justify-content: flex-start;
      gap: 2px;
      pointer-events: none;
    }

    .livechat-hit {
      position: relative;
      right: auto;
      bottom: auto;
      z-index: 21;
      height: auto;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: pointer;
      pointer-events: auto;
      line-height: 0;
    }

    .livechat-hit--chat {
      order: 1;
      width: 58%;
    }

    .livechat-hit--xp {
      order: 2;
      width: 42%;
      max-width: 118px;
    }

    .side-mascot-xp,
    .livechat-hit-image {
      display: block;
      width: 100%;
      height: auto;
      object-fit: contain;
      pointer-events: none;
      user-select: none;
    }

    .livechat-hit:focus-visible {
      outline: 3px solid rgba(71, 116, 187, 0.9);
      outline-offset: 3px;
    }

    .livechat-panel {
      position: absolute;
      top: auto;
      left: calc(var(--content-left) + var(--content-width) + 0.4%);
      right: auto;
      bottom: calc(100% - (var(--content-top) + var(--content-height)) + 104px);
      z-index: 10002;
      display: flex;
      width: var(--livechat-trigger-width);
      max-height: min(520px, calc(var(--content-height) - 20px));
      flex-direction: column;
      border: 3px solid #111;
      background: #fffbe8;
      box-shadow: 6px 7px 0 rgba(17, 17, 17, 0.28);
      color: #111;
      font-family: "TrebuchetMS", sans-serif;
      font-size: 14px;
      line-height: 1.3;
      box-sizing: border-box;
    }

    .livechat-panel[hidden] {
      display: none;
    }

    .livechat-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      padding: 13px 14px 11px;
      border-bottom: 2px solid #111;
      background: #ffd84d;
    }

    .livechat-header strong {
      display: block;
      font-size: 21px;
      line-height: 1;
    }

    .livechat-status {
      display: flex;
      align-items: center;
      gap: 5px;
      margin-top: 6px;
      color: #403600;
      font-size: 12px;
    }

    .livechat-status i {
      width: 8px;
      height: 8px;
      border: 1px solid #111;
      border-radius: 50%;
      background: #39a852;
    }

    .livechat-close {
      width: 30px;
      height: 30px;
      padding: 0;
      border: 2px solid #111;
      background: #fffbe8;
      color: #111;
      font: 700 22px/24px "TrebuchetMS", sans-serif;
      cursor: pointer;
    }

    .livechat-close:hover,
    .livechat-close:focus-visible {
      background: #fff;
      outline: 2px solid #111;
      outline-offset: 2px;
    }

    .livechat-messages {
      display: flex;
      min-height: 178px;
      max-height: 310px;
      flex: 1 1 auto;
      flex-direction: column;
      gap: 10px;
      overflow-y: auto;
      padding: 14px;
      background: #fffdf2;
    }

    .livechat-message {
      max-width: 88%;
      padding: 10px 11px 8px;
      border: 2px solid #111;
      box-shadow: 3px 3px 0 rgba(17, 17, 17, 0.16);
    }

    .livechat-message--agent {
      align-self: flex-start;
      background: #fff;
    }

    .livechat-message--user {
      align-self: flex-end;
      background: #ffe48a;
    }

    .livechat-message strong {
      display: block;
      margin-bottom: 4px;
      font-size: 13px;
    }

    .livechat-message p {
      margin: 0;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }

    .livechat-message time {
      display: block;
      margin-top: 7px;
      color: #5e5a4a;
      font-size: 11px;
    }

    .livechat-form {
      padding: 10px;
      border-top: 2px solid #111;
      background: #f5e9b9;
    }

    .livechat-form textarea {
      display: block;
      width: 100%;
      min-height: 58px;
      resize: vertical;
      padding: 9px 10px;
      border: 2px solid #111;
      border-radius: 0;
      background: #fff;
      color: #111;
      font: 14px/1.35 "TrebuchetMS", sans-serif;
      box-sizing: border-box;
    }

    .livechat-form textarea:focus {
      outline: 2px solid #3f74bb;
      outline-offset: 2px;
    }

    .livechat-form-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-top: 8px;
    }

    .livechat-form-footer span {
      color: #5e5a4a;
      font-size: 11px;
    }

    .livechat-form-footer button {
      min-width: 72px;
      padding: 7px 12px;
      border: 2px solid #111;
      background: #ffd84d;
      color: #111;
      font: 700 13px "TrebuchetMS", sans-serif;
      cursor: pointer;
    }

    .livechat-form-footer button:hover,
    .livechat-form-footer button:focus-visible {
      background: #fff;
      outline: 2px solid #111;
      outline-offset: 2px;
    }

    .screen-reader-text {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .chaty {
      display: none !important;
    }

@media (max-width: 900px) {
  .livechat-panel {
    right: 0.8%;
    bottom: 116px;
    width: min(360px, calc(100vw - 24px));
    max-height: calc(100% - 140px);
  }
}

@media (max-width: 640px) {
  .livechat-messages {
    min-height: 150px;
  }
}
  

.page-frame, .ontime-panel-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}

.content-stack {
  position: relative;
  width: 100%;
  height: 100%;
}

.content-stack > .content-page {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.page-viewport {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: 565px;
  border: 0;
  background: transparent;
}

/* Account reference reconstruction */
.content-page[data-page="account"] {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

.content-page[data-page="account"] .offer-account-frame {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 49.25fr) minmax(0, 50.75fr);
  grid-template-rows: minmax(0, 30.9fr) minmax(0, 34.9fr) minmax(0, 34.2fr);
  gap: clamp(4px, calc(var(--layout-width) * 0.0036), 6px);
  padding: clamp(4px, calc(var(--layout-width) * 0.0042), 7px);
  box-sizing: border-box;
  overflow: hidden;
  border: 0;
  background: #000;
  color: #686868;
  font-family: "TrebuchetMS", "Arial Narrow", Arial, sans-serif;
  --account-dark: #5b5b5b;
  --account-mid: #777;
  --account-light: #e7e7e7;
  --account-line: #e3e3e3;
  --account-copy: clamp(10px, calc(var(--layout-width) * 0.011), 14px);
  --account-small: clamp(9px, calc(var(--layout-width) * 0.0088), 11px);
  --account-title: clamp(22px, calc(var(--layout-width) * 0.0255), 32px);
  --account-button-h: clamp(16px, calc(var(--layout-width) * 0.0185), 22px);
  --account-heading-h: 24.8%;
}

.content-page[data-page="account"] .offer-panel {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: var(--account-heading-h) minmax(0, 1fr);
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: var(--account-mid);
  font-size: var(--account-copy);
  line-height: 1.04;
}

.content-page[data-page="account"] .offer-heading {
  height: auto;
  min-height: 0;
  display: flex;
  align-items: center;
  gap: clamp(4px, calc(var(--layout-width) * 0.0058), 9px);
  margin: 0;
  padding: clamp(2px, calc(var(--layout-width) * 0.0025), 4px) clamp(6px, calc(var(--layout-width) * 0.006), 10px);
  box-sizing: border-box;
  border-bottom: 2px solid var(--account-light);
  color: var(--account-dark);
  line-height: 1;
}

.content-page[data-page="account"] .offer-number {
  width: clamp(30px, calc(var(--layout-width) * 0.0335), 40px);
  height: clamp(30px, calc(var(--layout-width) * 0.0335), 40px);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: #4f4f4f;
  color: #fff;
  font-size: clamp(20px, calc(var(--layout-width) * 0.024), 30px);
  font-weight: 800;
  line-height: 1;
}

.content-page[data-page="account"] .account-icon-slot {
  width: clamp(26px, calc(var(--layout-width) * 0.0282), 34px);
  height: clamp(26px, calc(var(--layout-width) * 0.0282), 34px);
  flex: 0 0 auto;
  display: inline-block;
  box-sizing: border-box;
  background: transparent;
}

.content-page[data-page="account"] .account-icon-slot.small,
.content-page[data-page="account"] .account-icon-slot.tiny,
.content-page[data-page="account"] .account-icon-slot.link,
.content-page[data-page="account"] .account-icon-slot.send {
  width: 1em;
  height: 1em;
}

.content-page[data-page="account"] .account-icon-slot,
.content-page[data-page="account"] .message-avatar,
.content-page[data-page="account"] .offer-add-dot {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.content-page[data-page="account"] .offer-heading .account-icon-slot {
  background-size: 88% 88%;
}

.content-page[data-page="account"] .offer-heading .account-icon-slot[data-icon="payment"] {
  background-size: 78% 78%;
}

.content-page[data-page="account"] .offer-heading .account-icon-slot[data-icon="message"],
.content-page[data-page="account"] .offer-heading .account-icon-slot[data-icon="signout"] {
  background-size: 92% 92%;
}

.content-page[data-page="account"] .account-icon-slot[data-icon="purchase"] {
  background-image: url("../account-icons/purchase.png");
}

.content-page[data-page="account"] .account-icon-slot[data-icon="account"] {
  background-image: url("../account-icons/account.png");
}

.content-page[data-page="account"] .account-icon-slot[data-icon="address"] {
  background-image: url("../account-icons/address.png");
}

.content-page[data-page="account"] .account-icon-slot[data-icon="payment"] {
  background-image: url("../account-icons/payment.png");
}

.content-page[data-page="account"] .account-icon-slot[data-icon="message"] {
  background-image: url("../account-icons/message.png");
}

.content-page[data-page="account"] .account-icon-slot[data-icon="signout"] {
  background-image: url("../account-icons/signout.png");
}

.content-page[data-page="account"] .account-icon-slot[data-icon="key"] {
  background-image: url("../account-icons/key.png");
}

.content-page[data-page="account"] .account-icon-slot[data-icon="external"] {
  background-image: url("../account-icons/external.png");
}

.content-page[data-page="account"] .account-icon-slot[data-icon="trash"] {
  background-image: url("../account-icons/trash.png");
}

.content-page[data-page="account"] .account-icon-slot[data-icon="mail-open"] {
  background-image: url("../account-icons/mail_open.png");
}

.content-page[data-page="account"] .account-icon-slot[data-icon="mail-closed"] {
  background-image: url("../account-icons/mail_closed.png");
}

.content-page[data-page="account"] .account-icon-slot[data-icon="flag"] {
  background-image: url("../account-icons/flag.png");
}

.content-page[data-page="account"] .account-icon-slot[data-icon="search"] {
  background-image: url("../account-icons/search.png");
}

.content-page[data-page="account"] .account-icon-slot[data-icon="image"] {
  background-image: url("../account-icons/image.png");
}

.content-page[data-page="account"] .account-icon-slot[data-icon="send"] {
  background-image: url("../account-icons/send.png");
}

.content-page[data-page="account"] .offer-heading h2 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--account-dark);
  font-size: var(--account-title);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-page[data-page="account"] .account-panel-body {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}

.content-page[data-page="account"] .offer-account-frame input,
.content-page[data-page="account"] .offer-account-frame button {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  border: 2px solid #d2d2d2;
  border-radius: 3px;
  background: #fff;
  color: var(--account-mid);
  font: inherit;
  line-height: 1;
}

.content-page[data-page="account"] .offer-account-frame button {
  display: inline-grid;
  place-items: center;
  padding: 0 clamp(7px, calc(var(--layout-width) * 0.007), 12px);
  white-space: nowrap;
  cursor: pointer;
}

.content-page[data-page="account"] .offer-account-frame button:focus-visible,
.content-page[data-page="account"] .offer-account-frame [contenteditable="true"]:focus-visible {
  outline: 2px solid #777;
  outline-offset: 1px;
}

.content-page[data-page="account"] .offer-account-frame input:focus,
.content-page[data-page="account"] .offer-account-frame input:focus-visible {
  outline: 0;
}

.content-page[data-page="account"] .offer-account-frame input:not([type="checkbox"]):focus {
  border-color: #9d9d9d;
  box-shadow: inset 0 0 0 1px #ededed;
}

.content-page[data-page="account"] .offer-account-frame input[type="checkbox"]:focus {
  border-color: #777;
  box-shadow: 0 0 0 1px #d0d0d0;
}

.content-page[data-page="account"] .offer-account-frame .dark,
.content-page[data-page="account"] .offer-account-frame .offer-signout-body button {
  border-color: #777;
  background: #777;
  color: #fff;
}

.content-page[data-page="account"] .is-hidden {
  display: none !important;
}

.content-page[data-page="account"] .is-selected {
  background: #f5f5f5;
}

.content-page[data-page="account"] .account-purchases-body {
  display: grid;
  grid-template-rows: minmax(0, 1fr) clamp(30px, calc(var(--layout-width) * 0.034), 38px);
  min-height: 0;
  overflow: hidden;
}

.content-page[data-page="account"] .account-purchase-scroll {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 1px solid var(--account-line);
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #9a9a9a #ececec;
}

.content-page[data-page="account"] .account-purchase-scroll::-webkit-scrollbar {
  width: 8px;
}

.content-page[data-page="account"] .account-purchase-scroll::-webkit-scrollbar-track {
  background: #ececec;
}

.content-page[data-page="account"] .account-purchase-scroll::-webkit-scrollbar-thumb {
  background: #9a9a9a;
  border-radius: 4px;
}

.content-page[data-page="account"] .account-purchase-table {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr) minmax(0, 0.72fr) minmax(0, 1.38fr) minmax(0, 0.62fr);
  align-content: start;
  margin: 0;
  border-left: 1px solid var(--account-line);
  color: var(--account-mid);
  text-align: center;
}

.content-page[data-page="account"] .account-purchase-table div {
  min-width: 0;
  min-height: clamp(28px, calc(var(--layout-width) * 0.028), 36px);
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 3px clamp(3px, calc(var(--layout-width) * 0.0035), 6px);
  border-right: 1px solid var(--account-line);
  border-bottom: 1px solid var(--account-line);
  box-sizing: border-box;
  font-size: var(--account-copy);
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-page[data-page="account"] .account-purchase-table div:nth-child(-n+5) {
  position: sticky;
  top: 0;
  z-index: 2;
  font-weight: 700;
  color: #555;
  background: #f3f3f3;
  box-shadow: 0 1px 0 var(--account-line);
}

.content-page[data-page="account"] .account-purchase-table .account-table-empty {
  grid-column: 1 / -1;
  min-height: clamp(42px, calc(var(--layout-width) * 0.043), 58px);
  color: var(--account-mid);
  white-space: nowrap;
}

.content-page[data-page="account"] .account-purchase-table .cart-product {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  text-align: left;
  overflow: hidden;
}

.content-page[data-page="account"] .account-purchase-table .cart-product img {
  width: clamp(18px, calc(var(--layout-width) * 0.018), 24px);
  height: clamp(18px, calc(var(--layout-width) * 0.018), 24px);
  object-fit: contain;
}

.content-page[data-page="account"] .account-purchase-table .cart-product span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.1;
  font-size: clamp(9px, calc(var(--layout-width) * 0.0095), 12px);
}

.content-page[data-page="account"] .account-feedback-dot,
.content-page[data-page="account"] .offer-account-frame button.account-feedback-dot {
  display: block !important;
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  max-width: 12px !important;
  min-height: 12px !important;
  max-height: 12px !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  margin: 0 auto !important;
  border: 2px solid #888 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-sizing: border-box !important;
  vertical-align: middle;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  place-items: unset !important;
  align-self: center !important;
  justify-self: center !important;
  flex: none !important;
}

.content-page[data-page="account"] .account-feedback-dot.is-filled,
.content-page[data-page="account"] .offer-account-frame button.account-feedback-dot.is-filled {
  border-color: #111 !important;
  background: #111 !important;
}

.content-page[data-page="account"] .account-feedback-dot.is-clickable {
  cursor: pointer !important;
}

.content-page[data-page="account"] .account-feedback-dot.is-clickable:hover,
.content-page[data-page="account"] .offer-account-frame button.account-feedback-dot.is-clickable:hover {
  border-color: #000 !important;
  background: #000 !important;
}

.content-page[data-page="account"] .account-feedback-dot.is-done {
  opacity: 0.9;
}

.content-page[data-page="account"] .account-feedback-dot.is-done.is-clickable {
  cursor: pointer !important;
}

.content-page[data-page="account"] .offer-feedback-radio {
  width: auto;
  min-width: clamp(52px, calc(var(--layout-width) * 0.055), 72px);
  height: clamp(18px, calc(var(--layout-width) * 0.018), 24px);
  padding: 0 8px;
  border: 1px solid #aaa;
  border-radius: 2px;
  background: #fff;
  color: #666;
  font-size: var(--account-small);
  line-height: 1;
}

.content-page[data-page="account"] .offer-feedback-radio[aria-pressed="true"] {
  box-shadow: none;
  background: #777;
  color: #fff;
}

.content-page[data-page="account"] .offer-purchase-actions {
  position: static;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr) 72px 72px;
  align-items: center;
  gap: 6px;
  padding: clamp(3px, calc(var(--layout-width) * 0.0035), 6px) clamp(7px, calc(var(--layout-width) * 0.008), 12px);
  box-sizing: border-box;
  border-top: 1px solid var(--account-line);
  background: #fafafa;
}

.content-page[data-page="account"] .offer-purchase-actions label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(8px, calc(var(--layout-width) * 0.009), 16px);
  min-width: 0;
  white-space: nowrap;
}

.content-page[data-page="account"] .offer-purchase-actions input,
.content-page[data-page="account"] .offer-purchase-actions button {
  width: 100%;
  height: var(--account-button-h);
}

.content-page[data-page="account"] .account-profile-body {
  display: grid;
  grid-template-columns: minmax(0, 41.5%) minmax(0, 17%) minmax(0, 21%) minmax(0, 20.5%);
  grid-template-rows: 30% 18% 12% 18% 22%;
  align-items: start;
  padding: 0 clamp(5px, calc(var(--layout-width) * 0.0058), 9px);
  box-sizing: border-box;
}

.content-page[data-page="account"] .account-field {
  display: block;
  min-width: 0;
}

.content-page[data-page="account"] .account-first-name {
  grid-column: 1 / 3;
  grid-row: 1;
}

.content-page[data-page="account"] .account-last-name {
  grid-column: 3 / 5;
  grid-row: 1;
}

.content-page[data-page="account"] .account-field span {
  display: block;
  margin-bottom: clamp(1px, calc(var(--layout-width) * 0.0016), 3px);
  font-size: var(--account-small);
  line-height: 1;
}

.content-page[data-page="account"] .account-field input {
  width: 100%;
  height: clamp(17px, calc(var(--layout-width) * 0.0185), 22px);
  padding: 0 clamp(4px, calc(var(--layout-width) * 0.0045), 8px);
}

.content-page[data-page="account"] .account-edit-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(3px, calc(var(--layout-width) * 0.0035), 6px);
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.content-page[data-page="account"] .account-edit-line span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.content-page[data-page="account"] .account-edit-line input {
  width: 100%;
  height: var(--account-button-h);
  padding: 0 clamp(3px, calc(var(--layout-width) * 0.0038), 6px);
  font-size: var(--account-copy);
}

.content-page[data-page="account"] .account-email-line {
  grid-column: 1 / 3;
  grid-row: 2;
  align-self: center;
}

.content-page[data-page="account"] .account-email-button {
  grid-column: 3 / 4;
  grid-row: 2;
  align-self: center;
  width: 92%;
}

.content-page[data-page="account"] .account-email-note {
  grid-column: 1 / 5;
  grid-row: 3;
  align-self: start;
  margin: 0;
  overflow: hidden;
  color: #8f8f8f;
  font-size: var(--account-small);
  line-height: 1;
  text-overflow: clip;
  white-space: nowrap;
}

.content-page[data-page="account"] .account-password-line {
  grid-column: 1 / 3;
  grid-row: 4;
  align-self: center;
  color: var(--account-mid);
}

.content-page[data-page="account"] .offer-password {
  color: #111;
  letter-spacing: 0.14em;
}

.content-page[data-page="account"] .account-password-button {
  grid-column: 3 / 4;
  grid-row: 4;
  align-self: center;
  width: 92%;
}

.content-page[data-page="account"] .account-recover-button {
  grid-column: 4 / 5;
  grid-row: 4;
  align-self: center;
  width: 100%;
  grid-template-columns: auto 1fr;
  justify-items: center;
  gap: clamp(2px, calc(var(--layout-width) * 0.0035), 6px);
}

.content-page[data-page="account"] .account-delete-line {
  grid-column: 1 / 5;
  grid-row: 5;
  align-self: start;
  min-width: 0;
  overflow: hidden;
  padding-right: clamp(74px, calc(var(--layout-width) * 0.1), 130px);
  box-sizing: border-box;
  text-overflow: clip;
  white-space: nowrap;
}

.content-page[data-page="account"] .account-delete-button {
  grid-column: 4 / 5;
  grid-row: 5;
  justify-self: end;
  align-self: start;
  width: 67%;
}

.content-page[data-page="account"] .account-change-button,
.content-page[data-page="account"] .account-recover-button,
.content-page[data-page="account"] .account-delete-button {
  height: var(--account-button-h);
}

.content-page[data-page="account"] .account-address-body {
  position: relative;
  display: block;
  padding: clamp(5px, calc(var(--layout-width) * 0.0052), 8px) clamp(7px, calc(var(--layout-width) * 0.007), 11px) clamp(6px, calc(var(--layout-width) * 0.006), 10px);
  box-sizing: border-box;
  overflow: auto;
}

.content-page[data-page="account"] .account-address-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(4px, calc(var(--layout-width) * 0.004), 7px);
  align-content: start;
  min-height: 0;
}

.content-page[data-page="account"] .account-address-cell {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start;
  gap: 3px;
  min-width: 0;
  border: 1px solid #c0c0c0;
  background: #fff;
  padding: clamp(4px, calc(var(--layout-width) * 0.004), 6px) clamp(5px, calc(var(--layout-width) * 0.0045), 8px);
  box-sizing: border-box;
}

.content-page[data-page="account"] .account-address-cell > span {
  display: block;
  flex: 0 0 auto;
  color: #666;
  font-size: var(--account-small);
  line-height: 1.1;
  font-weight: 400;
  white-space: nowrap;
}

.content-page[data-page="account"] .account-address-country-controls,
.content-page[data-page="account"] .account-address-dial-controls {
  display: flex;
  gap: 4px;
  min-width: 0;
  width: 100%;
}

.content-page[data-page="account"] .account-address-country-custom {
  display: none !important;
  flex: 1 1 42%;
  width: auto !important;
}

.content-page[data-page="account"] .account-address-dial-custom {
  display: none !important;
  flex: 1 1 100%;
  width: auto !important;
}

.content-page[data-page="account"] .account-address-country-custom.is-visible,
.content-page[data-page="account"] .account-address-dial-custom.is-visible {
  display: block !important;
}

.content-page[data-page="account"] .account-address-dial-controls > select.is-hidden {
  display: none !important;
}

.content-page[data-page="account"] .account-address-cell > input,
.content-page[data-page="account"] .account-address-cell > select,
.content-page[data-page="account"] .account-address-country-controls > select,
.content-page[data-page="account"] .account-address-country-controls > input,
.content-page[data-page="account"] .account-address-dial-controls > select,
.content-page[data-page="account"] .account-address-dial-controls > input {
  display: block;
  flex: 0 0 auto;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: clamp(18px, calc(var(--layout-width) * 0.018), 22px) !important;
  min-height: clamp(18px, calc(var(--layout-width) * 0.018), 22px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  font-size: var(--account-copy) !important;
  color: #222 !important;
  outline: none !important;
  appearance: none;
  -webkit-appearance: none;
}

.content-page[data-page="account"] .account-address-country-controls > select {
  flex: 1 1 auto;
  width: auto !important;
}

.content-page[data-page="account"] .account-address-cell > select,
.content-page[data-page="account"] .account-address-country-controls > select,
.content-page[data-page="account"] .account-address-dial-controls > select {
  background-image: linear-gradient(45deg, transparent 50%, #666 50%), linear-gradient(135deg, #666 50%, transparent 50%);
  background-position: calc(100% - 12px) 55%, calc(100% - 7px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 18px !important;
}

.content-page[data-page="account"] .account-address-line {
  grid-column: 1 / -1;
  grid-row: 1;
}

.content-page[data-page="account"] .account-address-city { grid-column: 1; grid-row: 2; }
.content-page[data-page="account"] .account-address-state { grid-column: 2; grid-row: 2; }
.content-page[data-page="account"] .account-address-zip { grid-column: 3; grid-row: 2; }

/* Match image: Country wider, Code narrower, Phone next row */
.content-page[data-page="account"] .account-address-country { grid-column: 1 / 3; grid-row: 3; }
.content-page[data-page="account"] .account-address-dial { grid-column: 3; grid-row: 3; }
.content-page[data-page="account"] .account-address-phone { grid-column: 1 / 3; grid-row: 4; }

.content-page[data-page="account"] .account-address-actions {
  grid-column: 3;
  grid-row: 4;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 0;
}

.content-page[data-page="account"] .account-address-status {
  margin-right: auto;
  color: #555;
  font-size: var(--account-small);
  line-height: 1.2;
}

.content-page[data-page="account"] .account-address-status.is-ok { color: #1a5f2a; }
.content-page[data-page="account"] .account-address-status.is-error { color: #8a2f1f; }

.content-page[data-page="account"] .account-address-actions .account-change-button {
  width: auto;
  min-width: 72px;
  height: var(--account-button-h);
  padding: 0 12px;
}

.content-page[data-page="account"] .offer-address {
  display: grid;
  grid-template-columns: minmax(0, 68%) minmax(0, 20.5%);
  gap: 2.5%;
  min-height: 0;
  height: 100%;
}

.content-page[data-page="account"] .account-address-lines {
  display: grid;
  grid-template-rows: repeat(5, minmax(0, 1fr));
  min-height: 0;
}

.content-page[data-page="account"] .account-address-lines p {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--account-mid);
  font-size: var(--account-copy);
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-page[data-page="account"] .account-address-lines p:first-child {
  display: flex;
  gap: clamp(12px, calc(var(--layout-width) * 0.021), 34px);
}

.content-page[data-page="account"] .account-address-lines .account-empty-state {
  display: block;
}

.content-page[data-page="account"] .account-empty-state,
.content-page[data-page="account"] .message-empty-state {
  color: var(--account-mid);
  font-size: var(--account-copy);
  line-height: 1.15;
}

.content-page[data-page="account"] .message-empty-state {
  display: grid;
  place-items: center;
  height: 100%;
  padding: 0 clamp(5px, calc(var(--layout-width) * 0.006), 9px);
  box-sizing: border-box;
}

.content-page[data-page="account"] .offer-address-actions {
  display: grid;
  grid-template-rows: repeat(5, minmax(0, 1fr));
  align-items: center;
  height: 100%;
  padding: 0;
}

.content-page[data-page="account"] .offer-address-actions button {
  width: 100%;
  height: var(--account-button-h);
  margin: 0;
}

.content-page[data-page="account"] .offer-address-actions button:nth-child(1) {
  grid-row: 3;
}

.content-page[data-page="account"] .offer-address-actions button:nth-child(2) {
  grid-row: 4;
}

.content-page[data-page="account"] .offer-address-actions button:nth-child(3) {
  grid-row: 5;
}

.content-page[data-page="account"] .offer-account-frame .offer-add {
  position: static;
  justify-self: start;
  align-self: center;
  height: clamp(16px, calc(var(--layout-width) * 0.018), 22px);
  display: inline-flex;
  align-items: center;
  gap: clamp(5px, calc(var(--layout-width) * 0.0045), 8px);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--account-mid);
  font-size: var(--account-copy);
  font-weight: 400;
}

.content-page[data-page="account"] .offer-add-dot {
  width: clamp(10px, calc(var(--layout-width) * 0.0105), 13px);
  height: clamp(10px, calc(var(--layout-width) * 0.0105), 13px);
  background-image: url("../account-icons/add.png");
  background-color: transparent;
}

.content-page[data-page="account"] .offer-payment-body {
  display: block;
  min-height: 0;
  padding: clamp(8px, calc(var(--layout-width) * 0.009), 14px) clamp(8px, calc(var(--layout-width) * 0.0084), 14px) 0;
  box-sizing: border-box;
}

.content-page[data-page="account"] .offer-payment-block {
  position: static;
  display: block;
  min-height: 0;
  padding: 0;
}

.content-page[data-page="account"] .offer-payment-block:first-child {
  grid-row: auto;
}

.content-page[data-page="account"] .offer-payment-block:last-child {
  grid-row: auto;
}

.content-page[data-page="account"] .offer-payment-block p {
  margin: 0 0 clamp(1px, calc(var(--layout-width) * 0.0018), 3px);
  color: var(--account-mid);
  font-size: var(--account-copy);
  line-height: 1.05;
  pointer-events: none;
  white-space: nowrap;
}

.content-page[data-page="account"] .offer-payments-panel .dark {
  width: 48%;
  max-width: 100%;
  min-width: clamp(170px, calc(var(--layout-width) * 0.2), 255px);
  height: var(--account-button-h);
  min-height: 0;
  display: inline-grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-items: start;
  gap: clamp(5px, calc(var(--layout-width) * 0.0045), 8px);
  padding: 0 clamp(6px, calc(var(--layout-width) * 0.006), 11px);
  border: 0;
  border-radius: 2px;
  background: #777;
  color: #fff;
  font-size: var(--account-copy);
  line-height: 1;
  overflow: visible;
  margin-top: clamp(1px, calc(var(--layout-width) * 0.0016), 3px);
}

.content-page[data-page="account"] .offer-payments-panel .dark[aria-pressed="true"] {
  background: #5f5f5f;
}

.content-page[data-page="account"] .account-recover-button .account-icon-slot.small {
  width: clamp(13px, calc(var(--layout-width) * 0.0142), 18px);
  height: clamp(13px, calc(var(--layout-width) * 0.0142), 18px);
  background-size: 92% 92%;
}

.content-page[data-page="account"] .offer-payments-panel .account-icon-slot.link {
  width: clamp(11px, calc(var(--layout-width) * 0.0122), 15px);
  height: clamp(11px, calc(var(--layout-width) * 0.0122), 15px);
  background-size: 88% 88%;
}

/* My Messages — keep original 6-panel structure; fix overflow only */
.content-page[data-page="account"] .offer-message-body {
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.content-page[data-page="account"] .offer-message-grid {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(58px, 15%) minmax(0, 33%) minmax(0, 1fr);
  grid-template-rows: 28px minmax(0, 1fr) 34px;
  overflow: hidden;
  border-top: 1px solid #efefef;
  color: var(--account-mid);
  font-size: clamp(10px, calc(var(--layout-width) * 0.0102), 13px);
}

.content-page[data-page="account"] .offer-message-folders {
  grid-column: 1;
  grid-row: 1 / 4;
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  border-right: 1px solid var(--account-line);
  background: #fff;
}

.content-page[data-page="account"] .offer-message-folders button {
  width: 100%;
  height: 100%;
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  padding: 0 0 0 4px !important;
  border: 0 !important;
  border-bottom: 1px solid #efefef !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: var(--account-mid) !important;
  font-size: inherit !important;
  line-height: 1.1 !important;
  text-align: left !important;
  white-space: nowrap !important;
  cursor: pointer;
}

.content-page[data-page="account"] .offer-message-folders button.active {
  font-weight: 700 !important;
  background: #f7f7f7 !important;
}

.content-page[data-page="account"] .offer-dot {
  min-width: 14px;
  height: 12px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #777;
  color: #fff;
  font-size: 0.7em;
  line-height: 1;
}

.content-page[data-page="account"] .offer-message-tools {
  grid-column: 2 / 4;
  grid-row: 1;
  display: grid;
  grid-template-columns:
    22px 22px 22px 22px 22px 18px minmax(0, 1fr) 8px;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 0 6px;
  border-bottom: 1px solid var(--account-line);
  box-sizing: border-box;
  background: #fff;
}

.content-page[data-page="account"] .offer-message-tools button,
.content-page[data-page="account"] .message-check-label {
  width: 22px !important;
  height: 22px !important;
  display: grid !important;
  place-items: center;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  cursor: pointer;
}

.content-page[data-page="account"] .message-check-label input,
.content-page[data-page="account"] .message-row input[type="checkbox"] {
  width: 13px !important;
  height: 13px !important;
  margin: 0 !important;
  appearance: none;
  border: 1.5px solid #aaa !important;
  border-radius: 3px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.content-page[data-page="account"] .message-check-label input:checked,
.content-page[data-page="account"] .message-row input[type="checkbox"]:checked {
  background: #777 !important;
  box-shadow: inset 0 0 0 2px #fff !important;
}

.content-page[data-page="account"] .message-avatar {
  width: 16px;
  height: 16px;
  display: inline-block;
  background-image: url("../account-icons/avatar.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.content-page[data-page="account"] .offer-message-tools .account-icon-slot.tiny {
  width: 14px;
  height: 14px;
  background-size: contain;
}

.content-page[data-page="account"] .message-tools-title {
  min-width: 0;
  overflow: hidden;
  color: #777;
  font-size: 0.9em;
  font-weight: 600;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-page[data-page="account"] .offer-message-list {
  grid-column: 2;
  grid-row: 2;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-right: 1px solid var(--account-line);
  background: #fff;
  scrollbar-width: thin;
}

.content-page[data-page="account"] .message-empty-state {
  padding: 14px 8px;
  color: #999;
  text-align: center;
}

.content-page[data-page="account"] .offer-messages-panel .message-row {
  width: 100%;
  min-height: 40px !important;
  height: auto !important;
  display: grid !important;
  grid-template-columns: 18px 30px minmax(0, 1fr) !important;
  align-items: center !important;
  justify-items: stretch !important;
  gap: 4px !important;
  padding: 5px 6px !important;
  border: 0 !important;
  border-bottom: 1px solid #efefef !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: var(--account-mid) !important;
  font-size: inherit !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  text-align: left !important;
  white-space: normal !important;
  cursor: pointer;
}

.content-page[data-page="account"] .offer-messages-panel .message-row:hover {
  background: #f7f7f7 !important;
}

.content-page[data-page="account"] .offer-messages-panel .message-row.is-selected {
  background: #f1f1f1 !important;
}

.content-page[data-page="account"] .offer-messages-panel .message-row.is-unread {
  color: #333 !important;
  font-weight: 700 !important;
}

.content-page[data-page="account"] .offer-messages-panel .message-row.is-flagged .offer-tag {
  background: #8a6d3b;
}

.content-page[data-page="account"] .offer-messages-panel .message-row.is-hidden {
  display: none !important;
}

.content-page[data-page="account"] .message-row-main {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.content-page[data-page="account"] .message-row-subject {
  min-width: 0;
  overflow: hidden;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-page[data-page="account"] .offer-messages-panel .message-row time {
  color: #999 !important;
  font-size: 0.75em !important;
  font-weight: 500 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

.content-page[data-page="account"] .offer-tag {
  min-width: 28px;
  display: inline-grid;
  place-items: center;
  padding: 2px 3px;
  border-radius: 3px;
  background: #777;
  color: #fff;
  font-size: 0.72em;
  font-weight: 700;
  line-height: 1;
}

.content-page[data-page="account"] .offer-message-preview {
  grid-column: 3;
  grid-row: 2;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 10px;
  box-sizing: border-box;
  background: #fff;
}

.content-page[data-page="account"] .offer-message-preview .account-empty-state {
  margin: auto;
  color: #999;
  white-space: normal;
}

.content-page[data-page="account"] .offer-message-preview > .message-preview-time,
.content-page[data-page="account"] .message-preview-time {
  flex: 0 0 auto;
  align-self: center;
  height: auto !important;
  min-height: 0 !important;
  max-width: 100%;
  overflow: visible !important;
  border: 0 !important;
  padding: 0 !important;
  color: #999;
  font-size: 0.75em;
  line-height: 1.2;
  white-space: nowrap !important;
  text-overflow: clip;
}

/* Bubbles: auto height so multi-line text is never clipped */
.content-page[data-page="account"] .offer-messages-panel .offer-message-preview .message-bubble,
.content-page[data-page="account"] .offer-message-preview .message-bubble,
.offer-message-preview .message-bubble {
  flex: 0 0 auto;
  width: fit-content;
  max-width: calc(100% - 4px);
  min-width: 0;
  height: auto !important;
  min-height: 36px !important;
  max-height: none !important;
  display: grid !important;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  align-content: start;
  padding: 10px 12px !important;
  border: 1px solid #e6e6e6 !important;
  border-bottom: 1px solid #e6e6e6 !important;
  border-radius: 8px;
  background: #f7f7f7;
  box-sizing: border-box;
  overflow: visible !important;
  font-size: clamp(11px, calc(var(--layout-width) * 0.009), 14px) !important;
  line-height: 1.45 !important;
  text-overflow: unset !important;
  white-space: normal !important;
}

.content-page[data-page="account"] .offer-message-preview .message-bubble--you,
.offer-message-preview .message-bubble--you {
  align-self: flex-end;
  background: #eeeeee;
}

.content-page[data-page="account"] .offer-message-preview .message-bubble--agent,
.offer-message-preview .message-bubble--agent {
  align-self: flex-start;
  background: #fafafa;
}

.content-page[data-page="account"] .offer-message-preview .message-bubble b,
.offer-message-preview .message-bubble b {
  width: 28px;
  min-width: 28px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  margin: 2px 0 0;
  padding: 0;
  border: 0 !important;
  border-radius: 3px;
  background: #777;
  color: #fff;
  font-size: 0.68em;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.content-page[data-page="account"] .offer-message-preview .message-bubble--agent b {
  background: #555;
}

.content-page[data-page="account"] .offer-message-preview .message-bubble span,
.offer-message-preview .message-bubble span {
  min-width: 0;
  display: block;
  overflow: visible !important;
  color: #444;
  font-size: inherit;
  font-weight: 500;
  line-height: 1.45 !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal !important;
  text-overflow: unset !important;
}

.content-page[data-page="account"] .offer-message-search {
  grid-column: 2 / 4;
  grid-row: 3;
  display: grid;
  grid-template-columns: 34% minmax(0, 1fr) 24px;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  border-top: 1px solid var(--account-line);
  box-sizing: border-box;
  background: #fff;
}

.content-page[data-page="account"] .message-search-field,
.content-page[data-page="account"] .message-send-field {
  height: 22px;
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  border: 1px solid #d6d6d6;
  border-radius: 999px;
  box-sizing: border-box;
  color: #aaa;
  overflow: hidden;
  background: #fff;
}

.content-page[data-page="account"] .offer-message-search input {
  width: 100% !important;
  min-width: 0;
  height: 100% !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  color: #666 !important;
  font-size: inherit !important;
  box-shadow: none !important;
}

.content-page[data-page="account"] .offer-send-arrow {
  width: 24px !important;
  height: 22px !important;
  display: grid !important;
  place-items: center;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  cursor: pointer;
}

.content-page[data-page="account"] .offer-send-arrow .account-icon-slot.send {
  width: 100%;
  height: 100%;
  background-size: 84% 84%;
}

.content-page[data-page="account"] .offer-signout-body {
  height: auto;
  display: grid;
  place-items: center;
}

.content-page[data-page="account"] .offer-signout-panel .offer-signout-body button {
  min-width: clamp(136px, 20.4%, 190px);
  height: clamp(28px, calc(var(--layout-width) * 0.0278), 43px);
  min-height: 0;
  border: 0;
  border-radius: 2px;
  background: #777;
  color: #fff;
  font-size: var(--account-copy);
  font-weight: 400;
}

:root {
  --responsive-stage-left: max(0px, calc((100vw - var(--stage-width)) / 2));
}

.top-products {
  left: calc(var(--responsive-stage-left) + var(--stage-width) * 0.3);
  width: calc(var(--stage-width) * 0.272);
}

.brand-tools {
  right: calc(var(--responsive-stage-left) + var(--stage-width) * 0.15);
}

.wood-menu {
  left: calc(var(--responsive-stage-left) + var(--stage-width) * 0.141);
  width: calc(var(--stage-width) * 0.711);
}

.content-space {
  left: calc(var(--responsive-stage-left) + var(--stage-width) * 0.14);
  width: calc(var(--stage-width) * 0.72);
}

.side-mascot-stack {
  top: calc(var(--content-top) + var(--content-height) - 131px);
  left: calc(var(--responsive-stage-left) + var(--stage-width) * 0.864);
  right: auto;
  bottom: auto;
  width: calc(var(--stage-width) * 0.132);
  max-width: none;
}

.livechat-panel {
  top: auto;
  left: calc(var(--responsive-stage-left) + var(--stage-width) * 0.864);
  right: auto;
  bottom: calc(100% - (var(--content-top) + var(--content-height)) + 104px);
  width: calc(var(--stage-width) * 0.132);
}

.livechat-hit--chat {
  width: 58%;
}

.livechat-hit--xp {
  width: 42%;
}

.content-page[data-page="watch"] .watch-catalog-frame {
  gap: calc(var(--content-frame-gap) * 0.5);
  padding: calc(var(--content-frame-padding) * 0.5);
}

.content-page[data-page="watch"] .watch-catalog-body {
  grid-template-columns: minmax(0, 12.2%) minmax(0, 1fr) minmax(0, 13.5%);
  gap: calc(var(--content-frame-gap) * 0.5);
  border: 0;
  background: transparent;
  overflow: hidden;
}

.content-page[data-page="watch"] .watch-product-copy {
  left: 6%;
  width: 88%;
}

.content-page[data-page="watch"] .watch-product-line > span:first-child {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.content-page[data-page="watch"] .watch-product-name {
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

.content-page[data-page="watch"] .watch-category-panel {
  /* Match homepage Store Location map height (~18.7% of content) */
  grid-template-rows: minmax(0, 1fr) var(--page-map-title-height) minmax(0, calc(var(--content-height) * 0.187));
}

.content-page[data-page="watch"] .watch-map-slot,
.content-page[data-page="watch"] .watch-map-slot.page-map-cell {
  height: 100%;
  min-height: 0;
  max-height: none;
}

.content-page[data-page="watch"] .watch-product-copy,
.content-page[data-page="watch"] .watch-product-copy strong,
.content-page[data-page="watch"] .watch-product-name,
.content-page[data-page="watch"] .watch-product-line > span:first-child {
  font-size: var(--panel-body-text) !important;
  line-height: 1.08;
}

.content-page[data-page="watch"] .watch-product-copy .badge {
  font-size: var(--page-micro-text) !important;
  line-height: 1;
}

.content-page[data-page="watch"] .watch-category-panel {
  border: 2px solid #111;
}

.content-page[data-page="watch"] .watch-filter-panel {
  border: 2px solid #111;
  background: #fff;
  box-sizing: border-box;
}

.content-page[data-page="watch"] .watch-filter-panel {
  padding: clamp(10px, calc(var(--layout-width) * 0.012), 16px);
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
  font-size: clamp(12px, calc(var(--layout-width) * 0.0128), 23px);
  line-height: 1.08;
}

.content-page[data-page="watch"] .watch-filter-panel h3 {
  margin: clamp(8px, calc(var(--layout-width) * 0.009), 14px) 0 clamp(5px, calc(var(--layout-width) * 0.006), 9px);
  font-size: clamp(14px, calc(var(--layout-width) * 0.0146), 27px);
  font-weight: 900;
}

.content-page[data-page="watch"] .watch-filter-panel h3:first-child {
  margin-top: 0;
}

.content-page[data-page="watch"] .watch-filter-panel input[type="text"] {
  height: clamp(17px, calc(var(--layout-width) * 0.0165), 28px);
  padding: 0 clamp(7px, calc(var(--layout-width) * 0.008), 12px);
  font-size: clamp(12px, calc(var(--layout-width) * 0.0128), 23px);
}

.content-page[data-page="watch"] .watch-filter-panel input[type="text"]::placeholder {
  font-size: clamp(11px, calc(var(--layout-width) * 0.0115), 21px);
}

.content-page[data-page="watch"] .watch-filter-row,
.content-page[data-page="watch"] .watch-filter-range {
  margin-bottom: clamp(3px, calc(var(--layout-width) * 0.004), 7px);
  column-gap: clamp(7px, calc(var(--layout-width) * 0.008), 13px);
  gap: clamp(7px, calc(var(--layout-width) * 0.008), 13px);
  font-size: clamp(12px, calc(var(--layout-width) * 0.0128), 23px);
}

.content-page[data-page="watch"] .watch-filter-range {
  grid-template-columns: clamp(34px, calc(var(--layout-width) * 0.034), 60px) minmax(0, 1fr);
}

.content-page[data-page="watch"] .watch-filter-row input[type="checkbox"] {
  width: clamp(13px, calc(var(--layout-width) * 0.013), 22px);
  border-width: 2px;
}

.content-page[data-page="watch"] .watch-color-grid,
.content-page[data-page="watch"] .watch-page-grid {
  gap: clamp(4px, calc(var(--layout-width) * 0.0052), 9px);
}

.content-page[data-page="watch"] .watch-color-grid {
  margin: clamp(4px, calc(var(--layout-width) * 0.005), 8px) 0 clamp(7px, calc(var(--layout-width) * 0.007), 12px);
}

.content-page[data-page="watch"] .watch-page-group {
  margin-top: auto;
}

.content-page[data-page="watch"] .watch-page-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(5px, calc(var(--layout-width) * 0.006), 10px);
}

.content-page[data-page="watch"] .watch-color-grid span,
.content-page[data-page="watch"] .watch-color-grid button,
.content-page[data-page="watch"] .watch-page-grid span,
.content-page[data-page="watch"] .watch-page-grid button {
  width: 100%;
  min-height: clamp(15px, calc(var(--layout-width) * 0.015), 25px);
  aspect-ratio: auto;
  font-size: clamp(10px, calc(var(--layout-width) * 0.0108), 20px);
}

.content-page[data-page="watch"] .watch-page-current {
  margin-top: clamp(4px, calc(var(--layout-width) * 0.0045), 8px);
  font-size: clamp(11px, calc(var(--layout-width) * 0.0115), 21px);
}

.new-pages .active,
.detail-pages .active {
  position: relative;
  color: #fff;
  background: #b47a38;
  border-color: #c8945f;
  font-size: var(--panel-menu-text);
  line-height: 1;
}

.detail-pages .active {
  font-size: clamp(10px, calc(var(--layout-width) * 0.01), 18px);
}

.home-carousel-controls button.active {
  position: relative;
  color: #fff;
  background: #4b78c2;
  border-color: #3a86cb;
  font-size: clamp(10px, calc(var(--layout-width) * 0.0103), 19px);
  line-height: 1;
}

.pager button.active:not(.stop) {
  position: relative;
  color: #fff;
  background: #4774bb;
  border-color: #4774bb;
  font-size: clamp(10px, calc(var(--layout-width) * 0.01), 18px);
  line-height: 1;
}

.new-pages .active::before,
.detail-pages .active::before,
.home-carousel-controls button.active::before,
.pager button.active:not(.stop)::before,
.new-pages .active::after,
.detail-pages .active::after,
.home-carousel-controls button.active::after,
.pager button.active:not(.stop)::after {
  content: none;
}

.new-pages .is-next-indicator,
.detail-pages .is-next-indicator,
.home-carousel-controls button.is-next-indicator,
.pager button.is-next-indicator:not(.stop) {
  /* Keep numbers visible — no triangle glyphs */
  color: inherit;
  background: #fff;
  font-size: inherit;
  line-height: inherit;
}

.new-pages .is-next-indicator,
.detail-pages .is-next-indicator {
  --next-play-color: #b47a38;
  border-color: #c8945f;
}

.home-carousel-controls button.is-next-indicator {
  --next-play-color: #3a86cb;
  border-color: #3a86cb;
}

.pager button.is-next-indicator:not(.stop) {
  --next-play-color: #4774bb;
  border-color: #4774bb;
}

.new-pages .is-next-indicator::before,
.detail-pages .is-next-indicator::before,
.home-carousel-controls button.is-next-indicator::before,
.pager button.is-next-indicator:not(.stop)::before,
.new-pages .is-next-indicator::after,
.detail-pages .is-next-indicator::after,
.home-carousel-controls button.is-next-indicator::after,
.pager button.is-next-indicator:not(.stop)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}

.new-pages .is-next-indicator::before,
.detail-pages .is-next-indicator::before,
.home-carousel-controls button.is-next-indicator::before,
.pager button.is-next-indicator:not(.stop)::before,
.new-pages .is-next-indicator::after,
.detail-pages .is-next-indicator::after,
.home-carousel-controls button.is-next-indicator::after,
.pager button.is-next-indicator:not(.stop)::after {
  content: none !important;
  display: none !important;
}

.register-form-status {
  margin: 0.4em 0 0;
  color: #8a2f1f;
  font-size: clamp(11px, calc(var(--layout-width) * 0.011), 14px);
}

#asiatime-paypal-modal{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;font-family:Georgia,"Times New Roman",serif;}
#asiatime-paypal-modal .asiatime-paypal-backdrop{position:absolute;inset:0;background:rgba(18,18,18,.45);}
#asiatime-paypal-modal .asiatime-paypal-panel{position:relative;z-index:1;width:min(420px,92vw);background:#fff;border:1px solid #d8d8d8;padding:22px 20px 18px;box-shadow:0 18px 40px rgba(0,0,0,.18);}
#asiatime-paypal-modal .asiatime-paypal-close{position:absolute;top:8px;right:10px;border:0;background:transparent;font-size:22px;line-height:1;cursor:pointer;}
#asiatime-paypal-modal h3{margin:0 0 8px;font-size:20px;}
#asiatime-paypal-modal .asiatime-paypal-meta{margin:0 0 14px;color:#555;font-size:14px;}
#asiatime-paypal-modal .asiatime-paypal-status{margin:12px 0 0;color:#666;font-size:13px;}
#asiatime-paypal-modal .asiatime-paypal-confirm{display:block;width:100%;border:1px solid #222;background:#1a1a1a;color:#fff;padding:12px 14px;font:inherit;cursor:pointer;}
#asiatime-paypal-modal .asiatime-paypal-confirm:disabled{opacity:.55;cursor:wait;}
.content-page[data-page="account"] .account-pay-btn{border:1px solid #1a5f2a;background:#1a5f2a;color:#fff;padding:3px 10px;font:inherit;cursor:pointer;font-weight:700;font-size:clamp(10px, calc(var(--layout-width) * 0.01), 12px);line-height:1.2;white-space:nowrap;}
.content-page[data-page="account"] .account-pay-btn:disabled{opacity:.55;cursor:wait;}
.content-page[data-page="account"] .account-pay-btn:hover{background:#154f23;}

.content-page[data-page="account"] .account-tracking-link{
  border:0;background:none;padding:0;font:inherit;color:#0b5cab;text-decoration:underline;cursor:pointer;text-align:left;
}
.content-page[data-page="account"] .account-tracking-link:hover{color:#083d72;}

.asiatime-feedback-modal{
  position:fixed;inset:0;z-index:12010;display:flex;align-items:center;justify-content:center;padding:16px;
  font-family:"TrebuchetMS","Arial Narrow",Arial,sans-serif;
  color:#777;
  font-size:14px;
  line-height:1.2;
}
.asiatime-feedback-backdrop{position:absolute;inset:0;background:rgba(80,80,80,.42);}
.asiatime-feedback-panel{
  position:relative;z-index:1;width:min(400px,94vw);background:#fff;border:1px solid #d2d2d2;
  box-shadow:0 14px 40px rgba(0,0,0,.18);padding:24px 24px 18px;border-radius:3px;
  font-family:inherit;
}
.asiatime-feedback-close{
  position:absolute;top:10px;right:12px;border:0 !important;background:transparent !important;font-size:26px;line-height:1;
  cursor:pointer;color:#777;padding:0 !important;min-width:0 !important;min-height:0 !important;border-radius:0 !important;
  width:auto !important;height:auto !important;box-shadow:none !important;font-family:inherit !important;
}
.asiatime-feedback-close:hover{color:#555;}
.asiatime-feedback-panel h3{margin:0 28px 6px 0;font-size:20px;font-weight:700;color:#5b5b5b;font-family:inherit;}
.asiatime-feedback-meta{margin:0 0 16px;color:#777;font-size:13px;font-family:inherit;}
.asiatime-feedback-textwrap{display:block;position:relative;margin:0 0 16px;}
.asiatime-feedback-textwrap textarea{
  width:100%;min-height:128px;resize:vertical;box-sizing:border-box;border:1px solid #d2d2d2;border-radius:3px;
  padding:12px 12px 28px;font-family:inherit;font-size:14px;color:#555;background:#fff;outline:none;
}
.asiatime-feedback-textwrap textarea:focus{border-color:#777;box-shadow:inset 0 0 0 1px #ededed;}
.asiatime-feedback-count{
  position:absolute;right:12px;bottom:10px;font-size:12px;color:#999;font-family:inherit;
}
.asiatime-feedback-ratings{
  display:flex;flex-direction:column;gap:10px;margin:0 0 14px;color:#555;font-size:14px;font-family:inherit;
}
.asiatime-feedback-ratings label{
  display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none;font-family:inherit;
}
.asiatime-feedback-ratings input[type="radio"]{
  appearance:none;-webkit-appearance:none;
  width:16px;height:16px;margin:0;border:2px solid #777;border-radius:50%;
  background:#fff;box-sizing:border-box;cursor:pointer;flex-shrink:0;
}
.asiatime-feedback-ratings input[type="radio"]:checked{
  border-color:#777;background:#777;
  box-shadow:inset 0 0 0 2.5px #fff;
}
.asiatime-feedback-status{min-height:18px;margin:0 0 10px;color:#8a2f1f;font-size:13px;font-family:inherit;}
.asiatime-feedback-submit{
  display:block;width:100%;border:1px solid #777 !important;background:#777 !important;color:#fff !important;
  padding:12px 14px !important;font-family:inherit !important;font-size:14px !important;font-weight:700 !important;cursor:pointer;border-radius:3px !important;
  min-width:0 !important;min-height:0 !important;box-shadow:none !important;
}
.asiatime-feedback-submit:disabled{opacity:.55;cursor:wait;}
.asiatime-feedback-submit:hover{background:#666 !important;border-color:#666 !important;}
.asiatime-feedback-cancel{
  display:block;width:100%;margin-top:8px;border:0 !important;background:transparent !important;color:#777 !important;
  text-decoration:underline;cursor:pointer;font-family:inherit !important;font-size:14px !important;padding:8px 0 !important;
  min-width:0 !important;min-height:0 !important;border-radius:0 !important;box-shadow:none !important;
}
.asiatime-feedback-cancel:hover{color:#555 !important;}
.asiatime-feedback-view-rating{margin:0 0 12px;color:#555;font-size:14px;font-family:inherit;}
.asiatime-feedback-view-text{
  white-space:pre-wrap;word-break:break-word;background:#f7f7f7;border:1px solid #e4e4e4;border-radius:3px;
  padding:14px 16px;margin:0 0 16px;min-height:72px;color:#555;font-size:14px;line-height:1.5;font-family:inherit;
}

.asiatime-tracking-modal{
  position:fixed;inset:0;z-index:12000;display:flex;align-items:center;justify-content:center;padding:16px;
}
.asiatime-tracking-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);}
.asiatime-tracking-panel{
  position:relative;z-index:1;width:min(920px,96vw);max-height:88vh;overflow:auto;background:#fff;border:2px solid #111;
  box-shadow:0 12px 40px rgba(0,0,0,.25);padding:18px 18px 16px;
}
.asiatime-tracking-close{
  position:absolute;top:8px;right:10px;border:0;background:transparent;font-size:28px;line-height:1;cursor:pointer;color:#333;
}
.asiatime-tracking-panel h3{margin:0 32px 6px 0;font-size:20px;}
.asiatime-tracking-meta{margin:0 0 12px;color:#555;font-size:13px;}
.asiatime-tracking-scroll{overflow:auto;border:1px solid #ddd;}
.asiatime-tracking-table{width:100%;border-collapse:collapse;font-size:12px;}
.asiatime-tracking-table th,.asiatime-tracking-table td{border:1px solid #ddd;padding:6px 8px;vertical-align:top;}
.asiatime-tracking-table thead th{background:#f5f5f5;text-align:left;white-space:nowrap;}
.asiatime-tracking-table .account-tracking-track{vertical-align:middle;font-weight:400;white-space:pre-wrap;word-break:break-all;}


.register-seal,
.register-or,
.register-switch {
  display: none !important;
}

.register-help {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  font-size: clamp(11px, calc(var(--layout-width) * 0.0092), 18px);
  line-height: 1.35;
  word-break: break-word;
}

.register-help .register-symbols {
  white-space: normal;
  word-break: break-all;
}

.register-primary-button {
  /* Match left Sign Up styling more closely */
}

/* Zoom overlay */
.media-zoom-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 4vh 4vw;
  background: rgba(0, 0, 0, 0.72);
}

.media-zoom-overlay[hidden] {
  display: none !important;
}

.media-zoom-stage {
  max-width: min(96vw, 1100px);
  max-height: 90vh;
  overflow: auto;
  background: #fff;
  padding: 12px;
  border-radius: 4px;
}

.media-zoom-stage img {
  display: block;
  max-width: 100%;
  max-height: 84vh;
  margin: 0 auto;
  object-fit: contain;
}

.media-zoom-stage table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}

.media-zoom-stage th,
.media-zoom-stage td {
  border: 1px solid #999;
  padding: 8px 10px;
}

.media-zoom-close {
  position: absolute;
  top: 12px;
  right: 16px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #111;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

html.media-zoom-open {
  overflow: hidden;
}

img.js-zoomable,
.home-slide-media img,
.ontime-doraemon-slide img,
.movement-image-tile img {
  cursor: zoom-in;
}

.content-page[data-page="watch"] .watch-product-image {
  cursor: none;
}

/* Watch grid: independent outer frame */
.content-page[data-page="watch"] .watch-products-grid {
  border: 2px solid #111;
  box-sizing: border-box;
}

.content-page[data-page="watch"] .watch-map-slot {
  border: 0;
  min-height: 0;
}

.content-page[data-page="watch"] .watch-map-slot img,
.content-page[data-page="watch"] .page-map {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  background: #d0d0d0;
}

/* Ontime article text enlarge */
.ontime-article-copy {
  font-size: var(--page-footer-text) !important;
  line-height: 1.35 !important;
}

.ontime-article-copy table {
  cursor: zoom-in;
}

.content-page[data-page="offer"] .new-detail-frame,
.content-page[data-page="listing"] .new-detail-frame,
.content-page[data-page="offer"] .new-detail-frame.frame,
.content-page[data-page="listing"] .new-detail-frame.frame {
  background: #fff;
}

.content-page[data-page="offer"] .new-product-text,
.content-page[data-page="listing"] .new-product-text {
  background: #fff;
}

/* Offer/listing bottom: same row ratio and map width as homepage */
.content-page[data-page="offer"],
.content-page[data-page="listing"] {
  --page-left-map-width: var(--ontime-left-map-width);
}

/* Absolute column sync: tabs + bottom share one 7-track grid via subgrid */
.content-page[data-page="offer"] .new-info-table,
.content-page[data-page="listing"] .new-info-table {
  grid-template-columns: var(--page-left-map-width) repeat(6, minmax(0, 1fr));
  grid-template-rows: minmax(0, 15fr) minmax(0, 70fr) minmax(0, 15fr);
}

.content-page[data-page="offer"] .new-tabs,
.content-page[data-page="listing"] .new-tabs {
  grid-column: 1 / -1;
  grid-row: 1;
  display: grid;
  grid-template-columns: subgrid;
}

.content-page[data-page="offer"] .new-bottom,
.content-page[data-page="listing"] .new-bottom {
  grid-column: 1 / -1;
  grid-row: 2;
}

.content-page[data-page="offer"] .new-copyline,
.content-page[data-page="listing"] .new-copyline {
  grid-column: 1 / -1;
  grid-row: 3;
}

.content-page[data-page="offer"] .new-bottom.is-contact-form,
.content-page[data-page="listing"] .new-bottom.is-contact-form {
  display: grid;
  grid-template-columns: subgrid;
}

.content-page[data-page="offer"] .new-bottom:not(.is-contact-form),
.content-page[data-page="listing"] .new-bottom:not(.is-contact-form) {
  display: grid;
  grid-template-columns: subgrid;
}

.content-page[data-page="offer"] .new-bottom:not(.is-contact-form) .new-map-cell,
.content-page[data-page="listing"] .new-bottom:not(.is-contact-form) .new-map-cell {
  grid-column: 1;
}

.content-page[data-page="offer"] .new-bottom:not(.is-contact-form) .new-bottom-fill,
.content-page[data-page="listing"] .new-bottom:not(.is-contact-form) .new-bottom-fill {
  grid-column: 2 / -1;
  font-size: 13px;
  line-height: 1.25;
}

.content-page[data-page="offer"] .new-info-list li,
.content-page[data-page="listing"] .new-info-list li,
.content-page[data-page="offer"] .new-bottom-fill p,
.content-page[data-page="listing"] .new-bottom-fill p {
  font-size: 13px;
  line-height: 1.25;
}

.content-page[data-page="offer"] .page-map-cell,
.content-page[data-page="listing"] .page-map-cell {
  height: 100%;
  min-height: 0;
  max-height: none;
}

/* Feedback tab: share parent subgrid tracks with tabs */
.new-bottom.is-feedback-split{
  display: grid;
  grid-template-columns: subgrid;
}
.new-bottom.is-feedback-split .new-map-cell{
  grid-column: 1;
  grid-row: 1;
}
.new-bottom.is-feedback-split .new-bottom-fill,
.new-bottom.is-feedback-split .feedback-split-panels{
  display: contents;
}
.new-bottom.is-feedback-split .feedback-panel-trustpilot{
  grid-column: 2 / span 3; /* Shipping + Return + Refund */
  grid-row: 1;
}
.new-bottom.is-feedback-split .feedback-panel-asiatime{
  grid-column: 5 / span 3; /* Payment + Feedback + Contact */
  grid-row: 1;
}
.feedback-panel{
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  height:100%;
  overflow:hidden;
  padding:clamp(8px, calc(var(--layout-width) * 0.008), 14px) clamp(10px, calc(var(--layout-width) * 0.01), 16px);
  font-family:"TrebuchetMS","Arial Narrow",Arial,sans-serif;
  color:#222;
  box-sizing:border-box;
}
.feedback-panel-trustpilot{
  border-right:2px solid #111;
  background:#d8d8d8;
}
.feedback-panel-asiatime{
  background:#d0d0d0;
}
.feedback-col-head{
  flex:0 0 auto;
  margin:0 0 8px;
  font-size:clamp(14px, calc(var(--layout-width) * 0.014), 20px);
  font-weight:700;
  line-height:1.1;
  color:#222;
}
.feedback-col-head-logo{
  display:flex;
  align-items:center;
  margin-bottom:10px;
}
.feedback-trustpilot-logo-head,
.feedback-asiatime-logo-head{
  display:block;
  height:clamp(18px, calc(var(--layout-width) * 0.02), 26px);
  width:auto;
  max-width:100%;
  object-fit:contain;
  background:transparent;
  padding:0;
}
.feedback-trustpilot-body{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
}
.feedback-asiatime-body{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
}
.tp-review-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.tp-review{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:8px 12px;
  align-items:start;
  padding:0 0 10px;
  border-bottom:1px solid rgba(0,0,0,.12);
}
.tp-review:last-child{border-bottom:0;padding-bottom:0;}
.tp-review-main{min-width:0;}
.tp-review-title{
  margin:0 0 6px;
  color:#111;
  font-size:clamp(12px, calc(var(--layout-width) * 0.0115), 14px);
  font-weight:700;
  line-height:1.3;
}
.tp-review-body{
  margin:0;
  color:#333;
  font-size:clamp(11px, calc(var(--layout-width) * 0.01), 13px);
  font-weight:400;
  line-height:1.4;
  white-space:pre-wrap;
  word-break:break-word;
}
.tp-review-meta{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
  min-width:72px;
  text-align:right;
}
.tp-stars{
  display:inline-flex;
  gap:2px;
  line-height:1;
}
.tp-star{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:14px;
  height:14px;
  border-radius:2px;
  background:#d7d7d7;
  color:#fff;
  font-size:10px;
}
.tp-star.is-on{
  background:#00b67a;
}
.tp-country{
  display:inline-block;
  padding:1px 7px;
  border:1px solid #bbb;
  border-radius:999px;
  color:#666;
  font-size:11px;
  line-height:1.4;
}
.tp-user{
  color:#222;
  font-size:12px;
  font-weight:400;
  line-height:1.2;
}
.at-feedback-empty{
  margin:0;
  color:#666;
  font-size:clamp(12px, calc(var(--layout-width) * 0.011), 14px);
}
.at-feedback-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.at-feedback-item{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(120px, 34%);
  gap:12px 14px;
  align-items:start;
  padding:0 0 10px;
  border-bottom:1px solid rgba(0,0,0,.12);
  background:transparent;
}
.at-feedback-item:last-child{border-bottom:0;padding-bottom:0;}
.at-feedback-main{min-width:0;}
.at-feedback-text{
  margin:0 0 6px;
  color:#111;
  font-size:clamp(12px, calc(var(--layout-width) * 0.0115), 15px);
  font-weight:700;
  line-height:1.35;
}
.at-feedback-product{
  margin:0;
  color:#8a8a8a;
  font-size:clamp(11px, calc(var(--layout-width) * 0.01), 13px);
  font-weight:400;
  line-height:1.3;
  text-transform:uppercase;
}
.at-feedback-side{
  min-width:0;
  color:#777;
  font-size:clamp(11px, calc(var(--layout-width) * 0.01), 13px);
  line-height:1.35;
}
.at-feedback-buyer{margin:0 0 2px;}
.at-feedback-buyer-name{
  color:#555;
  text-decoration:underline;
  text-underline-offset:2px;
}
.at-feedback-score{white-space:nowrap;}
.at-feedback-star{color:#c62828;font-size:0.95em;}
.at-feedback-price{margin:0;color:#555;}
@media (max-width:720px){
  .new-bottom.is-feedback-split{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .new-bottom.is-feedback-split .new-map-cell,
  .new-bottom.is-feedback-split .feedback-panel-trustpilot,
  .new-bottom.is-feedback-split .feedback-panel-asiatime{
    grid-column: 1;
  }
  .new-bottom.is-feedback-split .new-map-cell{grid-row:1;}
  .new-bottom.is-feedback-split .feedback-panel-trustpilot{
    grid-row:2;
    border-right:0;
    border-bottom:2px solid #111;
  }
  .new-bottom.is-feedback-split .feedback-panel-asiatime{grid-row:3;}
  .at-feedback-item{grid-template-columns:1fr;gap:6px;}
  .tp-review{grid-template-columns:1fr;gap:8px;}
  .tp-review-meta{align-items:flex-start;text-align:left;}
}


/* Force numeric pager buttons (no triangles) */
.new-pages .active,
.detail-pages .active,
.home-carousel-controls button.active,
.pager button.active:not(.stop),
.new-pages .is-next-indicator,
.detail-pages .is-next-indicator,
.home-carousel-controls button.is-next-indicator,
.pager button.is-next-indicator:not(.stop) {
  color: #111 !important;
  background: #fff !important;
  font-size: clamp(10px, calc(var(--layout-width) * 0.01), 16px) !important;
  line-height: 1 !important;
}

.new-pages .active,
.detail-pages .active,
.home-carousel-controls button.active,
.pager button.active:not(.stop) {
  color: #fff !important;
  background: #3a86cb !important;
}

.new-pages .active,
.detail-pages .active {
  background: #b47a38 !important;
}

.new-pages .active::before,
.detail-pages .active::before,
.home-carousel-controls button.active::before,
.pager button.active:not(.stop)::before,
.new-pages .active::after,
.detail-pages .active::after,
.home-carousel-controls button.active::after,
.pager button.active:not(.stop)::after,
.new-pages .is-next-indicator::before,
.detail-pages .is-next-indicator::before,
.home-carousel-controls button.is-next-indicator::before,
.pager button.is-next-indicator:not(.stop)::before,
.new-pages .is-next-indicator::after,
.detail-pages .is-next-indicator::after,
.home-carousel-controls button.is-next-indicator::after,
.pager button.is-next-indicator:not(.stop)::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
}


/* Spec grid: icon on page; full grid only in zoom overlay */
.content-page[data-page="offer"] .new-product-text .new-spec-grid,
.content-page[data-page="listing"] .new-product-text .new-spec-grid,
.new-product-text .new-spec-grid {
  display: none !important;
}

.media-zoom-overlay.is-spec-zoom .media-zoom-stage {
  max-width: min(72vw, 560px);
  padding: 0;
  background: #fff;
  border: 2px solid #111;
  border-radius: 2px;
}

.media-zoom-stage .new-spec-grid {
  display: grid !important;
  width: min(72vw, 560px) !important;
  max-width: 100% !important;
  margin: 0 !important;
  grid-template-columns: max-content minmax(72px, 1fr) max-content minmax(72px, 1fr) !important;
  grid-auto-rows: minmax(22px, auto) !important;
  border: 0 !important;
  background: #fff !important;
  font-size: var(--panel-body-text) !important;
  line-height: 1.2 !important;
  cursor: default !important;
}

.media-zoom-stage .new-spec-grid > div {
  min-height: 22px !important;
  padding: 4px 8px !important;
  line-height: 1.2 !important;
  background: #fff !important;
  box-shadow: inset -1px -1px 0 #111 !important;
}

.media-zoom-stage .new-spec-grid .spec-features-label,
.media-zoom-stage .new-spec-grid .spec-features-value {
  grid-row: 1 / span 2;
}

.new-product-text .new-description {
  max-height: 30% !important;
  overflow: auto !important;
}

.new-product-text .new-spec-grid .spec-features-label,
.new-product-text .new-spec-grid .spec-features-value {
  align-items: flex-start !important;
}


/* Bottom info images: click to zoom */
.new-info-image,
.new-map-cell img,
.page-map,
.new-bottom-fill img {
  cursor: zoom-in;
}


/* Bell → My Messages focus: dim other account panels */
.content-page[data-page="account"] .offer-account-frame.is-messages-focus .offer-panel.is-dimmed,
.offer-account-frame.is-messages-focus .offer-panel.is-dimmed {
  opacity: 0.38 !important;
  filter: grayscale(0.7) !important;
  pointer-events: none !important;
  user-select: none !important;
}

.content-page[data-page="account"] .offer-account-frame.is-messages-focus .offer-messages-panel,
.offer-account-frame.is-messages-focus .offer-messages-panel {
  position: relative;
  z-index: 3;
  opacity: 1 !important;
  filter: none !important;
  pointer-events: auto !important;
  box-shadow: inset 0 0 0 3px #3a86cb !important;
}

.tool-button[data-tool="notifications"].is-pressed,
.tool-button[data-tool="notifications"][aria-pressed="true"] {
  outline: 2px solid #fff;
  outline-offset: 1px;
  box-shadow: 0 0 0 2px #3a86cb;
}