/* Product Cards */
.fs-product-card {
  background: var(--fs-warm-bg); border: 1px solid var(--fs-border);
  overflow: hidden; transition: transform 0.15s, box-shadow 0.15s; position: relative;
}
.fs-product-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.10); }
.fs-product-card__img-link { display: block; position: relative; background: var(--fs-warm-bg); }
.fs-product-card__img-link img { width: 100%; height: 220px; object-fit: cover; display: block; }

.fs-product-card__label {
  position: absolute; top: 10px; left: 10px;
  background: var(--fs-warm-bg); color: var(--fs-text);
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 5px 10px; border: 1px solid var(--fs-border);
}
.fs-label--pole-vault, .fs-label--poles { background: var(--fs-black); color: #fff; border-color: var(--fs-black); }
.fs-label--throws, .fs-label--discus { background: var(--fs-black); color: #fff; border-color: var(--fs-black); }
.fs-label--accessories { background: #4a5568; color: #fff; border-color: #4a5568; }
.fs-label--apparel { background: #2d6a4f; color: #fff; border-color: #2d6a4f; }

.fs-product-card__body { padding: 16px; border-top: 1px solid var(--fs-border); }
.fs-product-card__title a {
  font-family: var(--fs-font-heading); font-size: 16px; font-weight: 800;
  color: var(--fs-black); text-decoration: none; text-transform: uppercase;
  letter-spacing: 0.02em; line-height: 1.2;
}
.fs-product-card__title a:hover { color: var(--fs-red); }
.fs-product-card__price .price { font-size: 18px; font-weight: 700; color: var(--fs-text); letter-spacing: 0.06em; margin: 8px 0 12px; }
.fs-product-card__price .price ins { text-decoration: none; }
.fs-product-card__price .price del { color: var(--fs-muted); font-size: 13px; }

/* Related/upsell product-card fix -- Kadence adds extra grid-cols /
   woo-archive-* classes to <ul class="products"> on related & upsell loops
   (not present on the plain shop archive), and those Kadence rules beat our
   simpler .fs-product-card selectors on specificity: images collapsed to
   ~109px, buttons to ~77px, and card heights didn't stretch evenly. Reassert
   full image/button sizing and make the card a flex column so title/price/
   button align consistently regardless of title length. */
.woocommerce ul.products li.product .fs-product-card {
  height: 100% !important; display: flex !important; flex-direction: column !important;
}
.woocommerce ul.products li.product .fs-product-card__img-link img {
  width: 100% !important; height: 220px !important; max-width: none !important; object-fit: cover !important;
}
.woocommerce ul.products li.product .fs-product-card__body {
  display: flex !important; flex-direction: column !important; flex: 1 !important;
}
.woocommerce ul.products li.product .fs-product-card__title { flex: 1 !important; }
.woocommerce ul.products li.product .fs-product-card__title a {
  display: -webkit-box !important; -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important; overflow: hidden !important;
}
.woocommerce ul.products li.product .fs-product-card .add_to_cart_button,
.woocommerce ul.products li.product .fs-product-card .button {
  width: 100% !important; margin-top: auto !important;
}

/* Square corners -- Kadence's default li.product card wrapper ships with a
   heavy border-radius (~49px) and its .button has a 3px radius; override both
   to 0 so the catalog and related-product cards read as flat squares, matching
   --fs-radius:0 already set as the site's design token. */
.woocommerce ul.products li.product {
  border-radius: 0 !important;
}
.woocommerce ul.products li.product .fs-product-card,
.woocommerce ul.products li.product .fs-product-card__img-link img,
.woocommerce ul.products li.product .fs-product-card .button,
.woocommerce ul.products li.product .fs-product-card .add_to_cart_button {
  border-radius: 0 !important;
}

/* ATC Button -- outlined black */
.woocommerce .fs-product-card .add_to_cart_button,
.woocommerce .fs-product-card .button {
  display: block !important; text-align: center !important;
  background: transparent !important; color: var(--fs-black) !important;
  border: 2px solid var(--fs-black) !important; padding: 14px 0 !important;
  width: 100% !important; font-family: var(--fs-font-body) !important;
  font-size: 14px !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: 0.08em !important;
  cursor: pointer !important; transition: background 0.2s, color 0.2s !important;
  text-decoration: none !important; margin-top: 12px !important;
  height: auto !important; line-height: normal !important; box-sizing: border-box !important;
}
.woocommerce .fs-product-card .add_to_cart_button:hover,
.woocommerce .fs-product-card .button:hover {
  background: var(--fs-black) !important; color: var(--fs-white) !important;
}

/* Shop Grid */
.woocommerce ul.products {
  display: grid !important; grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important; list-style: none !important; padding: 0 !important;
}
.woocommerce ul.products li.product { float: none !important; width: auto !important; margin: 0 !important; }
@media (max-width: 900px) { .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 480px) {
  .woocommerce ul.products { grid-template-columns: 1fr !important; }
  .fs-product-card__img-link img { height: 240px; }
}

/* Category Banner */
.fs-cat-banner { background: var(--fs-black); padding: 56px 40px; margin-bottom: 32px; }
.fs-cat-banner__inner { max-width: 800px; }
.fs-cat-banner__eyebrow {
  color: var(--fs-red); font-size: 12px; font-weight: 700; letter-spacing: 0.3em;
  text-transform: uppercase; font-family: var(--fs-font-body); margin-bottom: 10px;
}
.fs-cat-banner__title {
  color: var(--fs-white); font-size: clamp(32px, 5vw, 56px);
  font-family: var(--fs-font-heading); font-weight: 900; text-transform: uppercase;
  letter-spacing: 0.02em; line-height: 0.95; margin: 0 0 12px;
}
.fs-cat-banner__desc { color: var(--fs-muted-dark); font-size: 15px; margin: 0; }
@media (max-width: 768px) { .fs-cat-banner { padding: 32px 16px; margin-bottom: 20px; } }

/* Single Product */
.single-product .product {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start;
  padding: 48px 40px; background: var(--fs-white); margin: 24px auto;
  max-width: 1100px; border: 1px solid var(--fs-border);
}

/* Fix: Kadence base theme sets div.product .images/.summary to width:48% + float,
   which shrinks them inside our 2-col grid (525px col -> 252px, matches 48% exactly).
   Override so gallery + summary each fill their grid column. */
.single-product div.product div.images,
.single-product div.product div.summary,
.single-product .woocommerce-product-gallery,
.single-product .summary.entry-summary {
  width: 100% !important;
  float: none !important;
}
.single-product .product_title {
  font-family: var(--fs-font-heading); font-size: clamp(28px, 4vw, 44px);
  color: var(--fs-black); text-transform: uppercase; letter-spacing: 0.02em;
  line-height: 0.95; margin: 0 0 10px;
}
.single-product .sku_wrapper { font-size: 12px; color: var(--fs-muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 14px; }
.single-product .price { font-size: 28px; font-weight: 700; color: var(--fs-text); letter-spacing: 0.04em; margin-bottom: 20px; }
.single-product .variations select {
  border: 1px solid var(--fs-border); padding: 10px 14px; font-size: 14px;
  font-family: var(--fs-font-body); width: 100%; margin-bottom: 12px;
  background: var(--fs-white); color: var(--fs-text);
}
.single-product .single_add_to_cart_button {
  background: var(--fs-red) !important; color: #fff !important; border: none !important;
  padding: 17px 40px !important; font-family: var(--fs-font-body) !important;
  font-size: 15px !important; font-weight: 700 !important; text-transform: uppercase !important;
  letter-spacing: 0.08em !important; width: 100% !important; transition: background 0.2s !important;
  cursor: pointer !important; height: auto !important; line-height: normal !important;
  display: block !important; box-sizing: border-box !important;
}
.single-product .single_add_to_cart_button:hover { background: #c41219 !important; }
.woocommerce-tabs ul.tabs {
  border-bottom: 2px solid var(--fs-border); padding: 0; list-style: none; display: flex;
}
.woocommerce-tabs ul.tabs li a {
  display: block; padding: 12px 22px; font-family: var(--fs-font-body); font-size: 13px;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fs-muted); text-decoration: none; border: none; background: transparent;
}
.woocommerce-tabs ul.tabs li.active a { color: var(--fs-black); border-bottom: 3px solid var(--fs-red); margin-bottom: -2px; }
@media (max-width: 768px) { .single-product .product { grid-template-columns: 1fr; padding: 20px 16px; gap: 20px; } }
.single-product .woocommerce-tabs,
.single-product .up-sells,
.single-product .related { grid-column: 1 / -1; }

/* Sticky ATC */
.fs-sticky-atc {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--fs-black); padding: 14px 24px; display: flex;
  align-items: center; justify-content: space-between; gap: 16px;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.3); z-index: 9999;
  transform: translateY(100%); transition: transform 0.3s ease;
  border-top: 1px solid var(--fs-border-dark);
}
.fs-sticky-atc.is-visible { transform: translateY(0); }
.fs-sticky-atc__title {
  color: #fff; font-family: var(--fs-font-heading); font-size: 15px;
  font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
  flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fs-sticky-atc__price { color: var(--fs-muted-dark); font-size: 16px; font-weight: 700; }
.fs-sticky-atc__btn {
  background: var(--fs-red); color: #fff; border: none; padding: 13px 28px;
  font-family: var(--fs-font-body); font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer;
  white-space: nowrap; transition: background 0.2s;
}
.fs-sticky-atc__btn:hover { background: #c41219; }