/* =====================================================================
   Design languages (v53). The nine skins in themes.css differ in more than colour:
   typeface, corner radius, how a button and a card feel. This file applies those
   structural tokens to the app's components. The default "nexa" skin is excluded
   on purpose, so the original look is exactly as it was.
   ===================================================================== */
html[data-skin]:not([data-skin="nexa"]) body { font-family: var(--font-body); background-color: var(--bg); background-image: var(--bg-fx, none); background-attachment: fixed; }
html[data-skin]:not([data-skin="nexa"]) h1, html[data-skin]:not([data-skin="nexa"]) h2, html[data-skin]:not([data-skin="nexa"]) h3, html[data-skin]:not([data-skin="nexa"]) .view-head h2, html[data-skin]:not([data-skin="nexa"]) .brand-name, html[data-skin]:not([data-skin="nexa"]) .modal-box h3, html[data-skin]:not([data-skin="nexa"]) .entity-dialog h3, html[data-skin]:not([data-skin="nexa"]) .nx-urgent h3, html[data-skin]:not([data-skin="nexa"]) .kpi > b, html[data-skin]:not([data-skin="nexa"]) .stat h2, html[data-skin]:not([data-skin="nexa"]) .menu-header h1, html[data-skin]:not([data-skin="nexa"]) .menu-category-title { font-family: var(--font-head); letter-spacing: var(--h-ls); }
html[data-skin]:not([data-skin="nexa"]) h1, html[data-skin]:not([data-skin="nexa"]) h2, html[data-skin]:not([data-skin="nexa"]) .view-head h2, html[data-skin]:not([data-skin="nexa"]) .kpi > b { font-weight: var(--h-fw); }
html[data-skin]:not([data-skin="nexa"]) .card h3, html[data-skin]:not([data-skin="nexa"]) .modal-box h3 { font-weight: var(--h-fw); color: var(--ink); }

/* surfaces */
html[data-skin]:not([data-skin="nexa"]) .card, html[data-skin]:not([data-skin="nexa"]) .kpi, html[data-skin]:not([data-skin="nexa"]) .stat, html[data-skin]:not([data-skin="nexa"]) .modal-box, html[data-skin]:not([data-skin="nexa"]) .entity-dialog, html[data-skin]:not([data-skin="nexa"]) .shop-detail-box, html[data-skin]:not([data-skin="nexa"]) .skin-card, html[data-skin]:not([data-skin="nexa"]) .product-card, html[data-skin]:not([data-skin="nexa"]) .cart, html[data-skin]:not([data-skin="nexa"]) .nx-urgent { border: var(--card-border); border-radius: var(--r-card); box-shadow: var(--card-shadow); }
html[data-skin]:not([data-skin="nexa"]) .nx-notify:not(.nx-static) { border-radius: var(--r-card); }
html[data-skin]:not([data-skin="nexa"]) input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), html[data-skin]:not([data-skin="nexa"]) select, html[data-skin]:not([data-skin="nexa"]) textarea { border-radius: var(--r-ctl); }

html[data-skin]:not([data-skin="nexa"]) body:has(#authScreen:not([hidden])) { background-color: var(--bg); background-image: var(--bg-fx, none); }
html[data-skin]:not([data-skin="nexa"]) .cart-row .qty-controls, html[data-skin]:not([data-skin="nexa"]) .cart-row .qty-controls button, html[data-skin]:not([data-skin="nexa"]) .cart-count, html[data-skin]:not([data-skin="nexa"]) .status-badge, html[data-skin]:not([data-skin="nexa"]) .badge-new, html[data-skin]:not([data-skin="nexa"]) .modifier-optional-badge, html[data-skin]:not([data-skin="nexa"]) .modifier-required-badge, html[data-skin]:not([data-skin="nexa"]) .stock-badge { border-radius: var(--r-ctl); }

/* buttons */
html[data-skin]:not([data-skin="nexa"]) .primary-btn { background: var(--btn-bg); color: var(--btn-color); border: var(--btn-border); border-radius: var(--r-ctl); box-shadow: var(--btn-shadow); text-transform: var(--btn-tt); letter-spacing: var(--btn-ls); font-weight: var(--btn-fw); transition: filter .15s, transform .12s, background .15s, color .15s; }
html[data-skin]:not([data-skin="nexa"]) .primary-btn:hover:not(:disabled) { filter: brightness(1.07); }
html[data-skin]:not([data-skin="nexa"]) .primary-btn:active:not(:disabled) { transform: translateY(1px); }
html[data-skin]:not([data-skin="nexa"]) .ghost-btn, html[data-skin]:not([data-skin="nexa"]) .void-btn, html[data-skin]:not([data-skin="nexa"]) .pill-btn, html[data-skin]:not([data-skin="nexa"]) .row-act, html[data-skin]:not([data-skin="nexa"]) .mb-icon { border-radius: var(--r-ctl); }
html[data-skin]:not([data-skin="nexa"]) .seg, html[data-skin]:not([data-skin="nexa"]) .seg-btn, html[data-skin]:not([data-skin="nexa"]) .tag, html[data-skin]:not([data-skin="nexa"]) .filter-tab { border-radius: var(--r-ctl); }

/* a surface inside a card gets a hairline, not a second heavy frame */
html[data-skin]:not([data-skin="nexa"]) .card .stat, html[data-skin]:not([data-skin="nexa"]) .card .kpi, html[data-skin]:not([data-skin="nexa"]) .card .product-card { border: 1px solid var(--line); border-radius: calc(var(--r-card) * .7); box-shadow: none; }
html[data-skin]:not([data-skin="nexa"]) .card .stat { padding: 14px 16px; }

/* navigation */
html[data-skin]:not([data-skin="nexa"]) .nav-item { border-radius: var(--nav-r); }
html[data-skin]:not([data-skin="nexa"]) .nav-item.active { background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--ink); }

/* per-skin character that a variable cannot express */
html[data-skin="paris"]:not([data-skin="nexa"]) .primary-btn:hover:not(:disabled) { background: var(--accent); color: var(--on-accent); filter: none; }
html[data-skin="paris"]:not([data-skin="nexa"]) .card h3 { font-size: 1.12rem; font-style: normal; }
html[data-skin="paris"]:not([data-skin="nexa"]) .card h3::before, html[data-skin="milano"]:not([data-skin="nexa"]) .card h3::before, html[data-skin="london"]:not([data-skin="nexa"]) .card h3::before { display: none; }
html[data-skin="paris"]:not([data-skin="nexa"]) .nav-item.active, html[data-skin="london"]:not([data-skin="nexa"]) .nav-item.active { background: transparent; border-inline-start-color: var(--accent); }
html[data-skin="zurich"]:not([data-skin="nexa"]) .card h3, html[data-skin="zurich"]:not([data-skin="nexa"]) .eyebrow, html[data-skin="zurich"]:not([data-skin="nexa"]) .nav-group-title { text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; }
html[data-skin="zurich"]:not([data-skin="nexa"]) .card h3::before { width: 10px; height: 10px; border-radius: 0; }
html[data-skin="berlin"]:not([data-skin="nexa"]) .primary-btn:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: none; }
html[data-skin="berlin"]:not([data-skin="nexa"]) .card h3::before { width: 12px; height: 12px; border-radius: 0; background: var(--accent); }
html[data-skin="milano"]:not([data-skin="nexa"]) .card { border-top: 2px solid var(--accent); }
html[data-skin="copenhagen"]:not([data-skin="nexa"]) .card, html[data-skin="copenhagen"]:not([data-skin="nexa"]) .kpi { background: color-mix(in srgb, var(--panel) 64%, transparent); -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5); }
html[data-skin="stockholm"]:not([data-skin="nexa"]) .nav-item, html[data-skin="copenhagen"]:not([data-skin="nexa"]) .nav-item, html[data-skin="amsterdam"]:not([data-skin="nexa"]) .nav-item { border-inline-start-color: transparent !important; }
html[data-skin="amsterdam"]:not([data-skin="nexa"]) .card:hover, html[data-skin="stockholm"]:not([data-skin="nexa"]) .card:hover { transform: none; }
html[data-skin="amsterdam"]:not([data-skin="nexa"]) .tag { font-weight: 700; }
@media (prefers-reduced-motion: reduce) { html[data-skin]:not([data-skin="nexa"]) .primary-btn { transition: none; } }
html[data-skin]:not([data-skin="nexa"]) .grain { display: none; }
html[data-skin]:not([data-skin="nexa"]) .card .stat { margin-bottom: 10px; }