/*
Compile-Minify: true
Compile-Area: product, sb-product-reviews, sb-product-review-new, sb-product-review-edit
Compile-OutputGroup: headtag
Compile-Exports: sb-product-review
Compile-Dependencies: bootstrap, site, custom, home
Upgrade-Behavior: Protect
*/

/*
    OutputGroup is headtag, like every other stylesheet in theme2026. The
    upstream plugin ships this file as `bodyendtag`, but both StoreBuilder page
    wrappers emit stylesheets with `@Html.RenderStyles(Model.ThemeResourceArea)`,
    which renders the headtag group — so as bodyendtag this file was never
    emitted on the standalone /{product}/reviews page and it rendered bare.

    Dependencies pull in home (:root tokens + the RefregratorDx @font-face) and
    custom, because the reviews page is a "captive" page: _CaptiveLayout.cshtml
    has @Html.RenderStylesForEverywhere() commented out and no bootstrap CDN
    link, so nothing from the `everywhere` area is guaranteed to be present.
    For the same reason the review templates use no Bootstrap utility classes
    and this file carries its own page gutters — every token below also has a
    literal fallback so the page still reads correctly on its own.

    Colours / fonts otherwise track the theme tokens in everywhere/home.css.
    home.css also sets `* { font-size: 16px !important }`, which is why every
    font-size below needs !important to take effect.

    Surfaces (white fill, #eee hairline, .5rem radius) match the product page's
    "Frequently Bought Together" card in product/sb-product.css; headings and the
    pager match listing/listing.css so the standalone reviews page reads as the
    same site as the category and product pages.
*/

.sb-reviews-shell {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Standalone /{product}/reviews page. The 92.9% width mirrors `.inner-screen`
   in everywhere/custom.css so the page lines up with the header/footer gutters
   on the pages that do load that bundle, and still holds on captive pages that
   don't. */
.sb-review-page,
.sb-review-form-page {
    width: 92.9%;
    margin-left: auto !important;
    margin-right: auto !important;
}

.sb-review-page {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 1.25rem 0 3rem;
    font-family: var(--secondary-font, 'Work Sans', sans-serif);
    color: var(--secondary-color, #383634);
}

/* Centred page title block, same treatment as listing.css `.intro-section`. */
.sb-review-intro {
    text-align: center;
    padding: 1.25rem 0 0;
}

.sb-review-page-title {
    margin: 0 0 .75rem;
    font-family: var(--primary-font, 'RefregratorDx', sans-serif);
    font-size: 2rem !important;
    font-weight: 800;
    line-height: 120%;
    letter-spacing: .33rem;
    text-transform: uppercase;
    color: var(--primary-color, #1c1d1f);
}

.sb-review-intro-product {
    margin: 0;
    font-size: 1rem !important;
    line-height: 170%;
    color: var(--secondary-color, #383634);
}

.sb-review-page-link {
    color: var(--secondary-color, #383634);
    font-weight: 600;
    text-decoration: none;
}

.sb-review-page-link:hover,
.sb-review-page-link:focus {
    color: var(--brand-accent, #4B5320);
    text-decoration: none;
}

.sb-reviews-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.5rem 0;
    margin-bottom: 1.5rem;
    border-bottom: .063rem solid #cccccc;
}

.sb-reviews-header-empty {
    margin-bottom: 0;
}

.sb-reviews-header-copy {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.sb-review-section-title {
    margin: 0;
    font-family: var(--primary-font, 'RefregratorDx', sans-serif);
    font-size: 1.5rem !important;
    font-weight: 800;
    line-height: 120%;
    letter-spacing: .15rem;
    text-transform: uppercase;
    color: var(--black-color, #000);
}

.sb-reviews-count,
.sb-review-section-copy {
    margin: 0;
    color: #565656;
    font-weight: 400;
    line-height: 160%;
}

.sb-reviews-actions,
.sb-review-form-actions,
.sb-review-product-actions,
.sb-review-admin,
.sb-review-votes {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}

.sb-reviews-actions {
    justify-content: flex-end;
}

.sb-review-product-actions {
    gap: 1rem;
    margin-top: .5rem;
}

/* Primary button, matched to #btnProductAddToCart in product/sb-product.css. */
.sb-review-cta,
.sb-review-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: .75rem 1.5rem;
    border: none !important;
    border-radius: .25rem;
    background-color: var(--brand-accent, #4B5320) !important;
    color: #ffffff !important;
    font-family: var(--primary-font, 'RefregratorDx', sans-serif);
    font-weight: 800;
    letter-spacing: .11rem;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: filter .2s ease, background-color .2s ease;
}

.sb-review-cta:hover,
.sb-review-cta:focus,
.sb-review-submit:hover,
.sb-review-submit:focus {
    background-color: var(--brand-accent, #4B5320) !important;
    color: #ffffff !important;
    filter: brightness(.92);
}

.sb-review-link {
    color: var(--brand-accent, #4B5320);
    font-weight: 600;
    text-decoration: none;
}

.sb-review-link:hover,
.sb-review-link:focus {
    color: var(--brand-accent, #4B5320);
    text-decoration: underline;
}

.sb-review-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sb-review-card,
.sb-review-form-card,
.sb-review-product-card {
    padding: 1.5rem;
    border: .063rem solid #eeeeee;
    border-radius: .5rem;
    background-color: var(--background-color, #fff);
}

.sb-review-form-card {
    scroll-margin-top: 2rem;
}

/* The new / edit review templates are whole pages too, so they take the same
   gutters as .sb-review-page plus their own vertical rhythm. */
.sb-review-form-page {
    margin-top: 2rem !important;
    margin-bottom: 3rem !important;
    font-family: var(--secondary-font, 'Work Sans', sans-serif);
    color: var(--secondary-color, #383634);
}

.sb-review-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.sb-review-product-media {
    display: grid;
    grid-template-columns: minmax(0, 13rem) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

.sb-review-product-image {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 13rem;
    padding: .75rem;
    border: .063rem solid #eeeeee;
    border-radius: .5rem;
    background-color: var(--background-color, #fff);
    text-decoration: none !important;
}

.sb-review-product-image:hover {
    border-color: var(--brand-accent, #4B5320);
}

.sb-review-product-image img {
    max-width: 100%;
    height: auto;
    mix-blend-mode: darken;
}

.sb-review-product-details {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    min-width: 0;
}

.sb-review-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.25rem;
    color: #6a6a6a;
    line-height: 150%;
}

.sb-review-meta a {
    color: var(--brand-accent, #4B5320);
    text-decoration: none;
}

.sb-review-meta a:hover,
.sb-review-meta a:focus {
    text-decoration: underline;
}

/* Descriptions carry the full spec sheet, which left unbounded pushes the
   reviews themselves below the fold. Capped and scrolled rather than clipped,
   so the whole description stays reachable on this page. */
.sb-review-product-description {
    color: var(--secondary-color, #383634);
    line-height: 170%;
    max-height: 20.4rem; /* 12 lines x 1rem font-size x 1.7 line-height */
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: .75rem;
    scrollbar-width: thin;
    scrollbar-color: #cccccc transparent;
}

.sb-review-product-description::-webkit-scrollbar {
    width: .375rem;
}

.sb-review-product-description::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background-color: #cccccc;
}

.sb-review-product-description::-webkit-scrollbar-thumb:hover {
    background-color: var(--brand-accent, #4B5320);
}

.sb-review-product-description > :first-child {
    margin-top: 0;
}

.sb-review-product-description > :last-child {
    margin-bottom: 0;
}

.sb-review-form-header {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.sb-review-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 1rem;
}

.sb-review-field-full {
    grid-column: 1 / -1;
}

.sb-review-label,
.sb-review-form-card .control-label {
    width: auto !important;
    margin: 0 .625rem .625rem 0 !important;
    border-bottom: none !important;
    color: var(--black-color, #000) !important;
    font-weight: 600 !important;
    line-height: 140% !important;
    text-align: left !important;
}

.sb-review-form-card .form-control {
    min-height: 3rem;
    border: .063rem solid #949494;
    border-radius: .313rem;
    background-color: var(--background-color, #fff);
    box-shadow: none;
}

.sb-review-form-card textarea.form-control {
    min-height: 10rem;
    padding: .875rem 1rem;
    resize: vertical;
}

.sb-review-form-card .form-control[disabled] {
    background-color: #f0f0f0;
    color: #717171;
}

.sb-review-rating-input {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    min-height: 3rem;
    padding: .75rem 1rem;
    border: .063rem solid #949494;
    border-radius: .313rem;
    background-color: var(--background-color, #fff);
}

.starrating .glyphicon-star {
    font-size: 1.25rem !important;
    color: #b5b5b5;
    cursor: pointer;
    transition: color .2s ease, transform .2s ease;
}

.starrating .glyphicon-star:hover {
    transform: translateY(-1px);
}

.sb-review-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.sb-review-card-copy {
    min-width: 0;
}

.sb-review-title {
    margin: 0;
    color: var(--black-color, #000);
    font-size: 1.125rem !important;
    font-weight: 700;
    line-height: 140%;
}

.sb-review-date {
    margin: .375rem 0 0;
    color: #7a7a7a;
    font-size: .875rem !important;
    line-height: 140%;
}

.sb-review-rating {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    padding: .5rem .75rem;
    border-radius: 999px;
    background-color: var(--accent-color, #f3f3f1);
    white-space: nowrap;
}

.sb-review-rating-label {
    margin-right: .4rem;
    color: #565656;
    font-size: .75rem !important;
    font-weight: 700;
    letter-spacing: .08rem;
    text-transform: uppercase;
}

.sb-review-comments {
    margin: 0;
    color: var(--secondary-color, #383634);
    line-height: 170%;
    white-space: pre-line;
}

.sb-review-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: .063rem solid #eeeeee;
}

.sb-review-helpful-label {
    color: #565656;
    font-size: .95rem !important;
}

.sb-review-vote {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .85rem;
    border: .063rem solid #d3d3d3;
    border-radius: 999px;
    background-color: var(--background-color, #fff);
    color: var(--secondary-color, #383634);
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

.sb-review-vote:hover {
    border-color: var(--brand-accent, #4B5320);
    color: var(--brand-accent, #4B5320);
}

.sb-review-vote.voted {
    cursor: default;
    opacity: .8;
}

.sb-review-vote.is-selected {
    border-color: var(--brand-accent, #4B5320);
    background-color: rgba(75, 83, 32, .08);
    color: var(--brand-accent, #4B5320);
    opacity: 1;
}

/* Secondary / outline button — the "Cancel" action on the new + edit review
   forms and the "Back to product" link on the reviews page. */
.sb-review-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    min-height: 3rem;
    padding: .75rem 1.25rem;
    border: .063rem solid #d0d0d0;
    border-radius: .25rem;
    background-color: var(--background-color, #fff);
    color: var(--secondary-color, #383634);
    font-weight: 700;
    text-decoration: none !important;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

.sb-review-secondary:hover,
.sb-review-secondary:focus {
    border-color: var(--brand-accent, #4B5320);
    color: var(--brand-accent, #4B5320);
    background-color: var(--background-color, #fff);
}

/* Prev / range / next pager, mirroring `.custom-pagination` on the category,
   brand and tag listings (listing/listing.css). */
.sb-review-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin: 1.25rem 0;
    font-weight: 500;
    font-size: 1rem !important;
    color: var(--secondary-color, #383634);
}

.sb-review-page-arrow {
    display: inline-flex;
    align-items: center;
    color: var(--secondary-color, #383634);
    text-decoration: none !important;
}

.sb-review-page-arrow:hover,
.sb-review-page-arrow:focus {
    color: var(--brand-accent, #4B5320);
}

.sb-review-abuse,
.sb-review-delete,
.sb-review-admin .btn-link {
    padding: 0;
    color: var(--secondary-color, #383634) !important;
    font-weight: 600;
    text-decoration: none;
}

.sb-review-abuse:hover,
.sb-review-delete:hover,
.sb-review-admin .btn-link:hover {
    color: var(--brand-accent, #4B5320) !important;
    text-decoration: none;
}

.sb-review-form-card .help-block {
    margin-top: .5rem;
}

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

.star-rating-5 {
    color: var(--brand-accent, #4B5320);
}

.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: var(--brand-accent, #4B5320);
}

.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: #b5b5b5;
}

@media (max-width: 767px) {
    .sb-reviews-header,
    .sb-review-card-header,
    .sb-review-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .sb-reviews-actions {
        justify-content: flex-start;
    }

    .sb-review-page-title {
        font-size: 1.5rem !important;
        letter-spacing: .2rem;
    }

    .sb-review-product-media {
        grid-template-columns: 1fr;
    }

    .sb-review-product-image {
        min-height: 0;
    }

    .sb-review-product-description {
        max-height: 15.3rem; /* 9 lines */
    }

    .sb-review-product-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .sb-review-form-grid {
        grid-template-columns: 1fr;
    }

    .sb-review-card,
    .sb-review-form-card,
    .sb-review-product-card {
        padding: 1.25rem;
    }
}