:root {
    --ink: #17251f;
    --ink-soft: #42544c;
    --green: #2f7658;
    --green-dark: #1f5941;
    --green-pale: #e8f1ec;
    --cream: #f7f4ee;
    --white: #fff;
    --line: #dce3de;
    --danger: #a43a3a;
    --warning: #8b5d14;
    --shadow: 0 18px 50px rgba(23, 37, 31, .1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: Arial, Helvetica, sans-serif; line-height: 1.5; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.login-page { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; background: radial-gradient(circle at top left, #dfeee5, transparent 38%), var(--cream); }
.login-card { width: min(100%, 460px); padding: clamp(2rem, 6vw, 3.5rem); border-radius: 28px; background: var(--white); box-shadow: var(--shadow); }
.login-card h1 { margin: .7rem 0; font: 500 clamp(2rem, 8vw, 3.4rem)/1.05 Georgia, serif; }
.login-card > p:not(.admin-kicker) { color: var(--ink-soft); }
.login-form { display: grid; gap: 1rem; margin: 2rem 0 1.25rem; }
.login-form button { min-height: 50px; border: 0; border-radius: 999px; color: #fff; background: var(--green-dark); font-weight: 800; cursor: pointer; }
.back-link { color: var(--green-dark); text-decoration: none; font-weight: 700; }

.admin-brand { display: inline-flex; align-items: baseline; gap: .35rem; color: var(--ink); text-decoration: none; }
.admin-brand span { font: italic 700 1.7rem/1 Georgia, serif; color: var(--green-dark); }
.admin-brand small { text-transform: uppercase; letter-spacing: .16em; font-size: .62rem; font-weight: 800; }
.admin-kicker { margin: 1.5rem 0 0; color: var(--green); text-transform: uppercase; letter-spacing: .18em; font-size: .72rem; font-weight: 900; }

.admin-header { position: sticky; top: 0; z-index: 50; min-height: 76px; padding: 0 clamp(1rem, 4vw, 2.5rem); display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); backdrop-filter: blur(12px); }
.admin-header > div, .header-actions { display: flex; align-items: center; gap: 1rem; }
.header-actions form { margin: 0; }
.admin-site-name { padding-left: 1rem; border-left: 1px solid var(--line); color: var(--ink-soft); font-size: .9rem; }
.admin-layout { display: grid; grid-template-columns: 235px minmax(0, 1fr); min-height: calc(100vh - 76px); }
.admin-nav { position: sticky; top: 76px; align-self: start; height: calc(100vh - 76px); padding: 2rem 1.25rem; display: flex; flex-direction: column; gap: .25rem; border-right: 1px solid var(--line); background: #f1eee7; }
.admin-nav a { display: flex; justify-content: space-between; padding: .85rem 1rem; border-radius: 10px; color: var(--ink-soft); text-decoration: none; font-weight: 700; }
.admin-nav a:hover, .admin-nav a:focus { color: var(--green-dark); background: var(--white); }
.admin-nav span { min-width: 1.6rem; padding: .08rem .35rem; border-radius: 999px; color: #fff; background: var(--green); text-align: center; font-size: .75rem; }

.admin-main { width: min(100%, 1240px); padding: clamp(1.5rem, 4vw, 3.5rem); }
.welcome { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2.5rem; }
.welcome h1 { margin: .35rem 0 .75rem; font: 500 clamp(2.5rem, 6vw, 4.6rem)/1 Georgia, serif; }
.welcome p:not(.admin-kicker) { max-width: 650px; color: var(--ink-soft); }
.save-state { flex: 0 0 auto; padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.save-state span, .save-state strong { display: block; }
.save-state span { color: var(--ink-soft); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.save-state strong { margin-top: .25rem; }

.notice { margin: 0 0 1.5rem; padding: 1rem 1.2rem; border-radius: 12px; border: 1px solid transparent; }
.notice--success { color: #15593b; border-color: #a9d3bc; background: #eaf8f0; }
.notice--error { color: #862f2f; border-color: #e6b9b9; background: #fff0f0; }
.notice--warning { color: #6f4b11; border-color: #e4ca91; background: #fff8e7; }

.admin-section { scroll-margin-top: 100px; margin: 0 0 2rem; padding: clamp(1.25rem, 3vw, 2.25rem); border: 1px solid var(--line); border-radius: 20px; background: var(--white); box-shadow: 0 8px 30px rgba(23,37,31,.04); }
.section-title { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.section-title > div { display: flex; align-items: baseline; gap: .75rem; }
.section-title p { margin: 0; color: var(--green); font-size: .72rem; font-weight: 900; }
.section-title h2 { margin: 0; font: 500 clamp(1.6rem, 4vw, 2.2rem)/1.1 Georgia, serif; }
.section-title > span { color: var(--ink-soft); font-size: .85rem; }
.subheading { margin: 2.5rem 0 1.25rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font: 500 1.5rem Georgia, serif; }
.field-explanation { margin: -.65rem 0 1.2rem; color: var(--ink-soft); font-size: .88rem; }
.theme-choices { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .7rem; }
.theme-choice { position: relative; min-width: 0; padding: .75rem .45rem; display: grid; justify-items: center; gap: .45rem; border: 1px solid var(--line); border-radius: 11px; color: var(--ink-soft); background: var(--white); cursor: pointer; text-align: center; }
.theme-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.theme-choice > span { width: 2.6rem; height: 2.6rem; display: block; border: 3px solid #fff; border-radius: 50%; background: var(--swatch); box-shadow: 0 0 0 1px var(--line); }
.theme-choice strong { font-size: .74rem; }
.theme-choice:has(input:checked) { color: var(--green-dark); border-color: var(--green); background: var(--green-pale); box-shadow: 0 0 0 2px rgba(47,118,88,.12); }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
.form-grid label, .login-form label { display: grid; gap: .4rem; color: var(--ink); font-size: .86rem; font-weight: 800; }
.form-grid label small, .login-form label small { color: var(--ink-soft); font-size: .74rem; font-weight: 500; }
.wide { grid-column: 1 / -1; }
input, textarea, select { width: 100%; border: 1px solid #cbd5cf; border-radius: 9px; padding: .78rem .85rem; color: var(--ink); background: #fff; transition: border-color .2s, box-shadow .2s; }
textarea { resize: vertical; min-height: 76px; }
input:focus, textarea:focus, select:focus { outline: 0; border-color: var(--green); box-shadow: 0 0 0 3px rgba(47,118,88,.13); }
input[type="file"] { padding: .55rem; background: var(--cream); }
.current-image { display: flex; align-items: center; gap: 1rem; padding: 1rem; border-radius: 12px; background: var(--green-pale); }
.current-image img { width: 110px; height: 74px; border-radius: 8px; object-fit: cover; }
.current-image strong, .current-image span { display: block; }
.current-image span { margin-top: .2rem; color: var(--ink-soft); font-size: .82rem; }

.editor-block { padding: 1.5rem 0; border-top: 1px solid var(--line); }
.editor-block:first-of-type { padding-top: 0; border-top: 0; }
.editor-block h3 { margin: 0 0 1.2rem; font: 500 1.35rem Georgia, serif; }
.repeater-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.repeater-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
fieldset { min-width: 0; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; }
legend { padding: 0 .4rem; color: var(--green-dark); font-size: .75rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
fieldset label { display: grid; gap: .35rem; margin-top: .75rem; font-size: .8rem; font-weight: 800; }

.sticky-save { position: sticky; bottom: 1rem; z-index: 30; margin: 1.5rem 0 2.5rem; padding: .8rem .9rem .8rem 1.2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-radius: 14px; color: #fff; background: rgba(23,37,31,.96); box-shadow: var(--shadow); }
.sticky-save span { font-size: .8rem; }
.button { min-height: 42px; padding: .65rem 1rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 999px; text-decoration: none; font-weight: 800; cursor: pointer; }
.button--primary { color: #fff; background: var(--green-dark); }
.button--secondary { color: var(--green-dark); border-color: #b9ccc1; background: #fff; }
.button--quiet { color: var(--ink-soft); background: transparent; border: 0; }

.product-editor-list { display: grid; gap: 1rem; margin-bottom: 1.25rem; }
.product-editor { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 1.2rem; padding: 1.1rem; border: 1px solid var(--line); border-radius: 15px; background: #fbfcfb; }
.product-editor > img { width: 150px; height: 150px; object-fit: cover; border-radius: 11px; }
.product-editor__fields { min-width: 0; }
.product-topline { margin-bottom: 1rem; display: flex; justify-content: space-between; gap: 1rem; }
.product-topline > strong { font: 500 1.3rem Georgia, serif; }
.form-grid--product { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.switch { display: inline-flex; align-items: center; gap: .45rem; font-size: .78rem; font-weight: 800; }
.switch input { width: auto; }
.product-editor__actions { align-self: start; display: flex; flex-direction: column; align-items: stretch; gap: .35rem; }
.duplicate-trigger, .delete-trigger { padding: .48rem .75rem; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font-size: .76rem; font-weight: 800; cursor: pointer; }
.duplicate-trigger { color: var(--green-dark); }
.delete-trigger { color: var(--danger); }
.add-product { margin-top: 2rem; border-top: 1px solid var(--line); padding-top: 1.5rem; }
.add-product summary { color: var(--green-dark); font-weight: 900; cursor: pointer; }
.add-product form { margin-top: 1.25rem; }

.gallery-editor { margin-top: 1.35rem; padding: 1rem; border: 1px solid var(--line); border-radius: 13px; background: var(--white); }
.gallery-editor__heading { display: flex; align-items: start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.gallery-editor__heading h4 { margin: 0; font: 500 1.15rem Georgia, serif; }
.gallery-editor__heading p { margin: .25rem 0 0; color: var(--ink-soft); font-size: .78rem; }
.gallery-editor__heading > strong { flex: 0 0 auto; padding: .25rem .55rem; color: var(--green-dark); border-radius: 999px; background: var(--green-pale); font-size: .78rem; }
.gallery-sort { display: grid; gap: .7rem; }
.gallery-item { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: .85rem; align-items: start; padding: .75rem; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfb; }
.gallery-item.is-dragging { opacity: .45; border-color: var(--green); }
.gallery-item__preview { position: relative; cursor: grab; }
.gallery-item__preview:active { cursor: grabbing; }
.gallery-item__preview img { display: block; width: 110px; height: 90px; object-fit: contain; border-radius: 7px; background: var(--cream); }
.gallery-handle { position: absolute; top: .3rem; right: .3rem; padding: .1rem .3rem; color: #fff; border-radius: 5px; background: rgba(23,37,31,.78); font-weight: 900; letter-spacing: -.15em; }
.gallery-item__fields { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.gallery-item__fields label { display: grid; gap: .3rem; font-size: .76rem; font-weight: 800; }
.gallery-item__fields .gallery-delete { grid-column: 1 / -1; display: flex; align-items: center; color: var(--danger); }
.gallery-delete input { width: auto; }
.gallery-item__move { display: flex; flex-direction: column; gap: .3rem; }
.gallery-item__move button { width: 2.1rem; height: 2.1rem; border: 1px solid var(--line); border-radius: 8px; color: var(--green-dark); background: #fff; cursor: pointer; }
.gallery-add { display: grid; gap: .35rem; margin-top: .9rem; font-size: .8rem; font-weight: 800; }
.gallery-add small, .gallery-help { color: var(--ink-soft); font-size: .74rem; font-weight: 500; }
.gallery-help { margin: .45rem 0 0; }

.backup-list { display: grid; gap: .65rem; }
.backup-list form { padding: .8rem 1rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; border: 1px solid var(--line); border-radius: 10px; }
.backup-list span, .backup-list strong, .backup-list small { display: block; }
.backup-list small { color: var(--ink-soft); }
.empty-state { padding: 1.5rem; border-radius: 12px; color: var(--ink-soft); background: var(--cream); }

@media (max-width: 1050px) {
    .admin-layout { grid-template-columns: 1fr; }
    .admin-nav { position: sticky; top: 76px; z-index: 40; height: auto; padding: .65rem 1rem; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
    .admin-nav a { flex: 0 0 auto; }
    .repeater-grid { grid-template-columns: 1fr 1fr; }
    .product-editor { grid-template-columns: 110px minmax(0, 1fr); }
    .theme-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .product-editor > img { width: 110px; height: 110px; }
    .product-editor__actions { grid-column: 2; justify-self: end; flex-direction: row; }
    .gallery-item { grid-template-columns: 90px minmax(0, 1fr) auto; }
    .gallery-item__preview img { width: 90px; height: 80px; }
}

@media (max-width: 720px) {
    .admin-header { min-height: 66px; }
    .admin-site-name, .button--quiet { display: none; }
    .admin-layout { min-height: calc(100vh - 66px); }
    .admin-nav { top: 66px; }
    .admin-main { padding: 1rem; }
    .welcome { align-items: stretch; flex-direction: column; }
    .welcome h1 { font-size: 2.7rem; }
    .save-state { align-self: flex-start; }
    .section-title { align-items: flex-start; flex-direction: column; }
    .form-grid, .repeater-grid, .repeater-grid--four, .form-grid--product { grid-template-columns: 1fr; }
    .theme-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wide { grid-column: auto; }
    .product-editor { grid-template-columns: 80px minmax(0, 1fr); padding: .8rem; gap: .8rem; }
    .product-editor > img { width: 80px; height: 80px; }
    .product-editor__fields { grid-column: 1 / -1; }
    .product-editor__actions { grid-column: 1 / -1; justify-self: stretch; }
    .gallery-item { grid-template-columns: 72px minmax(0, 1fr); }
    .gallery-item__preview img { width: 72px; height: 72px; }
    .gallery-item__fields { grid-template-columns: 1fr; }
    .gallery-item__fields .gallery-delete { grid-column: auto; }
    .gallery-item__move { grid-column: 1 / -1; flex-direction: row; justify-content: flex-end; }
    .sticky-save { align-items: stretch; flex-direction: column; bottom: .5rem; }
    .backup-list form { align-items: stretch; flex-direction: column; }
}