/* Nova K9 Academy | Shop: cart button, cart drawer and checkout step.
   Uses the site's own tokens from site.css (navy, paper, cream, ink, muted, line, blue, ease) and its
   .button / .text-link / .eyebrow classes, so the cart reads as part of the site rather than a widget. */

/* Header cart button (rendered into [data-shop-cart-mount]) */
[data-shop-cart-mount] { display:inline-flex; align-items:center }
.nk-cart-button {
  display:inline-flex; align-items:center; gap:9px; min-height:43px; padding:0 14px 0 12px;
  border:1px solid var(--line); border-radius:4px; background:var(--paper); color:var(--navy);
  font-size:13px; font-weight:600; line-height:1; white-space:nowrap
}
.nk-cart-button:hover { background:var(--blue-soft); border-color:transparent }
.nk-cart-button[hidden] { display:none }
.nk-cart-button svg { width:18px; height:18px; flex:none }
.nk-cart-count {
  display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 6px; border-radius:99px;
  background:var(--blue); color:var(--navy); font-size:12px; font-weight:700
}
.header-inner .nk-cart-button { margin-left:12px }

/* Floating cart button for pages without a header mount; only present while the cart has items */
.nk-cart-fab {
  position:fixed; right:18px; bottom:18px; z-index:60; display:inline-flex; align-items:center; gap:10px;
  min-height:50px; padding:0 18px 0 16px; border:0; border-radius:99px; background:var(--navy); color:var(--paper);
  font-size:14px; font-weight:600; box-shadow:0 14px 40px rgba(16,47,64,.28)
}
.nk-cart-fab svg { width:20px; height:20px }
.nk-cart-fab .nk-cart-count { background:var(--blue); color:var(--navy) }

/* The cart dialog. site.css already styles `dialog` (no padding, paper background) and ::backdrop. */
.nk-shop-dialog {
  width:min(560px,calc(100% - 40px)); max-height:calc(100svh - 64px); overflow:auto;
  border-radius:9px; box-shadow:0 30px 90px #07192240; color:var(--ink)
}
.nk-shop-dialog .dialog-close { right:14px; top:14px }
.nk-shop-panel { padding:34px 38px 36px }
.nk-shop-panel[hidden] { display:none }
.nk-shop-head { padding-right:48px }
.nk-shop-head .eyebrow { margin-bottom:12px; color:var(--muted) }
.nk-shop-head h2 { font-size:32px; letter-spacing:-.045em; line-height:1.08 }
.nk-shop-head h2 em { font-weight:600 }
.nk-shop-head p { margin-top:10px; font-size:15px; line-height:1.7; color:var(--muted) }

.nk-shop-notice {
  margin:22px 0 0; padding:12px 15px; border-radius:5px; background:var(--blue-soft); color:var(--navy);
  font-size:14px; line-height:1.55
}
.nk-shop-notice[hidden] { display:none }

/* Lines */
.nk-shop-lines { list-style:none; margin:26px 0 0; padding:0; border-top:1px solid var(--line) }
.nk-shop-line {
  display:grid; grid-template-columns:62px minmax(0,1fr) auto; column-gap:18px; align-items:center;
  padding:18px 0; border-bottom:1px solid var(--line)
}
.nk-shop-thumb { width:62px; height:72px; border-radius:5px; background:var(--cream); overflow:hidden }
.nk-shop-thumb img { width:100%; height:100%; object-fit:cover; object-position:50% 35% }
.nk-shop-line-name { font-size:16px; font-weight:500; letter-spacing:-.02em; line-height:1.3 }
.nk-shop-line-meta { margin-top:4px; font-size:13px; color:var(--muted) }
.nk-shop-line-side { display:grid; justify-items:end; gap:8px; text-align:right }
.nk-shop-line-price { font-size:16px; font-weight:500; letter-spacing:-.02em; white-space:nowrap }
.nk-shop-remove {
  padding:4px 0; border:0; border-bottom:1px solid transparent; background:none; font-size:12px; font-weight:600;
  letter-spacing:.02em; color:var(--muted)
}
.nk-shop-remove:hover { color:var(--navy); border-bottom-color:currentColor }

.nk-shop-total {
  display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding:20px 0 4px;
  font-size:15px; color:var(--muted)
}
.nk-shop-total strong { font-size:22px; letter-spacing:-.035em; color:var(--ink); font-weight:500 }

.nk-shop-empty { padding:34px 0 8px; text-align:center }
.nk-shop-empty p { font-size:16px; line-height:1.7; color:var(--muted) }
.nk-shop-empty .text-link { margin-top:16px }

.nk-shop-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px 26px; margin-top:26px }
.nk-shop-actions .button { gap:18px }
.nk-shop-actions .text-link { font-size:13px; color:var(--navy) }

/* Checkout step */
.nk-shop-summary { margin:22px 0 0; padding:16px 18px; border-radius:6px; background:var(--cream); font-size:14px; line-height:1.6 }
.nk-shop-summary ul { list-style:none; margin:0; padding:0 }
.nk-shop-summary li { display:flex; justify-content:space-between; gap:16px }
.nk-shop-summary li+li { margin-top:4px }
.nk-shop-summary-total { display:flex; justify-content:space-between; gap:16px; margin-top:10px; padding-top:10px; border-top:1px solid var(--line); font-weight:600 }
.nk-shop-form { margin-top:24px }
.nk-shop-field { display:block; margin-top:16px }
.nk-shop-field>span { display:block; margin-bottom:7px; font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted) }
.nk-shop-field input {
  display:block; width:100%; min-height:50px; padding:12px 14px; border:1px solid rgba(20,51,68,.28); border-radius:5px;
  background:#fff; color:var(--ink); font-size:16px; line-height:1.4
}
.nk-shop-field input:focus { border-color:var(--navy); outline:2px solid var(--blue-soft); outline-offset:0 }
.nk-shop-field input:disabled { background:var(--cream); color:var(--muted) }
.nk-shop-stamp { margin-top:16px; font-size:13px; line-height:1.6; color:var(--muted) }
.nk-shop-error {
  margin-top:18px; padding:12px 15px; border-radius:5px; background:#fbeeed; color:#8a2f27; font-size:14px; line-height:1.55
}
.nk-shop-error[hidden] { display:none }
.nk-shop-back { font-size:13px }

/* Motion, only when the visitor allows it */
@media (prefers-reduced-motion:no-preference) {
  .nk-cart-button,.nk-cart-fab { transition:background .2s,color .2s,transform .25s var(--ease) }
  .nk-cart-fab:hover { transform:translateY(-2px) }
  .nk-shop-dialog[open] { animation:nk-shop-in .22s var(--ease) }
  @keyframes nk-shop-in { from { transform:translateY(10px); opacity:.6 } to { transform:none; opacity:1 } }
}

/* Phones: the drawer becomes a bottom sheet with full-width buttons */
@media (max-width:620px) {
  .nk-shop-dialog {
    width:100%; max-width:none; margin:auto 0 0; max-height:calc(100svh - 24px);
    border-radius:14px 14px 0 0
  }
  .nk-shop-panel { padding:26px 20px calc(24px + env(safe-area-inset-bottom,0px)) }
  .nk-shop-head h2 { font-size:28px }
  .nk-shop-line { grid-template-columns:54px minmax(0,1fr) auto; column-gap:14px; padding:15px 0 }
  .nk-shop-thumb { width:54px; height:62px }
  .nk-shop-line-name { font-size:15px }
  .nk-shop-actions { flex-direction:column; align-items:stretch }
  .nk-shop-actions .button { width:100% }
  .nk-shop-actions .text-link { justify-content:center; align-self:center }
  .nk-cart-button { padding:0 10px; min-height:40px; font-size:12px }
  .nk-cart-button .nk-cart-label { display:none }
  .nk-cart-fab { right:14px; bottom:14px }
  @media (prefers-reduced-motion:no-preference) {
    @keyframes nk-shop-in { from { transform:translateY(24px); opacity:.6 } to { transform:none; opacity:1 } }
  }
}