/*
Theme Name:   Skwirrel Demo
Theme URI:    https://skwirrel.eu
Description:  A WooCommerce demo theme for Skwirrel PIM, based on Storefront with Skwirrel brand styling.
Author:       Skwirrel
Author URI:   https://skwirrel.eu
Template:     storefront
Version:      1.0.0
License:      GNU General Public License v3 or later
License URI:  https://www.gnu.org/licenses/gpl-3.0.html
Text Domain:  skwirrel-demo
Tags:         e-commerce, woocommerce, child-theme
*/

/* ==========================================================================
   Skwirrel Brand Variables
   ========================================================================== */

:root {
	--skw-blue: #5F84C1;
	--skw-blue-dark: #4A6FA8;
	--skw-blue-light: #7A9DD4;
	--skw-green: #D2DF47;
	--skw-green-dark: #B8C53E;
	--skw-green-light: #E0EB72;
	--skw-dark: #282828;
	--skw-dark-light: #3a3a3a;
	--skw-gray: #f5f5f5;
	--skw-gray-medium: #e0e0e0;
	--skw-white: #ffffff;
	--skw-text: #333333;
	--skw-text-light: #666666;
	--skw-radius: 8px;
	--skw-radius-lg: 12px;
	--skw-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	--skw-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.12);
	--skw-transition: all 0.2s ease;
}

/* ==========================================================================
   Typography
   ========================================================================== */

body,
button,
input,
textarea {
	font-family: "Inter", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	color: var(--skw-text);
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 600;
	color: var(--skw-dark);
}

h1, .alpha {
	font-weight: 700;
}

a {
	color: var(--skw-blue);
	transition: var(--skw-transition);
}

a:hover {
	color: var(--skw-blue-dark);
}

/* ==========================================================================
   Site Header
   ========================================================================== */

.site-header {
	background-color: var(--skw-white);
	border-bottom: 1px solid var(--skw-gray-medium);
	padding-top: 1em;
	padding-bottom: 0;
}

.site-header .site-branding .site-title a {
	color: var(--skw-dark);
	font-weight: 700;
}

.site-header .site-branding .site-description {
	color: var(--skw-text-light);
}

/* ==========================================================================
   Navigation
   ========================================================================== */

.main-navigation ul li a {
	color: var(--skw-dark);
	font-weight: 500;
}

.main-navigation ul li a:hover {
	color: var(--skw-blue);
}

ul.menu li.current-menu-item > a {
	color: var(--skw-blue);
}

.storefront-primary-navigation {
	background-color: var(--skw-white);
}

@media (min-width: 768px) {
	.main-navigation ul.menu > li > a,
	.main-navigation ul.nav-menu > li > a {
		padding: 1.2em 1em;
	}

	.main-navigation ul ul {
		background-color: var(--skw-white);
		border: 1px solid var(--skw-gray-medium);
		border-radius: var(--skw-radius);
		box-shadow: var(--skw-shadow);
	}

	.main-navigation ul ul li a {
		color: var(--skw-text);
	}

	.main-navigation ul ul li a:hover {
		color: var(--skw-blue);
		background-color: var(--skw-gray);
	}
}

/* Mobile menu toggle */
button.menu-toggle {
	background-color: var(--skw-blue);
	color: var(--skw-white);
	border-radius: var(--skw-radius);
}

button.menu-toggle::before,
button.menu-toggle::after,
button.menu-toggle span::before {
	background-color: var(--skw-white);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.wc-block-grid__products .wc-block-grid__product .wp-block-button__link,
.added_to_cart {
	background-color: var(--skw-blue);
	border-color: var(--skw-blue);
	color: var(--skw-white);
	border-radius: var(--skw-radius);
	font-weight: 600;
	transition: var(--skw-transition);
	text-transform: none;
	letter-spacing: 0;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.button:hover,
.wc-block-grid__products .wc-block-grid__product .wp-block-button__link:hover,
.added_to_cart:hover {
	background-color: var(--skw-blue-dark);
	border-color: var(--skw-blue-dark);
	color: var(--skw-white);
}

button.cta,
button.alt,
input[type="button"].alt,
input[type="submit"].alt,
.button.alt,
.checkout-button,
.wc-block-components-checkout-place-order-button,
a.button.alt {
	background-color: var(--skw-green);
	border-color: var(--skw-green);
	color: var(--skw-dark);
}

button.cta:hover,
button.alt:hover,
input[type="button"].alt:hover,
input[type="submit"].alt:hover,
.button.alt:hover,
.checkout-button:hover,
.wc-block-components-checkout-place-order-button:hover,
a.button.alt:hover {
	background-color: var(--skw-green-dark);
	border-color: var(--skw-green-dark);
	color: var(--skw-dark);
}

/* ==========================================================================
   WooCommerce - General
   ========================================================================== */

.woocommerce-breadcrumb {
	color: var(--skw-text-light);
}

.woocommerce-breadcrumb a {
	color: var(--skw-blue);
}

.storefront-sorting {
	margin-bottom: 2em;
}

/* Star ratings */
.star-rating span::before,
.star-rating::before {
	color: var(--skw-green);
}

/* Sale badge */
.woocommerce span.onsale {
	background-color: var(--skw-green);
	color: var(--skw-dark);
	border-radius: var(--skw-radius);
	font-weight: 700;
	padding: 0.5em 0.8em;
	min-height: auto;
	min-width: auto;
	line-height: 1.2;
}

/* Price */
.woocommerce .price .amount,
.wc-block-grid__product-price .wc-block-grid__product-price__value {
	color: var(--skw-dark);
	font-weight: 600;
}

.woocommerce .price del {
	opacity: 0.5;
}

.woocommerce .price ins {
	color: var(--skw-blue);
	font-weight: 700;
}

/* ==========================================================================
   WooCommerce - Product Cards
   ========================================================================== */

ul.products li.product {
	transition: var(--skw-transition);
	border-radius: var(--skw-radius-lg);
	overflow: hidden;
}

ul.products li.product:hover {
	box-shadow: var(--skw-shadow-hover);
}

ul.products li.product .woocommerce-loop-product__title {
	font-size: 1em;
	font-weight: 600;
	color: var(--skw-dark);
}

ul.products li.product .button {
	border-radius: var(--skw-radius);
}

ul.products li.product img {
	border-radius: 0;
	margin-bottom: 0.8em;
}

/* ==========================================================================
   WooCommerce - Single Product
   ========================================================================== */

.single-product div.product .summary .price {
	font-size: 1.6em;
	color: var(--skw-dark);
}

.single-product div.product .woocommerce-product-gallery {
	border-radius: var(--skw-radius-lg);
	overflow: hidden;
}

.single-product div.product .quantity .qty {
	border-radius: var(--skw-radius);
	border: 1px solid var(--skw-gray-medium);
	background-color: var(--skw-white);
}

.single-product div.product .single_add_to_cart_button {
	background-color: var(--skw-green);
	color: var(--skw-dark);
	border-radius: var(--skw-radius);
	font-weight: 700;
	padding: 0.8em 2em;
}

.single-product div.product .single_add_to_cart_button:hover {
	background-color: var(--skw-green-dark);
	color: var(--skw-dark);
}

.woocommerce-tabs ul.tabs {
	border-bottom-color: var(--skw-gray-medium);
}

.woocommerce-tabs ul.tabs li.active a {
	color: var(--skw-blue);
	border-bottom-color: var(--skw-blue);
}

/* Product meta / attributes table */
.shop_attributes th {
	font-weight: 600;
	color: var(--skw-dark);
}

.shop_attributes td {
	color: var(--skw-text);
}

/* ==========================================================================
   WooCommerce - Cart & Checkout
   ========================================================================== */

table.cart td.product-remove a {
	color: var(--skw-text-light);
}

table.cart td.product-remove a:hover {
	color: #e2401c;
}

table.cart .product-name a {
	color: var(--skw-dark);
	font-weight: 600;
}

.woocommerce-cart .cart-collaterals .cart_totals {
	background-color: var(--skw-gray);
	border-radius: var(--skw-radius-lg);
	padding: 1.5em;
}

/* ==========================================================================
   WooCommerce - Widgets
   ========================================================================== */

.widget_product_categories ul li a,
.widget_layered_nav ul li a {
	color: var(--skw-text);
}

.widget_product_categories ul li a:hover,
.widget_layered_nav ul li a:hover {
	color: var(--skw-blue);
}

.widget_price_filter .ui-slider .ui-slider-handle {
	background-color: var(--skw-blue);
}

.widget_price_filter .ui-slider .ui-slider-range {
	background-color: var(--skw-blue-light);
}

.widget .widget-title,
.widget .widgettitle {
	color: var(--skw-dark);
	font-weight: 600;
	border-bottom-color: var(--skw-gray-medium);
}

/* ==========================================================================
   Forms
   ========================================================================== */

input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
textarea,
.input-text {
	background-color: var(--skw-white);
	border: 1px solid var(--skw-gray-medium);
	border-radius: var(--skw-radius);
	transition: var(--skw-transition);
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
.input-text:focus {
	border-color: var(--skw-blue);
	box-shadow: 0 0 0 2px rgba(95, 132, 193, 0.2);
	background-color: var(--skw-white);
	outline: none;
}

a:focus,
input:focus,
textarea:focus,
button:focus {
	outline-color: var(--skw-blue);
}

/* ==========================================================================
   Site Footer
   ========================================================================== */

.site-footer {
	background-color: var(--skw-dark);
	color: rgba(255, 255, 255, 0.7);
}

.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6 {
	color: var(--skw-white);
}

.site-footer a {
	color: var(--skw-green-light);
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--skw-green);
}

.site-info {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.5);
}

.site-info a {
	color: rgba(255, 255, 255, 0.6);
}

.footer-widgets {
	border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.pagination .page-numbers li .page-numbers.current,
.woocommerce-pagination .page-numbers li .page-numbers.current {
	background-color: var(--skw-blue);
	border-color: var(--skw-blue);
	color: var(--skw-white);
}

.pagination .page-numbers li a.page-numbers:hover,
.woocommerce-pagination .page-numbers li a.page-numbers:hover {
	background-color: var(--skw-gray);
}

/* ==========================================================================
   Homepage Template
   ========================================================================== */

.page-template-template-homepage .type-page {
	background-color: var(--skw-gray);
}

.page-template-template-homepage .entry-header h1 {
	color: var(--skw-dark);
}

/* ==========================================================================
   WooCommerce Messages
   ========================================================================== */

.woocommerce-message {
	border-top-color: var(--skw-green);
}

.woocommerce-info {
	border-top-color: var(--skw-blue);
}

.woocommerce-message a.button,
.woocommerce-info a.button {
	background-color: var(--skw-blue);
	color: var(--skw-white);
}

/* ==========================================================================
   Miscellaneous
   ========================================================================== */

/* Scrollbar styling for webkit */
::-webkit-scrollbar {
	width: 8px;
}

::-webkit-scrollbar-track {
	background: var(--skw-gray);
}

::-webkit-scrollbar-thumb {
	background: var(--skw-gray-medium);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: #bbb;
}

/* Selection color */
::selection {
	background-color: var(--skw-blue);
	color: var(--skw-white);
}