/**
 * Shop / category listing — the "editorial mosaic" from the design, in the
 * site's own tokens: product-page heading sizes, the tabs' filter style, the
 * pill badge, and the rail/gutter used everywhere else.
 * Loaded on the shop page and product taxonomy archives (inc/product-setup.php).
 */

.mm-shop {
  --mm-cols: 4;                                              /* desktop columns; see MEGMAKESME_SHOP_COLUMNS */
  --mm-rail: clamp(58px, 7vw, 84px);
  --mm-gutter: clamp(24px, 4vw, 56px);
  --mm-ink: var(--wp--preset--color--mm-hero, #3a3e35);
  --mm-label: #a5a096;
  margin-right: var(--mm-rail);
  background: var(--wp--preset--color--mm-base, #f2f1ee);
}

/* --- Head: script + title, text filters aligned to the baseline ---- */
.mm-shop__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding: clamp(104px, 15vh, 150px) var(--mm-gutter) clamp(24px, 4vh, 32px);  /* top clears the fixed logo */
}
.mm-shop__script {
  font-family: "Mistgak Signature", var(--mm-font);
  font-size: max(30px, var(--wp--preset--font-size--large, 1.5rem));   /* same as the product bar's script */
  line-height: 1;
  color: var(--wp--preset--color--mm-clay, #bc8c78);
}
.mm-shop__title {
  margin: 8px 0 0;
  font-size: 48px;                                           /* same as the product title */
  font-weight: 200;
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--mm-ink);
}
.mm-shop__filters { display: flex; gap: 22px; flex-wrap: wrap; padding-bottom: 10px; }
.mm-shop__filter {                                           /* the detail tabs' label style */
  padding: 0 0 5px;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: none;
  font-family: var(--mm-font);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--mm-label);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.mm-shop__filter:hover,
.mm-shop__filter:focus-visible { color: var(--mm-ink); }
.mm-shop__filter.is-active { color: var(--mm-ink); border-bottom-color: var(--mm-ink); }
a.mm-shop__filter { display: inline-block; text-decoration: none; }   /* category pages: the switcher links between categories */

/* --- Mosaic grid: 4 columns, hairline gaps, first tile 2×2 ------- */
.mm-shop--cols-3 { --mm-cols: 3; }
.mm-shop__grid {
  display: grid;
  grid-template-columns: repeat(var(--mm-cols), minmax(0, 1fr));
  /* Rows are half a screen, so a feature tile (2 rows) is exactly one screen
     tall including its caption, and the others are half that. */
  grid-auto-rows: calc((100vh - 3px) / 2);
  grid-auto-rows: calc((100svh - 3px) / 2);
  grid-auto-flow: dense;
  gap: 3px;
  padding: 0 0 clamp(48px, 7vh, 84px);
}
.mm-tile {
  display: flex;
  flex-direction: column;
  background: var(--wp--preset--color--mm-base, #f2f1ee);
}
.mm-tile[hidden] { display: none; }
.mm-tile.is-feature { grid-column: span 2; grid-row: span 2; }

.mm-tile__frame {
  position: relative;
  flex: 1;                                                   /* photo fills the row above the fixed caption */
  min-height: 0;
  overflow: hidden;
  container-type: inline-size;                               /* pages size with the tile (cqw) */
  background: var(--wp--preset--color--mm-greige, #eae9e5);
}
.mm-tile__media { position: absolute; inset: 0; display: block; }
.mm-tile__img {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mm-tile:hover .mm-tile__img,
.mm-tile:focus-within .mm-tile__img { transform: scale(1.045); }

.mm-tile__badge {                                            /* pill, like the site's buttons */
  position: absolute;
  left: 18px;
  top: 18px;
  z-index: 2;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--wp--preset--color--mm-sage, #8c9082);
  color: #fff;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.mm-tile__badge--bundle { background: var(--wp--preset--color--mm-clay, #bc8c78); }

/* Hover bar: slides up from the bottom; the PDF pages rise with it. */
.mm-tile__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 12px 16px;
  background: var(--mm-ink);
  color: #fff;
  transform: translateY(calc(100% + 2px));                  /* fully out: 100% alone leaves a sub-pixel sliver of the bar showing */
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.mm-tile:hover .mm-tile__bar,
.mm-tile:focus-within .mm-tile__bar { transform: none; }
.mm-tile__add {                                              /* plain text; becomes the clay pill when hovered itself */
  display: inline-block;
  padding: 11px 22px;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-family: var(--mm-font);
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.mm-tile__add:hover,
.mm-tile__add:focus,
.mm-tile__add:focus-visible { background: var(--wp--preset--color--mm-clay, #bc8c78); color: #fff; }
.mm-tile .added_to_cart { display: none !important; }        /* Woo's injected "View cart" link */
.mm-tile__pages {                                            /* same arrangement as the product page: cover in front, cut sheet peeking out right and lower */
  position: absolute;
  right: calc(18px + var(--w) * 0.5);                        /* the back sheet's overhang reaches 18px from the edge */
  bottom: 0;                                                 /* flush with the bar's bottom edge */
  width: var(--w);
  aspect-ratio: 247 / 349;
  pointer-events: none;
  opacity: 0;
  transform: translateY(calc(100% + 2px));
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s ease;
}
.mm-tile:hover .mm-tile__pages,
.mm-tile:focus-within .mm-tile__pages { opacity: 1; transform: none; }
.mm-tile__pages {
  /* Sheet width from the tile width: the pair (1.5 × w, back offset 50%)
     always leaves room for "Add to cart"; caps at the design's 92px. */
  --w: clamp(40px, calc((100cqw - 190px) / 1.5), 92px);
}
.mm-tile__page {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  background: #fff;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.14);
}
.mm-tile__page { transform: translate(calc(var(--i, 0) * 50% * var(--mm-fan, 1)), calc(var(--i, 0) * 12% * var(--mm-fan, 1))); z-index: calc(10 - var(--i, 0)); }  /* fanned like the product page; bundles show every template's first page */
.mm-tile.is-feature .mm-tile__pages { right: calc(28px + var(--w) * 0.5); --w: clamp(110px, calc((100cqw - 230px) / 1.5), 170px); }

/* Name / sub-category / price */
.mm-tile__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  height: 104px;                                             /* same on every tile, so the photos line up */
  padding: 18px 22px 22px;
  overflow: hidden;
}
.mm-tile__text { min-width: 0; }
.mm-tile__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;                                     /* two lines max */
  overflow: hidden;
  padding-bottom: 0.18em;                                    /* room for descenders inside the clipped box */
  margin-bottom: -0.18em;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.15;
  color: var(--mm-ink);
  text-decoration: none;
}
.mm-tile__name:hover,
.mm-tile__name:focus-visible { color: var(--wp--preset--color--mm-clay, #bc8c78); }
.mm-tile.is-feature .mm-tile__name { font-size: 26px; }
.mm-tile__cat { margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--mm-label); }
.mm-tile__price { flex: none; font-size: 14px; font-weight: 400; color: var(--mm-ink); }
.mm-tile__price del { color: var(--mm-label); font-weight: 300; margin-right: 6px; }
.mm-shop__empty { padding: 0 var(--mm-gutter) clamp(48px, 7vh, 84px); color: var(--mm-label); }

/* --- Tablet / phone ---------------------------------------------- */
@media (max-width: 1023px) {
  .mm-shop { --mm-cols: 3; }
}
@media (max-width: 767px) {
  .mm-shop { --mm-rail: 0px; }
  .mm-shop__head { padding-top: clamp(88px, 14vh, 120px); }
  .mm-shop__title { font-size: clamp(32px, 9vw, 40px); }
  .mm-shop { --mm-cols: 2; }
  .mm-shop__grid { grid-auto-rows: auto; }                   /* phones: photo-proportioned tiles instead of screen halves */
  .mm-tile__frame { flex: none; aspect-ratio: 4 / 5; }
  .mm-tile.is-feature { grid-column: span 2; grid-row: span 1; }
  .mm-tile.is-feature .mm-tile__frame { aspect-ratio: 1 / 1; }
  .mm-tile.is-feature .mm-tile__name { font-size: 22px; }
  .mm-tile__meta { padding: 14px 14px 18px; height: 88px; }
  .mm-tile__name { font-size: 15px; }
  .mm-tile__bar { padding: 10px 12px; }
  .mm-tile__add { padding: 9px 16px; font-size: 10px; letter-spacing: 1px; }
  /* No hover on touch: keep the add-to-cart bar visible. */
  @media (hover: none) {
    .mm-tile__bar { transform: none; }
    .mm-tile__pages { display: none; }
  }
}