/*
Theme Name:   Tech Retailer USA Shop
Theme URI:    https://techretailerusa.com
Description:  Storefront child theme for Tech Retailer USA. Uses the same header, footer and styling as the main website so the shop and the site look like one place. Tech Retailer USA is a brand of Kleindesign LLC.
Author:       Kleindesign LLC
Author URI:   https://techretailerusa.com
Template:     storefront
Version:      1.0
Text Domain:  techretailerusa
*/

/* Styling lives in the main website stylesheet, which functions.php loads.
   Anything written below only applies to the shop. */

/* Give WooCommerce content the same width as the main site */
.col-full{max-width:1240px;padding-left:22px;padding-right:22px}

/* Space between the header and the shop content */
#content.site-content{padding-top:38px;padding-bottom:60px}

/* Storefront page title in the site heading style */
.woocommerce-products-header__title,
.entry-title,
.product_title{
  font-family:"Barlow",sans-serif;
  color:var(--ink);
  letter-spacing:-.015em;
}

/* Small number badge on the cart icon */
.cart-link{position:relative}
.cart-count{
  position:absolute;top:-6px;right:-8px;min-width:19px;height:19px;
  background:var(--blue);color:#fff;border-radius:999px;
  font-family:"Barlow",sans-serif;font-weight:700;font-size:.72rem;
  display:grid;place-items:center;padding:0 5px;line-height:1;
}

/* Storefront puts its own header markup on some pages, keep it hidden */
header#masthead.site-header{display:none}

/* Sidebar widgets in the site card style */
.widget{
  background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:22px;margin-bottom:22px;
}
.widget .widget-title{font-size:1.1rem;margin-bottom:14px}

/* Search box above the product grid */
.tru-shop-search{
  background:var(--cloud);border:1px solid var(--line);border-radius:12px;
  padding:22px 24px;margin-bottom:30px;
}
.tru-shop-search__title{
  font-family:"Barlow",sans-serif;font-size:1.15rem;color:var(--ink);
  margin:0 0 12px;font-weight:700;
}
.tru-shop-search .woocommerce-product-search{display:flex;gap:10px;flex-wrap:wrap}
.tru-shop-search .search-field{
  flex:1 1 260px;padding:13px 15px;border:1.5px solid var(--line);
  border-radius:6px;font-size:1rem;background:#fff;
}
.tru-shop-search .search-field:focus{
  border-color:var(--blue);box-shadow:0 0 0 4px rgba(22,104,227,.12);outline:none;
}
.tru-shop-search button[type="submit"]{
  background:var(--blue);color:#fff;border:none;border-radius:6px;
  font-family:"Barlow",sans-serif;font-weight:600;padding:13px 26px;cursor:pointer;
  box-shadow:0 10px 24px rgba(22,104,227,.26);transition:background .2s,transform .2s;
}
.tru-shop-search button[type="submit"]:hover{background:var(--blue-dark);transform:translateY(-2px)}


/* ==========================================================================
   WooCommerce component styling, merged in so it survives theme changes
   ========================================================================== */
/* ==========================================================================
   Tech Retailer USA  |  Storefront brand overrides
   Paste this into: Appearance > Customize > Additional CSS
   ========================================================================== */


:root{
  --tru-ink:#071528;
  --tru-ink2:#0E2440;
  --tru-blue:#1668E3;
  --tru-blue-dark:#0B4CAE;
  --tru-cyan:#24C8F0;
  --tru-cloud:#F4F7FB;
  --tru-line:#DCE5F0;
  --tru-slate:#4C5F77;
  --tru-soft:#7386A0;
}

/* ---------- Base ---------- */
body,
button, input, select, textarea,
.widget, .site-footer{
  font-family:"IBM Plex Sans", Segoe UI, Helvetica, Arial, sans-serif;
  color:var(--tru-slate);
  font-size:16px;
  line-height:1.7;
}
h1,h2,h3,h4,h5,
.site-title, .page-title, .product_title,
.woocommerce-loop-product__title,
.widget-title, .wc-block-components-title{
  font-family:"Barlow", Segoe UI, Helvetica, Arial, sans-serif !important;
  color:var(--tru-ink) !important;
  font-weight:700 !important;
  letter-spacing:-.015em;
  line-height:1.18;
}
a{color:var(--tru-blue)}
a:hover{color:var(--tru-blue-dark)}

/* ---------- Header ---------- */
.site-header{
  background:#fff !important;
  border-bottom:1px solid var(--tru-line);
  padding-top:14px !important;
  padding-bottom:0 !important;
  box-shadow:0 1px 2px rgba(7,21,40,.05);
}
.site-branding{margin-bottom:10px}
.site-header .custom-logo-link img,
.site-header img.custom-logo{
  max-width:56px !important;
  width:56px !important;
  height:auto;
  border-radius:9px;
}
.site-header .site-branding{display:flex;align-items:center;gap:12px}
.site-title a{font-size:1.22rem !important;color:var(--tru-ink) !important;text-decoration:none}
.site-description{font-size:.74rem;color:var(--tru-soft);letter-spacing:.05em;margin:0}

/* Navigation */
.storefront-primary-navigation{background:transparent}
.main-navigation ul li a{
  font-family:"Barlow", sans-serif;
  font-weight:600;
  font-size:1.02rem;
  color:var(--tru-ink);
  padding:14px 14px;
  border-radius:6px;
  transition:background .2s, color .2s;
}
.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item a{
  color:var(--tru-blue);
  background:var(--tru-cloud);
}
.main-navigation ul.menu > li.menu-item-has-children > a::after{color:var(--tru-blue)}

/* Cart in header */
.site-header-cart .cart-contents{
  font-family:"Barlow", sans-serif;
  font-weight:600;
  color:var(--tru-ink);
  padding:12px 14px;
}
.site-header-cart .cart-contents:hover{color:var(--tru-blue);background:var(--tru-cloud);border-radius:6px}
.site-header-cart .widget_shopping_cart{border:1px solid var(--tru-line);box-shadow:0 18px 45px rgba(7,21,40,.12)}

/* ---------- Buttons ---------- */
button, input[type="button"], input[type="submit"],
.button, .added_to_cart,
.woocommerce #respond input#submit,
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button,
.wc-block-components-button{
  background-color:var(--tru-blue) !important;
  color:#fff !important;
  font-family:"Barlow", sans-serif !important;
  font-weight:600 !important;
  font-size:1rem !important;
  border:none !important;
  border-radius:6px !important;
  padding:13px 24px !important;
  text-shadow:none !important;
  box-shadow:0 10px 24px rgba(22,104,227,.26);
  transition:transform .22s cubic-bezier(.22,.8,.28,1), background .22s;
}
button:hover, .button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce input.button:hover,
.wc-block-components-button:hover{
  background-color:var(--tru-blue-dark) !important;
  color:#fff !important;
  transform:translateY(-2px);
}
.woocommerce a.button.alt, .woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt{
  background-color:var(--tru-blue) !important;
}
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover{
  background-color:var(--tru-blue-dark) !important;
}

/* ---------- Product grid ---------- */
.woocommerce ul.products li.product{
  background:#fff;
  border:1px solid var(--tru-line);
  border-radius:12px;
  padding:18px 18px 22px;
  box-shadow:0 1px 2px rgba(7,21,40,.06), 0 4px 14px rgba(7,21,40,.05);
  transition:transform .3s cubic-bezier(.22,.8,.28,1), box-shadow .3s, border-color .3s;
  text-align:left;
}
.woocommerce ul.products li.product:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 45px rgba(7,21,40,.12);
  border-color:#BBD2F1;
}
.woocommerce ul.products li.product img{
  border-radius:8px;
  margin-bottom:14px;
  background:var(--tru-cloud);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size:1.05rem !important;
  padding-bottom:6px !important;
}
.woocommerce ul.products li.product .price{
  color:var(--tru-ink) !important;
  font-family:"Barlow", sans-serif;
  font-weight:700;
  font-size:1.2rem;
}
.woocommerce ul.products li.product .price del{color:var(--tru-soft);font-weight:400;font-size:.95rem}
.woocommerce ul.products li.product .price ins{text-decoration:none;color:var(--tru-blue) !important}
.woocommerce ul.products li.product .button{
  width:100%;
  text-align:center;
  margin-top:12px;
}
.woocommerce span.onsale{
  background:var(--tru-cyan) !important;
  color:var(--tru-ink) !important;
  font-family:"Barlow", sans-serif;
  font-weight:700;
  border-radius:6px;
  padding:6px 12px;
  min-height:auto;
  line-height:1.3;
}

/* ---------- Single product ---------- */
.single-product div.product .price{
  color:var(--tru-ink) !important;
  font-family:"Barlow", sans-serif;
  font-weight:700;
  font-size:2rem;
}
.single-product div.product .product_title{font-size:2.1rem !important}
.woocommerce-tabs ul.tabs li.active a{color:var(--tru-blue) !important}
.woocommerce-tabs ul.tabs li a{font-family:"Barlow", sans-serif;font-weight:600}
.woocommerce div.product form.cart .button{padding:14px 30px !important}

/* ---------- Notices ---------- */
.woocommerce-message, .woocommerce-info{
  background:var(--tru-cloud) !important;
  border-top-color:var(--tru-blue) !important;
  color:var(--tru-ink) !important;
}
.woocommerce-message::before, .woocommerce-info::before{color:var(--tru-blue) !important}
.woocommerce-error{border-top-color:#D6453B !important}

/* ---------- Breadcrumb and page titles ---------- */
.woocommerce-breadcrumb{color:var(--tru-soft);font-size:.92rem}
.woocommerce-breadcrumb a{color:var(--tru-soft)}
.woocommerce-breadcrumb a:hover{color:var(--tru-blue)}
.storefront-breadcrumb{background:var(--tru-cloud);padding:14px 0;margin-bottom:0}

/* ---------- Forms, including my account ---------- */
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], input[type="search"],
select, textarea, .select2-container .select2-selection{
  border:1.5px solid var(--tru-line) !important;
  border-radius:6px !important;
  padding:12px 14px !important;
  background:#fff !important;
  color:var(--tru-ink) !important;
  box-shadow:none !important;
}
input:focus, select:focus, textarea:focus{
  border-color:var(--tru-blue) !important;
  box-shadow:0 0 0 4px rgba(22,104,227,.12) !important;
  outline:none !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a{
  font-family:"Barlow", sans-serif;
  font-weight:600;
  color:var(--tru-ink);
  padding:11px 14px;
  display:block;
  border-radius:6px;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover{
  background:var(--tru-cloud);
  color:var(--tru-blue);
}
.woocommerce form.login, .woocommerce form.register,
.woocommerce-checkout #payment{
  border:1px solid var(--tru-line) !important;
  border-radius:16px !important;
  padding:28px !important;
  background:#fff !important;
  box-shadow:0 18px 45px rgba(7,21,40,.08);
}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--tru-ink) !important;
  color:#A9BCD4 !important;
  padding-top:54px;
  border:none;
}
.site-footer a{color:#A9BCD4 !important}
.site-footer a:hover{color:var(--tru-cyan) !important}
.site-footer h1,.site-footer h2,.site-footer h3,.site-footer h4,
.site-footer .widget-title{color:#fff !important}
.site-info{
  border-top:1px solid rgba(255,255,255,.10);
  padding-top:22px;
  font-size:.92rem;
  color:#8FA5C0;
}
.site-info a{color:#C4D3E6 !important}
.tru-footer-note{max-width:70ch;margin:0 auto;text-align:center;line-height:1.7}
.tru-footer-note strong{color:#C4D3E6;font-weight:600}

/* ---------- Misc tidy up ---------- */
.storefront-sorting, .woocommerce-result-count{font-size:.95rem}
.widget_price_filter .ui-slider .ui-slider-range,
.widget_price_filter .ui-slider .ui-slider-handle{background-color:var(--tru-blue)}
.onsale, .wc-block-grid__product-onsale{font-family:"Barlow", sans-serif}
#page .site-content{padding-top:20px}

/* ---------- Mobile ---------- */
@media (max-width:767px){
  .site-header .custom-logo-link img,
  .site-header img.custom-logo{max-width:46px !important;width:46px !important}
  .woocommerce ul.products li.product{padding:14px 14px 18px}
  .single-product div.product .product_title{font-size:1.6rem !important}
  .single-product div.product .price{font-size:1.5rem}
}

/* ---------- Header alignment fixes over Storefront ---------- */
.site-head .head-inner{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:20px;
}
.site-head .nav{
  display:flex !important;
  align-items:center !important;
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
}
.site-head .nav > li{margin:0 !important;float:none !important}
.site-head .nav > li > a{display:block !important;line-height:1.3 !important}
.site-head .head-actions{display:flex !important;align-items:center !important;gap:12px}
.site-head .logo{display:flex !important;align-items:center !important;gap:12px;text-decoration:none}
.site-head nav{display:flex;align-items:center}
.site-head .subnav{margin:0 !important;padding:10px !important}
.site-head .subnav li{margin:0 !important}

/* Storefront resets that fight the site header */
.site-head ul, .site-foot ul{list-style:none}
.site-head a:hover, .site-foot a:hover{text-decoration:none}
.topbar .wrap{align-items:center}