/* ===================================================================
   East Cork Key Rings — styles
   Palette: warm stone + wood-burn amber (from ui-ux-pro-max design system)
   =================================================================== */

:root {
  --ink:        #1C1917;   /* primary text / dark */
  --ink-2:      #44403C;   /* secondary text */
  --muted-text: #78716C;   /* tertiary */
  --accent:     #A16207;   /* wood-burn amber (CTA) */
  --accent-dk:  #854D0E;
  --accent-tint:#FBF3E2;
  --paper:      #FAFAF9;   /* background */
  --paper-2:    #F3EFE9;   /* alt section */
  --card:       #FFFFFF;
  --border:     #E4DED5;
  --border-2:   #D6D0C6;
  --wood-light: #E7C89B;
  --wood-light2:#D8B27B;
  --wood-dark:  #7A4A28;
  --wood-dark2: #5E3417;
  --leather:    #5A3A22;
  --leather2:   #432a17;
  --brass:      #B89763;
  --burn:       #2A1B0E;   /* engrave colour on light wood */
  /* tiny national / county accents — used sparingly, never on the key rings */
  --irish-green:  #169B62; /* tricolour */
  --irish-orange: #FF883E;
  --cork-red:     #C8102E; /* Cork "the Rebels" */
  --shadow-sm:  0 1px 2px rgba(28,25,23,.06), 0 1px 3px rgba(28,25,23,.08);
  --shadow-md:  0 4px 14px rgba(28,25,23,.08), 0 2px 6px rgba(28,25,23,.06);
  --shadow-lg:  0 20px 48px rgba(28,25,23,.16), 0 8px 18px rgba(28,25,23,.08);
  --radius:     14px;
  --radius-lg:  22px;
  --maxw:       1180px;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Cabin", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.1; color: var(--ink); margin: 0 0 .4em; letter-spacing: -.01em; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1rem; }
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.ink { color: var(--accent); font-style: italic; }
.muted { color: var(--muted-text); }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* ---------- tiny Irish + Cork accents ---------- */
/* hairline tricolour across the very top of the page */
.tricolour-rule {
  height: 3px;
  background: linear-gradient(90deg,
    var(--irish-green) 0 33.33%,
    #ffffff 33.33% 66.66%,
    var(--irish-orange) 66.66% 100%);
}
/* small flat tricolour flag glyph (footer / inline) */
.flag-ie {
  display: inline-block; width: 20px; height: 13px; vertical-align: -2px;
  border-radius: 2px; margin: 0 0 0 .45em; flex: none;
  box-shadow: 0 0 0 1px rgba(255,255,255,.18);
  background: linear-gradient(90deg,
    var(--irish-green) 0 33.33%,
    #ffffff 33.33% 66.66%,
    var(--irish-orange) 66.66% 100%);
}

/* ---------- buttons ---------- */
.btn {
  --b: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--font-body); font-weight: 600; font-size: 1rem;
  padding: .8em 1.4em; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; transition: transform .15s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
  text-align: center; white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-accent { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
.btn-accent:hover { background: var(--accent-dk); box-shadow: var(--shadow-md); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--border-2); }
.btn-ghost:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-sm { padding: .55em 1em; font-size: .92rem; }
.btn-lg { padding: .95em 1.7em; font-size: 1.06rem; }
.btn-block { width: 100%; }

/* ---------- header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250,250,249,.82);
  backdrop-filter: saturate(150%) blur(12px);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-inner { display: flex; align-items: center; gap: 20px; height: 70px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.brand-mark { color: var(--accent); display: inline-flex; }
.brand-text { font-family: var(--font-display); font-size: 1.04rem; line-height: 1; letter-spacing: -.01em; display: flex; flex-direction: column; }
.brand-text strong { font-weight: 700; }
.main-nav { display: flex; gap: 6px; margin-left: auto; }
.main-nav a { padding: 8px 12px; border-radius: 8px; font-weight: 500; color: var(--ink-2); transition: background .2s, color .2s; }
.main-nav a:hover { background: var(--paper-2); color: var(--ink); }
.nav-cta { }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 8px; cursor: pointer; margin-left: auto; }
.nav-toggle span { width: 24px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-nav { display: none; }

/* ---------- hero ---------- */
.hero {
  background:
    radial-gradient(1200px 500px at 78% -10%, rgba(161,98,7,.10), transparent 60%),
    linear-gradient(180deg, #fff, var(--paper) 60%);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
/* The hero owns one screen below the header and centres its content vertically,
   so the headline, stats, buttons and image all land in view on first load
   (viewport-aware padding keeps it tidy on short windows and airy on tall ones). */
.hero-grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px;
  align-items: center; align-content: center;
  min-height: calc(100vh - 70px);
  min-height: calc(100svh - 70px);
  padding: clamp(24px, 4vh, 56px) 24px;
}
.eyebrow {
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  font-size: .76rem; color: var(--accent); margin: 0 0 12px;
}
.hero h1 { font-size: clamp(2.3rem, 5.2vw, 3.9rem); font-weight: 600; margin-bottom: .3em; }
.lead { font-size: 1.18rem; color: var(--ink-2); max-width: 36ch; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin: 22px 0 18px; }
.hero-trust { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.hero-trust li { display: inline-flex; align-items: center; gap: 8px; font-size: .96rem; color: var(--ink-2); font-weight: 500; }
.hero-trust svg { color: var(--accent); flex: none; }

.hero-stats {
  list-style: none; padding: 0; margin: 2px 0 20px;
  display: grid; grid-template-columns: repeat(3, auto); width: fit-content;
}
.hero-stats li { padding: 2px 22px; }
.hero-stats li:first-child { padding-left: 0; }
.hero-stats li + li { border-left: 1px solid var(--border); }
.hero-stats strong {
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.55rem, 3.2vw, 2.05rem); line-height: 1;
  color: var(--accent-dk); margin-bottom: 5px;
}
.hero-stats span { display: block; max-width: 13ch; font-size: .82rem; color: var(--ink-2); line-height: 1.3; }

.hero-media { position: relative; }
/* wraps just the slider + floating badge so the badge anchors to the
   photo's corner (not the column bottom, which now holds the CTA) */
.hero-frame { position: relative; }

/* hero slideshow — a tilted, white-framed photo card that slides
   horizontally through several real product shots. .hero-slider is the
   fixed viewport (clips the overflow); .hero-track is a flex row holding
   all the photos, translateX-ed one panel-width at a time; each
   .hero-slide fills a full panel (object-fit: cover unifies their mixed
   shapes). A clone of the first photo is appended by JS so the loop back
   to the start slides forward seamlessly instead of whipping backwards. */
.hero-slider {
  position: relative; width: 100%;
  aspect-ratio: 4/3; max-height: calc(100svh - 160px);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  transform: rotate(1.4deg); border: 6px solid #fff; overflow: hidden;
  background: #EFEAE2;               /* warm placeholder while images load */
}
.hero-track {
  display: flex; height: 100%; width: 100%;
  will-change: transform;
  transition: transform .8s cubic-bezier(.65, 0, .35, 1);
}
.hero-slide {
  flex: 0 0 100%; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* subtle scrim so the dots stay legible over bright photos */
.hero-slider::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 54px;
  z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.28), transparent);
}
.hero-dots {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 6px;
  display: flex; justify-content: center; gap: 4px; padding: 0 10px;
}
.hero-dot {
  width: 26px; height: 26px; padding: 0; border: 0; background: transparent;
  display: inline-grid; place-items: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hero-dot::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,.55); box-shadow: 0 1px 3px rgba(0,0,0,.4);
  transition: background .25s ease, transform .25s ease;
}
.hero-dot:hover::before { background: rgba(255,255,255,.9); }
.hero-dot.is-active::before { background: #fff; transform: scale(1.4); }
.hero-dot:focus-visible { outline: 2px solid #fff; outline-offset: -4px; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) {
  .hero-track { transition: none; }
}
.hero-badge {
  position: absolute; left: -18px; bottom: -22px;
  background: var(--ink); color: #fff; padding: 16px 20px; border-radius: 16px;
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 2px; max-width: 200px;
}
.hero-badge strong { font-family: var(--font-display); font-size: 1.7rem; color: #fff; }
.hero-badge span { font-size: .82rem; color: #D6D0C6; line-height: 1.3; }

/* ---------- trust strip ---------- */
.strip { background: var(--ink); color: #E7E2DA; padding: 22px 0; }
.strip .container { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.strip-label { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: #A8A29E; margin: 0; }
.strip-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; font-family: var(--font-display); font-size: 1.05rem; color: #F5F0E8; }
.strip-logos .dot { color: var(--accent); }

/* ---------- sections ---------- */
.section { padding: 88px 0; }
.section-alt { background: var(--paper-2); }
.section-head { max-width: 720px; margin: 0 auto 52px; text-align: center; }
.section-sub { font-size: 1.12rem; color: var(--ink-2); margin: 0; }

/* "in a hurry?" shortcut from the customiser to the instant (auto-logo+QR) page */
.cz-shortcut {
  display: flex; align-items: center; gap: 14px; text-align: left;
  max-width: 600px; margin: 26px auto 0; padding: 14px 18px;
  border-radius: var(--radius); background: var(--accent-tint);
  border: 1px solid #EAD9B0; color: var(--ink-2);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.cz-shortcut:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--accent); }
.cz-shortcut-icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: #fff; color: var(--accent); box-shadow: var(--shadow-sm); }
.cz-shortcut-text { font-size: .92rem; line-height: 1.45; }
.cz-shortcut-text strong { display: block; color: var(--ink); font-weight: 700; margin-bottom: 1px; }
.cz-shortcut-go { flex: none; margin-left: auto; font-size: 1.25rem; color: var(--accent); font-weight: 700; transition: transform .2s; }
.cz-shortcut:hover .cz-shortcut-go { transform: translateX(3px); }
@media (max-width: 560px) { .cz-shortcut-go { display: none; } }

/* ---------- why grid ---------- */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.why-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px 24px; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s;
}
.why-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.why-num { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--accent); display: inline-block; margin-bottom: 14px; letter-spacing: .04em; }
.why-card h3 { margin-bottom: .35em; }
.why-card p { margin: 0; color: var(--ink-2); font-size: .98rem; }

/* ---------- QR value ---------- */
.qr-why { margin-top: 64px; }
.qr-why-head { margin-bottom: 34px; }
.why-grid-3 { grid-template-columns: repeat(3, 1fr); max-width: 920px; margin-inline: auto; }
.qr-card { display: flex; flex-direction: column; }
.qr-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px; margin-bottom: 14px;
  background: var(--accent-tint); color: var(--accent-dk);
}
.qr-card h4 { font-size: 1.12rem; margin-bottom: .35em; }
.qr-card p { margin: 0; color: var(--ink-2); font-size: .98rem; }

/* ---------- range / products ---------- */
.range-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; max-width: 760px; margin-inline: auto; }
.product-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-sm);
  transition: transform .2s, box-shadow .2s;
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.product-media { aspect-ratio: 1/1; overflow: hidden; background: var(--paper-2); }
.product-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.product-card:hover .product-media img { transform: scale(1.05); }
.product-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.product-body h3 { margin: 0; }
.product-body p { margin: 0; font-size: .94rem; color: var(--ink-2); flex: 1; }
.product-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.from { font-size: .92rem; color: var(--muted-text); }
.from strong { color: var(--ink); font-size: 1.02rem; }
.tag { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--accent-dk); background: var(--accent-tint); padding: 4px 9px; border-radius: 999px; }
.product-body .btn { align-self: flex-start; margin-top: 4px; }

/* ---------- recent orders gallery ---------- */
.work-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.work-card {
  margin: 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.work-card img {
  display: block; width: 100%; aspect-ratio: 4 / 5; height: auto;
  object-fit: cover; background: var(--paper-2);
}
.work-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.work-card figcaption { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 3px; }
.work-card figcaption strong { font-size: .98rem; color: var(--ink); line-height: 1.25; }
.work-card figcaption span { font-size: .85rem; color: var(--ink-2); }

/* ---------- customiser ---------- */
.customiser {
  display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start;
}

/* front / back preview toggle */
.cz-side { display: inline-flex; gap: 4px; padding: 4px; margin: 0 auto 16px; border-radius: 999px;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18); align-self: center; }
.cz-preview { display: flex; flex-direction: column; }
.cz-side-btn {
  font-family: var(--font-body); font-weight: 600; font-size: .9rem; color: #E7E2DA;
  background: transparent; border: 0; padding: 8px 18px; border-radius: 999px; cursor: pointer;
  transition: background .2s, color .2s;
}
.cz-side-btn:hover { color: #fff; }
.cz-side-btn.is-on { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
.cz-preview {
  position: sticky; top: 84px;
  background: linear-gradient(160deg, #2a2522, #1c1917);
  border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-lg);
}
.cz-stage { display: grid; place-items: center; }
#czCanvas { width: 100%; max-width: 400px; height: auto; border-radius: 16px; box-shadow: 0 20px 44px -20px rgba(0,0,0,.6); }
.cz-preview-actions { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; }
.cz-preview-actions .btn-ghost { color: #F5F0E8; border-color: rgba(255,255,255,.25); }
.cz-preview-actions .btn-ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
.cz-note { font-size: .82rem; color: #B7AFA4; margin: 0; max-width: 46ch; }

.cz-controls { display: flex; flex-direction: column; gap: 18px; }
.cz-controls fieldset { border: 0; padding: 0; margin: 0; }
.cz-controls legend {
  font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; padding: 0; margin-bottom: 12px; color: var(--ink);
}
.opt, .check small { font-weight: 400; color: var(--muted-text); font-size: .85rem; font-family: var(--font-body); }

.chip-row { display: flex; flex-wrap: wrap; gap: 9px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span:not(.sw), .chip-wood { display: inline-flex; }
.chip > span:first-of-type,
.chip.chip-wood {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border: 1.5px solid var(--border-2); border-radius: 999px;
  background: var(--card); font-weight: 600; font-size: .92rem; color: var(--ink-2);
  transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.chip-wood { cursor: pointer; }
.chip input:checked + span,
.chip-wood:has(input:checked) {
  border-color: var(--accent); background: var(--accent-tint); color: var(--accent-dk); box-shadow: inset 0 0 0 1px var(--accent);
}
.chip input:focus-visible + span,
.chip-wood:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.sw { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); }
.sw-light { background: linear-gradient(135deg, var(--wood-light), var(--wood-light2)); }
.sw-dark { background: linear-gradient(135deg, var(--wood-dark), var(--wood-dark2)); }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field:last-child { margin-bottom: 0; }
.field label, .field legend { font-weight: 600; font-size: .92rem; color: var(--ink); }
.field.row { flex-direction: row; align-items: flex-end; gap: 14px; }
.field .grow { flex: 1; }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea {
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  padding: 11px 13px; border: 1.5px solid var(--border-2); border-radius: 10px;
  background: var(--card); width: 100%; transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(161,98,7,.15); }
textarea { resize: vertical; }
.hint { font-size: .82rem; color: var(--muted-text); margin: 4px 0 0; }
.check { display: inline-flex; align-items: center; gap: 7px; font-size: .92rem; font-weight: 500; cursor: pointer; white-space: nowrap; }

.file-drop {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  border: 1.5px dashed var(--border-2); border-radius: 12px; padding: 16px;
  background: var(--paper); color: var(--ink-2); font-size: .92rem; font-weight: 500;
  transition: border-color .15s, background .15s, color .15s;
}
.file-drop:hover, .file-drop.drag { border-color: var(--accent); background: var(--accent-tint); color: var(--accent-dk); }
.file-drop svg { flex: none; color: var(--accent); }

/* ---- logo options the lookup found (tap to choose) ---- */
.yk-logo-choices { display: flex; flex-wrap: wrap; gap: 9px; margin: 8px 0 10px; }
.yk-logo-choice {
  position: relative; width: 60px; height: 60px; flex: none; padding: 5px;
  border: 2px solid var(--border-2); border-radius: 12px; cursor: pointer;
  /* transparency checker so white, dark and colour logos all stay visible */
  background: repeating-conic-gradient(#e7e1d7 0 25%, #fbf9f5 0 50%) 0 0 / 16px 16px;
  transition: border-color .15s, box-shadow .15s, transform .1s;
}
.yk-logo-choice img { width: 100%; height: 100%; object-fit: contain; display: block; }
.yk-logo-choice:hover { border-color: var(--accent); transform: translateY(-1px); }
.yk-logo-choice.is-selected { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(161,98,7,.18); }
.yk-logo-choice.is-selected::after {
  content: "✓"; position: absolute; top: -7px; right: -7px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.yk-logo-choice-none {
  background: var(--paper); border-style: dashed;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: .68rem; font-weight: 600; line-height: 1.15; color: var(--muted-text);
}
.yk-logo-choice-none:hover { color: var(--accent-dk); }

/* the picker shown right under the search bar (so found logos are unmissable) */
.yk-logo-pick { margin: 2px 0 0; }
.yk-logo-pick[hidden] { display: none; }
.yk-logo-pick-label { font-size: .85rem; font-weight: 600; color: var(--ink-2); margin: 0 0 7px; }
.yk-logo-pick .yk-logo-choices { margin: 0; }

/* secondary "do it yourself" path under the primary search — a clear, full-width
   card button (subordinate to the accent "Show my key ring") with an "or" divider,
   so anyone who'd rather upload their own image and words can't miss it. */
.yk-start-or { margin: 16px 0 0; }
.yk-start-or-line {
  display: flex; align-items: center; gap: 12px; margin: 0 0 12px;
  font-size: .76rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted-text);
}
.yk-start-or-line::before, .yk-start-or-line::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}
.yk-diy-btn {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; cursor: pointer;
  font-family: var(--font-body); color: var(--ink);
  background: var(--paper-2); border: 1.5px solid var(--border-2); border-radius: 14px;
  padding: 13px 15px;
  transition: background .18s, border-color .18s, box-shadow .18s, transform .12s;
}
.yk-diy-btn-ico {
  flex: none; display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 11px; background: var(--accent-tint); color: var(--accent);
  transition: background .18s, color .18s;
}
.yk-diy-btn-text { display: flex; flex-direction: column; gap: 1px; line-height: 1.3; min-width: 0; }
.yk-diy-btn-text strong { font-size: 1rem; font-weight: 700; }
.yk-diy-btn-text small { font-size: .85rem; color: var(--ink-2); font-weight: 500; }
.yk-diy-btn-arrow { flex: none; margin-left: auto; color: var(--muted-text); transition: transform .16s, color .16s; }
.yk-diy-btn:hover {
  background: #fff; border-color: var(--accent); box-shadow: var(--shadow-sm); transform: translateY(-1px);
}
.yk-diy-btn:hover .yk-diy-btn-ico { background: var(--accent); color: #fff; }
.yk-diy-btn:hover .yk-diy-btn-arrow { transform: translateX(3px); color: var(--accent-dk); }
.yk-diy-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 560px) {
  .yk-diy-btn-text small { font-size: .82rem; }
}

/* "Do it yourself" mode (class set on the form by the DIY button): a calmer,
   from-scratch editor. Hide the auto-find design ideas and the chat helper, show a
   short blank-canvas intro, and spotlight the two steps that matter: image + words. */
.yk-diy-intro {
  display: none;
  background: var(--accent-tint); border: 1px solid #EAD9B0; border-radius: var(--radius);
  padding: 15px 18px;
}
.cz-controls.is-diy .yk-diy-intro { display: block; }
.yk-diy-intro h3 { margin: 0 0 5px; font-size: 1.05rem; }
.yk-diy-intro p { margin: 0; font-size: .9rem; color: var(--ink-2); line-height: 1.5; }
.yk-diy-intro strong { color: var(--accent-dk); }
.cz-controls.is-diy #ykIdeas { display: none !important; }
.cz-controls.is-diy .cz-change-lead,
.cz-controls.is-diy #ykChat,
.cz-controls.is-diy .cz-change-row { display: none; }
.cz-controls.is-diy .yk-side-card {
  border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-tint);
}

/* invert-colours toggle (only shown while a logo is on the tag) */
.yk-invert-field[hidden] { display: none; }
.yk-invert { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; font-size: .92rem; font-weight: 600; color: var(--ink-2); }
.yk-invert input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--accent); cursor: pointer; }
.yk-invert-sub { font-weight: 400; color: var(--muted-text); }

/* ---- Two separate side cards (Front + Back, both visible, no switching) ---- */
.yk-sides-intro { font-size: .95rem; color: var(--ink-2); margin: 0 0 4px; }
.yk-sides-intro strong { color: var(--accent-dk); }
.yk-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.yk-side-card {
  display: flex; flex-direction: column; gap: 13px;
  background: var(--paper-2); border: 1.5px solid var(--border-2); border-radius: 16px;
  padding: 16px 16px 18px;
  transition: border-color .2s, box-shadow .2s;
}
.yk-side-card.is-active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.yk-side-card-head { display: flex; align-items: baseline; gap: 9px; }
.yk-side-card-head h3 { margin: 0; font-size: 1.15rem; }
.yk-side-badge {
  font-size: .66rem; letter-spacing: .07em; text-transform: uppercase; font-weight: 800;
  color: var(--accent-dk); background: var(--accent-tint);
  border-radius: 999px; padding: 3px 9px;
}
.yk-side-card .field { margin: 0; }
.yk-side-image { display: flex; flex-direction: column; gap: 8px; }
.yk-logolink-row { display: flex; gap: 7px; align-items: stretch; }
.yk-logolink-row input { flex: 1; min-width: 0; }
.yk-side-remove[hidden] { display: none; }
.yk-link-btn {
  background: none; border: 0; padding: 2px 0; cursor: pointer;
  font: inherit; font-size: .85rem; font-weight: 600; color: var(--muted-text);
  text-decoration: underline; text-underline-offset: 2px;
}
.yk-link-btn:hover { color: var(--accent-dk); }

/* "you're adjusting the X side" hint above the fine-tune tools */
.yk-finetune-side { margin: 0 0 4px; }
.yk-finetune-side strong { color: var(--accent-dk); text-transform: capitalize; }

/* a plain check row (per-side "show the QR here") */
.yk-check { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; font-size: .92rem; font-weight: 600; color: var(--ink-2); }
.yk-check input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--accent); cursor: pointer; }
.yk-check strong { color: var(--accent-dk); }
.yk-qr-here { margin-top: 2px; }

/* on narrow screens the two cards stack */
@media (max-width: 640px) { .yk-sides { grid-template-columns: 1fr; } }

/* ---- business-relevant design ideas (tap a card to add line-art + words) ---- */
.yk-ideas {
  margin: 2px 0; padding: 15px 15px 13px; border-radius: var(--radius);
  background: var(--accent-tint); border: 1px solid #EAD9B0;
}
.yk-ideas-label { margin: 0 0 11px; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--accent-dk); }
.yk-ideas-label #ykIdeasFor { text-transform: none; letter-spacing: 0; font-style: italic; font-weight: 600; color: var(--ink-2); }
.yk-ideas-row { display: flex; flex-wrap: wrap; gap: 10px; }
.yk-idea {
  flex: 1 1 120px; min-width: 104px; min-height: 100px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  padding: 13px 12px; border-radius: 12px; cursor: pointer; text-align: center;
  background: #fff; border: 1px solid var(--border-2); color: var(--accent-dk);
  box-shadow: var(--shadow-sm);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.yk-idea:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow-md); }
.yk-idea:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.yk-idea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* the "classic" (logo + QR) card leads the row — give it a gentle highlight */
.yk-idea--classic { border-color: var(--accent); background: var(--accent-tint); }
.yk-idea-tag { font-size: .6rem; letter-spacing: .07em; text-transform: uppercase; font-weight: 700; color: var(--muted-text); }
.yk-idea--classic .yk-idea-tag { color: var(--accent-dk); }
.yk-idea-art { display: block; width: 42px; height: 42px; color: var(--accent-dk); }
.yk-idea-art svg { width: 100%; height: 100%; display: block; }
.yk-idea-phrase { font-size: .9rem; font-weight: 600; line-height: 1.25; color: var(--ink-2); }
.yk-idea.is-textonly .yk-idea-phrase { font-size: .98rem; }
.yk-ideas-note { margin: 11px 0 0; font-size: .82rem; color: var(--muted-text); }

input[type="range"] { width: 100%; accent-color: var(--accent); }

.chip-custom span { border-style: dashed; }

/* ---- position & layout controls ---- */
.cz-rotate-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.cz-rotate { display: flex; flex-direction: column; gap: 6px; }
.cz-rotate-label { font-weight: 600; font-size: .92rem; color: var(--ink); }
.cz-rotate-btn { justify-content: center; gap: 8px; width: 100%; }
.cz-rotate-btn svg { flex: none; }
.cz-drag-hint { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.cz-drag-hint svg { flex: none; color: var(--accent); }
#resetLayout { margin-top: 12px; }

/* drag affordance on the preview */
#czCanvas { touch-action: none; }
#czCanvas.is-grab { cursor: grab; }
#czCanvas.is-grabbing { cursor: grabbing; }
#ykFront, #ykBack { touch-action: none; }
#ykFront.is-grab, #ykBack.is-grab { cursor: grab; }
#ykFront.is-grabbing, #ykBack.is-grabbing { cursor: grabbing; }

/* ---- "make a change": instant presets + plain-English box (both customisers) ---- */
.cz-change { background: var(--accent-tint); border: 1px solid #EAD9B0; border-radius: var(--radius); padding: 20px 22px; }
.cz-change > legend { font-weight: 700; }
.cz-change-lead { margin-top: 0; }
.cz-change-lead em, .yk-change em { font-style: italic; color: var(--accent-dk); font-weight: 600; }
.cz-change-row { display: flex; gap: 8px; margin: 12px 0; }
.cz-change-row input { flex: 1; min-width: 0; }
.cz-change-row .btn { flex: none; white-space: nowrap; }
.cz-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.cz-chip-btn {
  font-family: var(--font-body); font-weight: 600; font-size: .88rem; color: var(--ink-2);
  background: var(--card); border: 1.5px solid var(--border-2); border-radius: 999px;
  padding: 7px 14px; cursor: pointer; transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.cz-chip-btn:hover { border-color: var(--accent); background: #fff; color: var(--accent-dk); box-shadow: var(--shadow-sm); }
.cz-chip-btn:active { transform: translateY(1px); }

/* Logo / Words segmented toggle — pick which element the slider + a drag act on */
.yk-elpick-field { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.yk-elpick-field[hidden] { display: none; }
.yk-elpick-label { font-size: .9rem; color: var(--muted-text); }
.yk-seg {
  display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px;
  background: var(--paper-2); border: 1px solid var(--border-2);
}
.yk-seg-btn {
  font-family: var(--font-body); font-weight: 600; font-size: .9rem; color: var(--ink-2);
  background: transparent; border: 0; padding: 7px 22px; border-radius: 999px; cursor: pointer;
  transition: background .2s, color .2s, box-shadow .2s;
}
.yk-seg-btn:hover { color: var(--ink); }
.yk-seg-btn.is-active { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
.yk-seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cz-change-status { font-size: .88rem; margin: 12px 0 0; padding: 9px 12px; border-radius: 10px; font-weight: 500; }
.cz-change-status[hidden] { display: none; }
.cz-change-status.loading { color: var(--ink-2); background: #F3EEE6; }
.cz-change-status.ok { color: #1f5132; background: #E8F3EC; }
.cz-change-status.info { color: #5b4a2a; background: #F6EFDD; }
.cz-change-status.error { color: #7a2b1f; background: #F7E7E2; }
.cz-change-undo { margin-top: 12px; }
.yk-drag-hint { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: .9rem; }
.yk-drag-hint svg { flex: none; color: var(--accent); }

/* ---- compact "Resize, rotate & move" panel (replaces the old fine-tune chat) ---- */
.yk-adjust { background: var(--accent-tint); border: 1px solid #EAD9B0; border-radius: var(--radius); padding: 15px 18px; }
.yk-adjust > legend { font-weight: 700; }
.yk-adjust-hint { display: flex; align-items: flex-start; gap: 8px; font-size: .9rem; line-height: 1.45; }
.yk-adjust-hint svg { flex: none; margin-top: 2px; color: var(--accent-dk); }
.yk-adjust .yk-elpick-field { margin-top: 12px; }
.yk-adjust-row { display: flex; align-items: flex-end; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.yk-adjust-size { flex: 1 1 220px; min-width: 170px; margin: 0; }
.yk-adjust-size[hidden] { display: none; }
.yk-adjust-size label { display: block; font-size: .9rem; font-weight: 600; color: var(--ink-2); margin-bottom: 5px; }
.yk-adjust-size input[type="range"] { width: 100%; display: block; accent-color: var(--accent); cursor: pointer; }
.yk-rotate-btn {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 9px 16px; min-height: 42px;
  background: var(--card); border: 1.5px solid var(--border-2); color: var(--ink-2);
  border-radius: 999px; box-shadow: none;
}
.yk-rotate-btn svg { flex: none; }
.yk-rotate-btn:hover { border-color: var(--accent); background: #fff; color: var(--accent-dk); box-shadow: var(--shadow-sm); }
.yk-rotate-btn.is-active { background: var(--card); color: var(--ink-2); }   /* a momentary action — never sticks "on" */
.yk-rotate-btn[hidden] { display: none; }
.yk-adjust .yk-invert-field { margin-top: 12px; }
.yk-adjust-actions { display: flex; gap: 20px; align-items: center; margin-top: 14px; }
.yk-adjust-actions .yk-link-btn[hidden] { display: none; }
.yk-adjust-actions .cz-change-undo { margin-top: 0; }

/* ---- compact "Or just ask" panel — plain-English changes; transcript hidden until used ---- */
.yk-ask { background: var(--accent-tint); border: 1px solid #EAD9B0; border-radius: var(--radius); padding: 15px 18px; }
.yk-ask > legend { font-weight: 700; }
.yk-ask-hint { line-height: 1.5; }
.yk-ask .cz-chat { max-height: 200px; margin: 12px 0; }
.yk-ask .cz-change-row { margin: 12px 0 0; }
.yk-ask .cz-change-row .btn { min-height: 44px; }

/* ---- design chat: a little conversation thread that drives the real engraving ---- */
.cz-chat {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 240px; overflow-y: auto;
  padding: 12px; margin: 12px 0;
  background: #fff; border: 1px solid var(--border-2); border-radius: 12px;
  -webkit-overflow-scrolling: touch;
}
.cz-chat:empty { display: none; }
.cz-bubble {
  max-width: 86%; padding: 9px 13px; border-radius: 15px;
  font-size: .9rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere;
}
.cz-bubble-user { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 5px; }
.cz-bubble-ai { align-self: flex-start; background: var(--paper-2); border: 1px solid var(--border-2); color: var(--ink); border-bottom-left-radius: 5px; }
.cz-bubble-ai.is-info { background: #F6EFDD; border-color: #EAD9B0; color: #5b4a2a; }
.cz-bubble-ai.is-error { background: #F7E7E2; border-color: #F0CABF; color: #7a2b1f; }
.cz-bubble.is-typing { display: inline-flex; align-items: center; gap: 5px; }
.cz-typing-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .4; animation: czDot 1s infinite ease-in-out; }
.cz-typing-dot:nth-child(2) { animation-delay: .15s; }
.cz-typing-dot:nth-child(3) { animation-delay: .3s; }
@keyframes czDot { 0%, 60%, 100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-3px); opacity: .85; } }
@media (prefers-reduced-motion: reduce) { .cz-typing-dot { animation: none; } }

/* ---- two-sided customiser controls ---- */
.cz-step legend { display: flex; align-items: center; gap: 10px; }
.cz-step-n {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: #fff; font-family: var(--font-body); font-weight: 700; font-size: .85rem; flex: none;
}

/* editor side tabs (mirror the dark preview tabs, light theme) */
.cz-sidetabs {
  display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 14px; border-radius: 999px;
  background: var(--paper-2); border: 1px solid var(--border-2);
}
.cz-sidetab {
  font-family: var(--font-body); font-weight: 600; font-size: .9rem; color: var(--ink-2);
  background: transparent; border: 0; padding: 8px 22px; border-radius: 999px; cursor: pointer;
  transition: background .2s, color .2s;
}
.cz-sidetab:hover { color: var(--ink); }
.cz-sidetab.is-on { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }

/* "what goes on this side" segmented toggle */
.cz-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
.cz-modes .seg { position: relative; cursor: pointer; }
.cz-modes .seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.cz-modes .seg > span {
  display: flex; align-items: center; justify-content: center;
  padding: 12px; border: 1.5px solid var(--border-2); border-radius: 12px;
  background: var(--card); font-weight: 600; font-size: .95rem; color: var(--ink-2);
  transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.cz-modes .seg input:checked + span {
  border-color: var(--accent); background: var(--accent-tint); color: var(--accent-dk); box-shadow: inset 0 0 0 1px var(--accent);
}
.cz-modes .seg input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }

/* QR finder */
.cz-qr-lead { font-size: .9rem; color: var(--ink-2); margin: 0 0 12px; }
.cz-qr-types { margin-bottom: 14px; }
.cz-qr-types .chip > span:first-of-type { padding: 7px 13px; font-size: .88rem; }
.cz-qr-result { font-size: .85rem; margin: 8px 0 0; min-height: 1.15em; color: var(--muted-text); word-break: break-all; }
.cz-qr-result.ok { color: #15803D; font-weight: 600; }

/* order summary: front + back thumbnails */
.order-thumb { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.order-thumb figure { margin: 0; flex: 1; min-width: 120px; text-align: center; }
.order-thumb img { width: 100%; border-radius: 10px; background: #1c1917; display: block; }
.order-thumb figcaption { font-size: .76rem; color: var(--muted-text); margin-top: 5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

.cz-price {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px 22px; box-shadow: var(--shadow-sm);
}
.cz-price-line { font-family: var(--font-display); font-size: 1.1rem; color: var(--ink-2); }
.cz-price-line span { color: var(--ink); font-weight: 700; }
.cz-price-total { display: flex; align-items: baseline; justify-content: space-between; margin: 6px 0 8px; }
.cz-price-total strong { font-family: var(--font-display); font-size: 2.1rem; color: var(--accent-dk); }
.cz-price-note { font-size: .82rem; color: var(--muted-text); margin: 0; }

/* ---------- steps ---------- */
.steps { list-style: none; padding: 0; margin: 0 0 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: s; }
.step { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 24px; box-shadow: var(--shadow-sm); position: relative; }
.step-no { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: #fff; font-family: var(--font-display); font-weight: 700; margin-bottom: 14px; }
.step h3 { margin-bottom: .3em; }
.step p { margin: 0; color: var(--ink-2); font-size: .96rem; }

/* ---------- ticks ---------- */
.ticks { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 8px; }
.ticks li { position: relative; padding-left: 28px; color: var(--ink-2); font-weight: 500; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); }
.ticks li::after { content: ""; position: absolute; left: 6px; top: 8px; width: 6px; height: 3px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }

/* ---------- order ---------- */
.section-order { background: linear-gradient(180deg, var(--ink), #261f1b); color: #EFE9E1; }
.order-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: start; }
.section-order .eyebrow { color: #E0B25E; }
.section-order h2 { color: #fff; }
.order-intro > p { color: #C9C1B6; max-width: 42ch; }
.order-summary { margin-top: 26px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); padding: 22px; }
.order-summary h3 { color: #fff; font-size: 1.1rem; margin-bottom: 12px; }
.order-summary ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.order-summary li { display: flex; justify-content: space-between; gap: 16px; font-size: .94rem; color: #D6CFC4; border-bottom: 1px dashed rgba(255,255,255,.12); padding-bottom: 9px; }
.order-summary li:last-child { border-bottom: 0; padding-bottom: 0; }
.order-summary li strong { color: #fff; text-align: right; }
.order-thumb { margin-top: 16px; background: #fff; border-radius: 10px; padding: 10px; max-width: 150px; }
.order-thumb img { width: 100%; }

.order-form { background: var(--card); border-radius: var(--radius-lg); padding: 30px; box-shadow: var(--shadow-lg); color: var(--ink); }
.order-form .field { margin-bottom: 16px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.order-form legend { margin-bottom: 10px; }
.order-form fieldset.field { border: 0; padding: 0; }
.req { color: var(--accent); }
.radio-card { display: flex; align-items: flex-start; gap: 12px; border: 1.5px solid var(--border-2); border-radius: 12px; padding: 14px; cursor: pointer; margin-bottom: 10px; transition: border-color .15s, background .15s; }
.radio-card:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); }
.radio-card input { margin-top: 3px; accent-color: var(--accent); flex: none; }
.radio-card span { display: flex; flex-direction: column; }
.radio-card strong { font-weight: 600; }
.radio-card small { color: var(--muted-text); }
.form-foot { font-size: .84rem; color: var(--muted-text); text-align: center; margin: 12px 0 0; }
.form-status { margin: 14px 0 0; padding: 12px 14px; border-radius: 10px; font-weight: 600; text-align: center; }
.form-status.ok { background: #ECFDF3; color: #15803D; border: 1px solid #BBF7D0; }
.form-status.err { background: #FEF2F2; color: #B91C1C; border: 1px solid #FECACA; }

/* ---------- describe / guided order ---------- */
.describe-form { max-width: 760px; margin: 0 auto; }
.describe-step { border: 0; padding: 0; margin: 0 0 28px; }
.describe-step > legend { display: flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 600; font-size: 1.14rem; color: var(--ink); margin-bottom: 14px; padding: 0; }
.describe-step-n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; font-family: var(--font-body); font-size: .9rem; font-weight: 700; }
.dz-optional { font-family: var(--font-body); font-weight: 500; font-size: .78rem; color: var(--muted-text); letter-spacing: .02em; }
.describe-hint { font-size: .9rem; color: var(--ink-2); margin: 0 0 14px; }

/* step 1 — type cards */
.dz-types { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dz-type { position: relative; cursor: pointer; margin: 0; }
.dz-type input { position: absolute; opacity: 0; width: 0; height: 0; }
.dz-type-body { display: flex; flex-direction: column; gap: 3px; padding: 12px; border: 2px solid var(--border-2); border-radius: 16px; background: var(--card); transition: border-color .15s, box-shadow .15s; height: 100%; }
.dz-type-body img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: #F1EADF; margin-bottom: 6px; }
.dz-type-body strong { font-weight: 600; color: var(--ink); }
.dz-type-price { font-size: .85rem; color: var(--muted-text); font-weight: 600; }
.dz-type input:checked + .dz-type-body { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.dz-type input:focus-visible + .dz-type-body { outline: 3px solid var(--accent); outline-offset: 2px; }

/* step 2 — quantity */
.dz-qty-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dz-qty-chip { min-height: 44px; padding: 0 17px; border: 1.5px solid var(--border-2); border-radius: 999px; background: var(--card); font-family: var(--font-body); font-weight: 600; font-size: 1rem; color: var(--ink); cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.dz-qty-chip:hover { border-color: var(--accent); }
.dz-qty-chip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.dz-qty-note { font-size: .88rem; color: var(--accent-dk); font-weight: 600; margin: 12px 0 0; min-height: 1.1em; }

/* step 4 — reference photo upload */
.dz-upload-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.dz-upload-label { display: flex; align-items: center; gap: 14px; padding: 18px; border: 2px dashed var(--border-2); border-radius: 14px; background: var(--card); cursor: pointer; color: var(--ink-2); transition: border-color .15s, background .15s; }
.dz-upload-label:hover, .dz-upload.is-drag .dz-upload-label { border-color: var(--accent); background: var(--accent-tint); }
.dz-upload-label svg { color: var(--accent); flex: none; }
.dz-upload-text { display: flex; flex-direction: column; }
.dz-upload-text strong { color: var(--ink); font-weight: 600; }
.dz-upload-text small { color: var(--muted-text); font-size: .82rem; }
.dz-upload-input:focus-visible + .dz-upload-label { outline: 3px solid var(--accent); outline-offset: 2px; }
.dz-upload-preview { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 12px; border: 1.5px solid var(--border-2); border-radius: 14px; background: var(--card); }
.dz-upload-preview[hidden] { display: none; }
.dz-upload-preview img { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; flex: none; background: #F1EADF; }
.dz-upload-meta { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.dz-upload-name { font-size: .88rem; color: var(--ink); font-weight: 600; word-break: break-word; }
.dz-upload-remove { align-self: flex-start; background: none; border: 0; color: #B91C1C; font-weight: 600; cursor: pointer; padding: 4px 0; font-size: .88rem; }
.dz-upload-hint { font-size: .82rem; color: var(--ink-2); margin: 10px 0 0; }
.dz-upload-hint[hidden] { display: none; }

/* step 5 — contact */
.dz-contact-note { font-size: .84rem; color: var(--muted-text); margin: 4px 0 0; }

/* review / checkout */
.dz-review { border: 1.5px solid var(--border-2); border-radius: 16px; padding: 20px 22px; background: var(--card); margin: 6px 0 22px; box-shadow: var(--shadow-sm); }
.dz-review h3 { font-family: var(--font-display); font-size: 1.05rem; margin: 0 0 10px; color: var(--ink); }
.dz-review-list { margin: 0; }
.dz-review-list > div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.dz-review-list > div:last-child { border-bottom: 0; }
.dz-review-list dt { color: var(--ink-2); font-weight: 500; margin: 0; }
.dz-review-list dd { margin: 0; color: var(--ink); font-weight: 600; text-align: right; }
.dz-review-total dt, .dz-review-total dd { font-size: 1.12rem; }
.dz-review-total dd { color: var(--accent-dk); font-variant-numeric: tabular-nums; }
.dz-review-foot { font-size: .82rem; color: var(--muted-text); margin: 12px 0 0; }

/* invalid-field highlight on submit */
.describe-form .is-invalid { border-color: #DC2626; box-shadow: 0 0 0 3px rgba(220,38,38,.14); }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.contact-copy p { color: var(--ink-2); }
.contact-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.contact-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 22px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s, border-color .2s; }
.contact-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--accent); }
.contact-card svg { color: var(--accent); margin-bottom: 8px; }
.contact-label { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-text); font-weight: 700; }
.contact-card strong { font-family: var(--font-display); font-size: 1.16rem; color: var(--ink); }
.contact-cta { color: var(--accent-dk); font-weight: 600; font-size: .9rem; margin-top: 4px; }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: #C9C1B6; padding: 56px 0 28px; }
.footer-inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.12); }
.footer-brand .brand-text { color: #fff; font-size: 1.2rem; flex-direction: row; gap: 6px; }
.footer-brand p { margin: 12px 0 0; font-size: .94rem; max-width: 34ch; }
.footer-nav, .footer-contact { display: flex; flex-direction: column; gap: 10px; }
.footer-nav a, .footer-contact a { color: #C9C1B6; transition: color .15s; width: fit-content; }
.footer-nav a:hover, .footer-contact a:hover { color: #fff; }
.footer-base { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 20px; font-size: .85rem; color: #8C857B; }
.footer-base p { margin: 0; }

/* ===================================================================
   Responsive
   =================================================================== */
@media (max-width: 1024px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .range-grid { grid-template-columns: repeat(2, 1fr); }
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-grid { gap: 36px; }
}
@media (max-width: 860px) {
  .main-nav, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .mobile-nav { display: none; flex-direction: column; gap: 4px; padding: 12px 24px 20px; background: var(--paper); border-bottom: 1px solid var(--border); }
  .mobile-nav.open { display: flex; }
  .mobile-nav a { padding: 12px 8px; border-radius: 8px; font-weight: 600; color: var(--ink-2); }
  .mobile-nav a:hover { background: var(--paper-2); }
  .mobile-nav .btn { margin-top: 6px; }

  /* Stacked single column: natural height from the top (no forced screen-fill
     so the image can't get pushed up under the sticky header and clipped),
     a compact gap, and the photo capped to a band so the copy sits high. */
  .hero-grid {
    grid-template-columns: 1fr; gap: 24px;
    min-height: 0; align-content: start;
    padding: clamp(20px, 3.5vh, 40px) 24px;
  }
  .hero-media { order: -1; }
  /* Keep the photo's natural 4/3 frame (drop the desktop tilt only). No
     max-height squash here: a capped height would stretch the frame wide and
     crop each photo by a different, uneven amount — so every slide keeps the
     same even crop it has on desktop. */
  .hero-slider { transform: none; }
  .hero-badge { left: auto; right: -8px; }

  /* Block flow (not grid) so the preview's sticky travel spans the whole form. */
  .customiser { display: block; }
  /* Keep the live key ring pinned just under the header while editing, so after
     a search you never have to scroll back up to see it. Faces sit side-by-side
     so the pinned bar stays short. */
  .cz-preview {
    position: sticky; top: 70px; z-index: 5;
    margin-bottom: 22px; padding: 14px 14px 12px; scroll-margin-top: 70px;
    box-shadow: 0 16px 30px -18px rgba(0,0,0,.7);
  }
  /* Higher specificity (.cz-preview …) so these beat the later base
     `.yk-faces { flex-direction: column }` / `.yk-face` rules below. */
  .cz-preview .yk-faces { flex-direction: row; gap: 12px; align-items: flex-start; }
  .cz-preview .yk-face { flex: 1; min-width: 0; }
  /* Keep the pinned bar compact + both faces even: drop the note + the
     per-face caption (the link field below gives the same feedback). */
  .cz-preview .cz-note,
  .cz-preview .yk-cap { display: none; }
  .cz-preview .yk-facelabel { text-align: center; padding-left: 0; }
  .cz-preview-actions { margin-top: 10px; }
  #czCanvas { max-width: 340px; }
  /* When the name field is focused/scrolled-to, keep it clear of the pinned
     preview bar (header 70 + bar ~172) so it never hides behind it. */
  #ykBiz, .yk-search { scroll-margin-top: 252px; }

  .order-grid, .contact-grid, .contact-cards { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 24px; }
  .section { padding: 64px 0; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .why-grid, .range-grid { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: repeat(3, 1fr); width: auto; }
  .hero-stats li { padding: 2px 12px; }
  .hero-stats li:first-child { padding-left: 0; }
  .work-grid { gap: 12px; }
  .field-row { grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
  /* Phones: tighter copy so the headline, lead, stats and the primary CTA
     still land high. The hero keeps its 4/3 frame (no max-height squash) so
     every photo crops the same, even amount as it does on desktop. */
  .hero-grid { gap: 16px; }
  .lead { font-size: 1.06rem; }
  .hero-stats { margin: 2px 0 16px; }
  .hero-actions { margin: 18px 0 14px; }
  .hero-actions .btn { flex: 1; }
  .container { padding: 0 18px; }
}

/* ===================================================================
   GLASS + MOTION UPGRADE  (frosted "transparent" UI + scroll reveals)
   =================================================================== */
:root {
  /* subtle frost — mostly solid with just a touch of transparency */
  --glass:        rgba(255,255,255,.82);
  --glass-strong: rgba(255,255,255,.90);
  --glass-border: rgba(255,255,255,.65);
  /* gentle top-edge highlight + soft hairline */
  --glass-edge:   inset 0 1px 0 rgba(255,255,255,.7);
  --glass-shadow: 0 6px 20px rgba(28,25,23,.08), 0 1px 4px rgba(28,25,23,.04);
  --glass-glow:   0 12px 30px rgba(133,77,14,.14), 0 3px 10px rgba(28,25,23,.07);
  --accent-glow:  0 6px 18px rgba(161,98,7,.28);
  --ease-glass:   cubic-bezier(.16,1,.3,1);
}

/* ---- drifting warm aurora behind everything ---- */
body { position: relative; isolation: isolate; }
body::before {
  content: ""; position: fixed; inset: -25vmax; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38vmax 38vmax at 12% 6%,  rgba(161,98,7,.10),  transparent 60%),
    radial-gradient(44vmax 44vmax at 80% 94%, rgba(231,200,155,.14), transparent 62%);
  filter: blur(8px);
  animation: aurora 40s ease-in-out infinite alternate;
}
@keyframes aurora {
  0%   { transform: translate3d(0,0,0)    scale(1);    }
  100% { transform: translate3d(-2%,2%,0) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

/* let the warm background bleed gently through tinted sections */
.section-alt {
  background: linear-gradient(180deg, rgba(243,239,233,.7), rgba(250,250,249,.6));
}

/* ---- sticky nav: light frost ---- */
.site-header {
  background: rgba(250,250,249,.85);
  -webkit-backdrop-filter: saturate(140%) blur(12px); backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid rgba(28,25,23,.07);
  box-shadow: 0 2px 10px rgba(28,25,23,.04);
}

/* ---- cards: clean with a hint of frost ---- */
.why-card, .product-card, .step, .contact-card, .cz-price {
  background: var(--glass);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-edge), var(--glass-shadow);
  position: relative;
  transition: transform .35s var(--ease-glass), box-shadow .35s var(--ease-glass), border-color .35s var(--ease-glass);
}
.product-card { background: var(--glass-strong); }

/* gentle lift on hover */
.why-card:hover, .product-card:hover, .contact-card:hover, .step:hover {
  transform: translateY(-4px);
  box-shadow: var(--glass-edge), var(--glass-glow);
  border-color: rgba(161,98,7,.28);
}

/* primary CTA gets a soft amber glow + lift */
.btn-accent {
  box-shadow: var(--accent-glow);
  transition: transform .3s var(--ease-glass), box-shadow .3s var(--ease-glass), background .25s;
}
.btn-accent:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(161,98,7,.38);
}

/* ghost button + price card — light frost */
.btn-ghost { background: rgba(255,255,255,.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: var(--glass-edge); }
.cz-price { box-shadow: var(--glass-edge), var(--glass-shadow); }

/* hero image — soft warm halo */
.hero-slider { border-color: rgba(255,255,255,.85); }
.hero-media::before {
  content: ""; position: absolute; inset: -8%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(161,98,7,.14), transparent 72%);
  filter: blur(24px);
}

/* order form — near-solid card */
.order-form {
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(28,25,23,.08);
}

/* ---- scroll-reveal initial states (only when JS is on) ---- */
.has-js .section-head,
.has-js .why-card,
.has-js .product-card,
.has-js .work-card,
.has-js .step,
.has-js .contact-card,
.has-js .cz-controls,
.has-js .cz-preview,
.has-js .hero-copy > *,
.has-js .hero-media {
  opacity: 0;
  transform: translateY(30px);
  will-change: opacity, transform;
}
@media (prefers-reduced-motion: reduce) {
  .has-js .section-head,
  .has-js .why-card, .has-js .product-card, .has-js .work-card,
  .has-js .step, .has-js .contact-card,
  .has-js .cz-controls, .has-js .cz-preview,
  .has-js .hero-copy > *, .has-js .hero-media {
    opacity: 1 !important; transform: none !important;
  }
}

/* ==========================================================================
   UNIFIED DESIGNER  (#design)
   One section that finds your logo, shows BOTH finished faces at once, lets
   you tweak it, and order — promoted from the old standalone "see yours" page.
   Relies on the shared .customiser / .cz-* styles above; only the bits unique
   to the both-faces + auto-finder + prominent style-picker live here.
   ========================================================================== */
.yk-tool { align-items: start; }

/* the two finished faces — shown landscape, stacked front-over-back, on the
   dark .cz-preview panel */
.yk-faces { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.yk-face { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.yk-face canvas {
  width: 100%; height: auto; border-radius: 18px; background: #1c1917;
  box-shadow: 0 18px 40px -20px rgba(0,0,0,.6);
  touch-action: none; /* let drag-to-move work without the page scrolling */
}
/* highlight the face the controls are currently editing */
.yk-face canvas.is-editing { box-shadow: 0 18px 40px -20px rgba(0,0,0,.6), 0 0 0 3px var(--accent); }
.yk-facelabel { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: #B7AFA4; padding-left: 2px; }
.yk-cap { font-size: .82rem; color: #D6CFC4; margin: -2px 0 0; min-height: 1.1em; text-align: center; }
.yk-cap.is-empty { color: #8C857B; font-style: italic; }

/* the one big "type your business name" input + button */
.yk-search { display: flex; gap: 10px; align-items: stretch; }
.yk-search input { flex: 1; min-width: 0; }
.yk-search .btn { flex: none; white-space: nowrap; }
#ykGo[disabled] { opacity: .6; cursor: default; }

/* progress / result / error line under the search */
.yk-status { font-size: .92rem; font-weight: 500; margin: 0; padding: 11px 14px; border-radius: 12px; display: flex; align-items: center; gap: 10px; }
.yk-status.loading { color: var(--ink-2); background: #F3EEE6; }
.yk-status.ok      { color: #1f5132; background: #E8F3EC; }
.yk-status.info    { color: #5b4a2a; background: #F6EFDD; }
.yk-status.error   { color: #7a2b1f; background: #F7E7E2; }
.yk-status.loading::before {
  content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid #CDC2B0; border-top-color: var(--accent); animation: yk-spin .7s linear infinite;
}
@keyframes yk-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .yk-status.loading::before { animation: none; } }

/* live search progress bar — climbs while /api/lookup runs, naming each step */
.yk-progress { margin: 0; display: flex; flex-direction: column; gap: 9px; padding: 13px 15px; border-radius: 12px; background: #F3EEE6; }
.yk-progress[hidden] { display: none; }
.yk-progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.yk-progress-msg { font-size: .92rem; font-weight: 600; color: var(--ink-2); }
.yk-progress-pct { font-size: .9rem; font-weight: 700; color: var(--accent); flex: none; font-variant-numeric: tabular-nums; }
.yk-progress-track { height: 9px; border-radius: 999px; background: #E3D8C7; overflow: hidden; }
.yk-progress-fill { height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent), #E0B25E); transition: width .35s cubic-bezier(.4, 0, .2, 1); }
@media (prefers-reduced-motion: reduce) { .yk-progress-fill { transition: none; } }

/* prominent "pick one of the two key rings" picker */
.yk-style { margin: 0; padding: 0; border: 0; }
.yk-style > legend { font-family: var(--font-head, "Fraunces", serif); font-weight: 600; font-size: 1.02rem; color: var(--ink); padding: 0; margin: 0 0 12px; }
.yk-styles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.yk-style-card {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 10px; border-radius: 16px; cursor: pointer;
  background: var(--card); border: 2px solid var(--border);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.yk-style-card input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.yk-style-thumb { display: block; border-radius: 10px; overflow: hidden; background: #efe7da; aspect-ratio: 1000 / 470; }
.yk-style-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yk-style-meta { display: flex; flex-direction: column; gap: 1px; padding: 0 2px 2px; }
.yk-style-name { font-weight: 700; font-size: .96rem; color: var(--ink); line-height: 1.2; }
.yk-style-sub { font-size: .78rem; color: var(--muted-text); }
.yk-style-tick {
  position: absolute; top: 9px; right: 9px; color: #fff; background: var(--accent);
  border-radius: 50%; padding: 4px; opacity: 0; transform: scale(.5);
  transition: opacity .15s ease, transform .15s ease; box-shadow: 0 4px 10px -3px rgba(0,0,0,.45);
}
.yk-style-card:hover { border-color: var(--border-2); transform: translateY(-1px); }
.yk-style-card:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); box-shadow: 0 12px 26px -16px rgba(161,98,7,.6); }
.yk-style-card:has(input:checked) .yk-style-tick { opacity: 1; transform: scale(1); }
.yk-style-card:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .yk-style-card, .yk-style-tick { transition: none; }
  .yk-style-card:hover { transform: none; }
}

/* reassurance row */
.yk-assure { list-style: none; padding: 0; margin: 4px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
.yk-assure li { display: flex; align-items: flex-start; gap: 8px; font-size: .9rem; color: var(--ink-2); font-weight: 500; }
.yk-assure svg { color: var(--accent); flex: none; margin-top: 2px; }

/* the controls that appear after the first look */
.yk-more { display: flex; flex-direction: column; gap: 26px; }
.yk-more[hidden] { display: none; }

@media (max-width: 560px) {
  .yk-faces { gap: 10px; }
  .yk-assure { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .yk-search { flex-direction: column; }
  .yk-search .btn { width: 100%; }
}

/* ---------- buy a ready pack (Stripe) ---------- */
.pack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.pack-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 32px 28px; box-shadow: var(--shadow-sm);
}
.pack-feature { border-color: var(--accent); background: linear-gradient(180deg, var(--accent-tint), var(--card) 70%); box-shadow: var(--shadow-md); }
.pack-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--accent); color: #fff; font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: 6px 14px;
  border-radius: 999px; box-shadow: var(--shadow-sm); white-space: nowrap;
}
.pack-head { margin-bottom: 14px; }
.pack-name { font-size: 1.5rem; margin: 0 0 2px; }
.pack-qty { color: var(--ink-2); font-weight: 500; margin: 0; }
.pack-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; }
.pack-amount { font-family: var(--font-display); font-weight: 700; font-size: 2.2rem; color: var(--ink); line-height: 1; }
.pack-each { color: var(--muted-text); font-weight: 600; font-size: .95rem; }
.pack-ticks { margin: 0 0 24px; }
.pack-ticks li { font-weight: 500; }
.pack-buy { margin-top: auto; }
.pack-foot { display: flex; align-items: center; justify-content: center; gap: 6px; text-align: center; color: var(--muted-text); font-size: .82rem; margin: 12px 0 0; }
.pack-foot svg { flex: none; color: var(--irish-green); }
.pack-tier { margin-bottom: 44px; }
.pack-tier:last-of-type { margin-bottom: 0; }
.pack-tier-head { text-align: center; margin: 0 0 22px; }
.pack-tier-name { font-size: 1.35rem; margin: 0 0 4px; }
.pack-tier-flag { display: inline-block; vertical-align: middle; margin-left: 8px; font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--irish-green); padding: 3px 9px; border-radius: 999px; }
.pack-tier-sub { color: var(--ink-2); margin: 0; }
.pack-note { text-align: center; color: var(--ink-2); max-width: 640px; margin: 30px auto 0; font-size: .98rem; }
@media (max-width: 860px) {
  .pack-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
  .pack-feature { order: -1; }
}

/* ---------- thank-you page ---------- */
.ty-wrap {
  min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: 56px 20px;
  background: radial-gradient(120% 120% at 50% 0%, var(--accent-tint), var(--paper) 60%);
}
.ty-inner {
  max-width: 620px; width: 100%; text-align: center; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 48px 40px; box-shadow: var(--shadow-lg);
}
.ty-check {
  width: 64px; height: 64px; border-radius: 50%; background: var(--irish-green);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 22px; box-shadow: var(--shadow-md);
}
.ty-check svg { color: #fff; }
.ty-inner h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); margin-bottom: .35em; }
.ty-lead { color: var(--ink-2); font-size: 1.08rem; margin: 0 auto 28px; max-width: 46ch; }
.ty-steps {
  list-style: none; counter-reset: ty; padding: 0; margin: 0 0 28px;
  display: flex; flex-direction: column; gap: 12px; text-align: left;
}
.ty-steps li {
  position: relative; counter-increment: ty; background: var(--paper);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px 16px 58px; color: var(--ink-2);
}
.ty-steps li::before {
  content: counter(ty); position: absolute; left: 16px; top: 18px;
  width: 28px; height: 28px; border-radius: 50%; background: var(--accent);
  color: #fff; font-family: var(--font-display); font-weight: 700;
  display: flex; align-items: center; justify-content: center; font-size: .95rem;
}
.ty-steps li strong { color: var(--ink); }
.ty-fine { color: var(--muted-text); font-size: .9rem; margin: 0 auto 28px; max-width: 48ch; }
.ty-fine a { color: var(--accent-dk); font-weight: 600; text-decoration: underline; }
@media (max-width: 480px) {
  .ty-inner { padding: 36px 24px; }
}

/* ==========================================================================
   HERO CTA  (buttons + free-delivery line, directly under the slideshow)
   ========================================================================== */
.hero-cta { margin-top: 40px; }
.hero-cta-row { display: flex; gap: 12px; }
.hero-cta-row .btn { flex: 1 1 0; justify-content: center; }
.hero-cta-note {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 14px 0 0; font-weight: 600; font-size: .96rem; color: var(--ink-2);
}
.hero-cta-note svg { color: var(--accent); flex: none; }

/* ==========================================================================
   ORDER KEY RINGS  (#order-ways) — three ways to order
   ========================================================================== */
.order-ways-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  max-width: 960px; margin: 0 auto;
}
.order-way {
  display: flex; flex-direction: column; text-align: center;
  background: #fff; border: 1px solid var(--border-2);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: 30px 26px; transition: box-shadow .25s ease, transform .25s ease;
}
.order-way:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.order-way-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin: 0 auto 16px;
  border-radius: 50%; background: var(--accent-tint); color: var(--accent-dk);
}
.order-way h3 { font-size: 1.18rem; margin: 0 0 8px; }
.order-way p { color: var(--ink-2); margin: 0 0 22px; line-height: 1.5; }
.order-way .btn { margin-top: auto; }

@media (max-width: 860px) {
  .order-ways-grid { grid-template-columns: 1fr; max-width: 440px; }
}
@media (max-width: 560px) {
  .hero-cta-row { flex-direction: column; }
}