/* Homepage approval sample. All dimensions use compact-tokens.css.
 * Product names are card labels (3 lines); section headings use the H2 scale.
 * Above 1024px the original HTML design styles remain in charge.
 */
@media (max-width: 1024px) {
  body.home { font: var(--type-body); }
  .home #om-nav-desktop { display: none !important; }
  .home #om-nav-mobile { display: block !important; }
  .home #om-nav-mobile .d-9fb2df82e4 { min-height: 56px; padding-block: var(--tw-c-space-1); gap: var(--tw-c-space-3); }
  .home #om-nav-mobile .d-1f5135d54d { width: auto; height: 30px; }
  .home #om-nav-mobile .d-cb0d07a719 { gap: 0; }
  .home #om-nav-mobile :is(button, .d-5cd20ffd8d) { width: var(--tw-c-control); height: var(--tw-c-control); min-width: var(--tw-c-control); min-height: var(--tw-c-control); }
  .home #om-nav-mobile svg { width: var(--tw-c-icon); height: var(--tw-c-icon); }
  .home #om-nav-mobile .d-9fb2df82e4 > a { display: inline-flex; align-items: center; min-height: var(--tw-c-control); }
  .home :is(.d-ffd37b5966, .d-3fe699d0a9, .d-8b31245709, .d-7ef881bfe4) { width: var(--tw-c-control); height: var(--tw-c-control); }
  .home #om-social a { width: var(--tw-c-control); height: var(--tw-c-control); }
  .home .tw-mobile-menu { font-size: var(--tw-c-body); padding-inline: var(--tw-c-gutter); }
  .home .tw-search input { font-size: 15px; } /* iOS: prevent focus zoom. */
  .home :is(a, button, summary):focus-visible { outline: 2px solid var(--teal-700); outline-offset: 3px; }

  /* Typography and rhythm: section headings, editorial titles, labels. */
  .home main section:not(.tw-home-hero) { padding-block: var(--tw-c-section); }
  .home main section h2:not(.woocommerce-loop-product__title) {
    font-size: var(--tw-type-section-title); line-height: var(--tw-type-section-title-line); /* typography-scale.css */
    font-weight: var(--tw-type-section-title-weight); text-wrap: balance;
  }
  .home main h3 { font-size: var(--tw-c-h3); line-height: 1.35; font-weight: var(--tw-c-heading-weight); }
  .home :is(.tw-section-heading, .d-08b45d2346, .d-8eb1595ed7, .d-1d36ba7f80, .d-e253a2399a) { gap: var(--tw-c-space-3); margin-bottom: var(--tw-c-space-4); }
  .home :is(.d-80e27c6f31, .d-eeabf66f91, .d-44988b557b) { margin-bottom: var(--tw-c-space-4); }
  .home .tw-collection-label { font-size: var(--tw-c-caption); margin-bottom: var(--tw-c-space-1); }
  .home .tw-section-heading { display: flex; flex-wrap: wrap; align-items: center; }
  .home :is(.tw-section-heading > a, .d-2f73ba05aa) { margin-top: 0; font-size: var(--tw-c-caption); }

  /* Hero takes the height of the longest slide, avoiding fixed-height clipping. */
  .home .tw-home-hero { display: grid; height: auto; min-height: 360px; }
  .home [data-tw-slide] { position: relative; inset: auto; grid-area: 1 / 1; min-height: inherit; }
  .home .d-bb07715810 { position: relative; padding-block: var(--tw-c-space-5) var(--tw-c-space-6); }
  .home .d-0a0fe94c43 { font-size: var(--tw-c-h1); line-height: 1.2; font-weight: var(--tw-c-heading-weight); margin-bottom: var(--tw-c-space-4); text-wrap: balance; }
  .home .d-4db8499af4 { gap: var(--tw-c-space-2) var(--tw-c-space-4); margin-bottom: var(--tw-c-space-4); }
  .home .d-772dcc1234 { font-size: var(--tw-c-body); line-height: 1.45; font-weight: 400; }
  .home .d-f4addab140 { gap: var(--tw-c-space-2); }
  .home .d-f4addab140 > a { min-height: var(--tw-c-control); font-size: var(--tw-c-body); padding-inline: var(--tw-c-space-4); font-weight: 500; }
  .home .d-26f7e6ab71 { margin-top: calc(-1 * var(--tw-c-space-4)); }
  .home .d-3150642e09 { gap: var(--tw-c-space-2); align-items: stretch; }
  .home [data-tw-slide-tab] { height: 100%; }
  .home [data-tw-slide-tab] > span { min-height: 52px; height: 100%; padding: var(--tw-c-space-2); font-size: var(--tw-c-caption); line-height: 1.35; font-weight: 600; }

  /* Shared product card, used by rails and collections. Full name stays in DOM. */
  .home :is(.tw-product-rail, #om-longines-grid, #om-rolex-grid) { gap: var(--tw-c-gap) !important; }

  /* Small swipeable brand cards; arrows occupy their own row, outside logos. */
  .home #om-brandcat-wrap { display: grid; grid-template-columns: minmax(0, 1fr) var(--tw-c-control) var(--tw-c-control); gap: var(--tw-c-space-3) var(--tw-c-space-2); }
  .home #om-brandcat-track { grid-column: 1 / -1; grid-row: 1; gap: var(--tw-c-space-3); padding: var(--tw-c-space-1) 0; scroll-snap-type: x proximity; scroll-padding-inline: 0; }
  .home #om-brandcat-track > a { flex: 0 0 calc((100% - 24px) / var(--tw-c-brand-count)); aspect-ratio: 1.25 / 1; scroll-snap-align: start; }
  .home #om-brandcat-wrap > button { position: static; inset: auto !important; transform: none; width: var(--tw-c-control) !important; height: var(--tw-c-control) !important; grid-row: 2; }
  .home #om-brandcat-wrap > button:first-child { grid-column: 2; }
  .home #om-brandcat-wrap > button:nth-child(2) { grid-column: 3; }
  .home .d-ffa6e4e189 { font-size: var(--tw-c-body); line-height: var(--tw-c-body-line); margin-top: var(--tw-c-space-4); }

  /* Introduction and media use the same rhythm as the catalog. */
  .home .d-51ea0e129a { padding-block: 0; gap: var(--tw-c-space-4); }
  .home .d-7ca757309f { gap: var(--tw-c-space-3); }
  .home .d-56c62f3148 { font-size: var(--tw-c-body); line-height: var(--tw-c-body-line); }
  .home .d-5a712b91a8 { height: var(--tw-c-space-6); }
  .home #om-store-strip { gap: var(--tw-c-space-3); margin-top: var(--tw-c-space-4); padding-bottom: 0; }
  .home #om-store-strip .d-00e8c783ec { flex-basis: 144px; } /* items sit inside .tw-store-track (site.js) */
  .home #om-lib, .home #om-lib [data-lib-row] { gap: var(--tw-c-space-3); }
  .home #om-lib [data-lib-row] > * { width: 112px; height: 112px; flex-basis: 112px; }

  .home #dich-vu .d-e6fa0f7fcd { gap: var(--tw-c-space-4) var(--tw-c-space-3); }
  .home #dich-vu .d-370d219105 { display: contents; }
  .home #dich-vu .d-bfc50812ae { min-width: 0; gap: var(--tw-c-space-2); }
  .home #dich-vu .d-68b6b1076a { font-size: var(--tw-c-caption); line-height: 1.45; }
  .home #dich-vu .d-87b16516d7 { aspect-ratio: 1.4 / 1; }
  .home #dich-vu .d-c87f4e7820 > span { width: 36px; height: 36px; }

  /* Reviews: keep text readable and place controls next to the content they move. */
  .home .d-40acf192a3 { font-size: var(--tw-c-body); line-height: var(--tw-c-body-line); text-wrap: pretty; white-space: normal; }
  .home .d-a10d025f7b { min-height: 0; padding: var(--tw-c-space-4); gap: var(--tw-c-space-3); }
  .home .d-49d3293e27 { font-size: var(--tw-c-body); line-height: var(--tw-c-body-line); }
  .home .d-0223fb08e4 { font-size: var(--tw-c-body); line-height: 1.4; font-weight: 500; }
  .home #om-blog-track h3 { font-size: var(--tw-c-h3); line-height: 1.4; }

  .home #lh-trust-strip { padding-block: var(--tw-c-space-5); }
  .home #lh-trust-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: var(--tw-c-space-3); }
  .home #lh-trust-grid .d-918f2ecc04 { min-width: 0; padding: 0; gap: var(--tw-c-space-2); }
  .home #lh-trust-grid svg { width: var(--tw-c-space-5); height: var(--tw-c-space-5); }
  .home #lh-trust-grid :is(.d-f8615e4ddd, .d-38d89f7637) { font-size: var(--tw-c-caption); line-height: 1.45; }
  .home #om-footer { padding-block: var(--tw-c-space-5); }
  .home #om-footer .d-4052a77eea { gap: var(--tw-c-space-5); padding-bottom: var(--tw-c-space-5); }
  .home #om-footer .d-cc463df104 { width: 132px; height: auto; }
  .home #om-footer .d-a592aa2def { font-size: var(--tw-c-h3); line-height: 1.4; margin-bottom: var(--tw-c-space-3); }
  .home #om-footer :is(.d-ff9e1ecfff, .d-c5ff5a1b21, .d-c880794075) { font-size: var(--tw-c-body); line-height: 1.5; }
  .home #om-footer .d-ff9e1ecfff { min-height: var(--tw-c-control); }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .home .tw-product-rail { grid-auto-columns: clamp(180px, calc((100% - 48px) / 4.15), 240px) !important; }
  .home #om-longines-grid { grid-template-columns: repeat(auto-fit, minmax(min(var(--tw-c-card-min), 100%), 1fr)) !important; }
  .home #dich-vu .d-e6fa0f7fcd { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .home #om-rev-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) !important; gap: var(--tw-c-space-5); }
  .home .d-ad3aad2768 { min-height: 240px; }
  .home #om-rev-track > [data-rev-card] { flex-basis: calc(100% - 12px); }
}

@media (max-width: 767px) {
  body.home { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  .home .d-c41f2b34e3 { padding-block: 0; gap: 0; min-height: 28px; justify-content: center; }
  .home .d-82cf8651e0 { display: none; }
  .home .d-c41f2b34e3 > a[href^="tel:"] { min-height: 28px; margin: 0; padding-block: 0; font-size: var(--tw-c-caption); }
  .home #om-nav-mobile .d-1f5135d54d { height: 28px; }
  .home .d-2a1b75c911 { display: inline; }
  .home .d-2a1b75c911 + .d-2a1b75c911::before { content: ' '; }
  .home .d-4db8499af4 { grid-template-columns: 1fr; }
  .home .d-772dcc1234 { font-size: 12px; }

  /* Brand section refinement from the mobile reference; tablet is unchanged. */
  .home #thuong-hieu-sp { --tw-type-section-title: 17px; --tw-c-h2: var(--tw-type-section-title); --tw-c-body: 12px; }
  .home #thuong-hieu-sp h2 { line-height: 1.3; }
  .home #thuong-hieu-sp .d-ffa6e4e189 { font-size: var(--tw-c-body); line-height: 1.6; font-weight: 400; }
  .home #om-brandcat-wrap { display: block; }
  .home #om-brandcat-wrap > button { display: none; }
  .home #om-brandcat-track.tw-brand-marquee { scroll-snap-type: none; scroll-behavior: auto; overflow-anchor: none; }
  .home .tw-product-rail { grid-auto-columns: calc((100% - 12px) / 2.08) !important; }
  .home #om-longines-grid {
    grid-template-columns: none !important; grid-template-rows: repeat(2, auto);
    grid-auto-flow: column; grid-auto-columns: calc((100% - 12px) / 2.08);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
    padding-bottom: var(--tw-c-space-2); scrollbar-width: thin;
  }
  .home #om-longines-grid > li { scroll-snap-align: start; }
  .home #dich-vu .d-e6fa0f7fcd { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* JS moves existing review nodes to this order and restores them above mobile. */
  .home #om-rev-grid { gap: var(--tw-c-space-4); }
  .home #om-rev-grid > .d-82c3fdccd8:empty { display: none; }
  .home #om-rev-grid.tw-compact-reviews > .d-82c3fdccd8 { display: none; }
  .home .d-ad3aad2768 { height: 156px; min-height: 0; border-radius: var(--tw-c-radius); }
  .home .d-239fcecfe3 { object-position: center 35%; }
  .home .d-f71766f0e3 { padding: var(--tw-c-space-3); }
  .home .d-eac5dc515c { font-size: var(--tw-c-caption); }
  .home #om-rev-grid .d-9be00b4dd2 { justify-content: flex-end; }
  .home #om-blog-track > a { flex-basis: 84% !important; }

  /* Progressive enhancement: without JS all footer links remain visible. */
  .home #om-footer .d-4052a77eea { grid-template-columns: 1fr !important; gap: 0; }
  .home #om-footer .d-4052a77eea > :first-child { margin-bottom: var(--tw-c-space-5); }
  .home #om-footer .d-4052a77eea > div { grid-column: 1 / -1; }
  .home .tw-compact-footer-group { border-top: 1px solid var(--border-default); }
  .home .tw-compact-footer-group > summary {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 52px; gap: var(--tw-c-space-3); cursor: pointer; list-style: none;
  }
  .home .tw-compact-footer-group > summary::-webkit-details-marker { display: none; }
  .home .tw-compact-footer-group > summary::after { content: ''; width: 8px; height: 8px; border: solid var(--teal-700); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); margin-right: var(--tw-c-space-1); }
  .home .tw-compact-footer-group[open] > summary::after { transform: rotate(225deg); }
  .home #om-footer .tw-compact-footer-group h3 { margin: 0; }
  .home #om-footer .tw-compact-footer-group .d-f6641f3426 { padding-bottom: var(--tw-c-space-3); }
  .home #om-footer .tw-compact-footer-group.tw-compact-footer-services .d-f6641f3426 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--tw-c-space-4); }
  .home #om-footer .d-181ff79eff { padding-top: var(--tw-c-space-4); gap: var(--tw-c-space-4); }
  .home #om-footer .d-c554177260 { font-size: var(--tw-c-caption); }
  .home #om-sticky-bar { padding: 6px var(--tw-c-gutter) calc(6px + env(safe-area-inset-bottom, 0px)); }
  .home #om-sticky-bar .d-d2cd495370 { padding: 0; gap: var(--tw-c-space-2); width: 100%; }
  .home #om-sticky-bar a { min-height: var(--tw-c-control); height: auto; font-size: var(--tw-c-body); }
}