.cf-shelf,
.cf-control {
  --cf-ink: #592203;
  --cf-accent: #993800;
  --cf-paper: #fffaf1;
  --cf-sand: #f0e3ca;
  --cf-line: #dfcbb3;
  --cf-muted: #76523e;
  --cf-gold: #f1be53;
}

.cf-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 13px;
  border: 1px solid var(--cf-line);
  border-radius: 5px;
  background: var(--cf-paper);
  color: var(--cf-ink);
  font: 600 13px/1.3 'Onest', sans-serif;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.cf-control svg,
.cf-empty-mark svg { fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linejoin: round; }
.cf-control svg { flex: none; }
.cf-control:hover { background: var(--cf-sand); color: var(--cf-ink); text-decoration: none; }
.cf-control[aria-pressed="true"] { border-color: #d7ad89; background: #f7e8d2; color: var(--cf-accent); }
.cf-control[aria-pressed="true"] svg { fill: currentColor; }
.cf-control[aria-busy="true"] { cursor: wait; opacity: .66; }
.cf-control:focus-visible,
.cf-shelf a:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 3px; }
.cf-control--catalog { position: absolute; z-index: 3; top: 10px; right: 10px; width: 44px; padding: 0; }
.cf-control--product { width: 100%; margin-top: 12px; }
.cf-control--shelf { background: transparent; }
.cf-control--shelf[aria-pressed="true"] { background: transparent; border-color: var(--cf-line); color: var(--cf-ink); }
.cf-control--shelf[aria-pressed="true"] svg { fill: none; }
.cf-control--shelf[aria-pressed="true"]:hover { background: var(--cf-sand); }

.cf-shelf {
  box-sizing: border-box;
  width: min(100%, 1120px);
  margin-inline: auto;
  padding-block: clamp(36px, 7vw, 100px);
  color: var(--cf-ink);
  font-family: 'Onest', sans-serif;
}

.cf-heading { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: clamp(26px, 4vw, 52px); }
.cf-heading h1, .cf-empty h2, .cf-item h2 { margin: 0; color: inherit; font-family: 'Lora', Georgia, serif; font-weight: 400; }
.cf-heading h1 { font-size: clamp(46px, 7vw, 82px); line-height: 1.03; letter-spacing: -.045em; }
.cf-kicker, .cf-total { margin: 0 0 12px; color: var(--cf-accent); font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.cf-intro, .cf-empty p { margin: 12px 0 0; color: var(--cf-muted); line-height: 1.55; }
.cf-link, .cf-cta { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 12px; color: var(--cf-ink); font-size: 13px; font-weight: 650; }
.cf-link { text-decoration: underline; text-underline-offset: 4px; }
.cf-cta { padding: 8px 15px; border-radius: 5px; background: var(--cf-gold); text-decoration: none; }
.cf-cta:hover { background: #ffd47f; color: var(--cf-ink); text-decoration: none; }
.cf-link:hover { color: var(--cf-accent); }

.cf-empty {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: clamp(18px, 4vw, 42px);
  padding: clamp(22px, 5vw, 60px);
  border: 1px solid var(--cf-line);
  border-radius: 6px;
  background: var(--cf-paper);
}
.cf-empty-mark { display: grid; place-items: center; width: 70px; aspect-ratio: 1; border-radius: 50%; background: var(--cf-sand); color: var(--cf-accent); }
.cf-empty h2 { font-size: clamp(26px, 4vw, 38px); line-height: 1.15; }
.cf-empty p { max-width: 49ch; }
.cf-empty-actions { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 22px; }

.cf-items { display: grid; gap: 10px; padding: 0; margin: 0; list-style: none; }
.cf-item {
  display: grid;
  grid-template-columns: clamp(104px, 15vw, 174px) minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(12px, 2vw, 25px);
  padding: 10px clamp(10px, 2vw, 20px) 10px 10px;
  border: 1px solid var(--cf-line);
  border-radius: 6px;
  background: var(--cf-paper);
}
.cf-item-image { display: block; overflow: hidden; border-radius: 3px; background: var(--cf-sand); }
.cf-item-image img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cf-item h2 { font-size: clamp(20px, 2.7vw, 30px); line-height: 1.15; overflow-wrap: anywhere; }
.cf-item h2 a { color: inherit; }
.cf-item-copy p { margin: 6px 0 0; }
.cf-item-category, .cf-item-stock, .cf-item-price span { font-size: 12px; color: var(--cf-muted); }
.cf-item-copy .cf-item-category { margin: 0 0 5px; }
.cf-item-price { font-weight: 650; }
.cf-item-price span { font-weight: 400; }
.cf-item-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cf-pagination { margin-top: 24px; }

.cf-status { position: fixed; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.cf-status--visible {
  z-index: 1100;
  inset: auto 16px max(88px, env(safe-area-inset-bottom)) auto;
  width: min(340px, calc(100% - 32px));
  height: auto;
  box-sizing: border-box;
  padding: 12px 16px;
  border-radius: 5px;
  background: #592203;
  color: #fffaf1;
  clip-path: none;
}

@media (max-width: 720px) {
  .cf-item-actions { grid-column: 1 / -1; }
  .cf-item { grid-template-columns: clamp(82px, 26vw, 126px) minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .cf-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
  .cf-empty { grid-template-columns: minmax(0, 1fr); }
  .cf-empty-mark { width: 53px; }
  .cf-empty-mark svg { width: 30px; }
}