/*
Theme Name: Meme Merch
Theme URI: http://localhost:8090
Description: Child theme di Twenty Twenty-Five per l'ecommerce di merch da meme — magliette, tazze, tote bag, felpe. Stile sticker/neo-brutalist: bordi spessi, ombre dure, colori pop.
Author: Escamotages
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Requires PHP: 8.1
Text Domain: meme-merch
*/

/* =====================================================
   1. BASE & UTILITY
   ===================================================== */

:root {
  --mm-ink: #141414;
  --mm-cream: #fff6e9;
  --mm-yellow: #ffd100;
  --mm-pink: #ff4d6d;
  --mm-violet: #6c4df6;
  --mm-teal: #2ec4b6;
  --mm-peach: #ffe8cc;
  --mm-border: 3px solid var(--mm-ink);
  --mm-shadow: 6px 6px 0 var(--mm-ink);
  --mm-shadow-sm: 4px 4px 0 var(--mm-ink);
  --mm-radius: 16px;
  --mm-radius-sm: 12px;
}

::selection {
  background: var(--mm-yellow);
  color: var(--mm-ink);
}

body {
  -webkit-font-smoothing: antialiased;
}

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

/* Titoli sezione con evidenziatore */
.mm-section-kicker {
  display: table;
  margin-inline: auto;
  background: var(--mm-ink);
  color: var(--mm-cream) !important;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.35em 1em;
  border-radius: 999px;
  transform: rotate(-2deg);
}

/* Evidenziatori nei titoli, modificabili dall'editor con i formati nativi:
   grassetto = evidenziatore giallo, corsivo = evidenziatore rosa. */
h1 strong, h2 strong, h3 strong,
.mm-highlight {
  font-weight: inherit;
  background: linear-gradient(transparent 55%, var(--mm-yellow) 55%, var(--mm-yellow) 92%, transparent 92%);
  padding: 0 0.08em;
}

h1 em, h2 em, h3 em,
.mm-highlight--pink {
  font-style: normal;
  background: linear-gradient(transparent 55%, var(--mm-pink) 55%, var(--mm-pink) 92%, transparent 92%);
  padding: 0 0.08em;
}

/* =====================================================
   2. HEADER
   ===================================================== */

.mm-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--mm-cream);
  border-bottom: var(--mm-border);
}

.wp-admin-bar .mm-header,
body.admin-bar .mm-header {
  top: 32px;
}

.mm-header .wp-block-site-title {
  margin: 0;
}

.mm-header .wp-block-site-title a {
  text-decoration: none;
  display: inline-block;
  background: var(--mm-yellow);
  border: var(--mm-border);
  border-radius: 10px;
  box-shadow: 3px 3px 0 var(--mm-ink);
  padding: 0.1em 0.45em;
  transform: rotate(-2deg);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.mm-header .wp-block-site-title a:hover {
  transform: rotate(1deg) scale(1.03);
  box-shadow: 5px 5px 0 var(--mm-ink);
}

.mm-header .wp-block-navigation a {
  text-decoration: none;
  padding: 0.35em 0.8em;
  border-radius: 999px;
  border: 2px solid transparent;
  transition: all 0.15s ease;
}

.mm-header .wp-block-navigation a:hover {
  background: var(--mm-ink);
  color: var(--mm-cream);
}

/* Mini cart */
.mm-header .wc-block-mini-cart__button {
  border: var(--mm-border);
  border-radius: 999px;
  background: var(--mm-cream);
  box-shadow: 3px 3px 0 var(--mm-ink);
  padding: 0.4em 0.9em;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}

.mm-header .wc-block-mini-cart__button:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--mm-ink);
  background: var(--mm-yellow);
}

.wc-block-mini-cart__badge {
  background: var(--mm-pink);
  color: #fff;
  border: 2px solid var(--mm-ink);
}

/* =====================================================
   3. MARQUEE (striscia scorrevole)
   ===================================================== */

.mm-marquee {
  background: var(--mm-ink);
  color: var(--mm-cream);
  overflow: hidden;
  white-space: nowrap;
  padding: 0.55em 0;
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.mm-marquee__track {
  display: inline-block;
  animation: mm-scroll 28s linear infinite;
}

.mm-marquee__track span {
  margin: 0 1.4em;
}

.mm-marquee__track .mm-star {
  color: var(--mm-yellow);
}

@keyframes mm-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .mm-marquee__track { animation: none; }
  .mm-sticker { animation: none !important; }
}

/* =====================================================
   4. HERO
   ===================================================== */

.mm-hero {
  position: relative;
  overflow: hidden;
}

.mm-hero h1 {
  position: relative;
  z-index: 2;
}

.mm-hero .mm-hero-sub {
  font-size: 1.25rem;
  max-width: 42rem;
}

/* Sticker emoji fluttuanti */
.mm-sticker {
  position: absolute;
  font-size: clamp(3rem, 7vw, 5.5rem);
  line-height: 1;
  z-index: 1;
  filter: drop-shadow(4px 4px 0 rgba(20, 20, 20, 0.18));
  animation: mm-float 6s ease-in-out infinite;
  user-select: none;
  pointer-events: none;
}

.mm-sticker--1 { top: 12%; left: 4%; transform: rotate(-12deg); animation-delay: 0s; }
.mm-sticker--2 { top: 16%; right: 6%; transform: rotate(14deg); animation-delay: 1.2s; }
.mm-sticker--3 { bottom: 14%; left: 10%; transform: rotate(8deg); animation-delay: 2.1s; }
.mm-sticker--4 { bottom: 18%; right: 12%; transform: rotate(-10deg); animation-delay: 0.7s; }

@keyframes mm-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -14px; }
}

@media (max-width: 781px) {
  .mm-sticker { font-size: 2.2rem; opacity: 0.85; }
}

/* =====================================================
   5. CARD CATEGORIE
   ===================================================== */

.mm-cat-card {
  position: relative;
  border: var(--mm-border);
  border-radius: var(--mm-radius);
  box-shadow: var(--mm-shadow);
  padding: 2rem 1.5rem !important;
  text-align: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  height: 100%;
}

.mm-cat-card:hover {
  transform: translate(-3px, -3px) rotate(-1deg);
  box-shadow: 9px 9px 0 var(--mm-ink);
}

.mm-cat-card .mm-cat-emoji {
  font-size: 4rem;
  line-height: 1;
  margin: 0 0 0.5rem;
}

.mm-cat-card h3 {
  font-size: 1.3rem;
  margin: 0 0 0.25rem;
}

.mm-cat-card p {
  font-size: 0.92rem;
  margin: 0;
}

.mm-cat-card a {
  text-decoration: none;
  color: inherit;
}

/* L'intera card è cliccabile */
.mm-cat-card a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
}

.mm-cat--yellow { background: var(--mm-yellow); }
.mm-cat--pink   { background: var(--mm-pink); color: #fff; }
.mm-cat--pink h3, .mm-cat--pink a { color: #fff; }
.mm-cat--violet { background: var(--mm-violet); color: #fff; }
.mm-cat--violet h3, .mm-cat--violet a { color: #fff; }
.mm-cat--teal   { background: var(--mm-teal); }

/* =====================================================
   6. GRIGLIA PRODOTTI (shortcode classico + blocchi Woo)
   ===================================================== */

/* Reset lista: il layout a griglia lo gestisce il tema, non Woo */
.woocommerce ul.products,
ul.wc-block-grid__products,
ul.wc-block-product-template,
ul.wc-block-product-template.is-flex-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

ul.wc-block-product-template.columns-3,
ul.wc-block-product-template.is-flex-container.columns-3 {
  grid-template-columns: repeat(3, 1fr);
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
  display: none;
}

@media (max-width: 1024px) {
  .woocommerce ul.products,
  ul.wc-block-grid__products,
  ul.wc-block-product-template.is-flex-container,
  ul.wc-block-product-template.columns-3,
  ul.wc-block-product-template.is-flex-container.columns-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .woocommerce ul.products,
  ul.wc-block-grid__products,
  ul.wc-block-product-template.is-flex-container,
  ul.wc-block-product-template.columns-3,
  ul.wc-block-product-template.is-flex-container.columns-3 {
    grid-template-columns: 1fr;
  }
}

/* Card prodotto — ricetta condivisa: shortcode, wc-block-grid e product collection */
.woocommerce ul.products li.product,
.wc-block-grid__product,
.wp-block-post-template li.product,
.wc-block-product-template .wc-block-product {
  float: none;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  background: #fff;
  border: var(--mm-border);
  border-radius: var(--mm-radius);
  box-shadow: var(--mm-shadow-sm);
  padding: 1rem 1rem 1.4rem !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  position: relative;
  overflow: visible;
}

.woocommerce ul.products li.product:hover,
.wc-block-grid__product:hover,
.wp-block-post-template li.product:hover,
.wc-block-product-template .wc-block-product:hover {
  transform: translate(-3px, -3px) rotate(-0.5deg);
  box-shadow: 8px 8px 0 var(--mm-ink);
}

/* Immagine prodotto */
.woocommerce ul.products li.product img,
.wc-block-grid__product img,
.wp-block-post-template li.product img,
.wc-block-product-template .wc-block-product img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 2px solid var(--mm-ink);
  border-radius: var(--mm-radius-sm);
  margin: 0 0 0.6rem !important;
}

/* Titolo prodotto */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title,
.wp-block-post-template li.product .wp-block-post-title,
.wc-block-product-template .wp-block-post-title {
  font-family: "Archivo Black", "Arial Black", sans-serif;
  font-size: 1.05rem !important;
  text-transform: uppercase;
  line-height: 1.2;
  padding: 0;
  margin: 0;
}

.wp-block-post-template li.product .wp-block-post-title a,
.wc-block-product-template .wp-block-post-title a {
  text-decoration: none;
}

/* Prezzo a pillola */
.woocommerce ul.products li.product .price,
.wc-block-grid__product-price,
.wc-block-components-product-price {
  color: var(--mm-ink) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
}

.woocommerce ul.products li.product .price {
  display: inline-block;
  background: var(--mm-yellow);
  border: 2px solid var(--mm-ink);
  border-radius: 999px;
  padding: 0.1em 0.7em;
  align-self: center;
  margin: 0;
}

/* Prezzo a pillola anche nelle card del catalogo a blocchi (shop) */
.wc-block-product .wc-block-components-product-price {
  display: table;
  margin-inline: auto;
  background: var(--mm-yellow);
  border: 2px solid var(--mm-ink);
  border-radius: 999px;
  padding: 0.1em 0.7em;
}

/* Il contenitore del bottone occupa tutta la card e spinge in basso */
.wc-block-product .wc-block-components-product-button,
.wp-block-post-template li.product .wp-block-button {
  width: 100%;
  margin-top: auto;
  margin-bottom: 0;
}

/* Il wrapper del badge AI (plugin ai-act-compliance) non deve alterare il flusso */
.aiact-badge-wrap {
  display: block;
  line-height: 0;
}

/* Badge "In offerta!" come sticker */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale,
.wc-block-grid__product-onsale {
  position: absolute;
  top: -12px;
  right: -10px;
  left: auto;
  background: var(--mm-pink);
  color: #fff;
  border: 2px solid var(--mm-ink);
  border-radius: 999px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  padding: 0.5em 1em;
  transform: rotate(6deg);
  box-shadow: 3px 3px 0 var(--mm-ink);
  z-index: 9;
  min-height: 0;
  min-width: 0;
  line-height: 1.2;
  margin: 0;
}

/* Bottone aggiungi al carrello nelle card: a tutta larghezza, centrato */
.woocommerce ul.products li.product .button,
.wc-block-grid__product .wp-block-button__link,
.wc-block-components-product-button .wp-block-button__link,
.wp-block-post-template li.product .wp-block-button__link {
  background: var(--mm-ink) !important;
  color: var(--mm-cream) !important;
  border: 2px solid var(--mm-ink) !important;
  border-radius: 999px !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.85rem !important;
  padding: 0.8em 1.4em !important;
  margin-top: auto;
  align-self: stretch;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box;
  text-align: center;
  transition: all 0.15s ease;
  box-shadow: none;
}

.woocommerce ul.products li.product .button:hover,
.wc-block-grid__product .wp-block-button__link:hover,
.wc-block-components-product-button .wp-block-button__link:hover,
.wp-block-post-template li.product .wp-block-button__link:hover {
  background: var(--mm-pink) !important;
  color: #fff !important;
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--mm-ink);
}

/* =====================================================
   7. PAGINE WOOCOMMERCE (shop, prodotto, carrello, checkout)
   ===================================================== */

/* Titoli archivio */
.woocommerce-products-header__title,
.wp-block-query-title {
  font-size: clamp(2rem, 5vw, 3.2rem);
}

/* Breadcrumb */
.woocommerce-breadcrumb,
.wc-block-breadcrumbs {
  font-size: 0.85rem !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

/* Ordinamento e conteggio risultati */
.woocommerce-ordering select,
.wc-block-product-filters select,
select.orderby {
  border: 2px solid var(--mm-ink);
  border-radius: 999px;
  padding: 0.45em 1em;
  background: #fff;
  font-weight: 600;
}

/* Galleria immagine prodotto singolo */
.woocommerce div.product div.images img,
.wp-block-woocommerce-product-image-gallery img,
.woocommerce-product-gallery img {
  border: var(--mm-border);
  border-radius: var(--mm-radius);
}

/* Prezzo prodotto singolo: pillola gialla ben visibile */
.woocommerce div.product p.price,
.woocommerce div.product span.price,
.wp-block-woocommerce-product-price .wc-block-components-product-price {
  color: var(--mm-ink) !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
}

.woocommerce div.product p.price {
  display: inline-block;
  background: var(--mm-yellow);
  border: 2px solid var(--mm-ink);
  border-radius: 999px;
  padding: 0.05em 0.6em;
  box-shadow: 3px 3px 0 var(--mm-ink);
}

/* Quantità */
.woocommerce div.product form.cart div.quantity .qty,
.wc-block-components-quantity-selector {
  border: 2px solid var(--mm-ink);
  border-radius: 10px;
}

/* Bottoni Woo generici (single product, carrello, checkout classici) */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce div.product form.cart .button {
  background: var(--mm-yellow);
  color: var(--mm-ink);
  border: var(--mm-border);
  border-radius: var(--mm-radius-sm);
  box-shadow: var(--mm-shadow-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.85em 1.6em;
  transition: all 0.15s ease;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce div.product form.cart .button:hover {
  background: var(--mm-pink);
  color: #fff;
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--mm-ink);
}

/* Bottoni dei blocchi carrello/checkout */
.wc-block-components-button:not(.is-link) {
  background: var(--mm-yellow) !important;
  color: var(--mm-ink) !important;
  border: var(--mm-border) !important;
  border-radius: var(--mm-radius-sm) !important;
  box-shadow: var(--mm-shadow-sm);
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: all 0.15s ease;
}

.wc-block-components-button:not(.is-link):hover {
  background: var(--mm-pink) !important;
  color: #fff !important;
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--mm-ink);
}

/* Tabs descrizione/recensioni */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding: 0;
  margin-bottom: 1.5rem;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
  border-bottom: var(--mm-border);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: #fff;
  border: 2px solid var(--mm-ink);
  border-radius: 10px 10px 0 0;
  margin-right: 0.4rem;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background: var(--mm-yellow);
}

/* Notifiche */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
  border: var(--mm-border) !important;
  border-radius: var(--mm-radius-sm);
  background: #fff !important;
  color: var(--mm-ink) !important;
  box-shadow: var(--mm-shadow-sm);
}

.woocommerce-message::before { color: var(--mm-teal); }
.woocommerce-info::before { color: var(--mm-violet); }

/* Campi form (checkout, account) */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.wc-block-components-text-input input,
.wc-block-components-combobox .wc-block-components-combobox-control input {
  border: 2px solid var(--mm-ink) !important;
  border-radius: 10px !important;
  padding: 0.6em 0.9em;
  background: #fff;
}

/* Tabella carrello classico */
.woocommerce table.shop_table {
  border: var(--mm-border);
  border-radius: var(--mm-radius);
  overflow: hidden;
}

/* =====================================================
   8. SEZIONI FRONT PAGE
   ===================================================== */

/* Banda USP */
.mm-usp-card {
  background: #fff;
  border: var(--mm-border);
  border-radius: var(--mm-radius);
  box-shadow: var(--mm-shadow-sm);
  padding: 1.75rem 1.5rem !important;
  height: 100%;
}

.mm-usp-card .mm-usp-emoji {
  font-size: 2.6rem;
  line-height: 1;
  margin-bottom: 0.5rem;
}

.mm-usp-card h3 {
  font-size: 1.1rem;
  margin: 0 0 0.4rem;
}

.mm-usp-card p {
  font-size: 0.95rem;
  margin: 0;
}

/* Banda newsletter */
.mm-newsletter {
  border: var(--mm-border);
  border-radius: calc(var(--mm-radius) + 8px);
  box-shadow: var(--mm-shadow);
  overflow: hidden;
}

.mm-newsletter h2 {
  color: #fff;
}

.mm-newsletter p {
  color: rgba(255, 255, 255, 0.85);
}

/* =====================================================
   9. FOOTER
   ===================================================== */

.mm-footer {
  background: var(--mm-ink);
  color: var(--mm-cream);
  border-top: var(--mm-border);
}

.mm-footer a {
  color: var(--mm-cream);
  text-decoration: none;
}

.mm-footer a:hover {
  color: var(--mm-yellow);
}

.mm-footer .mm-footer-wordmark {
  font-family: "Archivo Black", "Arial Black", sans-serif;
  font-size: clamp(3rem, 10vw, 7rem);
  line-height: 0.95;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 2px var(--mm-cream);
  margin: 0;
  user-select: none;
}

.mm-footer .mm-footer-heading {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--mm-yellow);
  font-weight: 700;
  margin-bottom: 0.6rem;
}

.mm-footer .mm-footer-bottom {
  border-top: 1px solid rgba(255, 246, 233, 0.25);
  font-size: 0.85rem;
}

/* =====================================================
   10. VARIE
   ===================================================== */

/* Paginazione */
.woocommerce nav.woocommerce-pagination ul {
  border: none;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: none;
  margin: 0 0.2rem;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  border: 2px solid var(--mm-ink);
  border-radius: 10px;
  font-weight: 700;
  padding: 0.5em 0.9em;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--mm-yellow);
  color: var(--mm-ink);
}

/* Star rating */
.woocommerce .star-rating span::before,
.wc-block-components-product-rating__stars span::before {
  color: var(--mm-yellow);
  -webkit-text-stroke: 1px var(--mm-ink);
}

/* Scrollbar (WebKit) */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: var(--mm-cream);
}

::-webkit-scrollbar-thumb {
  background: var(--mm-ink);
  border-radius: 999px;
  border: 3px solid var(--mm-cream);
}