.elementor-kit-6{--e-global-color-primary:#2B1B10;--e-global-color-secondary:#E9A91B;--e-global-color-text:#2B1B10;--e-global-color-accent:#5A3A22;--e-global-typography-primary-font-family:"Fraunces";--e-global-typography-secondary-font-family:"Fraunces";--e-global-typography-text-font-family:"Figtree";--e-global-typography-accent-font-family:"Fraunces";--e-global-typography-accent-font-weight:600;font-family:"Figtree", Sans-serif;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{background-color:#E9A91B;font-family:"Figtree", Sans-serif;font-weight:600;color:#2B1B10;border-radius:4px 4px 4px 4px;padding:8px 32px 8px 32px;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 a{color:#eca918;}.elementor-kit-6 a:hover{color:#673a0a;}.elementor-kit-6 h1{font-family:"Fraunces", Sans-serif;}.elementor-kit-6 h2{font-family:"Fraunces", Sans-serif;}.elementor-kit-6 h3{font-family:"Fraunces", Sans-serif;}.elementor-kit-6 h4{font-family:"Fraunces", Sans-serif;}.elementor-kit-6 h5{font-family:"Fraunces", Sans-serif;}.elementor-kit-6 h6{font-family:"Fraunces", Sans-serif;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* --- orca:utilities:start --- */ :root{--orca-font-head:"Baloo 2", Georgia, "Times New Roman", serif;--orca-font-body:"Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif} .orca-section{font-family:var(--orca-font-body)} .orca-section h1,.orca-section h2{font-family:var(--orca-font-head)} .orca-drop-cap p:first-of-type::first-letter,.orca-hero .orca-roundel strong{font-family:var(--orca-font-head)} :root { --brand: #eca918; --accent: #673a0a; --chrome: #eca918; --ground: #FCF9F3; --recessed: #F6F0E5; --ink: #231E15; --ink-muted: #5C5242; --reversed: #FDFCF9; --hairline: #E6DED1; --dark: #231D13; --cta: #673a0a; --cta-deep: #52300D; --brand-surface: #956D17; --brand-surface-deep: #755717; --brand-deep: #A8770E; --accent-soft: #AA6923; /* THE INK THAT SITS ON THE ACCENT, decided by contrast (WCAG luminance), published as a token so the PLUGIN's chrome - the mobile action bar first among it - paints accent surfaces without guessing ("solid accent with white/text, best contrast" - Nick, 30 Aug). */ --on-accent: #ffffff; --band-tint: #FBF6EA; --chrome-rgb: 236, 169, 24; /* Two shadows, and only two. Both are barely there: a shadow you can SEE is a shadow doing decoration rather than telling you a thing is lifted off the page. Cast in a brand-tinted near-black, never pure black. */ --shadow-sm: 0 1px 2px rgba(61, 46, 15, .04), 0 2px 6px rgba(61, 46, 15, .05); --shadow-md: 0 2px 4px rgba(61, 46, 15, .05), 0 8px 22px rgba(61, 46, 15, .08); --pad: clamp(48px, 6.5vw, 72px); /* THE STORE RHYTHM (Nick, 9 Sep: "reduce padding/spacing in this design system", then "shrink padding between sections up to snug"). A storefront page is a stack of merchandising strips, and the reading rhythm above reads as dead air between them. Snug is the ceiling he named: each band carries it top and bottom, so two bands meet across one snug-and-snug seam. The assembler swaps a storefront band's var(--pad) for this; nothing else uses it. */ --pad-store: var(--snug); --gutter: clamp(20px, 5vw, 48px); --radius: 8px; /* See .orca-site-header: a known height, not a derived one. */ --header-h: 68px; --header-h-compact: 52px; /* WHAT SITS ABOVE THE HERO, exactly. The top bar is a fixed 40px strip and the header is a token, so the hero can be exactly one viewport minus the chrome (playbook §4b) instead of a guessed vh. A floating header costs the hero nothing; a solid one costs its own height. The top bar hides under 1024px and the media rule below keeps this honest. */ --chrome-h: calc(40px + var(--header-h)); /* TWO grid widths. The content column is the narrower one, because its width is a reading decision. The chrome - top bar, header, footer - runs wider: it is the FRAME around the content, and a frame that sits inside the thing it frames looks accidental. Wider also puts the logo and the call to action nearer the page edges, which is where the eye goes looking for them. Both are still grids; neither is full-bleed. */ --grid: 1200px; --grid-wide: 1350px; --measure: 65ch; /* Relationship spacing. NOT one uniform gap - see SPACE in design-systems.orca-ts. */ --tight: 8px; --snug: 16px; --loose: 32px; --block: 64px; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } /* ELEMENTOR ENTRANCES ARE NEVER USED, AND THE FAIL-OPEN IS RETIRED WITH THEM. The timed fail-open that once rescued .elementor-invisible is structurally incompatible with scroll entrances: content reveals at 1.6s, the late waypoint re-runs the animation from opacity 0, and visible content blinks out and re-enters (playbook §4c — three failed approaches before the shipped one). Orca's own motion system below hides content ONLY under a class that JavaScript sets, so a page with no JS is visible from first paint and nothing ever re-hides. An .elementor-invisible left by hand editing is made visible outright rather than animated. */ .elementor-invisible { visibility: visible !important; opacity: 1 !important; } /* ---- the motion system (playbook §4c) --------------------------------- */ /* Hidden states exist ONLY under html.orca-anim, which the footer's inline script sets after tagging one IntersectionObserver over the band inners — JS off or broken means everything is visible from first paint. The observer adds .orca-seen once and unobserves; reveal never re-hides, so the blink the fail-open era shipped cannot exist. The hero is EXCLUDED from the observer and from every hiding .elementor-kit-6: its showpiece below is pure CSS on load, with no trigger to fail. */ @media (prefers-reduced-motion: no-preference) { /* HEADINGS ANIMATE SEPARATELY (playbook §4c; rule design/motion-vocabulary): a band's heading group is not one block rising together. Its children move and the group itself never does (a band whose children move never also moves itself): the eyebrow and the heading rise first, on their own beat, and the words and buttons under them follow a beat later. */ html.orca-anim .orca-section:not(.orca-hero) .orca-inner:not(.orca-feature) > .orca-group > *, html.orca-anim .orca-section:not(.orca-hero) .orca-inner .orca-card, html.orca-anim .orca-section:not(.orca-hero) .orca-inner .orca-icon-card { opacity: 0; transform: translateY(26px); transition: opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1); } /* Two-column rows enter from their own sides: the words from theirs, the picture from the other, and a reversed row mirrors both. The half moves as one piece, so nothing inside it moves again. BOTH SHAPES: the built page's inner IS the feature row (.orca-inner.orca-feature), the preview nests one. */ html.orca-anim .orca-section:not(.orca-hero) .orca-inner.orca-feature > .orca-group, html.orca-anim .orca-section:not(.orca-hero) .orca-inner .orca-feature > .orca-group, html.orca-anim .orca-section:not(.orca-hero) .orca-inner .orca-split > .orca-group, html.orca-anim .orca-section:not(.orca-hero) .orca-inner .orca-contact-split .orca-panel-body { opacity: 0; transform: translateX(-32px); transition: opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1); } html.orca-anim .orca-section:not(.orca-hero) .orca-inner.orca-feature img, html.orca-anim .orca-section:not(.orca-hero) .orca-inner .orca-feature img, html.orca-anim .orca-section:not(.orca-hero) .orca-inner .orca-split img, html.orca-anim .orca-section:not(.orca-hero) .orca-inner .orca-contact-split .orca-map { opacity: 0; transform: translateX(32px); transition: opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1); } html.orca-anim .orca-section:not(.orca-hero) .orca-inner.orca-feature.orca-rev > .orca-group { transform: translateX(32px); } html.orca-anim .orca-section:not(.orca-hero) .orca-inner.orca-feature.orca-rev img { transform: translateX(-32px); } /* The heading's beat, then the rest: the eyebrow and heading widgets rise at once, everything under them 160ms later. */ html.orca-anim .orca-section:not(.orca-hero) .orca-inner:not(.orca-feature) > .orca-group > .elementor-widget-heading { transition-delay: 0ms; } html.orca-anim .orca-section:not(.orca-hero) .orca-inner:not(.orca-feature) > .orca-group > :not(.elementor-widget-heading) { transition-delay: 160ms; } /* Repeated items are dealt, not dumped. */ html.orca-anim .orca-section:not(.orca-hero) .orca-inner .orca-cards > *:nth-child(1), html.orca-anim .orca-section:not(.orca-hero) .orca-inner .orca-icon-cards > *:nth-child(1) { transition-delay: 0ms; } html.orca-anim .orca-section:not(.orca-hero) .orca-inner .orca-cards > *:nth-child(2), html.orca-anim .orca-section:not(.orca-hero) .orca-inner .orca-icon-cards > *:nth-child(2) { transition-delay: 120ms; } html.orca-anim .orca-section:not(.orca-hero) .orca-inner .orca-cards > *:nth-child(3), html.orca-anim .orca-section:not(.orca-hero) .orca-inner .orca-icon-cards > *:nth-child(3) { transition-delay: 240ms; } html.orca-anim .orca-section:not(.orca-hero) .orca-inner .orca-cards > *:nth-child(4), html.orca-anim .orca-section:not(.orca-hero) .orca-inner .orca-icon-cards > *:nth-child(4) { transition-delay: 360ms; } html.orca-anim .orca-section:not(.orca-hero) .orca-inner .orca-cards > *:nth-child(5), html.orca-anim .orca-section:not(.orca-hero) .orca-inner .orca-icon-cards > *:nth-child(5) { transition-delay: 480ms; } html.orca-anim .orca-section:not(.orca-hero) .orca-inner .orca-cards > *:nth-child(6), html.orca-anim .orca-section:not(.orca-hero) .orca-inner .orca-icon-cards > *:nth-child(6) { transition-delay: 600ms; } html.orca-anim .orca-section:not(.orca-hero) .orca-inner .orca-cards > *:nth-child(7), html.orca-anim .orca-section:not(.orca-hero) .orca-inner .orca-icon-cards > *:nth-child(7) { transition-delay: 720ms; } html.orca-anim .orca-section:not(.orca-hero) .orca-inner .orca-cards > *:nth-child(8), html.orca-anim .orca-section:not(.orca-hero) .orca-inner .orca-icon-cards > *:nth-child(8) { transition-delay: 840ms; } html.orca-anim .orca-section:not(.orca-hero) .orca-inner .orca-cards > *:nth-child(9), html.orca-anim .orca-section:not(.orca-hero) .orca-inner .orca-icon-cards > *:nth-child(9) { transition-delay: 960ms; } html.orca-anim .orca-section:not(.orca-hero) .orca-inner .orca-cards > *:nth-child(10), html.orca-anim .orca-section:not(.orca-hero) .orca-inner .orca-icon-cards > *:nth-child(10) { transition-delay: 1080ms; } html.orca-anim .orca-section:not(.orca-hero) .orca-inner .orca-cards > *:nth-child(11), html.orca-anim .orca-section:not(.orca-hero) .orca-inner .orca-icon-cards > *:nth-child(11) { transition-delay: 1200ms; } html.orca-anim .orca-section:not(.orca-hero) .orca-inner .orca-cards > *:nth-child(12), html.orca-anim .orca-section:not(.orca-hero) .orca-inner .orca-icon-cards > *:nth-child(12) { transition-delay: 1320ms; } /* The reveal mirrors every hidden .elementor-kit-6 with .orca-seen added, so it always outranks the hide. */ html.orca-anim .orca-section:not(.orca-hero) .orca-inner.orca-seen:not(.orca-feature) > .orca-group > *, html.orca-anim .orca-section:not(.orca-hero) .orca-inner.orca-seen .orca-card, html.orca-anim .orca-section:not(.orca-hero) .orca-inner.orca-seen .orca-icon-card, html.orca-anim .orca-section:not(.orca-hero) .orca-inner.orca-feature.orca-seen > .orca-group, html.orca-anim .orca-section:not(.orca-hero) .orca-inner.orca-seen .orca-feature > .orca-group, html.orca-anim .orca-section:not(.orca-hero) .orca-inner.orca-seen .orca-split > .orca-group, html.orca-anim .orca-section:not(.orca-hero) .orca-inner.orca-seen .orca-contact-split .orca-panel-body, html.orca-anim .orca-section:not(.orca-hero) .orca-inner.orca-feature.orca-seen img, html.orca-anim .orca-section:not(.orca-hero) .orca-inner.orca-seen .orca-feature img, html.orca-anim .orca-section:not(.orca-hero) .orca-inner.orca-seen .orca-split img, html.orca-anim .orca-section:not(.orca-hero) .orca-inner.orca-seen .orca-contact-split .orca-map { opacity: 1; transform: none; } /* The hero showpiece: load-time keyframes, home only (the hero is only on home), done inside a second. Fill mode backwards holds the from-state before the delay and reverts to natural styles after, so nothing stays clipped. */ @keyframes orca-rise { from { opacity: 0; transform: translateY(26px); } } @keyframes orca-curtain { from { opacity: .01; clip-path: inset(0 0 100% 0); } } .orca-photo.orca-hero .orca-eyebrow { animation: orca-rise .6s cubic-bezier(.22,1,.36,1) .15s backwards; } .orca-photo.orca-hero h1, .orca-photo.orca-hero .elementor-heading-title { animation: orca-curtain .9s cubic-bezier(.16,1,.3,1) .25s backwards; } .orca-photo.orca-hero .orca-lead { animation: orca-rise .6s cubic-bezier(.22,1,.36,1) .55s backwards; } .orca-photo.orca-hero .orca-btns { animation: orca-rise .6s cubic-bezier(.22,1,.36,1) .7s backwards; } /* THE REST OF THE SHOWPIECE (playbook §4c; rule design/hero-showpiece-scoped): the overlay LIFTS from the pair's near-black to its resting gradients, the eyebrow's dash DRAWS, and the founding-year roundel SPRINGS in last. All load-time, all done by ~2.2s, none a hover. */ @keyframes orca-lift { from { background-color: var(--dark); } } @keyframes orca-dash { from { width: 0; margin-right: 0; } } @keyframes orca-spring { 0% { opacity: 0; transform: scale(.6); } 70% { opacity: 1; transform: scale(1.06); } } .orca-photo.orca-hero::after { animation: orca-lift 1.1s cubic-bezier(.22,1,.36,1) backwards; } .orca-photo.orca-hero .orca-eyebrow::before { animation: orca-dash .5s cubic-bezier(.22,1,.36,1) .35s backwards; } .orca-section.orca-photo.orca-hero .orca-roundel.e-con { animation: orca-spring .7s cubic-bezier(.34,1.56,.64,1) 1.4s backwards; } } /* ---- mobile rules (playbook §4b) -------------------------------------- */ /* The mobile hero is eyebrow + headline + buttons only. */ @media (max-width: 640px) { .orca-hero .orca-lead { display: none; } } /* OVER A PHOTOGRAPH ON A PHONE the eyebrow is light cream with a soft shadow (playbook §4b; rule design/mobile-hero-trim): an accent eyebrow fails contrast on imagery, and the phone's shorter band puts it into the thin end of the scrim. Three classes, so the kit's widget heading color cannot win. */ @media (max-width: 767px) { .orca-section.orca-photographic .orca-eyebrow .elementor-heading-title, .orca-section.orca-photographic .orca-eyebrow.elementor-widget-heading .elementor-heading-title, .orca-photo .orca-eyebrow { color: var(--reversed); text-shadow: 0 1px 10px rgba(0,0,0,.45); } } /* The plugin's fixed action bar covers the footer's last lines without this clearance; :has fails safe where unsupported. */ /* 900px, THE BAR'S OWN BREAKPOINT (chrome.orca-css shows it up to 900px; rule chrome/quick-bar-clearance). This stopped at 782px, so from 783 to 900 the bar sat over the footer's last line. */ @media (max-width: 900px) { /* !important BECAUSE THE FOOTER'S PADDING IS AN ELEMENTOR SETTING (rule chrome/quick-bar-clearance): band() and site-footer.orca-ts write it on the container, which outranks a class, so this clearance never landed and the legal line rode behind the bar. */ body:has(.iw-cta-bar) .orca-foot { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; } } /* The footer's script holder renders as a blank band without this. */ .orca-motion-holder { display: none; } body { margin: 0; background: var(--ground); color: var(--ink); font: 17px/1.65 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* CLIP, NOT HIDDEN (invariant 1, and the 28 Aug audit). Hidden makes the element a scroll container, which silently breaks position: sticky on every header inside it - and the utility stylesheet already shipped clip on this same element, so the site carried both. */ overflow-x: clip; } /* ---- type ------------------------------------------------------------- */ h1, h2, h3 { margin: 0; line-height: 1.12; font-weight: 700; letter-spacing: -0.015em; /* No orphan on the last line of a heading, and no ugly break in a two-word phrase. Falls back to normal wrapping where unsupported, so it costs nothing to have. */ text-wrap: pretty; } /* NEVER text-wrap: balance, anywhere, in any system. It is pretty or it is nothing. Balancing re-flows the whole heading to even the line lengths, so the same words break differently at two widths a few pixels apart and a headline approved at one size is a different shape at another. Pretty only rescues the last line and leaves the rest alone, which is the part that was actually wrong. Checked by assertNoBalance, not trusted. */ /* Body copy too - same orphan problem, and cheaper than fixing widows by hand. */ p, li { text-wrap: pretty; } /* The hero is off the interior scale on purpose: a restaurant wants a loud hero and quiet interior headings, and one ratio cannot do both. */ h1 { font-size: clamp(34px, 6.2vw, 70px); } h2 { font-size: clamp(26px, 3.4vw, 41px); } h3 { font-size: 23px; line-height: 1.25; } p { margin: 0; max-width: var(--measure); } .orca-lead { font-size: 19px; color: var(--ink-muted); } /* 12/700/.22em IN THE ACCENT (playbook §2; rule design/push-the-type-scale): small, wide-set and bold, so the label reads as a label and never as a second heading. */ .orca-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); } /* THE EYEBROW'S MARK - a short bar of the eyebrow's own color before the text. One repeatable brand element, one rule: every template already puts its label in this class, and currentColor keeps the bar right on every surface - accent on ground, white on a photograph - with no per-surface exceptions to maintain. */ .orca-eyebrow::before { content: ''; display: inline-block; width: 20px; height: 2px; background: currentColor; vertical-align: 0.18em; margin-right: 10px; } /* ---- the grid --------------------------------------------------------- */ /* EVERY section puts its content in the same column, full-bleed ones included, so nothing drifts out of alignment as you scroll. THE BAND'S OWN PADDING SETTING WINS, THE RHYTHM IS THE FALLBACK. Every band writes its padding as an Elementor setting (the 12 Aug decision), and Elementor emits it as --padding-top/-right/-bottom/-left custom properties at element specificity - but the properties only matter if something consumes them, and Elementor's own consumer is an early .e-con rule this class rule silently outranked. So the featured band's flush seam, the carousel's tuck and the whole store rhythm sat in the page data and never reached the screen (surfaced 9 Sep, when "shrink padding to snug" visibly did nothing). One rule, both layers: consume the band's variables, fall back to the reading rhythm - which is also exactly what the plain-HTML previews get, where no variables exist. */ .orca-section { padding: var(--padding-top, var(--pad)) var(--padding-right, var(--gutter)) var(--padding-bottom, var(--pad)) var(--padding-left, var(--gutter)); } .orca-inner { max-width: var(--grid); margin: 0 auto; width: 100%; } .orca-inner.orca-wide { max-width: var(--grid-wide); } /* ---- relationship spacing --------------------------------------------- */ /* An eyebrow, its heading and its paragraph are ONE idea and are spaced tightly. Space between ideas is larger than space within one - that is the whole of it, and using a single uniform gap is what made this look off. */ .orca-group { display: flex; flex-direction: column; align-items: inherit; } .orca-group > .orca-eyebrow + * { margin-top: var(--tight); } .orca-group > h1 + *, .orca-group > h2 + *, .orca-group > h3 + * { margin-top: var(--snug); } .orca-group > p + p { margin-top: var(--snug); } .orca-group > p + .orca-btns, .orca-group > .orca-lead + .orca-btns { margin-top: var(--loose); } .orca-group > .orca-duo-list + .orca-btns { margin-top: var(--loose); } .orca-group > h2 + .orca-duo-list { margin-top: var(--snug); } .orca-blocks { display: flex; flex-direction: column; gap: var(--block); } /* ---- surfaces --------------------------------------------------------- */ .orca-ground { background: var(--ground); } .orca-recessed { background: var(--recessed); } /* THE CTA SURFACE IS A GRADIENT ON A DEEPENED ACCENT (playbook §1/§3; rules design/gradient-saturated-surfaces, design/giant-fact-cta-band): 160deg from the accent taken to 4.5:1 under white text, to a partner 25% darker. Flat var(--brand) shipped white on whatever the brand was. */ .orca-statement{ background: linear-gradient(160deg, var(--cta) 0%, var(--cta-deep) 100%); color: var(--reversed); } .orca-statement .orca-eyebrow { color: rgba(255,255,255,.75); } .orca-statement p { color: rgba(255,255,255,.88); } /* HEADINGS ON A LOUD BAND ARE REVERSED, AND SAYING IT ONCE IS NOT ENOUGH. The surface set its own color and let the headings inherit — but Elementor's kit writes the heading color DIRECTLY onto the widget (.elementor-widget-heading .elementor-heading-title { color: brand }), and a direct rule beats an inherited one however loud the parent is. The result shipped: a brand-blue headline on a magenta band, the exact brand-on-accent the rule forbids. Two classes on the left of the descendant beats Elementor's two, so this wins on specificity rather than on !important. Every level, because a band is not always headed by an h2. */ .orca-section.orca-statement h1, .orca-section.orca-statement h2, .orca-section.orca-statement h3, .orca-section.orca-statement h4, .orca-section.orca-statement h5, .orca-section.orca-statement h6, .orca-section.orca-statement .elementor-heading-title, .orca-section.orca-accent-cta h1, .orca-section.orca-accent-cta h2, .orca-section.orca-accent-cta h3, .orca-section.orca-accent-cta h4, .orca-section.orca-accent-cta h5, .orca-section.orca-accent-cta h6, .orca-section.orca-accent-cta .elementor-heading-title, .orca-section.orca-photographic h1, .orca-section.orca-photographic h2, .orca-section.orca-photographic h3, .orca-section.orca-photographic .elementor-heading-title { color: var(--reversed); } /* ---- buttons ---------------------------------------------------------- */ .orca-btns { display: flex; gap: var(--snug); flex-wrap: wrap; align-items: center; } /* MARKETPLACES SIT BENEATH, AS WORDS (rule ordering/marketplace-secondary): "Also on DoorDash · Uber Eats" under the client's own buttons, smaller than the body and never a pill. The links are underlined so they still read as links on any surface; the color is the surface's own. */ .orca-also-on p { font-size: .875em; margin: 0; opacity: .85; } .orca-also-on a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .orca-also-on a:hover { opacity: 1; text-decoration-thickness: 2px; } /* 8 and 32, both on the spacing scale - the previous 15/30 was on neither. A wide, shallow button: the horizontal padding is what makes it read as a button, and the vertical padding was only ever making it tall. inline-flex rather than inline-block at every width, so the label stays centered when the mobile rule below raises the height. One layout mode, not one per breakpoint. */ .orca-btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 32px; border-radius: var(--radius); font-size: 16px; font-weight: 600; text-decoration: none; background: var(--accent); color: #fff; border: 2px solid var(--accent); transition: background .2s ease, color .2s ease; } /* THE HOVER IS A STYLE SWAP (Nick, 30 Aug): solid hovers to its own outline, outline hovers to solid - text by contrast - the border NEVER changes and is 2px everywhere, so the swap costs no layout shift. The built site says the same in utility-css.orca-ts; this is the preview agreeing. */ .orca-btn:hover { background: transparent; color: var(--accent); } .orca-btn-out { background: transparent; color: var(--brand); border-color: var(--brand); } .orca-btn-out:hover { background: var(--brand); color: #ffffff; } .orca-statement .orca-btn { background: #fff; color: var(--brand); border-color: #fff; } .orca-statement .orca-btn:hover { background: transparent; color: #fff; } .orca-statement .orca-btn-out { background: transparent; color: #fff; border-color: #fff; } .orca-statement .orca-btn-out:hover { background: #fff; color: var(--accent); } .orca-photo .orca-btn-out { color: #fff; border-color: #fff; } .orca-photo .orca-btn-out:hover { background: #fff; color: var(--ink); } /* ---- photographic bands ----------------------------------------------- */ /* Vertical placement is a rule, not a system setting, and the two cases differ: THE OPENING HERO sits at the BOTTOM. It is the tallest thing on the site and the only one whose photograph has room to be a photograph - bottom-aligned text leaves the top two-thirds of the image alone, and it puts the headline next to the fold, which is where the eye already is when the page settles. It is also where the scrim is darkest, so the two agree. EVERY LATER BAND is CENTERED. A later band is half the height, so there is no spare image to protect, and bottom-aligned text in a short band reads as text that has fallen over rather than text that has been placed. */ .orca-photo { position: relative; display: flex; align-items: center; background-size: cover; background-position: center; color: var(--reversed); padding: var(--pad) var(--gutter); } .orca-photo.orca-hero { align-items: flex-end; } .orca-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top right, rgba(35, 29, 19,.72) 0%, rgba(35, 29, 19,.4) 45%, rgba(35, 29, 19,0) 80%); } /* THE OPENING HERO'S DUAL OVERLAY (playbook §3 Video hero, §7; rule design/video-hero): the directional scrim where the words sit plus a shade from the top edge for the header, both in the pair's own dark. Layered as playbook §7 has it: the film (Elementor's video container) at the bottom, this overlay at 1, the words at 2. */ .orca-photo.orca-hero::after { background: linear-gradient(to bottom, rgba(35, 29, 19,.55) 0%, rgba(35, 29, 19,.18) 22%, rgba(35, 29, 19,0) 38%), linear-gradient(to top right, rgba(35, 29, 19,.72) 0%, rgba(35, 29, 19,.4) 45%, rgba(35, 29, 19,0) 80%); z-index: 1; pointer-events: none; } .orca-photo.orca-hero > .orca-inner, .orca-photo.orca-hero > .e-con-inner { position: relative; z-index: 2; } /* The film at 0, STATED (rule wordpress.orca-video-hero-z-order): the video container paints above ::before at an equal z-index, so its layer is pinned rather than left to Elementor's default. 0-3-0, above the widget CSS that loads after the kit. */ .orca-photo.orca-hero > .elementor-background-video-container { z-index: 0; } /* Content sits in the same 1200px column as every other section. */ .orca-photo .orca-inner { position: relative; z-index: 1; } .orca-photo .orca-group { } /* BUTTONS FOLLOW THE TEXT ABOVE THEM. The group centers its text but the button row is a 100%-wide flex box, so align-items cannot move its contents — the hero shipped centered words over left-parked buttons. Every other centered context (.orca-solo, mobile) already carries this rule; the photographic band was the missing joint. */ .orca-photo p { color: rgba(255,255,255,.92); } .orca-photo .orca-eyebrow { color: rgba(255,255,255,.8); } /* EXACTLY ONE VIEWPORT MINUS THE CHROME, never taller (playbook §4b). The per-system vh was a guess at this number; dvh states it, and the vh line is the fallback for browsers without dvh. On short viewports the hero TIGHTENS instead of growing: the band must still end at the fold. */ .orca-hero { min-height: max(60vh, calc(100vh - var(--chrome-h))); min-height: max(60vh, calc(100dvh - var(--chrome-h))); } @media (max-width: 1024px) { /* The top bar stays (hours + accounts), so the chrome is unchanged; only a bar with nothing to show drops out, and then the header is the chrome. */ :root:not(:has(.orca-topbar .orca-topbar-hours, .orca-topbar .orca-topbar-social)) { --chrome-h: var(--header-h); } } @media (max-height: 800px) { .orca-hero .orca-group { gap: var(--snug); } } /* SHORT WINDOWS SPREAD WIDER, THEY DO NOT GROW (playbook §4b; rule design/hero-height-dvh-minus-chrome): at 860px tall the words take a 960px block, at 760px the full grid, a smaller headline and no roundel, so the band still ends at the fold. */ @media (max-height: 860px) and (min-width: 1025px) { .orca-photo.orca-hero .orca-group { max-width: 960px; } } @media (max-height: 760px) and (min-width: 1025px) { .orca-photo.orca-hero .orca-group { max-width: none; } .orca-photo.orca-hero h1, .orca-photo.orca-hero h1.elementor-heading-title, .orca-photo.orca-hero .elementor-widget-heading h1 { font-size: clamp(34px, 4.6vw, 56px); } .orca-section.orca-hero .orca-roundel.e-con { display: none; } } /* THE SHOWCASE OPENING is the same height law: one viewport minus the chrome, set here rather than as a 75vh Elementor setting that competed. */ .orca-hero-split { min-height: calc(100vh - var(--chrome-h)); min-height: calc(100dvh - var(--chrome-h)); } /* The COMPACT title band, ~14vh. For utility pages (recipes.orca-ts names them — COMPACT_TITLE_RECIPES): the locations index, the checkout funnel, legal. Their titles are labels, not arrivals, and a 30vh band before a list of addresses is throat-clearing. */ .orca-title-band.orca-compact { min-height: 14vh; } .orca-title-band.orca-compact h1 { font-size: clamp(1.5rem, 2.5vw, 2.1rem); } /* ---- interior title band ---------------------------------------------- */ /* A PHOTOGRAPH, but a short one. ~30vh against the hero's 75vh. The treatment is the hero's - full-bleed image, scrim, reversed text - and the height is not, because height is what makes the opening hero the opening hero. An interior page is reached deliberately: someone at /about already knows where they are, and a full-height photograph delays the thing they came for. Borrow the language, not the drama. NO PHOTOGRAPH, NO PHOTOGRAPHIC BAND. Where the page has no image of its own it falls back to Ground rather than reaching for stock to fill the slot - invariant 8, and the same rule that turns the contact map into a photograph when there is no address. */ .orca-title-band { position: relative; display: flex; align-items: center; min-height: 30vh; padding: var(--pad) var(--gutter); background: var(--ground); } .orca-title-band h1 { font-size: clamp(30px, 4.4vw, 46px); } .orca-title-band .orca-lead { margin-top: var(--snug); } /* The photographic variant. Same scrim as the hero, so a headline is legible over an unknown image by the same means in both places. */ /* BOTTOM-ALIGNED COPY AND ITS OWN SCRIM (Nick's hand-restyle, 2 Sep). The title band borrowed the hero's directional scrim; his reference darkens only the bottom where the copy now sits. Two stops, transparent to 50% black -- heavier than his 20% floor because Orca cannot see the photograph it will be handed, and white type over a bright sky at 20% is unreadable. The template ALSO sets the scrim as an Elementor background overlay (kit custom CSS is Pro-only, and a CSS-only scrim is no scrim at all without it), so the ::after is gated: exactly one of the two paints. */ .orca-title-band.orca-photo { color: var(--reversed); background-size: cover; background-position: center; justify-content: flex-end; } /* THE KIT OWNS THE SCRIM (playbook §3/§5; rules design/scrims-strong-and-kit-owned, design/title-band-heavy-brand-overlay). The title band's photograph is TEXTURE, never competition: a heavy wash of the brand's own dark over it, 160deg, so the h1 reads over any photo. Bennie's h1s were unreadable under the old transparent-to-50%-black overlay, which Elementor writes into per-page CSS that loads AFTER the kit -- so the kit takes the overlay element itself, with the weight to win. The element's own neutral overlay stays underneath as the fallback for a site with no kit CSS yet. 93-96% END TO END (playbook §3/§4.6): the far stop was .84, so a sixth of the photograph competed with the h1 at the bottom right. */ .orca-title-band.orca-photo:not(:has(.elementor-background-overlay))::after { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(106, 79, 22, .94) 0%, rgba(106, 79, 22, .93) 100%); } .orca-title-band.orca-photo > .elementor-background-overlay { background: linear-gradient(160deg, rgba(106, 79, 22, .94) 0%, rgba(106, 79, 22, .93) 100%) !important; opacity: 1 !important; } .orca-title-band.orca-photo .orca-inner, .orca-title-band.orca-photo .elementor-container { position: relative; z-index: 1; } .orca-title-band.orca-photo p { color: rgba(255,255,255,.92); } .orca-title-band.orca-photo .orca-eyebrow { color: rgba(255,255,255,.8); } /* THE QUIET VARIANT. A tinted band carrying a real material, and ordinary ink - no content photograph, no scrim, no reversed text. PHOTOGRAPHIC + TINT since 16 Sep (Nick), where it used to be two drawn gradients. The drawn version was argued from "a texture file is a request, a thing that can 404" - answered now by the kit pass uploading the approved texture to the site's own media library and the stylesheet only referencing the URL the site read back. While a project has no texture, the drawn fallback below still ships, so the band never depends on a file that is not there. Three layers, each doing one job: the soft off-center highlight so the band is not a dead flat rectangle; the band tint at ~.88 over the material, which is what keeps a headline readable on it; the material itself. */ .orca-title-band.orca-texture { background-color: var(--band-tint); background-image: radial-gradient(120% 90% at 12% 0%, rgba(255,255,255,.6), transparent 62%), linear-gradient(rgba(251, 246, 234, .88), rgba(251, 246, 234, .88)), url('https://1270962.us22.myftpupload.com/wp-content/uploads/2026/09/orca-texture-doodle-shapes.png'); background-size: auto, auto, 640px auto; border-bottom: 1px solid var(--hairline); } .orca-band { min-height: 38vh; } /* ---- components ------------------------------------------------------- */ /* EQUAL HEIGHT IS NOT A DEFAULT YOU CAN ASSUME. align-items:stretch is the initial value, so this looked handled — but the cards are Elementor containers, and Elementor writes its own alignment onto them, which is how a row of three shipped with the middle one hanging lower than its neighbours. Said here explicitly, on both halves of the joint: the row stretches its children, and each card fills what it is given. */ /* A GRID, NOT A FLEX ROW (27 Aug, after two rounds of flexbox refusing to stretch Elementor containers). Grid makes both promises structurally: every column is the same 1fr track, so cards are equal width even on a short wrapped row, and grid items stretch to their row by default, so cards are equal height without a rule Elementor can override. The column count rides in as a class from the template (2-4 by item count; five or six wrap as 3+2 / 3+3, seven or eight as 4+3 / 4+4). The three structural properties carry !important because the cards are Elementor containers and Elementor writes its own flex display and gap onto them. */ /* HALF TRACKS, AND EVERY CARD SPANS TWO. Laid out this way the row is identical to whole tracks - the arithmetic cancels exactly, because the extra gap a card swallows in the middle is the gap the missing track took - and it buys the one thing whole tracks cannot do: a last row of two centered under three columns has to start half a column in. */ .orca-cards { display: grid !important; grid-template-columns: repeat(var(--cards-track, 8), minmax(0, 1fr)) !important; gap: var(--snug) !important; align-items: stretch; } .orca-cards-cols-2 { --cards-track: 4; } .orca-cards-cols-3 { --cards-track: 6; } .orca-cards-cols-4 { --cards-track: 8; } /* Elementor's per-element width (the old flex share) must not shrink a card inside its track; the track IS the width now. */ /* THE SPAN RIDES ON THE END, never the start: a shorthand span sets the START to a span and leaves the end auto, so the moment a tail rule names a start line the card collapses to one half-track. Measured live, 27 Aug. */ .orca-cards > * { grid-column-end: span 2; width: auto !important; max-width: none !important; min-height: 0; } /* THE SHORT LAST ROW FOLLOWS THE HEADING (Nick, 27 Aug). Under a centered heading, a last row hard against the left margin is the small wrongness everyone sees and nobody names. Each card the row is missing pushes it half a column in, which is why the tracks above are halves. The template counts the tail and names it, because a stylesheet cannot count its own children. */ .orca-cards-center-tail.orca-cards-tail-1-2 > *:nth-last-child(1) { grid-column-start: 2; } .orca-cards-center-tail.orca-cards-tail-1-3 > *:nth-last-child(1) { grid-column-start: 3; } .orca-cards-center-tail.orca-cards-tail-2-3 > *:nth-last-child(2) { grid-column-start: 2; } .orca-cards-center-tail.orca-cards-tail-1-4 > *:nth-last-child(1) { grid-column-start: 4; } .orca-cards-center-tail.orca-cards-tail-2-4 > *:nth-last-child(2) { grid-column-start: 3; } .orca-cards-center-tail.orca-cards-tail-3-4 > *:nth-last-child(3) { grid-column-start: 2; } /* COMPACT: A WRAPPED CARD TURNS ON ITS SIDE (Nick, 27 Aug). Five picture cards in three columns leave a torn second row - two tall cards beside a hole. Turned sideways, the face takes a third and the words two thirds, two to a row, and the set reads as a list somebody meant to write. The template decides this, and only for cards that HAVE a face: a plain text card has nothing to put in that third. The COLUMN COUNT IS NOT ITS BUSINESS - the grid still runs up to four across, the cards inside it just lie down. */ .orca-cards-compact .orca-card { display: grid !important; grid-template-columns: 1fr 2fr; align-items: stretch; min-height: 132px; } /* The face is the containing block, so the photograph can fill a cell whose height comes from the words beside it rather than from its own ratio. */ .orca-cards-compact .orca-card > *:first-child { position: relative; min-width: 0; height: auto; } .orca-cards-compact .orca-card img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; } /* A CARD WITH NO FACE TAKES THE WHOLE WIDTH. One dish in a set can be waiting for its photograph, and a lone body in a two-column card would otherwise be squeezed into the third the missing picture left (seen live, 27 Aug: a five-card set where the fifth had no photo yet). */ .orca-cards-compact .orca-card > *:only-child { grid-column: 1 / -1; } /* An icon or a numeral has no cropping to do - it sits in the middle of its third instead. */ .orca-cards-compact .orca-card .orca-icon, .orca-cards-compact .orca-card .orca-num { display: flex; align-items: center; justify-content: center; height: 100%; padding: var(--snug); margin: 0; } .orca-card { flex: 1 1 0; min-width: 0; background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; /* A card is a thing sitting ON the page, so it gets the lift. The border stays: on a tinted surface the shadow alone does not define the edge. */ box-shadow: var(--shadow-sm); } /* NO HOVER STATE. These cards are not links. A thing that reacts to the cursor is promising it can be pressed, and a card that lifts and then does nothing is a small lie told to every visitor who tries it. Hover belongs to anchors and buttons, and nothing else. */ a.orca-card, button.orca-btn { transition: box-shadow .18s ease, transform .18s ease; } button.orca-btn { cursor: pointer; font-family: inherit; } a.orca-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } /* THE WHOLE CARD IS THE ANCHOR (contact-multi standard, 27 Aug). The card renders as an a; the text must not go link-blue, and the affordance the old title-link rule worried about is the hover: lift plus an accent border. */ a.orca-card { color: inherit; text-decoration: none; } a.orca-card:hover { border-color: var(--accent); } /* A photograph at the top of the card. Three text cards in a row are three paragraphs wearing borders; a picture is the thing people actually look at. Ordinary landscape, never square: a card is already a narrow column, and a square picture at the top of one pushes the heading that explains it too far down. Square crops belong in the two-column rows, where the picture has half a page to fill. */ .orca-card img { width: 100%; aspect-ratio: 1.0000; object-fit: cover; display: block; } /* flex:1 on the body is what makes the equal height MEAN something: the body takes the slack, so two cards of different lengths end up the same height with their text top-aligned, rather than one card padded out at the bottom. Padding is --snug rather than --loose: at --loose a three-word card was mostly margin. */ .orca-card-body { padding: var(--snug); display: flex; flex-direction: column; flex: 1 1 auto; } .orca-card h3 + p { margin-top: var(--tight); } .orca-card p { font-size: 16px; color: var(--ink-muted); max-width: none; } /* The icon variant's face: a registry SVG (templates/icons.orca-ts), stroked in currentColor so the accent colors it, sitting where the image face would. line-height 0 stops the wrapping text widget adding a phantom text row. */ .orca-card .orca-icon { padding: var(--loose) var(--loose) 0; line-height: 0; } /* 48px AT 1.35. At 44 and 1.6 the icon is a bullet that wandered up from the list it replaced; a card whose picture is smaller than its heading has not become a card. The stroke weight is set here rather than in the markup so one number governs every icon in the registry. */ .orca-card .orca-icon svg { width: 48px; height: 48px; color: var(--accent); stroke-width: 1.35; } /* NUMBERED TILES (playbook §3; rule design/numbered-tiles): 01-04 in the display face and the accent, and ONE brand inversion tile per row - the brand's gradient (deepened until white holds 4.5:1), reversed words - so an offer board reads as a board and not as four equal boxes. */ .orca-card .orca-num, .orca-card .orca-num .elementor-heading-title { font-family: var(--font-head, inherit); font-size: clamp(34px, 3.2vw, 48px); font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--accent); font-variant-numeric: tabular-nums; } .orca-card > .orca-num { padding: var(--loose) var(--snug) 0; margin: 0; } .orca-cards .orca-card.orca-card-invert { background: linear-gradient(160deg, rgb(106, 79, 22) 0%, var(--dark) 100%); border-color: transparent; color: #fff; } .orca-cards .orca-card.orca-card-invert .elementor-heading-title, .orca-cards .orca-card.orca-card-invert h3 { color: #fff; } .orca-cards .orca-card.orca-card-invert p { color: rgba(255,255,255,.88); } .orca-cards .orca-card.orca-card-invert .orca-num .elementor-heading-title, .orca-cards .orca-card.orca-card-invert .orca-num { color: var(--accent-soft); } /* The actionable section under the hero: photograph on one side, the two things you want pressed on the other. */ .orca-feature { display: flex; gap: clamp(32px, 5vw, 64px); align-items: center; } .orca-feature > * { flex: 1 1 0; min-width: 0; } /* Near-square, and the SAME ratio the duo band uses - they are one situation, a picture beside a block of text, so they take one value. The cap stops a 1:1 crop becoming a 900px wall on a wide monitor: past that height the picture crops instead of growing. */ .orca-feature img, .orca-split img { width: 100%; aspect-ratio: 1.0000; max-height: 62vh; object-fit: cover; border-radius: var(--radius); display: block; /* A photograph on a white ground has no edge of its own. The shadow gives it one without a border, which would fight the image. */ box-shadow: var(--shadow-md); } .orca-feature.orca-rev { flex-direction: row-reverse; } .orca-split { display: flex; gap: clamp(32px, 5vw, 64px); align-items: center; } .orca-split > * { flex: 1 1 0; min-width: 0; } /* A grid, not a flex row, because a photo grid is the one place invariant 5 does not apply: photographs are not a row of content blocks that has to become a column, they are a set. One photograph per screen on a phone turns a nine-image grid into nine screens of scrolling and reads as nine separate statements. Two columns keeps it a set. */ .orca-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--snug); } .orca-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); display: block; box-shadow: var(--shadow-sm); } /* --- The menu, and Elementor's own gallery --------------------------------- APPEARANCE ONLY. Neither of these sets a column count or a direction: the menu's columns are the container's flex settings and the gallery's are the widget's own gallery_columns, so an owner can change either in the editor without anybody touching CSS. The rule that made that necessary is two doors up — .orca-gallery is a CSS grid, and a grid beats a container's flex, which is how a photograph ended up 111px wide inside a 357px cell. */ /* Elementor's gallery widget carries or-photos, deliberately NOT or-gallery above, so the grid does not take the layout back off the widget. */ .orca-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); display: block; box-shadow: var(--shadow-sm); } /* THE DOTTED LEADER, which is the whole visual idea of a menu: it ties the dish to its price across the gap, so the eye does not have to travel back. Elementor's price-list widget already puts the title, the leader and the price in one header — this only colors it. */ /* THE DIETARY LEGEND. Quiet, under the list, and text throughout: the marks are letters, so the key is letters. Never a row of glyphs. */ .orca-diet-key { color: var(--ink-muted); font-size: 14px; } .orca-diet-key b { color: var(--ink); font-weight: 700; } /* THE FREESTANDING TREATMENT (Nick, 30 Aug): every photograph that stands on the page - beside a menu, in a feature, in a split - takes the same radius and quiet shadow, so the pictures read as one set. Full-bleed bands (duo, photo-band, hero) are the page itself and take neither. */ .orca-menu-media img { width: 100%; object-fit: cover; display: block; border-radius: var(--radius); box-shadow: var(--shadow-md); /* SQUARE, BY RULE. The balance arithmetic in templates/menu.orca-ts stands in PHOTO_UNITS dishes for this picture, and a natural-aspect image made that number a guess - a portrait shot blew past it and the columns ended ragged (Nick, 30 Aug). The crop and the constant are one decision: change one, change both. */ aspect-ratio: 1 / 1; } /* TEN, NOT TWENTY. Elementor writes its default item gap per element at (0,2,0); importance is the one thing that outranks it, and the widget's own space_between setting is also set to 10 so a regenerated page agrees. */ .orca-price-list li:not(:last-child) { margin-bottom: 10px !important; } .orca-price-list .elementor-price-list-item { padding: 0; } .orca-price-list .elementor-price-list-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; } /* THE PRICE WEARS THE DISH NAME'S EXACT STYLE (Nick, 30 Aug) - one shared declaration, and both INHERIT size and color from the header they share, so they cannot drift apart whatever the widget's own defaults say. The family comes from the Subheads token in utility-css, for both. */ .orca-price-list .elementor-price-list-title, .orca-price-list .elementor-price-list-price { font-weight: 600; font-size: inherit; color: inherit; } .orca-price-list .elementor-price-list-title { white-space: normal; } .orca-price-list .elementor-price-list-separator { flex: 1 1 auto; border-bottom: 1px dotted var(--hairline); min-width: 18px; } .orca-price-list .elementor-price-list-price { font-variant-numeric: tabular-nums; white-space: nowrap; } .orca-price-list .elementor-price-list-description { color: var(--muted); margin: 0; /* NO READING MEASURE INSIDE A LIST COLUMN (Nick, 30 Aug: "remove max-width paragraphs on menu list items"). The global p rule caps prose at var(--measure) - right for an article, wrong here: the column is already narrower than the measure is generous, so the cap only wrapped "Add bacon or ham...$2.95" onto ragged extra lines. The column bounds the line; the paragraph fills it. */ max-width: none; } /* The dish and its description are ONE unit and must not break across a column. A dish name at the foot of the left column with its ingredients at the head of the right is the specific failure a two-column menu produces. */ .orca-menu-col .elementor-price-list > li { break-inside: avoid; page-break-inside: avoid; } /* --- The bones, 18 August -------------------------------------------------- Enough to be legible and judged. The look is Nick's to set in Elementor and hand back; nothing here decides a column count or a direction, for the same reason as the menu above. */ /* Jump links. ONE LINE, NEVER TWO — a wrapped jump bar is a paragraph of links. Past what fits it scrolls sideways, which is a known gesture on a phone and the only honest answer to fourteen courses. */ /* COMPACT, AND SAID WITH !important: the band arrives with Elementor's own per-element section padding at (0,3,0), which a plain class cannot reach - so the old var(--snug) rule silently lost and the strip wore the full section rhythm around one row of chips ("the padding/height is too much", Nick, 27 Aug). A jump bar is chrome, not a section. */ .orca-nav-strip { padding-top: 10px !important; padding-bottom: 10px !important; min-height: 0 !important; gap: 0 !important; } /* AND THE LAYERS INSIDE IT. The band's 10px cap was winning and the strip was STILL 110px tall (Nick, 30 Aug), because the inner and the jumps row are Elementor containers too, each wearing Elementor's own default padding - three nested paddings around one row of chips. Chrome carries exactly one: the band's. */ .orca-nav-strip .orca-inner, .orca-nav-strip .orca-jumps { padding-top: 0 !important; padding-bottom: 0 !important; min-height: 0 !important; } /* The behavior widget is a script in a box; the box must cost no height and no flex gap. display:none removes it from layout and stops nothing - the script has already run by the time paint happens. */ .orca-strip-behavior { display: none !important; } /* GRABBABLE, THE WHOLE BAND: the strip's script pans the chip row under a mouse drag anywhere on the bar (Nick, 2 Sep), so the cursor says so on the band's padding too, and a drag must not smear a text selection behind it. */ .orca-nav-strip { cursor: grab; user-select: none; } .orca-jumps { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; align-items: center; width: 100%; } .orca-jumps::-webkit-scrollbar { display: none; } /* CENTERED WITH AUTO MARGINS, not justify-content. The strip is middle justified in both axes (Nick, 30 Aug) - but justify-content: center on an overflowing flex row clips BOTH ends and the first chips become unreachable, which is exactly the cut-off "…DICT 'BENNIES'" on staging. Auto margins center when the chips fit and collapse to zero when they overflow, so the row starts at the left edge and scrolls. */ .orca-jumps > :first-child { margin-left: auto; } .orca-jumps > :last-child { margin-right: auto; } /* CHIPS REFUSE TO SHRINK. They are Elementor containers, which default to flex-shrink with min-width 0 - so ten categories compressed every chip to a sliver and the nowrap labels printed on top of each other (Nick's phone and tablet screenshots, 27 Aug). Rigid chips are what make the overflow above actually scroll instead of squeeze. */ .orca-jumps > * { flex: 0 0 auto !important; min-width: max-content; } /* Centered while it fits, scrollable from the FIRST chip when it does not: auto margins collapse to zero on overflow, where justify-content center would push the left end outside the scrollable area unreachably. */ .orca-jumps > *:first-child { margin-left: auto; } .orca-jumps > *:last-child { margin-right: auto; } .orca-jump a { display: inline-block; white-space: nowrap; text-decoration: none; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); padding: 8px 14px; border-radius: 999px; } /* QUIET BY DEFAULT, LOUD ONLY WHERE YOU ARE. Ten accent pills in a row is ten things shouting; the strip answers "where am I" only if exactly one chip does. Hover is a whisper (the tint); current is the accent, set by the strip's own scroll-spy as aria-current — an attribute rather than a class because it is also the word a screen reader says out loud. */ .orca-jump a:hover { color: var(--ink); background: var(--band-tint); } /* THE WARMER of brand and accent - see stripLoud above. On a menu the strip sits over food photography and a tinted band; the hotter, more saturated accent shouted at both, and the warmer color reads as part of the meal (Nick, 30 Aug). */ .orca-jump a[aria-current] { color: #fff; background: var(--accent); } /* STICKS UNDER THE CHROME, not behind it. The offset is the header's CURRENT height, published as --chrome-h, because a hard-coded number was correct exactly once — see the playbook, section 3. */ .orca-nav-strip.orca-stick { position: sticky; top: var(--chrome-h, 0px); z-index: 40; } /* A JUMP HAS TO LAND BELOW THE CHROME. The target section slides up under the pinned header and the stuck strip unless it keeps their combined height as scroll margin. Both variables are published by the strip's script and both fall back to 0, so the rule costs nothing on a page with no strip. */ .orca-section[id] { scroll-margin-top: calc(var(--chrome-h, 0px) + var(--strip-h, 0px) + 16px); } /* Smooth, unless the reader's OS asked for no animation. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* One photograph, full bleed. */ .orca-photo-band { display: flex; align-items: center; position: relative; } .orca-photo-band .orca-inner { text-align: center; position: relative; z-index: 1; } /* ONE SCRIM, AND IT IS THE DIRECTIONAL ONE. Drawn only where there are words: has-copy is set by the template when the band carries any. */ .orca-photo-band.orca-has-copy::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top right, rgba(35, 29, 19,.72) 0%, rgba(35, 29, 19,.4) 45%, rgba(35, 29, 19,0) 80%); } /* Somebody else's application. A HARD EDGE rather than a blend: a half-restyled embed reads worse than a clean seam. */ .orca-embed { width: 100%; border-radius: var(--radius); overflow: hidden; } .orca-embed iframe { display: block; width: 100%; border: 0; } /* THE ORDER PAGE'S EMBED FILLS ITS BAND. The band is already full-bleed and viewport-tall (the template sets both), but the ordering plugin sizes its own iframe to a fixed data-height and boxes its wrapper — 900 pixels of storefront floating inside a 100vh band, which is the half-followed rule caught on 25 August: the rule reached the band and stopped at the plugin. The plugin writes inline heights, so !important here is load-bearing. */ .orca-embed-fullbleed .orca-embed { border-radius: 0; } /* NO MINIMUM HEIGHT. A 600px floor was here to stop a collapsed embed, and it quietly contradicted the rule it sat next to: on a short laptop or a phone in landscape it is TALLER than the viewport, so the bottom of the storefront sits below the fold — the exact thing "always in view" forbids. The height above is explicit, so there is nothing left to collapse. */ .orca-embed-fullbleed .olo-embed, .orca-embed-fullbleed .olo-embed iframe { width: 100% !important; max-width: none !important; margin: 0 !important; /* NO HEIGHT HERE ANY MORE. The plugin's embed.orca-js measures the iframe's REAL distance from the top -- admin bar, topbar, header, whatever is actually there -- and sizes to the viewport below it. This rule used to force 100vh minus a variable whose 68px fallback undershot the real header stack by ~80px, so the storefront's cart bar hung below the fold ('iframe getting cut off' -- Nick, 2 Sep). Two sizers, one blind: the sighted one owns the height. */ } /* AND dvh WHERE IT EXISTS. On a phone, 100vh is the viewport with the browser chrome hidden, so an embed sized to it hangs a URL bar's worth below the fold until you scroll. 100dvh is the honest number. Its own rule, after the vh one, so a browser without dvh keeps the fallback rather than dropping the whole declaration block. */ /* CARDS INSIDE THE CONTACT PANEL. Stacked, never a row: they live in half a panel beside the map, and two columns in that space is four words a line. Bordered rather than filled, because the panel is already a surface and a card on a card reads as a mistake. */ .orca-contact-card { border: 1px solid var(--hairline); border-radius: var(--radius); padding: var(--snug); } .orca-contact-card h3 { font-size: 17px; } .orca-contact-card h3 a { color: inherit; text-decoration: none; } .orca-contact-card h3 a:hover { color: var(--brand); text-decoration: underline; } .orca-contact-card p { font-size: 16px; color: var(--ink-muted); } /* Running text. THE MEASURE IS THE POINT — a paragraph running the full grid is unreadable, and that is what happens by default. */ /* PRETTY, NEVER BALANCE (the rulebook's own line): pretty rescues the last line's orphan without re-flowing the whole heading between widths. */ .orca-group h1, .orca-group h2, .orca-group h3, .orca-panel h2, .orca-panel h3 { text-wrap: pretty; } .orca-prose { max-width: var(--measure); text-align: start; } .orca-prose > * + * { margin-top: var(--snug); } .orca-prose h3 { margin-top: var(--loose); } .orca-prose ul, .orca-prose ol { padding-left: 1.2em; } .orca-prose a { color: var(--brand); } /* A LIST ALONE IN A SECTION BECOMES CARDS. At the measure, six short items cap at 55ch and leave two thirds of the row empty, which reads as a section that failed to load rather than one that was composed. Set by the assembler, and only when the list is the whole of the section - a list beside a photograph is already sharing its row and stays a list. */ .orca-list-cards { max-width: none; } .orca-list-cards ul, .orca-list-cards ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--snug); list-style: none; padding-left: 0; margin: 0; } .orca-list-cards li { background: var(--ground); border: 1px solid var(--hairline); border-radius: var(--radius); padding: var(--snug) var(--loose); box-shadow: var(--shadow-sm); } @media (max-width: 767px) { .orca-list-cards ul, .orca-list-cards ol { grid-template-columns: 1fr; } /* PRICES SIT DIRECTLY UNDER THE NAME ON A PHONE. The dotted leader ties a dish to a price ACROSS A GAP; on a narrow column there is no gap worth bridging, and a leader squeezed to 18px reads as damage. So the header wraps, the leader goes, and the price takes the next line - left aligned, because on a phone everything on this list is read down one edge. */ .orca-price-list .elementor-price-list-header { flex-wrap: wrap; } .orca-price-list .elementor-price-list-separator { display: none; } .orca-price-list .elementor-price-list-price { flex-basis: 100%; white-space: normal; } } /* NO RULE FOR .orca-woo, ON PURPOSE. WooCommerce owns every pixel inside a cart, a checkout and an account panel. A half-restyled checkout looks like our page right up until somebody is typing card details, which is the worst possible place for a visual seam, and it is the one screen where a CSS mistake costs a sale rather than a compliment. */ /* ---- the compact checkout (Nick, 2 Sep) -------------------------------- */ /* Billing and shipping in three rows: [first][last] / [address][city][state][zip] / [phone][email]. Placement by ORDER plus a column span, never an explicit grid row, so a store that turns the company field on does not shift the layout. LAYOUT IS OURS, PAINT IS NOT: no color, border, type or button styling aims at a cart, checkout or account panel. */ .woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--snug) var(--tight); align-items: start; } /* A field this rule does not name takes the whole row. */ .woocommerce-billing-fields__field-wrapper > .form-row, .woocommerce-shipping-fields__field-wrapper > .form-row { grid-column: 1 / -1; } #billing_first_name_field, #shipping_first_name_field { grid-column: span 6; order: 1; } #billing_last_name_field, #shipping_last_name_field { grid-column: span 6; order: 2; } #billing_address_1_field, #shipping_address_1_field { grid-column: span 4; order: 3; } #billing_city_field, #shipping_city_field { grid-column: span 3; order: 4; } #billing_state_field, #shipping_state_field { grid-column: span 3; order: 5; } #billing_postcode_field, #shipping_postcode_field { grid-column: span 2; order: 6; } #billing_phone_field { grid-column: span 6; order: 7; } #billing_email_field { grid-column: span 6; order: 8; } /* Everything the store added and this rule has not met -- company, a second address line, a country .elementor-kit-6 -- sits after the three rows on a full line of its own rather than being squeezed into one. */ .woocommerce-billing-fields__field-wrapper > .form-row:not([id$="_name_field"]):not(#billing_address_1_field):not(#billing_city_field):not(#billing_state_field):not(#billing_postcode_field):not(#billing_phone_field):not(#billing_email_field), .woocommerce-shipping-fields__field-wrapper > .form-row:not([id$="_name_field"]):not(#shipping_address_1_field):not(#shipping_city_field):not(#shipping_state_field):not(#shipping_postcode_field) { order: 9; } /* ONE COLUMN ON A PHONE: four fields across 390px is four fields nobody can type in. */ @media (max-width: 700px) { .woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper { display: block; } } /* NO SHAPE DIVIDERS. Business separates Recessed from Ground with a gradient instead — same chunking job, impossible to date, one background declaration rather than a clip-path. See recessedEdge in design-systems.orca-ts. The clip-path version lived here until 12 August 2026, guarded by a sys.orca-shapeDividers field that does not exist on DesignSystem — so the guard had been evaluating to an empty string since the day dividers were dropped. Nothing caught it while the CSS sat in an untyped .orca-mjs; moving it into a .orca-ts file surfaced it in one compile. */ /* The top bar is desktop-only. Below this it cannot hold one line, and the same facts are in the footer. */ /* ON A PHONE THE TOP BAR KEEPS THE HOURS AND THE ACCOUNTS (playbook §3/§4b, rule chrome/top-bar); the phone moves to the fixed action bar, the address to the footer. A bar with neither has nothing to say and goes. */ @media (max-width: 1024px) { .orca-topbar .orca-topbar-item:not(.orca-topbar-hours) { display: none; } .orca-topbar:not(:has(.orca-topbar-hours, .orca-topbar-social)) { display: none; } } @media (max-width: 900px) { /* Once every row is one column wide, every block is alone in its row - so the centering rule above applies to all of them. */ .orca-group { align-items: center; text-align: center; } .orca-group p { margin-inline: auto; } .orca-btns { justify-content: center; } /* EXCEPT WHERE THE SECTION CONTAINS A LIST. A list is read down its left edge. Centering it breaks the one thing that makes it a list - every item starting in the same place - and an icon list is worse still, because the icons stop forming a column and scatter. The ragged left edge that results reads as broken rather than as centered. The whole section opts out, not just the list, because a centered heading above a left-aligned list is a third alignment nobody chose. The has-list class is derived from the rendered markup, never declared by hand. */ .orca-has-list .orca-group, .orca-has-list .orca-group p { text-align: left; margin-inline: 0; } .orca-has-list .orca-group { align-items: flex-start; } .orca-has-list .orca-btns { justify-content: flex-start; } /* invariant 5: rows stack, never a 2 + 1 orphan */ .orca-icon-cards, .orca-split, .orca-feature, .orca-feature.orca-rev, .orca-duo, .orca-contact-split { flex-direction: column; } /* The card grid narrows to two columns here; one column is the phone rule further down. The tail the template counted was for the desktop column count, so it is dropped and re-decided: at two columns the tail is a parity, which the template also names. */ .orca-cards { --cards-track: 4; } .orca-cards > * { grid-column-start: auto; } .orca-cards-center-tail.orca-cards-odd > *:last-child { grid-column-start: 2; } /* Two across, not one. A column of four big numerals is four screens of scrolling for four facts meant to be taken in together. The separator stays VERTICAL, between the two columns - odd items open a row, even items are divided from the one beside them. A horizontal rule between rows would be a different component: it would group the figures into pairs, which is a claim about them that is not true. */ /* A SHORT LAST ROW CENTERS (render/rows-stack): three figures are two and one, and the one sits in the middle under the pair, not hard left. */ .orca-figures, .e-con.orca-figures { flex-wrap: wrap; row-gap: var(--block); column-gap: 0; justify-content: center; --justify-content: center; } /* Each figure keeps its own 2px accent rule (design/stats-band), so the separator between the two columns is still vertical. */ .orca-figure { flex: 0 0 50%; padding: 0 var(--snug); border-left: 2px solid var(--accent); } /* Two columns, never one, and EQUAL TILES (playbook §3, rule media.orca-equal-tiles-hover): the odd last photograph used to span both columns at 16/10, the one unequal tile on the page. */ .orca-gallery { grid-template-columns: 1fr 1fr; } .orca-contact-split .orca-map { flex: none; min-height: 240px; } /* The footer keeps its left edge on a phone. It is mostly lists, and a list is read down its left edge - the same reason has-list exists. */ .orca-foot-top { flex-direction: column; gap: var(--loose); } .orca-foot-legal-row { flex-direction: column; align-items: flex-start; gap: var(--snug); } .orca-foot-legal { margin-left: 0; } /* The band goes edge to edge; its TEXT still lines up with every other section's text. A full-width background is not a license to move the content out of the page's grid. */ .orca-duo-block { padding: var(--pad) var(--gutter); } /* The inline nav becomes a trigger, and the CTA leaves the header for the bottom of the screen - see .orca-cta-bar. The header is now identity and navigation, nothing else. */ .orca-nav { display: none; } /* THE COMPACT HEIGHT, from the first paint. A phone header holds a small logo and one trigger; the full 68px bar around them read as dead space ("mobile header has big empty space" - Nick, 30 Aug). Same number as the scrolled state, so nothing jumps when the pin arrives. */ .orca-site-header { height: var(--header-h-compact); } .orca-site-header .orca-logo img { max-height: calc(var(--header-h-compact) - 12px); } /* LOGO HARD LEFT, TRIGGER HARD RIGHT, NOTHING BETWEEN (Nick, 30 Aug). The desktop bar packs three explicit columns from the left - 18 / 60 / 22 - and that is right when all three exist. On a phone the columns collapse to auto width, the row gap goes to zero, and space-between hands ALL the slack to the middle - the one case where space-between is correct, because only the two edges hold anything. !important because Elementor writes the desktop widths as element-specific rules that outrank a bare class. */ .orca-site-header > .orca-inner { justify-content: space-between; gap: 0; } .orca-site-header .orca-brand, .orca-site-header .orca-header-right, .orca-site-header .orca-nav { width: auto !important; flex: 0 0 auto; } /* ON A BUILT SITE THE TRIGGER IS ELEMENTOR'S OWN - chrome.orca-js targets .elementor-menu-toggle first, and it lives INSIDE the nav widget. So the nav column does not vanish: it collapses to exactly that trigger, hard against the right edge. The horizontal menu inside it is what goes. The bare display:none on .orca-nav above still covers the preview, whose nav is plain links with its own trigger markup in .orca-header-right. */ .orca-nav:has(.elementor-menu-toggle) { display: flex; justify-content: flex-end; } .orca-nav .elementor-nav-menu--main { display: none !important; } /* The template's own trigger box is a placeholder with nothing in it on a built site - Elementor's trigger does the job - and an invisible 44px square at the hard right is exactly why the visible trigger sat mid-bar. Empty, it goes; the preview's trigger carries an SVG and stays. */ .orca-nav-toggle:empty { display: none; } .orca-nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto; background: none; border: 0; color: inherit; cursor: pointer; } .orca-header-cta { display: none; } .orca-cta-bar { display: block; } /* Clear of the action bar rather than on top of it. */ .orca-to-top { bottom: 104px; } /* NO BODY PADDING (Nick, 27 Aug). The 104px bottom pad cleared the floating action bar but showed as a dead band under the footer on every phone. Removed on his call; the footer itself carries enough bottom padding that only the last few pixels ride behind the bar. */ /* 8px of padding makes a button about 39px tall, which is under the 44px minimum tap target. The PADDING is the design decision and it does not change; a floor on the height is added instead, and only here - a mouse has no such requirement, so the desktop button stays exactly as drawn. */ .orca-btn { min-height: 44px; } .orca-duo-media { aspect-ratio: 16/10; max-height: none; } } /* ---- the top bar ------------------------------------------------------ */ /* Hours, address, phone — on ONE line above everything, desktop only. These are reference facts, not an argument: they belong where a returning visitor's eye already goes, not occupying the best position on the page directly under the hero. Hidden below 1024px, where a single line cannot hold them and where the same facts live in the footer instead. */ /* THE RESTAURANT BAR IS THE ACCENT; everyone else gets near-black. Restaurant is the system whose loud color IS the identity - the bar reads as the awning over the door, and a near-black strip on a café reads as a different site's chrome. The standard is Nick's hand-built bar (30 Aug): background bound to the kit's global accent. On a built site the template carries that binding as a SETTING (site-header.orca-ts); this rule is the same color for the preview and the fallback. Business and creative keep near-black: a saturated bar across a supplier's page spends the loudest color on the least important content. Where the ground is dark the loud color goes on the ICONS; on the accent ground the icons go white, because accent-on-accent is invisible and two loud colors fight over 15px. */ .orca-topbar { position: relative; z-index: 40; background: var(--dark); color: #fff; /* A FIXED 40px STRIP (Nick's hand-restyle, 2 Sep): zero vertical padding, min-height carries the height, facts left and accounts right. */ font-size: 13px; padding: 0 var(--gutter); min-height: 40px; display: flex; align-items: center; } /* WIDGETS AT THEIR OWN WIDTH. Elementor widgets default to 100% and two of them in a row squish and wrap -- the accounts dropped under the facts. */ .orca-topbar .orca-inner > .elementor-element { width: auto; } .orca-topbar .orca-topbar-social { margin-left: auto; flex: none; } .orca-topbar .orca-topbar-social .elementor-social-icons-wrapper { display: flex; flex-wrap: nowrap; } .orca-topbar .orca-topbar-social .elementor-social-icon { background: transparent; } /* THE ACCOUNTS WEAR THE BAR'S OWN COLOR (rule design/prefixed-utility-classes). The template passed a literal white into the widget's settings; the look is this rule now, so the icons follow the bar wherever the bar's color is decided. Elementor's own default paints the glyph white at one class and one element; three classes outrank it. */ .orca-topbar .orca-topbar-social .elementor-social-icon, .orca-topbar .orca-topbar-social .elementor-social-icon i { color: inherit; } .orca-topbar .orca-topbar-social .elementor-social-icon svg { fill: currentColor; } /* SIZED HERE AND IN THE MARKUP BOTH. An unsized inline SVG fills its container - the staging site drew a map pin the height of the screen before the kit CSS landed. The width/height attributes in the template are the seatbelt; this is the rule. */ .orca-topbar svg { color: var(--chrome); opacity: 1; width: 15px; height: 15px; flex: none; } .orca-topbar .orca-inner { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--loose); width: 100%; } /* THE TEXT ELEMENTS DIRECTLY, not only by inheritance from the bar. The kit's theme style writes the body color onto widget text at higher effective priority than a color inherited from .orca-topbar, which is how a red bar shipped with near-black words on it (Nick, 30 Aug). The row's own color is the rule just below, stated on the row. */ .orca-topbar p, .orca-topbar .orca-topbar-item, .orca-topbar a { color: inherit; } /* THE ROW WEARS THE BAR'S INK DIRECTLY (rule design/prefixed-utility-classes). The row sits inside a text widget, and the kit's text color lands on the widget's wrapper - so the row inherited near-black from there, not the bar's white, and the template wrote the color inline on the row to win. Stated here at two classes on the row itself, the inline style is gone: white on the dark bar, and on the restaurant's accent bar the ink its contrast allows (--on-accent). */ .orca-topbar .orca-topbar-row { color: #fff; } /* THE BUILT bar's inner is an Elementor container, and containers arrive wearing Elementor's own default padding - which stacked inside the bar's 9px and fattened a one-line strip. The bar's padding is the bar's. */ .orca-topbar .orca-inner { padding-top: 0 !important; padding-bottom: 0 !important; min-height: 0 !important; } /* The BUILT bar's row. On a real site the items live inside one text widget (Elementor wraps every widget in its own divs, so flex on .orca-inner would lay out the wrappers, not the items); the row div is markup the template controls, and it carries the same layout the preview's .orca-inner does. */ .orca-topbar-row { display: flex; align-items: center; gap: var(--loose); min-width: 0; } .orca-topbar-body { width: 100%; } .orca-topbar-body p { margin: 0; } .orca-topbar-item { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } .orca-topbar-item svg { flex: none; } .orca-topbar-right { margin-left: auto; display: inline-flex; gap: var(--snug); } .orca-topbar a { text-decoration: none; } .orca-topbar a:hover { text-decoration: underline; } /* ---- the site header -------------------------------------------------- */ /* Logo left, navigation right, ONE solid button at the far right. The button is the header's commercial job and the reason the arrangement is worth standardizing: it is the only call to action visible from every scroll position on every page. There is exactly one, and it is the same action the page's Statement section asks for - two different asks in two places is two people arguing. THIS SYSTEM SITS THE HEADER ABOVE THE HERO, solid, in one color, at one height. Business pages are an argument rather than an image and the header is a tool; a tool is more useful sitting still. */ /* HEADER HEIGHT IS A TOKEN, not a consequence of its contents. It has to be a known number because the transparent variant offsets the hero by exactly it, and because a header that changes height when a nav item is renamed is a header that shifts the whole page. */ .orca-site-header .orca-logo img { /* The bar is a fixed --header-h and compacts to --header-h-compact, so the logo has to fit inside the SMALLER of the two. A client's own artwork is the commonest thing that breaks a header, and it arrives at whatever size it arrives at, so the ceiling is enforced here rather than trusted. */ max-height: calc(var(--header-h-compact) - 8px); width: auto; object-fit: contain; } /* THE LOGO STARTS AT THE LEFT EDGE OF ITS COLUMN, always. Elementor's image widget centers itself in its wrapper, so the mark floated mid-way across the brand box ("logo should always be left positioned" - Nick, 30 Aug). The template writes align: left as a setting; this is the same decision in the stylesheet. */ .orca-site-header .orca-brand { justify-content: flex-start; } .orca-site-header .orca-brand .orca-logo, .orca-site-header .orca-brand .orca-logo-text { text-align: left; } .orca-site-header.orca-compact .orca-logo img { max-height: calc(var(--header-h-compact) - 12px); } .orca-site-header { /* NOT STICKY AT REST. A header pinned from the first pixel permanently covers whatever the page puts at its own top, and the page has no idea the header is there. It sits in the document until it has scrolled out of view, and only then pins. */ position: static; z-index: 50; display: flex; align-items: center; height: var(--header-h); padding: 0 var(--gutter); /* Height and color are the only things that change on scroll, and both are transitioned so nothing jumps under the reader's eye. */ transition: height .2s ease, background-color .2s ease, box-shadow .2s ease, transform .24s ease; } /* PINNED once it has scrolled past its own height — not a round number, so it arrives at the moment it would otherwise have left the screen and nothing jumps. */ .orca-site-header.orca-pinned { position: fixed; top: var(--iw-pin-top, 0); left: 0; right: 0; } /* Gone on the way down, back on the way up. Transform rather than display, so it slides out rather than disappearing, and so nothing below it reflows. Scoped to .orca-pinned: unscoped it drags the resting header off the page. THE PIN OFFSET RIDES ALONG - the plugin sets --iw-pin-top under the WordPress admin bar, and a header pinned 46px down that slides up by only its own height leaves a 46px slice of itself on screen forever ("doesn't disappear" - Nick, 30 Aug). Both dialects say the same distance. */ .orca-site-header.orca-pinned.orca-gone { transform: translateY(calc(-100% - var(--iw-pin-top, 0px))); } @media (prefers-reduced-motion: reduce) { .orca-site-header, .orca-to-top, .orca-cta-bar, .orca-nav-panel { transition-duration: .01ms; } } /* SOLID, ABOVE THE HERO. One color, no scroll-dependent contrast — AND COMPACT FROM THE FIRST PAINT. A transparent header costs the page nothing; a solid one pushes the whole page down by its own height before anybody has read a word, so it takes the smaller of the two. Same number as the scrolled state, so a page that opens solid and a page that has been scrolled are never two different heights. */ .orca-site-header { background: var(--ground); border-bottom: 1px solid var(--hairline); height: var(--header-h-compact); } .orca-site-header .orca-logo { color: var(--brand) !important; } /* --main for the same reason as the over-hero system: the phone panel's links are a.elementor-item too, and they belong to chrome.orca-css. */ .orca-site-header .orca-nav a, .orca-site-header .elementor-nav-menu--main a.elementor-item { color: var(--ink) !important; } /* COMPACTED. Applied by the one line of script at the foot of the page once the reader is 100px in. Solid at every system, because past the hero there is no longer a photograph to be transparent over, and a header that stays see-through across the body of a page is a header you cannot read. */ .orca-site-header.orca-compact { height: var(--header-h-compact); background: var(--ground) !important; color: var(--ink); box-shadow: var(--shadow-md); } .orca-site-header.orca-compact .orca-logo { color: var(--brand) !important; } .orca-site-header.orca-compact .orca-nav a, .orca-site-header.orca-compact .elementor-nav-menu--main a.elementor-item { color: var(--ink) !important; } .orca-site-header.orca-compact .orca-nav a::after { background: var(--chrome) !important; } /* The BAR spans the window; its CONTENTS sit in the wide grid. */ .orca-site-header > .orca-inner { display: flex; align-items: center; gap: var(--loose); } .orca-logo { font-weight: 800; font-size: 20px; letter-spacing: -.02em; text-decoration: none; white-space: nowrap; } /* ONE LINE, ALWAYS. The item ceiling is a budget; this is the actual rule. A wrapped nav is the 25 August build's fourteen items in five rows, and the fix then was to cap the count — which only makes wrapping less likely, not impossible: seven short words fit where seven long ones do not. nowrap states it, and the gap closes under pressure rather than the bar breaking. The browser pass fails a build where the row is not one line. */ .orca-nav { display: flex; align-items: center; margin-left: auto; flex-wrap: nowrap; min-width: 0; gap: clamp(var(--snug), 1.7vw, var(--loose)); } .orca-nav a { position: relative; text-decoration: none; font-size: 16px; font-weight: 550; white-space: nowrap; padding: 4px 0; } /* An underline that grows from the middle, not a color change: on a transparent header over an unknown photograph, a color change may be invisible. A line is a line on anything. */ .orca-nav a::after { content: ''; position: absolute; left: 50%; right: 50%; bottom: 0; height: 2px; background: var(--chrome); transition: left .18s ease, right .18s ease; } .orca-nav a:hover::after, .orca-nav a[aria-current="page"]::after { left: 0; right: 0; } .orca-header-cta { flex: none; } /* IT SHRINKS ITS PADDING, NEVER ITS HEIGHT. Height is what a thumb finds, and a button that loses 6px of it to make room on a narrow bar has stopped being a target to save space nobody was short of. Between 900 and 1024 the bar is tight and the button is still in it; below 900 the button is not here at all - it has moved to the quick action bar. */ @media (max-width: 1024px) { .orca-header-cta .orca-btn { padding-left: 20px; padding-right: 20px; } } /* The trigger only exists below the nav breakpoint. */ .orca-nav-toggle { display: none; } /* ---- the mobile call to action ---------------------------------------- */ /* ON A PHONE THE CALL TO ACTION LEAVES THE HEADER ENTIRELY and becomes a floating bar at the BOTTOM of the screen. The header is the worst place for it on a phone. A one-handed grip puts the thumb at the bottom of the device; the top corners are the hardest region to reach and the one most likely to need a hand shuffle. Putting the single action the site exists to get in the least reachable corner, next to the menu trigger it competes with, is a self-inflicted wound. So on a phone the header goes back to two things - identity and navigation - and the action sits under the thumb, centered, on every screen and every page. It reveals on scroll rather than being present from the first frame: the hero already carries the same two buttons, so a floating copy over the top of them is the same offer twice. */ .orca-cta-bar { position: fixed; z-index: 55; left: 0; right: 0; bottom: 0; display: none; padding: var(--snug) var(--gutter) calc(var(--snug) + env(safe-area-inset-bottom, 0px)); /* A SOLID SURFACE AND A HAIRLINE, never a gradient fade (playbook §3, rule chrome/mobile-action-bar-solid): the fade let body copy show through behind the buttons. */ background: var(--ground); border-top: 1px solid var(--hairline); /* Slides out of the way until earned. */ transform: translateY(110%); transition: transform .24s ease; pointer-events: none; } .orca-cta-bar[data-show="true"] { transform: translateY(0); pointer-events: auto; } .orca-cta-row { display: flex; gap: var(--tight); max-width: 480px; margin: 0 auto; align-items: stretch; } /* THE BAR IS ACCENT ONLY - no brand color anywhere in it ("mobile action bar should only be accent color, no brand color" - Nick, 30 Aug, looking at a red button wearing yellow text). The primary is the SOLID button: accent fill, ink by contrast (--on-accent). The secondary is the OUTLINE button: accent border, accent text, ground fill. Both wear the kit's 2px border so the pair reads as the same two buttons the rest of the site uses. The !important is deliberate: the primary is a clone of the header CTA and arrives wearing whatever button classes the header gave it. */ .orca-cta-primary { flex: 1 1 auto; min-width: 0; box-shadow: var(--shadow-md); background: var(--accent) !important; color: var(--on-accent) !important; border: 2px solid var(--accent) !important; } /* Secondary actions are icon-over-label, fixed width. They are the outline half of the pair - a shortcut for someone who already knows what they want, not a second offer, which is why they carry NO FILL (rule chrome/quick-bar-secondaries-quiet): transparent, no shadow - the same thing chrome.orca-css draws on a built site. */ .orca-quick { flex: 0 0 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 44px; padding: 6px 2px; border-radius: var(--radius); background: transparent; border: 2px solid var(--accent); color: var(--accent); text-decoration: none; box-shadow: none; } .orca-quick span { font-size: 10px; font-weight: 650; letter-spacing: .02em; } .orca-quick svg { color: currentColor; } /* ---- back to top ------------------------------------------------------- */ /* Earned much later than the action bar - one and a half screens, by which point scrolling back by hand is a real cost. Shown at every width: a long page is long on a laptop too. It sits ABOVE the mobile bar rather than beside it, so it never competes with the thing it must not compete with. */ .orca-to-top { position: fixed; right: var(--gutter); bottom: var(--gutter); z-index: 54; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--ground); color: var(--ink); border: 1.5px solid var(--hairline); box-shadow: var(--shadow-md); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; transform: translateY(8px); } .orca-to-top[data-show="true"] { opacity: 1; pointer-events: auto; transform: translateY(0); } .orca-to-top:hover { color: var(--chrome); border-color: var(--chrome); } /* ---- the mobile navigation -------------------------------------------- */ /* A full-screen overlay, not a drawer. A drawer has to decide how wide it is and then justify the strip of dimmed page beside it; an overlay has one job and does it at any screen size. Links are set large and spaced, because the thing being tapped is a thumb target rather than a line of text. THE CALL TO ACTION STAYS IN THE BAR. It does not go inside the menu. Burying the one action the site exists to get behind a tap is the most common and most expensive mistake in a mobile header. */ .orca-nav-panel { position: fixed; inset: 0; z-index: 60; background: var(--dark); color: #fff; display: flex; flex-direction: column; justify-content: center; gap: var(--loose); padding: var(--gutter); /* Not display:none - a menu that is removed from the document cannot be transitioned, and it is the transition that tells a reader where the panel came from. */ opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s; } .orca-nav-panel[data-open="true"] { opacity: 1; visibility: visible; } .orca-nav-panel a { color: #fff; text-decoration: none; font-size: 31px; font-weight: 650; padding: 6px 0; } .orca-nav-panel a:hover, .orca-nav-panel a:focus-visible { color: var(--chrome); } .orca-nav-close { position: absolute; top: 14px; right: var(--gutter); width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; color: #fff; cursor: pointer; } /* ---- footer ----------------------------------------------------------- */ /* TWO TIERS. An information row, then a quiet legal line. The information row exists because of a gap that only appears on a phone: the top bar is hidden below 1024px, so without it the hours and the address live nowhere on a small screen except the contact panel near the bottom of the page. The footer is where people go looking for exactly those two facts, and it is the last thing on every page rather than one section of one page. Half the section padding: the page has already ended by the time anyone reads it. */ /* DARK, WITH A 3PX ACCENT EDGE (playbook §3, rule chrome/dark-footer): the page ends on a dark band, accent column eyebrows, the phone in the display face. The accent edge is the footer's border, not a line in it; the tier rule below is still the only line inside (rule chrome/footer-one-rule). */ .orca-foot { background: var(--dark); border-top: 3px solid var(--accent); padding: calc(var(--pad) / 2) var(--gutter); font-size: 15px; color: rgba(255,255,255,.72); } .orca-foot-top { display: flex; gap: var(--block); align-items: flex-start; flex-wrap: wrap; } .orca-foot-brand { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: var(--snug); } /* LEFT LIKE THE HEADER'S, centered only on a phone where the column is the full width (Nick, 30 Aug). Only the LOGO centers on mobile - the blurb and the phone stay set left. The template writes the same thing as widget settings (align / align_mobile); this is the stylesheet agreeing. */ .orca-foot-brand .orca-logo, .orca-foot-brand .orca-foot-name { text-align: left; } @media (max-width: 767px) { .orca-foot-brand .orca-logo, .orca-foot-brand .orca-foot-name { text-align: center; } } .orca-foot-name { font-weight: 800; font-size: 19px; color: var(--reversed); letter-spacing: -.01em; } .orca-foot-blurb { max-width: 34ch; } /* THE PHONE AND THE HOURS, in the brand column, on every page. Two facts a phone reading at 9pm actually wants; the phone number is set at the body size and in the ink color rather than muted, because a number you have to hunt for is a number nobody rings. */ .orca-foot-reach { display: flex; flex-direction: column; gap: 2px; } /* THE DISPLAY FACE (playbook §3, rule chrome/dark-footer). --font-head was never defined, so the phone fell back to inherit and wore the body face; the kit's primary typography global is the heading face on a built site. */ .orca-foot-phone a { color: var(--reversed); font-family: var(--font-head, var(--e-global-typography-primary-font-family, inherit)); font-weight: 700; font-size: 26px; letter-spacing: -.01em; } .orca-foot-hours { color: rgba(255,255,255,.72); } .orca-foot-col { flex: 0 1 auto; display: flex; flex-direction: column; gap: var(--snug); } /* THE ACCENT EYEBROWS (playbook §3, rule chrome/dark-footer). The template writes each column heading as a in a text widget carrying .orca-foot-eyebrow; this rule used to name .orca-foot-col h3 only, which no built footer has, so the headings shipped in the muted white. The is named too: the kit's text color reaches the widget at (0,1,0), and the bold inside it is ours. */ .orca-foot-col h3, .orca-foot-eyebrow, .orca-foot-eyebrow b { font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); } .orca-foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--tight); } .orca-foot-col li { display: flex; gap: 8px; align-items: flex-start; } /* THE SITEMAP OF RECORD SPLITS WHEN TALL. Every main content page is in the footer nav (Nick, 30 Aug); past what the rest of the footer is tall, the one Pages list breaks into two CSS columns under its one heading. Block display, because CSS columns do not apply to a flex container - the gap becomes a margin so the rhythm survives the switch. */ .orca-foot-links-2 ul { display: block; columns: 2; column-gap: var(--loose); } .orca-foot-links-2 li { break-inside: avoid; margin-bottom: var(--tight); } .orca-foot-col svg { color: var(--accent); flex: none; margin-top: 2px; } .orca-foot a { color: inherit; text-decoration: none; } .orca-foot a:hover { color: var(--reversed); text-decoration: underline; } /* The rule that separates the two tiers is the ONLY line in the footer. Two would make it a table. */ .orca-foot-legal-row { display: flex; align-items: center; gap: var(--loose); flex-wrap: wrap; margin-top: var(--block); padding-top: var(--loose); border-top: 1px solid rgba(255,255,255,.14); font-size: 14px; } .orca-foot-links { display: flex; gap: var(--loose); flex-wrap: wrap; } .orca-foot-legal { margin-left: auto; } /* ---- socials ---------------------------------------------------------- */ .orca-socials { display: flex; gap: var(--snug); } .orca-solo .orca-socials { justify-content: center; } .orca-group > .orca-lead + .orca-socials { margin-top: var(--loose); } .orca-socials a { width: 44px; height: 44px; border-radius: var(--radius); display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--hairline); color: var(--brand); text-decoration: none; background: #fff; box-shadow: var(--shadow-sm); transition: box-shadow .18s ease, color .18s ease, border-color .18s ease; } .orca-socials a:hover { border-color: var(--accent); color: var(--accent); box-shadow: var(--shadow-md); } /* ---- containers that paint their own surface -------------------------- */ /* A CARD WITH ITS OWN BACKGROUND OR BORDER NEVER TOUCHES THE SCREEN EDGE ON MOBILE OR TABLET. A BAND ALWAYS DOES. The distinction is whether the container is an OBJECT ON a surface or a surface in its OWN RIGHT: .orca-self-surface - a card. It is meant to be seen sitting on the page, so it needs the page on both sides of it. A card bleeding off both edges of a phone stops reading as a card and reads as the page changing color, so the thing it was there to distinguish stops being distinguished. .orca-full-bleed - a band. Edge to edge is the point at every width. When the duo stacks on a phone, each half becomes its own full-width band - a gutter there would make it look like a card that had failed to be one. Anything inside .orca-inner already has the page gutter and needs neither mark. Every painted container OUTSIDE .orca-inner must carry one or the other, so the choice is recorded rather than defaulted - see assertSelfSurface. */ @media (max-width: 1024px) { /* TWO COLUMNS ON A TABLET (Nick, 27 Aug): four across is unreadable at tablet widths, one across wastes them. Same tail re-decision as the 900px block above: the desktop tail no longer describes this row. */ .orca-cards { --cards-track: 4; } .orca-cards > * { grid-column-start: auto; } .orca-cards-center-tail.orca-cards-odd > *:last-child { grid-column-start: 2; } .orca-self-surface { margin-inline: var(--gutter); width: auto; border-radius: var(--radius); overflow: hidden; } } /* ---- the phone -------------------------------------------------------- */ /* ONE COLUMN OF CARDS ON A PHONE (Nick, 28 Aug: "mobile cards layout should be 1 col: cards with images do not count as an image gallery"). The two-up rule that photo grids get is about PHOTOGRAPHS: a set of pictures read as a set, where one per screen turns nine images into nine statements. A card is a picture WITH WORDS UNDER IT, and at 187px those words are two syllables a line - which is what shipped, because until now the card grid had no phone rule at all in this stylesheet. THIS BLOCK IS HERE AND NOT IN elementorBridge(). The bridge is deliberately never sent (see buildDesignCss), so the phone rule written into it had never applied to anything: the tablet rule above ran all the way down to zero. A rule in a function nothing calls is a rule that does not exist. */ @media (max-width: 767px) { .orca-cards { --cards-track: 2; } /* One column has no short last row, so nothing is centered and nothing is offset: every card starts where its own row starts. */ .orca-cards > * { grid-column-start: auto; } /* AND A COMPACT CARD STANDS BACK UP. Compact exists to rescue a torn second row; one column has no second row, so the reason for it is gone - and a third of a phone is an 80px thumbnail beside 22 characters a line. */ .orca-cards-compact .orca-card { display: flex !important; flex-direction: column; min-height: 0; } .orca-cards-compact .orca-card > *:first-child { position: static; } .orca-cards-compact .orca-card img { position: static; width: 100%; height: auto; aspect-ratio: 1.0000; } } /* A band is full width; its CONTENT still sits in the page's grid. */ .orca-full-bleed { width: 100%; } /* ---- the figures band -------------------------------------------------- */ /* EVIDENCE, not mood. Business gets this where the other two get the duo. A supplier's page is an argument, and the strongest thing on one is usually a number somebody can check. Years in business beats "established and trusted"; "3,400 lines held" beats "extensive range". No card boxes. Boxes would make this a card row, which the section above it already is, and the numbers are the object here - a border around each one just puts a fence between them. Hairlines between the columns instead, which is what a table of figures has always done. EVERY FIGURE CARRIES ITS SOURCE. See assertFigures: a number Orca invented would be the most damaging thing this system could emit, because it is the part a reader is most likely to believe and least able to check. */ /* THE COLUMN RULE IS THE COMPONENT. It is what makes four numerals a table of figures rather than four numerals, so it survives every breakpoint - it is not a desktop flourish that gets dropped when the row wraps. */ /* THE STATS BAND (playbook §3; rules design/stats-band, design/figures-column-rule): every figure stands on a 2px ACCENT rule at its left, the first one included, at every breakpoint - the rule is the component, and it is what makes four numerals a table of figures. */ .orca-figures { display: flex; gap: var(--loose); } .orca-figure { flex: 1 1 0; min-width: 0; padding: 0 0 0 var(--snug); display: flex; flex-direction: column; gap: var(--tight); border-left: 2px solid var(--accent); } /* Tablet: still one row, but the columns stop being equal thirds and take the width their contents need, spaced apart. Equal columns at this width leave a two-character figure floating in the middle of a wide empty box. */ @media (max-width: 1024px) { .orca-figures { justify-content: space-around; flex-wrap: wrap; row-gap: var(--loose); } .orca-figure { flex: 0 1 auto; } } /* BOTH SPELLINGS. The preview writes b/span/small; the TEMPLATE emits .orca-fig-value (an h3), .orca-fig-label and .orca-fig-source -- and only the preview's tags were styled, so every BUILT figures band drew its numbers as ordinary h3s (found on the old build, 2 Sep; same bug here). */ /* ACCENT DISPLAY NUMERALS, ~4rem (playbook §2/§3; rule design/push-the-type-scale): in the display face, the accent where it holds 3:1 on the ground (large text), else the brand - Bennie's yolk on butter would vanish. Three classes on the widget's own title, so the kit's h3 cannot win. */ .orca-figure b, .orca-figure .orca-fig-value, .orca-figure .orca-fig-value h3, .orca-figure .orca-fig-value .elementor-heading-title { font-family: var(--font-head, inherit); font-size: clamp(40px, 5vw, 64px); font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--accent); font-variant-numeric: tabular-nums; margin: 0; } /* THE DARK SKIN (playbook §3 stats band, §4.14 rhythm): a figures band the rhythm made a distinct step paints the pair's dark instead of the tint - a beat between the light bands. Reversed words; the numerals take the accent's soft tone, which holds on the dark where the accent itself may not. Carries the logo watermark where the kit has a logo. */ /* THE PARCHMENT SKIN (playbook §3 stats band; rule design/stats-band): the figures band the rhythm leaves on ground is not the bare page. It wears a warm tint halfway from the ground to the recessed neutral (both already tinted toward the anchor, never gray), edged top and bottom by a hairline, so the numbers sit on their own object. Ordinary ink; the numerals keep their accent. The flat ground is the fallback where color-mix is absent. */ .orca-section.orca-parchment-skin { background: var(--ground); background: color-mix(in srgb, var(--recessed) 55%, var(--ground)); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); } .orca-section.orca-dark-skin { background: var(--dark); color: var(--reversed); } .orca-section.orca-dark-skin .elementor-heading-title, .orca-section.orca-dark-skin h2, .orca-section.orca-dark-skin h3 { color: var(--reversed); } .orca-section.orca-dark-skin p, .orca-section.orca-dark-skin .orca-fig-label, .orca-section.orca-dark-skin .orca-fig-label span { color: rgba(255,255,255,.86); } .orca-section.orca-dark-skin .orca-figure .orca-fig-value .elementor-heading-title, .orca-section.orca-dark-skin .orca-figure .orca-fig-value { color: var(--accent-soft); } .orca-section.orca-dark-skin .orca-eyebrow, .orca-section.orca-dark-skin .orca-eyebrow .elementor-heading-title { color: rgba(255,255,255,.8); } .orca-figure span, .orca-figure .orca-fig-label { font-size: 17px; font-weight: 600; } .orca-figure small, .orca-figure .orca-fig-source { font-size: 14px; color: var(--ink-muted); } /* ---- the duo band ----------------------------------------------------- */ /* Half a square photograph, half a color block carrying copy. Edge to edge on desktop, no page gutter: the point is the hard vertical seam down the middle. Inset below 1024px by the rule above. */ .orca-duo { display: flex; width: 100%; align-items: stretch; } .orca-duo > * { flex: 1 1 50%; min-width: 0; } /* The ratio governs a BOX; the photograph fills it. Capped in viewport height as well, because half of a very wide window is a very large picture however sensible the ratio. */ .orca-duo-media { aspect-ratio: 1.0000; max-height: 64vh; } /* NO .orca-duo-photo RULE ANY MORE. The photograph is the media container's OWN background (Nick's hand-built band, 30 Aug) - an child had an intrinsic height to argue with stretch, and the seam stopped short of the block. The template writes cover/center as settings; the preview draws the same thing inline. A rule for a class no template emits is the invisible failure prefixed() warns about, so it is gone rather than kept "just in case". */ .orca-duo-media { background-size: cover; background-position: center center; } .orca-duo-block { /* CENTERED IN BOTH AXES (Nick, 30 Aug). The duo is a poster half, not a reading column: its few lines sit in the middle of the color block. */ display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--pad) clamp(32px, 4vw, 64px); /* Not accent. A half-page of saturated color beside a photograph is two things shouting; this lets the photograph carry the section and saves the accent for the call to action immediately below it. */ background: var(--dark); color: var(--reversed); } .orca-duo-block .orca-eyebrow { color: var(--accent); } .orca-duo-block p, .orca-duo-block li { color: rgba(255,255,255,.86); } .orca-duo-block svg { color: var(--accent); } .orca-duo-block .orca-btn-out { color: #fff; border-color: #fff; } .orca-duo-block .orca-btn-out:hover { background: #fff; color: var(--dark); } .orca-duo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--snug); } .orca-duo-list li { display: flex; gap: var(--snug); align-items: center; font-size: 17px; } .orca-panel .orca-duo-list svg { color: var(--accent); } .orca-duo-list svg { flex: none; } /* THE BLOCK'S GROUND IS A SURFACE (Nick, 2 Sep). Classless keeps the system's own default above; a tone class from the template overrides it, so the engine or the document can vary the half without a new template. */ .orca-duo-block.orca-on-dark { background: var(--dark); color: var(--reversed); } .orca-duo-block.orca-on-dark .orca-eyebrow { color: var(--accent); } .orca-duo-block.orca-on-dark p, .orca-duo-block.orca-on-dark li { color: rgba(255,255,255,.86); } .orca-duo-block.orca-on-dark svg { color: var(--accent); } .orca-duo-block.orca-on-dark .orca-btn-out { color: #fff; border-color: #fff; } .orca-duo-block.orca-on-dark .orca-btn-out:hover { background: #fff; color: var(--dark); } .orca-duo-block.orca-on-recessed { background: var(--recessed); color: var(--ink); } .orca-duo-block.orca-on-recessed .orca-eyebrow { color: var(--brand); } .orca-duo-block.orca-on-recessed svg { color: var(--accent); } .orca-duo-block.orca-on-ground { background: var(--ground); color: var(--ink); } .orca-duo-block.orca-on-ground .orca-eyebrow { color: var(--brand); } .orca-duo-block.orca-on-ground svg { color: var(--accent); } /* ---- centering --------------------------------------------------------- */ /* A block centers when it is ALONE IN ITS ROW - a hero, a full-width call to action. Beside a photograph it is a column, and a centered column next to an image reads as a mistake rather than a decision. So this is a property of the row, never of the system. */ .orca-solo .orca-group { align-items: center; text-align: center; } .orca-solo .orca-group p { margin-inline: auto; } .orca-solo .orca-group .orca-btns { justify-content: center; } /* Everything in a two-up row stays left, at every width above mobile - EXCEPT the duo, whose block half is a poster and centers (Nick, 30 Aug). */ /* ABOVE MOBILE ONLY, as the sentence says (rule structure/list-section-not-centered): unscoped, this 0-2-0 pair beat the 900px centering rule's .orca-group and every feature stayed hard left on a phone, the one band that never centered. */ @media (min-width: 901px) { .orca-feature .orca-group { align-items: flex-start; text-align: left; } .orca-feature .orca-group p { margin-inline: 0; } } .orca-duo-block .orca-group { align-items: center; text-align: center; } .orca-duo-block .orca-group p { margin-inline: auto; } /* AND ONLY ONE RULE SAYS SO. The flex-start line below used to name the duo's button row as well, one line under the centring rule - equal specificity, later in the file, so it won and the duo's single button hung at the block's left edge through two rounds of "fixed" ("orca-btns class on duo row needs justify-content: center" - Nick, 30 Aug). The element setting (buttons() extra in duo.orca-ts) and this rule now agree, nothing contradicts them, and steps-check counts the mentions. */ .orca-duo-block .orca-btns { justify-content: center; } .orca-feature .orca-btns { justify-content: flex-start; } /* ---- the raised panel ------------------------------------------------- */ /* A block of GROUND color lifted off a tinted surface. The inverse of a Recessed section: instead of pushing a band back, it brings one block forward, which is a cheap and durable way to say "this bit matters" without color, a border or a heading two sizes up. ONE RULE, and it is absolute: a panel only works ON a non-Ground surface. Ground on Ground is invisible and the shadow becomes a smudge round nothing. So a panel implies a Recessed, Statement or Photographic section behind it. */ .orca-panel { background: var(--ground); border-radius: var(--radius); padding: clamp(32px, 4vw, 64px); box-shadow: var(--shadow-md); } /* On a photograph it needs to be opaque and slightly tighter. */ .orca-photo .orca-panel { max-width: 640px; } /* A panel wrapping a map has no padding on the map side - the map runs to the panel's edge and the radius clips it. Padding lives on the text side only. */ .orca-panel.orca-flush { padding: 0; overflow: hidden; } /* 5% AT EVERY SIZE (Nick, 2 Sep): percentage padding tracks the panel's own width, so the body breathes proportionally on a phone and a monitor alike -- the clamp gave a phone 28px on a 350px card, which crowded it. */ .orca-panel.orca-flush .orca-panel-body { padding: 5%; } /* ---- the contact panel ------------------------------------------------ */ /* Full container width. It reads as a closing object because it is a raised panel on a tinted surface, not because it is narrower than the section above it - and at 75% the map column was too thin to be a map. */ .orca-contact-panel { width: 100%; } /* PADDING IS NEVER ZERO WHERE THE BACKGROUND CHANGES. A color change cannot do the job of spacing. Where a section's surface differs from its neighbor's, content jammed against the seam reads as a mistake however deliberate it was, and the eye has nowhere to rest between two different grounds. Zero padding is legal in exactly two places, both decided by mayCollapseTop below and nowhere else: 1. Between two sections on the SAME surface, which are meant to read as one continuous block. 2. Where the section's content is an inset panel with its own padding and its own shadow. The panel holds the content off the seam, so the section padding is adding height and nothing else. Per-system, because whether the seam survives it depends on how loud the seam is: contactFlush in design-systems.orca-ts. Everywhere else the generator refuses to emit it. */ /* THE WIDTHS ARE SETTINGS: 30% map, 70% detail, straight from Nick's third export (2 Sep). His first export said 48/48 — but the page he approved never rendered that way, because an old flex-basis here was silently pinning the map to a third, and honoring the 48 "faithfully" crushed the facts column until the phone number ran three lines ("this is not what i sent"). His rewrite puts the ratio he means in the widths themselves, so the stylesheet's whole job is to NOT fight them: no basis, and the body grows into any slack. Stacking (tablet column, phone column-reverse) is settings too. */ .orca-contact-split { display: flex; align-items: stretch; } .orca-contact-split .orca-map { flex: none; } .orca-contact-split .orca-panel-body { flex: 1 1 auto; min-width: 0; } /* ---- the closing band — the alternate contact section ----------------- */ /* An interior page ends on the brand, not on another gray panel: the same facts and the same one ask, restated at statement weight. The full panel with its map and hours stays the contact page's ("i want an alternate contact section" — Nick, 16 Sep). */ /* IT IS THE PAGE'S CTA BAND (decided 23 Sep, rule structure.orca-cta-band-closes-every-page): where a page carries no statement band this closes it, on the same deepened-accent gradient, so the CTA surface stays the only saturated band (rule design/find-us-dark-surface). */ /* ---- the contact split (playbook §3; rule design/contact-split-static-map) ---- A BRAND SIDEBAR joined to a WHITE FORM CARD, one object: the radius and the shadow belong to the pair, and the two meet with no gap. The sidebar is the brand deepened until white holds 4.5:1 (--brand-surface), its phone the display line; the card is white, the form's own 10px gaps inside it. */ .orca-contact-split-row { gap: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); } .orca-contact-split-row > .orca-contact-side { background: linear-gradient(160deg, var(--brand-surface) 0%, var(--brand-surface-deep) 100%); color: var(--reversed); border: 0; border-radius: 0; box-shadow: none; padding: clamp(28px, 4vw, 56px); --padding-top: clamp(28px, 4vw, 56px); --padding-bottom: clamp(28px, 4vw, 56px); --padding-left: clamp(28px, 4vw, 56px); --padding-right: clamp(28px, 4vw, 56px); position: relative; isolation: isolate; overflow: hidden; } .orca-contact-split-row > .orca-contact-side .elementor-heading-title, .orca-contact-side h2, .orca-contact-side h3, .orca-contact-side .orca-fact b, .orca-contact-side th, .orca-contact-side td { color: var(--reversed); } .orca-contact-side p, .orca-contact-side .orca-fact span, .orca-contact-side .orca-lead { color: rgba(255,255,255,.86); } .orca-contact-side .orca-eyebrow, .orca-contact-side .orca-eyebrow .elementor-heading-title { color: rgba(255,255,255,.8); } .orca-contact-side .orca-ico { border-color: rgba(255,255,255,.55); color: #fff; } .orca-contact-side .orca-details svg { color: #fff; } /* THE BIG PHONE: the display face at a headline's size, dialing. Three classes on the widget's own title so the kit's heading cannot win. */ .orca-contact-side .orca-contact-phone .elementor-heading-title, .orca-contact-side .orca-contact-phone { font-family: var(--font-head, inherit); font-size: clamp(30px, 3.4vw, 46px); font-weight: 800; line-height: 1.05; letter-spacing: -.01em; color: #fff; } .orca-contact-side .orca-contact-phone a { color: inherit; text-decoration: none; } .orca-contact-side .orca-map-static { margin-top: var(--snug); border-radius: var(--radius); overflow: hidden; line-height: 0; } .orca-contact-side .orca-map-static img { width: 100%; height: 200px; object-fit: cover; display: block; } .orca-contact-split-row > .orca-contact-form-card { background: #fff; color: var(--ink); padding: clamp(28px, 4vw, 56px); --padding-top: clamp(28px, 4vw, 56px); --padding-bottom: clamp(28px, 4vw, 56px); --padding-left: clamp(28px, 4vw, 56px); --padding-right: clamp(28px, 4vw, 56px); } .orca-contact-band { background: linear-gradient(160deg, var(--cta) 0%, var(--cta-deep) 100%); } /* 0-3-0 (rule wordpress/elementor-specificity): the widget sheet loads after the kit at 0-2-0, and a two-class heading rule here tied it and lost - the kit's heading color on the CTA gradient. */ .orca-contact-band, .orca-contact-band .elementor-widget-heading .elementor-heading-title { color: var(--reversed); } .orca-contact-band .orca-eyebrow, .orca-contact-band .orca-eyebrow .elementor-heading-title { color: rgba(255,255,255,.75); } .orca-contact-band .orca-lead, .orca-contact-band p { color: rgba(255,255,255,.88); } /* The facts run in a row and wrap; each keeps its ring, redrawn for the dark. */ .orca-contact-band .orca-details { flex-direction: row; flex-wrap: wrap; gap: var(--snug) clamp(20px, 3vw, 44px); } .orca-contact-band .orca-details span { color: rgba(255,255,255,.75); } .orca-contact-band .orca-details svg { color: #fff; } .orca-contact-band .orca-ico { border-color: rgba(255,255,255,.55); color: #fff; } .orca-contact-band .orca-btn { background: #fff; color: var(--brand); border-color: #fff; } .orca-contact-band .orca-btn:hover { background: transparent; color: #fff; } /* ---- the contact card BESIDE the form --------------------------------- */ /* ONE ROW ON A LARGE SCREEN: the card on the left, the form on the right. Direction and widths are container settings (row on desktop, the whole thing column-REVERSE on tablet and phone so the form leads) - the template is the record; this only seats the form's group level with the card. */ .orca-contact-row { display: flex; } .orca-contact-form-col .orca-group { margin-top: 0; } /* ---- map -------------------------------------------------------------- */ /* Fills the panel's full height rather than declaring one of its own, so the detail side decides how tall the card is. */ .orca-map { position: relative; min-height: 100%; background: var(--recessed); } .orca-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } /* No address: the third becomes a photograph rather than an empty column or a map of somewhere the client does not do business at. Decorative by definition - it carries no information, so it carries no alt text either. */ .orca-map-photo { background-size: cover; background-position: center; } /* ---- icon cards -------------------------------------------------------- */ /* A LIST THAT IS ALONE IN ITS SECTION BECOMES CARDS. A list is measure-constrained - it has to be, or the lines get too long to read - so a bare list in a full-width section occupies about 55 characters of a 1200px row and leaves the other two thirds empty. That reads as a section that failed to load rather than one that was composed. Cards take the width they have been given. Three across turns the same three facts from a narrow column into a row that fills its section, and the icons stop being bullets and start being the thing the eye lands on. The rule is about the section, not the list: a list BESIDE something - the duo band's photograph, the contact panel's map - is already sharing its row and stays a list. */ .orca-icon-cards { display: flex; gap: var(--snug); } .orca-icon-card { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--tight); padding: var(--loose); background: var(--ground); border-radius: var(--radius); box-shadow: var(--shadow-sm); } /* THE ICON IS THE POINT OF THE CARD, so it is sized like one. At 26px it was a bullet that had wandered up from the list it replaced; a card whose picture is smaller than its heading has not really become a card. Thinner stroke at this size - 1.6px on a 48px glyph reads as heavy. */ .orca-icon-card svg { color: var(--accent); width: 48px; height: 48px; stroke-width: 1.35; } .orca-icon-card b { font-size: 18px; font-weight: 650; } .orca-icon-card span { font-size: 16px; color: var(--ink-muted); } .orca-icon-card > svg + b { margin-top: var(--snug); } /* ---- detail list ------------------------------------------------------ */ /* TIGHT (Nick, 2 Sep): three short facts in half a panel do not need air between them - the ringed icons already give every row its height. */ /* DIVS, NOT A LIST (Nick, 2 Sep: "take contact details out of UL. i do not like the indent"). A UL invites the theme's and the editor's own list rules — the indent came from one of them, not from here — so the rows are plain divs the template marks with .orca-fact, and nothing else has opinions about them. */ .orca-details { margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--tight); } /* CENTERED ON THE RING - except the address, which runs two lines: its ring sits with the street line, not floating between street and city. The template marks the multi-line item; one-line rows stay centered. */ .orca-details .orca-fact { display: flex; gap: var(--snug); align-items: center; } .orca-details .orca-fact.orca-two-line { align-items: flex-start; } /* The text column may shrink, and a word longer than the line may break: a long email on a phone truncated before this ("catering@frbbq.orca-co..." on the 375px build, 2 Sep). break-word, NOT anywhere — anywhere splits words that would have fit ("2220 Acade my Pl" on the desktop build, same day). */ .orca-details .orca-fact > div { min-width: 0; overflow-wrap: break-word; } .orca-details svg { color: var(--accent); flex: none; } .orca-details b { display: block; font-size: 17px; font-weight: 650; } .orca-details span { font-size: 15px; color: var(--ink-muted); } .orca-details a { color: inherit; text-decoration: none; } .orca-details a:hover { text-decoration: underline; } /* THE RINGED ICON (Nick's contact redesign, 2 Sep): the fact's mark in a thin accent circle, the value bold beside it, the note under the value. */ .orca-ico { flex: none; width: 40px; height: 40px; border: 2px solid var(--accent); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--accent); } .orca-ico svg { width: 17px; height: 17px; } /* TWO COLUMNS when the hours were asked for: the reachable facts and the button left, the hours as their own block right. */ .orca-contact-cols { display: flex; gap: var(--loose); align-items: flex-start; width: 100%; } /* on the scale (design/spacing-on-scale) */ .orca-contact-cols > * { flex: 1 1 0; min-width: 0; } /* INSIDE THE PAIRED CARD the columns are half of 60% of a row, and the clamp's desktop gap (up to 56px) was exactly the room the email needed to stay on one line ("why is email brokenline" — Nick, 2 Sep). The card keeps the clamp's floor and gives the difference back to the words. */ .orca-contact-card-col .orca-contact-cols { gap: 32px; } .orca-hours-head { display: flex; gap: var(--snug); align-items: center; margin-bottom: 8px; } .orca-hours-head h3 { margin: 0; font-size: 18px; } @media (max-width: 700px) { .orca-contact-cols { flex-direction: column; } } .orca-group > .orca-details + .orca-btns { margin-top: var(--loose); } /* ---- tables ------------------------------------------------------------- */ /* HOUSE RULE (Nick, 27 Aug): tables carry NO background and NO border rules — not ours, not the theme's zebra fills, not WordPress's cell boxes — with ONE exception: a 1px solid horizontal separator between rows. Typography is free (the hours table keeps its small caps below); paint is not. !important on purpose: this rule exists to beat whoever painted the cells, which is exactly the fight Nick's hand CSS on the live hours table had to win with the same weapon. */ .orca-section table, .orca-section thead, .orca-section tbody, .orca-section tr, .orca-section th, .orca-section td { background: none !important; border: 0 !important; } .orca-section table { border-collapse: collapse; } .orca-section tr + tr { border-top: 1px solid var(--hairline) !important; } /* ---- opening hours ------------------------------------------------------ */ /* A TABLE, in small caps of the body font. Seven bolded "Monday: 11:00 AM" lines read as seven facts; two quiet columns read as one. Built by templates/contact.orca-ts from the details siteFacts marks with the clock. Typography only — the paint rules above are the whole of what a table may draw. */ .orca-hours { font-variant-caps: all-small-caps; letter-spacing: .05em; color: var(--ink-muted); font-size: .95em; } .orca-hours th { text-align: left; font-weight: 600; padding: 3px 20px 3px 0; color: var(--ink); white-space: nowrap; } .orca-hours td { padding: 3px 0; } .orca-group > .orca-hours + .orca-btns { margin-top: var(--loose); } .orca-group > h2 + .orca-details { margin-top: var(--snug); } /* Nothing else gets a shadow. Buttons stay flat: a raised button is a 2014 idiom and the fill already says it is pressable. Full-width bands stay flat because a band is the page, not an object on it - shadowing one implies it floats over something, and there is nothing behind it. */ /* ---- accent call to action -------------------------------------------- */ /* Directly beneath the duo. The tint sets it up, the accent closes it. */ /* The CTA band: the accent DEEPENED to 4.5:1 under white and run as a 160deg gradient (playbook §1/§3). Flat var(--accent) put white text on whatever the accent's lightness happened to be -- butter-yellow bakeries included. */ .orca-accent-cta { background: linear-gradient(160deg, var(--cta) 0%, var(--cta-deep) 100%); color: var(--reversed); } .orca-accent-cta p { color: rgba(255,255,255,.9); } .orca-accent-cta .orca-btn { background: #fff; color: var(--cta); border-color: #fff; } .orca-accent-cta .orca-btn-out { background: transparent; color: #fff; border-color: rgba(255,255,255,.75); } /* THE GIANT FACT IS THE HEADLINE, AT ITS OWN SIZE (playbook §2/§3; rules design/giant-fact-cta-band, design/push-the-type-scale): ~4.6rem on a desktop, a step above every band's h2, still wrapping on a phone. Three classes on the widget's own title so the kit's h2 cannot win. The link is the fact: a number that dials, a booking that opens, an address that routes, in the band's reversed color. A retail fact's hours ride under it at the eyebrow's size. */ .orca-section .orca-giant-fact .elementor-heading-title, .orca-section .orca-giant-fact h2 { font-size: clamp(40px, 6.4vw, 74px); line-height: 1.02; letter-spacing: -.02em; } .orca-section .orca-giant-fact a { color: inherit; text-decoration: none; } .orca-section .orca-giant-fact a:hover { text-decoration: underline; text-underline-offset: .12em; } .orca-section .orca-giant-fact .orca-fact-sub { display: block; margin-top: 12px; font-family: var(--font-body, inherit); font-size: 14px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; line-height: 1.5; opacity: .9; } /* ---- the duo band (playbook §3; rule structure/merge-adjacent-accent-bands) ---- Two accent bands that would stand adjacent are ONE full-bleed split: the BRAND pull-quote cell and the ACCENT CTA cell, zero gap between them. The band has no inner; each cell pins its content to the site grid by padding its OUTER edge max(gutter, (100vw - grid) / 2), so on an ultrawide window the words line up with every other band's column while the color runs to the edge. The custom properties are Elementor's own container padding, set here so the formula reaches the served container as well as the preview. */ .orca-duo-cta { gap: 0; padding: 0; } .orca-duo-cta > .orca-duo-quote, .orca-duo-cta > .orca-duo-ask { --pin: max(var(--gutter), calc((100vw - var(--grid)) / 2)); --inside: clamp(24px, 4vw, 64px); position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: center; min-width: 0; } .orca-duo-cta > .orca-duo-quote { --padding-top: var(--pad); --padding-bottom: var(--pad); --padding-left: var(--pin); --padding-right: var(--inside); --padding-block-start: var(--pad); --padding-block-end: var(--pad); --padding-inline-start: var(--pin); --padding-inline-end: var(--inside); padding: var(--pad) var(--inside) var(--pad) var(--pin); background: linear-gradient(160deg, var(--brand-surface) 0%, var(--brand-surface-deep) 100%); color: var(--reversed); } .orca-duo-cta > .orca-duo-ask { --padding-top: var(--pad); --padding-bottom: var(--pad); --padding-left: var(--inside); --padding-right: var(--pin); --padding-block-start: var(--pad); --padding-block-end: var(--pad); --padding-inline-start: var(--inside); --padding-inline-end: var(--pin); padding: var(--pad) var(--pin) var(--pad) var(--inside); background: linear-gradient(160deg, var(--cta) 0%, var(--cta-deep) 100%); } .orca-duo-quote blockquote { margin: 0; padding: 0; border: 0; } .orca-duo-quote blockquote p { font-family: var(--font-head, inherit); font-size: clamp(26px, 3vw, 40px); line-height: 1.2; color: #fff; margin: 0; } .orca-duo-quote blockquote footer { margin-top: var(--snug); color: rgba(255,255,255,.82); font-size: 15px; line-height: 1.5; } /* DARK BUTTONS IN THE CTA CELL (playbook §3): the pair's own near-black, white words, so the cell's primary action reads against the accent. */ .orca-duo-ask .orca-btn-slot:not(.orca-btn-secondary) a, .orca-duo-ask .orca-btn-slot:not(.orca-btn-secondary) .elementor-button { background: var(--dark); color: #fff; border-color: var(--dark); } .orca-duo-ask .orca-btn-slot:not(.orca-btn-secondary) a:hover { background: transparent; color: #fff; border-color: #fff; } @media (max-width: 767px) { .orca-duo-cta > .orca-duo-quote, .orca-duo-cta > .orca-duo-ask { --padding-left: var(--gutter); --padding-right: var(--gutter); --padding-inline-start: var(--gutter); --padding-inline-end: var(--gutter); padding: var(--pad) var(--gutter); } } /* ---- the store ---------------------------------------------------------- */ /* WooCommerce draws the store's markup, not us, so every .elementor-kit-6 here aims at Woo's own classes and is left unprefixed by FOREIGN below - a prefixed copy would style markup nothing renders, the invisible miss this file keeps having to relearn. The funnel contract stands: Woo's LAYOUT inside a checkout is not redrawn - but the kit's colors, corners and type DO reach in ("we need rules to override the elementor/woocommerce default css link colors, fonts etc" - Nick, 3 Sep, looking at default-blue links and a fallback serif on the cart). */ /* THE GRID, NOT WOO'S FLOATS. Woo lays the shop out with percentage floats and a clearfix, which is why the cards never lined up with anything else on the site. A grid makes them equal height and hands the gap to one value. auto-fill rather than Woo's columns-N: the count is a consequence of the measure, so the same rule is right on the wide shop band and in the related strip. */ .woocommerce ul.products { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: clamp(20px, 2.5vw, 32px); margin: 0; padding: 0; list-style: none; } .woocommerce ul.products::before, .woocommerce ul.products::after { display: none; } /* THE CARD, in the system's card idiom - white on hairline with the small lift - at the store's own 8px corner: a product card is a thing you pick up; the rest of the site is a page you read. This is also where a client who wants a 30px radius gets it - a product-card decision, not a whole-system one. */ .woocommerce ul.products li.product { width: auto; float: none; margin: 0; padding: 0; display: flex; flex-direction: column; position: relative; background: #fff; border: 1px solid var(--hairline); border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow .18s ease, transform .18s ease; } /* A product card IS a link, so it earns the hover a.orca-card already has: the lift plus the accent edge. */ .woocommerce ul.products li.product:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--accent); } /* SQUARE, EDGE TO EDGE. Catalog shots arrive in every shape, and the grid only reads as a set when every object sits in the same frame. The card's overflow crops the corners. */ .woocommerce ul.products li.product img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; margin: 0; border-radius: 0; } /* The words wear the card's padding; the picture does not. The link wrapper takes the slack, so the buy button sits on the card's floor whatever the length of the name above it. */ .woocommerce ul.products li.product > .woocommerce-LoopProduct-link { flex: 1 1 auto; display: flex; flex-direction: column; color: var(--ink); text-decoration: none; } .woocommerce ul.products li.product .woocommerce-loop-product__title { padding: var(--snug) var(--snug) 0; margin: 0; font-size: 23px; line-height: 1.3; font-weight: 650; color: var(--ink); } .woocommerce ul.products li.product .price { padding: 6px var(--snug) 0; margin: 0; color: var(--ink-muted); font-size: .95em; font-variant-numeric: tabular-nums; } .woocommerce ul.products li.product .price ins { text-decoration: none; color: var(--ink); font-weight: 650; } .woocommerce ul.products li.product .price del { opacity: .6; margin-right: 6px; } .woocommerce ul.products li.product .button { margin: var(--tight) var(--snug) var(--snug); align-self: flex-start; } /* The sale flash: the accent, quietly, and none of Woo's green circle. */ .woocommerce span.onsale { position: absolute; top: 10px; left: 10px; z-index: 1; min-height: 0; min-width: 0; margin: 0; padding: 2px 12px; border-radius: 999px; line-height: 1.7; background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 650; letter-spacing: .02em; } /* ADD TO CART IS THE PRIMARY BUTTON EVERYWHERE IT APPEARS, AND NOTHING ELSE ON A PRODUCT PAGE MAY USE THE PRIMARY TREATMENT. A product page with two primary buttons has no primary button. */ .woocommerce .single_add_to_cart_button, .woocommerce ul.products li.product .add_to_cart_button { background: var(--chrome); color: var(--reversed); border: 1.5px solid var(--chrome); border-radius: var(--radius); padding: 8px 32px; font-weight: 650; } .woocommerce div.product .button:not(.single_add_to_cart_button):not(.add_to_cart_button), .woocommerce div.product a.button.orca-alt:not(.single_add_to_cart_button) { background: transparent; color: var(--ink); border: 1.5px solid var(--hairline); } /* Above the grid: the count is a whisper, the ordering control is a field. */ .woocommerce .woocommerce-result-count { margin: 0 0 var(--snug); color: var(--ink-muted); font-size: .9em; } .woocommerce .woocommerce-ordering { margin: 0 0 var(--snug); } /* EVERY WOO FIELD, ONE TREATMENT - the ordering select, the quantity, the coupon box, the checkout's own inputs. Left alone they inherit the theme's controls, which is where the 2012 came from. */ .woocommerce select, .woocommerce .input-text, .woocommerce .qty { font: inherit; color: var(--ink); background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius); padding: 8px 12px; } .woocommerce .qty { width: 76px; text-align: center; } .woocommerce select:focus, .woocommerce .input-text:focus, .woocommerce .qty:focus { outline: 2px solid var(--accent); outline-offset: 1px; } /* ---- the single product page (drawn by our theme-builder template) ------ */ /* The name is the H1, but not the HERO h1: the interior scale's biggest step. The hero clamp would shout a product's name across half the screen. */ .woocommerce div.product .product_title { margin: 0; font-size: clamp(26px, 3.4vw, 41px); } .woocommerce div.product p.price { margin: 0; color: var(--ink); font-weight: 650; font-size: 23px; font-variant-numeric: tabular-nums; } .woocommerce div.product p.price del { opacity: .55; font-weight: 400; margin-right: 8px; } .woocommerce div.product p.price ins { text-decoration: none; } .woocommerce div.product .woocommerce-product-gallery img { border-radius: 8px; } .woocommerce div.product .stock { margin: 0; color: var(--ink-muted); } /* The buy form: quantity beside the button, both on one baseline. */ .woocommerce div.product form.cart { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin: 0; } .woocommerce div.product form.cart.variations_form { display: block; } .woocommerce div.product form.cart .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; } .woocommerce div.product form.cart table.variations { margin: 0 0 var(--snug); } .woocommerce div.product form.cart table.variations th, .woocommerce div.product form.cart table.variations td { border: 0; padding: 4px 12px 4px 0; vertical-align: middle; } .woocommerce div.product form.cart table.variations label { margin: 0; font-weight: 600; color: var(--ink); } .woocommerce div.product .reset_variations { color: var(--ink-muted); font-size: .85em; } /* The fine print under the button: category, SKU. A colophon, not copy. */ .woocommerce div.product .product_meta { display: flex; flex-direction: column; gap: 2px; margin: var(--tight) 0 0; padding-top: var(--snug); border-top: 1px solid var(--hairline); color: var(--ink-muted); font-size: .9em; } /* Woo prints its own "Related products" h2 inside our recessed band. */ .orca-product-related section.related > h2 { margin: 0 0 var(--loose); } /* ---- Woo speaks the kit's colors ---------------------------------------- */ /* THE CART PAGE WAS BLUE (Nick, 11 Sep). WooCommerce's own pages - cart, checkout, account - are drawn by Woo, not by Orca's widgets, so every control on them wore Elementor's factory defaults: sky-blue buttons and links on a page whose palette says rust and leather. The kit styles what the kit renders; THIS block is the treaty with what Woo renders. Actions take the accent - the same solid the site's own buttons wear - and links inside Woo's tables and notices take it too. !important on the button colors, deliberately: Woo and the kit's globals both bid for these and the palette must win unconditionally, same argument as the header's state colors. */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce a.button.orca-alt, .woocommerce button.button.orca-alt, .woocommerce input.button.orca-alt, .woocommerce .checkout-button, .woocommerce #payment #place_order, .woocommerce #respond input#submit, .wc-block-components-button:not(.is-link) { background: var(--accent) !important; color: var(--on-accent, #fff) !important; border: 2px solid var(--accent) !important; border-radius: var(--radius); font-weight: 650; } .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce .checkout-button:hover, .woocommerce #payment #place_order:hover, .wc-block-components-button:not(.is-link):hover { filter: brightness(1.07); color: var(--on-accent, #fff) !important; } .woocommerce button.button:disabled, .woocommerce button.button:disabled[disabled] { background: var(--accent) !important; color: var(--on-accent, #fff) !important; opacity: .55; } /* The links Woo draws: the cart's product names, the notices' actions, the account pages' navigation. Scoped to Woo's own containers so the site's header and footer - which also live on body.woocommerce-page - keep the kit's own treatment. */ .woocommerce table.shop_table a:not(.button), .woocommerce-message a:not(.button), .woocommerce-info a:not(.button), .woocommerce-error a:not(.button), .woocommerce-MyAccount-navigation a, .woocommerce-MyAccount-content a:not(.button), .wc-block-components-totals-coupon-link { color: var(--accent) !important; } /* The notice stripe was Woo's blue too. */ .woocommerce-message, .woocommerce-info { border-top-color: var(--accent); } .woocommerce-message::before { color: var(--accent); } .woocommerce-info::before { color: var(--brand); } /* ---- the category circles (Nick's Target reference, 9 Sep) -------------- */ /* THE SIZE IS THE COLUMN'S, NEVER THE WIDGET'S ("the image should have no set height/width. instead, just set the aspect ratio to 1/1 and object fit to cover. the column # option in the listing/loop widget itself takes care of the rest" - Nick, 10 Sep). The card template sets no width or height; the image fills whatever column the carousel deals it, and the ratio keeps it square at any count. The stylesheet also contributes the hover, because a card is a link and a link answers the cursor. NOTHING GROWS UNDER THE CURSOR - the circle lifts like every other link. */ .orca-commerce-categories .orca-ccard-img img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: box-shadow .18s ease; border-radius: 50%; } .orca-commerce-categories .orca-ccard:hover .orca-ccard-img img { box-shadow: var(--shadow-md); } /* THE MOMENT BEFORE SWIPER. Until the script initializes, a slide is an unstyled full-width block - and with the image now sized by its column (above), the first paint showed ONE VIEWPORT-WIDE CIRCLE where the rail would be ("why does the category slide load like this at first?" - Nick, 11 Sep; before 10 Sep the fixed 170px hid the same flash). So the uninitialized state is a SKELETON OF THE FINISHED RAIL: a clipped flex row of slides at roughly their final width. Swiper adds its -initialized class and takes over; with JavaScript off this row IS the rail, which is a better no-script shop than a one-circle page. */ .orca-commerce-categories .swiper:not(.swiper-initialized) .swiper-wrapper, .orca-commerce-categories .swiper-container:not(.swiper-container-initialized) .swiper-wrapper { display: flex; gap: var(--snug); overflow: hidden; } .orca-commerce-categories .swiper:not(.swiper-initialized) .swiper-slide, .orca-commerce-categories .swiper-container:not(.swiper-container-initialized) .swiper-slide { flex: 0 0 auto; width: clamp(120px, 12vw, 190px); } /* ---- looks moved off the widgets (rule design/prefixed-utility-classes) ---- Every one of these was a per-element Elementor setting until 23 Sep. They are the same numbers from Nick's exports, now in the kit's one block, on the prefixed classes the templates already wrote, so a restyle is one edit here rather than one per element on every page. Container corners at 0-2-0 (.e-con plus the class) so Elementor's own container rule cannot win; widget text at 0-3-0, which beats Elementor's widget sheet. */ .e-con.orca-featured-tile, .e-con.orca-featured-photo { border-radius: 8px; } .orca-hero .e-con.orca-hero-screen { border-radius: 16px; } /* THE PHOTO CARD (his commerce homepage export, 9 Sep): a white card at 8px under the photograph, the soft 10px shadow the product cards wear, and one panel on the brand (deepened until white holds) carrying white words. */ .e-con.orca-inner.orca-feature-card { background-color: #fff; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,.05); } .orca-feature-card .e-con.orca-feature-card-panel { background-color: var(--brand-surface); } .orca-feature-card .orca-feature-card-title .elementor-heading-title { color: #fff; font-size: 25px; line-height: 1.5; } .orca-feature-card .orca-feature-card-body, .orca-feature-card .orca-feature-card-body p { color: rgba(255,255,255,.8); } /* THE PRODUCT CARD (his "alternate card", 9 Sep): a white tile at the store's 8px corner, the photograph at 4px, the PRICE FIRST in the accent at 16/700, the name at 17/600 in the heading color, the categories in 11px small caps in the text color. */ .e-con.orca-pcard { background-color: #fff; border-radius: 8px; } .orca-pcard .e-con.orca-pcard-photo { border-radius: 4px; } .orca-pcard .orca-pcard-price .price, .orca-pcard .orca-pcard-price .amount { font-size: 16px; font-weight: 700; color: var(--e-global-color-accent, var(--accent)); } .orca-pcard .orca-pcard-title .elementor-heading-title { font-size: 17px; font-weight: 600; color: var(--e-global-color-primary, var(--ink)); } .orca-pcard .orca-pcard-cats .elementor-icon-list-text, .orca-pcard .orca-pcard-cats .elementor-icon-list-text a { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .1px; color: var(--e-global-color-text, var(--ink-muted)); } .orca-ccard .orca-ccard-name .elementor-heading-title { font-size: 14px; font-weight: 600; color: var(--e-global-color-text, var(--ink)); } /* ---- the featured feature column (Nick's mapping, 11 Sep) --------------- */ /* "column 1: featured photograph background, section title and body text with button overlay. scrim" - the hero's own gradient numbers, so the words sit on the same darkness everywhere words sit on photographs. */ .orca-featured-scrim { position: relative; } .orca-featured-scrim::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,.30) 45%, rgba(0,0,0,0) 80%); pointer-events: none; } .orca-featured-scrim > * { position: relative; z-index: 1; } .orca-featured-scrim, .orca-featured-scrim p { color: #fff; } /* ---- the featured tile (his "ecom home" export, 10 Sep) ----------------- */ /* The wash is a gradient, not the export's flat 0.73 overlay that nearly erased the product photograph: solid brand behind the words, thinning toward the edges so the product still reads. Clipped by the tile's own radius via its overflow. */ .orca-featured-tile { position: relative; } .orca-featured-tile::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, var(--brand) 0%, color-mix(in srgb, var(--brand) 62%, transparent) 58%, color-mix(in srgb, var(--brand) 34%, transparent) 100%); } .orca-featured-tile > * { position: relative; z-index: 1; } /* THE WHOLE TILE IS THE DOOR: the button's own anchor stretches over the tile - one anchor covering everything, never an anchor nested in an anchor - and hovering anywhere on the tile answers with the button's own style swap. */ .orca-featured-tile .elementor-widget-button a::after { content: ''; position: absolute; inset: 0; } /* ---- the store header's search pill (his commerce header, 9 Sep) -------- */ /* The pill's look - radius, shadow - rides on the class below the results rule (the icon's color is a kit binding); the stylesheet also carries the behavior his export wrote as pasted CSS: the pill WIDENS WHILE IT IS HELD. Focus, not hover, so the nothing-grows-under-the-cursor rule stands. The importants are earned: Elementor writes the container's width under the template id and the element id - three classes - and his export paid the same toll. */ .orca-site-header .orca-searcher { transition: width .25s ease; } /* ON A LAPTOP the pill is a fixed 17vw that grows while held. BELOW the nav breakpoint the vw widths that look right on a wide screen collapse to a sliver ("search bar gets weird at responsive widths" - Nick, 9 Sep), so the pill stops being a vw at all: it flexes into whatever room the bar has between the brand and the collapsed nav, banded so it is never a sliver and never a runway, and the focus growth stands down - a flexing pill is already as wide as the bar allows. */ @media (min-width: 1025px) { .orca-site-header .orca-searcher:focus-within { width: 26vw !important; } } /* BELOW THE NAV BREAKPOINT the desktop percentages stop describing anything real - the nav is a burger, not a 39% row - so every column goes to its own width and the pill flexes into the spare room. The importants are matched force against Elementor's element-level widths. flex-shrink 0 on the two marks: the account door was the softest thing in the cluster and the squeeze crushed it to nothing. */ @media (max-width: 1024px) { .orca-site-header .orca-brand { width: auto !important; flex: 0 1 auto; } .orca-site-header .orca-nav { width: auto !important; flex: 0 0 auto; } .orca-site-header .orca-header-right { width: auto !important; flex: 0 0 auto; } .orca-site-header .orca-account-slot, .orca-site-header .orca-cart-slot { flex-shrink: 0; } .orca-site-header .orca-searcher { width: auto !important; flex: 1 1 auto; min-width: 130px; max-width: 340px; padding: 0 12px !important; } } /* ON A PHONE the bar is two rows: brand, burger, account and cart on the first; the search pill on its own full-width line under them - a pill squeezed between a wordmark and three controls at 375px was pushing the whole cluster off the edge. The bar's fixed height gives way so the second row has somewhere to be. The cart toggle also sheds its subtotal: the bag and its count say enough. */ @media (max-width: 767px) { /* Scoped to a bar that HAS a search pill: a non-store header keeps its one-row compact height exactly as before. */ .orca-site-header:has(.orca-searcher) { height: auto; min-height: var(--header-h-compact); } .orca-site-header:has(.orca-searcher) > .orca-inner { flex-wrap: wrap !important; } /* The wordmark yields: at 375px a full-width logo left no room for the burger, the account door and the cart on the first row. */ .orca-site-header:has(.orca-searcher) .orca-logo img { max-width: 38vw; } .orca-site-header .orca-searcher { order: 9; flex-basis: 100%; max-width: none; padding: 0 0 10px !important; } .orca-site-header .orca-cart-slot .elementor-menu-cart__toggle_button .elementor-button-text { display: none; } } /* The live-results dropdown floats over the page, never pushes the bar. */ .orca-site-header .orca-searcher .e-search-results-container { z-index: 30; } /* THE PILL'S LOOK, HERE AND NOT ON THE WIDGET (rule design/prefixed-utility-classes): no border, the 30px corner and his soft left shadow from the commerce-header export, which the template used to write as the search widget's own settings. Four classes, so it outranks Elementor's search defaults whatever order the sheets load in. */ .orca-site-header .orca-searcher .orca-search .e-search-input { border: 0; border-radius: 30px; box-shadow: -2px 0 5px rgba(0, 0, 0, .15); } /* ---- the header's phone panel and its trigger (rule design/prefixed-utility-classes) --------------------------------------- */ /* White links on the dark ground, the accent and a faint wash under the cursor; the trigger in ink. These were eight literal colors on the nav widget. The !important is matched force: the solid, compact and over-photo header rules color every .orca-nav a with !important at up to three classes, and the panel's links sit inside .orca-nav - four classes win here. The plugin's own panel rule (chrome.orca-css, body.iw-menu-panel) is a step higher still and paints the same white, so the two agree. */ .orca-site-header .orca-nav .elementor-nav-menu--dropdown { background: var(--dark); } .orca-site-header .orca-nav .elementor-nav-menu--dropdown a.elementor-item, .orca-site-header .orca-nav .elementor-nav-menu--dropdown .elementor-item-description { color: #fff !important; background: transparent; } .orca-site-header .orca-nav .elementor-nav-menu--dropdown a.elementor-item:hover, .orca-site-header .orca-nav .elementor-nav-menu--dropdown a.elementor-item:focus-visible { color: var(--accent) !important; background: rgba(255, 255, 255, .06); } .orca-site-header .orca-nav .elementor-menu-toggle { color: var(--ink); background: transparent; } .orca-site-header .orca-nav .elementor-menu-toggle svg { fill: currentColor; } /* ---- the footer's accounts (rule design/prefixed-utility-classes) ------- */ /* The footer's muted white, the accent under the cursor - the same quiet mark as every other link down here. The widget used to carry a binding to the kit's TEXT color, near-black on the dark footer. */ .orca-foot .orca-foot-social .elementor-social-icon, .orca-foot .orca-foot-social .elementor-social-icon i { color: rgba(255, 255, 255, .72); } .orca-foot .orca-foot-social .elementor-social-icon svg { fill: currentColor; } .orca-foot .orca-foot-social .elementor-social-icon:hover, .orca-foot .orca-foot-social .elementor-social-icon:hover i { color: var(--accent); } /* THE QUIET MARKS STATE THEIR GROUND. The account door and the cart toggle are icons, not pills - but a site can carry stray button paint (Open Range's old orc- prototype snippet forces every .elementor-button gold, pill-shaped and padded, all with !important). The important here is matched force, and with it the fight comes down to specificity, where three classes beat one. Scoped to the two header marks and nothing else. */ .orca-site-header .orca-account-slot .elementor-button, .orca-site-header .orca-cart-slot .elementor-menu-cart__toggle_button { background: transparent !important; /* BORDER 0, FOREVER (Nick, 11 Sep): Elementor's menu-cart toggle ships its own border and the kit's button styling offers another; a quiet mark wears neither. This rule already stripped the fill, the radius and the shadow - the border was the one paint it forgot. */ border: 0 !important; border-radius: 0 !important; padding: 4px 6px !important; box-shadow: none !important; } /* ---- the cart and totals tables ----------------------------------------- */ /* Hairlines between rows, nothing boxed: Woo borders every cell, which reads as a spreadsheet sitting in the page. */ .woocommerce table.shop_table { border: 0; border-radius: 0; margin: 0; border-collapse: collapse; } .woocommerce table.shop_table th, .woocommerce table.shop_table td { border: 0; border-bottom: 1px solid var(--hairline); padding: 12px 10px; vertical-align: middle; } .woocommerce table.shop_table th { color: var(--ink); font-weight: 650; } .woocommerce table.shop_table td.product-name a { font-weight: 600; } .woocommerce table.shop_table .amount { font-variant-numeric: tabular-nums; } /* ---- pagination: quiet pills, the current one in chrome ----------------- */ .woocommerce nav.woocommerce-pagination { margin-top: var(--loose); } .woocommerce nav.woocommerce-pagination ul { display: flex; justify-content: center; gap: 8px; border: 0; margin: 0; } .woocommerce nav.woocommerce-pagination ul li { border: 0; overflow: visible; } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid var(--hairline); border-radius: var(--radius); color: var(--ink); background: transparent; line-height: 1; } .woocommerce nav.woocommerce-pagination ul li span.current { background: var(--chrome); border-color: var(--chrome); color: var(--reversed); } .woocommerce nav.woocommerce-pagination ul li a:hover { background: transparent; border-color: var(--accent); color: var(--accent); } /* ---- story + frame (playbook §3; rules design/story-frame, design/credential-chips) ---- The 7/5 split itself is an Elementor width setting on the two halves (the feature template), so an owner can still drag it. What only CSS can draw is here: the photograph cropped square, an accent border offset behind it like a mounted print, and a deep shadow that lifts it off the frame. The frame is a pseudo-element BEHIND the picture (z-index -1 inside an isolated box), so it never covers a pixel of the photograph. */ .orca-framed .orca-feature-media.orca-frame { position: relative; isolation: isolate; align-self: center; } .orca-framed .orca-feature-media.orca-frame::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border: 2px solid var(--accent); border-radius: var(--radius); transform: translate(clamp(10px, 1.6vw, 20px), clamp(10px, 1.6vw, 20px)); } .orca-framed.orca-rev .orca-feature-media.orca-frame::before { transform: translate(calc(-1 * clamp(10px, 1.6vw, 20px)), clamp(10px, 1.6vw, 20px)); } .orca-framed .orca-feature-media.orca-frame img { aspect-ratio: 1 / 1; max-height: none; object-fit: cover; width: 100%; box-shadow: 0 28px 56px -18px rgba(61, 46, 15, .55), 0 10px 22px -10px rgba(61, 46, 15, .35); } /* THE DROP CAP opens the home story only (the assembler decides where): the first letter of the first paragraph, in the accent, three lines deep; the display face is set beside the face itself, in the font sheet. */ .orca-drop-cap p:first-of-type::first-letter { float: left; margin: .06em .12em 0 0; font-weight: 700; font-size: 3.6em; line-height: .82; color: var(--accent); } /* CREDENTIAL CHIPS: scannable pills, one per credential, exactly as the client worded it. A hairline of the accent and a dot; never an icon that would imply a badge nobody issued. */ .orca-chips { margin-top: var(--snug); } .orca-chips ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--tight); } .orca-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; line-height: 1.3; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 9%, transparent); font-size: .82em; font-weight: 650; letter-spacing: .02em; color: var(--ink); } .orca-chips li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; } /* ---- full-photo service panels (playbook §3, §4.11, §4b; rule design/service-panels) ---- Built only when every service carries its own photograph. The photograph is the panel's own background; ::after repeats it (background: inherit, playbook §7) and is what scales on hover, and ::before is the duotone, whose background-COLOR darkens on hover because gradients do not transition. Both sit behind the words inside an isolated, clipped panel. NOTHING GROWS UNDER THE CURSOR (rule render/hover-grows) is about the ELEMENT's box: the zoom is a transform on a pseudo-element inside overflow: hidden, so the panel's size, and everything around it, stays exactly where it was. */ .orca-cards.orca-cards-panels { gap: var(--loose) !important; } .orca-cards-panels .orca-card.orca-photo-panel { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(280px, 30vw, 380px); justify-content: flex-end; background-color: var(--dark); background-size: cover; background-position: center; border: 0; box-shadow: var(--shadow-md); color: #fff; } .orca-cards-panels .orca-card.orca-photo-panel::after { content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: inherit; background-size: cover; background-position: center; transition: transform .7s cubic-bezier(.22,1,.36,1); } .orca-cards-panels .orca-card.orca-photo-panel::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-color: rgba(0,0,0,0); background-image: linear-gradient(180deg, rgba(236, 169, 24, .16) 0%, rgba(106, 79, 22, .6) 52%, rgba(106, 79, 22, .94) 100%); transition: background-color .35s ease; } .orca-cards-panels .orca-card.orca-photo-panel:hover::after, .orca-cards-panels .orca-card.orca-photo-panel:focus-within::after { transform: scale(1.06); } .orca-cards-panels .orca-card.orca-photo-panel:hover::before, .orca-cards-panels .orca-card.orca-photo-panel:focus-within::before { background-color: rgba(0,0,0,.22); } .orca-cards-panels a.orca-card.orca-photo-panel:hover { transform: none; border-color: transparent; } .orca-cards-panels .orca-card.orca-photo-panel .orca-card-body { background: transparent; padding: var(--loose) var(--snug) var(--snug); flex: 0 0 auto; } .orca-cards-panels .orca-card.orca-photo-panel .elementor-widget-heading .elementor-heading-title { color: #fff; } .orca-cards-panels .orca-card.orca-photo-panel p { color: rgba(255,255,255,.9); } /* A shorter panel puts the words into the weak end of the gradient, so on a phone the duotone deepens (~.8 at the middle stop, playbook §4b). */ @media (max-width: 767px) { .orca-cards-panels .orca-card.orca-photo-panel { min-height: 240px; } .orca-cards-panels .orca-card.orca-photo-panel::before { background-image: linear-gradient(180deg, rgba(236, 169, 24, .3) 0%, rgba(106, 79, 22, .8) 50%, rgba(106, 79, 22, .95) 100%); } } /* ---- gallery tiles (playbook §3, §4.11; rule media/equal-tiles-hover) ---- Equal square tiles; under the cursor the photograph zooms INSIDE its frame and a wash of the brand's dark comes over it. The frame is the link WordPress wraps each photograph in: it clips, so the tile's box never grows (rule render/hover-grows), and its ::after is the wash, animated by background-color because gradients do not transition. */ .orca-photos a { display: block; position: relative; overflow: hidden; border-radius: var(--radius); line-height: 0; } .orca-photos a img { transition: transform .6s cubic-bezier(.22,1,.36,1); box-shadow: none; border-radius: 0; } .orca-photos a::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-color: rgba(106, 79, 22, 0); transition: background-color .35s ease; } /* THE ZOOM IS A CROP, NOT A GROW (playbook §7; rules media/equal-tiles-hover, design/no-hover-grow): the photograph scales INSIDE the link that frames it, and the frame clips, so no element's box changes and nothing around the tile moves. scripts/check-style.orca-mjs allows a hover scale on an only while its frame, the .elementor-kit-6's own host, hides its overflow. */ .orca-photos a:hover img, .orca-photos a:focus-visible img { transform: scale(1.06); } .orca-photos a:hover::after, .orca-photos a:focus-visible::after { background-color: rgba(106, 79, 22, .32); } /* ---- the callout band (playbook §3; rule design/callout-band) ---- One fact the client gave, pulled out of the prose onto the dark band with a circled icon. The band paints itself dark whatever the planner assigned, the way the statement band always paints the accent. */ .orca-section.orca-callout { background: var(--dark); color: var(--reversed); } .orca-section.orca-callout .elementor-widget-heading .elementor-heading-title, .orca-section.orca-callout h2 { color: var(--reversed); } .orca-section.orca-callout p { color: rgba(255,255,255,.86); } .orca-callout .orca-callout-icon { border: 2px solid var(--accent); border-radius: 50%; color: var(--accent); display: flex; align-items: center; justify-content: center; line-height: 0; flex: none; } .orca-callout .orca-callout-icon svg { width: 40px; height: 40px; } .orca-callout .orca-btn-out { color: #fff; border-color: rgba(255,255,255,.75); } /* ---- the video hero's trust strip and roundel (playbook §3, §4b; rule design/video-hero) ---- Both are printed from facts the client gave (the founding year, the credentials) and exist only when those facts do. The strip is one line, forced: it clips rather than wraps. The roundel is desktop only, and the mobile hero is eyebrow, headline and buttons, nothing else. */ .orca-hero .orca-trust-strip { margin-top: var(--loose); max-width: 100%; } .orca-hero .orca-trust-strip ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; align-items: center; gap: 16px; white-space: nowrap; overflow: hidden; } .orca-hero .orca-trust-strip li { display: inline-flex; align-items: center; gap: 16px; flex: none; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.86); } .orca-hero .orca-trust-strip li + li::before { content: ''; width: 6px; height: 6px; flex: none; background: var(--accent); transform: rotate(45deg); } .orca-section.orca-hero .orca-roundel.e-con { position: absolute; right: 0; bottom: 0; z-index: 2; width: 132px; height: 132px; min-height: 0; padding: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.7); background: rgba(106, 79, 22, .35); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; } .orca-hero .orca-roundel p { margin: 0; color: #fff; line-height: 1.05; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; } .orca-hero .orca-roundel strong { display: block; font-size: 30px; letter-spacing: .02em; } @media (prefers-reduced-motion: no-preference) { .orca-photo.orca-hero .orca-trust-strip { animation: orca-rise .6s cubic-bezier(.22,1,.36,1) .85s backwards; } } @media (max-width: 1024px) { .orca-hero .orca-roundel { display: none !important; } } @media (max-width: 767px) { .orca-hero .orca-trust-strip { display: none !important; } } /* ---- the title band's breadcrumb eyebrow (playbook §3 Page hero) ---- */ .orca-title-band .orca-breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0; } .orca-title-band .orca-breadcrumb a { color: inherit; text-decoration: none; } .orca-title-band .orca-breadcrumb a:hover { text-decoration: underline; } .orca-title-band .orca-breadcrumb [aria-hidden] { margin: 0 .6em; opacity: .7; } .orca-title-band.orca-photo .orca-breadcrumb { color: rgba(255,255,255,.82); font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; } /* preview chrome only */ .orca-meta { position: fixed; right: 12px; bottom: 12px; z-index: 9; background: rgba(20,20,20,.92); color: #fff; border-radius: 6px; padding: 10px 12px; font: 11px/1.55 ui-monospace, monospace; max-width: 280px; } .orca-meta b { color: #8FD6BC; } .orca-meta a { color: #8FD6BC; } /* Ivywild pattern utilities for "orca-". Generated from the design tokens — edit the tokens in Orca and re-push rather than editing this block, which is replaced on every push. Hand-written CSS outside the markers is preserved. */ /* ---- Never scroll sideways. House rule, no exceptions unless the horizontal scroll IS the feature (a carousel, a wide table). Sideways scroll on a marketing page always reads as broken. `clip` rather than `hidden`: hidden makes the element a scroll container, which silently breaks `position: sticky` on headers. `min-width: 0` is the one that actually matters here. Flex children default to `min-width: auto`, so they refuse to shrink below their content — in a nowrap row of three cards, a long word pushes the row past 100% and the whole page scrolls. This is the most common cause of overflow in generated layouts, and it is invisible until some real copy happens to be long. */ html{overflow-x:clip} body{overflow-x:clip;max-width:100%} .e-con,.e-con-inner,.elementor-widget,.elementor-widget-container{min-width:0} img,video,iframe,svg{max-width:100%;height:auto} pre,code,table{max-width:100%;overflow-x:auto} /* ---- the quote form ---------------------------------------------------- Raw markup from core/forms/html.ts; quote.js in the connect plugin runs it. Inputs on the 4px radius and the hairline; tap targets are HEIGHT, which is what a thumb finds; a revealed block indents under the choice that asked for it, so the dependency reads on the page the way it reads in the document. */ /* THE ROOM ITS OWN HEIGHT. The band holds at least a viewport minus the header, so the card floats in a ground of its own instead of squeezing between neighbors -- dvh where the browser has it, vh where it does not. */ .orca-section.orca-qf-band{min-height:calc(100vh - var(--header-h,68px)); min-height:calc(100dvh - var(--header-h,68px)); display:flex;align-items:center} .orca-qf-card{max-width:720px;margin:0 auto;width:100%} .orca-qf{max-width:640px;margin:0 auto} /* A closed box says so. The chosen ones stay live, so changing your mind is one untick, never a hunt for which box to free. */ .orca-qf-option input:disabled+span{opacity:.45} .orca-qf-choices.qf-full .orca-qf-option>label{cursor:default} .orca-qf-field{margin:16px 0} .orca-qf-label{display:block;font-weight:600;margin-bottom:8px} .orca-qf input[type=text],.orca-qf input[type=email],.orca-qf input[type=tel], .orca-qf input[type=number],.orca-qf input[type=date],.orca-qf input[type=time], .orca-qf input[type=url],.orca-qf select,.orca-qf textarea{ width:100%;padding:10px 12px;font:inherit;color:inherit; border:1px solid var(--hairline);border-radius:var(--radius,4px);background:#fff} .orca-qf-choices{display:flex;flex-direction:column;gap:2px} .orca-qf-option>label,.orca-qf-toggle{ display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer} .orca-qf-option input,.orca-qf-toggle input{width:18px;height:18px;accent-color:#673a0a} .orca-qf [data-qf-when]{margin:4px 0 8px 28px;padding-left:12px;border-left:2px solid var(--hairline)} /* HIDDEN MEANS GONE. The script drives the steps and the nav with the hidden attribute, and the UA's [hidden] rule loses to ANY author display -- including the kit's own button styling -- which is how Back, Next and the submit were all on screen at once on step 1 of 8. */ [data-qf] [hidden]{display:none!important} /* Helper prose under a field label -- quieter than the label, above the control. */ .orca-qf-desc{font-size:.85em;opacity:.75;margin:2px 0 8px;max-width:var(--measure,62ch)} .orca-qf-step{border:0;padding:0;margin:0} .orca-qf-step-title{font-family:'Baloo 2', system-ui, sans-serif;font-weight:600;font-size:1.25rem;padding:0;margin-bottom:8px} .orca-qf-nav{display:flex;align-items:center;gap:16px;margin-top:32px} .orca-qf-progress{margin-left:auto;font-size:13px;color:var(--ink-muted)} .orca-qf-nav .orca-btn,.orca-qf-nav .orca-btn-out{font-family:'Baloo 2', system-ui, sans-serif} .orca-qf-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0} .orca-qf-error{color:#7f1d1d;font-size:14px} .orca-qf-done{font-weight:600} .orca-qf .qf-invalid{border-color:#b91c1c!important} /* THE MAP FILLS ITS HALF. An iframe has no intrinsic size: unstyled it renders 300x150 -- or 0 inside a flex column -- so the contact panel's map half reserved six hundred pixels and painted none of them. The column was there; the map inside it was a zero-height strip. */ .orca-map{display:flex} .orca-map iframe,.orca-map img{width:100%;height:100%;min-height:320px;border:0;display:block;object-fit:cover} /* ---- the footer's fittings ---------------------------------------------- The footer logo is CAPPED AT THE HEADER LOGO'S HEIGHT -- the two marks are the same mark, and a footer logo four times the header's reads as a poster. 44px is the header's own cap: header-h-compact minus its 8px of air, the number the header comment has always named. */ .orca-foot-logo img{max-height:44px;width:auto} /* Two columns past five items. break-inside keeps a link from snapping in half at the column boundary. */ .orca-foot-links-2 ul{columns:2;column-gap:40px} .orca-foot-links-2 li{break-inside:avoid} /* The social icons are Elementor's own social-icons widget -- the networks' real marks, inlined as SVG by its font-icon pipeline. The design sheet carries the quiet coloring (.foot-social, never a widget setting); this adds the hover, so the accent arrives the way it does for every other link down here. */ .orca-foot-social .elementor-social-icon{background:transparent} .orca-foot-social .elementor-social-icon:hover svg, .orca-foot-social .elementor-social-icon:hover i{color:#673a0a;fill:#673a0a} /* THE NAV, THE EYEBROWS AND THE BUTTONS ARE ONE VOICE (Nick): the small insistent things a site says. The nav takes it at its own size and weight; only the family is shared. */ .orca-nav .elementor-item,.orca-nav-list .elementor-item, body.iw-menu-panel .elementor-nav-menu--dropdown a{font-family:'Baloo 2', system-ui, sans-serif} /* THE EYEBROW WEARS THE ACCENT, and it has to OUTRANK the kit to do it. Elementor's theme style writes .elementor-kit-N h6 at 0,1,1 -- one class, one element -- and a bare .p-eyebrow at 0,1,0 loses to it, so the subheads face kept taking the eyebrows however plainly the rule was stated ("EYEBROW GETS ACCENT" -- Nick, 1 Sep). Scoped under the section it is 0,2,0 and wins without an !important. */ /* The class rides the widget WRAPPER; the h6 sits inside it. Both forms, so the accent reaches the element whether the kit styles h6 directly or not. */ .orca-section .orca-eyebrow, .orca-section .orca-eyebrow h6, .orca-section .orca-eyebrow .elementor-heading-title{font-family:'Baloo 2', system-ui, sans-serif;font-size:.75rem;letter-spacing:.22em; text-transform:uppercase;font-weight:700;color:#673a0a;margin-bottom:.25rem} /* ON A DARK SURFACE THE EYEBROW IS WHITE (Nick, 2 Sep): the accent reads on the warm grounds and dies over a photograph's scrim or a dark block. The accent rule above is 0,3,0, so these carry a fourth class -- and sit AFTER it, because the first attempt sat before it at equal weight and lost the tie. */ .orca-section.orca-photographic .orca-eyebrow, .orca-section.orca-photographic .orca-eyebrow h6, .orca-section.orca-photographic .orca-eyebrow .elementor-heading-title, .orca-section.orca-statement .orca-eyebrow, .orca-section.orca-statement .orca-eyebrow h6, .orca-section.orca-statement .orca-eyebrow .elementor-heading-title, .orca-section.orca-accent-cta .orca-eyebrow, .orca-section.orca-accent-cta .orca-eyebrow h6, .orca-section.orca-accent-cta .orca-eyebrow .elementor-heading-title, .orca-section .orca-eyebrow.orca-wt, .orca-section .orca-eyebrow.orca-wt h6, .orca-section .orca-eyebrow.orca-wt .elementor-heading-title, /* The duo's dark block wears the PREFIXED tone class (ns() writes orca-on-dark); the bare .on-dark this said before matched nothing. */ .orca-duo-block.orca-on-dark .orca-eyebrow, .orca-duo-block.orca-on-dark .orca-eyebrow h6, .orca-duo-block.orca-on-dark .orca-eyebrow .elementor-heading-title, .orca-dark-skin .orca-eyebrow, .orca-dark-skin .orca-eyebrow h6, .orca-dark-skin .orca-eyebrow .elementor-heading-title{color:#fff} /* THE PRICE LIST SPEAKS SUBHEADS (Nick, 30 Aug): a dish name is an interior heading, not a paragraph - the name and its price take the Subheads face, the description stays in the body face. !IMPORTANT ON THE FAMILY, and this is the whole fix (31 Aug). Elementor's own price-list widget CSS names the PRICE at a specificity a bare class cannot reach, so the shared declaration set the size, the weight and the color - and the price kept the HEADING face while the title took the subhead. Measured on the built page: title "Source Sans 3" 19px 600, price "haboro-contrast-extended" 19px 600. Same size, same weight, two faces ("the prices are supposed to be same font as titles" - Nick). One declaration, one face, and nothing downstream can take the price back. */ .orca-price-list .elementor-price-list-title, .orca-price-list .elementor-price-list-price{font-family:'Baloo 2', system-ui, sans-serif!important; font-weight:600!important} /* The dish name sits ON its description (Nick, 2 Sep): Elementor gives the header its own bottom margin and the item gap already does that job, so every dish read as two spaced rows. widget-price-list.min.css loads AFTER the kit stylesheet, so equal specificity loses on source order -- the section class is the extra weight. */ .orca-section .orca-price-list .elementor-price-list-item .elementor-price-list-header{margin-bottom:0} .orca-h1{font-family:'Baloo 2', system-ui, sans-serif;font-weight:700; font-size:clamp(2.25rem,5vw,4rem);line-height:1.05;letter-spacing:-.01em} .orca-h2{font-family:'Baloo 2', system-ui, sans-serif;font-weight:700; font-size:clamp(1.75rem,3vw,2.75rem);line-height:1.15} .orca-section .orca-h3,.orca-h3{font-family:'Baloo 2', system-ui, sans-serif;font-weight:600;font-size:1.5rem;line-height:1.2} .orca-section .orca-h4,.orca-h4{font-family:'Baloo 2', system-ui, sans-serif;font-weight:600;font-size:1.125rem;line-height:1.3} .orca-wt,.orca-wt *{color:#fff} /* Elementor's kit heading color arrives as `.elementor-kit-N h1` - (0,1,1) - so the single-class rule above loses on headings, and every reversed band on the 25 August build shipped brand-maroon headlines over its photograph or its accent color. The doubled class is the container-padding trick again: (0,2,1) beats the kit wherever the file order lands, without !important. */ .orca-wt.orca-wt h1,.orca-wt.orca-wt h2,.orca-wt.orca-wt h3, .orca-wt.orca-wt h4,.orca-wt.orca-wt h5,.orca-wt.orca-wt h6, h1.orca-wt.orca-wt,h2.orca-wt.orca-wt,h3.orca-wt.orca-wt, h4.orca-wt.orca-wt,h5.orca-wt.orca-wt,h6.orca-wt.orca-wt{color:#fff} /* A measure. Body copy running the full width of a boxed container is the single most common reason a generated page looks unfinished. */ .orca-lead{font-family:'Nunito Sans', system-ui, sans-serif;font-size:1.125rem;line-height:1.6; max-width:62ch;color:#262220} .orca-lead p:last-child,.orca-muted p:last-child{margin-bottom:0} .orca-muted{font-family:'Nunito Sans', system-ui, sans-serif;opacity:.72;max-width:60ch} /* The system radius, not 14px (rule design.corner-radius-4): this layer loads after the design sheet, so its 14px quietly beat the 4px every card is drawn with. */ .orca-card{height:100%;padding:32px;border-radius:var(--radius,4px);background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.05),0 10px 28px rgba(0,0,0,.06)} .orca-card .elementor-icon-box-title{margin-block:.6rem .35rem} .orca-chip{display:inline-block;padding:6px 14px;border-radius:999px; border:1px solid #eca918;font-size:.8125rem;font-weight:600;color:#eca918} .orca-steps{font-family:'Baloo 2', system-ui, sans-serif;font-size:2.75rem;line-height:1;color:#673a0a;opacity:.35} .orca-quote{max-width:70ch;margin-inline:auto;text-align:center} /* THE RULEBOOK'S BUTTON, in the utility layer too. This pill was 999px at 14/30 padding while the rulebook's shape table says 4px and 8px 32px -- the check enforced the rule against the design CSS and this layer quietly disagreed with it on the built site. btn-slot rides along so the header CTA, which wears that class and no other, obeys the same three numbers. The hover is the STYLE SWAP, not a dimmer: solid hovers to its own outline, outline hovers to solid, the border never changes width. */ .orca-btn .elementor-button,.orca-btn-slot .elementor-button{ font-family:'Baloo 2', system-ui, sans-serif;background:#673a0a;color:#ffffff; border:2px solid #673a0a;border-radius:var(--radius,4px); padding:8px 32px;font-weight:600; transition:background .2s ease,color .2s ease} /* INLINE-FLEX AT EVERY WIDTH, AND A 44PX TAP FLOOR BELOW 900 (rule design.button-shape). The floor lived on the preview's .btn only, which on the built site is the widget WRAPPER, so every phone button was ~39px. */ .orca-btn .elementor-button,.orca-btn-slot .elementor-button,.orca-btn-ghost .elementor-button{ display:inline-flex;align-items:center;justify-content:center} @media(max-width:899px){.orca-btn .elementor-button,.orca-btn-slot .elementor-button, .orca-btn-ghost .elementor-button{min-height:44px}} .orca-btn .elementor-button:hover,.orca-btn-slot .elementor-button:hover{ background:transparent;color:#673a0a} .orca-btn-ghost .elementor-button{font-family:'Baloo 2', system-ui, sans-serif;background:transparent;color:#eca918; border:2px solid #eca918;border-radius:var(--radius,4px);padding:8px 32px;font-weight:600; transition:background .2s ease,color .2s ease} .orca-btn-ghost .elementor-button:hover{background:#eca918;color:#ffffff} /* THE WHITE BUTTON GOES WHERE THE WHITE TEXT GOES (Nick, 1 Sep). On a reversed band -- the photographic surfaces and the statement -- an accent outline reads as smudge over a photograph; the button borrows the text's own color, and hover fills white with the ink, the same style swap as everywhere else. */ .orca-photographic .orca-btn-ghost .elementor-button, .orca-photo .orca-btn-ghost .elementor-button, .orca-statement .orca-btn-ghost .elementor-button, .orca-accent-cta .orca-btn-ghost .elementor-button, /* The hero's own CTA rides in btn-slot, not btn-ghost -- the white rule missed it and an accent outline sat on the photograph. Scoped to the band's inner so the header CTA floating OVER the hero keeps its solid accent: the header is chrome, not band content. */ .orca-photographic .orca-inner .orca-btn-slot .elementor-button, .orca-photo .orca-inner .orca-btn-slot .elementor-button{ color:#fff;border-color:#fff;background:transparent} .orca-photographic .orca-btn-ghost .elementor-button:hover, .orca-photo .orca-btn-ghost .elementor-button:hover, .orca-statement .orca-btn-ghost .elementor-button:hover, .orca-accent-cta .orca-btn-ghost .elementor-button:hover, .orca-photographic .orca-inner .orca-btn-slot .elementor-button:hover, .orca-photo .orca-inner .orca-btn-slot .elementor-button:hover{ background:#fff;color:var(--ink,#1A1A1A);border-color:#fff} /* THE CLASSES THE BUILDER ACTUALLY EMITS. buttons() in templates/kit.ts puts `{p}-btn-slot` and `{p}-btn-secondary` on the widget wrappers, and `{p}-btn-slot` rides in the rulebook block's own .elementor-kit-6 list above - ONE definition of the button's shape. A second filled rule sat here with the old pill numbers (999px at 12/28) and, winning by file order, quietly shipped the pill on every built site while the rulebook block and the check both said 4px and 8px 32px - invisible for as long as Open Range's orc- prototype snippet was forcing its own pill over both (found 9 Sep, the day the snippet came out). What stays here is only the HOVER at doubled specificity, so the kit's own `.elementor-kit-N .elementor-button:hover` never outranks the swap (Nick, 30 Aug: solid hovers to its own outline, the border never changes, so the swap costs no layout shift). */ .orca-btn-slot.orca-btn-slot .elementor-button:hover{filter:none; background:transparent;color:#673a0a;border-color:#673a0a} /* SECONDARY BUTTONS HAVE BACKGROUND #0000. House rule, Nick, 27 Aug — stated after a secondary shipped as a light pill on the accent band. The widget carries BOTH classes (btn-slot btn-secondary), so at equal specificity the filled rule above and this one were decided by file order — and file order is not a thing to bet a design on. The class is doubled to outrank the filled rule wherever the two rules end up. The outline wears the BRAND and hovers to solid brand; its text is computed by contrast, never assumed. */ .orca-btn-secondary.orca-btn-secondary .elementor-button{background:#0000;color:#eca918; border:2px solid #eca918;border-radius:var(--radius,4px);padding:8px 32px;font-weight:600; transition:background .2s ease,color .2s ease} .orca-btn-secondary.orca-btn-secondary .elementor-button:hover{filter:none; background:#eca918;color:#ffffff;border-color:#eca918} /* ON THE DARK POSTER the secondary outline borrows the text's white (Nick's improvement list, 10 Sep) - the brand outline on near-black is a whisper. Same swap: the outline hovers to solid white. */ .orca-duo-block.orca-on-dark .orca-btn-secondary.orca-btn-secondary .elementor-button{ background:#0000;color:#fff;border-color:#fff} .orca-duo-block.orca-on-dark .orca-btn-secondary.orca-btn-secondary .elementor-button:hover{ filter:none;background:#fff;color:var(--dark,#1a1a1a);border-color:#fff} /* THE JUMP STRIP'S CHIPS ARE BUTTON WIDGETS, so the kit's global button style lands on them and ten quiet jump links shipped as ten loud accent pills. Same join as `{p}-btn-slot` above: our class is on the wrapper, Elementor's is on the anchor, and the rule that styles the anchor has to say both. Doubled wrapper class for the same reason as `{p}-wt` — the kit's own `.elementor-kit-N .elementor-button` is (0,2,1) and file order is not a thing to bet a design on. QUIET by default; LOUD only on the section the reader is in, which the strip's scroll-spy marks with aria-current. */ .orca-jump.orca-jump .elementor-button{background:transparent;color:var(--ink-muted,#262220); border:0;box-shadow:none;border-radius:999px;padding:8px 14px; font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase} .orca-jump.orca-jump .elementor-button:hover{background:var(--band-tint,rgba(0,0,0,.05)); color:var(--ink,#262220);filter:none} .orca-jump.orca-jump .elementor-button[aria-current]{background:var(--accent,#673a0a);color:#fff} /* A BUTTON IS NEVER THE COLOR OF THE SURFACE IT SITS ON. On the accent band an accent button is invisible — the statement's "Order online" shipped as bare white text. Reversed treatment on loud surfaces, stated per surface so the rule cannot depend on which band a button happens to land in. THE SAME SWAP applies on the cta row (Nick, 30 Aug: "on hover just swap button style outline-hover > solid, solid-hover > outline"): the solid white pill hovers to a white outline, the white outline hovers to a solid white pill, borders unchanged. */ .orca-accent-cta .orca-btn-slot .elementor-button{background:#fff;color:#673a0a;border-color:#fff} .orca-accent-cta .orca-btn-slot.orca-btn-slot .elementor-button:hover{filter:none; background:transparent;color:#fff;border-color:#fff} .orca-accent-cta .orca-btn-secondary.orca-btn-secondary .elementor-button, .orca-statement .orca-btn-secondary.orca-btn-secondary .elementor-button{background:#0000; color:#fff;border-color:#fff} .orca-accent-cta .orca-btn-secondary.orca-btn-secondary .elementor-button:hover, .orca-statement .orca-btn-secondary.orca-btn-secondary .elementor-button:hover{ background:#fff;color:#673a0a;border-color:#fff} .orca-photographic .orca-btn-secondary.orca-btn-secondary .elementor-button{color:#fff; border-color:#fff} .orca-photographic .orca-btn-secondary.orca-btn-secondary .elementor-button:hover{ background:#fff;color:#262220;border-color:#fff} /* Hero over a photograph. NO TEXT SHADOW: the scrim is a gradient dark exactly where the words are, and a drop shadow under it is the flat-wash-plus-shadow pattern the playbook forbids - it is what makes a headline look printed on fog. If a headline is hard to read here, the scrim is wrong, not missing. */ .orca-lead.orca-wt{color:rgba(255,255,255,.92)} /* Media placeholders. Deliberately obvious — a slot that reads as unfinished is safer than a silent gap someone ships by accident. */ .orca-mediaslot{background-color:#efece7;background-image: repeating-linear-gradient(45deg,rgba(0,0,0,.035) 0 12px,transparent 12px 24px); border:1px dashed rgba(0,0,0,.18)} .orca-mediaslot-label h6,.orca-mediaslot-label{font-family:'Nunito Sans', system-ui, sans-serif; font-size:.75rem;letter-spacing:.08em;text-transform:uppercase; color:rgba(0,0,0,.45);margin:0} /* Rhythm. Consecutive sections of the same kind were doubling their padding. */ .orca-mediaslot+.orca-mediaslot{margin-top:16px} @media(max-width:767px){ .orca-h1{font-size:2.1rem} .orca-card{padding:22px} .orca-mediaslot{min-height:180px} } /* move: eyebrow-dot */ .orca-eyebrow .elementor-heading-title { display: inline-flex; align-items: center; gap: 10px; } .orca-eyebrow .elementor-heading-title::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex: none; } .orca-eyebrow::before { content: none; } .orca-statement .orca-eyebrow .elementor-heading-title::before, .orca-photographic .orca-eyebrow .elementor-heading-title::before, .orca-contact-band .orca-eyebrow .elementor-heading-title::before { background: #fff; } /* move: btn-pill */ .orca-btn, .orca-btn-out { border-radius: 999px; padding-inline: 26px; } /* move: card-topline */ .orca-card, .orca-icon-card { border-top: 4px solid var(--accent); } /* move: photo-rounded */ .orca-feature img, .orca-split img, .orca-card img { border-radius: clamp(18px, 2.5vw, 34px); } :root { --logo-mark: url('https://1270962.us22.myftpupload.com/wp-content/uploads/2026/09/Meyers-House-of-Sweets-Logo-sm2-1.png'); } .orca-accent-cta, .orca-contact-band, .orca-title-band.orca-photo, .orca-section.orca-callout, .orca-section.orca-dark-skin, .orca-duo-block.orca-on-dark { overflow: hidden; } .orca-accent-cta > .orca-inner, .orca-section.orca-callout > .orca-inner, .orca-section.orca-dark-skin > .orca-inner { position: relative; isolation: isolate; } .orca-contact-band, .orca-duo-block.orca-on-dark { position: relative; isolation: isolate; } /* THE DUO BAND'S BRAND QUOTE CELL WEARS IT (playbook §3: "brand pull-quote cell (logo watermark)"); the cell already isolates and clips. */ /* THE FOOTER AND THE DUO'S DARK CELL WEAR IT TOO (playbook §3 duo band, §4.5): the dark quote cell and the dark footer are exactly where Trafton's hand build put the mark. The footer clips rather than hides, so nothing in it becomes a scroll container. */ .orca-foot { position: relative; isolation: isolate; overflow: clip; } .orca-accent-cta > .orca-inner::before, .orca-section.orca-callout > .orca-inner::before, .orca-section.orca-dark-skin > .orca-inner::before, .orca-title-band.orca-photo > .orca-inner::before, .orca-duo-block.orca-on-dark::after, .orca-duo-cta > .orca-duo-quote::before, .orca-contact-split-row > .orca-contact-side::before, .orca-foot::after, .orca-contact-band::before { content: ''; position: absolute; z-index: -1; pointer-events: none; top: 50%; right: -6%; width: clamp(180px, 34vw, 440px); aspect-ratio: 1 / 1; /* Elementor draws its own overlay on a container pseudo-element at full size; these say the mark's own box outright. */ left: auto; bottom: auto; height: auto; transform: translateY(-50%); background: var(--logo-mark) center / contain no-repeat; filter: brightness(0) invert(1); opacity: .075; } /* The footer's mark sits low at the right, clear of the columns' words. */ .orca-foot::after { top: auto; bottom: -12%; transform: none; right: -4%; } @media (max-width: 767px) { .orca-accent-cta > .orca-inner::before, .orca-section.orca-callout > .orca-inner::before, .orca-section.orca-dark-skin > .orca-inner::before, .orca-title-band.orca-photo > .orca-inner::before, .orca-duo-block.orca-on-dark::after, .orca-duo-cta > .orca-duo-quote::before, .orca-contact-split-row > .orca-contact-side::before, .orca-contact-band::before { right: -18%; } } :root { --logo-swatches: #673A0A #A0713F #D2B145 #DBD40F; --logo-brand: #673A0A; --accent-from: material; --accent-held: #2F6BFF; --trade-materials: #2F6BFF; } /* revision #52: Fix footer text contrast sitewide: the Pages links, Contact heading, address, phone number and copyright line in the foo */ .orca-footer, .orca-footer a, .orca-footer p, .orca-footer address, .orca-footer span, .orca-footer .orca-group, .orca-footer .orca-group * { color: #f5f2ec; } .orca-footer a:hover { color: #ffffff; } /* revision #53: Fix the sticky category nav strip so it always sits below the pinned header, never behind it. Currently it sits roughly */ .orca-category-circles { position: sticky; top: var(--orca-header-height, 80px); z-index: 20; } .orca-section { scroll-margin-top: var(--orca-header-height, 80px); } @media (prefers-reduced-motion: reduce) { .orca-category-circles { transition: none; } } /* revision #54: Audit and correct contrast for all text sitting on colored surfaces sitewide, wiring the brand (#673A0A) and accent (#2F */ .orca-section h1, .orca-section h2, .orca-section h3 { color: #673A0A; } .orca-btn { color: #FFFFFF; background-color: #2F6BFF; } .orca-card { color: #673A0A; } .orca-group li, .orca-group p { color: #FFFFFF; } /* revision #57: Site-wide: eyebrow labels (small kicker text above headings, e.g. 'About') are missing their drawn underline rule requir */ .orca-section .orca-eyebrow, .orca-card .orca-eyebrow { position: relative; padding-bottom: 8px; } .orca-eyebrow::after { content: ""; position: absolute; left: 0; bottom: 0; width: 32px; height: 2px; background: currentColor; opacity: 0.6; } /* --- orca:utilities:end --- */ /* === MH-REDESIGN === (hand-built, 2026-09-24; see orca docs/hand-builds/meyers.md) */ :root{ --mh-choc:#2B1B10;--mh-cocoa:#5A3A22;--mh-ink:#2B1B10;--mh-muted:#6B5645; --mh-gold:#E9A91B;--mh-gold-deep:#C98A0A;--mh-gold-soft:#FBEBC4; --mh-cream:#FBF5EA;--mh-paper:#FFFDF8;--mh-line:#EADFCC;--mh-rose:#B23A48; --mh-display:"Fraunces",Georgia,serif;--mh-body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif; --mh-wide:1240px;--mh-gut:clamp(16px,4vw,40px);--mh-pad:clamp(56px,8vw,104px); --mh-r:14px;--mh-shadow:0 1px 2px rgba(43,27,16,.06),0 8px 24px -12px rgba(43,27,16,.18); /* Orca tokens re-pointed so the kept chrome follows the new palette */ --brand:#E9A91B;--accent:#5A3A22;--chrome:#E9A91B;--cta:#E9A91B;--cta-deep:#C98A0A;--on-accent:#2B1B10; --ground:#FFFDF8;--recessed:#FBF5EA;--ink:#2B1B10;--ink-muted:#6B5645;--dark:#2B1B10;--hairline:#EADFCC; --orca-font-head:var(--mh-display);--orca-font-body:var(--mh-body); } body{background:var(--mh-paper);color:var(--mh-ink);font-family:var(--mh-body)} body .mh,body .mh p,body .mh li{font-family:var(--mh-body)} /* ---------- section frame ---------- */ body .e-con.mh{padding:var(--mh-pad) var(--mh-gut)!important;background:var(--mh-paper);--display:flex} body .e-con.mh.mh-cream{background:var(--mh-cream)} body .e-con.mh.mh-dark{background:var(--mh-choc);color:var(--mh-cream)} body .mh>.mh-in,body .mh .e-con.mh-in{width:100%;max-width:var(--mh-wide);margin:0 auto;gap:0;flex-direction:column} body .mh .e-con{--gap:0px;--row-gap:0px;--column-gap:0px} body .mh .elementor-widget{margin:0} body .mh .e-con.mh-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center} @media (max-width:900px){body .mh .e-con.mh-split{grid-template-columns:1fr}} /* ---------- type ---------- */ body .mh .elementor-widget-heading .elementor-heading-title{font-family:var(--mh-display);color:inherit;font-variation-settings:"SOFT" 100;letter-spacing:-.01em} body .mh .mh-h2.elementor-widget-heading .elementor-heading-title{font-size:clamp(30px,3.6vw,46px);line-height:1.08;font-weight:650;color:var(--mh-choc)} body .mh.mh-dark .mh-h2.elementor-widget-heading .elementor-heading-title{color:var(--mh-cream)} body .mh .mh-eyebrow.elementor-widget-heading .elementor-heading-title{font-family:var(--mh-body);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mh-gold-deep);margin-bottom:14px} body .mh.mh-dark .mh-eyebrow.elementor-widget-heading .elementor-heading-title{color:var(--mh-gold)} body .mh .mh-lead{font-size:clamp(17px,1.4vw,19px);line-height:1.6;color:var(--mh-muted);max-width:56ch;margin-top:16px} body .mh.mh-dark .mh-lead{color:#E6D8C3} body .mh .mh-lead p{margin:0} /* ---------- buttons ---------- */ body .mh .mh-btns,body .mh-btns.e-con{display:flex;flex-direction:row;flex-wrap:wrap;gap:12px!important;margin-top:28px;align-items:center} body .mh-btn.elementor-widget-button .elementor-button{font-family:var(--mh-body);font-size:16px;font-weight:700;letter-spacing:.01em;padding:15px 26px;border-radius:999px;border:2px solid transparent;line-height:1.1;transition:transform .15s ease,background-color .15s ease,box-shadow .15s ease;fill:currentColor} body .mh-btn.elementor-widget-button .elementor-button:hover{transform:translateY(-1px)} body .mh-btn-gold.elementor-widget-button .elementor-button{background:var(--mh-gold);color:var(--mh-choc);box-shadow:0 6px 18px -8px rgba(201,138,10,.8)} body .mh-btn-gold.elementor-widget-button .elementor-button:hover{background:#F2B62C;color:var(--mh-choc)} body .mh-btn-dark.elementor-widget-button .elementor-button{background:var(--mh-choc);color:var(--mh-cream)} body .mh-btn-dark.elementor-widget-button .elementor-button:hover{background:var(--mh-cocoa);color:#fff} body .mh-btn-line.elementor-widget-button .elementor-button{background:transparent;color:var(--mh-choc);border-color:var(--mh-choc)} body .mh-btn-line.elementor-widget-button .elementor-button:hover{background:var(--mh-choc);color:var(--mh-cream)} body .mh-btn-line-lt.elementor-widget-button .elementor-button{background:transparent;color:var(--mh-cream);border-color:rgba(251,245,234,.55)} body .mh-btn-line-lt.elementor-widget-button .elementor-button:hover{background:var(--mh-cream);color:var(--mh-choc)} body .mh-btn-text.elementor-widget-button .elementor-button{background:none;padding:6px 0;border-radius:0;color:var(--mh-choc);border-bottom:2px solid var(--mh-gold)} body .mh a:focus-visible,body .mh-btn .elementor-button:focus-visible{outline:3px solid var(--mh-gold);outline-offset:3px} /* ---------- section heads ---------- */ body .mh .e-con.mh-head{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-end;gap:24px!important;margin-bottom:36px;flex-wrap:wrap} body .mh .mh-head .mh-btns{margin-top:0} body .mh .mh-head-copy{flex:1 1 420px} /* ---------- hero ---------- */ body .e-con.mh.mh-hero{padding:0 var(--mh-gut)!important;min-height:min(640px,calc(100svh - 150px));display:flex;align-items:center; background:#EDE2D3 url("https://1270962.us22.myftpupload.com/wp-content/uploads/2026/09/about-title-band-image.jpg") 70% center/cover no-repeat;position:relative;overflow:hidden} body .e-con.mh.mh-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(251,245,234,.97) 0%,rgba(251,245,234,.92) 38%,rgba(251,245,234,.35) 62%,rgba(251,245,234,0) 78%);pointer-events:none} body .mh-hero>.mh-in{position:relative;z-index:1;padding:clamp(56px,8vw,96px) 0} body .mh-hero .mh-hero-copy{max-width:600px} body .mh .mh-hero-h.elementor-widget-heading .elementor-heading-title{font-size:clamp(40px,5.6vw,72px);line-height:1.02;font-weight:700;color:var(--mh-choc);letter-spacing:-.02em} body .mh-hero .mh-lead{color:#4A3626;margin-top:20px} body .mh .mh-proof{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 22px;font-size:15px;font-weight:600;color:var(--mh-cocoa)} body .mh .mh-proof li{display:flex;align-items:center;gap:7px} body .mh .mh-proof svg{width:18px;height:18px;fill:none;stroke:var(--mh-gold-deep);stroke-width:3;stroke-linecap:round;stroke-linejoin:round} @media (max-width:900px){ body .e-con.mh.mh-hero{background-position:85% 100%;background-size:auto 55%;background-color:var(--mh-cream);align-items:flex-start;min-height:0} body .e-con.mh.mh-hero::before{background:linear-gradient(180deg,rgba(251,245,234,1) 55%,rgba(251,245,234,.2) 100%)} body .mh-hero>.mh-in{padding:44px 0 190px} } /* hero load sequence (CSS only) */ @media (prefers-reduced-motion:no-preference){ body .mh-hero .mh-hero-copy>*{animation:mhRise .7s cubic-bezier(.2,.7,.2,1) both} body .mh-hero .mh-hero-copy>*:nth-child(2){animation-delay:.08s} body .mh-hero .mh-hero-copy>*:nth-child(3){animation-delay:.16s} body .mh-hero .mh-hero-copy>*:nth-child(4){animation-delay:.24s} body .mh-hero .mh-hero-copy>*:nth-child(5){animation-delay:.32s} } @keyframes mhRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} /* ---------- trust strip ---------- */ body .e-con.mh.mh-trust{padding:22px var(--mh-gut)!important;background:var(--mh-choc);color:var(--mh-cream)} body .e-con.mh.mh-trust.mh-trust-foot{background:var(--mh-cream);color:var(--mh-ink);border-top:1px solid var(--mh-line)} body .mh .mh-trust-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px 28px} body .mh .mh-trust-list li{display:flex;gap:12px;align-items:flex-start} body .mh .mh-trust-list strong{display:block;font-size:15px;font-weight:700} body .mh .mh-trust-list em{display:block;font-style:normal;font-size:13.5px;opacity:.78} body .mh .mh-ico{flex:0 0 40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(233,169,27,.16)} body .mh .mh-ico svg,body .mh-assure svg,body .mh-addr svg,body .mh-announce svg{width:20px;height:20px;fill:none;stroke:var(--mh-gold);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} body .mh.mh-trust-foot .mh-ico svg{stroke:var(--mh-gold-deep)} @media (max-width:900px){body .mh .mh-trust-list{grid-template-columns:1fr 1fr}} @media (max-width:480px){body .mh .mh-trust-list em{display:none}} /* ---------- category tiles ---------- */ body .mh .e-con.mh-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:20px!important} body .mh .e-con.mh-tile{display:flex;flex-direction:column;background:#fff;border:1px solid var(--mh-line);border-radius:var(--mh-r);overflow:hidden;text-decoration:none;color:var(--mh-ink);transition:transform .2s ease,box-shadow .2s ease;padding-bottom:18px!important} body .mh .e-con.mh-tile:hover{transform:translateY(-3px);box-shadow:var(--mh-shadow)} body .mh .mh-tile-img img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff;padding:14px;transition:transform .35s ease} body .mh .mh-tile:hover .mh-tile-img img{transform:scale(1.04)} body .mh .mh-tile-name.elementor-widget-heading .elementor-heading-title{font-size:20px;font-weight:650;color:var(--mh-choc);padding:0 18px;margin-top:6px} body .mh .mh-tile-sub{padding:0 18px;font-size:14px;color:var(--mh-muted);margin-top:4px} body .mh .mh-tile-sub p{margin:0} @media (max-width:900px){body .mh .e-con.mh-tiles{grid-template-columns:repeat(2,1fr);gap:14px!important}} /* ---------- product grids (Woo loop) ---------- */ body .mh-products ul.products{display:grid!important;grid-template-columns:repeat(4,1fr);gap:22px;margin:0!important;padding:0} body .mh-products ul.products.columns-3{grid-template-columns:repeat(3,1fr)} body .mh-products ul.products.columns-2{grid-template-columns:repeat(2,1fr)} body .mh-products ul.products::before,body .mh-products ul.products::after{display:none!important} body .mh-products ul.products li.product{width:auto!important;margin:0!important;float:none!important;background:#fff;border:1px solid var(--mh-line);border-radius:var(--mh-r);padding:0 0 18px!important;display:flex;flex-direction:column;position:relative;transition:box-shadow .2s ease,transform .2s ease;text-align:left} body .mh-products ul.products li.product:hover{box-shadow:var(--mh-shadow);transform:translateY(-2px)} body .mh-products ul.products li.product a.woocommerce-LoopProduct-link{display:flex;flex-direction:column;flex:1;text-decoration:none;color:var(--mh-ink)} body .mh-products ul.products li.product a img{width:100%!important;aspect-ratio:1/1;object-fit:contain;background:#fff;margin:0 0 12px!important;padding:12px;border-radius:var(--mh-r) var(--mh-r) 0 0} body .mh-products ul.products li.product .woocommerce-loop-product__title{font-family:var(--mh-body)!important;font-size:16px!important;font-weight:600;line-height:1.35;color:var(--mh-ink)!important;padding:0 16px!important;margin:0 0 6px!important} body .mh-products ul.products li.product .price{font-family:var(--mh-body);color:var(--mh-cocoa)!important;font-size:16px!important;font-weight:700;padding:0 16px;margin:auto 0 12px!important} body .mh-products ul.products li.product .price del{opacity:.55;font-weight:500} body .mh-products ul.products li.product .button{margin:0 16px!important;align-self:flex-start;background:var(--mh-choc)!important;color:var(--mh-cream)!important;border-radius:999px!important;font-family:var(--mh-body);font-weight:700;font-size:14px!important;padding:10px 18px!important;line-height:1.1;border:0} body .mh-products ul.products li.product .button:hover{background:var(--mh-gold)!important;color:var(--mh-choc)!important} body .mh-products ul.products li.product .added_to_cart{margin:8px 16px 0;font-size:14px;font-weight:600;color:var(--mh-cocoa)} body .mh-products ul.products li.product .onsale{background:var(--mh-rose);color:#fff;border-radius:999px;min-height:0;min-width:0;padding:4px 10px;line-height:1.3;font-size:12px;top:10px;left:10px;right:auto;margin:0} body .mh.mh-dark .mh-products ul.products li.product{border-color:transparent} @media (max-width:1024px){body .mh-products ul.products,body .mh-products ul.products.columns-3{grid-template-columns:repeat(3,1fr)}} @media (max-width:767px){body .mh-products ul.products,body .mh-products ul.products.columns-3,body .mh-products ul.products.columns-2{grid-template-columns:repeat(2,1fr);gap:12px} body .mh-products ul.products li.product .woocommerce-loop-product__title{font-size:14.5px!important;padding:0 12px!important} body .mh-products ul.products li.product .price{padding:0 12px} body .mh-products ul.products li.product .button{margin:0 12px!important;font-size:13px!important;padding:9px 14px!important}} /* ---------- gifts ---------- */ body .mh .mh-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px} body .mh .mh-chips a{display:inline-block;padding:9px 16px;border-radius:999px;background:#fff;border:1px solid var(--mh-line);color:var(--mh-choc);font-weight:600;font-size:15px;text-decoration:none;transition:background .15s,border-color .15s} body .mh .mh-chips a:hover{background:var(--mh-gold-soft);border-color:var(--mh-gold)} body .mh-gifts .mh-products ul.products{grid-template-columns:repeat(2,1fr)} /* ---------- story ---------- */ body .mh .e-con.mh-story-media{display:grid;grid-template-columns:1fr;position:relative;padding-bottom:70px!important} body .mh .mh-story-old img{width:88%;border-radius:var(--mh-r);filter:sepia(.25);box-shadow:var(--mh-shadow)} body .mh .mh-story-now{position:absolute!important;right:0;bottom:0;width:52%!important} body .mh .mh-story-now img{border-radius:var(--mh-r);border:6px solid var(--mh-paper);box-shadow:var(--mh-shadow);aspect-ratio:4/3;object-fit:cover} body .mh .mh-stats{list-style:none;padding:0;margin:30px 0 4px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;border-top:1px solid var(--mh-line);padding-top:24px} body .mh .mh-stats strong{display:block;font-family:var(--mh-display);font-size:clamp(26px,2.6vw,34px);font-weight:700;color:var(--mh-choc);line-height:1} body .mh .mh-stats span{display:block;font-size:14px;color:var(--mh-muted);margin-top:6px} body .mh-story .mh-btns{margin-top:26px} /* ---------- visit ---------- */ body .mh .mh-visit-map img{border-radius:var(--mh-r);box-shadow:var(--mh-shadow);width:100%} body .mh .mh-addr{display:flex;gap:10px;align-items:center;font-size:17px;margin:18px 0 0;font-weight:600} body .mh .mh-addr svg{stroke:var(--mh-gold-deep)} body .mh .mh-addr a{color:var(--mh-choc)} body .mh-hours{margin:22px 0 0;display:grid;gap:8px;max-width:340px} body .mh-hours div{display:flex;justify-content:space-between;border-bottom:1px dashed var(--mh-line);padding-bottom:8px} body .mh-hours dt{font-weight:700} body .mh-hours dd{margin:0;color:var(--mh-muted)} /* ---------- final CTA ---------- */ body .mh.mh-final .mh-in{align-items:center;text-align:center} body .mh.mh-final .mh-lead{margin-left:auto;margin-right:auto} body .mh.mh-final .mh-btns{justify-content:center} body .e-con.mh.mh-final{background:var(--mh-choc) radial-gradient(ellipse at 50% 0%,rgba(233,169,27,.16),transparent 60%)} /* ---------- archive ---------- */ body .e-con.mh.mh-arch-head{padding:clamp(36px,5vw,64px) var(--mh-gut) clamp(28px,3vw,40px)!important;background:var(--mh-cream);border-bottom:1px solid var(--mh-line)} body .mh .mh-crumbs .woocommerce-breadcrumb{font-size:14px;color:var(--mh-muted);margin:0 0 12px} body .mh .mh-crumbs a{color:var(--mh-cocoa)} body .mh .mh-arch-title .elementor-heading-title,body .mh .mh-arch-title h1{font-family:var(--mh-display)!important;font-size:clamp(34px,4.4vw,56px)!important;font-weight:700;color:var(--mh-choc)!important;line-height:1.05;margin:0;font-variation-settings:"SOFT" 100} body .mh .mh-arch-desc{max-width:62ch;color:var(--mh-muted);font-size:17px;margin-top:12px} body .mh .mh-arch-desc p{margin:0} body .e-con.mh.mh-arch-body{padding-top:36px!important} body .mh .e-con.mh-shop{display:grid;grid-template-columns:230px 1fr;gap:44px;align-items:start;flex-direction:initial} body .mh .mh-side{position:sticky;top:110px} body .mh .mh-side-grp+.mh-side-grp{margin-top:28px} body .mh .mh-side h2{font-family:var(--mh-body);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mh-gold-deep);margin:0 0 10px} body .mh .mh-side ul{list-style:none;margin:0;padding:0;display:grid;gap:2px} body .mh .mh-side a{display:block;padding:7px 12px;border-radius:8px;color:var(--mh-ink);text-decoration:none;font-size:15px;font-weight:500;border:1px solid transparent} body .mh .mh-side a:hover{background:var(--mh-cream)} body .mh .mh-rail{display:none} body .mh .mh-arch-grid .woocommerce-result-count{font-size:14px;color:var(--mh-muted);margin:0 0 18px;line-height:40px} body .mh .mh-arch-grid .woocommerce-ordering{margin:0 0 18px} body .mh .mh-arch-grid .woocommerce-ordering select{border:1px solid var(--mh-line);border-radius:999px;padding:9px 38px 9px 16px;font-family:var(--mh-body);font-size:14px;background-color:#fff;color:var(--mh-ink)} body .mh .mh-arch-grid nav.woocommerce-pagination{margin-top:36px} body .mh .mh-arch-grid nav.woocommerce-pagination ul{border:0!important;display:flex;gap:6px;justify-content:center} body .mh .mh-arch-grid nav.woocommerce-pagination ul li{border:0!important} body .mh .mh-arch-grid nav.woocommerce-pagination ul li a,body .mh .mh-arch-grid nav.woocommerce-pagination ul li span{border-radius:999px;min-width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--mh-line)!important;color:var(--mh-ink);font-weight:600} body .mh .mh-arch-grid nav.woocommerce-pagination ul li span.current{background:var(--mh-choc);color:var(--mh-cream)} @media (max-width:900px){ body .mh .e-con.mh-shop{grid-template-columns:1fr;gap:0} body .mh .mh-side-w{display:none} body .mh .mh-rail{display:flex;gap:8px;overflow-x:auto;padding:0 0 14px;margin:0 calc(var(--mh-gut) * -1) 10px;padding-left:var(--mh-gut);padding-right:var(--mh-gut);scrollbar-width:none} body .mh .mh-rail::-webkit-scrollbar{display:none} body .mh .mh-rail a{flex:0 0 auto;padding:8px 14px;border-radius:999px;border:1px solid var(--mh-line);background:#fff;color:var(--mh-ink);font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap} } /* ---------- product page ---------- */ body .e-con.mh.mh-pd{padding-top:28px!important;padding-bottom:clamp(40px,6vw,72px)!important} body .mh .e-con.mh-pd-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,5vw,64px);align-items:start;margin-top:8px} body .mh .mh-pd-images .woocommerce-product-gallery{width:100%!important;float:none!important;margin:0!important} body .mh .mh-pd-images .woocommerce-product-gallery__image img,body .mh .mh-pd-images .flex-viewport{border-radius:var(--mh-r);background:#fff} body .mh .mh-pd-images .woocommerce-product-gallery__wrapper{border:1px solid var(--mh-line);border-radius:var(--mh-r);overflow:hidden;background:#fff} body .mh .mh-pd-images .flex-control-thumbs{display:flex;gap:10px;margin-top:12px!important} body .mh .mh-pd-images .flex-control-thumbs li{width:72px!important;border-radius:10px;overflow:hidden;border:1px solid var(--mh-line)} body .mh .e-con.mh-pd-summary{position:sticky;top:110px;gap:0} body .mh .mh-pd-title .product_title,body .mh .mh-pd-title .elementor-heading-title{font-family:var(--mh-display)!important;font-size:clamp(30px,3.4vw,44px)!important;font-weight:700;line-height:1.08;color:var(--mh-choc)!important;font-variation-settings:"SOFT" 100;margin:0} body .mh .mh-pd-price .price{font-family:var(--mh-body)!important;font-size:26px!important;font-weight:700;color:var(--mh-cocoa)!important;margin:14px 0 0} body .mh .mh-pd-short{font-size:17px;line-height:1.6;color:var(--mh-muted);margin-top:14px} body .mh .mh-pd-cart{margin-top:22px} body .mh .mh-pd-cart form.cart{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch;margin:0} body .mh .mh-pd-cart form.cart table.variations{width:100%;margin-bottom:6px} body .mh .mh-pd-cart .quantity .qty{height:54px;width:80px;border:1px solid var(--mh-line);border-radius:999px;text-align:center;font-size:17px;font-family:var(--mh-body)} body .mh .mh-pd-cart .single_add_to_cart_button,body .mh .mh-pd-cart button.button{flex:1 1 220px;height:54px;border-radius:999px!important;background:var(--mh-gold)!important;color:var(--mh-choc)!important;font-family:var(--mh-body);font-weight:800;font-size:17px!important;border:0;box-shadow:0 6px 18px -8px rgba(201,138,10,.8);transition:background .15s} body .mh .mh-pd-cart .single_add_to_cart_button:hover{background:#F2B62C!important} body .mh .mh-pd-cart .stock{font-weight:600;margin:0 0 10px;width:100%} body .mh .mh-assure{list-style:none;padding:18px 20px;margin:22px 0 0;background:var(--mh-cream);border-radius:var(--mh-r);display:grid;gap:10px} body .mh .mh-assure li{display:flex;gap:10px;align-items:center;font-size:15px;font-weight:600;color:var(--mh-cocoa)} body .mh .mh-assure svg{stroke:var(--mh-gold-deep);flex:0 0 20px} body .mh .mh-pd-help{margin:14px 0 0;font-size:15px;color:var(--mh-muted)} body .mh .mh-pd-help a{color:var(--mh-choc);font-weight:700} body .mh .mh-pd-meta{margin-top:18px;font-size:14px;color:var(--mh-muted)} body .mh .mh-pd-meta a{color:var(--mh-cocoa)} body .mh .mh-pd-meta .sku_wrapper{display:none} body .mh.mh-pd-desc .mh-in{max-width:780px} body .mh .mh-pd-content{font-size:17px;line-height:1.7;color:var(--mh-ink);margin-top:14px} body .e-con.mh.mh-pd-desc{padding-top:clamp(40px,5vw,64px)!important;padding-bottom:clamp(40px,5vw,64px)!important;border-top:1px solid var(--mh-line)} body .mh .mh-up section.up-sells>h2,body .mh .mh-rel section.related>h2{font-family:var(--mh-display);font-size:clamp(26px,3vw,36px);font-weight:650;color:var(--mh-choc);margin:0 0 24px;font-variation-settings:"SOFT" 100} body .mh .mh-up section.up-sells,body .mh .mh-rel section.related{margin:0;padding:0;width:100%;float:none} body .e-con.mh.mh-pd-up:not(:has(li.product)){display:none!important} @media (max-width:900px){body .mh .e-con.mh-pd-grid{grid-template-columns:1fr}body .mh .e-con.mh-pd-summary{position:static}} /* ---------- chrome (kept Orca header/footer, re-skinned) ---------- */ body .orca-topbar.mh-chrome{background:var(--mh-choc)!important;color:var(--mh-cream)} body .mh-announce{display:flex;flex-wrap:wrap;gap:6px 26px;margin:0;font-size:13.5px;font-weight:600;font-family:var(--mh-body);align-items:center} body .mh-announce span,body .mh-announce a{display:inline-flex;gap:7px;align-items:center;color:var(--mh-cream)!important;text-decoration:none} body .mh-announce a{margin-left:auto} body .mh-announce svg{width:16px;height:16px} @media (max-width:767px){body .mh-announce span:not(:first-child){display:none}body .mh-announce{justify-content:center}body .mh-announce a{margin-left:0}} body .orca-site-header.mh-chrome{background:var(--mh-paper)!important;border-bottom:1px solid var(--mh-line);box-shadow:none} body .orca-site-header .orca-nav-list .elementor-nav-menu>li>a,body .orca-site-header .orca-nav-list .elementor-item{font-family:var(--mh-body)!important;font-weight:700!important;font-size:15.5px!important;color:var(--mh-choc)!important} body .orca-site-header .orca-nav-list .elementor-item:hover,body .orca-site-header .orca-nav-list .elementor-item.elementor-item-active{color:var(--mh-gold-deep)!important} body .orca-site-header .orca-nav-list .elementor-item::after{background-color:var(--mh-gold)!important} body .orca-site-header .orca-nav-list .sub-menu,body .orca-site-header .elementor-nav-menu--dropdown{background:#fff!important;border:1px solid var(--mh-line);border-radius:12px;box-shadow:var(--mh-shadow);padding:8px 0} body .orca-site-header .elementor-nav-menu--dropdown a,body .orca-site-header .sub-menu a{font-family:var(--mh-body)!important;color:var(--mh-ink)!important;font-weight:500!important;font-size:15px!important;background:transparent!important} body .orca-site-header .elementor-nav-menu--dropdown a:hover,body .orca-site-header .sub-menu a:hover{background:var(--mh-cream)!important;color:var(--mh-choc)!important} body .orca-site-header .orca-search input[type=search]{border-radius:999px!important;background:var(--mh-cream)!important;border:1px solid var(--mh-line)!important;font-family:var(--mh-body)} body .orca-site-header .orca-cart-slot .elementor-menu-cart__toggle_button{background:var(--mh-gold)!important;color:var(--mh-choc)!important;border-radius:999px!important;font-weight:700;border:0!important} body .orca-site-header .orca-cart-slot .elementor-button-icon-qty{background:var(--mh-choc)!important;color:var(--mh-cream)!important} body .mh-foot,body .orca-foot.mh-foot{background:var(--mh-choc)!important;color:#E6D8C3} body .orca-foot.mh-foot a{color:var(--mh-cream)!important;text-decoration:none} body .orca-foot.mh-foot a:hover{color:var(--mh-gold)!important} body .orca-foot.mh-foot .orca-foot-eyebrow p{color:var(--mh-gold)!important;font-family:var(--mh-body);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:13px} body .orca-foot.mh-foot .mh-foot-list{list-style:none;margin:0;padding:0;display:grid;gap:8px} body .orca-foot.mh-foot .orca-foot-links .elementor-widget-container,body .orca-foot.mh-foot .orca-foot-links{display:grid;grid-template-columns:1fr 1fr;gap:0 36px;align-items:start} body .orca-foot.mh-foot::after{display:none!important} body .orca-foot.mh-foot .orca-foot-logo img{max-height:64px;background:#fff;padding:6px 10px;border-radius:10px} body .orca-foot.mh-foot .orca-foot-legal-row{border-color:rgba(230,216,195,.18)!important} /* header layout: one row, logo readable, nav never wraps on desktop */ @media (min-width:1025px){ body .orca-site-header.mh-chrome>.orca-inner{flex-wrap:nowrap!important;gap:28px;min-height:84px} body .orca-site-header.mh-chrome .orca-logo img{max-height:62px!important;max-width:none} body .orca-site-header.mh-chrome .orca-searcher{flex:0 1 240px;width:240px!important;order:3} body .orca-site-header.mh-chrome .orca-nav{flex:1 1 auto!important;order:2} body .orca-site-header.mh-chrome .orca-header-right{order:4} body .orca-site-header.mh-chrome .orca-nav .elementor-nav-menu{flex-wrap:nowrap;justify-content:center} body .orca-site-header.mh-chrome .orca-nav .elementor-nav-menu>li>a{padding:10px 13px!important} } body .orca-topbar.mh-chrome .orca-topbar-body{flex:1 1 auto} body .orca-topbar.mh-chrome .mh-announce{flex-wrap:nowrap;white-space:nowrap} @media (max-width:1100px){body .mh-announce span:nth-child(3){display:none}} body .orca-foot.mh-foot .mh-hours{max-width:280px;margin-top:8px} body .orca-foot.mh-foot .mh-hours div{border-color:rgba(230,216,195,.2)} body .orca-foot.mh-foot .mh-hours dd{color:#E6D8C3} body .orca-foot.mh-foot .orca-logo img{background:transparent} .mh-anim-holder{display:none!important} /* ---------- scroll entrances (JS gate html.mh-anim; visible without JS) ---------- */ @media (prefers-reduced-motion:no-preference){ html.mh-anim body .mh:not(.mh-hero) .e-con.mh-in{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)} html.mh-anim body .mh:not(.mh-hero) .e-con.mh-in.mh-seen{opacity:1;transform:none} html.mh-anim body .mh .mh-in .mh-in{opacity:1!important;transform:none!important} } /* ---------- fixes round 2 ---------- */ body .orca-site-header.mh-chrome{height:auto!important;min-height:0!important} body .orca-site-header.mh-chrome .orca-inner{padding-top:10px;padding-bottom:10px} @media (min-width:1025px){body .orca-site-header.mh-chrome .orca-logo img{max-height:58px!important}} body .orca-site-header .orca-search input,body .orca-site-header .orca-search input::placeholder{font-family:var(--mh-body)!important;font-size:15px!important} body .mh-products ul.products li.product .price,body .mh-products ul.products li.product .price *,body .mh-products ul.products li.product .button, body .mh .mh-pd-price .price,body .mh .mh-pd-price .price *,body .mh .mh-pd-cart button,body .mh .mh-pd-cart .qty, body .mh .woocommerce-result-count,body .mh .woocommerce-ordering select{font-family:var(--mh-body)!important} /* ---------- mobile chrome: one compact row + search ---------- */ @media (max-width:1024px){ body .orca-topbar.mh-chrome .orca-topbar-social{display:none!important} body .orca-topbar.mh-chrome{min-height:0!important;padding-top:7px!important;padding-bottom:7px!important} body .orca-topbar.mh-chrome .mh-announce{justify-content:center;font-size:12.5px;gap:4px 16px} body .orca-site-header.mh-chrome>.orca-inner{display:grid!important;grid-template-columns:1fr auto;align-items:center;gap:8px 12px!important;padding:8px 16px 10px!important} body .orca-site-header.mh-chrome .orca-brand{grid-column:1;grid-row:1} body .orca-site-header.mh-chrome .orca-logo img{max-height:48px!important} body .orca-site-header.mh-chrome .orca-header-right{grid-column:2;grid-row:1;display:flex!important;flex-direction:row!important;align-items:center;gap:14px!important;width:auto!important} body .orca-site-header.mh-chrome .orca-account-slot{display:none!important} body .orca-site-header.mh-chrome .orca-searcher{grid-column:1/-1;grid-row:2;width:100%!important;max-width:none!important} body .orca-site-header.mh-chrome .orca-searcher:focus-within{width:100%!important} body .orca-site-header.mh-chrome .orca-nav{grid-column:1/-1;grid-row:3} } @media (max-width:1024px){ body .orca-site-header.mh-chrome>.orca-inner{grid-template-columns:1fr auto auto} body .orca-site-header.mh-chrome .orca-nav{grid-column:3;grid-row:1;width:auto!important} body .orca-site-header.mh-chrome .orca-searcher>*,body .orca-site-header.mh-chrome .orca-searcher .elementor-widget-container,body .orca-site-header.mh-chrome .orca-searcher form,body .orca-site-header.mh-chrome .orca-searcher .e-search-form{width:100%!important;max-width:none!important} } body .mh .mh-rail a[aria-current]{background:var(--mh-choc);color:var(--mh-cream)!important;border-color:var(--mh-choc)} /* ---------- cart & checkout (classic Woo shortcodes) ---------- */ body .mh .mh-page-h.elementor-widget-heading .elementor-heading-title{font-size:clamp(34px,4.4vw,52px)} body .e-con.mh.mh-cart{padding-top:40px!important} body .mh-wc{font-family:var(--mh-body);color:var(--mh-ink)} body .mh-wc table.shop_table{border:1px solid var(--mh-line)!important;border-radius:var(--mh-r);border-collapse:separate;background:#fff;overflow:hidden} body .mh-wc table.shop_table th{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--mh-muted);background:var(--mh-cream)} body .mh-wc table.shop_table td,body .mh-wc table.shop_table th{border-color:var(--mh-line)!important;padding:16px!important} body .mh-wc table.cart img{width:72px!important;border-radius:10px;border:1px solid var(--mh-line)} body .mh-wc table.cart .product-name a{color:var(--mh-choc);font-weight:700;text-decoration:none} body .mh-wc .quantity .qty{height:44px;width:70px;border:1px solid var(--mh-line);border-radius:999px;text-align:center} body .mh-wc button.button,body .mh-wc a.button,body .mh-wc input.button{background:var(--mh-choc)!important;color:var(--mh-cream)!important;border-radius:999px!important;font-family:var(--mh-body)!important;font-weight:700!important;padding:12px 20px!important;border:0!important} body .mh-wc .coupon .input-text{border:1px solid var(--mh-line);border-radius:999px;padding:10px 16px;min-width:160px} body .mh-wc a.checkout-button,body .mh-wc #place_order{background:var(--mh-gold)!important;color:var(--mh-choc)!important;font-size:18px!important;font-weight:800!important;padding:18px 24px!important;box-shadow:0 6px 18px -8px rgba(201,138,10,.8)} body .mh-wc .cart-collaterals{display:grid;grid-template-columns:1fr 420px;gap:40px;margin-top:40px;align-items:start} body .mh-wc .cart-collaterals .cart_totals{width:auto!important;float:none!important;grid-column:2;grid-row:1} body .mh-wc .cart-collaterals .cross-sells{width:auto!important;float:none!important;grid-column:1;grid-row:1} body .mh-wc .cart-collaterals h2{font-family:var(--mh-display);font-weight:650;font-size:28px;color:var(--mh-choc);margin:0 0 18px} body .mh-wc .cross-sells ul.products{display:grid!important;grid-template-columns:repeat(2,1fr);gap:16px;margin:0!important} body .mh-wc .cross-sells ul.products::before,body .mh-wc .cross-sells ul.products::after{display:none!important} body .mh-wc .cross-sells li.product{width:auto!important;margin:0!important;float:none!important;background:#fff;border:1px solid var(--mh-line);border-radius:var(--mh-r);padding:0 0 16px!important} body .mh-wc .cross-sells li.product img{aspect-ratio:1/1;object-fit:contain;padding:10px;margin:0 0 8px!important} body .mh-wc .cross-sells li.product .woocommerce-loop-product__title,body .mh-wc .cross-sells li.product .price{padding:0 14px!important;font-family:var(--mh-body)!important;font-size:15px!important;color:var(--mh-ink)!important} body .mh-wc .cross-sells li.product .button{margin:8px 14px 0!important;font-size:13px!important;padding:9px 14px!important} body .mh-wc .woocommerce-info,body .mh-wc .woocommerce-message,body .mh-wc .cart-empty{border-top-color:var(--mh-gold)!important;background:var(--mh-cream)!important;color:var(--mh-ink)!important;border-radius:10px} body .mh-wc .woocommerce-info::before,body .mh-wc .woocommerce-message::before{color:var(--mh-gold-deep)!important} body .mh-wc .return-to-shop .button{background:var(--mh-gold)!important;color:var(--mh-choc)!important} body .mh-wc form.checkout input.input-text,body .mh-wc form.checkout select,body .mh-wc form.checkout textarea{border:1px solid var(--mh-line);border-radius:10px;padding:12px 14px;font-family:var(--mh-body);background:#fff} body .mh-wc form.checkout h3{font-family:var(--mh-display);font-weight:650;color:var(--mh-choc)} body .mh-wc #order_review,body .mh-wc #payment{background:var(--mh-cream)!important;border-radius:var(--mh-r)} body .mh .mh-secure{display:flex;gap:8px;align-items:center;margin:14px 0 0;color:var(--mh-muted);font-size:15px} body .mh .mh-secure svg{width:18px;height:18px;fill:none;stroke:var(--mh-gold-deep);stroke-width:3} body .mh .mh-secure a{color:var(--mh-choc);font-weight:700} @media (max-width:900px){body .mh-wc .cart-collaterals{grid-template-columns:1fr}body .mh-wc .cart-collaterals .cart_totals,body .mh-wc .cart-collaterals .cross-sells{grid-column:1;grid-row:auto}} /* ---------- about / contact ---------- */ body .mh.mh-page-head .mh-lead{max-width:62ch} body .mh .mh-prose p+p{margin-top:14px} body .mh .mh-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px} body .mh .mh-cards li{background:#fff;border:1px solid var(--mh-line);border-radius:var(--mh-r);padding:24px} body .mh .mh-cards .mh-ico{width:44px;height:44px;margin-bottom:14px} body .mh .mh-cards .mh-ico svg{stroke:var(--mh-gold-deep)} body .mh .mh-cards strong{display:block;font-family:var(--mh-display);font-size:20px;font-weight:650;color:var(--mh-choc)} body .mh .mh-cards p{margin:8px 0 0;color:var(--mh-muted);font-size:15px;line-height:1.55} @media (max-width:900px){body .mh .mh-cards{grid-template-columns:1fr 1fr}} @media (max-width:520px){body .mh .mh-cards{grid-template-columns:1fr}} body .mh .mh-press-list{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px} body .mh .mh-press-list li{padding:18px 20px;border-left:3px solid var(--mh-gold);background:var(--mh-cream);border-radius:0 10px 10px 0;font-family:var(--mh-display);font-size:17px;font-weight:600;color:var(--mh-choc);line-height:1.35} body .mh .mh-storefront img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--mh-r);box-shadow:var(--mh-shadow)} body .mh .e-con.mh-form-card{background:#fff;border:1px solid var(--mh-line);border-radius:var(--mh-r);padding:28px!important;box-shadow:var(--mh-shadow)} body .mh .mh-form input:not([type=hidden]):not(.orca-qf-hp),body .mh .mh-form textarea{width:100%;border:1px solid var(--mh-line);border-radius:10px;padding:13px 14px;font-family:var(--mh-body);font-size:16px;background:var(--mh-paper);color:var(--mh-ink)} body .mh .mh-form input:focus,body .mh .mh-form textarea:focus{outline:2px solid var(--mh-gold);border-color:var(--mh-gold)} body .mh .mh-form .orca-qf-submit{margin-top:14px;width:100%;background:var(--mh-gold)!important;color:var(--mh-choc)!important;border:0;border-radius:999px;padding:16px;font-family:var(--mh-body);font-weight:800;font-size:17px;cursor:pointer} body .mh .mh-form .orca-qf-submit:hover{background:#F2B62C!important} /* ---------- remaining Orca pages (policies, gift card, tracking): bring into the palette ---------- */ body .orca-section.orca-accent-cta{background:var(--mh-choc)!important;background-image:radial-gradient(ellipse at 50% 0%,rgba(233,169,27,.16),transparent 60%)!important} body .orca-section.orca-accent-cta .elementor-heading-title,body .orca-section.orca-accent-cta p,body .orca-section.orca-accent-cta strong{color:var(--mh-cream)!important} body .orca-section.orca-accent-cta .orca-giant-fact .elementor-heading-title{color:var(--mh-gold)!important} body .orca-section::after,body .orca-section.orca-accent-cta::after,body .orca-section.orca-callout::after{display:none!important} body .orca-callout-icon{display:none!important} body .orca-section .elementor-button{border-radius:999px!important;font-family:var(--mh-body)!important;font-weight:700!important;background:var(--mh-gold)!important;color:var(--mh-choc)!important;padding:13px 22px!important} body .orca-section .orca-btn-secondary .elementor-button{background:transparent!important;color:var(--mh-cream)!important;border:2px solid rgba(251,245,234,.55)!important} body .orca-section.orca-title-band{background:var(--mh-cream)!important;background-image:none!important} body .orca-section.orca-title-band .elementor-heading-title,body .orca-section.orca-title-band p{color:var(--mh-choc)!important} body .orca-section.orca-title-band .orca-lead p{color:var(--mh-muted)!important} body .orca-section .elementor-heading-title{font-family:var(--mh-display)!important} :root{--logo-mark:none!important} body .orca-foot .orca-foot-logo.elementor-widget-image img{max-height:68px!important;width:auto!important;background:#FFFDF8;padding:8px 12px;border-radius:12px} body .orca-foot .orca-foot-legal-row p,body .orca-foot .orca-foot-legal-row .elementor-widget-text-editor{color:#CDBFAA!important;font-size:14px} /* ================= round 3: H&D-style header, mega menu, spacing ================= */ /* topbar: hours, address, phone */ body .mh-announce .mh-top-hours{display:inline-flex;gap:7px;align-items:center;color:var(--mh-cream)} body .mh-announce a{margin-left:0} body .mh-announce{gap:6px 28px} /* row 1: logo | wide search | labeled doors | cart */ @media (min-width:1025px){ body .orca-site-header.mh-chrome{display:flex;flex-direction:column;padding-left:0!important;padding-right:0!important} body .orca-site-header.mh-chrome>.orca-inner{max-width:var(--mh-wide);width:100%;margin:0 auto;padding:14px var(--mh-gut)!important;gap:32px!important} body .orca-site-header.mh-chrome .orca-nav{display:none!important} body .orca-site-header.mh-chrome .orca-searcher{flex:1 1 auto!important;width:auto!important;max-width:560px;order:2} body .orca-site-header.mh-chrome .orca-searcher:focus-within{width:auto!important} body .orca-site-header.mh-chrome .orca-search input[type=search]{height:48px;font-size:16px!important} body .orca-site-header.mh-chrome .orca-header-right{order:4;margin-left:auto;display:flex;align-items:center;gap:22px!important} body .orca-site-header.mh-chrome .orca-account-slot{display:none!important} } body .mh-doors{list-style:none;margin:0;padding:0;display:flex;gap:22px} body .mh-doors a{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--mh-choc);text-decoration:none;font-family:var(--mh-body);font-size:12.5px;font-weight:600} body .mh-doors a:hover{color:var(--mh-gold-deep)} body .mh-doors svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} @media (max-width:1024px){body .mh-doors-w{display:none!important}} /* rows 2-3: quick links + mega bar */ body .mh-megabar{width:100%;border-top:1px solid var(--mh-line);background:var(--mh-paper)} @media (max-width:1024px){body .mh-megabar{display:none!important}} body .mh-mega{position:relative;font-family:var(--mh-body)} body .mh-quick{list-style:none;margin:0;padding:8px var(--mh-gut);display:flex;justify-content:center;gap:6px 30px;flex-wrap:wrap;background:var(--mh-cream);border-bottom:1px solid var(--mh-line)} body .mh-quick a{font-size:13.5px;font-weight:600;color:var(--mh-cocoa);text-decoration:none;white-space:nowrap} body .mh-quick a::after{content:" ▸";font-size:10px;color:var(--mh-gold-deep)} body .mh-quick a:hover{color:var(--mh-choc);text-decoration:underline;text-underline-offset:3px} body .mh-quick li:first-child a{color:var(--mh-rose)} body .mh-mega-list{list-style:none;margin:0 auto;padding:0 var(--mh-gut);max-width:var(--mh-wide);display:flex;justify-content:space-between} body .mh-mega-item{position:static} body .mh-mega-top{display:flex;align-items:center;gap:5px;padding:15px 4px;background:none!important;border:0!important;border-bottom:3px solid transparent!important;border-radius:0!important;color:var(--mh-choc)!important;font-family:var(--mh-body)!important;font-size:16px!important;font-weight:600!important;text-decoration:none;cursor:pointer;line-height:1.2;box-shadow:none!important} body .mh-mega-top:hover,body .mh-mega-item.is-open .mh-mega-top{border-bottom-color:var(--mh-gold)!important} body .mh-mega-top:focus-visible{outline:3px solid var(--mh-gold);outline-offset:2px} body .mh-chev{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;transition:transform .2s} body .mh-mega-item.is-open .mh-chev{transform:rotate(180deg)} body .mh-mega-panel{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:1px solid var(--mh-line);box-shadow:0 24px 40px -18px rgba(43,27,16,.35);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease,visibility 0s .16s;z-index:60} body .mh-mega-item.is-open .mh-mega-panel{opacity:1;visibility:visible;transform:none;transition:opacity .16s ease,transform .16s ease} body .mh-mega-inner{max-width:var(--mh-wide);margin:0 auto;padding:32px var(--mh-gut) 28px;display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:36px;position:relative} body .mh-mega-h{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mh-gold-deep);margin:0 0 12px} body .mh-mega-col ul{list-style:none;margin:0;padding:0;display:grid;gap:9px} body .mh-mega-col a{color:var(--mh-ink);text-decoration:none;font-size:15.5px} body .mh-mega-col a:hover{color:var(--mh-gold-deep);text-decoration:underline;text-underline-offset:3px} body .mh-mega-feature{display:grid;grid-template-columns:150px 1fr;grid-template-rows:auto 1fr;gap:6px 18px;align-items:start;background:var(--mh-cream);border-radius:var(--mh-r);padding:16px;text-decoration:none} body .mh-mega-feature img{grid-row:1/3;width:150px;height:150px;object-fit:contain;background:#fff;border-radius:10px;padding:8px} body .mh-mega-feature-title{font-family:var(--mh-display);font-size:21px;font-weight:650;line-height:1.15;color:var(--mh-choc);margin-top:6px} body .mh-mega-feature-cta{font-weight:700;font-size:14.5px;color:var(--mh-cocoa);align-self:start} body .mh-mega-feature:hover .mh-mega-feature-cta{color:var(--mh-gold-deep)} body .mh-mega-all{position:absolute;left:var(--mh-gut);bottom:10px;font-size:14px;font-weight:700;color:var(--mh-cocoa)!important;text-decoration:none} body .mh-mega-inner{padding-bottom:48px} /* story section breathing room */ body .e-con.mh.mh-story{padding-top:clamp(72px,10vw,136px)!important;padding-bottom:clamp(72px,10vw,136px)!important} body .mh .e-con.mh-story-copy{gap:0} body .mh-story .mh-eyebrow.elementor-widget-heading .elementor-heading-title{margin-bottom:18px} body .mh-story .mh-lead{margin-top:22px} body .mh .mh-story .mh-stats{margin-top:36px;padding-top:30px} body .mh-story .mh-stats-w+.mh-btn,body .mh-story-copy>.mh-btn{margin-top:36px!important} body .mh-story .mh-btns{margin-top:36px} body .mh .mh-story .e-con.mh-split{gap:clamp(40px,7vw,104px)} /* general rhythm: a little more air between heads and content */ body .mh .e-con.mh-head{margin-bottom:44px} body .mh-trust .mh-trust-list{gap:22px 36px} /* product description: on the page grid, hidden when there is nothing to say */ body .mh.mh-pd-desc .mh-in{max-width:var(--mh-wide)!important} body .mh .e-con.mh-pd-desc .mh-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:0 clamp(28px,5vw,64px);align-items:start} body .mh .mh-pd-content{margin-top:0;max-width:68ch} body .mh .mh-pd-content p{margin:0 0 14px} body .mh.mh-pd-desc .mh-h2.elementor-widget-heading .elementor-heading-title{font-size:clamp(26px,2.8vw,34px)} @media (max-width:900px){body .mh .e-con.mh-pd-desc .mh-in{grid-template-columns:1fr;gap:14px}} body .e-con.mh.mh-pd-desc:not(:has(.mh-pd-content :is(p,ul,ol,h2,h3,h4,table,img,li))){display:none!important} body .mh .mh-pd-short span[style],body .mh .mh-pd-content span[style]{font-size:inherit!important;color:inherit!important;background:none!important;padding:0!important} body .mh .mh-pd-short p:empty,body .mh .mh-pd-content p:empty{display:none} /* compact header (Nick: "menu takes up way too much vertical space") */ @media (min-width:1025px){ body .orca-site-header.mh-chrome>.orca-inner{padding-top:8px!important;padding-bottom:8px!important;min-height:0!important} body .orca-site-header.mh-chrome .orca-logo img{max-height:50px!important} body .orca-site-header.mh-chrome .orca-brand{width:auto!important;flex:0 0 auto!important} body .orca-site-header.mh-chrome .orca-searcher{flex:1 1 auto!important;max-width:620px!important;width:auto!important} body .orca-site-header.mh-chrome .orca-searcher .elementor-widget-search,body .orca-site-header.mh-chrome .orca-searcher .e-search-form,body .orca-site-header.mh-chrome .orca-searcher form{width:100%!important} body .orca-site-header.mh-chrome .orca-search input[type=search]{height:42px} } body .mh-doors{gap:18px} body .mh-doors a{flex-direction:row;gap:7px;font-size:13.5px;white-space:nowrap} body .mh-doors svg{width:21px;height:21px} body .mh-mega-top{padding:11px 2px!important;font-size:15px!important} body .mh-mega-season .mh-mega-top{color:var(--mh-rose)!important;font-weight:700!important} body .mh-quick{display:none!important} @media (min-width:1025px){ body .orca-site-header.mh-chrome .orca-brand{order:1} body .orca-site-header.mh-chrome .orca-searcher{order:2} body .orca-site-header.mh-chrome .orca-header-right{order:4} body .orca-site-header.mh-chrome .orca-logo img{max-height:46px!important} body .orca-site-header.mh-chrome>.orca-inner{padding-top:6px!important;padding-bottom:6px!important} } body .mh-doors svg{display:block!important;flex:0 0 21px;fill:none!important;stroke:var(--mh-choc)!important} body .mh-doors a:hover svg{stroke:var(--mh-gold-deep)!important} body .orca-site-header .orca-header-right{gap:26px!important} /* quick row back (Nick liked it); row 1 shrinks to make room */ body .mh-quick{display:flex!important;padding-top:6px;padding-bottom:6px} @media (min-width:1025px){ body .orca-site-header.mh-chrome>.orca-inner{padding-top:4px!important;padding-bottom:4px!important} body .orca-site-header.mh-chrome .orca-logo img{max-height:42px!important} body .orca-site-header.mh-chrome .orca-search input[type=search]{height:38px!important} body .orca-site-header.mh-chrome .orca-header-right{flex-wrap:nowrap!important;flex:0 0 auto!important;width:auto!important} body .orca-site-header.mh-chrome .orca-header-right>*{position:static!important;flex:0 0 auto!important;width:auto!important;margin:0!important} body .orca-site-header.mh-chrome .orca-cart-slot{position:relative!important} body .mh-mega-top{padding:9px 2px!important} } /* mobile menu panel: chocolate, cream type, submenus as an accordion */ @media (max-width:1024px){ body .orca-site-header .elementor-nav-menu--dropdown{background:var(--mh-choc)!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:8px 22px 110px!important;overflow-y:auto!important} body .orca-site-header .elementor-nav-menu--dropdown .elementor-nav-menu{display:block!important;width:100%} body .orca-site-header .elementor-nav-menu--dropdown li{border-bottom:1px solid rgba(251,245,234,.12);background:transparent!important} body .orca-site-header .elementor-nav-menu--dropdown a,body .orca-site-header .elementor-nav-menu--dropdown a.elementor-item{color:var(--mh-cream)!important;font-family:var(--mh-body)!important;font-size:18px!important;font-weight:650!important;padding:15px 4px!important;background:transparent!important;justify-content:space-between} body .orca-site-header .elementor-nav-menu--dropdown a:hover,body .orca-site-header .elementor-nav-menu--dropdown a.highlighted{color:var(--mh-gold)!important} body .orca-site-header .elementor-nav-menu--dropdown .sub-menu{position:static!important;display:none;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0 0 10px 14px!important;margin:0!important;width:auto!important;min-width:0!important;left:auto!important;top:auto!important} body .orca-site-header .elementor-nav-menu--dropdown .sub-menu li{border:0} body .orca-site-header .elementor-nav-menu--dropdown .sub-menu a{font-size:16px!important;font-weight:500!important;color:#E6D8C3!important;padding:9px 4px!important;border-left:0!important} body .orca-site-header .elementor-nav-menu--dropdown .sub-arrow{color:var(--mh-gold)!important} } @media (max-width:1024px){ body .orca-site-header .elementor-nav-menu--dropdown .sub-menu{display:none!important} body .orca-site-header .elementor-nav-menu--dropdown li.mh-open>.sub-menu{display:block!important} body .orca-site-header .elementor-nav-menu--dropdown li.mh-open>a{color:var(--mh-gold)!important} body .orca-site-header .elementor-nav-menu--dropdown li.mh-open>a .sub-arrow{transform:rotate(180deg)} } @media (max-width:1024px){ body.iw-menu-open .orca-site-header.mh-chrome{z-index:9999!important;position:relative} body.iw-menu-open .orca-site-header.mh-chrome .orca-searcher{display:none!important} } @media (max-width:1024px){ body.iw-menu-open .orca-site-header .elementor-menu-toggle,body.iw-menu-open .orca-site-header .orca-brand,body.iw-menu-open .orca-site-header .orca-header-right{position:relative!important;z-index:10001!important} body.iw-menu-open .orca-site-header .elementor-menu-toggle{color:var(--mh-cream)!important} body.iw-menu-open .orca-site-header .elementor-menu-toggle svg,body.iw-menu-open .orca-site-header .elementor-menu-toggle i{fill:var(--mh-cream)!important;color:var(--mh-cream)!important} body.iw-menu-open .orca-site-header .orca-logo img{background:var(--mh-paper);border-radius:8px;padding:3px 6px} body .orca-site-header .elementor-nav-menu--dropdown{padding-top:96px!important} } @media (min-width:1025px){ body .orca-site-header.mh-chrome{gap:0!important;--gap:0px;--row-gap:0px} body .orca-site-header.mh-chrome .orca-brand,body .orca-site-header.mh-chrome .orca-header-right{padding-top:0!important;padding-bottom:0!important} body .orca-site-header.mh-chrome>.orca-inner{padding-top:7px!important;padding-bottom:7px!important} } body .e-con.mh.mh-pd-desc>.mh-in{display:grid!important;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:0 clamp(28px,5vw,64px);align-items:start} body .e-con.mh.mh-pd-desc .mh-pd-content{font-size:17px;line-height:1.7} @media (max-width:900px){body .e-con.mh.mh-pd-desc>.mh-in{grid-template-columns:1fr;gap:12px}} /* ================= filters, sort, breadcrumbs (H&D pattern) ================= */ body .mh .woocommerce-breadcrumb,body .woocommerce-breadcrumb{font-family:var(--mh-body);font-size:13.5px;color:var(--mh-muted);display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0 0 18px} body .woocommerce-breadcrumb a{color:var(--mh-choc)!important;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(43,27,16,.35)} body .woocommerce-breadcrumb a:hover{text-decoration-color:var(--mh-gold)} body .woocommerce-breadcrumb .mh-crumb-sep{color:var(--mh-muted);font-size:15px;line-height:1} body .woocommerce-breadcrumb .mh-crumb-here{color:var(--mh-muted)} /* archive head: title | rule | description */ body .e-con.mh.mh-arch-head{padding-top:26px!important;padding-bottom:26px!important;background:var(--mh-paper)!important;border-bottom:1px solid var(--mh-line)} body .mh .e-con.mh-arch-intro{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:0 40px;align-items:center} body .mh .mh-arch-intro .mh-arch-title .elementor-heading-title{font-size:clamp(28px,3vw,38px)!important} body .mh .mh-arch-intro .mh-arch-desc{margin:0;padding-left:32px;border-left:1px solid var(--mh-line);font-size:16px;max-width:none} body .mh .mh-arch-intro .mh-arch-desc:not(:has(p)){display:none} @media (max-width:900px){body .mh .e-con.mh-arch-intro{grid-template-columns:1fr;gap:10px}body .mh .mh-arch-intro .mh-arch-desc{padding-left:0;border-left:0}} /* body grid */ body .e-con.mh.mh-arch-body{padding-top:24px!important} body .mh .e-con.mh-shop{grid-template-columns:250px 1fr!important;gap:40px!important} body .mh .mh-side-w{position:sticky;top:20px;align-self:start;max-height:calc(100vh - 40px);overflow-y:auto;scrollbar-width:thin} body .mh-filters{font-family:var(--mh-body)} body .mh-filters summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center} body .mh-filters summary::-webkit-details-marker{display:none} body .mh-f-title{font-size:18px;font-weight:700;color:var(--mh-choc);padding:4px 0 16px;border-bottom:1px solid var(--mh-line)} body .mh-f-title::after{content:none} body .mh-f-count{font-weight:600;color:var(--mh-gold-deep);margin-right:auto;margin-left:6px} body .mh-f-grp{border-bottom:1px solid var(--mh-line);padding:4px 0} body .mh-f-grp>summary{font-size:16px;font-weight:700;color:var(--mh-choc);padding:14px 0} body .mh-f-grp>summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--mh-choc);border-bottom:2px solid var(--mh-choc);transform:rotate(-135deg) translate(-2px,-2px);transition:transform .2s} body .mh-f-grp:not([open])>summary::after{transform:rotate(45deg)} body .mh-f-grp ul{list-style:none;margin:0 0 12px;padding:0 0 0 4px;display:grid;gap:3px} body .mh-f-list.is-short li:nth-child(n+8){display:none} body .mh-f-opt{display:flex;align-items:center;gap:12px;padding:6px 0;color:var(--mh-ink)!important;text-decoration:none!important;font-size:14.5px} body .mh-f-opt::before{content:"";flex:0 0 20px;height:20px;border:1.5px solid var(--mh-cocoa);background:#fff;transition:background .15s,border-color .15s} body .mh-f-radio::before{border-radius:50%} body .mh-f-check::before{border-radius:4px} body .mh-f-opt:hover::before{border-color:var(--mh-gold-deep)} body .mh-f-radio.is-on::before{background:radial-gradient(circle,var(--mh-choc) 0 5px,#fff 6px)} body .mh-f-check.is-on::before{background:var(--mh-choc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBF5EA' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/14px no-repeat;border-color:var(--mh-choc)} body .mh-f-opt.is-on{font-weight:700} body .mh-f-more{background:none!important;border:0!important;padding:4px 0 10px 36px!important;font-family:var(--mh-body)!important;font-size:14px!important;font-weight:700!important;color:var(--mh-choc)!important;text-decoration:underline;text-underline-offset:4px;cursor:pointer;box-shadow:none!important} body .mh-f-clear{display:inline-block;margin-top:16px;font-size:14px;font-weight:700;color:var(--mh-rose)!important} body .mh-f-clear[hidden]{display:none} /* results row: count left, Sort right */ body .mh .mh-arch-grid .woocommerce-result-count{float:left;margin:0 0 20px!important;line-height:40px} body .mh-sort{float:right;position:relative;margin:0 0 20px} body .mh-sort-btn{display:inline-flex;align-items:center;gap:8px;background:#fff!important;color:var(--mh-choc)!important;border:1px solid var(--mh-line)!important;border-radius:999px!important;padding:9px 16px!important;font-family:var(--mh-body)!important;font-size:14px!important;font-weight:600!important;cursor:pointer;box-shadow:none!important} body .mh-sort-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} body .mh-sort-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:40;list-style:none;margin:0;padding:6px 0;min-width:210px;background:#fff;border:1px solid var(--mh-line);border-radius:10px;box-shadow:var(--mh-shadow)} body .mh-sort-menu a{display:block;padding:10px 16px;font-family:var(--mh-body);font-size:14.5px;color:var(--mh-ink)!important;text-decoration:none} body .mh-sort-menu a:hover{background:var(--mh-cream)} body .mh-sort-menu a[aria-current]{font-weight:700;color:var(--mh-choc)!important} body .mh .mh-arch-grid ul.products{clear:both} @media (max-width:900px){ body .mh .e-con.mh-shop{grid-template-columns:1fr!important;gap:0!important} body .mh .mh-side-w{display:block!important;position:static;max-height:none;overflow:visible;margin-bottom:14px} body .mh-f-title{border:1px solid var(--mh-line);border-radius:999px;padding:10px 18px;font-size:15px;background:#fff} body .mh-f-all[open]>.mh-f-title{border-radius:12px 12px 0 0} body .mh-f-all[open]{border:1px solid var(--mh-line);border-radius:12px;padding:0 16px 10px;background:#fff} body .mh-f-all[open]>.mh-f-title{border:0;border-bottom:1px solid var(--mh-line);border-radius:0;padding-left:0} } /* filters flow with the page: no sticky box, no inner scrollbars */ body .mh .mh-side-w{position:static!important;max-height:none!important;overflow:visible!important} body .mh-filters,body .mh-filters details,body .mh-filters ul{overflow:visible!important;max-height:none!important;min-width:0} body .mh-f-opt{min-width:0;overflow-wrap:anywhere} /* header rows share the topbar's grid (wider than the body): 1350px box, gutter + 10px */ @media (min-width:1025px){ body .orca-site-header.mh-chrome>.orca-inner,body .mh-mega-list{max-width:calc(1350px + 2 * var(--gutter,48px))!important;padding-left:calc(var(--gutter,48px) + 10px)!important;padding-right:calc(var(--gutter,48px) + 10px)!important;box-sizing:border-box;margin-left:auto;margin-right:auto} body .mh-mega-inner{max-width:calc(1350px + 2 * var(--gutter,48px));padding-left:calc(var(--gutter,48px) + 10px);padding-right:calc(var(--gutter,48px) + 10px);box-sizing:border-box} body .mh-mega-all{left:calc(var(--gutter,48px) + 10px)} } /* quick row: caps, full-height dividers, same ground as the header */ body .mh-quick{display:flex!important;background:var(--mh-paper)!important;padding:0 calc(var(--gutter,48px) + 10px)!important;max-width:calc(1350px + 2 * var(--gutter,48px));margin:0 auto!important;box-sizing:border-box;gap:0!important;flex-wrap:nowrap!important;justify-content:stretch!important;border-bottom:0!important} body .mh-megabar{border-top:1px solid var(--mh-line);border-bottom:1px solid var(--mh-line)} body .mh-quick li{flex:1 1 auto;display:flex;border-left:1px solid var(--mh-line)} body .mh-quick li:last-child{border-right:1px solid var(--mh-line)} body .mh-quick a{flex:1;display:flex;align-items:center;justify-content:center;padding:10px 12px;font-size:12px!important;font-weight:700!important;letter-spacing:.1em;text-transform:uppercase;color:var(--mh-cocoa)!important;text-decoration:none!important;transition:background .15s,color .15s} body .mh-quick a::after{content:none!important} body .mh-quick a:hover{background:var(--mh-cream);color:var(--mh-choc)!important} body .mh-quick li:first-child a{color:var(--mh-rose)!important} body .mh-mega{border-top:0} body .mh-mega-list{border-top:1px solid var(--mh-line)} @media (min-width:1025px){body .orca-site-header.mh-chrome .orca-brand,body .orca-site-header.mh-chrome .orca-header-right{padding-left:0!important;padding-right:0!important}body .orca-site-header.mh-chrome .orca-logo,body .orca-site-header.mh-chrome .orca-logo .elementor-widget-container{text-align:left!important;margin:0!important;padding:0!important}} body .e-con.mh.mh-pd-desc>.mh-in{display:flex!important;flex-direction:column!important;gap:14px!important}body .e-con.mh.mh-pd-desc .mh-pd-content{max-width:72ch} /* ================= Meyers HOS Core, in the Meyers skin ================= */ :root{--iwcore-cta:var(--mh-gold);--iwcore-on-cta:var(--mh-choc);--iwcore-ink:var(--mh-choc);--iwcore-accent:var(--mh-gold);--iwcore-heart:var(--mh-rose)} body .iwcore-fsb{font-family:var(--mh-body);background:var(--mh-cream);border-radius:12px;padding:14px 16px;margin:18px 0} body .iwcore-fsb-msg{color:var(--mh-choc);font-size:14.5px} body .iwcore-fsb-track{background:rgba(43,27,16,.1);height:8px} body .iwcore-fsb.is-done .iwcore-fsb-track span{background:#3c8d4a} body .elementor-menu-cart__main .iwcore-fsb{margin:12px 0} body .iwcore-options{font-family:var(--mh-body)} body .iwcore-opt legend{font-family:var(--mh-display);font-size:19px;color:var(--mh-choc)} body .iwcore-opt-choices label{padding:9px 12px;border:1px solid var(--mh-line);border-radius:10px;background:#fff} body .iwcore-opt-choices label:has(input:checked){border-color:var(--mh-choc);background:var(--mh-cream)} body .iwcore-opt-choices input{accent-color:var(--mh-choc)} body .iwcore-sw button{font-family:var(--mh-body);border-color:var(--mh-line)} body .iwcore-sw button:hover{border-color:var(--mh-cocoa)} body .iwcore-sw button[aria-pressed="true"]{background:var(--mh-choc);border-color:var(--mh-choc);color:var(--mh-cream)} body .mh .mh-pd-cart .variations{border:0;background:none;margin-bottom:10px} body .mh .mh-pd-cart .variations th,body .mh .mh-pd-cart .variations td{display:block;padding:0;background:none;border:0;text-align:left} body .mh .mh-pd-cart .variations th label{font-family:var(--mh-display);font-size:19px;color:var(--mh-choc);margin:6px 0 8px;display:block} body .mh .mh-pd-cart .reset_variations{font-size:13px;color:var(--mh-muted)} body .iwcore-sticky{font-family:var(--mh-body);background:var(--mh-paper);border-top:1px solid var(--mh-line)} body .iwcore-sticky-name{font-family:var(--mh-display);color:var(--mh-choc)} body .iwcore-sticky-price{color:var(--mh-cocoa)} body .iwcore-sticky-btn{box-shadow:0 6px 18px -8px rgba(201,138,10,.8)} body .iwcore-heart-wide{font-family:var(--mh-body);color:var(--mh-choc);border-color:var(--mh-line)!important} body .iwcore-addons,body .iwcore-tip-jar,body .iwcore-schedule{background:var(--mh-cream);border-radius:12px;padding:16px 18px;margin:0 0 18px;font-family:var(--mh-body)} body .iwcore-addons .form-row{margin:0 0 8px} body .iwcore-addons label{font-weight:600;color:var(--mh-choc)} body .iwcore-addons input[type=checkbox]{accent-color:var(--mh-choc);margin-right:6px} body .iwcore-addon-note textarea,body .iwcore-tip-jar select,body .iwcore-schedule input{border:1px solid var(--mh-line);border-radius:10px;padding:10px 12px;background:#fff;width:100%;font-family:var(--mh-body)} body .iwcore-tip-jar label{display:block;font-weight:700;color:var(--mh-choc);margin-bottom:8px} body .iwcore-schedule-h{font-family:var(--mh-display)!important;font-size:22px;color:var(--mh-choc);margin:0 0 10px} body .iwcore-schedule-hint{font-size:14px;color:var(--mh-muted);margin:4px 0 0;clear:both} body .e-con.mh.mh-wish{padding-top:40px!important} body .mh-wishlist .iwcore-wishlist-empty{font-size:17px;color:var(--mh-muted)} /* plugin parts inside the product form, and kit-button specificity */ body .mh .mh-pd-cart form.cart .iwcore-options{flex:1 1 100%;order:-1;margin-bottom:6px} body .mh .mh-pd-cart form.cart .quantity{align-self:stretch;display:flex} body .mh .mh-pd-cart form.cart .quantity .qty{height:54px!important;align-self:center} body .iwcore-sticky .iwcore-sticky-btn,body.elementor-kit-6 .iwcore-sticky .iwcore-sticky-btn{background:var(--mh-gold)!important;color:var(--mh-choc)!important;font-family:var(--mh-body)!important} body .woocommerce-message .button,body .woocommerce-message a.button{background:var(--mh-choc)!important;color:var(--mh-cream)!important;border-radius:999px!important;font-family:var(--mh-body)!important} body .woocommerce-message,body .woocommerce-info{font-family:var(--mh-body);background:var(--mh-cream)!important;border-top-color:var(--mh-gold)!important;color:var(--mh-ink)!important} /* checkout form grid */ body .mh-wc form.checkout .form-row{margin-bottom:14px} body .mh-wc form.checkout .form-row input.input-text,body .mh-wc form.checkout .form-row select,body .mh-wc form.checkout .form-row textarea,body .mh-wc form.checkout .select2-selection{width:100%!important;box-sizing:border-box;min-height:46px} body .mh-wc form.checkout .form-row-first,body .mh-wc form.checkout .form-row-last{width:48.5%!important} body .mh-wc form.checkout .form-row-wide{width:100%!important;clear:both} body .mh-wc form.checkout label{font-weight:600;font-size:14px;color:var(--mh-choc)} body .mh-wc #customer_details .col-1,body .mh-wc #customer_details .col-2{width:48%!important} @media (max-width:767px){body .mh-wc #customer_details .col-1,body .mh-wc #customer_details .col-2,body .mh-wc form.checkout .form-row-first,body .mh-wc form.checkout .form-row-last{width:100%!important;float:none!important}} body .mh-wc h3#order_review_heading{margin-top:28px} body .mh .mh-pd-cart form.cart .e-atc-qty-button-holder{flex:1 1 100%;display:flex;gap:12px;align-items:stretch} body .mh .mh-pd-cart form.cart{flex-wrap:wrap!important} body .iwcore-heart-wide,body.elementor-kit-6 .iwcore-heart-wide{background:transparent!important;color:var(--mh-choc)!important;border:1px solid var(--mh-line)!important;border-radius:999px!important;padding:8px 14px!important;font-weight:600!important} body .iwcore-heart,body.elementor-kit-6 .iwcore-heart{background:rgba(255,255,255,.94)!important} body .mh-wc .woocommerce-input-wrapper{display:block;width:100%} body .mh .iwcore-options,body .mh .iwcore-opt{display:block!important;width:100%!important;flex:1 1 100%} body .mh .iwcore-opt-choices{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;width:100%} body .mh .iwcore-opt-choices label{font-size:15px;line-height:1.3;margin:0} body .mh .iwcore-opt legend{float:none;width:100%;padding:0} @media (max-width:520px){body .mh .iwcore-opt-choices{grid-template-columns:1fr!important}} /* ================= round 5 ================= */ /* hero = the enrobing-line video behind a chocolate scrim */ body .e-con.mh.mh-hero.mh-hero-video{background:var(--mh-choc) url("https://1270962.us22.myftpupload.com/wp-content/uploads/2026/09/meyers-hero-poster.jpg") center/cover no-repeat!important;min-height:min(620px,calc(100svh - 190px))} body .e-con.mh.mh-hero.mh-hero-video::before{content:none} body .mh-hero-video>.mh-hero-media-w{position:absolute!important;inset:0;z-index:0;margin:0!important;width:auto!important} body .mh-hero-media,body .mh-hero-media-w .elementor-widget-container{position:absolute;inset:0} body .mh-hero-vid{width:100%;height:100%;object-fit:cover;display:block} body .mh-hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(43,27,16,.92) 0%,rgba(43,27,16,.8) 36%,rgba(43,27,16,.35) 66%,rgba(43,27,16,.1) 100%)} body .mh-hero-video>.mh-in{position:relative;z-index:1} body .mh .mh-hero-video .mh-hero-h.elementor-widget-heading .elementor-heading-title{color:var(--mh-cream)} body .mh-hero-video .mh-eyebrow.elementor-widget-heading .elementor-heading-title{color:var(--mh-gold)} body .mh-hero-video .mh-lead{color:#EADCC8!important} body .mh-hero-video .mh-proof{color:#EADCC8} body .mh-hero-video .mh-proof svg{stroke:var(--mh-gold)} body .mh-hero-video .mh-btn-line.elementor-widget-button .elementor-button{color:var(--mh-cream);border-color:rgba(251,245,234,.6)} body .mh-hero-video .mh-btn-line.elementor-widget-button .elementor-button:hover{background:var(--mh-cream);color:var(--mh-choc)} @media (max-width:900px){ body .e-con.mh.mh-hero.mh-hero-video{background-size:cover!important;background-position:center!important;align-items:flex-end} body .mh-hero-video>.mh-in{padding:120px 0 48px!important} body .mh-hero-media::after{background:linear-gradient(180deg,rgba(43,27,16,.35) 0%,rgba(43,27,16,.85) 45%,rgba(43,27,16,.95) 100%)} } /* two dark bands never touch: the home trust strip goes cream */ body .mh-hero-video+.mh-trust{background:var(--mh-cream)!important;color:var(--mh-ink)!important;border-bottom:1px solid var(--mh-line)} body .mh-hero-video+.mh-trust .mh-ico svg{stroke:var(--mh-gold-deep)} /* quick row: smaller, and its rules run edge to edge */ body .mh-mega{overflow-x:clip} body .mh-quick{position:relative} body .mh-quick::before,body .mh-quick::after{content:"";position:absolute;left:-100vw;right:-100vw;height:1px;background:var(--mh-line)} body .mh-quick::before{top:0}body .mh-quick::after{bottom:0} body .mh-megabar{border-top:0!important;border-bottom:1px solid var(--mh-line)} body .mh-mega-list{border-top:0!important} body .mh-quick a{padding:6px 10px!important;font-size:10.5px!important;font-weight:600!important;letter-spacing:.12em} /* the header scrolls away with the page (too tall to pin) */ body .orca-site-header.mh-chrome,body .orca-topbar.mh-chrome{position:relative!important;top:auto!important;transform:none!important;box-shadow:none!important} body.iw-away .orca-site-header.mh-chrome{transform:none!important} body .elementor-location-header{min-height:0!important;height:auto!important} /* account menu in the Meyers skin */ body .mh-acct-w .iwcore-acct-btn{font-family:var(--mh-body)!important;font-size:13.5px!important;font-weight:600!important;color:var(--mh-choc)!important;background:none!important;padding:4px 0!important;box-shadow:none!important} body .mh-acct-w .iwcore-acct-btn svg{stroke:var(--mh-choc)!important} body .mh-acct-w .iwcore-acct-menu{border-color:var(--mh-line);font-family:var(--mh-body);font-size:15px} body .mh-acct-w .iwcore-acct-menu a{color:var(--mh-ink)!important} body .mh-acct-w .iwcore-acct-menu a:hover{background:var(--mh-cream)} body .mh-acct-w .iwcore-acct-menu .is-logout a{color:var(--mh-rose)!important} body .mh-hero-video .mh-hero-h.elementor-widget-heading .elementor-heading-title{color:var(--mh-cream)!important} body .mh-hero-media::after{background:linear-gradient(90deg,rgba(35,21,12,.95) 0%,rgba(35,21,12,.88) 38%,rgba(35,21,12,.5) 64%,rgba(35,21,12,.15) 100%)} @media (min-width:1025px){body .orca-site-header.mh-chrome .orca-header-right{gap:24px!important}body .orca-site-header.mh-chrome .orca-cart-slot{margin-left:6px!important;flex:0 0 auto}body .orca-site-header.mh-chrome .mh-doors-w{flex:0 0 auto!important}} /* wishlist hearts: the kit's button padding squeezed the icon to nothing */ body .iwcore-heart:not(.iwcore-heart-wide),body.elementor-kit-6 .iwcore-heart:not(.iwcore-heart-wide){width:38px!important;height:38px!important;min-width:0!important;padding:0!important;border-radius:50%!important;border:0!important;background:rgba(255,255,255,.95)!important;box-shadow:0 1px 4px rgba(43,27,16,.18)!important;display:grid!important;place-items:center!important;line-height:0!important} body .iwcore-heart svg{display:block!important;width:20px!important;height:20px!important;flex:0 0 20px;fill:none;stroke:var(--mh-choc)!important;stroke-width:1.8} body .iwcore-heart[aria-pressed="true"] svg{fill:var(--mh-rose)!important;stroke:var(--mh-rose)!important} body .iwcore-heart:hover svg{stroke:var(--mh-rose)!important} body .iwcore-heart-wide svg{width:18px!important;height:18px!important} /* ================= cart page ================= */ body .mh-wc .woocommerce-cart-form{background:#fff;border:1px solid var(--mh-line);border-radius:16px;padding:6px 22px} body .mh-wc table.shop_table.cart{border:0!important;border-radius:0;background:transparent;margin:0} body .mh-wc table.shop_table.cart thead th{background:transparent;border:0!important;border-bottom:1px solid var(--mh-line)!important;padding:16px 10px!important;font-size:12px} body .mh-wc table.shop_table.cart td{background:transparent!important;border:0!important;border-bottom:1px solid var(--mh-line)!important;padding:20px 10px!important;vertical-align:middle} body .mh-wc table.shop_table.cart tr:last-child td{border-bottom:0!important} body .mh-wc table.cart td.product-thumbnail{width:112px} body .mh-wc table.cart td.product-thumbnail img{width:96px!important;height:96px;object-fit:contain;padding:6px;background:#fff;border-radius:12px;border:1px solid var(--mh-line)} body .mh-wc table.cart td.product-name a{font-family:var(--mh-display)!important;font-size:19px;font-weight:650;color:var(--mh-choc)!important;line-height:1.25} body .mh-wc table.cart td.product-name dl.variation{margin:6px 0 0;font-size:13.5px;color:var(--mh-muted)} body .mh-wc table.cart td.product-name dl.variation dt,body .mh-wc table.cart td.product-name dl.variation dd{display:inline;margin:0;float:none} body .mh-wc table.cart td.product-name dl.variation dd p{display:inline;margin:0} body .mh-wc table.cart td.product-price,body .mh-wc table.cart td.product-subtotal{font-weight:700;color:var(--mh-cocoa);font-size:16px} body .mh-wc table.cart td.product-remove{width:40px} body .mh-wc table.cart a.remove{width:30px!important;height:30px!important;line-height:28px!important;border-radius:50%!important;border:1px solid var(--mh-line);color:var(--mh-muted)!important;font-size:18px!important;font-weight:400!important;background:#fff;display:inline-block;text-align:center} body .mh-wc table.cart a.remove:hover{background:var(--mh-rose)!important;border-color:var(--mh-rose);color:#fff!important} body .mh-wc .quantity{display:inline-flex!important;align-items:center;border:1px solid var(--mh-line);border-radius:999px;background:#fff;overflow:hidden;height:44px} body .mh-wc .quantity .qty{border:0!important;width:44px!important;height:42px!important;min-height:0!important;border-radius:0!important;text-align:center;-moz-appearance:textfield;font-weight:700;padding:0!important;background:transparent} body .mh-wc .quantity .qty::-webkit-inner-spin-button,body .mh-wc .quantity .qty::-webkit-outer-spin-button{-webkit-appearance:none;margin:0} body .mh-wc .quantity .mh-step,body.elementor-kit-6 .mh-wc .quantity .mh-step{width:40px!important;height:42px!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;color:var(--mh-choc)!important;font-size:20px!important;font-weight:500!important;cursor:pointer;box-shadow:none!important;line-height:1} body .mh-wc .quantity .mh-step:hover{background:var(--mh-cream)!important} body .mh-wc table.cart td.actions{padding:18px 10px 14px!important} body .mh-wc button[name=update_cart]{display:none!important} body .mh-wc .coupon{display:flex;gap:8px;align-items:center} body .mh-wc .coupon .input-text{min-width:200px!important;height:44px} body .mh-wc .coupon .button{height:44px;background:transparent!important;color:var(--mh-choc)!important;border:1.5px solid var(--mh-choc)!important} body .mh-wc .cart-collaterals{grid-template-columns:1fr 400px!important;gap:32px!important} body .mh-wc .cart_totals{background:var(--mh-cream);border:1px solid var(--mh-line);border-radius:16px;padding:22px!important;position:sticky;top:20px} body .mh-wc .cart_totals h2{font-size:24px!important;margin:0 0 12px!important} body .mh-wc .cart_totals table.shop_table{border:0!important;background:transparent} body .mh-wc .cart_totals table.shop_table th,body .mh-wc .cart_totals table.shop_table td{background:transparent!important;border:0!important;border-bottom:1px solid var(--mh-line)!important;padding:12px 0!important;text-transform:none;letter-spacing:0;font-size:15px;color:var(--mh-ink)} body .mh-wc .cart_totals table.shop_table th{font-weight:600;width:40%} body .mh-wc .cart_totals .order-total th,body .mh-wc .cart_totals .order-total td{border-bottom:0!important;font-size:19px!important;font-weight:800;color:var(--mh-choc)} body .mh-wc .cart_totals .woocommerce-shipping-methods{margin:0;padding:0;list-style:none} body .mh-wc .cart_totals .woocommerce-shipping-destination,body .mh-wc .cart_totals .shipping-calculator-button{font-size:13px;color:var(--mh-muted)} body .mh-wc .cart_totals .iwcore-fsb{background:#fff;margin:0 0 14px} body .mh-wc .wc-proceed-to-checkout{padding:16px 0 0!important} body .mh-wc .wc-proceed-to-checkout a.checkout-button{width:100%;display:block;text-align:center;margin:0!important;border-radius:999px!important} body .mh-wc .wc-proceed-to-checkout::after{content:"Secure checkout";display:block;text-align:center;font-size:13px;color:var(--mh-muted);margin-top:10px} body .mh-wc .cross-sells ul.products{grid-template-columns:repeat(3,1fr)!important} body .mh-wc .cross-sells h2{font-size:24px!important} @media (max-width:767px){ body .mh-wc .woocommerce-cart-form{padding:4px 14px} body .mh-wc table.cart td.product-thumbnail img{width:72px!important;height:72px} body .mh-wc .cross-sells ul.products{grid-template-columns:repeat(2,1fr)!important} body .mh-wc .coupon{flex-wrap:wrap} } /* ================= mini cart panel ================= */ body .elementor-menu-cart__main{font-family:var(--mh-body)!important;padding-top:10px;display:flex!important;flex-direction:column} body .elementor-menu-cart__main::before{content:"Your cart";font-family:var(--mh-display);font-size:26px;font-weight:650;color:var(--mh-choc);padding:10px 0 14px;border-bottom:1px solid var(--mh-line)} body .elementor-menu-cart__product{border-bottom:1px solid var(--mh-line)!important;padding:16px 0!important} body .elementor-menu-cart__product-image img{width:72px!important;height:72px;object-fit:contain;border:1px solid var(--mh-line);border-radius:10px;padding:4px;background:#fff} body .elementor-menu-cart__product-name a,body .elementor-menu-cart__product-name{font-family:var(--mh-body)!important;font-weight:700!important;font-size:15px!important;color:var(--mh-choc)!important;line-height:1.3} body .elementor-menu-cart__product-price{font-family:var(--mh-body)!important;color:var(--mh-muted)!important;font-size:14px!important} body .elementor-menu-cart__product-price .amount{color:var(--mh-cocoa);font-weight:700} body .elementor-menu-cart__subtotal{font-family:var(--mh-body)!important;display:flex;justify-content:space-between;font-size:17px!important;color:var(--mh-choc)!important;padding:16px 0!important;border-bottom:0!important} body .elementor-menu-cart__footer-buttons{display:grid!important;grid-template-columns:1fr 1fr;gap:10px} body .elementor-menu-cart__footer-buttons .elementor-button{border-radius:999px!important;font-family:var(--mh-body)!important;font-weight:700!important;font-size:15px!important;padding:14px!important} body .elementor-menu-cart__footer-buttons .elementor-button--view-cart{background:transparent!important;color:var(--mh-choc)!important;border:1.5px solid var(--mh-choc)!important} body .elementor-menu-cart__footer-buttons .elementor-button--checkout{background:var(--mh-gold)!important;color:var(--mh-choc)!important} body .elementor-menu-cart__main .iw-ship-meter{order:1;margin:14px 0 4px!important;padding:12px 14px;background:var(--mh-cream);border-radius:12px;font-size:14px!important;color:var(--mh-choc)!important;font-weight:600} body .elementor-menu-cart__main .widget_shopping_cart_content{order:2} body .elementor-menu-cart__close-button{z-index:2} /* ================= product cards: price first, action bar ================= */ body .mh-products ul.products li.product a.woocommerce-LoopProduct-link{display:flex!important;flex-direction:column} body .mh-products ul.products li.product a.woocommerce-LoopProduct-link img{order:0} body .mh-products ul.products li.product .price{order:1;margin:0 0 4px!important;font-family:var(--mh-display)!important;font-size:19px!important;font-weight:700!important;color:var(--mh-gold-deep)!important;font-variation-settings:"SOFT" 100} body .mh-products ul.products li.product .price *{font-family:inherit!important;color:inherit!important} body .mh-products ul.products li.product .woocommerce-loop-product__title{order:2;margin:0 0 14px!important;flex:1} /* the bar: [heart] [add to cart / select options] [quick view] along the bottom */ body .mh-products ul.products li.product{padding-bottom:0!important;overflow:hidden} body .mh-products ul.products li.product .mh-card-bar{display:flex;align-items:stretch;border-top:1px solid var(--mh-line);margin-top:auto} body .mh-card-bar>*{border-radius:0!important;margin:0!important} body .mh-card-bar .button,body.elementor-kit-6 .mh-card-bar .button{flex:1;display:flex!important;align-items:center;justify-content:center;background:transparent!important;color:var(--mh-choc)!important;font-size:14px!important;font-weight:700!important;padding:13px 8px!important;border:0!important;box-shadow:none!important;text-align:center;line-height:1.1} body .mh-card-bar .button:hover{background:var(--mh-choc)!important;color:var(--mh-cream)!important} body .mh-card-bar .added_to_cart{display:none!important} body .mh-card-bar .button.added::after{content:" \2713";margin-left:4px} body .mh-card-bar .iwcore-heart,body.elementor-kit-6 .mh-card-bar .iwcore-heart:not(.iwcore-heart-wide){position:static!important;width:48px!important;height:auto!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;border-right:1px solid var(--mh-line)!important;flex:0 0 48px} body .mh-card-bar .mh-qv,body.elementor-kit-6 .mh-card-bar .mh-qv{flex:0 0 48px;width:48px;display:grid;place-items:center;background:transparent!important;border:0!important;border-left:1px solid var(--mh-line)!important;border-radius:0!important;padding:0!important;cursor:pointer;box-shadow:none!important;color:var(--mh-choc)!important} body .mh-card-bar .mh-qv svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} body .mh-card-bar .mh-qv:hover,body .mh-card-bar .iwcore-heart:hover{background:var(--mh-cream)!important} @media (max-width:767px){body .mh-card-bar .button{font-size:13px!important;padding:11px 4px!important}body .mh-card-bar .iwcore-heart,body .mh-card-bar .mh-qv{flex-basis:40px!important;width:40px!important}} /* ================= quick view ================= */ .mh-qv-modal{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;padding:20px;background:rgba(35,21,12,.55);opacity:0;transition:opacity .18s} .mh-qv-modal.is-open{opacity:1} .mh-qv-box{position:relative;width:min(960px,100%);max-height:calc(100vh - 40px);overflow:auto;background:var(--mh-paper);border-radius:18px;box-shadow:0 30px 80px -20px rgba(0,0,0,.5);display:grid;grid-template-columns:1fr 1fr;gap:32px;padding:30px;font-family:var(--mh-body)} .mh-qv-close,body.elementor-kit-6 .mh-qv-close{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%!important;border:1px solid var(--mh-line)!important;background:#fff!important;color:var(--mh-choc)!important;font-size:22px!important;line-height:1;padding:0!important;cursor:pointer;z-index:2} .mh-qv-img{background:#fff;border:1px solid var(--mh-line);border-radius:14px;display:grid;place-items:center;aspect-ratio:1/1;overflow:hidden} .mh-qv-img img{width:100%;height:100%;object-fit:contain;padding:18px} .mh-qv-info h2{font-family:var(--mh-display);font-size:30px;line-height:1.1;color:var(--mh-choc);margin:4px 0 8px} .mh-qv-price{font-family:var(--mh-display);font-size:24px;font-weight:700;color:var(--mh-gold-deep);margin:0 0 12px} .mh-qv-desc{color:var(--mh-muted);font-size:15.5px;line-height:1.6;margin-bottom:16px} .mh-qv-info form.cart{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0 0 14px} .mh-qv-info form.cart .variations{width:100%;border:0} .mh-qv-info form.cart .variations th,.mh-qv-info form.cart .variations td{display:block;padding:0;border:0;background:none;text-align:left} .mh-qv-info form.cart .variations label{font-family:var(--mh-display);font-size:18px;color:var(--mh-choc)} .mh-qv-info form.cart .single_variation_wrap,.mh-qv-info form.cart .woocommerce-variation-add-to-cart{width:100%;display:flex;flex-wrap:wrap;gap:12px;align-items:center} .mh-qv-info .quantity .qty{height:50px;width:74px;border:1px solid var(--mh-line);border-radius:999px;text-align:center} .mh-qv-info .single_add_to_cart_button,body.elementor-kit-6 .mh-qv-info .single_add_to_cart_button{flex:1;height:50px;border-radius:999px!important;background:var(--mh-gold)!important;color:var(--mh-choc)!important;font-weight:800!important;border:0!important} .mh-qv-more{font-weight:700;color:var(--mh-choc)!important} .mh-qv-loading{grid-column:1/-1;text-align:center;padding:60px 0;color:var(--mh-muted)} @media (max-width:760px){.mh-qv-box{grid-template-columns:1fr;gap:16px;padding:22px}.mh-qv-info h2{font-size:24px}} body .mh-card-bar .iwcore-heart{order:-1} body .mh-card-bar .button{order:0} body .mh-card-bar .mh-qv{order:1} body .iwcore-toast{font-family:var(--mh-body);background:var(--mh-choc)!important;color:var(--mh-cream)} body .iwcore-toast a{color:var(--mh-gold)!important} /* ================= round 7: card bar as icons, price in the body face ================= */ body .mh-products ul.products li.product .price{font-family:var(--mh-body)!important;font-size:14.5px!important;font-weight:700!important;color:var(--mh-gold-deep)!important;font-variation-settings:normal;margin:0 0 3px!important;letter-spacing:.01em} body .mh-products ul.products li.product .woocommerce-loop-product__title{font-size:16px!important;margin:0 0 6px!important} /* the bar: heart left; eye and a gold cart-plus right. No rules, no pills. */ body .mh-products ul.products li.product .mh-card-bar{display:flex;align-items:center;gap:8px;border-top:0!important;padding:4px 14px 14px;margin-top:auto} body .mh-card-bar .iwcore-heart,body.elementor-kit-6 .mh-card-bar .iwcore-heart:not(.iwcore-heart-wide), body .mh-card-bar .mh-qv,body.elementor-kit-6 .mh-card-bar .mh-qv{flex:0 0 40px!important;width:40px!important;height:40px!important;border-radius:50%!important;border:1px solid var(--mh-line)!important;background:#fff!important;display:grid!important;place-items:center!important;padding:0!important;box-shadow:none!important} body .mh-card-bar .iwcore-heart{order:0!important;margin-right:auto!important} body .mh-card-bar .mh-qv{order:1!important} body .mh-card-bar .iwcore-heart:hover,body .mh-card-bar .mh-qv:hover{border-color:var(--mh-choc)!important;background:var(--mh-cream)!important} body .mh-card-bar .mh-qv svg,body .mh-card-bar .iwcore-heart svg{width:19px!important;height:19px!important} body .mh-card-bar .button,body.elementor-kit-6 .mh-card-bar .button{order:2!important;flex:0 0 44px!important;width:44px!important;height:44px!important;padding:0!important;border-radius:50%!important;font-size:0!important;line-height:0!important;color:transparent!important;background:var(--mh-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B1B10' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='18' cy='20' r='1.4'/%3E%3Cpath d='M2 3h3l2.6 12.4a1.5 1.5 0 0 0 1.5 1.1h8.8a1.5 1.5 0 0 0 1.5-1.2L21 8H6.2'/%3E%3Cpath d='M14 9.5v5M11.5 12h5'/%3E%3C/svg%3E") center/21px no-repeat!important;border:0!important;box-shadow:0 4px 12px -6px rgba(201,138,10,.9)!important;overflow:hidden;white-space:nowrap} body .mh-card-bar .button:hover{background-color:#F2B62C!important;transform:translateY(-1px)} body .mh-card-bar .button.loading{opacity:.6} body .mh-card-bar .button.loading::after{display:none} body .mh-card-bar .button.added{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B1B10' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")!important} body .mh-card-bar .button.added::after{content:none!important} /* not purchasable (out of stock): the button reads as unavailable */ body .mh-card-bar .button:not(.add_to_cart_button):not(.product_type_variable):not([data-choose]){background-color:var(--mh-line)!important;box-shadow:none!important} /* ================= quick view spacing ================= */ .mh-qv-box{gap:40px;padding:36px} .mh-qv-info{display:flex;flex-direction:column;justify-content:center;padding:8px 8px 8px 0} .mh-qv-info h2{font-size:34px;margin:0 0 10px} .mh-qv-price{margin:0 0 18px;font-family:var(--mh-body);font-size:22px} .mh-qv-desc{margin:0 0 24px;font-size:16.5px} .mh-qv-desc p{margin:0 0 8px} .mh-qv-info form.cart{margin:0 0 20px} .mh-qv-assure{list-style:none;margin:0 0 20px;padding:14px 16px;background:var(--mh-cream);border-radius:12px;display:grid;gap:8px;font-size:14.5px;font-weight:600;color:var(--mh-cocoa)} .mh-qv-assure li::before{content:"\2713";color:var(--mh-gold-deep);margin-right:8px;font-weight:800} .mh-qv-more{margin-top:4px} @media (max-width:760px){.mh-qv-box{gap:18px;padding:22px}.mh-qv-info{padding:0}} /* heart + eye ride on the photo's corner; the bar holds qty + cart */ body .mh-products ul.products li.product{position:relative} body .mh-card-bar .iwcore-heart,body.elementor-kit-6 .mh-card-bar .iwcore-heart:not(.iwcore-heart-wide){position:absolute!important;top:10px;right:10px;margin:0!important;z-index:3;box-shadow:0 1px 4px rgba(43,27,16,.16)!important;border-color:transparent!important} body .mh-card-bar .mh-qv,body.elementor-kit-6 .mh-card-bar .mh-qv{position:absolute!important;top:56px;right:10px;z-index:3;box-shadow:0 1px 4px rgba(43,27,16,.16)!important;border-color:transparent!important;opacity:0;transform:translateY(-4px);transition:opacity .18s,transform .18s} body .mh-products ul.products li.product:hover .mh-card-bar .mh-qv,body .mh-card-bar .mh-qv:focus-visible{opacity:1;transform:none} @media (hover:none){body .mh-card-bar .mh-qv{opacity:1;transform:none}} body .mh-products ul.products li.product .mh-card-bar{justify-content:flex-end} body .mh-card-bar .iwcore-card-qty{margin-right:auto;border-color:var(--mh-line);font-family:var(--mh-body)} body .mh-card-bar .iwcore-card-qty button,body.elementor-kit-6 .mh-card-bar .iwcore-card-qty button{background:transparent!important;color:var(--mh-choc)!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;width:32px!important;height:38px!important;font-size:18px!important;font-weight:500!important} body .mh-card-bar .iwcore-card-qty button:hover{background:var(--mh-cream)!important} body .mh-card-bar .iwcore-card-qty input{color:var(--mh-choc);font-size:15px;min-height:0!important;border:0!important} /* options to choose: a cog, and it opens the quick view */ body .mh-card-bar .button.add_to_cart_button:not(.ajax_add_to_cart),body.elementor-kit-6 .mh-card-bar .button.add_to_cart_button:not(.ajax_add_to_cart){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B1B10' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z'/%3E%3C/svg%3E")!important} /* out of stock ("Read more"): muted */ body .mh-card-bar .button:not(.add_to_cart_button),body.elementor-kit-6 .mh-card-bar .button:not(.add_to_cart_button){background-color:var(--mh-line)!important;box-shadow:none!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B5645' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16.5v.5'/%3E%3C/svg%3E")!important} body .mh-card-bar .button:not(.add_to_cart_button):not(.ajax_add_to_cart)~.mh-qv{opacity:1} /* ================= round 8 ================= */ /* card bar: heart | eye .......... cart (or the in-cart stepper), one row at the bottom */ body .mh-card-bar .iwcore-heart,body.elementor-kit-6 .mh-card-bar .iwcore-heart:not(.iwcore-heart-wide), body .mh-card-bar .mh-qv,body.elementor-kit-6 .mh-card-bar .mh-qv{position:static!important;opacity:1!important;transform:none!important;box-shadow:none!important;border:1px solid var(--mh-line)!important;margin:0!important} body .mh-card-bar .iwcore-heart{order:0!important} body .mh-card-bar .mh-qv{order:1!important;margin-right:auto!important} body .mh-card-bar .button,body .mh-card-bar .iwcore-card-qty{order:2!important} body .mh-products ul.products li.product .mh-card-bar{justify-content:flex-start;gap:8px} body .mh-card-bar .iwcore-card-qty{background:var(--mh-choc);color:var(--mh-cream);min-width:112px;height:42px;font-family:var(--mh-body);box-shadow:0 4px 12px -6px rgba(43,27,16,.6)} body .mh-card-bar .iwcore-card-qty button,body.elementor-kit-6 .mh-card-bar .iwcore-card-qty button{background:transparent!important;color:var(--mh-cream)!important;border:0!important;box-shadow:none!important;padding:0!important;width:38px!important;height:42px!important;font-size:20px!important;border-radius:0!important} body .mh-card-bar .iwcore-card-qty button:hover{color:var(--mh-gold)!important} body .mh-card-bar .iwcore-card-qty output{color:var(--mh-cream);font-size:15px} body .mh-card-bar .button[hidden]{display:none!important} /* mobile bottom bar (Ivywild Connect): chocolate icons on paper, the cart in gold */ @media (max-width:1024px){ body .iw-shop-bar{background:var(--mh-paper)!important;border-top:1px solid var(--mh-line)!important;box-shadow:0 -6px 18px -12px rgba(43,27,16,.35)!important} body .iw-shop-item,body button.iw-shop-item,body.elementor-kit-6 button.iw-shop-item{color:var(--mh-choc)!important;background:transparent!important;border:0!important;box-shadow:none!important;border-radius:12px!important;font-family:var(--mh-body)!important} body .iw-shop-item span{font-family:var(--mh-body)!important;font-weight:700!important;color:inherit!important} body .iw-shop-item svg{color:currentColor!important;stroke:currentColor} body .iw-shop-item[aria-current="page"]{color:var(--mh-gold-deep)!important} body .iw-shop-item:last-child,body button.iw-shop-item:last-child{background:var(--mh-gold)!important;color:var(--mh-choc)!important} body .iw-shop-badge{background:var(--mh-choc)!important;color:var(--mh-cream)!important} } /* mobile menu: the header row is a solid bar; the list scrolls beneath it */ @media (max-width:1024px){ body.iw-menu-open .orca-site-header.mh-chrome{background:var(--mh-choc)!important} body.iw-menu-open .orca-site-header.mh-chrome .orca-inner{background:var(--mh-choc)!important;position:relative;z-index:10001} body .orca-site-header .elementor-nav-menu--dropdown{top:var(--mh-menu-top,110px)!important;bottom:0!important;height:auto!important;max-height:none!important;padding-top:6px!important;overscroll-behavior:contain} body.iw-menu-open .orca-site-header .orca-cart-slot .elementor-menu-cart__toggle_button{background:var(--mh-gold)!important} } body .mh-card-bar .iwcore-card-qty{min-width:92px!important;height:40px!important} body .mh-card-bar .iwcore-card-qty button,body.elementor-kit-6 .mh-card-bar .iwcore-card-qty button{width:30px!important;height:40px!important;font-size:18px!important} body .mh-card-bar .iwcore-card-qty output{min-width:18px} body .mh-products ul.products li.product .mh-card-bar{gap:6px;padding:4px 12px 12px} body .mh-card-bar .iwcore-heart,body .mh-card-bar .mh-qv{flex-basis:38px!important;width:38px!important;height:38px!important} /* ================= round 9: the card bar, stated once with enough weight ================= */ /* cards are equal-height columns; the bar sits on the floor of every card */ body ul.products li.product{display:flex!important;flex-direction:column!important} body ul.products li.product a.woocommerce-LoopProduct-link{flex:1 1 auto!important} body ul.products li.product .mh-card-bar{display:flex!important;align-items:center!important;gap:6px!important;margin:auto 0 0!important;padding:6px 12px 12px!important;border:0!important} /* every bar item is a 40px round control on the same line */ body ul.products li.product .mh-card-bar>*{margin:0!important;flex:0 0 auto!important;align-self:center!important} body ul.products li.product .mh-card-bar .iwcore-heart,body ul.products li.product .mh-card-bar .mh-qv, body.elementor-kit-6 ul.products li.product .mh-card-bar .iwcore-heart,body.elementor-kit-6 ul.products li.product .mh-card-bar .mh-qv{position:static!important;width:40px!important;height:40px!important;border-radius:999px!important;border:1px solid var(--mh-line)!important;background:#fff!important;box-shadow:none!important;padding:0!important;display:grid!important;place-items:center!important;opacity:1!important;transform:none!important} body ul.products li.product .mh-card-bar .iwcore-heart{order:0!important} body ul.products li.product .mh-card-bar .mh-qv{order:1!important;margin-right:auto!important} /* the cart button: gold circle, cart-plus icon, no words (the words stay for screen readers via aria) */ body ul.products li.product .mh-card-bar .button,body.elementor-kit-6 ul.products li.product .mh-card-bar .button, body .mh-products ul.products li.product .mh-card-bar .button{order:2!important;width:40px!important;height:40px!important;min-width:40px!important;padding:0!important;border-radius:999px!important;border:0!important;font-size:0!important;line-height:0!important;letter-spacing:0!important;color:transparent!important;text-indent:-999px;overflow:hidden!important;white-space:nowrap!important;background:var(--mh-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B1B10' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='18' cy='20' r='1.4'/%3E%3Cpath d='M2 3h3l2.6 12.4a1.5 1.5 0 0 0 1.5 1.1h8.8a1.5 1.5 0 0 0 1.5-1.2L21 8H6.2'/%3E%3Cpath d='M14 9.5v5M11.5 12h5'/%3E%3C/svg%3E") center/20px no-repeat!important;box-shadow:0 4px 12px -6px rgba(201,138,10,.9)!important} body ul.products li.product .mh-card-bar .button:hover{background-color:#F2B62C!important} /* options to choose: a cog on the same gold */ body ul.products li.product .mh-card-bar .button.add_to_cart_button:not(.ajax_add_to_cart),body.elementor-kit-6 ul.products li.product .mh-card-bar .button.add_to_cart_button:not(.ajax_add_to_cart){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B1B10' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z'/%3E%3C/svg%3E")!important} /* out of stock: muted info mark */ body ul.products li.product .mh-card-bar .button:not(.add_to_cart_button),body.elementor-kit-6 ul.products li.product .mh-card-bar .button:not(.add_to_cart_button){background-color:var(--mh-line)!important;box-shadow:none!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B5645' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16.5v.5'/%3E%3C/svg%3E")!important} body ul.products li.product .mh-card-bar .button.added{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B1B10' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")!important} body ul.products li.product .mh-card-bar .button::after,body ul.products li.product .mh-card-bar .button::before{display:none!important} body ul.products li.product .mh-card-bar .button[hidden]{display:none!important} /* the in-cart stepper: a pill in the heart/eye style */ body ul.products li.product .mh-card-bar .iwcore-card-qty{order:2!important;height:40px!important;min-width:0!important;border-radius:999px!important;border:1px solid var(--mh-line)!important;background:#fff!important;color:var(--mh-choc)!important;box-shadow:none!important;overflow:hidden;display:inline-flex!important;align-items:center} body ul.products li.product .mh-card-bar .iwcore-card-qty button,body.elementor-kit-6 ul.products li.product .mh-card-bar .iwcore-card-qty button{width:32px!important;height:38px!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;color:var(--mh-choc)!important;box-shadow:none!important;font-size:18px!important;line-height:1!important;display:grid!important;place-items:center!important} body ul.products li.product .mh-card-bar .iwcore-card-qty button:hover{background:var(--mh-cream)!important} body ul.products li.product .mh-card-bar .iwcore-card-qty output{min-width:20px;text-align:center;font-weight:800;font-size:15px;color:var(--mh-choc)!important;font-family:var(--mh-body)} body ul.products li.product .mh-card-bar .iwcore-card-qty svg{stroke:var(--mh-choc)!important} /* hearts/eye icons */ body ul.products li.product .mh-card-bar .iwcore-heart svg,body ul.products li.product .mh-card-bar .mh-qv svg{width:19px!important;height:19px!important;display:block!important;fill:none;stroke:var(--mh-choc)!important;stroke-width:1.8} body ul.products li.product .mh-card-bar .iwcore-heart[aria-pressed="true"] svg{fill:var(--mh-rose)!important;stroke:var(--mh-rose)!important} body ul.products li.product .mh-card-bar .iwcore-heart:hover,body ul.products li.product .mh-card-bar .mh-qv:hover{border-color:var(--mh-choc)!important;background:var(--mh-cream)!important} /* ================= Elementor cart & checkout widgets ================= */ body .mh-wc-cart .e-cart-section,body .mh-wc-checkout .e-checkout__column-inner>*,body .mh-wc-checkout .e-checkout__order_review,body .mh-wc-checkout .e-coupon-box,body .mh-wc-checkout .woocommerce-billing-fields,body .mh-wc-checkout .woocommerce-additional-fields,body .mh-wc-checkout .woocommerce-checkout-payment{border:1px solid var(--mh-line)!important;border-radius:16px!important;background:#fff!important;box-shadow:none!important} body .mh-wc .woocommerce-cart-form{border:0!important;padding:0!important;background:transparent!important} body .mh-wc-cart .e-cart-totals{background:var(--mh-cream)!important} body .mh-wc-cart .cart_totals{border:0!important;background:transparent!important;padding:0!important;position:static} body .mh-wc-checkout .e-checkout__container{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)!important;gap:28px!important} body .mh-wc-checkout #customer_details .col-1,body .mh-wc-checkout #customer_details .col-2{width:100%!important;float:none!important} body .mh-wc-checkout h3,body .mh-wc-checkout .e-checkout-secondary-title{font-family:var(--mh-display)!important;font-size:22px!important;color:var(--mh-choc)!important} body .mh-wc-checkout .form-row label{font-size:14px!important;line-height:1.3} body .mh-wc-checkout #place_order{background:var(--mh-gold)!important;color:var(--mh-choc)!important;border-radius:999px!important;font-weight:800!important;opacity:1!important} body .mh-wc-checkout a{color:var(--mh-cocoa)} @media (max-width:900px){body .mh-wc-checkout .e-checkout__container{grid-template-columns:1fr!important}} body .mh-cart-cross{margin-top:36px} body .mh-cart-cross::before{content:"You may also like";display:block;font-family:var(--mh-display);font-size:26px;font-weight:650;color:var(--mh-choc);margin-bottom:18px} body .mh-cart-cross:not(:has(li.product))::before{content:none} /* ================= list layout (switcher on desktop, always on phones) ================= */ body .mh-arch-grid ul.products.mh-list{--mh-list-cols:2} body .mh-arch-grid ul.products.mh-list{grid-template-columns:repeat(var(--mh-list-cols,1),minmax(0,1fr))!important;gap:14px!important} body .mh-arch-grid ul.products.mh-list li.product{display:grid!important;grid-template-columns:140px minmax(0,1fr)!important;grid-template-rows:auto auto 1fr!important;column-gap:16px!important;padding:12px!important;align-items:start} body .mh-arch-grid ul.products.mh-list li.product a.woocommerce-LoopProduct-link{display:contents!important} body .mh-arch-grid ul.products.mh-list li.product a.woocommerce-LoopProduct-link img{grid-column:1!important;grid-row:1 / 4!important;width:140px!important;height:140px!important;aspect-ratio:1/1;margin:0!important;padding:6px!important;border:1px solid var(--mh-line);border-radius:12px!important} body .mh-arch-grid ul.products.mh-list li.product .price{grid-column:2!important;grid-row:1!important;padding:0!important;margin:4px 0 2px!important} body .mh-arch-grid ul.products.mh-list li.product .woocommerce-loop-product__title{grid-column:2!important;grid-row:2!important;padding:0!important;margin:0 0 6px!important} body .mh-arch-grid ul.products.mh-list li.product .mh-card-bar{grid-column:2!important;grid-row:3!important;padding:4px 0 0!important;align-self:end!important;margin:0!important} body .mh-arch-grid ul.products.mh-list li.product .onsale{top:8px!important;left:8px!important} @media (max-width:767px){ body .mh-arch-grid ul.products{grid-template-columns:repeat(var(--mh-list-cols,1),minmax(0,1fr))!important;gap:14px!important} body .mh-arch-grid ul.products li.product{display:grid!important;grid-template-columns:96px minmax(0,1fr)!important;grid-template-rows:auto auto 1fr!important;column-gap:16px!important;padding:12px!important;align-items:start} body .mh-arch-grid ul.products li.product a.woocommerce-LoopProduct-link{display:contents!important} body .mh-arch-grid ul.products li.product a.woocommerce-LoopProduct-link img{grid-column:1!important;grid-row:1 / 4!important;width:96px!important;height:96px!important;aspect-ratio:1/1;margin:0!important;padding:6px!important;border:1px solid var(--mh-line);border-radius:12px!important} body .mh-arch-grid ul.products li.product .price{grid-column:2!important;grid-row:1!important;padding:0!important;margin:4px 0 2px!important} body .mh-arch-grid ul.products li.product .woocommerce-loop-product__title{grid-column:2!important;grid-row:2!important;padding:0!important;margin:0 0 6px!important} body .mh-arch-grid ul.products li.product .mh-card-bar{grid-column:2!important;grid-row:3!important;padding:4px 0 0!important;align-self:end!important;margin:0!important} body .mh-arch-grid ul.products li.product .onsale{top:8px!important;left:8px!important} body .mh-wishlist ul.products{grid-template-columns:repeat(var(--mh-list-cols,1),minmax(0,1fr))!important;gap:14px!important} body .mh-wishlist ul.products li.product{display:grid!important;grid-template-columns:96px minmax(0,1fr)!important;grid-template-rows:auto auto 1fr!important;column-gap:16px!important;padding:12px!important;align-items:start} body .mh-wishlist ul.products li.product a.woocommerce-LoopProduct-link{display:contents!important} body .mh-wishlist ul.products li.product a.woocommerce-LoopProduct-link img{grid-column:1!important;grid-row:1 / 4!important;width:96px!important;height:96px!important;aspect-ratio:1/1;margin:0!important;padding:6px!important;border:1px solid var(--mh-line);border-radius:12px!important} body .mh-wishlist ul.products li.product .price{grid-column:2!important;grid-row:1!important;padding:0!important;margin:4px 0 2px!important} body .mh-wishlist ul.products li.product .woocommerce-loop-product__title{grid-column:2!important;grid-row:2!important;padding:0!important;margin:0 0 6px!important} body .mh-wishlist ul.products li.product .mh-card-bar{grid-column:2!important;grid-row:3!important;padding:4px 0 0!important;align-self:end!important;margin:0!important} body .mh-wishlist ul.products li.product .onsale{top:8px!important;left:8px!important} body .mh-cart-cross ul.products{grid-template-columns:repeat(var(--mh-list-cols,1),minmax(0,1fr))!important;gap:14px!important} body .mh-cart-cross ul.products li.product{display:grid!important;grid-template-columns:96px minmax(0,1fr)!important;grid-template-rows:auto auto 1fr!important;column-gap:16px!important;padding:12px!important;align-items:start} body .mh-cart-cross ul.products li.product a.woocommerce-LoopProduct-link{display:contents!important} body .mh-cart-cross ul.products li.product a.woocommerce-LoopProduct-link img{grid-column:1!important;grid-row:1 / 4!important;width:96px!important;height:96px!important;aspect-ratio:1/1;margin:0!important;padding:6px!important;border:1px solid var(--mh-line);border-radius:12px!important} body .mh-cart-cross ul.products li.product .price{grid-column:2!important;grid-row:1!important;padding:0!important;margin:4px 0 2px!important} body .mh-cart-cross ul.products li.product .woocommerce-loop-product__title{grid-column:2!important;grid-row:2!important;padding:0!important;margin:0 0 6px!important} body .mh-cart-cross ul.products li.product .mh-card-bar{grid-column:2!important;grid-row:3!important;padding:4px 0 0!important;align-self:end!important;margin:0!important} body .mh-cart-cross ul.products li.product .onsale{top:8px!important;left:8px!important} body .mh-arch-grid ul.products,body .mh-wishlist ul.products,body .mh-cart-cross ul.products{--mh-list-cols:1} body .mh-view-switch{display:none!important} } /* phones, home grids (2-up): the eye steps aside so heart + cart fit */ @media (max-width:767px){body .mh-products:not(.mh-arch-grid):not(.mh-wishlist):not(.mh-cart-cross) ul.products li.product .mh-card-bar .mh-qv{display:none!important} body .mh-products:not(.mh-arch-grid):not(.mh-wishlist):not(.mh-cart-cross) ul.products li.product .mh-card-bar .iwcore-heart{margin-right:auto!important} body .mh-products:not(.mh-arch-grid):not(.mh-wishlist):not(.mh-cart-cross) ul.products li.product .mh-card-bar{padding:4px 10px 10px!important}} /* the switcher */ body .mh-view-switch{float:right;display:inline-flex;margin:0 10px 20px 0;border:1px solid var(--mh-line);border-radius:999px;overflow:hidden;background:#fff} body .mh-view-switch button,body.elementor-kit-6 .mh-view-switch button{width:42px!important;height:40px!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;color:var(--mh-muted)!important;display:grid!important;place-items:center!important;box-shadow:none!important;cursor:pointer} body .mh-view-switch button[aria-pressed="true"]{background:var(--mh-choc)!important;color:var(--mh-cream)!important} body .mh-view-switch svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} body .iw-shop-bar .iw-shop-item span.iw-shop-badge,body.elementor-kit-6 .iw-shop-bar button.iw-shop-item span.iw-shop-badge{color:var(--mh-cream)!important;background:var(--mh-choc)!important;font-size:11px!important;font-weight:800!important;line-height:1!important;min-width:18px;height:18px;display:grid;place-items:center;border-radius:999px;padding:0 5px} /* the header scrolls with the page, so the plugin pin placeholder must not take space (it caused a 126px jump) */ body .iw-header-space{display:none!important;height:0!important} /* ================= header doors, Harry & David pattern: icon over label ================= */ @media (min-width:1025px){ body .orca-site-header.mh-chrome .orca-header-right{gap:28px!important;align-items:flex-end!important} body .mh-doors a,body .mh-acct-w .iwcore-acct-btn{display:flex!important;flex-direction:column!important;align-items:center!important;gap:4px!important;font-family:var(--mh-body)!important;font-size:12.5px!important;font-weight:500!important;color:var(--mh-choc)!important;line-height:1.1!important;padding:0!important;background:none!important;box-shadow:none!important;min-width:44px} body .mh-doors svg,body .mh-acct-w .iwcore-acct-btn svg{width:25px!important;height:25px!important;stroke:var(--mh-choc)!important;stroke-width:1.5!important;fill:none} body .mh-doors a:hover,body .mh-acct-w .iwcore-acct-btn:hover{color:var(--mh-gold-deep)!important} body .mh-doors a:hover svg,body .mh-acct-w .iwcore-acct-btn:hover svg{stroke:var(--mh-gold-deep)!important} /* cart: bag icon over "Cart", count on the icon's shoulder */ body .orca-site-header.mh-chrome .orca-cart-slot .elementor-menu-cart__toggle_button,body.elementor-kit-6 .orca-site-header .orca-cart-slot .elementor-menu-cart__toggle_button{display:flex!important;flex-direction:column-reverse!important;align-items:center!important;gap:4px!important;background:none!important;border:0!important;padding:0!important;box-shadow:none!important;color:var(--mh-choc)!important;min-width:44px} body .orca-site-header.mh-chrome .orca-cart-slot .elementor-button-text{font-size:0!important;line-height:1.1} body .orca-site-header.mh-chrome .orca-cart-slot .elementor-button-text::after{content:"Cart";font-family:var(--mh-body);font-size:12.5px;font-weight:500;color:var(--mh-choc)} body .orca-site-header.mh-chrome .orca-cart-slot .elementor-button-icon{position:relative;font-size:24px!important;color:var(--mh-choc)!important} body .orca-site-header.mh-chrome .orca-cart-slot .elementor-button-icon svg,body .orca-site-header.mh-chrome .orca-cart-slot .elementor-button-icon i{width:24px!important;height:24px!important;fill:var(--mh-choc)!important;color:var(--mh-choc)!important} body .orca-site-header.mh-chrome .orca-cart-slot .elementor-button-icon-qty{position:absolute!important;top:-6px!important;right:-10px!important;min-width:18px;height:18px;line-height:18px!important;font-size:11px!important;font-weight:800;border-radius:999px;background:var(--mh-gold)!important;color:var(--mh-choc)!important;padding:0 4px;text-align:center} body .orca-site-header.mh-chrome .orca-cart-slot .elementor-button-icon-qty[data-counter="0"]{display:none!important} } /* the account dropdown, in the skin */ body .mh-acct-w .iwcore-acct-menu{font-family:var(--mh-body);border-color:var(--mh-line);border-radius:10px} body .mh-acct-w .iwcore-acct-menu a{color:var(--mh-ink)!important;font-size:15px} body .mh-acct-w .iwcore-acct-menu a:hover{background:var(--mh-cream)} body .mh-acct-w .iwcore-acct-menu svg{stroke:var(--mh-cocoa)!important} body .mh-acct-w .iwcore-acct-menu .is-sep{border-top-color:var(--mh-line)} /* out of stock: the cart icon, greyed and inert */ body ul.products li.product .mh-card-bar .button:not(.add_to_cart_button),body.elementor-kit-6 ul.products li.product .mh-card-bar .button:not(.add_to_cart_button){background:#EFE9E1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A89A8B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='18' cy='20' r='1.4'/%3E%3Cpath d='M2 3h3l2.6 12.4a1.5 1.5 0 0 0 1.5 1.1h8.8a1.5 1.5 0 0 0 1.5-1.2L21 8H6.2'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E") center/20px no-repeat!important;box-shadow:none!important;pointer-events:none!important;cursor:not-allowed!important} /* Orca's closing "giant fact" band (address in 80px type) on the pages not rebuilt: the fact goes; the bold lead-in becomes the heading, like the home page's final CTA */ body .orca-section.orca-statement .orca-giant-fact{display:none!important} body .orca-section.orca-statement{padding-top:clamp(56px,7vw,88px)!important;padding-bottom:clamp(56px,7vw,88px)!important} body .orca-section.orca-statement .orca-rt p{font-family:var(--mh-body)!important;font-size:17px!important;line-height:1.6!important;color:#E6D8C3!important;max-width:58ch;margin:0 auto!important} body .orca-section.orca-statement .orca-rt p strong:first-child{display:block;font-family:var(--mh-display);font-size:clamp(28px,3.4vw,42px);font-weight:650;line-height:1.1;color:var(--mh-cream)!important;margin:0 0 14px;font-variation-settings:"SOFT" 100} body .orca-section.orca-statement .orca-rt p strong:first-child::first-letter{text-transform:uppercase} /* the footer sits at the bottom of short pages */ body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column} body>*{flex-shrink:0} body>.elementor-location-footer,body>footer{margin-top:auto!important} @media (min-width:1025px){body.iw-has-shop-bar,body.iw-has-cta-bar{padding-bottom:0!important}} /* ================= checkout, redone (one owner per element) ================= */ body .mh-wc-checkout{--co-line:var(--mh-line);font-family:var(--mh-body)} /* reset every box earlier rounds drew */ body .mh-wc-checkout .e-checkout__column-inner>*,body .mh-wc-checkout .col-1,body .mh-wc-checkout .col-2,body .mh-wc-checkout .woocommerce-billing-fields,body .mh-wc-checkout .woocommerce-shipping-fields,body .mh-wc-checkout .shipping_address,body .mh-wc-checkout .woocommerce-additional-fields,body .mh-wc-checkout #order_review,body .mh-wc-checkout .woocommerce-checkout-payment,body .mh-wc-checkout .e-coupon-box,body .mh-wc-checkout .e-checkout__order_review,body .mh-wc-checkout .e-checkout__order_review-2,body .mh-wc-checkout .iwcore-addons,body .mh-wc-checkout .iwcore-tip-jar,body .mh-wc-checkout .iwcore-fsb,body .mh-wc-checkout .iwcore-schedule,body .mh-wc-checkout table.shop_table{border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;margin:0!important;width:auto!important;float:none!important} body .mh-wc-checkout .e-checkout__container{display:grid!important;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)!important;gap:32px!important;align-items:start} body .mh-wc-checkout .e-checkout__column-inner{display:flex!important;flex-direction:column;gap:0!important} /* the two cards on the left, the one card on the right */ body .mh-wc-checkout .col-1,body .mh-wc-checkout .col-2,body .mh-wc-checkout .e-checkout__column-end .e-checkout__column-inner{background:#fff!important;border:1px solid var(--co-line)!important;border-radius:16px!important;padding:26px 28px!important} body .mh-wc-checkout .col-2{margin-top:20px!important} body .mh-wc-checkout #customer_details{display:block} /* headings */ body .mh-wc-checkout h3,body .mh-wc-checkout #order_review_heading,body .mh-wc-checkout .iwcore-schedule-h{font-family:var(--mh-display)!important;font-size:22px!important;font-weight:650!important;color:var(--mh-choc)!important;margin:0 0 18px!important;padding:0!important;line-height:1.2!important;text-transform:none!important;letter-spacing:0!important} /* fields: one grid, one input style */ body .mh-wc-checkout .woocommerce-billing-fields__field-wrapper,body .mh-wc-checkout .woocommerce-shipping-fields__field-wrapper{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:14px 14px!important} body .mh-wc-checkout .woocommerce-billing-fields__field-wrapper>.form-row,body .mh-wc-checkout .woocommerce-shipping-fields__field-wrapper>.form-row{grid-column:span 6;width:auto!important;float:none!important;margin:0!important;padding:0!important} body .mh-wc-checkout [id$="_first_name_field"],body .mh-wc-checkout [id$="_last_name_field"],body .mh-wc-checkout #billing_email_field,body .mh-wc-checkout #billing_phone_field{grid-column:span 3!important} body .mh-wc-checkout [id$="_city_field"],body .mh-wc-checkout [id$="_state_field"],body .mh-wc-checkout [id$="_postcode_field"]{grid-column:span 2!important} body .mh-wc-checkout [id$="_first_name_field"]{order:1}body .mh-wc-checkout [id$="_last_name_field"]{order:2} body .mh-wc-checkout #billing_email_field{order:3}body .mh-wc-checkout #billing_phone_field{order:4} body .mh-wc-checkout [id$="_country_field"]{order:5}body .mh-wc-checkout [id$="_address_1_field"]{order:6}body .mh-wc-checkout [id$="_address_2_field"]{order:7} body .mh-wc-checkout [id$="_city_field"]{order:8}body .mh-wc-checkout [id$="_state_field"]{order:9}body .mh-wc-checkout [id$="_postcode_field"]{order:10} body .mh-wc-checkout [id$="_company_field"]{order:11} body .mh-wc-checkout .form-row label{display:block;font-size:13.5px!important;font-weight:600!important;color:var(--mh-choc)!important;margin:0 0 6px!important;line-height:1.2!important} body .mh-wc-checkout .form-row label .required{color:var(--mh-rose)!important;text-decoration:none} body .mh-wc-checkout .form-row label.screen-reader-text{position:absolute!important;clip:rect(0 0 0 0);height:1px;width:1px;overflow:hidden} body .mh-wc-checkout .woocommerce-input-wrapper{display:block;width:100%} body .mh-wc-checkout input.input-text,body .mh-wc-checkout select,body .mh-wc-checkout textarea,body .mh-wc-checkout .select2-selection--single,body .mh-wc-checkout .iwcore-schedule input,body .mh-wc-checkout #iwcore_tip{width:100%!important;box-sizing:border-box!important;height:48px!important;min-height:48px!important;padding:0 14px!important;border:1px solid var(--co-line)!important;border-radius:10px!important;background:#fff!important;font-family:var(--mh-body)!important;font-size:15.5px!important;color:var(--mh-ink)!important;box-shadow:none!important;line-height:46px} body .mh-wc-checkout textarea{height:88px!important;padding:12px 14px!important;line-height:1.5} body .mh-wc-checkout input.input-text:focus,body .mh-wc-checkout select:focus,body .mh-wc-checkout textarea:focus{border-color:var(--mh-choc)!important;outline:2px solid rgba(233,169,27,.35)} body .mh-wc-checkout input::placeholder,body .mh-wc-checkout textarea::placeholder{color:#B3A594} body .mh-wc-checkout .select2-selection__rendered{line-height:46px!important;padding:0!important} body .mh-wc-checkout .select2-selection__arrow{height:46px!important} /* ship elsewhere: a quiet checkbox line */ body .mh-wc-checkout #ship-to-different-address{font-family:var(--mh-body)!important;font-size:15px!important;font-weight:600!important;margin:0 0 4px!important} body .mh-wc-checkout #ship-to-different-address label{display:flex;gap:10px;align-items:center;cursor:pointer} body .mh-wc-checkout .shipping_address{margin-top:16px!important} body .mh-wc-checkout .woocommerce-additional-fields{margin-top:18px!important;padding-top:18px!important;border-top:1px solid var(--co-line)!important} body .mh-wc-checkout .woocommerce-shipping-fields:not(:has(input:checked))+.woocommerce-additional-fields{margin-top:14px!important} /* pickup time: a section of the same card */ body .mh-wc-checkout .iwcore-schedule{display:grid!important;grid-template-columns:1fr 1fr;gap:12px 14px!important;margin-top:20px!important;padding-top:20px!important;border-top:1px solid var(--co-line)!important} body .mh-wc-checkout .iwcore-schedule .iwcore-schedule-h,body .mh-wc-checkout .iwcore-schedule .iwcore-schedule-hint{grid-column:1/-1} body .mh-wc-checkout .iwcore-schedule .form-row{width:auto!important;float:none!important;margin:0!important;padding:0!important} body .mh-wc-checkout .iwcore-schedule-hint:empty{display:none} /* order card */ body .mh-wc-checkout table.shop_table{width:100%!important;border-collapse:collapse!important} body .mh-wc-checkout table.shop_table th,body .mh-wc-checkout table.shop_table td{background:transparent!important;border:0!important;border-bottom:1px solid var(--co-line)!important;padding:12px 0!important;font-size:15px!important;text-transform:none!important;letter-spacing:0!important;color:var(--mh-ink)!important;vertical-align:top} body .mh-wc-checkout table.shop_table thead{display:none} body .mh-wc-checkout table.shop_table td.product-total,body .mh-wc-checkout table.shop_table tfoot td{text-align:right;font-weight:700} body .mh-wc-checkout table.shop_table tfoot th{font-weight:600;color:var(--mh-muted)!important} body .mh-wc-checkout table.shop_table .order-total th,body .mh-wc-checkout table.shop_table .order-total td{font-size:19px!important;font-weight:800!important;color:var(--mh-choc)!important;border-bottom:0!important} body .mh-wc-checkout #shipping_method{list-style:none;margin:0;padding:0;display:grid;gap:6px;text-align:left} body .mh-wc-checkout #shipping_method li{display:flex;gap:8px;align-items:center;font-weight:600;justify-content:flex-end} body .mh-wc-checkout input[type=radio],body .mh-wc-checkout input[type=checkbox]{accent-color:var(--mh-choc);width:17px;height:17px;margin:0} /* coupon: one small line */ body .mh-wc-checkout .e-coupon-box{padding:14px 0!important;border-bottom:1px solid var(--co-line)!important} body .mh-wc-checkout .e-woocommerce-coupon-nudge,body .mh-wc-checkout .e-woocommerce-coupon-nudge a{font-family:var(--mh-body)!important;font-size:14.5px!important;font-weight:600!important;color:var(--mh-cocoa)!important;margin:0!important;line-height:1.4!important} /* extras: sections separated by rules, not boxes */ body .mh-wc-checkout .iwcore-addons,body .mh-wc-checkout .iwcore-tip-jar{padding:16px 0!important;border-bottom:1px solid var(--co-line)!important} body .mh-wc-checkout .iwcore-addons .form-row{margin:0 0 10px!important;padding:0!important} body .mh-wc-checkout .iwcore-addons .form-row:last-of-type{margin-bottom:0!important} body .mh-wc-checkout .iwcore-addons label{display:flex!important;gap:10px;align-items:center;font-weight:600;font-size:15px;color:var(--mh-choc)!important;margin:0!important} body .mh-wc-checkout .iwcore-addon-note{margin-top:8px!important} body .mh-wc-checkout .iwcore-tip-jar label{font-size:15px!important;font-weight:600!important;color:var(--mh-choc)!important;margin:0 0 8px!important;display:block} body .mh-wc-checkout .iwcore-fsb{padding:16px 0!important;border-bottom:1px solid var(--co-line)!important} body .mh-wc-checkout .iwcore-fsb-msg{font-size:14.5px!important;margin:0 0 8px!important} /* payment + place order */ body .mh-wc-checkout #payment{padding-top:16px!important} body .mh-wc-checkout #payment .wc_payment_methods{border:0!important;padding:0!important;margin:0 0 12px!important} body .mh-wc-checkout #payment .woocommerce-info,body .mh-wc-checkout #payment .woocommerce-notice{background:var(--mh-cream)!important;border:0!important;border-radius:10px;padding:12px 14px!important;font-size:14px;color:var(--mh-ink)!important;margin:0!important} body .mh-wc-checkout #payment .woocommerce-info::before{display:none} body .mh-wc-checkout .woocommerce-privacy-policy-text p{font-size:12.5px;color:var(--mh-muted);margin:8px 0} body .mh-wc-checkout .woocommerce-terms-and-conditions-wrapper label{font-size:14px;display:flex;gap:10px;align-items:center} body .mh-wc-checkout #place_order.button,body.elementor-kit-6 .mh-wc-checkout #place_order.button{width:100%!important;height:56px!important;margin-top:14px!important;border-radius:999px!important;border:0!important;background:var(--mh-gold)!important;color:var(--mh-choc)!important;font-family:var(--mh-body)!important;font-size:17px!important;font-weight:800!important;opacity:1!important;box-shadow:0 8px 20px -10px rgba(201,138,10,.9)!important} body .mh-wc-checkout #place_order.button:hover{background:#F2B62C!important} @media (max-width:900px){ body .mh-wc-checkout .e-checkout__container{grid-template-columns:1fr!important} body .mh-wc-checkout .col-1,body .mh-wc-checkout .col-2,body .mh-wc-checkout .e-checkout__column-end .e-checkout__column-inner{padding:20px!important} } @media (max-width:560px){ body .mh-wc-checkout [id$="_first_name_field"],body .mh-wc-checkout [id$="_last_name_field"],body .mh-wc-checkout #billing_email_field,body .mh-wc-checkout #billing_phone_field{grid-column:span 6!important} body .mh-wc-checkout [id$="_city_field"]{grid-column:span 6!important} body .mh-wc-checkout [id$="_state_field"],body .mh-wc-checkout [id$="_postcode_field"]{grid-column:span 3!important} } body .mh-wc-checkout .woocommerce-billing-fields__field-wrapper>p.form-row,body .mh-wc-checkout .woocommerce-shipping-fields__field-wrapper>p.form-row,body .mh-wc-checkout .iwcore-schedule>p.form-row{width:100%!important;max-width:none!important;min-width:0!important} body .mh-wc-checkout .woocommerce-billing-fields__field-wrapper>p.form-row .woocommerce-input-wrapper,body .mh-wc-checkout .woocommerce-billing-fields__field-wrapper>p.form-row input,body .mh-wc-checkout .woocommerce-billing-fields__field-wrapper>p.form-row select,body .mh-wc-checkout .iwcore-schedule input{width:100%!important;max-width:none!important} body .mh-wc-checkout #place_order,body .mh-wc-checkout button#place_order{background:var(--mh-gold)!important;background-color:var(--mh-gold)!important;color:var(--mh-choc)!important;border-color:var(--mh-gold)!important} /* sticky add-to-cart: the phone action bar offset applies on phones only */ @media (min-width:1025px){body.iw-has-shop-bar .iwcore-sticky,body .iwcore-sticky{bottom:0!important}} body .iwcore-sticky-btn,body.elementor-kit-6 .iwcore-sticky-btn{border-radius:999px!important} /* checkout field order and spans, at id weight (Elementor places these by id) */ body .mh-wc-checkout .woocommerce-billing-fields__field-wrapper>p#billing_first_name_field{grid-column:span 3!important;order:1!important} body .mh-wc-checkout .woocommerce-billing-fields__field-wrapper>p#billing_last_name_field{grid-column:span 3!important;order:2!important} body .mh-wc-checkout .woocommerce-billing-fields__field-wrapper>p#billing_email_field{grid-column:span 3!important;order:3!important} body .mh-wc-checkout .woocommerce-billing-fields__field-wrapper>p#billing_phone_field{grid-column:span 3!important;order:4!important} body .mh-wc-checkout .woocommerce-billing-fields__field-wrapper>p#billing_country_field{grid-column:span 6!important;order:5!important} body .mh-wc-checkout .woocommerce-billing-fields__field-wrapper>p#billing_address_1_field{grid-column:span 4!important;order:6!important} body .mh-wc-checkout .woocommerce-billing-fields__field-wrapper>p#billing_address_2_field{grid-column:span 2!important;align-self:end;order:7!important} body .mh-wc-checkout .woocommerce-billing-fields__field-wrapper>p#billing_city_field{grid-column:span 2!important;order:8!important} body .mh-wc-checkout .woocommerce-billing-fields__field-wrapper>p#billing_state_field{grid-column:span 2!important;order:9!important} body .mh-wc-checkout .woocommerce-billing-fields__field-wrapper>p#billing_postcode_field{grid-column:span 2!important;order:10!important} body .mh-wc-checkout .woocommerce-billing-fields__field-wrapper>p#billing_company_field{grid-column:span 6!important;order:11!important} body .mh-wc-checkout .woocommerce-shipping-fields__field-wrapper>p#shipping_first_name_field{grid-column:span 3!important;order:1!important} body .mh-wc-checkout .woocommerce-shipping-fields__field-wrapper>p#shipping_last_name_field{grid-column:span 3!important;order:2!important} body .mh-wc-checkout .woocommerce-shipping-fields__field-wrapper>p#shipping_country_field{grid-column:span 6!important;order:5!important} body .mh-wc-checkout .woocommerce-shipping-fields__field-wrapper>p#shipping_address_1_field{grid-column:span 4!important;order:6!important} body .mh-wc-checkout .woocommerce-shipping-fields__field-wrapper>p#shipping_address_2_field{grid-column:span 2!important;align-self:end;order:7!important} body .mh-wc-checkout .woocommerce-shipping-fields__field-wrapper>p#shipping_city_field{grid-column:span 2!important;order:8!important} body .mh-wc-checkout .woocommerce-shipping-fields__field-wrapper>p#shipping_state_field{grid-column:span 2!important;order:9!important} body .mh-wc-checkout .woocommerce-shipping-fields__field-wrapper>p#shipping_postcode_field{grid-column:span 2!important;order:10!important} body .mh-wc-checkout .woocommerce-shipping-fields__field-wrapper>p#shipping_company_field{grid-column:span 6!important;order:11!important} @media (max-width:560px){body .mh-wc-checkout .woocommerce-billing-fields__field-wrapper>p#billing_first_name_field{grid-column:span 6!important}body .mh-wc-checkout .woocommerce-billing-fields__field-wrapper>p#billing_last_name_field{grid-column:span 6!important}body .mh-wc-checkout .woocommerce-billing-fields__field-wrapper>p#billing_email_field{grid-column:span 6!important}body .mh-wc-checkout .woocommerce-billing-fields__field-wrapper>p#billing_phone_field{grid-column:span 6!important}body .mh-wc-checkout .woocommerce-billing-fields__field-wrapper>p#billing_city_field{grid-column:span 6!important}body .mh-wc-checkout .woocommerce-billing-fields__field-wrapper>p#billing_state_field{grid-column:span 3!important}body .mh-wc-checkout .woocommerce-billing-fields__field-wrapper>p#billing_postcode_field{grid-column:span 3!important}} body .mh-wc-checkout #payment #place_order,body .mh-wc-checkout #payment button#place_order.button.alt{background:var(--mh-gold)!important;background-color:var(--mh-gold)!important;color:var(--mh-choc)!important;border:0!important;opacity:1!important} /* the "Cart" label belongs to the header icon only, not the mini-cart's buttons */ body .orca-site-header .orca-cart-slot .elementor-menu-cart__footer-buttons .elementor-button-text{font-size:15px!important;line-height:1.2} body .orca-site-header .orca-cart-slot .elementor-menu-cart__footer-buttons .elementor-button-text::after{content:none!important} body .elementor-menu-cart__main::before{padding-top:18px} /* card icons drawn by CSS as well: some widgets (Elementor's Products on the cart page) strip inline SVG */ body ul.products li.product .mh-card-bar .iwcore-heart:not(:has(svg)){background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B1B10' stroke-width='1.8'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1.1L12 21l7.8-7.5 1-1.1a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E") center/19px no-repeat!important} body ul.products li.product .mh-card-bar .iwcore-heart[aria-pressed="true"]:not(:has(svg)){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23B23A48' stroke='%23B23A48' stroke-width='1.8'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1.1L12 21l7.8-7.5 1-1.1a5.5 5.5 0 0 0 0-7.8z'/%3E%3C/svg%3E")!important} body ul.products li.product .mh-card-bar .mh-qv:not(:has(svg)){background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B1B10' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center/19px no-repeat!important} /* ================= mega menu, restyled ================= */ body .mh-megabar{position:relative;z-index:150} body .mh-mega-panel{z-index:200!important;border-top:0!important;background:var(--mh-paper)!important;box-shadow:0 30px 50px -24px rgba(43,27,16,.45)!important} body .mh-mega-panel::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--mh-gold)} body .mh-mega-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.15fr)!important;gap:0!important;padding-top:30px!important;padding-bottom:30px!important} body .mh-mega-col{padding:0 32px;border-right:1px solid var(--mh-line)} body .mh-mega-col:first-child{padding-left:0} body .mh-mega-h{font-size:12px!important;letter-spacing:.16em!important;margin:0 0 14px!important;color:var(--mh-gold-deep)!important} body .mh-mega-col ul{gap:2px!important} body .mh-mega-col a{display:flex!important;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 10px;margin:0 -10px;border-radius:8px;font-size:15.5px!important;color:var(--mh-ink)!important;text-decoration:none!important;transition:background .12s,color .12s} body .mh-mega-col a:hover{background:var(--mh-cream);color:var(--mh-choc)!important} body .mh-mega-col a:hover span{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--mh-gold)} body .mh-mega-date{font-style:normal;font-size:12.5px;font-weight:700;color:var(--mh-gold-deep);white-space:nowrap} body .mh-mega-dated li:first-child a{background:var(--mh-cream)} body .mh-mega-dated li:first-child a span{font-weight:700;color:var(--mh-choc)} body .mh-mega-dated li[hidden]{display:none!important} /* the feature: a real card, not an empty box */ body .mh-mega-feature{display:flex!important;flex-direction:column;align-self:start;margin-left:32px;padding:0!important;background:#fff!important;border:1px solid var(--mh-line);border-radius:16px!important;overflow:hidden;text-decoration:none!important;transition:box-shadow .2s,transform .2s} body .mh-mega-feature:hover{box-shadow:var(--mh-shadow);transform:translateY(-2px)} body .mh-mega-feature img{width:100%!important;height:170px!important;object-fit:contain!important;background:#fff;padding:14px!important;border-radius:0!important;grid-row:auto!important} body .mh-mega-feature-title{padding:14px 18px 2px;margin:0!important;font-size:20px!important;border-top:1px solid var(--mh-line)} body .mh-mega-feature-cta{padding:4px 18px 16px;font-size:14.5px!important} /* "shop all" sits under the first column, as a quiet link */ body .mh-mega-all{position:static!important;grid-column:1 / 3;margin-top:18px;padding-top:14px;border-top:1px solid var(--mh-line);font-size:14px!important} body .mh-mega-inner{padding-bottom:26px!important} /* the product gallery's zoom button stays under the menu */ body .woocommerce-product-gallery__trigger{z-index:5!important} body .mh-mega-feature-title{display:block!important} /* home rhythm (Nick): dark hero → dark trust bar → light seasonal band, then paper/cream alternating to the dark close */ body .mh-hero-video+.mh-trust{background:var(--mh-choc)!important;color:var(--mh-cream)!important;border-bottom:0!important} body .mh-hero-video+.mh-trust .mh-ico svg{stroke:var(--mh-gold)!important} body .e-con.mh.mh-season.mh-cream{background:var(--mh-cream)!important;color:var(--mh-ink)} body .mh.mh-season.mh-cream .mh-h2.elementor-widget-heading .elementor-heading-title{color:var(--mh-choc)} body .mh.mh-season.mh-cream .mh-eyebrow.elementor-widget-heading .elementor-heading-title{color:var(--mh-rose)} body .mh.mh-season.mh-cream .mh-lead{color:var(--mh-muted)} body .mh.mh-season.mh-cream .mh-products ul.products li.product{border-color:var(--mh-line)!important} body .mh-hero-video .mh-hero-copy{padding-bottom:4px} /* in-place filtering: the results dim while the next set loads */ body .mh-arch-body.is-loading .mh-shop-main{opacity:.45;pointer-events:none;transition:opacity .15s} body .mh-arch-body .mh-shop-main{transition:opacity .2s} /* no category description: the title takes the whole row */ body .mh .e-con.mh-arch-intro:not(:has(.mh-arch-desc p)){grid-template-columns:1fr!important} body .mh .e-con.mh-arch-intro:not(:has(.mh-arch-desc p)) .mh-arch-title .elementor-heading-title{max-width:none} /* one or two feature cards in a mega panel */ body .mh-mega-features{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:16px;margin-left:32px;align-self:start} body .mh-mega-features .mh-mega-feature{margin-left:0!important} body .mh-mega-features:has(.mh-mega-feature+.mh-mega-feature) .mh-mega-feature img{height:130px!important} body .mh-mega-features:has(.mh-mega-feature+.mh-mega-feature) .mh-mega-feature-title{font-size:17px!important} /* one or two feature cards in a mega panel */ body .mh-mega-features{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:16px;margin-left:32px;align-self:start} body .mh-mega-features .mh-mega-feature{margin-left:0!important} body .mh-mega-features:has(.mh-mega-feature+.mh-mega-feature) .mh-mega-feature img{height:130px!important} body .mh-mega-features:has(.mh-mega-feature+.mh-mega-feature) .mh-mega-feature-title{font-size:17px!important} /* no results */ body .mh-empty{padding:56px 24px;text-align:center;background:var(--mh-cream);border:1px solid var(--mh-line);border-radius:14px} body .mh-empty h2{font-family:Fraunces,serif;font-size:clamp(24px,3vw,30px);margin:0 0 10px;color:var(--mh-ink)} body .mh-empty p{max-width:460px;margin:0 auto 18px;color:var(--mh-muted)} body .mh-empty p a{color:var(--mh-rose);font-weight:700} body .mh-empty .mh-empty-go{margin:0} body .mh-empty .mh-btn{display:inline-block;padding:12px 26px;border-radius:999px;background:var(--mh-gold);color:var(--mh-ink)!important;font-weight:700;text-decoration:none} body .mh-empty .mh-empty-go{margin:0 auto} @media (max-width:900px){body .mh-empty{margin-top:12px;padding:40px 20px}} /* show more (replaces page numbers) */ body .mh-more{display:block;margin:28px auto 8px;padding:13px 30px;border:1.5px solid var(--mh-choc);border-radius:999px;background:transparent;color:var(--mh-choc);font-weight:700;font-size:15px;cursor:pointer} body .mh-more:hover{background:var(--mh-choc);color:var(--mh-cream)}body .mh-more:disabled{opacity:.6;cursor:default} /* product page extras */ body .e-con.mh-pd-top{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 20px} body .mh-pd-nav{flex:0 1 460px}body .mh-pd-top .mh-crumbs{flex:1 1 auto} body .mh-pd-badge .iwcore-badge-single{margin:0 0 6px} body .mh-pd-share .iwcore-share{color:var(--mh-choc)} body .e-con.mh.mh-pd-recent{padding-top:0!important}body .mh-pd-recent .iwcore-recent-h{font-family:Fraunces,serif;color:var(--mh-ink)} /* summer heat notice */ body .mh-heat{display:flex;gap:12px;align-items:center;justify-content:center;padding:9px 16px;background:#fff1c7;color:var(--mh-ink);font-size:14px;text-align:center} body .mh-heat button{border:0;background:none;font-size:18px;line-height:1;cursor:pointer;color:inherit;opacity:.6} /* account dropdown opens over the quick row and mega bar (z 150) */ body .iwcore-acct{z-index:200} /* footer: pages under the logo, shop categories in two columns */ body .orca-foot.mh-foot .orca-foot-links .elementor-widget-container,body .orca-foot.mh-foot .orca-foot-links{display:block!important} body .orca-foot.mh-foot .mh-foot-shop{grid-template-columns:1fr 1fr;gap:10px 32px} body .orca-foot.mh-foot .mh-foot-info{margin-top:20px;gap:8px} /* ===== footer, round 2: a top band, three balanced columns, one reading order ===== */ body .orca-foot.mh-foot{padding-top:0!important} body .orca-foot.mh-foot .e-con.mh-foot-cta{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px; padding:56px 0 44px!important;margin-bottom:48px;border-bottom:1px solid rgba(230,216,195,.16)} body .orca-foot.mh-foot .mh-foot-kicker{margin:0 0 8px;color:var(--mh-gold)!important;font:700 13px/1 var(--mh-body);letter-spacing:.16em;text-transform:uppercase} body .orca-foot.mh-foot .mh-foot-say{margin:0;font-family:Fraunces,serif;font-weight:600;font-size:clamp(28px,3.2vw,42px);line-height:1.12;color:var(--mh-cream)!important;max-width:18ch} body .orca-foot.mh-foot .mh-foot-btns{display:flex;flex-wrap:wrap;gap:12px} body .orca-foot.mh-foot .mh-fbtn{display:inline-flex;align-items:center;padding:14px 26px;border-radius:999px;font-weight:700;font-size:15px;text-decoration:none!important} body .orca-foot.mh-foot .mh-fbtn-gold{background:var(--mh-gold);color:var(--mh-choc)!important} body .orca-foot.mh-foot .mh-fbtn-gold:hover{background:#f3bd3c;color:var(--mh-choc)!important} body .orca-foot.mh-foot .mh-fbtn-line{box-shadow:inset 0 0 0 1.5px rgba(230,216,195,.55);color:var(--mh-cream)!important} body .orca-foot.mh-foot .mh-fbtn-line:hover{box-shadow:inset 0 0 0 1.5px var(--mh-gold);color:var(--mh-gold)!important} /* three columns of equal standing: brand | shop | visit */ body .orca-foot.mh-foot .e-con.orca-foot-top{display:grid!important;grid-template-columns:1.15fr 1fr 1fr;gap:48px 64px;align-items:start} body .orca-foot.mh-foot .e-con.orca-foot-top>.e-con{width:auto!important;max-width:none!important;padding:0!important} body .orca-foot.mh-foot .orca-foot-blurb p{max-width:34ch;margin:14px 0 0;color:#E6D8C3;line-height:1.6} body .orca-foot.mh-foot .mh-foot-info{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 0;font-size:14px} body .orca-foot.mh-foot .mh-foot-info li{display:inline-flex;align-items:center} body .orca-foot.mh-foot .mh-foot-info li+li::before{content:"";width:3px;height:3px;border-radius:50%;background:rgba(230,216,195,.45);margin:0 10px} body .orca-foot.mh-foot .mh-foot-info a{color:#E6D8C3!important} body .orca-foot.mh-foot .orca-foot-social{margin-top:22px} body .orca-foot.mh-foot .orca-foot-eyebrow p{margin:0 0 16px!important} body .orca-foot.mh-foot .mh-foot-shop{gap:12px 28px} body .orca-foot.mh-foot .mh-foot-shop a{font-size:15.5px} body .orca-foot.mh-foot .orca-foot-phone p{margin:0} body .orca-foot.mh-foot .orca-foot-phone a{font-family:Fraunces,serif;font-size:28px;font-weight:600} body .orca-foot.mh-foot .mh-foot-open{display:inline-flex;align-items:center;gap:8px;margin:10px 0 4px!important;font-size:13px;font-weight:700;color:#E6D8C3} body .orca-foot.mh-foot .mh-foot-open::before{content:"";width:8px;height:8px;border-radius:50%;background:#c9a27a} body .orca-foot.mh-foot .mh-foot-open.is-open::before{background:#6fcf7b;box-shadow:0 0 0 4px rgba(111,207,123,.18)} body .orca-foot.mh-foot .orca-foot-legal-row{margin-top:56px!important;padding-top:22px!important} @media (max-width:1024px){body .orca-foot.mh-foot .e-con.orca-foot-top{grid-template-columns:1fr 1fr}body .orca-foot.mh-foot .orca-foot-brand{grid-column:1/-1}} @media (max-width:640px){body .orca-foot.mh-foot .e-con.orca-foot-top{grid-template-columns:1fr;gap:40px}body .orca-foot.mh-foot .e-con.mh-foot-cta{padding:40px 0 32px!important;margin-bottom:36px} body .orca-foot.mh-foot .mh-fbtn{flex:1 1 100%;justify-content:center}} /* tag cloud: small, under Shop in the footer */ body .orca-foot.mh-foot .mh-foot-tags{margin-top:26px} body .orca-foot.mh-foot .iwcore-tags{margin:0} body .orca-foot.mh-foot .iwcore-tags-h{margin:0 0 8px;color:var(--mh-gold);font:700 11px/1 var(--mh-body);letter-spacing:.14em;text-transform:uppercase} body .orca-foot.mh-foot .iwcore-tags ul{display:flex;flex-wrap:wrap;gap:4px 5px;margin:0;padding:0;list-style:none} body .orca-foot.mh-foot a.iwcore-tag{padding:2px 9px;border:1px solid rgba(230,216,195,.22);border-radius:999px;color:#CDBFAA!important;font-size:12px!important;font-weight:400!important;line-height:1.6} body .orca-foot.mh-foot a.iwcore-tag.s3{color:var(--mh-cream)!important;border-color:rgba(230,216,195,.4)} body .orca-foot.mh-foot a.iwcore-tag:hover{border-color:var(--mh-gold);color:var(--mh-gold)!important;background:none} /* footer tags: one quiet row; page links spaced, no dots */ body .orca-foot.mh-foot .e-con.mh-foot-tagrow{padding:40px 0 0!important;display:block} body .orca-foot.mh-foot .mh-foot-tags .iwcore-tags{display:flex;align-items:baseline;gap:14px} body .orca-foot.mh-foot .mh-foot-tags .iwcore-tags-h{margin:0;flex:none} body .orca-foot.mh-foot .mh-foot-tags .iwcore-tags ul{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;gap:6px!important} body .orca-foot.mh-foot .mh-foot-tags .iwcore-tags li{display:inline-flex!important;margin:0!important;padding:0!important} body .orca-foot.mh-foot .mh-foot-tags .iwcore-tags li::before{display:none!important} body .orca-foot.mh-foot .mh-foot-info{gap:6px 18px!important} body .orca-foot.mh-foot .mh-foot-info li+li::before{display:none!important} body .orca-foot.mh-foot .orca-foot-legal-row{margin-top:28px!important} @media (max-width:640px){body .orca-foot.mh-foot .mh-foot-tags .iwcore-tags{flex-direction:column;gap:10px}} @media (max-width:1024px){body .orca-foot.mh-foot .orca-foot-brand{align-items:flex-start!important;text-align:left}body .orca-foot.mh-foot .orca-foot-logo,body .orca-foot.mh-foot .orca-foot-logo .elementor-widget-container{text-align:left!important;margin-left:0!important}body .orca-foot.mh-foot .e-con.orca-foot-top>.e-con{gap:12px!important}} /* ===== checkout, round 3: tighter fields; billing, shipping and order options as three cards on the left; a slim summary on the right ===== */ body .mh-wc-checkout .col-1,body .mh-wc-checkout .col-2,body .mh-wc-checkout .iwcore-options,body .mh-wc-checkout .e-checkout__column-end .e-checkout__column-inner{padding:22px 24px!important} body .mh-wc-checkout .iwcore-options{background:#fff;border:1px solid var(--co-line);border-radius:16px;margin-top:20px} body .mh-wc-checkout h3,body .mh-wc-checkout #order_review_heading,body .mh-wc-checkout .iwcore-options-h{font-size:20px!important;margin:0 0 14px!important} body .mh-wc-checkout .woocommerce-billing-fields__field-wrapper,body .mh-wc-checkout .woocommerce-shipping-fields__field-wrapper{gap:10px 12px!important;align-items:end} body .mh-wc-checkout .form-row label{font-size:12.5px!important;margin:0 0 4px!important} body .mh-wc-checkout input.input-text,body .mh-wc-checkout select,body .mh-wc-checkout .select2-selection--single,body .mh-wc-checkout .iwcore-schedule input,body .mh-wc-checkout #iwcore_tip{height:42px!important;min-height:42px!important;font-size:15px!important;padding:0 12px!important} body .mh-wc-checkout .select2-selection__rendered{line-height:40px!important} body .mh-wc-checkout .select2-selection__arrow{height:40px!important} body .mh-wc-checkout textarea{height:70px!important;min-height:70px!important;font-size:15px!important} /* street lines side by side, bottoms aligned */ body .mh-wc-checkout [id$="_address_1_field"]{grid-column:span 4!important} body .mh-wc-checkout [id$="_address_2_field"]{grid-column:span 2!important;align-self:end} body .mh-wc-checkout #shipping_phone_field{order:11;grid-column:span 3!important} /* the shipping card holds only the address now */ body .mh-wc-checkout .col-2{padding-bottom:18px!important} body .mh-wc-checkout #ship-to-different-address{margin:0!important} /* order options */ body .mh-wc-checkout .iwcore-opt-sec{padding:16px 0!important;border-top:1px solid var(--co-line)!important;margin:0!important} body .mh-wc-checkout .iwcore-options-h+.iwcore-opt-sec,body .mh-wc-checkout .iwcore-options-h+.iwcore-opt-sec[hidden]+.iwcore-opt-sec{border-top:0!important;padding-top:0!important} body .mh-wc-checkout .iwcore-opt-sec h4,body .mh-wc-checkout .iwcore-opt-sec .iwcore-schedule-h,body .mh-wc-checkout .iwcore-tip-jar>label{font:700 14px/1.3 var(--mh-body)!important;color:var(--mh-choc)!important;margin:0 0 10px!important;text-transform:none!important;letter-spacing:0!important} body .mh-wc-checkout .iwcore-opt-sec .iwcore-schedule,body .mh-wc-checkout .iwcore-opt-sec .iwcore-addons,body .mh-wc-checkout .iwcore-opt-sec .iwcore-tip-jar,body .mh-wc-checkout .iwcore-opt-sec .woocommerce-additional-fields{margin:0!important;padding:0!important;border:0!important} body .mh-wc-checkout .iwcore-ship-opt{font-size:15px;font-weight:600;color:var(--mh-choc);background:#fff;padding:10px 14px} body .mh-wc-checkout .iwcore-ship-opt.on,body .mh-wc-checkout .iwcore-ship-opt:has(input:checked){background:var(--mh-cream);border-color:var(--mh-choc);box-shadow:inset 0 0 0 1px var(--mh-choc)} body .mh-wc-checkout .iwcore-ship-opt span{display:flex;gap:8px;flex:1;justify-content:space-between} body .mh-wc-checkout .iwcore-tip-custom{gap:8px!important;margin-top:8px!important} body .mh-wc-checkout .iwcore-opt-notes .form-row{margin:0!important} body .mh-wc-checkout .iwcore-opt-notes label{font:700 14px/1.3 var(--mh-body)!important;margin:0 0 8px!important} /* the summary, slim */ body .mh-wc-checkout table.shop_table th,body .mh-wc-checkout table.shop_table td{padding:9px 0!important;font-size:14px!important} body .mh-wc-checkout table.shop_table .order-total th,body .mh-wc-checkout table.shop_table .order-total td{font-size:17px!important} body .mh-wc-checkout .e-coupon-box{padding:10px 0!important} body .mh-wc-checkout .iwcore-fsb{padding:12px 0!important} /* store notices: one calm card with its own icon (the theme's icon font drew a broken box) */ body .mh-wc .woocommerce-notices-wrapper .woocommerce-info,body .mh-wc .woocommerce-notices-wrapper .woocommerce-message,body .mh-wc .woocommerce-notices-wrapper .woocommerce-error,body .mh-wc .woocommerce-NoticeGroup .woocommerce-error{ display:block!important;margin:0 0 20px!important;padding:14px 18px 14px 50px!important;position:relative;border:1px solid #F0D78A!important;border-radius:14px!important; background:#FFF6DC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a3e00' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v5M12 16.5v.5'/%3E%3C/svg%3E") no-repeat 16px center/22px!important; color:var(--mh-ink)!important;font-size:15px!important;line-height:1.45;list-style:none;outline:0!important} body .mh-wc .woocommerce-notices-wrapper .woocommerce-message{background-color:#E9F5EA!important;border-color:#BFE0C2!important} body .mh-wc .woocommerce-notices-wrapper .woocommerce-error,body .mh-wc .woocommerce-NoticeGroup .woocommerce-error{background-color:#FDECEC!important;border-color:#F2B8B5!important} body .mh-wc .woocommerce-notices-wrapper .woocommerce-info::before,body .mh-wc .woocommerce-notices-wrapper .woocommerce-message::before,body .mh-wc .woocommerce-notices-wrapper .woocommerce-error::before,body .mh-wc .woocommerce-notices-wrapper .woocommerce-info::after{content:none!important;display:none!important} /* id weight: Elementor's checkout pins these fields by id */ body .mh-wc-checkout #billing_address_1_field,body .mh-wc-checkout #shipping_address_1_field{grid-column:span 4!important} body .mh-wc-checkout #billing_address_2_field,body .mh-wc-checkout #shipping_address_2_field{grid-column:span 2!important;align-self:end} body .mh-wc-checkout #order_comments_field{width:100%!important;margin:0!important;padding:0!important;float:none!important} body .mh-wc-checkout #order_comments_field textarea{width:100%!important} body .mh-wc-checkout .e-woocommerce-login-section{padding:14px 20px!important;border-radius:14px!important;margin-bottom:20px!important} body .mh-wc-checkout .e-woocommerce-login-section .e-checkout-secondary-title,body .mh-wc-checkout .e-woocommerce-login-section .e-checkout-secondary-title a{font-family:var(--mh-body)!important;font-size:15px!important;font-weight:600!important;margin:0!important} @media (max-width:560px){body .mh-wc-checkout #billing_address_1_field,body .mh-wc-checkout #shipping_address_1_field,body .mh-wc-checkout #billing_address_2_field,body .mh-wc-checkout #shipping_address_2_field{grid-column:span 6!important}} body .mh-wc-checkout .woocommerce-shipping-fields__field-wrapper>p#shipping_phone_field{grid-column:span 3!important;order:11!important} body .mh-wc-checkout p.form-row{max-width:none!important} /* cart coupon: one row, the button never wraps */ body .mh-wc-cart .coupon,body .mh-wc-cart .e-coupon-box .coupon,body .mh-wc-cart .actions .coupon{display:flex!important;gap:10px!important;align-items:center;flex-wrap:nowrap} body .mh-wc-cart .coupon .input-text,body .mh-wc-cart .coupon input[name=coupon_code]{flex:1 1 auto!important;min-width:0!important;width:auto!important;height:44px!important;padding:0 16px!important;font-size:15px!important;border-radius:999px!important} body .mh-wc-cart .coupon button,body .mh-wc-cart button[name=apply_coupon]{flex:0 0 auto!important;white-space:nowrap!important;height:44px!important;padding:0 22px!important;line-height:1!important;font-size:15px!important;border-radius:999px!important;width:auto!important} /* summary, tighter still: lines without rules, one rule above the totals and one above Total */ body .mh-wc-checkout #order_review_heading{font-size:18px!important;margin:0 0 10px!important} body .mh-wc-checkout table.shop_table th,body .mh-wc-checkout table.shop_table td{padding:5px 0!important;font-size:13.5px!important;line-height:1.35!important;border-bottom:0!important} body .mh-wc-checkout table.shop_table tbody tr:last-child td{padding-bottom:10px!important} body .mh-wc-checkout table.shop_table tfoot tr.cart-subtotal th,body .mh-wc-checkout table.shop_table tfoot tr.cart-subtotal td{border-top:1px solid var(--co-line)!important;padding-top:10px!important} body .mh-wc-checkout table.shop_table tfoot th{font-weight:500!important} body .mh-wc-checkout table.shop_table tfoot td{font-weight:600!important} body .mh-wc-checkout table.shop_table .order-total th,body .mh-wc-checkout table.shop_table .order-total td{border-top:1px solid var(--co-line)!important;padding-top:10px!important;font-size:16px!important} body .mh-wc-checkout table.shop_table td.product-name .variation,body .mh-wc-checkout table.shop_table td.product-name dl{margin:2px 0 0!important;font-size:12.5px!important;color:var(--mh-muted)} body .mh-wc-checkout table.shop_table td.product-name .product-quantity{color:var(--mh-muted);font-weight:500} /* rows align by their tops (labels differ in height); the second street line still sits on the first's baseline */ body .mh-wc-checkout .woocommerce-billing-fields__field-wrapper,body .mh-wc-checkout .woocommerce-shipping-fields__field-wrapper{align-items:start!important} body .mh-wc-checkout #billing_address_2_field,body .mh-wc-checkout #shipping_address_2_field{align-self:end!important} body .mh-wc-checkout [id$="_state_field"] label{min-height:15px} /* shipping: phone and business name share the last row */ body .mh-wc-checkout .woocommerce-shipping-fields__field-wrapper>p#shipping_company_field{grid-column:span 3!important;order:12!important} /* tip pills in the brand */ body .mh-wc-checkout .iwcore-tip-h{font:700 14px/1.3 var(--mh-body)!important;color:var(--mh-choc)!important;margin:0 0 10px!important} body .mh-wc-checkout .iwcore-tip-pill span{border-color:var(--co-line)!important;background:#fff;color:var(--mh-choc);font-size:14.5px} body .mh-wc-checkout .iwcore-tip-pill input:checked+span{background:var(--mh-choc)!important;border-color:var(--mh-choc)!important;color:var(--mh-cream)!important} body .mh-wc-checkout .iwcore-tip-pill:hover span{border-color:var(--mh-choc)!important} /* ===== payment: one clear section, card fields that look like the rest of the form ===== */ body .mh-wc-checkout #payment,body .mh-wc-checkout .woocommerce-checkout-payment{background:transparent!important;border-radius:0!important;padding:16px 0 0!important} body .mh-wc-checkout #payment::before{content:"Payment";display:block;font:700 15px/1.3 var(--mh-body);color:var(--mh-choc);margin:0 0 10px} body .mh-wc-checkout #payment ul.payment_methods{padding:0!important;margin:0 0 14px!important;border:0!important;list-style:none} body .mh-wc-checkout #payment ul.payment_methods>li{margin:0!important;padding:0!important;list-style:none} body .mh-wc-checkout #payment ul.payment_methods>li>label{display:flex!important;align-items:center;gap:8px;margin:0 0 8px!important;font:700 14px/1.3 var(--mh-body)!important;color:var(--mh-choc)!important} body .mh-wc-checkout #payment ul.payment_methods>li>label::after{content:"";width:14px;height:14px;margin-left:auto;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b645b' stroke-width='2' stroke-linecap='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") no-repeat center/contain} body .mh-wc-checkout #payment ul.payment_methods>li:only-child>input.input-radio{display:none!important} body .mh-wc-checkout #payment div.payment_box{background:#fff!important;border:1px solid var(--co-line)!important;border-radius:14px!important;padding:14px!important;margin:0!important;color:var(--mh-ink)!important} body .mh-wc-checkout #payment div.payment_box::before{display:none!important} body .mh-wc-checkout #payment div.payment_box>p{font-size:12.5px!important;color:var(--mh-muted)!important;margin:0 0 12px!important} body .mh-wc-checkout #clv-applepay:empty,body .mh-wc-checkout #clv-gpay:empty{display:none!important} body .mh-wc-checkout #clv-gpay,body .mh-wc-checkout #clv-applepay{width:100%!important;max-width:none!important;height:48px!important;margin:0 0 12px!important;border-radius:10px;overflow:hidden} body .mh-wc-checkout #clv-gpay iframe,body .mh-wc-checkout #clv-applepay iframe{height:48px!important;width:100%!important} body .mh-wc-checkout .clv-or{margin:2px 0 12px!important;font-size:12px!important;color:var(--mh-muted)!important} body .mh-wc-checkout .clv-or span{background:var(--co-line)!important} body .mh-wc-checkout .clv-fields{display:grid!important;grid-template-columns:1.3fr 1fr 1fr;gap:10px!important} body .mh-wc-checkout .clv-fields>#clv-card-number{grid-column:1/-1} body .mh-wc-checkout .clv-fields>div[id^="clv-card"]{height:46px!important;border:1px solid var(--co-line)!important;border-radius:10px!important;background:#fff!important;padding:0 12px!important;display:flex!important;align-items:center!important} body .mh-wc-checkout .clv-fields>div[id^="clv-card"]:focus-within{border-color:var(--mh-choc)!important;box-shadow:0 0 0 3px rgba(233,169,27,.25)} body .mh-wc-checkout .clv-fields>div[id^="clv-card"] iframe{height:30px!important;margin:0!important} body .mh-wc-checkout .clv-error{grid-column:1/-1;margin:0!important} body .mh-wc-checkout .clv-error:empty{display:none} body .mh-wc-checkout .form-row.place-order{padding:0!important;margin:16px 0 0!important;background:transparent!important;display:block!important} body .mh-wc-checkout .woocommerce-privacy-policy-text p{font-size:12px!important;line-height:1.5!important;color:var(--mh-muted)!important;margin:0 0 10px!important} body .mh-wc-checkout .woocommerce-terms-and-conditions-wrapper .form-row{margin:0 0 4px!important;padding:0!important} body .mh-wc-checkout .woocommerce-terms-and-conditions-wrapper label{font-size:13.5px!important;color:var(--mh-ink)!important} body .mh-wc-checkout .woocommerce-terms-and-conditions-wrapper a{color:var(--mh-choc)!important;text-decoration:underline} body .mh-wc-checkout table.shop_table tr.woocommerce-shipping-totals td{color:var(--mh-ink)!important} body .mh-wc-checkout .clv-fields>div[id^="clv-card"] iframe{margin-top:12px!important} body .mh-wc-checkout table.shop_table td.product-total,body .mh-wc-checkout table.shop_table td.product-total *{color:var(--mh-ink)!important} /* ===== footer, round 3: one left edge, tops aligned, even rhythm ===== */ body .orca-foot.mh-foot .elementor-widget-container{padding:0!important;margin:0!important} body .orca-foot.mh-foot .elementor-element.elementor-widget{margin:0!important} body .orca-foot.mh-foot .e-con.orca-foot-top>.e-con,body .orca-foot.mh-foot .e-con.orca-foot-top{padding:0!important;gap:0!important} body .orca-foot.mh-foot .e-con.mh-foot-cta{padding:52px 0 40px!important;margin-bottom:44px!important} body .orca-foot.mh-foot .e-con.orca-foot-top{grid-template-columns:1.2fr 1fr 1fr!important;column-gap:72px!important;row-gap:40px!important} /* the first line of every column on one line: logo top = eyebrow top */ body .orca-foot.mh-foot .orca-foot-logo img{display:block;max-height:58px!important} body .orca-foot.mh-foot .orca-foot-eyebrow p{margin:0 0 14px!important;line-height:1!important;padding-top:2px} body .orca-foot.mh-foot .orca-foot-blurb p{margin:16px 0 0!important;max-width:36ch;font-size:15px} /* pages: a two-column list, the same as Shop */ body .orca-foot.mh-foot .mh-foot-pages{display:grid!important;grid-template-columns:auto auto;justify-content:start;gap:8px 28px!important;margin:20px 0 0!important;font-size:14.5px!important} body .orca-foot.mh-foot .mh-foot-pages li::before{display:none!important} body .orca-foot.mh-foot .mh-foot-shop{gap:9px 28px!important} body .orca-foot.mh-foot .mh-foot-shop a{font-size:15px!important} body .orca-foot.mh-foot .orca-foot-social{margin-top:20px!important} /* visit: compact */ body .orca-foot.mh-foot .orca-foot-phone a{font-size:26px!important;line-height:1.1} body .orca-foot.mh-foot .mh-foot-open{margin:8px 0 10px!important} body .orca-foot.mh-foot .mh-hours{margin:0 0 14px!important;max-width:260px} body .orca-foot.mh-foot .mh-hours div{padding:6px 0!important} body .orca-foot.mh-foot .mh-hours dt,body .orca-foot.mh-foot .mh-hours dd{font-size:14px!important} body .orca-foot.mh-foot .orca-foot-addr p,body .orca-foot.mh-foot .orca-foot-email p{margin:0 0 6px!important;font-size:14.5px!important;line-height:1.5} /* tags + legal: quiet, on the same edge */ body .orca-foot.mh-foot .e-con.mh-foot-tagrow{padding:36px 0 0!important} body .orca-foot.mh-foot .orca-foot-legal-row{margin-top:28px!important;padding:20px 0 26px!important} body .orca-foot.mh-foot .orca-foot-legal-row>*{padding-left:0!important;padding-right:0!important} @media (max-width:1024px){body .orca-foot.mh-foot .e-con.orca-foot-top{grid-template-columns:1fr 1fr!important}} @media (max-width:640px){body .orca-foot.mh-foot .e-con.orca-foot-top{grid-template-columns:1fr!important;row-gap:34px!important}} /* ===== cart, matched to checkout: white cards, the same type, a slim summary ===== */ body .mh-wc-cart .e-cart__container{gap:32px!important;align-items:start} body .mh-wc-cart .e-cart-section,body .mh-wc-cart .e-cart__column-end .e-cart__column-inner{background:#fff!important;border:1px solid var(--mh-line)!important;border-radius:16px!important;padding:22px 24px!important;box-shadow:none!important} body .mh-wc-cart .e-cart-totals.e-cart-section{border:0!important;padding:0!important} body .mh-wc-cart .coupon.e-cart-section{margin-top:16px!important;padding:14px 18px!important} /* items */ body .mh-wc-cart table.cart thead th{font:600 11.5px/1 var(--mh-body)!important;letter-spacing:.08em;text-transform:uppercase;color:var(--mh-muted)!important;padding:0 8px 12px!important;border-bottom:1px solid var(--mh-line)!important} body .mh-wc-cart table.cart td{padding:14px 8px!important;border-bottom:1px solid var(--mh-line)!important;font-size:14.5px!important;vertical-align:middle} body .mh-wc-cart table.cart tr:last-child td{border-bottom:0!important} body .mh-wc-cart table.cart td.product-name a{font:600 16px/1.3 var(--mh-display)!important;color:var(--mh-choc)!important} body .mh-wc-cart table.cart td.product-name dl.variation,body .mh-wc-cart table.cart td.product-name .variation{font-size:12.5px!important;color:var(--mh-muted)!important;margin:4px 0 0!important} body .mh-wc-cart table.cart td.product-subtotal{font-weight:700;color:var(--mh-choc)!important} body .mh-wc-cart table.cart td.product-thumbnail img{width:64px!important;height:64px!important;object-fit:cover;border-radius:10px} /* summary: the checkout's "Your Order" */ body .mh-wc-cart .cart_totals{display:flex;flex-direction:column} body .mh-wc-cart .cart_totals>h2{order:0;font-size:0!important;margin:0 0 10px!important} body .mh-wc-cart .cart_totals>h2::after{content:"Your order";font:650 18px/1.2 var(--mh-display);color:var(--mh-choc)} body .mh-wc-cart .cart_totals>table{order:1;width:100%} body .mh-wc-cart .cart_totals>.iwcore-fsb{order:2;background:transparent!important;border:0!important;border-top:1px solid var(--mh-line)!important;border-radius:0!important;padding:12px 0!important;margin:10px 0 0!important;box-shadow:none!important} body .mh-wc-cart .cart_totals>.wc-proceed-to-checkout{order:3} body .mh-wc-cart .cart_totals table th,body .mh-wc-cart .cart_totals table td{padding:5px 0!important;font-size:13.5px!important;border:0!important;background:transparent!important;color:var(--mh-ink)!important;font-weight:500} body .mh-wc-cart .cart_totals table td{text-align:right;font-weight:600} body .mh-wc-cart .cart_totals table tr.cart-subtotal th,body .mh-wc-cart .cart_totals table tr.cart-subtotal td{padding-top:0!important} body .mh-wc-cart .cart_totals table tr.order-total th,body .mh-wc-cart .cart_totals table tr.order-total td{border-top:1px solid var(--mh-line)!important;padding-top:10px!important;font-size:16px!important;font-weight:800!important;color:var(--mh-choc)!important} body .mh-wc-cart .cart_totals .woocommerce-shipping-destination,body .mh-wc-cart .cart_totals .shipping-calculator-button{font-size:12px!important;color:var(--mh-muted)!important} body .mh-wc-cart .cart_totals #shipping_method{margin:0!important;padding:0!important;list-style:none} body .mh-wc-cart .wc-proceed-to-checkout{padding:12px 0 0!important} body .mh-wc-cart .wc-proceed-to-checkout a.checkout-button{height:52px!important;display:flex!important;align-items:center;justify-content:center;font-size:16px!important;font-weight:800!important} /* coupon row: input takes the room */ body .mh-wc-cart .coupon .coupon-col{display:flex!important;gap:10px!important;align-items:center;width:100%} body .mh-wc-cart .coupon .coupon-col-start{flex:1 1 auto} body .mh-wc-cart .coupon .coupon-col-start input{width:100%!important} body .mh-wc-cart .coupon .coupon-col-end{flex:0 0 auto} body .mh-wc-cart .e-cart__column-end .e-cart__column-inner>*,body .mh-wc-cart .cart-collaterals,body .mh-wc-cart .cart_totals{padding:0!important;margin:0!important;background:transparent!important;border:0!important;width:100%!important} body .mh-wc-cart .cart_totals table,body .mh-wc-cart .cart_totals table tr,body .mh-wc-cart .cart_totals table tbody{border:0!important;background:transparent!important} body .mh-wc-cart .cart_totals table tr th,body .mh-wc-cart .cart_totals table tr td{border-top:0!important;border-bottom:0!important;color:var(--mh-ink)!important} body .mh-wc-cart .cart_totals table tr.cart-subtotal th,body .mh-wc-cart .cart_totals table tr.cart-subtotal td{border-top:1px solid var(--mh-line)!important;padding-top:10px!important} body .mh-wc-cart .cart_totals table tr.order-total th,body .mh-wc-cart .cart_totals table tr.order-total td{border-top:1px solid var(--mh-line)!important;color:var(--mh-choc)!important} body .mh-wc-cart .cart_totals table tr.woocommerce-shipping-totals td{font-weight:500} /* ===== checkout: minified header, no footer (Nick 25 Sep) ===== */ body.mh-co-min .orca-topbar,body.mh-co-min .mh-megabar,body.mh-co-min .orca-searcher,body.mh-co-min .orca-header-right, body.mh-co-min [data-elementor-type=footer],body.mh-co-min .elementor-location-footer,body.mh-co-min .iw-cta-bar,body.mh-co-min .iw-to-top{display:none!important} body.mh-co-min{padding-bottom:0!important} body.mh-co-min .orca-site-header{border-bottom:1px solid var(--mh-line)!important;box-shadow:none!important} body.mh-co-min .orca-site-header .orca-inner{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px;min-height:0;padding-top:12px!important;padding-bottom:12px!important} body.mh-co-min .mh-co-head{display:flex;align-items:center;gap:22px;font-family:var(--mh-body);font-size:14px} body.mh-co-min .mh-co-secure{display:inline-flex;align-items:center;gap:6px;color:var(--mh-muted);font-weight:600} body.mh-co-min .mh-co-secure svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} body.mh-co-min .mh-co-back{color:var(--mh-choc)!important;font-weight:700;text-decoration:none} body.mh-co-min .mh-co-back:hover{color:var(--mh-gold)!important} @media (max-width:600px){body.mh-co-min .mh-co-secure{font-size:0;gap:0}body.mh-co-min .mh-co-secure svg{width:18px;height:18px}body.mh-co-min .mh-co-head{gap:14px}} body.mh-co-min .orca-site-header .orca-inner{flex-direction:row!important} body.mh-co-min .orca-site-header .orca-brand{order:0!important;margin:0!important} body.mh-co-min .orca-site-header .mh-co-head{order:5;margin-left:auto} body.mh-co-min .orca-site-header .orca-nav{display:none!important} body.mh-co-min .orca-site-header .orca-inner{flex-wrap:nowrap!important;height:auto!important} html body.mh-co-min .orca-site-header .orca-header-right,html body.mh-co-min .orca-site-header .orca-cart-slot{display:none!important} /* mobile menu: a vertically centered list overflows above the panel, unreachable, once a submenu opens (Nick). */ body nav.elementor-nav-menu--dropdown.elementor-nav-menu__container{justify-content:flex-start!important} /* Clover's "Secure payments" strip, in the page's own colors (Nick). */ body .clover-footer{background:transparent!important;border-top:1px solid var(--mh-line)!important} body .clover-footer,body .clover-footer *{color:var(--mh-muted)} body .clover-footer a{color:var(--mh-choc)!important} /* Clover gift card row, in the checkout's field style */ body .mh-wc-checkout .clv-gc{margin-top:14px} body .mh-wc-checkout .clv-gc-toggle,body .mh-wc-checkout .clv-gc-remove{background:none!important;border:0!important;padding:0!important;color:var(--mh-choc)!important;font-weight:600;font-size:14px;text-decoration:underline;text-underline-offset:3px;box-shadow:none!important;min-height:0!important;height:auto!important;width:auto!important} body .mh-wc-checkout .clv-gc-form{gap:10px} body .mh-wc-checkout .clv-gc-form input{height:46px!important;border:1px solid var(--co-line)!important;border-radius:10px!important;background:#fff!important;font-size:15px!important;margin:0!important} body .mh-wc-checkout .clv-gc-form input:focus{border-color:var(--mh-choc)!important;outline:rgba(233,169,27,.35) solid 2px} body .mh-wc-checkout #payment .clv-gc-apply.button{height:46px!important;padding:0 22px!important;border-radius:999px!important;background:var(--mh-choc)!important;color:#fff!important;font-weight:700!important;font-size:15px!important;margin:0!important;width:auto!important;box-shadow:none!important} body .mh-wc-checkout .clv-gc-applied{padding:10px 14px;border:1px solid var(--co-line);border-radius:10px;background:#FBF6EC;color:var(--mh-ink)} .term-chocolates .mh-side-chocolates a,.term-chocolates .mh-rail-chocolates, .term-truffles .mh-side-truffles a,.term-truffles .mh-rail-truffles, .term-fudge .mh-side-fudge a,.term-fudge .mh-rail-fudge, .term-dipped-treats .mh-side-dipped-treats a,.term-dipped-treats .mh-rail-dipped-treats, .term-caramel-apples .mh-side-caramel-apples a,.term-caramel-apples .mh-rail-caramel-apples, .term-chocolate-molds .mh-side-chocolate-molds a,.term-chocolate-molds .mh-rail-chocolate-molds, .term-candy .mh-side-candy a,.term-candy .mh-rail-candy, .term-gift-sets .mh-side-gift-sets a,.term-gift-sets .mh-rail-gift-sets, .term-baskets-trays .mh-side-baskets-trays a,.term-baskets-trays .mh-rail-baskets-trays, .term-candy-bars .mh-side-candy-bars a,.term-candy-bars .mh-rail-candy-bars, .term-sugar-free .mh-side-sugar-free a,.term-sugar-free .mh-rail-sugar-free, .term-nut-free .mh-side-nut-free a,.term-nut-free .mh-rail-nut-free, .term-gift-cards .mh-side-gift-cards a,.term-gift-cards .mh-rail-gift-cards, .post-type-archive-product .mh-side-shop a,.post-type-archive-product .mh-rail-shop, .term-halloween .mh-side-halloween a,.term-halloween .mh-rail-halloween, .term-thanksgiving .mh-side-thanksgiving a,.term-thanksgiving .mh-rail-thanksgiving, .term-hanukkah .mh-side-hanukkah a,.term-hanukkah .mh-rail-hanukkah, .term-christmas .mh-side-christmas a,.term-christmas .mh-rail-christmas, .term-super-bowl-sunday .mh-side-super-bowl-sunday a,.term-super-bowl-sunday .mh-rail-super-bowl-sunday, .term-valentines-day .mh-side-valentines-day a,.term-valentines-day .mh-rail-valentines-day, .term-st-patricks-day .mh-side-st-patricks-day a,.term-st-patricks-day .mh-rail-st-patricks-day, .term-easter .mh-side-easter a,.term-easter .mh-rail-easter, .term-mothers-day .mh-side-mothers-day a,.term-mothers-day .mh-rail-mothers-day, .term-graduation-teacher-gifts .mh-side-graduation-teacher-gifts a,.term-graduation-teacher-gifts .mh-rail-graduation-teacher-gifts, .term-fathers-day .mh-side-fathers-day a,.term-fathers-day .mh-rail-fathers-day, .term-4th-of-july .mh-side-4th-of-july a,.term-4th-of-july .mh-rail-4th-of-july, .term-rosh-hashanah .mh-side-rosh-hashanah a,.term-rosh-hashanah .mh-rail-rosh-hashanah, .term-birthday .mh-side-birthday a,.term-birthday .mh-rail-birthday, .term-wedding .mh-side-wedding a,.term-wedding .mh-rail-wedding, .term-baby .mh-side-baby a,.term-baby .mh-rail-baby, .term-favors .mh-side-favors a,.term-favors .mh-rail-favors{background:var(--mh-choc);color:var(--mh-cream)!important;border-color:var(--mh-choc)} /* === MH-NATIVE === (2026-09-29: html widgets -> native Elementor widgets; same look, every word editable) */ /* ---- shared: icon lists read as plain lists ---- */ body .mh-announce.elementor-widget-icon-list .elementor-icon-list-items,body .mh-quick.elementor-widget-icon-list .elementor-icon-list-items, body .mh-chips.elementor-widget-icon-list .elementor-icon-list-items,body .mh-proof.elementor-widget-icon-list .elementor-icon-list-items, body .mh-foot-pages.elementor-widget-icon-list .elementor-icon-list-items,body .mh-secure.elementor-widget-icon-list .elementor-icon-list-items{margin:0!important;padding:0} body [class*="mh-"].elementor-widget-icon-list .elementor-icon-list-item>a{text-decoration:none} body [class*="mh-"].elementor-widget-icon-list .elementor-icon-list-icon svg{fill:currentColor} /* ---- hero: the video is the container's own background ---- */ body .e-con.mh-hero-video>.elementor-background-video-container{z-index:0} body .e-con.mh-hero-video>.elementor-background-video-container::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(35,21,12,.95) 0%,rgba(35,21,12,.88) 38%,rgba(35,21,12,.5) 64%,rgba(35,21,12,.15) 100%)} body .e-con.mh-hero-video::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(35,21,12,.95) 0%,rgba(35,21,12,.88) 38%,rgba(35,21,12,.5) 64%,rgba(35,21,12,.15) 100%)} body .e-con.mh-hero-video:has(>.elementor-background-video-container)::after{content:none} @media (max-width:900px){ body .e-con.mh-hero-video::after,body .e-con.mh-hero-video>.elementor-background-video-container::after{background:linear-gradient(180deg,rgba(43,27,16,.35) 0%,rgba(43,27,16,.85) 45%,rgba(43,27,16,.95) 100%)} body .e-con.mh-hero-video:has(>.elementor-background-video-container)::after{content:""} } /* proof line under the hero buttons */ body .mh .mh-proof.elementor-widget-icon-list{margin-top:28px!important} body .mh .mh-proof.elementor-widget-icon-list .elementor-icon-list-items{display:flex;flex-wrap:wrap;gap:10px 22px} body .mh .mh-proof.elementor-widget-icon-list .elementor-icon-list-item{margin:0!important;padding:0!important;display:flex;align-items:center;gap:7px} body .mh .mh-proof.elementor-widget-icon-list .elementor-icon-list-item::after{display:none!important} body .mh .mh-proof.elementor-widget-icon-list .elementor-icon-list-icon{margin:0!important;padding:0!important} body .mh .mh-proof.elementor-widget-icon-list .elementor-icon-list-icon svg{width:15px!important;height:15px!important;fill:var(--mh-gold-deep)!important} body .mh .mh-proof.elementor-widget-icon-list .elementor-icon-list-text{font-family:var(--mh-body);font-size:15px;font-weight:600;color:var(--mh-cocoa);padding:0!important} body .mh-hero-video .mh-proof.elementor-widget-icon-list .elementor-icon-list-text{color:#EADCC8!important} body .mh-hero-video .mh-proof.elementor-widget-icon-list .elementor-icon-list-icon svg{fill:var(--mh-gold)!important} /* ---- trust strip: four icon boxes ---- */ body .mh .e-con.mh-trust-list{display:grid!important;grid-template-columns:repeat(4,1fr);gap:22px 36px!important} body .mh .mh-trust-item.elementor-widget-icon-box{width:auto!important;margin:0!important} body .mh .mh-trust-item .elementor-icon-box-wrapper{display:flex!important;flex-direction:row!important;gap:12px;align-items:flex-start!important;text-align:left!important} body .mh .mh-trust-item .elementor-icon-box-icon{flex:0 0 40px;height:40px;margin:0!important;border-radius:50%;display:grid!important;place-items:center;background:rgba(233,169,27,.16)} body .mh .mh-trust-item .elementor-icon{font-size:18px!important;display:grid;place-items:center} body .mh .mh-trust-item .elementor-icon svg{width:18px!important;height:18px!important;fill:var(--mh-gold)!important} body .mh.mh-trust-foot .mh-trust-item .elementor-icon svg{fill:var(--mh-gold-deep)!important} body .mh .mh-trust-item .elementor-icon-box-title{margin:0!important;font-family:var(--mh-body)!important;font-size:15px!important;font-weight:700!important;line-height:1.65!important;color:inherit!important} body .mh .mh-trust-item .elementor-icon-box-description{margin:0!important;font-family:var(--mh-body);font-size:13.5px!important;line-height:1.65;color:inherit!important;opacity:.78} body .mh.mh-trust:not(.mh-trust-foot) .mh-trust-item .elementor-icon-box-title,body .mh.mh-trust:not(.mh-trust-foot) .mh-trust-item .elementor-icon-box-description{color:var(--mh-cream)!important} body .mh.mh-trust-foot .mh-trust-item .elementor-icon-box-title,body .mh.mh-trust-foot .mh-trust-item .elementor-icon-box-description{color:var(--mh-ink)!important} @media (max-width:900px){ body .mh .e-con.mh-trust-list{grid-template-columns:1fr 1fr} } @media (max-width:480px){ body .mh .mh-trust-item .elementor-icon-box-description{display:none} } /* ---- occasion chips ---- */ body .mh .mh-chips.elementor-widget-icon-list{margin-top:26px!important} body .mh .mh-chips.elementor-widget-icon-list .elementor-icon-list-items{display:flex;flex-wrap:wrap;gap:10px} body .mh .mh-chips.elementor-widget-icon-list .elementor-icon-list-item{margin:0!important;padding:0!important} body .mh .mh-chips.elementor-widget-icon-list .elementor-icon-list-item::after{display:none!important} body .mh .mh-chips.elementor-widget-icon-list .elementor-icon-list-item>a{display:inline-block;padding:9px 16px;border-radius:999px;background:#fff;border:1px solid var(--mh-line);transition:background .15s,border-color .15s} body .mh .mh-chips.elementor-widget-icon-list .elementor-icon-list-item>a:hover{background:var(--mh-gold-soft);border-color:var(--mh-gold)} body .mh .mh-chips.elementor-widget-icon-list .elementor-icon-list-text{font-family:var(--mh-body);font-size:15px;font-weight:600;line-height:1.65;color:var(--mh-choc)!important;padding:0!important} /* ---- stats ---- */ body .mh .e-con.mh-stats{display:grid!important;grid-template-columns:repeat(3,1fr);gap:18px!important;margin:30px 0 4px;border-top:1px solid var(--mh-line);padding-top:24px!important} body .mh .mh-story .e-con.mh-stats{margin-top:36px;padding-top:30px!important} body .mh-story .e-con.mh-stats+.mh-btn,body .mh-story-copy>.e-con.mh-stats+.elementor-widget-button{margin-top:36px!important} body .mh .mh-stat.elementor-widget-icon-box{width:auto!important;margin:0!important} body .mh .mh-stat .elementor-icon-box-wrapper{text-align:left!important;display:block!important} body .mh .mh-stat .elementor-icon-box-icon{display:none!important} body .mh .mh-stat .elementor-icon-box-title{margin:0!important;font-family:var(--mh-display)!important;font-size:clamp(26px,2.6vw,34px)!important;font-weight:700!important;color:var(--mh-choc)!important;line-height:1!important} body .mh .mh-stat .elementor-icon-box-description{margin:6px 0 0!important;font-size:14px!important;line-height:1.65;color:var(--mh-muted)!important} body .mh .e-con.mh-stats .mh-stat .elementor-icon-box-title span,body .mh .e-con.mh-stats .mh-stat .elementor-icon-box-title a{display:inline!important;font:inherit!important;color:inherit!important;margin:0!important} /* ---- address / phone / email lines ---- */ body .mh .mh-addr-list.elementor-widget-icon-list .elementor-icon-list-items{margin:0;padding:0} body .mh .mh-addr-list.elementor-widget-icon-list .elementor-icon-list-item{margin:18px 0 0!important;padding:0!important;display:flex;align-items:center} body .mh .mh-addr-list.elementor-widget-icon-list .elementor-icon-list-item>a{display:flex;align-items:center} body .mh .mh-addr-list.elementor-widget-icon-list .elementor-icon-list-icon{margin:0 10px 0 0!important;padding:0!important;width:20px;display:inline-flex;justify-content:center} body .mh .mh-addr-list.elementor-widget-icon-list .elementor-icon-list-icon svg{width:18px!important;height:18px!important;fill:var(--mh-gold-deep)!important} body .mh .mh-addr-list.elementor-widget-icon-list .elementor-icon-list-text{font-family:var(--mh-body);font-size:17px;font-weight:600;line-height:1.65;color:var(--mh-ink);padding:0!important} body .mh .mh-addr-list.elementor-widget-icon-list a .elementor-icon-list-text{color:var(--mh-choc)!important;text-decoration:none} /* ---- hours (price list) ---- */ body .mh-hours.elementor-widget-price-list{margin:22px 0 0!important;max-width:340px} body .mh-hours.elementor-widget-price-list .elementor-price-list{margin:0;padding:0;list-style:none;display:grid;gap:8px} body .mh-hours.elementor-widget-price-list .elementor-price-list li{margin:0!important;padding:0 0 8px!important;border-bottom:1px dashed var(--mh-line);display:block} body .mh-hours.elementor-widget-price-list .elementor-price-list-text{padding:0!important;margin:0!important;width:100%} body .mh-hours.elementor-widget-price-list .elementor-price-list-header{display:flex;justify-content:space-between;margin:0!important;padding:0!important;font-family:var(--mh-body);font-size:17px;line-height:1.65} body .mh-hours.elementor-widget-price-list .elementor-price-list-title{font-weight:700;color:var(--mh-ink)} body .mh-hours.elementor-widget-price-list .elementor-price-list-price{font-weight:400;color:var(--mh-muted)} body .mh-hours.elementor-widget-price-list div{border:0!important;padding:0!important;display:block} body .mh-hours.elementor-widget-price-list .elementor-price-list-header{display:flex!important} body .mh .mh-hours.elementor-widget-price-list{max-width:340px!important;width:100%!important;flex:0 1 auto!important;align-self:flex-start} body .mh-hours.elementor-widget-price-list .elementor-price-list-title,body .mh-hours.elementor-widget-price-list .elementor-price-list-price{font-family:var(--mh-body)!important;font-size:17px!important;line-height:1.65!important} /* ---- about: how buying works cards, press ---- */ body .mh .e-con.mh-cards{display:grid!important;grid-template-columns:repeat(4,1fr);gap:18px!important} body .mh .mh-card.elementor-widget-icon-box{width:auto!important;margin:0!important;background:#fff;border:1px solid var(--mh-line);border-radius:var(--mh-r);padding:24px} body .mh .mh-card .elementor-icon-box-wrapper{display:block!important;text-align:left!important} body .mh .mh-card .elementor-icon-box-icon{width:44px;height:44px;margin:0 0 14px!important;border-radius:50%;display:grid!important;place-items:center;background:rgba(233,169,27,.16)} body .mh .mh-card .elementor-icon svg{width:19px!important;height:19px!important;fill:var(--mh-gold-deep)!important} body .mh .mh-card .elementor-icon{display:grid;place-items:center} body .mh .mh-card .elementor-icon-box-title{margin:0!important;font-family:var(--mh-display)!important;font-size:20px!important;font-weight:650!important;line-height:1.65!important;color:var(--mh-choc)!important} body .mh .mh-card .elementor-icon-box-description{margin:8px 0 0!important;color:var(--mh-muted)!important;font-size:15px!important;line-height:1.55!important} @media (max-width:900px){body .mh .e-con.mh-cards{grid-template-columns:1fr 1fr}} @media (max-width:520px){body .mh .e-con.mh-cards{grid-template-columns:1fr}} body .mh .mh-press-list.elementor-widget-icon-list{margin-top:28px!important} body .mh .mh-press-list.elementor-widget-icon-list .elementor-icon-list-items{margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px} body .mh .mh-press-list.elementor-widget-icon-list .elementor-icon-list-item{margin:0!important;padding:18px 20px!important;border-left:3px solid var(--mh-gold);background:var(--mh-cream);border-radius:0 10px 10px 0} body .mh .mh-press-list.elementor-widget-icon-list .elementor-icon-list-item::after{display:none!important} body .mh .mh-press-list.elementor-widget-icon-list .elementor-icon-list-text{font-family:var(--mh-display);font-size:17px;font-weight:600;color:var(--mh-choc);line-height:1.35;padding:0!important} /* ---- checkout: secure line (locked padlock) ---- */ body .mh .mh-secure.elementor-widget-icon-list{margin:14px 0 0!important} body .mh .mh-secure.elementor-widget-icon-list .elementor-icon-list-items{display:flex;flex-wrap:wrap;align-items:center;gap:0 5px} body .mh .mh-secure.elementor-widget-icon-list .elementor-icon-list-item{margin:0!important;padding:0!important;display:inline-flex;align-items:center} body .mh .mh-secure.elementor-widget-icon-list .elementor-icon-list-item::after{display:none!important} body .mh .mh-secure.elementor-widget-icon-list .elementor-icon-list-icon{margin:0 8px 0 0!important;padding:0!important} body .mh .mh-secure.elementor-widget-icon-list .elementor-icon-list-icon svg{width:16px!important;height:16px!important;fill:var(--mh-gold-deep)!important} body .mh .mh-secure.elementor-widget-icon-list .elementor-icon-list-text{font-family:var(--mh-body);font-size:15px;line-height:1.65;color:var(--mh-muted);padding:0!important} body .mh .mh-secure.elementor-widget-icon-list a .elementor-icon-list-text{color:var(--mh-choc)!important;font-weight:700;text-decoration:none} /* ---- contact: Pro Form in the skin ---- */ body .mh .mh-form.elementor-widget-form .elementor-field-group{margin-bottom:10px!important} body .mh .mh-form.elementor-widget-form .elementor-field-textual{font-family:var(--mh-body);font-size:15.5px;line-height:1.65;color:var(--mh-ink);background:var(--mh-paper);border:1px solid var(--mh-line);border-radius:8px;padding:12px 12px;min-height:54px} body .mh .mh-form.elementor-widget-form textarea.elementor-field-textual{min-height:131px} body .mh .mh-form.elementor-widget-form .elementor-field-type-submit{margin-top:46px!important;margin-bottom:0!important} body .mh .mh-form.elementor-widget-form .elementor-field-textual:focus{border-color:var(--mh-gold);box-shadow:0 0 0 3px rgba(233,169,27,.25);outline:0} body .mh .mh-form.elementor-widget-form .elementor-button[type=submit]{width:100%;justify-content:center;background:var(--mh-gold)!important;color:var(--mh-choc)!important;border-radius:999px;font-family:var(--mh-body);font-weight:700;font-size:16px;padding:15px 28px;border:0;min-height:52px} body .mh .mh-form.elementor-widget-form .elementor-button[type=submit]:hover{background:#F2B62C!important} body .mh .mh-form.elementor-widget-form .elementor-message{font-family:var(--mh-body);font-size:15px;margin-top:12px} /* === /MH-NATIVE === *//* End custom CSS */