/*
Theme Name: Verkkokauppa child
Version: 1.0
Description: A child theme of Astra
Template: astra
Author: Andreas, Ville Hämäläinen
*/
@import url("../astra/style.css");

/* ========================================
   GRADIA BRAND FOUNDATION
   ======================================== */

body {
background: #fff;
font-family: 'BW Gradual', Arial, Helvetica, sans-serif;
font-size: 16px;
line-height: 1.6;
color: #222;
}

* {
font-family: 'BW Gradual', Arial, Helvetica, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
font-weight: 700;
color: #222;
margin-bottom: 0.5em;
line-height: 1.3;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

a {
color: #566845;
text-decoration: none;
transition: color 0.2s;
}

a:hover {
color: #8E8F90;
}

/* ========================================
   BUTTONS - GLOBAL
   ======================================== */

button,
input[type="submit"],
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.woocommerce-page button.button,
.woocommerce-page input.button,
.woocommerce-page a.button,
.single_add_to_cart_button,
.minus,
.plus {
background: #566845 !important;
color: #fff !important;
border-radius: 24px !important;
font-weight: 700 !important;
padding: 0.75em 2em !important;
border: none !important;
transition: background 0.2s !important;
font-family: 'BW Gradual', Arial, Helvetica, sans-serif !important;
}

button:hover,
input[type="submit"]:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button:hover,
.single_add_to_cart_button:hover {
background: #3d4a30 !important;
color: #fff !important;
}

/* ========================================
   WOOCOMMERCE PRODUCTS - GLOBAL
   ======================================== */

.woocommerce ul.products,
.woocommerce-page ul.products {
gap: 2em;

}

.woocommerce ul.products li.product {
background: #CDD7E3;
border-radius: 16px;
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
padding: 2em;
margin-bottom: 2em;
display: flex;
flex-direction: column;
text-align: center;
justify-content: space-between;
}

.woocommerce ul.products li.product:hover {
box-shadow: 0 4px 16px rgba(86,104,69,0.15);
border-color: #566845;
}

.woocommerce ul.products li.product img {
width: 100%;
height: auto;
object-fit: cover;
margin: 0 auto;
display: block;
transition: transform 0.3s ease-in-out;
}

.woocommerce ul.products li.product .button {
display: block;
width: 100%;
text-align: center;
font-size: 1rem;
}

.woocommerce-loop-product__title {
font-weight: 600 !important;
font-size: 1.125rem !important;
color: #222 !important;
}

.price {
font-weight: 700 !important;
font-size: 1.125rem !important;
color: #566845 !important;
}

.woocommerce .star-rating,
.star-rating,
.woocommerce ul.products li.product .star-rating {
display: none !important;
}

.woocommerce span.onsale {
background: #566845;
color: #fff;
border-radius: 16px;
font-weight: bold;
}

/* ========================================
   SINGLE PRODUCT PAGE
   ======================================== */

.single-product div.product .product_title {
font-size: 2rem;
font-weight: 700;
margin-bottom: 0.5rem;
line-height: 1.2;
}

.single-product div.product .summary .price {
font-size: 1.5rem;
font-weight: 600;
color: #333;
margin-bottom: 1rem;
}

.single-product .cart {
display: flex;
}

.single-product div.product form.cart .quantity {
float: none;
display: inline-block;
}

.single-product .quantity {
margin-left: 0.875em !important;
margin-right: 0.875em !important;
}

.woocommerce .quantity input[type="number"],
.woocommerce-page .quantity input[type="number"] {
font-size: 28px;
max-width: 4.5em;
padding: 6px;
}

.single-product .minus {
margin-right: 0 !important;
}

.single-product .plus {
margin-right: 15px !important;
}

.plus + .single_add_to_cart_button {
margin-top: 0 !important;
}

.woocommerce-variation-add-to-cart {
margin-left: 1em;
}

.woocommerce-variation-add-to-cart .quantity {
margin-left: 0 !important;
}

.product_meta,
.product_meta span,
.product_meta a {
font-size: 0.95rem !important;
line-height: 1.8 !important;
color: #222 !important;
}

.product_meta .sku_wrapper,
.product_meta .posted_in {
font-weight: 600 !important;
}

.woocommerce div.product p.stock,
.stock {
font-size: 0.95rem !important;
font-weight: 600 !important;
}

.stock.in-stock {
color: #566845 !important;
}

/* ========================================
   CART & CHECKOUT
   ======================================== */

.woocommerce-message,
.woocommerce-info {
background: #CDD7E3 !important;
color: #222 !important;
border-top-color: #566845 !important;
border-radius: 8px !important;
padding: 1em 2em !important;
}

.woocommerce-message::before,
.woocommerce-info::before {
color: #566845 !important;
}

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-message a.button,
.woocommerce-info a.button {
background: #566845 !important;
color: #fff !important;
border-radius: 24px !important;
padding: 0.6em 1.5em !important;
font-weight: 700 !important;
text-decoration: none !important;
}

.woocommerce-message .button:hover,
.woocommerce-info .button:hover {
background: #3d4a30 !important;
}

.ast-site-header-cart .widget_shopping_cart,
.astra-cart-drawer {
background-color: #fff;
box-shadow: 0 4px 10px -2px rgba(0, 0, 0, .1);
border: 1px solid #eaeaea;
}

.ast-on-card-button svg {
fill: #ffffff;
}

.ast-card-action-tooltip {
color: #ffffff;
}

/* ========================================
   HERO SECTION
   ======================================== */

.gradia-hero {
background: #CDD7E3;
color: #222;
padding: 2.5em 2em;
border-radius: 0 0 32px 32px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 3em;
max-height: 500px;
overflow: hidden;
}

.gradia-hero-content {
max-width: 600px;
}

.gradia-hero h1 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1.5rem;
}


.gradia-hero h2 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1.5rem;
}

.gradia-hero p {
font-size: 1.25rem;
margin-bottom: 3rem;
color: #222;
}

.gradia-hero .gradia-cta {
background: #566845;
color: #fff;
font-weight: bold;
border-radius: 32px;
padding: 1em 2.5em;
font-size: 1.2rem;
margin-top: 2rem;
border: none;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
transition: background 0.2s, color 0.2s;
text-decoration: none;
display: inline-block;
}

.gradia-hero .gradia-cta:hover {
background: #3d4a30;
color: #fff;
}

@media (max-width: 900px) {
.gradia-hero {
flex-direction: column;
text-align: center;
gap: 2em;
max-height: 600px;
padding: 2em 1.5em;
}
}

@media (max-width: 600px) {
.gradia-hero {
max-height: none;
padding: 1.5em 1em;
}

.gradia-hero h1 {
font-size: 2rem;
}

.gradia-hero p {
font-size: 1rem;
}
}

/* ========================================
   POPULAR PRODUCTS SECTION
   ======================================== */

.gradia-featured-content {
text-align: center;
}

.gradia-featured-content h2 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
vertical-align: middle;
}

.gradia-featured-content p {
font-size: 1.125rem;
line-height: 1.8;
color: #222;
margin-bottom: 2rem;
}

.gradia-featured-content .featured-cta {
background: #566845;
color: #fff;
padding: 0.9em 2em;
border-radius: 24px;
font-weight: 700;
text-decoration: none;
display: inline-block;
transition: all 0.2s ease;
border: 2px solid transparent;
}

.gradia-featured-content .featured-cta:hover {
background: #fff;
color: #566845;
border-color: #566845;
}

.woocommerce.columns-3 ul.products,
.woocommerce.columns-2 ul.products {
display: flex !important;
flex-direction: row !important;
gap: 1.5em !important;
}

.woocommerce.columns-3 ul.products li.product,
.woocommerce.columns-2 ul.products li.product {
flex: 1 !important;
max-width: none !important;
}

/* ========================================
   FOOTER
   ======================================== */

.site-footer {
background: #CDD7E3;
color: #222;
padding: 3em 2em 1.5em 2em;
margin-top: 2em;
border-radius: 48px 48px 0 0;
}

.footer-content {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3em;
max-width: 1200px;
margin: 0 auto 2em auto;
}

.footer-column h3 {
font-size: 1.125rem;
font-weight: 700;
color: #566845;
margin-bottom: 1em;
text-transform: uppercase;
letter-spacing: 0.5px;
}

.footer-column ul {
list-style: none;
padding: 0;
margin: 0;
}

.footer-column ul li {
margin-bottom: 0.6em;
}

.footer-column ul li a {
color: #222;
font-size: 0.95rem;
transition: color 0.2s;
text-decoration: none;
}

.footer-column ul li a:hover {
color: #566845;
}

.footer-bottom {
border-top: 1px solid rgba(142, 143, 144, 0.3);
padding-top: 1.5em;
text-align: center;
max-width: 1200px;
margin: 0 auto;
}

.footer-bottom p {
font-size: 0.875rem;
color: #222;
margin: 0.3em 0;
}

.footer-bottom a {
color: #566845;
text-decoration: none;
margin: 0 0.5em;
}

.footer-bottom a:hover {
color: #3d4a30;
text-decoration: underline;
}

@media (max-width: 900px) {
.footer-content {
grid-template-columns: repeat(2, 1fr);
gap: 2em;
}
}

@media (max-width: 600px) {
.footer-content {
grid-template-columns: 1fr;
gap: 2em;
}

.site-footer {
padding: 2em 1.5em 1em 1.5em;
}
}

/* ========================================
   SWIPER CAROUSEL BUTTONS
   ======================================== */

.swiper-button-next,
.swiper-button-prev {
outline: 2px solid black;
background-color: #000000 !important;
color: #FFFFFF !important;
transition: none !important;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
background-color: #FFFFFF !important;
color: #000000 !important;
}

.swiper-button-next:focus,
.swiper-button-next:focus-visible,
.swiper-button-next:active,
.swiper-button-prev:focus,
.swiper-button-prev:focus-visible,
.swiper-button-prev:active {
outline: 2px solid black !important;
}

/* ========================================
   ELEMENTOR FIXES
   ======================================== */

/* Elementor headings - consistent BW Gradual font */
h2.elementor-heading-title,
.elementor-heading-title {
font-family: 'BW Gradual', Arial, Helvetica, sans-serif !important;
font-weight: 700 !important;
}

/* WooCommerce carousel - center images */
.swiper-slide img,
.swiper-slide .woocommerce-loop-product__link img {
margin: 0 auto !important;
display: block !important;
text-align: center !important;
}

/* WooCommerce carousel product titles */
.woocommerce-loop-product__link h2,
.woocommerce-LoopProduct-link h2 {
font-family: 'BW Gradual', Arial, Helvetica, sans-serif !important;
font-weight: 600 !important;
font-size: 1.125rem !important;
text-align: center !important;
color: #222 !important;
min-height: 3em !important;
line-height: 1.5 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}

/* WooCommerce carousel prices */
.woocommerce-Price-amount,
.woocommerce-Price-amount.amount,
.woocommerce-Price-amount bdi {
font-family: 'BW Gradual', Arial, Helvetica, sans-serif !important;
font-weight: 700 !important;
font-size: 1.125rem !important;
color: #566845 !important;
text-align: center !important;
}

.elementor-widget-image-carousel .swiper-slide {
margin: 0 !important;
}

.elementor-widget-image-carousel .swiper .swiper-slide figure {
line-height: 0 !important;
}

.swiper-slide-image {
max-height: 300px;
max-width: 300px;
}

.ast-header-html-1 a {
color: #566845;
}

.ast-header-html-1 a:hover {
color: #8E8F90;
}

/*Make the header links be side by side*/
.inline‑links {
	text-align: center;               /* center the inline items line-wide */
}
.inline‑links p {
	display: inline-block;            /* allow p’s to sit side by side */
	margin: 0 1rem;                   /* horizontal gutters */
}
.inline‑links a {
	text-decoration: none;
	font-weight: none
}
/* ========================================
   MISC ADJUSTMENTS
   ======================================== */

.woocommerce-products-header > .page-description > .wp-block-cover {
margin-top: -50px !important;
}

@media only screen and (max-width: 921px) {
.woocommerce-products-header > .page-description > .wp-block-cover {
margin-top: -20px !important;
}
}

@media only screen and (max-width: 544px) {
.woocommerce-products-header > .page-description > .wp-block-cover {
margin-top: 0 !important;
}
}

/* ========================================
   PI Websolution Delivery Field Styling aka Calendar plugin
   ======================================== */

#pi_checkout_field .form-row {
   margin-bottom: 1.5em;
}

#pi_checkout_field label {
   font-family: 'BW Gradual', Arial, sans-serif;
   font-weight: 700;
   color: #222;
   display: block;
   margin-bottom: 0.5em;
}

/* Radio button container */
#pi_checkout_field .woocommerce-input-wrapper {
   display: flex;
   align-items: center;
   gap: 0.5em;
}

#pi_checkout_field label.radio {
   display: inline-block;
   margin: 0;
   font-weight: 700;
   cursor: pointer;
   /* Make the pickup label stand out */
   background: #566845;
   color: #fff;
   padding: 0.5em 1em;
   border-radius: 16px;
   transition: background 0.2s;
}

#pi_checkout_field label.radio:hover {
   background: #3d4a30;
}


/* Text input fields */
#pi_checkout_field input[type="text"] {
   width: 100%;
   border: 1px solid #ddd;
   border-radius: 4px;
   padding: 0.75em;
   font-family: 'BW Gradual', Arial, sans-serif;
   font-size: 1rem;
}

#pi_checkout_field input[type="text"]:focus {
   border-color: #566845; /* Mid Green on focus */
   outline: none;
   box-shadow: 0 0 0 1px #566845;
}

/* Select2 dropdown styling */
#pi_checkout_field .select2-container {
   width: 100% !important;
}

#pi_checkout_field .select2-container .select2-selection--single {
   height: auto;
   border: 1px solid #ddd;
   border-radius: 4px;
   padding: 0.75em;
}

#pi_checkout_field .select2-container--focus .select2-selection--single {
   border-color: #566845;
   box-shadow: 0 0 0 1px #566845;
}

/* Clear button styling */
#pi_checkout_field .pisol_clear_button {
   color: #566845;
   cursor: pointer;
   font-size: 24px;
   line-height: 1;
   position: absolute;
   right: 10px;
   font-weight: 700;
}

#pi_checkout_field .pisol_clear_button:hover {
   color: #3d4a30;
}