/*
 Theme Name:   Mật Ong Mai Cừ
 Theme URI:    https://matongmaicu.com/
 Description:  Child theme for Bricks - Mật Ong Mai Cừ. Design tokens, WooCommerce polish, performance-first CSS.
 Author:       Mật Ong Mai Cừ
 Template:     bricks
 Version:      1.0.0
 Text Domain:  bricks
*/

/* =========================================================
   1. Design tokens
   ========================================================= */
:root {
  /* Brand greens - sampled from the existing matongmaicu.com so the
     familiar identity is kept; only the layout around it is modernised. */
  --mc-green:        #0c6b4d;  /* header / primary */
  --mc-green-dark:   #003c39;  /* deep sections */
  --mc-green-deep:   #022d18;  /* footer / darkest */
  --mc-green-light:  #148b64;  /* hover */
  --mc-green-tint:   #eef6f2;  /* soft green wash */

  /* Gold + honey accents (logo, "BÁN CHẠY" highlight) */
  --mc-gold:         #fbec9b;  /* pale gold text accent */
  --mc-gold-strong:  #f0c02c;  /* solid gold */
  --mc-honey:        #e8901c;  /* honey orange - CTAs */
  --mc-honey-dark:   #c4750f;
  --mc-honey-light:  #f7b955;
  --mc-honey-tint:   #fdf3df;

  --mc-red:          #c0392b;  /* sale price */
  --mc-red-dark:     #96271c;

  /* Neutrals - warm, so they sit with the honey tones */
  --mc-ink:          #17281f;
  --mc-body:         #4a5a51;
  --mc-muted:        #7e8c85;
  --mc-line:         #e2e9e5;
  --mc-cream:        #fdf9f0;
  --mc-white:        #ffffff;

  /* Type */
  --mc-font-body:    'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mc-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;

  /* Shape */
  --mc-radius:       14px;
  --mc-radius-sm:    10px;
  --mc-shadow:       0 2px 8px rgba(42, 32, 24, .06);
  --mc-shadow-lg:    0 10px 30px rgba(42, 32, 24, .10);

  --mc-container:    1200px;
}

/* =========================================================
   2. Base
   ========================================================= */
body {
  font-family: var(--mc-font-body);
  /* 17px base: Vietnamese diacritics need a little more room to stay legible */
  font-size: 17px;
  line-height: 1.7;
  color: var(--mc-body);
  background: var(--mc-white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--mc-ink);
  font-weight: 700;
  line-height: 1.25;
}

/* Display serif reserved for the big statements */
.mc-display,
h1.mc-display,
h2.mc-display {
  font-family: var(--mc-font-display);
  font-weight: 700;
  letter-spacing: -.01em;
}

a { color: var(--mc-honey-dark); }
a:hover { color: var(--mc-red); }

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

/* Reserve space so images do not shift layout while loading (CLS) */
img[width][height] { height: auto; }

/* =========================================================
   3. Reusable pieces
   ========================================================= */

/* Small caps eyebrow above section titles */
.mc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mc-honey-dark);
}
.mc-eyebrow::before,
.mc-eyebrow::after {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--mc-gold-strong);
}

/* Eyebrow sitting on a dark green panel */
.mc-on-dark .mc-eyebrow,
.mc-eyebrow.is-light { color: var(--mc-gold); }

/* Section title where the last word is highlighted in gold,
   echoing the old site's "SẢN PHẨM BÁN CHẠY" treatment. */
.mc-title-accent { color: var(--mc-gold-strong); }

/* Section heading block */
.mc-section-title {
  font-family: var(--mc-font-display);
  font-size: clamp(28px, 19.2px + 2vw, 44px);
  color: var(--mc-ink);
}

/* Buttons - Bricks renders .bricks-button; these are the brand skins */
.bricks-button.mc-btn,
.mc-btn {
  font-weight: 600;
  border-radius: 999px;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.mc-btn:hover { transform: translateY(-2px); }

.mc-btn-primary {
  background: var(--mc-honey);
  color: #fff;
  box-shadow: 0 4px 14px rgba(224, 155, 30, .32);
}
.mc-btn-primary:hover { background: var(--mc-honey-dark); color: #fff; }

.mc-btn-outline {
  background: transparent;
  color: var(--mc-ink);
  border: 2px solid var(--mc-line);
}
.mc-btn-outline:hover { border-color: var(--mc-honey); color: var(--mc-honey-dark); }

/* Outline buttons sitting on a dark green panel need light ink */
.mc-hero .mc-btn-outline,
.mc-on-dark .mc-btn-outline {
  color: #fff;
  border-color: rgba(255, 255, 255, .45);
}
.mc-hero .mc-btn-outline:hover,
.mc-on-dark .mc-btn-outline:hover {
  color: var(--mc-green-deep);
  background: var(--mc-gold-strong);
  border-color: var(--mc-gold-strong);
}

/* Trust badges on the dark hero */
.mc-hero .mc-badge {
  background: rgba(255, 255, 255, .12);
  color: var(--mc-gold);
}

/* Trust badge row */
.mc-badge {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .45em .9em;
  border-radius: 999px;
  background: var(--mc-honey-tint);
  color: var(--mc-honey-dark);
  font-size: 14px;
  font-weight: 600;
}

/* Responsive grids used by the Bricks layouts.
   Kept as classes so one change restyles every section that uses them. */
.mc-grid { display: grid; gap: 24px; }
.mc-grid-4 { grid-template-columns: repeat(4, 1fr); }
.mc-grid-3 { grid-template-columns: repeat(3, 1fr); }
.mc-grid-2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 991px) {
  .mc-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .mc-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  /* Category tiles and USP cards read better as a tight 2x2 on phones than
     as a long single column of full-width squares. */
  .mc-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .mc-grid-3, .mc-grid-2 { grid-template-columns: 1fr; gap: 14px; }

  .mc-card { padding: 18px 14px; border-radius: 12px; }
  .mc-card .brxe-heading { font-size: 15px !important; }
  .mc-card .brxe-text-basic { font-size: 13.5px !important; line-height: 1.55 !important; }

  /* Section rhythm: desktop 56-64px gaps feel empty on a phone */
  #brx-content > .brxe-section:has(> .brxe-container) {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
}

/* Card shell shared by USP boxes, category tiles and value cards */
.mc-card {
  background: var(--mc-white);
  border: 1px solid var(--mc-line);
  border-radius: var(--mc-radius);
  padding: 26px 22px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.mc-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--mc-shadow-lg);
  border-color: var(--mc-honey-light);
}

/* Category tile: image on top, label beneath */
.mc-cat {
  display: block;
  border-radius: var(--mc-radius);
  overflow: hidden;
  border: 1px solid var(--mc-line);
  background: var(--mc-white);
  text-align: center;
  transition: transform .2s ease, box-shadow .2s ease;
}
.mc-cat:hover { transform: translateY(-4px); box-shadow: var(--mc-shadow-lg); }
.mc-cat img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; display: block; }
.mc-cat span {
  display: block;
  padding: 14px 12px;
  font-weight: 600;
  color: var(--mc-ink);
}

/* Hero: the brand's deep green, with the Phố Hiến sketch as a base band */
.mc-hero {
  position: relative;
  background: linear-gradient(135deg, var(--mc-green-deep) 0%, var(--mc-green-dark) 45%, var(--mc-green) 100%);
  color: #fff;
  overflow: hidden;
}
/* Soft honey glow so the green does not read flat */
.mc-hero::after {
  content: "";
  position: absolute;
  right: -12%;
  top: -30%;
  width: 620px;
  height: 620px;
  background: radial-gradient(circle, rgba(240,192,44,.20) 0%, rgba(240,192,44,0) 65%);
  pointer-events: none;
}
.mc-hero > * { position: relative; z-index: 1; }

/* Phố Hiến illustration strip under the hero */
.mc-phohien-band {
  display: block;
  width: 100%;
  line-height: 0;
  background: var(--mc-green);
}
.mc-phohien-band img { width: 100%; display: block; }

/* Two-column blocks (hero, story, contact) stack on phones.
   Bricks writes the 55% / 45% column widths as #id rules, hence !important. */
@media (max-width: 767px) {
  .mc-stack-mobile { flex-direction: column !important; gap: 28px !important; }
  .mc-stack-mobile > .brxe-div { width: 100% !important; }

  /* Display headings are set in px by Bricks; scale them for narrow screens */
  h1.mc-display { font-size: clamp(30px, 8.5vw, 40px) !important; }
  h2.mc-display { font-size: clamp(26px, 7vw, 32px) !important; }
  .mc-eyebrow { font-size: 12px; letter-spacing: .08em; }
  .mc-hero { padding-top: 44px !important; padding-bottom: 44px !important; }
  .mc-hero .mc-badge { font-size: 12.8px; }
}

/* =========================================================
   4. WooCommerce - product cards and single product
   Bricks does not skin the default Woo markup, so it is done here.
   ========================================================= */

ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 26px;
  margin: 0;
  padding: 0;
}

/* Phones: two tight columns. minmax(0,1fr) lets cards shrink below their
   content width, which is what stopped the right column overflowing. */
@media (max-width: 767px) {
  ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  ul.products li.product .woocommerce-loop-product__title {
    font-size: 15.2px !important;
    padding: 12px 12px 6px !important;
    min-height: 3em;
  }
  ul.products li.product .price {
    font-size: 17.6px;
    padding: 0 12px;
    margin-bottom: 10px;
  }
  ul.products li.product .button {
    margin: auto 12px 12px;
    font-size: 14.4px;
    padding: .7em 1em;
  }
  .mc-shop-toolbar { flex-direction: column; align-items: flex-start; }
}
ul.products::before,
ul.products::after { display: none; }

ul.products li.product {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
  background: var(--mc-white);
  border: 1px solid var(--mc-line);
  border-radius: var(--mc-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
ul.products li.product:hover {
  transform: translateY(-4px);
  box-shadow: var(--mc-shadow-lg);
  border-color: var(--mc-honey-light);
}

ul.products li.product a img {
  margin: 0;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
  display: block;
}

ul.products li.product .woocommerce-loop-product__title {
  font-size: 17px !important;
  font-weight: 600;
  line-height: 1.5;
  color: var(--mc-ink);
  /* no bottom padding: with line-clamp, a 3rd line's tops were peeking
     through the padding area on long names */
  padding: 18px 20px 0 !important;
  margin: 0 0 8px;
  /* keep cards even when titles differ in length */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3.3em;
}

ul.products li.product .price {
  padding: 0 20px;
  margin: 0 0 16px;
  color: var(--mc-red);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.4;
}
ul.products li.product .price del {
  color: var(--mc-muted);
  font-size: 15.2px;
  font-weight: 400;
  margin-right: .4em;
}
ul.products li.product .price ins { text-decoration: none; }

ul.products li.product .button {
  margin: auto 20px 20px;
  background: var(--mc-honey);
  color: #fff;
  border-radius: 999px;
  font-weight: 600;
  font-size: 16px;
  padding: .85em 1.4em;
  text-align: center;
}
ul.products li.product .button:hover { background: var(--mc-honey-dark); color: #fff; }

/* ---- Header cart: give it its own hit area so it stops crowding the
   hotline pill sitting next to it ---- */
.brxe-woocommerce-mini-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-left: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  transition: background-color .2s ease;
}
.brxe-woocommerce-mini-cart:hover { background: rgba(255, 255, 255, .22); }

/* Item counter badge sits on the circle, not on the glyph */
.brxe-woocommerce-mini-cart .cart-count {
  background: var(--mc-gold-strong);
  color: var(--mc-green-deep);
  font-weight: 700;
  font-size: 12px;
}

/* ---- Shop toolbar (result count + sorting) ---- */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering select {
  font-size: 16px;
  color: var(--mc-body);
}
.woocommerce .woocommerce-ordering select {
  padding: .6em 2.2em .6em 1em;
  border: 1px solid var(--mc-line);
  border-radius: 999px;
  background-color: #fff;
  font-weight: 600;
  color: var(--mc-ink);
}

/* Category filter pills on the shop archive */
.mc-pill-row { flex-wrap: wrap; }
.mc-pill a {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .55em 1.1em;
  border-radius: 999px;
  border: 1.5px solid var(--mc-line);
  background: #fff;
  color: var(--mc-ink);
  font-weight: 600;
  font-size: 15.2px;
  text-decoration: none;
  transition: all .18s ease;
}
.mc-pill a span {
  font-size: 12.8px;
  font-weight: 700;
  color: var(--mc-muted);
  background: var(--mc-green-tint);
  padding: .1em .55em;
  border-radius: 999px;
}
.mc-pill a:hover {
  border-color: var(--mc-green);
  color: var(--mc-green);
}

/* Breadcrumb on a dark band */
.mc-breadcrumb-light .woocommerce-breadcrumb,
.mc-breadcrumb-light .woocommerce-breadcrumb a { color: #a9c9ba; }
.mc-breadcrumb-light .woocommerce-breadcrumb a:hover { color: var(--mc-gold); }

/* Archive page title */
.woocommerce-products-header__title,
.woocommerce .page-title {
  font-family: var(--mc-font-display);
  color: var(--mc-ink);
}

/* Sale flash */
.woocommerce span.onsale {
  background: var(--mc-red);
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
  font-size: 13px;
  min-height: auto;
  min-width: auto;
  padding: .35em .8em;
  line-height: 1.4;
  top: 12px;
  left: 12px;
  right: auto;
  margin: 0;
}

/* Single product */
.woocommerce div.product .product_title {
  font-family: var(--mc-font-display);
  font-size: clamp(25.6px, 19.2px + 1.6vw, 36px);
  color: var(--mc-ink);
  margin-bottom: .4em;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--mc-red);
  font-size: 28px;
  font-weight: 700;
}
.woocommerce div.product p.price del { color: var(--mc-muted); font-size: 17.6px; font-weight: 400; }
.woocommerce div.product p.price ins { text-decoration: none; }

.woocommerce div.product form.cart .button,
.woocommerce div.product .single_add_to_cart_button {
  background: var(--mc-honey);
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
  padding: .9em 2em;
  font-size: 16px;
}
.woocommerce div.product form.cart .button:hover { background: var(--mc-honey-dark); }

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  border-bottom-color: var(--mc-honey);
}

/* Generic Woo buttons */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
  border-radius: 999px;
  font-weight: 600;
}
.woocommerce a.button.alt, .woocommerce button.button.alt {
  background: var(--mc-honey);
  color: #fff;
}
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover {
  background: var(--mc-honey-dark);
  color: #fff;
}

/* Notices in brand colours */
.woocommerce-message { border-top-color: var(--mc-green); }
.woocommerce-info { border-top-color: var(--mc-honey); }
.woocommerce-message::before { color: var(--mc-green); }
.woocommerce-info::before { color: var(--mc-honey); }

/* =========================================================
   5. Content typography (policy / about pages)
   ========================================================= */
.mc-prose { color: var(--mc-body); line-height: 1.8; }
.mc-prose h2 {
  font-family: var(--mc-font-display);
  font-size: 25.6px;
  margin: 1.8em 0 .6em;
  color: var(--mc-ink);
}
.mc-prose h3 { font-size: 19.2px; margin: 1.5em 0 .5em; color: var(--mc-ink); }
.mc-prose p { margin: 0 0 1.1em; }
.mc-prose ul, .mc-prose ol { margin: 0 0 1.2em 1.2em; }
.mc-prose li { margin-bottom: .5em; }
.mc-prose strong { color: var(--mc-ink); }

/* =========================================================
   6. Accessibility
   ========================================================= */
:focus-visible {
  outline: 3px solid var(--mc-honey);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .mc-btn:hover,
  ul.products li.product:hover { transform: none; }
}

/* =========================================================
   7. Bricks container: make it fluid
   Bricks' layer CSS sets .brxe-container { width: 1100px } with no
   max-width: 100%, so on phones every container spilled ~725px past the
   viewport (cut-off hero, cards, hamburger). Unlayered rules beat @layer,
   so this single override is enough; each container's own max-width
   (1200px / 900px) still caps it on desktop.
   ========================================================= */
.brxe-container { width: 100%; }

@media (max-width: 991px) {
  .brxe-section > .brxe-container { padding-left: 16px; padding-right: 16px; }
  /* Mini-cart dropdown is 400px wide by default - wider than a phone */
  .brxe-woocommerce-mini-cart .cart-detail { width: min(92vw, 400px) !important; }
}

/* Footer on phones: the 2x2 used for category tiles is too tight for link
   lists, and the e-mail address was clipping. */
@media (max-width: 575px) {
  #brx-footer .mc-grid-4,
  footer .mc-grid-4 { grid-template-columns: 1fr; gap: 28px; }
  #brx-footer .brxe-text-basic,
  footer .brxe-text-basic { overflow-wrap: anywhere; }
}

/* =========================================================
   8. Header & footer share the hero's green gradient so the three
   dark bands read as one palette. Bricks paints each section's flat
   colour via #id rules, so those are made transparent here.
   ========================================================= */
#brx-header,
#brx-footer {
  background: linear-gradient(135deg, var(--mc-green-deep) 0%, var(--mc-green-dark) 45%, var(--mc-green) 100%);
}
#brx-header > .brxe-section,
#brx-footer > .brxe-section {
  background-color: transparent !important;
}

/* Footer text: white on the green gradient for contrast. Bricks writes the
   per-element colours as #id rules, hence !important. */
#brx-footer .brxe-text-basic,
#brx-footer .brxe-text-basic a,
#brx-footer .brxe-heading { color: #fff !important; }
#brx-footer .brxe-text-basic a:hover { color: var(--mc-gold) !important; }

/* Blog cards (Bricks posts element on Tin tức + category archives) */
.mc-posts .bricks-layout-item {
  background: var(--mc-white);
  border: 1px solid var(--mc-line);
  border-radius: var(--mc-radius);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.mc-posts .bricks-layout-item:hover { transform: translateY(-4px); box-shadow: var(--mc-shadow-lg); }
.mc-posts .image-wrapper { margin: 0; }
.mc-posts .image-wrapper img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.mc-posts .bricks-layout-inner > :not(.image-wrapper) { padding: 0 20px; }
.mc-posts .bricks-layout-inner > :not(.image-wrapper):first-of-type:not(figure) { padding-top: 18px; }
.mc-posts .bricks-layout-inner > :last-child { padding-bottom: 20px; }
.mc-posts h3 { font-size: 18px; line-height: 1.4; margin: 16px 0 8px; }
.mc-posts h3 a { color: var(--mc-ink); text-decoration: none; }
.mc-posts h3 a:hover { color: var(--mc-green); }
.mc-posts .content-wrapper > span { display:block; font-size: 13px; color: var(--mc-muted); margin: 0 0 6px; }
.mc-posts .content-wrapper > p { font-size: 15px; color: var(--mc-body); line-height: 1.65; margin: 0 0 12px; }
.mc-posts .content-wrapper > div a { font-weight: 700; color: var(--mc-honey-dark); font-size: 14.5px; }
.mc-posts .bricks-layout-inner > div a:hover { color: var(--mc-green); }

/* Single article: a measured reading column instead of full 1100px lines */
.single-post .brxe-post-content {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  font-size: 17px;
  line-height: 1.85;
  color: var(--mc-body);
}
.single-post .brxe-post-content h2 { font-family: var(--mc-font-display); font-size: 26px; margin: 1.6em 0 .6em; color: var(--mc-ink); }
.single-post .brxe-post-content h3 { font-size: 20px; margin: 1.4em 0 .5em; }
.single-post .brxe-post-content p { margin: 0 0 1.1em; }
.single-post .brxe-post-content ul, .single-post .brxe-post-content ol { margin: 0 0 1.2em 1.3em; }
.single-post .brxe-post-content li { margin-bottom: .45em; }
.single-post .brxe-post-content img { border-radius: 14px; }
.single-post .brxe-post-content a { color: var(--mc-honey-dark); text-decoration: underline; text-underline-offset: 3px; }

/* Blog grid polish: real gaps, soft ground so the white cards lift off it */
.mc-news-grid { background: #f4f9f6; }
.mc-posts .bricks-layout-wrapper { gap: 28px !important; }
.mc-posts .bricks-layout-item { border: 0; box-shadow: 0 2px 10px rgba(12, 107, 77, .06); }
.mc-posts .bricks-layout-item:hover { box-shadow: 0 16px 36px rgba(12, 107, 77, .14); }
.mc-posts .bricks-layout-inner > .content-wrapper { padding: 22px 24px 24px; }
.mc-posts h3 { font-size: 19px; margin: 0 0 10px; }
.mc-posts .content-wrapper > span { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--mc-green); font-weight: 700; margin-bottom: 10px; }
.mc-posts .content-wrapper > p { font-size: 15px; color: var(--mc-body); margin-bottom: 16px; }
.mc-posts .content-wrapper > div a { display: inline-block; padding: .5em 1.1em; border-radius: 999px; background: var(--mc-honey-tint); color: var(--mc-honey-dark); font-size: 14px; font-weight: 700; text-decoration: none; }
.mc-posts .content-wrapper > div a:hover { background: var(--mc-honey); color: #fff; }

/* Single product on phones: related/upsell rows were nudging past the edge */
.woocommerce div.product .related,
.woocommerce div.product .upsells { overflow-x: clip; }
.woocommerce div.product .related ul.products li.product { min-width: 0; }

/* Single post template bits */
.mc-crumbs a { color: #a9c9ba; }
.mc-crumbs a:hover { color: var(--mc-gold); }
.mc-post-figure img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; display: block; }
.brxe-post-sharing a { border-radius: 999px; }
.brxe-post-navigation a { color: var(--mc-green); font-weight: 600; }
.mc-post-meta { flex-wrap: wrap; row-gap: 6px; }
.mc-post-meta > * { margin: 0 10px; }

/* Woo cart / checkout / account inside the Bricks frame */
.mc-woo-page .wc-block-components-button,
.mc-woo-page .woocommerce-button, .mc-woo-page button.button { border-radius: 999px; font-weight: 700; }
.mc-woo-page .wc-block-components-button:not(.is-secondary) { background: var(--mc-honey); }
.mc-woo-page .woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; }
.mc-woo-page .woocommerce-MyAccount-navigation li a { display: block; padding: 10px 14px; border-radius: 10px; color: var(--mc-ink); }
.mc-woo-page .woocommerce-MyAccount-navigation li.is-active a { background: var(--mc-green-tint); color: var(--mc-green); font-weight: 700; }