/*
Theme Name:   Gentle Way Child
Theme URI:    https://gentlewayjiujitsu.com
Description:  Gentle Way Jiu-Jitsu child theme for WooCommerce — built on Storefront
Author:       Gentle Way Jiu-Jitsu / Kinesthetic Chess LLC
Author URI:   https://gentlewayjiujitsu.com
Template:     storefront
Version:      3.0.0
License:      GNU General Public License v2 or later
Text Domain:  gentle-way-child
*/

/* ── GOOGLE FONTS ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&family=Jost:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=DM+Mono:wght@400;500&display=swap');

/* ── BRAND TOKENS ─────────────────────────────────────────────────────────── */
:root {
  --gw-forest:   #2F3A32;
  --gw-mint:     #A6E5CA;
  --gw-mint-dk:  #7ecfaf;   /* slightly deeper mint for borders/hovers      */
  --gw-peach:    #FDBA90;
  --gw-ivory:    #F4EFE9;
  --gw-charcoal: #2D2D2A;
  --gw-muted:    #8A8680;
  --gw-teal:     #1B6459;
  --gw-gold:     #B8963E;

  --ff-display:  'Cormorant Garamond', Georgia, serif;
  --ff-body:     'Jost', system-ui, sans-serif;
  --ff-mono:     'DM Mono', 'Courier New', monospace;
}

/* ── GLOBAL BASE ──────────────────────────────────────────────────────────── */
body, button, input, select, textarea {
  font-family: var(--ff-body);
  font-weight: 300;
  color: var(--gw-charcoal);
}

h1, h2, h3, h4, h5, h6,
.woocommerce-loop-product__title,
.product_title,
.entry-title,
.widget-title,
.page-title {
  font-family: var(--ff-display);
  font-weight: 600;
  line-height: 1.2;
  color: var(--gw-forest);
}

h1, .page-title, .product_title { font-weight: 400; letter-spacing: -0.01em; }

p, li, td, th, label { font-family: var(--ff-body); font-weight: 300; line-height: 1.75; }

.posted_in, .tagged_as, .sku_wrapper, .woocommerce-review-link,
.woocommerce-breadcrumb, .order-number, .order-date, .order-status,
.cart-subtotal th, .order-total th, .woocommerce-table thead th,
time, .comment-metadata {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── HIDE ORIGINAL STOREFRONT NAV ────────────────────────────────────────── */
#site-navigation,
.storefront-navigation,
.secondary-navigation,
.secondary-navigation-wrapper,
.storefront-handheld-footer-bar { display: none !important; }

/* ── SITE HEADER — mint, full-width ──────────────────────────────────────── */
.site-header {
  background: var(--gw-mint) !important;
  border-bottom: none !important;
  padding: 0 !important;
}

/* One-row header: brand left, search+nav right */
.gw-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 2rem;
}

/* Brand block */
.gw-brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}

.gw-brand-name {
  font-family: var(--ff-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--gw-forest);
  text-decoration: none;
  letter-spacing: 0.02em;
  line-height: 1;
  transition: color 0.2s;
}
.gw-brand-name:hover { color: var(--gw-teal); }

.gw-brand-sub {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(47,58,50,0.55);
}

/* Right cluster: search + nav links */
.gw-header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
  justify-content: flex-end;
}

/* Inline search */
.gw-search-form {
  display: flex;
  align-items: center;
  background: rgba(47,58,50,0.10);
  border: 1px solid rgba(47,58,50,0.20);
  border-radius: 3px;
  overflow: hidden;
  max-width: 220px;
  flex-shrink: 1;
}

.gw-search-input {
  border: none !important;
  background: transparent !important;
  padding: 0.4rem 0.75rem !important;
  font-family: var(--ff-body) !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  color: var(--gw-forest) !important;
  outline: none !important;
  min-width: 0;
  width: 100%;
  box-shadow: none !important;
}

.gw-search-input::placeholder { color: rgba(47,58,50,0.45); }

/* Nav links */
.gw-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.gw-nav-link {
  font-family: var(--ff-body);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(47,58,50,0.75);
  text-decoration: none;
  padding: 0.4rem 0.75rem;
  border-radius: 3px;
  transition: background 0.18s, color 0.18s;
  white-space: nowrap;
}
.gw-nav-link:hover { background: rgba(47,58,50,0.10); color: var(--gw-forest); }

.gw-nav-cart .gw-cart-count {
  display: inline-block;
  background: var(--gw-teal);
  color: var(--gw-ivory);
  font-size: 10px;
  font-weight: 500;
  padding: 0 5px;
  border-radius: 10px;
  margin-left: 2px;
  vertical-align: middle;
}

/* ── SHOP HERO ────────────────────────────────────────────────────────────── */
.gw-hero {
  background: var(--gw-forest);
  border-bottom: 3px solid var(--gw-mint);
  text-align: center;
  padding: 3.5rem 2rem 3rem;
}

.gw-hero-inner { max-width: 680px; margin: 0 auto; }

.gw-hero-eyebrow {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gw-mint);
  margin: 0 0 0.75rem;
}

.gw-hero-title {
  font-family: var(--ff-display);
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 400;
  color: var(--gw-ivory);
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 1rem;
}

.gw-hero-sub {
  font-family: var(--ff-body);
  font-size: 15px;
  font-weight: 300;
  color: rgba(244,239,233,0.70);
  margin: 0;
  line-height: 1.7;
}

/* ── CATEGORY STRIP ──────────────────────────────────────────────────────── */
.gw-cat-strip {
  background: var(--gw-ivory);
  border-bottom: 1px solid rgba(47,58,50,0.12);
}

.gw-cat-list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  gap: 0;
}

.gw-cat-item { display: block; }

.gw-cat-link {
  display: block;
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gw-muted);
  text-decoration: none;
  padding: 0.85rem 1.25rem;
  border-bottom: 2px solid transparent;
  transition: color 0.18s, border-color 0.18s;
  white-space: nowrap;
}

.gw-cat-link:hover { color: var(--gw-forest); border-bottom-color: var(--gw-mint-dk); }

.gw-cat-link.gw-cat-active {
  color: var(--gw-forest);
  border-bottom-color: var(--gw-teal);
  font-weight: 600;
}

/* ── HIDE WOOCOMMERCE's OWN "SHOP" H1 on shop page (we render it in hero) ── */
.woocommerce-products-header { display: none !important; }

/* ── CONTENT BACKGROUND ──────────────────────────────────────────────────── */
body,
.site-main, .content-area, #content, .site-content,
body.woocommerce, body.woocommerce-page {
  background-color: var(--gw-ivory) !important;
}

/* ── PRODUCT LOOP WRAPPER ────────────────────────────────────────────────── */
.woocommerce .woocommerce-products-header + * { margin-top: 0; }

.woocommerce-result-count,
.woocommerce-ordering select {
  font-family: var(--ff-body) !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  color: var(--gw-muted) !important;
}

/* ── PRODUCT CARDS ───────────────────────────────────────────────────────── */
.woocommerce ul.products li.product {
  background: white;
  border: 1px solid rgba(47,58,50,0.09);
  border-radius: 4px;
  overflow: hidden;
  transition: box-shadow 0.22s, transform 0.22s;
}

.woocommerce ul.products li.product:hover {
  box-shadow: 0 6px 28px rgba(47,58,50,0.13);
  transform: translateY(-3px);
}

/* Mint-tinted image zone */
.woocommerce ul.products li.product a.woocommerce-loop-product__link {
  background: linear-gradient(160deg, #e8f9f2 0%, #f4faf7 100%);
  display: block;
}

.woocommerce ul.products li.product a img,
.woocommerce ul.products li.product .attachment-woocommerce_thumbnail {
  display: block;
  transition: transform 0.3s ease;
}

.woocommerce ul.products li.product:hover a img {
  transform: scale(1.03);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--ff-display) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  color: var(--gw-forest) !important;
  padding: 0.85rem 1rem 0.2rem !important;
  line-height: 1.25 !important;
}

.woocommerce ul.products li.product .price,
.woocommerce .price {
  font-family: var(--ff-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--gw-teal) !important;
  padding: 0 1rem 0.1rem !important;
}

.woocommerce ul.products li.product .price del {
  color: var(--gw-muted) !important;
  font-size: 12px !important;
}

/* ── BUTTONS ─────────────────────────────────────────────────────────────── */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  font-family: var(--ff-body) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
  background-color: var(--gw-mint) !important;
  color: var(--gw-forest) !important;
  border: none !important;
  border-radius: 3px !important;
  padding: 0.75rem 1.5rem !important;
  transition: background-color 0.2s, transform 0.15s !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .button.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background-color: var(--gw-teal) !important;
  color: var(--gw-ivory) !important;
  transform: translateY(-1px) !important;
}

.woocommerce ul.products li.product .button {
  background-color: var(--gw-mint) !important;
  color: var(--gw-forest) !important;
  margin: 0.5rem 1rem 1rem !important;
  width: calc(100% - 2rem) !important;
  text-align: center !important;
}

.woocommerce ul.products li.product .button:hover {
  background-color: var(--gw-teal) !important;
  color: var(--gw-ivory) !important;
}

/* ── SINGLE PRODUCT ──────────────────────────────────────────────────────── */
.woocommerce div.product .product_title {
  font-family: var(--ff-display) !important;
  font-size: clamp(28px, 4vw, 42px) !important;
  font-weight: 400 !important;
  color: var(--gw-forest) !important;
  letter-spacing: -0.01em !important;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--ff-body) !important;
  font-size: 22px !important;
  color: var(--gw-teal) !important;
}

.woocommerce div.product .woocommerce-product-details__short-description {
  font-family: var(--ff-body) !important;
  font-size: 15px !important;
  font-weight: 300 !important;
  line-height: 1.8 !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--ff-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--gw-muted) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--gw-forest) !important; }

/* ── CART & CHECKOUT ─────────────────────────────────────────────────────── */
.woocommerce-cart table.cart td,
.woocommerce-cart table.cart th,
.woocommerce-checkout table.shop_table td,
.woocommerce-checkout table.shop_table th {
  font-family: var(--ff-body) !important;
  font-size: 14px !important;
}

.woocommerce-cart table.cart .cart_item td.product-name a,
.woocommerce-checkout .cart_item td.product-name {
  font-family: var(--ff-display) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  color: var(--gw-forest) !important;
}

.woocommerce-cart .cart-collaterals h2,
.woocommerce-checkout h3#order_review_heading,
.woocommerce-checkout #customer_details h3 {
  font-family: var(--ff-display) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--gw-forest) !important;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
  font-family: var(--ff-body) !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  border-color: rgba(47,58,50,0.2) !important;
  border-radius: 3px !important;
  padding: 0.65rem 0.85rem !important;
  background: white !important;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
  border-color: var(--gw-teal) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(27,100,89,0.12) !important;
}

.woocommerce form .form-row label {
  font-family: var(--ff-body) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

.woocommerce .order-total td, .woocommerce .order-total th {
  font-family: var(--ff-display) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--gw-forest) !important;
}

/* ── BREADCRUMBS ─────────────────────────────────────────────────────────── */
.woocommerce-breadcrumb {
  font-family: var(--ff-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  color: var(--gw-muted) !important;
}
.woocommerce-breadcrumb a { color: var(--gw-teal) !important; }

/* ── FOOTER ──────────────────────────────────────────────────────────────── */
.site-footer {
  background-color: var(--gw-forest) !important;
  border-top: 3px solid var(--gw-mint) !important;
}

.gw-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

.gw-back-to-main {
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gw-mint) !important;
  text-decoration: none;
  transition: color 0.2s;
}
.gw-back-to-main:hover { color: var(--gw-ivory) !important; }

.gw-footer-copy {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: rgba(244,239,233,0.40);
  margin: 0;
}

.site-footer .widget-title {
  font-family: var(--ff-display) !important;
  font-size: 18px !important;
  color: var(--gw-ivory) !important;
}

.site-footer a { color: var(--gw-mint) !important; }
.site-footer a:hover { color: var(--gw-ivory) !important; }

.site-info {
  font-family: var(--ff-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  color: rgba(244,239,233,0.35) !important;
  background: rgba(0,0,0,0.15) !important;
  padding: 0.75rem 2rem !important;
}

/* ── MISC ────────────────────────────────────────────────────────────────── */
.woocommerce span.onsale {
  font-family: var(--ff-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
  background: var(--gw-peach) !important;
  color: var(--gw-charcoal) !important;
  border-radius: 2px !important;
  min-height: auto !important;
  min-width: auto !important;
  padding: 4px 8px !important;
}

.woocommerce-message, .woocommerce-info, .woocommerce-error {
  font-family: var(--ff-body) !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  border-top-color: var(--gw-teal) !important;
}

.woocommerce .star-rating { color: var(--gw-gold) !important; }

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  font-family: var(--ff-body) !important;
  font-size: 13px !important;
  color: var(--gw-charcoal) !important;
}

.woocommerce nav.woocommerce-pagination ul li .current {
  background: var(--gw-forest) !important;
  color: var(--gw-ivory) !important;
}

/* Admin bar offset */
.admin-bar .site-header { top: 32px !important; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px !important; } }

/* ── RESPONSIVE ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .gw-search-form { max-width: 160px; }
}

@media (max-width: 700px) {
  .gw-header-inner { flex-wrap: wrap; padding: 0.75rem 1rem; gap: 0.75rem; }
  .gw-header-right { width: 100%; justify-content: space-between; }
  .gw-search-form  { max-width: none; flex: 1; }
  .gw-hero { padding: 2.5rem 1.25rem; }
  .gw-cat-list { overflow-x: auto; padding: 0 1rem; gap: 0; flex-wrap: nowrap; }
  .gw-cat-link  { padding: 0.75rem 0.9rem; }
}