/*
Theme Name: Sporting Growth Shop
Theme URI: https://shop.sportinggrowth.com/
Author: Sporting Growth
Description: A custom WooCommerce storefront built around the interactive Sporting Growth locker room.
Version: 1.0.2
Requires at least: 6.5
Requires PHP: 7.4
Text Domain: sporting-growth-shop
*/

:root {
  --sg-ink: #171717;
  --sg-paper: #f3efec;
  --sg-red: #a9362f;
  --sg-line: rgba(23, 23, 23, .14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--sg-paper); color: var(--sg-ink); font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; }
img { max-width: 100%; height: auto; }

.site-header {
  min-height: 68px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 0 clamp(18px, 3vw, 50px);
  background: linear-gradient(180deg, #f8f5f3 0%, #f3efec 72%, #eee9e6 100%);
  box-shadow: inset 0 -1px rgba(255, 255, 255, .72);
  position: relative;
  z-index: 20;
}

.site-header::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: -18px;
  height: 18px;
  background: linear-gradient(180deg, rgba(238, 233, 230, .92), rgba(238, 233, 230, 0));
  pointer-events: none;
}

.header-title {
  color: var(--sg-ink);
  font-family: "Snell Roundhand", "Apple Chancery", cursive;
  font-size: 25px;
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.header-title span { display: inline-block; font-size: 35px; line-height: .7; }

.bag {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--sg-ink);
  text-decoration: none;
  transition: background 180ms ease, transform 180ms ease;
}

.bag:hover, .bag:focus-visible { background: rgba(23, 23, 23, .06); transform: translateY(-1px); outline: none; }
.bag svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }

.site-content { min-height: calc(100vh - 68px); padding: clamp(90px, 10vw, 150px) 24px 80px; }
.content-shell { width: min(1180px, 100%); margin: 0 auto; }
.entry-title, .woocommerce-products-header__title { font-family: Georgia, serif; font-weight: 500; letter-spacing: -.035em; }

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.wp-element-button {
  border-radius: 999px;
  background: var(--sg-ink);
  color: white;
  padding: .85em 1.35em;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover { background: #333; color: white; }

@media (max-width: 700px) {
  .site-header { min-height: 58px; }
  .header-title { font-size: 22px; }
  .header-title span { font-size: 32px; }
  .site-content { min-height: calc(100vh - 58px); padding-top: 78px; }
}