/*
NOTE: OutputGroup was "bodyendtag". CSS only ever reaches the browser through
SbHtml.RenderStyles (Utilities/SbHtml.cs), which requests just the "headinline"
and "headtag" groups -- "bodyendtag" is a JS-bundle concept (see RenderScripts)
and is never fetched for CSS. So every rule in this file -- the write-a-review
form styling AND the review-list styling below -- has been compiled but never
actually served to a browser. The review form's plain, unstyled look wasn't a
markup problem; the CSS meant to style it was simply never being loaded.
*/
   
.product-review-section {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 0.063rem solid #CCCCCC;
}

.review-form-heading {
    font-family: var(--primary-font);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: 0.125rem;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.review-form-subheading {
    color: #555;
    margin-bottom: 1.5rem;
}

#sb-product-review .form-group {
    margin-bottom: 1.25rem;
}

#sb-product-review .control-label {
    font-weight: 600;
    margin-bottom: 0.375rem;
    display: block;
}

#sb-product-review .form-control {
    border: 0.063rem solid #CCCCCC;
    border-radius: 0;
    box-shadow: none;
    padding: 0.625rem 0.75rem;
    font-size: 0.9375rem;
    line-height: 160%;
    width: 100%;
}

#sb-product-review .form-control:focus {
    border-color: var(--brand-accent);
    box-shadow: none;
    outline: none;
}

#sb-product-review textarea.form-control {
    min-height: 7.5rem;
    resize: vertical;
}

#sb-product-review .starrating {
    font-size: 1.5rem;
    margin-top: 0.375rem;
    color: #959595;
}

#sb-product-review #submit-review {
    padding: 0.625rem 2rem;
    font-family: var(--primary-font);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.1rem;
    text-transform: uppercase;
    border-radius: 0;
}

.star-rating-0 {
    color: #959595;
}

.star-rating-5 {
    color: #DF6923;
}

.star-rating-1 .star-1,
.star-rating-2 .star-1, .star-rating-2 .star-2,
.star-rating-3 .star-1, .star-rating-3 .star-2, .star-rating-3 .star-3,
.star-rating-4 .star-1, .star-rating-4 .star-2, .star-rating-4 .star-3, .star-rating-4 .star-4 {
    color: #DF6923;
}

.star-rating-4 .star-5,
.star-rating-3 .star-5, .star-rating-3 .star-4,
.star-rating-2 .star-5, .star-rating-2 .star-4, .star-rating-2 .star-3,
.star-rating-1 .star-5, .star-rating-1 .star-4, .star-rating-1 .star-3, .star-rating-1 .star-2 {
    color: #959595;
}

/* Review list (templates.sb-product-review-list.hbs) — replaces the old Bootstrap-3
   .row/.col-sm-*/pull-right grid with the flex/gap layout the rest of the redesign uses. */
.sb-review {
    padding: 1.5rem 0;
    border-bottom: 0.063rem solid #CCCCCC;
}

.sb-review:first-child {
    padding-top: 0;
}

.sb-review-title {
    font-family: var(--primary-font);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.05rem;
    text-transform: uppercase;
    color: #000;
}

.sb-review-date {
    font-size: 0.8125rem;
    color: #949494;
    white-space: nowrap;
}

.sb-review .rating {
    margin: 0.5rem 0;
    font-size: 0.875rem;
}

.sb-review-comments {
    margin: 0.75rem 0;
    line-height: 160%;
    color: #333;
}

.sb-review-votes {
    font-size: 0.875rem;
    color: #555;
}

.sb-review-upvote,
.sb-review-downvote {
    cursor: pointer;
    margin-left: 0.5rem;
    font-weight: 600;
}

.sb-review-actions {
    display: flex;
    gap: 1rem;
}

.sb-review-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--brand-accent);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.sb-review-link:hover {
    color: #3a8a1f;
    text-decoration: underline;
}
/* notify modal */
@media (min-width: 576px) {
    .modal.notifyme-modal-container .modal-dialog {
        max-width: 550px;
    }
}

.modal.notifyme-modal-container .modal-header {
    justify-content: center;
}

.modal.notifyme-modal-container .modal-title {
    padding: 10px 0;
}

.modal.notifyme-modal-container .close {
    position: absolute;
    top: 15px;
    right: 15px;
}

.modal.notifyme-modal-container .modal-product-title {
    font-weight: normal;
}

.modal.notifyme-modal-container .btn-orange {
    border-radius: 0;
    font-weight: 700;
    padding: 7px 15px;
    border: 2px solid #ffcb47;
}

.modal.notifyme-modal-container .btn-default {
    border-radius: 0;
    font-weight: 700;
    padding: 7px 15px;
    color: black;
    border: 2px solid black;
    margin-left: .5rem;
}
/*
    Apply to the product option if you want to hide if only one variant available
    e.g. {{#unless HasMultipleValues}}sb-hide-selector-option{{/unless}}
    Files: sb-productselector-color.hbs, sb-productselector-size.hbs, sb-productselector-radio-button.hbs
*/

.product-page-main-container {
    margin: 0 auto !important;
    /* column-gap: 2.5rem; */
}

.sb-hide-selector-option {
    display: none;
}

.input-number {
    border: none !important;
    outline: none !important;
    background-color: #F2F0EA !important;
    box-shadow: none !important;
}

.thumnail-medium {
    margin-bottom: 10px !important;
}


.sb-product-selector-availability {
    padding: 0 !important;
}

.radio-size {
    border: .063rem solid #949494;
    padding: .75rem 1rem;
    font-size: .875rem !important;
    min-width: 5rem;
}

.radio-size:hover {
    border: .063rem solid #949494;
    /* color: #F2F0EA;
    background-color: #383634; */
}

.btn:active, .btn.active {
    color: #F2F0EA;
    box-shadow: none !important;
}

/* Server-rendered thumbnail rows (before sb-product-gallery.js rebuilds the carousel from the
   selected variant's images, or when a product has no variant images at all): only the active
   row is laid out as a centred flex row. Bootstrap 3 hides the other .item rows; an id rule here
   used to outrank that and show every row at once. Rows the gallery script builds have no
   item-thumbnails class and keep Bootstrap's own layout. */
.gallery .carousel-inner > .item.item-thumbnails.active {
    display: flex;
    justify-content: center;
    margin: 0 auto;
}

@media screen and (max-width: 768px) {
    .sb-product-selector-primary .sb-selector-form {
        padding: 0;
    }

    .product-price-main {
        font-size: 18px !important;
    }

    #btnProductAddToCart {
        width: 100% !important;
    }
    .sb-product-selector-quantity {
        width: 100% !important;
    }

    #product-amount {
        padding: 20px 30% !important;
    }

    .size-carousel-div {
        display: flex;
        overflow-x: auto;
    }
    
    .sb-product-selector-primary .sb-selector-option .sb-selector-input-group {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: .25rem;
    }
}

.stock-unavailable {
    color: #ef2424 !important;
}

.sb-product-selector-primary .radio-color {
    width: 100%;
    height: 3rem;
    border-radius: .125rem;
}

/*
    In the product page - selector section, if the variant is not available
    display "select your {option name}" in yellow
*/
.row .col-sm-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.select-your-option {
    color: #b0971a !important;
}

.sale {
    background-color: #ffb09c;
    width: fit-content;
    margin: 0;
    padding: 10px 13px;
    border-radius: 4px;
}

.product-page-tabs {
    padding-top: 4.5rem !important;
}

.product-page-tabs .nav-tabs {
    justify-content: center;
    gap: 3rem;
}

.product-page-tabs #product-tab-accordion .panel-default {
    background-color: transparent !important;
    border: none !important;
    border-top: .063rem solid #CCCCCC !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin-top: 0 !important;
    padding: 0 !important;
}

.product-page-tabs #product-tab-accordion .panel-default .panel-heading {
    background-color: transparent !important;
    padding: 1rem 0 !important;
}

.product-page-tabs #product-tab-accordion .panel-default .panel-heading .panel-title a {
    display: block;
    font-family: var(--primary-font);
    font-size: 1.125rem !important;
    font-weight: 600;
    line-height: 120%;
    letter-spacing: .125rem;
    text-transform: uppercase;
    width: 100%;
    text-decoration: none !important;
    color: #000 !important;
}

.tab-content {
    max-width: 46.875rem;
    margin-left: auto;
    margin-right: auto;
}

.tab-content #description {
    font-weight: 400;
    line-height: 160%;
}

.tab-content #description ul,
.tab-content #description ol {
    padding-left: 1.5rem;
    margin-bottom: 1rem;
}

.tab-content #description ul {
    list-style: disc;
}

.tab-content #description ol {
    list-style: decimal;
}

.tab-content #description li {
    line-height: 160%;
    margin-bottom: 0.375rem;
}

.tab-content #description table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.tab-content #description table th,
.tab-content #description table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 0.063rem solid #CCCCCC;
    text-align: left;
}

.tab-content #description table th {
    font-weight: 700;
}

#specifications p {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 0.063rem solid #CCCCCC;
    padding: 0.625rem 0;
    margin: 0;
    line-height: 160%;
}

#specifications h4 {
    font-family: var(--primary-font);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: 0.125rem;
    text-transform: uppercase;
}

#specifications p span {
    font-weight: 600;
    text-align: right;
    color: #333;
}

/* Reviews-tab summary header (sb-product.hbs), matching the same design language as
   #specifications above and .review-form-heading in templates.sb-product-review.css. */
.reviews-summary-header {
    padding-bottom: 1.5rem;
    border-bottom: 0.063rem solid #CCCCCC;
    margin-bottom: 1.5rem;
}

.reviews-heading {
    font-family: var(--primary-font);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: 0.125rem;
    text-transform: uppercase;
    color: #000;
    margin: 0 0 0.375rem;
}

.reviews-count {
    color: #949494;
    margin: 0;
}

.reviews-link {
    color: var(--brand-accent);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.reviews-link:hover {
    color: #3a8a1f;
    text-decoration: underline;
}

/* Echoes #btnProductAddToCart's black/Barlow Condensed/uppercase treatment so both of the
   page's primary CTAs read as the same button family. */
.reviews-cta-btn {
    display: inline-block;
    background-color: #000;
    color: #F2F0EA;
    font-family: var(--primary-font);
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.08rem;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.625rem 1.25rem;
    border-radius: 0.25rem;
    white-space: nowrap;
}

.reviews-cta-btn:hover {
    background-color: #222;
    color: #F2F0EA;
}

/* .nav-tabs li {
    margin-bottom: 1px;
} */

/* .nav-tabs li:active {
    
} */

.main-gallery-container-div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2.5rem;
    padding-left: 0 !important;
    padding-right: 0 !important;
}


@media (max-width: 768px) {
  .main-gallery-container-div {
    grid-template-columns: 1fr;
  }

  .size-carousel-div {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .stock .availability-text {
    font-size: 1rem !important;
  }
}

#main-gallery-container,
.sb-product-container {
    padding: 0 !important;
}

.sb-product-container {
    height: fit-content;
    position: sticky;
    top: 2rem;
}

#main-gallery-image-link {
    padding: 0 !important;
    width: min(100vh - 15rem, 100%);
    min-width: 21.25rem;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
    height: auto;
}

#main-gallery-image {
    margin: 0 !important;
}

.nav-tabs > li > a {
    font-family: var(--primary-font);
    font-size: 2.25rem !important;
    line-height: 120%;
    letter-spacing: .18rem;
    color: #000 !important;
}

.nav-tabs > li.active > a {
    border: none !important;
    font-weight: 600 !important;
    border-bottom: var(--brand-accent) solid .125rem !important;
}

.nav > li > a:hover {
    border: none !important;
    background-color: transparent !important;
    border-bottom: .125rem solid var(--brand-accent) !important;
}

.thumbnail {
    border: none !important;
}

.product-name-main {
    font-family: var(--primary-font);
    font-size: 2rem !important;
    letter-spacing: .2rem;
    line-height: 120%;
    font-weight: 600;
    color: #000 !important;
    text-transform: uppercase;
}

.mobile-product-name-main.product-name-main {
    font-size: 1.75rem !important;
    padding-bottom: 0 !important;
}

.product-price-main {
    font-size: 2rem !important;
    font-weight: 600;
    line-height: 140%;
    color: var(--brand-accent) !important;
}

.mobile-product-price-main.product-price-main {
    font-size: 1.5rem !important;
    margin: 0 !important;
}

.product-counter {
    width: 35%;
    padding: .69rem .75rem;
    text-align: center;
    height: 3rem;
    border-radius: .313rem;
    border: .063rem solid #949494;
    font-size: 1rem;
    line-height: 120%;
    color: #1c1d1f;
    box-sizing: border-box;
    font-family: Work Sans, sans-serif;
}

.double-arrow-right {
    background-color: var(--brand-accent);
    position: absolute;
    right: 0;
    height: 100%;
    padding: 0 1.25rem;
    display: flex;
    align-items: center;
}

/* Add to Cart sits under the wholesale table, which can run to dozens of rows. Keep the button
   in that spot but pin it to the bottom of the screen while the table scrolls past, so it
   isn't pushed out of reach. Sticky also keeps it the containing block for the arrow badge. */
#btnProductAddToCart {
    position: sticky;
    bottom: 1rem;
    z-index: 5;
    box-shadow: 0 .25rem 1rem rgba(0, 0, 0, .18);
    width: 50%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: #000 !important;
    height: 3rem;
    padding: .625rem 1.25rem;
    border-radius: .25rem;
    color: #FFFFFF;
}

/* Locked until the page has fully loaded (AddToCartOperation.js removes the class on window load). */
#btnProductAddToCart.is-page-loading {
    opacity: .6;
    cursor: wait;
    pointer-events: none;
}

/* Bootstrap's .overflow-x-hidden on the product container makes it a scroll container, which
   stops position: sticky above from following the page. clip hides the overflow the same way
   without that side effect. The container is a grid item: hidden let it shrink to its column,
   clip doesn't, so min-width: 0 keeps the wide wholesale table from stretching the page on phones. */
.sb-product-container.overflow-x-hidden {
    overflow-x: clip !important;
    min-width: 0;
}

#btnProductAddToCart #buyButtonText {
    font-family: var(--primary-font);
    font-weight: 600;
    font-size: clamp(.8rem, 2vw, 1rem) !important;
    line-height: normal;
    letter-spacing: .11rem;
    text-transform: uppercase;
    text-decoration: none;
}

.col-xs-6 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.control-label {
    width: 100% !important;
    text-align: left !important;
    border-bottom: .063rem solid #CCCCCC;
}

.control-label,
.quantity-label {
    font-weight: 400 !important;
    line-height: 160% !important;
}

.control-label .colorlabel,
.control-label .sizelabel {
    font-weight: 600 !important;
    color: #000 !important;
}

.availability-text {
    font-size: 1.125rem !important;
    font-style: normal;
    font-weight: 600;
    line-height: 140%;
    color: var(--brand-accent);
}

/**/

/* Mobile gallery */
#mobile-gallery-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}
#mobile-gallery-container::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.mobile-gallery-wrapper {
    display: flex;
    gap: 10px;
    padding: 10px 0;
}

.mobile-gallery-item {
    flex: 0 0 auto;
    width: 100%;
    max-width: 340px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-placeholder {
    width: 100%;
    height: 100%;
    background-color: #fff;
}

/* Wholesale table styles */
/*
    Wholesale grid. Presented as a self-contained card rather than a bare
    Bootstrap table: dark uppercase header in the site's display font, hairline
    row rules instead of zebra striping, and the accent (--brand-accent) for
    every interactive state - replacing the stock Bootstrap blue.
*/
.wholesale-table {
    margin-top: 20px;
    background-color: #fff;
    border: .063rem solid #e5e5e5;
    border-radius: .375rem;
    overflow: hidden;
    box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .04);
}

.wholesale-table .table {
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.wholesale-table thead th {
    background-color: #fff;
    color: #1c1d1f;
    font-family: var(--primary-font);
    font-size: .8125rem !important;
    font-weight: 600;
    letter-spacing: .08rem;
    text-transform: uppercase;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    border: 0;
    border-bottom: .125rem solid var(--brand-accent);
    padding: .875rem .75rem;
}

.wholesale-table tbody td {
    text-align: center;
    vertical-align: middle;
    background-color: #fff;
    border: 0;
    border-top: .063rem solid #efefef;
    padding: .75rem;
    transition: background-color .2s ease;
}

.wholesale-table tbody tr:first-child td {
    border-top: 0;
}

.wholesale-table tbody tr:hover td {
    background-color: #f7f7f5;
}

/* Price is the number customers scan for - give it weight. */
.wholesale-table tbody .price {
    font-weight: 700 !important;
    color: #1c1d1f !important;
}

.wholesale-table .quantity-input {
    width: 4.5rem;
    height: 2.5rem;
    text-align: center;
    margin: 0 auto;
    border: .063rem solid #ddd;
    border-radius: .25rem;
    font-weight: 600;
    box-shadow: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.wholesale-table .row-selected td {
    background-color: #f2f9ee !important;
    border-color: #dcecd3;
}

/* Accent stripe marks the selected row without shouting. */
.wholesale-table .row-selected td:first-child {
    box-shadow: inset .1875rem 0 0 var(--brand-accent);
}

.wholesale-table input[type="number"]:focus {
    border-color: var(--brand-accent);
    box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brand-accent) 20%, transparent);
}

/* table thead tr th {
    text-align: left !important;
} */

/* Collapsible size options styles */
.size-toggle-btn {
    background: none !important;
    border: none !important;
    color: var(--brand-accent) !important;
    transition: color 0.3s ease;
}

.size-toggle-btn:hover {
    color: #3a8a1f !important;
}

.size-toggle-btn:focus {
    outline: none !important;
    box-shadow: none !important;
}

.size-toggle-btn .glyphicon {
    transition: transform 0.3s ease;
}

/* Ensure the collapse animation works smoothly */
.collapse {
    transition: height 0.35s ease;
}

/* Style the size options container when collapsed */
#size-options-size .sb-selector-input-group {
    margin-top: 0.5rem;
}

/* Mobile responsive adjustments for collapsible size options */
@media (max-width: 768px) {
    .size-toggle-btn {
        font-size: 12px !important;
    }
    
    .size-carousel-div {
        display: flex;
        overflow-x: auto;
        gap: 0.5rem;
        padding: 0.5rem 0;
    }
}

/* Currency label after product page prices, in the same muted style as the
   currency tag on listing cards (.price-now span in home.css).*/
.product-page-main-container .product-price-main .price,
.product-page-main-container .wholesale-table .price {
    font-size: inherit !important;
}

.product-page-main-container .price-currency {
    margin-left: .25rem;
    font-family: var(--secondary-font), sans-serif;
    font-size: 14px !important;
    font-weight: 700;
    line-height: 17px;
    color: #7E7F81;
}

.product-page-main-container .wholesale-table .price-currency {
    font-size: 11px !important;
}
.sb-productselector-select select {
    /*background-color: #dbdddc;*/
    border:1px solid #ddd;
    border-radius:4px;
    padding:3px;
    margin-left:5px;
    margin-bottom:10px;
    -moz-appearance: menulist;
    -webkit-appearance: menulist;
    background-image: none;
}

#sb-productselector-select-modal .modal-dialog {
    width: 75%;
    margin: 0 auto;
}

#sb-productselector-select-modal .modal-body {
    padding-top: 0px;
    padding-bottom: 0px;
    overflow-y: scroll;
}

#sb-productselector-select-modal .modal-dialog .row {
    line-height: 48px;
    background-color: #f6f6f6;
    padding-left: 5px;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
    border-top:1px solid #d7d7d7;
}

#sb-productselector-select-modal .modal-dialog .row.selected {
    background-color: #ddd;
    border-left: 2px solid cyan;
}
.sb-quickview-modal > .modal-dialog {
    width: 80% !important;
}