/* ==========================================================================
   Storefront Parent Theme Overrides
   Resets Storefront defaults to match the Phone Exchange React design.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Global Overrides
   -------------------------------------------------------------------------- */

/* Override Storefront's default body background and font */
body,
.site {
  background-color: var(--pe-background);
  color: var(--pe-foreground);
  font-family: "DM Sans", system-ui, -apple-system, sans-serif;
}

/* Override Storefront heading fonts */
.site h1, .site h2, .site h3, .site h4, .site h5, .site h6,
.entry-title,
.page-title,
.widget-title,
.woocommerce-loop-product__title {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  font-weight: 700;
  letter-spacing: -0.025em;
}

/* Override Storefront's container width */
.col-full {
  max-width: var(--pe-container-max);
  padding-left: var(--pe-container-padding);
  padding-right: var(--pe-container-padding);
}


/* --------------------------------------------------------------------------
   Header Overrides
   -------------------------------------------------------------------------- */
.site-header {
  background-color: var(--pe-header-bg);
  border-bottom: none;
  position: sticky;
  top: 0;
  z-index: 999;
  padding: 0 !important; /* Remove Storefront's default header padding */
  margin: 0 !important; /* Remove Storefront's default ~4.2em bottom margin */
}

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

/* Site branding / logo */
.site-branding {
  margin: 0;
}

.site-title a,
.site-description {
  color: var(--pe-primary-foreground);
}

/* Primary navigation in header */
.main-navigation {
  padding: 0;
}

.main-navigation ul li a {
  color: hsla(0, 0%, 100%, 0.85);
  font-family: "DM Sans", system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  padding: 1rem 0.75rem;
  transition: color var(--pe-transition-fast);
}

.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a {
  color: #fff;
}

/* Header cart icon */
.site-header-cart {
  margin-bottom: 0;
}

.site-header-cart .cart-contents {
  color: hsla(0, 0%, 100%, 0.85);
}

.site-header-cart .cart-contents:hover {
  color: #fff;
}


/* --------------------------------------------------------------------------
   Footer Overrides
   -------------------------------------------------------------------------- */
.site-footer {
  background-color: var(--pe-footer-bg);
  color: hsla(0, 0%, 100%, 0.7);
  border-top: none;
}

.site-footer h1, .site-footer h2, .site-footer h3,
.site-footer h4, .site-footer h5, .site-footer h6 {
  color: #fff;
}

.site-footer a {
  color: hsla(0, 0%, 100%, 0.7);
  transition: color var(--pe-transition-fast);
}

.site-footer a:hover {
  color: var(--pe-accent);
}

.site-info {
  border-top: 1px solid hsla(0, 0%, 100%, 0.1);
  color: hsla(0, 0%, 100%, 0.5);
}


/* --------------------------------------------------------------------------
   WooCommerce Product Card Overrides
   -------------------------------------------------------------------------- */
.woocommerce ul.products li.product {
  background-color: var(--pe-card);
  border-radius: var(--pe-radius);
  box-shadow: var(--pe-card-shadow);
  overflow: hidden;
  transition: box-shadow var(--pe-transition-base), transform var(--pe-transition-base);
  border: none;
  padding: 0;
}

.woocommerce ul.products li.product:hover {
  box-shadow: 0 4px 16px 0 hsla(0, 0%, 0%, 0.1);
  transform: translateY(-2px);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 0.9375rem;
  font-weight: 600;
  padding: 0.75rem 0.75rem 0.25rem;
  color: var(--pe-foreground);
}

.woocommerce ul.products li.product .price {
  color: var(--pe-foreground);
  font-weight: 700;
  font-size: 1.0625rem;
  padding: 0 0.75rem;
}

.woocommerce ul.products li.product .price del {
  color: var(--pe-muted-foreground);
  font-weight: 400;
  font-size: 0.875rem;
}

.woocommerce ul.products li.product .price ins {
  color: var(--pe-destructive);
  text-decoration: none;
  font-weight: 700;
}

.woocommerce ul.products li.product a img {
  margin: 0;
  border-radius: 0;
}

.woocommerce ul.products li.product .button {
  background-color: var(--pe-primary);
  color: var(--pe-primary-foreground);
  border-radius: 0 0 var(--pe-radius) var(--pe-radius);
  font-family: "DM Sans", system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.75rem 1rem;
  margin-top: 0.5rem;
  border: none;
  transition: background-color var(--pe-transition-fast);
}

.woocommerce ul.products li.product .button:hover {
  background-color: hsl(0, 0%, 20%);
}

/* Sale badge */
.woocommerce span.onsale {
  background-color: var(--pe-destructive);
  color: var(--pe-destructive-foreground);
  font-weight: 700;
  border-radius: var(--pe-radius-sm);
  padding: 0.25rem 0.5rem;
  min-width: auto;
  min-height: auto;
  line-height: 1.4;
  font-size: 0.75rem;
}


/* --------------------------------------------------------------------------
   WooCommerce Single Product Overrides
   -------------------------------------------------------------------------- */
.woocommerce div.product {
  font-family: "DM Sans", system-ui, sans-serif;
}

.woocommerce div.product .product_title {
  font-size: 1.75rem;
  color: var(--pe-foreground);
}

.woocommerce div.product p.price {
  color: var(--pe-foreground);
  font-size: 1.5rem;
  font-weight: 700;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--pe-foreground);
  font-weight: 600;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  color: var(--pe-muted-foreground);
  font-weight: 500;
}

/* Single product add to cart button */
.woocommerce div.product .single_add_to_cart_button {
  background-color: var(--pe-primary);
  color: var(--pe-primary-foreground);
  border-radius: var(--pe-radius-md);
  font-family: "DM Sans", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.875rem 2rem;
  border: none;
  transition: background-color var(--pe-transition-fast);
}

.woocommerce div.product .single_add_to_cart_button:hover {
  background-color: hsl(0, 0%, 20%);
}


/* --------------------------------------------------------------------------
   WooCommerce Cart & Checkout Overrides
   -------------------------------------------------------------------------- */
.woocommerce table.shop_table {
  border-radius: var(--pe-radius);
  border-color: var(--pe-border);
}

.woocommerce table.shop_table th {
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  font-weight: 600;
}

.woocommerce .checkout #payment {
  background-color: var(--pe-card);
  border-radius: var(--pe-radius);
  border-color: var(--pe-border);
}

.woocommerce #payment #place_order {
  background-color: var(--pe-accent);
  color: var(--pe-accent-foreground);
  border-radius: var(--pe-radius-md);
  font-family: "DM Sans", system-ui, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.875rem 2rem;
  border: none;
  transition: background-color var(--pe-transition-fast);
}

.woocommerce #payment #place_order:hover {
  background-color: hsl(190, 100%, 38%);
}


/* --------------------------------------------------------------------------
   WooCommerce Breadcrumbs
   -------------------------------------------------------------------------- */
.woocommerce-breadcrumb {
  font-size: 0.8125rem;
  color: var(--pe-muted-foreground);
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 0;
}

.woocommerce-breadcrumb a {
  color: var(--pe-muted-foreground);
  text-decoration: none;
  transition: color var(--pe-transition-fast);
}

.woocommerce-breadcrumb a:hover {
  color: var(--pe-accent);
}

/* Hide Storefront's Font Awesome home icons on breadcrumb links */
.woocommerce-breadcrumb a::before,
.woocommerce-breadcrumb a:first-of-type::before {
  display: none !important;
  content: none !important;
}


/* --------------------------------------------------------------------------
   WooCommerce Pagination
   -------------------------------------------------------------------------- */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  border-radius: var(--pe-radius-sm);
  border-color: var(--pe-border);
  color: var(--pe-foreground);
  font-weight: 500;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
  background-color: var(--pe-primary);
  color: var(--pe-primary-foreground);
  border-color: var(--pe-primary);
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
  background-color: var(--pe-secondary);
  color: var(--pe-foreground);
}


/* --------------------------------------------------------------------------
   WooCommerce Messages & Notices
   -------------------------------------------------------------------------- */
.woocommerce-message {
  border-top-color: var(--pe-accent);
}

.woocommerce-info {
  border-top-color: var(--pe-accent);
}

.woocommerce-error {
  border-top-color: var(--pe-destructive);
}


/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .col-full {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}