/* =============================================================
   Demon Seed Skateboards — Single Product Page Styles v1.0.0
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Nova+Cut&family=Inter:wght@300;400;500;700&display=swap');

/* ── White background across all single product page elements ── */
body.single-product,
body.single-product .site,
body.single-product .site-content,
body.single-product #content,
body.single-product .content-area,
body.single-product .site-main,
body.single-product .entry-content,
body.single-product .hentry,
body.single-product article {
  background: #ffffff !important;
  color: #2B323D !important;
}

/* ── Main WooCommerce wrapper ── */
body.single-product .woocommerce,
body.single-product .woocommerce-page {
  background: #ffffff !important;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 30px;
}

/* ── Breadcrumb ── */
body.single-product .woocommerce-breadcrumb {
  font-family: "Inter", sans-serif !important;
  font-size: 12px !important;
  color: #999 !important;
  padding: 20px 0 0 !important;
  margin: 0 !important;
}

body.single-product .woocommerce-breadcrumb a {
  color: #009477 !important;
  text-decoration: none !important;
}

body.single-product .woocommerce-breadcrumb a:hover {
  text-decoration: underline !important;
}

/* ── Product layout: image left, summary right ── */
body.single-product div.product {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: auto !important;
  gap: 48px !important;
  padding: 32px 0 80px !important;
  align-items: start !important;
  background: #ffffff !important;
}

/* ── Image column ── */
body.single-product div.product .woocommerce-product-gallery {
  grid-column: 1 !important;
  grid-row: 1 !important;
  position: sticky !important;
  top: 80px !important;
}

body.single-product div.product .woocommerce-product-gallery img {
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  display: block !important;
  border: 1px solid #e8e8e8 !important;
}

/* Thumbnails strip */
body.single-product div.product .flex-control-thumbs {
  display: flex !important;
  gap: 8px !important;
  margin-top: 10px !important;
  list-style: none !important;
  padding: 0 !important;
}

body.single-product div.product .flex-control-thumbs li {
  flex: 0 0 auto !important;
  width: 72px !important;
  height: 72px !important;
}

body.single-product div.product .flex-control-thumbs li img {
  width: 72px !important;
  height: 72px !important;
  object-fit: cover !important;
  border: 1.5px solid #e0e0e0 !important;
  cursor: pointer !important;
  opacity: 0.75 !important;
  transition: opacity 0.2s, border-color 0.2s !important;
}

body.single-product div.product .flex-control-thumbs li img.flex-active,
body.single-product div.product .flex-control-thumbs li img:hover {
  opacity: 1 !important;
  border-color: #009477 !important;
}

/* ── Summary column ── */
body.single-product div.product .summary {
  grid-column: 2 !important;
  grid-row: 1 !important;
  padding: 0 !important;
}

/* ── Product title ── */
body.single-product div.product .product_title {
  font-family: "Nova Cut", sans-serif !important;
  font-size: 40px !important;
  font-weight: 400 !important;
  color: #2B323D !important;
  margin: 0 0 12px !important;
  line-height: 1.15 !important;
  letter-spacing: 0.01em !important;
  border: none !important;
}

/* ── Star rating ── */
body.single-product div.product .woocommerce-product-rating {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 16px !important;
}

body.single-product .star-rating span::before,
body.single-product .star-rating::before {
  color: #009477 !important;
}

body.single-product .woocommerce-review-link {
  font-family: "Inter", sans-serif !important;
  font-size: 12px !important;
  color: #888 !important;
  text-decoration: none !important;
}

/* ── Price ── */
body.single-product div.product .price {
  font-family: "Inter", sans-serif !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: #2B323D !important;
  display: block !important;
  margin-bottom: 20px !important;
  padding: 0 !important;
}

body.single-product div.product .price del {
  color: #aaa !important;
  font-weight: 400 !important;
  font-size: 18px !important;
}

body.single-product div.product .price ins {
  color: #009477 !important;
  text-decoration: none !important;
}

/* ── No decorative divider under price ── */

/* ── Short description ── */
body.single-product div.product .woocommerce-product-details__short-description {
  font-family: "Inter", sans-serif !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: #555 !important;
  margin-bottom: 24px !important;
}

body.single-product div.product .woocommerce-product-details__short-description p {
  margin: 0 0 10px !important;
}

body.single-product div.product .woocommerce-product-details__short-description strong,
body.single-product div.product .woocommerce-product-details__short-description b {
  color: #2B323D !important;
}

/* ── Variations form ── */
body.single-product div.product form.variations_form {
  margin-bottom: 20px !important;
}

body.single-product div.product .variations {
  width: 100% !important;
  border-collapse: collapse !important;
}

body.single-product div.product .variations td,
body.single-product div.product .variations th {
  padding: 0 0 12px !important;
  border: none !important;
  background: transparent !important;
  vertical-align: middle !important;
}

body.single-product div.product .variations .label label {
  font-family: "Inter", sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: #2B323D !important;
  padding-right: 16px !important;
  white-space: nowrap !important;
}

body.single-product div.product .variations select {
  font-family: "Inter", sans-serif !important;
  font-size: 14px !important;
  color: #2B323D !important;
  background: #ffffff !important;
  border: 1.5px solid #e0e0e0 !important;
  border-radius: 2px !important;
  padding: 8px 12px !important;
  width: 100% !important;
  max-width: 240px !important;
  cursor: pointer !important;
  transition: border-color 0.2s !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23009477'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 32px !important;
}

body.single-product div.product .variations select:focus {
  outline: none !important;
  border-color: #009477 !important;
}

/* Reset variation link */
body.single-product div.product .reset_variations {
  font-family: "Inter", sans-serif !important;
  font-size: 12px !important;
  color: #009477 !important;
  text-decoration: none !important;
  display: inline-block !important;
  margin-top: 4px !important;
}

/* ── Stock status ── */
body.single-product div.product .stock {
  font-family: "Inter", sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  margin-bottom: 20px !important;
  padding: 6px 12px !important;
  display: inline-block !important;
  border-radius: 2px !important;
}

body.single-product div.product .in-stock {
  color: #009477 !important;
  background: rgba(0, 148, 119, 0.08) !important;
}

body.single-product div.product .out-of-stock {
  color: #c0392b !important;
  background: rgba(192, 57, 43, 0.08) !important;
}

/* ── Quantity input ── */
body.single-product div.product .quantity {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  margin-right: 12px !important;
}

body.single-product div.product .quantity input.qty {
  font-family: "Inter", sans-serif !important;
  font-size: 16px !important;
  color: #2B323D !important;
  border: 1.5px solid #e0e0e0 !important;
  border-radius: 2px !important;
  width: 60px !important;
  height: 46px !important;
  text-align: center !important;
  background: #ffffff !important;
  padding: 0 !important;
}

body.single-product div.product .quantity input.qty:focus {
  outline: none !important;
  border-color: #009477 !important;
}

/* ── Add to Cart / Buy button ── */
body.single-product div.product .cart {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 24px !important;
}

body.single-product div.product .single_add_to_cart_button,
body.single-product div.product button[type="submit"].button {
  font-family: "Inter", sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: #ffffff !important;
  background: #009477 !important;
  border: 1.5px solid #009477 !important;
  border-radius: 2px !important;
  padding: 14px 36px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background 0.2s ease, color 0.2s ease !important;
  height: 46px !important;
  display: flex !important;
  align-items: center !important;
  white-space: nowrap !important;
}

body.single-product div.product .single_add_to_cart_button:hover,
body.single-product div.product button[type="submit"].button:hover {
  background: #007a62 !important;
  border-color: #007a62 !important;
}

body.single-product div.product .single_add_to_cart_button.disabled,
body.single-product div.product .single_add_to_cart_button:disabled {
  background: #ccc !important;
  border-color: #ccc !important;
  cursor: not-allowed !important;
}

/* ── Product meta (SKU, category, tags) — hidden, not useful for customers ── */
body.single-product div.product .product_meta {
  display: none !important;
}

/* ── Full description moved into summary ── */
body.single-product div.product .ds-product-full-desc {
  font-family: "Inter", sans-serif !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
  color: #555 !important;
  margin-bottom: 20px !important;
  padding: 16px 0 !important;
  border-top: 1px solid #e8e8e8 !important;
}

body.single-product div.product .ds-product-full-desc p {
  margin: 0 0 8px !important;
}

body.single-product div.product .ds-product-full-desc strong {
  color: #2B323D !important;
}

/* ── Reviews section — hide tab nav, show content directly ── */
body.single-product div.product .woocommerce-tabs ul.tabs {
  display: none !important;
}

body.single-product div.product .woocommerce-tabs .panel {
  display: block !important;
}

/* ── Reviews section header ── */
body.single-product div.product .woocommerce-tabs #tab-reviews::before {
  content: 'Reviews' !important;
  display: block !important;
  font-family: "Nova Cut", sans-serif !important;
  font-size: 32px !important;
  font-weight: 400 !important;
  color: #2B323D !important;
  margin-bottom: 24px !important;
}

/* ── Tabs (Reviews only) ── */
body.single-product div.product .woocommerce-tabs {
  grid-column: 1 / -1 !important;
  margin-top: 48px !important;
  border-top: 1px solid #e8e8e8 !important;
  padding-top: 0 !important;
}


body.single-product div.product .woocommerce-tabs .panel {
  font-family: "Inter", sans-serif !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  color: #444 !important;
  padding: 32px 0 !important;
  background: transparent !important;
  border: none !important;
  max-width: 720px !important;
}

body.single-product div.product .woocommerce-tabs .panel h2 {
  font-family: "Nova Cut", sans-serif !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  color: #2B323D !important;
  margin-bottom: 16px !important;
}

body.single-product div.product .woocommerce-tabs .panel p {
  margin: 0 0 14px !important;
}

/* ── Related products section ── */
body.single-product .related.products,
body.single-product .upsells.products {
  margin-top: 60px !important;
  padding-top: 40px !important;
  border-top: 1px solid #e8e8e8 !important;
  background: #ffffff !important;
}

body.single-product .related.products > h2,
body.single-product .upsells.products > h2 {
  font-family: "Nova Cut", sans-serif !important;
  font-size: 32px !important;
  font-weight: 400 !important;
  color: #2B323D !important;
  margin-bottom: 28px !important;
}

/* Related product grid uses same card style as shop */
body.single-product .related.products ul.products,
body.single-product .upsells.products ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

body.single-product .related.products ul.products li.product,
body.single-product .upsells.products ul.products li.product {
  background: #ffffff !important;
  border: 1px solid #e0e0e0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: box-shadow 0.3s ease !important;
}

body.single-product .related.products ul.products li.product:hover,
body.single-product .upsells.products ul.products li.product:hover {
  background-image: linear-gradient(180deg, #f4f4f4 96%, #009477 96%) !important;
  box-shadow: 1px 4px 35px 0px rgba(0, 0, 0, 0.08) !important;
}

body.single-product .related.products ul.products li.product img,
body.single-product .upsells.products ul.products li.product img {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  display: block !important;
}

body.single-product .related.products ul.products li.product .woocommerce-loop-product__title,
body.single-product .upsells.products ul.products li.product .woocommerce-loop-product__title {
  font-family: "Nova Cut", sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  color: #2B323D !important;
  padding: 12px 12px 4px !important;
}

body.single-product .related.products ul.products li.product .price,
body.single-product .upsells.products ul.products li.product .price {
  font-family: "Inter", sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #2B323D !important;
  padding: 2px 12px 10px !important;
  display: block !important;
  margin: 0 !important;
}

body.single-product .related.products ul.products li.product .button,
body.single-product .upsells.products ul.products li.product .button {
  display: inline-block !important;
  font-family: "Inter", sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #009477 !important;
  background: transparent !important;
  border: 1.5px solid #009477 !important;
  border-radius: 20px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  padding: 6px 16px !important;
  margin: 0 12px 12px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background 0.2s ease, color 0.2s ease !important;
}

body.single-product .related.products ul.products li.product:hover .button,
body.single-product .upsells.products ul.products li.product:hover .button {
  background: #009477 !important;
  color: #fff !important;
}

/* ── Headings ── */
body.single-product h1,
body.single-product h2,
body.single-product h3 {
  color: #2B323D !important;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  body.single-product div.product {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 20px 0 60px !important;
  }

  body.single-product div.product .woocommerce-product-gallery {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: static !important;
  }

  body.single-product div.product .summary {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  body.single-product div.product .woocommerce-tabs {
    grid-column: 1 !important;
  }

  body.single-product div.product .product_title {
    font-size: 30px !important;
  }

  body.single-product .related.products ul.products,
  body.single-product .upsells.products ul.products {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  body.single-product .woocommerce,
  body.single-product .woocommerce-page {
    padding: 0 16px !important;
  }
}