/*
Theme Name: LightSystems
Theme URI: https://gatubelysning.se
Author: LightSystems Sweden AB
Description: Tema för LightSystems Sweden AB. Svart och guld, anpassat för WooCommerce och tillägget LightSystems B2B (offert, faktura och Bygg din egen stolpe).
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: lightsystems
*/

/* ---------- Grund ---------- */
body { -webkit-font-smoothing: antialiased; }
:where(h1, h2, h3) { text-wrap: balance; }
.ls-eyebrow { font-family: var(--wp--preset--font-family--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--gold); margin: 0; }
.ls-num { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--wp--preset--color--gold); outline-offset: 2px; }

/* ---------- Sidhuvud ---------- */
.ls-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--wp--preset--color--night-line); }
.admin-bar .ls-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .ls-header { top: 0; position: relative; } }
.ls-header .ls-logo img { height: 64px; width: auto; display: block; }
.ls-header .wp-block-navigation a { color: var(--wp--preset--color--night-muted); text-decoration: none; font-weight: 500; font-size: 15px; padding: 6px 2px; }
.ls-header .wp-block-navigation a:hover,
.ls-header .wp-block-navigation .current-menu-item > a { color: var(--wp--preset--color--gold); }
.ls-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--black); color: var(--wp--preset--color--cream); }
.ls-header .wp-block-navigation__responsive-container-open svg,
.ls-header .wp-block-navigation__responsive-container-close svg { fill: var(--wp--preset--color--cream); }
.ls-header .wc-block-mini-cart__button { color: var(--wp--preset--color--black); background: var(--wp--preset--color--gold); border-radius: 6px; padding: 8px 12px; }
.ls-header .wc-block-mini-cart__badge { background: var(--wp--preset--color--black) !important; color: var(--wp--preset--color--gold) !important; }
.ls-header .wc-block-customer-account a { color: var(--wp--preset--color--cream); }
.ls-header .ls-search input { background: #1a1812; border: 1px solid var(--wp--preset--color--night-line); color: var(--wp--preset--color--cream); border-radius: 6px; }
.ls-header .ls-search input::placeholder { color: var(--wp--preset--color--night-muted); }
.ls-header .ls-search .wp-block-search__button { background: transparent; color: var(--wp--preset--color--cream); border: 0; }

/* ---------- Hero ---------- */
.ls-hero { overflow: hidden; }
.ls-hero h1 { font-size: clamp(44px, 7vw, 88px); text-transform: uppercase; line-height: .98; margin: 14px 0 18px; }
.ls-hero h1 em { font-style: normal; color: var(--wp--preset--color--gold); }
.ls-hero p.ls-lead { color: var(--wp--preset--color--night-muted); max-width: 52ch; font-size: 17px; }
.ls-facts { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 28px; }
.ls-facts div { font-size: 13px; color: var(--wp--preset--color--night-muted); }
.ls-facts strong { display: block; font-family: var(--wp--preset--font-family--display); font-size: 26px; font-weight: 600; color: var(--wp--preset--color--cream); letter-spacing: .02em; }
.ls-street { width: 100%; height: auto; display: block; }
.ls-street .pole { fill: #6e6656; } .ls-street .lamp { fill: #ffd86b; } .ls-street .road { fill: #1c1a15; }
.ls-street .lit { animation: ls-on .5s ease-out both; }
.ls-street g:nth-child(3) .lit { animation-delay: .25s; } .ls-street g:nth-child(4) .lit { animation-delay: .5s; } .ls-street g:nth-child(5) .lit { animation-delay: .75s; }
@keyframes ls-on { 0% { opacity: .25 } 60% { opacity: 1 } 75% { opacity: .6 } 100% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .ls-street .lit { animation: none; } }

/* Knappar på mörk botten */
.ls-btn-ghost .wp-block-button__link { background: transparent !important; color: var(--wp--preset--color--cream) !important; border: 1px solid #6e6656 !important; }

/* ---------- Sektioner ---------- */
.ls-section-title { text-transform: uppercase; }
.ls-steps { counter-reset: s; }
.ls-steps > .wp-block-column { border-top: 3px solid var(--wp--preset--color--ink); padding-top: 14px; }
.ls-steps > .wp-block-column::before { counter-increment: s; content: "0" counter(s); font-family: var(--wp--preset--font-family--mono); font-size: 12px; color: var(--wp--preset--color--gold-dark); display: block; margin-bottom: 6px; }
.ls-steps h3 { font-family: var(--wp--preset--font-family--body); font-size: 17px; font-weight: 600; text-transform: none; margin: 0 0 4px; letter-spacing: 0; }
.ls-steps p { color: var(--wp--preset--color--muted); font-size: 15px; margin: 0; }
.ls-build-teaser svg { width: 100%; max-width: 360px; height: auto; display: block; margin-inline: auto; }

/* ---------- Sidfot ---------- */
.ls-footer a { color: var(--wp--preset--color--cream); }
.ls-footer strong { color: var(--wp--preset--color--cream); display: block; margin-bottom: 4px; }
.ls-footer p { color: var(--wp--preset--color--night-muted); font-size: 14px; margin: 0; }

/* ---------- WooCommerce: produktlistor (klassiska och block) ---------- */
.woocommerce ul.products li.product,
.wc-block-grid__product,
.wc-block-product,
.wp-block-post.product {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 6px;
	padding: 0 0 16px !important;
	overflow: hidden;
	text-align: left;
	display: flex; flex-direction: column;
}
.woocommerce ul.products li.product a img,
.wc-block-components-product-image img { background: var(--wp--preset--color--tile); margin: 0 0 12px !important; aspect-ratio: 1; object-fit: contain; }
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-components-product-name,
.wp-block-post.product .wp-block-post-title { font-family: var(--wp--preset--font-family--body) !important; font-size: 16px !important; font-weight: 600; text-transform: none; padding: 0 16px !important; letter-spacing: 0; }
.wp-block-post.product .wp-block-post-title a { text-decoration: none; color: inherit; }
.woocommerce ul.products li.product .price,
.wc-block-components-product-price { color: var(--wp--preset--color--ink) !important; font-weight: 600; font-size: 17px !important; padding: 0 16px; font-variant-numeric: tabular-nums; }
.woocommerce ul.products li.product .button,
.wc-block-components-product-button { margin: auto 16px 0 !important; }
.woocommerce ul.products li.product .button,
.wc-block-components-product-button .wp-block-button__link { width: calc(100% - 0px); text-align: center; }
.woocommerce span.onsale { background: var(--wp--preset--color--gold); color: var(--wp--preset--color--black); }
.ls-sku { display: block; padding: 0 16px; font-family: var(--wp--preset--font-family--mono); font-size: 11px; color: var(--wp--preset--color--muted); letter-spacing: .04em; }
.ls-ask, .lv-ask { font-weight: 600; }

/* Knappar i WooCommerce */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .wc-block-components-button:not(.is-link),
.woocommerce a.button.alt, .woocommerce button.button.alt,
.wp-element-button, .wc-block-components-product-button .wp-block-button__link {
	background: var(--wp--preset--color--gold) !important;
	color: var(--wp--preset--color--black) !important;
	border: 1px solid var(--wp--preset--color--gold) !important;
	border-radius: 6px !important;
	font-weight: 600 !important;
	text-decoration: none !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .wp-element-button:hover { background: var(--wp--preset--color--gold-dark) !important; border-color: var(--wp--preset--color--gold-dark) !important; }
.woocommerce .lv-quote-button, .woocommerce a.button.lv-quote-button {
	background: transparent !important; color: var(--wp--preset--color--ink) !important; border-color: var(--wp--preset--color--ink) !important;
}
.woocommerce .lv-quote-button:hover { background: var(--wp--preset--color--ink) !important; color: var(--wp--preset--color--surface) !important; }

/* Produktsida */
.woocommerce div.product .product_title { text-transform: uppercase; }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--wp--preset--color--ink); font-weight: 600; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom-color: var(--wp--preset--color--gold); }
.woocommerce table.shop_attributes th { font-weight: 400; color: var(--wp--preset--color--muted); }
.woocommerce table.shop_attributes td { font-family: var(--wp--preset--font-family--mono); font-style: normal; }
.woocommerce table.shop_attributes td p { padding: 6px 0; }

/* Meddelanden */
.woocommerce-message, .woocommerce-info, .wc-block-components-notice-banner.is-success, .wc-block-components-notice-banner.is-info { border-top-color: var(--wp--preset--color--gold) !important; border-color: var(--wp--preset--color--gold) !important; }
.woocommerce-message::before, .woocommerce-info::before { color: var(--wp--preset--color--gold-dark); }

/* Kategorifilter i butiken */
.ls-cats { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 24px; }
.ls-cats a { display: inline-flex; gap: 6px; align-items: center; padding: 7px 13px; border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--surface); border-radius: 999px; font-size: 14px; text-decoration: none; color: var(--wp--preset--color--ink); }
.ls-cats a span { font-family: var(--wp--preset--font-family--mono); font-size: 11px; color: var(--wp--preset--color--muted); }
.ls-cats a.is-current { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--surface); border-color: var(--wp--preset--color--ink); }
.ls-cats a.is-current span { color: var(--wp--preset--color--gold); }

/* Konfiguratorns accent följer temat */
:root { --lv-accent: var(--wp--preset--color--gold); --lv-accent-ink: var(--wp--preset--color--black); }

/* Rutnät i stället för WooCommerce flytande kolumner */
.woocommerce ul.products, .woocommerce-page ul.products { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin: 0 0 32px; }
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none !important; }
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; }
.woocommerce ul.products li.product .button { display: block; width: auto; margin: auto 16px 0 !important; padding: 10px 12px; }
.woocommerce ul.products li.product .woocommerce-LoopProduct-link { display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px; text-decoration: none; color: inherit; }
.woocommerce .woocommerce-ordering select { padding: 8px 10px; border: 1px solid var(--wp--preset--color--line); border-radius: 6px; background: var(--wp--preset--color--surface); }
.woocommerce .woocommerce-breadcrumb { font-size: 14px; color: var(--wp--preset--color--muted); }
.woocommerce .woocommerce-breadcrumb a { color: var(--wp--preset--color--muted); }
@media (max-width: 520px) {
	.woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: 1fr 1fr; gap: 10px; }
	.woocommerce ul.products li.product .woocommerce-loop-product__title, .ls-sku, .woocommerce ul.products li.product .price { padding-inline: 10px !important; }
	.woocommerce ul.products li.product .button { margin-inline: 10px !important; font-size: 13px; }
}
.woocommerce .quantity .qty { width: 72px; padding: 10px 8px; border: 1px solid var(--wp--preset--color--line); border-radius: 6px; background: var(--wp--preset--color--surface); }
.woocommerce div.product form.cart { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.woocommerce div.product form.cart .button { padding: 12px 22px; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { background: var(--wp--preset--color--tile); border-color: var(--wp--preset--color--line); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { background: var(--wp--preset--color--bg); }