/* Single product (related products use the shop loop styles): loaded after style.css, see functions.php */

/* Font scheme : 1.2 minor third */

/* Header: nav bar height, also the offset for the menus that drop below it */

/* Media Queries */

/* Star images: gray for empty, yellow for filled, white for not yet chosen when leaving a review */

/* Review Stylings */

.reviews_bar, .wc-tabs {
    display: none;
}

.wc-tabs-wrapper {
    background-color: #ebebeb;
    display: flex;
    justify-content: center;
}

.wc-tab {
    max-width: 1000px;
    margin: 0 1em;
}

#reviews_summary h3 {
    margin-top: 2rem;
}

.commentlist {
    display: grid;
    gap: 2em;
    padding: 0;
    list-style: none;
    margin-top: 2em;
}

.commentlist li {
        background: white;
        border-radius: 0.5em;
        padding: 1.5em;
    }

.commentlist .description {
        width: 70%;
        float: right;
    }

.commentlist .star-rating {
        height: 1.5em;
        line-height: 1.5;
    }

/* leave a review */

#respond {
    max-width: 500px;
}

.comment-meta-container {
    width: 30%;
    float: left;
    margin-top: 1em;
    padding-right: 1em;
}

.comment-meta-container .meta {
        margin: 0;
    }

.comment-meta-container .meta time {
            display: block;
        }

#commentform #submit {
        margin-left: 0;
        min-width: 30%;
        background-color: #ff8263;
        border: none;
        color: white;
        font-weight: 700;
    }

#commentform input {
        background-color: white;
    }

.comment-form-author, .comment-form-title, .comment-form-email {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.comment-form-author input, .comment-form-title input, .comment-form-email input {
        flex-grow: 1;
        margin-left: 1em;
    }

.comment-form-rating p {
    display: inline-block;
    line-height: 1.5;
    color: #ff8263;
    margin: 0 0 0 1em;
}

.comment-form-rating p span {
        line-height: 1;
        display: inline-block;
    }

#comment {
    width: 100%;
}

.required {
    color: #ff8263;
}

textarea {
    margin-top: 0.5em;
    background-color: white;
}

.review_content {
    font-weight: 100;
}

.review_title {
    display: block;
    padding-bottom: 10px;
    font-weight: bold;
}

.ywar_votereview {
    display: inline-block;
    width: 2em;
    height: 1.5em;
    margin-left: 5px;
    vertical-align: middle;
}

.ywar_votereview svg {
        width: 100%;
        height: 100%;
    }

/*  upvote section */

.vote_selected svg, .ywar_votereview:hover svg {
        fill: #ff8263;
    }

.ywar_votereview.not {
    transform: rotate(180deg);
}

span.review-rating-value {
    display: block;
    padding-bottom: 15px;
    padding-top: 15px;
}

div.review_vote {
    text-align: right;
}

.review_helpful {
    vertical-align: middle;
}

span.ywar_review_helpful {
    font-style: italic;
    display: block;
    margin-top: 0.5rem;
    font-size: 0.833em;
    opacity: 0.6;
}

#reviews_order {
    border-bottom: 2px solid rgba(234, 231, 231, 0.94);
    max-width: 500px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
}

#ywar_reviews a.ywar_filter_order {
    text-decoration: none;
    padding: 0.5em 1em 0.5em 0;
    display: inline-block;
    opacity: 0.5;
    position: relative;
    top: 2px;
    border: none;
}

#ywar_reviews a.ywar_filter_order.active, #ywar_reviews a.ywar_filter_order:hover {
    border-bottom: 2px solid rgba(169, 112, 157, 1);
    position: relative;
    opacity: 1;
}

.ywar_show_more {
    text-align: center;
    font-weight: 600;
}

nav.woocommerce-pagination {
    text-align: center;
}

#reviews div.comment-text a.comment-reply-link:before {
    content: "";
}

#reviews_dialog {
    display: none;
}

a.ywar_show_more {
    border: none;
}

#review_form_wrapper {
    margin-top: 1em;
}

#temp_review_form_wrapper {
    visibility: hidden;
}

/*  Featured reviews */

#reviews .comment_container.review-featured {
    border: 2px solid #ffa500;
}

img.featured-badge {
    position: absolute;
    top: -5px;
    left: 5px;
}

span.error.empty-review {
    font-size: 12px;
    color: red;
}

span.empty-review {
    display: block;
}

#reviews .commentlist, #reviews .commentlist .children {
    list-style: none;
}

.ywar-description {
    overflow: overlay;
}

/* #comment {
    margin: 0 1rem;
} */

/* Star ratings - From WC styles*/

/* need to make dynamic : see method here https://css-tricks.com/images-in-postcss/ */

.star-rating {
    position: relative;
    height: 1em;
    width: 5em;
    margin-right: 0.5em;
}

.star-rating::before {
        background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22929%22%20height%3D%22886%22%20viewBox%3D%220%200%20929%20886%22%3E%3Cstyle%3Epath%20%7B%20fill%3A%20%23ebebeb%20!important%20%7D%3C%2Fstyle%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M929%20343c0%208-5%2017-15%2027L711%20567l48%20279c1%203%201%207%201%2012%200%2015-8%2027-22%2027-7%201-15-1-23-6L464%20747%20214%20879c-9%205-16%207-23%207-14%200-23-15-23-28%200-3%200-7%201-12l48-279L14%20370c-9-10-14-19-14-27%200-14%2010-23%2031-26l280-40L437%2023c7-15%2016-23%2027-23s20%208%2028%2023l125%20254%20280%2040c21%203%2032%2012%2032%2026z%22%2F%3E%3C%2Fsvg%3E) !important;
        background-repeat: repeat-x;
        background-size: 1em;
        bottom: 0;
        content: "";
        display: block;
        height: 1em;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        width: 5em;
    }

.star-rating span {
        display: block;
        text-indent: -10000px;
        width: 5em;
        height: 1em;
        position: absolute;
        overflow: hidden;
    }

.star-rating span:before {
            background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22929%22%20height%3D%22886%22%20viewBox%3D%220%200%20929%20886%22%3E%3Cstyle%3Epath%20%7B%20fill%3A%20%23ffc549%20!important%20%7D%3C%2Fstyle%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M929%20343c0%208-5%2017-15%2027L711%20567l48%20279c1%203%201%207%201%2012%200%2015-8%2027-22%2027-7%201-15-1-23-6L464%20747%20214%20879c-9%205-16%207-23%207-14%200-23-15-23-28%200-3%200-7%201-12l48-279L14%20370c-9-10-14-19-14-27%200-14%2010-23%2031-26l280-40L437%2023c7-15%2016-23%2027-23s20%208%2028%2023l125%20254%20280%2040c21%203%2032%2012%2032%2026z%22%2F%3E%3C%2Fsvg%3E) !important;
            background-repeat: repeat-x;
            background-size: 1em;
            bottom: 0;
            content: "";
            display: block;
            height: 1em;
            left: 0;
            position: absolute;
            right: 0;
            text-indent: 10000px;
            top: 0;
        }

.woocommerce-product-rating {
    display: flex;
    align-items: center;
}

.woocommerce-product-rating a {
        line-height: 1;
    }

/* For Leaving reviews */

/* flex drops the whitespace between the star links, so the pointer never sits in a gap between them */

p.stars span {
        display: inline-flex;
    }

p.stars a {
        position: relative;
        height: 1em;
        width: 1em;
        text-indent: -999em;
        display: inline-block;
        text-decoration: none;
    }

p.stars a::before {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 1em;
            height: 1em;
            line-height: 1;
            content: "";
            text-indent: 0;
            background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22929%22%20height%3D%22886%22%20viewBox%3D%220%200%20929%20886%22%3E%3Cstyle%3Epath%20%7B%20fill%3A%20%23fff%20!important%20%7D%3C%2Fstyle%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M929%20343c0%208-5%2017-15%2027L711%20567l48%20279c1%203%201%207%201%2012%200%2015-8%2027-22%2027-7%201-15-1-23-6L464%20747%20214%20879c-9%205-16%207-23%207-14%200-23-15-23-28%200-3%200-7%201-12l48-279L14%20370c-9-10-14-19-14-27%200-14%2010-23%2031-26l280-40L437%2023c7-15%2016-23%2027-23s20%208%2028%2023l125%20254%20280%2040c21%203%2032%2012%2032%2026z%22%2F%3E%3C%2Fsvg%3E) !important;
            background-size: 1em;
            background-repeat: no-repeat;
        }

/* fill the stars up to the one hovered, or up to the one chosen */

p.stars span:hover a::before, p.stars.selected a.active::before, p.stars.selected a:not(.active)::before {
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22929%22%20height%3D%22886%22%20viewBox%3D%220%200%20929%20886%22%3E%3Cstyle%3Epath%20%7B%20fill%3A%20%23ffc549%20!important%20%7D%3C%2Fstyle%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M929%20343c0%208-5%2017-15%2027L711%20567l48%20279c1%203%201%207%201%2012%200%2015-8%2027-22%2027-7%201-15-1-23-6L464%20747%20214%20879c-9%205-16%207-23%207-14%200-23-15-23-28%200-3%200-7%201-12l48-279L14%20370c-9-10-14-19-14-27%200-14%2010-23%2031-26l280-40L437%2023c7-15%2016-23%2027-23s20%208%2028%2023l125%20254%20280%2040c21%203%2032%2012%2032%2026z%22%2F%3E%3C%2Fsvg%3E) !important;
}

/* and leave the ones after it empty */

p.stars a:hover ~ a::before, p.stars.selected a.active ~ a::before {
    background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22929%22%20height%3D%22886%22%20viewBox%3D%220%200%20929%20886%22%3E%3Cstyle%3Epath%20%7B%20fill%3A%20%23fff%20!important%20%7D%3C%2Fstyle%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M929%20343c0%208-5%2017-15%2027L711%20567l48%20279c1%203%201%207%201%2012%200%2015-8%2027-22%2027-7%201-15-1-23-6L464%20747%20214%20879c-9%205-16%207-23%207-14%200-23-15-23-28%200-3%200-7%201-12l48-279L14%20370c-9-10-14-19-14-27%200-14%2010-23%2031-26l280-40L437%2023c7-15%2016-23%2027-23s20%208%2028%2023l125%20254%20280%2040c21%203%2032%2012%2032%2026z%22%2F%3E%3C%2Fsvg%3E) !important;
}

main .form-submit {
    margin-bottom: 2em;
}

main .form-submit .empty-review {
        font-size: 1rem;
    }

main .form-submit span:nth-last-of-type(1) {
        margin-bottom: 1em;
    }

.size-chart {
    cursor: pointer;
}

.size-chart-outer {
    display: grid;
    background: rgba(4, 4, 4, 0.6);
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.size-chart-outer.open {
    opacity: 1;
    pointer-events: all;
}

.overflow-hidden {
    overflow: hidden;
}

/* keep the scrollbar's space reserved on product pages so locking scroll for a modal doesn't shift the page */

html:has(body.single-product) {
    scrollbar-gutter: stable;
}

.size-chart-popup {
    position: fixed;
    background: #ebebeb;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

@media (max-width: 600px) {

.size-chart-popup {
        height: 100%
}
    }

.size-chart-container {
    display: grid;
    margin: 5em 10%;
    gap: 1em 10%;
    max-width: 1200px;
}

.size-chart-container table {
        width: 100%;
        background: #fff;
        border: 1em solid white;
    }

.size-chart-container table th, .size-chart-container table td {
            padding: 0.5em;
            width: 50%;
        }

.size-chart-container tbody td {
        border-top: 1px solid #ebebeb;
    }

.size-notice {
    font-size: 0.833em;
}

@media (min-width: 600px) {

.size-notice {
        grid-column-start: span 2;
}
    }

.size-notice h2, .size-notice p {
        margin: 0.5rem;
    }

.popup .close {
    position: absolute;
    top: 1.5rem;
    right: 1rem;
    cursor: pointer;
    font-size: 2rem;
    line-height: 0;
}

/* Global */

.iconic-was-swatches, .iconic-was-swatches__item {
    margin: 0;
}

.iconic-was-swatches--visual a.iconic-was-swatch:before {
        border: 0px !important;
    }

/* Archive */

.archive .iconic-was-swatch__container {
        width: 50px !important;
        height: 50px !important;
    }

.archive a.iconic-was-swatch {
        padding: 0px !important;
        margin-right: 4px;
        margin-top: 4px;
    }

/* Single Product */

.iconic-was-swatch--disabled {
    text-decoration: line-through;
}

.variations .iconic-was-swatch__container {
    border-radius: 4px;
    overflow: hidden;
}

.variations .iconic-was-swatches--visual {
    margin-right: -3px;
}

.variations .iconic-was-swatches--visual a.iconic-was-swatch--selected:before, .variations .iconic-was-swatches--visual a.iconic-was-swatch:hover:before {
        border: 1px solid #000 !important;
        border-radius: 4px;
    }

.variations .iconic-was-swatches--visual a.iconic-was-swatch {
        padding: 1px;
        margin-right: 3px;
        margin-bottom: 3px;
    }

.iconic-was-swatches--text-swatch li {
        width: 36px;
        text-align: center;
        margin-right: 6px;
    }

.iconic-was-swatches--text-swatch a.iconic-was-swatch {
        color: #000 !important;
        background-color: white !important;
        padding: 0;
        line-height: 36px;
    }

.iconic-was-swatches--text-swatch a.iconic-was-swatch:hover {
        color: #000 !important;
        outline: none;
    }

/* Arrangement */

.archive-body {
    display: flex;
    flex-direction: column;
}

@media (min-width: 800px) {

.archive-body {
        display: grid;
        grid-template:
            "sidebar product"
            / minmax(250px, 20%) minmax(400px, auto)
}
    }

/* Product Images */

.products {
    grid-area: product;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 1rem;
    grid-row-gap: 2rem;
    margin: 0 1rem;
}

@media (min-width: 600px) {

.products {
        margin: 0 2rem;
        grid-row-gap: 3rem
}
    }

@media (min-width: 1100px) {

.products {
        grid-template-columns: repeat(3, 1fr);
        margin-right: 8%;
        margin-left: 2.5rem
}
    }

@media (min-width: 1600px) {

.products {
        grid-column-gap: 2rem
}
    }

.products li {
        position: relative;
    }

.onsale {
    position: absolute;
    top: 0;
    right: 0;
    text-align: center;
    border-radius: 50%;
    background-color: #ff8263;
    min-height: 3.3em;
    min-width: 3.3em;
    line-height: 3.3em;
    color: white;
    font-weight: 700;
    margin: -0.5em -0.5em 0 0;
}

/* Sidebar */

#sidebar-primary {
    grid-area: sidebar;
    margin-top: 0;
    margin-left: 5vw;
    font-weight: 600;
    line-height: 2;
    order: -1;
}

@media (max-width: 800px) {

#sidebar-primary {
        margin: -0.5rem auto 0.5rem
}
    }

@media (min-width: 800px) {

#sidebar-primary {
        border-right: 1px solid rgba(0, 0, 0, 0.15)
}
    }

@media (max-width: 800px) {

.product-categories {
        display: none
}
    }

.current-cat {
    color: #ff8263;
}

/* Product Info */

.woocommerce-loop-product__title {
    margin: 0.5rem 0 0;
    font-size: initial;
    font-weight: 600;
}

.products .price {
    color: #888;
}

.main-product-image {
    max-width: 1300px;
    margin: 2em auto;
}

@media (min-width: 700px) {

.main-product-image {
        display: grid;
        grid-template:
            "product information"
            "product details" 1fr
            "quotes quotes"
            / auto 372px;
        gap: 1rem;
        padding: 0 1rem
}
    }

@media (min-width: 1000px) {

.main-product-image {
        width: 70%;
        min-width: 980px;
        max-width: 1100px;
        grid-column-gap: 1.5rem
}
    }

/* Customize thumbnail slider */

.iconic-woothumbs-all-images-wrap {
    grid-area: product;
    margin-bottom: 1rem;
}

.entry-summary {
    grid-area: details;
}

/* Product Information Area */

#product-info {
    grid-area: information;
    display: grid;
    position: relative;
    gap: 0.5rem;
}

@media (max-width: 700px) {

#product-info {
        justify-items: center
}
    }

#product-info .onsale {
        top: 7.5rem;
        right: 0.5rem;
        z-index: 99;
    }

@media (min-width: 700px) {

#product-info .onsale {
            top: 2rem
    }
        }

@media (max-width: 700px) {

table.variations {
        margin: 0 auto
}
    }

table.variations tr {
        margin-bottom: 1rem;
    }

/* core template uses th for labels; Iconic Swatches only styles td.label, so match it here */

table.variations th {
        display: block;
        color: #555;
        padding: 0;
        font-weight: inherit;
        text-align: inherit;
    }

table.variations strong {
        font-weight: 400;
    }

.iconic-was-chosen-attribute {
    color: #000;
    font-weight: 600;
}

.product_title {
    margin: 0;
}

p.price {
    margin: 0;
    line-height: 1;
    font-size: 1.44em;
    font-weight: 600;
}

.woocommerce-review-link {
    font-size: 0.833em;
}

.size-chart {
    text-align: center;
    font-weight: 100;
    margin-bottom: 1rem;
    font-size: 0.833em;
}

/* Form Section */

@media (max-width: 700px) {

#product-info, .variations_form {
        text-align: center
}
    }

.summary {
    margin: 0 1rem 1rem;
}

@media (min-width: 700px) {

.summary {
        margin: 0
}
    }

.summary h2 {
        font-size: 1rem;
    }

.single_add_to_cart_button {
    font-size: 1.2em;
}

/* Hide qty input */

.product .quantity {
    display: none !important;
}

/* Description */

.description-widget {
    border-top: 1px solid rgba(0, 0, 0, 0.15);
    text-align: left;
}

.description-widget header {
        cursor: pointer;
    }

.description-widget h2 {
        display: inline-block;
        font-weight: 700;
        text-transform: uppercase;
    }

.description-widget .caret {
        float: right;
        margin-right: 0.5em;
    }

.widget-content {
    display: none;
    margin-bottom: 2rem;
}

section.description-widget:nth-last-of-type(1) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.woocommerce-variation-description {
    font-size: 0.833em;
}

@media (max-width: 700px) {

.woocommerce-variation-description {
        text-align: left
}
    }

.woocommerce-variation-price {
    display: none;
}

/* Product Details */

h2.product-details {
    text-decoration: underline;
    font-weight: normal;
    cursor: pointer;
    text-transform: none;
}

.product-details-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    padding: 1rem;
    text-align: left;
    opacity: 0;
    transform: translateY(100%);
    transition: transform 0.7s, opacity 0.5s;
    pointer-events: none;
}

.product-details-modal img {
        width: 80px;
    }

.product-details-modal header {
        padding: 0 1rem 2rem 0;
        display: flex;
    }

@media (min-width: 700px) {

.product-details-modal header {
            padding: 2rem 2rem 0 2rem;
    }
        }

.product-details-modal .close {
        flex-grow: 1;
        font-size: 2em;
        font-weight: 100;
        text-align: right;
        position: relative;
        cursor: pointer;
    }

/* h2 so the page keeps one h1; styled to match the global h1 */

.product-details-modal figcaption h2 {
        font-family: "Tropical";
        font-weight: normal;
        line-height: 0.5;
        font-size: 1.728em;
        margin: 0;
    }

.product-details-modal figure {
        margin: 0 1rem 0 0;
    }

.product-details-modal figcaption {
        display: flex;
        flex-direction: column;
    }

.product-details-modal figcaption p {
            margin: 0;
        }

.product-details-modal strong {
        font-weight: 900;
        line-height: 2;
    }

.product-details-modal p {
        margin-bottom: 1.5rem;
    }

.product-details-flex-container {
    display: flex;
    justify-content: center;
}

.product-details-content-container {
    width: 100%;
    min-height: calc(100vh - 2rem);
    background: #fff;
    max-width: 900px;
    padding: 1rem;
}

@media (min-width: 700px) {

.product-details-content {
        padding: 0 10%
}
    }

@media (min-width: 900px) {

.product-details-content {
        padding: 0 20%
}
    }

.product-details-modal.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
    overflow-y: auto;
}

/* Related Products */

.related.products {
    display: block;
    max-width: 1000px;
    text-align: center;
    margin: 2rem auto;
    padding: 0;
}

.related.products a {
        text-decoration: none;
    }

/* centre the grid instead of the shop's wider desktop margins; phones keep the shop's side margins */

@media (min-width: 600px) {

.related.products .products {
            margin: 0 auto
    }
        }

/*# sourceMappingURL=product.css.map */