/* ============================================================
   Mocy Foods - design system over Twenty Twenty-Five + WooCommerce
   Aesthetic: warm market editorial. Leaf green + marigold + clay
   on cream paper. Fraunces display / Hanken Grotesk body. Mobile-first.
   ============================================================ */

:root {
  --cream:      #FBF5E9;
  --cream-200:  #F4EAD6;
  --paper:      #FFFFFF;
  --ink:        #241F1A;
  --muted:      #6E685D;
  --green:      #1F4D3A;
  --green-700:  #163829;
  --green-300:  #3C7A5E;
  --amber:      #E69A2E;
  --amber-600:  #CE831B;
  --clay:       #C04A2B;
  --line:       #E7DCC6;
  --shadow:     0 1px 2px rgba(36,31,26,.04), 0 12px 28px -12px rgba(36,31,26,.18);
  --shadow-sm:  0 1px 2px rgba(36,31,26,.05), 0 6px 16px -10px rgba(36,31,26,.16);
  --radius:     16px;
  --radius-sm:  11px;
  --maxw:       1220px;
  --display:    "Fraunces", Georgia, "Times New Roman", serif;
  --body:       "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
}

/* ---- Typography base (override theme presets) ---- */
body,
.wp-site-blocks,
p, li, a, span, label, input, textarea, select, button,
.wp-block-post-content {
  font-family: var(--body) !important;
}
body {
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: .002em;
}
h1, h2, h3, h4, h5,
.wp-block-heading,
.wp-block-site-title a,
.wc-block-components-product-name,
.woocommerce-loop-product__title,
.product_title {
  font-family: var(--display) !important;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.06;
  color: var(--ink);
}

/* ---- Announcement bar (injected via wp_body_open) ---- */
.mocy-topbar {
  background: var(--green-700);
  color: #F6EFDF;
  font-size: .82rem;
  letter-spacing: .04em;
  text-align: center;
  padding: .55rem 1rem;
  font-weight: 500;
}
.mocy-topbar strong { color: var(--amber); font-weight: 700; }

/* ---- Header / nav ---- */
header.wp-block-template-part {
  background: rgba(251,245,233,.86);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
header .wp-block-group { padding-top: .35rem; padding-bottom: .35rem; }
.wp-block-site-title a {
  font-size: 1.5rem !important;
  font-weight: 700;
  color: var(--green) !important;
  text-decoration: none;
}
/* Logo in header */
.mocy-header { padding-top: .5rem; padding-bottom: .35rem; }
.wp-block-site-logo img { height: 46px; width: auto; max-width: none; }
@media (max-width: 600px) { .wp-block-site-logo img { height: 38px; } }

/* Header utility row (search + hotline + account + cart) */
/* Break the header rows out of the theme's narrow content width. */
.mocy-header > .mocy-header__main,
.mocy-header > .mocy-header__nav { max-width: var(--maxw) !important; }
.mocy-header__main { gap: 1.1rem 1.4rem; }
.mocy-search { flex: 1 1 240px; display: flex; max-width: 500px; min-width: 0; }
.mocy-search input[type="search"] {
  flex: 1; min-width: 0; border: 1.5px solid var(--line); border-right: none;
  border-radius: 999px 0 0 999px; padding: .68em 1.1em; font-size: .95rem;
  background: var(--paper); color: var(--ink); outline: none;
}
.mocy-search input[type="search"]:focus { border-color: var(--green-300); }
.mocy-search button {
  border: none; background: var(--green); color: #FBF5E9;
  border-radius: 0 999px 999px 0; padding: 0 1.15em; display: grid; place-items: center; cursor: pointer;
}
.mocy-search button svg { width: 18px; height: 18px; }
.mocy-search button:hover { background: var(--green-700); }

.mocy-header__utils { gap: 1.15rem; }
.mocy-hotline { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--ink); }
.mocy-hotline__ico { width: 38px; height: 38px; border-radius: 50%; background: var(--cream); color: var(--green); display: grid; place-items: center; flex: 0 0 auto; }
.mocy-hotline__ico svg { width: 19px; height: 19px; }
.mocy-hotline__txt { display: flex; flex-direction: column; line-height: 1.12; }
.mocy-hotline__txt small { font-size: .7rem; color: var(--muted); letter-spacing: .02em; }
.mocy-hotline__txt strong { font-size: .98rem; color: var(--green); font-weight: 700; }
.mocy-account { display: flex; align-items: center; gap: .42rem; text-decoration: none; color: var(--ink); font-weight: 600; font-size: .9rem; }
.mocy-account svg { width: 23px; height: 23px; }

/* Header cart icon + live count badge */
.mocy-cart { position: relative; display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; }
.mocy-cart:hover { color: var(--green); }
.mocy-cart svg { width: 26px; height: 26px; }
.mocy-cart-count {
  position: absolute; top: -7px; right: -10px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; background: var(--amber); color: var(--green-700);
  font-size: .68rem; font-weight: 800; line-height: 18px; text-align: center; display: none;
}
.mocy-cart-count.has-items { display: block; }

/* Add-to-cart button feedback */
.add_to_cart_button.mocy-loading { opacity: .8; pointer-events: none; }
.add_to_cart_button.mocy-added { background: var(--green-700) !important; }
/* hide the default WooCommerce "View cart" link that appears after the button (we use a toast) */
.woocommerce ul.products li.product .added_to_cart,
ul.wp-block-post-template .added_to_cart { display: none !important; }

/* Toast */
.mocy-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 20px);
  background: var(--green-700); color: #FBF5E9; padding: .85rem 1.3rem; border-radius: 999px;
  box-shadow: 0 12px 32px -8px rgba(0,0,0,.45); z-index: 95;
  display: flex; align-items: center; gap: .85rem; font-weight: 600; font-size: .92rem;
  opacity: 0; transition: opacity .3s ease, transform .3s ease; pointer-events: none;
}
.mocy-toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.mocy-toast a { color: var(--amber); text-decoration: none; font-weight: 800; white-space: nowrap; }
@media (max-width: 600px) {
  .mocy-toast { left: 12px; right: 12px; bottom: 90px; transform: translateY(20px); justify-content: center; }
  .mocy-toast.show { transform: translateY(0); }
}

.mocy-header__nav { border-top: 1px solid var(--line); margin-top: .4rem; padding-top: .15rem; }
.mocy-header__nav .wp-block-navigation {
  font-weight: 600; font-size: .82rem;
  width: 100%; max-width: none !important;  /* escape the theme's content-width clamp */
}
/* All 14 categories on ONE line, evenly spread; scroll on narrow desktops rather than wrap. */
.mocy-header__nav .wp-block-navigation__container {
  flex-wrap: nowrap !important;
  gap: 0 .6rem !important;
  overflow-x: auto;
  scrollbar-width: none;
  justify-content: space-between;
  width: 100%;
}
.mocy-header__nav .wp-block-navigation__container::-webkit-scrollbar { display: none; }
.mocy-header__nav .wp-block-navigation-item { flex: 0 0 auto; white-space: nowrap; }
.mocy-header__nav .wp-block-navigation-item__content { padding: .3rem 0; letter-spacing: -.01em; }

@media (max-width: 820px) {
  .mocy-hotline__txt { display: none; }
  .mocy-account span { display: none; }
  .mocy-search { order: 5; flex-basis: 100%; max-width: none; margin-top: .2rem; }
}
.wp-block-navigation { font-weight: 600; }
.wp-block-navigation a {
  color: var(--ink);
  position: relative;
  text-decoration: none !important;
}
.wp-block-navigation .wp-block-navigation-item__content::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -4px;
  height: 2px; background: var(--amber); transition: right .28s ease;
}
.wp-block-navigation .wp-block-navigation-item:hover .wp-block-navigation-item__content::after { right: 0; }
.wc-block-mini-cart__button { color: var(--ink); }
/* Hide WooCommerce's auto-hooked customer-account + mini-cart blocks next to the nav
   (we use our own .mocy-account link and .mocy-cart icon). */
.wc-block-customer-account,
.mocy-header__nav ~ .wp-block-woocommerce-mini-cart,
.mocy-header .wp-block-woocommerce-mini-cart { display: none !important; }
/* The mini-cart drawer must be off-canvas (fixed), not in flow - otherwise its
   ~480px fixed width forces horizontal page overflow on phones. */
.wc-block-mini-cart__drawer {
  position: fixed !important;
  max-width: min(420px, 92vw) !important;
}

/* ============================================================
   HERO
   ============================================================ */
.mocy-hero {
  position: relative;
  margin: 0 0 0 0 !important;
  padding: clamp(3rem, 7vw, 6rem) 1.25rem clamp(3.2rem, 8vw, 6.5rem) !important;
  background:
    radial-gradient(120% 120% at 12% 0%, rgba(230,154,46,.18) 0%, rgba(230,154,46,0) 45%),
    radial-gradient(120% 120% at 100% 30%, rgba(192,74,43,.14) 0%, rgba(192,74,43,0) 48%),
    linear-gradient(180deg, #20503C 0%, #1A4232 100%);
  color: #FBF5E9;
  overflow: hidden;
}
.mocy-hero::before {
  /* subtle grain/texture */
  content: ""; position: absolute; inset: 0; opacity: .06; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(255,255,255,.9) .5px, transparent .5px);
  background-size: 4px 4px;
}
.mocy-hero > * { position: relative; z-index: 2; max-width: var(--maxw); margin-inline: auto; }

/* Product-collage hero art. Mobile: stacked below the copy. Desktop: floated right. */
.mocy-hero::after {
  content: ""; display: block; z-index: 1; pointer-events: none;
  height: 240px; margin: 2rem -0.25rem -1rem;
  background: url('hero-art.png') center / contain no-repeat;
}
@media (min-width: 900px) {
  .mocy-hero { min-height: 540px; display: flex; flex-direction: column; justify-content: center; }
  .mocy-hero > * {
    margin-left: max(1.5rem, calc(50% - 600px)) !important;
    margin-right: auto !important;
    max-width: 540px !important;
  }
  .mocy-hero::after {
    position: absolute; top: 50%; transform: translateY(-50%);
    right: max(1rem, calc(50% - 605px));
    width: min(46%, 600px); height: 78%; margin: 0;
    background-position: center right;
  }
}
.mocy-hero .mocy-eyebrow {
  display: inline-block; font-family: var(--body) !important;
  font-size: .8rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--amber); font-weight: 700; margin-bottom: 1.1rem;
}
.mocy-hero h1 {
  color: #FFF7E8 !important;
  font-size: clamp(2.6rem, 7.5vw, 5.2rem) !important;
  font-weight: 600;
  max-width: 16ch;
  margin: 0 0 1.1rem !important;
}
.mocy-hero h1 em { font-style: italic; color: var(--amber); }
.mocy-hero p {
  font-size: clamp(1.02rem, 1.6vw, 1.25rem);
  line-height: 1.6; color: #E7DEC9; max-width: 46ch; margin: 0 0 2rem !important;
}
.mocy-hero .wp-block-buttons { gap: .8rem; }

/* Buttons (global) */
.wp-block-button__link,
.woocommerce a.button, .woocommerce button.button,
.woocommerce .button, .wc-block-components-button {
  border-radius: 999px !important;
  font-family: var(--body) !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
  padding: .85em 1.6em !important;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease !important;
  box-shadow: var(--shadow-sm);
}
.mocy-hero .wp-block-button__link,
.woocommerce a.button.add_to_cart_button {
  background: var(--amber) !important; color: var(--green-700) !important; border: none !important;
}
.mocy-hero .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important; color: #FFF7E8 !important;
  box-shadow: inset 0 0 0 1.5px rgba(255,247,232,.5);
}
.wp-block-button__link:hover, .woocommerce a.button:hover, .wc-block-components-button:hover {
  transform: translateY(-2px); box-shadow: var(--shadow);
}

/* ============================================================
   VALUE BAND
   ============================================================ */
.mocy-values {
  max-width: var(--maxw); margin: 0 auto !important;
  padding: 1.75rem 1.25rem !important;
}
.mocy-values .wp-block-column {
  display: flex; gap: .85rem; align-items: flex-start;
  padding: .25rem .5rem;
}
.mocy-values .wp-block-column::before {
  content: ""; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px;
  background: var(--cream-200) center/22px no-repeat;
}
.mocy-values .wp-block-column:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4D3A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 7L9 18l-5-5'/%3E%3C/svg%3E"); }
.mocy-values .wp-block-column:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4D3A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='3' width='15' height='13'/%3E%3Cpath d='M16 8h4l3 3v5h-7z'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E"); }
.mocy-values .wp-block-column:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F4D3A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-6 9 6v11a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); }
.mocy-values h3 { font-family: var(--body) !important; font-size: 1rem; font-weight: 700; margin: 0 0 .15rem; }
.mocy-values p { margin: 0; color: var(--muted); font-size: .9rem; }

/* ============================================================
   QUICK ACTIONS - clickable cards under the hero
   ============================================================ */
.mocy-actions {
  max-width: var(--maxw);
  margin: 1.25rem auto 0 !important;
  padding: 0 1.25rem;
  position: relative; z-index: 5;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
}
@media (min-width: 900px) { .mocy-actions { margin-top: -3.25rem !important; } }
@media (max-width: 860px) { .mocy-actions { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 430px) { .mocy-actions { grid-template-columns: 1fr; } }

.mocy-action {
  display: flex; flex-direction: column; align-items: flex-start; gap: .7rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem 1.35rem 1.35rem;
  text-decoration: none !important; color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.mocy-action:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--cream-200); }
.mocy-action__ico {
  width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center;
  background: var(--cream); color: var(--green); flex: 0 0 auto;
}
.mocy-action__ico svg { width: 27px; height: 27px; }
.mocy-action h3 {
  font-family: var(--display) !important; font-size: 1.18rem; line-height: 1.15;
  margin: .1rem 0 0; color: var(--green);
}
.mocy-action p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.45; }
.mocy-action .mocy-action__cta {
  margin-top: .35rem; color: var(--clay); font-weight: 700; font-size: .82rem;
  letter-spacing: .02em;
}
.mocy-action:hover .mocy-action__cta { text-decoration: underline; }

/* ============================================================
   SHOP BY CATEGORY
   ============================================================ */
.mocy-cats {
  max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem;
  display: grid; grid-template-columns: repeat(7, 1fr); gap: .9rem;
}
@media (max-width: 1100px) { .mocy-cats { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 760px)  { .mocy-cats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 430px)  { .mocy-cats { grid-template-columns: repeat(2, 1fr); } }
.mocy-cat {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.2rem .6rem 1rem; text-decoration: none !important; color: var(--ink);
  box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.mocy-cat:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--cream-200); }
.mocy-cat__ico {
  width: 52px; height: 52px; border-radius: 50%; background: var(--cream);
  display: grid; place-items: center; font-size: 1.55rem; line-height: 1;
}
.mocy-cat__name { font-weight: 600; font-size: .92rem; line-height: 1.2; color: var(--green); }
.mocy-cat__n { font-size: .76rem; color: var(--muted); }

/* ============================================================
   SECTION HEADINGS
   ============================================================ */
.mocy-section-title {
  max-width: var(--maxw); margin: clamp(2.4rem,5vw,3.6rem) auto .4rem !important;
  padding-inline: 1.25rem;
  font-size: clamp(1.7rem, 3.5vw, 2.5rem) !important;
}
.mocy-section-sub {
  max-width: var(--maxw); margin: 0 auto clamp(1.4rem,3vw,2rem) !important;
  padding-inline: 1.25rem; color: var(--muted);
}

/* ============================================================
   PRODUCT GRID - fix alignment, card styling (classic + block)
   ============================================================ */
.woocommerce ul.products,
.wc-block-grid__products,
.wp-block-post-template.products-block-post-template,
ul.wp-block-post-template {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1rem !important;
  max-width: var(--maxw);
  margin: 0 auto !important;
  padding: 0 1.25rem !important;
  list-style: none !important;
  float: none !important;
}
@media (min-width: 700px) {
  .woocommerce ul.products, .wc-block-grid__products, ul.wp-block-post-template { grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: 1.4rem !important; }
}
@media (min-width: 1000px) {
  .woocommerce ul.products, .wc-block-grid__products, ul.wp-block-post-template { grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
}
/* Neutralise WooCommerce's own flex/float width on items so the grid governs. */
.woocommerce ul.products li.product,
ul.wp-block-post-template > li {
  width: auto !important; max-width: none !important;
  flex: none !important; clear: none !important;
}
.woocommerce ul.products li.product.first { clear: none !important; }
.woocommerce ul.products::before, .woocommerce ul.products::after { content: none !important; display: none !important; }

.woocommerce ul.products li.product,
.wc-block-grid__product,
ul.wp-block-post-template > li {
  width: auto !important; margin: 0 !important; float: none !important;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .7rem .7rem 1rem !important;
  display: flex !important; flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  text-align: left;
  overflow: hidden;
}
.woocommerce ul.products li.product:hover,
ul.wp-block-post-template > li:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--cream-200);
}
.woocommerce ul.products li.product a img,
.wc-block-grid__product-image img,
ul.wp-block-post-template img {
  aspect-ratio: 1 / 1;
  width: 100% !important;
  height: auto;
  box-sizing: border-box !important;      /* keep padding inside the 100% width */
  object-fit: contain !important;
  object-position: center center !important;
  background: linear-gradient(180deg, #FFFFFF 0%, #FCF8F0 100%);
  border-radius: var(--radius-sm);
  margin: 0 0 .85rem !important;
  padding: 9% !important;
  display: block;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title,
ul.wp-block-post-template .wp-block-post-title {
  font-family: var(--body) !important;
  font-weight: 600 !important;
  font-size: .98rem !important;
  line-height: 1.3 !important;
  color: var(--ink) !important;
  padding: 0 .25rem !important;
  margin: 0 0 .4rem !important;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.55em;
}
.woocommerce ul.products li.product .price,
.wc-block-grid__product-price,
ul.wp-block-post-template .wp-block-post-title + * .price,
ul.wp-block-post-template .price {
  color: var(--green) !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  padding: 0 .25rem !important;
  margin: 0 !important;
}
.woocommerce ul.products li.product .price del { color: var(--muted) !important; font-weight: 400; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
/* push the add-to-cart button to the bottom, full width */
.woocommerce ul.products li.product .button,
ul.wp-block-post-template .wp-block-button__link,
.wc-block-grid__product .wp-block-button__link {
  margin: .9rem 0 0 !important;
  align-self: stretch; text-align: center;
  background: var(--green) !important; color: #FBF5E9 !important;
  box-sizing: border-box;
}
.woocommerce ul.products li.product .button:hover { background: var(--green-700) !important; }
.woocommerce ul.products li.product .added_to_cart { display:none; }
/* star ratings */
.woocommerce .star-rating span::before { color: var(--amber); }

/* ============================================================
   CTA BAND + SHOP / ARCHIVE polish
   ============================================================ */
.mocy-cta {
  max-width: var(--maxw); margin: clamp(3rem,6vw,4.5rem) auto !important;
  padding: clamp(2.4rem,5vw,3.6rem) 1.5rem !important;
  background: linear-gradient(135deg, var(--clay) 0%, #A83C20 100%);
  border-radius: 22px; color: #FFF3E6; text-align: center;
}
.mocy-cta h2 { color: #FFF3E6 !important; font-size: clamp(1.8rem,4vw,2.7rem) !important; margin: 0 0 .6rem !important; }
.mocy-cta p { color: #F6DECF; max-width: 50ch; margin: 0 auto 1.6rem !important; }
.mocy-cta .wp-block-button__link { background: #FFF3E6 !important; color: var(--clay) !important; }

/* Recently viewed products: hide the whole section until the visitor has viewed something */
.mocy-recent { max-width: var(--maxw); margin: clamp(3rem,6vw,4.5rem) auto !important; }
.mocy-recent:not(:has(li.product)) { display: none; }

.woocommerce-products-header__title,
.woocommerce .woocommerce-result-count,
.woocommerce-breadcrumb { padding-inline: 1.25rem; max-width: var(--maxw); margin-inline: auto; }
.woocommerce-ordering, .woocommerce-result-count { color: var(--muted); }

/* Single product page */
.woocommerce div.product .product_title { font-size: clamp(1.8rem,4vw,2.6rem) !important; }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--green) !important; }
.woocommerce span.onsale { background: var(--clay) !important; border-radius: 999px; }

/* ============================================================
   CONTENT PAGES (Contact / About)
   ============================================================ */
.mocy-page-hero {
  background:
    radial-gradient(120% 120% at 10% 0%, rgba(230,154,46,.16) 0%, rgba(230,154,46,0) 45%),
    linear-gradient(180deg, #20503C 0%, #1A4232 100%);
  color: #FBF5E9; text-align: center;
  padding: clamp(2.5rem,6vw,4.2rem) 1.25rem;
}
.mocy-page-hero h1 { color: #FFF7E8 !important; font-size: clamp(2.1rem,5vw,3.2rem) !important; margin: 0; }
.mocy-page-hero p { color: #E7DEC9; max-width: 52ch; margin: .7rem auto 0; line-height: 1.6; }

.mocy-contact {
  max-width: var(--maxw); margin: clamp(2.2rem,5vw,3.5rem) auto; padding: 0 1.25rem;
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 2.5rem; align-items: start;
}
@media (max-width: 820px) { .mocy-contact { grid-template-columns: 1fr; gap: 2rem; } }
.mocy-contact h2 { font-size: clamp(1.5rem,3vw,2rem); margin: 0 0 1.2rem; }
.mocy-cinfo { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.mocy-cinfo li { display: flex; gap: .9rem; margin-bottom: 1.25rem; align-items: flex-start; }
.mocy-cinfo .ico { width: 44px; height: 44px; border-radius: 12px; background: var(--cream); color: var(--green); display: grid; place-items: center; flex: 0 0 auto; }
.mocy-cinfo .ico svg { width: 21px; height: 21px; }
.mocy-cinfo h4 { font-family: var(--body) !important; font-size: .95rem; margin: .1rem 0 .15rem; }
.mocy-cinfo p, .mocy-cinfo a { margin: 0; color: var(--muted); text-decoration: none; line-height: 1.45; }
.mocy-cinfo a:hover { color: var(--green); }
.mocy-badge { display: inline-flex; gap: .5rem; align-items: center; background: var(--cream); color: var(--green); padding: .55rem 1rem; border-radius: 999px; font-weight: 700; font-size: .9rem; }

.wpcf7-form p { margin: 0 0 1rem; }
.wpcf7-form label { font-weight: 600; font-size: .9rem; display: block; }
.wpcf7-form input:not([type=submit]), .wpcf7-form textarea, .wpcf7-form select {
  width: 100%; border: 1.5px solid var(--line); border-radius: 12px; padding: .72em 1em;
  font-family: var(--body); font-size: .95rem; background: var(--paper); color: var(--ink); margin-top: .3rem;
}
.wpcf7-form input:focus, .wpcf7-form textarea:focus { outline: none; border-color: var(--green-300); }
.wpcf7-form input[type=submit] {
  width: auto; background: var(--green); color: #FBF5E9; border: none; border-radius: 999px;
  padding: .85em 2em; font-weight: 700; cursor: pointer; margin-top: .3rem;
}
.wpcf7-form input[type=submit]:hover { background: var(--green-700); }

.mocy-map { max-width: var(--maxw); margin: 0 auto clamp(2.5rem,5vw,3.5rem); padding: 0 1.25rem; }
.mocy-map iframe { width: 100%; height: 380px; border: 0; border-radius: var(--radius); display: block; box-shadow: var(--shadow-sm); }

/* About */
.mocy-about { max-width: 760px; margin: clamp(2.2rem,5vw,3.5rem) auto; padding: 0 1.25rem; }
.mocy-about p { font-size: 1.08rem; line-height: 1.75; color: #3a352d; margin: 0 0 1.3rem; }
.mocy-about .lead { font-size: 1.25rem; color: var(--ink); }
.mocy-pillars { max-width: var(--maxw); margin: 0 auto clamp(2rem,5vw,3rem); padding: 0 1.25rem; display: grid; grid-template-columns: repeat(3,1fr); gap: 1.2rem; }
@media (max-width: 760px) { .mocy-pillars { grid-template-columns: 1fr; } }
.mocy-pillar { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.4rem; box-shadow: var(--shadow-sm); }
.mocy-pillar h3 { font-size: 1.15rem; margin: 0 0 .4rem; color: var(--green); }
.mocy-pillar p { margin: 0; color: var(--muted); line-height: 1.55; }

/* ---- Footer ---- */
footer.wp-block-template-part {
  background: var(--green-700); color: #D8E2D2;
  margin-top: clamp(3rem,7vw,5rem);
}
footer.wp-block-template-part a { color: #F4EAD6; }
footer .wp-block-site-title a { color: #FFF7E8 !important; }

.mocy-footer { max-width: var(--maxw); margin: 0 auto; padding: clamp(2.5rem,5vw,3.5rem) 1.25rem 1.5rem; }
.mocy-footer__cols {
  display: grid; grid-template-columns: 1.6fr 1fr 1.3fr 1fr; gap: 2rem;
}
@media (max-width: 860px) { .mocy-footer__cols { grid-template-columns: 1fr 1fr; gap: 1.75rem; } }
@media (max-width: 480px) { .mocy-footer__cols { grid-template-columns: 1fr; } }
.mocy-footer h4 {
  font-family: var(--body) !important; font-size: .8rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--amber); margin: 0 0 1rem;
}
.mocy-footer__brand .mocy-footer__word {
  font-family: var(--display); font-size: 1.7rem; font-weight: 600; color: #FFF7E8;
  display: block; margin-bottom: .6rem;
}
.mocy-footer__brand p { color: #C7D4C0; line-height: 1.55; margin: 0 0 .6rem; max-width: 34ch; }
.mocy-footer__tag { color: var(--amber) !important; font-weight: 600; }
.mocy-footer ul { list-style: none; margin: 0; padding: 0; }
.mocy-footer li { margin: 0 0 .55rem; }
.mocy-footer a { color: #E6EDE1; text-decoration: none; }
.mocy-footer a:hover { color: #fff; text-decoration: underline; }
.mocy-footer__contact p { margin: 0 0 .55rem; color: #C7D4C0; line-height: 1.5; }
.mocy-footer__social { display: flex; flex-direction: row; gap: .55rem; flex-wrap: wrap; }
.mocy-footer__social a {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.08); display: grid; place-items: center;
  transition: background .18s ease;
}
.mocy-footer__social a:hover { background: rgba(255,255,255,.18); text-decoration: none; }
.mocy-footer__social a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.mocy-footer__social svg { width: 19px; height: 19px; fill: currentColor; flex: 0 0 auto; }

/* Floating WhatsApp button */
.mocy-wa {
  position: fixed; right: 18px; bottom: 18px; z-index: 80;
  display: inline-flex; align-items: center; gap: .55rem;
  background: #25D366; color: #fff !important; text-decoration: none !important;
  padding: .7rem 1.15rem; border-radius: 999px; font-weight: 700; font-size: .92rem;
  box-shadow: 0 8px 24px -6px rgba(0,0,0,.35);
  transition: transform .18s ease, box-shadow .18s ease;
}
.mocy-wa:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -6px rgba(0,0,0,.4); }
.mocy-wa svg { width: 22px; height: 22px; fill: currentColor; }
@media (max-width: 600px) { .mocy-wa span { display: none; } .mocy-wa { padding: .8rem; } }
.mocy-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.12); margin-top: 2rem; padding-top: 1.25rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
  font-size: .82rem; color: #9DB09A;
}

/* ---- Misc niceties ---- */
::selection { background: var(--amber); color: var(--green-700); }
a { text-underline-offset: 3px; }
img { max-width: 100%; height: auto; }

/* ============================================================
   LAYOUT FIXES - break product grids out of the block theme's
   constrained content width; hide the auto front-page title.
   ============================================================ */
body.home .wp-block-post-title,
body.page-id-11 .wp-block-post-title,
body.page-id-12 .wp-block-post-title { display: none !important; }

/* WooCommerce shortcode output (homepage) must span the full section,
   not the ~620px constrained content size. The inner ul.products then
   re-centers itself at --maxw. */
.entry-content .woocommerce { max-width: none !important; width: 100%; }

/* Keep section headings aligned to the same 1220 width as the grid. */
.mocy-section-title, .mocy-section-sub { max-width: var(--maxw) !important; }
.mocy-values { max-width: var(--maxw) !important; }

/* Guarantee the add-to-cart button fills the card width (no collapsed pills). */
.woocommerce ul.products li.product .button,
ul.wp-block-post-template .wp-block-button__link,
ul.wp-block-post-template .wc-block-components-product-button .wc-block-components-button {
  display: block !important;
  width: 100% !important;
  white-space: nowrap;
}

/* Tidy hero spacing now the page title is hidden. */
.mocy-hero { margin-top: 0 !important; }

/* ============================================================
   MOBILE - kill horizontal overflow from full-bleed sections,
   tighten the hero for small screens.
   ============================================================ */
html, body { overflow-x: hidden; max-width: 100%; }

@media (max-width: 760px) {
  .mocy-hero { overflow: visible; padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  .mocy-hero h1 {
    font-size: clamp(2rem, 8.6vw, 2.9rem) !important;
    max-width: 100% !important;
    overflow-wrap: anywhere;
  }
  .mocy-hero p { max-width: 100% !important; }
  .mocy-hero .wp-block-buttons { flex-direction: column; align-items: stretch; }
  .mocy-hero .wp-block-button, .mocy-hero .wp-block-button__link { width: 100%; text-align: center; }
  .mocy-section-sub, .mocy-section-title { max-width: 100% !important; }
}

/* Entrance animation for hero content */
@keyframes mocyRise { from { opacity:0; transform: translateY(14px);} to { opacity:1; transform:none;} }
.mocy-hero .mocy-eyebrow { animation: mocyRise .6s .05s both; }
.mocy-hero h1 { animation: mocyRise .7s .14s both; }
.mocy-hero p { animation: mocyRise .7s .24s both; }
.mocy-hero .wp-block-buttons { animation: mocyRise .7s .34s both; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }