/* 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; }

/* ==========================================================================
   Theme backgrounds: a texture or scene behind the page, on top of each theme's colours.
   Pure CSS (gradients and tiny inline SVG), so nothing extra to download. Cards and panels keep their solid surfaces, so text stays easy to read.
   ========================================================================== */
body[data-theme="craft"] {
  background-image:
    repeating-linear-gradient(0deg, rgba(107,74,53,.035) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(107,74,53,.03) 0 1px, transparent 1px 5px),
    radial-gradient(ellipse at 50% -20%, rgba(172,88,34,.12), transparent 60%);
}
body[data-theme="soft-blue"] { background-image: linear-gradient(180deg, rgba(47,111,159,.10), transparent 420px); }
body[data-theme="botanical"] {
  background-image: radial-gradient(circle at 12% 8%, rgba(53,115,90,.10) 0, transparent 220px), radial-gradient(circle at 92% 20%, rgba(79,125,76,.09) 0, transparent 260px);
}
body[data-theme="teal-orange"] { background-image: linear-gradient(180deg, rgba(14,140,130,.10), transparent 300px), radial-gradient(circle at 100% 0, rgba(233,120,37,.12), transparent 320px); }
body[data-theme="navy-orange"] { background-image: linear-gradient(180deg, rgba(29,48,67,.06), transparent 260px); }
body[data-theme="pink"] {
  background-image: radial-gradient(rgba(233,80,140,.10) 2px, transparent 2.5px), radial-gradient(rgba(233,80,140,.07) 1.5px, transparent 2px);
  background-size: 34px 34px, 34px 34px; background-position: 0 0, 17px 17px;
}
body[data-theme="christmas"] {
  background-image:
    radial-gradient(rgba(150,190,225,.35) 1.6px, transparent 2.2px),
    radial-gradient(rgba(150,190,225,.25) 1.2px, transparent 1.8px),
    linear-gradient(180deg, rgba(185,28,48,.08), transparent 12px, transparent 220px, transparent),
    linear-gradient(180deg, rgba(31,90,55,.10), transparent 320px);
  background-size: 64px 64px, 64px 64px, auto, auto; background-position: 0 0, 32px 32px, 0 0, 0 0;
}
body[data-theme="easter"] {
  background-image:
    radial-gradient(rgba(185,165,255,.22) 3px, transparent 3.5px), radial-gradient(rgba(255,179,199,.22) 3px, transparent 3.5px), radial-gradient(rgba(255,226,122,.25) 3px, transparent 3.5px),
    linear-gradient(180deg, rgba(185,165,255,.14), transparent 320px);
  background-size: 90px 90px, 90px 90px, 90px 90px, auto; background-position: 0 0, 30px 45px, 60px 15px, 0 0;
}
body[data-theme="valentines"] {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cpath d='M48 62 C32 49 30 38 37 34 C42 31 47 35 48 38 C49 35 54 31 59 34 C66 38 64 49 48 62Z' fill='%23e23c64' fill-opacity='.08'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 50% -10%, rgba(226,60,100,.14), transparent 55%);
}
body[data-theme="mothers-day"] {
  background-image: radial-gradient(circle at 8% 12%, rgba(240,170,205,.28) 0, transparent 200px), radial-gradient(circle at 95% 6%, rgba(255,214,190,.35) 0, transparent 240px), radial-gradient(circle at 70% 90%, rgba(196,170,235,.20) 0, transparent 260px);
}
body[data-theme="halloween"] {
  background-image:
    radial-gradient(circle, rgba(255,255,255,.55) 0 1px, transparent 1.4px), radial-gradient(circle, rgba(255,214,150,.4) 0 1px, transparent 1.4px),
    radial-gradient(ellipse at 50% -15%, rgba(255,138,31,.22), transparent 55%), radial-gradient(ellipse at 100% 100%, rgba(124,77,191,.25), transparent 50%);
  background-size: 140px 140px, 97px 97px, auto, auto; background-position: 10px 20px, 60px 70px, 0 0, 0 0; background-attachment: scroll, scroll, fixed, fixed;
}
body[data-theme="fathers-day"] { background-image: repeating-linear-gradient(45deg, rgba(47,93,138,.035) 0 2px, transparent 2px 5px), repeating-linear-gradient(-45deg, rgba(47,93,138,.03) 0 2px, transparent 2px 5px); }
body[data-theme="bonfire"] {
  background-image:
    radial-gradient(circle, rgba(255,230,180,.5) 0 1px, transparent 1.4px),
    radial-gradient(ellipse at 50% 115%, rgba(242,106,27,.32), transparent 55%), radial-gradient(ellipse at 50% -10%, rgba(255,154,61,.10), transparent 50%);
  background-size: 160px 160px, auto, auto; background-attachment: scroll, fixed, fixed;
}
body[data-theme="wimbledon"] {
  background-image: repeating-linear-gradient(90deg, rgba(47,122,60,.07) 0 90px, rgba(47,122,60,0) 90px 180px), linear-gradient(180deg, rgba(75,42,115,.06), transparent 240px);
}
body[data-theme="world-cup"] {
  background-image: repeating-linear-gradient(90deg, rgba(14,122,70,.07) 0 90px, rgba(14,122,70,0) 90px 180px), linear-gradient(180deg, rgba(14,42,61,.06), transparent 240px), radial-gradient(circle at 50% 120%, rgba(242,183,5,.16), transparent 45%);
}
@media (prefers-reduced-motion: reduce) { body[data-theme] { background-attachment: scroll; } }