/*
Theme Name: Cartoplanet
Template: twentytwentyfive
Description: Tema per Cartoplanet, cartolibreria in Piazza Indipendenza a Lecce.
Version: 1.0.0
Text Domain: cartoplanet
*/

:root {
  --cp-ink: var(--wp--preset--color--ink);
  --cp-ink-deep: var(--wp--preset--color--ink-deep);
  --cp-marker: var(--wp--preset--color--marker);
  --cp-grid: var(--wp--preset--color--grid);
  --cp-text: var(--wp--preset--color--pencil);
  --cp-margin-line: #F4A7B9;
  --cp-red: var(--wp--preset--color--planet-red);
  --cp-radius: 18px;
}

/* Evidenziatore: il segno grafico del sito */
mark, .cp-marker {
  background: linear-gradient(100deg, transparent 2%, var(--cp-marker) 4%, var(--cp-marker) 96%, transparent 98%) 0 62% / 100% 46% no-repeat;
  color: inherit;
  padding: 0 0.06em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Carta a quadretti con il margine rosa del quaderno */
.cp-grid {
  background-color: var(--wp--preset--color--paper);
  background-image:
    linear-gradient(90deg, transparent calc(4vw - 1px), var(--cp-margin-line) calc(4vw - 1px), var(--cp-margin-line) 4vw, transparent 4vw),
    linear-gradient(var(--cp-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--cp-grid) 1px, transparent 1px);
  background-size: 100% 100%, 28px 28px, 28px 28px;
}

.cp-hand {
  font-family: var(--wp--preset--font-family--hand);
  font-weight: 600;
  color: var(--cp-ink);
  font-size: 1.6rem;
  line-height: 1.1;
}

.cp-eyebrow {
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cp-ink);
}

/* Header (sticky sul contenitore della template part) */
header.wp-block-template-part { position: sticky; top: 0; z-index: 50; }
.admin-bar header.wp-block-template-part { top: 32px; }
@media (max-width: 782px) { .admin-bar header.wp-block-template-part { top: 0; } }
.cp-header {
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cp-grid);
}
.cp-header .wp-block-site-title a { text-decoration: none; color: var(--cp-text); }
.cp-header .wp-block-navigation a { text-decoration: none; }
.cp-header .wp-block-navigation a:hover { text-decoration: underline; text-decoration-color: var(--cp-marker); text-decoration-thickness: 0.35em; text-underline-offset: -0.15em; }

/* Bottoni */
.wp-block-button.is-style-outline > .wp-block-button__link {
  border: 2px solid var(--cp-text);
  color: var(--cp-text);
  background: transparent;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--cp-marker); }
.cp-btn-marker .wp-block-button__link { background: var(--cp-marker); color: var(--cp-text); }
.cp-btn-marker .wp-block-button__link:hover { background: #fff47a; }

/* Hero: pagina di quaderno con la lista della scuola */
.cp-notebook {
  position: relative;
  background:
    linear-gradient(transparent 2.15rem, transparent 2.15rem),
    repeating-linear-gradient(transparent 0 2.2rem, #CFD9F2 2.2rem calc(2.2rem + 1px));
  background-color: #fff;
  border-radius: 6px;
  padding: 3.2rem 2rem 1.8rem 3.4rem;
  box-shadow: 0 1px 0 rgba(20, 23, 43, 0.06), 0 24px 48px -18px rgba(14, 31, 115, 0.35);
  transform: rotate(2.2deg);
  max-width: 420px;
  margin-left: auto;
}
.cp-notebook::before {
  /* fori della spirale */
  content: "";
  position: absolute;
  inset: 0.9rem 1.2rem auto 1.2rem;
  height: 0.9rem;
  background: radial-gradient(circle, #e9ecf5 0.32rem, transparent 0.34rem) 0 0 / 1.6rem 0.9rem repeat-x;
}
.cp-notebook::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 2.4rem;
  width: 1px;
  background: var(--cp-margin-line);
}
.cp-notebook h3 { font-size: 1.15rem; margin: 0 0 0.6rem; }
.cp-notebook ul { list-style: none; margin: 0; padding: 0; }
.cp-notebook li {
  font-family: var(--wp--preset--font-family--hand);
  font-weight: 600;
  font-size: 1.55rem;
  line-height: 2.2rem;
  color: var(--cp-ink);
}
.cp-notebook li::before { content: "☐  "; font-family: var(--wp--preset--font-family--body); font-size: 1.1rem; color: var(--cp-muted, #565C75); }
.cp-notebook li.done::before { content: "☑  "; color: var(--cp-ink); }
.cp-notebook li.done span {
  background: linear-gradient(100deg, transparent 1%, var(--cp-marker) 3%, var(--cp-marker) 97%, transparent 99%) 0 70% / 100% 45% no-repeat;
  text-decoration: line-through;
  text-decoration-color: var(--cp-ink);
  text-decoration-thickness: 2px;
}
.cp-notebook .cp-notebook-foot { margin-top: 1rem; font-size: 0.95rem; color: var(--cp-text); }

/* Striscia vantaggi */
.cp-perks { gap: 0.75rem !important; }
.cp-perks p {
  margin: 0;
  padding: 0.55rem 1rem;
  border: 2px solid var(--cp-text);
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  background: #fff;
}

/* Categorie: tessere "adesivo" con ombra netta */
.cp-cats { gap: 1rem !important; }
.cp-cat {
  border: 2px solid var(--cp-text);
  border-radius: var(--cp-radius);
  padding: 1.4rem 1.4rem 1.2rem !important;
  min-height: 170px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 0 0 var(--cp-text);
}
.cp-cat:hover, .cp-cat:focus-within { transform: translate(-4px, -4px); box-shadow: 6px 6px 0 var(--cp-text); }
.cp-cat h3 { margin: 0; }
.cp-cat h3 a { color: var(--cp-text); text-decoration: none; }
.cp-cat h3 a::after { content: ""; position: absolute; inset: 0; }
.cp-cat { position: relative; }
.cp-cat p { margin: 0.35rem 0 0; font-size: 0.95rem; color: var(--cp-text); }
.cp-cat .cp-cat-icon { font-size: 2rem; line-height: 1; margin: 0 0 0.9rem; }

/* Servizi in negozio */
.cp-services .cp-service {
  border-top: 2px solid rgba(255, 255, 255, 0.25);
  padding-top: 1rem;
}
.cp-services .cp-service h3 { color: #fff; margin: 0 0 0.3rem; }
.cp-services .cp-service p { margin: 0; color: rgba(255, 255, 255, 0.82); }
.cp-services a { color: var(--cp-marker); }

/* Mappa */
.cp-map iframe { width: 100%; height: 380px; border: 2px solid var(--cp-text); border-radius: var(--cp-radius); display: block; }

/* Prodotti WooCommerce (loop classico) */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
  border: 2px solid var(--cp-text);
  border-radius: var(--cp-radius);
  padding: 0.9rem 0.9rem 1.2rem;
  background: #fff;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.woocommerce ul.products li.product:hover { transform: translate(-3px, -3px); box-shadow: 5px 5px 0 var(--cp-text); }
.woocommerce ul.products li.product a img { border-radius: 12px; margin-bottom: 0.8rem; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--cp-text);
}
.woocommerce ul.products li.product .price { color: var(--cp-ink); font-weight: 700; font-size: 1.05rem; }
.woocommerce ul.products li.product .button {
  border-radius: 999px;
  background: var(--cp-ink);
  color: #fff;
  font-weight: 700;
}
.woocommerce ul.products li.product .button:hover { background: var(--cp-ink-deep); color: #fff; }
.woocommerce span.onsale { background: var(--cp-marker); color: var(--cp-text); font-weight: 800; }

/* Blocchi prodotto WooCommerce */
.wc-block-components-product-image img, .wp-block-woocommerce-product-image img { border-radius: 12px; }
.wp-block-woocommerce-product-price { color: var(--cp-ink); font-weight: 700; }

/* Footer */
.cp-footer a { color: #fff; }
.cp-footer a:hover { color: var(--cp-marker); }

/* Accessibilità */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--cp-ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--cp-marker);
}

@media (max-width: 781px) {
  .cp-notebook { transform: rotate(1deg); margin: 1.5rem auto 0; }
  .cp-grid { background-size: 100% 100%, 22px 22px, 22px 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .cp-cat, .woocommerce ul.products li.product { transition: none; }
  .cp-cat:hover { background-position: right 0.8rem bottom 0.6rem; }
  .cp-cat:hover, .woocommerce ul.products li.product:hover { transform: none; }
}

.cp-services mark { color: var(--cp-text); }
.cp-page-hero { border-bottom: 1px solid var(--cp-grid); }
.cp-steps li::marker { font-family: var(--wp--preset--font-family--display); font-weight: 800; color: var(--cp-ink); }

/* Illustrazioni nelle tessere categoria */
.cp-cat { padding-right: 8.5rem !important; background-repeat: no-repeat; background-position: right 0.8rem bottom 0.6rem; background-size: 120px auto; overflow: hidden; }
.cp-cat--scuola { background-image: url(assets/img/cat-scuola.png); }
.cp-cat--cartoleria { background-image: url(assets/img/cat-cartoleria.png); }
.cp-cat--ufficio { background-image: url(assets/img/cat-ufficio.png); }
.cp-cat--regali { background-image: url(assets/img/cat-regali.png); }
.cp-cat--giochi { background-image: url(assets/img/cat-giochi.png); }
.cp-cat--servizi { background-image: url(assets/img/cat-servizi.png); }
.cp-cat:hover { background-position: right 0.8rem bottom 1rem; }

/* Griglia prodotti: CSS grid al posto dei float di WooCommerce */
.woocommerce ul.products, .woocommerce-page ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.5rem;
  margin: 0;
}
.woocommerce ul.products::before, .woocommerce ul.products::after { display: none !important; }
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
}
.woocommerce ul.products li.product .button { margin-top: auto; align-self: flex-start; }
.woocommerce ul.products li.product .woocommerce-loop-product__link { text-decoration: none; }

/* Griglia prodotti a blocchi (pagina negozio, categorie) */
li.wc-block-product {
  border: 2px solid var(--cp-text);
  border-radius: var(--cp-radius);
  padding: 0.9rem 0.9rem 1.2rem !important;
  background: #fff;
  display: flex;
  flex-direction: column;
  text-align: left;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
li.wc-block-product:hover { transform: translate(-3px, -3px); box-shadow: 5px 5px 0 var(--cp-text); }
li.wc-block-product .wp-block-post-title {
  text-align: left !important;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600;
  font-size: 1.05rem !important;
  letter-spacing: -0.01em;
  margin: 0.8rem 0 0.3rem;
}
li.wc-block-product .wp-block-post-title a { color: var(--cp-text); text-decoration: none; }
li.wc-block-product .wp-block-woocommerce-product-price { text-align: left !important; }
li.wc-block-product .wp-block-woocommerce-product-price * { text-align: left !important; justify-content: flex-start !important; }
li.wc-block-product .wc-block-components-product-button { margin-top: auto; align-items: flex-start !important; justify-content: flex-start !important; }
li.wc-block-product .wc-block-components-product-button .wp-block-button__link { border-radius: 999px; font-weight: 700; }
.wc-block-components-product-sale-badge { background: var(--cp-marker) !important; color: var(--cp-text) !important; border: 0 !important; border-radius: 999px !important; font-weight: 800; }
@media (prefers-reduced-motion: reduce) { li.wc-block-product { transition: none; } li.wc-block-product:hover { transform: none; } }

/* Rifiniture */
.cp-header .wp-block-site-title { white-space: nowrap; }
.cp-footer ul.wp-block-list { list-style: none; padding-left: 0; }
.entry-content > .wp-block-group h2.wp-block-heading:not(:first-child),
.wp-block-post-content > .wp-block-group h2.wp-block-heading:not(:first-child) { margin-top: 2.75rem; }
@media (max-width: 600px) {
  .cp-cat { padding-right: 6.5rem !important; background-size: 90px auto; min-height: 140px; }
  .cp-perks p { font-size: 0.85rem; padding: 0.45rem 0.8rem; }
}

/* Logo */
.cp-logo img { display: block; height: auto; }
@media (max-width: 600px) { .cp-logo img { width: 150px !important; } }
.cp-footer-logo { background: #fff; display: inline-block; padding: 0.9rem 1.2rem; border-radius: 14px; }
.cp-footer-logo img { display: block; }
/* Accento rosso del logo, usato poco */
.cp-eyebrow::before { content: ""; display: inline-block; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--cp-red); margin-right: 0.5em; vertical-align: 0.05em; }
.cp-footer .cp-eyebrow::before { display: none; }
.wc-block-mini-cart__badge, .wc-block-mini-cart__quantity-badge .wc-block-mini-cart__badge { background: var(--cp-red) !important; color: #fff !important; }