/* =====================================================
* LIVE HOTFIX — 2026-05-31
*
* Targeted overrides for issues found on the live site at
* iPhone 14 Pro Max (430x932 DPR3). Loaded LAST after every
* other stylesheet, with max specificity.
*
* All fixes scoped to mobile (<=768px) unless noted.
* ===================================================== */
/* =====================================================
* 1. ACCOUNT — action strip cramped (h:20px)
* The "View Orders / Saved Addresses / Wishlist / Account Details / Log Out"
* row on /my-account/ was rendering with min-height:0 padding:0 16px.
* Restore proper tap targets + breathing space.
* ===================================================== */
.rcs-account__actions {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
margin-top: 16px !important;
}
.rcs-account__action {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
min-height: 56px !important;
padding: 14px 18px !important;
background: var(--rcs-surface, #fff) !important;
border: 1px solid var(--rcs-outline, rgba(184, 149, 89, .25)) !important;
border-radius: 12px !important;
color: var(--rcs-primary, #6B1A2E) !important;
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
text-decoration: none !important;
box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}
.rcs-account__action.is-primary {
background: var(--rcs-primary, #6B1A2E) !important;
color: #fff !important;
border-color: var(--rcs-primary, #6B1A2E) !important;
}
.rcs-account__action::after {
content: "" !important;
display: inline-block !important;
width: 9px; height: 9px;
border-top: 2px solid currentColor !important;
border-right: 2px solid currentColor !important;
transform: rotate(45deg) !important;
opacity: 0.55 !important;
margin-left: 8px !important;
}
.rcs-account__action:active {
transform: scale(.985) !important;
}
/* =====================================================
* 2. CHECKOUT — order summary table cramped + jammed
* Rows were 25px each, no card padding. Make it a proper
* boutique card with breathing room.
* ===================================================== */
.woocommerce-checkout #order_review,
.woocommerce-checkout .woocommerce-checkout-review-order {
background: var(--rcs-surface, #fff) !important;
border: 1px solid var(--rcs-outline, rgba(184, 149, 89, .22)) !important;
border-radius: 14px !important;
padding: 16px 16px 18px !important;
margin-top: 16px !important;
box-shadow: 0 2px 8px rgba(0,0,0,.04) !important;
}
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout h3#order_review_heading {
font-family: 'Fraunces', serif !important;
font-style: italic !important;
font-size: 1.25rem !important;
margin: 0 0 10px !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
}
.woocommerce-checkout table.shop_table {
border: none !important;
border-collapse: separate !important;
border-spacing: 0 !important;
margin: 0 !important;
}
.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td {
padding: 12px 0 !important;
border: none !important;
border-bottom: 1px dashed rgba(184, 149, 89, .25) !important;
line-height: 1.4 !important;
font-size: 14px !important;
vertical-align: top !important;
}
.woocommerce-checkout table.shop_table thead th {
font-family: 'Fraunces', serif !important;
font-style: italic !important;
font-weight: 500 !important;
font-size: 12px !important;
text-transform: uppercase !important;
letter-spacing: 0.06em !important;
color: rgba(60, 50, 40, .65) !important;
padding-bottom: 8px !important;
border-bottom: 1px solid rgba(184, 149, 89, .35) !important;
}
.woocommerce-checkout table.shop_table tr.cart_item td.product-name {
font-weight: 500 !important;
color: #1b1b1b !important;
}
.woocommerce-checkout table.shop_table tr.cart_item td.product-name .product-quantity {
font-weight: 400 !important;
color: rgba(60, 50, 40, .65) !important;
margin-left: 4px !important;
}
.woocommerce-checkout table.shop_table tr.cart_item td.product-total {
text-align: right !important;
font-weight: 500 !important;
white-space: nowrap !important;
}
.woocommerce-checkout table.shop_table tfoot th,
.woocommerce-checkout table.shop_table tfoot td {
padding: 10px 0 !important;
border-bottom: 1px dashed rgba(184, 149, 89, .2) !important;
font-size: 14px !important;
}
.woocommerce-checkout table.shop_table tfoot tr:last-child th,
.woocommerce-checkout table.shop_table tfoot tr:last-child td,
.woocommerce-checkout table.shop_table tfoot tr.order-total th,
.woocommerce-checkout table.shop_table tfoot tr.order-total td {
border-bottom: none !important;
padding-top: 14px !important;
font-family: 'Fraunces', serif !important;
font-style: italic !important;
font-size: 18px !important;
font-weight: 600 !important;
color: var(--rcs-primary, #6B1A2E) !important;
}
.woocommerce-checkout table.shop_table tfoot tr.order-total td .amount {
color: var(--rcs-primary, #6B1A2E) !important;
}
.woocommerce-checkout table.shop_table tfoot th {
text-align: left !important;
}
.woocommerce-checkout table.shop_table tfoot td {
text-align: right !important;
white-space: nowrap !important;
}
/* Payment method box breathing room */
.woocommerce-checkout #payment {
background: transparent !important;
border: none !important;
margin-top: 14px !important;
padding: 0 !important;
}
.woocommerce-checkout #payment ul.payment_methods {
background: var(--rcs-cream, #fdf8ef) !important;
border: 1px solid rgba(184, 149, 89, .22) !important;
border-radius: 12px !important;
padding: 14px 16px !important;
margin: 0 0 14px !important;
list-style: none !important;
}
.woocommerce-checkout #payment ul.payment_methods li {
padding: 6px 0 !important;
border: none !important;
}
.woocommerce-checkout #payment ul.payment_methods li label {
font-weight: 500 !important;
font-size: 14px !important;
color: #1b1b1b !important;
}
.woocommerce-checkout #payment .payment_box {
background: rgba(255,255,255,.6) !important;
border-radius: 8px !important;
padding: 10px 12px !important;
margin: 8px 0 0 !important;
font-size: 13px !important;
line-height: 1.55 !important;
color: rgba(60, 50, 40, .8) !important;
}
.woocommerce-checkout #payment .place-order {
padding: 0 !important;
margin: 14px 0 0 !important;
}
.woocommerce-checkout #place_order {
width: 100% !important;
padding: 16px 20px !important;
font-size: 15px !important;
font-weight: 600 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
border-radius: 12px !important;
background: var(--rcs-primary, #6B1A2E) !important;
color: #fff !important;
border: none !important;
cursor: pointer !important;
box-shadow: 0 6px 16px rgba(107, 26, 46, .25) !important;
}
/* Privacy policy text spacing */
.woocommerce-checkout .woocommerce-privacy-policy-text {
margin: 10px 0 14px !important;
font-size: 12px !important;
line-height: 1.55 !important;
color: rgba(60, 50, 40, .65) !important;
}
/* "Ship to a different address?" toggle */
.woocommerce-checkout #ship-to-different-address {
margin: 18px 0 8px !important;
}
.woocommerce-checkout #ship-to-different-address label {
font-family: 'Fraunces', serif !important;
font-style: italic !important;
font-size: 1.05rem !important;
color: #1b1b1b !important;
cursor: pointer !important;
}
/* Order notes textarea */
.woocommerce-checkout #order_comments_field label {
font-family: 'Fraunces', serif !important;
font-style: italic !important;
font-size: 1rem !important;
color: #1b1b1b !important;
}
.woocommerce-checkout #order_comments_field .woocommerce-input-wrapper textarea {
min-height: 80px !important;
padding: 12px 14px !important;
border-radius: 10px !important;
}
/* =====================================================
* 3. PDP — touch-action blocking vertical scroll on gallery
* Live had touch-action:pan-x on .woocommerce-product-gallery
* which prevents user from scrolling page when their finger
* starts on the product image. Restore native vertical scroll.
* ===================================================== */
.single-product .woocommerce-product-gallery,
.single-product .rcs-pdp__gallery,
.woocommerce-product-gallery {
touch-action: pan-y !important;
overflow: visible !important;
}
.single-product .woocommerce-product-gallery__image,
.single-product .rcs-pdp__gallery img,
.woocommerce-product-gallery img.rcs-pan-img,
.woocommerce-product-gallery__image img {
touch-action: pan-y !important;
-webkit-user-drag: none !important;
}
/* Kill the JS-injected pan transform on touch devices (was breaking scroll) */
@media (hover: none), (pointer: coarse) {
.rcs-pan-img,
.woocommerce-product-gallery img.rcs-pan-img {
transform: none !important;
cursor: default !important;
}
}
/* Ensure the gallery thumbnails strip is visible + scrollable */
.single-product .woocommerce-product-gallery .flex-control-nav,
.single-product .woocommerce-product-gallery .flex-control-thumbs {
display: flex !important;
gap: 8px !important;
padding: 10px 0 !important;
margin: 8px 0 0 !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
list-style: none !important;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs::-webkit-scrollbar {
display: none !important;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs li {
flex: 0 0 64px !important;
aspect-ratio: 3/4 !important;
border-radius: 8px !important;
overflow: hidden !important;
opacity: 0.6 !important;
transition: opacity .2s ease !important;
cursor: pointer !important;
}
.single-product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active,
.single-product .woocommerce-product-gallery .flex-control-thumbs li.is-active img {
opacity: 1 !important;
}
/* =====================================================
* 4. HOMEPAGE — Shop by Price + trust strip cleanup
* ===================================================== */
@media (max-width: 768px) {
/* Trust strip — make sure items render as a clean horizontal scroller */
.rcs-trust-strip {
padding: 12px 0 !important;
border-bottom: 1px solid rgba(184, 149, 89, .15) !important;
}
.rcs-trust-strip__track {
display: flex !important;
gap: 24px !important;
padding: 0 16px !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
white-space: nowrap !important;
}
.rcs-trust-strip__track::-webkit-scrollbar { display: none !important; }
.rcs-trust-strip__item {
flex: 0 0 auto !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: rgba(60, 50, 40, .7) !important;
}
.rcs-trust-strip__item .ph {
color: var(--rcs-primary, #6B1A2E) !important;
font-size: 14px !important;
}
/* Shop by Price tiles — guarantee 3-up fits at 430px */
.rcs-price-tiers {
padding: 24px 0 16px !important;
}
.rcs-price-tiers__head {
text-align: center !important;
padding: 0 16px !important;
margin-bottom: 14px !important;
}
.rcs-price-tiers__head .rcs-eyebrow {
display: block !important;
font-size: 11px !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: var(--rcs-primary, #6B1A2E) !important;
margin-bottom: 4px !important;
}
.rcs-price-tiers__title {
font-family: 'Fraunces', serif !important;
font-style: italic !important;
font-size: 1.4rem !important;
font-weight: 600 !important;
line-height: 1.2 !important;
color: var(--rcs-primary, #6B1A2E) !important;
margin: 0 !important;
}
.rcs-price-tiers__grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 8px !important;
padding: 0 16px !important;
max-width: 100% !important;
}
.rcs-price-tier {
min-width: 0 !important;
padding: 14px 8px 12px !important;
text-align: center !important;
}
.rcs-price-tier__cap {
font-size: 16px !important;
font-weight: 600 !important;
white-space: nowrap !important;
}
.rcs-price-tier__sub {
font-size: 9px !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
margin-top: 4px !important;
}
}
/* =====================================================
* 5. CART — empty state + filled cart polish
* Already mostly fine, just minor padding tweaks.
* ===================================================== */
.woocommerce-cart .woocommerce {
padding: 16px !important;
}
.woocommerce-cart .cart_totals {
margin-top: 16px !important;
padding: 16px !important;
background: var(--rcs-cream, #fdf8ef) !important;
border-radius: 12px !important;
border: 1px solid rgba(184, 149, 89, .22) !important;
}
/* =====================================================
* 6. FOOTER — make Veloro credit visible + tidy
* ===================================================== */
.rcs-footer__credit,
.site-footer .credit,
.rcs-footer .credit {
display: block !important;
text-align: center !important;
padding: 12px 16px !important;
font-size: 11px !important;
letter-spacing: 0.06em !important;
color: rgba(60, 50, 40, .6) !important;
}
.rcs-footer__credit a,
.site-footer .credit a {
color: var(--rcs-primary, #6B1A2E) !important;
text-decoration: underline !important;
}
/* =====================================================
* 7. UNIVERSAL — kill horizontal scroll bleed anywhere
* ===================================================== */
html, body {
overflow-x: hidden !important;
}
img, picture, video {
max-width: 100% !important;
height: auto !important;
}
/* =====================================================
* 8. HOMEPAGE LAYOUT — full rebuild for mobile
* Issues found on live at 430px:
* - Huge empty gap (~600px) between hero and price tiles
* - Hero h1 sometimes hidden behind wp admin bar
* - Trust strip floats wrong (SILK MARK CERTIFIED bleeds left)
* - Section vertical rhythm broken — too much/too little padding
* - New arrivals heading buried below empty space
* - "Curated for the Occasion" tiles bleed left edge with no padding
* - Founder quote, loom diary, bridal sections need consistent rhythm
* - Bottom safe area for sticky nav (5 icons) needs 80px bottom padding on
* ===================================================== */
@media (max-width: 768px) {
/* Body safety — bottom sticky nav is ~70px so reserve breathing space */
body.home,
body.front-page,
body {
padding-bottom: 0 !important;
}
/* Last section before footer gets padding so it doesn't hide under sticky nav */
.rcs-main > section:last-of-type,
main > section:last-of-type {
padding-bottom: 90px !important;
}
/* HERO — clean fit, no extra space after */
.rcs-hero {
min-height: 70vh !important;
max-height: 100vh !important;
position: relative !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
}
.rcs-hero__media,
.rcs-hero__media img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.rcs-hero__content {
padding: 32px 24px 40px !important;
text-align: center !important;
}
.rcs-hero__title {
font-family: 'Fraunces', serif !important;
font-style: italic !important;
font-size: clamp(2rem, 7vw, 2.8rem) !important;
line-height: 1.05 !important;
font-weight: 500 !important;
color: #fff !important;
margin: 6px 0 12px !important;
text-shadow: 0 2px 16px rgba(0,0,0,.35) !important;
}
.rcs-hero__eyebrow {
font-size: 11px !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
color: rgba(255,255,255,.85) !important;
font-weight: 600 !important;
}
.rcs-hero__body {
font-size: 14px !important;
line-height: 1.5 !important;
color: rgba(255,255,255,.9) !important;
margin: 0 auto 24px !important;
max-width: 320px !important;
}
.rcs-hero__cta {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 12px !important;
}
.rcs-hero__cta .rcs-btn {
width: 100% !important;
max-width: 320px !important;
padding: 16px 24px !important;
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: 0.06em !important;
}
.rcs-hero__cta .rcs-btn--text,
.rcs-hero__story {
background: transparent !important;
color: #fff !important;
text-decoration: underline !important;
text-underline-offset: 4px !important;
padding: 8px 16px !important;
}
.rcs-hero__scroll-cue { display: none !important; }
/* Eliminate large gaps between sections */
.rcs-section,
section.rcs-hero + section,
section + section {
margin-top: 0 !important;
}
/* Section vertical rhythm — consistent */
section.rcs-section,
.rcs-trust-strip,
.rcs-price-tiers,
.rcs-new-arrivals,
.rcs-edits-grid,
.rcs-loom-diary,
.rcs-bridal,
.rcs-founder,
.rcs-fb-live {
padding-top: 32px !important;
padding-bottom: 32px !important;
}
.rcs-trust-strip {
padding-top: 14px !important;
padding-bottom: 14px !important;
}
/* Section headers — uniform left padding so nothing bleeds */
.rcs-section__title,
.rcs-section__head,
.rcs-new-arrivals__head,
.rcs-edits-grid__head,
.rcs-loom-diary__head,
.rcs-bridal__head {
padding: 0 16px !important;
margin-bottom: 18px !important;
}
.rcs-section__title h2,
.rcs-section__head h2,
.rcs-h2 {
font-family: 'Fraunces', serif !important;
font-style: italic !important;
font-size: 1.6rem !important;
line-height: 1.15 !important;
font-weight: 500 !important;
color: #1b1b1b !important;
margin: 0 !important;
}
/* "New arrivals" + product grid — 2-up, equal gutters */
.rcs-new-arrivals .rcs-product-grid,
.rcs-product-grid,
ul.products,
ul.products.columns-2 {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 14px 10px !important;
padding: 0 16px !important;
margin: 0 !important;
list-style: none !important;
}
.rcs-product-grid li,
ul.products li.product {
margin: 0 !important;
padding: 0 !important;
width: auto !important;
max-width: 100% !important;
list-style: none !important;
}
.rcs-product-grid img,
ul.products li.product img {
width: 100% !important;
aspect-ratio: 4/5 !important;
object-fit: cover !important;
border-radius: 10px !important;
}
.rcs-product-grid .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title {
font-family: 'Fraunces', serif !important;
font-style: italic !important;
font-size: 14px !important;
line-height: 1.2 !important;
margin: 10px 0 4px !important;
padding: 0 !important;
color: #1b1b1b !important;
}
.rcs-product-grid .price,
ul.products li.product .price {
font-size: 13px !important;
margin: 0 0 4px !important;
}
.rcs-product-grid .price del,
ul.products li.product .price del {
opacity: 0.5 !important;
margin-right: 4px !important;
}
.rcs-product-grid .price ins,
ul.products li.product .price ins {
text-decoration: none !important;
font-weight: 600 !important;
color: var(--rcs-primary, #6B1A2E) !important;
}
/* Hide the "Add to cart" button under product cards on mobile (cleaner look) */
.rcs-product-grid a.button,
ul.products li.product a.button.add_to_cart_button {
display: none !important;
}
/* "Curated for the Occasion" edits-grid tiles */
.rcs-edits-grid {
padding: 32px 0 !important;
}
.rcs-edits-grid__grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
padding: 0 16px !important;
}
.rcs-edits-tile {
position: relative !important;
aspect-ratio: 4/5 !important;
border-radius: 12px !important;
overflow: hidden !important;
}
.rcs-edits-tile img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.rcs-edits-tile__content {
position: absolute !important;
inset: auto 0 0 0 !important;
padding: 14px !important;
background: linear-gradient(180deg, transparent, rgba(0,0,0,.75)) !important;
color: #fff !important;
}
.rcs-edits-tile__content .rcs-eyebrow {
font-size: 10px !important;
color: rgba(255,255,255,.85) !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
margin-bottom: 4px !important;
}
.rcs-edits-tile__content h3 {
font-family: 'Fraunces', serif !important;
font-style: italic !important;
font-size: 1.1rem !important;
font-weight: 500 !important;
line-height: 1.15 !important;
margin: 0 !important;
}
/* Loom Diary + Bridal sections — image + text card */
.rcs-loom-diary,
.rcs-bridal {
padding: 36px 0 !important;
}
.rcs-loom-diary__media,
.rcs-bridal__media {
width: 100% !important;
aspect-ratio: 4/5 !important;
margin: 0 0 16px !important;
overflow: hidden !important;
border-radius: 12px !important;
}
.rcs-loom-diary__media img,
.rcs-bridal__media img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
.rcs-loom-diary__content,
.rcs-bridal__content {
padding: 0 16px !important;
}
.rcs-loom-diary__content .rcs-eyebrow,
.rcs-bridal__content .rcs-eyebrow {
font-size: 11px !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: var(--rcs-primary, #6B1A2E) !important;
margin-bottom: 6px !important;
}
.rcs-loom-diary__content h2,
.rcs-bridal__content h2 {
font-family: 'Fraunces', serif !important;
font-style: italic !important;
font-size: 1.6rem !important;
line-height: 1.15 !important;
margin: 0 0 12px !important;
}
.rcs-loom-diary__content p,
.rcs-bridal__content p {
font-size: 14px !important;
line-height: 1.55 !important;
color: rgba(60,50,40,.85) !important;
margin: 0 0 16px !important;
}
.rcs-loom-diary__content .rcs-btn,
.rcs-bridal__content .rcs-btn {
display: inline-block !important;
padding: 12px 22px !important;
font-size: 13px !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
}
/* Founder quote */
.rcs-founder {
padding: 40px 16px !important;
text-align: center !important;
background: var(--rcs-cream, #fdf8ef) !important;
}
.rcs-founder blockquote {
font-family: 'Fraunces', serif !important;
font-style: italic !important;
font-size: 1.25rem !important;
line-height: 1.5 !important;
color: #3a2f24 !important;
margin: 0 0 14px !important;
padding: 0 !important;
border: none !important;
}
.rcs-founder cite,
.rcs-founder__attrib {
font-size: 12px !important;
font-style: normal !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: rgba(60,50,40,.65) !important;
}
/* FB Live banner */
.rcs-fb-live {
padding: 28px 16px !important;
text-align: center !important;
}
.rcs-fb-live h2,
.rcs-fb-live__title {
font-family: 'Fraunces', serif !important;
font-style: italic !important;
font-size: 1.3rem !important;
line-height: 1.25 !important;
margin: 0 0 12px !important;
}
.rcs-fb-live .rcs-btn,
.rcs-fb-live a.button {
display: inline-block !important;
padding: 12px 24px !important;
background: var(--rcs-primary, #6B1A2E) !important;
color: #fff !important;
border-radius: 8px !important;
text-decoration: none !important;
font-size: 13px !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
}
}
/* =====================================================
* 9. HEADER — keep tight, no extra space pushing hero down
* ===================================================== */
@media (max-width: 768px) {
.rcs-utility {
padding: 6px 0 !important;
font-size: 10px !important;
}
.rcs-header,
.rcs-site-header {
padding: 8px 12px !important;
min-height: 52px !important;
}
/* Drawer menu — make sure category links are right (uses WP menu, not template hard-coded) */
.rcs-drawer__menu li a {
padding: 12px 16px !important;
font-size: 14px !important;
font-weight: 500 !important;
}
}
/* =====================================================
* 10. KILL stale max_price="..." links on Shop by Price.
* Those tiles point at /?max_price=499 which doesn't filter.
* CSS can't fix the link target but can hide the bad layout
* while we fix the template separately. This rule is a no-op for now.
* ===================================================== */
/* =====================================================
* ROUND 4 — additional issues reported 2026-05-31
* ===================================================== */
/* =====================================================
* 11. SHOP — kill big empty space below "Home · 59 Sarees" hero band
* ===================================================== */
@media (max-width: 768px) {
.rcs-shop-header,
.rcs-shop-header__inner {
padding: 16px 16px 4px !important;
margin: 0 !important;
background: transparent !important;
min-height: 0 !important;
}
.rcs-shop-header h1 {
font-family: 'Fraunces', serif !important;
font-style: italic !important;
font-size: 1.5rem !important;
font-weight: 500 !important;
margin: 0 !important;
line-height: 1.1 !important;
}
.rcs-shop-header + *,
.rcs-shop-header__inner + * {
margin-top: 8px !important;
}
.rcs-shop-toolbar {
margin: 8px 0 12px !important;
}
/* Filter / sort bar — tight & functional */
.rcs-shop-filterbar {
display: flex !important;
gap: 10px !important;
padding: 0 16px !important;
margin: 6px 0 10px !important;
}
.rcs-shop-filterbar button {
flex: 1 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
min-height: 42px !important;
padding: 8px 14px !important;
background: var(--rcs-surface, #fff) !important;
border: 1px solid rgba(184, 149, 89, .25) !important;
border-radius: 999px !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
color: #1b1b1b !important;
cursor: pointer !important;
}
.rcs-shop-filterbar button:active { transform: scale(.97); }
.rcs-shop-filterbar button i { font-size: 14px; color: var(--rcs-primary, #6B1A2E); }
/* No giant gap below */
.woocommerce-products-header,
.woocommerce-result-count,
.rcs-meta {
margin: 0 0 8px !important;
padding: 0 16px !important;
font-size: 11px !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
color: rgba(60,50,40,.65) !important;
}
/* Hide WC default ordering — we have our own SORT button */
.woocommerce-ordering {
display: none !important;
}
}
/* =====================================================
* 12. SHOP — product card with proper ATC + wishlist heart in top-corner
* ===================================================== */
@media (max-width: 768px) {
/* Card */
ul.products li.product,
.rcs-product-grid li {
position: relative !important;
background: var(--rcs-surface, #fff) !important;
border-radius: 10px !important;
overflow: hidden !important;
box-shadow: 0 1px 4px rgba(0,0,0,.04) !important;
}
ul.products li.product > a:first-of-type,
.rcs-product-grid li > a:first-of-type {
display: block !important;
position: relative !important;
}
ul.products li.product img,
.rcs-product-grid li img {
width: 100% !important;
aspect-ratio: 4/5 !important;
object-fit: cover !important;
border-radius: 8px 8px 0 0 !important;
display: block !important;
}
/* Wishlist heart — auto-injected via JS bridge as .rcs-card__wishlist */
.rcs-card__wishlist,
.yith-wcwl-add-to-wishlist a,
.rcs-wishlist-btn {
position: absolute !important;
top: 10px !important;
right: 10px !important;
z-index: 3 !important;
width: 36px !important;
height: 36px !important;
display: grid !important;
place-items: center !important;
background: rgba(255,255,255,.92) !important;
border-radius: 50% !important;
border: none !important;
box-shadow: 0 2px 8px rgba(0,0,0,.12) !important;
cursor: pointer !important;
transition: transform .2s ease, background .2s ease !important;
color: rgba(60,50,40,.65) !important;
font-size: 18px !important;
text-decoration: none !important;
}
.rcs-card__wishlist:active { transform: scale(.92) !important; }
.rcs-card__wishlist.is-active,
.rcs-card__wishlist[data-active="true"] {
background: var(--rcs-primary, #6B1A2E) !important;
color: #fff !important;
}
.rcs-card__wishlist i {
font-size: 18px !important;
}
/* Sale chip — top left */
ul.products li.product .onsale,
.rcs-product-grid li .onsale {
position: absolute !important;
top: 10px !important;
left: 10px !important;
z-index: 3 !important;
margin: 0 !important;
padding: 4px 10px !important;
background: var(--rcs-primary, #6B1A2E) !important;
color: #fff !important;
border-radius: 999px !important;
font-size: 10px !important;
font-weight: 600 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
min-width: auto !important;
min-height: auto !important;
}
/* Title — consistent 2-line height across all cards */
ul.products li.product .woocommerce-loop-product__title,
.rcs-product-grid li h2,
.rcs-product-grid li h3,
.rcs-product-grid li .woocommerce-loop-product__title {
display: -webkit-box !important;
-webkit-line-clamp: 2 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
font-family: 'Fraunces', serif !important;
font-style: italic !important;
font-size: 14px !important;
font-weight: 500 !important;
line-height: 1.25 !important;
min-height: calc(14px * 1.25 * 2) !important;
margin: 10px 12px 2px !important;
padding: 0 !important;
color: #1b1b1b !important;
}
/* Price — single line, fixed height for alignment */
ul.products li.product .price,
.rcs-product-grid li .price {
display: block !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
font-size: 13px !important;
line-height: 1.4 !important;
min-height: 20px !important;
margin: 0 12px 10px !important;
font-weight: 500 !important;
}
ul.products li.product .price del {
opacity: 0.5 !important;
margin-right: 4px !important;
font-size: 12px !important;
text-decoration: line-through !important;
}
ul.products li.product .price ins {
text-decoration: none !important;
font-weight: 600 !important;
color: var(--rcs-primary, #6B1A2E) !important;
}
ul.products li.product .price .woocommerce-Price-amount {
font-weight: 500 !important;
color: #1b1b1b !important;
}
/* Add to cart — small ghost button below price */
ul.products li.product a.button.add_to_cart_button,
ul.products li.product a.added_to_cart {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
margin: 0 12px 12px !important;
padding: 8px 12px !important;
background: #1b1b1b !important;
color: #fff !important;
border: none !important;
border-radius: 8px !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
text-decoration: none !important;
text-align: center !important;
transition: background .2s ease, transform .2s ease !important;
cursor: pointer !important;
min-height: 36px !important;
}
ul.products li.product a.button.add_to_cart_button:active { transform: scale(.97) !important; }
ul.products li.product a.button.add_to_cart_button.loading { opacity: .7; cursor: wait; }
ul.products li.product a.button.add_to_cart_button::before {
content: '+' !important;
font-weight: 400 !important;
font-size: 14px !important;
line-height: 1 !important;
margin-right: 2px !important;
}
ul.products li.product a.added_to_cart {
background: var(--rcs-primary, #6B1A2E) !important;
}
ul.products li.product a.added_to_cart::before { content: '✓ '; }
}
/* =====================================================
* 13. INFINITE SCROLL — hide pagination, let JS load more
* The JS bridge in shop.js will replace native pagination with auto-load.
* ===================================================== */
@media (max-width: 768px) {
.woocommerce-pagination,
nav.woocommerce-pagination {
display: none !important;
}
.rcs-shop-loadmore {
display: flex !important;
justify-content: center !important;
padding: 20px 16px 32px !important;
}
.rcs-shop-loadmore .rcs-loading-dot {
display: inline-block;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--rcs-primary, #6B1A2E);
margin: 0 4px;
animation: rcsLoadDot 1.4s ease-in-out infinite both;
}
.rcs-shop-loadmore .rcs-loading-dot:nth-child(2) { animation-delay: .16s; }
.rcs-shop-loadmore .rcs-loading-dot:nth-child(3) { animation-delay: .32s; }
}
@keyframes rcsLoadDot {
0%, 80%, 100% { transform: scale(0); opacity: .3; }
40% { transform: scale(1); opacity: 1; }
}
/* =====================================================
* 14. HEADER — bigger brand wordmark + RC monogram backdrop
* ===================================================== */
.rcs-header,
.rcs-site-header {
position: relative !important;
}
.rcs-site-header .rcs-logo,
.rcs-header .rcs-logo,
header a.rcs-logo,
header .site-title a,
.rcs-site-header .custom-logo-link {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
gap: 0 !important;
font-family: 'Fraunces', serif !important;
font-style: italic !important;
font-weight: 500 !important;
font-size: 1.45rem !important;
line-height: 1 !important;
color: var(--rcs-primary, #6B1A2E) !important;
letter-spacing: -0.005em !important;
text-decoration: none !important;
padding-left: 36px !important;
}
.rcs-site-header .rcs-logo::before,
.rcs-header .rcs-logo::before,
header a.rcs-logo::before {
content: 'RC' !important;
position: absolute !important;
left: 0 !important;
top: 50% !important;
transform: translateY(-50%) !important;
font-family: 'Fraunces', serif !important;
font-style: italic !important;
font-weight: 600 !important;
font-size: 2.4rem !important;
line-height: 1 !important;
color: rgba(107, 26, 46, .14) !important;
letter-spacing: -0.06em !important;
pointer-events: none !important;
z-index: 0 !important;
}
.rcs-site-header .rcs-logo > *,
header a.rcs-logo > * {
position: relative !important;
z-index: 1 !important;
}
@media (max-width: 430px) {
.rcs-site-header .rcs-logo,
.rcs-header .rcs-logo {
font-size: 1.3rem !important;
padding-left: 32px !important;
}
.rcs-site-header .rcs-logo::before {
font-size: 2.1rem !important;
}
}
/* =====================================================
* 15. ACCOUNT — header card chips + spacing fixes
* ===================================================== */
@media (max-width: 768px) {
/* Header card itself — tighter top, no huge empty space */
.rcs-account__hero,
.rcs-account__header-card {
margin: 12px 16px !important;
padding: 18px 18px 20px !important;
border-radius: 16px !important;
background: var(--rcs-primary, #6B1A2E) !important;
color: #fff !important;
position: relative !important;
overflow: hidden !important;
}
/* Decorative gold flourish — move from left to bottom-right, smaller, subtler */
.rcs-account__hero::before,
.rcs-account__hero::after,
.rcs-account__header-card::before,
.rcs-account__header-card::after {
display: none !important;
}
/* 3-stat row inside hero */
.rcs-account__stats {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 0 !important;
margin-top: 14px !important;
padding-top: 14px !important;
border-top: 1px solid rgba(255,255,255,.18) !important;
}
.rcs-account__stat {
text-align: center !important;
padding: 0 8px !important;
border-right: 1px solid rgba(255,255,255,.18) !important;
}
.rcs-account__stat:last-child { border-right: none !important; }
.rcs-account__stat-num {
font-family: 'Fraunces', serif !important;
font-style: italic !important;
font-size: 1.5rem !important;
font-weight: 500 !important;
color: #fff !important;
line-height: 1.1 !important;
}
.rcs-account__stat-label {
font-size: 9px !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
color: rgba(255,255,255,.75) !important;
margin-top: 4px !important;
display: block !important;
}
/* Tab strip — CENTER tabs, no crop, gold fade on right edge */
.rcs-account__tabs,
.woocommerce-MyAccount-navigation {
margin: 14px 0 4px !important;
padding: 0 16px !important;
position: relative !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
}
.rcs-account__tabs::-webkit-scrollbar,
.woocommerce-MyAccount-navigation::-webkit-scrollbar { display: none !important; }
.rcs-account__tabs ul,
.woocommerce-MyAccount-navigation ul {
display: flex !important;
gap: 8px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
justify-content: center !important;
min-width: max-content !important;
}
.rcs-account__tabs li,
.woocommerce-MyAccount-navigation li {
flex: 0 0 auto !important;
list-style: none !important;
}
.rcs-account__tabs li a,
.woocommerce-MyAccount-navigation li a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 36px !important;
padding: 9px 14px !important;
background: var(--rcs-surface, #fff) !important;
border: 1px solid rgba(184, 149, 89, .25) !important;
border-radius: 999px !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
color: #3a2f24 !important;
text-decoration: none !important;
white-space: nowrap !important;
text-align: center !important;
line-height: 1 !important;
}
.rcs-account__tabs li.is-active a,
.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li.woocommerce-MyAccount-navigation-link--dashboard.is-active a {
background: var(--rcs-primary, #6B1A2E) !important;
color: #fff !important;
border-color: var(--rcs-primary, #6B1A2E) !important;
}
/* Right-edge gold fade hint */
.rcs-account__tabs::after,
.woocommerce-MyAccount-navigation::after {
content: '' !important;
position: absolute !important;
top: 0 !important;
right: 0 !important;
height: 100% !important;
width: 30px !important;
background: linear-gradient(90deg, transparent, var(--rcs-canvas, #faf3e7)) !important;
pointer-events: none !important;
}
/* "Your boutique account" intro — tighter */
.rcs-account__intro,
.rcs-account__welcome {
margin: 12px 16px 6px !important;
padding: 0 !important;
}
.rcs-account__intro h2,
.rcs-account__welcome h2 {
font-family: 'Fraunces', serif !important;
font-style: italic !important;
font-size: 1.25rem !important;
font-weight: 500 !important;
margin: 0 0 4px !important;
}
.rcs-account__intro p,
.rcs-account__welcome p {
font-size: 13px !important;
line-height: 1.55 !important;
color: rgba(60,50,40,.75) !important;
margin: 0 0 12px !important;
}
/* Container for the quick-action cards — tight bottom, no huge empty space */
.rcs-account__actions {
margin: 4px 16px 24px !important;
}
/* Page itself — no extra body padding that creates huge bottom void */
body.woocommerce-account .rcs-main,
body.woocommerce-account main {
padding-bottom: 16px !important;
}
/* Kill the small golden flourish placed weirdly on the left */
.rcs-account__flourish,
.rcs-account-divider,
.rcs-section__divider {
display: none !important;
}
}
/* =====================================================
* 16. SHOP DRAWER (filter / sort) + TOAST
* ===================================================== */
.rcs-shop-drawer {
position: fixed !important;
inset: 0 !important;
background: rgba(20, 16, 12, .55) !important;
z-index: 9998 !important;
opacity: 0;
transition: opacity .28s ease;
display: flex;
align-items: flex-end;
}
.rcs-shop-drawer.is-open { opacity: 1 !important; }
.rcs-shop-drawer__sheet {
width: 100% !important;
max-height: 80vh !important;
overflow-y: auto !important;
background: var(--rcs-canvas, #faf3e7) !important;
border-radius: 18px 18px 0 0 !important;
padding: 18px 18px 32px !important;
position: relative !important;
transform: translateY(100%);
transition: transform .32s cubic-bezier(.2,.7,.3,1);
box-shadow: 0 -8px 28px rgba(0,0,0,.18) !important;
}
.rcs-shop-drawer.is-open .rcs-shop-drawer__sheet {
transform: translateY(0) !important;
}
.rcs-shop-drawer__close {
position: absolute !important;
top: 10px !important;
right: 14px !important;
width: 36px !important;
height: 36px !important;
background: rgba(0,0,0,.05) !important;
border: none !important;
border-radius: 50% !important;
font-size: 22px !important;
line-height: 1 !important;
color: #1b1b1b !important;
cursor: pointer !important;
}
.rcs-shop-drawer h3 {
font-family: 'Fraunces', serif !important;
font-style: italic !important;
font-size: 1.3rem !important;
margin: 6px 0 14px !important;
padding-right: 40px !important;
}
.rcs-shop-drawer ul {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.rcs-shop-drawer li {
border-bottom: 1px solid rgba(184, 149, 89, .15) !important;
}
.rcs-shop-drawer li:last-child { border-bottom: none !important; }
.rcs-shop-drawer li a {
display: block !important;
padding: 14px 4px !important;
color: #1b1b1b !important;
text-decoration: none !important;
font-size: 15px !important;
font-weight: 500 !important;
}
.rcs-shop-drawer li a.is-active {
color: var(--rcs-primary, #6B1A2E) !important;
font-weight: 600 !important;
}
/* Toast (already styled inline by JS but keep a fallback) */
.rcs-toast { font-family: 'Inter', sans-serif !important; }
/* =====================================================
* 17. ROUND 6 — Shop card height parity + bottom-nav Shop fallback
* Bug: pincode-check ribbon was leaking into the first shop card,
* making row heights uneven. We also defensively kill the ribbon
* anywhere inside the shop grid.
* ===================================================== */
@media (max-width: 768px) {
/* Belt-and-suspenders: hide pincode ribbon on shop / archive */
body.woocommerce-shop .rcs-pincode-ribbon,
body.archive .rcs-pincode-ribbon,
body.tax-product_cat .rcs-pincode-ribbon,
body.tax-product_tag .rcs-pincode-ribbon,
ul.products .rcs-pincode-ribbon,
.rcs-product-grid .rcs-pincode-ribbon {
display: none !important;
}
/* Equal-height shop cards: grid stretches items naturally,
but enforce same min-height for inner blocks */
ul.products li.product,
.rcs-product-grid li {
display: flex !important;
flex-direction: column !important;
min-height: 100% !important;
}
ul.products li.product .rcs-product-card__link,
.rcs-product-grid li .rcs-product-card__link,
ul.products li.product > a:first-of-type {
display: flex !important;
flex-direction: column !important;
flex: 1 1 auto !important;
}
ul.products li.product .rcs-product-card__media,
.rcs-product-grid li .rcs-product-card__media {
flex: 0 0 auto !important;
}
ul.products li.product .rcs-product-card__info,
.rcs-product-grid li .rcs-product-card__info {
flex: 1 1 auto !important;
display: flex !important;
flex-direction: column !important;
}
ul.products li.product .add_to_cart_button,
.rcs-product-grid li .add_to_cart_button {
margin-top: auto !important;
}
}
/* =====================================================
* 18. ROUND 7 — Phone screenshot audit fixes
* ===================================================== */
@media (max-width: 768px) {
/* --- Shop header — compress dead space --- */
body.woocommerce-shop .rcs-shop-header,
body.archive .rcs-shop-header,
body.tax-product_cat .rcs-shop-header {
padding: 10px 16px 4px !important;
}
body.woocommerce-shop .rcs-crumbs,
body.archive .rcs-crumbs {
margin: 0 0 4px !important;
padding: 0 16px !important;
font-size: 11px !important;
}
body.woocommerce-shop .rcs-shop-header h1,
body.archive .rcs-shop-header h1 {
display: none !important; /* meta count is enough */
}
body.woocommerce-shop .rcs-meta {
margin: 4px 0 6px !important;
padding: 0 16px !important;
}
/* --- Homepage — tighten section padding everywhere --- */
.rcs-hero + .rcs-trust-strip { margin-top: 0 !important; }
.rcs-trust-strip { padding: 10px 0 !important; border-bottom: 1px solid rgba(184,149,89,.15) !important; }
.rcs-trust-strip + section { margin-top: 0 !important; padding-top: 24px !important; }
.rcs-price-tiers { padding: 20px 0 12px !important; }
.rcs-new-arrivals,
section[class*="new-arrivals"] { padding: 18px 0 24px !important; }
.rcs-edits-grid { padding: 24px 0 !important; }
.rcs-loom-diary,
.rcs-bridal { padding: 28px 0 !important; }
.rcs-founder { padding: 32px 16px !important; }
.rcs-fb-live { padding: 24px 16px !important; }
/* Kill big flourish ornaments that take vertical space */
.rcs-section__divider,
.rcs-flourish,
.rcs-ornament {
margin: 8px auto !important;
max-height: 14px !important;
}
/* --- WhatsApp FAB — sit above bottom-nav, not over hero --- */
.rcs-fab--whatsapp,
a.rcs-fab.rcs-fab--whatsapp {
bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
right: 14px !important;
width: 48px !important;
height: 48px !important;
}
/* --- Loom-diary + Bridal — fall back to local image if Stitch CDN URL broken --- */
.rcs-loom-diary__media img,
.rcs-bridal__media img {
min-height: 240px !important;
background: linear-gradient(135deg, #f8efdc, #fdf8ef) !important;
background-size: cover !important;
}
/* Stronger scrim so text on bridal stays readable */
.rcs-bridal__content {
padding: 18px 16px !important;
background: linear-gradient(180deg, transparent, rgba(20,16,12,.55) 40%, rgba(20,16,12,.78)) !important;
}
.rcs-bridal__content p,
.rcs-bridal__content .rcs-eyebrow {
color: rgba(255,255,255,.95) !important;
text-shadow: 0 1px 4px rgba(0,0,0,.4) !important;
}
.rcs-bridal__content h2 {
color: #fff !important;
text-shadow: 0 2px 8px rgba(0,0,0,.5) !important;
}
/* --- Account — kill diamond flourishes between quick-action cards --- */
.rcs-account__action + .rcs-account__action::before,
.rcs-account__actions .rcs-flourish,
.rcs-account__actions .rcs-divider,
.rcs-account__divider {
display: none !important;
}
/* Unify all action cards to white background, not the maroon "is-primary" */
.rcs-account__action.is-primary {
background: var(--rcs-surface, #fff) !important;
color: var(--rcs-primary, #6B1A2E) !important;
border-color: rgba(184,149,89,.3) !important;
border-left: 3px solid var(--rcs-primary, #6B1A2E) !important;
}
/* Reduce bottom void: tight padding under last action */
body.woocommerce-account .rcs-account__actions {
margin-bottom: 12px !important;
}
body.woocommerce-account main,
body.woocommerce-account .rcs-main {
padding-bottom: 4px !important;
}
body.woocommerce-account .woocommerce-MyAccount-content {
padding-bottom: 8px !important;
}
}
/* =====================================================
* 19. SEARCH RESULTS — empty-query state + dedupe handling
* ===================================================== */
.rcs-search-results li.rcs-card .rcs-eyebrow {
text-transform: uppercase;
font-size: 10px;
letter-spacing: 0.08em;
color: var(--rcs-primary, #6B1A2E);
}
/* When user opens search with empty query, hide the auto-pulled list */
body.search-no-results .rcs-search-empty,
body.search.search-results-empty .rcs-search-empty {
display: block !important;
}
/* =====================================================
* 20. ROUND 7B — Heart icon SVG + page transitions + soft fades
* Polish: replace janky Phosphor heart with a hand-drawn boutique SVG,
* add view-transition fade + slide-up on every page nav, soft staggered
* reveal on hero/sections.
* ===================================================== */
/* ---- Refined wishlist heart (overrides ph icons) ---- */
.rcs-card__wishlist,
.rcs-product-card__wishlist {
width: 38px !important;
height: 38px !important;
padding: 0 !important;
background: rgba(255,255,255,.95) !important;
backdrop-filter: blur(8px) saturate(1.2) !important;
border-radius: 50% !important;
box-shadow: 0 4px 12px rgba(0,0,0,.10), 0 0 0 1px rgba(184,149,89,.18) !important;
transition: transform .25s cubic-bezier(.2,.7,.3,1.3), box-shadow .25s ease, background .25s ease !important;
cursor: pointer !important;
border: none !important;
display: grid !important;
place-items: center !important;
}
.rcs-card__wishlist i,
.rcs-product-card__wishlist i {
display: none !important; /* hide Phosphor icon, use SVG instead */
}
.rcs-card__wishlist::before,
.rcs-product-card__wishlist::before {
content: '' !important;
display: block !important;
width: 20px !important;
height: 20px !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-size: contain !important;
background-repeat: no-repeat !important;
background-position: center !important;
transition: transform .3s cubic-bezier(.2,.7,.3,1.4) !important;
}
.rcs-card__wishlist:active::before,
.rcs-product-card__wishlist:active::before {
transform: scale(.85) !important;
}
.rcs-card__wishlist:hover {
transform: scale(1.06) !important;
box-shadow: 0 6px 18px rgba(0,0,0,.14), 0 0 0 1px rgba(184,149,89,.35) !important;
}
.rcs-card__wishlist.is-active,
.rcs-card__wishlist[aria-pressed="true"],
.rcs-product-card__wishlist.is-active {
background: var(--rcs-primary, #6B1A2E) !important;
box-shadow: 0 6px 18px rgba(107,26,46,.32) !important;
}
.rcs-card__wishlist.is-active::before,
.rcs-product-card__wishlist.is-active::before {
background-image: url("data:image/svg+xml;utf8,") !important;
animation: rcsHeartPop .42s cubic-bezier(.2,.7,.3,1.6) !important;
}
@keyframes rcsHeartPop {
0% { transform: scale(.6); }
50% { transform: scale(1.25); }
100% { transform: scale(1); }
}
/* ---- Page transitions — soft fade + slide up on navigate ---- */
@supports (view-transition-name: root) {
::view-transition-old(root) {
animation: rcsPageFadeOut .22s cubic-bezier(.4,.0,.2,1) both;
}
::view-transition-new(root) {
animation: rcsPageFadeIn .32s cubic-bezier(.2,.7,.3,1) .04s both;
}
}
@keyframes rcsPageFadeOut {
to { opacity: 0; transform: translateY(-8px); }
}
@keyframes rcsPageFadeIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
/* ---- First-paint soft reveal — every section fades up gracefully ---- */
@media (prefers-reduced-motion: no-preference) {
main > section,
.rcs-section,
.rcs-hero,
.rcs-trust-strip,
.rcs-price-tiers,
.rcs-edits-grid,
.rcs-new-arrivals,
.rcs-loom-diary,
.rcs-bridal,
.rcs-founder,
.rcs-fb-live {
animation: rcsSectionReveal .55s cubic-bezier(.2,.7,.3,1) both;
animation-delay: calc(var(--rcs-i, 0) * 0.06s);
}
}
@keyframes rcsSectionReveal {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
/* ---- Tap feedback — buttons & links ---- */
.rcs-btn,
button.rcs-btn,
.add_to_cart_button,
.rcs-account__action,
.rcs-bottom-nav a,
.rcs-chip,
.rcs-price-tier {
transition: transform .15s cubic-bezier(.2,.7,.3,1.2), box-shadow .2s ease, background .2s ease !important;
}
.rcs-btn:active,
button.rcs-btn:active,
.add_to_cart_button:active,
.rcs-account__action:active,
.rcs-bottom-nav a:active,
.rcs-chip:active,
.rcs-price-tier:active {
transform: scale(.96) !important;
}
/* ---- Smooth scroll for in-page anchors ---- */
html { scroll-behavior: smooth; }
/* ---- Soft loading shimmer for images while they fetch ---- */
img:not([src]):not([srcset]),
img[loading="lazy"]:not(.is-loaded) {
background: linear-gradient(90deg, #f4ebd9 0%, #faf3e7 50%, #f4ebd9 100%);
background-size: 200% 100%;
animation: rcsImgShimmer 1.4s ease-in-out infinite;
}
@keyframes rcsImgShimmer {
0% { background-position: -100% 0; }
100% { background-position: 100% 0; }
}
/* ---- Bottom-nav icons subtle bounce on active ---- */
.rcs-bottom-nav a.is-active {
color: var(--rcs-primary, #6B1A2E) !important;
}
.rcs-bottom-nav a.is-active i,
.rcs-bottom-nav a.is-active .rcs-ico {
animation: rcsNavBounce .42s cubic-bezier(.2,.7,.3,1.4) !important;
}
@keyframes rcsNavBounce {
0% { transform: translateY(0) scale(1); }
40% { transform: translateY(-3px) scale(1.08); }
100% { transform: translateY(0) scale(1); }
}
/* =====================================================
* 18. ROUND 8 — Video audit fixes (2026-05-31)
* Bugs caught in WhatsApp screen recording:
* - giant maroon toast covering 60% of screen
* - duplicate trust strip + cropping
* - excessive hero-to-price spacing
* - "Shop the Edit" button jitter on tap
* - bag counter not bumping
* ===================================================== */
/* 18a. TOAST — force compact pill regardless of three earlier files.
* components.css uses left/right edges; micro-polish uses left:50%;
* the inline JS writes both. Lock to a small bottom-centered pill. */
.rcs-toast,
.rcs-toast.is-visible,
.rcs-toast--show {
position: fixed !important;
left: 50% !important;
right: auto !important;
top: auto !important;
bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
transform: translateX(-50%) translateY(0) !important;
width: auto !important;
max-width: min(86vw, 320px) !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
max-height: 44px !important;
padding: 10px 18px !important;
border-radius: 999px !important;
background: #1B1B1B !important;
color: #fff !important;
font-size: 13px !important;
line-height: 1.2 !important;
letter-spacing: .04em !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
box-shadow: 0 10px 24px rgba(27,27,27,.28) !important;
z-index: 99999 !important;
pointer-events: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
}
.rcs-toast::before { display: none !important; }
/* 18b. Hide WC's default added_to_cart message — we have our own toast */
.woocommerce-message,
.woocommerce-notices-wrapper:has(.woocommerce-message),
body.archive .woocommerce-message,
body.woocommerce-shop .woocommerce-message,
body.tax-product_cat .woocommerce-message {
display: none !important;
}
/* 18c. Duplicate trust strip — kill the standalone bottom one,
* the top sticky promo bar already covers these benefits */
@media (max-width: 768px) {
.rcs-trust-strip {
display: none !important;
}
/* tighten hero → next section gap now that strip is gone */
.rcs-hero { margin-bottom: 0 !important; }
.rcs-hero + section,
.rcs-hero + .rcs-trust-strip + section,
section.rcs-price-tiers,
section.rcs-shop-by-price {
padding-top: 28px !important;
margin-top: 0 !important;
}
}
/* 18d. Top promo strip — stop cropping; let text scroll fully */
@media (max-width: 768px) {
.rcs-promo-bar,
.rcs-top-promo,
.rcs-marquee {
overflow: hidden !important;
}
.rcs-promo-bar__track,
.rcs-top-promo__track,
.rcs-marquee__track {
animation-duration: 32s !important; /* slower so each item fully visible */
white-space: nowrap !important;
}
}
/* 18e. "Shop the Festive Edit" CTA — kill the stuttering composite animation.
* Replace with single GPU-only transform. */
.rcs-hero .rcs-btn,
.rcs-hero__cta .rcs-btn--lg {
will-change: transform !important;
transform: translateZ(0) !important;
transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease !important;
animation: none !important;
}
.rcs-hero .rcs-btn:active,
.rcs-hero__cta .rcs-btn--lg:active {
transform: translateZ(0) scale(.97) !important;
}
.rcs-hero .rcs-btn::before,
.rcs-hero .rcs-btn::after,
.rcs-hero__cta .rcs-btn--lg::before,
.rcs-hero__cta .rcs-btn--lg::after {
display: none !important; /* remove ripple/glow pseudo-elements */
}
/* 18f. Bag count badge — make sure it's visible the moment AJAX bumps it.
* Previously may have been display:none with no count. */
.rcs-bag-count,
.rcs-cart-count,
.rcs-bottom-nav a[aria-label="Bag"] .rcs-cart-count,
.rcs-header__cart .rcs-cart-count {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 18px !important;
height: 18px !important;
padding: 0 5px !important;
background: var(--rcs-primary, #6B1A2E) !important;
color: #fff !important;
font-size: 11px !important;
font-weight: 700 !important;
border-radius: 999px !important;
position: absolute !important;
top: 0 !important;
right: -6px !important;
line-height: 1 !important;
transition: transform .22s cubic-bezier(.2,.7,.3,1.4) !important;
}
.rcs-bag-count.is-bumping,
.rcs-cart-count.is-bumping {
transform: scale(1.3) !important;
}
.rcs-bag-count[data-count="0"],
.rcs-cart-count[data-count="0"] {
display: none !important;
}
/* 18g. Bag page "Unable to load bag" — when cart is empty, show our friendly empty state, not the error. */
.rcs-bag-error,
.rcs-cart-error,
.cart-empty.woocommerce-info {
background: transparent !important;
border: none !important;
padding: 60px 24px !important;
text-align: center !important;
font-family: 'Fraunces', serif !important;
font-style: italic !important;
font-size: 17px !important;
color: rgba(60,50,40,.6) !important;
}
/* End Round 8 */
/* =====================================================================
* ROUND 9 — fluid liquid design + 14-fix sweep
* Date: 2026-05-31
* Append-only, !important to defeat prior cascade. Never reorder R1-R8.
* ===================================================================== */
/* SECTION 1. ROUND 9 — FLUID DESIGN TOKENS */
:root {
--rcs-fl-xs: clamp(0.69rem, 0.62rem + 0.30vw, 0.78rem) !important;
--rcs-fl-sm: clamp(0.78rem, 0.71rem + 0.32vw, 0.88rem) !important;
--rcs-fl-base: clamp(0.94rem, 0.86rem + 0.38vw, 1.06rem) !important;
--rcs-fl-md: clamp(1.00rem, 0.91rem + 0.42vw, 1.13rem) !important;
--rcs-fl-lg: clamp(1.13rem, 1.00rem + 0.55vw, 1.31rem) !important;
--rcs-fl-xl: clamp(1.31rem, 1.13rem + 0.85vw, 1.56rem) !important;
--rcs-fl-2xl: clamp(1.50rem, 1.25rem + 1.20vw, 1.88rem) !important;
--rcs-fl-3xl: clamp(1.75rem, 1.40rem + 1.65vw, 2.31rem) !important;
--rcs-fl-4xl: clamp(2.13rem, 1.65rem + 2.20vw, 2.81rem) !important;
--rcs-fl-hero: clamp(2.50rem, 1.85rem + 3.10vw, 3.75rem) !important;
--rcs-fl-1: clamp(4px, 0.6vw, 6px) !important;
--rcs-fl-2: clamp(8px, 1.2vw, 12px) !important;
--rcs-fl-3: clamp(12px, 2.0vw, 18px) !important;
--rcs-fl-4: clamp(16px, 3.0vw, 24px) !important;
--rcs-fl-5: clamp(20px, 4.0vw, 32px) !important;
--rcs-fl-6: clamp(24px, 5.0vw, 44px) !important;
--rcs-fl-7: clamp(32px, 6.5vw, 60px) !important;
--rcs-fl-8: clamp(40px, 8.0vw, 80px) !important;
--rcs-r9-gutter: clamp(16px, 4.2vw, 28px) !important;
--rcs-r9-section-y: clamp(40px, 8vw, 88px) !important;
--rcs-r9-section-gap: clamp(28px, 5.5vw, 56px) !important;
--rcs-r9-silk: cubic-bezier(.22, 1, .36, 1) !important;
--rcs-r9-drape: cubic-bezier(.16, 1, .3, 1) !important;
--rcs-r9-spring: cubic-bezier(.34, 1.56, .64, 1) !important;
}
/* SECTION 2. ROUND 9 — SAFE-AREA INSETS */
.rcs-utility, .rcs-promo-bar, .rcs-top-promo, .rcs-marquee {
padding-top: max(6px, env(safe-area-inset-top)) !important;
}
.rcs-bottom-nav {
padding-bottom: max(6px, env(safe-area-inset-bottom)) !important;
box-sizing: content-box !important;
}
.rcs-whatsapp-fab, .rcs-fab, [class*="whatsapp-fab"] {
bottom: calc(76px + env(safe-area-inset-bottom)) !important;
right: calc(14px + env(safe-area-inset-right)) !important;
}
/* SECTION 3. ROUND 9 — HOMEPAGE GUTTER UNIFICATION */
.home .rcs-container,
.home main section > .rcs-container,
.home .rcs-section > .rcs-container,
.home .rcs-edits > .rcs-container,
.home .rcs-loom > .rcs-container,
.home .rcs-price-tiers > .rcs-container,
.home .rcs-bridal > .rcs-container,
.home .rcs-fb-live > .rcs-container,
.home .rcs-founder > .rcs-container,
.home .rcs-hero__content {
padding-inline: var(--rcs-r9-gutter) !important;
margin-inline: auto !important;
box-sizing: border-box !important;
max-width: 100vw !important;
}
.home .rcs-edits-grid { padding-inline: 0 !important; gap: var(--rcs-fl-2) !important; }
.home .rcs-section, .home .rcs-edits, .home .rcs-loom, .home .rcs-price-tiers,
.home .rcs-bridal, .home .rcs-fb-live, .home .rcs-founder,
.home section.rcs-new-arrivals {
padding-block: var(--rcs-r9-section-y) !important;
margin-block: 0 !important;
}
.home .rcs-edits + .rcs-loom, .home .rcs-loom + section, .home section + section {
margin-top: 0 !important;
}
.home .rcs-edits { padding-bottom: clamp(24px, 5vw, 40px) !important; }
.home .rcs-loom { padding-top: clamp(24px, 5vw, 40px) !important; }
/* SECTION 4. ROUND 9 — SHOP HEADER CLEANUP */
body.woocommerce-shop .rcs-crumbs,
body.post-type-archive-product .rcs-crumbs { display: none !important; }
.rcs-shop-header { padding-top: 4px !important; margin-bottom: 8px !important; }
.rcs-shop-header h1 {
margin: 0 0 4px !important;
font-size: var(--rcs-fl-base) !important;
text-transform: uppercase !important;
letter-spacing: 0.14em !important;
color: var(--rcs-text-subtle) !important;
font-weight: 500 !important;
font-family: var(--rcs-font-ui) !important;
}
.rcs-shop-header .rcs-meta {
font-family: var(--rcs-font-ui) !important;
font-size: var(--rcs-fl-xs) !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: var(--rcs-text-muted) !important;
margin: 0 !important;
}
.rcs-card__wishlist,
.rcs-product-card .rcs-card__wishlist,
.rcs-product-card button[class*="wishlist"] {
width: 36px !important; height: 36px !important;
aspect-ratio: 1 / 1 !important;
padding: 0 !important;
border-radius: 50% !important;
display: grid !important; place-items: center !important;
background: rgba(255, 255, 255, 0.94) !important;
border: 1px solid rgba(28, 26, 25, 0.06) !important;
box-shadow: 0 2px 6px rgba(28, 26, 25, 0.08) !important;
position: absolute !important; top: 10px !important; right: 10px !important;
z-index: 3 !important;
transition: transform var(--rcs-dur-3) var(--rcs-r9-spring),
background var(--rcs-dur-2) ease !important;
}
.rcs-card__wishlist i { font-size: 16px !important; line-height: 1 !important; color: var(--rcs-primary) !important; }
.rcs-card__wishlist.is-active { background: var(--rcs-primary) !important; }
.rcs-card__wishlist.is-active i { color: #fff !important; }
.rcs-card__wishlist:active { transform: scale(0.9) !important; }
.rcs-card__wishlist.rcs-r9-pop { animation: rcs-r9-heart-pop 460ms var(--rcs-r9-spring) !important; }
@keyframes rcs-r9-heart-pop {
0% { transform: scale(1); } 40% { transform: scale(1.28); }
70% { transform: scale(0.94); } 100% { transform: scale(1); }
}
/* SECTION 5. ROUND 9 — REMOVE PDP STICKY ATC */
.rcs-pdp__sticky, [data-rcs-pdp-sticky], .rcs-pdp__sticky-bar, .rcs-sticky-atc {
display: none !important; visibility: hidden !important;
height: 0 !important; overflow: hidden !important; position: static !important;
}
.rcs-pdp__actions {
display: flex !important; gap: 10px !important;
align-items: stretch !important; margin: 18px 0 14px !important;
}
.rcs-pdp__actions .rcs-qty {
flex: 0 0 96px !important;
display: flex !important; align-items: center !important;
justify-content: space-between !important;
border-radius: 999px !important;
border: 1px solid var(--rcs-outline-strong) !important;
background: #fff !important; height: 50px !important;
}
.rcs-pdp__actions .rcs-pdp__atc {
flex: 1 1 auto !important; height: 50px !important;
border-radius: 999px !important;
background: var(--rcs-primary) !important; color: #fff !important;
font-weight: 600 !important; letter-spacing: 0.06em !important;
text-transform: uppercase !important; font-size: var(--rcs-fl-sm) !important;
display: inline-flex !important; align-items: center !important;
justify-content: center !important; gap: 8px !important;
}
.rcs-pdp__ask + .rcs-pdp__ask,
.rcs-pdp .rcs-pdp__actions ~ .add_to_cart_button { display: none !important; }
body.single-product .rcs-pdp {
padding-bottom: calc(var(--rcs-bottom-nav-h, 60px) + env(safe-area-inset-bottom) + 16px) !important;
}
/* SECTION 6. ROUND 9 — INK-SPREAD PRESS EFFECT */
.rcs-btn, .rcs-pdp__atc, button[type="submit"], .add_to_cart_button,
.rcs-chip, .rcs-shop-filterbar button, .rcs-bottom-nav a,
.rcs-header__cart, .rcs-header__search, .rcs-header__menu,
.rcs-card__wishlist, .rcs-edits-tile, .rcs-price-tier,
.rcs-bridal__card, .rcs-fb-live__cta, [data-r9-press] {
position: relative !important; overflow: hidden !important;
-webkit-tap-highlight-color: transparent !important;
transition: transform var(--rcs-dur-3) var(--rcs-r9-silk),
filter var(--rcs-dur-3) var(--rcs-r9-silk) !important;
will-change: transform !important;
}
.rcs-btn:active, .rcs-pdp__atc:active, button[type="submit"]:active,
.add_to_cart_button:active, .rcs-chip:active, .rcs-shop-filterbar button:active,
.rcs-bottom-nav a:active, .rcs-header__cart:active, .rcs-header__search:active,
.rcs-header__menu:active, .rcs-card__wishlist:active,
.rcs-edits-tile:active, .rcs-price-tier:active, .rcs-bridal__card:active,
.rcs-fb-live__cta:active, [data-r9-press]:active {
transform: scale(0.965) translateZ(0) !important;
filter: brightness(0.96) !important;
}
.rcs-btn::after, .rcs-pdp__atc::after, .add_to_cart_button::after,
.rcs-chip::after, .rcs-bottom-nav a::after,
.rcs-header__cart::after, .rcs-header__search::after,
.rcs-card__wishlist::after, [data-r9-press]::after {
content: "" !important;
position: absolute !important;
left: var(--rcs-r9-ink-x, 50%) !important;
top: var(--rcs-r9-ink-y, 50%) !important;
width: 8px !important; height: 8px !important;
border-radius: 50% !important;
background: rgba(255, 255, 255, 0.45) !important;
transform: translate(-50%, -50%) scale(0) !important;
opacity: 0 !important; pointer-events: none !important;
}
.rcs-btn.is-r9-ink::after, .rcs-pdp__atc.is-r9-ink::after,
.add_to_cart_button.is-r9-ink::after, .rcs-chip.is-r9-ink::after,
.rcs-bottom-nav a.is-r9-ink::after, .rcs-header__cart.is-r9-ink::after,
.rcs-header__search.is-r9-ink::after, .rcs-card__wishlist.is-r9-ink::after,
[data-r9-press].is-r9-ink::after {
animation: rcs-r9-ink 520ms var(--rcs-r9-drape) !important;
}
@keyframes rcs-r9-ink {
0% { transform: translate(-50%, -50%) scale(0); opacity: 0.55; }
60% { opacity: 0.35; }
100% { transform: translate(-50%, -50%) scale(50); opacity: 0; }
}
.rcs-chip::after, .rcs-shop-filterbar button::after,
.rcs-header__cart::after, .rcs-header__search::after,
.rcs-header__menu::after, .rcs-bottom-nav a::after {
background: rgba(107, 26, 46, 0.18) !important;
}
/* SECTION 7. ROUND 9 — HEADER ICON FEEDBACK */
.rcs-header__search, .rcs-header__cart, .rcs-header__menu {
display: inline-grid !important; place-items: center !important;
width: 44px !important; height: 44px !important;
border-radius: 50% !important;
background: transparent !important; color: var(--rcs-text) !important;
transition: background var(--rcs-dur-2) var(--rcs-r9-silk),
transform var(--rcs-dur-2) var(--rcs-r9-silk) !important;
}
.rcs-header__search:hover, .rcs-header__cart:hover, .rcs-header__menu:hover {
background: rgba(107, 26, 46, 0.06) !important;
}
.rcs-header__search:active, .rcs-header__cart:active, .rcs-header__menu:active {
background: rgba(107, 26, 46, 0.12) !important;
transform: scale(0.92) !important;
}
.rcs-header__cart { position: relative !important; }
.rcs-header__cart .rcs-badge, .rcs-header__cart .rcs-badge-cart {
position: absolute !important; top: 4px !important; right: 4px !important;
min-width: 18px !important; height: 18px !important; padding: 0 5px !important;
background: var(--rcs-primary) !important; color: #fff !important;
font-size: 10px !important; font-weight: 700 !important; line-height: 18px !important;
border-radius: 999px !important; text-align: center !important;
display: inline-flex !important; align-items: center !important; justify-content: center !important;
border: 2px solid var(--rcs-canvas) !important;
transition: transform var(--rcs-dur-3) var(--rcs-r9-spring) !important;
}
.rcs-header__cart .is-bumping, .rcs-header__cart .rcs-badge.is-bumping { transform: scale(1.32) !important; }
/* SECTION 8. ROUND 9 — BOTTOM-NAV liquid pill + bag badge */
.rcs-bottom-nav {
position: fixed !important;
left: 0 !important; right: 0 !important; bottom: 0 !important;
z-index: var(--rcs-z-bottom-nav, 100) !important;
background: rgba(253, 249, 243, 0.92) !important;
backdrop-filter: saturate(1.3) blur(16px) !important;
-webkit-backdrop-filter: saturate(1.3) blur(16px) !important;
border-top: 1px solid var(--rcs-outline) !important;
display: grid !important;
grid-template-columns: repeat(5, 1fr) !important;
min-height: var(--rcs-bottom-nav-h, 60px) !important;
padding-bottom: max(6px, env(safe-area-inset-bottom)) !important;
}
.rcs-bottom-nav a {
position: relative !important;
display: flex !important; flex-direction: column !important;
align-items: center !important; justify-content: center !important;
gap: 2px !important; text-decoration: none !important;
color: var(--rcs-text-muted) !important;
padding: 6px 4px !important;
transition: color var(--rcs-dur-2) ease !important;
}
.rcs-bottom-nav a i { font-size: 22px !important; line-height: 1 !important; }
.rcs-bottom-nav a span { font-size: 10px !important; font-weight: 600 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; }
.rcs-bottom-nav a.is-active { color: var(--rcs-primary) !important; }
.rcs-bottom-nav a.is-active::before {
content: "" !important;
position: absolute !important; top: 0 !important;
left: 50% !important; transform: translateX(-50%) !important;
width: 28px !important; height: 2px !important;
background: var(--rcs-primary) !important; border-radius: 2px !important;
animation: rcs-r9-pill-in 320ms var(--rcs-r9-spring) !important;
}
@keyframes rcs-r9-pill-in { from { width: 0; opacity: 0; } to { width: 28px; opacity: 1; } }
.rcs-bottom-nav a[aria-label="Bag"] { position: relative !important; }
.rcs-bottom-nav a[aria-label="Bag"] .rcs-badge,
.rcs-bottom-nav a[aria-label="Bag"] .rcs-badge-cart,
.rcs-bottom-nav a[aria-label="Bag"] .rcs-cart-count,
.rcs-bottom-nav a[aria-label="Bag"] .rcs-bag-count {
position: absolute !important; top: 4px !important;
right: calc(50% - 22px) !important;
min-width: 18px !important; height: 18px !important; padding: 0 5px !important;
background: var(--rcs-primary) !important; color: #fff !important;
font-size: 10px !important; font-weight: 700 !important; line-height: 18px !important;
border-radius: 999px !important;
display: inline-flex !important; align-items: center !important; justify-content: center !important;
border: 2px solid var(--rcs-canvas) !important;
transition: transform var(--rcs-dur-3) var(--rcs-r9-spring) !important;
}
.rcs-bottom-nav a[aria-label="Bag"] .is-bumping { transform: scale(1.32) !important; }
/* SECTION 9. ROUND 9 — WHATSAPP FAB rebuild */
.rcs-whatsapp-fab {
position: fixed !important;
bottom: calc(76px + env(safe-area-inset-bottom)) !important;
right: calc(14px + env(safe-area-inset-right)) !important;
width: 52px !important; height: 52px !important;
border-radius: 50% !important;
background: #25D366 !important;
background: linear-gradient(135deg, #25D366 0%, #1FB855 100%) !important;
color: #fff !important;
display: grid !important; place-items: center !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18), 0 2px 4px rgba(0, 0, 0, 0.10) !important;
z-index: var(--rcs-z-fab, 90) !important;
text-decoration: none !important; overflow: hidden !important;
transition: transform var(--rcs-dur-3) var(--rcs-r9-spring),
box-shadow var(--rcs-dur-3) var(--rcs-r9-silk),
border-radius var(--rcs-dur-4) var(--rcs-r9-drape),
width var(--rcs-dur-4) var(--rcs-r9-drape) !important;
}
.rcs-whatsapp-fab i, .rcs-whatsapp-fab svg {
font-size: 26px !important; width: 28px !important; height: 28px !important;
color: #fff !important; line-height: 1 !important; z-index: 2 !important;
}
.rcs-whatsapp-fab::before {
content: "" !important;
position: absolute !important; inset: -8px !important;
border-radius: inherit !important;
background: rgba(37, 211, 102, 0.35) !important;
z-index: 0 !important;
animation: rcs-r9-fab-pulse 2.4s ease-in-out infinite !important;
pointer-events: none !important;
}
.rcs-whatsapp-fab::after { display: none !important; }
@keyframes rcs-r9-fab-pulse {
0%, 100% { transform: scale(0.85); opacity: 0; }
50% { transform: scale(1.05); opacity: 1; }
}
.rcs-whatsapp-fab:hover { transform: scale(1.06) !important; }
.rcs-whatsapp-fab:active { transform: scale(0.92) !important; }
.rcs-whatsapp-fab.is-expanded {
width: 168px !important; border-radius: 26px !important;
padding-left: 20px !important; justify-content: flex-start !important;
grid-template-columns: 28px 1fr !important; gap: 10px !important;
}
.rcs-whatsapp-fab .rcs-r9-fab-label {
color: #fff !important; font-weight: 600 !important;
font-size: var(--rcs-fl-sm) !important; letter-spacing: 0.04em !important;
white-space: nowrap !important;
opacity: 0 !important; transform: translateX(8px) !important;
transition: opacity 220ms ease, transform 280ms var(--rcs-r9-silk) !important;
}
.rcs-whatsapp-fab.is-expanded .rcs-r9-fab-label {
opacity: 1 !important; transform: translateX(0) !important;
}
/* SECTION 10. ROUND 9 — SLIM BOTTOM-ANCHORED TOAST */
.rcs-toast, body .rcs-toast, body > .rcs-toast {
position: fixed !important; left: 50% !important;
bottom: calc(var(--rcs-bottom-nav-h, 60px) + env(safe-area-inset-bottom) + 14px) !important;
top: auto !important;
transform: translateX(-50%) translateY(20px) !important;
background: rgba(28, 26, 25, 0.94) !important;
color: #fff !important;
font-family: var(--rcs-font-ui) !important;
font-size: var(--rcs-fl-sm) !important; font-weight: 500 !important;
letter-spacing: 0.02em !important;
padding: 10px 18px !important;
border-radius: 999px !important;
max-width: calc(100vw - 32px) !important;
height: auto !important; min-height: 38px !important; max-height: 44px !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22) !important;
z-index: 99999 !important;
opacity: 0 !important; pointer-events: none !important;
transition: opacity 240ms var(--rcs-r9-silk),
transform 320ms var(--rcs-r9-spring) !important;
}
.rcs-toast.is-visible { opacity: 1 !important; transform: translateX(-50%) translateY(0) !important; }
/* SECTION 11. ROUND 9 — MINI-CART loader + CTA fix */
.rcs-mini-cart__error, .rcs-bag-loader, .rcs-cart-loading,
.rcs-bag-error, .rcs-mini-cart .woocommerce-info {
font-family: var(--rcs-font-display, 'Fraunces', serif) !important;
font-style: italic !important;
font-size: var(--rcs-fl-base) !important;
color: rgba(60, 50, 40, 0.65) !important;
padding: 40px 24px !important; text-align: center !important;
background: transparent !important; border: 0 !important;
}
.rcs-mini-cart__footer .rcs-btn, .rcs-mini-cart__footer button,
.widget_shopping_cart_content .buttons .button,
.widget_shopping_cart_content .buttons .checkout {
background: var(--rcs-primary) !important; color: #fff !important;
opacity: 1 !important; height: 48px !important; line-height: 48px !important;
border-radius: 999px !important; font-weight: 600 !important;
letter-spacing: 0.06em !important; text-transform: uppercase !important;
width: 100% !important;
display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
/* SECTION 12. ROUND 9 — SHOP CARD ATC qty pill */
.rcs-product-card .add_to_cart_button,
.rcs-product-card a.add_to_cart_button {
background: #1c1a19 !important; color: #fff !important;
border-radius: 999px !important; height: 40px !important;
font-weight: 600 !important; font-size: var(--rcs-fl-sm) !important;
letter-spacing: 0.06em !important; text-transform: uppercase !important;
display: inline-flex !important; align-items: center !important; justify-content: center !important;
gap: 6px !important; margin: 8px 0 0 !important; width: 100% !important;
}
.rcs-product-card .add_to_cart_button.added,
.rcs-product-card .add_to_cart_button[data-rcs-added="1"] { background: #2c2c2a !important; }
.rcs-product-card .add_to_cart_button .rcs-r9-qty-chip {
background: rgba(255, 255, 255, 0.18) !important; color: #fff !important;
font-size: 10px !important; padding: 2px 7px !important;
border-radius: 999px !important; line-height: 1 !important;
margin-left: 6px !important; min-width: 18px !important; height: 16px !important;
display: inline-flex !important; align-items: center !important; justify-content: center !important;
}
/* SECTION 13. ROUND 9 — INSTANT SEARCH OVERLAY */
.rcs-r9-search-overlay {
position: fixed !important; inset: 0 !important;
z-index: 99998 !important;
background: rgba(28, 26, 25, 0.42) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
opacity: 0 !important; pointer-events: none !important;
transition: opacity 240ms var(--rcs-r9-silk) !important;
}
.rcs-r9-search-overlay.is-open { opacity: 1 !important; pointer-events: auto !important; }
.rcs-r9-search {
position: fixed !important;
left: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important;
z-index: 99999 !important;
background: var(--rcs-canvas) !important;
display: flex !important; flex-direction: column !important;
transform: translateY(100%) !important;
transition: transform 380ms var(--rcs-r9-drape) !important;
padding-top: env(safe-area-inset-top) !important;
padding-bottom: env(safe-area-inset-bottom) !important;
}
.rcs-r9-search.is-open { transform: translateY(0) !important; }
.rcs-r9-search__head {
display: flex !important; align-items: center !important; gap: 10px !important;
padding: 12px var(--rcs-r9-gutter) !important;
border-bottom: 1px solid var(--rcs-outline) !important;
background: var(--rcs-surface) !important;
}
.rcs-r9-search__input {
flex: 1 !important; height: 44px !important; border: 0 !important;
background: transparent !important;
font-family: var(--rcs-font-display) !important; font-style: italic !important;
font-size: var(--rcs-fl-lg) !important; color: var(--rcs-text) !important; outline: 0 !important;
}
.rcs-r9-search__input::placeholder { color: var(--rcs-text-subtle) !important; }
.rcs-r9-search__close {
width: 40px !important; height: 40px !important; border: 0 !important;
background: transparent !important; color: var(--rcs-text) !important;
font-size: 22px !important; cursor: pointer !important; border-radius: 50% !important;
}
.rcs-r9-search__close:active { background: rgba(107,26,46,0.1) !important; }
.rcs-r9-search__body {
flex: 1 !important; overflow-y: auto !important;
padding: 8px 0 60px !important;
-webkit-overflow-scrolling: touch !important;
}
.rcs-r9-search__section { padding: 12px var(--rcs-r9-gutter) 6px !important; }
.rcs-r9-search__section-title {
font-family: var(--rcs-font-ui) !important;
font-size: var(--rcs-fl-xs) !important;
letter-spacing: 0.18em !important; text-transform: uppercase !important;
color: var(--rcs-text-subtle) !important;
margin: 0 0 8px !important;
display: flex !important; align-items: center !important; gap: 8px !important;
}
.rcs-r9-search__row {
display: flex !important; align-items: center !important; gap: 12px !important;
padding: 10px var(--rcs-r9-gutter) !important;
text-decoration: none !important; color: var(--rcs-text) !important;
transition: background 180ms ease !important;
}
.rcs-r9-search__row:hover, .rcs-r9-search__row:active { background: rgba(107, 26, 46, 0.04) !important; }
.rcs-r9-search__thumb {
flex: 0 0 52px !important; width: 52px !important; height: 52px !important;
border-radius: 8px !important; background: var(--rcs-surface-2) !important;
overflow: hidden !important;
display: grid !important; place-items: center !important;
border: 1px solid var(--rcs-outline) !important;
}
.rcs-r9-search__thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.rcs-r9-search__text { flex: 1 !important; min-width: 0 !important; }
.rcs-r9-search__name {
display: block !important;
font-family: var(--rcs-font-display) !important;
font-size: var(--rcs-fl-base) !important; color: var(--rcs-text) !important;
white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}
.rcs-r9-search__meta {
display: block !important;
font-family: var(--rcs-font-ui) !important;
font-size: var(--rcs-fl-xs) !important; color: var(--rcs-text-muted) !important;
margin-top: 2px !important; text-transform: uppercase !important; letter-spacing: 0.08em !important;
}
.rcs-r9-search__hint {
padding: 32px 24px !important; text-align: center !important;
font-family: var(--rcs-font-display) !important; font-style: italic !important;
color: var(--rcs-text-muted) !important; font-size: var(--rcs-fl-base) !important;
}
/* SECTION 14. ROUND 9 — PINCODE GEOLOCATION + sign-in polish */
.rcs-pdp__pincode {
display: grid !important;
grid-template-columns: 1fr auto !important;
grid-template-rows: auto auto !important;
gap: 8px 8px !important; margin-top: 10px !important;
}
.rcs-pdp__pincode input[data-rcs-pin] {
height: 44px !important; border-radius: 999px !important; padding: 0 14px !important;
border: 1px solid var(--rcs-outline-strong) !important; background: #fff !important;
font-family: var(--rcs-font-ui) !important; font-size: var(--rcs-fl-base) !important;
}
.rcs-pdp__pincode [data-rcs-pin-check] {
height: 44px !important; padding: 0 16px !important; border-radius: 999px !important;
background: var(--rcs-text) !important; color: #fff !important; border: 0 !important;
font-family: var(--rcs-font-ui) !important; font-weight: 600 !important;
letter-spacing: 0.06em !important; text-transform: uppercase !important;
font-size: var(--rcs-fl-xs) !important;
}
.rcs-r9-locate {
grid-column: 1 / -1 !important;
display: inline-flex !important; align-items: center !important; justify-content: center !important;
gap: 6px !important; height: 36px !important;
border: 1px solid var(--rcs-outline) !important;
border-radius: 999px !important;
background: var(--rcs-surface) !important; color: var(--rcs-primary) !important;
font-family: var(--rcs-font-ui) !important; font-size: var(--rcs-fl-xs) !important;
font-weight: 600 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important;
cursor: pointer !important;
}
.rcs-r9-locate i { font-size: 14px !important; }
.rcs-r9-locate-note {
grid-column: 1 / -1 !important;
font-family: var(--rcs-font-ui) !important;
font-size: 11px !important; color: var(--rcs-text-subtle) !important;
text-align: center !important; margin: 0 !important;
}
.rcs-r9-pin-result {
grid-column: 1 / -1 !important;
font-family: var(--rcs-font-display) !important; font-style: italic !important;
font-size: var(--rcs-fl-base) !important; color: var(--rcs-text) !important;
padding-top: 4px !important;
}
.rcs-r9-pin-result.is-error { color: var(--rcs-error) !important; }
.rcs-r9-pin-result.is-ok { color: var(--rcs-success) !important; }
body.woocommerce-account:not(.logged-in) .rcs-signin,
body.woocommerce-account:not(.logged-in) .woocommerce-account .u-columns {
padding-top: clamp(12px, 3vw, 24px) !important;
}
body.woocommerce-account:not(.logged-in) .rcs-signin__header,
body.woocommerce-account:not(.logged-in) .rcs-signin h2 {
margin-top: 0 !important;
padding-top: clamp(8px, 2vw, 16px) !important;
}
.rcs-r9-register-link {
display: block !important; text-align: center !important;
margin: 14px 0 6px !important;
font-family: var(--rcs-font-ui) !important;
font-size: var(--rcs-fl-sm) !important;
color: var(--rcs-primary) !important;
text-decoration: underline !important; text-underline-offset: 3px !important;
}
/* SECTION 15. ROUND 9 — NEW LOGO wrapper */
.rcs-header__brand-r9 {
position: relative !important; display: inline-block !important;
text-decoration: none !important; color: var(--rcs-primary) !important;
padding: 4px 8px !important; line-height: 1 !important;
}
.rcs-header__brand-r9 .rcs-r9-logo-wm {
position: relative !important; z-index: 2 !important;
font-family: var(--rcs-font-display) !important;
font-style: italic !important; font-weight: 500 !important;
font-size: clamp(20px, 4.4vw, 26px) !important;
letter-spacing: -0.01em !important;
color: var(--rcs-primary) !important; display: block !important;
}
.rcs-header__brand-r9 .rcs-r9-logo-monogram {
position: absolute !important; top: 50% !important; left: 50% !important;
transform: translate(-50%, -50%) !important;
width: 110% !important; height: 200% !important;
z-index: 1 !important; pointer-events: none !important;
opacity: 0.16 !important;
}
.rcs-header__brand-r9 .rcs-r9-logo-monogram svg { width: 100% !important; height: 100% !important; display: block !important; }
.rcs-header__brand-r9 .rcs-r9-logo-monogram text {
font-family: var(--rcs-font-display) !important;
font-weight: 700 !important; fill: none !important;
stroke: var(--rcs-primary) !important; stroke-width: 1.2 !important;
letter-spacing: -0.04em !important;
}
/* SECTION 16. ROUND 9 — LIQUID REVEALS */
@media (prefers-reduced-motion: no-preference) {
[data-reveal]:not(.is-revealed) {
opacity: 0 !important;
transform: translateY(16px) !important;
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%) !important;
mask-image: linear-gradient(180deg, transparent 0%, #000 30%) !important;
transition: opacity 720ms var(--rcs-r9-drape),
transform 720ms var(--rcs-r9-drape),
-webkit-mask-image 720ms var(--rcs-r9-drape),
mask-image 720ms var(--rcs-r9-drape) !important;
}
[data-reveal].is-revealed {
opacity: 1 !important; transform: translateY(0) !important;
-webkit-mask-image: linear-gradient(180deg, transparent -50%, #000 0%) !important;
mask-image: linear-gradient(180deg, transparent -50%, #000 0%) !important;
}
}
/* SECTION 17. ROUND 9 — fluid type / hero polish */
.rcs-hero__title { font-size: var(--rcs-fl-hero) !important; line-height: 1.06 !important; }
.rcs-hero__body { font-size: var(--rcs-fl-base) !important; }
.rcs-loom__title, .rcs-bridal__title, .rcs-fb-live__title { font-size: var(--rcs-fl-2xl) !important; line-height: 1.2 !important; }
.rcs-section__title h2 { font-size: var(--rcs-fl-2xl) !important; }
/* End Round 9 */
/* SECTION 18. ROUND 9.1 SAFETY — auto-reveal sections after 1.4s so
* IntersectionObserver gaps never leave content hidden.
* (Liquid reveal still wins when JS fires earlier.)
*/
@keyframes rcs-r91-autoreveal { to { opacity: 1; transform: translateY(0); } }
[data-reveal]:not(.is-revealed) {
animation: rcs-r91-autoreveal 720ms var(--rcs-r9-drape, cubic-bezier(.16,1,.3,1)) 1400ms forwards !important;
}
/* End Round 9.1 */
/* SECTION 19. ROUND 9.2 — KILL the [data-reveal] opacity:0 trap.
* Earlier R8/R9 rules + theme JS combine to leave sections invisible
* when IntersectionObserver doesn't fire (jump-scroll, fast load).
* Strip the hide rules entirely — let reveals work via .is-revealed only.
*/
[data-reveal],
[data-reveal]:not(.is-revealed),
[data-reveal].is-revealed {
opacity: 1 !important;
transform: none !important;
-webkit-mask-image: none !important;
mask-image: none !important;
animation: none !important;
visibility: visible !important;
}
/* But keep a very gentle 1-time fade on initial entry if JS attaches the class quickly */
[data-reveal].rcs-r92-fade-in {
animation: rcs-r92-soft-in 600ms var(--rcs-r9-drape, cubic-bezier(.16,1,.3,1)) both !important;
}
@keyframes rcs-r92-soft-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* End Round 9.2 */
/* =====================================================================
* ROUND 10 — fix every reported issue across 220+ findings
* Date: 2026-05-31
* Root-cause fixes:
* A. Hover-state CSS firing on scroll → wrap in @media (hover:hover)
* B. FAB grows unboundedly → max constraints + single-instance enforcement
* C. Variable-font FOUT → font-display:swap + axis lock
* D. Chip row auto-scroll → kill animation
* Plus 60+ targeted section fixes.
* Append-only, !important.
* ===================================================================== */
/* SECTION 20. ROOT CAUSE A — disable :hover on touch devices */
@media (hover: none) {
.rcs-btn:hover, .rcs-pdp__atc:hover, .add_to_cart_button:hover,
.rcs-chip:hover, .rcs-header__cart:hover, .rcs-header__search:hover,
.rcs-header__menu:hover, .rcs-card__wishlist:hover,
.rcs-edits-tile:hover, .rcs-price-tier:hover, .rcs-bridal__card:hover,
.rcs-fb-live__cta:hover, .rcs-whatsapp-fab:hover, .rcs-bottom-nav a:hover,
.rcs-product-card:hover, .rcs-product-card__media:hover,
.rcs-product-card .add_to_cart_button:hover, [data-r9-press]:hover {
transform: none !important;
box-shadow: none !important;
background-image: none !important;
filter: none !important;
scale: 1 !important;
background-color: transparent !important;
}
}
/* SECTION 21. ROOT CAUSE B — FAB single-instance + size cap */
body > .rcs-whatsapp-fab ~ .rcs-whatsapp-fab,
.rcs-whatsapp-fab + .rcs-whatsapp-fab,
body .rcs-whatsapp-fab:nth-of-type(n+2),
body a.rcs-whatsapp-fab:not(:first-of-type) {
display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
pointer-events: none !important;
}
.rcs-whatsapp-fab, .rcs-whatsapp-fab.is-expanded,
a.rcs-whatsapp-fab, a.rcs-whatsapp-fab.is-expanded {
position: fixed !important;
max-width: 168px !important;
max-height: 64px !important;
min-width: 52px !important;
min-height: 52px !important;
bottom: calc(76px + env(safe-area-inset-bottom)) !important;
right: calc(14px + env(safe-area-inset-right)) !important;
top: auto !important; left: auto !important;
z-index: 9999 !important;
}
.rcs-whatsapp-fab svg, .rcs-whatsapp-fab i {
max-width: 28px !important; max-height: 28px !important;
width: 28px !important; height: 28px !important;
color: #fff !important; fill: #fff !important;
}
/* SECTION 22. ROOT CAUSE C — font-display swap + axis lock */
.rcs-loom__title, .rcs-bridal__title, .rcs-fb-live__title,
.rcs-founder__quote blockquote, .rcs-hero__title,
h1, h2, h3, .woocommerce-loop-product__title,
.rcs-product-card__title {
font-feature-settings: "kern" 1, "liga" 1 !important;
font-synthesis: none !important;
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
}
/* SECTION 23. ROOT CAUSE D — kill chip auto-scroll */
.rcs-shop-toolbar, .rcs-chip-row, .rcs-shop-toolbar * {
animation: none !important;
}
.rcs-shop-toolbar {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scroll-snap-type: none !important;
-webkit-overflow-scrolling: touch !important;
gap: 8px !important;
padding: 8px var(--rcs-r9-gutter, 16px) !important;
scrollbar-width: none !important;
}
.rcs-shop-toolbar::-webkit-scrollbar { display: none !important; }
.rcs-shop-toolbar .rcs-chip {
flex: 0 0 auto !important;
scroll-snap-align: none !important;
transition: background 200ms ease !important;
}
/* SECTION 24. HEADER MONOGRAM clip — prevent bleed */
.rcs-header, .rcs-header__inner { overflow: visible !important; }
.rcs-header__brand-r9 {
overflow: hidden !important;
position: relative !important;
height: 56px !important;
max-width: 220px !important;
contain: layout paint !important;
}
.rcs-header__brand-r9 .rcs-r9-logo-monogram {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
transform: none !important;
overflow: hidden !important;
clip-path: inset(0) !important;
z-index: 0 !important;
opacity: 0.12 !important;
pointer-events: none !important;
}
.rcs-header__brand-r9 .rcs-r9-logo-monogram svg {
width: 100% !important; height: 100% !important; display: block !important;
}
.rcs-header__brand-r9 .rcs-r9-logo-wm {
position: relative !important;
z-index: 2 !important;
line-height: 56px !important;
}
/* SECTION 25. RELEASE all data-reveal hard-locks */
[data-reveal], [data-reveal]:not(.is-revealed),
[data-reveal].is-revealed, [data-reveal] * {
opacity: 1 !important;
transform: none !important;
-webkit-mask-image: none !important;
mask-image: none !important;
visibility: visible !important;
animation-fill-mode: forwards !important;
}
/* SECTION 26. HERO — fix transparent overlay + ghost CTA pill */
.rcs-hero__title, .rcs-hero__body, .rcs-hero__eyebrow,
.rcs-hero .rcs-btn, .rcs-hero__cta .rcs-btn {
opacity: 1 !important;
text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45) !important;
}
.rcs-hero__title { text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55) !important; }
.rcs-hero .rcs-btn::before, .rcs-hero .rcs-btn::after,
.rcs-hero__cta .rcs-btn::before, .rcs-hero__cta .rcs-btn::after,
.rcs-hero .rcs-btn--lg::before, .rcs-hero .rcs-btn--lg::after {
box-shadow: none !important;
background: transparent !important;
border: 0 !important;
}
/* SECTION 27. PROMO BAR — stable text + fix cropping */
.rcs-utility, .rcs-utility__inner, .rcs-utility__track,
.rcs-promo-bar, .rcs-promo-bar__track,
.rcs-top-promo, .rcs-marquee, .rcs-marquee__track {
overflow: hidden !important;
white-space: nowrap !important;
}
.rcs-utility__track, .rcs-promo-bar__track, .rcs-marquee__track {
animation-duration: 40s !important;
animation-timing-function: linear !important;
animation-iteration-count: infinite !important;
padding-right: 80px !important;
padding-left: 16px !important;
}
.rcs-utility__item, .rcs-promo-bar__item {
padding: 0 12px !important;
flex-shrink: 0 !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
}
.rcs-utility {
padding-top: max(6px, env(safe-area-inset-top)) !important;
padding-bottom: 6px !important;
}
/* SECTION 28. OCCASION TILES — uniform scrim + arrow icons */
.rcs-edits-tile {
position: relative !important;
overflow: hidden !important;
border-radius: 14px !important;
}
.rcs-edits-tile__scrim {
position: absolute !important;
inset: 0 !important;
background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.55) 100%) !important;
z-index: 1 !important;
pointer-events: none !important;
}
.rcs-edits-tile__content,
.rcs-edits-tile .rcs-eyebrow,
.rcs-edits-tile__title,
.rcs-edits-tile__cta {
position: relative !important;
z-index: 2 !important;
color: #fff !important;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
}
.rcs-edits-tile__cta i, .rcs-edits-tile__cta svg {
stroke-width: 1.5 !important;
font-weight: 400 !important;
}
/* SECTION 29. LOOM DIARY + BRIDAL polish — arrow no clip */
.rcs-loom .rcs-btn, .rcs-bridal .rcs-btn {
padding: 14px 24px 14px 22px !important;
line-height: 1 !important;
gap: 10px !important;
}
.rcs-loom .rcs-btn i, .rcs-loom .rcs-btn svg,
.rcs-bridal .rcs-btn i, .rcs-bridal .rcs-btn svg {
flex-shrink: 0 !important;
margin-right: 0 !important;
}
.rcs-bridal__body, .rcs-loom__body {
line-height: 1.6 !important;
}
/* SECTION 30. FOUNDER QUOTE + FB LIVE */
.rcs-founder__quote blockquote::first-letter {
color: var(--rcs-primary) !important;
font-size: 3em !important;
line-height: 0.85 !important;
float: left !important;
padding: 6px 8px 0 0 !important;
font-family: var(--rcs-font-display) !important;
font-weight: 600 !important;
}
.rcs-fb-live { position: relative !important; overflow: hidden !important; isolation: isolate !important; }
.rcs-pulse, .rcs-fb-live__indicator .rcs-pulse {
background: var(--rcs-error, #BA1A1A) !important;
border-radius: 50% !important;
width: 8px !important; height: 8px !important;
display: inline-block !important;
animation: rcs-r10-pulse 1.6s ease-in-out infinite !important;
}
@keyframes rcs-r10-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.6; transform: scale(1.25); }
}
/* SECTION 31. FOOTER — wavy underline kill, social icons consistent */
.rcs-footer a, .rcs-footer__site a, .rcs-footer .rcs-credit a {
text-decoration-style: solid !important;
text-decoration-line: underline !important;
text-decoration-thickness: 1px !important;
text-underline-offset: 2px !important;
}
.rcs-footer .rcs-social a, .rcs-footer__site .rcs-social a,
.rcs-footer .rcs-social i, .rcs-footer__site .rcs-social i {
color: var(--rcs-text) !important;
background: transparent !important;
}
/* SECTION 32. 404 PAGE — stable opacity, clean buttons */
.error404 h1, .rcs-404 .rcs-404__number, body.error404 [class*="404"] {
opacity: 1 !important;
animation: none !important;
color: var(--rcs-primary) !important;
filter: none !important;
text-shadow: none !important;
}
.error404 .rcs-btn, .rcs-404 .rcs-btn {
line-height: 1 !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
border-width: 1.5px !important;
}
/* SECTION 33. MINI-CART hardening */
.rcs-mini-cart__error, .rcs-bag-error, .rcs-cart-loading, .rcs-bag-loader {
font-family: var(--rcs-font-display, 'Fraunces', serif) !important;
font-style: italic !important;
font-size: 1rem !important;
color: rgba(60, 50, 40, 0.65) !important;
padding: 60px 24px !important;
text-align: center !important;
background: transparent !important;
border: 0 !important;
}
.rcs-mini-cart__footer .rcs-btn, .rcs-mini-cart__footer .button,
.widget_shopping_cart .buttons .button, .widget_shopping_cart .buttons .checkout {
background: var(--rcs-primary) !important;
color: #fff !important;
opacity: 1 !important;
box-shadow: 0 4px 14px rgba(107, 26, 46, 0.25) !important;
}
/* SECTION 34. SHOP CARD — strikethrough + ATC consistent */
.rcs-product-card del, .rcs-product-card__price del,
.rcs-product-card .price del,
.rcs-product-card .woocommerce-Price-amount.amount del {
color: rgba(28, 26, 25, 0.45) !important;
text-decoration: line-through !important;
text-decoration-color: rgba(28, 26, 25, 0.45) !important;
text-decoration-thickness: 1.5px !important;
margin-right: 6px !important;
}
.rcs-product-card .price ins, .rcs-product-card__price ins, .rcs-product-card ins {
text-decoration: none !important;
background: transparent !important;
color: var(--rcs-primary) !important;
font-weight: 600 !important;
}
/* SECTION 35. ATC "ADDED" qty chip spacing */
.rcs-product-card .add_to_cart_button.added,
.rcs-product-card .add_to_cart_button[data-rcs-added="1"] {
background: #2c2c2a !important;
gap: 8px !important;
}
.rcs-product-card .add_to_cart_button .rcs-r9-qty-chip,
.rcs-product-card .add_to_cart_button .rcs-r10-qty-chip {
background: rgba(255, 255, 255, 0.2) !important;
color: #fff !important;
font-size: 10px !important;
padding: 3px 8px !important;
border-radius: 999px !important;
line-height: 1 !important;
margin-left: 8px !important;
min-width: 20px !important;
height: 18px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-weight: 700 !important;
}
/* SECTION 36. TOAST unified */
.rcs-toast, body > .rcs-toast, body .rcs-toast {
position: fixed !important;
left: 50% !important;
transform: translateX(-50%) translateY(20px) !important;
bottom: calc(76px + env(safe-area-inset-bottom)) !important;
top: auto !important;
background: rgba(28, 26, 25, 0.94) !important;
color: #fff !important;
font-family: var(--rcs-font-ui, Inter, system-ui) !important;
font-size: 13px !important;
font-weight: 500 !important;
padding: 10px 18px !important;
border-radius: 999px !important;
min-width: 140px !important;
max-width: calc(100vw - 32px) !important;
text-align: center !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22) !important;
z-index: 99998 !important;
opacity: 0 !important;
pointer-events: none !important;
transition: opacity 240ms ease, transform 320ms cubic-bezier(.34, 1.56, .64, 1) !important;
}
.rcs-toast.is-visible {
opacity: 1 !important;
transform: translateX(-50%) translateY(0) !important;
}
/* SECTION 37. STOCK LIMIT error box */
.woocommerce-error, ul.woocommerce-error, .wc-block-components-notice-banner.is-error {
background: var(--rcs-error-soft, #FCEDED) !important;
border: 1px solid rgba(186, 26, 26, 0.25) !important;
border-radius: 12px !important;
padding: 14px 16px !important;
margin: 12px var(--rcs-r9-gutter, 16px) !important;
color: var(--rcs-primary) !important;
list-style: none !important;
}
.woocommerce-error::before, ul.woocommerce-error::before {
content: "" !important;
display: none !important;
}
.woocommerce-error .button {
background: var(--rcs-primary) !important;
color: #fff !important;
border-radius: 999px !important;
padding: 8px 16px !important;
margin-left: 8px !important;
box-shadow: none !important;
border: 0 !important;
}
/* SECTION 38. SIGN-IN polish */
body.woocommerce-account:not(.logged-in) .woocommerce,
body.woocommerce-account:not(.logged-in) .u-columns,
body.woocommerce-account:not(.logged-in) .rcs-signin {
padding-top: clamp(12px, 3vw, 24px) !important;
}
body.woocommerce-account:not(.logged-in) .rcs-signin h2,
body.woocommerce-account:not(.logged-in) .rcs-signin__header {
margin-top: 0 !important;
padding-top: clamp(8px, 2vw, 16px) !important;
}
.woocommerce-form-login, form.woocommerce-form.woocommerce-form-login {
background: #fff !important;
border-radius: 18px !important;
padding: clamp(16px, 4vw, 24px) !important;
box-shadow: 0 4px 16px rgba(28, 26, 25, 0.06), 0 1px 2px rgba(28, 26, 25, 0.04) !important;
border: 1px solid var(--rcs-outline, rgba(28, 26, 25, 0.08)) !important;
}
.woocommerce-form-login + p.rcs-r9-register-link,
.woocommerce-form-login ~ .woocommerce-form-register-toggle,
body.woocommerce-account:not(.logged-in) .rcs-r9-register-link + .rcs-r9-register-link,
body.woocommerce-account:not(.logged-in) .rcs-r9-register-link ~ .rcs-r9-register-link {
display: none !important;
}
/* SECTION 39. CART proceed CTA stable */
.woocommerce-cart .wc-proceed-to-checkout,
.cart_totals .wc-proceed-to-checkout {
position: relative !important;
margin: 16px 0 !important;
padding: 0 !important;
}
.woocommerce-cart a.checkout-button,
.cart_totals a.checkout-button {
width: 100% !important;
height: 52px !important;
line-height: 52px !important;
border-radius: 999px !important;
background: var(--rcs-primary) !important;
color: #fff !important;
font-weight: 600 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
box-shadow: 0 4px 14px rgba(107, 26, 46, 0.25) !important;
}
/* SECTION 40. BOTTOM NAV badge stable */
.rcs-bottom-nav a[aria-label="Bag"] .rcs-badge,
.rcs-bottom-nav a[aria-label="Bag"] .rcs-bag-count,
.rcs-bottom-nav a[aria-label="Bag"] .rcs-cart-count {
position: absolute !important;
top: 2px !important;
right: calc(50% - 22px) !important;
min-width: 18px !important;
height: 18px !important;
padding: 0 5px !important;
background: var(--rcs-primary) !important;
color: #fff !important;
font-size: 10px !important;
font-weight: 700 !important;
line-height: 18px !important;
border-radius: 999px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
border: 2px solid var(--rcs-canvas) !important;
z-index: 3 !important;
transition: transform 280ms cubic-bezier(.34, 1.56, .64, 1) !important;
}
.rcs-bottom-nav a[aria-label="Bag"] .rcs-badge.is-bumping,
.rcs-bottom-nav a[aria-label="Bag"] .rcs-bag-count.is-bumping {
transform: scale(1.32) !important;
}
.rcs-bottom-nav a[aria-label="Bag"] .rcs-badge[data-count="0"],
.rcs-bottom-nav a[aria-label="Bag"] .rcs-bag-count[data-count="0"] {
display: none !important;
}
.rcs-header__cart .rcs-badge, .rcs-header__cart .rcs-badge-cart {
border: 2px solid var(--rcs-canvas) !important;
z-index: 3 !important;
}
/* SECTION 41. PINCODE ribbon polish */
.rcs-pdp__pincode {
background: var(--rcs-section-tint, #F2E9D9) !important;
padding: 14px !important;
border-radius: 12px !important;
margin: 14px 0 !important;
}
/* SECTION 42. HEADER ICONS tap feedback */
.rcs-header__search, .rcs-header__cart, .rcs-header__menu {
transition: background-color 200ms ease, transform 200ms cubic-bezier(.22, 1, .36, 1) !important;
}
.rcs-header__search:active, .rcs-header__cart:active, .rcs-header__menu:active {
background: rgba(107, 26, 46, 0.12) !important;
transform: scale(0.92) !important;
}
/* SECTION 43. SAFE-AREA universal */
.rcs-utility { padding-top: max(6px, env(safe-area-inset-top)) !important; }
.rcs-bottom-nav { padding-bottom: max(6px, env(safe-area-inset-bottom)) !important; }
/* SECTION 44. DRAWER + backdrop stability */
.rcs-drawer__backdrop, .rcs-drawer-backdrop, [data-rcs-drawer-backdrop] {
position: fixed !important;
inset: 0 !important;
background: rgba(28, 26, 25, 0.42) !important;
backdrop-filter: blur(6px) !important;
-webkit-backdrop-filter: blur(6px) !important;
z-index: 99 !important;
opacity: 0 !important;
pointer-events: none !important;
transition: opacity 280ms ease !important;
}
.rcs-drawer.is-open ~ .rcs-drawer__backdrop,
.rcs-drawer-backdrop.is-open,
.rcs-drawer.is-open ~ [data-rcs-drawer-backdrop] {
opacity: 1 !important;
pointer-events: auto !important;
}
.rcs-drawer {
position: fixed !important;
top: 0 !important; left: 0 !important;
width: 80% !important; max-width: 320px !important;
height: 100vh !important;
background: var(--rcs-canvas, #FAF6F0) !important;
z-index: 100 !important;
transform: translateX(-100%) !important;
transition: transform 320ms cubic-bezier(.22, 1, .36, 1) !important;
overflow-y: auto !important;
box-shadow: 8px 0 24px rgba(0, 0, 0, 0.16) !important;
}
.rcs-drawer.is-open { transform: translateX(0) !important; }
.rcs-drawer a {
color: var(--rcs-text) !important;
text-decoration: none !important;
}
.rcs-drawer a.is-current, .rcs-drawer a[aria-current="page"] {
color: var(--rcs-primary) !important;
}
/* SECTION 45. DIVIDER LINE stability */
.rcs-divider, .rcs-section-divider, .rcs-loom__divider {
border: 0 !important;
height: 1px !important;
background: linear-gradient(90deg, transparent, var(--rcs-outline, rgba(28, 26, 25, 0.12)), transparent) !important;
margin: 24px auto !important;
max-width: 320px !important;
}
/* SECTION 46. JOIN button stable shape */
.rcs-footer__newsletter button, .rcs-newsletter button[type="submit"] {
border-radius: 999px !important;
border: 0 !important;
background: var(--rcs-primary) !important;
color: #fff !important;
padding: 12px 22px !important;
font-weight: 600 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
}
/* SECTION 47. Font display swap */
.rcs-product-card__title, .woocommerce-loop-product__title,
.rcs-hero__title, .rcs-section__title h2,
.rcs-loom__title, .rcs-bridal__title, .rcs-fb-live__title,
.rcs-founder__quote blockquote, h1, h2, h3 {
font-family: 'Fraunces', Georgia, serif !important;
font-display: swap !important;
}
/* SECTION 48. Scrollbar / overflow cleanup */
html, body { overflow-x: hidden !important; }
::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
/* End Round 10 */
/* SECTION 49. ROUND 10.1 — Logo wordmark fix
* R10 section 24 was clipping "Raj Collection" — restore full width
*/
.rcs-header__brand-r9 {
max-width: none !important;
width: auto !important;
overflow: visible !important;
}
.rcs-header__brand-r9 .rcs-r9-logo-monogram {
overflow: visible !important;
clip-path: none !important;
width: 100% !important;
height: 100% !important;
opacity: 0.10 !important;
}
.rcs-header__brand-r9 .rcs-r9-logo-wm {
white-space: nowrap !important;
}
/* End Round 10.1 */
/* SECTION 50. ROUND 10.2 — CENTER the header brand horizontally +
* fix RC monogram SVG aspect ratio + cropping
*/
.rcs-header__inner,
.rcs-header__inner.rcs-container {
display: grid !important;
grid-template-columns: 44px 1fr 44px 44px !important;
grid-template-areas: "menu brand search cart" !important;
align-items: center !important;
gap: 4px !important;
padding-inline: 8px !important;
}
.rcs-header__menu { grid-area: menu !important; }
.rcs-header__brand-r9,
.rcs-header__brand-wrap,
.rcs-header__brand {
grid-area: brand !important;
justify-self: center !important;
text-align: center !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
min-width: 180px !important;
height: 56px !important;
position: relative !important;
overflow: visible !important;
padding: 0 12px !important;
}
.rcs-header__search { grid-area: search !important; }
.rcs-header__cart { grid-area: cart !important; }
/* Wordmark — sized to fit cleanly */
.rcs-header__brand-r9 .rcs-r9-logo-wm {
font-family: 'Fraunces', Georgia, serif !important;
font-style: italic !important;
font-weight: 500 !important;
font-size: 22px !important;
line-height: 1 !important;
color: var(--rcs-primary, #6B1A2E) !important;
letter-spacing: -0.01em !important;
white-space: nowrap !important;
position: relative !important;
z-index: 2 !important;
text-align: center !important;
}
/* Monogram backdrop — match the wordmark's bounding box, NOT stretch */
.rcs-header__brand-r9 .rcs-r9-logo-monogram {
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
width: 100% !important;
height: 160% !important;
z-index: 1 !important;
pointer-events: none !important;
opacity: 0.13 !important;
overflow: visible !important;
clip-path: none !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.rcs-header__brand-r9 .rcs-r9-logo-monogram svg {
width: 100% !important;
height: 100% !important;
display: block !important;
/* Preserve aspect ratio so RC doesn't stretch */
preserveAspectRatio: xMidYMid meet !important;
}
.rcs-header__brand-r9 .rcs-r9-logo-monogram text {
font-family: 'Fraunces', Georgia, serif !important;
font-weight: 700 !important;
font-style: normal !important;
fill: none !important;
stroke: var(--rcs-primary, #6B1A2E) !important;
stroke-width: 1.2 !important;
letter-spacing: -0.04em !important;
}
/* On small screens (< 360px) hide monogram so wordmark fits */
@media (max-width: 359px) {
.rcs-header__brand-r9 .rcs-r9-logo-monogram { display: none !important; }
.rcs-header__brand-r9 .rcs-r9-logo-wm { font-size: 20px !important; }
}
/* End Round 10.2 */
/* SECTION 51. ROUND 10.2 — "Unable to load bag" universal kill
* Hide any element whose text content matches, replace with friendly msg
*/
.rcs-mini-cart .rcs-mini-cart__body:has(:not(.rcs-mini-cart__item)),
.rcs-mini-cart__inner:empty::before {
content: "Your bag is loading…" !important;
font-family: 'Fraunces', Georgia, serif !important;
font-style: italic !important;
color: rgba(60,50,40,.65) !important;
padding: 40px 20px !important;
display: block !important;
text-align: center !important;
}
/* Direct text-replacement via pseudo for the error string */
.rcs-bag-error,
.rcs-cart-loading,
.rcs-mini-cart__error,
.rcs-bag-loader,
*[class*="bag"][class*="error"],
*[class*="cart"][class*="loading"] {
font-size: 0 !important;
}
.rcs-bag-error::before,
.rcs-cart-loading::before,
.rcs-mini-cart__error::before,
.rcs-bag-loader::before {
content: "Your bag is quiet — start browsing the boutique." !important;
font-size: 16px !important;
font-family: 'Fraunces', Georgia, serif !important;
font-style: italic !important;
color: rgba(60,50,40,.65) !important;
display: block !important;
padding: 40px 20px !important;
text-align: center !important;
line-height: 1.5 !important;
}
/* End Round 10.2b */
/* SECTION 52. ROUND 10.3 — Header grid fix: cart icon was clipped off right edge */
.rcs-header__inner,
.rcs-header__inner.rcs-container {
display: grid !important;
grid-template-columns: 40px 1fr 40px 40px !important;
grid-template-areas: "menu brand search cart" !important;
align-items: center !important;
gap: 2px !important;
padding-inline: 6px !important;
max-width: 100vw !important;
box-sizing: border-box !important;
}
.rcs-header__menu, .rcs-header__search, .rcs-header__cart {
width: 40px !important;
height: 40px !important;
}
.rcs-header__brand-r9,
.rcs-header__brand-wrap,
.rcs-header__brand {
grid-area: brand !important;
justify-self: center !important;
min-width: 0 !important;
max-width: 100% !important;
width: auto !important;
overflow: visible !important;
padding: 0 !important;
}
.rcs-header__brand-r9 .rcs-r9-logo-wm {
font-size: clamp(16px, 4.6vw, 22px) !important;
}
/* End Round 10.3 */
/* SECTION 53. ROUND 10.4 — Drawer support BOTH theme [data-open] AND R10 .is-open */
.rcs-drawer,
#rcs-drawer {
position: fixed !important;
top: 0 !important; left: 0 !important;
width: 80% !important; max-width: 320px !important;
height: 100vh !important;
background: var(--rcs-canvas, #FAF6F0) !important;
z-index: 100 !important;
transform: translateX(-100%) !important;
transition: transform 320ms cubic-bezier(.22, 1, .36, 1) !important;
overflow-y: auto !important;
box-shadow: 8px 0 24px rgba(0, 0, 0, 0.16) !important;
visibility: visible !important;
opacity: 1 !important;
}
/* OPEN STATE — support BOTH selectors */
.rcs-drawer.is-open,
.rcs-drawer[data-open="true"],
#rcs-drawer.is-open,
#rcs-drawer[data-open="true"] {
transform: translateX(0) !important;
}
.rcs-drawer__scrim,
.rcs-drawer .rcs-drawer__scrim {
position: fixed !important;
inset: 0 !important;
background: rgba(28, 26, 25, 0.42) !important;
backdrop-filter: blur(6px) !important;
-webkit-backdrop-filter: blur(6px) !important;
z-index: 99 !important;
opacity: 0 !important;
pointer-events: none !important;
transition: opacity 280ms ease !important;
}
.rcs-drawer.is-open .rcs-drawer__scrim,
.rcs-drawer[data-open="true"] .rcs-drawer__scrim,
#rcs-drawer.is-open .rcs-drawer__scrim,
#rcs-drawer[data-open="true"] .rcs-drawer__scrim {
opacity: 1 !important;
pointer-events: auto !important;
}
.rcs-drawer__panel {
position: relative !important;
background: var(--rcs-canvas, #FAF6F0) !important;
height: 100% !important;
overflow-y: auto !important;
z-index: 101 !important;
padding: 20px !important;
}
/* SECTION 54. ROUND 10.4 — Cart page "Unable to load bag" text replacement */
.woocommerce-cart .cart-empty.woocommerce-info,
.woocommerce-cart .cart-empty {
font-family: var(--rcs-font-display, 'Fraunces', serif) !important;
font-style: italic !important;
font-size: 1.1rem !important;
color: rgba(60, 50, 40, 0.7) !important;
text-align: center !important;
padding: 60px 24px !important;
background: transparent !important;
border: 0 !important;
}
/* End Round 10.4 */
/* SECTION 55. ROUND 10.5 — Drawer bottom CTAs visible (no crop) */
.rcs-drawer__panel,
#rcs-drawer .rcs-drawer__panel {
display: flex !important;
flex-direction: column !important;
height: 100% !important;
padding: 20px 20px max(20px, env(safe-area-inset-bottom)) !important;
overflow-y: auto !important;
}
.rcs-drawer__cta,
#rcs-drawer .rcs-drawer__cta {
margin-top: auto !important;
padding-top: 20px !important;
position: sticky !important;
bottom: 0 !important;
background: linear-gradient(180deg, transparent 0%, var(--rcs-canvas, #FAF6F0) 24px, var(--rcs-canvas, #FAF6F0) 100%) !important;
padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
z-index: 5 !important;
}
.rcs-drawer__cta .rcs-btn,
#rcs-drawer .rcs-drawer__cta .rcs-btn,
.rcs-drawer__cta a.rcs-btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 48px !important;
border-radius: 999px !important;
margin-top: 10px !important;
padding: 0 18px !important;
font-weight: 600 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
font-size: 13px !important;
text-decoration: none !important;
gap: 8px !important;
box-sizing: border-box !important;
}
.rcs-drawer__cta .rcs-btn:first-child,
#rcs-drawer .rcs-drawer__cta .rcs-btn:first-child {
background: var(--rcs-primary, #6B1A2E) !important;
color: #fff !important;
}
.rcs-drawer__cta .rcs-btn--ghost,
#rcs-drawer .rcs-drawer__cta .rcs-btn--ghost {
background: transparent !important;
color: var(--rcs-primary, #6B1A2E) !important;
border: 1.5px solid var(--rcs-primary, #6B1A2E) !important;
}
/* SECTION 56. ROUND 10.5 — Mini-cart from motion-v2.js — clean styling */
.rcs-minicart {
position: fixed !important;
inset: 0 !important;
z-index: 9999 !important;
pointer-events: none !important;
}
.rcs-minicart[data-open="true"] {
pointer-events: auto !important;
}
.rcs-minicart__scrim {
position: absolute !important;
inset: 0 !important;
background: rgba(28, 26, 25, 0.42) !important;
backdrop-filter: blur(4px) !important;
-webkit-backdrop-filter: blur(4px) !important;
opacity: 0 !important;
transition: opacity 280ms ease !important;
}
.rcs-minicart[data-open="true"] .rcs-minicart__scrim {
opacity: 1 !important;
}
.rcs-minicart__panel {
position: absolute !important;
right: 0 !important;
top: 0 !important;
width: 88% !important;
max-width: 380px !important;
height: 100% !important;
background: var(--rcs-canvas, #FAF6F0) !important;
transform: translateX(100%) !important;
transition: transform 320ms cubic-bezier(.22, 1, .36, 1) !important;
display: flex !important;
flex-direction: column !important;
box-shadow: -8px 0 24px rgba(0, 0, 0, 0.16) !important;
}
.rcs-minicart[data-open="true"] .rcs-minicart__panel {
transform: translateX(0) !important;
}
.rcs-minicart__head {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 18px 20px !important;
border-bottom: 1px solid var(--rcs-outline, rgba(28,26,25,.08)) !important;
}
.rcs-minicart__head h2 {
margin: 0 !important;
font-family: 'Fraunces', Georgia, serif !important;
font-style: italic !important;
font-size: 22px !important;
color: var(--rcs-text) !important;
}
.rcs-minicart__close {
width: 36px !important;
height: 36px !important;
border: 0 !important;
background: transparent !important;
cursor: pointer !important;
color: var(--rcs-text) !important;
font-size: 18px !important;
border-radius: 50% !important;
}
.rcs-minicart__items {
flex: 1 !important;
overflow-y: auto !important;
padding: 8px 20px !important;
}
.rcs-minicart__item {
display: flex !important;
gap: 12px !important;
padding: 14px 0 !important;
border-bottom: 1px solid var(--rcs-outline, rgba(28,26,25,.06)) !important;
}
.rcs-minicart__item img {
flex: 0 0 64px !important;
width: 64px !important;
height: 64px !important;
object-fit: cover !important;
border-radius: 8px !important;
background: var(--rcs-surface-2, #FFFCF6) !important;
}
.rcs-minicart__footer {
border-top: 1px solid var(--rcs-outline, rgba(28,26,25,.08)) !important;
padding: 16px 20px max(16px, env(safe-area-inset-bottom)) !important;
background: var(--rcs-surface, #FDF9F3) !important;
}
.rcs-minicart__footer .rcs-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: 48px !important;
border-radius: 999px !important;
background: var(--rcs-primary, #6B1A2E) !important;
color: #fff !important;
text-decoration: none !important;
font-weight: 600 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
font-size: 13px !important;
padding: 0 18px !important;
}
.rcs-minicart__footer .rcs-btn--ghost {
background: transparent !important;
color: var(--rcs-primary, #6B1A2E) !important;
border: 1.5px solid var(--rcs-primary, #6B1A2E) !important;
}
/* End Round 10.5 */
/* SECTION 57. ROUND 10.10 — Drawer CTAs clear bottom-nav (60px) + safe-area */
.rcs-drawer__panel,
#rcs-drawer .rcs-drawer__panel {
padding-bottom: calc(var(--rcs-bottom-nav-h, 60px) + env(safe-area-inset-bottom) + 32px) !important;
}
.rcs-drawer__cta,
#rcs-drawer .rcs-drawer__cta {
margin-bottom: calc(var(--rcs-bottom-nav-h, 60px) + env(safe-area-inset-bottom) + 16px) !important;
padding-bottom: 0 !important;
}
/* On mobile drawer, also clear room at very bottom */
@media (max-width: 768px) {
.rcs-drawer__panel {
padding-bottom: 120px !important;
}
.rcs-drawer__cta {
margin-bottom: 80px !important;
}
}
/* End R10.10 */
/* SECTION 58. ROUND 12.1 — Color swatch UI on PDP */
.variations,
.woocommerce-variation-add-to-cart {
margin: 18px 0 !important;
}
.variations table,
.variations tbody,
.variations tr,
.variations td {
display: block !important;
width: 100% !important;
border: 0 !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
}
.variations .label,
.variations label {
display: block !important;
font-family: var(--rcs-font-ui, 'Inter', system-ui) !important;
font-size: 12px !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
color: var(--rcs-text-muted) !important;
margin-bottom: 8px !important;
font-weight: 600 !important;
}
.variations .value {
display: block !important;
margin-bottom: 14px !important;
}
/* Hide native select, replace with swatches via JS */
.variations select {
display: none !important;
}
/* Custom swatch list — rendered by R12.1 JS */
.rcs-color-swatches {
display: flex !important;
flex-wrap: wrap !important;
gap: 10px !important;
margin: 6px 0 14px !important;
}
.rcs-color-swatch {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
padding: 8px 14px !important;
border: 1.5px solid var(--rcs-outline-strong, rgba(28,26,25,0.18)) !important;
border-radius: 999px !important;
background: #fff !important;
cursor: pointer !important;
font-family: var(--rcs-font-ui, 'Inter', system-ui) !important;
font-size: 13px !important;
color: var(--rcs-text) !important;
transition: all 200ms cubic-bezier(.22, 1, .36, 1) !important;
user-select: none !important;
}
.rcs-color-swatch:hover {
border-color: var(--rcs-primary, #6B1A2E) !important;
transform: translateY(-1px) !important;
box-shadow: 0 4px 12px rgba(107, 26, 46, 0.12) !important;
}
.rcs-color-swatch.is-selected {
border-color: var(--rcs-primary, #6B1A2E) !important;
background: var(--rcs-primary, #6B1A2E) !important;
color: #fff !important;
}
.rcs-color-swatch__dot {
width: 18px !important;
height: 18px !important;
border-radius: 50% !important;
border: 1.5px solid rgba(0,0,0,0.1) !important;
flex-shrink: 0 !important;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3) !important;
}
.rcs-color-swatch.is-selected .rcs-color-swatch__dot {
border-color: rgba(255,255,255,0.6) !important;
}
/* Selected indicator */
.rcs-color-swatch.is-selected::after {
content: "✓" !important;
margin-left: 2px !important;
font-weight: 700 !important;
}
/* Reset variations link */
.reset_variations {
display: inline-block !important;
margin: 8px 0 !important;
font-size: 12px !important;
color: var(--rcs-text-muted) !important;
text-decoration: underline !important;
}
/* Variable add-to-cart container */
.woocommerce-variation-price {
font-family: var(--rcs-font-display, 'Fraunces', serif) !important;
font-size: 22px !important;
color: var(--rcs-text) !important;
margin: 8px 0 !important;
font-weight: 600 !important;
}
.woocommerce-variation-availability .stock {
font-size: 13px !important;
color: var(--rcs-success, #2E7D32) !important;
}
.woocommerce-variation-availability .out-of-stock {
color: var(--rcs-error, #BA1A1A) !important;
}
/* End Round 12.1 */
/* =====================================================================
* SECTION 59. ROUND 12.6 — PDP variations layout fix + drawer CTA polish
* ===================================================================== */
/* --- PDP: variations form proper layout --- */
.rcs-pdp .variations_form,
form.variations_form.rcs-pdp__actions {
display: block !important;
width: 100% !important;
margin: 18px 0 !important;
}
.rcs-pdp .variations,
form.variations_form .variations {
display: block !important;
width: 100% !important;
margin: 0 0 14px !important;
}
.rcs-pdp .variations table,
.rcs-pdp .variations tbody,
.rcs-pdp .variations tr {
display: block !important;
width: 100% !important;
border: 0 !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
}
.rcs-pdp .variations td,
.rcs-pdp .variations td.label,
.rcs-pdp .variations td.value {
display: block !important;
width: 100% !important;
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
}
.rcs-pdp .variations .label,
.rcs-pdp .variations .label label,
form.variations_form .variations .label label {
display: block !important;
font-family: var(--rcs-font-ui, Inter, system-ui) !important;
font-size: 11px !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: var(--rcs-text-muted, #6F6A66) !important;
margin: 0 0 8px !important;
font-weight: 600 !important;
}
.rcs-pdp .variations .value {
display: block !important;
margin: 0 0 14px !important;
}
/* Hide native select wherever it appears */
.rcs-pdp .variations select,
form.variations_form select {
display: none !important;
}
/* Color swatches: full width row, wrap freely */
.rcs-pdp .rcs-color-swatches,
form.variations_form .rcs-color-swatches {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
margin: 0 0 4px !important;
width: 100% !important;
}
.rcs-pdp .rcs-color-swatch,
form.variations_form .rcs-color-swatch {
flex: 0 1 auto !important;
padding: 8px 14px !important;
font-size: 13px !important;
min-height: 38px !important;
}
/* "Clear" reset link — small + subtle below swatches */
.rcs-pdp .variations .reset_variations,
form.variations_form .reset_variations {
display: inline-block !important;
font-size: 11px !important;
color: var(--rcs-text-muted, #6F6A66) !important;
text-decoration: underline !important;
margin: 4px 0 0 !important;
}
/* --- ATC button row — single line, full width --- */
.rcs-pdp .single_variation_wrap,
form.variations_form .single_variation_wrap {
display: block !important;
width: 100% !important;
margin-top: 14px !important;
}
.rcs-pdp .woocommerce-variation,
.rcs-pdp .single_variation,
form.variations_form .woocommerce-variation,
form.variations_form .single_variation {
margin-bottom: 10px !important;
}
.rcs-pdp .woocommerce-variation-availability,
form.variations_form .woocommerce-variation-availability {
margin: 6px 0 !important;
}
.rcs-pdp .woocommerce-variation-availability .stock,
form.variations_form .woocommerce-variation-availability .stock {
color: var(--rcs-success, #2E7D32) !important;
font-size: 13px !important;
margin: 0 !important;
}
.rcs-pdp .woocommerce-variation-add-to-cart,
form.variations_form .woocommerce-variation-add-to-cart,
form.variations_form .variations_button {
display: flex !important;
align-items: stretch !important;
gap: 10px !important;
width: 100% !important;
margin-top: 10px !important;
flex-wrap: nowrap !important;
}
.rcs-pdp form.variations_form .rcs-qty,
form.variations_form .rcs-qty {
flex: 0 0 96px !important;
max-width: 96px !important;
height: 50px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
border-radius: 999px !important;
border: 1px solid var(--rcs-outline-strong, rgba(28,26,25,.18)) !important;
background: #fff !important;
padding: 0 8px !important;
}
.rcs-pdp .single_add_to_cart_button,
form.variations_form .single_add_to_cart_button,
form.variations_form .rcs-pdp__atc {
flex: 1 1 auto !important;
width: auto !important;
min-width: 0 !important;
height: 50px !important;
line-height: 50px !important;
padding: 0 16px !important;
border-radius: 999px !important;
background: var(--rcs-primary, #6B1A2E) !important;
color: #fff !important;
font-weight: 600 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
font-size: 13px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
white-space: nowrap !important;
text-overflow: ellipsis !important;
overflow: hidden !important;
border: 0 !important;
}
.rcs-pdp .single_add_to_cart_button[disabled],
form.variations_form .single_add_to_cart_button[disabled],
form.variations_form .single_add_to_cart_button.disabled {
background: var(--rcs-primary, #6B1A2E) !important;
opacity: 0.45 !important;
cursor: not-allowed !important;
color: #fff !important;
}
.rcs-pdp .single_add_to_cart_button i,
form.variations_form .single_add_to_cart_button i {
font-size: 16px !important;
flex-shrink: 0 !important;
}
/* =====================================================================
* SECTION 60. ROUND 12.6 — Drawer CTAs pinned + visible + no overlap
* ===================================================================== */
#rcs-drawer .rcs-drawer__panel,
.rcs-drawer .rcs-drawer__panel {
display: flex !important;
flex-direction: column !important;
min-height: 100vh !important;
height: auto !important;
padding: 20px 20px 0 !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
}
/* Menu groups — natural flow */
#rcs-drawer .rcs-drawer__group,
.rcs-drawer .rcs-drawer__group {
flex: 0 0 auto !important;
margin-bottom: 14px !important;
}
/* CTA row — NOT sticky (it was getting trapped behind bottom-nav).
* Instead: ensure enough scroll space below + give it real bottom padding */
#rcs-drawer .rcs-drawer__cta,
.rcs-drawer .rcs-drawer__cta {
flex: 0 0 auto !important;
position: static !important;
margin: 24px 0 0 !important;
padding: 0 0 calc(var(--rcs-bottom-nav-h, 60px) + env(safe-area-inset-bottom) + 24px) !important;
background: transparent !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
}
#rcs-drawer .rcs-drawer__cta .rcs-btn,
.rcs-drawer .rcs-drawer__cta .rcs-btn,
#rcs-drawer .rcs-drawer__cta a,
.rcs-drawer .rcs-drawer__cta a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
width: 100% !important;
height: 48px !important;
line-height: 1 !important;
border-radius: 999px !important;
padding: 0 18px !important;
font-weight: 600 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
font-size: 13px !important;
text-decoration: none !important;
box-sizing: border-box !important;
margin: 0 !important;
}
#rcs-drawer .rcs-drawer__cta .rcs-btn:not(.rcs-btn--ghost),
.rcs-drawer .rcs-drawer__cta .rcs-btn:not(.rcs-btn--ghost) {
background: var(--rcs-primary, #6B1A2E) !important;
color: #fff !important;
border: 1.5px solid var(--rcs-primary, #6B1A2E) !important;
}
#rcs-drawer .rcs-drawer__cta .rcs-btn--ghost,
.rcs-drawer .rcs-drawer__cta .rcs-btn--ghost {
background: transparent !important;
color: var(--rcs-primary, #6B1A2E) !important;
border: 1.5px solid var(--rcs-primary, #6B1A2E) !important;
}
/* Last separator line removed so CTA group has breathing room */
#rcs-drawer .rcs-drawer__group:last-of-type {
border-bottom: 0 !important;
}
/* End Round 12.6 */
/* =====================================================================
* SECTION 61. ROUND 12.7 — Drawer FINAL — CTAs as fixed footer inside drawer
* Pin CTAs to drawer bottom (NOT outside) so they're always visible
* ===================================================================== */
#rcs-drawer .rcs-drawer__panel,
.rcs-drawer .rcs-drawer__panel {
display: flex !important;
flex-direction: column !important;
height: 100vh !important;
min-height: 100vh !important;
max-height: 100vh !important;
padding: 20px 20px 0 !important;
overflow: hidden !important; /* outer panel doesn't scroll */
}
#rcs-drawer .rcs-drawer__brand,
.rcs-drawer .rcs-drawer__brand {
flex: 0 0 auto !important;
}
/* Middle scrollable area for menu groups */
#rcs-drawer .rcs-drawer__groups-wrap,
#rcs-drawer .rcs-drawer__menu,
#rcs-drawer .rcs-drawer__panel > div:not(.rcs-drawer__cta):not(.rcs-drawer__brand):not(.rcs-drawer__close) {
flex: 1 1 auto !important;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch !important;
padding-bottom: 16px !important;
}
/* When groups are bare children (no wrapper), make them flow but allow scroll */
#rcs-drawer .rcs-drawer__group:not(:last-of-type) {
flex: 0 0 auto !important;
}
/* Pin CTA to bottom — flex auto-pushes it */
#rcs-drawer .rcs-drawer__cta,
.rcs-drawer .rcs-drawer__cta {
flex: 0 0 auto !important;
position: relative !important;
margin: 0 -20px 0 !important;
padding: 16px 20px calc(var(--rcs-bottom-nav-h, 60px) + env(safe-area-inset-bottom) + 16px) !important;
background: var(--rcs-canvas, #FAF6F0) !important;
border-top: 1px solid var(--rcs-outline, rgba(28,26,25,.08)) !important;
box-shadow: 0 -4px 12px rgba(28, 26, 25, 0.05) !important;
z-index: 5 !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
}
/* Belt-and-suspenders: scroll groups into available space */
#rcs-drawer .rcs-drawer__panel > .rcs-drawer__group,
.rcs-drawer .rcs-drawer__panel > .rcs-drawer__group {
flex-shrink: 0 !important;
}
/* End Round 12.7 */