/*
 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; }

/* =========================================================
   8. Phones: buttons
   Every two-button row (hero, CTA bands, 404) wrapped both labels onto two
   lines inside 90px-tall pills, product-card buttons did the same, the hero
   badges broke mid-phrase, and the floating contact stack covered the right
   column. On phones buttons stack full-width and never wrap.
   ========================================================= */
@media (max-width: 767px) {
  .mc-btn,
  .bricks-button.mc-btn {
    white-space: nowrap;
    font-size: 15.5px;
    padding: 13px 22px;
    line-height: 1.3;
  }
  /* A wrapper whose direct children are brand buttons = a button row */
  .brxe-div:has(> .brxe-button.mc-btn) {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
    gap: 12px !important;
  }
  .brxe-div:has(> .brxe-button.mc-btn) > .brxe-button.mc-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  /* Single buttons that sit directly in a centered column */
  .brxe-container > .brxe-button.mc-btn,
  .brxe-section > .brxe-container > .brxe-div > .brxe-button.mc-btn:only-child { width: 100%; justify-content: center; text-align: center; }

  /* Hero trust badges: one line each, wrap the row instead */
  .mc-hero .mc-badge,
  .mc-badge {
    white-space: nowrap;
    font-size: 12.5px;
    padding: 6px 11px;
  }
  .brxe-div:has(> .mc-badge) { flex-wrap: wrap !important; gap: 8px !important; }

  /* Product cards: one-line full-width button (label shortened in functions.php) */
  ul.products li.product .button {
    display: block !important;
    margin: auto 10px 12px !important;
    padding: 11px 8px !important;
    font-size: 14px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: 12px !important;
    text-align: center;
  }

  /* Single product (Bricks add-to-cart element, no .woocommerce div.product
     wrapper): quantity + button on one line, button takes the rest */
  .brxe-product-add-to-cart form.cart,
  .woocommerce div.product form.cart {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
    width: 100%;
  }
  .brxe-product-add-to-cart form.cart .quantity,
  .woocommerce div.product form.cart .quantity {
    flex: 0 0 120px;
    width: 120px !important;
    min-height: 48px;
    margin: 0 !important;
  }
  .brxe-product-add-to-cart form.cart .quantity .qty { min-height: 48px; font-size: 16px; }
  .brxe-product-add-to-cart form.cart .single_add_to_cart_button,
  .woocommerce div.product form.cart .single_add_to_cart_button {
    flex: 1 1 auto !important;
    width: auto !important;
    min-height: 48px;
    padding: 12px 16px !important;
    font-size: 16px !important;
    white-space: nowrap;
  }

  /* Contact form submit: brand style, full width */
  .brxe-form .submit-button-wrapper { width: 100% !important; }
  .brxe-form .bricks-button,
  .brxe-form button[type="submit"] {
    width: 100% !important;
    justify-content: center;
    min-height: 50px;
    background: var(--mc-honey) !important;
    color: #fff !important;
    border-radius: 999px;
    font-weight: 600;
    font-size: 16px;
  }

  /* Search box (404 / search page): full width, thumb-sized */
  .brxe-search .bricks-search-form,
  .brxe-search input[type="search"] { width: 100% !important; min-height: 48px; font-size: 16px; }

  /* Floating Zalo / Messenger / Hotline stack: smaller, tucked into the corner */
  body .dawp-contact-wrap.dawp-style-classic {
    bottom: 14px !important;
    right: 12px !important;
    left: auto !important;
    gap: 10px !important;
  }
  body .dawp-contact-wrap.dawp-style-classic .dawp-btn {
    width: 46px !important;
    height: 46px !important;
  }
  body .dawp-contact-wrap.dawp-style-classic .dawp-btn svg { width: 20px !important; height: 20px !important; }
}

/* Contact form submit also gets the brand skin on desktop */
.brxe-form .bricks-button,
.brxe-form button[type="submit"] {
  background: var(--mc-honey);
  color: #fff;
  border-radius: 999px;
  font-weight: 600;
  padding: 14px 32px;
  transition: background-color .18s ease;
}
.brxe-form .bricks-button:hover,
.brxe-form button[type="submit"]:hover { background: var(--mc-honey-dark); color: #fff; }

/* Single product summary: the imported "short" descriptions are long, so the
   buy controls ended up ~1,400px below the title. Buying controls belong
   right under the price on every screen size; the copy follows. */
.mc-product-summary > * { order: 20; }
.mc-product-summary > .brxe-product-title  { order: 1; }
.mc-product-summary > .brxe-product-rating { order: 2; }
.mc-product-summary > .brxe-product-price  { order: 3; }
.mc-product-summary > .brxe-product-stock  { order: 4; }
.mc-product-summary > .brxe-product-add-to-cart { order: 5; }
.mc-product-summary > .mc-pill-row         { order: 6; }
.mc-product-summary > .brxe-product-short-description { order: 7; }
.mc-product-summary > .brxe-product-meta   { order: 8; }
.brxe-product-add-to-cart form.cart .single_add_to_cart_button { align-self: stretch; height: auto !important; }
@media (max-width: 767px) {
  /* Quantity box and buy button share one 50px height */
  .brxe-product-add-to-cart form.cart .quantity,
  .brxe-product-add-to-cart form.cart .quantity .qty,
  .brxe-product-add-to-cart form.cart .quantity .action { height: 50px !important; min-height: 0 !important; }
  .brxe-product-add-to-cart form.cart .single_add_to_cart_button { height: 50px !important; min-height: 0; }
}

/* =========================================================
   9. Off-canvas mobile menu (Bricks nav-menu, breakpoint <= 991px)
   Bricks' default: centred uppercase links on a flat panel, close icon
   left where the hamburger was (over the first link). Restyled as a
   branded drawer: logo row, left-aligned links with dividers, indented
   sub-menu, hotline CTA at the bottom, close icon in the drawer corner.
   ========================================================= */
.brxe-nav-menu .bricks-mobile-menu-wrapper {
  width: min(84vw, 330px) !important;
  padding: 96px 0 28px !important;
  justify-content: flex-start !important;
  overflow-y: auto;
  box-shadow: 14px 0 44px rgba(0, 0, 0, .35);
}
.brxe-nav-menu .bricks-mobile-menu-wrapper::before {
  background: linear-gradient(165deg, var(--mc-green) 0%, var(--mc-green-dark) 100%) !important;
}
/* Brand row: logo + name, drawn on the panel itself */
.brxe-nav-menu .bricks-mobile-menu-wrapper::after {
  content: "Mật Ong Mai Cừ";
  position: absolute;
  top: 20px;
  left: 22px;
  height: 52px;
  padding-left: 64px;
  display: flex;
  align-items: center;
  font-family: var(--mc-font-display);
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  background: url("https://webdep.io.vn/matong/wp-content/uploads/2026/09/cropped-z6001391430292-34aaa92372a3992d1e3548bf316c790a-300x300.webp") left center / 52px 52px no-repeat;
  border-radius: 8px;
}
.brxe-nav-menu .bricks-mobile-menu {
  width: 100%;
  margin: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.brxe-nav-menu .bricks-mobile-menu > li {
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  text-align: left;
}
.brxe-nav-menu .bricks-mobile-menu > li > a,
.brxe-nav-menu .bricks-mobile-menu > li > .brx-submenu-toggle > a {
  display: flex !important;
  align-items: center;
  justify-content: flex-start !important;
  width: 100%;
  padding: 0 22px !important;
  line-height: 56px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: left !important;
  color: #fff !important;
}
.brxe-nav-menu .bricks-mobile-menu > li.current-menu-item > a,
.brxe-nav-menu .bricks-mobile-menu > li.current-menu-ancestor > .brx-submenu-toggle > a {
  color: var(--mc-gold) !important;
  box-shadow: inset 4px 0 0 var(--mc-gold-strong);
}
.brxe-nav-menu .bricks-mobile-menu .brx-submenu-toggle {
  width: 100%;
  justify-content: space-between !important;
  align-items: center;
}
.brxe-nav-menu .bricks-mobile-menu .brx-submenu-toggle button {
  width: 56px !important;
  height: 56px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mc-gold) !important;
  background: transparent !important;
}
.brxe-nav-menu .bricks-mobile-menu .sub-menu {
  background: rgba(0, 0, 0, .18);
  padding: 6px 0 !important;
  margin: 0 !important;
}
.brxe-nav-menu .bricks-mobile-menu .sub-menu li a {
  display: flex !important;
  align-items: center;
  justify-content: flex-start !important;
  padding: 0 22px 0 30px !important;
  line-height: 44px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-align: left !important;
  color: rgba(255, 255, 255, .9) !important;
}
.brxe-nav-menu .bricks-mobile-menu .sub-menu li a::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mc-gold-strong);
  margin-right: 12px;
  flex: none;
}
/* Hotline menu item (class mc-menu-hotline, mobile only) becomes the CTA */
.brxe-nav-menu .bricks-mobile-menu > li.mc-menu-hotline {
  border: 0;
  margin-top: 20px;
  padding: 0 22px;
}
.brxe-nav-menu .bricks-mobile-menu > li.mc-menu-hotline > a {
  justify-content: center !important;
  line-height: 50px !important;
  background: var(--mc-honey);
  border-radius: 999px;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}
.brxe-nav-menu .bricks-mobile-menu > li.mc-menu-hotline > a::before { content: "☎"; margin-right: 8px; }
@media (min-width: 992px) {
  .brxe-nav-menu li.mc-menu-hotline { display: none !important; }
}
/* Dim the page behind the drawer; move the close icon into the drawer corner */
.brxe-nav-menu .bricks-mobile-menu-overlay {
  background: rgba(2, 45, 24, .6) !important;
  backdrop-filter: blur(2px);
}
.brxe-nav-menu.show-mobile-menu > .bricks-mobile-menu-toggle {
  position: fixed !important;
  top: 38px !important;
  left: calc(min(84vw, 330px) - 42px) !important;
  color: #fff !important;
  z-index: 1001 !important;
}

/* Product gallery: the zoom layer is a 1080px image absolutely positioned
   inside the slide; clip it so it can never poke past the viewport. */
.woocommerce-product-gallery,
.woocommerce-product-gallery__wrapper,
.woocommerce-product-gallery__image { overflow: hidden; }

/* =========================================================
   10. Classic cart & checkout on phones (shortcode pages)
   Bricks only ships a base Woo layer, so the responsive table stacked into
   a 343px product photo, a stray "x" on its own row and 74px-tall buttons.
   ========================================================= */
@media (max-width: 767px) {
  .woocommerce table.shop_table.cart tr.cart_item {
    display: grid !important;
    grid-template-columns: 88px minmax(0, 1fr);
    grid-template-areas: "thumb name" "thumb price" "thumb qty" "remove subtotal";
    column-gap: 14px;
    row-gap: 6px;
    padding: 14px 0;
    border-bottom: 1px solid var(--mc-line);
  }
  .woocommerce table.shop_table.cart tr.cart_item td {
    display: block !important;
    width: auto !important;
    padding: 0 !important;
    border: 0 !important;
    text-align: left !important;
    background: transparent !important;
  }
  .woocommerce table.shop_table.cart td.product-thumbnail { grid-area: thumb; }
  .woocommerce table.shop_table.cart td.product-thumbnail img { width: 88px !important; height: auto; border-radius: 10px; }
  .woocommerce table.shop_table.cart td.product-name { grid-area: name; font-weight: 600; line-height: 1.4; }
  .woocommerce table.shop_table.cart td.product-price { grid-area: price; }
  .woocommerce table.shop_table.cart td.product-quantity { grid-area: qty; }
  .woocommerce table.shop_table.cart td.product-remove { grid-area: remove; align-self: center; }
  .woocommerce table.shop_table.cart td.product-subtotal { grid-area: subtotal; font-weight: 700; text-align: right !important; align-self: center; }
  .woocommerce table.shop_table.cart td::before { font-weight: 400; color: var(--mc-muted); }
  .woocommerce table.shop_table.cart td.product-name::before,
  .woocommerce table.shop_table.cart td.product-thumbnail::before,
  .woocommerce table.shop_table.cart td.product-remove::before { display: none; }
  .woocommerce table.shop_table.cart td.product-remove a.remove {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fdecea;
    color: var(--mc-red) !important;
    font-size: 20px;
    line-height: 1;
    text-decoration: none;
  }
  .woocommerce table.shop_table.cart td.actions {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    padding: 16px 0 0 !important;
    border: 0 !important;
  }
  .woocommerce table.shop_table.cart td.actions .coupon { display: flex; flex-direction: column; gap: 8px; width: 100%; }
  .woocommerce .coupon input.input-text {
    width: 100% !important;
    min-height: 46px;
    border: 1px solid var(--mc-line);
    border-radius: 10px;
    padding: 0 14px;
  }
  .woocommerce button.button,
  .woocommerce a.button,
  .woocommerce input.button,
  .woocommerce #place_order,
  .woocommerce .checkout-button {
    padding: 13px 20px !important;
    line-height: 1.3 !important;
    min-height: 0;
    font-size: 16px;
  }
  .woocommerce .cart_totals { width: 100% !important; margin-top: 20px; }
  .woocommerce-message,
  .woocommerce-info,
  .woocommerce-error { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
  .woocommerce-message .button { width: 100%; text-align: center; white-space: nowrap; margin: 0; }
  .woocommerce-form-coupon-toggle .woocommerce-info { display: block; }
  .woocommerce-checkout #payment { padding: 16px !important; }
  .woocommerce-checkout #payment div.payment_box { width: auto; }
  .woocommerce-checkout #place_order { width: 100%; }
}

/* Primary checkout actions in the brand colour on every screen size */
.woocommerce .cart_totals .checkout-button,
.woocommerce-checkout #place_order,
.woocommerce-message .button {
  background: var(--mc-honey) !important;
  color: #fff !important;
  border-radius: 999px;
  font-weight: 700;
}
.woocommerce .cart_totals .checkout-button:hover,
.woocommerce-checkout #place_order:hover,
.woocommerce-message .button:hover { background: var(--mc-honey-dark) !important; color: #fff !important; }

/* =========================================================================
   11. Toast "đã thêm vào giỏ hàng" (js/mc-cart-toast.js)
   ---------------------------------------------------------------------- */
.mc-toast-wrap {
  /* Góc trái dưới: góc phải dưới đã có cụm nút nổi Zalo / Messenger / gọi. */
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(380px, calc(100vw - 40px));
  pointer-events: none;
}
.mc-toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 14px 14px 16px;
  background: var(--mc-white);
  color: var(--mc-ink);
  border-left: 5px solid var(--mc-green);
  border-radius: var(--mc-radius-sm);
  box-shadow: 0 12px 34px rgba(23, 40, 31, .22);
  font-family: var(--mc-font-body);
  font-size: 15px;
  line-height: 1.45;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(16px) scale(.98);
  transition: opacity .3s ease, transform .3s cubic-bezier(.2, .8, .3, 1.1);
}
.mc-toast.is-visible { opacity: 1; transform: none; }
.mc-toast.is-leaving  { opacity: 0; transform: translateY(10px); }
.mc-toast--error { border-left-color: var(--mc-red); }
.mc-toast__icon {
  flex: 0 0 34px;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--mc-green);
  color: #fff;
  margin-top: 1px;
}
.mc-toast--error .mc-toast__icon { background: var(--mc-red); }
.mc-toast__body { flex: 1 1 auto; min-width: 0; }
.mc-toast__msg  { font-weight: 600; word-break: break-word; }
.mc-toast__link {
  display: inline-block;
  margin-top: 6px;
  color: var(--mc-honey-dark);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.mc-toast__link:hover { color: var(--mc-honey); border-bottom-color: currentColor; }
.mc-toast__close {
  flex: 0 0 auto;
  background: none; border: 0; padding: 0 2px;
  margin: -4px -4px 0 0;
  font-size: 24px; line-height: 1;
  color: var(--mc-muted);
  cursor: pointer;
}
.mc-toast__close:hover { color: var(--mc-ink); }

/* Nút trên trang chi tiết khi đang gửi AJAX */
.single_add_to_cart_button.loading { opacity: .7; cursor: progress; }

@media (max-width: 767px) {
  /* Trên điện thoại cụm nút nổi chiếm đáy màn hình, nên đẩy toast lên đầu. */
  .mc-toast-wrap {
    right: 12px; left: 12px; bottom: auto; top: 12px;
    width: auto;
  }
  .mc-toast { transform: translateY(-16px) scale(.98); }
  .mc-toast.is-leaving { transform: translateY(-10px); }
  .mc-toast { font-size: 14px; padding: 12px 12px 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .mc-toast { transition: opacity .15s linear; transform: none; }
}