/*
Theme Name: OceanWP Child Theme
Theme URI: https://oceanwp.org/
Description: OceanWP WordPress theme. Sample child theme.
Author: OceanWP
Author URI: https://oceanwp.org/
Template: oceanwp
Version: 1.0
*/

/* Parent stylesheet should be loaded from functions.php not using @import */


.sales-order-container .sales-order-sections-selector {
  padding: 20px 0;
  display: flex;
  gap: 20px;
}


@media only screen and (max-width:47.9375em) {
	
	.sales-order-sections-selector {
        flex-wrap: wrap !important;
		gap: 10px;
		row-gap: 10px;
		padding: 10px 0;
		justify-content: space-between;
    }
	
	.sales-order-sections-selector .section-line {
		flex: 1;
	}

}

.sales-order-container .sales-order-sections-selector .section-line {
  display: inline-block;
}



.sales-order-container #wso-sections #wso-marketing {
  display: none;
}
.sales-order-container #wso-sections #wso-displays {
  display: none;
}

.sales-order-container #wso-sections .active-section {
	display: block !important;
}

.sales-order-container #wso-sections .active-section.board-section {
	display: flex !important;
}


.sales-order-container #wso-sections .board-section {
  display: none;
  gap: 20px;
  flex-wrap: no-wrap;
}
.sales-order-container #wso-sections .board-section.active {
	display: flex;
}
.sales-order-container #wso-sections .board-section .wso-type-section-left {
  flex-basis: 25%;
}
.sales-order-container #wso-sections .board-section .wso-type-section-left img {
  width: 100% !important;
}
.sales-order-container #wso-sections .board-section .wso-type-section-right {
  flex-basis: 75%;
}
.sales-order-container #wso-sections .board-section .wso-type-section-right .sub-section:not(:first-of-type) {
  padding: 20px 0px;
}
.sales-order-container #wso-sections .board-section .wso-type-section-right .sub-section .sub-section-label {
  font-weight: 700;
}
.sales-order-container #wso-sections table {
  width: 100%;
}
.sales-order-container #wso-sections table tbody tr td:last-of-type {
  text-align: right;
	width: 200px;
}

.sales-order-container #wso-sections table tbody tr td.uds-sales-price {
	width: 100px;
}

.sales-order-container #wso-sections table tbody tr td.uds-sales-quantity, .sales-order-container #wso-sections table tbody tr td.uds-sales-image {
	width: 150px;
}


/* Sales Card Layout Components */
.uds-sales-item-tabular {
  display: flex;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid rgb(0, 0, 0);
}
.uds-sales-item-tabular .sales-item-image {
  display: none;
}
.uds-sales-item-tabular .sales-item-name {
  flex: 1;
  padding: 10px;
  padding-left: 0px;
}
.uds-sales-item-tabular .sales-item-qty {
  flex: 0 0 150px;
  padding: 10px;
}
.uds-sales-item-tabular .uds-sales-price {
  flex: 0 0 100px;
  padding: 10px;
}
.uds-sales-item-tabular .uds-sales-add {
  text-align: right;
  flex: 0 0 200px;
  padding: 10px;
}

.sub-section-product-cards {
  display: grid;
  gap: 16px;
  padding: 10px 0px;
}
@media (min-width: 1025px) {
  .sub-section-product-cards {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .sub-section-product-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 767px) {
  .sub-section-product-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
.sub-section-product-cards .uds-sales-item .sales-item-image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.sub-section-product-cards .uds-sales-item .sales-item-details {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  row-gap: 10px;
  padding: 10px 0px;
}
.sub-section-product-cards .uds-sales-item .sales-item-details h5 {
  flex: 1 1 100%;
  margin-bottom: 0px;
  text-align: center;
}
.sub-section-product-cards .uds-sales-item .sales-item-details .sales-item-qty-price {
  flex: 1 1 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 10px;
}
.sub-section-product-cards .uds-sales-item .sales-item-details .sales-item-qty-price .sales-item-qty {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.sub-section-product-cards .uds-sales-item .sales-item-details .sales-item-qty-price .sales-item-price {
  text-align: right;
}
.sub-section-product-cards .uds-sales-item .sales-item-details .sales-item-add {
  text-align: left;
  flex: 1 1 100%;
}
.sub-section-product-cards .uds-sales-item .sales-item-details .sales-item-add .button {
  width: 100%;
  min-width: 100%;
}