/* Molongo: base visual (tokens, tipografia, botons, capçalera, peu, targetes).
   Colors mostrejats de data/redisseny/ref/*.webp. */

:root {
  --mlg-purple: #7202fe;        /* botons i accent (1.webp) */
  --mlg-purple-hover: #5c00d4;
  --mlg-purple-dark: #300374;   /* barra superior (4.webp) */
  --mlg-purple-logo: #651ab5;   /* rajos del logo (5.webp) */
  --mlg-purple-soft: #9b5cff;   /* detalls sobre negre */
  --mlg-lilac: #f1ecfe;         /* bandes (1.webp) */
  --mlg-lilac-2: #ede4fe;       /* píndola activa (4.webp) */
  --mlg-black: #000;
  --mlg-ink: #111;
  --mlg-muted: #5b5662;
  --mlg-line: #e4dff0;
  --mlg-white: #fff;

  --mlg-font-head: "Outfit", "Inter Molongo", system-ui, sans-serif;
  --mlg-font-poster: "Anton", "Outfit", Impact, sans-serif;
  --mlg-font-body: "Inter Molongo", var(--wp--preset--font-family--inter, "Inter"), system-ui, sans-serif;

  --mlg-radius: 8px;
  --mlg-radius-card: 14px;

  /* paleta de Purple alineada amb la marca */
  --wp--preset--color--theme-5: var(--mlg-lilac);
  --wp--preset--color--theme-7: var(--mlg-purple);
}

/* ---------- Tipografia ---------- */
body {
  font-family: var(--mlg-font-body);
  font-weight: 400;
  color: var(--mlg-ink);
}
:root :where(h1, h2, h3, h4, h5, h6, .wp-block-post-title, .wp-block-site-title) {
  font-family: var(--mlg-font-head);
  letter-spacing: -0.01em;
}
:root :where(h1, h2, .wp-block-post-title) { font-weight: 800; }
:root :where(h3, h4) { font-weight: 700; }
:root :where(h5, h6) { font-weight: 600; }
.mlg-poster { font-family: var(--mlg-font-poster); font-weight: 400; text-transform: uppercase; letter-spacing: 0; }
.mlg-accent { color: var(--mlg-purple); }
::selection { background: var(--mlg-purple); color: #fff; }
:focus-visible { outline: 2px solid var(--mlg-purple); outline-offset: 2px; }

/* ---------- Botons ---------- */
:root :where(.wp-element-button, .wp-block-button__link) {
  background-color: var(--mlg-purple);
  color: #fff;
  border-radius: var(--mlg-radius);
  font-family: var(--mlg-font-head);
  font-weight: 700;
}
:root :where(.wp-element-button, .wp-block-button__link):hover {
  background-color: var(--mlg-purple-hover);
  color: #fff;
}
:root :where(.is-style-outline > .wp-block-button__link) {
  background: transparent;
  color: currentColor;
  border: 2px solid currentColor;
}
:root :where(.is-style-outline > .wp-block-button__link):hover {
  background: var(--mlg-purple);
  border-color: var(--mlg-purple);
  color: #fff;
}
.wc-block-components-button:not(.is-link),
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  border-radius: var(--mlg-radius);
}
.wc-block-components-button:not(.is-link):not(.outlined):not(.wc-block-components-quantity-selector__button):not([class*="has-"]) {
  background-color: var(--mlg-purple);
  color: #fff;
}
.wc-block-components-button:not(.is-link):not(.outlined):not(.wc-block-components-quantity-selector__button):not([class*="has-"]):hover {
  background-color: var(--mlg-purple-hover);
}

/* ---------- Icones (màscares SVG, color = currentColor) ---------- */
.mlg-ico-truck { --mlg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2M15 18H9M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.62l-3.48-4.35A1 1 0 0 0 17.52 8H14'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3C/svg%3E"); }
.mlg-ico-spark { --mlg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.9 5.8a2 2 0 0 0 1.3 1.3L21 12l-5.8 1.9a2 2 0 0 0-1.3 1.3L12 21l-1.9-5.8a2 2 0 0 0-1.3-1.3L3 12l5.8-1.9a2 2 0 0 0 1.3-1.3z'/%3E%3C/svg%3E"); }
.mlg-ico-mail { --mlg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E"); }
.mlg-ico-lock { --mlg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E"); }
.mlg-ico-shirt { --mlg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.4 6.6 16 4a4 4 0 0 1-8 0L3.6 6.6a1 1 0 0 0-.5 1.2l.6 2.4a1 1 0 0 0 1.1.8H6v9a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-9h1.2a1 1 0 0 0 1.1-.8l.6-2.4a1 1 0 0 0-.5-1.2z'/%3E%3C/svg%3E"); }
/* categories */
.mlg-ico-humor { --mlg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 14s1.5 2 4 2 4-2 4-2'/%3E%3Cpath d='M9 9h.01M15 9h.01'/%3E%3C/svg%3E"); }
.mlg-ico-friki { --mlg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 11h4M8 9v4M15 12h.01M18 10h.01'/%3E%3Cpath d='M17.32 5H6.68a4 4 0 0 0-3.98 3.59l-.6 5.3A3 3 0 0 0 5.08 17c1 0 1.6-.5 2.2-1.2L9 14h6l1.7 1.8c.6.7 1.2 1.2 2.2 1.2a3 3 0 0 0 2.98-3.11l-.6-5.3A4 4 0 0 0 17.32 5z'/%3E%3C/svg%3E"); }
.mlg-ico-reivindicativas { --mlg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 18-5v12L3 14v-3z'/%3E%3Cpath d='M11.6 16.8a3 3 0 1 1-5.8-1.6'/%3E%3C/svg%3E"); }
.mlg-ico-series { --mlg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.2 6 3 11l-.9-2.4c-.3-1.1.3-2.2 1.3-2.5l13.5-4c1.1-.3 2.2.3 2.5 1.3z'/%3E%3Cpath d='m6.2 5.3 3.1 3.9M12.4 3.4l3.1 4M3 11h18v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E"); }
.mlg-ico-anime { --mlg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5c.67 0 1.35.09 2 .26 1.78-2 5.03-2.84 6.42-2.26 1.4.58-.42 7-.42 7 .57 1.07 1 2.24 1 3.44C21 17.9 16.97 21 12 21s-9-3-9-7.56c0-1.25.5-2.4 1-3.44 0 0-1.89-6.42-.5-7 1.39-.58 4.72.23 6.5 2.23A9.04 9.04 0 0 1 12 5z'/%3E%3Cpath d='M8 14v.5M16 14v.5M11.25 16.25h1.5L12 17l-.75-.75z'/%3E%3C/svg%3E"); }

:where([class*="mlg-ico-"]:not(.wp-block-button):not(.wp-block-buttons))::before,
.wp-block-button[class*="mlg-ico-"] > .wp-block-button__link::before {
  content: "";
  display: inline-block;
  flex: none;
  width: 1.15em;
  height: 1.15em;
  margin-right: 0.5em;
  vertical-align: -0.2em;
  background-color: currentColor;
  -webkit-mask: var(--mlg-icon) center / contain no-repeat;
  mask: var(--mlg-icon) center / contain no-repeat;
}

/* ---------- Píndoles de categoria ----------
   <div class="wp-block-buttons mlg-pills"> amb
   <div class="wp-block-button mlg-pill mlg-ico-humor"><a class="wp-block-button__link">…
   (o <a class="mlg-pill mlg-ico-humor">). Activa: .is-active o aria-current. */
.mlg-pills { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.mlg-pill > .wp-block-button__link,
a.mlg-pill {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0.6rem 1.15rem;
  border: 1.5px solid #cdbdf7;
  border-radius: 999px;
  background: #fff;
  color: var(--mlg-ink);
  font-family: var(--mlg-font-body);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color .15s, border-color .15s, color .15s;
}
.mlg-pill > .wp-block-button__link::before,
a.mlg-pill::before { color: var(--mlg-purple); }
.mlg-pill > .wp-block-button__link:hover,
a.mlg-pill:hover,
.mlg-pill.is-active > .wp-block-button__link,
a.mlg-pill.is-active,
a.mlg-pill[aria-current] {
  background: var(--mlg-lilac-2);
  border-color: var(--mlg-purple);
  color: var(--mlg-purple);
  text-decoration: none;
}
@media (max-width: 600px) {
  .mlg-pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .mlg-pills::-webkit-scrollbar { display: none; }
  .mlg-pill { flex: none; }
}

/* ---------- Barra superior ---------- */
.mlg-topbar {
  background: var(--mlg-purple-dark);
  color: #fff;
  gap: 0.4rem 2.75rem;
  font-size: 0.8125rem;
  line-height: 1.4;
}
.mlg-topbar p { margin: 0; display: inline-flex; align-items: center; }
.mlg-topbar strong { font-weight: 700; margin-right: 0.25em; }
.mlg-topbar a { color: #fff; text-decoration: none; }
.mlg-topbar a:hover { text-decoration: underline; }
.mlg-topbar .mlg-topbar__item::before { color: #c9a8ff; }
@media (max-width: 700px) {
  .mlg-topbar .mlg-topbar__item:not(:first-child) { display: none; }
}

/* ---------- Capçalera ---------- */
.mlg-header { background: #fff; border-bottom: 1px solid var(--mlg-line); }
.mlg-logo { display: block; line-height: 0; flex: none; }
.mlg-logo img { display: block; width: 190px; height: auto; }
.mlg-header .wp-block-navigation { font-size: 1rem; font-weight: 500; }
.mlg-header .mlg-nav .wp-block-navigation__container { gap: 0.5rem 1.75rem; }
.mlg-header .mlg-nav .wp-block-navigation-item__content {
  position: relative;
  padding-block: 0.35rem;
  color: var(--mlg-ink);
  text-decoration: none;
}
.mlg-header .mlg-nav .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 3px;
  border-radius: 3px;
  background: var(--mlg-purple);
  transform: scaleX(0);
  transition: transform .15s;
}
.mlg-header .mlg-nav .wp-block-navigation-item__content:hover,
.mlg-header .mlg-nav .current-menu-item > .wp-block-navigation-item__content,
.mlg-header .mlg-nav [aria-current] { color: var(--mlg-purple); }
.mlg-header .mlg-nav .wp-block-navigation-item__content:hover::after,
.mlg-header .mlg-nav .current-menu-item > .wp-block-navigation-item__content::after,
.mlg-header .mlg-nav [aria-current]::after { transform: scaleX(1); }
.mlg-header .wc-block-mini-cart__badge {
  background: var(--mlg-purple) !important;
  color: #fff !important;
  border-color: #fff;
  font-weight: 700;
}
@media (max-width: 1100px) and (min-width: 782px) {
  .mlg-logo img { width: 160px; }
  .mlg-header .wp-block-navigation { font-size: 0.9375rem; }
}
@media (max-width: 781px) {
  .mlg-logo img { width: 140px; }
}

/* ---------- Targetes de producte ---------- */
.wc-block-product .wc-block-components-product-image,
.wc-block-grid__product .wc-block-grid__product-image,
.woocommerce ul.products li.product a img {
  aspect-ratio: 4 / 5;
  background: var(--mlg-black);
  border-radius: var(--mlg-radius-card);
  overflow: hidden;
}
.wc-block-product .wc-block-components-product-image img,
.wc-block-grid__product .wc-block-grid__product-image img {
  width: 100%;
  height: 100% !important;
  aspect-ratio: 4 / 5 !important;
  object-fit: contain !important;
  background: var(--mlg-black);
}
.woocommerce ul.products li.product a img { object-fit: contain; }
.wc-block-product .wc-block-components-product-image > a { display: block; height: 100%; }
.wc-block-product .wp-block-post-title,
.wc-block-product .wc-block-components-product-name {
  font-family: var(--mlg-font-head);
  font-weight: 700;
  letter-spacing: 0;
}
.wc-block-product .wp-block-post-title a { text-decoration: none; }
.wc-block-product .wp-block-post-title a:hover { color: var(--mlg-purple); }
.wc-block-product .wc-block-components-product-price,
.wc-block-product .wp-block-woocommerce-product-price {
  color: var(--mlg-purple);
  font-weight: 700;
}

/* ---------- Peu ---------- */
.mlg-footer { position: relative; font-size: 0.9375rem; }
.mlg-footer__cat {
  position: absolute;
  top: 0;
  right: max(4vw, 16px);
  width: 190px;
  max-width: none !important;
  height: auto;
  margin: 0 !important;
  transform: translateY(-91%);
  pointer-events: none;
  z-index: 2;
}
.mlg-footer a { color: #fff; text-decoration: none; }
.mlg-footer a:hover { color: #c9a8ff; text-decoration: underline; }
.mlg-footer__logo { display: inline-block; line-height: 0; }
.mlg-footer__logo img { width: 200px; height: auto; }
.mlg-footer__brand p { color: #d6d3dc; max-width: 34ch; }
.mlg-footer .mlg-footer__facts { font-size: 0.8125rem; color: #a9a4b3; }
.mlg-footer .mlg-footer__title {
  color: #fff;
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
}
.mlg-footer__links { list-style: none; margin: 0; padding: 0; }
.mlg-footer__links li { margin: 0 0 0.45rem; }
.mlg-footer__links a { color: #d6d3dc; }
.mlg-footer__bottom {
  margin-top: var(--wp--preset--spacing--50);
  padding-top: var(--wp--preset--spacing--30);
  border-top: 1px solid #2a2a2a;
  font-size: 0.8125rem;
  color: #a9a4b3;
  gap: 0.5rem 2rem;
}
.mlg-footer__bottom p { margin: 0; }
.mlg-footer__bottom a { color: inherit; text-decoration: underline; }
.mlg-footer__pay { display: inline-flex; align-items: center; color: #fff; font-weight: 600; }
.mlg-footer__pay::before { color: var(--mlg-purple-soft); }
@media (max-width: 781px) {
  .mlg-footer__cat { width: 130px; transform: translateY(-90%); }
  .mlg-footer__cols { gap: 1.75rem; }
}