/*!
Theme Name:   Storefront Child
Theme URI:    https://woocommerce.com/storefront/
Author:       Automattic
Author URI:   https://woocommerce.com/
Template:     storefront
Description:  Storefront is the perfect theme for your next WooCommerce project. Designed and developed by WooCommerce Core developers, it features a bespoke integration with WooCommerce itself plus many of the most popular customer facing WooCommerce extensions. There are several layout & color options to personalise your shop, multiple widget regions, a responsive design and much more. Developers will love its lean and extensible codebase making it a joy to customize and extend. Looking for a WooCommerce theme? Look no further!
Version:      2.8.2
Tested up to: 5.5.1
Requires PHP: 5.6.0
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  storefront
Tags:         e-commerce, two-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, featured-images, full-width-template, threaded-comments, accessibility-ready, rtl-language-support, footer-widgets, sticky-post, theme-options, editor-style
 */

/* Colors */
:root {
  --primary: #005cb9;
  --primary-dark: #00396b;
  --lavender: #d9e8f6;
  --green: #6cc24a;
  --blue: #d9e8f6;
  --peach: #f2938c;
  --yellow: #fee685;
  --tertiary-red: #d22730;
  --purple: #986898;
  --teal: #00a398;
  --gray: #565c65;
  --secondary-blue: #6dabe4;
}

/* Fonts */
body,
button,
input,
select,
textarea {
  font-family: 'Source Sans 3', Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.woocommerce-placeholder.wp-post-image,
.woocommerce-product-gallery__image--placeholder {
  border: 1px solid #ddd;
}

.entry-title {
  margin-bottom: 2rem;
}

h1, h2, h3, h4, h5, h6, .wc-block-grid__product-title {
  font-weight: 700;
}

h2,
p + h2 {
  margin: 1.5rem 0 1rem;
}

table.shop_table td {
  vertical-align: middle;
}

#customer_login {
  display: flex;
}

#customer_login > div {
  border: 1px solid #eee;
  padding: 0 2rem;
}

.woocommerce-form-login__rememberme {
  margin-bottom: 1rem;
}

.woocommerce-input-wrapper .description {
  display: block;
  margin-top: 1.4rem;
}

/* Header - cart */
.site-header-cart .cart-contents:after {
  float: left;
  margin-right: 1rem;
}

.site-header-cart .widget_shopping_cart,
.site-header-cart .widget_shopping_cart .buttons,
.site-header-cart .widget_shopping_cart .total {
  background-color: var(--primary-dark);
}

.site-header-cart .widget_shopping_cart a,
.site-header-cart .widget_shopping_cart p {
  color: white;
}

a.remove:before {
  color: #eee;
}

p a {
  text-decoration: underline;
}

p a:hover {
  color: var(--primary);
}

/* My Account - Edit Address */
.addresses header.title a {
  float: left;
}

/* Checkout - Hide containers on load */
/* .woocommerce-additional-fields, */
.shipping_address {
  display: none;
}

/* Seperate additional fields from shipping */
.woocommerce-additional-fields {
  border-top: 1px dashed #dadada;
  margin-top: 2rem;
  padding-top: 1.5rem;
}

/* Add to cart button */
.ajax_add_to_cart.added {
  display: none !important;
}

a.added_to_cart.wc-forward {
  background-color: #eee !important;
  border-color: #eee !important;
  color: #333 !important;
}

a.added_to_cart.wc-forward:after {
  content: inherit !important;
}

/* Categories */
.products .product-category > a {
  align-items: center;
  display: flex;
  filter: brightness(1);
  min-height: 7.5rem;
  padding: 1rem 1.5rem;
  text-align: left;
}

.site-main ul.products.columns-3 li.product {
  margin-right: 0;
}

@media (min-width: 768px) {
  ul.products:after,
  ul.products:before {
    content: initial;
  }

  .products.columns-3 {
    display: flex;
    flex-wrap: wrap;
    gap: 4%;
  }

  .site-main ul.products.columns-3 li.product {
    display: flex;
    margin-bottom: 4%;
    width: 48%;
  }

  ul.products li.product a {
    flex-grow: 1;
  }
}

@media (min-width: 1024px) {
  .site-main ul.products.columns-3 li.product {
    width: 30%;
  }
}

ul.products li.type-product a {
  border: #ddd solid 4px;
  display: block;
  padding: 0.75rem;
}

ul.products li.type-product a:hover {
  border-color: var(--tertiary-red);
}

ul.products li.type-product a:hover .woocommerce-loop-product__title {
  color: var(--tertiary-red);
}

/* Buttons */
.site-content .button {
  /* background: none !important; */
  font-size: 1rem;
  font-weight: normal !important;
  /* line-height: 1; */
  margin-bottom: 1rem;
  padding: 0.6180469716em 1.5rem;
  text-decoration: none !important;
}

.site-content .button-secondary {
  background-color: var(--primary) !important;
  color: white;
}

.site-content .button:hover {
  text-decoration: underline !important;
}

.site-content div:not(role="status") .button:hover {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

/* div:not(role="status") {
  border: 0.2rem solid var(--tertiary-red) !important;
  color: var(--tertiary-red) !important;
} */

/* Woocommerce messages */

.woocommerce-message {
  background-color: var(--green);
  color: black;
  display: flex;
}

.woocommerce-info, 
.woocommerce-noreviews, 
p.no-comments {
  background-color: var(--primary);
  color: white;
}

.woocommerce-message .button,
.woocommerce-message .button:hover {
  border-color: white !important;
  color: white !important;
  white-space: nowrap;
}

.woocommerce-message .button:hover {
  text-decoration: underline !important;
}

/* Single Product */
.single-product div.product form.cart {
  margin-bottom: 0;
}

.single-product div.product .product_meta {
  padding-top: 0;
  border-top: 0;
}

.input-text.qty {
  background-color: rgba(210, 39, 48, 0.1);
  box-shadow: inset 0 1px 1px rgba(210, 39, 48, 0.2);
}

.product-files {
  margin-bottom: 1rem;
}

.single-product div.product .images,
.single-product div.product .summary,
.single-product div.product .woocommerce-product-gallery {
  margin-bottom: 0;
}

.single-product div.product .woocommerce-tabs {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  clear: none;
  float: right;
  margin-top: 2em;
  padding-top: 0;
  width: 52.9411764706%;
}

.single-product div.product .woocommerce-tabs ul.tabs {
  display: none;
}

.single-product div.product .woocommerce-tabs .panel {
  width: 100%;
}

/* Header */
.site-header {
  border-bottom: 0;
  border-bottom: 1px solid #ccc;
  box-shadow: 0 0 7px rgb(0 0 0 / 30%);
  /* border-bottom: none !important; */
  margin-bottom: 4rem;
  padding: 1.5rem 0;
}

.site-header .col-full {
  margin: 0;
  padding: 0;
}

@media (max-width: 66.4989378333em) {
  .container {
    margin-left: 2.617924em;
    margin-right: 2.617924em;
    padding: 0;
  }
}

@media (min-width: 768px) and (max-width: 960px) {
  .container {
    flex-direction: column;
  }

  .site-header .storefront-primary-navigation .col-full {
      padding-top: 1rem;
      justify-content: normal !important;
    }
}

@media (min-width: 768px) {
  .container {
    display: flex;
    max-width: 66.4989378333em;
    margin-left: auto;
    margin-right: auto;
    padding: 0 2.617924em;
    box-sizing: content-box;
  }

  /* .storefront-primary-navigation {
    flex: 1;
  } */

  @media (min-width: 768px) {
    .storefront-primary-navigation {
      /* margin-left: auto; */
      width: 100%;
    }
  }

  .primary-navigation {
    display: flex;
  }

  .main-navigation ul.menu, 
  .main-navigation ul.nav-menu {
    margin: 0 0 0 auto;
  }

  .site-header .storefront-primary-navigation .col-full {
    float: none;
    display: flex;
    /* flex-wrap: wrap; */
    align-self: center;
    justify-content: flex-end;
  }

  .main-navigation ul.menu > li > a, .main-navigation ul.nav-menu > li > a,
  .site-header-cart .cart-contents {
    padding: 1em;
  }

  .site-header-cart .cart-contents {
    padding: 1em 0;
  }
}

.site-header .storefront-primary-navigation > .col-full > * {
  /* display: inline-block; */
  float: none;
  width: auto;
}

.site-header .main-navigation,
.site-header .site-header-cart {
  clear: none;
  /* width: auto !important; */
}

.site-header .storefront-primary-navigation > .col-full .site-header-cart {
  width: 100px;
}

.site-header-cart .cart-contents .count {
  opacity: 1;
}

.site-header-cart .widget_shopping_cart a:hover {
  color: white;
  text-decoration: underline;
}

.site-header .main-navigation a:hover {
  /* opacity: 0.85; */
  color: var(--primary);
}

@media (min-width: 768px) {
  .site-header-cart.focus .widget_shopping_cart,
  .site-header-cart:hover .widget_shopping_cart,
  .main-navigation ul li:hover > ul {
    box-shadow: 0 10px 16px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
    left: auto;
    margin-top: -1rem;
    right: -1rem;
    text-align: left;
  }

  .site-header-cart.focus .widget_shopping_cart,
  .site-header-cart:hover .widget_shopping_cart {
    width: 225px;
  }

  .main-navigation ul.menu ul.sub-menu,
  .main-navigation ul.nav-menu ul.children {
    background-color: var(--primary);
  }

  .main-navigation ul.menu ul.sub-menu > li:not(:first-child) {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }

  .main-navigation ul.menu ul.sub-menu > li a:hover {
    background-color: rgba(0, 0, 0, 0.1);
    opacity: 1;
  }
}

@media (min-width: 768px) {
  .woocommerce-active .site-header .site-branding {
    width: auto;
    float: none;
    margin-bottom: 0;
  }
}

/* .site-branding {
  width: auto !important;
} */

.site-header .site-branding img {
  max-width: none;
  width: 285px;
}

/* Search */
@media (min-width: 768px) {
  .woocommerce-active .site-header .site-search {
    display: flex;
    align-items: center;
    width: auto;
    float: none;
    margin-bottom: 0;
    margin-right: 1rem;
  }
}

.site-header .col-full {
    max-width: none;
    display: flex;
  }

@media (min-width: 500px) and (max-width: 768px) {
  .site-header .col-full {
    display: block;
  }
}

.main-navigation.toggled .menu>ul:not(.nav-menu) {
  border-top: 1px solid #ccc;
  margin-top: 1.5rem;
  float: left;
  width: 100%;
  padding-top: .5rem;
}

/* Content */
@media (min-width: 768px) {
  .woocommerce-cart .content-area {
    float: none;
    /* width: 100%; */
  }
}

/* Checkout */
table.cart td.actions {
  padding-top: 1rem;
}

/* My Account */
@media (min-width: 768px) {
  /* .woocommerce-account .entry-title {
    clear: both;
    width: 73.9130434783%;
    float: right;
  } */

  .woocommerce-MyAccount-navigation {
    float: left !important;
    margin-right: 4.347826087% !important;
  }

  .woocommerce-MyAccount-content {
    margin-right: 0 !important;
  }
}

/* Mobile */
button.menu-toggle {
  margin-top: 0.5rem;
}

@media (max-width: 475px) {
  button.menu-toggle {
    margin-top: 1.5rem;
    float: none;
  }
}

.handheld-navigation {
  margin-top: 5rem;
}

.handheld-navigation .dropdown-toggle {
  display: none; /* inline-block; */
  position: relative;
  padding: 0 0.75rem;
}

@media (max-width: 768px) {
  .main-navigation ul.menu > li.menu-item-has-children > a:after,
  .main-navigation ul.menu > li.page_item_has_children > a:after,
  .main-navigation ul.nav-menu > li.menu-item-has-children > a:after,
  .main-navigation ul.nav-menu > li.page_item_has_children > a:after {
    display: none;
  }

  .main-navigation ul li a,
  ul.menu li a {
    display: inline-block;
  }
}

body.guest-checkout {
  margin-top: 2rem;
}

body.guest-checkout .entry-header,
body.guest-checkout .site-header,
body.guest-checkout .storefront-handheld-footer-bar,
body.guest-checkout .woocommerce-billing-fields h3,
body.guest-checkout form.woocommerce-checkout > h3,
body.guest-checkout form.woocommerce-checkout .woocommerce-checkout-review-order-table {
  display: none;
}

body.guest-checkout form.woocommerce-checkout {
  text-align: center;
}

body.guest-checkout form.woocommerce-checkout:before {
  border-top: 1px dashed var(--granite);
  content: '';
  height: 1px;
  margin: auto;
  padding-top: 2.5rem;
  width: 75%;
}

body.guest-checkout form.woocommerce-checkout > div {
  float: none !important;
  margin: 0 auto !important;
  max-width: 60%;
  text-align: left;
  width: auto !important;
}

body.guest-checkout #payment .place-order {
  background: none;
  margin-top: 0;
  text-align: center;
}

body.guest-checkout #payment .place-order .button {
  margin: auto;
  width: auto;
}

@media (max-width: 768px) {
  body.guest-checkout form.woocommerce-checkout:before {
    width: 100%;
  }

  body.guest-checkout form.woocommerce-checkout > div {
    max-width: none;
  }

  body.guest-checkout .hentry .entry-content .wp-block-columns {
    display: block;
    margin-bottom: 0;
    padding: 0;
  }
  
  body.guest-checkout .hentry .entry-content .wp-block-image {
    text-align: center;
  }

  body.guest-checkout .hentry .entry-content  .wp-block-image img {
    margin: auto;
    max-width: 50%;
  }
}

@media (max-width: 400px) {
  body.guest-checkout .hentry .entry-content .wp-block-image img {
    display: block;
    max-width: none;
    width: 100%;
  }
}

/* Links */
/* .widget-area .widget a, .hentry .entry-header .posted-on a, .hentry .entry-header .post-author a, .hentry .entry-header .post-comments a, .hentry .entry-header .byline a {
  color: var(--primary);
} */

/* Widgets */
.widget {
  margin-bottom: 1.5rem;
}

/* Catalog */
ul.products li.product img, 
ul.products .wc-block-grid__product img, 
.wc-block-grid__products li.product img, 
.wc-block-grid__products .wc-block-grid__product img {
  height: 150px;
  object-fit: cover;
}

/* WooCommerce: Button */
/* .site-content .woocommerce-Button {
  background-color: var(--tertiary-red) !important;
} */

/* Stick Footer */
.site {
  display: grid;
  grid-template-rows: auto 1fr auto; /* Header, Main Content, Footer */
  min-height: 100dvh; /* Or 100vh for older browser support */
}

/* Checkout */
/* temp: needed for Gutenberg */
@media (min-width: 66.4989em) {
  .storefront-align-wide.page-template-template-fullwidth-php .hentry .entry-content .alignwide, .storefront-align-wide.storefront-full-width-content .hentry .entry-content .alignwide {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
}

/* Hero */
.hero {
  position: relative;
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(rgb(0, 48, 135, 1), rgb(0, 48, 135, 0.3));
  z-index: 0;
}

.hero-content {
  max-width: 823px;
  position: relative;
  z-index: 1;
}

.hero-content a,
.hero-content a:hover,
.hero-content h2 {
  color: white;
}

/* Banner - Environment */
.banner-environment {
  display: block;
  font-size: 0.85rem; 
  letter-spacing: 0.05rem;
  margin: -1.5rem auto 1.5rem;
  padding-bottom: 0.5rem; 
  padding-top: 0.5rem; 
  text-align: center;
}

/* Product Gallery */
.single-product div.product .woocommerce-product-gallery {
  margin-bottom: 1.5rem; // Add for mobile spacing
}

/* Featured: Carousel */
.wp-block-woocommerce-product-collection {
  background-color: var(--lavender);
  display: flex;
  flex-direction: column;
  /* gap: 1rem; */
  margin-bottom: 3rem;
  padding: 1rem;
}

.wp-block-woocommerce-product-collection > .wp-block-group > p {
  display: none;
}

.wc-block-next-previous-buttons {
  gap: 0;
}

.wc-block-next-previous-buttons br {
  display: none;
}

ul.wc-block-product-template {
  align-items: stretch;
  gap: 1rem;
  margin: 1rem 0 0;
}

ul.wc-block-product-template li.product {
  background-color: white;
  padding: 0.75rem;
}

ul.wc-block-product-template li.product .wp-block-post-title {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.214;
  margin: 1.5rem 0 1rem;
}

.wc-block-next-previous-buttons button {
  background-color: white;
  outline-color: white;
  padding: inherit;
}

.wc-block-next-previous-buttons button svg {
  padding: inherit;
}

ul.wc-block-product-template li.product .wp-block-post-title a,
.wc-block-next-previous-buttons__icon,
.wc-block-next-next-buttons__icon {
  border: 0;
  color: var(--primary-dark);
}

ul.wc-block-product-template li.product .wp-block-post-title a:hover,
.wc-block-next-previous-buttons__icon:hover,
.wc-block-next-next-buttons__icon:hover {
  color: var(--primary);
}
