/* =====================================================================
   Website themes (Admin › Website › Themes)
   <html> carries data-site-theme, data-design, data-radius, data-buttons,
   data-header, data-cards and data-headings. Colors and fonts are CSS
   variables set by the layout. "Original" sets nothing here.
   ===================================================================== */

html:not([data-theme="dark"]) body { background: var(--site-surface, #fff); }

/* Corners */
html[data-radius="sharp"] :is(.shop-block-one, .shop-block-two, .shop-block-three, .deals-block-one, .category-block-one, .ads-block-one, .offers-block-one, .news-block-one) .inner-box,
html[data-radius="sharp"] :is(.shop-block-one, .shop-block-two, .shop-block-three) .image-box { border-radius: 4px !important; }
html[data-radius="sharp"] :is(input.form-control, .form-control, select, textarea, .nice-select) { border-radius: 3px !important; }
html[data-radius="round"] :is(.shop-block-one, .shop-block-two, .shop-block-three, .deals-block-one, .category-block-one, .ads-block-one, .offers-block-one, .news-block-one) .inner-box { border-radius: 26px !important; }
html[data-radius="round"] :is(.shop-block-one, .shop-block-two, .shop-block-three) .image-box { border-radius: 22px !important; }
html[data-radius="round"] :is(input.form-control, .form-control, select, textarea, .nice-select) { border-radius: 16px !important; }

/* Buttons */
html[data-buttons="rounded"] .theme-btn { border-radius: 10px !important; }
html[data-buttons="square"] .theme-btn { border-radius: 2px !important; letter-spacing: 0.03em; }

/* Product cards */
html[data-cards="border"]:not([data-theme="dark"]) :is(.shop-block-one, .shop-block-two, .shop-block-three) .inner-box { box-shadow: none !important; border: 1px solid color-mix(in oklab, var(--site-ink, #111) 12%, white) !important; }
html[data-cards="flat"]:not([data-theme="dark"]) :is(.shop-block-one, .shop-block-two, .shop-block-three) .inner-box { box-shadow: none !important; border-color: transparent !important; background: color-mix(in oklab, var(--site-ink, #111) 3%, white) !important; }

/* Headings */
html[data-headings="upper"] :is(h1, h2, .sec-title h2) { text-transform: uppercase; letter-spacing: 0.01em; }

/* Header: the thin top strip takes the theme's dark or brand color */
html[data-header="dark"] .main-header .header-top { background: var(--site-ink, #111) !important; }
html[data-header="brand"] .main-header .header-top { background: var(--theme-color) !important; }
html:is([data-header="dark"], [data-header="brand"]) .main-header .header-top :is(a, p, span, li, i, button) { color: rgb(255 255 255 / 0.9) !important; }
html[data-header="glass"] .main-header .header-lower { background: color-mix(in oklab, var(--site-surface, #fff) 80%, transparent) !important; backdrop-filter: blur(12px); }

/* Preview bar */
.theme-preview-bar { position: sticky; top: 0; z-index: 9999; box-sizing: border-box; min-height: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; padding: 8px 16px; background: #111827; color: #fff; font: 14px/1.4 system-ui, sans-serif; }
.theme-preview-bar a { color: #fff !important; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }