/* =====================================================================
   zChocolat Design System — Adapted for PrestaShop 9 / Hummingbird
   Source: prototype colors_and_type.css (v5)
   ===================================================================== */

/* ── Self-hosted brand fonts ────────────────────────────────────────── */

@font-face {
  font-family: 'AGaramond';
  src: url('../fonts/agaramond-regular-webfont.woff2') format('woff2'),
       url('../fonts/agaramond-regular-webfont.woff')  format('woff'),
       url('../fonts/agaramond-regular-webfont.ttf')   format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'AGaramond';
  src: url('../fonts/agaramond-italic-webfont.woff')   format('woff'),
       url('../fonts/agaramond-italic-webfont.ttf')    format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'AGaramond';
  src: url('../fonts/agaramond-semibold-webfont.woff') format('woff'),
       url('../fonts/agaramond-semibold-webfont.ttf')  format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'AGaramond';
  src: url('../fonts/agaramond-semibolditalic-webfont.woff') format('woff'),
       url('../fonts/agaramond-semibolditalic-webfont.ttf')  format('truetype');
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'AGaramond';
  src: url('../fonts/agaramond-bold-webfont.woff')     format('woff'),
       url('../fonts/agaramond-bold-webfont.ttf')      format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'AGaramond';
  src: url('../fonts/agaramond-bolditalic-webfont.woff') format('woff'),
       url('../fonts/agaramond-bolditalic-webfont.ttf')  format('truetype');
  font-weight: 700; font-style: italic; font-display: swap;
}

@font-face {
  font-family: 'Isidora';
  src: url('../fonts/Isidora-Medium.woff2') format('woff2'),
       url('../fonts/Isidora-Medium.ttf')   format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Isidora';
  src: url('../fonts/Isidora-SemiBold.woff2') format('woff2'),
       url('../fonts/Isidora-SemiBold.ttf')   format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}

@font-face {
  font-family: '2420';
  src: url('../fonts/2420-webfont.woff2') format('woff2'),
       url('../fonts/2420-webfont.woff')  format('woff'),
       url('../fonts/2420-webfont.ttf')   format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ── CSS Custom Properties (Design Tokens) ──────────────────────────── */

:root {
  /* ── Palette (aligned with checkout-v8 prototype) ──────────────── */
  --zchk-ink:             #0A0A0A;
  --zchk-graphite:        #1C1C1C;
  --zchk-slate:           #1A1A1A;
  --zchk-stone:           #2E2E2E;
  --zchk-ash:             #4A4A4A;
  --zchk-silver:          #C7C7C7;
  --zchk-pearl:           #E8E8E8;
  --zchk-mist:            #F2F2F2;
  --zchk-paper:           #F8F8F8;
  --zchk-bone:            #FCFCFC;
  --zchk-white:           #FFFFFF;

  /* Functional */
  --zchk-success:         #2A7F5F;
  --zchk-warning:         #8A6A1F;
  --zchk-danger:          #8B1A1A;

  /* ── Rules / Borders ───────────────────────────────────────────── */
  --zchk-rule:            rgba(10, 10, 10, 0.10);
  --zchk-rule-strong:     rgba(10, 10, 10, 0.22);

  /* ── Semantic ──────────────────────────────────────────────────── */
  --zchk-primary:         var(--zchk-ink);
  --zchk-text:            var(--zchk-ink);
  --zchk-text-secondary:  var(--zchk-stone);
  --zchk-text-muted:      var(--zchk-ash);
  --zchk-bg:              var(--zchk-white);
  --zchk-bg-subtle:       var(--zchk-paper);
  --zchk-bg-raised:       var(--zchk-mist);
  --zchk-border:          var(--zchk-rule);
  --zchk-border-strong:   var(--zchk-rule-strong);
  --zchk-error:           var(--zchk-danger);

  /* ── Typography ────────────────────────────────────────────────── */
  --zchk-font-display:    'Cormorant Garamond', 'AGaramond', 'Adobe Garamond Pro', 'EB Garamond', Georgia, serif;
  --zchk-font-serif:      'Cormorant Garamond', 'AGaramond', 'Adobe Garamond Pro', 'EB Garamond', Georgia, 'Times New Roman', serif;
  --zchk-font-sans:       'Jost', 'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --zchk-font-utility:    'Manrope', 'Poppins', 'Isidora', 'Helvetica Neue', sans-serif;
  --zchk-font-numeric:    'Manrope', '2420', 'Poppins', 'Isidora', 'Helvetica Neue', sans-serif;

  /* Aliases */
  --zchk-font-heading:    var(--zchk-font-display);
  --zchk-font-body:       var(--zchk-font-sans);

  /* Scale */
  --zchk-fs-display-1:    clamp(48px, 6vw, 88px);
  --zchk-fs-display:      clamp(36px, 4.5vw, 64px);
  --zchk-fs-h1:           clamp(32px, 3.5vw, 48px);
  --zchk-fs-h2:           clamp(26px, 2.8vw, 36px);
  --zchk-fs-h3:           clamp(20px, 2vw, 26px);
  --zchk-fs-h4:           18px;
  --zchk-fs-body-lg:      18px;
  --zchk-fs-body:         16px;
  --zchk-fs-small:        14px;
  --zchk-fs-xs:           12px;
  --zchk-fs-eyebrow:      11px;

  --zchk-lh-tight:        1.1;
  --zchk-lh-display:      1.15;
  --zchk-lh-heading:      1.25;
  --zchk-lh-body:         1.6;
  --zchk-lh-loose:        1.75;

  --zchk-tracking-display: 0.02em;
  --zchk-tracking-caps:    0.22em;
  --zchk-tracking-eyebrow: 0.32em;
  --zchk-tracking-body:    0;

  /* ── Spacing (8px base) ─────────────────────────────────────────── */
  --zchk-s-1: 4px;  --zchk-s-2: 8px;  --zchk-s-3: 12px; --zchk-s-4: 16px;
  --zchk-s-5: 24px; --zchk-s-6: 32px; --zchk-s-7: 48px; --zchk-s-8: 64px;
  --zchk-s-9: 96px; --zchk-s-10: 128px;

  /* ── Radii / Shadows ────────────────────────────────────────────── */
  --zchk-radius-none: 0;
  --zchk-radius-xs:   2px;
  --zchk-radius-sm:   4px;
  --zchk-radius-md:   8px;
  --zchk-radius-lg:   12px;
  --zchk-radius-pill: 999px;

  --zchk-shadow-xs:   0 1px 2px rgba(45, 24, 16, 0.06);
  --zchk-shadow-sm:   0 2px 8px rgba(45, 24, 16, 0.06);
  --zchk-shadow-md:   0 16px 40px rgba(45, 24, 16, 0.08);
  --zchk-shadow-lg:   0 24px 64px rgba(45, 24, 16, 0.12);

  /* ── Motion ─────────────────────────────────────────────────────── */
  --zchk-ease:         cubic-bezier(0.22, 0.61, 0.36, 1);
  --zchk-duration-fast: 180ms;
  --zchk-duration-base: 320ms;
  --zchk-duration-slow: 600ms;
}

/* ── Typographic utility classes ────────────────────────────────────── */

.z-eyebrow {
  font-family: var(--zchk-font-sans);
  font-size: var(--zchk-fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--zchk-tracking-eyebrow);
  text-transform: uppercase;
  font-feature-settings: 'ss01', 'tnum';
  color: var(--zchk-stone);
}

.z-display {
  font-family: var(--zchk-font-display);
  font-weight: 400;
  font-size: var(--zchk-fs-display);
  line-height: var(--zchk-lh-display);
  letter-spacing: var(--zchk-tracking-display);
  color: var(--zchk-ink);
}

.z-caps {
  font-family: var(--zchk-font-sans);
  font-weight: 500;
  letter-spacing: var(--zchk-tracking-caps);
  text-transform: uppercase;
  font-size: var(--zchk-fs-small);
}

.z-price {
  font-family: var(--zchk-font-numeric);
  font-weight: 500;
  letter-spacing: 0.04em;
  font-feature-settings: 'tnum';
}

.z-meta {
  font-family: var(--zchk-font-sans);
  font-size: var(--zchk-fs-xs);
  letter-spacing: 0.04em;
  color: var(--zchk-text-muted);
}

/* ── Alpine.js cloak ───────────────────────────────────────────────── */

[x-cloak] { display: none !important; }

/* ── Cart Sidebar Drawer ───────────────────────────────────────────── */

.zchk-drawer {
  position: fixed;
  inset: 0;
  z-index: 1060;
  display: flex;
  justify-content: flex-end;
}

.zchk-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 10, 0.40);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.zchk-drawer__panel {
  position: relative;
  width: min(480px, 94vw);
  height: 100%;
  background: var(--zchk-bg);
  box-shadow: var(--zchk-shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Backdrop transitions */
.zchk-backdrop-enter { transition: opacity var(--zchk-duration-base) var(--zchk-ease); }
.zchk-backdrop-start { opacity: 0; }
.zchk-backdrop-end   { opacity: 1; }
.zchk-backdrop-leave  { transition: opacity var(--zchk-duration-base) var(--zchk-ease); }

/* Panel slide transitions */
.zchk-panel-enter { transition: transform var(--zchk-duration-base) var(--zchk-ease); }
.zchk-panel-start { transform: translateX(100%); }
.zchk-panel-end   { transform: translateX(0); }
.zchk-panel-leave  { transition: transform var(--zchk-duration-base) var(--zchk-ease); }

/* Body scroll lock when drawer is open */
body.zchk-drawer-open {
  overflow: hidden;
}

/* ── Drawer Header ─────────────────────────────────────────────────── */

.zchk-drawer__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--zchk-s-4);
  padding: 40px 40px 24px;
  border-bottom: 1px solid var(--zchk-pearl);
  flex-shrink: 0;
}

.zchk-drawer__header-text {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.zchk-drawer__eyebrow {
  font-family: var(--zchk-font-sans);
  font-size: var(--zchk-fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--zchk-tracking-eyebrow);
  text-transform: uppercase;
  font-feature-settings: 'ss01', 'tnum';
  color: var(--zchk-ink);
  margin: 0 0 10px;
}

.zchk-drawer__title,
.zchk-drawer__piece-count {
  font-family: var(--zchk-font-display);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: var(--zchk-tracking-display);
  color: var(--zchk-ink);
  margin: 0;
}

.zchk-drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--zchk-border-strong);
  border-radius: var(--zchk-radius-none);
  background: transparent;
  color: var(--zchk-ink);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--zchk-duration-fast) var(--zchk-ease),
              color var(--zchk-duration-fast) var(--zchk-ease);
}

.zchk-drawer__close:hover {
  background: var(--zchk-bg-raised);
  color: var(--zchk-ink);
}

/* ── Drawer body (scroll / empty stage) ─────────────────────────────── */

.zchk-drawer__main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.zchk-drawer__panel--empty .zchk-drawer__main {
  justify-content: center;
}

/* ── Drawer Loading ────────────────────────────────────────────────── */

.zchk-drawer__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--zchk-s-8) var(--zchk-s-5);
  color: var(--zchk-text-muted);
  font-family: var(--zchk-font-sans);
  font-size: var(--zchk-fs-small);
}

.zchk-drawer__loading span::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 8px;
  border: 2px solid var(--zchk-silver);
  border-top-color: var(--zchk-text);
  border-radius: 50%;
  animation: zchk-spin 0.6s linear infinite;
}

@keyframes zchk-spin {
  to { transform: rotate(360deg); }
}

/* ── Drawer Empty State (checkout-v8 maquette) ─────────────────────── */

.zchk-drawer__empty-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 40px 64px;
  text-align: center;
  gap: 40px;
}

.zchk-drawer__empty-poem {
  font-family: var(--zchk-font-display);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--zchk-ink);
  margin: 0;
  max-width: 20rem;
}

.zchk-drawer__empty-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  padding: 14px 36px;
  background: var(--zchk-ink);
  color: var(--zchk-white);
  border: none;
  font-family: var(--zchk-font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--zchk-duration-fast) var(--zchk-ease);
}

.zchk-drawer__empty-cta:hover {
  background: var(--zchk-graphite);
  color: var(--zchk-white);
}

/* ── Product Lines ─────────────────────────────────────────────────── */

.zchk-drawer__items {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--zchk-s-3) 0;
}

.zchk-drawer__items::-webkit-scrollbar { width: 4px; }
.zchk-drawer__items::-webkit-scrollbar-track { background: transparent; }
.zchk-drawer__items::-webkit-scrollbar-thumb {
  background: var(--zchk-silver);
  border-radius: var(--zchk-radius-pill);
}

.zchk-drawer__item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--zchk-s-4);
  padding: var(--zchk-s-5) var(--zchk-s-6);
  border-bottom: 1px solid var(--zchk-rule);
}

.zchk-drawer__item:last-child { border-bottom: none; }

.zchk-drawer__item-img {
  width: 80px;
  height: 80px;
  border-radius: var(--zchk-radius-sm);
  overflow: hidden;
  background: var(--zchk-bg-subtle);
  flex-shrink: 0;
  display: block;
}

.zchk-drawer__item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.zchk-drawer__item-img-ph {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--zchk-bg-subtle) 0%, var(--zchk-rule) 100%);
}

.zchk-drawer__item-body {
  display: flex;
  flex-direction: column;
  gap: var(--zchk-s-3);
  min-width: 0;
}

.zchk-drawer__item-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--zchk-s-3);
}

.zchk-drawer__item-meta {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.zchk-drawer__item-ref {
  font-family: var(--zchk-font-utility);
  font-size: var(--zchk-fs-small);
  font-weight: 500;
  letter-spacing: var(--zchk-tracking-caps);
  text-transform: uppercase;
  color: var(--zchk-stone);
}

.zchk-drawer__item-name {
  font-family: var(--zchk-font-serif);
  font-size: var(--zchk-fs-body-lg);
  font-weight: 400;
  color: var(--zchk-ink);
  line-height: var(--zchk-lh-heading);
  text-decoration: none;
}

.zchk-drawer__item-name:hover { color: var(--zchk-graphite); }

.zchk-drawer__item-variant {
  font-family: var(--zchk-font-sans);
  font-size: var(--zchk-fs-small);
  color: var(--zchk-stone);
  letter-spacing: var(--zchk-tracking-body);
}

.zchk-drawer__custos {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: var(--zchk-s-2);
}

.zchk-drawer__custo-line {
  font-family: var(--zchk-font-serif);
  font-size: var(--zchk-fs-small);
  font-style: italic;
  color: var(--zchk-text-secondary);
  line-height: 1.5;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35em;
}

.zchk-drawer__custo-value {
  font-style: normal;
  color: var(--zchk-text-primary, inherit);
  overflow-wrap: anywhere;
}

.zchk-drawer__custo-check {
  font-family: var(--zchk-font-sans);
  font-size: 0.85em;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
  color: var(--zchk-success);
  letter-spacing: 0;
  text-transform: none;
}

.zchk-drawer__msg-card-prompt {
  margin: var(--zchk-s-2) 0 0;
  font-family: var(--zchk-font-serif);
  font-size: var(--zchk-fs-small);
  font-style: italic;
  color: var(--zchk-text-secondary);
  line-height: 1.5;
}

.zchk-drawer__msg-card-link {
  font: inherit;
  font-style: italic;
  color: var(--zchk-ink);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color var(--zchk-duration-fast) var(--zchk-ease);
}

.zchk-drawer__msg-card-link:hover {
  color: var(--zchk-text-secondary);
}

/* ── Quantity Controls ─────────────────────────────────────────────── */

.zchk-drawer__item-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.zchk-drawer__qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--zchk-border);
  border-radius: var(--zchk-radius-sm);
  overflow: hidden;
}

.zchk-drawer__qty button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--zchk-ink);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--zchk-duration-fast) var(--zchk-ease);
  user-select: none;
}

.zchk-drawer__qty button:hover:not(:disabled) {
  background: var(--zchk-bg-raised);
}

.zchk-drawer__qty button:disabled {
  color: var(--zchk-text-muted);
  cursor: not-allowed;
}

.zchk-drawer__qty span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  font-family: var(--zchk-font-numeric);
  font-size: var(--zchk-fs-small);
  font-weight: 500;
  font-feature-settings: 'tnum';
  color: var(--zchk-ink);
}

.zchk-drawer__item-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--zchk-font-utility);
  font-size: var(--zchk-fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--zchk-tracking-caps);
  text-transform: uppercase;
}

.zchk-drawer__action {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--zchk-stone);
  cursor: pointer;
  text-decoration: none;
  transition: color var(--zchk-duration-fast) var(--zchk-ease);
}

.zchk-drawer__action:hover { color: var(--zchk-ink); }

.zchk-drawer__action--danger:hover { color: var(--zchk-danger); }

.zchk-drawer__action:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.zchk-drawer__action-sep {
  color: #4A4A4A;
  user-select: none;
}

/* ── Item Price ────────────────────────────────────────────────────── */

.zchk-drawer__item-price {
  font-family: var(--zchk-font-sans);
  font-size: 15px;
  font-weight: 500;
  font-feature-settings: 'ss01', 'tnum';
  letter-spacing: 0.02em;
  color: var(--zchk-ink);
  white-space: nowrap;
}

/* ── Drawer Footer (Totals + CTA) ─────────────────────────────────── */

.zchk-drawer__footer {
  flex-shrink: 0;
  border-top: 1px solid var(--zchk-rule-strong);
  padding: var(--zchk-s-5) var(--zchk-s-6) var(--zchk-s-5);
  background: var(--zchk-white);
}

.zchk-drawer__totals {
  display: flex;
  flex-direction: column;
  gap: var(--zchk-s-2);
  margin-bottom: var(--zchk-s-4);
}

.zchk-drawer__total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--zchk-font-sans);
  font-size: var(--zchk-fs-small);
  font-feature-settings: 'ss01', 'tnum';
  letter-spacing: 0.02em;
  color: var(--zchk-stone);
}

.zchk-drawer__total-row span:last-child {
  font-family: var(--zchk-font-sans);
  font-feature-settings: 'ss01', 'tnum';
  font-size: var(--zchk-fs-small);
  letter-spacing: 0.02em;
  color: var(--zchk-ink);
}

.zchk-drawer__grand-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--zchk-s-4) 0;
  border-top: 1px solid var(--zchk-rule-strong);
  margin-bottom: var(--zchk-s-5);
}

.zchk-drawer__grand-total > span:first-child {
  font-family: var(--zchk-font-sans);
  font-size: var(--zchk-fs-small);
  font-weight: 500;
  letter-spacing: var(--zchk-tracking-caps);
  text-transform: uppercase;
  font-feature-settings: 'ss01', 'tnum';
  color: var(--zchk-ink);
}

.zchk-drawer__grand-total-value {
  display: inline-flex;
  align-items: baseline;
}

.zchk-drawer__grand-total-amount {
  font-family: var(--zchk-font-display);
  font-size: 26px;
  font-feature-settings: 'ss01', 'tnum';
  color: var(--zchk-ink);
}

.zchk-drawer__grand-total-currency {
  font-family: var(--zchk-font-sans);
  font-size: 13px;
  font-feature-settings: 'ss01', 'tnum';
  letter-spacing: 0.12em;
  color: var(--zchk-stone);
  margin-left: 4px;
}

/* ── CTA Button ────────────────────────────────────────────────────── */

.zchk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--zchk-s-2);
  padding: var(--zchk-s-3) var(--zchk-s-5);
  border: 1px solid transparent;
  border-radius: var(--zchk-radius-sm);
  font-family: var(--zchk-font-sans);
  font-size: var(--zchk-fs-small);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--zchk-duration-fast) var(--zchk-ease),
              color var(--zchk-duration-fast) var(--zchk-ease),
              border-color var(--zchk-duration-fast) var(--zchk-ease);
  user-select: none;
}

.zchk-btn--primary {
  background: var(--zchk-ink);
  color: var(--zchk-white);
  border-color: var(--zchk-ink);
}

.zchk-btn--primary:hover {
  background: var(--zchk-graphite);
  border-color: var(--zchk-graphite);
  color: var(--zchk-white);
}

.zchk-drawer__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px;
  background: var(--zchk-ink);
  color: var(--zchk-white);
  border: none;
  font-family: var(--zchk-font-sans);
  font-size: var(--zchk-fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--zchk-duration-base) var(--zchk-ease);
}

.zchk-drawer__cta:hover {
  background: var(--zchk-slate);
  color: var(--zchk-white);
}

.zchk-drawer__cta svg {
  stroke: var(--zchk-white);
  transition: transform var(--zchk-duration-fast) var(--zchk-ease);
}

.zchk-drawer__cta:hover svg {
  transform: translateX(3px);
}

.zchk-drawer__reassurance {
  margin: var(--zchk-s-3) 0 0;
  font-family: var(--zchk-font-utility);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: var(--zchk-tracking-eyebrow);
  text-transform: uppercase;
  text-align: center;
  color: var(--zchk-ash);
}

/* ── Header Icons (account + cart) ────────────────────────────────── */

.zchk-account-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--zchk-text);
  transition: color var(--zchk-duration-fast) var(--zchk-ease);
  text-decoration: none;
}

.zchk-account-icon:hover {
  color: var(--zchk-text-secondary);
}

.zchk-account-icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  flex-shrink: 0;
}

.zchk-account-name {
  font-family: var(--zchk-font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  margin-left: 4px;
}

@media (max-width: 767px) {
  .zchk-account-name { display: none; }
}

.zchk-cart-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--zchk-text);
  transition: color var(--zchk-duration-fast) var(--zchk-ease);
}

.zchk-cart-icon:hover {
  color: var(--zchk-text-secondary);
}

.zchk-cart-icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
}

.zchk-cart-badge {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--zchk-radius-pill);
  background: var(--zchk-ink);
  color: var(--zchk-white);
  font-family: var(--zchk-font-numeric);
  font-size: 10px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
}

/* ── Responsive ────────────────────────────────────────────────────── */

@media (max-width: 480px) {
  .zchk-drawer__panel { width: 100vw; }
  .zchk-drawer__header {
    padding: 32px 24px 20px;
  }
  .zchk-drawer__empty-stage {
    padding: 32px 24px 48px;
    gap: 32px;
  }
  .zchk-drawer__empty-poem {
    font-size: 24px;
  }
  .zchk-drawer__title,
  .zchk-drawer__piece-count {
    font-size: 28px;
  }
  .zchk-drawer__item,
  .zchk-drawer__footer { padding-left: var(--zchk-s-4); padding-right: var(--zchk-s-4); }

  .zchk-drawer__item { grid-template-columns: 64px 1fr; }
  .zchk-drawer__item-img { width: 64px; height: 64px; }
}