/*
Theme Name: Storefront Whyachi
Theme URI: https://whyachi.com
Description: Team Whyachi brand skin for the WooCommerce store — matched to whyachi.com (red/charcoal, Oswald/Inter, logo, dark footer).
Author: Team Whyachi
Template: storefront
Version: 1.0.0
*/

:root{
  --tw-red: oklch(0.45 0.22 25);
  --tw-red-bright: oklch(0.55 0.24 25);
  --tw-ink: oklch(0.20 0 0);
  --tw-steel: oklch(0.55 0.01 260);
  --tw-paper: oklch(0.97 0.002 260);
  --tw-mist: oklch(0.95 0.004 260);
  --tw-arena: oklch(0.16 0.01 260);
}

/* ---- Typography (match whyachi.com) ---- */
body, button, input, select, textarea, .widget {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--tw-ink);
}
h1, h2, h3, h4, h5, h6,
.site-title, .page-title, .entry-title, .product_title,
.widget-title, .section-title, .price {
  font-family: "Oswald", system-ui, sans-serif;
  letter-spacing: .01em;
}
body { background: var(--tw-paper); }

/* ---- Header ---- */
.site-header {
  background-color: var(--tw-paper) !important;
  border-bottom: 1px solid rgba(0,0,0,.1);
}
.site-header, .site-header a,
.main-navigation ul li a, .site-branding .site-title a {
  color: var(--tw-ink) !important;
}
.main-navigation ul li a:hover, .site-header a:hover { color: var(--tw-red) !important; }
.custom-logo { max-height: 52px; width: auto; }
.site-branding { display: flex; align-items: center; }

/* ---- Links & accents ---- */
a { color: var(--tw-red); }
a:hover { color: var(--tw-red-bright); }

/* ---- Buttons (brand red, Oswald) ---- */
button, input[type="button"], input[type="reset"], input[type="submit"],
.button, .added_to_cart,
.woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce a.button.alt, .woocommerce button.button.alt,
.woocommerce #respond input#submit.alt, .woocommerce input.button.alt {
  background-color: var(--tw-red) !important;
  color: #fff !important;
  border-radius: 2px;
  font-family: "Oswald", sans-serif;
  letter-spacing: .03em;
  text-transform: uppercase;
}
button:hover, .button:hover, .added_to_cart:hover,
.woocommerce #respond input#submit:hover, .woocommerce a.button:hover,
.woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background-color: var(--tw-red-bright) !important;
  color: #fff !important;
}

/* ---- Prices / sale badge ---- */
.price, .woocommerce-Price-amount,
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--tw-ink); }
.onsale, span.onsale {
  background-color: var(--tw-red) !important;
  color: #fff !important;
  border-radius: 2px;
}

/* ---- Footer (dark, like whyachi.com) ---- */
.site-footer {
  background-color: var(--tw-arena) !important;
  color: rgba(255,255,255,.8) !important;
}
.site-footer a { color: rgba(255,255,255,.85) !important; }
.site-footer a:hover { color: #fff !important; }
.site-footer h1, .site-footer h2, .site-footer h3,
.site-footer .widget-title { color: #fff !important; }

/* ---- Brand bar (links back to whyachi.com) ---- */
.tw-brandbar { background: var(--tw-arena); color: #fff; font-family: "Oswald", sans-serif; }
.tw-brandbar .tw-inner {
  max-width: 1200px; margin: 0 auto; padding: 9px 20px;
  display: flex; gap: 22px; align-items: center; flex-wrap: wrap;
  font-size: 13px; letter-spacing: .04em;
}
.tw-brandbar a { color: rgba(255,255,255,.85); text-decoration: none; }
.tw-brandbar a:hover { color: #fff; }
.tw-brandbar a.tw-home { color: #fff; font-weight: 600; }