/* ============================================================
   NEXTFABRI — Theme toggle + light mode + nav action cluster
   ============================================================ */

/* ---------- Nav action cluster (right side of the pill) ---------- */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9999px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--white);
  cursor: pointer;
  transition: color 0.25s, border-color 0.25s, background-color 0.25s;
}

.icon-btn:hover {
  color: var(--red-bright);
  border-color: rgba(224, 23, 34, 0.45);
  background: rgba(224, 23, 34, 0.08);
}

.icon-btn svg {
  width: 17px;
  height: 17px;
  display: block;
}

/* Cart icon with count badge */
.cart-btn {
  position: relative;
}

.cart-count {
  position: absolute;
  top: -3px;
  right: -4px;
  background: var(--red);
  color: var(--white);
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 700;
  min-width: 15px;
  height: 15px;
  line-height: 15px;
  text-align: center;
  padding: 0 3px;
}

/* "Make account" icon button (icon-only, matches .icon-btn sizing —
   borderless at rest like the moon/cart buttons; the red ring is
   hover-only so the three-icon cluster reads as one family). */
.account-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--white);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9999px;
  transition: color 0.25s, border-color 0.25s, background-color 0.25s;
}

.account-link svg {
  width: 17px;
  height: 17px;
  display: block;
}

.account-link:hover {
  color: var(--red-bright);
  border-color: var(--red-bright);
  background: rgba(224, 23, 34, 0.08);
}

/* Theme toggle icon swap */
.theme-btn .icon-sun {
  display: none;
}

.theme-btn .icon-moon {
  display: block;
}

html[data-theme="light"] .theme-btn .icon-sun {
  display: block;
}

html[data-theme="light"] .theme-btn .icon-moon {
  display: none;
}

/* ============================================================
   LIGHT THEME
   ============================================================ */
html[data-theme="light"] {
  --red: #c40e18;
  --red-dark: #8f0d15;
  --red-bright: #d90f1b;
  --black: #fafafa; /* off-white page base — not pure white, not gray (spec) */
  --charcoal: #ffffff;
  --gray-800: #e4e0dc;
  --gray-600: #8a857f;
  --gray-400: #6b6660;
  --white: #161315;
}

/* Load-flash guard: every page carries <html style="background:#0a0a0a">
   as the dark-mode anti-white-flash. In light mode that inline style must
   not flash dark, so !important overrides it pre-paint (the inline head
   script sets data-theme before first paint). */
html[data-theme="light"] {
  background-color: #fafafa !important;
}

/* ---------- View Transition API — circle reveal from a corner ---------- */
/* Port of Skiper UI skiper26 (variant="circle", start="top-left"),
   which itself wraps the View Transition API. The old view is snapped,
   the new one is revealed by a clip-path circle expanding from the
   toggle button's top-left corner. */

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-new(root) {
  animation: reveal-circle 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
  z-index: 9999;
}

::view-transition-old(root) {
  z-index: 1;
}

@keyframes reveal-circle {
  from {
    clip-path: circle(0% at var(--reveal-x, 0%) var(--reveal-y, 0%));
  }
  to {
    clip-path: circle(140% at var(--reveal-x, 0%) var(--reveal-y, 0%));
  }
}

/* Graceful degradation: browsers without View Transitions still get a
   smooth crossfade of the themed surfaces (body, text, footer, cards,
   inputs, toasts). The nav pill carries its own transition in style.css. */
@supports not (view-transition-name: root) {
  html[data-theme] body,
  html[data-theme] .site-footer,
  html[data-theme] .product-card,
  html[data-theme] .product-media,
  html[data-theme] .site-footer a,
  html[data-theme] .footer-bottom,
  html[data-theme] .contact-form input,
  html[data-theme] .contact-form textarea,
  html[data-theme] .size-btn,
  html[data-theme] .quantity input,
  html[data-theme] .toast,
  html[data-theme] .cart-drawer {
    transition-property: background-color, color, border-color, box-shadow, fill, stroke;
    transition-duration: 0.45s;
    transition-timing-function: ease;
  }
}

/* ---------- Mobile: the action cluster is all icons now ---------- */