/*
 * Theme Name:  MyJollyBox
 * Theme URI:   https://myjollybox.com
 * Description: MyJollyBox — Boutique Handmade Design System v3.0 (GeneratePress child)
 * Author:      MyJollyBox
 * Author URI:  https://myjollybox.com
 * Template:    generatepress
 * Version:     3.0
 * License:     GNU General Public License v2 or later
 * Text Domain: myjollybox
 */

/* ═══════════════════════════════════════════════════════════
   TABLE OF CONTENTS
   1.  Design Tokens
   2.  Base Reset & Body
   3.  Typography
   4.  Site Header
   5.  Logo
   6.  Primary Navigation (desktop)
   7.  Mobile Navigation
   8.  Cart Icon & Mini-Cart Dropdown
   9.  Announcement Bar
   10. Hero Section
   11. Trust Bar
   12. Section Wrappers
   13. WooCommerce Product Grid
   14. WooCommerce Product Single Page
   15. Shop Sidebar & Custom Filters
   16. Category Grid
   17. How It Works
   18. Reviews
   19. Blog Grid
   20. CTA Banner
   21. Site Footer
   22. Buttons
   23. Forms (Cart, Checkout, Contact)
   24. Utility Classes
   25. Responsive Breakpoints
   ═══════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════
   1. DESIGN TOKENS
   ═══════════════════════════════════════════════════════════ */
:root {
  --mjb-mint:          #C8E6D4;
  --mjb-mint-light:    #EBF7EF;
  --mjb-mint-mid:      #A8D5B8;
  --mjb-mint-deep:     #5BA880;
  --mjb-peach:         #F5D5C0;
  --mjb-peach-light:   #FDF0E8;
  --mjb-peach-mid:     #EDBB9A;
  --mjb-peach-deep:    #C97B50;
  --mjb-lav:           #D8D0F0;
  --mjb-lav-light:     #F0EDF9;
  --mjb-lav-mid:       #B8ADE0;
  --mjb-lav-deep:      #7B6FB5;
  --mjb-cream:         #FDFAF6;
  --mjb-warm-white:    #FFFCF8;
  --mjb-text-dark:     #2C2416;
  --mjb-text-mid:      #5A4E3C;
  --mjb-text-soft:     #8C7E6A;
  --mjb-text-hint:     #B5A898;
  --mjb-radius-card:   20px;
  --mjb-radius-btn:    50px;
  --mjb-radius-icon:   16px;
  --mjb-shadow-soft:   0 4px 24px rgba(90,60,30,0.07);
  --mjb-shadow-card:   0 8px 32px rgba(90,60,30,0.10);
  --mjb-shadow-hover:  0 16px 48px rgba(90,60,30,0.16);
  --mjb-ff-display:    'Playfair Display', Georgia, serif;
  --mjb-ff-body:       'DM Sans', -apple-system, sans-serif;
  --mjb-max-width:     1280px;
  --mjb-side-pad:      40px;
  --mjb-header-h:      68px;
}


/* ═══════════════════════════════════════════════════════════
   2. BASE RESET & BODY
   GeneratePress outputs clean HTML — no !important needed here
   ═══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--mjb-ff-body);
  background-color: var(--mjb-warm-white);
  color: var(--mjb-text-dark);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
}

img { max-width: 100%; height: auto; display: block; }

a {
  color: var(--mjb-lav-deep);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover { color: var(--mjb-mint-deep); }

/* GeneratePress layout containers */
.site-content,
.inside-site-inner,
#page {
  background: var(--mjb-warm-white);
}

.inside-article,
.entry-content {
  max-width: 100%;
  padding: 0;
}

/* Remove GP default content padding on homepage */
.home .inside-article { padding: 0; }
.home .entry-header   { display: none; }


/* ═══════════════════════════════════════════════════════════
   3. TYPOGRAPHY
   ═══════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
  font-family: var(--mjb-ff-display);
  color: var(--mjb-text-dark);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin-top: 0;
}
h1 { font-size: clamp(32px, 4.5vw, 52px); }
h2 { font-size: clamp(24px, 3.2vw, 38px); }
h3 { font-size: clamp(19px, 2.4vw, 26px); }
h4 { font-size: 19px; }
h5 { font-size: 16px; }
h6 { font-size: 14px; }

p {
  font-family: var(--mjb-ff-body);
  color: var(--mjb-text-mid);
  line-height: 1.7;
  margin-bottom: 1em;
}
p:last-child { margin-bottom: 0; }


/* ═══════════════════════════════════════════════════════════
   4. SITE HEADER
   GP header element: .site-header / #site-header
   Inner wrapper:     .inside-header
   ═══════════════════════════════════════════════════════════ */
.site-header,
#site-header {
  background: var(--mjb-warm-white);
  border-bottom: 1px solid rgba(90,60,30,0.08);
  box-shadow: 0 2px 16px rgba(90,60,30,0.06);
  position: sticky;
  top: 0;
  z-index: 200;
  width: 100%;
  height: var(--mjb-header-h);
  display: flex;
  align-items: center;
}

.inside-header {
  max-width: var(--mjb-max-width);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--mjb-side-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  height: var(--mjb-header-h);
}

/* Header right cluster — nav + cart */
.mjb-header-right {
  display: flex;
  align-items: center;
  gap: 4px;
}


/* ═══════════════════════════════════════════════════════════
   5. LOGO
   ═══════════════════════════════════════════════════════════ */
.site-branding,
.site-logo,
#site-branding {
  flex-shrink: 0;
  line-height: 1;
}

.site-branding a,
.site-logo a {
  display: block;
  line-height: 1;
}

/* Logo image sizing */
.site-branding img,
.custom-logo,
.site-logo img {
  height: 44px;
  width: auto;
  display: block;
  max-width: none;
}

/* Hide the site title text — we use image only */
.site-title,
.site-description {
  display: none;
}


/* ═══════════════════════════════════════════════════════════
   6. PRIMARY NAVIGATION — DESKTOP
   GP nav element: .main-navigation / #site-navigation
   ═══════════════════════════════════════════════════════════ */
.main-navigation,
#site-navigation {
  display: flex;
  align-items: center;
}

/* Top-level nav list */
.main-navigation ul,
#site-navigation ul,
.main-navigation .sf-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Each nav item */
.main-navigation ul li,
#site-navigation ul li {
  position: relative;
  margin: 0;
  padding: 0;
}

/* Nav links */
.main-navigation ul li a,
#site-navigation ul li a {
  font-family: var(--mjb-ff-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--mjb-text-mid);
  padding: 8px 14px;
  border-radius: 50px;
  transition: background 0.18s ease, color 0.18s ease;
  display: block;
  white-space: nowrap;
  text-decoration: none;
  line-height: 1.4;
}

.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current-menu-ancestor > a {
  background: var(--mjb-mint-light);
  color: var(--mjb-mint-deep);
}

/* Shop dropdown arrow — hide GP default */
.main-navigation .dropdown-menu-toggle { display: none; }

/* ── Dropdown sub-menu ── */
.main-navigation ul li ul,
#site-navigation ul li ul {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--mjb-warm-white);
  border: 1px solid rgba(90,60,30,0.09);
  border-radius: 16px;
  box-shadow: var(--mjb-shadow-card);
  min-width: 200px;
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li:focus-within > ul {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.main-navigation ul li ul li a {
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 10px;
  color: var(--mjb-text-mid);
  white-space: nowrap;
}

.main-navigation ul li ul li a:hover {
  background: var(--mjb-lav-light);
  color: var(--mjb-lav-deep);
}


/* ═══════════════════════════════════════════════════════════
   7. MOBILE NAVIGATION
   Hamburger + dropdown panel, fully custom-coded
   ═══════════════════════════════════════════════════════════ */

/* Hamburger button */
.mjb-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: var(--mjb-cream);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  padding: 10px;
  transition: background 0.2s ease;
  flex-shrink: 0;
}
.mjb-hamburger:hover { background: var(--mjb-peach-light); }

.mjb-hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--mjb-text-dark);
  border-radius: 2px;
  transition: all 0.25s ease;
  transform-origin: center;
}

/* Animated X state */
.mjb-hamburger.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.mjb-hamburger.is-open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.mjb-hamburger.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile dropdown panel */
.mjb-mobile-nav {
  display: none; /* shown via JS */
  position: fixed;
  top: var(--mjb-header-h);
  left: 0;
  right: 0;
  background: var(--mjb-warm-white);
  border-bottom: 1px solid rgba(90,60,30,0.08);
  box-shadow: 0 8px 32px rgba(90,60,30,0.12);
  z-index: 199;
  max-height: calc(100vh - var(--mjb-header-h));
  overflow-y: auto;
  animation: mjbSlideDown 0.22s ease both;
}

.mjb-mobile-nav.is-open { display: block; }

@keyframes mjbSlideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mjb-mobile-nav ul {
  list-style: none;
  margin: 0;
  padding: 12px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mjb-mobile-nav ul li a {
  font-family: var(--mjb-ff-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--mjb-text-dark);
  padding: 12px 16px;
  border-radius: 12px;
  display: block;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}

.mjb-mobile-nav ul li a:hover,
.mjb-mobile-nav ul li.current-menu-item > a {
  background: var(--mjb-mint-light);
  color: var(--mjb-mint-deep);
}

/* Sub-items indented */
.mjb-mobile-nav ul ul {
  padding: 4px 0 4px 16px;
}
.mjb-mobile-nav ul ul li a {
  font-size: 14px;
  color: var(--mjb-text-soft);
  padding: 9px 16px;
}


/* ═══════════════════════════════════════════════════════════
   8. CART ICON & MINI-CART DROPDOWN
   Fully custom — no theme framework interference
   ═══════════════════════════════════════════════════════════ */

/* Cart icon button in header */
.mjb-cart-btn {
  position: relative;
  width: 40px;
  height: 40px;
  background: var(--mjb-peach);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--mjb-peach-deep);
  font-size: 17px;
  transition: all 0.2s ease;
  text-decoration: none;
  flex-shrink: 0;
}
.mjb-cart-btn:hover {
  background: var(--mjb-peach-mid);
  color: var(--mjb-peach-deep);
  transform: scale(1.05);
}

/* Item count badge */
.mjb-cart-count {
  position: absolute;
  top: -3px;
  right: -3px;
  background: var(--mjb-lav-deep);
  color: #fff;
  font-family: var(--mjb-ff-body);
  font-size: 9px;
  font-weight: 700;
  border-radius: 50%;
  width: 17px;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--mjb-warm-white);
  line-height: 1;
}

/* Mini-cart flyout panel */
.mjb-minicart {
  position: absolute;
  top: calc(var(--mjb-header-h) - 2px);
  right: var(--mjb-side-pad);
  width: 340px;
  background: var(--mjb-warm-white);
  border: 1px solid rgba(90,60,30,0.10);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(90,60,30,0.14);
  z-index: 250;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
}
.mjb-minicart.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mjb-minicart-inner {
  padding: 16px 18px 0;
  max-height: 380px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--mjb-lav-mid) transparent;
}
.mjb-minicart-inner::-webkit-scrollbar { width: 4px; }
.mjb-minicart-inner::-webkit-scrollbar-thumb { background: var(--mjb-lav-mid); border-radius: 4px; }

/* Each cart item row */
.mjb-minicart .woocommerce-mini-cart-item,
.mjb-minicart .mini_cart_item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(90,60,30,0.07);
  background: transparent;
  list-style: none;
}
.mjb-minicart .woocommerce-mini-cart-item:last-child,
.mjb-minicart .mini_cart_item:last-child {
  border-bottom: none;
}

/* Thumbnail */
.mjb-minicart .woocommerce-mini-cart-item img,
.mjb-minicart .mini_cart_item img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 12px;
  flex-shrink: 0;
  display: block;
}

/* Product info */
.mjb-minicart .mini-cart-item-details {
  flex: 1;
  min-width: 0;
}

/* Product name */
.mjb-minicart .woocommerce-mini-cart-item .product-name a,
.mjb-minicart .mini_cart_item .mini-cart-item-title a,
.mjb-minicart .mini_cart_item > a:not(.remove) {
  font-family: var(--mjb-ff-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--mjb-text-dark);
  text-decoration: none;
  line-height: 1.3;
  display: block;
  margin-bottom: 3px;
  transition: color 0.18s;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mjb-minicart .woocommerce-mini-cart-item .product-name a:hover,
.mjb-minicart .mini_cart_item > a:not(.remove):hover {
  color: var(--mjb-lav-deep);
}

/* Variation text (e.g. Select Color: Glossy Gold) */
.mjb-minicart .woocommerce-mini-cart-item .variation,
.mjb-minicart .mini_cart_item .variation,
.mjb-minicart .mini_cart_item .variation dt,
.mjb-minicart .mini_cart_item .variation dd,
.mjb-minicart .mini_cart_item .variation p {
  font-family: var(--mjb-ff-body);
  font-size: 12px;
  color: var(--mjb-text-soft);
  margin: 0 0 2px;
  line-height: 1.4;
}

/* Quantity × price */
.mjb-minicart .woocommerce-mini-cart-item .quantity,
.mjb-minicart .mini_cart_item .quantity {
  font-family: var(--mjb-ff-body);
  font-size: 13px;
  color: var(--mjb-text-mid);
  margin-top: 4px;
  display: block;
}

/* Remove button */
.mjb-minicart .woocommerce-mini-cart-item .remove_from_cart_button,
.mjb-minicart .mini_cart_item a.remove {
  font-size: 16px;
  line-height: 1;
  color: var(--mjb-text-hint);
  text-decoration: none;
  flex-shrink: 0;
  align-self: flex-start;
  padding: 2px;
  border-radius: 6px;
  transition: color 0.18s ease, background 0.18s ease;
}
.mjb-minicart .woocommerce-mini-cart-item .remove_from_cart_button:hover,
.mjb-minicart .mini_cart_item a.remove:hover {
  color: #E24B4A;
  background: #FCEBEB;
}

/* Subtotal bar */
.mjb-minicart .woocommerce-mini-cart__total {
  background: var(--mjb-cream);
  border-top: 1px solid rgba(90,60,30,0.08);
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 -0px;
}
.mjb-minicart .woocommerce-mini-cart__total strong {
  font-family: var(--mjb-ff-body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--mjb-text-hint);
}
.mjb-minicart .woocommerce-mini-cart__total .amount {
  font-family: var(--mjb-ff-body);
  font-size: 17px;
  font-weight: 600;
  color: var(--mjb-text-dark);
}

/* Buttons bar */
.mjb-minicart .woocommerce-mini-cart__buttons {
  padding: 14px 18px 18px;
  display: flex;
  gap: 10px;
}
.mjb-minicart .woocommerce-mini-cart__buttons a {
  flex: 1;
  text-align: center;
  font-family: var(--mjb-ff-body);
  font-size: 13px;
  font-weight: 500;
  padding: 11px 16px;
  border-radius: var(--mjb-radius-btn);
  text-decoration: none;
  transition: all 0.2s ease;
  line-height: 1.3;
}

/* View Cart */
.mjb-minicart .woocommerce-mini-cart__buttons .button.wc-forward:not(.checkout) {
  background: transparent;
  color: var(--mjb-text-mid);
  border: 1.5px solid rgba(90,60,30,0.18);
}
.mjb-minicart .woocommerce-mini-cart__buttons .button.wc-forward:not(.checkout):hover {
  background: var(--mjb-peach-light);
  border-color: var(--mjb-peach-mid);
  color: var(--mjb-peach-deep);
}

/* Checkout */
.mjb-minicart .woocommerce-mini-cart__buttons .checkout {
  background: var(--mjb-lav-deep);
  color: #fff;
  border: none;
}
.mjb-minicart .woocommerce-mini-cart__buttons .checkout:hover {
  background: var(--mjb-text-dark);
  transform: translateY(-1px);
}

/* Empty cart state */
.mjb-minicart .woocommerce-mini-cart__empty-message {
  font-family: var(--mjb-ff-body);
  font-size: 14px;
  color: var(--mjb-text-soft);
  text-align: center;
  padding: 32px 20px;
}


/* Prevent duplicate: hide any .mjb-announcement-bar that appears
   INSIDE the page content area (not at the top of body).
   The real bar is output by header.php before #page wrapper. */
#page .mjb-announcement-bar,
#content .mjb-announcement-bar,
.entry-content .mjb-announcement-bar,
main .mjb-announcement-bar {
  display: none;
}


/* ═══════════════════════════════════════════════════════════
   9. ANNOUNCEMENT BAR
   ═══════════════════════════════════════════════════════════ */
.mjb-announcement-bar {
  background: var(--mjb-ann-bg, var(--mjb-lav-deep));
  color: var(--mjb-ann-color, #fff);
  text-align: center;
  font-family: var(--mjb-ff-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 9px 20px;
  line-height: 1.4;
}
.mjb-announcement-bar a {
  color: var(--mjb-mint-light);
  text-decoration: underline;
}
.mjb-announcement-bar .sep {
  opacity: 0.45;
  margin: 0 10px;
}


/* ═══════════════════════════════════════════════════════════
   10. HERO SECTION
   ═══════════════════════════════════════════════════════════ */
.mjb-hero {
  max-width: var(--mjb-max-width);
  margin: 0 auto;
  padding: 40px var(--mjb-side-pad) 48px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items: center;
}

.mjb-hero-image-col { position: relative; }

.mjb-hero-image-col img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 28px;
  display: block;
  box-shadow: var(--mjb-shadow-card);
}

/* Floating badge — bottom-left of hero image */
.mjb-hero-badge {
  position: absolute;
  bottom: 24px;
  left: 24px;
  background: rgba(255,255,255,0.93);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 13px 18px;
  box-shadow: var(--mjb-shadow-card);
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mjb-ff-body);
  font-size: 13px;
  max-width: 240px;
}
.mjb-hero-badge strong {
  display: block;
  font-weight: 500;
  color: var(--mjb-text-dark);
  margin-bottom: 2px;
  font-size: 13px;
}
.mjb-hero-badge span { color: var(--mjb-text-soft); font-size: 12px; }
.mjb-hero-badge-icon {
  width: 38px; height: 38px;
  background: var(--mjb-mint-light);
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}

/* Stars badge — top-right of hero image */
.mjb-hero-stars {
  position: absolute;
  top: 20px; right: 20px;
  background: rgba(255,255,255,0.93);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 12px;
  padding: 9px 14px;
  box-shadow: var(--mjb-shadow-soft);
  font-family: var(--mjb-ff-body);
  font-size: 12px;
  display: flex; align-items: center; gap: 7px;
  color: var(--mjb-text-mid);
}
.mjb-hero-stars .mjb-stars { color: #F5B938; letter-spacing: 1px; font-size: 14px; }

/* Hero content column */
.mjb-hero-content-col {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.mjb-hero-content-col h1 {
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.15;
  margin: 0;
}
.mjb-hero-content-col h1 em {
  font-style: normal;
  color: var(--mjb-lav-deep);
}

.mjb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--mjb-peach-light);
  color: var(--mjb-peach-deep);
  font-family: var(--mjb-ff-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 50px;
  width: fit-content;
  margin-bottom: 0;
}

.mjb-hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.mjb-hero-proof {
  display: flex;
  align-items: center;
  gap: 13px;
}
.mjb-proof-avatars { display: flex; }
.mjb-proof-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid var(--mjb-warm-white);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  margin-left: -7px;
}
.mjb-proof-avatar:first-child { margin-left: 0; }
.mjb-proof-text {
  font-size: 13px;
  color: var(--mjb-text-soft);
  font-family: var(--mjb-ff-body);
}
.mjb-proof-text strong { color: var(--mjb-text-mid); font-weight: 500; }

/* Staggered entrance animation */
.mjb-hero-content-col > * { animation: mjbFadeUp 0.5s ease both; }
.mjb-hero-content-col > *:nth-child(1) { animation-delay: 0.05s; }
.mjb-hero-content-col > *:nth-child(2) { animation-delay: 0.15s; }
.mjb-hero-content-col > *:nth-child(3) { animation-delay: 0.25s; }
.mjb-hero-content-col > *:nth-child(4) { animation-delay: 0.35s; }
.mjb-hero-content-col > *:nth-child(5) { animation-delay: 0.45s; }

@keyframes mjbFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ═══════════════════════════════════════════════════════════
   11. TRUST BAR
   ═══════════════════════════════════════════════════════════ */
.mjb-trust-bar {
  background: linear-gradient(135deg,
    var(--mjb-mint-light) 0%,
    var(--mjb-lav-light)  50%,
    var(--mjb-peach-light) 100%);
  border-top:    1px solid rgba(90,60,30,0.06);
  border-bottom: 1px solid rgba(90,60,30,0.06);
}
.mjb-trust-inner {
  max-width: var(--mjb-max-width);
  margin: 0 auto;
  padding: 24px var(--mjb-side-pad);
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 24px;
}
.mjb-trust-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.mjb-trust-icon {
  width: 52px; height: 52px;
  border-radius: var(--mjb-radius-icon);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; flex-shrink: 0;
}
.mjb-trust-icon--mint  { background: var(--mjb-mint); }
.mjb-trust-icon--peach { background: var(--mjb-peach); }
.mjb-trust-icon--lav   { background: var(--mjb-lav); }
.mjb-trust-item-title {
  font-family: var(--mjb-ff-body);
  font-weight: 500; font-size: 14px;
  color: var(--mjb-text-dark);
  margin-bottom: 3px; display: block;
}
.mjb-trust-item-desc {
  font-family: var(--mjb-ff-body);
  font-size: 13px; color: var(--mjb-text-soft);
  line-height: 1.5; margin: 0;
}


/* ═══════════════════════════════════════════════════════════
   12. SECTION WRAPPERS
   ═══════════════════════════════════════════════════════════ */
.mjb-section {
  max-width: var(--mjb-max-width);
  margin: 0 auto;
  padding: 44px var(--mjb-side-pad);
}
.mjb-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 20px;
}
.mjb-section-tag {
  display: block;
  font-family: var(--mjb-ff-body);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--mjb-text-hint); margin-bottom: 7px;
}
.mjb-section-title {
  font-family: var(--mjb-ff-display);
  font-size: clamp(24px,3vw,34px);
  font-weight: 600;
  color: var(--mjb-text-dark);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
}
.mjb-view-all {
  font-family: var(--mjb-ff-body);
  font-size: 13px; font-weight: 500;
  color: var(--mjb-lav-deep);
  text-decoration: none;
  display: inline-flex;
  align-items: center; gap: 4px;
  white-space: nowrap;
  padding: 8px 16px;
  border-radius: 50px;
  border: 1.5px solid var(--mjb-lav-mid);
  transition: all 0.2s ease;
}
.mjb-view-all:hover {
  background: var(--mjb-lav-light);
  color: var(--mjb-lav-deep);
}
.mjb-section-bg-cream {
  background: var(--mjb-cream);
  border-top: 1px solid rgba(90,60,30,0.06);
  border-bottom: 1px solid rgba(90,60,30,0.06);
}
.mjb-divider {
  border: none;
  border-top: 1px solid rgba(90,60,30,0.07);
  margin: 0;
}


/* ═══════════════════════════════════════════════════════════
   13. WOOCOMMERCE PRODUCT GRID
   ═══════════════════════════════════════════════════════════ */

/* On shop/archive pages without sidebar, give WC container proper padding */
body.post-type-archive-product .woocommerce,
body.tax-product_cat .woocommerce,
body.tax-product_tag .woocommerce {
  max-width: 100%;
  padding: 0;
}

/* Shop page top bar (result count + sort) */
.woocommerce-products-header + .woocommerce-result-count,
.woocommerce-result-count { display: block; margin-bottom: 8px; }


ul.products,
.woocommerce ul.products {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 22px;
  list-style: none;
  padding: 0;
  margin: 0;
}

ul.products li.product,
.woocommerce ul.products li.product {
  background: var(--mjb-warm-white);
  border-radius: var(--mjb-radius-card);
  box-shadow: var(--mjb-shadow-card);
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease;
  cursor: pointer;
  border: none;
  padding: 0;
  margin: 0;
}
ul.products li.product:hover,
.woocommerce ul.products li.product:hover {
  transform: translateY(-5px);
  box-shadow: var(--mjb-shadow-hover);
}

ul.products li.product a img,
.woocommerce ul.products li.product a img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: 0;
  transition: transform 0.4s ease;
  margin: 0;
}
ul.products li.product:hover a img { transform: scale(1.04); }

ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--mjb-ff-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--mjb-text-dark);
  line-height: 1.3;
  padding: 13px 16px 5px;
  margin: 0;
}

ul.products li.product .price,
.woocommerce ul.products li.product .price {
  font-family: var(--mjb-ff-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--mjb-text-dark);
  padding: 5px 16px 14px;
  display: block;
  margin: 0;
}
ul.products li.product .price del { font-size: 12px; color: var(--mjb-text-hint); text-decoration: line-through; margin-right: 5px; }
ul.products li.product .price ins { text-decoration: none; }

ul.products li.product .button,
ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button {
  background: var(--mjb-text-dark);
  color: #fff;
  font-family: var(--mjb-ff-body);
  font-size: 12px;
  font-weight: 500;
  border: none;
  border-radius: 50px;
  padding: 9px 18px;
  margin: 0 16px 15px;
  transition: all 0.2s ease;
  display: inline-block;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: none;
  width: calc(100% - 32px);
  text-align: center;
}
ul.products li.product .button:hover,
.woocommerce ul.products li.product .button:hover {
  background: var(--mjb-lav-deep);
  transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(123,111,181,0.35);
  color: #fff;
}

ul.products li.product .onsale,
.woocommerce ul.products li.product .onsale {
  background: var(--mjb-peach);
  color: var(--mjb-peach-deep);
  font-family: var(--mjb-ff-body);
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  border-radius: 50px; padding: 3px 9px;
  border: none; top: 10px; left: 10px; right: auto;
  min-height: auto; line-height: 1.5;
}

.woocommerce-result-count,
.woocommerce-ordering select {
  font-family: var(--mjb-ff-body);
  font-size: 13px;
  color: var(--mjb-text-soft);
}
.woocommerce-ordering select {
  border: 1.5px solid rgba(90,60,30,0.15);
  border-radius: 50px;
  padding: 6px 14px;
  background: var(--mjb-warm-white);
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  border-radius: 50px;
  font-family: var(--mjb-ff-body);
  font-size: 14px;
  border-color: rgba(90,60,30,0.15);
  color: var(--mjb-text-mid);
  transition: all 0.2s ease;
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--mjb-lav-deep);
  color: #fff;
  border-color: var(--mjb-lav-deep);
}


/* ═══════════════════════════════════════════════════════════
   14. WOOCOMMERCE PRODUCT SINGLE PAGE
   ═══════════════════════════════════════════════════════════ */

/* ── Full width wrapper reset for all WooCommerce pages ── */
/* GP adds float/width to #primary on some layouts — undo it */
body.woocommerce #primary,
body.woocommerce-page #primary {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  padding: 0 !important;
}

/* WC wraps content in .woocommerce — give it proper max-width */
body.woocommerce .woocommerce,
body.woocommerce-page .woocommerce {
  max-width: var(--mjb-max-width);
  margin: 0 auto;
  padding: 32px var(--mjb-side-pad);
  box-sizing: border-box;
}

/* Suppress GP's generate_featured_image on single product pages
   (WC handles its own gallery — GP's post image creates a duplicate) */
body.single-product .post-image {
  display: none !important;
}

/* ── Single product layout ── */
.woocommerce div.product div.images img {
  border-radius: 18px;
  box-shadow: var(--mjb-shadow-card);
}
.woocommerce div.product .product_title {
  font-family: var(--mjb-ff-display);
  font-size: clamp(24px, 3vw, 36px);
  color: var(--mjb-text-dark);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.woocommerce div.product .price {
  font-family: var(--mjb-ff-body);
  font-size: 24px;
  font-weight: 500;
  color: var(--mjb-text-dark);
}
.woocommerce div.product form.cart .variations select,
.woocommerce div.product form.cart select {
  border: 1.5px solid rgba(90,60,30,0.18);
  border-radius: 12px;
  padding: 10px 14px;
  font-family: var(--mjb-ff-body);
  font-size: 14px;
  color: var(--mjb-text-dark);
  background: var(--mjb-warm-white);
}
.woocommerce div.product form.cart .variations select:focus {
  border-color: var(--mjb-lav-mid);
  outline: none;
  box-shadow: 0 0 0 3px rgba(184,173,224,0.25);
}
.woocommerce div.product form.cart div.quantity .qty {
  border: 1.5px solid rgba(90,60,30,0.18);
  border-radius: 12px;
  font-family: var(--mjb-ff-body);
  font-size: 15px;
  padding: 10px 14px;
  color: var(--mjb-text-dark);
}
.woocommerce div.product form.cart .single_add_to_cart_button {
  background: var(--mjb-text-dark);
  color: #fff;
  font-family: var(--mjb-ff-body);
  font-size: 15px; font-weight: 500;
  border-radius: var(--mjb-radius-btn);
  padding: 14px 32px;
  border: none;
  transition: all 0.25s ease;
  cursor: pointer;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover {
  background: var(--mjb-lav-deep);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(123,111,181,0.35);
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
  border-bottom: 2px solid rgba(90,60,30,0.08);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent; border: none; border-radius: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--mjb-ff-body);
  font-size: 14px; font-weight: 500;
  color: var(--mjb-text-soft);
  padding: 10px 20px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--mjb-lav-deep);
  border-bottom: 2px solid var(--mjb-lav-deep);
  margin-bottom: -2px;
}
.woocommerce .woocommerce-breadcrumb {
  font-family: var(--mjb-ff-body);
  font-size: 13px; color: var(--mjb-text-hint);
}
.woocommerce .related h2, .woocommerce .upsells h2 {
  font-family: var(--mjb-ff-display);
  font-size: 24px; color: var(--mjb-text-dark);
  margin-bottom: 24px;
}
/* Personalisation reminder box */
.mjb-personalisation-note {
  background: var(--mjb-mint-light);
  border-radius: 12px;
  padding: 13px 16px;
  margin-bottom: 16px;
  font-family: var(--mjb-ff-body);
  font-size: 13px;
  color: var(--mjb-text-mid);
  line-height: 1.55;
  border-left: 3px solid var(--mjb-mint-deep);
}
.mjb-personalisation-note strong {
  display: block;
  margin-bottom: 4px;
  color: var(--mjb-text-dark);
  font-weight: 500;
}


/* ═══════════════════════════════════════════════════════════
   15. SHOP SIDEBAR & CUSTOM FILTERS
   Layout: sidebar (240px) + product grid
   Custom filter widget rendered via functions.php widget
   ═══════════════════════════════════════════════════════════ */

/* Outer page wrapper — create the sidebar layout.
   ONLY on shop archive and category pages — NOT on single product, cart, checkout, account.
   GP renders: body > #page > #content > #primary.content-area > main#main
   Our sidebar hook injects .mjb-shop-layout inside #main */
body.post-type-archive-product #main,
body.tax-product_cat #main,
body.tax-product_tag #main {
  max-width: var(--mjb-max-width);
  margin: 0 auto;
  padding: 40px var(--mjb-side-pad);
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  align-items: start;
  box-sizing: border-box;
}

/* Also target our injected wrapper as fallback */
body.post-type-archive-product .content-area,
body.tax-product_cat .content-area,
body.tax-product_tag .content-area {
  max-width: var(--mjb-max-width);
  margin: 0 auto;
  padding: 40px var(--mjb-side-pad);
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  align-items: start;
}

/* Override GP's #primary constraints on shop pages */
body.post-type-archive-product #primary,
body.tax-product_cat #primary,
body.tax-product_tag #primary {
  width: 100%;
  max-width: 100%;
  padding: 0;
  float: none;
}

/* Sidebar */
body.post-type-archive-product .widget-area,
body.tax-product_cat .widget-area,
body.tax-product_tag .widget-area {
  position: sticky;
  top: calc(var(--mjb-header-h) + 16px);
  width: 240px;
}

/* Individual sidebar widget card */
body.post-type-archive-product .widget-area .widget,
body.tax-product_cat .widget-area .widget,
body.tax-product_tag .widget-area .widget {
  background: var(--mjb-warm-white);
  border-radius: 16px;
  box-shadow: var(--mjb-shadow-soft);
  padding: 18px;
  margin-bottom: 14px;
  border: 1px solid rgba(90,60,30,0.07);
}

/* Widget title */
body.post-type-archive-product .widget-area .widget-title,
body.tax-product_cat .widget-area .widget-title,
body.tax-product_tag .widget-area .widget-title {
  font-family: var(--mjb-ff-body);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--mjb-text-hint);
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(90,60,30,0.07);
}

/* ── Category list ── */
body.post-type-archive-product .widget-area ul.product-categories,
body.tax-product_cat .widget-area ul.product-categories,
body.tax-product_tag .widget-area .widget_product_categories ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
body.post-type-archive-product .widget-area ul.product-categories li,
body.tax-product_cat .widget-area ul.product-categories li,
body.tax-product_tag .widget-area ul.product-categories li {
  margin: 0; padding: 0;
}
body.post-type-archive-product .widget-area ul.product-categories li a,
body.tax-product_cat .widget-area ul.product-categories li a,
body.tax-product_tag .widget-area ul.product-categories li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mjb-ff-body);
  font-size: 13px; font-weight: 400;
  color: var(--mjb-text-mid);
  padding: 7px 10px;
  border-radius: 9px;
  transition: all 0.15s ease;
  text-decoration: none;
}
body.post-type-archive-product .widget-area ul.product-categories li a:hover,
body.tax-product_cat .widget-area ul.product-categories li a:hover,
body.tax-product_tag .widget-area ul.product-categories li a:hover {
  background: var(--mjb-lav-light);
  color: var(--mjb-lav-deep);
}
body.post-type-archive-product .widget-area ul.product-categories li.current-cat > a,
body.post-type-archive-product .widget-area ul.product-categories li.current-cat-ancestor > a,
body.tax-product_cat .widget-area ul.product-categories li.current-cat > a,
body.tax-product_cat .widget-area ul.product-categories li.current-cat-ancestor > a {
  background: var(--mjb-lav);
  color: var(--mjb-lav-deep);
  font-weight: 500;
}
body.post-type-archive-product .widget-area ul.product-categories li .count,
body.tax-product_cat .widget-area ul.product-categories li .count,
body.tax-product_tag .widget-area ul.product-categories li .count {
  background: var(--mjb-peach-light);
  color: var(--mjb-peach-deep);
  font-family: var(--mjb-ff-body);
  font-size: 10px; font-weight: 600;
  border-radius: 50px;
  padding: 1px 7px;
  flex-shrink: 0;
}
/* Sub-categories */
body.post-type-archive-product .widget-area ul.product-categories ul.children,
body.tax-product_cat .widget-area ul.product-categories ul.children {
  margin: 3px 0 3px 12px;
  padding: 0;
}
body.post-type-archive-product .widget-area ul.product-categories ul.children li a,
body.tax-product_cat .widget-area ul.product-categories ul.children li a {
  font-size: 12px;
  color: var(--mjb-text-soft);
  padding: 5px 10px;
}

/* With sidebar active: product grid uses 3 columns */
body.post-type-archive-product #main-content ul.products,
body.post-type-archive-product .site-main ul.products,
body.tax-product_cat #main-content ul.products,
body.tax-product_cat .site-main ul.products,
body.tax-product_tag .site-main ul.products {
  grid-template-columns: repeat(3,1fr);
}

/* ── Custom Filter Widget (mjb-filter-widget) ── */
/* Built and registered in functions.php — renders price range,
   category pills, and a "Clear filters" link */

.mjb-filter-widget { font-family: var(--mjb-ff-body); }

/* Filter section heading */
.mjb-filter-section-label {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--mjb-text-hint);
  margin: 14px 0 8px;
  display: block;
}
.mjb-filter-section-label:first-child { margin-top: 0; }

/* Category filter pills */
.mjb-filter-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0; padding: 0;
}
.mjb-filter-cats li a {
  display: inline-block;
  font-family: var(--mjb-ff-body);
  font-size: 12px; font-weight: 500;
  color: var(--mjb-text-mid);
  background: var(--mjb-cream);
  border: 1.5px solid rgba(90,60,30,0.12);
  padding: 5px 11px;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.15s ease;
  line-height: 1.4;
}
.mjb-filter-cats li a:hover,
.mjb-filter-cats li.active a {
  background: var(--mjb-lav);
  border-color: var(--mjb-lav-mid);
  color: var(--mjb-lav-deep);
}

/* Price range slider */
.mjb-price-range-wrap { padding: 4px 2px 8px; }

.mjb-price-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: linear-gradient(
    to right,
    var(--mjb-lav-deep) 0%,
    var(--mjb-lav-deep) var(--slider-pct, 100%),
    var(--mjb-lav) var(--slider-pct, 100%),
    var(--mjb-lav) 100%
  );
  border-radius: 4px;
  outline: none;
  cursor: pointer;
  margin: 8px 0;
}
.mjb-price-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  background: var(--mjb-lav-deep);
  border-radius: 50%;
  border: 3px solid var(--mjb-warm-white);
  box-shadow: 0 2px 6px rgba(123,111,181,0.4);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.mjb-price-slider::-webkit-slider-thumb:hover { transform: scale(1.2); }
.mjb-price-slider::-moz-range-thumb {
  width: 18px; height: 18px;
  background: var(--mjb-lav-deep);
  border-radius: 50%;
  border: 3px solid var(--mjb-warm-white);
  box-shadow: 0 2px 6px rgba(123,111,181,0.4);
  cursor: pointer;
}
.mjb-price-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--mjb-text-soft);
  margin-top: 4px;
}
.mjb-price-labels strong { color: var(--mjb-text-dark); font-weight: 500; }

/* Sort by row */
.mjb-filter-sort select {
  width: 100%;
  border: 1.5px solid rgba(90,60,30,0.14);
  border-radius: 10px;
  padding: 8px 12px;
  font-family: var(--mjb-ff-body);
  font-size: 13px;
  color: var(--mjb-text-dark);
  background: var(--mjb-cream);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238C7E6A' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  transition: border-color 0.15s ease;
}
.mjb-filter-sort select:focus {
  border-color: var(--mjb-lav-mid);
  outline: none;
  box-shadow: 0 0 0 3px rgba(184,173,224,0.2);
}

/* Apply / Clear filters */
.mjb-filter-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(90,60,30,0.07);
}
.mjb-filter-apply {
  flex: 1;
  background: var(--mjb-text-dark);
  color: #fff;
  font-family: var(--mjb-ff-body);
  font-size: 12px; font-weight: 500;
  border: none;
  border-radius: 50px;
  padding: 9px 16px;
  cursor: pointer;
  transition: background 0.2s ease;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}
.mjb-filter-apply:hover { background: var(--mjb-lav-deep); color: #fff; }

.mjb-filter-clear {
  font-family: var(--mjb-ff-body);
  font-size: 12px; font-weight: 500;
  color: var(--mjb-text-hint);
  border: 1.5px solid rgba(90,60,30,0.12);
  border-radius: 50px;
  padding: 9px 14px;
  cursor: pointer;
  background: transparent;
  transition: all 0.15s ease;
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
}
.mjb-filter-clear:hover {
  border-color: rgba(90,60,30,0.25);
  color: var(--mjb-text-mid);
}

/* Active filter indicator (shown above product grid) */
.mjb-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin-bottom: 16px;
  font-family: var(--mjb-ff-body);
  font-size: 12px;
  color: var(--mjb-text-soft);
}
.mjb-active-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--mjb-lav-light);
  color: var(--mjb-lav-deep);
  border-radius: 50px;
  padding: 4px 10px;
  font-size: 12px; font-weight: 500;
  text-decoration: none;
}
.mjb-active-filter-tag .remove { font-size: 14px; line-height: 1; opacity: 0.7; }
.mjb-active-filter-tag:hover .remove { opacity: 1; }


/* ═══════════════════════════════════════════════════════════
   16. CATEGORY GRID
   ═══════════════════════════════════════════════════════════ */
.mjb-categories-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 18px;
}
.mjb-category-card {
  border-radius: var(--mjb-radius-card);
  overflow: hidden;
  position: relative;
  aspect-ratio: 4 / 3;
  cursor: pointer;
  transition: transform 0.3s ease;
  display: block;
  text-decoration: none;
}
.mjb-category-card:hover { transform: scale(1.02); }
.mjb-category-card img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.4s ease;
}
.mjb-category-card:hover img { transform: scale(1.06); }
.mjb-cat-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(44,36,22,0.68) 0%, transparent 55%);
  transition: opacity 0.3s ease; opacity: 0.84;
}
.mjb-category-card:hover .mjb-cat-overlay { opacity: 1; }
.mjb-cat-label {
  position: absolute; bottom: 18px; left: 18px; right: 18px;
  color: #fff; text-decoration: none;
}
.mjb-cat-title {
  font-family: var(--mjb-ff-display);
  font-size: 18px; font-weight: 600;
  display: block; margin-bottom: 2px; line-height: 1.2;
}
.mjb-cat-count { font-family: var(--mjb-ff-body); font-size: 12px; opacity: 0.8; }
.mjb-category-card--large { grid-column: span 2; aspect-ratio: 8 / 4; }
.mjb-category-card--large .mjb-cat-title { font-size: 24px; }


/* ═══════════════════════════════════════════════════════════
   17. HOW IT WORKS
   ═══════════════════════════════════════════════════════════ */
.mjb-how-section {
  background: var(--mjb-cream);
  border-top: 1px solid rgba(90,60,30,0.06);
  border-bottom: 1px solid rgba(90,60,30,0.06);
}
.mjb-how-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 6px;
}
.mjb-how-step {
  padding: 24px 20px;
  border-radius: 14px;
  position: relative;
  transition: background 0.2s ease;
}
.mjb-how-step:hover { background: var(--mjb-warm-white); }
.mjb-how-num {
  font-family: var(--mjb-ff-display);
  font-size: 56px; font-weight: 700; line-height: 1;
  margin-bottom: 8px; opacity: 0.09;
  color: var(--mjb-text-dark); display: block;
}
.mjb-how-icon { font-size: 32px; margin-bottom: 14px; display: block; }
.mjb-how-title {
  font-family: var(--mjb-ff-body); font-weight: 500; font-size: 16px;
  color: var(--mjb-text-dark); margin-bottom: 7px; display: block;
}
.mjb-how-desc {
  font-family: var(--mjb-ff-body); font-size: 13px;
  color: var(--mjb-text-soft); line-height: 1.6; margin: 0;
}
.mjb-how-step:not(:last-child)::after {
  content: '→';
  position: absolute; right: -14px; top: 44px;
  font-size: 20px; color: var(--mjb-text-hint); z-index: 2;
}


/* ═══════════════════════════════════════════════════════════
   18. REVIEWS
   ═══════════════════════════════════════════════════════════ */
.mjb-reviews-bg {
  background: linear-gradient(135deg, var(--mjb-peach-light) 0%, var(--mjb-lav-light) 100%);
  border-top: 1px solid rgba(90,60,30,0.06);
  border-bottom: 1px solid rgba(90,60,30,0.06);
}
.mjb-reviews-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.mjb-review-card {
  background: var(--mjb-warm-white);
  border-radius: var(--mjb-radius-card);
  padding: 20px 22px;
  box-shadow: var(--mjb-shadow-soft);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.mjb-review-card:hover { transform: translateY(-4px); box-shadow: var(--mjb-shadow-card); }
.mjb-review-stars { color: #F5B938; font-size: 15px; margin-bottom: 12px; letter-spacing: 2px; display: block; }
.mjb-review-text { font-family: var(--mjb-ff-body); font-size: 14px; color: var(--mjb-text-mid); line-height: 1.7; font-style: italic; margin-bottom: 18px; }
.mjb-review-author { display: flex; align-items: center; gap: 11px; }
.mjb-review-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0; overflow: hidden;
}
.mjb-review-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mjb-review-name { font-family: var(--mjb-ff-body); font-weight: 500; font-size: 13px; color: var(--mjb-text-dark); display: block; }
.mjb-review-date { font-family: var(--mjb-ff-body); font-size: 12px; color: var(--mjb-text-hint); display: block; }
.mjb-review-verified { font-family: var(--mjb-ff-body); font-size: 11px; color: var(--mjb-mint-deep); font-weight: 500; display: flex; align-items: center; gap: 3px; margin-top: 2px; }


/* ═══════════════════════════════════════════════════════════
   19. BLOG GRID
   ═══════════════════════════════════════════════════════════ */
.mjb-blog-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 22px; }
.mjb-blog-card {
  border-radius: var(--mjb-radius-card); overflow: hidden;
  background: var(--mjb-warm-white); box-shadow: var(--mjb-shadow-soft);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex; flex-direction: column; text-decoration: none;
}
.mjb-blog-card:hover { transform: translateY(-4px); box-shadow: var(--mjb-shadow-card); }
.mjb-blog-card img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  display: block; border-radius: 0; transition: transform 0.4s ease;
}
.mjb-blog-card--large img { aspect-ratio: 16 / 7; }
.mjb-blog-card:hover img { transform: scale(1.04); }
.mjb-blog-body { padding: 18px 20px 22px; flex: 1; }
.mjb-blog-tag { font-family: var(--mjb-ff-body); font-size: 10px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--mjb-lav-deep); margin-bottom: 7px; display: block; }
.mjb-blog-title { font-family: var(--mjb-ff-display); font-size: 17px; font-weight: 500; color: var(--mjb-text-dark); line-height: 1.3; margin-bottom: 7px; }
.mjb-blog-card--large .mjb-blog-title { font-size: 20px; }
.mjb-blog-excerpt { font-family: var(--mjb-ff-body); font-size: 13px; color: var(--mjb-text-soft); line-height: 1.6; }
.mjb-blog-meta { font-family: var(--mjb-ff-body); font-size: 12px; color: var(--mjb-text-hint); margin-top: 10px; display: block; }


/* ═══════════════════════════════════════════════════════════
   19b. GP DEFAULT PAGE / BLOG / ARCHIVE — CONTENT CONTAINERS
   Constrains standard WP pages (About, Blog, Contact) and
   GP's default blog archive/single post templates.
   EXCLUDES all WooCommerce pages explicitly.
   ═══════════════════════════════════════════════════════════ */

/* Standard pages — but NOT woocommerce pages */
body:not(.woocommerce):not(.woocommerce-page) .inside-article,
body:not(.woocommerce):not(.woocommerce-page) .entry-content {
  max-width: var(--mjb-max-width);
  margin: 0 auto;
  padding: 40px var(--mjb-side-pad);
  box-sizing: border-box;
}

/* Blog archive and single posts */
body.blog .site-main,
body.archive:not(.woocommerce-page) .site-main,
body.search .site-main {
  max-width: var(--mjb-max-width);
  margin: 0 auto;
  padding: 48px var(--mjb-side-pad);
  box-sizing: border-box;
}

body.blog .hentry,
body.archive:not(.woocommerce-page) .hentry {
  max-width: 780px;
  margin: 0 auto 48px;
}

/* Blog/archive featured image */
body.blog .post-image,
body.archive:not(.woocommerce-page) .post-image,
body.single:not(.woocommerce) .post-image {
  max-width: var(--mjb-max-width);
  margin: 0 auto;
  padding: 0 var(--mjb-side-pad);
  box-sizing: border-box;
}
body.blog .post-image img,
body.archive:not(.woocommerce-page) .post-image img,
body.single:not(.woocommerce) .post-image img,
body.blog .wp-post-image,
body.archive:not(.woocommerce-page) .wp-post-image {
  width: 100%;
  max-height: 480px;
  object-fit: cover;
  border-radius: var(--mjb-radius-card);
  display: block;
}

/* Single blog post text width */
body.single-post .entry-content {
  max-width: 740px;
  margin: 0 auto;
  padding: 40px var(--mjb-side-pad);
}

/* Page title on standard pages */
body:not(.woocommerce):not(.woocommerce-page) .entry-header {
  max-width: var(--mjb-max-width);
  margin: 0 auto;
  padding: 40px var(--mjb-side-pad) 0;
}


.mjb-cta-banner {
  background: var(--mjb-text-dark);
  border-radius: 28px;
  padding: 36px 44px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  margin: 0 auto 56px;
  max-width: calc(var(--mjb-max-width) - 80px);
  position: relative;
  overflow: hidden;
}
.mjb-cta-banner::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 10% 50%,  rgba(200,230,212,0.13) 0%, transparent 50%),
    radial-gradient(circle at 90% 30%,  rgba(216,208,240,0.13) 0%, transparent 50%);
  pointer-events: none;
}
.mjb-cta-title {
  font-family: var(--mjb-ff-display);
  font-size: clamp(22px, 2.8vw, 33px);
  color: #fff; font-weight: 600;
  line-height: 1.2; margin: 0 0 6px;
}
.mjb-cta-sub { font-family: var(--mjb-ff-body); font-size: 14px; color: rgba(255,255,255,0.62); margin: 0; }
.mjb-cta-actions { display: flex; gap: 10px; flex-wrap: wrap; position: relative; z-index: 1; }


/* ═══════════════════════════════════════════════════════════
   21. SITE FOOTER
   ═══════════════════════════════════════════════════════════ */
.site-footer,
#colophon {
  background: var(--mjb-footer-bg, var(--mjb-text-dark));
  color: rgba(255,255,255,0.62);
  padding: 52px var(--mjb-side-pad) 28px;
}
.mjb-footer-inner {
  max-width: var(--mjb-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 44px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.mjb-footer-brand-desc {
  font-family: var(--mjb-ff-body);
  font-size: 13px; line-height: 1.7;
  color: rgba(255,255,255,0.55);
  max-width: 260px; margin: 12px 0 20px;
}
/* Footer logo */
.mjb-footer-logo img {
  height: 36px; width: auto; display: block; margin-bottom: 0;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
/* Social buttons */
.mjb-social-row { display: flex; gap: 8px; }
.mjb-social-btn {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: rgba(255,255,255,0.07);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; text-decoration: none;
  color: rgba(255,255,255,0.65);
  transition: all 0.2s ease;
}
.mjb-social-btn:hover { background: var(--mjb-lav-deep); color: #fff; }
/* Footer column */
.mjb-footer-col h4 {
  font-family: var(--mjb-ff-body);
  font-size: 11px; font-weight: 600;
  color: #fff; text-transform: uppercase;
  letter-spacing: 0.09em; margin: 0 0 14px;
}
.mjb-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mjb-footer-col ul a {
  font-family: var(--mjb-ff-body); font-size: 13px;
  color: rgba(255,255,255,0.55); text-decoration: none;
  transition: color 0.2s ease;
}
.mjb-footer-col ul a:hover { color: var(--mjb-mint); }
.mjb-footer-col address {
  font-style: normal;
  font-family: var(--mjb-ff-body); font-size: 13px;
  color: rgba(255,255,255,0.45); line-height: 1.7;
  margin-top: 16px;
}
/* Footer bottom bar */
.mjb-footer-bottom {
  max-width: var(--mjb-max-width);
  margin: 0 auto;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mjb-ff-body);
  font-size: 12px;
  color: rgba(255,255,255,0.32);
  flex-wrap: wrap;
  gap: 10px;
}
.mjb-pay-badges { display: flex; gap: 7px; }
.mjb-pay-badge {
  background: rgba(255,255,255,0.07);
  border-radius: 6px; padding: 3px 9px;
  font-family: var(--mjb-ff-body);
  font-size: 10px; font-weight: 600;
  color: rgba(255,255,255,0.5); letter-spacing: 0.04em;
}
/* Remove GP footer default */
.site-footer .inside-footer { display: none; }


/* ═══════════════════════════════════════════════════════════
   22. BUTTONS
   ═══════════════════════════════════════════════════════════ */
.mjb-btn-primary {
  background: var(--mjb-text-dark); color: #fff;
  font-family: var(--mjb-ff-body); font-size: 14px; font-weight: 500;
  padding: 13px 26px; border-radius: var(--mjb-radius-btn);
  text-decoration: none; display: inline-flex; align-items: center; gap: 7px;
  border: none; transition: all 0.25s ease; white-space: nowrap; cursor: pointer;
}
.mjb-btn-primary:hover {
  background: var(--mjb-lav-deep); color: #fff;
  transform: translateY(-2px); box-shadow: 0 8px 22px rgba(123,111,181,0.35);
}
.mjb-btn-secondary {
  background: transparent; color: var(--mjb-text-mid);
  font-family: var(--mjb-ff-body); font-size: 14px; font-weight: 500;
  padding: 13px 22px; border-radius: var(--mjb-radius-btn);
  text-decoration: none; display: inline-flex; align-items: center; gap: 7px;
  border: 1.5px solid rgba(90,60,30,0.18); transition: all 0.25s ease; white-space: nowrap;
}
.mjb-btn-secondary:hover {
  border-color: var(--mjb-lav-mid); color: var(--mjb-lav-deep); background: var(--mjb-lav-light);
}
.mjb-btn-light {
  background: #fff; color: var(--mjb-text-dark);
  font-family: var(--mjb-ff-body); font-size: 14px; font-weight: 500;
  padding: 13px 26px; border-radius: var(--mjb-radius-btn);
  text-decoration: none; display: inline-flex; align-items: center; gap: 7px;
  border: none; transition: all 0.25s ease; white-space: nowrap;
}
.mjb-btn-light:hover { background: var(--mjb-mint); color: var(--mjb-mint-deep); }
.mjb-btn-outline-light {
  background: transparent; color: rgba(255,255,255,0.82);
  font-family: var(--mjb-ff-body); font-size: 14px; font-weight: 500;
  padding: 13px 22px; border-radius: var(--mjb-radius-btn);
  text-decoration: none; display: inline-flex; align-items: center; gap: 7px;
  border: 1.5px solid rgba(255,255,255,0.28); transition: all 0.25s ease; white-space: nowrap;
}
.mjb-btn-outline-light:hover { border-color: rgba(255,255,255,0.7); color: #fff; }

/* GP / WC buttons */
.wp-block-button.is-style-fill .wp-block-button__link {
  background: var(--mjb-text-dark); color: #fff;
  font-family: var(--mjb-ff-body); font-weight: 500;
  border-radius: var(--mjb-radius-btn); padding: 13px 26px; border: none;
  transition: all 0.25s ease;
}
.wp-block-button.is-style-fill .wp-block-button__link:hover {
  background: var(--mjb-lav-deep);
}
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent; color: var(--mjb-text-mid);
  font-family: var(--mjb-ff-body); font-weight: 500;
  border-radius: var(--mjb-radius-btn);
  border: 1.5px solid rgba(90,60,30,0.2); padding: 13px 22px;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--mjb-lav-light); color: var(--mjb-lav-deep); border-color: var(--mjb-lav-mid);
}
.woocommerce .checkout-button,
.woocommerce #place_order {
  background: var(--mjb-lav-deep); color: #fff;
  font-family: var(--mjb-ff-body); font-size: 16px; font-weight: 500;
  border-radius: var(--mjb-radius-btn); padding: 15px 36px;
  border: none; transition: all 0.25s ease; width: 100%; cursor: pointer;
  letter-spacing: 0.02em;
}
.woocommerce .checkout-button:hover, .woocommerce #place_order:hover {
  background: var(--mjb-text-dark); transform: translateY(-2px);
}


/* ═══════════════════════════════════════════════════════════
   23. FORMS
   ═══════════════════════════════════════════════════════════ */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-input-wrapper input,
.wpforms-field input,
.wpforms-field textarea,
.wpforms-field select {
  border: 1.5px solid rgba(90,60,30,0.17);
  border-radius: 12px;
  padding: 11px 15px;
  font-family: var(--mjb-ff-body); font-size: 14px;
  color: var(--mjb-text-dark);
  background: var(--mjb-warm-white);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.wpforms-field input:focus,
.wpforms-field textarea:focus {
  border-color: var(--mjb-lav-mid);
  outline: none;
  box-shadow: 0 0 0 3px rgba(184,173,224,0.22);
}
.woocommerce form .form-row label,
.wpforms-field label {
  font-family: var(--mjb-ff-body); font-size: 13px; font-weight: 500;
  color: var(--mjb-text-mid); margin-bottom: 5px; display: block;
}
.wpforms-submit {
  background: var(--mjb-text-dark); color: #fff;
  font-family: var(--mjb-ff-body); font-size: 14px; font-weight: 500;
  border-radius: var(--mjb-radius-btn); padding: 12px 30px;
  border: none; transition: all 0.25s ease; cursor: pointer;
}
.wpforms-submit:hover { background: var(--mjb-lav-deep); }
.woocommerce table.shop_table {
  border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(90,60,30,0.08);
}
.woocommerce table.shop_table thead th {
  background: var(--mjb-cream);
  font-family: var(--mjb-ff-body); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--mjb-text-hint); border: none;
}
.woocommerce table.shop_table td {
  font-family: var(--mjb-ff-body); color: var(--mjb-text-mid);
  border-color: rgba(90,60,30,0.07);
}
.woocommerce-message, .woocommerce-info {
  background: var(--mjb-mint-light); border-color: var(--mjb-mint-mid);
  color: var(--mjb-text-mid); border-radius: 12px;
}


/* ═══════════════════════════════════════════════════════════
   24. UTILITY
   ═══════════════════════════════════════════════════════════ */
.mjb-pill { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mjb-ff-body); font-size: 10px; font-weight: 500; padding: 3px 10px; border-radius: 50px; letter-spacing: 0.06em; text-transform: uppercase; }
.mjb-pill--mint  { background: var(--mjb-mint);  color: var(--mjb-mint-deep); }
.mjb-pill--peach { background: var(--mjb-peach); color: var(--mjb-peach-deep); }
.mjb-pill--lav   { background: var(--mjb-lav);   color: var(--mjb-lav-deep); }
.mjb-card { background: var(--mjb-warm-white); border-radius: var(--mjb-radius-card); box-shadow: var(--mjb-shadow-card); overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.mjb-card:hover { transform: translateY(-4px); box-shadow: var(--mjb-shadow-hover); }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }


/* ═══════════════════════════════════════════════════════════
   25. RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════════════════════════ */

/* 1100px — narrower desktop */
@media (max-width: 1100px) {
  ul.products, .woocommerce ul.products { grid-template-columns: repeat(3,1fr); }

  body.post-type-archive-product .content-area,
  body.tax-product_cat .content-area,
  body.tax-product_tag .content-area {
    grid-template-columns: 200px 1fr;
    gap: 24px;
  }
  body.post-type-archive-product .widget-area,
  body.tax-product_cat .widget-area,
  body.tax-product_tag .widget-area { width: 200px; }
  body.post-type-archive-product #main-content ul.products,
  body.post-type-archive-product .site-main ul.products,
  body.tax-product_cat .site-main ul.products,
  body.tax-product_tag .site-main ul.products {
    grid-template-columns: repeat(2,1fr);
  }
}

/* 900px — tablet */
@media (max-width: 900px) {
  :root { --mjb-side-pad: 24px; }

  /* Header: show hamburger, hide desktop nav */
  .main-navigation, #site-navigation { display: none; }
  .mjb-hamburger { display: flex; }

  .mjb-hero { grid-template-columns: 1fr; padding: 36px var(--mjb-side-pad) 44px; gap: 32px; }
  .mjb-hero-image-col { order: -1; }
  .mjb-trust-inner { grid-template-columns: 1fr; gap: 18px; }

  ul.products, .woocommerce ul.products { grid-template-columns: repeat(2,1fr); gap: 16px; }

  /* Sidebar collapses to horizontal scrollable pill bar */
  body.post-type-archive-product .content-area,
  body.tax-product_cat .content-area,
  body.tax-product_tag .content-area {
    grid-template-columns: 1fr;
    padding: 24px var(--mjb-side-pad);
  }
  body.post-type-archive-product .widget-area,
  body.tax-product_cat .widget-area,
  body.tax-product_tag .widget-area {
    position: static; width: 100%;
    display: flex; flex-wrap: nowrap; overflow-x: auto;
    gap: 8px; padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  body.post-type-archive-product .widget-area::-webkit-scrollbar,
  body.tax-product_cat .widget-area::-webkit-scrollbar { display: none; }
  body.post-type-archive-product .widget-area .widget,
  body.tax-product_cat .widget-area .widget,
  body.tax-product_tag .widget-area .widget {
    flex-shrink: 0; padding: 10px 14px; margin-bottom: 0;
    box-shadow: none; border-radius: 50px;
  }
  body.post-type-archive-product .widget-area .widget-title,
  body.tax-product_cat .widget-area .widget-title { display: none; }
  body.post-type-archive-product .widget-area ul.product-categories,
  body.tax-product_cat .widget-area ul.product-categories {
    flex-direction: row; gap: 5px;
  }
  body.post-type-archive-product .widget-area ul.product-categories li a,
  body.tax-product_cat .widget-area ul.product-categories li a {
    white-space: nowrap; font-size: 12px;
    padding: 5px 12px; border-radius: 50px;
    border: 1.5px solid rgba(90,60,30,0.10);
    background: var(--mjb-warm-white);
  }
  body.post-type-archive-product .widget-area ul.product-categories li.current-cat > a,
  body.tax-product_cat .widget-area ul.product-categories li.current-cat > a {
    background: var(--mjb-lav); border-color: var(--mjb-lav-mid);
  }
  body.post-type-archive-product .widget-area ul.product-categories ul.children,
  body.tax-product_cat .widget-area ul.product-categories ul.children { display: none; }
  body.post-type-archive-product #main-content ul.products,
  body.post-type-archive-product .site-main ul.products,
  body.tax-product_cat .site-main ul.products,
  body.tax-product_tag .site-main ul.products { grid-template-columns: repeat(2,1fr); }

  .mjb-categories-grid { grid-template-columns: repeat(2,1fr); }
  .mjb-category-card--large { grid-column: span 2; aspect-ratio: 8 / 4; }
  .mjb-how-grid { grid-template-columns: repeat(2,1fr); }
  .mjb-how-step:not(:last-child)::after { display: none; }
  .mjb-reviews-grid { grid-template-columns: 1fr; }
  .mjb-blog-grid { grid-template-columns: 1fr; }
  .mjb-cta-banner { grid-template-columns: 1fr; padding: 30px 28px; }
  .mjb-section-header { flex-direction: column; align-items: flex-start; gap: 10px; }
  .mjb-footer-inner { grid-template-columns: 1fr 1fr; gap: 28px; }
}

/* 600px — mobile */
@media (max-width: 600px) {
  :root { --mjb-side-pad: 16px; --mjb-header-h: 60px; }

  .site-branding img, .custom-logo { height: 36px; }

  .mjb-hero { padding: 28px 16px 36px; gap: 24px; }
  .mjb-hero-content-col h1 { font-size: 28px; }
  .mjb-hero-badge { bottom: 14px; left: 14px; }
  .mjb-hero-stars { top: 14px; right: 14px; }

  .mjb-section { padding: 36px 16px; }

  ul.products, .woocommerce ul.products { grid-template-columns: repeat(2,1fr); gap: 10px; }
  ul.products li.product .woocommerce-loop-product__title,
  ul.products li.product h2 { font-size: 12px; padding: 9px 11px 4px; }
  ul.products li.product .price { font-size: 13px; padding: 4px 11px 11px; }
  ul.products li.product .button { font-size: 11px; padding: 8px 10px; margin: 0 11px 11px; width: calc(100% - 22px); }

  .mjb-categories-grid { grid-template-columns: 1fr 1fr; }
  .mjb-category-card--large { grid-column: span 2; aspect-ratio: 4 / 3; }
  .mjb-how-grid { grid-template-columns: 1fr; }
  .mjb-how-step { padding: 20px 16px; }
  .mjb-cta-banner { padding: 26px 20px; border-radius: 18px; }
  .mjb-cta-actions { flex-direction: column; }
  .mjb-footer-inner { grid-template-columns: 1fr; gap: 24px; }
  .mjb-footer-bottom { flex-direction: column; align-items: flex-start; }
  .mjb-minicart { right: 10px; width: calc(100vw - 20px); }
}