/* =========================================================
   UBUNTU LTD
   SINGLE PRODUCT
========================================================= */


/* =========================================================
   BREADCRUMBS
========================================================= */

.u-product-crumbbar {
    padding:
        calc(
            104px +
            env(
                safe-area-inset-top,
                0px
            )
        )
        0
        18px;

    background:
        var(--bark);

    color:
        rgba(235,237,228,.62);
}


.u-product-crumbbar .wrap {
    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        7px;

    font-size:
        .86rem;
}


.u-product-crumbbar a {
    color:
        inherit;

    text-decoration:
        none;
}


.u-product-crumbbar a:hover {
    color:
        var(--amber);
}


.u-product-crumbbar strong {
    color:
        var(--husk);

    font-weight:
        500;
}


/* =========================================================
   MAIN PRODUCT
========================================================= */

.u-product-main {
    padding-block:
        clamp(38px,5vw,64px);

    background:
        var(--paper);
}


.u-product-grid {
    display:
        grid;

    grid-template-columns:
        minmax(0,.95fr)
        minmax(0,1.05fr);

    gap:
        clamp(34px,5vw,74px);

    align-items:
        start;
}


/* =========================================================
   PRODUCT GALLERY
========================================================= */

.u-product-gallery {
    position:
        sticky;

    top:
        calc(
            104px +
            env(
                safe-area-inset-top,
                0px
            )
        );
}


.u-gallery-main {
    position:
        relative;

    width:
        100%;

    height:
        clamp(
            420px,
            48vw,
            620px
        );

    overflow:
        hidden;

    border-radius:
        var(--r);

    background:
        #ffffff;

    border:
        1px solid
        var(--line);
}


.u-gallery-pane {
    position:
        absolute;

    inset:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        clamp(
            16px,
            2vw,
            30px
        );

    opacity:
        0;

    visibility:
        hidden;

    transition:
        opacity .45s ease,
        visibility .45s ease;
}


.u-gallery-pane.active {
    opacity:
        1;

    visibility:
        visible;
}


/*
 * CRITICAL:
 *
 * Entire original product image remains visible.
 * No cover.
 * No forced image ratio.
 * No crop.
 */

.u-gallery-pane img {
    display:
        block;

    width:
        auto !important;

    height:
        auto !important;

    max-width:
        100% !important;

    max-height:
        100% !important;

    min-width:
        0 !important;

    min-height:
        0 !important;

    object-fit:
        contain !important;

    object-position:
        center !important;

    aspect-ratio:
        auto !important;

    transform:
        none !important;
}


.u-product-flag {
    position:
        absolute;

    z-index:
        5;

    top:
        16px;

    left:
        16px;

    padding:
        .4rem .85rem;

    border-radius:
        99px;

    background:
        var(--clay);

    color:
        #fff;

    font-size:
        .71rem;

    font-weight:
        700;

    letter-spacing:
        .07em;
}


.u-product-flag.u-sale {
    background:
        var(--leaf);
}


.u-product-flag.u-out {
    background:
        rgba(19,35,26,.86);
}


.u-gallery-zoom {
    position:
        absolute;

    z-index:
        6;

    right:
        16px;

    bottom:
        16px;

    display:
        grid;

    place-items:
        center;

    width:
        44px;

    height:
        44px;

    padding:
        0;

    border:
        0;

    border-radius:
        50%;

    background:
        rgba(19,35,26,.82);

    color:
        var(--husk);

    cursor:
        pointer;

    backdrop-filter:
        blur(7px);
}


.u-gallery-zoom svg {
    width:
        19px;

    height:
        19px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;
}


/* =========================================================
   THUMBNAILS
========================================================= */

.u-gallery-thumbs {
    display:
        grid;

    grid-template-columns:
        repeat(
            5,
            minmax(72px,1fr)
        );

    gap:
        10px;

    margin-top:
        12px;

    overflow-x:
        auto;
}


.u-gallery-thumb {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    height:
        88px;

    padding:
        6px;

    overflow:
        hidden;

    border:
        2px solid transparent;

    border-radius:
        10px;

    background:
        #fff;

    cursor:
        pointer;

    transition:
        border-color .3s,
        transform .3s;
}


.u-gallery-thumb:hover {
    transform:
        translateY(-2px);
}


.u-gallery-thumb.active {
    border-color:
        var(--amber);
}


.u-gallery-thumb img {
    display:
        block;

    width:
        auto !important;

    height:
        auto !important;

    max-width:
        100% !important;

    max-height:
        100% !important;

    object-fit:
        contain !important;

    object-position:
        center !important;
}


/* =========================================================
   PRODUCT INFORMATION
========================================================= */

.u-product-info {
    padding-top:
        3px;
}


.u-product-category {
    margin:
        0 0 .6rem;

    color:
        var(--leaf);

    font-size:
        .79rem;

    font-weight:
        700;

    letter-spacing:
        .12em;
}


.u-product-info h1 {
    max-width:
        20ch;

    margin:
        0 0 .8rem;

    font-size:
        clamp(
            2rem,
            3.5vw,
            3rem
        );
}


.u-product-row {
    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        14px;

    margin-bottom:
        1.15rem;
}


.u-product-rating
.star-rating {
    float:
        none;

    margin:
        0;

    color:
        var(--amber);
}


.u-review-link {
    padding:
        0;

    border:
        0;

    background:
        none;

    color:
        var(--ink-60);

    font:
        inherit;

    font-size:
        .88rem;

    text-decoration:
        underline;

    text-underline-offset:
        3px;

    cursor:
        pointer;
}


.u-product-sku {
    color:
        var(--ink-60);

    font-size:
        .86rem;
}


/* =========================================================
   PRICE
========================================================= */

.u-product-price {
    margin:
        0 0 1.2rem;

    color:
        var(--clay);

    font-family:
        var(--serif);

    font-size:
        clamp(
            1.8rem,
            3vw,
            2.4rem
        );

    font-weight:
        600;
}


.u-product-price
del {
    margin-right:
        .6rem;

    color:
        var(--ink-60);

    font-family:
        var(--sans);

    font-size:
        1rem;

    font-weight:
        400;
}


.u-product-price
ins {
    text-decoration:
        none;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.u-product-description {
    max-width:
        58ch;

    margin-bottom:
        1.3rem;

    color:
        var(--ink-60);
}


.u-product-description p:last-child {
    margin-bottom:
        0;
}


/* =========================================================
   STOCK
========================================================= */

.u-stock-line {
    display:
        flex;

    align-items:
        center;

    gap:
        .5rem;

    margin:
        0 0 1rem;

    color:
        var(--leaf);

    font-size:
        .9rem;

    font-weight:
        600;
}


.u-stock-line.out-stock {
    color:
        var(--clay);
}


.u-stock-line svg {
    width:
        17px;

    height:
        17px;

    flex:
        0 0 auto;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        2.3;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.u-stock-line
.stock {
    margin:
        0 !important;

    color:
        inherit !important;

    font-size:
        inherit !important;
}


/* =========================================================
   REAL WOOCOMMERCE CART FORM
========================================================= */

.u-product-buy {
    margin:
        1.4rem 0;
}


.u-product-buy
form.cart {
    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        14px;

    margin:
        0 !important;
}


.u-product-buy
.quantity {
    display:
        flex;

    align-items:
        center;

    float:
        none !important;

    margin:
        0 !important;
}


.u-product-buy
.quantity
.qty {
    width:
        86px;

    height:
        48px;

    padding:
        0 .7rem;

    border:
        1.5px solid
        var(--line);

    border-radius:
        99px;

    background:
        #fff;

    color:
        var(--ink);

    font:
        inherit;

    font-weight:
        600;

    text-align:
        center;
}


.u-product-buy
.single_add_to_cart_button {
    min-height:
        48px;

    padding:
        .85rem 1.6rem !important;

    border:
        0 !important;

    border-radius:
        99px !important;

    background:
        var(--amber) !important;

    color:
        var(--bark) !important;

    font-family:
        var(--sans) !important;

    font-size:
        .94rem !important;

    font-weight:
        700 !important;

    cursor:
        pointer;

    transition:
        background .3s,
        transform .3s;
}


.u-product-buy
.single_add_to_cart_button:hover {
    background:
        var(--amber-soft) !important;

    transform:
        translateY(-2px);
}


/* =========================================================
   VARIABLE PRODUCTS
========================================================= */

.u-product-buy
.variations_form {
    display:
        block !important;

    width:
        100%;
}


.u-product-buy
table.variations {
    width:
        100%;

    margin:
        0 0 1.2rem !important;

    border:
        0 !important;
}


.u-product-buy
.variations
tr {
    display:
        grid;

    grid-template-columns:
        120px
        minmax(0,1fr);

    align-items:
        center;

    gap:
        14px;

    margin-bottom:
        12px;
}


.u-product-buy
.variations
th,
.u-product-buy
.variations
td {
    display:
        block;

    padding:
        0 !important;

    border:
        0 !important;

    background:
        transparent !important;

    text-align:
        left;
}


.u-product-buy
.variations
label {
    font-size:
        .8rem;

    font-weight:
        700;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;
}


.u-product-buy
.variations
select {
    width:
        100%;

    min-height:
        46px;

    padding:
        .6rem 2.4rem
        .6rem 1rem;

    border:
        1.5px solid
        var(--line);

    border-radius:
        99px;

    background:
        #fff;

    color:
        var(--ink);

    font:
        inherit;
}


.u-product-buy
.reset_variations {
    display:
        inline-block;

    margin-top:
        7px;

    color:
        var(--clay);

    font-size:
        .82rem;
}


.u-product-buy
.single_variation_wrap {
    margin-top:
        1rem;
}


.u-product-buy
.woocommerce-variation-price {
    margin-bottom:
        1rem;

    color:
        var(--clay);

    font-family:
        var(--serif);

    font-size:
        1.4rem;
}


/* =========================================================
   META
========================================================= */

.u-product-meta {
    display:
        grid;

    gap:
        11px;

    padding-top:
        1.4rem;

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

    color:
        var(--ink-60);

    font-size:
        .89rem;
}


.u-product-meta div {
    display:
        flex;

    align-items:
        center;

    gap:
        .65rem;
}


.u-product-meta svg {
    width:
        18px;

    height:
        18px;

    flex:
        0 0 auto;

    fill:
        none;

    stroke:
        var(--leaf);

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


/* =========================================================
   SHARE
========================================================= */

.u-product-share {
    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    margin-top:
        1.6rem;

    color:
        var(--ink-60);

    font-size:
        .85rem;
}


.u-product-share a {
    display:
        grid;

    place-items:
        center;

    width:
        37px;

    height:
        37px;

    border:
        1.5px solid
        var(--line);

    border-radius:
        50%;

    color:
        var(--ink);

    transition:
        border-color .3s,
        transform .3s,
        color .3s;
}


.u-product-share a:hover {
    border-color:
        var(--clay);

    color:
        var(--clay);

    transform:
        translateY(-2px);
}


.u-product-share svg {
    width:
        15px;

    height:
        15px;

    fill:
        currentColor;
}


/* =========================================================
   PRODUCT TABS
========================================================= */

.u-product-tabs {
    padding-block:
        clamp(50px,6vw,86px);

    background:
        var(--husk-2);
}


.u-tab-head {
    display:
        flex;

    gap:
        clamp(20px,3vw,38px);

    overflow-x:
        auto;

    margin-bottom:
        36px;

    border-bottom:
        1.5px solid
        var(--line);
}


.u-tab-button {
    position:
        relative;

    flex:
        0 0 auto;

    padding:
        .4rem 0 1rem;

    border:
        0;

    background:
        none;

    color:
        var(--ink-60);

    font:
        inherit;

    font-size:
        .97rem;

    font-weight:
        600;

    cursor:
        pointer;

    white-space:
        nowrap;
}


.u-tab-button::after {
    content:
        "";

    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        -1.5px;

    height:
        2.5px;

    background:
        var(--clay);

    transform:
        scaleX(0);

    transition:
        transform .35s
        cubic-bezier(.2,.8,.3,1);
}


.u-tab-button[
    aria-selected="true"
] {
    color:
        var(--ink);
}


.u-tab-button[
    aria-selected="true"
]::after {
    transform:
        none;
}


.u-tab-panel {
    display:
        none;
}


.u-tab-panel.active {
    display:
        block;

    animation:
        ubuntuProductFade
        .45s ease;
}


@keyframes ubuntuProductFade {

    from {
        opacity:
            0;

        transform:
            translateY(12px);
    }

    to {
        opacity:
            1;

        transform:
            none;
    }

}


.u-description-layout {
    display:
        grid;

    grid-template-columns:
        minmax(0,1.3fr)
        minmax(280px,.7fr);

    gap:
        clamp(30px,4vw,58px);

    align-items:
        start;
}


.u-description-copy {
    max-width:
        70ch;
}


.u-description-copy h3 {
    margin:
        1.6rem 0 .6rem;
}


.u-description-copy h3:first-child {
    margin-top:
        0;
}


/* =========================================================
   FACT BOX
========================================================= */

.u-product-facts {
    padding:
        25px 27px;

    border-radius:
        var(--r);

    background:
        var(--paper);
}


.u-product-facts dl {
    display:
        grid;

    gap:
        12px;

    margin:
        0;
}


.u-product-facts dl > div {
    display:
        flex;

    justify-content:
        space-between;

    gap:
        16px;

    padding-bottom:
        12px;

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

    font-size:
        .91rem;
}


.u-product-facts dl > div:last-child {
    padding-bottom:
        0;

    border-bottom:
        0;
}


.u-product-facts dt {
    color:
        var(--ink-60);
}


.u-product-facts dd {
    margin:
        0;

    font-weight:
        600;

    text-align:
        right;
}


/* =========================================================
   WOO ADDITIONAL INFORMATION
========================================================= */

.u-tab-panel
.woocommerce-product-attributes {
    width:
        100%;

    border-collapse:
        collapse;
}


.u-tab-panel
.woocommerce-product-attributes
th,
.u-tab-panel
.woocommerce-product-attributes
td {
    padding:
        14px 16px;

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

    text-align:
        left;
}


.u-tab-panel
.woocommerce-product-attributes
th {
    width:
        30%;

    color:
        var(--ink-60);

    font-weight:
        500;
}


.u-tab-panel
.woocommerce-product-attributes
p {
    margin:
        0;
}


/* =========================================================
   REVIEWS
========================================================= */

.u-review-summary {
    padding-bottom:
        30px;

    margin-bottom:
        30px;

    border-bottom:
        1px solid
        var(--line);
}


.u-review-score {
    display:
        inline-grid;

    gap:
        7px;
}


.u-review-score strong {
    font-family:
        var(--serif);

    font-size:
        3.4rem;

    line-height:
        1;
}


.u-review-score
.star-rating {
    float:
        none;

    margin:
        0;

    color:
        var(--amber);
}


.u-review-score span {
    color:
        var(--ink-60);

    font-size:
        .86rem;
}


/* WooCommerce reviews */

.u-wc-reviews
#reviews {
    margin:
        0;
}


.u-wc-reviews
#comments {
    margin-bottom:
        34px;
}


.u-wc-reviews
.commentlist {
    margin:
        0 !important;

    padding:
        0 !important;

    list-style:
        none !important;
}


.u-wc-reviews
.commentlist
li {
    padding:
        22px 0 !important;

    border-bottom:
        1px solid
        var(--line) !important;
}


.u-wc-reviews
.comment_container {
    display:
        grid;

    grid-template-columns:
        46px
        minmax(0,1fr);

    gap:
        14px;
}


.u-wc-reviews
.avatar {
    position:
        static !important;

    width:
        42px !important;

    height:
        42px !important;

    margin:
        0 !important;

    border:
        0 !important;

    border-radius:
        50% !important;
}


.u-wc-reviews
.comment-text {
    margin:
        0 !important;

    padding:
        0 !important;

    border:
        0 !important;
}


.u-wc-reviews
.star-rating {
    float:
        none;

    margin-bottom:
        .45rem;

    color:
        var(--amber);
}


/* Review form */

.u-wc-reviews
#review_form_wrapper {
    margin-top:
        32px;
}


.u-wc-reviews
input[type="text"],
.u-wc-reviews
input[type="email"],
.u-wc-reviews
textarea {
    width:
        100%;

    padding:
        .85rem 1rem;

    border:
        1.5px solid
        var(--line);

    border-radius:
        10px;

    background:
        #fff;

    color:
        var(--ink);

    font:
        inherit;
}


.u-wc-reviews
.form-submit
.submit {
    padding:
        .8rem 1.5rem !important;

    border:
        0 !important;

    border-radius:
        99px !important;

    background:
        var(--bark) !important;

    color:
        var(--husk) !important;

    font:
        inherit !important;

    font-weight:
        600 !important;

    cursor:
        pointer;
}


/* =========================================================
   RELATED PRODUCTS
========================================================= */

.u-related-products {
    padding-block:
        clamp(58px,7vw,94px);

    background:
        var(--paper);
}


.u-related-products h2 {
    max-width:
        18ch;
}


.u-related-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );

    gap:
        clamp(18px,2.2vw,28px);

    margin-top:
        38px;
}


.u-related-card {
    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    border-radius:
        var(--r);

    background:
        var(--husk);

    color:
        inherit;

    text-decoration:
        none;

    transition:
        transform .45s,
        box-shadow .45s;
}


.u-related-card:hover {
    transform:
        translateY(-7px);

    box-shadow:
        0 22px 40px
        rgba(19,35,26,.13);
}


/*
 * Related image canvas.
 * Image remains fully visible.
 */

.u-related-image {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    height:
        270px;

    padding:
        18px;

    background:
        #fff;
}


.u-related-image img {
    display:
        block;

    width:
        auto !important;

    height:
        auto !important;

    max-width:
        100% !important;

    max-height:
        100% !important;

    object-fit:
        contain !important;

    object-position:
        center !important;
}


.u-related-body {
    padding:
        18px 20px 22px;
}


.u-related-body h3 {
    margin:
        0 0 .45rem;

    font-size:
        1.02rem;
}


.u-related-price {
    font-family:
        var(--serif);

    font-size:
        1.12rem;

    font-weight:
        600;
}


.u-related-price del {
    margin-right:
        5px;

    color:
        var(--ink-60);

    font-family:
        var(--sans);

    font-size:
        .8rem;

    font-weight:
        400;
}


.u-related-price ins {
    text-decoration:
        none;
}


/* =========================================================
   IMAGE VIEWER
========================================================= */

.u-image-viewer {
    width:
        min(
            94vw,
            1100px
        );

    height:
        min(
            90vh,
            850px
        );

    padding:
        28px;

    border:
        0;

    border-radius:
        var(--r);

    background:
        #fff;
}


.u-image-viewer::backdrop {
    background:
        rgba(19,35,26,.88);

    backdrop-filter:
        blur(4px);
}


.u-image-viewer img {
    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

    object-position:
        center;
}


.u-image-viewer-close {
    position:
        absolute;

    z-index:
        3;

    top:
        12px;

    right:
        12px;

    display:
        grid;

    place-items:
        center;

    width:
        42px;

    height:
        42px;

    padding:
        0;

    border:
        0;

    border-radius:
        50%;

    background:
        var(--bark);

    color:
        #fff;

    font-size:
        1.5rem;

    cursor:
        pointer;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 980px) {

    .u-product-grid {
        grid-template-columns:
            1fr;
    }


    .u-product-gallery {
        position:
            static;
    }


    .u-gallery-main {
        height:
            min(
                72vh,
                620px
            );
    }


    .u-related-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }

}


@media (max-width: 760px) {

    .u-description-layout {
        grid-template-columns:
            1fr;
    }


    .u-product-buy
    .variations
    tr {
        grid-template-columns:
            1fr;

        gap:
            6px;
    }


    .u-gallery-thumbs {
        grid-template-columns:
            repeat(
                5,
                86px
            );
    }

}


@media (max-width: 580px) {

    .u-gallery-main {
        height:
            430px;
    }


    .u-gallery-pane {
        padding:
            12px;
    }


    .u-related-grid {
        grid-template-columns:
            1fr;
    }


    .u-related-image {
        height:
            320px;
    }


    .u-product-info h1 {
        font-size:
            2rem;
    }

}




/* =========================================================
   PRODUCT TRUST STRIP
========================================================= */

.u-product-trust-strip {
    width: 100%;
    margin: 22px 0 24px;
}

.u-product-trust-strip img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
}


/* MOBILE */

@media (max-width: 760px) {

    .u-product-trust-strip {
        margin: 18px 0 20px;
    }

}




/* =========================================================
   PRODUCT CARD ROUNDED BORDER
========================================================= */

#our-products .u-home-product {
    border-radius: 18px !important;
    overflow: hidden !important;

    border: 1px solid rgba(19, 35, 26, .14);

    background: #fff;
}


/* IMAGE FOLLOWS TOP CORNERS */

#our-products .u-home-product-art {
    overflow: hidden;

    border-radius:
        17px
        17px
        0
        0;
}


/* BODY FOLLOWS BOTTOM CORNERS */

#our-products .u-home-product-body {
    border-radius:
        0
        0
        17px
        17px;
}





/* =========================================================
   PRODUCT QUANTITY + ADD TO CART
   KEEP ON SAME ROW
========================================================= */

/* SIMPLE PRODUCTS */

.u-product-buy form.cart:not(.variations_form) {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 14px;
}


/* VARIABLE PRODUCTS */

.u-product-buy
.woocommerce-variation-add-to-cart {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 14px;

    width: 100%;
}


/* QUANTITY */

.u-product-buy .quantity {
    flex: 0 0 auto;
    margin: 0 !important;
}


/* ADD TO CART BUTTON */

.u-product-buy .single_add_to_cart_button {
    flex: 1 1 auto;

    width: auto !important;
    margin: 0 !important;

    min-height: 48px;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}