/*
Theme Name: Skytech
Theme URI: https://skytechhcm.com
Description: Skytech child theme based on Storefront
Author: Skytech
Author URI: https://skytechhcm.com
Template: storefront
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: skytech
*/

/* ── Override Storefront's Source Sans Pro with Inter ── */
body,
button,
input,
select,
textarea {
  font-family: 'Inter', 'system-ui', sans-serif !important;
}

/* ── Remove Storefront's purple focus outline/bg on all links & buttons ── */
a:focus,
a:active,
button:focus,
button:active {
  outline: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

form {
    margin-bottom: 0 !important;
}

/* ── WooCommerce single product: override Storefront dark-grey button ── */
.single-product .single_add_to_cart_button,
.single-product .single_add_to_cart_button:hover {
  background-color: #FF6600 !important;
  border-color: #FF6600 !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  padding: 12px 24px !important;
  font-size: 15px !important;
}
.single-product .single_add_to_cart_button:hover {
  background-color: #e05500 !important;
  border-color: #e05500 !important;
}
/* Quantity box on single product */
.single-product .quantity input.qty {
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  text-align: center !important;
  font-weight: 600 !important;
}
/* Remove Storefront's default WC product margin */
.single-product div.product {
  margin-bottom: 0 !important;
}

/* ── Reset Storefront layout constraints ── */

/* 1. Make the header stretch full width */
#masthead,
#masthead .col-full {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* 2. Remove Storefront's dark background, padding, and margin from site-header */
.site-header {
  margin-bottom: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border-bottom: none !important;
}

/* 3. Make the outer content wrapper full width
      but let #content > .col-full keep its own layout (WC grid lives there) */
#content {
  max-width: 100% !important;
  padding: 0 !important;
}

/* 4. .col-full inside #content: cap at 1200px centred with padding
      This is where the shop grid, sidebar, and single product live */
#content .col-full {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  box-sizing: border-box !important;
}

/* ── Fix Storefront overriding our archive page form inputs & buttons ── */

/* Storefront sets input bg to #f2f2f2 and adds inset box-shadow — reset inside our archive */
.st-product-card,
main.max-w-container input[type=text],
main.max-w-container input[type=number],
main.max-w-container input[type=email],
main.max-w-container input[type=search],
main.max-w-container select {
  box-shadow: none !important;
}

main.max-w-container input[type=number] {
  background-color: #fff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: none !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
}

main.max-w-container select {
  background-color: #fff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: none !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
}

/* Storefront sets all buttons to dark grey — override our orange btn-buy */
.btn-buy,
.btn-buy:hover {
  background-color: #FF6600 !important;
  color: #fff !important;
  border-color: #FF6600 !important;
  text-shadow: none !important;
}
.btn-buy:hover {
  background-color: #e05500 !important;
  border-color: #e05500 !important;
}

/* Storefront adds margin-bottom:1.618em to all <form> — kill it in archive sidebar */
main.max-w-\[1200px\] form {
  margin-bottom: 0 !important;
}

/* 5. Footer: full width outer, 1200px inner */
#colophon {
  max-width: 100% !important;
  padding: 0 !important;
}
#colophon .col-full {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
}