/* ── Theme: Swiss ──────────────────────────────────────────────────────────
   Dark Swiss-style storefront. Styles only: it restyles the store's own
   layout (utility bar, masthead, main menu, page body, footer) and never
   replaces templates, so each store keeps its own menus, pages and content.

   Loaded via theme.head, i.e. BEFORE catalog.css. The variable overrides
   below feed catalog.css; every component rule is prefixed with `html` so
   it outranks catalog.css's equal selectors, and rules that must beat
   template inline styles use !important. General content typography is
   wrapped in :where() (no added specificity) so a store's own classes,
   like a custom homepage section, still win over the theme's defaults. Every text color clears a 6:1
   contrast ratio on the page background. */

:root {
    --sw-bg:          #080d18;
    --sw-bg-2:        #0c1220;
    --sw-rule:        #26324a;
    --sw-rule-hi:     #3a4a68;
    --sw-text:        #eef2f8;
    --sw-text-dim:    #b8c4d8;
    --sw-text-mute:   #a0b0cc;
    --sw-accent:      #ffc107;
    --sw-on-accent:   #141000;
    --sw-gutter:      clamp(16px, 4vw, 48px);
    --sw-max:         1440px;
    --sw-font:        'Inter Tight', 'Helvetica Neue', Helvetica, Arial, sans-serif;

    --nc-primary:           var(--sw-accent);
    --nc-primary-hover:     #ffd54f;
    --nc-primary-muted:     rgba(255,193,7,.12);
    --nc-primary-text:      var(--sw-on-accent);
    --nc-success:           #81c784;
    --nc-danger:            #ef9a9a;
    --nc-warning:           #ffb74d;
    --nc-text:              var(--sw-text);
    --nc-text-secondary:    var(--sw-text-dim);
    --nc-text-dim:          var(--sw-text-mute);
    --nc-bg:                var(--sw-bg);
    --nc-bg-alt:            var(--sw-bg-2);
    --nc-bg-page:           var(--sw-bg);
    --nc-bg-card:           var(--sw-bg);
    --nc-surface:           var(--sw-bg);
    --nc-hover:             var(--sw-bg-2);
    --nc-border:            var(--sw-rule-hi);
    --nc-border-light:      var(--sw-rule);
    --nc-border-focus:      var(--sw-accent);
    --nc-topbar-bg:         #1b2740;
    --nc-footer-bg:         var(--sw-bg);
    --nc-footer-text:       var(--sw-text-dim);
    --nc-footer-text-hover: var(--sw-accent);
    --nc-footer-gradient:   var(--sw-bg);
    --nc-utility-text:      var(--sw-text-mute);
    --nc-utility-text-hover:var(--sw-text);
    --nc-radius:            0;
    --nc-radius-sm:         0;
    --nc-radius-lg:         0;
    --nc-box-shadow:        none;
    --nc-box-shadow-med:    none;
    --nc-box-shadow-far:    none;
    --nc-focus-shadow:      0 0 0 2px rgba(255,193,7,.35);
    --nc-font:              var(--sw-font);
    --nc-font-heading:      var(--sw-font);
    --nc-content-w:         var(--sw-max);
    --nc-content-px:        var(--sw-gutter);
}

/* ── Base ───────────────────────────────────────────────────────────────── */
html body { background: var(--sw-bg); color: var(--sw-text); font-family: var(--sw-font); -webkit-font-smoothing: antialiased; }
html a { color: var(--sw-text); }
html a:hover { color: var(--sw-accent); text-decoration: none; }
html :where(h1, h2, h3, h4, h5, h6) { font-family: var(--sw-font); color: var(--sw-text); }

/* Square corners and no shadows across the storefront (beats inline
   styles). Radios, checkboxes, toggles and spinners keep their shapes. */
html body *:not(input[type="radio"]):not(input[type="checkbox"]):not(.ios-toggle):not(.ios-toggle *):not([class*="spinner"]) {
    border-radius: 0 !important;
}
html body * { box-shadow: none !important; text-shadow: none; }
html :focus-visible { outline: 2px solid var(--sw-accent); outline-offset: 2px; }

/* ── Utility bar (top strip: phone, account links) ──────────────────────── */
html #utility-bar { background: var(--sw-bg); color: var(--sw-text-mute); border-bottom: 1px solid var(--sw-rule); }
html .utility-bar-inner { min-height: 40px; padding-top: .45rem; padding-bottom: .45rem; }
html .utility-bar-right { font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; gap: 24px; }
html .utility-bar-right a, html .utility-phone { color: var(--sw-text-mute); font-size: .8rem; }
html .utility-bar-right a:hover { color: var(--sw-text); }
html #mini-logo, html #mini-logo:hover { color: var(--sw-text); }

/* ── Masthead (logo, search, cart) ──────────────────────────────────────── */
html #masthead { background: var(--sw-bg); border-bottom: 1px solid var(--sw-rule); }
html .masthead-inner { background-image: none; gap: 28px; padding-top: 1.1rem; padding-bottom: 1.1rem; }
html #store-search { max-width: 420px; margin-left: auto; }
html #store-search form { gap: 0; border-bottom: 1px solid var(--sw-rule-hi); }
html #store-search form:focus-within { border-bottom-color: var(--sw-accent); }
html #store-search input {
    background: transparent !important; border: 0 !important; color: var(--sw-text) !important;
    padding: .5rem 0 !important; font-size: .95rem; outline: none;
}
html #store-search input::placeholder { color: var(--sw-text-mute); }
html #store-search .btn {
    background: transparent !important; color: var(--sw-text-dim) !important; border: 0 !important;
    font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: .5rem 0 .5rem 12px;
}
html #store-search .btn:hover { color: var(--sw-text) !important; }
html #store-cart { color: var(--sw-text-dim); font-size: .9rem; font-weight: 500; gap: 8px; }
html #store-cart:hover { color: var(--sw-text); }
html .cart-icon { display: none; }
html .cart-label { font-size: .9rem; font-variant-numeric: tabular-nums; }
html .ham-line { background: var(--sw-text); }

/* ── Main menu ──────────────────────────────────────────────────────────── */
html #menu-main { background: var(--sw-bg); border-bottom: 1px solid var(--sw-rule); }
html .menu-main-inner { gap: 4px 28px; }
html .menu-main-item {
    padding: .85rem 0; font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: var(--sw-text-mute); border-bottom: 2px solid transparent;
}
html .menu-main-item:hover { color: var(--sw-text); border-bottom-color: transparent; }
html .menu-main-item.active { color: var(--sw-text); border-bottom-color: var(--sw-accent); }
html #menu-subcats { background: var(--sw-bg); border-bottom: 1px solid var(--sw-rule); }
html #menu-subcats a { color: var(--sw-text-mute); font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
html #menu-subcats a:hover { color: var(--sw-text); }

/* ── Page body and type ─────────────────────────────────────────────────── */
html #page-body, html #page-body.no-sidebar {
    padding: clamp(32px, 5vw, 64px) var(--sw-gutter) clamp(56px, 7vw, 96px);
}
html :where(#main-content) h1 {
    font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 800; line-height: .98; letter-spacing: -.015em;
    margin-bottom: clamp(20px, 2.5vw, 32px);
}
html :where(#main-content) h2 { font-size: clamp(1.35rem, 2.2vw, 1.9rem); font-weight: 700; line-height: 1.12; letter-spacing: -.01em; }
html :where(#main-content) h3 { font-size: 1.1rem; font-weight: 700; }
html :where(#main-content) :where(p, li) { color: var(--sw-text-dim); line-height: 1.65; }
html :where(#main-content) strong { color: var(--sw-text); }
html #main-content p a:not(.btn), html #main-content li a:not(.btn) {
    color: var(--sw-text); border-bottom: 1px solid var(--sw-accent); padding-bottom: 1px;
}
html #main-content p a:not(.btn):hover, html #main-content li a:not(.btn):hover { color: var(--sw-accent); }
html :where(#main-content) li::marker { color: var(--sw-accent); }

/* ── Rich-text content (CMS pages): generous spacing ───────────────────── */
html .block-rich-text { line-height: 1.8; }
html .block-rich-text :where(p, li) { line-height: 1.8; }
html .block-rich-text p { margin: 0 0 1.1rem; }
html .block-rich-text :where(ul, ol) { margin: .5rem 0 1.75rem; padding-left: 1.25rem; }
html .block-rich-text li { margin-bottom: .65rem; }
html .block-rich-text li:last-child { margin-bottom: 0; }
html .block-rich-text h2 { font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.25; margin: 2.5rem 0 1rem; }
html .block-rich-text h3 { font-size: 1.1rem; line-height: 1.3; margin: 2rem 0 .75rem; border-bottom: 0; }
html .block-rich-text > :first-child { margin-top: 0; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
html #page-body .btn, html .btn { font-family: var(--sw-font); font-weight: 600; letter-spacing: .01em; }
html #page-body .btn-primary,
html #page-body button[type="submit"]:not(.btn-secondary):not([class*="link"]),
html #page-body input[type="submit"] {
    background: var(--sw-accent) !important; color: var(--sw-on-accent) !important; border: 1px solid var(--sw-accent) !important;
}
html #page-body .btn-primary:hover,
html #page-body button[type="submit"]:not(.btn-secondary):not([class*="link"]):hover,
html #page-body input[type="submit"]:hover {
    background: var(--sw-text) !important; border-color: var(--sw-text) !important; color: var(--sw-on-accent) !important;
}
html #page-body .btn-secondary { background: transparent; color: var(--sw-text); border: 1px solid var(--sw-text-dim); }
html #page-body .btn-secondary:hover { background: var(--sw-text); color: var(--sw-bg); }

/* ── Forms ──────────────────────────────────────────────────────────────── */
html #page-body input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
html #page-body select, html #page-body textarea {
    background: var(--sw-bg-2) !important; color: var(--sw-text) !important; border: 1px solid var(--sw-rule-hi) !important; font-family: inherit;
}
html #page-body input:focus, html #page-body select:focus, html #page-body textarea:focus { border-color: var(--sw-accent) !important; outline: none; }
html #page-body input::placeholder, html #page-body textarea::placeholder { color: var(--sw-text-mute); }
html #page-body select option { background: var(--sw-bg-2); color: var(--sw-text); }
html #page-body label { color: var(--sw-text-dim); }
html #page-body input[type="radio"], html #page-body input[type="checkbox"] { accent-color: var(--sw-accent); }

/* ── Product cards and grids: hairline rules instead of boxes ───────────── */
html .product-card { background: transparent; border: 0; border-top: 1px solid var(--sw-rule-hi); padding-top: 14px; }
html .product-card:hover { transform: none; }
html .product-card-img { background: var(--sw-bg-2); }
html .product-card-body { padding: 14px 0 0; }
html .product-card-name { color: var(--sw-text); font-size: 1rem; font-weight: 600; }
html .product-card-desc { color: var(--sw-text-mute); }
html .product-card-price { color: var(--sw-accent); font-weight: 700; }
html .product-card-list-price { color: var(--sw-text-mute); }

/* ── Tables ─────────────────────────────────────────────────────────────── */
html #page-body table { border-collapse: collapse; color: var(--sw-text); }
html #page-body th {
    background: transparent !important; color: var(--sw-text-mute); font-size: .75rem; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase; text-align: left; border-bottom: 1px solid var(--sw-rule-hi);
}
html #page-body td { border-bottom: 1px solid var(--sw-rule); }
html #page-body tr:hover td { background: transparent; }

/* ── Inline-styled panels and badges in core templates ──────────────────── */
html #page-body [style*="background: var(--nc-bg-alt); border: 1px solid var(--nc-border-light)"] {
    background: transparent !important; border: 0 !important; border-top: 1px solid var(--sw-rule-hi) !important; padding: 20px 0 0 !important;
}
html #page-body td span[style*="background: #"] {
    background: transparent !important; padding: 0 !important; font-size: .75rem !important;
    letter-spacing: .08em; text-transform: uppercase; color: var(--sw-text-mute) !important;
}
html .order-complete-icon { display: none; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
html #site-footer { background: var(--sw-bg); color: var(--sw-text-mute); border-top: 1px solid var(--sw-rule); margin-top: 0; padding: clamp(40px, 5vw, 64px) var(--sw-gutter) 32px; }
html .footer-links { gap: 10px 28px; }
html .footer-links a, html #site-footer a { color: var(--sw-text-dim); font-size: .9rem; }
html .footer-links a:hover, html #site-footer a:hover { color: var(--sw-accent); text-decoration: none; }
html .footer-copy { color: var(--sw-text-mute); font-size: .8rem; }

/* ── Mobile nav drawer ──────────────────────────────────────────────────── */
html #mobile-nav { background: var(--sw-bg); border-right: 1px solid var(--sw-rule); }
html #mobile-nav a { color: var(--sw-text); }
html #mobile-nav-close { color: var(--sw-text); }