/* =========================================================================
   Single product page (redesign 2026-09-29)

   Loaded from products/show.blade.php through @stack('styles'), which is the
   last stylesheet in <head>. That is deliberate: it lets this file correct
   main.css and kalasoon.css without either of them being rebuilt, and it keeps
   every rule below scoped to this one page.

   Tokens mirror the ones the product cards use (kalasoon.css, .product-card-new)
   so the page stays on the same palette as the rest of the shop.
   ========================================================================= */

.product-single-page {
    --ps-primary: #00bcd4;
    --ps-primary-dark: #0097a7;
    --ps-light: #ebf6f8;
    --ps-divider: #f1f1f1;
    --ps-border: #e8eaed;
    --ps-muted: #7a7a7a;
    --ps-orange-bg: #fff4e5;
    --ps-orange: #e07b00;
    /* Tick tile for the ported bullet-list style; the SVG stroke in section 8b
       is the same colour written out literally. */
    --ps-tick-soft: rgba(0, 151, 167, 0.07);
    --ps-tick-line: rgba(0, 151, 167, 0.2);
    --ps-radius: 14px;
    --ps-gap: 16px;
}

/* -------------------------------------------------------------------------
   1. Page rhythm
   ------------------------------------------------------------------------- */

.product-single-page .title-breadcrumb-special {
    margin-bottom: 14px;
}

.product-single-page .product-top-row {
    margin-bottom: var(--ps-gap);
    padding: 0;
    background: transparent;
    box-shadow: none;
    border: 0;
}

.product-single-page .product-top-row > .row {
    margin-right: -8px;
    margin-left: -8px;
}

.product-single-page .product-top-col {
    padding-right: 8px;
    padding-left: 8px;
    margin-bottom: var(--ps-gap);
}

/* Each of the three top boxes is its own card. */
.product-single-page .product-gallery-col,
.product-single-page .product-info-main,
.product-single-page .product-top-col--purchase .purchase-box-slot {
    height: 100%;
    background: #fff;
    border: 1px solid var(--ps-border);
    border-radius: var(--ps-radius);
    padding: 18px 16px;
}

.product-single-page .product-services {
    margin-bottom: var(--ps-gap);
    background: #fff;
    border: 1px solid var(--ps-border);
    border-radius: var(--ps-radius);
    padding: 18px 10px 6px;
}

.product-single-page .product-bottom-row {
    margin-right: -8px;
    margin-left: -8px;
}

.product-single-page .product-bottom-main,
.product-single-page .product-bottom-side {
    padding-right: 8px;
    padding-left: 8px;
}

.product-single-page .product-bottom-main > section,
.product-single-page .product-bottom-main > .tabs-product-info {
    background: #fff;
    border: 1px solid var(--ps-border);
    border-radius: var(--ps-radius);
    padding: 18px 16px;
    margin-bottom: var(--ps-gap);
}

.product-single-page .product-bottom-side .purchase-box-slot {
    background: #fff;
    border: 1px solid var(--ps-border);
    border-radius: var(--ps-radius);
    padding: 18px 16px;
    margin-bottom: var(--ps-gap);
}

/* -------------------------------------------------------------------------
   2. Gallery column
   ------------------------------------------------------------------------- */

/* ul.gallery-options is absolutely positioned; it needs a containing block. */
.product-single-page .product-gallery-col {
    position: relative;
}

.product-single-page .gallery-options--edit {
    top: 10px;
    right: 10px;
}

/* main.css absolutely positions .promotion-badge at top:14px with an 80% width
   and a 54px height, which on this page dropped it on top of the main image --
   and behind it, since the gallery paints later. In this column the badge is an
   ordinary in-flow pill instead. */
.product-single-page .product-timeout {
    position: relative;
    z-index: 3;
    padding-top: 0;
    margin-bottom: 10px;
    min-height: 0;
    text-align: center;
}

.product-single-page .product-timeout .promotion-badge {
    position: static;
    width: auto;
    height: auto;
    line-height: 1;
    border-bottom: 0;
    margin: 0;
    font-size: 13px;
}

.product-single-page .product-timeout .promotion-badge.not-available {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 10px;
    background-color: #f1f1f1;
    color: #6c757d;
    font-weight: 700;
}

.product-single-page .product-timeout .product-special {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 10px;
    background: #f5262c;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.7;
}

.product-single-page .product-timeout .countdown-timer {
    margin-top: 8px !important;
}

.product-single-page .product-gallery {
    padding: 0;
    max-width: 100%;
}

.product-single-page .product-gallery .main-gallery .item img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: contain;
}

.product-single-page .product-gallery--empty img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: contain;
    margin: 0 auto;
}

/* --- The overflow bug ---------------------------------------------------
   The thumbnail <ul> used to carry `d-flex justify-content-center`. Owl wraps
   its children in .owl-stage-outer, and a flex item sizes to its content --
   the whole stage -- so a gallery with more thumbnails than fit simply spilled
   out of the column. The class is gone from the markup; these rules make sure
   nothing else can reintroduce the overflow, including main.css's
   `overflow: unset` on the stage wrapper.                                   */
.product-single-page .product-gallery .product-thumbnails {
    display: block !important;
    width: 100%;
    max-width: 100%;
    padding: 9px 34px;
    margin-bottom: 0;
    overflow: hidden;
}

/* overflow-y:visible sitting next to overflow-x:hidden does not stay visible --
   CSS promotes it to `auto`, and that is the scrollbar that showed up on the
   thumbnail strip. Both axes are clipped instead; the active marker below was
   moved inside the tile so nothing needs to escape the box any more. */
.product-single-page .product-gallery .product-thumbnails .owl-stage-outer {
    overflow: hidden !important;
    max-width: 100%;
}

.product-single-page .product-gallery .product-thumbnails .owl-stage {
    display: flex;
    align-items: center;
}

.product-single-page .product-gallery .product-thumbnails .owl-item {
    display: flex;
    justify-content: center;
}

.product-single-page .product-gallery .product-thumbnails > li,
.product-single-page .product-gallery .product-thumbnails .owl-item > li {
    margin: 5px auto;
    max-width: 100%;
}

/* The stock marker is a 2px rule hanging 15px *below* the tile. With the stage
   clipped it would never be seen, and it was half of what made the stage
   overflow in the first place. An inset ring says the same thing from inside. */
.product-single-page .product-gallery .product-thumbnails li.active > a::after {
    display: none;
}

.product-single-page .product-gallery .product-thumbnails li.active {
    border-color: var(--ps-primary);
    box-shadow: inset 0 0 0 1px var(--ps-primary);
}

.product-single-page
    .product-thumbnails.carousel-products
    .owl-nav
    button.owl-next,
.product-single-page
    .product-thumbnails.carousel-products
    .owl-nav
    button.owl-prev {
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
}

/* -------------------------------------------------------------------------
   3. Info column
   ------------------------------------------------------------------------- */

.product-single-page .product-info-main .product-title h1 {
    font-size: 20px;
    line-height: 1.6;
    font-weight: 700;
    color: #1f1f1f;
    /* main.css nowraps this and hides the overflow, which truncates any name
       longer than the column. The heading is the page's h1 -- it wraps. */
    white-space: normal;
    overflow: visible;
    margin-bottom: 4px;
}

.product-single-page .product-info-main .product-title .product-title-en {
    font-size: 13px;
    font-weight: 400;
    color: var(--ps-muted);
    direction: ltr;
    text-align: right;
    margin-bottom: 0;
    line-height: 1.7;
}

.product-single-page .product-info-divider {
    border: 0;
    border-top: 1px solid var(--ps-divider);
    margin: 14px 0 10px;
}

.product-single-page .product-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    min-height: 40px;
}

.product-single-page .product-rating-summary {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

/* .rating-stars is an existing main.css component (grey icons, margin-left:-7px
   so they overlap). Both have to be undone on the `i`, not the wrapper. */
.product-single-page .rating-stars {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    direction: ltr;
}

.product-single-page .rating-stars i {
    margin: 0 1px;
    font-size: 17px;
    line-height: 1;
    color: #ffc107;
}

.product-single-page .rating-stars i.mdi-star-outline {
    color: #dcdcdc;
}

.product-single-page .rating-score {
    font-weight: 700;
    color: #333;
}

/* Shortcut into the reviews tab -- show.js wires the click. It is a <button>
   only because the panel is switched by a plugin and there is no URL to point
   at, so it has to be un-buttoned back into a link here. */
.product-single-page .rating-count {
    padding: 0;
    border: 0;
    border-bottom: 1px dashed currentColor;
    background: none;
    font: inherit;
    color: var(--ps-muted);
    cursor: pointer;
    transition: color 0.15s ease-in;
}

.product-single-page .rating-count:hover,
.product-single-page .rating-count:focus {
    color: var(--primary-color, var(--ps-primary));
    outline: none;
}

/* The action buttons relocated from the gallery: a horizontal strip instead of
   the absolutely positioned vertical stack main.css defines. */
.product-single-page .gallery-options--inline {
    position: static;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    top: auto;
    right: auto;
}

.product-single-page .gallery-options--inline > li {
    margin-bottom: 0;
}

.product-single-page .gallery-options--inline button {
    width: 36px;
    height: 34px;
    font-size: 20px;
    background-color: var(--ps-light);
    border-radius: 9px;
    transition: background-color 0.15s ease-in, color 0.15s ease-in;
}

.product-single-page .gallery-options--inline button:hover {
    background-color: var(--ps-primary);
    color: #fff;
}

.product-single-page .gallery-options--inline button.favorites:hover {
    color: #fff;
}

/* Tooltip flips from "to the right of a stacked button" to "below an inline
   one", arrow included. */
.product-single-page .gallery-options--inline .tooltip-option {
    top: calc(100% + 9px);
    right: 50%;
    transform: translateX(50%);
    width: auto;
    min-width: 108px;
    max-width: 180px;
    padding: 5px 8px;
    border-radius: 6px;
    white-space: nowrap;
}

.product-single-page .gallery-options--inline .tooltip-option::before {
    top: -10px;
    right: 50%;
    transform: translateX(50%);
    border-width: 0 7px 10px 7px;
    border-color: transparent transparent #6f6f6f transparent;
}

/* --- Product features card --- */
.product-single-page .product-features-box {
    margin-top: 14px;
    background: #fbfdfe;
    border: 1px solid var(--ps-divider);
    border-radius: 12px;
    padding: 12px 14px;
}

.product-single-page .product-features-box__title {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--ps-divider);
}

.product-single-page .product-features-box__title i {
    color: var(--ps-primary);
    font-size: 18px;
    line-height: 1;
}

.product-single-page .product-features-box__title h2 {
    font-size: 14px;
    font-weight: 700;
    color: #1f1f1f;
    margin: 0;
}

.product-single-page .product-features-box .little-des {
    font-size: 13px;
    line-height: 2;
    color: #55565a;
    margin-bottom: 8px;
}

/* Standalone row above the features card. */
.product-single-page .product-suggestion {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    color: #3a9d5d;
    margin: 12px 0 0;
    padding: 7px 10px;
    background: #f1faf4;
    border-radius: 10px;
}

.product-single-page .product-suggestion i {
    font-size: 16px;
    line-height: 1;
}

.product-single-page .product-suggestion span {
    font-weight: 700;
}

.product-single-page .product-features-box .product-params {
    height: 132px;
    padding-bottom: 26px;
}

.product-single-page .product-features-box .product-params.active {
    height: auto;
}

.product-single-page .product-features-box .product-params ul {
    margin: 0 0 4px;
}

/* main.css prints the ul's data-title as a pseudo heading; this card already
   has a real one. */
.product-single-page .product-features-box .product-params ul::before {
    content: none;
    display: none;
}

.product-single-page .product-features-box .product-params .sum-more {
    background: #fbfdfe;
}

/* Below the features card, separated by a rule rather than a second box -- two
   stacked cards in one column read as clutter. */
.product-single-page .product-taxonomy {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--ps-divider);
}

.product-single-page .product-taxonomy__row {
    font-size: 13px;
    line-height: 2;
    margin-bottom: 2px;
    color: #55565a;
}

.product-single-page .product-taxonomy__row.size-guide {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}

.product-single-page .product-taxonomy__row.size-guide img {
    width: 22px;
    height: auto;
}

/* styles.css gives .link--with-border-bottom a dashed blue rule; on this page
   the links are plain primary-coloured text. */
.product-single-page .product-taxonomy a {
    color: var(--primary-color, var(--ps-primary));
    text-decoration: none;
    border-bottom: 0;
}

.product-single-page .product-taxonomy a:hover,
.product-single-page .product-taxonomy a:focus {
    color: var(--ps-primary-dark);
    text-decoration: none;
}

/* -------------------------------------------------------------------------
   4. Purchase box
   ------------------------------------------------------------------------- */

.product-single-page .purchase-box-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 10px;
}

/* The blade hangs px-3/pb-3/pt-0 utilities on this element, so the padding has
   to be !important to come out as one even box. */
.product-single-page .purchase-box .card.box-card {
    border: 0;
    box-shadow: none;
    margin-bottom: 0;
    padding: 14px !important;
    background-color: var(--ps-light);
    border-radius: 12px;
}

.product-single-page .purchase-box .card.box-card .box-border {
    border-radius: 12px;
}

.product-single-page .purchase-box .box-Price-number {
    margin-top: 0;
}

.product-single-page .purchase-box .product-variant {
    margin-bottom: 12px;
}

.product-single-page .purchase-box .warranty-notice-box {
    font-size: 12px;
    line-height: 1.8;
    color: #4a4a4a;
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
}

.product-single-page .purchase-box .warranty-notice-box i {
    font-size: 17px;
    vertical-align: middle;
    margin-left: 4px;
}

/* --- Assurances --- */
.product-single-page .purchase-assurances {
    list-style: none;
    margin: 14px 0 0;
    padding: 12px 12px 4px;
    background: var(--ps-light);
    border: 1px solid var(--ps-divider);
    border-radius: 12px;
}

.product-single-page .purchase-assurances > li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: #4a4a4a;
    margin-bottom: 8px;
}

.product-single-page .purchase-assurances > li i {
    font-size: 18px;
    line-height: 1;
    color: var(--ps-primary-dark);
}

/* Same orange treatment the product cards use for a thin inventory. */
.product-single-page .purchase-assurances > li.assurance-low-stock {
    display: inline-flex;
    padding: 0 10px;
    border-radius: 8px;
    background-color: var(--ps-orange-bg);
    color: var(--ps-orange);
    line-height: 30px;
    font-weight: 600;
}

.product-single-page .purchase-assurances > li.assurance-low-stock i {
    color: var(--ps-orange);
}

/* --- Download files (physical products never render this) --- */
.product-single-page .product-files-box {
    border: 0;
    box-shadow: none;
}

.product-single-page .product-files-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.product-single-page .product-files-list > li {
    background: #fff;
    border: 1px solid var(--ps-border);
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 10px;
}

.product-single-page .product-file-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.product-single-page .product-file-title {
    flex: 1 1 auto;
    margin: 0;
}

.product-single-page .product-file-size {
    color: var(--ps-muted);
    font-size: 12px;
}

.product-single-page .product-file-price {
    font-size: 13px;
    margin: 6px 0 8px;
}

.product-single-page .product-file-price del {
    margin-right: 6px;
    font-size: 12px;
}

/* -------------------------------------------------------------------------
   5. Services strip

   main.css scopes its sizing to `footer.main-footer .footer-services`, so the
   base rules have to be repeated here. The responsive overrides in main.css
   and kalasoon.css are unscoped and still apply.
   ------------------------------------------------------------------------- */

.product-single-page .footer-services .row {
    align-items: flex-start;
}

.product-single-page .footer-services .service-item {
    text-align: center;
    position: relative;
    font-size: 13px;
    line-height: 1.692;
    color: #606060;
    letter-spacing: 0.2px;
    padding-bottom: 14px;
    margin: auto;
}

.product-single-page .footer-services .service-item img {
    width: 58px;
    height: 58px;
    margin-bottom: 7px;
}

.product-single-page .footer-services .service-item p {
    margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   6. Video row
   ------------------------------------------------------------------------- */

.product-single-page .product-video-frame {
    position: relative;
    width: 100%;
    margin-top: 12px;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}

.product-single-page .product-video-frame video {
    display: block;
    width: 100%;
    height: auto;
    max-height: 520px;
    outline: none;
}

/* -------------------------------------------------------------------------
   7. Related products + tabs
   ------------------------------------------------------------------------- */

.product-single-page .related-products-section .section-title,
.product-single-page .product-video-section .section-title {
    margin-bottom: 6px;
}

.product-single-page .tabs-product-info {
    margin-bottom: var(--ps-gap);
}

.product-single-page .tabs-product-info .ah-tab-content-wrapper {
    padding: 14px 4px 0;
    margin: 0;
}

/* The plugin stylesheet sizes the strip for a full-width page (16px text,
   15px padding all round) and marks the active tab in black. */
.product-single-page .tabs-product-info .ah-tab > .ah-tab-item {
    padding: 11px 14px;
    font-size: 14.5px;
    color: #55565a;
}

.product-single-page .tabs-product-info .ah-tab > .ah-tab-item:hover,
.product-single-page .tabs-product-info .ah-tab > .ah-tab-item[data-ah-tab-active="true"] {
    color: #1f1f1f;
    border-bottom-color: var(--primary-color, var(--ps-primary));
}

.product-single-page .tabs-product-info .ah-tab .ah-tab-item i {
    font-size: 17px;
    vertical-align: -2px;
}

/* Specification rows. main.css floats a 19% key against a 79% value, which in
   this column leaves Persian labels wrapping to three lines beside a mostly
   empty value cell. Flex, with a third of the width for the key. */
.product-single-page .params .params-list li {
    display: flex;
    float: none;
    width: 100%;
    gap: 8px;
    margin: 0 0 8px;
    padding-right: 0;
}

.product-single-page .params .params-list li .params-list-key,
.product-single-page .params .params-list li .params-list-value {
    float: none;
    margin-bottom: 0;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.9;
}

.product-single-page .params .params-list li .params-list-key {
    flex: 0 0 32%;
    width: 32%;
    color: #55565a;
}

.product-single-page .params .params-list li .params-list-value {
    flex: 1 1 auto;
    width: auto;
}

.product-single-page .params-title {
    font-size: 14px;
    font-weight: 700;
    margin: 16px 0 8px;
}

.product-single-page .tab-empty-note {
    color: var(--ps-muted);
    font-size: 13px;
    margin: 16px 0 6px;
}

.product-single-page .description-product {
    line-height: 2.1;
    font-size: 13.5px;
}

.product-single-page .description-product img {
    max-width: 100%;
    height: auto;
}

/* A pasted <pre> inside admin-authored description HTML must scroll inside the
   tab, never widen the page. Tables are handled below -- they need a wrapper. */
.product-single-page .description-product pre {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

/* -------------------------------------------------------------------------
   Description tables

   These come out of the WYSIWYG with border="1", cellpadding="1", cellspacing
   and a hard-coded style="width:500px", which is why a two-column spec table
   renders as a cramped 3D-bevelled box floating in the middle of the tab. All
   of that is presentational markup, so a plain author rule outranks it -- only
   the inline width needs !important.

   The scroll wrapper is added by products/show.js: a <table> cannot both lay
   out as a table and clip its own overflow, and putting `display: block` on the
   table instead is what made narrow tables collapse to their content width.
   ------------------------------------------------------------------------- */

.product-single-page .description-product .description-table-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 18px 0;
    border: none;
    border-radius: 10px;
}

.product-single-page .description-product table {
    display: table;
    width: 100% !important;
    max-width: none;
    min-width: 320px;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: auto;
    font-size: 13px;
    line-height: 1.9;
    color: #444;
    text-align: right;
}

.product-single-page .description-product table td,
.product-single-page .description-product table th {
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--ps-divider);
    border-left: 1px solid var(--ps-divider);
    vertical-align: middle;
    text-align: right;
    word-break: break-word;
}

/* The frame is drawn by the wrapper, so the cells on the outside edges must not
   double it up. RTL: the first cell of a row is the right-hand one. */
.product-single-page .description-product table tr > *:last-child {
    border-left: 0;
}

.product-single-page .description-product table tr:last-child > * {
    border-bottom: 0;
}

/* Header row. `tbody:first-child` is how a table with no <thead> is spotted --
   these editors emit the heading as a plain first <tr> of the body. */
.product-single-page .description-product table thead th,
.product-single-page .description-product table thead td,
.product-single-page .description-product table > tbody:first-child > tr:first-child > td {
    background-color: var(--ps-light);
    font-weight: 700;
    color: #2b2b2b;
}

.product-single-page .description-product table tbody tr:nth-child(even) {
    background-color: #fbfcfd;
}

/* The thin case the whole section is about: exactly two columns is a key/value
   table, and letting the browser split it on content leaves a wide empty value
   column next to a squeezed key. `:nth-last-child(2)` on the first cell is the
   only way to count columns in CSS. */
.product-single-page .description-product table tr > *:first-child:nth-last-child(2) {
    width: 34%;
    font-weight: 600;
    color: #55565a;
    background-color: #fbfdfe;
}

/* ...but not for the header row, which has its own fill. */
.product-single-page .description-product table thead tr > *:first-child:nth-last-child(2),
.product-single-page .description-product table > tbody:first-child > tr:first-child > td:first-child:nth-last-child(2) {
    background-color: var(--ps-light);
    color: #2b2b2b;
    font-weight: 700;
}

/* Three columns is still narrow enough that a fixed first column helps. */
.product-single-page .description-product table tr > *:first-child:nth-last-child(3) {
    width: 28%;
}

.product-single-page .description-product table p {
    margin: 0;
}

.product-single-page .description-product table img {
    max-width: 100%;
    height: auto;
}


.product-single-page .params-list-value {
    word-break: break-word;
}

/* -------------------------------------------------------------------------
   8. Sticky purchase column

   theiaStickySidebar (initialised in main.js for `.container .sticky-sidebar`)
   does the sticking; CSS position:sticky cannot, because body and .wrapper
   both set overflow-x:hidden !important.
   ------------------------------------------------------------------------- */

.product-single-page .product-bottom-side .theiaStickySidebar {
    will-change: transform;
}

/* -------------------------------------------------------------------------
   8b. Purchase box rhythm

   The box is assembled from bootstrap utilities (mt-4 / mt-3 / mt-2) that were
   tuned for the old full-width layout and read as uneven in a narrow column.
   Each override below is more specific than the single utility class it
   replaces, so no !important is needed.
   ------------------------------------------------------------------------- */

.product-single-page .purchase-box .box-Price-number.box-margin {
    margin: 0;
}

/* Quantity row, separated from the prices by a hairline instead of a gap. */
.product-single-page .purchase-box .box-Price-number > .d-flex:first-child {
    align-items: center;
    margin-bottom: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ps-divider);
}

.product-single-page .purchase-box .box-Price-number > .d-flex:first-child .number {
    font-size: 13px;
    color: #55565a;
}

/* Price rows: one consistent step between them, label and figure on one line. */
.product-single-page .purchase-box .section-title .row > .col-12 > .d-flex {
    align-items: center;
    margin-top: 14px;
}

.product-single-page
    .purchase-box
    .section-title
    .row
    > .col-12
    > .d-flex.single-price-row-customer {
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--ps-divider);
}

.product-single-page .purchase-box .section-title .text-price {
    font-size: 13px;
    color: #55565a;
    white-space: nowrap;
}

.product-single-page .purchase-box .section-title .row .row {
    flex: 1 1 auto;
    margin: 0;
}

.product-single-page .purchase-box .section-title .row .row > .col-12 {
    padding: 0;
}

.product-single-page .purchase-box .price {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
}

.product-single-page .purchase-box .currency {
    font-size: 12px;
    color: var(--ps-muted);
}

.product-single-page .purchase-box del {
    font-size: 13px;
    color: var(--ps-gray, #b2b2b2);
}

.product-single-page .purchase-box .add-to-cart.btn-show-product {
    height: 46px;
    margin-top: 18px;
    border-radius: 13px;
    font-size: 15px;
    font-weight: 700;
}

.product-single-page .purchase-box .warranty-notice-box {
    justify-content: center;
    margin-top: 0;
    display: none !important;
}

.product-single-page .purchase-box .add-to-cart.btn-show-product + .mt-3 {
    margin-top: 12px !important;
}

.product-single-page .purchase-box .box-product-unavailable {
    margin-bottom: 14px;
}

.product-single-page .purchase-box .cart-not-available {
    width: 100%;
    height: 46px;
    border-radius: 13px;
}

/* -------------------------------------------------------------------------
   8c. Related products slider

   Four cards now share the 8/12 column, so the card's own nowrap cart button
   has less room than it does in a full-width grid.
   ------------------------------------------------------------------------- */

.product-single-page .related-products-carousel .owl-stage {
    display: flex;
}

.product-single-page .related-products-carousel .owl-item {
    display: flex;
}

.product-single-page .related-products-carousel .owl-item > * {
    width: 100%;
}

/* The card fills the item and pins its actions to the bottom. The price pair
   below wraps when the two numbers no longer fit side by side, and without
   this a card that wrapped would sit its cart button one line lower than the
   cards either side of it.

   It flexes to fill rather than taking `height: 100%`: owl sizes the stage to
   the tallest item, but the card carries a 10px vertical margin of its own, so
   a full-height card plus that margin overran the stage and had its bottom
   edge -- rounded corner and shadow -- cut off by `overflow: hidden`. As a
   flex item the margin is part of the measurement. */
.product-single-page .related-products-carousel .owl-item > .item {
    display: flex;
    flex-direction: column;
}

.product-single-page .related-products-carousel .product-card-new {
    flex: 1 1 auto;
    height: auto;
    display: flex;
    flex-direction: column;
}

.product-single-page .related-products-carousel .pc-thumb,
.product-single-page .related-products-carousel .pc-title {
    flex: 0 0 auto;
}

.product-single-page .related-products-carousel .pc-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.product-single-page .related-products-carousel .pc-actions {
    margin-top: auto;
    padding-top: 12px;
}

/* Prices wrap as whole numbers rather than colliding.

   `.pc-prices` is already a wrapping flex row, but both numbers are shrinkable
   by default, so instead of wrapping they squeezed until the sale price and
   the struck-through one touched -- and then broke mid-figure. Pinning their
   size and forbidding an internal line break turns the existing wrap into the
   graceful step it was meant to be: side by side while they fit, stacked the
   moment they do not, which is the same shape the phone layout already uses. */
.product-single-page .related-products-carousel .pc-prices {
    gap: 0 10px;
    align-content: flex-start;
}

.product-single-page .related-products-carousel .pc-price,
.product-single-page .related-products-carousel .pc-price-old {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* A step down from the grid's 17/13. These cards are the narrowest the card
   design is used at -- the widest the slider ever gets is about 240px a card --
   and at the grid sizes a pair of nine-digit tomans filled the line edge to
   edge with no gap left between them. Two sizes down buys that gap back at
   every count, so the pair reads as two numbers rather than one run of digits,
   and the wrap above stays the exception rather than the normal state. */
.product-single-page .related-products-carousel .pc-price {
    font-size: 15px;
}

.product-single-page .related-products-carousel .pc-price-old {
    font-size: 12px;
}

/* Same treatment for the two labelled figures a trade account sees: they are
   wider than the plain pair, so they are the first thing to need the wrap. */
.product-single-page .related-products-carousel .pc-price-row {
    flex-wrap: wrap;
    gap: 4px 10px;
}

.product-single-page .related-products-carousel .pc-price-row .pc-price-group {
    flex: 1 1 auto;
}

/* The `.pc-price` step-down above matches `.pc-price-customer` too (both class
   names sit on the same span, at the same specificity, and this file loads
   after kalasoon.css), so the customer line's own smaller size is restated
   here rather than being silently promoted to the partner line's size. */
.product-single-page .related-products-carousel .pc-price-row .pc-price-customer {
    font-size: 13px;
}

.product-single-page .related-products-carousel .pc-cart-btn {
    gap: 4px;
    padding: 0 8px;
    font-size: 12px;
    overflow: hidden;
}

.product-single-page .related-products-carousel .pc-cart-btn span {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The slider dropped `product-carousel` (main.js initialises that class with
   items:1, and it would claim the element before show.js runs), which also
   dropped the nav styling scoped to it. Restated here, inset rather than
   overhanging so the arrows stay inside the card. */
.product-single-page .related-products-carousel .owl-nav button {
    position: absolute;
    top: 50%;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    line-height: 37px !important;
    text-align: center;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 8px 9px 0 rgba(0, 0, 0, 0.12);
    font-size: 34px;
    color: #6a6a6a;
    outline: none;
    opacity: 1;
    transition: 0.3s;
    z-index: 2;
}

.product-single-page .related-products-carousel .owl-nav button.owl-next {
    left: -6px;
    cursor: pointer;
}

.product-single-page .related-products-carousel .owl-nav button.owl-prev {
    right: -6px;
    cursor: pointer;
}

.product-single-page .related-products-carousel .owl-nav button:hover {
    background-color: #fff;
    color: #000;
}

.product-single-page .related-products-carousel .owl-nav button.disabled {
    opacity: 0 !important;
    pointer-events: none;
}

.product-single-page .related-products-section {
    position: relative;
}

/* -------------------------------------------------------------------------
   8b. Ticked lists

   The partnership landing page marks its bullet lists with a small rounded
   tile and a tick rather than a dot, and the same treatment is reused here for
   the feature list in the info column and for the admin-authored description.
   It is drawn entirely with ::before so nothing has to be added to the stored
   HTML -- the description comes out of the editor as a plain <ul><li>.

   This section sits after the two it overrides (the features card in 5 and the
   description in 8): the selectors below tie on specificity with theirs, so
   only source order decides, and it has to be this one that wins.
   ------------------------------------------------------------------------- */

.product-single-page .product-info-main ul:not(.gallery-options),
.product-single-page .description-product ul {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
}

/* Absolute tile rather than a flex row: the description is arbitrary editor
   HTML, and an <li> that stays a normal block keeps long text wrapping with a
   hanging indent instead of turning every inline child into a flex item. */
.product-single-page .product-info-main ul:not(.gallery-options) > li,
.product-single-page .description-product ul > li {
    position: relative;
    display: block;
    float: none;
    width: auto;
    margin: 0 0 8px;
    padding: 0 32px 0 0;
    font-size: 13px;
    line-height: 1.95;
    color: #444;
}

.product-single-page .product-info-main ul:not(.gallery-options) > li:last-child,
.product-single-page .description-product ul > li:last-child {
    margin-bottom: 0;
}

/* The tick is an inline SVG data URI, and a data URI cannot read a custom
   property -- the stroke is --ps-primary-dark written out as %230097a7 and has
   to be changed in step with it. The !important is aimed at styles.css's
   `.product-params ul li:before { background: var(--primary-color) !important }`,
   which would otherwise repaint the tile as a solid cyan block. */
.product-single-page .product-info-main ul:not(.gallery-options) > li::before,
.product-single-page .description-product ul > li::before {
    content: "";
    position: absolute;
    top: 3px;
    right: 0;
    left: auto;
    width: 22px;
    height: 22px;
    margin: 0;
    border-radius: 7px;
    border: 1px solid var(--ps-tick-line);
    background: var(--ps-tick-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%230097a7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center !important;
}

.product-single-page .product-info-main ul:not(.gallery-options) > li::after,
.product-single-page .description-product ul > li::after {
    content: none;
}

/* Key: value rows in the features card. The first span is already bold from
   main.css; it only needs to stop being an inline-block so a long value wraps
   under the key instead of pushing the row wide. */
.product-single-page .product-features-box .product-params ul {
    margin: 2px 0 4px;
}

.product-single-page .product-features-box .product-params ul > li {
    font-size: 12.5px;
    line-height: 1.85;
    margin-bottom: 7px;
}

.product-single-page .product-features-box .product-params ul > li span {
    display: inline;
    margin-left: 4px;
}

.product-single-page .product-features-box .product-params ul > li span:first-child {
    color: #55565a;
}

/* Nested lists keep a plain disc: a second level of tiles reads as a second
   list rather than as a child of the row above it. */
.product-single-page .description-product ul ul,
.product-single-page .description-product ul ol {
    margin: 6px 0 0;
    padding-right: 18px;
    list-style: disc;
}

.product-single-page .description-product ul ol {
    list-style: decimal;
}

.product-single-page .description-product ul ul > li,
.product-single-page .description-product ul ol > li {
    display: list-item;
    padding-right: 0;
    margin-bottom: 2px;
}

.product-single-page .description-product ul ul > li::before,
.product-single-page .description-product ul ol > li::before {
    content: none;
}

/* Ordered lists in the description stay numbered -- only bullets become ticks. */
.product-single-page .description-product ol {
    padding-right: 20px;
    margin: 14px 0;
}

.product-single-page .description-product ol > li {
    margin-bottom: 6px;
}

/* -------------------------------------------------------------------------
   9. Responsive

   The page is laid out for the desktop three-column top row; everything below
   narrows the type and the gaps as the columns collapse, so the phone view is
   not the desktop view with the same 14-16px rhythm crammed into 360px.
   ------------------------------------------------------------------------- */

/* Tablet and below: the purchase box is already the full-width third block of
   the top row, so the sticky clone would just repeat it. */
@media (max-width: 991.98px) {
    .product-single-page {
        --ps-gap: 14px;
    }

    .product-single-page .product-bottom-side {
        display: none;
    }

    .product-single-page .product-bottom-main {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .product-single-page .product-gallery .main-gallery .item img {
        max-height: 340px;
    }

    .product-single-page .product-info-main .product-title h1 {
        font-size: 18px;
    }

    /* Below 992 the purchase box is a full-width block, so the price no longer
       needs to shout to be found in a narrow column. */
    .product-single-page .purchase-box .price {
        font-size: 17px;
    }

    .product-single-page .params .params-list li .params-list-key {
        flex: 0 0 34%;
        width: 34%;
    }
}

@media (max-width: 767.98px) {
    .product-single-page {
        --ps-gap: 12px;
    }

    .product-single-page .product-gallery-col,
    .product-single-page .product-info-main,
    .product-single-page .product-top-col--purchase .purchase-box-slot,
    .product-single-page .product-bottom-main > section,
    .product-single-page .product-bottom-main > .tabs-product-info,
    .product-single-page .product-services {
        padding: 14px 12px;
        border-radius: 12px;
    }

    .product-single-page .product-top-col {
        margin-bottom: 12px;
    }

    /* main.css keeps the trail on one nowrap line and ellipsises the overflow,
       which on a phone means the last two crumbs are simply gone. It wraps. */
    .product-single-page .title-breadcrumb-special .breadcrumb nav {
        white-space: normal;
        overflow: visible;
        line-height: 2.1;
    }

    .product-single-page .title-breadcrumb-special .breadcrumb a,
    .product-single-page .title-breadcrumb-special .breadcrumb nav > span {
        font-size: 12px;
    }

    .product-single-page .title-breadcrumb-special .breadcrumb nav > span {
        color: #8a8a8a;
        font-weight: 400;
    }

    .product-single-page .product-meta-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .product-single-page .gallery-options--inline {
        width: 100%;
        justify-content: flex-start;
    }

    /* A tooltip anchored to the first button would hang off the right edge on a
       narrow screen; the touch UI does not surface it anyway. */
    .product-single-page .gallery-options--inline .tooltip-option {
        display: none;
    }

    .product-single-page .product-gallery .product-thumbnails {
        padding: 9px 26px;
    }

    .product-single-page .product-gallery .main-gallery .item img {
        max-height: 300px;
    }

    .product-single-page .tabs-product-info .ah-tab-content-wrapper {
        padding: 12px 0 0;
    }

    .product-single-page .product-video-frame video {
        max-height: 260px;
    }

    /* Three tabs at 14.5px do not fit 360px; the strip is what shrinks, not the
       labels' legibility -- the icons go instead. */
    .product-single-page .tabs-product-info .ah-tab > .ah-tab-item {
        padding: 10px 8px;
        font-size: 13px;
    }

    .product-single-page .tabs-product-info .ah-tab .ah-tab-item i {
        display: none;
    }

    .product-single-page .product-features-box {
        padding: 12px;
    }

    .product-single-page .product-features-box .little-des,
    .product-single-page .product-taxonomy__row,
    .product-single-page .description-product {
        font-size: 12.5px;
    }

    .product-single-page .description-product {
        line-height: 1.95;
    }

    /* Ticked lists: the tile and its gutter come down with the type. */
    .product-single-page .product-info-main ul:not(.gallery-options) > li,
    .product-single-page .description-product ul > li {
        font-size: 12.5px;
        padding-left: 0;
        padding-right: 28px;
        margin-bottom: 7px;
    }

    .product-single-page .product-info-main ul:not(.gallery-options) > li::before,
    .product-single-page .description-product ul > li::before {
        width: 20px;
        height: 20px;
        border-radius: 6px;
        background-size: 10px 10px !important;
    }

    .product-single-page .description-product .description-table-scroll {
        margin: 14px 0;
    }

    .product-single-page .description-product table {
        font-size: 12.5px;
        line-height: 1.8;
        min-width: 300px;
    }

    .product-single-page .description-product table td,
    .product-single-page .description-product table th {
        padding: 8px 10px;
    }

    .product-single-page .purchase-box .card.box-card {
        padding: 12px !important;
    }

    .product-single-page .purchase-assurances {
        margin-top: 12px;
        padding: 10px 10px 2px;
    }

    .product-single-page .purchase-assurances > li {
        font-size: 12px;
        margin-bottom: 7px;
    }

    .product-single-page .purchase-box .add-to-cart.btn-show-product {
        height: 44px;
        margin-top: 14px;
        font-size: 14px;
    }
}

@media (max-width: 575.98px) {
    .product-single-page {
        --ps-gap: 10px;
    }

    .product-single-page .product-info-main .product-title h1 {
        font-size: 16px;
    }

    .product-single-page .product-info-main .product-title .product-title-en {
        font-size: 12px;
    }

    .product-single-page .rating-stars {
        font-size: 15px;
    }

    .product-single-page .rating-stars i {
        font-size: 15px;
    }

    .product-single-page .product-rating-summary {
        font-size: 12px;
    }

    .product-single-page .product-gallery .product-thumbnails {
        padding: 9px 22px;
    }

    .product-single-page .product-gallery .main-gallery .item img {
        max-height: 240px;
    }

    /* kalasoon.css puts four service tiles across the phone width at 11px; two
       across at a readable size is the same strip without the squeeze. Its
       font-size carries !important, so this one has to as well. */
    .product-single-page .footer-services .service-item {
        flex: 0 0 50%;
        max-width: 50%;
        font-size: 12px !important;
        padding-bottom: 10px;
    }

    .product-single-page .footer-services .service-item img {
        width: 46px;
        height: 46px;
    }

    /* A 34% key column leaves roughly nine characters per line for the value.
       Key over value instead. */
    .product-single-page .params .params-list li {
        flex-direction: column;
        gap: 3px;
        margin-bottom: 10px;
    }

    .product-single-page .params .params-list li .params-list-key,
    .product-single-page .params .params-list li .params-list-value {
        flex: none;
        width: 100%;
        padding: 8px 11px;
        font-size: 12.5px;
        line-height: 1.8;
    }

    .product-single-page .params .params-list li .params-list-key {
        font-weight: 700;
    }

    .product-single-page .product-features-box__title h2,
    .product-single-page .params-title {
        font-size: 13.5px;
    }

    .product-single-page .product-suggestion {
        font-size: 12px;
    }

    .product-single-page .product-info-main ul:not(.gallery-options) > li,
    .product-single-page .description-product ul > li {
        font-size: 12px;
        padding-right: 26px;
        margin-bottom: 6px;
    }

    .product-single-page .product-info-main ul:not(.gallery-options) > li::before,
    .product-single-page .description-product ul > li::before {
        top: 2px;
        width: 18px;
        height: 18px;
        border-radius: 6px;
        background-size: 9px 9px !important;
    }

    .product-single-page .description-product table {
        font-size: 12px;
        min-width: 280px;
    }

    .product-single-page .description-product table td,
    .product-single-page .description-product table th {
        padding: 7px 9px;
    }

    /* Less room, so the key column gives up a little of its share. */
    .product-single-page .description-product table tr > *:first-child:nth-last-child(2) {
        width: 40%;
    }

    .product-single-page .purchase-box .price {
        font-size: 16px;
    }

    .product-single-page .tabs-product-info .ah-tab > .ah-tab-item {
        padding: 9px 6px;
        font-size: 12.5px;
    }
}

/* -------------------------------------------------------------------------
   10. Reviews tab (the third panel)

   This panel had no rules of its own, so it rendered entirely out of the
   blog-comment block in main.css plus one stray rule in styles.css, neither of
   which was written for it:

     - .comments-summary-note is styled as a grid column (width:100%, 30px of
       side padding), so the call to action sat indented from the rest of the
       tab inside its own col-md-6, with the other half of the row empty.
     - .comment-body reserves `padding-right: 40px` for the round avatar that
       .comments-area draws on the blog. The review markup has no avatar, so
       every card carried a dead 40px gutter.
     - `.comments-area ol.comment-list .footer` (bottom/left) and
       `.user-suggest` in styles.css (bottom/right) are both position:absolute
       against .comment-body, sharing 35px of reserved padding. With a
       strengths/weaknesses block present they overlapped it.
     - .rate-product is 18px #394eea in a different font -- indigo on a cyan
       page.

   Everything below is scoped to .product-single-page, so the blog's
   components/comments partial keeps the look it was designed for.
   ------------------------------------------------------------------------- */

/* --- 10a. Header card: the aggregate score beside the call to action --- */

.product-single-page .comments-tab .reviews-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin-top: 14px;
    padding: 16px;
    background: #fbfdfe;
    border: 1px solid var(--ps-divider);
    border-radius: 12px;
}

.product-single-page .comments-tab .reviews-head-score {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 128px;
    padding: 12px 14px;
    background: var(--ps-light);
    border-radius: 12px;
    text-align: center;
}

.product-single-page .comments-tab .reviews-score-value {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
    color: #1f1f1f;
    direction: ltr;
}

.product-single-page .comments-tab .reviews-score-count {
    font-size: 12px;
    line-height: 1.7;
    color: var(--ps-muted);
}

.product-single-page .comments-tab .reviews-head-cta {
    /* min-width:0 so a long note wraps instead of widening the flex row. */
    flex: 1 1 260px;
    min-width: 0;
}

.product-single-page .comments-tab .reviews-cta-title {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.6;
    color: #1f1f1f;
    margin-bottom: 5px;
}

.product-single-page .comments-tab .reviews-cta-note {
    font-size: 12.5px;
    line-height: 1.95;
    color: var(--ps-muted);
    margin: 0 0 12px;
    max-width: 70ch;
}

/* A signed-in visitor gets no note, so the button follows the title directly. */
.product-single-page .comments-tab .reviews-cta-title + .btn-primary-cm {
    margin-top: 6px;
}

/* The page's own primary button (purchase-box .add-to-cart) is text-only and
   full width, so main.css's absolute icon slot was never exercised there:
   `.btn-with-icon i` is position:absolute at right:10px with a hard-coded
   `top` that kalasoon.css then forces to 0. On a button of this height that
   drops the icon against the top edge. A flex row with a gap removes the
   dependency on both offsets, which is also how every other icon+label pair on
   this page is built (.purchase-assurances, .gallery-options--inline).

   The fill and the ring stay as they are -- that is the same treatment the
   add-to-cart button gets, and this button should read as the same control. */
.product-single-page .comments-tab .reviews-head-cta .btn-primary-cm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 42px;
    padding: 0 18px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: filter 0.15s ease-in;
}

.product-single-page .comments-tab .reviews-head-cta .btn-primary-cm.btn-with-icon i {
    position: static;
    font-size: 19px;
    line-height: 1;
    top: auto;
    right: auto;
}

/* The translucent sheen is sized for the 50px padding slot the rule above
   gives up, so it would otherwise sit over the label. Hover moves to the whole
   button -- brightness() works without having to restate the palette colour,
   which styles.css sets with !important. */
.product-single-page .comments-tab .reviews-head-cta .btn-primary-cm.btn-with-icon::before {
    display: none;
}

.product-single-page .comments-tab .reviews-head-cta .btn-primary-cm:hover,
.product-single-page .comments-tab .reviews-head-cta .btn-primary-cm:focus {
    color: #fff;
    filter: brightness(0.94);
}

/* --- 10b. Review cards --- */

.product-single-page .comments-tab .comments-area {
    float: none;
    margin-top: 18px;
}

.product-single-page .comments-tab .comments-area .comment-list {
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.product-single-page .comments-tab .comments-area .comment-list > li {
    list-style: none;
    margin: 0;
}

/* Same card as the rest of the page: 1px --ps-border, --ps-radius, no shadow.
   main.css gives this a blue-grey drop shadow and the avatar gutter. */
.product-single-page .comments-tab .comments-area .comment-list li .comment-body {
    margin: 0 0 12px;
    padding: 14px 16px;
    font-size: 13px;
    line-height: 1.95;
    background: #fff;
    border: 1px solid var(--ps-border);
    border-radius: var(--ps-radius);
    box-shadow: none;
    -webkit-box-shadow: none;
}

.product-single-page .comments-tab .comments-area .comment-list li:last-child .comment-body {
    margin-bottom: 0;
}

/* Rating + verified-buyer badge. */
.product-single-page .comments-tab .review-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.product-single-page .comments-tab .review-stars i {
    font-size: 15px;
}

.product-single-page .comments-tab .review-badge {
    /* RTL: margin-left pushes the badge to the far (left) end of the row. */
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 8px;
    background-color: var(--ps-light);
    color: var(--ps-primary-dark);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.9;
    white-space: nowrap;
}

.product-single-page .comments-tab .review-badge i {
    font-size: 14px;
    line-height: 1;
}

.product-single-page .comments-tab .comments-area .comment-list .comment-title {
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.7;
    color: #1f1f1f;
    margin: 8px 0 2px;
}

/* main.css closes this line with a 1px rule and 20px of padding either side,
   which on a card this size reads as a second heading. */
.product-single-page .comments-tab .comments-area .comment-list .comment-author {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin: 0 0 8px;
    padding: 0;
    border: 0;
    font-size: 12px;
    line-height: 1.8;
}

.product-single-page .comments-tab .review-author-name {
    font-weight: 600;
    color: #55565a;
}

.product-single-page .comments-tab .review-date {
    position: relative;
    padding-right: 12px;
    color: var(--ps-muted);
}

.product-single-page .comments-tab .review-date::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 4px;
    width: 3px;
    height: 3px;
    margin-top: -1px;
    border-radius: 50%;
    background-color: #cfcfcf;
}

/* Not justified: nothing else on this page is, and justified Persian in a
   column this wide opens rivers between the words. */
.product-single-page .comments-tab .comments-area .comment-list li .comment-body p.review-text {
    margin: 0;
    font-size: 13px;
    line-height: 2;
    color: #444;
    text-align: start;
}

/* --- 10c. Strengths and weaknesses ---

   These were a bootstrap .row of col-md-4, and the two boxes also carry
   `width: 100%` plus 10px of side padding from main.css, so they stacked
   full-width with their text indented against the card edge. Two tinted
   panels side by side instead, falling to one column when there is no room. */

.product-single-page .comments-tab .review-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.product-single-page .comments-tab .review-points > div {
    flex: 1 1 240px;
    min-width: 0;
    width: auto;
    padding: 10px 12px;
    border-radius: 10px;
}

.product-single-page .comments-tab .content-expert-evaluation-positive {
    background-color: rgba(0, 191, 214, 0.06);
    border: 1px solid rgba(0, 191, 214, 0.18);
}

.product-single-page .comments-tab .content-expert-evaluation-negative {
    background-color: rgba(244, 67, 54, 0.045);
    border: 1px solid rgba(244, 67, 54, 0.15);
}

/* main.css colours these #00bfd6 and #f44336; pulled onto the page's own
   --ps-primary-dark and the same red the "would not recommend" pill uses, both
   of which carry enough contrast against the tinted panel behind them. */
.product-single-page .comments-tab .review-points > div > span {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.8;
    margin-bottom: 2px;
}

.product-single-page .comments-tab .content-expert-evaluation-positive > span {
    color: var(--ps-primary-dark);
}

.product-single-page .comments-tab .content-expert-evaluation-negative > span {
    color: #c62828;
}

.product-single-page .comments-tab .review-points ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.product-single-page .comments-tab .review-points ul li {
    margin: 3px 0;
    padding-right: 14px;
    font-size: 12.5px;
    line-height: 1.9;
    color: #55565a;
}

.product-single-page .comments-tab .review-points ul li:before {
    top: 11px;
    width: 5px;
    height: 5px;
}

/* main.css tints only the positive bullets and leaves the negative ones the
   default grey, which inside a red panel reads as unstyled. */
.product-single-page .comments-tab .content-expert-evaluation-positive ul li:before {
    background-color: var(--ps-primary-dark);
}

.product-single-page .comments-tab .content-expert-evaluation-negative ul li:before {
    background-color: #d9534f;
}

/* --- 10d. Card footer: recommendation + votes ---

   One normal-flow row. Both halves used to be absolutely positioned against
   .comment-body and pinned to its bottom corners. */

.product-single-page .comments-tab .review-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--ps-divider);
}

.product-single-page .comments-tab .user-suggest {
    position: static;
    bottom: auto;
    right: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.9;
}

.product-single-page .comments-tab .user-suggest i {
    font-size: 15px;
    line-height: 1;
}

.product-single-page .comments-tab .user-suggest--yes {
    background-color: rgba(46, 125, 50, 0.08);
    color: #2e7d32;
}

.product-single-page .comments-tab .user-suggest--unsure {
    background-color: #f4f5f6;
    color: #6b6b6b;
}

.product-single-page .comments-tab .user-suggest--no {
    background-color: rgba(211, 47, 47, 0.07);
    color: #c62828;
}

/* RTL: margin-left carries the vote pair to the left end of the row, with or
   without a recommendation pill beside it. */
.product-single-page .comments-tab .comments-likes {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    text-align: start;
}

.product-single-page .comments-tab .comments-likes .btn-like {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--ps-border);
    border-radius: 9px;
    background: #fff;
    color: #6b6b6b;
    font-size: 12.5px;
    line-height: 1;
    transition: border-color 0.15s ease-in, color 0.15s ease-in;
}

.product-single-page .comments-tab .comments-likes .btn-like i {
    font-size: 15px;
    line-height: 1;
}

.product-single-page .comments-tab .comments-likes .btn-like:hover {
    border-color: var(--primary-color, var(--ps-primary));
    color: var(--ps-primary-dark);
}

/* ProductController::show takes the latest 10. */
.product-single-page .comments-tab .reviews-more-note {
    margin: 12px 0 0;
    font-size: 12px;
    line-height: 1.8;
    color: var(--ps-muted);
    text-align: center;
}

/* --- 10e. Responsive --- */

@media (max-width: 767.98px) {
    .product-single-page .comments-tab .reviews-head {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 14px;
    }

    /* The score turns into a banner across the top of the card: a 128px tile
       centred above a paragraph reads as an orphan. */
    .product-single-page .comments-tab .reviews-head-score {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        min-width: 0;
        padding: 9px 12px;
        text-align: start;
    }

    .product-single-page .comments-tab .reviews-score-value {
        font-size: 22px;
    }

    .product-single-page .comments-tab .reviews-score-count {
        margin-right: auto;
    }

    .product-single-page .comments-tab .reviews-cta-title {
        font-size: 13.5px;
    }

    .product-single-page .comments-tab .reviews-cta-note {
        font-size: 12px;
        line-height: 1.9;
    }

    .product-single-page .comments-tab .reviews-head-cta .btn-primary-cm {
        width: 100%;
        height: 40px;
        font-size: 13.5px;
    }

    .product-single-page .comments-tab .comments-area .comment-list li .comment-body {
        padding: 12px 13px;
        font-size: 12.5px;
    }

    .product-single-page .comments-tab .comments-area .comment-list .comment-title {
        font-size: 13.5px;
    }

    .product-single-page .comments-tab .comments-area .comment-list li .comment-body p.review-text {
        font-size: 12.5px;
        line-height: 1.95;
    }

    .product-single-page .comments-tab .review-points > div {
        flex: 1 1 100%;
    }
}

@media (max-width: 575.98px) {
    /* The badge drops under the stars rather than squeezing them. */
    .product-single-page .comments-tab .review-badge {
        margin-left: 0;
    }

    .product-single-page .comments-tab .review-footer {
        gap: 8px;
    }

    .product-single-page .comments-tab .comments-likes {
        margin-left: 0;
        width: 100%;
        justify-content: flex-end;
    }

    .product-single-page .comments-tab .reviews-score-count {
        font-size: 11.5px;
    }
}


/* -------------------------------------------------------------------------
   10f. Anonymous option in the add-review modal

   products/show.blade.php includes the modal AFTER </main>, so it sits outside
   `.product-single-page` and cannot be reached by the page scope the rest of
   this file uses -- nor by the --ps-* tokens, which are declared on that
   element. #add-product-review-modal is the scope instead, and the few colours
   below are the token values written out literally. Keep them in step with
   section 0.
   ------------------------------------------------------------------------- */

#add-product-review-modal .review-anonymous {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 12px 13px;
    background: #fbfdfe;
    border: 1px solid #f1f1f1;
    border-radius: 12px;
    cursor: pointer;
}

/* The native box is taken off-screen rather than display:none so it stays
   focusable and keeps announcing its checked state to a screen reader. */
#add-product-review-modal .review-anonymous input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

#add-product-review-modal .review-anonymous-box {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    background: #fff;
    border: 1px solid #cfd8dc;
    border-radius: 6px;
    transition: background-color 0.15s ease-in, border-color 0.15s ease-in;
}

#add-product-review-modal .review-anonymous-box i {
    font-size: 15px;
    line-height: 1;
    color: #fff;
    opacity: 0;
    transition: opacity 0.15s ease-in;
}

#add-product-review-modal .review-anonymous input:checked + .review-anonymous-box {
    background-color: #0097a7;
    border-color: #0097a7;
}

#add-product-review-modal .review-anonymous input:checked + .review-anonymous-box i {
    opacity: 1;
}

/* The input is off-screen, so the ring has to be drawn on the proxy box or
   keyboard focus is invisible. */
#add-product-review-modal .review-anonymous input:focus-visible + .review-anonymous-box {
    box-shadow: 0 0 0 3px rgba(0, 151, 167, 0.25);
}

#add-product-review-modal .review-anonymous-text {
    min-width: 0;
}

#add-product-review-modal .review-anonymous-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.8;
    color: #1f1f1f;
}

#add-product-review-modal .review-anonymous-label i {
    font-size: 16px;
    line-height: 1;
    color: #0097a7;
}

#add-product-review-modal .review-anonymous-text small {
    display: block;
    font-size: 11.5px;
    line-height: 1.8;
    color: #7a7a7a;
}


/* -------------------------------------------------------------------------
   10g. Add-review modal: dialog, fields and footer

   Same scope rule as 10f. styles.css and main.css still carry the old
   theme's rules for .product-review-rate (32px emoji tiles, display:none
   radios), .ui-input--add-point (an absolutely placed '+' drawn by ::before)
   and .ui-dynamic-label (an absolute '×' slot), and ltr.css mirrors some of
   their offsets. Everything below resets those explicitly and uses logical
   properties, so one set of rules holds in both directions.
   ------------------------------------------------------------------------- */

#add-product-review-modal .review-modal-dialog {
    max-width: 960px;
}

#add-product-review-modal .modal-content {
    border: 0;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

/* --- Header --- */

#add-product-review-modal .modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid #f1f1f1;
}

#add-product-review-modal .review-modal-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #ebf6f8;
    color: #0097a7;
    font-size: 22px;
    line-height: 1;
}

#add-product-review-modal .review-modal-heading {
    flex: 1 1 auto;
    min-width: 0;
}

#add-product-review-modal .modal-title {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.6;
    color: #1f1f1f;
}

#add-product-review-modal .review-modal-product {
    display: block;
    overflow: hidden;
    font-size: 12.5px;
    line-height: 1.8;
    color: #7a7a7a;
    white-space: nowrap;
    text-overflow: ellipsis;
}

#add-product-review-modal .review-modal-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: #f5f6f7;
    color: #5f6368;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease-in, color 0.15s ease-in;
}

#add-product-review-modal .review-modal-close:hover {
    background: #eceff1;
    color: #1f1f1f;
}

#add-product-review-modal .review-modal-close:focus {
    outline: 0;
}

#add-product-review-modal .review-modal-close:focus-visible {
    box-shadow: 0 0 0 3px rgba(0, 151, 167, 0.25);
}

/* --- Body: form beside the guide --- */

#add-product-review-modal .modal-body {
    padding: 20px;
}

#add-product-review-modal .review-modal-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 270px;
    gap: 24px;
    align-items: start;
}

#add-product-review-modal .review-modal-form {
    min-width: 0;
}

#add-product-review-modal .review-modal-guide {
    position: sticky;
    top: 0;
}

#add-product-review-modal .review-modal-guide details {
    padding: 14px 16px;
    background: #f7fbfc;
    border: 1px solid #e3f1f4;
    border-radius: 14px;
}

#add-product-review-modal .review-modal-guide summary {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.7;
    color: #1f1f1f;
    list-style: none;
    cursor: pointer;
    outline: 0;
}

#add-product-review-modal .review-modal-guide summary::-webkit-details-marker {
    display: none;
}

#add-product-review-modal .review-modal-guide summary:focus-visible {
    border-radius: 6px;
    box-shadow: 0 0 0 3px rgba(0, 151, 167, 0.25);
}

#add-product-review-modal .review-modal-guide summary > .mdi:first-child {
    font-size: 19px;
    line-height: 1;
    color: #0097a7;
}

#add-product-review-modal .review-guide-chevron {
    margin-inline-start: auto;
    font-size: 18px;
    line-height: 1;
    color: #7a7a7a;
    transition: transform 0.2s ease-in;
}

#add-product-review-modal .review-modal-guide details[open] .review-guide-chevron {
    transform: rotate(180deg);
}

#add-product-review-modal .review-guide-body {
    margin-top: 10px;
    font-size: 12.5px;
    line-height: 2;
    color: #5f6368;
}

/* The admin can replace the body with its own HTML
   (dt_product_reviews_description); keep any heading it brings in scale. */
#add-product-review-modal .review-guide-body h1,
#add-product-review-modal .review-guide-body h2,
#add-product-review-modal .review-guide-body h3,
#add-product-review-modal .review-guide-body h4 {
    margin: 0 0 6px;
    font-size: 13.5px;
    font-weight: 700;
    color: #1f1f1f;
}

#add-product-review-modal .review-guide-body p {
    margin: 0 0 8px;
}

#add-product-review-modal .review-guide-body ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#add-product-review-modal .review-guide-body li {
    position: relative;
    margin-bottom: 6px;
    padding-inline-start: 16px;
}

#add-product-review-modal .review-guide-body li:last-child {
    margin-bottom: 0;
}

#add-product-review-modal .review-guide-body li::before {
    content: '';
    position: absolute;
    top: 0.8em;
    inset-inline-start: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00bcd4;
}

/* --- Fields --- */

#add-product-review-modal .review-field {
    min-width: 0;
    margin: 0 0 18px;
    padding: 0;
    border: 0;
}

/* Used on <legend> and <label> alike; both arrive with Bootstrap margins
   and the legend with a 1.5rem font size. */
#add-product-review-modal .review-field-label {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin: 0 0 8px;
    padding: 0;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.7;
    color: #1f1f1f;
}

#add-product-review-modal .review-required {
    color: #e5394f;
}

#add-product-review-modal .review-rate-readout {
    margin-inline-start: auto;
    padding: 1px 10px;
    border-radius: 999px;
    background: #ebf6f8;
    color: #0097a7;
    font-size: 12px;
    font-weight: 700;
}

#add-product-review-modal .review-rate-readout:empty {
    display: none;
}

#add-product-review-modal .review-input {
    display: block;
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 0 14px;
    font-family: inherit;
    font-size: 13.5px;
    color: #1f1f1f;
    background: #fff;
    border: 1px solid #e8eaed;
    border-radius: 10px;
    outline: 0;
    box-shadow: none;
    transition: border-color 0.15s ease-in, box-shadow 0.15s ease-in;
}

#add-product-review-modal .review-input::placeholder {
    color: #a0a7ae;
    opacity: 1;
}

#add-product-review-modal .review-input:hover {
    border-color: #cfd8dc;
}

#add-product-review-modal .review-input:focus {
    border-color: #00bcd4;
    box-shadow: 0 0 0 3px rgba(0, 188, 212, 0.15);
}

#add-product-review-modal .review-input:disabled {
    background: #f7f8f9;
    cursor: not-allowed;
}

#add-product-review-modal .review-textarea {
    height: auto;
    min-height: 128px;
    padding: 12px 14px;
    line-height: 1.9;
    resize: vertical;
}

#add-product-review-modal .review-field-foot {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
}

#add-product-review-modal .review-counter {
    font-size: 11.5px;
    color: #9aa0a6;
}

/* --- Rating and recommendation tiles ---

   The radios stay in the tree (visually hidden, still focusable) rather than
   display:none: arrow keys keep working, and the `required` on the first
   rating radio needs a focusable control to report against. The tile is the
   <label> right after each radio. */

#add-product-review-modal .product-review-rate,
#add-product-review-modal .product-review-suggest {
    position: relative;
    display: grid;
    gap: 8px;
    margin: 0;
}

#add-product-review-modal .product-review-rate {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

#add-product-review-modal .product-review-suggest {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

#add-product-review-modal .product-review-rate input,
#add-product-review-modal .product-review-suggest input {
    display: block;
    position: absolute;
    bottom: 0;
    inset-inline-start: 50%;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

#add-product-review-modal .review-rate-item,
#add-product-review-modal .review-suggest-item {
    --tile-color: #0097a7;
    --tile-bg: #ebf6f8;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    margin: 0;
    background: #fff;
    border: 1px solid #e8eaed;
    border-radius: 12px;
    color: #5f6368;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.15s ease-in, background-color 0.15s ease-in, color 0.15s ease-in;
}

#add-product-review-modal .review-rate-item {
    flex-direction: column;
    gap: 4px;
    min-height: 78px;
    padding: 10px 4px 8px;
    font-size: 12px;
    line-height: 1.5;
}

#add-product-review-modal .review-suggest-item {
    gap: 6px;
    min-height: 44px;
    padding: 6px 8px;
    font-size: 12.5px;
    line-height: 1.6;
}

#add-product-review-modal .review-rate-item i,
#add-product-review-modal .review-suggest-item i {
    line-height: 1;
    color: #b0b8bf;
    transition: color 0.15s ease-in, transform 0.15s ease-in;
}

#add-product-review-modal .review-rate-item i {
    font-size: 28px;
}

#add-product-review-modal .review-suggest-item i {
    font-size: 18px;
}

#add-product-review-modal .review-rate-item span {
    white-space: nowrap;
}

#add-product-review-modal .review-rate-item:hover,
#add-product-review-modal .review-suggest-item:hover {
    background: #fbfdfe;
    border-color: #cfd8dc;
}

#add-product-review-modal .review-rate-item:hover i,
#add-product-review-modal .review-suggest-item:hover i {
    color: var(--tile-color);
}

/* One colour per step, sad to happy, so the picked tile reads at a glance. */
#add-product-review-modal .review-rate-item--1,
#add-product-review-modal .review-suggest-item--no {
    --tile-color: #e5394f;
    --tile-bg: #fff3f4;
}

#add-product-review-modal .review-rate-item--2 {
    --tile-color: #e07b00;
    --tile-bg: #fff4e5;
}

#add-product-review-modal .review-rate-item--3,
#add-product-review-modal .review-suggest-item--unsure {
    --tile-color: #c98a00;
    --tile-bg: #fff9e6;
}

#add-product-review-modal .review-rate-item--4 {
    --tile-color: #0097a7;
    --tile-bg: #ebf6f8;
}

#add-product-review-modal .review-rate-item--5,
#add-product-review-modal .review-suggest-item--yes {
    --tile-color: #00a36c;
    --tile-bg: #e8f7f0;
}

#add-product-review-modal input:checked + .review-rate-item,
#add-product-review-modal input:checked + .review-suggest-item {
    background: var(--tile-bg);
    border-color: var(--tile-color);
    box-shadow: inset 0 0 0 1px var(--tile-color);
    color: var(--tile-color);
}

#add-product-review-modal input:checked + .review-rate-item i,
#add-product-review-modal input:checked + .review-suggest-item i {
    color: var(--tile-color);
}

#add-product-review-modal input:checked + .review-rate-item i {
    transform: scale(1.1);
}

#add-product-review-modal input:focus-visible + .review-rate-item,
#add-product-review-modal input:focus-visible + .review-suggest-item {
    box-shadow: 0 0 0 3px rgba(0, 151, 167, 0.25);
}

/* --- Strengths and weaknesses --- */

#add-product-review-modal .review-points-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
}

#add-product-review-modal .review-point-field .review-field-label i {
    font-size: 17px;
    line-height: 1;
}

#add-product-review-modal .review-point-field--positive .review-field-label i {
    color: #0097a7;
}

#add-product-review-modal .review-point-field--negative .review-field-label i {
    color: #e5394f;
}

#add-product-review-modal .review-point-count {
    margin-inline-start: auto;
    font-size: 11.5px;
    font-weight: 600;
    color: #9aa0a6;
}

#add-product-review-modal .ui-input--add-point {
    position: static;
    display: flex;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    line-height: normal;
}

#add-product-review-modal .ui-input--add-point .ui-input-field {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 14px;
}

#add-product-review-modal .ui-input--add-point .ui-input-point {
    position: static;
    flex: 0 0 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: #ebf6f8;
    color: #0097a7;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease-in, color 0.15s ease-in;
}

#add-product-review-modal .ui-input--add-point .ui-input-point::before {
    content: none;
}

#add-product-review-modal .review-point-field--negative .ui-input-point {
    background: #fff3f4;
    color: #e5394f;
}

#add-product-review-modal .review-point-field--positive .ui-input-point:not(:disabled):hover {
    background: #0097a7;
    color: #fff;
}

#add-product-review-modal .review-point-field--negative .ui-input-point:not(:disabled):hover {
    background: #e5394f;
    color: #fff;
}

#add-product-review-modal .ui-input--add-point .ui-input-point:disabled {
    background: #f3f4f5;
    color: #b8bec4;
    cursor: not-allowed;
}

#add-product-review-modal .ui-input--add-point .ui-input-point:focus {
    outline: 0;
}

#add-product-review-modal .ui-input--add-point .ui-input-point:focus-visible {
    box-shadow: 0 0 0 3px rgba(0, 151, 167, 0.25);
}

#add-product-review-modal .form-comment-dynamic-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    margin: 8px 0 0;
}

#add-product-review-modal .form-comment-dynamic-labels:empty {
    margin: 0;
}

#add-product-review-modal .form-comment-dynamic-labels .ui-dynamic-label {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    max-width: 100%;
    margin: 0;
    padding-block: 3px;
    padding-inline: 12px 4px;
    border-radius: 999px;
    font-size: 12.5px;
    line-height: 1.8;
}

#add-product-review-modal .ui-dynamic-label--positive {
    background: #ebf6f8;
    color: #00838f;
}

#add-product-review-modal .ui-dynamic-label--negative {
    background: #fff3f4;
    color: #d32f45;
}

#add-product-review-modal .ui-dynamic-label-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

#add-product-review-modal .ui-dynamic-label .ui-dynamic-label-remove {
    position: static;
    flex: 0 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
}

#add-product-review-modal .ui-dynamic-label .ui-dynamic-label-remove:hover {
    background: rgba(0, 0, 0, 0.06);
    opacity: 1;
}

#add-product-review-modal .ui-dynamic-label .ui-dynamic-label-remove::before {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
    font-size: 17px;
    line-height: 1;
}

/* --- Footer --- */

#add-product-review-modal .modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 20px;
    background: #fff;
    border-top: 1px solid #f1f1f1;
}

#add-product-review-modal .modal-footer > * {
    margin: 0;
}

#add-product-review-modal .review-cancel {
    height: 44px;
    padding: 0 20px;
    background: #fff;
    border: 1px solid #e8eaed;
    border-radius: 12px;
    color: #5f6368;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease-in;
}

#add-product-review-modal .review-cancel:hover {
    background: #f7f8f9;
}

/* Fill and ring come from .btn-primary-cm, as on the page's own buttons. */
#add-product-review-modal .review-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 170px;
    height: 44px;
    padding: 0 22px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.15s ease-in, opacity 0.15s ease-in;
}

#add-product-review-modal .review-submit i {
    font-size: 18px;
    line-height: 1;
}

/* mdi-send points right; in RTL the message goes the other way. */
[dir='rtl'] #add-product-review-modal .review-submit i {
    transform: scaleX(-1);
}

#add-product-review-modal .review-submit:hover,
#add-product-review-modal .review-submit:focus {
    color: #fff;
    filter: brightness(0.94);
}

#add-product-review-modal .review-submit:disabled {
    opacity: 0.65;
    cursor: progress;
}

/* --- Narrower dialogs --- */

@media (max-width: 991.98px) {
    #add-product-review-modal .review-modal-dialog {
        max-width: 640px;
    }

    /* The guide moves above the form and starts collapsed (show.js). */
    #add-product-review-modal .review-modal-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    #add-product-review-modal .review-modal-guide {
        position: static;
        order: -1;
    }

    #add-product-review-modal .review-modal-guide details {
        padding: 11px 14px;
    }
}

@media (max-width: 575.98px) {
    #add-product-review-modal .modal-header {
        padding: 12px 14px;
    }

    #add-product-review-modal .review-modal-icon {
        display: none;
    }

    #add-product-review-modal .modal-body {
        padding: 14px;
    }

    #add-product-review-modal .product-review-rate {
        gap: 6px;
    }

    #add-product-review-modal .review-rate-item {
        min-height: 66px;
        padding: 8px 2px 6px;
        font-size: 11px;
    }

    #add-product-review-modal .review-rate-item i {
        font-size: 24px;
    }

    #add-product-review-modal .review-suggest-item {
        flex-direction: column;
        gap: 2px;
        font-size: 11.5px;
    }

    #add-product-review-modal .review-points-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    #add-product-review-modal .modal-footer {
        padding: 10px 14px;
    }

    #add-product-review-modal .review-submit {
        flex: 1 1 auto;
        min-width: 0;
    }
}