/*
Theme Name: GeneratePress Child
Theme URI: https://generatepress.com
Description: Default GeneratePress child theme
Author: Tom Usborne
Author URI: https://tomusborne.com
Template: generatepress
Version: 1.6.26
*/
/* Metric-matched fallbacks for the two Google fonts, so the `display=swap`
handover is a repaint instead of a reflow. Wired into the font stacks by
includes/typography.php.
Measured in-browser at font-size 1000px (advance width of a representative
string, ascent/descent from a baseline-aligned marker):
family width ascent descent
Comfortaa 5979 0.881 0.234
Nunito 5310 1.011 0.353
Verdana 5898 — —
Arial 5156 — —
size-adjust is the width ratio against the local base font; ascent/descent
are the real font's values divided by that ratio, because the overrides are
resolved against the already-adjusted em. line-gap is 0 for both (ascent +
descent equals the measured normal line box). */
@font-face {
font-family: "Comfortaa Fallback";
src: local("Verdana"), local("DejaVu Sans"), local("Arial");
/* 5979 / 5898 = 101.37% from the raw advance widths, then +2.7% because
Comfortaa is used at 700 here and the browser synthesises bold from
Verdana's single regular face. Measured against the page's real headings
and card titles, that lands the median drift at ~0%. */
size-adjust: 104.15%;
ascent-override: 84.59%;
descent-override: 22.47%;
line-gap-override: 0%;
}
@font-face {
font-family: "Nunito Fallback";
src: local("Arial"), local("Helvetica"), local("Liberation Sans");
size-adjust: 102.99%; /* 5310 / 5156 */
ascent-override: 98.16%;
descent-override: 34.27%;
line-gap-override: 0%;
}
/* This is a light-only design — there isn't a single prefers-color-scheme rule
in the theme. Say so, and paint the canvas ourselves.
Without `color-scheme`, a browser in dark mode paints its own dark base
background for the frame before our background is resolved, and the white
body then lands on top: a black flash on every page load. The background on
html matters for the same reason — it was only set on body, and the canvas
picks that up too late to help. */
:root {
color-scheme: light;
}
/* The canvas is what iOS shows past the document's edges during the rubber-band
bounce; painted header-beige, the bar appears to extend upward instead of a
white band flashing between it and the browser chrome. The white the page
actually needs is pinned to body below, so only the overscroll (and the
pre-paint frame, where beige beats white next to a beige header) sees this. */
html {
background-color: #E7E0CA;
}
body {
background-color: var(--base-3, #ffffff);
overflow-y: auto;
}
/* Depth of the curved bottom edge on #mobile-header (see STICKY HEADER below).
It tracks the viewport so the curve keeps its shape instead of flattening out
as the screen widens towards GeneratePress' 950px mobile-header breakpoint.
Layouts that sit under the header use it to clear the curve. */
:root {
--mk-wave-h: clamp(42px, 9.8vw, 58px);
/* How far the curve is lifted into the bar. The crest bites this much beige off
the bar's bottom edge instead of the whole wave hanging below it, so the block
gets shorter without the wave losing any of its depth.
It went 10px -> 14.5px when the curve was tilted (see the path below): the tilt
pivots on the deepest point so the block keeps its height, which means the whole
right-hand side — crest included — rises, and the crest needs the extra room. */
--mk-wave-lift: 14.5px;
}
/* WP admin bar must always sit above the theme's sticky header
(theme sets .site-header z-index:999999, default admin bar is 99999) */
#wpadminbar,
#wpadminbar .ab-sub-wrapper,
#wpadminbar .quicklinks .menupop ul {
z-index: 9999999 !important;
}
/* Single post hero: kill the inner 260px padding-top added by the GB block
config — it stacks on top of the 180px wave and creates huge empty space. */
.single-post .gb-container-609e7c43 .gb-container-6d8c374e {
padding-top: 0 !important;
padding-bottom: 40px !important;
}
/* Page Hero (GenerateBlocks) — replaced with CSS-only beige band + wavy bottom.
The ::before draws the visual; H1 sits naturally below it on white. */
.gb-container-609e7c43 {
background: transparent !important;
background-image: none !important;
position: relative !important;
overflow: visible !important;
min-height: 0 !important;
padding-top: 180px !important; /* reserve space for the CSS hero band */
}
.gb-container-609e7c43::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 180px;
background-image: url("data:image/svg+xml;utf8,");
background-size: 100% 100%;
background-repeat: no-repeat;
z-index: 0;
pointer-events: none;
}
/* Hide the legacy GenerateBlocks SVG wave */
.gb-container-609e7c43 > .gb-shapes {
display: none !important;
}
.gb-container-609e7c43 .gb-container-8c5e20df {
position: relative;
z-index: 1;
background: transparent !important;
width: 100% !important;
}
/* Reset the title wrapper (was previously absolute-positioned) */
.gb-container-609e7c43 .gb-container-8c5e20df {
position: static !important;
width: auto !important;
max-width: none !important;
}
/* Title container matches #content width & padding for perfect alignment */
.gb-container-609e7c43 .gb-container-8c5e20df {
background: #fff;
}
.gb-container-609e7c43 .gb-container-68a7c1b4 {
max-width: 1200px !important;
margin: 0 auto !important;
padding: 24px 40px 16px !important;
min-height: 0 !important;
text-align: left !important;
margin-top: -40px!important;
}
/* H1 styling — visible, professional, with subtle brand accent */
.gb-container-609e7c43 .gb-headline-e1aaa617 {
position: static !important;
width: auto !important;
height: auto !important;
clip: auto !important;
overflow: visible !important;
white-space: normal !important;
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
font-size: 1.875rem !important;
font-weight: 600 !important;
line-height: 1.15 !important;
letter-spacing: -0.02em !important;
text-align: left !important;
color: #0f1e2e !important;
}
.gb-container-609e7c43 .gb-headline-e1aaa617::after {
content: '';
display: block;
width: 44px;
height: 3px;
background: #c98e1f;
margin-top: 12px;
border-radius: 2px;
}
#content {
padding-top: 16px !important;
}
/* Home page: tighten its separate Page Hero (uses different container class)
and remove the global #content padding-top that creates a white gap at the top. */
body.home #content {
padding-top: 0 !important;
}
/* Home hero wave.
GenerateBlocks' preset shape is a four-bump ripple; stretched edge to edge with
preserveAspectRatio="none" it reads almost flat on a wide screen. The brand wants
the single deep sweep of the bottle labels, so we keep GB's shape element (and its
absolute positioning) and swap the artwork for our own path. The height tracks the
viewport so the curve holds its proportions instead of flattening out as the screen
widens. Below 950px .gb-shape is hidden — #mobile-header owns the curve there. */
body.home {
--mk-hero-wave-h: clamp(155px, 9.5vw, 190px);
}
body.home .gb-container-8c5e20df > .gb-shapes .gb-shape-1 {
height: var(--mk-hero-wave-h) !important;
transform: none !important; /* GB flips its own SVG; ours is drawn the right way up */
background: url("data:image/svg+xml;utf8,") top center / 100% 100% no-repeat;
}
body.home .gb-container-8c5e20df > .gb-shapes .gb-shape-1 svg {
display: none !important;
}
/* 0.83 is where the curve bottoms out within its box; the rest is breathing room */
body.home .gb-container-9b26a48a {
padding-top: calc(var(--mk-hero-wave-h) * 0.83 + 44px) !important;
}
@media (max-width: 1024px) {
body.home { --mk-hero-wave-h: 150px; }
}
/* 950px is where GeneratePress swaps in #mobile-header, which draws its own
curved bottom edge — so the hero shape steps aside from that width down,
otherwise the two waves stack. The header floats over the page
(.header-wrap is absolute), so the hero clears the header plus the curve
itself: 0.96 is where the curve bottoms out within its box, and the lift is
subtracted because the whole curve now sits that much higher. */
@media (max-width: 950px) {
body.home .gb-container-9b26a48a {
padding-top: calc(68px - var(--mk-wave-lift) + var(--mk-wave-h) * 0.96) !important;
}
}
/* Product detail & other pages: match page title style (left-aligned + gold underline) */
.single-product h1.product_title,
.woocommerce-products-header__title {
font-size: 1.875rem !important;
font-weight: 600 !important;
line-height: 1.15 !important;
letter-spacing: -0.02em !important;
color: #0f1e2e !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
}
.single-product h1.product_title::after,
.woocommerce-products-header__title::after {
content: '' !important;
display: block !important;
width: 44px !important;
height: 3px !important;
background: #c98e1f !important;
margin-top: 12px !important;
border-radius: 2px !important;
border: 0 !important;
}
@media (max-width: 768px) {
.single-product h1.product_title,
.woocommerce-products-header__title {
font-size: 1.375rem !important;
}
.single-product h1.product_title::after,
.woocommerce-products-header__title::after {
width: 32px;
height: 2px;
margin-top: 10px;
}
}
/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
.gb-container-609e7c43 {
padding-top: 140px !important;
}
.gb-container-609e7c43::before {
height: 140px;
}
.gb-container-609e7c43 .gb-container-68a7c1b4 {
padding: 20px 30px 14px !important;
}
.gb-container-609e7c43 .gb-headline-e1aaa617 {
font-size: 1.625rem !important;
}
}
/* From 950px down #mobile-header draws the curved edge, so this hero band steps
aside (otherwise its own wave stacks under the header's) and the hero just
clears the header plus the curve. */
@media (max-width: 950px) {
.gb-container-609e7c43 {
padding-top: calc(68px - var(--mk-wave-lift) + var(--mk-wave-h) * 0.96) !important;
}
.gb-container-609e7c43::before {
display: none !important;
}
/* The -40px lift tucks the title under the desktop band; with no band it
would just pull the title back into the curve. */
.gb-container-609e7c43 .gb-container-68a7c1b4 {
margin-top: 0 !important;
}
}
/* ---------- Mobile ---------- */
@media (max-width: 768px) {
.gb-container-609e7c43 .gb-container-68a7c1b4 {
padding: 16px 16px 12px !important;
}
/* Single post hero: kill inner padding-top that creates huge empty space */
.single-post .gb-container-609e7c43 .gb-container-6d8c374e {
padding-top: 0 !important;
}
.gb-container-609e7c43 .gb-headline-e1aaa617 {
font-size: 1.375rem !important;
}
.gb-container-609e7c43 .gb-headline-e1aaa617::after {
width: 32px;
height: 2px;
margin-top: 10px;
}
#content {
padding-top: 12px !important;
}
}
/* --- WooCommerce notices — toast --- */
.woocommerce-message {
position: fixed !important;
top: 80px !important;
left: 50% !important;
transform: translateX(-50%) !important;
z-index: 9999999 !important;
background: #fff !important;
color: #2c3e50 !important;
border: none !important;
border-radius: 12px !important;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15) !important;
padding: 14px 20px !important;
font-size: 14px !important;
font-weight: 500 !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
max-width: 90vw !important;
width: auto !important;
animation: mk-toastIn 0.3s ease, mk-toastOut 0.4s ease 3.5s forwards !important;
}
.woocommerce-message::before {
content: '\2713' !important;
color: #fff !important;
background: #4CAF50 !important;
width: 24px !important;
height: 24px !important;
min-width: 24px !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 14px !important;
font-weight: 700 !important;
flex-shrink: 0 !important;
margin: 0 !important;
top: auto !important;
position: static !important;
}
.woocommerce-message a.button.wc-forward {
background: linear-gradient(135deg, #c98e1f 0%, #a67617 100%) !important;
color: #fff !important;
border: none !important;
border-radius: 6px !important;
padding: 8px 14px !important;
font-size: 13px !important;
font-weight: 700 !important;
text-decoration: none !important;
white-space: nowrap !important;
flex-shrink: 0 !important;
}
@keyframes mk-toastIn {
from { opacity: 0; transform: translateX(-50%) translateY(-20px); }
to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes mk-toastOut {
from { opacity: 1; transform: translateX(-50%) translateY(0); }
to { opacity: 0; transform: translateX(-50%) translateY(-20px); pointer-events: none; }
}
/* --- Hide GeneratePress "Add to Cart Panel" — redundant with the side-cart,
which auto-opens on add-to-cart with the product, total, gold Checkout button
and the success toast. (Can also be turned off in Customizer for a fully clean
removal, no DOM/JS.) --- */
#wc-sticky-cart-panel {
display: none !important;
}
/* --- Home hero — mobile compact --- */
@media (max-width: 768px) {
/* Top padding comes from the 950px block above, which clears the header curve */
body.home .gb-container-9b26a48a {
padding-bottom: 30px !important;
}
/* Center and enlarge the circular image */
body.home .wp-block-image.is-style-rounded {
text-align: center !important;
margin: 10px auto 0 !important;
}
body.home .wp-block-image.is-style-rounded img {
width: 245px !important;
height: 245px !important;
object-fit: cover;
}
/* Tighten "Our Products" heading */
body.home .gb-headline-6121ca89 {
margin-bottom: 20px !important;
}
/* Homepage products grid — no extra offset, parent handles 16px */
body.home .wc-block-grid__products {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
width: 100% !important;
}
}
/* --- Unify mobile lateral margins across all pages (match product page 16px) --- */
@media (max-width: 768px) {
/* Global content wrapper — all pages except product/checkout which have their own rule */
body.page:not(.single-product):not(.woocommerce-checkout) .site-content {
padding-left: 16px !important;
padding-right: 16px !important;
}
/* Home: hero banner (7702a1a7) breaks out of the 16px wrapper to remain full-bleed */
body.home .entry-content > .gb-container-7702a1a7 {
margin-left: -16px !important;
margin-right: -16px !important;
padding-left: 0 !important;
padding-right: 0 !important;
max-width: none !important;
width: calc(100% + 32px) !important;
}
/* Home: zero lateral padding on inner Gutenberg containers so nested
30px block-editor padding doesn't stack with the 16px site-content wrapper. */
body.home .entry-content .gb-container:not(.gb-container-7702a1a7) {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Trustpilot reviews widget — respect 16px lateral margins on mobile */
body.home .trustpilot-widget {
margin-left: 16px !important;
margin-right: 16px !important;
width: calc(100% - 32px) !important;
}
}
/* Hide site title text when SVG logo is present */
.site-header .site-logo + .header-content .main-title,
.site-header .site-branding .main-title {
display: none !important;
}
/* SVG Logo sizing — scoped to header/nav containers only */
.site-header .site-logo img[src$=".svg"] {
width: 210px !important;
height: auto !important;
}
/* ============================================================================
DESKTOP HEADER POLISH — contrast, density, active state, cart, account pill
============================================================================ */
@media (min-width: 769px) {
.site-header .inside-header {
padding-top: 14px !important;
padding-bottom: 14px !important;
}
#site-navigation .inside-navigation,
.main-navigation:not(.mobile-menu-control-wrapper) .inside-navigation {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
#site-navigation .main-nav > ul > li > a,
.main-navigation .main-nav > ul > li > a {
color: #2a1e10 !important;
font-weight: 600;
letter-spacing: 0.1px;
position: relative;
transition: color 0.2s ease;
}
#site-navigation .main-nav > ul > li > a::after,
.main-navigation .main-nav > ul > li > a::after {
content: '';
position: absolute;
left: 20px;
right: 20px;
bottom: 14px;
height: 2px;
background: #c98e1f;
border-radius: 2px;
transform: scaleX(0);
transform-origin: center;
transition: transform 0.25s ease;
pointer-events: none;
}
#site-navigation .main-nav > ul > li > a:hover,
#site-navigation .main-nav > ul > li.current-menu-item > a,
#site-navigation .main-nav > ul > li.current_page_item > a,
#site-navigation .main-nav > ul > li.current-menu-ancestor > a,
.main-navigation .main-nav > ul > li > a:hover,
.main-navigation .main-nav > ul > li.current-menu-item > a,
.main-navigation .main-nav > ul > li.current_page_item > a,
.main-navigation .main-nav > ul > li.current-menu-ancestor > a {
color: #c98e1f !important;
}
#site-navigation .main-nav > ul > li > a:hover::after,
#site-navigation .main-nav > ul > li.current-menu-item > a::after,
#site-navigation .main-nav > ul > li.current_page_item > a::after,
#site-navigation .main-nav > ul > li.current-menu-ancestor > a::after,
.main-navigation .main-nav > ul > li > a:hover::after,
.main-navigation .main-nav > ul > li.current-menu-item > a::after,
.main-navigation .main-nav > ul > li.current_page_item > a::after,
.main-navigation .main-nav > ul > li.current-menu-ancestor > a::after {
transform: scaleX(1);
}
/* Account icon — circular treatment matching the cart icon.
Targeted by the .mk-header-account class (not a hardcoded menu-item ID)
so it works across domains where the menu item ID differs. */
#site-navigation .main-nav ul li:has(> .mk-header-account),
.main-navigation .main-nav ul li:has(> .mk-header-account) {
display: flex;
align-items: center;
margin-left: 4px;
}
#site-navigation .main-nav ul li > a.mk-header-account,
.main-navigation .main-nav ul li > a.mk-header-account {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
padding: 0 !important;
color: #2a1e10 !important;
background: transparent !important;
border-radius: 50%;
box-shadow: none !important;
transition: background 0.2s ease, color 0.2s ease;
}
#site-navigation .main-nav ul li > a.mk-header-account:hover,
#site-navigation .main-nav ul li > a.mk-header-account:focus-visible,
#site-navigation .main-nav ul li.current-menu-item > a.mk-header-account,
#site-navigation .main-nav ul li.current_page_item > a.mk-header-account,
.main-navigation .main-nav ul li > a.mk-header-account:hover,
.main-navigation .main-nav ul li > a.mk-header-account:focus-visible,
.main-navigation .main-nav ul li.current-menu-item > a.mk-header-account,
.main-navigation .main-nav ul li.current_page_item > a.mk-header-account {
background: rgba(201,142,31,0.12) !important;
color: #c98e1f !important;
box-shadow: none !important;
}
#site-navigation .main-nav ul li > a.mk-header-account::after,
.main-navigation .main-nav ul li > a.mk-header-account::after {
display: none !important;
}
.mk-header-account__icon {
display: block;
stroke: currentColor;
}
/* Logged-in trigger: native button reset, same circular footprint as the
icon-only variant. */
#site-navigation .main-nav ul li > .mk-header-account--menu,
.main-navigation .main-nav ul li > .mk-header-account--menu {
position: relative;
display: inline-flex;
align-items: center;
}
.mk-header-account__trigger {
appearance: none;
-webkit-appearance: none;
background: transparent;
border: 0;
padding: 0;
margin: 0;
width: 42px;
height: 42px;
border-radius: 50%;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
color: inherit;
transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.mk-header-account__trigger:focus {
outline: none;
}
.mk-header-account__trigger:hover .mk-header-account__avatar {
transform: scale(1.04);
}
.mk-header-account__trigger:focus-visible {
box-shadow: 0 0 0 3px rgba(201,142,31,0.45);
}
.mk-header-account__trigger[aria-expanded="true"] {
box-shadow: 0 0 0 3px rgba(201,142,31,0.25);
}
.mk-header-account__avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: #c98e1f;
color: #fff;
font-weight: 700;
font-size: 14px;
letter-spacing: 0.02em;
line-height: 1;
transition: transform 0.15s ease;
user-select: none;
}
.mk-header-account__panel {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 260px;
background: #fff;
border-radius: 14px;
box-shadow: 0 12px 32px rgba(42,30,16,0.12);
padding: 8px 0;
z-index: 1000;
transform-origin: top right;
animation: mkAccountPanelIn 150ms ease-out;
}
.mk-header-account__panel[hidden] {
display: none;
}
@keyframes mkAccountPanelIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.mk-header-account__greeting {
padding: 10px 16px 12px;
font-weight: 700;
color: #2a1e10;
line-height: 1.3;
}
.mk-header-account__email {
display: block;
font-weight: 400;
font-size: 12px;
color: rgba(42,30,16,0.6);
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mk-header-account__item {
display: flex !important;
align-items: center;
padding: 10px 16px !important;
color: #2a1e10 !important;
text-decoration: none !important;
background: transparent !important;
box-shadow: none !important;
font-weight: 500 !important;
line-height: 1.3 !important;
transition: background 0.15s ease;
}
.mk-header-account__item::after {
display: none !important;
}
.mk-header-account__item:hover,
.mk-header-account__item:focus-visible {
background: rgba(201,142,31,0.08) !important;
outline: none;
}
.mk-header-account__points {
margin-left: auto;
background: rgba(201,142,31,0.15);
color: #c98e1f;
font-weight: 700;
font-size: 12px;
border-radius: 999px;
padding: 2px 10px;
min-width: 28px;
text-align: center;
}
.mk-header-account__divider {
border: 0;
border-top: 1px solid rgba(42,30,16,0.08);
margin: 6px 0;
}
.mk-header-account__logout {
color: #a13a3a !important;
}
.mk-header-account__logout:hover,
.mk-header-account__logout:focus-visible {
background: rgba(161,58,58,0.08) !important;
color: #a13a3a !important;
}
}
/* Ensure the mobile toggle wrapper (which holds our cart icon + hamburger)
is visible on mobile. GP hides it by default and only shows it when the
GP Premium WooCommerce menu cart is enabled — we disable that in favor
of our own cart icon, so we restore the visibility here. */
@media (max-width: 768px) {
.has-inline-mobile-toggle .mobile-menu-control-wrapper {
display: flex !important;
width: 100%;
justify-content: flex-end;
}
}
/* Header cart icon (rendered in menu-bar-items — applies on all breakpoints) */
.menu-bar-item.mk-header-cart-item {
display: inline-flex;
align-items: center;
}
.menu-bar-item.mk-header-cart-item > a.mk-header-cart {
position: relative;
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
padding: 0 !important;
color: #2a1e10 !important;
border-radius: 50%;
transition: background 0.2s ease, color 0.2s ease;
}
.menu-bar-item.mk-header-cart-item > a.mk-header-cart:hover,
.menu-bar-item.mk-header-cart-item > a.mk-header-cart:focus-visible {
background: rgba(201,142,31,0.12);
color: #c98e1f !important;
}
.menu-bar-item.mk-header-cart-item > a.mk-header-cart::after {
display: none !important;
}
.mk-header-cart__icon {
display: block;
stroke: currentColor;
}
.mk-header-cart__count {
position: absolute;
top: 2px;
right: 2px;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: 999px;
background: #c98e1f;
color: #fff;
font-size: 11px;
font-weight: 700;
line-height: 18px;
text-align: center;
box-shadow: 0 0 0 2px #E7E0CA;
opacity: 0;
transform: scale(0.6);
transition: opacity 0.2s ease, transform 0.2s ease;
}
.mk-header-cart__count.is-filled {
opacity: 1;
transform: scale(1);
}
/* Side-cart stacking — lift overlay and drawer above every sticky surface
(header 999999, mobile header 9999999, sticky ATC 10000000). Using a
single high ceiling keeps the cart modal and its backdrop on top without
having to demote every possible header container. */
.mk-wsc-opac {
z-index: 2147483646 !important;
}
.mk-wsc-container,
.mk-wsc-modal {
z-index: 2147483647 !important;
}
/* Belt-and-suspenders: also demote the header stacking contexts while the
cart is active, so any child that escapes via transform/filter still sits
below the backdrop. */
html.mk-wsc-cart-active .site-header,
html.mk-wsc-cart-active #masthead,
html.mk-wsc-cart-active .main-navigation,
html.mk-wsc-cart-active #sticky-navigation,
html.mk-wsc-cart-active .mobile-header,
html.mk-wsc-cart-active .mobile-header-navigation,
html.mk-wsc-cart-active .inside-header,
html.mk-wsc-cart-active .site-logo,
html.mk-wsc-cart-active .mk-sticky-logo {
z-index: 1 !important;
}
/* Sticky nav logo — hide GP default, show custom SVG */
.main-navigation .sticky-navigation-logo,
.main-navigation .navigation-logo:not(.mk-sticky-logo) {
display: none !important;
}
.mk-sticky-logo {
display: none;
}
.main-navigation.navigation-stick .mk-sticky-logo {
display: flex;
align-items: center;
margin-right: 20px;
}
.mk-sticky-logo img {
width: 180px;
height: auto;
margin-top: 12px;
}
/* Mobile header — enhanced styling with wave */
.mobile-header-navigation,
.main-navigation.has-mobile-menu-bar {
background: #E7E0CA !important;
z-index: 9999999 !important;
}
/* Mobile header logo — the site SVG uses viewBox only (no intrinsic w/h),
so browsers resolve width/height to 0 under `width:auto; height:auto`.
Set explicit sizing based on the SVG aspect ratio (1911 x 302 ≈ 6.33:1). */
.mobile-header-navigation .site-logo img,
#mobile-header .site-logo img {
width: 180px !important;
height: auto !important;
max-width: 60vw !important;
max-height: 40px !important;
object-fit: contain;
}
.mobile-header-navigation .site-logo,
#mobile-header .site-logo {
flex: 0 0 auto;
min-width: 140px;
}
/* Wherever #mobile-header is in play it owns the curved edge (see its ::after) */
@media (max-width: 950px) {
.gb-shape {
display: none !important;
}
}
@media (max-width: 768px) {
.mobile-header-navigation .site-logo img,
#mobile-header .site-logo img {
width: 160px !important;
max-height: 44px !important;
}
/* Hide the duplicate menu toggle from the desktop header area on mobile */
.mobile-menu-control-wrapper {
display: none !important;
}
}
/* Mobile menu panel — above sticky nav, styled */
.main-navigation .main-nav ul,
.slideout-navigation {
z-index: 9999999 !important;
}
@media (max-width: 768px) {
.main-navigation .main-nav ul {
background: #fff;
border-top: 2px solid #E7E0CA;
}
.main-navigation .main-nav ul li a {
padding: 14px 20px;
font-size: 16px;
color: #3a3226;
border-bottom: 1px solid #f0ebe2;
transition: background 0.2s ease, color 0.2s ease;
}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item a {
background: #faf6ee;
color: #c98e1f;
}
/* Off-canvas from the right (Offside.js slideout) — aligns direction with hamburger position */
body.offside-js--is-open { transform: none !important; }
.slideout-navigation.offside {
left: auto !important;
right: 0 !important;
top: 0;
height: 100vh;
height: 100dvh;
width: min(85vw, 360px) !important;
transform: translateX(100%) !important;
transition: transform 280ms cubic-bezier(.4, 0, .2, 1) !important;
padding-top: env(safe-area-inset-top, 0);
padding-right: env(safe-area-inset-right, 0);
padding-bottom: env(safe-area-inset-bottom, 0);
overflow-y: auto;
overscroll-behavior: contain;
}
.slideout-navigation.offside.is-open {
transform: translateX(0) !important;
}
}
/* Slideout — polished mobile menu */
.slideout-navigation.offside {
background: #fff !important;
box-shadow: -12px 0 40px rgba(0, 0, 0, 0.15);
z-index: 10000000 !important; /* above sticky mobile header (9999999) */
display: flex !important;
flex-direction: column;
}
body.mk-menu-open .mobile-header-navigation,
body.mk-menu-open .main-navigation.has-mobile-menu-bar { visibility: hidden; }
/* Iframes (YouTube/Vimeo) create their own event-capture layer and can swallow
clicks over the slideout menu area. Disable them while the menu is open. */
body.mk-menu-open iframe { pointer-events: none !important; }
.slideout-navigation .inside-navigation {
padding: 0 !important;
margin: 0 !important;
max-width: none !important;
width: 100% !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
justify-content: flex-start !important;
min-height: 100%;
flex: 1;
}
.slideout-navigation .main-nav {
margin: 0 !important;
flex: 0 0 auto;
order: 3;
}
.mk-menu-hero {
order: 2;
padding: 10px 22px 12px;
background: linear-gradient(135deg, #faf6ee 0%, #f1e9d4 100%);
border-bottom: 1px solid rgba(201, 142, 31, 0.2);
font-size: 12.5px;
font-style: italic;
line-height: 1.4;
color: #8a7a5c;
margin: 0;
letter-spacing: 0.01em;
}
.mk-menu-hero em {
font-style: italic;
font-weight: 700;
color: #c98e1f;
}
.slideout-navigation ul.slideout-menu > li.mk-menu-section-label {
display: flex;
align-items: center;
gap: 10px;
border-bottom: none !important;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #c98e1f;
padding: 18px 22px 8px;
margin: 0;
list-style: none;
pointer-events: none;
}
.slideout-navigation ul.slideout-menu > li.mk-menu-section-label::after {
content: "";
flex: 1;
height: 1px;
background: linear-gradient(90deg, rgba(201, 142, 31, 0.35) 0%, rgba(201, 142, 31, 0) 100%);
}
.slideout-navigation ul.slideout-menu > li.mk-menu-section-label:first-child { padding-top: 10px; }
/* Money-back guarantee strip — sits above the logout */
.mk-menu-guarantee {
order: 5;
display: flex;
align-items: center;
gap: 12px;
margin: auto 16px 10px;
padding: 12px 14px;
background: #faf6ee;
border: 1px solid rgba(201, 142, 31, 0.18);
border-radius: 12px;
}
.mk-menu-guarantee__icon {
flex-shrink: 0;
width: 32px; height: 32px;
border-radius: 50%;
background: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
color: #c98e1f;
}
.mk-menu-guarantee__icon svg { width: 18px; height: 18px; }
.mk-menu-guarantee__text {
display: flex;
flex-direction: column;
min-width: 0;
line-height: 1.3;
}
.mk-menu-guarantee__text strong {
font-size: 12.5px;
font-weight: 700;
color: #3a3226;
}
.mk-menu-guarantee__text span {
font-size: 11px;
color: #7a6d4a;
margin-top: 2px;
}
.slideout-navigation ul.slideout-menu {
display: block !important;
padding: 8px 0 !important;
margin: 0 !important;
}
.slideout-navigation ul.slideout-menu > li {
display: block !important;
width: 100%;
border-bottom: 1px solid rgba(201, 142, 31, 0.08);
}
.slideout-navigation ul.slideout-menu > li:last-child { border-bottom: none; }
/* Branded header: injected by JS as .mk-menu-header */
.mk-menu-header {
order: 1;
display: flex;
align-items: center;
gap: 12px;
padding: 12px 64px 12px 18px;
background: linear-gradient(135deg, #faf6ee 0%, #f1e9d4 100%);
border-bottom: 1px solid #ead9b7;
min-height: 60px;
}
.mk-menu-header__logo {
display: inline-flex;
align-items: center;
max-width: 150px;
text-decoration: none !important;
}
.mk-menu-header__logo img {
height: 30px !important;
width: auto !important;
max-width: 150px !important;
object-fit: contain;
display: block;
}
.mk-menu-header__tag {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #a67617;
line-height: 1.2;
margin-left: 2px;
}
/* Close button — absolute top-right, visible over header */
.slideout-navigation .slideout-exit {
position: absolute !important;
top: 10px;
right: 12px;
width: 40px !important;
height: 40px !important;
padding: 0 !important;
margin: 0 !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
background: transparent !important;
color: #3a3226;
border: none;
border-radius: 0;
box-shadow: none !important;
transition: color 0.2s ease, transform 0.15s ease;
z-index: 5;
}
.slideout-navigation .slideout-exit:hover,
.slideout-navigation .slideout-exit:focus-visible {
background: transparent !important;
color: #c98e1f;
outline: none;
}
.slideout-navigation .slideout-exit:active { transform: scale(0.92); }
.slideout-navigation .slideout-exit .gp-icon svg { width: 20px; height: 20px; }
/* Menu links */
.slideout-navigation .main-nav ul li a {
position: relative;
display: flex !important;
align-items: center;
gap: 14px;
padding: 13px 22px !important;
font-size: 15.5px !important;
font-weight: 500;
line-height: 1.3 !important;
color: #3a3226 !important;
background: transparent !important;
box-shadow: inset 0 0 0 transparent;
transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.slideout-navigation .main-nav ul li a::before {
content: "";
width: 22px;
height: 22px;
flex-shrink: 0;
background: currentColor;
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
opacity: 0.55;
transition: opacity 0.2s ease;
}
.slideout-navigation .main-nav ul li a:hover::before,
.slideout-navigation .main-nav ul li a:focus-visible::before,
.slideout-navigation .main-nav ul li.current-menu-item > a::before { opacity: 1; }
/* Icons per href (SVG mask data URIs, Heroicons outline style) */
.slideout-navigation ul li a[href*="/shop"]::before { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.slideout-navigation ul li a[href*="/about"]::before { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.slideout-navigation ul li a[href*="frequently-asked"]::before,
.slideout-navigation ul li a[href*="/faq"]::before { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.slideout-navigation ul li a[href*="loyalty"]::before,
.slideout-navigation ul li a[href*="rewards"]::before { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.slideout-navigation ul li a[href*="/blog"]::before { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.slideout-navigation ul li a[href*="account"]::before,
.slideout-navigation ul li a[href*="my-account"]::before { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.slideout-navigation ul li.mk-menu-item-orders > a::before { -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.slideout-navigation .main-nav ul li a::after {
content: "";
margin-left: auto;
width: 8px;
height: 8px;
border-right: 2.5px solid rgba(201, 142, 31, 0.55);
border-top: 2.5px solid rgba(201, 142, 31, 0.55);
transform: rotate(45deg);
transition: border-color 0.2s ease, transform 0.2s ease;
flex-shrink: 0;
}
.slideout-navigation .main-nav ul li a:hover,
.slideout-navigation .main-nav ul li a:focus-visible,
.slideout-navigation .main-nav ul li.current-menu-item > a {
background: #faf6ee !important;
color: #c98e1f !important;
box-shadow: inset 3px 0 0 #c98e1f;
}
.slideout-navigation .main-nav ul li a:hover::after,
.slideout-navigation .main-nav ul li a:focus-visible::after,
.slideout-navigation .main-nav ul li.current-menu-item > a::after {
border-color: #c98e1f;
transform: rotate(45deg) translate(2px, -2px);
}
/* Logout — secondary button below the guarantee card */
.slideout-navigation a.mk-menu-logout {
order: 6;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 0 16px calc(16px + env(safe-area-inset-bottom, 0px));
padding: 13px 16px;
font-size: 14px;
font-weight: 600;
color: #8a7a5c !important;
text-decoration: none !important;
background: #fff;
border: 1.5px solid #ead9b7;
border-radius: 10px;
letter-spacing: 0.01em;
transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.slideout-navigation a.mk-menu-logout:hover,
.slideout-navigation a.mk-menu-logout:focus-visible {
background: #faf6ee;
color: #c98e1f !important;
border-color: #c98e1f;
outline: none;
}
.mk-menu-logout svg {
width: 16px; height: 16px;
stroke-width: 2;
}
/* When the logout link is absent, bump the guarantee margin to provide safe-area */
.slideout-navigation .inside-navigation > .mk-menu-guarantee:last-child {
margin-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}
/* Overlay + body lock (all viewports; toggled by JS only on mobile) */
.mk-menu-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
opacity: 0;
pointer-events: none;
transition: opacity 220ms ease;
z-index: 9999998;
}
.mk-menu-overlay.is-active {
opacity: 1;
pointer-events: auto;
}
body.mk-menu-open {
overflow: hidden;
touch-action: none;
}
/* Footer logo — main declaration in footer section below */
.gb-container {
background-color: transparent!important;
}
.gb-container-68a7c1b4 {
padding: 190px 40px 80px!important;
margin-bottom: -40px;
}
@media (max-width: 768px) {
.gb-container-68a7c1b4 {
padding: 95px 30px 46px !important;
background-image: none!important;
}
}
/* WC My Account page */
body.woocommerce-account a.woocommerce-button {
margin: 0 4px 6px 0;
padding: 8px 20px;
font-size: 16px;
}
body.woocommerce-account.woocommerce-view-subscription
section.woocommerce-customer-details
.col2-set
.woocommerce-column {
width: 100%;
}
.woocommerce-NoticeGroup .woocommerce-error a {
color: #fff;
}
.ui-dialog.ui-widget.ui-widget-content {
z-index: 120;
}
/* ============================================================================
STICKY HEADER
============================================================================ */
/* Header wrapper: override GP parent theme z-index:10 so sticky nav stays on top */
.header-wrap {
z-index: 999999 !important;
}
/* Static header: z-index only, no shadow */
.site-header {
z-index: 999999 !important;
position: relative;
}
/* Sticky nav: background + shadow when scrolling.
Once stuck the banner is straight edged (the wave below is faded out), so a
soft shadow takes over as the separator from the content underneath. */
#sticky-navigation,
.navigation-stick {
background: linear-gradient(to bottom, #E7E0CA, #DED6BE) !important;
z-index: 999999 !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07) !important;
}
#mobile-header {
background: linear-gradient(to bottom, #E7E0CA, #DED6BE) !important;
/* The beige stops --mk-wave-lift short of the bar's own bottom edge — that gap is
what the wave's crest bites into. Masking #mobile-header instead would have been
the obvious route, but a mask clips its children too, and the logo and the cart
icon hang low enough in the bar to lose their bottoms to the curve.
no-repeat is load-bearing — a gradient sized shorter than its box tiles a second
copy straight back into the gap. */
background-repeat: no-repeat !important;
background-size: 100% calc(100% - var(--mk-wave-lift)) !important;
position: relative;
}
#mobile-header .inside-header {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
}
@media (max-width: 400px) {
.mobile-header-navigation .site-logo img,
#mobile-header .site-logo img {
width: 150px !important;
}
}
/* Mobile header bottom edge — same two-crest rhythm as the desktop hero wave
(.gb-shape-1, hidden below 950px), traced deeper: the strip carries the curve's
full depth, so it reads as a wave instead of a tilted edge. The whole curve is
then translated 40 units (11.3% of the width, ~47px on a phone) to the right, so
the crest lands at 58.6% instead of 47.3%: that is the midpoint of the gap between
the logo and the cart/menu buttons, which sits right of centre because the logo is
~71px wider than the button cluster (both fixed-px, anchored to opposite edges).
Exact on a phone; drifts to ~55% by 950px, which is a few px and reads as centred.
The translation is why the left edge starts partway down a flank rather than at a
trough — the wave carries on off-screen to the left, and the left flank is
extrapolated by mirroring about the trough, which keeps the slope continuous.
Finally the whole curve is sheared 12px across the width (1.7°), right side up,
pivoting on the deepest point so the block keeps its height. The shear costs
headroom in both directions, which is why --mk-wave-h and --mk-wave-lift were
refitted around it rather than left alone.
The path spans y 1.2…38.8 of the 40-unit box — the margins absorb the spline's
overshoot, which past y=40 would get clipped into a straight line by the mask box.
The strip sits --mk-wave-lift higher than the bar's bottom edge, meeting the
beige exactly where background-size cuts it off (1px of overlap, as before).
This one is mobile-only: below 950px the hero shape steps aside for
#mobile-header. On scroll it fades out and the banner becomes straight edged. */
#mobile-header::after {
content: '';
position: absolute;
bottom: calc(1px - var(--mk-wave-h) + var(--mk-wave-lift));
left: 0;
width: 100%;
height: var(--mk-wave-h);
background: #DED6BE;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 40' preserveAspectRatio='none'%3E%3Cpath d='M0,21.5 C5.4,23.2 21.7,28.8 32.5,31.5 C43.3,34.2 54.2,36.8 65,37.8 C75.8,38.8 86.7,38.7 97.5,37.6 C108.3,36.5 119.2,34 130,31.1 C140.8,28.2 151.7,24.2 162.5,20.1 C173.3,16 184.2,9.8 195,6.7 C205.8,3.6 216.7,2 227.5,1.6 C238.3,1.2 249.2,2.5 260,4.2 C270.8,5.9 281.7,9.8 292.5,11.9 C303.3,14 314.2,16 325,16.9 C335.8,17.8 346.7,18.1 357.5,17.2 C368.3,16.3 384.6,12.4 390,11.5 L390,0 L0,0 Z' fill='%23000'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 390 40' preserveAspectRatio='none'%3E%3Cpath d='M0,21.5 C5.4,23.2 21.7,28.8 32.5,31.5 C43.3,34.2 54.2,36.8 65,37.8 C75.8,38.8 86.7,38.7 97.5,37.6 C108.3,36.5 119.2,34 130,31.1 C140.8,28.2 151.7,24.2 162.5,20.1 C173.3,16 184.2,9.8 195,6.7 C205.8,3.6 216.7,2 227.5,1.6 C238.3,1.2 249.2,2.5 260,4.2 C270.8,5.9 281.7,9.8 292.5,11.9 C303.3,14 314.2,16 325,16.9 C335.8,17.8 346.7,18.1 357.5,17.2 C368.3,16.3 384.6,12.4 390,11.5 L390,0 L0,0 Z' fill='%23000'/%3E%3C/svg%3E");
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
pointer-events: none;
transform-origin: top center;
transition: transform 220ms ease, opacity 220ms ease;
}
/* No JS: the curve retracts as soon as the header sticks */
#mobile-header.navigation-stick::after {
transform: scaleY(0);
opacity: 0;
}
/* …and the bar has to get its bitten-off beige back at the same moment, or it would
stick --mk-wave-lift short of its own bottom edge. Needs the id to outrank the
`background` shorthand on .navigation-stick above, which resets background-size
to auto. */
#mobile-header.navigation-stick {
background-size: 100% 100% !important;
}
/* With JS the flattening is driven by scroll position instead of the class, so
it tracks the gesture rather than snapping at the ~5px stick threshold.
mk-header-wave.js keeps --mk-wave-p at 1 (full curve) … 0 (straight edged). */
html.mk-wave-scroll #mobile-header::after {
transform: scaleY(var(--mk-wave-p, 1));
opacity: 1;
transition: none;
}
/* The shadow only makes sense once the edge is straight — it stands in for the
curve, so it arrives at exactly the rate the curve leaves. The bite closes on the
same clock: the beige grows back as the crest retracts, so the two edges stay met
instead of the bar snapping to full height at the ~5px stick threshold. */
html.mk-wave-scroll #mobile-header {
box-shadow: 0 2px 10px rgba(0, 0, 0, calc(0.07 * (1 - var(--mk-wave-p, 1)))) !important;
background-size: 100% calc(100% - var(--mk-wave-lift) * var(--mk-wave-p, 1)) !important;
}
/* Keep product gallery below sticky header */
.woocommerce-product-gallery {
z-index: 999 !important;
position: relative;
}
/* ============================================================================
CUSTOM FOOTER — PREMIUM MARKETING-FOCUSED
============================================================================ */
/* Hide default GenerateBlocks footer (except on checkout where we have a separate one) */
body:not(.woocommerce-checkout) .site-footer > .gb-container {
display: none !important;
}
/* --- Trust Bar (above footer) --- */
.mk-footer-trust-bar {
background: linear-gradient(to bottom, #ffffff 0%, #f7f3ec 35%);
padding: 40px 24px;
border-top: none;
}
.mk-footer-trust-bar__inner {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.mk-footer-trust-bar__item {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 20px;
background: #fff;
border-radius: 12px;
border: 1px solid #e8dece;
transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.mk-footer-trust-bar__item:hover {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
transform: translateY(-2px);
}
.mk-footer-trust-bar__icon {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 10px;
background: linear-gradient(135deg, #fdf5e3 0%, #f5e8cc 100%);
color: #c98e1f;
flex-shrink: 0;
}
.mk-footer-trust-bar__item strong {
display: block;
font-size: 14px;
font-weight: 700;
color: #3a3226;
line-height: 1.3;
}
.mk-footer-trust-bar__item span {
display: block;
font-size: 12.5px;
color: #8a7e6a;
line-height: 1.4;
margin-top: 3px;
}
/* --- Main Footer --- */
.mk-footer {
background: #f0ebe2;
color: #5a5044;
padding: 60px 24px 44px;
padding-top: 100px;
position: relative;
}
.mk-footer::before {
content: '';
position: absolute;
top: -1px;
left: 0;
width: 100%;
height: 60px;
background: #f7f3ec;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L0,40 Q180,60 360,40 T720,40 T1080,40 T1440,40 L1440,0 Z' fill='%23000'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L0,40 Q180,60 360,40 T720,40 T1080,40 T1440,40 L1440,0 Z' fill='%23000'/%3E%3C/svg%3E");
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
z-index: 1;
}
.mk-footer__inner {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 48px;
}
/* Brand column */
.mk-footer__logo {
display: inline-block;
margin-bottom: 20px;
text-decoration: none;
}
.mk-footer__logo-img {
display: block;
width: 220px;
height: auto;
}
.mk-footer__tagline {
font-size: 14px;
line-height: 1.75;
color: #7a6e5e;
margin: 0 0 28px;
max-width: 280px;
}
/* Social icons */
.mk-footer__social {
display: flex;
gap: 10px;
}
.mk-footer__social-link {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 10px;
background: #fff;
border: 1px solid #ddd2c2;
color: #c98e1f;
transition: all 0.25s ease;
text-decoration: none;
cursor: pointer !important;
}
.mk-footer__social-link:hover {
background: #c98e1f;
border-color: #c98e1f;
color: #fff;
transform: translateY(-2px);
}
/* Column headings */
.mk-footer__heading {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: #3a3226;
margin: 0 0 22px;
padding-bottom: 12px;
position: relative;
}
.mk-footer__heading::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 28px;
height: 2px;
background: #c98e1f;
border-radius: 2px;
}
/* Link lists */
.mk-footer__links {
list-style: none;
margin: 0;
padding: 0;
}
.mk-footer__links li {
margin-bottom: 11px;
}
.mk-footer__links a {
color: #6b5f50;
text-decoration: none;
font-size: 14px;
transition: color 0.2s ease, padding-left 0.2s ease;
display: inline-block;
cursor: pointer !important;
}
.mk-footer__links a:hover {
color: #c98e1f;
padding-left: 4px;
cursor: pointer !important;
}
.mk-footer-bottom__links a {
cursor: pointer !important;
}
/* Trust badges */
.mk-footer__badges {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid #ddd2c2;
}
.mk-footer__badge {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
font-size: 13px;
color: #6b5f50;
}
.mk-footer__badge:last-child {
margin-bottom: 0;
}
.mk-footer__badge svg {
flex-shrink: 0;
}
/* Brand mark + Trustpilot column — logo centred over the widget */
.mk-footer__col--trust {
text-align: center;
}
.mk-footer__brandmark {
display: block;
width: 150px;
max-width: 100%;
height: auto;
margin: 0 auto 20px;
}
.mk-footer__trustpilot {
margin-bottom: 16px;
color: #3a3226;
}
/* Strip the widget's white card background so it blends into the cream footer */
.mk-footer__trustpilot .mkr-aggregate,
.mk-footer__trustpilot .mkr-aggregate--light {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* --- Instagram Feed (optional, gated by shortcode existence) --- */
.mk-footer-instagram {
background: #fff;
padding: 70px 24px 60px;
}
.mk-footer-instagram__inner {
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
.mk-footer-instagram__divider {
display: block;
width: 48px;
height: 3px;
background: #c98e1f;
border-radius: 2px;
margin: 0 auto 18px;
}
.mk-footer-instagram__heading {
margin: 0 0 36px;
font-size: clamp(26px, 3.4vw, 40px);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.5px;
text-align: center;
}
.mk-footer-instagram__heading-accent {
color: #c98e1f;
}
@media (max-width: 600px) {
.mk-footer-instagram {
padding: 48px 18px 40px;
}
.mk-footer-instagram__heading {
margin-bottom: 28px;
}
}
/* --- Bottom Bar --- */
.mk-footer-bottom {
background: #e6dfd4;
padding: 20px 24px;
padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
border-top: 1px solid #ddd2c2;
}
.mk-footer-bottom__inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
}
.mk-footer-bottom__links {
display: flex;
gap: 24px;
}
.mk-footer-bottom__menu {
display: flex;
gap: 24px;
list-style: none;
margin: 0;
padding: 0;
}
.mk-footer-bottom__menu li {
margin: 0;
}
.mk-footer-bottom__links a {
color: #7a6e5e;
text-decoration: none;
font-size: 12.5px;
transition: color 0.2s ease;
}
.mk-footer-bottom__links a:hover {
color: #c98e1f;
}
.mk-footer-bottom__payments {
display: flex;
gap: 8px;
align-items: center;
}
.mk-footer-bottom__copy {
font-size: 12px;
color: #8a7e6e;
margin: 0;
width: 100%;
text-align: center;
margin-top: 4px;
}
/* ============================================================================
CUSTOM FOOTER — RESPONSIVE (TABLET)
============================================================================ */
@media (max-width: 900px) {
.mk-footer-trust-bar__inner {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.mk-footer__inner {
grid-template-columns: 1fr 1fr;
gap: 36px;
}
.mk-footer__col--brand {
grid-column: 1 / -1;
}
.mk-footer__tagline {
max-width: 100%;
}
.mk-footer__col--trust {
grid-column: 1 / -1;
}
}
/* ============================================================================
HIDE PRODUCT TAGS ON SINGLE PRODUCT PAGE
============================================================================ */
.single-product .product_meta .tagged_as {
display: none;
}
/* ============================================================================
PRODUCT BADGES (via product tags)
============================================================================ */
/* Bestseller badge — sits between image and product title */
li.product_tag-bestseller .woocommerce-loop-product__title,
li.product.product_tag-bestseller .woocommerce-loop-product__title {
position: relative;
}
li.product_tag-bestseller .woocommerce-loop-product__title::before,
li.product.product_tag-bestseller .woocommerce-loop-product__title::before {
content: "Bestseller";
display: block;
width: fit-content;
margin: 0 auto 10px;
background: #c98e1f;
color: #fff;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
padding: 5px 12px;
border-radius: 4px;
line-height: 1;
pointer-events: none;
}
/* ============================================================================
RELATED PRODUCTS — remove box-shadow hover
============================================================================ */
section.related.products ul.products li.product,
section.related.products ul.products li.product:hover {
box-shadow: none !important;
}
/* ============================================================================
PRODUCT COLLECTION CAROUSEL
============================================================================ */
/* Remove ul/ol margin and padding */
.wp-block-woocommerce-product-collection .wc-block-product-template {
margin: 0;
padding: 0;
list-style: none;
}
/* Desktop: 3 full products visible */
.wp-block-woocommerce-product-collection .is-product-collection-layout-carousel > li {
flex: 0 0 calc(100% / 3);
max-width: calc(100% / 3);
}
/* Position carousel container for absolute arrow placement */
.wp-block-woocommerce-product-collection:has(.is-product-collection-layout-carousel) {
position: relative;
}
/* Arrow group wrapper — override right-justification, span full width */
.wp-block-woocommerce-product-collection .wp-block-group:has(.wc-block-next-previous-buttons) {
position: absolute;
top: 50%;
left: -25px;
right: -25px;
transform: translateY(-50%);
z-index: 10;
pointer-events: none;
}
/* Arrow button container — split buttons to edges */
.wp-block-woocommerce-product-collection .wc-block-next-previous-buttons {
display: flex;
justify-content: space-between;
width: 100%;
pointer-events: none;
}
/* Individual arrow buttons */
.wp-block-woocommerce-product-collection .wc-block-next-previous-buttons__button {
pointer-events: auto;
width: 40px;
height: 40px;
min-width: 40px;
border-radius: 50%;
border: none;
background: var(--contrast, #2c3e50);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
cursor: pointer;
transition: opacity 0.2s ease;
}
.wp-block-woocommerce-product-collection .wc-block-next-previous-buttons__button:hover {
opacity: 0.8;
}
.wp-block-woocommerce-product-collection .wc-block-next-previous-buttons__button[aria-disabled="true"] {
opacity: 0.3;
cursor: default;
}
.wp-block-woocommerce-product-collection .wc-block-next-previous-buttons__icon {
width: 10px;
height: 16px;
}
/* Mobile */
@media (max-width: 768px) {
/* Hide arrows */
.wp-block-woocommerce-product-collection .wp-block-group:has(.wc-block-next-previous-buttons) {
display: none;
}
/* Full-width section — break out of parent padding */
.wp-block-woocommerce-product-collection:has(.is-product-collection-layout-carousel) {
width: 100vw;
margin-left: calc(-50vw + 50%);
}
/* 1 full product with 2nd cut off on the right */
.wp-block-woocommerce-product-collection .is-product-collection-layout-carousel > li {
flex: 0 0 68%;
max-width: 68%;
}
/* Enable touch swiping */
.wp-block-woocommerce-product-collection .is-product-collection-layout-carousel {
padding-left: 16px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.wp-block-woocommerce-product-collection .is-product-collection-layout-carousel::-webkit-scrollbar {
display: none;
}
/* Related products — horizontal scroll on mobile */
section.related.products {
width: 100vw;
margin-left: calc(-50vw + 50%);
}
section.related.products h2 {
padding-left: 16px;
}
section.related.products ul.products {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-left: 16px;
margin: 0;
list-style: none;
gap: 12px;
}
section.related.products ul.products::-webkit-scrollbar {
display: none;
}
section.related.products ul.products li.product {
flex: 0 0 68%;
max-width: 68%;
}
}
/* ============================================================================
CUSTOM FOOTER — RESPONSIVE (MOBILE)
============================================================================ */
@media (max-width: 600px) {
.mk-footer-trust-bar {
padding: 24px 16px;
}
.mk-footer-trust-bar__inner {
grid-template-columns: 1fr;
gap: 12px;
}
.mk-footer-trust-bar__item {
padding: 16px;
}
.mk-footer {
padding: 80px 16px 32px;
}
.mk-footer__inner {
grid-template-columns: 1fr;
gap: 28px;
}
.mk-footer__col--brand {
text-align: center;
}
.mk-footer__logo {
display: flex;
justify-content: center;
}
.mk-footer__tagline {
margin-left: auto;
margin-right: auto;
}
.mk-footer__social {
justify-content: center;
}
.mk-footer__heading {
font-size: 11px;
}
.mk-footer__heading::after {
left: 50%;
transform: translateX(-50%);
}
.mk-footer__col:not(.mk-footer__col--brand) {
text-align: center;
}
.mk-footer__links a {
font-size: 13.5px;
}
.mk-footer__links a:hover {
padding-left: 0;
}
.mk-footer__badges {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
}
.mk-footer__badge {
font-size: 12.5px;
}
.mk-footer-bottom {
padding: 16px;
}
.mk-footer-bottom__inner {
flex-direction: column;
text-align: center;
gap: 12px;
}
.mk-footer-bottom__links {
flex-wrap: wrap;
justify-content: center;
gap: 12px;
}
.mk-footer-bottom__menu {
flex-wrap: wrap;
justify-content: center;
gap: 12px;
}
.mk-footer-bottom__payments {
justify-content: center;
}
.mk-footer-bottom__copy {
margin-top: 0;
}
}
/* ==========================================================================
Homepage Blog Section — Mobile Improvements
Targets the GeneratePress query loop blog cards on the front page.
Horizontal layout on mobile: thumbnail left, title right.
Scoped to .gb-container-a52216ea for specificity over GP Blocks CSS.
========================================================================== */
@media (max-width: 768px) {
.gb-container-a52216ea .gb-grid-wrapper-3f2ade9d {
row-gap: 12px;
margin-left: 0;
}
.gb-container-a52216ea .gb-grid-wrapper-3f2ade9d > .gb-grid-column {
padding-left: 0;
}
.gb-container-a52216ea .gb-container-bda50bfd {
display: flex;
align-items: center;
gap: 14px;
padding: 10px;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 12px;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
overflow: hidden;
}
.gb-container-a52216ea .gb-block-image-0433cbd3 {
flex: 0 0 110px;
width: 110px;
margin-bottom: 0;
}
.gb-container-a52216ea .gb-block-image-0433cbd3 a {
display: block;
}
.gb-container-a52216ea .gb-image-0433cbd3 {
width: 110px !important;
height: 110px !important;
max-width: none !important;
aspect-ratio: 1 / 1 !important;
display: block;
border-radius: 8px;
object-fit: cover;
}
.gb-container-a52216ea h3.gb-headline-a01f9d28 {
flex: 1 1 auto;
min-width: 0;
margin: 0;
padding: 0;
font-size: 16px;
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
}
.navigation-branding img,.site-logo.mobile-header-logo img {
padding: 0!important;
}
/* Floating side-cart basket (mighty-kids-plugin .mk-wsc-basket) — sit lower,
with a smaller bottom gap. The plugin exposes --mk-wsc-basket-bottom as the
offset hook (default 20px); the basket also keeps a 10px margin, so 0 here
lands it ~10px off the bottom edge. */
body {
--mk-wsc-basket-bottom: 0px;
}
/* The plugin's "delivery" store-notice bar rule reads the SAME variable to lift
the basket clear of the bar (84px). Lowering the var would drop the basket onto
the bar, so re-pin that offset while the bar is actually on screen (the theme's
mk-store-notice.js adds .mk-store-notice-hidden once it's dismissed). */
body.woocommerce-demo-store:not(.mk-store-notice-hidden) .mk-wsc-basket {
bottom: 84px !important;
}