/* Royal Herbal — extension to the reference design system. * * reference.css is the base and loads first everywhere. This file only styles * the surfaces the reference never had: long-form pages, the blog, the * contact form, the product page and WooCommerce. Every value here is taken * from the reference's own scale so the two read as one site: * * colour --cream --ink --wine --gold --muted --line * display var(--serif), weight 400, letter-spacing -.045em * body 14px Manrope * eyebrow 9px / 500 / 2px tracking * container .wrap = min(1320px, 100% - 96px) * easing var(--ease) */ /* ---------- guard against class-name collisions ---------- WooCommerce writes its taxonomy onto : on a single product page the body literally carries the class "product". The reference stylesheet uses .product for its own two-column section, so that rule was landing on the body and turning the whole document into a 1fr 1fr grid with 120px of padding. Anything the reference styles by bare class name needs the same guard, so body is reset explicitly. */ body.product,body.single,body.first,body.instock,body.purchasable,body.open,body.selected{ display:block;grid-template-columns:none;padding:0;margin:0; width:auto;max-width:none;gap:normal; } /* ---------- shared layout ---------- */ .rh-wrap{width:min(1320px,calc(100% - 96px));margin-inline:auto} .rh-narrow{width:min(760px,100%)} .rh-section{padding:96px 0} .rh-section--tint{background:#f2ede2} .rh-section--dark{background:var(--wine);color:#f8eddb} .rh-section--dark h1,.rh-section--dark h2,.rh-section--dark h3{color:#f8eddb} .rh-section--dark p{color:#e6d6bd} .rh-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} /* ---------- type ---------- */ .rh-label{ display:block;font-size:9px;font-weight:500;letter-spacing:2px; text-transform:uppercase;color:var(--gold);margin:0 0 22px; } .rh-lede{font-size:16px;line-height:1.75;color:var(--muted);margin:0 0 32px;max-width:46ch} .rh-prose{max-width:62ch} .rh-prose h2{font-size:38px;line-height:1.1;margin:52px 0 18px} .rh-prose h2:first-child{margin-top:0} .rh-prose p{font-size:14px;line-height:1.95;color:var(--muted);margin:0 0 18px} .rh-prose strong{color:var(--ink);font-weight:500} .rh-ur{ font-family:Georgia,serif;direction:rtl;text-align:left; font-size:22px;line-height:2;color:#98713d;margin:0 0 18px; } /* The reference already styles h1 and h2. Restating colour or margin here breaks it: .story-copy h2 takes its cream from the panel by inheritance, and a bare h1,h2 colour rule loading later overrides that to dark ink on burgundy. Only our own sections get sizes. */ .rh-section h1{font-size:clamp(40px,6vw,68px);line-height:1.05;margin:0 0 18px} .rh-section h2{font-size:clamp(30px,4vw,46px);line-height:1.1;margin:0 0 18px} h3{font-family:Manrope,sans-serif;font-weight:500;font-size:15px;letter-spacing:0;color:var(--ink);margin:0 0 8px} /* ---------- buttons, in the reference's pill idiom ---------- */ .rh-btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0 0 24px} .rh-btn{ display:inline-flex;align-items:center;gap:20px; font-size:11px;letter-spacing:.2px;border-radius:999px; padding:7px 8px 7px 24px;min-height:53px;border:1px solid transparent; transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease); } .rh-btn--primary{background:var(--wine);color:#fff9ed} .rh-btn--primary:hover{background:#41201a} .rh-btn--ghost{border-color:var(--line);color:var(--ink);padding:7px 24px} .rh-btn--ghost:hover{border-color:var(--gold);color:var(--gold)} .rh-back{ display:inline-block;font-size:10px;letter-spacing:1.4px;text-transform:uppercase; color:var(--muted);margin:0 0 28px; } .rh-back:hover{color:var(--gold)} /* ---------- placeholders ---------- */ .rh-ph{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px; background:#eee7da;border:1px dashed var(--gold);color:#8a6a3c;text-align:center;padding:24px; } .rh-ph span{font-size:11px;max-width:34ch} .rh-ph small{font-size:8px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)} /* ---------- grids ---------- */ .rh-grid{display:grid;gap:0 48px} .rh-grid--4{grid-template-columns:repeat(4,1fr)} .rh-grid--3{grid-template-columns:repeat(3,1fr)} .rh-grid>div{padding:26px 0;border-top:1px solid var(--line)} /* The pillar cards are h2 so the outline does not skip a level under the page title; they are sized here rather than by tag so they still read as cards. */ .rh-grid h2,.rh-grid h3{margin:0 0 6px;font-size:19px;line-height:1.3} .rh-grid p{font-size:12px;line-height:1.8;color:var(--muted);margin:0} /* ---------- product page ---------- */ .rh-hero{padding:44px 0 24px} .rh-hero-grid{ width:min(1320px,calc(100% - 96px));margin-inline:auto; display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center; } .rh-hero figure{margin:0;background:#eee7da;padding:6px} .rh-hero figure img{width:100%;height:auto;max-height:560px;object-fit:contain} .rh-price{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap; border-top:1px solid var(--line);padding-top:22px;margin:28px 0 24px} .rh-price b{font-family:var(--serif);font-size:38px;font-weight:400;letter-spacing:-.045em;color:var(--wine)} .rh-price span{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)} .rh-trust{background:var(--wine);color:#f8eddb} .rh-trust ul{ width:min(1320px,calc(100% - 96px));margin-inline:auto;list-style:none;padding:32px 0; display:grid;grid-template-columns:repeat(4,1fr);gap:28px; } .rh-trust li{margin:0} .rh-trust b{display:block;font-size:10px;letter-spacing:1.6px;text-transform:uppercase;margin:0 0 6px} .rh-trust span{font-size:12px;line-height:1.7;color:#e6d6bd} /* ingredient list and the composition table */ .rh-ing-group{margin:0 0 34px} .rh-ing-group>h3{ font-size:9px;font-weight:500;letter-spacing:2px;text-transform:uppercase; color:var(--gold);border-bottom:1px solid var(--line);padding-bottom:10px;margin:0; } .rh-ing{display:flex;gap:18px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line)} .rh-ing dt{flex:0 0 190px;font-size:13px;color:var(--ink)} .rh-ing dd{flex:1;margin:0;font-size:12px;line-height:1.7;color:var(--muted)} .rh-ing .pct{flex:none;font-size:12px;color:var(--wine);font-variant-numeric:tabular-nums} .rh-ing--hero .pct{background:#e8c98a;color:#4a2b12;padding:2px 7px;border-radius:999px} .rh-formula{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums} .rh-formula caption{ text-align:left;font-size:9px;letter-spacing:2px;text-transform:uppercase; color:var(--muted);padding-bottom:12px; } .rh-formula th{ text-align:left;font-size:9px;font-weight:500;letter-spacing:2px;text-transform:uppercase; color:var(--gold);border-top:1px solid var(--line);padding:16px 0 6px; } .rh-formula td{padding:9px 0;border-bottom:1px solid var(--line);font-size:12.5px} .rh-formula td:last-child{text-align:right;color:var(--muted);white-space:nowrap} .rh-formula tr.is-hero td:last-child{color:#8a5a12} .rh-formula tfoot td{border-top:1px solid var(--ink);border-bottom:0;padding-top:14px;font-size:14px;color:var(--wine)} /* purchase block */ .rh-buy{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:start} .rh-specs{list-style:none;padding:0;margin:0 0 26px} .rh-specs li{display:flex;justify-content:space-between;gap:18px;padding:14px 0;border-top:1px solid var(--line);font-size:12px} .rh-specs span:first-child{color:var(--muted);letter-spacing:.4px} .rh-specs span:last-child{color:var(--ink)} .rh-specs a{border-bottom:1px solid var(--line)} .rh-specs a:hover{border-color:var(--gold);color:var(--gold)} .rh-summary{border:1px solid var(--line);padding:28px} .rh-summary h3{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin:0 0 18px} .rh-summary dl{margin:0;display:grid;gap:10px} .rh-summary div{display:flex;justify-content:space-between;gap:18px;font-size:12px} .rh-summary dt{color:var(--muted)} .rh-summary dd{margin:0;color:var(--ink)} .rh-summary .total{border-top:1px solid var(--line);padding-top:12px} .rh-note{font-size:11px;line-height:1.8;color:var(--muted);margin:16px 0 0} .rh-ticks{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:9px} .rh-ticks li{font-size:12px;color:var(--muted);padding-left:22px;position:relative} .rh-ticks li::before{content:'';position:absolute;left:0;top:7px;width:6px;height:6px;background:var(--gold);border-radius:50%} /* steps */ .rh-steps{list-style:none;counter-reset:s;padding:0;margin:0} .rh-steps li{ counter-increment:s;display:grid;grid-template-columns:44px 1fr;gap:18px; padding:18px 0;border-bottom:1px solid var(--line);align-items:baseline;font-size:13px; } .rh-steps li::before{ content:counter(s,decimal-leading-zero); font-family:var(--serif);font-size:22px;color:var(--gold);line-height:1; } .rh-warn{margin:26px 0 0;padding:16px 20px;background:#f2ede2;color:var(--wine);font-size:12.5px} /* quotes */ .rh-quote blockquote{margin:0;font-family:var(--serif);font-size:24px;line-height:1.3;letter-spacing:-.045em;color:var(--wine)} .rh-quote cite{display:block;margin-top:14px;font-style:normal;font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)} /* accordions — matched to the reference's own */ .rh-faq details{border-bottom:1px solid var(--line)} .rh-faq summary{ cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between; gap:20px;padding:22px 0;font-size:12px;color:var(--ink);min-height:48px; } .rh-faq summary::-webkit-details-marker{display:none} .rh-faq summary::after{content:'+';color:var(--gold);font-size:15px} .rh-faq details[open] summary::after{content:'\2013'} .rh-faq p{font-size:12px;line-height:1.9;color:var(--muted);margin:0 0 22px;max-width:62ch} /* ---------- blog ---------- */ .rh-posts{margin-top:52px} .rh-post-card{ display:grid;grid-template-columns:150px 1fr;gap:6px 40px; grid-template-areas:"date title" "date excerpt"; padding:30px 0;border-top:1px solid var(--line);align-items:baseline; } .rh-post-card:last-child{border-bottom:1px solid var(--line)} .rh-post-date{grid-area:date;font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin:0} .rh-post-card h2{grid-area:title;font-size:26px;line-height:1.2;margin:0 0 6px} .rh-post-card h2 a:hover{color:var(--gold)} .rh-post-card p{grid-area:excerpt;font-size:12.5px;line-height:1.8;color:var(--muted);margin:0;max-width:64ch} .rh-cta-strip{ margin-top:64px;border-top:1px solid var(--ink);padding-top:26px; display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap; } .rh-cta-strip b{display:block;font-family:var(--serif);font-size:26px;font-weight:400;letter-spacing:-.045em;color:var(--wine)} .rh-cta-strip span{font-size:12px;color:var(--muted)} /* ---------- contact ---------- */ .rh-contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start;margin-top:34px} .rh-form__intro{font-size:13px;line-height:1.8;color:var(--muted);margin:0 0 28px;max-width:46ch} .rh-form{display:grid;gap:18px;max-width:540px} .rh-field{margin:0;display:grid;gap:7px} .rh-form label{font-size:9px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--muted)} .rh-form input,.rh-form textarea{ font:14px Manrope,sans-serif;color:var(--ink);background:#fffdf8; border:1px solid var(--line);border-radius:0;padding:14px 15px;width:100%;min-height:50px; } .rh-form textarea{min-height:150px;resize:vertical;line-height:1.7} .rh-form input:focus-visible,.rh-form textarea:focus-visible{outline:2px solid var(--gold);outline-offset:3px} .rh-form button{width:100%;justify-content:space-between} .rh-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .rh-form__ok,.rh-form__err{margin:0;padding:15px 18px;font-size:12.5px;border:1px solid var(--line);background:#fffdf8} .rh-form__ok{color:var(--wine)} .rh-form__err{color:#8c3a12;border-color:#8c3a12} /* ---------- footer link columns ---------- The reference footer carries a single link, so it has no rule for a list of them. There are two lists now: the site's own pages in the middle column, where the product line used to be, and the policies on the right. 34px rows rather than 44. 44 is a touch-target size and stays that on a phone below; on a pointer the guideline minimum is far smaller, and at 44 a five-item column would have made the footer taller than the content above it. */ .footer-links,.footer-nav{display:flex;flex-direction:column;gap:2px} .footer-nav{align-items:center} .footer-links{align-items:flex-end} .footer-links a,.footer-nav a{ font-size:10px;color:var(--muted); display:inline-flex;align-items:center;min-height:34px;padding:0 2px; } .footer-links a:hover,.footer-nav a:hover{color:var(--gold)} /* ---------- footer on a phone ---------- The reference's footer is a three-column grid that collapses to two, which left the brand floating half-way down beside a tall right-hand stack of policy links, and the product line stranded between them with nothing to belong to. On a phone it reads as one column in DOM order instead - brand, what we sell, where to read the terms, where to find us, the legal line - with the links in two columns so four of them cost one row of height rather than four, and a hairline separating each group. */ @media(max-width:767px){ .footer{grid-template-columns:1fr;gap:0;padding-top:40px;align-items:start} .footer>.brand{margin-bottom:22px} /* Both lists in two columns, so nine links cost five rows rather than nine. */ .footer-links,.footer-nav{ display:grid;grid-template-columns:1fr 1fr;gap:0 18px; align-items:start;padding-top:6px;border-top:1px solid var(--line); } .footer-nav{margin-bottom:4px} .footer-links a,.footer-nav a{font-size:11px;min-height:42px} .rh-social{margin:10px 0 0 -13px;padding-top:14px;border-top:1px solid var(--line)} .footer-bottom{ flex-direction:column;align-items:flex-start;gap:7px; margin-top:14px;padding:16px 0 0;line-height:1.5; } .footer-bottom>span:last-child{text-align:left} } /* ---------- cart link in the header ---------- This replaces the reference's "Discover Majoon" CTA. It deliberately does not reuse .header-cta: that class is hidden below 380px and loses its icon below 767px, and the cart has to stay reachable on every screen. The badge is empty when the cart is, so :empty hides it. */ .rh-cart{display:flex;align-items:center;gap:9px;font-size:11px;color:var(--ink)} .rh-cart__icon{position:relative;display:grid;place-items:center} .rh-cart svg{width:21px;height:21px} .rh-cart__count{ position:absolute;top:-7px;left:11px; min-width:16px;height:16px;padding:0 4px; display:grid;place-items:center;border-radius:999px; background:var(--wine);color:#fff9ed; font-size:9px;font-weight:500;letter-spacing:0;line-height:1; } .rh-cart__count:empty{display:none} .rh-cart:hover{color:var(--gold)} @media(max-width:767px){ /* Icon only, but keep a full-size tap target around it: most of this store's customers arrive on a phone, and 21px of icon is not a target. */ .rh-cart{margin-left:auto;justify-content:flex-end;min-width:44px;min-height:44px} .rh-cart__label{display:none} } /* ---------- social links ---------- A full-width row of its own, so the reference's three-column footer grid keeps its shape. 44px boxes to stay tappable at a 17px icon. */ .rh-social{ grid-column:1/-1;display:flex;justify-content:center;gap:6px; list-style:none;margin:0;padding:0; } .rh-social a{ display:grid;place-items:center;width:44px;height:44px; color:var(--muted);transition:color .4s var(--ease); } .rh-social a:hover{color:var(--gold)} .rh-social svg{width:17px;height:17px} @media(max-width:767px){ .rh-social{justify-content:flex-start;margin-inline:-13px} } /* ---------- shop grid ---------- WooCommerce puts `product` on every card in this list, and the reference uses that same class for the landing's product *section*: a two-column grid with 120px of vertical padding and a 100px gap. Landing on a card, it pulled the photo and the title into separate columns and pushed the price 300px below them, which is the sprawl this replaces. Fourth collision of that kind, after body.product, .button and bare svg. auto-fill rather than a fixed column count, so a single product reads as one card at its natural size instead of a third of the page stretched wide, and so the grid still holds up if the client adds a second jar. */ .wc-block-product-template{ display:grid!important; grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); gap:22px;list-style:none;margin:44px 0 0;padding:0; } .wc-block-product-template>.wc-block-product{ display:flex!important;flex-direction:column;align-items:stretch; grid-template-columns:none!important;gap:0!important;padding:0!important; /* WooCommerce keeps `is-flex-container columns-3` on the list and sizes each item from it inside a media query, which squeezed the card to 86px in a 293px track. The track already does the sizing here. */ width:100%!important;max-width:none!important; background:#eee7da;border-radius:5px;box-shadow:inset 0 0 0 1px #9c744e12; overflow:hidden; } .wc-block-product .wc-block-components-product-image{margin:0;background:#f4eee1} .wc-block-product .wc-block-components-product-image img{ display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;padding:20px; } .wc-block-product .wp-block-post-title{ margin:0;padding:22px 22px 0; font-family:var(--serif)!important;font-weight:400;font-size:25px!important; line-height:1.12;letter-spacing:-.035em; } .wc-block-product .wp-block-post-title a{color:var(--ink);text-decoration:none} .wc-block-product .wp-block-post-title a:hover{color:var(--wine)} .wc-block-product .wp-block-woocommerce-product-price{ margin:0;padding:9px 22px 0;font-size:12px;letter-spacing:.3px;color:var(--muted); } .wc-block-product .wp-block-button, .wc-block-product .wc-block-components-product-button{ display:block;margin:auto 0 0;padding:18px 22px 22px;text-align:center; } /* This button carries wc-block-components-product-button__button, not the wc-block-components-button our WooCommerce rule matches, so it was falling through to the browser's default grey. */ /* Only WooCommerce's own button, by its class. A bare `button` descendant here also caught the stepper's plus and minus, which then rendered as two wine circles inside the quantity pill. */ .wc-block-product .wc-block-components-product-button__button{ display:flex;width:100%!important;max-width:none!important; justify-content:center;align-items:center;text-align:center; min-height:48px;padding:15px 20px!important;border:0!important; border-radius:999px!important;background:var(--wine)!important;color:#fff9ed!important; font:11px Manrope,sans-serif!important;letter-spacing:.2px; } .wc-block-product .wc-block-components-product-button__button:hover{background:#41201a!important} /* Once our control takes over, WooCommerce's own button and its trailing "View cart" link step aside. They stay in the markup as the no-JS path. */ .rh-has-ctl .wc-block-components-product-button__button, .rh-has-ctl .added_to_cart{display:none!important} .wc-block-product .added_to_cart{ display:block;margin-top:12px;text-align:center; font-size:10px;letter-spacing:1.6px;text-transform:uppercase;color:#8d734f; text-decoration:underline;text-underline-offset:3px; background:none!important;padding:0!important;min-height:0!important;border-radius:0!important; } .wc-block-product .added_to_cart:hover{color:var(--wine)} /* The in-cart control: a stepper and the cart on one row, which is how the landing pairs its quantity control with its buy button. Sized off the reference's own .quantity - same border, same pill radius, same centred output - so the shop does not introduce a second kind of stepper. */ /* `hidden` is a user-agent rule, and any author `display` beats it whatever the specificity, so both states rendered at once until this. */ .rh-cartctl [hidden]{display:none!important} .rh-cartctl__add{ display:flex;width:100%;min-height:48px;padding:15px 20px; align-items:center;justify-content:center; border:0;border-radius:999px;background:var(--wine);color:#fff9ed; font:11px Manrope,sans-serif;letter-spacing:.2px;cursor:pointer; transition:background .4s var(--ease); } .rh-cartctl__add:hover{background:#41201a} .rh-cartctl__row{display:flex;gap:10px;align-items:stretch} .rh-qty{ display:flex;align-items:center;justify-content:space-around; flex:none;min-width:98px;height:48px;background:#fffdf8; border:1px solid var(--line);border-radius:30px; } .rh-qty button{ border:0;background:none;color:var(--ink); font-size:17px;line-height:1;width:30px;height:42px;cursor:pointer; } .rh-qty button:hover{color:var(--wine)} .rh-qty output{ font-size:12px;min-width:22px;text-align:center;font-variant-numeric:tabular-nums; } .rh-cartctl__view{ flex:1;display:flex;align-items:center;justify-content:center; height:48px;border-radius:999px;background:var(--wine);color:#fff9ed; font:11px Manrope,sans-serif;letter-spacing:.2px; transition:background .4s var(--ease); } .rh-cartctl__view:hover{background:#41201a;color:#fff9ed} /* A request in flight should not look clickable twice. */ .rh-cartctl.is-busy{opacity:.55;pointer-events:none} @media(max-width:767px){ .wc-block-product-template{grid-template-columns:1fr;gap:16px;margin-top:30px} .wc-block-product .wp-block-post-title{font-size:23px!important} } /* ---------- sold out ---------- The CTA keeps the reference's shape so the page does not restructure when stock runs out; it just stops claiming a price and stops looking primary. */ .button--soldout{background:#7d7166} .button--soldout:hover{background:#6c6156} .rh-btn--primary.is-soldout{background:#7d7166!important} /* WooCommerce's own notices, in this design's language. Until now no template printed them at all, so a failed add-to-cart said nothing whatsoever. */ .woocommerce-notices-wrapper:empty{display:none} .wc-block-components-notice-banner{ width:min(1320px,calc(100% - 96px));margin:24px auto 0;border-radius:2px; font:13px Manrope,sans-serif; } @media(max-width:767px){ .wc-block-components-notice-banner{width:calc(100% - 40px);font-size:12.5px} } /* ---------- testimonials ---------- Assembled from devices the reference already uses rather than a new visual idea: the FAQ's 1px --line rule, the hero frame's card treatment, the eyebrow-and-serif heading pair, and the gold 17px glyph from the details strip. Prefixed because this sits on WooCommerce pages and short class names have collided with that design three times already. The band runs full width rather than inside .wrap, which is how the reference site presents its own row of customer videos. */ .rh-voices{padding-bottom:104px} .rh-voices__head{ border-top:1px solid var(--line);padding-top:100px;text-align:center; } .rh-voices h2{font-size:52px;line-height:1.06;margin:23px 0 0} .rh-voices__intro{ max-width:430px;margin:22px auto 0; font-size:13px;line-height:1.9;color:var(--muted); } /* A real scroll container that also drifts on its own, so pointer, touch, trackpad and keyboard can take over at any moment. It carries .wrap in the markup, so the band starts and ends on the same measure as every other section rather than running full width. The grab cursor is the affordance for that: the whole band can be picked up and thrown either way. */ .rh-voices__viewport{ margin-top:52px;overflow-x:auto;overflow-y:hidden; scrollbar-width:none;-ms-overflow-style:none; cursor:grab; } .rh-voices__viewport::-webkit-scrollbar{display:none} .rh-voices__viewport:focus-visible{outline:2px solid var(--gold);outline-offset:4px} /* While a drag is in progress the pointer keeps the closed hand even when it leaves the band, and text stops selecting under it. */ .rh-voices__viewport.is-dragging, .rh-voices__viewport.is-dragging *{cursor:grabbing;user-select:none} .rh-voices__track{ display:flex;gap:22px;width:max-content; list-style:none;margin:0;padding:4px 0; } .rh-voice{ flex:none;width:392px; display:flex;flex-direction:column;gap:20px; padding:34px 32px 30px; background:#eee7da;border-radius:5px;box-shadow:inset 0 0 0 1px #9c744e12; } .rh-voice__mark{display:block;color:var(--gold);line-height:0} .rh-voice__mark svg{width:17px;height:17px} .rh-voice blockquote{ margin:0;font-family:var(--serif);font-size:19px;line-height:1.55; letter-spacing:-.01em;color:var(--ink); } .rh-voice__who{ margin-top:auto;padding-top:20px;border-top:1px solid #d7c9ae; display:flex;align-items:center;gap:12px; } .rh-voice__initial{ flex:none;width:32px;height:32px;border-radius:50%; display:grid;place-items:center; background:#e2d4b8;color:#7a5a2c; font-family:var(--serif);font-size:15px;line-height:1; } .rh-voice__id b{ display:block;font-size:10px;font-weight:500;letter-spacing:1.6px; text-transform:uppercase;color:var(--ink); } .rh-voice__id small{ display:block;margin-top:3px; font-size:9px;letter-spacing:1.6px;text-transform:uppercase;color:#8d734f; } @media(max-width:1100px){ .rh-voice{width:340px;padding:30px 26px 26px} .rh-voice blockquote{font-size:17px} } @media(max-width:767px){ .rh-voices{padding-bottom:70px} .rh-voices__head{padding-top:70px} .rh-voices h2{font-size:40px} .rh-voices__viewport{margin-top:38px} .rh-voices__track{gap:14px} .rh-voice{width:min(300px,78vw)} } /* Someone who has asked for less motion gets a plain scroller. */ @media(prefers-reduced-motion:reduce){ .rh-voices__viewport{scroll-snap-type:x mandatory} .rh-voice{scroll-snap-align:center} } /* ---------- footer pinned to the bottom of short pages ---------- The template part wraps the footer in a div, which would be the containing block for a sticky footer and is only as tall as the footer itself. Taking those wrappers out of the box tree hands that role to .wp-site-blocks, so `top:100dvh` parks the footer at the bottom of the viewport when the page is short and leaves it in normal flow when the page is long. The height goes on .wp-site-blocks, the wrapper the block theme puts around everything, because that - not body - is what the footer's sticky offset is measured against. This avoids putting flex or grid on the wrapper, which would change margin collapsing on pages already pixel-matched to the reference. */ .wp-site-blocks{min-height:100vh;min-height:100dvh} .wp-block-template-part{display:contents} .footer{position:sticky;top:100vh;top:100dvh} /* The admin bar offsets , so without this an administrator sees a phantom scrollbar on every short page. Its own two heights, from core. */ body.admin-bar .wp-site-blocks{min-height:calc(100dvh - 32px)} body.admin-bar .footer{top:calc(100dvh - 32px)} @media screen and (max-width:782px){ body.admin-bar .wp-site-blocks{min-height:calc(100dvh - 46px)} body.admin-bar .footer{top:calc(100dvh - 46px)} } /* ---------- post-order ---------- */ .rh-next{max-width:760px;margin:44px auto 0;padding:32px;background:#f2ede2} .rh-next h2{font-size:30px;margin:0 0 18px} .rh-next ol{margin:0 0 22px;padding-left:20px;display:grid;gap:11px} .rh-next li{font-size:13px;line-height:1.8} .rh-next__num{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin:0} .rh-next__num strong{color:var(--wine);font-size:14px;letter-spacing:0} /* ---------- sticky order bar and WhatsApp float ---------- */ .rh-sticky{ position:fixed;left:0;right:0;bottom:0;z-index:70;display:none; align-items:center;gap:12px;padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px)); background:var(--cream);border-top:1px solid var(--line); } .rh-sticky .p{display:flex;flex-direction:column;line-height:1.15;flex:none} .rh-sticky .p b{font-family:var(--serif);font-size:20px;font-weight:400;letter-spacing:-.045em;color:var(--wine)} .rh-sticky .p span{font-size:8px;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)} .rh-sticky a{flex:1;justify-content:center;padding:14px 10px;min-height:48px} .rh-sticky .wa{flex:none;width:52px;padding:14px 0} .rh-sticky .wa svg{width:19px;height:19px} .rh-wa{ position:fixed;right:18px;bottom:18px;z-index:60;width:52px;height:52px;border-radius:50%; background:#25d366;display:flex;align-items:center;justify-content:center; box-shadow:0 4px 16px rgba(61,36,31,.24); } .rh-wa svg{width:27px;height:27px;fill:#fff;stroke:none} /* ---------- WooCommerce, brought into the same language ---------- */ .woocommerce main,.woocommerce-page main{width:min(1320px,calc(100% - 96px));margin-inline:auto;padding:64px 0 96px} .woocommerce .button,.woocommerce button.button,.woocommerce a.button, .woocommerce input.button,.woocommerce #respond input#submit, .wc-block-components-button{ background:var(--wine)!important;color:#fff9ed!important;border-radius:999px!important; font:11px Manrope,sans-serif!important;letter-spacing:.2px;padding:18px 26px!important;border:0!important; } .woocommerce .button:hover,.woocommerce a.button:hover,.wc-block-components-button:hover{background:#41201a!important} .woocommerce table.shop_table{border:0;border-radius:0} .woocommerce table.shop_table th,.woocommerce table.shop_table td{border-color:var(--line);font-size:12.5px} .woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea, .woocommerce form .form-row select,.wc-block-components-text-input input{ border:1px solid var(--line)!important;border-radius:0!important;background:#fffdf8!important; font:14px Manrope,sans-serif!important;padding:13px 15px!important; } .woocommerce form .form-row label,.wc-block-components-text-input label{ font-size:9px!important;letter-spacing:2px;text-transform:uppercase;color:var(--muted)!important; } .woocommerce ul.products li.product .woocommerce-loop-product__title, .wc-block-product-template li h2{ font-family:var(--serif)!important;font-weight:400;font-size:24px!important; letter-spacing:-.045em;color:var(--ink); } .woocommerce span.onsale{background:#e8c98a!important;color:#4a2b12!important;border-radius:999px!important} .woocommerce-info,.woocommerce-message,.woocommerce-error{ border-top-color:var(--gold);background:#f2ede2;border-radius:0;font-size:12.5px; } /* ---------- WooCommerce's own interface, kept out of the reference ---------- */ /* The reference was written as one standalone page, so it styles a bare `svg` and a generic `.button`. Both names belong to WooCommerce's interface too, and it ships its own icons and buttons. Hand those elements back. The icon reset is wrapped in :where() so it carries no specificity: it ties with the reference's bare `svg` and wins on order, while WooCommerce's own class rules still outrank it and keep their colours and hover states. */ :where(.wp-block-woocommerce-cart,.wp-block-woocommerce-checkout, .wc-block-components-notice-banner,.woocommerce-notices-wrapper) svg{ width:auto;height:auto;stroke:none;stroke-width:0; } /* "View cart" in a store notice ships as class="button", so it inherited the reference CTA's 53px pill, and the CTA's wine hover painted a dark circle over its own label. It is a link, so let it read as one. */ .woocommerce .wc-block-components-notice-banner a.button, .wc-block-components-notice-banner a.button, .wc-block-components-notice-banner a.button:hover, .woocommerce-message a.button,.woocommerce-info a.button,.woocommerce-error a.button, .woocommerce-message a.button:hover{ display:inline!important;min-height:0!important;padding:0!important;gap:0!important; border-radius:0!important;background:none!important;color:inherit!important; font:inherit!important;letter-spacing:inherit!important; } /* ---------- responsive, on the reference's own breakpoints ---------- */ @media(max-width:1100px){ .rh-wrap,.rh-hero-grid,.rh-trust ul{width:calc(100% - 48px)} .rh-section{padding:72px 0} .rh-buy,.rh-contact-grid{grid-template-columns:1fr;gap:40px} .rh-grid--4{grid-template-columns:repeat(2,1fr)} .woocommerce main,.woocommerce-page main{width:calc(100% - 48px)} } @media(max-width:767px){ .rh-wrap,.rh-hero-grid,.rh-trust ul{width:calc(100% - 40px)} .rh-section{padding:56px 0} .rh-hero-grid{grid-template-columns:1fr;gap:28px} .rh-hero figure{order:-1} .rh-grid--4,.rh-grid--3{grid-template-columns:1fr} .rh-trust ul{grid-template-columns:1fr;gap:0;padding:22px 0} .rh-trust li{padding:14px 0;border-top:1px solid rgba(232,215,184,.22)} .rh-trust li:first-child{border-top:0} .rh-post-card{grid-template-columns:1fr;grid-template-areas:"date" "title" "excerpt";gap:6px} .rh-post-card h2{font-size:22px} .rh-ing{flex-wrap:wrap;gap:6px} .rh-ing dt{flex:1 1 100%} .rh-btns .rh-btn{width:100%;justify-content:space-between} /* The bar carries its own WhatsApp button, so the float would duplicate it - but only where the bar actually renders. The body class says so, rather than :has(), because the float has to survive on the pages without a bar. */ .rh-sticky{display:flex} .rh-has-bar .rh-wa{display:none} body.rh-has-bar{padding-bottom:78px} .rh-cta-strip{flex-direction:column;align-items:flex-start;gap:16px} .rh-next{padding:24px} .woocommerce main,.woocommerce-page main{width:calc(100% - 40px);padding:40px 0 64px} }