(with a nested .e-n-accordion-item-title-text and .e-n-accordion-item-title-icon) and a sibling

holding the body content. */ .e-n-accordion{margin-top:28px;} .e-n-accordion-item{border-top:1px solid var(--line);} .e-n-accordion-item:last-child{border-bottom:1px solid var(--line);} .e-n-accordion-item summary{list-style:none;cursor:pointer;} .e-n-accordion-item summary::-webkit-details-marker{display:none;} .e-n-accordion-item-title{ padding:16px 0 !important;font-family:'Montserrat',sans-serif;font-size:12.5px; letter-spacing:.09em;text-transform:uppercase;font-weight:500;color:var(--ink); } .e-n-accordion-item-title-icon{color:var(--muted);} .e-n-accordion-item [role="region"]{padding:0 0 18px;font-size:13.5px;color:var(--muted);} .e-n-accordion-item [role="region"] p{margin:0;} /* ---------- Static bands (Italian-Loomed Wool / Why RSD / closing banner) -- these use generic Elementor widgets (Heading, Text Editor, Icon Box, Button), so most of their look can be set directly per-widget in Elementor's own Style tab rather than needing CSS here. The one thing worth doing in CSS is the closing banner's dark overlay, since a background image alone won't keep the text readable -- add the class "rsd-closer" to that Container in Elementor's Advanced > Custom CSS Class field to pick this up. ---------- */ .rsd-closer{ position:relative !important;min-height:310px;display:flex !important;flex-direction:column !important; align-items:center !important;justify-content:center !important; background:#2a1e14 url('https://i0.wp.com/rhondastarkdesigns.com/wp-content/uploads/2025/11/happy-fourth-july-celebration-background-usa-celebration-usa-flag-wooden-background-usa-day-e1762472926669.jpg?w=1600&quality=80&ssl=1') center 30%/cover no-repeat !important; } .rsd-closer::before{ content:"";position:absolute;inset:0; background:linear-gradient(90deg,rgba(30,22,16,.55) 0%,rgba(30,22,16,.15) 55%,rgba(30,22,16,.05) 100%); pointer-events:none; } .rsd-closer > .elementor-container{position:relative;z-index:1;} .rsd-closer h2{color:#fff !important;font-size:32px !important;} .rsd-closer p{color:#fff !important;font-size:16px !important;} /* "Italian-Loomed Wool" / "Why Rhonda Stark Designs" 2-column band -- confirmed 2026-07-31 this isn't actually built as 2 columns at all: the outer row has FOUR flat sibling widgets (Italian heading, paragraphs, Why-RSD heading, icon row), not two containers each holding their own heading+content. Forcing a CSS grid on the outer row and explicitly placing each sibling into the right grid cell reproduces the mockup's 2-column look without needing to physically restructure the widgets in Elementor. Element IDs are specific to this template's saved widgets. */ .elementor-element-1222411{ display:grid !important; grid-template-columns:0.85fr 1.15fr; column-gap:0; row-gap:10px; max-width:1400px !important;margin:0 auto !important; } /* Symmetric divider gutter: equal padding on both sides of the border-left line (47px each) instead of relying on the grid's column-gap, which put more space on one side of the divider than the other. Placement is by DOM position (nth-child), not Elementor's auto-generated element ID -- IDs change whenever a widget is deleted/recreated (bit us once already with the old icon widget). But nth-child itself isn't immune to a different kind of drift: confirmed 2026-08-01 that the outer row now has only 3 direct children, not 4 -- at some point "Why Rhonda Stark Designs" and the icon-row widget got nested together inside one shared container (.elementor-element-1384ce9, still happens to land on nth-child(3)) instead of staying flat siblings. That container defaults to flex-direction:row, so the heading and icons were sitting side by side instead of stacked, AND because it only occupied grid-row:1, that row's height/content needs no longer matched what column 1 needed there -- part of what was reading as a gap under "Italian-Loomed Wool". Fixed by forcing the shared container to stack its own two children vertically, and letting it span both grid rows (1/3) so its height doesn't get treated as row 1's alone. If the widget structure changes again, re-check this against the live DOM rather than assuming nth-child still lines up the same way. */ .elementor-element-1222411 > div:nth-child(1){grid-column:1;grid-row:1;padding-right:47px;} .elementor-element-1222411 > div:nth-child(2){grid-column:1;grid-row:2;padding-right:47px;} .elementor-element-1222411 > div:nth-child(2) p{text-align:left !important;line-height:1.7;margin:0 0 18px !important; font-size:14px !important;font-weight:400 !important;color:var(--muted) !important; font-family:'Montserrat',sans-serif !important;} .elementor-element-1222411 > div:nth-child(3){ grid-column:2;grid-row:1/3;border-left:1px solid var(--line);padding-left:47px; display:flex !important;flex-direction:column !important;gap:22px; width:100% !important; } /* Found 2026-08-02: an Elementor-auto-generated hash class on this element (.e-31ac745{width:50%}, confirmed via document.styleSheets) was capping it to half its own grid cell, so the "Why Rhonda Stark Designs" icon row below it (which itself correctly asks for width:100%) was only ever getting 100% of an already-halved container -- each of the 4 icons was squeezed into ~84px, causing "Crafted to Order" etc to wrap onto 6+ lines. Verified live: with this override each icon column gets ~184px instead. */ .elementor-element-1222411 > div:nth-child(3) .rsd-why{width:100%;} /* Replaces the 4 Icon Box widgets (deleted -- their Font Awesome icons weren't in this site's loaded icon subset, confirmed via inspecting the actual CSS, not just a caching issue) with one custom-HTML block using inline SVG icons instead, same technique already working for the homepage's trust badges. */ .rsd-why{display:flex;justify-content:center;width:100%;} .rsd-why-item{text-align:center;padding:0 22px;} .rsd-why-item:not(:first-child){border-left:1px solid var(--line);} .rsd-why-item svg{width:28px;height:28px;color:var(--brick);margin:0 auto 12px;display:block;} .rsd-why-item .t{font-family:'Cinzel',serif;font-weight:600;font-size:13px;color:var(--ink);margin-bottom:8px;} .rsd-why-item .s{font-family:'Montserrat',sans-serif;font-size:12.5px;color:var(--muted);line-height:1.55;max-width:150px;margin:0 auto;} /* Confirmed 2026-07-31 against the original mockup: "Italian-Loomed Wool" and "Why Rhonda Stark Designs" are meant to be small brick-red eyebrow-style labels with a short underline rule, NOT full-size headings -- these were built as plain large Heading widgets, so restyled down to match. */ .elementor-element-002cf01 .elementor-heading-title, .elementor-element-6da93a8 .elementor-heading-title{ font-size:13px !important;font-family:'Montserrat',sans-serif !important; color:var(--gold) !important;text-transform:uppercase;letter-spacing:.14em; font-weight:600 !important;text-align:left;position:relative;padding-bottom:14px; } .elementor-element-002cf01 .elementor-heading-title::after, .elementor-element-6da93a8 .elementor-heading-title::after{ content:"";position:absolute;left:0;bottom:0;width:44px;height:1px;background:var(--brick); } /* ---------- Standard product template tabs (Description/Reviews) -- for products that don't go through the custom 3-column Elementor build at all (throws, tumblers, barware, sale items, etc. -- anything without the fabric panel). Confirmed live 2026-08-27 via americana-minky-cuddle-throw: Porto's own responsive-tabs plugin hardcodes #tab-description/#tab-reviews to a plain white background and a near-white gray border-top (rgb(231,231,231)) regardless of the rest of the page -- body/#main/.summary on this same template are already correctly cream via the body.single-product #main rule at the top of this file, so the tab panel read as a stray unstyled white box. Scoped to body.single-product broadly (not any Elementor element ID) since #tab-description simply doesn't exist on the 3-column template, which uses .e-n-accordion instead -- no risk of this double-applying. Padding/layout left untouched (30px 0 15px, confirmed via computed styles), only background/text/border swapped to the site's own tokens. */ body.single-product .woocommerce-tabs .tab-content, body.single-product #tab-description, body.single-product #tab-reviews{ background:var(--paper) !important;color:var(--ink) !important; font-family:'Montserrat',sans-serif;font-size:13.5px;line-height:1.7; border-top:1px solid var(--line) !important; } body.single-product #tab-description p, body.single-product #tab-reviews p{color:var(--ink) !important;} /* ---------- Responsive: 3-column reflow (mirrors the mockup's breakpoints) ---------- The column widths/order themselves were set directly in Elementor's own responsive controls per docs/PRODUCT-PAGE-GUIDE.md Step 3 -- this is just typography scaling. */ @media(max-width:820px){ .product_title.entry-title{font-size:23px;} /* "Italian-Loomed Wool" / "Why Rhonda Stark Designs" band -- confirmed 2026-08-01 on a live phone screenshot: the desktop 2-column grid (see rule above, no max-width guard on it) was still forcing both columns side by side on a narrow screen. Below this width the whole band stacks into one column, in reading order (heading, paragraph, heading+icon-row container), and the icon row itself becomes a plain 2x2 grid instead of a 4-across flex row. Only 3 nth-child rules here now, matching the live 3-child DOM -- see the long comment on the base (non-mobile) nth-child(3) rule above for why. */ .elementor-element-1222411{ grid-template-columns:1fr !important; row-gap:8px; } .elementor-element-1222411 > div:nth-child(1){grid-column:1;grid-row:1;padding-right:0;} .elementor-element-1222411 > div:nth-child(2){grid-column:1;grid-row:2;padding-right:0;margin-bottom:28px;} .elementor-element-1222411 > div:nth-child(3){grid-column:1;grid-row:3;border-left:0;padding-left:0;} .rsd-why{display:grid !important;grid-template-columns:1fr 1fr;column-gap:18px;row-gap:26px;width:100%;} .rsd-why-item{border-left:0 !important;padding:0;} /* Main 3-column PDP layout (fabric panel | gallery | purchase info) -- confirmed 2026-08-01 on a live phone screenshot: this Elementor container never had a mobile breakpoint set, so it stayed flex-direction:row at every screen size, cramming all 3 columns into ~90-140px slivers each. That's what made "1. Select Your Signature Fabric" wrap onto 5 lines (a 21px heading in a 90px-wide column) and made the fabric swatch grid look like one narrow stacked column instead of the intended 2-across grid. Stacked full-width below this size, reordered so the product photo shows before the fabric choices (better mobile reading order than the desktop left-to-right DOM order). */ .elementor-element-c19746c{flex-direction:column !important;} .elementor-element-e5dd4da, .elementor-element-7eeb6e9, .elementor-element-b10f38a{ width:100% !important;flex-basis:100% !important;max-width:100% !important; } .elementor-element-7eeb6e9{order:1;} .elementor-element-e5dd4da{order:2;margin:28px 0;} .elementor-element-b10f38a{order:3;} } /* ============================================================ RHONDA STARK DESIGNS - CART PAGE STYLING Copy EVERYTHING in this file and paste it into: Appearance > Customize > Additional CSS ADD THIS AFTER everything else already in that box. Confirmed 2026-08-02 live on the Cart page: the underlying markup is standard WooCommerce cart classes (table.cart, .product-thumbnail, .product-name, .product-price, .product-quantity, .product-subtotal, .cart_totals, .coupon) with Porto's own Bootstrap-derived layer on top (.card, .card-sub-title, .wc-action-btn, .porto-radio) -- NOT the variation-swatches plugin's own markup like the PDP fights, so this page is much more predictable to style. Body class is body.woocommerce-cart. ============================================================ */ /* Same recurring #main white-background bug found on every other page this project -- Porto's #main has its own explicit white background sitting on top of the cream body background. */ body.woocommerce-cart #main{ background:var(--cream) !important; } /* ---------- Page title ---------- */ body.woocommerce-cart .page-title, body.woocommerce-cart h1.entry-title{ font-family:'Cinzel',serif !important;font-size:32px !important;color:var(--ink) !important; font-weight:600 !important;text-transform:none !important; } /* ---------- Free-shipping progress bar ("Add $X to cart and get free shipping!") ---------- */ body.woocommerce-cart .woocommerce-message, body.woocommerce-cart .wc-block-cart__free-shipping-bar, body.woocommerce-cart .cart-free-shipping-message{ background:var(--paper) !important;border:1px solid var(--line) !important;color:var(--ink) !important; font-family:'Montserrat',sans-serif !important;font-size:13px;border-radius:0 !important; padding:14px 18px !important; } /* ---------- Cart table ---------- */ body.woocommerce-cart table.cart{ border:1px solid var(--line) !important;border-collapse:collapse;width:100%; } body.woocommerce-cart table.cart thead th{ background:var(--paper) !important;border-bottom:1px solid var(--line) !important; font-family:'Montserrat',sans-serif !important;font-size:11.5px !important;font-weight:600 !important; letter-spacing:.1em;text-transform:uppercase !important;color:var(--muted) !important; padding:14px 12px !important; } body.woocommerce-cart table.cart td{ border-bottom:1px solid var(--line) !important;padding:16px 12px !important;vertical-align:middle; } body.woocommerce-cart table.cart tr.cart_item:last-child td{border-bottom:none !important;} body.woocommerce-cart td.product-thumbnail img{ width:80px !important;height:80px !important;object-fit:cover;border:1px solid var(--line); } body.woocommerce-cart td.product-name a{ font-family:'Cinzel',serif !important;font-size:15px !important;color:var(--ink) !important; font-weight:600 !important;text-decoration:none; } body.woocommerce-cart td.product-name a:hover{color:var(--brick) !important;} /* Fabric/Size selection lines under the product name */ body.woocommerce-cart td.product-name dl, body.woocommerce-cart td.product-name .variation{ font-family:'Montserrat',sans-serif !important;font-size:12px !important;color:var(--muted) !important; margin:6px 0 0 !important; } body.woocommerce-cart td.product-name dl dt{ font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:11px; display:inline;color:var(--ink) !important; } body.woocommerce-cart td.product-name dl dd{display:inline;margin:0;} body.woocommerce-cart td.product-name dl dd p{margin:0;display:inline;} body.woocommerce-cart td.product-price .amount, body.woocommerce-cart td.product-subtotal .amount{ font-family:'Cinzel',serif !important;font-size:15px !important;font-weight:700 !important; color:var(--brick) !important; } body.woocommerce-cart .quantity input.qty{ border:1.5px solid var(--line) !important;border-radius:0 !important;height:38px;width:60px; font-family:'Montserrat',sans-serif !important;font-size:13px;color:var(--ink) !important; text-align:center;background:#fff !important; } /* Remove ("x") link -- native icon font from Porto, just recolor it */ body.woocommerce-cart .remove.remove-product{ color:var(--muted) !important;font-size:18px !important; } body.woocommerce-cart .remove.remove-product:hover{color:var(--brick) !important;} /* ---------- Coupon field + button ---------- */ body.woocommerce-cart .coupon{ display:flex;gap:10px;flex-wrap:wrap;margin-top:20px; } body.woocommerce-cart .coupon .input-text{ border:1.5px solid var(--line) !important;border-radius:0 !important;padding:12px 14px; font-family:'Montserrat',sans-serif !important;font-size:13px;background:#fff !important; color:var(--ink) !important;min-width:200px; } body.woocommerce-cart .coupon button[name="apply_coupon"]{ background:#fff !important;color:var(--ink) !important;border:1.5px solid var(--line) !important; border-radius:0 !important;font-family:'Montserrat',sans-serif !important;font-size:11.5px !important; font-weight:600 !important;letter-spacing:.1em;text-transform:uppercase;padding:0 22px; } body.woocommerce-cart .coupon button[name="apply_coupon"]:hover{ border-color:var(--brick) !important;color:var(--brick) !important; } /* "Update cart" button (native WooCommerce, next to coupon on some layouts) */ body.woocommerce-cart button[name="update_cart"]{ background:var(--brick) !important;color:#fff !important;border:0 !important;border-radius:0 !important; font-family:'Montserrat',sans-serif !important;font-size:11.5px !important;font-weight:600 !important; letter-spacing:.1em;text-transform:uppercase;padding:0 24px;height:42px; } body.woocommerce-cart button[name="update_cart"]:hover{background:var(--brick-dark) !important;} /* ---------- Cart totals card ---------- */ body.woocommerce-cart .cart_totals .card, body.woocommerce-cart .cart-collaterals{ background:var(--paper) !important;border:1px solid var(--line) !important;border-radius:0 !important; box-shadow:none !important;padding:26px !important; } body.woocommerce-cart .cart_totals .card-sub-title{ font-family:'Cinzel',serif !important;font-size:16px !important;color:var(--ink) !important; font-weight:600 !important;letter-spacing:.04em;text-transform:none !important; border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:16px !important; } body.woocommerce-cart table.cart-total{width:100%;} body.woocommerce-cart table.cart-total th, body.woocommerce-cart table.cart-total td{ border:0 !important;padding:9px 0 !important;font-family:'Montserrat',sans-serif !important; font-size:13.5px;color:var(--ink) !important; } body.woocommerce-cart table.cart-total th h4{ font-family:'Montserrat',sans-serif !important;font-size:13.5px !important;font-weight:600 !important; margin:0 !important;color:var(--ink) !important; } body.woocommerce-cart table.cart-total tr.order-total th h4, body.woocommerce-cart table.cart-total tr.order-total .amount{ font-family:'Cinzel',serif !important;font-size:19px !important;font-weight:700 !important; color:var(--brick) !important; } body.woocommerce-cart table.cart-total tr.order-total{border-top:1px solid var(--line);} body.woocommerce-cart table.cart-total tr.order-total th, body.woocommerce-cart table.cart-total tr.order-total td{padding-top:14px !important;} /* ---------- Proceed to Checkout button -- same treatment as the PDP's Add to Cart ---------- Confirmed 2026-08-02: this site's real button here is NOT WooCommerce's default .checkout-button class at all -- Porto overrides the markup with its own .btn.btn-v-dark ("dark button variant") instead, which is why it was rendering plain black regardless of the .checkout-button rule below (that class simply never matched anything). Kept the old selector too in case a future WooCommerce/ Porto update reverts to the standard markup -- harmless if it never matches. */ body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button, body.woocommerce-cart .wc-proceed-to-checkout .btn{ background:var(--brick) !important;color:#fff !important;border:0 !important;border-radius:0 !important; font-family:'Montserrat',sans-serif !important;font-size:12.5px !important;font-weight:600 !important; letter-spacing:.15em !important;text-transform:uppercase !important;padding:16px 18px !important; width:100%;display:block;text-align:center;text-decoration:none;box-sizing:border-box; } body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover, body.woocommerce-cart .wc-proceed-to-checkout .btn:hover{background:var(--brick-dark) !important;color:#fff !important;} /* ============================================================ HEADER MINI-CART DROPDOWN Confirmed 2026-08-02: this is a completely separate component from the /cart/ page above -- it renders via the header cart icon on EVERY page (not just /cart/), so none of the body.woocommerce-cart-scoped rules above ever reached it. Real structure: .cart-popup.widget_shopping_cart > .widget_shopping_cart_content > .total-count (item count + View Cart) + ul.cart_list.product_list_widget (li.mini_cart_item per product, each with .product-image/.product-details/dl.variation) + .porto-free-shipping (Porto's own progress-bar widget) + .woocommerce-mini-cart__total + .woocommerce-mini-cart__buttons (View Cart + Checkout links). Not scoped to any body class since it can appear anywhere. ============================================================ */ .cart-popup.widget_shopping_cart{ background:#fff !important;border:1px solid var(--line) !important;box-shadow:0 8px 24px rgba(0,0,0,.12) !important; } .total-count{ font-family:'Montserrat',sans-serif !important;font-size:11.5px !important;font-weight:600 !important; letter-spacing:.1em;color:var(--ink) !important;border-bottom:1px solid var(--line) !important; padding-bottom:12px !important; } .total-count a{color:var(--brick) !important;text-decoration:none;font-weight:600 !important;} .total-count a:hover{color:var(--brick-dark) !important;} .cart_list.product_list_widget li.mini_cart_item{ border-bottom:1px solid var(--line) !important;padding:14px 0 !important; } .cart_list .product-image img{ width:64px !important;height:64px !important;object-fit:cover;border:1px solid var(--line); } .cart_list .remove.remove-product{color:var(--muted) !important;} .cart_list .remove.remove-product:hover{color:var(--brick) !important;} .cart_list .product-details{ font-family:'Cinzel',serif !important;font-size:13px !important;color:var(--ink) !important; font-weight:600 !important; } .cart_list .product-details .variation{ font-family:'Montserrat',sans-serif !important;font-size:11px !important;color:var(--muted) !important; margin:6px 0 !important; } .cart_list .product-details .variation dt{ font-weight:600;text-transform:uppercase;letter-spacing:.04em;display:inline;color:var(--ink) !important; } .cart_list .product-details .variation dd{display:inline;margin:0;} .cart_list .product-details .variation dd p{display:inline;margin:0;} .cart_list .product-details .quantity{ font-family:'Montserrat',sans-serif !important;font-size:12px !important;color:var(--brick) !important; font-weight:600 !important; } .porto-free-shipping{ background:var(--paper) !important;border:1px solid var(--line);padding:12px 14px !important;margin:10px 0 !important; } .porto-free-shipping-notice label{ font-family:'Montserrat',sans-serif !important;font-size:11.5px !important;color:var(--ink) !important; } .porto-free-shipping-notice i{color:var(--brick) !important;} .porto-free-shipping-bar{accent-color:var(--brick) !important;width:100%;} .porto-free-shipping-bar::-webkit-progress-value{background:var(--brick) !important;} .porto-free-shipping-bar::-moz-progress-bar{background:var(--brick) !important;} .woocommerce-mini-cart__total.total{ font-family:'Montserrat',sans-serif !important;font-size:13.5px !important;color:var(--ink) !important; border-top:1px solid var(--line);padding-top:12px !important; } .woocommerce-mini-cart__total .amount{ font-family:'Cinzel',serif !important;font-weight:700 !important;color:var(--brick) !important; } .woocommerce-mini-cart__buttons.buttons{display:flex !important;gap:10px;} .woocommerce-mini-cart__buttons a.button{ flex:1;text-align:center;font-family:'Montserrat',sans-serif !important;font-size:11px !important; font-weight:600 !important;letter-spacing:.1em;text-transform:uppercase;padding:12px 10px !important; border-radius:0 !important;text-decoration:none;box-sizing:border-box; } .woocommerce-mini-cart__buttons a.button:not(.checkout){ background:#fff !important;color:var(--ink) !important;border:1.5px solid var(--line) !important; } .woocommerce-mini-cart__buttons a.button:not(.checkout):hover{border-color:var(--brick) !important;color:var(--brick) !important;} .woocommerce-mini-cart__buttons a.button.checkout{ background:var(--brick) !important;color:#fff !important;border:0 !important; } .woocommerce-mini-cart__buttons a.button.checkout:hover{background:var(--brick-dark) !important;} /* ---------- Empty cart state ---------- */ body.woocommerce-cart .cart-empty, body.woocommerce-cart .woocommerce-info{ font-family:'Montserrat',sans-serif !important;font-size:15px;color:var(--muted) !important; text-align:center;background:none !important;border:0 !important;padding:40px 0 20px !important; } body.woocommerce-cart .return-to-shop .button, body.woocommerce-cart a.wc-backward{ background:var(--brick) !important;color:#fff !important;border:0 !important;border-radius:0 !important; font-family:'Montserrat',sans-serif !important;font-size:12px !important;font-weight:600 !important; letter-spacing:.12em;text-transform:uppercase;padding:14px 30px !important;display:inline-block; text-decoration:none; } body.woocommerce-cart .return-to-shop .button:hover, body.woocommerce-cart a.wc-backward:hover{background:var(--brick-dark) !important;} /* ---------- Cross-sells ("You may be interested in...") -- match PLP card typography ---------- */ body.woocommerce-cart .cross-sells h2{ font-family:'Cinzel',serif !important;font-size:20px !important;color:var(--ink) !important; font-weight:600 !important;margin-bottom:20px; } /* ============================================================ RHONDA STARK DESIGNS - CHECKOUT PAGE STYLING Copy EVERYTHING in this file and paste it into: Appearance > Customize > Additional CSS ADD THIS AFTER everything else already in that box. NOT LIVE-VERIFIED like the other page CSS files in this project -- WooCommerce redirects /checkout/ to /cart/ whenever the cart is empty, and every attempt to add a real item to cart through automation failed on a security nonce tied to a real logged-in browser session. Written from WooCommerce's standard, well-known checkout template classes (#customer_details, .woocommerce-billing-fields, #order_review, table.woocommerce-checkout-review-order-table, #place_order) plus the same Porto Bootstrap-derived layer already confirmed on the Cart page (.card, .card-sub-title, .btn-v-dark) -- but this file needs a real live check with an item actually in cart before trusting it fully. Body class should be body.woocommerce-checkout (standard WooCommerce), scoped the same way as body.woocommerce-cart in rsd-cart-styling.txt. ============================================================ */ body.woocommerce-checkout #main{ background:var(--cream) !important; } body.woocommerce-checkout .page-title, body.woocommerce-checkout h1.entry-title{ font-family:'Cinzel',serif !important;font-size:32px !important;color:var(--ink) !important; font-weight:600 !important;text-transform:none !important; } /* ---------- Section headings (Billing details / Order notes / Your order) ---------- */ body.woocommerce-checkout #customer_details h3, body.woocommerce-checkout .woocommerce-billing-fields h3, body.woocommerce-checkout #order_review_heading, body.woocommerce-checkout .card-sub-title{ font-family:'Cinzel',serif !important;font-size:16px !important;color:var(--ink) !important; font-weight:600 !important;letter-spacing:.04em;text-transform:none !important; border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:16px !important; } /* ---------- Form fields (billing/shipping address, order notes) ---------- */ body.woocommerce-checkout .woocommerce-input-wrapper input.input-text, body.woocommerce-checkout .woocommerce-input-wrapper textarea, body.woocommerce-checkout .woocommerce-input-wrapper select, body.woocommerce-checkout input.input-text, body.woocommerce-checkout select, body.woocommerce-checkout textarea{ border:1.5px solid var(--line) !important;border-radius:0 !important;padding:12px 14px !important; font-family:'Montserrat',sans-serif !important;font-size:13.5px;background:#fff !important; color:var(--ink) !important;width:100%;box-sizing:border-box;height:auto !important; } body.woocommerce-checkout .woocommerce-input-wrapper input.input-text:focus, body.woocommerce-checkout input.input-text:focus, body.woocommerce-checkout select:focus, body.woocommerce-checkout textarea:focus{ border-color:var(--gold) !important;outline:0 !important;box-shadow:none !important; } body.woocommerce-checkout label{ font-family:'Montserrat',sans-serif !important;font-size:12px !important;font-weight:600 !important; letter-spacing:.05em;text-transform:uppercase;color:var(--muted) !important;margin-bottom:6px !important; } /* ---------- Order review table (line items + totals) ---------- */ body.woocommerce-checkout table.woocommerce-checkout-review-order-table{ border:1px solid var(--line) !important;border-collapse:collapse;width:100%;background:var(--paper) !important; } body.woocommerce-checkout table.woocommerce-checkout-review-order-table thead th{ font-family:'Montserrat',sans-serif !important;font-size:11.5px !important;font-weight:600 !important; letter-spacing:.1em;text-transform:uppercase !important;color:var(--muted) !important; border-bottom:1px solid var(--line) !important;padding:12px !important; } body.woocommerce-checkout table.woocommerce-checkout-review-order-table td, body.woocommerce-checkout table.woocommerce-checkout-review-order-table th{ border-bottom:1px solid var(--line) !important;padding:12px !important; font-family:'Montserrat',sans-serif !important;font-size:13px;color:var(--ink) !important; } body.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name{ font-family:'Cinzel',serif !important;font-size:13.5px !important;color:var(--ink) !important;font-weight:600 !important; } /* Fabric/Size/Lined-Options line under the product name -- confirmed 2026-08-02 via live screenshot this needed its own explicit styling, not just inherited from .product-name above (was rendering low-contrast/hard to read). */ body.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name dl.variation{ font-family:'Montserrat',sans-serif !important;font-size:11.5px !important;color:var(--muted) !important; margin:6px 0 0 !important;line-height:1.7; } body.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name dl.variation dt{ font-weight:600 !important;text-transform:uppercase;letter-spacing:.04em;display:inline; color:var(--ink) !important; } body.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name dl.variation dd{ display:inline;margin:0 12px 0 0 !important; } body.woocommerce-checkout .woocommerce-checkout-review-order-table .product-name dl.variation dd p{ display:inline;margin:0; } /* Per-item price -- explicitly smaller than the order-total below (19px), confirmed 2026-08-02 via live screenshot these were rendering oddly large/inconsistent with the Subtotal/Shipping/Total summary rows without an explicit size here. */ body.woocommerce-checkout .woocommerce-checkout-review-order-table .amount{ font-family:'Cinzel',serif !important;font-weight:700 !important;color:var(--brick) !important; font-size:14px !important; } /* Shipping row -- NOT live-verified (same caveat as the rest of this file), written from the HTML structure confirmed on the Cart page's own shipping method (the same porto-radio/porto-control-label markup very likely renders here too, since both pull from the same WooCommerce shipping method template). The short underline Jess saw only under "Flat Rate: $19.95" specifically (not spanning the full row like Subtotal/Tax) is almost certainly a small default border/underline on Porto's own .porto-control-label element, separate from this row's actual bottom border -- reset directly rather than guessed away. */ body.woocommerce-checkout tr:has(#shipping_method) th, body.woocommerce-checkout tr:has(.woocommerce-shipping-methods) th{ border-bottom:1px solid var(--line) !important; } body.woocommerce-checkout tr:has(#shipping_method) h4, body.woocommerce-checkout tr:has(.woocommerce-shipping-methods) h4{ font-family:'Montserrat',sans-serif !important;font-size:12px !important;font-weight:600 !important; letter-spacing:.08em;text-transform:uppercase;color:var(--ink) !important;margin-bottom:10px !important; } body.woocommerce-checkout .woocommerce-shipping-methods .porto-control-label{ border:0 !important;text-decoration:none !important;box-shadow:none !important; font-family:'Montserrat',sans-serif !important;font-size:13px;color:var(--ink) !important; } body.woocommerce-checkout .woocommerce-shipping-methods .amount{ color:var(--brick) !important;font-weight:700 !important; } body.woocommerce-checkout .woocommerce-shipping-destination{ font-family:'Montserrat',sans-serif !important;font-size:12px;color:var(--muted) !important;margin:8px 0 0 !important; } body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total{border-top:1px solid var(--line);} body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total th, body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total td{ border-bottom:0 !important; } body.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total .amount{ font-size:19px !important; } /* ---------- Payment methods ---------- */ body.woocommerce-checkout ul.wc_payment_methods{ border:1px solid var(--line) !important;background:var(--paper) !important;padding:16px !important; } body.woocommerce-checkout ul.wc_payment_methods li.wc_payment_method label{ font-family:'Montserrat',sans-serif !important;font-size:13.5px !important;color:var(--ink) !important; text-transform:none;font-weight:600 !important;letter-spacing:0; } body.woocommerce-checkout .payment_box{ background:#fff !important;border:1px solid var(--line) !important;font-family:'Montserrat',sans-serif; font-size:12.5px;color:var(--muted) !important; } /* ---------- Place Order button -- same treatment as Add to Cart / Proceed to Checkout. Kept BOTH the standard #place_order class and Porto's likely .btn-v-dark override (confirmed on the Cart page's Proceed to Checkout button) since which one actually renders here hasn't been verified live yet. */ body.woocommerce-checkout #place_order, body.woocommerce-checkout button#place_order, body.woocommerce-checkout .place-order .btn{ background:var(--brick) !important;color:#fff !important;border:0 !important;border-radius:0 !important; font-family:'Montserrat',sans-serif !important;font-size:12.5px !important;font-weight:600 !important; letter-spacing:.15em !important;text-transform:uppercase !important;padding:16px 18px !important; width:100%;box-sizing:border-box; } body.woocommerce-checkout #place_order:hover, body.woocommerce-checkout .place-order .btn:hover{background:var(--brick-dark) !important;color:#fff !important;} /* ---------- Coupon toggle link (if shown above billing fields) ---------- */ body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info{ background:var(--paper) !important;border:1px solid var(--line) !important;color:var(--ink) !important; font-family:'Montserrat',sans-serif;font-size:13px;border-radius:0 !important; } body.woocommerce-checkout .woocommerce-form-coupon-toggle a{color:var(--brick) !important;font-weight:600;} /* ============================================================ RHONDA STARK DESIGNS - VISIT US PAGE STYLING Copy EVERYTHING in this file and paste it into: Appearance > Customize > Additional CSS ADD THIS AFTER everything else already in that box. Reuses existing site-wide classes/variables (--cream, --paper, --brick, --gold, --ink, --muted, --line, .eyebrow, .container, .btn, .trust*) -- nothing here should need to touch those. ============================================================ */ /* ---------- Page background ---------- */ .vs-hero, .vs-main{background:var(--cream);} /* ---------- Hero ---------- */ .vs-hero{padding:64px 24px 46px;text-align:center;} .vs-hero-in{max-width:640px;margin:0 auto;} .vs-hero .eyebrow{display:block;margin-bottom:10px;color:var(--gold);} .vs-hero h1{font-family:'Cinzel',serif;font-size:52px;color:var(--ink);margin:6px 0 18px;font-weight:600;} .vs-hero p{font-size:15px;color:var(--muted);line-height:1.7;max-width:520px;margin:0 auto;} /* ---------- Two-column layout ---------- */ .vs-main{padding:50px 0 0;} .vs-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;} /* Temporary: hide a column (add "vs-hidden" to it in Elementor's Advanced > CSS Classes) and add "vs-solo" to the .vs-grid container itself to collapse to a single centered column instead of leaving an empty gap. Remove both classes once the Retail Partners content is ready. */ .vs-hidden{display:none !important;} .vs-grid.vs-solo{grid-template-columns:1fr;max-width:640px;margin:0 auto;} .vs-col-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:6px;} .vs-col-head svg{width:30px;height:30px;color:var(--gold);flex:none;margin-top:2px;} .vs-col-head .eyebrow{color:var(--gold);} .vs-col-head h2{font-family:'Cinzel',serif;font-size:26px;color:var(--ink);margin:4px 0 0;font-weight:600;} .vs-col-sub{font-size:13.5px;color:var(--muted);margin:14px 0 30px;line-height:1.6;} /* ---------- Shows timeline ---------- */ .vs-timeline{position:relative;} .vs-tl-row{display:grid;grid-template-columns:80px 20px 1fr;column-gap:16px;position:relative;padding-bottom:26px;} .vs-tl-row.vs-tl-last{padding-bottom:0;} .vs-tl-date{display:flex;flex-direction:column;line-height:1.15;} .vs-tl-date .mon{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--gold);text-transform:uppercase;} .vs-tl-date .d{font-family:'Cinzel',serif;font-size:19px;color:var(--ink);margin-top:2px;} .vs-tl-dot{position:relative;display:flex;justify-content:center;} .vs-tl-dot::before{content:"";position:absolute;top:6px;width:9px;height:9px;border-radius:50%;background:var(--gold);border:2px solid var(--cream);box-shadow:0 0 0 1px var(--gold);} .vs-tl-row:not(.vs-tl-last) .vs-tl-dot::after{content:"";position:absolute;top:18px;bottom:-26px;width:1px;background:var(--line);} .vs-tl-info{border-bottom:1px solid var(--line);padding-bottom:22px;} .vs-tl-row.vs-tl-last .vs-tl-info{border-bottom:0;padding-bottom:0;} .vs-tl-info .nm{font-family:'Cinzel',serif;font-size:16px;color:var(--ink);margin-bottom:4px;} .vs-tl-info .venue,.vs-tl-info .loc{font-size:12.5px;color:var(--muted);} .vs-tl-info .booth{display:inline-block;margin-top:6px;font-family:'Montserrat',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);} .vs-tl-year{display:flex;align-items:center;gap:10px;margin:2px 0 18px;padding-left:116px;} .vs-tl-year::after{content:"";flex:1;height:1px;background:var(--line);} .vs-tl-year span{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--gold);text-transform:uppercase;white-space:nowrap;} .vs-tl-year-first{margin-top:-4px;} /* ---------- Retail partners panel ---------- */ .vs-partners-panel{background:var(--paper);border:1px solid var(--line);border-radius:3px;padding:26px;} .vs-stat{text-align:center;font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:18px;} .vs-stat .num{font-family:'Cinzel',serif;font-size:24px;color:var(--gold);font-weight:700;padding:0 2px;} .vs-states{border-top:1px solid var(--line);} .vs-state{border-bottom:1px solid var(--line);} .vs-state summary{list-style:none;cursor:pointer;padding:14px 4px;font-family:'Montserrat',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);display:flex;justify-content:space-between;align-items:center;} .vs-state summary::-webkit-details-marker{display:none;} .vs-state summary::after{content:"+";font-size:17px;color:var(--muted);font-weight:400;} .vs-state[open] summary::after{content:"\2212";} .vs-state-body{padding:0 4px 18px;} .vs-soon{font-size:12.5px;color:var(--muted);font-style:italic;margin:0;} .vs-partner{display:grid;grid-template-columns:90px 1fr;gap:14px;background:#fff;border:1px solid var(--line);border-radius:3px;padding:16px;} .vs-partner + .vs-partner{margin-top:12px;} .vs-partner-city{font-family:'Cinzel',serif;font-size:12px;font-style:italic;color:var(--gold);} .vs-partner-info .nm{font-family:'Cinzel',serif;font-size:15px;color:var(--ink);margin-bottom:4px;} /* ---------- Wholesale banner ---------- */ .vs-wholesale{display:grid;grid-template-columns:220px 1fr auto;align-items:center;gap:28px; background:var(--paper);border:1px solid var(--line);border-radius:3px;padding:20px;margin:50px 0 0;} .vs-wholesale-photo{aspect-ratio:16/10;background:var(--cream-2);border-radius:3px;overflow:hidden;} .vs-wholesale-photo img{width:100%;height:100%;object-fit:cover;display:block;} .vs-wholesale-copy h3{font-family:'Cinzel',serif;font-size:21px;color:var(--ink);line-height:1.3;margin:0 0 8px;font-weight:600;} .vs-wholesale-copy p{font-size:13px;color:var(--muted);margin:0;line-height:1.6;} .vs-wholesale-btn{background:#fff;color:var(--gold);border:1.5px solid var(--gold);white-space:nowrap;} .vs-wholesale-btn:hover{background:var(--gold);color:#fff;} /* ---------- Responsive ---------- */ @media(max-width:900px){ .vs-hero h1{font-size:38px;} .vs-grid{grid-template-columns:1fr;gap:46px;} .vs-wholesale{grid-template-columns:1fr;text-align:center;} .vs-wholesale-photo{max-width:280px;margin:0 auto;} } @media(max-width:520px){ .vs-tl-row{grid-template-columns:64px 16px 1fr;column-gap:10px;} .vs-tl-year{padding-left:90px;} .vs-partner{grid-template-columns:1fr;} } /* ============================================================ RHONDA STARK DESIGNS - CONTACT US PAGE STYLING Copy EVERYTHING in this file and paste it into: Appearance > Customize > Additional CSS ADD THIS AFTER everything else already in that box. Reuses existing site-wide classes/variables (--cream, --paper, --brick, --gold, --ink, --muted, --line, .eyebrow, .container) -- nothing here should need to touch those. ============================================================ */ /* ---------- Page background (same full-width fix as the other pages) ---------- */ body.elementor-template-full-width #main{background:transparent;} .ct-hero,.ct-main{background:var(--cream);} /* ---------- Decorative rule (gold line + small rotated diamond) -- reused under the hero heading and each column heading for a bit of visual flourish, matching the diamond-accent style used in the original design mockups but not yet ported to any live page. ---------- */ .ct-rule{width:52px;height:1px;background:var(--gold);margin:16px auto 0;position:relative;} .ct-rule::after{content:"";position:absolute;left:50%;top:-2px;width:5px;height:5px; background:var(--brick);transform:translateX(-50%) rotate(45deg);} .ct-col .ct-rule, .ct-form-panel .ct-rule{margin:16px 0 0;} .ct-col .ct-rule::after, .ct-form-panel .ct-rule::after{left:0;transform:rotate(45deg);} /* ---------- Hero ---------- */ .ct-hero{padding:64px 24px 46px;text-align:center;position:relative;} .ct-hero::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%); width:120px;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);} .ct-hero-in{max-width:600px;margin:0 auto;} .ct-hero .eyebrow{display:block;margin-bottom:10px;color:var(--gold);} .ct-hero h1{font-family:'Cinzel',serif;font-size:52px;color:var(--ink);margin:6px 0 0;font-weight:600;} .ct-hero .ct-rule{margin:18px auto 22px;} .ct-hero p{font-size:15px;color:var(--muted);line-height:1.7;max-width:480px;margin:0 auto;} /* ---------- Two-column layout ---------- */ .ct-main{padding:20px 0 70px;} .ct-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;} /* Shared card box for BOTH columns -- add class "ct-card" directly to each Elementor Column itself (Advanced tab > CSS Classes), same way "ct-form-panel" was added to the form column. Confirmed 2026-07-31 the two columns are actually equal width (600px each) at the Elementor Column level; the visual mismatch was double-padding on the left (Elementor's own column padding PLUS ct-col's own padding stacking, since ct-col sits one level deeper inside an HTML widget wrapper) vs single padding on the right (ct-form-panel applied straight to the column). Putting the box styling on the column itself for both sides removes the extra nested layer. */ .ct-card{ background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--gold); border-radius:3px;padding:34px;height:100%;box-sizing:border-box; box-shadow:0 4px 18px rgba(44,40,35,.05); } .ct-col .eyebrow, .ct-form-panel .eyebrow{color:var(--gold);} .ct-col h2{font-family:'Cinzel',serif;font-size:28px;color:var(--ink);margin:6px 0 0;font-weight:600;} .ct-intro{font-size:13.5px;color:var(--muted);line-height:1.7;margin:22px 0 30px;} /* ---------- Contact details ---------- */ .ct-details{display:flex;flex-direction:column;gap:22px;} .ct-detail{display:flex;align-items:flex-start;gap:16px;min-height:54px;} .ct-detail svg{width:26px;height:26px;color:var(--brick);flex:none;margin-top:2px;} .ct-detail .t{font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin-bottom:4px;} .ct-detail .s{font-size:14px;color:var(--muted);line-height:1.5;} .ct-detail .s a{color:var(--muted);text-decoration:none;} .ct-detail .s a:hover{color:var(--brick);} /* ---------- Form panel ---------- */ .ct-form-panel{ background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--gold); border-radius:3px;padding:34px;height:100%;box-sizing:border-box; box-shadow:0 4px 18px rgba(44,40,35,.05); } .ct-form-panel h2{margin-top:0;} /* Contact Form 7 on this site renders through Porto's own Bootstrap-style markup (

...

), not the plain default CF7 output -- confirmed 2026-07-31 by inspecting the live form. The .form-group.col-lg-6 columns need their Bootstrap width neutralized since this narrower sidebar panel isn't the wide layout Bootstrap's grid assumes; otherwise fields render far narrower than the panel (confirmed ~220px). */ .ct-form-panel .wpcf7-form{margin-top:8px;} .ct-form-panel .wpcf7-form .row{display:block !important;margin:0 !important;} .ct-form-panel .wpcf7-form .form-group{ width:100% !important;flex:0 0 100% !important;max-width:100% !important; margin:0 0 18px !important;padding:0 !important; } .ct-form-panel .wpcf7-form label, .ct-form-panel .wpcf7-form .form-label{ display:block !important;font-family:'Montserrat',sans-serif !important;font-size:11px !important; font-weight:700 !important;letter-spacing:.08em;text-transform:uppercase;color:var(--ink) !important; margin-bottom:8px !important; } .ct-form-panel .wpcf7-form-control-wrap{display:block;width:100%;} .ct-form-panel .wpcf7-form-control{ display:block !important;width:100% !important;box-sizing:border-box; font-family:'Montserrat',sans-serif;font-size:13.5px;color:var(--ink); background:#fff;border:1.5px solid var(--line) !important;border-radius:0;padding:12px 14px; } .ct-form-panel .wpcf7-form-control:focus{outline:none;border-color:var(--brick) !important;} .ct-form-panel textarea.wpcf7-form-control{min-height:130px;resize:vertical;} .ct-form-panel .wpcf7-submit{ display:inline-block;background:var(--brick) !important;color:#fff !important; font-family:'Montserrat',sans-serif;font-size:12.5px;font-weight:600;letter-spacing:.15em; text-transform:uppercase;padding:15px 34px;border:0 !important;border-radius:0;cursor:pointer;width:auto !important; } .ct-form-panel .wpcf7-submit:hover{background:var(--brick-dark,#822a20) !important;} .ct-form-panel .wpcf7-spinner{margin-left:12px;} .ct-form-panel .wpcf7-response-output{ margin:18px 0 0 !important;border-radius:0;font-size:12.5px;padding:12px 14px !important; } /* ---------- Responsive ---------- */ @media(max-width:900px){ .ct-hero h1{font-size:38px;} .ct-grid{grid-template-columns:1fr;gap:46px;} } /* ============================================================ RHONDA STARK DESIGNS - FABRICS PAGE STYLING Copy EVERYTHING in this file and paste it into: Appearance > Customize > Additional CSS ADD THIS AFTER everything else already in that box. Reuses existing site-wide classes/variables (--cream, --paper, --brick, --gold, --ink, --muted, --line, .eyebrow, .container, .ct-rule) -- nothing here should need to touch those. ============================================================ */ /* ---------- Page background (same full-width fix as the other pages) ---------- */ body.elementor-template-full-width #main{background:transparent;} .fb-hero,.fb-main{background:var(--cream);} /* ---------- Hero ---------- */ .fb-hero{padding:64px 24px 46px;text-align:center;} .fb-hero-in{max-width:640px;margin:0 auto;} .fb-hero .eyebrow{display:block;margin-bottom:10px;color:var(--gold);} .fb-hero h1{font-family:'Cinzel',serif;font-size:52px;color:var(--ink);margin:6px 0 0;font-weight:600;} .fb-hero .ct-rule{margin:18px auto 22px;} .fb-hero p{font-size:15px;color:var(--muted);line-height:1.7;max-width:520px;margin:0 auto;} /* ---------- Main ---------- */ .fb-main{padding:10px 0 70px;} .fb-disclaimer{font-size:12px;font-style:italic;color:var(--muted);text-align:center; max-width:720px;margin:0 auto 50px;line-height:1.6;} .fb-section-head{text-align:center;margin-bottom:30px;} .fb-section-head-2{margin-top:64px;} .fb-section-head .eyebrow{color:var(--gold);} .fb-section-head h2{font-family:'Cinzel',serif;font-size:28px;color:var(--ink);margin:6px 0 0;font-weight:600;} /* ---------- Swatch grid (same visual language as the PDP fabric panel's swatches, scaled up for a standalone reference gallery) ---------- */ .fb-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:22px 16px;} .fb-sw{text-align:center;} .fb-chip{aspect-ratio:1/1;border:1.5px solid var(--line);border-radius:2px;overflow:hidden; background:var(--cream-2);box-shadow:0 1px 5px rgba(0,0,0,.04);transition:border-color .2s ease; position:relative;} .fb-chip img{width:100%;height:100%;object-fit:cover;display:block;} .fb-sw:hover .fb-chip{border-color:var(--gold);} .fb-nm{font-family:'Cinzel',serif;font-size:11.5px;font-weight:600;letter-spacing:.03em; color:var(--ink);margin-top:9px;line-height:1.3;} /* ---------- Sold Out stamp -- rsd_sold_out_fabrics() in rsd-fabric-swatches.php drives which fabrics get this; visual only, doesn't touch the product-page fabric selector. Photo desaturated + dimmed rather than fully hidden, so the pattern is still visible for reference -- consistent with the rest of the site's restrained, non-sticker-like badge language (.rsd-badge on the PLP). ---------- */ .fb-sw-soldout .fb-chip img{filter:grayscale(1) brightness(.75);} .fb-stamp{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; background:rgba(20,15,11,.35); font-family:'Montserrat',sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:#fff;text-align:center;} .fb-stamp span{border:1px solid rgba(255,255,255,.7);padding:6px 14px;} .fb-sw-soldout:hover .fb-chip{border-color:var(--line);} /* ---------- Zoom lightbox ---------- */ .fb-lb{position:fixed;inset:0;background:rgba(20,15,11,.93);display:none; align-items:center;justify-content:center;flex-direction:column;z-index:9999;padding:40px;} .fb-lb.open{display:flex;} .fb-lb img{max-width:min(90vw,520px);max-height:70vh;object-fit:contain; box-shadow:0 10px 46px rgba(0,0,0,.55);border-radius:2px;} .fb-lb-caption{margin-top:18px;font-family:'Cinzel',serif;font-size:15px;color:#fff;letter-spacing:.04em;} .fb-lb-close{position:absolute;top:20px;right:26px;width:42px;height:42px;border:0;border-radius:50%; background:rgba(255,255,255,.15);color:#fff;font-size:18px;line-height:1;cursor:pointer;} .fb-lb-close:hover{background:rgba(255,255,255,.28);} /* ---------- Responsive ---------- */ @media(max-width:1100px){ .fb-grid{grid-template-columns:repeat(5,1fr);} } @media(max-width:900px){ .fb-hero h1{font-size:38px;} .fb-grid{grid-template-columns:repeat(4,1fr);} } @media(max-width:640px){ .fb-grid{grid-template-columns:repeat(3,1fr);gap:16px 12px;} } @media(max-width:420px){ .fb-grid{grid-template-columns:repeat(2,1fr);} } /* ============================================================ RHONDA STARK DESIGNS - SITE HEADER & FOOTER STYLING Copy EVERYTHING in this file and paste it into: Appearance > Customize > Additional CSS ADD THIS AFTER everything else already in that box. Both the header and footer are Elementor Theme Builder templates (not page-pasted content like the other sections), confirmed 2026-07-31 by inspecting the live site: - Header background is already the site's cream (#f4efe6), but the nav links are white -- nearly invisible against it. - Footer background is already close to the site's charcoal, but the heading text ("Let's Get Social:", "Quick Links", "Join Our Newsletter") is dark gray (#444) on that dark background -- also very low contrast -- and uses the site's default Kaisei Tokumin font instead of Cinzel like every other heading on the site. ============================================================ */ /* ---------- Mobile speed: Font Awesome font-display ---------- PageSpeed Insights flagged Porto's own Font Awesome @font-face (fa-solid-900.woff2) as using font-display:block, confirmed live via document.styleSheets -- that's a ~100ms LCP-adjacent cost from Chrome hiding text using this font until the file loads, worth avoiding for a handful of small UI icons. Re-declaring the exact same family/weight/style/src with font-display:swap -- browsers use the last-declared @font-face matching a given family/weight/style, so this wins without needing to touch Porto's own theme files. */ @font-face{ font-family:"Font Awesome 6 Free";font-weight:900;font-style:normal;font-display:swap; src:url("/wp-content/themes/porto/fonts/fontawesome_optimized/fa-solid-900.woff2") format("woff2"), url("/wp-content/themes/porto/fonts/fontawesome_optimized/fa-solid-900.ttf") format("truetype"); } /* ---------- Accessibility: breadcrumb contrast ---------- Porto's default breadcrumb ("Home > Shop" under the page title) uses a flat theme gray (#777) never overridden by us -- confirmed live via computed style it only hits 3.9:1 contrast against the cream background, short of the 4.5:1 AA minimum. Swapped for --muted, the same warm brown already used for secondary text everywhere else on the site (passes ~7:1 against cream/paper), so it both fixes contrast and stops looking like an unstyled theme leftover. */ .breadcrumb, .breadcrumb a, .breadcrumb li{color:var(--muted) !important;} /* ---------- Accessibility: gold text on light backgrounds ---------- Every place var(--gold) is used as TEXT color on the cream/paper background -- eyebrow kicker labels (Home, About, Contact, Fabrics, Visit Us), Visit Us's timeline month/booth/year labels and stat numbers, the wholesale partner-city credit, the wholesale button, and the PDP's "Product Details/Care" section labels -- confirmed only ~2.9:1 contrast, short of the 4.5:1 AA minimum (the stat numbers are large/bold enough to only need 3:1, and still barely fail that). Deliberately NOT changing the --gold variable itself, since that would also dull every purely decorative gold accent (hero arrow, section-rule divider bars, the oversized quote-mark, hover-state colors) that isn't subject to text contrast rules and looks better staying bright. This override only touches actual persistent label/link text, using a deeper bronze-gold from the same hue family (passes ~6.6:1) so it still reads as "gold," just legible. */ .eyebrow, .ab-eyebrow, .vs-tl-date .mon, .vs-tl-info .booth, .vs-tl-year span, .vs-stat .num, .vs-partner-city, .vs-wholesale-btn, .elementor-element-002cf01 .elementor-heading-title, .elementor-element-6da93a8 .elementor-heading-title{ color:#6e5430 !important; } .vs-wholesale-btn{border-color:#6e5430 !important;} /* Exception: .shows-panel .eyebrow ("WHERE YOU CAN FIND US" on the homepage's dark brick-red "Upcoming Shows" panel) got swept up by the !important rule above even though it was never the problem -- it's already a light color (#f4d9c9) chosen for a DARK background, not gold text on a light one. The dark bronze made it nearly invisible against the dark red panel. Restoring its original light color. */ .shows-panel .eyebrow{color:#f4d9c9 !important;} .breadcrumb a:hover{color:var(--brick) !important;} /* ---------- Accessibility utility: visually-hidden text ---------- Used to give the two newsletter forms (footer + homepage banner) real, unique / text for screen readers without changing how they look -- fixes the accessibility scan's "Unclear Form Labels" / "Duplicate Fieldset Label" findings, which were caused by both forms being identical copies of the same Contact Form 7 form (id 1546). */ .sr-only{ position:absolute !important;width:1px !important;height:1px !important; padding:0 !important;margin:-1px !important;overflow:hidden !important; clip:rect(0,0,0,0) !important;white-space:nowrap !important;border:0 !important; } /* ---------- Free shipping banner (the thin bar above the header) ---------- Soft slate navy -- a muted cool blue-gray, deliberately less saturated than the site's own --navy variable ("not too bold" per feedback), used as a calm complement to the warm cream/brick/gold palette everywhere else. Font-size is scoped to the text only, not "*" -- an earlier version applied 12px to every descendant including the shipping icon, which overrode its intended larger inline font-size:2em and shrank it down to match the text. */ .header-top{background:#5c7080 !important;} .header-top, .header-top b, .header-top a, .header-top i[class*="porto-icon-"]{ font-family:'Montserrat',sans-serif !important;color:#fff !important; } .header-top b{font-size:12px !important;letter-spacing:.08em;text-transform:uppercase;} /* ---------- Header background ---------- Confirmed 2026-07-31 this is already the exact --cream value, but reads as plain white next to the rest of the page -- forcing it explicitly and adding a subtle bottom border so it reads as a deliberate warm cream tone instead of blending into a generic white. */ .header-builder, .header-main{background:var(--cream) !important;} .header-builder{border-bottom:1px solid var(--line);} /* ---------- Header ---------- Confirmed 2026-07-31 the real nav markup is