/*
  1. PRODUCT HEADER ......................... Title, price and discount styling
  2. QUANTITY INPUTS ....................... Product quantity selector styles
  3. CART FORMS ............................ Add to cart form variations
  4. VARIATION SELECTORS ................... Dropdowns for product options
  5. BUY NOW BUTTON ........................ Special purchase button effects
  6. PRODUCT GALLERY ....................... Image slider and thumbnails
  7. PRODUCT TABS .......................... Description/reviews tab system
  8. STOCK STATUS .......................... In-stock/out-of-stock displays
  9. RELATED PRODUCTS ...................... Upsell product section styling
  10. MEDIA QUERY ........................... All media query here
*/

/* ==========================================================================WOOCOMMERCE SINGLE PRODUCT PAGE DESIGN
   ========================================================================== */

/* 1.1 Product Title & Price 
   - Main product heading and pricing display
-------------------------------------------------------------- */

.woocommerce div.product .product_title {
  font-size: var(--font-size-h3);
  font-weight: bold;
  color: var(--digi-title-color);
}

.woocommerce div.product form.cart {
  margin: 20px 0;
}

.woocommerce div.product form.cart.grouped_form {
  margin: 0;
}

.single-product .entry-summary .price,
.single-product .entry-summary .woocommerce-variation-price .price {
  font-size: var(--font-size-h4);
  font-weight: bold;
  padding-top: 10px;
  border-top: 1px solid var(--digi-border-color);
  margin-top: 20px;
}

/* 1.2 Discount Price Styling 
   - Original price strikethrough effect
-------------------------------------------------------------- */

.single-product .entry-summary .price del,
.single-product .entry-summary .woocommerce-variation-price del {
  font-size: var(--font-size-h5);
  position: relative;
  text-decoration: none;
  opacity: 0.65;
}
.single-product .entry-summary .price del::before,
.single-product .entry-summary .woocommerce-variation-price de::before {
  content: "";
  position: absolute;
  top: 46%;
  left: 0;
  width: 94%;
  height: 0;
  display: block;
  border: 1px solid;
  transform: rotate(-22deg);
  opacity: 0.65;
}

.single-product .price ins,
.single-product .woocommerce-variation-price ins {
  text-decoration: none;
}

/* 2.1 Quantity Input 
   - Product quantity selector controls
-------------------------------------------------------------- */
.qty {
  border: 0;
  width: 26px;
  text-align: center;
}

.qty {
  width: 30px;
  text-align: center;
  border: none;
  font-size: 16px;
  font-weight: bold;
  background: none;
}

.qty::-webkit-outer-spin-button,
.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* 3.1 Cart Form Layouts 
   - Various add-to-cart form configurations
-------------------------------------------------------------- */

.single-product .cart {
  display: flex;
}

.single-product .variations_form.cart {
  display: block;
}

.single-product .grouped_form.cart {
  display: block;
}

.single-product .woocommerce-grouped-product-lis .product_type_grouped {
  margin-right: 36px;
}

.single-product .variations_form.cart .woocommerce-variation-add-to-cart {
  display: flex;
  margin-top: 20px;
}

.single-product .woocommerce-grouped-product-list-item {
  border-bottom: 1px solid var(--digi-border-color);
  margin: 20px 0;
}

.single-product .cart .digi-quantity,
.single-product
  .woocommerce-grouped-product-list-item__quantity
  a.product_type_simple {
  width: 300px;
  margin-right: 20px;
}

.single-product .cart.grouped_form .digi-quantity,
.single-product
  .woocommerce-grouped-product-list-item__quantity
  a.product_type_simple {
  width: 150px;
  text-align: center;
}

.single-product .cart.grouped_form .digi-quantity {
  margin-right: 20px !important;
}

.single-product .woocommerce-grouped-product-list-item::after {
  content: "";
  display: block;
  clear: both;
  overflow: hidden;
}

.single-product div.product form.cart .button {
  padding: 10px 14px;
  line-height: 1.35em;
}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles))
  a.button {
  line-height: 1.35em;
}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles))
  button.button.alt {
  width: 100%;
  color: #ffffff;
  background-color: var(--digi-primary-color);
  text-transform: uppercase;
}
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles))
  button.button.alt:hover {
  width: 100%;
  color: #ffffff;
  background-color: var(--digi-primary-color);
  box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.2);
  transition: 0.3s;
}

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles))
  a.button:hover {
  color: #ffffff;
  background-color: var(--digi-primary-color);
  box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.2);
}

.woocommerce div.product form.cart .variations label {
  display: block;
  height: 100%;
  line-height: 3rem;
}

/* 8.1 Stock Status 
   - In-stock/out-of-stock notifications
-------------------------------------------------------------- */

.single-product.woocommerce div.product p.stock.out-of-stock {
  font-size: var(--font-size-h4);
  font-weight: bold;
  color: red;
  padding: 20px 10px 0 0;
  display: block;
}

.single-product.woocommerce .cart.grouped_form p.stock.out-of-stock {
  font-size: var(--font-size-normal);
  font-weight: bold;
  color: red;
  display: block;
  padding: inherit;
}

.single-product div.product form.cart .variations select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 14px;
  background: #fff;
  cursor: pointer;
}
.single-product div.product form.cart .variations select:focus {
  border-color: var(--digi-primary-color, #0073aa);
  outline: none;
  box-shadow: 0 0 5px rgba(0, 115, 170, 0.3);
}

.single-product div.product form.cart .variations tr:last-child select {
  margin-bottom: 0;
}

/* 5.1 Buy Now Button 
   - Special purchase button with hover effect
-------------------------------------------------------------- */
.buy-now-button {
  display: inline-block;
  height: 40px;
  overflow: hidden;
  position: relative;
  width: 100%;
  padding: 0 !important;
  background: var(--digi-primary-color);
  color: #fff;
  font-size: var(--font-size-normal);
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  border-radius: 3px;
  overflow: hidden;
  cursor: pointer;
  transition: 0.3s ease-in-out;
}

.buy-now-button .label-down {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0px 30px;
  height: 100%;
  position: relative;
  top: -100%;
  transition: 0.3s;
}

.buy-now-button:hover .label-down {
  top: 0%;
}

.digi-woocommerce-meta {
  margin-top: 20px;
}
.digi-woocommerce-meta p {
  margin: 5px 0;
}

/* 6.1 Product Gallery 
   - Main image slider and thumbnail navigation
-------------------------------------------------------------- */

.single-product-gallery-thumb {
  margin-top: 10px;
}

.single-product.woocommerce
  div.product
  div.images.woocommerce-product-gallery
  .digi-product-slider {
  position: sticky;
  top: 0;
}

/* .single-product.woocommerce
  #wpadminbar
  div.product
  div.images.woocommerce-product-gallery
  .digi-product-slider {
  position: sticky;
  top: 32px;
} */

.single-product .single-product-gallery-thumb .swiper-slide {
  cursor: pointer;
  opacity: 0.3;
  height: inherit;
}

.single-product .swiper-wrapper {
  height: inherit;
}

.single-product .swiper-pagination-bullet {
  background-color: #bbbbbb;
}

.single-product .single-product-gallery-thumb .swiper-slide-thumb-active {
  opacity: 1;
}

/* 7.1 Product Reviews 
   - Comment/Review form styling
-------------------------------------------------------------- */
.woocommerce #review_form #respond textarea {
  padding: 10px;
  border: 1px solid var(--digi-border-color);
}

.woocommerce #review_form #respond textarea:focus {
  border: 1px solid var(--digi-primary-color);
}

.woocommerce #review_form #respond .form-submit input {
  background-color: var(--digi-primary-color);
  color: #ffffff;
  font-family: var(--digi-font-family);
}

/* 7.2 Product Tabs 
   - Description/reviews tab system
-------------------------------------------------------------- */
.woocommerce-tabs {
  border-bottom: 2px solid #ddd;
  margin-bottom: 20px;
}

.woocommerce-tabs ul.tabs {
  display: flex;
  justify-content: center;
  border: none;
  padding: 0;
  list-style: none;
  gap: 15px;
}

.woocommerce #content div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce-page #content div.product .woocommerce-tabs ul.tabs li,
.woocommerce-page div.product .woocommerce-tabs ul.tabs li {
  padding: 5px 15px;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--digi-primary-color);
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  position: relative;
  overflow: hidden;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li:hover,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background: var(--digi-primary-color);
  color: #ffffff;
  border-color: var(--digi-primary-color);
  border-bottom-color: #cfc8d8;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li:hover a,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: #ffffff;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce div.product .woocommerce-tabs ul.tabs li::before {
  display: none;
}
.woocommerce-Tabs-panel {
  padding: 20px;
  animation: fadeIn 0.3s ease-in-out;
}

/* 10.1 Animations 
   - Micro-interactions and transitions
-------------------------------------------------------------- */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 9.1 Related Products 
   - Upsell and cross sell products section heading
-------------------------------------------------------------- */

.single-product .up-sells.upsells {
  padding-bottom: 50px;
}

.single-product .related.products h2,
.single-product .up-sells.upsells.products h2,
.cross-sells h2 {
  padding-bottom: 20px;
}

/* 10. Media Query 
   - All media query here
-------------------------------------------------------------- */
.digi-product-thumb-slider {
  position: relative;
}

.digi-product-thumb-slider .woocommerce-product-gallery__image,
.digi-product-thumb-slider .woocommerce-product-gallery__image img {
  height: 100% !important;
  object-fit: cover;
}

.digi-product-thumb-slider .swiper-button-prev:after,
.digi-product-thumb-slider .swiper-button-next:after {
  font-size: 16px;
  color: #000000;
  transition: all 0.4s ease-in-out;
}

.digi-product-thumb-slider .swiper-button-next {
  right: -50px;
  transition: all 0.4s ease-in-out;
}
.digi-product-thumb-slider .swiper-button-prev {
  left: -50px;
  transition: all 0.4s ease-in-out;
}

.digi-product-thumb-slider:hover .swiper-button-next {
  right: 10px;
}

.digi-product-thumb-slider:hover .swiper-button-prev {
  left: 10px;
}

.digi-product-slider.left-thumb .digi-product-thumb-slider .swiper-button-next,
.digi-product-slider.left-thumb .digi-product-thumb-slider .swiper-button-prev {
  display: none;
}

@media all and (min-width: 992px) {
  .digi-product-slider.left-thumb,
  .digi-product-slider.right-thumb {
    display: flex;
    flex-direction: row-reverse;
    gap: 10px;
  }

  .digi-product-slider.right-thumb {
    flex-direction: row;
  }

  .digi-product-slider.left-thumb .digi-product-main-slider,
  .digi-product-slider.right-thumb .digi-product-main-slider {
    width: 80%;
    flex-grow: 1;
  }

  .digi-product-slider.left-thumb .digi-product-thumb-slider,
  .digi-product-slider.right-thumb .digi-product-thumb-slider {
    width: 20%;
  }

  .digi-product-slider.left-thumb .single-product-gallery-thumb,
  .digi-product-slider.right-thumb .single-product-gallery-thumb {
    width: 100%;
    height: 100%;
    margin-top: 0;
  }

  .digi-product-slider.left-thumb .woocommerce-product-gallery__image,
  .digi-product-slider.right-thumb .woocommerce-product-gallery__image {
    height: 100%;
  }

  .digi-product-slider.left-thumb
    .woocommerce-product-gallery__image
    .wp-post-image,
  .digi-product-slider.right-thumb
    .woocommerce-product-gallery__image
    .wp-post-image,
  .digi-product-thumb-slider .woocommerce-product-gallery__image,
  .digi-product-thumb-slider .woocommerce-product-gallery__image img {
    height: 100% !important;
    object-fit: cover;
  }

  .woocommerce-product-gallery .digi-product-slider {
    overflow: hidden;
  }
}

.single-product .product-type-variable .variations_form.cart table {
  border: none;
  position: relative;
  margin: 0 !important;
}

.single-product .product-type-variable .variations_form.cart table tr {
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
}

.single-product
  .product-type-variable
  .variations_form.cart
  table
  tr:last-child {
  margin: 0;
}

.single-product .product-type-variable .variations_form.cart table tr select {
  border: 1px solid var(--digi-border-color);
  padding: 6px 15px;
  border-radius: 3px;
  background-color: #fff;
  font-size: var(--font-size-normal);
  transition: all 0.3s ease;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
}

.single-product .product-type-variable .variations_form.cart table tr th {
  min-width: 120px;
}

.single-product .product-type-variable .variations_form.cart table tr td.label {
  width: 100%;
  margin-bottom: 5px !important;
}

.single-product .product-type-variable .variations_form.cart table tr td {
  width: 100%;
  border: none;
  padding: 0;
  text-align: left;
}

.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product .stock {
  color: var(--digi-success-color);
}

/**
* Responsive Styles
*---------------------------------*/

@media all and (max-width: 767px) {
  .woocommerce #content div.product .woocommerce-tabs ul.tabs li,
  .woocommerce div.product .woocommerce-tabs ul.tabs li,
  .woocommerce-page #content div.product .woocommerce-tabs ul.tabs li,
  .woocommerce-page div.product .woocommerce-tabs ul.tabs li {
    border: none;
    border-radius: 3px;
  }
}