/*
 * Nola Kids — consistency and motion polish. Loaded after every page stylesheet.
 * Normalises the few controls that drifted from the design scale (radius, height, type)
 * and adds loading skeletons and state feedback. Layouts are unchanged.
 */

/* Control scale: 40px small, 44px default, 52px primary purchase actions, 56px hero */
body .nk-btn { min-height: 44px; border-radius: 999px; font-weight: 600; letter-spacing: normal; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
body .nk-btn-sm { min-height: 40px; padding-inline: 18px; font-size: 14px; }
body :is(.nk-buy-cta, .nk-checkout-cta, .nk-look-cta, .nk-review-submit, .nk-auth-submit, .nk-exchange-submit, .nk-filter-submit),
body .sticky-purchase .nk-btn,
body .nk-topup .nk-btn-dark,
body .nk-ck .nk-result-actions .nk-btn { min-height: 52px; font-size: 17px; }
body .nk-hero .nk-btn-lg { min-height: 56px; }
body .button, body .nk-ck .nk-amount, body .nk-amount { border-radius: 999px; }
body .nk-more, body .nk-link-button.nk-more { font-size: 14px; font-weight: 600; }
body :is(.nk-chip, .nk-pill-option > span, .nk-pill-button, .nk-segmented a, .nk-toolbar-button) { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* The active mobile tab moves between destinations without moving its label. */
.nk-tabbar > a { position: relative; z-index: 1; }
.nk-tabbar.is-moving > a[aria-current] .nk-tab-icon { background: transparent; }
.nk-nav-trail { position: absolute; z-index: 0; border-radius: 999px; background: var(--tint); pointer-events: none; }
.nk-checkout-flow .nk-step-line { transform-origin: right center; }

/* Match pointer and keyboard feedback in desktop navigation. */
.nk-nav a { position: relative; }
.nk-nav a::after {
  content: ''; position: absolute; inset-inline: 0; bottom: 3px; height: 2px;
  border-radius: 999px; background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .2s cubic-bezier(.22, 1, .36, 1);
}
.nk-nav a:is(:hover, :focus-visible, [aria-current])::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .nk-nav a::after { transition: none; }
}

/* Fields: 48px, 12px corners (the 56px login field is the design's own) */
body .nk-ck :is(input:not([type=checkbox], [type=radio], [type=range], [type=hidden], [type=file]), select) { min-height: 48px; }

/* Type: keep everything on the 12 / 14 / 17 / 21 / 28 / 40 / 56 scale */
body .nk-accordion details > a, body .product-accordions details > a { font-size: 14px; }
body .nk-faq-list details p { font-size: 14px; }
@media (max-width: 800px) {
  body .nk-faq-list summary { font-size: 17px; }
  body .nk-story-body, body .nk-policy-section p { font-size: 17px; }
  /* Phones: 17px text in fields so iOS does not zoom on focus */
  html body :is(input, select, textarea):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]) { font-size: 17px; }
  body .nk-otp-box, body #referral-code { font-size: 21px; }
}

/* States */
body :is(.nk-btn, .button, .nk-chip, .nk-round-btn, .nk-icon-btn):disabled,
body :is(.nk-btn, .button)[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
body :is(.nk-btn, .button)[aria-busy="true"] { position: relative; color: transparent !important; pointer-events: none; }
body :is(.nk-btn, .button)[aria-busy="true"]::after {
  content: ''; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border: 2px solid currentColor; border-radius: 999px; border-color: var(--on-accent) var(--on-accent) transparent transparent;
  animation: nk-spin .7s linear infinite;
}
body :is(.nk-btn-outline, .nk-btn-light)[aria-busy="true"]::after { border-color: var(--ink) var(--ink) transparent transparent; }
body .nk-filter-submit[aria-busy="true"] { color: var(--on-accent) !important; pointer-events: auto; }
body .nk-filter-submit[aria-busy="true"]::after { display: none; }
@keyframes nk-spin { to { transform: rotate(360deg); } }

/* Loading skeletons (shared, not page-scoped) */
.nk-skel, .nk-media-loading {
  background: linear-gradient(100deg, var(--soft) 30%, color-mix(in oklab, var(--soft) 55%, var(--surface)) 50%, var(--soft) 70%) 0 0 / 300% 100%;
  animation: nk-shimmer 1.3s ease-in-out infinite;
}
.nk-skel { display: block; border-radius: 999px; }
.nk-skel-block { border-radius: var(--r); }
.nk-skel-line { height: 12px; }
.nk-skel-line.is-wide { width: 80%; }
.nk-skel-line.is-mid { width: 55%; }
.nk-skel-line.is-short { width: 35%; }
.nk-media-loading img { opacity: 0; }
.nk-media-loaded img { transition: opacity .3s ease-out; }
@keyframes nk-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

.nk-skel-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.nk-skel-card .nk-skel-block { aspect-ratio: 4/5; }
.nk-skel-row { display: flex; align-items: center; gap: 14px; padding: 11px 20px; }
.nk-skel-row .nk-skel-thumb { flex: none; width: 52px; height: 62px; border-radius: 10px; }
.nk-skel-row > span:last-child { display: flex; flex: 1; flex-direction: column; gap: 8px; }
.nk-skel-cart { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.nk-skel-cart .nk-skel-thumb { flex: none; width: 72px; height: 88px; border-radius: 12px; }
.nk-skel-cart > span:last-child { display: flex; flex: 1; flex-direction: column; gap: 10px; }

/* Catalog results switch to skeleton cards while the next page loads */
.nk-catalog-grid.is-loading > :not(.nk-skel-card) { display: none; }
.nk-catalog-grid:not(.is-loading) > .nk-skel-card { display: none; }
.nk-catalog-results.is-loading .nk-pagination { opacity: .4; pointer-events: none; }

/* Size guide iframe placeholder */
.size-dialog.is-loading iframe { opacity: 0; }
.size-dialog .nk-dialog-skeleton { display: none; }
.size-dialog.is-loading .nk-dialog-skeleton { position: absolute; inset: 64px 24px 24px; display: flex; flex-direction: column; gap: 14px; }

/* Messages slide in from the top */
.messages .message { transform-origin: top center; }

@media (prefers-reduced-motion: reduce) {
  .nk-skel, .nk-media-loading { animation: none; }
  body :is(.nk-btn, .button)[aria-busy="true"]::after { animation-duration: 2s; }
}

/* ======================================================================
 * Refinement pass — continuity between pages, depth on scroll and clearer
 * answers to hover, touch and keyboard focus.
 *
 * Palette, radii, type scale, spacing and layout are unchanged: every effect
 * below moves transform/opacity or reuses an existing token, falls back to the
 * static design where the browser lacks support, and stops under reduced motion.
 * ====================================================================== */

/* Pages cross-fade into each other instead of flashing. Same-origin navigations
   only; browsers without view transitions simply load the next page as before. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: nk-page-out .16s ease-out both; }
::view-transition-new(root) { animation: nk-page-in .2s ease-out both; }
@keyframes nk-page-out { to { opacity: 0; } }
@keyframes nk-page-in { from { opacity: 0; transform: translateY(4px); } }

/* Anchors land below the sticky header rather than under it. */
html { scroll-padding-top: calc(var(--header-height) + 16px); }

/* Depth on scroll: the header settles onto the page it covers and the hero photo
   trails the copy. Both are scroll-driven, so nothing animates while the page is
   still and there is no scroll listener on the main thread. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .nk-header {
      backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
      animation: nk-header-settle linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 72px;
    }
    /* Slack above and below the frame gives the photo room to drift inside it. */
    .nk-hero-image {
      top: -36px; height: calc(100% + 72px);
      animation: nk-hero-drift linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 640px;
    }
  }
}
@keyframes nk-header-settle { to { background-color: color-mix(in oklab, var(--bg) 88%, transparent); } }
@keyframes nk-hero-drift { to { transform: translateY(52px); } }

/* Cards answer a pointer and the keyboard the same way. Motion zooms the photo
   for pointers; the hairline and title carry the state for everyone else. */
.nk-card .nk-card-media { transition: border-color .2s ease-out; }
.nk-card:hover .nk-card-media, .nk-card:focus-within .nk-card-media { border-color: var(--accent); }
.nk-card:hover h3 a, .nk-card:focus-within h3 a { color: var(--accent-dark); }
.nk-cart-item { transition: border-color .2s ease-out; }
.nk-cart-item:hover, .nk-cart-item:focus-within { border-color: var(--accent); }
.nk-search, .nk-mobile-search-field, .nk-catalog-search { transition: background-color .18s ease-out; }

/* Quantity steppers were the only controls with no hover state. */
body :is(.nk-qty, .nk-qty-pill) button { transition: background-color .15s ease-out, color .15s ease-out; }
body :is(.nk-qty, .nk-qty-pill) button:hover:not(:disabled) { background: var(--tint); color: var(--accent-dark); }

/* One focus ring everywhere: store.css offsets 4px, the design file uses 3px. */
body :focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 3px; }
/* Search fields show focus by their fill; the pill itself is the target, not the text box inside it. */
body :is(.nk-search, .nk-mobile-search-field, .nk-catalog-search) input:focus-visible { outline: 0; }

/* Short headings break evenly instead of dropping one word onto its own line. */
.nk-section-head h2, .nk-empty h2, .nk-promo-note h2 { text-wrap: balance; }

/* Strips that scroll sideways settle on an item and drop their scrollbar. */
@media (max-width: 800px) {
  .nk-thumbs { scroll-snap-type: x proximity; scroll-padding-inline: 18px; scrollbar-width: none; }
  .nk-thumbs::-webkit-scrollbar { display: none; }
  .nk-thumbs button { scroll-snap-align: start; }
}
@media (max-width: 640px) {
  .nk-section-head .nk-chips { scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); }
  .nk-section-head .nk-chip { scroll-snap-align: start; }
}

/* Thin, brand-toned scrollbars where a pointer actually sees them. */
@media (pointer: fine) {
  html { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ======================================================================
 * Depth pass 2 — pointer depth on product photos, the flight into the bag,
 * the burst behind a confirmed favourite and calmer long-page scrolling.
 *
 * Transform and opacity only, as above; reduced motion stops every effect.
 * The pointer tilt, flight and burst are driven by storefront-motion.js.
 * ====================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* A clone of the product photo on its way to the bag. */
.nk-fly { position: fixed; z-index: 220; margin: 0; border-radius: 14px; object-fit: cover; pointer-events: none; }

/* Dots leaving a favourite button once the server confirms the save. */
.nk-card .favorite, .nk-round-btn.favorite { position: relative; }
.nk-burst { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
.nk-burst i { position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 999px; background: var(--red); }
.nk-burst i:nth-child(even) { background: var(--accent); }

/* Section links, page-bar buttons and card swatches answer hover with a small move. */
.nk-more { transition: color .15s ease-out, transform .2s cubic-bezier(.22, 1, .36, 1); }
.nk-more:hover, .nk-more:focus-visible { transform: translateX(-3px); }
.nk-page-bar .nk-icon-btn .icon, .nk-header .nk-icon-btn .icon { transition: transform .18s ease-out; }
.nk-page-bar .nk-icon-btn:hover .icon, .nk-header .nk-icon-btn:hover .icon { transform: scale(1.12); }
.nk-card .nk-swatches > span { transition: transform .15s ease-out; }
.nk-card .nk-swatches > span:hover { transform: scale(1.3); }

/* Footer links underline the way the desktop navigation does. */
.nk-footer-group > a { position: relative; width: fit-content; }
.nk-footer-group > a::after {
  content: ''; position: absolute; inset-inline: 0; bottom: 9px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .2s cubic-bezier(.22, 1, .36, 1);
}
.nk-footer-group > a:is(:hover, :focus-visible)::after { transform: scaleX(1); }

/* Empty-state icons breathe slowly. */
@keyframes nk-float { 50% { transform: translateY(-5px); } }
.nk-empty-icon { animation: nk-float 3.2s ease-in-out infinite; }

/* The promo photo drifts against its caption while it passes through the viewport. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .nk-promo-media img {
      top: -24px; height: calc(100% + 48px);
      animation: nk-promo-drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%;
    }
  }
}
@keyframes nk-promo-drift { from { transform: translateY(-24px); } to { transform: translateY(24px); } }

/* Dialog backdrops fade in instead of snapping. */
dialog::backdrop { transition: opacity .25s ease-out; }
dialog[open]::backdrop { opacity: 1; }
@starting-style {
  dialog[open]::backdrop { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nk-empty-icon { animation: none; }
  .nk-more, .nk-card .nk-swatches > span, .nk-page-bar .nk-icon-btn .icon, .nk-header .nk-icon-btn .icon,
  .nk-footer-group > a::after, dialog::backdrop { transition: none; }
}