/* Themes module: colour themes, the theme picker in Admin > Appearance and the shop-theme picker in Shop settings. */

/* Craft Warmth: parchment, cream, copper and moss (the palette this software used before v1.0) */
[data-theme="craft"] {
  --bg:#f1e6d6; --surface:#f9f1e5; --ink:#4a3022; --ink-soft:#5f4333; --muted:#755b49;
  --line:#d6bf9f; --line-strong:#6b4a35; --field-line:#8a6e55; --placeholder:#eadcc6;
  --accent:#9f4a19; --btn:#ac5822; --btn-hover:#8f3d17; --on-btn:#fffaf2; --green:#5d7a3a; --danger:#a3321f;
}

/* ==========================================================================
   Storefront themes (Themes module)
   The interface uses semantic CSS variables, so a theme changes the whole
   storefront without requiring separate stylesheets.
   ========================================================================== */

/* Soft Blue: trust/calm + warm shopping CTA */
[data-theme="soft-blue"] {
  --bg:#f4f8fc; --surface:#ffffff; --ink:#23384d; --ink-soft:#3f5870; --muted:#60758a;
  --line:#d5e1ec; --line-strong:#49657e; --field-line:#7c94aa; --placeholder:#e8eff5;
  --accent:#2f6f9f; --btn:#e97825; --btn-hover:#cf5f10; --on-btn:#ffffff; --green:#3f7f5a; --danger:#b13a32;
}

/* Botanical: natural, safe and friendly */
[data-theme="botanical"] {
  --bg:#f3f7f1; --surface:#ffffff; --ink:#294436; --ink-soft:#456151; --muted:#687c6f;
  --line:#d5e1d6; --line-strong:#4d6a57; --field-line:#79907e; --placeholder:#e7eee7;
  --accent:#35735a; --btn:#d97732; --btn-hover:#b95e20; --on-btn:#ffffff; --green:#4f7d4c; --danger:#a33c35;
}

/* Teal and orange on light peach */
[data-theme="teal-orange"] {
  --bg:#fff7ed; --surface:#ffffff; --ink:#164e4a; --ink-soft:#28645f; --muted:#607b78;
  --line:#d8e7e4; --line-strong:#0d6f68; --field-line:#5b8883; --placeholder:#f5e6d4;
  --accent:#0d9488; --btn:#fb923c; --btn-hover:#ea7b24; --on-btn:#ffffff; --green:#4d8a62; --danger:#b7352d;
}

/* Modern marketplace: clean white + dependable navy + one CTA accent */
[data-theme="navy-orange"] {
  --bg:#f5f7fa; --surface:#ffffff; --ink:#1d3043; --ink-soft:#3e566d; --muted:#687b8c;
  --line:#d9e1e8; --line-strong:#3e5870; --field-line:#8093a5; --placeholder:#e9eef2;
  --accent:#285d87; --btn:#ed7a24; --btn-hover:#cf5e0d; --on-btn:#ffffff; --green:#477b5a; --danger:#ad3832;
}

/* Seasonal and occasion themes */
[data-theme="pink"] {
  --bg:#fff1f6; --surface:#ffffff; --ink:#4a2336; --ink-soft:#6b3a50; --muted:#8a5b70; --line:#f3d3e0; --line-strong:#a14a6c; --field-line:#d9a6bb; --placeholder:#fbe3ec; --accent:#c2185b; --btn:#c2185b; --btn-hover:#9d1049; --on-btn:#ffffff; --green:#4f8a63; --danger:#b3261e;
}
[data-theme="christmas"] {
  --bg:#f7faf6; --surface:#ffffff; --ink:#1f3b2c; --ink-soft:#3a5a48; --muted:#5f7767; --line:#d2e2d4; --line-strong:#2c5a40; --field-line:#7b9a85; --placeholder:#e6efe6; --accent:#1f6b46; --btn:#b3202a; --btn-hover:#8f1720; --on-btn:#ffffff; --green:#2f7d4f; --danger:#a8201a;
}
[data-theme="easter"] {
  --bg:#fbf8ff; --surface:#ffffff; --ink:#3a3055; --ink-soft:#554a73; --muted:#756b8e; --line:#e3dcf0; --line-strong:#6a5a9c; --field-line:#a79cc4; --placeholder:#f0ebf8; --accent:#7b5fc2; --btn:#e29a1f; --btn-hover:#c07f0f; --on-btn:#2b2200; --green:#4f8a5a; --danger:#b3342b;
}
[data-theme="valentines"] {
  --bg:#fff0f2; --surface:#ffffff; --ink:#4a1423; --ink-soft:#6e2c3c; --muted:#8c4f5c; --line:#f1cbd2; --line-strong:#8e2a43; --field-line:#c98d99; --placeholder:#fadde2; --accent:#b3123f; --btn:#b3123f; --btn-hover:#8d0c30; --on-btn:#ffffff; --green:#4d8560; --danger:#9e1b2f;
}
[data-theme="mothers-day"] {
  --bg:#fdf6f8; --surface:#ffffff; --ink:#42303d; --ink-soft:#5f4759; --muted:#826a7b; --line:#ecd9e2; --line-strong:#8a5a7d; --field-line:#bf9db3; --placeholder:#f6e8ee; --accent:#a9558a; --btn:#e4885f; --btn-hover:#c96e45; --on-btn:#2b1408; --green:#538565; --danger:#b3342b;
}
[data-theme="halloween"] {
  --bg:#1a1423; --surface:#261d33; --ink:#f6ede0; --ink-soft:#dccfc0; --muted:#b3a6c4; --line:#43365a; --line-strong:#e08a2c; --field-line:#7b6a95; --placeholder:#2f2540; --accent:#ff8a1f; --btn:#ff7a00; --btn-hover:#ff9a2e; --on-btn:#1a1423; --green:#7fcf8a; --danger:#ff6b5e;
}
[data-theme="fathers-day"] {
  --bg:#f2f4f6; --surface:#ffffff; --ink:#222d38; --ink-soft:#3d4b59; --muted:#617080; --line:#d5dbe1; --line-strong:#3a4b5c; --field-line:#8392a1; --placeholder:#e4e8ec; --accent:#2f5d8a; --btn:#8a5a2b; --btn-hover:#6f4519; --on-btn:#ffffff; --green:#4a7a5a; --danger:#ad3832;
}
[data-theme="bonfire"] {
  --bg:#201a1a; --surface:#2d2423; --ink:#f7ebdc; --ink-soft:#e2d0bb; --muted:#bda995; --line:#4a3a36; --line-strong:#ff9a3d; --field-line:#8a7468; --placeholder:#392d2b; --accent:#f26a1b; --btn:#f26a1b; --btn-hover:#ff8a3d; --on-btn:#1c1010; --green:#8fd19a; --danger:#ff7569;
}
[data-theme="wimbledon"] {
  --bg:#f6faf3; --surface:#ffffff; --ink:#25143a; --ink-soft:#43305d; --muted:#6a5b82; --line:#d9e4d3; --line-strong:#4b2a73; --field-line:#8d86a3; --placeholder:#e8f0e3; --accent:#4b2a73; --btn:#2f7a3a; --btn-hover:#235e2c; --on-btn:#ffffff; --green:#2f7a3a; --danger:#ad2f2f;
}
[data-theme="world-cup"] {
  --bg:#f2f8f4; --surface:#ffffff; --ink:#0e2a3d; --ink-soft:#2b4a5f; --muted:#587184; --line:#cfe0d6; --line-strong:#0e5a3a; --field-line:#7f9b8d; --placeholder:#e1eee6; --accent:#0e7a46; --btn:#f2b705; --btn-hover:#d69e00; --on-btn:#10260f; --green:#0e7a46; --danger:#b3261e;
}


/* Appearance theme cards */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.theme-option {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 10px;
  background: var(--surface);
  border: 2px solid var(--line);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.theme-option:hover { border-color: var(--accent); transform: translateY(-1px); }
.theme-option.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent); }
.theme-option input { position: absolute; opacity: 0; pointer-events: none; }
.theme-option__image-wrap { position: relative; display: block; overflow: hidden; border: 1px solid var(--line); background: var(--bg); }
.theme-option__image { display: block; width: 100%; height: auto; aspect-ratio: 900 / 500; object-fit: cover; }
.theme-option__check {
  position: absolute; top: 10px; right: 10px; display: none; width: 30px; height: 30px;
  align-items: center; justify-content: center; border-radius: 50%; background: var(--accent); color: var(--on-btn);
  font: 700 16px var(--font-body); box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.theme-option.is-selected .theme-option__check { display: flex; }
.theme-option__body { display: flex; flex-direction: column; gap: 4px; padding: 0 4px 4px; }
.theme-option__body strong { font: 600 16px var(--font-mono); color: var(--ink); }
.theme-option__body span { color: var(--muted); font-size: 13px; line-height: 1.45; }
.appearance-theme-panel { max-width: none; }
.appearance-theme-panel .help { max-width: 760px; }

/* The admin's live preview uses the same tokens as each storefront theme. */

@media (max-width: 900px) {
  .theme-grid { grid-template-columns: 1fr; }
}

/* Live mini-homepage theme preview (uses each theme's own tokens) */
.mini-home { display:block; background:var(--bg); color:var(--ink); font:500 9px/1.3 var(--font-body, system-ui); border:1px solid var(--line); overflow:hidden; text-align:left; }
.mini-home__bar { display:flex; align-items:center; justify-content:space-between; gap:6px; padding:6px 8px; background:var(--surface); border-bottom:1px solid var(--line); }
.mini-home__logo { font:700 11px var(--font-mono, monospace); color:var(--ink); }
.mini-home__nav { display:flex; gap:6px; color:var(--ink-soft); }
.mini-home__hero { display:block; margin:8px; padding:12px 10px; background:var(--surface); border:1px solid var(--line-strong); }
.mini-home__hero b { display:block; font-size:12px; color:var(--ink); margin-bottom:3px; }
.mini-home__hero > span:not(.mini-home__btn) { color:var(--muted); display:block; margin-bottom:6px; }
.mini-home__btn { display:inline-block; padding:4px 9px; background:var(--btn); color:var(--on-btn); font-weight:700; }
.mini-home__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:0 8px 8px; }
.mini-home__card { display:block; background:var(--surface); border:1px solid var(--line); padding:4px; }
.mini-home__img { display:block; height:26px; background:var(--placeholder); margin-bottom:3px; }
.mini-home__card i { display:block; font-style:normal; color:var(--accent); font-weight:700; }
.mini-home__card em { display:block; font-style:normal; color:var(--muted); }
.theme-option .mini-home { pointer-events:none; }
.seller-theme-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; margin-top:10px; }
.seller-theme-grid .theme-option__body span { display:block; }