/* ─────────────────────────────────────────────────────────────
   Invincible Tools — Shop Page (Single-Product Showcase)
   Reuses the homepage's "Featured Tool" product section design.

   IMPORTANT: header.php wraps EVERY page (not just the homepage)
   in <div class="ivt-frontpage">, and front-page.css defines its
   own .product-grid/.product-img-main/etc. rules scoped under
   .ivt-frontpage for the homepage's showcase. Those two-class
   selectors (.ivt-frontpage .product-img-main) out-specificity a
   plain one-class selector here regardless of load order, so
   EVERY selector below is scoped under the #shop-product section
   ID to guarantee it wins. Do not remove the #shop-product prefix
   or these rules will silently lose to front-page.css again.
   Loaded ONLY on the Shop page via is_shop().
   ───────────────────────────────────────────────────────────── */

:root {
  --teal:       #1B6B5A;
  --teal-light: #22866F;
  --teal-dark:  #134D41;
  --black:      #111111;
  --charcoal:   #222222;
  --mid-gray:   #555555;
  --smoke:      #F8F7F4;
  --white:      #FFFFFF;
  --text-muted: #555555;
  --font-display: 'Barlow Condensed', sans-serif;
  --font-body:    'Barlow', sans-serif;
}

/* Give the Shop page more room than the default 900px reading
   width from page-content.css — this is a rich two-column
   showcase, not a text page. */
#primary.content-area {
  max-width: 1240px !important;
}

#shop-product {
  background: var(--smoke);
  padding: 4rem 0 5rem;
}

#shop-product .product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}

@media (max-width: 900px) {
  #shop-product .product-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

#shop-product .product-images {
  position: relative;
}

#shop-product .product-img-main {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: auto;
  object-fit: initial;
}

#shop-product .product-badge {
  position: absolute;
  top: 1.5rem; left: 1.5rem;
  background: var(--teal);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: .04em;
  padding: .55rem 1.2rem;
  text-transform: uppercase;
  z-index: 2;
}

#shop-product .section-label {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .85rem;
  color: var(--teal);
  display: block;
  margin-bottom: .75rem;
}

#shop-product .product-name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.5rem, 4vw, 3.8rem);
  text-transform: uppercase;
  color: var(--black);
  line-height: 1;
  margin-bottom: .3rem;
}

#shop-product .product-full-name {
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 600;
  margin-bottom: 1.5rem;
}

#shop-product .product-divider {
  width: 48px;
  height: 3px;
  background: var(--teal);
  margin-bottom: 1.5rem;
}

#shop-product .product-desc {
  font-size: 1rem;
  color: #3A3A3A;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

#shop-product .product-desc p:last-child {
  margin-bottom: 0;
}

/* ─── Collapsible Key Features / What's Included sections ───────
   Built on native <details>/<summary> — collapsed by default with
   no JS required, and accessible (keyboard + screen reader) for
   free. */
#shop-product .shop-accordion {
  border-top: 1px solid #E2E1DC;
  margin-bottom: 0;
}

#shop-product .shop-accordion:last-of-type {
  border-bottom: 1px solid #E2E1DC;
  margin-bottom: 1.75rem;
}

#shop-product .shop-accordion summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--black);
}

#shop-product .shop-accordion summary::-webkit-details-marker {
  display: none;
}

#shop-product .shop-accordion summary::after {
  content: '+';
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--teal);
  line-height: 1;
  flex-shrink: 0;
  margin-left: 1rem;
  transition: transform .2s;
}

#shop-product .shop-accordion[open] summary::after {
  content: '\2212'; /* minus sign */
}

#shop-product .shop-accordion-content {
  padding: 0 0 1.25rem;
  font-size: 1rem;
  color: #3A3A3A;
  line-height: 1.7;
}

#shop-product .shop-accordion-content ul,
#shop-product .shop-accordion-content ol {
  margin: 0;
  padding-left: 1.25rem;
}

#shop-product .shop-accordion-content li + li {
  margin-top: .35rem;
}

#shop-product .shop-accordion-content p:last-child {
  margin-bottom: 0;
}

/* Live WooCommerce price, pulled via get_price_html() */
#shop-product .product-price-row {
  font-family: var(--font-display) !important;
  font-size: 2rem !important;
  font-weight: 800 !important;
  color: var(--black) !important;
  margin-bottom: 2rem;
}

#shop-product .product-price-row ins {
  text-decoration: none !important;
  color: var(--teal-dark) !important;
}

#shop-product .product-price-row del {
  color: var(--mid-gray) !important;
  font-size: 1.2rem;
  margin-right: .5rem;
}

#shop-product .product-ctas {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ─── Buttons — matches homepage's .btn styling ──────────────── */
#shop-product .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  box-sizing: border-box;
  /* Explicit shared height rather than relying on identical padding —
     WooCommerce's own .add_to_cart_button carries Storefront defaults
     with slightly different line-height/border, so matching padding
     alone wasn't enough to guarantee equal rendered height. */
  height: 54px;
  line-height: 1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 0 2.2rem;
  cursor: pointer;
  border: none;
  transition: background .22s, color .22s, transform .15s;
}

#shop-product .btn:active { transform: scale(.97); }

#shop-product .btn-primary {
  background: var(--teal);
  color: var(--white);
}

#shop-product .btn-primary:hover { background: var(--teal-light); }

#shop-product .btn-dark {
  background: var(--black);
  color: var(--white);
}

#shop-product .btn-dark:hover { background: var(--charcoal); }

/* ─── WooCommerce's own [add_to_cart] shortcode button,
   restyled to match .btn-primary above. WooCommerce renders its
   own <a class="add_to_cart_button ..."> inside this wrapper —
   we style that directly so the real Add-to-Cart/AJAX behavior
   stays untouched underneath. The wrapper itself carries NO visual
   styling (no background/padding/border) — it's just a flex
   container so the real anchor is the only thing that paints,
   avoiding a double-box effect from two overlapping colored
   elements. */
#shop-product .shop-add-to-cart {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
}

/* WooCommerce wraps the button + "View cart" link (once it appears)
   in its own <p class="add_to_cart_inline"> INSIDE .shop-add-to-cart.
   That paragraph — not the outer div — is the real flex container
   that needs to stack them, since it's the direct parent of both
   elements. */
#shop-product .shop-add-to-cart p.add_to_cart_inline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
  margin: 0;
}

#shop-product .shop-add-to-cart a.add_to_cart_button,
#shop-product .shop-add-to-cart a.ajax_add_to_cart {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .5rem;
  box-sizing: border-box !important;
  height: 54px !important;
  line-height: 1 !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 0 2.2rem !important;
  background: var(--teal) !important;
  color: var(--white) !important;
  border: none !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  transition: background .22s, transform .15s;
}

#shop-product .shop-add-to-cart a.add_to_cart_button:hover,
#shop-product .shop-add-to-cart a.ajax_add_to_cart:hover {
  background: var(--teal-light) !important;
}

#shop-product .shop-add-to-cart a.added_to_cart {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  height: 54px !important;
  margin-top: .75rem;
  padding: 0 2.2rem !important;
  background: var(--black) !important;
  color: var(--white) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none !important;
  border: none !important;
  border-radius: 0 !important;
  transition: background .22s;
}

#shop-product .shop-add-to-cart a.added_to_cart:hover {
  background: var(--charcoal) !important;
}