/*
Theme Name: Big Store Child
Theme URI:
Description: Custom child theme for Big Store, styled for a general-purpose WooCommerce storefront. Retheme the whole site by editing the design tokens at the top of this file.
Author:
Author URI:
Template: big-store
Version: 1.0.0
Text Domain: big-store-child
*/

/* ==========================================================================
   1. DESIGN TOKENS — edit these to retheme colors, fonts, and shapes
   ========================================================================== */

:root {
  /* Colors */
  --bs-bg: #f5f6f3;            /* page background */
  --bs-surface: #ffffff;       /* cards, header */
  --bs-surface-alt: #ecede9;   /* subtle panels (order review, totals) */
  --bs-border: #dcded6;
  --bs-text: #23241f;
  --bs-text-muted: #666a5c;
  --bs-primary: #1b5e56;       /* main brand color: links, buttons, prices */
  --bs-primary-dark: #123f3a;  /* hover state for primary */
  --bs-primary-light: #e3ede9;
  --bs-accent: #c98a1f;        /* sale badges, ratings, "place order" button */
  --bs-accent-dark: #97690f;
  --bs-error: #a83a2c;
  --bs-on-primary: #ffffff;

  /* Type */
  --bs-font-heading: 'Fraunces', Georgia, 'Times New Roman', serif;
  --bs-font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Shape & elevation */
  --bs-radius-sm: 4px;
  --bs-radius-md: 8px;
  --bs-radius-lg: 16px;
  --bs-shadow: 0 2px 12px rgba(35, 36, 31, 0.07);
  --bs-shadow-hover: 0 10px 28px rgba(35, 36, 31, 0.14);
  --bs-transition: 180ms ease;
}

/* ==========================================================================
   2. BASE & TYPOGRAPHY
   ========================================================================== */

body {
  background-color: var(--bs-bg);
  color: var(--bs-text);
  font-family: var(--bs-font-body);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6,
.woocommerce-loop-product__title,
.product_title,
.site-title {
  font-family: var(--bs-font-heading);
  font-weight: 600;
  color: var(--bs-text);
  line-height: 1.25;
}

a {
  color: var(--bs-primary);
  transition: color var(--bs-transition);
}

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

/* Visible keyboard focus everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* ==========================================================================
   3. BUTTONS (site-wide + WooCommerce)
   ========================================================================== */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
button.button.alt,
.wp-block-button__link {
  background-color: var(--bs-primary);
  color: var(--bs-on-primary);
  border: none;
  border-radius: var(--bs-radius-sm);
  padding: 0.75em 1.6em;
  font-family: var(--bs-font-body);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background-color var(--bs-transition), transform var(--bs-transition);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
button.button.alt:hover {
  background-color: var(--bs-primary-dark);
  color: var(--bs-on-primary);
  transform: translateY(-1px);
}

/* "Place order" and other high-emphasis actions use the accent color */
.woocommerce a.button.alt,
.woocommerce #place_order {
  background-color: var(--bs-accent);
  color: #201a08;
}

.woocommerce a.button.alt:hover,
.woocommerce #place_order:hover {
  background-color: var(--bs-accent-dark);
  color: #ffffff;
}

/* ==========================================================================
   4. HEADER & NAVIGATION
   These selectors follow common WordPress theme conventions. If your
   header uses different class names, share a screenshot or your site
   URL and this section can be corrected precisely — see the README.
   ========================================================================== */

.site-header,
#masthead {
  background-color: var(--bs-surface);
  border-bottom: 1px solid var(--bs-border);
}

.site-branding .site-title,
.site-branding .site-title a {
  font-family: var(--bs-font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--bs-text);
}

.main-navigation a,
#site-navigation a {
  font-family: var(--bs-font-body);
  font-weight: 500;
  color: var(--bs-text);
}

.main-navigation a:hover,
#site-navigation a:hover,
.main-navigation .current-menu-item > a {
  color: var(--bs-primary);
}

/* Mini-cart dropdown (WooCommerce core markup, theme-independent) */
.widget_shopping_cart .woocommerce-mini-cart-item a,
.widget_shopping_cart_content .cart_list li a {
  color: var(--bs-text);
}

.woocommerce-mini-cart__total .amount,
.widget_shopping_cart .total .amount {
  color: var(--bs-primary);
  font-weight: 600;
}

/* ==========================================================================
   5. SHOP PAGE — product grid
   ========================================================================== */

ul.products li.product {
  background-color: var(--bs-surface);
  border-radius: var(--bs-radius-md);
  padding: 1rem 1rem 1.4rem;
  box-shadow: var(--bs-shadow);
  transition: box-shadow var(--bs-transition), transform var(--bs-transition);
}

ul.products li.product:hover {
  box-shadow: var(--bs-shadow-hover);
  transform: translateY(-3px);
}

ul.products li.product img {
  border-radius: var(--bs-radius-sm);
}

ul.products li.product .woocommerce-loop-product__title {
  font-size: 1.05rem;
  margin: 0.9rem 0 0.3rem;
}

ul.products li.product .price {
  font-family: var(--bs-font-body);
  font-weight: 600;
  color: var(--bs-text);
}

ul.products li.product .price ins {
  color: var(--bs-primary);
  text-decoration: none;
}

ul.products li.product .price del {
  color: var(--bs-text-muted);
  opacity: 0.7;
}

.onsale {
  background-color: var(--bs-accent) !important;
  color: #201a08 !important;
  font-family: var(--bs-font-body);
  font-weight: 700;
  border-radius: var(--bs-radius-sm) !important;
}

.star-rating span::before {
  color: var(--bs-accent);
}

/* ==========================================================================
   6. SINGLE PRODUCT PAGE
   ========================================================================== */

.woocommerce div.product .product_title {
  font-size: 2rem;
  margin-bottom: 0.4rem;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--bs-primary);
  font-size: 1.4rem;
  font-weight: 600;
}

.woocommerce div.product .woocommerce-product-gallery {
  border-radius: var(--bs-radius-md);
  overflow: hidden;
}

.woocommerce div.product form.cart .button {
  padding: 0.9em 2.2em;
  font-size: 1rem;
}

.woocommerce div.product .quantity input.qty {
  border: 1px solid var(--bs-border);
  border-radius: var(--bs-radius-sm);
  font-family: var(--bs-font-body);
}

.woocommerce-tabs ul.tabs li {
  font-family: var(--bs-font-heading);
}

.woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs li a:hover {
  color: var(--bs-primary);
}

/* ==========================================================================
   7. CART, CHECKOUT & ACCOUNT PAGES
   ========================================================================== */

table.cart td.product-name a,
table.shop_table td.product-name a {
  color: var(--bs-text);
  font-weight: 500;
}

.cart-collaterals .cart_totals,
#order_review,
.woocommerce-checkout-review-order-table {
  background-color: var(--bs-surface-alt);
  border-radius: var(--bs-radius-md);
  padding: 1.4rem;
}

.cart_totals .order-total .amount,
.woocommerce-checkout-review-order-table .order-total .amount {
  color: var(--bs-primary);
  font-size: 1.2rem;
  font-weight: 700;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea,
.select2-container .select2-selection--single {
  border: 1px solid var(--bs-border);
  border-radius: var(--bs-radius-sm);
  font-family: var(--bs-font-body);
}

.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--bs-primary);
}

.woocommerce-message::before,
.woocommerce-info::before {
  color: var(--bs-primary);
}

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

.woocommerce-MyAccount-navigation ul li a {
  font-family: var(--bs-font-body);
  color: var(--bs-text);
}

.woocommerce-MyAccount-navigation ul li.is-active a {
  color: var(--bs-primary);
  font-weight: 600;
}

/* ==========================================================================
   8. FOOTER
   ========================================================================== */

.site-footer,
#colophon {
  background-color: var(--bs-text);
  color: var(--bs-surface);
}

.site-footer a,
#colophon a {
  color: var(--bs-surface);
  opacity: 0.85;
}

.site-footer a:hover,
#colophon a:hover {
  opacity: 1;
  color: var(--bs-accent);
}

.site-footer .widget-title,
#colophon .widget-title {
  font-family: var(--bs-font-heading);
  color: var(--bs-surface);
}

/* ==========================================================================
   9. RESPONSIVE
   ========================================================================== */

@media (max-width: 782px) {
  .woocommerce div.product .product_title {
    font-size: 1.5rem;
  }

  ul.products li.product {
    padding: 0.75rem 0.75rem 1rem;
  }
}