/* Country Guide Navigation — white card grid (component-scoped, versioned)
   Version: v20260906b
     v20260906b — title now shares the SAME centred 1080px content box as the
     grid: `margin:0 auto 22px` instead of `margin:0 0 22px`. The previous
     shorthand reset margin-left/right to 0, which pinned the heading to the
     viewport's left padding edge while the grid stayed centred (-160px gap).
     No hard-coded margin-left offset is used.
   Loaded on: /shipping-from-china-to-uae/ ONLY
   Scope:     .country-guide-nav[data-country="uae"] — nothing else on the site
              is touched. global-v4.css and yt-cta-v4.css are NOT modified.

   Classification: content_navigation (NOT a conversion block).
   The 7 guide links, their order and their text are frozen; only the semantic
   wrapper, component classes and presentation change.

   Bottom padding is deliberately small (8px) because the adjacent <section
   class="yt-cta"> already supplies 64px of top padding in the same #f5f7fa
   band — this avoids stacking two large vertical paddings into a dead gap.
*/
.country-guide-nav[data-country="uae"]{background:#f5f7fa;padding:44px 20px 8px;margin:0}
.country-guide-nav[data-country="uae"] h2,
.country-guide-nav[data-country="uae"] ul{max-width:1080px;margin-left:auto;margin-right:auto}

/* ---- title: shares the same centred 1080px box as the grid ---- */
.country-guide-nav[data-country="uae"] h2{
  max-width:1080px;margin:0 auto 22px;
  color:#17345b;font-size:28px;line-height:1.25;font-weight:700;
  text-align:left;
}

/* ---- 2-column grid, 7th (last) item spans both columns ---- */
.country-guide-nav[data-country="uae"] ul{
  list-style:none;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;
}
.country-guide-nav[data-country="uae"] li{display:flex;min-width:0}
.country-guide-nav[data-country="uae"] li:last-child{grid-column:1 / -1}

/* ---- card: whole card is one native <a> ---- */
.country-guide-nav[data-country="uae"] a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;min-height:60px;padding:16px 18px;
  background:#fff;border:1px solid #dde5ee;border-radius:12px;
  color:#17345b;font-size:16px;font-weight:600;line-height:1.5;
  text-decoration:none;
  white-space:normal;overflow-wrap:break-word;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.country-guide-nav[data-country="uae"] a:hover,
.country-guide-nav[data-country="uae"] a:focus-visible{
  border-color:#f26522;box-shadow:0 6px 18px rgba(22,52,91,.08);
}
.country-guide-nav[data-country="uae"] a:focus-visible{
  outline:3px solid #f26522;outline-offset:2px;
}
.country-guide-nav[data-country="uae"] a:hover .country-guide-nav__arrow{transform:translateX(3px)}

/* ---- decorative arrow only ---- */
.country-guide-nav__arrow{
  color:#f26522;font-size:18px;line-height:1;flex-shrink:0;
  transition:transform .15s ease;
}

@media (max-width:640px){
  .country-guide-nav[data-country="uae"]{padding:30px 16px 8px}
  .country-guide-nav[data-country="uae"] h2{font-size:24px;margin:0 auto 20px}
  .country-guide-nav[data-country="uae"] ul{grid-template-columns:1fr;gap:12px}
  .country-guide-nav[data-country="uae"] li:last-child{grid-column:auto}
}

@media (prefers-reduced-motion:reduce){
  .country-guide-nav[data-country="uae"] a,
  .country-guide-nav__arrow{transition:none}
}