/* WooCommerce Styles */

.woocommerce-order-received .woocommerce .woocommerce-order {
  max-width: 850px;
  margin-left: auto;
  margin-right: auto;
}
.woocommerce-order-received .woocommerce .woocommerce-order .woocommerce-thankyou-order-received {
  font-weight: 700;
  font-size: 20px;
}
.woocommerce-order-received .woocommerce .woocommerce-order ul.woocommerce-thankyou-order-details {
  list-style: none;
  margin-top: 3.4rem;
  padding: 0;
}
.woocommerce-order-received .woocommerce .woocommerce-order .warehouse-details {
  margin-top: 3.4rem;
}
.woocommerce-order-received .woocommerce .woocommerce-order .warehouse-details .instructions {
  font-weight: 600;
}
.woocommerce-order-received .woocommerce .woocommerce-order .warehouse-details p,
.woocommerce-order-received .woocommerce .woocommerce-order .warehouse-details a {
  margin-bottom: 0.5rem;
}
.woocommerce-order-received .woocommerce .woocommerce-order .warehouse-details a {
  display: block;
}
.woocommerce-order-received .woocommerce .woocommerce-order .woocommerce-order-details {
  margin-top: 3.4rem;
}
.woocommerce-order-received .woocommerce .woocommerce-order .woocommerce-customer-details {
  margin-top: 3.4rem;
}
.form-row.woocommerce-validated input.input-text {
  box-shadow: inset 4px 0 0;
}
.form-row.woocommerce-invalid input.input-text {
  box-shadow: inset 4px 0 0 #1363df;
}
.form-row-wide {
  margin-top: 1rem;
}
.woocommerce-notices-wrapper .woocommerce-Price-amount {
  color: white;
}
.woocommerce-notices-wrapper > * + * {
  margin-top: 1.5rem;
}
.woocommerce-notices-wrapper > *:last-child {
  margin-bottom: 4rem;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
  background-color: #1363df;
  margin-left: 0;
  border-radius: 4px;
  color: #fff;
  clear: both;
  border-left: 8px solid rgba(0, 0, 0, 0.15);
  padding: 1rem 2rem 1rem 2rem;
  position: relative;
  list-style: none outside;
}
.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a,
.woocommerce-noreviews a,
p.no-comments a {
  color: #fff;
  transition: 0.3s;
  text-decoration: underline;
}
.woocommerce-message a:hover,
.woocommerce-info a:hover,
.woocommerce-error a:hover,
.woocommerce-noreviews a:hover,
p.no-comments a:hover {
  color: #fff;
  opacity: 0.6;
}
.woocommerce-message a.button:hover,
.woocommerce-info a.button:hover,
.woocommerce-error a.button:hover,
.woocommerce-noreviews a.button:hover,
p.no-comments a.button:hover {
  opacity: 1;
}
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button,
.woocommerce-noreviews .button,
p.no-comments .button {
  float: right;
  padding: 0;
  background: none;
  color: #fff;
  box-shadow: none;
  line-height: 1.618;
  margin-left: 1em;
  padding-left: 1em;
  border-width: 0;
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: rgba(255, 255, 255, 0.25);
  border-radius: 0;
}
.woocommerce-message .button:hover,
.woocommerce-info .button:hover,
.woocommerce-error .button:hover,
.woocommerce-noreviews .button:hover,
p.no-comments .button:hover {
  background: none;
  color: #fff;
  opacity: 0.7;
}
.woocommerce-message pre,
.woocommerce-info pre,
.woocommerce-error pre,
.woocommerce-noreviews pre,
p.no-comments pre {
  background-color: rgba(0, 0, 0, 0.1);
}

.woocommerce-error,
.woocommerce-noreviews {
  background-color: #1363df;
}
table.woocommerce-table--order-details {
  border-collapse: collapse;
}
table.woocommerce-table--order-details tr th,
table.woocommerce-table--order-details tr td {
  text-align: left;
  padding: 0.5rem 0;
}
table.woocommerce-table--order-details tr th:last-child,
table.woocommerce-table--order-details tr td:last-child {
  padding-left: 1rem;
}
table.woocommerce-table--order-details tr td {
  display: table-cell;
}
table.woocommerce-table--order-details tr.order_item a,
table.woocommerce-table--order-details tr.order_item span,
table.woocommerce-table--order-details tr.order_item strong {
  color: #707070;
  font-weight: 500;
}

.woocommerce .button {
  background-color: #06283d;
  border: none;
  color: #FFF;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s ease;
  display: inline-block;
}
.woocommerce .button:hover {
  opacity: 0.6;
}

.woocommerce .quantity {
  height: inherit;
}
.woocommerce .quantity button {
  background-color: transparent;
  border: none;
  color: black;
  font-weight: 600;
  cursor: pointer;
  padding: 0.75rem;
  font-size: 20px;
  transition: 0.3s ease;
}
.woocommerce .quantity button:hover {
  opacity: 0.4;
}
.woocommerce input.qty {
  width: 80px;
  height: 50px;
  height: inherit;
  text-align: center;
  border: 1px solid #cccccc;
  border-radius: 4px;
  font-weight: 600;
}
.woocommerce input.qty::-webkit-outer-spin-button, .woocommerce input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.woocommerce-Price-amount {
  color: red;
  font-weight: 700;
  font-size: 16px;
}

del .woocommerce-Price-amount {
  color: black;
  font-weight: 400;
  font-size: 12px;
}

.woocommerce-breadcrumb {
  font-weight: 700;
  color: #06283d;
  margin-bottom: 1rem;
}
.woocommerce-breadcrumb a {
  font-weight: 400;
  color: black;
}
.woocommerce-breadcrumb a:hover {
  color: #1363df;
}

.woocommerce-wrapper {
  margin-top: 3rem;
}
.woocommerce-wrapper > * + * {
  margin-top: 2rem;
}
@media (min-width: 80rem) {
  .woocommerce-wrapper > * + * {
    margin-top: 0;
  }
}
.woocommerce-wrapper > .container {
  flex-direction: column;
  display: flex;
}
@media (min-width: 80rem) {
  .woocommerce-wrapper > .container {
    flex-direction: row;
    margin-top: 6rem;
  }
}

@media (min-width: 80rem) {
  .woocommerce-categories {
    width: 21%;
  }
}
.woocommerce-categories h2 {
  font-size: 20px;
  margin-bottom: 1.5rem;
  margin-top: 0;
}
@media (min-width: 60rem) {
  .woocommerce-categories h2 {
    font-size: 22px;
    margin-bottom: 2rem;
  }
}
.woocommerce-categories .category-menu-button {
  display: block;
  background-color: #06283d;
  color: white;
  width: 100%;
  padding: 0.5rem 0;
  font-weight: 600;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: opacity 0.2s;
}
@media (min-width: 80rem) {
  .woocommerce-categories .category-menu-button {
    display: none;
  }
}
.woocommerce-categories .category-menu-button:hover {
  opacity: 0.6;
}
.woocommerce-categories ul {
  padding-left: 0;
  list-style: none;
}
.woocommerce-categories .category-menu {
  display: none;
  /* Level 1 */
  /* Level 2 */
  /* Level 3 */
}
@media (min-width: 80rem) {
  .woocommerce-categories .category-menu {
    display: block;
  }
}
.woocommerce-categories .category-menu.toggled-on {
  display: block;
}
.woocommerce-categories .category-menu a {
  color: #06283d;
  font-weight: 600;
  display: block;
  padding: 0.5rem 0;
  font-size: 1.1rem;
  text-decoration: none;
  border: none;
}
.woocommerce-categories .category-menu a:hover, .woocommerce-categories .category-menu a:focus {
  color: #06283d;
  opacity: 0.7;
}
.woocommerce-categories .category-menu .cat-item.current-cat > a {
  color: #06283d;
  opacity: 0.7;
}
.woocommerce-categories .category-menu button {
  --dropdown-toggle-size: 12px;
  background-color: #e0e0e0;
  border-radius: 6px;
}
.woocommerce-categories .category-menu button:hover {
  cursor: pointer;
}
.woocommerce-categories .category-menu button svg {
  background-image: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" style="width: var(--dropdown-toggle-size); height: var(--dropdown-toggle-size);" width="10" height="10" viewBox="0 0 10 10"%3E%3Cpath stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 1.5v7M1.5 5h7"/%3E%3C/svg%3E%0A');
  background-size: 100%;
  height: var(--dropdown-toggle-size);
  pointer-events: none;
  position: relative;
  transform: rotate(0);
  transition: all 0.15s;
  width: var(--dropdown-toggle-size);
}
.woocommerce-categories .category-menu button svg path {
  display: none;
}
.woocommerce-categories .category-menu button.toggled-on svg {
  background-image: url('data:image/svg+xml, %3Csvg xmlns="http://www.w3.org/2000/svg" style="width: var(--dropdown-toggle-size); height: var(--dropdown-toggle-size);" width="10" height="10" viewBox="0 0 10 10"%3E%3Cpath fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M1.5 5h7"/%3E%3C/svg%3E%0A');
  transform: rotate(-180deg);
}
.woocommerce-categories .category-menu > .cat-item > a {
  font-weight: 600;
  font-size: 1.1rem;
}
.woocommerce-categories .category-menu .children {
  background-color: transparent;
  display: none;
  list-style: none;
  padding-left: 1rem;
}
.woocommerce-categories .category-menu .children.toggled-on {
  display: block;
}
.woocommerce-categories .category-menu .children a {
  font-size: 1rem;
  font-weight: 400;
}
.woocommerce-categories .category-menu .children a {
  padding-left: 0;
}
.woocommerce-categories .category-menu .children .children a {
  padding-left: 1rem;
}

/* Standard WooCommerce Product Categories Widget */
.widget_product_categories .product-categories {
  list-style: none;
  margin: 0;
  padding: 0;
}

.widget_product_categories .product-categories a {
  color: #06283d;
  font-weight: 600;
  text-decoration: none;
  display: block;
  padding: 0.5rem 1rem;
  transition: opacity 0.3s ease;
}

.widget_product_categories .product-categories a:hover,
.widget_product_categories .product-categories a:focus {
  opacity: 0.8;
}

.widget_product_categories .product-categories .current-cat > a {
  background-color: rgba(6, 40, 61, 0.1);
}

.widget_product_categories .product-categories .children {
  background-color: transparent;
  list-style: none;
  margin: 0;
  padding-left: 1rem;
}

.widget_product_categories .product-categories > .cat-item > a {
  font-weight: 600;
  font-size: 1.1rem;
}

.widget_product_categories .product-categories .children a {
  font-size: 1rem;
  font-weight: 400;
}

.widget_product_categories .product-categories .children .children a {
  padding-left: 1rem;
}

.woocommerce-content {
  border-top: 1px solid #eaeaea;
  padding-top: 4rem;
}
@media (min-width: 80rem) {
  .woocommerce-content {
    border-top: 0;
    padding-top: 0;
    width: 79%;
    margin-left: 2.6rem;
  }
}

.woocommerce-archive .woocommerce-products-header {
  margin-bottom: 1rem;
}
.woocommerce-archive .woocommerce-products-header h1 {
  font-size: 30px;
  margin: 0;
}
.woocommerce-archive .woocommerce-products-header .term-description {
  margin-top: 1rem;
}
@media (min-width: 50rem) {
  .woocommerce-archive .woocommerce-products-header .term-description {
    max-width: 750px;
  }
}
.woocommerce-archive .archive-results {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
  margin: 3rem 0;
}
.woocommerce-archive .archive-results .woocommerce-result-count {
  border-right: 1px solid #aaaaaa;
  padding-right: 1rem;
  max-width: 50%;
  margin-bottom: 0;
}
.woocommerce-archive .archive-results .woocommerce-ordering {
  max-width: 50%;
}
.woocommerce-archive .archive-results .woocommerce-ordering > * {
  width: 100%;
}
.woocommerce-archive .archive-results .orderby {
  background-color: #06283d;
  color: #fff;
  padding: 0.5rem 1rem;
  border: 0;
  cursor: pointer;
}

.woocommerce-archive .product {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-wrap: wrap;
  transition: 0.3s ease;
  background-color: #fff;
  box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.06);
  min-height: 100%;
}
.woocommerce-archive .product:hover {
  transform: translateY(-6px);
}
.woocommerce-archive .product .woocommerce-loop-product__title,
.woocommerce-archive .product .price,
.woocommerce-archive .product .availability {
  padding: 0 0.5rem;
}
@media (min-width: 60rem) {
  .woocommerce-archive .product .woocommerce-loop-product__title,
  .woocommerce-archive .product .price,
  .woocommerce-archive .product .availability {
    padding: 0 1rem;
  }
}
.woocommerce-archive .product img {
  width: 100%;
  height: auto;
}
.woocommerce-archive .product .woocommerce-loop-product__title {
  color: black;
  font-size: 10px;
  flex-grow: 1;
  display: block;
  hyphens: auto;
  margin-top: 1rem;
}
@media (min-width: 500px) {
  .woocommerce-archive .product .woocommerce-loop-product__title {
    font-size: 18px;
  }
}
.woocommerce-archive .product .product-flash {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.woocommerce-archive .product .product-flash > * + * {
  margin-top: 0.5rem;
}
.woocommerce-archive .product .onsale,
.woocommerce-archive .product .itsnew {
  text-align: center;
  display: block;
  color: #fff;
  padding: 0.5rem 1.25rem;
  font-weight: 600;
  font-size: 14px;
}
.woocommerce-archive .product .onsale {
  background-color: #1363df;
}
.woocommerce-archive .product .itsnew {
  background-color: #06283d;
}
.woocommerce-archive .product .price {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-top: 1rem;
}
.woocommerce-archive .product .price del,
.woocommerce-archive .product .price ins {
  display: block;
}
.woocommerce-archive .product .price ins .woocommerce-Price-amount {
  font-size: 12px !important;
}
.woocommerce-archive .product .price del .woocommerce-Price-amount {
  font-size: 10px !important;
}
.woocommerce-archive .product .availability {
  margin-top: 0.5rem;
}
.woocommerce-archive .product .availability .shipping,
.woocommerce-archive .product .availability .status {
  display: block;
  font-size: 14px;
}
.woocommerce-archive .product .availability .shipping {
  font-weight: 600;
  color: black;
}
.woocommerce-archive .product .availability .status {
  color: #707070;
}
.woocommerce-archive .product .availability .status::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 0.5rem;
}
.woocommerce-archive .product .availability.instock .status::before {
  background-color: #22c55e;
}
.woocommerce-archive .product .availability.outofstock .status::before {
  background-color: #ef4444;
}
.woocommerce-archive .product .availability.onbackorder .status::before {
  background-color: #facc15;
}
.woocommerce-archive .product .button {
  display: block;
  position: relative;
  font-size: 12px;
  color: #fff;
  background-color: #1363df;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border: none;
  border-radius: 0;
  width: 100%;
  margin-top: 0.75rem;
}
@media (min-width: 60rem) {
  .woocommerce-archive .product .button {
    font-size: 14px;
    margin-top: 1rem;
  }
}
@media (min-width: 100rem) {
  .woocommerce-archive .product .button {
    font-size: 16px;
  }
}
.woocommerce-archive .product .button:hover {
  opacity: 0.7;
}
.woocommerce-archive .product .button.loading::before, .woocommerce-archive .product .button.added::before {
  margin-right: 0.5rem;
}
.woocommerce-archive .product .button.loading::before {
  content: "";
  border: 2px solid #06283d;
  border-top: 2px solid #fff;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  animation: spin 1s ease infinite;
  display: inline-block;
}
.woocommerce-archive .product .button.added::before {
  content: url("../images/check.svg");
}
.woocommerce-archive .product .added_to_cart {
  display: none;
}

.woocommerce-pagination {
  margin-top: 4rem;
}
@media (min-width: 80rem) {
  .woocommerce-pagination {
    margin-top: 6rem;
  }
}
.woocommerce-pagination a.page-numbers {
  color: #06283d;
  font-weight: 600;
  transition: 0.2s ease-in-out;
  padding: 0.5rem;
  display: inline-block;
}
.woocommerce-pagination a.page-numbers:hover {
  opacity: 0.5;
}
.woocommerce-pagination .page-numbers {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.woocommerce-pagination .page-numbers.current {
  color: #fff;
  font-weight: 600;
  position: relative;
}
.woocommerce-pagination .page-numbers.current::after {
  content: "";
  position: absolute;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 4px;
  background-color: #06283d;
  z-index: -1;
}
.woocommerce-pagination .page-numbers > * + * {
  margin-left: 1.5rem;
}

.volttikauppa-checkout {
  max-width: 825px;
}
.volttikauppa-checkout h3 {
  margin-bottom: 1rem;
}
.volttikauppa-checkout .woocommerce {
  margin-top: 1.25rem;
}
.volttikauppa-checkout #customer_details,
.volttikauppa-checkout #order_review_heading,
.volttikauppa-checkout .woocommerce-additional-fields {
  margin-top: 3rem;
}
.volttikauppa-checkout #order_review_heading {
  padding-top: 3rem;
  border-top: 1px solid #cacaca;
}
.volttikauppa-checkout .shop_table {
  text-align: left;
  border-collapse: collapse;
}
.volttikauppa-checkout .shop_table thead {
  display: none;
}
.volttikauppa-checkout .shop_table th,
.volttikauppa-checkout .shop_table td {
  padding: 1rem 0;
}
.volttikauppa-checkout .shop_table td:last-child {
  padding-left: 2rem;
}
.volttikauppa-checkout .shop_table th {
  font-weight: 500;
}
.volttikauppa-checkout .shop_table tbody .cart_item,
.volttikauppa-checkout .shop_table tbody .cart_item .woocommerce-Price-amount {
  color: #707070;
}
.volttikauppa-checkout .shop_table .product-quantity {
  font-weight: 500;
}
.volttikauppa-checkout .shop_table .product-total .woocommerce-Price-amount,
.volttikauppa-checkout .shop_table .cart-subtotal .woocommerce-Price-amount {
  font-weight: 500;
}
.volttikauppa-checkout .shop_table tfoot,
.volttikauppa-checkout .shop_table .order-total {
  border-top: 1px solid #eaeaea;
}
.volttikauppa-checkout .shop_table .order-total th {
  font-weight: 700;
}
.volttikauppa-checkout .shop_table .shipping ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.volttikauppa-checkout .woocommerce-checkout-payment button {
  margin-top: 1rem;
}

.woocommerce-cart .cart-empty-title {
  margin-top: 3rem;
  margin-bottom: 2rem;
}
@media (min-width: 60rem) {
  .woocommerce-cart .cart-empty-title {
    margin-top: 8rem;
  }
}
.woocommerce-cart .cart-empty-text {
  margin-top: 2rem;
}

.woocommerce-cart .woocommerce {
  margin-top: 1.25rem;
}
.woocommerce-cart button[name=update_cart] {
  display: none;
}
.woocommerce-cart .return-to-shop {
  margin-top: 1rem;
}
.woocommerce-cart .woocommerce-Price-amount {
  color: black;
  font-weight: 600;
  font-size: 16px;
}

.woocommerce-cart-form__contents .product-thumbnail a img {
  max-width: 150px;
  height: auto;
}
@media (min-width: 60rem) {
  .woocommerce-cart-form__contents .product-thumbnail a img {
    max-width: 80px;
  }
}
.woocommerce-cart-form__contents td.actions {
  border: none;
}

.cart-collaterals {
  display: flex;
  justify-content: space-between;
  gap: 3rem;
  margin-top: 2rem;
  flex-direction: column;
  align-items: flex-end;
}
.cart-collaterals .cart_totals {
  min-width: 380px;
  margin-left: auto;
}
@media (min-width: 80rem) {
  .cart-collaterals {
    flex-direction: row;
  }
}
.cart-collaterals .cross-sells .products {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 2rem;
  column-gap: 0.75rem;
}
@media (min-width: 40rem) {
  .cart-collaterals .cross-sells .products {
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 1.5rem;
  }
}
@media (min-width: 60rem) {
  .cart-collaterals .cross-sells .products {
    row-gap: 2rem;
    column-gap: 1.5rem;
    grid-template-columns: repeat(4, 1fr);
  }
}
.cart-collaterals .cross-sells .product {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-wrap: wrap;
  transition: 0.3s ease;
  background-color: #fff;
  box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.06);
  min-height: 100%;
}
.cart-collaterals .cross-sells .product:hover {
  transform: translateY(-6px);
}
.cart-collaterals .cross-sells .product .woocommerce-loop-product__title,
.cart-collaterals .cross-sells .product .price,
.cart-collaterals .cross-sells .product .availability {
  padding: 0 0.5rem;
}
@media (min-width: 60rem) {
  .cart-collaterals .cross-sells .product .woocommerce-loop-product__title,
  .cart-collaterals .cross-sells .product .price,
  .cart-collaterals .cross-sells .product .availability {
    padding: 0 1rem;
  }
}
.cart-collaterals .cross-sells .product img {
  width: 100%;
  height: auto;
}
.cart-collaterals .cross-sells .product .woocommerce-loop-product__title {
  color: black;
  font-size: 14px;
  flex-grow: 1;
  display: block;
  hyphens: auto;
  margin-top: 1rem;
}
@media (min-width: 60rem) {
  .cart-collaterals .cross-sells .product .woocommerce-loop-product__title {
    font-size: 14px;
  }
}
.cart-collaterals .cross-sells .product .product-flash {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.cart-collaterals .cross-sells .product .product-flash > * + * {
  margin-top: 0.5rem;
}
.cart-collaterals .cross-sells .product .onsale,
.cart-collaterals .cross-sells .product .itsnew {
  text-align: center;
  display: block;
  color: #fff;
  padding: 0.5rem 1.25rem;
  font-weight: 600;
  font-size: 14px;
}
.cart-collaterals .cross-sells .product .onsale {
  background-color: #1363df;
}
.cart-collaterals .cross-sells .product .itsnew {
  background-color: #06283d;
}
.cart-collaterals .cross-sells .product .price {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-top: 1rem;
}
.cart-collaterals .cross-sells .product .price del,
.cart-collaterals .cross-sells .product .price ins {
  display: block;
}
.cart-collaterals .cross-sells .product .availability {
  margin-top: 0.5rem;
}
.cart-collaterals .cross-sells .product .availability .shipping,
.cart-collaterals .cross-sells .product .availability .status {
  display: block;
  font-size: 14px;
}
.cart-collaterals .cross-sells .product .availability .shipping {
  font-weight: 600;
  color: black;
}
.cart-collaterals .cross-sells .product .availability .status {
  color: #707070;
}
.cart-collaterals .cross-sells .product .availability .status::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 0.5rem;
}
.cart-collaterals .cross-sells .product .availability.instock .status::before {
  background-color: #22c55e;
}
.cart-collaterals .cross-sells .product .availability.outofstock .status::before {
  background-color: #ef4444;
}
.cart-collaterals .cross-sells .product .availability.onbackorder .status::before {
  background-color: #facc15;
}
.cart-collaterals .cross-sells .product .button {
  display: block;
  position: relative;
  font-size: 12px;
  color: #fff;
  background-color: #1363df;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border: none;
  border-radius: 0;
  width: 100%;
  margin-top: 0.75rem;
}
@media (min-width: 60rem) {
  .cart-collaterals .cross-sells .product .button {
    font-size: 14px;
    margin-top: 1rem;
  }
}
.cart-collaterals .cross-sells .product .button:hover {
  opacity: 0.7;
}
.cart-collaterals .cross-sells .product .button.loading::before, .cart-collaterals .cross-sells .product .button.added::before {
  margin-right: 0.5rem;
}
.cart-collaterals .cross-sells .product .button.loading::before {
  content: "";
  border: 2px solid #06283d;
  border-top: 2px solid #fff;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  animation: spin 1s ease infinite;
  display: inline-block;
}
.cart-collaterals .cross-sells .product .button.added::before {
  content: url("../images/check.svg");
}
.cart-collaterals .cross-sells .product .added_to_cart {
  display: none;
}
.cart-collaterals .cart_totals {
  width: 100%;
  max-width: 500px;
}
.cart-collaterals .cart_totals > * + * {
  margin-top: 1rem;
}
.cart-collaterals .cart_totals .shipping ul {
  list-style: none;
  padding: 0;
}
.cart-collaterals .cart_totals .shipping ul li label {
  font-weight: 600;
}
.cart-collaterals .cart_totals .woocommerce-shipping-calculator a {
  font-weight: 600;
  color: #06283d;
  text-decoration: underline;
}
.cart-collaterals .cart_totals .woocommerce-shipping-calculator .shipping-calculator-form {
  margin-top: 1rem;
}
.cart-collaterals .cart_totals .woocommerce-shipping-calculator .shipping-calculator-form > * + * {
  margin-top: 0.75rem;
}
.cart-collaterals .cart_totals .woocommerce-shipping-calculator .shipping-calculator-form button {
  padding: 0.25rem 1.25rem;
}
.cart-collaterals .cart_totals .wc-proceed-to-checkout {
  margin-top: 1.5rem;
}
.cart-collaterals .cart_totals .wc-proceed-to-checkout .checkout-button {
  width: 100%;
}

@media (min-width: 60rem) {
  .summary-wrapper {
    display: flex;
    flex-wrap: wrap;
  }
}

@media (min-width: 50rem) {
  .woocommerce-tabs {
    width: 100%;
  }
}
.woocommerce-tabs .tabs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  margin-bottom: 1.75rem;
}
@media (min-width: 60rem) {
  .woocommerce-tabs .tabs {
    margin-bottom: 3rem;
  }
}
.woocommerce-tabs .tabs > * a {
  color: #707070;
  font-size: 20px;
  font-weight: 700;
}
.woocommerce-tabs .tabs > *.active a {
  display: block;
  color: black;
  border-bottom: 2px solid #06283d;
  padding-bottom: 4px;
}
.woocommerce-tabs .tabs > * + * {
  margin-left: 2rem;
}
.woocommerce-tabs #tab-description {
  max-width: 700px;
}
.woocommerce-tabs #tab-description > * {
  padding: 0;
  margin: 0;
  max-width: 100%;
}
.woocommerce-tabs #tab-description > * + * {
  margin-top: 0.25rem;
}
.woocommerce-tabs #tab-description p,
.woocommerce-tabs #tab-description li {
  line-height: 30px;
}
.woocommerce-tabs #tab-description ul,
.woocommerce-tabs #tab-description ol {
  list-style-position: inside;
}
.woocommerce-tabs #tab-description ul > * + *,
.woocommerce-tabs #tab-description ol > * + * {
  margin-top: 0.5rem;
}

.product-features {
  list-style: none;
  padding: 0;
  margin: 0;
}
.product-features > * + * {
  margin-top: 0.5rem;
}
.product-features-row {
  gap: 0.75rem;
}
.product-features-row-icon, .product-features-row-text {
  display: block;
}
.product-features-row-icon {
  display: flex;
  align-items: center;
}
.product-features-row-icon svg {
  fill: #1363df;
}

.product-technical-details {
  max-width: 500px;
  font-size: 15px;
}
.product-technical-details-row {
  border-bottom: 1px solid #cccccc;
  padding: 10px 0;
}
.product-technical-details-key {
  font-weight: 600;
}

.product-details-wrapper {
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  padding: 2rem 0;
  width: 100%;
}

/* ------------------------------------------------------------------
   Merged additional rules from test.volttikauppa.css
------------------------------------------------------------------ */

.technical-details-table {
  text-align: left;
}


@media (max-width: 1024px) {
  /* Center the thumbnail navigation container */
  ol.flex-control-nav.flex-control-thumbs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px; /* Adjust spacing between thumbnails */
    padding: 0;
    margin: 15px auto; /* Add vertical spacing */
    list-style: none;
  }

	.sidebar {
		display: none; /* Hide sidebar by default */
	}

  /* Style individual thumbnails */
  ol.flex-control-nav.flex-control-thumbs li {
    margin: 0; /* Remove default margins */
    padding: 0;
  }

  /* Ensure images fit properly */
  ol.flex-control-nav.flex-control-thumbs img {
    width: auto;
    max-width: 100%;
    height: auto;
    display: block;
  }
}

/* Basic styling for the attachments section */
.product-attachments {
  margin: 2em 0;
  padding: 1em;
  border-top: 1px solid #eee;
}

.product-attachments-title {
  font-size: 1.2em;
  margin-bottom: 1em;
  color: #333;
}

.product-attachments ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.product-attachments li {
  margin-bottom: 0.5em;
}

.product-attachments a {
  display: flex; /* Replace Tailwind's flex */
  align-items: center; /* Replace items-center */
  gap: 8px;
  text-decoration: none;
  color: #2a65a7;
}

.product-attachments a:hover {
  text-decoration: underline;
}

.product-attachments svg {
  flex-shrink: 0; /* Prevent icon from shrinking */
}


/* Remove bullets and default list styling */
.woocommerce-tabs ul.tabs.wc-tabs {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

/* Style for the tab items */
.woocommerce-tabs ul.tabs.wc-tabs li {
  display: inline-block; /* Makes them appear horizontally */
  margin: 0 10px 0 0; /* Adjust spacing between tabs */
  background: none; /* Remove any background */
  border: none; /* Remove any borders */
  padding: 0; /* Remove any padding */
}

/* Style for the tab links */
.woocommerce-tabs ul.tabs.wc-tabs li a {
  text-decoration: none; /* Remove underline */
  padding: 10px 15px; /* Add some padding */
  display: inline-block;
  background: #f5f5f5; /* Light gray background */
  color: #333; /* Dark text color */
  border-radius: 4px; /* Rounded corners */
}

/* Active tab style */
.woocommerce-tabs ul.tabs.wc-tabs li.active a {
  background: #333; /* Dark background for active tab */
  color: #fff; /* White text for active tab */
}


#tab-description p {
  text-align: left;
  max-width: 100%;
}

#tab-description h2 {
  text-align: left;
  max-width: 100%;
}

#tab-description h3 {
  text-align: left;
  max-width: 100%;
}

.technical-details-table {
  margin: 2rem;
  padding-left: 1em;
  padding-right: 1em;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


/* Hover effect */
.woocommerce-tabs ul.tabs.wc-tabs li a:hover {
  background: #ddd; /* Lighter gray on hover */
}

div.woocommerce-container > div > div.woocommerce-container-single-product > div.single-product-layout > div.product-left > div.product-gallery > div > ol {
  display: flex;
  justify-content: center;
}


div.woocommerce-container > div > div.woocommerce-container-single-product > div.single-product-layout > div.product-left > div.product-gallery > div > ol > li {
  width: 12px !important; /* Adjust size of the dots */
  height: 12px !important;
  border-radius: 50% !important; /* Makes them circular */
  background-color: #ccc !important; /* Default grey color */
  display: inline-block !important;
  transition: background-color 0.3s ease, transform 0.2s ease;
  position: relative;
  appearance: button;
  background: rgb(158, 158, 158);
  cursor: pointer;
    border: none;
    color: inherit;
    font: inherit;
    margin: 1px;
    outline: inherit;
    padding: 0px;
    position: relative;
    border-radius: 50%;
    box-shadow: rgb(82, 82, 82) 0px 0px 0px 1px inset;
    display: inline-flex;
    flex: 0 1 auto;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    vertical-align: middle;
    height: 1rem;
    width: 1rem;
    opacity: 0.45;
    transform: scale(0.55);
    transition: opacity 125ms ease-in-out, transform 125ms ease-in-out;
}


div.woocommerce-container > div > div.woocommerce-container-single-product > div.single-product-layout > div.product-left > div.product-gallery > div > ol > li img {
  position: relative; /* Ensure the image is the parent for the overlay */
  width: 12px !important; /* Adjust size of the dots */
  height: 12px !important;
  border-radius: 50% !important; /* Makes them circular */
  background-color: #ccc !important; /* Default grey color */
}

div.woocommerce-container > div > div.woocommerce-container-single-product > div.single-product-layout > div.product-left > div.product-gallery > div > ol > li img::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Grey overlay with 50% opacity */
  pointer-events: none; /* Ensure the overlay doesn't block interactions */
  z-index: 1; /* Place the overlay above the image */
}

.single-product-layout {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.woocommerce-breadcrumb {
 width: 100%;

}

/* Left Side Styling */
.product-left {
  width: 55%;
}

.woocommerce-breadcrumb {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

.product-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 10px;
}

.product-rating {
  margin-bottom: 10px;
}

.product-gallery {
  margin-top: 15px;
}

/* Right Side Styling */
.product-right {
  width: 40%;
  margin-top: 30px;
}


.product-cart {
  margin-bottom: 15px;
}

.product-stock {
  font-size: 14px;
  color: #333;
}

.product-details p {
  margin-block-end: 1rem;
  margin-block-start: 1rem;
}

.product-details h2 {
  margin-block-end: 1.5rem;
  margin-block-start: 1.5rem;
}

.product-details {
  margin-top: 30px;
  padding: 20px;
  background: #f8f8f8;
  border-radius: 5px;
  align-items: stretch;
  color: rgb(51, 51, 51);
  font-family: "Titillium Web", sans-serif;
  text-size-adjust: 100%;
  line-height: 1rem;
  margin-block-end: 1rem;
  margin-block-start: 1rem;

    --fwnormal: 400;
    --app-padding-with-header: calc(var(--app-header-height) + 0.5rem);
    --app-header-height: 115px;
    font-size: 0.875em;
    --placement-breadcrumb-gap: 1.5rem;
    --placement-ribbon-between-gap: 0.25rem;
    --placement-gap: 2.5rem;
    --placement-ribbon-gap: 1rem;
    --stm-container-block-max-width: 97rem;
    --stm-container-block-gutter-start: var(--stm-container-block-inline-start,var(--stm-container-block-gap));
    --stm-container-block-gutter-end: var(--stm-container-block-inline-end,var(--stm-container-block-gap));
    --stm-container-block-inline-start: var(--stm-container-block-gap);
    --stm-container-block-inline-end: var(--stm-container-block-gap);
    --stm-container-block-gap: 3rem;
    hyphens: auto;
    word-break: normal;
    -webkit-tap-highlight-color: rgba(18, 82, 166, 0.1);
    display: flex;
    -webkit-box-align: stretch;
    align-items: stretch;
    flex-direction: column;
    -webkit-box-pack: start;
    justify-content: start;
    gap: 1.5rem;
    grid-column: 1 / 9;
}

@media (max-width: 1024px) {
    .single-product-layout {
        flex-direction: column;
    }
    .product-left {
        width: 100%;
    }
    .product-right {
        width: 100%;
        margin-top: 0px;        
    }
    .woocommerce-container-single-product {
        padding: 0px;
        margin: 0px;
    }
    .product-title {
        font-size: 24px;
        line-height: 26px;
    }
}

@media (max-width: 1500px) {
  .woocommerce-container-single-product .woocommerce-product-gallery__image {
    width: auto;
    height: 400px;
  }
  .woocommerce-product-gallery__image {
    width: auto;
    height: 400px;
  }
  .woocommerce-product-gallery__image img {
    width: auto;
    height: 400px;
  }
  .woocommerce-product-gallery__image a {
    width: auto;
    height: 400px;
  }
  .woocommerce-product-gallery__image a img {
    width: auto;
    height: 400px;
  }
}



/* Ensure the container displays flex */
.woocommerce .woocommerce-container {
    display: flex;
    flex-direction: row-reverse; /* Positions sidebar on the left */
}

@media (max-width: 1024px) {
    .woocommerce .woocommerce-container {
        flex-direction: column; /* Stacks sidebar on top */
        width: 100%;
    }
    .woocommerce .sidebar {
        order: 1; /* Moves sidebar below content */
        width: 100%;
        margin-top: 70px;
        margin-left: 10px;
    }
    
    .woocommerce .content-area {
        order: 2; /* Moves sidebar below content */
        width: 100%;
    }
  .woocommerce .content-area h1 {
    margin-left: 10px;
    }
  .term-description {
    margin-left: 10px;
  }
  .woocommerce-result-count {
    margin-left: 10px;
  }
  .orderby {
    margin-left: 10px;
  }
}

.woocommerce-container {
    margin-left: 1%;
    margin-right: 1%;
}

.woocommerce .sidebar {

    width: 15%;
    min-width: 250px;
}

.woocommerce .content-area {

    width: 85%;
    margin-left: 20px;
}

.woocommerce .content-area h1 {
    padding-left: 1rem;
}

.woocommerce .content-area .woocommerce-ordering {
    padding-left: 1rem;
}


.toggle-category-btn {
    background-color: #06283d;
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 16px;
    width: 100%;
    text-align: left;
    display: block;
    margin-bottom: 5px;
}

.toggle-category-btn:hover {
    background-color: #084a7b;
}

.product-categories-container {
    padding: 10px;
    background: #f9f9f9;
    border: 1px solid #ddd;
}

/* Product Categories Toggle */
.product-categories-container {
    display: none; /* Default: hidden */
    margin-top: 10px;
}

.toggle-category-btn {
    background-color: #06283d;
    color: white;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    text-align: center;
    width: 100%;
}

.toggle-category-btn:hover {
    background-color: #041e2b;
}

/* Enhanced Category Hierarchy Styles */
.product-categories li.ancestor-cat a {
    color: #666;
    font-style: italic;
    padding-left: 0;
}

.product-categories li.current-cat-parent > a {
    font-weight: bold;
    color: #06283d;
    background-color: #f0f8ff;
    padding: 8px 12px;
    border-left: 4px solid #06283d;
    margin-bottom: 8px;
    display: block;
}

.product-categories li.current-cat-parent ul.children {
    margin: 8px 0 0 20px;
    padding: 0;
    border-left: 2px solid #e0e0e0;
}

.product-categories li.current-cat-parent ul.children li {
    margin-left: 15px;
    position: relative;
}

.product-categories li.current-cat-parent ul.children li:before {
    content: "└";
    position: absolute;
    left: -15px;
    color: #ccc;
}

.product-categories li.current-cat-parent ul.children li a {
    color: #06283d;
    padding: 4px 8px;
    display: block;
    font-size: 14px;
}

.product-categories li.current-cat-parent ul.children li a:hover {
    background-color: #f9f9f9;
    color: #041e2b;
}

.product-categories li.sibling-cat a {
    color: #888;
    padding: 4px 12px;
    display: block;
    border-left: 2px solid transparent;
}

.product-categories li.sibling-cat a:hover {
    background-color: #f5f5f5;
    border-left-color: #06283d;
}

.product-categories .count {
    float: right;
    color: #999;
    font-size: 12px;
    background-color: #f0f0f0;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 8px;
}

@media (max-width: 1024px) {
  section.upsells ul.products,
  section.related ul.products {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 15px !important;
    padding-bottom: 15px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Key changes for equal height */
  section.upsells ul.products li.product,
  section.related ul.products li.product {
    flex: 0 0 calc(50% - 8px) !important;
    scroll-snap-align: start !important;
    margin: 0 !important;
    width: auto !important;
    float: none !important;
    min-height: 350px; /* Start with full height */
    display: flex !important;
  }

  /* Inner container that will match heights */
  section.upsells ul.products li.product .product-inner,
  section.related ul.products li.product .product-inner {
    width: 100%; /* Ensure full width */
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important; /* Take up all available space */
  }

  /* Force image containers to equal height */
  section.upsells ul.products li.product .product-image-wrap,
  section.related ul.products li.product .product-image-wrap {
    height: 200px; /* Fixed height or use aspect-ratio */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Make product details flexible */
  section.upsells ul.products li.product .product-details,
  section.related ul.products li.product .product-details {
    flex: 1 !important; /* Expand to fill space */
    display: flex !important;
    flex-direction: column !important;
    padding: 5px 0 !important;
  }

  /* Push button to bottom */
  section.upsells ul.products li.product .button,
  section.related ul.products li.product .button {
    margin-top: auto !important;
  }

  /* Handle multi-line titles gracefully */
  section.upsells ul.products li.product .woocommerce-loop-product__title,
  section.related ul.products li.product .woocommerce-loop-product__title {
  display: -webkit-box !important;
  line-clamp: 2 !important;
  -webkit-line-clamp: 2 !important; /* Limit to 2 lines */
  -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 2.8em !important; /* Fallback height */
    line-height: 1.4em !important;
    padding-left: 0.2rem;
    padding-right: 0.2rem;
  }
}


.frontpage .products .has-text-align-center .woocommerce-loop-product__title .wp-block-post-title .has-medium-font-size :where(a) {
  font-size: 1rem !important;
  font-weight: normal;
}

.frontpage .products .has-text-align-center .woocommerce-loop-product__title .wp-block-post-title .has-medium-font-size h3 {
  font-size: 1rem !important;
  font-weight: normal;
}

.frontpage .products .woocommerce-loop-product__title h3 {
  font-size: 1rem !important;
  font-weight: normal;
}

.frontpage .products .woocommerce-loop-product__title a {
  font-size: 1rem !important;
  font-weight: normal;
}


/* Change WooCommerce archive background color */
/* Ensure product container adapts */
.woocommerce ul.products,
.wp-block-woocommerce-product-collection ul.products {
  background: rgb(241, 241, 241); /* Prevents overriding */
  padding: 20px; /* Adds space inside the container */
  border-radius: 5px;
  margin-left: 0;
  margin-right: 0;
  display: grid; /* Use grid layout */
  grid-template-columns: 1fr; /* Default: 1 column for very small screens */
  width: auto; /* Ensures it adapts */
  gap: 20px; /* Adds spacing between product cards */  
  min-height: 300px;
}

/* Mobile displays over 300px width: show 2 products per row */
@media (min-width: 300px) {
  .woocommerce ul.products,
  .wp-block-woocommerce-product-collection ul.products {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Larger tablets and small desktops: 3 products per row */
@media (min-width: 768px) {
  .woocommerce ul.products,
  .wp-block-woocommerce-product-collection ul.products {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Large screens: auto-fill with minimum 200px width */
@media (min-width: 1024px) {
  .woocommerce ul.products,
  .wp-block-woocommerce-product-collection ul.products {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

.woocommerce-container ul.products {

  padding-left: 1rem;
  padding-right: 1rem;
}



.woocommerce ul.products li.product,
.wp-block-woocommerce-product-collection ul.products li.product {
  background: white;
  padding: 15px;
  margin-right: auto;
  margin-left: auto;
  border-radius: 5px;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%; /* Ensures uniform height */
  position: relative;
  max-width: 300px; /* Set a fixed max width */
  width: 100%; /* Ensure it adapts */
  overflow: hidden; /* Prevents content overflow */
}

/* Force WooCommerce Product Images to Have the Same Height */
.woocommerce ul.products li.product img,
.wp-block-woocommerce-product-collection ul.products li.product img {
  max-width: 100%; /* Prevents image from exceeding card width */
  height: auto; /* Maintain aspect ratio */
  object-fit: cover; /* Ensures uniform image cropping */
  display: block;
  margin: 0 auto; /* Center image */
}

.woocommerce-Tabs-panel .woocommerce-Tabs-panel--description .panel .entry-content .wc-tab > h1, h2, h3, h4, h5, h6, p {
    width: 100%;
    margin-right: auto;
    padding-left: 0.1rem;
    padding-right: 0.1rem;
    margin-bottom: 1rem;
    max-width: 100%;
}


@media (max-width: 1024px) {

  .woocommerce ul.products li.product,
  .wp-block-woocommerce-product-collection ul.products li.product {
    padding: 5px;
    margin-right: auto;
    margin-left: auto;

  }
  .woocommerce-container .content-area {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
	.woocommerce ul.products,
	.wp-block-woocommerce-product-collection ul.products {
		background: rgb(241, 241, 241); /* Prevents overriding */
		padding: 20px; /* Adds space inside the container */
		border-radius: 5px;
		display: grid; /* Use grid layout */

		width: auto; /* Ensures it adapts */
	}

}

/* Corrected Sale Badge Position */
.woocommerce ul.products li.product span.onsale,
.wp-block-woocommerce-product-collection ul.products li.product span.onsale {
  display: inline-block !important; /* Ensure it is visible */
  background-color: red !important; /* Red background */
  color: white !important; /* White text */
  font-weight: bold !important; /* Bold text */
  text-transform: uppercase; /* Capitalized text */
  font-size: 18px; /* Adjust text size */
  padding: 5px 10px; /* Adjust padding */
  border-radius: 5px; /* Rounded corners */
  position: absolute; /* Position inside the product card */
  top: 10px; /* Position from the top of the product card */
  left: 10px; /* Position from the left of the product card */
  z-index: 10; /* Ensure it stays above other elements */
}

/* Change the text to "ALE!" */
.woocommerce span.onsale::before,
.wp-block-woocommerce-product-collection span.onsale::before {
  content: ""; /* Override default "SALE" text */
}

.product-gallery,
.wp-block-woocommerce-product-collection .product-gallery {
  position: relative;
}

/* Corrected Sale Badge Position */
.woocommerce-container .product-gallery span.onsale,
.wp-block-woocommerce-product-collection span.onsale {
  display: inline-block !important; /* Ensure it is visible */
  background-color: red !important; /* Red background */
  color: white !important; /* White text */
  font-weight: bold !important; /* Bold text */
  text-transform: uppercase; /* Capitalized text */
  font-size: 2rem; /* Adjust text size */
  padding: 5px 10px; /* Adjust padding */
  border-radius: 5px; /* Rounded corners */
  position: absolute; /* Position inside the product card */
  top: 10px; /* Position from the top of the product card */
  left: 10px; /* Position from the left of the product card */
  z-index: 10; /* Ensure it stays above other elements */
}

/* Custom style for WooCommerce Product Price block */
.wc-block-components-product-price.is-style-custom-price-style { 
  font-size: 1rem; 
  color: #e60023; 

  }




/* Ensure product title aligns consistently */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  flex-grow: 1; /* Makes sure the title takes available space */
  text-align: left; /* Center the title */
}

ul.products li.product h2 {
  line-height:1.2em;
  height:3.6em; /* fell free to use your own value */
  overflow: hidden;
  text-overflow: ellipsis;
  position:relative;
	font-size: 1rem;;
}

ul.products li.product h2:after {
  content: "";
  text-align:right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 2.4em; /* fell free to use your own value */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 99%);
}

/* Wrapper to align elements */
.custom-stock-wrapper {
  display: flex;
  gap: 8px; /* Space between balloon and text */
  margin-top: 10px; /* Ensure 10px space from price element */
  margin-bottom: 0.3rem;
  clear: both; /* Ensure it appears below price on new line */
}

/* Variation list: one row per variant */
.custom-stock-wrapper.variations {
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}

.custom-stock-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Stock balloons (colored circles) */
.custom-stock-balloon {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}

/* Green balloon for in-stock */
.custom-stock-balloon.in-stock {
  background-color: #28a745; /* Green */
}

/* Dark grey balloon for out-of-stock */
.custom-stock-balloon.out-of-stock {
  background-color: #555; /* Dark grey */
}

/* Amber balloon for backorder */
.custom-stock-balloon.backorder {
  background-color: #f0ad4e; /* Amber */
}

/* Stock text styling */
.custom-stock-text {
  font-size: 14px;
  font-weight: 600;
  color: #333; /* Dark charcoal */
  text-transform: uppercase;
}

/* Position price container at the bottom left */
ul.products li.product .price {
  max-width: 65%;
  position: absolute;
  bottom: 10px;
  left: 10px;
  font-size: 1rem;
  font-weight: bold;
  color: red;
  display: flex;
  align-items: center;
  gap: 0.2rem; /* Adds space between sale and regular price */
  flex-direction: row; /* Ensures correct order */
  flex-wrap: wrap;
}

/* Woocommerce price on single product page upsells and related */
.woocommerce-container .product-details ul.products li.product .price {
  max-width: 70%;
  bottom: 10px;
  left: 10px;
  font-size: 1rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 0.2rem; /* Adds space between sale and regular price */
  flex-direction: row; /* Ensures correct order */
  flex-wrap: wrap;
}

/* Woocommerce price on single product page upsells and related */
.woocommerce-container .product-details ul.products li.product .price .woocommerce-Price-amount{
  color: red; /* Change text color to red */
  font-size: 1rem;
}

/* Position price at the bottom left */
ul.products li.product .price .woocommerce-Price-amount{
  color: red; /* Change text color to red */

}

/* Style sale price */
ul.products li.product .price ins .woocommerce-Price-amount{
  color: red; /* Ensure sale price is red */
  font-weight: bold;
  font-size: 1rem;

  margin-right: 0.3rem; /* Space between sale price and regular price */
  align-self: flex-start;
}


@media (max-width: 1024px) {
  /* Position price container at the bottom left */
/* Style sale price */
  ul.products li.product .price ins .woocommerce-Price-amount{
    font-size: 1rem;
    margin-top: 20px;
    padding-top: 20px;

  }
  
}

/* Specific styles for mobile devices with 390px width */
@media (max-width: 390px) {
  .woocommerce ul.products li.product,
  .wp-block-woocommerce-product-collection ul.products li.product {
    min-height: 300px !important; /* Increased height for 390px devices */
    padding: 12px !important;
  }
  
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    min-height: 3.2em !important; /* Ensure consistent title height */
    margin-bottom: 10px !important;
  }
  
  .woocommerce ul.products li.product .price {
    margin-bottom: 45px !important; /* More space for price section */
  }
  
  .woocommerce ul.products li.product .button {
    margin-top: 15px !important; /* More space above button */
    margin-bottom: 10px !important;
  }
  
  .woocommerce ul.products li.product .custom-stock-wrapper {
    margin-top: 10px !important; /* Always 10px space from price */
    margin-bottom: 8px !important; /* More space for stock indicator */
  }
}

/* General rule for all screen sizes - ensure stock wrapper has consistent spacing from price */
.woocommerce ul.products li.product .custom-stock-wrapper {
  margin-top: 10px !important; /* Always maintain 10px gap from price element */
  clear: both; /* Ensure it's on a new line after price */
}

/* Ensure price element doesn't interfere with stock positioning */
.woocommerce ul.products li.product .price {
  margin-bottom: 0 !important; /* Remove bottom margin from price to let stock wrapper control spacing */
  display: block !important; /* Ensure price takes full width */
}


/* Style sale price */
ul.products li.product .price ins {
  order: 1; /* Moves sale price first */
  color: red !important; /* Ensure sale price is red */
  font-weight: bold;
  font-size: 1rem;
}

/* Style sale price */
.single-product-layout .price ins {
  order: 1; /* Moves sale price first */
  color: red !important; /* Ensure sale price is red */
  font-weight: bold;
  font-size: 2.5rem;
}

/* Position price at the bottom left */
.single-product-layout .price {
  color: red; /* Change text color to red */
  font-weight: bold;
  font-size: 2.5rem;
}

/* Position price at the bottom left */
.single-product-layout .price del {
  order: 2; /* Moves regular price second */
  color: #555; /* Dark grey */
  font-size: 2rem;
  font-weight: normal;
}

/* Style regular price when there's a sale */
ul.products li.product .price del .woocommerce-Price-amount {
  order: 2; /* Moves regular price second */
  color: #555; /* Dark grey */
  font-size: 16px;
  font-weight: normal;
}

/* Style regular price when there's a sale */
ul.products li.product .price del {
  order: 2; /* Moves regular price second */
  color: #555 !important; /* Dark grey */
  font-size: 16px;
  font-weight: normal;
}

/* Style regular price when there's a sale */
ul.products li.product .price del .woocommerce-Price-amount {
  order: 2; /* Moves regular price second */
  color: #555; /* Dark grey */
  font-size: 16px;
  font-weight: normal;
}

/* Align add-to-cart button to bottom */
ul.products li.product .woocommerce-loop-product__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-align: left;
}

ul.products li.product .button {
  margin-top: auto; /* Pushes button to the bottom */
}
/* Hide text and style button */
.woocommerce ul.products li.product .button,
.woocommerce-container-single-product .related.products .product .button,
.woocommerce-container-single-product .up-sells.products .product .button {
    font-size: 0; /* Hide text */
    width: 20%; /* Fixed width */
    height: auto; /* Fixed height */
    aspect-ratio: 1; /* Maintain square shape */
    background: #1769ff; /* Background color */
    border-radius: 50%; /* Circular shape */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    position: relative;
}

/* Add shopping basket icon */
.woocommerce-container-single-product .product-cart .single_add_to_cart_button .button::before,
.woocommerce ul.products li.product .button::before,
.woocommerce-container-single-product .related.products .product .button::before,
.woocommerce-container-single-product .up-sells.products .product .button::before {
    content: "\f291"; /* FontAwesome shopping basket icon */
    font-family: "Font Awesome 5 Free"; /* FontAwesome */
    font-weight: 900;
    font-size: 20px; /* Adjust icon size */
    color: white; /* Icon color */
}

div.woocommerce-container > div > div.woocommerce-container-single-product > div.single-product-layout > div.product-right > div.product-cart > form > button,
div.woocommerce-container > div > div.woocommerce-container-single-product > div.single-product-layout > div.product-right > form > button {
    background: #1769ff; /* Background color */
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 16px;
    width: 50%;
    text-align: center;
    display: block;
    margin-top: 10px;
    margin-bottom: 10px;
}

div.woocommerce-container > div > div.woocommerce-container-single-product > div.single-product-layout > div.product-right > form > button::before {
    content: "\f291"; /* FontAwesome shopping basket icon */
    font-family: "Font Awesome 5 Free"; /* FontAwesome */
    font-weight: 900;
    font-size: 20px; /* Adjust icon size */
    color: white; /* Icon color */
    margin-right: 15px;
}

/* Align button in the product card */
.woocommerce ul.products li.product,
.single-product .related.products .product,
.single-product .up-sells.products .product {
    display: flex;
    flex-direction: column;
}

/* Ensure button stays at the bottom */
.woocommerce ul.products li.product .button,
.single-product .related.products .product .button,
.single-product .up-sells.products .product .button {
    align-self: center;
    margin-top: auto; /* Push to the bottom */
    margin-right: 10px;
    margin-left: auto;
}


/* Quantity field with +/- buttons (buttons added via functions.php, logic in assets/js/custom.js) */
.woocommerce .quantity,
.woocommerce-page .quantity {
  display: inline-flex;
  align-items: stretch;
  height: 46px;
  border: 1px solid #cccccc;
  border-radius: 4px;
  overflow: hidden;
  background: #ffffff;
  vertical-align: middle;
}
.woocommerce .quantity .qty-btn,
.woocommerce-page .quantity .qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  min-width: 42px;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  background: #f3f4f6;
  color: #0b2b48;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.woocommerce .quantity .qty-btn:hover,
.woocommerce-page .quantity .qty-btn:hover {
  background: #e5e7eb;
  opacity: 1;
}
.woocommerce .quantity .qty-btn:active,
.woocommerce-page .quantity .qty-btn:active {
  background: #d1d5db;
}
.woocommerce .quantity input.qty,
.woocommerce-page .quantity input.qty {
  width: 56px;
  min-width: 56px;
  height: auto;
  margin: 0;
  padding: 0 4px;
  border: none;
  border-left: 1px solid #e5e7eb;
  border-right: 1px solid #e5e7eb;
  border-radius: 0;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  -moz-appearance: textfield;
}
.woocommerce .quantity input.qty:focus,
.woocommerce-page .quantity input.qty:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px #0b2b48;
}
/* Cart table: keep the group right-aligned in its cell on mobile card layout */
.woocommerce-cart-form .product-quantity .quantity {
  margin-left: auto;
}
/* Single product on narrow screens: the group should not stretch to full width */
@media (max-width: 768px) {
  .single-product .woocommerce-variation-add-to-cart .quantity {
    width: auto;
    align-self: flex-start;
  }
}

/* "Näytä ostoskori" link that WooCommerce appends after an AJAX add-to-cart in product lists.
   The price is absolutely positioned at the card's bottom edge, so the appended link used to land on
   top of it. Give the link its own fixed-height row at the bottom and lift the price by that height. */
.woocommerce ul.products li.product .added_to_cart {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: 32px;
  line-height: 31px;
  margin: 6px 0 0;
  padding: 0;
  border-top: 1px solid #e5e7eb;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #1363df;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.woocommerce ul.products li.product .added_to_cart:hover {
  text-decoration: underline;
}
.woocommerce ul.products li.product:has(.added_to_cart) .price {
  bottom: 48px; /* 10px original offset + 38px link row (32px + 6px margin) */
}
/* Keep the two-line sale price clear of the stock line once the link row has taken the card's slack. */
.woocommerce ul.products li.product:has(.added_to_cart) .custom-stock-wrapper {
  margin-bottom: 36px !important;
}

/* Checkout: "Palaava asiakas? Kirjaudu tästä" and "Onko sinulla kuponki? ..." notices.
   These use WooCommerce's light grey info box, but the theme's generic notice rule above paints links
   white for its blue boxes, which made the links invisible here. Use the site's normal text colour. */
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
  color: #000;
}
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info a,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a {
  color: #000;
  text-decoration: underline;
  font-weight: 600;
}
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info a:hover,
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a:hover {
  color: #000;
  opacity: 0.7;
}

/* Checkout validation errors ("Laskutus Puhelin on vaadittu tieto." etc.). Same issue as the notices
   above: WooCommerce's light grey error box plus the theme's white notice links made the messages
   unreadable. Use the site's normal black text; the field name stays bold. */
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-error li,
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-error a,
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-error strong {
  color: #000;
}
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-error a {
  text-decoration: none;
}
.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-error a:hover {
  color: #000;
  text-decoration: underline;
  opacity: 1;
}

/* Express checkout gate (Apple Pay / Google Pay): buttons stay hidden until the form is complete */
.xcom-express-locked {
  display: none !important;
}
.xcom-express-gate-notice {
  background: #f6f5f8;
  border-left: 4px solid #1363df;
  border-radius: 4px;
  padding: 12px 16px;
  margin: 0 0 1.5em;
  font-size: 15px;
  color: #000;
}
.xcom-express-gate-notice ul {
  margin: 6px 0 0 18px;
  padding: 0;
}
.xcom-express-gate-notice li {
  margin: 2px 0;
}

/* Checkout page: every notice (validation errors, coupon/success messages, info) renders in WooCommerce's
   light grey box, wherever WooCommerce inserts it (top notice area or prepended inside form.checkout).
   The generic notice rules above assume the theme's blue box and paint links white, so force the site's
   black text here. Supersedes the two narrower checkout rules above. */
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-error li,
.woocommerce-checkout .woocommerce-error a,
.woocommerce-checkout .woocommerce-error strong,
.woocommerce-checkout .woocommerce-message,
.woocommerce-checkout .woocommerce-message a,
.woocommerce-checkout .woocommerce-message strong,
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-info a,
.woocommerce-checkout .woocommerce-info strong {
  color: #000 !important;
}
.woocommerce-checkout .woocommerce-error a:hover,
.woocommerce-checkout .woocommerce-message a:hover,
.woocommerce-checkout .woocommerce-info a:hover {
  color: #000 !important;
  text-decoration: underline;
  opacity: 1;
}