/* ==========================================================================
   MathB Events Theme
   WooCommerce
   ========================================================================== */

/* ==========================================================================
   General Layout
   ========================================================================== */

.woocommerce {

    color: var(--mathb-text);

}

.woocommerce-page .site-main {

    padding-block: var(--mathb-section-padding);

}

.woocommerce .woocommerce-breadcrumb {

    margin-bottom: 2rem;

    color: var(--mathb-text-light);

    font-size: .9rem;

}

.woocommerce .woocommerce-breadcrumb a {

    color: inherit;

}

.woocommerce .woocommerce-breadcrumb a:hover {

    color: var(--mathb-primary);

}

/* ==========================================================================
   Shop Grid
   ========================================================================== */

.woocommerce ul.products {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px,1fr));

    gap: 2rem;

    margin: 0;

    padding: 0;

    list-style: none;

}

.woocommerce ul.products li.product {

    margin: 0;

    padding: 0;

    width: auto;

    float: none;

}

/* ==========================================================================
   Product Card
   ========================================================================== */

.woocommerce ul.products li.product {

    overflow: hidden;

    background: var(--mathb-white);

    border-radius: var(--mathb-radius-xl);

    box-shadow: var(--mathb-shadow-sm);

    transition:
        transform var(--mathb-transition),
        box-shadow var(--mathb-transition);

}

.woocommerce ul.products li.product:hover {

    transform: translateY(-8px);

    box-shadow: var(--mathb-shadow-lg);

}

/* ==========================================================================
   Product Image
   ========================================================================== */

.woocommerce ul.products li.product img {

    margin: 0;

    width: 100%;

    aspect-ratio: 1;

    object-fit: cover;

    transition: transform .6s ease;

}

.woocommerce ul.products li.product:hover img {

    transform: scale(1.05);

}

/* ==========================================================================
   Product Information
   ========================================================================== */

.woocommerce ul.products li.product .woocommerce-loop-product__title {

    padding: 1.75rem 2rem .5rem;

    color: var(--mathb-heading);

    font-size: 1.3rem;

}

.woocommerce ul.products li.product .price {

    display: block;

    padding: 0 2rem;

    color: var(--mathb-primary);

    font-size: 1.25rem;

    font-weight: var(--mathb-fw-bold);

}

.woocommerce ul.products li.product .button {

    margin: 2rem;

}

/* ==========================================================================
   Sale Badge
   ========================================================================== */

.woocommerce span.onsale {

    top: 1rem;

    left: 1rem;

    min-width: auto;

    min-height: auto;

    padding: .55rem 1rem;

    color: var(--mathb-white);

    background: var(--mathb-primary);

    border-radius: var(--mathb-radius-pill);

    font-size: .8rem;

    line-height: 1;

}

/* ==========================================================================
   Product Rating
   ========================================================================== */

.woocommerce .star-rating {

    margin: 1rem 2rem;

    color: var(--mathb-primary);

}

.woocommerce .woocommerce-review-link {

    color: var(--mathb-text-light);

    font-size: .9rem;

}

/* ==========================================================================
   Result Count
   ========================================================================== */

.woocommerce-result-count {

    margin-bottom: 2rem;

    color: var(--mathb-text-light);

}

/* ==========================================================================
   Ordering
   ========================================================================== */

.woocommerce-ordering {

    margin-bottom: 2rem;

}

.woocommerce-ordering select {

    min-width: 240px;

}

/* ==========================================================================
   Pagination
   ========================================================================== */

.woocommerce nav.woocommerce-pagination {

    margin-top: 4rem;

}

.woocommerce nav.woocommerce-pagination ul {

    display: flex;

    justify-content: center;

    gap: .75rem;

    padding: 0;

    border: 0;

}

.woocommerce nav.woocommerce-pagination ul li {

    border: 0;

}

.woocommerce nav.woocommerce-pagination ul li span,
.woocommerce nav.woocommerce-pagination ul li a {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 46px;

    height: 46px;

    border-radius: 50%;

    background: var(--mathb-light);

}

.woocommerce nav.woocommerce-pagination ul li span.current {

    color: var(--mathb-white);

    background: var(--mathb-primary);

}

/* ==========================================================================
   Single Product
   ========================================================================== */

.single-product div.product {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 5rem;

    align-items: flex-start;

}

.single-product div.product .images {

    width: 100%;

    margin: 0;

}

.single-product div.product .summary {

    width: 100%;

    margin: 0;

}

/* ==========================================================================
   Product Gallery
   ========================================================================== */

.woocommerce-product-gallery {

    position: relative;

}

.woocommerce-product-gallery__wrapper {

    overflow: hidden;

    border-radius: var(--mathb-radius-xl);

}

.woocommerce-product-gallery__image img {

    width: 100%;

    border-radius: var(--mathb-radius-xl);

}

.flex-control-thumbs {

    display: flex;

    gap: 1rem;

    margin-top: 1.5rem;

    padding: 0;

    list-style: none;

}

.flex-control-thumbs li {

    flex: 1;

}

.flex-control-thumbs img {

    border-radius: var(--mathb-radius-md);

    cursor: pointer;

    transition:
        opacity var(--mathb-transition),
        transform var(--mathb-transition);

}

.flex-control-thumbs img:hover {

    opacity: .85;

    transform: scale(1.03);

}

/* ==========================================================================
   Product Summary
   ========================================================================== */

.single-product .product_title {

    margin-bottom: 1rem;

}

.single-product .price {

    margin-bottom: 2rem;

    color: var(--mathb-primary);

    font-size: 2rem;

    font-weight: var(--mathb-fw-bold);

}

.single-product .woocommerce-product-details__short-description {

    margin-bottom: 2rem;

}

.single-product form.cart {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 1rem;

    margin-bottom: 2rem;

}

/* ==========================================================================
   Quantity
   ========================================================================== */

.woocommerce .quantity input.qty {

    width: 90px;

    min-height: var(--mathb-button-height);

    text-align: center;

}

/* ==========================================================================
   Product Meta
   ========================================================================== */

.product_meta {

    display: flex;

    flex-direction: column;

    gap: .75rem;

    margin-top: 2rem;

    padding-top: 2rem;

    border-top: 1px solid var(--mathb-border);

    color: var(--mathb-text-light);

    font-size: .95rem;

}

.product_meta a {

    color: var(--mathb-primary);

}

/* ==========================================================================
   Product Tabs
   ========================================================================== */

.woocommerce-tabs {

    margin-top: 6rem;

}

.woocommerce-tabs ul.tabs {

    display: flex;

    gap: 1rem;

    margin: 0 0 3rem;

    padding: 0;

    border: 0;

}

.woocommerce-tabs ul.tabs::before,
.woocommerce-tabs ul.tabs::after {

    display: none;

}

.woocommerce-tabs ul.tabs li {

    margin: 0;

    padding: 0;

    border: 0;

    background: transparent;

}

.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after {

    display: none;

}

.woocommerce-tabs ul.tabs li a {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 48px;

    padding: .85rem 1.5rem;

    color: var(--mathb-heading);

    background: var(--mathb-light);

    border-radius: var(--mathb-radius-pill);

    transition:
        background var(--mathb-transition),
        color var(--mathb-transition);

}

.woocommerce-tabs ul.tabs li.active a {

    color: var(--mathb-white);

    background: var(--mathb-primary);

}

.woocommerce-Tabs-panel {

    padding: 2rem 0;

}

/* ==========================================================================
   Additional Information
   ========================================================================== */

.woocommerce-product-attributes {

    border: 0;

}

.woocommerce-product-attributes th {

    width: 220px;

}

/* ==========================================================================
   Reviews
   ========================================================================== */

#reviews {

    margin-top: 1rem;

}

.commentlist {

    margin: 0;

    padding: 0;

    list-style: none;

}

.commentlist li {

    margin-bottom: 2rem;

}

.comment_container {

    display: flex;

    gap: 1.5rem;

}

.comment_container img.avatar {

    border-radius: 50%;

}

.comment-text {

    flex: 1;

}

/* ==========================================================================
   Related Products / Upsells
   ========================================================================== */

.related,
.up-sells {

    margin-top: 6rem;

}

.related > h2,
.up-sells > h2 {

    margin-bottom: 2rem;

}

.related ul.products,
.up-sells ul.products {

    margin-top: 2rem;

}

/* ==========================================================================
   Cart Layout
   ========================================================================== */

.woocommerce-cart .woocommerce {

    display: grid;

    grid-template-columns: 2fr 1fr;

    gap: 3rem;

    align-items: start;

}

/* ==========================================================================
   Cart Table
   ========================================================================== */

.shop_table {

    width: 100%;

    border-collapse: collapse;

}

.shop_table th {

    padding: 1.25rem;

    text-align: left;

    color: var(--mathb-heading);

    border-bottom: 2px solid var(--mathb-border);

}

.shop_table td {

    padding: 1.5rem 1.25rem;

    vertical-align: middle;

    border-bottom: 1px solid var(--mathb-border);

}

.shop_table img {

    width: 90px;

    border-radius: var(--mathb-radius-md);

}

.shop_table .product-name a {

    color: var(--mathb-heading);

    font-weight: var(--mathb-fw-semibold);

}

.shop_table .product-name a:hover {

    color: var(--mathb-primary);

}

/* ==========================================================================
   Remove Product
   ========================================================================== */

.product-remove a {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 34px;

    height: 34px;

    color: var(--mathb-danger);

    border-radius: 50%;

    transition:
        background var(--mathb-transition),
        color var(--mathb-transition);

}

.product-remove a:hover {

    color: var(--mathb-white);

    background: var(--mathb-danger);

}

/* ==========================================================================
   Coupon
   ========================================================================== */

.coupon {

    display: flex;

    gap: 1rem;

    margin-top: 2rem;

}

.coupon input {

    flex: 1;

}

/* ==========================================================================
   Cart Actions
   ========================================================================== */

.actions {

    padding-top: 2rem;

}

.actions .button {

    margin-left: .75rem;

}

/* ==========================================================================
   Cart Totals
   ========================================================================== */

.cart-collaterals {

    position: sticky;

    top: calc(var(--mathb-header-height) + 2rem);

}

.cart_totals {

    padding: 2rem;

    background: var(--mathb-light);

    border-radius: var(--mathb-radius-xl);

}

.cart_totals h2 {

    margin-bottom: 2rem;

}

.cart_totals table {

    margin-bottom: 2rem;

}

.cart_totals td,
.cart_totals th {

    padding: 1rem 0;

}

/* ==========================================================================
   Checkout Layout
   ========================================================================== */

.woocommerce-checkout form.checkout {

    display: grid;

    grid-template-columns: 2fr 1fr;

    gap: 4rem;

    align-items: start;

}

/* ==========================================================================
   Checkout Sections
   ========================================================================== */

.woocommerce-billing-fields,
.woocommerce-shipping-fields,
.woocommerce-additional-fields {

    margin-bottom: 3rem;

}

.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3,
.woocommerce-additional-fields h3 {

    margin-bottom: 2rem;

}

/* ==========================================================================
   Order Review
   ========================================================================== */

#order_review {

    padding: 2rem;

    background: var(--mathb-light);

    border-radius: var(--mathb-radius-xl);

}

#order_review_heading {

    margin-bottom: 2rem;

}

/* ==========================================================================
   Payment Methods
   ========================================================================== */

.woocommerce-checkout-payment {

    margin-top: 2rem;

}

.wc_payment_methods {

    margin: 0 0 2rem;

    padding: 0;

    list-style: none;

}

.wc_payment_methods li {

    margin-bottom: 1rem;

    padding: 1.25rem;

    background: var(--mathb-white);

    border: 1px solid var(--mathb-border);

    border-radius: var(--mathb-radius-lg);

}

.wc_payment_methods label {

    margin-left: .5rem;

    font-weight: var(--mathb-fw-semibold);

}

.payment_box {

    margin-top: 1rem;

    padding: 1rem;

    background: var(--mathb-light);

    border-radius: var(--mathb-radius-md);

}

/* ==========================================================================
   Checkout Login / Coupon
   ========================================================================== */

.woocommerce-form-login-toggle,
.woocommerce-form-coupon-toggle {

    margin-bottom: 2rem;

}

.woocommerce-info {

    border-top-color: var(--mathb-primary);

}

/* ==========================================================================
   Place Order
   ========================================================================== */

#place_order {

    width: 100%;

}

/* ==========================================================================
   Order Received
   ========================================================================== */

.woocommerce-order {

    max-width: 900px;

    margin: 0 auto;

}

.woocommerce-order-overview {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(180px,1fr));

    gap: 1.5rem;

    margin: 3rem 0;

    padding: 2rem;

    list-style: none;

    background: var(--mathb-light);

    border-radius: var(--mathb-radius-xl);

}

.woocommerce-order-overview li {

    margin: 0;

}

.woocommerce-order-overview strong {

    display: block;

    margin-top: .5rem;

    color: var(--mathb-heading);

}

/* ==========================================================================
   Order Details
   ========================================================================== */

.woocommerce-order-details,
.woocommerce-customer-details {

    margin-top: 4rem;

}

.woocommerce-order-details h2,
.woocommerce-customer-details h2 {

    margin-bottom: 2rem;

}

/* ==========================================================================
   My Account
   ========================================================================== */

.woocommerce-account .woocommerce {

    display: grid;

    grid-template-columns: 280px 1fr;

    gap: 3rem;

    align-items: start;

}

/* ==========================================================================
   Account Navigation
   ========================================================================== */

.woocommerce-MyAccount-navigation ul {

    margin: 0;

    padding: 0;

    list-style: none;

    background: var(--mathb-light);

    border-radius: var(--mathb-radius-xl);

    overflow: hidden;

}

.woocommerce-MyAccount-navigation li {

    margin: 0;

}

.woocommerce-MyAccount-navigation a {

    display: block;

    padding: 1rem 1.5rem;

    color: var(--mathb-heading);

    transition:
        background var(--mathb-transition),
        color var(--mathb-transition);

}

.woocommerce-MyAccount-navigation a:hover {

    color: var(--mathb-primary);

    background: rgba(214,177,106,.08);

}

.woocommerce-MyAccount-navigation .is-active a,
.woocommerce-MyAccount-navigation .is-active {

    background: var(--mathb-primary);

}

.woocommerce-MyAccount-navigation .is-active a {

    color: var(--mathb-white);

}

/* ==========================================================================
   Account Content
   ========================================================================== */

.woocommerce-MyAccount-content {

    min-width: 0;

}

.woocommerce-MyAccount-content h2 {

    margin-bottom: 2rem;

}

/* ==========================================================================
   Dashboard
   ========================================================================== */

.woocommerce-account .woocommerce-message {

    margin-bottom: 2rem;

}

/* ==========================================================================
   Downloads
   ========================================================================== */

.woocommerce-MyAccount-downloads {

    width: 100%;

}

/* ==========================================================================
   Addresses
   ========================================================================== */

.woocommerce-Addresses {

    display: grid;

    gap: 2rem;

}

.woocommerce-Address {

    padding: 2rem;

    background: var(--mathb-light);

    border-radius: var(--mathb-radius-xl);

}

.woocommerce-Address-title {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 2rem;

}

/* ==========================================================================
   Login / Register
   ========================================================================== */

.woocommerce-account .u-columns {

    display: grid;

    grid-template-columns: repeat(2,1fr);

    gap: 3rem;

}

/* ==========================================================================
   Notices
   ========================================================================== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {

    margin-bottom: 2rem;

    padding: 1rem 1.5rem;

    border-radius: var(--mathb-radius-lg);

    border-top-width: 4px;

    box-shadow: var(--mathb-shadow-sm);

}

.woocommerce-message {

    border-top-color: var(--mathb-success);

}

.woocommerce-info {

    border-top-color: var(--mathb-primary);

}

.woocommerce-error {

    border-top-color: var(--mathb-danger);

}

/* ==========================================================================
   Empty Cart
   ========================================================================== */

.woocommerce-cart .cart-empty {

    margin-bottom: 2rem;

    text-align: center;

    font-size: 1.25rem;

}

/* ==========================================================================
   Password Strength
   ========================================================================== */

.woocommerce-password-strength {

    margin-top: .75rem;

    padding: .75rem 1rem;

    border-radius: var(--mathb-radius-md);

}

.woocommerce-password-strength.strong {

    color: var(--mathb-success);

    background: rgba(34,197,94,.10);

}

.woocommerce-password-strength.good {

    color: var(--mathb-warning);

    background: rgba(245,158,11,.10);

}

.woocommerce-password-strength.bad {

    color: var(--mathb-danger);

    background: rgba(239,68,68,.10);

}

/* ==========================================================================
   Select2
   ========================================================================== */

.select2-container .select2-selection--single {

    min-height: 54px;

    border-radius: var(--mathb-radius-md);

}

.select2-container--default .select2-selection--single {

    border-color: var(--mathb-border);

}

/* ==========================================================================
   End
   ========================================================================== */