/**
 * WooCommerce Styles
 * 
 * Table of Contents:
 * 1. Global Elements
 * 2. Forms & Inputs
 * 3. Buttons
 * 4. Pagination
 * 5. Tables
 * 6. Single Product Page
 * 7. Product Tabs
 * 8. Product Grid/Cards
 * 9. Product Image Effects
 * 10. YITH Request a Quote
 * 11. Quantity Selector
 * 12. Archive Pages
 * 13. Breadcrumbs
 * 14. Cart Icon
 */

/* ============================================================================
   1. Global Elements
   ============================================================================ */

/* Hide ordering dropdown */
.woocommerce-ordering,
.woocommerce .woocommerce-ordering,
form.woocommerce-ordering,
select.orderby {
    display: none !important;
}

/* Hide SKU */
.sku_wrapper {
    display: none!important;
}

/* Info notices */
.woocommerce-info {
    background-color: var(--primary)!important;
    color: #ffffff;
}

/* Sale badge */
.woocommerce span.onsale {
    background-color: var(--primary)!important;
}

/* Result count */
.woocommerce-result-count {
    padding: 0 !important;
	margin: 0!important;
}

.tax-product_brand .woocommerce-result-count {
    margin-bottom: 1rem!important;
}

/* Related products CTA */
.related-products-cta {
    margin-top: var(--space);
    text-align: center;
}

.related.products h2 {
    text-align: center;
    margin-bottom: 2rem;
    text-transform: capitalize;
}

/* Product Gallery Magnifier */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
    z-index: 1!important;
}

/* ============================================================================
   2. Forms & Inputs
   ============================================================================ */

.woocommerce form .form-row .input-text, 
.woocommerce form .form-row select {
    font-family: inherit;
    font-weight: 400;
    letter-spacing: normal;
    padding: .5em;
    display: block;
    background-color: transparent!important;
    border: 1px solid var(--primary)!important;
    border-radius: 0!important;
    color: var(--text)!important;
}

/* ============================================================================
   3. Buttons
   ============================================================================ */

.woocommerce #respond input#submit, 
.woocommerce a.button, 
.woocommerce button.button:not(.form-button), 
.woocommerce input.button {
    background-color: rgba(128, 164, 191, 0)!important;
    color: var(--black)!important;
    font-weight: 300!important;
    min-width: 190px!important;
    font-size: 0.9375rem!important;
    text-align: center!important;
    text-transform: uppercase!important;
    border: 1px solid var(--primary)!important;
    border-radius: 0px!important;
    padding: 0.5em 1.75em!important;
}

.woocommerce #respond input#submit:hover, 
.woocommerce a.button:hover, 
.woocommerce button.button:hover, 
.woocommerce input.button:hover {
    background-color: var(--primary-hover)!important;
    color: var(--white)!important;
}

/* ============================================================================
   4. Pagination
   ============================================================================ */

.woocommerce nav.woocommerce-pagination ul {
    border: none;
    display: flex;
    justify-content: end;
    column-gap: 0.5rem;
}

.woocommerce nav.woocommerce-pagination ul li {
    border: 1px solid var(--primary);
}

.woocommerce nav.woocommerce-pagination ul li a, 
.woocommerce nav.woocommerce-pagination ul li span {
    padding: 0.5rem 0.75rem!important;
}

.woocommerce nav.woocommerce-pagination ul li a:focus, 
.woocommerce nav.woocommerce-pagination ul li a:hover, 
.woocommerce nav.woocommerce-pagination ul li span.current {
    background: var(--primary)!important;
    color: var(--white)!important;
}

/* ============================================================================
   5. Tables
   ============================================================================ */

.woocommerce table.shop_table th {
    font-weight: 400!important;
    background-color: var(--primary)!important;
    color: var(--white)!important;
}

/* ============================================================================
   6. Single Product Page
   ============================================================================ */

/* Product title */
body .product_title.entry-title {
    font-size: var(--text-l);
    text-transform: none;
}

/* Product meta */
body .product_meta {
    border-top: none;
    padding-top: 1rem;
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
    column-gap: 0.75rem;
    row-gap: 0.25rem;
}

@media screen and (max-width: 782px) {
    body .product_meta {
        flex-wrap: wrap;
    }
}

body .product_meta .posted_in {
    margin: 0;
}

body .product_meta .meta-separator {
    margin: 0;
}

/* Keep custom product meta line on heading scale (override WooCommerce % sizing). */
body.single-product h3.product_meta {
    font-size: var(--text-m) !important;
    line-height: 1.2em;
    font-weight: normal;
    text-transform: none;
}

body.single-product h3.product_meta a {
    text-decoration: none;
}

body.single-product h3.product_meta a:hover,
body.single-product h3.product_meta a:focus {
    text-decoration: underline;
}

/*
 * Gallery (#wpgs-gallery) + .summary follow WooCommerce floats, but the plugin gallery
 * is not inside div.images. Floated columns then give #product ~zero in-flow height, so
 * the next section (related products) starts at the top and overlaps — not position:absolute.
 * flow-root restores height so following .boxed-container stacks below.
 */
body.single-product div.product.type-product {
	display: flow-root;
}

/* Product summary/ Product image gallery */

@media (max-width: 782px) {
    .woocommerce-page div.product div.summary {
        margin-bottom: 0!important;
    }

    div#wpgs-gallery {
        margin-bottom: var(--space-15x) !important;
    }
}

/* Override plugin-injected desktop gap/width math to use theme spacing token. */
@media (min-width: 783px) {
    #wpgs-gallery.wcgs-woocommerce-product-gallery {
        margin-right: var(--space-15x) !important;
    }

    .woocommerce-page div.product div.summary {
        max-width: calc(60% - var(--space-15x)) !important;
    }
}

/* Product image gallery fixed height */
:root {
    --woo_gallery_desktop_height: 40vw;
    --woo_gallery_desktop_max_height: 40rem;

    --woo_gallery_mobile_height: 30rem;
    --woo_gallery_mobile_max_height: 100vw;
}

figure.woocommerce-product-gallery__wrapper {
    height: var(--woo_gallery_desktop_height) !important;
    max-height: var(--woo_gallery_desktop_max_height) !important;
}

figure.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image {
    height: 100% !important;
    object-fit: contain;
}

figure.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:not(:hover) img {
    height: var(--woo_gallery_desktop_height) !important;
    max-height: var(--woo_gallery_desktop_max_height) !important;
    object-fit: contain;
    object-position: top;
}

@media (max-width: 768px) {
    figure.woocommerce-product-gallery__wrapper {
        height: var(--woo_gallery_mobile_height) !important;
        max-height: var(--woo_gallery_mobile_max_height) !important;
    }

    figure.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image {
        height: 100% !important;
        object-fit: contain;
    }

    figure.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image:not(:hover) img {
        height: var(--woo_gallery_mobile_height) !important;
        max-height: var(--woo_gallery_mobile_max_height) !important;
        object-fit: contain;
        object-position: top;
    }
}


/* CTA buttons container */
.summary-cta-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2rem;
    align-items: start;
}

.summary-cta-buttons .clear {
    display: none!important;
}

/* ============================================================================
   7. Product Tabs
   ============================================================================ */

/* Tabs wrapper */
body .woocommerce-tabs.wc-tabs-wrapper {
    margin-top: 2rem;
}

/* Tab navigation */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    margin: 0 0 1rem!important;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Individual tab */
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    background-color: var(--white)!important;
    margin: 0;
    border-radius: 0;
    border-width: 1px!important;
    border-color: #707070!important;
    min-width: 112px;
    line-height: 1.3;
}

/* Tab link */
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    padding: .25em 0!important;
    color: var(--text)!important;
    font-weight: 300!important;
    display: block;
    text-align: center;
}

/* Tab hover state */
.woocommerce div.product .woocommerce-tabs ul.tabs li:hover {
    background: var(--primary)!important;
    color: var(--white)!important;
    border-color: var(--primary)!important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li:hover a {
    color: var(--white)!important;
}

/* Active tab */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
    background: var(--primary)!important;
    color: var(--white)!important;
    border-color: var(--primary)!important;
    border-bottom-color: var(--primary)!important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--white)!important;
}

/* Tab panels - prevent FOUC (Flash of Unstyled Content) */
.woocommerce-tabs .woocommerce-Tabs-panel {
    display: none;
}

.woocommerce-tabs .woocommerce-Tabs-panel.active,
.woocommerce-tabs .woocommerce-Tabs-panel:first-child {
    display: block;
}

/* Tab panel content */
.woocommerce div.product .woocommerce-tabs .panel {
    font-style: italic;
}

/* Hide H2 headings from tab panels */
body .woocommerce-Tabs-panel h2 {
    display: none!important;
}

/* ============================================================================
   8. Product Grid/Cards
   ============================================================================ */

/* Product card shadow */
.woocommerce ul.products li.product, 
.woocommerce-page ul.products li.product {
    box-shadow: 0px 5px 10px #0000004D;
}

/* Product grid spacing */
.wc-columns-container .products, 
.woocommerce .related ul.products, 
.woocommerce .up-sells ul.products {
    grid-gap: 15px!important;
}

/* Product grid margin bottom */
.woocommerce .products ul, 
.woocommerce ul.products {
    margin-bottom: var(--space);
}

/* Product image wrapper */
.product-image-wrapper {
    position: relative;
}

.inside-wc-product-image {
    width: 100%;
    display: block!important;
    /* aspect-ratio: 1!important; */
    position: relative;
    aspect-ratio: 1!important;
    display: flex!important;
    flex-direction: column!important;
    justify-content: center!important;
    align-items: center!important;
}

.inside-wc-product-image img {
    height: unset!important;
}

.inside-wc-product-image img:not(.secondary-image) {
    object-fit: contain !important;
    /* height: 100% !important; */
    aspect-ratio: 527/395!important;
    object-position: center;
    filter: brightness(1.05);
}

.inside-wc-product-image img.secondary-image {
    object-fit: contain !important;
    /* height: 100% !important;
    aspect-ratio: 527/395!important; */
    object-position: center;
}

/* Multiple options badge for variable products */
.multiple-options-badge {
    width: 100%;
    text-align: left;
    position: absolute;
    bottom: 0px;
    left: 0;
    color: #000;
    padding: 0;
    font-size: 0.875rem;
    padding: 1rem;
    padding-bottom: 0.5rem;
    background: linear-gradient(to bottom, transparent, white);
}

/* Product card footer */
.custom-product-card-footer {
    margin-top: 0!important;
    padding: 1rem;
    border-top: 1px solid var(--primary);
    min-height: 5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Product title in loop */
.woocommerce-loop-product__title {
    margin-bottom: 0!important;
    font-size: var(--text-m)!important;
}

/* Product brand in loop */
.woocommerce-loop-product__brand {
    margin-top: 0.25rem!important;
    margin-bottom: 0!important;
}

/* ============================================================================
   9. Product Image Effects
   ============================================================================ */

/* Image hover effect container */
.wc-product-image {
    position: relative;
    overflow: hidden;
}

/* Primary image */
.inside-wc-product-image img {
    transition: opacity 0.3s ease;
    width: 100%;
    height: auto;
}

/* Secondary image (shown on hover) */
.inside-wc-product-image .secondary-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.wc-product-image:hover .secondary-image {
    opacity: 1;
}

.woocommerce-loop-product__link-wrapper {
    position: relative;
}

.woocommerce-loop-product__link-wrapper:hover .product-thumbnail-hover {
    opacity: 1 !important;
}

/* ============================================================================
   10. YITH Request a Quote
   ============================================================================ */

/* Product Images */
.woocommerce table.cart img {
    max-width: 180px;
}

/* Quote button styling */
.woocommerce .add-request-quote-button.button, 
.woocommerce .add-request-quote-button-addons.button, 
.yith-wceop-ywraq-button-wrapper .add-request-quote-button.button, 
.yith-wceop-ywraq-button-wrapper .add-request-quote-button-addons.button {
    background-color: rgba(128, 164, 191, 0)!important;
    color: var(--black)!important;
    font-weight: 300!important;
    min-width: 190px!important;
    font-size: 0.9375rem!important;
    text-align: center!important;
    text-transform: uppercase!important;
    border: 1px solid var(--primary)!important;
    border-radius: 0px!important;
    padding: 0.5em 1.75em!important;
}

/* Quote button hover */
.woocommerce .add-request-quote-button.button:hover, 
.woocommerce .add-request-quote-button-addons.button:hover, 
.yith-wceop-ywraq-button-wrapper .add-request-quote-button.button:hover, 
.yith-wceop-ywraq-button-wrapper .add-request-quote-button-addons.button:hover {
    background-color: var(--primary-hover)!important;
}

/* Quote button positioning */
.yith-ywraq-add-button.show {
    position: relative;
}

/* Hide default YITH spinner */
.yith-ywraq-add-button.show img.ajax-loading {
    display: none !important;
}

/* Custom CSS spinner - primary color by default */
.yith-ywraq-add-button.show::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    right: 10px;
    margin-top: -8px;
    border: 2px solid var(--primary);
    border-top-color: transparent;
    border-radius: 50%;
    animation: ywraq-spin 0.6s linear infinite;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, border-color 0.3s ease;
}

/* White spinner when button is hovered */
.yith-ywraq-add-button.show:hover::after {
    border-color: var(--white);
    border-top-color: transparent;
}

/* Show spinner when loading */
.yith-ywraq-add-button.show.loading::after {
    opacity: 1;
    visibility: visible;
}

/* Spinner animation */
@keyframes ywraq-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Quote links */
body .yith-ywraq-add-to-quote a, 
body .yith_ywraq_add_item_browse_message a {
    font-weight: 400!important;
    font-size: 0.9375rem!important;
}

/* Empty quote list message link */
.ywraq-wrapper p a {
    color: var(--primary-hover);
    text-decoration: underline;
    font-weight: 500;
}

.ywraq-wrapper p a:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

.yith-ywraq-add-button.show img {
    right: 5px!important;
    top: 50%!important;
    transform: translateY(-50%)!important;
}

/* Quote button mobile responsive */
@media (max-width: 767px) {
    .woocommerce .add-request-quote-button.button, 
    .woocommerce .add-request-quote-button-addons.button, 
    .yith-wceop-ywraq-button-wrapper .add-request-quote-button.button, 
    .yith-wceop-ywraq-button-wrapper .add-request-quote-button-addons.button,
    .yith-ywraq-add-to-quote {
        width: 100%!important;
    }
}

/* ============================================================================
   11. Quantity Selector
   ============================================================================ */

/* Quantity buttons */
.do-quantity-buttons form .quantity:not(.buttons-added):not(.hidden):after, 
.do-quantity-buttons form .quantity:not(.buttons-added):not(.hidden):before, 
.woocommerce form .quantity.buttons-added .minus, 
.woocommerce form .quantity.buttons-added .plus, 
.woocommerce form .quantity.buttons-added .qty {
    border: 1px solid var(--primary)!important;
    width: 30px!important;
    min-height: 30px!important;
}

.woocommerce form .quantity.buttons-added .qty::-webkit-outer-spin-button,
.woocommerce form .quantity.buttons-added .qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Quantity container */
body .quantity.buttons-added {
    display: flex;
    flex-direction: row;
    gap: 0.05rem;
}

@media (max-width: 768px) {
    body .quantity.buttons-added {
        flex-direction: row;
    }
}

/* ============================================================================
   12. Archive Pages
   ============================================================================ */

/* Archive product section heading */
.archive-products-heading {
    text-align: center;
    margin-bottom: 2rem;
}

/* Archive banner - image set to bottom (100%) */
.archive-banner {
    align-items: center;
    background-blend-mode: normal;
    background-image: url(/wp-content/uploads/2026/06/sideboards-feature.jpg);
    background-position: 50% 100%;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    height: 60vh;
    justify-content: center;
    /* background-attachment: fixed; */
}

/* Archive banner - image set to top (0%) 
-----------------------------------------
- Indoor / Wardrobes | Walk-In Closets
- Outdoor / Parasols | Gazebos
*/
body.term-184 .archive-banner,
body.term-37 .archive-banner {
    background-position: 50% 0;
}

/* Archive banner - image set to 75% from top
---------------------------------------------
- Residential
- Indoor / Rugs | Mirrors | Complements, 
- Room Categories / Living Room
- Room Categories / Kitchen & Dining
*/
body.term-69 .archive-banner,
body.term-70 .archive-banner,
body.term-2942 .archive-banner,
body.term-45 .archive-banner,
body.term-117 .archive-banner {
    background-position: 50% 75%;
}

.archive-banner-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 1024px) {
    .archive-banner {
        height: 35vh;
    }
}

/* Archive intro panels */
.boxed-container.breadcrumb-bar {
    padding-top: var(--space);
}

/* Gallery + summary: own width-constrained block (separate from breadcrumb strip). */
.boxed-container.single-product-main {
    padding-bottom: var(--space);
    padding-top: 0;
}

.boxed-container.archive-intro {
    column-gap: var(--space-2x);
    display: grid;
    flex-direction: column;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--space-075x);
	padding-top: var(--space-05x);
	padding-bottom: var(--space);
}

.archive-intro-heading-text {
    margin-bottom: 0px;
    text-transform: uppercase;
}

.archive-intro-content p {
    margin-bottom: 0;
}

.archive-intro-content .intro-button {
    margin-top: 0.5rem;
    text-align: center;
}

div#ctis-loading {
    grid-column: -1 / 1;
}

.ctis-finished-notice {
    grid-column: -1 / 1;
}

@media (max-width: 1024px) {
    .boxed-container.archive-intro {
        grid-template-columns: 1fr;
    }

    .archive-intro-heading {
        order: 0;
    }

    .archive-intro-content {
        order: 1;
    }
}

/* ============================================================================
   13. Breadcrumbs
   ============================================================================ */

.woocommerce .woocommerce-breadcrumb,
.woocommerce-breadcrumb {
    font-size: .875rem!important;
    color: var(--text)!important;
    margin: 0 0 1rem;
}

.woocommerce .woocommerce-breadcrumb a {
    color: var(--text)!important;
}

/* ============================================================================
   14. Cart Icon
   ============================================================================ */

a.quote-cart-icon {
    position: relative;
}

a.quote-cart-icon span.quote-cart-icon__count {
    position: absolute;
    bottom: 0;
    right: -0.5rem;
    z-index: 1;
    background: #ffffff;
    border-radius: 1rem;
    width: 1rem;
    height: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 9px;
    font-weight: 400;
}