/* ===== ECOMMERCE PRODUCT PAGE STYLING ===== */

/* Product Layout */
/* Removed .woocommerce wrapper usage; page does not include it */

/* Fallback when body doesn't include .woocommerce on this theme */
.product {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 4rem;
}

/* Product Gallery and Summary Layout */
.product .woocommerce-product-gallery {
  grid-column: 1;
}

.product .summary {
  grid-column: 2;
}

/* Product Images */
.product div.images {
  position: sticky;
  top: 2rem;
}

.product div.images .woocommerce-product-gallery__wrapper {
  position: relative;
  clip-path: var(--notch-right-medium);
}

/* Fix for FlexSlider flex-viewport */
.woocommerce-product-gallery .flex-viewport {
  min-height: 300px;
}

/* Clearfix to contain floated children from FlexSlider */
.product div.images .woocommerce-product-gallery__wrapper::after {
  content: "";
  display: table;
  clear: both;
}

.product div.images .woocommerce-product-gallery__image {
  margin-bottom: 1rem;
}

.product div.images img {
  width: 100%;
  height: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Product Title */
.product .product_title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--near-black);
  margin-bottom: 1rem;
  line-height: 1.2;
}

/* Product Price */
.product .price {
  font-size: 1.3rem;
  line-height: 1.5;
  font-weight: 600;
  color: var(--gray);
  margin-bottom: 1rem;
  display: block;
}

.product .price del {
  color: var(--gray);
  margin-right: 0.5rem;
}

.product .price ins {
  text-decoration: none;
}

/* Product Rating */
.product .woocommerce-product-rating {
  margin-bottom: 1.5rem;
}

.product .star-rating {
  color: var(--primary);
  font-size: 1.2rem;
}

.product .woocommerce-review-link {
  color: var(--gray);
  text-decoration: none;
  margin-left: 0.5rem;
}

.product .woocommerce-review-link:hover {
  color: var(--primary);
}

/* Product Description */
.product .woocommerce-product-details__short-description {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--gray);
  margin-bottom: 1rem;
}

/* Notices span full width across both columns */
.product .woocommerce-notices-wrapper {
  grid-column: 1 / -1;
}

.product .woocommerce-notices-wrapper .woocommerce-message {
  border-top-color: var(--primary);
  margin-bottom: 0px;
}

.product .woocommerce-notices-wrapper .woocommerce-message::before {
  color: var(--primary);
}

/* Side-by-side quantity and button */
.product form.cart .bdc-cart-row {
  display: flex;
  align-items: stretch;
  gap: 1rem;
}

.product form.cart .quantity {
  display: inline-flex;
  align-items: center;
}

.product form.cart .quantity .qty {
  width: 90px;
  height: 58px;
  padding: 0 16px;
  border: 1px solid var(--light-gray);
  border-radius: 0;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  background: #fff;
  color: var(--near-black);
  transition: var(--global-transition);
}

.product form.cart .quantity .qty:focus {
  border-color: var(--primary);
  outline: none;
}

.product form.cart .single_add_to_cart_button {
  background-color: var(--primary);
  color: var(--near-black);
  border: none;
  padding: 15px 20px;
  font-size: 1rem;
  font-weight: var(--medium);
  cursor: pointer;
  transition: var(--global-transition);
  clip-path: var(--notch-right-small);
  display: inline-block;
  text-decoration: none;
  text-align: center;
}

.product form.cart .single_add_to_cart_button:hover {
  background-color: var(--secondary);
  color: var(--white);
}

.product form.cart .single_add_to_cart_button:disabled {
  background-color: var(--light-gray);
  color: var(--gray);
  cursor: not-allowed;
}

/* Product Meta */
.product .product_meta {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--light-gray);
}

.product .product_meta span {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--near-black);
}

.product .product_meta a {
  color: var(--primary);
  text-decoration: none;
}

.product .product_meta a:hover {
  color: var(--secondary);
}

/* Product Tabs */
.product .woocommerce-tabs {
  grid-column: 1 / -1;
}

/* Horizontal-style tabs inspired by theme responsive tabs */
.product .woocommerce-tabs ul.tabs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0;
  border-bottom: none;
}

.product .woocommerce-tabs ul.tabs li {
  margin: 0;
  padding: 0; /* padding is on li to mirror responsive-tabs */
  cursor: pointer;
  background-color: var(--lightest-gray);
  color: var(--near-black);
  border-top: 1px solid var(--light-gray);
  border-left: 1px solid var(--light-gray);
  position: relative;
}

.product .woocommerce-tabs ul.tabs li:last-child {
  border-right: 1px solid var(--light-gray);
}

.product .woocommerce-tabs ul.tabs li a {
  display: inline-block;
  padding: 0.833em; /* match style-guide horizontal tabs */
  text-decoration: none;
  color: inherit; /* inherit li color */
  font-weight: 600;
}

.product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--secondary);
}

.product .woocommerce-tabs ul.tabs li.active {
  background: #fff;
  color: var(--secondary);
}

.product .woocommerce-tabs ul.tabs li.active:after {
  content: "";
  display: block;
  background: #fff;
  height: 1px;
  width: 100%;
  position: absolute;
  bottom: -1px;
  left: 0;
}

/* Ensure wrapper and list spacing mimic style-guide */
.product .woocommerce-tabs .wc-tabs-wrapper {
  margin-top: 0;
  padding: 0;
  background: transparent;
}

.product .woocommerce-tabs ul.tabs.wc-tabs {
  margin: 0;
  padding: 0;
}

.product .woocommerce-tabs .panel,
.product .woocommerce-tabs .woocommerce-Tabs-panel {
  padding: 1.667em 1.944em; /* match .resp-tab-content */
  border: 1px solid var(--light-gray);
  background-color: #fff;
}

.product .woocommerce-tabs .panel h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: var(--near-black);
}

/* Related Products */
.related {
  margin-top: 4rem;
  padding-top: 4rem;
  border-top: 2px solid var(--light-gray);
  grid-column: 1 / -1;
}

.related h2 {
  font-size: 2rem;
  margin-bottom: 3rem;
  text-align: center;
  color: var(--near-black);
}

.related ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.related ul.products li.product {
  background: #fff;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: var(--global-transition);
}

.related ul.products li.product:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.related ul.products li.product img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.related ul.products li.product h3 {
  font-size: 1.2rem;
  margin: 1rem 1rem 0.5rem 1rem;
  color: var(--near-black);
}

.related ul.products li.product .price {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary);
  margin: 0 1rem 1rem 1rem;
}

/* Tablet layout: single column */
@media (max-width: 1024px) {
  .product {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .product .woocommerce-product-gallery,
  .product .summary {
    grid-column: 1 / -1;
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .product form.cart .bdc-cart-row {
    flex-direction: column;
  }

  .product {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .product div.images {
    position: static;
  }

  .product .product_title {
    font-size: 2rem;
  }

  .product .price {
    font-size: 1.5rem;
  }

  .product form.cart .quantity {
    display: block;
    margin-bottom: 1rem;
  }

  .product form.cart .single_add_to_cart_button {
    width: 100%;
    display: block;
  }

  .product .woocommerce-tabs ul.tabs {
    flex-direction: column;
    gap: 0;
  }

  .product .woocommerce-tabs ul.tabs li {
    border-right: 1px solid var(--light-gray);
  }

  .product .woocommerce-tabs ul.tabs li a {
    width: 100%;
  }

  .related ul.products {
    grid-template-columns: 1fr;
  }

  .product .woocommerce-tabs .woocommerce-Tabs-panel {
    padding: 1.667em 0.944em;
  }
}

/* Stock Status */
.woocommerce div.product .stock {
  font-weight: 600;
  margin-bottom: 1rem;
}

.woocommerce div.product .stock.in-stock {
  color: #28a745;
}

.woocommerce div.product .stock.out-of-stock {
  color: #dc3545;
}

/* Product Variations */
.woocommerce div.product .variations {
  margin-bottom: 2rem;
}

.woocommerce div.product .variations label {
  font-weight: 600;
  color: var(--near-black);
  margin-bottom: 0.5rem;
  display: block;
}

.woocommerce div.product .variations select {
  width: 100%;
  height: 58px;
  padding: 20px;
  border: 1px solid var(--light-gray);
  border-radius: 0;
  background: #fff;
  font-size: 1rem;
  margin-bottom: 1rem;
}

.woocommerce div.product .variations select:focus {
  border-color: var(--primary);
  outline: none;
}

/* Reset WooCommerce Default Styles */
.woocommerce div.product .woocommerce-product-gallery__trigger {
  display: none;
}

.woocommerce div.product .woocommerce-product-gallery__image img {
  width: 100%;
  height: auto;
}

/* Product Gallery Thumbnails */
.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs {
  list-style: none;
  margin: 1rem 0 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}

.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs li {
  margin: 0;
  padding: 0;
  list-style: none;
  cursor: pointer;
  overflow: hidden;
  border: 2px solid transparent;
  transition: var(--global-transition);
}

/* Cancel out the ::before counter from global ol li styles */
.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs li::before {
  content: none;
  display: none;
  margin-right: 0;
}

.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs li:hover {
  border-color: var(--primary);
}

.woocommerce-product-gallery
  .flex-control-nav.flex-control-thumbs
  li.flex-active {
  border-color: var(--secondary);
}

.woocommerce-product-gallery .flex-control-nav.flex-control-thumbs li img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 1 / 1;
}