/** * Review modal styling. * * Colours are pulled from the theme's own custom properties where they exist * (--primary, --vw-gold) with hard fallbacks, so the modal follows the site rather * than introducing a second palette. Kept scoped under .vr-* to avoid colliding * with Bricks or WooCommerce classes. */ /** * Hide WooCommerce's own review form and its "only verified buyers may review" * notice, replaced by the serial-gated modal. * * Done in CSS rather than by returning false from 'comments_open': that also stops * WooCommerce rendering the review section entirely, which removes the review LIST * along with it. * * Only #respond (the form itself) is hidden -- NOT its #review_form_wrapper parent. * The trigger button is printed on 'comment_form_before', which fires inside that * wrapper, so hiding the wrapper hides the button too: it rendered in the HTML but * was invisible on the page. */ .single-product #respond, .single-product .woocommerce-verification-required { display: none !important; } /* ---- archive / category card rating ---- One quiet line: ★ 4.8 · 6 รีวิว Muted dark gold rather than a bright yellow star, and no box, excerpt or large graphic -- the cards already carry discount badges and struck-through prices, so anything louder here reads as a marketplace listing. */ .vr-card-rating { /* * Card order is image -> name -> price -> review (owner's spec, 2026-07-31), * so this is the last line of the card and reads as a footnote to the price. */ display: block; margin: 0; font-size: 14px; font-weight: 400; line-height: 1.4; /* Muted grey for the text; only the star carries colour. */ color: #777; /* Never let "★ 5.0 · 13 รีวิว" break across lines. */ white-space: nowrap; /* * Fixed height so every card's review row occupies the same space whether it * shows a rating or "ยังไม่มีรีวิว". Without it a row of cards ends at * different heights and the grid looks ragged. */ min-height: 20px; /* * A rated card renders this as an to the product's #reviews section (owner's * request, 2026-07-31), so the theme's link colour and underline have to be * neutralised or the quiet grey footnote turns into a loud coloured link and the * whole point of keeping it understated is lost. `width: max-content` keeps the * clickable area on the text instead of the full column width, so the rest of * the row still falls through to the card's own product link. */ text-decoration: none; color: #777; width: max-content; max-width: 100%; } /* Underline only the count on hover -- enough to signal "this goes somewhere" without the line ever looking like a call to action. The star keeps its colour. */ a.vr-card-rating:hover .vr-card-count { text-decoration: underline; } a.vr-card-rating:focus-visible { outline: 2px solid #777; outline-offset: 2px; } /* * Spacing inside the card's text column (.brxe-aytajk), which is a flex column. * Its own row-gap is 16px, sized for title -> price only; with three children that * gap applies between every pair and overshoots the owner's spec. Setting it to 8px * gives name -> price 8px and price -> review 8px in one move. * * The price's own margin-bottom is zeroed because a flex gap ADDS to it -- left in, * price -> review would be 8 + 8 = 16px. * * Image -> name is the CARD's row-gap (24px), left alone: already within spec. */ /* * Specificity note: Bricks prints its own rules inline in , AFTER this * stylesheet loads -- * .brxe-pebhcv .brxe-aytajk.brxe-block { row-gap: 16px } (0,3,0) * .bt-product-card__price.brxe-product-price { margin-bottom: 0.8rem } (0,2,0) * A plain `.bt-product-card .brxe-aytajk` (0,2,0) silently loses to both. These * selectors are pitched one class higher so they win on specificity rather than on * source order, which is what !important would otherwise have been used for. */ /* * Card rhythm, all breakpoints. The three gaps are set independently rather than by * the column's flex row-gap, because one gap applies between EVERY pair and the * spec calls for different values under the name and under the price. * * image -> name : the CARD's row-gap * name -> price : the title's margin-bottom * price -> review: the price's margin-bottom */ .bt-product-card.vr-card.brxe-block { row-gap: 16px; } .bt-product-card.brxe-block .vr-card-col.brxe-block { row-gap: 0; } .bt-product-card .bt-product-card__title.brxe-heading { margin-bottom: 6px; } .bt-product-card .bt-product-card__price.brxe-product-price { margin-bottom: 4px; } .vr-card-star { /* Muted Ventry gold, deliberately not the bright yellow of a stock star rating. */ font-size: 13px; color: #a8823c; margin-right: 4px; } .vr-card-avg { font-weight: 600; font-variant-numeric: tabular-nums; } /* Tight around the middle dot -- spacing is set here rather than by a flex gap so it can be kept deliberately small. */ .vr-card-sep { margin: 0 3px; color: #b9b9b9; } .vr-card-count { color: #777; font-weight: 400; } /* * "ยังไม่มีรีวิว" on products with no reviews yet. * * Exists purely so every card reserves the same vertical space and the prices * beneath stay on one baseline -- without it, cards carrying a rating pushed their * price down and the grid read as ragged. * * Same grey and same size as the review count it stands in for (.vr-card-count), * so it recedes rather than drawing attention to the absence. */ .vr-card-rating--empty { color: #777; font-weight: 400; } /* ---- compact rating under the product title ---- */ /* * Tightens the product summary column (title / rating / price / add-to-cart / * short description). The Bricks container is a flex column with a 16px gap, and * several children carry their own trailing margins on top of that, which left * gaps of 22-40px around the rating. The owner asked for roughly 40% less. * * The class is added by reviews.js rather than styling the Bricks id * (#brxe-wcdyff) directly -- that id is a template implementation detail. */ .vr-summary-col { /* * 0 because the three gaps in this column are no longer equal: matching the * archive card, title -> price is 6px and price -> review is 4px. A single flex * gap cannot express both. Every child therefore carries its own bottom margin, * with a 10px default so any element this template gains later (add-to-cart, * short description) keeps the previous rhythm instead of collapsing. * * !important throughout: Bricks sets `#brxe-wcdyff { gap: 16px }` inline, and an * id beats any class selector. */ gap: 0 !important; } .vr-summary-col > * { margin-bottom: 10px; } .vr-summary-col > *:last-child { margin-bottom: 0; } /* title -> price */ .vr-summary-col > .brxe-product-title, .vr-summary-col > .product_title { margin-bottom: 6px; } /* price -> review */ .vr-summary-col > .brxe-product-price { margin-bottom: 4px; } @media (max-width: 991px) { .vr-summary-col > .brxe-product-title, .vr-summary-col > .product_title { margin-bottom: 5px; } .vr-summary-col > .brxe-product-price { margin-bottom: 3px; } } /* * NOTE: this rule is product-page layout, not review styling. * * The gaps the owner flagged came from two different containers. The inner column * (title / rating / price) is handled above. The remaining two -- price to * add-to-cart, and add-to-cart to short description -- come from the THEME's outer * details wrapper, which is a flex column with a 40px gap. Reduced to 24px for the * ~40% the owner asked for. * * It lives here because it was part of one visual change set with the injected * rating, but be aware a reviews plugin is adjusting product-page spacing: if this * ever needs revisiting, it is this rule, not the theme or Bricks. */ .single-product .ba-product-single-page-2__product-details-wrapper { gap: 24px !important; } /* * ALSO product-page layout rather than review styling -- see the note above. * * The two columns sit in a grid with `align-items: center`, so the shorter right-hand * column (breadcrumb / title / price / review / add-to-cart) was vertically centred * against the taller gallery. That pushed the breadcrumb 43px below the top of the hero * image, and -- because the column's height depends on its contents -- by a DIFFERENT * amount on a product with reviews than on one without. Top-aligning fixes both at once: * the breadcrumb now starts exactly level with the image on every product. * * !important is unavoidable: Bricks sets `#brxe-96a989 { align-items: center }`, and an * id cannot be beaten by a class. The class used here is the theme's semantic name, not * a generated `brxe-*` one, so it survives a template rebuild. * * Desktop only. Below 992px the grid collapses to a single column, where Bricks keeps * `center` deliberately and cross-axis alignment has no visual effect anyway. */ @media (min-width: 992px) { .single-product .ba-product-single-page-2__inner.brxe-container { align-items: start !important; } } /* * ...and the picture INSIDE the gallery has to be top-aligned too. * * Top-aligning the columns (above) only moves the gallery's BOX. The theme gives that * box a fixed 750px height, and the images are square, so `object-fit: contain` with * the default `object-position: 50% 50%` letterboxes the picture -- centring it and * leaving empty space above. The narrower the column, the smaller the picture and the * bigger that gap: measured 39px at 1280px wide, 99px at 1000px. The element was * aligned; the visible picture was not, which reads as the image sinking as the window * narrows. * * `center top` pins the picture to the top of its box for ANY aspect ratio, so this * also holds for a portrait or landscape product photo. The slack moves below the * picture instead, where the thumbnail strip already sits. * * Deliberately NOT changing the 750px slot height: that is what keeps every product's * gallery the same height regardless of its photo's proportions. */ @media (min-width: 992px) { .single-product .woocommerce-product-gallery__image img { object-position: center top; } } .vr-summary-col .brxe-product-price p, .vr-summary-col .brxe-product-price .price, .vr-summary-col .brxe-product-short-description > p:first-child { margin-top: 0; margin-bottom: 0; } .vr-summary-col .brxe-product-add-to-cart form.cart { margin-bottom: 0; } .vr-title-rating { display: inline-flex; align-items: center; gap: 8px; /* No margins of its own: the flex gap above already spaces it, and doubling up was part of what made this area feel loose. */ margin: 0; text-decoration: none; color: inherit; font-size: 14px; /* Pinned rather than inherited -- the theme's body line-height was inflating this one-line element to 39px tall. */ line-height: 1.2; } .vr-title-rating:hover .vr-title-count { text-decoration: underline; } /* * "ยังไม่มีรีวิว" on a product with no reviews yet. * * min-height matches the rated line (16px stars on a 1.2 line-height), so an unrated * product occupies exactly the same vertical space as a rated one -- otherwise the * whole summary column below it sits at a different height. * * Same grey and size as .vr-title-count, the element it stands in for, so it recedes * rather than drawing attention to the absence. Not a link: there is nothing to jump to. */ .vr-title-rating--empty { color: #666; font-size: 13px; min-height: 19px; cursor: default; } .vr-title-stars { font-size: 16px; letter-spacing: 1px; /* The gold is the point of this element, so keep it stable on hover. */ color: var(--vw-gold, #e0bc87); } .vr-title-avg { font-weight: 600; color: #333; font-variant-numeric: tabular-nums; } .vr-title-count { color: #666; font-size: 13px; } /* ---- the review list WooCommerce renders ---- Scaled down: the theme's inherited sizing made review bodies read larger than the product copy around them. */ .single-product #reviews .commentlist, .single-product #reviews .comment-text p { font-size: 14px; line-height: 1.6; } .single-product #reviews .woocommerce-review__author { font-size: 14px; font-weight: 600; color: #222; } .single-product #reviews .woocommerce-review__published-date, .single-product #reviews .woocommerce-review__dash { font-size: 12.5px; color: #888; } /* * DO NOT restyle .star-rating here. * * WooCommerce renders these stars as five glyphs of an icon font, with a * partial-width overlay copy for the fraction. The geometry depends on the font's * own glyph advance, the container width and the overlay width agreeing. This theme * hardcodes `width: 80px` against its own font-size, so ANY font-size override * breaks that agreement and the glyphs visibly overlap. * * Two attempts were made and both failed: setting `font-size: 12px` alone (glyph row * shrank to ~65px inside an 80px box), then adding `width: 5.4em` to match * (measured consistent at 64.8px, yet still overlapped on screen -- WooCommerce's * icon font does not use the 1.08em-per-glyph advance that 5.4em assumes). * * The stars are left at the theme's own size. Only the surrounding TEXT is scaled * down, which is what was actually asked for. */ /* Tighter list: 30px between reviews read as a lot of dead space. */ .single-product #reviews .commentlist li { margin-bottom: 16px !important; padding-bottom: 14px; border-bottom: 1px solid #f0f0f0; } .single-product #reviews .commentlist li:last-child { margin-bottom: 4px !important; padding-bottom: 0; border-bottom: 0; } .single-product #reviews .commentlist li .comment-text { margin: 0; padding: 0; } /* * Every reviewer shows the same blank default avatar (no email is collected, so * Gravatar has nothing to serve). Hidden, and the space it reserved reclaimed. */ .single-product #reviews .commentlist img.avatar, .single-product #reviews .commentlist .woocommerce-review__gravatar { display: none !important; } .single-product #reviews .commentlist li .comment_container { display: block; } .single-product #reviews .commentlist li .comment_container > .comment-text { margin-left: 0 !important; border: 0; } .single-product #reviews .woocommerce-Reviews-title { font-size: 17px; } /* "(verified owner)" replaced by a checkmark after the name. font-size:0 hides the wording while keeping the element, so the tick can be drawn with ::before at a readable size -- no template override needed. */ .single-product #reviews .woocommerce-review__verified { font-size: 0; font-style: normal; margin-left: 5px; } .single-product #reviews .woocommerce-review__verified::before { content: '✓'; display: inline-block; width: 15px; height: 15px; line-height: 15px; text-align: center; border-radius: 50%; background: var(--primary, #2f7d32); color: #fff; font-size: 10px; font-weight: 700; vertical-align: middle; } /* ---- rating summary ---- */ .vr-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 34px; padding: 20px 24px; margin: 4px 0 22px; border: 1px solid #e6e6e6; border-radius: 8px; background: #fcfbf9; } .vr-summary--empty { display: block; color: #777; font-size: 14.5px; background: transparent; border-style: dashed; } .vr-summary-score { text-align: center; min-width: 128px; } .vr-summary-avg { font-size: 40px; font-weight: 600; line-height: 1.05; color: #222; /* Keeps the number from shifting as the average changes. */ font-variant-numeric: tabular-nums; } .vr-summary-stars { margin: 4px 0 3px; font-size: 19px; letter-spacing: 2px; } .vr-star { color: #dcdcdc; } .vr-star--on { color: var(--vw-gold, #e0bc87); } /* Half star: gold left half, grey right, via a clipped overlay copy. */ .vr-star--half { position: relative; color: #dcdcdc; } .vr-star--half::before { content: '★'; position: absolute; left: 0; top: 0; width: 50%; overflow: hidden; color: var(--vw-gold, #e0bc87); } .vr-summary-count { font-size: 13px; color: #777; } .vr-summary-bars { flex: 1 1 240px; min-width: 220px; } .vr-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; } .vr-bar-label { flex: 0 0 34px; font-size: 13px; color: #555; text-align: right; font-variant-numeric: tabular-nums; } .vr-bar-star { color: var(--vw-gold, #e0bc87); } .vr-bar-track { flex: 1 1 auto; height: 8px; border-radius: 4px; background: #ececec; overflow: hidden; } .vr-bar-fill { display: block; height: 100%; border-radius: 4px; background: var(--vw-gold, #e0bc87); } .vr-bar-n { flex: 0 0 26px; font-size: 12.5px; color: #888; text-align: right; font-variant-numeric: tabular-nums; } @media (max-width: 560px) { .vr-summary { gap: 18px; padding: 16px 18px; } .vr-summary-score { min-width: 0; text-align: left; } } .vr-trigger-wrap { margin: 18px 0 26px; } /* Same darker green and same centring as the dialog buttons, so the journey from "write a review" to "post review" is one consistent colour. */ .vr-trigger { display: inline-block; padding: 12px 26px; border: 0; border-radius: 4px; background: #2C8536; color: #fff; font-size: 15px; font-weight: 500; text-align: center; cursor: pointer; transition: opacity .15s ease; } .vr-trigger:hover { opacity: .88; } .vr-trigger:focus-visible { outline: 2px solid var(--vw-gold, #e0bc87); outline-offset: 2px; } /* ---- modal shell ---- */ .vr-modal[hidden] { display: none; } .vr-modal { position: fixed; inset: 0; /* Above Bricks' sticky header and WooCommerce notices. */ z-index: 999999; display: flex; align-items: flex-start; justify-content: center; padding: 24px 16px; overflow-y: auto; } .vr-modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .62); } body.vr-modal-open { overflow: hidden; } .vr-modal-panel { position: relative; width: 100%; max-width: 520px; margin: auto; background: #fff; border-radius: 8px; padding: 30px 28px 26px; box-shadow: 0 18px 50px rgba(0, 0, 0, .3); } .vr-modal-close { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; border: 0; background: transparent; font-size: 26px; line-height: 1; color: #555; cursor: pointer; } .vr-modal-close:hover { color: #222; } .vr-modal-title { margin: 0 0 6px; font-size: 21px; line-height: 1.3; } .vr-modal-sub { margin: 0 0 20px; font-size: 14px; color: #444; } .vr-modal-sub strong { color: #222; } /* ---- fields ---- */ .vr-field { margin-bottom: 18px; } .vr-field label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: #1f1f1f; } .vr-req { color: #d33; } .vr-field input[type="text"], .vr-field textarea { width: 100%; padding: 11px 13px; border: 1px solid #d5d5d5; border-radius: 4px; font-size: 15px; font-family: inherit; background: #fff; color: #222; box-sizing: border-box; } .vr-field input[type="text"]:focus, .vr-field textarea:focus { border-color: var(--primary, #2f7d32); outline: none; } .vr-field textarea { resize: vertical; min-height: 96px; } .vr-help { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: #555; } /* ---- star rating ---- Rendered in reverse DOM order (5..1) so a CSS sibling selector can light up the hovered star and everything after it, giving left-to-right fill without any JS. */ .vr-stars { display: inline-flex; flex-direction: row-reverse; gap: 4px; } .vr-stars input { position: absolute; opacity: 0; width: 0; height: 0; } .vr-stars label { margin: 0; font-size: 30px; line-height: 1; color: #bdbdbd; cursor: pointer; transition: color .12s ease; } .vr-stars label:hover, .vr-stars label:hover ~ label, .vr-stars input:checked ~ label { color: var(--vw-gold, #e0bc87); } .vr-stars input:focus-visible + label { outline: 2px solid var(--primary, #2f7d32); outline-offset: 2px; } /* Honeypot: off-screen rather than display:none, which naive bots skip. */ .vr-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ---- actions / feedback ---- */ .vr-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; } .vr-btn-primary, .vr-btn-secondary { padding: 11px 24px; border-radius: 4px; font-size: 15px; cursor: pointer; border: 1px solid transparent; /* * Explicit centring. A theme rule left-aligns labels inside buttons, which is why the * warranty form needed the same fix (see `.vw-btn` in HANDOFF.md) — without it the * submit and cancel text sits against the left edge of the button. */ text-align: center; } /* * NOT the brand green. * * `--primary` (#2f7d32) gives white text only ~2.75:1 contrast, far below WCAG AA's 4.5:1 * for text this size, and it reads as a bright neon block next to the white dialog. #2C8536 * measures 4.65:1 and is the same value the warranty form already uses for its primary * button, so the two forms match. Do not restore var(--primary) here. */ .vr-btn-primary { background: #2C8536; color: #fff; border-color: #2C8536; } .vr-btn-primary:disabled { opacity: .6; cursor: default; } .vr-btn-secondary { background: #fff; color: #333; border-color: #b5b5b5; } .vr-error { margin-bottom: 16px; padding: 11px 14px; border-radius: 4px; background: #fdecea; border: 1px solid #f5c2bc; color: #a3261a; font-size: 14px; line-height: 1.5; } .vr-error[hidden], .vr-success[hidden] { display: none; } .vr-success { text-align: center; padding: 22px 0 8px; } .vr-success-icon { width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%; background: var(--primary, #2f7d32); color: #fff; font-size: 30px; line-height: 54px; } .vr-success h3 { margin: 0 0 6px; font-size: 18px; } .vr-success p { margin: 0; color: #666; font-size: 14px; } @media (max-width: 520px) { .vr-modal-panel { padding: 26px 18px 20px; } .vr-actions { flex-direction: column-reverse; } .vr-btn-primary, .vr-btn-secondary { width: 100%; } } /* Placeholders default to a very light grey in this theme, which the owner found hard to read in the modal. Pinned explicitly, and the input text itself darkened. */ .vr-field input[type="text"]::placeholder, .vr-field textarea::placeholder { color: #8a8a8a; opacity: 1; /* Firefox applies its own opacity to placeholders */ } .vr-field input[type="text"], .vr-field textarea { color: #1f1f1f; } /* Anonymous opt-out + the pre-submit publishing notice. Deliberately quiet: both are guidance, not controls competing with the form fields. */ /* label.vr-anon, not just .vr-anon: `.vr-field label` sets display:block and font-weight:600 at a higher specificity, which is what previously left the box and its text on separate lines. */ .vr-field label.vr-anon { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 13px; font-weight: 400; color: #666; cursor: pointer; } .vr-field label.vr-anon input[type="checkbox"] { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; cursor: pointer; } .vr-publish-notice { margin: 0 0 14px; font-size: 12.5px; line-height: 1.5; color: var(--vr-muted, #9a9a9a); } /* * Tighter card metrics on mobile and tablet (owner's spec, 2026-07-31). * * Desktop keeps the looser rhythm; below 992px the same spacing reads as drift, * because the card is narrower and the eye has less horizontal distance to travel. * * The text column's row-gap is set to 0 here and the two gaps are expressed as * explicit margins instead. A single flex gap applies between EVERY pair, so it * cannot produce 7px under the name and 5px under the price at the same time. * * Selectors are pitched high enough to beat Bricks' inline element CSS -- see the * specificity note earlier in this file. * * Space BETWEEN cards is deliberately untouched: the grid's row-gap already measures * ~33px, inside the 32-40px the owner asked for. */ @media (max-width: 991px) { /* image -> product name. Bricks emits a per-template rule at (0,2,0) inline and later in the document (`.brxe-pebhcv.brxe-block` on archives, `.brxe-llzayd.brxe-block` on the shop page), so an equally-specific selector loses on source order. Three classes settles it, and `.vr-card` is ours rather than a generated name that differs per template. */ .bt-product-card.vr-card.brxe-block { row-gap: 12px; } /* product name -> price */ /* Bricks emits `.bt-product-card__title.brxe-heading { font-size: 20px !important }`. !important can only be answered with !important -- specificity alone cannot beat it. Applied to font-size only; line-height and margin win normally. */ .bt-product-card .bt-product-card__title.brxe-heading { font-size: 18px !important; line-height: 1.3; margin-bottom: 5px; } /* price -> review */ .bt-product-card .bt-product-card__price.brxe-product-price { margin-bottom: 3px; } /* Sale price. The struck-through original is scaled with it -- left at 18px it would sit almost level with the 21px sale price and blunt the contrast. */ /* Beats `.bt-product-card__price.brxe-product-price .price ins` (0,3,1). */ .bt-product-card .bt-product-card__price.brxe-product-price .price ins, .bt-product-card .bt-product-card__price.brxe-product-price .price ins .woocommerce-Price-amount { font-size: 21px; } .bt-product-card .bt-product-card__price.brxe-product-price .price del, .bt-product-card .bt-product-card__price.brxe-product-price .price del .woocommerce-Price-amount { font-size: 16px; } /* line-height is pinned in px on BOTH the row and the star. With a unitless line-height the star glyph generates a slightly taller line box than the plain text of "ยังไม่มีรีวิว", which made rated cards 19px and unrated ones 18px -- a 1px stagger across a row of cards. */ .bt-product-card .vr-card-rating { font-size: 13px; line-height: 18px; min-height: 18px; } .bt-product-card .vr-card-star { font-size: 12px; line-height: 18px; } } /* * Landing on #reviews. * * reviews.js scrolls manually with a header offset, because on this Bricks template the * review section sits inside a collapsed accordion panel and has no box until that panel * is opened. This is the belt-and-braces case: if the panel happens to be open already, * the browser's own hash jump runs, and without a scroll margin the 80px sticky header * covers the section heading. */ #reviews { scroll-margin-top: 96px; } /* ---- the coupon awarded after an invite-based review ---- */ /* * Only ever rendered when a review came from a printed card's QR. Styled as a reward rather * than a form message: it is the payoff the card promised, and the code has to be readable * and copyable at a glance on a phone. */ .vr-coupon-awarded { margin-top: 16px; padding: 14px 16px; border: 2px solid #1f6b34; border-radius: 6px; text-align: center; background: #f4f8f4; } .vr-coupon-awarded__amount { font-size: 15px; font-weight: 600; color: #1f6b34; } .vr-coupon-awarded__code { /* Monospace and generously spaced: this gets typed into the checkout coupon box. */ font-family: "SFMono-Regular", Menlo, Consolas, monospace; font-size: 22px; font-weight: 700; letter-spacing: 2px; margin: 6px 0 4px; /* Lets a phone user long-press to select just the code. */ user-select: all; } .vr-coupon-awarded__terms { font-size: 12px; line-height: 1.45; color: #555; }