/*
Theme Name: Nanobayt Elektronika
Theme URI: https://nanobayt.az
Description: Nanobayt Electronics üçün Storefront child theme — ağ fon, qara/yaşıl brend rəngləri, daim aktiv sol kateqoriya paneli.
Author: Nanobayt
Template: storefront
Version: 3.5.0
Text Domain: nanobayt-child
*/

/* =========================================================
   0. SELF-HOSTED FONTS
   ========================================================= */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('fonts/inter-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('fonts/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 500 700;
	font-display: swap;
	src: url('fonts/space-grotesk-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Space Grotesk';
	font-style: normal;
	font-weight: 500 700;
	font-display: swap;
	src: url('fonts/space-grotesk-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'JetBrains Mono';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'JetBrains Mono';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url('fonts/jetbrains-mono-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================
   1. BRAND TOKENS
   ========================================================= */
:root{
	--nb-green: #20C31A;
	--nb-green-dark: #189914;
	--nb-black: #0D0D0D;
	--nb-charcoal: #1A1A1A;
	--nb-line: #E5E7EB;
	--nb-gray: #6B7280;
	--nb-gray-light: #F5F6F8;
	--nb-white: #FFFFFF;
	--nb-radius: 8px;
}

/* =========================================================
   2. BASE / TYPOGRAPHY
   ========================================================= */
body{
	background-color: var(--nb-white);
	color: #222222;
	font-family: 'Inter', -apple-system, sans-serif;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6{
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--nb-black);
}

a{ transition: color .15s ease; }

.price, .woocommerce ul.products li.product .price,
.sku, code{ font-family: 'JetBrains Mono', monospace; }

/* =========================================================
   3. HEADER
   ========================================================= */
#masthead.site-header{
	background-color: var(--nb-black);
	border-bottom: 1px solid #222;
}
#masthead .site-branding .custom-logo{ max-height: 52px; width: auto; }
#masthead .site-title a, #masthead .site-description{ color: var(--nb-white); }

.main-navigation ul li a{
	color: var(--nb-white);
	font-weight: 600;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a{ color: var(--nb-green); }
.main-navigation ul ul li{ background-color: var(--nb-charcoal); }
.main-navigation ul ul li a{ color: var(--nb-white); }
.storefront-primary-navigation{ background-color: var(--nb-black); }

#masthead .site-header-cart a.cart-contents,
#masthead .site-search a{ color: var(--nb-white); }
#masthead .site-header-cart .cart-contents:hover{ color: var(--nb-green); }
#masthead .site-header-cart .count{ background-color: var(--nb-green); color: var(--nb-black); }

/* =========================================================
   4. BUTTONS
   ========================================================= */
.button, a.button, button, input[type="submit"],
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit{
	background-color: var(--nb-green);
	color: var(--nb-black);
	border: none;
	border-radius: var(--nb-radius);
	font-weight: 700;
	font-family: 'Inter', sans-serif;
	padding: 0.85em 1.6em;
	transition: background-color .15s ease, transform .15s ease;
}
.button:hover, a.button:hover, button:hover, input[type="submit"]:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce #respond input#submit:hover{
	background-color: var(--nb-green-dark);
	color: var(--nb-white);
	transform: translateY(-1px);
}
.woocommerce a.added_to_cart{ color: var(--nb-green-dark); font-weight: 600; }

/* =========================================================
   5. LAYOUT — SIDEBAR ON THE LEFT (with a real gap from content)
   ========================================================= */
#primary.content-area{ float: right; width: 70%; }
#secondary.widget-area{ float: left; width: 23%; margin-right: 3%; }

/* =========================================================
   6. CATEGORY SIDEBAR (signature element — always expanded)
   ========================================================= */
#secondary.widget-area .widget{
	background: var(--nb-white);
	border: 1px solid var(--nb-line);
	border-radius: var(--nb-radius);
	padding: 0;
	position: sticky;
	top: 24px;
	/* flyout sub-panels must be able to render outside this box */
	overflow: visible;
}
#secondary.widget-area .widget-title,
#secondary.widget-area .widget > h2{
	font-family: 'Space Grotesk', sans-serif;
	background-color: var(--nb-black);
	color: var(--nb-white);
	margin: 0;
	padding: 14px 18px;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-bottom: none;
}

/* WooCommerce Product Categories block list — scoped to #secondary to beat Storefront defaults. */
#secondary .wc-block-product-categories-list{
	list-style: none;
	margin: 0;
	padding: 8px 0;
	display: block;
}
/* NOTE: intentionally no max-height/overflow here — overflow:auto on an axis
   forces the other axis to clip too (per spec), which would cut off the
   flyout panels. With only top-level rows shown, the list stays short anyway. */
#secondary .wc-block-product-categories-list li{ margin: 0; }
#secondary .wc-block-product-categories-list-item{ position: relative; }

/* top-level row: icon + name + chevron */
#secondary .wc-block-product-categories-list--depth-0 > li > a{
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 30px 10px 18px;
	color: var(--nb-black);
	font-weight: 600;
	font-size: 0.9rem;
}
#secondary .nb-cat-icon{
	flex: 0 0 auto;
	width: 18px; height: 18px;
	color: var(--nb-gray);
}
#secondary .nb-cat-icon svg{ width: 100%; height: 100%; display: block; }
#secondary .wc-block-product-categories-list-item.has-children > a::after{
	content: '›';
	position: absolute;
	right: 14px; top: 50%;
	transform: translateY(-50%);
	color: var(--nb-gray);
	font-size: 1.1rem;
	line-height: 1;
}
#secondary .wc-block-product-categories-list-item.has-children:hover > a,
#secondary .wc-block-product-categories-list-item.flyout-open > a{
	background-color: var(--nb-gray-light);
	color: var(--nb-green-dark);
}
#secondary .wc-block-product-categories-list-item.has-children:hover > a .nb-cat-icon,
#secondary .wc-block-product-categories-list-item.flyout-open > a .nb-cat-icon,
#secondary .wc-block-product-categories-list-item.has-children:hover > a::after,
#secondary .wc-block-product-categories-list-item.flyout-open > a::after{
	color: var(--nb-green-dark);
}

/* flyout sub-category panel */
#secondary .wc-block-product-categories-list ul.wc-block-product-categories-list{
	position: absolute;
	left: 100%;
	top: 0;
	margin-left: 10px;
	min-width: 240px;
	max-height: none;
	background: var(--nb-white);
	border: 1px solid var(--nb-line);
	border-radius: var(--nb-radius);
	box-shadow: 0 12px 28px rgba(0,0,0,0.12);
	padding: 8px 0;
	list-style: none;
	z-index: 100;
	opacity: 0;
	visibility: hidden;
	transform: translateX(-6px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
#secondary .wc-block-product-categories-list-item.flyout-open > ul.wc-block-product-categories-list,
#secondary .wc-block-product-categories-list-item.has-children:hover > ul.wc-block-product-categories-list{
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}
#secondary .wc-block-product-categories-list ul.wc-block-product-categories-list li a{
	display: block;
	padding: 8px 20px;
	font-weight: 500;
	font-size: 0.87rem;
	color: var(--nb-black);
	white-space: nowrap;
}
#secondary .wc-block-product-categories-list a:hover{
	background-color: var(--nb-gray-light);
	color: var(--nb-green-dark);
}
/* reference design keeps the sidebar clean — no per-row counts */
#secondary .wc-block-product-categories-list .wc-block-product-categories-list-item-count{
	display: none;
}

/* scrollbar polish for the top-level list */
#secondary .wc-block-product-categories-list--depth-0::-webkit-scrollbar{ width: 6px; }
#secondary .wc-block-product-categories-list--depth-0::-webkit-scrollbar-thumb{ background: var(--nb-line); border-radius: 3px; }

/* mobile: flyouts don't work well as hover panels — fall back to inline expand */
@media (max-width: 768px){
	#secondary .wc-block-product-categories-list ul.wc-block-product-categories-list{
		position: static;
		opacity: 1; visibility: visible; transform: none;
		box-shadow: none;
		border: none;
		border-top: 1px solid var(--nb-line);
		border-radius: 0;
		margin-left: 0;
		display: none;
	}
	#secondary .wc-block-product-categories-list-item.flyout-open > ul.wc-block-product-categories-list{
		display: block;
	}
}

/* Search widget in sidebar */
#secondary.widget-area .wp-block-search__input{
	border: 1px solid var(--nb-line);
	border-radius: var(--nb-radius);
}
#secondary.widget-area .wp-block-search{ padding: 14px 18px; }

/* =========================================================
   7. PRODUCT LOOP
   ========================================================= */
.woocommerce ul.products li.product{
	background-color: var(--nb-white);
	border: 1px solid var(--nb-line);
	border-radius: var(--nb-radius);
	padding: 1em;
	transition: all .15s ease-in-out;
}
.woocommerce ul.products li.product:hover{
	box-shadow: 0 8px 20px rgba(0,0,0,0.08);
	border-color: var(--nb-green);
	transform: translateY(-3px);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
	font-family: 'Space Grotesk', sans-serif;
	font-size: 1rem;
	font-weight: 600;
	color: var(--nb-black);
}
.woocommerce ul.products li.product .price{
	color: var(--nb-green-dark);
	font-weight: 700;
}
.woocommerce span.onsale{
	background-color: var(--nb-green);
	color: var(--nb-black);
	font-weight: 700;
	border-radius: 50px;
	min-height: 3em; min-width: 3em; line-height: 3em;
}
.woocommerce .star-rating span, .woocommerce .star-rating::before{ color: var(--nb-green); }

/* =========================================================
   8. SINGLE PRODUCT
   ========================================================= */
.single-product div.product p.price, .single-product div.product span.price{
	font-family: 'JetBrains Mono', monospace;
	color: var(--nb-green-dark);
	font-size: 1.4rem;
	font-weight: 700;
}
.woocommerce-tabs ul.tabs li.active{ border-bottom: 3px solid var(--nb-green); }
.woocommerce div.product form.cart input.qty{
	border-radius: var(--nb-radius);
	border: 1px solid var(--nb-line);
}

/* =========================================================
   9. CART / CHECKOUT / FORMS
   ========================================================= */
.woocommerce-checkout #payment{ background-color: var(--nb-gray-light); border-radius: var(--nb-radius); }
.woocommerce-checkout #payment div.payment_box{ background-color: var(--nb-white); border-radius: var(--nb-radius); }

input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], textarea, select{
	border-radius: var(--nb-radius);
	border: 1px solid var(--nb-line);
	transition: all .15s ease-in-out;
}
input:focus, textarea:focus, select:focus{
	border-color: var(--nb-green);
	outline: none;
	box-shadow: 0 0 0 3px rgba(32,195,26,0.15);
}

/* =========================================================
   10. FOOTER
   ========================================================= */
#colophon.site-footer{ background-color: var(--nb-black); color: #cccccc; }
#colophon.site-footer .widget-title{
	color: var(--nb-white);
	text-transform: uppercase;
	font-size: 0.9rem;
	letter-spacing: 0.03em;
	font-family: 'Space Grotesk', sans-serif;
}
#colophon.site-footer a{ color: #cccccc; }
#colophon.site-footer a:hover{ color: var(--nb-green); }
.site-info{ background-color: var(--nb-black); color: #888888; border-top: 1px solid #222; }

/* =========================================================
   11. RESPONSIVE
   ========================================================= */
@media (max-width: 768px){
	#primary.content-area, #secondary.widget-area{ float: none; width: 100%; }
	#secondary.widget-area .widget{ position: static; margin-bottom: 24px; }
	#masthead .site-branding .custom-logo{ max-height: 44px; }
}