/* ============================================================ CELASTA — SINGLE PRODUCT (Phase 5) Loaded only on product pages (see inc/core/enqueue.php). ============================================================ */ /* ---- Gallery actions (wishlist / fullscreen / share) ---- */ .gallery-actions{display:flex;flex-direction:column;gap:8px;} /* The heart is shared with the shop loop cards, where .celasta-wish-btn is absolutely pinned to the card corner (top:12px;right:12px). Inside the gallery it must sit in the flex column instead - without this reset it escaped the column and landed on top of the zoom button, which is the overlap the client reported. */ .gallery-actions .celasta-wish-btn{ position:static;top:auto;right:auto;z-index:auto;flex:0 0 auto; } .gallery-actions .celasta-wish-btn:hover{transform:none;} .gallery-actions .celasta-wish-btn, .gallery-action-btn{ width:40px;height:40px;background:rgba(250,248,244,0.92); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); border-radius:50%;display:flex;align-items:center;justify-content:center; font-size:0.95rem;color:var(--c-charcoal);border:1px solid var(--c-border); cursor:pointer;transition:var(--transition); } .gallery-actions .celasta-wish-btn:hover, .gallery-action-btn:hover{background:var(--c-charcoal);color:var(--c-white);} .gallery-actions .celasta-wish-btn.is-active{color:var(--c-gold);} /* ---- Hover zoom ---- */ .product-main-image.zoom-enabled{cursor:zoom-in;} .product-main-image.zoom-enabled img{transition:transform 0.25s ease;} .product-main-image.zoom-enabled.is-zooming img{transform:scale(2);} .product-main-image.zoom-enabled:hover img{transform:scale(2);} .gallery-zoom-hint{ position:absolute;left:12px;bottom:12px;z-index:4; font-size:0.62rem;letter-spacing:0.08em;text-transform:uppercase; color:var(--c-white);background:rgba(44,37,32,0.55); padding:5px 10px;border-radius:20px;pointer-events:none; opacity:0;transition:opacity 0.3s ease; } .product-main-image:hover .gallery-zoom-hint{opacity:1;} @media(hover:none){.gallery-zoom-hint{opacity:1;}.product-main-image.zoom-enabled{cursor:pointer;}} /* ---- View Story button ---- MOVED to woo-extra.css. The Inspirations/Evermores entry pages use this same button for their "Wear It" link, and product.css is loaded only on product pages - the same reason the quantity stepper's styles live there rather than here. One definition, so the two can never drift apart. */ /* ---- Buy Now button (inside the add-to-cart form) ---- */ .celasta-buy-now{ background:var(--c-gold)!important;color:var(--c-white)!important; margin-left:10px!important;border:none!important; } .celasta-buy-now:hover{background:var(--c-charcoal)!important;} @media(max-width:480px){ .celasta-buy-now{margin-left:0!important;margin-top:10px!important;display:block;width:100%;} } /* ---- Notify Me (out of stock) ---- */ .notify-restock{background:var(--c-surface);border:1px solid var(--c-border);padding:22px;margin-bottom:24px;border-radius:var(--radius-sm,4px);} .notify-restock-badge{display:inline-block;background:#c0392b;color:#fff;font-size:0.6rem;letter-spacing:0.12em;text-transform:uppercase;font-weight:600;padding:4px 10px;border-radius:3px;margin-bottom:10px;} .notify-restock-head p{font-size:0.86rem;color:var(--c-muted);line-height:1.7;margin:0 0 16px;} .notify-restock-form{display:flex;gap:10px;} .notify-restock-form input{flex:1;border:1px solid var(--c-border);padding:12px 14px;font-family:var(--font-body);font-size:0.9rem;background:var(--c-white);outline:none;transition:var(--transition);border-radius:var(--radius-sm,4px);} .notify-restock-form input:focus{border-color:var(--c-gold);box-shadow:0 0 0 3px rgba(184,154,106,0.12);} .notify-restock-msg{margin-top:12px;font-size:0.84rem;} .notify-restock-msg.is-success{color:#4A5E45;} .notify-restock-msg.is-error{color:#c0392b;} @media(max-width:480px){.notify-restock-form{flex-direction:column;}} /* ---- Fullscreen lightbox ---- */ .product-lightbox{ position:fixed;inset:0;z-index:1600; background:rgba(20,17,14,0.94); display:flex;align-items:center;justify-content:center; opacity:0;transition:opacity 0.25s ease; } .product-lightbox.open{opacity:1;} .product-lightbox[hidden]{display:none;} .plb-stage{max-width:90vw;max-height:88vh;display:flex;align-items:center;justify-content:center;} .plb-stage img{max-width:90vw;max-height:88vh;object-fit:contain;transition:opacity 0.2s ease;box-shadow:0 20px 60px rgba(0,0,0,0.5);} .plb-close,.plb-nav{ position:absolute;background:rgba(250,248,244,0.14);border:1px solid rgba(255,255,255,0.25); color:#fff;width:48px;height:48px;border-radius:50%;cursor:pointer; display:flex;align-items:center;justify-content:center;font-size:1.1rem; transition:background 0.2s ease;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); } .plb-close:hover,.plb-nav:hover{background:rgba(250,248,244,0.28);} .plb-close{top:24px;right:24px;} .plb-prev{left:24px;top:50%;transform:translateY(-50%);} .plb-next{right:24px;top:50%;transform:translateY(-50%);} .plb-counter{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,0.8);font-size:0.78rem;letter-spacing:0.15em;} @media(max-width:600px){ .plb-close{top:14px;right:14px;width:42px;height:42px;} .plb-prev{left:8px;}.plb-next{right:8px;} } /* ---- Mobile sticky Add-to-Cart / Buy Now ---- */ .product-sticky-bar{ position:fixed;left:0;right:0;bottom:0;z-index:1200; display:flex;align-items:center;gap:14px; padding:12px 16px;background:rgba(250,248,244,0.98); border-top:1px solid var(--c-border);box-shadow:0 -4px 20px rgba(44,37,32,0.1); transform:translateY(120%);transition:transform 0.35s cubic-bezier(0.16,1,0.3,1); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); } .product-sticky-bar.visible{transform:translateY(0);} .psb-info{display:flex;flex-direction:column;min-width:0;flex:1;} .psb-name{font-size:0.8rem;color:var(--c-charcoal);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .psb-price{font-size:0.9rem;color:var(--c-gold-text,var(--c-charcoal));font-weight:600;} .psb-price del{color:var(--c-muted);font-weight:400;font-size:0.78rem;margin-right:4px;} .psb-actions{display:flex;gap:8px;flex-shrink:0;} .psb-actions .btn{padding:12px 18px;font-size:0.68rem;} /* Only ever visible on smaller screens; the summary buttons cover desktop. */ @media(min-width:901px){.product-sticky-bar{display:none!important;}} @media(max-width:380px){.psb-name{display:none;}} /* ============================================================ PRODUCT FAQ ACCORDIONS (native
) ============================================================ */ .product-faqs{border-top:1px solid var(--c-border);} .product-faq{border-bottom:1px solid var(--c-border);} .product-faq summary{ list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px; padding:18px 2px;font-weight:500;color:var(--c-charcoal);font-size:0.95rem; -webkit-tap-highlight-color:transparent; } .product-faq summary::-webkit-details-marker{display:none;} .product-faq-chev{color:var(--c-muted);font-size:0.75rem;transition:transform 0.3s ease;flex-shrink:0;} .product-faq[open] .product-faq-chev{transform:rotate(180deg);color:var(--c-gold);} .product-faq-answer{padding:0 2px 20px;color:var(--c-muted);font-size:0.9rem;line-height:1.8;} .product-faq summary:focus-visible{outline:2px solid var(--c-gold);outline-offset:2px;} /* ============================================================ REVIEWS (Phase 5 premium display) ============================================================ */ .celasta-reviews{padding:60px 0;border-top:1px solid var(--c-border);} .celasta-reviews-head{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end;justify-content:space-between;margin-bottom:36px;} .celasta-reviews-title{font-family:var(--font-body);font-size:0.72rem;font-weight:600;letter-spacing:0.2em;text-transform:uppercase;color:var(--c-muted);} .crv-summary{display:flex;align-items:center;gap:18px;margin-top:10px;} /* Body font, not the display serif: a rating is a number to be read, not a piece of styling - the same call already made for prices and totals on the cart and order pages. */ .crv-avg{font-family:var(--font-body);font-size:2.2rem;font-weight:600;line-height:1;color:var(--c-charcoal);letter-spacing:0.01em;} .crv-avg small{font-size:1rem;color:var(--c-muted);} .crv-stars{color:var(--c-gold);font-size:0.95rem;letter-spacing:2px;} .crv-stars .fa-star-o,.crv-stars .fa-regular{color:var(--c-border);} .crv-count{font-size:0.82rem;color:var(--c-muted);} .crv-sort{display:flex;align-items:center;gap:8px;font-size:0.78rem;color:var(--c-muted);} .crv-sort select{border:1px solid var(--c-border);padding:8px 12px;font-family:var(--font-body);font-size:0.82rem;background:var(--c-white);border-radius:var(--radius-sm,4px);cursor:pointer;} .crv-list{display:flex;flex-direction:column;gap:20px;} .crv-card{border:1px solid var(--c-border);padding:24px;border-radius:var(--c-radius-card,14px);background:var(--c-white);} .crv-card-top{display:flex;align-items:center;gap:12px;margin-bottom:10px;flex-wrap:wrap;} .crv-author{font-weight:600;color:var(--c-charcoal);font-size:0.92rem;} .crv-verified{display:inline-flex;align-items:center;gap:5px;font-size:0.62rem;letter-spacing:0.08em;text-transform:uppercase;color:#4A5E45;background:rgba(74,94,69,0.1);padding:3px 8px;border-radius:20px;font-weight:600;} .crv-date{font-size:0.72rem;color:var(--c-muted);margin-left:auto;} .crv-card .crv-stars{font-size:0.82rem;margin-bottom:8px;} .crv-text{color:var(--c-muted);line-height:1.8;font-size:0.9rem;} .crv-images{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;} .crv-images a{width:64px;height:64px;border-radius:4px;overflow:hidden;border:1px solid var(--c-border);} .crv-images img{width:100%;height:100%;object-fit:cover;} .crv-foot{display:flex;align-items:center;gap:14px;margin-top:16px;} .crv-helpful{display:inline-flex;align-items:center;gap:7px;font-size:0.74rem;color:var(--c-muted);background:none;border:1px solid var(--c-border);padding:7px 14px;border-radius:20px;cursor:pointer;transition:var(--transition);} .crv-helpful:hover{border-color:var(--c-gold);color:var(--c-charcoal);} .crv-helpful.voted{border-color:var(--c-gold);color:var(--c-gold-text,var(--c-charcoal));cursor:default;} .crv-helpful .crv-helpful-count{font-weight:600;} /* Shown once, to the person who just submitted a review that is being held. Without it the page simply reloaded to "No reviews yet" and the review looked like it had vanished. */ .crv-held-notice{display:flex;align-items:center;gap:8px;margin:10px 0 0;padding:10px 14px;border-radius:var(--c-radius-card,14px);background:rgba(74,94,69,0.08);color:#4A5E45;font-size:0.84rem;line-height:1.5;} .crv-card.is-pending{border-style:dashed;background:var(--c-surface);} .crv-pending-badge{display:inline-flex;align-items:center;font-size:0.62rem;letter-spacing:0.08em;text-transform:uppercase;font-weight:600;color:#8a6d3b;background:rgba(184,154,106,0.16);padding:3px 8px;border-radius:20px;} .crv-empty{text-align:center;padding:40px 20px;color:var(--c-muted);} /* Shown in place of the review form to anyone who may not review. */ .crv-gate{margin-top:28px;padding:24px 20px;text-align:center;border:1px solid var(--c-border,rgba(0,0,0,.1));border-radius:var(--c-radius-card,12px);} .crv-gate p{margin:0;color:var(--c-muted);line-height:1.6;} .crv-gate .btn{margin-top:16px;} .crv-pagination{display:flex;gap:8px;justify-content:center;margin-top:28px;} /* Review form (WooCommerce native, restyled) */ #review_form_wrapper{margin-top:40px;border-top:1px solid var(--c-border);padding-top:32px;} #review_form_wrapper .comment-reply-title{font-family:var(--font-display);font-size:1.3rem;margin-bottom:16px;display:block;} .comment-form-rating label{display:block;margin-bottom:6px;font-size:0.78rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--c-muted);} /* already clears the fixed header, so the template's inline padding-top:100px was a second header offset. Class-based so the spacing is themeable and responsive. */ .product-page-wrap{padding-top:36px;padding-bottom:80px;} @media(max-width:900px){.product-page-wrap{padding-top:24px;padding-bottom:56px;}} @media(max-width:600px){.product-page-wrap{padding-top:16px;padding-bottom:44px;}} /* ------------------------------------------------------------------ Review form redesign (Phase 7) ------------------------------------------------------------------ The rating control is five radios rendered highest-first, so the CSS sibling combinator can fill every star up to the checked one without any JavaScript. Stars are inline SVG — the previous control depended on WooCommerce's icon font, which this theme never loads, and so rendered as the literal text "1 of 5 stars 2 of 5 stars…". ------------------------------------------------------------------ */ #review_form_wrapper .comment-form{background:var(--c-surface);border:1px solid var(--c-border);border-radius:14px;padding:clamp(20px,3vw,32px);max-width:720px;} #review_form_wrapper .comment-reply-title{font-family:var(--font-display);font-size:clamp(1.2rem,2vw,1.55rem);font-weight:400;color:var(--c-charcoal);margin-bottom:18px;display:block;} #review_form_wrapper .comment-form p{margin:0 0 16px;} #review_form_wrapper .comment-form label{display:block;margin-bottom:6px;font-family:var(--font-body);font-size:0.72rem;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--c-muted);} #review_form_wrapper .comment-form input[type=text], #review_form_wrapper .comment-form input[type=email], #review_form_wrapper .comment-form textarea{width:100%;border:1px solid var(--c-border);border-radius:10px;background:var(--c-white);padding:12px 14px;font-family:var(--font-body);font-size:0.92rem;color:var(--c-text);outline:none;transition:var(--transition);} #review_form_wrapper .comment-form textarea{min-height:130px;resize:vertical;line-height:1.7;} #review_form_wrapper .comment-form input:focus, #review_form_wrapper .comment-form textarea:focus{border-color:var(--c-gold);box-shadow:0 0 0 3px rgba(184,154,106,0.16);} #review_form_wrapper .comment-form .required{color:#c0392b;} .crv-hint{display:block;margin-top:6px;font-size:0.74rem;color:var(--c-muted);letter-spacing:0.02em;} /* ── star rating ── */ .crv-rating{border:0;padding:0;margin:0 0 18px;} .crv-rating legend{padding:0;margin-bottom:8px;font-family:var(--font-body);font-size:0.72rem;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--c-muted);} .crv-rating-stars{display:inline-flex;flex-direction:row-reverse;gap:4px;} .crv-rating-stars input{position:absolute;opacity:0;width:1px;height:1px;} .crv-rating-stars label{margin:0!important;padding:2px;cursor:pointer;line-height:0;color:var(--c-border);transition:color .12s ease,transform .12s ease;} .crv-rating-stars svg{width:30px;height:30px;fill:currentColor;display:block;} /* Fill the checked star and every star before it (earlier siblings are LOWER values because the row is reversed). */ .crv-rating-stars input:checked ~ label, .crv-rating-stars label:hover, .crv-rating-stars label:hover ~ label{color:var(--c-gold);} /* * The same three rules again, prefixed with #review_form_wrapper. * * Not redundant: the review form carries * #review_form_wrapper .comment-form label{color:var(--c-muted)} * which styles the field captions ("YOUR REVIEW", "NAME"). An ID beats any * number of classes, so that one rule was painting the star labels muted * grey and, worse, beating :checked and :hover too - the stars never turned * gold on click or hover, which is exactly what this looked like from the * outside: a rating control that captured the value but never showed it. * * The star labels are not field captions, so the caption rule's block layout * and letter-spacing are undone here as well. */ #review_form_wrapper .comment-form .crv-rating-stars label{ display:inline-block;margin:0;padding:2px;line-height:0; font-size:inherit;letter-spacing:normal;text-transform:none; color:var(--c-border); } #review_form_wrapper .comment-form .crv-rating-stars input:checked ~ label, #review_form_wrapper .comment-form .crv-rating-stars label:hover, #review_form_wrapper .comment-form .crv-rating-stars label:hover ~ label{color:var(--c-gold);} .crv-rating-stars label:hover{transform:scale(1.08);} .crv-rating-stars input:focus-visible + label{outline:2px solid var(--c-gold);outline-offset:2px;border-radius:4px;} .crv-rating-readout{display:inline-block;margin-left:12px;font-size:0.8rem;color:var(--c-charcoal);letter-spacing:0.04em;vertical-align:middle;} /* ── photo upload ── */ .comment-form-photos[hidden]{display:none;} .comment-form-photos{border:1px dashed var(--c-border);border-radius:10px;padding:14px;background:var(--c-white);} .crv-photos-hint{display:block;margin:-2px 0 10px;font-size:0.74rem;color:var(--c-muted);text-transform:none;letter-spacing:0;font-weight:400;} .comment-form-photos input[type=file]{width:100%;font-size:0.84rem;color:var(--c-muted);} .comment-form-photos input[type=file]::file-selector-button{border:1px solid var(--c-border);border-radius:999px;background:var(--c-surface);padding:8px 16px;margin-right:12px;font-family:var(--font-body);font-size:0.7rem;font-weight:600;letter-spacing:0.12em;text-transform:uppercase;color:var(--c-charcoal);cursor:pointer;transition:var(--transition);} .comment-form-photos input[type=file]::file-selector-button:hover{border-color:var(--c-gold);color:var(--c-gold);} .crv-photos-list{display:block;margin-top:8px;font-size:0.76rem;color:var(--c-gold);} /* ── submit ── */ #review_form_wrapper .form-submit{margin:4px 0 0;} #review_form_wrapper .form-submit input[type=submit]{border:0;border-radius:999px;background:var(--c-charcoal);color:var(--c-white);font-family:var(--font-body);font-size:0.72rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;padding:15px 34px;cursor:pointer;transition:var(--transition);} #review_form_wrapper .form-submit input[type=submit]:hover{background:var(--c-gold);} @media(max-width:600px){ .crv-rating-stars svg{width:34px;height:34px;} #review_form_wrapper .form-submit input[type=submit]{width:100%;} } /* ------------------------------------------------------------------ Review editing (Prompt 86) ------------------------------------------------------------------ One review per customer per product, so the card the customer is looking at IS the thing they change. The editor is therefore inside the card rather than down at the submit form, and it is rendered hidden rather than injected - with JavaScript off the reviews all still read, only the editor stays shut. ------------------------------------------------------------------ */ /* The star labels carry a text description for screen readers. Nothing in this theme styled .screen-reader-text - WooCommerce's own stylesheet, which normally does, is not loaded here - so that description was sitting in the layout as literal text. Clipped the standard way, and scoped to the rating control so no other use of the class changes behaviour. */ .crv-rating-stars .screen-reader-text{ position:absolute!important;width:1px;height:1px;overflow:hidden; clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap;border:0;padding:0;margin:-1px; } /* "Edited 4 September 2026 at 18:22" - shown to every reader, not just the author. The whole point of the stamp is that anyone can tell the text changed after it was posted. */ .crv-edited{ margin-left:auto;font-size:0.72rem;color:var(--c-muted);font-style:italic; } /* ── the in-card editor ── */ .crv-edit{ margin-top:18px;padding-top:18px;border-top:1px solid var(--c-border); } .crv-edit .crv-rating{border:0;padding:0;margin:0 0 14px;} .crv-edit .crv-rating legend, .crv-edit .crv-edit-label{ display:block;padding:0;margin-bottom:8px; font-family:var(--font-body);font-size:0.72rem;font-weight:600; letter-spacing:0.14em;text-transform:uppercase;color:var(--c-muted); } .crv-edit .crv-rating-stars svg{width:26px;height:26px;} .crv-edit textarea{ width:100%;border:1px solid var(--c-border);border-radius:10px; background:var(--c-white);padding:12px 14px; font-family:var(--font-body);font-size:0.92rem;line-height:1.7;color:var(--c-text); min-height:120px;resize:vertical;outline:none;transition:var(--transition); } .crv-edit textarea:focus{border-color:var(--c-gold);box-shadow:0 0 0 3px rgba(184,154,106,0.16);} .crv-edit .crv-hint{margin:8px 0 0;} .crv-edit-actions{display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap;} .crv-edit-actions .btn{padding:11px 26px;} .crv-edit-cancel{ background:none;border:0;padding:0;cursor:pointer; font-size:0.74rem;letter-spacing:0.08em;text-transform:uppercase; color:var(--c-muted);text-decoration:underline;text-underline-offset:3px; } .crv-edit-cancel:hover{color:var(--c-charcoal);} /* ── notice variants ── */ /* The held-review notice is green because it is good news. A redirect that refused something, or reported an error, must not wear the same colour. */ .crv-note-info{background:rgba(184,154,106,0.12);color:#8a6d3b;} .crv-note-err{background:rgba(192,57,43,0.10);color:#a5342a;} /* ── Reviews column width, desktop ──────────────────────────────────────── The section used to run the full width of the container, so a two-line review sat in a box a thousand pixels wide with the author's name at one end and the date at the other. Capped at half the page. Applied to #reviews as a whole rather than to the cards alone, so the heading, the rating summary, the sort control, the cards and the review form all share one column edge instead of the header and form floating wider than the reviews under them. Desktop only. Below 992px the section already fills the width it is given, which on a phone is the right answer. */ @media(min-width:992px){ #reviews{max-width:50%;} } /* ── the review's own menu ──────────────────────────────────────────────── Top-right of the card, where every app puts one. Only ever rendered on a review the visitor owns, so its presence IS the affordance - there is no copy anywhere telling anyone they may edit. */ .crv-menu{position:relative;margin-left:10px;line-height:0;} .crv-menu-btn{ width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center; background:none;border:0;border-radius:50%;cursor:pointer; color:var(--c-muted);font-size:0.9rem;transition:var(--transition); } .crv-menu-btn:hover, .crv-menu-btn[aria-expanded="true"]{background:var(--c-surface);color:var(--c-charcoal);} .crv-menu-pop{ position:absolute;top:calc(100% + 6px);right:0;z-index:5; min-width:172px;padding:6px; background:var(--c-white);border:1px solid var(--c-border); border-radius:12px;box-shadow:0 10px 28px rgba(0,0,0,0.10); line-height:1.4;text-align:left; } .crv-menu-list{display:flex;flex-direction:column;} /* An explicit display: beats the hidden attribute's UA display:none, so the confirm step stacked UNDER the choices instead of replacing them. Anything in this menu that JS toggles with .hidden gets the override. */ .crv-menu-pop[hidden], .crv-menu-list[hidden], .crv-menu-confirm[hidden], .crv-edit[hidden]{display:none!important;} .crv-menu-list button{ display:flex;align-items:center;gap:10px;width:100%; padding:9px 12px;border:0;border-radius:8px;background:none;cursor:pointer; font-family:var(--font-body);font-size:0.82rem;color:var(--c-text);text-align:left; transition:var(--transition); } .crv-menu-list button i{width:14px;font-size:0.8rem;color:var(--c-muted);} .crv-menu-list button:hover{background:var(--c-surface);} .crv-menu-del{color:#a5342a!important;} .crv-menu-del:hover{background:rgba(192,57,43,0.08)!important;} .crv-menu-del i{color:#a5342a!important;} /* The second tap. A browser confirm() would block the page, and this keeps the question in the same corner the request came from. */ .crv-menu-confirm{padding:10px 12px;} .crv-menu-confirm p{margin:0 0 10px;font-size:0.8rem;color:var(--c-text);line-height:1.5;} .crv-menu-confirm form{display:flex;align-items:center;gap:8px;} .crv-menu-del-yes{ padding:7px 14px;border:0;border-radius:20px;cursor:pointer; background:#a5342a;color:#fff;font-family:var(--font-body); font-size:0.72rem;letter-spacing:0.06em;text-transform:uppercase; } .crv-menu-del-yes:hover{background:#8c2b23;} .crv-menu-cancel{ background:none;border:0;padding:0 4px;cursor:pointer; font-size:0.74rem;color:var(--c-muted);text-decoration:underline;text-underline-offset:3px; } .crv-menu-cancel:hover{color:var(--c-charcoal);} @media(max-width:600px){ .crv-edited{margin-left:0;width:100%;} .crv-foot{flex-wrap:wrap;gap:10px;} .crv-edit-actions .btn{width:100%;justify-content:center;} } /* ------------------------------------------------------------------ Single-product size selector Moved here from inc/modules/product-size.php (2026-09-26, ledger s18). It used to print as an inline