/* Fonts bundled locally so the site works without internet (SIL Open Font License). */
@font-face{font-family:'Young Serif';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/young-serif-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Young Serif';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/young-serif-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/figtree-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/figtree-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Figtree';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/figtree-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Figtree';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/figtree-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Figtree';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/figtree-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Figtree';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/figtree-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ---------- tokens ---------- */
/* The shop is a ștergar worked in filet crochet: six thread colours, nothing in between. */
:root {
  --wool: #2B1745;        /* deep violet cloth, the ground */
  --wool-2: #3B2262;      /* raised band of the same wool */
  --violet: #8E5CD0;      /* violet thread: petals, stitch lines (decorative only on wool) */
  --lilac: #D7C4F0;       /* lilac thread: body text and filet bands on wool */
  --linen: #FBF6FF;       /* linen thread: headings, labels */
  --yolk: #F2C94C;        /* the violet's eye: primary action and flower centres only */
  --leaf: #6E9A55;

  /* admin: a light, quick tool in the same threads */
  --admin-bg: var(--linen);
  --admin-ink: var(--wool);
  --admin-muted: #5B4A78;
  --admin-line: var(--lilac);
  --danger: #A8322C;

  --serif: "Young Serif", Georgia, "Times New Roman", serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step--1: 0.875rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: clamp(1.6rem, 3vw, 2.1rem);
  --step-3: clamp(2.4rem, 5.2vw, 3.7rem);

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1160px;
  --hem: 106px;  /* the band tile's own height: shown 1:1 so every stitch stays sharp */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-color: var(--violet) var(--wool); accent-color: var(--violet); }
body {
  margin: 0; overflow-x: clip;
  background: var(--wool);
  color: var(--lilac);
  font: 400 var(--step-0)/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  caret-color: var(--yolk);
}
::selection { background: var(--yolk); color: var(--wool); }
img { display: block; max-width: 100%; }
a { color: var(--linen); text-decoration-color: var(--violet); text-decoration-thickness: 2px; text-underline-offset: 5px; }
a:hover { text-decoration-color: var(--yolk); }
p { text-wrap: pretty; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.12; margin: 0; color: var(--linen); text-wrap: balance; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--yolk); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .4em; padding: .8em 1.4em;
  border: 1.5px solid currentColor; border-radius: 999px;
  font: 600 var(--step-0)/1 var(--sans); text-decoration: none; cursor: pointer;
  background: transparent; color: var(--lilac);
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn:hover { background: var(--lilac); border-color: var(--lilac); color: var(--wool); }
.btn-primary { background: var(--yolk); border-color: var(--yolk); color: var(--wool); }
.btn-primary:hover { background: var(--linen); border-color: var(--linen); }
.btn-small { padding: .6em 1.1em; font-size: var(--step--1); }
.link { font-size: var(--step--1); font-weight: 500; }

/* ---------- filet band (the hem) ---------- */
.hem {
  position: relative; z-index: 1;
  height: var(--hem);
  margin-inline: calc(50% - 50vw);
  background: url(filet.svg?v=2) repeat-x left center / auto 100%;
}
.hem-top { animation: work 1.6s steps(36) .15s both; } /* worked in, one column of stitches at a time */
@keyframes work { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }

/* ---------- header / footer ---------- */
.site-header, .admin-header {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 28px;
  max-width: var(--max); margin: 0 auto; padding: 24px var(--gutter);
}
.brand { font-family: var(--serif); font-size: var(--step-1); color: var(--linen); text-decoration: none; }
.site-header nav, .admin-header nav { display: flex; gap: 24px; flex-wrap: wrap; }
.site-header nav a { color: var(--lilac); text-decoration: none; font-weight: 500; }
.site-header nav a:hover { color: var(--linen); text-decoration: underline; text-decoration-color: var(--yolk); }

.site-footer {
  max-width: var(--max); margin: 0 auto; padding: 28px var(--gutter) 40px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: var(--step--1);
}
.site-footer p { margin: 0; }
.site-footer a { color: var(--lilac); }
.hem-bottom { transform: scaleY(-1); }
/* a single row of stitches where one section ends and the next begins */
.edging { height: 22px; background: url(edging.svg?v=2) repeat-x left center / auto 100%; }

/* ---------- hero ---------- */
main > section { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.hero { position: relative; padding-top: clamp(24px, 4vw, 56px); }
.hero-text { position: relative; z-index: 2; max-width: min(38rem, 62%); padding-bottom: clamp(28px, 3.5vw, 44px); }
.hero h1 { font-size: var(--step-3); letter-spacing: -0.01em; }
.lede { font-size: var(--step-1); max-width: 46ch; margin: 22px 0 32px; line-height: 1.55; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* the violets stand on the hem; their stems end at its top edge, never behind the lace */
.hero-violets {
  position: absolute; right: var(--gutter); bottom: var(--hem);
  width: clamp(240px, 34vw, 470px); height: auto; z-index: 0; pointer-events: none;
}

/* ---------- products ---------- */
.products { padding-top: clamp(28px, 3.5vw, 44px); padding-bottom: 96px; }
.products-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 28px; }
.products-head h2, .about h2, .contact h2 { font-size: var(--step-2); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font: 500 var(--step--1)/1 var(--sans); padding: .65em 1.1em; border-radius: 999px;
  border: 1.5px dashed var(--violet); background: transparent; color: var(--lilac); cursor: pointer;
}
.chip:hover { border-color: var(--lilac); color: var(--linen); }
.chip.is-on { background: var(--lilac); border: 1.5px solid var(--lilac); color: var(--wool); }

.grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 64px 40px; }
.item[hidden] { display: none; }

/* each photo is framed with a running stitch */
.photo { position: relative; aspect-ratio: 1 / 1; margin: 9px; background: var(--wool-2); border-radius: 6px; }
.photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.photo::after {
  content: ""; position: absolute; inset: -9px; pointer-events: none;
  border: 2px dashed var(--violet); border-radius: 10px;
  transition: inset .35s cubic-bezier(.16, 1, .3, 1), border-color .35s;
}
.item:hover .photo::after { inset: -5px; border-color: var(--lilac); }

/* sold pieces carry a sewn-on label */
.sold-label {
  position: absolute; left: 14px; top: 16px; z-index: 1;
  padding: 5px 12px; background: var(--linen); color: var(--wool);
  font: 600 var(--step--1)/1.2 var(--sans); letter-spacing: .02em;
  border-radius: 2px; transform: rotate(-4deg);
  outline: 1.5px dashed var(--violet); outline-offset: -4px; /* sewn on with a running stitch */
}
.status-sold .photo img { filter: grayscale(.7); opacity: .6; }

.item-body { padding-top: 22px; }
.item-title { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.item-body h3 { font-size: var(--step-1); }
.price { font-family: var(--serif); font-size: var(--step-1); color: var(--linen); white-space: nowrap; }
.status-sold .price { text-decoration: line-through; text-decoration-color: var(--violet); color: var(--lilac); }
.status { margin: 4px 0 0; font-size: var(--step--1); }
.desc { margin: 12px 0 18px; max-width: 42ch; }
.item-body .btn { margin-top: 4px; }

.empty { font-size: var(--step-1); }

/* ---------- about / contact ---------- */
.about, .contact { padding-block: clamp(56px, 8vw, 96px); }
/* violet owns the whole band, edge to edge */
.about { background: var(--wool-2); box-shadow: 0 0 0 100vmax var(--wool-2); clip-path: inset(0 -100vmax); }
.about p, .contact p { max-width: 58ch; font-size: var(--step-1); line-height: 1.6; margin: 18px 0 0; }
.about .shipping { font-size: var(--step-0); }
.contact-list { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; font-size: var(--step-1); }
.hint { font-size: var(--step--1) !important; }

/* ---------- admin ---------- */
body.admin { background: var(--admin-bg); color: var(--admin-ink); scrollbar-color: auto; caret-color: auto; }
.admin h1, .admin h2, .admin legend { color: var(--admin-ink); }
.admin a { color: var(--admin-ink); }
.admin :focus-visible { outline-color: var(--admin-ink); }
.admin ::selection { background: var(--lilac); color: var(--wool); }
.admin .btn { color: var(--admin-ink); }
.admin .btn:hover { background: var(--admin-ink); border-color: var(--admin-ink); color: var(--linen); }
.admin .btn-primary { background: var(--wool); border-color: var(--wool); color: var(--linen); }
.admin .btn-primary:hover { background: var(--wool-2); border-color: var(--wool-2); }
.admin .btn-danger { border-color: var(--danger); color: var(--danger); }
.admin .btn-danger:hover { background: var(--danger); border-color: var(--danger); color: #fff; }

.admin-header { border-bottom: 2px dashed var(--violet); max-width: none; }
.admin .brand { color: var(--admin-ink); }
.admin-header .brand span { font-family: var(--sans); font-size: var(--step--1); color: var(--admin-muted); margin-left: 6px; }
.admin-header nav a { color: var(--admin-ink); text-decoration: none; font-weight: 500; }
.admin-header nav a:hover, .admin-header nav a[aria-current] { text-decoration: underline; text-decoration-color: var(--violet); }
.admin-main { max-width: 920px; margin: 0 auto; padding: 32px var(--gutter) 80px; }
.admin-main h1 { font-size: var(--step-2); }

.flash { padding: 12px 16px; border-radius: 10px; margin: 0 0 16px; font-weight: 500; }
.flash-ok { background: #E3EEE5; color: #24583A; }
.flash-error { background: #F6E3E6; color: #8A2433; }
.flash a { color: inherit; }

.admin-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; }
.count { font-family: var(--sans); font-size: var(--step-0); color: var(--admin-muted); }

.admin-list { list-style: none; padding: 0; margin: 0; background: #fff; border: 1px solid var(--admin-line); border-radius: 14px; }
.row { display: grid; grid-template-columns: 56px 1fr auto auto; gap: 16px; align-items: center; padding: 12px 16px; }
.row + .row { border-top: 1px solid var(--admin-line); }
.row img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; background: var(--linen); }
.row-info { min-width: 0; }
.admin .row-name { display: block; font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin .row-name:hover { text-decoration: underline; text-decoration-color: var(--violet); }
.row-meta { color: var(--admin-muted); font-size: var(--step--1); }
.row-actions { display: flex; gap: 6px; align-items: center; }
.row-actions form, .row-status { margin: 0; }
.icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--admin-line); background: #fff; cursor: pointer; color: var(--admin-ink); }
.icon:hover:not(:disabled) { border-color: var(--admin-ink); }
.icon:disabled { opacity: .35; cursor: default; }
.st { font: 500 var(--step--1) var(--sans); padding: 7px 10px; border-radius: 999px; border: 1px solid var(--admin-line); background: #fff; color: var(--admin-ink); }
.st-available { background: #E3EEE5; border-color: #BFD6C5; }
.st-made_to_order { background: #FBF0D4; border-color: #EBD394; }
.st-sold { background: #EEE8F5; color: var(--admin-muted); }

.panel { background: #fff; border: 1px solid var(--admin-line); border-radius: 16px; padding: clamp(20px, 4vw, 36px); }
.empty-admin p { font-size: var(--step-1); margin: 0 0 20px; }
.login { max-width: 400px; margin: 40px auto; }
.login .btn { width: 100%; margin-top: 20px; }
.admin .hint { color: var(--admin-muted); }

.form h1 { margin-bottom: 24px; }
.form label { display: block; font-weight: 600; font-size: var(--step--1); margin: 18px 0 6px; }
.form input:not([type=file]), .form textarea, .form select {
  width: 100%; font: 400 var(--step-0)/1.4 var(--sans); color: var(--admin-ink);
  padding: 11px 13px; border: 1px solid var(--admin-line); border-radius: 10px; background: #fff;
}
.form textarea { resize: vertical; }
.form input:focus, .form textarea:focus, .form select:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px #8E5CD055; }
.form-grid { display: grid; grid-template-columns: 240px 1fr; gap: 32px; }
.form-photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; background: var(--linen); border: 1px solid var(--admin-line); }
.file-btn { margin-top: 12px; width: 100%; font-size: var(--step--1) !important; position: relative; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
fieldset { border: 0; padding: 0; margin: 0 0 32px; }
legend { font-family: var(--serif); font-size: var(--step-1); padding: 0; }

/* ---------- shop tools: search, filters, sort ---------- */
.photo { display: block; }
.item-body h3 a { color: inherit; text-decoration: none; }
.item-body h3 a:hover { text-decoration: underline; text-decoration-color: var(--yolk); }

.shop-tools { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 12px 16px; margin: 0 0 14px; }
.tool { display: grid; gap: 6px; font-size: var(--step--1); font-weight: 500; }
.tool input, .tool select {
  width: 100%; min-height: 44px; padding: .7em 1.1em;
  font: 500 var(--step--1)/1.2 var(--sans); color: var(--linen);
  background-color: var(--wool-2); border: 1.5px dashed var(--violet); border-radius: 999px;
  appearance: none; -webkit-appearance: none;
}
.tool select {
  padding-right: 2.6em; cursor: pointer;
  background: var(--wool-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%23D7C4F0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 1.1em center;
}
.tool select option { color: var(--wool); background: var(--linen); }
.tool-search input {
  padding-left: 2.7em;
  background: var(--wool-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='5' fill='none' stroke='%23D7C4F0' stroke-width='1.8'/%3E%3Cpath d='m11 11 3.5 3.5' stroke='%23D7C4F0' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 1.05em center;
}
.tool input::placeholder { color: var(--lilac); opacity: .8; }
.tool input:hover, .tool select:hover { border-color: var(--lilac); }
.result-count { margin: 0 0 28px; font-size: var(--step--1); }
.no-match { padding: 32px 0 8px; }
.no-match[hidden] { display: none; }
.no-match p { font-size: var(--step-1); margin: 0 0 16px; }

/* ---------- product page ---------- */
.product-page { max-width: var(--max); margin: 0 auto; padding: 8px var(--gutter) clamp(64px, 9vw, 112px); }
.back { display: inline-flex; align-items: center; gap: 6px; color: var(--lilac); font-weight: 500; text-decoration: none; margin-bottom: clamp(20px, 3vw, 32px); }
.back:hover { color: var(--linen); }
.product { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.thumbs { list-style: none; display: flex; flex-wrap: wrap; gap: 16px; margin: 28px 9px 0; padding: 0; }
.thumb { position: relative; display: block; width: 76px; aspect-ratio: 1; padding: 0; border: 0; border-radius: 6px; background: var(--wool-2); cursor: pointer; }
.thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; opacity: .55; transition: opacity .2s; }
.thumb:hover img, .thumb.is-on img { opacity: 1; }
.thumb.is-on::after { content: ""; position: absolute; inset: -6px; border: 2px dashed var(--lilac); border-radius: 10px; pointer-events: none; }
.product-info { padding-top: 9px; }
.product-info h1 { font-size: clamp(2rem, 4vw, 3rem); }
.product-info .price { display: block; font-size: var(--step-2); margin: 14px 0 6px; }
.product-info .status { font-size: var(--step-0); }
.product-info .status a { color: var(--lilac); }
.desc-full { font-size: var(--step-1); line-height: 1.6; max-width: 52ch; margin: 22px 0 0; white-space: pre-line; }
.product-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 0; }
.note { font-size: var(--step--1); max-width: 46ch; margin: 16px 0 0; }

/* ---------- how to order, FAQ ---------- */
.steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; margin: 36px 0 8px; padding: 0; }
.steps li { counter-increment: step; }
.steps li::before {
  content: counter(step); display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 14px;
  border: 2px dashed var(--violet); border-radius: 50%; font: 400 var(--step-1)/1 var(--serif); color: var(--linen);
}
.steps h3 { font-size: var(--step-1); margin-bottom: 6px; }
.contact .steps p { font-size: var(--step-0); margin: 0; max-width: 36ch; }
.faq { margin-top: clamp(48px, 7vw, 72px); max-width: 70ch; }
.faq h3 { font-size: var(--step-1); margin-bottom: 14px; }
.faq details { border-top: 1.5px dashed var(--violet); }
.faq details:last-child { border-bottom: 1.5px dashed var(--violet); }
.faq summary {
  position: relative; list-style: none; cursor: pointer; padding: 16px 40px 16px 0;
  font-weight: 600; color: var(--linen);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 12px; height: 8px; margin-top: -4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%23D7C4F0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
  transition: transform .25s cubic-bezier(.16, 1, .3, 1);
}
.faq details[open] summary::after { transform: rotate(180deg); }
.faq summary:hover { text-decoration: underline; text-decoration-color: var(--yolk); text-underline-offset: 5px; }
.contact .faq p { font-size: var(--step-0); margin: 0 0 18px; max-width: 62ch; }

/* ---------- legal pages ---------- */
.legal-page { max-width: calc(34rem + 2 * var(--gutter)); margin: 0 auto; padding: clamp(16px, 3vw, 40px) var(--gutter) clamp(64px, 9vw, 112px); }
.legal-page h1 { font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: 8px; }
.legal-page h2 { font-size: var(--step-1); margin: 40px 0 10px; }
.legal-page p { margin: 0 0 14px; font-size: 1.0625rem; line-height: 1.7; }
.legal-draft { margin: 20px 0 8px !important; padding: 14px 18px; border: 1.5px dashed var(--yolk); border-radius: 10px; color: var(--linen); }
.missing { background: var(--lilac); color: var(--wool); padding: 0 .35em; border-radius: 3px; font-weight: 600; }
.site-footer .seller { margin-top: 4px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: baseline; }

/* ---------- admin: product form extras, categories ---------- */
.form-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 24px; }
.form .form-head h1 { margin: 0; }
.field-label { font-weight: 600; font-size: var(--step--1); margin: 28px 0 8px; }
.field-link { display: inline-block; margin-top: 8px; font-size: var(--step--1); }
.photo-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; margin: 0; padding: 0; }
.photo-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: var(--linen); border: 1px solid var(--admin-line); }
.form .check { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: var(--step-0); margin: 22px 0 0; cursor: pointer; }
.form .check input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--wool); }
.form .check-small { gap: 6px; font-size: var(--step--1); margin: 6px 0 0; }
.form .check-small input { width: 16px; height: 16px; }
.tag-hidden { display: inline-block; margin-left: 6px; padding: 1px 9px; border-radius: 999px; background: #EEE8F5; color: var(--admin-muted); font-size: .75rem; font-weight: 600; }
.row.is-hidden img { opacity: .45; }
.admin-intro { color: var(--admin-muted); max-width: 62ch; margin: -6px 0 20px; }
.cat-row { grid-template-columns: minmax(0, 1fr) auto auto; }
.cat-row .row-meta { min-width: 6.5em; text-align: right; }
.cat-rename { display: flex; gap: 8px; align-items: center; min-width: 0; }
.cat-rename input { flex: 1; min-width: 0; font: 400 var(--step-0)/1.4 var(--sans); color: var(--admin-ink); padding: 9px 12px; border: 1px solid var(--admin-line); border-radius: 10px; background: #fff; }
.cat-rename input:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px #8E5CD055; }
.cat-add { margin-top: 20px; }
.cat-add label { margin-top: 0; }
.inline-field { display: flex; gap: 10px; }
.inline-field input { flex: 1; min-width: 0; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.admin .btn-danger:disabled:hover { background: transparent; color: var(--danger); }

/* ---------- small screens ---------- */
@media (max-width: 760px) {
  .product { grid-template-columns: 1fr; }
  .hero-text { max-width: none; }
  .hero-violets { position: relative; right: auto; bottom: auto; width: min(240px, 64vw); margin: 4px 0 0 auto; }
  .hero-text { padding-bottom: 0; }
}
@media (max-width: 680px) {
  .steps { grid-template-columns: 1fr; gap: 24px; }
  .shop-tools { grid-template-columns: 1fr 1fr; }
  .tool-search, .tool:last-child { grid-column: 1 / -1; }
  .cat-row .row-meta { text-align: left; }
  .cat-row { grid-template-columns: minmax(0, 1fr) auto; }
  .cat-row .cat-rename { grid-column: 1 / -1; }
  .grid { grid-template-columns: 1fr 1fr; gap: 48px 22px; }
  .item-title { flex-direction: column; gap: 4px; }
  .desc { font-size: var(--step--1); }
  .form-grid { grid-template-columns: 1fr; }
  .form-photo { max-width: 260px; }
  .row { grid-template-columns: 48px 1fr; }
  .row img { width: 48px; height: 48px; }
  .row-status, .row-actions { grid-column: 1 / -1; }
  .row-actions { flex-wrap: wrap; }
}
@media (max-width: 420px) {
  .hero-actions .btn { flex: 1 1 100%; }
  .grid { grid-template-columns: 1fr; }
  .item-title { flex-direction: row; }
  .two { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hem-top { animation: none; }
  .photo::after { transition: none; }
}