, so
only background-color may be set here — the `background` shorthand would blank
the icons out. background-size is narrowed so the glyph sits inside the ring
instead of filling it. */
.page-product .social-sharing ul li {
width: 40px;
height: 40px;
margin-right: 0;
border-radius: 50%;
border: 1px solid var(--sk-border);
background-color: var(--sk-surface);
background-size: 18px 18px;
background-repeat: no-repeat;
transition: border-color var(--sk-dur) var(--sk-ease),
background-color var(--sk-dur) var(--sk-ease);
}
@media (hover: hover) {
.page-product .social-sharing ul li:hover {
border-color: var(--sk-brand);
background-color: var(--sk-brand-tint);
}
}
/* ---------------------------------------------------------------------------
5. Trust panel (displayReassurance, moved into the buy column)
Root class is .blockreassurance_product — the module renders
displayBlockProduct.tpl, not blockreassurance.tpl.
------------------------------------------------------------------------ */
.product__trust {
margin-top: var(--sk-5);
padding-top: var(--sk-5);
border-top: 1px solid var(--sk-border);
}
.page-product .blockreassurance_product {
display: grid;
grid-template-columns: 1fr;
gap: var(--sk-4);
padding: 0;
margin: 0;
}
.page-product .blockreassurance_product > div {
display: flex;
align-items: center;
gap: var(--sk-3);
min-height: 0;
}
.page-product .blockreassurance_product .item-product {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--sk-brand-tint);
}
.page-product .blockreassurance_product .item-product img,
.page-product .blockreassurance_product .item-product svg {
width: 20px;
height: 20px;
}
.page-product .blockreassurance_product .item-product svg path:not([fill="none"]),
.page-product .blockreassurance_product .item-product svg g[fill]:not([fill="none"]) {
fill: var(--sk-brand) !important;
}
.page-product .blockreassurance_product .item-product svg [stroke]:not([stroke="none"]) {
stroke: var(--sk-brand) !important;
}
/* the module prints an inline style="color:#000000" on this */
.page-product .blockreassurance_product .block-title {
margin: 0;
color: var(--sk-ink) !important;
font-size: .9375rem;
font-weight: 600;
line-height: 1.4;
}
.page-product .blockreassurance_product .clearfix { display: none; }
/* ---------------------------------------------------------------------------
6. Information section (full width)
------------------------------------------------------------------------ */
.product__tabs-row {
margin-top: var(--sk-7);
}
.page-product .product__infos.accordion .accordion-item {
border: 0;
border-bottom: 1px solid var(--sk-border);
background: transparent;
}
.page-product .product__infos.accordion .accordion-item:first-child {
border-top: 1px solid var(--sk-border);
}
.page-product .product__infos .accordion-button {
padding: var(--sk-5) 0;
background: transparent;
color: var(--sk-ink);
font-size: 1.125rem;
font-weight: 600;
letter-spacing: -.01em;
box-shadow: none;
transition: color var(--sk-dur) var(--sk-ease);
}
@media (hover: hover) {
.page-product .product__infos .accordion-button:hover { color: var(--sk-brand); }
}
.page-product .product__infos .accordion-button:not(.collapsed) {
background: transparent;
color: var(--sk-brand);
box-shadow: none;
}
.page-product .product__infos .accordion-button::after {
width: 1rem;
height: 1rem;
background-size: 1rem;
}
.page-product .product__infos .accordion-body {
padding: 0 0 var(--sk-7);
}
/* ---------------------------------------------------------------------------
7. Rich-text description
Applies to every product description in the catalogue, so the rules stay
generic: measure control for prose, full-width treatment for structure.
------------------------------------------------------------------------ */
.page-product .product__description {
color: var(--sk-body);
font-size: 1rem;
line-height: 1.75;
}
/* Prose keeps a comfortable measure; structural blocks below opt back out. */
.page-product .product__description > p,
.page-product .product__description > h4 {
max-width: 68ch;
}
.page-product .product__description > p {
margin: 0 0 var(--sk-4);
}
.page-product .product__description h2 {
max-width: 22ch;
margin: var(--sk-7) 0 var(--sk-4);
color: var(--sk-ink);
font-family: var(--sk-serif);
font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
font-weight: 600;
font-variant-numeric: lining-nums proportional-nums;
line-height: 1.15;
letter-spacing: -.01em;
text-wrap: balance;
}
.page-product .product__description > h2:first-child,
.page-product .product__description > *:first-child + h2 {
margin-top: 0;
}
.page-product .product__description h3 {
position: relative;
margin: var(--sk-7) 0 var(--sk-5);
padding-bottom: var(--sk-3);
color: var(--sk-ink);
font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
font-weight: 700;
line-height: 1.25;
letter-spacing: -.01em;
}
.page-product .product__description h3::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 44px;
height: 3px;
border-radius: 2px;
background: var(--sk-brand);
}
.page-product .product__description strong { color: var(--sk-ink); font-weight: 600; }
.page-product .product__description a {
color: var(--sk-brand);
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
.page-product .product__description img {
max-width: 100%;
height: auto;
border-radius: var(--sk-r-md);
}
/* Bulleted benefit lists → two-column check grid on wide viewports */
.page-product .product__description ul {
margin: 0 0 var(--sk-5);
padding: 0;
list-style: none;
}
.page-product .product__description ul > li {
position: relative;
margin: 0 0 var(--sk-3);
padding-left: 34px;
color: var(--sk-body);
line-height: 1.6;
break-inside: avoid;
-webkit-column-break-inside: avoid;
}
.page-product .product__description ul > li::before {
content: "";
position: absolute;
left: 0;
top: .18em;
width: 20px;
height: 20px;
background-repeat: no-repeat;
background-size: 20px 20px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='9.25' fill='%23fef0f7'/%3E%3Cpath d='M5.9 10.4l2.7 2.7 5.5-5.9' fill='none' stroke='%23d50075' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (min-width: 992px) {
.page-product .product__description ul {
columns: 2;
column-gap: var(--sk-7);
}
}
.page-product .product__description ol { margin: 0 0 var(--sk-5); padding-left: 1.25rem; }
.page-product .product__description ol > li { margin-bottom: var(--sk-3); }
/* ---- Promo strip -------------------------------------------------------
The Janmashtami banner in this product's stored HTML carries an inline
`color:#fff` with no background of its own, so it rendered white-on-white
and was invisible on the page. Both selectors below give it its ground back:
`.rt-promo` is added by product-premium.js, the attribute selector is the
no-JS fallback that matches the inline style directly. */
.page-product .product__description .rt-promo,
.page-product .product__description > div[style*="color:#fff"],
.page-product .product__description > div[style*="color: #fff"] {
max-width: none;
margin: 0 0 var(--sk-6) !important;
padding: var(--sk-5) var(--sk-6) !important;
border-radius: var(--sk-r-lg);
background: linear-gradient(120deg, #d50075 0%, #9e0056 62%, #6d0039 100%);
color: #fff;
box-shadow: 0 10px 30px rgba(157, 0, 86, .22);
}
.page-product .product__description .rt-promo > div:first-child,
.page-product .product__description > div[style*="color:#fff"] > div:first-child {
color: var(--sk-gold, #ffce54);
font-weight: 600;
}
.page-product .product__description .rt-promo *,
.page-product .product__description > div[style*="color:#fff"] * {
max-width: none;
}
/* ---- Tables ------------------------------------------------------------
Stored descriptions carry inline padding/border on their cells, so the few
cosmetic properties below need !important to land. Widths and alignment are
deliberately left to the source markup. */
/* The wrapper only provides the scroll port — all visible chrome lives on the
table itself, so a table narrower than the wrapper (they carry their own
inline widths) can't leave a stranded border hanging off to the side. */
.rt-table {
max-width: 100%;
margin: 0 0 var(--sk-5);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.page-product .product__description table {
margin: 0 !important;
border: 1px solid var(--sk-border);
border-radius: var(--sk-r-md);
border-collapse: separate;
border-spacing: 0;
background: var(--sk-surface);
box-shadow: var(--sk-shadow-sm);
font-size: .9375rem;
}
/* border-collapse:separate is required for the radius above to render, which
means the corners have to be rounded on the corner cells too. */
.page-product .product__description table thead tr:first-child th:first-child,
.page-product .product__description table tbody tr:first-child td:first-child { border-top-left-radius: var(--sk-r-md); }
.page-product .product__description table thead tr:first-child th:last-child,
.page-product .product__description table tbody tr:first-child td:last-child { border-top-right-radius: var(--sk-r-md); }
.page-product .product__description table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--sk-r-md); }
.page-product .product__description table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--sk-r-md); }
.page-product .product__description table th,
.page-product .product__description table td {
padding: 14px 18px !important;
border: 0 !important;
border-bottom: 1px solid var(--sk-border) !important;
vertical-align: middle;
}
.page-product .product__description table th {
background: var(--sk-brand-tint) !important;
color: var(--sk-ink);
font-size: .75rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
white-space: nowrap;
}
.page-product .product__description table td { color: var(--sk-body); }
.page-product .product__description table tbody tr:last-child td { border-bottom: 0 !important; }
@media (hover: hover) {
.page-product .product__description table tbody tr {
transition: background-color var(--sk-dur) var(--sk-ease);
}
.page-product .product__description table tbody tr:hover { background: var(--sk-surface-2); }
}
/* ---- FAQ ---------------------------------------------------------------
An
immediately followed by a
is treated as a question/answer pair
and drawn as one card. product-premium.js additionally groups consecutive
pairs into a two-column grid; the styling below stands on its own if that
script never runs. */
.rt-faq {
display: grid;
grid-template-columns: 1fr;
gap: var(--sk-4);
margin-bottom: var(--sk-5);
}
@media (min-width: 992px) {
.rt-faq { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sk-5); }
}
.rt-faq__item {
padding: var(--sk-5);
border: 1px solid var(--sk-border);
border-radius: var(--sk-r-md);
background: var(--sk-surface);
transition: border-color var(--sk-dur) var(--sk-ease),
box-shadow var(--sk-dur) var(--sk-ease);
}
@media (hover: hover) {
.rt-faq__item:hover {
border-color: var(--sk-border-strong);
box-shadow: var(--sk-shadow-md);
}
}
.page-product .product__description .rt-faq__item h4 {
max-width: none;
margin: 0 0 var(--sk-3);
color: var(--sk-ink);
font-size: 1.0625rem;
font-weight: 600;
line-height: 1.35;
letter-spacing: -.005em;
}
.page-product .product__description .rt-faq__item p {
max-width: none;
margin: 0;
color: var(--sk-body);
font-size: .9375rem;
line-height: 1.7;
}
/* Ungrouped fallback (no JS): still reads as a card. */
.page-product .product__description > h4 {
margin: var(--sk-4) 0 0;
padding: var(--sk-5) var(--sk-5) 0;
border: 1px solid var(--sk-border);
border-bottom: 0;
border-radius: var(--sk-r-md) var(--sk-r-md) 0 0;
background: var(--sk-surface);
color: var(--sk-ink);
font-size: 1.0625rem;
font-weight: 600;
line-height: 1.35;
}
.page-product .product__description > h4 + p {
max-width: none;
margin: 0 0 var(--sk-3);
padding: var(--sk-3) var(--sk-5) var(--sk-5);
border: 1px solid var(--sk-border);
border-top: 0;
border-radius: 0 0 var(--sk-r-md) var(--sk-r-md);
background: var(--sk-surface);
font-size: .9375rem;
}
/* ---------------------------------------------------------------------------
8. Product details table
------------------------------------------------------------------------ */
.page-product .product__details {
margin: 0;
padding: 0;
background: transparent;
border: 1px solid var(--sk-border);
border-radius: var(--sk-r-md);
overflow: hidden;
list-style: none;
max-width: 720px;
}
.page-product .product__details .detail {
display: flex;
align-items: center;
gap: var(--sk-4);
padding: var(--sk-4) var(--sk-5);
border-bottom: 1px solid var(--sk-border);
}
.page-product .product__details .detail:last-child { border-bottom: 0; }
.page-product .product__details .detail:nth-child(odd) { background: var(--sk-surface-2); }
.page-product .product__details .detail__left { width: 40%; flex: none; }
.page-product .product__details .detail__title {
color: var(--sk-muted);
font-size: .8125rem;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
}
.page-product .product__details .detail__right {
color: var(--sk-ink);
font-size: .9375rem;
font-weight: 500;
}
/* The brand link fell through to Bootstrap's stock link blue (#0d6efd), which
is the one off-brand colour left in this panel. */
.page-product .product__details .detail__right a {
color: var(--sk-brand);
font-weight: 600;
text-decoration-color: rgba(213, 0, 117, .35);
text-underline-offset: 3px;
}
@media (hover: hover) {
.page-product .product__details .detail__right a:hover { color: var(--sk-brand-dark); }
}
.page-product .product__details .detail__manufacturer-logo {
max-height: 40px;
width: auto;
}
/* =============================================================================
9. Reviews (rebuilt v11, 2026-08-30)
Covers the whole reviews experience on the product page: the section header
and rating summary, the empty state, review cards, pagination, the
"Write your review" dialog and the alert/confirm dialogs that follow it.
---------------------------------------------------------------------------
Specificity, because this component has THREE stylesheets stacked under it
---------------------------------------------------------------------------
1. `modules/productcomments/views/css/productcomments.css` — the module's own,
2016-vintage (`#6b868f` slate, 2px radii, PNG sprite stars).
2. Hummingbird's OWN productcomments SCSS, compiled into
`assets/cache/theme-.css`. This is the one that matters: it writes
selectors like
`.page-product #post-product-comment-modal #criterions_list .criterion-rating`
at specificity (2,2,0), and re-declares the star sprite as an inlined
base64 `background-image: … !important`.
3. This file, which loads last.
So a plain `.page-product .sk-rv-…` (0,2,0) rule silently loses to the theme
bundle. Every selector below that overlaps one of the theme's carries enough
weight to beat it outright rather than winning on source order — ties are how
this stops working the next time the theme cache is regenerated.
The star sprite is the one place `!important` is unavoidable: the bundle marks
`background-image` important at (0,1,1), so turning it off needs `!important`
at higher specificity.
------------------------------------------------------------------------ */
.page-product {
/* Gold, not brand pink. A star rating is a convention before it is a brand
surface, and pink stars read as decoration rather than as a score. This is
the same amber family as the theme's `--sk-accent` gold. */
--sk-star: #e29c00;
--sk-star-hi: #f5b731;
--sk-star-off: #ded6e1;
--sk-star-size: 20px;
--sk-star-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.4l2.94 5.96 6.58.96-4.76 4.64 1.12 6.55L12 17.42l-5.88 3.09 1.12-6.55-4.76-4.64 6.58-.96z'/%3E%3C/svg%3E");
}
/* ---- 9a. Star rendering ------------------------------------------------
The sprite is a 20px PNG served at 1x, so it is soft on every retina screen
and its grey/gold are fixed. Both layers are redrawn as a masked vector.
The module builds a partial star for fractional averages by giving ONE star
an inline `width` (computed against a hard-coded 20px), stacking a full-star
layer over an empty-star layer. That still works here:
- the empty layer is forced back to five uniform stars, so it is a complete
grey rail whatever the module wrote inline;
- the full layer keeps its inline width, and `mask-position: left` means a
narrower box shows the LEFT part of the star rather than a squashed one.
`--sk-star-size` therefore stays at the module's 20px anywhere a fraction can
appear. Only the interactive rating in the dialog — always a whole number —
is enlarged.
------------------------------------------------------------------------ */
@supports ((-webkit-mask-image: url("#a")) or (mask-image: url("#a"))) {
.page-product .grade-stars .star-content div.star,
.page-product .grade-stars .star-content div.star-on,
.page-product .grade-stars .star-content div.star-hover {
background-image: none !important;
background-color: var(--sk-star-off);
height: var(--sk-star-size);
flex: 0 0 auto;
-webkit-mask-image: var(--sk-star-svg);
mask-image: var(--sk-star-svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: left center;
mask-position: left center;
-webkit-mask-size: var(--sk-star-size) var(--sk-star-size);
mask-size: var(--sk-star-size) var(--sk-star-size);
}
.page-product .grade-stars .star-content.star-empty div.star {
width: var(--sk-star-size) !important;
visibility: visible !important;
}
/* A fractional average makes the module split one position into TWO nodes —
an invisible left part and a visible remainder — so the empty layer holds
six children for a five-star scale. Forcing them all back to full width
therefore drew a sixth grey star and pushed the review count into it.
Whole grades never produce a sixth child, so this only ever hides the
artefact. */
.page-product .grade-stars .star-content.star-empty div.star:nth-child(n+6) {
display: none !important;
}
.page-product .grade-stars .star-content.star-full div.star,
.page-product .grade-stars .star-content.star-full div.star-on {
width: var(--sk-star-size);
}
.page-product .grade-stars .star-content div.star-on,
.page-product .grade-stars .star-content div.star-hover {
background-color: var(--sk-star);
}
}
/* ---- 9b. Section shell, heading and summary ---------------------------- */
.page-product .product-comments-wrapper {
margin-top: var(--sk-7) !important;
padding-top: var(--sk-7);
border-top: 1px solid var(--sk-border);
}
.page-product #product-comments-list-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--sk-4);
margin: 0 0 var(--sk-5);
padding: 0;
}
.page-product #product-comments-list-header .sk-rv-head {
display: flex;
flex-direction: column;
gap: var(--sk-3);
min-width: 0;
}
.page-product #product-comments-list-header .section-title {
margin: 0;
color: var(--sk-ink);
font-family: var(--sk-serif);
font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem);
font-weight: 600;
letter-spacing: -.01em;
/* Playfair defaults to old-style figures, which turns a score into a word. */
font-variant-numeric: lining-nums proportional-nums;
}
/* The score reads first, the stars confirm it, the count qualifies it. */
.page-product .sk-rv-summary {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--sk-2);
}
.page-product .sk-rv-summary__score {
color: var(--sk-ink);
font-size: 1.75rem;
font-weight: 700;
line-height: 1;
font-variant-numeric: lining-nums tabular-nums;
}
.page-product .sk-rv-summary__of {
margin-right: var(--sk-2);
color: var(--sk-muted);
font-size: .9375rem;
}
.page-product .sk-rv-summary .comments-note { margin: 0; }
.page-product .sk-rv-summary__count {
color: var(--sk-muted);
font-size: .9375rem;
}
.page-product #product-comments-list-btn-group { flex: 0 0 auto; }
/* ---- 9c. Empty state ---------------------------------------------------
`#empty-product-comment` is hidden by list-comments.js with jQuery `.hide()`,
which writes an inline `display: none`. Nothing here may use
`display: … !important`, or the empty state would survive the first review.
------------------------------------------------------------------------ */
.page-product #empty-product-comment.sk-rv-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sk-3);
margin: 0;
padding: var(--sk-7) var(--sk-5);
border: 1px solid var(--sk-border);
border-radius: var(--sk-r-md);
background: var(--sk-surface-2);
text-align: center;
}
.page-product .sk-rv-empty__icon {
color: var(--sk-brand);
opacity: .85;
}
.page-product .sk-rv-empty__title {
margin: 0;
color: var(--sk-ink);
font-size: 1.0625rem;
font-weight: 600;
}
.page-product .sk-rv-empty__text {
max-width: 44ch;
margin: 0;
color: var(--sk-muted);
font-size: .9375rem;
}
.page-product .sk-rv-empty__btn {
margin-top: var(--sk-2);
padding: 0 var(--sk-5);
min-height: 44px;
border-radius: var(--sk-r-pill);
}
/* ---- 9d. Review cards --------------------------------------------------
The theme bundle styles these at (1,2,0) via `#product-comments-list`, so
each override adds the `.sk-rv-card` hook to clear it.
------------------------------------------------------------------------ */
.page-product #product-comments-list .comment.sk-rv-card {
margin: 0 0 var(--sk-4);
padding: var(--sk-5);
border: 1px solid var(--sk-border);
border-bottom: 1px solid var(--sk-border);
border-radius: var(--sk-r-md);
background: var(--sk-surface);
}
.page-product #product-comments-list .sk-rv-card__head {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--sk-2) var(--sk-4);
height: auto;
min-height: 0;
margin: 0 0 var(--sk-3);
}
.page-product #product-comments-list .sk-rv-card__head .grade-stars {
margin: 0;
min-width: 115px;
}
.page-product #product-comments-list .sk-rv-card__head .grade-stars .star-content {
margin: 0;
top: 0;
}
.page-product #product-comments-list .sk-rv-card__byline {
display: flex;
align-items: center;
gap: var(--sk-2);
margin: 0;
font-size: .875rem;
}
.page-product #product-comments-list .sk-rv-card .comment-author {
color: var(--sk-ink);
font-weight: 600;
}
.page-product #product-comments-list .sk-rv-card__sep { color: var(--sk-border-strong); }
.page-product #product-comments-list .sk-rv-card .comment-date { color: var(--sk-muted); }
.page-product #product-comments-list .sk-rv-card .comment-title {
margin: 0 0 var(--sk-2);
color: var(--sk-ink);
font-size: 1.0625rem;
font-weight: 600;
line-height: 1.4;
}
.page-product #product-comments-list .sk-rv-card .comment-text {
max-width: 68ch;
margin: 0;
color: var(--sk-body);
font-size: 1rem;
line-height: 1.65;
/* The module stores newlines verbatim; keep them, but let long words wrap. */
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.page-product #product-comments-list .sk-rv-card__actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--sk-2);
margin-top: var(--sk-4);
padding-top: var(--sk-3);
border-top: 1px solid var(--sk-border);
}
.page-product #product-comments-list .sk-rv-card__useful-label {
margin-right: var(--sk-2);
color: var(--sk-muted);
font-size: .875rem;
}
/* These were `` elements with no href — unreachable by keyboard. They are
buttons now, so they need the button reset the theme never applied. */
.page-product #product-comments-list .sk-rv-card__actions button {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 36px;
padding: 0 var(--sk-3);
border: 1px solid var(--sk-border);
border-radius: var(--sk-r-pill);
background: var(--sk-surface);
color: var(--sk-muted);
font-size: .875rem;
line-height: 1;
cursor: pointer;
transition: color var(--sk-dur) var(--sk-ease),
border-color var(--sk-dur) var(--sk-ease),
background-color var(--sk-dur) var(--sk-ease);
}
.page-product #product-comments-list .sk-rv-card__actions button .material-icons {
font-size: 18px;
color: inherit;
}
.page-product #product-comments-list .sk-rv-card__actions .report-abuse {
margin-left: auto;
border-color: transparent;
}
@media (hover: hover) {
.page-product #product-comments-list .sk-rv-card__actions button:hover {
border-color: var(--sk-brand);
background: var(--sk-brand-tint);
color: var(--sk-brand);
}
}
/* ---- 9e. Pagination ----------------------------------------------------
The theme bundle already resets this block; what it does not give the page
controls is a hit area. `.page-link` there is `padding: .25rem .5rem`, which
is a ~28px target.
------------------------------------------------------------------------ */
.page-product #product-comments-list-pagination .pagination .page-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
min-height: 40px;
padding: 0 var(--sk-2);
border: 1px solid transparent;
border-radius: var(--sk-r-pill);
background: transparent;
color: var(--sk-body);
font-variant-numeric: lining-nums tabular-nums;
transition: color var(--sk-dur) var(--sk-ease),
background-color var(--sk-dur) var(--sk-ease);
}
.page-product #product-comments-list-pagination .pagination .page-item.active .page-link {
background: var(--sk-brand-tint);
border-color: var(--sk-brand-tint-2);
color: var(--sk-brand);
font-weight: 600;
}
@media (hover: hover) {
.page-product #product-comments-list-pagination .pagination .page-link:hover {
background: var(--sk-surface-2);
color: var(--sk-brand);
}
}
.page-product #product-comments-list-pagination .pagination .page-item.disabled .page-link {
color: var(--sk-muted);
opacity: .45;
cursor: not-allowed;
}
/* ---- 9f. "Write your review" dialog ------------------------------------ */
.page-product .modal.sk-rv-modal .modal-dialog {
max-width: 43rem;
}
.page-product .modal.sk-rv-modal .modal-content {
border: 1px solid var(--sk-border);
border-radius: var(--sk-r-lg);
box-shadow: var(--sk-shadow-md);
overflow: hidden;
}
.page-product .modal.sk-rv-modal .modal-header {
align-items: flex-start;
gap: var(--sk-4);
padding: var(--sk-5) var(--sk-6) var(--sk-4);
border-bottom: 1px solid var(--sk-border);
background: var(--sk-surface);
}
.page-product .modal.sk-rv-modal .sk-rv-modal__eyebrow {
display: block;
margin-bottom: 4px;
color: var(--sk-brand);
font-size: .75rem;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
}
.page-product .modal.sk-rv-modal .modal-header .h4 {
color: var(--sk-ink);
font-family: var(--sk-serif);
font-size: 1.5rem;
font-weight: 600;
letter-spacing: -.01em;
}
.page-product .modal.sk-rv-modal .modal-body {
padding: var(--sk-5) var(--sk-6);
}
.page-product .modal.sk-rv-modal .modal-footer {
justify-content: space-between;
gap: var(--sk-4);
padding: var(--sk-4) var(--sk-6) var(--sk-5);
border-top: 1px solid var(--sk-border);
background: var(--sk-surface-2);
}
/* Product context strip — which product am I reviewing. It is a reminder, not
the content of the dialog, so it gets a chip rather than a hero block. */
.page-product .modal.sk-rv-modal .sk-rv-product {
display: flex;
align-items: center;
gap: var(--sk-4);
margin-bottom: var(--sk-5);
padding: var(--sk-3);
border: 1px solid var(--sk-border);
border-radius: var(--sk-r-md);
background: var(--sk-surface-2);
}
.page-product #post-product-comment-modal .sk-rv-product__cover,
.page-product #post-product-comment-modal .sk-rv-product__cover img {
flex: 0 0 auto;
width: 56px;
height: 56px;
object-fit: cover;
border-radius: var(--sk-r-sm);
}
.page-product .modal.sk-rv-modal .sk-rv-product__text { min-width: 0; }
.page-product #post-product-comment-modal .sk-rv-product__name {
margin: 0;
color: var(--sk-ink);
font-size: .9375rem;
font-weight: 600;
line-height: 1.4;
}
.page-product .modal.sk-rv-modal .sk-rv-product__ref {
margin: 2px 0 0;
color: var(--sk-muted);
font-size: .8125rem;
}
/* --- Rating ------------------------------------------------------------
The theme bundle owns `#post-product-comment-modal #criterions_list
.criterion-rating` at (2,2,0); adding `.sk-rv-rating` to the chain makes
these (2,3,0) so they win on weight, not on file order.
--------------------------------------------------------------------- */
.page-product #post-product-comment-modal .sk-rv-criterions {
margin: 0 0 var(--sk-5);
padding: 0;
list-style: none;
}
.page-product #post-product-comment-modal .sk-rv-criterions > li { margin: 0 0 var(--sk-3); }
/* The panel lives on the row, not on the