/* =========================================================================
   ChefyChef redesign · shell
   Shared reset, version toggle chrome and cross version utilities.
   Nothing here paints either composition: V1 and V2 own their own palettes
   in v1.css / v2.css, scoped under #v1 and #v2 so tokens cannot leak.
   ========================================================================= */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: clip;
  background: #0e1b11;
  color: #fff3e1;
  font-family: "Archivo", system-ui, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img,
svg,
video { display: block; max-width: 100%; }

/* width/height attributes are there for aspect ratio and layout stability.
   Without this, a CSS width alone leaves the height attribute in charge and
   the image stretches. Components that need a fixed box set height in their
   own rule, which outranks this one. */
img { height: auto; }

button,
input,
select { font: inherit; color: inherit; }

h1, h2, h3, h4, h5, p, figure, blockquote, ul, ol, dl, dd {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

a { color: inherit; }

:focus-visible {
  outline: 3px solid #f64111;
  outline-offset: 3px;
  border-radius: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 9999;
  padding: 12px 18px;
  background: #fff3e1;
  color: #0e1b11;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  transform: translateY(-160%);
  transition: transform 0.22s ease;
}

.skip-link:focus-visible { transform: translateY(0); }

/* ---------- version state ---------------------------------------------- */

.version-root[hidden] { display: none !important; }

/* ---------- version toggle --------------------------------------------- */

.vswitch {
  position: fixed;
  z-index: 900;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(12, 20, 14, 0.82);
  border: 1px solid rgba(255, 243, 225, 0.22);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.42);
}

.vswitch__label {
  padding: 0 10px 0 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 243, 225, 0.5);
  font-family: "Archivo", system-ui, sans-serif;
}

.vswitch__btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 9px 17px;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 243, 225, 0.72);
  font-family: "Archivo", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease;
}

.vswitch__btn:hover { color: #fff3e1; }

.vswitch__btn[aria-pressed="true"] {
  background: #fff3e1;
  color: #0e1b11;
}

.vswitch__btn:focus-visible {
  outline: 3px solid #f64111;
  outline-offset: 2px;
}

@media (max-width: 560px) {
  .vswitch { bottom: 12px; padding: 4px; }
  .vswitch__label { display: none; }
  .vswitch__btn { padding: 8px 14px; font-size: 11px; }
}

/* V3 puts a real app tab bar at the bottom of the screen, exactly where this
   switcher lives. The switcher is preview tooling, not part of the design the
   client gets, so the tooling moves out of the way rather than the design
   being reshaped around it. On a phone it docks above the tab bar, on a
   desktop it steps aside onto the backdrop next to the device. */
html[data-version="v3"] .vswitch {
  bottom: calc(78px + env(safe-area-inset-bottom, 0px));
}

/* A modal sheet is on top of everything by definition, and on a phone width
   the switcher would otherwise sit right on the checkout button. Preview
   chrome steps back while a modal is open. */
html[data-sheet="open"] .vswitch {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

@media (min-width: 760px) {
  html[data-version="v3"] .vswitch {
    left: 24px;
    bottom: 24px;
    transform: none;
  }
}

/* ---------- shared motif ------------------------------------------------ */
/* The serape triangle band lifted from ChefyChef's own dish artwork.
   Inlined as a data URI so it needs no element ids and cannot collide
   between the two version trees. */

:root {
  --zigzag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='18' viewBox='0 0 160 18'%3E%3Cpath d='M0 18 L10 0 L20 18 Z' fill='%23199B4A'/%3E%3Cpath d='M20 0 L30 18 L40 0 Z' fill='%23199B4A'/%3E%3Cpath d='M40 18 L50 0 L60 18 Z' fill='%23199B4A'/%3E%3Cpath d='M60 0 L70 18 L80 0 Z' fill='%23199B4A'/%3E%3Cpath d='M80 18 L90 0 L100 18 Z' fill='%23199B4A'/%3E%3Cpath d='M100 0 L110 18 L120 0 Z' fill='%23C24D22'/%3E%3Cpath d='M120 18 L130 0 L140 18 Z' fill='%23C24D22'/%3E%3Cpath d='M140 0 L150 18 L160 0 Z' fill='%23199B4A'/%3E%3C/svg%3E");
}

.zigband {
  height: 18px;
  background-image: var(--zigzag);
  background-repeat: repeat-x;
  background-size: auto 18px;
}

/* ---------- motion safety ---------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}