/*
Theme Name: Computer & Electronic Parts Friendly
Theme URI: https://computerandelectronicparts.com
Description: A warmer, friendlier reskin of Storefront for Computer & Electronic Parts. Same layout and WooCommerce functionality as Storefront, just a softer, more approachable look — rounded cards and buttons, warm accent colors, and a friendlier heading font. Built as a child theme so all Storefront/WooCommerce updates keep working normally.
Author: Vital
Template: storefront
Version: 1.0.0
Text Domain: cep-friendly
*/

/* =========================================================
   1. Design tokens
   ========================================================= */
:root {
  --cep-accent: #EF7D3B;         /* warm orange — primary CTA */
  --cep-accent-dark: #D9672A;    /* hover/active state */
  --cep-accent-light: #FDEEE3;   /* tints, badges, highlight backgrounds */
  --cep-teal: #2F9E8F;           /* secondary accent */
  --cep-teal-dark: #257F73;
  --cep-sale: #E8573F;           /* sale badge */
  --cep-bg: #FFFBF6;             /* warm off-white page background */
  --cep-surface: #FFFFFF;        /* card / header background */
  --cep-text: #2E2A26;           /* warm dark gray, not pure black */
  --cep-text-muted: #6B625A;
  --cep-border: #F0E4D8;
  --cep-radius-lg: 16px;
  --cep-radius-md: 10px;
  --cep-radius-sm: 6px;
  --cep-shadow: 0 2px 10px rgba(46, 42, 38, 0.06);
  --cep-shadow-hover: 0 8px 24px rgba(46, 42, 38, 0.12);
  --cep-font-heading: 'Nunito', 'Source Sans Pro', sans-serif;
  --cep-font-body: 'Nunito', 'Source Sans Pro', HelveticaNeue-Light, sans-serif;
}

/* =========================================================
   2. Base
   ========================================================= */
body {
  background-color: var(--cep-bg);
  color: var(--cep-text);
  font-family: var(--cep-font-body);
  font-size: 16px;
  line-height: 1.65;
}

h1, h2, h3, h4, h5, h6,
.site-title, .storefront-breadcrumb, .widget-title,
.woocommerce-Tabs-panel h2 {
  font-family: var(--cep-font-heading);
  font-weight: 700;
  color: var(--cep-text);
  letter-spacing: -0.01em;
}

a {
  color: var(--cep-teal-dark);
  transition: color 0.15s ease;
}
a:hover { color: var(--cep-accent); }

::selection { background: var(--cep-accent-light); color: var(--cep-text); }

/* =========================================================
   3. Header
   ========================================================= */
.site-header {
  background-color: var(--cep-surface);
  border-bottom: 3px solid var(--cep-accent-light);
  box-shadow: var(--cep-shadow);
}

.site-header .site-branding { padding-top: 0.5em; padding-bottom: 0.5em; }

.site-title a, .site-title a:hover {
  font-family: var(--cep-font-heading);
  font-weight: 800;
  color: var(--cep-text);
}

.site-description { color: var(--cep-text-muted); }

/* Primary nav */
.main-navigation ul.menu > li > a,
.main-navigation ul.nav-menu > li > a {
  font-weight: 600;
  border-radius: var(--cep-radius-sm);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.main-navigation ul.menu > li > a:hover,
.main-navigation ul.nav-menu > li > a:hover {
  background-color: var(--cep-accent-light);
  color: var(--cep-accent-dark);
}
.main-navigation ul.sub-menu,
.main-navigation ul.children {
  background-color: var(--cep-surface);
  border: 1px solid var(--cep-border);
  border-radius: var(--cep-radius-md);
  box-shadow: var(--cep-shadow-hover);
  overflow: hidden;
}

/* Search + cart in header */
.site-search input[type="search"],
.site-header input[type="search"] {
  border-radius: var(--cep-radius-md);
  border: 1px solid var(--cep-border);
}
.site-header-cart .cart-contents {
  border-radius: 999px;
  background-color: var(--cep-accent-light);
  color: var(--cep-accent-dark);
  font-weight: 700;
  padding: 0.3em 0.9em;
}
.site-header-cart .cart-contents:hover {
  background-color: var(--cep-accent);
  color: #fff;
}

/* =========================================================
   4. Buttons everywhere (WooCommerce + theme)
   ========================================================= */
.button, button, input[type="submit"], input[type="button"],
.woocommerce a.button, .woocommerce button.button,
.woocommerce #respond input#submit,
.wc-forward, .checkout-button, .single_add_to_cart_button,
.add_to_cart_button {
  background-color: var(--cep-accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--cep-radius-md) !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  padding: 0.75em 1.5em !important;
  box-shadow: var(--cep-shadow);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.15s ease;
}
.button:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce #respond input#submit:hover,
.wc-forward:hover, .checkout-button:hover, .single_add_to_cart_button:hover,
.add_to_cart_button:hover {
  background-color: var(--cep-accent-dark) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: var(--cep-shadow-hover);
}

.woocommerce a.added_to_cart {
  border-radius: var(--cep-radius-md) !important;
  font-weight: 700 !important;
  color: var(--cep-teal-dark) !important;
}

/* =========================================================
   5. Product cards / archive grid
   ========================================================= */
ul.products li.product,
.storefront-product-section ul.products li.product {
  background-color: var(--cep-surface);
  border-radius: var(--cep-radius-lg);
  padding: 1em 1em 1.3em;
  box-shadow: var(--cep-shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: var(--cep-shadow-hover);
}
ul.products li.product img {
  border-radius: var(--cep-radius-md);
}
ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--cep-font-heading);
  font-weight: 700;
  color: var(--cep-text);
}
ul.products li.product .price {
  color: var(--cep-teal-dark);
  font-weight: 700;
}
ul.products li.product .price del {
  color: var(--cep-text-muted);
  opacity: 0.7;
}
ul.products li.product .price ins {
  color: var(--cep-sale);
  text-decoration: none;
}

.onsale {
  background-color: var(--cep-sale) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  font-family: var(--cep-font-heading);
  font-size: 0.8em !important;
  line-height: 1;
  padding: 0.6em 0.9em !important;
  top: 0.75em !important;
  left: 0.75em !important;
  box-shadow: var(--cep-shadow);
}

/* =========================================================
   6. Single product page
   ========================================================= */
.single-product div.product .woocommerce-tabs,
.single-product div.product .summary {
  font-family: var(--cep-font-body);
}
.single-product div.product p.price,
.single-product div.product span.price {
  color: var(--cep-teal-dark);
  font-weight: 800;
  font-size: 1.4em;
}
.single-product div.product p.price ins,
.single-product div.product span.price ins {
  color: var(--cep-sale);
  text-decoration: none;
}
.woocommerce-product-gallery {
  border-radius: var(--cep-radius-lg);
  overflow: hidden;
}
.woocommerce-tabs ul.tabs li {
  border-radius: var(--cep-radius-md) var(--cep-radius-md) 0 0 !important;
}
.woocommerce-tabs ul.tabs li.active {
  background-color: var(--cep-accent-light) !important;
}

.featured-flag, .storefront-sale-flash {
  border-radius: 999px;
}

/* =========================================================
   7. Cards, widgets, forms
   ========================================================= */
.widget {
  background-color: var(--cep-surface);
  border-radius: var(--cep-radius-lg);
  padding: 1.4em;
  box-shadow: var(--cep-shadow);
}
.widget-title {
  border-bottom: 2px solid var(--cep-accent-light);
  padding-bottom: 0.4em;
  margin-bottom: 0.8em;
}

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="password"], input[type="number"], input[type="search"], textarea, select {
  border: 1px solid var(--cep-border) !important;
  border-radius: var(--cep-radius-sm) !important;
  padding: 0.6em 0.8em !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--cep-accent) !important;
  box-shadow: 0 0 0 3px var(--cep-accent-light) !important;
  outline: none !important;
}

.woocommerce .star-rating span:before,
.star-rating span::before {
  color: #F0A93A;
}

/* =========================================================
   8. Footer
   ========================================================= */
.site-footer {
  background-color: #FFF3E9;
  color: var(--cep-text);
  border-top: 3px solid var(--cep-accent-light);
}
.site-footer a { color: var(--cep-teal-dark); }
.site-footer a:hover { color: var(--cep-accent-dark); }
.site-footer .widget-title { border-bottom-color: rgba(239, 125, 59, 0.25); }

/* =========================================================
   9. Misc friendly touches
   ========================================================= */
.woocommerce-message, .woocommerce-info {
  border-top-color: var(--cep-teal) !important;
  border-radius: var(--cep-radius-md);
}
.woocommerce-error { border-top-color: var(--cep-sale) !important; border-radius: var(--cep-radius-md); }

img { border-radius: var(--cep-radius-sm); }
.site-header img.custom-logo, .site-branding img { border-radius: 0; }

::-webkit-scrollbar { height: 10px; width: 10px; }
::-webkit-scrollbar-thumb { background: var(--cep-accent-light); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--cep-accent); }