/*
  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. PRODUCT SLIDER ....................... Main image slider and thumbnail navigation
  11. 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,
.digi-quick-view-modal .product_title {
  font-size: var(--font-size-h3);
  font-weight: bold;
  color: var(--digi-title-color);
}

.woocommerce div.product form.cart,
.digi-quick-view-modal form.cart {
  margin: 20px 0;
}

.woocommerce div.product form.cart.grouped_form,
.digi-quick-view-modal form.cart.grouped_form {
  margin: 0;
}

.single-product .entry-summary .price,
.digi-quick-view-modal .entry-summary .price,
.single-product .entry-summary .woocommerce-variation-price .price,
.digi-quick-view-modal .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,
.digi-quick-view-modal .entry-summary .price del,
.single-product .entry-summary .woocommerce-variation-price del,
.digi-quick-view-modal .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,
.digi-quick-view-modal .entry-summary .price del::before,
.single-product .entry-summary .woocommerce-variation-price del::before,
.digi-quick-view-modal .entry-summary .woocommerce-variation-price del::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,
.digi-quick-view-modal .price ins,
.single-product .woocommerce-variation-price ins,
.digi-quick-view-modal .woocommerce-variation-price ins {
  text-decoration: none;
}

.digi-quick-view-modal form.cart .reset_variations {
  font-size: 0.83em;
}

/* 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,
.digi-quick-view-modal .cart {
  display: flex;
}

.single-product .variations_form.cart,
.digi-quick-view-modal .variations_form.cart {
  display: block;
}

.single-product .grouped_form.cart,
.digi-quick-view-modal .grouped_form.cart {
  display: block;
}

.single-product .woocommerce-grouped-product-lis .product_type_grouped,
.digi-quick-view-modal .woocommerce-grouped-product-lis .product_type_grouped {
  margin-right: 36px;
}

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

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

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

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

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

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

.single-product div.product form.cart .button,
.digi-quick-view-modal form.cart .button {
  width: 100%;
  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);
}
.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);
}

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

.single-product.woocommerce div.product p.stock.out-of-stock,
.digi-quick-view-modal 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,
.digi-quick-view-modal .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,
.digi-quick-view-modal form.cart .variations select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 14px;
  background: #fff;
  cursor: pointer;
}
.single-product div.product form.cart .variations select:focus,
.digi-quick-view-modal form.cart .variations select:focus {
  border-color: var(--digi-primary-color, #0073aa);
  outline: none;
  box-shadow: 0 0 5px #ccc;
  border: 1px solid #dddddd;
  opacity: 1 !important;
}

.single-product div.product form.cart .variations tr:last-child select,
.digi-quick-view-modal 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;
  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;
}

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

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

.digi-product-slider .swiper-wrapper {
  height: inherit;
}

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

.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: 0;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  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 a {
  display: block;
  padding-left: 1em;
  padding-right: 1em;
}

.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;
}

/* 8.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.1 Product Slider 
   - Main image slider and thumbnail navigation
-------------------------------------------------------------- */

.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;
}

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

.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;
}

.digi-product-slider.left-thumb .digi-product-main-slider,
.digi-product-slider.right-thumb .digi-product-main-slider {
  position: relative;
}

/* 11. Media Query 
   - All media query here
-------------------------------------------------------------- */
@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,
.digi-quick-view-modal .variations_form.cart table {
  border: none;
  position: relative;
  margin: 0 !important;
  width: 100%;
}

.single-product .product-type-variable .variations_form.cart table tr,
.digi-quick-view-modal .variations_form.cart table tr {
  margin-bottom: 10px;
  display: block;
  flex-wrap: wrap;
}

.single-product
  .product-type-variable
  .variations_form.cart
  table
  tr:last-child,
.digi-quick-view-modal .variations_form.cart table tr:last-child {
  margin: 0;
}

.single-product .product-type-variable .variations_form.cart table tr select,
.digi-quick-view-modal .variations_form.cart table tr select {
  border: 1px solid var(--digi-border-color);
  padding: 10px 14px;
  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,
.digi-quick-view-modal .variations_form.cart table tr th {
  min-width: 120px;
  vertical-align: top;
}

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

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

.woocommerce div.product form.cart .variations label,
.digi-quick-view-modal form.cart .variations label {
  display: block;
  height: 100%;
}

.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product .stock,
.digi-quick-view-modal .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;
  }

  /* Single Page */
  .woocommerce div.product .woocommerce-tabs ul.tabs {
    width: 100%;
    padding: 0;
  }

  .woocommerce div.product .woocommerce-tabs .tabs-panel-container {
    width: 100%;
  }

  .woocommerce #content div.product .woocommerce-tabs,
  .woocommerce div.product .woocommerce-tabs,
  .woocommerce-page #content div.product .woocommerce-tabs,
  .woocommerce-page div.product .woocommerce-tabs {
    display: block;
  }

  .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 {
    width: 100%;
  }
  .woocommerce-tabs ul.tabs {
    flex-wrap: wrap;
    gap: 10px;
  }

  .single-product .product-type-variable .variations_form.cart table tr th,
  .digi-quick-view-modal .variations_form.cart table tr th {
    min-width: 90px;
  }
}