/*
 * Child theme main stylesheet
 * Page-specific or component-specific CSS should live here first.
 */

.mona-about-page {
    display: block;
}

/* --- Variant buttons (Nữ/Nam/Cả đôi) on product cards --- */
.card__variant {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.card__variant .vbtn {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 7px 14px;
  border: 1px solid var(--line2);
  background: transparent;
  color: var(--ink2);
  cursor: pointer;
  transition: .3s;
  font-family: var(--f);
  border-radius: 40px;
}
.card__variant .vbtn:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.card__variant .vbtn.on {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* --- Product card: equal columns + price row pinned to the bottom, EVERYWHERE the
       card is used (homepage rails, PLP grid, PDP related). min-width:0 lets a flex
       item honour its track width instead of stretching to the nowrap product name
       (that stretch made homepage rail cards different widths → different image
       heights). Plain .card (specificity 0,1,0) so the filter's .card.hide still wins;
       the !important hide is a belt-and-braces guard against any 0,2,0 display rule
       (e.g. .grid .card{display:flex}) that would otherwise un-hide filtered cards. --- */
.card{display:flex;flex-direction:column;min-width:0}
.card__body{flex:1;display:flex;flex-direction:column;min-width:0}
.card__price{margin-top:auto}
.card.hide{display:none!important}